@ui-organized/svelte 0.0.0-stage → 0.1.0

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Timer.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Timer/Timer.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAa,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,+CAA+C,CAAC;AAoGvD,QAAA,MAAM,KAAK,gDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

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

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

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

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

package/dist/components/Timer/Timer.test.js

@@ -0,0 +1,84 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/svelte";
+import Timer from "./Timer.svelte";
+/**
+ * The half of Timer nothing else can see.
+ *
+ * The parity gate renders once, statically, with the clock stopped — so it can
+ * pin the first frame (which digits, which `hidden` action trigger) and nothing
+ * after it. Everything that only exists once the machine has ticked has exactly
+ * one guard, and this is it.
+ *
+ * The failure this is really for: `autoStart` decides the machine's
+ * `initialState`, so a framework that drops the prop still renders `00:00:00` —
+ * exactly what a stopped timer renders — and the gate agrees with it. The only
+ * way to tell "started" from "not started" apart is to let time pass.
+ *
+ * Timing is real rather than faked: zag drives the tick from
+ * `requestAnimationFrame` and `performance.now()`, so a fake clock would freeze
+ * the frames instead of advancing them. `interval` is dropped to 20ms and every
+ * assertion polls rather than sleeping a fixed amount, which keeps the tests
+ * both fast and free of a hard-coded number of frames.
+ */
+const MS_PART = '[data-part="item"][data-type="milliseconds"]';
+const readMs = (container) => Number(container.querySelector(MS_PART).textContent.trim());
+/**
+ * Resolves as soon as `predicate` holds, or gives up after `timeoutMs`.
+ *
+ * The budget is generous on purpose. jsdom's `requestAnimationFrame` is nothing
+ * like a browser's 16ms cadence — the first frame here has been seen anywhere
+ * from half a second to two and a half seconds in, depending on load — so a
+ * timeout tuned to the interval would be a flake generator. Polling means the
+ * tests still finish as soon as the tick actually arrives, and the `it`s below
+ * raise vitest's own 5s limit to match rather than being killed under it.
+ */
+async function until(predicate, timeoutMs = 10_000) {
+    const deadline = Date.now() + timeoutMs;
+    while (Date.now() < deadline) {
+        if (predicate())
+            return true;
+        await new Promise((resolve) => setTimeout(resolve, 10));
+    }
+    return predicate();
+}
+describe("Timer", () => {
+    it("does not move until it is started", { timeout: 30_000 }, async () => {
+        // Calibrated against a running timer rather than a fixed sleep. How long
+        // jsdom takes to deliver the first frame varies by more than an order of
+        // magnitude with load, so any hard-coded wait is either slow or — much
+        // worse — short enough that a timer which *is* secretly running has not
+        // ticked yet and the test passes for the wrong reason.
+        const stopped = render(Timer, { props: { parts: ["milliseconds"], interval: 20 } });
+        const running = render(Timer, {
+            props: { parts: ["milliseconds"], interval: 20, autoStart: true },
+        });
+        expect(readMs(stopped.container)).toBe(0);
+        expect(await until(() => readMs(running.container) > 0)).toBe(true);
+        expect(readMs(stopped.container)).toBe(0);
+    });
+    it("counts up while running", { timeout: 30_000 }, async () => {
+        const { container } = render(Timer, {
+            props: { parts: ["milliseconds"], interval: 20, autoStart: true },
+        });
+        expect(await until(() => readMs(container) > 0)).toBe(true);
+    });
+    it("counts down from startMs and reports completion", { timeout: 30_000 }, async () => {
+        let completed = 0;
+        const { container } = render(Timer, {
+            props: {
+                parts: ["milliseconds"],
+                interval: 20,
+                countdown: true,
+                startMs: 100,
+                autoStart: true,
+                onComplete: () => {
+                    completed += 1;
+                },
+            },
+        });
+        expect(readMs(container)).toBe(100);
+        // Down, not up — the sign of the step is the whole of what `countdown` does.
+        expect(await until(() => readMs(container) < 100)).toBe(true);
+        expect(await until(() => completed > 0)).toBe(true);
+    });
+});

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

@@ -0,0 +1,31 @@
+import type { ControlSize } from "@ui-organized/core";
+export type TimerPart = "days" | "hours" | "minutes" | "seconds" | "milliseconds";
+export interface TimerProps {
+    /**
+     * Which units to display, in order. Defaults to
+     * `["hours", "minutes", "seconds"]`.
+     */
+    parts?: TimerPart[];
+    /** Counts down to `targetMs` instead of up from it. Defaults to false. */
+    countdown?: boolean;
+    /** Where the timer starts, in milliseconds. */
+    startMs?: number;
+    /** Where the timer stops, in milliseconds. */
+    targetMs?: number;
+    /** Starts as soon as it mounts. Defaults to false. */
+    autoStart?: boolean;
+    /** Milliseconds between ticks. Lower this to show milliseconds. Defaults to 1000. */
+    interval?: number;
+    /** Called once the target is reached. */
+    onComplete?: () => void;
+    /** Renders start / pause / reset buttons. Defaults to false. */
+    showControls?: boolean;
+    /** Size variant. Defaults to 'md'. */
+    size?: ControlSize;
+    /** Visual treatment. `boxed` puts each unit on its own tile. Defaults to 'default'. */
+    variant?: "default" | "boxed";
+    /** Shows the unit name under each value. Defaults to false. */
+    showLabels?: boolean;
+    class?: string;
+}
+//# sourceMappingURL=Timer.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Timer.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Timer/Timer.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,cAAc,CAAC;AAElF,MAAM,WAAW,UAAU;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,gEAAgE;IAChE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sCAAsC;IACtC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,uFAAuF;IACvF,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,+DAA+D;IAC/D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/Timer/Timer.types.js

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Timer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC9D,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/Timer/index.js

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

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

@@ -0,0 +1,22 @@
+import type { Snippet } from "svelte";
+/** Props for the app-level provider. */
+export interface ToastProviderProps {
+    children?: Snippet;
+}
+/** Semantic status driving a toast's accent color and icon. Set via `add({ type })`. */
+export type ToastStatus = "info" | "success" | "warning" | "error";
+/** Options accepted by `useToastManager().add(...)`. */
+export interface ToastOptions {
+    title?: string;
+    description?: string;
+    /** Status (`info`/`success`/`warning`/`error`) — drives the accent + icon. */
+    type?: string;
+    /** Auto-dismiss after this many ms. */
+    duration?: number;
+    /** An inline action button (e.g. "Undo"). */
+    actionProps?: {
+        children?: string;
+        onClick?: () => void;
+    };
+}
+//# sourceMappingURL=Toast.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Toast/Toast.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,wCAAwC;AACxC,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wFAAwF;AACxF,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEnE,wDAAwD;AACxD,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8EAA8E;IAC9E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,WAAW,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;CAC3D"}

package/dist/components/Toast/Toast.types.js

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

package/dist/components/Toast/ToastProvider.svelte

@@ -0,0 +1,44 @@
+<!--
+  Wrap your app once. Trigger toasts imperatively with the manager:
+
+      import { useToastManager } from "@ui-organized/svelte";
+      const toast = useToastManager();
+      toast.add({ title: "Saved", description: "Your changes are live.", type: "success" });
+-->
+<script lang="ts">
+  import { Toast, Toaster } from "@ark-ui/svelte";
+  import { toastStyles } from "@ui-organized/core";
+  import Icon from "../Icon/Icon.svelte";
+  import { STATUS_ICON, resolveStatus, toaster } from "./toaster.js";
+  import type { ToastProviderProps } from "./Toast.types.js";
+  import "@ui-organized/core/components/Toast/Toast.css";
+  import { glyph } from "../../icons/glyph.js";
+
+  let { children }: ToastProviderProps = $props();
+</script>
+
+{@render children?.()}
+<Toaster {toaster} class="toast__viewport">
+  {#snippet children(toast)}
+    {@const status = resolveStatus(toast().type)}
+    <Toast.Root class={toastStyles({ status })}>
+      <span class="toast__icon">
+        <Icon name={glyph(STATUS_ICON[status])} size={20} />
+      </span>
+      <div class="toast__content">
+        <Toast.Title class="toast__title text-strong-body-medium">{toast().title}</Toast.Title>
+        <Toast.Description class="toast__description text-default-body-medium">
+          {toast().description}
+        </Toast.Description>
+      </div>
+      {#if toast().action}
+        <Toast.ActionTrigger class="toast__action text-emphasis-body-small">
+          {toast().action?.label}
+        </Toast.ActionTrigger>
+      {/if}
+      <Toast.CloseTrigger class="toast__close" aria-label="Dismiss">
+        <Icon name={glyph("close")} size={20} />
+      </Toast.CloseTrigger>
+    </Toast.Root>
+  {/snippet}
+</Toaster>

package/dist/components/Toast/ToastProvider.svelte.d.ts

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

package/dist/components/Toast/ToastProvider.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastProvider.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Toast/ToastProvider.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,+CAA+C,CAAC;AA4CvD,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,4 @@
+export { default as ToastProvider } from "./ToastProvider.svelte";
+export { useToastManager, toaster } from "./toaster.js";
+export type { ToastProviderProps, ToastOptions, ToastStatus } from "./Toast.types.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACxD,YAAY,EAAE,kBAAkB,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/Toast/index.js

@@ -0,0 +1,2 @@
+export { default as ToastProvider } from "./ToastProvider.svelte";
+export { useToastManager, toaster } from "./toaster.js";

package/dist/components/Toast/toaster.d.ts

@@ -0,0 +1,18 @@
+import type { SystemGlyph } from "@ui-organized/core";
+import type { ToastOptions, ToastStatus } from "./Toast.types.js";
+export declare const toaster: import("@ark-ui/svelte").CreateToasterReturn<any>;
+export declare const STATUS_ICON: Record<ToastStatus, SystemGlyph>;
+/** Map a toast's free-form `type` to one of our four statuses. */
+export declare function resolveStatus(type: string | undefined): ToastStatus;
+/**
+ * Returns `{ add, close, update }` for imperative toasts.
+ *
+ * Named `useToastManager` to match the React package, though it is not a hook
+ * and can be called anywhere — there is no state behind it.
+ */
+export declare function useToastManager(): {
+    add(options: ToastOptions): string;
+    close(id: string): void;
+    update(id: string, options: ToastOptions): void;
+};
+//# sourceMappingURL=toaster.d.ts.map

package/dist/components/Toast/toaster.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toaster.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Toast/toaster.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAElE,eAAO,MAAM,OAAO,mDAKlB,CAAC;AAEH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,WAAW,EAAE,WAAW,CAKxD,CAAC;AAEF,kEAAkE;AAClE,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,WAAW,CAEnE;AA2BD;;;;;GAKG;AACH,wBAAgB,eAAe;iBAxBhB,YAAY,GAAG,MAAM;cASxB,MAAM;eAGL,MAAM,WAAW,YAAY;EAczC"}

package/dist/components/Toast/toaster.js

@@ -0,0 +1,61 @@
+/**
+ * The toaster instance and the imperative surface over it.
+ *
+ * Ark uses a standalone toaster rather than a framework context manager, so one
+ * module-level instance backs both the rendered region and the API — the same
+ * shape the React package has, and the reason `useToastManager()` there returns
+ * a static object rather than holding any state.
+ *
+ * It lives in a plain `.ts` file, separate from the provider component, so a
+ * caller can import the manager without importing a component.
+ */
+import { createToaster } from "@ark-ui/svelte";
+export const toaster = createToaster({
+    placement: "bottom-end",
+    overlap: false,
+    gap: 8,
+    duration: 5000,
+});
+export const STATUS_ICON = {
+    info: "info",
+    success: "check-circle",
+    warning: "alert-triangle",
+    error: "alert-circle",
+};
+/** Map a toast's free-form `type` to one of our four statuses. */
+export function resolveStatus(type) {
+    return type === "success" || type === "warning" || type === "error" ? type : "info";
+}
+/**
+ * The manager surface: `add`/`close`/`update` over Ark's
+ * `create`/`dismiss`/`update`, with `actionProps` mapped to Ark's `action`.
+ * Kept identical to the React package so the same code reads the same way in
+ * either.
+ */
+const manager = {
+    add(options) {
+        const { actionProps, ...rest } = options;
+        return toaster.create({
+            ...rest,
+            action: actionProps?.children
+                ? { label: actionProps.children, onClick: actionProps.onClick ?? (() => { }) }
+                : undefined,
+        });
+    },
+    close(id) {
+        toaster.dismiss(id);
+    },
+    update(id, options) {
+        const { actionProps: _actionProps, ...rest } = options;
+        toaster.update(id, rest);
+    },
+};
+/**
+ * Returns `{ add, close, update }` for imperative toasts.
+ *
+ * Named `useToastManager` to match the React package, though it is not a hook
+ * and can be called anywhere — there is no state behind it.
+ */
+export function useToastManager() {
+    return manager;
+}

package/dist/components/Toggle/Toggle.svelte

@@ -0,0 +1,68 @@
+<!-- A two-state button that can be on or off. -->
+<script lang="ts">
+  import { Toggle as ArkToggle, ToggleGroup as ArkToggleGroup } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { CONTROL_ICON_SIZE, CONTROL_TEXT_CLASS, toggleStyles } from "@ui-organized/core";
+  import Icon from "../Icon/Icon.svelte";
+  import type { ToggleProps } from "./Toggle.types.js";
+  import "@ui-organized/core/components/Toggle/Toggle.css";
+
+  let {
+    pressed = $bindable(),
+    defaultPressed,
+    onPressedChange,
+    value,
+    size = "md",
+    icon,
+    class: className,
+    children,
+    ...rest
+  }: ToggleProps = $props();
+
+  // An icon with no label collapses to a square (see `.toggle--icon-only`) whose
+  // side matches the labelled height for the size, mirroring the Button so icon
+  // toggles line up with text toggles instead of rendering short and wide.
+  //
+  // React can inspect its children and treat `""` or `false` as absent; a Svelte
+  // snippet is opaque, so "no label" is spelled the only way it can be — the
+  // snippet was never passed. Same rule the Button uses.
+  const isIconOnly = $derived(icon != null && children === undefined);
+
+  const toggleClass = $derived(
+    clsx(
+      CONTROL_TEXT_CLASS[size],
+      toggleStyles({ size }),
+      isIconOnly && "toggle--icon-only",
+      className,
+    ),
+  );
+</script>
+
+{#snippet content()}
+  {#if icon}<Icon name={icon} size={CONTROL_ICON_SIZE[size]} />{/if}
+  {@render children?.()}
+{/snippet}
+
+<!--
+  Ark splits the standalone toggle (Toggle.Root) from the group item
+  (ToggleGroup.Item). A `value` marks a group item — it derives its pressed state
+  from the parent group rather than holding its own.
+-->
+{#if value !== undefined}
+  <ArkToggleGroup.Item {value} class={toggleClass} {...rest}>
+    {@render content()}
+  </ArkToggleGroup.Item>
+{:else}
+  <ArkToggle.Root
+    bind:pressed
+    {defaultPressed}
+    onPressedChange={(next) => {
+      pressed = next;
+      onPressedChange?.(next);
+    }}
+    class={toggleClass}
+    {...rest}
+  >
+    {@render content()}
+  </ArkToggle.Root>
+{/if}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Toggle/Toggle.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,iDAAiD,CAAC;AA+DzD,QAAA,MAAM,MAAM,wDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

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

@@ -0,0 +1,47 @@
+import type { IconComponent, IconName } from "../Icon/Icon.types.js";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes, HTMLButtonAttributes } from "svelte/elements";
+import type { ControlSize } from "@ui-organized/core";
+import type { ArkForwardable } from "../../types.js";
+/**
+ * `disabled` is narrowed for the same reason `ArkForwardable` narrows `id`:
+ * Svelte types it `boolean | null | undefined` and zag's toggle machine accepts
+ * only `boolean | undefined`. It is not in `ArkForwardable` itself because most
+ * parts this package forwards into are plain elements with no `disabled` at all,
+ * and adding it there would invent the prop on their public API.
+ */
+export interface ToggleProps extends ArkForwardable<Omit<HTMLButtonAttributes, "class" | "value" | "disabled">> {
+    /** Whether the toggle should ignore user interaction. */
+    disabled?: boolean;
+    /** Whether the toggle is on (standalone usage). Bindable: `bind:pressed`. */
+    pressed?: boolean;
+    /** Initial pressed state for uncontrolled standalone usage. */
+    defaultPressed?: boolean;
+    /** Fired when the pressed state changes (standalone usage). */
+    onPressedChange?: (pressed: boolean) => void;
+    /** Identifies this toggle within a `<ToggleGroup>`; turns it into a group item. */
+    value?: string;
+    /** Size variant. Defaults to 'md'. */
+    size?: ControlSize;
+    /** Optional leading icon. */
+    icon?: IconName | IconComponent;
+    class?: string;
+    children?: Snippet;
+}
+export interface ToggleGroupProps extends ArkForwardable<Omit<HTMLAttributes<HTMLDivElement>, "class">> {
+    /** Pressed values. Bindable: `bind:value`. */
+    value?: string[];
+    /** Initial pressed values for uncontrolled usage. */
+    defaultValue?: string[];
+    /** Fired when the set of pressed values changes. */
+    onValueChange?: (value: string[]) => void;
+    /** Allow more than one toggle pressed at once. Defaults to single-select. */
+    multiple?: boolean;
+    /** Disable the whole group. */
+    disabled?: boolean;
+    /** Layout orientation. Defaults to 'horizontal'. */
+    orientation?: "horizontal" | "vertical";
+    class?: string;
+    children?: Snippet;
+}
+//# sourceMappingURL=Toggle.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Toggle/Toggle.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAC5E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD;;;;;;GAMG;AACH,MAAM,WAAW,WACf,SAAQ,cAAc,CAAC,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC,CAAC;IAClF,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+DAA+D;IAC/D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,+DAA+D;IAC/D,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,mFAAmF;IACnF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,gBACf,SAAQ,cAAc,CAAC,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC;IACrE,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,oDAAoD;IACpD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/dist/components/Toggle/Toggle.types.js

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

package/dist/components/Toggle/ToggleGroup.svelte

@@ -0,0 +1,35 @@
+<!-- Joins a set of `<Toggle>` buttons into one single- or multi-select control. -->
+<script lang="ts">
+  import { ToggleGroup as ArkToggleGroup } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import type { ToggleGroupProps } from "./Toggle.types.js";
+  import "@ui-organized/core/components/Toggle/Toggle.css";
+
+  let {
+    value = $bindable(),
+    defaultValue,
+    onValueChange,
+    multiple,
+    disabled,
+    orientation,
+    class: className,
+    children,
+    ...rest
+  }: ToggleGroupProps = $props();
+</script>
+
+<ArkToggleGroup.Root
+  bind:value
+  {defaultValue}
+  onValueChange={(details) => {
+    value = details.value;
+    onValueChange?.(details.value);
+  }}
+  {multiple}
+  {disabled}
+  {orientation}
+  class={clsx("toggle-group", className)}
+  {...rest}
+>
+  {@render children?.()}
+</ArkToggleGroup.Root>

package/dist/components/Toggle/ToggleGroup.svelte.d.ts

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

package/dist/components/Toggle/ToggleGroup.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Toggle/ToggleGroup.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,iDAAiD,CAAC;AA+BzD,QAAA,MAAM,WAAW,2DAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,5 @@
+export { default as Toggle } from "./Toggle.svelte";
+export { default as ToggleGroup } from "./ToggleGroup.svelte";
+export type { ToggleProps, ToggleGroupProps } from "./Toggle.types.js";
+export type { ToggleVariants } from "@ui-organized/core";
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/Toggle/index.js

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

package/dist/components/Toolbar/Toolbar.svelte

@@ -0,0 +1,30 @@
+<!--
+  A container grouping a set of design-system controls.
+
+  Ark UI has no Toolbar primitive and this needs none: it is a pure layout
+  container that owns `role="toolbar"` and the surface. Compose it with the
+  library's own controls — `Button` (use `intent="ghost"`), `Input`, and
+  `Divider` (use `orientation="vertical"`). Match the control `size` across the
+  children to size the toolbar.
+
+  `data-orientation` as well as `aria-orientation`, because the stylesheet
+  selects on the data attribute to switch the flex direction; dropping it leaves
+  a vertical toolbar laid out horizontally with correct ARIA.
+-->
+<script lang="ts">
+  import { clsx } from "clsx";
+  import type { ToolbarProps } from "./Toolbar.types.js";
+  import "@ui-organized/core/components/Toolbar/Toolbar.css";
+
+  let { orientation = "horizontal", class: className, children, ...rest }: ToolbarProps = $props();
+</script>
+
+<div
+  role="toolbar"
+  aria-orientation={orientation}
+  data-orientation={orientation}
+  class={clsx("toolbar", className)}
+  {...rest}
+>
+  {@render children?.()}
+</div>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Toolbar/Toolbar.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,mDAAmD,CAAC;AAiB3D,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

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

@@ -0,0 +1,19 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export interface ToolbarProps extends Omit<HTMLAttributes<HTMLDivElement>, "class"> {
+    /** Layout orientation. Defaults to 'horizontal'. */
+    orientation?: "horizontal" | "vertical";
+    class?: string;
+    children?: Snippet;
+}
+/**
+ * Written out in full rather than aliased to a shared private interface.
+ * svelte-package emits no `.d.ts` at all for a component whose props alias a
+ * type it cannot re-export, so `Toolbar`'s group would ship untyped — see
+ * Card.types.ts, which has exactly that problem.
+ */
+export interface ToolbarGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "class"> {
+    class?: string;
+    children?: Snippet;
+}
+//# sourceMappingURL=Toolbar.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Toolbar/Toolbar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACjF,oDAAoD;IACpD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;GAKG;AACH,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACtF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/dist/components/Toolbar/Toolbar.types.js

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

package/dist/components/Toolbar/ToolbarGroup.svelte

@@ -0,0 +1,11 @@
+<!-- Optional wrapper to visually cluster a subset of toolbar controls. -->
+<script lang="ts">
+  import { clsx } from "clsx";
+  import type { ToolbarGroupProps } from "./Toolbar.types.js";
+
+  let { class: className, children, ...rest }: ToolbarGroupProps = $props();
+</script>
+
+<div role="group" class={clsx("toolbar__group", className)} {...rest}>
+  {@render children?.()}
+</div>

package/dist/components/Toolbar/ToolbarGroup.svelte.d.ts

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

package/dist/components/Toolbar/ToolbarGroup.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Toolbar/ToolbarGroup.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAgB5D,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}