@scripso-homepad/ui 0.3.3 → 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`)
 

package/dist/index.cjs

@@ -36,6 +36,8 @@ function Button({
   title,
   onPress,
   disabled = false,
+  variant = "primary",
+  size = "medium",
   style,
   textStyle,
   className,
@@ -45,8 +47,20 @@ function Button({
   const textRef = react.useRef(null);
   useApplyWebClassName(containerRef, className);
   useApplyWebClassName(textRef, textClassName);
-  const containerStyle = [styles.button, disabled && styles.buttonDisabled, style];
-  const labelStyle = [styles.text, disabled && styles.textDisabled, textStyle];
+  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,
     {
@@ -62,27 +76,105 @@ function Button({
   );
 }
 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
+  },
+  medium: {
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    minWidth: 120
   },
-  buttonDisabled: {
+  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/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 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: 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  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 = [styles.button, disabled && styles.buttonDisabled, style];\n  const labelStyle = [styles.text, disabled && styles.textDisabled, textStyle];\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  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,10 +1,16 @@
 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). */
@@ -20,6 +26,6 @@ interface ButtonProps {
      */
     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,10 +1,16 @@
 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). */
@@ -20,6 +26,6 @@ interface ButtonProps {
      */
     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

@@ -34,6 +34,8 @@ function Button({
   title,
   onPress,
   disabled = false,
+  variant = "primary",
+  size = "medium",
   style,
   textStyle,
   className,
@@ -43,8 +45,20 @@ function Button({
   const textRef = useRef(null);
   useApplyWebClassName(containerRef, className);
   useApplyWebClassName(textRef, textClassName);
-  const containerStyle = [styles.button, disabled && styles.buttonDisabled, style];
-  const labelStyle = [styles.text, disabled && styles.textDisabled, textStyle];
+  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,
     {
@@ -60,27 +74,105 @@ function Button({
   );
 }
 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
+  },
+  medium: {
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    minWidth: 120
   },
-  buttonDisabled: {
+  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/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 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: 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  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 = [styles.button, disabled && styles.buttonDisabled, style];\n  const labelStyle = [styles.text, disabled && styles.textDisabled, textStyle];\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  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.3",
+  "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

@@ -10,10 +10,17 @@ import {
 } from "react-native";
 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). */
@@ -34,6 +41,8 @@ export function Button({
   title,
   onPress,
   disabled = false,
+  variant = "primary",
+  size = "medium",
   style,
   textStyle,
   className,
@@ -45,8 +54,21 @@ export function Button({
   useApplyWebClassName(containerRef, className);
   useApplyWebClassName(textRef, textClassName);
 
-  const containerStyle = [styles.button, disabled && styles.buttonDisabled, style];
-  const labelStyle = [styles.text, disabled && styles.textDisabled, textStyle];
+  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 (
     <TouchableOpacity
@@ -66,26 +88,111 @@ export function Button({
 }
 
 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";