@nori-ui/core 0.0.5 → 1.0.2

package/dist/components/Button/index.cjs

@@ -0,0 +1,631 @@
+'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/slot/compose-refs.ts
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (ref == null) {
+        continue;
+      }
+      if (typeof ref === "function") {
+        ref(node);
+      } else {
+        ref.current = node;
+      }
+    }
+  };
+}
+__name(composeRefs, "composeRefs");
+var Slot = react.forwardRef(/* @__PURE__ */ __name(function Slot2(props, forwardedRef) {
+  const { children, ...slotProps } = props;
+  if (!react.isValidElement(children)) {
+    return null;
+  }
+  const child = react.Children.only(children);
+  const merged = mergeProps(slotProps, child.props);
+  const childRef = child.ref;
+  if (forwardedRef || childRef) {
+    merged.ref = composeRefs(forwardedRef, childRef);
+  }
+  return react.cloneElement(child, merged);
+}, "Slot"));
+Slot.displayName = "Slot";
+function mergeProps(outer, inner) {
+  const merged = { ...outer };
+  for (const key of Object.keys(inner)) {
+    const outerValue = outer[key];
+    const innerValue = inner[key];
+    if (key === "className" || key === "class") {
+      merged[key] = joinClass(outerValue, innerValue);
+      continue;
+    }
+    if (key === "style") {
+      merged[key] = {
+        ...outerValue,
+        ...innerValue
+      };
+      continue;
+    }
+    if (isEventHandler(key, outerValue, innerValue)) {
+      merged[key] = composeHandlers(outerValue, innerValue);
+      continue;
+    }
+    merged[key] = innerValue;
+  }
+  return merged;
+}
+__name(mergeProps, "mergeProps");
+function joinClass(outer, inner) {
+  const a = typeof outer === "string" ? outer : "";
+  const b = typeof inner === "string" ? inner : "";
+  const joined = [a, b].filter(Boolean).join(" ");
+  return joined.length > 0 ? joined : void 0;
+}
+__name(joinClass, "joinClass");
+function isEventHandler(key, outer, inner) {
+  if (!key.startsWith("on") || key.length < 3) {
+    return false;
+  }
+  if (key[2] !== key[2]?.toUpperCase()) {
+    return false;
+  }
+  return typeof outer === "function" && typeof inner === "function";
+}
+__name(isEventHandler, "isEventHandler");
+function composeHandlers(outer, inner) {
+  return (...args) => {
+    outer(...args);
+    inner(...args);
+  };
+}
+__name(composeHandlers, "composeHandlers");
+
+// 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_MAP = {
+  sm: 12,
+  md: 16,
+  lg: 24,
+  xl: 32
+};
+var Spinner = /* @__PURE__ */ __name(({ label = "Loading", size = "md", testID, color, style, ...rest }) => {
+  const px2 = typeof size === "number" ? size : SIZE_MAP[size];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.ActivityIndicator,
+    {
+      ...rest,
+      ...testID !== void 0 ? { testID } : {},
+      accessibilityRole: "progressbar",
+      accessibilityLabel: label,
+      ...color !== void 0 ? { color } : {},
+      size: px2,
+      style: [{ width: px2, height: px2 }, style]
+    }
+  );
+}, "Spinner");
+var VARIANT_CLASSES = {
+  primary: "bg-semantic-interactive-primary hover:bg-semantic-interactive-primaryHover active:bg-semantic-interactive-primaryPressed",
+  secondary: "bg-neutral-100 hover:bg-neutral-200 active:bg-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:active:bg-neutral-600",
+  ghost: "bg-transparent hover:bg-neutral-100 active:bg-neutral-200 dark:hover:bg-neutral-800 dark:active:bg-neutral-700",
+  destructive: "bg-semantic-interactive-destructive hover:opacity-90 active:opacity-80"
+};
+var SIZE_CLASSES = {
+  sm: "h-8 px-3 text-sm",
+  md: "h-10 px-4 text-md",
+  lg: "h-12 px-5 text-lg"
+};
+var ICON_SIZE = { sm: 14, md: 16, lg: 20 };
+var BASE_CLASSES = "inline-flex flex-row items-center justify-center gap-2 rounded-md select-none";
+var HEIGHT_BY_SIZE = {
+  sm: 32,
+  md: 40,
+  lg: 48
+};
+var SIZE_KEYS = {
+  sm: { padX: "3", font: "sm" },
+  md: { padX: "4", font: "md" },
+  lg: { padX: "5", font: "lg" }
+};
+var BASE_STYLE = {
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "center"
+};
+var Button = /* @__PURE__ */ __name(({
+  children,
+  variant = "primary",
+  size = "md",
+  disabled,
+  loading,
+  leadingIcon: LeadingIcon,
+  trailingIcon: TrailingIcon,
+  asChild,
+  className,
+  onPress,
+  testID,
+  style,
+  ref,
+  ...rest
+}) => {
+  const colors = useThemeColors();
+  const isInoperative = Boolean(disabled) || Boolean(loading);
+  const [hovered, setHovered] = react.useState(false);
+  const [pressed, setPressed] = react.useState(false);
+  const handleHoverIn = react.useCallback(() => setHovered(true), []);
+  const handleHoverOut = react.useCallback(() => {
+    setHovered(false);
+    setPressed(false);
+  }, []);
+  const handlePressIn = react.useCallback(() => setPressed(true), []);
+  const handlePressOut = react.useCallback(() => setPressed(false), []);
+  const variantClasses = isInoperative ? VARIANT_CLASSES[variant].split(" ").filter((cls) => !cls.startsWith("hover:") && !cls.startsWith("active:")).join(" ") : VARIANT_CLASSES[variant];
+  const classes = cn(
+    BASE_CLASSES,
+    variantClasses,
+    SIZE_CLASSES[size],
+    isInoperative ? "opacity-60 pointer-events-none cursor-not-allowed" : void 0,
+    className
+  );
+  const variantStateColors = {
+    primary: {
+      rest: colors.semantic.interactive.primary,
+      hover: colors.semantic.interactive.primaryHover,
+      pressed: colors.semantic.interactive.primaryPressed
+    },
+    secondary: {
+      rest: colors.semantic.background.subtle,
+      // hover / pressed must be theme-aware. The previous version
+      // pulled directly from `color.neutral.{200,300}`, which are
+      // raw tokens that DON'T flip per scheme — in dark mode the
+      // hovered state ended up light-gray on dark, ruining contrast.
+      // `border.default` / `border.strong` invert correctly: in
+      // light they read as light-gray washes (next step from
+      // `background.subtle`); in dark they read as the darker grays
+      // expected for hover/pressed on a dark surface.
+      hover: colors.semantic.border.default,
+      pressed: colors.semantic.border.strong
+    },
+    ghost: {
+      rest: "transparent",
+      hover: colors.semantic.background.subtle,
+      pressed: colors.semantic.border.default
+    },
+    destructive: {
+      rest: colors.semantic.interactive.destructive,
+      // No darker tone token for destructive yet — fall back to a 90% /
+      // 80% opacity wash by mixing through rgba. Matches the className
+      // hover:opacity-90 / active:opacity-80 fallback.
+      hover: colors.semantic.interactive.destructive,
+      pressed: colors.semantic.interactive.destructive
+    }
+  };
+  const variantTextColor = {
+    primary: colors.semantic.text.inverted,
+    secondary: colors.semantic.text.default,
+    ghost: colors.semantic.text.default,
+    destructive: colors.semantic.text.inverted
+  };
+  const stateColors = variantStateColors[variant];
+  const stateBg = isInoperative ? stateColors.rest : pressed ? stateColors.pressed : hovered ? stateColors.hover : stateColors.rest;
+  const stateInteractionOpacity = isInoperative || variant !== "destructive" ? 1 : pressed ? 0.8 : hovered ? 0.9 : 1;
+  const sizeKeys = SIZE_KEYS[size];
+  const sizeContainer = {
+    height: HEIGHT_BY_SIZE[size],
+    paddingHorizontal: px(colors.spacing[sizeKeys.padX]),
+    gap: px(colors.spacing["2"]),
+    borderRadius: px(colors.radius.md)
+  };
+  const sizeFontSize = px(colors.fontSize[sizeKeys.font]);
+  const inlineBase = [
+    BASE_STYLE,
+    { backgroundColor: stateBg },
+    sizeContainer,
+    { opacity: isInoperative ? 0.6 : stateInteractionOpacity }
+  ];
+  const consumerStyle = typeof style === "function" ? style({ pressed, ...{ hovered } }) : style;
+  const pressableStyle = [...inlineBase, consumerStyle];
+  const slotStyle = [...inlineBase, consumerStyle];
+  const textColor = variantTextColor[variant];
+  const textStyle = {
+    color: textColor,
+    fontFamily: colors.fontFamily.body,
+    fontSize: sizeFontSize,
+    fontWeight: colors.fontWeight.medium
+  };
+  const handlePress = /* @__PURE__ */ __name((ev) => {
+    if (isInoperative) {
+      return;
+    }
+    onPress?.(ev);
+  }, "handlePress");
+  if (asChild) {
+    const slotProps = {
+      ref,
+      className: classes,
+      style: slotStyle,
+      onClick: handlePress,
+      ...rest
+    };
+    if (isInoperative) {
+      slotProps["aria-disabled"] = true;
+    }
+    if (loading) {
+      slotProps["aria-busy"] = true;
+    }
+    if (testID !== void 0) {
+      slotProps["data-testid"] = testID;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(Slot, { ...slotProps, children });
+  }
+  const pressableExtra = {};
+  if (isInoperative) {
+    pressableExtra["aria-disabled"] = true;
+  }
+  if (loading) {
+    pressableExtra["aria-busy"] = true;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.Pressable,
+    {
+      ref,
+      ...testID !== void 0 ? { testID } : {},
+      role: "button",
+      accessibilityRole: "button",
+      accessibilityState: { disabled: isInoperative, busy: Boolean(loading) },
+      disabled: isInoperative,
+      onPress: handlePress,
+      onHoverIn: handleHoverIn,
+      onHoverOut: handleHoverOut,
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      className: classes,
+      style: pressableStyle,
+      ...pressableExtra,
+      ...rest,
+      children: [
+        loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: ICON_SIZE[size], label: "Loading", color: textColor }) : LeadingIcon ? /* @__PURE__ */ jsxRuntime.jsx(LeadingIcon, { size: ICON_SIZE[size], color: textColor }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            className: cn("font-medium", SIZE_CLASSES[size].includes("text-") ? void 0 : "text-md"),
+            style: textStyle,
+            children
+          }
+        ),
+        TrailingIcon ? /* @__PURE__ */ jsxRuntime.jsx(TrailingIcon, { size: ICON_SIZE[size], color: textColor }) : null
+      ]
+    }
+  );
+}, "Button");
+
+exports.Button = Button;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map