@scripso-homepad/ui 0.2.1 → 0.3.1

package/README.md

@@ -92,11 +92,41 @@ 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)
+
+On web, `className` is applied to real DOM elements (`<button>` / `<span>`), so Tailwind utilities work with Vite or Next.js:
+
+```tsx
+<Button
+  title="Save"
+  onPress={handleSave}
+  className="rounded-full bg-violet-600 px-8 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`.
 
 ## Development
 
@@ -125,7 +155,7 @@ npm run build-storybook
 
 ## Publishing
 
-See [PUBLISHING.md](./PUBLISHING.md) for release workflow details.
+Push to `main` — CI auto-bumps the patch version and publishes to npm. See [PUBLISHING.md](./PUBLISHING.md).
 
 ## Architecture
 

package/dist/index.cjs

@@ -1,20 +1,54 @@
 'use strict';
 
+var react = require('react');
 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 containerStyle = [styles.button, disabled && styles.buttonDisabled, style];
+  const labelStyle = [styles.text, disabled && styles.textDisabled, textStyle];
+  if (reactNative.Platform.OS === "web") {
+    return react.createElement(
+      "button",
+      {
+        type: "button",
+        className,
+        style: reactNative.StyleSheet.flatten(containerStyle),
+        disabled,
+        onClick: (event) => {
+          onPress(event);
+        },
+        "aria-disabled": disabled
+      },
+      react.createElement(
+        "span",
+        {
+          className: textClassName,
+          style: reactNative.StyleSheet.flatten(labelStyle)
+        },
+        title
+      )
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.TouchableOpacity,
     {
-      style: [styles.button, disabled && styles.buttonDisabled],
+      style: containerStyle,
       onPress,
       disabled,
       activeOpacity: 0.7,
       accessibilityRole: "button",
       accessibilityState: { disabled },
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.text, disabled && styles.textDisabled], children: title })
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: labelStyle, children: title })
     }
   );
 }
@@ -26,7 +60,8 @@ var styles = reactNative.StyleSheet.create({
     borderRadius: 8,
     alignItems: "center",
     justifyContent: "center",
-    minWidth: 120
+    minWidth: 120,
+    borderWidth: 0
   },
   buttonDisabled: {
     backgroundColor: "#93c5fd",

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":["Platform","createElement","StyleSheet","jsx","TouchableOpacity","Text"],"mappings":";;;;;;;AAkCO,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,iBAAiB,CAAC,MAAA,CAAO,QAAQ,QAAA,IAAY,MAAA,CAAO,gBAAgB,KAAK,CAAA;AAC/E,EAAA,MAAM,aAAa,CAAC,MAAA,CAAO,MAAM,QAAA,IAAY,MAAA,CAAO,cAAc,SAAS,CAAA;AAE3E,EAAA,IAAIA,oBAAA,CAAS,OAAO,KAAA,EAAO;AACzB,IAAA,OAAOC,mBAAA;AAAA,MACL,QAAA;AAAA,MACA;AAAA,QACE,IAAA,EAAM,QAAA;AAAA,QACN,SAAA;AAAA,QACA,KAAA,EAAOC,sBAAA,CAAW,OAAA,CAAQ,cAAc,CAAA;AAAA,QACxC,QAAA;AAAA,QACA,OAAA,EAAS,CAAC,KAAA,KAA+C;AACvD,UAAA,OAAA,CAAQ,KAAyC,CAAA;AAAA,QACnD,CAAA;AAAA,QACA,eAAA,EAAiB;AAAA,OACnB;AAAA,MACAD,mBAAA;AAAA,QACE,MAAA;AAAA,QACA;AAAA,UACE,SAAA,EAAW,aAAA;AAAA,UACX,KAAA,EAAOC,sBAAA,CAAW,OAAA,CAAQ,UAAU;AAAA,SACtC;AAAA,QACA;AAAA;AACF,KACF;AAAA,EACF;AAEA,EAAA,uBACEC,cAAA;AAAA,IAACC,4BAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,cAAA;AAAA,MACP,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,UAAA,EAAa,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA,GAClC;AAEJ;AAEA,IAAM,MAAA,GAASH,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,GAAA;AAAA,IACV,WAAA,EAAa;AAAA,GACf;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 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\";\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.\n   * On web: applied to the underlying `<button>` element (Tailwind works).\n   * On native: ignored unless using NativeWind with cssInterop.\n   */\n  className?: string;\n  /**\n   * CSS class names for the label.\n   * On web: applied to the underlying `<span>` element (Tailwind works).\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  if (Platform.OS === \"web\") {\n    return createElement(\n      \"button\",\n      {\n        type: \"button\",\n        className,\n        style: StyleSheet.flatten(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: StyleSheet.flatten(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"]}

package/dist/index.d.cts

@@ -1,11 +1,27 @@
-import * as react from 'react';
-import { GestureResponderEvent } from 'react-native';
+import React from 'react';
+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.
+     * On web: applied to the underlying `<button>` element (Tailwind works).
+     * On native: ignored unless using NativeWind with cssInterop.
+     */
+    className?: string;
+    /**
+     * CSS class names for the label.
+     * On web: applied to the underlying `<span>` element (Tailwind works).
+     * On native: ignored unless using NativeWind with cssInterop.
+     */
+    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,27 @@
-import * as react from 'react';
-import { GestureResponderEvent } from 'react-native';
+import React from 'react';
+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.
+     * On web: applied to the underlying `<button>` element (Tailwind works).
+     * On native: ignored unless using NativeWind with cssInterop.
+     */
+    className?: string;
+    /**
+     * CSS class names for the label.
+     * On web: applied to the underlying `<span>` element (Tailwind works).
+     * On native: ignored unless using NativeWind with cssInterop.
+     */
+    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

@@ -1,18 +1,52 @@
-import { StyleSheet, TouchableOpacity, Text } from 'react-native';
+import { createElement } from 'react';
+import { StyleSheet, Platform, 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 containerStyle = [styles.button, disabled && styles.buttonDisabled, style];
+  const labelStyle = [styles.text, disabled && styles.textDisabled, textStyle];
+  if (Platform.OS === "web") {
+    return createElement(
+      "button",
+      {
+        type: "button",
+        className,
+        style: StyleSheet.flatten(containerStyle),
+        disabled,
+        onClick: (event) => {
+          onPress(event);
+        },
+        "aria-disabled": disabled
+      },
+      createElement(
+        "span",
+        {
+          className: textClassName,
+          style: StyleSheet.flatten(labelStyle)
+        },
+        title
+      )
+    );
+  }
   return /* @__PURE__ */ jsx(
     TouchableOpacity,
     {
-      style: [styles.button, disabled && styles.buttonDisabled],
+      style: containerStyle,
       onPress,
       disabled,
       activeOpacity: 0.7,
       accessibilityRole: "button",
       accessibilityState: { disabled },
-      children: /* @__PURE__ */ jsx(Text, { style: [styles.text, disabled && styles.textDisabled], children: title })
+      children: /* @__PURE__ */ jsx(Text, { style: labelStyle, children: title })
     }
   );
 }
@@ -24,7 +58,8 @@ var styles = StyleSheet.create({
     borderRadius: 8,
     alignItems: "center",
     justifyContent: "center",
-    minWidth: 120
+    minWidth: 120,
+    borderWidth: 0
   },
   buttonDisabled: {
     backgroundColor: "#93c5fd",

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":";;;;;AAkCO,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,iBAAiB,CAAC,MAAA,CAAO,QAAQ,QAAA,IAAY,MAAA,CAAO,gBAAgB,KAAK,CAAA;AAC/E,EAAA,MAAM,aAAa,CAAC,MAAA,CAAO,MAAM,QAAA,IAAY,MAAA,CAAO,cAAc,SAAS,CAAA;AAE3E,EAAA,IAAI,QAAA,CAAS,OAAO,KAAA,EAAO;AACzB,IAAA,OAAO,aAAA;AAAA,MACL,QAAA;AAAA,MACA;AAAA,QACE,IAAA,EAAM,QAAA;AAAA,QACN,SAAA;AAAA,QACA,KAAA,EAAO,UAAA,CAAW,OAAA,CAAQ,cAAc,CAAA;AAAA,QACxC,QAAA;AAAA,QACA,OAAA,EAAS,CAAC,KAAA,KAA+C;AACvD,UAAA,OAAA,CAAQ,KAAyC,CAAA;AAAA,QACnD,CAAA;AAAA,QACA,eAAA,EAAiB;AAAA,OACnB;AAAA,MACA,aAAA;AAAA,QACE,MAAA;AAAA,QACA;AAAA,UACE,SAAA,EAAW,aAAA;AAAA,UACX,KAAA,EAAO,UAAA,CAAW,OAAA,CAAQ,UAAU;AAAA,SACtC;AAAA,QACA;AAAA;AACF,KACF;AAAA,EACF;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,cAAA;AAAA,MACP,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,UAAA,EAAa,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA,GAClC;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,GAAA;AAAA,IACV,WAAA,EAAa;AAAA,GACf;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 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\";\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.\n   * On web: applied to the underlying `<button>` element (Tailwind works).\n   * On native: ignored unless using NativeWind with cssInterop.\n   */\n  className?: string;\n  /**\n   * CSS class names for the label.\n   * On web: applied to the underlying `<span>` element (Tailwind works).\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  if (Platform.OS === \"web\") {\n    return createElement(\n      \"button\",\n      {\n        type: \"button\",\n        className,\n        style: StyleSheet.flatten(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: StyleSheet.flatten(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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scripso-homepad/ui",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "type": "module",
   "description": "Cross-platform UI components for Homepad (React Web + React Native)",
   "license": "MIT",
@@ -35,18 +35,13 @@
     "clean": "rm -rf dist",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "prepublishOnly": "npm run build",
-    "changeset": "changeset",
-    "version-packages": "changeset version",
-    "release": "npm run build && changeset publish"
+    "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-native": ">=0.74"
   },
   "devDependencies": {
-    "@changesets/changelog-github": "^0.5.0",
-    "@changesets/cli": "^2.27.10",
     "@eslint/js": "^9.17.0",
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/addon-interactions": "^8.4.7",

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

@@ -1,27 +1,83 @@
+import React, { createElement } from "react";
 import {
+  Platform,
   StyleSheet,
   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.
+   * On web: applied to the underlying `<button>` element (Tailwind works).
+   * On native: ignored unless using NativeWind with cssInterop.
+   */
+  className?: string;
+  /**
+   * CSS class names for the label.
+   * On web: applied to the underlying `<span>` element (Tailwind works).
+   * On native: ignored unless using NativeWind with cssInterop.
+   */
+  textClassName?: string;
 }
 
-export function Button({ title, onPress, disabled = false }: ButtonProps) {
+export function Button({
+  title,
+  onPress,
+  disabled = false,
+  style,
+  textStyle,
+  className,
+  textClassName,
+}: ButtonProps) {
+  const containerStyle = [styles.button, disabled && styles.buttonDisabled, style];
+  const labelStyle = [styles.text, disabled && styles.textDisabled, textStyle];
+
+  if (Platform.OS === "web") {
+    return createElement(
+      "button",
+      {
+        type: "button",
+        className,
+        style: StyleSheet.flatten(containerStyle),
+        disabled,
+        onClick: (event: React.MouseEvent<HTMLButtonElement>) => {
+          onPress(event as unknown as GestureResponderEvent);
+        },
+        "aria-disabled": disabled,
+      },
+      createElement(
+        "span",
+        {
+          className: textClassName,
+          style: StyleSheet.flatten(labelStyle),
+        },
+        title,
+      ),
+    );
+  }
+
   return (
     <TouchableOpacity
-      style={[styles.button, disabled && styles.buttonDisabled]}
+      style={containerStyle}
       onPress={onPress}
       disabled={disabled}
       activeOpacity={0.7}
       accessibilityRole="button"
       accessibilityState={{ disabled }}
     >
-      <Text style={[styles.text, disabled && styles.textDisabled]}>{title}</Text>
+      <Text style={labelStyle}>{title}</Text>
     </TouchableOpacity>
   );
 }
@@ -35,6 +91,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     minWidth: 120,
+    borderWidth: 0,
   },
   buttonDisabled: {
     backgroundColor: "#93c5fd",