@iris-ui-kit/vue 0.1.0

package/dist/layouts.d.ts

@@ -0,0 +1,406 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+
+/**
+ * Two-column layout with a collapsible sidebar.
+ *
+ * Slots:
+ *   - `sidebar` — content rendered in the sidebar (kept mounted across collapses).
+ *   - `default` — the main content area.
+ *
+ * Use `:collapsed` for controlled mode or `:default-collapsed` for the
+ * uncontrolled initial state. When collapsed, the sidebar shrinks to
+ * `:collapsed-width` so icon-only navigation still fits.
+ */
+declare const IrisSidebarLayout: vue.DefineComponent<vue.ExtractPropTypes<{
+    collapsed: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultCollapsed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Sidebar width when expanded (px or CSS length). */
+    width: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    /** Sidebar width when collapsed. */
+    collapsedWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    /** Sidebar position. */
+    side: {
+        type: () => "left" | "right";
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    'update:collapsed': (_value: boolean) => true;
+}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    collapsed: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultCollapsed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Sidebar width when expanded (px or CSS length). */
+    width: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    /** Sidebar width when collapsed. */
+    collapsedWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    /** Sidebar position. */
+    side: {
+        type: () => "left" | "right";
+        default: string;
+    };
+}>> & Readonly<{
+    "onUpdate:collapsed"?: ((_value: boolean) => any) | undefined;
+}>, {
+    collapsed: boolean;
+    defaultCollapsed: boolean;
+    width: string | number;
+    collapsedWidth: string | number;
+    side: "left" | "right";
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Two-region vertical layout: a sticky header on top, scrollable main below.
+ *
+ * Slots:
+ *   - `header` — fixed at top.
+ *   - `footer` — optional fixed at bottom.
+ *   - `default` — scrollable main region.
+ */
+declare const IrisHeaderLayout: vue.DefineComponent<vue.ExtractPropTypes<{
+    /** Header height (px or CSS length). Default `'auto'`. */
+    headerHeight: {
+        type: PropType<number | string>;
+        default: string;
+    };
+    /** Footer height (px or CSS length). Default `'auto'`. */
+    footerHeight: {
+        type: PropType<number | string>;
+        default: string;
+    };
+    /** When true, header sticks via `position: sticky` instead of static. */
+    sticky: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /** Header height (px or CSS length). Default `'auto'`. */
+    headerHeight: {
+        type: PropType<number | string>;
+        default: string;
+    };
+    /** Footer height (px or CSS length). Default `'auto'`. */
+    footerHeight: {
+        type: PropType<number | string>;
+        default: string;
+    };
+    /** When true, header sticks via `position: sticky` instead of static. */
+    sticky: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    headerHeight: string | number;
+    footerHeight: string | number;
+    sticky: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * 12-column responsive grid for dashboard composition. Each child should be
+ * an `IrisDashboardCard` (or any element with `grid-column: span N`).
+ *
+ * Children control their span via inline `style="grid-column: span N"` or
+ * by wrapping with `IrisDashboardCard` whose `col-span` / `row-span` props
+ * compile to the same CSS.
+ */
+declare const IrisDashboardGrid: vue.DefineComponent<vue.ExtractPropTypes<{
+    columns: {
+        type: NumberConstructor;
+        default: number;
+    };
+    gap: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    /** Minimum column width via `grid-template-columns: repeat(auto-fill, minmax(...))`. */
+    minColWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    columns: {
+        type: NumberConstructor;
+        default: number;
+    };
+    gap: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    /** Minimum column width via `grid-template-columns: repeat(auto-fill, minmax(...))`. */
+    minColWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    gap: string | number;
+    columns: number;
+    minColWidth: string | number;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+/**
+ * A single grid cell — wraps content in a styled card with optional span
+ * controls. `col-span` accepts a number (column count) or `'full'` to fill
+ * the entire row.
+ */
+declare const IrisDashboardCard: vue.DefineComponent<vue.ExtractPropTypes<{
+    colSpan: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    rowSpan: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Show a styled card surface (background + border). Default `true`. */
+    surface: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    colSpan: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    rowSpan: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Show a styled card surface (background + border). Default `true`. */
+    surface: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    colSpan: string | number;
+    rowSpan: number;
+    surface: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+type IrisStackDirection = 'row' | 'column';
+type IrisStackAlign = 'start' | 'center' | 'end' | 'stretch';
+type IrisStackJustify = 'start' | 'center' | 'end' | 'between' | 'around';
+/**
+ * Flex container with token-driven spacing. The lightest possible layout
+ * primitive — most pages need a horizontal or vertical stack and this saves
+ * hand-writing `display: flex` everywhere.
+ *
+ * Use `direction`/`spacing`/`align`/`justify`/`wrap` to configure; children
+ * are arranged in document order with `gap: <spacing>`.
+ */
+declare const IrisStack: vue.DefineComponent<vue.ExtractPropTypes<{
+    direction: {
+        type: PropType<IrisStackDirection>;
+        default: string;
+    };
+    spacing: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    align: {
+        type: PropType<IrisStackAlign>;
+        default: string;
+    };
+    justify: {
+        type: PropType<IrisStackJustify>;
+        default: string;
+    };
+    wrap: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** When true, renders as an inline-flex container. */
+    inline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    direction: {
+        type: PropType<IrisStackDirection>;
+        default: string;
+    };
+    spacing: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    align: {
+        type: PropType<IrisStackAlign>;
+        default: string;
+    };
+    justify: {
+        type: PropType<IrisStackJustify>;
+        default: string;
+    };
+    wrap: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** When true, renders as an inline-flex container. */
+    inline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    spacing: string | number;
+    inline: boolean;
+    wrap: boolean;
+    justify: IrisStackJustify;
+    direction: IrisStackDirection;
+    align: IrisStackAlign;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+type IrisContainerMaxWidth = 'sm' | 'md' | 'lg' | 'xl' | 'full' | string;
+/**
+ * Centered max-width wrapper. Use to bound content width on large screens
+ * without rewriting flex/grid plumbing.
+ *
+ * `maxWidth='lg'` (≈1024px) is the most common default for marketing /
+ * docs / app pages.
+ */
+declare const IrisContainer: vue.DefineComponent<vue.ExtractPropTypes<{
+    maxWidth: {
+        type: PropType<IrisContainerMaxWidth>;
+        default: string;
+    };
+    padding: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    center: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    maxWidth: {
+        type: PropType<IrisContainerMaxWidth>;
+        default: string;
+    };
+    padding: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    center: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    center: boolean;
+    padding: string | number;
+    maxWidth: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+type IrisGridColumns = number | 'auto-fit' | 'auto-fill' | string;
+/**
+ * Two-dimensional grid layout primitive. Three column modes:
+ *
+ *   - **Fixed integer** — `columns={3}` → three equal-width columns.
+ *   - **Responsive auto-fit** — `columns="auto-fit"` + `minColWidth` → fluid
+ *     grid where columns add/remove with container width. Most common.
+ *   - **Raw CSS** — pass any `grid-template-columns` string.
+ *
+ * Spacing accepts token shorthand (`sm` / `md` / `lg`), numeric px, or any
+ * CSS length string. `gap` is a shortcut for both row + column gap.
+ */
+declare const IrisGrid: vue.DefineComponent<vue.ExtractPropTypes<{
+    columns: {
+        type: PropType<IrisGridColumns>;
+        default: string;
+    };
+    /** Min width per column for `auto-fit` / `auto-fill`. */
+    minColWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Row gap (token / px / CSS). */
+    rowGap: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    /** Column gap (token / px / CSS). */
+    columnGap: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    /** Shorthand for both row + column gap. Overridden if rowGap/columnGap given. */
+    gap: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    inline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    columns: {
+        type: PropType<IrisGridColumns>;
+        default: string;
+    };
+    /** Min width per column for `auto-fit` / `auto-fill`. */
+    minColWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Row gap (token / px / CSS). */
+    rowGap: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    /** Column gap (token / px / CSS). */
+    columnGap: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    /** Shorthand for both row + column gap. Overridden if rowGap/columnGap given. */
+    gap: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    inline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    gap: string | number;
+    inline: boolean;
+    columns: IrisGridColumns;
+    minColWidth: string;
+    rowGap: string | number;
+    columnGap: string | number;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { IrisContainer, type IrisContainerMaxWidth, IrisDashboardCard, IrisDashboardGrid, IrisGrid, type IrisGridColumns, IrisHeaderLayout, IrisSidebarLayout, IrisStack, type IrisStackAlign, type IrisStackDirection, type IrisStackJustify };

package/dist/layouts.js

@@ -0,0 +1,5 @@
+export { IrisGrid } from './chunk-WL67XCH5.js';
+export { IrisContainer, IrisDashboardCard, IrisDashboardGrid, IrisStack } from './chunk-3R3QDLJC.js';
+export { IrisHeaderLayout, IrisSidebarLayout } from './chunk-I6D5VXQK.js';
+//# sourceMappingURL=layouts.js.map
+//# sourceMappingURL=layouts.js.map

package/dist/layouts.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"layouts.js"}

package/dist/machine.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+var vue = require('vue');
+
+// src/machine/useMachine.ts
+function useMachine(machine) {
+  const state = vue.ref(machine.store.getState());
+  const unsubscribe = machine.store.subscribe((next) => {
+    state.value = next;
+  });
+  vue.onBeforeUnmount(() => {
+    unsubscribe();
+  });
+  return { state, send: machine.send };
+}
+
+exports.useMachine = useMachine;
+//# sourceMappingURL=machine.cjs.map
+//# sourceMappingURL=machine.cjs.map

package/dist/machine.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/machine/useMachine.ts"],"names":["ref","onBeforeUnmount"],"mappings":";;;;;AAYO,SAAS,WACd,OAAA,EAIA;AACA,EAAA,MAAM,KAAA,GAAQA,OAAA,CAAI,OAAA,CAAQ,KAAA,CAAM,UAAU,CAAA;AAC1C,EAAA,MAAM,WAAA,GAAc,OAAA,CAAQ,KAAA,CAAM,SAAA,CAAU,CAAC,IAAA,KAAS;AACpD,IAAA,KAAA,CAAM,KAAA,GAAQ,IAAA;AAAA,EAChB,CAAC,CAAA;AACD,EAAAC,mBAAA,CAAgB,MAAM;AACpB,IAAA,WAAA,EAAY;AAAA,EACd,CAAC,CAAA;AACD,EAAA,OAAO,EAAE,KAAA,EAAO,IAAA,EAAM,OAAA,CAAQ,IAAA,EAAK;AACrC","file":"machine.cjs","sourcesContent":["import { onBeforeUnmount, ref, type Ref } from 'vue'\nimport type { Machine, MachineEvent, MachineState } from '@iris-ui-kit/core'\n\n/**\n * Bridge a framework-agnostic `Machine` into Vue reactivity.\n *\n * Returns a reactive ref of the current `{ value, context }` state and a\n * stable `send` function. Subscription is created eagerly and cleaned up on\n * unmount, so this hook is safe to call from any component's `setup()`.\n *\n * No primitive consumes this yet (Phase 0 ships the bridge for Phase 1).\n */\nexport function useMachine<TState extends string, TContext, TEvent extends MachineEvent>(\n  machine: Machine<TState, TContext, TEvent>,\n): {\n  state: Ref<MachineState<TState, TContext>>\n  send: (event: TEvent) => void\n} {\n  const state = ref(machine.store.getState()) as Ref<MachineState<TState, TContext>>\n  const unsubscribe = machine.store.subscribe((next) => {\n    state.value = next\n  })\n  onBeforeUnmount(() => {\n    unsubscribe()\n  })\n  return { state, send: machine.send }\n}\n"]}

package/dist/machine.d.cts

@@ -0,0 +1,18 @@
+import { Ref } from 'vue';
+import { MachineEvent, Machine, MachineState } from '@iris-ui-kit/core';
+
+/**
+ * Bridge a framework-agnostic `Machine` into Vue reactivity.
+ *
+ * Returns a reactive ref of the current `{ value, context }` state and a
+ * stable `send` function. Subscription is created eagerly and cleaned up on
+ * unmount, so this hook is safe to call from any component's `setup()`.
+ *
+ * No primitive consumes this yet (Phase 0 ships the bridge for Phase 1).
+ */
+declare function useMachine<TState extends string, TContext, TEvent extends MachineEvent>(machine: Machine<TState, TContext, TEvent>): {
+    state: Ref<MachineState<TState, TContext>>;
+    send: (event: TEvent) => void;
+};
+
+export { useMachine };

package/dist/machine.d.ts

@@ -0,0 +1,18 @@
+import { Ref } from 'vue';
+import { MachineEvent, Machine, MachineState } from '@iris-ui-kit/core';
+
+/**
+ * Bridge a framework-agnostic `Machine` into Vue reactivity.
+ *
+ * Returns a reactive ref of the current `{ value, context }` state and a
+ * stable `send` function. Subscription is created eagerly and cleaned up on
+ * unmount, so this hook is safe to call from any component's `setup()`.
+ *
+ * No primitive consumes this yet (Phase 0 ships the bridge for Phase 1).
+ */
+declare function useMachine<TState extends string, TContext, TEvent extends MachineEvent>(machine: Machine<TState, TContext, TEvent>): {
+    state: Ref<MachineState<TState, TContext>>;
+    send: (event: TEvent) => void;
+};
+
+export { useMachine };

package/dist/machine.js

@@ -0,0 +1,4 @@
+import './chunk-4FQ7XF52.js';
+export { useMachine } from './chunk-TQB5LVOH.js';
+//# sourceMappingURL=machine.js.map
+//# sourceMappingURL=machine.js.map

package/dist/machine.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"machine.js"}

package/dist/modal-utils.cjs

@@ -0,0 +1,170 @@
+'use strict';
+
+var vue = require('vue');
+
+// src/primitives/modal-utils/useFocusTrap.ts
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "area[href]",
+  "button:not([disabled])",
+  'input:not([disabled]):not([type="hidden"])',
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])',
+  '[contenteditable="true"]',
+  "audio[controls]",
+  "video[controls]",
+  "iframe",
+  "object",
+  "embed"
+].join(",");
+function getFocusable(root) {
+  return Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter(
+    (el) => !el.hasAttribute("disabled") && el.tabIndex !== -1
+  );
+}
+function useFocusTrap(options) {
+  let previouslyFocused = null;
+  const onKeyDown = (event) => {
+    if (!options.active.value || event.key !== "Tab") return;
+    const root = options.container.value;
+    if (!root) return;
+    const focusables = getFocusable(root);
+    if (focusables.length === 0) {
+      event.preventDefault();
+      root.focus();
+      return;
+    }
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    const active = document.activeElement;
+    if (event.shiftKey) {
+      if (active === first || !root.contains(active)) {
+        event.preventDefault();
+        last.focus();
+      }
+    } else {
+      if (active === last || !root.contains(active)) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+  };
+  const activate = () => {
+    if (typeof document === "undefined") return;
+    previouslyFocused = document.activeElement ?? null;
+    document.addEventListener("keydown", onKeyDown);
+    if (options.initialFocus !== false) {
+      requestAnimationFrame(() => {
+        const root = options.container.value;
+        if (!root) return;
+        const focusables = getFocusable(root);
+        (focusables[0] ?? root).focus();
+      });
+    }
+  };
+  const deactivate = () => {
+    if (typeof document === "undefined") return;
+    document.removeEventListener("keydown", onKeyDown);
+    const restore = options.returnFocusTo?.value ?? previouslyFocused;
+    requestAnimationFrame(() => {
+      if (restore && restore.isConnected) restore.focus?.();
+    });
+    previouslyFocused = null;
+  };
+  vue.watch(
+    options.active,
+    (active, wasActive) => {
+      if (active && !wasActive) activate();
+      else if (!active && wasActive) deactivate();
+    },
+    { immediate: true, flush: "post" }
+  );
+  vue.onScopeDispose(() => {
+    if (typeof document !== "undefined") {
+      document.removeEventListener("keydown", onKeyDown);
+    }
+  });
+}
+var lockCount = 0;
+var savedOverflow = null;
+var savedPaddingRight = null;
+var appliedOverflow = null;
+var appliedPaddingRight = null;
+function lock() {
+  if (typeof document === "undefined") return;
+  lockCount += 1;
+  if (lockCount > 1) return;
+  const body = document.body;
+  const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+  savedOverflow = body.style.overflow;
+  savedPaddingRight = body.style.paddingRight;
+  body.style.overflow = "hidden";
+  appliedOverflow = "hidden";
+  if (scrollbarWidth > 0) {
+    const currentPadding = parseFloat(getComputedStyle(body).paddingRight || "0");
+    appliedPaddingRight = `${currentPadding + scrollbarWidth}px`;
+    body.style.paddingRight = appliedPaddingRight;
+  } else {
+    appliedPaddingRight = null;
+  }
+}
+function unlock() {
+  if (typeof document === "undefined") return;
+  lockCount = Math.max(0, lockCount - 1);
+  if (lockCount > 0) return;
+  const body = document.body;
+  if (body.style.overflow === appliedOverflow) {
+    body.style.overflow = savedOverflow ?? "";
+  }
+  if (appliedPaddingRight !== null && body.style.paddingRight === appliedPaddingRight) {
+    body.style.paddingRight = savedPaddingRight ?? "";
+  }
+  savedOverflow = null;
+  savedPaddingRight = null;
+  appliedOverflow = null;
+  appliedPaddingRight = null;
+}
+function useBodyScrollLock(active) {
+  let isLockedByThis = false;
+  vue.watch(
+    active,
+    (value) => {
+      if (value && !isLockedByThis) {
+        lock();
+        isLockedByThis = true;
+      } else if (!value && isLockedByThis) {
+        unlock();
+        isLockedByThis = false;
+      }
+    },
+    { immediate: true, flush: "post" }
+  );
+  vue.onScopeDispose(() => {
+    if (isLockedByThis) {
+      unlock();
+      isLockedByThis = false;
+    }
+  });
+}
+function __getBodyScrollLockCount() {
+  return lockCount;
+}
+function __resetBodyScrollLock() {
+  lockCount = 0;
+  savedOverflow = null;
+  savedPaddingRight = null;
+  appliedOverflow = null;
+  appliedPaddingRight = null;
+  if (typeof document !== "undefined") {
+    document.body.style.overflow = "";
+    document.body.style.paddingRight = "";
+  }
+}
+
+exports.__getBodyScrollLockCount = __getBodyScrollLockCount;
+exports.__resetBodyScrollLock = __resetBodyScrollLock;
+exports.useBodyScrollLock = useBodyScrollLock;
+exports.useFocusTrap = useFocusTrap;
+//# sourceMappingURL=modal-utils.cjs.map
+//# sourceMappingURL=modal-utils.cjs.map

package/dist/modal-utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/primitives/modal-utils/useFocusTrap.ts","../src/primitives/modal-utils/useBodyScrollLock.ts"],"names":["watch","onScopeDispose"],"mappings":";;;;;AAEA,IAAM,kBAAA,GAAqB;AAAA,EACzB,SAAA;AAAA,EACA,YAAA;AAAA,EACA,wBAAA;AAAA,EACA,4CAAA;AAAA,EACA,wBAAA;AAAA,EACA,0BAAA;AAAA,EACA,iCAAA;AAAA,EACA,0BAAA;AAAA,EACA,iBAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,CAAE,KAAK,GAAG,CAAA;AAEV,SAAS,aAAa,IAAA,EAAkC;AACtD,EAAA,OAAO,MAAM,IAAA,CAAK,IAAA,CAAK,gBAAA,CAA8B,kBAAkB,CAAC,CAAA,CAAE,MAAA;AAAA,IACxE,CAAC,OAAO,CAAC,EAAA,CAAG,aAAa,UAAU,CAAA,IAAK,GAAG,QAAA,KAAa;AAAA,GAC1D;AACF;AA6BO,SAAS,aAAa,OAAA,EAAoC;AAC/D,EAAA,IAAI,iBAAA,GAAwC,IAAA;AAE5C,EAAA,MAAM,SAAA,GAAY,CAAC,KAAA,KAAyB;AAC1C,IAAA,IAAI,CAAC,OAAA,CAAQ,MAAA,CAAO,KAAA,IAAS,KAAA,CAAM,QAAQ,KAAA,EAAO;AAClD,IAAA,MAAM,IAAA,GAAO,QAAQ,SAAA,CAAU,KAAA;AAC/B,IAAA,IAAI,CAAC,IAAA,EAAM;AACX,IAAA,MAAM,UAAA,GAAa,aAAa,IAAI,CAAA;AACpC,IAAA,IAAI,UAAA,CAAW,WAAW,CAAA,EAAG;AAC3B,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,IAAA,CAAK,KAAA,EAAM;AACX,MAAA;AAAA,IACF;AACA,IAAA,MAAM,KAAA,GAAQ,WAAW,CAAC,CAAA;AAC1B,IAAA,MAAM,IAAA,GAAO,UAAA,CAAW,UAAA,CAAW,MAAA,GAAS,CAAC,CAAA;AAC7C,IAAA,MAAM,SAAS,QAAA,CAAS,aAAA;AAExB,IAAA,IAAI,MAAM,QAAA,EAAU;AAClB,MAAA,IAAI,WAAW,KAAA,IAAS,CAAC,IAAA,CAAK,QAAA,CAAS,MAAM,CAAA,EAAG;AAC9C,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,IAAA,CAAK,KAAA,EAAM;AAAA,MACb;AAAA,IACF,CAAA,MAAO;AACL,MAAA,IAAI,WAAW,IAAA,IAAQ,CAAC,IAAA,CAAK,QAAA,CAAS,MAAM,CAAA,EAAG;AAC7C,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,KAAA,CAAM,KAAA,EAAM;AAAA,MACd;AAAA,IACF;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,WAAW,MAAM;AACrB,IAAA,IAAI,OAAO,aAAa,WAAA,EAAa;AACrC,IAAA,iBAAA,GAAqB,SAAS,aAAA,IAAwC,IAAA;AACtE,IAAA,QAAA,CAAS,gBAAA,CAAiB,WAAW,SAAS,CAAA;AAC9C,IAAA,IAAI,OAAA,CAAQ,iBAAiB,KAAA,EAAO;AAClC,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,MAAM,IAAA,GAAO,QAAQ,SAAA,CAAU,KAAA;AAC/B,QAAA,IAAI,CAAC,IAAA,EAAM;AACX,QAAA,MAAM,UAAA,GAAa,aAAa,IAAI,CAAA;AACnC,QAAA,CAAC,UAAA,CAAW,CAAC,CAAA,IAAK,IAAA,EAAM,KAAA,EAAM;AAAA,MACjC,CAAC,CAAA;AAAA,IACH;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,aAAa,MAAM;AACvB,IAAA,IAAI,OAAO,aAAa,WAAA,EAAa;AACrC,IAAA,QAAA,CAAS,mBAAA,CAAoB,WAAW,SAAS,CAAA;AACjD,IAAA,MAAM,OAAA,GAAU,OAAA,CAAQ,aAAA,EAAe,KAAA,IAAS,iBAAA;AAChD,IAAA,qBAAA,CAAsB,MAAM;AAI1B,MAAA,IAAI,OAAA,IAAW,OAAA,CAAQ,WAAA,EAAa,OAAA,CAAQ,KAAA,IAAQ;AAAA,IACtD,CAAC,CAAA;AACD,IAAA,iBAAA,GAAoB,IAAA;AAAA,EACtB,CAAA;AAEA,EAAAA,SAAA;AAAA,IACE,OAAA,CAAQ,MAAA;AAAA,IACR,CAAC,QAAQ,SAAA,KAAc;AACrB,MAAA,IAAI,MAAA,IAAU,CAAC,SAAA,EAAW,QAAA,EAAS;AAAA,WAAA,IAC1B,CAAC,MAAA,IAAU,SAAA,EAAW,UAAA,EAAW;AAAA,IAC5C,CAAA;AAAA,IACA,EAAE,SAAA,EAAW,IAAA,EAAM,KAAA,EAAO,MAAA;AAAO,GACnC;AAEA,EAAAC,kBAAA,CAAe,MAAM;AACnB,IAAA,IAAI,OAAO,aAAa,WAAA,EAAa;AACnC,MAAA,QAAA,CAAS,mBAAA,CAAoB,WAAW,SAAS,CAAA;AAAA,IACnD;AAAA,EACF,CAAC,CAAA;AACH;ACxHA,IAAI,SAAA,GAAY,CAAA;AAChB,IAAI,aAAA,GAA+B,IAAA;AACnC,IAAI,iBAAA,GAAmC,IAAA;AAGvC,IAAI,eAAA,GAAiC,IAAA;AACrC,IAAI,mBAAA,GAAqC,IAAA;AAEzC,SAAS,IAAA,GAAO;AACd,EAAA,IAAI,OAAO,aAAa,WAAA,EAAa;AACrC,EAAA,SAAA,IAAa,CAAA;AACb,EAAA,IAAI,YAAY,CAAA,EAAG;AACnB,EAAA,MAAM,OAAO,QAAA,CAAS,IAAA;AACtB,EAAA,MAAM,cAAA,GAAiB,MAAA,CAAO,UAAA,GAAa,QAAA,CAAS,eAAA,CAAgB,WAAA;AACpE,EAAA,aAAA,GAAgB,KAAK,KAAA,CAAM,QAAA;AAC3B,EAAA,iBAAA,GAAoB,KAAK,KAAA,CAAM,YAAA;AAC/B,EAAA,IAAA,CAAK,MAAM,QAAA,GAAW,QAAA;AACtB,EAAA,eAAA,GAAkB,QAAA;AAClB,EAAA,IAAI,iBAAiB,CAAA,EAAG;AACtB,IAAA,MAAM,iBAAiB,UAAA,CAAW,gBAAA,CAAiB,IAAI,CAAA,CAAE,gBAAgB,GAAG,CAAA;AAC5E,IAAA,mBAAA,GAAsB,CAAA,EAAG,iBAAiB,cAAc,CAAA,EAAA,CAAA;AACxD,IAAA,IAAA,CAAK,MAAM,YAAA,GAAe,mBAAA;AAAA,EAC5B,CAAA,MAAO;AACL,IAAA,mBAAA,GAAsB,IAAA;AAAA,EACxB;AACF;AAEA,SAAS,MAAA,GAAS;AAChB,EAAA,IAAI,OAAO,aAAa,WAAA,EAAa;AACrC,EAAA,SAAA,GAAY,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,SAAA,GAAY,CAAC,CAAA;AACrC,EAAA,IAAI,YAAY,CAAA,EAAG;AACnB,EAAA,MAAM,OAAO,QAAA,CAAS,IAAA;AAGtB,EAAA,IAAI,IAAA,CAAK,KAAA,CAAM,QAAA,KAAa,eAAA,EAAiB;AAC3C,IAAA,IAAA,CAAK,KAAA,CAAM,WAAW,aAAA,IAAiB,EAAA;AAAA,EACzC;AACA,EAAA,IAAI,mBAAA,KAAwB,IAAA,IAAQ,IAAA,CAAK,KAAA,CAAM,iBAAiB,mBAAA,EAAqB;AACnF,IAAA,IAAA,CAAK,KAAA,CAAM,eAAe,iBAAA,IAAqB,EAAA;AAAA,EACjD;AACA,EAAA,aAAA,GAAgB,IAAA;AAChB,EAAA,iBAAA,GAAoB,IAAA;AACpB,EAAA,eAAA,GAAkB,IAAA;AAClB,EAAA,mBAAA,GAAsB,IAAA;AACxB;AAQO,SAAS,kBAAkB,MAAA,EAA4B;AAC5D,EAAA,IAAI,cAAA,GAAiB,KAAA;AAErB,EAAAD,SAAAA;AAAA,IACE,MAAA;AAAA,IACA,CAAC,KAAA,KAAU;AACT,MAAA,IAAI,KAAA,IAAS,CAAC,cAAA,EAAgB;AAC5B,QAAA,IAAA,EAAK;AACL,QAAA,cAAA,GAAiB,IAAA;AAAA,MACnB,CAAA,MAAA,IAAW,CAAC,KAAA,IAAS,cAAA,EAAgB;AACnC,QAAA,MAAA,EAAO;AACP,QAAA,cAAA,GAAiB,KAAA;AAAA,MACnB;AAAA,IACF,CAAA;AAAA,IACA,EAAE,SAAA,EAAW,IAAA,EAAM,KAAA,EAAO,MAAA;AAAO,GACnC;AAEA,EAAAC,mBAAe,MAAM;AACnB,IAAA,IAAI,cAAA,EAAgB;AAClB,MAAA,MAAA,EAAO;AACP,MAAA,cAAA,GAAiB,KAAA;AAAA,IACnB;AAAA,EACF,CAAC,CAAA;AACH;AAGO,SAAS,wBAAA,GAAmC;AACjD,EAAA,OAAO,SAAA;AACT;AAGO,SAAS,qBAAA,GAA8B;AAC5C,EAAA,SAAA,GAAY,CAAA;AACZ,EAAA,aAAA,GAAgB,IAAA;AAChB,EAAA,iBAAA,GAAoB,IAAA;AACpB,EAAA,eAAA,GAAkB,IAAA;AAClB,EAAA,mBAAA,GAAsB,IAAA;AACtB,EAAA,IAAI,OAAO,aAAa,WAAA,EAAa;AACnC,IAAA,QAAA,CAAS,IAAA,CAAK,MAAM,QAAA,GAAW,EAAA;AAC/B,IAAA,QAAA,CAAS,IAAA,CAAK,MAAM,YAAA,GAAe,EAAA;AAAA,EACrC;AACF","file":"modal-utils.cjs","sourcesContent":["import { onScopeDispose, watch, type Ref } from 'vue'\n\nconst FOCUSABLE_SELECTOR = [\n  'a[href]',\n  'area[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=\"hidden\"])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n  '[contenteditable=\"true\"]',\n  'audio[controls]',\n  'video[controls]',\n  'iframe',\n  'object',\n  'embed',\n].join(',')\n\nfunction getFocusable(root: HTMLElement): HTMLElement[] {\n  return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(\n    (el) => !el.hasAttribute('disabled') && el.tabIndex !== -1,\n  )\n}\n\nexport interface UseFocusTrapOptions {\n  /** Element whose Tab key cycle is being trapped. */\n  container: Ref<HTMLElement | null>\n  /** Whether the trap is currently active. */\n  active: Ref<boolean>\n  /** Element to restore focus to when the trap deactivates. */\n  returnFocusTo?: Ref<HTMLElement | null | undefined>\n  /** Whether to focus the first focusable element on activation. Default `true`. */\n  initialFocus?: boolean\n}\n\n/**\n * Constrain Tab / Shift+Tab focus traversal to descendants of `container`.\n *\n * Behavior on activation:\n *   - Records the currently focused element.\n *   - If `initialFocus !== false`, focuses the first focusable descendant\n *     (or the container itself if there are none).\n *\n * Behavior while active:\n *   - Tab on the last focusable element wraps to the first; Shift+Tab on\n *     the first wraps to the last.\n *\n * Behavior on deactivation:\n *   - Restores focus to `returnFocusTo?.value` if provided, else to the\n *     element that was focused when the trap activated.\n */\nexport function useFocusTrap(options: UseFocusTrapOptions): void {\n  let previouslyFocused: HTMLElement | null = null\n\n  const onKeyDown = (event: KeyboardEvent) => {\n    if (!options.active.value || event.key !== 'Tab') return\n    const root = options.container.value\n    if (!root) return\n    const focusables = getFocusable(root)\n    if (focusables.length === 0) {\n      event.preventDefault()\n      root.focus()\n      return\n    }\n    const first = focusables[0]!\n    const last = focusables[focusables.length - 1]!\n    const active = document.activeElement as HTMLElement | null\n\n    if (event.shiftKey) {\n      if (active === first || !root.contains(active)) {\n        event.preventDefault()\n        last.focus()\n      }\n    } else {\n      if (active === last || !root.contains(active)) {\n        event.preventDefault()\n        first.focus()\n      }\n    }\n  }\n\n  const activate = () => {\n    if (typeof document === 'undefined') return\n    previouslyFocused = (document.activeElement as HTMLElement | null) ?? null\n    document.addEventListener('keydown', onKeyDown)\n    if (options.initialFocus !== false) {\n      requestAnimationFrame(() => {\n        const root = options.container.value\n        if (!root) return\n        const focusables = getFocusable(root)\n        ;(focusables[0] ?? root).focus()\n      })\n    }\n  }\n\n  const deactivate = () => {\n    if (typeof document === 'undefined') return\n    document.removeEventListener('keydown', onKeyDown)\n    const restore = options.returnFocusTo?.value ?? previouslyFocused\n    requestAnimationFrame(() => {\n      // The element that had focus when the trap opened may have been\n      // unmounted while it was open; focusing a detached node silently drops\n      // focus to <body>. Only restore if it is still in the document.\n      if (restore && restore.isConnected) restore.focus?.()\n    })\n    previouslyFocused = null\n  }\n\n  watch(\n    options.active,\n    (active, wasActive) => {\n      if (active && !wasActive) activate()\n      else if (!active && wasActive) deactivate()\n    },\n    { immediate: true, flush: 'post' },\n  )\n\n  onScopeDispose(() => {\n    if (typeof document !== 'undefined') {\n      document.removeEventListener('keydown', onKeyDown)\n    }\n  })\n}\n","import { onScopeDispose, watch, type Ref } from 'vue'\n\nlet lockCount = 0\nlet savedOverflow: string | null = null\nlet savedPaddingRight: string | null = null\n// What we actually wrote, so unlock can detect a host mutation made while\n// locked and avoid clobbering it.\nlet appliedOverflow: string | null = null\nlet appliedPaddingRight: string | null = null\n\nfunction lock() {\n  if (typeof document === 'undefined') return\n  lockCount += 1\n  if (lockCount > 1) return\n  const body = document.body\n  const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth\n  savedOverflow = body.style.overflow\n  savedPaddingRight = body.style.paddingRight\n  body.style.overflow = 'hidden'\n  appliedOverflow = 'hidden'\n  if (scrollbarWidth > 0) {\n    const currentPadding = parseFloat(getComputedStyle(body).paddingRight || '0')\n    appliedPaddingRight = `${currentPadding + scrollbarWidth}px`\n    body.style.paddingRight = appliedPaddingRight\n  } else {\n    appliedPaddingRight = null\n  }\n}\n\nfunction unlock() {\n  if (typeof document === 'undefined') return\n  lockCount = Math.max(0, lockCount - 1)\n  if (lockCount > 0) return\n  const body = document.body\n  // Only restore if our locked value is still in place; if a host changed body\n  // overflow / padding-right while locked, respect that rather than clobber it.\n  if (body.style.overflow === appliedOverflow) {\n    body.style.overflow = savedOverflow ?? ''\n  }\n  if (appliedPaddingRight !== null && body.style.paddingRight === appliedPaddingRight) {\n    body.style.paddingRight = savedPaddingRight ?? ''\n  }\n  savedOverflow = null\n  savedPaddingRight = null\n  appliedOverflow = null\n  appliedPaddingRight = null\n}\n\n/**\n * Lock the document body's scroll while `active` is true. Reference-counted\n * so multiple stacked Dialogs cooperate. Restores prior `overflow` and\n * `padding-right` (to compensate for the scrollbar gap) when the last lock\n * releases. SSR-safe.\n */\nexport function useBodyScrollLock(active: Ref<boolean>): void {\n  let isLockedByThis = false\n\n  watch(\n    active,\n    (value) => {\n      if (value && !isLockedByThis) {\n        lock()\n        isLockedByThis = true\n      } else if (!value && isLockedByThis) {\n        unlock()\n        isLockedByThis = false\n      }\n    },\n    { immediate: true, flush: 'post' },\n  )\n\n  onScopeDispose(() => {\n    if (isLockedByThis) {\n      unlock()\n      isLockedByThis = false\n    }\n  })\n}\n\n/** Test-only: read the current lock count. */\nexport function __getBodyScrollLockCount(): number {\n  return lockCount\n}\n\n/** Test-only: hard-reset the module-level lock state. */\nexport function __resetBodyScrollLock(): void {\n  lockCount = 0\n  savedOverflow = null\n  savedPaddingRight = null\n  appliedOverflow = null\n  appliedPaddingRight = null\n  if (typeof document !== 'undefined') {\n    document.body.style.overflow = ''\n    document.body.style.paddingRight = ''\n  }\n}\n"]}