@ui-organized/svelte 0.0.0-stage → 0.1.0

package/dist/components/Select/SelectTrigger.svelte

@@ -0,0 +1,22 @@
+<!--
+  The trigger, split out so it can read the select's open state from context —
+  `Select` itself renders the Root, so it sits above that context. React splits
+  it for exactly the same reason.
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { Select as ArkSelect, useSelectContext } from "@ark-ui/svelte";
+  import { OMIT_ARIA, popupControls } from "@ui-organized/core";
+
+  let { hasLabel, children }: { hasLabel: boolean; children: Snippet } = $props();
+
+  const select = useSelectContext();
+</script>
+
+<ArkSelect.Trigger
+  class="select-field__trigger text-default-body-large"
+  {...popupControls(select().open)}
+  aria-labelledby={hasLabel ? undefined : OMIT_ARIA}
+>
+  {@render children()}
+</ArkSelect.Trigger>

package/dist/components/Select/SelectTrigger.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    hasLabel: boolean;
+    children: Snippet;
+};
+declare const SelectTrigger: import("svelte").Component<$$ComponentProps, {}, "">;
+type SelectTrigger = ReturnType<typeof SelectTrigger>;
+export default SelectTrigger;
+//# sourceMappingURL=SelectTrigger.svelte.d.ts.map

package/dist/components/Select/SelectTrigger.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectTrigger.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Select/SelectTrigger.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIrC,KAAK,gBAAgB,GAAI;IAAE,QAAQ,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAE,CAAC;AAkBnE,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

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

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

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

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

package/dist/components/Select/index.js

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

package/dist/components/Sheet/Sheet.svelte

@@ -0,0 +1,22 @@
+<!-- Sheet root — an edge-anchored panel built on the Dialog primitive. -->
+<script lang="ts">
+  import { Dialog as ArkDialog } from "@ark-ui/svelte";
+  import type { SheetProps } from "./Sheet.types.js";
+  // Reuses the Dialog chrome (backdrop, title/description/footer/close).
+  import "@ui-organized/core/components/Dialog/Dialog.css";
+  import "@ui-organized/core/components/Sheet/Sheet.css";
+
+  let { open = $bindable(), defaultOpen, onOpenChange, modal, children }: SheetProps = $props();
+</script>
+
+<ArkDialog.Root
+  bind:open
+  {defaultOpen}
+  onOpenChange={(details) => {
+    open = details.open;
+    onOpenChange?.(details.open);
+  }}
+  {modal}
+>
+  {@render children?.()}
+</ArkDialog.Root>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sheet.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Sheet/Sheet.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,iDAAiD,CAAC;AACzD,OAAO,+CAA+C,CAAC;AAsBvD,QAAA,MAAM,KAAK,oDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

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

@@ -0,0 +1,54 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes, HTMLButtonAttributes } from "svelte/elements";
+import type { SheetVariants } from "@ui-organized/core";
+import type { ArkForwardable } from "../../types.js";
+/** Props handed to an `asChild` snippet. Mirrors Ark's own `PropsFn`. */
+export type SheetPropsFn = (props?: HTMLButtonAttributes) => HTMLAttributes<HTMLElement>;
+export interface SheetProps {
+    /** 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;
+    /** Trap focus and block outside interaction while open. Defaults to true. */
+    modal?: boolean;
+    children?: Snippet;
+}
+export interface SheetTriggerProps extends ArkForwardable<Omit<HTMLButtonAttributes, "class" | "value">> {
+    class?: string;
+    children?: Snippet;
+    /** Project the trigger onto a custom element instead of rendering a button. */
+    asChild?: Snippet<[SheetPropsFn]>;
+}
+export interface SheetCloseProps extends ArkForwardable<Omit<HTMLButtonAttributes, "class" | "value">> {
+    class?: string;
+    children?: Snippet;
+    /** Project the close control onto a custom element. */
+    asChild?: Snippet<[SheetPropsFn]>;
+}
+export interface SheetContentProps extends ArkForwardable<Omit<HTMLAttributes<HTMLDivElement>, "class">> {
+    /** Edge the panel slides in from. Defaults to 'right'. */
+    side?: SheetVariants["side"];
+    /** Panel extent (width for left/right, height for top/bottom). Defaults to 'md'. */
+    size?: SheetVariants["size"];
+    /** Render a close (x) button in the top-right corner. Defaults to true. */
+    showClose?: boolean;
+    /** Portal container. Defaults to document.body. */
+    container?: HTMLElement | null;
+    class?: string;
+    children?: Snippet;
+}
+export interface SheetTitleProps extends ArkForwardable<Omit<HTMLAttributes<HTMLHeadingElement>, "class">> {
+    class?: string;
+    children?: Snippet;
+}
+export interface SheetDescriptionProps extends ArkForwardable<Omit<HTMLAttributes<HTMLParagraphElement>, "class">> {
+    class?: string;
+    children?: Snippet;
+}
+export interface SheetFooterProps extends Omit<HTMLAttributes<HTMLDivElement>, "class"> {
+    class?: string;
+    children?: Snippet;
+}
+//# sourceMappingURL=Sheet.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sheet.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Sheet/Sheet.types.ts"],"names":[],"mappings":"AAAA,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,oBAAoB,CAAC;AACxD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,yEAAyE;AACzE,MAAM,MAAM,YAAY,GAAG,CAAC,KAAK,CAAC,EAAE,oBAAoB,KAAK,cAAc,CAAC,WAAW,CAAC,CAAC;AAEzF,MAAM,WAAW,UAAU;IACzB,yCAAyC;IACzC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kDAAkD;IAClD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,6EAA6E;IAC7E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AASD,MAAM,WAAW,iBACf,SAAQ,cAAc,CAAC,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,OAAO,CAAC,CAAC;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC;CACnC;AAED,MAAM,WAAW,eACf,SAAQ,cAAc,CAAC,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,OAAO,CAAC,CAAC;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC;CACnC;AAED,MAAM,WAAW,iBACf,SAAQ,cAAc,CAAC,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC;IACrE,0DAA0D;IAC1D,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,oFAAoF;IACpF,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,2EAA2E;IAC3E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mDAAmD;IACnD,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eACf,SAAQ,cAAc,CAAC,IAAI,CAAC,cAAc,CAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC,CAAC;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,qBACf,SAAQ,cAAc,CAAC,IAAI,CAAC,cAAc,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,CAAC;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACrF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/dist/components/Sheet/Sheet.types.js

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

package/dist/components/Sheet/SheetClose.svelte

@@ -0,0 +1,15 @@
+<!-- Closes the sheet when activated. Pass `asChild` to project a custom element. -->
+<script lang="ts">
+  import { Dialog as ArkDialog } from "@ark-ui/svelte";
+  import type { SheetCloseProps } from "./Sheet.types.js";
+
+  let { asChild: project, children, ...rest }: SheetCloseProps = $props();
+</script>
+
+{#if project}
+  <ArkDialog.CloseTrigger {...rest}>
+    {#snippet asChild(props)}{@render project(props)}{/snippet}
+  </ArkDialog.CloseTrigger>
+{:else}
+  <ArkDialog.CloseTrigger {...rest}>{@render children?.()}</ArkDialog.CloseTrigger>
+{/if}

package/dist/components/Sheet/SheetClose.svelte.d.ts

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

package/dist/components/Sheet/SheetClose.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SheetClose.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Sheet/SheetClose.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAoBxD,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/Sheet/SheetContent.svelte

@@ -0,0 +1,39 @@
+<!--
+  Portalled backdrop + edge-anchored panel holding the sheet body. The panel
+  self-positions at the edge, so the positioner is just the Ark wrapper.
+-->
+<script lang="ts">
+  import { Dialog as ArkDialog, Portal } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { sheetStyles } from "@ui-organized/core";
+  import Icon from "../Icon/Icon.svelte";
+  import type { SheetContentProps } from "./Sheet.types.js";
+  import { glyph } from "../../icons/glyph.js";
+
+  // `side` and `size` are left undefined rather than given defaults here: the
+  // recipe already declares 'right' and 'md', and repeating them would be a
+  // second copy of the default to keep in step.
+  let {
+    side,
+    size,
+    showClose = true,
+    container,
+    class: className,
+    children,
+    ...contentProps
+  }: SheetContentProps = $props();
+</script>
+
+<Portal container={container ?? undefined}>
+  <ArkDialog.Backdrop class="dialog__backdrop" />
+  <ArkDialog.Positioner class="dialog__positioner sheet__positioner">
+    <ArkDialog.Content class={clsx(sheetStyles({ side, size }), className)} {...contentProps}>
+      {#if showClose}
+        <ArkDialog.CloseTrigger class="dialog__close" aria-label="Close">
+          <Icon name={glyph("close")} size={20} />
+        </ArkDialog.CloseTrigger>
+      {/if}
+      {@render children?.()}
+    </ArkDialog.Content>
+  </ArkDialog.Positioner>
+</Portal>

package/dist/components/Sheet/SheetContent.svelte.d.ts

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

package/dist/components/Sheet/SheetContent.svelte.d.ts.map

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

package/dist/components/Sheet/SheetDescription.svelte

@@ -0,0 +1,29 @@
+<!-- Supporting copy under the title; becomes the sheet's description.
+
+  ── Why the element is pinned ───────────────────────────────────────────────
+
+  `@ark-ui/svelte` is on 5.24 while React and Vue are on 5.37/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. The `<p>` carries 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 { Dialog as ArkDialog } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import type { SheetDescriptionProps } from "./Sheet.types.js";
+
+  let { class: className, children, ...rest }: SheetDescriptionProps = $props();
+</script>
+
+<ArkDialog.Description {...rest}>
+  {#snippet asChild(project)}
+    <div {...project()} class={clsx("dialog__description", "text-default-body-medium", className)}>
+      {@render children?.()}
+    </div>
+  {/snippet}
+</ArkDialog.Description>

package/dist/components/Sheet/SheetDescription.svelte.d.ts

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

package/dist/components/Sheet/SheetDescription.svelte.d.ts.map

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

package/dist/components/Sheet/SheetFooter.svelte

@@ -0,0 +1,14 @@
+<!--
+  Action row pinned to the bottom of the panel, holding the sheet's buttons.
+  Fills the row on narrow (left/right) sheets, right-aligns on wide ones.
+-->
+<script lang="ts">
+  import { clsx } from "clsx";
+  import type { SheetFooterProps } from "./Sheet.types.js";
+
+  let { class: className, children, ...rest }: SheetFooterProps = $props();
+</script>
+
+<div class={clsx("dialog__footer", "sheet__footer", className)} {...rest}>
+  {@render children?.()}
+</div>

package/dist/components/Sheet/SheetFooter.svelte.d.ts

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

package/dist/components/Sheet/SheetFooter.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SheetFooter.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Sheet/SheetFooter.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAgBzD,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/Sheet/SheetTitle.svelte

@@ -0,0 +1,18 @@
+<!--
+  Heading for the panel, and the thing that names it.
+
+  Not pinned with `asChild`, unlike the description next to it: Ark renders this
+  part as an `<h2>` in 5.24 and in the newer packages alike, so the element is
+  already the same in all three libraries.
+-->
+<script lang="ts">
+  import { Dialog as ArkDialog } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import type { SheetTitleProps } from "./Sheet.types.js";
+
+  let { class: className, children, ...rest }: SheetTitleProps = $props();
+</script>
+
+<ArkDialog.Title class={clsx("dialog__title", "text-strong-heading-small", className)} {...rest}>
+  {@render children?.()}
+</ArkDialog.Title>

package/dist/components/Sheet/SheetTitle.svelte.d.ts

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

package/dist/components/Sheet/SheetTitle.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SheetTitle.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Sheet/SheetTitle.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAiBxD,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/Sheet/SheetTrigger.svelte

@@ -0,0 +1,21 @@
+<!-- Element that opens the sheet. Pass `asChild` to project a custom element. -->
+<script lang="ts">
+  import { Dialog as ArkDialog, useDialogContext } from "@ark-ui/svelte";
+  import { popupControls } from "@ui-organized/core";
+  import type { SheetTriggerProps } from "./Sheet.types.js";
+
+  let { asChild: project, children, ...rest }: SheetTriggerProps = $props();
+
+  const dialog = useDialogContext();
+  // The panel it names is only mounted while open; popupControls drops the
+  // reference the rest of the time so it cannot dangle.
+  const controls = $derived(popupControls(dialog().open));
+</script>
+
+{#if project}
+  <ArkDialog.Trigger {...controls} {...rest}>
+    {#snippet asChild(props)}{@render project(props)}{/snippet}
+  </ArkDialog.Trigger>
+{:else}
+  <ArkDialog.Trigger {...controls} {...rest}>{@render children?.()}</ArkDialog.Trigger>
+{/if}

package/dist/components/Sheet/SheetTrigger.svelte.d.ts

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

package/dist/components/Sheet/SheetTrigger.svelte.d.ts.map

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

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

@@ -0,0 +1,10 @@
+export { default as Sheet } from "./Sheet.svelte";
+export { default as SheetTrigger } from "./SheetTrigger.svelte";
+export { default as SheetContent } from "./SheetContent.svelte";
+export { default as SheetTitle } from "./SheetTitle.svelte";
+export { default as SheetDescription } from "./SheetDescription.svelte";
+export { default as SheetClose } from "./SheetClose.svelte";
+export { default as SheetFooter } from "./SheetFooter.svelte";
+export type { SheetProps, SheetTriggerProps, SheetContentProps, SheetTitleProps, SheetDescriptionProps, SheetCloseProps, SheetFooterProps, SheetPropsFn, } from "./Sheet.types.js";
+export type { SheetVariants } from "@ui-organized/core";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Sheet/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,YAAY,EACV,UAAU,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,eAAe,EAAE,qBAAqB,EACxF,eAAe,EAAE,gBAAgB,EAAE,YAAY,GAChD,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/Sheet/index.js

@@ -0,0 +1,7 @@
+export { default as Sheet } from "./Sheet.svelte";
+export { default as SheetTrigger } from "./SheetTrigger.svelte";
+export { default as SheetContent } from "./SheetContent.svelte";
+export { default as SheetTitle } from "./SheetTitle.svelte";
+export { default as SheetDescription } from "./SheetDescription.svelte";
+export { default as SheetClose } from "./SheetClose.svelte";
+export { default as SheetFooter } from "./SheetFooter.svelte";

package/dist/components/SignaturePad/SignaturePad.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+  import { SignaturePad as ArkSignaturePad } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { signaturePadStyles } from "@ui-organized/core";
+  import Button from "../Button/Button.svelte";
+  import FieldError from "../FieldError/FieldError.svelte";
+  import type { SignaturePadProps } from "./SignaturePad.types.js";
+  import "@ui-organized/core/components/SignaturePad/SignaturePad.css";
+  import { glyph } from "../../icons/glyph.js";
+
+  const DEFAULT_STROKE_WIDTH = 2;
+
+  let {
+    label,
+    helperText,
+    error,
+    paths = $bindable(),
+    defaultPaths,
+    onDraw,
+    onDrawEnd,
+    strokeWidth = DEFAULT_STROKE_WIDTH,
+    showGuide = true,
+    showClear = true,
+    clearLabel = "Clear",
+    size = "md",
+    variant,
+    required,
+    disabled,
+    readOnly,
+    name,
+    class: className,
+  }: SignaturePadProps = $props();
+
+  const isInvalid = $derived(!!error);
+  const errorMessage = $derived(typeof error === "string" ? error : undefined);
+</script>
+
+<ArkSignaturePad.Root
+  class={clsx(signaturePadStyles({ size, variant }), className)}
+  {paths}
+  {defaultPaths}
+  onDraw={(details) => {
+    paths = details.paths;
+    onDraw?.(details.paths);
+  }}
+  onDrawEnd={onDrawEnd && ((details) => onDrawEnd(details.paths, details.getDataUrl))}
+  drawing={{ size: strokeWidth }}
+  {required}
+  {disabled}
+  {readOnly}
+  {name}
+>
+  {#if label}
+    <ArkSignaturePad.Label class="field__label">
+      {label}
+      {#if required}<span class="field__required" aria-hidden="true"></span>{/if}
+    </ArkSignaturePad.Label>
+  {/if}
+
+  <ArkSignaturePad.Control class="signature-pad__control">
+    <!--
+      Ark's `Segment` renders the whole signature: it maps the machine's `paths`
+      itself and appends the in-progress `currentPath`. So it is rendered ONCE.
+
+      It used to be mapped over `api().paths`, which produced one `<svg>` per
+      stroke, each drawing every stroke — N copies stacked exactly on top of one
+      another — and the `path` prop Ark does not read was spread onto the `<svg>`
+      as a stray attribute. It looked right, because the topmost copy is the
+      correct one.
+    -->
+    <ArkSignaturePad.Segment class="signature-pad__segment" />
+    {#if showGuide}<ArkSignaturePad.Guide class="signature-pad__guide" />{/if}
+  </ArkSignaturePad.Control>
+
+  <!--
+    The clear 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 showClear}
+    <ArkSignaturePad.ClearTrigger>
+      {#snippet asChild(props)}
+        {@const { class: arkClass, ...triggerProps } = props()}
+        <Button
+          intent="ghost"
+          {size}
+          type="button"
+          icon={glyph("refresh")}
+          class={clsx(arkClass)}
+          {...triggerProps}
+        >
+          {clearLabel}
+        </Button>
+      {/snippet}
+    </ArkSignaturePad.ClearTrigger>
+  {/if}
+
+  {#if helperText && !isInvalid}
+    <span class="field__description">{helperText}</span>
+  {/if}
+  {#if isInvalid && errorMessage}
+    <FieldError message={errorMessage} />
+  {/if}
+  <!--
+    The hidden input requires an explicit value, and the machine offers two
+    forms: the stroke paths, and a rasterised data URL from `getDataUrl` — which
+    is async and so cannot feed a render-time prop. The paths are submitted
+    instead: they are lossless, resolution independent, and deterministic. Reach
+    for the PNG via `onDrawEnd`, whose details carry `getDataUrl`, when a raster
+    is what the server wants.
+  -->
+  <ArkSignaturePad.Context>
+    {#snippet render(api)}
+      <ArkSignaturePad.HiddenInput value={api().paths.join(" ")} />
+    {/snippet}
+  </ArkSignaturePad.Context>
+</ArkSignaturePad.Root>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SignaturePad.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/SignaturePad/SignaturePad.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,6DAA6D,CAAC;AAqFrE,QAAA,MAAM,YAAY,4DAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

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

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

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

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

package/dist/components/SignaturePad/SignaturePad.test.js

@@ -0,0 +1,78 @@
+import { describe, it, expect, vi, beforeAll, afterAll } from "vitest";
+import { render } from "@testing-library/svelte";
+import SignaturePad from "./SignaturePad.svelte";
+// The clear trigger is the library Button with an icon, and no icon set is
+// registered in a unit test — so `Icon` says so, once, loudly, and irrelevantly
+// to anything asserted here.
+beforeAll(() => vi.spyOn(console, "warn").mockImplementation(() => { }));
+afterAll(() => vi.restoreAllMocks());
+/**
+ * The half of SignaturePad the parity gate cannot see.
+ *
+ * Ink is `d` on a `<path>`, and `d` is not a contract attribute — so the gate
+ * can prove all four libraries render the same segment element and say nothing
+ * about whether a stroke is in it. `defaultPaths` is the only way to reach the
+ * drawn state without a pointer: zag seeds `paths` from it in the machine's
+ * context, so it is populated on the first render.
+ *
+ * What is *not* covered anywhere, here or in the gate: drawing itself. The
+ * pressure envelope `perfect-freehand` builds, the in-progress `currentPath`,
+ * and the canvas raster `getDataUrl` produces all need a real pointer and a
+ * real canvas. Those belong to the Playwright harness, which does not cover this
+ * component yet.
+ *
+ * `strokeWidth` is uncovered for a different reason: it reaches the machine as
+ * `drawing.size` and only ever changes the *shape* of a stroke that a pointer
+ * produced. It leaves no trace in the DOM at all, so there is nothing to assert
+ * short of drawing.
+ */
+describe("SignaturePad", () => {
+    const PATHS = ["M 10 40 q 20 -30 40 0", "M 60 20 l 20 20"];
+    /**
+     * One `Segment`, however many strokes.
+     *
+     * Ark's `Segment` draws the whole signature: it maps the machine's `paths`
+     * itself and appends the in-progress `currentPath`, so it is rendered once and
+     * never mapped over. All four libraries used to map it over `api.paths` and
+     * hand each copy a `path` prop Ark ignores, which produced N `<svg>` elements
+     * each containing all N paths, stacked exactly on top of one another. It
+     * looked right — the topmost copy is the correct one — so only the DOM was
+     * wrong, which is why porting caught it and no visual check would have.
+     *
+     * These assertions are the guard against it coming back: the segment count is
+     * fixed at one, and the path count tracks the strokes.
+     */
+    it("draws every committed stroke inside a single segment", () => {
+        const { container } = render(SignaturePad, { props: { defaultPaths: PATHS } });
+        const paths = [...container.querySelectorAll('[data-part="segment-path"]')];
+        expect(container.querySelectorAll('[data-part="segment"]')).toHaveLength(1);
+        expect(paths.map((p) => p.getAttribute("d"))).toEqual(PATHS);
+    });
+    it("renders the segment but no stroke when there is none", () => {
+        const { container } = render(SignaturePad, { props: {} });
+        expect(container.querySelectorAll('[data-part="segment-path"]')).toHaveLength(0);
+        // The segment element is unconditional — it is the canvas the strokes go in.
+        expect(container.querySelectorAll('[data-part="segment"]')).toHaveLength(1);
+    });
+    it("takes controlled paths over the default", () => {
+        const { container } = render(SignaturePad, {
+            props: { defaultPaths: ["M 0 0 L 1 1"], paths: PATHS },
+        });
+        const paths = [...container.querySelectorAll('[data-part="segment-path"]')];
+        expect(paths.map((p) => p.getAttribute("d"))).toEqual(PATHS);
+    });
+    it("hides the clear trigger until there is something to clear", () => {
+        const empty = render(SignaturePad, { props: {} });
+        expect(empty.container.querySelector("button").hasAttribute("hidden")).toBe(true);
+        const drawn = render(SignaturePad, { props: { defaultPaths: PATHS } });
+        expect(drawn.container.querySelector("button").hasAttribute("hidden")).toBe(false);
+    });
+    it("submits the strokes as the hidden input's value", () => {
+        const { container } = render(SignaturePad, { props: { defaultPaths: PATHS, name: "sig" } });
+        const input = container.querySelector("input");
+        // The paths, not a rasterised data URL: `getDataUrl` is async and cannot
+        // feed a render-time value. See the component.
+        expect(input.getAttribute("value") ?? input.value).toBe(PATHS.join(" "));
+        expect(input.getAttribute("name")).toBe("sig");
+    });
+});