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

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

@@ -0,0 +1,19 @@
+import { TextInput } from 'react-native';
+export type TextareaProps = Omit<React.ComponentProps<typeof TextInput>, 'multiline'> & {
+    /** Class overrides for the inner `TextInput`; `className` styles the control around it. */
+    classNames?: {
+        textarea?: string;
+    };
+    /** Dims the field and stops editing, like the web's `disabled`. */
+    disabled?: boolean;
+    /** Marks the value as invalid, like the web's `aria-invalid`. */
+    invalid?: boolean;
+    size?: 'lg' | 'md' | 'sm';
+};
+/**
+ * A multi-line text field that grows with its content from three lines, like
+ * `Textarea` in @pickle-ui/react. Set a `min-h-*` class on
+ * `classNames.textarea` to change the minimum.
+ */
+export declare function Textarea({ className, classNames, disabled, editable, invalid, onBlur, onFocus, size, ...props }: TextareaProps): import("react").JSX.Element;
+//# sourceMappingURL=Textarea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/form/Textarea.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAWzC,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EACtC,WAAW,CACZ,GAAG;IACF,2FAA2F;IAC3F,UAAU,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,UAAU,EACV,QAAgB,EAChB,QAAe,EACf,OAAe,EACf,MAAM,EACN,OAAO,EACP,IAAW,EACX,GAAG,KAAK,EACT,EAAE,aAAa,+BAiCf"}

package/dist/components/form/Textarea.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { TextInput } from 'react-native';
+import { cn } from '../../lib/cn';
+import { InputFrame } from '../_internal/InputFrame';
+const sizeClasses = {
+    lg: 'min-h-18 px-[11px]',
+    md: 'min-h-17.5 px-[11px]',
+    sm: 'min-h-16 px-[9px]',
+};
+/**
+ * A multi-line text field that grows with its content from three lines, like
+ * `Textarea` in @pickle-ui/react. Set a `min-h-*` class on
+ * `classNames.textarea` to change the minimum.
+ */
+export function Textarea({ className, classNames, disabled = false, editable = true, invalid = false, onBlur, onFocus, size = 'md', ...props }) {
+    const [focused, setFocused] = useState(false);
+    return (_jsx(InputFrame, { className: className, disabled: disabled, focused: focused, invalid: invalid, children: _jsx(TextInput, { accessibilityState: { disabled }, className: cn('text-foreground web:field-sizing-content web:resize-none flex-1 py-2 text-sm outline-none', sizeClasses[size], classNames?.textarea), editable: editable && !disabled, multiline: true, onBlur: (event) => {
+                setFocused(false);
+                onBlur?.(event);
+            }, onFocus: (event) => {
+                setFocused(true);
+                onFocus?.(event);
+            }, placeholderTextColorClassName: "accent-muted-foreground/72", textAlignVertical: "top", ...props }) }));
+}
+//# sourceMappingURL=Textarea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../src/components/form/Textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,MAAM,WAAW,GAAG;IAClB,EAAE,EAAE,oBAAoB;IACxB,EAAE,EAAE,sBAAsB;IAC1B,EAAE,EAAE,mBAAmB;CACf,CAAC;AAeX;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,SAAS,EACT,UAAU,EACV,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,IAAI,EACf,OAAO,GAAG,KAAK,EACf,MAAM,EACN,OAAO,EACP,IAAI,GAAG,IAAI,EACX,GAAG,KAAK,EACM;IACd,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,OAAO,CACL,KAAC,UAAU,IACT,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,YAEhB,KAAC,SAAS,IACR,kBAAkB,EAAE,EAAE,QAAQ,EAAE,EAChC,SAAS,EAAE,EAAE,CACX,2FAA2F,EAC3F,WAAW,CAAC,IAAI,CAAC,EACjB,UAAU,EAAE,QAAQ,CACrB,EACD,QAAQ,EAAE,QAAQ,IAAI,CAAC,QAAQ,EAC/B,SAAS,QACT,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE;gBAChB,UAAU,CAAC,KAAK,CAAC,CAAC;gBAClB,MAAM,EAAE,CAAC,KAAK,CAAC,CAAC;YAClB,CAAC,EACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;gBACjB,UAAU,CAAC,IAAI,CAAC,CAAC;gBACjB,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;YACnB,CAAC,EACD,6BAA6B,EAAC,4BAA4B,EAC1D,iBAAiB,EAAC,KAAK,KACnB,KAAK,GACT,GACS,CACd,CAAC;AACJ,CAAC"}

package/dist/entries/checkbox.d.ts

@@ -0,0 +1,3 @@
+export { Checkbox } from '../components/form/Checkbox';
+export type { CheckboxProps } from '../components/form/Checkbox';
+//# sourceMappingURL=checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/entries/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,YAAY,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC"}

package/dist/entries/checkbox.js

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

package/dist/entries/checkbox.js.map

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

package/dist/entries/flex.d.ts

@@ -0,0 +1,3 @@
+export { Flex } from '../components/Flex';
+export type { FlexProps } from '../components/Flex';
+//# sourceMappingURL=flex.d.ts.map

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

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

package/dist/entries/flex.js

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

package/dist/entries/flex.js.map

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

package/dist/entries/form.d.ts

@@ -0,0 +1,3 @@
+export { Form } from '../components/form/Form';
+export type { FormCheckboxProps, FormDescriptionProps, FormErrorProps, FormFieldProps, FormInputGroupProps, FormInputProps, FormLabelProps, FormProps, FormRadioGroupProps, FormTextareaProps, } from '../components/form/Form';
+//# sourceMappingURL=form.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../src/entries/form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,YAAY,EACV,iBAAiB,EACjB,oBAAoB,EACpB,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,cAAc,EACd,cAAc,EACd,SAAS,EACT,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,yBAAyB,CAAC"}

package/dist/entries/form.js

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

package/dist/entries/form.js.map

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

package/dist/entries/grid.d.ts

@@ -0,0 +1,3 @@
+export { Grid } from '../components/Grid';
+export type { GridProps } from '../components/Grid';
+//# sourceMappingURL=grid.d.ts.map

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

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

package/dist/entries/grid.js

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

package/dist/entries/grid.js.map

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

package/dist/entries/input-group.d.ts

@@ -0,0 +1,3 @@
+export { InputGroup } from '../components/form/InputGroup';
+export type { InputGroupAddonProps, InputGroupButtonProps, InputGroupInputProps, InputGroupProps, InputGroupTextProps, } from '../components/form/InputGroup';
+//# sourceMappingURL=input-group.d.ts.map

package/dist/entries/input-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../src/entries/input-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,YAAY,EACV,oBAAoB,EACpB,qBAAqB,EACrB,oBAAoB,EACpB,eAAe,EACf,mBAAmB,GACpB,MAAM,+BAA+B,CAAC"}

package/dist/entries/input-group.js

@@ -0,0 +1,2 @@
+export { InputGroup } from '../components/form/InputGroup';
+//# sourceMappingURL=input-group.js.map

package/dist/entries/input-group.js.map

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

package/dist/entries/input.d.ts

@@ -0,0 +1,3 @@
+export { Input } from '../components/form/Input';
+export type { InputProps } from '../components/form/Input';
+//# sourceMappingURL=input.d.ts.map

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

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

package/dist/entries/input.js

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

package/dist/entries/input.js.map

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

package/dist/entries/radio-group.d.ts

@@ -0,0 +1,3 @@
+export { RadioGroup } from '../components/form/RadioGroup';
+export type { RadioGroupItemProps, RadioGroupProps, } from '../components/form/RadioGroup';
+//# sourceMappingURL=radio-group.d.ts.map

package/dist/entries/radio-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../src/entries/radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,YAAY,EACV,mBAAmB,EACnB,eAAe,GAChB,MAAM,+BAA+B,CAAC"}

package/dist/entries/radio-group.js

@@ -0,0 +1,2 @@
+export { RadioGroup } from '../components/form/RadioGroup';
+//# sourceMappingURL=radio-group.js.map

package/dist/entries/radio-group.js.map

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

package/dist/entries/separator.d.ts

@@ -0,0 +1,3 @@
+export { Separator } from '../components/Separator';
+export type { SeparatorProps } from '../components/Separator';
+//# sourceMappingURL=separator.d.ts.map

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

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

package/dist/entries/separator.js

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

package/dist/entries/separator.js.map

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

package/dist/entries/spinner.d.ts

@@ -0,0 +1,3 @@
+export { Spinner } from '../components/Spinner';
+export type { SpinnerProps } from '../components/Spinner';
+//# sourceMappingURL=spinner.d.ts.map

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

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

package/dist/entries/spinner.js

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

package/dist/entries/spinner.js.map

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

package/dist/entries/textarea.d.ts

@@ -0,0 +1,3 @@
+export { Textarea } from '../components/form/Textarea';
+export type { TextareaProps } from '../components/form/Textarea';
+//# sourceMappingURL=textarea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../src/entries/textarea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,YAAY,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC"}

package/dist/entries/textarea.js

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

package/dist/entries/textarea.js.map

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

package/dist/entries/x-stack.d.ts

@@ -0,0 +1,3 @@
+export { XStack } from '../components/XStack';
+export type { XStackProps } from '../components/XStack';
+//# sourceMappingURL=x-stack.d.ts.map

package/dist/entries/x-stack.d.ts.map

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

package/dist/entries/x-stack.js

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

package/dist/entries/x-stack.js.map

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

package/dist/entries/y-stack.d.ts

@@ -0,0 +1,3 @@
+export { YStack } from '../components/YStack';
+export type { YStackProps } from '../components/YStack';
+//# sourceMappingURL=y-stack.d.ts.map

package/dist/entries/y-stack.d.ts.map

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

package/dist/entries/y-stack.js

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

package/dist/entries/y-stack.js.map

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

package/dist/index.d.ts

@@ -1,8 +1,20 @@
 export * from './entries/badge';
 export * from './entries/button';
 export * from './entries/card';
+export * from './entries/checkbox';
 export * from './entries/cn';
+export * from './entries/flex';
+export * from './entries/form';
+export * from './entries/grid';
+export * from './entries/input';
+export * from './entries/input-group';
+export * from './entries/radio-group';
+export * from './entries/separator';
+export * from './entries/spinner';
 export * from './entries/text';
+export * from './entries/textarea';
 export * from './entries/theme';
 export * from './entries/use-color-token';
+export * from './entries/x-stack';
+export * from './entries/y-stack';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +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,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC"}
+{"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,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC"}

package/dist/index.js

@@ -3,8 +3,20 @@
 export * from './entries/badge';
 export * from './entries/button';
 export * from './entries/card';
+export * from './entries/checkbox';
 export * from './entries/cn';
+export * from './entries/flex';
+export * from './entries/form';
+export * from './entries/grid';
+export * from './entries/input';
+export * from './entries/input-group';
+export * from './entries/radio-group';
+export * from './entries/separator';
+export * from './entries/spinner';
 export * from './entries/text';
+export * from './entries/textarea';
 export * from './entries/theme';
 export * from './entries/use-color-token';
+export * from './entries/x-stack';
+export * from './entries/y-stack';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +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,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC"}
+{"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,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pickle-ui/react-native",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "type": "module",
   "description": "React Native components for Expo, styled with Pickle UI's tokens through Uniwind.",
   "main": "dist/index.js",
@@ -52,6 +52,7 @@
     "@pickle-ui/tokens": "1.0.0-beta.7"
   },
   "devDependencies": {
+    "@hookform/resolvers": "^5.4.0",
     "@react-native/assets-registry": "0.88.0",
     "@react-native/jest-preset": "^0.88.1",
     "@storybook/addon-docs": "^10.6.3",
@@ -68,6 +69,7 @@
     "react": "19.3.0",
     "react-doctor": "^0.5.6",
     "react-dom": "19.3.0",
+    "react-hook-form": "^7.79.0",
     "react-native": "0.88.0",
     "react-native-svg": "^15.16.0",
     "react-native-web": "^0.21.4",
@@ -76,10 +78,12 @@
     "test-renderer": "^1.3.1",
     "typescript": "^6.0.3",
     "uniwind": "^1.13.0",
-    "vite": "^8.3.5"
+    "vite": "^8.3.5",
+    "zod": "4.0.17"
   },
   "peerDependencies": {
     "react": "^19.0.0",
+    "react-hook-form": "^7.0.0",
     "react-native": "*",
     "tailwindcss": "^4.0.0",
     "uniwind": "^1.13.0"

package/src/components/Button.tsx

@@ -3,10 +3,10 @@ import { Children, isValidElement } from 'react';
 import { type Insets, Pressable, Text, View } from 'react-native';
 
 import { cn } from '../lib/cn';
-import { Spinner } from './_internal/Spinner';
+import { Spinner } from './Spinner';
 
 // Same variants, sizes and dimensions as `Button` in @pickle-ui/react on a
-// phone. Like the web's `pointer-coarse` hit area, `hitSlop` stretches every
+// phone, with its text sizes from `sm` up. Like the web's `pointer-coarse` hit area, `hitSlop` stretches every
 // size to a 44pt touch target. Paddings leave room for the 1pt border.
 const buttonVariants = cva(
   'flex-row items-center justify-center gap-2 rounded-lg border disabled:opacity-64',
@@ -49,17 +49,19 @@ const labelVariants = cva('font-medium', {
   defaultVariants: { size: 'md', variant: 'default' },
   variants: {
     pressed: { false: '', true: '' },
+    // The web's sizes from `sm` up, not its larger phone sizes, which only
+    // stop iOS Safari zooming into focused fields.
     size: {
-      icon: 'text-base',
-      'icon-lg': 'text-base',
-      'icon-sm': 'text-base',
-      'icon-xl': 'text-base',
-      'icon-xs': 'text-base',
-      lg: 'text-base',
-      md: 'text-base',
-      sm: 'text-base',
-      xl: 'text-lg',
-      xs: 'text-sm',
+      icon: 'text-sm',
+      'icon-lg': 'text-sm',
+      'icon-sm': 'text-sm',
+      'icon-xl': 'text-sm',
+      'icon-xs': 'text-sm',
+      lg: 'text-sm',
+      md: 'text-sm',
+      sm: 'text-sm',
+      xl: 'text-base',
+      xs: 'text-xs',
     },
     variant: {
       default: 'text-primary-foreground',
@@ -73,16 +75,17 @@ const labelVariants = cva('font-medium', {
   },
 });
 
-const spinnerVariants = cva('', {
+// Sized and dimmed like the web button's icons, in the label's color.
+const spinnerVariants = cva('size-4 opacity-80', {
   variants: {
     variant: {
-      default: 'border-primary-foreground',
-      destructive: 'border-destructive-foreground',
-      'destructive-outline': 'border-foreground',
-      ghost: 'border-foreground',
-      link: 'border-foreground',
-      outline: 'border-foreground',
-      secondary: 'border-secondary-foreground',
+      default: 'text-primary-foreground',
+      destructive: 'text-destructive-foreground',
+      'destructive-outline': 'text-foreground',
+      ghost: 'text-foreground',
+      link: 'text-foreground',
+      outline: 'text-foreground',
+      secondary: 'text-secondary-foreground',
     },
   },
 });
@@ -198,7 +201,7 @@ export function Button({
           )}
           {loading ? (
             <View className="absolute">
-              <Spinner className={spinnerVariants({ variant })} />
+              <Spinner aria-hidden className={spinnerVariants({ variant })} />
             </View>
           ) : null}
         </>

package/src/components/Flex.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+
+import { Story } from './_internal/Story';
+import { StoryItem as Item } from './_internal/StoryItem';
+import { Flex } from './Flex';
+
+const meta = {
+  component: Flex,
+  parameters: { layout: 'fullscreen' },
+  title: 'components/Flex',
+} satisfies Meta<typeof Flex>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-6xl" title="Flex">
+      <Story.Section title="Direction and spacing">
+        <Flex direction="column" gap={3}>
+          <Item className="min-h-16">First</Item>
+          <Item className="min-h-16">Second</Item>
+          <Item className="min-h-16">Third</Item>
+        </Flex>
+      </Story.Section>
+
+      <Story.Section title="Alignment and distribution">
+        <Flex
+          align="center"
+          className="border-border min-h-40 rounded-md border border-dashed p-4"
+          gap={4}
+          justify="between"
+        >
+          <Item className="min-h-16 min-w-20">Start</Item>
+          <Item className="min-h-16 min-w-20">Center</Item>
+          <Item className="min-h-16 min-w-20">End</Item>
+        </Flex>
+      </Story.Section>
+
+      <Story.Section title="Wrapping">
+        <Flex gap={3} wrap="wrap">
+          {['One', 'Two', 'Three', 'Four', 'Five', 'Six'].map((label) => (
+            <Item className="min-h-16 min-w-24" key={label}>
+              {label}
+            </Item>
+          ))}
+        </Flex>
+      </Story.Section>
+
+      <Story.Section title="Responsive override">
+        <Flex className="flex-col md:flex-row" gap={3}>
+          <Item className="min-h-16">Column on small screens</Item>
+          <Item className="min-h-16">Row from md</Item>
+        </Flex>
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/Flex.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen } from '@testing-library/react-native';
+
+import { Flex } from './Flex';
+
+function classesOf(testID: string) {
+  return String(screen.getByTestId(testID).props.className).split(' ');
+}
+
+describe('Flex', () => {
+  it('lays its children out in a row, like the web', async () => {
+    await render(<Flex testID="flex" />);
+
+    expect(classesOf('flex')).toContain('flex-row');
+  });
+
+  it('renders layout props as Tailwind classes', async () => {
+    await render(
+      <Flex
+        align="center"
+        direction="column"
+        gap={4}
+        gapX={2}
+        gapY={3}
+        justify="between"
+        testID="flex"
+        wrap="wrap"
+      />,
+    );
+
+    expect(classesOf('flex')).toEqual(
+      expect.arrayContaining([
+        'flex-col',
+        'flex-wrap',
+        'items-center',
+        'justify-between',
+        'gap-4',
+        'gap-x-2',
+        'gap-y-3',
+      ]),
+    );
+  });
+
+  it('lets className override the props', async () => {
+    await render(
+      <Flex
+        className="custom-class flex-row"
+        direction="column"
+        testID="flex"
+      />,
+    );
+
+    expect(classesOf('flex')).toEqual(
+      expect.arrayContaining(['flex-row', 'custom-class']),
+    );
+    expect(classesOf('flex')).not.toContain('flex-col');
+  });
+});

package/src/components/Flex.tsx

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