@mapples/ui 1.1.0 → 1.1.2

package/README.md

@@ -51,14 +51,6 @@ Interactive input components:
 - **IconButton**: Button with icon support
 - **Pressable**: Enhanced pressable component with styling
 
-### Form
-
-Form building blocks that work with `@mapples/form`:
-
-- **FormView**: Container that provides form context to children
-- **TextField**: Text input bound to a form field
-- **SubmitButton**: Button that triggers form submit and shows submitting state
-
 ### Media
 
 Media display components:
@@ -180,30 +172,6 @@ function MyInput() {
 }
 ```
 
-### Form with FormView, TextField, SubmitButton
-
-`FormView` wraps `Form` from `@mapples/form` and provides a styled container. Use `fieldName` on `TextField` to bind to form values; `SubmitButton` triggers submit and shows submitting state.
-
-```tsx
-import { FormView, TextField, SubmitButton } from '@mapples/ui';
-
-function MyForm() {
-  return (
-    <FormView
-      initialValues={{ name: '', email: '' }}
-      onSubmit={(values) => console.log(values)}
-      styled={{ style: { padding: 16 } }}
-    >
-      <TextField fieldName="name" placeholder="Name" />
-      <TextField fieldName="email" placeholder="Email" />
-      <SubmitButton label="Submit" />
-    </FormView>
-  );
-}
-```
-
-For Yup validation, use `Form` from `@mapples/form` as the outer wrapper and pass `validationSchema`; use `FormView` inside for layout and styling.
-
 ## Visual Editor Integration
 
 The UI package includes comprehensive schematics for visual editor integration:

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

@@ -2,34 +2,39 @@ import { PropsWithChildren } from 'react';
 import { WithStyledProps } from '@mapples/style';
 import { ViewProps } from 'react-native';
 /**
- * Props for the Form View component.
+ * Props for the FormView component.
  *
  * @public
  */
 export type FormViewProps = PropsWithChildren<WithStyledProps<ViewProps>> & {
+    /** Initial field values passed to the underlying form context. */
     initialValues?: any;
+    /** Callback invoked with the form's collected values when the form is submitted. */
     onSubmit?: (values: any) => void;
 };
 /**
- * A customizable view component with built-in styling support.
+ * A form container component that provides a shared form context to its children.
  *
- * The View component extends React Native's View with additional styling
- * capabilities through the @mapples/style system. It serves as a container
- * for other UI elements and supports all standard view properties.
+ * Wraps React Native's View with the `@mapples/form` Form provider, enabling
+ * nested fields (such as {@link TextField}) and submit controls (such as
+ * {@link SubmitButton}) to participate in a single form lifecycle. Additional
+ * styling is applied via the `@mapples/style` styled-props system.
  *
  * @example
  * ```tsx
  * <FormView
+ *   initialValues={{ email: '' }}
+ *   onSubmit={(values) => console.log(values)}
  *   styled={{
  *     style: {
- *       backgroundColor: 'lightblue',
  *       padding: 16,
- *       borderRadius: 8
+ *       gap: 12,
  *     }
  *   }}
  * >
- *   <Text>Content inside the view</Text>
- * </View>
+ *   <TextField fieldName="email" placeholder="Email" />
+ *   <SubmitButton label="Submit" />
+ * </FormView>
  * ```
  *
  * @public
@@ -39,7 +44,9 @@ declare const FormView: import("react").ForwardRefExoticComponent<{
 } & ViewProps & {
     children?: import("react").ReactNode | undefined;
 } & {
+    /** Initial field values passed to the underlying form context. */
     initialValues?: any;
+    /** Callback invoked with the form's collected values when the form is submitted. */
     onSubmit?: (values: any) => void;
 } & import("react").RefAttributes<unknown>>;
 export default FormView;

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

@@ -1 +1 @@
-{"version":3,"file":"FormView.d.ts","sourceRoot":"","sources":["../../../../src/components/form/FormView/FormView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGtD,OAAO,EAAc,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,GAAG;IAC1E,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,QAAA,MAAM,QAAQ;;;;;oBA5BI,GAAG;eACR,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI;2CA2CjC,CAAC;AAGF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"FormView.d.ts","sourceRoot":"","sources":["../../../../src/components/form/FormView/FormView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGtD,OAAO,EAAc,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,GAAG;IAC1E,kEAAkE;IAClE,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,QAAA,MAAM,QAAQ;;;;;IAjCZ,kEAAkE;oBAClD,GAAG;IACnB,oFAAoF;eACzE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI;2CA8CjC,CAAC;AAGF,eAAe,QAAQ,CAAC"}

package/dist/components/form/FormView/FormView.js

@@ -3,25 +3,28 @@ import { Form } from '@mapples/form';
 import { StyledView } from '@mapples/style';
 import { isObject } from 'lodash';
 /**
- * A customizable view component with built-in styling support.
+ * A form container component that provides a shared form context to its children.
  *
- * The View component extends React Native's View with additional styling
- * capabilities through the @mapples/style system. It serves as a container
- * for other UI elements and supports all standard view properties.
+ * Wraps React Native's View with the `@mapples/form` Form provider, enabling
+ * nested fields (such as {@link TextField}) and submit controls (such as
+ * {@link SubmitButton}) to participate in a single form lifecycle. Additional
+ * styling is applied via the `@mapples/style` styled-props system.
  *
  * @example
  * ```tsx
  * <FormView
+ *   initialValues={{ email: '' }}
+ *   onSubmit={(values) => console.log(values)}
  *   styled={{
  *     style: {
- *       backgroundColor: 'lightblue',
  *       padding: 16,
- *       borderRadius: 8
+ *       gap: 12,
  *     }
  *   }}
  * >
- *   <Text>Content inside the view</Text>
- * </View>
+ *   <TextField fieldName="email" placeholder="Email" />
+ *   <SubmitButton label="Submit" />
+ * </FormView>
  * ```
  *
  * @public

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

@@ -1 +1 @@
-{"version":3,"file":"FormView.js","sourceRoot":"","sources":["../../../../src/components/form/FormView/FormView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,UAAU,EAAmB,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAalC;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,QAAQ,GAAG,UAAU,CACzB,CACE,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAiB,EACtE,GAAG,EACH,EAAE;IACF,OAAO,CACL,CAAC,IAAI,CACH,aAAa,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,CAC5D,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAEnB;QAAA,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,MAAM,EAAE,CAAC,CAAC,IAAI,KAAK,CAAC,CACrD;UAAA,CAAC,QAAQ,CACX;QAAA,EAAE,UAAU,CACd;MAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AACF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;AAElC,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"FormView.js","sourceRoot":"","sources":["../../../../src/components/form/FormView/FormView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,UAAU,EAAmB,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAelC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,QAAQ,GAAG,UAAU,CACzB,CACE,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAiB,EACtE,GAAG,EACH,EAAE;IACF,OAAO,CACL,CAAC,IAAI,CACH,aAAa,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,CAC5D,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAEnB;QAAA,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,MAAM,EAAE,CAAC,CAAC,IAAI,KAAK,CAAC,CACrD;UAAA,CAAC,QAAQ,CACX;QAAA,EAAE,UAAU,CACd;MAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AACF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;AAElC,eAAe,QAAQ,CAAC"}

package/dist/components/form/FormView/schematics.d.ts

@@ -1,3 +1,11 @@
 import { RegisteredComponent } from '@mapples/types';
+/**
+ * Schematic registration entry for the {@link FormView} component.
+ *
+ * Registers FormView under the `"FormView"` type key so that visual editors
+ * and the schematic system can identify and render it.
+ *
+ * @public
+ */
 export declare const FormViewSchematic: RegisteredComponent;
 //# sourceMappingURL=schematics.d.ts.map

package/dist/components/form/FormView/schematics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schematics.d.ts","sourceRoot":"","sources":["../../../../src/components/form/FormView/schematics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAIrD,eAAO,MAAM,iBAAiB,EAAE,mBAG/B,CAAC"}
+{"version":3,"file":"schematics.d.ts","sourceRoot":"","sources":["../../../../src/components/form/FormView/schematics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAIrD;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,EAAE,mBAG/B,CAAC"}

package/dist/components/form/FormView/schematics.js

@@ -1,4 +1,12 @@
 import FormView from './FormView';
+/**
+ * Schematic registration entry for the {@link FormView} component.
+ *
+ * Registers FormView under the `"FormView"` type key so that visual editors
+ * and the schematic system can identify and render it.
+ *
+ * @public
+ */
 export const FormViewSchematic = {
     type: 'FormView',
     Component: FormView,

package/dist/components/form/FormView/schematics.js.map

@@ -1 +1 @@
-{"version":3,"file":"schematics.js","sourceRoot":"","sources":["../../../../src/components/form/FormView/schematics.ts"],"names":[],"mappings":"AAEA,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,MAAM,CAAC,MAAM,iBAAiB,GAAwB;IACpD,IAAI,EAAE,UAAU;IAChB,SAAS,EAAE,QAAQ;CACpB,CAAC"}
+{"version":3,"file":"schematics.js","sourceRoot":"","sources":["../../../../src/components/form/FormView/schematics.ts"],"names":[],"mappings":"AAEA,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAwB;IACpD,IAAI,EAAE,UAAU;IAChB,SAAS,EAAE,QAAQ;CACpB,CAAC"}

package/dist/components/form/SubmitButton/schematics.d.ts

@@ -1,8 +1,8 @@
 import { RegisteredComponent } from '@mapples/types';
 /**
- * Schematic configuration for the Button component.
+ * Schematic configuration for the SubmitButton component.
  *
- * This configuration defines how the Button component appears in visual editors,
+ * This configuration defines how the SubmitButton component appears in visual editors,
  * including its properties, styling options, and default values.
  *
  * @public

package/dist/components/form/SubmitButton/schematics.js

@@ -1,8 +1,8 @@
 import SubmitButton from './SubmitButton';
 /**
- * Schematic configuration for the Button component.
+ * Schematic configuration for the SubmitButton component.
  *
- * This configuration defines how the Button component appears in visual editors,
+ * This configuration defines how the SubmitButton component appears in visual editors,
  * including its properties, styling options, and default values.
  *
  * @public

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

@@ -1,29 +1,33 @@
 import { TextInputProps, TextInput } from 'react-native';
+/**
+ * Props for the TextField component.
+ *
+ * Extends React Native's `TextInputProps`, omitting `onChangeText` because the
+ * component manages value changes internally via the form context.
+ *
+ * @public
+ */
 export interface TextFieldProps extends Omit<TextInputProps, 'onChangeText'> {
+    /** The form field name used to read and write the value in the form context. */
     fieldName?: string;
 }
 /**
- * A customizable text input component with built-in styling support.
+ * A form-connected text input component.
  *
- * The TextField component extends React Native's TextInput with additional styling
- * capabilities through the @mapples/style system. It supports all standard
- * TextField properties and behaviors.
+ * Reads and writes its value through the nearest {@link FormView} form context
+ * using `fieldName`. `onChangeText` is managed internally; do not pass it as a
+ * prop. All other standard `TextInputProps` (e.g. `placeholder`, `secureTextEntry`)
+ * are forwarded to the underlying `StyledTextInput`.
  *
  * @example
  * ```tsx
- * <TextField
- *   placeholder="Enter your text"
- *   value={text}
- *   onChangeText={setText}
- *   styled={{
- *     style: {
- *       borderWidth: 1,
- *       borderColor: 'gray',
- *       padding: 12,
- *       borderRadius: 8
- *     }
- *   }}
- * />
+ * <FormView initialValues={{ username: '' }} onSubmit={console.log}>
+ *   <TextField
+ *     fieldName="username"
+ *     placeholder="Enter your username"
+ *   />
+ *   <SubmitButton label="Submit" />
+ * </FormView>
  * ```
  *
  * @public

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/components/form/TextField/TextField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,SAAS;;6CAiBd,CAAC;AAGF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/components/form/TextField/TextField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD;;;;;;;GAOG;AACH,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC;IAC1E,gFAAgF;IAChF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,SAAS;;6CAad,CAAC;AAGF,eAAe,SAAS,CAAC"}

package/dist/components/form/TextField/TextField.js

@@ -2,33 +2,28 @@ import { forwardRef } from 'react';
 import { useFormField } from '@mapples/form';
 import { StyledTextInput } from '@mapples/style';
 /**
- * A customizable text input component with built-in styling support.
+ * A form-connected text input component.
  *
- * The TextField component extends React Native's TextInput with additional styling
- * capabilities through the @mapples/style system. It supports all standard
- * TextField properties and behaviors.
+ * Reads and writes its value through the nearest {@link FormView} form context
+ * using `fieldName`. `onChangeText` is managed internally; do not pass it as a
+ * prop. All other standard `TextInputProps` (e.g. `placeholder`, `secureTextEntry`)
+ * are forwarded to the underlying `StyledTextInput`.
  *
  * @example
  * ```tsx
- * <TextField
- *   placeholder="Enter your text"
- *   value={text}
- *   onChangeText={setText}
- *   styled={{
- *     style: {
- *       borderWidth: 1,
- *       borderColor: 'gray',
- *       padding: 12,
- *       borderRadius: 8
- *     }
- *   }}
- * />
+ * <FormView initialValues={{ username: '' }} onSubmit={console.log}>
+ *   <TextField
+ *     fieldName="username"
+ *     placeholder="Enter your username"
+ *   />
+ *   <SubmitButton label="Submit" />
+ * </FormView>
  * ```
  *
  * @public
  */
 const TextField = forwardRef(({ children, fieldName, ...props }, ref) => {
-    const { value, setValue } = useFormField(fieldName || 'unknown', '', true);
+    const { value, setValue } = useFormField(fieldName || 'unknown');
     return (<StyledTextInput ref={ref} {...props} value={value || ''} onChangeText={setValue}/>);
 });
 TextField.displayName = 'TextField';

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../../src/components/form/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAOjD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,SAAS,GAAG,UAAU,CAC1B,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,YAAY,CACtC,SAAS,IAAI,SAAS,EACtB,EAAE,EACF,IAAI,CACL,CAAC;IAEF,OAAO,CACL,CAAC,eAAe,CACd,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC,CACnB,YAAY,CAAC,CAAC,QAAQ,CAAC,EACvB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AACF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEpC,eAAe,SAAS,CAAC"}
+{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../../src/components/form/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAgBjD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,SAAS,GAAG,UAAU,CAC1B,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,YAAY,CAAS,SAAS,IAAI,SAAS,CAAC,CAAC;IAEzE,OAAO,CACL,CAAC,eAAe,CACd,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC,CACnB,YAAY,CAAC,CAAC,QAAQ,CAAC,EACvB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AACF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEpC,eAAe,SAAS,CAAC"}

package/dist/components/form/TextField/schematics.d.ts

@@ -1,3 +1,11 @@
 import { RegisteredComponent } from '@mapples/types';
+/**
+ * Schematic registration entry for the {@link TextField} component.
+ *
+ * Registers TextField under the `"TextField"` type key so that visual editors
+ * and the schematic system can identify and render it.
+ *
+ * @public
+ */
 export declare const TextFieldSchematics: RegisteredComponent;
 //# sourceMappingURL=schematics.d.ts.map

package/dist/components/form/TextField/schematics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schematics.d.ts","sourceRoot":"","sources":["../../../../src/components/form/TextField/schematics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAIrD,eAAO,MAAM,mBAAmB,EAAE,mBAGjC,CAAC"}
+{"version":3,"file":"schematics.d.ts","sourceRoot":"","sources":["../../../../src/components/form/TextField/schematics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAIrD;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,EAAE,mBAGjC,CAAC"}

package/dist/components/form/TextField/schematics.js

@@ -1,4 +1,12 @@
 import TextField from './TextField';
+/**
+ * Schematic registration entry for the {@link TextField} component.
+ *
+ * Registers TextField under the `"TextField"` type key so that visual editors
+ * and the schematic system can identify and render it.
+ *
+ * @public
+ */
 export const TextFieldSchematics = {
     type: 'TextField',
     Component: TextField,

package/dist/components/form/TextField/schematics.js.map

@@ -1 +1 @@
-{"version":3,"file":"schematics.js","sourceRoot":"","sources":["../../../../src/components/form/TextField/schematics.ts"],"names":[],"mappings":"AAEA,OAAO,SAAS,MAAM,aAAa,CAAC;AAEpC,MAAM,CAAC,MAAM,mBAAmB,GAAwB;IACtD,IAAI,EAAE,WAAW;IACjB,SAAS,EAAE,SAAS;CACrB,CAAC"}
+{"version":3,"file":"schematics.js","sourceRoot":"","sources":["../../../../src/components/form/TextField/schematics.ts"],"names":[],"mappings":"AAEA,OAAO,SAAS,MAAM,aAAa,CAAC;AAEpC;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAwB;IACtD,IAAI,EAAE,WAAW;IACjB,SAAS,EAAE,SAAS;CACrB,CAAC"}

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

@@ -1,3 +1,12 @@
 import { RegisteredComponents } from '@mapples/types';
+/**
+ * Combined schematic registry for all form components.
+ *
+ * Aggregates {@link FormViewSchematic}, {@link TextFieldSchematics}, and
+ * {@link SubmitButtonSchematic} into a single `RegisteredComponents` map,
+ * keyed by each component's `type` string.
+ *
+ * @public
+ */
 export declare const FormSchematics: RegisteredComponents;
 //# sourceMappingURL=schematics.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"schematics.d.ts","sourceRoot":"","sources":["../../../src/components/form/schematics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAMtD,eAAO,MAAM,cAAc,EAAE,oBAI5B,CAAC"}
+{"version":3,"file":"schematics.d.ts","sourceRoot":"","sources":["../../../src/components/form/schematics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAMtD;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,EAAE,oBAI5B,CAAC"}

package/dist/components/form/schematics.js

@@ -1,6 +1,15 @@
 import { FormViewSchematic } from './FormView';
 import { SubmitButtonSchematic } from './SubmitButton';
 import { TextFieldSchematics } from './TextField';
+/**
+ * Combined schematic registry for all form components.
+ *
+ * Aggregates {@link FormViewSchematic}, {@link TextFieldSchematics}, and
+ * {@link SubmitButtonSchematic} into a single `RegisteredComponents` map,
+ * keyed by each component's `type` string.
+ *
+ * @public
+ */
 export const FormSchematics = {
     [FormViewSchematic.type]: FormViewSchematic,
     [TextFieldSchematics.type]: TextFieldSchematics,

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

@@ -1 +1 @@
-{"version":3,"file":"schematics.js","sourceRoot":"","sources":["../../../src/components/form/schematics.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAElD,MAAM,CAAC,MAAM,cAAc,GAAyB;IAClD,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,iBAAiB;IAC3C,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,mBAAmB;IAC/C,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,qBAAqB;CACpD,CAAC"}
+{"version":3,"file":"schematics.js","sourceRoot":"","sources":["../../../src/components/form/schematics.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAElD;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,cAAc,GAAyB;IAClD,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,iBAAiB;IAC3C,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,mBAAmB;IAC/C,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,qBAAqB;CACpD,CAAC"}

package/dist/components/inputs/IconButton/MockIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MockIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/IconButton/MockIcon.tsx"],"names":[],"mappings":"AAGA,OAAY,EAAE,QAAQ,EAAQ,MAAM,kBAAkB,CAAC;;;;AAUvD,wBAAgC"}
+{"version":3,"file":"MockIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/IconButton/MockIcon.tsx"],"names":[],"mappings":"AAGA,OAAY,EAAE,QAAQ,EAAQ,MAAM,kBAAkB,CAAC;;;;AAkBvD,wBAAgC"}

package/dist/components/inputs/IconButton/MockIcon.js

@@ -1,5 +1,13 @@
 import { styled } from '@mapples/style';
 import Svg, { Path } from 'react-native-svg';
+/**
+ * Placeholder SVG icon rendered by `IconButton` when no `uri` prop is provided.
+ *
+ * Displays a generic image/landscape icon at the size and color forwarded from
+ * `IconButton`'s `styleSvg` prop.
+ *
+ * @internal
+ */
 const MockIcon = (props) => {
     return (<Svg {...props} viewBox="0 0 256 256">
       <Path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16h64a8,8,0,0,0,7.59-5.47l14.83-44.48L163,151.43a8.07,8.07,0,0,0,4.46-4.46l14.62-36.55,44.48-14.83A8,8,0,0,0,232,88V56A16,16,0,0,0,216,40ZM112.41,157.47,98.23,200H40V172l52-52,30.42,30.42L117,152.57A8,8,0,0,0,112.41,157.47ZM216,82.23,173.47,96.41a8,8,0,0,0-4.9,4.62l-14.72,36.82L138.58,144l-35.27-35.27a16,16,0,0,0-22.62,0L40,149.37V56H216Zm12.68,33a8,8,0,0,0-7.21-1.1l-23.8,7.94a8,8,0,0,0-4.9,4.61l-14.31,35.77-35.77,14.31a8,8,0,0,0-4.61,4.9l-7.94,23.8A8,8,0,0,0,137.73,216H216a16,16,0,0,0,16-16V121.73A8,8,0,0,0,228.68,115.24ZM216,200H148.83l3.25-9.75,35.51-14.2a8.07,8.07,0,0,0,4.46-4.46l14.2-35.51,9.75-3.25Z"></Path>

package/dist/components/inputs/IconButton/MockIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"MockIcon.js","sourceRoot":"","sources":["../../../../src/components/inputs/IconButton/MockIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,GAAG,EAAE,EAAY,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD,MAAM,QAAQ,GAAiB,CAAC,KAAK,EAAE,EAAE;IACvC,OAAO,CACL,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,CAAC,OAAO,CAAC,aAAa,CACnC;MAAA,CAAC,IAAI,CAAC,CAAC,CAAC,spBAAspB,CAAC,EAAE,IAAI,CACvqB;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"MockIcon.js","sourceRoot":"","sources":["../../../../src/components/inputs/IconButton/MockIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,GAAG,EAAE,EAAY,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;;;;;;GAOG;AACH,MAAM,QAAQ,GAAiB,CAAC,KAAK,EAAE,EAAE;IACvC,OAAO,CACL,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,CAAC,OAAO,CAAC,aAAa,CACnC;MAAA,CAAC,IAAI,CAAC,CAAC,CAAC,spBAAspB,CAAC,EAAE,IAAI,CACvqB;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC,QAAQ,CAAC,CAAC"}

package/dist/components/inputs/IconButton/schematics.d.ts

@@ -1,3 +1,11 @@
 import { RegisteredComponent } from '@mapples/types';
+/**
+ * Schematic configuration for the IconButton component.
+ *
+ * This configuration defines how the IconButton component appears in visual editors,
+ * including its properties, styling options, and default values.
+ *
+ * @public
+ */
 export declare const IconButtonSchematics: RegisteredComponent;
 //# sourceMappingURL=schematics.d.ts.map

package/dist/components/inputs/IconButton/schematics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schematics.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/IconButton/schematics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAIrD,eAAO,MAAM,oBAAoB,EAAE,mBAGlC,CAAC"}
+{"version":3,"file":"schematics.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/IconButton/schematics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAIrD;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,EAAE,mBAGlC,CAAC"}

package/dist/components/inputs/IconButton/schematics.js

@@ -1,4 +1,12 @@
 import IconButton from './IconButton';
+/**
+ * Schematic configuration for the IconButton component.
+ *
+ * This configuration defines how the IconButton component appears in visual editors,
+ * including its properties, styling options, and default values.
+ *
+ * @public
+ */
 export const IconButtonSchematics = {
     type: 'IconButton',
     Component: IconButton,

package/dist/components/inputs/IconButton/schematics.js.map

@@ -1 +1 @@
-{"version":3,"file":"schematics.js","sourceRoot":"","sources":["../../../../src/components/inputs/IconButton/schematics.ts"],"names":[],"mappings":"AAEA,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,MAAM,CAAC,MAAM,oBAAoB,GAAwB;IACvD,IAAI,EAAE,YAAY;IAClB,SAAS,EAAE,UAAU;CACtB,CAAC"}
+{"version":3,"file":"schematics.js","sourceRoot":"","sources":["../../../../src/components/inputs/IconButton/schematics.ts"],"names":[],"mappings":"AAEA,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAwB;IACvD,IAAI,EAAE,YAAY;IAClB,SAAS,EAAE,UAAU;CACtB,CAAC"}

package/dist/components/inputs/Pressable/Pressable.d.ts

@@ -1,6 +1,32 @@
 import { WithStyledProps } from '@mapples/style';
 import { PressableProps as RNPressableProps, View } from 'react-native';
+/**
+ * Props for the Pressable component.
+ *
+ * Extends React Native's `PressableProps` with the `@mapples/style` styling
+ * system via `WithStyledProps`.
+ *
+ * @public
+ */
 export type PressableProps = WithStyledProps<RNPressableProps>;
+/**
+ * A styled pressable container component.
+ *
+ * Wraps React Native's `Pressable` with the `@mapples/style` `StyledPressable`
+ * primitive, exposing the full `WithStyledProps` styling API.
+ *
+ * @example
+ * ```tsx
+ * <Pressable
+ *   onPress={() => console.log('pressed')}
+ *   styled={{ style: { padding: 12, backgroundColor: 'blue' } }}
+ * >
+ *   <Text>Press me</Text>
+ * </Pressable>
+ * ```
+ *
+ * @public
+ */
 declare const Pressable: import("react").ForwardRefExoticComponent<{
     styled?: import("@mapples/style").StyledProps<Partial<RNPressableProps>> | undefined;
 } & RNPressableProps & {

package/dist/components/inputs/Pressable/Pressable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pressable.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/Pressable/Pressable.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,cAAc,IAAI,gBAAgB,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAExE,MAAM,MAAM,cAAc,GAAG,eAAe,CAAC,gBAAgB,CAAC,CAAC;AAE/D,QAAA,MAAM,SAAS;;;;wCAQd,CAAC;AAGF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Pressable.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/Pressable/Pressable.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,cAAc,IAAI,gBAAgB,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAExE;;;;;;;GAOG;AACH,MAAM,MAAM,cAAc,GAAG,eAAe,CAAC,gBAAgB,CAAC,CAAC;AAE/D;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,SAAS;;;;wCAQd,CAAC;AAGF,eAAe,SAAS,CAAC"}

package/dist/components/inputs/Pressable/Pressable.js

@@ -1,5 +1,23 @@
 import { forwardRef } from 'react';
 import { StyledPressable } from '@mapples/style';
+/**
+ * A styled pressable container component.
+ *
+ * Wraps React Native's `Pressable` with the `@mapples/style` `StyledPressable`
+ * primitive, exposing the full `WithStyledProps` styling API.
+ *
+ * @example
+ * ```tsx
+ * <Pressable
+ *   onPress={() => console.log('pressed')}
+ *   styled={{ style: { padding: 12, backgroundColor: 'blue' } }}
+ * >
+ *   <Text>Press me</Text>
+ * </Pressable>
+ * ```
+ *
+ * @public
+ */
 const Pressable = forwardRef(({ children, ...props }, ref) => {
     return (<StyledPressable onPress={console.log} ref={ref} {...props}>
         {children}

package/dist/components/inputs/Pressable/Pressable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pressable.js","sourceRoot":"","sources":["../../../../src/components/inputs/Pressable/Pressable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,eAAe,EAAmB,MAAM,gBAAgB,CAAC;AAKlE,MAAM,SAAS,GAAG,UAAU,CAC1B,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC9B,OAAO,CACL,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,CAAC,CACzD;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,eAAe,CAAC,CACnB,CAAC;AACJ,CAAC,CACF,CAAC;AACF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEpC,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Pressable.js","sourceRoot":"","sources":["../../../../src/components/inputs/Pressable/Pressable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,eAAe,EAAmB,MAAM,gBAAgB,CAAC;AAalE;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,SAAS,GAAG,UAAU,CAC1B,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC9B,OAAO,CACL,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,CAAC,CACzD;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,eAAe,CAAC,CACnB,CAAC;AACJ,CAAC,CACF,CAAC;AACF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEpC,eAAe,SAAS,CAAC"}

package/dist/components/inputs/Pressable/schematics.d.ts

@@ -1,3 +1,11 @@
 import { RegisteredComponent } from '@mapples/types';
+/**
+ * Schematic configuration for the Pressable component.
+ *
+ * This configuration defines how the Pressable component appears in visual editors,
+ * including its properties, styling options, and default values.
+ *
+ * @public
+ */
 export declare const PressableSchematics: RegisteredComponent;
 //# sourceMappingURL=schematics.d.ts.map

package/dist/components/inputs/Pressable/schematics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schematics.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/Pressable/schematics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAIrD,eAAO,MAAM,mBAAmB,EAAE,mBAGjC,CAAC"}
+{"version":3,"file":"schematics.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/Pressable/schematics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAIrD;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,EAAE,mBAGjC,CAAC"}

package/dist/components/inputs/Pressable/schematics.js

@@ -1,4 +1,12 @@
 import Pressable from './Pressable';
+/**
+ * Schematic configuration for the Pressable component.
+ *
+ * This configuration defines how the Pressable component appears in visual editors,
+ * including its properties, styling options, and default values.
+ *
+ * @public
+ */
 export const PressableSchematics = {
     type: 'Pressable',
     Component: Pressable,

package/dist/components/inputs/Pressable/schematics.js.map

@@ -1 +1 @@
-{"version":3,"file":"schematics.js","sourceRoot":"","sources":["../../../../src/components/inputs/Pressable/schematics.ts"],"names":[],"mappings":"AAEA,OAAO,SAAS,MAAM,aAAa,CAAC;AAEpC,MAAM,CAAC,MAAM,mBAAmB,GAAwB;IACtD,IAAI,EAAE,WAAW;IACjB,SAAS,EAAE,SAAS;CACrB,CAAC"}
+{"version":3,"file":"schematics.js","sourceRoot":"","sources":["../../../../src/components/inputs/Pressable/schematics.ts"],"names":[],"mappings":"AAEA,OAAO,SAAS,MAAM,aAAa,CAAC;AAEpC;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAwB;IACtD,IAAI,EAAE,WAAW;IACjB,SAAS,EAAE,SAAS;CACrB,CAAC"}

package/dist/components/inputs/Select/Select.d.ts

@@ -1,13 +1,43 @@
 import { PropsWithChildren } from 'react';
 import { WithStyledProps } from '@mapples/style';
 import { ViewProps as RNViewProps } from 'react-native';
+/**
+ * Props for the Select component.
+ *
+ * @typeParam T - The type of each item in the `data` array. Defaults to `string[]`.
+ *
+ * @public
+ */
 export interface SelectProps<T = string[]> extends PropsWithChildren<WithStyledProps<RNViewProps>> {
+    /** Array of data items to render as selectable options. */
     data?: T[];
+    /** Callback invoked when an item is selected. */
     onSelect?: () => void;
+    /** Styling configuration for the container and individual items. */
     styled?: WithStyledProps<RNViewProps> & {
+        /** Style applied to each `SelectItem` row. */
         itemStyle?: WithStyledProps<RNViewProps>['style'];
     };
 }
+/**
+ * A list component that renders each item in `data` as a pressable `SelectItem`.
+ *
+ * Each item is wrapped with a `StateProvider` so that child components can
+ * consume the item's value through the `@mapples/state` context.
+ *
+ * @example
+ * ```tsx
+ * <Select
+ *   data={['Apple', 'Banana', 'Cherry']}
+ *   onSelect={(item) => console.log('Selected:', item)}
+ *   styled={{ style: { gap: 8 }, itemStyle: { padding: 12 } }}
+ * >
+ *   <Text>{/* rendered inside each SelectItem via children *\/}</Text>
+ * </Select>
+ * ```
+ *
+ * @public
+ */
 declare const Select: import("react").ForwardRefExoticComponent<SelectProps<string[]> & import("react").RefAttributes<unknown>>;
 export default Select;
 //# sourceMappingURL=Select.d.ts.map