@pickle-ui/react-native 1.0.0-beta.0 → 1.0.0-beta.2

package/dist/components/Grid.d.ts

@@ -0,0 +1,36 @@
+import { View } from 'react-native';
+import { type LayoutAlign, type LayoutGap, type LayoutJustify } from './_internal/layout';
+type GridFlow = 'column' | 'column-dense' | 'dense' | 'row' | 'row-dense';
+type GridPlaceContent = 'baseline' | 'stretch' | LayoutJustify;
+type GridTrackCount = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type GridProps = React.ComponentProps<typeof View> & {
+    /**
+     * Places each item down its cell, like CSS `align-items`. `stretch` and
+     * `baseline` place it at the top: give the item `flex-1` to fill the cell.
+     */
+    align?: LayoutAlign;
+    columns?: GridTrackCount;
+    /**
+     * Fills rows first (`row`) or columns first (`column`). Items can't span
+     * cells on native, so the `dense` flows place them like `row` and `column`.
+     */
+    flow?: GridFlow;
+    gap?: LayoutGap;
+    gapX?: LayoutGap;
+    gapY?: LayoutGap;
+    /** Distributes the cells along each row, like CSS `justify-content`. */
+    justify?: LayoutJustify;
+    /** Distributes the rows and the cells, like CSS `place-content`. */
+    placeContent?: GridPlaceContent;
+    /** Places each item across and down its cell, like CSS `place-items`. */
+    placeItems?: LayoutAlign;
+    rows?: GridTrackCount;
+};
+/**
+ * Lays its children out in equal columns, like `Grid` in @pickle-ui/react.
+ * Items fill their cell's width by default and the cells of a row share its
+ * height.
+ */
+export declare function Grid({ align, children, className, columns, flow, gap, gapX, gapY, justify, placeContent, placeItems, rows, ...props }: GridProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Grid.d.ts.map

package/dist/components/Grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/components/Grid.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,SAAS,EACd,KAAK,aAAa,EACnB,MAAM,oBAAoB,CAAC;AAO5B,KAAK,QAAQ,GAAG,QAAQ,GAAG,cAAc,GAAG,OAAO,GAAG,KAAK,GAAG,WAAW,CAAC;AAC1E,KAAK,gBAAgB,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,CAAC;AAC/D,KAAK,cAAc,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAqCvE,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,GAAG;IAC1D;;;OAGG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,oEAAoE;IACpE,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,yEAAyE;IACzE,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,OAAO,EACP,IAAY,EACZ,GAAG,EACH,IAAU,EACV,IAAU,EACV,OAAO,EACP,YAAY,EACZ,UAAU,EACV,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,SAAS,+BAyDX"}

package/dist/components/Grid.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, Fragment, isValidElement } from 'react';
+import { View } from 'react-native';
+import { cn } from '../lib/cn';
+import { gapXClasses, gapYClasses, } from './_internal/layout';
+// Cells are columns: `items-*` places an item across the cell's width and
+// `justify-*` down its height. A cell can't stretch an item vertically, so
+// `stretch` and `baseline` place it at the top; give the item `flex-1` to fill
+// its cell's height.
+const horizontalClasses = {
+    baseline: 'items-start',
+    center: 'items-center',
+    end: 'items-end',
+    start: 'items-start',
+    stretch: 'items-stretch',
+};
+const verticalClasses = {
+    baseline: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end',
+    start: 'justify-start',
+    stretch: 'justify-start',
+};
+// Distributes the rows down the grid and the cells along each row, like CSS
+// `align-content` and `justify-content`. Cells share each row's width, so only
+// a grid taller than its rows shows the difference; `stretch` grows the rows
+// into that height instead.
+const contentClasses = {
+    around: 'justify-around',
+    baseline: 'justify-start',
+    between: 'justify-between',
+    center: 'justify-center',
+    end: 'justify-end',
+    evenly: 'justify-evenly',
+    start: 'justify-start',
+    stretch: 'justify-start',
+};
+/**
+ * Lays its children out in equal columns, like `Grid` in @pickle-ui/react.
+ * Items fill their cell's width by default and the cells of a row share its
+ * height.
+ */
+export function Grid({ align, children, className, columns, flow = 'row', gap, gapX = gap, gapY = gap, justify, placeContent, placeItems, rows, ...props }) {
+    const items = flattenChildren(children);
+    const byColumn = flow === 'column' || flow === 'column-dense';
+    const rowCount = byColumn
+        ? (rows ?? 1)
+        : Math.max(rows ?? 0, Math.ceil(items.length / (columns ?? 1)));
+    const columnCount = byColumn
+        ? Math.max(columns ?? 1, Math.ceil(items.length / rowCount))
+        : (columns ?? 1);
+    const vertical = placeItems ?? align;
+    const distribution = placeContent ?? justify;
+    return (_jsx(View, { className: cn(gapY === undefined ? undefined : gapYClasses[gapY], placeContent === undefined ? undefined : contentClasses[placeContent], className), ...props, children: Array.from({ length: rowCount }, (_, row) => (_jsx(View, { className: cn('flex-row', gapX === undefined ? undefined : gapXClasses[gapX], distribution === undefined
+                ? undefined
+                : contentClasses[distribution], placeContent === 'stretch' ? 'grow' : undefined), children: Array.from({ length: columnCount }, (_, column) => (_jsx(View, { className: cn('flex-1', placeItems === undefined
+                    ? undefined
+                    : horizontalClasses[placeItems], vertical === undefined ? undefined : verticalClasses[vertical]), children: items[byColumn
+                    ? column * rowCount + row
+                    : row * columnCount + column] }, column))) }, row))) }));
+}
+/** The grid items, with fragments opened up as on the web. */
+function flattenChildren(children) {
+    return Children.toArray(children).flatMap((child) => isValidElement(child) && child.type === Fragment
+        ? flattenChildren(child.props.children)
+        : [child]);
+}
+//# sourceMappingURL=Grid.js.map

package/dist/components/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../src/components/Grid.tsx"],"names":[],"mappings":"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"}

package/dist/components/Separator.d.ts

@@ -0,0 +1,11 @@
+import { View } from 'react-native';
+export type SeparatorProps = React.ComponentProps<typeof View> & {
+    orientation?: 'horizontal' | 'vertical';
+};
+/**
+ * A 1px rule in the border color, like `Separator` in @pickle-ui/react. Its
+ * `separator` role reaches screen readers on the web; iOS and Android have no
+ * separator trait, so they skip it like any non-focusable view.
+ */
+export declare function Separator({ className, orientation, ...props }: SeparatorProps): import("react").JSX.Element;
+//# sourceMappingURL=Separator.d.ts.map

package/dist/components/Separator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../src/components/Separator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIpC,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,GAAG;IAC/D,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,WAA0B,EAC1B,GAAG,KAAK,EACT,EAAE,cAAc,+BAYhB"}

package/dist/components/Separator.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { cn } from '../lib/cn';
+/**
+ * A 1px rule in the border color, like `Separator` in @pickle-ui/react. Its
+ * `separator` role reaches screen readers on the web; iOS and Android have no
+ * separator trait, so they skip it like any non-focusable view.
+ */
+export function Separator({ className, orientation = 'horizontal', ...props }) {
+    return (_jsx(View, { className: cn('bg-border shrink-0', orientation === 'horizontal' ? 'h-px w-full' : 'w-px self-stretch', className), role: "separator", ...props }));
+}
+//# sourceMappingURL=Separator.js.map

package/dist/components/Separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.js","sourceRoot":"","sources":["../../src/components/Separator.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAM/B;;;;GAIG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,SAAS,EACT,WAAW,GAAG,YAAY,EAC1B,GAAG,KAAK,EACO;IACf,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,CACX,oBAAoB,EACpB,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,mBAAmB,EAClE,SAAS,CACV,EACD,IAAI,EAAC,WAAW,KACZ,KAAK,GACT,CACH,CAAC;AACJ,CAAC"}

package/dist/components/Spinner.d.ts

@@ -0,0 +1,14 @@
+import { View } from 'react-native';
+export type SpinnerProps = Omit<React.ComponentProps<typeof View>, 'children'> & {
+    /** Hides the spinner from screen readers, when visible text already says what is loading. */
+    'aria-hidden'?: boolean;
+};
+/**
+ * The web `Spinner`'s look on native: a three-quarter ring turning once a
+ * second, drawn inside a `size-6` box like the web icon. Size it with
+ * `size-*` and color it with `text-*`, as on the web. Announced as "Loading"
+ * by default; `accessibilityLabel` replaces the name and `aria-hidden` makes
+ * it decorative.
+ */
+export declare function Spinner({ accessibilityLabel, 'aria-hidden': ariaHidden, className, style, ...props }: SpinnerProps): import("react").JSX.Element;
+//# sourceMappingURL=Spinner.d.ts.map

package/dist/components/Spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/components/Spinner.tsx"],"names":[],"mappings":"AACA,OAAO,EAA8B,IAAI,EAAE,MAAM,cAAc,CAAC;AAKhE,MAAM,MAAM,YAAY,GAAG,IAAI,CAC7B,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EACjC,UAAU,CACX,GAAG;IACF,6FAA6F;IAC7F,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,EACtB,kBAA8B,EAC9B,aAAa,EAAE,UAAkB,EACjC,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,YAAY,+BA+Cd"}

package/dist/components/Spinner.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Animated, Easing, Platform, View } from 'react-native';
+import { useResolveClassNames } from 'uniwind';
+import { cn } from '../lib/cn';
+/**
+ * The web `Spinner`'s look on native: a three-quarter ring turning once a
+ * second, drawn inside a `size-6` box like the web icon. Size it with
+ * `size-*` and color it with `text-*`, as on the web. Announced as "Loading"
+ * by default; `accessibilityLabel` replaces the name and `aria-hidden` makes
+ * it decorative.
+ */
+export function Spinner({ accessibilityLabel = 'Loading', 'aria-hidden': ariaHidden = false, className, style, ...props }) {
+    const [turn] = useState(() => new Animated.Value(0));
+    const box = cn('text-foreground size-6', className);
+    // React Native has no `currentColor`: the ring reads the `text-*` color, and
+    // its stroke follows the box like the icon's (2px at 24px).
+    const { color, width } = useResolveClassNames(box);
+    const strokeWidth = typeof width === 'number' ? width / 12 : 2;
+    useEffect(() => {
+        const loop = Animated.loop(Animated.timing(turn, {
+            duration: 1000,
+            easing: Easing.linear,
+            toValue: 1,
+            // react-native-web has no native driver and warns when asked for it.
+            useNativeDriver: Platform.OS !== 'web',
+        }));
+        loop.start();
+        return () => loop.stop();
+    }, [turn]);
+    const rotate = turn.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '360deg'],
+    });
+    return (_jsx(Animated.View, { accessibilityLabel: ariaHidden ? undefined : accessibilityLabel, accessibilityRole: ariaHidden ? undefined : 'progressbar', accessible: !ariaHidden, "aria-hidden": ariaHidden, className: cn('items-center justify-center', box), style: [style, { transform: [{ rotate }] }], ...props, children: _jsx(View, { className: "size-3/4 rounded-full", style: {
+                borderColor: typeof color === 'string' ? color : undefined,
+                borderTopColor: 'transparent',
+                borderWidth: strokeWidth,
+            } }) }));
+}
+//# sourceMappingURL=Spinner.js.map

package/dist/components/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../src/components/Spinner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAU/B;;;;;;GAMG;AACH,MAAM,UAAU,OAAO,CAAC,EACtB,kBAAkB,GAAG,SAAS,EAC9B,aAAa,EAAE,UAAU,GAAG,KAAK,EACjC,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACK;IACb,MAAM,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IACrD,MAAM,GAAG,GAAG,EAAE,CAAC,wBAAwB,EAAE,SAAS,CAAC,CAAC;IACpD,6EAA6E;IAC7E,4DAA4D;IAC5D,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,oBAAoB,CAAC,GAAG,CAAC,CAAC;IACnD,MAAM,WAAW,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAE/D,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CACxB,QAAQ,CAAC,MAAM,CAAC,IAAI,EAAE;YACpB,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,MAAM,CAAC,MAAM;YACrB,OAAO,EAAE,CAAC;YACV,qEAAqE;YACrE,eAAe,EAAE,QAAQ,CAAC,EAAE,KAAK,KAAK;SACvC,CAAC,CACH,CAAC;QACF,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,OAAO,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC;QAC9B,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QAClB,WAAW,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC;KAChC,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,QAAQ,CAAC,IAAI,IACZ,kBAAkB,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,kBAAkB,EAC/D,iBAAiB,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,EACzD,UAAU,EAAE,CAAC,UAAU,iBACV,UAAU,EACvB,SAAS,EAAE,EAAE,CAAC,6BAA6B,EAAE,GAAG,CAAC,EACjD,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,KACvC,KAAK,YAET,KAAC,IAAI,IACH,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE;gBACL,WAAW,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;gBAC1D,cAAc,EAAE,aAAa;gBAC7B,WAAW,EAAE,WAAW;aACzB,GACD,GACY,CACjB,CAAC;AACJ,CAAC"}

package/dist/components/Text.d.ts

@@ -2,9 +2,13 @@ import { type VariantProps } from 'class-variance-authority';
 import { Text as NativeText } from 'react-native';
 declare const textVariants: (props?: ({
     tone?: "destructive" | "muted" | "primary" | null | undefined;
-    variant?: "body" | "h1" | "h2" | "h3" | "h4" | "small" | "lead" | null | undefined;
+    variant?: "body" | "code" | "h1" | "h2" | "h3" | "h4" | "lead" | "small" | null | undefined;
+    weight?: "bold" | "normal" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export type TextProps = React.ComponentProps<typeof NativeText> & VariantProps<typeof textVariants>;
-export declare function Text({ className, tone, variant, ...props }: TextProps): import("react").JSX.Element;
+export type TextProps = React.ComponentProps<typeof NativeText> & VariantProps<typeof textVariants> & {
+    /** Cuts the text to one line with an ellipsis. */
+    truncate?: boolean;
+};
+export declare function Text({ className, style, tone, truncate, variant, weight, ...props }: TextProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=Text.d.ts.map

package/dist/components/Text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/components/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AAKlD,QAAA,MAAM,YAAY;;;8EAkBhB,CAAC;AAEH,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,GAC7D,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AAEpC,wBAAgB,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,+BAOrE"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/components/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,IAAI,IAAI,UAAU,EAAwB,MAAM,cAAc,CAAC;AAMxE,QAAA,MAAM,YAAY;;;;8EAuBhB,CAAC;AAUH,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,GAC7D,YAAY,CAAC,OAAO,YAAY,CAAC,GAAG;IAClC,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEJ,wBAAgB,IAAI,CAAC,EACnB,SAAS,EACT,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,OAAgB,EAChB,MAAM,EACN,GAAG,KAAK,EACT,EAAE,SAAS,+BAYX"}

package/dist/components/Text.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from 'class-variance-authority';
-import { Text as NativeText } from 'react-native';
+import { Text as NativeText, Platform, StyleSheet } from 'react-native';
 import { cn } from '../lib/cn';
-// Same variant and tone names as `Text` in @pickle-ui/react.
+// Same variants, tones and weights as `Text` in @pickle-ui/react, sized by the
+// shared type scale (`@pickle-ui/tokens/typography.css`).
 const textVariants = cva('text-foreground', {
     defaultVariants: { variant: 'body' },
     variants: {
@@ -12,17 +13,28 @@ const textVariants = cva('text-foreground', {
             primary: 'text-primary',
         },
         variant: {
-            body: 'text-sm',
-            h1: 'text-3xl font-semibold tracking-tight',
-            h2: 'text-2xl font-semibold tracking-tight',
-            h3: 'text-xl font-semibold',
-            h4: 'text-lg font-medium',
-            lead: 'text-base',
-            small: 'text-xs',
+            body: 'text-body',
+            code: 'text-code bg-muted self-start overflow-hidden rounded px-2 py-1',
+            h1: 'text-h1 font-semibold tracking-tight',
+            h2: 'text-h2 font-semibold tracking-tight',
+            h3: 'text-h3 font-semibold',
+            h4: 'text-h4 font-medium',
+            lead: 'text-lead',
+            small: 'text-small',
+        },
+        weight: {
+            bold: 'font-semibold',
+            normal: 'font-normal',
         },
     },
 });
-export function Text({ className, tone, variant, ...props }) {
-    return (_jsx(NativeText, { className: cn(textVariants({ tone, variant }), className), ...props }));
+const HEADINGS = new Set(['h1', 'h2', 'h3', 'h4']);
+// Uniwind passes `font-mono`'s web font stack through as is, which native
+// fonts don't resolve, so `code` names each platform's monospace font.
+const styles = StyleSheet.create({
+    code: { fontFamily: Platform.select({ default: 'monospace', ios: 'Menlo' }) },
+});
+export function Text({ className, style, tone, truncate, variant = 'body', weight, ...props }) {
+    return (_jsx(NativeText, { accessibilityRole: variant && HEADINGS.has(variant) ? 'header' : undefined, className: cn(textVariants({ tone, variant, weight }), className), numberOfLines: truncate ? 1 : undefined, style: variant === 'code' ? [styles.code, style] : style, ...props }));
 }
 //# sourceMappingURL=Text.js.map

package/dist/components/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/components/Text.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AAElD,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAE/B,6DAA6D;AAC7D,MAAM,YAAY,GAAG,GAAG,CAAC,iBAAiB,EAAE;IAC1C,eAAe,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;IACpC,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,WAAW,EAAE,kBAAkB;YAC/B,KAAK,EAAE,uBAAuB;YAC9B,OAAO,EAAE,cAAc;SACxB;QACD,OAAO,EAAE;YACP,IAAI,EAAE,SAAS;YACf,EAAE,EAAE,uCAAuC;YAC3C,EAAE,EAAE,uCAAuC;YAC3C,EAAE,EAAE,uBAAuB;YAC3B,EAAE,EAAE,qBAAqB;YACzB,IAAI,EAAE,WAAW;YACjB,KAAK,EAAE,SAAS;SACjB;KACF;CACF,CAAC,CAAC;AAKH,MAAM,UAAU,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAa;IACpE,OAAO,CACL,KAAC,UAAU,IACT,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC,KACrD,KAAK,GACT,CACH,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/components/Text.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAExE,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAE/B,+EAA+E;AAC/E,0DAA0D;AAC1D,MAAM,YAAY,GAAG,GAAG,CAAC,iBAAiB,EAAE;IAC1C,eAAe,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;IACpC,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,WAAW,EAAE,kBAAkB;YAC/B,KAAK,EAAE,uBAAuB;YAC9B,OAAO,EAAE,cAAc;SACxB;QACD,OAAO,EAAE;YACP,IAAI,EAAE,WAAW;YACjB,IAAI,EAAE,iEAAiE;YACvE,EAAE,EAAE,sCAAsC;YAC1C,EAAE,EAAE,sCAAsC;YAC1C,EAAE,EAAE,uBAAuB;YAC3B,EAAE,EAAE,qBAAqB;YACzB,IAAI,EAAE,WAAW;YACjB,KAAK,EAAE,YAAY;SACpB;QACD,MAAM,EAAE;YACN,IAAI,EAAE,eAAe;YACrB,MAAM,EAAE,aAAa;SACtB;KACF;CACF,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;AAEnD,0EAA0E;AAC1E,uEAAuE;AACvE,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,IAAI,EAAE,EAAE,UAAU,EAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,EAAE;CAC9E,CAAC,CAAC;AAQH,MAAM,UAAU,IAAI,CAAC,EACnB,SAAS,EACT,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,OAAO,GAAG,MAAM,EAChB,MAAM,EACN,GAAG,KAAK,EACE;IACV,OAAO,CACL,KAAC,UAAU,IACT,iBAAiB,EACf,OAAO,IAAI,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAEzD,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,SAAS,CAAC,EACjE,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACvC,KAAK,EAAE,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,KACpD,KAAK,GACT,CACH,CAAC;AACJ,CAAC"}

package/dist/components/XStack.d.ts

@@ -0,0 +1,4 @@
+import { type FlexProps } from './Flex';
+export type XStackProps = Omit<FlexProps, 'direction'>;
+export declare function XStack(props: XStackProps): import("react").JSX.Element;
+//# sourceMappingURL=XStack.d.ts.map

package/dist/components/XStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"XStack.d.ts","sourceRoot":"","sources":["../../src/components/XStack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAE9C,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AAEvD,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,+BAExC"}

package/dist/components/XStack.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Flex } from './Flex';
+export function XStack(props) {
+    return _jsx(Flex, { direction: "row", ...props });
+}
+//# sourceMappingURL=XStack.js.map

package/dist/components/XStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"XStack.js","sourceRoot":"","sources":["../../src/components/XStack.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAC;AAI9C,MAAM,UAAU,MAAM,CAAC,KAAkB;IACvC,OAAO,KAAC,IAAI,IAAC,SAAS,EAAC,KAAK,KAAK,KAAK,GAAI,CAAC;AAC7C,CAAC"}

package/dist/components/YStack.d.ts

@@ -0,0 +1,4 @@
+import { type FlexProps } from './Flex';
+export type YStackProps = Omit<FlexProps, 'direction'>;
+export declare function YStack(props: YStackProps): import("react").JSX.Element;
+//# sourceMappingURL=YStack.d.ts.map

package/dist/components/YStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"YStack.d.ts","sourceRoot":"","sources":["../../src/components/YStack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAE9C,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AAEvD,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,+BAExC"}

package/dist/components/YStack.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Flex } from './Flex';
+export function YStack(props) {
+    return _jsx(Flex, { direction: "column", ...props });
+}
+//# sourceMappingURL=YStack.js.map

package/dist/components/YStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"YStack.js","sourceRoot":"","sources":["../../src/components/YStack.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAC;AAI9C,MAAM,UAAU,MAAM,CAAC,KAAkB;IACvC,OAAO,KAAC,IAAI,IAAC,SAAS,EAAC,QAAQ,KAAK,KAAK,GAAI,CAAC;AAChD,CAAC"}

package/dist/components/_internal/InputFrame.d.ts

@@ -0,0 +1,13 @@
+import { View } from 'react-native';
+export type InputFrameProps = React.ComponentProps<typeof View> & {
+    disabled?: boolean;
+    focused: boolean;
+    invalid?: boolean;
+};
+/**
+ * The border, background and focus ring the web's `Input`, `Textarea` and
+ * `InputGroup` draw around their field. React Native has no `ring`, so a
+ * 3pt outline sits outside the border while the field has focus.
+ */
+export declare function InputFrame({ children, className, disabled, focused, invalid, ...props }: InputFrameProps): import("react").JSX.Element;
+//# sourceMappingURL=InputFrame.d.ts.map

package/dist/components/_internal/InputFrame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputFrame.d.ts","sourceRoot":"","sources":["../../../src/components/_internal/InputFrame.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIpC,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,GAAG;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,OAAO,EACP,GAAG,KAAK,EACT,EAAE,eAAe,+BA2BjB"}

package/dist/components/_internal/InputFrame.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { cn } from '../../lib/cn';
+/**
+ * The border, background and focus ring the web's `Input`, `Textarea` and
+ * `InputGroup` draw around their field. React Native has no `ring`, so a
+ * 3pt outline sits outside the border while the field has focus.
+ */
+export function InputFrame({ children, className, disabled, focused, invalid, ...props }) {
+    return (_jsxs(View, { className: cn('border-input bg-background dark:bg-input/32 w-full flex-row rounded-lg border shadow-xs shadow-black/5', invalid && 'border-destructive/36', focused && (invalid ? 'border-destructive/64' : 'border-ring'), (disabled || focused || invalid) && 'shadow-none', disabled && 'opacity-64', className), ...props, children: [children, focused ? (_jsx(View, { className: cn('absolute -inset-1 rounded-[calc(var(--radius)+3px)] border-[3px]', invalid
+                    ? 'border-destructive/16 dark:border-destructive/24'
+                    : 'border-ring/24'), pointerEvents: "none" })) : null] }));
+}
+//# sourceMappingURL=InputFrame.js.map

package/dist/components/_internal/InputFrame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputFrame.js","sourceRoot":"","sources":["../../../src/components/_internal/InputFrame.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAQlC;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,OAAO,EACP,GAAG,KAAK,EACQ;IAChB,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,CACX,wGAAwG,EACxG,OAAO,IAAI,uBAAuB,EAClC,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,aAAa,CAAC,EAC9D,CAAC,QAAQ,IAAI,OAAO,IAAI,OAAO,CAAC,IAAI,aAAa,EACjD,QAAQ,IAAI,YAAY,EACxB,SAAS,CACV,KACG,KAAK,aAER,QAAQ,EACR,OAAO,CAAC,CAAC,CAAC,CACT,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,CACX,kEAAkE,EAClE,OAAO;oBACL,CAAC,CAAC,kDAAkD;oBACpD,CAAC,CAAC,gBAAgB,CACrB,EACD,aAAa,EAAC,MAAM,GACpB,CACH,CAAC,CAAC,CAAC,IAAI,IACH,CACR,CAAC;AACJ,CAAC"}

package/dist/components/_internal/StoryItem.d.ts

@@ -0,0 +1,6 @@
+/** A labelled box for the layout stories. */
+export declare function StoryItem({ children, className, }: {
+    children: string;
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=StoryItem.d.ts.map

package/dist/components/_internal/StoryItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoryItem.d.ts","sourceRoot":"","sources":["../../../src/components/_internal/StoryItem.tsx"],"names":[],"mappings":"AAKA,6CAA6C;AAC7C,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAWA"}

package/dist/components/_internal/StoryItem.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { cn } from '../../lib/cn';
+import { Text } from '../Text';
+/** A labelled box for the layout stories. */
+export function StoryItem({ children, className, }) {
+    return (_jsx(View, { className: cn('border-border bg-muted items-center justify-center rounded-md border px-4 py-3', className), children: _jsx(Text, { children: children }) }));
+}
+//# sourceMappingURL=StoryItem.js.map

package/dist/components/_internal/StoryItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoryItem.js","sourceRoot":"","sources":["../../../src/components/_internal/StoryItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,6CAA6C;AAC7C,MAAM,UAAU,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,GAIV;IACC,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,CACX,gFAAgF,EAChF,SAAS,CACV,YAED,KAAC,IAAI,cAAE,QAAQ,GAAQ,GAClB,CACR,CAAC;AACJ,CAAC"}

package/dist/components/_internal/layout.d.ts

@@ -0,0 +1,79 @@
+declare const alignClasses: {
+    readonly baseline: "items-baseline";
+    readonly center: "items-center";
+    readonly end: "items-end";
+    readonly start: "items-start";
+    readonly stretch: "items-stretch";
+};
+declare const gapClasses: {
+    readonly 0: "gap-0";
+    readonly 0.5: "gap-0.5";
+    readonly 1: "gap-1";
+    readonly 1.5: "gap-1.5";
+    readonly 2: "gap-2";
+    readonly 2.5: "gap-2.5";
+    readonly 3: "gap-3";
+    readonly 3.5: "gap-3.5";
+    readonly 4: "gap-4";
+    readonly 5: "gap-5";
+    readonly 6: "gap-6";
+    readonly 8: "gap-8";
+    readonly 10: "gap-10";
+    readonly 12: "gap-12";
+    readonly 16: "gap-16";
+};
+export declare const gapXClasses: {
+    readonly 0: "gap-x-0";
+    readonly 0.5: "gap-x-0.5";
+    readonly 1: "gap-x-1";
+    readonly 1.5: "gap-x-1.5";
+    readonly 2: "gap-x-2";
+    readonly 2.5: "gap-x-2.5";
+    readonly 3: "gap-x-3";
+    readonly 3.5: "gap-x-3.5";
+    readonly 4: "gap-x-4";
+    readonly 5: "gap-x-5";
+    readonly 6: "gap-x-6";
+    readonly 8: "gap-x-8";
+    readonly 10: "gap-x-10";
+    readonly 12: "gap-x-12";
+    readonly 16: "gap-x-16";
+};
+export declare const gapYClasses: {
+    readonly 0: "gap-y-0";
+    readonly 0.5: "gap-y-0.5";
+    readonly 1: "gap-y-1";
+    readonly 1.5: "gap-y-1.5";
+    readonly 2: "gap-y-2";
+    readonly 2.5: "gap-y-2.5";
+    readonly 3: "gap-y-3";
+    readonly 3.5: "gap-y-3.5";
+    readonly 4: "gap-y-4";
+    readonly 5: "gap-y-5";
+    readonly 6: "gap-y-6";
+    readonly 8: "gap-y-8";
+    readonly 10: "gap-y-10";
+    readonly 12: "gap-y-12";
+    readonly 16: "gap-y-16";
+};
+declare const justifyClasses: {
+    readonly around: "justify-around";
+    readonly between: "justify-between";
+    readonly center: "justify-center";
+    readonly end: "justify-end";
+    readonly evenly: "justify-evenly";
+    readonly start: "justify-start";
+};
+export type LayoutAlign = keyof typeof alignClasses;
+export type LayoutGap = keyof typeof gapClasses;
+export type LayoutJustify = keyof typeof justifyClasses;
+export type LayoutStyleProps = {
+    align?: LayoutAlign;
+    gap?: LayoutGap;
+    gapX?: LayoutGap;
+    gapY?: LayoutGap;
+    justify?: LayoutJustify;
+};
+export declare function getLayoutClasses({ align, gap, gapX, gapY, justify, }: LayoutStyleProps): string;
+export {};
+//# sourceMappingURL=layout.d.ts.map

package/dist/components/_internal/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/components/_internal/layout.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,YAAY;;;;;;CAMR,CAAC;AAEX,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;CAgBN,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;CAgBd,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;CAgBd,CAAC;AAEX,QAAA,MAAM,cAAc;;;;;;;CAOV,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,YAAY,CAAC;AACpD,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,UAAU,CAAC;AAChD,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AAExD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,OAAO,GACR,EAAE,gBAAgB,UAQlB"}

package/dist/components/_internal/layout.js

@@ -0,0 +1,73 @@
+import { cn } from '../../lib/cn';
+// Same props and spacing scale as the layout helper of @pickle-ui/react. Each
+// class is written out in full so Uniwind finds it in the source.
+const alignClasses = {
+    baseline: 'items-baseline',
+    center: 'items-center',
+    end: 'items-end',
+    start: 'items-start',
+    stretch: 'items-stretch',
+};
+const gapClasses = {
+    0: 'gap-0',
+    0.5: 'gap-0.5',
+    1: 'gap-1',
+    1.5: 'gap-1.5',
+    2: 'gap-2',
+    2.5: 'gap-2.5',
+    3: 'gap-3',
+    3.5: 'gap-3.5',
+    4: 'gap-4',
+    5: 'gap-5',
+    6: 'gap-6',
+    8: 'gap-8',
+    10: 'gap-10',
+    12: 'gap-12',
+    16: 'gap-16',
+};
+export const gapXClasses = {
+    0: 'gap-x-0',
+    0.5: 'gap-x-0.5',
+    1: 'gap-x-1',
+    1.5: 'gap-x-1.5',
+    2: 'gap-x-2',
+    2.5: 'gap-x-2.5',
+    3: 'gap-x-3',
+    3.5: 'gap-x-3.5',
+    4: 'gap-x-4',
+    5: 'gap-x-5',
+    6: 'gap-x-6',
+    8: 'gap-x-8',
+    10: 'gap-x-10',
+    12: 'gap-x-12',
+    16: 'gap-x-16',
+};
+export const gapYClasses = {
+    0: 'gap-y-0',
+    0.5: 'gap-y-0.5',
+    1: 'gap-y-1',
+    1.5: 'gap-y-1.5',
+    2: 'gap-y-2',
+    2.5: 'gap-y-2.5',
+    3: 'gap-y-3',
+    3.5: 'gap-y-3.5',
+    4: 'gap-y-4',
+    5: 'gap-y-5',
+    6: 'gap-y-6',
+    8: 'gap-y-8',
+    10: 'gap-y-10',
+    12: 'gap-y-12',
+    16: 'gap-y-16',
+};
+const justifyClasses = {
+    around: 'justify-around',
+    between: 'justify-between',
+    center: 'justify-center',
+    end: 'justify-end',
+    evenly: 'justify-evenly',
+    start: 'justify-start',
+};
+export function getLayoutClasses({ align, gap, gapX, gapY, justify, }) {
+    return cn(align === undefined ? undefined : alignClasses[align], gap === undefined ? undefined : gapClasses[gap], gapX === undefined ? undefined : gapXClasses[gapX], gapY === undefined ? undefined : gapYClasses[gapY], justify === undefined ? undefined : justifyClasses[justify]);
+}
+//# sourceMappingURL=layout.js.map

package/dist/components/_internal/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../src/components/_internal/layout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAElC,8EAA8E;AAC9E,kEAAkE;AAElE,MAAM,YAAY,GAAG;IACnB,QAAQ,EAAE,gBAAgB;IAC1B,MAAM,EAAE,cAAc;IACtB,GAAG,EAAE,WAAW;IAChB,KAAK,EAAE,aAAa;IACpB,OAAO,EAAE,eAAe;CAChB,CAAC;AAEX,MAAM,UAAU,GAAG;IACjB,CAAC,EAAE,OAAO;IACV,GAAG,EAAE,SAAS;IACd,CAAC,EAAE,OAAO;IACV,GAAG,EAAE,SAAS;IACd,CAAC,EAAE,OAAO;IACV,GAAG,EAAE,SAAS;IACd,CAAC,EAAE,OAAO;IACV,GAAG,EAAE,SAAS;IACd,CAAC,EAAE,OAAO;IACV,CAAC,EAAE,OAAO;IACV,CAAC,EAAE,OAAO;IACV,CAAC,EAAE,OAAO;IACV,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,QAAQ;CACJ,CAAC;AAEX,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,CAAC,EAAE,SAAS;IACZ,GAAG,EAAE,WAAW;IAChB,CAAC,EAAE,SAAS;IACZ,GAAG,EAAE,WAAW;IAChB,CAAC,EAAE,SAAS;IACZ,GAAG,EAAE,WAAW;IAChB,CAAC,EAAE,SAAS;IACZ,GAAG,EAAE,WAAW;IAChB,CAAC,EAAE,SAAS;IACZ,CAAC,EAAE,SAAS;IACZ,CAAC,EAAE,SAAS;IACZ,CAAC,EAAE,SAAS;IACZ,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,UAAU;CACN,CAAC;AAEX,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,CAAC,EAAE,SAAS;IACZ,GAAG,EAAE,WAAW;IAChB,CAAC,EAAE,SAAS;IACZ,GAAG,EAAE,WAAW;IAChB,CAAC,EAAE,SAAS;IACZ,GAAG,EAAE,WAAW;IAChB,CAAC,EAAE,SAAS;IACZ,GAAG,EAAE,WAAW;IAChB,CAAC,EAAE,SAAS;IACZ,CAAC,EAAE,SAAS;IACZ,CAAC,EAAE,SAAS;IACZ,CAAC,EAAE,SAAS;IACZ,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,UAAU;CACN,CAAC;AAEX,MAAM,cAAc,GAAG;IACrB,MAAM,EAAE,gBAAgB;IACxB,OAAO,EAAE,iBAAiB;IAC1B,MAAM,EAAE,gBAAgB;IACxB,GAAG,EAAE,aAAa;IAClB,MAAM,EAAE,gBAAgB;IACxB,KAAK,EAAE,eAAe;CACd,CAAC;AAcX,MAAM,UAAU,gBAAgB,CAAC,EAC/B,KAAK,EACL,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,OAAO,GACU;IACjB,OAAO,EAAE,CACP,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,EACrD,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,EAC/C,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,EAClD,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,EAClD,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAC5D,CAAC;AACJ,CAAC"}

package/dist/components/_internal/useControllableState.d.ts

@@ -0,0 +1,7 @@
+/**
+ * State a component owns unless its parent controls it, like Base UI's
+ * `checked` / `defaultChecked` / `onCheckedChange` trios: `value` wins when
+ * defined, and every change is reported through `onChange`.
+ */
+export declare function useControllableState<T>(value: T | undefined, defaultValue: T, onChange?: (value: T) => void): readonly [T, (next: T) => void];
+//# sourceMappingURL=useControllableState.d.ts.map

package/dist/components/_internal/useControllableState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControllableState.d.ts","sourceRoot":"","sources":["../../../src/components/_internal/useControllableState.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EACpC,KAAK,EAAE,CAAC,GAAG,SAAS,EACpB,YAAY,EAAE,CAAC,EACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,uBAMpB,CAAC,WAQX"}

package/dist/components/_internal/useControllableState.js

@@ -0,0 +1,17 @@
+import { useCallback, useState } from 'react';
+/**
+ * State a component owns unless its parent controls it, like Base UI's
+ * `checked` / `defaultChecked` / `onCheckedChange` trios: `value` wins when
+ * defined, and every change is reported through `onChange`.
+ */
+export function useControllableState(value, defaultValue, onChange) {
+    const [uncontrolled, setUncontrolled] = useState(defaultValue);
+    const controlled = value !== undefined;
+    const setValue = useCallback((next) => {
+        if (!controlled)
+            setUncontrolled(next);
+        onChange?.(next);
+    }, [controlled, onChange]);
+    return [controlled ? value : uncontrolled, setValue];
+}
+//# sourceMappingURL=useControllableState.js.map

package/dist/components/_internal/useControllableState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControllableState.js","sourceRoot":"","sources":["../../../src/components/_internal/useControllableState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE9C;;;;GAIG;AACH,MAAM,UAAU,oBAAoB,CAClC,KAAoB,EACpB,YAAe,EACf,QAA6B;IAE7B,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IAC/D,MAAM,UAAU,GAAG,KAAK,KAAK,SAAS,CAAC;IAEvC,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,IAAO,EAAE,EAAE;QACV,IAAI,CAAC,UAAU;YAAE,eAAe,CAAC,IAAI,CAAC,CAAC;QACvC,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC,EACD,CAAC,UAAU,EAAE,QAAQ,CAAC,CACvB,CAAC;IAEF,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,EAAE,QAAQ,CAAU,CAAC;AAChE,CAAC"}