@pickle-ui/react-native 0.0.0-stage → 0.0.0

package/README.md

@@ -1,3 +1,93 @@
-# Temporary Holding Version
+# @pickle-ui/react-native
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+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.
+
+Browse them in the [Storybook](https://ugogo.github.io/pickle-ui/react-native/),
+rendered in the browser through react-native-web.
+
+## Use Pickle UI
+
+In an Expo app, install the package with Uniwind and Tailwind:
+
+```bash
+npx expo install @pickle-ui/react-native@beta uniwind tailwindcss
+```
+
+Point Uniwind's Metro plugin at your stylesheet in `metro.config.js`:
+
+```js
+const { getDefaultConfig } = require('expo/metro-config');
+const { withUniwindConfig } = require('uniwind/metro');
+
+module.exports = withUniwindConfig(getDefaultConfig(__dirname), {
+  cssEntryFile: './src/global.css',
+  dtsFile: './src/uniwind-types.d.ts',
+});
+```
+
+Import Pickle's stylesheet in `src/global.css`, and import that file once
+from your root layout:
+
+```css
+@import '@pickle-ui/react-native/styles.css';
+```
+
+`styles.css` brings Tailwind, Uniwind, the tokens and the components' classes,
+so don't import `tailwindcss` or `uniwind` again. Uniwind compiles each
+imported stylesheet on its own to find themes, and the tokens only compile
+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.
+
+Then use the components:
+
+```tsx
+import { Button, Card, Text } from '@pickle-ui/react-native';
+
+export function Welcome() {
+  return (
+    <Card>
+      <Card.Header>
+        <Card.Title>Welcome</Card.Title>
+        <Card.Description>Pickle UI on iOS and Android.</Card.Description>
+      </Card.Header>
+      <Card.Content>
+        <Button onPress={() => {}}>Get started</Button>
+      </Card.Content>
+    </Card>
+  );
+}
+```
+
+[`examples/mobile`](../../examples/mobile) is a complete app with the setup
+steps, token overrides and runtime brand colors.
+
+## Exports
+
+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`                       |
+
+Every component takes the props of the React Native element it renders,
+`className` included, and merges your `className` last.
+
+## Theming
+
+The tokens are Uniwind themes. Override them in `global.css` inside
+`@variant light` and `@variant dark` blocks, declaring each variable in both
+themes, or at runtime with Uniwind's `ScopedVariables` and
+`Uniwind.updateCSSVariables`. See the
+[`@pickle-ui/tokens` README](../tokens/README.md#react-native).

package/dist/components/Badge.d.ts

@@ -0,0 +1,11 @@
+import { type VariantProps } from 'class-variance-authority';
+import { View } from 'react-native';
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "inProgress" | "inReview" | "secondary" | "success" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type BadgeProps = React.ComponentProps<typeof View> & VariantProps<typeof badgeVariants> & {
+    children: string;
+};
+export declare function Badge({ children, className, variant, ...props }: BadgeProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Badge.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/Badge.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+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' },
+    variants: {
+        variant: {
+            default: 'bg-primary',
+            inProgress: 'bg-info-subtle',
+            inReview: 'bg-warning-subtle',
+            secondary: 'bg-secondary',
+            success: 'bg-success-subtle',
+        },
+    },
+});
+const labelVariants = cva('text-xs font-medium', {
+    defaultVariants: { variant: 'default' },
+    variants: {
+        variant: {
+            default: 'text-primary-foreground',
+            inProgress: 'text-info-subtle-foreground',
+            inReview: 'text-warning-subtle-foreground',
+            secondary: 'text-secondary-foreground',
+            success: 'text-success-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 }) }));
+}
+//# sourceMappingURL=Badge.js.map

package/dist/components/Badge.js.map

@@ -0,0 +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"}

package/dist/components/Button.d.ts

@@ -0,0 +1,13 @@
+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;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ButtonProps = Omit<React.ComponentProps<typeof Pressable>, 'children'> & VariantProps<typeof buttonVariants> & {
+    children: string;
+    labelClassName?: string;
+};
+export declare function Button({ children, className, labelClassName, size, variant, ...props }: ButtonProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Button.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/Button.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { Pressable, Text } 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', {
+    defaultVariants: { size: 'md', variant: 'default' },
+    variants: {
+        size: {
+            lg: 'h-11 px-5',
+            md: 'h-10 px-4',
+            sm: 'h-8 px-3',
+        },
+        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',
+        },
+    },
+});
+const labelVariants = cva('font-medium', {
+    defaultVariants: { size: 'md', variant: 'default' },
+    variants: {
+        size: { lg: 'text-base', md: 'text-sm', sm: 'text-xs' },
+        variant: {
+            default: 'text-primary-foreground',
+            destructive: 'text-destructive-foreground',
+            ghost: '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 }) }));
+}
+//# sourceMappingURL=Button.js.map

package/dist/components/Button.js.map

@@ -0,0 +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"}

package/dist/components/Card.d.ts

@@ -0,0 +1,20 @@
+import { View } from 'react-native';
+import { Text } from './Text';
+export type CardContentProps = React.ComponentProps<typeof View>;
+export type CardDescriptionProps = React.ComponentProps<typeof Text>;
+export type CardHeaderProps = React.ComponentProps<typeof View>;
+export type CardProps = React.ComponentProps<typeof View>;
+export type CardTitleProps = React.ComponentProps<typeof Text>;
+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 CardRoot({ className, ...props }: CardProps): import("react").JSX.Element;
+declare function CardTitle({ className, ...props }: CardTitleProps): import("react").JSX.Element;
+declare const Card: typeof CardRoot & {
+    Content: typeof CardContent;
+    Description: typeof CardDescription;
+    Header: typeof CardHeader;
+    Title: typeof CardTitle;
+};
+export { Card, CardContent, CardDescription, CardHeader, CardTitle };
+//# sourceMappingURL=Card.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/Card.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { cn } from '../lib/cn';
+import { Text } from './Text';
+function CardContent({ className, ...props }) {
+    return _jsx(View, { className: cn('gap-3 px-5', className), ...props });
+}
+function CardDescription({ className, ...props }) {
+    return _jsx(Text, { className: className, tone: "muted", ...props });
+}
+function CardHeader({ className, ...props }) {
+    return _jsx(View, { className: cn('gap-1 px-5', className), ...props });
+}
+function CardRoot({ className, ...props }) {
+    return (_jsx(View, { className: cn('border-border bg-card gap-4 rounded-xl border py-5', className), ...props }));
+}
+function CardTitle({ className, ...props }) {
+    return (_jsx(Text, { className: cn('text-card-foreground', className), variant: "h4", ...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, {
+    Content: CardContent,
+    Description: CardDescription,
+    Header: CardHeader,
+    Title: CardTitle,
+});
+export { Card, CardContent, CardDescription, CardHeader, CardTitle };
+//# sourceMappingURL=Card.js.map

package/dist/components/Card.js.map

@@ -0,0 +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"}

package/dist/components/Text.d.ts

@@ -0,0 +1,10 @@
+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;
+} & 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 {};
+//# sourceMappingURL=Text.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/Text.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { Text as NativeText } from 'react-native';
+import { cn } from '../lib/cn';
+// Same variant and tone names as `Text` in @pickle-ui/react.
+const textVariants = cva('text-foreground', {
+    defaultVariants: { variant: 'body' },
+    variants: {
+        tone: {
+            destructive: 'text-destructive',
+            muted: 'text-muted-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',
+        },
+    },
+});
+export function Text({ className, tone, variant, ...props }) {
+    return (_jsx(NativeText, { className: cn(textVariants({ tone, variant }), className), ...props }));
+}
+//# sourceMappingURL=Text.js.map

package/dist/components/Text.js.map

@@ -0,0 +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"}

package/dist/entries/badge.d.ts

@@ -0,0 +1,3 @@
+export { Badge } from '../components/Badge';
+export type { BadgeProps } from '../components/Badge';
+//# sourceMappingURL=badge.d.ts.map

package/dist/entries/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/entries/badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,YAAY,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/entries/badge.js

@@ -0,0 +1,2 @@
+export { Badge } from '../components/Badge';
+//# sourceMappingURL=badge.js.map

package/dist/entries/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../src/entries/badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/entries/button.d.ts

@@ -0,0 +1,3 @@
+export { Button } from '../components/Button';
+export type { ButtonProps } from '../components/Button';
+//# sourceMappingURL=button.d.ts.map

package/dist/entries/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/entries/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/entries/button.js

@@ -0,0 +1,2 @@
+export { Button } from '../components/Button';
+//# sourceMappingURL=button.js.map

package/dist/entries/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/entries/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/entries/card.d.ts

@@ -0,0 +1,3 @@
+export { Card } from '../components/Card';
+export type { CardContentProps, CardDescriptionProps, CardHeaderProps, CardProps, CardTitleProps, } from '../components/Card';
+//# sourceMappingURL=card.d.ts.map

package/dist/entries/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/entries/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,YAAY,EACV,gBAAgB,EAChB,oBAAoB,EACpB,eAAe,EACf,SAAS,EACT,cAAc,GACf,MAAM,oBAAoB,CAAC"}

package/dist/entries/card.js

@@ -0,0 +1,2 @@
+export { Card } from '../components/Card';
+//# sourceMappingURL=card.js.map

package/dist/entries/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/entries/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/entries/cn.d.ts

@@ -0,0 +1,2 @@
+export { cn } from '../lib/cn';
+//# sourceMappingURL=cn.d.ts.map

package/dist/entries/cn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../src/entries/cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC"}

package/dist/entries/cn.js

@@ -0,0 +1,2 @@
+export { cn } from '../lib/cn';
+//# sourceMappingURL=cn.js.map

package/dist/entries/cn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.js","sourceRoot":"","sources":["../../src/entries/cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC"}

package/dist/entries/text.d.ts

@@ -0,0 +1,3 @@
+export { Text } from '../components/Text';
+export type { TextProps } from '../components/Text';
+//# sourceMappingURL=text.d.ts.map

package/dist/entries/text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/entries/text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,YAAY,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/entries/text.js

@@ -0,0 +1,2 @@
+export { Text } from '../components/Text';
+//# sourceMappingURL=text.js.map

package/dist/entries/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","sourceRoot":"","sources":["../../src/entries/text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/entries/use-color-token.d.ts

@@ -0,0 +1,2 @@
+export { useColorToken } from '../hooks/useColorToken';
+//# sourceMappingURL=use-color-token.d.ts.map

package/dist/entries/use-color-token.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-color-token.d.ts","sourceRoot":"","sources":["../../src/entries/use-color-token.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/entries/use-color-token.js

@@ -0,0 +1,2 @@
+export { useColorToken } from '../hooks/useColorToken';
+//# sourceMappingURL=use-color-token.js.map

package/dist/entries/use-color-token.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-color-token.js","sourceRoot":"","sources":["../../src/entries/use-color-token.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/hooks/useColorToken.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Reads a token as a color string, for props that take a color instead of a
+ * className (navigation options, `Switch`, `placeholderTextColor`).
+ * `useColorToken('primary')` returns the value behind `bg-primary`, or
+ * `undefined` when the token doesn't exist, so a typo never turns into the
+ * color `"undefined"`.
+ */
+export declare function useColorToken(name: string): string | undefined;
+//# sourceMappingURL=useColorToken.d.ts.map

package/dist/hooks/useColorToken.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColorToken.d.ts","sourceRoot":"","sources":["../../src/hooks/useColorToken.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAG9D"}

package/dist/hooks/useColorToken.js

@@ -0,0 +1,13 @@
+import { useCSSVariable } from 'uniwind';
+/**
+ * Reads a token as a color string, for props that take a color instead of a
+ * className (navigation options, `Switch`, `placeholderTextColor`).
+ * `useColorToken('primary')` returns the value behind `bg-primary`, or
+ * `undefined` when the token doesn't exist, so a typo never turns into the
+ * color `"undefined"`.
+ */
+export function useColorToken(name) {
+    const value = useCSSVariable(`--${name}`);
+    return typeof value === 'string' ? value : undefined;
+}
+//# sourceMappingURL=useColorToken.js.map

package/dist/hooks/useColorToken.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColorToken.js","sourceRoot":"","sources":["../../src/hooks/useColorToken.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC;;;;;;GAMG;AACH,MAAM,UAAU,aAAa,CAAC,IAAY;IACxC,MAAM,KAAK,GAAG,cAAc,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IAC1C,OAAO,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;AACvD,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export * from './entries/badge';
+export * from './entries/button';
+export * from './entries/card';
+export * from './entries/cn';
+export * from './entries/text';
+export * from './entries/use-color-token';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,2BAA2B,CAAC"}

package/dist/index.js

@@ -0,0 +1,9 @@
+// The public API is the union of the subpath entries in ./entries: add a
+// component there and re-export it here (see "Public API" in AGENTS.md).
+export * from './entries/badge';
+export * from './entries/button';
+export * from './entries/card';
+export * from './entries/cn';
+export * from './entries/text';
+export * from './entries/use-color-token';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,yEAAyE;AACzE,yEAAyE;AACzE,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,2BAA2B,CAAC"}

package/dist/lib/cn.d.ts

@@ -0,0 +1,3 @@
+/** Joins class names; later classes win, like `@pickle-ui/react/cn`. */
+export declare function cn(...classes: Array<false | null | string | undefined>): string;
+//# sourceMappingURL=cn.d.ts.map

package/dist/lib/cn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../src/lib/cn.ts"],"names":[],"mappings":"AAEA,wEAAwE;AACxE,wBAAgB,EAAE,CAAC,GAAG,OAAO,EAAE,KAAK,CAAC,KAAK,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC,UAEtE"}

package/dist/lib/cn.js

@@ -0,0 +1,6 @@
+import { twMerge } from 'tailwind-merge';
+/** Joins class names; later classes win, like `@pickle-ui/react/cn`. */
+export function cn(...classes) {
+    return twMerge(classes.filter(Boolean).join(' '));
+}
+//# sourceMappingURL=cn.js.map

package/dist/lib/cn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.js","sourceRoot":"","sources":["../../src/lib/cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC,wEAAwE;AACxE,MAAM,UAAU,EAAE,CAAC,GAAG,OAAiD;IACrE,OAAO,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,CAAC"}

package/package.json

@@ -1,6 +1,94 @@
 {
   "name": "@pickle-ui/react-native",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.0.0",
+  "type": "module",
+  "description": "React Native components for Expo, styled with Pickle UI's tokens through Uniwind.",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ugogo/pickle-ui.git",
+    "directory": "packages/react-native"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "@pickle-ui/source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./src/styles.css",
+    "./base.css": "./src/base.css",
+    "./*": {
+      "@pickle-ui/source": "./src/entries/*.ts",
+      "types": "./dist/entries/*.d.ts",
+      "import": "./dist/entries/*.js",
+      "default": "./dist/entries/*.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "keywords": [
+    "react-native",
+    "expo",
+    "components",
+    "ui",
+    "tailwind",
+    "uniwind"
+  ],
+  "author": "Ugo Onali",
+  "license": "MIT",
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "tailwind-merge": "^3.6.0",
+    "@pickle-ui/tokens": "1.0.0-beta.6"
+  },
+  "devDependencies": {
+    "@react-native/jest-preset": "^0.88.1",
+    "@storybook/addon-docs": "^10.6.3",
+    "@storybook/react-native-web-vite": "^10.6.5",
+    "@tailwindcss/vite": "^4.3.3",
+    "@testing-library/react-native": "^14.1.0",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^19.3.0",
+    "babel-preset-expo": "^58.0.21",
+    "expo": "^58.0.20",
+    "jest": "^30.5.2",
+    "jest-expo": "~58.0.12",
+    "react": "19.3.0",
+    "react-doctor": "^0.5.6",
+    "react-dom": "19.3.0",
+    "react-native": "0.88.0",
+    "react-native-web": "^0.21.4",
+    "storybook": "^10.6.3",
+    "tailwindcss": "^4.3.3",
+    "test-renderer": "^1.3.1",
+    "typescript": "^6.0.3",
+    "uniwind": "^1.13.0",
+    "vite": "^8.3.5"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-native": "*",
+    "tailwindcss": "^4.0.0",
+    "uniwind": "^1.13.0"
+  },
+  "scripts": {
+    "dev": "storybook dev -p 6007",
+    "clean": "node -e \"require('node:fs').rmSync('dist', { force: true, recursive: true })\"",
+    "build": "pnpm run clean && tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "storybook": "storybook dev -p 6007",
+    "build-storybook": "storybook build",
+    "test": "jest",
+    "doctor": "react-doctor"
+  }
 }

package/src/base.css

@@ -0,0 +1,6 @@
+/**
+ * Pickle's components as a content source, so Uniwind generates the classes
+ * they use. `styles.css` imports it; import it alone, after `uniwind`, to
+ * bring your own token set instead of `@pickle-ui/tokens/native.css`.
+ */
+@source './components/**/*.{ts,tsx}';