@xaui/native 0.1.4 → 0.2.0

package/dist/fab-menu/index.cjs

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var _chunkHYL4EU3Ycjs = require('../chunk-HYL4EU3Y.cjs');
-require('../chunk-FBTBWI3P.cjs');
+var _chunkUGEINZM7cjs = require('../chunk-UGEINZM7.cjs');
+require('../chunk-YIEUN3G5.cjs');
 require('../chunk-56RPWZD2.cjs');
 
 
 
-var _chunkRZJFCDFScjs = require('../chunk-RZJFCDFS.cjs');
+var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
 
 // src/components/fab-menu/fab-menu.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
@@ -80,12 +80,12 @@ function useFabMenuState(controlledExpanded, onToggle) {
   return { expanded, toggle, close };
 }
 function useFabMenuItemStyles(themeColor) {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   const itemStyles = _react.useMemo.call(void 0, () => {
     const chipStyles = {
-      backgroundColor: colorScheme.background,
+      backgroundColor: colorScheme.container,
       borderRadius: theme.borderRadius.full,
       color: colorScheme.main,
       fontSize: theme.fontSizes.md
@@ -96,7 +96,7 @@ function useFabMenuItemStyles(themeColor) {
   return itemStyles;
 }
 function useFabMenuOverlayColor() {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   return _react.useMemo.call(void 0, () => {
     return theme.mode === "dark" ? "rgba(0, 0, 0, 0.5)" : "rgba(0, 0, 0, 0.3)";
   }, [theme.mode]);
@@ -209,7 +209,7 @@ var FabMenu = ({
       }
     },
     /* @__PURE__ */ _react2.default.createElement(
-      _chunkHYL4EU3Ycjs.Fab,
+      _chunkUGEINZM7cjs.Fab,
       {
         icon: currentIcon,
         label,
@@ -259,7 +259,7 @@ var FabMenu = ({
       })
     );
   }));
-  return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.container, _optionalChain([customAppearance, 'optionalAccess', _11 => _11.container])] }, isPortalVisible && /* @__PURE__ */ _react2.default.createElement(_chunkRZJFCDFScjs.Portal, null, /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.portalRoot }, showOverlay && /* @__PURE__ */ _react2.default.createElement(
+  return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.container, _optionalChain([customAppearance, 'optionalAccess', _11 => _11.container])] }, isPortalVisible && /* @__PURE__ */ _react2.default.createElement(_chunk7UFBLUMVcjs.Portal, null, /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.portalRoot }, showOverlay && /* @__PURE__ */ _react2.default.createElement(
     _reactnative.Animated.View,
     {
       style: [

package/dist/fab-menu/index.js

@@ -1,12 +1,12 @@
 import {
   Fab
-} from "../chunk-WGWXGIZ3.js";
-import "../chunk-J3BOFXIH.js";
+} from "../chunk-UU4HHBDN.js";
+import "../chunk-VSZEXOUN.js";
 import "../chunk-SHBDANQN.js";
 import {
   Portal,
   useXUITheme
-} from "../chunk-LVNBYERF.js";
+} from "../chunk-RBSA4NH4.js";
 
 // src/components/fab-menu/fab-menu.tsx
 import React from "react";
@@ -85,7 +85,7 @@ function useFabMenuItemStyles(themeColor) {
   const colorScheme = theme.colors[safeThemeColor];
   const itemStyles = useMemo(() => {
     const chipStyles = {
-      backgroundColor: colorScheme.background,
+      backgroundColor: colorScheme.container,
       borderRadius: theme.borderRadius.full,
       color: colorScheme.main,
       fontSize: theme.fontSizes.md

package/dist/feature-discovery/index.cjs

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }require('../chunk-56RPWZD2.cjs');
 
 
-var _chunkRZJFCDFScjs = require('../chunk-RZJFCDFS.cjs');
+var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
 
 // src/components/feature-discovery/feature-discovery.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
@@ -235,7 +235,7 @@ var useFeatureDiscoveryGeometry = (target, viewportWidth, viewportHeight, spotli
   };
 };
 var useFeatureDiscoveryTheme = (themeColor, overlayColor) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const colorScheme = theme.colors[_core.getSafeThemeColor.call(void 0, themeColor)];
   const resolvedOverlayColor = _react.useMemo.call(void 0, 
     () => _nullishCoalesce(overlayColor, () => ( _core.withOpacity.call(void 0, theme.colors.foreground, 0.42))),
@@ -421,7 +421,7 @@ var FeatureDiscovery = ({
         },
         /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.messageHeader }, /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.messageTitleWrapper }, renderContent(title, [
           styles.title,
-          { color: colorScheme.foreground },
+          { color: colorScheme.onMain },
           { textAlign: isTargetOnLeft ? "left" : "right" },
           _optionalChain([customAppearance, 'optionalAccess', _8 => _8.title])
         ])), /* @__PURE__ */ _react2.default.createElement(
@@ -431,11 +431,11 @@ var FeatureDiscovery = ({
             style: styles.closeButton,
             accessibilityRole: "button"
           },
-          /* @__PURE__ */ _react2.default.createElement(_reactnative.Text, { style: [styles.closeIcon, { color: colorScheme.foreground }] }, "\u2715")
+          /* @__PURE__ */ _react2.default.createElement(_reactnative.Text, { style: [styles.closeIcon, { color: colorScheme.onMain }] }, "\u2715")
         )),
         description ? renderContent(description, [
           styles.description,
-          { color: _core.withOpacity.call(void 0, colorScheme.foreground, 0.9) },
+          { color: _core.withOpacity.call(void 0, colorScheme.onMain, 0.9) },
           { textAlign: isTargetOnLeft ? "left" : "right" },
           _optionalChain([customAppearance, 'optionalAccess', _9 => _9.description])
         ]) : null,
@@ -451,7 +451,7 @@ var FeatureDiscovery = ({
           },
           renderContent(actionText, [
             styles.actionText,
-            { color: colorScheme.foreground },
+            { color: colorScheme.onMain },
             _optionalChain([customAppearance, 'optionalAccess', _10 => _10.actionText])
           ])
         ) : null

package/dist/feature-discovery/index.js

@@ -1,7 +1,7 @@
 import "../chunk-SHBDANQN.js";
 import {
   useXUITheme
-} from "../chunk-LVNBYERF.js";
+} from "../chunk-RBSA4NH4.js";
 
 // src/components/feature-discovery/feature-discovery.tsx
 import React, { useEffect } from "react";
@@ -421,7 +421,7 @@ var FeatureDiscovery = ({
         },
         /* @__PURE__ */ React.createElement(View, { style: styles.messageHeader }, /* @__PURE__ */ React.createElement(View, { style: styles.messageTitleWrapper }, renderContent(title, [
           styles.title,
-          { color: colorScheme.foreground },
+          { color: colorScheme.onMain },
           { textAlign: isTargetOnLeft ? "left" : "right" },
           customAppearance?.title
         ])), /* @__PURE__ */ React.createElement(
@@ -431,11 +431,11 @@ var FeatureDiscovery = ({
             style: styles.closeButton,
             accessibilityRole: "button"
           },
-          /* @__PURE__ */ React.createElement(Text, { style: [styles.closeIcon, { color: colorScheme.foreground }] }, "\u2715")
+          /* @__PURE__ */ React.createElement(Text, { style: [styles.closeIcon, { color: colorScheme.onMain }] }, "\u2715")
         )),
         description ? renderContent(description, [
           styles.description,
-          { color: withOpacity2(colorScheme.foreground, 0.9) },
+          { color: withOpacity2(colorScheme.onMain, 0.9) },
           { textAlign: isTargetOnLeft ? "left" : "right" },
           customAppearance?.description
         ]) : null,
@@ -451,7 +451,7 @@ var FeatureDiscovery = ({
           },
           renderContent(actionText, [
             styles.actionText,
-            { color: colorScheme.foreground },
+            { color: colorScheme.onMain },
             customAppearance?.actionText
           ])
         ) : null

package/dist/indicator/index.cjs

@@ -1,8 +1,8 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkFBTBWI3Pcjs = require('../chunk-FBTBWI3P.cjs');
+var _chunkYIEUN3G5cjs = require('../chunk-YIEUN3G5.cjs');
 require('../chunk-56RPWZD2.cjs');
-require('../chunk-RZJFCDFS.cjs');
+require('../chunk-7UFBLUMV.cjs');
 
 
-exports.ActivityIndicator = _chunkFBTBWI3Pcjs.ActivityIndicator;
+exports.ActivityIndicator = _chunkYIEUN3G5cjs.ActivityIndicator;

package/dist/indicator/index.js

@@ -1,8 +1,8 @@
 import {
   ActivityIndicator
-} from "../chunk-J3BOFXIH.js";
+} from "../chunk-VSZEXOUN.js";
 import "../chunk-SHBDANQN.js";
-import "../chunk-LVNBYERF.js";
+import "../chunk-RBSA4NH4.js";
 export {
   ActivityIndicator
 };

package/dist/input/index.cjs

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }require('../chunk-56RPWZD2.cjs');
 
 
-var _chunkRZJFCDFScjs = require('../chunk-RZJFCDFS.cjs');
+var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
 
 // src/components/input/input.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
@@ -18,7 +18,7 @@ var _icons = require('@xaui/icons');
 
 var _core = require('@xaui/core');
 var useTextInputSizeStyles = (size) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   return _react.useMemo.call(void 0, () => {
     const sizeMap = {
       sm: {
@@ -53,7 +53,7 @@ var useTextInputSizeStyles = (size) => {
   }, [size, theme]);
 };
 var useTextInputRadiusStyles = (radius) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   return _react.useMemo.call(void 0, () => {
     if (radius === "full") {
       return { borderRadius: theme.borderRadius.full };
@@ -68,7 +68,7 @@ var useTextInputVariantStyles = ({
   isInvalid,
   isDisabled
 }) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   return _react.useMemo.call(void 0, () => {
@@ -108,10 +108,9 @@ var useTextInputVariantStyles = ({
         helperColor
       };
     }
-    if (variant === "faded") {
+    if (variant === "light") {
       return {
         container: {
-          backgroundColor: _core.withOpacity.call(void 0, colorScheme.background, 0.68),
           borderColor: isFocused || isInvalid ? focusColor : "transparent",
           borderWidth: isFocused || isInvalid ? theme.borderWidth.md : 0
         },
@@ -125,7 +124,7 @@ var useTextInputVariantStyles = ({
     }
     return {
       container: {
-        backgroundColor: colorScheme.background,
+        backgroundColor: _core.withOpacity.call(void 0, colorScheme.container, 0.5),
         borderColor: isFocused || isInvalid ? _core.withPaletteNumber.call(void 0, focusColor, 500) : "transparent",
         borderWidth: isFocused || isInvalid ? theme.borderWidth.md : 0
       },
@@ -202,7 +201,7 @@ var TextInput = _react.forwardRef.call(void 0,
     startContent,
     endContent,
     themeColor = "primary",
-    variant = "flat",
+    variant = "colored",
     size = "md",
     radius = "md",
     isSecured = false,
@@ -810,6 +809,7 @@ DateTimeInput.displayName = "DateTimeInput";
 
 
 
+
 // src/components/input/otp-input.hook.ts
 
 var segmentSizeMap = {
@@ -933,6 +933,12 @@ var otpStyles = _reactnative.StyleSheet.create({
     height: 1,
     opacity: 0
   },
+  underline: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0
+  },
   label: {
     fontWeight: "500"
   },
@@ -963,6 +969,7 @@ var OTPSegment = ({
   onPress
 }) => {
   const borderAnimation = _react.useRef.call(void 0, new _reactnative.Animated.Value(0)).current;
+  const isUnderlined = variantStyles.container.borderBottomWidth !== void 0;
   _react.useEffect.call(void 0, () => {
     _reactnative.Animated.timing(borderAnimation, {
       toValue: isActive ? 1 : 0,
@@ -970,6 +977,11 @@ var OTPSegment = ({
       useNativeDriver: false
     }).start();
   }, [borderAnimation, isActive]);
+  const unfocusedLineColor = isUnderlined ? _core.withOpacity.call(void 0, variantStyles.focusedBorderColor, 0.35) : variantStyles.unfocusedBorderColor;
+  const animatedBorderColor = borderAnimation.interpolate({
+    inputRange: [0, 1],
+    outputRange: [unfocusedLineColor, variantStyles.focusedBorderColor]
+  });
   return /* @__PURE__ */ _react2.default.createElement(
     _reactnative.Pressable,
     {
@@ -989,15 +1001,9 @@ var OTPSegment = ({
             width: sizeStyles.width,
             height: sizeStyles.height,
             backgroundColor: variantStyles.container.backgroundColor,
-            borderWidth: _nullishCoalesce(variantStyles.container.borderWidth, () => ( 0)),
-            borderRadius: radiusStyles.borderRadius,
-            borderColor: borderAnimation.interpolate({
-              inputRange: [0, 1],
-              outputRange: [
-                variantStyles.unfocusedBorderColor,
-                variantStyles.focusedBorderColor
-              ]
-            })
+            borderRadius: isUnderlined ? 0 : radiusStyles.borderRadius,
+            borderWidth: isUnderlined ? 0 : _nullishCoalesce(variantStyles.container.borderWidth, () => ( 0)),
+            borderColor: isUnderlined ? void 0 : animatedBorderColor
           },
           _optionalChain([customSegment, 'optionalAccess', _37 => _37.segment])
         ]
@@ -1039,6 +1045,18 @@ var OTPSegment = ({
           editable: !isDisabled,
           caretHidden: true
         }
+      ),
+      isUnderlined && /* @__PURE__ */ _react2.default.createElement(
+        _reactnative.Animated.View,
+        {
+          style: [
+            otpStyles.underline,
+            {
+              height: _nullishCoalesce(variantStyles.container.borderBottomWidth, () => ( 1)),
+              backgroundColor: animatedBorderColor
+            }
+          ]
+        }
       )
     )
   );
@@ -1049,7 +1067,7 @@ var OTPInput = ({
   defaultValue,
   onValueChange,
   onComplete,
-  variant = "flat",
+  variant = "colored",
   size = "md",
   radius = "md",
   themeColor = "primary",
@@ -1326,7 +1344,7 @@ var NumberInput = _react.forwardRef.call(void 0,
     errorMessage,
     placeholder,
     themeColor = "primary",
-    variant = "flat",
+    variant = "colored",
     size = "md",
     radius = "md",
     isDisabled = false,
@@ -1336,7 +1354,7 @@ var NumberInput = _react.forwardRef.call(void 0,
     fullWidth = true,
     customAppearance
   }, ref) => {
-    const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+    const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
     const {
       displayValue,
       handleTextChange,

package/dist/input/index.d.cts

@@ -3,7 +3,7 @@ import React, { ReactNode } from 'react';
 import * as react_native from 'react-native';
 import { StyleProp, ViewStyle, TextStyle, TextInputProps as TextInputProps$1, TextInput as TextInput$1 } from 'react-native';
 
-type TextInputVariant = 'flat' | 'faded' | 'bordered' | 'underlined';
+type TextInputVariant = 'colored' | 'light' | 'bordered' | 'underlined';
 type TextInputSize = 'sm' | 'md' | 'lg';
 type TextInputLabelPlacement = 'outside' | 'inside';
 type TextInputCustomAppearance = {
@@ -59,7 +59,7 @@ type TextInputProps = Omit<TextInputProps$1, 'value' | 'defaultValue' | 'style'>
     themeColor?: ThemeColor;
     /**
      * Visual style variant.
-     * @default 'flat'
+     * @default 'colored'
      */
     variant?: TextInputVariant;
     /**

package/dist/input/index.d.ts

@@ -3,7 +3,7 @@ import React, { ReactNode } from 'react';
 import * as react_native from 'react-native';
 import { StyleProp, ViewStyle, TextStyle, TextInputProps as TextInputProps$1, TextInput as TextInput$1 } from 'react-native';
 
-type TextInputVariant = 'flat' | 'faded' | 'bordered' | 'underlined';
+type TextInputVariant = 'colored' | 'light' | 'bordered' | 'underlined';
 type TextInputSize = 'sm' | 'md' | 'lg';
 type TextInputLabelPlacement = 'outside' | 'inside';
 type TextInputCustomAppearance = {
@@ -59,7 +59,7 @@ type TextInputProps = Omit<TextInputProps$1, 'value' | 'defaultValue' | 'style'>
     themeColor?: ThemeColor;
     /**
      * Visual style variant.
-     * @default 'flat'
+     * @default 'colored'
      */
     variant?: TextInputVariant;
     /**

package/dist/input/index.js

@@ -1,7 +1,7 @@
 import "../chunk-SHBDANQN.js";
 import {
   useXUITheme
-} from "../chunk-LVNBYERF.js";
+} from "../chunk-RBSA4NH4.js";
 
 // src/components/input/input.tsx
 import React, { forwardRef, useMemo as useMemo2, useState, useRef, useEffect } from "react";
@@ -108,10 +108,9 @@ var useTextInputVariantStyles = ({
         helperColor
       };
     }
-    if (variant === "faded") {
+    if (variant === "light") {
       return {
         container: {
-          backgroundColor: withOpacity(colorScheme.background, 0.68),
           borderColor: isFocused || isInvalid ? focusColor : "transparent",
           borderWidth: isFocused || isInvalid ? theme.borderWidth.md : 0
         },
@@ -125,7 +124,7 @@ var useTextInputVariantStyles = ({
     }
     return {
       container: {
-        backgroundColor: colorScheme.background,
+        backgroundColor: withOpacity(colorScheme.container, 0.5),
         borderColor: isFocused || isInvalid ? withPaletteNumber(focusColor, 500) : "transparent",
         borderWidth: isFocused || isInvalid ? theme.borderWidth.md : 0
       },
@@ -202,7 +201,7 @@ var TextInput = forwardRef(
     startContent,
     endContent,
     themeColor = "primary",
-    variant = "flat",
+    variant = "colored",
     size = "md",
     radius = "md",
     isSecured = false,
@@ -809,6 +808,7 @@ import {
   TextInput as RNTextInput2,
   View as View2
 } from "react-native";
+import { withOpacity as withOpacity2 } from "@xaui/core";
 
 // src/components/input/otp-input.hook.ts
 import { useCallback as useCallback2, useMemo as useMemo4, useRef as useRef2, useState as useState2 } from "react";
@@ -933,6 +933,12 @@ var otpStyles = StyleSheet3.create({
     height: 1,
     opacity: 0
   },
+  underline: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0
+  },
   label: {
     fontWeight: "500"
   },
@@ -963,6 +969,7 @@ var OTPSegment = ({
   onPress
 }) => {
   const borderAnimation = useRef3(new Animated2.Value(0)).current;
+  const isUnderlined = variantStyles.container.borderBottomWidth !== void 0;
   useEffect2(() => {
     Animated2.timing(borderAnimation, {
       toValue: isActive ? 1 : 0,
@@ -970,6 +977,11 @@ var OTPSegment = ({
       useNativeDriver: false
     }).start();
   }, [borderAnimation, isActive]);
+  const unfocusedLineColor = isUnderlined ? withOpacity2(variantStyles.focusedBorderColor, 0.35) : variantStyles.unfocusedBorderColor;
+  const animatedBorderColor = borderAnimation.interpolate({
+    inputRange: [0, 1],
+    outputRange: [unfocusedLineColor, variantStyles.focusedBorderColor]
+  });
   return /* @__PURE__ */ React4.createElement(
     Pressable2,
     {
@@ -989,15 +1001,9 @@ var OTPSegment = ({
             width: sizeStyles.width,
             height: sizeStyles.height,
             backgroundColor: variantStyles.container.backgroundColor,
-            borderWidth: variantStyles.container.borderWidth ?? 0,
-            borderRadius: radiusStyles.borderRadius,
-            borderColor: borderAnimation.interpolate({
-              inputRange: [0, 1],
-              outputRange: [
-                variantStyles.unfocusedBorderColor,
-                variantStyles.focusedBorderColor
-              ]
-            })
+            borderRadius: isUnderlined ? 0 : radiusStyles.borderRadius,
+            borderWidth: isUnderlined ? 0 : variantStyles.container.borderWidth ?? 0,
+            borderColor: isUnderlined ? void 0 : animatedBorderColor
           },
           customSegment?.segment
         ]
@@ -1039,6 +1045,18 @@ var OTPSegment = ({
           editable: !isDisabled,
           caretHidden: true
         }
+      ),
+      isUnderlined && /* @__PURE__ */ React4.createElement(
+        Animated2.View,
+        {
+          style: [
+            otpStyles.underline,
+            {
+              height: variantStyles.container.borderBottomWidth ?? 1,
+              backgroundColor: animatedBorderColor
+            }
+          ]
+        }
       )
     )
   );
@@ -1049,7 +1067,7 @@ var OTPInput = ({
   defaultValue,
   onValueChange,
   onComplete,
-  variant = "flat",
+  variant = "colored",
   size = "md",
   radius = "md",
   themeColor = "primary",
@@ -1183,7 +1201,7 @@ OTPInput.displayName = "OTPInput";
 import React5, { forwardRef as forwardRef3 } from "react";
 import { Pressable as Pressable3, View as View3 } from "react-native";
 import { AddIcon, RemoveIcon } from "@xaui/icons";
-import { withOpacity as withOpacity2 } from "@xaui/core";
+import { withOpacity as withOpacity3 } from "@xaui/core";
 
 // src/components/input/number-input.hook.ts
 import { useCallback as useCallback4, useMemo as useMemo5, useState as useState3 } from "react";
@@ -1326,7 +1344,7 @@ var NumberInput = forwardRef3(
     errorMessage,
     placeholder,
     themeColor = "primary",
-    variant = "flat",
+    variant = "colored",
     size = "md",
     radius = "md",
     isDisabled = false,
@@ -1356,7 +1374,7 @@ var NumberInput = forwardRef3(
       formatOptions,
       locale
     });
-    const iconColor = withOpacity2(theme.colors.foreground, 0.7);
+    const iconColor = withOpacity3(theme.colors.foreground, 0.7);
     const stepperContent = hideStepper || isReadOnly ? void 0 : /* @__PURE__ */ React5.createElement(
       View3,
       {