@nori-ui/core 0.0.5 → 1.0.2

package/dist/chunk-3F4TXKDY.js

@@ -0,0 +1,314 @@
+import { px } from './chunk-5A2QOOVN.js';
+import { cn } from './chunk-CHXHRJNZ.js';
+import { useThemeColors } from './chunk-R5JMDDCB.js';
+import { __name } from './chunk-WCQVDF3K.js';
+import { createContext, useId, useState, useRef, useCallback, Children, useMemo, useContext, isValidElement } from 'react';
+import { Text, View, TextInput, Platform, Pressable } from 'react-native';
+import { jsx, jsxs } from 'nativewind/jsx-runtime';
+
+var InputGroupContext = createContext(null);
+var useInputGroupContext = /* @__PURE__ */ __name((label) => {
+  const ctx = 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) => isValidElement(child) && child.type?.__noriType === ADDON_TYPE, "isAddon");
+var isInput = /* @__PURE__ */ __name((child) => 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 = useId();
+  const inputId = `nori-ui-input-${reactId}`;
+  const describeId = `${inputId}-describe`;
+  const [focused, setFocused] = useState(false);
+  const inputRef = useRef(null);
+  const focusInput = useCallback(() => {
+    inputRef.current?.focus();
+  }, []);
+  const childArray = 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 = 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__ */ jsxs(
+    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.
+          Platform.OS === "web" ? /* @__PURE__ */ jsx(
+            "label",
+            {
+              htmlFor: inputId,
+              className: "text-sm font-medium text-semantic-text-default",
+              style: labelStyle,
+              children: label
+            }
+          ) : /* @__PURE__ */ jsx(
+            Text,
+            {
+              nativeID: `${inputId}-label`,
+              accessibilityRole: "text",
+              className: "text-sm font-medium text-semantic-text-default",
+              style: labelStyle,
+              children: label
+            }
+          )
+        ) : null,
+        /* @__PURE__ */ jsx(InputGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
+          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__ */ jsx(AddonSlot, { side: "left", children: node }, key);
+              }),
+              inputElement,
+              suffixNodes.map((node, i) => {
+                const key = node.key ?? `suffix-${i}`;
+                return /* @__PURE__ */ jsx(AddonSlot, { side: "right", children: node }, key);
+              })
+            ]
+          }
+        ) }),
+        inputError ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            nativeID: describeId,
+            className: "text-sm text-semantic-interactive-destructive",
+            style: errorStyle,
+            children: inputError
+          }
+        ) : helperText ? /* @__PURE__ */ jsx(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 = 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__ */ jsx(
+    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__ */ jsx(
+      Text,
+      {
+        ...testID !== void 0 ? { testID } : {},
+        className: cn("text-sm text-semantic-text-muted", className),
+        style: textStyle,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(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__ */ jsx(
+    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
+});
+
+export { InputGroup };
+//# sourceMappingURL=chunk-3F4TXKDY.js.map
+//# sourceMappingURL=chunk-3F4TXKDY.js.map

package/dist/chunk-3F4TXKDY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/InputGroup/InputGroup.tsx"],"names":["RNText","RNTextInput"],"mappings":"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","file":"chunk-3F4TXKDY.js","sourcesContent":["'use client';\n\nimport {\n    Children,\n    createContext,\n    isValidElement,\n    type ReactElement,\n    type ReactNode,\n    useCallback,\n    useContext,\n    useId,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport type { TextInput as RNTextInputType, TextStyle, ViewStyle } from 'react-native';\nimport { Platform, Pressable, Text as RNText, TextInput as RNTextInput, View } from 'react-native';\nimport { px } from '../../theme/px';\nimport { useThemeColors } from '../../theme/use-theme-colors';\nimport { cn } from '../../utils/cn';\nimport type { TextInputProps } from '../TextInput/TextInput';\n\n// ─── Internal context ─────────────────────────────────────────────────────\n//\n// Lets the addons + input share focus, error, and disabled state so the\n// WHOLE group's border lights up on focus and dimming cascades visually\n// without consumers having to duplicate props on every child.\ntype InputGroupContextValue = {\n    inputId: string;\n    describeId: string;\n    setFocused: (next: boolean) => void;\n    hasError: boolean;\n    disabled: boolean;\n    inputRef: React.MutableRefObject<RNTextInputType | null>;\n    focusInput: () => void;\n};\n\nconst InputGroupContext = createContext<InputGroupContextValue | null>(null);\n\nconst useInputGroupContext = (label: string): InputGroupContextValue => {\n    const ctx = useContext(InputGroupContext);\n    if (!ctx) {\n        throw new Error(`<${label}> must be rendered inside an <InputGroup>.`);\n    }\n    return ctx;\n};\n\n// Marker symbols on the child component functions so we can split children\n// into [prefix, input, suffix] without forcing consumers to pass `position`\n// props or use named slots. Whatever sits before the InputGroupInput is a\n// prefix; whatever sits after is a suffix.\nconst ADDON_TYPE = Symbol.for('nori-ui.InputGroupAddon');\nconst INPUT_TYPE = Symbol.for('nori-ui.InputGroupInput');\n\nconst isAddon = (child: unknown): child is ReactElement =>\n    isValidElement(child) && (child.type as { __noriType?: symbol })?.__noriType === ADDON_TYPE;\n\nconst isInput = (child: unknown): child is ReactElement<InputGroupInputProps> =>\n    isValidElement(child) && (child.type as { __noriType?: symbol })?.__noriType === INPUT_TYPE;\n\n// ─── Container ────────────────────────────────────────────────────────────\n\n// Layout-only bases; theme-driven dimensions are merged inside the\n// component below.\nconst CONTAINER_LAYOUT_BASE: ViewStyle = { flexDirection: 'column' };\nconst FIELD_LAYOUT_BASE: ViewStyle = {\n    flexDirection: 'row',\n    alignItems: 'stretch',\n    borderWidth: 1,\n    overflow: 'hidden',\n};\n\nexport type InputGroupProps = {\n    children: ReactNode;\n    /** Mark the entire group as disabled — cascades visually to addons + input. */\n    disabled?: boolean;\n    /** Mark the entire group as errored — cascades visually to addons + input. */\n    error?: boolean;\n    className?: string;\n    containerClassName?: string;\n    testID?: string;\n};\n\n/**\n * Wrapper that visually fuses prefix and/or suffix addons with a TextInput\n * into a SINGLE rounded field — one border around the whole compound, not\n * three separate boxes. Inspired by Chakra's InputGroup and shadcn's input\n * addon pattern.\n *\n * @example\n * <InputGroup>\n *   <InputGroupAddon>@</InputGroupAddon>\n *   <InputGroupInput placeholder=\"username\" />\n * </InputGroup>\n *\n * @example with both prefix and suffix\n * <InputGroup>\n *   <InputGroupAddon>https://</InputGroupAddon>\n *   <InputGroupInput defaultValue=\"example\" />\n *   <InputGroupAddon>.com</InputGroupAddon>\n * </InputGroup>\n */\nconst InputGroupRoot = ({\n    children,\n    disabled = false,\n    error: groupErrorProp = false,\n    className,\n    containerClassName,\n    testID,\n}: InputGroupProps) => {\n    const colors = useThemeColors();\n    const reactId = useId();\n    const inputId = `nori-ui-input-${reactId}`;\n    const describeId = `${inputId}-describe`;\n    const [focused, setFocused] = useState(false);\n    const inputRef = useRef<RNTextInputType | null>(null);\n\n    // Stable identity (does not depend on render-cycle state) so the\n    // useMemo below can leave it out of the dep array without lint noise.\n    const focusInput = useCallback(() => {\n        inputRef.current?.focus();\n    }, []);\n\n    // Walk children once, split into [prefix, input, suffix]. Anything that\n    // isn't a recognised marker gets dropped — the API guarantees a single\n    // integrated bar, not arbitrary slots.\n    const childArray = Children.toArray(children);\n    const inputIndex = childArray.findIndex(isInput);\n    const inputElement = inputIndex >= 0 ? (childArray[inputIndex] as ReactElement<InputGroupInputProps>) : null;\n    const prefixNodes = inputIndex >= 0 ? childArray.slice(0, inputIndex).filter(isAddon) : [];\n    const suffixNodes = inputIndex >= 0 ? childArray.slice(inputIndex + 1).filter(isAddon) : [];\n\n    // Lift label / helperText / error from the input element so the parent\n    // can render them OUTSIDE the bordered field row (a normal field layout\n    // wraps the box with label above and helper/error below).\n    const inputProps = inputElement?.props ?? ({} as InputGroupInputProps);\n    const label = inputProps.label;\n    const helperText = inputProps.helperText;\n    const inputError = inputProps.error;\n\n    const hasError = Boolean(groupErrorProp) || Boolean(inputError);\n\n    const ctx = useMemo<InputGroupContextValue>(\n        () => ({\n            inputId,\n            describeId,\n            setFocused,\n            hasError,\n            disabled,\n            inputRef,\n            focusInput,\n        }),\n        [inputId, describeId, hasError, disabled, focusInput]\n    );\n\n    const borderColor = hasError\n        ? colors.color.danger\n        : focused\n          ? colors.semantic.interactive.primary\n          : colors.semantic.border.default;\n\n    const fieldStyle = [\n        FIELD_LAYOUT_BASE,\n        {\n            borderRadius: px(colors.radius.md),\n            backgroundColor: colors.semantic.background.elevated,\n            borderColor,\n        },\n        disabled ? { opacity: 0.6 } : null,\n    ];\n\n    const labelStyle: TextStyle = {\n        fontFamily: colors.fontFamily.body,\n        fontSize: px(colors.fontSize.sm),\n        fontWeight: colors.fontWeight.medium as '500',\n        color: colors.semantic.text.default,\n    };\n    const helperStyle: TextStyle = {\n        fontFamily: colors.fontFamily.body,\n        fontSize: px(colors.fontSize.sm),\n        color: colors.semantic.text.muted,\n    };\n    const errorStyle: TextStyle = {\n        fontFamily: colors.fontFamily.body,\n        fontSize: px(colors.fontSize.sm),\n        color: colors.color.danger,\n    };\n    const containerStyle: ViewStyle = { ...CONTAINER_LAYOUT_BASE, gap: px(colors.spacing['1']) };\n\n    return (\n        <View\n            {...(testID !== undefined ? { testID } : {})}\n            className={cn('flex flex-col gap-1', containerClassName)}\n            style={containerStyle}\n        >\n            {label !== undefined ? (\n                // On web we render a real <label htmlFor> so clicking the\n                // label focuses the input the standard a11y way (and so\n                // jsdom-based tests can assert the label↔input\n                // association via the `for` attribute).\n                //\n                // On native, raw <label> is not a valid host component\n                // and RN crashes with \"View config getter callback for\n                // component `label` must be a function\". The native\n                // path renders an RNText instead — the underlying\n                // RNTextInput still carries accessibilityLabel for\n                // screen readers, so the visible text + the a11y name\n                // remain in sync. Same web-only `<label>` story as\n                // TextInput's earlier iteration; this branch is the\n                // explicit native-safe fallback.\n                Platform.OS === 'web' ? (\n                    <label\n                        htmlFor={inputId}\n                        className=\"text-sm font-medium text-semantic-text-default\"\n                        style={labelStyle as object}\n                    >\n                        {label}\n                    </label>\n                ) : (\n                    <RNText\n                        nativeID={`${inputId}-label`}\n                        accessibilityRole=\"text\"\n                        className=\"text-sm font-medium text-semantic-text-default\"\n                        style={labelStyle}\n                    >\n                        {label}\n                    </RNText>\n                )\n            ) : null}\n            <InputGroupContext.Provider value={ctx}>\n                <View\n                    className={cn(\n                        'flex-row items-stretch overflow-hidden rounded-md border focus-within:border-semantic-interactive-primary',\n                        hasError ? 'border-semantic-interactive-destructive' : 'border-semantic-border-default',\n                        disabled ? 'opacity-60' : undefined,\n                        className\n                    )}\n                    style={fieldStyle}\n                >\n                    {prefixNodes.map((node, i) => {\n                        const key = (node as ReactElement & { key?: string | null }).key ?? `prefix-${i}`;\n                        return (\n                            <AddonSlot key={key} side=\"left\">\n                                {node}\n                            </AddonSlot>\n                        );\n                    })}\n                    {inputElement}\n                    {suffixNodes.map((node, i) => {\n                        const key = (node as ReactElement & { key?: string | null }).key ?? `suffix-${i}`;\n                        return (\n                            <AddonSlot key={key} side=\"right\">\n                                {node}\n                            </AddonSlot>\n                        );\n                    })}\n                </View>\n            </InputGroupContext.Provider>\n            {inputError ? (\n                <RNText\n                    nativeID={describeId}\n                    className=\"text-sm text-semantic-interactive-destructive\"\n                    style={errorStyle}\n                >\n                    {inputError}\n                </RNText>\n            ) : helperText ? (\n                <RNText nativeID={describeId} className=\"text-sm text-semantic-text-muted\" style={helperStyle}>\n                    {helperText}\n                </RNText>\n            ) : null}\n        </View>\n    );\n};\n\n// ─── Addon slot ───────────────────────────────────────────────────────────\n//\n// Internal wrapper that paints the muted background, draws the 1px vertical\n// separator on the input-facing side, and forwards a click to the input so\n// the addon reads as decorator, not as something interactive.\nconst AddonSlot = ({ children, side }: { children: ReactNode; side: 'left' | 'right' }) => {\n    const colors = useThemeColors();\n    const ctx = useContext(InputGroupContext);\n    const dim = ctx?.disabled ? 0.85 : 1;\n\n    const baseStyle: ViewStyle = {\n        backgroundColor: colors.semantic.background.subtle,\n        paddingHorizontal: px(colors.spacing['3']),\n        flexDirection: 'row',\n        alignItems: 'center',\n        justifyContent: 'center',\n        opacity: dim,\n    };\n\n    const separatorStyle: ViewStyle =\n        side === 'left'\n            ? { borderRightWidth: 1, borderRightColor: colors.semantic.border.default }\n            : { borderLeftWidth: 1, borderLeftColor: colors.semantic.border.default };\n\n    const handlePress = () => {\n        ctx?.focusInput();\n    };\n\n    return (\n        <Pressable\n            // Pressing the addon focuses the input — addons are decorators,\n            // never tab stops. RN's `accessibilityRole` doesn't accept \"presentation\"\n            // (web-only), so we set the WAI-ARIA role via the web prop instead.\n            onPress={handlePress}\n            role=\"none\"\n            // RN web maps `focusable={false}` to `tabIndex={-1}`.\n            focusable={false}\n            style={[baseStyle, separatorStyle]}\n            className={cn(\n                'flex-row items-center justify-center px-3 bg-semantic-background-subtle',\n                side === 'right' ? 'border-l border-semantic-border-default' : 'border-r border-semantic-border-default'\n            )}\n        >\n            {children}\n        </Pressable>\n    );\n};\n\n// ─── Addon (public) ───────────────────────────────────────────────────────\n\nexport type InputGroupAddonProps = {\n    children: ReactNode;\n    className?: string;\n    testID?: string;\n};\n\n/**\n * Decorator slot inside an `<InputGroup>`. Renders a muted, non-interactive\n * box that visually fuses with the input. Place before `<InputGroupInput>`\n * for a prefix, after for a suffix. Accepts strings or `ReactNode` (icons).\n */\nexport const InputGroupAddon = ({ children, className, testID }: InputGroupAddonProps) => {\n    const colors = useThemeColors();\n    const textStyle: TextStyle = {\n        color: colors.semantic.text.muted,\n        fontFamily: colors.fontFamily.body,\n        fontSize: px(colors.fontSize.sm),\n    };\n\n    // Wrap raw strings/numbers so consumers can pass `\"@\"` or `<MailIcon />`\n    // and both render correctly without callers tripping over RN's \"text\n    // outside of <Text>\" warning.\n    if (typeof children === 'string' || typeof children === 'number') {\n        return (\n            <RNText\n                {...(testID !== undefined ? { testID } : {})}\n                className={cn('text-sm text-semantic-text-muted', className)}\n                style={textStyle}\n            >\n                {children}\n            </RNText>\n        );\n    }\n\n    return (\n        <View {...(testID !== undefined ? { testID } : {})} {...(className !== undefined ? { className } : {})}>\n            {children}\n        </View>\n    );\n};\n\n// Brand the function so the parent can locate it via Children.toArray walk.\n(InputGroupAddon as unknown as { __noriType: symbol }).__noriType = ADDON_TYPE;\n\n// ─── Input (public) ───────────────────────────────────────────────────────\n\n// Layout-only base; theme-driven dimensions are merged inside InputGroupInput.\nconst INPUT_LAYOUT_BASE: TextStyle = {\n    flex: 1,\n    // RN web honours `outlineStyle: 'none'` to suppress the default browser\n    // focus ring — the group's own focus-within border replaces it.\n    outlineStyle: 'none' as unknown as TextStyle['outlineStyle'],\n};\n\nexport type InputGroupInputProps = TextInputProps;\n\n/**\n * The text field inside an `<InputGroup>`. Extends the full `TextInput` API\n * (label, helperText, error, disabled, etc.) so consumers don't lose any\n * functionality when reaching for the integrated layout.\n *\n * Implementation note: this renders a bare RN `TextInput` because the\n * surrounding `<InputGroup>` already paints the border + label + helper —\n * those bits are lifted to the parent so they render OUTSIDE the bordered\n * field row, the way a normal field's label/helper sits above/below the box.\n */\nexport const InputGroupInput = ({\n    label: _label,\n    helperText: _helperText,\n    error,\n    disabled,\n    onChangeText,\n    onFocus,\n    onBlur,\n    multiline,\n    numberOfLines,\n    leading: _leading,\n    trailing: _trailing,\n    containerClassName: _containerClassName,\n    className,\n    testID,\n    ...rest\n}: InputGroupInputProps) => {\n    const colors = useThemeColors();\n    const ctx = useInputGroupContext('InputGroupInput');\n    const inputId = ctx.inputId;\n    const describeId = ctx.describeId;\n    const isDisabled = disabled || ctx.disabled;\n    const hasError = Boolean(error) || ctx.hasError;\n\n    const inputExtras: Record<string, unknown> = {};\n    if (testID !== undefined) {\n        inputExtras.testID = testID;\n    }\n    if (_label !== undefined) {\n        inputExtras.accessibilityLabel = _label;\n    }\n    if (hasError) {\n        inputExtras['aria-invalid'] = true;\n    }\n    if (error || _helperText) {\n        inputExtras['aria-describedby'] = describeId;\n    }\n    if (multiline !== undefined) {\n        inputExtras.multiline = multiline;\n    }\n    if (numberOfLines !== undefined) {\n        inputExtras.numberOfLines = numberOfLines;\n    }\n    if (onChangeText !== undefined) {\n        inputExtras.onChangeText = onChangeText;\n    }\n\n    const inputStyle: TextStyle = {\n        ...INPUT_LAYOUT_BASE,\n        paddingVertical: px(colors.spacing['2']),\n        paddingHorizontal: px(colors.spacing['3']),\n        fontFamily: colors.fontFamily.body,\n        fontSize: px(colors.fontSize.md),\n        color: colors.semantic.text.default,\n    };\n\n    return (\n        <RNTextInput\n            ref={(node) => {\n                ctx.inputRef.current = node;\n            }}\n            nativeID={inputId}\n            editable={!isDisabled}\n            className={cn('flex-1 py-2 px-3 text-md text-semantic-text-default outline-none bg-transparent', className)}\n            placeholderTextColor={colors.semantic.text.muted}\n            onFocus={(e) => {\n                ctx.setFocused(true);\n                onFocus?.(e);\n            }}\n            onBlur={(e) => {\n                ctx.setFocused(false);\n                onBlur?.(e);\n            }}\n            {...inputExtras}\n            {...rest}\n            style={[inputStyle, rest.style]}\n        />\n    );\n};\n\n(InputGroupInput as unknown as { __noriType: symbol }).__noriType = INPUT_TYPE;\n\n/**\n * Public `InputGroup` value — the root function plus its `.Addon` and `.Input`\n * static members. `Object.assign` produces a value whose inferred type carries\n * the static properties, so `.d.ts` consumers can write `<InputGroup.Addon>`\n * without a separate import.\n */\nexport const InputGroup = Object.assign(InputGroupRoot, {\n    Addon: InputGroupAddon,\n    Input: InputGroupInput,\n});\n"]}

package/dist/chunk-5A2QOOVN.js

@@ -0,0 +1,15 @@
+import { __name } from './chunk-WCQVDF3K.js';
+
+// 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");
+
+export { px };
+//# sourceMappingURL=chunk-5A2QOOVN.js.map
+//# sourceMappingURL=chunk-5A2QOOVN.js.map

package/dist/chunk-5A2QOOVN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/theme/px.ts"],"names":[],"mappings":";;;AAmBO,SAAS,GAAG,KAAA,EAAgC;AAC/C,EAAA,IAAI,OAAO,UAAU,QAAA,EAAU;AAC3B,IAAA,OAAO,KAAA;AAAA,EACX;AACA,EAAA,MAAM,CAAA,GAAI,MAAA,CAAO,UAAA,CAAW,KAAK,CAAA;AACjC,EAAA,OAAO,MAAA,CAAO,QAAA,CAAS,CAAC,CAAA,GAAI,CAAA,GAAI,CAAA;AACpC;AANgB,MAAA,CAAA,EAAA,EAAA,IAAA,CAAA","file":"chunk-5A2QOOVN.js","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"]}

package/dist/chunk-5XEGZFG5.js

@@ -0,0 +1,208 @@
+import { Spinner } from './chunk-ACLHDHX3.js';
+import { Slot } from './chunk-ZIBNLXIV.js';
+import { px } from './chunk-5A2QOOVN.js';
+import { cn } from './chunk-CHXHRJNZ.js';
+import { useThemeColors } from './chunk-R5JMDDCB.js';
+import { __name } from './chunk-WCQVDF3K.js';
+import { useState, useCallback } from 'react';
+import { Pressable, Text } from 'react-native';
+import { jsx, jsxs } from 'nativewind/jsx-runtime';
+
+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] = useState(false);
+  const [pressed, setPressed] = useState(false);
+  const handleHoverIn = useCallback(() => setHovered(true), []);
+  const handleHoverOut = useCallback(() => {
+    setHovered(false);
+    setPressed(false);
+  }, []);
+  const handlePressIn = useCallback(() => setPressed(true), []);
+  const handlePressOut = 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__ */ jsx(Slot, { ...slotProps, children });
+  }
+  const pressableExtra = {};
+  if (isInoperative) {
+    pressableExtra["aria-disabled"] = true;
+  }
+  if (loading) {
+    pressableExtra["aria-busy"] = true;
+  }
+  return /* @__PURE__ */ jsxs(
+    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__ */ jsx(Spinner, { size: ICON_SIZE[size], label: "Loading", color: textColor }) : LeadingIcon ? /* @__PURE__ */ jsx(LeadingIcon, { size: ICON_SIZE[size], color: textColor }) : null,
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            className: cn("font-medium", SIZE_CLASSES[size].includes("text-") ? void 0 : "text-md"),
+            style: textStyle,
+            children
+          }
+        ),
+        TrailingIcon ? /* @__PURE__ */ jsx(TrailingIcon, { size: ICON_SIZE[size], color: textColor }) : null
+      ]
+    }
+  );
+}, "Button");
+
+export { Button };
+//# sourceMappingURL=chunk-5XEGZFG5.js.map
+//# sourceMappingURL=chunk-5XEGZFG5.js.map

package/dist/chunk-5XEGZFG5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Button/Button.tsx"],"names":["RNText"],"mappings":"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","file":"chunk-5XEGZFG5.js","sourcesContent":["'use client';\n\nimport type { Theme } from '@nori-ui/tokens';\nimport type { ComponentType, ReactNode, Ref } from 'react';\nimport { useCallback, useState } from 'react';\nimport type { PressableProps, StyleProp, View, ViewStyle } from 'react-native';\nimport { Pressable, Text as RNText } from 'react-native';\nimport { Slot } from '../../slot';\nimport { px } from '../../theme/px';\nimport { useThemeColors } from '../../theme/use-theme-colors';\nimport { cn } from '../../utils/cn';\nimport { Spinner } from '../Spinner';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'destructive';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\ntype IconSlot = ComponentType<{ size?: number; color?: string }>;\n\nexport type ButtonProps = Omit<PressableProps, 'disabled' | 'children'> & {\n    children?: ReactNode;\n    variant?: ButtonVariant;\n    size?: ButtonSize;\n    disabled?: boolean;\n    loading?: boolean;\n    leadingIcon?: IconSlot;\n    trailingIcon?: IconSlot;\n    /** If true, the single child becomes the interactive element (Slot pattern). */\n    asChild?: boolean;\n    className?: string;\n    testID?: string;\n    ref?: Ref<View>;\n};\n\n// NativeWind classes — the `dark:` variants flip colors when <html> carries\n// the `dark` class (or `data-theme=\"dark\"`); see the tokens Tailwind preset.\n//\n// These act as the no-NativeWind fallback (e.g. raw JSX in Expo Snack\n// without a compile step) and the dark-mode bridge. The dimensional\n// utilities (`rounded-md`, `h-10`, `px-4`, `gap-2`, `text-*`) are kept\n// because the inline `style` array always overrides them — so when a\n// `<ThemeProvider>` widens spacing/radius/fontSize, the inline values\n// win on CSS specificity and the Tailwind class is harmless.\nconst VARIANT_CLASSES: Record<ButtonVariant, string> = {\n    primary:\n        'bg-semantic-interactive-primary hover:bg-semantic-interactive-primaryHover active:bg-semantic-interactive-primaryPressed',\n    secondary:\n        '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',\n    ghost: 'bg-transparent hover:bg-neutral-100 active:bg-neutral-200 dark:hover:bg-neutral-800 dark:active:bg-neutral-700',\n    destructive: 'bg-semantic-interactive-destructive hover:opacity-90 active:opacity-80',\n};\n\nconst SIZE_CLASSES: Record<ButtonSize, string> = {\n    sm: 'h-8 px-3 text-sm',\n    md: 'h-10 px-4 text-md',\n    lg: 'h-12 px-5 text-lg',\n};\n\nconst ICON_SIZE: Record<ButtonSize, number> = { sm: 14, md: 16, lg: 20 };\n\nconst BASE_CLASSES = 'inline-flex flex-row items-center justify-center gap-2 rounded-md select-none';\n\n// Heights are intentionally hardcoded — they're tightly coupled to the\n// button's overall density (a 48px target on lg, 32px on sm). Padding and\n// fontSize are pulled from the active theme so a custom theme that scales\n// the spacing/fontSize ramps also scales the button. If you want a\n// genuinely smaller / taller button, override `theme.spacing` /\n// `theme.fontSize` rather than reach for new size literals here.\nconst HEIGHT_BY_SIZE: Record<ButtonSize, number> = {\n    sm: 32,\n    md: 40,\n    lg: 48,\n};\ntype SizeKeys = { padX: keyof Theme['spacing']; font: keyof Theme['fontSize'] };\nconst SIZE_KEYS: Record<ButtonSize, SizeKeys> = {\n    sm: { padX: '3', font: 'sm' },\n    md: { padX: '4', font: 'md' },\n    lg: { padX: '5', font: 'lg' },\n};\n\n// gap and borderRadius come from the theme inside the component.\nconst BASE_STYLE: ViewStyle = {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n};\n\nexport const Button = ({\n    children,\n    variant = 'primary',\n    size = 'md',\n    disabled,\n    loading,\n    leadingIcon: LeadingIcon,\n    trailingIcon: TrailingIcon,\n    asChild,\n    className,\n    onPress,\n    testID,\n    style,\n    ref,\n    ...rest\n}: ButtonProps) => {\n    const colors = useThemeColors();\n    const isInoperative = Boolean(disabled) || Boolean(loading);\n    // rn-web's `Pressable` does not reliably apply a `style` callback's\n    // returned values to the rendered DOM (the static portions get\n    // dropped). We track hover/press via state and pass `style` as a\n    // plain array — that path produces an inline `style=\"…\"` attribute\n    // on the button, which beats the dimensional Tailwind utilities on\n    // CSS specificity and lets a custom `<ThemeProvider>` flow padding,\n    // radius, fontSize, fontFamily, and fontWeight all the way through.\n    const [hovered, setHovered] = useState(false);\n    const [pressed, setPressed] = useState(false);\n    const handleHoverIn = useCallback(() => setHovered(true), []);\n    const handleHoverOut = useCallback(() => {\n        setHovered(false);\n        setPressed(false);\n    }, []);\n    const handlePressIn = useCallback(() => setPressed(true), []);\n    const handlePressOut = useCallback(() => setPressed(false), []);\n    // When disabled, drop the variant's hover/active class fragments and\n    // append `pointer-events-none cursor-not-allowed` so the className\n    // path matches the inline-style path: no hover tint, no press tint,\n    // and the cursor signals the control is inert. We still keep the\n    // base variant bg class so the resting color is right.\n    const variantClasses = isInoperative\n        ? VARIANT_CLASSES[variant]\n              .split(' ')\n              .filter((cls) => !cls.startsWith('hover:') && !cls.startsWith('active:'))\n              .join(' ')\n        : VARIANT_CLASSES[variant];\n    const classes = cn(\n        BASE_CLASSES,\n        variantClasses,\n        SIZE_CLASSES[size],\n        isInoperative ? 'opacity-60 pointer-events-none cursor-not-allowed' : undefined,\n        className\n    );\n\n    // Inline-style palette per (variant × interaction state). The hook is the\n    // source of truth — dark mode and theme overrides flow through it.\n    //\n    // Why inline (not className): a class-based `:hover { background-color }`\n    // can never beat an inline `style={{ backgroundColor }}` — inline wins\n    // by CSS specificity. So if we want hover to actually flip the surface\n    // color, hover has to be applied inline too. We use Pressable's `style`\n    // callback (`{ hovered, pressed }`) which on web is wired up by\n    // react-native-web and on native exposes only `pressed`. The className\n    // path keeps the same Tailwind variants for the no-NativeWind fallback\n    // case (Expo Snack rendering raw JSX without compilation).\n    const variantStateColors: Record<ButtonVariant, { rest: string; hover: string; pressed: string }> = {\n        primary: {\n            rest: colors.semantic.interactive.primary,\n            hover: colors.semantic.interactive.primaryHover,\n            pressed: colors.semantic.interactive.primaryPressed,\n        },\n        secondary: {\n            rest: colors.semantic.background.subtle,\n            // hover / pressed must be theme-aware. The previous version\n            // pulled directly from `color.neutral.{200,300}`, which are\n            // raw tokens that DON'T flip per scheme — in dark mode the\n            // hovered state ended up light-gray on dark, ruining contrast.\n            // `border.default` / `border.strong` invert correctly: in\n            // light they read as light-gray washes (next step from\n            // `background.subtle`); in dark they read as the darker grays\n            // expected for hover/pressed on a dark surface.\n            hover: colors.semantic.border.default,\n            pressed: colors.semantic.border.strong,\n        },\n        ghost: {\n            rest: 'transparent',\n            hover: colors.semantic.background.subtle,\n            pressed: colors.semantic.border.default,\n        },\n        destructive: {\n            rest: colors.semantic.interactive.destructive,\n            // No darker tone token for destructive yet — fall back to a 90% /\n            // 80% opacity wash by mixing through rgba. Matches the className\n            // hover:opacity-90 / active:opacity-80 fallback.\n            hover: colors.semantic.interactive.destructive,\n            pressed: colors.semantic.interactive.destructive,\n        },\n    };\n    const variantTextColor: Record<ButtonVariant, string> = {\n        primary: colors.semantic.text.inverted,\n        secondary: colors.semantic.text.default,\n        ghost: colors.semantic.text.default,\n        destructive: colors.semantic.text.inverted,\n    };\n\n    const stateColors = variantStateColors[variant];\n    // When disabled (or loading), force the rest state — disabled means\n    // disabled. The control should NOT visually respond to hover/press,\n    // even though the OS still fires those events. Pressable also gets\n    // `disabled={true}` on the Pressable below which blocks onPress, but\n    // the visual treatment is owned here.\n    const stateBg = isInoperative\n        ? stateColors.rest\n        : pressed\n          ? stateColors.pressed\n          : hovered\n            ? stateColors.hover\n            : stateColors.rest;\n    // Destructive uses opacity dim instead of a separate color (matches\n    // existing className behavior; keeps the red recognisable on press).\n    // Same disabled rule as bg: hover/press dim is suppressed when\n    // disabled — the static 0.6 opacity below handles the disabled look.\n    const stateInteractionOpacity = isInoperative || variant !== 'destructive' ? 1 : pressed ? 0.8 : hovered ? 0.9 : 1;\n\n    // Resolve all dimensional + typographic values from the active theme\n    // so a custom theme that scales spacing / fontSize / radius / fontWeight\n    // also reshapes every Button on the page.\n    const sizeKeys = SIZE_KEYS[size];\n    const sizeContainer: ViewStyle = {\n        height: HEIGHT_BY_SIZE[size],\n        paddingHorizontal: px(colors.spacing[sizeKeys.padX]),\n        gap: px(colors.spacing['2']),\n        borderRadius: px(colors.radius.md),\n    };\n    const sizeFontSize = px(colors.fontSize[sizeKeys.font]);\n\n    const inlineBase: ViewStyle[] = [\n        BASE_STYLE,\n        { backgroundColor: stateBg },\n        sizeContainer,\n        { opacity: isInoperative ? 0.6 : stateInteractionOpacity },\n    ];\n    // Resolve the consumer's `style` against the same hover/press state\n    // we just computed — this preserves the historical contract where a\n    // callback `style` receives the live interaction flags. The RN\n    // upstream type only declares `pressed`; rn-web also passes\n    // `hovered`. Cast through `unknown` to ship both without a type\n    // assertion battle.\n    const consumerStyle: StyleProp<ViewStyle> =\n        typeof style === 'function' ? style({ pressed, ...({ hovered } as Record<string, unknown>) } as never) : style;\n    const pressableStyle: StyleProp<ViewStyle> = [...inlineBase, consumerStyle];\n    const slotStyle: StyleProp<ViewStyle> = [...inlineBase, consumerStyle];\n\n    const textColor = variantTextColor[variant];\n    const textStyle = {\n        color: textColor,\n        fontFamily: colors.fontFamily.body,\n        fontSize: sizeFontSize,\n        fontWeight: colors.fontWeight.medium as '500',\n    };\n\n    const handlePress: NonNullable<PressableProps['onPress']> = (ev) => {\n        if (isInoperative) {\n            return;\n        }\n        onPress?.(ev);\n    };\n\n    if (asChild) {\n        const slotProps: Record<string, unknown> = {\n            ref,\n            className: classes,\n            style: slotStyle,\n            onClick: handlePress as unknown as (...args: unknown[]) => unknown,\n            ...rest,\n        };\n        if (isInoperative) {\n            slotProps['aria-disabled'] = true;\n        }\n        if (loading) {\n            slotProps['aria-busy'] = true;\n        }\n        if (testID !== undefined) {\n            slotProps['data-testid'] = testID;\n        }\n        return <Slot {...slotProps}>{children}</Slot>;\n    }\n\n    const pressableExtra: Record<string, unknown> = {};\n    if (isInoperative) {\n        pressableExtra['aria-disabled'] = true;\n    }\n    if (loading) {\n        pressableExtra['aria-busy'] = true;\n    }\n\n    return (\n        <Pressable\n            ref={ref}\n            {...(testID !== undefined ? { testID } : {})}\n            role=\"button\"\n            accessibilityRole=\"button\"\n            accessibilityState={{ disabled: isInoperative, busy: Boolean(loading) }}\n            disabled={isInoperative}\n            onPress={handlePress}\n            onHoverIn={handleHoverIn}\n            onHoverOut={handleHoverOut}\n            onPressIn={handlePressIn}\n            onPressOut={handlePressOut}\n            className={classes}\n            style={pressableStyle}\n            {...pressableExtra}\n            {...rest}\n        >\n            {loading ? (\n                <Spinner size={ICON_SIZE[size]} label=\"Loading\" color={textColor} />\n            ) : LeadingIcon ? (\n                <LeadingIcon size={ICON_SIZE[size]} color={textColor} />\n            ) : null}\n            <RNText\n                className={cn('font-medium', SIZE_CLASSES[size].includes('text-') ? undefined : 'text-md')}\n                style={textStyle}\n            >\n                {children}\n            </RNText>\n            {TrailingIcon ? <TrailingIcon size={ICON_SIZE[size]} color={textColor} /> : null}\n        </Pressable>\n    );\n};\n"]}