@jovertical/mise-design-system 0.0.0-stage → 1.0.0

package/dist/components/forms/button-group/button-group-variants.js

@@ -0,0 +1,20 @@
+/**
+ * Origin: the React package 2.23.0 `button-group.tsx` (`buttonGroupVariants`), itself shadcn/ui new-york `button-group`
+ * Diverged: split out of the component file, as field-variants.ts is. Joined
+ *   children overlap by a pixel (`-ml-px`, `-mt-px` when vertical) instead of
+ *   dropping a border (`border-l-0`, `border-t-0`), and a toned child is raised
+ *   above its neighbours, so a critical outline button keeps its whole outline;
+ *   React's drops the shared side and shows its neighbour's grey edge there.
+ */
+import { cva } from 'class-variance-authority';
+export const buttonGroupVariants = cva("flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-tone]:not([data-tone=neutral])]:relative [&>[data-tone]:not([data-tone=neutral])]:z-[1] [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2", {
+    variants: {
+        orientation: {
+            horizontal: '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:-ml-px [&>*:not(:last-child)]:rounded-r-none',
+            vertical: 'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:-mt-px [&>*:not(:last-child)]:rounded-b-none',
+        },
+    },
+    defaultVariants: {
+        orientation: 'horizontal',
+    },
+});

package/dist/components/forms/button-group/button-group.svelte

@@ -0,0 +1,46 @@
+<!--
+  Origin: the React package 2.23.0 `button-group.tsx` (`ButtonGroup`), itself shadcn/ui new-york `button-group`
+  Svelte: shadcn-svelte `button-group`
+  Diverged: unaudited, as in the React package. `orientation` defaults to
+    `horizontal` on `data-orientation` too, where React leaves it unset.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+  import type { ButtonGroupOrientation } from './button-group-variants.js'
+
+  /**
+   * Adjacent controls that share one edge instead of each carrying its own
+   * radius and gap: a segmented set of buttons, or two buttons and the input
+   * they act on, read as one control.
+   */
+  export type ButtonGroupProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    orientation?: ButtonGroupOrientation
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import { buttonGroupVariants } from './button-group-variants.js'
+
+  let {
+    ref = $bindable(null),
+    orientation = 'horizontal',
+    class: className,
+    children,
+    ...rest
+  }: ButtonGroupProps = $props()
+</script>
+
+<!-- biome-ignore lint/a11y/useSemanticElements: upstream shadcn markup. The element is a styling wrapper carrying a role for grouping, not a landmark, and no semantic element covers it -->
+<div
+  bind:this={ref}
+  role="group"
+  data-slot="button-group"
+  data-orientation={orientation}
+  class={cn(buttonGroupVariants({ orientation }), className)}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/forms/button-group/button-group.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+import type { ButtonGroupOrientation } from './button-group-variants.js';
+/**
+ * Adjacent controls that share one edge instead of each carrying its own
+ * radius and gap: a segmented set of buttons, or two buttons and the input
+ * they act on, read as one control.
+ */
+export type ButtonGroupProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    orientation?: ButtonGroupOrientation;
+};
+declare const ButtonGroup: import("svelte").Component<ButtonGroupProps, {}, "ref">;
+type ButtonGroup = ReturnType<typeof ButtonGroup>;
+export default ButtonGroup;

package/dist/components/forms/button-group/index.d.ts

@@ -0,0 +1,4 @@
+export { type ButtonGroupProps, default as ButtonGroup } from './button-group.svelte';
+export { type ButtonGroupSeparatorProps, default as ButtonGroupSeparator, } from './button-group-separator.svelte';
+export { type ButtonGroupTextProps, default as ButtonGroupText } from './button-group-text.svelte';
+export { type ButtonGroupOrientation, buttonGroupVariants } from './button-group-variants.js';

package/dist/components/forms/button-group/index.js

@@ -0,0 +1,4 @@
+export { default as ButtonGroup } from './button-group.svelte';
+export { default as ButtonGroupSeparator, } from './button-group-separator.svelte';
+export { default as ButtonGroupText } from './button-group-text.svelte';
+export { buttonGroupVariants } from './button-group-variants.js';

package/dist/components/forms/calendar/calendar-caption.svelte

@@ -0,0 +1,103 @@
+<!--
+  Origin: the React package 2.23.0 `calendar.tsx` (`caption_label`, `dropdowns`)
+  Svelte: shadcn-svelte `calendar`
+  Diverged: the caption as its own part, drawn for Calendar and RangeCalendar
+    alike from whichever bits-ui primitive renders it. Not exported. The
+    dropdowns are bits-ui's MonthSelect and YearSelect behind React's invisible
+    native select, as react-day-picker drew them. Lucide's chevron-down.
+-->
+<script lang="ts" module>
+  import type { DateValue } from '@internationalized/date'
+  import type {
+    Calendar as CalendarPrimitive,
+    RangeCalendar as RangeCalendarPrimitive,
+  } from 'bits-ui'
+
+  import type { CalendarCaptionLayout } from './calendar-classes.js'
+
+  export type CalendarCaptionProps = {
+    primitive: typeof CalendarPrimitive | typeof RangeCalendarPrimitive
+    layout: CalendarCaptionLayout
+    /** The month this caption heads. */
+    month: DateValue
+    /** Which of the visible months it is, so a month pick moves the first one. */
+    monthIndex: number
+    locale: string
+    placeholder?: DateValue
+  }
+</script>
+
+<script lang="ts">
+  import { DateFormatter, getLocalTimeZone } from '@internationalized/date'
+  import ChevronDownIcon from '@lucide/svelte/icons/chevron-down'
+
+  import { CALENDAR_CLASS } from './calendar-classes.js'
+
+  let {
+    primitive,
+    layout,
+    month,
+    monthIndex,
+    locale,
+    placeholder = $bindable(),
+  }: CalendarCaptionProps = $props()
+
+  const format = (date: DateValue, options: Intl.DateTimeFormatOptions) =>
+    new DateFormatter(locale, options).format(date.toDate(getLocalTimeZone()))
+
+  const showMonths = $derived(layout === 'dropdown' || layout === 'dropdown-months')
+  const showYears = $derived(layout === 'dropdown' || layout === 'dropdown-years')
+
+  function pickMonth(event: Event & { currentTarget: HTMLSelectElement }) {
+    if (!placeholder) return
+    const picked = placeholder.set({ month: Number.parseInt(event.currentTarget.value, 10) })
+    placeholder = picked.subtract({ months: monthIndex })
+  }
+</script>
+
+{#if layout === 'label'}
+  <span class={CALENDAR_CLASS.captionLabel}
+    >{format(month, { month: 'long', year: 'numeric' })}</span
+  >
+{:else}
+  <div class={CALENDAR_CLASS.dropdowns}>
+    {#if showMonths}
+      <span class={CALENDAR_CLASS.dropdownRoot}>
+        <primitive.MonthSelect monthFormat="short" class={CALENDAR_CLASS.dropdown}>
+          {#snippet child({ props, monthItems })}
+            <select {...props} value={month.month} onchange={pickMonth}>
+              {#each monthItems as item (item.value)}
+                <option value={item.value}>{item.label}</option>
+              {/each}
+            </select>
+            <span class={CALENDAR_CLASS.dropdownLabel} aria-hidden="true">
+              {format(month, { month: 'short' })}
+              <ChevronDownIcon />
+            </span>
+          {/snippet}
+        </primitive.MonthSelect>
+      </span>
+    {:else}
+      <span class={CALENDAR_CLASS.captionLabel}>{format(month, { month: 'long' })}</span>
+    {/if}
+    {#if showYears}
+      <span class={CALENDAR_CLASS.dropdownRoot}>
+        <primitive.YearSelect class={CALENDAR_CLASS.dropdown}>
+          {#snippet child({ props, yearItems })}
+            <select {...props} value={month.year}>
+              {#each yearItems as item (item.value)}
+                <option value={item.value}>{item.label}</option>
+              {/each}
+            </select>
+            <span class={CALENDAR_CLASS.dropdownLabel} aria-hidden="true">
+              {month.year}
+              <ChevronDownIcon />
+            </span>
+          {/snippet}
+        </primitive.YearSelect>
+      </span>
+    {:else}
+      <span class={CALENDAR_CLASS.captionLabel}>{month.year}</span>
+    {/if}
+  </div>
+{/if}

package/dist/components/forms/calendar/calendar-caption.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { DateValue } from '@internationalized/date';
+import type { Calendar as CalendarPrimitive, RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+import type { CalendarCaptionLayout } from './calendar-classes.js';
+export type CalendarCaptionProps = {
+    primitive: typeof CalendarPrimitive | typeof RangeCalendarPrimitive;
+    layout: CalendarCaptionLayout;
+    /** The month this caption heads. */
+    month: DateValue;
+    /** Which of the visible months it is, so a month pick moves the first one. */
+    monthIndex: number;
+    locale: string;
+    placeholder?: DateValue;
+};
+declare const CalendarCaption: import("svelte").Component<CalendarCaptionProps, {}, "placeholder">;
+type CalendarCaption = ReturnType<typeof CalendarCaption>;
+export default CalendarCaption;

package/dist/components/forms/calendar/calendar-classes.d.ts

@@ -0,0 +1,23 @@
+export type CalendarCaptionLayout = 'label' | 'dropdown' | 'dropdown-months' | 'dropdown-years';
+export declare const CALENDAR_CLASS: {
+    readonly root: "bg-background group/calendar w-fit p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent";
+    readonly months: "relative flex flex-col gap-4 md:flex-row";
+    readonly month: "flex w-full flex-col gap-4";
+    readonly nav: "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1";
+    readonly navButton: string;
+    readonly header: "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)";
+    readonly captionLabel: "select-none text-sm font-medium";
+    readonly dropdowns: "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium";
+    readonly dropdownRoot: "relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50";
+    readonly dropdown: "absolute inset-0 bg-popover opacity-0";
+    readonly dropdownLabel: "flex h-8 select-none items-center gap-1 rounded-md pr-1 pl-2 text-sm font-medium [&>svg]:size-3.5 [&>svg]:text-muted-foreground";
+    readonly grid: "w-full border-collapse";
+    readonly weekdays: "flex";
+    readonly weekday: "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal";
+    readonly week: "mt-2 flex w-full";
+    readonly cell: "group/day relative aspect-square h-full w-full select-none p-0 text-center";
+    readonly rangeCell: "[&:first-child[data-selected]_[data-bits-day]]:rounded-l-md [&:last-child[data-selected]_[data-bits-day]]:rounded-r-md [&:has([data-range-start])]:bg-muted [&:has([data-range-start])]:rounded-l-md [&:has([data-range-middle])]:bg-muted [&:has([data-range-middle])]:rounded-none [&:has([data-range-end])]:bg-muted [&:has([data-range-end])]:rounded-r-md";
+    readonly day: `${string} flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal [&>span]:text-xs [&>span]:opacity-70 focus-visible:relative focus-visible:z-10 [&[data-today]:not([data-selected])]:bg-muted [&[data-today]:not([data-selected])]:text-foreground [&[data-outside-month]:not([data-selected])]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground data-[disabled]:opacity-50 data-[unavailable]:text-muted-foreground data-[unavailable]:line-through`;
+    readonly singleDay: "data-[selected]:bg-primary data-[selected]:text-primary-foreground";
+    readonly rangeDay: "data-[range-start]:bg-primary data-[range-start]:text-primary-foreground data-[range-start]:rounded-md data-[range-start]:rounded-l-md data-[range-end]:bg-primary data-[range-end]:text-primary-foreground data-[range-end]:rounded-md data-[range-end]:rounded-r-md data-[range-middle]:bg-muted data-[range-middle]:text-foreground data-[range-middle]:rounded-none data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground";
+};

package/dist/components/forms/calendar/calendar-classes.js

@@ -0,0 +1,36 @@
+/**
+ * Origin: the React package 2.23.0 `calendar.tsx` (`classNames`, `CalendarDayButton`)
+ * Diverged: React's react-day-picker class map, keyed by the bits-ui part each
+ *   lands on, and shared by Calendar and RangeCalendar so the two cannot
+ *   drift. react-day-picker's `data-*` modifiers become bits-ui's
+ *   (`data-selected`, `data-today`, `data-outside-month`, `data-range-*`).
+ *   React's `bg-accent`, which the React package redefined as the brand tint,
+ *   is `bg-muted` for today and the range's span, as shadcn's neutral accent
+ *   is. The day is a ghost square button, as React's CalendarDayButton was.
+ */
+import { buttonVariants } from '../../actions/button/button-variants.js';
+const navButton = `${buttonVariants({ variant: 'ghost' })} size-(--cell-size) p-0 select-none disabled:opacity-50 aria-disabled:opacity-50`;
+export const CALENDAR_CLASS = {
+    root: 'bg-background group/calendar w-fit p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
+    months: 'relative flex flex-col gap-4 md:flex-row',
+    month: 'flex w-full flex-col gap-4',
+    nav: 'absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1',
+    navButton,
+    header: 'flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)',
+    captionLabel: 'select-none text-sm font-medium',
+    dropdowns: 'flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium',
+    dropdownRoot: 'relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50',
+    dropdown: 'absolute inset-0 bg-popover opacity-0',
+    dropdownLabel: 'flex h-8 select-none items-center gap-1 rounded-md pr-1 pl-2 text-sm font-medium [&>svg]:size-3.5 [&>svg]:text-muted-foreground',
+    grid: 'w-full border-collapse',
+    weekdays: 'flex',
+    weekday: 'text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal',
+    week: 'mt-2 flex w-full',
+    cell: 'group/day relative aspect-square h-full w-full select-none p-0 text-center',
+    // The row's ends round a span off at the week's edge. Range only: on a single
+    // day they squared one side of the selected pill in the first and last column.
+    rangeCell: '[&:first-child[data-selected]_[data-bits-day]]:rounded-l-md [&:last-child[data-selected]_[data-bits-day]]:rounded-r-md [&:has([data-range-start])]:bg-muted [&:has([data-range-start])]:rounded-l-md [&:has([data-range-middle])]:bg-muted [&:has([data-range-middle])]:rounded-none [&:has([data-range-end])]:bg-muted [&:has([data-range-end])]:rounded-r-md',
+    day: `${buttonVariants({ variant: 'ghost', iconOnly: true })} flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal [&>span]:text-xs [&>span]:opacity-70 focus-visible:relative focus-visible:z-10 [&[data-today]:not([data-selected])]:bg-muted [&[data-today]:not([data-selected])]:text-foreground [&[data-outside-month]:not([data-selected])]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground data-[disabled]:opacity-50 data-[unavailable]:text-muted-foreground data-[unavailable]:line-through`,
+    singleDay: 'data-[selected]:bg-primary data-[selected]:text-primary-foreground',
+    rangeDay: 'data-[range-start]:bg-primary data-[range-start]:text-primary-foreground data-[range-start]:rounded-md data-[range-start]:rounded-l-md data-[range-end]:bg-primary data-[range-end]:text-primary-foreground data-[range-end]:rounded-md data-[range-end]:rounded-r-md data-[range-middle]:bg-muted data-[range-middle]:text-foreground data-[range-middle]:rounded-none data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground',
+};

package/dist/components/forms/calendar/calendar.svelte

@@ -0,0 +1,120 @@
+<!--
+  Origin: the React package 2.23.0 `calendar.tsx` (`Calendar`, `mode="single"`), itself shadcn/ui new-york `calendar`
+  Svelte: shadcn-svelte `calendar`
+  Diverged: bits-ui Calendar for react-day-picker, with `bind:value` and
+    `bind:placeholder` (the month in view). Values are `@internationalized/date`
+    dates, not JS `Date`s (round 7 plan, R7-1). React's `mode="range"` is
+    RangeCalendar (R7-2). React's `classNames` and `components` override maps
+    have no counterpart, and the parts are not exported: React exported only
+    Calendar and its day button. React's `disabled` matcher is bits-ui's
+    `isDateDisabled`, with `minValue` and `maxValue` (R7-3). Lucide icons from
+    `@lucide/svelte`.
+-->
+<script lang="ts" module>
+  import { Calendar as CalendarPrimitive } from 'bits-ui'
+
+  import type { WithoutChildrenOrChild } from '../../../utils/types.js'
+  import type { CalendarCaptionLayout } from './calendar-classes.js'
+
+  /**
+   * A month grid to pick a day from. The one a `DatePicker` renders inside its
+   * popover, and the one most call sites want; `type="multiple"` picks several
+   * separate days, and `RangeCalendar` a contiguous span.
+   *
+   * Outside days show by default, so a week is never ragged.
+   */
+  export type CalendarProps = WithoutChildrenOrChild<CalendarPrimitive.RootProps> & {
+    /**
+     * `label` names the month; the dropdown layouts swap the month, the year or
+     * both for a native select, for a date far from today (a birth date, an
+     * expiry).
+     */
+    captionLayout?: CalendarCaptionLayout
+  }
+</script>
+
+<script lang="ts">
+  import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left'
+  import ChevronRightIcon from '@lucide/svelte/icons/chevron-right'
+
+  import { cn } from '../../../utils/cn.js'
+  import CalendarCaption from './calendar-caption.svelte'
+  import { CALENDAR_CLASS } from './calendar-classes.js'
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    placeholder = $bindable(),
+    type = 'single',
+    captionLayout = 'label',
+    locale = 'en-US',
+    weekdayFormat = 'short',
+    class: className,
+    ...rest
+  }: CalendarProps = $props()
+</script>
+
+<!-- bits-ui's single and multiple roots are a discriminated union, which a
+     bound, destructured `value` cannot satisfy; cast as shadcn-svelte does. -->
+<CalendarPrimitive.Root
+  bind:ref
+  bind:value={value as never}
+  bind:placeholder
+  type={type as never}
+  {locale}
+  {weekdayFormat}
+  data-slot="calendar"
+  class={cn(CALENDAR_CLASS.root, className)}
+  {...rest}
+>
+  {#snippet children({ months, weekdays })}
+    <div class={CALENDAR_CLASS.months}>
+      <nav class={CALENDAR_CLASS.nav}>
+        <CalendarPrimitive.PrevButton class={CALENDAR_CLASS.navButton}>
+          <ChevronLeftIcon class="size-4" />
+        </CalendarPrimitive.PrevButton>
+        <CalendarPrimitive.NextButton class={CALENDAR_CLASS.navButton}>
+          <ChevronRightIcon class="size-4" />
+        </CalendarPrimitive.NextButton>
+      </nav>
+      {#each months as month, monthIndex (month)}
+        <div class={CALENDAR_CLASS.month}>
+          <CalendarPrimitive.Header class={CALENDAR_CLASS.header}>
+            <CalendarCaption
+              primitive={CalendarPrimitive}
+              layout={captionLayout}
+              month={month.value}
+              {monthIndex}
+              {locale}
+              bind:placeholder
+            />
+          </CalendarPrimitive.Header>
+          <CalendarPrimitive.Grid class={CALENDAR_CLASS.grid}>
+            <CalendarPrimitive.GridHead>
+              <CalendarPrimitive.GridRow class={CALENDAR_CLASS.weekdays}>
+                {#each weekdays as weekday, index (index)}
+                  <CalendarPrimitive.HeadCell class={CALENDAR_CLASS.weekday}>
+                    {weekday.slice(0, 2)}
+                  </CalendarPrimitive.HeadCell>
+                {/each}
+              </CalendarPrimitive.GridRow>
+            </CalendarPrimitive.GridHead>
+            <CalendarPrimitive.GridBody>
+              {#each month.weeks as week (week)}
+                <CalendarPrimitive.GridRow class={CALENDAR_CLASS.week}>
+                  {#each week as date (date)}
+                    <CalendarPrimitive.Cell {date} month={month.value} class={CALENDAR_CLASS.cell}>
+                      <CalendarPrimitive.Day
+                        class={cn(CALENDAR_CLASS.day, CALENDAR_CLASS.singleDay)}
+                      />
+                    </CalendarPrimitive.Cell>
+                  {/each}
+                </CalendarPrimitive.GridRow>
+              {/each}
+            </CalendarPrimitive.GridBody>
+          </CalendarPrimitive.Grid>
+        </div>
+      {/each}
+    </div>
+  {/snippet}
+</CalendarPrimitive.Root>

package/dist/components/forms/calendar/calendar.svelte.d.ts

@@ -0,0 +1,21 @@
+import { Calendar as CalendarPrimitive } from 'bits-ui';
+import type { WithoutChildrenOrChild } from '../../../utils/types.js';
+import type { CalendarCaptionLayout } from './calendar-classes.js';
+/**
+ * A month grid to pick a day from. The one a `DatePicker` renders inside its
+ * popover, and the one most call sites want; `type="multiple"` picks several
+ * separate days, and `RangeCalendar` a contiguous span.
+ *
+ * Outside days show by default, so a week is never ragged.
+ */
+export type CalendarProps = WithoutChildrenOrChild<CalendarPrimitive.RootProps> & {
+    /**
+     * `label` names the month; the dropdown layouts swap the month, the year or
+     * both for a native select, for a date far from today (a birth date, an
+     * expiry).
+     */
+    captionLayout?: CalendarCaptionLayout;
+};
+declare const Calendar: import("svelte").Component<CalendarProps, {}, "ref" | "placeholder" | "value">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;

package/dist/components/forms/calendar/index.d.ts

@@ -0,0 +1,3 @@
+export { type CalendarProps, default as Calendar } from './calendar.svelte';
+export type { CalendarCaptionLayout } from './calendar-classes.js';
+export { default as RangeCalendar, type RangeCalendarProps } from './range-calendar.svelte';

package/dist/components/forms/calendar/index.js

@@ -0,0 +1,2 @@
+export { default as Calendar } from './calendar.svelte';
+export { default as RangeCalendar } from './range-calendar.svelte';

package/dist/components/forms/calendar/range-calendar.svelte

@@ -0,0 +1,114 @@
+<!--
+  Origin: the React package 2.23.0 `calendar.tsx` (`Calendar`, `mode="range"`), itself shadcn/ui new-york `calendar`
+  Svelte: shadcn-svelte `range-calendar`
+  Diverged: React's Calendar with `mode="range"` is its own component here, on
+    bits-ui RangeCalendar, because its value is a `DateRange` (`{ start, end }`
+    of `@internationalized/date` dates) rather than a day (round 7 plan, R7-1,
+    R7-2). It shares Calendar's class map, so the two cannot drift. The range's
+    span is `bg-muted`, where React used the brand-tinted `bg-accent`.
+-->
+<script lang="ts" module>
+  import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui'
+
+  import type { WithoutChildrenOrChild } from '../../../utils/types.js'
+  import type { CalendarCaptionLayout } from './calendar-classes.js'
+
+  /**
+   * A contiguous span of days, for reporting windows and stay lengths. The
+   * first click sets `start`; the second sets `end` and closes the span.
+   */
+  export type RangeCalendarProps = WithoutChildrenOrChild<RangeCalendarPrimitive.RootProps> & {
+    /**
+     * `label` names the month; the dropdown layouts swap the month, the year or
+     * both for a native select, for a date far from today (a birth date, an
+     * expiry).
+     */
+    captionLayout?: CalendarCaptionLayout
+  }
+</script>
+
+<script lang="ts">
+  import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left'
+  import ChevronRightIcon from '@lucide/svelte/icons/chevron-right'
+
+  import { cn } from '../../../utils/cn.js'
+  import CalendarCaption from './calendar-caption.svelte'
+  import { CALENDAR_CLASS } from './calendar-classes.js'
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    placeholder = $bindable(),
+    captionLayout = 'label',
+    locale = 'en-US',
+    weekdayFormat = 'short',
+    class: className,
+    ...rest
+  }: RangeCalendarProps = $props()
+</script>
+
+<RangeCalendarPrimitive.Root
+  bind:ref
+  bind:value
+  bind:placeholder
+  {locale}
+  {weekdayFormat}
+  data-slot="range-calendar"
+  class={cn(CALENDAR_CLASS.root, className)}
+  {...rest}
+>
+  {#snippet children({ months, weekdays })}
+    <div class={CALENDAR_CLASS.months}>
+      <nav class={CALENDAR_CLASS.nav}>
+        <RangeCalendarPrimitive.PrevButton class={CALENDAR_CLASS.navButton}>
+          <ChevronLeftIcon class="size-4" />
+        </RangeCalendarPrimitive.PrevButton>
+        <RangeCalendarPrimitive.NextButton class={CALENDAR_CLASS.navButton}>
+          <ChevronRightIcon class="size-4" />
+        </RangeCalendarPrimitive.NextButton>
+      </nav>
+      {#each months as month, monthIndex (month)}
+        <div class={CALENDAR_CLASS.month}>
+          <RangeCalendarPrimitive.Header class={CALENDAR_CLASS.header}>
+            <CalendarCaption
+              primitive={RangeCalendarPrimitive}
+              layout={captionLayout}
+              month={month.value}
+              {monthIndex}
+              {locale}
+              bind:placeholder
+            />
+          </RangeCalendarPrimitive.Header>
+          <RangeCalendarPrimitive.Grid class={CALENDAR_CLASS.grid}>
+            <RangeCalendarPrimitive.GridHead>
+              <RangeCalendarPrimitive.GridRow class={CALENDAR_CLASS.weekdays}>
+                {#each weekdays as weekday, index (index)}
+                  <RangeCalendarPrimitive.HeadCell class={CALENDAR_CLASS.weekday}>
+                    {weekday.slice(0, 2)}
+                  </RangeCalendarPrimitive.HeadCell>
+                {/each}
+              </RangeCalendarPrimitive.GridRow>
+            </RangeCalendarPrimitive.GridHead>
+            <RangeCalendarPrimitive.GridBody>
+              {#each month.weeks as week (week)}
+                <RangeCalendarPrimitive.GridRow class={CALENDAR_CLASS.week}>
+                  {#each week as date (date)}
+                    <RangeCalendarPrimitive.Cell
+                      {date}
+                      month={month.value}
+                      class={cn(CALENDAR_CLASS.cell, CALENDAR_CLASS.rangeCell)}
+                    >
+                      <RangeCalendarPrimitive.Day
+                        class={cn(CALENDAR_CLASS.day, CALENDAR_CLASS.rangeDay)}
+                      />
+                    </RangeCalendarPrimitive.Cell>
+                  {/each}
+                </RangeCalendarPrimitive.GridRow>
+              {/each}
+            </RangeCalendarPrimitive.GridBody>
+          </RangeCalendarPrimitive.Grid>
+        </div>
+      {/each}
+    </div>
+  {/snippet}
+</RangeCalendarPrimitive.Root>

package/dist/components/forms/calendar/range-calendar.svelte.d.ts

@@ -0,0 +1,18 @@
+import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+import type { WithoutChildrenOrChild } from '../../../utils/types.js';
+import type { CalendarCaptionLayout } from './calendar-classes.js';
+/**
+ * A contiguous span of days, for reporting windows and stay lengths. The
+ * first click sets `start`; the second sets `end` and closes the span.
+ */
+export type RangeCalendarProps = WithoutChildrenOrChild<RangeCalendarPrimitive.RootProps> & {
+    /**
+     * `label` names the month; the dropdown layouts swap the month, the year or
+     * both for a native select, for a date far from today (a birth date, an
+     * expiry).
+     */
+    captionLayout?: CalendarCaptionLayout;
+};
+declare const RangeCalendar: import("svelte").Component<RangeCalendarProps, {}, "ref" | "placeholder" | "value">;
+type RangeCalendar = ReturnType<typeof RangeCalendar>;
+export default RangeCalendar;

package/dist/components/forms/checkbox/checkbox.svelte

@@ -0,0 +1,55 @@
+<!--
+  Origin: the React package 2.23.0 `checkbox.tsx`, itself shadcn/ui new-york `checkbox`
+  Svelte: shadcn-svelte `checkbox`
+  Diverged: unaudited, as in the React package. bits-ui Checkbox for Radix
+    Checkbox. The indeterminate state draws a minus, as shadcn-svelte's does,
+    and takes the checked fill; Radix's Indicator drew the same check for both.
+-->
+<script lang="ts" module>
+  import { Checkbox as CheckboxPrimitive } from 'bits-ui'
+
+  import type { WithoutChildrenOrChild } from '../../../utils/types.js'
+
+  export type CheckboxProps = WithoutChildrenOrChild<CheckboxPrimitive.RootProps>
+</script>
+
+<script lang="ts">
+  import CheckIcon from '@lucide/svelte/icons/check'
+  import MinusIcon from '@lucide/svelte/icons/minus'
+
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    checked = $bindable(false),
+    indeterminate = $bindable(false),
+    class: className,
+    ...rest
+  }: CheckboxProps = $props()
+</script>
+
+<CheckboxPrimitive.Root
+  bind:ref
+  bind:checked
+  bind:indeterminate
+  data-slot="checkbox"
+  class={cn(
+    'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+    'data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary',
+    className,
+  )}
+  {...rest}
+>
+  {#snippet children({ checked, indeterminate })}
+    <div
+      data-slot="checkbox-indicator"
+      class="grid place-content-center text-current transition-none"
+    >
+      {#if indeterminate}
+        <MinusIcon class="size-3.5" />
+      {:else if checked}
+        <CheckIcon class="size-3.5" />
+      {/if}
+    </div>
+  {/snippet}
+</CheckboxPrimitive.Root>

package/dist/components/forms/checkbox/checkbox.svelte.d.ts

@@ -0,0 +1,6 @@
+import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+import type { WithoutChildrenOrChild } from '../../../utils/types.js';
+export type CheckboxProps = WithoutChildrenOrChild<CheckboxPrimitive.RootProps>;
+declare const Checkbox: import("svelte").Component<Omit<Omit<CheckboxPrimitive.RootProps, "child">, "children">, {}, "ref" | "checked" | "indeterminate">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/components/forms/checkbox/index.d.ts

@@ -0,0 +1 @@
+export { type CheckboxProps, default as Checkbox } from './checkbox.svelte';

package/dist/components/forms/checkbox/index.js

@@ -0,0 +1 @@
+export { default as Checkbox } from './checkbox.svelte';