@nori-ui/core 1.6.0 → 1.7.0

package/dist/components/ButtonGroup/index.d.ts

@@ -0,0 +1,45 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type ButtonGroupOrientation = 'horizontal' | 'vertical';
+type ButtonGroupSize = 'sm' | 'md' | 'lg';
+type ButtonGroupProps = {
+    children?: ReactNode;
+    /** Flex direction for the group. @defaultValue 'horizontal' */
+    orientation?: ButtonGroupOrientation;
+    /**
+     * Size hint passed to children via `data-group-size`. Buttons inside
+     * the group can read this to self-size consistently. When omitted, each
+     * Button retains its own `size` prop.
+     */
+    size?: ButtonGroupSize;
+    className?: string;
+    testID?: string;
+};
+/**
+ * Joins multiple buttons in a visually connected row (or column). Middle
+ * buttons lose outer edge radius; adjacent borders merge so the group looks
+ * like a single segmented control.
+ *
+ * The radius treatment is implemented by injecting `data-position` attributes
+ * (first / middle / last) onto each direct child. A companion CSS rule in the
+ * nori preset (or a Tailwind variant) can target `[data-position=first]`,
+ * `[data-position=middle]`, and `[data-position=last]` to strip the
+ * appropriate border-radius corners. When using Button from `@nori-ui/core`,
+ * no extra setup is needed — the tokens preset ships the rules.
+ *
+ * ```tsx
+ * <ButtonGroup>
+ *   <Button variant="secondary">Day</Button>
+ *   <Button variant="secondary">Week</Button>
+ *   <Button variant="secondary">Month</Button>
+ * </ButtonGroup>
+ * ```
+ *
+ * > **v2 note:** Corner-radius stripping is applied via CSS data-attribute
+ * > selectors on web. On native, middle-button radius adjustment is a future
+ * > enhancement (currently the group renders with standard per-button radius).
+ */
+declare const ButtonGroup: ({ children, orientation, size, className, testID }: ButtonGroupProps) => react_jsx_runtime.JSX.Element;
+
+export { ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonGroupSize };

package/dist/components/ButtonGroup/index.js

@@ -0,0 +1,5 @@
+export { ButtonGroup } from '../../chunk-GTAXVTLF.js';
+import '../../chunk-CHXHRJNZ.js';
+import '../../chunk-WCQVDF3K.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/ButtonGroup/index.js.map

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

package/dist/components/Calendar/index.js

@@ -1,11 +1,11 @@
-export { Calendar, useCalendarCaption } from '../../chunk-2HMQDJ22.js';
+export { Calendar, useCalendarCaption } from '../../chunk-VOF3S5I4.js';
+import '../../chunk-PJTCO76H.js';
 import '../../chunk-GJMHNEQ3.js';
 import '../../chunk-4UFAZLSZ.js';
-import '../../chunk-UZD77M3J.js';
 import '../../chunk-7Z4NMNX6.js';
 import '../../chunk-5A2QOOVN.js';
-import '../../chunk-CHXHRJNZ.js';
 import '../../chunk-R5JMDDCB.js';
+import '../../chunk-CHXHRJNZ.js';
 import '../../chunk-WCQVDF3K.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/Card/index.js

@@ -1,7 +1,7 @@
-export { Card } from '../../chunk-OMU4R4Y5.js';
+export { Card } from '../../chunk-PQW5LKAI.js';
 import '../../chunk-5A2QOOVN.js';
-import '../../chunk-CHXHRJNZ.js';
 import '../../chunk-R5JMDDCB.js';
+import '../../chunk-CHXHRJNZ.js';
 import '../../chunk-WCQVDF3K.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/Checkbox/index.js

@@ -1,9 +1,9 @@
-export { Checkbox } from '../../chunk-NNFJKRXZ.js';
+export { Checkbox } from '../../chunk-H2LHWJ52.js';
 import '../../chunk-7Z4NMNX6.js';
 import '../../chunk-ZIBNLXIV.js';
 import '../../chunk-5A2QOOVN.js';
-import '../../chunk-CHXHRJNZ.js';
 import '../../chunk-R5JMDDCB.js';
+import '../../chunk-CHXHRJNZ.js';
 import '../../chunk-WCQVDF3K.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/Collapsible/index.cjs

@@ -0,0 +1,512 @@
+'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 CollapsibleContext = react.createContext(null);
+var useCollapsibleContext = /* @__PURE__ */ __name((label) => {
+  const ctx = react.useContext(CollapsibleContext);
+  if (!ctx) {
+    throw new Error(`<${label}> must be rendered inside a <Collapsible>.`);
+  }
+  return ctx;
+}, "useCollapsibleContext");
+var CollapsibleRoot = /* @__PURE__ */ __name(({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  children,
+  className,
+  testID
+}) => {
+  const baseId = react.useId();
+  const [innerOpen, setInnerOpen] = react.useState(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : innerOpen;
+  const toggle = react.useCallback(() => {
+    const next = !open;
+    if (!isControlled) {
+      setInnerOpen(next);
+    }
+    onOpenChange?.(next);
+  }, [open, isControlled, onOpenChange]);
+  const ctx = react.useMemo(
+    () => ({
+      open,
+      toggle,
+      contentId: `${baseId}-content`,
+      triggerId: `${baseId}-trigger`
+    }),
+    [open, toggle, baseId]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...testID !== void 0 ? { testID } : {},
+      className: cn("flex-col", className),
+      style: { flexDirection: "column" },
+      children
+    }
+  ) });
+}, "CollapsibleRoot");
+var CollapsibleTrigger = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const { open, toggle, contentId, triggerId } = useCollapsibleContext("Collapsible.Trigger");
+  const colors = useThemeColors();
+  const triggerStyle = {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: px(colors.spacing["2"]),
+    paddingHorizontal: px(colors.spacing["1"])
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      id: triggerId,
+      ...testID !== void 0 ? { testID } : {},
+      role: "button",
+      accessibilityRole: "button",
+      "aria-expanded": open,
+      "aria-controls": contentId,
+      onPress: toggle,
+      className: cn("flex-row items-center py-2 px-1", className),
+      style: triggerStyle,
+      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
+          },
+          children
+        }
+      ) : children
+    }
+  );
+}, "CollapsibleTrigger");
+var CollapsibleContent = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const { open, contentId, triggerId } = useCollapsibleContext("Collapsible.Content");
+  const wrapperRef = react.useRef(null);
+  const innerRef = react.useRef(null);
+  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 = "200ms";
+    wrapper.style.transitionTimingFunction = "cubic-bezier(0.16, 1, 0.3, 1)";
+    if (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 {
+      if (isFirstPaint) {
+        wrapper.style.maxHeight = "0px";
+        wrapper.style.opacity = "0";
+        return;
+      }
+      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";
+      });
+    }
+  }, [open]);
+  if (reactNative.Platform.OS !== "web") {
+    if (!open) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.View,
+      {
+        ...testID !== void 0 ? { testID } : {},
+        id: contentId,
+        "aria-labelledby": triggerId,
+        className: cn("flex-col", className),
+        style: { flexDirection: "column" },
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ref: (node) => {
+        wrapperRef.current = node;
+      },
+      ...testID !== void 0 ? { testID } : {},
+      id: contentId,
+      "aria-labelledby": triggerId,
+      "aria-hidden": !open,
+      className: cn("overflow-hidden", className),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.View,
+        {
+          ref: (node) => {
+            innerRef.current = node;
+          },
+          className: "flex-col",
+          style: { flexDirection: "column" },
+          children
+        }
+      )
+    }
+  );
+}, "CollapsibleContent");
+var Collapsible = Object.assign(CollapsibleRoot, {
+  Trigger: CollapsibleTrigger,
+  Content: CollapsibleContent
+});
+
+exports.Collapsible = Collapsible;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map