@nori-ui/core 1.8.0 → 1.9.1

package/dist/components/Command/index.cjs

@@ -0,0 +1,1371 @@
+'use strict';
+
+var react = require('react');
+var reactNative = require('react-native');
+var jsxRuntime = require('nativewind/jsx-runtime');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/theme/px.ts
+function px(value) {
+  if (typeof value === "number") {
+    return value;
+  }
+  const n = Number.parseFloat(value);
+  return Number.isFinite(n) ? n : 0;
+}
+__name(px, "px");
+
+// ../tokens/build/theme.ts
+var theme = {
+  color: {
+    danger: "#ef4444",
+    info: "#3b82f6",
+    neutral: {
+      "100": "#f4f4f5",
+      "200": "#e4e4e7",
+      "300": "#d4d4d8",
+      "400": "#a1a1aa",
+      "50": "#fafafa",
+      "500": "#71717a",
+      "600": "#52525b",
+      "700": "#3f3f46",
+      "800": "#27272a",
+      "900": "#18181b"
+    },
+    primary: {
+      "100": "#ccfbf1",
+      "200": "#99f6e4",
+      "300": "#5eead4",
+      "400": "#2dd4bf",
+      "50": "#f0fdfa",
+      "500": "#14b8a6",
+      "600": "#0d9488",
+      "700": "#0f766e",
+      "800": "#115e59",
+      "900": "#134e4a"
+    },
+    success: "#22c55e",
+    warning: "#f59e0b"
+  },
+  fontFamily: {
+    body: "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+    display: "ui-serif, Georgia, 'Times New Roman', serif",
+    mono: "ui-monospace, 'SF Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace"
+  },
+  fontSize: {
+    "2xl": "24px",
+    "3xl": "30px",
+    "4xl": "36px",
+    lg: "18px",
+    md: "16px",
+    sm: "14px",
+    xl: "20px",
+    xs: "12px"
+  },
+  fontWeight: {
+    bold: "700",
+    medium: "500",
+    regular: "400",
+    semibold: "600"
+  },
+  lineHeight: {
+    normal: "1.4",
+    relaxed: "1.6",
+    tight: "1.2"
+  },
+  radius: {
+    "2xl": "16px",
+    full: "9999px",
+    lg: "8px",
+    md: "6px",
+    none: "0px",
+    sm: "4px",
+    xl: "12px"
+  },
+  semantic: {
+    background: {
+      default: "#fafafa",
+      elevated: "#ffffff",
+      subtle: "#f4f4f5"
+    },
+    border: {
+      default: "#e4e4e7",
+      strong: "#d4d4d8"
+    },
+    interactive: {
+      destructive: "#ef4444",
+      primary: "#0d9488",
+      primaryHover: "#0f766e",
+      primaryPressed: "#115e59"
+    },
+    text: {
+      default: "#18181b",
+      inverted: "#fafafa",
+      muted: "#52525b"
+    }
+  },
+  shadow: {
+    lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
+    md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+    sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"
+  },
+  spacing: {
+    "0": "0px",
+    "1": "4px",
+    "10": "40px",
+    "12": "48px",
+    "16": "64px",
+    "2": "8px",
+    "20": "80px",
+    "24": "96px",
+    "3": "12px",
+    "4": "16px",
+    "5": "20px",
+    "6": "24px",
+    "8": "32px"
+  }
+};
+var themeDark = {
+  color: {
+    danger: "#ef4444",
+    info: "#3b82f6",
+    neutral: {
+      "100": "#f4f4f5",
+      "200": "#e4e4e7",
+      "300": "#d4d4d8",
+      "400": "#a1a1aa",
+      "50": "#fafafa",
+      "500": "#71717a",
+      "600": "#52525b",
+      "700": "#3f3f46",
+      "800": "#27272a",
+      "900": "#18181b"
+    },
+    primary: {
+      "100": "#ccfbf1",
+      "200": "#99f6e4",
+      "300": "#5eead4",
+      "400": "#2dd4bf",
+      "50": "#f0fdfa",
+      "500": "#14b8a6",
+      "600": "#0d9488",
+      "700": "#0f766e",
+      "800": "#115e59",
+      "900": "#134e4a"
+    },
+    success: "#22c55e",
+    warning: "#f59e0b"
+  },
+  fontFamily: {
+    body: "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+    display: "ui-serif, Georgia, 'Times New Roman', serif",
+    mono: "ui-monospace, 'SF Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace"
+  },
+  fontSize: {
+    "2xl": "24px",
+    "3xl": "30px",
+    "4xl": "36px",
+    lg: "18px",
+    md: "16px",
+    sm: "14px",
+    xl: "20px",
+    xs: "12px"
+  },
+  fontWeight: {
+    bold: "700",
+    medium: "500",
+    regular: "400",
+    semibold: "600"
+  },
+  lineHeight: {
+    normal: "1.4",
+    relaxed: "1.6",
+    tight: "1.2"
+  },
+  radius: {
+    "2xl": "16px",
+    full: "9999px",
+    lg: "8px",
+    md: "6px",
+    none: "0px",
+    sm: "4px",
+    xl: "12px"
+  },
+  semantic: {
+    background: {
+      default: "#18181b",
+      elevated: "#3f3f46",
+      subtle: "#27272a"
+    },
+    border: {
+      default: "#3f3f46",
+      strong: "#52525b"
+    },
+    interactive: {
+      destructive: "#ef4444",
+      primary: "#2dd4bf",
+      primaryHover: "#5eead4",
+      primaryPressed: "#99f6e4"
+    },
+    text: {
+      default: "#fafafa",
+      inverted: "#18181b",
+      muted: "#a1a1aa"
+    }
+  },
+  shadow: {
+    lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
+    md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+    sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"
+  },
+  spacing: {
+    "0": "0px",
+    "1": "4px",
+    "10": "40px",
+    "12": "48px",
+    "16": "64px",
+    "2": "8px",
+    "20": "80px",
+    "24": "96px",
+    "3": "12px",
+    "4": "16px",
+    "5": "20px",
+    "6": "24px",
+    "8": "32px"
+  }
+};
+var defaultTheme = {
+  light: theme,
+  dark: themeDark
+};
+var ThemeContext = react.createContext(defaultTheme);
+ThemeContext.displayName = "ThemeContext";
+var ColorSchemeOverrideContext = react.createContext(null);
+ColorSchemeOverrideContext.displayName = "ColorSchemeOverrideContext";
+var isWeb = reactNative.Platform.OS === "web";
+function readWebScheme() {
+  if (typeof document === "undefined") {
+    return "light";
+  }
+  const root = document.documentElement;
+  if (root.classList.contains("dark")) {
+    return "dark";
+  }
+  if (root.getAttribute("data-theme") === "dark") {
+    return "dark";
+  }
+  return "light";
+}
+__name(readWebScheme, "readWebScheme");
+function useColorScheme() {
+  const override = react.useContext(ColorSchemeOverrideContext);
+  const [scheme, setScheme] = react.useState(() => {
+    if (isWeb) {
+      return readWebScheme();
+    }
+    return reactNative.Appearance.getColorScheme() ?? "light";
+  });
+  react.useEffect(() => {
+    if (isWeb) {
+      const root = document.documentElement;
+      const update = /* @__PURE__ */ __name(() => setScheme(readWebScheme()), "update");
+      const observer = new MutationObserver(update);
+      observer.observe(root, { attributes: true, attributeFilter: ["class", "data-theme"] });
+      update();
+      return () => observer.disconnect();
+    }
+    const sub = reactNative.Appearance.addChangeListener(({ colorScheme }) => {
+      setScheme(colorScheme ?? "light");
+    });
+    return () => sub.remove();
+  }, []);
+  return override ?? scheme;
+}
+__name(useColorScheme, "useColorScheme");
+
+// src/theme/use-theme-colors.ts
+function useThemeColors() {
+  const scheme = useColorScheme();
+  const themePair = react.useContext(ThemeContext);
+  return scheme === "dark" ? themePair.dark : themePair.light;
+}
+__name(useThemeColors, "useThemeColors");
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  const out = [];
+  for (const input of inputs) {
+    append(out, input);
+  }
+  return out.join(" ");
+}
+__name(cn, "cn");
+function append(out, input) {
+  if (!input) {
+    return;
+  }
+  if (typeof input === "string") {
+    if (input.length > 0) {
+      out.push(input);
+    }
+    return;
+  }
+  if (typeof input === "number") {
+    return;
+  }
+  if (Array.isArray(input)) {
+    for (const inner of input) {
+      append(out, inner);
+    }
+    return;
+  }
+  if (typeof input === "object") {
+    for (const key of Object.keys(input)) {
+      if (input[key]) {
+        out.push(key);
+      }
+    }
+  }
+}
+__name(append, "append");
+var isWeb2 = reactNative.Platform.OS === "web";
+var make = /* @__PURE__ */ __name(({ path, glyph }) => /* @__PURE__ */ __name(function PlaceholderIcon({ size = 20, color = "currentColor" }) {
+  const colors = useThemeColors();
+  if (isWeb2) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: color,
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: path })
+      }
+    );
+  }
+  const resolvedColor = color === "currentColor" ? colors.semantic.text.default : color;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Text,
+    {
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: { fontSize: size, lineHeight: size, color: resolvedColor },
+      children: glyph
+    }
+  );
+}, "PlaceholderIcon"), "make");
+var defaultSemanticIcons = {
+  checkmark: make({ path: "M20 6 9 17l-5-5", glyph: "\u2713" }),
+  close: make({ path: "M18 6 6 18 M6 6l12 12", glyph: "\u2715" }),
+  eye: make({
+    path: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z",
+    glyph: "\u{1F441}"
+  }),
+  eyeOff: make({
+    path: "M17.94 17.94A10 10 0 0 1 2 12s3.5-7 10-7c2 0 3.8.6 5.4 1.5 M1 1l22 22",
+    glyph: "\u{1F648}"
+  }),
+  chevronDown: make({ path: "m6 9 6 6 6-6", glyph: "\u2304" }),
+  chevronUp: make({ path: "m18 15-6-6-6 6", glyph: "\u2303" }),
+  alertTriangle: make({
+    path: "M12 9v4 M12 17h.01 M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z",
+    glyph: "\u26A0"
+  }),
+  info: make({
+    path: "M12 8h.01 M11 12h1v4h1 M12 22C6.48 22 2 17.52 2 12 2 6.48 6.48 2 12 2c5.52 0 10 4.48 10 10 0 5.52-4.48 10-10 10z",
+    glyph: "\u24D8"
+  }),
+  check: make({ path: "M20 6 9 17l-5-5", glyph: "\u2713" }),
+  x: make({ path: "M18 6 6 18 M6 6l12 12", glyph: "\u2715" })
+};
+
+// src/slot/compose-refs.ts
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (ref == null) {
+        continue;
+      }
+      if (typeof ref === "function") {
+        ref(node);
+      } else {
+        ref.current = node;
+      }
+    }
+  };
+}
+__name(composeRefs, "composeRefs");
+var Slot = react.forwardRef(/* @__PURE__ */ __name(function Slot2(props, forwardedRef) {
+  const { children, ...slotProps } = props;
+  if (!react.isValidElement(children)) {
+    return null;
+  }
+  const child = react.Children.only(children);
+  const merged = mergeProps(slotProps, child.props);
+  const childRef = child.ref;
+  if (forwardedRef || childRef) {
+    merged.ref = composeRefs(forwardedRef, childRef);
+  }
+  return react.cloneElement(child, merged);
+}, "Slot"));
+Slot.displayName = "Slot";
+function mergeProps(outer, inner) {
+  const merged = { ...outer };
+  for (const key of Object.keys(inner)) {
+    const outerValue = outer[key];
+    const innerValue = inner[key];
+    if (key === "className" || key === "class") {
+      merged[key] = joinClass(outerValue, innerValue);
+      continue;
+    }
+    if (key === "style") {
+      merged[key] = {
+        ...outerValue,
+        ...innerValue
+      };
+      continue;
+    }
+    if (isEventHandler(key, outerValue, innerValue)) {
+      merged[key] = composeHandlers(outerValue, innerValue);
+      continue;
+    }
+    merged[key] = innerValue;
+  }
+  return merged;
+}
+__name(mergeProps, "mergeProps");
+function joinClass(outer, inner) {
+  const a = typeof outer === "string" ? outer : "";
+  const b = typeof inner === "string" ? inner : "";
+  const joined = [a, b].filter(Boolean).join(" ");
+  return joined.length > 0 ? joined : void 0;
+}
+__name(joinClass, "joinClass");
+function isEventHandler(key, outer, inner) {
+  if (!key.startsWith("on") || key.length < 3) {
+    return false;
+  }
+  if (key[2] !== key[2]?.toUpperCase()) {
+    return false;
+  }
+  return typeof outer === "function" && typeof inner === "function";
+}
+__name(isEventHandler, "isEventHandler");
+function composeHandlers(outer, inner) {
+  return (...args) => {
+    outer(...args);
+    inner(...args);
+  };
+}
+__name(composeHandlers, "composeHandlers");
+
+// src/components/Dialog/blur-backdrop.tsx
+var BlurBackdrop = /* @__PURE__ */ __name((_props) => {
+  return null;
+}, "BlurBackdrop");
+var DialogContext = react.createContext(null);
+var useDialogContext = /* @__PURE__ */ __name((label) => {
+  const ctx = react.useContext(DialogContext);
+  if (!ctx) {
+    throw new Error(`<${label}> must be rendered inside a <Dialog>.`);
+  }
+  return ctx;
+}, "useDialogContext");
+var DialogRoot = /* @__PURE__ */ __name(({ open, defaultOpen = false, onOpenChange, children }) => {
+  const [inner, setInner] = react.useState(defaultOpen);
+  const isControlled = open !== void 0;
+  const current = isControlled ? open : inner;
+  const setOpen = react.useCallback(
+    (next) => {
+      if (!isControlled) {
+        setInner(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const baseId = react.useId();
+  const triggerRef = react.useRef(null);
+  const ctxValue = {
+    open: current,
+    setOpen,
+    titleId: `${baseId}-title`,
+    descriptionId: `${baseId}-description`,
+    triggerRef
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value: ctxValue, children });
+}, "DialogRoot");
+var DialogTrigger = /* @__PURE__ */ __name(({ asChild = true, children, className, testID }) => {
+  const ctx = useDialogContext("DialogTrigger");
+  const onPress = react.useCallback(() => ctx.setOpen(true), [ctx]);
+  if (asChild && react.isValidElement(children)) {
+    const child = children;
+    const fire = /* @__PURE__ */ __name((existing) => (event) => {
+      existing?.(event);
+      ctx.setOpen(true);
+    }, "fire");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Slot,
+      {
+        ref: (node) => {
+          ctx.triggerRef.current = node;
+        },
+        onClick: fire(child.props.onClick),
+        onPress: fire(child.props.onPress),
+        ...testID !== void 0 ? { "data-testid": testID } : {},
+        ...className !== void 0 ? { className } : {},
+        children: child
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      ref: (node) => {
+        ctx.triggerRef.current = node;
+      },
+      onPress,
+      ...testID !== void 0 ? { testID } : {},
+      ...className !== void 0 ? { className } : {},
+      children: wrapStringChildren(children)
+    }
+  );
+}, "DialogTrigger");
+function wrapStringChildren(children) {
+  if (typeof children === "string" || typeof children === "number") {
+    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { children });
+  }
+  return children;
+}
+__name(wrapStringChildren, "wrapStringChildren");
+var SCRIM_COLOR = "rgba(0, 0, 0, 0.24)";
+var BLUR_AMOUNT = 4;
+var OVERLAY_LAYOUT_BASE = {
+  position: reactNative.Platform.OS === "web" ? "fixed" : "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  alignItems: "center",
+  justifyContent: "center",
+  // On native the BlurBackdrop sibling renders BEHIND this overlay and
+  // already provides dim + frosted-glass via expo-blur's `tint`/`intensity`.
+  // Painting SCRIM_COLOR on top would mask the blur entirely (the user
+  // sees only a flat tint), so the overlay stays transparent and the
+  // BlurView is the dominant visual on native.
+  ...reactNative.Platform.OS === "web" ? { zIndex: 50 } : { backgroundColor: "transparent" }
+};
+var CONTENT_LAYOUT_BASE = {
+  width: "100%",
+  maxWidth: 480,
+  // component-density literal — not from theme
+  ...reactNative.Platform.OS === "web" ? {
+    boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)"
+  } : { elevation: 24 }
+};
+var FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+var DialogContent = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const ctx = useDialogContext("DialogContent");
+  const colors = useThemeColors();
+  const scheme = useColorScheme();
+  const contentRef = react.useRef(null);
+  const overlayStyle = {
+    ...OVERLAY_LAYOUT_BASE,
+    padding: px(colors.spacing["4"])
+  };
+  const contentStyle = {
+    ...CONTENT_LAYOUT_BASE,
+    borderRadius: px(colors.radius.xl),
+    padding: px(colors.spacing["6"]),
+    gap: px(colors.spacing["3"])
+  };
+  const [entered, setEntered] = react.useState(false);
+  react.useEffect(() => {
+    if (reactNative.Platform.OS !== "web") {
+      setEntered(true);
+      return;
+    }
+    if (!ctx.open) {
+      setEntered(false);
+      return;
+    }
+    const id = requestAnimationFrame(() => setEntered(true));
+    return () => cancelAnimationFrame(id);
+  }, [ctx.open]);
+  const enterStyle = reactNative.Platform.OS === "web" ? {
+    opacity: entered ? 1 : 0,
+    transform: [{ scale: entered ? 1 : 0.96 }],
+    transitionProperty: "opacity, transform",
+    transitionDuration: "150ms",
+    transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)"
+  } : {};
+  const overlayDomRef = react.useRef(null);
+  react.useEffect(() => {
+    if (reactNative.Platform.OS !== "web") {
+      return;
+    }
+    const node = overlayDomRef.current;
+    if (!node) {
+      return;
+    }
+    node.style.transitionProperty = "background-color, backdrop-filter, -webkit-backdrop-filter";
+    node.style.transitionDuration = "150ms, 200ms, 200ms";
+    node.style.transitionTimingFunction = "ease-out";
+    if (entered) {
+      node.style.backgroundColor = SCRIM_COLOR;
+      node.style.backdropFilter = `blur(${BLUR_AMOUNT}px)`;
+      node.style.setProperty("-webkit-backdrop-filter", `blur(${BLUR_AMOUNT}px)`);
+    } else {
+      node.style.backgroundColor = "rgba(0, 0, 0, 0)";
+      node.style.backdropFilter = "blur(0px)";
+      node.style.setProperty("-webkit-backdrop-filter", "blur(0px)");
+    }
+  }, [entered]);
+  react.useEffect(() => {
+    if (!ctx.open) {
+      return;
+    }
+    if (reactNative.Platform.OS !== "web") {
+      return;
+    }
+    if (typeof document === "undefined") {
+      return;
+    }
+    const previouslyFocused = document.activeElement;
+    const prevBodyOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const focusFirst = /* @__PURE__ */ __name(() => {
+      const node = contentRef.current;
+      if (!node) {
+        return;
+      }
+      const focusable = node.querySelectorAll(FOCUSABLE_SELECTOR);
+      const first = focusable[0];
+      if (first) {
+        first.focus();
+      } else {
+        node.setAttribute("tabindex", "-1");
+        node.focus();
+      }
+    }, "focusFirst");
+    focusFirst();
+    const onKeyDown = /* @__PURE__ */ __name((event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        ctx.setOpen(false);
+        return;
+      }
+      if (event.key !== "Tab") {
+        return;
+      }
+      const node = contentRef.current;
+      if (!node) {
+        return;
+      }
+      const focusable = Array.from(node.querySelectorAll(FOCUSABLE_SELECTOR)).filter(
+        (el) => el.offsetParent !== null || el === document.activeElement
+      );
+      if (focusable.length === 0) {
+        event.preventDefault();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (!first || !last) {
+        return;
+      }
+      if (event.shiftKey) {
+        if (document.activeElement === first || !node.contains(document.activeElement)) {
+          event.preventDefault();
+          last.focus();
+        }
+      } else if (document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }, "onKeyDown");
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      document.body.style.overflow = prevBodyOverflow;
+      const restoreTo = ctx.triggerRef.current ?? previouslyFocused;
+      restoreTo?.focus?.();
+    };
+  }, [ctx.open, ctx.setOpen, ctx.triggerRef]);
+  const onOverlayPress = react.useCallback(() => ctx.setOpen(false), [ctx]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.Modal,
+    {
+      visible: ctx.open,
+      transparent: true,
+      animationType: reactNative.Platform.OS === "web" ? "none" : "fade",
+      onRequestClose: () => ctx.setOpen(false),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(BlurBackdrop, { intensity: 60, tint: scheme === "dark" ? "dark" : "light", style: reactNative.StyleSheet.absoluteFill }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Pressable,
+          {
+            accessibilityRole: "none",
+            "aria-hidden": true,
+            ref: (node) => {
+              overlayDomRef.current = node;
+            },
+            style: overlayStyle,
+            onPress: onOverlayPress,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              reactNative.Pressable,
+              {
+                onPress: (event) => event.stopPropagation?.(),
+                ref: (node) => {
+                  contentRef.current = node;
+                },
+                role: "dialog",
+                accessibilityRole: "none",
+                "aria-modal": true,
+                "aria-labelledby": ctx.titleId,
+                "aria-describedby": ctx.descriptionId,
+                ...testID !== void 0 ? { testID } : {},
+                className: cn("w-full max-w-md rounded-xl bg-semantic-background-elevated p-6 gap-3", className),
+                style: [contentStyle, { backgroundColor: colors.semantic.background.elevated }, enterStyle],
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  reactNative.View,
+                  {
+                    className: "flex-col gap-1.5",
+                    style: { flexDirection: "column", gap: px(colors.spacing["2"]) - 2 },
+                    children
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}, "DialogContent");
+var DialogTitle = /* @__PURE__ */ __name(({ children, className }) => {
+  const ctx = useDialogContext("DialogTitle");
+  const colors = useThemeColors();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Text,
+    {
+      nativeID: ctx.titleId,
+      id: ctx.titleId,
+      role: "heading",
+      "aria-level": 2,
+      className: cn("text-lg font-semibold text-semantic-text-default", className),
+      style: {
+        color: colors.semantic.text.default,
+        fontFamily: colors.fontFamily.display,
+        fontSize: px(colors.fontSize.lg),
+        fontWeight: colors.fontWeight.semibold
+      },
+      children
+    }
+  );
+}, "DialogTitle");
+var DialogDescription = /* @__PURE__ */ __name(({ children, className }) => {
+  const ctx = useDialogContext("DialogDescription");
+  const colors = useThemeColors();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Text,
+    {
+      nativeID: ctx.descriptionId,
+      id: ctx.descriptionId,
+      className: cn("text-sm text-semantic-text-muted", className),
+      style: {
+        color: colors.semantic.text.muted,
+        fontFamily: colors.fontFamily.body,
+        fontSize: px(colors.fontSize.sm),
+        lineHeight: px(colors.fontSize.sm) * Number(colors.lineHeight.normal)
+      },
+      children
+    }
+  );
+}, "DialogDescription");
+var DialogClose = /* @__PURE__ */ __name(({
+  asChild = true,
+  children,
+  className,
+  testID,
+  accessibilityLabel = "Close"
+}) => {
+  const ctx = useDialogContext("DialogClose");
+  const colors = useThemeColors();
+  const onPress = react.useCallback(() => ctx.setOpen(false), [ctx]);
+  if (asChild && react.isValidElement(children)) {
+    const child = children;
+    const fire = /* @__PURE__ */ __name((existing) => (event) => {
+      existing?.(event);
+      ctx.setOpen(false);
+    }, "fire");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Slot,
+      {
+        onClick: fire(child.props.onClick),
+        onPress: fire(child.props.onPress),
+        ...testID !== void 0 ? { "data-testid": testID } : {},
+        ...className !== void 0 ? { className } : {},
+        children: child
+      }
+    );
+  }
+  if (children !== void 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Pressable,
+      {
+        onPress,
+        role: "button",
+        accessibilityRole: "button",
+        accessibilityLabel,
+        "aria-label": accessibilityLabel,
+        ...testID !== void 0 ? { testID } : {},
+        ...className !== void 0 ? { className } : {},
+        children: wrapStringChildren(children)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      onPress,
+      role: "button",
+      accessibilityRole: "button",
+      accessibilityLabel,
+      "aria-label": accessibilityLabel,
+      ...testID !== void 0 ? { testID } : {},
+      className: cn("absolute right-3 top-3 w-8 h-8 items-center justify-center rounded-md", className),
+      style: {
+        position: "absolute",
+        right: px(colors.spacing["3"]),
+        top: px(colors.spacing["3"]),
+        // 32×32 close hit target — component-density literal — not from theme
+        width: 32,
+        height: 32,
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: px(colors.radius.md)
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(defaultSemanticIcons.close, { size: 18, color: colors.semantic.text.muted })
+    }
+  );
+}, "DialogClose");
+var DialogFooter = /* @__PURE__ */ __name(({ children, className }) => {
+  const colors = useThemeColors();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      className: cn("mt-4 flex-row items-center justify-end gap-2", className),
+      style: {
+        marginTop: px(colors.spacing["4"]),
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        gap: px(colors.spacing["2"])
+      },
+      children
+    }
+  );
+}, "DialogFooter");
+var Dialog = Object.assign(DialogRoot, {
+  Trigger: DialogTrigger,
+  Content: DialogContent,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Footer: DialogFooter,
+  Close: DialogClose
+});
+var CommandContext = react.createContext(null);
+function useCommandContext(caller) {
+  const ctx = react.useContext(CommandContext);
+  if (!ctx) {
+    throw new Error(`<${caller}> must be rendered inside <Command>.`);
+  }
+  return ctx;
+}
+__name(useCommandContext, "useCommandContext");
+var CommandRoot = /* @__PURE__ */ __name(({ open, defaultOpen = false, onOpenChange, children }) => {
+  const [inner, setInner] = react.useState(defaultOpen);
+  const isControlled = open !== void 0;
+  const current = isControlled ? open : inner;
+  const [query, setQuery] = react.useState("");
+  const setOpen = react.useCallback(
+    (next) => {
+      if (!isControlled) {
+        setInner(next);
+      }
+      if (!next) {
+        setQuery("");
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  react.useEffect(() => {
+    if (reactNative.Platform.OS !== "web") {
+      return;
+    }
+    const handler = /* @__PURE__ */ __name((e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        setOpen(!current);
+      }
+    }, "handler");
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [current, setOpen]);
+  const ctxValue = {
+    open: current,
+    setOpen,
+    query,
+    setQuery
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(CommandContext.Provider, { value: ctxValue, children });
+}, "CommandRoot");
+var CommandTrigger = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const ctx = useCommandContext("Command.Trigger");
+  const open = /* @__PURE__ */ __name(() => ctx.setOpen(true), "open");
+  if (reactNative.Platform.OS === "web") {
+    if (react.isValidElement(children)) {
+      const child = children;
+      const existingOnClick = child.props.onClick;
+      const existingOnPress = child.props.onPress;
+      const fire = /* @__PURE__ */ __name((e) => {
+        existingOnClick?.(e);
+        existingOnPress?.(e);
+        open();
+      }, "fire");
+      const extraProps = {
+        onClick: fire,
+        "aria-haspopup": "dialog",
+        "aria-expanded": ctx.open ? "true" : "false"
+      };
+      if (existingOnPress !== void 0) {
+        extraProps.onPress = fire;
+      }
+      return react.cloneElement(child, extraProps);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "data-testid": testID,
+        className: cn("nori-command-trigger", className),
+        "aria-haspopup": "dialog",
+        "aria-expanded": ctx.open,
+        onClick: open,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { testID, onPress: open, accessibilityRole: "button", children });
+}, "CommandTrigger");
+var CommandDialogInner = /* @__PURE__ */ __name(({
+  placeholder = "Type a command or search\u2026",
+  children,
+  className,
+  testID
+}) => {
+  const ctx = useCommandContext("Command.Dialog");
+  const colors = useThemeColors();
+  const inputRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!ctx.open) {
+      return;
+    }
+    if (reactNative.Platform.OS !== "web") {
+      return;
+    }
+    const id = setTimeout(() => inputRef.current?.focus(), 50);
+    return () => clearTimeout(id);
+  }, [ctx.open]);
+  const contentProps = testID !== void 0 ? { testID, className: cn("nori-command-dialog", className) } : { className: cn("nori-command-dialog", className) };
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: ctx.open, onOpenChange: ctx.setOpen, children: /* @__PURE__ */ jsxRuntime.jsx(Dialog.Content, { ...contentProps, children: reactNative.Platform.OS === "web" ? /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        maxHeight: "80vh",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        minWidth: 360
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              padding: `${colors.spacing["3"]}px ${colors.spacing["4"]}px`,
+              borderBottom: `1px solid ${colors.semantic.border.default}`,
+              display: "flex",
+              alignItems: "center",
+              gap: colors.spacing["2"]
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "svg",
+                {
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 16 16",
+                  fill: "none",
+                  "aria-hidden": "true",
+                  style: { color: colors.semantic.text.muted, flexShrink: 0 },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "path",
+                    {
+                      d: "M6.5 11a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM14 14l-3-3",
+                      stroke: "currentColor",
+                      strokeWidth: "1.5",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  ref: inputRef,
+                  type: "text",
+                  role: "combobox",
+                  "aria-expanded": true,
+                  "aria-autocomplete": "list",
+                  autoComplete: "off",
+                  spellCheck: false,
+                  placeholder,
+                  value: ctx.query,
+                  onChange: (e) => ctx.setQuery(e.target.value),
+                  style: {
+                    flex: 1,
+                    fontSize: 15,
+                    background: "transparent",
+                    border: "none",
+                    outline: "none",
+                    color: colors.semantic.text.default,
+                    width: "100%"
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { role: "listbox", style: { overflowY: "auto", flex: 1, maxHeight: 400 }, children })
+      ]
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { flex: 1 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.TextInput,
+      {
+        placeholder,
+        placeholderTextColor: colors.semantic.text.muted,
+        value: ctx.query,
+        onChangeText: ctx.setQuery,
+        autoFocus: ctx.open,
+        style: {
+          fontSize: 15,
+          color: colors.semantic.text.default,
+          paddingHorizontal: px(colors.spacing["4"]),
+          paddingVertical: px(colors.spacing["3"]),
+          borderBottomWidth: 1,
+          borderBottomColor: colors.semantic.border.default
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.ScrollView, { style: { maxHeight: 400 }, children })
+  ] }) }) });
+}, "CommandDialogInner");
+var CommandEmpty = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const colors = useThemeColors();
+  if (reactNative.Platform.OS === "web") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-testid": testID,
+        role: "status",
+        "aria-live": "polite",
+        className: cn("nori-command-empty", className),
+        style: {
+          paddingTop: colors.spacing["6"],
+          paddingBottom: colors.spacing["6"],
+          paddingLeft: colors.spacing["4"],
+          paddingRight: colors.spacing["4"],
+          textAlign: "center",
+          color: colors.semantic.text.muted,
+          fontSize: 14
+        },
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      testID,
+      style: {
+        paddingVertical: px(colors.spacing["6"]),
+        paddingHorizontal: px(colors.spacing["4"]),
+        alignItems: "center"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { color: colors.semantic.text.muted, fontSize: 14 }, children: typeof children === "string" ? children : "No results found." })
+    }
+  );
+}, "CommandEmpty");
+var CommandGroup = /* @__PURE__ */ __name(({ heading, children, className, testID }) => {
+  const ctx = useCommandContext("Command.Group");
+  const groupId = react.useId();
+  const colors = useThemeColors();
+  const visibleCount = countVisibleItems(children, ctx.query);
+  if (visibleCount === 0) {
+    return null;
+  }
+  if (reactNative.Platform.OS === "web") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "section",
+      {
+        "data-testid": testID,
+        "aria-labelledby": heading ? `${groupId}-heading` : void 0,
+        className: cn("nori-command-group", className),
+        children: [
+          heading && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: `${groupId}-heading`,
+              style: {
+                padding: `${colors.spacing["2"]}px ${colors.spacing["4"]}px ${colors.spacing["1"]}px`,
+                fontSize: 11,
+                fontWeight: 600,
+                letterSpacing: "0.05em",
+                textTransform: "uppercase",
+                color: colors.semantic.text.muted
+              },
+              children: heading
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { paddingBottom: colors.spacing["2"] }, children })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { testID, children: [
+    heading && /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.View,
+      {
+        style: {
+          paddingHorizontal: px(colors.spacing["4"]),
+          paddingTop: px(colors.spacing["2"]),
+          paddingBottom: px(colors.spacing["1"])
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: {
+              fontSize: 11,
+              fontWeight: "600",
+              textTransform: "uppercase",
+              color: colors.semantic.text.muted,
+              letterSpacing: 0.5
+            },
+            children: heading
+          }
+        )
+      }
+    ),
+    children
+  ] });
+}, "CommandGroup");
+var CommandItem = /* @__PURE__ */ __name(({ onSelect, disabled = false, children, className, testID }) => {
+  const ctx = useCommandContext("Command.Item");
+  const colors = useThemeColors();
+  const text = extractText(children);
+  const visible = matchesQuery(text, ctx.query);
+  if (!visible) {
+    return null;
+  }
+  const handleSelect = /* @__PURE__ */ __name(() => {
+    if (disabled) {
+      return;
+    }
+    onSelect?.();
+    ctx.setOpen(false);
+  }, "handleSelect");
+  if (reactNative.Platform.OS === "web") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-testid": testID,
+        role: "option",
+        "aria-selected": "false",
+        "aria-disabled": disabled,
+        tabIndex: disabled ? -1 : 0,
+        className: cn("nori-command-item", className),
+        onClick: handleSelect,
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            handleSelect();
+          }
+        },
+        onMouseEnter: (e) => {
+          if (!disabled) {
+            e.currentTarget.style.background = `${colors.semantic.interactive.primary}14`;
+          }
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.background = "transparent";
+        },
+        onFocus: (e) => {
+          if (!disabled) {
+            e.currentTarget.style.background = `${colors.semantic.interactive.primary}14`;
+          }
+        },
+        onBlur: (e) => {
+          e.currentTarget.style.background = "transparent";
+        },
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: `${colors.spacing["2"]}px ${colors.spacing["4"]}px`,
+          cursor: disabled ? "not-allowed" : "pointer",
+          opacity: disabled ? 0.5 : 1,
+          fontSize: 14,
+          color: colors.semantic.text.default,
+          borderRadius: colors.radius.sm,
+          margin: `0 ${colors.spacing["1"]}px`,
+          outline: "none"
+        },
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      testID,
+      onPress: handleSelect,
+      disabled,
+      accessibilityRole: "button",
+      style: ({ pressed }) => ({
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        paddingHorizontal: px(colors.spacing["4"]),
+        paddingVertical: px(colors.spacing["3"]),
+        opacity: disabled ? 0.5 : pressed ? 0.7 : 1
+      }),
+      children: typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { fontSize: 14, color: colors.semantic.text.default }, children }) : children
+    }
+  );
+}, "CommandItem");
+var CommandShortcut = /* @__PURE__ */ __name(({ children, className }) => {
+  const colors = useThemeColors();
+  if (reactNative.Platform.OS === "web") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn("nori-command-shortcut", className),
+        style: {
+          marginLeft: "auto",
+          fontSize: 12,
+          color: colors.semantic.text.muted,
+          letterSpacing: "0.05em",
+          opacity: 0.7
+        },
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Text,
+    {
+      style: {
+        fontSize: 12,
+        color: colors.semantic.text.muted,
+        opacity: 0.7
+      },
+      children: typeof children === "string" ? children : null
+    }
+  );
+}, "CommandShortcut");
+function extractText(node) {
+  if (typeof node === "string" || typeof node === "number") {
+    return String(node);
+  }
+  if (Array.isArray(node)) {
+    return node.map(extractText).join(" ");
+  }
+  if (react.isValidElement(node)) {
+    const el = node;
+    return extractText(el.props.children);
+  }
+  return "";
+}
+__name(extractText, "extractText");
+function matchesQuery(text, query) {
+  if (!query.trim()) {
+    return true;
+  }
+  return text.toLowerCase().includes(query.toLowerCase().trim());
+}
+__name(matchesQuery, "matchesQuery");
+function countVisibleItems(children, query) {
+  let count = 0;
+  react.Children.forEach(children, (child) => {
+    if (!react.isValidElement(child)) {
+      return;
+    }
+    const props = child.props;
+    if ("onSelect" in props || !("heading" in props)) {
+      const text = extractText(props.children);
+      if (matchesQuery(text, query)) {
+        count++;
+      }
+    }
+  });
+  return count;
+}
+__name(countVisibleItems, "countVisibleItems");
+var CommandDialogWrapper = /* @__PURE__ */ __name((props) => {
+  const ctx = useCommandContext("Command.Dialog");
+  const { children, ...rest } = props;
+  let anyVisible = false;
+  let emptyNode = null;
+  react.Children.forEach(children, (child) => {
+    if (!react.isValidElement(child)) {
+      return;
+    }
+    const childProps = child.props;
+    if (!("heading" in childProps) && !("onSelect" in childProps) && !("icon" in childProps)) {
+      emptyNode = child;
+      return;
+    }
+    const groupChildren = childProps.children;
+    const count = countVisibleItems(groupChildren, ctx.query);
+    if (count > 0) {
+      anyVisible = true;
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(CommandDialogInner, { ...rest, children: anyVisible ? children : emptyNode ?? /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty, { children: "No results found." }) });
+}, "CommandDialogWrapper");
+var Command = Object.assign(CommandRoot, {
+  Trigger: CommandTrigger,
+  Dialog: CommandDialogWrapper,
+  Empty: CommandEmpty,
+  Group: CommandGroup,
+  Item: CommandItem,
+  Shortcut: CommandShortcut
+});
+
+exports.Command = Command;
+exports.useCommandContext = useCommandContext;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map