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

package/dist/components/forms/select/select-scroll-down-button.svelte

@@ -0,0 +1,30 @@
+<!--
+  Origin: the React package 2.23.0 `select.tsx` (`SelectScrollDownButton`), itself shadcn/ui new-york `select`
+  Svelte: shadcn-svelte `select`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import { Select as SelectPrimitive } from 'bits-ui'
+
+  import type { WithoutChildrenOrChild } from '../../../utils/types.js'
+
+  export type SelectScrollDownButtonProps =
+    WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps>
+</script>
+
+<script lang="ts">
+  import ChevronDownIcon from '@lucide/svelte/icons/chevron-down'
+
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, ...rest }: SelectScrollDownButtonProps = $props()
+</script>
+
+<SelectPrimitive.ScrollDownButton
+  bind:ref
+  data-slot="select-scroll-down-button"
+  class={cn('flex cursor-default items-center justify-center py-1', className)}
+  {...rest}
+>
+  <ChevronDownIcon class="size-4" />
+</SelectPrimitive.ScrollDownButton>

package/dist/components/forms/select/select-scroll-down-button.svelte.d.ts

@@ -0,0 +1,6 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+import type { WithoutChildrenOrChild } from '../../../utils/types.js';
+export type SelectScrollDownButtonProps = WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps>;
+declare const SelectScrollDownButton: import("svelte").Component<Omit<Omit<SelectPrimitive.ScrollDownButtonProps, "child">, "children">, {}, "ref">;
+type SelectScrollDownButton = ReturnType<typeof SelectScrollDownButton>;
+export default SelectScrollDownButton;

package/dist/components/forms/select/select-scroll-up-button.svelte

@@ -0,0 +1,30 @@
+<!--
+  Origin: the React package 2.23.0 `select.tsx` (`SelectScrollUpButton`), itself shadcn/ui new-york `select`
+  Svelte: shadcn-svelte `select`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import { Select as SelectPrimitive } from 'bits-ui'
+
+  import type { WithoutChildrenOrChild } from '../../../utils/types.js'
+
+  export type SelectScrollUpButtonProps =
+    WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps>
+</script>
+
+<script lang="ts">
+  import ChevronUpIcon from '@lucide/svelte/icons/chevron-up'
+
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, ...rest }: SelectScrollUpButtonProps = $props()
+</script>
+
+<SelectPrimitive.ScrollUpButton
+  bind:ref
+  data-slot="select-scroll-up-button"
+  class={cn('flex cursor-default items-center justify-center py-1', className)}
+  {...rest}
+>
+  <ChevronUpIcon class="size-4" />
+</SelectPrimitive.ScrollUpButton>

package/dist/components/forms/select/select-scroll-up-button.svelte.d.ts

@@ -0,0 +1,6 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+import type { WithoutChildrenOrChild } from '../../../utils/types.js';
+export type SelectScrollUpButtonProps = WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps>;
+declare const SelectScrollUpButton: import("svelte").Component<Omit<Omit<SelectPrimitive.ScrollUpButtonProps, "child">, "children">, {}, "ref">;
+type SelectScrollUpButton = ReturnType<typeof SelectScrollUpButton>;
+export default SelectScrollUpButton;

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

@@ -0,0 +1,26 @@
+<!--
+  Origin: the React package 2.23.0 `select.tsx` (`SelectSeparator`), itself shadcn/ui new-york `select`
+  Svelte: shadcn-svelte `select`
+  Diverged: a plain div: bits-ui Select has no separator part.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type SelectSeparatorProps = WithElementRef<HTMLAttributes<HTMLDivElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, ...rest }: SelectSeparatorProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  role="none"
+  data-slot="select-separator"
+  class={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
+  {...rest}
+></div>

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

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type SelectSeparatorProps = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+declare const SelectSeparator: import("svelte").Component<SelectSeparatorProps, {}, "ref">;
+type SelectSeparator = ReturnType<typeof SelectSeparator>;
+export default SelectSeparator;

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

@@ -0,0 +1,48 @@
+<!--
+  Origin: the React package 2.23.0 `select.tsx` (`SelectTrigger`), itself shadcn/ui new-york `select`
+  Svelte: shadcn-svelte `select`
+  Diverged: none beyond the port. The chevron is drawn inline; bits-ui has no Icon part.
+-->
+<script lang="ts" module>
+  import { Select as SelectPrimitive } from 'bits-ui'
+
+  import type { WithoutChild } from '../../../utils/types.js'
+
+  /**
+   * `w-full` by default: a select sits in a form field beside inputs that are
+   * already full width, and `w-fit` made it the one control in the row not to
+   * be. Set `class="w-fit"` back for the rarer case. `size="sm"` for a dense
+   * row, such as a table cell or a toolbar.
+   */
+  export type SelectTriggerProps = WithoutChild<SelectPrimitive.TriggerProps> & {
+    size?: 'sm' | 'md'
+  }
+</script>
+
+<script lang="ts">
+  import ChevronDownIcon from '@lucide/svelte/icons/chevron-down'
+
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    size = 'md',
+    class: className,
+    children,
+    ...rest
+  }: SelectTriggerProps = $props()
+</script>
+
+<SelectPrimitive.Trigger
+  bind:ref
+  data-slot="select-trigger"
+  data-size={size}
+  class={cn(
+    "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-input/50 hover:bg-input flex w-full items-center justify-between gap-2 rounded-2xl border border-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=md]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+  <ChevronDownIcon class="size-4 opacity-70" />
+</SelectPrimitive.Trigger>

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

@@ -0,0 +1,14 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+import type { WithoutChild } from '../../../utils/types.js';
+/**
+ * `w-full` by default: a select sits in a form field beside inputs that are
+ * already full width, and `w-fit` made it the one control in the row not to
+ * be. Set `class="w-fit"` back for the rarer case. `size="sm"` for a dense
+ * row, such as a table cell or a toolbar.
+ */
+export type SelectTriggerProps = WithoutChild<SelectPrimitive.TriggerProps> & {
+    size?: 'sm' | 'md';
+};
+declare const SelectTrigger: import("svelte").Component<SelectTriggerProps, {}, "ref">;
+type SelectTrigger = ReturnType<typeof SelectTrigger>;
+export default SelectTrigger;

package/dist/components/forms/select/select-value.svelte

@@ -0,0 +1,16 @@
+<!--
+  Origin: the React package 2.23.0 `select.tsx` (`SelectValue`), itself shadcn/ui new-york `select`
+  Svelte: shadcn-svelte `select`
+  Diverged: bits-ui renders the selected item's `label`, where Radix rendered its ItemText.
+-->
+<script lang="ts" module>
+  import { Select as SelectPrimitive } from 'bits-ui'
+
+  export type SelectValueProps = SelectPrimitive.ValueProps
+</script>
+
+<script lang="ts">
+  let { ref = $bindable(null), ...rest }: SelectValueProps = $props()
+</script>
+
+<SelectPrimitive.Value bind:ref data-slot="select-value" {...rest} />

package/dist/components/forms/select/select-value.svelte.d.ts

@@ -0,0 +1,5 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+export type SelectValueProps = SelectPrimitive.ValueProps;
+declare const SelectValue: import("svelte").Component<SelectPrimitive.ValueProps, {}, "ref">;
+type SelectValue = ReturnType<typeof SelectValue>;
+export default SelectValue;

package/dist/components/forms/select/select.svelte

@@ -0,0 +1,33 @@
+<!--
+  Origin: the React package 2.23.0 `select.tsx` (`Select`), itself shadcn/ui new-york `select`
+  Svelte: shadcn-svelte `select`
+  Diverged: bits-ui Select for Radix Select, with `bind:value` and `bind:open`.
+    bits-ui needs a `type`; it defaults to `single`, the only kind React's Select had.
+    `items` tells the closed trigger its label; see SelectProps.
+-->
+<script lang="ts" module>
+  import { Select as SelectPrimitive } from 'bits-ui'
+
+  type Root = SelectPrimitive.RootProps
+  type Single = Extract<Root, { type: 'single' }>
+  type Multiple = Extract<Root, { type: 'multiple' }>
+
+  /**
+   * Pass `items` (`{ value, label }[]`) so the trigger can show the selected
+   * label while the list is closed. bits-ui learns an item's label only when
+   * the item renders, and the list renders only when open. Radix kept hidden
+   * items mounted for the same purpose.
+   */
+  export type SelectProps = (Omit<Single, 'type'> & { type?: 'single' }) | Multiple
+</script>
+
+<script lang="ts">
+  let {
+    open = $bindable(false),
+    value = $bindable(),
+    type = 'single',
+    ...rest
+  }: SelectProps = $props()
+</script>
+
+<SelectPrimitive.Root bind:open bind:value={value as never} type={type as never} {...rest} />

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

@@ -0,0 +1,20 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+type Root = SelectPrimitive.RootProps;
+type Single = Extract<Root, {
+    type: 'single';
+}>;
+type Multiple = Extract<Root, {
+    type: 'multiple';
+}>;
+/**
+ * Pass `items` (`{ value, label }[]`) so the trigger can show the selected
+ * label while the list is closed. bits-ui learns an item's label only when
+ * the item renders, and the list renders only when open. Radix kept hidden
+ * items mounted for the same purpose.
+ */
+export type SelectProps = (Omit<Single, 'type'> & {
+    type?: 'single';
+}) | Multiple;
+declare const Select: import("svelte").Component<SelectProps, {}, "value" | "open">;
+type Select = ReturnType<typeof Select>;
+export default Select;

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

@@ -0,0 +1 @@
+export { default as Switch, type SwitchProps } from './switch.svelte';

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

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

package/dist/components/forms/switch/switch.svelte

@@ -0,0 +1,41 @@
+<!--
+  Origin: the React package 2.23.0 `switch.tsx`, itself shadcn/ui new-york `switch`
+  Svelte: shadcn-svelte `switch`
+  Diverged: unaudited, as in the React package. bits-ui Switch for Radix Switch,
+    with `bind:checked`.
+-->
+<script lang="ts" module>
+  import { Switch as SwitchPrimitive } from 'bits-ui'
+
+  import type { WithoutChildrenOrChild } from '../../../utils/types.js'
+
+  /** Bare: pair it with a Label, or a field, when it needs words beside it. */
+  export type SwitchProps = WithoutChildrenOrChild<SwitchPrimitive.RootProps>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    checked = $bindable(false),
+    class: className,
+    ...rest
+  }: SwitchProps = $props()
+</script>
+
+<SwitchPrimitive.Root
+  bind:ref
+  bind:checked
+  data-slot="switch"
+  class={cn(
+    'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+    className,
+  )}
+  {...rest}
+>
+  <SwitchPrimitive.Thumb
+    data-slot="switch-thumb"
+    class="bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+  />
+</SwitchPrimitive.Root>

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

@@ -0,0 +1,7 @@
+import { Switch as SwitchPrimitive } from 'bits-ui';
+import type { WithoutChildrenOrChild } from '../../../utils/types.js';
+/** Bare: pair it with a Label, or a field, when it needs words beside it. */
+export type SwitchProps = WithoutChildrenOrChild<SwitchPrimitive.RootProps>;
+declare const Switch: import("svelte").Component<Omit<Omit<SwitchPrimitive.RootProps, "child">, "children">, {}, "ref" | "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/components/forms/switch-field/index.d.ts

@@ -0,0 +1 @@
+export { default as SwitchField, type SwitchFieldProps, type SwitchFieldVariant, } from './switch-field.svelte';

package/dist/components/forms/switch-field/index.js

@@ -0,0 +1 @@
+export { default as SwitchField, } from './switch-field.svelte';

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

@@ -0,0 +1,124 @@
+<!--
+  Origin: the React package 2.23.0 `switch-field.tsx`
+  Diverged: `checked` is bindable, with `onCheckedChange` kept. Spreads the rest
+    onto the root, as every component does.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  export type SwitchFieldVariant = 'default' | 'flush'
+
+  /**
+   * A bordered on/off row: what it does on the left, the switch on the right.
+   *
+   * Shares the surface the bordered radio rows use (`ChoiceRow`): same radius,
+   * same border, same accent once it is on, so the two read as one family.
+   *
+   * Deliberately *not* wrapped in a `<label for>` the way those rows are. A
+   * label forwards its click to the control it names, and where the control is
+   * inside the label the switch receives both that click and its own: it
+   * toggles twice and lands back where it started. A radio is idempotent, so
+   * the same shape is harmless there; a switch is not.
+   *
+   * `variant="flush"` is the same row without the surface, for stacking in a
+   * card. It keeps the scoped `FieldLabel for`, which is the whole reason this
+   * component exists rather than each caller pairing a `Switch` with a title
+   * and wiring `aria-labelledby` by hand. Flush drops the checked accent with
+   * the surface: there is nothing left to tint, and a tinted row in a stack
+   * would read as a selection rather than an on/off.
+   */
+  export type SwitchFieldProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** The switch's id, which the label points at. */
+    id: string
+    label: string
+    description?: string
+    checked?: boolean
+    onCheckedChange?: (checked: boolean) => void
+    disabled?: boolean
+    /**
+     * `default` draws its own bordered surface, for a switch that stands alone
+     * in a form.
+     *
+     * `flush` draws none, for several stacked inside a card. Three bordered
+     * rows in a bordered card is three containers deep, and the reader counts
+     * boxes instead of reading rows; the card is already the container, so the
+     * rows only need separating. Put `divide-y` on the wrapper.
+     */
+    variant?: SwitchFieldVariant
+    /**
+     * Revealed below the row while the switch is on.
+     *
+     * Kept inside the same bordered surface rather than rendered as a sibling,
+     * so what the switch turns on is visibly part of what the switch controls.
+     */
+    children?: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import Field from '../field/field.svelte'
+  import FieldDescription from '../field/field-description.svelte'
+  import FieldLabel from '../field/field-label.svelte'
+  import Switch from '../switch/switch.svelte'
+
+  let {
+    id,
+    label,
+    description,
+    checked = $bindable(false),
+    onCheckedChange,
+    disabled = false,
+    variant = 'default',
+    class: className,
+    children,
+    ...rest
+  }: SwitchFieldProps = $props()
+
+  const isFlush = $derived(variant === 'flush')
+</script>
+
+<div
+  data-slot="switch-field"
+  data-state={checked ? 'checked' : 'unchecked'}
+  data-variant={variant}
+  class={cn(
+    !isFlush && [
+      'rounded-2xl border transition-colors',
+      'border-border bg-muted/40',
+      'data-[state=checked]:border-primary data-[state=checked]:bg-primary/5',
+    ],
+    disabled && 'opacity-60',
+    className,
+  )}
+  {...rest}
+>
+  <!-- No horizontal padding when flush: the card supplies it, and a second
+       inset makes the rows look indented from their own heading. Vertical
+       stays, or stacked rows collide. -->
+  <Field orientation="horizontal" class={isFlush ? 'py-3' : 'p-4'}>
+    <div class="min-w-0 flex-1">
+      <FieldLabel for={id} class="font-medium">{label}</FieldLabel>
+      {#if description}
+        <FieldDescription class="mt-0.5">{description}</FieldDescription>
+      {/if}
+    </div>
+
+    <Switch {id} bind:checked {onCheckedChange} {disabled} class="shrink-0" />
+  </Field>
+
+  {#if children && checked}
+    <!-- Unmounted rather than hidden while off, so anything inside stops
+         fetching and holds no state the switch has already dismissed. Flush
+         indents instead of ruling off: a border here would be a third
+         horizontal line among the separators between rows. -->
+    <div
+      class={isFlush
+        ? 'border-border/60 mb-3 border-l pl-4'
+        : 'border-border/60 border-t px-4 py-4'}
+    >
+      {@render children()}
+    </div>
+  {/if}
+</div>

package/dist/components/forms/switch-field/switch-field.svelte.d.ts

@@ -0,0 +1,51 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export type SwitchFieldVariant = 'default' | 'flush';
+/**
+ * A bordered on/off row: what it does on the left, the switch on the right.
+ *
+ * Shares the surface the bordered radio rows use (`ChoiceRow`): same radius,
+ * same border, same accent once it is on, so the two read as one family.
+ *
+ * Deliberately *not* wrapped in a `<label for>` the way those rows are. A
+ * label forwards its click to the control it names, and where the control is
+ * inside the label the switch receives both that click and its own: it
+ * toggles twice and lands back where it started. A radio is idempotent, so
+ * the same shape is harmless there; a switch is not.
+ *
+ * `variant="flush"` is the same row without the surface, for stacking in a
+ * card. It keeps the scoped `FieldLabel for`, which is the whole reason this
+ * component exists rather than each caller pairing a `Switch` with a title
+ * and wiring `aria-labelledby` by hand. Flush drops the checked accent with
+ * the surface: there is nothing left to tint, and a tinted row in a stack
+ * would read as a selection rather than an on/off.
+ */
+export type SwitchFieldProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** The switch's id, which the label points at. */
+    id: string;
+    label: string;
+    description?: string;
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    /**
+     * `default` draws its own bordered surface, for a switch that stands alone
+     * in a form.
+     *
+     * `flush` draws none, for several stacked inside a card. Three bordered
+     * rows in a bordered card is three containers deep, and the reader counts
+     * boxes instead of reading rows; the card is already the container, so the
+     * rows only need separating. Put `divide-y` on the wrapper.
+     */
+    variant?: SwitchFieldVariant;
+    /**
+     * Revealed below the row while the switch is on.
+     *
+     * Kept inside the same bordered surface rather than rendered as a sibling,
+     * so what the switch turns on is visibly part of what the switch controls.
+     */
+    children?: Snippet;
+};
+declare const SwitchField: import("svelte").Component<SwitchFieldProps, {}, "checked">;
+type SwitchField = ReturnType<typeof SwitchField>;
+export default SwitchField;

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

@@ -0,0 +1 @@
+export { default as Textarea, type TextareaProps } from './textarea.svelte';

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

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

package/dist/components/forms/textarea/textarea.svelte

@@ -0,0 +1,70 @@
+<!--
+  Origin: the React package 2.23.0 `textarea.tsx`, itself shadcn/ui new-york `textarea`
+  Svelte: shadcn-svelte `textarea`
+  Diverged: `bind:value` replaces React's controlled and uncontrolled pair, so
+    the counter reads the bound value and needs no mirrored length. The limits
+    are the native `maxlength` / `minlength`, as Svelte spells them.
+-->
+<script lang="ts" module>
+  import type { HTMLTextareaAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /**
+   * A counter appears only when `maxlength` is set: a bare number counts up
+   * towards nothing. `maxlength` stops typing at the ceiling, so falling under
+   * `minlength` is the only reachable invalid state, and only once something
+   * has been typed. An untouched optional field is not wrong.
+   */
+  export type TextareaProps = WithElementRef<HTMLTextareaAttributes, HTMLTextAreaElement>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    maxlength,
+    minlength,
+    class: className,
+    ...rest
+  }: TextareaProps = $props()
+
+  const length = $derived(String(value ?? '').length)
+  const isBelowMinimum = $derived(
+    minlength !== undefined && minlength !== null && length > 0 && length < minlength,
+  )
+</script>
+
+{#snippet field()}
+  <textarea
+    bind:this={ref}
+    bind:value
+    data-slot="textarea"
+    {maxlength}
+    {minlength}
+    class={cn(
+      'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-input/50 flex field-sizing-content min-h-16 w-full rounded-2xl border border-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+      className,
+    )}
+    {...rest}
+  ></textarea>
+{/snippet}
+
+{#if maxlength === undefined || maxlength === null}
+  {@render field()}
+{:else}
+  <div class="flex w-full flex-col gap-1">
+    {@render field()}
+    <span
+      aria-live="polite"
+      class={cn(
+        'text-muted-foreground self-end text-xs tabular-nums',
+        isBelowMinimum && 'text-destructive',
+      )}
+    >
+      {isBelowMinimum ? `${length} / ${minlength} minimum` : `${length} / ${maxlength}`}
+    </span>
+  </div>
+{/if}

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

@@ -0,0 +1,12 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/**
+ * A counter appears only when `maxlength` is set: a bare number counts up
+ * towards nothing. `maxlength` stops typing at the ceiling, so falling under
+ * `minlength` is the only reachable invalid state, and only once something
+ * has been typed. An untouched optional field is not wrong.
+ */
+export type TextareaProps = WithElementRef<HTMLTextareaAttributes, HTMLTextAreaElement>;
+declare const Textarea: import("svelte").Component<TextareaProps, {}, "ref" | "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

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

@@ -0,0 +1 @@
+export { default as TimePicker, type TimePickerProps } from './time-picker.svelte';

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

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