@nori-ui/core 0.0.5 → 1.0.2

package/dist/components/Progress/index.cjs

@@ -0,0 +1,493 @@
+'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 SIZE_PX = {
+  sm: 4,
+  md: 8,
+  lg: 12
+};
+var INDETERMINATE_DURATION_MS = 1500;
+var SHUTTLE_WIDTH_PCT = 30;
+var Progress = /* @__PURE__ */ __name(({
+  value,
+  max = 100,
+  tone = "primary",
+  size = "md",
+  label,
+  hidePercentage = false,
+  className,
+  testID,
+  ...rest
+}) => {
+  const colors = useThemeColors();
+  const ariaLabel = rest["aria-label"];
+  const ariaLabelledBy = rest["aria-labelledby"];
+  const isIndeterminate = value === void 0;
+  const safeMax = max <= 0 ? 100 : max;
+  const clamped = isIndeterminate ? 0 : Math.min(safeMax, Math.max(0, value));
+  const pct = isIndeterminate ? 0 : clamped / safeMax * 100;
+  const height = SIZE_PX[size];
+  const fillColor = tone === "primary" ? colors.semantic.interactive.primary : tone === "success" ? colors.color.success : tone === "warning" ? colors.color.warning : tone === "danger" ? colors.color.danger : colors.color.info;
+  const shuttle = react.useRef(new reactNative.Animated.Value(0)).current;
+  react.useEffect(() => {
+    if (!isIndeterminate) {
+      return;
+    }
+    const loop = reactNative.Animated.loop(
+      reactNative.Animated.timing(shuttle, {
+        toValue: 1,
+        duration: INDETERMINATE_DURATION_MS,
+        easing: reactNative.Easing.inOut(reactNative.Easing.ease),
+        // We animate `left` (a layout property), so the native driver
+        // can't be used. Web (rn-web) ignores `useNativeDriver`.
+        useNativeDriver: false
+      })
+    );
+    loop.start();
+    return () => {
+      loop.stop();
+    };
+  }, [isIndeterminate, shuttle]);
+  const trackStyle = {
+    width: "100%",
+    height,
+    backgroundColor: colors.semantic.background.subtle,
+    borderRadius: height / 2,
+    overflow: "hidden",
+    position: "relative"
+  };
+  const determinateFillStyle = {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    bottom: 0,
+    // Cast at the boundary — RN's typed DimensionValue is narrower than
+    // the percentage strings rn-web actually accepts.
+    width: `${pct}%`,
+    backgroundColor: fillColor,
+    borderRadius: height / 2
+  };
+  const buildIndeterminateStyle = /* @__PURE__ */ __name(() => {
+    const left = typeof shuttle.interpolate === "function" ? shuttle.interpolate({
+      inputRange: [0, 1],
+      outputRange: [`-${SHUTTLE_WIDTH_PCT}%`, "100%"]
+    }) : `-${SHUTTLE_WIDTH_PCT}%`;
+    return {
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      left,
+      width: `${SHUTTLE_WIDTH_PCT}%`,
+      backgroundColor: fillColor,
+      borderRadius: height / 2
+    };
+  }, "buildIndeterminateStyle");
+  const ariaProps = {
+    role: "progressbar",
+    accessibilityRole: "progressbar",
+    "aria-valuemin": 0,
+    "aria-valuemax": safeMax
+  };
+  if (!isIndeterminate) {
+    ariaProps["aria-valuenow"] = clamped;
+    ariaProps.accessibilityValue = { min: 0, max: safeMax, now: clamped };
+  }
+  if (ariaLabel !== void 0) {
+    ariaProps["aria-label"] = ariaLabel;
+    ariaProps.accessibilityLabel = ariaLabel;
+  } else if (label !== void 0) {
+    ariaProps["aria-label"] = label;
+    ariaProps.accessibilityLabel = label;
+  }
+  if (ariaLabelledBy !== void 0) {
+    ariaProps["aria-labelledby"] = ariaLabelledBy;
+  }
+  const showHeader = label !== void 0;
+  const showPercentage = showHeader && !hidePercentage && !isIndeterminate;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      ...testID !== void 0 ? { testID } : {},
+      className: cn("w-full", className),
+      style: { width: "100%" },
+      children: [
+        showHeader ? /* @__PURE__ */ jsxRuntime.jsxs(
+          reactNative.View,
+          {
+            style: {
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "space-between",
+              marginBottom: px(colors.spacing["2"]) - 2
+              // closest to legacy 6
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                reactNative.Text,
+                {
+                  style: {
+                    fontFamily: colors.fontFamily.body,
+                    fontSize: px(colors.fontSize.sm),
+                    color: colors.semantic.text.muted
+                  },
+                  children: label
+                }
+              ),
+              showPercentage ? /* @__PURE__ */ jsxRuntime.jsxs(
+                reactNative.Text,
+                {
+                  style: {
+                    fontFamily: colors.fontFamily.body,
+                    fontSize: px(colors.fontSize.sm),
+                    color: colors.semantic.text.muted,
+                    // Tabular numerals keep the percentage from
+                    // jittering as digits change width.
+                    fontVariant: ["tabular-nums"]
+                  },
+                  children: [
+                    Math.round(pct),
+                    "%"
+                  ]
+                }
+              ) : null
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { ...ariaProps, style: trackStyle, children: isIndeterminate ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Animated.View, { style: buildIndeterminateStyle() }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: determinateFillStyle }) })
+      ]
+    }
+  );
+}, "Progress");
+
+exports.Progress = Progress;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/theme/px.ts","../../../../tokens/build/theme.ts","../../../src/theme/context.tsx","../../../src/theme/use-color-scheme.tsx","../../../src/theme/use-theme-colors.ts","../../../src/utils/cn.ts","../../../src/components/Progress/Progress.tsx"],"names":["createContext","Platform","useContext","useState","Appearance","useEffect","useRef","Animated","Easing","jsxs","View","jsx","RNText"],"mappings":"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","file":"index.cjs","sourcesContent":["/**\n * Strip the `px` suffix from a CSS-flavored token value and return a\n * number, the form React Native style props expect for properties like\n * `borderRadius`, `paddingHorizontal`, `fontSize`, etc.\n *\n * The tokens package emits all dimensional tokens as `${number}px`\n * strings (it's the lingua franca for both CSS and Style Dictionary\n * consumers); inside RN we need the unitless number. RN-Web tolerates\n * both, but native is strict.\n *\n * Falls through unchanged for tokens that already came in as numbers\n * (forward-compat).\n *\n * Examples:\n *   px('6px')   → 6\n *   px('1.5px') → 1.5\n *   px(6)       → 6\n *   px('foo')   → 0   (defensive — bad input shouldn't crash render)\n */\nexport function px(value: string | number): number {\n    if (typeof value === 'number') {\n        return value;\n    }\n    const n = Number.parseFloat(value);\n    return Number.isFinite(n) ? n : 0;\n}\n","// GENERATED by @nori-ui/tokens — DO NOT EDIT.\n// Run `yarn build:tokens` to regenerate.\n\n// Generated for light mode.\n// Do not edit — run `yarn build:tokens`.\n\nexport const theme = {\n    color: {\n        danger: \"#ef4444\",\n        info: \"#3b82f6\",\n        neutral: {\n            \"100\": \"#f4f4f5\",\n            \"200\": \"#e4e4e7\",\n            \"300\": \"#d4d4d8\",\n            \"400\": \"#a1a1aa\",\n            \"50\": \"#fafafa\",\n            \"500\": \"#71717a\",\n            \"600\": \"#52525b\",\n            \"700\": \"#3f3f46\",\n            \"800\": \"#27272a\",\n            \"900\": \"#18181b\",\n        },\n        primary: {\n            \"100\": \"#ccfbf1\",\n            \"200\": \"#99f6e4\",\n            \"300\": \"#5eead4\",\n            \"400\": \"#2dd4bf\",\n            \"50\": \"#f0fdfa\",\n            \"500\": \"#14b8a6\",\n            \"600\": \"#0d9488\",\n            \"700\": \"#0f766e\",\n            \"800\": \"#115e59\",\n            \"900\": \"#134e4a\",\n        },\n        success: \"#22c55e\",\n        warning: \"#f59e0b\",\n    },\n    fontFamily: {\n        body: \"system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif\",\n        display: \"ui-serif, Georgia, 'Times New Roman', serif\",\n        mono: \"ui-monospace, 'SF Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace\",\n    },\n    fontSize: {\n        \"2xl\": \"24px\",\n        \"3xl\": \"30px\",\n        \"4xl\": \"36px\",\n        lg: \"18px\",\n        md: \"16px\",\n        sm: \"14px\",\n        xl: \"20px\",\n        xs: \"12px\",\n    },\n    fontWeight: {\n        bold: \"700\",\n        medium: \"500\",\n        regular: \"400\",\n        semibold: \"600\",\n    },\n    lineHeight: {\n        normal: \"1.4\",\n        relaxed: \"1.6\",\n        tight: \"1.2\",\n    },\n    radius: {\n        \"2xl\": \"16px\",\n        full: \"9999px\",\n        lg: \"8px\",\n        md: \"6px\",\n        none: \"0px\",\n        sm: \"4px\",\n        xl: \"12px\",\n    },\n    semantic: {\n        background: {\n            default: \"#fafafa\",\n            elevated: \"#ffffff\",\n            subtle: \"#f4f4f5\",\n        },\n        border: {\n            default: \"#e4e4e7\",\n            strong: \"#d4d4d8\",\n        },\n        interactive: {\n            destructive: \"#ef4444\",\n            primary: \"#0d9488\",\n            primaryHover: \"#0f766e\",\n            primaryPressed: \"#115e59\",\n        },\n        text: {\n            default: \"#18181b\",\n            inverted: \"#fafafa\",\n            muted: \"#52525b\",\n        },\n    },\n    shadow: {\n        lg: \"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)\",\n        md: \"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)\",\n        sm: \"0 1px 2px 0 rgba(0, 0, 0, 0.05)\",\n    },\n    spacing: {\n        \"0\": \"0px\",\n        \"1\": \"4px\",\n        \"10\": \"40px\",\n        \"12\": \"48px\",\n        \"16\": \"64px\",\n        \"2\": \"8px\",\n        \"20\": \"80px\",\n        \"24\": \"96px\",\n        \"3\": \"12px\",\n        \"4\": \"16px\",\n        \"5\": \"20px\",\n        \"6\": \"24px\",\n        \"8\": \"32px\",\n    },\n} as const;\n\nexport type Theme = typeof theme;\n\n\n// Dark mode overrides\n// Generated for dark mode.\n// Do not edit — run `yarn build:tokens`.\n\nexport const themeDark = {\n    color: {\n        danger: \"#ef4444\",\n        info: \"#3b82f6\",\n        neutral: {\n            \"100\": \"#f4f4f5\",\n            \"200\": \"#e4e4e7\",\n            \"300\": \"#d4d4d8\",\n            \"400\": \"#a1a1aa\",\n            \"50\": \"#fafafa\",\n            \"500\": \"#71717a\",\n            \"600\": \"#52525b\",\n            \"700\": \"#3f3f46\",\n            \"800\": \"#27272a\",\n            \"900\": \"#18181b\",\n        },\n        primary: {\n            \"100\": \"#ccfbf1\",\n            \"200\": \"#99f6e4\",\n            \"300\": \"#5eead4\",\n            \"400\": \"#2dd4bf\",\n            \"50\": \"#f0fdfa\",\n            \"500\": \"#14b8a6\",\n            \"600\": \"#0d9488\",\n            \"700\": \"#0f766e\",\n            \"800\": \"#115e59\",\n            \"900\": \"#134e4a\",\n        },\n        success: \"#22c55e\",\n        warning: \"#f59e0b\",\n    },\n    fontFamily: {\n        body: \"system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif\",\n        display: \"ui-serif, Georgia, 'Times New Roman', serif\",\n        mono: \"ui-monospace, 'SF Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace\",\n    },\n    fontSize: {\n        \"2xl\": \"24px\",\n        \"3xl\": \"30px\",\n        \"4xl\": \"36px\",\n        lg: \"18px\",\n        md: \"16px\",\n        sm: \"14px\",\n        xl: \"20px\",\n        xs: \"12px\",\n    },\n    fontWeight: {\n        bold: \"700\",\n        medium: \"500\",\n        regular: \"400\",\n        semibold: \"600\",\n    },\n    lineHeight: {\n        normal: \"1.4\",\n        relaxed: \"1.6\",\n        tight: \"1.2\",\n    },\n    radius: {\n        \"2xl\": \"16px\",\n        full: \"9999px\",\n        lg: \"8px\",\n        md: \"6px\",\n        none: \"0px\",\n        sm: \"4px\",\n        xl: \"12px\",\n    },\n    semantic: {\n        background: {\n            default: \"#18181b\",\n            elevated: \"#3f3f46\",\n            subtle: \"#27272a\",\n        },\n        border: {\n            default: \"#3f3f46\",\n            strong: \"#52525b\",\n        },\n        interactive: {\n            destructive: \"#ef4444\",\n            primary: \"#2dd4bf\",\n            primaryHover: \"#5eead4\",\n            primaryPressed: \"#99f6e4\",\n        },\n        text: {\n            default: \"#fafafa\",\n            inverted: \"#18181b\",\n            muted: \"#a1a1aa\",\n        },\n    },\n    shadow: {\n        lg: \"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)\",\n        md: \"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)\",\n        sm: \"0 1px 2px 0 rgba(0, 0, 0, 0.05)\",\n    },\n    spacing: {\n        \"0\": \"0px\",\n        \"1\": \"4px\",\n        \"10\": \"40px\",\n        \"12\": \"48px\",\n        \"16\": \"64px\",\n        \"2\": \"8px\",\n        \"20\": \"80px\",\n        \"24\": \"96px\",\n        \"3\": \"12px\",\n        \"4\": \"16px\",\n        \"5\": \"20px\",\n        \"6\": \"24px\",\n        \"8\": \"32px\",\n    },\n} as const;\n\n","'use client';\n\nimport { themeDark as defaultDark, theme as defaultLight, type Theme } from '@nori-ui/tokens';\nimport type { ReactNode } from 'react';\nimport { createContext } from 'react';\n\n/**\n * A `NoriTheme` is a paired light/dark palette. The active half is picked\n * by `useColorScheme()` so the same theme object covers both schemes.\n *\n * Build one yourself by spreading the defaults and overriding the colors\n * you care about, or pick a preset from `@nori-ui/core/themes` (see the\n * Theming docs for examples).\n */\nexport type NoriTheme = {\n    light: Theme;\n    dark: Theme;\n};\n\n/**\n * Default Nori palette — teal primary on a warm-paper light surface, and\n * teal-400 primary on a deep-zinc dark surface. Mirrors the `theme` /\n * `themeDark` exports from @nori-ui/tokens.\n */\nexport const defaultTheme: NoriTheme = {\n    light: defaultLight,\n    dark: defaultDark as unknown as Theme,\n};\n\n// Context value is the FULL pair, not the active half. `useThemeColors`\n// (the hook components reach for) resolves it to the right one based on\n// the current color scheme. Storing the pair means a parent only has to\n// declare the theme once — switching scheme is a separate concern.\nexport const ThemeContext = createContext<NoriTheme>(defaultTheme);\nThemeContext.displayName = 'ThemeContext';\n\nexport type ThemeProviderProps = {\n    /**\n     * The theme to apply to descendants. Pass either:\n     *   - a full `NoriTheme` (`{ light, dark }`) — both schemes covered\n     *   - a single `Theme` — used for both light and dark (rare; mostly\n     *     useful when you ONLY ever render in one scheme)\n     *   - omit — falls back to the Nori default (teal palette)\n     */\n    theme?: NoriTheme | Theme;\n    children?: ReactNode;\n};\n\nconst isFullTheme = (t: NoriTheme | Theme): t is NoriTheme => 'light' in t && 'dark' in t;\n\nexport function ThemeProvider({ theme, children }: ThemeProviderProps) {\n    const value: NoriTheme =\n        theme === undefined ? defaultTheme : isFullTheme(theme) ? theme : { light: theme, dark: theme };\n    return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n}\n","'use client';\n\nimport { createContext, type ReactNode, useContext, useEffect, useState } from 'react';\nimport { Appearance, Platform } from 'react-native';\n\nexport type ColorScheme = 'light' | 'dark';\n\n// Override channel so a parent can force a scheme (e.g. an app shell with\n// hard-coded dark chrome that wants nested components to render against\n// the dark token half regardless of the OS Appearance). `null` means\n// \"no override — use the system signal\".\nconst ColorSchemeOverrideContext = createContext<ColorScheme | null>(null);\nColorSchemeOverrideContext.displayName = 'ColorSchemeOverrideContext';\n\nexport type ColorSchemeProviderProps = {\n    /** Force a specific scheme for descendants. */\n    value: ColorScheme;\n    children?: ReactNode;\n};\n\n/**\n * Forces a color scheme for all descendants. Useful when a screen's chrome\n * is hard-coded to one scheme (e.g. a forced-dark editorial surface) and\n * you want library components inside it to follow that, not the OS.\n */\nexport function ColorSchemeProvider({ value, children }: ColorSchemeProviderProps) {\n    return <ColorSchemeOverrideContext.Provider value={value}>{children}</ColorSchemeOverrideContext.Provider>;\n}\n\nconst isWeb = Platform.OS === 'web';\n\n// Web: a document is \"in dark mode\" when the root <html> element carries\n// the `dark` class (Tailwind / Fumadocs convention) OR a `data-theme=\"dark\"`\n// attribute (matches the `darkMode` selectors in our Tailwind preset).\n// We deliberately don't fall back to `prefers-color-scheme` — the app\n// usually owns that decision and writes it onto <html>; tracking the system\n// preference too would fight the app's chosen value.\nfunction readWebScheme(): ColorScheme {\n    if (typeof document === 'undefined') {\n        return 'light';\n    }\n    const root = document.documentElement;\n    if (root.classList.contains('dark')) {\n        return 'dark';\n    }\n    if (root.getAttribute('data-theme') === 'dark') {\n        return 'dark';\n    }\n    return 'light';\n}\n\n/**\n * Returns the current color scheme — `'light'` or `'dark'`.\n *\n * On web: observes the root `<html>` element's `class=\"dark\"` and\n * `data-theme=\"dark\"` attribute (the same signals our Tailwind preset\n * keys on). Updates live as those flip.\n *\n * On native: delegates to `react-native`'s `Appearance` API so the hook\n * tracks the OS preference without extra wiring.\n *\n * Components consume this indirectly via `useThemeColors()`; reach for\n * this directly when you need the raw scheme (e.g. to swap an icon).\n */\nexport function useColorScheme(): ColorScheme {\n    // A `<ColorSchemeProvider value=\"dark\">` ancestor (or NoriProvider's\n    // `colorScheme` prop, which mounts one) wins over the OS signal — the\n    // app shell knows which scheme its chrome is locked to.\n    const override = useContext(ColorSchemeOverrideContext);\n\n    const [scheme, setScheme] = useState<ColorScheme>(() => {\n        if (isWeb) {\n            return readWebScheme();\n        }\n        return (Appearance.getColorScheme() ?? 'light') as ColorScheme;\n    });\n\n    useEffect(() => {\n        if (isWeb) {\n            const root = document.documentElement;\n            const update = () => setScheme(readWebScheme());\n            const observer = new MutationObserver(update);\n            observer.observe(root, { attributes: true, attributeFilter: ['class', 'data-theme'] });\n            // Sync once after mount in case SSR shipped a different value.\n            update();\n            return () => observer.disconnect();\n        }\n\n        const sub = Appearance.addChangeListener(({ colorScheme }) => {\n            setScheme((colorScheme ?? 'light') as ColorScheme);\n        });\n        return () => sub.remove();\n    }, []);\n\n    return override ?? scheme;\n}\n","'use client';\n\nimport type { Theme } from '@nori-ui/tokens';\nimport { useContext } from 'react';\nimport { ThemeContext } from './context';\nimport { useColorScheme } from './use-color-scheme';\n\n/**\n * Returns the active token palette — `theme.light` in light mode,\n * `theme.dark` in dark mode. Resolves the theme via `ThemeContext` so\n * any ancestor `<ThemeProvider theme={...}>` flows through. With no\n * provider in the tree, the default Nori palette (teal) is used.\n *\n * Use this **inside a component** when you need a hex value for a React\n * Native `style` prop (`backgroundColor`, `borderColor`, etc.).\n *\n * Note: className-based styles (e.g. `bg-semantic-interactive-primary`)\n * compile against the @nori-ui/tokens palette at build time and don't\n * follow `<ThemeProvider>` overrides today. Inline styles via this hook\n * always do — and inline beats class on CSS specificity, so the visible\n * color you see is whatever the hook resolves to. CSS-variable theming\n * for the className path is a planned follow-up.\n */\nexport function useThemeColors(): Theme {\n    const scheme = useColorScheme();\n    const themePair = useContext(ThemeContext);\n    return scheme === 'dark' ? themePair.dark : themePair.light;\n}\n","// cn — class-name merger. clsx-compatible shape.\n//\n// Intentionally does NOT deduplicate Tailwind conflicts (e.g. \"text-sm text-lg\").\n// That's `tailwind-merge`'s job; we defer adding it until a component actually\n// needs it, to keep the core tree-shakable and the runtime zero-dep.\n\nexport type ClassInput =\n    | string\n    | number\n    | boolean\n    | null\n    | undefined\n    | ClassInput[]\n    | Record<string, boolean | number | null | undefined>;\n\nexport function cn(...inputs: ClassInput[]): string {\n    const out: string[] = [];\n    for (const input of inputs) {\n        append(out, input);\n    }\n    return out.join(' ');\n}\n\nfunction append(out: string[], input: ClassInput): void {\n    if (!input) {\n        return;\n    }\n    if (typeof input === 'string') {\n        if (input.length > 0) {\n            out.push(input);\n        }\n        return;\n    }\n    if (typeof input === 'number') {\n        return; // numbers are never class names\n    }\n    if (Array.isArray(input)) {\n        for (const inner of input) {\n            append(out, inner);\n        }\n        return;\n    }\n    if (typeof input === 'object') {\n        for (const key of Object.keys(input)) {\n            if (input[key]) {\n                out.push(key);\n            }\n        }\n    }\n}\n","'use client';\n\nimport { useEffect, useRef } from 'react';\nimport { Animated, Easing, Text as RNText, View, type ViewStyle } from 'react-native';\nimport { px } from '../../theme/px';\nimport { useThemeColors } from '../../theme/use-theme-colors';\nimport { cn } from '../../utils/cn';\n\nexport type ProgressTone = 'primary' | 'info' | 'success' | 'warning' | 'danger';\nexport type ProgressSize = 'sm' | 'md' | 'lg';\n\nexport type ProgressProps = {\n    /**\n     * Current progress value (`0..max`). Omit to render the indeterminate\n     * marquee variant (use this when you don't know how long the work\n     * will take, e.g. an initial load before headers come back).\n     */\n    value?: number;\n    /** Upper bound for `value`. @defaultValue 100 */\n    max?: number;\n    /**\n     * Color of the fill / shuttle. `primary` follows the theme's interactive\n     * color (matches buttons + sliders); the rest map to semantic status colors.\n     * @defaultValue 'primary'\n     */\n    tone?: ProgressTone;\n    /**\n     * Bar height — `sm` 4px, `md` 8px (default), `lg` 12px. The track is\n     * always pill-shaped (border-radius = height/2).\n     * @defaultValue 'md'\n     */\n    size?: ProgressSize;\n    /**\n     * Optional label rendered above the bar. When set, also enables a\n     * percentage readout on the right side for determinate progress.\n     */\n    label?: string;\n    /**\n     * Hide the auto-rendered percentage when a `label` is provided. Useful\n     * when the label itself already conveys the number (e.g. \"Step 3 of 5\").\n     * @defaultValue false\n     */\n    hidePercentage?: boolean;\n    /** Accessibility label when no visible `label` is provided. */\n    'aria-label'?: string;\n    /** Reference to a labeling element by id. */\n    'aria-labelledby'?: string;\n    className?: string;\n    testID?: string;\n};\n\nconst SIZE_PX: Record<ProgressSize, number> = {\n    sm: 4,\n    md: 8,\n    lg: 12,\n};\n\nconst INDETERMINATE_DURATION_MS = 1500;\nconst SHUTTLE_WIDTH_PCT = 30;\n\n/**\n * Linear progress indicator. Use the determinate form (`value` set) to\n * communicate \"we're 42% done\"; use the indeterminate form (`value`\n * omitted) for \"we're working, no ETA\". The track is always pill-shaped\n * and the fill animates smoothly between renders for the determinate\n * variant — keep updates throttled to ~10/s in the parent to avoid\n * jitter.\n *\n * Cross-platform: built on `View` + `Animated.View` so it renders\n * identically on web (rn-web) and native. Uses `useThemeColors()` to\n * pick up dark-mode flips automatically.\n *\n * Accessibility: maps to `role=\"progressbar\"` with `aria-valuemin`,\n * `aria-valuemax`, and (for determinate) `aria-valuenow`. Provide an\n * `aria-label`, `aria-labelledby`, or visible `label` so the bar is\n * named.\n */\nexport const Progress = ({\n    value,\n    max = 100,\n    tone = 'primary',\n    size = 'md',\n    label,\n    hidePercentage = false,\n    className,\n    testID,\n    ...rest\n}: ProgressProps) => {\n    const colors = useThemeColors();\n    const ariaLabel = rest['aria-label'];\n    const ariaLabelledBy = rest['aria-labelledby'];\n\n    const isIndeterminate = value === undefined;\n    const safeMax = max <= 0 ? 100 : max;\n    const clamped = isIndeterminate ? 0 : Math.min(safeMax, Math.max(0, value));\n    const pct = isIndeterminate ? 0 : (clamped / safeMax) * 100;\n\n    const height = SIZE_PX[size];\n\n    const fillColor =\n        tone === 'primary'\n            ? colors.semantic.interactive.primary\n            : tone === 'success'\n              ? colors.color.success\n              : tone === 'warning'\n                ? colors.color.warning\n                : tone === 'danger'\n                  ? colors.color.danger\n                  : colors.color.info;\n\n    // Indeterminate marquee — a 30%-wide shuttle that slides from -30% to\n    // 100% on a continuous loop. Driven by `Animated.Value` (0..1) which we\n    // interpolate to a percent string for `left`. ease-in-out keeps the\n    // motion subtle so the bar never feels frantic.\n    const shuttle = useRef(new Animated.Value(0)).current;\n    useEffect(() => {\n        if (!isIndeterminate) {\n            return;\n        }\n        const loop = Animated.loop(\n            Animated.timing(shuttle, {\n                toValue: 1,\n                duration: INDETERMINATE_DURATION_MS,\n                easing: Easing.inOut(Easing.ease),\n                // We animate `left` (a layout property), so the native driver\n                // can't be used. Web (rn-web) ignores `useNativeDriver`.\n                useNativeDriver: false,\n            })\n        );\n        loop.start();\n        return () => {\n            loop.stop();\n        };\n    }, [isIndeterminate, shuttle]);\n\n    const trackStyle: ViewStyle = {\n        width: '100%',\n        height,\n        backgroundColor: colors.semantic.background.subtle,\n        borderRadius: height / 2,\n        overflow: 'hidden',\n        position: 'relative',\n    };\n\n    const determinateFillStyle: ViewStyle = {\n        position: 'absolute',\n        left: 0,\n        top: 0,\n        bottom: 0,\n        // Cast at the boundary — RN's typed DimensionValue is narrower than\n        // the percentage strings rn-web actually accepts.\n        width: `${pct}%` as unknown as number,\n        backgroundColor: fillColor,\n        borderRadius: height / 2,\n    };\n\n    // Build the indeterminate style only when needed — `Animated.Value.interpolate`\n    // returns an animated node that RN reads at render; we keep the call inside\n    // the branch so determinate renders never hit it (and so test envs that\n    // stub `Animated.Value` don't choke on a missing `interpolate`).\n    const buildIndeterminateStyle = () => {\n        const left =\n            typeof shuttle.interpolate === 'function'\n                ? shuttle.interpolate({\n                      inputRange: [0, 1],\n                      outputRange: [`-${SHUTTLE_WIDTH_PCT}%`, '100%'],\n                  })\n                : (`-${SHUTTLE_WIDTH_PCT}%` as unknown as number);\n        return {\n            position: 'absolute' as const,\n            top: 0,\n            bottom: 0,\n            left: left as unknown as number,\n            width: `${SHUTTLE_WIDTH_PCT}%` as unknown as number,\n            backgroundColor: fillColor,\n            borderRadius: height / 2,\n        };\n    };\n\n    // ARIA: only emit aria-valuenow when determinate so AT announces\n    // \"in progress\" rather than \"0%\" while indeterminate.\n    const ariaProps: Record<string, unknown> = {\n        role: 'progressbar',\n        accessibilityRole: 'progressbar',\n        'aria-valuemin': 0,\n        'aria-valuemax': safeMax,\n    };\n    if (!isIndeterminate) {\n        ariaProps['aria-valuenow'] = clamped;\n        ariaProps.accessibilityValue = { min: 0, max: safeMax, now: clamped };\n    }\n    if (ariaLabel !== undefined) {\n        ariaProps['aria-label'] = ariaLabel;\n        ariaProps.accessibilityLabel = ariaLabel;\n    } else if (label !== undefined) {\n        ariaProps['aria-label'] = label;\n        ariaProps.accessibilityLabel = label;\n    }\n    if (ariaLabelledBy !== undefined) {\n        ariaProps['aria-labelledby'] = ariaLabelledBy;\n    }\n\n    const showHeader = label !== undefined;\n    const showPercentage = showHeader && !hidePercentage && !isIndeterminate;\n\n    return (\n        <View\n            {...(testID !== undefined ? { testID } : {})}\n            className={cn('w-full', className)}\n            style={{ width: '100%' }}\n        >\n            {showHeader ? (\n                <View\n                    style={{\n                        flexDirection: 'row',\n                        alignItems: 'center',\n                        justifyContent: 'space-between',\n                        marginBottom: px(colors.spacing['2']) - 2, // closest to legacy 6\n                    }}\n                >\n                    <RNText\n                        style={{\n                            fontFamily: colors.fontFamily.body,\n                            fontSize: px(colors.fontSize.sm),\n                            color: colors.semantic.text.muted,\n                        }}\n                    >\n                        {label}\n                    </RNText>\n                    {showPercentage ? (\n                        <RNText\n                            style={{\n                                fontFamily: colors.fontFamily.body,\n                                fontSize: px(colors.fontSize.sm),\n                                color: colors.semantic.text.muted,\n                                // Tabular numerals keep the percentage from\n                                // jittering as digits change width.\n                                fontVariant: ['tabular-nums'],\n                            }}\n                        >\n                            {Math.round(pct)}%\n                        </RNText>\n                    ) : null}\n                </View>\n            ) : null}\n            <View {...ariaProps} style={trackStyle}>\n                {isIndeterminate ? (\n                    <Animated.View style={buildIndeterminateStyle()} />\n                ) : (\n                    <View style={determinateFillStyle} />\n                )}\n            </View>\n        </View>\n    );\n};\n"]}

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

@@ -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 };