@xaui/native 0.9.1-alpha.25 → 0.9.1-alpha.26

package/dist/chunk-3LKGVKQY.cjs

@@ -0,0 +1,145 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); 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 _chunkB4W2XNBPcjs = require('./chunk-B4W2XNBP.cjs');
+
+
+
+var _chunkJCKVYYZOcjs = require('./chunk-JCKVYYZO.cjs');
+
+
+
+
+var _chunkHUZ4AUM2cjs = require('./chunk-HUZ4AUM2.cjs');
+
+// src/components/input-group/input-group-field.tsx
+var _react = require('react');
+
+// src/components/input-group/input-group.context.ts
+var [InputGroupProvider, useInputGroup] = _chunkHUZ4AUM2cjs.createSlotContext.call(void 0, "InputGroup");
+
+// src/components/input-group/input-group.utils.ts
+function decoratorPadding(prefixWidth, suffixWidth) {
+  const paddingStart = prefixWidth > 0 ? prefixWidth : void 0;
+  const paddingEnd = suffixWidth > 0 ? suffixWidth : void 0;
+  if (paddingStart === void 0 && paddingEnd === void 0) return void 0;
+  return { paddingStart, paddingEnd };
+}
+
+// src/components/input-group/input-group-field.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var InputGroupField = _react.forwardRef.call(void 0, 
+  function InputGroupField2({ style, ...props }, ref) {
+    const { prefixWidth, suffixWidth } = useInputGroup();
+    const padding = _react.useMemo.call(void 0, 
+      () => decoratorPadding(prefixWidth, suffixWidth),
+      [prefixWidth, suffixWidth]
+    );
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJCKVYYZOcjs.InputField, { ref, ...props, style: [padding, style] });
+  }
+);
+InputGroupField.displayName = "XAUI.InputGroup.Field";
+
+// src/components/input-group/input-group-icon.tsx
+
+function InputGroupIcon({ size, color, ...rest }) {
+  const { icon } = _chunkJCKVYYZOcjs.useInput.call(void 0, );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkB4W2XNBPcjs.Icon, { size: _nullishCoalesce(size, () => ( icon.size)), color: _nullishCoalesce(color, () => ( icon.color)), ...rest });
+}
+InputGroupIcon.displayName = "XAUI.InputGroup.Icon";
+
+// src/components/input-group/input-group-prefix.tsx
+
+
+// src/components/input-group/input-group-decorator.tsx
+
+var _reactnative = require('react-native');
+
+var InputGroupDecorator = _react.forwardRef.call(void 0, 
+  function InputGroupDecorator2({ side, children, isDecorative = false, onLayout, style, ...props }, ref) {
+    const { prefixStyle, suffixStyle, isDisabled } = _chunkJCKVYYZOcjs.useInput.call(void 0, );
+    const { setPrefixWidth, setSuffixWidth } = useInputGroup();
+    const [styleProps, rest] = _chunkHUZ4AUM2cjs.useStyleProps.call(void 0, props);
+    const report = side === "prefix" ? setPrefixWidth : setSuffixWidth;
+    const handleLayout = _react.useCallback.call(void 0, 
+      (event) => {
+        report(event.nativeEvent.layout.width);
+        _optionalChain([onLayout, 'optionalCall', _ => _(event)]);
+      },
+      [report, onLayout]
+    );
+    const isInert = isDecorative || isDisabled;
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _reactnative.View,
+      {
+        ref,
+        accessibilityElementsHidden: isDecorative || void 0,
+        importantForAccessibility: isDecorative ? "no-hide-descendants" : void 0,
+        pointerEvents: isInert ? "none" : void 0,
+        ...rest,
+        style: [side === "prefix" ? prefixStyle : suffixStyle, styleProps, style],
+        onLayout: handleLayout,
+        children
+      }
+    );
+  }
+);
+InputGroupDecorator.displayName = "XAUI.InputGroup.Decorator";
+
+// src/components/input-group/input-group-prefix.tsx
+
+var InputGroupPrefix = _react.forwardRef.call(void 0, 
+  function InputGroupPrefix2(props, ref) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InputGroupDecorator, { ref, side: "prefix", ...props });
+  }
+);
+InputGroupPrefix.displayName = "XAUI.InputGroup.Prefix";
+
+// src/components/input-group/input-group-suffix.tsx
+
+
+var InputGroupSuffix = _react.forwardRef.call(void 0, 
+  function InputGroupSuffix2(props, ref) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InputGroupDecorator, { ref, side: "suffix", ...props });
+  }
+);
+InputGroupSuffix.displayName = "XAUI.InputGroup.Suffix";
+
+// src/components/input-group/input-group.tsx
+
+
+
+var InputGroupRoot = _react.forwardRef.call(void 0, function InputGroup({ children, asChild = false, style, ...props }, ref) {
+  const [styleProps, rest] = _chunkHUZ4AUM2cjs.useStyleProps.call(void 0, props);
+  const [prefixWidth, setPrefixWidth] = _react.useState.call(void 0, 0);
+  const [suffixWidth, setSuffixWidth] = _react.useState.call(void 0, 0);
+  const context = _react.useMemo.call(void 0, 
+    () => ({ prefixWidth, suffixWidth, setPrefixWidth, setSuffixWidth }),
+    [prefixWidth, suffixWidth]
+  );
+  const rootStyle = [styleProps, style];
+  const surface = asChild ? (
+    // R12 — the caller's element *is* the row.
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHUZ4AUM2cjs.Slot, { ref, ...rest, style: rootStyle, children })
+  ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { ref, ...rest, style: rootStyle, children });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InputGroupProvider, { value: context, children: surface });
+});
+InputGroupRoot.displayName = "XAUI.InputGroup.Root";
+
+// src/components/input-group/index.ts
+var InputGroup2 = Object.assign(InputGroupRoot, {
+  Prefix: InputGroupPrefix,
+  Field: InputGroupField,
+  Suffix: InputGroupSuffix,
+  Icon: InputGroupIcon
+});
+
+
+
+
+
+
+
+
+
+
+exports.useInputGroup = useInputGroup; exports.decoratorPadding = decoratorPadding; exports.InputGroupField = InputGroupField; exports.InputGroupIcon = InputGroupIcon; exports.InputGroupPrefix = InputGroupPrefix; exports.InputGroupSuffix = InputGroupSuffix; exports.InputGroupRoot = InputGroupRoot; exports.InputGroup = InputGroup2;

package/dist/{chunk-GSEK6OCY.cjs → chunk-5OXZIZRZ.cjs}

@@ -5,7 +5,7 @@
 
 
 
-var _chunkYEW5LPWLcjs = require('./chunk-YEW5LPWL.cjs');
+var _chunkJCKVYYZOcjs = require('./chunk-JCKVYYZO.cjs');
 
 
 
@@ -21,7 +21,7 @@ var [TextAreaProvider, useTextArea] = _chunkHUZ4AUM2cjs.createSlotContext.call(v
 var _jsxruntime = require('react/jsx-runtime');
 var TextAreaField = _react.forwardRef.call(void 0, 
   function TextAreaField2({ style, scrollEnabled, ...props }, ref) {
-    const { textAreaStyle, textArea } = _chunkYEW5LPWLcjs.useInput.call(void 0, );
+    const { textAreaStyle, textArea } = _chunkJCKVYYZOcjs.useInput.call(void 0, );
     const { rows, maxRows } = useTextArea();
     const [styleProps, rest] = _chunkHUZ4AUM2cjs.useStyleProps.call(void 0, props);
     const height = _react.useMemo.call(void 0, () => {
@@ -35,7 +35,7 @@ var TextAreaField = _react.forwardRef.call(void 0,
       };
     }, [rows, maxRows, textArea]);
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkYEW5LPWLcjs.InputField,
+      _chunkJCKVYYZOcjs.InputField,
       {
         ref,
         multiline: true,
@@ -54,16 +54,16 @@ TextAreaField.displayName = "XAUI.TextArea.Field";
 var DEFAULT_ROWS = 3;
 var TextAreaRoot = _react.forwardRef.call(void 0, function TextArea({ rows = DEFAULT_ROWS, maxRows, children, ...props }, ref) {
   const context = _react.useMemo.call(void 0, () => ({ rows, maxRows }), [rows, maxRows]);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TextAreaProvider, { value: context, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYEW5LPWLcjs.InputRoot, { ref, ...props, children }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TextAreaProvider, { value: context, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJCKVYYZOcjs.InputRoot, { ref, ...props, children }) });
 });
 TextAreaRoot.displayName = "XAUI.TextArea.Root";
 
 // src/components/text-area/index.ts
 var TextArea2 = Object.assign(TextAreaRoot, {
-  Label: _chunkYEW5LPWLcjs.InputLabel,
+  Label: _chunkJCKVYYZOcjs.InputLabel,
   Field: TextAreaField,
-  Description: _chunkYEW5LPWLcjs.InputDescription,
-  Error: _chunkYEW5LPWLcjs.InputError
+  Description: _chunkJCKVYYZOcjs.InputDescription,
+  Error: _chunkJCKVYYZOcjs.InputError
 });
 
 

package/dist/{chunk-YEW5LPWL.cjs → chunk-JCKVYYZO.cjs}

@@ -130,7 +130,10 @@ var SLOTS = [
   "textArea",
   "placeholder",
   "description",
-  "error"
+  "error",
+  "prefix",
+  "suffix",
+  "icon"
 ];
 var VARIANT_TOKENS = {
   primary: {
@@ -156,13 +159,17 @@ var VARIANT_TOKENS = {
   ghost: { borderFocus: "fieldBorderFocus", fg: "fieldForeground" }
 };
 function sizeAxis(step) {
-  const { control, padding, gap, field, label, help, textAreaPadding } = step;
+  const { control, padding, gap, field, label, help, glyph, textAreaPadding } = step;
   return (theme) => {
     const inset = { paddingHorizontal: theme.spacing(LABEL_INSET) };
     const helpType = {
       fontSize: theme.fontSizes[help],
       lineHeight: theme.lineHeights[help]
     };
+    const decorator = {
+      paddingHorizontal: theme.spacing(padding),
+      gap: theme.spacing(padding)
+    };
     return {
       root: { gap: theme.spacing(gap) },
       label: {
@@ -185,11 +192,23 @@ function sizeAxis(step) {
         paddingBottom: theme.spacing(textAreaPadding)
       },
       description: { ...inset, ...helpType },
-      error: { ...inset, ...helpType }
+      error: { ...inset, ...helpType },
+      prefix: decorator,
+      suffix: decorator,
+      icon: { fontSize: theme.fontSizes[glyph] }
     };
   };
 }
 var LABEL_INSET = 1.5;
+var DECORATOR = {
+  position: "absolute",
+  top: 0,
+  bottom: 0,
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "center",
+  zIndex: 10
+};
 var SIZES = {
   xs: {
     control: "xs",
@@ -198,6 +217,7 @@ var SIZES = {
     field: "sm",
     label: "sm",
     help: "xs",
+    glyph: "md",
     labelInside: "xs",
     textAreaPadding: 1.5
   },
@@ -208,6 +228,7 @@ var SIZES = {
     field: "md",
     label: "sm",
     help: "xs",
+    glyph: "lg",
     labelInside: "xs",
     textAreaPadding: 2
   },
@@ -218,6 +239,7 @@ var SIZES = {
     field: "md",
     label: "md",
     help: "sm",
+    glyph: "lg",
     labelInside: "xs",
     textAreaPadding: 2
   },
@@ -228,6 +250,7 @@ var SIZES = {
     field: "lg",
     label: "lg",
     help: "md",
+    glyph: "xl",
     labelInside: "sm",
     textAreaPadding: 2.5
   }
@@ -303,7 +326,13 @@ var inputRecipe = _chunkYXVKQMCKcjs.createRecipe.call(void 0, {
     error: {
       fontFamily: theme.fontFamilies.body,
       color: theme.colors.danger
-    }
+    },
+    prefix: { ...DECORATOR, start: 0 },
+    suffix: { ...DECORATOR, end: 0 },
+    // The glyph sits with the placeholder rather than with the value: a search mark or a
+    // lock is decoration for the text, not text. `paint` leaves it alone, so a tinted
+    // filled field is the one case where the caller names a colour on the icon itself.
+    icon: { color: theme.colors.fieldPlaceholder }
   }),
   variantTokens: VARIANT_TOKENS,
   /**
@@ -423,6 +452,7 @@ var InputRoot = _react.forwardRef.call(void 0, function Input({
   const tint = color ? inputRecipe.tint({ theme, color, selection, states }) : void 0;
   const context = _react.useMemo.call(void 0, () => {
     const placeholder = _reactnative.StyleSheet.flatten(styles.placeholder);
+    const icon = _reactnative.StyleSheet.flatten(styles.icon);
     const textArea = _reactnative.StyleSheet.flatten(styles.textArea);
     return {
       labelStyle: tint ? [styles.label, tint.label] : styles.label,
@@ -436,6 +466,14 @@ var InputRoot = _react.forwardRef.call(void 0, function Input({
       },
       descriptionStyle: styles.description,
       errorStyle: styles.error,
+      prefixStyle: styles.prefix,
+      suffixStyle: styles.suffix,
+      icon: {
+        size: icon.fontSize,
+        // `ColorValue` also covers the platform's opaque colours, which an icon component
+        // takes as a `string` and nothing else.
+        color: typeof icon.color === "string" ? icon.color : void 0
+      },
       // `ColorValue` also covers the platform's opaque colours, which `TextInput` cannot
       // take for a placeholder.
       placeholderTextColor: typeof placeholder.color === "string" ? placeholder.color : void 0,

package/dist/{chunk-MRYLLKML.js → chunk-PQHC65AG.js}

@@ -1,5 +1,5 @@
-import { Icon } from "./chunk-ICR42HHG.js";
 import { PressableFeedback, usePressState } from "./chunk-4HELPMAK.js";
+import { Icon } from "./chunk-ICR42HHG.js";
 import { warnDev } from "./chunk-EGLLDKN6.js";
 import { createRecipe, radiusAxis } from "./chunk-3JATAB7S.js";
 import { childrenToString, createSlotContext, useStyleProps } from "./chunk-PMO62QK4.js";
@@ -74,10 +74,10 @@ function ButtonSpinner({
   });
 }
 ButtonSpinner.displayName = "XAUI.Button.Spinner";
-const _worklet_12240051127083_init_data = {
-  code: "function chunkMRYLLKMLJs1(){const{angle}=this.__closure;return{transform:[{rotate:angle.value+\"deg\"}]};}",
-  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-MRYLLKML.js",
-  sourceMap: "{\"version\":3,\"names\":[\"chunkMRYLLKMLJs1\",\"angle\",\"__closure\",\"transform\",\"rotate\",\"value\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-MRYLLKML.js\"],\"mappings\":\"AAqFyC,SAAAA,gBAAMA,CAAA,QAAAC,KAAA,OAAAC,SAAA,CAE3C,MAAO,CAAEC,SAAS,CAAE,CAAC,CAAEC,MAAM,CAAKH,KAAK,CAACI,KAAK,MAAM,CAAC,CAAE,CAAC,CACzD\",\"ignoreList\":[]}"
+const _worklet_146491499400_init_data = {
+  code: "function chunkPQHC65AGJs1(){const{angle}=this.__closure;return{transform:[{rotate:angle.value+\"deg\"}]};}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-PQHC65AG.js",
+  sourceMap: "{\"version\":3,\"names\":[\"chunkPQHC65AGJs1\",\"angle\",\"__closure\",\"transform\",\"rotate\",\"value\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-PQHC65AG.js\"],\"mappings\":\"AAqFyC,SAAAA,gBAAMA,CAAA,QAAAC,KAAA,OAAAC,SAAA,CAE3C,MAAO,CAAEC,SAAS,CAAE,CAAC,CAAEC,MAAM,CAAKH,KAAK,CAACI,KAAK,MAAM,CAAC,CAAE,CAAC,CACzD\",\"ignoreList\":[]}"
 };
 function SpinningRing({
   style
@@ -90,28 +90,28 @@ function SpinningRing({
     }), -1, false);
     return () => cancelAnimation(angle);
   }, [angle]);
-  const animatedStyle = useAnimatedStyle(function chunkMRYLLKMLJs1Factory({
-    _worklet_12240051127083_init_data,
+  const animatedStyle = useAnimatedStyle(function chunkPQHC65AGJs1Factory({
+    _worklet_146491499400_init_data,
     angle
   }) {
     const _e = [new global.Error(), -2, -27];
-    const chunkMRYLLKMLJs1 = function () {
+    const chunkPQHC65AGJs1 = function () {
       return {
         transform: [{
           rotate: `${angle.value}deg`
         }]
       };
     };
-    chunkMRYLLKMLJs1.__closure = {
+    chunkPQHC65AGJs1.__closure = {
       angle
     };
-    chunkMRYLLKMLJs1.__workletHash = 12240051127083;
-    chunkMRYLLKMLJs1.__pluginVersion = "0.7.4";
-    chunkMRYLLKMLJs1.__initData = _worklet_12240051127083_init_data;
-    chunkMRYLLKMLJs1.__stackDetails = _e;
-    return chunkMRYLLKMLJs1;
+    chunkPQHC65AGJs1.__workletHash = 146491499400;
+    chunkPQHC65AGJs1.__pluginVersion = "0.7.4";
+    chunkPQHC65AGJs1.__initData = _worklet_146491499400_init_data;
+    chunkPQHC65AGJs1.__stackDetails = _e;
+    return chunkPQHC65AGJs1;
   }({
-    _worklet_12240051127083_init_data,
+    _worklet_146491499400_init_data,
     angle
   }), [angle]);
   return /* @__PURE__ */jsx3(Animated.View, {

package/dist/{chunk-ZDCGPK5Z.js → chunk-TR2TGPDQ.js}

@@ -5,7 +5,7 @@ import {
   InputLabel,
   InputRoot,
   useInput
-} from "./chunk-2OY76YNB.js";
+} from "./chunk-V2FQN6ZK.js";
 import {
   createSlotContext,
   useStyleProps

package/dist/{chunk-2OY76YNB.js → chunk-V2FQN6ZK.js}

@@ -130,7 +130,10 @@ var SLOTS = [
   "textArea",
   "placeholder",
   "description",
-  "error"
+  "error",
+  "prefix",
+  "suffix",
+  "icon"
 ];
 var VARIANT_TOKENS = {
   primary: {
@@ -156,13 +159,17 @@ var VARIANT_TOKENS = {
   ghost: { borderFocus: "fieldBorderFocus", fg: "fieldForeground" }
 };
 function sizeAxis(step) {
-  const { control, padding, gap, field, label, help, textAreaPadding } = step;
+  const { control, padding, gap, field, label, help, glyph, textAreaPadding } = step;
   return (theme) => {
     const inset = { paddingHorizontal: theme.spacing(LABEL_INSET) };
     const helpType = {
       fontSize: theme.fontSizes[help],
       lineHeight: theme.lineHeights[help]
     };
+    const decorator = {
+      paddingHorizontal: theme.spacing(padding),
+      gap: theme.spacing(padding)
+    };
     return {
       root: { gap: theme.spacing(gap) },
       label: {
@@ -185,11 +192,23 @@ function sizeAxis(step) {
         paddingBottom: theme.spacing(textAreaPadding)
       },
       description: { ...inset, ...helpType },
-      error: { ...inset, ...helpType }
+      error: { ...inset, ...helpType },
+      prefix: decorator,
+      suffix: decorator,
+      icon: { fontSize: theme.fontSizes[glyph] }
     };
   };
 }
 var LABEL_INSET = 1.5;
+var DECORATOR = {
+  position: "absolute",
+  top: 0,
+  bottom: 0,
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "center",
+  zIndex: 10
+};
 var SIZES = {
   xs: {
     control: "xs",
@@ -198,6 +217,7 @@ var SIZES = {
     field: "sm",
     label: "sm",
     help: "xs",
+    glyph: "md",
     labelInside: "xs",
     textAreaPadding: 1.5
   },
@@ -208,6 +228,7 @@ var SIZES = {
     field: "md",
     label: "sm",
     help: "xs",
+    glyph: "lg",
     labelInside: "xs",
     textAreaPadding: 2
   },
@@ -218,6 +239,7 @@ var SIZES = {
     field: "md",
     label: "md",
     help: "sm",
+    glyph: "lg",
     labelInside: "xs",
     textAreaPadding: 2
   },
@@ -228,6 +250,7 @@ var SIZES = {
     field: "lg",
     label: "lg",
     help: "md",
+    glyph: "xl",
     labelInside: "sm",
     textAreaPadding: 2.5
   }
@@ -303,7 +326,13 @@ var inputRecipe = createRecipe({
     error: {
       fontFamily: theme.fontFamilies.body,
       color: theme.colors.danger
-    }
+    },
+    prefix: { ...DECORATOR, start: 0 },
+    suffix: { ...DECORATOR, end: 0 },
+    // The glyph sits with the placeholder rather than with the value: a search mark or a
+    // lock is decoration for the text, not text. `paint` leaves it alone, so a tinted
+    // filled field is the one case where the caller names a colour on the icon itself.
+    icon: { color: theme.colors.fieldPlaceholder }
   }),
   variantTokens: VARIANT_TOKENS,
   /**
@@ -423,6 +452,7 @@ var InputRoot = forwardRef5(function Input({
   const tint = color ? inputRecipe.tint({ theme, color, selection, states }) : void 0;
   const context = useMemo(() => {
     const placeholder = StyleSheet.flatten(styles.placeholder);
+    const icon = StyleSheet.flatten(styles.icon);
     const textArea = StyleSheet.flatten(styles.textArea);
     return {
       labelStyle: tint ? [styles.label, tint.label] : styles.label,
@@ -436,6 +466,14 @@ var InputRoot = forwardRef5(function Input({
       },
       descriptionStyle: styles.description,
       errorStyle: styles.error,
+      prefixStyle: styles.prefix,
+      suffixStyle: styles.suffix,
+      icon: {
+        size: icon.fontSize,
+        // `ColorValue` also covers the platform's opaque colours, which an icon component
+        // takes as a `string` and nothing else.
+        color: typeof icon.color === "string" ? icon.color : void 0
+      },
       // `ColorValue` also covers the platform's opaque colours, which `TextInput` cannot
       // take for a placeholder.
       placeholderTextColor: typeof placeholder.color === "string" ? placeholder.color : void 0,

package/dist/chunk-WEMZ4VMC.js

@@ -0,0 +1,145 @@
+import {
+  Icon
+} from "./chunk-ICR42HHG.js";
+import {
+  InputField,
+  useInput
+} from "./chunk-V2FQN6ZK.js";
+import {
+  Slot,
+  createSlotContext,
+  useStyleProps
+} from "./chunk-PMO62QK4.js";
+
+// src/components/input-group/input-group-field.tsx
+import { forwardRef, useMemo } from "react";
+
+// src/components/input-group/input-group.context.ts
+var [InputGroupProvider, useInputGroup] = createSlotContext("InputGroup");
+
+// src/components/input-group/input-group.utils.ts
+function decoratorPadding(prefixWidth, suffixWidth) {
+  const paddingStart = prefixWidth > 0 ? prefixWidth : void 0;
+  const paddingEnd = suffixWidth > 0 ? suffixWidth : void 0;
+  if (paddingStart === void 0 && paddingEnd === void 0) return void 0;
+  return { paddingStart, paddingEnd };
+}
+
+// src/components/input-group/input-group-field.tsx
+import { jsx } from "react/jsx-runtime";
+var InputGroupField = forwardRef(
+  function InputGroupField2({ style, ...props }, ref) {
+    const { prefixWidth, suffixWidth } = useInputGroup();
+    const padding = useMemo(
+      () => decoratorPadding(prefixWidth, suffixWidth),
+      [prefixWidth, suffixWidth]
+    );
+    return /* @__PURE__ */ jsx(InputField, { ref, ...props, style: [padding, style] });
+  }
+);
+InputGroupField.displayName = "XAUI.InputGroup.Field";
+
+// src/components/input-group/input-group-icon.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function InputGroupIcon({ size, color, ...rest }) {
+  const { icon } = useInput();
+  return /* @__PURE__ */ jsx2(Icon, { size: size ?? icon.size, color: color ?? icon.color, ...rest });
+}
+InputGroupIcon.displayName = "XAUI.InputGroup.Icon";
+
+// src/components/input-group/input-group-prefix.tsx
+import { forwardRef as forwardRef3 } from "react";
+
+// src/components/input-group/input-group-decorator.tsx
+import { forwardRef as forwardRef2, useCallback } from "react";
+import { View } from "react-native";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var InputGroupDecorator = forwardRef2(
+  function InputGroupDecorator2({ side, children, isDecorative = false, onLayout, style, ...props }, ref) {
+    const { prefixStyle, suffixStyle, isDisabled } = useInput();
+    const { setPrefixWidth, setSuffixWidth } = useInputGroup();
+    const [styleProps, rest] = useStyleProps(props);
+    const report = side === "prefix" ? setPrefixWidth : setSuffixWidth;
+    const handleLayout = useCallback(
+      (event) => {
+        report(event.nativeEvent.layout.width);
+        onLayout?.(event);
+      },
+      [report, onLayout]
+    );
+    const isInert = isDecorative || isDisabled;
+    return /* @__PURE__ */ jsx3(
+      View,
+      {
+        ref,
+        accessibilityElementsHidden: isDecorative || void 0,
+        importantForAccessibility: isDecorative ? "no-hide-descendants" : void 0,
+        pointerEvents: isInert ? "none" : void 0,
+        ...rest,
+        style: [side === "prefix" ? prefixStyle : suffixStyle, styleProps, style],
+        onLayout: handleLayout,
+        children
+      }
+    );
+  }
+);
+InputGroupDecorator.displayName = "XAUI.InputGroup.Decorator";
+
+// src/components/input-group/input-group-prefix.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var InputGroupPrefix = forwardRef3(
+  function InputGroupPrefix2(props, ref) {
+    return /* @__PURE__ */ jsx4(InputGroupDecorator, { ref, side: "prefix", ...props });
+  }
+);
+InputGroupPrefix.displayName = "XAUI.InputGroup.Prefix";
+
+// src/components/input-group/input-group-suffix.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var InputGroupSuffix = forwardRef4(
+  function InputGroupSuffix2(props, ref) {
+    return /* @__PURE__ */ jsx5(InputGroupDecorator, { ref, side: "suffix", ...props });
+  }
+);
+InputGroupSuffix.displayName = "XAUI.InputGroup.Suffix";
+
+// src/components/input-group/input-group.tsx
+import { forwardRef as forwardRef5, useMemo as useMemo2, useState } from "react";
+import { View as View2 } from "react-native";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var InputGroupRoot = forwardRef5(function InputGroup({ children, asChild = false, style, ...props }, ref) {
+  const [styleProps, rest] = useStyleProps(props);
+  const [prefixWidth, setPrefixWidth] = useState(0);
+  const [suffixWidth, setSuffixWidth] = useState(0);
+  const context = useMemo2(
+    () => ({ prefixWidth, suffixWidth, setPrefixWidth, setSuffixWidth }),
+    [prefixWidth, suffixWidth]
+  );
+  const rootStyle = [styleProps, style];
+  const surface = asChild ? (
+    // R12 — the caller's element *is* the row.
+    /* @__PURE__ */ jsx6(Slot, { ref, ...rest, style: rootStyle, children })
+  ) : /* @__PURE__ */ jsx6(View2, { ref, ...rest, style: rootStyle, children });
+  return /* @__PURE__ */ jsx6(InputGroupProvider, { value: context, children: surface });
+});
+InputGroupRoot.displayName = "XAUI.InputGroup.Root";
+
+// src/components/input-group/index.ts
+var InputGroup2 = Object.assign(InputGroupRoot, {
+  Prefix: InputGroupPrefix,
+  Field: InputGroupField,
+  Suffix: InputGroupSuffix,
+  Icon: InputGroupIcon
+});
+
+export {
+  useInputGroup,
+  decoratorPadding,
+  InputGroupField,
+  InputGroupIcon,
+  InputGroupPrefix,
+  InputGroupSuffix,
+  InputGroupRoot,
+  InputGroup2 as InputGroup
+};