@ui-organized/svelte 0.0.0-stage → 0.1.0

package/dist/components/Combobox/Combobox.svelte

@@ -0,0 +1,171 @@
+<script lang="ts">
+  import {
+    Combobox as ArkCombobox, Field, Portal, createListCollection, useFilter,
+  } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { CONTROL_ICON_SIZE, comboboxFieldStyles } from "@ui-organized/core";
+  import Icon from "../Icon/Icon.svelte";
+  import FieldError from "../FieldError/FieldError.svelte";
+  import type { ComboboxProps } from "./Combobox.types.js";
+  import "@ui-organized/core/components/Combobox/Combobox.css";
+  import { glyph } from "../../icons/glyph.js";
+  import { onMount } from "svelte";
+  import { trackFocusModality } from "@ui-organized/core/focus-modality";
+
+  // Text fields read pointer vs keyboard for a quiet focus state on click.
+  onMount(() => trackFocusModality());
+
+  let {
+    options,
+    value = $bindable(),
+    defaultValue,
+    onValueChange,
+    open = $bindable(),
+    defaultOpen,
+    onOpenChange,
+    placeholder,
+    label,
+    helperText,
+    error,
+    size,
+    disabled,
+    name,
+    required,
+    class: className,
+    emptyMessage = "No results found.",
+    portalContainer,
+  }: ComboboxProps = $props();
+
+  const isInvalid = $derived(!!error);
+  const errorMessage = $derived(typeof error === "string" ? error : undefined);
+  const iconSize = $derived(CONTROL_ICON_SIZE[size ?? "md"]);
+
+  // Ark does not filter for us: mirror the input text and rebuild the collection
+  // from the matching options. Rendering items from `collection.items` keeps the
+  // rendered list and the machine's collection in step.
+  //
+  // React memoises `useFilter`'s options object at module scope so the memo key
+  // stays stable. Svelte needs no such care — `$derived` tracks the values it
+  // reads rather than an argument identity — so the options are inline here.
+  const filter = useFilter({ sensitivity: "base" });
+  let query = $state("");
+
+  const collection = $derived(
+    createListCollection({
+      items: query.trim().length
+        ? options.filter((o) => filter().contains(o.label, query))
+        : options,
+      itemToValue: (o) => o.value,
+      itemToString: (o) => o.label,
+      isItemDisabled: (o) => !!o.disabled,
+    }),
+  );
+</script>
+
+<Field.Root
+  class={clsx(comboboxFieldStyles({ size }), className)}
+  invalid={isInvalid}
+  {disabled}
+>
+  <!--
+    Ark Combobox.Root renders a wrapping <div>; `display:contents` keeps the
+    label, control and helper as direct flex children of the field.
+  -->
+  <ArkCombobox.Root
+    class="combobox-field__root"
+    {collection}
+    value={value != null ? [value] : undefined}
+    defaultValue={defaultValue != null ? [defaultValue] : undefined}
+    onValueChange={(details) => {
+      value = details.value[0] ?? "";
+      onValueChange?.(details.value[0] ?? "");
+    }}
+    onInputValueChange={(details) => (query = details.inputValue)}
+    {open}
+    {defaultOpen}
+    onOpenChange={(details) => {
+      open = details.open;
+      onOpenChange?.(details.open);
+    }}
+    invalid={isInvalid}
+    {disabled}
+    {name}
+    {required}
+    positioning={{ placement: "bottom-start", gutter: 4, strategy: "fixed" }}
+  >
+    {#if label}
+      <ArkCombobox.Label class="field__label">
+        {label}
+        {#if required}<span class="field__required" aria-hidden="true"></span>{/if}
+      </ArkCombobox.Label>
+    {/if}
+    <ArkCombobox.Control class="combobox-field__control">
+      <!--
+        `aria-describedby` is passed in by hand because Ark Svelte's
+        `Combobox.Input` does not read the Field context, where Ark React's does:
+
+            // @ark-ui/react/dist/components/combobox/combobox-input.js
+            const field = useFieldContext();
+            return jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps });
+
+        Without this the helper text is rendered but associated with nothing, so
+        a screen reader never announces it — the field silently loses half its
+        description. This is a wrapper gap, not a machine one: both zag versions
+        are identical here, and the combobox machine never sets the attribute
+        itself, which is exactly why React needs the Field fallback too.
+
+        Six Ark Svelte parts have this gap. This one is pinned by the browser
+        gate's `Combobox / helper text` scenario; the others are recorded in the
+        roadmap because nothing renders them under a Field yet.
+
+        Delete once Ark Svelte's part reads the context — the merge order makes
+        that safe either way, since the machine supplies no competing value.
+      -->
+      <Field.Context>
+        {#snippet render(field)}
+          <ArkCombobox.Input
+            class="field__control combobox-field__input"
+            {placeholder}
+            aria-describedby={field()?.ariaDescribedby}
+          />
+        {/snippet}
+      </Field.Context>
+      <ArkCombobox.Trigger class="combobox-field__trigger" aria-label="Toggle options">
+        <Icon name={glyph("chevron-down")} size={iconSize} />
+      </ArkCombobox.Trigger>
+    </ArkCombobox.Control>
+    <Portal container={portalContainer ?? undefined}>
+      <ArkCombobox.Positioner class="combobox-positioner">
+        <ArkCombobox.Content class="combobox-popup">
+          <ArkCombobox.Empty class="combobox-popup__empty text-default-body-medium">
+            {emptyMessage}
+          </ArkCombobox.Empty>
+          <!--
+            Items sit directly in Content, which is itself the listbox —
+            Combobox.List is a second labelled wrapper for the non-composite
+            mode, and in between it reads as a child of the listbox that isn't an
+            option.
+          -->
+          {#each collection.items as item (item.value)}
+            <ArkCombobox.Item {item} class="combobox-popup__item text-default-body-large">
+              <span class="combobox-popup__item-label">{item.label}</span>
+              <ArkCombobox.ItemIndicator class="combobox-popup__item-indicator">
+                <Icon name={glyph("check")} size={iconSize} />
+              </ArkCombobox.ItemIndicator>
+            </ArkCombobox.Item>
+          {/each}
+        </ArkCombobox.Content>
+      </ArkCombobox.Positioner>
+    </Portal>
+  </ArkCombobox.Root>
+  {#if helperText && !isInvalid}
+    <Field.HelperText class="field__description">{helperText}</Field.HelperText>
+  {/if}
+  {#if isInvalid && errorMessage}
+    <Field.ErrorText>
+      {#snippet asChild(props)}
+        <FieldError {...props()} message={errorMessage} />
+      {/snippet}
+    </Field.ErrorText>
+  {/if}
+</Field.Root>

package/dist/components/Combobox/Combobox.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { ComboboxProps } from "./Combobox.types.js";
+import "@ui-organized/core/components/Combobox/Combobox.css";
+declare const Combobox: import("svelte").Component<ComboboxProps, {}, "value" | "open">;
+type Combobox = ReturnType<typeof Combobox>;
+export default Combobox;
+//# sourceMappingURL=Combobox.svelte.d.ts.map

package/dist/components/Combobox/Combobox.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Combobox/Combobox.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,qDAAqD,CAAC;AA8H7D,QAAA,MAAM,QAAQ,iEAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/Combobox/Combobox.types.d.ts

@@ -0,0 +1,47 @@
+import type { ControlSize } from "@ui-organized/core";
+export interface ComboboxOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface ComboboxProps {
+    /** Selectable options. The list filters against each option's `label`. */
+    options: ComboboxOption[];
+    /** Selected value. Bindable: `bind:value`. */
+    value?: string;
+    /** Initial selected value for uncontrolled usage. */
+    defaultValue?: string;
+    /** Called with the selected option's value (empty string when cleared). */
+    onValueChange?: (value: string) => void;
+    /** Open state of the dropdown. Bindable: `bind:open`. */
+    open?: boolean;
+    /** Initial open state for uncontrolled usage. */
+    defaultOpen?: boolean;
+    /** Callback fired when the dropdown opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Placeholder shown in the search input when nothing is selected. */
+    placeholder?: string;
+    /** Accessible label rendered above the control. */
+    label?: string;
+    /** Helper text rendered below the control. Hidden when an error is shown. */
+    helperText?: string;
+    /**
+     * Error state. Pass a string to show an error message.
+     * Pass `true` to mark the field invalid without a message.
+     */
+    error?: string | boolean;
+    /** Size variant. Defaults to 'md'. */
+    size?: ControlSize;
+    /** Whether the field should ignore user interaction. */
+    disabled?: boolean;
+    /** Name attribute for form submission. */
+    name?: string;
+    /** Whether a value is required for form submission. */
+    required?: boolean;
+    class?: string;
+    /** Message shown when no option matches the query. */
+    emptyMessage?: string;
+    /** DOM element to portal the dropdown into. Defaults to `document.body`. */
+    portalContainer?: HTMLElement | null;
+}
+//# sourceMappingURL=Combobox.types.d.ts.map

package/dist/components/Combobox/Combobox.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Combobox/Combobox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACtD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B,0EAA0E;IAC1E,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2EAA2E;IAC3E,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,yDAAyD;IACzD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wDAAwD;IACxD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,sEAAsE;IACtE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,sCAAsC;IACtC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4EAA4E;IAC5E,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACtC"}

package/dist/components/Combobox/Combobox.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Combobox/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Combobox } from "./Combobox.svelte";
+export type { ComboboxProps, ComboboxOption } from "./Combobox.types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Combobox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Combobox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/Combobox/index.js

@@ -0,0 +1 @@
+export { default as Combobox } from "./Combobox.svelte";

package/dist/components/ContextMenu/ContextMenu.svelte

@@ -0,0 +1,33 @@
+<!--
+  ContextMenu root — controls open state.
+
+  Ark has no separate context-menu primitive: it is a Menu with a ContextTrigger
+  (right-click) that anchors the positioner at the cursor.
+-->
+<script lang="ts">
+  import { Menu as ArkMenu } from "@ark-ui/svelte";
+  import { providePositioning } from "../Popover/positioning.svelte.js";
+  import type { ContextMenuProps } from "./ContextMenu.types.js";
+  import "@ui-organized/core/components/ContextMenu/ContextMenu.css";
+  // Reuse the design-system Checkbox / Radio control visuals inside menu items.
+  import "@ui-organized/core/components/Checkbox/Checkbox.css";
+  import "@ui-organized/core/components/Radio/Radio.css";
+
+  let { open = $bindable(), defaultOpen, onOpenChange, children }: ContextMenuProps = $props();
+
+  // No placement: the cursor anchor set by ContextTrigger drives it, and naming
+  // a side here would pull the popup back to the trigger box instead.
+  const positioning = providePositioning({ gutter: 4 });
+</script>
+
+<ArkMenu.Root
+  {open}
+  {defaultOpen}
+  onOpenChange={(details) => {
+    open = details.open;
+    onOpenChange?.(details.open);
+  }}
+  positioning={positioning.read()}
+>
+  {@render children?.()}
+</ArkMenu.Root>

package/dist/components/ContextMenu/ContextMenu.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ContextMenuProps } from "./ContextMenu.types.js";
+import "@ui-organized/core/components/ContextMenu/ContextMenu.css";
+import "@ui-organized/core/components/Checkbox/Checkbox.css";
+import "@ui-organized/core/components/Radio/Radio.css";
+declare const ContextMenu: import("svelte").Component<ContextMenuProps, {}, "open">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;
+//# sourceMappingURL=ContextMenu.svelte.d.ts.map

package/dist/components/ContextMenu/ContextMenu.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ContextMenu/ContextMenu.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,2DAA2D,CAAC;AAEnE,OAAO,qDAAqD,CAAC;AAC7D,OAAO,+CAA+C,CAAC;AA4BvD,QAAA,MAAM,WAAW,0DAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/ContextMenu/ContextMenu.types.d.ts

@@ -0,0 +1,79 @@
+import type { IconComponent, IconName } from "../Icon/Icon.types.js";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { ArkForwardable } from "../../types.js";
+export interface ContextMenuProps {
+    /** Open state. Bindable: `bind:open`. */
+    open?: boolean;
+    /** Initial open state for uncontrolled usage. */
+    defaultOpen?: boolean;
+    /** Callback fired when the open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    children?: Snippet;
+}
+/**
+ * The right-click area's props.
+ *
+ * Typed against `HTMLElement` rather than `HTMLDivElement`, even though a `div`
+ * is what renders. They are handed to Ark's own `PropsFn`, which is generic in
+ * the *button* it would otherwise have rendered, and an event handler bound to
+ * `HTMLDivElement` is not assignable to one bound to `HTMLButtonElement`.
+ * `HTMLElement` is assignable to both, so the merge typechecks without the
+ * trigger's public API claiming to be a button.
+ */
+export interface ContextMenuTriggerProps extends ArkForwardable<Omit<HTMLAttributes<HTMLElement>, "class">> {
+    class?: string;
+    children?: Snippet;
+}
+export interface ContextMenuContentProps extends ArkForwardable<Omit<HTMLAttributes<HTMLDivElement>, "class">> {
+    /** Gap from the cursor, in px. Defaults to 4. */
+    sideOffset?: number;
+    /** Offset along the alignment axis, in px. */
+    alignOffset?: number;
+    /** Portal container. Defaults to document.body. */
+    container?: HTMLElement | null;
+    class?: string;
+    children?: Snippet;
+}
+export interface ContextMenuItemProps extends ArkForwardable<Omit<HTMLAttributes<HTMLDivElement>, "class">> {
+    /** Stable value for the item. Generated when omitted. */
+    value?: string;
+    /** Icon rendered before the label. */
+    icon?: IconName | IconComponent;
+    /** Renders the item in the destructive color. */
+    destructive?: boolean;
+    /** Fired when the item is selected (click or keyboard). */
+    onSelect?: () => void;
+    class?: string;
+    children?: Snippet;
+}
+export interface ContextMenuSeparatorProps {
+    class?: string;
+}
+export interface ContextMenuGroupProps extends ArkForwardable<Omit<HTMLAttributes<HTMLDivElement>, "class">> {
+    class?: string;
+    children?: Snippet;
+}
+export interface ContextMenuGroupLabelProps extends ArkForwardable<Omit<HTMLAttributes<HTMLDivElement>, "class">> {
+    class?: string;
+    children?: Snippet;
+}
+export interface ContextMenuRadioGroupProps {
+    /** Selected value. Bindable: `bind:value`. */
+    value?: string;
+    onValueChange?: (value: string) => void;
+    children?: Snippet;
+}
+export interface ContextMenuCheckboxItemProps extends ArkForwardable<Omit<HTMLAttributes<HTMLDivElement>, "class">> {
+    value?: string;
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    class?: string;
+    children?: Snippet;
+}
+export interface ContextMenuRadioItemProps extends ArkForwardable<Omit<HTMLAttributes<HTMLDivElement>, "class">> {
+    value: string;
+    class?: string;
+    children?: Snippet;
+}
+//# sourceMappingURL=ContextMenu.types.d.ts.map

package/dist/components/ContextMenu/ContextMenu.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ContextMenu/ContextMenu.types.ts"],"names":[],"mappings":"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"}

package/dist/components/ContextMenu/ContextMenu.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ContextMenu/ContextMenuCheckboxItem.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { Menu as ArkMenu } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import Icon from "../Icon/Icon.svelte";
+  import type { ContextMenuCheckboxItemProps } from "./ContextMenu.types.js";
+  import { glyph } from "../../icons/glyph.js";
+
+  let {
+    value, checked, onCheckedChange, class: className, children, ...rest
+  }: ContextMenuCheckboxItemProps = $props();
+
+  const generatedId = $props.id();
+</script>
+
+<ArkMenu.CheckboxItem
+  value={value ?? generatedId}
+  checked={checked ?? false}
+  onCheckedChange={(next) => onCheckedChange?.(next)}
+  class={clsx("context-menu__item", "context-menu__item--check", className)}
+  {...rest}
+>
+  <!--
+    Design-system Checkbox control; checked state is driven by the item's
+    data-state (see ContextMenu.css), not by the CheckboxItem indicator. The
+    check glyph mirrors the standalone Checkbox — the indicator's visibility is
+    toggled in ContextMenu.css.
+  -->
+  <span class="checkbox__control context-menu__control">
+    <span class="checkbox__indicator">
+      <Icon name={glyph("check")} size={16} class="checkbox__check" />
+    </span>
+  </span>
+  <span class="context-menu__item-label">{@render children?.()}</span>
+</ArkMenu.CheckboxItem>

package/dist/components/ContextMenu/ContextMenuCheckboxItem.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { ContextMenuCheckboxItemProps } from "./ContextMenu.types.js";
+declare const ContextMenuCheckboxItem: import("svelte").Component<ContextMenuCheckboxItemProps, {}, "">;
+type ContextMenuCheckboxItem = ReturnType<typeof ContextMenuCheckboxItem>;
+export default ContextMenuCheckboxItem;
+//# sourceMappingURL=ContextMenuCheckboxItem.svelte.d.ts.map

package/dist/components/ContextMenu/ContextMenuCheckboxItem.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuCheckboxItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ContextMenu/ContextMenuCheckboxItem.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,wBAAwB,CAAC;AA6B3E,QAAA,MAAM,uBAAuB,kEAAwC,CAAC;AACtE,KAAK,uBAAuB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC1E,eAAe,uBAAuB,CAAC"}

package/dist/components/ContextMenu/ContextMenuContent.svelte

@@ -0,0 +1,32 @@
+<!-- Portalled surface, positioned at the cursor, holding the menu items. -->
+<script lang="ts">
+  import { Menu as ArkMenu, Portal } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { setAnchoredPositioning } from "../Popover/positioning.svelte.js";
+  import type { ContextMenuContentProps } from "./ContextMenu.types.js";
+
+  let {
+    sideOffset = 4,
+    alignOffset,
+    container,
+    class: className,
+    children,
+    ...contentProps
+  }: ContextMenuContentProps = $props();
+
+  // An accessor, not a value, so a later change to sideOffset reaches the Root —
+  // see ../Popover/positioning.svelte.ts. No placement: the cursor anchor set by
+  // ContextTrigger drives it.
+  setAnchoredPositioning(() => ({
+    gutter: sideOffset,
+    offset: alignOffset != null ? { crossAxis: alignOffset } : undefined,
+  }));
+</script>
+
+<Portal container={container ?? undefined}>
+  <ArkMenu.Positioner class="context-menu__positioner">
+    <ArkMenu.Content class={clsx("context-menu__popup", className)} {...contentProps}>
+      {@render children?.()}
+    </ArkMenu.Content>
+  </ArkMenu.Positioner>
+</Portal>

package/dist/components/ContextMenu/ContextMenuContent.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { ContextMenuContentProps } from "./ContextMenu.types.js";
+declare const ContextMenuContent: import("svelte").Component<ContextMenuContentProps, {}, "">;
+type ContextMenuContent = ReturnType<typeof ContextMenuContent>;
+export default ContextMenuContent;
+//# sourceMappingURL=ContextMenuContent.svelte.d.ts.map

package/dist/components/ContextMenu/ContextMenuContent.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuContent.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ContextMenu/ContextMenuContent.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAqCtE,QAAA,MAAM,kBAAkB,6DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/components/ContextMenu/ContextMenuGroup.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { Menu as ArkMenu } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import type { ContextMenuGroupProps } from "./ContextMenu.types.js";
+
+  let { class: className, children, ...rest }: ContextMenuGroupProps = $props();
+</script>
+
+<ArkMenu.ItemGroup class={clsx("context-menu__group", className)} {...rest}>
+  {@render children?.()}
+</ArkMenu.ItemGroup>

package/dist/components/ContextMenu/ContextMenuGroup.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { ContextMenuGroupProps } from "./ContextMenu.types.js";
+declare const ContextMenuGroup: import("svelte").Component<ContextMenuGroupProps, {}, "">;
+type ContextMenuGroup = ReturnType<typeof ContextMenuGroup>;
+export default ContextMenuGroup;
+//# sourceMappingURL=ContextMenuGroup.svelte.d.ts.map

package/dist/components/ContextMenu/ContextMenuGroup.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ContextMenu/ContextMenuGroup.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAgBpE,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/ContextMenu/ContextMenuGroupLabel.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { Menu as ArkMenu } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import type { ContextMenuGroupLabelProps } from "./ContextMenu.types.js";
+
+  let { class: className, children, ...rest }: ContextMenuGroupLabelProps = $props();
+</script>
+
+<ArkMenu.ItemGroupLabel
+  class={clsx("context-menu__group-label", "text-strong-body-small", className)}
+  {...rest}
+>
+  {@render children?.()}
+</ArkMenu.ItemGroupLabel>

package/dist/components/ContextMenu/ContextMenuGroupLabel.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { ContextMenuGroupLabelProps } from "./ContextMenu.types.js";
+declare const ContextMenuGroupLabel: import("svelte").Component<ContextMenuGroupLabelProps, {}, "">;
+type ContextMenuGroupLabel = ReturnType<typeof ContextMenuGroupLabel>;
+export default ContextMenuGroupLabel;
+//# sourceMappingURL=ContextMenuGroupLabel.svelte.d.ts.map

package/dist/components/ContextMenu/ContextMenuGroupLabel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuGroupLabel.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ContextMenu/ContextMenuGroupLabel.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AAgBzE,QAAA,MAAM,qBAAqB,gEAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

package/dist/components/ContextMenu/ContextMenuItem.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { Menu as ArkMenu } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import Icon from "../Icon/Icon.svelte";
+  import type { ContextMenuItemProps } from "./ContextMenu.types.js";
+
+  let {
+    icon, destructive, value, onSelect, class: className, children, ...rest
+  }: ContextMenuItemProps = $props();
+
+  // Ark requires a stable value per item; fall back to a generated id.
+  // Typeahead still uses the item's text content.
+  const generatedId = $props.id();
+</script>
+
+<ArkMenu.Item
+  value={value ?? generatedId}
+  {onSelect}
+  class={clsx("context-menu__item", destructive && "context-menu__item--destructive", className)}
+  {...rest}
+>
+  {#if icon}<Icon name={icon} size={20} class="context-menu__item-icon" />{/if}
+  <span class="context-menu__item-label">{@render children?.()}</span>
+</ArkMenu.Item>

package/dist/components/ContextMenu/ContextMenuItem.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { ContextMenuItemProps } from "./ContextMenu.types.js";
+declare const ContextMenuItem: import("svelte").Component<ContextMenuItemProps, {}, "">;
+type ContextMenuItem = ReturnType<typeof ContextMenuItem>;
+export default ContextMenuItem;
+//# sourceMappingURL=ContextMenuItem.svelte.d.ts.map

package/dist/components/ContextMenu/ContextMenuItem.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ContextMenu/ContextMenuItem.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAwBnE,QAAA,MAAM,eAAe,0DAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/components/ContextMenu/ContextMenuRadioGroup.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { Menu as ArkMenu } from "@ark-ui/svelte";
+  import type { ContextMenuRadioGroupProps } from "./ContextMenu.types.js";
+
+  let { value = $bindable(), onValueChange, children }: ContextMenuRadioGroupProps = $props();
+</script>
+
+<ArkMenu.RadioItemGroup
+  {value}
+  onValueChange={(details) => {
+    value = details.value;
+    onValueChange?.(details.value);
+  }}
+>
+  {@render children?.()}
+</ArkMenu.RadioItemGroup>

package/dist/components/ContextMenu/ContextMenuRadioGroup.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { ContextMenuRadioGroupProps } from "./ContextMenu.types.js";
+declare const ContextMenuRadioGroup: import("svelte").Component<ContextMenuRadioGroupProps, {}, "value">;
+type ContextMenuRadioGroup = ReturnType<typeof ContextMenuRadioGroup>;
+export default ContextMenuRadioGroup;
+//# sourceMappingURL=ContextMenuRadioGroup.svelte.d.ts.map

package/dist/components/ContextMenu/ContextMenuRadioGroup.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuRadioGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ContextMenu/ContextMenuRadioGroup.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AAkBzE,QAAA,MAAM,qBAAqB,qEAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

package/dist/components/ContextMenu/ContextMenuRadioItem.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Menu as ArkMenu } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import type { ContextMenuRadioItemProps } from "./ContextMenu.types.js";
+
+  let { class: className, children, ...rest }: ContextMenuRadioItemProps = $props();
+</script>
+
+<ArkMenu.RadioItem
+  class={clsx("context-menu__item", "context-menu__item--check", className)}
+  {...rest}
+>
+  <!--
+    Design-system Radio control; checked state is driven by the item's data-state
+    (see ContextMenu.css), not by the RadioItem indicator.
+  -->
+  <span class="radio-item__control context-menu__control">
+    <span class="radio-item__indicator"></span>
+  </span>
+  <span class="context-menu__item-label">{@render children?.()}</span>
+</ArkMenu.RadioItem>

package/dist/components/ContextMenu/ContextMenuRadioItem.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { ContextMenuRadioItemProps } from "./ContextMenu.types.js";
+declare const ContextMenuRadioItem: import("svelte").Component<ContextMenuRadioItemProps, {}, "">;
+type ContextMenuRadioItem = ReturnType<typeof ContextMenuRadioItem>;
+export default ContextMenuRadioItem;
+//# sourceMappingURL=ContextMenuRadioItem.svelte.d.ts.map

package/dist/components/ContextMenu/ContextMenuRadioItem.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuRadioItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ContextMenu/ContextMenuRadioItem.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAoBxE,QAAA,MAAM,oBAAoB,+DAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}