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

package/dist/components/Text.js

@@ -4,7 +4,7 @@ import { Text as NativeText, Platform, StyleSheet } from 'react-native';
 import { cn } from '../lib/cn';
 // 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', {
+const textVariants = cva('text-foreground font-sans', {
     defaultVariants: { variant: 'body' },
     variants: {
         tone: {
@@ -15,8 +15,8 @@ const textVariants = cva('text-foreground', {
         variant: {
             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',
+            h1: 'font-heading text-h1 font-semibold tracking-tight',
+            h2: 'font-heading text-h2 font-semibold tracking-tight',
             h3: 'text-h3 font-semibold',
             h4: 'text-h4 font-medium',
             lead: 'text-lead',
@@ -30,7 +30,8 @@ const textVariants = cva('text-foreground', {
 });
 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.
+// fonts don't resolve, so `code` names each platform's monospace font. The
+// `style` prop wins over `font-sans` from `className`.
 const styles = StyleSheet.create({
     code: { fontFamily: Platform.select({ default: 'monospace', ios: 'Menlo' }) },
 });

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,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"}
+{"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,2BAA2B,EAAE;IACpD,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,mDAAmD;YACvD,EAAE,EAAE,mDAAmD;YACvD,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,2EAA2E;AAC3E,uDAAuD;AACvD,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,IAAI,EAAE,EAAE,UAAU,EAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,EAAE;CAC9E,CAAC,CAAC;AAQH,MAAM,UAAU,IAAI,CAAC,EACnB,SAAS,EACT,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,OAAO,GAAG,MAAM,EAChB,MAAM,EACN,GAAG,KAAK,EACE;IACV,OAAO,CACL,KAAC,UAAU,IACT,iBAAiB,EACf,OAAO,IAAI,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAEzD,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,SAAS,CAAC,EACjE,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACvC,KAAK,EAAE,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,KACpD,KAAK,GACT,CACH,CAAC;AACJ,CAAC"}

package/dist/components/XStack.d.ts

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

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

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

package/dist/components/XStack.js

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

package/dist/components/XStack.js.map

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

package/dist/components/YStack.d.ts

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

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

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

package/dist/components/YStack.js

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

package/dist/components/YStack.js.map

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

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

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

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

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

package/dist/components/_internal/InputFrame.js

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

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

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

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

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

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

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

package/dist/components/_internal/StoryItem.js

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

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

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

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

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

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

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

package/dist/components/_internal/layout.js

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

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

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

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

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

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

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

package/dist/components/_internal/useControllableState.js

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

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

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

package/dist/components/form/Checkbox.d.ts

@@ -0,0 +1,26 @@
+import { Pressable } from 'react-native';
+export type CheckboxProps = Omit<React.ComponentProps<typeof Pressable>, 'children' | 'disabled'> & {
+    checked?: boolean;
+    /** Class overrides for the row around the box and label, the check and the label. */
+    classNames?: {
+        field?: string;
+        indicator?: string;
+        label?: string;
+    };
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    /** Shows a minus instead of the check, for a partly selected group. */
+    indeterminate?: boolean;
+    /** Marks the value as invalid, like the web's `aria-invalid`. */
+    invalid?: boolean;
+    /** Text next to the box; pressing it toggles the checkbox and names it. */
+    label?: React.ReactNode;
+    onCheckedChange?: (checked: boolean) => void;
+    size?: 'md' | 'sm';
+};
+/**
+ * A checkbox, like `Checkbox` in @pickle-ui/react. Give it a `label`, or an
+ * `accessibilityLabel` when visible text elsewhere names it.
+ */
+export declare function Checkbox({ accessibilityState, checked: checkedProp, className, classNames, defaultChecked, disabled, indeterminate, invalid, label, onCheckedChange, size, ...props }: CheckboxProps): import("react").JSX.Element;
+//# sourceMappingURL=Checkbox.d.ts.map

package/dist/components/form/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/form/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAc,MAAM,cAAc,CAAC;AAsBrD,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EACtC,UAAU,GAAG,UAAU,CACxB,GAAG;IACF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qFAAqF;IACrF,UAAU,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uEAAuE;IACvE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EACvB,kBAAkB,EAClB,OAAO,EAAE,WAAW,EACpB,SAAS,EACT,UAAU,EACV,cAAsB,EACtB,QAAgB,EAChB,aAAqB,EACrB,OAAe,EACf,KAAK,EACL,eAAe,EACf,IAAW,EACX,GAAG,KAAK,EACT,EAAE,aAAa,+BAkDf"}

package/dist/components/form/Checkbox.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pressable, Text, View } from 'react-native';
+import { cn } from '../../lib/cn';
+import { useControllableState } from '../_internal/useControllableState';
+// Same box sizes as `Checkbox` in @pickle-ui/react. `hitSlop` stretches the
+// box to a 44pt touch target, vertically only when a label already widens it.
+const boxClasses = { md: 'size-4.5', sm: 'size-3.5' };
+const boxHitSlop = { md: 13, sm: 15 };
+const fieldHitSlop = {
+    md: { bottom: 13, top: 13 },
+    sm: { bottom: 15, top: 15 },
+};
+// The web draws Tabler's check and minus icons. Without SVG, the check is the
+// bottom and right borders of a rotated box, and the minus a bar.
+const checkClasses = {
+    md: 'h-[9px] w-[5px] border-b-[1.5px] border-r-[1.5px]',
+    sm: 'h-[7px] w-[4px] border-b-[1.25px] border-r-[1.25px]',
+};
+const minusClasses = { md: 'h-[1.5px] w-2', sm: 'h-[1.25px] w-1.5' };
+/**
+ * A checkbox, like `Checkbox` in @pickle-ui/react. Give it a `label`, or an
+ * `accessibilityLabel` when visible text elsewhere names it.
+ */
+export function Checkbox({ accessibilityState, checked: checkedProp, className, classNames, defaultChecked = false, disabled = false, indeterminate = false, invalid = false, label, onCheckedChange, size = 'md', ...props }) {
+    const [checked, setChecked] = useControllableState(checkedProp, defaultChecked, onCheckedChange);
+    return (_jsxs(Pressable, { accessibilityState: {
+            ...accessibilityState,
+            checked: indeterminate ? 'mixed' : checked,
+            disabled,
+        }, "aria-checked": indeterminate ? 'mixed' : checked, "aria-disabled": disabled, className: label
+            ? cn('flex-row items-center gap-2', classNames?.field)
+            : 'self-start', disabled: disabled, hitSlop: label ? fieldHitSlop[size] : boxHitSlop[size], onPress: () => setChecked(!checked), role: "checkbox", ...props, children: [_jsx(CheckboxBox, { checked: checked, className: className, disabled: disabled, indeterminate: indeterminate, indicatorClassName: classNames?.indicator, invalid: invalid, size: size }), label ? (_jsx(Text, { className: cn('text-foreground font-sans text-sm leading-none font-medium', disabled && 'opacity-50', classNames?.label), children: label })) : null] }));
+}
+function CheckboxBox({ checked, className, disabled, indeterminate, indicatorClassName, invalid, size, }) {
+    const filled = checked && !indeterminate;
+    return (_jsx(View, { className: cn('items-center justify-center rounded-[4px] border shadow-xs shadow-black/5', boxClasses[size], 
+        // A checked box is filled in both themes, so the dark input
+        // background must not apply to it.
+        filled
+            ? 'border-primary bg-primary'
+            : cn('border-input bg-background dark:bg-input/32', invalid && 'border-destructive/36'), (checked || indeterminate || invalid || disabled) && 'shadow-none', disabled && 'opacity-64', className), children: indeterminate ? (_jsx(View, { className: cn('bg-foreground rounded-full', minusClasses[size], indicatorClassName) })) : checked ? (_jsx(View, { className: cn('border-primary-foreground -mt-px rotate-45', checkClasses[size], indicatorClassName) })) : null }));
+}
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/form/Checkbox.js.map

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

package/dist/components/form/Form.context.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from 'react';
+import { type UseFormReturn } from 'react-hook-form';
+export type FormFieldContextValue = {
+    /** The field's label, used as its control's accessibility label when it is text. */
+    label?: ReactNode;
+    /** The `nativeID` of the field's label, for `aria-labelledby`. */
+    labelId?: string;
+    name?: string;
+    /** Registers the control the label focuses when pressed. */
+    setControl: (control: FocusTarget | null) => void;
+};
+type FocusTarget = {
+    focus: () => void;
+};
+export declare const FormFieldContext: import("react").Context<FormFieldContextValue | null>;
+/** True inside `Form.InputGroup`, where `Form.Input` renders `InputGroup.Input`. */
+export declare const FormInputGroupContext: import("react").Context<boolean>;
+/** Submits the form, like pressing a submit button or Enter on the web. */
+export declare const FormSubmitContext: import("react").Context<() => void>;
+export declare function getErrorMessage(error: unknown): ReactNode;
+/**
+ * React Hook Form tracks field state but has no DOM to label: this maps the
+ * current `Form.Field` onto its control, naming it by the field's label and
+ * marking it `invalid` while the field has an error.
+ */
+export declare function useFormControlProps(): {
+    accessibilityLabel: string | undefined;
+    'aria-labelledby': string | undefined;
+    invalid: boolean;
+};
+export declare function useFormMethods(): UseFormReturn;
+export declare function useRequiredFieldName(name: string | undefined, componentName: string): string;
+export {};
+//# sourceMappingURL=Form.context.d.ts.map

package/dist/components/form/Form.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.context.d.ts","sourceRoot":"","sources":["../../../src/components/form/Form.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,SAAS,EAAO,MAAM,OAAO,CAAC;AAC3E,OAAO,EAEL,KAAK,aAAa,EAEnB,MAAM,iBAAiB,CAAC;AAEzB,MAAM,MAAM,qBAAqB,GAAG;IAClC,oFAAoF;IACpF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kEAAkE;IAClE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF,KAAK,WAAW,GAAG;IAAE,KAAK,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAEzC,eAAO,MAAM,gBAAgB,uDAE5B,CAAC;AAEF,oFAAoF;AACpF,eAAO,MAAM,qBAAqB,kCAAuB,CAAC;AAE1D,2EAA2E;AAC3E,eAAO,MAAM,iBAAiB,gCAAuB,IAAI,CAAW,CAAC;AAErE,wBAAgB,eAAe,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,CAUzD;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB;;;;EAiBlC;AAED,wBAAgB,cAAc,kBAU7B;AAED,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,MAAM,GAAG,SAAS,EACxB,aAAa,EAAE,MAAM,UAWtB"}

package/dist/components/form/Form.context.js

@@ -0,0 +1,53 @@
+import { createContext, isValidElement, use } from 'react';
+import { useFormContext, useFormState, } from 'react-hook-form';
+export const FormFieldContext = createContext(null);
+/** True inside `Form.InputGroup`, where `Form.Input` renders `InputGroup.Input`. */
+export const FormInputGroupContext = createContext(false);
+/** Submits the form, like pressing a submit button or Enter on the web. */
+export const FormSubmitContext = createContext(() => { });
+export function getErrorMessage(error) {
+    if (!error || typeof error !== 'object')
+        return undefined;
+    const message = error.message;
+    return isValidElement(message) ||
+        typeof message === 'string' ||
+        typeof message === 'number'
+        ? message
+        : undefined;
+}
+/**
+ * React Hook Form tracks field state but has no DOM to label: this maps the
+ * current `Form.Field` onto its control, naming it by the field's label and
+ * marking it `invalid` while the field has an error.
+ */
+export function useFormControlProps() {
+    const field = use(FormFieldContext);
+    const { control, getFieldState } = useFormMethods();
+    const name = field?.name;
+    const formState = useFormState({
+        control,
+        disabled: !name,
+        exact: true,
+        name,
+    });
+    return {
+        accessibilityLabel: typeof field?.label === 'string' ? field.label : undefined,
+        'aria-labelledby': field?.labelId,
+        invalid: name ? getFieldState(name, formState).invalid : false,
+    };
+}
+export function useFormMethods() {
+    const methods = useFormContext();
+    if (!methods) {
+        throw new Error('Form components must be rendered inside <Form form={form}>.');
+    }
+    return methods;
+}
+export function useRequiredFieldName(name, componentName) {
+    const fieldName = name ?? use(FormFieldContext)?.name;
+    if (!fieldName) {
+        throw new Error(`${componentName} requires a name prop or a parent <Form.Field name="...">.`);
+    }
+    return fieldName;
+}
+//# sourceMappingURL=Form.context.js.map

package/dist/components/form/Form.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.context.js","sourceRoot":"","sources":["../../../src/components/form/Form.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAkB,GAAG,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,EACL,cAAc,EAEd,YAAY,GACb,MAAM,iBAAiB,CAAC;AAczB,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAC3C,IAAI,CACL,CAAC;AAEF,oFAAoF;AACpF,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;AAE1D,2EAA2E;AAC3E,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAa,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;AAErE,MAAM,UAAU,eAAe,CAAC,KAAc;IAC5C,IAAI,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,SAAS,CAAC;IAE1D,MAAM,OAAO,GAAI,KAA+B,CAAC,OAAO,CAAC;IAEzD,OAAO,cAAc,CAAC,OAAO,CAAC;QAC5B,OAAO,OAAO,KAAK,QAAQ;QAC3B,OAAO,OAAO,KAAK,QAAQ;QAC3B,CAAC,CAAC,OAAO;QACT,CAAC,CAAC,SAAS,CAAC;AAChB,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,mBAAmB;IACjC,MAAM,KAAK,GAAG,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACpC,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,GAAG,cAAc,EAAE,CAAC;IACpD,MAAM,IAAI,GAAG,KAAK,EAAE,IAAI,CAAC;IACzB,MAAM,SAAS,GAAG,YAAY,CAAC;QAC7B,OAAO;QACP,QAAQ,EAAE,CAAC,IAAI;QACf,KAAK,EAAE,IAAI;QACX,IAAI;KACL,CAAC,CAAC;IAEH,OAAO;QACL,kBAAkB,EAChB,OAAO,KAAK,EAAE,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;QAC5D,iBAAiB,EAAE,KAAK,EAAE,OAAO;QACjC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK;KAC/D,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,cAAc;IAC5B,MAAM,OAAO,GAAG,cAAc,EAA0B,CAAC;IAEzD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CACb,6DAA6D,CAC9D,CAAC;IACJ,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,oBAAoB,CAClC,IAAwB,EACxB,aAAqB;IAErB,MAAM,SAAS,GAAG,IAAI,IAAI,GAAG,CAAC,gBAAgB,CAAC,EAAE,IAAI,CAAC;IAEtD,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,MAAM,IAAI,KAAK,CACb,GAAG,aAAa,4DAA4D,CAC7E,CAAC;IACJ,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC"}

package/dist/components/form/Form.d.ts

@@ -0,0 +1,33 @@
+import { type ButtonProps } from '../Button';
+import { FormCheckbox, type FormCheckboxProps } from './FormCheckbox';
+import { FormDescription, type FormDescriptionProps } from './FormDescription';
+import { FormError, type FormErrorProps } from './FormError';
+import { FormField, type FormFieldProps } from './FormField';
+import { FormInput, type FormInputProps } from './FormInput';
+import { FormInputGroup, type FormInputGroupProps } from './FormInputGroup';
+import { FormLabel, type FormLabelProps } from './FormLabel';
+import { type FormRadioGroupProps } from './FormRadioGroup';
+import { type FormProps, FormRoot } from './FormRoot';
+import { FormTextarea, type FormTextareaProps } from './FormTextarea';
+/**
+ * A `Button` that submits the form when pressed, like the web's submit
+ * button. Pass `onPress` to give it another action.
+ */
+declare function FormButton({ onPress, ...props }: ButtonProps): import("react").JSX.Element;
+declare const Form: typeof FormRoot & {
+    Button: typeof FormButton;
+    Checkbox: typeof FormCheckbox;
+    Description: typeof FormDescription;
+    Error: typeof FormError;
+    Field: typeof FormField;
+    Input: typeof FormInput;
+    InputGroup: typeof FormInputGroup;
+    Label: typeof FormLabel;
+    RadioGroup: (({ name: nameProp, onValueChange, ...props }: FormRadioGroupProps) => import("react").JSX.Element) & {
+        Item: typeof import("./RadioGroup").RadioGroupItem;
+    };
+    Textarea: typeof FormTextarea;
+};
+export { Form };
+export type { FormCheckboxProps, FormDescriptionProps, FormErrorProps, FormFieldProps, FormInputGroupProps, FormInputProps, FormLabelProps, FormProps, FormRadioGroupProps, FormTextareaProps, };
+//# sourceMappingURL=Form.d.ts.map

package/dist/components/form/Form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/form/Form.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAErD,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5E,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5E,OAAO,EAAE,KAAK,SAAS,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEtE;;;GAGG;AACH,iBAAS,UAAU,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,+BAIrD;AAED,QAAA,MAAM,IAAI;;;;;;;;;;;;;CAWR,CAAC;AAEH,OAAO,EAAE,IAAI,EAAE,CAAC;AAChB,YAAY,EACV,iBAAiB,EACjB,oBAAoB,EACpB,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,cAAc,EACd,cAAc,EACd,SAAS,EACT,mBAAmB,EACnB,iBAAiB,GAClB,CAAC"}

package/dist/components/form/Form.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { use } from 'react';
+import { Button } from '../Button';
+import { FormSubmitContext } from './Form.context';
+import { FormCheckbox } from './FormCheckbox';
+import { FormDescription } from './FormDescription';
+import { FormError } from './FormError';
+import { FormField } from './FormField';
+import { FormInput } from './FormInput';
+import { FormInputGroup } from './FormInputGroup';
+import { FormLabel } from './FormLabel';
+import { FormRadioGroup } from './FormRadioGroup';
+import { FormRoot } from './FormRoot';
+import { FormTextarea } from './FormTextarea';
+/**
+ * A `Button` that submits the form when pressed, like the web's submit
+ * button. Pass `onPress` to give it another action.
+ */
+function FormButton({ onPress, ...props }) {
+    const submit = use(FormSubmitContext);
+    return _jsx(Button, { onPress: onPress ?? submit, ...props });
+}
+const Form = Object.assign(FormRoot, {
+    Button: FormButton,
+    Checkbox: FormCheckbox,
+    Description: FormDescription,
+    Error: FormError,
+    Field: FormField,
+    Input: FormInput,
+    InputGroup: FormInputGroup,
+    Label: FormLabel,
+    RadioGroup: FormRadioGroup,
+    Textarea: FormTextarea,
+});
+export { Form };
+//# sourceMappingURL=Form.js.map

package/dist/components/form/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/components/form/Form.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,MAAM,EAAoB,MAAM,WAAW,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,YAAY,EAA0B,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,eAAe,EAA6B,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,cAAc,EAA4B,MAAM,kBAAkB,CAAC;AAC5E,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,cAAc,EAA4B,MAAM,kBAAkB,CAAC;AAC5E,OAAO,EAAkB,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,YAAY,EAA0B,MAAM,gBAAgB,CAAC;AAEtE;;;GAGG;AACH,SAAS,UAAU,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAe;IACpD,MAAM,MAAM,GAAG,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEtC,OAAO,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,IAAI,MAAM,KAAM,KAAK,GAAI,CAAC;AAC3D,CAAC;AAED,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE;IACnC,MAAM,EAAE,UAAU;IAClB,QAAQ,EAAE,YAAY;IACtB,WAAW,EAAE,eAAe;IAC5B,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,UAAU,EAAE,cAAc;IAC1B,KAAK,EAAE,SAAS;IAChB,UAAU,EAAE,cAAc;IAC1B,QAAQ,EAAE,YAAY;CACvB,CAAC,CAAC;AAEH,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/form/FormCheckbox.d.ts

@@ -0,0 +1,7 @@
+import { type CheckboxProps } from './Checkbox';
+export type FormCheckboxProps = Omit<CheckboxProps, 'checked' | 'invalid'> & {
+    name?: string;
+};
+/** A `Checkbox` bound to the field's boolean value. */
+export declare function FormCheckbox({ name: nameProp, onCheckedChange, ...props }: FormCheckboxProps): import("react").JSX.Element;
+//# sourceMappingURL=FormCheckbox.d.ts.map