@nori-ui/core 0.0.5 → 1.0.2

package/dist/components/Toggle/index.cjs

@@ -0,0 +1,770 @@
+'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_TOKENS = {
+  sm: { height: 32, paddingHKey: "2", fontKey: "sm", iconSize: 14 },
+  // 8px (closest to legacy 10) / fontSize sm 14
+  md: { height: 40, paddingHKey: "3", fontKey: "sm", iconSize: 16 },
+  // 12px / fontSize sm 14
+  lg: { height: 48, paddingHKey: "4", fontKey: "md", iconSize: 20 }
+  // 16px / fontSize md 16
+};
+var ToggleRoot = /* @__PURE__ */ __name(({
+  pressed,
+  defaultPressed = false,
+  onChange,
+  variant = "default",
+  size = "md",
+  disabled = false,
+  children,
+  "aria-label": ariaLabel,
+  accessibilityLabel,
+  className,
+  testID
+}) => {
+  const [inner, setInner] = react.useState(defaultPressed);
+  const isControlled = pressed !== void 0;
+  const isOn = isControlled ? Boolean(pressed) : inner;
+  const handlePress = react.useCallback(() => {
+    if (disabled) {
+      return;
+    }
+    const next = !isOn;
+    if (!isControlled) {
+      setInner(next);
+    }
+    onChange?.(next);
+  }, [disabled, isControlled, isOn, onChange]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ToggleVisual,
+    {
+      isOn,
+      disabled,
+      variant,
+      size,
+      onPress: handlePress,
+      ariaLabel: ariaLabel ?? accessibilityLabel,
+      className,
+      testID,
+      children
+    }
+  );
+}, "ToggleRoot");
+var ToggleVisual = /* @__PURE__ */ __name(({
+  isOn,
+  disabled,
+  variant,
+  size,
+  onPress,
+  onKeyDown,
+  onFocus,
+  ariaLabel,
+  className,
+  testID,
+  children,
+  tabIndex,
+  borderRadius,
+  suppressRightBorder,
+  forceBorder,
+  refCallback
+}) => {
+  const colors = useThemeColors();
+  const tokens = SIZE_TOKENS[size];
+  const paddingH = px(colors.spacing[tokens.paddingHKey]);
+  const fontSize = px(colors.fontSize[tokens.fontKey]);
+  const radiusEach = borderRadius && typeof borderRadius !== "number" ? borderRadius : void 0;
+  const radiusValue = typeof borderRadius === "number" ? borderRadius : radiusEach ? void 0 : px(colors.radius.md);
+  const baseStyle = {
+    height: tokens.height,
+    paddingHorizontal: paddingH,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: px(colors.spacing["2"]) - 2,
+    // closest theme-rooted approximation of legacy 6
+    ...radiusValue !== void 0 ? { borderRadius: radiusValue } : null,
+    ...radiusEach ? {
+      borderTopLeftRadius: radiusEach.topLeft,
+      borderTopRightRadius: radiusEach.topRight,
+      borderBottomLeftRadius: radiusEach.bottomLeft,
+      borderBottomRightRadius: radiusEach.bottomRight
+    } : null,
+    // 200ms color/background transition. Web only; native ignores it.
+    ...{
+      transitionProperty: "background-color, border-color, color",
+      transitionDuration: "200ms",
+      transitionTimingFunction: "ease"
+    }
+  };
+  const surfaceFor = /* @__PURE__ */ __name((hovered) => {
+    if (variant === "outline" || forceBorder) {
+      return {
+        backgroundColor: isOn ? variant === "outline" ? colors.semantic.background.subtle : colors.semantic.interactive.primary : hovered ? colors.semantic.background.subtle : "transparent",
+        borderWidth: 1,
+        borderColor: isOn ? colors.semantic.interactive.primary : colors.semantic.border.default,
+        ...suppressRightBorder ? { borderRightWidth: 0 } : null
+      };
+    }
+    return {
+      backgroundColor: isOn ? colors.semantic.interactive.primary : hovered ? colors.semantic.background.subtle : colors.semantic.background.elevated,
+      borderWidth: 1,
+      borderColor: isOn ? colors.semantic.interactive.primary : colors.semantic.border.default
+    };
+  }, "surfaceFor");
+  const textColor = variant === "outline" ? isOn ? colors.semantic.interactive.primary : colors.semantic.text.default : isOn ? colors.semantic.text.inverted : colors.semantic.text.default;
+  const accessibilityProps = {
+    role: "button",
+    accessibilityRole: "button",
+    "aria-pressed": isOn,
+    accessibilityState: { selected: isOn, disabled },
+    ...ariaLabel ? { "aria-label": ariaLabel, accessibilityLabel: ariaLabel } : {},
+    ...disabled ? { "aria-disabled": true } : {},
+    ...testID !== void 0 ? { testID } : {},
+    ...tabIndex !== void 0 ? { tabIndex } : {},
+    ...onKeyDown ? { onKeyDown } : {},
+    ...onFocus ? { onFocus } : {}
+  };
+  const surfaceStatic = surfaceFor(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      ref: (node) => {
+        refCallback?.(node);
+      },
+      disabled,
+      onPress: () => {
+        if (!disabled) {
+          onPress();
+        }
+      },
+      ...accessibilityProps,
+      className: cn(
+        "inline-flex flex-row items-center justify-center select-none",
+        disabled ? "opacity-50" : void 0,
+        className
+      ),
+      style: [baseStyle, surfaceStatic, disabled ? { opacity: 0.5 } : null],
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          style: {
+            color: textColor,
+            fontFamily: colors.fontFamily.body,
+            fontSize,
+            fontWeight: colors.fontWeight.medium
+          },
+          children
+        }
+      )
+    }
+  );
+}, "ToggleVisual");
+var ToggleGroupContext = react.createContext(null);
+var useToggleGroupContext = /* @__PURE__ */ __name(() => {
+  const ctx = react.useContext(ToggleGroupContext);
+  if (!ctx) {
+    throw new Error("<ToggleGroupItem> must be rendered inside a <ToggleGroup>.");
+  }
+  return ctx;
+}, "useToggleGroupContext");
+var ToggleGroup = /* @__PURE__ */ __name((props) => {
+  const {
+    type,
+    disabled = false,
+    variant = "default",
+    size = "md",
+    children,
+    className,
+    testID,
+    "aria-label": ariaLabel,
+    accessibilityLabel
+  } = props;
+  const [innerSingle, setInnerSingle] = react.useState(
+    type === "single" ? props.defaultValue : void 0
+  );
+  const [innerMultiple, setInnerMultiple] = react.useState(
+    type === "multiple" ? props.defaultValue ?? [] : []
+  );
+  const isSingle = type === "single";
+  const isControlled = isSingle ? props.value !== void 0 : props.value !== void 0;
+  const setValue = react.useCallback(
+    (next) => {
+      if (disabled) {
+        return;
+      }
+      if (isSingle) {
+        const current = isControlled ? props.value : innerSingle;
+        const updated = current === next ? void 0 : next;
+        if (!isControlled) {
+          setInnerSingle(updated);
+        }
+        props.onChange?.(updated);
+      } else {
+        const current = (isControlled ? props.value : innerMultiple) ?? [];
+        const updated = current.includes(next) ? current.filter((v) => v !== next) : [...current, next];
+        if (!isControlled) {
+          setInnerMultiple(updated);
+        }
+        props.onChange?.(updated);
+      }
+    },
+    [disabled, isSingle, isControlled, innerSingle, innerMultiple, props]
+  );
+  const isPressed = react.useCallback(
+    (v) => {
+      if (isSingle) {
+        const current2 = isControlled ? props.value : innerSingle;
+        return current2 === v;
+      }
+      const current = (isControlled ? props.value : innerMultiple) ?? [];
+      return current.includes(v);
+    },
+    [isSingle, isControlled, innerSingle, innerMultiple, props]
+  );
+  const refs = react.useRef(/* @__PURE__ */ new Map());
+  const [order, setOrder] = react.useState([]);
+  const [rovingValue, setRovingValueState] = react.useState(void 0);
+  const register = react.useCallback((v, ref) => {
+    refs.current.set(v, ref);
+    setOrder((prev) => prev.includes(v) ? prev : [...prev, v]);
+    setRovingValueState((current) => current ?? v);
+  }, []);
+  const unregister = react.useCallback((v) => {
+    refs.current.delete(v);
+    setOrder((prev) => prev.filter((x) => x !== v));
+    setRovingValueState((current) => current === v ? void 0 : current);
+  }, []);
+  const focusValue = react.useCallback((v) => {
+    refs.current.get(v)?.current?.focus?.();
+  }, []);
+  const setRovingValue = react.useCallback((v) => setRovingValueState(v), []);
+  const moveBy = react.useCallback(
+    (delta, current) => {
+      const list = order;
+      if (list.length === 0) {
+        return;
+      }
+      const idx = list.indexOf(current);
+      const start = idx === -1 ? 0 : idx;
+      const next = list[(start + delta + list.length) % list.length];
+      if (!next) {
+        return;
+      }
+      setRovingValueState(next);
+      focusValue(next);
+    },
+    [order, focusValue]
+  );
+  const moveTo = react.useCallback(
+    (position) => {
+      const list = order;
+      if (list.length === 0) {
+        return;
+      }
+      const next = position === "first" ? list[0] : list[list.length - 1];
+      if (!next) {
+        return;
+      }
+      setRovingValueState(next);
+      focusValue(next);
+    },
+    [order, focusValue]
+  );
+  const ctxValue = react.useMemo(
+    () => ({
+      type,
+      setValue,
+      isPressed,
+      disabled,
+      variant,
+      size,
+      register,
+      unregister,
+      rovingValue,
+      setRovingValue,
+      moveBy,
+      moveTo,
+      order
+    }),
+    [
+      type,
+      setValue,
+      isPressed,
+      disabled,
+      variant,
+      size,
+      register,
+      unregister,
+      rovingValue,
+      setRovingValue,
+      moveBy,
+      moveTo,
+      order
+    ]
+  );
+  const groupRole = isSingle ? "radiogroup" : "group";
+  const label = ariaLabel ?? accessibilityLabel;
+  const groupProps = {
+    role: groupRole,
+    accessibilityRole: groupRole,
+    ...label ? { "aria-label": label, accessibilityLabel: label } : {},
+    ...disabled ? { "aria-disabled": true } : {},
+    ...testID !== void 0 ? { testID } : {}
+  };
+  const colors = useThemeColors();
+  const containerStyle = variant === "default" ? { flexDirection: "row", alignItems: "stretch", gap: 0 } : { flexDirection: "row", alignItems: "stretch", gap: px(colors.spacing["1"]) };
+  return /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...groupProps,
+      className: cn(
+        "inline-flex flex-row items-stretch",
+        variant === "default" ? "gap-0" : "gap-1",
+        disabled ? "opacity-60" : void 0,
+        className
+      ),
+      style: [containerStyle, disabled ? { opacity: 0.6 } : null],
+      children
+    }
+  ) });
+}, "ToggleGroup");
+var ToggleGroupItem = /* @__PURE__ */ __name(({
+  value,
+  disabled,
+  children,
+  "aria-label": ariaLabel,
+  accessibilityLabel,
+  className,
+  testID
+}) => {
+  const ctx = useToggleGroupContext();
+  const ownRef = react.useRef(null);
+  const registryRef = react.useRef({ register: ctx.register, unregister: ctx.unregister });
+  registryRef.current = { register: ctx.register, unregister: ctx.unregister };
+  react.useEffect(() => {
+    const holder = {
+      get current() {
+        return ownRef.current;
+      },
+      set current(_v) {
+      }
+    };
+    registryRef.current.register(value, holder);
+    return () => registryRef.current.unregister(value);
+  }, [value]);
+  const isOn = ctx.isPressed(value);
+  const isDisabled = disabled || ctx.disabled;
+  const isRoving = ctx.rovingValue === value;
+  const handleKeyDown = react.useCallback(
+    (event) => {
+      switch (event.key) {
+        case "ArrowRight":
+        case "ArrowDown": {
+          event.preventDefault();
+          ctx.moveBy(1, value);
+          return;
+        }
+        case "ArrowLeft":
+        case "ArrowUp": {
+          event.preventDefault();
+          ctx.moveBy(-1, value);
+          return;
+        }
+        case "Home": {
+          event.preventDefault();
+          ctx.moveTo("first");
+          return;
+        }
+        case "End": {
+          event.preventDefault();
+          ctx.moveTo("last");
+          return;
+        }
+        case " ":
+        case "Enter": {
+          event.preventDefault();
+          if (!isDisabled) {
+            ctx.setValue(value);
+          }
+          return;
+        }
+      }
+    },
+    [ctx, isDisabled, value]
+  );
+  const handleFocus = react.useCallback(() => {
+    ctx.setRovingValue(value);
+  }, [ctx, value]);
+  const colors = useThemeColors();
+  const idx = ctx.order.indexOf(value);
+  const isFirst = idx === 0;
+  const isLast = idx === ctx.order.length - 1;
+  const sharedRadius = px(colors.radius.md);
+  const isClustered = ctx.order.length > 1;
+  const borderRadius = isClustered ? {
+    topLeft: isFirst ? sharedRadius : 0,
+    bottomLeft: isFirst ? sharedRadius : 0,
+    topRight: isLast ? sharedRadius : 0,
+    bottomRight: isLast ? sharedRadius : 0
+  } : sharedRadius;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ToggleVisual,
+    {
+      isOn,
+      disabled: Boolean(isDisabled),
+      variant: ctx.variant,
+      size: ctx.size,
+      onPress: () => ctx.setValue(value),
+      onKeyDown: handleKeyDown,
+      onFocus: handleFocus,
+      ariaLabel: ariaLabel ?? accessibilityLabel,
+      className,
+      testID,
+      tabIndex: isRoving ? 0 : -1,
+      borderRadius,
+      forceBorder: ctx.variant === "default" && isClustered,
+      suppressRightBorder: isClustered && !isLast,
+      refCallback: (node) => {
+        ownRef.current = node;
+      },
+      children
+    }
+  );
+}, "ToggleGroupItem");
+var Toggle = Object.assign(ToggleRoot, {
+  Group: ToggleGroup,
+  Item: ToggleGroupItem
+});
+
+exports.Toggle = Toggle;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map