@nori-ui/core 0.0.5 → 1.0.2

package/dist/components/InputGroup/index.cjs

@@ -0,0 +1,638 @@
+'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 InputGroupContext = react.createContext(null);
+var useInputGroupContext = /* @__PURE__ */ __name((label) => {
+  const ctx = react.useContext(InputGroupContext);
+  if (!ctx) {
+    throw new Error(`<${label}> must be rendered inside an <InputGroup>.`);
+  }
+  return ctx;
+}, "useInputGroupContext");
+var ADDON_TYPE = /* @__PURE__ */ Symbol.for("nori-ui.InputGroupAddon");
+var INPUT_TYPE = /* @__PURE__ */ Symbol.for("nori-ui.InputGroupInput");
+var isAddon = /* @__PURE__ */ __name((child) => react.isValidElement(child) && child.type?.__noriType === ADDON_TYPE, "isAddon");
+var isInput = /* @__PURE__ */ __name((child) => react.isValidElement(child) && child.type?.__noriType === INPUT_TYPE, "isInput");
+var CONTAINER_LAYOUT_BASE = { flexDirection: "column" };
+var FIELD_LAYOUT_BASE = {
+  flexDirection: "row",
+  alignItems: "stretch",
+  borderWidth: 1,
+  overflow: "hidden"
+};
+var InputGroupRoot = /* @__PURE__ */ __name(({
+  children,
+  disabled = false,
+  error: groupErrorProp = false,
+  className,
+  containerClassName,
+  testID
+}) => {
+  const colors = useThemeColors();
+  const reactId = react.useId();
+  const inputId = `nori-ui-input-${reactId}`;
+  const describeId = `${inputId}-describe`;
+  const [focused, setFocused] = react.useState(false);
+  const inputRef = react.useRef(null);
+  const focusInput = react.useCallback(() => {
+    inputRef.current?.focus();
+  }, []);
+  const childArray = react.Children.toArray(children);
+  const inputIndex = childArray.findIndex(isInput);
+  const inputElement = inputIndex >= 0 ? childArray[inputIndex] : null;
+  const prefixNodes = inputIndex >= 0 ? childArray.slice(0, inputIndex).filter(isAddon) : [];
+  const suffixNodes = inputIndex >= 0 ? childArray.slice(inputIndex + 1).filter(isAddon) : [];
+  const inputProps = inputElement?.props ?? {};
+  const label = inputProps.label;
+  const helperText = inputProps.helperText;
+  const inputError = inputProps.error;
+  const hasError = Boolean(groupErrorProp) || Boolean(inputError);
+  const ctx = react.useMemo(
+    () => ({
+      inputId,
+      describeId,
+      setFocused,
+      hasError,
+      disabled,
+      inputRef,
+      focusInput
+    }),
+    [inputId, describeId, hasError, disabled, focusInput]
+  );
+  const borderColor = hasError ? colors.color.danger : focused ? colors.semantic.interactive.primary : colors.semantic.border.default;
+  const fieldStyle = [
+    FIELD_LAYOUT_BASE,
+    {
+      borderRadius: px(colors.radius.md),
+      backgroundColor: colors.semantic.background.elevated,
+      borderColor
+    },
+    disabled ? { opacity: 0.6 } : null
+  ];
+  const labelStyle = {
+    fontFamily: colors.fontFamily.body,
+    fontSize: px(colors.fontSize.sm),
+    fontWeight: colors.fontWeight.medium,
+    color: colors.semantic.text.default
+  };
+  const helperStyle = {
+    fontFamily: colors.fontFamily.body,
+    fontSize: px(colors.fontSize.sm),
+    color: colors.semantic.text.muted
+  };
+  const errorStyle = {
+    fontFamily: colors.fontFamily.body,
+    fontSize: px(colors.fontSize.sm),
+    color: colors.color.danger
+  };
+  const containerStyle = { ...CONTAINER_LAYOUT_BASE, gap: px(colors.spacing["1"]) };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      ...testID !== void 0 ? { testID } : {},
+      className: cn("flex flex-col gap-1", containerClassName),
+      style: containerStyle,
+      children: [
+        label !== void 0 ? (
+          // On web we render a real <label htmlFor> so clicking the
+          // label focuses the input the standard a11y way (and so
+          // jsdom-based tests can assert the label↔input
+          // association via the `for` attribute).
+          //
+          // On native, raw <label> is not a valid host component
+          // and RN crashes with "View config getter callback for
+          // component `label` must be a function". The native
+          // path renders an RNText instead — the underlying
+          // RNTextInput still carries accessibilityLabel for
+          // screen readers, so the visible text + the a11y name
+          // remain in sync. Same web-only `<label>` story as
+          // TextInput's earlier iteration; this branch is the
+          // explicit native-safe fallback.
+          reactNative.Platform.OS === "web" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "label",
+            {
+              htmlFor: inputId,
+              className: "text-sm font-medium text-semantic-text-default",
+              style: labelStyle,
+              children: label
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.Text,
+            {
+              nativeID: `${inputId}-label`,
+              accessibilityRole: "text",
+              className: "text-sm font-medium text-semantic-text-default",
+              style: labelStyle,
+              children: label
+            }
+          )
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(InputGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          reactNative.View,
+          {
+            className: cn(
+              "flex-row items-stretch overflow-hidden rounded-md border focus-within:border-semantic-interactive-primary",
+              hasError ? "border-semantic-interactive-destructive" : "border-semantic-border-default",
+              disabled ? "opacity-60" : void 0,
+              className
+            ),
+            style: fieldStyle,
+            children: [
+              prefixNodes.map((node, i) => {
+                const key = node.key ?? `prefix-${i}`;
+                return /* @__PURE__ */ jsxRuntime.jsx(AddonSlot, { side: "left", children: node }, key);
+              }),
+              inputElement,
+              suffixNodes.map((node, i) => {
+                const key = node.key ?? `suffix-${i}`;
+                return /* @__PURE__ */ jsxRuntime.jsx(AddonSlot, { side: "right", children: node }, key);
+              })
+            ]
+          }
+        ) }),
+        inputError ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            nativeID: describeId,
+            className: "text-sm text-semantic-interactive-destructive",
+            style: errorStyle,
+            children: inputError
+          }
+        ) : helperText ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { nativeID: describeId, className: "text-sm text-semantic-text-muted", style: helperStyle, children: helperText }) : null
+      ]
+    }
+  );
+}, "InputGroupRoot");
+var AddonSlot = /* @__PURE__ */ __name(({ children, side }) => {
+  const colors = useThemeColors();
+  const ctx = react.useContext(InputGroupContext);
+  const dim = ctx?.disabled ? 0.85 : 1;
+  const baseStyle = {
+    backgroundColor: colors.semantic.background.subtle,
+    paddingHorizontal: px(colors.spacing["3"]),
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    opacity: dim
+  };
+  const separatorStyle = side === "left" ? { borderRightWidth: 1, borderRightColor: colors.semantic.border.default } : { borderLeftWidth: 1, borderLeftColor: colors.semantic.border.default };
+  const handlePress = /* @__PURE__ */ __name(() => {
+    ctx?.focusInput();
+  }, "handlePress");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      onPress: handlePress,
+      role: "none",
+      focusable: false,
+      style: [baseStyle, separatorStyle],
+      className: cn(
+        "flex-row items-center justify-center px-3 bg-semantic-background-subtle",
+        side === "right" ? "border-l border-semantic-border-default" : "border-r border-semantic-border-default"
+      ),
+      children
+    }
+  );
+}, "AddonSlot");
+var InputGroupAddon = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const colors = useThemeColors();
+  const textStyle = {
+    color: colors.semantic.text.muted,
+    fontFamily: colors.fontFamily.body,
+    fontSize: px(colors.fontSize.sm)
+  };
+  if (typeof children === "string" || typeof children === "number") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Text,
+      {
+        ...testID !== void 0 ? { testID } : {},
+        className: cn("text-sm text-semantic-text-muted", className),
+        style: textStyle,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { ...testID !== void 0 ? { testID } : {}, ...className !== void 0 ? { className } : {}, children });
+}, "InputGroupAddon");
+InputGroupAddon.__noriType = ADDON_TYPE;
+var INPUT_LAYOUT_BASE = {
+  flex: 1,
+  // RN web honours `outlineStyle: 'none'` to suppress the default browser
+  // focus ring — the group's own focus-within border replaces it.
+  outlineStyle: "none"
+};
+var InputGroupInput = /* @__PURE__ */ __name(({
+  label: _label,
+  helperText: _helperText,
+  error,
+  disabled,
+  onChangeText,
+  onFocus,
+  onBlur,
+  multiline,
+  numberOfLines,
+  leading: _leading,
+  trailing: _trailing,
+  containerClassName: _containerClassName,
+  className,
+  testID,
+  ...rest
+}) => {
+  const colors = useThemeColors();
+  const ctx = useInputGroupContext("InputGroupInput");
+  const inputId = ctx.inputId;
+  const describeId = ctx.describeId;
+  const isDisabled = disabled || ctx.disabled;
+  const hasError = Boolean(error) || ctx.hasError;
+  const inputExtras = {};
+  if (testID !== void 0) {
+    inputExtras.testID = testID;
+  }
+  if (_label !== void 0) {
+    inputExtras.accessibilityLabel = _label;
+  }
+  if (hasError) {
+    inputExtras["aria-invalid"] = true;
+  }
+  if (error || _helperText) {
+    inputExtras["aria-describedby"] = describeId;
+  }
+  if (multiline !== void 0) {
+    inputExtras.multiline = multiline;
+  }
+  if (numberOfLines !== void 0) {
+    inputExtras.numberOfLines = numberOfLines;
+  }
+  if (onChangeText !== void 0) {
+    inputExtras.onChangeText = onChangeText;
+  }
+  const inputStyle = {
+    ...INPUT_LAYOUT_BASE,
+    paddingVertical: px(colors.spacing["2"]),
+    paddingHorizontal: px(colors.spacing["3"]),
+    fontFamily: colors.fontFamily.body,
+    fontSize: px(colors.fontSize.md),
+    color: colors.semantic.text.default
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.TextInput,
+    {
+      ref: (node) => {
+        ctx.inputRef.current = node;
+      },
+      nativeID: inputId,
+      editable: !isDisabled,
+      className: cn("flex-1 py-2 px-3 text-md text-semantic-text-default outline-none bg-transparent", className),
+      placeholderTextColor: colors.semantic.text.muted,
+      onFocus: (e) => {
+        ctx.setFocused(true);
+        onFocus?.(e);
+      },
+      onBlur: (e) => {
+        ctx.setFocused(false);
+        onBlur?.(e);
+      },
+      ...inputExtras,
+      ...rest,
+      style: [inputStyle, rest.style]
+    }
+  );
+}, "InputGroupInput");
+InputGroupInput.__noriType = INPUT_TYPE;
+var InputGroup = Object.assign(InputGroupRoot, {
+  Addon: InputGroupAddon,
+  Input: InputGroupInput
+});
+
+exports.InputGroup = InputGroup;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map