@nori-ui/core 0.0.5 → 1.0.2

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

@@ -0,0 +1,63 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ProgressTone = 'primary' | 'info' | 'success' | 'warning' | 'danger';
+type ProgressSize = 'sm' | 'md' | 'lg';
+type ProgressProps = {
+    /**
+     * Current progress value (`0..max`). Omit to render the indeterminate
+     * marquee variant (use this when you don't know how long the work
+     * will take, e.g. an initial load before headers come back).
+     */
+    value?: number;
+    /** Upper bound for `value`. @defaultValue 100 */
+    max?: number;
+    /**
+     * Color of the fill / shuttle. `primary` follows the theme's interactive
+     * color (matches buttons + sliders); the rest map to semantic status colors.
+     * @defaultValue 'primary'
+     */
+    tone?: ProgressTone;
+    /**
+     * Bar height — `sm` 4px, `md` 8px (default), `lg` 12px. The track is
+     * always pill-shaped (border-radius = height/2).
+     * @defaultValue 'md'
+     */
+    size?: ProgressSize;
+    /**
+     * Optional label rendered above the bar. When set, also enables a
+     * percentage readout on the right side for determinate progress.
+     */
+    label?: string;
+    /**
+     * Hide the auto-rendered percentage when a `label` is provided. Useful
+     * when the label itself already conveys the number (e.g. "Step 3 of 5").
+     * @defaultValue false
+     */
+    hidePercentage?: boolean;
+    /** Accessibility label when no visible `label` is provided. */
+    'aria-label'?: string;
+    /** Reference to a labeling element by id. */
+    'aria-labelledby'?: string;
+    className?: string;
+    testID?: string;
+};
+/**
+ * Linear progress indicator. Use the determinate form (`value` set) to
+ * communicate "we're 42% done"; use the indeterminate form (`value`
+ * omitted) for "we're working, no ETA". The track is always pill-shaped
+ * and the fill animates smoothly between renders for the determinate
+ * variant — keep updates throttled to ~10/s in the parent to avoid
+ * jitter.
+ *
+ * Cross-platform: built on `View` + `Animated.View` so it renders
+ * identically on web (rn-web) and native. Uses `useThemeColors()` to
+ * pick up dark-mode flips automatically.
+ *
+ * Accessibility: maps to `role="progressbar"` with `aria-valuemin`,
+ * `aria-valuemax`, and (for determinate) `aria-valuenow`. Provide an
+ * `aria-label`, `aria-labelledby`, or visible `label` so the bar is
+ * named.
+ */
+declare const Progress: ({ value, max, tone, size, label, hidePercentage, className, testID, ...rest }: ProgressProps) => react_jsx_runtime.JSX.Element;
+
+export { Progress, type ProgressProps, type ProgressSize, type ProgressTone };

package/dist/components/Progress/index.js

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

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

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

package/dist/components/Radio/index.cjs

@@ -0,0 +1,584 @@
+'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 RadioGroupContext = react.createContext(null);
+var useRadioGroupContext = /* @__PURE__ */ __name(() => {
+  const ctx = react.useContext(RadioGroupContext);
+  if (!ctx) {
+    throw new Error("<Radio> must be rendered inside a <Radio.Group>.");
+  }
+  return ctx;
+}, "useRadioGroupContext");
+var ROW_LAYOUT_BASE = { flexDirection: "row", alignItems: "center" };
+var DOT_OUTER_BASE = {
+  width: 18,
+  // component-density literal — not from theme
+  height: 18,
+  // component-density literal — not from theme
+  borderRadius: 9,
+  // perfect circle of dot diameter — not from theme
+  borderWidth: 1.5,
+  alignItems: "center",
+  justifyContent: "center"
+};
+var DOT_INNER_BASE = {
+  width: 8,
+  // component-density literal — not from theme
+  height: 8,
+  // component-density literal — not from theme
+  borderRadius: 4
+  // perfect circle — not from theme
+};
+var RadioGroup = /* @__PURE__ */ __name(({
+  value,
+  defaultValue,
+  onChange,
+  disabled = false,
+  orientation = "vertical",
+  name,
+  children,
+  className,
+  testID
+}) => {
+  const [inner, setInner] = react.useState(defaultValue);
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : inner;
+  const refs = react.useRef(/* @__PURE__ */ new Map());
+  const orderRef = react.useRef([]);
+  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 select = react.useCallback(
+    (next) => {
+      if (disabled) {
+        return;
+      }
+      if (!isControlled) {
+        setInner(next);
+      }
+      onChange?.(next);
+    },
+    [disabled, isControlled, onChange]
+  );
+  const focusValue = react.useCallback((next) => {
+    const ref = refs.current.get(next);
+    ref?.current?.focus?.();
+  }, []);
+  const moveBy = react.useCallback(
+    (offset) => {
+      const order = orderRef.current;
+      if (order.length === 0) {
+        return;
+      }
+      const idx = current ? order.indexOf(current) : -1;
+      const start = idx === -1 ? offset === 1 ? -1 : 0 : idx;
+      const len = order.length;
+      const next = order[(start + offset + len) % len];
+      if (!next) {
+        return;
+      }
+      select(next);
+      focusValue(next);
+    },
+    [current, focusValue, select]
+  );
+  const handleKeyDown = react.useCallback(
+    (event) => {
+      const order = orderRef.current;
+      if (order.length === 0) {
+        return;
+      }
+      switch (event.key) {
+        case "ArrowDown":
+        case "ArrowRight": {
+          event.preventDefault();
+          moveBy(1);
+          return;
+        }
+        case "ArrowUp":
+        case "ArrowLeft": {
+          event.preventDefault();
+          moveBy(-1);
+          return;
+        }
+        case "Home": {
+          event.preventDefault();
+          const first = order[0];
+          if (first) {
+            select(first);
+            focusValue(first);
+          }
+          return;
+        }
+        case "End": {
+          event.preventDefault();
+          const last = order[order.length - 1];
+          if (last) {
+            select(last);
+            focusValue(last);
+          }
+          return;
+        }
+      }
+    },
+    [focusValue, moveBy, select]
+  );
+  const ctxValue = react.useMemo(
+    () => ({ value: current, select, disabled, orientation, name, register, unregister }),
+    [current, select, disabled, orientation, name, register, unregister]
+  );
+  const groupProps = {
+    role: "radiogroup",
+    accessibilityRole: "radiogroup",
+    "aria-orientation": orientation,
+    "aria-disabled": disabled || void 0,
+    onKeyDown: handleKeyDown,
+    ...testID !== void 0 ? { testID } : {}
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    RadioGroupViewport,
+    {
+      groupProps,
+      orientation,
+      disabled,
+      ...className !== void 0 ? { className } : {},
+      children
+    }
+  ) });
+}, "RadioGroup");
+var RadioGroupViewport = /* @__PURE__ */ __name(({
+  groupProps,
+  orientation,
+  disabled,
+  className,
+  children
+}) => {
+  const colors = useThemeColors();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...groupProps,
+      className: cn(
+        orientation === "horizontal" ? "flex-row gap-4" : "flex-col gap-3",
+        disabled ? "opacity-60" : void 0,
+        className
+      ),
+      style: [
+        orientation === "horizontal" ? { flexDirection: "row", gap: px(colors.spacing["4"]) } : { flexDirection: "column", gap: px(colors.spacing["3"]) },
+        disabled ? { opacity: 0.6 } : null
+      ],
+      children
+    }
+  );
+}, "RadioGroupViewport");
+var RadioOption = /* @__PURE__ */ __name(({ value, label, disabled, children, className, testID }) => {
+  const ctx = useRadioGroupContext();
+  const colors = useThemeColors();
+  const ownRef = react.useRef(null);
+  const selected = ctx.value === value;
+  const isDisabled = disabled || ctx.disabled;
+  react.useEffect(() => {
+    ctx.register(value, ownRef);
+    return () => ctx.unregister(value);
+  }, [ctx, value]);
+  const onPress = react.useCallback(() => {
+    if (isDisabled) {
+      return;
+    }
+    ctx.select(value);
+  }, [ctx, value, isDisabled]);
+  const tabIndex = selected || ctx.value === void 0 && isFirstOption() ? 0 : -1;
+  const accessibilityLabel = label ?? value;
+  const radioProps = {
+    ref: /* @__PURE__ */ __name((node) => {
+      ownRef.current = node;
+    }, "ref"),
+    role: "radio",
+    accessibilityRole: "radio",
+    "aria-checked": selected,
+    accessibilityState: { checked: selected, disabled: Boolean(isDisabled) },
+    accessibilityLabel,
+    "aria-label": accessibilityLabel,
+    tabIndex,
+    onPress,
+    ...isDisabled ? { "aria-disabled": true, disabled: true } : {},
+    ...testID !== void 0 ? { testID } : {},
+    ...ctx.name ? { name: ctx.name } : {}
+  };
+  const dotOuterStyle = {
+    ...DOT_OUTER_BASE,
+    backgroundColor: colors.semantic.background.elevated,
+    borderColor: selected ? colors.semantic.interactive.primary : colors.color.neutral["400"]
+  };
+  const dotInnerStyle = { ...DOT_INNER_BASE, backgroundColor: colors.semantic.interactive.primary };
+  const rowStyle = { ...ROW_LAYOUT_BASE, gap: px(colors.spacing["2"]) };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.Pressable,
+    {
+      ...radioProps,
+      className: cn("flex-row items-center gap-2", isDisabled ? "opacity-60" : void 0, className),
+      style: [rowStyle, isDisabled ? { opacity: 0.6 } : null],
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: dotOuterStyle, children: selected ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: dotInnerStyle }) : null }),
+        children ?? (label !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: {
+              color: colors.semantic.text.default,
+              fontFamily: colors.fontFamily.body,
+              fontSize: px(colors.fontSize.md)
+            },
+            children: label
+          }
+        ) : null)
+      ]
+    }
+  );
+}, "RadioOption");
+function isFirstOption(ctx, value) {
+  return true;
+}
+__name(isFirstOption, "isFirstOption");
+var Radio = Object.assign(RadioOption, {
+  Group: RadioGroup
+});
+
+exports.Radio = Radio;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map