@scripso-homepad/ui 0.3.2 → 0.3.4

package/README.md

@@ -92,15 +92,28 @@ export function Example() {
 
 ### `Button`
 
-| Prop            | Type                   | Required | Default | Description                                              |
-| --------------- | ---------------------- | -------- | ------- | -------------------------------------------------------- |
-| `title`         | `string`               | Yes      | —       | Button label text                                        |
-| `onPress`       | `() => void`           | Yes      | —       | Press handler                                            |
-| `disabled`      | `boolean`              | No       | `false` | Disables interaction                                     |
-| `style`         | `StyleProp<ViewStyle>` | No       | —       | Extra container styles (web + native)                    |
-| `textStyle`     | `StyleProp<TextStyle>` | No       | —       | Extra label styles (web + native)                        |
-| `className`     | `string`               | No       | —       | CSS/Tailwind classes for container (web / NativeWind)    |
-| `textClassName` | `string`               | No       | —       | CSS/Tailwind classes for label (web / NativeWind)        |
+| Prop            | Type                                              | Required | Default     | Description                                              |
+| --------------- | ------------------------------------------------- | -------- | ----------- | -------------------------------------------------------- |
+| `title`         | `string`                                          | Yes      | —           | Button label text                                        |
+| `onPress`       | `() => void`                                      | Yes      | —           | Press handler                                            |
+| `disabled`      | `boolean`                                         | No       | `false`     | Disables interaction                                     |
+| `variant`       | `"primary" \| "secondary" \| "outline" \| "ghost"` | No       | `"primary"` | Visual style preset                                      |
+| `size`          | `"small" \| "medium" \| "large"`                  | No       | `"medium"`  | Size preset                                              |
+| `style`         | `StyleProp<ViewStyle>`                            | No       | —           | Extra container styles (web + native)                    |
+| `textStyle`     | `StyleProp<TextStyle>`                            | No       | —           | Extra label styles (web + native)                        |
+| `className`     | `string`                                          | No       | —           | CSS/Tailwind classes for container (web / NativeWind)    |
+| `textClassName` | `string`                                          | No       | —           | CSS/Tailwind classes for label (web / NativeWind)        |
+
+#### Variants and sizes
+
+```tsx
+<Button title="Save" onPress={handleSave} variant="primary" size="medium" />
+<Button title="Cancel" onPress={handleCancel} variant="outline" size="small" />
+<Button title="Delete" onPress={handleDelete} variant="secondary" size="large" />
+<Button title="More" onPress={handleMore} variant="ghost" />
+```
+
+Preview all combinations in Storybook: `npm run storybook` → **AllVariants**, **AllSizes**, **VariantMatrix**.
 
 #### Custom styles (React Native `style`)
 
@@ -115,18 +128,24 @@ export function Example() {
 
 #### Tailwind classes (React web)
 
-On web, `className` is applied to real DOM elements (`<button>` / `<span>`), so Tailwind utilities work with Vite or Next.js:
+`className` is applied to the same `TouchableOpacity` / `Text` DOM nodes as the default styles — layout and padding stay consistent with native:
 
 ```tsx
 <Button
   title="Save"
   onPress={handleSave}
-  className="rounded-full bg-violet-600 px-8 shadow-lg"
+  className="!bg-violet-600 shadow-lg"
   textClassName="text-sm font-bold uppercase"
 />
 ```
 
-> **Note:** `react-native-web` does not forward `className` to the DOM by default. This package renders native HTML elements on web so Tailwind classes appear in the DOM. On React Native, use `style` or [NativeWind](https://www.nativewind.dev/) with `cssInterop`.
+Use `!` (important) on Tailwind utilities when overriding default colors, e.g. `!bg-red-500`, because react-native-web applies inline styles from `StyleSheet`.
+
+Ensure Tailwind scans the package if needed:
+
+```js
+content: ["./src/**/*.{js,ts,jsx,tsx}", "./node_modules/@scripso-homepad/ui/**/*.{js,ts,jsx,tsx}"],
+```
 
 ## Development
 

package/dist/index.cjs

@@ -5,108 +5,176 @@ var reactNative = require('react-native');
 var jsxRuntime = require('react/jsx-runtime');
 
 // src/components/Button.tsx
-function rnStyleToWebStyle(style) {
-  const flat = reactNative.StyleSheet.flatten(style);
-  if (!flat) return {};
-  const css = {};
-  for (const [key, value] of Object.entries(flat)) {
-    if (value === void 0 || value === null) continue;
-    switch (key) {
-      case "paddingVertical":
-        css.paddingTop = value;
-        css.paddingBottom = value;
-        break;
-      case "paddingHorizontal":
-        css.paddingLeft = value;
-        css.paddingRight = value;
-        break;
-      case "marginVertical":
-        css.marginTop = value;
-        css.marginBottom = value;
-        break;
-      case "marginHorizontal":
-        css.marginLeft = value;
-        css.marginRight = value;
-        break;
-      default:
-        css[key] = value;
-    }
-  }
-  if (css.alignItems || css.justifyContent || css.flexDirection) {
-    css.display = css.display ?? "flex";
+function hasClassList(node) {
+  return typeof node === "object" && node !== null && "classList" in node && typeof node.classList?.add === "function";
+}
+function resolveWebElement(ref) {
+  const node = ref.current;
+  if (!node) return null;
+  if (hasClassList(node)) return node;
+  const host = node;
+  if (hasClassList(host._touchableNode)) return host._touchableNode;
+  if (typeof host.getScrollableNode === "function") {
+    const scrollNode = host.getScrollableNode();
+    if (hasClassList(scrollNode)) return scrollNode;
   }
-  return css;
+  return null;
+}
+function useApplyWebClassName(ref, className) {
+  react.useLayoutEffect(() => {
+    if (reactNative.Platform.OS !== "web" || !className?.trim()) return;
+    const element = resolveWebElement(ref);
+    if (!element) return;
+    const classes = className.trim().split(/\s+/);
+    element.classList.add(...classes);
+    return () => {
+      element.classList.remove(...classes);
+    };
+  }, [ref, className]);
 }
 function Button({
   title,
   onPress,
   disabled = false,
+  variant = "primary",
+  size = "medium",
   style,
   textStyle,
   className,
   textClassName
 }) {
-  const containerStyle = [styles.button, disabled && styles.buttonDisabled, style];
-  const labelStyle = [styles.text, disabled && styles.textDisabled, textStyle];
-  const useWebDom = reactNative.Platform.OS === "web" && (className != null || textClassName != null);
-  if (useWebDom) {
-    return react.createElement(
-      "button",
-      {
-        type: "button",
-        className,
-        style: rnStyleToWebStyle(containerStyle),
-        disabled,
-        onClick: (event) => {
-          onPress(event);
-        },
-        "aria-disabled": disabled
-      },
-      react.createElement(
-        "span",
-        {
-          className: textClassName,
-          style: rnStyleToWebStyle(labelStyle)
-        },
-        title
-      )
-    );
-  }
+  const containerRef = react.useRef(null);
+  const textRef = react.useRef(null);
+  useApplyWebClassName(containerRef, className);
+  useApplyWebClassName(textRef, textClassName);
+  const containerStyle = [
+    styles.base,
+    variantStyles[variant],
+    sizeStyles[size],
+    disabled && disabledVariantStyles[variant],
+    style
+  ];
+  const labelStyle = [
+    textBaseStyles.base,
+    textVariantStyles[variant],
+    textSizeStyles[size],
+    disabled && textDisabledStyles[variant],
+    textStyle
+  ];
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.TouchableOpacity,
     {
+      ref: containerRef,
       style: containerStyle,
       onPress,
       disabled,
       activeOpacity: 0.7,
       accessibilityRole: "button",
       accessibilityState: { disabled },
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: labelStyle, children: title })
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { ref: textRef, style: labelStyle, children: title })
     }
   );
 }
 var styles = reactNative.StyleSheet.create({
-  button: {
-    backgroundColor: "#2563eb",
-    paddingVertical: 12,
-    paddingHorizontal: 24,
-    borderRadius: 8,
+  base: {
     alignItems: "center",
     justifyContent: "center",
-    minWidth: 120,
+    borderRadius: 8,
     borderWidth: 0
+  }
+});
+var variantStyles = reactNative.StyleSheet.create({
+  primary: {
+    backgroundColor: "#2563eb"
+  },
+  secondary: {
+    backgroundColor: "#4b5563"
+  },
+  outline: {
+    backgroundColor: "transparent",
+    borderWidth: 1,
+    borderColor: "#2563eb"
+  },
+  ghost: {
+    backgroundColor: "transparent"
+  }
+});
+var sizeStyles = reactNative.StyleSheet.create({
+  small: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    minWidth: 96
   },
-  buttonDisabled: {
+  medium: {
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    minWidth: 120
+  },
+  large: {
+    paddingVertical: 16,
+    paddingHorizontal: 32,
+    minWidth: 160
+  }
+});
+var disabledVariantStyles = reactNative.StyleSheet.create({
+  primary: {
     backgroundColor: "#93c5fd",
     opacity: 0.7
   },
-  text: {
-    color: "#ffffff",
-    fontSize: 16,
+  secondary: {
+    backgroundColor: "#9ca3af",
+    opacity: 0.7
+  },
+  outline: {
+    borderColor: "#93c5fd",
+    opacity: 0.7
+  },
+  ghost: {
+    opacity: 0.5
+  }
+});
+var textBaseStyles = reactNative.StyleSheet.create({
+  base: {
     fontWeight: "600"
+  }
+});
+var textVariantStyles = reactNative.StyleSheet.create({
+  primary: {
+    color: "#ffffff"
+  },
+  secondary: {
+    color: "#ffffff"
   },
-  textDisabled: {
+  outline: {
+    color: "#2563eb"
+  },
+  ghost: {
+    color: "#2563eb"
+  }
+});
+var textSizeStyles = reactNative.StyleSheet.create({
+  small: {
+    fontSize: 14
+  },
+  medium: {
+    fontSize: 16
+  },
+  large: {
+    fontSize: 18
+  }
+});
+var textDisabledStyles = reactNative.StyleSheet.create({
+  primary: {
     color: "#e5e7eb"
+  },
+  secondary: {
+    color: "#f3f4f6"
+  },
+  outline: {
+    color: "#93c5fd"
+  },
+  ghost: {
+    color: "#93c5fd"
   }
 });
 

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/rnStyleToWebStyle.ts","../src/components/Button.tsx"],"names":["StyleSheet","Platform","createElement","jsx","TouchableOpacity","Text"],"mappings":"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","file":"index.cjs","sourcesContent":["import { StyleSheet, type StyleProp, type TextStyle, type ViewStyle } from \"react-native\";\nimport type { CSSProperties } from \"react\";\n\ntype RNStyle = StyleProp<ViewStyle> | StyleProp<TextStyle>;\n\n/**\n * Converts React Native StyleSheet values to CSS properties for DOM elements.\n * Required when rendering native HTML on web (browsers ignore paddingVertical, etc.).\n */\nexport function rnStyleToWebStyle(style: RNStyle): CSSProperties {\n  const flat = StyleSheet.flatten(style);\n  if (!flat) return {};\n\n  const css: Record<string, unknown> = {};\n\n  for (const [key, value] of Object.entries(flat)) {\n    if (value === undefined || value === null) continue;\n\n    switch (key) {\n      case \"paddingVertical\":\n        css.paddingTop = value;\n        css.paddingBottom = value;\n        break;\n      case \"paddingHorizontal\":\n        css.paddingLeft = value;\n        css.paddingRight = value;\n        break;\n      case \"marginVertical\":\n        css.marginTop = value;\n        css.marginBottom = value;\n        break;\n      case \"marginHorizontal\":\n        css.marginLeft = value;\n        css.marginRight = value;\n        break;\n      default:\n        css[key] = value;\n    }\n  }\n\n  if (css.alignItems || css.justifyContent || css.flexDirection) {\n    css.display = css.display ?? \"flex\";\n  }\n\n  return css as CSSProperties;\n}\n","import React, { createElement } from \"react\";\nimport {\n  Platform,\n  StyleSheet,\n  Text,\n  TouchableOpacity,\n  type GestureResponderEvent,\n  type StyleProp,\n  type TextStyle,\n  type ViewStyle,\n} from \"react-native\";\nimport { rnStyleToWebStyle } from \"../utils/rnStyleToWebStyle\";\n\nexport interface ButtonProps {\n  title: string;\n  onPress: (event: GestureResponderEvent) => void;\n  disabled?: boolean;\n  /** Additional container styles (works on web and native). */\n  style?: StyleProp<ViewStyle>;\n  /** Additional label styles (works on web and native). */\n  textStyle?: StyleProp<TextStyle>;\n  /**\n   * CSS class names for the container (web only — uses DOM `<button>` for Tailwind).\n   * On native: ignored unless using NativeWind with cssInterop.\n   */\n  className?: string;\n  /**\n   * CSS class names for the label (web only).\n   * On native: ignored unless using NativeWind with cssInterop.\n   */\n  textClassName?: string;\n}\n\nexport function Button({\n  title,\n  onPress,\n  disabled = false,\n  style,\n  textStyle,\n  className,\n  textClassName,\n}: ButtonProps) {\n  const containerStyle = [styles.button, disabled && styles.buttonDisabled, style];\n  const labelStyle = [styles.text, disabled && styles.textDisabled, textStyle];\n\n  const useWebDom =\n    Platform.OS === \"web\" && (className != null || textClassName != null);\n\n  if (useWebDom) {\n    return createElement(\n      \"button\",\n      {\n        type: \"button\",\n        className,\n        style: rnStyleToWebStyle(containerStyle),\n        disabled,\n        onClick: (event: React.MouseEvent<HTMLButtonElement>) => {\n          onPress(event as unknown as GestureResponderEvent);\n        },\n        \"aria-disabled\": disabled,\n      },\n      createElement(\n        \"span\",\n        {\n          className: textClassName,\n          style: rnStyleToWebStyle(labelStyle),\n        },\n        title,\n      ),\n    );\n  }\n\n  return (\n    <TouchableOpacity\n      style={containerStyle}\n      onPress={onPress}\n      disabled={disabled}\n      activeOpacity={0.7}\n      accessibilityRole=\"button\"\n      accessibilityState={{ disabled }}\n    >\n      <Text style={labelStyle}>{title}</Text>\n    </TouchableOpacity>\n  );\n}\n\nconst styles = StyleSheet.create({\n  button: {\n    backgroundColor: \"#2563eb\",\n    paddingVertical: 12,\n    paddingHorizontal: 24,\n    borderRadius: 8,\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    minWidth: 120,\n    borderWidth: 0,\n  },\n  buttonDisabled: {\n    backgroundColor: \"#93c5fd\",\n    opacity: 0.7,\n  },\n  text: {\n    color: \"#ffffff\",\n    fontSize: 16,\n    fontWeight: \"600\",\n  },\n  textDisabled: {\n    color: \"#e5e7eb\",\n  },\n});\n"]}
+{"version":3,"sources":["../src/utils/useApplyWebClassName.ts","../src/components/Button.tsx"],"names":["useLayoutEffect","Platform","useRef","jsx","TouchableOpacity","Text","StyleSheet"],"mappings":"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","file":"index.cjs","sourcesContent":["import { useLayoutEffect } from \"react\";\nimport { Platform } from \"react-native\";\n\ninterface ClassListElement {\n  classList: {\n    add: (...classes: string[]) => void;\n    remove: (...classes: string[]) => void;\n  };\n}\n\nfunction hasClassList(node: unknown): node is ClassListElement {\n  return (\n    typeof node === \"object\" &&\n    node !== null &&\n    \"classList\" in node &&\n    typeof (node as ClassListElement).classList?.add === \"function\"\n  );\n}\n\nfunction resolveWebElement(ref: React.RefObject<unknown>): ClassListElement | null {\n  const node = ref.current;\n  if (!node) return null;\n\n  if (hasClassList(node)) return node;\n\n  const host = node as {\n    _touchableNode?: unknown;\n    getScrollableNode?: () => unknown;\n  };\n\n  if (hasClassList(host._touchableNode)) return host._touchableNode;\n\n  if (typeof host.getScrollableNode === \"function\") {\n    const scrollNode = host.getScrollableNode();\n    if (hasClassList(scrollNode)) return scrollNode;\n  }\n\n  return null;\n}\n\n/**\n * Applies CSS class names to the underlying DOM node on web.\n * Keeps TouchableOpacity/Text as the render path so default RN styles stay intact.\n */\nexport function useApplyWebClassName(\n  ref: React.RefObject<unknown>,\n  className?: string,\n): void {\n  useLayoutEffect(() => {\n    if (Platform.OS !== \"web\" || !className?.trim()) return;\n\n    const element = resolveWebElement(ref);\n    if (!element) return;\n\n    const classes = className.trim().split(/\\s+/);\n    element.classList.add(...classes);\n\n    return () => {\n      element.classList.remove(...classes);\n    };\n  }, [ref, className]);\n}\n","import { useRef, type ComponentRef } from \"react\";\nimport {\n  StyleSheet,\n  Text,\n  TouchableOpacity,\n  type GestureResponderEvent,\n  type StyleProp,\n  type TextStyle,\n  type ViewStyle,\n} from \"react-native\";\nimport { useApplyWebClassName } from \"../utils/useApplyWebClassName\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"outline\" | \"ghost\";\nexport type ButtonSize = \"small\" | \"medium\" | \"large\";\n\nexport interface ButtonProps {\n  title: string;\n  onPress: (event: GestureResponderEvent) => void;\n  disabled?: boolean;\n  /** Visual style preset. */\n  variant?: ButtonVariant;\n  /** Size preset. */\n  size?: ButtonSize;\n  /** Additional container styles (works on web and native). */\n  style?: StyleProp<ViewStyle>;\n  /** Additional label styles (works on web and native). */\n  textStyle?: StyleProp<TextStyle>;\n  /**\n   * CSS class names for the container (web: applied to the same DOM node as default styles).\n   * On native: ignored unless using NativeWind with cssInterop.\n   */\n  className?: string;\n  /**\n   * CSS class names for the label (web).\n   * On native: ignored unless using NativeWind with cssInterop.\n   */\n  textClassName?: string;\n}\n\nexport function Button({\n  title,\n  onPress,\n  disabled = false,\n  variant = \"primary\",\n  size = \"medium\",\n  style,\n  textStyle,\n  className,\n  textClassName,\n}: ButtonProps) {\n  const containerRef = useRef<ComponentRef<typeof TouchableOpacity>>(null);\n  const textRef = useRef<ComponentRef<typeof Text>>(null);\n\n  useApplyWebClassName(containerRef, className);\n  useApplyWebClassName(textRef, textClassName);\n\n  const containerStyle = [\n    styles.base,\n    variantStyles[variant],\n    sizeStyles[size],\n    disabled && disabledVariantStyles[variant],\n    style,\n  ];\n\n  const labelStyle = [\n    textBaseStyles.base,\n    textVariantStyles[variant],\n    textSizeStyles[size],\n    disabled && textDisabledStyles[variant],\n    textStyle,\n  ];\n\n  return (\n    <TouchableOpacity\n      ref={containerRef}\n      style={containerStyle}\n      onPress={onPress}\n      disabled={disabled}\n      activeOpacity={0.7}\n      accessibilityRole=\"button\"\n      accessibilityState={{ disabled }}\n    >\n      <Text ref={textRef} style={labelStyle}>\n        {title}\n      </Text>\n    </TouchableOpacity>\n  );\n}\n\nconst styles = StyleSheet.create({\n  base: {\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    borderRadius: 8,\n    borderWidth: 0,\n  },\n});\n\nconst variantStyles = StyleSheet.create({\n  primary: {\n    backgroundColor: \"#2563eb\",\n  },\n  secondary: {\n    backgroundColor: \"#4b5563\",\n  },\n  outline: {\n    backgroundColor: \"transparent\",\n    borderWidth: 1,\n    borderColor: \"#2563eb\",\n  },\n  ghost: {\n    backgroundColor: \"transparent\",\n  },\n});\n\nconst sizeStyles = StyleSheet.create({\n  small: {\n    paddingVertical: 8,\n    paddingHorizontal: 16,\n    minWidth: 96,\n  },\n  medium: {\n    paddingVertical: 12,\n    paddingHorizontal: 24,\n    minWidth: 120,\n  },\n  large: {\n    paddingVertical: 16,\n    paddingHorizontal: 32,\n    minWidth: 160,\n  },\n});\n\nconst disabledVariantStyles = StyleSheet.create({\n  primary: {\n    backgroundColor: \"#93c5fd\",\n    opacity: 0.7,\n  },\n  secondary: {\n    backgroundColor: \"#9ca3af\",\n    opacity: 0.7,\n  },\n  outline: {\n    borderColor: \"#93c5fd\",\n    opacity: 0.7,\n  },\n  ghost: {\n    opacity: 0.5,\n  },\n});\n\nconst textBaseStyles = StyleSheet.create({\n  base: {\n    fontWeight: \"600\",\n  },\n});\n\nconst textVariantStyles = StyleSheet.create({\n  primary: {\n    color: \"#ffffff\",\n  },\n  secondary: {\n    color: \"#ffffff\",\n  },\n  outline: {\n    color: \"#2563eb\",\n  },\n  ghost: {\n    color: \"#2563eb\",\n  },\n});\n\nconst textSizeStyles = StyleSheet.create({\n  small: {\n    fontSize: 14,\n  },\n  medium: {\n    fontSize: 16,\n  },\n  large: {\n    fontSize: 18,\n  },\n});\n\nconst textDisabledStyles = StyleSheet.create({\n  primary: {\n    color: \"#e5e7eb\",\n  },\n  secondary: {\n    color: \"#f3f4f6\",\n  },\n  outline: {\n    color: \"#93c5fd\",\n  },\n  ghost: {\n    color: \"#93c5fd\",\n  },\n});\n"]}

package/dist/index.d.cts

@@ -1,25 +1,31 @@
-import React from 'react';
+import * as react from 'react';
 import { GestureResponderEvent, StyleProp, ViewStyle, TextStyle } from 'react-native';
 
+type ButtonVariant = "primary" | "secondary" | "outline" | "ghost";
+type ButtonSize = "small" | "medium" | "large";
 interface ButtonProps {
     title: string;
     onPress: (event: GestureResponderEvent) => void;
     disabled?: boolean;
+    /** Visual style preset. */
+    variant?: ButtonVariant;
+    /** Size preset. */
+    size?: ButtonSize;
     /** Additional container styles (works on web and native). */
     style?: StyleProp<ViewStyle>;
     /** Additional label styles (works on web and native). */
     textStyle?: StyleProp<TextStyle>;
     /**
-     * CSS class names for the container (web only — uses DOM `<button>` for Tailwind).
+     * CSS class names for the container (web: applied to the same DOM node as default styles).
      * On native: ignored unless using NativeWind with cssInterop.
      */
     className?: string;
     /**
-     * CSS class names for the label (web only).
+     * CSS class names for the label (web).
      * On native: ignored unless using NativeWind with cssInterop.
      */
     textClassName?: string;
 }
-declare function Button({ title, onPress, disabled, style, textStyle, className, textClassName, }: ButtonProps): React.JSX.Element;
+declare function Button({ title, onPress, disabled, variant, size, style, textStyle, className, textClassName, }: ButtonProps): react.JSX.Element;
 
-export { Button, type ButtonProps };
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant };

package/dist/index.d.ts

@@ -1,25 +1,31 @@
-import React from 'react';
+import * as react from 'react';
 import { GestureResponderEvent, StyleProp, ViewStyle, TextStyle } from 'react-native';
 
+type ButtonVariant = "primary" | "secondary" | "outline" | "ghost";
+type ButtonSize = "small" | "medium" | "large";
 interface ButtonProps {
     title: string;
     onPress: (event: GestureResponderEvent) => void;
     disabled?: boolean;
+    /** Visual style preset. */
+    variant?: ButtonVariant;
+    /** Size preset. */
+    size?: ButtonSize;
     /** Additional container styles (works on web and native). */
     style?: StyleProp<ViewStyle>;
     /** Additional label styles (works on web and native). */
     textStyle?: StyleProp<TextStyle>;
     /**
-     * CSS class names for the container (web only — uses DOM `<button>` for Tailwind).
+     * CSS class names for the container (web: applied to the same DOM node as default styles).
      * On native: ignored unless using NativeWind with cssInterop.
      */
     className?: string;
     /**
-     * CSS class names for the label (web only).
+     * CSS class names for the label (web).
      * On native: ignored unless using NativeWind with cssInterop.
      */
     textClassName?: string;
 }
-declare function Button({ title, onPress, disabled, style, textStyle, className, textClassName, }: ButtonProps): React.JSX.Element;
+declare function Button({ title, onPress, disabled, variant, size, style, textStyle, className, textClassName, }: ButtonProps): react.JSX.Element;
 
-export { Button, type ButtonProps };
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant };

package/dist/index.js

@@ -1,110 +1,178 @@
-import { createElement } from 'react';
-import { StyleSheet, Platform, TouchableOpacity, Text } from 'react-native';
+import { useRef, useLayoutEffect } from 'react';
+import { StyleSheet, TouchableOpacity, Text, Platform } from 'react-native';
 import { jsx } from 'react/jsx-runtime';
 
 // src/components/Button.tsx
-function rnStyleToWebStyle(style) {
-  const flat = StyleSheet.flatten(style);
-  if (!flat) return {};
-  const css = {};
-  for (const [key, value] of Object.entries(flat)) {
-    if (value === void 0 || value === null) continue;
-    switch (key) {
-      case "paddingVertical":
-        css.paddingTop = value;
-        css.paddingBottom = value;
-        break;
-      case "paddingHorizontal":
-        css.paddingLeft = value;
-        css.paddingRight = value;
-        break;
-      case "marginVertical":
-        css.marginTop = value;
-        css.marginBottom = value;
-        break;
-      case "marginHorizontal":
-        css.marginLeft = value;
-        css.marginRight = value;
-        break;
-      default:
-        css[key] = value;
-    }
-  }
-  if (css.alignItems || css.justifyContent || css.flexDirection) {
-    css.display = css.display ?? "flex";
+function hasClassList(node) {
+  return typeof node === "object" && node !== null && "classList" in node && typeof node.classList?.add === "function";
+}
+function resolveWebElement(ref) {
+  const node = ref.current;
+  if (!node) return null;
+  if (hasClassList(node)) return node;
+  const host = node;
+  if (hasClassList(host._touchableNode)) return host._touchableNode;
+  if (typeof host.getScrollableNode === "function") {
+    const scrollNode = host.getScrollableNode();
+    if (hasClassList(scrollNode)) return scrollNode;
   }
-  return css;
+  return null;
+}
+function useApplyWebClassName(ref, className) {
+  useLayoutEffect(() => {
+    if (Platform.OS !== "web" || !className?.trim()) return;
+    const element = resolveWebElement(ref);
+    if (!element) return;
+    const classes = className.trim().split(/\s+/);
+    element.classList.add(...classes);
+    return () => {
+      element.classList.remove(...classes);
+    };
+  }, [ref, className]);
 }
 function Button({
   title,
   onPress,
   disabled = false,
+  variant = "primary",
+  size = "medium",
   style,
   textStyle,
   className,
   textClassName
 }) {
-  const containerStyle = [styles.button, disabled && styles.buttonDisabled, style];
-  const labelStyle = [styles.text, disabled && styles.textDisabled, textStyle];
-  const useWebDom = Platform.OS === "web" && (className != null || textClassName != null);
-  if (useWebDom) {
-    return createElement(
-      "button",
-      {
-        type: "button",
-        className,
-        style: rnStyleToWebStyle(containerStyle),
-        disabled,
-        onClick: (event) => {
-          onPress(event);
-        },
-        "aria-disabled": disabled
-      },
-      createElement(
-        "span",
-        {
-          className: textClassName,
-          style: rnStyleToWebStyle(labelStyle)
-        },
-        title
-      )
-    );
-  }
+  const containerRef = useRef(null);
+  const textRef = useRef(null);
+  useApplyWebClassName(containerRef, className);
+  useApplyWebClassName(textRef, textClassName);
+  const containerStyle = [
+    styles.base,
+    variantStyles[variant],
+    sizeStyles[size],
+    disabled && disabledVariantStyles[variant],
+    style
+  ];
+  const labelStyle = [
+    textBaseStyles.base,
+    textVariantStyles[variant],
+    textSizeStyles[size],
+    disabled && textDisabledStyles[variant],
+    textStyle
+  ];
   return /* @__PURE__ */ jsx(
     TouchableOpacity,
     {
+      ref: containerRef,
       style: containerStyle,
       onPress,
       disabled,
       activeOpacity: 0.7,
       accessibilityRole: "button",
       accessibilityState: { disabled },
-      children: /* @__PURE__ */ jsx(Text, { style: labelStyle, children: title })
+      children: /* @__PURE__ */ jsx(Text, { ref: textRef, style: labelStyle, children: title })
     }
   );
 }
 var styles = StyleSheet.create({
-  button: {
-    backgroundColor: "#2563eb",
-    paddingVertical: 12,
-    paddingHorizontal: 24,
-    borderRadius: 8,
+  base: {
     alignItems: "center",
     justifyContent: "center",
-    minWidth: 120,
+    borderRadius: 8,
     borderWidth: 0
+  }
+});
+var variantStyles = StyleSheet.create({
+  primary: {
+    backgroundColor: "#2563eb"
+  },
+  secondary: {
+    backgroundColor: "#4b5563"
+  },
+  outline: {
+    backgroundColor: "transparent",
+    borderWidth: 1,
+    borderColor: "#2563eb"
+  },
+  ghost: {
+    backgroundColor: "transparent"
+  }
+});
+var sizeStyles = StyleSheet.create({
+  small: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    minWidth: 96
   },
-  buttonDisabled: {
+  medium: {
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    minWidth: 120
+  },
+  large: {
+    paddingVertical: 16,
+    paddingHorizontal: 32,
+    minWidth: 160
+  }
+});
+var disabledVariantStyles = StyleSheet.create({
+  primary: {
     backgroundColor: "#93c5fd",
     opacity: 0.7
   },
-  text: {
-    color: "#ffffff",
-    fontSize: 16,
+  secondary: {
+    backgroundColor: "#9ca3af",
+    opacity: 0.7
+  },
+  outline: {
+    borderColor: "#93c5fd",
+    opacity: 0.7
+  },
+  ghost: {
+    opacity: 0.5
+  }
+});
+var textBaseStyles = StyleSheet.create({
+  base: {
     fontWeight: "600"
+  }
+});
+var textVariantStyles = StyleSheet.create({
+  primary: {
+    color: "#ffffff"
+  },
+  secondary: {
+    color: "#ffffff"
   },
-  textDisabled: {
+  outline: {
+    color: "#2563eb"
+  },
+  ghost: {
+    color: "#2563eb"
+  }
+});
+var textSizeStyles = StyleSheet.create({
+  small: {
+    fontSize: 14
+  },
+  medium: {
+    fontSize: 16
+  },
+  large: {
+    fontSize: 18
+  }
+});
+var textDisabledStyles = StyleSheet.create({
+  primary: {
     color: "#e5e7eb"
+  },
+  secondary: {
+    color: "#f3f4f6"
+  },
+  outline: {
+    color: "#93c5fd"
+  },
+  ghost: {
+    color: "#93c5fd"
   }
 });
 

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/rnStyleToWebStyle.ts","../src/components/Button.tsx"],"names":["StyleSheet"],"mappings":"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","file":"index.js","sourcesContent":["import { StyleSheet, type StyleProp, type TextStyle, type ViewStyle } from \"react-native\";\nimport type { CSSProperties } from \"react\";\n\ntype RNStyle = StyleProp<ViewStyle> | StyleProp<TextStyle>;\n\n/**\n * Converts React Native StyleSheet values to CSS properties for DOM elements.\n * Required when rendering native HTML on web (browsers ignore paddingVertical, etc.).\n */\nexport function rnStyleToWebStyle(style: RNStyle): CSSProperties {\n  const flat = StyleSheet.flatten(style);\n  if (!flat) return {};\n\n  const css: Record<string, unknown> = {};\n\n  for (const [key, value] of Object.entries(flat)) {\n    if (value === undefined || value === null) continue;\n\n    switch (key) {\n      case \"paddingVertical\":\n        css.paddingTop = value;\n        css.paddingBottom = value;\n        break;\n      case \"paddingHorizontal\":\n        css.paddingLeft = value;\n        css.paddingRight = value;\n        break;\n      case \"marginVertical\":\n        css.marginTop = value;\n        css.marginBottom = value;\n        break;\n      case \"marginHorizontal\":\n        css.marginLeft = value;\n        css.marginRight = value;\n        break;\n      default:\n        css[key] = value;\n    }\n  }\n\n  if (css.alignItems || css.justifyContent || css.flexDirection) {\n    css.display = css.display ?? \"flex\";\n  }\n\n  return css as CSSProperties;\n}\n","import React, { createElement } from \"react\";\nimport {\n  Platform,\n  StyleSheet,\n  Text,\n  TouchableOpacity,\n  type GestureResponderEvent,\n  type StyleProp,\n  type TextStyle,\n  type ViewStyle,\n} from \"react-native\";\nimport { rnStyleToWebStyle } from \"../utils/rnStyleToWebStyle\";\n\nexport interface ButtonProps {\n  title: string;\n  onPress: (event: GestureResponderEvent) => void;\n  disabled?: boolean;\n  /** Additional container styles (works on web and native). */\n  style?: StyleProp<ViewStyle>;\n  /** Additional label styles (works on web and native). */\n  textStyle?: StyleProp<TextStyle>;\n  /**\n   * CSS class names for the container (web only — uses DOM `<button>` for Tailwind).\n   * On native: ignored unless using NativeWind with cssInterop.\n   */\n  className?: string;\n  /**\n   * CSS class names for the label (web only).\n   * On native: ignored unless using NativeWind with cssInterop.\n   */\n  textClassName?: string;\n}\n\nexport function Button({\n  title,\n  onPress,\n  disabled = false,\n  style,\n  textStyle,\n  className,\n  textClassName,\n}: ButtonProps) {\n  const containerStyle = [styles.button, disabled && styles.buttonDisabled, style];\n  const labelStyle = [styles.text, disabled && styles.textDisabled, textStyle];\n\n  const useWebDom =\n    Platform.OS === \"web\" && (className != null || textClassName != null);\n\n  if (useWebDom) {\n    return createElement(\n      \"button\",\n      {\n        type: \"button\",\n        className,\n        style: rnStyleToWebStyle(containerStyle),\n        disabled,\n        onClick: (event: React.MouseEvent<HTMLButtonElement>) => {\n          onPress(event as unknown as GestureResponderEvent);\n        },\n        \"aria-disabled\": disabled,\n      },\n      createElement(\n        \"span\",\n        {\n          className: textClassName,\n          style: rnStyleToWebStyle(labelStyle),\n        },\n        title,\n      ),\n    );\n  }\n\n  return (\n    <TouchableOpacity\n      style={containerStyle}\n      onPress={onPress}\n      disabled={disabled}\n      activeOpacity={0.7}\n      accessibilityRole=\"button\"\n      accessibilityState={{ disabled }}\n    >\n      <Text style={labelStyle}>{title}</Text>\n    </TouchableOpacity>\n  );\n}\n\nconst styles = StyleSheet.create({\n  button: {\n    backgroundColor: \"#2563eb\",\n    paddingVertical: 12,\n    paddingHorizontal: 24,\n    borderRadius: 8,\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    minWidth: 120,\n    borderWidth: 0,\n  },\n  buttonDisabled: {\n    backgroundColor: \"#93c5fd\",\n    opacity: 0.7,\n  },\n  text: {\n    color: \"#ffffff\",\n    fontSize: 16,\n    fontWeight: \"600\",\n  },\n  textDisabled: {\n    color: \"#e5e7eb\",\n  },\n});\n"]}
+{"version":3,"sources":["../src/utils/useApplyWebClassName.ts","../src/components/Button.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import { useLayoutEffect } from \"react\";\nimport { Platform } from \"react-native\";\n\ninterface ClassListElement {\n  classList: {\n    add: (...classes: string[]) => void;\n    remove: (...classes: string[]) => void;\n  };\n}\n\nfunction hasClassList(node: unknown): node is ClassListElement {\n  return (\n    typeof node === \"object\" &&\n    node !== null &&\n    \"classList\" in node &&\n    typeof (node as ClassListElement).classList?.add === \"function\"\n  );\n}\n\nfunction resolveWebElement(ref: React.RefObject<unknown>): ClassListElement | null {\n  const node = ref.current;\n  if (!node) return null;\n\n  if (hasClassList(node)) return node;\n\n  const host = node as {\n    _touchableNode?: unknown;\n    getScrollableNode?: () => unknown;\n  };\n\n  if (hasClassList(host._touchableNode)) return host._touchableNode;\n\n  if (typeof host.getScrollableNode === \"function\") {\n    const scrollNode = host.getScrollableNode();\n    if (hasClassList(scrollNode)) return scrollNode;\n  }\n\n  return null;\n}\n\n/**\n * Applies CSS class names to the underlying DOM node on web.\n * Keeps TouchableOpacity/Text as the render path so default RN styles stay intact.\n */\nexport function useApplyWebClassName(\n  ref: React.RefObject<unknown>,\n  className?: string,\n): void {\n  useLayoutEffect(() => {\n    if (Platform.OS !== \"web\" || !className?.trim()) return;\n\n    const element = resolveWebElement(ref);\n    if (!element) return;\n\n    const classes = className.trim().split(/\\s+/);\n    element.classList.add(...classes);\n\n    return () => {\n      element.classList.remove(...classes);\n    };\n  }, [ref, className]);\n}\n","import { useRef, type ComponentRef } from \"react\";\nimport {\n  StyleSheet,\n  Text,\n  TouchableOpacity,\n  type GestureResponderEvent,\n  type StyleProp,\n  type TextStyle,\n  type ViewStyle,\n} from \"react-native\";\nimport { useApplyWebClassName } from \"../utils/useApplyWebClassName\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"outline\" | \"ghost\";\nexport type ButtonSize = \"small\" | \"medium\" | \"large\";\n\nexport interface ButtonProps {\n  title: string;\n  onPress: (event: GestureResponderEvent) => void;\n  disabled?: boolean;\n  /** Visual style preset. */\n  variant?: ButtonVariant;\n  /** Size preset. */\n  size?: ButtonSize;\n  /** Additional container styles (works on web and native). */\n  style?: StyleProp<ViewStyle>;\n  /** Additional label styles (works on web and native). */\n  textStyle?: StyleProp<TextStyle>;\n  /**\n   * CSS class names for the container (web: applied to the same DOM node as default styles).\n   * On native: ignored unless using NativeWind with cssInterop.\n   */\n  className?: string;\n  /**\n   * CSS class names for the label (web).\n   * On native: ignored unless using NativeWind with cssInterop.\n   */\n  textClassName?: string;\n}\n\nexport function Button({\n  title,\n  onPress,\n  disabled = false,\n  variant = \"primary\",\n  size = \"medium\",\n  style,\n  textStyle,\n  className,\n  textClassName,\n}: ButtonProps) {\n  const containerRef = useRef<ComponentRef<typeof TouchableOpacity>>(null);\n  const textRef = useRef<ComponentRef<typeof Text>>(null);\n\n  useApplyWebClassName(containerRef, className);\n  useApplyWebClassName(textRef, textClassName);\n\n  const containerStyle = [\n    styles.base,\n    variantStyles[variant],\n    sizeStyles[size],\n    disabled && disabledVariantStyles[variant],\n    style,\n  ];\n\n  const labelStyle = [\n    textBaseStyles.base,\n    textVariantStyles[variant],\n    textSizeStyles[size],\n    disabled && textDisabledStyles[variant],\n    textStyle,\n  ];\n\n  return (\n    <TouchableOpacity\n      ref={containerRef}\n      style={containerStyle}\n      onPress={onPress}\n      disabled={disabled}\n      activeOpacity={0.7}\n      accessibilityRole=\"button\"\n      accessibilityState={{ disabled }}\n    >\n      <Text ref={textRef} style={labelStyle}>\n        {title}\n      </Text>\n    </TouchableOpacity>\n  );\n}\n\nconst styles = StyleSheet.create({\n  base: {\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    borderRadius: 8,\n    borderWidth: 0,\n  },\n});\n\nconst variantStyles = StyleSheet.create({\n  primary: {\n    backgroundColor: \"#2563eb\",\n  },\n  secondary: {\n    backgroundColor: \"#4b5563\",\n  },\n  outline: {\n    backgroundColor: \"transparent\",\n    borderWidth: 1,\n    borderColor: \"#2563eb\",\n  },\n  ghost: {\n    backgroundColor: \"transparent\",\n  },\n});\n\nconst sizeStyles = StyleSheet.create({\n  small: {\n    paddingVertical: 8,\n    paddingHorizontal: 16,\n    minWidth: 96,\n  },\n  medium: {\n    paddingVertical: 12,\n    paddingHorizontal: 24,\n    minWidth: 120,\n  },\n  large: {\n    paddingVertical: 16,\n    paddingHorizontal: 32,\n    minWidth: 160,\n  },\n});\n\nconst disabledVariantStyles = StyleSheet.create({\n  primary: {\n    backgroundColor: \"#93c5fd\",\n    opacity: 0.7,\n  },\n  secondary: {\n    backgroundColor: \"#9ca3af\",\n    opacity: 0.7,\n  },\n  outline: {\n    borderColor: \"#93c5fd\",\n    opacity: 0.7,\n  },\n  ghost: {\n    opacity: 0.5,\n  },\n});\n\nconst textBaseStyles = StyleSheet.create({\n  base: {\n    fontWeight: \"600\",\n  },\n});\n\nconst textVariantStyles = StyleSheet.create({\n  primary: {\n    color: \"#ffffff\",\n  },\n  secondary: {\n    color: \"#ffffff\",\n  },\n  outline: {\n    color: \"#2563eb\",\n  },\n  ghost: {\n    color: \"#2563eb\",\n  },\n});\n\nconst textSizeStyles = StyleSheet.create({\n  small: {\n    fontSize: 14,\n  },\n  medium: {\n    fontSize: 16,\n  },\n  large: {\n    fontSize: 18,\n  },\n});\n\nconst textDisabledStyles = StyleSheet.create({\n  primary: {\n    color: \"#e5e7eb\",\n  },\n  secondary: {\n    color: \"#f3f4f6\",\n  },\n  outline: {\n    color: \"#93c5fd\",\n  },\n  ghost: {\n    color: \"#93c5fd\",\n  },\n});\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scripso-homepad/ui",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "type": "module",
   "description": "Cross-platform UI components for Homepad (React Web + React Native)",
   "license": "MIT",

package/src/components/Button.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
+import { View, StyleSheet } from "react-native";
 import { Button } from "./Button";
 
 const meta = {
@@ -9,9 +10,19 @@ const meta = {
     title: "Press me",
     onPress: fn(),
     disabled: false,
+    variant: "primary",
+    size: "medium",
   },
   argTypes: {
     onPress: { action: "pressed" },
+    variant: {
+      control: "select",
+      options: ["primary", "secondary", "outline", "ghost"],
+    },
+    size: {
+      control: "select",
+      options: ["small", "medium", "large"],
+    },
   },
 } satisfies Meta<typeof Button>;
 
@@ -20,47 +31,91 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
+export const Primary: Story = {
+  args: { variant: "primary", title: "Primary" },
+};
+
+export const Secondary: Story = {
+  args: { variant: "secondary", title: "Secondary" },
+};
+
+export const Outline: Story = {
+  args: { variant: "outline", title: "Outline" },
+};
+
+export const Ghost: Story = {
+  args: { variant: "ghost", title: "Ghost" },
+};
+
+export const Small: Story = {
+  args: { size: "small", title: "Small" },
+};
+
+export const Large: Story = {
+  args: { size: "large", title: "Large" },
+};
+
 export const Disabled: Story = {
-  args: {
-    disabled: true,
-    title: "Disabled",
-  },
+  args: { disabled: true, title: "Disabled" },
 };
 
-export const LongLabel: Story = {
-  args: {
-    title: "Continue to next step",
-  },
+export const AllVariants: Story = {
+  render: () => (
+    <View style={storyStyles.column}>
+      <Button title="Primary" variant="primary" onPress={fn()} />
+      <Button title="Secondary" variant="secondary" onPress={fn()} />
+      <Button title="Outline" variant="outline" onPress={fn()} />
+      <Button title="Ghost" variant="ghost" onPress={fn()} />
+    </View>
+  ),
 };
 
-export const CustomStyle: Story = {
-  args: {
-    title: "Custom styles",
-    style: {
-      backgroundColor: "#dc2626",
-      borderRadius: 999,
-      paddingHorizontal: 32,
-    },
-    textStyle: {
-      fontSize: 14,
-      letterSpacing: 1,
-      textTransform: "uppercase",
-    },
-  },
+export const AllSizes: Story = {
+  render: () => (
+    <View style={storyStyles.column}>
+      <Button title="Small" size="small" onPress={fn()} />
+      <Button title="Medium" size="medium" onPress={fn()} />
+      <Button title="Large" size="large" onPress={fn()} />
+    </View>
+  ),
+};
+
+export const VariantMatrix: Story = {
+  render: () => (
+    <View style={storyStyles.grid}>
+      {(["primary", "secondary", "outline", "ghost"] as const).map((variant) => (
+        <View key={variant} style={storyStyles.column}>
+          {(["small", "medium", "large"] as const).map((size) => (
+            <Button
+              key={`${variant}-${size}`}
+              title={`${variant} ${size}`}
+              variant={variant}
+              size={size}
+              onPress={fn()}
+            />
+          ))}
+        </View>
+      ))}
+    </View>
+  ),
 };
 
 export const WithClassName: Story = {
   args: {
-    title: "Tailwind classes",
-    className: "rounded-full bg-violet-600 px-8 shadow-lg",
-    textClassName: "text-sm font-bold uppercase tracking-wide",
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Pass Tailwind utility classes via className. Requires Tailwind in your web app (or NativeWind on native).",
-      },
-    },
+    title: "Custom Tailwind",
+    className: "!bg-violet-600 shadow-lg",
+    textClassName: "uppercase tracking-wide",
   },
 };
+
+const storyStyles = StyleSheet.create({
+  column: {
+    gap: 12,
+    alignItems: "flex-start",
+  },
+  grid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 24,
+  },
+});

package/src/components/Button.tsx

@@ -1,6 +1,5 @@
-import React, { createElement } from "react";
+import { useRef, type ComponentRef } from "react";
 import {
-  Platform,
   StyleSheet,
   Text,
   TouchableOpacity,
@@ -9,23 +8,30 @@ import {
   type TextStyle,
   type ViewStyle,
 } from "react-native";
-import { rnStyleToWebStyle } from "../utils/rnStyleToWebStyle";
+import { useApplyWebClassName } from "../utils/useApplyWebClassName";
+
+export type ButtonVariant = "primary" | "secondary" | "outline" | "ghost";
+export type ButtonSize = "small" | "medium" | "large";
 
 export interface ButtonProps {
   title: string;
   onPress: (event: GestureResponderEvent) => void;
   disabled?: boolean;
+  /** Visual style preset. */
+  variant?: ButtonVariant;
+  /** Size preset. */
+  size?: ButtonSize;
   /** Additional container styles (works on web and native). */
   style?: StyleProp<ViewStyle>;
   /** Additional label styles (works on web and native). */
   textStyle?: StyleProp<TextStyle>;
   /**
-   * CSS class names for the container (web only — uses DOM `<button>` for Tailwind).
+   * CSS class names for the container (web: applied to the same DOM node as default styles).
    * On native: ignored unless using NativeWind with cssInterop.
    */
   className?: string;
   /**
-   * CSS class names for the label (web only).
+   * CSS class names for the label (web).
    * On native: ignored unless using NativeWind with cssInterop.
    */
   textClassName?: string;
@@ -35,43 +41,38 @@ export function Button({
   title,
   onPress,
   disabled = false,
+  variant = "primary",
+  size = "medium",
   style,
   textStyle,
   className,
   textClassName,
 }: ButtonProps) {
-  const containerStyle = [styles.button, disabled && styles.buttonDisabled, style];
-  const labelStyle = [styles.text, disabled && styles.textDisabled, textStyle];
+  const containerRef = useRef<ComponentRef<typeof TouchableOpacity>>(null);
+  const textRef = useRef<ComponentRef<typeof Text>>(null);
+
+  useApplyWebClassName(containerRef, className);
+  useApplyWebClassName(textRef, textClassName);
 
-  const useWebDom =
-    Platform.OS === "web" && (className != null || textClassName != null);
+  const containerStyle = [
+    styles.base,
+    variantStyles[variant],
+    sizeStyles[size],
+    disabled && disabledVariantStyles[variant],
+    style,
+  ];
 
-  if (useWebDom) {
-    return createElement(
-      "button",
-      {
-        type: "button",
-        className,
-        style: rnStyleToWebStyle(containerStyle),
-        disabled,
-        onClick: (event: React.MouseEvent<HTMLButtonElement>) => {
-          onPress(event as unknown as GestureResponderEvent);
-        },
-        "aria-disabled": disabled,
-      },
-      createElement(
-        "span",
-        {
-          className: textClassName,
-          style: rnStyleToWebStyle(labelStyle),
-        },
-        title,
-      ),
-    );
-  }
+  const labelStyle = [
+    textBaseStyles.base,
+    textVariantStyles[variant],
+    textSizeStyles[size],
+    disabled && textDisabledStyles[variant],
+    textStyle,
+  ];
 
   return (
     <TouchableOpacity
+      ref={containerRef}
       style={containerStyle}
       onPress={onPress}
       disabled={disabled}
@@ -79,32 +80,119 @@ export function Button({
       accessibilityRole="button"
       accessibilityState={{ disabled }}
     >
-      <Text style={labelStyle}>{title}</Text>
+      <Text ref={textRef} style={labelStyle}>
+        {title}
+      </Text>
     </TouchableOpacity>
   );
 }
 
 const styles = StyleSheet.create({
-  button: {
+  base: {
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 8,
+    borderWidth: 0,
+  },
+});
+
+const variantStyles = StyleSheet.create({
+  primary: {
     backgroundColor: "#2563eb",
+  },
+  secondary: {
+    backgroundColor: "#4b5563",
+  },
+  outline: {
+    backgroundColor: "transparent",
+    borderWidth: 1,
+    borderColor: "#2563eb",
+  },
+  ghost: {
+    backgroundColor: "transparent",
+  },
+});
+
+const sizeStyles = StyleSheet.create({
+  small: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    minWidth: 96,
+  },
+  medium: {
     paddingVertical: 12,
     paddingHorizontal: 24,
-    borderRadius: 8,
-    alignItems: "center",
-    justifyContent: "center",
     minWidth: 120,
-    borderWidth: 0,
   },
-  buttonDisabled: {
+  large: {
+    paddingVertical: 16,
+    paddingHorizontal: 32,
+    minWidth: 160,
+  },
+});
+
+const disabledVariantStyles = StyleSheet.create({
+  primary: {
     backgroundColor: "#93c5fd",
     opacity: 0.7,
   },
-  text: {
+  secondary: {
+    backgroundColor: "#9ca3af",
+    opacity: 0.7,
+  },
+  outline: {
+    borderColor: "#93c5fd",
+    opacity: 0.7,
+  },
+  ghost: {
+    opacity: 0.5,
+  },
+});
+
+const textBaseStyles = StyleSheet.create({
+  base: {
+    fontWeight: "600",
+  },
+});
+
+const textVariantStyles = StyleSheet.create({
+  primary: {
     color: "#ffffff",
+  },
+  secondary: {
+    color: "#ffffff",
+  },
+  outline: {
+    color: "#2563eb",
+  },
+  ghost: {
+    color: "#2563eb",
+  },
+});
+
+const textSizeStyles = StyleSheet.create({
+  small: {
+    fontSize: 14,
+  },
+  medium: {
     fontSize: 16,
-    fontWeight: "600",
   },
-  textDisabled: {
+  large: {
+    fontSize: 18,
+  },
+});
+
+const textDisabledStyles = StyleSheet.create({
+  primary: {
     color: "#e5e7eb",
   },
+  secondary: {
+    color: "#f3f4f6",
+  },
+  outline: {
+    color: "#93c5fd",
+  },
+  ghost: {
+    color: "#93c5fd",
+  },
 });

package/src/index.ts

@@ -1,2 +1,6 @@
 export { Button } from "./components/Button";
-export type { ButtonProps } from "./components/Button";
+export type {
+  ButtonProps,
+  ButtonSize,
+  ButtonVariant,
+} from "./components/Button";

package/src/utils/useApplyWebClassName.ts

@@ -0,0 +1,62 @@
+import { useLayoutEffect } from "react";
+import { Platform } from "react-native";
+
+interface ClassListElement {
+  classList: {
+    add: (...classes: string[]) => void;
+    remove: (...classes: string[]) => void;
+  };
+}
+
+function hasClassList(node: unknown): node is ClassListElement {
+  return (
+    typeof node === "object" &&
+    node !== null &&
+    "classList" in node &&
+    typeof (node as ClassListElement).classList?.add === "function"
+  );
+}
+
+function resolveWebElement(ref: React.RefObject<unknown>): ClassListElement | null {
+  const node = ref.current;
+  if (!node) return null;
+
+  if (hasClassList(node)) return node;
+
+  const host = node as {
+    _touchableNode?: unknown;
+    getScrollableNode?: () => unknown;
+  };
+
+  if (hasClassList(host._touchableNode)) return host._touchableNode;
+
+  if (typeof host.getScrollableNode === "function") {
+    const scrollNode = host.getScrollableNode();
+    if (hasClassList(scrollNode)) return scrollNode;
+  }
+
+  return null;
+}
+
+/**
+ * Applies CSS class names to the underlying DOM node on web.
+ * Keeps TouchableOpacity/Text as the render path so default RN styles stay intact.
+ */
+export function useApplyWebClassName(
+  ref: React.RefObject<unknown>,
+  className?: string,
+): void {
+  useLayoutEffect(() => {
+    if (Platform.OS !== "web" || !className?.trim()) return;
+
+    const element = resolveWebElement(ref);
+    if (!element) return;
+
+    const classes = className.trim().split(/\s+/);
+    element.classList.add(...classes);
+
+    return () => {
+      element.classList.remove(...classes);
+    };
+  }, [ref, className]);
+}

package/src/utils/rnStyleToWebStyle.ts

@@ -1,46 +0,0 @@
-import { StyleSheet, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
-import type { CSSProperties } from "react";
-
-type RNStyle = StyleProp<ViewStyle> | StyleProp<TextStyle>;
-
-/**
- * Converts React Native StyleSheet values to CSS properties for DOM elements.
- * Required when rendering native HTML on web (browsers ignore paddingVertical, etc.).
- */
-export function rnStyleToWebStyle(style: RNStyle): CSSProperties {
-  const flat = StyleSheet.flatten(style);
-  if (!flat) return {};
-
-  const css: Record<string, unknown> = {};
-
-  for (const [key, value] of Object.entries(flat)) {
-    if (value === undefined || value === null) continue;
-
-    switch (key) {
-      case "paddingVertical":
-        css.paddingTop = value;
-        css.paddingBottom = value;
-        break;
-      case "paddingHorizontal":
-        css.paddingLeft = value;
-        css.paddingRight = value;
-        break;
-      case "marginVertical":
-        css.marginTop = value;
-        css.marginBottom = value;
-        break;
-      case "marginHorizontal":
-        css.marginLeft = value;
-        css.marginRight = value;
-        break;
-      default:
-        css[key] = value;
-    }
-  }
-
-  if (css.alignItems || css.justifyContent || css.flexDirection) {
-    css.display = css.display ?? "flex";
-  }
-
-  return css as CSSProperties;
-}