@xaui/native 0.9.1-alpha.4 → 0.9.1-alpha.41

package/dist/chunk-G7P3ERYF.cjs

@@ -0,0 +1,478 @@
+"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 _chunkEKS3W46Mcjs = require('./chunk-EKS3W46M.cjs');
+
+
+
+
+var _chunk4KFKWBN5cjs = require('./chunk-4KFKWBN5.cjs');
+
+
+var _chunk7EIHHOHPcjs = require('./chunk-7EIHHOHP.cjs');
+
+
+var _chunk3E7CDKFOcjs = require('./chunk-3E7CDKFO.cjs');
+
+
+var _chunk7DPL3ZDScjs = require('./chunk-7DPL3ZDS.cjs');
+
+
+
+var _chunkFNEUOBCVcjs = require('./chunk-FNEUOBCV.cjs');
+
+
+var _chunk57SJ4LJFcjs = require('./chunk-57SJ4LJF.cjs');
+
+
+
+var _chunk7GHM4GKLcjs = require('./chunk-7GHM4GKL.cjs');
+
+
+var _chunkTK44VBIEcjs = require('./chunk-TK44VBIE.cjs');
+
+// src/components/accordion/accordion-content.tsx
+var _react = require('react');
+var _reactnativereanimated = require('react-native-reanimated'); var _reactnativereanimated2 = _interopRequireDefault(_reactnativereanimated);
+
+// src/components/accordion/accordion.animation.ts
+
+var LAYOUT = _reactnativereanimated.LinearTransition.springify().damping(140).stiffness(1600).mass(4);
+var CONTENT_MS = 200;
+var contentEntering = _reactnativereanimated.FadeIn.duration(CONTENT_MS).easing(
+  _reactnativereanimated.Easing.out(_reactnativereanimated.Easing.ease)
+);
+var contentExiting = _reactnativereanimated.FadeOut.duration(CONTENT_MS).easing(
+  _reactnativereanimated.Easing.in(_reactnativereanimated.Easing.ease)
+);
+
+// src/components/accordion/accordion.context.ts
+var [AccordionProvider, useAccordion] = _chunk7GHM4GKLcjs.createSlotContext.call(void 0, "Accordion");
+var [AccordionItemProvider, useAccordionItem] = _chunk7GHM4GKLcjs.createSlotContext.call(void 0, "Accordion.Item");
+
+// src/components/accordion/accordion-content.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var AccordionContent = _react.forwardRef.call(void 0, 
+  function AccordionContent2({ children, style, ...props }, ref) {
+    const { contentStyle } = useAccordion();
+    const { isExpanded } = useAccordionItem();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    if (!isExpanded) return null;
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _reactnativereanimated2.default.View,
+      {
+        ref,
+        entering: contentEntering,
+        exiting: contentExiting,
+        ...rest,
+        style: [contentStyle, styleProps, style],
+        children
+      }
+    );
+  }
+);
+AccordionContent.displayName = "XAUI.Accordion.Content";
+
+// src/components/accordion/accordion-indicator.tsx
+
+
+
+
+
+
+
+
+function AccordionIndicator({
+  as = _chunk4KFKWBN5cjs.ChevronDownIcon,
+  ...props
+}) {
+  const { indicatorStyle } = useAccordion();
+  const { isExpanded } = useAccordionItem();
+  const progress = _reactnativereanimated.useSharedValue.call(void 0, isExpanded ? 1 : 0);
+  _react.useEffect.call(void 0, () => {
+    progress.set(_reactnativereanimated.withSpring.call(void 0, isExpanded ? 1 : 0, _chunkEKS3W46Mcjs.INDICATOR_SPRING));
+  }, [isExpanded, progress]);
+  const rotation = _reactnativereanimated.useAnimatedStyle.call(void 0, () => ({
+    transform: [
+      {
+        rotate: `${_reactnativereanimated.interpolate.call(void 0, progress.get(), [0, 1], [_chunkEKS3W46Mcjs.INDICATOR_ROTATION[0], _chunkEKS3W46Mcjs.INDICATOR_ROTATION[1]])}deg`
+      }
+    ]
+  }));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnativereanimated2.default.View, { style: [indicatorStyle, rotation], children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4KFKWBN5cjs.Icon, { as, ...props }) });
+}
+AccordionIndicator.displayName = "XAUI.Accordion.Indicator";
+
+// src/components/accordion/accordion-item.tsx
+
+
+
+var AccordionItem = _react.forwardRef.call(void 0, 
+  function AccordionItem2({ value, children, isDisabled = false, style, ...props }, ref) {
+    const { itemStyle, isDisabled: isRootDisabled, isExpanded } = useAccordion();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    const expanded = isExpanded(value);
+    const disabled = isRootDisabled || isDisabled;
+    const context = _react.useMemo.call(void 0, 
+      () => ({ value, isExpanded: expanded, isDisabled: disabled }),
+      [value, expanded, disabled]
+    );
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AccordionItemProvider, { value: context, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _reactnativereanimated2.default.View,
+      {
+        ref,
+        layout: LAYOUT,
+        ...rest,
+        style: [itemStyle, styleProps, style],
+        children: typeof children === "function" ? children(context) : children
+      }
+    ) });
+  }
+);
+AccordionItem.displayName = "XAUI.Accordion.Item";
+
+// src/components/accordion/accordion-trigger.tsx
+
+var _reactnative = require('react-native');
+
+var AccordionTrigger = _react.forwardRef.call(void 0, 
+  function AccordionTrigger2({
+    children,
+    asChild = false,
+    accessibilityRole = "button",
+    accessibilityState,
+    style,
+    onPress,
+    onPressIn,
+    onPressOut,
+    ...props
+  }, ref) {
+    const { triggerStyle, triggerPressedStyle, labelStyle, glyph, toggle } = useAccordion();
+    const { value, isExpanded, isDisabled } = useAccordionItem();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    const [isPressed, press] = _chunk7DPL3ZDScjs.usePressState.call(void 0, { onPressIn, onPressOut });
+    const handlePress = _react.useCallback.call(void 0, 
+      (event) => {
+        _optionalChain([onPress, 'optionalCall', _ => _(event)]);
+        toggle(value);
+      },
+      [onPress, toggle, value]
+    );
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4KFKWBN5cjs.IconContext.Provider, { value: glyph, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunk3E7CDKFOcjs.PressableFeedback,
+      {
+        ref,
+        isPressed,
+        isDisabled,
+        asChild,
+        accessibilityRole,
+        accessibilityState: {
+          disabled: isDisabled,
+          expanded: isExpanded,
+          ...accessibilityState
+        },
+        ...rest,
+        style: [
+          triggerStyle,
+          isPressed && triggerPressedStyle,
+          styleProps,
+          typeof style === "function" ? style({ pressed: isPressed }) : style
+        ],
+        onPress: handlePress,
+        onPressIn: press.onPressIn,
+        onPressOut: press.onPressOut,
+        children: asChild ? children : wrapText(children, labelStyle)
+      }
+    ) });
+  }
+);
+AccordionTrigger.displayName = "XAUI.Accordion.Trigger";
+function wrapText(children, style) {
+  return _react.Children.map(
+    children,
+    (child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.Text, { style, children: child }) : child
+  );
+}
+
+// src/components/accordion/accordion.tsx
+
+
+
+
+// src/components/accordion/accordion.hook.ts
+
+function useExpansion({
+  value,
+  defaultValue,
+  onValueChange,
+  selectionMode,
+  isCollapsible
+}) {
+  const [current, setCurrent] = _chunk7EIHHOHPcjs.useControllableState.call(void 0, {
+    value,
+    defaultValue: _nullishCoalesce(defaultValue, () => ( (selectionMode === "multiple" ? [] : ""))),
+    onChange: onValueChange
+  });
+  const isExpanded = _react.useCallback.call(void 0, 
+    (item) => Array.isArray(current) ? current.includes(item) : current === item,
+    [current]
+  );
+  const toggle = _react.useCallback.call(void 0, 
+    (item) => {
+      setCurrent((value_) => nextValue(value_, item, selectionMode, isCollapsible));
+    },
+    [isCollapsible, selectionMode, setCurrent]
+  );
+  return _react.useMemo.call(void 0, () => ({ isExpanded, toggle }), [isExpanded, toggle]);
+}
+function nextValue(current, item, selectionMode, isCollapsible) {
+  if (selectionMode === "multiple") {
+    const list = Array.isArray(current) ? current : current ? [current] : [];
+    if (!list.includes(item)) return [...list, item];
+    if (!isCollapsible && list.length === 1) return current;
+    return list.filter((value) => value !== item);
+  }
+  if (current !== item) return item;
+  return isCollapsible ? "" : current;
+}
+
+// src/components/accordion/accordion.recipe.ts
+
+var SLOTS = [
+  "root",
+  "container",
+  "separator",
+  "item",
+  "trigger",
+  "indicator",
+  "content"
+];
+var VARIANT_TOKENS = {
+  primary: { bg: "surface", fg: "surfaceForeground" },
+  secondary: { bg: "surfaceSecondary", fg: "surfaceSecondaryForeground" },
+  tertiary: { border: "border", fg: "foreground" },
+  ghost: { fg: "foreground" }
+};
+var HAIRLINE = _reactnative.StyleSheet.hairlineWidth;
+var SIZES = {
+  xs: { padding: 2.5, gap: 2.5, label: "sm", glyph: "md", radius: "md" },
+  sm: { padding: 3, gap: 3, label: "md", glyph: "lg", radius: "lg" },
+  md: { padding: 3, gap: 4, label: "md", glyph: "lg", radius: "xl" },
+  lg: { padding: 4, gap: 4, label: "lg", glyph: "xl", radius: "2xl" }
+};
+var TRIGGER_PADDING_VERTICAL = 4;
+function sizeAxis(step) {
+  const { padding, gap, label, glyph, radius } = step;
+  return (theme) => ({
+    // Both layers, at the same value: the outer one draws the corner, the inner one is
+    // what a pressed row is cut against.
+    root: { borderRadius: theme.radius[radius] },
+    container: { borderRadius: theme.radius[radius] },
+    trigger: {
+      paddingVertical: theme.spacing(TRIGGER_PADDING_VERTICAL),
+      paddingHorizontal: theme.spacing(padding),
+      gap: theme.spacing(gap),
+      fontSize: theme.fontSizes[label],
+      lineHeight: theme.lineHeights[label]
+    },
+    indicator: { fontSize: theme.fontSizes[glyph] },
+    content: {
+      paddingHorizontal: theme.spacing(padding),
+      paddingBottom: theme.spacing(TRIGGER_PADDING_VERTICAL)
+    }
+  });
+}
+var accordionRecipe = _chunkFNEUOBCVcjs.createRecipe.call(void 0, {
+  slots: SLOTS,
+  base: (theme) => ({
+    // The root carries the shadow and the border; it must **not** clip. On iOS
+    // `overflow: 'hidden'` sets `masksToBounds`, which clips the layer's own shadow along
+    // with everything else, and a lifted `primary` would have none at all.
+    root: { flexDirection: "column", borderCurve: "continuous" },
+    // So the clipping is one layer in. This is the one extra node in the component, and
+    // it is here for a platform constraint rather than for layout: a single layer cannot
+    // both cast a shadow and clip its children on iOS. Without it a pressed row paints
+    // over the card's rounded corner, square, for as long as a finger is on it.
+    container: { flexDirection: "column", overflow: "hidden" },
+    separator: { height: HAIRLINE, backgroundColor: theme.colors.separator },
+    // This one is load-bearing: it is what makes the height animation read as a panel
+    // unrolling rather than as content sliding out from behind the row above it.
+    item: { flexDirection: "column", overflow: "hidden" },
+    trigger: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.medium
+    },
+    indicator: { alignItems: "center", justifyContent: "center" }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  /**
+   * The fill is the **root's**, never the row's. A row that painted its own would stack
+   * two fills where the separator sits, and the hairline would disappear into the seam.
+   */
+  paint: (theme, colors) => ({
+    root: {
+      backgroundColor: colors.bg,
+      borderColor: colors.border,
+      borderWidth: colors.border ? theme.borderWidth.default : 0
+    },
+    trigger: { color: colors.fg },
+    indicator: { color: theme.colors.muted }
+  }),
+  variants: {
+    size: {
+      xs: sizeAxis(SIZES.xs),
+      sm: sizeAxis(SIZES.sm),
+      md: sizeAxis(SIZES.md),
+      lg: sizeAxis(SIZES.lg)
+    },
+    radius: _chunkFNEUOBCVcjs.radiusAxis.call(void 0, "root", "container")
+  },
+  /**
+   * A container inset from its own edge, and its separators inset with it. `ghost` has no
+   * edge to be inset from, so its rows run the full width and the hairline runs with them
+   * — which is the difference between a list on a page and a list in a box.
+   *
+   * `primary` is the only one lifted. It is the one that reads as a card, and HeroUI puts
+   * their `--shadow-surface` on exactly that variant. `secondary` and `tertiary` have too
+   * little fill to lift — a shadow under either would read as dirt rather than as height
+   * — and in dark mode the theme's surface shadow is already nothing (§4), which is why
+   * this names the role rather than a set of numbers.
+   */
+  compoundVariants: [
+    ...["primary", "secondary", "tertiary"].map((variant) => ({
+      when: { variant },
+      style: (theme) => ({
+        separator: { marginHorizontal: theme.spacing(3) }
+      })
+    })),
+    {
+      when: { variant: "primary" },
+      style: (theme) => ({
+        root: theme.shadows.surface
+      })
+    }
+  ],
+  states: {
+    // On the row, not on the root: pressing one row must not tint the whole container.
+    pressed: (theme) => ({
+      trigger: { backgroundColor: theme.colors.defaultSoftPressed }
+    }),
+    disabled: (theme) => ({ root: { opacity: theme.opacity.disabled } })
+  },
+  defaultVariants: { variant: "ghost", size: "md" }
+});
+
+// src/components/accordion/accordion.tsx
+
+var AccordionRoot = _react.forwardRef.call(void 0, function Accordion({
+  children,
+  variant,
+  size,
+  radius,
+  color,
+  selectionMode = "single",
+  value,
+  defaultValue,
+  onValueChange,
+  isDisabled = false,
+  isCollapsible = true,
+  hasSeparator = true,
+  asChild = false,
+  style,
+  ...props
+}, ref) {
+  const theme = _chunk57SJ4LJFcjs.useXAUITheme.call(void 0, );
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  const { isExpanded, toggle } = useExpansion({
+    value,
+    defaultValue,
+    onValueChange,
+    selectionMode,
+    isCollapsible
+  });
+  const selection = { variant, size, radius };
+  const styles = accordionRecipe.resolve({
+    theme,
+    selection,
+    states: { disabled: isDisabled }
+  });
+  const pressed = accordionRecipe.resolve({
+    theme,
+    selection,
+    states: { pressed: true }
+  });
+  const tint = color ? accordionRecipe.tint({ theme, color, selection }) : void 0;
+  const context = _react.useMemo.call(void 0, () => {
+    const trigger = _reactnative.StyleSheet.flatten([styles.trigger, _optionalChain([tint, 'optionalAccess', _2 => _2.trigger])]);
+    const indicator = _reactnative.StyleSheet.flatten([
+      styles.indicator,
+      _optionalChain([tint, 'optionalAccess', _3 => _3.indicator])
+    ]);
+    return {
+      separatorStyle: styles.separator,
+      itemStyle: styles.item,
+      triggerStyle: tint ? [styles.trigger, tint.trigger] : styles.trigger,
+      triggerPressedStyle: pressed.trigger,
+      indicatorStyle: styles.indicator,
+      contentStyle: styles.content,
+      // The trigger is a row of views, so a stringifiable child is wrapped in a `Text` of
+      // its own — and that text takes the type the recipe put on the row.
+      labelStyle: {
+        color: trigger.color,
+        fontFamily: trigger.fontFamily,
+        fontWeight: trigger.fontWeight,
+        fontSize: trigger.fontSize,
+        lineHeight: trigger.lineHeight
+      },
+      glyph: {
+        size: indicator.fontSize,
+        color: typeof indicator.color === "string" ? indicator.color : void 0
+      },
+      isDisabled,
+      isExpanded,
+      toggle
+    };
+  }, [styles, pressed, tint, isDisabled, isExpanded, toggle]);
+  const rootStyle = [styles.root, _optionalChain([tint, 'optionalAccess', _4 => _4.root]), styleProps, style];
+  const items = _react.Children.toArray(children);
+  const rows = items.map((child, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
+    child,
+    hasSeparator && index < items.length - 1 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnativereanimated2.default.View, { layout: LAYOUT, style: styles.separator }) : null
+  ] }, index));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AccordionProvider, { value: context, children: asChild ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7GHM4GKLcjs.Slot, { ref, ...rest, style: rootStyle, children }) : (
+    // Two layers, and the only place in the library where a root has one inside it.
+    // A single layer cannot both cast a shadow and clip its children on iOS, and this
+    // component needs both: `primary` is lifted, and a pressed row has to be cut
+    // against the card's rounded corner rather than painting over it.
+    //
+    // The layout transition is on each of them as well as on every row. Without it on
+    // the outer one the accordion's own height jumps to its new total in one frame
+    // while the rows inside it are still animating.
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnativereanimated2.default.View, { ref, layout: LAYOUT, ...rest, style: rootStyle, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnativereanimated2.default.View, { layout: LAYOUT, style: styles.container, children: rows }) })
+  ) });
+});
+AccordionRoot.displayName = "XAUI.Accordion.Root";
+
+// src/components/accordion/index.ts
+var Accordion2 = Object.assign(AccordionRoot, {
+  Item: AccordionItem,
+  Trigger: AccordionTrigger,
+  Indicator: AccordionIndicator,
+  Content: AccordionContent
+});
+
+
+
+
+
+
+
+
+
+
+
+
+exports.LAYOUT = LAYOUT; exports.useAccordion = useAccordion; exports.useAccordionItem = useAccordionItem; exports.AccordionContent = AccordionContent; exports.AccordionIndicator = AccordionIndicator; exports.AccordionItem = AccordionItem; exports.AccordionTrigger = AccordionTrigger; exports.accordionRecipe = accordionRecipe; exports.AccordionRoot = AccordionRoot; exports.Accordion = Accordion2;

package/dist/chunk-GA6PBWNT.js

@@ -0,0 +1,147 @@
+import {
+  TextFieldField,
+  useTextField
+} from "./chunk-2NRZKJG7.js";
+import {
+  Icon
+} from "./chunk-FHUYHV6J.js";
+import {
+  Slot,
+  createSlotContext
+} from "./chunk-K72UDPVN.js";
+import {
+  useStyleProps
+} from "./chunk-M63GFNKV.js";
+
+// src/components/field-group/field-group-field.tsx
+import { forwardRef, useMemo } from "react";
+
+// src/components/field-group/field-group.context.ts
+var [FieldGroupProvider, useFieldGroup] = createSlotContext("FieldGroup");
+
+// src/components/field-group/field-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/field-group/field-group-field.tsx
+import { jsx } from "react/jsx-runtime";
+var FieldGroupField = forwardRef(
+  function FieldGroupField2({ style, ...props }, ref) {
+    const { prefixWidth, suffixWidth } = useFieldGroup();
+    const padding = useMemo(
+      () => decoratorPadding(prefixWidth, suffixWidth),
+      [prefixWidth, suffixWidth]
+    );
+    return /* @__PURE__ */ jsx(TextFieldField, { ref, ...props, style: [padding, style] });
+  }
+);
+FieldGroupField.displayName = "XAUI.FieldGroup.Field";
+
+// src/components/field-group/field-group-icon.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function FieldGroupIcon({ size, color, ...rest }) {
+  const { icon } = useTextField();
+  return /* @__PURE__ */ jsx2(Icon, { size: size ?? icon.size, color: color ?? icon.color, ...rest });
+}
+FieldGroupIcon.displayName = "XAUI.FieldGroup.Icon";
+
+// src/components/field-group/field-group-prefix.tsx
+import { forwardRef as forwardRef3 } from "react";
+
+// src/components/field-group/field-group-decorator.tsx
+import { forwardRef as forwardRef2, useCallback } from "react";
+import { View } from "react-native";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var FieldGroupDecorator = forwardRef2(
+  function FieldGroupDecorator2({ side, children, isDecorative = false, onLayout, style, ...props }, ref) {
+    const { prefixStyle, suffixStyle, isDisabled } = useTextField();
+    const { setPrefixWidth, setSuffixWidth } = useFieldGroup();
+    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
+      }
+    );
+  }
+);
+FieldGroupDecorator.displayName = "XAUI.FieldGroup.Decorator";
+
+// src/components/field-group/field-group-prefix.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var FieldGroupPrefix = forwardRef3(
+  function FieldGroupPrefix2(props, ref) {
+    return /* @__PURE__ */ jsx4(FieldGroupDecorator, { ref, side: "prefix", ...props });
+  }
+);
+FieldGroupPrefix.displayName = "XAUI.FieldGroup.Prefix";
+
+// src/components/field-group/field-group-suffix.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var FieldGroupSuffix = forwardRef4(
+  function FieldGroupSuffix2(props, ref) {
+    return /* @__PURE__ */ jsx5(FieldGroupDecorator, { ref, side: "suffix", ...props });
+  }
+);
+FieldGroupSuffix.displayName = "XAUI.FieldGroup.Suffix";
+
+// src/components/field-group/field-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 FieldGroupRoot = forwardRef5(function FieldGroup({ 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(FieldGroupProvider, { value: context, children: surface });
+});
+FieldGroupRoot.displayName = "XAUI.FieldGroup.Root";
+
+// src/components/field-group/index.ts
+var FieldGroup2 = Object.assign(FieldGroupRoot, {
+  Prefix: FieldGroupPrefix,
+  Field: FieldGroupField,
+  Suffix: FieldGroupSuffix,
+  Icon: FieldGroupIcon
+});
+
+export {
+  useFieldGroup,
+  decoratorPadding,
+  FieldGroupField,
+  FieldGroupIcon,
+  FieldGroupPrefix,
+  FieldGroupSuffix,
+  FieldGroupRoot,
+  FieldGroup2 as FieldGroup
+};