@scripso-homepad/ui 0.3.1 → 0.3.3

package/README.md

@@ -115,18 +115,24 @@ 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:
+`className` is applied to the same `TouchableOpacity` / `Text` DOM nodes as the default styles — layout and padding stay consistent with native:
 
 ```tsx
 <Button
   title="Save"
   onPress={handleSave}
-  className="rounded-full bg-violet-600 px-8 shadow-lg"
+  className="!bg-violet-600 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`.
+Use `!` (important) on Tailwind utilities when overriding default colors, e.g. `!bg-red-500`, because react-native-web applies inline styles from `StyleSheet`.
+
+Ensure Tailwind scans the package if needed:
+
+```js
+content: ["./src/**/*.{js,ts,jsx,tsx}", "./node_modules/@scripso-homepad/ui/**/*.{js,ts,jsx,tsx}"],
+```
 
 ## Development
 

package/dist/index.cjs

@@ -5,6 +5,33 @@ var reactNative = require('react-native');
 var jsxRuntime = require('react/jsx-runtime');
 
 // src/components/Button.tsx
+function hasClassList(node) {
+  return typeof node === "object" && node !== null && "classList" in node && typeof node.classList?.add === "function";
+}
+function resolveWebElement(ref) {
+  const node = ref.current;
+  if (!node) return null;
+  if (hasClassList(node)) return node;
+  const host = node;
+  if (hasClassList(host._touchableNode)) return host._touchableNode;
+  if (typeof host.getScrollableNode === "function") {
+    const scrollNode = host.getScrollableNode();
+    if (hasClassList(scrollNode)) return scrollNode;
+  }
+  return null;
+}
+function useApplyWebClassName(ref, className) {
+  react.useLayoutEffect(() => {
+    if (reactNative.Platform.OS !== "web" || !className?.trim()) return;
+    const element = resolveWebElement(ref);
+    if (!element) return;
+    const classes = className.trim().split(/\s+/);
+    element.classList.add(...classes);
+    return () => {
+      element.classList.remove(...classes);
+    };
+  }, [ref, className]);
+}
 function Button({
   title,
   onPress,
@@ -14,41 +41,23 @@ function Button({
   className,
   textClassName
 }) {
+  const containerRef = react.useRef(null);
+  const textRef = react.useRef(null);
+  useApplyWebClassName(containerRef, className);
+  useApplyWebClassName(textRef, textClassName);
   const containerStyle = [styles.button, disabled && styles.buttonDisabled, style];
   const labelStyle = [styles.text, disabled && styles.textDisabled, textStyle];
-  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,
     {
+      ref: containerRef,
       style: containerStyle,
       onPress,
       disabled,
       activeOpacity: 0.7,
       accessibilityRole: "button",
       accessibilityState: { disabled },
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: labelStyle, children: title })
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { ref: textRef, style: labelStyle, children: title })
     }
   );
 }

package/dist/index.cjs.map

@@ -1 +1 @@
-{"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"]}
+{"version":3,"sources":["../src/utils/useApplyWebClassName.ts","../src/components/Button.tsx"],"names":["useLayoutEffect","Platform","useRef","jsx","TouchableOpacity","Text","StyleSheet"],"mappings":"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","file":"index.cjs","sourcesContent":["import { useLayoutEffect } from \"react\";\nimport { Platform } from \"react-native\";\n\ninterface ClassListElement {\n  classList: {\n    add: (...classes: string[]) => void;\n    remove: (...classes: string[]) => void;\n  };\n}\n\nfunction hasClassList(node: unknown): node is ClassListElement {\n  return (\n    typeof node === \"object\" &&\n    node !== null &&\n    \"classList\" in node &&\n    typeof (node as ClassListElement).classList?.add === \"function\"\n  );\n}\n\nfunction resolveWebElement(ref: React.RefObject<unknown>): ClassListElement | null {\n  const node = ref.current;\n  if (!node) return null;\n\n  if (hasClassList(node)) return node;\n\n  const host = node as {\n    _touchableNode?: unknown;\n    getScrollableNode?: () => unknown;\n  };\n\n  if (hasClassList(host._touchableNode)) return host._touchableNode;\n\n  if (typeof host.getScrollableNode === \"function\") {\n    const scrollNode = host.getScrollableNode();\n    if (hasClassList(scrollNode)) return scrollNode;\n  }\n\n  return null;\n}\n\n/**\n * Applies CSS class names to the underlying DOM node on web.\n * Keeps TouchableOpacity/Text as the render path so default RN styles stay intact.\n */\nexport function useApplyWebClassName(\n  ref: React.RefObject<unknown>,\n  className?: string,\n): void {\n  useLayoutEffect(() => {\n    if (Platform.OS !== \"web\" || !className?.trim()) return;\n\n    const element = resolveWebElement(ref);\n    if (!element) return;\n\n    const classes = className.trim().split(/\\s+/);\n    element.classList.add(...classes);\n\n    return () => {\n      element.classList.remove(...classes);\n    };\n  }, [ref, className]);\n}\n","import { useRef, type ComponentRef } from \"react\";\nimport {\n  StyleSheet,\n  Text,\n  TouchableOpacity,\n  type GestureResponderEvent,\n  type StyleProp,\n  type TextStyle,\n  type ViewStyle,\n} from \"react-native\";\nimport { useApplyWebClassName } from \"../utils/useApplyWebClassName\";\n\nexport interface ButtonProps {\n  title: string;\n  onPress: (event: GestureResponderEvent) => void;\n  disabled?: boolean;\n  /** Additional container styles (works on web and native). */\n  style?: StyleProp<ViewStyle>;\n  /** Additional label styles (works on web and native). */\n  textStyle?: StyleProp<TextStyle>;\n  /**\n   * CSS class names for the container (web: applied to the same DOM node as default styles).\n   * On native: ignored unless using NativeWind with cssInterop.\n   */\n  className?: string;\n  /**\n   * CSS class names for the label (web).\n   * On native: ignored unless using NativeWind with cssInterop.\n   */\n  textClassName?: string;\n}\n\nexport function Button({\n  title,\n  onPress,\n  disabled = false,\n  style,\n  textStyle,\n  className,\n  textClassName,\n}: ButtonProps) {\n  const containerRef = useRef<ComponentRef<typeof TouchableOpacity>>(null);\n  const textRef = useRef<ComponentRef<typeof Text>>(null);\n\n  useApplyWebClassName(containerRef, className);\n  useApplyWebClassName(textRef, textClassName);\n\n  const containerStyle = [styles.button, disabled && styles.buttonDisabled, style];\n  const labelStyle = [styles.text, disabled && styles.textDisabled, textStyle];\n\n  return (\n    <TouchableOpacity\n      ref={containerRef}\n      style={containerStyle}\n      onPress={onPress}\n      disabled={disabled}\n      activeOpacity={0.7}\n      accessibilityRole=\"button\"\n      accessibilityState={{ disabled }}\n    >\n      <Text ref={textRef} style={labelStyle}>\n        {title}\n      </Text>\n    </TouchableOpacity>\n  );\n}\n\nconst styles = StyleSheet.create({\n  button: {\n    backgroundColor: \"#2563eb\",\n    paddingVertical: 12,\n    paddingHorizontal: 24,\n    borderRadius: 8,\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    minWidth: 120,\n    borderWidth: 0,\n  },\n  buttonDisabled: {\n    backgroundColor: \"#93c5fd\",\n    opacity: 0.7,\n  },\n  text: {\n    color: \"#ffffff\",\n    fontSize: 16,\n    fontWeight: \"600\",\n  },\n  textDisabled: {\n    color: \"#e5e7eb\",\n  },\n});\n"]}

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as react from 'react';
 import { GestureResponderEvent, StyleProp, ViewStyle, TextStyle } from 'react-native';
 
 interface ButtonProps {
@@ -10,18 +10,16 @@ interface ButtonProps {
     /** 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).
+     * CSS class names for the container (web: applied to the same DOM node as default styles).
      * 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).
+     * CSS class names for the label (web).
      * 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 React from 'react';
+import * as react from 'react';
 import { GestureResponderEvent, StyleProp, ViewStyle, TextStyle } from 'react-native';
 
 interface ButtonProps {
@@ -10,18 +10,16 @@ interface ButtonProps {
     /** 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).
+     * CSS class names for the container (web: applied to the same DOM node as default styles).
      * 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).
+     * CSS class names for the label (web).
      * 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,8 +1,35 @@
-import { createElement } from 'react';
-import { StyleSheet, Platform, TouchableOpacity, Text } from 'react-native';
+import { useRef, useLayoutEffect } from 'react';
+import { StyleSheet, TouchableOpacity, Text, Platform } from 'react-native';
 import { jsx } from 'react/jsx-runtime';
 
 // src/components/Button.tsx
+function hasClassList(node) {
+  return typeof node === "object" && node !== null && "classList" in node && typeof node.classList?.add === "function";
+}
+function resolveWebElement(ref) {
+  const node = ref.current;
+  if (!node) return null;
+  if (hasClassList(node)) return node;
+  const host = node;
+  if (hasClassList(host._touchableNode)) return host._touchableNode;
+  if (typeof host.getScrollableNode === "function") {
+    const scrollNode = host.getScrollableNode();
+    if (hasClassList(scrollNode)) return scrollNode;
+  }
+  return null;
+}
+function useApplyWebClassName(ref, className) {
+  useLayoutEffect(() => {
+    if (Platform.OS !== "web" || !className?.trim()) return;
+    const element = resolveWebElement(ref);
+    if (!element) return;
+    const classes = className.trim().split(/\s+/);
+    element.classList.add(...classes);
+    return () => {
+      element.classList.remove(...classes);
+    };
+  }, [ref, className]);
+}
 function Button({
   title,
   onPress,
@@ -12,41 +39,23 @@ function Button({
   className,
   textClassName
 }) {
+  const containerRef = useRef(null);
+  const textRef = useRef(null);
+  useApplyWebClassName(containerRef, className);
+  useApplyWebClassName(textRef, textClassName);
   const containerStyle = [styles.button, disabled && styles.buttonDisabled, style];
   const labelStyle = [styles.text, disabled && styles.textDisabled, textStyle];
-  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,
     {
+      ref: containerRef,
       style: containerStyle,
       onPress,
       disabled,
       activeOpacity: 0.7,
       accessibilityRole: "button",
       accessibilityState: { disabled },
-      children: /* @__PURE__ */ jsx(Text, { style: labelStyle, children: title })
+      children: /* @__PURE__ */ jsx(Text, { ref: textRef, style: labelStyle, children: title })
     }
   );
 }

package/dist/index.js.map

@@ -1 +1 @@
-{"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"]}
+{"version":3,"sources":["../src/utils/useApplyWebClassName.ts","../src/components/Button.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import { useLayoutEffect } from \"react\";\nimport { Platform } from \"react-native\";\n\ninterface ClassListElement {\n  classList: {\n    add: (...classes: string[]) => void;\n    remove: (...classes: string[]) => void;\n  };\n}\n\nfunction hasClassList(node: unknown): node is ClassListElement {\n  return (\n    typeof node === \"object\" &&\n    node !== null &&\n    \"classList\" in node &&\n    typeof (node as ClassListElement).classList?.add === \"function\"\n  );\n}\n\nfunction resolveWebElement(ref: React.RefObject<unknown>): ClassListElement | null {\n  const node = ref.current;\n  if (!node) return null;\n\n  if (hasClassList(node)) return node;\n\n  const host = node as {\n    _touchableNode?: unknown;\n    getScrollableNode?: () => unknown;\n  };\n\n  if (hasClassList(host._touchableNode)) return host._touchableNode;\n\n  if (typeof host.getScrollableNode === \"function\") {\n    const scrollNode = host.getScrollableNode();\n    if (hasClassList(scrollNode)) return scrollNode;\n  }\n\n  return null;\n}\n\n/**\n * Applies CSS class names to the underlying DOM node on web.\n * Keeps TouchableOpacity/Text as the render path so default RN styles stay intact.\n */\nexport function useApplyWebClassName(\n  ref: React.RefObject<unknown>,\n  className?: string,\n): void {\n  useLayoutEffect(() => {\n    if (Platform.OS !== \"web\" || !className?.trim()) return;\n\n    const element = resolveWebElement(ref);\n    if (!element) return;\n\n    const classes = className.trim().split(/\\s+/);\n    element.classList.add(...classes);\n\n    return () => {\n      element.classList.remove(...classes);\n    };\n  }, [ref, className]);\n}\n","import { useRef, type ComponentRef } from \"react\";\nimport {\n  StyleSheet,\n  Text,\n  TouchableOpacity,\n  type GestureResponderEvent,\n  type StyleProp,\n  type TextStyle,\n  type ViewStyle,\n} from \"react-native\";\nimport { useApplyWebClassName } from \"../utils/useApplyWebClassName\";\n\nexport interface ButtonProps {\n  title: string;\n  onPress: (event: GestureResponderEvent) => void;\n  disabled?: boolean;\n  /** Additional container styles (works on web and native). */\n  style?: StyleProp<ViewStyle>;\n  /** Additional label styles (works on web and native). */\n  textStyle?: StyleProp<TextStyle>;\n  /**\n   * CSS class names for the container (web: applied to the same DOM node as default styles).\n   * On native: ignored unless using NativeWind with cssInterop.\n   */\n  className?: string;\n  /**\n   * CSS class names for the label (web).\n   * On native: ignored unless using NativeWind with cssInterop.\n   */\n  textClassName?: string;\n}\n\nexport function Button({\n  title,\n  onPress,\n  disabled = false,\n  style,\n  textStyle,\n  className,\n  textClassName,\n}: ButtonProps) {\n  const containerRef = useRef<ComponentRef<typeof TouchableOpacity>>(null);\n  const textRef = useRef<ComponentRef<typeof Text>>(null);\n\n  useApplyWebClassName(containerRef, className);\n  useApplyWebClassName(textRef, textClassName);\n\n  const containerStyle = [styles.button, disabled && styles.buttonDisabled, style];\n  const labelStyle = [styles.text, disabled && styles.textDisabled, textStyle];\n\n  return (\n    <TouchableOpacity\n      ref={containerRef}\n      style={containerStyle}\n      onPress={onPress}\n      disabled={disabled}\n      activeOpacity={0.7}\n      accessibilityRole=\"button\"\n      accessibilityState={{ disabled }}\n    >\n      <Text ref={textRef} style={labelStyle}>\n        {title}\n      </Text>\n    </TouchableOpacity>\n  );\n}\n\nconst styles = StyleSheet.create({\n  button: {\n    backgroundColor: \"#2563eb\",\n    paddingVertical: 12,\n    paddingHorizontal: 24,\n    borderRadius: 8,\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    minWidth: 120,\n    borderWidth: 0,\n  },\n  buttonDisabled: {\n    backgroundColor: \"#93c5fd\",\n    opacity: 0.7,\n  },\n  text: {\n    color: \"#ffffff\",\n    fontSize: 16,\n    fontWeight: \"600\",\n  },\n  textDisabled: {\n    color: \"#e5e7eb\",\n  },\n});\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scripso-homepad/ui",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "type": "module",
   "description": "Cross-platform UI components for Homepad (React Web + React Native)",
   "license": "MIT",

package/src/components/Button.tsx

@@ -1,6 +1,5 @@
-import React, { createElement } from "react";
+import { useRef, type ComponentRef } from "react";
 import {
-  Platform,
   StyleSheet,
   Text,
   TouchableOpacity,
@@ -9,6 +8,7 @@ import {
   type TextStyle,
   type ViewStyle,
 } from "react-native";
+import { useApplyWebClassName } from "../utils/useApplyWebClassName";
 
 export interface ButtonProps {
   title: string;
@@ -19,14 +19,12 @@ export interface ButtonProps {
   /** 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).
+   * CSS class names for the container (web: applied to the same DOM node as default styles).
    * 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).
+   * CSS class names for the label (web).
    * On native: ignored unless using NativeWind with cssInterop.
    */
   textClassName?: string;
@@ -41,35 +39,18 @@ export function Button({
   className,
   textClassName,
 }: ButtonProps) {
+  const containerRef = useRef<ComponentRef<typeof TouchableOpacity>>(null);
+  const textRef = useRef<ComponentRef<typeof Text>>(null);
+
+  useApplyWebClassName(containerRef, className);
+  useApplyWebClassName(textRef, 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: React.MouseEvent<HTMLButtonElement>) => {
-          onPress(event as unknown as GestureResponderEvent);
-        },
-        "aria-disabled": disabled,
-      },
-      createElement(
-        "span",
-        {
-          className: textClassName,
-          style: StyleSheet.flatten(labelStyle),
-        },
-        title,
-      ),
-    );
-  }
-
   return (
     <TouchableOpacity
+      ref={containerRef}
       style={containerStyle}
       onPress={onPress}
       disabled={disabled}
@@ -77,7 +58,9 @@ export function Button({
       accessibilityRole="button"
       accessibilityState={{ disabled }}
     >
-      <Text style={labelStyle}>{title}</Text>
+      <Text ref={textRef} style={labelStyle}>
+        {title}
+      </Text>
     </TouchableOpacity>
   );
 }

package/src/utils/useApplyWebClassName.ts

@@ -0,0 +1,62 @@
+import { useLayoutEffect } from "react";
+import { Platform } from "react-native";
+
+interface ClassListElement {
+  classList: {
+    add: (...classes: string[]) => void;
+    remove: (...classes: string[]) => void;
+  };
+}
+
+function hasClassList(node: unknown): node is ClassListElement {
+  return (
+    typeof node === "object" &&
+    node !== null &&
+    "classList" in node &&
+    typeof (node as ClassListElement).classList?.add === "function"
+  );
+}
+
+function resolveWebElement(ref: React.RefObject<unknown>): ClassListElement | null {
+  const node = ref.current;
+  if (!node) return null;
+
+  if (hasClassList(node)) return node;
+
+  const host = node as {
+    _touchableNode?: unknown;
+    getScrollableNode?: () => unknown;
+  };
+
+  if (hasClassList(host._touchableNode)) return host._touchableNode;
+
+  if (typeof host.getScrollableNode === "function") {
+    const scrollNode = host.getScrollableNode();
+    if (hasClassList(scrollNode)) return scrollNode;
+  }
+
+  return null;
+}
+
+/**
+ * Applies CSS class names to the underlying DOM node on web.
+ * Keeps TouchableOpacity/Text as the render path so default RN styles stay intact.
+ */
+export function useApplyWebClassName(
+  ref: React.RefObject<unknown>,
+  className?: string,
+): void {
+  useLayoutEffect(() => {
+    if (Platform.OS !== "web" || !className?.trim()) return;
+
+    const element = resolveWebElement(ref);
+    if (!element) return;
+
+    const classes = className.trim().split(/\s+/);
+    element.classList.add(...classes);
+
+    return () => {
+      element.classList.remove(...classes);
+    };
+  }, [ref, className]);
+}