@scripso-homepad/ui 0.2.0 → 0.3.0

package/README.md

@@ -8,14 +8,48 @@ Cross-platform UI component library for Homepad. Components use React Native pri
 npm install @scripso-homepad/ui react react-native
 ```
 
-### React Web (Next.js)
+### React Web
 
-Also install `react-native-web` and alias `react-native` → `react-native-web` in your bundler:
+Also install `react-native-web`:
 
 ```bash
 npm install react-native-web
 ```
 
+Alias `react-native` → `react-native-web` in your bundler.
+
+#### Vite (React)
+
+```ts
+// vite.config.ts
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "react-native": "react-native-web",
+    },
+    extensions: [
+      ".web.tsx",
+      ".web.ts",
+      ".web.jsx",
+      ".web.js",
+      ".tsx",
+      ".ts",
+      ".jsx",
+      ".js",
+    ],
+  },
+  optimizeDeps: {
+    include: ["react-native-web", "@scripso-homepad/ui"],
+  },
+});
+```
+
+#### Next.js
+
 ```js
 // next.config.js
 module.exports = {
@@ -58,11 +92,39 @@ 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 |
+| 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)        |
+
+#### Custom styles (React Native `style`)
+
+```tsx
+<Button
+  title="Save"
+  onPress={handleSave}
+  style={{ backgroundColor: "#dc2626", borderRadius: 999 }}
+  textStyle={{ fontSize: 14, textTransform: "uppercase" }}
+/>
+```
+
+#### Tailwind classes (React web)
+
+```tsx
+<Button
+  title="Save"
+  onPress={handleSave}
+  className="rounded-full bg-violet-600 px-8 shadow-lg"
+  textClassName="text-sm font-bold uppercase"
+/>
+```
+
+Default package styles are merged with your `style` / `className` values.
 
 ## Development
 

package/dist/index.cjs

@@ -4,17 +4,35 @@ var reactNative = require('react-native');
 var jsxRuntime = require('react/jsx-runtime');
 
 // src/components/Button.tsx
-function Button({ title, onPress, disabled = false }) {
+function Button({
+  title,
+  onPress,
+  disabled = false,
+  style,
+  textStyle,
+  className,
+  textClassName
+}) {
+  const containerWebProps = className != null ? { className } : {};
+  const textWebProps = textClassName != null ? { className: textClassName } : {};
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.TouchableOpacity,
     {
-      style: [styles.button, disabled && styles.buttonDisabled],
+      style: [styles.button, disabled && styles.buttonDisabled, style],
       onPress,
       disabled,
       activeOpacity: 0.7,
       accessibilityRole: "button",
       accessibilityState: { disabled },
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.text, disabled && styles.textDisabled], children: title })
+      ...containerWebProps,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          style: [styles.text, disabled && styles.textDisabled, textStyle],
+          ...textWebProps,
+          children: title
+        }
+      )
     }
   );
 }

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Button.tsx"],"names":["jsx","TouchableOpacity","Text","StyleSheet"],"mappings":";;;;;;AAaO,SAAS,OAAO,EAAE,KAAA,EAAO,OAAA,EAAS,QAAA,GAAW,OAAM,EAAgB;AACxE,EAAA,uBACEA,cAAA;AAAA,IAACC,4BAAA;AAAA,IAAA;AAAA,MACC,OAAO,CAAC,MAAA,CAAO,MAAA,EAAQ,QAAA,IAAY,OAAO,cAAc,CAAA;AAAA,MACxD,OAAA;AAAA,MACA,QAAA;AAAA,MACA,aAAA,EAAe,GAAA;AAAA,MACf,iBAAA,EAAkB,QAAA;AAAA,MAClB,kBAAA,EAAoB,EAAE,QAAA,EAAS;AAAA,MAE/B,QAAA,kBAAAD,cAAA,CAACE,gBAAA,EAAA,EAAK,KAAA,EAAO,CAAC,MAAA,CAAO,MAAM,QAAA,IAAY,MAAA,CAAO,YAAY,CAAA,EAAI,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA,GACtE;AAEJ;AAEA,IAAM,MAAA,GAASC,uBAAW,MAAA,CAAO;AAAA,EAC/B,MAAA,EAAQ;AAAA,IACN,eAAA,EAAiB,SAAA;AAAA,IACjB,eAAA,EAAiB,EAAA;AAAA,IACjB,iBAAA,EAAmB,EAAA;AAAA,IACnB,YAAA,EAAc,CAAA;AAAA,IACd,UAAA,EAAY,QAAA;AAAA,IACZ,cAAA,EAAgB,QAAA;AAAA,IAChB,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,eAAA,EAAiB,SAAA;AAAA,IACjB,OAAA,EAAS;AAAA,GACX;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,KAAA,EAAO,SAAA;AAAA,IACP,QAAA,EAAU,EAAA;AAAA,IACV,UAAA,EAAY;AAAA,GACd;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,KAAA,EAAO;AAAA;AAEX,CAAC,CAAA","file":"index.cjs","sourcesContent":["import {\n  StyleSheet,\n  Text,\n  TouchableOpacity,\n  type GestureResponderEvent,\n} from \"react-native\";\n\nexport interface ButtonProps {\n  title: string;\n  onPress: (event: GestureResponderEvent) => void;\n  disabled?: boolean;\n}\n\nexport function Button({ title, onPress, disabled = false }: ButtonProps) {\n  return (\n    <TouchableOpacity\n      style={[styles.button, disabled && styles.buttonDisabled]}\n      onPress={onPress}\n      disabled={disabled}\n      activeOpacity={0.7}\n      accessibilityRole=\"button\"\n      accessibilityState={{ disabled }}\n    >\n      <Text style={[styles.text, disabled && styles.textDisabled]}>{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  },\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/components/Button.tsx"],"names":["jsx","TouchableOpacity","Text","StyleSheet"],"mappings":";;;;;;AA2BO,SAAS,MAAA,CAAO;AAAA,EACrB,KAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,KAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAgB;AACd,EAAA,MAAM,oBACJ,SAAA,IAAa,IAAA,GAAQ,EAAE,SAAA,KAA0C,EAAC;AACpE,EAAA,MAAM,eACJ,aAAA,IAAiB,IAAA,GAAQ,EAAE,SAAA,EAAW,aAAA,KAA8C,EAAC;AAEvF,EAAA,uBACEA,cAAA;AAAA,IAACC,4BAAA;AAAA,IAAA;AAAA,MACC,OAAO,CAAC,MAAA,CAAO,QAAQ,QAAA,IAAY,MAAA,CAAO,gBAAgB,KAAK,CAAA;AAAA,MAC/D,OAAA;AAAA,MACA,QAAA;AAAA,MACA,aAAA,EAAe,GAAA;AAAA,MACf,iBAAA,EAAkB,QAAA;AAAA,MAClB,kBAAA,EAAoB,EAAE,QAAA,EAAS;AAAA,MAC9B,GAAG,iBAAA;AAAA,MAEJ,QAAA,kBAAAD,cAAA;AAAA,QAACE,gBAAA;AAAA,QAAA;AAAA,UACC,OAAO,CAAC,MAAA,CAAO,MAAM,QAAA,IAAY,MAAA,CAAO,cAAc,SAAS,CAAA;AAAA,UAC9D,GAAG,YAAA;AAAA,UAEH,QAAA,EAAA;AAAA;AAAA;AACH;AAAA,GACF;AAEJ;AAEA,IAAM,MAAA,GAASC,uBAAW,MAAA,CAAO;AAAA,EAC/B,MAAA,EAAQ;AAAA,IACN,eAAA,EAAiB,SAAA;AAAA,IACjB,eAAA,EAAiB,EAAA;AAAA,IACjB,iBAAA,EAAmB,EAAA;AAAA,IACnB,YAAA,EAAc,CAAA;AAAA,IACd,UAAA,EAAY,QAAA;AAAA,IACZ,cAAA,EAAgB,QAAA;AAAA,IAChB,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,eAAA,EAAiB,SAAA;AAAA,IACjB,OAAA,EAAS;AAAA,GACX;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,KAAA,EAAO,SAAA;AAAA,IACP,QAAA,EAAU,EAAA;AAAA,IACV,UAAA,EAAY;AAAA,GACd;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,KAAA,EAAO;AAAA;AAEX,CAAC,CAAA","file":"index.cjs","sourcesContent":["import {\n  StyleSheet,\n  Text,\n  TouchableOpacity,\n  type GestureResponderEvent,\n  type StyleProp,\n  type TextStyle,\n  type ViewStyle,\n} from \"react-native\";\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 via react-native-web, or native with NativeWind).\n   * Merged with default styles — use Tailwind utilities in React web apps.\n   */\n  className?: string;\n  /** CSS class names for the label (web via react-native-web, or native with NativeWind). */\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 containerWebProps =\n    className != null ? ({ className } as Record<string, unknown>) : {};\n  const textWebProps =\n    textClassName != null ? ({ className: textClassName } as Record<string, unknown>) : {};\n\n  return (\n    <TouchableOpacity\n      style={[styles.button, disabled && styles.buttonDisabled, style]}\n      onPress={onPress}\n      disabled={disabled}\n      activeOpacity={0.7}\n      accessibilityRole=\"button\"\n      accessibilityState={{ disabled }}\n      {...containerWebProps}\n    >\n      <Text\n        style={[styles.text, disabled && styles.textDisabled, textStyle]}\n        {...textWebProps}\n      >\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  },\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"]}

package/dist/index.d.cts

@@ -1,11 +1,22 @@
 import * as react from 'react';
-import { GestureResponderEvent } from 'react-native';
+import { GestureResponderEvent, StyleProp, ViewStyle, TextStyle } from 'react-native';
 
 interface ButtonProps {
     title: string;
     onPress: (event: GestureResponderEvent) => void;
     disabled?: boolean;
+    /** 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 via react-native-web, or native with NativeWind).
+     * Merged with default styles — use Tailwind utilities in React web apps.
+     */
+    className?: string;
+    /** CSS class names for the label (web via react-native-web, or native with NativeWind). */
+    textClassName?: string;
 }
-declare function Button({ title, onPress, disabled }: ButtonProps): react.JSX.Element;
+declare function Button({ title, onPress, disabled, style, textStyle, className, textClassName, }: ButtonProps): react.JSX.Element;
 
 export { Button, type ButtonProps };

package/dist/index.d.ts

@@ -1,11 +1,22 @@
 import * as react from 'react';
-import { GestureResponderEvent } from 'react-native';
+import { GestureResponderEvent, StyleProp, ViewStyle, TextStyle } from 'react-native';
 
 interface ButtonProps {
     title: string;
     onPress: (event: GestureResponderEvent) => void;
     disabled?: boolean;
+    /** 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 via react-native-web, or native with NativeWind).
+     * Merged with default styles — use Tailwind utilities in React web apps.
+     */
+    className?: string;
+    /** CSS class names for the label (web via react-native-web, or native with NativeWind). */
+    textClassName?: string;
 }
-declare function Button({ title, onPress, disabled }: ButtonProps): react.JSX.Element;
+declare function Button({ title, onPress, disabled, style, textStyle, className, textClassName, }: ButtonProps): react.JSX.Element;
 
 export { Button, type ButtonProps };

package/dist/index.js

@@ -2,17 +2,35 @@ import { StyleSheet, TouchableOpacity, Text } from 'react-native';
 import { jsx } from 'react/jsx-runtime';
 
 // src/components/Button.tsx
-function Button({ title, onPress, disabled = false }) {
+function Button({
+  title,
+  onPress,
+  disabled = false,
+  style,
+  textStyle,
+  className,
+  textClassName
+}) {
+  const containerWebProps = className != null ? { className } : {};
+  const textWebProps = textClassName != null ? { className: textClassName } : {};
   return /* @__PURE__ */ jsx(
     TouchableOpacity,
     {
-      style: [styles.button, disabled && styles.buttonDisabled],
+      style: [styles.button, disabled && styles.buttonDisabled, style],
       onPress,
       disabled,
       activeOpacity: 0.7,
       accessibilityRole: "button",
       accessibilityState: { disabled },
-      children: /* @__PURE__ */ jsx(Text, { style: [styles.text, disabled && styles.textDisabled], children: title })
+      ...containerWebProps,
+      children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: [styles.text, disabled && styles.textDisabled, textStyle],
+          ...textWebProps,
+          children: title
+        }
+      )
     }
   );
 }

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Button.tsx"],"names":[],"mappings":";;;;AAaO,SAAS,OAAO,EAAE,KAAA,EAAO,OAAA,EAAS,QAAA,GAAW,OAAM,EAAgB;AACxE,EAAA,uBACE,GAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,OAAO,CAAC,MAAA,CAAO,MAAA,EAAQ,QAAA,IAAY,OAAO,cAAc,CAAA;AAAA,MACxD,OAAA;AAAA,MACA,QAAA;AAAA,MACA,aAAA,EAAe,GAAA;AAAA,MACf,iBAAA,EAAkB,QAAA;AAAA,MAClB,kBAAA,EAAoB,EAAE,QAAA,EAAS;AAAA,MAE/B,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,KAAA,EAAO,CAAC,MAAA,CAAO,MAAM,QAAA,IAAY,MAAA,CAAO,YAAY,CAAA,EAAI,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA,GACtE;AAEJ;AAEA,IAAM,MAAA,GAAS,WAAW,MAAA,CAAO;AAAA,EAC/B,MAAA,EAAQ;AAAA,IACN,eAAA,EAAiB,SAAA;AAAA,IACjB,eAAA,EAAiB,EAAA;AAAA,IACjB,iBAAA,EAAmB,EAAA;AAAA,IACnB,YAAA,EAAc,CAAA;AAAA,IACd,UAAA,EAAY,QAAA;AAAA,IACZ,cAAA,EAAgB,QAAA;AAAA,IAChB,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,eAAA,EAAiB,SAAA;AAAA,IACjB,OAAA,EAAS;AAAA,GACX;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,KAAA,EAAO,SAAA;AAAA,IACP,QAAA,EAAU,EAAA;AAAA,IACV,UAAA,EAAY;AAAA,GACd;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,KAAA,EAAO;AAAA;AAEX,CAAC,CAAA","file":"index.js","sourcesContent":["import {\n  StyleSheet,\n  Text,\n  TouchableOpacity,\n  type GestureResponderEvent,\n} from \"react-native\";\n\nexport interface ButtonProps {\n  title: string;\n  onPress: (event: GestureResponderEvent) => void;\n  disabled?: boolean;\n}\n\nexport function Button({ title, onPress, disabled = false }: ButtonProps) {\n  return (\n    <TouchableOpacity\n      style={[styles.button, disabled && styles.buttonDisabled]}\n      onPress={onPress}\n      disabled={disabled}\n      activeOpacity={0.7}\n      accessibilityRole=\"button\"\n      accessibilityState={{ disabled }}\n    >\n      <Text style={[styles.text, disabled && styles.textDisabled]}>{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  },\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/components/Button.tsx"],"names":[],"mappings":";;;;AA2BO,SAAS,MAAA,CAAO;AAAA,EACrB,KAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,KAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAgB;AACd,EAAA,MAAM,oBACJ,SAAA,IAAa,IAAA,GAAQ,EAAE,SAAA,KAA0C,EAAC;AACpE,EAAA,MAAM,eACJ,aAAA,IAAiB,IAAA,GAAQ,EAAE,SAAA,EAAW,aAAA,KAA8C,EAAC;AAEvF,EAAA,uBACE,GAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,OAAO,CAAC,MAAA,CAAO,QAAQ,QAAA,IAAY,MAAA,CAAO,gBAAgB,KAAK,CAAA;AAAA,MAC/D,OAAA;AAAA,MACA,QAAA;AAAA,MACA,aAAA,EAAe,GAAA;AAAA,MACf,iBAAA,EAAkB,QAAA;AAAA,MAClB,kBAAA,EAAoB,EAAE,QAAA,EAAS;AAAA,MAC9B,GAAG,iBAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,OAAO,CAAC,MAAA,CAAO,MAAM,QAAA,IAAY,MAAA,CAAO,cAAc,SAAS,CAAA;AAAA,UAC9D,GAAG,YAAA;AAAA,UAEH,QAAA,EAAA;AAAA;AAAA;AACH;AAAA,GACF;AAEJ;AAEA,IAAM,MAAA,GAAS,WAAW,MAAA,CAAO;AAAA,EAC/B,MAAA,EAAQ;AAAA,IACN,eAAA,EAAiB,SAAA;AAAA,IACjB,eAAA,EAAiB,EAAA;AAAA,IACjB,iBAAA,EAAmB,EAAA;AAAA,IACnB,YAAA,EAAc,CAAA;AAAA,IACd,UAAA,EAAY,QAAA;AAAA,IACZ,cAAA,EAAgB,QAAA;AAAA,IAChB,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,eAAA,EAAiB,SAAA;AAAA,IACjB,OAAA,EAAS;AAAA,GACX;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,KAAA,EAAO,SAAA;AAAA,IACP,QAAA,EAAU,EAAA;AAAA,IACV,UAAA,EAAY;AAAA,GACd;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,KAAA,EAAO;AAAA;AAEX,CAAC,CAAA","file":"index.js","sourcesContent":["import {\n  StyleSheet,\n  Text,\n  TouchableOpacity,\n  type GestureResponderEvent,\n  type StyleProp,\n  type TextStyle,\n  type ViewStyle,\n} from \"react-native\";\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 via react-native-web, or native with NativeWind).\n   * Merged with default styles — use Tailwind utilities in React web apps.\n   */\n  className?: string;\n  /** CSS class names for the label (web via react-native-web, or native with NativeWind). */\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 containerWebProps =\n    className != null ? ({ className } as Record<string, unknown>) : {};\n  const textWebProps =\n    textClassName != null ? ({ className: textClassName } as Record<string, unknown>) : {};\n\n  return (\n    <TouchableOpacity\n      style={[styles.button, disabled && styles.buttonDisabled, style]}\n      onPress={onPress}\n      disabled={disabled}\n      activeOpacity={0.7}\n      accessibilityRole=\"button\"\n      accessibilityState={{ disabled }}\n      {...containerWebProps}\n    >\n      <Text\n        style={[styles.text, disabled && styles.textDisabled, textStyle]}\n        {...textWebProps}\n      >\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  },\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"]}

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@scripso-homepad/ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "description": "Cross-platform UI components for Homepad (React Web + React Native)",
   "license": "MIT",
   "author": "Homepad",
   "repository": {
     "type": "git",
-    "url": "https://github.com/Home-Pad/homepad-ui.git"
+    "url": "git+https://github.com/Home-Pad/homepad-ui.git"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Button.stories.tsx

@@ -32,3 +32,35 @@ export const LongLabel: Story = {
     title: "Continue to next step",
   },
 };
+
+export const CustomStyle: Story = {
+  args: {
+    title: "Custom styles",
+    style: {
+      backgroundColor: "#dc2626",
+      borderRadius: 999,
+      paddingHorizontal: 32,
+    },
+    textStyle: {
+      fontSize: 14,
+      letterSpacing: 1,
+      textTransform: "uppercase",
+    },
+  },
+};
+
+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).",
+      },
+    },
+  },
+};

package/src/components/Button.tsx

@@ -3,25 +3,58 @@ import {
   Text,
   TouchableOpacity,
   type GestureResponderEvent,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
 } from "react-native";
 
 export interface ButtonProps {
   title: string;
   onPress: (event: GestureResponderEvent) => void;
   disabled?: boolean;
+  /** 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 via react-native-web, or native with NativeWind).
+   * Merged with default styles — use Tailwind utilities in React web apps.
+   */
+  className?: string;
+  /** CSS class names for the label (web via react-native-web, or native with NativeWind). */
+  textClassName?: string;
 }
 
-export function Button({ title, onPress, disabled = false }: ButtonProps) {
+export function Button({
+  title,
+  onPress,
+  disabled = false,
+  style,
+  textStyle,
+  className,
+  textClassName,
+}: ButtonProps) {
+  const containerWebProps =
+    className != null ? ({ className } as Record<string, unknown>) : {};
+  const textWebProps =
+    textClassName != null ? ({ className: textClassName } as Record<string, unknown>) : {};
+
   return (
     <TouchableOpacity
-      style={[styles.button, disabled && styles.buttonDisabled]}
+      style={[styles.button, disabled && styles.buttonDisabled, style]}
       onPress={onPress}
       disabled={disabled}
       activeOpacity={0.7}
       accessibilityRole="button"
       accessibilityState={{ disabled }}
+      {...containerWebProps}
     >
-      <Text style={[styles.text, disabled && styles.textDisabled]}>{title}</Text>
+      <Text
+        style={[styles.text, disabled && styles.textDisabled, textStyle]}
+        {...textWebProps}
+      >
+        {title}
+      </Text>
     </TouchableOpacity>
   );
 }