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

package/dist/components/forms/combobox/combobox-input.svelte

@@ -0,0 +1,98 @@
+<!--
+  Origin: the React package 2.23.0 `combobox.tsx` (`ComboboxInput`)
+  Diverged: Lucide's chevron-down and x for Tabler's. The clear button is
+    drawn here from the root's context rather than as Base UI's `Clear`; like
+    it, it shows only while there is a value, and it empties the typed text
+    too, through an `input` event the caller's filter hears.
+-->
+<script lang="ts" module>
+  import { Combobox as ComboboxPrimitive } from 'bits-ui'
+  import type { Snippet } from 'svelte'
+
+  import type { WithoutChild } from '../../../utils/types.js'
+
+  /**
+   * The field: an `InputGroup` with the typed text, the chevron that opens the
+   * list, and optionally a clear button that takes the chevron's place while
+   * there is a value. `children` render inside the group, after the addon.
+   */
+  export type ComboboxInputProps = Omit<WithoutChild<ComboboxPrimitive.InputProps>, 'children'> & {
+    showTrigger?: boolean
+    showClear?: boolean
+    children?: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import ChevronDownIcon from '@lucide/svelte/icons/chevron-down'
+  import XIcon from '@lucide/svelte/icons/x'
+
+  import { cn } from '../../../utils/cn.js'
+  import InputGroup from '../input-group/input-group.svelte'
+  import InputGroupAddon from '../input-group/input-group-addon.svelte'
+  import InputGroupButton from '../input-group/input-group-button.svelte'
+  import InputGroupInput from '../input-group/input-group-input.svelte'
+  import { getComboboxContext } from './combobox-context.js'
+
+  let {
+    ref = $bindable(null),
+    disabled = false,
+    showTrigger = true,
+    showClear = false,
+    class: className,
+    children,
+    ...rest
+  }: ComboboxInputProps = $props()
+
+  const combobox = getComboboxContext()
+
+  function clear() {
+    combobox?.clear()
+    if (!(ref instanceof HTMLInputElement)) return
+    ref.value = ''
+    ref.dispatchEvent(new Event('input', { bubbles: true }))
+    ref.focus()
+  }
+</script>
+
+<InputGroup class={cn('w-auto', className)}>
+  <ComboboxPrimitive.Input bind:ref {disabled} {...rest}>
+    {#snippet child({ props })}
+      <InputGroupInput {...props} {disabled} />
+    {/snippet}
+  </ComboboxPrimitive.Input>
+  <InputGroupAddon align="inline-end">
+    {#if showTrigger}
+      <ComboboxPrimitive.Trigger {disabled}>
+        {#snippet child({ props })}
+          <InputGroupButton
+            {...props}
+            size="icon-xs"
+            variant="ghost"
+            data-slot="input-group-button"
+            class="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent [&_svg:not([class*='size-'])]:size-4"
+            {disabled}
+          >
+            <ChevronDownIcon
+              data-slot="combobox-trigger-icon"
+              class="text-muted-foreground pointer-events-none size-4"
+            />
+          </InputGroupButton>
+        {/snippet}
+      </ComboboxPrimitive.Trigger>
+    {/if}
+    {#if showClear && combobox?.hasValue}
+      <InputGroupButton
+        data-slot="combobox-clear"
+        variant="ghost"
+        size="icon-xs"
+        aria-label="Clear"
+        {disabled}
+        onclick={clear}
+      >
+        <XIcon class="pointer-events-none" />
+      </InputGroupButton>
+    {/if}
+  </InputGroupAddon>
+  {@render children?.()}
+</InputGroup>

package/dist/components/forms/combobox/combobox-input.svelte.d.ts

@@ -0,0 +1,16 @@
+import { Combobox as ComboboxPrimitive } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { WithoutChild } from '../../../utils/types.js';
+/**
+ * The field: an `InputGroup` with the typed text, the chevron that opens the
+ * list, and optionally a clear button that takes the chevron's place while
+ * there is a value. `children` render inside the group, after the addon.
+ */
+export type ComboboxInputProps = Omit<WithoutChild<ComboboxPrimitive.InputProps>, 'children'> & {
+    showTrigger?: boolean;
+    showClear?: boolean;
+    children?: Snippet;
+};
+declare const ComboboxInput: import("svelte").Component<ComboboxInputProps, {}, "ref">;
+type ComboboxInput = ReturnType<typeof ComboboxInput>;
+export default ComboboxInput;

package/dist/components/forms/combobox/combobox-item.svelte

@@ -0,0 +1,61 @@
+<!--
+  Origin: the React package 2.23.0 `combobox.tsx` (`ComboboxItem`)
+  Diverged: the highlighted row is `bg-muted`, as SelectItem's, where React
+    used `bg-accent`, which the React package redefined as the brand tint.
+    bits-ui reads the field's text from `label`, so an item names itself with
+    `label`; children are optional and render in its place. Lucide's check
+    for Tabler's.
+-->
+<script lang="ts" module>
+  import { Combobox as ComboboxPrimitive } from 'bits-ui'
+  import type { Snippet } from 'svelte'
+
+  import type { WithoutChild } from '../../../utils/types.js'
+
+  export type ComboboxItemProps = Omit<WithoutChild<ComboboxPrimitive.ItemProps>, 'children'> & {
+    children?: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import CheckIcon from '@lucide/svelte/icons/check'
+
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    value,
+    label,
+    class: className,
+    children: content,
+    ...rest
+  }: ComboboxItemProps = $props()
+</script>
+
+<ComboboxPrimitive.Item
+  bind:ref
+  {value}
+  {label}
+  data-slot="combobox-item"
+  class={cn(
+    "data-[highlighted]:bg-muted data-[highlighted]:text-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    className,
+  )}
+  {...rest}
+>
+  {#snippet children({ selected })}
+    {#if content}
+      {@render content()}
+    {:else}
+      {label ?? value}
+    {/if}
+    {#if selected}
+      <span
+        data-slot="combobox-item-indicator"
+        class="pointer-events-none absolute right-2 flex size-4 items-center justify-center"
+      >
+        <CheckIcon class="pointer-events-none size-4 pointer-coarse:size-5" />
+      </span>
+    {/if}
+  {/snippet}
+</ComboboxPrimitive.Item>

package/dist/components/forms/combobox/combobox-item.svelte.d.ts

@@ -0,0 +1,9 @@
+import { Combobox as ComboboxPrimitive } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { WithoutChild } from '../../../utils/types.js';
+export type ComboboxItemProps = Omit<WithoutChild<ComboboxPrimitive.ItemProps>, 'children'> & {
+    children?: Snippet;
+};
+declare const ComboboxItem: import("svelte").Component<ComboboxItemProps, {}, "ref">;
+type ComboboxItem = ReturnType<typeof ComboboxItem>;
+export default ComboboxItem;

package/dist/components/forms/combobox/combobox-label.svelte

@@ -0,0 +1,25 @@
+<!--
+  Origin: the React package 2.23.0 `combobox.tsx` (`ComboboxLabel`)
+  Diverged: bits-ui's GroupHeading for Base UI's GroupLabel.
+-->
+<script lang="ts" module>
+  import { Combobox as ComboboxPrimitive } from 'bits-ui'
+
+  export type ComboboxLabelProps = ComboboxPrimitive.GroupHeadingProps
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, ...rest }: ComboboxLabelProps = $props()
+</script>
+
+<ComboboxPrimitive.GroupHeading
+  bind:ref
+  data-slot="combobox-label"
+  class={cn(
+    'text-muted-foreground px-2 py-1.5 text-xs pointer-coarse:px-3 pointer-coarse:py-2 pointer-coarse:text-sm',
+    className,
+  )}
+  {...rest}
+/>

package/dist/components/forms/combobox/combobox-label.svelte.d.ts

@@ -0,0 +1,5 @@
+import { Combobox as ComboboxPrimitive } from 'bits-ui';
+export type ComboboxLabelProps = ComboboxPrimitive.GroupHeadingProps;
+declare const ComboboxLabel: import("svelte").Component<ComboboxPrimitive.GroupHeadingProps, {}, "ref">;
+type ComboboxLabel = ReturnType<typeof ComboboxLabel>;
+export default ComboboxLabel;

package/dist/components/forms/combobox/combobox-list.svelte

@@ -0,0 +1,27 @@
+<!--
+  Origin: the React package 2.23.0 `combobox.tsx` (`ComboboxList`)
+  Diverged: bits-ui's Viewport, which takes the list's place and its scroll;
+    the height cap reads `--bits-combobox-content-available-height`. Children
+    are the items, rendered by the caller, not a render function.
+-->
+<script lang="ts" module>
+  import { Combobox as ComboboxPrimitive } from 'bits-ui'
+
+  export type ComboboxListProps = ComboboxPrimitive.ViewportProps
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, ...rest }: ComboboxListProps = $props()
+</script>
+
+<ComboboxPrimitive.Viewport
+  bind:ref
+  data-slot="combobox-list"
+  class={cn(
+    'max-h-[min(calc(--spacing(96)---spacing(9)),calc(var(--bits-combobox-content-available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 empty:p-0',
+    className,
+  )}
+  {...rest}
+/>

package/dist/components/forms/combobox/combobox-list.svelte.d.ts

@@ -0,0 +1,5 @@
+import { Combobox as ComboboxPrimitive } from 'bits-ui';
+export type ComboboxListProps = ComboboxPrimitive.ViewportProps;
+declare const ComboboxList: import("svelte").Component<ComboboxPrimitive.ViewportProps, {}, "ref">;
+type ComboboxList = ReturnType<typeof ComboboxList>;
+export default ComboboxList;

package/dist/components/forms/combobox/combobox-separator.svelte

@@ -0,0 +1,22 @@
+<!--
+  Origin: the React package 2.23.0 `combobox.tsx` (`ComboboxSeparator`)
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import { Combobox as ComboboxPrimitive, type Separator as SeparatorPrimitive } from 'bits-ui'
+
+  export type ComboboxSeparatorProps = SeparatorPrimitive.RootProps
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, ...rest }: ComboboxSeparatorProps = $props()
+</script>
+
+<ComboboxPrimitive.Separator
+  bind:ref
+  data-slot="combobox-separator"
+  class={cn('bg-border -mx-1 my-1 h-px', className)}
+  {...rest}
+/>

package/dist/components/forms/combobox/combobox-separator.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type Separator as SeparatorPrimitive } from 'bits-ui';
+export type ComboboxSeparatorProps = SeparatorPrimitive.RootProps;
+declare const ComboboxSeparator: import("svelte").Component<SeparatorPrimitive.RootProps, {}, "ref">;
+type ComboboxSeparator = ReturnType<typeof ComboboxSeparator>;
+export default ComboboxSeparator;

package/dist/components/forms/combobox/combobox-trigger.svelte

@@ -0,0 +1,36 @@
+<!--
+  Origin: the React package 2.23.0 `combobox.tsx` (`ComboboxTrigger`)
+  Diverged: Lucide's chevron-down for Tabler's.
+-->
+<script lang="ts" module>
+  import { Combobox as ComboboxPrimitive } from 'bits-ui'
+
+  /** The chevron that opens the list without typing. ComboboxInput draws its own. */
+  export type ComboboxTriggerProps = ComboboxPrimitive.TriggerProps
+</script>
+
+<script lang="ts">
+  import ChevronDownIcon from '@lucide/svelte/icons/chevron-down'
+
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...rest
+  }: ComboboxTriggerProps = $props()
+</script>
+
+<ComboboxPrimitive.Trigger
+  bind:ref
+  data-slot="combobox-trigger"
+  class={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+  {...rest}
+>
+  {@render children?.()}
+  <ChevronDownIcon
+    data-slot="combobox-trigger-icon"
+    class="text-muted-foreground pointer-events-none size-4"
+  />
+</ComboboxPrimitive.Trigger>

package/dist/components/forms/combobox/combobox-trigger.svelte.d.ts

@@ -0,0 +1,6 @@
+import { Combobox as ComboboxPrimitive } from 'bits-ui';
+/** The chevron that opens the list without typing. ComboboxInput draws its own. */
+export type ComboboxTriggerProps = ComboboxPrimitive.TriggerProps;
+declare const ComboboxTrigger: import("svelte").Component<ComboboxPrimitive.TriggerProps, {}, "ref">;
+type ComboboxTrigger = ReturnType<typeof ComboboxTrigger>;
+export default ComboboxTrigger;

package/dist/components/forms/combobox/combobox.svelte

@@ -0,0 +1,49 @@
+<!--
+  Origin: the React package 2.23.0 `combobox.tsx` (`Combobox`)
+  Diverged: bits-ui Combobox for Base UI's, with `bind:value`, `bind:open` and a
+    `type` that defaults to `single`. bits-ui does not filter: the caller keeps
+    the typed text (ComboboxInput's `oninput`) and renders only the items that
+    match, where Base UI filtered an `items` prop itself. Base UI's `Value`,
+    `Collection` and `useComboboxAnchor` have no counterpart and are not
+    ported; ComboboxContent's `customAnchor` takes the anchor's place.
+-->
+<script lang="ts" module>
+  import { Combobox as ComboboxPrimitive } from 'bits-ui'
+
+  type Root = ComboboxPrimitive.RootProps
+  type Single = Extract<Root, { type: 'single' }>
+  type Multiple = Extract<Root, { type: 'multiple' }>
+
+  /**
+   * A searchable select: typing into the field narrows the list. Reach for it
+   * where the list is long enough that scanning it is slower than typing (a
+   * category picker over hundreds of rows), not a five-option status field,
+   * which stays a `Select`.
+   *
+   * Pass `items` (`{ value, label }[]`) so the field can show the selected
+   * label while the list is closed, as `Select` does.
+   */
+  export type ComboboxProps = (Omit<Single, 'type'> & { type?: 'single' }) | Multiple
+</script>
+
+<script lang="ts">
+  import { setComboboxContext } from './combobox-context.js'
+
+  let {
+    open = $bindable(false),
+    value = $bindable(),
+    type = 'single',
+    ...rest
+  }: ComboboxProps = $props()
+
+  setComboboxContext({
+    get hasValue() {
+      return Array.isArray(value) ? value.length > 0 : Boolean(value)
+    },
+    clear: () => {
+      value = (type === 'multiple' ? [] : '') as never
+    },
+  })
+</script>
+
+<ComboboxPrimitive.Root bind:open bind:value={value as never} type={type as never} {...rest} />

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

@@ -0,0 +1,23 @@
+import { Combobox as ComboboxPrimitive } from 'bits-ui';
+type Root = ComboboxPrimitive.RootProps;
+type Single = Extract<Root, {
+    type: 'single';
+}>;
+type Multiple = Extract<Root, {
+    type: 'multiple';
+}>;
+/**
+ * A searchable select: typing into the field narrows the list. Reach for it
+ * where the list is long enough that scanning it is slower than typing (a
+ * category picker over hundreds of rows), not a five-option status field,
+ * which stays a `Select`.
+ *
+ * Pass `items` (`{ value, label }[]`) so the field can show the selected
+ * label while the list is closed, as `Select` does.
+ */
+export type ComboboxProps = (Omit<Single, 'type'> & {
+    type?: 'single';
+}) | Multiple;
+declare const Combobox: import("svelte").Component<ComboboxProps, {}, "value" | "open">;
+type Combobox = ReturnType<typeof Combobox>;
+export default Combobox;

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

@@ -0,0 +1,13 @@
+export { type ComboboxProps, default as Combobox } from './combobox.svelte';
+export { type ComboboxChipProps, default as ComboboxChip } from './combobox-chip.svelte';
+export { type ComboboxChipsProps, default as ComboboxChips } from './combobox-chips.svelte';
+export { type ComboboxChipsInputProps, default as ComboboxChipsInput, } from './combobox-chips-input.svelte';
+export { type ComboboxContentProps, default as ComboboxContent } from './combobox-content.svelte';
+export { type ComboboxEmptyProps, default as ComboboxEmpty } from './combobox-empty.svelte';
+export { type ComboboxGroupProps, default as ComboboxGroup } from './combobox-group.svelte';
+export { type ComboboxInputProps, default as ComboboxInput } from './combobox-input.svelte';
+export { type ComboboxItemProps, default as ComboboxItem } from './combobox-item.svelte';
+export { type ComboboxLabelProps, default as ComboboxLabel } from './combobox-label.svelte';
+export { type ComboboxListProps, default as ComboboxList } from './combobox-list.svelte';
+export { type ComboboxSeparatorProps, default as ComboboxSeparator, } from './combobox-separator.svelte';
+export { type ComboboxTriggerProps, default as ComboboxTrigger } from './combobox-trigger.svelte';

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

@@ -0,0 +1,13 @@
+export { default as Combobox } from './combobox.svelte';
+export { default as ComboboxChip } from './combobox-chip.svelte';
+export { default as ComboboxChips } from './combobox-chips.svelte';
+export { default as ComboboxChipsInput, } from './combobox-chips-input.svelte';
+export { default as ComboboxContent } from './combobox-content.svelte';
+export { default as ComboboxEmpty } from './combobox-empty.svelte';
+export { default as ComboboxGroup } from './combobox-group.svelte';
+export { default as ComboboxInput } from './combobox-input.svelte';
+export { default as ComboboxItem } from './combobox-item.svelte';
+export { default as ComboboxLabel } from './combobox-label.svelte';
+export { default as ComboboxList } from './combobox-list.svelte';
+export { default as ComboboxSeparator, } from './combobox-separator.svelte';
+export { default as ComboboxTrigger } from './combobox-trigger.svelte';

package/dist/components/forms/date-picker/date-picker.svelte

@@ -0,0 +1,149 @@
+<!--
+  Origin: the React package 2.23.0 `date-picker.tsx`
+  Diverged: values are `@internationalized/date` dates, and a range is bits-ui's
+    `{ start, end }` for react-day-picker's `{ from, to }` (round 7 plan, R7-1);
+    `value` is bindable, with `onValueChange` for React's `onChange`. React's
+    `disabledDates` matcher is `isDateDisabled`, with `minValue` and `maxValue`
+    (R7-3). The label is `DateFormatter` with `dateStyle: 'long'` in `locale`,
+    for date-fns' `PPP`. Lucide's calendar from `@lucide/svelte`.
+-->
+<script lang="ts" module>
+  import type { DateValue } from '@internationalized/date'
+  import type { DateRange } from 'bits-ui'
+
+  type Single = {
+    mode: 'single'
+    value?: DateValue
+    onValueChange?: (value: DateValue | undefined) => void
+  }
+  type Range = {
+    mode: 'range'
+    value?: DateRange
+    onValueChange?: (value: DateRange | undefined) => void
+  }
+
+  /**
+   * A `Calendar` behind a trigger, for the case where the calendar itself
+   * would otherwise sit permanently on the page.
+   *
+   * `mode` is not optional and there is no default: a single date and a range
+   * are different value shapes, and picking one silently would make the wrong
+   * value type a runtime surprise instead of a compile error.
+   *
+   * The trigger is `w-full`, matching `SelectTrigger`. Selecting a single date
+   * closes the popover; a range stays open until both ends are picked, so the
+   * operator can see the selection in progress.
+   */
+  export type DatePickerProps = (Single | Range) & {
+    placeholder?: string
+    /** Disables the whole control: the trigger cannot be opened. */
+    disabled?: boolean
+    /** Marks the trigger invalid; `Button` draws the destructive border `Input` does. */
+    'aria-invalid'?: boolean
+    /**
+     * Days the operator may not pick, inside an open calendar. Distinct from
+     * `disabled`, which closes the control. The rule is the caller's, not a
+     * `disablePast` flag: what counts as "past" is a decision the screen owns.
+     */
+    isDateDisabled?: (date: DateValue) => boolean
+    minValue?: DateValue
+    maxValue?: DateValue
+    /** For the trigger's label and the calendar. `en-US` when absent. */
+    locale?: string
+    class?: string
+  }
+
+  const DEFAULT_PLACEHOLDER = { single: 'Pick a date', range: 'Pick a date range' } as const
+</script>
+
+<script lang="ts">
+  import { DateFormatter, getLocalTimeZone } from '@internationalized/date'
+  import CalendarIcon from '@lucide/svelte/icons/calendar'
+
+  import { cn } from '../../../utils/cn.js'
+  import Button from '../../actions/button/button.svelte'
+  import Popover from '../../overlays/popover/popover.svelte'
+  import PopoverContent from '../../overlays/popover/popover-content.svelte'
+  import PopoverTrigger from '../../overlays/popover/popover-trigger.svelte'
+  import Calendar from '../calendar/calendar.svelte'
+  import RangeCalendar from '../calendar/range-calendar.svelte'
+
+  let {
+    mode,
+    value = $bindable(),
+    onValueChange,
+    placeholder,
+    disabled = false,
+    'aria-invalid': ariaInvalid,
+    isDateDisabled,
+    minValue,
+    maxValue,
+    locale = 'en-US',
+    class: className,
+  }: DatePickerProps = $props()
+
+  let open = $state(false)
+
+  const formatter = $derived(new DateFormatter(locale, { dateStyle: 'long' }))
+  const formatDate = (date: DateValue) => formatter.format(date.toDate(getLocalTimeZone()))
+
+  const label = $derived.by(() => {
+    if (mode === 'single') return value ? formatDate(value as DateValue) : null
+    const range = value as DateRange | undefined
+    if (!range?.start) return null
+    if (!range.end) return formatDate(range.start)
+    return `${formatDate(range.start)} – ${formatDate(range.end)}`
+  })
+
+  function pickDay(next: DateValue | undefined) {
+    value = next
+    ;(onValueChange as Single['onValueChange'])?.(next)
+    open = false
+  }
+
+  function pickRange(next: DateRange) {
+    value = next
+    ;(onValueChange as Range['onValueChange'])?.(next)
+    if (next.start && next.end) open = false
+  }
+</script>
+
+<Popover bind:open>
+  <PopoverTrigger {disabled}>
+    {#snippet child({ props })}
+      <Button
+        {...props}
+        variant="outline"
+        {disabled}
+        aria-invalid={ariaInvalid}
+        data-slot="date-picker-trigger"
+        class={cn('w-full justify-start font-normal', className)}
+      >
+        <CalendarIcon />
+        {label ?? placeholder ?? DEFAULT_PLACEHOLDER[mode]}
+      </Button>
+    {/snippet}
+  </PopoverTrigger>
+  <PopoverContent class="w-auto p-0">
+    {#if mode === 'single'}
+      <Calendar
+        type="single"
+        value={value as DateValue | undefined}
+        onValueChange={pickDay}
+        {isDateDisabled}
+        {minValue}
+        {maxValue}
+        {locale}
+      />
+    {:else}
+      <RangeCalendar
+        value={value as DateRange | undefined}
+        onValueChange={pickRange}
+        {isDateDisabled}
+        {minValue}
+        {maxValue}
+        {locale}
+      />
+    {/if}
+  </PopoverContent>
+</Popover>

package/dist/components/forms/date-picker/date-picker.svelte.d.ts

@@ -0,0 +1,45 @@
+import type { DateValue } from '@internationalized/date';
+import type { DateRange } from 'bits-ui';
+type Single = {
+    mode: 'single';
+    value?: DateValue;
+    onValueChange?: (value: DateValue | undefined) => void;
+};
+type Range = {
+    mode: 'range';
+    value?: DateRange;
+    onValueChange?: (value: DateRange | undefined) => void;
+};
+/**
+ * A `Calendar` behind a trigger, for the case where the calendar itself
+ * would otherwise sit permanently on the page.
+ *
+ * `mode` is not optional and there is no default: a single date and a range
+ * are different value shapes, and picking one silently would make the wrong
+ * value type a runtime surprise instead of a compile error.
+ *
+ * The trigger is `w-full`, matching `SelectTrigger`. Selecting a single date
+ * closes the popover; a range stays open until both ends are picked, so the
+ * operator can see the selection in progress.
+ */
+export type DatePickerProps = (Single | Range) & {
+    placeholder?: string;
+    /** Disables the whole control: the trigger cannot be opened. */
+    disabled?: boolean;
+    /** Marks the trigger invalid; `Button` draws the destructive border `Input` does. */
+    'aria-invalid'?: boolean;
+    /**
+     * Days the operator may not pick, inside an open calendar. Distinct from
+     * `disabled`, which closes the control. The rule is the caller's, not a
+     * `disablePast` flag: what counts as "past" is a decision the screen owns.
+     */
+    isDateDisabled?: (date: DateValue) => boolean;
+    minValue?: DateValue;
+    maxValue?: DateValue;
+    /** For the trigger's label and the calendar. `en-US` when absent. */
+    locale?: string;
+    class?: string;
+};
+declare const DatePicker: import("svelte").Component<DatePickerProps, {}, "value">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/components/forms/date-picker/index.d.ts

@@ -0,0 +1 @@
+export { type DatePickerProps, default as DatePicker } from './date-picker.svelte';

package/dist/components/forms/date-picker/index.js

@@ -0,0 +1 @@
+export { default as DatePicker } from './date-picker.svelte';

package/dist/components/forms/field/field-content.svelte

@@ -0,0 +1,27 @@
+<!--
+  Origin: the React package 2.23.0 `field.tsx` (`FieldContent`), itself shadcn/ui new-york `field`
+  Svelte: shadcn-svelte `field`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type FieldContentProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: FieldContentProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="field-content"
+  class={cn('group/field-content flex flex-1 flex-col gap-1.5 leading-snug', className)}
+  {...rest}
+>
+  {@render children?.()}
+</div>