@ui-organized/svelte 0.0.0-stage → 0.1.0

package/dist/components/Pagination/Pagination.svelte

@@ -0,0 +1,135 @@
+<!--
+  Numbered page navigation with previous/next controls, and a jump menu behind
+  each ellipsis.
+
+  Ark UI has no Pagination primitive, so the markup is the facade's own — but the
+  page window is not. Which numbers show and where the gaps fall is pure
+  arithmetic in @ui-organized/core, shared with every other ui-organized library
+  precisely so they cannot drift on the edge cases (a short range with no gaps, a
+  gap exactly one page wide, the window pinned at either end).
+-->
+<script lang="ts">
+  import { clsx } from "clsx";
+  import { getPageItems, withEllipsisPages } from "@ui-organized/core";
+  import Button from "../Button/Button.svelte";
+  import Menu from "../Menu/Menu.svelte";
+  import MenuContent from "../Menu/MenuContent.svelte";
+  import MenuItem from "../Menu/MenuItem.svelte";
+  import MenuTrigger from "../Menu/MenuTrigger.svelte";
+  import type { PaginationProps } from "./Pagination.types.js";
+  import "@ui-organized/core/components/Pagination/Pagination.css";
+  import { glyph } from "../../icons/glyph.js";
+
+  let {
+    page = $bindable(),
+    count,
+    onPageChange,
+    siblingCount = 1,
+    boundaryCount = 1,
+    showPrevNext = true,
+    class: className,
+    ...rest
+  }: PaginationProps = $props();
+
+  /**
+   * The window, flattened into one uniform shape before it reaches the markup.
+   *
+   * `PageItem` is `number | Ellipsis`, and narrowing that union inside an
+   * `{#each}` costs a cast at every read. Deciding it here leaves the markup
+   * reading a field.
+   */
+  interface PageEntry {
+    key: string;
+    /** The page this entry navigates to, or `undefined` for a collapsed gap. */
+    page?: number;
+    /** The pages a gap hides, offered as a jump menu. Empty for a real page. */
+    pages: number[];
+    /** Accessible name — a destination for a page, a range for a gap. */
+    label: string;
+  }
+
+  const entries = $derived<PageEntry[]>(
+    withEllipsisPages(getPageItems(page, count, siblingCount, boundaryCount)).map((item, index) => {
+      if (typeof item === "number") {
+        return { key: `page-${item}`, page: item, pages: [], label: `Go to page ${item}` };
+      }
+      const first = item.pages[0];
+      const last = item.pages[item.pages.length - 1];
+      return {
+        key: `ellipsis-${index}`,
+        pages: item.pages,
+        label: `Jump to a page between ${first} and ${last}`,
+      };
+    }),
+  );
+
+  const goTo = (next: number) => {
+    page = next;
+    onPageChange?.(next);
+  };
+</script>
+
+<nav aria-label="Pagination" class={clsx("pagination", className)} {...rest}>
+  <ul class="pagination__list">
+    {#if showPrevNext}
+      <li>
+        <Button
+          intent="ghost"
+          icon={glyph("chevron-left")}
+          disabled={page <= 1}
+          aria-label="Previous page"
+          onclick={() => goTo(page - 1)}
+        />
+      </li>
+    {/if}
+    {#each entries as entry (entry.key)}
+      <li>
+        {#if entry.page !== undefined}
+          <button
+            type="button"
+            class="pagination__page text-default-body-medium"
+            aria-current={entry.page === page ? "page" : undefined}
+            aria-label={entry.label}
+            onclick={() => goTo(entry.page!)}
+          >
+            {entry.page}
+          </button>
+        {:else}
+          <!-- The gap is not decoration: it is the only way to reach the pages it hides. -->
+          <Menu>
+            <MenuTrigger>
+              {#snippet asChild(props)}
+                <button
+                  {...props()}
+                  type="button"
+                  class="pagination__ellipsis"
+                  aria-label={entry.label}
+                >
+                  <span aria-hidden="true">…</span>
+                </button>
+              {/snippet}
+            </MenuTrigger>
+            <MenuContent class="pagination__ellipsis-menu">
+              {#each entry.pages as hidden (hidden)}
+                <MenuItem value={String(hidden)} onSelect={() => goTo(hidden)}>
+                  {hidden}
+                </MenuItem>
+              {/each}
+            </MenuContent>
+          </Menu>
+        {/if}
+      </li>
+    {/each}
+    {#if showPrevNext}
+      <li>
+        <Button
+          intent="ghost"
+          icon={glyph("chevron-right")}
+          disabled={page >= count}
+          aria-label="Next page"
+          onclick={() => goTo(page + 1)}
+        />
+      </li>
+    {/if}
+  </ul>
+</nav>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Pagination/Pagination.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,yDAAyD,CAAC;AA6GjE,QAAA,MAAM,UAAU,yDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from "svelte/elements";
+export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, "class" | "children"> {
+    /** The current page (1-based). Bindable: `bind:page`. */
+    page: number;
+    /** Total number of pages. */
+    count: number;
+    /**
+     * Called with the next page when a control is activated.
+     *
+     * Optional here where React requires it, because `bind:page` is the other half
+     * of the same job and a consumer who binds needs no callback. Kept alongside so
+     * the API still matches the React package — the same split `Collapsible` makes
+     * between `bind:open` and `onOpenChange`.
+     */
+    onPageChange?: (page: number) => void;
+    /** Pages shown on each side of the current page. Defaults to 1. */
+    siblingCount?: number;
+    /** Pages always shown at the start and end. Defaults to 1. */
+    boundaryCount?: number;
+    /** Render the previous/next arrow controls. Defaults to true. */
+    showPrevNext?: boolean;
+    class?: string;
+}
+//# sourceMappingURL=Pagination.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Pagination/Pagination.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAC9F,yDAAyD;IACzD,IAAI,EAAE,MAAM,CAAC;IACb,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,mEAAmE;IACnE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8DAA8D;IAC9D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iEAAiE;IACjE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/Pagination/Pagination.types.js

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Pagination/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,YAAY,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/components/Pagination/index.js

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

package/dist/components/PasswordInput/PasswordInput.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import { Field } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { CONTROL_ICON_SIZE, passwordInputFieldStyles } from "@ui-organized/core";
+  import Icon from "../Icon/Icon.svelte";
+  import FieldError from "../FieldError/FieldError.svelte";
+  import type { PasswordInputProps } from "./PasswordInput.types.js";
+  // Shares the Input field surface/state styling; InputAffix.css layers on the
+  // trailing show/hide toggle.
+  import "@ui-organized/core/components/Input/Input.css";
+  import "@ui-organized/core/components/Input/InputAffix.css";
+  import { glyph } from "../../icons/glyph.js";
+  import { onMount } from "svelte";
+  import { trackFocusModality } from "@ui-organized/core/focus-modality";
+
+  // Text fields read pointer vs keyboard for a quiet focus state on click.
+  onMount(() => trackFocusModality());
+
+  let {
+    label,
+    helperText,
+    error,
+    size,
+    required,
+    showToggle = true,
+    class: className,
+    disabled,
+    value = $bindable(),
+    ...inputProps
+  }: PasswordInputProps = $props();
+
+  const isInvalid = $derived(!!error);
+  const errorMessage = $derived(typeof error === "string" ? error : undefined);
+
+  let visible = $state(false);
+</script>
+
+<Field.Root class={clsx(passwordInputFieldStyles({ size }), className)} invalid={isInvalid}>
+  {#if label}
+    <Field.Label class="field__label">
+      {label}
+      {#if required}<span class="field__required" aria-hidden="true"></span>{/if}
+    </Field.Label>
+  {/if}
+  <div class="input-affix">
+    <Field.Input
+      type={visible ? "text" : "password"}
+      class={clsx("field__control", showToggle && "field__control--affix-end")}
+      {required}
+      {disabled}
+      bind:value
+      {...inputProps}
+    />
+    {#if showToggle}
+      <!--
+        A plain button rather than a Toggle: it reveals the field rather than
+        changing its value, so it stays out of the form's tab-and-submit story
+        and is named by what it will do next.
+      -->
+      <button
+        type="button"
+        class="input-affix__adornment input-affix__adornment--end input-affix__action"
+        onclick={() => (visible = !visible)}
+        aria-label={visible ? "Hide password" : "Show password"}
+        aria-pressed={visible}
+        {disabled}
+      >
+        <Icon name={glyph(visible ? "eye-off" : "eye")} size={CONTROL_ICON_SIZE[size ?? "md"]} />
+      </button>
+    {/if}
+  </div>
+  {#if helperText && !isInvalid}
+    <Field.HelperText class="field__description">{helperText}</Field.HelperText>
+  {/if}
+  {#if isInvalid && errorMessage}
+    <Field.ErrorText>
+      {#snippet asChild(props)}
+        <FieldError {...props()} message={errorMessage} />
+      {/snippet}
+    </Field.ErrorText>
+  {/if}
+</Field.Root>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/PasswordInput/PasswordInput.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAGnE,OAAO,+CAA+C,CAAC;AACvD,OAAO,oDAAoD,CAAC;AAwE5D,QAAA,MAAM,aAAa,6DAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,22 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+import type { ControlSize } from "@ui-organized/core";
+import type { ArkForwardable } from "../../types.js";
+export interface PasswordInputProps extends ArkForwardable<Omit<HTMLInputAttributes, "size" | "type" | "class">> {
+    /** Accessible label text rendered above the control. */
+    label?: string;
+    /** Helper text rendered below the control. Hidden when an error is shown. */
+    helperText?: string;
+    /**
+     * Error state. Pass a string to show an error message.
+     * Pass `true` to mark the field invalid without a message.
+     */
+    error?: string | boolean;
+    /** Size variant. Defaults to 'md'. */
+    size?: ControlSize;
+    /** Show the show/hide visibility toggle. Defaults to `true`. */
+    showToggle?: boolean;
+    class?: string;
+    /** The control's value. Bindable: `bind:value`. */
+    value?: string | number | null;
+}
+//# sourceMappingURL=PasswordInput.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/PasswordInput/PasswordInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,WAAW,kBACf,SAAQ,cAAc,CAAC,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IAC5E,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,sCAAsC;IACtC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,gEAAgE;IAChE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;CAChC"}

package/dist/components/PasswordInput/PasswordInput.types.js

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/PasswordInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,YAAY,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AACnE,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/PasswordInput/index.js

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

package/dist/components/PinInput/PinInput.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import { PinInput as ArkPinInput } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { pinInputStyles } from "@ui-organized/core";
+  import FieldError from "../FieldError/FieldError.svelte";
+  import type { PinInputProps } from "./PinInput.types.js";
+  import "@ui-organized/core/components/PinInput/PinInput.css";
+  import { onMount } from "svelte";
+  import { trackFocusModality } from "@ui-organized/core/focus-modality";
+
+  // Text fields read pointer vs keyboard for a quiet focus state on click.
+  onMount(() => trackFocusModality());
+
+  const DEFAULT_LENGTH = 4;
+
+  let {
+    label,
+    helperText,
+    error,
+    length = DEFAULT_LENGTH,
+    size,
+    variant,
+    value = $bindable(),
+    defaultValue,
+    onValueChange,
+    onValueComplete,
+    type = "numeric",
+    mask,
+    otp,
+    placeholder,
+    blurOnComplete,
+    required,
+    disabled,
+    readOnly,
+    name,
+    class: className,
+  }: PinInputProps = $props();
+
+  // The machine models the value as one string per cell; the public API is the
+  // whole code as a single string. Same boundary coercion `Select` does for
+  // `string ↔ string[]`, for the same reason: the array is an implementation
+  // detail of the parts, not something a caller should have to assemble.
+  function toCells(code: string | undefined, count: number): string[] | undefined {
+    if (code == null) return undefined;
+    return Array.from({ length: count }, (_, i) => code[i] ?? "");
+  }
+
+  const cellIndexes = $derived(Array.from({ length }, (_, i) => i));
+
+  const isInvalid = $derived(!!error);
+  const errorMessage = $derived(typeof error === "string" ? error : undefined);
+</script>
+
+<ArkPinInput.Root
+  class={clsx(pinInputStyles({ size, variant }), className)}
+  count={length}
+  value={toCells(value, length)}
+  defaultValue={toCells(defaultValue, length)}
+  onValueChange={(details) => {
+    const next = details.value.join("");
+    value = next;
+    onValueChange?.(next);
+  }}
+  onValueComplete={onValueComplete && ((details) => onValueComplete(details.value.join("")))}
+  {type}
+  {mask}
+  {otp}
+  {placeholder}
+  {blurOnComplete}
+  invalid={isInvalid}
+  {required}
+  {disabled}
+  {readOnly}
+  {name}
+>
+  {#if label}
+    <ArkPinInput.Label class="field__label">
+      {label}
+      {#if required}<span class="field__required" aria-hidden="true"></span>{/if}
+    </ArkPinInput.Label>
+  {/if}
+  <ArkPinInput.Control class="pin-input__control">
+    {#each cellIndexes as index (index)}
+      <ArkPinInput.Input {index} class="pin-input__cell" />
+    {/each}
+  </ArkPinInput.Control>
+  {#if helperText && !isInvalid}
+    <span class="field__description">{helperText}</span>
+  {/if}
+  {#if isInvalid && errorMessage}
+    <FieldError message={errorMessage} />
+  {/if}
+  <ArkPinInput.HiddenInput />
+</ArkPinInput.Root>

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

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

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

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

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

@@ -0,0 +1,52 @@
+export interface PinInputProps {
+    /** Accessible label text rendered above the cells. */
+    label?: string;
+    /** Helper text rendered below the cells. Hidden when an error is shown. */
+    helperText?: string;
+    /**
+     * Error state. Pass a string to show an error message.
+     * Pass `true` to mark the field invalid without a message.
+     */
+    error?: string | boolean;
+    /** Number of cells. Defaults to 4. */
+    length?: number;
+    /** Size variant. Defaults to 'md'. */
+    size?: "sm" | "md" | "lg";
+    /** Visual treatment of each cell. Defaults to 'default'. */
+    variant?: "default" | "underline";
+    /**
+     * Controlled value, one character per cell. Characters beyond `length` are
+     * ignored; a shorter string leaves the remaining cells empty.
+     * Bindable: `bind:value`.
+     */
+    value?: string;
+    /** Initial value for the uncontrolled case. */
+    defaultValue?: string;
+    /** Called on every keystroke with the concatenated value. */
+    onValueChange?: (value: string) => void;
+    /** Called once every cell is filled. */
+    onValueComplete?: (value: string) => void;
+    /** Which characters each cell accepts. Defaults to 'numeric'. */
+    type?: "numeric" | "alphanumeric" | "alphabetic";
+    /** Renders entered characters as dots, like a password field. Defaults to false. */
+    mask?: boolean;
+    /**
+     * Marks the cells as a one-time-code field so browsers and password managers
+     * offer to autofill an SMS code. Defaults to false.
+     */
+    otp?: boolean;
+    /** Placeholder character shown in each empty cell. Defaults to '○'. */
+    placeholder?: string;
+    /** Blurs the last cell once the value is complete. Defaults to false. */
+    blurOnComplete?: boolean;
+    /** Marks the field required and shows the required indicator. */
+    required?: boolean;
+    /** Disables every cell. */
+    disabled?: boolean;
+    /** Makes the value read-only while keeping it focusable. */
+    readOnly?: boolean;
+    /** Form field name for the hidden input. */
+    name?: string;
+    class?: string;
+}
+//# sourceMappingURL=PinInput.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PinInput.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/PinInput/PinInput.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2EAA2E;IAC3E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sCAAsC;IACtC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,4DAA4D;IAC5D,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,wCAAwC;IACxC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,iEAAiE;IACjE,IAAI,CAAC,EAAE,SAAS,GAAG,cAAc,GAAG,YAAY,CAAC;IACjD,oFAAoF;IACpF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,uEAAuE;IACvE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yEAAyE;IACzE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/PinInput/PinInput.types.js

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

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

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

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

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

package/dist/components/PinInput/index.js

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

package/dist/components/Popover/Popover.svelte

@@ -0,0 +1,31 @@
+<!-- Popover root — controls open state. Wrap a trigger and content. -->
+<script lang="ts">
+  import { Popover as ArkPopover } from "@ark-ui/svelte";
+  import { providePositioning } from "./positioning.svelte.js";
+  import type { PopoverProps } from "./Popover.types.js";
+  import "@ui-organized/core/components/Popover/Popover.css";
+
+  let {
+    open = $bindable(),
+    defaultOpen,
+    onOpenChange,
+    modal,
+    children,
+  }: PopoverProps = $props();
+
+  // The Content writes its side/align into this during its own initialisation.
+  const positioning = providePositioning({ placement: "bottom", gutter: 8 });
+</script>
+
+<ArkPopover.Root
+  bind:open
+  {defaultOpen}
+  onOpenChange={(details) => {
+    open = details.open;
+    onOpenChange?.(details.open);
+  }}
+  {modal}
+  positioning={positioning.read()}
+>
+  {@render children?.()}
+</ArkPopover.Root>

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

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

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

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

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

@@ -0,0 +1,59 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes, HTMLButtonAttributes } from "svelte/elements";
+import type { ArkForwardable } from "../../types.js";
+export type PopoverSide = "top" | "right" | "bottom" | "left";
+export type PopoverAlign = "start" | "center" | "end";
+/**
+ * Props handed to an `asChild` snippet, as a function to spread at the use site.
+ *
+ * Mirrors Ark's own `PropsFn`, which it does not re-export from its entry point.
+ * Declaring it structurally keeps the snippet signature assignable to Ark's
+ * while leaving this package's public types free of Ark internals.
+ */
+export type PopoverPropsFn = (props?: HTMLButtonAttributes) => HTMLAttributes<HTMLElement>;
+export interface PopoverProps {
+    /** 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. */
+    modal?: boolean;
+    children?: Snippet;
+}
+export interface PopoverTriggerProps extends ArkForwardable<Omit<HTMLButtonAttributes, "class" | "value">> {
+    class?: string;
+    children?: Snippet;
+    /** Project the trigger onto a custom element instead of rendering a button. */
+    asChild?: Snippet<[PopoverPropsFn]>;
+}
+export interface PopoverCloseProps extends ArkForwardable<Omit<HTMLButtonAttributes, "class" | "value">> {
+    class?: string;
+    children?: Snippet;
+    /** Project the close control onto a custom element. */
+    asChild?: Snippet<[PopoverPropsFn]>;
+}
+export interface PopoverContentProps extends ArkForwardable<Omit<HTMLAttributes<HTMLDivElement>, "class">> {
+    /** Side of the trigger to position against. Defaults to 'bottom'. */
+    side?: PopoverSide;
+    /** Alignment along the chosen side. Defaults to 'center'. */
+    align?: PopoverAlign;
+    /** Gap between trigger and popup, in px. Defaults to 8. */
+    sideOffset?: number;
+    /** Offset along the alignment axis, in px. */
+    alignOffset?: number;
+    /** Portal container. Defaults to document.body. */
+    container?: HTMLElement | null;
+    class?: string;
+    children?: Snippet;
+}
+export interface PopoverTitleProps extends ArkForwardable<Omit<HTMLAttributes<HTMLHeadingElement>, "class">> {
+    class?: string;
+    children?: Snippet;
+}
+export interface PopoverDescriptionProps extends ArkForwardable<Omit<HTMLAttributes<HTMLParagraphElement>, "class">> {
+    class?: string;
+    children?: Snippet;
+}
+//# sourceMappingURL=Popover.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Popover/Popover.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,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC9D,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEtD;;;;;;GAMG;AACH,MAAM,MAAM,cAAc,GAAG,CAAC,KAAK,CAAC,EAAE,oBAAoB,KAAK,cAAc,CAAC,WAAW,CAAC,CAAC;AAE3F,MAAM,WAAW,YAAY;IAC3B,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,2DAA2D;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,mBACf,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,cAAc,CAAC,CAAC,CAAC;CACrC;AAED,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,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC;CACrC;AAED,MAAM,WAAW,mBACf,SAAQ,cAAc,CAAC,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC;IACrE,qEAAqE;IACrE,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,2DAA2D;IAC3D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,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,iBACf,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,uBACf,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"}

package/dist/components/Popover/Popover.types.js

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

package/dist/components/Popover/PopoverClose.svelte

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

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

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