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

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

@@ -0,0 +1,262 @@
+<!--
+  Origin: the React package 2.23.0 `quantity-input.tsx`
+  Diverged: the amount is NumberInputField (`format="decimal"`), the field
+    NumberInput is built on, for React's bare DecimalInput (round 6 plan,
+    R6-4). `unit` and `quantity` are bindable, with `onUnitChange` and
+    `onQuantityChange` kept; React's `onBlur` is `onQuantityBlur`, since it
+    fires for the amount alone. `quantityStep` and `quantityMin` are numbers
+    (React kept strings so no existing caller changed). `menuFooter` is a
+    snippet handed `closeMenu`. The unit-first trigger shows bits-ui's
+    SelectValue, which needs `items`, passed from `units`. Its addon drops the
+    stock `pl-3`, so the trigger paints its fill out to the group's edge, as
+    the comment on it says, rather than an inset pill inside the padding.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  /**
+   * One unit a quantity can be expressed in.
+   *
+   * `label` names it, `short` is how it is written beside a number. Both are
+   * needed because they answer different questions: choosing from a list
+   * wants "Milliliter (ml)", the name disambiguated, and reading one back
+   * wants "15 ml". `short` falls back to `value`, which is already the short
+   * form for most unit sets.
+   */
+  export type QuantityUnit = {
+    value: string
+    label: string
+    short?: string
+    /** A heading the unit is listed under: "Mass", "Volume". First-seen order. */
+    group?: string
+  }
+
+  /**
+   * `unit-first` puts the more considered decision first, which is what a
+   * stock movement wants: the unit governs what the number even means.
+   * `quantity-first` is for everywhere the amount is the thing being revised
+   * (a recipe line, a conversion), where "1250 g" is how the amount is written.
+   */
+  export type QuantityInputLayout = 'unit-first' | 'quantity-first'
+
+  /**
+   * An amount and the unit it is measured in, as one control.
+   *
+   * Two fields fused rather than two beside each other, because they are one
+   * answer: a number without its unit is not a quantity, and a form that can
+   * submit one without the other has a state nobody meant.
+   */
+  export type QuantityInputProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /**
+     * The units on offer. A prop rather than a constant: a measurement enum is
+     * domain, and a package that shipped one would ship an application's
+     * contract.
+     */
+    units: readonly QuantityUnit[]
+    layout?: QuantityInputLayout
+    unit?: string
+    quantity?: number | null
+    onUnitChange?: (unit: string) => void
+    onQuantityChange?: (quantity: number | null) => void
+    /**
+     * When the amount loses focus, for a caller that writes on commit rather
+     * than on keystroke: "2" on the way to "25" is not an amount anybody meant.
+     */
+    onQuantityBlur?: () => void
+    /**
+     * A muted note beside a group's heading, keyed by the group's name: "needs
+     * density" beside volume units for an item weighed by the gram. The units
+     * stay pickable.
+     */
+    groupHints?: Readonly<Record<string, string>>
+    /**
+     * Something below the units in the open menu: a fact and an action, such
+     * as "Density 0.92 g per ml · Edit". Handed `closeMenu`, because an action
+     * there usually opens something else, and the menu has to go first.
+     */
+    menuFooter?: Snippet<[() => void]>
+    unitPlaceholder?: string
+    quantityPlaceholder?: string
+    /** How far ↑ and ↓ move the amount. */
+    quantityStep?: number
+    quantityMin?: number
+    /** The most decimal places the amount takes: `0` for a counted unit. No limit when absent. */
+    quantityPrecision?: number
+    /** Matches `Input`'s own scale. `sm` for a control inside a list row. */
+    size?: 'sm' | 'md'
+    disabled?: boolean
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import InputGroup from '../input-group/input-group.svelte'
+  import InputGroupAddon from '../input-group/input-group-addon.svelte'
+  import NumberInputField from '../number-input/number-input-field.svelte'
+  import Select from '../select/select.svelte'
+  import SelectContent from '../select/select-content.svelte'
+  import SelectGroup from '../select/select-group.svelte'
+  import SelectItem from '../select/select-item.svelte'
+  import SelectLabel from '../select/select-label.svelte'
+  import SelectSeparator from '../select/select-separator.svelte'
+  import SelectTrigger from '../select/select-trigger.svelte'
+  import SelectValue from '../select/select-value.svelte'
+
+  let {
+    units,
+    layout = 'unit-first',
+    unit = $bindable(''),
+    quantity = $bindable(null),
+    onUnitChange,
+    onQuantityChange,
+    onQuantityBlur,
+    groupHints,
+    menuFooter,
+    unitPlaceholder = 'Unit',
+    quantityPlaceholder = '1',
+    quantityStep = 0.01,
+    quantityMin = 0,
+    quantityPrecision,
+    size = 'md',
+    disabled = false,
+    class: className,
+    ...rest
+  }: QuantityInputProps = $props()
+
+  // Held here so the footer can close the menu before whatever it opens takes
+  // the screen.
+  let menuOpen = $state(false)
+  const closeMenu = () => {
+    menuOpen = false
+  }
+
+  const items = $derived(units.map(({ value, label }) => ({ value, label })))
+  const shortLabel = $derived(units.find((candidate) => candidate.value === unit)?.short ?? unit)
+  const isGrouped = $derived(units.some((candidate) => candidate.group !== undefined))
+  // Grouped in first-seen order rather than sorted, so the consumer, who knows
+  // which kind of measure an item is counted in, puts that one first.
+  const groupNames = $derived([...new Set(units.map((candidate) => candidate.group ?? ''))])
+</script>
+
+{#snippet option(candidate: QuantityUnit)}
+  <SelectItem value={candidate.value} label={candidate.label} />
+{/snippet}
+
+{#snippet unitOptions()}
+  {#if isGrouped}
+    {#each groupNames as groupName, index (groupName || 'ungrouped')}
+      <SelectGroup>
+        {#if index > 0}
+          <SelectSeparator />
+        {/if}
+        {#if groupName}
+          <SelectLabel
+            class="flex items-center justify-between gap-3 font-medium uppercase tracking-wide"
+          >
+            {groupName}
+            {#if groupHints?.[groupName]}
+              <span class="font-normal normal-case tracking-normal">{groupHints[groupName]}</span>
+            {/if}
+          </SelectLabel>
+        {/if}
+        {#each units.filter(
+          (candidate) => (candidate.group ?? '') === groupName,
+        ) as candidate (candidate.value)}
+          {@render option(candidate)}
+        {/each}
+      </SelectGroup>
+    {/each}
+  {:else}
+    {#each units as candidate (candidate.value)}
+      {@render option(candidate)}
+    {/each}
+  {/if}
+  {#if menuFooter}
+    <div
+      data-slot="quantity-input-menu-footer"
+      class="text-muted-foreground mt-1 flex items-center justify-between gap-3 border-t px-2 pt-2 pb-1 text-xs"
+    >
+      {@render menuFooter(closeMenu)}
+    </div>
+  {/if}
+{/snippet}
+
+{#snippet quantityField()}
+  <NumberInputField
+    format="decimal"
+    class="flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent"
+    step={quantityStep > 0 ? quantityStep : 1}
+    min={quantityMin}
+    precision={quantityPrecision}
+    placeholder={quantityPlaceholder}
+    bind:value={quantity}
+    onValueChange={onQuantityChange}
+    onblur={() => onQuantityBlur?.()}
+    {disabled}
+  />
+{/snippet}
+
+<InputGroup
+  data-slot="quantity-input"
+  data-layout={layout}
+  class={cn(size === 'sm' && 'h-8', className)}
+  {...rest}
+>
+  {#if layout === 'quantity-first'}
+    {@render quantityField()}
+
+    <!-- A direct child of the group rather than an InputGroupAddon. The addon
+         is built for something decorating a field, so it carries padding, a
+         negative margin around a button and a click that forwards to the
+         input: right for a decoration, wrong for a control that is half the
+         field. -->
+    <Select
+      type="single"
+      bind:value={unit}
+      bind:open={menuOpen}
+      onValueChange={onUnitChange}
+      {items}
+      {disabled}
+    >
+      <SelectTrigger
+        {size}
+        class="w-24 shrink-0 justify-between rounded-l-none rounded-r-2xl border-0 border-l border-l-input bg-input/40 px-3 text-foreground shadow-none! hover:bg-input/60 focus-visible:ring-0"
+      >
+        <!-- The short form beside the number; the open menu keeps the full
+             label, because choosing a unit is the one moment its name matters. -->
+        {#if unit}
+          <span data-slot="select-value">{shortLabel}</span>
+        {:else}
+          <SelectValue placeholder={unitPlaceholder} />
+        {/if}
+      </SelectTrigger>
+      <SelectContent>{@render unitOptions()}</SelectContent>
+    </Select>
+  {:else}
+    <InputGroupAddon
+      align="inline-start"
+      class="w-2/3 justify-start overflow-hidden border-r py-0 pl-0"
+    >
+      <Select
+        type="single"
+        bind:value={unit}
+        bind:open={menuOpen}
+        onValueChange={onUnitChange}
+        {items}
+        {disabled}
+      >
+        <!-- The trigger carries the group's radius on the edge it sits against,
+             because it paints the fill out to that edge. -->
+        <SelectTrigger
+          class="h-full w-full truncate rounded-l-2xl rounded-r-none border-0 text-left text-foreground shadow-none! focus:ring-0!"
+        >
+          <SelectValue placeholder={unitPlaceholder} />
+        </SelectTrigger>
+        <SelectContent>{@render unitOptions()}</SelectContent>
+      </Select>
+    </InputGroupAddon>
+
+    {@render quantityField()}
+  {/if}
+</InputGroup>

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

@@ -0,0 +1,75 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * One unit a quantity can be expressed in.
+ *
+ * `label` names it, `short` is how it is written beside a number. Both are
+ * needed because they answer different questions: choosing from a list
+ * wants "Milliliter (ml)", the name disambiguated, and reading one back
+ * wants "15 ml". `short` falls back to `value`, which is already the short
+ * form for most unit sets.
+ */
+export type QuantityUnit = {
+    value: string;
+    label: string;
+    short?: string;
+    /** A heading the unit is listed under: "Mass", "Volume". First-seen order. */
+    group?: string;
+};
+/**
+ * `unit-first` puts the more considered decision first, which is what a
+ * stock movement wants: the unit governs what the number even means.
+ * `quantity-first` is for everywhere the amount is the thing being revised
+ * (a recipe line, a conversion), where "1250 g" is how the amount is written.
+ */
+export type QuantityInputLayout = 'unit-first' | 'quantity-first';
+/**
+ * An amount and the unit it is measured in, as one control.
+ *
+ * Two fields fused rather than two beside each other, because they are one
+ * answer: a number without its unit is not a quantity, and a form that can
+ * submit one without the other has a state nobody meant.
+ */
+export type QuantityInputProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /**
+     * The units on offer. A prop rather than a constant: a measurement enum is
+     * domain, and a package that shipped one would ship an application's
+     * contract.
+     */
+    units: readonly QuantityUnit[];
+    layout?: QuantityInputLayout;
+    unit?: string;
+    quantity?: number | null;
+    onUnitChange?: (unit: string) => void;
+    onQuantityChange?: (quantity: number | null) => void;
+    /**
+     * When the amount loses focus, for a caller that writes on commit rather
+     * than on keystroke: "2" on the way to "25" is not an amount anybody meant.
+     */
+    onQuantityBlur?: () => void;
+    /**
+     * A muted note beside a group's heading, keyed by the group's name: "needs
+     * density" beside volume units for an item weighed by the gram. The units
+     * stay pickable.
+     */
+    groupHints?: Readonly<Record<string, string>>;
+    /**
+     * Something below the units in the open menu: a fact and an action, such
+     * as "Density 0.92 g per ml · Edit". Handed `closeMenu`, because an action
+     * there usually opens something else, and the menu has to go first.
+     */
+    menuFooter?: Snippet<[() => void]>;
+    unitPlaceholder?: string;
+    quantityPlaceholder?: string;
+    /** How far ↑ and ↓ move the amount. */
+    quantityStep?: number;
+    quantityMin?: number;
+    /** The most decimal places the amount takes: `0` for a counted unit. No limit when absent. */
+    quantityPrecision?: number;
+    /** Matches `Input`'s own scale. `sm` for a control inside a list row. */
+    size?: 'sm' | 'md';
+    disabled?: boolean;
+};
+declare const QuantityInput: import("svelte").Component<QuantityInputProps, {}, "unit" | "quantity">;
+type QuantityInput = ReturnType<typeof QuantityInput>;
+export default QuantityInput;

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

@@ -0,0 +1,2 @@
+export { default as RadioGroup, type RadioGroupProps } from './radio-group.svelte';
+export { default as RadioGroupItem, type RadioGroupItemProps } from './radio-group-item.svelte';

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

@@ -0,0 +1,2 @@
+export { default as RadioGroup } from './radio-group.svelte';
+export { default as RadioGroupItem } from './radio-group-item.svelte';

package/dist/components/forms/radio-group/radio-group-item.svelte

@@ -0,0 +1,41 @@
+<!--
+  Origin: the React package 2.23.0 `radio-group.tsx` (`RadioGroupItem`), itself shadcn/ui new-york `radio-group`
+  Svelte: shadcn-svelte `radio-group`
+  Diverged: unaudited, as in the React package. The indicator is drawn from the
+    item's `checked` snippet argument rather than Radix's Indicator part.
+-->
+<script lang="ts" module>
+  import { RadioGroup as RadioGroupPrimitive } from 'bits-ui'
+
+  import type { WithoutChildrenOrChild } from '../../../utils/types.js'
+
+  export type RadioGroupItemProps = WithoutChildrenOrChild<RadioGroupPrimitive.ItemProps>
+</script>
+
+<script lang="ts">
+  import CircleIcon from '@lucide/svelte/icons/circle'
+
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, ...rest }: RadioGroupItemProps = $props()
+</script>
+
+<RadioGroupPrimitive.Item
+  bind:ref
+  data-slot="radio-group-item"
+  class={cn(
+    'border-input text-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 dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+    className,
+  )}
+  {...rest}
+>
+  {#snippet children({ checked })}
+    <div data-slot="radio-group-indicator" class="relative flex items-center justify-center">
+      {#if checked}
+        <CircleIcon
+          class="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2"
+        />
+      {/if}
+    </div>
+  {/snippet}
+</RadioGroupPrimitive.Item>

package/dist/components/forms/radio-group/radio-group-item.svelte.d.ts

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

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

@@ -0,0 +1,30 @@
+<!--
+  Origin: the React package 2.23.0 `radio-group.tsx` (`RadioGroup`), itself shadcn/ui new-york `radio-group`
+  Svelte: shadcn-svelte `radio-group`
+  Diverged: unaudited, as in the React package. bits-ui RadioGroup for Radix,
+    with `bind:value`.
+-->
+<script lang="ts" module>
+  import { RadioGroup as RadioGroupPrimitive } from 'bits-ui'
+
+  export type RadioGroupProps = RadioGroupPrimitive.RootProps
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(''),
+    class: className,
+    ...rest
+  }: RadioGroupProps = $props()
+</script>
+
+<RadioGroupPrimitive.Root
+  bind:ref
+  bind:value
+  data-slot="radio-group"
+  class={cn('grid gap-3', className)}
+  {...rest}
+/>

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

@@ -0,0 +1,5 @@
+import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
+export type RadioGroupProps = RadioGroupPrimitive.RootProps;
+declare const RadioGroup: import("svelte").Component<RadioGroupPrimitive.RootProps, {}, "ref" | "value">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;

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

@@ -0,0 +1,10 @@
+export { default as Select, type SelectProps } from './select.svelte';
+export { default as SelectContent, type SelectContentProps } from './select-content.svelte';
+export { default as SelectGroup, type SelectGroupProps } from './select-group.svelte';
+export { default as SelectItem, type SelectItemProps } from './select-item.svelte';
+export { default as SelectLabel, type SelectLabelProps } from './select-label.svelte';
+export { default as SelectScrollDownButton, type SelectScrollDownButtonProps, } from './select-scroll-down-button.svelte';
+export { default as SelectScrollUpButton, type SelectScrollUpButtonProps, } from './select-scroll-up-button.svelte';
+export { default as SelectSeparator, type SelectSeparatorProps } from './select-separator.svelte';
+export { default as SelectTrigger, type SelectTriggerProps } from './select-trigger.svelte';
+export { default as SelectValue, type SelectValueProps } from './select-value.svelte';

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

@@ -0,0 +1,10 @@
+export { default as Select } from './select.svelte';
+export { default as SelectContent } from './select-content.svelte';
+export { default as SelectGroup } from './select-group.svelte';
+export { default as SelectItem } from './select-item.svelte';
+export { default as SelectLabel } from './select-label.svelte';
+export { default as SelectScrollDownButton, } from './select-scroll-down-button.svelte';
+export { default as SelectScrollUpButton, } from './select-scroll-up-button.svelte';
+export { default as SelectSeparator } from './select-separator.svelte';
+export { default as SelectTrigger } from './select-trigger.svelte';
+export { default as SelectValue } from './select-value.svelte';

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

@@ -0,0 +1,53 @@
+<!--
+  Origin: the React package 2.23.0 `select.tsx` (`SelectContent`), itself shadcn/ui new-york `select`
+  Svelte: shadcn-svelte `select`
+  Diverged: bits-ui positions the list as a popper only, so React's default
+    item-aligned mode is gone; `sideOffset` replaces the per-side translates,
+    and the size variables are bits-ui's.
+-->
+<script lang="ts" module>
+  import { Select as SelectPrimitive } from 'bits-ui'
+
+  import type { WithoutChild } from '../../../utils/types.js'
+
+  /** A ring rather than a border, matching every other floating surface. */
+  export type SelectContentProps = WithoutChild<SelectPrimitive.ContentProps> & {
+    portalProps?: SelectPrimitive.PortalProps
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import SelectScrollDownButton from './select-scroll-down-button.svelte'
+  import SelectScrollUpButton from './select-scroll-up-button.svelte'
+
+  let {
+    ref = $bindable(null),
+    sideOffset = 4,
+    portalProps,
+    class: className,
+    children,
+    ...rest
+  }: SelectContentProps = $props()
+</script>
+
+<SelectPrimitive.Portal {...portalProps}>
+  <SelectPrimitive.Content
+    bind:ref
+    {sideOffset}
+    data-slot="select-content"
+    class={cn(
+      'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--bits-select-content-available-height) min-w-[8rem] origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl shadow-lg ring-1 ring-foreground/5 dark:ring-foreground/10',
+      className,
+    )}
+    {...rest}
+  >
+    <SelectScrollUpButton />
+    <SelectPrimitive.Viewport
+      class="h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1 p-1"
+    >
+      {@render children?.()}
+    </SelectPrimitive.Viewport>
+    <SelectScrollDownButton />
+  </SelectPrimitive.Content>
+</SelectPrimitive.Portal>

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

@@ -0,0 +1,9 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+import type { WithoutChild } from '../../../utils/types.js';
+/** A ring rather than a border, matching every other floating surface. */
+export type SelectContentProps = WithoutChild<SelectPrimitive.ContentProps> & {
+    portalProps?: SelectPrimitive.PortalProps;
+};
+declare const SelectContent: import("svelte").Component<SelectContentProps, {}, "ref">;
+type SelectContent = ReturnType<typeof SelectContent>;
+export default SelectContent;

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

@@ -0,0 +1,16 @@
+<!--
+  Origin: the React package 2.23.0 `select.tsx` (`SelectGroup`), 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'
+
+  export type SelectGroupProps = SelectPrimitive.GroupProps
+</script>
+
+<script lang="ts">
+  let { ref = $bindable(null), ...rest }: SelectGroupProps = $props()
+</script>
+
+<SelectPrimitive.Group bind:ref data-slot="select-group" {...rest} />

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

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

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

@@ -0,0 +1,67 @@
+<!--
+  Origin: the React package 2.23.0 `select.tsx` (`SelectItem`), itself shadcn/ui new-york `select`
+  Svelte: shadcn-svelte `select`
+  Diverged: bits-ui reads the trigger text from `label`, so an item names
+    itself with `label`; children are optional and render in its place.
+    bits-ui marks the active row `data-highlighted` rather than focusing it, so
+    the `focus:` pair is mirrored on `data-[highlighted]`.
+-->
+<script lang="ts" module>
+  import { Select as SelectPrimitive } from 'bits-ui'
+  import type { Snippet } from 'svelte'
+
+  import type { WithoutChild } from '../../../utils/types.js'
+
+  /**
+   * `focus:bg-muted` rather than `--accent`, which is a nav tint and never a
+   * hover.
+   */
+  export type SelectItemProps = Omit<WithoutChild<SelectPrimitive.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
+  }: SelectItemProps = $props()
+</script>
+
+<SelectPrimitive.Item
+  bind:ref
+  {value}
+  {label}
+  data-slot="select-item"
+  class={cn(
+    "focus:bg-muted focus:text-foreground data-[highlighted]:bg-muted data-[highlighted]:text-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center min-h-7 gap-2 rounded-xl in-data-[slot=dialog-content]:rounded-2xl 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 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+    className,
+  )}
+  {...rest}
+>
+  {#snippet children({ selected })}
+    <span
+      data-slot="select-item-indicator"
+      class="absolute right-2 flex size-3.5 items-center justify-center"
+    >
+      {#if selected}
+        <CheckIcon class="size-4" />
+      {/if}
+    </span>
+    <span>
+      {#if content}
+        {@render content()}
+      {:else}
+        {label ?? value}
+      {/if}
+    </span>
+  {/snippet}
+</SelectPrimitive.Item>

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

@@ -0,0 +1,13 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { WithoutChild } from '../../../utils/types.js';
+/**
+ * `focus:bg-muted` rather than `--accent`, which is a nav tint and never a
+ * hover.
+ */
+export type SelectItemProps = Omit<WithoutChild<SelectPrimitive.ItemProps>, 'children'> & {
+    children?: Snippet;
+};
+declare const SelectItem: import("svelte").Component<SelectItemProps, {}, "ref">;
+type SelectItem = ReturnType<typeof SelectItem>;
+export default SelectItem;

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

@@ -0,0 +1,23 @@
+<!--
+  Origin: the React package 2.23.0 `select.tsx` (`SelectLabel`), itself shadcn/ui new-york `select`
+  Svelte: shadcn-svelte `select`
+  Diverged: bits-ui names this part GroupHeading; it keeps React's name and classes.
+-->
+<script lang="ts" module>
+  import { Select as SelectPrimitive } from 'bits-ui'
+
+  export type SelectLabelProps = SelectPrimitive.GroupHeadingProps
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, ...rest }: SelectLabelProps = $props()
+</script>
+
+<SelectPrimitive.GroupHeading
+  bind:ref
+  data-slot="select-label"
+  class={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+  {...rest}
+/>

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

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