@nori-ui/core 1.8.0 → 1.9.0

package/dist/components/Sidebar/index.cjs

@@ -0,0 +1,675 @@
+'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 SidebarContext = react.createContext(null);
+function useSidebarContext(caller) {
+  const ctx = react.useContext(SidebarContext);
+  if (!ctx) {
+    throw new Error(`<${caller}> must be rendered inside <Sidebar>.`);
+  }
+  return ctx;
+}
+__name(useSidebarContext, "useSidebarContext");
+var EXPANDED_WIDTH = 240;
+var COLLAPSED_WIDTH = 56;
+var SidebarRoot = /* @__PURE__ */ __name(({
+  collapsed,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  side = "left",
+  variant = "standard",
+  children,
+  className,
+  testID
+}) => {
+  const [inner, setInner] = react.useState(defaultCollapsed);
+  const isControlled = collapsed !== void 0;
+  const current = isControlled ? collapsed : inner;
+  const navId = react.useId();
+  const colors = useThemeColors();
+  const setCollapsed = react.useCallback(
+    (next) => {
+      if (!isControlled) {
+        setInner(next);
+      }
+      onCollapsedChange?.(next);
+    },
+    [isControlled, onCollapsedChange]
+  );
+  const toggleCollapsed = react.useCallback(() => {
+    setCollapsed(!current);
+  }, [current, setCollapsed]);
+  const ctxValue = {
+    collapsed: current,
+    setCollapsed,
+    toggleCollapsed,
+    navId
+  };
+  const width = current ? COLLAPSED_WIDTH : EXPANDED_WIDTH;
+  const containerStyle = reactNative.Platform.OS === "web" ? {
+    position: "fixed",
+    top: 0,
+    bottom: 0,
+    [side]: 0,
+    width,
+    transitionProperty: "width",
+    transitionDuration: "200ms",
+    transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    zIndex: 40
+  } : {
+    width,
+    flexDirection: "column",
+    overflow: "hidden"
+  };
+  const variantStyle = reactNative.Platform.OS === "web" ? variant === "floating" ? {
+    margin: 8,
+    borderRadius: colors.radius.lg,
+    top: 8,
+    bottom: 8,
+    height: "auto"
+  } : variant === "inset" ? {
+    boxShadow: "4px 0 16px rgba(0,0,0,0.08)"
+  } : {} : {};
+  const rootStyle = {
+    ...containerStyle,
+    ...variantStyle,
+    backgroundColor: colors.semantic.background.elevated,
+    borderRightWidth: variant !== "floating" ? 1 : 0,
+    borderRightColor: colors.semantic.border.default
+  };
+  if (reactNative.Platform.OS === "web") {
+    return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "nav",
+      {
+        id: navId,
+        "aria-label": "Sidebar",
+        "data-collapsed": current,
+        "data-side": side,
+        "data-variant": variant,
+        "data-testid": testID,
+        className: cn(
+          "nori-sidebar flex flex-col overflow-hidden transition-[width] duration-200",
+          className
+        ),
+        style: rootStyle,
+        children
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: rootStyle, testID, accessibilityRole: "menu", accessibilityLabel: "Sidebar", children }) });
+}, "SidebarRoot");
+var SidebarHeader = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const colors = useThemeColors();
+  const style = {
+    padding: px(colors.spacing["4"]),
+    borderBottomWidth: 1,
+    borderBottomColor: colors.semantic.border.default,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: px(colors.spacing["2"]),
+    overflow: "hidden"
+  };
+  if (reactNative.Platform.OS === "web") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-testid": testID,
+        className: cn("nori-sidebar-header", className),
+        style,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style, testID, children });
+}, "SidebarHeader");
+var SidebarContent = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const style = { flex: 1, overflow: "hidden" };
+  if (reactNative.Platform.OS === "web") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-testid": testID,
+        className: cn("nori-sidebar-content", className),
+        style: { flex: 1, overflowY: "auto", overflowX: "hidden" },
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.ScrollView, { style, testID, contentContainerStyle: { flexGrow: 1 }, children });
+}, "SidebarContent");
+var SidebarFooter = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const colors = useThemeColors();
+  const style = {
+    padding: px(colors.spacing["4"]),
+    borderTopWidth: 1,
+    borderTopColor: colors.semantic.border.default,
+    overflow: "hidden"
+  };
+  if (reactNative.Platform.OS === "web") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-testid": testID,
+        className: cn("nori-sidebar-footer", className),
+        style,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style, testID, children });
+}, "SidebarFooter");
+var SidebarGroup = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const colors = useThemeColors();
+  const style = {
+    paddingTop: px(colors.spacing["2"]),
+    paddingBottom: px(colors.spacing["2"])
+  };
+  if (reactNative.Platform.OS === "web") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-testid": testID,
+        className: cn("nori-sidebar-group", className),
+        style,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style, testID, children });
+}, "SidebarGroup");
+var SidebarGroupLabel = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const ctx = useSidebarContext("Sidebar.GroupLabel");
+  const colors = useThemeColors();
+  if (ctx.collapsed) {
+    return null;
+  }
+  const style = {
+    paddingHorizontal: px(colors.spacing["4"]),
+    paddingVertical: px(colors.spacing["1"])
+  };
+  const textStyle = {
+    fontSize: 11,
+    fontWeight: "600",
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    color: colors.semantic.text.muted
+  };
+  if (reactNative.Platform.OS === "web") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-testid": testID,
+        className: cn("nori-sidebar-group-label", className),
+        style,
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: textStyle, children })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style, testID, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: textStyle, children }) });
+}, "SidebarGroupLabel");
+var SidebarMenu = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const colors = useThemeColors();
+  const style = {
+    paddingHorizontal: px(colors.spacing["2"]),
+    gap: px(colors.spacing["1"])
+  };
+  if (reactNative.Platform.OS === "web") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "ul",
+      {
+        "data-testid": testID,
+        className: cn("nori-sidebar-menu", className),
+        style: {
+          ...style,
+          listStyle: "none",
+          margin: 0,
+          padding: `0 ${colors.spacing["2"]}px`
+        },
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style, testID, children });
+}, "SidebarMenu");
+var SidebarMenuItem = /* @__PURE__ */ __name(({
+  icon,
+  active = false,
+  disabled = false,
+  onPress,
+  children,
+  className,
+  testID
+}) => {
+  const ctx = useSidebarContext("Sidebar.MenuItem");
+  const colors = useThemeColors();
+  const itemStyle = {
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: px(colors.radius.md),
+    paddingHorizontal: px(colors.spacing["3"]),
+    paddingVertical: px(colors.spacing["2"]),
+    gap: px(colors.spacing["3"]),
+    opacity: disabled ? 0.5 : 1,
+    ...ctx.collapsed ? { justifyContent: "center", paddingHorizontal: px(colors.spacing["2"]) } : {}
+  };
+  const activeBg = colors.semantic.interactive.primary;
+  const labelStr = typeof children === "string" ? children : void 0;
+  const labelTextStyle = {
+    fontSize: 14,
+    fontWeight: active ? "600" : "400",
+    color: active ? colors.semantic.text.default : colors.semantic.text.muted,
+    flex: 1
+  };
+  if (reactNative.Platform.OS === "web") {
+    return /* @__PURE__ */ jsxRuntime.jsx("li", { style: { listStyle: "none" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        "data-testid": testID,
+        "aria-current": active ? "page" : void 0,
+        "aria-disabled": disabled,
+        title: ctx.collapsed && labelStr ? labelStr : void 0,
+        disabled,
+        onClick: disabled ? void 0 : onPress,
+        className: cn("nori-sidebar-menu-item", className),
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: colors.spacing["3"],
+          width: "100%",
+          textAlign: "left",
+          border: "none",
+          cursor: disabled ? "not-allowed" : "pointer",
+          borderRadius: colors.radius.md,
+          padding: ctx.collapsed ? `${colors.spacing["2"]}px` : `${colors.spacing["2"]}px ${colors.spacing["3"]}px`,
+          justifyContent: ctx.collapsed ? "center" : "flex-start",
+          background: active ? `${activeBg}1a` : "transparent",
+          opacity: disabled ? 0.5 : 1
+        },
+        children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nori-sidebar-menu-item-icon", "aria-hidden": "true", children: icon }),
+          !ctx.collapsed && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                fontSize: 14,
+                fontWeight: active ? 600 : 400,
+                color: active ? colors.semantic.text.default : colors.semantic.text.muted,
+                flex: 1,
+                overflow: "hidden",
+                whiteSpace: "nowrap",
+                textOverflow: "ellipsis"
+              },
+              children
+            }
+          )
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.Pressable,
+    {
+      testID,
+      onPress: disabled ? void 0 : onPress,
+      disabled,
+      accessibilityRole: "menuitem",
+      accessibilityState: { selected: active, disabled },
+      style: ({ pressed }) => [
+        itemStyle,
+        active ? { backgroundColor: `${activeBg}1a` } : {},
+        pressed && { opacity: 0.7 }
+      ],
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { children: icon }),
+        !ctx.collapsed && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: labelTextStyle, numberOfLines: 1, children })
+      ]
+    }
+  );
+}, "SidebarMenuItem");
+var Sidebar = Object.assign(SidebarRoot, {
+  Header: SidebarHeader,
+  Content: SidebarContent,
+  Footer: SidebarFooter,
+  Group: SidebarGroup,
+  GroupLabel: SidebarGroupLabel,
+  Menu: SidebarMenu,
+  MenuItem: SidebarMenuItem
+});
+
+exports.Sidebar = Sidebar;
+exports.useSidebarContext = useSidebarContext;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map