@ui-organized/svelte 0.0.0-stage → 0.1.0

package/dist/components/Popover/PopoverClose.svelte.d.ts.map

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

package/dist/components/Popover/PopoverContent.svelte

@@ -0,0 +1,43 @@
+<!-- Portalled, positioned surface holding the popover body. -->
+<script lang="ts">
+  import { Popover as ArkPopover, Portal } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { setAnchoredPositioning, toPlacement } from "./positioning.svelte.js";
+  import type { PopoverContentProps } from "./Popover.types.js";
+
+  let {
+    side = "bottom",
+    align = "center",
+    sideOffset = 8,
+    alignOffset,
+    container,
+    class: className,
+    children,
+    ...contentProps
+  }: PopoverContentProps = $props();
+
+  // Registered with the Root during initialisation, as an accessor so a later
+  // change to side/align/sideOffset is picked up — see ./positioning.svelte.ts.
+  setAnchoredPositioning(() => ({
+    placement: toPlacement(side, align),
+    gutter: sideOffset,
+    offset: alignOffset != null ? { crossAxis: alignOffset } : undefined,
+  }));
+</script>
+
+<Portal container={container ?? undefined}>
+  <!--
+    The positioner class must stay a plain string literal: the overlay-stacking
+    test scans for it, and stacking is declared on the popup rather than here
+    because zag writes an inline z-index onto the positioner and reads it from
+    the popup's rule.
+  -->
+  <ArkPopover.Positioner class="popover__positioner">
+    <ArkPopover.Content
+      class={clsx("popover__popup", "text-default-body-medium", className)}
+      {...contentProps}
+    >
+      {@render children?.()}
+    </ArkPopover.Content>
+  </ArkPopover.Positioner>
+</Portal>

package/dist/components/Popover/PopoverContent.svelte.d.ts

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

package/dist/components/Popover/PopoverContent.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverContent.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Popover/PopoverContent.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAwC9D,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/Popover/PopoverDescription.svelte

@@ -0,0 +1,29 @@
+<!-- Supporting copy under the title; becomes the popover's description.
+
+  ── Why the element is pinned ───────────────────────────────────────────────
+
+  `@ark-ui/svelte` is on 5.24 while React and Vue are on 5.39, and Ark changed
+  its default elements in between: this part renders a `<p>` in 5.24 and a `<div>`
+  in the newer packages. Both of the older tags carry UA margins that a
+  `<div>` does not, so leaving the choice to Ark means this library lays out
+  differently from the other two against a stylesheet all three share.
+
+  Pinning it with `asChild` makes the element ours rather than whichever Ark
+  version happens to be installed — which is the point, since the packages
+  deliberately do not move in lockstep.
+-->
+<script lang="ts">
+  import { Popover as ArkPopover } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import type { PopoverDescriptionProps } from "./Popover.types.js";
+
+  let { class: className, children, ...rest }: PopoverDescriptionProps = $props();
+</script>
+
+<ArkPopover.Description {...rest}>
+  {#snippet asChild(project)}
+    <div {...project()} class={clsx("popover__description", "text-default-body-medium", className)}>
+      {@render children?.()}
+    </div>
+  {/snippet}
+</ArkPopover.Description>

package/dist/components/Popover/PopoverDescription.svelte.d.ts

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

package/dist/components/Popover/PopoverDescription.svelte.d.ts.map

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

package/dist/components/Popover/PopoverTitle.svelte

@@ -0,0 +1,34 @@
+<!--
+  Heading for the popover, and the thing that names it.
+
+  Ark gives the content `role="dialog"`, which needs an accessible name; it
+  points at this part when one is rendered. A popover with neither a title nor an
+  `aria-label` on its content reaches a screen reader as an unnamed dialog.
+
+  ── Why the element is pinned ───────────────────────────────────────────────
+
+  `@ark-ui/svelte` is on 5.24 while React and Vue are on 5.39, and Ark changed
+  its default elements in between: this part renders an `<h2>` in 5.24 and a `<div>`
+  in the newer packages. Both of the older tags carry UA margins that a
+  `<div>` does not, so leaving the choice to Ark means this library lays out
+  differently from the other two against a stylesheet all three share.
+
+  Pinning it with `asChild` makes the element ours rather than whichever Ark
+  version happens to be installed — which is the point, since the packages
+  deliberately do not move in lockstep.
+-->
+<script lang="ts">
+  import { Popover as ArkPopover } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import type { PopoverTitleProps } from "./Popover.types.js";
+
+  let { class: className, children, ...rest }: PopoverTitleProps = $props();
+</script>
+
+<ArkPopover.Title {...rest}>
+  {#snippet asChild(project)}
+    <div {...project()} class={clsx("popover__title", "text-strong-body-large", className)}>
+      {@render children?.()}
+    </div>
+  {/snippet}
+</ArkPopover.Title>

package/dist/components/Popover/PopoverTitle.svelte.d.ts

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

package/dist/components/Popover/PopoverTitle.svelte.d.ts.map

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

package/dist/components/Popover/PopoverTrigger.svelte

@@ -0,0 +1,26 @@
+<!-- Element that toggles the popover. Pass `asChild` to project a custom element. -->
+<script lang="ts">
+  import { Popover as ArkPopover, usePopoverContext } from "@ark-ui/svelte";
+  import { popupControls } from "@ui-organized/core";
+  import type { PopoverTriggerProps } from "./Popover.types.js";
+
+  let { asChild: project, children, ...rest }: PopoverTriggerProps = $props();
+
+  const popover = usePopoverContext();
+  // Ark keeps aria-controls on the trigger at all times, but the content it
+  // names is only mounted while open, so the reference dangles the rest of the
+  // time. popupControls drops it while closed.
+  const controls = $derived(popupControls(popover().open));
+</script>
+
+{#if project}
+  <ArkPopover.Trigger {...controls} {...rest}>
+    {#snippet asChild(props)}
+      {@render project(props)}
+    {/snippet}
+  </ArkPopover.Trigger>
+{:else}
+  <ArkPopover.Trigger {...controls} {...rest}>
+    {@render children?.()}
+  </ArkPopover.Trigger>
+{/if}

package/dist/components/Popover/PopoverTrigger.svelte.d.ts

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

package/dist/components/Popover/PopoverTrigger.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverTrigger.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Popover/PopoverTrigger.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AA+B9D,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

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

@@ -0,0 +1,8 @@
+export { default as Popover } from "./Popover.svelte";
+export { default as PopoverTrigger } from "./PopoverTrigger.svelte";
+export { default as PopoverContent } from "./PopoverContent.svelte";
+export { default as PopoverTitle } from "./PopoverTitle.svelte";
+export { default as PopoverDescription } from "./PopoverDescription.svelte";
+export { default as PopoverClose } from "./PopoverClose.svelte";
+export type { PopoverProps, PopoverTriggerProps, PopoverContentProps, PopoverTitleProps, PopoverDescriptionProps, PopoverCloseProps, PopoverSide, PopoverAlign, PopoverPropsFn, } from "./Popover.types.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,YAAY,EACV,YAAY,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,iBAAiB,EACzE,uBAAuB,EAAE,iBAAiB,EAAE,WAAW,EAAE,YAAY,EAAE,cAAc,GACtF,MAAM,oBAAoB,CAAC"}

package/dist/components/Popover/index.js

@@ -0,0 +1,6 @@
+export { default as Popover } from "./Popover.svelte";
+export { default as PopoverTrigger } from "./PopoverTrigger.svelte";
+export { default as PopoverContent } from "./PopoverContent.svelte";
+export { default as PopoverTitle } from "./PopoverTitle.svelte";
+export { default as PopoverDescription } from "./PopoverDescription.svelte";
+export { default as PopoverClose } from "./PopoverClose.svelte";

package/dist/components/Popover/positioning.svelte.d.ts

@@ -0,0 +1,55 @@
+/**
+ * The positioning bridge.
+ *
+ * Ark configures placement on the Root (`positioning`), but this library's API
+ * keeps `side`/`align`/`sideOffset` on the Content — which is a descendant. So
+ * the value has to travel *up*, and the two frameworks get there differently.
+ *
+ * React has no way to do it during render, so the Root holds `useState` and the
+ * Content pushes into it from `useLayoutEffect`, re-running whenever the props
+ * change.
+ *
+ * Svelte needs no effect, but it does need care: what the Content puts on the
+ * context is an *accessor*, not a value. Handing over a plain object would
+ * capture the props as they were at initialisation, and a Content whose `side`
+ * later changed would go on being positioned the old way — silently, since
+ * nothing throws and the popup still opens. Passing a function keeps the read
+ * lazy, so the Root's `$derived` re-runs like any other reactive dependency.
+ *
+ * Four components share this shape (Popover, Menu, ContextMenu, HoverCard), so
+ * it lives here rather than being written out four times.
+ */
+/**
+ * The placements zag accepts, spelled out rather than imported.
+ *
+ * The type lives in @zag-js/popper, which is a transitive dependency of Ark
+ * rather than one this package declares — and depending on it directly to reach
+ * one union would couple us to Ark's internals for no benefit. It is exactly the
+ * set `side` x `align` produces, so `toPlacement` is total over it.
+ */
+export type Placement = "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
+export interface Positioning {
+    placement?: Placement;
+    gutter?: number;
+    offset?: {
+        crossAxis?: number;
+        mainAxis?: number;
+    };
+}
+export interface PositioningHolder {
+    /** Read inside a `$derived` on the Root; re-runs when the Content's props change. */
+    read: () => Positioning;
+}
+/** Called by a Root. Returns the holder whose `read()` it should feed to Ark. */
+export declare function providePositioning(fallback: Positioning): PositioningHolder;
+/**
+ * Called by a Content during initialisation. The accessor is invoked lazily by
+ * the Root, so later prop changes are picked up.
+ */
+export declare function setAnchoredPositioning(accessor: () => Positioning): void;
+/**
+ * `side` + `align` collapse to one zag placement string, where a centred
+ * alignment is spelled by leaving the suffix off entirely.
+ */
+export declare function toPlacement(side: "top" | "right" | "bottom" | "left", align: "start" | "center" | "end"): Placement;
+//# sourceMappingURL=positioning.svelte.d.ts.map

package/dist/components/Popover/positioning.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"positioning.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Popover/positioning.svelte.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAIH;;;;;;;GAOG;AACH,MAAM,MAAM,SAAS,GACjB,KAAK,GAAG,WAAW,GAAG,SAAS,GAC/B,OAAO,GAAG,aAAa,GAAG,WAAW,GACrC,QAAQ,GAAG,cAAc,GAAG,YAAY,GACxC,MAAM,GAAG,YAAY,GAAG,UAAU,CAAC;AAEvC,MAAM,WAAW,WAAW;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACpD;AAED,MAAM,WAAW,iBAAiB;IAChC,qFAAqF;IACrF,IAAI,EAAE,MAAM,WAAW,CAAC;CACzB;AAID,iFAAiF;AACjF,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,WAAW,GAAG,iBAAiB,CAW3E;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,MAAM,WAAW,GAAG,IAAI,CAExE;AAED;;;GAGG;AACH,wBAAgB,WAAW,CACzB,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,EACzC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAChC,SAAS,CAEX"}

package/dist/components/Popover/positioning.svelte.js

@@ -0,0 +1,50 @@
+/**
+ * The positioning bridge.
+ *
+ * Ark configures placement on the Root (`positioning`), but this library's API
+ * keeps `side`/`align`/`sideOffset` on the Content — which is a descendant. So
+ * the value has to travel *up*, and the two frameworks get there differently.
+ *
+ * React has no way to do it during render, so the Root holds `useState` and the
+ * Content pushes into it from `useLayoutEffect`, re-running whenever the props
+ * change.
+ *
+ * Svelte needs no effect, but it does need care: what the Content puts on the
+ * context is an *accessor*, not a value. Handing over a plain object would
+ * capture the props as they were at initialisation, and a Content whose `side`
+ * later changed would go on being positioned the old way — silently, since
+ * nothing throws and the popup still opens. Passing a function keeps the read
+ * lazy, so the Root's `$derived` re-runs like any other reactive dependency.
+ *
+ * Four components share this shape (Popover, Menu, ContextMenu, HoverCard), so
+ * it lives here rather than being written out four times.
+ */
+import { getContext, setContext } from "svelte";
+const KEY = Symbol("ui-organized.anchoredPositioning");
+/** Called by a Root. Returns the holder whose `read()` it should feed to Ark. */
+export function providePositioning(fallback) {
+    let accessor = $state(null);
+    const holder = {
+        read: () => accessor?.() ?? fallback,
+    };
+    setContext(KEY, {
+        set(next) {
+            accessor = next;
+        },
+    });
+    return holder;
+}
+/**
+ * Called by a Content during initialisation. The accessor is invoked lazily by
+ * the Root, so later prop changes are picked up.
+ */
+export function setAnchoredPositioning(accessor) {
+    getContext(KEY)?.set(accessor);
+}
+/**
+ * `side` + `align` collapse to one zag placement string, where a centred
+ * alignment is spelled by leaving the suffix off entirely.
+ */
+export function toPlacement(side, align) {
+    return (align === "center" ? side : `${side}-${align}`);
+}

package/dist/components/Progress/Progress.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { Progress as ArkProgress } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { progressStyles } from "@ui-organized/core";
+  import type { ProgressProps } from "./Progress.types.js";
+  import "@ui-organized/core/components/Progress/Progress.css";
+
+  let {
+    value = null,
+    max = 100,
+    label,
+    showValue = false,
+    variant,
+    size,
+    shape = "linear",
+    class: className,
+  }: ProgressProps = $props();
+
+  const showHeader = $derived(label != null || showValue);
+  const isCircular = $derived(shape === "circular");
+</script>
+
+<ArkProgress.Root
+  {value}
+  {max}
+  class={clsx(progressStyles({ variant, size, shape }), className)}
+>
+  {#if showHeader}
+    <div class="progress__header text-default-body-small">
+      {#if label != null}
+        <ArkProgress.Label class="progress__label">
+          {#if typeof label === "string"}{label}{:else}{@render label()}{/if}
+        </ArkProgress.Label>
+      {/if}
+      <!--
+        A ring has room inside it, so the value sits in the middle rather than in
+        the header — see the circular branch below.
+      -->
+      {#if showValue && !isCircular}
+        <ArkProgress.ValueText class="progress__value" />
+      {/if}
+    </div>
+  {/if}
+  {#if isCircular}
+    <div class="progress__circle-wrap">
+      <ArkProgress.Circle class="progress__circle">
+        <ArkProgress.CircleTrack class="progress__circle-track" />
+        <ArkProgress.CircleRange class="progress__circle-range" />
+      </ArkProgress.Circle>
+      {#if showValue}
+        <ArkProgress.ValueText class="progress__circle-value text-emphasis-body-medium" />
+      {/if}
+    </div>
+  {:else}
+    <ArkProgress.Track class="progress__track">
+      <ArkProgress.Range class="progress__indicator" />
+    </ArkProgress.Track>
+  {/if}
+</ArkProgress.Root>

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

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

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

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

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

@@ -0,0 +1,24 @@
+import type { Snippet } from "svelte";
+import type { ControlSize } from "@ui-organized/core";
+export interface ProgressProps {
+    /** Current value. `null` renders an indeterminate bar. Defaults to null. */
+    value?: number | null;
+    /** Maximum value. Defaults to 100. */
+    max?: number;
+    /** Optional label rendered above the track. A string, or a snippet. */
+    label?: string | Snippet;
+    /** Whether to show the formatted value beside the label. Defaults to false. */
+    showValue?: boolean;
+    /** Color variant. Defaults to 'default'. */
+    variant?: "default" | "success" | "warning" | "error";
+    /** Track thickness. Defaults to 'md'. */
+    size?: ControlSize;
+    /**
+     * Track geometry. `circular` draws a ring instead of a bar — the same value
+     * and states, in the shape that fits beside an avatar or inside a tile.
+     * Defaults to 'linear'.
+     */
+    shape?: "linear" | "circular";
+    class?: string;
+}
+//# sourceMappingURL=Progress.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Progress/Progress.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,WAAW,aAAa;IAC5B,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,+EAA+E;IAC/E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACtD,yCAAyC;IACzC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/Progress/Progress.types.js

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

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

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

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

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

package/dist/components/Progress/index.js

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

package/dist/components/QRCode/QRCode.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { QrCode as ArkQrCode } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { qrCodeStyles } from "@ui-organized/core";
+  import Button from "../Button/Button.svelte";
+  import type { QRCodeProps } from "./QRCode.types.js";
+  import "@ui-organized/core/components/QRCode/QRCode.css";
+  import { glyph } from "../../icons/glyph.js";
+
+  const DEFAULT_PIXEL_SIZE = 10;
+
+  /**
+   * A scannable code for a string.
+   *
+   * Exported as `QRCode`; Ark's namespace is `QrCode`. The library's casing wins
+   * for the public name — the initialism is capitalised everywhere else here.
+   *
+   * The encoder is the machine's: `@zag-js/qr-code` bundles `uqr` and publishes
+   * the finished module grid as the pattern's `d`. Nothing here computes a
+   * single module, which is the point — three libraries hand-rolling an encoder
+   * would produce three codes.
+   */
+  let {
+    value,
+    label,
+    pixelSize = DEFAULT_PIXEL_SIZE,
+    errorCorrection,
+    overlay,
+    showDownload = false,
+    downloadLabel = "Download",
+    downloadFileName = "qr-code",
+    size = "md",
+    variant,
+    class: className,
+  }: QRCodeProps = $props();
+</script>
+
+<ArkQrCode.Root
+  class={clsx(qrCodeStyles({ size, variant }), className)}
+  {value}
+  {pixelSize}
+  encoding={errorCorrection ? { ecc: errorCorrection } : undefined}
+>
+  <!-- The name lives on the Frame, not the Root. `aria-label` on a div with no
+       role is prohibited — ARIA ignores it, so the code is announced as nothing
+       at all — and `role="img"` is what makes it legal. But it has to go on the
+       element that *is* the image: the Root also holds the download button, and
+       an `img` may not contain a control. The Frame is the code itself and owns
+       neither problem. Same reasoning as the React library. -->
+  <ArkQrCode.Frame class="qr-code__frame" role="img" aria-label={label ?? value}>
+    <ArkQrCode.Pattern class="qr-code__pattern" />
+  </ArkQrCode.Frame>
+  {#if overlay}
+    <ArkQrCode.Overlay class="qr-code__overlay">{@render overlay()}</ArkQrCode.Overlay>
+  {/if}
+  <!--
+    The download control *is* the library Button, projected through Ark's asChild
+    so it inherits every interactive token instead of restating them. `class` is
+    pulled out and handed over separately because Ark types the projected props
+    in Svelte's own shapes, where it is a `ClassValue` that may be null while the
+    Button takes a string.
+  -->
+  {#if showDownload}
+    <ArkQrCode.DownloadTrigger mimeType="image/png" fileName={`${downloadFileName}.png`}>
+      {#snippet asChild(props)}
+        {@const { class: arkClass, ...triggerProps } = props()}
+        <Button
+          intent="secondary"
+          {size}
+          type="button"
+          icon={glyph("download")}
+          class={clsx(arkClass)}
+          {...triggerProps}
+        >
+          {downloadLabel}
+        </Button>
+      {/snippet}
+    </ArkQrCode.DownloadTrigger>
+  {/if}
+</ArkQrCode.Root>

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

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

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

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

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

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

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

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

package/dist/components/QRCode/QRCode.test.js

@@ -0,0 +1,68 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/svelte";
+import QRCode from "./QRCode.svelte";
+/**
+ * The half of QRCode the parity gate cannot see.
+ *
+ * That gate compares tags, classes, ARIA and `data-*` across the four
+ * libraries — and the code itself is none of those. It is a `d` on one `<path>`,
+ * sized by custom properties on the root, and both are invisible to a contract
+ * that deliberately ignores geometry. So the gate can prove every library
+ * renders the same *scaffolding* around a code and say nothing about whether the
+ * code encodes anything at all.
+ *
+ * These assertions are the other half: that `value`, `pixelSize` and
+ * `errorCorrection` reach the machine, which is where `@zag-js/qr-code` runs
+ * `uqr` over them. Nothing here re-implements the encoder — an encoder written
+ * in this package would be a fourth answer to a question that already has one.
+ * What is checked is that the props arrive, by watching the encoder's output
+ * change when they do.
+ */
+describe("QRCode", () => {
+    const patternOf = (container) => container.querySelector('[data-part="pattern"]').getAttribute("d") ?? "";
+    const styleOf = (container) => container.querySelector('[data-part="root"]').getAttribute("style") ?? "";
+    it("encodes the value into the pattern", () => {
+        const { container } = render(QRCode, { props: { value: "https://ui-organized.dev" } });
+        // A module is `M<x>,<y>h<n>v<n>h-<n>z`; an empty or absent `d` means the
+        // machine never saw the value.
+        expect(patternOf(container)).toMatch(/^M\d+,\d+h/);
+    });
+    it("encodes a different value differently", () => {
+        const first = render(QRCode, { props: { value: "one" } });
+        const second = render(QRCode, { props: { value: "two" } });
+        expect(patternOf(first.container)).not.toBe(patternOf(second.container));
+    });
+    it("scales the code by pixelSize", () => {
+        const { container } = render(QRCode, { props: { value: "hi", pixelSize: 7 } });
+        // The machine publishes the module size and the resulting edge length; both
+        // are multiples of the one prop, so a dropped `pixelSize` shows up as the
+        // default 10 rather than as a missing attribute.
+        // Whitespace-tolerant: the SSR renderer writes `--qrcode-pixel-size:7px`
+        // and the client one re-serialises it as `--qrcode-pixel-size: 7px`.
+        expect(styleOf(container)).toMatch(/--qrcode-pixel-size:\s*7px/);
+        expect(patternOf(container)).toContain("h7v7h-7z");
+    });
+    it("passes the error-correction level through to the encoder", () => {
+        const low = render(QRCode, { props: { value: "same string", errorCorrection: "L" } });
+        const high = render(QRCode, { props: { value: "same string", errorCorrection: "H" } });
+        // Higher correction means more redundancy, which means a larger grid for
+        // the same string. Comparing sizes rather than exact paths keeps this
+        // assertion about *our* prop reaching the machine rather than about the
+        // encoder's output, which is not ours to pin.
+        expect(patternOf(high.container).length).toBeGreaterThan(patternOf(low.container).length);
+    });
+    it("labels the code with its value unless a label is given, on the frame", () => {
+        // The name is on the frame, not the root: `aria-label` on an element with no
+        // role is prohibited and silently ignored, and the img role that makes it
+        // legal cannot go on the root because the root also holds the download
+        // button. Every library places it the same way; the parity gate holds them
+        // to it.
+        const { container } = render(QRCode, { props: { value: "https://example.com" } });
+        const frame = container.querySelector('[data-part="frame"]');
+        expect(frame.getAttribute("role")).toBe("img");
+        expect(frame.getAttribute("aria-label")).toBe("https://example.com");
+        expect(container.querySelector('[data-part="root"]').hasAttribute("aria-label")).toBe(false);
+        const labelled = render(QRCode, { props: { value: "https://example.com", label: "Ticket" } });
+        expect(labelled.container.querySelector('[data-part="frame"]').getAttribute("aria-label")).toBe("Ticket");
+    });
+});