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

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,31 @@ 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`                                                                                                                |
+| `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`                                                                                                                                            |
 
 Every component takes the props of the React Native element it renders,
 `className` included, and merges your `className` last.
 
+`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
+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 +104,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;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"}

package/dist/components/Button.js

@@ -1,39 +1,121 @@
-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 './_internal/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
+// 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: '' },
+        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',
+        },
         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 }) }));
+const spinnerVariants = cva('', {
+    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',
+        },
+    },
+});
+// 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, { 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":";AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAC;AAU9C,2EAA2E;AAC3E,mEAAmE;AAEnE,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,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAoB;IAC5D,OAAO,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAAC;AAC/D,CAAC;AAED,SAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAwB;IACpE,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,EACnC,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,MAAM,KACV,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAmB;IAC1D,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,CAAC,4BAA4B,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAC5E,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,SAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAmB;IACpE,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACzC,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAC1B,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU,CAC9D,CAAC;IAEF,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACzB,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC,KAAM,KAAK,YACtD,QAAQ,GACJ,CACR,CAAC;IACJ,CAAC;IAED,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,CAAC,iCAAiC,EAAE,SAAS,CAAC,KACvD,KAAK,aAET,KAAC,IAAI,IAAC,SAAS,EAAC,gBAAgB,YAC7B,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,GAC7C,EACN,OAAO,IACH,CACR,CAAC;AACJ,CAAC;AAED,SAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAa;IAClD,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,CACX,8EAA8E,EAC9E,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,mCAAmC,EAAE,SAAS,CAAC,EAC7D,OAAO,EAAC,IAAI,KACR,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE;IACnC,MAAM,EAAE,UAAU;IAClB,OAAO,EAAE,WAAW;IACpB,WAAW,EAAE,eAAe;IAC5B,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,SAAS;CACjB,CAAC,CAAC;AAEH,OAAO,EACL,IAAI,EACJ,UAAU,EACV,WAAW,EACX,eAAe,EACf,UAAU,EACV,UAAU,EACV,SAAS,GACV,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/_internal/Spinner.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The web `Spinner`'s look on native: a three-quarter ring turning once a
+ * second. Color it with a `border-*` class. Decorative: the control showing
+ * it reports the busy state.
+ */
+export declare function Spinner({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=Spinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/_internal/Spinner.tsx"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAsC5D"}