@ui-organized/svelte 0.0.0-stage → 0.1.0

package/dist/components/Navigation/Navigation.fixture.svelte

@@ -0,0 +1,15 @@
+<!--
+  A sidebar with its own collapse toggle and one item below it.
+
+  The toggle has to be the real one rather than a prop the test flips, because
+  what is under test is the trip from the container's state to a descendant that
+  is already mounted — see ./navContext.ts.
+-->
+<script lang="ts">
+  import NavItem from "./NavItem.svelte";
+  import Sidebar from "./Sidebar.svelte";
+</script>
+
+<Sidebar collapsible>
+  <NavItem label="Home" />
+</Sidebar>

package/dist/components/Navigation/Navigation.fixture.svelte.d.ts

@@ -0,0 +1,19 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Navigation: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Navigation = InstanceType<typeof Navigation>;
+export default Navigation;
+//# sourceMappingURL=Navigation.fixture.svelte.d.ts.map

package/dist/components/Navigation/Navigation.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Navigation/Navigation.fixture.svelte.ts"],"names":[],"mappings":"AAkBA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,UAAU;;kBAA+E,CAAC;AAC9E,KAAK,UAAU,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;AACpD,eAAe,UAAU,CAAC"}

package/dist/components/Navigation/Navigation.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Navigation.test.d.ts.map

package/dist/components/Navigation/Navigation.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.test.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Navigation/Navigation.test.ts"],"names":[],"mappings":""}

package/dist/components/Navigation/Navigation.test.js

@@ -0,0 +1,25 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/svelte";
+import { tick } from "svelte";
+import Fixture from "./Navigation.fixture.svelte";
+/**
+ * That the rail reaches items that are already on the page.
+ *
+ * The parity gate renders once, so every collapsed case it compares was
+ * collapsed before the item existed. The transition is the part that can break,
+ * and it breaks silently: `useNavContext` returning `accessor.current` rather
+ * than a live getter type-checks, renders, and hands each item the value it had
+ * at initialisation. The symptom is a 56px rail with full-width labels in it.
+ */
+describe("Navigation", () => {
+    it("collapses items that were already mounted when the sidebar toggles", async () => {
+        const { container } = render(Fixture);
+        const item = container.querySelector(".nav-item");
+        const toggle = container.querySelector(".sidebar__toggle");
+        expect(item.classList.contains("nav-item--collapsed")).toBe(false);
+        toggle.click();
+        await tick();
+        expect(container.querySelector(".sidebar").classList.contains("sidebar--collapsed")).toBe(true);
+        expect(item.classList.contains("nav-item--collapsed")).toBe(true);
+    });
+});

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

@@ -0,0 +1,79 @@
+import type { IconName } from "../Icon/Icon.types.js";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes, HTMLButtonAttributes } from "svelte/elements";
+import type { IconComponent } from "../../icons/registry.js";
+export interface NavProviderProps {
+    /** Collapse all descendant nav items to an icon-only rail. @default false */
+    collapsed?: boolean;
+    children?: Snippet;
+}
+export interface SidebarProps extends Omit<HTMLAttributes<HTMLDivElement>, "class"> {
+    /** Logo / wordmark pinned to the top of the sidebar. A string, or a snippet. */
+    logo?: string | Snippet;
+    /**
+     * Optional compact logo shown when collapsed (e.g. an icon-only mark).
+     * Falls back to `logo` when omitted.
+     */
+    logoCollapsed?: string | Snippet;
+    /** Footer region pinned to the bottom, above the auto collapse toggle. */
+    footer?: string | Snippet;
+    /** Nav items (`NavItem`) — the scrollable middle region. */
+    children?: Snippet;
+    /** Accessible label for the inner nav landmark. @default "Primary" */
+    navLabel?: string;
+    /**
+     * Allow collapsing to an icon-only rail. When true, a working expand/collapse
+     * toggle button is rendered in the footer automatically.
+     */
+    collapsible?: boolean;
+    /** Collapsed state for controlled usage. Bindable: `bind:collapsed`. */
+    collapsed?: boolean;
+    /** Initial collapsed state for uncontrolled usage. @default false */
+    defaultCollapsed?: boolean;
+    /** Called with the next collapsed state whenever the toggle is used. */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    class?: string;
+}
+export interface NavItemProps extends Omit<HTMLButtonAttributes, "class" | "children"> {
+    /** Text label for the page. A string, or a snippet for anything richer. */
+    label: string | Snippet;
+    /**
+     * Optional leading icon, rendered via the Icon component — either its native
+     * name in the active library or a library icon component supplied directly.
+     */
+    icon?: IconName | IconComponent;
+    /** Marks this page as the current page — renders the filled, emphasized appearance. */
+    selected?: boolean;
+    /**
+     * Render as an icon-only rail (label hidden, sub-list suppressed). Overrides
+     * the value from a surrounding `Sidebar` / `NavProvider`; defaults to it.
+     */
+    collapsed?: boolean;
+    /**
+     * Sub-pages shown beneath the item when expanded. Providing children makes the
+     * item expandable and renders a caret toggle. Pass `NavSubItem`s here.
+     */
+    children?: Snippet;
+    /** Expanded state for controlled usage. Bindable: `bind:expanded`. */
+    expanded?: boolean;
+    /** Initial expanded state for uncontrolled usage. @default false */
+    defaultExpanded?: boolean;
+    /** Called with the next expanded state whenever the caret is toggled. */
+    onExpandedChange?: (expanded: boolean) => void;
+    class?: string;
+}
+export interface NavSubItemProps extends Omit<HTMLButtonAttributes, "class" | "children"> {
+    /** Text label for the sub-page. A string, or a snippet. */
+    label: string | Snippet;
+    /** Optional leading icon, rendered via the Icon component. */
+    icon?: IconName | IconComponent;
+    /** Marks this sub-page as the current page. */
+    selected?: boolean;
+    /**
+     * Render as an icon-only rail (label hidden). Overrides the value from a
+     * surrounding `Sidebar` / `NavProvider`; defaults to it.
+     */
+    collapsed?: boolean;
+    class?: string;
+}
+//# sourceMappingURL=Navigation.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Navigation/Navigation.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAC5E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,WAAW,gBAAgB;IAC/B,6EAA6E;IAC7E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACjF,gFAAgF;IAChF,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,0EAA0E;IAC1E,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qEAAqE;IACrE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,wEAAwE;IACxE,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,UAAU,CAAC;IACpF,2EAA2E;IAC3E,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;IAChC,uFAAuF;IACvF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,UAAU,CAAC;IACvF,2DAA2D;IAC3D,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;IAChC,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/Navigation/Navigation.types.js

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

package/dist/components/Navigation/Sidebar.svelte

@@ -0,0 +1,100 @@
+<!--
+  The sidebar shell: a logo region, a scrollable nav landmark, and a footer that
+  can carry the collapse toggle.
+
+  Ark UI has no Navigation primitive, so everything here — the landmark, the
+  controlled/uncontrolled collapse, the rail shared with descendants — is the
+  facade's own.
+-->
+<script lang="ts">
+  import { clsx } from "clsx";
+  import Icon from "../Icon/Icon.svelte";
+  import { setNavContext } from "./navContext.js";
+  import type { SidebarProps } from "./Navigation.types.js";
+  import "@ui-organized/core/components/Navigation/Navigation.css";
+  import { glyph } from "../../icons/glyph.js";
+
+  const TOGGLE_ICON_SIZE = 20;
+
+  let {
+    logo,
+    logoCollapsed,
+    footer,
+    children,
+    navLabel = "Primary",
+    collapsible = false,
+    collapsed = $bindable(),
+    defaultCollapsed = false,
+    onCollapsedChange,
+    class: className,
+    ...rest
+  }: SidebarProps = $props();
+
+  // `collapsed` is bindable so `bind:collapsed` works the way a Svelte consumer
+  // expects, with `onCollapsedChange` kept alongside to match the React package.
+  // `defaultCollapsed` seeds the uncontrolled case only.
+  // svelte-ignore state_referenced_locally -- see NavItem.svelte: a default is
+  // read once on purpose.
+  let internalCollapsed = $state(defaultCollapsed);
+  const isCollapsed = $derived(collapsed ?? internalCollapsed);
+
+  // A getter, not a snapshot: a descendant reading this after the toggle runs
+  // has to see the new value. See ./navContext.ts.
+  setNavContext({
+    get current() {
+      return { collapsed: isCollapsed };
+    },
+  });
+
+  const toggle = () => {
+    const next = !isCollapsed;
+    internalCollapsed = next;
+    collapsed = next;
+    onCollapsedChange?.(next);
+  };
+
+  const hasLogo = $derived(logo != null || logoCollapsed != null);
+  const showFooter = $derived(footer != null || collapsible);
+  // A rail has room for a mark but not a wordmark; fall back when there is no
+  // compact one.
+  const shownLogo = $derived(isCollapsed ? (logoCollapsed ?? logo) : logo);
+</script>
+
+<div class={clsx("sidebar", isCollapsed && "sidebar--collapsed", className)} {...rest}>
+  {#if hasLogo}
+    <div class="sidebar__logo">
+      {#if typeof shownLogo === "string"}{shownLogo}{:else}{@render shownLogo?.()}{/if}
+    </div>
+  {/if}
+
+  <nav class="sidebar__nav" aria-label={navLabel}>
+    {@render children?.()}
+  </nav>
+
+  {#if showFooter}
+    <div class="sidebar__footer">
+      {#if footer != null}
+        <div class="sidebar__footer-content">
+          {#if typeof footer === "string"}{footer}{:else}{@render footer()}{/if}
+        </div>
+      {/if}
+      {#if collapsible}
+        <button
+          type="button"
+          class="sidebar__toggle text-default-body-medium"
+          aria-expanded={!isCollapsed}
+          aria-label={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+          title={isCollapsed ? "Expand" : "Collapse"}
+          onclick={toggle}
+        >
+          <Icon
+            name={glyph(isCollapsed ? "chevron-right" : "chevron-left")}
+            size={TOGGLE_ICON_SIZE}
+            class="sidebar__toggle-icon"
+          />
+          <span class="sidebar__toggle-label">{isCollapsed ? "Expand" : "Collapse"}</span>
+        </button>
+      {/if}
+    </div>
+  {/if}
+</div>

package/dist/components/Navigation/Sidebar.svelte.d.ts

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

package/dist/components/Navigation/Sidebar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Navigation/Sidebar.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,yDAAyD,CAAC;AAwFjE,QAAA,MAAM,OAAO,2DAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

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

@@ -0,0 +1,9 @@
+export { default as Sidebar } from "./Sidebar.svelte";
+export { default as NavItem } from "./NavItem.svelte";
+export { default as NavSubItem } from "./NavSubItem.svelte";
+export { default as NavProvider } from "./NavProvider.svelte";
+export { setNavContext, useNavContext } from "./navContext.js";
+export type { NavContextValue, NavContextAccessor } from "./navContext.js";
+export type { SidebarProps, NavItemProps, NavSubItemProps, NavProviderProps, } from "./Navigation.types.js";
+export type { NavItemVariants, NavSubItemVariants } from "@ui-organized/core";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Navigation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC/D,YAAY,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC3E,YAAY,EACV,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,gBAAgB,GAC9D,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/Navigation/index.js

@@ -0,0 +1,5 @@
+export { default as Sidebar } from "./Sidebar.svelte";
+export { default as NavItem } from "./NavItem.svelte";
+export { default as NavSubItem } from "./NavSubItem.svelte";
+export { default as NavProvider } from "./NavProvider.svelte";
+export { setNavContext, useNavContext } from "./navContext.js";

package/dist/components/Navigation/navContext.d.ts

@@ -0,0 +1,33 @@
+export interface NavContextValue {
+    /** When true, nav items render as an icon-only rail (labels hidden). */
+    collapsed: boolean;
+}
+/**
+ * Held as an accessor rather than a plain object, for the same reason the
+ * positioning bridge is: a collapse toggle has to reach items that are already
+ * on the page, and a snapshot captured at initialisation would leave them
+ * expanded forever.
+ */
+export interface NavContextAccessor {
+    readonly current: NavContextValue;
+}
+/** Called by a `Sidebar` (or a bare `NavProvider`) during initialisation. */
+export declare function setNavContext(accessor: NavContextAccessor): void;
+/**
+ * Read by every `NavItem` / `NavSubItem`, so one toggle drives the whole rail
+ * without prop drilling. An item rendered outside any sidebar gets the
+ * uncollapsed shape rather than `undefined`.
+ *
+ * Returns a live view, not a copy: `collapsed` is a getter that reaches back
+ * through the provider's accessor on every read, so an item reading it inside a
+ * `$derived` re-runs when the sidebar collapses. Returning `accessor.current`
+ * directly would type-check and hand every item the value it had at
+ * initialisation — a rail whose labels never hide.
+ *
+ * Named for React's `useNavContext` rather than Svelte's `getContext` habit,
+ * because the two libraries export this under one name and a consumer porting a
+ * file between them should not have to look it up. Like every `getContext` call
+ * it belongs at the top level of a component's `<script>`.
+ */
+export declare function useNavContext(): NavContextValue;
+//# sourceMappingURL=navContext.d.ts.map

package/dist/components/Navigation/navContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navContext.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Navigation/navContext.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,eAAe;IAC9B,wEAAwE;IACxE,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;;;;GAKG;AACH,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,OAAO,EAAE,eAAe,CAAC;CACnC;AAID,6EAA6E;AAC7E,wBAAgB,aAAa,CAAC,QAAQ,EAAE,kBAAkB,GAAG,IAAI,CAEhE;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,aAAa,IAAI,eAAe,CAO/C"}

package/dist/components/Navigation/navContext.js

@@ -0,0 +1,30 @@
+import { getContext, setContext } from "svelte";
+const NAV_CONTEXT_KEY = Symbol("ui-organized.navContext");
+/** Called by a `Sidebar` (or a bare `NavProvider`) during initialisation. */
+export function setNavContext(accessor) {
+    setContext(NAV_CONTEXT_KEY, accessor);
+}
+/**
+ * Read by every `NavItem` / `NavSubItem`, so one toggle drives the whole rail
+ * without prop drilling. An item rendered outside any sidebar gets the
+ * uncollapsed shape rather than `undefined`.
+ *
+ * Returns a live view, not a copy: `collapsed` is a getter that reaches back
+ * through the provider's accessor on every read, so an item reading it inside a
+ * `$derived` re-runs when the sidebar collapses. Returning `accessor.current`
+ * directly would type-check and hand every item the value it had at
+ * initialisation — a rail whose labels never hide.
+ *
+ * Named for React's `useNavContext` rather than Svelte's `getContext` habit,
+ * because the two libraries export this under one name and a consumer porting a
+ * file between them should not have to look it up. Like every `getContext` call
+ * it belongs at the top level of a component's `<script>`.
+ */
+export function useNavContext() {
+    const accessor = getContext(NAV_CONTEXT_KEY);
+    return {
+        get collapsed() {
+            return accessor?.current.collapsed ?? false;
+        },
+    };
+}

package/dist/components/NumberField/NumberField.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import { NumberInput, Field } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { CONTROL_ICON_SIZE, numberFieldStyles } from "@ui-organized/core";
+  import Icon from "../Icon/Icon.svelte";
+  import FieldError from "../FieldError/FieldError.svelte";
+  import type { NumberFieldProps } from "./NumberField.types.js";
+  import "@ui-organized/core/components/NumberField/NumberField.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 {
+    value = $bindable(),
+    defaultValue,
+    onValueChange,
+    min,
+    max,
+    step,
+    format,
+    placeholder,
+    label,
+    helperText,
+    error,
+    size = "md",
+    disabled,
+    readOnly,
+    required,
+    name,
+    id,
+    class: className,
+  }: NumberFieldProps = $props();
+
+  // The label sits on the Field, the input inside Ark's NumberInput — two
+  // machines that would otherwise mint unrelated ids, leaving the label pointing
+  // at nothing. Handing NumberInput the id the label uses is what ties them
+  // together. React uses useId() here; this is Svelte's equivalent.
+  const generatedId = $props.id();
+  const fieldId = $derived(id ?? generatedId);
+
+  const isInvalid = $derived(!!error);
+  const errorMessage = $derived(typeof error === "string" ? error : undefined);
+</script>
+
+<Field.Root
+  class={clsx(numberFieldStyles({ size }), className)}
+  invalid={isInvalid}
+  {disabled}
+>
+  {#if label}
+    <Field.Label for={fieldId} class="field__label">
+      {label}
+      {#if required}<span class="field__required" aria-hidden="true"></span>{/if}
+    </Field.Label>
+  {/if}
+  <!--
+    Ark takes the value as a string and reports it as both, so the numeric facade
+    is translated at the boundary: an empty string is the empty value, which the
+    React package spells `null` and so does this one.
+  -->
+  <NumberInput.Root
+    ids={{ input: fieldId }}
+    value={value === undefined ? undefined : value === null ? "" : String(value)}
+    defaultValue={defaultValue != null ? String(defaultValue) : undefined}
+    onValueChange={(details) => {
+      const next = details.value === "" ? null : details.valueAsNumber;
+      value = next;
+      onValueChange?.(next);
+    }}
+    {min}
+    {max}
+    {step}
+    formatOptions={format}
+    {disabled}
+    {readOnly}
+    {required}
+    {name}
+  >
+    <NumberInput.Control class="number-field__group">
+      <NumberInput.DecrementTrigger class="number-field__stepper" aria-label="Decrease">
+        <Icon name={glyph("minus")} size={CONTROL_ICON_SIZE[size]} />
+      </NumberInput.DecrementTrigger>
+      <NumberInput.Input class="field__control number-field__input" {placeholder} />
+      <NumberInput.IncrementTrigger class="number-field__stepper" aria-label="Increase">
+        <Icon name={glyph("plus")} size={CONTROL_ICON_SIZE[size]} />
+      </NumberInput.IncrementTrigger>
+    </NumberInput.Control>
+  </NumberInput.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/NumberField/NumberField.svelte.d.ts

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

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

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

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

@@ -0,0 +1,42 @@
+import type { ControlSize } from "@ui-organized/core";
+export interface NumberFieldProps {
+    /** Numeric value; `null` means empty. Bindable: `bind:value`. */
+    value?: number | null;
+    /** Initial value for uncontrolled usage. */
+    defaultValue?: number;
+    /** Called when the value changes. */
+    onValueChange?: (value: number | null) => void;
+    /** Minimum allowed value. */
+    min?: number;
+    /** Maximum allowed value. */
+    max?: number;
+    /** Increment/decrement step. Defaults to 1. */
+    step?: number;
+    /** `Intl.NumberFormat` options for displaying the value (e.g. currency). */
+    format?: Intl.NumberFormatOptions;
+    /** Placeholder shown when empty. */
+    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;
+    /** Whether the value can be edited. */
+    readOnly?: boolean;
+    /** Whether a value is required for form submission. */
+    required?: boolean;
+    /** Name attribute for form submission. */
+    name?: string;
+    /** Explicit id for the input (label association). Auto-generated otherwise. */
+    id?: string;
+    class?: string;
+}
+//# sourceMappingURL=NumberField.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/NumberField/NumberField.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/C,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,MAAM,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC;IAClC,oCAAoC;IACpC,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,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/NumberField/NumberField.types.js

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

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

@@ -0,0 +1,4 @@
+export { default as NumberField } from "./NumberField.svelte";
+export type { NumberFieldProps } from "./NumberField.types.js";
+export type { NumberFieldVariants } from "@ui-organized/core";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/NumberField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,YAAY,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,YAAY,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/NumberField/index.js

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