@iris-ui-kit/react 0.1.0

package/dist/modal-utils.cjs

@@ -0,0 +1,168 @@
+'use client'
+'use strict';
+
+var React2 = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+
+// src/modal-utils/useBodyScrollLock.ts
+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) {
+  React2__namespace.useEffect(() => {
+    if (!active) return;
+    lock();
+    return () => {
+      unlock();
+    };
+  }, [active]);
+}
+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 = "";
+  }
+}
+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) {
+  const { container, active, returnFocusTo, initialFocus = true } = options;
+  const previouslyFocusedRef = React2__namespace.useRef(null);
+  React2__namespace.useEffect(() => {
+    if (!active) return;
+    if (typeof document === "undefined") return;
+    previouslyFocusedRef.current = document.activeElement ?? null;
+    const onKeyDown = (event) => {
+      if (event.key !== "Tab") return;
+      const root = container.current;
+      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 active2 = document.activeElement;
+      if (event.shiftKey) {
+        if (active2 === first || !root.contains(active2)) {
+          event.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (active2 === last || !root.contains(active2)) {
+          event.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    let raf;
+    if (initialFocus) {
+      raf = requestAnimationFrame(() => {
+        const root = container.current;
+        if (!root) return;
+        const focusables = getFocusable(root);
+        (focusables[0] ?? root).focus();
+      });
+    }
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      if (raf !== void 0) cancelAnimationFrame(raf);
+      const target = returnFocusTo?.current ?? previouslyFocusedRef.current;
+      requestAnimationFrame(() => {
+        if (target && target.isConnected) target.focus?.();
+      });
+      previouslyFocusedRef.current = null;
+    };
+  }, [active, container, returnFocusTo, initialFocus]);
+}
+
+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/modal-utils/useBodyScrollLock.ts","../src/modal-utils/useFocusTrap.ts"],"names":["React","React2","active"],"mappings":"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","file":"modal-utils.cjs","sourcesContent":["import * as React from 'react'\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(): void {\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(): void {\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 overlays 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: boolean): void {\n  React.useEffect(() => {\n    if (!active) return\n    lock()\n    return () => {\n      unlock()\n    }\n  }, [active])\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","import * as React from 'react'\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: React.RefObject<HTMLElement | null>\n  /** Whether the trap is currently active. */\n  active: boolean\n  /** Element to restore focus to when the trap deactivates. */\n  returnFocusTo?: React.RefObject<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?.current` if provided, else to the\n *     element that was focused when the trap activated.\n */\nexport function useFocusTrap(options: UseFocusTrapOptions): void {\n  const { container, active, returnFocusTo, initialFocus = true } = options\n  const previouslyFocusedRef = React.useRef<HTMLElement | null>(null)\n\n  React.useEffect(() => {\n    if (!active) return\n    if (typeof document === 'undefined') return\n\n    previouslyFocusedRef.current = (document.activeElement as HTMLElement | null) ?? null\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== 'Tab') return\n      const root = container.current\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    document.addEventListener('keydown', onKeyDown)\n\n    let raf: number | undefined\n    if (initialFocus) {\n      raf = requestAnimationFrame(() => {\n        const root = container.current\n        if (!root) return\n        const focusables = getFocusable(root)\n        ;(focusables[0] ?? root).focus()\n      })\n    }\n\n    return () => {\n      document.removeEventListener('keydown', onKeyDown)\n      if (raf !== undefined) cancelAnimationFrame(raf)\n      const target = returnFocusTo?.current ?? previouslyFocusedRef.current\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 (target && target.isConnected) target.focus?.()\n      })\n      previouslyFocusedRef.current = null\n    }\n  }, [active, container, returnFocusTo, initialFocus])\n}\n"]}

package/dist/modal-utils.d.cts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+
+/**
+ * Lock the document body's scroll while `active` is true. Reference-counted
+ * so multiple stacked overlays cooperate. Restores prior `overflow` and
+ * `padding-right` (to compensate for the scrollbar gap) when the last lock
+ * releases. SSR-safe.
+ */
+declare function useBodyScrollLock(active: boolean): void;
+/** Test-only: read the current lock count. */
+declare function __getBodyScrollLockCount(): number;
+/** Test-only: hard-reset the module-level lock state. */
+declare function __resetBodyScrollLock(): void;
+
+interface UseFocusTrapOptions {
+    /** Element whose Tab key cycle is being trapped. */
+    container: React.RefObject<HTMLElement | null>;
+    /** Whether the trap is currently active. */
+    active: boolean;
+    /** Element to restore focus to when the trap deactivates. */
+    returnFocusTo?: React.RefObject<HTMLElement | null | undefined>;
+    /** Whether to focus the first focusable element on activation. Default `true`. */
+    initialFocus?: boolean;
+}
+/**
+ * Constrain Tab / Shift+Tab focus traversal to descendants of `container`.
+ *
+ * Behavior on activation:
+ *   - Records the currently focused element.
+ *   - If `initialFocus !== false`, focuses the first focusable descendant
+ *     (or the container itself if there are none).
+ *
+ * Behavior while active:
+ *   - Tab on the last focusable element wraps to the first; Shift+Tab on
+ *     the first wraps to the last.
+ *
+ * Behavior on deactivation:
+ *   - Restores focus to `returnFocusTo?.current` if provided, else to the
+ *     element that was focused when the trap activated.
+ */
+declare function useFocusTrap(options: UseFocusTrapOptions): void;
+
+export { type UseFocusTrapOptions, __getBodyScrollLockCount, __resetBodyScrollLock, useBodyScrollLock, useFocusTrap };

package/dist/modal-utils.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+
+/**
+ * Lock the document body's scroll while `active` is true. Reference-counted
+ * so multiple stacked overlays cooperate. Restores prior `overflow` and
+ * `padding-right` (to compensate for the scrollbar gap) when the last lock
+ * releases. SSR-safe.
+ */
+declare function useBodyScrollLock(active: boolean): void;
+/** Test-only: read the current lock count. */
+declare function __getBodyScrollLockCount(): number;
+/** Test-only: hard-reset the module-level lock state. */
+declare function __resetBodyScrollLock(): void;
+
+interface UseFocusTrapOptions {
+    /** Element whose Tab key cycle is being trapped. */
+    container: React.RefObject<HTMLElement | null>;
+    /** Whether the trap is currently active. */
+    active: boolean;
+    /** Element to restore focus to when the trap deactivates. */
+    returnFocusTo?: React.RefObject<HTMLElement | null | undefined>;
+    /** Whether to focus the first focusable element on activation. Default `true`. */
+    initialFocus?: boolean;
+}
+/**
+ * Constrain Tab / Shift+Tab focus traversal to descendants of `container`.
+ *
+ * Behavior on activation:
+ *   - Records the currently focused element.
+ *   - If `initialFocus !== false`, focuses the first focusable descendant
+ *     (or the container itself if there are none).
+ *
+ * Behavior while active:
+ *   - Tab on the last focusable element wraps to the first; Shift+Tab on
+ *     the first wraps to the last.
+ *
+ * Behavior on deactivation:
+ *   - Restores focus to `returnFocusTo?.current` if provided, else to the
+ *     element that was focused when the trap activated.
+ */
+declare function useFocusTrap(options: UseFocusTrapOptions): void;
+
+export { type UseFocusTrapOptions, __getBodyScrollLockCount, __resetBodyScrollLock, useBodyScrollLock, useFocusTrap };

package/dist/modal-utils.js

@@ -0,0 +1,4 @@
+'use client'
+export { __getBodyScrollLockCount, __resetBodyScrollLock, useBodyScrollLock, useFocusTrap } from './chunk-AUA5GBT6.js';
+//# sourceMappingURL=modal-utils.js.map
+//# sourceMappingURL=modal-utils.js.map

package/dist/modal-utils.js.map

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

package/dist/motion.cjs

@@ -0,0 +1,104 @@
+'use client'
+'use strict';
+
+var React = require('react');
+var core = require('@iris-ui-kit/core');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/motion/usePrefersReducedMotion.ts
+var QUERY = "(prefers-reduced-motion: reduce)";
+function read() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  return window.matchMedia(QUERY).matches;
+}
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = React__namespace.useState(read);
+  React__namespace.useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const mq = window.matchMedia(QUERY);
+    const onChange = () => setReduced(mq.matches);
+    onChange();
+    mq.addEventListener?.("change", onChange);
+    return () => mq.removeEventListener?.("change", onChange);
+  }, []);
+  return reduced;
+}
+
+// src/motion/styles.ts
+var __DATA_STATE_STYLE_ID = "iris-data-state-styles";
+var DATA_STATE_CLASS = "iris-data-state-enter";
+var CSS = `
+@keyframes iris-data-state-enter {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: none; }
+}
+.${DATA_STATE_CLASS} {
+  animation: iris-data-state-enter var(--iris-duration-md, 200ms) ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .${DATA_STATE_CLASS} { animation: none; }
+}
+`.trim();
+var installed = false;
+function installDataStateStyles() {
+  if (installed) return;
+  if (typeof document === "undefined") return;
+  if (document.getElementById(__DATA_STATE_STYLE_ID)) {
+    installed = true;
+    return;
+  }
+  const el = document.createElement("style");
+  el.id = __DATA_STATE_STYLE_ID;
+  el.textContent = CSS;
+  document.head.appendChild(el);
+  installed = true;
+}
+function __resetDataStateStyles() {
+  installed = false;
+  if (typeof document !== "undefined") {
+    document.getElementById(__DATA_STATE_STYLE_ID)?.remove();
+  }
+}
+
+// src/motion/useDataState.ts
+function useDataState(input) {
+  React__namespace.useEffect(installDataStateStyles, []);
+  const reduced = usePrefersReducedMotion();
+  const state = core.resolveDataState(input);
+  return {
+    state,
+    isContent: state === "content",
+    stateKey: state,
+    stateProps: {
+      className: reduced ? "" : DATA_STATE_CLASS,
+      "data-iris-state": state
+    }
+  };
+}
+
+exports.DATA_STATE_CLASS = DATA_STATE_CLASS;
+exports.__resetDataStateStyles = __resetDataStateStyles;
+exports.installDataStateStyles = installDataStateStyles;
+exports.useDataState = useDataState;
+exports.usePrefersReducedMotion = usePrefersReducedMotion;
+//# sourceMappingURL=motion.cjs.map
+//# sourceMappingURL=motion.cjs.map

package/dist/motion.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/motion/usePrefersReducedMotion.ts","../src/motion/styles.ts","../src/motion/useDataState.ts"],"names":["React","React2","resolveDataState"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAM,KAAA,GAAQ,kCAAA;AAEd,SAAS,IAAA,GAAgB;AACvB,EAAA,IAAI,OAAO,MAAA,KAAW,WAAA,IAAe,OAAO,MAAA,CAAO,UAAA,KAAe,YAAY,OAAO,KAAA;AACrF,EAAA,OAAO,MAAA,CAAO,UAAA,CAAW,KAAK,CAAA,CAAE,OAAA;AAClC;AAOO,SAAS,uBAAA,GAAmC;AACjD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAUA,0BAAS,IAAI,CAAA;AAEjD,EAAMA,2BAAU,MAAM;AACpB,IAAA,IAAI,OAAO,MAAA,KAAW,WAAA,IAAe,OAAO,MAAA,CAAO,eAAe,UAAA,EAAY;AAC9E,IAAA,MAAM,EAAA,GAAK,MAAA,CAAO,UAAA,CAAW,KAAK,CAAA;AAClC,IAAA,MAAM,QAAA,GAAW,MAAM,UAAA,CAAW,EAAA,CAAG,OAAO,CAAA;AAC5C,IAAA,QAAA,EAAS;AACT,IAAA,EAAA,CAAG,gBAAA,GAAmB,UAAU,QAAQ,CAAA;AACxC,IAAA,OAAO,MAAM,EAAA,CAAG,mBAAA,GAAsB,QAAA,EAAU,QAAQ,CAAA;AAAA,EAC1D,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,OAAO,OAAA;AACT;;;AC3BO,IAAM,qBAAA,GAAwB,wBAAA;AAG9B,IAAM,gBAAA,GAAmB;AAEhC,IAAM,GAAA,GAAM;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,EAKT,gBAAgB,CAAA;AAAA;AAAA;AAAA;AAAA,GAAA,EAId,gBAAgB,CAAA;AAAA;AAAA,CAAA,CAEnB,IAAA,EAAK;AAEP,IAAI,SAAA,GAAY,KAAA;AAGT,SAAS,sBAAA,GAA+B;AAC7C,EAAA,IAAI,SAAA,EAAW;AACf,EAAA,IAAI,OAAO,aAAa,WAAA,EAAa;AACrC,EAAA,IAAI,QAAA,CAAS,cAAA,CAAe,qBAAqB,CAAA,EAAG;AAClD,IAAA,SAAA,GAAY,IAAA;AACZ,IAAA;AAAA,EACF;AACA,EAAA,MAAM,EAAA,GAAK,QAAA,CAAS,aAAA,CAAc,OAAO,CAAA;AACzC,EAAA,EAAA,CAAG,EAAA,GAAK,qBAAA;AACR,EAAA,EAAA,CAAG,WAAA,GAAc,GAAA;AACjB,EAAA,QAAA,CAAS,IAAA,CAAK,YAAY,EAAE,CAAA;AAC5B,EAAA,SAAA,GAAY,IAAA;AACd;AAEO,SAAS,sBAAA,GAA+B;AAC7C,EAAA,SAAA,GAAY,KAAA;AACZ,EAAA,IAAI,OAAO,aAAa,WAAA,EAAa;AACnC,IAAA,QAAA,CAAS,cAAA,CAAe,qBAAqB,CAAA,EAAG,MAAA,EAAO;AAAA,EACzD;AACF;;;ACVO,SAAS,aAAa,KAAA,EAA2C;AACtE,EAAMC,gBAAA,CAAA,SAAA,CAAU,sBAAA,EAAwB,EAAE,CAAA;AAC1C,EAAA,MAAM,UAAU,uBAAA,EAAwB;AACxC,EAAA,MAAM,KAAA,GAAQC,sBAAiB,KAAK,CAAA;AACpC,EAAA,OAAO;AAAA,IACL,KAAA;AAAA,IACA,WAAW,KAAA,KAAU,SAAA;AAAA,IACrB,QAAA,EAAU,KAAA;AAAA,IACV,UAAA,EAAY;AAAA,MACV,SAAA,EAAW,UAAU,EAAA,GAAK,gBAAA;AAAA,MAC1B,iBAAA,EAAmB;AAAA;AACrB,GACF;AACF","file":"motion.cjs","sourcesContent":["import * as React from 'react'\n\nconst QUERY = '(prefers-reduced-motion: reduce)'\n\nfunction read(): boolean {\n  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false\n  return window.matchMedia(QUERY).matches\n}\n\n/**\n * Reactive `prefers-reduced-motion` flag. Returns `false` where `matchMedia`\n * is unavailable (SSR / older jsdom) so animation is the safe default only when\n * the user has not asked to reduce it.\n */\nexport function usePrefersReducedMotion(): boolean {\n  const [reduced, setReduced] = React.useState(read)\n\n  React.useEffect(() => {\n    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return\n    const mq = window.matchMedia(QUERY)\n    const onChange = () => setReduced(mq.matches)\n    onChange()\n    mq.addEventListener?.('change', onChange)\n    return () => mq.removeEventListener?.('change', onChange)\n  }, [])\n\n  return reduced\n}\n","export const __DATA_STATE_STYLE_ID = 'iris-data-state-styles'\n\n/** Class applied to a state node so its entry cross-fades in. */\nexport const DATA_STATE_CLASS = 'iris-data-state-enter'\n\nconst CSS = `\n@keyframes iris-data-state-enter {\n  from { opacity: 0; transform: translateY(4px); }\n  to { opacity: 1; transform: none; }\n}\n.${DATA_STATE_CLASS} {\n  animation: iris-data-state-enter var(--iris-duration-md, 200ms) ease;\n}\n@media (prefers-reduced-motion: reduce) {\n  .${DATA_STATE_CLASS} { animation: none; }\n}\n`.trim()\n\nlet installed = false\n\n/** Idempotently inject the data-state enter keyframes (SSR-safe no-op). */\nexport function installDataStateStyles(): void {\n  if (installed) return\n  if (typeof document === 'undefined') return\n  if (document.getElementById(__DATA_STATE_STYLE_ID)) {\n    installed = true\n    return\n  }\n  const el = document.createElement('style')\n  el.id = __DATA_STATE_STYLE_ID\n  el.textContent = CSS\n  document.head.appendChild(el)\n  installed = true\n}\n\nexport function __resetDataStateStyles(): void {\n  installed = false\n  if (typeof document !== 'undefined') {\n    document.getElementById(__DATA_STATE_STYLE_ID)?.remove()\n  }\n}\n","import * as React from 'react'\nimport { resolveDataState, type DataState, type DataStateInput } from '@iris-ui-kit/core'\nimport { DATA_STATE_CLASS, installDataStateStyles } from './styles'\nimport { usePrefersReducedMotion } from './usePrefersReducedMotion'\n\nexport interface DataStateNodeProps {\n  className: string\n  'data-iris-state': DataState\n}\n\nexport interface UseDataStateReturn {\n  /** Resolved state (`error → loading → empty → content` precedence). */\n  state: DataState\n  /** `true` when the host should render its real content. */\n  isContent: boolean\n  /** Use as the React `key` of the state node so the enter animation replays on each transition. */\n  stateKey: DataState\n  /** Spread onto the rendered loading/error/empty node. */\n  stateProps: DataStateNodeProps\n}\n\n/**\n * State-transition + entry-animation hook for data components. Resolves the\n * active {@link DataState} from `{ loading, error, empty }`, and returns props\n * for the state node that (a) re-key on every transition so the cross-fade\n * replays and (b) drop the animation class when the user prefers reduced motion.\n *\n * The framework-agnostic precedence lives in `@iris-ui-kit/core`'s\n * {@link resolveDataState}; this hook is the thin React animation bridge.\n */\nexport function useDataState(input: DataStateInput): UseDataStateReturn {\n  React.useEffect(installDataStateStyles, [])\n  const reduced = usePrefersReducedMotion()\n  const state = resolveDataState(input)\n  return {\n    state,\n    isContent: state === 'content',\n    stateKey: state,\n    stateProps: {\n      className: reduced ? '' : DATA_STATE_CLASS,\n      'data-iris-state': state,\n    },\n  }\n}\n"]}

package/dist/motion.d.cts

@@ -0,0 +1,41 @@
+import { DataState, DataStateInput } from '@iris-ui-kit/core';
+
+/**
+ * Reactive `prefers-reduced-motion` flag. Returns `false` where `matchMedia`
+ * is unavailable (SSR / older jsdom) so animation is the safe default only when
+ * the user has not asked to reduce it.
+ */
+declare function usePrefersReducedMotion(): boolean;
+
+interface DataStateNodeProps {
+    className: string;
+    'data-iris-state': DataState;
+}
+interface UseDataStateReturn {
+    /** Resolved state (`error → loading → empty → content` precedence). */
+    state: DataState;
+    /** `true` when the host should render its real content. */
+    isContent: boolean;
+    /** Use as the React `key` of the state node so the enter animation replays on each transition. */
+    stateKey: DataState;
+    /** Spread onto the rendered loading/error/empty node. */
+    stateProps: DataStateNodeProps;
+}
+/**
+ * State-transition + entry-animation hook for data components. Resolves the
+ * active {@link DataState} from `{ loading, error, empty }`, and returns props
+ * for the state node that (a) re-key on every transition so the cross-fade
+ * replays and (b) drop the animation class when the user prefers reduced motion.
+ *
+ * The framework-agnostic precedence lives in `@iris-ui-kit/core`'s
+ * {@link resolveDataState}; this hook is the thin React animation bridge.
+ */
+declare function useDataState(input: DataStateInput): UseDataStateReturn;
+
+/** Class applied to a state node so its entry cross-fades in. */
+declare const DATA_STATE_CLASS = "iris-data-state-enter";
+/** Idempotently inject the data-state enter keyframes (SSR-safe no-op). */
+declare function installDataStateStyles(): void;
+declare function __resetDataStateStyles(): void;
+
+export { DATA_STATE_CLASS, type DataStateNodeProps, type UseDataStateReturn, __resetDataStateStyles, installDataStateStyles, useDataState, usePrefersReducedMotion };

package/dist/motion.d.ts

@@ -0,0 +1,41 @@
+import { DataState, DataStateInput } from '@iris-ui-kit/core';
+
+/**
+ * Reactive `prefers-reduced-motion` flag. Returns `false` where `matchMedia`
+ * is unavailable (SSR / older jsdom) so animation is the safe default only when
+ * the user has not asked to reduce it.
+ */
+declare function usePrefersReducedMotion(): boolean;
+
+interface DataStateNodeProps {
+    className: string;
+    'data-iris-state': DataState;
+}
+interface UseDataStateReturn {
+    /** Resolved state (`error → loading → empty → content` precedence). */
+    state: DataState;
+    /** `true` when the host should render its real content. */
+    isContent: boolean;
+    /** Use as the React `key` of the state node so the enter animation replays on each transition. */
+    stateKey: DataState;
+    /** Spread onto the rendered loading/error/empty node. */
+    stateProps: DataStateNodeProps;
+}
+/**
+ * State-transition + entry-animation hook for data components. Resolves the
+ * active {@link DataState} from `{ loading, error, empty }`, and returns props
+ * for the state node that (a) re-key on every transition so the cross-fade
+ * replays and (b) drop the animation class when the user prefers reduced motion.
+ *
+ * The framework-agnostic precedence lives in `@iris-ui-kit/core`'s
+ * {@link resolveDataState}; this hook is the thin React animation bridge.
+ */
+declare function useDataState(input: DataStateInput): UseDataStateReturn;
+
+/** Class applied to a state node so its entry cross-fades in. */
+declare const DATA_STATE_CLASS = "iris-data-state-enter";
+/** Idempotently inject the data-state enter keyframes (SSR-safe no-op). */
+declare function installDataStateStyles(): void;
+declare function __resetDataStateStyles(): void;
+
+export { DATA_STATE_CLASS, type DataStateNodeProps, type UseDataStateReturn, __resetDataStateStyles, installDataStateStyles, useDataState, usePrefersReducedMotion };

package/dist/motion.js

@@ -0,0 +1,4 @@
+'use client'
+export { DATA_STATE_CLASS, __resetDataStateStyles, installDataStateStyles, useDataState, usePrefersReducedMotion } from './chunk-HEJGN6UI.js';
+//# sourceMappingURL=motion.js.map
+//# sourceMappingURL=motion.js.map

package/dist/motion.js.map

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