@nlabs/gothamui 1.8.0

package/lib/docs/gettingStarted.md

@@ -0,0 +1,338 @@
+# Getting Started with GothamUI
+
+This guide will help you quickly set up a new project with GothamUI and understand its core concepts.
+
+## Installation
+
+Start by installing GothamUI and its peer dependencies:
+
+```bash
+# Using npm
+npm install @nlabs/gothamui @nlabs/arkhamjs @nlabs/arkhamjs-middleware-logger @nlabs/arkhamjs-storage-browser @nlabs/arkhamjs-utils-react zod react-i18next i18next
+
+# Using yarn
+yarn add @nlabs/gothamui @nlabs/arkhamjs @nlabs/arkhamjs-middleware-logger @nlabs/arkhamjs-storage-browser @nlabs/arkhamjs-utils-react zod react-i18next i18next
+```
+
+## Creating Your First App
+
+### 1. Set up your entry point
+
+Create an `index.tsx` (or `index.jsx`) file:
+
+```jsx
+import { createRoot } from 'react-dom/client';
+import { Gotham } from '@nlabs/gothamui';
+import { HomeView } from './views/HomeView';
+
+// Define your application configuration
+const config = {
+  app: {
+    name: 'my-app',
+    title: 'My First GothamUI App'
+  },
+  routes: [
+    {
+      path: '/',
+      element: <HomeView />,
+      index: true
+    }
+  ]
+};
+
+// Render your application
+const root = createRoot(document.getElementById('root'));
+root.render(<Gotham config={config} />);
+```
+
+### 2. Create a simple view
+
+Create `views/HomeView.tsx`:
+
+```jsx
+import { Button } from '@nlabs/gothamui';
+import { GothamActions } from '@nlabs/gothamui';
+
+export const HomeView = () => {
+  const handleClick = () => {
+    GothamActions.notify({
+      message: 'Welcome to GothamUI!',
+      severity: 'success'
+    });
+  };
+
+  return (
+    <div className="p-8">
+      <h1 className="text-3xl font-bold mb-4">Welcome to GothamUI</h1>
+      <p className="mb-4">This is your first GothamUI application.</p>
+      <Button
+        variant="contained"
+        color="primary"
+        onClick={handleClick}
+      >
+        Show Notification
+      </Button>
+    </div>
+  );
+};
+```
+
+## Core Concepts
+
+### Configuration
+
+The `config` object passed to the `<Gotham>` component is the heart of your application setup:
+
+```jsx
+const config = {
+  // Application metadata
+  app: {
+    name: 'my-app',
+    title: 'My Application',
+    titleBarSeparator: '|'
+  },
+
+  // Routes configuration
+  routes: [
+    {
+      path: '/',
+      element: <HomeView />,
+      index: true
+    },
+    {
+      path: '/dashboard',
+      element: <DashboardView />,
+      authenticate: true // Protected route
+    }
+  ],
+
+  // Authentication check function
+  isAuth: () => Boolean(localStorage.getItem('token')),
+
+  // Storage type for persisted state
+  storageType: 'local', // 'local' or 'session'
+
+  // Internationalization
+  translations: {
+    en: {
+      welcome: 'Welcome to GothamUI'
+    },
+    es: {
+      welcome: 'Bienvenido a GothamUI'
+    }
+  }
+};
+```
+
+### Routing
+
+GothamUI uses React Router under the hood. Define your routes in the config object:
+
+```jsx
+const config = {
+  routes: [
+    {
+      path: '/',
+      element: <HomeView />,
+      index: true
+    },
+    {
+      path: '/dashboard',
+      element: <DashboardView />,
+      children: [
+        {
+          path: 'profile',
+          element: <ProfileView />
+        },
+        {
+          path: 'settings',
+          element: <SettingsView />
+        }
+      ]
+    }
+  ]
+};
+```
+
+Navigate programmatically using `GothamActions`:
+
+```jsx
+import { GothamActions } from '@nlabs/gothamui';
+
+// Navigate to a new route
+GothamActions.navGoto('/dashboard');
+
+// Navigate with parameters
+GothamActions.navGoto('/user', { id: 123 });
+
+// Replace current route
+GothamActions.navReplace('/login');
+
+// Navigate back
+GothamActions.navBack();
+```
+
+### Forms
+
+GothamUI provides a powerful form system built on React Hook Form and Zod:
+
+```jsx
+import { Form, TextField, Button } from '@nlabs/gothamui';
+import { z } from 'zod';
+
+// Define validation schema
+const loginSchema = z.object({
+  email: z.string().email('Please enter a valid email'),
+  password: z.string().min(8, 'Password must be at least 8 characters')
+});
+
+// Create form component
+const LoginForm = () => {
+  const handleSubmit = (data) => {
+    console.log('Form submitted:', data);
+    // Handle form submission
+  };
+
+  return (
+    <Form
+      schema={loginSchema}
+      onSubmit={handleSubmit}
+      defaultValues={{ email: '', password: '' }}
+    >
+      <TextField
+        name="email"
+        label="Email"
+        placeholder="Enter your email"
+      />
+      <TextField
+        name="password"
+        type="password"
+        label="Password"
+        placeholder="Enter your password"
+      />
+      <Button
+        type="submit"
+        variant="contained"
+        color="primary"
+        label="Sign In"
+      />
+    </Form>
+  );
+};
+```
+
+### State Management
+
+GothamUI uses ArkhamJS for state management, a Flux implementation:
+
+```jsx
+import { useFlux } from '@nlabs/arkhamjs-utils-react';
+
+const MyComponent = () => {
+  const flux = useFlux();
+
+  // Get state from store
+  const title = flux.getState(['app', 'title']);
+
+  // Dispatch an action
+  const handleClick = () => {
+    flux.dispatch({
+      type: 'MY_ACTION',
+      data: { value: 'Hello World' }
+    });
+  };
+
+  return (
+    <div>
+      <h1>{title}</h1>
+      <button onClick={handleClick}>Update State</button>
+    </div>
+  );
+};
+```
+
+### Notifications
+
+Show notifications using `GothamActions`:
+
+```jsx
+import { GothamActions } from '@nlabs/gothamui';
+
+// Show a success notification
+GothamActions.notify({
+  message: 'Operation completed successfully!',
+  severity: 'success'
+});
+
+// Show an error notification
+GothamActions.notify({
+  message: 'An error occurred.',
+  severity: 'error'
+});
+
+// Show a notification with actions
+GothamActions.notify({
+  message: 'Do you want to continue?',
+  severity: 'info',
+  actions: [
+    {
+      label: 'Yes',
+      onClick: () => console.log('Yes clicked')
+    },
+    {
+      label: 'No',
+      onClick: () => console.log('No clicked')
+    }
+  ]
+});
+
+// Close the current notification
+GothamActions.notifyClose();
+```
+
+### Internationalization
+
+GothamUI includes i18next for internationalization. You can import i18n utilities directly from GothamUI:
+
+```jsx
+import { useTranslation } from '@nlabs/gothamui';
+
+const MyComponent = () => {
+  const { t, i18n } = useTranslation();
+
+  // Change language
+  const changeLanguage = (lang) => {
+    i18n.changeLanguage(lang);
+  };
+
+  return (
+    <div>
+      <h1>{t('welcome')}</h1>
+      <button onClick={() => changeLanguage('en')}>English</button>
+      <button onClick={() => changeLanguage('es')}>Español</button>
+    </div>
+  );
+};
+```
+
+You can also import other i18n utilities:
+
+```jsx
+import { useTranslation, Trans, i18n } from '@nlabs/gothamui';
+
+// useTranslation - Hook for translation
+// Trans - Component for complex translations
+// i18n - Direct access to i18next instance
+```
+
+## Next Steps
+
+Now that you have a basic understanding of GothamUI, explore the following:
+
+1. **Component Library** - Discover all the available UI components
+2. **Advanced Routing** - Learn about nested routes and route guards
+3. **Custom Stores** - Create your own Flux stores for application state
+4. **Middleware** - Add custom middleware for logging, analytics, etc.
+5. **Theming** - Customize the look and feel of your application
+
+For more detailed information, check out the [API Reference](./api-reference.md) and [official documentation](http://gothamui.io).

package/lib/docs/payments.md

@@ -0,0 +1,79 @@
+# Payment methods
+
+`PaymentMethodPanel` presents the payment method attached to an account and starts application-owned add, replace, or remove workflows. It does not render card-number inputs, collect payment credentials, call a payment API, or store sensitive payment data.
+
+Use a hosted payment-provider flow in `onAdd`, then pass only display-safe values such as the card brand and last four digits back to the panel.
+
+## Empty state
+
+```tsx
+import {PaymentMethodPanel} from '@nlabs/gothamui';
+
+export const BillingSettings = () => (
+  <PaymentMethodPanel
+    onAdd={() => {
+      // Open the payment provider's hosted collection flow.
+    }}
+  />
+);
+```
+
+## Saved payment method
+
+```tsx
+import {PaymentMethodPanel} from '@nlabs/gothamui';
+
+export const BillingSettings = () => (
+  <PaymentMethodPanel
+    brand="Visa"
+    last4="4242"
+    onAdd={() => {
+      // Open the provider flow in replacement mode.
+    }}
+    onRemove={() => {
+      // Confirm removal, then call the application's payment action.
+    }}
+  />
+);
+```
+
+Supplying either `brand` or `last4` switches the panel from its empty state to its saved-method state. Pass both when they are available so the masked label is meaningful.
+
+## Loading states
+
+Set `isAdding` while the provider flow is opening or being confirmed. Set `isRemoving` while removal is in progress. The panel disables competing actions and gives the active button its loading treatment.
+
+```tsx
+<PaymentMethodPanel
+  brand="Mastercard"
+  isRemoving={isRemoving}
+  last4="4444"
+  onAdd={replacePaymentMethod}
+  onRemove={removePaymentMethod}
+/>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `actionIcon` | `ReactNode` | Credit-card icon | Icon used by the add or replace action |
+| `addLabel` | `string` | `'Add payment method'` | Empty-state action label |
+| `brand` | `string` | `''` | Display-safe payment brand |
+| `description` | `ReactNode` | Provider-storage explanation | Supporting panel copy; pass `null` to hide it |
+| `emptyDescription` | `ReactNode` | Add-method explanation | Supporting empty-state copy |
+| `emptyTitle` | `ReactNode` | `'No payment method saved'` | Empty-state heading |
+| `isAdding` | `boolean` | `false` | Shows add or replace progress and disables actions |
+| `isRemoving` | `boolean` | `false` | Shows removal progress and disables actions |
+| `last4` | `string` | `''` | Last four display digits; never pass a complete account number |
+| `onAdd` | `() => void` | Required | Starts the provider-owned add or replace flow |
+| `onRemove` | `() => void` | `undefined` | Starts removal; omit it to hide the remove action |
+| `removeLabel` | `string` | `'Remove'` | Remove-action label |
+| `replaceLabel` | `string` | `'Replace payment method'` | Saved-method primary action label |
+| `title` | `ReactNode` | `'Payment method'` | Panel heading |
+
+Standard section attributes such as `className`, `id`, and `data-*` attributes are also supported.
+
+## Security boundary
+
+Treat `PaymentMethodPanel` as presentation only. Use the payment provider's hosted fields or checkout experience for credential collection, keep provider secrets on the server, and store only provider tokens and display-safe metadata in application state.

package/lib/editor/CodeEditor.d.ts

@@ -0,0 +1,11 @@
+import type { EditorProps } from '@monaco-editor/react';
+export type CodeEditorProps = EditorProps;
+/**
+ * Shared code editor backed by Monaco.
+ *
+ * Import from `@nlabs/gothamui/editor` so Monaco remains outside the normal
+ * GothamUI component entry point for applications that do not use an editor.
+ */
+declare const CodeEditorComponent: (props: CodeEditorProps) => import("react").JSX.Element;
+export type { BeforeMount, EditorProps, Monaco, OnChange, OnMount, OnValidate } from '@monaco-editor/react';
+export declare const CodeEditor: import("react").MemoExoticComponent<typeof CodeEditorComponent>;

package/lib/editor/CodeEditor.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Editor as MonacoEditor } from '@monaco-editor/react';
+import { memo } from 'react';
+/**
+ * Shared code editor backed by Monaco.
+ *
+ * Import from `@nlabs/gothamui/editor` so Monaco remains outside the normal
+ * GothamUI component entry point for applications that do not use an editor.
+ */ const CodeEditorComponent = (props)=>/*#__PURE__*/ _jsx(MonacoEditor, {
+        ...props
+    });
+export const CodeEditor = /*#__PURE__*/ memo(CodeEditorComponent);
+CodeEditor.displayName = 'CodeEditor';
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2dvdGhhbWpzL3NyYy9lZGl0b3IvQ29kZUVkaXRvci50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtFZGl0b3IgYXMgTW9uYWNvRWRpdG9yfSBmcm9tICdAbW9uYWNvLWVkaXRvci9yZWFjdCc7XG5pbXBvcnQge21lbW99IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHR5cGUge0VkaXRvclByb3BzfSBmcm9tICdAbW9uYWNvLWVkaXRvci9yZWFjdCc7XG5cbmV4cG9ydCB0eXBlIENvZGVFZGl0b3JQcm9wcyA9IEVkaXRvclByb3BzO1xuXG4vKipcbiAqIFNoYXJlZCBjb2RlIGVkaXRvciBiYWNrZWQgYnkgTW9uYWNvLlxuICpcbiAqIEltcG9ydCBmcm9tIGBAbmxhYnMvZ290aGFtdWkvZWRpdG9yYCBzbyBNb25hY28gcmVtYWlucyBvdXRzaWRlIHRoZSBub3JtYWxcbiAqIEdvdGhhbVVJIGNvbXBvbmVudCBlbnRyeSBwb2ludCBmb3IgYXBwbGljYXRpb25zIHRoYXQgZG8gbm90IHVzZSBhbiBlZGl0b3IuXG4gKi9cbmNvbnN0IENvZGVFZGl0b3JDb21wb25lbnQgPSAocHJvcHM6IENvZGVFZGl0b3JQcm9wcykgPT4gKFxuICA8TW9uYWNvRWRpdG9yIHsuLi5wcm9wc30gLz5cbik7XG5cbmV4cG9ydCB0eXBlIHtcbiAgQmVmb3JlTW91bnQsXG4gIEVkaXRvclByb3BzLFxuICBNb25hY28sXG4gIE9uQ2hhbmdlLFxuICBPbk1vdW50LFxuICBPblZhbGlkYXRlXG59IGZyb20gJ0Btb25hY28tZWRpdG9yL3JlYWN0JztcblxuZXhwb3J0IGNvbnN0IENvZGVFZGl0b3IgPSBtZW1vKENvZGVFZGl0b3JDb21wb25lbnQpO1xuQ29kZUVkaXRvci5kaXNwbGF5TmFtZSA9ICdDb2RlRWRpdG9yJztcbiJdLCJuYW1lcyI6WyJFZGl0b3IiLCJNb25hY29FZGl0b3IiLCJtZW1vIiwiQ29kZUVkaXRvckNvbXBvbmVudCIsInByb3BzIiwiQ29kZUVkaXRvciIsImRpc3BsYXlOYW1lIl0sIm1hcHBpbmdzIjoiO0FBQUEsU0FBUUEsVUFBVUMsWUFBWSxRQUFPLHVCQUF1QjtBQUM1RCxTQUFRQyxJQUFJLFFBQU8sUUFBUTtBQU0zQjs7Ozs7Q0FLQyxHQUNELE1BQU1DLHNCQUFzQixDQUFDQyxzQkFDM0IsS0FBQ0g7UUFBYyxHQUFHRyxLQUFLOztBQVl6QixPQUFPLE1BQU1DLDJCQUFhSCxLQUFLQyxxQkFBcUI7QUFDcERFLFdBQVdDLFdBQVcsR0FBRyJ9

package/lib/editor/CodeEditor.stories.js

@@ -0,0 +1,24 @@
+import { CodeEditor } from './CodeEditor.js';
+const meta = {
+    component: CodeEditor,
+    parameters: {
+        layout: 'padded'
+    },
+    title: 'Components/Editor/CodeEditor'
+};
+export default meta;
+export const Json = {
+    args: {
+        height: '400px',
+        language: 'json',
+        options: {
+            minimap: {
+                enabled: false
+            },
+            wordWrap: 'on'
+        },
+        value: '{\n  "framework": "GothamUI",\n  "editor": "Monaco"\n}'
+    }
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2dvdGhhbWpzL3NyYy9lZGl0b3IvQ29kZUVkaXRvci5zdG9yaWVzLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvZGVFZGl0b3J9IGZyb20gJy4vQ29kZUVkaXRvci5qcyc7XG5cbmltcG9ydCB0eXBlIHtNZXRhLCBTdG9yeU9ian0gZnJvbSAnQG5sYWJzL2xleC9zdG9yeWJvb2snO1xuXG5jb25zdCBtZXRhOiBNZXRhPHR5cGVvZiBDb2RlRWRpdG9yPiA9IHtcbiAgY29tcG9uZW50OiBDb2RlRWRpdG9yLFxuICBwYXJhbWV0ZXJzOiB7XG4gICAgbGF5b3V0OiAncGFkZGVkJ1xuICB9LFxuICB0aXRsZTogJ0NvbXBvbmVudHMvRWRpdG9yL0NvZGVFZGl0b3InXG59O1xuXG5leHBvcnQgZGVmYXVsdCBtZXRhO1xuXG50eXBlIFN0b3J5ID0gU3RvcnlPYmo8dHlwZW9mIENvZGVFZGl0b3I+O1xuXG5leHBvcnQgY29uc3QgSnNvbjogU3RvcnkgPSB7XG4gIGFyZ3M6IHtcbiAgICBoZWlnaHQ6ICc0MDBweCcsXG4gICAgbGFuZ3VhZ2U6ICdqc29uJyxcbiAgICBvcHRpb25zOiB7XG4gICAgICBtaW5pbWFwOiB7ZW5hYmxlZDogZmFsc2V9LFxuICAgICAgd29yZFdyYXA6ICdvbidcbiAgICB9LFxuICAgIHZhbHVlOiAne1xcbiAgXCJmcmFtZXdvcmtcIjogXCJHb3RoYW1VSVwiLFxcbiAgXCJlZGl0b3JcIjogXCJNb25hY29cIlxcbn0nXG4gIH1cbn07XG4iXSwibmFtZXMiOlsiQ29kZUVkaXRvciIsIm1ldGEiLCJjb21wb25lbnQiLCJwYXJhbWV0ZXJzIiwibGF5b3V0IiwidGl0bGUiLCJKc29uIiwiYXJncyIsImhlaWdodCIsImxhbmd1YWdlIiwib3B0aW9ucyIsIm1pbmltYXAiLCJlbmFibGVkIiwid29yZFdyYXAiLCJ2YWx1ZSJdLCJtYXBwaW5ncyI6IkFBQUEsU0FBUUEsVUFBVSxRQUFPLGtCQUFrQjtBQUkzQyxNQUFNQyxPQUFnQztJQUNwQ0MsV0FBV0Y7SUFDWEcsWUFBWTtRQUNWQyxRQUFRO0lBQ1Y7SUFDQUMsT0FBTztBQUNUO0FBRUEsZUFBZUosS0FBSztBQUlwQixPQUFPLE1BQU1LLE9BQWM7SUFDekJDLE1BQU07UUFDSkMsUUFBUTtRQUNSQyxVQUFVO1FBQ1ZDLFNBQVM7WUFDUEMsU0FBUztnQkFBQ0MsU0FBUztZQUFLO1lBQ3hCQyxVQUFVO1FBQ1o7UUFDQUMsT0FBTztJQUNUO0FBQ0YsRUFBRSJ9

package/lib/editor/index.d.ts

@@ -0,0 +1 @@
+export * from './CodeEditor.js';

package/lib/editor/index.js

@@ -0,0 +1,3 @@
+export * from './CodeEditor.js';
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2dvdGhhbWpzL3NyYy9lZGl0b3IvaW5kZXgudHMiXSwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9Db2RlRWRpdG9yLmpzJztcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLGtCQUFrQiJ9

package/lib/errors/UserError.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2018-Present, Nitrogen Labs, Inc.
+ * Copyrights licensed under the MIT License. See the accompanying LICENSE file for terms.
+ */
+export declare class UserError extends Error {
+    errors: string[];
+    constructor(msg: string, errors?: string[]);
+}

package/lib/errors/UserError.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2018-Present, Nitrogen Labs, Inc.
+ * Copyrights licensed under the MIT License. See the accompanying LICENSE file for terms.
+ */ export class UserError extends Error {
+    errors;
+    constructor(msg, errors = []){
+        super(msg);
+        this.errors = errors || [];
+    }
+}
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2dvdGhhbWpzL3NyYy9lcnJvcnMvVXNlckVycm9yLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAxOC1QcmVzZW50LCBOaXRyb2dlbiBMYWJzLCBJbmMuXG4gKiBDb3B5cmlnaHRzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgTGljZW5zZS4gU2VlIHRoZSBhY2NvbXBhbnlpbmcgTElDRU5TRSBmaWxlIGZvciB0ZXJtcy5cbiAqL1xuZXhwb3J0IGNsYXNzIFVzZXJFcnJvciBleHRlbmRzIEVycm9yIHtcbiAgZXJyb3JzOiBzdHJpbmdbXTtcblxuICBjb25zdHJ1Y3Rvcihtc2c6IHN0cmluZywgZXJyb3JzOiBzdHJpbmdbXSA9IFtdKSB7XG4gICAgc3VwZXIobXNnKTtcbiAgICB0aGlzLmVycm9ycyA9IGVycm9ycyB8fCBbXTtcbiAgfVxufVxuIl0sIm5hbWVzIjpbIlVzZXJFcnJvciIsIkVycm9yIiwiZXJyb3JzIiwibXNnIl0sIm1hcHBpbmdzIjoiQUFBQTs7O0NBR0MsR0FDRCxPQUFPLE1BQU1BLGtCQUFrQkM7SUFDN0JDLE9BQWlCO0lBRWpCLFlBQVlDLEdBQVcsRUFBRUQsU0FBbUIsRUFBRSxDQUFFO1FBQzlDLEtBQUssQ0FBQ0M7UUFDTixJQUFJLENBQUNELE1BQU0sR0FBR0EsVUFBVSxFQUFFO0lBQzVCO0FBQ0YifQ==

package/lib/examples/OptimizedFormExample.d.ts

@@ -0,0 +1 @@
+export declare const OptimizedFormExample: () => import("react").JSX.Element;

package/lib/examples/OptimizedFormExample.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Copyright (c) 2025-Present, Nitrogen Labs, Inc.
+ * Copyrights licensed under the MIT License. See the accompanying LICENSE file for terms.
+ */ import { z } from 'zod';
+import { Button, Form, TextField } from '../components/index.js';
+// Define a comprehensive form schema
+const userProfileSchema = z.object({
+    firstName: z.string().min(2, 'First name must be at least 2 characters'),
+    lastName: z.string().min(2, 'Last name must be at least 2 characters'),
+    email: z.string().email('Please enter a valid email address'),
+    age: z.number().min(18, 'Must be at least 18 years old').max(120, 'Please enter a valid age'),
+    bio: z.string().max(500, 'Bio must be less than 500 characters').optional(),
+    agreeToTerms: z.boolean().refine((val)=>val === true, 'You must agree to the terms')
+});
+export const OptimizedFormExample = ()=>{
+    const handleSubmit = async (data)=>{
+        console.log('Form submitted successfully:', data);
+    // Handle success (show notification, redirect, etc.)
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "max-w-md mx-auto p-6 bg-white rounded-lg shadow-lg",
+        children: [
+            /*#__PURE__*/ _jsx("h2", {
+                className: "text-2xl font-bold mb-6 text-center",
+                children: "User Profile"
+            }),
+            /*#__PURE__*/ _jsx(Form, {
+                schema: userProfileSchema,
+                onSubmit: handleSubmit,
+                showErrors: true,
+                mode: "onBlur",
+                defaultValues: {
+                    firstName: '',
+                    lastName: '',
+                    email: '',
+                    age: 18,
+                    bio: '',
+                    agreeToTerms: false
+                },
+                children: ({ formState: { isSubmitting } })=>/*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "grid grid-cols-2 gap-4 mb-4",
+                                children: [
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        name: "firstName",
+                                        label: "First Name",
+                                        placeholder: "Enter your first name",
+                                        required: true
+                                    }),
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        name: "lastName",
+                                        label: "Last Name",
+                                        placeholder: "Enter your last name",
+                                        required: true
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(TextField, {
+                                name: "email",
+                                label: "Email",
+                                type: "email",
+                                placeholder: "Enter your email",
+                                className: "mb-4",
+                                required: true
+                            }),
+                            /*#__PURE__*/ _jsx(TextField, {
+                                name: "age",
+                                label: "Age",
+                                type: "number",
+                                placeholder: "Enter your age",
+                                className: "mb-4",
+                                min: 18,
+                                max: 120,
+                                required: true
+                            }),
+                            /*#__PURE__*/ _jsx(TextField, {
+                                name: "bio",
+                                label: "Bio",
+                                placeholder: "Tell us about yourself (optional)",
+                                multiline: true,
+                                rows: 4,
+                                className: "mb-4"
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex items-center mb-6",
+                                children: [
+                                    /*#__PURE__*/ _jsx("input", {
+                                        type: "checkbox",
+                                        id: "agreeToTerms",
+                                        name: "agreeToTerms",
+                                        className: "mr-2"
+                                    }),
+                                    /*#__PURE__*/ _jsx("label", {
+                                        htmlFor: "agreeToTerms",
+                                        className: "text-sm",
+                                        children: "I agree to the terms and conditions"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex gap-4",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        type: "submit",
+                                        variant: "contained",
+                                        color: "primary",
+                                        label: "Save Profile",
+                                        className: "flex-1",
+                                        disabled: isSubmitting,
+                                        isLoading: isSubmitting
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        type: "button",
+                                        variant: "outlined",
+                                        color: "neutral",
+                                        label: "Cancel",
+                                        onClick: ()=>console.log('Cancelled')
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2dvdGhhbWpzL3NyYy9leGFtcGxlcy9PcHRpbWl6ZWRGb3JtRXhhbXBsZS50c3giXSwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjUtUHJlc2VudCwgTml0cm9nZW4gTGFicywgSW5jLlxuICogQ29weXJpZ2h0cyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIExpY2Vuc2UuIFNlZSB0aGUgYWNjb21wYW55aW5nIExJQ0VOU0UgZmlsZSBmb3IgdGVybXMuXG4gKi9cbmltcG9ydCB7en0gZnJvbSAnem9kJztcblxuaW1wb3J0IHtCdXR0b24sIEZvcm0sIFRleHRGaWVsZH0gZnJvbSAnLi4vY29tcG9uZW50cy9pbmRleC5qcyc7XG5cbi8vIERlZmluZSBhIGNvbXByZWhlbnNpdmUgZm9ybSBzY2hlbWFcbmNvbnN0IHVzZXJQcm9maWxlU2NoZW1hID0gei5vYmplY3Qoe1xuICBmaXJzdE5hbWU6IHouc3RyaW5nKCkubWluKDIsICdGaXJzdCBuYW1lIG11c3QgYmUgYXQgbGVhc3QgMiBjaGFyYWN0ZXJzJyksXG4gIGxhc3ROYW1lOiB6LnN0cmluZygpLm1pbigyLCAnTGFzdCBuYW1lIG11c3QgYmUgYXQgbGVhc3QgMiBjaGFyYWN0ZXJzJyksXG4gIGVtYWlsOiB6LnN0cmluZygpLmVtYWlsKCdQbGVhc2UgZW50ZXIgYSB2YWxpZCBlbWFpbCBhZGRyZXNzJyksXG4gIGFnZTogei5udW1iZXIoKS5taW4oMTgsICdNdXN0IGJlIGF0IGxlYXN0IDE4IHllYXJzIG9sZCcpLm1heCgxMjAsICdQbGVhc2UgZW50ZXIgYSB2YWxpZCBhZ2UnKSxcbiAgYmlvOiB6LnN0cmluZygpLm1heCg1MDAsICdCaW8gbXVzdCBiZSBsZXNzIHRoYW4gNTAwIGNoYXJhY3RlcnMnKS5vcHRpb25hbCgpLFxuICBhZ3JlZVRvVGVybXM6IHouYm9vbGVhbigpLnJlZmluZSgodmFsKSA9PiB2YWwgPT09IHRydWUsICdZb3UgbXVzdCBhZ3JlZSB0byB0aGUgdGVybXMnKVxufSk7XG5cbnR5cGUgVXNlclByb2ZpbGUgPSB6LmluZmVyPHR5cGVvZiB1c2VyUHJvZmlsZVNjaGVtYT47XG5cbmV4cG9ydCBjb25zdCBPcHRpbWl6ZWRGb3JtRXhhbXBsZSA9ICgpID0+IHtcbiAgY29uc3QgaGFuZGxlU3VibWl0ID0gYXN5bmMgKGRhdGE6IFVzZXJQcm9maWxlKSA9PiB7XG4gICAgY29uc29sZS5sb2coJ0Zvcm0gc3VibWl0dGVkIHN1Y2Nlc3NmdWxseTonLCBkYXRhKTtcbiAgICAvLyBIYW5kbGUgc3VjY2VzcyAoc2hvdyBub3RpZmljYXRpb24sIHJlZGlyZWN0LCBldGMuKVxuICB9O1xuXG4gIHJldHVybiAoXG4gICAgPGRpdiBjbGFzc05hbWU9XCJtYXgtdy1tZCBteC1hdXRvIHAtNiBiZy13aGl0ZSByb3VuZGVkLWxnIHNoYWRvdy1sZ1wiPlxuICAgICAgPGgyIGNsYXNzTmFtZT1cInRleHQtMnhsIGZvbnQtYm9sZCBtYi02IHRleHQtY2VudGVyXCI+VXNlciBQcm9maWxlPC9oMj5cblxuICAgICAgPEZvcm1cbiAgICAgICAgc2NoZW1hPXt1c2VyUHJvZmlsZVNjaGVtYX1cbiAgICAgICAgb25TdWJtaXQ9e2hhbmRsZVN1Ym1pdH1cbiAgICAgICAgc2hvd0Vycm9ycz17dHJ1ZX1cbiAgICAgICAgbW9kZT1cIm9uQmx1clwiXG4gICAgICAgIGRlZmF1bHRWYWx1ZXM9e3tcbiAgICAgICAgICBmaXJzdE5hbWU6ICcnLFxuICAgICAgICAgIGxhc3ROYW1lOiAnJyxcbiAgICAgICAgICBlbWFpbDogJycsXG4gICAgICAgICAgYWdlOiAxOCxcbiAgICAgICAgICBiaW86ICcnLFxuICAgICAgICAgIGFncmVlVG9UZXJtczogZmFsc2VcbiAgICAgICAgfX1cbiAgICAgID5cbiAgICAgICAgeyh7Zm9ybVN0YXRlOiB7aXNTdWJtaXR0aW5nfX0pID0+IChcbiAgICAgICAgICA8PlxuICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJncmlkIGdyaWQtY29scy0yIGdhcC00IG1iLTRcIj5cbiAgICAgICAgICAgICAgPFRleHRGaWVsZFxuICAgICAgICAgICAgICAgIG5hbWU9XCJmaXJzdE5hbWVcIlxuICAgICAgICAgICAgICAgIGxhYmVsPVwiRmlyc3QgTmFtZVwiXG4gICAgICAgICAgICAgICAgcGxhY2Vob2xkZXI9XCJFbnRlciB5b3VyIGZpcnN0IG5hbWVcIlxuICAgICAgICAgICAgICAgIHJlcXVpcmVkXG4gICAgICAgICAgICAgIC8+XG5cbiAgICAgICAgICAgICAgPFRleHRGaWVsZFxuICAgICAgICAgICAgICAgIG5hbWU9XCJsYXN0TmFtZVwiXG4gICAgICAgICAgICAgICAgbGFiZWw9XCJMYXN0IE5hbWVcIlxuICAgICAgICAgICAgICAgIHBsYWNlaG9sZGVyPVwiRW50ZXIgeW91ciBsYXN0IG5hbWVcIlxuICAgICAgICAgICAgICAgIHJlcXVpcmVkXG4gICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICA8L2Rpdj5cblxuICAgICAgICAgICAgPFRleHRGaWVsZFxuICAgICAgICAgICAgICBuYW1lPVwiZW1haWxcIlxuICAgICAgICAgICAgICBsYWJlbD1cIkVtYWlsXCJcbiAgICAgICAgICAgICAgdHlwZT1cImVtYWlsXCJcbiAgICAgICAgICAgICAgcGxhY2Vob2xkZXI9XCJFbnRlciB5b3VyIGVtYWlsXCJcbiAgICAgICAgICAgICAgY2xhc3NOYW1lPVwibWItNFwiXG4gICAgICAgICAgICAgIHJlcXVpcmVkXG4gICAgICAgICAgICAvPlxuXG4gICAgICAgICAgICA8VGV4dEZpZWxkXG4gICAgICAgICAgICAgIG5hbWU9XCJhZ2VcIlxuICAgICAgICAgICAgICBsYWJlbD1cIkFnZVwiXG4gICAgICAgICAgICAgIHR5cGU9XCJudW1iZXJcIlxuICAgICAgICAgICAgICBwbGFjZWhvbGRlcj1cIkVudGVyIHlvdXIgYWdlXCJcbiAgICAgICAgICAgICAgY2xhc3NOYW1lPVwibWItNFwiXG4gICAgICAgICAgICAgIG1pbj17MTh9XG4gICAgICAgICAgICAgIG1heD17MTIwfVxuICAgICAgICAgICAgICByZXF1aXJlZFxuICAgICAgICAgICAgLz5cblxuICAgICAgICAgICAgPFRleHRGaWVsZFxuICAgICAgICAgICAgICBuYW1lPVwiYmlvXCJcbiAgICAgICAgICAgICAgbGFiZWw9XCJCaW9cIlxuICAgICAgICAgICAgICBwbGFjZWhvbGRlcj1cIlRlbGwgdXMgYWJvdXQgeW91cnNlbGYgKG9wdGlvbmFsKVwiXG4gICAgICAgICAgICAgIG11bHRpbGluZVxuICAgICAgICAgICAgICByb3dzPXs0fVxuICAgICAgICAgICAgICBjbGFzc05hbWU9XCJtYi00XCJcbiAgICAgICAgICAgIC8+XG5cbiAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPVwiZmxleCBpdGVtcy1jZW50ZXIgbWItNlwiPlxuICAgICAgICAgICAgICA8aW5wdXRcbiAgICAgICAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAgICAgICAgIGlkPVwiYWdyZWVUb1Rlcm1zXCJcbiAgICAgICAgICAgICAgICBuYW1lPVwiYWdyZWVUb1Rlcm1zXCJcbiAgICAgICAgICAgICAgICBjbGFzc05hbWU9XCJtci0yXCJcbiAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgPGxhYmVsIGh0bWxGb3I9XCJhZ3JlZVRvVGVybXNcIiBjbGFzc05hbWU9XCJ0ZXh0LXNtXCI+XG4gICAgICAgICAgICAgICAgSSBhZ3JlZSB0byB0aGUgdGVybXMgYW5kIGNvbmRpdGlvbnNcbiAgICAgICAgICAgICAgPC9sYWJlbD5cbiAgICAgICAgICAgIDwvZGl2PlxuXG4gICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cImZsZXggZ2FwLTRcIj5cbiAgICAgICAgICAgICAgPEJ1dHRvblxuICAgICAgICAgICAgICAgIHR5cGU9XCJzdWJtaXRcIlxuICAgICAgICAgICAgICAgIHZhcmlhbnQ9XCJjb250YWluZWRcIlxuICAgICAgICAgICAgICAgIGNvbG9yPVwicHJpbWFyeVwiXG4gICAgICAgICAgICAgICAgbGFiZWw9XCJTYXZlIFByb2ZpbGVcIlxuICAgICAgICAgICAgICAgIGNsYXNzTmFtZT1cImZsZXgtMVwiXG4gICAgICAgICAgICAgICAgZGlzYWJsZWQ9e2lzU3VibWl0dGluZ31cbiAgICAgICAgICAgICAgICBpc0xvYWRpbmc9e2lzU3VibWl0dGluZ31cbiAgICAgICAgICAgICAgLz5cblxuICAgICAgICAgICAgICA8QnV0dG9uXG4gICAgICAgICAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgICAgICAgICAgdmFyaWFudD1cIm91dGxpbmVkXCJcbiAgICAgICAgICAgICAgICBjb2xvcj1cIm5ldXRyYWxcIlxuICAgICAgICAgICAgICAgIGxhYmVsPVwiQ2FuY2VsXCJcbiAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiBjb25zb2xlLmxvZygnQ2FuY2VsbGVkJyl9XG4gICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8Lz5cbiAgICAgICAgKX1cbiAgICAgIDwvRm9ybT5cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG4iXSwibmFtZXMiOlsieiIsIkJ1dHRvbiIsIkZvcm0iLCJUZXh0RmllbGQiLCJ1c2VyUHJvZmlsZVNjaGVtYSIsIm9iamVjdCIsImZpcnN0TmFtZSIsInN0cmluZyIsIm1pbiIsImxhc3ROYW1lIiwiZW1haWwiLCJhZ2UiLCJudW1iZXIiLCJtYXgiLCJiaW8iLCJvcHRpb25hbCIsImFncmVlVG9UZXJtcyIsImJvb2xlYW4iLCJyZWZpbmUiLCJ2YWwiLCJPcHRpbWl6ZWRGb3JtRXhhbXBsZSIsImhhbmRsZVN1Ym1pdCIsImRhdGEiLCJjb25zb2xlIiwibG9nIiwiZGl2IiwiY2xhc3NOYW1lIiwiaDIiLCJzY2hlbWEiLCJvblN1Ym1pdCIsInNob3dFcnJvcnMiLCJtb2RlIiwiZGVmYXVsdFZhbHVlcyIsImZvcm1TdGF0ZSIsImlzU3VibWl0dGluZyIsIm5hbWUiLCJsYWJlbCIsInBsYWNlaG9sZGVyIiwicmVxdWlyZWQiLCJ0eXBlIiwibXVsdGlsaW5lIiwicm93cyIsImlucHV0IiwiaWQiLCJodG1sRm9yIiwidmFyaWFudCIsImNvbG9yIiwiZGlzYWJsZWQiLCJpc0xvYWRpbmciLCJvbkNsaWNrIl0sIm1hcHBpbmdzIjoiO0FBQUE7OztDQUdDLEdBQ0QsU0FBUUEsQ0FBQyxRQUFPLE1BQU07QUFFdEIsU0FBUUMsTUFBTSxFQUFFQyxJQUFJLEVBQUVDLFNBQVMsUUFBTyx5QkFBeUI7QUFFL0QscUNBQXFDO0FBQ3JDLE1BQU1DLG9CQUFvQkosRUFBRUssTUFBTSxDQUFDO0lBQ2pDQyxXQUFXTixFQUFFTyxNQUFNLEdBQUdDLEdBQUcsQ0FBQyxHQUFHO0lBQzdCQyxVQUFVVCxFQUFFTyxNQUFNLEdBQUdDLEdBQUcsQ0FBQyxHQUFHO0lBQzVCRSxPQUFPVixFQUFFTyxNQUFNLEdBQUdHLEtBQUssQ0FBQztJQUN4QkMsS0FBS1gsRUFBRVksTUFBTSxHQUFHSixHQUFHLENBQUMsSUFBSSxpQ0FBaUNLLEdBQUcsQ0FBQyxLQUFLO0lBQ2xFQyxLQUFLZCxFQUFFTyxNQUFNLEdBQUdNLEdBQUcsQ0FBQyxLQUFLLHdDQUF3Q0UsUUFBUTtJQUN6RUMsY0FBY2hCLEVBQUVpQixPQUFPLEdBQUdDLE1BQU0sQ0FBQyxDQUFDQyxNQUFRQSxRQUFRLE1BQU07QUFDMUQ7QUFJQSxPQUFPLE1BQU1DLHVCQUF1QjtJQUNsQyxNQUFNQyxlQUFlLE9BQU9DO1FBQzFCQyxRQUFRQyxHQUFHLENBQUMsZ0NBQWdDRjtJQUM1QyxxREFBcUQ7SUFDdkQ7SUFFQSxxQkFDRSxNQUFDRztRQUFJQyxXQUFVOzswQkFDYixLQUFDQztnQkFBR0QsV0FBVTswQkFBc0M7OzBCQUVwRCxLQUFDeEI7Z0JBQ0MwQixRQUFReEI7Z0JBQ1J5QixVQUFVUjtnQkFDVlMsWUFBWTtnQkFDWkMsTUFBSztnQkFDTEMsZUFBZTtvQkFDYjFCLFdBQVc7b0JBQ1hHLFVBQVU7b0JBQ1ZDLE9BQU87b0JBQ1BDLEtBQUs7b0JBQ0xHLEtBQUs7b0JBQ0xFLGNBQWM7Z0JBQ2hCOzBCQUVDLENBQUMsRUFBQ2lCLFdBQVcsRUFBQ0MsWUFBWSxFQUFDLEVBQUMsaUJBQzNCOzswQ0FDRSxNQUFDVDtnQ0FBSUMsV0FBVTs7a0RBQ2IsS0FBQ3ZCO3dDQUNDZ0MsTUFBSzt3Q0FDTEMsT0FBTTt3Q0FDTkMsYUFBWTt3Q0FDWkMsUUFBUTs7a0RBR1YsS0FBQ25DO3dDQUNDZ0MsTUFBSzt3Q0FDTEMsT0FBTTt3Q0FDTkMsYUFBWTt3Q0FDWkMsUUFBUTs7OzswQ0FJWixLQUFDbkM7Z0NBQ0NnQyxNQUFLO2dDQUNMQyxPQUFNO2dDQUNORyxNQUFLO2dDQUNMRixhQUFZO2dDQUNaWCxXQUFVO2dDQUNWWSxRQUFROzswQ0FHVixLQUFDbkM7Z0NBQ0NnQyxNQUFLO2dDQUNMQyxPQUFNO2dDQUNORyxNQUFLO2dDQUNMRixhQUFZO2dDQUNaWCxXQUFVO2dDQUNWbEIsS0FBSztnQ0FDTEssS0FBSztnQ0FDTHlCLFFBQVE7OzBDQUdWLEtBQUNuQztnQ0FDQ2dDLE1BQUs7Z0NBQ0xDLE9BQU07Z0NBQ05DLGFBQVk7Z0NBQ1pHLFNBQVM7Z0NBQ1RDLE1BQU07Z0NBQ05mLFdBQVU7OzBDQUdaLE1BQUNEO2dDQUFJQyxXQUFVOztrREFDYixLQUFDZ0I7d0NBQ0NILE1BQUs7d0NBQ0xJLElBQUc7d0NBQ0hSLE1BQUs7d0NBQ0xULFdBQVU7O2tEQUVaLEtBQUNVO3dDQUFNUSxTQUFRO3dDQUFlbEIsV0FBVTtrREFBVTs7OzswQ0FLcEQsTUFBQ0Q7Z0NBQUlDLFdBQVU7O2tEQUNiLEtBQUN6Qjt3Q0FDQ3NDLE1BQUs7d0NBQ0xNLFNBQVE7d0NBQ1JDLE9BQU07d0NBQ05WLE9BQU07d0NBQ05WLFdBQVU7d0NBQ1ZxQixVQUFVYjt3Q0FDVmMsV0FBV2Q7O2tEQUdiLEtBQUNqQzt3Q0FDQ3NDLE1BQUs7d0NBQ0xNLFNBQVE7d0NBQ1JDLE9BQU07d0NBQ05WLE9BQU07d0NBQ05hLFNBQVMsSUFBTTFCLFFBQVFDLEdBQUcsQ0FBQzs7Ozs7Ozs7O0FBUTNDLEVBQUUifQ==

package/lib/form/index.d.ts

@@ -0,0 +1,11 @@
+export { z } from 'zod';
+export * from '../components/Button/Button.js';
+export * from '../components/Checkbox/Checkbox.js';
+export * from '../components/DateField/DateField.js';
+export * from '../components/Form/Form.js';
+export * from '../components/Form/FormContext.js';
+export * from '../components/InputField/InputField.js';
+export * from '../components/RadioField/RadioField.js';
+export * from '../components/SelectField/SelectField.js';
+export * from '../components/SelectField/SelectOption.js';
+export * from '../components/TextField/TextField.js';