component: Calendar

src/lib/components/calendar/CalendarCell.svelte

@@ -1,10 +1,13 @@
 <script context="module" lang="ts">
   import { Calendar as CalendarPrimitive } from 'bits-ui';
   import type { SvelteHTMLElements } from 'svelte/elements';
+  import { writable } from 'svelte/store';
   import { tv } from 'tailwind-variants';
 
   import type { ComponentInfo } from '$lib/utils/types.js';
 
+  import { cellContext, gridRowContext } from './context.js';
+
   type Primitive = ComponentInfo<CalendarPrimitive.Cell>;
 
   /**
@@ -45,11 +48,50 @@
   export let el: Props['el'] = undefined;
 
   $: attributes = $$restProps as Attributes;
+
+  const gridRowCtx = gridRowContext.get();
+
+  if (!gridRowCtx) {
+    throw new Error('Calendar.Cell must be used within a Calendar.GridRow component.');
+  }
+
+  const cellCtx = cellContext.set(writable());
+
+  $: cellCtx.update(($ctx) => ({
+    ...$ctx,
+  }));
 </script>
 
 <!-- <style lang="postcss">
 </style> -->
 
+<!--
+@component
+
+A cell of a month inside a calendar component.
+
+Must be used within a `Calendar.GridRow` component.
+
+### Attributes
+
+Accepts the attributes of a `td` element.
+
+### Events
+
+None.
+
+### Props
+
+- `asChild` - Whether to delegate rendering the element to your own custom element.
+- `date` - The date value of the cell.
+- `el` - Bind to the underlying DOM element of the component.
+
+### Slots
+
+- `default` - The default slot.
+  - `attrs` - The attributes of the cell.
+-->
+
 <CalendarPrimitive.Cell
   {...attributes}
   asChild="{asChild}"

src/lib/components/calendar/CalendarDay.svelte

@@ -6,6 +6,8 @@
   import * as Button from '$lib/components/button/index.js';
   import type { ComponentInfo } from '$lib/utils/types.js';
 
+  import { cellContext } from './context.js';
+
   type Primitive = ComponentInfo<CalendarPrimitive.Day>;
 
   /**
@@ -26,7 +28,9 @@
    */
   export const dayStyles = tv({
     base: [
-      Button.rootStyles({ variant: 'ghost' }),
+      Button.rootStyles({
+        variant: 'ghost',
+      }),
 
       'size-8 p-0 font-normal ',
       '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
@@ -56,11 +60,48 @@
   export let month: Props['month'];
 
   $: attributes = $$restProps as Attributes;
+
+  const cellCtx = cellContext.get();
+
+  if (!cellCtx) {
+    throw new Error('Calendar.Day must be used within a Calendar.Cell component.');
+  }
 </script>
 
 <!-- <style lang="postcss">
 </style> -->
 
+<!--
+@component
+
+A day of a month inside a calendar component.
+
+Must be used within a `Calendar.Cell` component.
+
+### Attributes
+
+Accepts the attributes of a `div` element.
+
+### Events
+
+- `click`
+
+### Props
+
+- `asChild` - Whether to delegate rendering the element to your own custom element.
+- `date` - The date value of the cell.
+- `el` - Bind to the underlying DOM element of the component.
+- `month` - The month value that the cell belongs to.
+
+### Slots
+
+- `default` - The default slot.
+  - `builder` - The builder object, provided when `asChild=true`.
+  - `disabled` - Whether the day is disabled.
+  - `selected` - Whether the day is selected.
+  - `unavailable` - Whether the day is unavailable.
+-->
+
 <CalendarPrimitive.Day
   {...attributes}
   asChild="{asChild}"

src/lib/components/calendar/CalendarGrid.svelte

@@ -1,10 +1,13 @@
 <script context="module" lang="ts">
   import { Calendar as CalendarPrimitive } from 'bits-ui';
   import type { SvelteHTMLElements } from 'svelte/elements';
+  import { writable } from 'svelte/store';
   import { tv } from 'tailwind-variants';
 
   import type { ComponentInfo } from '$lib/utils/types.js';
 
+  import { gridContext, monthsContext } from './context.js';
+
   type Primitive = ComponentInfo<CalendarPrimitive.Grid>;
 
   /**
@@ -37,11 +40,49 @@
   export let el: Props['el'] = undefined;
 
   $: attributes = $$restProps as Attributes;
+
+  const monthsCtx = monthsContext.get();
+
+  if (!monthsCtx) {
+    throw new Error('Calendar.Grid must be used within a Calendar.Months component.');
+  }
+
+  const gridCtx = gridContext.set(writable());
+
+  $: gridCtx.update(($ctx) => ({
+    ...$ctx,
+  }));
 </script>
 
 <!-- <style lang="postcss">
 </style> -->
 
+<!--
+@component
+
+The grid of a month inside a calendar component.
+
+Must be used within a `Calendar.Months` component.
+
+### Attributes
+
+Accepts the attributes of a `table` element.
+
+### Events
+
+None.
+
+### Props
+
+- `asChild` - Whether to delegate rendering the element to your own custom element.
+- `el` - Bind to the underlying DOM element of the component.
+
+### Slots
+
+- `default` - The default slot.
+  - `builder` - The builder object, provided when `asChild=true`.
+-->
+
 <CalendarPrimitive.Grid
   {...attributes}
   asChild="{asChild}"

src/lib/components/calendar/CalendarGridBody.svelte

@@ -1,10 +1,13 @@
 <script context="module" lang="ts">
   import { Calendar as CalendarPrimitive } from 'bits-ui';
   import type { SvelteHTMLElements } from 'svelte/elements';
+  import { writable } from 'svelte/store';
   import { tv } from 'tailwind-variants';
 
   import type { ComponentInfo } from '$lib/utils/types.js';
 
+  import { gridBodyContext, gridContext } from './context.js';
+
   type Primitive = ComponentInfo<CalendarPrimitive.GridBody>;
 
   /**
@@ -37,11 +40,49 @@
   export let el: Props['el'] = undefined;
 
   $: attributes = $$restProps as Attributes;
+
+  const gridCtx = gridContext.get();
+
+  if (!gridCtx) {
+    throw new Error('Calendar.GridBody must be used within a Calendar.Grid component.');
+  }
+
+  const gridBodyCtx = gridBodyContext.set(writable());
+
+  $: gridBodyCtx.update(($ctx) => ({
+    ...$ctx,
+  }));
 </script>
 
 <!-- <style lang="postcss">
 </style> -->
 
+<!--
+@component
+
+The grid body of a month inside a calendar component.
+
+Must be used within a `Calendar.Grid` component.
+
+### Attributes
+
+Accepts the attributes of a `tbody` element.
+
+### Events
+
+None.
+
+### Props
+
+- `asChild` - Whether to delegate rendering the element to your own custom element.
+- `el` - Bind to the underlying DOM element of the component.
+
+### Slots
+
+- `default` - The default slot.
+  - `attrs` - The attributes of the grid body.
+-->
+
 <CalendarPrimitive.GridBody
   {...attributes}
   asChild="{asChild}"

src/lib/components/calendar/CalendarGridHead.svelte

@@ -1,10 +1,13 @@
 <script context="module" lang="ts">
   import { Calendar as CalendarPrimitive } from 'bits-ui';
   import type { SvelteHTMLElements } from 'svelte/elements';
+  import { writable } from 'svelte/store';
   import { tv } from 'tailwind-variants';
 
   import type { ComponentInfo } from '$lib/utils/types.js';
 
+  import { gridContext, gridHeadContext } from './context.js';
+
   type Primitive = ComponentInfo<CalendarPrimitive.GridHead>;
 
   /**
@@ -37,11 +40,49 @@
   export let el: Props['el'] = undefined;
 
   $: attributes = $$restProps as Attributes;
+
+  const gridCtx = gridContext.get();
+
+  if (!gridCtx) {
+    throw new Error('Calendar.GridHead must be used within a Calendar.Grid component.');
+  }
+
+  const gridHeadCtx = gridHeadContext.set(writable());
+
+  $: gridHeadCtx.update(($ctx) => ({
+    ...$ctx,
+  }));
 </script>
 
 <!-- <style lang="postcss">
 </style> -->
 
+<!--
+@component
+
+The grid head of a month inside a calendar component.
+
+Must be used within a `Calendar.Grid` component.
+
+### Attributes
+
+Accepts the attributes of a `thead` element.
+
+### Events
+
+None.
+
+### Props
+
+- `asChild` - Whether to delegate rendering the element to your own custom element.
+- `el` - Bind to the underlying DOM element of the component.
+
+### Slots
+
+- `default` - The default slot.
+  - `attrs` - The attributes of the grid head.
+-->
+
 <CalendarPrimitive.GridHead
   {...attributes}
   asChild="{asChild}"

src/lib/components/calendar/CalendarGridRow.svelte

@@ -1,10 +1,13 @@
 <script context="module" lang="ts">
   import { Calendar as CalendarPrimitive } from 'bits-ui';
   import type { SvelteHTMLElements } from 'svelte/elements';
+  import { writable } from 'svelte/store';
   import { tv } from 'tailwind-variants';
 
   import type { ComponentInfo } from '$lib/utils/types.js';
 
+  import { gridBodyContext, gridHeadContext, gridRowContext } from './context.js';
+
   type Primitive = ComponentInfo<CalendarPrimitive.GridRow>;
 
   /**
@@ -37,11 +40,52 @@
   export let el: Props['el'] = undefined;
 
   $: attributes = $$restProps as Attributes;
+
+  const gridHeadCtx = gridHeadContext.get();
+  const gridBodyCtx = gridBodyContext.get();
+
+  if (!gridHeadCtx && !gridBodyCtx) {
+    throw new Error(
+      'Calendar.GridRow must be used within a Calendar.GridHead or Calendar.GridBody component.',
+    );
+  }
+
+  const gridRowCtx = gridRowContext.set(writable());
+
+  $: gridRowCtx.update(($ctx) => ({
+    ...$ctx,
+  }));
 </script>
 
 <!-- <style lang="postcss">
 </style> -->
 
+<!--
+@component
+
+The grid row of a month inside a calendar component.
+
+Must be used within a `Calendar.GridHead` or `Calendar.GridBody` components.
+
+### Attributes
+
+Accepts the attributes of a `tr` element.
+
+### Events
+
+None.
+
+### Props
+
+- `asChild` - Whether to delegate rendering the element to your own custom element.
+- `el` - Bind to the underlying DOM element of the component.
+
+### Slots
+
+- `default` - The default slot.
+  - `attrs` - The attributes of the row.
+-->
+
 <CalendarPrimitive.GridRow
   {...attributes}
   asChild="{asChild}"