@vritti/quantum-ui 0.3.7 → 0.3.8

package/dist/Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.js","sources":["../lib/utils/formHelpers.ts","../lib/components/Form/Form.tsx"],"sourcesContent":["import type { FieldPath, FieldValues, UseFormReturn } from 'react-hook-form';\n\n/**\n * Field mapping configuration for API error to form field mapping\n */\nexport interface FieldMapping {\n  [apiField: string]: string; // Maps API field names to form field names\n}\n\n/**\n * Axios error structure (or similar HTTP client error structure)\n */\ninterface AxiosLikeError {\n  response?: {\n    data?: unknown;\n  };\n}\n\n/**\n * RFC 9457 field error structure\n */\nexport interface FieldError {\n  field: string;\n  message: string;\n}\n\n/**\n * API error structure with field-specific errors\n * Supports RFC 9457 Problem Details format\n */\nexport interface ApiErrorResponse {\n  type?: string; // RFC 9457: URI reference identifying the problem type\n  title?: string; // RFC 9457: Short human-readable summary\n  status?: number; // RFC 9457: HTTP status code\n  label?: string; // Root error heading displayed to the user\n  detail?: string; // RFC 9457: Human-readable explanation\n  instance?: string; // RFC 9457: URI reference for the specific occurrence\n  errors?: FieldError[];\n}\n\n/**\n * Options for mapping API errors to form\n */\nexport interface MapApiErrorsOptions {\n  /**\n   * Field name mapping from API to form fields\n   */\n  fieldMapping?: FieldMapping;\n\n  /**\n   * Whether to set root error for general messages\n   */\n  setRootError?: boolean;\n}\n\n/**\n * Maps an RFC 9457 Problem Details API error response to react-hook-form errors.\n *\n * Root errors (`label`/`title` + `detail`) and field errors (`errors[]`) are\n * handled independently -- a single response can populate both the root error\n * alert and inline field errors at the same time.\n *\n * @param error - The error object from API response\n * @param form - The react-hook-form instance\n * @param options - Mapping options\n *\n * @example\n * ```tsx\n * try {\n *   await api.post('/login', data);\n * } catch (error) {\n *   mapApiErrorsToForm(error.response?.data, form, {\n *     fieldMapping: {\n *       'email_address': 'email',\n *       'password_hash': 'password'\n *     }\n *   });\n * }\n * ```\n */\nexport function mapApiErrorsToForm<TFieldValues extends FieldValues = FieldValues>(\n  error: unknown,\n  form: UseFormReturn<TFieldValues>,\n  options: MapApiErrorsOptions = {},\n): void {\n  const { fieldMapping = {}, setRootError = true } = options;\n\n  if (!error || typeof error !== 'object') {\n    if (setRootError) {\n      form.setError('root', {\n        type: 'Error',\n        message: 'An error occurred',\n      });\n    }\n    return;\n  }\n\n  // Extract error data from axios response structure\n  const axiosError = error as AxiosLikeError;\n  const errorData = axiosError.response?.data || error;\n  const apiError = errorData as ApiErrorResponse;\n\n  // Extract title/label for error heading (RFC 9457)\n  const errorTitle = apiError.label || apiError.title || 'Error';\n  const generalMessage = apiError.detail;\n\n  // Map field-specific errors (field is always present in RFC 9457)\n  let mappedFieldErrorsCount = 0;\n  if (apiError.errors && Array.isArray(apiError.errors)) {\n    for (const errorItem of apiError.errors) {\n      const formField = fieldMapping[errorItem.field] || errorItem.field;\n\n      form.setError(formField as FieldPath<TFieldValues>, {\n        type: 'manual',\n        message: errorItem.message,\n      });\n      mappedFieldErrorsCount += 1;\n    }\n  }\n\n  // Root error is shown only when no field errors are present\n  if (generalMessage && setRootError && mappedFieldErrorsCount === 0) {\n    form.setError('root', {\n      type: errorTitle,\n      message: generalMessage,\n    });\n  }\n}\n","import type { UseMutationResult } from '@tanstack/react-query';\nimport type React from 'react';\nimport { Children, cloneElement, Fragment, isValidElement, useCallback } from 'react';\nimport {\n  Controller,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n  FormProvider,\n  type UseFormReturn,\n} from 'react-hook-form';\nimport type { Country } from 'react-phone-number-input';\nimport { cn } from '../../../shadcn/utils';\nimport { axios } from '../../utils/axios';\nimport { type FieldMapping, mapApiErrorsToForm } from '../../utils/formHelpers';\nimport { Alert } from '../Alert';\nimport { Button } from '../Button';\nimport { Checkbox } from '../Checkbox';\nimport { CheckboxGroup } from '../CheckboxGroup';\nimport { DatePicker } from '../DatePicker';\nimport { DateTimePicker } from '../DateTimePicker';\nimport { PhoneField } from '../PhoneField';\nimport { RadioGroup } from '../RadioGroup';\nimport { Switch } from '../Switch';\nimport { UploadFile } from '../UploadFile';\n\n// Re-export Controller for explicit usage\nexport { Controller } from 'react-hook-form';\n\n/**\n * Recursively process children to wrap form fields with Controller\n * and inject loading state into submit buttons\n */\nfunction processChildren<\n  TFieldValues extends FieldValues = FieldValues,\n  _TContext = any,\n  TTransformedValues extends FieldValues | undefined = TFieldValues,\n>(\n  children: React.ReactNode,\n  control: ControllerProps<TFieldValues, FieldPath<TFieldValues>, TTransformedValues>['control'],\n  isSubmitting: boolean,\n  setValue: UseFormReturn<TFieldValues, _TContext, TTransformedValues>['setValue'],\n  onCancel?: () => void,\n  reset?: UseFormReturn<TFieldValues, _TContext, TTransformedValues>['reset'],\n): React.ReactNode {\n  return Children.map(children, (child) => {\n    // Handle non-element children (strings, numbers, null, etc.)\n    if (!isValidElement(child)) {\n      return child;\n    }\n\n    const childProps = child.props as any;\n    const isFragment = child.type === Fragment;\n\n    // Handle form fields with name prop (but not Fragments)\n    if (!isFragment && childProps.name && typeof childProps.name === 'string') {\n      const name = childProps.name as FieldPath<TFieldValues>;\n\n      return (\n        <Controller\n          key={name}\n          control={control}\n          name={name}\n          render={({ field, fieldState }) => {\n            // Check if this is a Checkbox, Switch, RadioGroup, or CheckboxGroup component\n            const isCheckbox = child.type === Checkbox;\n            const isSwitch = child.type === Switch;\n            const isRadioGroup = child.type === RadioGroup;\n            const isCheckboxGroup = child.type === CheckboxGroup;\n            const isPhone = child.type === PhoneField;\n            const isDatePicker = child.type === DatePicker;\n            const isDateTimePicker = child.type === DateTimePicker;\n\n            const fieldProps =\n              isCheckbox || isSwitch\n                ? {\n                    checked: field.value,\n                    onCheckedChange: field.onChange,\n                    onBlur: field.onBlur,\n                    ref: field.ref,\n                  }\n                : isRadioGroup || isCheckboxGroup\n                  ? {\n                      value: field.value,\n                      onValueChange: field.onChange,\n                      onBlur: field.onBlur,\n                    }\n                  : isDatePicker\n                    ? {\n                        value: field.value,\n                        onValueChange: field.onChange,\n                        onBlur: field.onBlur,\n                        ref: field.ref,\n                      }\n                    : isDateTimePicker\n                      ? {\n                          value: field.value,\n                          onValueChange: field.onChange,\n                          onBlur: field.onBlur,\n                          ref: field.ref,\n                        }\n                      : isPhone\n                        ? {\n                            ...field,\n                            onCountryChange: (country: Country | undefined) => {\n                              setValue(`${name}Country` as FieldPath<TFieldValues>, country as any);\n                            },\n                          }\n                        : field;\n\n            const isUploadFile = child.type === UploadFile;\n\n            return cloneElement(child, {\n              ...childProps,\n              ...fieldProps,\n              error: fieldState.error?.message || (fieldState.error ? 'Invalid' : undefined),\n              name: undefined, // Remove name to avoid passing it to the underlying input\n              ...(isUploadFile ? { isLoading: isSubmitting } : {}),\n            });\n          }}\n        />\n      );\n    }\n\n    // Handle cancel buttons - wire up form.reset() + onCancel callback\n    if (childProps['data-cancel'] && onCancel && reset) {\n      return cloneElement(child, {\n        ...childProps,\n        onClick: () => {\n          reset();\n          onCancel();\n        },\n      });\n    }\n\n    // Handle submit buttons - inject loading state via isLoading prop\n    if (childProps.type === 'submit') {\n      const isButtonElement =\n        child.type === Button || (typeof child.type === 'function' && (child.type as any).displayName === 'Button');\n\n      if (isButtonElement) {\n        return cloneElement(child, {\n          ...childProps,\n          isLoading: isSubmitting,\n        });\n      }\n    }\n\n    // Handle React Fragments - process their children directly\n    if (isFragment) {\n      return processChildren(childProps.children, control, isSubmitting, setValue, onCancel, reset);\n    }\n\n    // Recurse into children for container elements (divs, FieldGroups, etc.)\n    if (childProps.children != null) {\n      return cloneElement(child, {\n        ...childProps,\n        children: processChildren(childProps.children, control, isSubmitting, setValue, onCancel, reset),\n      });\n    }\n\n    // Return unchanged if no name prop and no children\n    return child;\n  });\n}\n\nexport interface FormProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TContext = any,\n  TTransformedValues extends FieldValues | undefined = TFieldValues,\n  TMutationData = unknown,\n  TMutationError = Error,\n  TMutationVariables = any,\n> extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {\n  /**\n   * The react-hook-form form instance\n   */\n  form: UseFormReturn<TFieldValues, TContext, TTransformedValues>;\n\n  /**\n   * Form submit handler - receives the transformed values if transformation is applied.\n   * Optional when using `mutation` prop.\n   */\n  onSubmit?: Parameters<UseFormReturn<TFieldValues, TContext, TTransformedValues>['handleSubmit']>[0];\n\n  /**\n   * Children elements - automatically wrapped with Controller if they have a name prop\n   */\n  children: React.ReactNode;\n\n  /**\n   * Position of the root error display\n   * @default 'bottom'\n   */\n  rootErrorPosition?: 'top' | 'bottom';\n\n  /**\n   * Additional classes for the root error display\n   */\n  rootErrorClassName?: string;\n\n  /**\n   * Action element rendered in the root error Alert (e.g. button or link)\n   * Positioned in the top-right corner using AlertAction\n   */\n  rootErrorAction?: React.ReactNode;\n\n  /**\n   * Field mapping for automatic API error mapping\n   * Maps API field names to form field names\n   */\n  fieldMapping?: FieldMapping;\n\n  /**\n   * TanStack Query mutation for automatic handling.\n   * When provided, the form will use `mutateAsync` to submit data and handle errors automatically.\n   * The mutation's own callbacks (onSuccess, onError, etc.) will fire automatically.\n   * Form only adds `mapApiErrorsToForm` as an extra error handling layer.\n   * Optional - you can use `onSubmit` instead for forms that don't use mutations.\n   */\n  mutation?: UseMutationResult<TMutationData, TMutationError, TMutationVariables, unknown>;\n\n  /**\n   * Transform form data to mutation variables before submission.\n   * Only used when `mutation` prop is provided.\n   */\n  transformSubmit?: (\n    data: TTransformedValues extends undefined ? TFieldValues : TTransformedValues,\n  ) => TMutationVariables;\n\n  /**\n   * Automatically calls form.reset() after a successful mutation.\n   * Set to false for \"edit\" forms where resetting clears pre-populated values.\n   * @default true\n   */\n  resetOnSuccess?: boolean;\n\n  /**\n   * Called when a cancel button (marked with data-cancel) is clicked.\n   * Form.reset() is called automatically before invoking this callback.\n   */\n  onCancel?: () => void;\n}\n\n/**\n * Smart Form component that automatically wraps children with Controller\n *\n * Usage with onSubmit:\n * ```tsx\n * <Form form={form} onSubmit={handleSubmit}>\n *   <TextField name=\"email\" label=\"Email\" description=\"Your email address\" />\n *   <PasswordField name=\"password\" label=\"Password\" />\n *   <Button type=\"submit\">Submit</Button>\n * </Form>\n * ```\n *\n * Usage with TanStack Query mutation:\n * ```tsx\n * const mutation = useMutation({\n *   mutationFn: (data) => api.post('/login', data),\n *   onSuccess: (data) => console.log('Success!', data),\n *   onError: (error) => console.error('Error!', error),\n * });\n *\n * <Form\n *   form={form}\n *   mutation={mutation}\n *   transformSubmit={(data) => ({ ...data, timestamp: Date.now() })}\n * >\n *   <TextField name=\"email\" label=\"Email\" />\n *   <Button type=\"submit\">Submit</Button>\n * </Form>\n * ```\n */\nexport function Form<\n  TFieldValues extends FieldValues = FieldValues,\n  TContext = any,\n  TTransformedValues extends FieldValues | undefined = TFieldValues,\n  TMutationData = unknown,\n  TMutationError = Error,\n  TMutationVariables = any,\n>({\n  form,\n  onSubmit,\n  children,\n  rootErrorPosition = 'bottom',\n  rootErrorClassName,\n  rootErrorAction,\n  fieldMapping,\n  mutation,\n  transformSubmit,\n  resetOnSuccess,\n  onCancel,\n  className,\n  ...props\n}: FormProps<TFieldValues, TContext, TTransformedValues, TMutationData, TMutationError, TMutationVariables>) {\n  // Compute isSubmitting from both form state and mutation state\n  const isSubmitting = form.formState.isSubmitting || (mutation?.isPending ?? false);\n\n  // Wrap the submit handler with automatic error mapping (always enabled)\n  // Form only adds mapApiErrorsToForm - the mutation's own callbacks fire automatically\n  const wrappedOnSubmit = useCallback(\n    async (data: TTransformedValues extends undefined ? TFieldValues : TTransformedValues) => {\n      // Suppress error toasts during form submission — Form handles errors inline\n      const interceptorId = axios.interceptors.request.use((config) => ({\n        ...config,\n        showErrorToast: false,\n      }));\n\n      try {\n        if (mutation) {\n          const variables = transformSubmit ? transformSubmit(data) : data;\n          // mutateAsync will trigger the mutation's onSuccess/onError callbacks\n          await mutation.mutateAsync(variables as TMutationVariables);\n        } else if (onSubmit) {\n          await onSubmit(data as any);\n        }\n\n        // Reset form after successful submission (default: true)\n        if (resetOnSuccess !== false) form.reset();\n      } catch (error) {\n        // Form's only job: map API errors to form fields\n        // mapApiErrorsToForm handles axios error structure extraction internally\n        mapApiErrorsToForm(error, form as any, {\n          fieldMapping,\n        });\n        // Log error for debugging\n        console.error('[Form Submission Error]', error);\n        // Error is swallowed, not re-thrown (mutation's onError already fired)\n      } finally {\n        axios.interceptors.request.eject(interceptorId);\n      }\n    },\n    [onSubmit, mutation, transformSubmit, fieldMapping, form, resetOnSuccess],\n  );\n\n  const handleSubmit = form.handleSubmit(wrappedOnSubmit as any);\n\n  // Process children recursively to automatically wrap with Controller\n  const processedChildren = processChildren(children, form.control, isSubmitting, form.setValue, onCancel, form.reset);\n\n  return (\n    <FormProvider {...form}>\n      <form onSubmit={handleSubmit} className={cn('space-y-4', className)} {...props}>\n        {/* Top position error */}\n        {rootErrorPosition === 'top' && form.formState.errors.root && (\n          <Alert\n            variant=\"destructive\"\n            title={form.formState.errors.root.type || 'Error'}\n            description={form.formState.errors.root.message}\n            action={rootErrorAction}\n            className={cn('mb-4', rootErrorClassName)}\n          />\n        )}\n\n        {processedChildren}\n\n        {/* Bottom position error */}\n        {rootErrorPosition === 'bottom' && form.formState.errors.root && (\n          <Alert\n            variant=\"destructive\"\n            title={form.formState.errors.root.type || 'Error'}\n            description={form.formState.errors.root.message}\n            action={rootErrorAction}\n            className={cn('mt-4', rootErrorClassName)}\n          />\n        )}\n      </form>\n    </FormProvider>\n  );\n}\n\nForm.displayName = 'Form';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Form.js","sources":["../lib/utils/formHelpers.ts","../lib/components/Form/Form.tsx"],"sourcesContent":["import type { FieldPath, FieldValues, UseFormReturn } from 'react-hook-form';\n\n/**\n * Field mapping configuration for API error to form field mapping\n */\nexport interface FieldMapping {\n  [apiField: string]: string; // Maps API field names to form field names\n}\n\n/**\n * Axios error structure (or similar HTTP client error structure)\n */\ninterface AxiosLikeError {\n  response?: {\n    data?: unknown;\n  };\n}\n\n/**\n * RFC 9457 field error structure\n */\nexport interface FieldError {\n  field: string;\n  message: string;\n}\n\n/**\n * API error structure with field-specific errors\n * Supports RFC 9457 Problem Details format\n */\nexport interface ApiErrorResponse {\n  type?: string; // RFC 9457: URI reference identifying the problem type\n  title?: string; // RFC 9457: Short human-readable summary\n  status?: number; // RFC 9457: HTTP status code\n  label?: string; // Root error heading displayed to the user\n  detail?: string; // RFC 9457: Human-readable explanation\n  instance?: string; // RFC 9457: URI reference for the specific occurrence\n  errors?: FieldError[];\n}\n\n/**\n * Options for mapping API errors to form\n */\nexport interface MapApiErrorsOptions {\n  /**\n   * Field name mapping from API to form fields\n   */\n  fieldMapping?: FieldMapping;\n\n  /**\n   * Whether to set root error for general messages\n   */\n  setRootError?: boolean;\n}\n\n/**\n * Maps an RFC 9457 Problem Details API error response to react-hook-form errors.\n *\n * Root errors (`label`/`title` + `detail`) and field errors (`errors[]`) are\n * handled independently -- a single response can populate both the root error\n * alert and inline field errors at the same time.\n *\n * @param error - The error object from API response\n * @param form - The react-hook-form instance\n * @param options - Mapping options\n *\n * @example\n * ```tsx\n * try {\n *   await api.post('/login', data);\n * } catch (error) {\n *   mapApiErrorsToForm(error.response?.data, form, {\n *     fieldMapping: {\n *       'email_address': 'email',\n *       'password_hash': 'password'\n *     }\n *   });\n * }\n * ```\n */\nexport function mapApiErrorsToForm<TFieldValues extends FieldValues = FieldValues>(\n  error: unknown,\n  form: UseFormReturn<TFieldValues>,\n  options: MapApiErrorsOptions = {},\n): void {\n  const { fieldMapping = {}, setRootError = true } = options;\n\n  if (!error || typeof error !== 'object') {\n    if (setRootError) {\n      form.setError('root', {\n        type: 'Error',\n        message: 'An error occurred',\n      });\n    }\n    return;\n  }\n\n  // Extract error data from axios response structure\n  const axiosError = error as AxiosLikeError;\n  const errorData = axiosError.response?.data || error;\n  const apiError = errorData as ApiErrorResponse;\n\n  // Extract title/label for error heading (RFC 9457)\n  const errorTitle = apiError.label || apiError.title || 'Error';\n  const generalMessage = apiError.detail;\n\n  // Map field-specific errors (field is always present in RFC 9457)\n  let mappedFieldErrorsCount = 0;\n  if (apiError.errors && Array.isArray(apiError.errors)) {\n    for (const errorItem of apiError.errors) {\n      const formField = fieldMapping[errorItem.field] || errorItem.field;\n\n      form.setError(formField as FieldPath<TFieldValues>, {\n        type: 'manual',\n        message: errorItem.message,\n      });\n      mappedFieldErrorsCount += 1;\n    }\n  }\n\n  // Root error is shown only when no field errors are present\n  if (generalMessage && setRootError && mappedFieldErrorsCount === 0) {\n    form.setError('root', {\n      type: errorTitle,\n      message: generalMessage,\n    });\n  }\n}\n","import type { UseMutationResult } from '@tanstack/react-query';\nimport type React from 'react';\nimport { Children, cloneElement, Fragment, isValidElement, useCallback } from 'react';\nimport {\n  Controller,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n  FormProvider,\n  type UseFormReturn,\n} from 'react-hook-form';\nimport type { Country } from 'react-phone-number-input';\nimport { cn } from '../../../shadcn/utils';\nimport { axios } from '../../utils/axios';\nimport { type FieldMapping, mapApiErrorsToForm } from '../../utils/formHelpers';\nimport { Alert } from '../Alert';\nimport { Button } from '../Button';\nimport { Checkbox } from '../Checkbox';\nimport { CheckboxGroup } from '../CheckboxGroup';\nimport { DatePicker } from '../DatePicker';\nimport { DateTimePicker } from '../DateTimePicker';\nimport { PhoneField } from '../PhoneField';\nimport { RadioGroup } from '../RadioGroup';\nimport { Switch } from '../Switch';\nimport { UploadFile } from '../UploadFile';\n\n// Re-export Controller for explicit usage\nexport { Controller } from 'react-hook-form';\n\n/**\n * Recursively process children to wrap form fields with Controller\n * and inject loading state into submit buttons\n */\nfunction processChildren<\n  TFieldValues extends FieldValues = FieldValues,\n  _TContext = any,\n  TTransformedValues extends FieldValues | undefined = TFieldValues,\n>(\n  children: React.ReactNode,\n  control: ControllerProps<TFieldValues, FieldPath<TFieldValues>, TTransformedValues>['control'],\n  isSubmitting: boolean,\n  setValue: UseFormReturn<TFieldValues, _TContext, TTransformedValues>['setValue'],\n  onCancel?: () => void,\n  reset?: UseFormReturn<TFieldValues, _TContext, TTransformedValues>['reset'],\n): React.ReactNode {\n  return Children.map(children, (child) => {\n    // Handle non-element children (strings, numbers, null, etc.)\n    if (!isValidElement(child)) {\n      return child;\n    }\n\n    const childProps = child.props as any;\n    const isFragment = child.type === Fragment;\n\n    // Handle form fields with name prop (but not Fragments)\n    if (!isFragment && childProps.name && typeof childProps.name === 'string') {\n      const name = childProps.name as FieldPath<TFieldValues>;\n\n      return (\n        <Controller\n          key={name}\n          control={control}\n          name={name}\n          render={({ field, fieldState }) => {\n            // Check if this is a Checkbox, Switch, RadioGroup, or CheckboxGroup component\n            const isCheckbox = child.type === Checkbox;\n            const isSwitch = child.type === Switch;\n            const isRadioGroup = child.type === RadioGroup;\n            const isCheckboxGroup = child.type === CheckboxGroup;\n            const isPhone = child.type === PhoneField;\n            const isDatePicker = child.type === DatePicker;\n            const isDateTimePicker = child.type === DateTimePicker;\n\n            const fieldProps =\n              isCheckbox || isSwitch\n                ? {\n                    checked: field.value,\n                    onCheckedChange: field.onChange,\n                    onBlur: field.onBlur,\n                    ref: field.ref,\n                  }\n                : isRadioGroup || isCheckboxGroup\n                  ? {\n                      value: field.value,\n                      onValueChange: field.onChange,\n                      onBlur: field.onBlur,\n                    }\n                  : isDatePicker\n                    ? {\n                        value: field.value,\n                        onValueChange: field.onChange,\n                        onBlur: field.onBlur,\n                        ref: field.ref,\n                      }\n                    : isDateTimePicker\n                      ? {\n                          value: field.value,\n                          onValueChange: field.onChange,\n                          onBlur: field.onBlur,\n                          ref: field.ref,\n                        }\n                      : isPhone\n                        ? {\n                            ...field,\n                            onCountryChange: (country: Country | undefined) => {\n                              setValue(`${name}Country` as FieldPath<TFieldValues>, country as any);\n                            },\n                          }\n                        : field;\n\n            const isUploadFile = child.type === UploadFile;\n\n            return cloneElement(child, {\n              ...childProps,\n              ...fieldProps,\n              error: fieldState.error?.message || (fieldState.error ? 'Invalid' : undefined),\n              name: undefined, // Remove name to avoid passing it to the underlying input\n              ...(isUploadFile ? { isLoading: isSubmitting } : {}),\n            });\n          }}\n        />\n      );\n    }\n\n    // Handle cancel buttons - wire up form.reset() + onCancel callback\n    if (childProps['data-cancel'] && onCancel && reset) {\n      return cloneElement(child, {\n        ...childProps,\n        onClick: () => {\n          reset();\n          onCancel();\n        },\n      });\n    }\n\n    // Handle submit buttons - inject loading state via isLoading prop\n    if (childProps.type === 'submit') {\n      const isButtonElement =\n        child.type === Button || (typeof child.type === 'function' && (child.type as any).displayName === 'Button');\n\n      if (isButtonElement) {\n        return cloneElement(child, {\n          ...childProps,\n          isLoading: isSubmitting,\n        });\n      }\n    }\n\n    // Handle React Fragments - process their children directly\n    if (isFragment) {\n      return processChildren(childProps.children, control, isSubmitting, setValue, onCancel, reset);\n    }\n\n    // Recurse into children for container elements (divs, FieldGroups, etc.)\n    if (childProps.children != null) {\n      return cloneElement(child, {\n        ...childProps,\n        children: processChildren(childProps.children, control, isSubmitting, setValue, onCancel, reset),\n      });\n    }\n\n    // Return unchanged if no name prop and no children\n    return child;\n  });\n}\n\nexport interface FormProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TContext = any,\n  TTransformedValues extends FieldValues | undefined = TFieldValues,\n  TMutationData = unknown,\n  TMutationError = Error,\n  TMutationVariables = any,\n> extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {\n  /**\n   * The react-hook-form form instance\n   */\n  form: UseFormReturn<TFieldValues, TContext, TTransformedValues>;\n\n  /**\n   * Form submit handler - receives the transformed values if transformation is applied.\n   * Optional when using `mutation` prop.\n   */\n  onSubmit?: Parameters<UseFormReturn<TFieldValues, TContext, TTransformedValues>['handleSubmit']>[0];\n\n  /**\n   * Children elements - automatically wrapped with Controller if they have a name prop\n   */\n  children: React.ReactNode;\n\n  /**\n   * Position of the root error display\n   * @default 'bottom'\n   */\n  rootErrorPosition?: 'top' | 'bottom';\n\n  /**\n   * Additional classes for the root error display\n   */\n  rootErrorClassName?: string;\n\n  /**\n   * Action element rendered in the root error Alert (e.g. button or link)\n   * Positioned in the top-right corner using AlertAction\n   */\n  rootErrorAction?: React.ReactNode;\n\n  /**\n   * Field mapping for automatic API error mapping\n   * Maps API field names to form field names\n   */\n  fieldMapping?: FieldMapping;\n\n  /**\n   * TanStack Query mutation for automatic handling.\n   * When provided, the form will use `mutateAsync` to submit data and handle errors automatically.\n   * The mutation's own callbacks (onSuccess, onError, etc.) will fire automatically.\n   * Form only adds `mapApiErrorsToForm` as an extra error handling layer.\n   * Optional - you can use `onSubmit` instead for forms that don't use mutations.\n   */\n  mutation?: UseMutationResult<TMutationData, TMutationError, TMutationVariables, unknown>;\n\n  /**\n   * Transform form data to mutation variables before submission.\n   * Only used when `mutation` prop is provided.\n   */\n  transformSubmit?: (\n    data: TTransformedValues extends undefined ? TFieldValues : TTransformedValues,\n  ) => TMutationVariables;\n\n  /**\n   * Automatically calls form.reset() after a successful mutation.\n   * Set to false for \"edit\" forms where resetting clears pre-populated values.\n   * @default true\n   */\n  resetOnSuccess?: boolean;\n\n  /**\n   * Called when a cancel button (marked with data-cancel) is clicked.\n   * Form.reset() is called automatically before invoking this callback.\n   */\n  onCancel?: () => void;\n}\n\n/**\n * Smart Form component that automatically wraps children with Controller\n *\n * Usage with onSubmit:\n * ```tsx\n * <Form form={form} onSubmit={handleSubmit}>\n *   <TextField name=\"email\" label=\"Email\" description=\"Your email address\" />\n *   <PasswordField name=\"password\" label=\"Password\" />\n *   <Button type=\"submit\">Submit</Button>\n * </Form>\n * ```\n *\n * Usage with TanStack Query mutation:\n * ```tsx\n * const mutation = useMutation({\n *   mutationFn: (data) => api.post('/login', data),\n *   onSuccess: (data) => console.log('Success!', data),\n *   onError: (error) => console.error('Error!', error),\n * });\n *\n * <Form\n *   form={form}\n *   mutation={mutation}\n *   transformSubmit={(data) => ({ ...data, timestamp: Date.now() })}\n * >\n *   <TextField name=\"email\" label=\"Email\" />\n *   <Button type=\"submit\">Submit</Button>\n * </Form>\n * ```\n */\nexport function Form<\n  TFieldValues extends FieldValues = FieldValues,\n  TContext = any,\n  TTransformedValues extends FieldValues | undefined = TFieldValues,\n  TMutationData = unknown,\n  TMutationError = Error,\n  TMutationVariables = any,\n>({\n  form,\n  onSubmit,\n  children,\n  rootErrorPosition = 'bottom',\n  rootErrorClassName,\n  rootErrorAction,\n  fieldMapping,\n  mutation,\n  transformSubmit,\n  resetOnSuccess,\n  onCancel,\n  className,\n  ...props\n}: FormProps<TFieldValues, TContext, TTransformedValues, TMutationData, TMutationError, TMutationVariables>) {\n  // Compute isSubmitting from both form state and mutation state\n  const isSubmitting = form.formState.isSubmitting || (mutation?.isPending ?? false);\n\n  // Wrap the submit handler with automatic error mapping (always enabled)\n  // Form only adds mapApiErrorsToForm - the mutation's own callbacks fire automatically\n  const wrappedOnSubmit = useCallback(\n    async (data: TTransformedValues extends undefined ? TFieldValues : TTransformedValues) => {\n      // Suppress error toasts during form submission — Form handles errors inline\n      const interceptorId = axios.interceptors.request.use((config) => ({\n        ...config,\n        showErrorToast: false,\n      }));\n\n      try {\n        if (mutation) {\n          const variables = transformSubmit ? transformSubmit(data) : data;\n          // mutateAsync will trigger the mutation's onSuccess/onError callbacks\n          await mutation.mutateAsync(variables as TMutationVariables);\n        } else if (onSubmit) {\n          await onSubmit(data as any);\n        }\n\n        // Reset form after successful submission (default: true)\n        if (resetOnSuccess !== false) form.reset();\n      } catch (error) {\n        // Form's only job: map API errors to form fields\n        // mapApiErrorsToForm handles axios error structure extraction internally\n        mapApiErrorsToForm(error, form as any, {\n          fieldMapping,\n        });\n        // Log error for debugging\n        console.error('[Form Submission Error]', error);\n        // Error is swallowed, not re-thrown (mutation's onError already fired)\n      } finally {\n        axios.interceptors.request.eject(interceptorId);\n      }\n    },\n    [onSubmit, mutation, transformSubmit, fieldMapping, form, resetOnSuccess],\n  );\n\n  const handleSubmit = form.handleSubmit(wrappedOnSubmit as any);\n\n  // Process children recursively to automatically wrap with Controller\n  const processedChildren = processChildren(children, form.control, isSubmitting, form.setValue, onCancel, form.reset);\n\n  const childArray = Children.toArray(processedChildren);\n  const actionsIndex = childArray.findIndex(\n    (child) => isValidElement(child) && (child.type as { displayName?: string })?.displayName === 'DialogActions',\n  );\n  const hasActions = actionsIndex !== -1;\n  const bodyChildren = hasActions ? childArray.filter((_, index) => index !== actionsIndex) : processedChildren;\n  const actions = hasActions ? childArray[actionsIndex] : null;\n\n  const topError =\n    rootErrorPosition === 'top' && form.formState.errors.root ? (\n      <Alert\n        variant=\"destructive\"\n        title={form.formState.errors.root.type || 'Error'}\n        description={form.formState.errors.root.message}\n        action={rootErrorAction}\n        className={cn('mb-4', rootErrorClassName)}\n      />\n    ) : null;\n  const bottomError =\n    rootErrorPosition === 'bottom' && form.formState.errors.root ? (\n      <Alert\n        variant=\"destructive\"\n        title={form.formState.errors.root.type || 'Error'}\n        description={form.formState.errors.root.message}\n        action={rootErrorAction}\n        className={cn('mt-4', rootErrorClassName)}\n      />\n    ) : null;\n\n  return (\n    <FormProvider {...form}>\n      <form\n        onSubmit={handleSubmit}\n        className={cn(hasActions ? 'flex min-h-0 flex-1 flex-col' : 'space-y-4', className)}\n        {...props}\n      >\n        {hasActions ? (\n          <>\n            <div className=\"min-h-0 flex-1 space-y-4 overflow-y-auto overscroll-contain px-6 py-4 [scrollbar-gutter:stable]\">\n              {topError}\n              {bodyChildren}\n              {bottomError}\n            </div>\n            {actions}\n          </>\n        ) : (\n          <>\n            {topError}\n            {processedChildren}\n            {bottomError}\n          </>\n        )}\n      </form>\n    </FormProvider>\n  );\n}\n\nForm.displayName = 'Form';\n"],"names":["Fragment"],"mappings":";;;;;;;;;;;;;;;;AAgFO,SAAS,kBAAA,CACd,KAAA,EACA,IAAA,EACA,OAAA,GAA+B,EAAC,EAC1B;AACN,EAAA,MAAM,EAAE,YAAA,GAAe,EAAC,EAAG,YAAA,GAAe,MAAK,GAAI,OAAA;AAEnD,EAAA,IAAI,CAAC,KAAA,IAAS,OAAO,KAAA,KAAU,QAAA,EAAU;AACvC,IAAA,IAAI,YAAA,EAAc;AAChB,MAAA,IAAA,CAAK,SAAS,MAAA,EAAQ;AAAA,QACpB,IAAA,EAAM,OAAA;AAAA,QACN,OAAA,EAAS;AAAA,OACV,CAAA;AAAA,IACH;AACA,IAAA;AAAA,EACF;AAGA,EAAA,MAAM,UAAA,GAAa,KAAA;AACnB,EAAA,MAAM,SAAA,GAAY,UAAA,CAAW,QAAA,EAAU,IAAA,IAAQ,KAAA;AAC/C,EAAA,MAAM,QAAA,GAAW,SAAA;AAGjB,EAAA,MAAM,UAAA,GAAa,QAAA,CAAS,KAAA,IAAS,QAAA,CAAS,KAAA,IAAS,OAAA;AACvD,EAAA,MAAM,iBAAiB,QAAA,CAAS,MAAA;AAGhC,EAAA,IAAI,sBAAA,GAAyB,CAAA;AAC7B,EAAA,IAAI,SAAS,MAAA,IAAU,KAAA,CAAM,OAAA,CAAQ,QAAA,CAAS,MAAM,CAAA,EAAG;AACrD,IAAA,KAAA,MAAW,SAAA,IAAa,SAAS,MAAA,EAAQ;AACvC,MAAA,MAAM,SAAA,GAAY,YAAA,CAAa,SAAA,CAAU,KAAK,KAAK,SAAA,CAAU,KAAA;AAE7D,MAAA,IAAA,CAAK,SAAS,SAAA,EAAsC;AAAA,QAClD,IAAA,EAAM,QAAA;AAAA,QACN,SAAS,SAAA,CAAU;AAAA,OACpB,CAAA;AACD,MAAA,sBAAA,IAA0B,CAAA;AAAA,IAC5B;AAAA,EACF;AAGA,EAAA,IAAI,cAAA,IAAkB,YAAA,IAAgB,sBAAA,KAA2B,CAAA,EAAG;AAClE,IAAA,IAAA,CAAK,SAAS,MAAA,EAAQ;AAAA,MACpB,IAAA,EAAM,UAAA;AAAA,MACN,OAAA,EAAS;AAAA,KACV,CAAA;AAAA,EACH;AACF;;AC9FA,SAAS,gBAKP,QAAA,EACA,OAAA,EACA,YAAA,EACA,QAAA,EACA,UACA,KAAA,EACiB;AACjB,EAAA,OAAO,QAAA,CAAS,GAAA,CAAI,QAAA,EAAU,CAAC,KAAA,KAAU;AAEvC,IAAA,IAAI,CAAC,cAAA,CAAe,KAAK,CAAA,EAAG;AAC1B,MAAA,OAAO,KAAA;AAAA,IACT;AAEA,IAAA,MAAM,aAAa,KAAA,CAAM,KAAA;AACzB,IAAA,MAAM,UAAA,GAAa,MAAM,IAAA,KAASA,UAAAA;AAGlC,IAAA,IAAI,CAAC,UAAA,IAAc,UAAA,CAAW,QAAQ,OAAO,UAAA,CAAW,SAAS,QAAA,EAAU;AACzE,MAAA,MAAM,OAAO,UAAA,CAAW,IAAA;AAExB,MAAA,uBACE,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UAEC,OAAA;AAAA,UACA,IAAA;AAAA,UACA,MAAA,EAAQ,CAAC,EAAE,KAAA,EAAO,YAAW,KAAM;AAEjC,YAAA,MAAM,UAAA,GAAa,MAAM,IAAA,KAAS,QAAA;AAClC,YAAA,MAAM,QAAA,GAAW,MAAM,IAAA,KAAS,MAAA;AAChC,YAAA,MAAM,YAAA,GAAe,MAAM,IAAA,KAAS,UAAA;AACpC,YAAA,MAAM,eAAA,GAAkB,MAAM,IAAA,KAAS,aAAA;AACvC,YAAA,MAAM,OAAA,GAAU,MAAM,IAAA,KAAS,UAAA;AAC/B,YAAA,MAAM,YAAA,GAAe,MAAM,IAAA,KAAS,UAAA;AACpC,YAAA,MAAM,gBAAA,GAAmB,MAAM,IAAA,KAAS,cAAA;AAExC,YAAA,MAAM,UAAA,GACJ,cAAc,QAAA,GACV;AAAA,cACE,SAAS,KAAA,CAAM,KAAA;AAAA,cACf,iBAAiB,KAAA,CAAM,QAAA;AAAA,cACvB,QAAQ,KAAA,CAAM,MAAA;AAAA,cACd,KAAK,KAAA,CAAM;AAAA,aACb,GACA,gBAAgB,eAAA,GACd;AAAA,cACE,OAAO,KAAA,CAAM,KAAA;AAAA,cACb,eAAe,KAAA,CAAM,QAAA;AAAA,cACrB,QAAQ,KAAA,CAAM;AAAA,gBAEhB,YAAA,GACE;AAAA,cACE,OAAO,KAAA,CAAM,KAAA;AAAA,cACb,eAAe,KAAA,CAAM,QAAA;AAAA,cACrB,QAAQ,KAAA,CAAM,MAAA;AAAA,cACd,KAAK,KAAA,CAAM;AAAA,gBAEb,gBAAA,GACE;AAAA,cACE,OAAO,KAAA,CAAM,KAAA;AAAA,cACb,eAAe,KAAA,CAAM,QAAA;AAAA,cACrB,QAAQ,KAAA,CAAM,MAAA;AAAA,cACd,KAAK,KAAA,CAAM;AAAA,gBAEb,OAAA,GACE;AAAA,cACE,GAAG,KAAA;AAAA,cACH,eAAA,EAAiB,CAAC,OAAA,KAAiC;AACjD,gBAAA,QAAA,CAAS,CAAA,EAAG,IAAI,CAAA,OAAA,CAAA,EAAsC,OAAc,CAAA;AAAA,cACtE;AAAA,aACF,GACA,KAAA;AAEd,YAAA,MAAM,YAAA,GAAe,MAAM,IAAA,KAAS,UAAA;AAEpC,YAAA,OAAO,aAAa,KAAA,EAAO;AAAA,cACzB,GAAG,UAAA;AAAA,cACH,GAAG,UAAA;AAAA,cACH,OAAO,UAAA,CAAW,KAAA,EAAO,OAAA,KAAY,UAAA,CAAW,QAAQ,SAAA,GAAY,MAAA,CAAA;AAAA,cACpE,IAAA,EAAM,MAAA;AAAA;AAAA,cACN,GAAI,YAAA,GAAe,EAAE,SAAA,EAAW,YAAA,KAAiB;AAAC,aACnD,CAAA;AAAA,UACH;AAAA,SAAA;AAAA,QA3DK;AAAA,OA4DP;AAAA,IAEJ;AAGA,IAAA,IAAI,UAAA,CAAW,aAAa,CAAA,IAAK,QAAA,IAAY,KAAA,EAAO;AAClD,MAAA,OAAO,aAAa,KAAA,EAAO;AAAA,QACzB,GAAG,UAAA;AAAA,QACH,SAAS,MAAM;AACb,UAAA,KAAA,EAAM;AACN,UAAA,QAAA,EAAS;AAAA,QACX;AAAA,OACD,CAAA;AAAA,IACH;AAGA,IAAA,IAAI,UAAA,CAAW,SAAS,QAAA,EAAU;AAChC,MAAA,MAAM,eAAA,GACJ,KAAA,CAAM,IAAA,KAAS,MAAA,IAAW,OAAO,MAAM,IAAA,KAAS,UAAA,IAAe,KAAA,CAAM,IAAA,CAAa,WAAA,KAAgB,QAAA;AAEpG,MAAA,IAAI,eAAA,EAAiB;AACnB,QAAA,OAAO,aAAa,KAAA,EAAO;AAAA,UACzB,GAAG,UAAA;AAAA,UACH,SAAA,EAAW;AAAA,SACZ,CAAA;AAAA,MACH;AAAA,IACF;AAGA,IAAA,IAAI,UAAA,EAAY;AACd,MAAA,OAAO,gBAAgB,UAAA,CAAW,QAAA,EAAU,SAAS,YAAA,EAAc,QAAA,EAAU,UAAU,KAAK,CAAA;AAAA,IAC9F;AAGA,IAAA,IAAI,UAAA,CAAW,YAAY,IAAA,EAAM;AAC/B,MAAA,OAAO,aAAa,KAAA,EAAO;AAAA,QACzB,GAAG,UAAA;AAAA,QACH,QAAA,EAAU,gBAAgB,UAAA,CAAW,QAAA,EAAU,SAAS,YAAA,EAAc,QAAA,EAAU,UAAU,KAAK;AAAA,OAChG,CAAA;AAAA,IACH;AAGA,IAAA,OAAO,KAAA;AAAA,EACT,CAAC,CAAA;AACH;AA8GO,SAAS,IAAA,CAOd;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,iBAAA,GAAoB,QAAA;AAAA,EACpB,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA;AAAA,EACA,cAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA6G;AAE3G,EAAA,MAAM,YAAA,GAAe,IAAA,CAAK,SAAA,CAAU,YAAA,KAAiB,UAAU,SAAA,IAAa,KAAA,CAAA;AAI5E,EAAA,MAAM,eAAA,GAAkB,WAAA;AAAA,IACtB,OAAO,IAAA,KAAmF;AAExF,MAAA,MAAM,gBAAgB,KAAA,CAAM,YAAA,CAAa,OAAA,CAAQ,GAAA,CAAI,CAAC,MAAA,MAAY;AAAA,QAChE,GAAG,MAAA;AAAA,QACH,cAAA,EAAgB;AAAA,OAClB,CAAE,CAAA;AAEF,MAAA,IAAI;AACF,QAAA,IAAI,QAAA,EAAU;AACZ,UAAA,MAAM,SAAA,GAAY,eAAA,GAAkB,eAAA,CAAgB,IAAI,CAAA,GAAI,IAAA;AAE5D,UAAA,MAAM,QAAA,CAAS,YAAY,SAA+B,CAAA;AAAA,QAC5D,WAAW,QAAA,EAAU;AACnB,UAAA,MAAM,SAAS,IAAW,CAAA;AAAA,QAC5B;AAGA,QAAA,IAAI,cAAA,KAAmB,KAAA,EAAO,IAAA,CAAK,KAAA,EAAM;AAAA,MAC3C,SAAS,KAAA,EAAO;AAGd,QAAA,kBAAA,CAAmB,OAAO,IAAA,EAAa;AAAA,UACrC;AAAA,SACD,CAAA;AAED,QAAA,OAAA,CAAQ,KAAA,CAAM,2BAA2B,KAAK,CAAA;AAAA,MAEhD,CAAA,SAAE;AACA,QAAA,KAAA,CAAM,YAAA,CAAa,OAAA,CAAQ,KAAA,CAAM,aAAa,CAAA;AAAA,MAChD;AAAA,IACF,CAAA;AAAA,IACA,CAAC,QAAA,EAAU,QAAA,EAAU,eAAA,EAAiB,YAAA,EAAc,MAAM,cAAc;AAAA,GAC1E;AAEA,EAAA,MAAM,YAAA,GAAe,IAAA,CAAK,YAAA,CAAa,eAAsB,CAAA;AAG7D,EAAA,MAAM,iBAAA,GAAoB,eAAA,CAAgB,QAAA,EAAU,IAAA,CAAK,OAAA,EAAS,cAAc,IAAA,CAAK,QAAA,EAAU,QAAA,EAAU,IAAA,CAAK,KAAK,CAAA;AAEnH,EAAA,MAAM,UAAA,GAAa,QAAA,CAAS,OAAA,CAAQ,iBAAiB,CAAA;AACrD,EAAA,MAAM,eAAe,UAAA,CAAW,SAAA;AAAA,IAC9B,CAAC,KAAA,KAAU,cAAA,CAAe,KAAK,CAAA,IAAM,KAAA,CAAM,MAAmC,WAAA,KAAgB;AAAA,GAChG;AACA,EAAA,MAAM,aAAa,YAAA,KAAiB,EAAA;AACpC,EAAA,MAAM,YAAA,GAAe,aAAa,UAAA,CAAW,MAAA,CAAO,CAAC,CAAA,EAAG,KAAA,KAAU,KAAA,KAAU,YAAY,CAAA,GAAI,iBAAA;AAC5F,EAAA,MAAM,OAAA,GAAU,UAAA,GAAa,UAAA,CAAW,YAAY,CAAA,GAAI,IAAA;AAExD,EAAA,MAAM,WACJ,iBAAA,KAAsB,KAAA,IAAS,IAAA,CAAK,SAAA,CAAU,OAAO,IAAA,mBACnD,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAQ,aAAA;AAAA,MACR,KAAA,EAAO,IAAA,CAAK,SAAA,CAAU,MAAA,CAAO,KAAK,IAAA,IAAQ,OAAA;AAAA,MAC1C,WAAA,EAAa,IAAA,CAAK,SAAA,CAAU,MAAA,CAAO,IAAA,CAAK,OAAA;AAAA,MACxC,MAAA,EAAQ,eAAA;AAAA,MACR,SAAA,EAAW,EAAA,CAAG,MAAA,EAAQ,kBAAkB;AAAA;AAAA,GAC1C,GACE,IAAA;AACN,EAAA,MAAM,cACJ,iBAAA,KAAsB,QAAA,IAAY,IAAA,CAAK,SAAA,CAAU,OAAO,IAAA,mBACtD,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAQ,aAAA;AAAA,MACR,KAAA,EAAO,IAAA,CAAK,SAAA,CAAU,MAAA,CAAO,KAAK,IAAA,IAAQ,OAAA;AAAA,MAC1C,WAAA,EAAa,IAAA,CAAK,SAAA,CAAU,MAAA,CAAO,IAAA,CAAK,OAAA;AAAA,MACxC,MAAA,EAAQ,eAAA;AAAA,MACR,SAAA,EAAW,EAAA,CAAG,MAAA,EAAQ,kBAAkB;AAAA;AAAA,GAC1C,GACE,IAAA;AAEN,EAAA,uBACE,GAAA,CAAC,YAAA,EAAA,EAAc,GAAG,IAAA,EAChB,QAAA,kBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,QAAA,EAAU,YAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,UAAA,GAAa,8BAAA,GAAiC,aAAa,SAAS,CAAA;AAAA,MACjF,GAAG,KAAA;AAAA,MAEH,uCACC,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,iGAAA,EACZ,QAAA,EAAA;AAAA,UAAA,QAAA;AAAA,UACA,YAAA;AAAA,UACA;AAAA,SAAA,EACH,CAAA;AAAA,QACC;AAAA,OAAA,EACH,oBAEA,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,iBAAA;AAAA,QACA;AAAA,OAAA,EACH;AAAA;AAAA,GAEJ,EACF,CAAA;AAEJ;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}

package/dist/Progress.js

@@ -1,8 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { forwardRef } from 'react';
-import { c as createContextScope } from './index33.js';
-import { P as Primitive } from './index29.js';
+import { c as createContextScope } from './index34.js';
+import { P as Primitive } from './index30.js';
 import { c as cn } from './utils.js';
 
 var PROGRESS_NAME = "Progress";

package/dist/RadioGroup.js

@@ -8,8 +8,8 @@ import { u as useComposedRefs } from './index11.js';
 import { c as createContextScope } from './index19.js';
 import { R as Root, c as createRovingFocusGroupScope, I as Item } from './index20.js';
 import { u as useDirection } from './index22.js';
-import { u as useSize } from './index35.js';
-import { u as usePrevious } from './index34.js';
+import { u as useSize } from './index36.js';
+import { u as usePrevious } from './index35.js';
 import { P as Presence } from './index21.js';
 
 var RADIO_NAME = "Radio";

package/dist/Sidebar.js

@@ -6,7 +6,7 @@ import { forwardRef, useState, useCallback, useEffect, useMemo, useRef, createCo
 import { u as useIsMobile } from './useIsMobile.js';
 import { c as cn } from './utils.js';
 import { T as TooltipProvider, a as Tooltip, b as TooltipTrigger, c as TooltipContent } from './tooltip.js';
-import { R as Root, P as Portal, C as Content, a as Close, b as Title, D as Description, O as Overlay } from './index30.js';
+import { R as Root, P as Portal, C as Content, a as Close, b as Title, D as Description, O as Overlay } from './index31.js';
 import { X } from './x.js';
 import { D as DropdownMenu, a as DropdownMenuTrigger, b as DropdownMenuContent, e as DropdownMenuLabel, c as DropdownMenuItem } from './dropdown-menu.js';
 import { c as createLucideIcon } from './createLucideIcon.js';

package/dist/Switch.js

@@ -5,8 +5,8 @@ import { F as Field, e as FieldLabel, c as FieldError } from './field.js';
 import { u as useControllableState, P as Primitive, c as composeEventHandlers } from './index18.js';
 import { u as useComposedRefs } from './index11.js';
 import { c as createContextScope } from './index19.js';
-import { u as usePrevious } from './index34.js';
-import { u as useSize } from './index35.js';
+import { u as usePrevious } from './index35.js';
+import { u as useSize } from './index36.js';
 import { c as cn } from './utils.js';
 
 var SWITCH_NAME = "Switch";

package/dist/TabsSkeleton.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { C as Content, L as List, T as Trigger, R as Root2 } from './index17.js';
 import { useId, useState } from 'react';
 import { c as cn } from './utils.js';
-import { L as LayoutGroup } from './index37.js';
+import { L as LayoutGroup } from './index38.js';
 import { m as motion, A as AnimatePresence } from './proxy.js';
 import { S as Skeleton } from './Skeleton.js';
 

package/dist/Toggle.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { R as Root } from './index32.js';
+import { R as Root } from './index33.js';
 import { c as cva } from './index8.js';
 import { c as cn } from './utils.js';
 

package/dist/assets/quantum-ui.css

@@ -1552,6 +1552,10 @@ select:-webkit-autofill:active {
     margin-inline: calc(var(--spacing) * -1);
   }
 
+  .-mx-6 {
+    margin-inline: calc(var(--spacing) * -6);
+  }
+
   .mx-0 {
     margin-inline: calc(var(--spacing) * 0);
   }
@@ -1972,14 +1976,14 @@ select:-webkit-autofill:active {
     max-height: calc(var(--spacing) * 60);
   }
 
-  .max-h-64 {
-    max-height: calc(var(--spacing) * 64);
-  }
-
   .max-h-80 {
     max-height: calc(var(--spacing) * 80);
   }
 
+  .max-h-\[95vh\] {
+    max-height: 95vh;
+  }
+
   .max-h-\[300px\] {
     max-height: 300px;
   }
@@ -2004,6 +2008,10 @@ select:-webkit-autofill:active {
     min-height: calc(var(--spacing) * 16);
   }
 
+  .min-h-32 {
+    min-height: calc(var(--spacing) * 32);
+  }
+
   .min-h-72 {
     min-height: calc(var(--spacing) * 72);
   }
@@ -2666,6 +2674,10 @@ select:-webkit-autofill:active {
     justify-content: flex-start;
   }
 
+  .gap-0 {
+    gap: calc(var(--spacing) * 0);
+  }
+
   .gap-0\.5 {
     gap: calc(var(--spacing) * .5);
   }
@@ -2855,6 +2867,10 @@ select:-webkit-autofill:active {
     overscroll-behavior: auto;
   }
 
+  .overscroll-contain {
+    overscroll-behavior: contain;
+  }
+
   .rounded {
     border-radius: .25rem;
   }
@@ -3446,7 +3462,17 @@ select:-webkit-autofill:active {
     background-color: #0000;
   }
 
-  .bg-warning, .bg-warning\/15 {
+  .bg-warning, .bg-warning\/10 {
+    background-color: var(--warning);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-warning\/10 {
+      background-color: color-mix(in oklab, var(--warning) 10%, transparent);
+    }
+  }
+
+  .bg-warning\/15 {
     background-color: var(--warning);
   }
 
@@ -3662,6 +3688,10 @@ select:-webkit-autofill:active {
     padding-top: calc(var(--spacing) * 4);
   }
 
+  .pt-6 {
+    padding-top: calc(var(--spacing) * 6);
+  }
+
   .pt-16 {
     padding-top: calc(var(--spacing) * 16);
   }
@@ -3706,6 +3736,10 @@ select:-webkit-autofill:active {
     padding-bottom: calc(var(--spacing) * 4);
   }
 
+  .pb-6 {
+    padding-bottom: calc(var(--spacing) * 6);
+  }
+
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
@@ -4366,6 +4400,10 @@ select:-webkit-autofill:active {
     -moz-appearance: textfield;
   }
 
+  .\[scrollbar-gutter\:stable\] {
+    scrollbar-gutter: stable;
+  }
+
   .\[text-decoration\:underline_line-through\] {
     text-decoration: underline line-through;
   }

package/dist/cells.js

@@ -21822,53 +21822,55 @@ function ManageViewsDialog({ tableSlug, open, onClose }) {
       if (!v) onClose();
     }
   };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     Dialog,
     {
       handle,
       icon: Settings2,
       title: "Manage Views",
       description: "Share or delete saved views for this table.",
-      footer: /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onClose, children: "Close" }),
-      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 py-2 max-h-64 overflow-y-auto", children: [
-        views.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground text-center py-4", children: "No saved views yet." }),
-        views.map((view) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded-md px-3 py-2 hover:bg-accent/50", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-sm truncate", children: view.name }),
-          view.isOwn && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon",
-                className: "size-7 text-muted-foreground hover:text-foreground",
-                title: view.isShared ? "Make private" : "Share with everyone",
-                onClick: () => shareMut.mutate({ id: view.id, isShared: !view.isShared }),
-                disabled: shareMut.isPending,
-                children: view.isShared ? /* @__PURE__ */ jsx(EyeOff, { className: "size-4" }) : /* @__PURE__ */ jsx(Share2, { className: "size-4" })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon",
-                className: "size-7 text-destructive hover:text-destructive",
-                onClick: async () => {
-                  const confirmed = await confirm({
-                    title: `Delete "${view.name}"?`,
-                    description: "This view will be permanently removed.",
-                    confirmLabel: "Delete",
-                    variant: "destructive"
-                  });
-                  if (confirmed) deleteMut.mutate(view.id);
-                },
-                disabled: deleteMut.isPending,
-                children: /* @__PURE__ */ jsx(Trash2, { className: "size-4" })
-              }
-            )
-          ] })
-        ] }, view.id))
-      ] })
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex max-h-80 min-h-32 flex-col gap-1 overflow-y-auto py-1", children: [
+          views.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground text-center py-4", children: "No saved views yet." }),
+          views.map((view) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded-md px-3 py-2 hover:bg-accent/50", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm truncate", children: view.name }),
+            view.isOwn && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "size-7 text-muted-foreground hover:text-foreground",
+                  title: view.isShared ? "Make private" : "Share with everyone",
+                  onClick: () => shareMut.mutate({ id: view.id, isShared: !view.isShared }),
+                  disabled: shareMut.isPending,
+                  children: view.isShared ? /* @__PURE__ */ jsx(EyeOff, { className: "size-4" }) : /* @__PURE__ */ jsx(Share2, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "size-7 text-destructive hover:text-destructive",
+                  onClick: async () => {
+                    const confirmed = await confirm({
+                      title: `Delete "${view.name}"?`,
+                      description: "This view will be permanently removed.",
+                      confirmLabel: "Delete",
+                      variant: "destructive"
+                    });
+                    if (confirmed) deleteMut.mutate(view.id);
+                  },
+                  disabled: deleteMut.isPending,
+                  children: /* @__PURE__ */ jsx(Trash2, { className: "size-4" })
+                }
+              )
+            ] })
+          ] }, view.id))
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "-mx-6 mt-4 flex flex-col-reverse gap-2 border-t px-6 pt-4 sm:flex-row sm:justify-end", children: /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onClose, children: "Close" }) })
+      ]
     }
   );
 }
@@ -22056,9 +22058,10 @@ function DataTableViewTabs({ slug }) {
       {
         handle: dirtyGuard,
         icon: TriangleAlert,
+        iconVariant: "warning",
         title: "Unsaved Changes",
         description: "This view has unsaved changes. What would you like to do?",
-        footer: /* @__PURE__ */ jsxs("div", { className: "flex gap-2 justify-end w-full", children: [
+        children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2 justify-end w-full", children: [
           /* @__PURE__ */ jsx(
             Button,
             {
@@ -22109,7 +22112,7 @@ const densityClasses = {
 };
 const MODE_HEIGHTS = {
   page: "calc(100vh - 280px)",
-  tab: "calc(100vh - 328px)",
+  tab: "calc(100vh - 320px)",
   compact: "calc(100vh - 570px)"
 };
 function buildNoResultsDescription(flags) {