@react-xp/aeiou 0.1.0-rc.1 → 1.0.0-beta.1

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

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInteractiveState = useInteractiveState;
+const react_1 = require("react");
+function useInteractiveState({ disabled, onBlur, onClick, onFocus, onPress, onIn, onOut, } = {}) {
+    const [interactiveState, setInteractiveState] = (0, react_1.useState)('idle');
+    const dataAttrs = {
+        'data-state': interactiveState,
+        'data-disabled': disabled ? '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;
+            }
+            onBlur?.(e);
+            setInteractiveState('idle');
+        },
+        onClick: (e) => {
+            if (disabled) {
+                return;
+            }
+            if (onClick) {
+                onClick?.(e);
+                return;
+            }
+            onPress?.(e);
+        },
+        onFocus: (e) => {
+            if (disabled) {
+                return;
+            }
+            onFocus?.(e);
+            setInteractiveState('focused');
+        },
+        onMouseDown: (e) => {
+            if (disabled) {
+                return;
+            }
+            setInteractiveState('pressed');
+        },
+        onMouseEnter: (e) => {
+            if (disabled) {
+                return;
+            }
+            onIn?.(e);
+            setInteractiveState('hovered');
+        },
+        onMouseLeave: (e) => {
+            if (disabled) {
+                return;
+            }
+            console.log('[DEBUG] onMouseLeave', typeof onOut, e);
+            onOut?.(e);
+            setInteractiveState('idle');
+        },
+        onMouseUp: (e) => {
+            if (disabled) {
+                return;
+            }
+            console.log('[DEBUG] onMouseUp', e);
+            setInteractiveState('idle');
+        },
+    };
+    return {
+        dataAttrs,
+        disabled,
+        eventHandlers,
+        interactiveState,
+    };
+}

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOnChange = void 0;
+const react_1 = require("react");
+const useOnChange = ({ onChange, onChangeValue, }) => {
+    return (0, react_1.useMemo)(() => ({
+        onChange: (event) => {
+            if (onChange) {
+                onChange(event);
+                return;
+            }
+            if (onChangeValue) {
+                onChangeValue(event?.target?.value);
+            }
+        },
+    }), [onChange, onChangeValue]);
+};
+exports.useOnChange = useOnChange;

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

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useProps = void 0;
+const react_1 = __importDefault(require("react"));
+const useProps = () => {
+    const handleOmit = react_1.default.useCallback((obj = {}, keys = []) => {
+        if (!obj) {
+            return {
+                props: {},
+                restProps: {},
+            };
+        }
+        // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+        const result = {};
+        // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+        const nonUsedProps = {};
+        for (const key of Object.keys(obj)) {
+            if (!keys.includes(key)) {
+                result[key] = obj[key];
+            }
+            else {
+                nonUsedProps[key] = obj[key];
+            }
+        }
+        return {
+            props: result,
+            restProps: nonUsedProps,
+        };
+    }, []);
+    const handlePick = react_1.default.useCallback((obj = {}, keys = []) => {
+        if (!obj) {
+            return {
+                props: {},
+                restProps: {},
+            };
+        }
+        // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+        const result = {};
+        // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+        const nonUsedProps = {};
+        for (const key of Object.keys(obj)) {
+            if (keys.includes(key)) {
+                result[key] = obj[key];
+            }
+            else {
+                nonUsedProps[key] = obj[key];
+            }
+        }
+        return {
+            props: result /*Pick<
+              TObject,
+              Exclude<keyof TObject, Exclude<keyof TObject, TKeys>>
+            >*/,
+            restProps: nonUsedProps,
+        };
+    }, []);
+    return {
+        getPropKey: (obj = {}) => handlePick(obj, ['key']),
+        omitProps: handleOmit,
+        pickProps: handlePick,
+    };
+};
+exports.useProps = useProps;

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.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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/cjs/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components/index.web"), exports);
+__exportStar(require("./hooks/index.web"), exports);
+__exportStar(require("./types"), exports);

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

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components/index.native"), exports);
+__exportStar(require("./hooks/index.native"), exports);
+__exportStar(require("./types"), exports);

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

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components/index.web"), exports);
+__exportStar(require("./hooks/index.web"), exports);
+__exportStar(require("./types"), exports);

package/dist/native/cjs/types/base.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./base"), exports);

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { Pressable } from 'react-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, ref, style, testId, ...restProps }) {
+    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 }) }));
+}
+export const Action = A;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "nativewind/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 { 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 }));
+}
+export const Action = A;

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

@@ -0,0 +1 @@
+export * from './a.native';

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

@@ -0,0 +1 @@
+export * from './a.web';

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+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 placementClasses = {
+        center: 'items-center justify-center',
+        top: 'items-start justify-center',
+        bottom: 'items-end justify-center',
+        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 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 }) }) }));
+}
+export const Dialog = D;

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+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();
+    if (typeof document === 'undefined')
+        return null;
+    if (!open)
+        return null;
+    const placementClasses = {
+        center: 'items-center justify-center',
+        top: 'items-start justify-center',
+        bottom: 'items-end justify-center',
+        left: 'items-stretch justify-start',
+        right: 'items-stretch justify-end',
+    };
+    const handleBackdropClick = (event) => {
+        if (event.target !== event.currentTarget)
+            return;
+        if (closeOnBackdropClick) {
+            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: {
+            ...(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);
+}
+export const Dialog = D;

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

@@ -0,0 +1 @@
+export * from './d.native';

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

@@ -0,0 +1 @@
+export * from './d.web';

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { View } from 'react-native';
+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 { 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 }));
+}
+export const Element = E;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "nativewind/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 { 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 }));
+}
+export const Element = E;

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

@@ -0,0 +1 @@
+export * from './e.native';

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

@@ -0,0 +1 @@
+export * from './e.web';

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { TextInput } from 'react-native';
+import { useCn } from '../../hooks/useCn';
+import { useOnChange } from '../../hooks/useOnChange';
+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 { onChange: handleOnChange } = useOnChange({
+        onChange,
+        onChangeValue,
+    });
+    const { disabled, eventHandlers } = useInteractiveHandlers(restProps);
+    const { getStyles } = useStyles();
+    const effectiveEditable = editable ?? !disabled;
+    const { masterInputType, masterInputKeyboardType } = treatTypeModeAndKeyboardType({
+        inputMode,
+        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 }) }));
+}
+export const Input = I;

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { useCn } from '../../hooks/useCn';
+import { useOnChange } from '../../hooks/useOnChange';
+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 { onChange: handleOnChange } = useOnChange({
+        onChange,
+        onChangeValue,
+    });
+    const { disabled, eventHandlers } = useInteractiveHandlers(restProps);
+    const { getStyles } = useStyles();
+    const effectiveDisabled = disabled || editable === false;
+    const { masterInputType, masterInputMode } = treatTypeModeAndKeyboardType({
+        inputMode,
+        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 }) }));
+}
+export const Input = I;

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

@@ -0,0 +1 @@
+export * from './i.native';

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

@@ -0,0 +1 @@
+export * from './i.web';