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

package/dist/components/forms/choice-row/choice-row-readonly.svelte

@@ -0,0 +1,56 @@
+<!--
+  Origin: the React package 2.23.0 `choice-row.tsx` (`ChoiceRowReadonly`)
+  Diverged: spreads the rest onto the root, as every component does.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  /**
+   * A settled choice, in the shape of the choice it was.
+   *
+   * For showing a value whose editor lives somewhere else. Same surface as
+   * `ChoiceRow`, so a column of them reads as one card, with a filled dot
+   * instead of a control: nothing here takes a click, and a real radio would
+   * offer an edit this row cannot honour.
+   */
+  export type ChoiceRowReadonlyProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    label: string
+    description?: string
+    selected: boolean
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { label, description, selected, class: className, ...rest }: ChoiceRowReadonlyProps = $props()
+</script>
+
+<div
+  data-slot="choice-row-readonly"
+  class={cn(
+    'flex w-full items-start gap-3 rounded-2xl border p-4',
+    selected ? 'border-primary bg-primary/5' : 'border-border bg-muted/40 opacity-60',
+    className,
+  )}
+  {...rest}
+>
+  <span
+    aria-hidden="true"
+    class={cn(
+      'mt-1 flex size-4 shrink-0 items-center justify-center rounded-full border',
+      selected ? 'border-primary' : 'border-muted-foreground/40',
+    )}
+  >
+    {#if selected}
+      <span class="bg-primary size-2 rounded-full"></span>
+    {/if}
+  </span>
+
+  <span class="min-w-0 flex-1">
+    <span class="block text-sm font-medium">{label}</span>
+    {#if description}
+      <span class="text-muted-foreground mt-0.5 block text-sm">{description}</span>
+    {/if}
+  </span>
+</div>

package/dist/components/forms/choice-row/choice-row-readonly.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * A settled choice, in the shape of the choice it was.
+ *
+ * For showing a value whose editor lives somewhere else. Same surface as
+ * `ChoiceRow`, so a column of them reads as one card, with a filled dot
+ * instead of a control: nothing here takes a click, and a real radio would
+ * offer an edit this row cannot honour.
+ */
+export type ChoiceRowReadonlyProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    label: string;
+    description?: string;
+    selected: boolean;
+};
+declare const ChoiceRowReadonly: import("svelte").Component<ChoiceRowReadonlyProps, {}, "">;
+type ChoiceRowReadonly = ReturnType<typeof ChoiceRowReadonly>;
+export default ChoiceRowReadonly;

package/dist/components/forms/choice-row/choice-row.svelte

@@ -0,0 +1,129 @@
+<!--
+  Origin: the React package 2.23.0 `choice-row.tsx` (`ChoiceRow`)
+  Diverged: React's `htmlFor` is `for`, and `control` and `media` are snippets.
+    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'
+
+  /**
+   * A bordered row that is entirely clickable and highlights when its control
+   * is checked.
+   *
+   * The highlight is `has-[[data-state=checked]]` rather than a prop, so the
+   * row follows whichever control it was handed without being told which one
+   * that is or what its value means.
+   *
+   * The control is `pointer-events-none`, and that is load-bearing. A
+   * `<label>` forwards its clicks to the labelable element it names, and a
+   * control inside that label is also hit directly, so a click on the control
+   * both activates it and bubbles to the label, which activates it again.
+   * Radio survives that because selecting an already-selected radio is a
+   * no-op; a checkbox does not, and toggles straight back. Taking pointer
+   * events off the control leaves exactly one path in. Keyboard focus and
+   * space are unaffected, because neither is a pointer event.
+   *
+   * **The control leads, unless there is `media`; then it trails.** A leading
+   * control gives a column of rows one left edge to scan. Media takes that
+   * edge over: an avatar is larger and carries colour, so beside a radio it
+   * wins the eye and the row ends up with two competing left-hand columns.
+   * Trailing it splits the row into identity on the left and state on the
+   * right, as iOS selection lists and Material 3's trailing control do.
+   * Derived from `media` rather than taken as a prop, so a whole product gets
+   * one layout.
+   */
+  export type ChoiceRowProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** Must match the control's own `id`, or the row will not forward its click. */
+    for: string
+    /** A `RadioGroupItem`, a `Checkbox`: anything bits-ui drives with `data-state`. */
+    control: Snippet
+    /**
+     * Sits between the control and the label: an avatar, a logo, a product
+     * thumbnail. For identifying *who or what* the row is about, where the
+     * control says whether it is chosen. Not an icon chip: a row of glyphs
+     * beside a row of radios reads as two controls.
+     *
+     * Passing this **moves the control to the trailing edge**.
+     */
+    media?: Snippet
+    label: string
+    description?: string
+    /** A short qualifier beside the label: "Coming soon", "Recommended". */
+    badge?: string
+    disabled?: boolean
+    /** Revealed under the row, outside the label, inside the same border. */
+    children?: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import Badge from '../../data-display/badge/badge.svelte'
+
+  let {
+    for: htmlFor,
+    control,
+    media,
+    label,
+    description,
+    badge,
+    disabled = false,
+    class: className,
+    children,
+    ...rest
+  }: ChoiceRowProps = $props()
+</script>
+
+<div
+  data-slot="choice-row"
+  class={cn(
+    'rounded-2xl border transition-colors',
+    'border-border bg-muted/40',
+    'has-[[data-state=checked]]:border-primary has-[[data-state=checked]]:bg-primary/5',
+    disabled && 'opacity-60',
+    className,
+  )}
+  {...rest}
+>
+  <label
+    for={htmlFor}
+    class={cn(
+      'flex w-full items-start gap-3 p-4',
+      disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+    )}
+  >
+    <!-- Leading: aligned to the label's first line, because that is the text it
+         names. Trailing: centred against the row, which is how a state column
+         on the right reads. -->
+    {#if !media}
+      <span class="pointer-events-none mt-0.5 flex shrink-0">{@render control()}</span>
+    {:else}
+      <!-- Pointer events off for the same reason as the control: a click landing
+           on media inside the label would bubble and arrive twice. -->
+      <span class="pointer-events-none flex shrink-0"> {@render media()} </span>
+    {/if}
+
+    <span class="min-w-0 flex-1">
+      <span class="flex flex-wrap items-center gap-2">
+        <span class="text-sm font-medium">{label}</span>
+        {#if badge}
+          <Badge>{badge}</Badge>
+        {/if}
+      </span>
+
+      {#if description}
+        <span class="text-muted-foreground mt-0.5 block text-sm">{description}</span>
+      {/if}
+    </span>
+
+    {#if media}
+      <span class="pointer-events-none flex shrink-0 self-center">{@render control()}</span>
+    {/if}
+  </label>
+
+  {#if children}
+    <!-- Outside the label, or a click anywhere in here would toggle the row. -->
+    <div class="border-border/60 border-t px-4 py-4">{@render children()}</div>
+  {/if}
+</div>

package/dist/components/forms/choice-row/choice-row.svelte.d.ts

@@ -0,0 +1,53 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * A bordered row that is entirely clickable and highlights when its control
+ * is checked.
+ *
+ * The highlight is `has-[[data-state=checked]]` rather than a prop, so the
+ * row follows whichever control it was handed without being told which one
+ * that is or what its value means.
+ *
+ * The control is `pointer-events-none`, and that is load-bearing. A
+ * `<label>` forwards its clicks to the labelable element it names, and a
+ * control inside that label is also hit directly, so a click on the control
+ * both activates it and bubbles to the label, which activates it again.
+ * Radio survives that because selecting an already-selected radio is a
+ * no-op; a checkbox does not, and toggles straight back. Taking pointer
+ * events off the control leaves exactly one path in. Keyboard focus and
+ * space are unaffected, because neither is a pointer event.
+ *
+ * **The control leads, unless there is `media`; then it trails.** A leading
+ * control gives a column of rows one left edge to scan. Media takes that
+ * edge over: an avatar is larger and carries colour, so beside a radio it
+ * wins the eye and the row ends up with two competing left-hand columns.
+ * Trailing it splits the row into identity on the left and state on the
+ * right, as iOS selection lists and Material 3's trailing control do.
+ * Derived from `media` rather than taken as a prop, so a whole product gets
+ * one layout.
+ */
+export type ChoiceRowProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** Must match the control's own `id`, or the row will not forward its click. */
+    for: string;
+    /** A `RadioGroupItem`, a `Checkbox`: anything bits-ui drives with `data-state`. */
+    control: Snippet;
+    /**
+     * Sits between the control and the label: an avatar, a logo, a product
+     * thumbnail. For identifying *who or what* the row is about, where the
+     * control says whether it is chosen. Not an icon chip: a row of glyphs
+     * beside a row of radios reads as two controls.
+     *
+     * Passing this **moves the control to the trailing edge**.
+     */
+    media?: Snippet;
+    label: string;
+    description?: string;
+    /** A short qualifier beside the label: "Coming soon", "Recommended". */
+    badge?: string;
+    disabled?: boolean;
+    /** Revealed under the row, outside the label, inside the same border. */
+    children?: Snippet;
+};
+declare const ChoiceRow: import("svelte").Component<ChoiceRowProps, {}, "">;
+type ChoiceRow = ReturnType<typeof ChoiceRow>;
+export default ChoiceRow;

package/dist/components/forms/choice-row/index.d.ts

@@ -0,0 +1,2 @@
+export { type ChoiceRowProps, default as ChoiceRow } from './choice-row.svelte';
+export { type ChoiceRowReadonlyProps, default as ChoiceRowReadonly, } from './choice-row-readonly.svelte';

package/dist/components/forms/choice-row/index.js

@@ -0,0 +1,2 @@
+export { default as ChoiceRow } from './choice-row.svelte';
+export { default as ChoiceRowReadonly, } from './choice-row-readonly.svelte';

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

@@ -0,0 +1,65 @@
+<!--
+  Origin: the React package 2.23.0 `combobox.tsx` (`ComboboxChip`)
+  Diverged: a plain element with its own remove button, since bits-ui has no
+    Chip or ChipRemove; the caller removes the value in `onRemove`. Lucide's x
+    for Tabler's.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /** One chosen value in `ComboboxChips`. */
+  export type ComboboxChipProps = WithElementRef<HTMLAttributes<HTMLSpanElement>> & {
+    showRemove?: boolean
+    /** Called by the remove button; take the value out of the combobox's. */
+    onRemove?: () => void
+    /** Names the remove button: "Remove Valves". */
+    removeLabel?: string
+    disabled?: boolean
+  }
+</script>
+
+<script lang="ts">
+  import XIcon from '@lucide/svelte/icons/x'
+
+  import { cn } from '../../../utils/cn.js'
+  import Button from '../../actions/button/button.svelte'
+
+  let {
+    ref = $bindable(null),
+    showRemove = true,
+    onRemove,
+    removeLabel = 'Remove',
+    disabled = false,
+    class: className,
+    children,
+    ...rest
+  }: ComboboxChipProps = $props()
+</script>
+
+<span
+  bind:this={ref}
+  data-slot="combobox-chip"
+  class={cn(
+    'bg-background text-foreground flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1.5 rounded-full px-2 text-xs font-medium shadow-xs has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+  {#if showRemove}
+    <Button
+      variant="ghost"
+      size="sm"
+      iconOnly
+      class="-ml-1 opacity-50 hover:opacity-100"
+      data-slot="combobox-chip-remove"
+      aria-label={removeLabel}
+      {disabled}
+      onclick={onRemove}
+    >
+      <XIcon class="pointer-events-none" />
+    </Button>
+  {/if}
+</span>

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

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/** One chosen value in `ComboboxChips`. */
+export type ComboboxChipProps = WithElementRef<HTMLAttributes<HTMLSpanElement>> & {
+    showRemove?: boolean;
+    /** Called by the remove button; take the value out of the combobox's. */
+    onRemove?: () => void;
+    /** Names the remove button: "Remove Valves". */
+    removeLabel?: string;
+    disabled?: boolean;
+};
+declare const ComboboxChip: import("svelte").Component<ComboboxChipProps, {}, "ref">;
+type ComboboxChip = ReturnType<typeof ComboboxChip>;
+export default ComboboxChip;

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

@@ -0,0 +1,23 @@
+<!--
+  Origin: the React package 2.23.0 `combobox.tsx` (`ComboboxChipsInput`)
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import { Combobox as ComboboxPrimitive } from 'bits-ui'
+
+  /** The text a multiple combobox is typed into, inside `ComboboxChips`. */
+  export type ComboboxChipsInputProps = ComboboxPrimitive.InputProps
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, ...rest }: ComboboxChipsInputProps = $props()
+</script>
+
+<ComboboxPrimitive.Input
+  bind:ref
+  data-slot="combobox-chip-input"
+  class={cn('min-w-16 flex-1 bg-transparent outline-none', className)}
+  {...rest}
+/>

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

@@ -0,0 +1,6 @@
+import { Combobox as ComboboxPrimitive } from 'bits-ui';
+/** The text a multiple combobox is typed into, inside `ComboboxChips`. */
+export type ComboboxChipsInputProps = ComboboxPrimitive.InputProps;
+declare const ComboboxChipsInput: import("svelte").Component<ComboboxPrimitive.InputProps, {}, "ref">;
+type ComboboxChipsInput = ReturnType<typeof ComboboxChipsInput>;
+export default ComboboxChipsInput;

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

@@ -0,0 +1,35 @@
+<!--
+  Origin: the React package 2.23.0 `combobox.tsx` (`ComboboxChips`)
+  Diverged: a plain element, since bits-ui has no Chips part. Bind its `ref`
+    and pass it to ComboboxContent's `customAnchor`, where React used
+    `useComboboxAnchor`.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /**
+   * The field for a multiple combobox: the chosen values as chips, then a
+   * `ComboboxChipsInput` to type into, wrapped as one Input-like box.
+   */
+  export type ComboboxChipsProps = WithElementRef<HTMLAttributes<HTMLDivElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: ComboboxChipsProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="combobox-chips"
+  class={cn(
+    'bg-input/50 focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-2xl border border-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/**
+ * The field for a multiple combobox: the chosen values as chips, then a
+ * `ComboboxChipsInput` to type into, wrapped as one Input-like box.
+ */
+export type ComboboxChipsProps = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+declare const ComboboxChips: import("svelte").Component<ComboboxChipsProps, {}, "ref">;
+type ComboboxChips = ReturnType<typeof ComboboxChips>;
+export default ComboboxChips;

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

@@ -0,0 +1,52 @@
+<!--
+  Origin: the React package 2.23.0 `combobox.tsx` (`ComboboxContent`)
+  Diverged: the size and origin variables are bits-ui's
+    (`--bits-combobox-anchor-width` and the rest). Base UI's `anchor` is
+    bits-ui's `customAnchor`, and marks the panel `data-chips` as React's did;
+    `container` is `portalProps.to`.
+-->
+<script lang="ts" module>
+  import { Combobox as ComboboxPrimitive } from 'bits-ui'
+
+  /**
+   * The floating panel. Put a `ComboboxList` inside, and a `ComboboxEmpty`
+   * for when nothing matches.
+   */
+  export type ComboboxContentProps = ComboboxPrimitive.ContentProps & {
+    portalProps?: ComboboxPrimitive.PortalProps
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    side = 'bottom',
+    sideOffset = 6,
+    align = 'start',
+    alignOffset = 0,
+    customAnchor,
+    portalProps,
+    class: className,
+    ...rest
+  }: ComboboxContentProps = $props()
+</script>
+
+<ComboboxPrimitive.Portal {...portalProps}>
+  <ComboboxPrimitive.Content
+    bind:ref
+    {side}
+    {sideOffset}
+    {align}
+    {alignOffset}
+    {customAnchor}
+    data-slot="combobox-content"
+    data-chips={customAnchor ? true : undefined}
+    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 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 group/combobox-content relative isolate z-50 max-h-96 w-(--bits-combobox-anchor-width) max-w-(--bits-combobox-content-available-width) min-w-[calc(var(--bits-combobox-anchor-width)+--spacing(7))] origin-(--bits-combobox-content-transform-origin) overflow-hidden rounded-2xl shadow-md ring-1 duration-100 data-[chips=true]:min-w-(--bits-combobox-anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none',
+      className,
+    )}
+    {...rest}
+  />
+</ComboboxPrimitive.Portal>

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

@@ -0,0 +1,11 @@
+import { Combobox as ComboboxPrimitive } from 'bits-ui';
+/**
+ * The floating panel. Put a `ComboboxList` inside, and a `ComboboxEmpty`
+ * for when nothing matches.
+ */
+export type ComboboxContentProps = ComboboxPrimitive.ContentProps & {
+    portalProps?: ComboboxPrimitive.PortalProps;
+};
+declare const ComboboxContent: import("svelte").Component<ComboboxContentProps, {}, "ref">;
+type ComboboxContent = ReturnType<typeof ComboboxContent>;
+export default ComboboxContent;

package/dist/components/forms/combobox/combobox-context.d.ts

@@ -0,0 +1,6 @@
+export type ComboboxContext = {
+    readonly hasValue: boolean;
+    clear: () => void;
+};
+export declare const setComboboxContext: (context: ComboboxContext) => ComboboxContext;
+export declare const getComboboxContext: () => ComboboxContext | undefined;

package/dist/components/forms/combobox/combobox-context.js

@@ -0,0 +1,9 @@
+/**
+ * Origin: the React package 2.23.0 `combobox.tsx` (Base UI's Combobox context)
+ * Diverged: what the root shares with ComboboxInput, so its clear button can
+ *   empty the value and know whether there is one. Base UI held this itself.
+ */
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('mise-combobox');
+export const setComboboxContext = (context) => setContext(KEY, context);
+export const getComboboxContext = () => getContext(KEY);

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

@@ -0,0 +1,28 @@
+<!--
+  Origin: the React package 2.23.0 `combobox.tsx` (`ComboboxEmpty`)
+  Diverged: a plain element the caller renders when nothing matches, since the
+    caller does the filtering; so it is `flex` rather than React's `hidden`
+    switched on by Base UI's `data-empty`.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type ComboboxEmptyProps = WithElementRef<HTMLAttributes<HTMLDivElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: ComboboxEmptyProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="combobox-empty"
+  class={cn('text-muted-foreground flex w-full justify-center py-2 text-center text-sm', className)}
+  {...rest}
+>
+  {@render children?.()}
+</div>

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

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

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

@@ -0,0 +1,15 @@
+<!--
+  Origin: the React package 2.23.0 `combobox.tsx` (`ComboboxGroup`)
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import { Combobox as ComboboxPrimitive } from 'bits-ui'
+
+  export type ComboboxGroupProps = ComboboxPrimitive.GroupProps
+</script>
+
+<script lang="ts">
+  let { ref = $bindable(null), ...rest }: ComboboxGroupProps = $props()
+</script>
+
+<ComboboxPrimitive.Group bind:ref data-slot="combobox-group" {...rest} />

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

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