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

package/README.md

@@ -3,7 +3,7 @@
 Pickle UI components for React Native apps built with Expo, styled with
 Pickle's tokens through [Uniwind](https://uniwind.dev). They reuse the names
 of `@pickle-ui/react` (`variant`, `size`, `tone`, `Card.Header`, …) with
-native sizes and React Native primitives.
+the same dimensions, on React Native primitives.
 
 Browse them in the [Storybook](https://ugogo.github.io/pickle-ui/react-native/),
 rendered in the browser through react-native-web.
@@ -42,8 +42,8 @@ after Tailwind and Uniwind, which is why they come from the same file.
 
 To bring your own token set, import its pieces instead: `tailwindcss`,
 `uniwind`, your tokens as Uniwind themes, then
-`@pickle-ui/react-native/base.css`, which only adds the components to
-Uniwind's content sources.
+`@pickle-ui/react-native/base.css`, which adds the components to Uniwind's
+content sources and the `Text` type scale.
 
 Then use the components:
 
@@ -72,18 +72,57 @@ 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`, `success`, `inProgress`, `inReview`                         |
-| `Button`        | `@pickle-ui/react-native/button`          | `variant`: `default`, `secondary`, `outline`, `ghost`, `destructive`; `size`: `sm`, `md`, `lg` |
-| `Card`          | `@pickle-ui/react-native/card`            | Parts: `Card.Header`, `Card.Title`, `Card.Description`, `Card.Content`                         |
-| `Text`          | `@pickle-ui/react-native/text`            | `variant`: `h1` … `h4`, `lead`, `body`, `small`; `tone`: `muted`, `primary`, `destructive`     |
-| `cn`            | `@pickle-ui/react-native/cn`              | Joins class names; later classes win                                                           |
-| `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 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.
+
+`Text` sizes come from the shared type scale (`--text-h1` … `--text-code` in
+`@pickle-ui/tokens/typography.css`); override them like any token. Fonts are
+not set yet: text uses the platform's system font, and `code` its monospace
+font.
+
 ## Theming
 
 The tokens are Uniwind themes. Override them in `global.css` inside
@@ -91,3 +130,23 @@ The tokens are Uniwind themes. Override them in `global.css` inside
 themes, or at runtime with Uniwind's `ScopedVariables` and
 `Uniwind.updateCSSVariables`. See the
 [`@pickle-ui/tokens` README](../tokens/README.md#react-native).
+
+To brand an app at runtime, derive the tokens from one color with
+`createTheme` and apply the set for the active theme:
+
+```tsx
+import { createTheme } from '@pickle-ui/react-native/theme';
+import { ScopedVariables, useUniwind } from 'uniwind';
+
+const brand = createTheme({ primary: '#2563eb' });
+
+export function Branded({ children }: { children: React.ReactNode }) {
+  const { theme } = useUniwind();
+  return <ScopedVariables variables={brand[theme]}>{children}</ScopedVariables>;
+}
+```
+
+The values are `oklch()` colors: Uniwind resolves them in `className`
+utilities (`bg-primary`), but React Native can't read them from a `style`
+prop, so draw with the tokens rather than the raw values. Fonts from
+`createTheme` don't apply on native.

package/dist/components/Badge.d.ts

@@ -1,11 +1,14 @@
 import { type VariantProps } from 'class-variance-authority';
 import { View } from 'react-native';
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "inProgress" | "inReview" | "secondary" | "success" | null | undefined;
+    size?: "md" | "lg" | "sm" | null | undefined;
+    variant?: "default" | "destructive" | "error" | "expired" | "failed" | "info" | "inProgress" | "inReview" | "outline" | "pending" | "secondary" | "submitted" | "success" | "warning" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type BadgeProps = React.ComponentProps<typeof View> & VariantProps<typeof badgeVariants> & {
-    children: string;
+    /** Text is wrapped in the label; other children, such as icons, render as they are. */
+    children: React.ReactNode;
+    labelClassName?: string;
 };
-export declare function Badge({ children, className, variant, ...props }: BadgeProps): import("react").JSX.Element;
+export declare function Badge({ children, className, labelClassName, size, variant, ...props }: BadgeProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=Badge.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAQ,IAAI,EAAE,MAAM,cAAc,CAAC;AAK1C,QAAA,MAAM,aAAa;;8EAWjB,CAAC;AAeH,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,GACxD,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5D,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,+BAM3E"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAQ,IAAI,EAAE,MAAM,cAAc,CAAC;AAK1C,QAAA,MAAM,aAAa;;;8EA4BlB,CAAC;AA6BF,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,GACxD,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IACnC,uFAAuF;IACvF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEJ,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,SAAS,EACT,cAAc,EACd,IAAW,EACX,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,UAAU,+BAmBZ"}

package/dist/components/Badge.js

@@ -1,33 +1,62 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from 'class-variance-authority';
+import { Children, isValidElement } from 'react';
 import { Text, View } from 'react-native';
 import { cn } from '../lib/cn';
-// Status variants use the `-subtle` token pairs, like `Badge` on the web.
-const badgeVariants = cva('self-start rounded-sm px-1.5 py-0.5', {
-    defaultVariants: { variant: 'default' },
+// Same variants and sizes as `Badge` in @pickle-ui/react.
+const badgeVariants = cva('flex-row items-center justify-center gap-1 self-start rounded-sm border border-transparent', {
+    defaultVariants: { size: 'md', variant: 'default' },
     variants: {
+        size: {
+            lg: 'h-5.5 min-w-5.5 px-1.5',
+            md: 'h-4.5 min-w-4.5 px-1',
+            sm: 'h-4 min-w-4 rounded px-1',
+        },
         variant: {
             default: 'bg-primary',
+            destructive: 'bg-destructive',
+            error: 'bg-destructive-subtle',
+            expired: 'bg-secondary',
+            failed: 'bg-destructive-subtle',
+            info: 'bg-info-subtle',
             inProgress: 'bg-info-subtle',
             inReview: 'bg-warning-subtle',
+            outline: 'border-input bg-background dark:bg-input/32',
+            pending: 'bg-warning-subtle',
             secondary: 'bg-secondary',
+            submitted: 'bg-info-subtle',
             success: 'bg-success-subtle',
+            warning: 'bg-warning-subtle',
         },
     },
 });
-const labelVariants = cva('text-xs font-medium', {
-    defaultVariants: { variant: 'default' },
+const labelVariants = cva('font-medium', {
+    defaultVariants: { size: 'md', variant: 'default' },
     variants: {
+        size: {
+            lg: 'text-sm',
+            md: 'text-xs',
+            sm: 'text-[10px]',
+        },
         variant: {
             default: 'text-primary-foreground',
+            destructive: 'text-destructive-foreground',
+            error: 'text-destructive-subtle-foreground',
+            expired: 'text-secondary-foreground',
+            failed: 'text-destructive-subtle-foreground',
+            info: 'text-info-subtle-foreground',
             inProgress: 'text-info-subtle-foreground',
             inReview: 'text-warning-subtle-foreground',
+            outline: 'text-foreground',
+            pending: 'text-warning-subtle-foreground',
             secondary: 'text-secondary-foreground',
+            submitted: 'text-info-subtle-foreground',
             success: 'text-success-subtle-foreground',
+            warning: 'text-warning-subtle-foreground',
         },
     },
 });
-export function Badge({ children, className, variant, ...props }) {
-    return (_jsx(View, { className: cn(badgeVariants({ variant }), className), ...props, children: _jsx(Text, { className: labelVariants({ variant }), children: children }) }));
+export function Badge({ children, className, labelClassName, size = 'md', variant = 'default', ...props }) {
+    return (_jsx(View, { className: cn(badgeVariants({ size, variant }), className), ...props, children: Children.map(children, (child) => typeof child === 'string' || typeof child === 'number' ? (_jsx(Text, { className: cn(labelVariants({ size, variant }), labelClassName), children: child })) : isValidElement(child) ? (child) : null) }));
 }
 //# sourceMappingURL=Badge.js.map

package/dist/components/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAE/B,0EAA0E;AAC1E,MAAM,aAAa,GAAG,GAAG,CAAC,qCAAqC,EAAE;IAC/D,eAAe,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;IACvC,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,YAAY;YACrB,UAAU,EAAE,gBAAgB;YAC5B,QAAQ,EAAE,mBAAmB;YAC7B,SAAS,EAAE,cAAc;YACzB,OAAO,EAAE,mBAAmB;SAC7B;KACF;CACF,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG,GAAG,CAAC,qBAAqB,EAAE;IAC/C,eAAe,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;IACvC,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,yBAAyB;YAClC,UAAU,EAAE,6BAA6B;YACzC,QAAQ,EAAE,gCAAgC;YAC1C,SAAS,EAAE,2BAA2B;YACtC,OAAO,EAAE,gCAAgC;SAC1C;KACF;CACF,CAAC,CAAC;AAKH,MAAM,UAAU,KAAK,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAc;IAC1E,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC,KAAM,KAAK,YACnE,KAAC,IAAI,IAAC,SAAS,EAAE,aAAa,CAAC,EAAE,OAAO,EAAE,CAAC,YAAG,QAAQ,GAAQ,GACzD,CACR,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAE/B,0DAA0D;AAC1D,MAAM,aAAa,GAAG,GAAG,CACvB,4FAA4F,EAC5F;IACE,eAAe,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE;IACnD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE,wBAAwB;YAC5B,EAAE,EAAE,sBAAsB;YAC1B,EAAE,EAAE,0BAA0B;SAC/B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,YAAY;YACrB,WAAW,EAAE,gBAAgB;YAC7B,KAAK,EAAE,uBAAuB;YAC9B,OAAO,EAAE,cAAc;YACvB,MAAM,EAAE,uBAAuB;YAC/B,IAAI,EAAE,gBAAgB;YACtB,UAAU,EAAE,gBAAgB;YAC5B,QAAQ,EAAE,mBAAmB;YAC7B,OAAO,EAAE,6CAA6C;YACtD,OAAO,EAAE,mBAAmB;YAC5B,SAAS,EAAE,cAAc;YACzB,SAAS,EAAE,gBAAgB;YAC3B,OAAO,EAAE,mBAAmB;YAC5B,OAAO,EAAE,mBAAmB;SAC7B;KACF;CACF,CACF,CAAC;AAEF,MAAM,aAAa,GAAG,GAAG,CAAC,aAAa,EAAE;IACvC,eAAe,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE;IACnD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,aAAa;SAClB;QACD,OAAO,EAAE;YACP,OAAO,EAAE,yBAAyB;YAClC,WAAW,EAAE,6BAA6B;YAC1C,KAAK,EAAE,oCAAoC;YAC3C,OAAO,EAAE,2BAA2B;YACpC,MAAM,EAAE,oCAAoC;YAC5C,IAAI,EAAE,6BAA6B;YACnC,UAAU,EAAE,6BAA6B;YACzC,QAAQ,EAAE,gCAAgC;YAC1C,OAAO,EAAE,iBAAiB;YAC1B,OAAO,EAAE,gCAAgC;YACzC,SAAS,EAAE,2BAA2B;YACtC,SAAS,EAAE,6BAA6B;YACxC,OAAO,EAAE,gCAAgC;YACzC,OAAO,EAAE,gCAAgC;SAC1C;KACF;CACF,CAAC,CAAC;AASH,MAAM,UAAU,KAAK,CAAC,EACpB,QAAQ,EACR,SAAS,EACT,cAAc,EACd,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,GAAG,KAAK,EACG;IACX,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC,KACtD,KAAK,YAER,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAChC,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CACvD,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,cAAc,CAAC,YAE9D,KAAK,GACD,CACR,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAC1B,KAAK,CACN,CAAC,CAAC,CAAC,IAAI,CACT,GACI,CACR,CAAC;AACJ,CAAC"}

package/dist/components/Button.d.ts

@@ -1,13 +1,20 @@
 import { type VariantProps } from 'class-variance-authority';
 import { Pressable } from 'react-native';
 declare const buttonVariants: (props?: ({
-    size?: "md" | "lg" | "sm" | null | undefined;
-    variant?: "default" | "secondary" | "destructive" | "ghost" | "outline" | null | undefined;
+    size?: "md" | "lg" | "sm" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "xl" | "xs" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "link" | "destructive-outline" | "ghost" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ButtonProps = Omit<React.ComponentProps<typeof Pressable>, 'children'> & VariantProps<typeof buttonVariants> & {
-    children: string;
+    /**
+     * Text is wrapped in the label; other children, such as icons, render as
+     * they are. Icon-only buttons need an `icon*` size and an
+     * `accessibilityLabel`.
+     */
+    children: React.ReactNode;
     labelClassName?: string;
+    /** Shows a spinner in place of the content and disables the button. */
+    loading?: boolean;
 };
-export declare function Button({ children, className, labelClassName, size, variant, ...props }: ButtonProps): import("react").JSX.Element;
+export declare function Button({ accessibilityState, children, className, disabled, labelClassName, loading, size, variant, ...props }: ButtonProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=Button.d.ts.map

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;AAClE,OAAO,EAAE,SAAS,EAAQ,MAAM,cAAc,CAAC;AAK/C,QAAA,MAAM,cAAc;;;8EAmBnB,CAAC;AAgBF,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EACtC,UAAU,CACX,GACC,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEJ,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,SAAS,EACT,cAAc,EACd,IAAI,EACJ,OAAO,EACP,GAAG,KAAK,EACT,EAAE,WAAW,+BAYb"}
+{"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

@@ -1,39 +1,124 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { cva } from 'class-variance-authority';
-import { Pressable, Text } from 'react-native';
+import { Children, isValidElement } from 'react';
+import { Pressable, Text, View } from 'react-native';
 import { cn } from '../lib/cn';
-// Same variant and size names as `Button` in @pickle-ui/react.
-const buttonVariants = cva('flex-row items-center justify-center gap-2 rounded-lg border active:opacity-80 disabled:opacity-60', {
+import { Spinner } from './Spinner';
+// Same variants, sizes and dimensions as `Button` in @pickle-ui/react on a
+// 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' },
     variants: {
         size: {
-            lg: 'h-11 px-5',
-            md: 'h-10 px-4',
-            sm: 'h-8 px-3',
+            icon: 'size-8',
+            'icon-lg': 'size-9',
+            'icon-sm': 'size-7',
+            'icon-xl': 'size-10',
+            'icon-xs': 'size-6 rounded-md',
+            lg: 'h-9 px-[13px]',
+            md: 'h-8 px-[11px]',
+            sm: 'h-7 gap-1.5 px-[9px]',
+            xl: 'h-10 px-[15px]',
+            xs: 'h-6 gap-1 rounded-md px-[7px]',
         },
         variant: {
-            default: 'border-primary bg-primary',
-            destructive: 'border-destructive bg-destructive',
-            ghost: 'border-transparent active:bg-accent',
-            outline: 'border-input bg-popover',
-            secondary: 'border-transparent bg-secondary',
+            default: 'border-primary bg-primary shadow-primary/24 shadow-xs active:bg-primary/90 disabled:shadow-none',
+            destructive: 'border-destructive bg-destructive shadow-destructive/24 shadow-xs active:bg-destructive/90 disabled:shadow-none',
+            'destructive-outline': 'border-input bg-popover active:border-destructive/32 active:bg-destructive/4 dark:bg-input/32 shadow-xs shadow-black/5 disabled:shadow-none',
+            ghost: 'active:bg-accent border-transparent',
+            link: 'border-transparent',
+            outline: 'border-input bg-popover active:bg-accent/50 dark:bg-input/32 dark:active:bg-input/64 shadow-xs shadow-black/5 disabled:shadow-none',
+            secondary: 'bg-secondary active:bg-secondary/80 border-transparent',
         },
     },
 });
 const labelVariants = cva('font-medium', {
+    compoundVariants: [
+        { className: 'underline', pressed: true, variant: 'link' },
+    ],
     defaultVariants: { size: 'md', variant: 'default' },
     variants: {
-        size: { lg: 'text-base', md: 'text-sm', sm: 'text-xs' },
+        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-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',
             destructive: 'text-destructive-foreground',
+            'destructive-outline': 'text-destructive-subtle-foreground',
             ghost: 'text-foreground',
+            link: 'text-foreground',
             outline: 'text-foreground',
             secondary: 'text-secondary-foreground',
         },
     },
 });
-export function Button({ children, className, labelClassName, size, variant, ...props }) {
-    return (_jsx(Pressable, { accessibilityRole: "button", className: cn(buttonVariants({ size, variant }), className), ...props, children: _jsx(Text, { className: cn(labelVariants({ size, variant }), labelClassName), children: children }) }));
+// Sized and dimmed like the web button's icons, in the label's color.
+const spinnerVariants = cva('size-4 opacity-80', {
+    variants: {
+        variant: {
+            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',
+        },
+    },
+});
+// The web's 1px inner highlight on solid buttons. Uniwind draws
+// `inset-shadow` outside the view, so a top border on an overlay stands in.
+const highlightVariants = cva('absolute inset-0 rounded-lg border-t', {
+    variants: {
+        pressed: { false: 'border-white/16', true: 'border-black/8' },
+        size: {
+            icon: '',
+            'icon-lg': '',
+            'icon-sm': '',
+            'icon-xl': '',
+            'icon-xs': 'rounded-md',
+            lg: '',
+            md: '',
+            sm: '',
+            xl: '',
+            xs: 'rounded-md',
+        },
+    },
+});
+// Half the gap between each size and a 44pt touch target, vertical only for
+// buttons with a label, whose width already reaches it.
+const HIT_SLOP = {
+    icon: 6,
+    'icon-lg': 4,
+    'icon-sm': 8,
+    'icon-xl': 2,
+    'icon-xs': 10,
+    lg: { bottom: 4, top: 4 },
+    md: { bottom: 6, top: 6 },
+    sm: { bottom: 8, top: 8 },
+    xl: { bottom: 2, top: 2 },
+    xs: { bottom: 10, top: 10 },
+};
+export function Button({ accessibilityState, children, className, disabled, labelClassName, loading = false, size = 'md', variant = 'default', ...props }) {
+    const isDisabled = Boolean(disabled || loading);
+    const isSolid = variant === 'default' || variant === 'destructive';
+    return (_jsx(Pressable, { accessibilityRole: "button", accessibilityState: {
+            ...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, { "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":";AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAE/B,+DAA+D;AAC/D,MAAM,cAAc,GAAG,GAAG,CACxB,oGAAoG,EACpG;IACE,eAAe,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE;IACnD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE,WAAW;YACf,EAAE,EAAE,WAAW;YACf,EAAE,EAAE,UAAU;SACf;QACD,OAAO,EAAE;YACP,OAAO,EAAE,2BAA2B;YACpC,WAAW,EAAE,mCAAmC;YAChD,KAAK,EAAE,qCAAqC;YAC5C,OAAO,EAAE,yBAAyB;YAClC,SAAS,EAAE,iCAAiC;SAC7C;KACF;CACF,CACF,CAAC;AAEF,MAAM,aAAa,GAAG,GAAG,CAAC,aAAa,EAAE;IACvC,eAAe,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE;IACnD,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE;QACvD,OAAO,EAAE;YACP,OAAO,EAAE,yBAAyB;YAClC,WAAW,EAAE,6BAA6B;YAC1C,KAAK,EAAE,iBAAiB;YACxB,OAAO,EAAE,iBAAiB;YAC1B,SAAS,EAAE,2BAA2B;SACvC;KACF;CACF,CAAC,CAAC;AAWH,MAAM,UAAU,MAAM,CAAC,EACrB,QAAQ,EACR,SAAS,EACT,cAAc,EACd,IAAI,EACJ,OAAO,EACP,GAAG,KAAK,EACI;IACZ,OAAO,CACL,KAAC,SAAS,IACR,iBAAiB,EAAC,QAAQ,EAC1B,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC,KACvD,KAAK,YAET,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,cAAc,CAAC,YAClE,QAAQ,GACJ,GACG,CACb,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"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"}

package/dist/components/Card.d.ts

@@ -1,20 +1,30 @@
 import { View } from 'react-native';
-import { Text } from './Text';
+import { type TextProps } from './Text';
+export type CardActionProps = React.ComponentProps<typeof View>;
 export type CardContentProps = React.ComponentProps<typeof View>;
-export type CardDescriptionProps = React.ComponentProps<typeof Text>;
+export type CardDescriptionProps = Omit<TextProps, 'tone' | 'variant'>;
+export type CardFooterProps = React.ComponentProps<typeof View>;
 export type CardHeaderProps = React.ComponentProps<typeof View>;
 export type CardProps = React.ComponentProps<typeof View>;
-export type CardTitleProps = React.ComponentProps<typeof Text>;
+export type CardTitleProps = Omit<TextProps, 'tone' | 'variant'>;
+declare function CardAction({ className, ...props }: CardActionProps): import("react").JSX.Element;
 declare function CardContent({ className, ...props }: CardContentProps): import("react").JSX.Element;
 declare function CardDescription({ className, ...props }: CardDescriptionProps): import("react").JSX.Element;
-declare function CardHeader({ className, ...props }: CardHeaderProps): import("react").JSX.Element;
+declare function CardFooter({ className, ...props }: CardFooterProps): import("react").JSX.Element;
+/**
+ * Lays a `Card.Action` out beside the title and description, top-aligned,
+ * like the web header's grid.
+ */
+declare function CardHeader({ children, className, ...props }: CardHeaderProps): import("react").JSX.Element;
 declare function CardRoot({ className, ...props }: CardProps): import("react").JSX.Element;
 declare function CardTitle({ className, ...props }: CardTitleProps): import("react").JSX.Element;
 declare const Card: typeof CardRoot & {
+    Action: typeof CardAction;
     Content: typeof CardContent;
     Description: typeof CardDescription;
+    Footer: typeof CardFooter;
     Header: typeof CardHeader;
     Title: typeof CardTitle;
 };
-export { Card, CardContent, CardDescription, CardHeader, CardTitle };
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, };
 //# sourceMappingURL=Card.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AACjE,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AACrE,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AAChE,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AAC1D,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AAE/D,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAE7D;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,+BAErE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,+BAE3D;AAED,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,+BAUnD;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,+BAQzD;AAID,QAAA,MAAM,IAAI;;;;;CAKR,CAAC;AAEH,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,eAAe,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AAChE,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AACjE,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;AACvE,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AAChE,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AAChE,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AAC1D,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;AAKjE,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,+BAE3D;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAE7D;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,+BASrE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,+BAI3D;AAED;;;GAGG;AACH,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,+BAyBrE;AAED,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,+BAUnD;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,+BAQzD;AAED,QAAA,MAAM,IAAI;;;;;;;CAOR,CAAC;AAEH,OAAO,EACL,IAAI,EACJ,UAAU,EACV,WAAW,EACX,eAAe,EACf,UAAU,EACV,UAAU,EACV,SAAS,GACV,CAAC"}

package/dist/components/Card.js

@@ -1,29 +1,47 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, isValidElement } from 'react';
 import { View } from 'react-native';
 import { cn } from '../lib/cn';
 import { Text } from './Text';
+// The parts sit in a column with `gap-4` and their own side padding, which
+// reproduces the web's spacing between header, content and footer.
+function CardAction({ className, ...props }) {
+    return _jsx(View, { className: cn('self-start', className), ...props });
+}
 function CardContent({ className, ...props }) {
-    return _jsx(View, { className: cn('gap-3 px-5', className), ...props });
+    return _jsx(View, { className: cn('px-6', className), ...props });
 }
 function CardDescription({ className, ...props }) {
-    return _jsx(Text, { className: className, tone: "muted", ...props });
+    return (_jsx(Text, { className: cn('text-sm', className), tone: "muted", variant: "body", ...props }));
+}
+function CardFooter({ className, ...props }) {
+    return (_jsx(View, { className: cn('flex-row items-center px-6', className), ...props }));
 }
-function CardHeader({ className, ...props }) {
-    return _jsx(View, { className: cn('gap-1 px-5', className), ...props });
+/**
+ * Lays a `Card.Action` out beside the title and description, top-aligned,
+ * like the web header's grid.
+ */
+function CardHeader({ children, className, ...props }) {
+    const parts = Children.toArray(children);
+    const actions = parts.filter((child) => isValidElement(child) && child.type === CardAction);
+    if (actions.length === 0) {
+        return (_jsx(View, { className: cn('gap-1.5 px-6', className), ...props, children: children }));
+    }
+    return (_jsxs(View, { className: cn('flex-row items-start gap-4 px-6', className), ...props, children: [_jsx(View, { className: "flex-1 gap-1.5", children: parts.filter((child) => !actions.includes(child)) }), actions] }));
 }
 function CardRoot({ className, ...props }) {
-    return (_jsx(View, { className: cn('border-border bg-card gap-4 rounded-xl border py-5', className), ...props }));
+    return (_jsx(View, { className: cn('border-border bg-card gap-4 rounded-2xl border py-6 shadow-xs shadow-black/5', className), ...props }));
 }
 function CardTitle({ className, ...props }) {
-    return (_jsx(Text, { className: cn('text-card-foreground', className), variant: "h4", ...props }));
+    return (_jsx(Text, { className: cn('text-card-foreground leading-none', className), variant: "h3", ...props }));
 }
-// Same compound shape as `Card` in @pickle-ui/react. The parts are exported
-// so Fast Refresh keeps their state; the public entry only exports `Card`.
 const Card = Object.assign(CardRoot, {
+    Action: CardAction,
     Content: CardContent,
     Description: CardDescription,
+    Footer: CardFooter,
     Header: CardHeader,
     Title: CardTitle,
 });
-export { Card, CardContent, CardDescription, CardHeader, CardTitle };
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, };
 //# sourceMappingURL=Card.js.map

package/dist/components/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAQ9B,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAoB;IAC5D,OAAO,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAAC;AACrE,CAAC;AAED,SAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAwB;IACpE,OAAO,KAAC,IAAI,IAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAC,OAAO,KAAK,KAAK,GAAI,CAAC;AAChE,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAmB;IAC1D,OAAO,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAAC;AACrE,CAAC;AAED,SAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAa;IAClD,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,CACX,oDAAoD,EACpD,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAkB;IACxD,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC,EAChD,OAAO,EAAC,IAAI,KACR,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,4EAA4E;AAC5E,2EAA2E;AAC3E,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE;IACnC,OAAO,EAAE,WAAW;IACpB,WAAW,EAAE,eAAe;IAC5B,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,SAAS;CACjB,CAAC,CAAC;AAEH,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,eAAe,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/components/Card.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"}