@react-xp/aeiou 0.1.0-beta.13 → 0.1.0-beta.14

package/dist/native/cjs/components/o/o.native.js

@@ -4,9 +4,9 @@ exports.Overflow = void 0;
 exports.O = O;
 const jsx_runtime_1 = require("nativewind/jsx-runtime");
 const react_native_1 = require("react-native");
-const index_native_1 = require("../../hooks/index.native");
-function O({ className, children, horizontal, ref, ...rest }) {
-    const cn = (0, index_native_1.useCn)();
-    return ((0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { ref: ref, className: cn(className), horizontal: horizontal, ...rest, children: children }));
+const useCn_1 = require("../../hooks/useCn");
+function O({ className, children, horizontal, ref, ...restProps }) {
+    const cn = (0, useCn_1.useCn)();
+    return ((0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { ref: ref, className: cn(className), horizontal: horizontal, ...restProps, children: children }));
 }
 exports.Overflow = O;

package/dist/native/cjs/components/o/o.web.js

@@ -3,10 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Overflow = void 0;
 exports.O = O;
 const jsx_runtime_1 = require("nativewind/jsx-runtime");
-const index_web_1 = require("../../hooks/index.web");
-function O({ className, children, horizontal, ref, style, ...rest }) {
-    const cn = (0, index_web_1.useCn)();
+const useCn_1 = require("../../hooks/useCn");
+const index_web_1 = require("../../index.web");
+function O({ className, children, horizontal, ref, style, ...restProps }) {
+    const cn = (0, useCn_1.useCn)();
+    const { disabled, eventHandlers } = (0, index_web_1.useInteractiveHandlers)(restProps);
+    const { getStyles } = (0, index_web_1.useStyles)();
     const overflowClass = horizontal ? 'overflow-x-auto' : 'overflow-y-auto';
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: cn(overflowClass, className), style: style, ...rest, children: children }));
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: cn(overflowClass, className), ...restProps, ...eventHandlers, ...getStyles({ disabled, style }), children: children }));
 }
 exports.Overflow = O;

package/dist/native/cjs/components/p/p.native.js

@@ -4,10 +4,10 @@ exports.Picture = void 0;
 exports.P = P;
 const jsx_runtime_1 = require("nativewind/jsx-runtime");
 const react_native_1 = require("react-native");
-const index_native_1 = require("../../hooks/index.native");
-function P({ className, src, source, ref, ...rest }) {
-    const cn = (0, index_native_1.useCn)();
+const useCn_1 = require("../../hooks/useCn");
+function P({ className, src, source, ref, ...restProps }) {
+    const cn = (0, useCn_1.useCn)();
     const finalSource = src != null ? { uri: src } : source;
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Image, { ref: ref, className: cn(className), source: finalSource, ...rest }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Image, { ref: ref, className: cn(className), source: finalSource, ...restProps }));
 }
 exports.Picture = P;

package/dist/native/cjs/components/p/p.web.js

@@ -3,11 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Picture = void 0;
 exports.P = P;
 const jsx_runtime_1 = require("nativewind/jsx-runtime");
-const index_web_1 = require("../../hooks/index.web");
-function P({ alt, className, ref, style, ...rest }) {
-    const cn = (0, index_web_1.useCn)();
+const useCn_1 = require("../../hooks/useCn");
+const index_web_1 = require("../../index.web");
+function P({ alt, className, ref, style, source, src, ...restProps }) {
+    const cn = (0, useCn_1.useCn)();
+    const { disabled, eventHandlers } = (0, index_web_1.useInteractiveHandlers)(restProps);
+    const { getStyles } = (0, index_web_1.useStyles)();
     return (
     // biome-ignore lint/a11y/useAltText: <explanation>
-    (0, jsx_runtime_1.jsx)("img", { alt: alt, "aria-label": alt, ref: ref, className: cn('object-cover', className), style: style, ...rest }));
+    (0, jsx_runtime_1.jsx)("img", { alt: alt, "aria-label": alt, ref: ref, className: cn('object-cover', className), src: src ?? source, ...restProps, ...eventHandlers, ...getStyles({ disabled, style }) }));
 }
 exports.Picture = P;

package/dist/native/cjs/components/s/s.native.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.S = S;
 const jsx_runtime_1 = require("nativewind/jsx-runtime");
 const react_native_safe_area_context_1 = require("react-native-safe-area-context");
-const index_native_1 = require("../../hooks/index.native");
-function S({ className, children, ref, ...rest }) {
-    const cn = (0, index_native_1.useCn)();
-    return ((0, jsx_runtime_1.jsx)(react_native_safe_area_context_1.SafeAreaView, { ref: ref, className: cn(className), ...rest, children: children }));
+const useCn_1 = require("../../hooks/useCn");
+function S({ className, children, ref, ...restProps }) {
+    const cn = (0, useCn_1.useCn)();
+    return ((0, jsx_runtime_1.jsx)(react_native_safe_area_context_1.SafeAreaView, { ref: ref, className: cn(className), ...restProps, children: children }));
 }

package/dist/native/cjs/components/t/t.native.js

@@ -4,10 +4,12 @@ exports.Text = void 0;
 exports.T = T;
 const jsx_runtime_1 = require("nativewind/jsx-runtime");
 const react_native_1 = require("react-native");
-const index_native_1 = require("../../hooks/index.native");
-function T({ className, children, ref, ...rest }) {
-    const cn = (0, index_native_1.useCn)();
-    const { eventHandlers } = (0, index_native_1.useInteractiveState)(rest);
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, className: cn('leading-relaxed', className), ...rest, ...eventHandlers, children: children }));
+const useCn_1 = require("../../hooks/useCn");
+const index_native_1 = require("../../index.native");
+function T({ className, children, ref, style, ...restProps }) {
+    const cn = (0, useCn_1.useCn)();
+    const { disabled, eventHandlers } = (0, index_native_1.useInteractiveHandlers)(restProps);
+    const { getStyles } = (0, index_native_1.useStyles)();
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, className: cn('leading-relaxed', className), ...restProps, ...eventHandlers, ...getStyles({ disabled, style }), children: children }));
 }
 exports.Text = T;

package/dist/native/cjs/components/t/t.web.js

@@ -3,11 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Text = void 0;
 exports.T = T;
 const jsx_runtime_1 = require("nativewind/jsx-runtime");
-const index_web_1 = require("../../hooks/index.web");
-function T({ className, children, as = 'span', ref, ...rest }) {
-    const cn = (0, index_web_1.useCn)();
-    const { eventHandlers } = (0, index_web_1.useInteractiveState)(rest);
+const useCn_1 = require("../../hooks/useCn");
+const index_web_1 = require("../../index.web");
+function T({ className, children, as = 'span', ref, style, ...restProps }) {
+    const cn = (0, useCn_1.useCn)();
+    const { disabled, eventHandlers } = (0, index_web_1.useInteractiveHandlers)(restProps);
+    const { getStyles } = (0, index_web_1.useStyles)();
     const Comp = as;
-    return ((0, jsx_runtime_1.jsx)(Comp, { ref: ref, className: cn('leading-relaxed', className), ...rest, ...eventHandlers, children: children }));
+    return ((0, jsx_runtime_1.jsx)(Comp, { ref: ref, className: cn('leading-relaxed', className), ...restProps, ...eventHandlers, ...getStyles({ disabled, style }), children: children }));
 }
 exports.Text = T;

package/dist/native/cjs/hooks/index.js

@@ -15,6 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./useCn"), exports);
-__exportStar(require("./useInteractiveState/useInteractiveState.web"), exports);
 __exportStar(require("./useOnChange"), exports);
 __exportStar(require("./useProps"), exports);

package/dist/native/cjs/hooks/index.native.js

@@ -15,6 +15,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./useCn"), exports);
+__exportStar(require("./useInteractiveHandlers/useInteractiveHandlers.native"), exports);
 __exportStar(require("./useInteractiveState/useInteractiveState.native"), exports);
 __exportStar(require("./useOnChange"), exports);
 __exportStar(require("./useProps"), exports);
+__exportStar(require("./useStyles/useStyles.native"), exports);

package/dist/native/cjs/hooks/index.web.js

@@ -15,6 +15,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./useCn"), exports);
+__exportStar(require("./useInteractiveHandlers/useInteractiveHandlers.web"), exports);
 __exportStar(require("./useInteractiveState/useInteractiveState.web"), exports);
 __exportStar(require("./useOnChange"), exports);
 __exportStar(require("./useProps"), exports);
+__exportStar(require("./useStyles/useStyles.web"), exports);

package/dist/native/cjs/hooks/useInteractiveHandlers/useInteractiveHandlers.native.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInteractiveHandlers = useInteractiveHandlers;
+const react_1 = require("react");
+function useInteractiveHandlers({ disabled, onBlur, onClick, onFocus, onPress, onIn, onOut, } = {}) {
+    const offOn = (0, react_1.useRef)('off');
+    const eventHandlers = {
+        onBlur: (e) => {
+            if (disabled) {
+                return;
+            }
+            onBlur?.(e);
+        },
+        onFocus: (e) => {
+            if (disabled) {
+                return;
+            }
+            onFocus?.(e);
+        },
+        onPress: (e) => {
+            if (disabled) {
+                return;
+            }
+            if ((onIn || onOut) && offOn.current === 'off') {
+                offOn.current = 'on';
+                onIn?.(e);
+            }
+            if ((onIn || onOut) && offOn.current === 'on') {
+                offOn.current = 'off';
+                onOut?.(e);
+            }
+            if (onPress) {
+                onPress?.(e);
+                return;
+            }
+            onClick?.(e);
+        },
+    };
+    return {
+        disabled,
+        eventHandlers,
+    };
+}

package/dist/native/cjs/hooks/useInteractiveHandlers/useInteractiveHandlers.web.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInteractiveHandlers = useInteractiveHandlers;
+function useInteractiveHandlers({ disabled, onBlur, onClick, onFocus, onPress, onIn, onOut, } = {}) {
+    const eventHandlers = {
+        onBlur: (e) => {
+            if (disabled) {
+                return;
+            }
+            onBlur?.(e);
+        },
+        onClick: (e) => {
+            if (disabled) {
+                return;
+            }
+            if (onClick) {
+                onClick?.(e);
+                return;
+            }
+            onPress?.(e);
+        },
+        onFocus: (e) => {
+            if (disabled) {
+                return;
+            }
+            onFocus?.(e);
+        },
+        onMouseEnter: (e) => {
+            if (disabled) {
+                return;
+            }
+            onIn?.(e);
+        },
+        onMouseLeave: (e) => {
+            if (disabled) {
+                return;
+            }
+            onOut?.(e);
+        },
+    };
+    return {
+        disabled,
+        eventHandlers,
+    };
+}

package/dist/native/cjs/hooks/useInteractiveState/useInteractiveState.native.js

@@ -2,27 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useInteractiveState = useInteractiveState;
 const react_1 = require("react");
-function useInteractiveState(options = {}) {
-    const { disabled, onBlur, onClick, onFocus, onPress, onIn, onOut } = options;
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const [pressed, setPressed] = (0, react_1.useState)(false);
-    const [focused, setFocused] = (0, react_1.useState)(false);
+function useInteractiveState({ disabled, onBlur, onClick, onFocus, onPress, onIn, onOut, } = {}) {
     const offOn = (0, react_1.useRef)('off');
-    const state = disabled
-        ? 'disabled'
-        : pressed
-            ? 'pressed'
-            : hovered
-                ? 'hovered'
-                : focused
-                    ? 'focused'
-                    : 'idle';
+    const [interactiveState, setInteractiveState] = (0, react_1.useState)('idle');
     const dataAttrs = {
-        'data-state': state,
+        'data-state': interactiveState,
         'data-disabled': disabled ? 'true' : 'false',
-        'data-focused': focused ? 'true' : 'false',
-        'data-hovered': hovered ? 'true' : 'false',
-        'data-pressed': pressed ? 'true' : 'false',
+        'data-focused': interactiveState === 'focused' ? 'true' : 'false',
+        'data-hovered': interactiveState === 'hovered' ? 'true' : 'false',
+        'data-pressed': interactiveState === 'pressed' ? 'true' : 'false',
     };
     const eventHandlers = {
         onBlur: (e) => {
@@ -30,22 +18,14 @@ function useInteractiveState(options = {}) {
                 return;
             }
             onBlur?.(e);
-            setFocused(false);
-            setPressed(false);
+            setInteractiveState('idle');
         },
         onFocus: (e) => {
             if (disabled) {
                 return;
             }
             onFocus?.(e);
-            setFocused(true);
-        },
-        onIn: (e) => {
-            if (disabled) {
-                return;
-            }
-            console.log('[DEBUG] onIn', typeof onIn, e);
-            onIn?.(e);
+            setInteractiveState('focused');
         },
         onPress: (e) => {
             if (disabled) {
@@ -70,22 +50,20 @@ function useInteractiveState(options = {}) {
                 return;
             }
             onIn?.(e);
-            setPressed(true);
+            setInteractiveState('pressed');
         },
         onPressOut: (e) => {
             if (disabled) {
                 return;
             }
             onOut?.(e);
-            setPressed(false);
-        },
-        onOut: (e) => {
-            if (disabled) {
-                return;
-            }
-            console.log('[DEBUG] onOut', typeof onOut, e);
-            onOut?.(e);
+            setInteractiveState('idle');
         },
     };
-    return { state, dataAttrs, eventHandlers };
+    return {
+        dataAttrs,
+        disabled,
+        eventHandlers,
+        interactiveState,
+    };
 }

package/dist/native/cjs/hooks/useInteractiveState/useInteractiveState.web.js

@@ -2,43 +2,27 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useInteractiveState = useInteractiveState;
 const react_1 = require("react");
-function useInteractiveState(options = {}) {
-    const { disabled, onBlur, onClick, onPress, onFocus, onIn, onOut } = options;
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const [pressed, setPressed] = (0, react_1.useState)(false);
-    const [focused, setFocused] = (0, react_1.useState)(false);
-    const state = disabled
-        ? 'disabled'
-        : pressed
-            ? 'pressed'
-            : hovered
-                ? 'hovered'
-                : focused
-                    ? 'focused'
-                    : 'idle';
+function useInteractiveState({ disabled, onBlur, onClick, onFocus, onPress, onIn, onOut, } = {}) {
+    const [interactiveState, setInteractiveState] = (0, react_1.useState)('idle');
     const dataAttrs = {
-        'data-state': state,
+        'data-state': interactiveState,
         'data-disabled': disabled ? 'true' : 'false',
-        'data-focused': focused ? 'true' : 'false',
-        'data-hovered': hovered ? 'true' : 'false',
-        'data-pressed': pressed ? 'true' : 'false',
+        'data-focused': interactiveState === 'focused' ? 'true' : 'false',
+        'data-hovered': interactiveState === 'hovered' ? 'true' : 'false',
+        'data-pressed': interactiveState === 'pressed' ? 'true' : 'false',
     };
     const eventHandlers = {
         onBlur: (e) => {
             if (disabled) {
                 return;
             }
-            console.log('[DEBUG] onBlur', typeof onBlur, e);
             onBlur?.(e);
-            setFocused(false);
-            setPressed(false);
-            setHovered(false);
+            setInteractiveState('idle');
         },
         onClick: (e) => {
             if (disabled) {
                 return;
             }
-            console.log('[DEBUG] onClick', typeof onClick, e);
             if (onClick) {
                 onClick?.(e);
                 return;
@@ -49,31 +33,21 @@ function useInteractiveState(options = {}) {
             if (disabled) {
                 return;
             }
-            console.log('[DEBUG] onFocus', typeof onFocus, e);
             onFocus?.(e);
-            setFocused(true);
-        },
-        onIn: (e) => {
-            if (disabled) {
-                return;
-            }
-            console.log('[DEBUG] onIn', typeof onIn, e);
-            onIn?.(e);
+            setInteractiveState('focused');
         },
         onMouseDown: (e) => {
-            if (disabled || e.button !== 0) {
+            if (disabled) {
                 return;
             }
-            console.log('[DEBUG] onMouseDown', e);
-            setPressed(true);
+            setInteractiveState('pressed');
         },
         onMouseEnter: (e) => {
             if (disabled) {
                 return;
             }
-            console.log('[DEBUG] onMouseEnter', typeof onIn, e);
             onIn?.(e);
-            setHovered(true);
+            setInteractiveState('hovered');
         },
         onMouseLeave: (e) => {
             if (disabled) {
@@ -81,23 +55,20 @@ function useInteractiveState(options = {}) {
             }
             console.log('[DEBUG] onMouseLeave', typeof onOut, e);
             onOut?.(e);
-            setHovered(false);
-            setPressed(false);
+            setInteractiveState('idle');
         },
         onMouseUp: (e) => {
             if (disabled) {
                 return;
             }
             console.log('[DEBUG] onMouseUp', e);
-            setPressed(false);
-        },
-        onOut: (e) => {
-            if (disabled) {
-                return;
-            }
-            console.log('[DEBUG] onOut', typeof onOut, e);
-            onOut?.(e);
+            setInteractiveState('idle');
         },
     };
-    return { state, dataAttrs, eventHandlers };
+    return {
+        dataAttrs,
+        disabled,
+        eventHandlers,
+        interactiveState,
+    };
 }

package/dist/native/cjs/hooks/useStyles/useStyles.helpers.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toCssDecls = exports.toKebab = exports.extractStyles = void 0;
+const extractStyles = (style) => {
+    const base = { ...style };
+    const disabled = style.$disabled || {};
+    const focused = style.$focused || {};
+    const hovered = style.$hovered || {};
+    const pressed = style.$pressed || {};
+    base.$disabled = undefined;
+    base.$focused = undefined;
+    base.$hovered = undefined;
+    base.$pressed = undefined;
+    return {
+        styleBase: base,
+        styleDisabled: disabled,
+        styleFocused: focused,
+        styleHovered: hovered,
+        stylePressed: pressed,
+    };
+};
+exports.extractStyles = extractStyles;
+const toKebab = (s) => s.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+exports.toKebab = toKebab;
+const toCssDecls = (style) => {
+    if (!style) {
+        return '';
+    }
+    // TODO: adiconar os px ou outra medida quando necessario e faça sentido
+    return Object.entries(style)
+        .filter(([, v]) => v !== undefined && v !== null)
+        .map(([k, v]) => `${(0, exports.toKebab)(k)}:${typeof v === 'number' ? `${v}` : v};`)
+        .join('');
+};
+exports.toCssDecls = toCssDecls;

package/dist/native/cjs/hooks/useStyles/useStyles.native.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+const useStyles_helpers_1 = require("./useStyles.helpers");
+const getStyles = ({ disabled, style, }) => {
+    if (!style) {
+        return {};
+    }
+    const { styleBase, styleDisabled, styleFocused, styleHovered, stylePressed } = (0, useStyles_helpers_1.extractStyles)(style);
+    const composedStyle = { ...styleBase };
+    if (disabled) {
+        Object.assign(composedStyle, styleDisabled || {});
+    }
+    return { style: composedStyle };
+};
+const getStylesWithInteraction = ({ disabled, style }) => (options) => {
+    if (!style) {
+        return {};
+    }
+    const { styleBase, styleDisabled, styleFocused, styleHovered, stylePressed, } = (0, useStyles_helpers_1.extractStyles)(style);
+    const composedStyle = { ...styleBase };
+    if (disabled) {
+        Object.assign(composedStyle, styleDisabled || {});
+    }
+    if (options?.focused) {
+        Object.assign(composedStyle, styleFocused || {});
+    }
+    if (options?.hovered) {
+        Object.assign(composedStyle, styleHovered || {});
+    }
+    if (options?.pressed) {
+        Object.assign(composedStyle, stylePressed || {});
+    }
+    return { style: composedStyle };
+};
+const useStyles = () => {
+    return {
+        getStyles,
+        getStylesWithInteraction,
+    };
+};
+exports.useStyles = useStyles;

package/dist/native/cjs/hooks/useStyles/useStyles.web.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = exports.createInteractiveClass = void 0;
+const react_1 = require("react");
+const useStyles_helpers_1 = require("./useStyles.helpers");
+const injected = new Set();
+const injectOnce = (id, cssText) => {
+    if (typeof document === 'undefined')
+        return;
+    if (injected.has(id))
+        return;
+    const style = document.createElement('style');
+    style.setAttribute('data-interactive', id);
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    injected.add(id);
+};
+const createInteractiveClass = ({ disabled, id, style, }) => {
+    const className = `ix-${id}`;
+    const { styleBase, styleDisabled, styleFocused, styleHovered, stylePressed } = (0, useStyles_helpers_1.extractStyles)(style);
+    const hoveredClass = styleHovered
+        ? `.${className}:hover{${(0, useStyles_helpers_1.toCssDecls)(styleHovered)}}`
+        : '';
+    const activeClass = stylePressed
+        ? `.${className}:active{${(0, useStyles_helpers_1.toCssDecls)(stylePressed)}}`
+        : '';
+    // focus-visible com fallback para browsers sem suporte
+    const focusVisibleClass = styleFocused
+        ? `
+.${className}:focus-visible{${(0, useStyles_helpers_1.toCssDecls)(styleFocused)}}
+@supports not selector(:focus-visible){
+  .${className}:focus{${(0, useStyles_helpers_1.toCssDecls)(styleFocused)}}
+}
+`
+        : '';
+    const disabledClass = disabled
+        ? `
+.${className}[data-disabled="true"]{${(0, useStyles_helpers_1.toCssDecls)(styleDisabled)}}
+.${className}[data-disabled="true"]:hover{${(0, useStyles_helpers_1.toCssDecls)(styleDisabled)}}
+.${className}[data-disabled="true"]:active{${(0, useStyles_helpers_1.toCssDecls)(styleDisabled)}}
+`
+        : '';
+    const baseClass = `.${className}{${(0, useStyles_helpers_1.toCssDecls)(styleBase)}}`;
+    injectOnce(id, `${baseClass}${hoveredClass}${activeClass}${focusVisibleClass}${disabledClass}`);
+    return className;
+};
+exports.createInteractiveClass = createInteractiveClass;
+const getStyles = ({ id }) => ({ disabled, style }) => {
+    if (!style) {
+        return {};
+    }
+    const className = (0, exports.createInteractiveClass)({ disabled, id, style });
+    return {
+        className,
+        ...(disabled ? { 'aria-disabled': 'true', 'data-disabled': 'true' } : {}),
+    };
+};
+const useStyles = () => {
+    const id = (0, react_1.useId)();
+    // TODO: cleanup on unmount
+    // useEffect(() => {
+    //   return () => {
+    //     document.querySelector(`style[data-interactive="${id}"]`)?.remove();
+    //     injected.delete(id);
+    //   };
+    // }, [id]);
+    return {
+        getStyles: getStyles({ id }),
+    };
+};
+exports.useStyles = useStyles;

package/dist/native/esm/components/a/a.native.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { Pressable } from 'react-native';
-import { useCn, useInteractiveState } from '../../hooks/index.native';
+import { useInteractiveHandlers, useStyles } from '../../hooks/index.native';
+import { useCn } from '../../hooks/useCn';
 import { E } from '../e/index.native';
-export function A({ accessibilityLabel, accessibilityRole, accessibilityState, className, children, loading, disabled, ref, style, ...rest }) {
+export function A({ accessibilityLabel, accessibilityRole, accessibilityState, className, children, loading, ref, style, testId, ...restProps }) {
     const cn = useCn();
-    const { eventHandlers } = useInteractiveState({ ...rest, disabled });
+    const { disabled, eventHandlers } = useInteractiveHandlers(restProps);
+    const { getStylesWithInteraction } = useStyles();
     const isDisabled = Boolean(disabled || loading);
-    return (_jsx(Pressable, { ref: ref, disabled: isDisabled, accessibilityLabel: accessibilityLabel, accessibilityRole: accessibilityRole, accessibilityState: accessibilityState, ...eventHandlers, children: _jsx(E, { className: cn(disabled && 'opacity-60', className), style: style, ...rest, children: children }) }));
+    return (_jsx(Pressable, { ref: ref, disabled: isDisabled, accessibilityLabel: accessibilityLabel, accessibilityRole: accessibilityRole, accessibilityState: accessibilityState, testID: testId, ...eventHandlers, ...getStylesWithInteraction({ disabled, style }), children: _jsx(E, { className: cn(disabled && 'opacity-60', className), style: style, ...restProps, children: children }) }));
 }
 export const Action = A;

package/dist/native/esm/components/a/a.web.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { useCn, useInteractiveState } from '../../hooks/index.web';
-export function A({ className, children, disabled, loading, ref, style, testID, accessibilityLabel, ...rest }) {
+import { useInteractiveHandlers, useStyles } from '../../hooks/index.web';
+import { useCn } from '../../hooks/useCn';
+export function A({ className, children, loading, ref, testId, accessibilityLabel, accessibilityRole, accessibilityState, style, ...restProps }) {
     const cn = useCn();
-    const { eventHandlers } = useInteractiveState({ ...rest, disabled });
+    const { getStyles } = useStyles();
+    const { disabled, eventHandlers } = useInteractiveHandlers(restProps);
     const isDisabled = Boolean(disabled || loading);
-    return (_jsx("button", { ref: ref, type: "button", disabled: disabled, className: cn('cursor-pointer', disabled && 'opacity-60', className), style: style, "aria-disabled": isDisabled || undefined, "aria-busy": loading || undefined, "aria-label": accessibilityLabel, "data-testid": testID, ...rest, ...eventHandlers, children: children }));
+    return (_jsx("button", { ref: ref, type: "button", className: cn('cursor-pointer', disabled && 'opacity-60', className), "aria-disabled": isDisabled || undefined, "aria-busy": loading || undefined, "aria-label": accessibilityLabel, "data-testid": testId, ...restProps, ...eventHandlers, ...getStyles({ disabled, style }), children: children }));
 }
 export const Action = A;