@nori-ui/core 0.0.5 → 1.0.2

package/dist/components/Accordion/index.cjs

@@ -0,0 +1,900 @@
+'use strict';
+
+var react = require('react');
+var reactNative = require('react-native');
+var Animated = require('react-native-reanimated');
+var jsxRuntime = require('nativewind/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Animated__default = /*#__PURE__*/_interopDefault(Animated);
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var AnimatedView = Animated__default.default.View;
+var IS_WEB = reactNative.Platform.OS === "web";
+function useAnimatedNumber(property, target, options = {}) {
+  const { duration = 180 } = options;
+  if (IS_WEB) {
+    return webStyle(property, target, duration);
+  }
+  return useReanimatedTiming(property, target, duration);
+}
+__name(useAnimatedNumber, "useAnimatedNumber");
+function webStyle(property, target, duration) {
+  if (property === "translateX" || property === "translateY") {
+    return {
+      transform: [{ [property]: target }],
+      transitionProperty: "transform",
+      transitionDuration: `${duration}ms`,
+      transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)"
+    };
+  }
+  return {
+    [property]: target,
+    transitionProperty: property,
+    transitionDuration: `${duration}ms`,
+    transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)"
+  };
+}
+__name(webStyle, "webStyle");
+function useReanimatedTiming(property, target, duration) {
+  const easing = Animated.Easing.bezier(0.16, 1, 0.3, 1);
+  const shared = Animated.useSharedValue(target);
+  react.useEffect(() => {
+    shared.value = Animated.withTiming(target, { duration, easing });
+  }, [target, shared, duration, easing]);
+  const translateXStyle = Animated.useAnimatedStyle(() => ({
+    transform: [{ translateX: shared.value }]
+  }));
+  const translateYStyle = Animated.useAnimatedStyle(() => ({
+    transform: [{ translateY: shared.value }]
+  }));
+  const leftStyle = Animated.useAnimatedStyle(() => ({ left: shared.value }));
+  const topStyle = Animated.useAnimatedStyle(() => ({ top: shared.value }));
+  const rightStyle = Animated.useAnimatedStyle(() => ({ right: shared.value }));
+  const bottomStyle = Animated.useAnimatedStyle(() => ({ bottom: shared.value }));
+  const opacityStyle = Animated.useAnimatedStyle(() => ({ opacity: shared.value }));
+  const heightStyle = Animated.useAnimatedStyle(() => ({ height: shared.value }));
+  if (property === "translateX") {
+    return translateXStyle;
+  }
+  if (property === "translateY") {
+    return translateYStyle;
+  }
+  if (property === "left") {
+    return leftStyle;
+  }
+  if (property === "top") {
+    return topStyle;
+  }
+  if (property === "right") {
+    return rightStyle;
+  }
+  if (property === "bottom") {
+    return bottomStyle;
+  }
+  if (property === "opacity") {
+    return opacityStyle;
+  }
+  return heightStyle;
+}
+__name(useReanimatedTiming, "useReanimatedTiming");
+
+// ../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");
+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/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");
+
+// 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 AccordionContext = react.createContext(null);
+var useAccordionContext = /* @__PURE__ */ __name((label) => {
+  const ctx = react.useContext(AccordionContext);
+  if (!ctx) {
+    throw new Error(`<${label}> must be rendered inside an <Accordion>.`);
+  }
+  return ctx;
+}, "useAccordionContext");
+var AccordionItemContext = react.createContext(null);
+var useAccordionItemContext = /* @__PURE__ */ __name((label) => {
+  const ctx = react.useContext(AccordionItemContext);
+  if (!ctx) {
+    throw new Error(`<${label}> must be rendered inside an <Accordion.Item>.`);
+  }
+  return ctx;
+}, "useAccordionItemContext");
+var AccordionRoot = /* @__PURE__ */ __name((props) => {
+  const baseId = react.useId();
+  const refs = react.useRef(/* @__PURE__ */ new Map());
+  const orderRef = react.useRef([]);
+  const { type, children, className, testID } = props;
+  const [singleInner, setSingleInner] = react.useState(
+    type === "single" ? props.defaultValue ?? null : null
+  );
+  const [multipleInner, setMultipleInner] = react.useState(type === "multiple" ? props.defaultValue ?? [] : []);
+  const singleControlled = type === "single" && props.value !== void 0;
+  const multipleControlled = type === "multiple" && props.value !== void 0;
+  const singleCurrent = type === "single" ? singleControlled ? props.value ?? null : singleInner : null;
+  const multipleCurrent = type === "multiple" ? multipleControlled ? props.value ?? [] : multipleInner : [];
+  const isOpen = react.useCallback(
+    (v) => {
+      if (type === "single") {
+        return singleCurrent === v;
+      }
+      return multipleCurrent.includes(v);
+    },
+    [type, singleCurrent, multipleCurrent]
+  );
+  const toggle = react.useCallback(
+    (v) => {
+      if (type === "single") {
+        const next = singleCurrent === v ? props.collapsible ? null : singleCurrent : v;
+        if (next === singleCurrent) {
+          return;
+        }
+        if (!singleControlled) {
+          setSingleInner(next);
+        }
+        props.onChange?.(next);
+      } else {
+        const has = multipleCurrent.includes(v);
+        const next = has ? multipleCurrent.filter((x) => x !== v) : [...multipleCurrent, v];
+        if (!multipleControlled) {
+          setMultipleInner(next);
+        }
+        props.onChange?.(next);
+      }
+    },
+    // The handler needs the latest snapshot of every prop — `props` is a
+    // discriminated union so spreading it into the deps is the cleanest
+    // way to keep both branches honest.
+    [type, singleCurrent, multipleCurrent, singleControlled, multipleControlled, props]
+  );
+  const register = react.useCallback((v, ref) => {
+    refs.current.set(v, ref);
+    if (!orderRef.current.includes(v)) {
+      orderRef.current.push(v);
+    }
+  }, []);
+  const unregister = react.useCallback((v) => {
+    refs.current.delete(v);
+    orderRef.current = orderRef.current.filter((x) => x !== v);
+  }, []);
+  const moveFocus = react.useCallback((offset, fromValue) => {
+    const order = orderRef.current;
+    if (order.length === 0) {
+      return;
+    }
+    const idx = order.indexOf(fromValue);
+    const start = idx === -1 ? 0 : idx;
+    const len = order.length;
+    const next = order[(start + offset + len) % len];
+    if (!next) {
+      return;
+    }
+    refs.current.get(next)?.current?.focus?.();
+  }, []);
+  const focusEdge = react.useCallback((edge) => {
+    const order = orderRef.current;
+    if (order.length === 0) {
+      return;
+    }
+    const target = edge === "first" ? order[0] : order[order.length - 1];
+    if (!target) {
+      return;
+    }
+    refs.current.get(target)?.current?.focus?.();
+  }, []);
+  const ctxValue = react.useMemo(
+    () => ({ baseId, isOpen, toggle, register, unregister, moveFocus, focusEdge }),
+    [baseId, isOpen, toggle, register, unregister, moveFocus, focusEdge]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...testID !== void 0 ? { testID } : {},
+      className: cn("flex-col w-full", className),
+      style: { flexDirection: "column", width: "100%" },
+      children
+    }
+  ) });
+}, "AccordionRoot");
+var ITEM_BASE = {
+  borderBottomWidth: 1,
+  flexDirection: "column"
+};
+var TRIGGER_LAYOUT_BASE = {
+  minHeight: 44,
+  // component-density literal — not from theme
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "space-between"
+};
+var CONTENT_INNER_LAYOUT_BASE = {
+  // Padding values come from theme inside AccordionContent.
+};
+var AccordionItem = /* @__PURE__ */ __name(({ value, disabled = false, children, className, testID }) => {
+  const ctx = useAccordionContext("Accordion.Item");
+  const colors = useThemeColors();
+  const open = ctx.isOpen(value);
+  const itemCtx = react.useMemo(
+    () => ({
+      value,
+      open,
+      disabled,
+      triggerId: `${ctx.baseId}-trigger-${value}`,
+      contentId: `${ctx.baseId}-content-${value}`
+    }),
+    [value, open, disabled, ctx.baseId]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionItemContext.Provider, { value: itemCtx, children: /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...testID !== void 0 ? { testID } : {},
+      className: cn("flex-col border-b border-semantic-border-default", className),
+      style: [ITEM_BASE, { borderBottomColor: colors.semantic.border.default }],
+      children
+    }
+  ) });
+}, "AccordionItem");
+var AccordionTrigger = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const ctx = useAccordionContext("Accordion.Trigger");
+  const item = useAccordionItemContext("Accordion.Trigger");
+  const colors = useThemeColors();
+  const ownRef = react.useRef(null);
+  const triggerStyle = {
+    ...TRIGGER_LAYOUT_BASE,
+    paddingHorizontal: px(colors.spacing["4"]),
+    paddingVertical: px(colors.spacing["3"]),
+    gap: px(colors.spacing["3"])
+  };
+  react.useEffect(() => {
+    ctx.register(item.value, ownRef);
+    return () => ctx.unregister(item.value);
+  }, [ctx, item.value]);
+  const onPress = react.useCallback(() => {
+    if (item.disabled) {
+      return;
+    }
+    ctx.toggle(item.value);
+  }, [ctx, item.value, item.disabled]);
+  const handleKeyDown = react.useCallback(
+    (event) => {
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          ctx.moveFocus(1, item.value);
+          return;
+        case "ArrowUp":
+          event.preventDefault();
+          ctx.moveFocus(-1, item.value);
+          return;
+        case "Home":
+          event.preventDefault();
+          ctx.focusEdge("first");
+          return;
+        case "End":
+          event.preventDefault();
+          ctx.focusEdge("last");
+          return;
+        case "Enter":
+        case " ": {
+          event.preventDefault();
+          if (!item.disabled) {
+            ctx.toggle(item.value);
+          }
+          return;
+        }
+      }
+    },
+    [ctx, item.value, item.disabled]
+  );
+  const chevronStyle = reactNative.Platform.OS === "web" ? {
+    transition: "transform 200ms ease",
+    transform: `rotate(${item.open ? 180 : 0}deg)`
+  } : { transform: [{ rotate: item.open ? "180deg" : "0deg" }] };
+  const triggerProps = {
+    ref: /* @__PURE__ */ __name((node) => {
+      ownRef.current = node;
+    }, "ref"),
+    role: "button",
+    accessibilityRole: "button",
+    "aria-expanded": item.open,
+    "aria-controls": item.contentId,
+    "aria-disabled": item.disabled || void 0,
+    id: item.triggerId,
+    // Every trigger sits in the tab order — pressing Tab moves through
+    // the accordion sequentially, then arrow keys take over once focused.
+    tabIndex: 0,
+    onPress,
+    onKeyDown: handleKeyDown,
+    ...item.disabled ? { disabled: true } : {},
+    ...testID !== void 0 ? { testID } : {}
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.Pressable,
+    {
+      ...triggerProps,
+      className: cn(
+        "flex-row items-center justify-between gap-3 px-4 py-3 min-h-[44px] hover:bg-semantic-background-subtle",
+        item.disabled ? "opacity-50" : "opacity-100",
+        className
+      ),
+      style: [triggerStyle, item.disabled ? { opacity: 0.5 } : null],
+      children: [
+        typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: {
+              color: colors.semantic.text.default,
+              fontFamily: colors.fontFamily.body,
+              fontSize: px(colors.fontSize.sm),
+              fontWeight: colors.fontWeight.medium,
+              flexShrink: 1
+            },
+            children
+          }
+        ) : children,
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { "aria-hidden": true, style: chevronStyle, children: /* @__PURE__ */ jsxRuntime.jsx(defaultSemanticIcons.chevronDown, { size: 18, color: colors.semantic.text.muted }) })
+      ]
+    }
+  );
+}, "AccordionTrigger");
+var ACCORDION_ANIM_DURATION_MS = 200;
+var AccordionContent = /* @__PURE__ */ __name(({
+  children,
+  className,
+  testID,
+  forceMount: _forceMount = false
+}) => {
+  const item = useAccordionItemContext("Accordion.Content");
+  const colors = useThemeColors();
+  const wrapperRef = react.useRef(null);
+  const innerRef = react.useRef(null);
+  const [measuredHeight, setMeasuredHeight] = react.useState(null);
+  const innerStyle = {
+    ...CONTENT_INNER_LAYOUT_BASE,
+    paddingHorizontal: px(colors.spacing["4"]),
+    paddingTop: px(colors.spacing["1"]),
+    paddingBottom: px(colors.spacing["3"])
+  };
+  react.useEffect(() => {
+    if (reactNative.Platform.OS !== "web") {
+      return;
+    }
+    const wrapper = wrapperRef.current;
+    const inner = innerRef.current;
+    if (!wrapper || !inner) {
+      return;
+    }
+    const isFirstPaint = wrapper.dataset.noriPainted !== "1";
+    wrapper.dataset.noriPainted = "1";
+    wrapper.style.overflow = "hidden";
+    wrapper.style.transitionProperty = "max-height, opacity";
+    wrapper.style.transitionDuration = `${ACCORDION_ANIM_DURATION_MS}ms`;
+    wrapper.style.transitionTimingFunction = "cubic-bezier(0.16, 1, 0.3, 1)";
+    if (item.open) {
+      const target = inner.scrollHeight;
+      if (isFirstPaint) {
+        wrapper.style.maxHeight = `${target}px`;
+        wrapper.style.opacity = "1";
+        return;
+      }
+      wrapper.style.maxHeight = "0px";
+      wrapper.style.opacity = "0";
+      void wrapper.offsetHeight;
+      requestAnimationFrame(() => {
+        wrapper.style.maxHeight = `${target}px`;
+        wrapper.style.opacity = "1";
+      });
+    } else {
+      const current = inner.scrollHeight;
+      wrapper.style.maxHeight = `${current}px`;
+      wrapper.style.opacity = "1";
+      void wrapper.offsetHeight;
+      requestAnimationFrame(() => {
+        wrapper.style.maxHeight = "0px";
+        wrapper.style.opacity = "0";
+      });
+    }
+  }, [item.open]);
+  const targetHeight = item.open ? measuredHeight ?? 0 : 0;
+  const targetOpacity = item.open ? 1 : 0;
+  const heightAnim = useAnimatedNumber("height", targetHeight, {
+    duration: ACCORDION_ANIM_DURATION_MS
+  });
+  const opacityAnim = useAnimatedNumber("opacity", targetOpacity, {
+    duration: ACCORDION_ANIM_DURATION_MS
+  });
+  const onInnerLayout = react.useCallback(
+    (e) => {
+      if (reactNative.Platform.OS === "web") {
+        return;
+      }
+      const next = e.nativeEvent.layout.height;
+      if (next > 0 && next !== measuredHeight) {
+        setMeasuredHeight(next);
+      }
+    },
+    [measuredHeight]
+  );
+  if (reactNative.Platform.OS !== "web") {
+    const animatedWrapperStyle = {
+      overflow: "hidden"
+    };
+    if (measuredHeight === null) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        AnimatedView,
+        {
+          ...testID !== void 0 ? { testID } : {},
+          accessibilityRole: "none",
+          "aria-labelledby": item.triggerId,
+          "aria-hidden": !item.open,
+          style: [animatedWrapperStyle, { height: 0 }],
+          className: cn("overflow-hidden", className),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.View,
+            {
+              onLayout: onInnerLayout,
+              className: cn("px-4 pt-1 pb-3"),
+              style: [innerStyle, { position: "absolute", left: 0, right: 0, opacity: 0 }],
+              children: typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                reactNative.Text,
+                {
+                  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
+                }
+              ) : children
+            }
+          )
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      AnimatedView,
+      {
+        ...testID !== void 0 ? { testID } : {},
+        accessibilityRole: "none",
+        "aria-labelledby": item.triggerId,
+        "aria-hidden": !item.open,
+        style: [animatedWrapperStyle, heightAnim],
+        className: cn("overflow-hidden", className),
+        children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedView, { style: opacityAnim, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn("px-4 pt-1 pb-3"), style: innerStyle, children: typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            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
+          }
+        ) : children }) })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ref: (node) => {
+        wrapperRef.current = node;
+      },
+      ...testID !== void 0 ? { testID } : {},
+      role: "region",
+      accessibilityRole: "none",
+      id: item.contentId,
+      "aria-labelledby": item.triggerId,
+      "aria-hidden": !item.open,
+      className: cn("overflow-hidden", className),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.View,
+        {
+          ref: (node) => {
+            innerRef.current = node;
+          },
+          className: cn("px-4 pt-1 pb-3"),
+          style: innerStyle,
+          children: typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.Text,
+            {
+              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
+            }
+          ) : children
+        }
+      )
+    }
+  );
+}, "AccordionContent");
+var Accordion = Object.assign(AccordionRoot, {
+  Item: AccordionItem,
+  Trigger: AccordionTrigger,
+  Content: AccordionContent
+});
+
+exports.Accordion = Accordion;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map