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

package/README.md

@@ -72,23 +72,49 @@ steps, token overrides and runtime brand colors.
 
 Each export is also available from its own subpath.
 
-| Export          | Subpath                                   | Notes                                                                                                                                                                                                               |
-| --------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Badge`         | `@pickle-ui/react-native/badge`           | `variant`: `default`, `secondary`, `outline`, `destructive`, `info`, `success`, `warning`, `error` and the statuses `pending`, `submitted`, `inProgress`, `inReview`, `failed`, `expired`; `size`: `sm`, `md`, `lg` |
-| `Button`        | `@pickle-ui/react-native/button`          | `variant`: `default`, `secondary`, `destructive`, `destructive-outline`, `outline`, `ghost`, `link`; `size`: `xs` … `xl`, `icon-xs` … `icon-xl`; `loading`                                                          |
-| `Card`          | `@pickle-ui/react-native/card`            | Parts: `Card.Header`, `Card.Title`, `Card.Description`, `Card.Action`, `Card.Content`, `Card.Footer`                                                                                                                |
-| `Text`          | `@pickle-ui/react-native/text`            | `variant`: `h1` … `h4`, `lead`, `body`, `small`, `code`; `tone`: `muted`, `primary`, `destructive`; `weight`: `normal`, `bold`; `truncate`                                                                          |
-| `createTheme`   | `@pickle-ui/react-native/theme`           | Derives a theme from a brand color, the same as on the web; apply it with `ScopedVariables`                                                                                                                         |
-| `cn`            | `@pickle-ui/react-native/cn`              | Joins class names; later classes win, and `text-h1` … `text-code` count as font sizes                                                                                                                               |
-| `useColorToken` | `@pickle-ui/react-native/use-color-token` | Reads a token as a color string, for props that don't take a `className`                                                                                                                                            |
+| Export          | Subpath                                   | Notes                                                                                                                                                                                                                              |
+| --------------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Badge`         | `@pickle-ui/react-native/badge`           | `variant`: `default`, `secondary`, `outline`, `destructive`, `info`, `success`, `warning`, `error` and the statuses `pending`, `submitted`, `inProgress`, `inReview`, `failed`, `expired`; `size`: `sm`, `md`, `lg`                |
+| `Button`        | `@pickle-ui/react-native/button`          | `variant`: `default`, `secondary`, `destructive`, `destructive-outline`, `outline`, `ghost`, `link`; `size`: `xs` … `xl`, `icon-xs` … `icon-xl`; `loading`                                                                         |
+| `Card`          | `@pickle-ui/react-native/card`            | Parts: `Card.Header`, `Card.Title`, `Card.Description`, `Card.Action`, `Card.Content`, `Card.Footer`                                                                                                                               |
+| `Checkbox`      | `@pickle-ui/react-native/checkbox`        | `checked` / `defaultChecked` / `onCheckedChange`, `indeterminate`, `invalid`, `disabled`, `label`; `size`: `md`, `sm`; `classNames`: `field`, `indicator`, `label`                                                                 |
+| `Flex`          | `@pickle-ui/react-native/flex`            | A row by default, like the web; `direction`, `wrap`, `align`, `justify`, `gap`, `gapX`, `gapY`                                                                                                                                     |
+| `Form`          | `@pickle-ui/react-native/form`            | React Hook Form bindings: `Form.Field` (`label`, `description`, `error`), `Form.Input`, `Form.Textarea`, `Form.InputGroup`, `Form.Checkbox`, `Form.RadioGroup`, `Form.Button`, `Form.Label`, `Form.Description`, `Form.Error`      |
+| `Grid`          | `@pickle-ui/react-native/grid`            | Equal columns built from rows of cells (no CSS grid on native): `columns`, `rows`, `flow`, `gap`, `gapX`, `gapY`, `align`, `justify`, `placeContent`, `placeItems`; items can't stretch to their cell's height, give them `flex-1` |
+| `Input`         | `@pickle-ui/react-native/input`           | `size`: `sm`, `md`, `lg`, the `Button` heights; `invalid`, `disabled`, `unstyled`; `classNames.input`                                                                                                                              |
+| `InputGroup`    | `@pickle-ui/react-native/input-group`     | Parts: `InputGroup.Input`, `InputGroup.Addon` (`align`: `inline-start`, `inline-end`, `block-start`, `block-end`), `InputGroup.Button`, `InputGroup.Text`                                                                          |
+| `RadioGroup`    | `@pickle-ui/react-native/radio-group`     | `value` / `defaultValue` / `onValueChange`, `disabled`; parts: `RadioGroup.Item` (`value`, `label`, `invalid`, `disabled`, `size`: `md`, `sm`; `classNames`: `field`, `indicator`, `label`)                                        |
+| `Separator`     | `@pickle-ui/react-native/separator`       | `orientation`: `horizontal`, `vertical`; `role="separator"`, announced on the web only                                                                                                                                             |
+| `Spinner`       | `@pickle-ui/react-native/spinner`         | Announced as "Loading": `accessibilityLabel` renames it, `aria-hidden` makes it decorative; size it with `size-*` and color it with `text-*`                                                                                       |
+| `Text`          | `@pickle-ui/react-native/text`            | `variant`: `h1` … `h4`, `lead`, `body`, `small`, `code`; `tone`: `muted`, `primary`, `destructive`; `weight`: `normal`, `bold`; `truncate`                                                                                         |
+| `Textarea`      | `@pickle-ui/react-native/textarea`        | Grows with its content from three lines; `size`, `invalid`, `disabled`; `classNames.textarea`                                                                                                                                      |
+| `XStack`        | `@pickle-ui/react-native/x-stack`         | `Flex` as a row                                                                                                                                                                                                                    |
+| `YStack`        | `@pickle-ui/react-native/y-stack`         | `Flex` as a column                                                                                                                                                                                                                 |
+| `createTheme`   | `@pickle-ui/react-native/theme`           | Derives a theme from a brand color, the same as on the web; apply it with `ScopedVariables`                                                                                                                                        |
+| `cn`            | `@pickle-ui/react-native/cn`              | Joins class names; later classes win, and `text-h1` … `text-code` count as font sizes                                                                                                                                              |
+| `useColorToken` | `@pickle-ui/react-native/use-color-token` | Reads a token as a color string, for props that don't take a `className`                                                                                                                                                           |
 
 Every component takes the props of the React Native element it renders,
 `className` included, and merges your `className` last.
 
+Form fields take `invalid` and `disabled` props where the web reads the
+`aria-invalid` and `disabled` attributes, and draw the web's focus ring while
+they have focus. Text styles don't cascade on native, so `Checkbox` and
+`RadioGroup.Item` style the row around the control with `classNames.field`
+and the label text with `classNames.label`; pass `label` rather than a
+separate label element, which couldn't toggle the control.
+
+`Form` needs `react-hook-form` (a peer dependency). React Native has no
+`<form>`, so `Form` takes `onSubmit` and runs it through `handleSubmit` when
+`Form.Button` is pressed, or when the return key is pressed in a
+`Form.Input`, like Enter on the web. Give `Form.Button` an `onPress` for
+another action. A `Form.Field` label names its control and focuses it when
+pressed.
+
 `Button` and `Badge` wrap text children in their label and render other
 children, such as icons, as they are. Icons don't inherit the label's color on
 native, so pass it to the icon, for example with `useColorToken`. Give an
-icon-only button an `icon*` size and an `accessibilityLabel`. Buttons keep the web's dimensions, and a `hitSlop` stretches each size to a
+icon-only button an `icon*` size and an `accessibilityLabel`. Buttons keep the web's dimensions and the text sizes it uses from `sm` up (14px at `md`), and a `hitSlop` stretches each size to a
 44pt touch target, as the web's `pointer-coarse` hit area does. Headings (`h1` … `h4`)
 are announced as headers.
 

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAe,SAAS,EAAc,MAAM,cAAc,CAAC;AAQlE,QAAA,MAAM,cAAc;;;8EAgCnB,CAAC;AAoFF,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EACtC,UAAU,CACX,GACC,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC;;;;OAIG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEJ,wBAAgB,MAAM,CAAC,EACrB,kBAAkB,EAClB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,cAAc,EACd,OAAe,EACf,IAAW,EACX,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,WAAW,+BAuDb"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAe,SAAS,EAAc,MAAM,cAAc,CAAC;AAQlE,QAAA,MAAM,cAAc;;;8EAgCnB,CAAC;AAuFF,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EACtC,UAAU,CACX,GACC,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC;;;;OAIG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEJ,wBAAgB,MAAM,CAAC,EACrB,kBAAkB,EAClB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,cAAc,EACd,OAAe,EACf,IAAW,EACX,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,WAAW,+BAuDb"}

package/dist/components/Button.js

@@ -3,9 +3,9 @@ import { cva } from 'class-variance-authority';
 import { Children, isValidElement } from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { cn } from '../lib/cn';
-import { Spinner } from './_internal/Spinner';
+import { Spinner } from './Spinner';
 // Same variants, sizes and dimensions as `Button` in @pickle-ui/react on a
-// phone. Like the web's `pointer-coarse` hit area, `hitSlop` stretches every
+// phone, with its text sizes from `sm` up. Like the web's `pointer-coarse` hit area, `hitSlop` stretches every
 // size to a 44pt touch target. Paddings leave room for the 1pt border.
 const buttonVariants = cva('flex-row items-center justify-center gap-2 rounded-lg border disabled:opacity-64', {
     defaultVariants: { size: 'md', variant: 'default' },
@@ -40,17 +40,19 @@ const labelVariants = cva('font-medium', {
     defaultVariants: { size: 'md', variant: 'default' },
     variants: {
         pressed: { false: '', true: '' },
+        // The web's sizes from `sm` up, not its larger phone sizes, which only
+        // stop iOS Safari zooming into focused fields.
         size: {
-            icon: 'text-base',
-            'icon-lg': 'text-base',
-            'icon-sm': 'text-base',
-            'icon-xl': 'text-base',
-            'icon-xs': 'text-base',
-            lg: 'text-base',
-            md: 'text-base',
-            sm: 'text-base',
-            xl: 'text-lg',
-            xs: 'text-sm',
+            icon: 'text-sm',
+            'icon-lg': 'text-sm',
+            'icon-sm': 'text-sm',
+            'icon-xl': 'text-sm',
+            'icon-xs': 'text-sm',
+            lg: 'text-sm',
+            md: 'text-sm',
+            sm: 'text-sm',
+            xl: 'text-base',
+            xs: 'text-xs',
         },
         variant: {
             default: 'text-primary-foreground',
@@ -63,16 +65,17 @@ const labelVariants = cva('font-medium', {
         },
     },
 });
-const spinnerVariants = cva('', {
+// Sized and dimmed like the web button's icons, in the label's color.
+const spinnerVariants = cva('size-4 opacity-80', {
     variants: {
         variant: {
-            default: 'border-primary-foreground',
-            destructive: 'border-destructive-foreground',
-            'destructive-outline': 'border-foreground',
-            ghost: 'border-foreground',
-            link: 'border-foreground',
-            outline: 'border-foreground',
-            secondary: 'border-secondary-foreground',
+            default: 'text-primary-foreground',
+            destructive: 'text-destructive-foreground',
+            'destructive-outline': 'text-foreground',
+            ghost: 'text-foreground',
+            link: 'text-foreground',
+            outline: 'text-foreground',
+            secondary: 'text-secondary-foreground',
         },
     },
 });
@@ -116,6 +119,6 @@ export function Button({ accessibilityState, children, className, disabled, labe
             ...accessibilityState,
             busy: loading,
             disabled: isDisabled,
-        }, className: cn(buttonVariants({ size, variant }), className), disabled: isDisabled, hitSlop: size ? HIT_SLOP[size] : undefined, ...props, children: ({ pressed }) => (_jsxs(_Fragment, { children: [isSolid && !isDisabled ? (_jsx(View, { className: highlightVariants({ pressed, size }), pointerEvents: "none" })) : null, Children.map(children, (child) => typeof child === 'string' || typeof child === 'number' ? (_jsx(Text, { className: cn(labelVariants({ pressed, size, variant }), loading && 'opacity-0', labelClassName), children: child })) : isValidElement(child) ? (loading ? (_jsx(View, { className: "opacity-0", children: child })) : (child)) : null), loading ? (_jsx(View, { className: "absolute", children: _jsx(Spinner, { className: spinnerVariants({ variant }) }) })) : null] })) }));
+        }, className: cn(buttonVariants({ size, variant }), className), disabled: isDisabled, hitSlop: size ? HIT_SLOP[size] : undefined, ...props, children: ({ pressed }) => (_jsxs(_Fragment, { children: [isSolid && !isDisabled ? (_jsx(View, { className: highlightVariants({ pressed, size }), pointerEvents: "none" })) : null, Children.map(children, (child) => typeof child === 'string' || typeof child === 'number' ? (_jsx(Text, { className: cn(labelVariants({ pressed, size, variant }), loading && 'opacity-0', labelClassName), children: child })) : isValidElement(child) ? (loading ? (_jsx(View, { className: "opacity-0", children: child })) : (child)) : null), loading ? (_jsx(View, { className: "absolute", children: _jsx(Spinner, { "aria-hidden": true, className: spinnerVariants({ variant }) }) })) : null] })) }));
 }
 //# sourceMappingURL=Button.js.map

package/dist/components/Button.js.map

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

package/dist/components/Flex.d.ts

@@ -0,0 +1,25 @@
+import { View } from 'react-native';
+import { type LayoutStyleProps } from './_internal/layout';
+declare const directionClasses: {
+    readonly column: "flex-col";
+    readonly 'column-reverse': "flex-col-reverse";
+    readonly row: "flex-row";
+    readonly 'row-reverse': "flex-row-reverse";
+};
+declare const wrapClasses: {
+    readonly nowrap: "flex-nowrap";
+    readonly wrap: "flex-wrap";
+    readonly 'wrap-reverse': "flex-wrap-reverse";
+};
+export type FlexProps = LayoutStyleProps & Omit<React.ComponentProps<typeof View>, keyof LayoutStyleProps> & {
+    direction?: keyof typeof directionClasses;
+    wrap?: keyof typeof wrapClasses;
+};
+/**
+ * A `View` laid out with flexbox props, like `Flex` in @pickle-ui/react. It
+ * defaults to a row, as on the web, where React Native's `View` stacks its
+ * children in a column.
+ */
+export declare function Flex({ align, className, direction, gap, gapX, gapY, justify, wrap, ...props }: FlexProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Flex.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../src/components/Flex.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,EAAoB,KAAK,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAE7E,QAAA,MAAM,gBAAgB;;;;;CAKZ,CAAC;AAEX,QAAA,MAAM,WAAW;;;;CAIP,CAAC;AAEX,MAAM,MAAM,SAAS,GAAG,gBAAgB,GACtC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,MAAM,gBAAgB,CAAC,GAAG;IAChE,SAAS,CAAC,EAAE,MAAM,OAAO,gBAAgB,CAAC;IAC1C,IAAI,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;CACjC,CAAC;AAEJ;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,SAAS,EACT,SAAiB,EACjB,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,SAAS,+BAYX"}

package/dist/components/Flex.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { cn } from '../lib/cn';
+import { getLayoutClasses } from './_internal/layout';
+const directionClasses = {
+    column: 'flex-col',
+    'column-reverse': 'flex-col-reverse',
+    row: 'flex-row',
+    'row-reverse': 'flex-row-reverse',
+};
+const wrapClasses = {
+    nowrap: 'flex-nowrap',
+    wrap: 'flex-wrap',
+    'wrap-reverse': 'flex-wrap-reverse',
+};
+/**
+ * A `View` laid out with flexbox props, like `Flex` in @pickle-ui/react. It
+ * defaults to a row, as on the web, where React Native's `View` stacks its
+ * children in a column.
+ */
+export function Flex({ align, className, direction = 'row', gap, gapX, gapY, justify, wrap, ...props }) {
+    return (_jsx(View, { className: cn(getLayoutClasses({ align, gap, gapX, gapY, justify }), directionClasses[direction], wrap === undefined ? undefined : wrapClasses[wrap], className), ...props }));
+}
+//# sourceMappingURL=Flex.js.map

package/dist/components/Flex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.js","sourceRoot":"","sources":["../../src/components/Flex.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAE7E,MAAM,gBAAgB,GAAG;IACvB,MAAM,EAAE,UAAU;IAClB,gBAAgB,EAAE,kBAAkB;IACpC,GAAG,EAAE,UAAU;IACf,aAAa,EAAE,kBAAkB;CACzB,CAAC;AAEX,MAAM,WAAW,GAAG;IAClB,MAAM,EAAE,aAAa;IACrB,IAAI,EAAE,WAAW;IACjB,cAAc,EAAE,mBAAmB;CAC3B,CAAC;AAQX;;;;GAIG;AACH,MAAM,UAAU,IAAI,CAAC,EACnB,KAAK,EACL,SAAS,EACT,SAAS,GAAG,KAAK,EACjB,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,GAAG,KAAK,EACE;IACV,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,CACX,gBAAgB,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EACrD,gBAAgB,CAAC,SAAS,CAAC,EAC3B,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,EAClD,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC"}

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/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"}