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

package/dist/components/form/FormRoot.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { FormProvider, } from 'react-hook-form';
+import { View } from 'react-native';
+import { cn } from '../../lib/cn';
+import { FormSubmitContext } from './Form.context';
+/**
+ * React Native has no `<form>`, so the root shares a submit action:
+ * `Form.Button` and the return key in `Form.Input` call it, like a submit
+ * button and Enter on the web.
+ */
+export function FormRoot({ className, form, onSubmit, ...props }) {
+    const submit = useCallback(() => {
+        if (onSubmit)
+            void form.handleSubmit(onSubmit)();
+    }, [form, onSubmit]);
+    return (_jsx(FormProvider, { ...form, children: _jsx(FormSubmitContext, { value: submit, children: _jsx(View, { className: cn('gap-6', className), ...props }) }) }));
+}
+//# sourceMappingURL=FormRoot.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormRoot.js","sourceRoot":"","sources":["../../../src/components/form/FormRoot.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAEL,YAAY,GAGb,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAQnD;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CAA+C,EACrE,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EACc;IACtB,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,IAAI,QAAQ;YAAE,KAAK,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,CAAC;IACnD,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;IAErB,OAAO,CACL,KAAC,YAAY,OAAK,IAAI,YACpB,KAAC,iBAAiB,IAAC,KAAK,EAAE,MAAM,YAC9B,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,GACpC,GACP,CAChB,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,7 @@
+import { type TextareaProps } from './Textarea';
+export type FormTextareaProps = Omit<TextareaProps, 'defaultValue' | 'invalid' | 'value'> & {
+    name?: string;
+};
+/** A `Textarea` bound to the field's value. */
+export declare function FormTextarea({ name: nameProp, onBlur, onChangeText, ref, ...props }: FormTextareaProps): import("react").JSX.Element;
+//# sourceMappingURL=FormTextarea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormTextarea.d.ts","sourceRoot":"","sources":["../../../src/components/form/FormTextarea.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAE1D,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,aAAa,EACb,cAAc,GAAG,SAAS,GAAG,OAAO,CACrC,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAItB,+CAA+C;AAC/C,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,YAAY,EACZ,GAAG,EACH,GAAG,KAAK,EACT,EAAE,iBAAiB,+BA6BnB"}

package/dist/components/form/FormTextarea.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { use, useImperativeHandle, useRef } from 'react';
+import { useController } from 'react-hook-form';
+import { FormFieldContext, useFormControlProps, useFormMethods, useRequiredFieldName, } from './Form.context';
+import { Textarea } from './Textarea';
+/** A `Textarea` bound to the field's value. */
+export function FormTextarea({ name: nameProp, onBlur, onChangeText, ref, ...props }) {
+    const name = useRequiredFieldName(nameProp, 'Form.Textarea');
+    const { control } = useFormMethods();
+    const { field } = useController({ control, name });
+    const controlProps = useFormControlProps();
+    const fieldContext = use(FormFieldContext);
+    const inputRef = useRef(null);
+    useImperativeHandle(ref, () => inputRef.current);
+    return (_jsx(Textarea, { ...controlProps, ...props, onBlur: (event) => {
+            field.onBlur();
+            onBlur?.(event);
+        }, onChangeText: (text) => {
+            field.onChange(text);
+            onChangeText?.(text);
+        }, ref: (node) => {
+            inputRef.current = node;
+            field.ref(node);
+            fieldContext?.setControl(node);
+        }, value: field.value ?? '' }));
+}
+//# sourceMappingURL=FormTextarea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormTextarea.js","sourceRoot":"","sources":["../../../src/components/form/FormTextarea.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EACnB,cAAc,EACd,oBAAoB,GACrB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAC;AAS1D,+CAA+C;AAC/C,MAAM,UAAU,YAAY,CAAC,EAC3B,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,YAAY,EACZ,GAAG,EACH,GAAG,KAAK,EACU;IAClB,MAAM,IAAI,GAAG,oBAAoB,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;IAC7D,MAAM,EAAE,OAAO,EAAE,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,EAAE,KAAK,EAAE,GAAG,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IACnD,MAAM,YAAY,GAAG,mBAAmB,EAAE,CAAC;IAC3C,MAAM,YAAY,GAAG,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC3C,MAAM,QAAQ,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACxD,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAA4B,CAAC,CAAC;IAEtE,OAAO,CACL,KAAC,QAAQ,OACH,YAAY,KACZ,KAAK,EACT,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE;YAChB,KAAK,CAAC,MAAM,EAAE,CAAC;YACf,MAAM,EAAE,CAAC,KAAK,CAAC,CAAC;QAClB,CAAC,EACD,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE;YACrB,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;YACrB,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC;QACvB,CAAC,EACD,GAAG,EAAE,CAAC,IAA8B,EAAE,EAAE;YACtC,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;YACxB,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YAChB,YAAY,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;QACjC,CAAC,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,EAAE,GACxB,CACH,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,17 @@
+import { TextInput } from 'react-native';
+export type InputProps = React.ComponentProps<typeof TextInput> & {
+    /** Class overrides for the inner `TextInput`; `className` styles the control around it. */
+    classNames?: {
+        input?: 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';
+    /** Renders the bare `TextInput`, without the border and background. */
+    unstyled?: boolean;
+};
+/** A single-line text field, like `Input` in @pickle-ui/react. */
+export declare function Input({ className, classNames, disabled, editable, invalid, onBlur, onFocus, size, unstyled, ...props }: InputProps): import("react").JSX.Element;
+//# sourceMappingURL=Input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/form/Input.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAczC,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAChE,2FAA2F;IAC3F,UAAU,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,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;IAC1B,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,kEAAkE;AAClE,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,UAAU,EACV,QAAgB,EAChB,QAAe,EACf,OAAe,EACf,MAAM,EACN,OAAO,EACP,IAAW,EACX,QAAgB,EAChB,GAAG,KAAK,EACT,EAAE,UAAU,+BAyCZ"}

package/dist/components/form/Input.js

@@ -0,0 +1,32 @@
+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';
+// Same heights as `Button` for the same size, so they line up side by side,
+// and the web's paddings minus the 1pt border.
+const heightClasses = { lg: 'h-9', md: 'h-8', sm: 'h-7' };
+const paddingClasses = {
+    lg: 'px-[13px]',
+    md: 'px-[11px]',
+    sm: 'px-[9px]',
+};
+/** A single-line text field, like `Input` in @pickle-ui/react. */
+export function Input({ className, classNames, disabled = false, editable = true, invalid = false, onBlur, onFocus, size = 'md', unstyled = false, ...props }) {
+    const [focused, setFocused] = useState(false);
+    // The web's 14px from `sm` up: the 16px it uses on phones only stops iOS
+    // Safari zooming into a focused field, which native apps don't do.
+    // `text-[14px]` sets the size without `text-sm`'s line height, which
+    // pushes a single-line field's text off center on iOS.
+    const input = (_jsx(TextInput, { accessibilityState: { disabled }, className: cn('text-foreground flex-1 text-[14px] outline-none', paddingClasses[size], unstyled ? cn(heightClasses[size], disabled && 'opacity-64') : 'h-full', unstyled ? className : classNames?.input), editable: editable && !disabled, onBlur: (event) => {
+            setFocused(false);
+            onBlur?.(event);
+        }, onFocus: (event) => {
+            setFocused(true);
+            onFocus?.(event);
+        }, placeholderTextColorClassName: "accent-muted-foreground/72", ...props }));
+    if (unstyled)
+        return input;
+    return (_jsx(InputFrame, { className: cn(heightClasses[size], className), disabled: disabled, focused: focused, invalid: invalid, children: input }));
+}
+//# sourceMappingURL=Input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/form/Input.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,4EAA4E;AAC5E,+CAA+C;AAC/C,MAAM,aAAa,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAW,CAAC;AACnE,MAAM,cAAc,GAAG;IACrB,EAAE,EAAE,WAAW;IACf,EAAE,EAAE,WAAW;IACf,EAAE,EAAE,UAAU;CACN,CAAC;AAcX,kEAAkE;AAClE,MAAM,UAAU,KAAK,CAAC,EACpB,SAAS,EACT,UAAU,EACV,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,IAAI,EACf,OAAO,GAAG,KAAK,EACf,MAAM,EACN,OAAO,EACP,IAAI,GAAG,IAAI,EACX,QAAQ,GAAG,KAAK,EAChB,GAAG,KAAK,EACG;IACX,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,yEAAyE;IACzE,mEAAmE;IACnE,qEAAqE;IACrE,uDAAuD;IACvD,MAAM,KAAK,GAAG,CACZ,KAAC,SAAS,IACR,kBAAkB,EAAE,EAAE,QAAQ,EAAE,EAChC,SAAS,EAAE,EAAE,CACX,iDAAiD,EACjD,cAAc,CAAC,IAAI,CAAC,EACpB,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,QAAQ,IAAI,YAAY,CAAC,CAAC,CAAC,CAAC,QAAQ,EACvE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,EAAE,KAAK,CACzC,EACD,QAAQ,EAAE,QAAQ,IAAI,CAAC,QAAQ,EAC/B,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE;YAChB,UAAU,CAAC,KAAK,CAAC,CAAC;YAClB,MAAM,EAAE,CAAC,KAAK,CAAC,CAAC;QAClB,CAAC,EACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC,EACD,6BAA6B,EAAC,4BAA4B,KACtD,KAAK,GACT,CACH,CAAC;IAEF,IAAI,QAAQ;QAAE,OAAO,KAAK,CAAC;IAE3B,OAAO,CACL,KAAC,UAAU,IACT,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,EAC7C,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,YAEf,KAAK,GACK,CACd,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,10 @@
+/**
+ * Lets a wrapper mark the frame `disabled` or `invalid` when its input isn't
+ * a direct `InputGroup.Input` child, like `Form.InputGroup` does with
+ * `Form.Input`, whose invalid state comes from the form.
+ */
+export declare const InputGroupStateContext: import("react").Context<{
+    disabled?: boolean;
+    invalid?: boolean;
+} | null>;
+//# sourceMappingURL=InputGroup.context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroup.context.d.ts","sourceRoot":"","sources":["../../../src/components/form/InputGroup.context.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,sBAAsB;eACtB,OAAO;cACR,OAAO;SACX,CAAC"}

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

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+/**
+ * Lets a wrapper mark the frame `disabled` or `invalid` when its input isn't
+ * a direct `InputGroup.Input` child, like `Form.InputGroup` does with
+ * `Form.Input`, whose invalid state comes from the form.
+ */
+export const InputGroupStateContext = createContext(null);
+//# sourceMappingURL=InputGroup.context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroup.context.js","sourceRoot":"","sources":["../../../src/components/form/InputGroup.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,aAAa,CAGhD,IAAI,CAAC,CAAC"}

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

@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { type ButtonProps } from '../Button';
+import { type InputProps } from './Input';
+type InputGroupAlign = 'block-end' | 'block-start' | 'inline-end' | 'inline-start';
+export type InputGroupAddonProps = React.ComponentProps<typeof Pressable> & {
+    align?: InputGroupAlign;
+    /** Text is wrapped in a label; other children, such as icons, render as they are. */
+    children?: ReactNode;
+};
+export type InputGroupButtonProps = ButtonProps & {
+    align?: InputGroupAlign;
+};
+export type InputGroupInputProps = Omit<InputProps, 'unstyled'>;
+export type InputGroupProps = React.ComponentProps<typeof View>;
+export type InputGroupTextProps = React.ComponentProps<typeof Text>;
+/** Pressing an addon focuses the field, like clicking it on the web. */
+declare function InputGroupAddon({ align, children, className, ...props }: InputGroupAddonProps): import("react").JSX.Element;
+declare function InputGroupButton({ align, className, size, variant, ...props }: InputGroupButtonProps): import("react").JSX.Element;
+declare function InputGroupInput({ className, onBlur, onFocus, ref, ...props }: InputGroupInputProps): import("react").JSX.Element;
+/** Places addons around the input and frames the group like an `Input`. */
+declare function InputGroupRoot({ children, className, ...props }: InputGroupProps): import("react").JSX.Element;
+declare function InputGroupText({ className, ...props }: InputGroupTextProps): import("react").JSX.Element;
+declare const InputGroup: typeof InputGroupRoot & {
+    Addon: typeof InputGroupAddon;
+    Button: typeof InputGroupButton;
+    Input: typeof InputGroupInput;
+    Text: typeof InputGroupText;
+};
+export { InputGroup };
+//# sourceMappingURL=InputGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../src/components/form/InputGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,IAAI,EAAkB,IAAI,EAAE,MAAM,cAAc,CAAC;AAIrE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAGjD,KAAK,eAAe,GAChB,WAAW,GACX,aAAa,GACb,YAAY,GACZ,cAAc,CAAC;AA6BnB,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAC1E,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,WAAW,GAAG;IAAE,KAAK,CAAC,EAAE,eAAe,CAAA;CAAE,CAAC;AAE9E,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;AAEhE,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AAEhE,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AAEpE,wEAAwE;AACxE,iBAAS,eAAe,CAAC,EACvB,KAAsB,EACtB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,+BAuBtB;AAED,iBAAS,gBAAgB,CAAC,EACxB,KAAoB,EACpB,SAAS,EACT,IAAgB,EAChB,OAAiB,EACjB,GAAG,KAAK,EACT,EAAE,qBAAqB,+BAMvB;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,MAAM,EACN,OAAO,EACP,GAAG,EACH,GAAG,KAAK,EACT,EAAE,oBAAoB,+BA6BtB;AAED,2EAA2E;AAC3E,iBAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,+BAoDzE;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,+BAQnE;AA+CD,QAAA,MAAM,UAAU;;;;;CAKd,CAAC;AAEH,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/form/InputGroup.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, createContext, isValidElement, use, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { cn } from '../../lib/cn';
+import { InputFrame } from '../_internal/InputFrame';
+import { Button } from '../Button';
+import { Input } from './Input';
+import { InputGroupStateContext } from './InputGroup.context';
+// The web's addon paddings minus the 1pt border. Addons holding a button sit
+// closer to the edge, like the web's `has-[>button]` margins.
+const addonClasses = {
+    'block-end': 'w-full justify-start px-[11px] pb-[11px]',
+    'block-start': 'w-full justify-start px-[11px] pt-[11px]',
+    'inline-end': 'pe-[11px]',
+    'inline-start': 'ps-[11px]',
+};
+const buttonAddonClasses = {
+    'block-end': '',
+    'block-start': '',
+    'inline-end': 'pe-[3px]',
+    'inline-start': 'ps-[3px]',
+};
+const InputGroupContext = createContext(null);
+/** Pressing an addon focuses the field, like clicking it on the web. */
+function InputGroupAddon({ align = 'inline-start', children, className, ...props }) {
+    const group = useInputGroup('Addon');
+    return (_jsx(Pressable, { accessible: false, className: cn('flex-row items-center justify-center gap-2', addonClasses[align], className), onPress: group.focusInput, ...props, children: Children.map(children, (child) => typeof child === 'string' || typeof child === 'number' ? (_jsx(Text, { className: "text-foreground text-[14px]", children: child })) : (child)) }));
+}
+function InputGroupButton({ align = 'inline-end', className, size = 'icon-xs', variant = 'ghost', ...props }) {
+    return (_jsx(InputGroupAddon, { align: align, className: buttonAddonClasses[align], children: _jsx(Button, { className: className, size: size, variant: variant, ...props }) }));
+}
+function InputGroupInput({ className, onBlur, onFocus, ref, ...props }) {
+    const group = useInputGroup('Input');
+    const inputRef = useRef(null);
+    useImperativeHandle(ref, () => inputRef.current);
+    return (_jsx(Input, { className: cn(group.hasInlineStart && 'ps-2', group.hasInlineEnd && 'pe-2', className), onBlur: (event) => {
+            group.setFocused(false);
+            onBlur?.(event);
+        }, onFocus: (event) => {
+            group.setFocused(true);
+            onFocus?.(event);
+        }, ref: (node) => {
+            inputRef.current = node;
+            // The group focuses the input when an addon is pressed.
+            group.setInput(node);
+        }, unstyled: true, ...props }));
+}
+/** Places addons around the input and frames the group like an `Input`. */
+function InputGroupRoot({ children, className, ...props }) {
+    const [focused, setFocused] = useState(false);
+    const inputRef = useRef(null);
+    const state = use(InputGroupStateContext);
+    const sorted = sortChildren(children);
+    const { parts } = sorted;
+    const disabled = sorted.disabled || Boolean(state?.disabled);
+    const invalid = sorted.invalid || Boolean(state?.invalid);
+    const hasInlineEnd = parts['inline-end'].length > 0;
+    const hasInlineStart = parts['inline-start'].length > 0;
+    const context = useMemo(() => ({
+        focusInput: () => inputRef.current?.focus(),
+        hasInlineEnd,
+        hasInlineStart,
+        setFocused,
+        setInput: (input) => {
+            inputRef.current = input;
+        },
+    }), [hasInlineEnd, hasInlineStart]);
+    const hasBlock = parts['block-start'].length > 0 || parts['block-end'].length > 0;
+    const row = [
+        ...parts['inline-start'],
+        ...parts.field,
+        ...parts['inline-end'],
+    ];
+    return (_jsx(InputGroupContext, { value: context, children: _jsx(InputFrame, { className: cn(hasBlock ? 'flex-col' : 'h-8 items-center', className), disabled: disabled, focused: focused, invalid: invalid, role: "group", ...props, children: hasBlock ? (_jsxs(_Fragment, { children: [parts['block-start'], _jsx(View, { className: "flex-row items-center", children: row }), parts['block-end']] })) : (row) }) }));
+}
+function InputGroupText({ className, ...props }) {
+    return (_jsx(Text, { className: cn('text-muted-foreground text-[14px]', className), numberOfLines: 1, ...props }));
+}
+/**
+ * Splits the group's direct children by `align`, since React Native has no
+ * CSS `order`, and reads `disabled` and `invalid` from its inputs.
+ */
+function sortChildren(children) {
+    const parts = {
+        'block-end': [],
+        'block-start': [],
+        field: [],
+        'inline-end': [],
+        'inline-start': [],
+    };
+    let disabled = false;
+    let invalid = false;
+    for (const child of Children.toArray(children)) {
+        if (isValidElement(child) &&
+            (child.type === InputGroupAddon || child.type === InputGroupButton)) {
+            const fallback = child.type === InputGroupButton ? 'inline-end' : 'inline-start';
+            parts[child.props.align ?? fallback].push(child);
+        }
+        else {
+            if (isValidElement(child) &&
+                child.type === InputGroupInput) {
+                disabled || (disabled = Boolean(child.props.disabled));
+                invalid || (invalid = Boolean(child.props.invalid));
+            }
+            parts.field.push(child);
+        }
+    }
+    return { disabled, invalid, parts };
+}
+function useInputGroup(part) {
+    const group = use(InputGroupContext);
+    if (!group)
+        throw new Error(`InputGroup.${part} must be inside an InputGroup.`);
+    return group;
+}
+const InputGroup = Object.assign(InputGroupRoot, {
+    Addon: InputGroupAddon,
+    Button: InputGroupButton,
+    Input: InputGroupInput,
+    Text: InputGroupText,
+});
+export { InputGroup };
+//# sourceMappingURL=InputGroup.js.map

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

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

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

@@ -0,0 +1,29 @@
+import { Pressable, View } from 'react-native';
+export type RadioGroupItemProps = Omit<React.ComponentProps<typeof Pressable>, 'children' | 'disabled'> & {
+    /** Class overrides for the row around the circle and label, the dot and the label. */
+    classNames?: {
+        field?: string;
+        indicator?: string;
+        label?: string;
+    };
+    disabled?: boolean;
+    /** Marks the choice as invalid, like the web's `aria-invalid`. */
+    invalid?: boolean;
+    /** Text next to the circle; pressing it selects the item and names it. */
+    label?: React.ReactNode;
+    size?: 'md' | 'sm';
+    value: string;
+};
+export type RadioGroupProps = React.ComponentProps<typeof View> & {
+    defaultValue?: string;
+    disabled?: boolean;
+    onValueChange?: (value: string) => void;
+    value?: string;
+};
+declare function RadioGroupItem({ accessibilityState, className, classNames, disabled: disabledProp, invalid, label, size, value, ...props }: RadioGroupItemProps): import("react").JSX.Element;
+declare function RadioGroupRoot({ className, defaultValue, disabled, onValueChange, value: valueProp, ...props }: RadioGroupProps): import("react").JSX.Element;
+declare const RadioGroup: typeof RadioGroupRoot & {
+    Item: typeof RadioGroupItem;
+};
+export { RadioGroup, RadioGroupItem };
+//# sourceMappingURL=RadioGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/form/RadioGroup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAQ,IAAI,EAAE,MAAM,cAAc,CAAC;AAuBrD,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EACtC,UAAU,GAAG,UAAU,CACxB,GAAG;IACF,sFAAsF;IACtF,UAAU,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,GAAG;IAChE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,iBAAS,cAAc,CAAC,EACtB,kBAAkB,EAClB,SAAS,EACT,UAAU,EACV,QAAQ,EAAE,YAAoB,EAC9B,OAAe,EACf,KAAK,EACL,IAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,mBAAmB,+BAwDrB;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,YAAY,EACZ,QAAgB,EAChB,aAAa,EACb,KAAK,EAAE,SAAS,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,+BAuBjB;AAED,QAAA,MAAM,UAAU;;CAEd,CAAC;AAEH,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/form/RadioGroup.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, use, useMemo } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { cn } from '../../lib/cn';
+import { useControllableState } from '../_internal/useControllableState';
+// Same sizes as `RadioGroup` in @pickle-ui/react. `hitSlop` stretches the
+// circle to a 44pt touch target, vertically only when a label widens it.
+const controlClasses = { md: 'size-4', sm: 'size-3.5' };
+const indicatorClasses = { md: 'size-2', sm: 'size-1.5' };
+const controlHitSlop = { md: 14, sm: 15 };
+const fieldHitSlop = {
+    md: { bottom: 14, top: 14 },
+    sm: { bottom: 15, top: 15 },
+};
+const RadioGroupContext = createContext(null);
+function RadioGroupItem({ accessibilityState, className, classNames, disabled: disabledProp = false, invalid = false, label, size = 'md', value, ...props }) {
+    const group = use(RadioGroupContext);
+    if (!group)
+        throw new Error('RadioGroup.Item must be inside a RadioGroup.');
+    const checked = group.value === value;
+    const disabled = group.disabled || disabledProp;
+    return (_jsxs(Pressable, { accessibilityState: { ...accessibilityState, checked, disabled }, "aria-checked": checked, "aria-disabled": disabled, className: label
+            ? cn('flex-row items-center gap-2', classNames?.field)
+            : 'self-start', disabled: disabled, hitSlop: label ? fieldHitSlop[size] : controlHitSlop[size], onPress: () => group.onSelect(value), role: "radio", ...props, children: [_jsx(View, { className: cn('border-input bg-background items-center justify-center rounded-full border', controlClasses[size], checked && 'border-primary', invalid && 'border-destructive', disabled && 'opacity-50', className), children: checked ? (_jsx(View, { className: cn('bg-primary rounded-full', indicatorClasses[size], classNames?.indicator) })) : null }), label ? (_jsx(Text, { className: cn('text-sm leading-none font-medium', disabled ? 'text-muted-foreground' : 'text-foreground', classNames?.label), children: label })) : null] }));
+}
+function RadioGroupRoot({ className, defaultValue, disabled = false, onValueChange, value: valueProp, ...props }) {
+    const [value, setValue] = useControllableState(valueProp, defaultValue, onValueChange);
+    const context = useMemo(() => ({
+        disabled,
+        onSelect: (next) => {
+            if (next !== value)
+                setValue(next);
+        },
+        value,
+    }), [disabled, setValue, value]);
+    return (_jsx(RadioGroupContext, { value: context, children: _jsx(View, { className: cn('gap-2', className), role: "radiogroup", ...props }) }));
+}
+const RadioGroup = Object.assign(RadioGroupRoot, {
+    Item: RadioGroupItem,
+});
+export { RadioGroup, RadioGroupItem };
+//# sourceMappingURL=RadioGroup.js.map

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

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

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/card.d.ts

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

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

@@ -1 +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"}
+{"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,eAAe,EACf,gBAAgB,EAChB,oBAAoB,EACpB,eAAe,EACf,eAAe,EACf,SAAS,EACT,cAAc,GACf,MAAM,oBAAoB,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"}