@datum-cloud/datum-ui 0.1.1 → 0.2.0-alpha.1

package/dist/components/features/form/hooks/use-field-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-field-context.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/form/hooks/use-field-context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAA;AAGrD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,eAAe,IAAI,qBAAqB,CAEvD"}

package/dist/components/features/form/hooks/use-field.d.ts

@@ -0,0 +1,30 @@
+import type { UseFieldReturn } from '../types';
+/**
+ * Hook to access and control a specific field
+ * Provides field metadata, control methods, and errors
+ *
+ * @example
+ * ```tsx
+ * function MyCustomInput({ name }: { name: string }) {
+ *   const { field, control, meta, errors } = useField(name);
+ *
+ *   return (
+ *     <div>
+ *       <input
+ *         name={meta.name}
+ *         id={meta.id}
+ *         value={control.value ?? ''}
+ *         onChange={(e) => control.change(e.target.value)}
+ *         onBlur={control.blur}
+ *         aria-invalid={!!errors?.length}
+ *       />
+ *       {errors?.map((error) => (
+ *         <span key={error} className="text-red-500">{error}</span>
+ *       ))}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useField(name: string): UseFieldReturn;
+//# sourceMappingURL=use-field.d.ts.map

package/dist/components/features/form/hooks/use-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-field.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/form/hooks/use-field.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAK9C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,cAAc,CAiFrD"}

package/dist/components/features/form/hooks/use-form-context.d.ts

@@ -0,0 +1,19 @@
+import type { FormContextValue } from '../types';
+/**
+ * Hook to access the form context
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { form, fields, isSubmitting, submit, reset } = useFormContext();
+ *
+ *   return (
+ *     <button onClick={submit} disabled={isSubmitting}>
+ *       Submit
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export declare function useFormContext<T extends Record<string, unknown> = Record<string, unknown>>(): FormContextValue<T>;
+//# sourceMappingURL=use-form-context.d.ts.map

package/dist/components/features/form/hooks/use-form-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-form-context.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/form/hooks/use-form-context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAGhD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,cAAc,CAC5B,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KACxD,gBAAgB,CAAC,CAAC,CAAC,CAEvB"}

package/dist/components/features/form/hooks/use-stepper.d.ts

@@ -0,0 +1,56 @@
+import type { StepConfig } from '../types';
+/**
+ * Return type for useStepper hook
+ */
+export interface UseStepperReturn {
+    /** All step configurations */
+    steps: StepConfig[];
+    /** Current step config */
+    current: StepConfig;
+    /** Current step index (0-based) */
+    currentIndex: number;
+    /** Go to next step (triggers validation) */
+    next: () => void;
+    /** Go to previous step (no validation) */
+    prev: () => void;
+    /** Go to specific step by ID (only backwards without validation) */
+    goTo: (stepId: string) => void;
+    /** Whether current step is first */
+    isFirst: boolean;
+    /** Whether current step is last */
+    isLast: boolean;
+    /** Get data from a specific step by ID */
+    getStepData: (stepId: string) => Record<string, unknown> | undefined;
+    /** Get all data from all completed steps */
+    getAllStepData: () => Record<string, unknown>;
+}
+/**
+ * Hook to access the stepper context
+ * Must be used within a Form.Stepper component
+ *
+ * @example
+ * ```tsx
+ * function StepContent() {
+ *   const {
+ *     current,
+ *     currentIndex,
+ *     steps,
+ *     next,
+ *     prev,
+ *     goTo,
+ *     isFirst,
+ *     isLast,
+ *   } = useStepper();
+ *
+ *   return (
+ *     <div>
+ *       <h2>Step {currentIndex + 1}: {current.label}</h2>
+ *       <button onClick={prev} disabled={isFirst}>Previous</button>
+ *       <button onClick={next} disabled={isLast}>Next</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useStepper(): UseStepperReturn;
+//# sourceMappingURL=use-stepper.d.ts.map

package/dist/components/features/form/hooks/use-stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-stepper.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/form/hooks/use-stepper.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAG1C;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,8BAA8B;IAC9B,KAAK,EAAE,UAAU,EAAE,CAAA;IACnB,0BAA0B;IAC1B,OAAO,EAAE,UAAU,CAAA;IACnB,mCAAmC;IACnC,YAAY,EAAE,MAAM,CAAA;IACpB,4CAA4C;IAC5C,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,0CAA0C;IAC1C,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,oEAAoE;IACpE,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,oCAAoC;IACpC,OAAO,EAAE,OAAO,CAAA;IAChB,mCAAmC;IACnC,MAAM,EAAE,OAAO,CAAA;IACf,0CAA0C;IAC1C,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAAA;IACpE,4CAA4C;IAC5C,cAAc,EAAE,MAAM,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAC9C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,UAAU,IAAI,gBAAgB,CAe7C"}

package/dist/components/features/form/hooks/use-watch.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Hook to watch a field's value
+ * Triggers re-render when the watched field value changes
+ *
+ * @example
+ * ```tsx
+ * function ConditionalField() {
+ *   const contactMethod = useWatch('contactMethod');
+ *
+ *   if (contactMethod === 'email') {
+ *     return <Form.Field name="email"><Form.Input type="email" /></Form.Field>;
+ *   }
+ *
+ *   if (contactMethod === 'phone') {
+ *     return <Form.Field name="phone"><Form.Input type="tel" /></Form.Field>;
+ *   }
+ *
+ *   return null;
+ * }
+ * ```
+ */
+export declare function useWatch<T = unknown>(name: string): T | undefined;
+/**
+ * Hook to watch multiple fields at once
+ *
+ * @example
+ * ```tsx
+ * function Summary() {
+ *   const values = useWatchAll(['firstName', 'lastName', 'email']);
+ *
+ *   return (
+ *     <div>
+ *       Name: {values.firstName} {values.lastName}
+ *       Email: {values.email}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useWatchAll<T extends Record<string, unknown>>(names: string[]): Partial<T>;
+//# sourceMappingURL=use-watch.d.ts.map

package/dist/components/features/form/hooks/use-watch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-watch.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/form/hooks/use-watch.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,QAAQ,CAAC,CAAC,GAAG,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC,GAAG,SAAS,CAyCjE;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,CAyC1F"}

package/dist/components/features/form/index.d.ts

@@ -0,0 +1,133 @@
+/**
+ * Datum Form Library
+ *
+ * A compound component pattern form library built on top of Conform.js and Zod
+ * for easy form creation with built-in validation, error handling, and accessibility features.
+ *
+ * @example Basic Usage
+ * ```tsx
+ * import { Form } from './';
+ * import { z } from 'zod';
+ *
+ * const userSchema = z.object({
+ *   name: z.string().min(2),
+ *   email: z.string().email(),
+ * });
+ *
+ * function UserForm() {
+ *   return (
+ *     <Form.Root schema={userSchema} onSubmit={(data) => console.log(data)}>
+ *       <Form.Field name="name" label="Name" required>
+ *         <Form.Input />
+ *       </Form.Field>
+ *       <Form.Field name="email" label="Email" required>
+ *         <Form.Input type="email" />
+ *       </Form.Field>
+ *       <Form.Submit>Save</Form.Submit>
+ *     </Form.Root>
+ *   );
+ * }
+ * ```
+ *
+ * @example Multi-Step Form
+ * ```tsx
+ * const steps = [
+ *   { id: 'account', label: 'Account', schema: accountSchema },
+ *   { id: 'profile', label: 'Profile', schema: profileSchema },
+ * ];
+ *
+ * <Form.Stepper steps={steps} onComplete={handleComplete}>
+ *   <Form.StepperNavigation />
+ *   <Form.Step id="account">...</Form.Step>
+ *   <Form.Step id="profile">...</Form.Step>
+ *   <Form.StepperControls />
+ * </Form.Stepper>
+ * ```
+ *
+ * @example Conditional Fields
+ * ```tsx
+ * <Form.Field name="contactMethod">
+ *   <Form.Select>
+ *     <Form.SelectItem value="email">Email</Form.SelectItem>
+ *     <Form.SelectItem value="phone">Phone</Form.SelectItem>
+ *   </Form.Select>
+ * </Form.Field>
+ *
+ * <Form.When field="contactMethod" is="email">
+ *   <Form.Field name="email"><Form.Input type="email" /></Form.Field>
+ * </Form.When>
+ * ```
+ */
+import { FormAutocomplete, FormButton, FormCheckbox, FormCopyBox, FormCustom, FormDescription, FormDialog, FormError, FormField, FormFieldArray, FormInput, FormRadioGroup, FormRadioItem, FormRoot, FormSelect, FormSelectItem, FormStep, FormStepper, FormSubmit, FormSwitch, FormTextarea, FormWhen, StepperControls, StepperNavigation } from './components';
+import { FormInputGroup } from './components/form-input-group';
+import { useField, useFieldContext, useFormContext, useStepper, useWatch, useWatchAll } from './hooks';
+/**
+ * Form compound component
+ *
+ * Contains all form-related components as properties:
+ * - Form.Root - Main form container
+ * - Form.Field - Field wrapper with label and error handling
+ * - Form.Input - Text input
+ * - Form.Textarea - Multi-line text input
+ * - Form.Select - Dropdown select
+ * - Form.SelectItem - Select option
+ * - Form.Checkbox - Checkbox input
+ * - Form.Switch - Toggle switch
+ * - Form.RadioGroup - Radio button group
+ * - Form.RadioItem - Radio button option
+ * - Form.Submit - Submit button with loading state
+ * - Form.Error - Error display
+ * - Form.Description - Helper text
+ * - Form.Autocomplete - Searchable select with virtualization
+ * - Form.When - Conditional rendering
+ * - Form.FieldArray - Dynamic array of fields
+ * - Form.Custom - Escape hatch for custom implementations
+ * - Form.Stepper - Multi-step form container
+ * - Form.Step - Individual step content
+ * - Form.StepperNavigation - Step progress indicators
+ * - Form.StepperControls - Previous/Next/Submit buttons
+ *
+ * Hooks available:
+ * - Form.useFormContext - Access form context
+ * - Form.useFieldContext - Access field context
+ * - Form.useField - Access and control a specific field
+ * - Form.useWatch - Watch a field's value
+ * - Form.useWatchAll - Watch multiple fields
+ * - Form.useStepper - Access stepper context
+ */
+export declare const Form: {
+    readonly Root: typeof FormRoot;
+    readonly Field: typeof FormField;
+    readonly Submit: typeof FormSubmit;
+    readonly Button: typeof FormButton;
+    readonly Error: typeof FormError;
+    readonly Description: typeof FormDescription;
+    readonly Input: typeof FormInput;
+    readonly Textarea: typeof FormTextarea;
+    readonly Select: typeof FormSelect;
+    readonly SelectItem: typeof FormSelectItem;
+    readonly Checkbox: typeof FormCheckbox;
+    readonly Switch: typeof FormSwitch;
+    readonly RadioGroup: typeof FormRadioGroup;
+    readonly RadioItem: typeof FormRadioItem;
+    readonly CopyBox: typeof FormCopyBox;
+    readonly Autocomplete: typeof FormAutocomplete;
+    readonly InputGroup: typeof FormInputGroup;
+    readonly When: typeof FormWhen;
+    readonly FieldArray: typeof FormFieldArray;
+    readonly Custom: typeof FormCustom;
+    readonly Stepper: typeof FormStepper;
+    readonly Step: typeof FormStep;
+    readonly StepperNavigation: typeof StepperNavigation;
+    readonly StepperControls: typeof StepperControls;
+    readonly Dialog: typeof FormDialog;
+    readonly useFormContext: typeof useFormContext;
+    readonly useFieldContext: typeof useFieldContext;
+    readonly useField: typeof useField;
+    readonly useWatch: typeof useWatch;
+    readonly useWatchAll: typeof useWatchAll;
+    readonly useStepper: typeof useStepper;
+};
+export { FormAutocomplete, FormButton, FormCheckbox, FormCopyBox, FormCustom, FormDescription, FormDialog, FormError, FormField, FormFieldArray, FormInput, FormRadioGroup, FormRadioItem, FormRoot, FormSelect, FormSelectItem, FormStep, FormStepper, FormSubmit, FormSwitch, FormTextarea, FormWhen, StepperControls, StepperNavigation, useField, useFieldContext, useFormContext, useStepper, useWatch, useWatchAll, };
+export type { AutocompleteGroup, AutocompleteOption, AutocompleteProps, FormAutocompleteProps, FormButtonProps, FormCheckboxProps, FormContextValue, FormCopyBoxProps, FormCustomProps, FormCustomRenderProps, FormDescriptionProps, FormDialogProps, FormErrorProps, FormFieldArrayProps, FormFieldArrayRenderProps, FormFieldContextValue, FormFieldProps, FormFieldRenderProps, FormInputProps, FormRadioGroupProps, FormRadioItemProps, FormRootProps, FormRootRenderProps, FormSelectItemProps, FormSelectProps, FormStepperProps, FormStepProps, FormSubmitProps, FormSwitchProps, FormTelemetry, FormTextareaProps, FormWhenProps, StepConfig, StepperContextValue, StepperControlsProps, StepperNavigationProps, UseFieldReturn, UseWatchReturn, } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/features/form/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/features/form/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AAEH,OAAO,EACL,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,WAAW,EACX,UAAU,EACV,eAAe,EACf,UAAU,EACV,SAAS,EACT,SAAS,EACT,cAAc,EACd,SAAS,EACT,cAAc,EACd,aAAa,EACb,QAAQ,EACR,UAAU,EACV,cAAc,EACd,QAAQ,EACR,WAAW,EACX,UAAU,EACV,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,eAAe,EACf,iBAAiB,EAClB,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAA;AAE9D,OAAO,EACL,QAAQ,EACR,eAAe,EACf,cAAc,EACd,UAAU,EACV,QAAQ,EACR,WAAW,EACZ,MAAM,SAAS,CAAA;AAEhB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CP,CAAA;AAGV,OAAO,EACL,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,WAAW,EACX,UAAU,EACV,eAAe,EAGf,UAAU,EACV,SAAS,EACT,SAAS,EACT,cAAc,EAEd,SAAS,EACT,cAAc,EACd,aAAa,EAEb,QAAQ,EACR,UAAU,EACV,cAAc,EAEd,QAAQ,EAER,WAAW,EACX,UAAU,EAEV,UAAU,EACV,YAAY,EAEZ,QAAQ,EACR,eAAe,EAEf,iBAAiB,EAEjB,QAAQ,EACR,eAAe,EAEf,cAAc,EACd,UAAU,EACV,QAAQ,EACR,WAAW,GACZ,CAAA;AAGD,YAAY,EACV,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,qBAAqB,EACrB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,qBAAqB,EACrB,oBAAoB,EACpB,eAAe,EACf,cAAc,EACd,mBAAmB,EACnB,yBAAyB,EACzB,qBAAqB,EACrB,cAAc,EACd,oBAAoB,EACpB,cAAc,EACd,mBAAmB,EACnB,kBAAkB,EAClB,aAAa,EACb,mBAAmB,EACnB,mBAAmB,EACnB,eAAe,EACf,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,eAAe,EACf,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,UAAU,EACV,mBAAmB,EACnB,oBAAoB,EACpB,sBAAsB,EACtB,cAAc,EACd,cAAc,GACf,MAAM,SAAS,CAAA"}