@nori-ui/core 1.6.0 → 1.8.0

package/dist/components/InputOTP/index.cjs

@@ -0,0 +1,580 @@
+'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");
+function isAllowed(char, pattern) {
+  if (pattern === "numeric") {
+    return /^\d$/.test(char);
+  }
+  return /^[a-zA-Z0-9]$/.test(char);
+}
+__name(isAllowed, "isAllowed");
+function filterValue(value, pattern, length) {
+  return value.split("").filter((c) => isAllowed(c, pattern)).slice(0, length).join("");
+}
+__name(filterValue, "filterValue");
+var InputOTP = /* @__PURE__ */ __name(({
+  value = "",
+  onChange,
+  onComplete,
+  length = 6,
+  placeholder = "\xB7",
+  pattern = "numeric",
+  disabled = false,
+  autoFocus = false,
+  id,
+  name,
+  "aria-label": ariaLabel = "One-time code",
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  className,
+  testID
+}) => {
+  const colors = useThemeColors();
+  const [cells, setCells] = react.useState(() => {
+    const filtered = filterValue(value, pattern, length);
+    return Array.from({ length }, (_, i) => filtered[i] ?? "");
+  });
+  const prevValue = react.useRef(value);
+  react.useEffect(() => {
+    if (value !== prevValue.current) {
+      prevValue.current = value;
+      const filtered = filterValue(value, pattern, length);
+      setCells(Array.from({ length }, (_, i) => filtered[i] ?? ""));
+    }
+  }, [value, pattern, length]);
+  const inputRefs = react.useRef([]);
+  const focusCell = react.useCallback(
+    (idx) => {
+      if (idx >= 0 && idx < length) {
+        inputRefs.current[idx]?.focus();
+      }
+    },
+    [length]
+  );
+  const updateCells = react.useCallback(
+    (next) => {
+      setCells(next);
+      const joined = next.join("");
+      onChange?.(joined);
+      if (joined.length === length && !next.includes("")) {
+        onComplete?.(joined);
+      }
+    },
+    [onChange, onComplete, length]
+  );
+  const onContainerPaste = react.useCallback(
+    (e) => {
+      e.preventDefault();
+      const text = e.clipboardData.getData("text/plain") ?? "";
+      const filtered = filterValue(text, pattern, length);
+      const next = Array.from({ length }, (_, i) => filtered[i] ?? "");
+      updateCells(next);
+      const nextEmpty = next.indexOf("");
+      focusCell(nextEmpty === -1 ? length - 1 : nextEmpty);
+    },
+    [pattern, length, updateCells, focusCell]
+  );
+  const handleChangeText = react.useCallback(
+    (text, idx) => {
+      if (text.length > 1) {
+        const filtered = filterValue(text, pattern, length);
+        const next2 = Array.from({ length }, (_, i) => filtered[i] ?? "");
+        updateCells(next2);
+        const nextEmpty = next2.indexOf("");
+        focusCell(nextEmpty === -1 ? length - 1 : nextEmpty);
+        return;
+      }
+      const char = text.slice(-1);
+      if (char && !isAllowed(char, pattern)) {
+        return;
+      }
+      const next = [...cells];
+      next[idx] = char;
+      updateCells(next);
+      if (char) {
+        focusCell(idx + 1);
+      }
+    },
+    [cells, pattern, length, updateCells, focusCell]
+  );
+  const handleWebKeyDown = react.useCallback(
+    (e, idx) => {
+      if (e.key === "Backspace") {
+        if (cells[idx] !== "") {
+          const next = [...cells];
+          next[idx] = "";
+          updateCells(next);
+        } else {
+          focusCell(idx - 1);
+        }
+        e.preventDefault();
+      } else if (e.key === "ArrowLeft") {
+        focusCell(idx - 1);
+        e.preventDefault();
+      } else if (e.key === "ArrowRight") {
+        focusCell(idx + 1);
+        e.preventDefault();
+      } else if (e.key.length === 1 && isAllowed(e.key, pattern)) {
+        const next = [...cells];
+        next[idx] = e.key;
+        updateCells(next);
+        focusCell(idx + 1);
+        e.preventDefault();
+      }
+    },
+    [cells, pattern, focusCell, updateCells]
+  );
+  const handleNativeKeyPress = react.useCallback(
+    (e, idx) => {
+      if (e.nativeEvent.key === "Backspace") {
+        if (cells[idx] !== "") {
+          const next = [...cells];
+          next[idx] = "";
+          updateCells(next);
+        } else {
+          focusCell(idx - 1);
+        }
+      }
+    },
+    [cells, focusCell, updateCells]
+  );
+  const cellStyle = [
+    styles.cell,
+    {
+      width: px(48),
+      height: px(56),
+      borderRadius: px(colors.radius.md),
+      borderColor: colors.semantic.border.default,
+      backgroundColor: colors.semantic.background.elevated,
+      color: colors.semantic.text.default,
+      fontSize: px(colors.fontSize.xl),
+      fontFamily: colors.fontFamily.body
+    },
+    disabled ? styles.disabled : null,
+    ariaInvalid === true || ariaInvalid === "true" ? { borderColor: colors.color.danger } : null
+  ];
+  const isWeb2 = reactNative.Platform.OS === "web";
+  const containerProps = isWeb2 ? {
+    onPaste: onContainerPaste,
+    role: "group",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy
+  } : {};
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      testID,
+      ...isWeb2 ? {} : { accessible: true, accessibilityLabel: ariaLabel },
+      ...containerProps,
+      className: cn("flex-row items-center gap-2", className),
+      style: styles.container,
+      children: [
+        Array.from({ length }, (_, idx) => {
+          const cellValue = cells[idx] ?? "";
+          const cellRef = /* @__PURE__ */ __name((el) => {
+            inputRefs.current[idx] = el;
+          }, "cellRef");
+          const webProps = isWeb2 ? {
+            onKeyDown: /* @__PURE__ */ __name((e) => handleWebKeyDown(e, idx), "onKeyDown"),
+            // id only on the first cell
+            ...idx === 0 && id ? { id, nativeID: id } : {},
+            ...idx === 0 && name ? { name } : {},
+            ...idx === 0 && ariaLabelledBy ? { "aria-labelledby": ariaLabelledBy } : {},
+            ...idx === 0 && ariaDescribedBy ? { "aria-describedby": ariaDescribedBy } : {},
+            ...idx === 0 && ariaInvalid !== void 0 ? { "aria-invalid": ariaInvalid } : {},
+            inputMode: pattern === "numeric" ? "numeric" : "text"
+          } : {};
+          const nativeOnlyProps = isWeb2 ? {} : {
+            keyboardType: pattern === "numeric" ? "number-pad" : "default",
+            textAlign: "center",
+            selectTextOnFocus: true,
+            onKeyPress: /* @__PURE__ */ __name((e) => handleNativeKeyPress(e, idx), "onKeyPress")
+          };
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.TextInput,
+            {
+              ref: cellRef,
+              value: cellValue,
+              placeholder: placeholder,
+              maxLength: 1,
+              editable: !disabled,
+              autoFocus: autoFocus && idx === 0,
+              testID: testID ? `${testID}-cell-${idx}` : void 0,
+              onChangeText: (text) => handleChangeText(text, idx),
+              accessibilityLabel: `Digit ${idx + 1} of ${length}`,
+              ...nativeOnlyProps,
+              ...webProps,
+              style: cellStyle
+            },
+            idx
+          );
+        }),
+        isWeb2 && name ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.TextInput,
+          {
+            style: styles.hidden,
+            value: cells.join(""),
+            "aria-hidden": true,
+            tabIndex: -1,
+            ...{ name }
+          }
+        ) : null
+      ]
+    }
+  );
+}, "InputOTP");
+var styles = reactNative.StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  cell: {
+    borderWidth: 1,
+    textAlign: "center"
+  },
+  disabled: {
+    opacity: 0.6
+  },
+  hidden: {
+    position: "absolute",
+    width: 0,
+    height: 0,
+    opacity: 0
+  }
+});
+
+exports.InputOTP = InputOTP;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map