Add Calendar and Collapsible components, adjust typing of component

.changeset/clean-ladybugs-remain.md

@@ -0,0 +1,5 @@
+---
+'@jeanne-mas/svelte-ui': minor
+---
+
+Added Calendar and Collapsible components

package.json

@@ -22,6 +22,10 @@
       "types": "./dist/components/button/index.d.ts",
       "svelte": "./dist/components/button/index.js"
     },
+    "./components/calendar": {
+      "types": "./dist/components/calendar/index.d.ts",
+      "svelte": "./dist/components/calendar/index.js"
+    },
     "./components/collapsible": {
       "types": "./dist/components/collapsible/index.d.ts",
       "svelte": "./dist/components/collapsible/index.js"
@@ -93,8 +97,10 @@
   "types": "./dist/index.d.ts",
   "type": "module",
   "dependencies": {
+    "@internationalized/date": "^3.5.2",
     "bits-ui": "^0.21.2",
     "clsx": "^2.1.0",
+    "lucide-svelte": "^0.368.0",
     "tailwind-merge": "^2.2.2",
     "tailwind-variants": "^0.2.1"
   }

src/app.pcss

@@ -82,3 +82,15 @@
       'calt' 1;
   }
 }
+
+[data-form] {
+  @apply grid grid-cols-[auto_1fr] justify-items-stretch gap-2;
+
+  & [data-label] {
+    @apply text-right font-bold;
+  }
+
+  & [data-control] {
+    @apply rounded border border-border px-2 py-1;
+  }
+}

src/lib/components/button/Button.svelte

@@ -3,6 +3,7 @@
   import { tv, type VariantProps } from 'tailwind-variants';
 
   import { cn } from '$lib/utils/cn.js';
+  import type { ComponentSlots } from '$lib/utils/types.js';
 
   export type Attributes = ButtonPrimitive.Props;
   export type Events = Record<never, never>;
@@ -21,6 +22,7 @@
     variant?: Variant;
   };
   export type Size = NonNullable<VariantProps<typeof variants>['size']>;
+  export type Slots = ComponentSlots<ButtonPrimitive.Root>;
   export type Variant = NonNullable<VariantProps<typeof variants>['variant']>;
 
   export const variants = tv({
@@ -59,12 +61,10 @@
 <script lang="ts">
   type $$Events = ButtonPrimitive.Events;
   type $$Props = Attributes & Events & Props;
-  type $$Slots = {
-    default: Record<never, never>;
-  };
+  type $$Slots = Slots;
 
-  export let size: Props['size'] = 'default';
-  export let variant: Props['variant'] = 'default';
+  export let size: Props['size'] = undefined;
+  export let variant: Props['variant'] = undefined;
 
   $: attributes = $$restProps as Attributes;
 </script>

src/lib/components/button/index.ts

@@ -5,5 +5,6 @@ export {
   type Events,
   type Props,
   type Size,
+  type Slots,
   type Variant,
 } from './Button.svelte';

src/lib/components/calendar/Cell.svelte

@@ -0,0 +1,46 @@
+<script context="module" lang="ts">
+  import { Calendar as CalendarPrimitive } from 'bits-ui';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+
+  import { cn } from '$lib/utils/cn.js';
+  import type { ComponentSlots } from '$lib/utils/types.js';
+
+  export type Attributes = SvelteHTMLElements['td'];
+  export type Events = Record<never, never>;
+  export type Props = Omit<CalendarPrimitive.CellProps, keyof Attributes>;
+  export type Slots = ComponentSlots<CalendarPrimitive.Cell>;
+</script>
+
+<script lang="ts">
+  type $$Events = Record<never, never>;
+  type $$Props = Attributes & Events & Props;
+  type $$Slots = Slots;
+
+  export let asChild: Props['asChild'] = undefined;
+  export let date: Props['date'];
+  export let el: Props['el'] = undefined;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<CalendarPrimitive.Cell
+  {...attributes}
+  asChild="{asChild}"
+  class="{cn(
+    'relative h-9 w-9 p-0 text-center text-sm',
+    'focus-within:relative focus-within:z-20',
+    '[&:has([data-selected])]:bg-accent',
+    'first:[&:has([data-selected])]:rounded-l-md',
+    'last:[&:has([data-selected])]:rounded-r-md',
+    '[&:has([data-selected][data-outside-month])]:bg-accent/50',
+    attributes.class,
+  )}"
+  date="{date}"
+  el="{el}"
+  let:attrs
+>
+  <slot attrs="{attrs}" />
+</CalendarPrimitive.Cell>

src/lib/components/calendar/Day.svelte

@@ -0,0 +1,62 @@
+<script context="module" lang="ts">
+  import { Calendar as CalendarPrimitive } from 'bits-ui';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+
+  import { variants } from '$lib/components/button/index.js';
+  import { cn } from '$lib/utils/cn.js';
+  import type { ComponentSlots } from '$lib/utils/types.js';
+
+  export type Attributes = SvelteHTMLElements['div'];
+  export type Events = Record<never, never>;
+  export type Props = Omit<CalendarPrimitive.DayProps, keyof Attributes>;
+  export type Slots = ComponentSlots<CalendarPrimitive.Day>;
+</script>
+
+<script lang="ts">
+  type $$Events = CalendarPrimitive.DayEvents;
+  type $$Props = Attributes & Events & Props;
+  type $$Slots = Slots;
+
+  export let asChild: Props['asChild'] = undefined;
+  export let date: Props['date'];
+  export let el: Props['el'] = undefined;
+  export let month: Props['month'];
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<CalendarPrimitive.Day
+  {...attributes}
+  asChild="{asChild}"
+  class="{cn(
+    variants({ variant: 'ghost' }),
+
+    'h-9 w-9 p-0 font-normal ',
+    '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+    // Selected
+    'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
+    // Disabled
+    'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+    // Unavailable
+    'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+    // Outside months
+    'data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30',
+
+    attributes.class,
+  )}"
+  date="{date}"
+  el="{el}"
+  month="{month}"
+  let:builder
+  let:disabled
+  let:selected
+  let:unavailable
+  on:click
+>
+  <slot builder="{builder}" disabled="{disabled}" selected="{selected}" unavailable="{unavailable}">
+    {date.day}
+  </slot>
+</CalendarPrimitive.Day>

src/lib/components/calendar/Grid.svelte

@@ -0,0 +1,36 @@
+<script context="module" lang="ts">
+  import { Calendar as CalendarPrimitive } from 'bits-ui';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+
+  import { cn } from '$lib/utils/cn.js';
+  import type { ComponentSlots } from '$lib/utils/types.js';
+
+  export type Attributes = SvelteHTMLElements['table'];
+  export type Events = Record<never, never>;
+  export type Props = Omit<CalendarPrimitive.GridProps, keyof Attributes>;
+  export type Slots = ComponentSlots<CalendarPrimitive.Grid>;
+</script>
+
+<script lang="ts">
+  type $$Events = Record<never, never>;
+  type $$Props = Attributes & Events & Props;
+  type $$Slots = Slots;
+
+  export let asChild: Props['asChild'] = undefined;
+  export let el: Props['el'] = undefined;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<CalendarPrimitive.Grid
+  {...attributes}
+  asChild="{asChild}"
+  class="{cn('w-full border-collapse space-y-1', attributes.class)}"
+  el="{el}"
+  let:builder
+>
+  <slot builder="{builder}" />
+</CalendarPrimitive.Grid>

src/lib/components/calendar/GridBody.svelte

@@ -0,0 +1,36 @@
+<script context="module" lang="ts">
+  import { Calendar as CalendarPrimitive } from 'bits-ui';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+
+  import { cn } from '$lib/utils/cn.js';
+  import type { ComponentSlots } from '$lib/utils/types.js';
+
+  export type Attributes = SvelteHTMLElements['tbody'];
+  export type Events = Record<never, never>;
+  export type Props = Omit<CalendarPrimitive.GridBodyProps, keyof Attributes>;
+  export type Slots = ComponentSlots<CalendarPrimitive.GridBody>;
+</script>
+
+<script lang="ts">
+  type $$Events = Record<never, never>;
+  type $$Props = Attributes & Events & Props;
+  type $$Slots = Slots;
+
+  export let asChild: Props['asChild'] = undefined;
+  export let el: Props['el'] = undefined;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<CalendarPrimitive.GridBody
+  {...attributes}
+  asChild="{asChild}"
+  class="{cn(attributes.class)}"
+  el="{el}"
+  let:attrs
+>
+  <slot attrs="{attrs}" />
+</CalendarPrimitive.GridBody>

src/lib/components/calendar/GridHead.svelte

@@ -0,0 +1,36 @@
+<script context="module" lang="ts">
+  import { Calendar as CalendarPrimitive } from 'bits-ui';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+
+  import { cn } from '$lib/utils/cn.js';
+  import type { ComponentSlots } from '$lib/utils/types.js';
+
+  export type Attributes = SvelteHTMLElements['thead'];
+  export type Events = Record<never, never>;
+  export type Props = Omit<CalendarPrimitive.GridHeadProps, keyof Attributes>;
+  export type Slots = ComponentSlots<CalendarPrimitive.GridHead>;
+</script>
+
+<script lang="ts">
+  type $$Events = Record<never, never>;
+  type $$Props = Attributes & Events & Props;
+  type $$Slots = Slots;
+
+  export let asChild: Props['asChild'] = undefined;
+  export let el: Props['el'] = undefined;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<CalendarPrimitive.GridHead
+  {...attributes}
+  asChild="{asChild}"
+  class="{cn(attributes.class)}"
+  el="{el}"
+  let:attrs
+>
+  <slot attrs="{attrs}" />
+</CalendarPrimitive.GridHead>

src/lib/components/calendar/GridRow.svelte

@@ -0,0 +1,36 @@
+<script context="module" lang="ts">
+  import { Calendar as CalendarPrimitive } from 'bits-ui';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+
+  import { cn } from '$lib/utils/cn.js';
+  import type { ComponentSlots } from '$lib/utils/types.js';
+
+  export type Attributes = SvelteHTMLElements['tr'];
+  export type Events = Record<never, never>;
+  export type Props = Omit<CalendarPrimitive.GridRowProps, keyof Attributes>;
+  export type Slots = ComponentSlots<CalendarPrimitive.GridRow>;
+</script>
+
+<script lang="ts">
+  type $$Events = Record<never, never>;
+  type $$Props = Attributes & Events & Props;
+  type $$Slots = Slots;
+
+  export let asChild: Props['asChild'] = undefined;
+  export let el: Props['el'] = undefined;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<CalendarPrimitive.GridRow
+  {...attributes}
+  asChild="{asChild}"
+  class="{cn('flex', attributes.class)}"
+  el="{el}"
+  let:attrs
+>
+  <slot attrs="{attrs}" />
+</CalendarPrimitive.GridRow>