@scripso-homepad/ui 0.3.0 → 0.3.2

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,9 +1,42 @@
 'use strict';
 
+var react = require('react');
 var reactNative = require('react-native');
 var jsxRuntime = require('react/jsx-runtime');
 
 // src/components/Button.tsx
+function rnStyleToWebStyle(style) {
+  const flat = reactNative.StyleSheet.flatten(style);
+  if (!flat) return {};
+  const css = {};
+  for (const [key, value] of Object.entries(flat)) {
+    if (value === void 0 || value === null) continue;
+    switch (key) {
+      case "paddingVertical":
+        css.paddingTop = value;
+        css.paddingBottom = value;
+        break;
+      case "paddingHorizontal":
+        css.paddingLeft = value;
+        css.paddingRight = value;
+        break;
+      case "marginVertical":
+        css.marginTop = value;
+        css.marginBottom = value;
+        break;
+      case "marginHorizontal":
+        css.marginLeft = value;
+        css.marginRight = value;
+        break;
+      default:
+        css[key] = value;
+    }
+  }
+  if (css.alignItems || css.justifyContent || css.flexDirection) {
+    css.display = css.display ?? "flex";
+  }
+  return css;
+}
 function Button({
   title,
   onPress,
@@ -13,26 +46,42 @@ 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];
+  const useWebDom = reactNative.Platform.OS === "web" && (className != null || textClassName != null);
+  if (useWebDom) {
+    return react.createElement(
+      "button",
+      {
+        type: "button",
+        className,
+        style: rnStyleToWebStyle(containerStyle),
+        disabled,
+        onClick: (event) => {
+          onPress(event);
+        },
+        "aria-disabled": disabled
+      },
+      react.createElement(
+        "span",
+        {
+          className: textClassName,
+          style: rnStyleToWebStyle(labelStyle)
+        },
+        title
+      )
+    );
+  }
   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 +93,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/utils/rnStyleToWebStyle.ts","../src/components/Button.tsx"],"names":["StyleSheet","Platform","createElement","jsx","TouchableOpacity","Text"],"mappings":"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","file":"index.cjs","sourcesContent":["import { StyleSheet, type StyleProp, type TextStyle, type ViewStyle } from \"react-native\";\nimport type { CSSProperties } from \"react\";\n\ntype RNStyle = StyleProp<ViewStyle> | StyleProp<TextStyle>;\n\n/**\n * Converts React Native StyleSheet values to CSS properties for DOM elements.\n * Required when rendering native HTML on web (browsers ignore paddingVertical, etc.).\n */\nexport function rnStyleToWebStyle(style: RNStyle): CSSProperties {\n  const flat = StyleSheet.flatten(style);\n  if (!flat) return {};\n\n  const css: Record<string, unknown> = {};\n\n  for (const [key, value] of Object.entries(flat)) {\n    if (value === undefined || value === null) continue;\n\n    switch (key) {\n      case \"paddingVertical\":\n        css.paddingTop = value;\n        css.paddingBottom = value;\n        break;\n      case \"paddingHorizontal\":\n        css.paddingLeft = value;\n        css.paddingRight = value;\n        break;\n      case \"marginVertical\":\n        css.marginTop = value;\n        css.marginBottom = value;\n        break;\n      case \"marginHorizontal\":\n        css.marginLeft = value;\n        css.marginRight = value;\n        break;\n      default:\n        css[key] = value;\n    }\n  }\n\n  if (css.alignItems || css.justifyContent || css.flexDirection) {\n    css.display = css.display ?? \"flex\";\n  }\n\n  return css as CSSProperties;\n}\n","import React, { createElement } from \"react\";\nimport {\n  Platform,\n  StyleSheet,\n  Text,\n  TouchableOpacity,\n  type GestureResponderEvent,\n  type StyleProp,\n  type TextStyle,\n  type ViewStyle,\n} from \"react-native\";\nimport { rnStyleToWebStyle } from \"../utils/rnStyleToWebStyle\";\n\nexport interface ButtonProps {\n  title: string;\n  onPress: (event: GestureResponderEvent) => void;\n  disabled?: boolean;\n  /** Additional container styles (works on web and native). */\n  style?: StyleProp<ViewStyle>;\n  /** Additional label styles (works on web and native). */\n  textStyle?: StyleProp<TextStyle>;\n  /**\n   * CSS class names for the container (web only — uses DOM `<button>` for Tailwind).\n   * On native: ignored unless using NativeWind with cssInterop.\n   */\n  className?: string;\n  /**\n   * CSS class names for the label (web only).\n   * On native: ignored unless using NativeWind with cssInterop.\n   */\n  textClassName?: string;\n}\n\nexport function Button({\n  title,\n  onPress,\n  disabled = false,\n  style,\n  textStyle,\n  className,\n  textClassName,\n}: ButtonProps) {\n  const containerStyle = [styles.button, disabled && styles.buttonDisabled, style];\n  const labelStyle = [styles.text, disabled && styles.textDisabled, textStyle];\n\n  const useWebDom =\n    Platform.OS === \"web\" && (className != null || textClassName != null);\n\n  if (useWebDom) {\n    return createElement(\n      \"button\",\n      {\n        type: \"button\",\n        className,\n        style: rnStyleToWebStyle(containerStyle),\n        disabled,\n        onClick: (event: React.MouseEvent<HTMLButtonElement>) => {\n          onPress(event as unknown as GestureResponderEvent);\n        },\n        \"aria-disabled\": disabled,\n      },\n      createElement(\n        \"span\",\n        {\n          className: textClassName,\n          style: rnStyleToWebStyle(labelStyle),\n        },\n        title,\n      ),\n    );\n  }\n\n  return (\n    <TouchableOpacity\n      style={containerStyle}\n      onPress={onPress}\n      disabled={disabled}\n      activeOpacity={0.7}\n      accessibilityRole=\"button\"\n      accessibilityState={{ disabled }}\n    >\n      <Text style={labelStyle}>{title}</Text>\n    </TouchableOpacity>\n  );\n}\n\nconst styles = StyleSheet.create({\n  button: {\n    backgroundColor: \"#2563eb\",\n    paddingVertical: 12,\n    paddingHorizontal: 24,\n    borderRadius: 8,\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    minWidth: 120,\n    borderWidth: 0,\n  },\n  buttonDisabled: {\n    backgroundColor: \"#93c5fd\",\n    opacity: 0.7,\n  },\n  text: {\n    color: \"#ffffff\",\n    fontSize: 16,\n    fontWeight: \"600\",\n  },\n  textDisabled: {\n    color: \"#e5e7eb\",\n  },\n});\n"]}

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,16 @@ 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 (web only — uses DOM `<button>` for Tailwind).
+     * 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 (web only).
+     * 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,16 @@ 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 (web only — uses DOM `<button>` for Tailwind).
+     * 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 (web only).
+     * 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,7 +1,40 @@
-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 rnStyleToWebStyle(style) {
+  const flat = StyleSheet.flatten(style);
+  if (!flat) return {};
+  const css = {};
+  for (const [key, value] of Object.entries(flat)) {
+    if (value === void 0 || value === null) continue;
+    switch (key) {
+      case "paddingVertical":
+        css.paddingTop = value;
+        css.paddingBottom = value;
+        break;
+      case "paddingHorizontal":
+        css.paddingLeft = value;
+        css.paddingRight = value;
+        break;
+      case "marginVertical":
+        css.marginTop = value;
+        css.marginBottom = value;
+        break;
+      case "marginHorizontal":
+        css.marginLeft = value;
+        css.marginRight = value;
+        break;
+      default:
+        css[key] = value;
+    }
+  }
+  if (css.alignItems || css.justifyContent || css.flexDirection) {
+    css.display = css.display ?? "flex";
+  }
+  return css;
+}
 function Button({
   title,
   onPress,
@@ -11,26 +44,42 @@ 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];
+  const useWebDom = Platform.OS === "web" && (className != null || textClassName != null);
+  if (useWebDom) {
+    return createElement(
+      "button",
+      {
+        type: "button",
+        className,
+        style: rnStyleToWebStyle(containerStyle),
+        disabled,
+        onClick: (event) => {
+          onPress(event);
+        },
+        "aria-disabled": disabled
+      },
+      createElement(
+        "span",
+        {
+          className: textClassName,
+          style: rnStyleToWebStyle(labelStyle)
+        },
+        title
+      )
+    );
+  }
   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 +91,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/utils/rnStyleToWebStyle.ts","../src/components/Button.tsx"],"names":["StyleSheet"],"mappings":"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","file":"index.js","sourcesContent":["import { StyleSheet, type StyleProp, type TextStyle, type ViewStyle } from \"react-native\";\nimport type { CSSProperties } from \"react\";\n\ntype RNStyle = StyleProp<ViewStyle> | StyleProp<TextStyle>;\n\n/**\n * Converts React Native StyleSheet values to CSS properties for DOM elements.\n * Required when rendering native HTML on web (browsers ignore paddingVertical, etc.).\n */\nexport function rnStyleToWebStyle(style: RNStyle): CSSProperties {\n  const flat = StyleSheet.flatten(style);\n  if (!flat) return {};\n\n  const css: Record<string, unknown> = {};\n\n  for (const [key, value] of Object.entries(flat)) {\n    if (value === undefined || value === null) continue;\n\n    switch (key) {\n      case \"paddingVertical\":\n        css.paddingTop = value;\n        css.paddingBottom = value;\n        break;\n      case \"paddingHorizontal\":\n        css.paddingLeft = value;\n        css.paddingRight = value;\n        break;\n      case \"marginVertical\":\n        css.marginTop = value;\n        css.marginBottom = value;\n        break;\n      case \"marginHorizontal\":\n        css.marginLeft = value;\n        css.marginRight = value;\n        break;\n      default:\n        css[key] = value;\n    }\n  }\n\n  if (css.alignItems || css.justifyContent || css.flexDirection) {\n    css.display = css.display ?? \"flex\";\n  }\n\n  return css as CSSProperties;\n}\n","import React, { createElement } from \"react\";\nimport {\n  Platform,\n  StyleSheet,\n  Text,\n  TouchableOpacity,\n  type GestureResponderEvent,\n  type StyleProp,\n  type TextStyle,\n  type ViewStyle,\n} from \"react-native\";\nimport { rnStyleToWebStyle } from \"../utils/rnStyleToWebStyle\";\n\nexport interface ButtonProps {\n  title: string;\n  onPress: (event: GestureResponderEvent) => void;\n  disabled?: boolean;\n  /** Additional container styles (works on web and native). */\n  style?: StyleProp<ViewStyle>;\n  /** Additional label styles (works on web and native). */\n  textStyle?: StyleProp<TextStyle>;\n  /**\n   * CSS class names for the container (web only — uses DOM `<button>` for Tailwind).\n   * On native: ignored unless using NativeWind with cssInterop.\n   */\n  className?: string;\n  /**\n   * CSS class names for the label (web only).\n   * On native: ignored unless using NativeWind with cssInterop.\n   */\n  textClassName?: string;\n}\n\nexport function Button({\n  title,\n  onPress,\n  disabled = false,\n  style,\n  textStyle,\n  className,\n  textClassName,\n}: ButtonProps) {\n  const containerStyle = [styles.button, disabled && styles.buttonDisabled, style];\n  const labelStyle = [styles.text, disabled && styles.textDisabled, textStyle];\n\n  const useWebDom =\n    Platform.OS === \"web\" && (className != null || textClassName != null);\n\n  if (useWebDom) {\n    return createElement(\n      \"button\",\n      {\n        type: \"button\",\n        className,\n        style: rnStyleToWebStyle(containerStyle),\n        disabled,\n        onClick: (event: React.MouseEvent<HTMLButtonElement>) => {\n          onPress(event as unknown as GestureResponderEvent);\n        },\n        \"aria-disabled\": disabled,\n      },\n      createElement(\n        \"span\",\n        {\n          className: textClassName,\n          style: rnStyleToWebStyle(labelStyle),\n        },\n        title,\n      ),\n    );\n  }\n\n  return (\n    <TouchableOpacity\n      style={containerStyle}\n      onPress={onPress}\n      disabled={disabled}\n      activeOpacity={0.7}\n      accessibilityRole=\"button\"\n      accessibilityState={{ disabled }}\n    >\n      <Text style={labelStyle}>{title}</Text>\n    </TouchableOpacity>\n  );\n}\n\nconst styles = StyleSheet.create({\n  button: {\n    backgroundColor: \"#2563eb\",\n    paddingVertical: 12,\n    paddingHorizontal: 24,\n    borderRadius: 8,\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    minWidth: 120,\n    borderWidth: 0,\n  },\n  buttonDisabled: {\n    backgroundColor: \"#93c5fd\",\n    opacity: 0.7,\n  },\n  text: {\n    color: \"#ffffff\",\n    fontSize: 16,\n    fontWeight: \"600\",\n  },\n  textDisabled: {\n    color: \"#e5e7eb\",\n  },\n});\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scripso-homepad/ui",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "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,
@@ -7,6 +9,7 @@ import {
   type TextStyle,
   type ViewStyle,
 } from "react-native";
+import { rnStyleToWebStyle } from "../utils/rnStyleToWebStyle";
 
 export interface ButtonProps {
   title: string;
@@ -17,11 +20,14 @@ 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 (web only — uses DOM `<button>` for Tailwind).
+   * 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 (web only).
+   * On native: ignored unless using NativeWind with cssInterop.
+   */
   textClassName?: string;
 }
 
@@ -34,27 +40,46 @@ 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];
+
+  const useWebDom =
+    Platform.OS === "web" && (className != null || textClassName != null);
+
+  if (useWebDom) {
+    return createElement(
+      "button",
+      {
+        type: "button",
+        className,
+        style: rnStyleToWebStyle(containerStyle),
+        disabled,
+        onClick: (event: React.MouseEvent<HTMLButtonElement>) => {
+          onPress(event as unknown as GestureResponderEvent);
+        },
+        "aria-disabled": disabled,
+      },
+      createElement(
+        "span",
+        {
+          className: textClassName,
+          style: rnStyleToWebStyle(labelStyle),
+        },
+        title,
+      ),
+    );
+  }
 
   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 +93,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     minWidth: 120,
+    borderWidth: 0,
   },
   buttonDisabled: {
     backgroundColor: "#93c5fd",

package/src/utils/rnStyleToWebStyle.ts

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