@scripso-homepad/ui 0.3.0 → 0.3.1

package/README.md

@@ -115,6 +115,8 @@ 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:
+
 ```tsx
 <Button
   title="Save"
@@ -124,7 +126,7 @@ export function Example() {
 />
 ```
 
-Default package styles are merged with your `style` / `className` values.
+> **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
 
@@ -153,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,5 +1,6 @@
 'use strict';
 
+var react = require('react');
 var reactNative = require('react-native');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -13,26 +14,41 @@ function Button({
   className,
   textClassName
 }) {
-  const containerWebProps = className != null ? { className } : {};
-  const textWebProps = textClassName != null ? { 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],
+      style: containerStyle,
       onPress,
       disabled,
       activeOpacity: 0.7,
       accessibilityRole: "button",
       accessibilityState: { disabled },
-      ...containerWebProps,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        reactNative.Text,
-        {
-          style: [styles.text, disabled && styles.textDisabled, textStyle],
-          ...textWebProps,
-          children: title
-        }
-      )
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: labelStyle, children: title })
     }
   );
 }
@@ -44,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":";;;;;;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"]}
+{"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,4 +1,4 @@
-import * as react from 'react';
+import React from 'react';
 import { GestureResponderEvent, StyleProp, ViewStyle, TextStyle } from 'react-native';
 
 interface ButtonProps {
@@ -10,13 +10,18 @@ interface ButtonProps {
     /** 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.
+     * 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 (web via react-native-web, or native with NativeWind). */
+    /**
+     * 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, style, textStyle, className, textClassName, }: 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,4 +1,4 @@
-import * as react from 'react';
+import React from 'react';
 import { GestureResponderEvent, StyleProp, ViewStyle, TextStyle } from 'react-native';
 
 interface ButtonProps {
@@ -10,13 +10,18 @@ interface ButtonProps {
     /** 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.
+     * 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 (web via react-native-web, or native with NativeWind). */
+    /**
+     * 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, style, textStyle, className, textClassName, }: 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,4 +1,5 @@
-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
@@ -11,26 +12,41 @@ function Button({
   className,
   textClassName
 }) {
-  const containerWebProps = className != null ? { className } : {};
-  const textWebProps = textClassName != null ? { 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],
+      style: containerStyle,
       onPress,
       disabled,
       activeOpacity: 0.7,
       accessibilityRole: "button",
       accessibilityState: { disabled },
-      ...containerWebProps,
-      children: /* @__PURE__ */ jsx(
-        Text,
-        {
-          style: [styles.text, disabled && styles.textDisabled, textStyle],
-          ...textWebProps,
-          children: title
-        }
-      )
+      children: /* @__PURE__ */ jsx(Text, { style: labelStyle, children: title })
     }
   );
 }
@@ -42,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":";;;;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"]}
+{"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.3.0",
+  "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.tsx

@@ -1,4 +1,6 @@
+import React, { createElement } from "react";
 import {
+  Platform,
   StyleSheet,
   Text,
   TouchableOpacity,
@@ -17,11 +19,16 @@ export interface ButtonProps {
   /** 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.
+   * 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 (web via react-native-web, or native with NativeWind). */
+  /**
+   * 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;
 }
 
@@ -34,27 +41,43 @@ export function Button({
   className,
   textClassName,
 }: ButtonProps) {
-  const containerWebProps =
-    className != null ? ({ className } as Record<string, unknown>) : {};
-  const textWebProps =
-    textClassName != null ? ({ className: textClassName } as Record<string, unknown>) : {};
+  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]}
+      style={containerStyle}
       onPress={onPress}
       disabled={disabled}
       activeOpacity={0.7}
       accessibilityRole="button"
       accessibilityState={{ disabled }}
-      {...containerWebProps}
     >
-      <Text
-        style={[styles.text, disabled && styles.textDisabled, textStyle]}
-        {...textWebProps}
-      >
-        {title}
-      </Text>
+      <Text style={labelStyle}>{title}</Text>
     </TouchableOpacity>
   );
 }
@@ -68,6 +91,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     minWidth: 120,
+    borderWidth: 0,
   },
   buttonDisabled: {
     backgroundColor: "#93c5fd",