@cdx-ui/components 0.0.1-beta.13 → 0.0.1-beta.131

package/lib/commonjs/components/Tabs/styles.js

@@ -0,0 +1,333 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tabsTabVariants = exports.tabsTabLabelVariants = exports.tabsStyles = exports.tabsRootVariants = exports.tabsPanelVariants = exports.tabsOutlineTrackVariants = exports.tabsListVariants = exports.tabsListTrackVariants = exports.tabsListSolidShellVariants = exports.tabsListSolidShellBgVariants = exports.tabsListSolidScrollButtonVariants = exports.tabsListSolidScrollButtonSlotVariants = exports.tabsListScrollViewVariants = exports.tabsListScrollContainerVariants = exports.tabsListScrollButtonVariants = exports.tabsIndicatorVariants = exports.TABS_SOLID_SCROLL_FADE_SIZE = exports.TABS_SCROLL_FADE_SIZE = exports.TABS_INDICATOR_TRANSITION_MS = exports.OUTLINE_INDICATOR_THICKNESS = void 0;
+var _reactNative = require("react-native");
+var _classVarianceAuthority = require("class-variance-authority");
+var _constants = require("../../styles/constants");
+// Kept local (rather than imported from `./index`) to avoid a circular import — `index.tsx`
+// imports styles from this file.
+
+// `rounded-full` is used for the indicator + individual tabs, which are small enough that a
+// full capsule radius looks correct in both orientations.
+const SOLID_RADIUS = 'rounded-full';
+
+// `rounded-full` (`border-radius/round`, 9999px) for the indicator, tab capsules, and the
+// horizontal solid track/shell — matches Figma SegmentedControl (always much wider than tall,
+// so full rounding reads as a capsule). Applied via StyleSheet on the track/shell because
+// arbitrary-value radius classes don't reliably resolve through Uniwind's scanner.
+const SOLID_TRACK_RADIUS = 9999;
+
+/**
+ * Vertical solid track radius — deliberately *not* `SOLID_TRACK_RADIUS` (9999px). A vertical
+ * track's box can end up nearly square (few short tab labels stacked in a column), and a
+ * fully-round radius on a near-square box renders as a circle/blob instead of a rounded rect.
+ * A fixed, modest radius avoids that regardless of how many tabs are stacked or how wide their
+ * labels are.
+ */
+const SOLID_VERTICAL_TRACK_RADIUS = 20;
+
+/** Thickness of the 1px gray rail the outline indicator rides beside. */
+const OUTLINE_TRACK_THICKNESS = 1;
+/** Thickness of the 2px action-colored outline selection segment (animated size, not a class). */
+const OUTLINE_INDICATOR_THICKNESS = exports.OUTLINE_INDICATOR_THICKNESS = 2;
+
+/**
+ * Shared duration (ms) for the indicator's `withTiming` glide (`index.tsx`) and the tab's
+ * `duration-300` transition class (below) — kept in sync so the focus ring doesn't snap in
+ * ahead of a still-sliding solid/outline indicator. Change both together.
+ */
+const TABS_INDICATOR_TRANSITION_MS = exports.TABS_INDICATOR_TRANSITION_MS = 300;
+
+/** Outline horizontal scroll — narrow fade reads cleanly against the page background. */
+const TABS_SCROLL_FADE_SIZE = exports.TABS_SCROLL_FADE_SIZE = 32;
+
+/**
+ * Solid horizontal scroll — wider fade so tabs dissolve smoothly into the track (and under the
+ * overlay chevron) instead of ending in a hard clip at the scroll viewport edge.
+ */
+const TABS_SOLID_SCROLL_FADE_SIZE = exports.TABS_SOLID_SCROLL_FADE_SIZE = 40;
+
+/**
+ * Room reserved on the left/right sides inside the horizontal-scroll clip rect for ink that
+ * paints past a tab's own box: `shadow-sm` (`0px 1px 3px`, solid only) and the web focus ring
+ * (`ring-2` + `ring-offset-2`, ~4px, both variants). `overflow-x: auto` + `overflow-y: visible`
+ * does *not* achieve this — per the CSS Overflow spec, a non-`visible` value on one axis forces
+ * `visible` on the other axis to compute as `auto`, so it still clips. Applies to both variants —
+ * outline's ring bleeds past its box exactly the same way solid's does.
+ */
+/** Reserved ink room (focus ring, shadow) inside the horizontal-scroll clip rect — 4px (`p-1`). */
+const INDICATOR_BLEED = 4;
+
+/**
+ * Same bleed room as `INDICATOR_BLEED` on the top/bottom sides — kept equal to the solid shell's
+ * own `py-1` (below) so the shell's `overflow: hidden` clip boundary sits exactly where the
+ * reserved ink stops, with no gap and no clipping. Solid indicator = 32px, whole tablist = 40px
+ * per Figma SegmentedControl — a wider value here would inflate the shell past 40px.
+ */
+const INDICATOR_BLEED_VERTICAL = INDICATOR_BLEED;
+
+/**
+ * Numeric styles that can't be expressed as static Uniwind utility classes — solid track radius
+ * and outline indicator offset (`bottom-px` / `left-px` don't apply on Reanimated host views).
+ */
+const tabsStyles = exports.tabsStyles = _reactNative.StyleSheet.create({
+  solidTrack: {
+    borderRadius: SOLID_TRACK_RADIUS
+  },
+  /** See `SOLID_VERTICAL_TRACK_RADIUS` — used instead of `solidTrack` for vertical solid tracks. */
+  solidTrackVertical: {
+    borderRadius: SOLID_VERTICAL_TRACK_RADIUS
+  },
+  /** Clips scroll ink + edge fades to the solid shell's rounded rect (className radius alone won't). */
+  solidShell: {
+    borderRadius: SOLID_TRACK_RADIUS,
+    overflow: 'hidden'
+  },
+  horizontalScrollContent: {
+    paddingHorizontal: INDICATOR_BLEED,
+    paddingVertical: INDICATOR_BLEED_VERTICAL
+  },
+  horizontalScrollViewBleed: {
+    marginVertical: -INDICATOR_BLEED_VERTICAL
+  },
+  outlineIndicator: {
+    zIndex: 1
+  },
+  outlineIndicatorHorizontal: {
+    bottom: OUTLINE_TRACK_THICKNESS
+  },
+  outlineIndicatorVertical: {
+    left: OUTLINE_TRACK_THICKNESS
+  },
+  solidIndicator: {
+    zIndex: 0
+  },
+  /** Clips press/hover feedback to the solid tab capsule (`rounded-full` alone is not enough on Pressable). */
+  solidTabPressable: {
+    borderRadius: 9999,
+    overflow: 'hidden'
+  }
+});
+const tabsRootVariants = exports.tabsRootVariants = (0, _classVarianceAuthority.cva)([], {
+  variants: {
+    orientation: {
+      horizontal: 'flex-col',
+      vertical: 'flex-row items-start gap-4'
+    }
+  },
+  defaultVariants: {
+    orientation: 'horizontal'
+  }
+});
+const tabsListVariants = exports.tabsListVariants = (0, _classVarianceAuthority.cva)(['relative min-w-0']);
+
+/** Flex track that hosts the rail, indicator, and tab triggers. */
+const tabsListTrackVariants = exports.tabsListTrackVariants = (0, _classVarianceAuthority.cva)(['relative items-stretch'], {
+  variants: {
+    orientation: {
+      horizontal: 'flex-row',
+      vertical: 'flex-col'
+    },
+    variant: {
+      outline: '',
+      solid: 'gap-0.5'
+    },
+    /**
+     * When horizontal tabs scroll, the solid track background + radius live on
+     * `tabsListSolidShellVariants` (viewport-sized) so rounded corners aren't clipped
+     * by the ScrollView.
+     */
+    scrollable: {
+      true: '',
+      false: ''
+    }
+  },
+  compoundVariants: [{
+    orientation: 'vertical',
+    variant: 'outline',
+    className: 'gap-2 pl-1'
+  }, {
+    orientation: 'horizontal',
+    variant: 'outline',
+    className: 'pb-1'
+  }, {
+    variant: 'solid',
+    scrollable: false,
+    className: 'bg-surface-secondary p-1'
+  },
+  // Whole tablist = 40px per Figma SegmentedControl (`p-1` + 32px tab, above). Height-only —
+  // vertical solid lists size to their stacked tab content instead.
+  {
+    orientation: 'horizontal',
+    variant: 'solid',
+    scrollable: false,
+    className: 'h-10 max-h-10 min-h-10'
+  }],
+  defaultVariants: {
+    orientation: 'horizontal',
+    variant: 'solid',
+    scrollable: false
+  }
+});
+
+/**
+ * Viewport-sized solid shell for horizontal scroll — bg is a separate layer so overflow can stay
+ * visible. `py-1` (4px) matches the non-scrolling track's `p-1` exactly, so both the scrollable
+ * and non-scrollable solid paths land on the same 40px whole-tablist height (32px tab + 4px top
+ * + 4px bottom). `h-10`/`max-h-10`/`min-h-10` pin it explicitly so a taller-than-expected label
+ * line-height can't inflate the shell. `INDICATOR_BLEED_VERTICAL` (the ScrollView's own top/bottom
+ * reserved ink room, above) is kept equal to this `py-1` so the shell's `overflow: hidden` clip
+ * boundary lines up with where that reserved ink stops.
+ */
+const tabsListSolidShellVariants = exports.tabsListSolidShellVariants = (0, _classVarianceAuthority.cva)(['relative min-w-0 w-full py-1 h-10 max-h-10 min-h-10']);
+const tabsListSolidShellBgVariants = exports.tabsListSolidShellBgVariants = (0, _classVarianceAuthority.cva)(['absolute inset-0 bg-surface-secondary']);
+const tabsListScrollViewVariants = exports.tabsListScrollViewVariants = (0, _classVarianceAuthority.cva)(['w-full max-w-full']);
+const tabsListScrollContainerVariants = exports.tabsListScrollContainerVariants = (0, _classVarianceAuthority.cva)(['relative min-w-0 w-full']);
+
+// Outline: flex sibling beside the scroll viewport (outline scroll looks good this way).
+const tabsListScrollButtonVariants = exports.tabsListScrollButtonVariants = (0, _classVarianceAuthority.cva)(['z-10 flex h-6 w-6 shrink-0 items-center justify-center self-center rounded-full', _constants.TRANSITION_COLORS, _reactNative.Platform.select({
+  default: 'data-[active=true]:bg-surface-secondary-active',
+  web: 'data-[hover=true]:bg-surface-secondary-hover data-[active=true]:data-[hover=true]:bg-surface-secondary-active'
+})]);
+
+// Solid: tiny overlay on the edge fade — the scroll viewport stays full-width inside the shell so
+// the track radius + gradient read as one continuous surface (no hard clip before the chevron).
+const tabsListSolidScrollButtonVariants = exports.tabsListSolidScrollButtonVariants = (0, _classVarianceAuthority.cva)(['h-5 w-3 items-center justify-center rounded-full', _constants.TRANSITION_COLORS, _reactNative.Platform.select({
+  default: 'data-[active=true]:bg-surface-secondary-active',
+  web: 'data-[hover=true]:bg-surface-secondary-hover data-[active=true]:data-[hover=true]:bg-surface-secondary-active'
+})]);
+const tabsListSolidScrollButtonSlotVariants = exports.tabsListSolidScrollButtonSlotVariants = (0, _classVarianceAuthority.cva)(['pointer-events-none absolute inset-y-0 z-20 flex w-3 justify-center'], {
+  variants: {
+    position: {
+      start: 'left-1',
+      end: 'right-1'
+    }
+  }
+});
+
+// Horizontal: `h-px border-b` (1px). Vertical: Divider-style `w-px bg-*` (no border — `border`
+// on `w-px` doubles thickness to 2px). Gutter padding on the list keeps tabs off the rail.
+const tabsOutlineTrackVariants = exports.tabsOutlineTrackVariants = (0, _classVarianceAuthority.cva)(['absolute z-0'], {
+  variants: {
+    orientation: {
+      horizontal: 'bottom-0 left-0 right-0 h-px border-b border-stroke-secondary',
+      vertical: 'top-0 bottom-0 left-0 w-px h-full bg-stroke-secondary'
+    }
+  },
+  defaultVariants: {
+    orientation: 'horizontal'
+  }
+});
+const tabsIndicatorVariants = exports.tabsIndicatorVariants = (0, _classVarianceAuthority.cva)(['absolute'], {
+  variants: {
+    orientation: {
+      horizontal: '',
+      vertical: ''
+    },
+    variant: {
+      outline: 'bg-surface-action-strong',
+      solid: `${SOLID_RADIUS} bg-surface-primary shadow-sm`
+    }
+  },
+  compoundVariants: [
+  // Rail offset is in `tabsStyles.outlineIndicator*` (Reanimated host).
+  {
+    orientation: 'horizontal',
+    variant: 'outline',
+    className: 'left-0'
+  }, {
+    orientation: 'vertical',
+    variant: 'outline',
+    className: 'top-0'
+  }, {
+    variant: 'solid',
+    className: 'top-0 left-0'
+  }],
+  defaultVariants: {
+    orientation: 'horizontal',
+    variant: 'solid'
+  }
+});
+const tabsTabVariants = exports.tabsTabVariants = (0, _classVarianceAuthority.cva)(['relative z-10 items-center justify-center',
+// `transition` (not `transition-colors`) — its default property list includes `box-shadow`,
+// so the focus ring eases in over `TABS_INDICATOR_TRANSITION_MS` instead of snapping in
+// ahead of the indicator, which glides over the same duration (see `index.tsx`).
+'transition duration-300', 'data-[disabled=true]:opacity-[var(--opacity-disabled)]', _constants.DISABLED_CURSOR, _reactNative.Platform.select({
+  web: ['outline-none', 'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2'].join(' '),
+  default: ''
+})], {
+  variants: {
+    orientation: {
+      horizontal: '',
+      vertical: ''
+    },
+    variant: {
+      outline: '',
+      solid: `${SOLID_RADIUS} overflow-hidden`
+    }
+  },
+  compoundVariants: [
+  // `py-2` keeps horizontal outline tabs closer to the solid variant's compact 32px trigger
+  // height. The rail gap comes from the List's own `pb-1` compound variant (in
+  // `tabsListVariants`), not from this padding.
+  {
+    orientation: 'horizontal',
+    variant: 'outline',
+    className: 'px-4 py-2'
+  }, {
+    orientation: 'vertical',
+    variant: 'outline',
+    // Leave room for 1px rail + 2px indicator on the left.
+    className: 'px-4 py-1 pl-4'
+  },
+  // Ring-offset color defaults to the page background, which doesn't match the solid
+  // track's `bg-surface-secondary` — override it so the offset gap blends with the track
+  // instead of showing as a mismatched patch next to the ring. Explicit `h-8` (32px, per
+  // Figma SegmentedControl) instead of vertical padding — a fixed height, combined with the
+  // base class's `items-center`, centers the label regardless of its line-height, and can't
+  // drift the way padding-derived sizing could.
+  {
+    variant: 'solid',
+    className: ['h-8 max-h-8 min-h-8 px-4', 'web:data-[focus-visible=true]:ring-offset-surface-secondary'].join(' ')
+  }],
+  defaultVariants: {
+    orientation: 'horizontal',
+    variant: 'solid'
+  }
+});
+const tabsPanelVariants = exports.tabsPanelVariants = (0, _classVarianceAuthority.cva)(['data-[state=inactive]:hidden'], {
+  variants: {
+    orientation: {
+      horizontal: '',
+      vertical: 'flex-1'
+    }
+  },
+  defaultVariants: {
+    orientation: 'horizontal'
+  }
+});
+const tabsTabLabelVariants = exports.tabsTabLabelVariants = (0, _classVarianceAuthority.cva)('body-md', {
+  variants: {
+    state: {
+      // Selection state is a CVA input (not a `data-[]` selector) so inactive/active
+      // typography reconciles on native — `data-[state=active]:` on `Text` is unreliable
+      // there, and `font-sans-medium` / `font-sans-semibold` are the same family on iOS/Android
+      // so weight must come from `font-medium` / `font-semibold` instead.
+      inactive: _reactNative.Platform.select({
+        web: 'font-sans-medium text-content-secondary',
+        default: 'font-medium text-content-secondary'
+      }),
+      active: _reactNative.Platform.select({
+        web: 'font-sans-semibold text-content-primary',
+        default: 'font-semibold text-content-primary'
+      })
+    }
+  },
+  defaultVariants: {
+    state: 'inactive'
+  }
+});
+//# sourceMappingURL=styles.js.map

package/lib/commonjs/components/Tabs/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_classVarianceAuthority","_constants","SOLID_RADIUS","SOLID_TRACK_RADIUS","SOLID_VERTICAL_TRACK_RADIUS","OUTLINE_TRACK_THICKNESS","OUTLINE_INDICATOR_THICKNESS","exports","TABS_INDICATOR_TRANSITION_MS","TABS_SCROLL_FADE_SIZE","TABS_SOLID_SCROLL_FADE_SIZE","INDICATOR_BLEED","INDICATOR_BLEED_VERTICAL","tabsStyles","StyleSheet","create","solidTrack","borderRadius","solidTrackVertical","solidShell","overflow","horizontalScrollContent","paddingHorizontal","paddingVertical","horizontalScrollViewBleed","marginVertical","outlineIndicator","zIndex","outlineIndicatorHorizontal","bottom","outlineIndicatorVertical","left","solidIndicator","solidTabPressable","tabsRootVariants","cva","variants","orientation","horizontal","vertical","defaultVariants","tabsListVariants","tabsListTrackVariants","variant","outline","solid","scrollable","true","false","compoundVariants","className","tabsListSolidShellVariants","tabsListSolidShellBgVariants","tabsListScrollViewVariants","tabsListScrollContainerVariants","tabsListScrollButtonVariants","TRANSITION_COLORS","Platform","select","default","web","tabsListSolidScrollButtonVariants","tabsListSolidScrollButtonSlotVariants","position","start","end","tabsOutlineTrackVariants","tabsIndicatorVariants","tabsTabVariants","DISABLED_CURSOR","join","tabsPanelVariants","tabsTabLabelVariants","state","inactive","active"],"sourceRoot":"../../../../src","sources":["components/Tabs/styles.ts"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/Text/styles.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.textStyle = void 0;
 var _reactNative = require("react-native");
 var _classVarianceAuthority = require("class-variance-authority");
-const textStyle = exports.textStyle = (0, _classVarianceAuthority.cva)([`text-content-primary font-normal`, _reactNative.Platform.select({
-  web: 'font-sans my-0 bg-transparent display-inline no-underline',
+const textStyle = exports.textStyle = (0, _classVarianceAuthority.cva)(['text-content-primary', _reactNative.Platform.select({
+  web: 'font-body my-0 bg-transparent no-underline',
   default: ''
 })], {
   variants: {

package/lib/commonjs/components/Text/styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_classVarianceAuthority","textStyle","exports","cva","Platform","select","web","default","variants","size","xl","lg","md","sm","xs"],"sourceRoot":"../../../../src","sources":["components/Text/styles.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AAEO,MAAME,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,IAAAE,2BAAG,EAC1B,CACE,kCAAkC,EAClCC,qBAAQ,CAACC,MAAM,CAAC;EACdC,GAAG,EAAE,2DAA2D;EAChEC,OAAO,EAAE;AACX,CAAC,CAAC,CACH,EACD;EACEC,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE;IACN;EACF;AACF,CACF,CAAC","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_classVarianceAuthority","textStyle","exports","cva","Platform","select","web","default","variants","size","xl","lg","md","sm","xs"],"sourceRoot":"../../../../src","sources":["components/Text/styles.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AAEO,MAAME,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,IAAAE,2BAAG,EAC1B,CACE,sBAAsB,EACtBC,qBAAQ,CAACC,MAAM,CAAC;EACdC,GAAG,EAAE,4CAA4C;EACjDC,OAAO,EAAE;AACX,CAAC,CAAC,CACH,EACD;EACEC,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE;IACN;EACF;AACF,CACF,CAAC","ignoreList":[]}

package/lib/commonjs/components/Textarea/index.js

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Textarea = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _primitives = require("@cdx-ui/primitives");
+var _utils = require("@cdx-ui/utils");
+var _styles = require("./styles");
+var _jsxRuntime = require("react/jsx-runtime");
+// Initial/minimum visible rows. Web textareas render compactly, so a smaller default
+// reads better there; native has no intrinsic multiline height, so it needs more.
+const DEFAULT_MIN_ROWS = _reactNative.Platform.select({
+  web: 2,
+  default: 8
+});
+
+// Explicit per-size line height (px) set on the field so `rows * lineHeight` maps to an
+// exact pixel height on native. Values track the field font sizes in `styles.ts`.
+const LINE_HEIGHT_BY_SIZE = {
+  default: 20,
+  small: 16
+};
+
+// Module-scoped latch so the dev conflict warning fires at most once per session.
+let hasWarnedResizeAutoGrowConflict = false;
+const Textarea = exports.Textarea = /*#__PURE__*/(0, _react.forwardRef)(({
+  variant = 'outline',
+  size = 'default',
+  isDisabled,
+  isInvalid,
+  isReadOnly,
+  isRequired,
+  isFocused,
+  isHovered,
+  isFullWidth,
+  className,
+  placeholderTextColorClassName,
+  style,
+  numberOfLines,
+  autoGrow = false,
+  maxRows,
+  resize = 'none',
+  onContentSizeChange,
+  ...rest
+}, ref) => {
+  const minRows = numberOfLines ?? DEFAULT_MIN_ROWS;
+  const lineHeight = LINE_HEIGHT_BY_SIZE[size ?? 'default'];
+  const minHeight = minRows * lineHeight;
+  const maxHeight = maxRows != null ? maxRows * lineHeight : undefined;
+  const isWeb = _reactNative.Platform.OS === 'web';
+  // Web user-resize wins over auto-grow; the two are mutually exclusive.
+  const userResizable = isWeb && resize === 'vertical';
+  const effectiveAutoGrow = autoGrow && !userResizable;
+  (0, _react.useEffect)(() => {
+    if (__DEV__ && autoGrow && resize === 'vertical' && !hasWarnedResizeAutoGrowConflict) {
+      hasWarnedResizeAutoGrowConflict = true;
+      console.warn('[Textarea] `autoGrow` and `resize="vertical"` are mutually exclusive. ' + '`resize` takes precedence and `autoGrow` is ignored.');
+    }
+  }, [autoGrow, resize]);
+
+  // Native auto-grow: track the measured content height so we can enable internal
+  // scrolling once it passes the `maxRows` cap. Growth itself is handled natively
+  // (see `nativeScrollEnabled`), not by pinning a height here.
+  const [measuredHeight, setMeasuredHeight] = (0, _react.useState)(undefined);
+  const handleContentSizeChange = event => {
+    if (!isWeb && effectiveAutoGrow) {
+      setMeasuredHeight(event.nativeEvent.contentSize.height);
+    }
+  };
+
+  // On native, a multiline TextInput only grows to fit its content when scrolling is
+  // disabled — an explicit height or an enabled scroll view pins it. So for auto-grow we
+  // keep `scrollEnabled` off (letting the view size itself between min/max) and only turn
+  // scrolling back on once the content exceeds the `maxRows` cap. Undefined elsewhere
+  // (web + fixed height) leaves React Native's default (`true`) so overflow scrolls.
+  const nativeScrollEnabled = !isWeb && effectiveAutoGrow ? maxHeight != null && measuredHeight != null && measuredHeight > maxHeight : undefined;
+
+  // Auto-grow (web + native) and fixed sizing all bound the field with min/max height and
+  // never pin an explicit `height`: web grows via `field-sizing: content`, native grows via
+  // the disabled scroll view above, and the fixed case simply floors at `minHeight`.
+  const heightStyle = !isWeb && !effectiveAutoGrow ? {
+    minHeight
+  } : {
+    minHeight,
+    maxHeight
+  };
+
+  // `textAlignVertical` is set in style (not just the prop) so it overrides the Android
+  // primitive's `center` default — style wins over the deprecated prop.
+  const fieldStyle = {
+    lineHeight,
+    textAlignVertical: 'top',
+    ...heightStyle
+  };
+
+  // `className` applies to the root (the visible bordered box), matching the flat
+  // CurrencyInput pattern. Field-level utilities below are internal sizing concerns.
+  const fieldClassName = (0, _utils.cn)((0, _styles.textareaFieldVariants)({
+    size
+  }), effectiveAutoGrow && 'web:[field-sizing:content]', userResizable ? 'web:[resize:vertical]' : 'web:[resize:none]');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.InputRoot, {
+    isDisabled: isDisabled,
+    isInvalid: isInvalid,
+    isReadOnly: isReadOnly,
+    isRequired: isRequired,
+    isFocused: isFocused,
+    isHovered: isHovered,
+    isFullWidth: isFullWidth,
+    className: (0, _utils.cn)((0, _styles.textareaRootVariants)({
+      variant,
+      size
+    }), className),
+    style: style,
+    ...(0, _primitives.dataAttributes)({
+      slot: 'textarea'
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.InputField, {
+      ref: ref,
+      placeholderTextColorClassName: (0, _utils.cn)((0, _styles.textareaFieldPlaceholderVariants)(), placeholderTextColorClassName),
+      ...rest,
+      multiline: true,
+      numberOfLines: isWeb ? minRows : undefined,
+      textAlignVertical: "top",
+      scrollEnabled: nativeScrollEnabled,
+      className: fieldClassName,
+      style: fieldStyle,
+      onContentSizeChange: (0, _utils.composeEventHandlers)(onContentSizeChange, handleContentSizeChange)
+    })
+  });
+});
+Textarea.displayName = 'Textarea';
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/Textarea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_primitives","_utils","_styles","_jsxRuntime","DEFAULT_MIN_ROWS","Platform","select","web","default","LINE_HEIGHT_BY_SIZE","small","hasWarnedResizeAutoGrowConflict","Textarea","exports","forwardRef","variant","size","isDisabled","isInvalid","isReadOnly","isRequired","isFocused","isHovered","isFullWidth","className","placeholderTextColorClassName","style","numberOfLines","autoGrow","maxRows","resize","onContentSizeChange","rest","ref","minRows","lineHeight","minHeight","maxHeight","undefined","isWeb","OS","userResizable","effectiveAutoGrow","useEffect","__DEV__","console","warn","measuredHeight","setMeasuredHeight","useState","handleContentSizeChange","event","nativeEvent","contentSize","height","nativeScrollEnabled","heightStyle","fieldStyle","textAlignVertical","fieldClassName","cn","textareaFieldVariants","jsx","InputRoot","textareaRootVariants","dataAttributes","slot","children","InputField","textareaFieldPlaceholderVariants","multiline","scrollEnabled","composeEventHandlers","displayName"],"sourceRoot":"../../../../src","sources":["components/Textarea/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/Textarea/styles.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.textareaRootVariants = exports.textareaFieldVariants = exports.textareaFieldPlaceholderVariants = void 0;
+var _classVarianceAuthority = require("class-variance-authority");
+var _constants = require("../../styles/constants");
+const textareaRootVariants = exports.textareaRootVariants = (0, _classVarianceAuthority.cva)([
+// Multiline shell: stretch the field to full width and let the shell grow with it
+// (no fixed height, no overflow-hidden so a web resize handle is never clipped).
+'w-full flex-row items-stretch', 'bg-surface-primary', 'border-solid border-stroke-primary', 'web:border-default native:border-[length:var(--border-width-default)]', 'rounded-[var(--border-radius-default)]', _constants.TRANSITION_COLORS, 'data-[disabled=true]:bg-surface-secondary', 'data-[disabled=true]:opacity-[var(--opacity-disabled)]', _constants.DISABLED_CURSOR, 'data-[readonly=true]:cursor-default', 'data-[readonly=true]:bg-surface-secondary', 'web:data-[hover=true]:data-[focus=false]:data-[invalid=false]:border-stroke-hover',
+// Web: inset ring avoids a border-width change so the shell never shifts on focus.
+// Recolor the border to match the ring so the two read as a single focus outline
+// instead of a gray border + colored ring.
+'web:data-[focus=true]:ring-inset', 'web:data-[focus=true]:ring-[length:var(--border-width-focused)]', 'web:data-[focus=true]:data-[invalid=false]:ring-stroke-action', 'web:data-[focus=true]:data-[invalid=false]:border-stroke-action', 'web:data-[focus=true]:data-[invalid=true]:ring-stroke-danger', 'web:data-[focus=true]:data-[invalid=true]:border-stroke-danger',
+// Native: thicker border on focus; size variants subtract a hairline of padding
+// so layout doesn't shift by 1px.
+'native:data-[focus=true]:border-[length:var(--border-width-focused)]', 'native:data-[field-state=focused]:border-stroke-action', 'native:data-[field-state=focused-invalid]:border-stroke-danger', 'data-[invalid=true]:border-stroke-danger'], {
+  variants: {
+    variant: {
+      outline: []
+    },
+    size: {
+      default: ['px-4 py-3 gap-4', 'native:data-[focus=true]:px-[calc(var(--spacing-4)-var(--spacing-px))]', 'native:data-[focus=true]:py-[calc(var(--spacing-3)-var(--spacing-px))]'],
+      small: ['px-3 py-2 gap-1.5', 'native:data-[focus=true]:px-[calc(var(--spacing-3)-var(--spacing-px))]', 'native:data-[focus=true]:py-[calc(var(--spacing-2)-var(--spacing-px))]']
+    }
+  },
+  defaultVariants: {
+    variant: 'outline',
+    size: 'default'
+  }
+});
+const textareaFieldVariants = exports.textareaFieldVariants = (0, _classVarianceAuthority.cva)([
+// `min-w-0` lets the field shrink below its intrinsic content width so the shell
+// never overflows (mirrors the Input field rationale).
+'flex-1 min-w-0 bg-transparent p-0', 'text-content-primary', 'placeholder:text-content-tertiary', 'web:outline-none', 'tracking-normal'], {
+  variants: {
+    size: {
+      default: 'text-[0.875rem]',
+      small: 'text-[0.75rem]'
+    }
+  },
+  defaultVariants: {
+    size: 'default'
+  }
+});
+const textareaFieldPlaceholderVariants = exports.textareaFieldPlaceholderVariants = (0, _classVarianceAuthority.cva)(['accent-content-tertiary']);
+//# sourceMappingURL=styles.js.map

package/lib/commonjs/components/Textarea/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_classVarianceAuthority","require","_constants","textareaRootVariants","exports","cva","TRANSITION_COLORS","DISABLED_CURSOR","variants","variant","outline","size","default","small","defaultVariants","textareaFieldVariants","textareaFieldPlaceholderVariants"],"sourceRoot":"../../../../src","sources":["components/Textarea/styles.ts"],"mappings":";;;;;;AAAA,IAAAA,uBAAA,GAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AAEO,MAAME,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAG,IAAAE,2BAAG,EACrC;AACE;AACA;AACA,+BAA+B,EAC/B,oBAAoB,EACpB,oCAAoC,EACpC,uEAAuE,EACvE,wCAAwC,EACxCC,4BAAiB,EACjB,2CAA2C,EAC3C,wDAAwD,EACxDC,0BAAe,EACf,qCAAqC,EACrC,2CAA2C,EAC3C,mFAAmF;AACnF;AACA;AACA;AACA,kCAAkC,EAClC,iEAAiE,EACjE,+DAA+D,EAC/D,iEAAiE,EACjE,8DAA8D,EAC9D,gEAAgE;AAChE;AACA;AACA,sEAAsE,EACtE,wDAAwD,EACxD,gEAAgE,EAChE,0CAA0C,CAC3C,EACD;EACEC,QAAQ,EAAE;IACRC,OAAO,EAAE;MACPC,OAAO,EAAE;IACX,CAAC;IACDC,IAAI,EAAE;MACJC,OAAO,EAAE,CACP,iBAAiB,EACjB,wEAAwE,EACxE,wEAAwE,CACzE;MACDC,KAAK,EAAE,CACL,mBAAmB,EACnB,wEAAwE,EACxE,wEAAwE;IAE5E;EACF,CAAC;EACDC,eAAe,EAAE;IACfL,OAAO,EAAE,SAAS;IAClBE,IAAI,EAAE;EACR;AACF,CACF,CAAC;AAEM,MAAMI,qBAAqB,GAAAX,OAAA,CAAAW,qBAAA,GAAG,IAAAV,2BAAG,EACtC;AACE;AACA;AACA,mCAAmC,EACnC,sBAAsB,EACtB,mCAAmC,EACnC,kBAAkB,EAClB,iBAAiB,CAClB,EACD;EACEG,QAAQ,EAAE;IACRG,IAAI,EAAE;MACJC,OAAO,EAAE,iBAAiB;MAC1BC,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfH,IAAI,EAAE;EACR;AACF,CACF,CAAC;AAEM,MAAMK,gCAAgC,GAAAZ,OAAA,CAAAY,gCAAA,GAAG,IAAAX,2BAAG,EAAC,CAAC,yBAAyB,CAAC,CAAC","ignoreList":[]}