@react-xp/aeiou 1.0.0-beta.3 → 1.0.0-beta.4

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

@@ -5,13 +5,16 @@ exports.A = A;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_1 = require("react-native");
 const index_native_1 = require("../../hooks/index.native");
-const useCn_1 = require("../../hooks/useCn");
 const index_native_2 = require("../e/index.native");
 function A({ accessibilityLabel, accessibilityRole, accessibilityState, className, children, loading, ref, style, testId, ...restProps }) {
-    const cn = (0, useCn_1.useCn)();
+    // const cn = useCn();
     const { disabled, eventHandlers } = (0, index_native_1.useInteractiveHandlers)(restProps);
     const { getStylesWithInteraction } = (0, index_native_1.useStyles)();
     const isDisabled = Boolean(disabled || loading);
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { ref: ref, disabled: isDisabled, accessibilityLabel: accessibilityLabel, accessibilityRole: accessibilityRole, accessibilityState: accessibilityState, testID: testId, ...eventHandlers, ...getStylesWithInteraction({ disabled, style }), children: (0, jsx_runtime_1.jsx)(index_native_2.E, { className: cn(disabled && 'opacity-60', className), style: style, ...restProps, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { ref: ref, disabled: isDisabled, accessibilityLabel: accessibilityLabel, accessibilityRole: accessibilityRole, accessibilityState: accessibilityState, testID: testId, ...eventHandlers, ...getStylesWithInteraction({ disabled, style }), children: (0, jsx_runtime_1.jsx)(index_native_2.E
+        // className={cn(disabled && 'opacity-60', className)}
+        , { 
+            // className={cn(disabled && 'opacity-60', className)}
+            style: style, ...restProps, children: children }) }));
 }
 exports.Action = A;

package/dist/cjs/components/a/a.web.js

@@ -4,12 +4,11 @@ exports.Action = void 0;
 exports.A = A;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const index_web_1 = require("../../hooks/index.web");
-const useCn_1 = require("../../hooks/useCn");
 function A({ className, children, loading, ref, testId, accessibilityLabel, accessibilityRole, accessibilityState, style, ...restProps }) {
-    const cn = (0, useCn_1.useCn)();
+    // const cn = useCn();
     const { getStyles } = (0, index_web_1.useStyles)();
     const { disabled, eventHandlers } = (0, index_web_1.useInteractiveHandlers)(restProps);
     const isDisabled = Boolean(disabled || loading);
-    return ((0, jsx_runtime_1.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 }));
+    return ((0, jsx_runtime_1.jsx)("button", { ref: ref, type: "button", "aria-disabled": isDisabled || undefined, "aria-busy": loading || undefined, "aria-label": accessibilityLabel, "data-testid": testId, ...restProps, ...eventHandlers, ...getStyles({ disabled, style }), children: children }));
 }
 exports.Action = A;

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

@@ -4,10 +4,9 @@ exports.Dialog = void 0;
 exports.D = D;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_1 = require("react-native");
-const useCn_1 = require("../../hooks/useCn");
 const index_native_1 = require("../e/index.native");
 function D({ open, onOpenChange, placement = 'center', backdropClassName, backdropStyle, containerClassName, containerStyle, contentClassName, contentStyle, children, ref, ...restProps }) {
-    const cn = (0, useCn_1.useCn)();
+    // const cn = useCn();
     const placementClasses = {
         center: 'items-center justify-center',
         top: 'items-start justify-center',
@@ -15,14 +14,30 @@ function D({ open, onOpenChange, placement = 'center', backdropClassName, backdr
         left: 'items-stretch justify-start',
         right: 'items-stretch justify-end',
     };
-    const containerClasses = cn('flex-1 bg-black/40 flex', placementClasses[placement], containerClassName, backdropClassName);
-    const contentClasses = cn('bg-background p-4 rounded-lg shadow-lg max-h-[90vh] w-full max-w-lg', placement === 'left' || placement === 'right' ? 'h-full max-h-none' : '', placement === 'bottom' || placement === 'top' ? 'max-w-none' : '', contentClassName);
+    // const containerClasses = cn(
+    //   'flex-1 bg-black/40 flex',
+    //   placementClasses[placement],
+    //   containerClassName,
+    //   backdropClassName,
+    // );
+    // const contentClasses = cn(
+    //   'bg-background p-4 rounded-lg shadow-lg max-h-[90vh] w-full max-w-lg',
+    //   placement === 'left' || placement === 'right' ? 'h-full max-h-none' : '',
+    //   placement === 'bottom' || placement === 'top' ? 'max-w-none' : '',
+    //   contentClassName,
+    // );
     const handleRequestClose = (e) => {
         onOpenChange?.(false);
         if (typeof restProps.onRequestClose === 'function') {
             restProps.onRequestClose?.(e);
         }
     };
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: open, animationType: "slide", transparent: true, onRequestClose: handleRequestClose, ...restProps, children: (0, jsx_runtime_1.jsx)(index_native_1.E, { className: containerClasses, style: { ...containerStyle, ...backdropStyle }, children: (0, jsx_runtime_1.jsx)(index_native_1.E, { ref: ref, className: contentClasses, style: contentStyle, children: children }) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: open, animationType: "slide", transparent: true, onRequestClose: handleRequestClose, ...restProps, children: (0, jsx_runtime_1.jsx)(index_native_1.E
+        // className={containerClasses}
+        , { 
+            // className={containerClasses}
+            style: { ...containerStyle, ...backdropStyle }, children: (0, jsx_runtime_1.jsx)(index_native_1.E, { ref: ref, 
+                // className={contentClasses}
+                style: contentStyle, children: children }) }) }));
 }
 exports.Dialog = D;

package/dist/cjs/components/d/d.web.js

@@ -4,10 +4,9 @@ exports.Dialog = void 0;
 exports.D = D;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_dom_1 = require("react-dom");
-const useCn_1 = require("../../hooks/useCn");
 const index_web_1 = require("../e/index.web");
 function D({ open, onOpenChange, placement = 'center', backdropClassName, backdropStyle, containerClassName, containerStyle, contentClassName, contentStyle, closeOnBackdropClick = true, children, ref, ...restProps }) {
-    const cn = (0, useCn_1.useCn)();
+    // const cn = useCn();
     if (typeof document === 'undefined')
         return null;
     if (!open)
@@ -26,13 +25,29 @@ function D({ open, onOpenChange, placement = 'center', backdropClassName, backdr
             onOpenChange?.(false);
         }
     };
-    const backdropClasses = cn('fixed inset-0 z-50 flex bg-black/40', placementClasses[placement], containerClassName, backdropClassName);
-    const contentClasses = cn('relative max-h-[90vh] w-full max-w-lg overflow-auto rounded-lg bg-background p-4 shadow-lg', placement === 'left' || placement === 'right' ? 'h-full max-h-none' : '', placement === 'bottom' || placement === 'top' ? 'max-w-none' : '', contentClassName);
-    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(index_web_1.E, { className: backdropClasses, role: "presentation", onClick: handleBackdropClick, style: {
+    // const backdropClasses = cn(
+    //   'fixed inset-0 z-50 flex bg-black/40',
+    //   placementClasses[placement],
+    //   containerClassName,
+    //   backdropClassName,
+    // );
+    // const contentClasses = cn(
+    //   'relative max-h-[90vh] w-full max-w-lg overflow-auto rounded-lg bg-background p-4 shadow-lg',
+    //   placement === 'left' || placement === 'right' ? 'h-full max-h-none' : '',
+    //   placement === 'bottom' || placement === 'top' ? 'max-w-none' : '',
+    //   contentClassName,
+    // );
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(index_web_1.E
+    // className={backdropClasses}
+    , { 
+        // className={backdropClasses}
+        role: "presentation", onClick: handleBackdropClick, style: {
             ...(containerStyle || {}),
             ...(backdropStyle || {}),
         }, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, 
             // biome-ignore lint/a11y/useSemanticElements: <explanation>
-            role: "dialog", "aria-modal": "true", className: contentClasses, style: contentStyle, ...restProps, children: children }) }), document.body);
+            role: "dialog", "aria-modal": "true", 
+            // className={contentClasses}
+            style: contentStyle, ...restProps, children: children }) }), document.body);
 }
 exports.Dialog = D;

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

@@ -4,13 +4,12 @@ exports.Element = void 0;
 exports.E = E;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_1 = require("react-native");
-const useCn_1 = require("../../hooks/useCn");
 const index_native_1 = require("../../index.native");
 const index_native_2 = require("../t/index.native");
 function E({ className, children, ref, style, ...restProps }) {
-    const cn = (0, useCn_1.useCn)();
+    // const cn = useCn();
     const { getStyles } = (0, index_native_1.useStyles)();
     const { disabled, eventHandlers } = (0, index_native_1.useInteractiveHandlers)(restProps);
-    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, className: cn(className), ...eventHandlers, ...getStyles({ disabled, style }), children: typeof children === 'string' ? (0, jsx_runtime_1.jsx)(index_native_2.T, { children: children }) : children }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, ...eventHandlers, ...getStyles({ disabled, style }), children: typeof children === 'string' ? (0, jsx_runtime_1.jsx)(index_native_2.T, { children: children }) : children }));
 }
 exports.Element = E;

package/dist/cjs/components/e/e.web.js

@@ -3,13 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Element = void 0;
 exports.E = E;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const useCn_1 = require("../../hooks/useCn");
 const index_web_1 = require("../../index.web");
 function E({ as = 'div', className, children, ref, role, style, ...restProps }) {
-    const cn = (0, useCn_1.useCn)();
+    // const cn = 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(className), role: role, ...restProps, ...eventHandlers, ...getStyles({ disabled, style }), children: children }));
+    return ((0, jsx_runtime_1.jsx)(Comp, { ref: ref, 
+        // className={cn(className)}
+        role: role, ...restProps, ...eventHandlers, ...getStyles({ disabled, style }), children: children }));
 }
 exports.Element = E;

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

@@ -4,13 +4,12 @@ exports.Input = void 0;
 exports.I = I;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_1 = require("react-native");
-const useCn_1 = require("../../hooks/useCn");
 const useOnChange_1 = require("../../hooks/useOnChange");
 const index_native_1 = require("../../index.native");
 const useIUtils_1 = require("./useIUtils");
 function I({ className, value, defaultValue, placeholder, onChange, onChangeValue, type, inputMode, keyboardType, editable, ref, name, style, ...restProps }) {
     const { treatTypeModeAndKeyboardType } = (0, useIUtils_1.useIUtils)();
-    const cn = (0, useCn_1.useCn)();
+    // const cn = useCn();
     const { onChange: handleOnChange } = (0, useOnChange_1.useOnChange)({
         onChange,
         onChangeValue,
@@ -23,6 +22,8 @@ function I({ className, value, defaultValue, placeholder, onChange, onChangeValu
         keyboardType,
         type,
     });
-    return ((0, jsx_runtime_1.jsx)(react_native_1.TextInput, { ref: ref, className: cn(!effectiveEditable && 'opacity-60', className), value: value?.toString(), defaultValue: defaultValue?.toString(), placeholder: placeholder, onChange: handleOnChange, secureTextEntry: masterInputType === 'password', keyboardType: masterInputKeyboardType, editable: effectiveEditable, ...restProps, ...eventHandlers, ...getStyles({ disabled, style }) }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.TextInput, { ref: ref, 
+        // className={cn(!effectiveEditable && 'opacity-60', className)}
+        value: value?.toString(), defaultValue: defaultValue?.toString(), placeholder: placeholder, onChange: handleOnChange, secureTextEntry: masterInputType === 'password', keyboardType: masterInputKeyboardType, editable: effectiveEditable, ...restProps, ...eventHandlers, ...getStyles({ disabled, style }) }));
 }
 exports.Input = I;

package/dist/cjs/components/i/i.web.js

@@ -3,13 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = void 0;
 exports.I = I;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const useCn_1 = require("../../hooks/useCn");
 const useOnChange_1 = require("../../hooks/useOnChange");
 const index_web_1 = require("../../index.web");
 const useIUtils_1 = require("./useIUtils");
 function I({ className, value, defaultValue, placeholder, onChange, onChangeValue, type, inputMode, keyboardType, editable, ref, style, ...restProps }) {
     const { treatTypeModeAndKeyboardType } = (0, useIUtils_1.useIUtils)();
-    const cn = (0, useCn_1.useCn)();
+    // const cn = useCn();
     const { onChange: handleOnChange } = (0, useOnChange_1.useOnChange)({
         onChange,
         onChangeValue,
@@ -22,6 +21,12 @@ function I({ className, value, defaultValue, placeholder, onChange, onChangeValu
         keyboardType,
         type,
     });
-    return ((0, jsx_runtime_1.jsx)("input", { ref: ref, type: masterInputType, inputMode: masterInputMode, className: cn('outline-none', effectiveDisabled && 'opacity-60 cursor-not-allowed', className), value: value?.toString(), defaultValue: defaultValue?.toString(), placeholder: placeholder, onChange: handleOnChange, disabled: effectiveDisabled, ...restProps, ...eventHandlers, ...getStyles({ disabled, style }) }));
+    return ((0, jsx_runtime_1.jsx)("input", { ref: ref, type: masterInputType, inputMode: masterInputMode, 
+        // className={cn(
+        //   'outline-none',
+        //   effectiveDisabled && 'opacity-60 cursor-not-allowed',
+        //   className,
+        // )}
+        value: value?.toString(), defaultValue: defaultValue?.toString(), placeholder: placeholder, onChange: handleOnChange, disabled: effectiveDisabled, ...restProps, ...eventHandlers, ...getStyles({ disabled, style }) }));
 }
 exports.Input = I;

package/dist/cjs/components/l/l.web.js

@@ -3,13 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Link = void 0;
 exports.L = L;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const useCn_1 = require("../../hooks/useCn");
 const index_web_1 = require("../../index.web");
 function L({ className, children, to, href, preventDefault, ref, style, ...restProps }) {
-    const cn = (0, useCn_1.useCn)();
+    // const cn = useCn();
     const { disabled, eventHandlers } = (0, index_web_1.useInteractiveHandlers)(restProps);
     const { getStyles } = (0, index_web_1.useStyles)();
     const resolvedHref = href ?? to ?? '#';
-    return ((0, jsx_runtime_1.jsx)("a", { ref: ref, href: resolvedHref, className: cn('cursor-pointer', className), ...restProps, ...eventHandlers, ...getStyles({ disabled, style }), children: children }));
+    return ((0, jsx_runtime_1.jsx)("a", { ref: ref, href: resolvedHref, ...restProps, ...eventHandlers, ...getStyles({ disabled, style }), children: children }));
 }
 exports.Link = L;

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

@@ -4,9 +4,10 @@ exports.Overflow = void 0;
 exports.O = O;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_1 = require("react-native");
-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 }));
+    // const cn = 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/cjs/components/o/o.web.js

@@ -3,13 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Overflow = void 0;
 exports.O = O;
 const jsx_runtime_1 = require("react/jsx-runtime");
-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 cn = 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), ...restProps, ...eventHandlers, ...getStyles({ disabled, style }), children: children }));
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, ...restProps, ...eventHandlers, ...getStyles({ disabled, style }), children: children }));
 }
 exports.Overflow = O;

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

@@ -4,10 +4,11 @@ exports.Picture = void 0;
 exports.P = P;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_1 = require("react-native");
-const useCn_1 = require("../../hooks/useCn");
 function P({ className, src, source, ref, ...restProps }) {
-    const cn = (0, useCn_1.useCn)();
+    // const cn = 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, ...restProps }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Image, { ref: ref, 
+        // className={cn(className)}
+        source: finalSource, ...restProps }));
 }
 exports.Picture = P;

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

@@ -3,14 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Picture = void 0;
 exports.P = P;
 const jsx_runtime_1 = require("react/jsx-runtime");
-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 cn = 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), src: src ?? source, ...restProps, ...eventHandlers, ...getStyles({ disabled, style }) }));
+    (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/cjs/components/s/s.native.js

@@ -3,8 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.S = S;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_safe_area_context_1 = require("react-native-safe-area-context");
-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 }));
+    // const cn = useCn();
+    return ((0, jsx_runtime_1.jsx)(react_native_safe_area_context_1.SafeAreaView, { ref: ref, ...restProps, children: children }));
 }

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

@@ -4,12 +4,11 @@ exports.Text = void 0;
 exports.T = T;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_1 = require("react-native");
-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 cn = 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 }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, ...restProps, ...eventHandlers, ...getStyles({ disabled, style }), children: children }));
 }
 exports.Text = T;

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

@@ -3,13 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Text = void 0;
 exports.T = T;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const useCn_1 = require("../../hooks/useCn");
 const index_web_1 = require("../../index.web");
 function T({ as = 'span', className, children, ref, style, ...restProps }) {
-    const cn = (0, useCn_1.useCn)();
+    // const cn = 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), ...restProps, ...eventHandlers, ...getStyles({ disabled, style }), children: children }));
+    return ((0, jsx_runtime_1.jsx)(Comp, { ref: ref, ...restProps, ...eventHandlers, ...getStyles({ disabled, style }), children: children }));
 }
 exports.Text = T;

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

@@ -4,10 +4,14 @@ 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, ref, style, testId, ...restProps }) {
-    const cn = useCn();
+    // const cn = useCn();
     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, testID: testId, ...eventHandlers, ...getStylesWithInteraction({ disabled, style }), children: _jsx(E, { className: cn(disabled && 'opacity-60', className), style: style, ...restProps, 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)}
+        , { 
+            // className={cn(disabled && 'opacity-60', className)}
+            style: style, ...restProps, children: children }) }));
 }
 export const Action = A;

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

@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 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 cn = useCn();
     const { getStyles } = useStyles();
     const { disabled, eventHandlers } = useInteractiveHandlers(restProps);
     const isDisabled = Boolean(disabled || loading);
-    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 }));
+    return (_jsx("button", { ref: ref, type: "button", "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;

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

@@ -3,7 +3,7 @@ import { Modal } from 'react-native';
 import { useCn } from '../../hooks/useCn';
 import { E } from '../e/index.native';
 export function D({ open, onOpenChange, placement = 'center', backdropClassName, backdropStyle, containerClassName, containerStyle, contentClassName, contentStyle, children, ref, ...restProps }) {
-    const cn = useCn();
+    // const cn = useCn();
     const placementClasses = {
         center: 'items-center justify-center',
         top: 'items-start justify-center',
@@ -11,14 +11,30 @@ export function D({ open, onOpenChange, placement = 'center', backdropClassName,
         left: 'items-stretch justify-start',
         right: 'items-stretch justify-end',
     };
-    const containerClasses = cn('flex-1 bg-black/40 flex', placementClasses[placement], containerClassName, backdropClassName);
-    const contentClasses = cn('bg-background p-4 rounded-lg shadow-lg max-h-[90vh] w-full max-w-lg', placement === 'left' || placement === 'right' ? 'h-full max-h-none' : '', placement === 'bottom' || placement === 'top' ? 'max-w-none' : '', contentClassName);
+    // const containerClasses = cn(
+    //   'flex-1 bg-black/40 flex',
+    //   placementClasses[placement],
+    //   containerClassName,
+    //   backdropClassName,
+    // );
+    // const contentClasses = cn(
+    //   'bg-background p-4 rounded-lg shadow-lg max-h-[90vh] w-full max-w-lg',
+    //   placement === 'left' || placement === 'right' ? 'h-full max-h-none' : '',
+    //   placement === 'bottom' || placement === 'top' ? 'max-w-none' : '',
+    //   contentClassName,
+    // );
     const handleRequestClose = (e) => {
         onOpenChange?.(false);
         if (typeof restProps.onRequestClose === 'function') {
             restProps.onRequestClose?.(e);
         }
     };
-    return (_jsx(Modal, { visible: open, animationType: "slide", transparent: true, onRequestClose: handleRequestClose, ...restProps, children: _jsx(E, { className: containerClasses, style: { ...containerStyle, ...backdropStyle }, children: _jsx(E, { ref: ref, className: contentClasses, style: contentStyle, children: children }) }) }));
+    return (_jsx(Modal, { visible: open, animationType: "slide", transparent: true, onRequestClose: handleRequestClose, ...restProps, children: _jsx(E
+        // className={containerClasses}
+        , { 
+            // className={containerClasses}
+            style: { ...containerStyle, ...backdropStyle }, children: _jsx(E, { ref: ref, 
+                // className={contentClasses}
+                style: contentStyle, children: children }) }) }));
 }
 export const Dialog = D;

package/dist/esm/components/d/d.web.js

@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom';
 import { useCn } from '../../hooks/useCn';
 import { E } from '../e/index.web';
 export function D({ open, onOpenChange, placement = 'center', backdropClassName, backdropStyle, containerClassName, containerStyle, contentClassName, contentStyle, closeOnBackdropClick = true, children, ref, ...restProps }) {
-    const cn = useCn();
+    // const cn = useCn();
     if (typeof document === 'undefined')
         return null;
     if (!open)
@@ -22,13 +22,29 @@ export function D({ open, onOpenChange, placement = 'center', backdropClassName,
             onOpenChange?.(false);
         }
     };
-    const backdropClasses = cn('fixed inset-0 z-50 flex bg-black/40', placementClasses[placement], containerClassName, backdropClassName);
-    const contentClasses = cn('relative max-h-[90vh] w-full max-w-lg overflow-auto rounded-lg bg-background p-4 shadow-lg', placement === 'left' || placement === 'right' ? 'h-full max-h-none' : '', placement === 'bottom' || placement === 'top' ? 'max-w-none' : '', contentClassName);
-    return createPortal(_jsx(E, { className: backdropClasses, role: "presentation", onClick: handleBackdropClick, style: {
+    // const backdropClasses = cn(
+    //   'fixed inset-0 z-50 flex bg-black/40',
+    //   placementClasses[placement],
+    //   containerClassName,
+    //   backdropClassName,
+    // );
+    // const contentClasses = cn(
+    //   'relative max-h-[90vh] w-full max-w-lg overflow-auto rounded-lg bg-background p-4 shadow-lg',
+    //   placement === 'left' || placement === 'right' ? 'h-full max-h-none' : '',
+    //   placement === 'bottom' || placement === 'top' ? 'max-w-none' : '',
+    //   contentClassName,
+    // );
+    return createPortal(_jsx(E
+    // className={backdropClasses}
+    , { 
+        // className={backdropClasses}
+        role: "presentation", onClick: handleBackdropClick, style: {
             ...(containerStyle || {}),
             ...(backdropStyle || {}),
         }, children: _jsx("div", { ref: ref, 
             // biome-ignore lint/a11y/useSemanticElements: <explanation>
-            role: "dialog", "aria-modal": "true", className: contentClasses, style: contentStyle, ...restProps, children: children }) }), document.body);
+            role: "dialog", "aria-modal": "true", 
+            // className={contentClasses}
+            style: contentStyle, ...restProps, children: children }) }), document.body);
 }
 export const Dialog = D;

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

@@ -4,9 +4,9 @@ import { useCn } from '../../hooks/useCn';
 import { useInteractiveHandlers, useStyles } from '../../index.native';
 import { T } from '../t/index.native';
 export function E({ className, children, ref, style, ...restProps }) {
-    const cn = useCn();
+    // const cn = useCn();
     const { getStyles } = useStyles();
     const { disabled, eventHandlers } = useInteractiveHandlers(restProps);
-    return (_jsx(View, { ref: ref, className: cn(className), ...eventHandlers, ...getStyles({ disabled, style }), children: typeof children === 'string' ? _jsx(T, { children: children }) : children }));
+    return (_jsx(View, { ref: ref, ...eventHandlers, ...getStyles({ disabled, style }), children: typeof children === 'string' ? _jsx(T, { children: children }) : children }));
 }
 export const Element = E;

package/dist/esm/components/e/e.web.js

@@ -2,10 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useCn } from '../../hooks/useCn';
 import { useInteractiveHandlers, useStyles } from '../../index.web';
 export function E({ as = 'div', className, children, ref, role, style, ...restProps }) {
-    const cn = useCn();
+    // const cn = useCn();
     const { disabled, eventHandlers } = useInteractiveHandlers(restProps);
     const { getStyles } = useStyles();
     const Comp = as;
-    return (_jsx(Comp, { ref: ref, className: cn(className), role: role, ...restProps, ...eventHandlers, ...getStyles({ disabled, style }), children: children }));
+    return (_jsx(Comp, { ref: ref, 
+        // className={cn(className)}
+        role: role, ...restProps, ...eventHandlers, ...getStyles({ disabled, style }), children: children }));
 }
 export const Element = E;

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

@@ -6,7 +6,7 @@ import { useInteractiveHandlers, useStyles } from '../../index.native';
 import { useIUtils } from './useIUtils';
 export function I({ className, value, defaultValue, placeholder, onChange, onChangeValue, type, inputMode, keyboardType, editable, ref, name, style, ...restProps }) {
     const { treatTypeModeAndKeyboardType } = useIUtils();
-    const cn = useCn();
+    // const cn = useCn();
     const { onChange: handleOnChange } = useOnChange({
         onChange,
         onChangeValue,
@@ -19,6 +19,8 @@ export function I({ className, value, defaultValue, placeholder, onChange, onCha
         keyboardType,
         type,
     });
-    return (_jsx(TextInput, { ref: ref, className: cn(!effectiveEditable && 'opacity-60', className), value: value?.toString(), defaultValue: defaultValue?.toString(), placeholder: placeholder, onChange: handleOnChange, secureTextEntry: masterInputType === 'password', keyboardType: masterInputKeyboardType, editable: effectiveEditable, ...restProps, ...eventHandlers, ...getStyles({ disabled, style }) }));
+    return (_jsx(TextInput, { ref: ref, 
+        // className={cn(!effectiveEditable && 'opacity-60', className)}
+        value: value?.toString(), defaultValue: defaultValue?.toString(), placeholder: placeholder, onChange: handleOnChange, secureTextEntry: masterInputType === 'password', keyboardType: masterInputKeyboardType, editable: effectiveEditable, ...restProps, ...eventHandlers, ...getStyles({ disabled, style }) }));
 }
 export const Input = I;

package/dist/esm/components/i/i.web.js

@@ -5,7 +5,7 @@ import { useInteractiveHandlers, useStyles } from '../../index.web';
 import { useIUtils } from './useIUtils';
 export function I({ className, value, defaultValue, placeholder, onChange, onChangeValue, type, inputMode, keyboardType, editable, ref, style, ...restProps }) {
     const { treatTypeModeAndKeyboardType } = useIUtils();
-    const cn = useCn();
+    // const cn = useCn();
     const { onChange: handleOnChange } = useOnChange({
         onChange,
         onChangeValue,
@@ -18,6 +18,12 @@ export function I({ className, value, defaultValue, placeholder, onChange, onCha
         keyboardType,
         type,
     });
-    return (_jsx("input", { ref: ref, type: masterInputType, inputMode: masterInputMode, className: cn('outline-none', effectiveDisabled && 'opacity-60 cursor-not-allowed', className), value: value?.toString(), defaultValue: defaultValue?.toString(), placeholder: placeholder, onChange: handleOnChange, disabled: effectiveDisabled, ...restProps, ...eventHandlers, ...getStyles({ disabled, style }) }));
+    return (_jsx("input", { ref: ref, type: masterInputType, inputMode: masterInputMode, 
+        // className={cn(
+        //   'outline-none',
+        //   effectiveDisabled && 'opacity-60 cursor-not-allowed',
+        //   className,
+        // )}
+        value: value?.toString(), defaultValue: defaultValue?.toString(), placeholder: placeholder, onChange: handleOnChange, disabled: effectiveDisabled, ...restProps, ...eventHandlers, ...getStyles({ disabled, style }) }));
 }
 export const Input = I;

package/dist/esm/components/l/l.web.js

@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useCn } from '../../hooks/useCn';
 import { useInteractiveHandlers, useStyles } from '../../index.web';
 export function L({ className, children, to, href, preventDefault, ref, style, ...restProps }) {
-    const cn = useCn();
+    // const cn = useCn();
     const { disabled, eventHandlers } = useInteractiveHandlers(restProps);
     const { getStyles } = useStyles();
     const resolvedHref = href ?? to ?? '#';
-    return (_jsx("a", { ref: ref, href: resolvedHref, className: cn('cursor-pointer', className), ...restProps, ...eventHandlers, ...getStyles({ disabled, style }), children: children }));
+    return (_jsx("a", { ref: ref, href: resolvedHref, ...restProps, ...eventHandlers, ...getStyles({ disabled, style }), children: children }));
 }
 export const Link = L;

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

@@ -2,7 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ScrollView } from 'react-native';
 import { useCn } from '../../hooks/useCn';
 export function O({ className, children, horizontal, ref, ...restProps }) {
-    const cn = useCn();
-    return (_jsx(ScrollView, { ref: ref, className: cn(className), horizontal: horizontal, ...restProps, children: children }));
+    // const cn = useCn();
+    return (_jsx(ScrollView, { ref: ref, 
+        // className={cn(className)}
+        horizontal: horizontal, ...restProps, children: children }));
 }
 export const Overflow = O;

package/dist/esm/components/o/o.web.js

@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useCn } from '../../hooks/useCn';
 import { useInteractiveHandlers, useStyles } from '../../index.web';
 export function O({ className, children, horizontal, ref, style, ...restProps }) {
-    const cn = useCn();
+    // const cn = useCn();
     const { disabled, eventHandlers } = useInteractiveHandlers(restProps);
     const { getStyles } = useStyles();
     const overflowClass = horizontal ? 'overflow-x-auto' : 'overflow-y-auto';
-    return (_jsx("div", { ref: ref, className: cn(overflowClass, className), ...restProps, ...eventHandlers, ...getStyles({ disabled, style }), children: children }));
+    return (_jsx("div", { ref: ref, ...restProps, ...eventHandlers, ...getStyles({ disabled, style }), children: children }));
 }
 export const Overflow = O;

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

@@ -2,8 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Image } from 'react-native';
 import { useCn } from '../../hooks/useCn';
 export function P({ className, src, source, ref, ...restProps }) {
-    const cn = useCn();
+    // const cn = useCn();
     const finalSource = src != null ? { uri: src } : source;
-    return (_jsx(Image, { ref: ref, className: cn(className), source: finalSource, ...restProps }));
+    return (_jsx(Image, { ref: ref, 
+        // className={cn(className)}
+        source: finalSource, ...restProps }));
 }
 export const Picture = P;