@mastra/playground-ui 60.1.0 → 60.2.0-alpha.0

package/dist/keyboard/use-keydown.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-keydown.es.js","sources":["../../src/lib/keyboard/use-keydown.ts"],"sourcesContent":["import { useEffect, useRef, useState, type RefObject } from 'react';\n\nimport {\n  createKeyboardDispatcher,\n  isKeyboardConsumer,\n  matchesCombo,\n  parseKeyCombo,\n  type KeyboardLayer,\n  type ParsedKeyCombo,\n  type UseKeydownArgs,\n} from './keyboard-dispatcher';\nimport { useKeyboardScopeDepth, useKeyboardShortcutsContext } from './keyboard-shortcuts-context';\n\nexport { parseKeyCombo, parseKeyBinding, matchesCombo } from './keyboard-dispatcher';\nexport type { UseKeydownArgs, KeyStep, ParsedKeyBinding } from './keyboard-dispatcher';\n\nexport type UseKeydownOptions = {\n  /** Attach the listener to this element instead of `window`. */\n  target?: RefObject<HTMLElement | null>;\n  /** When `false`, no listener is attached. Defaults to `true`. */\n  enabled?: boolean;\n  /**\n   * Called before any combo is matched. Return `false` to leave the event\n   * untouched (no `preventDefault`, no handler). Runs on top of the built-in\n   * rule that leaves unmodified keys to editable fields and keyboard widgets,\n   * unless the listener targets that field directly.\n   */\n  shouldHandle?: (event: KeyboardEvent) => boolean;\n};\n\n/**\n * Binds keyboard shortcuts (see `UseKeydownArgs` for the syntax).\n *\n * Inside a `KeyboardShortcutsProvider`, bindings join a shared registry: the\n * nearest `KeyboardScope` decides which declaration wins when several bind the\n * same keys, and bindings are dropped as soon as the component unmounts.\n * Without a provider, or with a `target`, the hook listens on its own and no\n * shadowing takes place.\n */\nexport const useKeydown = (opts: UseKeydownArgs, options: UseKeydownOptions = {}) => {\n  const { enabled = true, target } = options;\n  const shortcuts = useKeyboardShortcutsContext();\n  const depth = useKeyboardScopeDepth();\n\n  // Kept fresh on every render so the dispatcher always calls the latest handlers.\n  const layerRef = useRef<KeyboardLayer>({ depth, bindings: opts, shouldHandle: options.shouldHandle });\n  layerRef.current.bindings = opts;\n  layerRef.current.shouldHandle = options.shouldHandle;\n  layerRef.current.depth = depth;\n\n  const shared = !target && shortcuts.status === 'ready' ? shortcuts.dispatcher : undefined;\n\n  useEffect(() => {\n    if (!enabled) return;\n    if (shared) return shared.register(layerRef.current);\n\n    const element: HTMLElement | Window | null = target ? (target.current ?? null) : window;\n    if (!element) return;\n\n    const dispatcher = createKeyboardDispatcher();\n    const unregister = dispatcher.register(layerRef.current);\n    const handleKeyDown = (event: Event) => {\n      if (event instanceof KeyboardEvent) dispatcher.handleKeydown(event);\n    };\n\n    element.addEventListener('keydown', handleKeyDown);\n    return () => {\n      element.removeEventListener('keydown', handleKeyDown);\n      unregister();\n      dispatcher.reset();\n    };\n  }, [enabled, target, shared]);\n};\n\nexport type UseTableKeydownArgs = {\n  /** Number of rows in the table. */\n  count: number;\n  /** The scroll/list container; keyboard shortcuts only fire when focus is inside it. */\n  containerRef: RefObject<HTMLElement | null>;\n  /** Rows moved by PageUp/PageDown. Defaults to 10. */\n  pageSize?: number;\n  /** Initially active row index. Defaults to 0. */\n  initialIndex?: number;\n  /** Called when a row should be activated (for non-interactive rows). */\n  onActivate?: (index: number) => void;\n  /** Called with the next index before focus moves (e.g. virtualizer.scrollToIndex). */\n  onNavigate?: (index: number) => void;\n  /**\n   * Also listen for ArrowUp/ArrowDown/PageUp/PageDown on `document`, so the\n   * list can be navigated before any row has focus. Keys are ignored when the\n   * event originates from an editable field, a keyboard widget (combobox, menu,\n   * listbox…) or an open dialog/popover. Enable on at most one list per page.\n   */\n  global?: boolean;\n};\n\nexport const useTableKeydown = ({\n  count,\n  containerRef,\n  pageSize = 10,\n  initialIndex = 0,\n  onActivate,\n  onNavigate,\n  global = false,\n}: UseTableKeydownArgs) => {\n  const [activeIndex, setActiveIndex] = useState(initialIndex);\n\n  const clamp = (index: number) => Math.min(Math.max(index, 0), Math.max(count - 1, 0));\n\n  const navigateTo = (index: number) => {\n    const next = clamp(index);\n    setActiveIndex(next);\n    onNavigate?.(next);\n\n    const rowElement = containerRef.current?.querySelector<HTMLElement>(`[data-row-index=\"${next}\"]`);\n    if (rowElement) {\n      rowElement.focus();\n      rowElement.scrollIntoView?.({ block: 'nearest' });\n    }\n  };\n\n  const combos: Array<[ParsedKeyCombo, () => void]> = [\n    [parseKeyCombo('mod+Home'), () => navigateTo(0)],\n    [parseKeyCombo('mod+End'), () => navigateTo(count - 1)],\n    [parseKeyCombo('ArrowUp'), () => navigateTo(activeIndex - 1)],\n    [parseKeyCombo('ArrowDown'), () => navigateTo(activeIndex + 1)],\n    [parseKeyCombo('PageUp'), () => navigateTo(activeIndex - pageSize)],\n    [parseKeyCombo('PageDown'), () => navigateTo(activeIndex + pageSize)],\n    [parseKeyCombo('Home'), () => navigateTo(0)],\n    [parseKeyCombo('End'), () => navigateTo(count - 1)],\n  ];\n\n  // Handled at row level (not via a container listener) so keyboard nav works\n  // even when the list mounts after the hook, e.g. inside a tab panel.\n  const handleRowKeyDown = (event: { nativeEvent: KeyboardEvent; preventDefault: () => void }) => {\n    for (const [combo, handler] of combos) {\n      if (matchesCombo(event.nativeEvent, combo)) {\n        event.preventDefault();\n        handler();\n        return;\n      }\n    }\n  };\n\n  // When focus is outside the list, the first ArrowUp/ArrowDown press lands on\n  // the current row instead of skipping past it.\n  const focusIsInList = () => containerRef.current?.contains(document.activeElement) ?? false;\n  const step = (delta: number) => navigateTo(focusIsInList() ? activeIndex + delta : activeIndex);\n\n  useKeydown(\n    {\n      ArrowUp: () => step(-1),\n      ArrowDown: () => step(1),\n      PageUp: () => navigateTo(activeIndex - pageSize),\n      PageDown: () => navigateTo(activeIndex + pageSize),\n    },\n    {\n      enabled: global,\n      shouldHandle: event => !event.defaultPrevented && count > 0 && !isKeyboardConsumer(event.target),\n    },\n  );\n\n  useEffect(() => {\n    if (activeIndex >= count) {\n      setActiveIndex(Math.max(count - 1, 0));\n    }\n  }, [activeIndex, count]);\n\n  const getRowProps = (index: number) => ({\n    tabIndex: index === activeIndex ? 0 : -1,\n    'data-row-index': index,\n    onFocus: () => setActiveIndex(index),\n    onKeyDown: handleRowKeyDown,\n  });\n\n  const getContainerProps = () => ({});\n\n  return {\n    activeIndex,\n    setActiveIndex,\n    activate: (index: number) => onActivate?.(index),\n    getRowProps,\n    getContainerProps,\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"use-keydown.es.js","sources":["../../src/lib/keyboard/use-keydown.ts"],"sourcesContent":["import { useEffect, useRef, useState, type RefObject } from 'react';\n\nimport {\n  createKeyboardDispatcher,\n  isKeyboardConsumer,\n  matchesCombo,\n  parseKeyCombo,\n  type KeyboardLayer,\n  type ParsedKeyCombo,\n  type UseKeydownArgs,\n} from './keyboard-dispatcher';\nimport { useKeyboardScopeDepth, useKeyboardShortcutsContext } from './keyboard-shortcuts-context';\n\nexport { parseKeyCombo, parseKeyBinding, matchesCombo } from './keyboard-dispatcher';\nexport type { UseKeydownArgs, KeyStep, ParsedKeyBinding } from './keyboard-dispatcher';\n\nexport type UseKeydownOptions = {\n  /** Attach the listener to this element instead of `window`. */\n  target?: RefObject<HTMLElement | null>;\n  /** When `false`, no listener is attached. Defaults to `true`. */\n  enabled?: boolean;\n  /**\n   * Called before any combo is matched. Return `false` to leave the event\n   * untouched (no `preventDefault`, no handler). Runs on top of the built-in\n   * rule that leaves unmodified keys to editable fields and keyboard widgets,\n   * unless the listener targets that field directly.\n   */\n  shouldHandle?: (event: KeyboardEvent) => boolean;\n  /**\n   * When `false`, holding a key runs its handler once instead of on every\n   * auto-repeat (repeats are still default-prevented). Use it for toggles.\n   * Defaults to `true`.\n   */\n  repeat?: boolean;\n};\n\n/**\n * Binds keyboard shortcuts (see `UseKeydownArgs` for the syntax).\n *\n * Inside a `KeyboardShortcutsProvider`, bindings join a shared registry: the\n * nearest `KeyboardScope` decides which declaration wins when several bind the\n * same keys, and bindings are dropped as soon as the component unmounts.\n * Without a provider, or with a `target`, the hook listens on its own and no\n * shadowing takes place.\n */\nexport const useKeydown = (opts: UseKeydownArgs, options: UseKeydownOptions = {}) => {\n  const { enabled = true, target } = options;\n  const shortcuts = useKeyboardShortcutsContext();\n  const depth = useKeyboardScopeDepth();\n\n  // Kept fresh on every render so the dispatcher always calls the latest handlers.\n  const layerRef = useRef<KeyboardLayer>({\n    depth,\n    bindings: opts,\n    shouldHandle: options.shouldHandle,\n    repeat: options.repeat,\n  });\n  layerRef.current.bindings = opts;\n  layerRef.current.shouldHandle = options.shouldHandle;\n  layerRef.current.repeat = options.repeat;\n  layerRef.current.depth = depth;\n\n  const shared = !target && shortcuts.status === 'ready' ? shortcuts.dispatcher : undefined;\n\n  useEffect(() => {\n    if (!enabled) return;\n    if (shared) return shared.register(layerRef.current);\n\n    const element: HTMLElement | Window | null = target ? (target.current ?? null) : window;\n    if (!element) return;\n\n    const dispatcher = createKeyboardDispatcher();\n    const unregister = dispatcher.register(layerRef.current);\n    const handleKeyDown = (event: Event) => {\n      if (event instanceof KeyboardEvent) dispatcher.handleKeydown(event);\n    };\n\n    element.addEventListener('keydown', handleKeyDown);\n    return () => {\n      element.removeEventListener('keydown', handleKeyDown);\n      unregister();\n      dispatcher.reset();\n    };\n  }, [enabled, target, shared]);\n};\n\nexport type UseTableKeydownArgs = {\n  /** Number of rows in the table. */\n  count: number;\n  /** The scroll/list container; keyboard shortcuts only fire when focus is inside it. */\n  containerRef: RefObject<HTMLElement | null>;\n  /** Rows moved by PageUp/PageDown. Defaults to 10. */\n  pageSize?: number;\n  /** Initially active row index. Defaults to 0. */\n  initialIndex?: number;\n  /** Called when a row should be activated (for non-interactive rows). */\n  onActivate?: (index: number) => void;\n  /** Called with the next index before focus moves (e.g. virtualizer.scrollToIndex). */\n  onNavigate?: (index: number) => void;\n  /**\n   * Also listen for ArrowUp/ArrowDown/PageUp/PageDown on `document`, so the\n   * list can be navigated before any row has focus. Keys are ignored when the\n   * event originates from an editable field, a keyboard widget (combobox, menu,\n   * listbox…) or an open dialog/popover. Enable on at most one list per page.\n   */\n  global?: boolean;\n};\n\nexport const useTableKeydown = ({\n  count,\n  containerRef,\n  pageSize = 10,\n  initialIndex = 0,\n  onActivate,\n  onNavigate,\n  global = false,\n}: UseTableKeydownArgs) => {\n  const [activeIndex, setActiveIndex] = useState(initialIndex);\n\n  const clamp = (index: number) => Math.min(Math.max(index, 0), Math.max(count - 1, 0));\n\n  const navigateTo = (index: number) => {\n    const next = clamp(index);\n    setActiveIndex(next);\n    onNavigate?.(next);\n\n    const rowElement = containerRef.current?.querySelector<HTMLElement>(`[data-row-index=\"${next}\"]`);\n    if (rowElement) {\n      rowElement.focus();\n      rowElement.scrollIntoView?.({ block: 'nearest' });\n    }\n  };\n\n  const combos: Array<[ParsedKeyCombo, () => void]> = [\n    [parseKeyCombo('mod+Home'), () => navigateTo(0)],\n    [parseKeyCombo('mod+End'), () => navigateTo(count - 1)],\n    [parseKeyCombo('ArrowUp'), () => navigateTo(activeIndex - 1)],\n    [parseKeyCombo('ArrowDown'), () => navigateTo(activeIndex + 1)],\n    [parseKeyCombo('PageUp'), () => navigateTo(activeIndex - pageSize)],\n    [parseKeyCombo('PageDown'), () => navigateTo(activeIndex + pageSize)],\n    [parseKeyCombo('Home'), () => navigateTo(0)],\n    [parseKeyCombo('End'), () => navigateTo(count - 1)],\n  ];\n\n  // Handled at row level (not via a container listener) so keyboard nav works\n  // even when the list mounts after the hook, e.g. inside a tab panel.\n  const handleRowKeyDown = (event: { nativeEvent: KeyboardEvent; preventDefault: () => void }) => {\n    for (const [combo, handler] of combos) {\n      if (matchesCombo(event.nativeEvent, combo)) {\n        event.preventDefault();\n        handler();\n        return;\n      }\n    }\n  };\n\n  // When focus is outside the list, the first ArrowUp/ArrowDown press lands on\n  // the current row instead of skipping past it.\n  const focusIsInList = () => containerRef.current?.contains(document.activeElement) ?? false;\n  const step = (delta: number) => navigateTo(focusIsInList() ? activeIndex + delta : activeIndex);\n\n  useKeydown(\n    {\n      ArrowUp: () => step(-1),\n      ArrowDown: () => step(1),\n      PageUp: () => navigateTo(activeIndex - pageSize),\n      PageDown: () => navigateTo(activeIndex + pageSize),\n    },\n    {\n      enabled: global,\n      shouldHandle: event => !event.defaultPrevented && count > 0 && !isKeyboardConsumer(event.target),\n    },\n  );\n\n  useEffect(() => {\n    if (activeIndex >= count) {\n      setActiveIndex(Math.max(count - 1, 0));\n    }\n  }, [activeIndex, count]);\n\n  const getRowProps = (index: number) => ({\n    tabIndex: index === activeIndex ? 0 : -1,\n    'data-row-index': index,\n    onFocus: () => setActiveIndex(index),\n    onKeyDown: handleRowKeyDown,\n  });\n\n  const getContainerProps = () => ({});\n\n  return {\n    activeIndex,\n    setActiveIndex,\n    activate: (index: number) => onActivate?.(index),\n    getRowProps,\n    getContainerProps,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist/layout/tabbed-container.cjs.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 require('../tabbed-container.css');const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const React = require('react');
-const combobox = require('../combobox-DJ0c4o4S.cjs');
-const dataList = require('../data-list-Y42KyuI1.cjs');
-const listSearch = require('../list-search-BzAIj0DB.cjs');
+const combobox = require('../combobox-RzEkcOuu.cjs');
+const dataList = require('../data-list-Bqf-fhMx.cjs');
+const listSearch = require('../list-search-CTGQJCh1.cjs');
 const tabsContent = require('../tabs-content-DnscxcLI.cjs');
 const tabsTab = require('../tabs-tab-BmIBFifi.cjs');
 const tabsRoot = require('../tabs-root-C-ePF1y9.cjs');

package/dist/layout/tabbed-container.es.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ListFilterIcon } from 'lucide-react';
 import { Children, isValidElement, useContext } from 'react';
-import { C as Combobox } from '../combobox-B15qTrWO.js';
-import { D as DataList } from '../data-list-CyeD_u-6.js';
-import { L as ListSearch } from '../list-search-DI1DH7vU.js';
+import { C as Combobox } from '../combobox-DKFPbNMB.js';
+import { D as DataList } from '../data-list-CEIYm7FY.js';
+import { L as ListSearch } from '../list-search-CmOCmTwL.js';
 import { T as TabContent } from '../tabs-content-CwbkTutf.js';
 import { T as Tab, a as TabsContext } from '../tabs-tab-DoPSW-1s.js';
 import { a as Tabs, T as TabList } from '../tabs-root-lrZZ3KwH.js';

package/dist/lib/form/components/boolean-field.cjs.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const checkbox = require('../../../checkbox-CI8JtZKS.cjs');
-const fieldBlock = require('../../../field-block-DtaPqBa3.cjs');
+const checkbox = require('../../../checkbox-Bkobte27.cjs');
+const field = require('../../../field-ip9xiOVa.cjs');
+require('../../../field-control-aria-WzMGs0A4.cjs');
 
-const BooleanField = ({ field, label, id, inputProps }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+const BooleanField = ({ field: field$1, label, inputProps }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
   /* @__PURE__ */ jsxRuntime.jsx(
     checkbox.Checkbox,
     {
-      id,
       onCheckedChange: (checked) => {
         const event = {
           target: {
@@ -20,11 +20,11 @@ const BooleanField = ({ field, label, id, inputProps }) => /* @__PURE__ */ jsxRu
         };
         inputProps.onChange(event);
       },
-      defaultChecked: field.default,
+      defaultChecked: field$1.default,
       disabled: inputProps.disabled || inputProps.readOnly
     }
   ),
-  /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.Label, { name: id, htmlFor: id, required: field.required, children: label })
+  /* @__PURE__ */ jsxRuntime.jsx(field.FieldLabel, { required: field$1.required, children: label })
 ] });
 
 exports.BooleanField = BooleanField;

package/dist/lib/form/components/boolean-field.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"boolean-field.cjs.js","sources":["../../../../src/lib/form/components/boolean-field.tsx"],"sourcesContent":["import type { AutoFormFieldProps } from '@autoform/react';\nimport React from 'react';\nimport { Checkbox } from '@/ds/components/Checkbox';\nimport { FieldBlock } from '@/ds/components/FormFieldBlocks';\n\nexport const BooleanField: React.FC<AutoFormFieldProps> = ({ field, label, id, inputProps }) => (\n  <div className=\"flex items-center space-x-2\">\n    <Checkbox\n      id={id}\n      onCheckedChange={checked => {\n        // react-hook-form expects an event object\n        const event = {\n          target: {\n            name: inputProps.name,\n            value: checked,\n          },\n        };\n        inputProps.onChange(event);\n      }}\n      defaultChecked={field.default}\n      disabled={inputProps.disabled || inputProps.readOnly}\n    />\n    <FieldBlock.Label name={id} htmlFor={id} required={field.required}>\n      {label}\n    </FieldBlock.Label>\n  </div>\n);\n"],"names":["jsxs","jsx","Checkbox","FieldBlock"],"mappings":";;;;;;;;AAKO,MAAM,YAAA,GAA6C,CAAC,EAAE,KAAA,EAAO,KAAA,EAAO,EAAA,EAAI,UAAA,EAAW,qBACxFA,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAAA,EACb,QAAA,EAAA;AAAA,kBAAAC,cAAA;AAAA,IAACC,iBAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,iBAAiB,CAAA,OAAA,KAAW;AAE1B,QAAA,MAAM,KAAA,GAAQ;AAAA,UACZ,MAAA,EAAQ;AAAA,YACN,MAAM,UAAA,CAAW,IAAA;AAAA,YACjB,KAAA,EAAO;AAAA;AACT,SACF;AACA,QAAA,UAAA,CAAW,SAAS,KAAK,CAAA;AAAA,MAC3B,CAAA;AAAA,MACA,gBAAgB,KAAA,CAAM,OAAA;AAAA,MACtB,QAAA,EAAU,UAAA,CAAW,QAAA,IAAY,UAAA,CAAW;AAAA;AAAA,GAC9C;AAAA,kBACAD,cAAA,CAACE,qBAAA,CAAW,KAAA,EAAX,EAAiB,IAAA,EAAM,EAAA,EAAI,OAAA,EAAS,EAAA,EAAI,QAAA,EAAU,KAAA,CAAM,QAAA,EACtD,QAAA,EAAA,KAAA,EACH;AAAA,CAAA,EACF;;;;"}
+{"version":3,"file":"boolean-field.cjs.js","sources":["../../../../src/lib/form/components/boolean-field.tsx"],"sourcesContent":["import type { AutoFormFieldProps } from '@autoform/react';\nimport React from 'react';\nimport { Checkbox } from '@/ds/components/Checkbox';\nimport { FieldLabel } from '@/ds/components/Field';\n\nexport const BooleanField: React.FC<AutoFormFieldProps> = ({ field, label, inputProps }) => (\n  <div className=\"flex items-center space-x-2\">\n    <Checkbox\n      onCheckedChange={checked => {\n        // react-hook-form expects an event object\n        const event = {\n          target: {\n            name: inputProps.name,\n            value: checked,\n          },\n        };\n        inputProps.onChange(event);\n      }}\n      defaultChecked={field.default}\n      disabled={inputProps.disabled || inputProps.readOnly}\n    />\n    <FieldLabel required={field.required}>{label}</FieldLabel>\n  </div>\n);\n"],"names":["field","jsxs","jsx","Checkbox","FieldLabel"],"mappings":";;;;;;;;;AAKO,MAAM,YAAA,GAA6C,CAAC,SAAEA,OAAA,EAAO,KAAA,EAAO,YAAW,qBACpFC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAAA,EACb,QAAA,EAAA;AAAA,kBAAAC,cAAA;AAAA,IAACC,iBAAA;AAAA,IAAA;AAAA,MACC,iBAAiB,CAAA,OAAA,KAAW;AAE1B,QAAA,MAAM,KAAA,GAAQ;AAAA,UACZ,MAAA,EAAQ;AAAA,YACN,MAAM,UAAA,CAAW,IAAA;AAAA,YACjB,KAAA,EAAO;AAAA;AACT,SACF;AACA,QAAA,UAAA,CAAW,SAAS,KAAK,CAAA;AAAA,MAC3B,CAAA;AAAA,MACA,gBAAgBH,OAAA,CAAM,OAAA;AAAA,MACtB,QAAA,EAAU,UAAA,CAAW,QAAA,IAAY,UAAA,CAAW;AAAA;AAAA,GAC9C;AAAA,kBACAE,cAAA,CAACE,gBAAA,EAAA,EAAW,QAAA,EAAUJ,OAAA,CAAM,UAAW,QAAA,EAAA,KAAA,EAAM;AAAA,CAAA,EAC/C;;;;"}

package/dist/lib/form/components/boolean-field.es.js

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { C as Checkbox } from '../../../checkbox-CQedzgsi.js';
-import { F as FieldBlock } from '../../../field-block--PeppIRb.js';
+import { C as Checkbox } from '../../../checkbox-DcNIsz5L.js';
+import { e as FieldLabel } from '../../../field-BtvEQ68O.js';
+import '../../../field-control-aria-DB6y41tQ.js';
 
-const BooleanField = ({ field, label, id, inputProps }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+const BooleanField = ({ field, label, inputProps }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
   /* @__PURE__ */ jsx(
     Checkbox,
     {
-      id,
       onCheckedChange: (checked) => {
         const event = {
           target: {
@@ -20,7 +20,7 @@ const BooleanField = ({ field, label, id, inputProps }) => /* @__PURE__ */ jsxs(
       disabled: inputProps.disabled || inputProps.readOnly
     }
   ),
-  /* @__PURE__ */ jsx(FieldBlock.Label, { name: id, htmlFor: id, required: field.required, children: label })
+  /* @__PURE__ */ jsx(FieldLabel, { required: field.required, children: label })
 ] });
 
 export { BooleanField };

package/dist/lib/form/components/boolean-field.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"boolean-field.es.js","sources":["../../../../src/lib/form/components/boolean-field.tsx"],"sourcesContent":["import type { AutoFormFieldProps } from '@autoform/react';\nimport React from 'react';\nimport { Checkbox } from '@/ds/components/Checkbox';\nimport { FieldBlock } from '@/ds/components/FormFieldBlocks';\n\nexport const BooleanField: React.FC<AutoFormFieldProps> = ({ field, label, id, inputProps }) => (\n  <div className=\"flex items-center space-x-2\">\n    <Checkbox\n      id={id}\n      onCheckedChange={checked => {\n        // react-hook-form expects an event object\n        const event = {\n          target: {\n            name: inputProps.name,\n            value: checked,\n          },\n        };\n        inputProps.onChange(event);\n      }}\n      defaultChecked={field.default}\n      disabled={inputProps.disabled || inputProps.readOnly}\n    />\n    <FieldBlock.Label name={id} htmlFor={id} required={field.required}>\n      {label}\n    </FieldBlock.Label>\n  </div>\n);\n"],"names":[],"mappings":";;;;AAKO,MAAM,YAAA,GAA6C,CAAC,EAAE,KAAA,EAAO,KAAA,EAAO,EAAA,EAAI,UAAA,EAAW,qBACxF,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAAA,EACb,QAAA,EAAA;AAAA,kBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,iBAAiB,CAAA,OAAA,KAAW;AAE1B,QAAA,MAAM,KAAA,GAAQ;AAAA,UACZ,MAAA,EAAQ;AAAA,YACN,MAAM,UAAA,CAAW,IAAA;AAAA,YACjB,KAAA,EAAO;AAAA;AACT,SACF;AACA,QAAA,UAAA,CAAW,SAAS,KAAK,CAAA;AAAA,MAC3B,CAAA;AAAA,MACA,gBAAgB,KAAA,CAAM,OAAA;AAAA,MACtB,QAAA,EAAU,UAAA,CAAW,QAAA,IAAY,UAAA,CAAW;AAAA;AAAA,GAC9C;AAAA,kBACA,GAAA,CAAC,UAAA,CAAW,KAAA,EAAX,EAAiB,IAAA,EAAM,EAAA,EAAI,OAAA,EAAS,EAAA,EAAI,QAAA,EAAU,KAAA,CAAM,QAAA,EACtD,QAAA,EAAA,KAAA,EACH;AAAA,CAAA,EACF;;;;"}
+{"version":3,"file":"boolean-field.es.js","sources":["../../../../src/lib/form/components/boolean-field.tsx"],"sourcesContent":["import type { AutoFormFieldProps } from '@autoform/react';\nimport React from 'react';\nimport { Checkbox } from '@/ds/components/Checkbox';\nimport { FieldLabel } from '@/ds/components/Field';\n\nexport const BooleanField: React.FC<AutoFormFieldProps> = ({ field, label, inputProps }) => (\n  <div className=\"flex items-center space-x-2\">\n    <Checkbox\n      onCheckedChange={checked => {\n        // react-hook-form expects an event object\n        const event = {\n          target: {\n            name: inputProps.name,\n            value: checked,\n          },\n        };\n        inputProps.onChange(event);\n      }}\n      defaultChecked={field.default}\n      disabled={inputProps.disabled || inputProps.readOnly}\n    />\n    <FieldLabel required={field.required}>{label}</FieldLabel>\n  </div>\n);\n"],"names":[],"mappings":";;;;;AAKO,MAAM,YAAA,GAA6C,CAAC,EAAE,KAAA,EAAO,KAAA,EAAO,YAAW,qBACpF,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAAA,EACb,QAAA,EAAA;AAAA,kBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,iBAAiB,CAAA,OAAA,KAAW;AAE1B,QAAA,MAAM,KAAA,GAAQ;AAAA,UACZ,MAAA,EAAQ;AAAA,YACN,MAAM,UAAA,CAAW,IAAA;AAAA,YACjB,KAAA,EAAO;AAAA;AACT,SACF;AACA,QAAA,UAAA,CAAW,SAAS,KAAK,CAAA;AAAA,MAC3B,CAAA;AAAA,MACA,gBAAgB,KAAA,CAAM,OAAA;AAAA,MACtB,QAAA,EAAU,UAAA,CAAW,QAAA,IAAY,UAAA,CAAW;AAAA;AAAA,GAC9C;AAAA,kBACA,GAAA,CAAC,UAAA,EAAA,EAAW,QAAA,EAAU,KAAA,CAAM,UAAW,QAAA,EAAA,KAAA,EAAM;AAAA,CAAA,EAC/C;;;;"}

package/dist/lib/form/components/custom-array-field.cjs.js

@@ -7,7 +7,7 @@ require('@autoform/core');
 require('@autoform/react');
 require('react-hook-form');
 require('../field-context.cjs.js');
-const lib_form_components_customArrayField = require('../../../custom-auto-form-field-Brfb-0Te.cjs');
+const lib_form_components_customArrayField = require('../../../custom-auto-form-field-DVse5pih.cjs');
 
 
 

package/dist/lib/form/components/custom-array-field.es.js

@@ -3,5 +3,5 @@ import '@autoform/core';
 import '@autoform/react';
 import 'react-hook-form';
 import '../field-context.es.js';
-export { a as CustomArrayField } from '../../../custom-auto-form-field-yEMBGXu-.js';
+export { a as CustomArrayField } from '../../../custom-auto-form-field-BvEhSH73.js';
 //# sourceMappingURL=custom-array-field.es.js.map

package/dist/lib/form/components/custom-auto-form-field.cjs.js

@@ -7,8 +7,7 @@ require('@autoform/core');
 require('@autoform/react');
 require('react');
 require('react-hook-form');
-const lib_form_components_customArrayField = require('../../../custom-auto-form-field-Brfb-0Te.cjs');
-require('../../../field-error-id-B3Z2Zu5y.cjs');
+const lib_form_components_customArrayField = require('../../../custom-auto-form-field-DVse5pih.cjs');
 
 
 

package/dist/lib/form/components/custom-auto-form-field.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"custom-auto-form-field.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
+{"version":3,"file":"custom-auto-form-field.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/dist/lib/form/components/custom-auto-form-field.es.js

@@ -3,6 +3,5 @@ import '@autoform/core';
 import '@autoform/react';
 import 'react';
 import 'react-hook-form';
-export { C as CustomAutoFormField } from '../../../custom-auto-form-field-yEMBGXu-.js';
-import '../../../field-error-id-D3yg1nBh.js';
+export { C as CustomAutoFormField } from '../../../custom-auto-form-field-BvEhSH73.js';
 //# sourceMappingURL=custom-auto-form-field.es.js.map

package/dist/lib/form/components/custom-auto-form-field.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"custom-auto-form-field.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"custom-auto-form-field.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/lib/form/components/custom-object-field.cjs.js

@@ -6,7 +6,7 @@ require('react/jsx-runtime');
 require('@autoform/core');
 require('@autoform/react');
 require('../field-context.cjs.js');
-const lib_form_components_customArrayField = require('../../../custom-auto-form-field-Brfb-0Te.cjs');
+const lib_form_components_customArrayField = require('../../../custom-auto-form-field-DVse5pih.cjs');
 
 
 

package/dist/lib/form/components/custom-object-field.es.js

@@ -2,5 +2,5 @@ import 'react/jsx-runtime';
 import '@autoform/core';
 import '@autoform/react';
 import '../field-context.es.js';
-export { b as CustomObjectField } from '../../../custom-auto-form-field-yEMBGXu-.js';
+export { b as CustomObjectField } from '../../../custom-auto-form-field-BvEhSH73.js';
 //# sourceMappingURL=custom-object-field.es.js.map

package/dist/lib/form/components/date-field.cjs.js

@@ -8,13 +8,16 @@ const lucideReact = require('lucide-react');
 const React = require('react');
 const Button = require('../../../Button-CXhSUBxN.cjs');
 const datePicker = require('../../../date-picker-dRZF8frf.cjs');
+const fieldControlAria = require('../../../field-control-aria-WzMGs0A4.cjs');
 const popover = require('../../../popover-lBqKiPtp.cjs');
+const primitives_formElement = require('../../../primitives/form-element.cjs.js');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 
-const DateField = ({ inputProps, field, error, id }) => {
+const DateField = ({ inputProps, field }) => {
   const { key, ...props } = inputProps;
   const [value, setValue] = React.useState(void 0);
   const [open, setOpen] = React.useState(false);
+  const fieldAria = fieldControlAria.useFieldControlAria();
   React.useEffect(() => {
     if (field.default) {
       const date = new Date(field.default);
@@ -43,10 +46,10 @@ const DateField = ({ inputProps, field, error, id }) => {
     /* @__PURE__ */ jsxRuntime.jsx(popover.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       Button.Button,
       {
-        id,
+        ...fieldAria,
         variant: "default",
         size: "lg",
-        className: utils_cn.cn("w-full", error ? "border-destructive-indicator" : ""),
+        className: utils_cn.cn("w-full", primitives_formElement.fieldTriggerErrorBorder),
         icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, {}),
         children: value ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground", children: dateFns.format(value, "PPP") }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Pick a date" })
       }

package/dist/lib/form/components/date-field.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-field.cjs.js","sources":["../../../../src/lib/form/components/date-field.tsx"],"sourcesContent":["import type { AutoFormFieldProps } from '@autoform/react';\nimport { format, isValid } from 'date-fns';\nimport { CalendarIcon, X } from 'lucide-react';\nimport React, { useState, useEffect } from 'react';\nimport { Button } from '@/ds/components/Button';\nimport { DatePicker } from '@/ds/components/DateTimePicker';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover';\nimport { cn } from '@/utils/cn';\n\nexport const DateField: React.FC<AutoFormFieldProps> = ({ inputProps, field, error, id }) => {\n  const { key, ...props } = inputProps;\n  const [value, setValue] = useState<Date | undefined>(undefined);\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    if (field.default) {\n      const date = new Date(field.default);\n      if (isValid(date)) {\n        setValue(date);\n      }\n    }\n  }, [field]);\n\n  const handleSelect = (date: Date | undefined) => {\n    setValue(date);\n    if (date) {\n      props.onChange({\n        target: { value: date.toISOString(), name: inputProps.name },\n      });\n    }\n    setOpen(false);\n  };\n\n  const handleClear = () => {\n    setValue(undefined);\n    props.onChange({\n      target: { value: '', name: inputProps.name },\n    });\n    setOpen(false);\n  };\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          id={id}\n          variant=\"default\"\n          size=\"lg\"\n          className={cn('w-full', error ? 'border-destructive-indicator' : '')}\n          icon={<CalendarIcon />}\n        >\n          {value ? (\n            <span className=\"text-foreground\">{format(value, 'PPP')}</span>\n          ) : (\n            <span className=\"text-muted-foreground\">Pick a date</span>\n          )}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto bg-muted p-0\" align=\"start\">\n        <DatePicker mode=\"single\" selected={value} onSelect={handleSelect} month={value} onMonthChange={setValue} />\n        {value && (\n          <div className=\"p-3 pt-0\">\n            <Button icon={<X />} variant=\"default\" size=\"lg\" className=\"w-full\" onClick={handleClear}>\n              Clear\n            </Button>\n          </div>\n        )}\n      </PopoverContent>\n    </Popover>\n  );\n};\n"],"names":["useState","useEffect","isValid","jsxs","Popover","jsx","PopoverTrigger","Button","cn","CalendarIcon","format","PopoverContent","DatePicker","X"],"mappings":"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"}
+{"version":3,"file":"date-field.cjs.js","sources":["../../../../src/lib/form/components/date-field.tsx"],"sourcesContent":["import type { AutoFormFieldProps } from '@autoform/react';\nimport { format, isValid } from 'date-fns';\nimport { CalendarIcon, X } from 'lucide-react';\nimport React, { useState, useEffect } from 'react';\nimport { Button } from '@/ds/components/Button';\nimport { DatePicker } from '@/ds/components/DateTimePicker';\nimport { useFieldControlAria } from '@/ds/components/Field';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover';\nimport { fieldTriggerErrorBorder } from '@/ds/primitives/form-element';\nimport { cn } from '@/utils/cn';\n\nexport const DateField: React.FC<AutoFormFieldProps> = ({ inputProps, field }) => {\n  const { key, ...props } = inputProps;\n  const [value, setValue] = useState<Date | undefined>(undefined);\n  const [open, setOpen] = useState(false);\n  const fieldAria = useFieldControlAria();\n\n  useEffect(() => {\n    if (field.default) {\n      const date = new Date(field.default);\n      if (isValid(date)) {\n        setValue(date);\n      }\n    }\n  }, [field]);\n\n  const handleSelect = (date: Date | undefined) => {\n    setValue(date);\n    if (date) {\n      props.onChange({\n        target: { value: date.toISOString(), name: inputProps.name },\n      });\n    }\n    setOpen(false);\n  };\n\n  const handleClear = () => {\n    setValue(undefined);\n    props.onChange({\n      target: { value: '', name: inputProps.name },\n    });\n    setOpen(false);\n  };\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          {...fieldAria}\n          variant=\"default\"\n          size=\"lg\"\n          className={cn('w-full', fieldTriggerErrorBorder)}\n          icon={<CalendarIcon />}\n        >\n          {value ? (\n            <span className=\"text-foreground\">{format(value, 'PPP')}</span>\n          ) : (\n            <span className=\"text-muted-foreground\">Pick a date</span>\n          )}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto bg-muted p-0\" align=\"start\">\n        <DatePicker mode=\"single\" selected={value} onSelect={handleSelect} month={value} onMonthChange={setValue} />\n        {value && (\n          <div className=\"p-3 pt-0\">\n            <Button icon={<X />} variant=\"default\" size=\"lg\" className=\"w-full\" onClick={handleClear}>\n              Clear\n            </Button>\n          </div>\n        )}\n      </PopoverContent>\n    </Popover>\n  );\n};\n"],"names":["useState","useFieldControlAria","useEffect","isValid","jsxs","Popover","jsx","PopoverTrigger","Button","cn","fieldTriggerErrorBorder","CalendarIcon","format","PopoverContent","DatePicker","X"],"mappings":"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"}

package/dist/lib/form/components/date-field.es.js

@@ -4,13 +4,16 @@ import { CalendarIcon, X } from 'lucide-react';
 import { useState, useEffect } from 'react';
 import { B as Button } from '../../../Button-D43ghVKt.js';
 import { D as DatePicker } from '../../../date-picker-DgWTsiJ7.js';
+import { u as useFieldControlAria } from '../../../field-control-aria-DB6y41tQ.js';
 import { P as Popover, b as PopoverTrigger, a as PopoverContent } from '../../../popover-Dg70UGyn.js';
+import { fieldTriggerErrorBorder } from '../../../primitives/form-element.es.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
 
-const DateField = ({ inputProps, field, error, id }) => {
+const DateField = ({ inputProps, field }) => {
   const { key, ...props } = inputProps;
   const [value, setValue] = useState(void 0);
   const [open, setOpen] = useState(false);
+  const fieldAria = useFieldControlAria();
   useEffect(() => {
     if (field.default) {
       const date = new Date(field.default);
@@ -39,10 +42,10 @@ const DateField = ({ inputProps, field, error, id }) => {
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
       Button,
       {
-        id,
+        ...fieldAria,
         variant: "default",
         size: "lg",
-        className: cn("w-full", error ? "border-destructive-indicator" : ""),
+        className: cn("w-full", fieldTriggerErrorBorder),
         icon: /* @__PURE__ */ jsx(CalendarIcon, {}),
         children: value ? /* @__PURE__ */ jsx("span", { className: "text-foreground", children: format(value, "PPP") }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Pick a date" })
       }

package/dist/lib/form/components/date-field.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-field.es.js","sources":["../../../../src/lib/form/components/date-field.tsx"],"sourcesContent":["import type { AutoFormFieldProps } from '@autoform/react';\nimport { format, isValid } from 'date-fns';\nimport { CalendarIcon, X } from 'lucide-react';\nimport React, { useState, useEffect } from 'react';\nimport { Button } from '@/ds/components/Button';\nimport { DatePicker } from '@/ds/components/DateTimePicker';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover';\nimport { cn } from '@/utils/cn';\n\nexport const DateField: React.FC<AutoFormFieldProps> = ({ inputProps, field, error, id }) => {\n  const { key, ...props } = inputProps;\n  const [value, setValue] = useState<Date | undefined>(undefined);\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    if (field.default) {\n      const date = new Date(field.default);\n      if (isValid(date)) {\n        setValue(date);\n      }\n    }\n  }, [field]);\n\n  const handleSelect = (date: Date | undefined) => {\n    setValue(date);\n    if (date) {\n      props.onChange({\n        target: { value: date.toISOString(), name: inputProps.name },\n      });\n    }\n    setOpen(false);\n  };\n\n  const handleClear = () => {\n    setValue(undefined);\n    props.onChange({\n      target: { value: '', name: inputProps.name },\n    });\n    setOpen(false);\n  };\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          id={id}\n          variant=\"default\"\n          size=\"lg\"\n          className={cn('w-full', error ? 'border-destructive-indicator' : '')}\n          icon={<CalendarIcon />}\n        >\n          {value ? (\n            <span className=\"text-foreground\">{format(value, 'PPP')}</span>\n          ) : (\n            <span className=\"text-muted-foreground\">Pick a date</span>\n          )}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto bg-muted p-0\" align=\"start\">\n        <DatePicker mode=\"single\" selected={value} onSelect={handleSelect} month={value} onMonthChange={setValue} />\n        {value && (\n          <div className=\"p-3 pt-0\">\n            <Button icon={<X />} variant=\"default\" size=\"lg\" className=\"w-full\" onClick={handleClear}>\n              Clear\n            </Button>\n          </div>\n        )}\n      </PopoverContent>\n    </Popover>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"date-field.es.js","sources":["../../../../src/lib/form/components/date-field.tsx"],"sourcesContent":["import type { AutoFormFieldProps } from '@autoform/react';\nimport { format, isValid } from 'date-fns';\nimport { CalendarIcon, X } from 'lucide-react';\nimport React, { useState, useEffect } from 'react';\nimport { Button } from '@/ds/components/Button';\nimport { DatePicker } from '@/ds/components/DateTimePicker';\nimport { useFieldControlAria } from '@/ds/components/Field';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover';\nimport { fieldTriggerErrorBorder } from '@/ds/primitives/form-element';\nimport { cn } from '@/utils/cn';\n\nexport const DateField: React.FC<AutoFormFieldProps> = ({ inputProps, field }) => {\n  const { key, ...props } = inputProps;\n  const [value, setValue] = useState<Date | undefined>(undefined);\n  const [open, setOpen] = useState(false);\n  const fieldAria = useFieldControlAria();\n\n  useEffect(() => {\n    if (field.default) {\n      const date = new Date(field.default);\n      if (isValid(date)) {\n        setValue(date);\n      }\n    }\n  }, [field]);\n\n  const handleSelect = (date: Date | undefined) => {\n    setValue(date);\n    if (date) {\n      props.onChange({\n        target: { value: date.toISOString(), name: inputProps.name },\n      });\n    }\n    setOpen(false);\n  };\n\n  const handleClear = () => {\n    setValue(undefined);\n    props.onChange({\n      target: { value: '', name: inputProps.name },\n    });\n    setOpen(false);\n  };\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          {...fieldAria}\n          variant=\"default\"\n          size=\"lg\"\n          className={cn('w-full', fieldTriggerErrorBorder)}\n          icon={<CalendarIcon />}\n        >\n          {value ? (\n            <span className=\"text-foreground\">{format(value, 'PPP')}</span>\n          ) : (\n            <span className=\"text-muted-foreground\">Pick a date</span>\n          )}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto bg-muted p-0\" align=\"start\">\n        <DatePicker mode=\"single\" selected={value} onSelect={handleSelect} month={value} onMonthChange={setValue} />\n        {value && (\n          <div className=\"p-3 pt-0\">\n            <Button icon={<X />} variant=\"default\" size=\"lg\" className=\"w-full\" onClick={handleClear}>\n              Clear\n            </Button>\n          </div>\n        )}\n      </PopoverContent>\n    </Popover>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/lib/form/components/discriminated-union-field.cjs.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const reactHookForm = require('react-hook-form');
-const lib_form_components_customArrayField = require('../../../custom-auto-form-field-Brfb-0Te.cjs');
+const lib_form_components_customArrayField = require('../../../custom-auto-form-field-DVse5pih.cjs');
 
 const DiscriminatedUnionField = ({ field, path }) => {
   const { watch } = reactHookForm.useFormContext();

package/dist/lib/form/components/discriminated-union-field.es.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useFormContext } from 'react-hook-form';
-import { C as CustomAutoFormField } from '../../../custom-auto-form-field-yEMBGXu-.js';
+import { C as CustomAutoFormField } from '../../../custom-auto-form-field-BvEhSH73.js';
 
 const DiscriminatedUnionField = ({ field, path }) => {
   const { watch } = useFormContext();

package/dist/lib/form/components/field-wrapper.cjs.js

@@ -3,17 +3,38 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const fieldBlock = require('../../../field-block-DtaPqBa3.cjs');
-const Txt = require('../../../Txt-DPmEpNbp.cjs');
+const field = require('../../../field-ip9xiOVa.cjs');
+require('../../../field-control-aria-WzMGs0A4.cjs');
 
-const DISABLED_LABELS = ["boolean", "object", "array"];
-const FieldWrapper = ({ label, children, id, field, error }) => {
-  const isDisabled = DISABLED_LABELS.includes(field.type);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pb-4 last:pb-0", children: [
-    !isDisabled && /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.Label, { name: id, htmlFor: id, required: field.required, className: "pb-1", children: label }),
+const GROUP_TYPES = ["object", "array"];
+function GroupFooter({ description, error }) {
+  if (!description && !error) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(field.Field, { invalid: Boolean(error), children: [
+    description && /* @__PURE__ */ jsxRuntime.jsx(field.FieldDescription, { children: description }),
+    /* @__PURE__ */ jsxRuntime.jsx(field.FieldError, { children: error })
+  ] });
+}
+const FieldWrapper = ({ label, children, field: field$1, error }) => {
+  const description = field$1.fieldConfig?.description;
+  if (field$1.type === "record") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(field.Fieldset, { className: "gap-2 pb-4 last:pb-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(field.FieldsetLegend, { required: field$1.required, children: label }),
+      children,
+      /* @__PURE__ */ jsxRuntime.jsx(GroupFooter, { description, error })
+    ] });
+  }
+  if (GROUP_TYPES.includes(field$1.type)) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pb-4 last:pb-0", children: [
+      children,
+      /* @__PURE__ */ jsxRuntime.jsx(GroupFooter, { description, error })
+    ] });
+  }
+  const rendersOwnLabel = field$1.type === "boolean";
+  return /* @__PURE__ */ jsxRuntime.jsxs(field.Field, { invalid: Boolean(error), className: "pb-4 last:pb-0", children: [
+    !rendersOwnLabel && /* @__PURE__ */ jsxRuntime.jsx(field.FieldLabel, { required: field$1.required, children: label }),
     children,
-    field.fieldConfig?.description && /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "p", variant: "caption", tone: "ink", children: field.fieldConfig.description }),
-    error && /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.ErrorMsg, { name: id, children: error })
+    description && /* @__PURE__ */ jsxRuntime.jsx(field.FieldDescription, { children: description }),
+    /* @__PURE__ */ jsxRuntime.jsx(field.FieldError, { children: error })
   ] });
 };
 

package/dist/lib/form/components/field-wrapper.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-wrapper.cjs.js","sources":["../../../../src/lib/form/components/field-wrapper.tsx"],"sourcesContent":["import type { FieldWrapperProps } from '@autoform/react';\nimport React from 'react';\nimport { FieldBlock } from '@/ds/components/FormFieldBlocks';\nimport { Txt } from '@/ds/components/Txt';\n\nconst DISABLED_LABELS = ['boolean', 'object', 'array'];\n\nexport const FieldWrapper: React.FC<FieldWrapperProps> = ({ label, children, id, field, error }) => {\n  const isDisabled = DISABLED_LABELS.includes(field.type);\n\n  return (\n    <div className=\"pb-4 last:pb-0\">\n      {!isDisabled && (\n        <FieldBlock.Label name={id} htmlFor={id} required={field.required} className=\"pb-1\">\n          {label}\n        </FieldBlock.Label>\n      )}\n\n      {children}\n\n      {field.fieldConfig?.description && (\n        <Txt as=\"p\" variant=\"caption\" tone=\"ink\">\n          {field.fieldConfig.description}\n        </Txt>\n      )}\n\n      {error && <FieldBlock.ErrorMsg name={id}>{error}</FieldBlock.ErrorMsg>}\n    </div>\n  );\n};\n"],"names":["jsxs","jsx","FieldBlock","Txt"],"mappings":";;;;;;;;AAKA,MAAM,eAAA,GAAkB,CAAC,SAAA,EAAW,QAAA,EAAU,OAAO,CAAA;AAE9C,MAAM,YAAA,GAA4C,CAAC,EAAE,KAAA,EAAO,UAAU,EAAA,EAAI,KAAA,EAAO,OAAM,KAAM;AAClG,EAAA,MAAM,UAAA,GAAa,eAAA,CAAgB,QAAA,CAAS,KAAA,CAAM,IAAI,CAAA;AAEtD,EAAA,uBACEA,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACZ,QAAA,EAAA;AAAA,IAAA,CAAC,UAAA,oBACAC,cAAA,CAACC,qBAAA,CAAW,KAAA,EAAX,EAAiB,IAAA,EAAM,EAAA,EAAI,OAAA,EAAS,EAAA,EAAI,QAAA,EAAU,KAAA,CAAM,QAAA,EAAU,SAAA,EAAU,QAC1E,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,IAGD,QAAA;AAAA,IAEA,KAAA,CAAM,WAAA,EAAa,WAAA,oBAClBD,cAAA,CAACE,OAAA,EAAA,EAAI,EAAA,EAAG,GAAA,EAAI,OAAA,EAAQ,SAAA,EAAU,IAAA,EAAK,KAAA,EAChC,QAAA,EAAA,KAAA,CAAM,YAAY,WAAA,EACrB,CAAA;AAAA,IAGD,yBAASF,cAAA,CAACC,qBAAA,CAAW,UAAX,EAAoB,IAAA,EAAM,IAAK,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EAClD,CAAA;AAEJ;;;;"}
+{"version":3,"file":"field-wrapper.cjs.js","sources":["../../../../src/lib/form/components/field-wrapper.tsx"],"sourcesContent":["import type { FieldWrapperProps } from '@autoform/react';\nimport React from 'react';\nimport { Field, FieldDescription, FieldError, FieldLabel, Fieldset, FieldsetLegend } from '@/ds/components/Field';\n\nconst GROUP_TYPES = ['object', 'array'];\n\nfunction GroupFooter({ description, error }: { description?: React.ReactNode; error?: string }) {\n  if (!description && !error) return null;\n  return (\n    <Field invalid={Boolean(error)}>\n      {description && <FieldDescription>{description}</FieldDescription>}\n      <FieldError>{error}</FieldError>\n    </Field>\n  );\n}\n\nexport const FieldWrapper: React.FC<FieldWrapperProps> = ({ label, children, field, error }) => {\n  const description = field.fieldConfig?.description;\n\n  if (field.type === 'record') {\n    return (\n      <Fieldset className=\"gap-2 pb-4 last:pb-0\">\n        <FieldsetLegend required={field.required}>{label}</FieldsetLegend>\n        {children}\n        <GroupFooter description={description} error={error} />\n      </Fieldset>\n    );\n  }\n\n  if (GROUP_TYPES.includes(field.type)) {\n    return (\n      <div className=\"pb-4 last:pb-0\">\n        {children}\n        <GroupFooter description={description} error={error} />\n      </div>\n    );\n  }\n\n  const rendersOwnLabel = field.type === 'boolean';\n\n  return (\n    <Field invalid={Boolean(error)} className=\"pb-4 last:pb-0\">\n      {!rendersOwnLabel && <FieldLabel required={field.required}>{label}</FieldLabel>}\n\n      {children}\n\n      {description && <FieldDescription>{description}</FieldDescription>}\n\n      <FieldError>{error}</FieldError>\n    </Field>\n  );\n};\n"],"names":["jsxs","Field","jsx","FieldDescription","FieldError","field","Fieldset","FieldsetLegend","FieldLabel"],"mappings":";;;;;;;;AAIA,MAAM,WAAA,GAAc,CAAC,QAAA,EAAU,OAAO,CAAA;AAEtC,SAAS,WAAA,CAAY,EAAE,WAAA,EAAa,KAAA,EAAM,EAAsD;AAC9F,EAAA,IAAI,CAAC,WAAA,IAAe,CAAC,KAAA,EAAO,OAAO,IAAA;AACnC,EAAA,uBACEA,eAAA,CAACC,WAAA,EAAA,EAAM,OAAA,EAAS,OAAA,CAAQ,KAAK,CAAA,EAC1B,QAAA,EAAA;AAAA,IAAA,WAAA,oBAAeC,cAAA,CAACC,0BAAkB,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,oBAC/CD,cAAA,CAACE,oBAAY,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACrB,CAAA;AAEJ;AAEO,MAAM,eAA4C,CAAC,EAAE,OAAO,QAAA,SAAUC,OAAA,EAAO,OAAM,KAAM;AAC9F,EAAA,MAAM,WAAA,GAAcA,QAAM,WAAA,EAAa,WAAA;AAEvC,EAAA,IAAIA,OAAA,CAAM,SAAS,QAAA,EAAU;AAC3B,IAAA,uBACEL,eAAA,CAACM,cAAA,EAAA,EAAS,SAAA,EAAU,sBAAA,EAClB,QAAA,EAAA;AAAA,sBAAAJ,cAAA,CAACK,oBAAA,EAAA,EAAe,QAAA,EAAUF,OAAA,CAAM,QAAA,EAAW,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,MAChD,QAAA;AAAA,sBACDH,cAAA,CAAC,WAAA,EAAA,EAAY,WAAA,EAA0B,KAAA,EAAc;AAAA,KAAA,EACvD,CAAA;AAAA,EAEJ;AAEA,EAAA,IAAI,WAAA,CAAY,QAAA,CAASG,OAAA,CAAM,IAAI,CAAA,EAAG;AACpC,IAAA,uBACEL,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACZ,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBACDE,cAAA,CAAC,WAAA,EAAA,EAAY,WAAA,EAA0B,KAAA,EAAc;AAAA,KAAA,EACvD,CAAA;AAAA,EAEJ;AAEA,EAAA,MAAM,eAAA,GAAkBG,QAAM,IAAA,KAAS,SAAA;AAEvC,EAAA,uCACGJ,WAAA,EAAA,EAAM,OAAA,EAAS,QAAQ,KAAK,CAAA,EAAG,WAAU,gBAAA,EACvC,QAAA,EAAA;AAAA,IAAA,CAAC,mCAAmBC,cAAA,CAACM,gBAAA,EAAA,EAAW,QAAA,EAAUH,OAAA,CAAM,UAAW,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,IAEjE,QAAA;AAAA,IAEA,WAAA,oBAAeH,cAAA,CAACC,sBAAA,EAAA,EAAkB,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,oBAE/CD,cAAA,CAACE,oBAAY,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACrB,CAAA;AAEJ;;;;"}

package/dist/lib/form/components/field-wrapper.es.js

@@ -1,15 +1,36 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { F as FieldBlock } from '../../../field-block--PeppIRb.js';
-import { T as Txt } from '../../../Txt-BP1SRHmL.js';
+import { f as Fieldset, g as FieldsetLegend, F as Field, e as FieldLabel, b as FieldDescription, c as FieldError } from '../../../field-BtvEQ68O.js';
+import '../../../field-control-aria-DB6y41tQ.js';
 
-const DISABLED_LABELS = ["boolean", "object", "array"];
-const FieldWrapper = ({ label, children, id, field, error }) => {
-  const isDisabled = DISABLED_LABELS.includes(field.type);
-  return /* @__PURE__ */ jsxs("div", { className: "pb-4 last:pb-0", children: [
-    !isDisabled && /* @__PURE__ */ jsx(FieldBlock.Label, { name: id, htmlFor: id, required: field.required, className: "pb-1", children: label }),
+const GROUP_TYPES = ["object", "array"];
+function GroupFooter({ description, error }) {
+  if (!description && !error) return null;
+  return /* @__PURE__ */ jsxs(Field, { invalid: Boolean(error), children: [
+    description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
+    /* @__PURE__ */ jsx(FieldError, { children: error })
+  ] });
+}
+const FieldWrapper = ({ label, children, field, error }) => {
+  const description = field.fieldConfig?.description;
+  if (field.type === "record") {
+    return /* @__PURE__ */ jsxs(Fieldset, { className: "gap-2 pb-4 last:pb-0", children: [
+      /* @__PURE__ */ jsx(FieldsetLegend, { required: field.required, children: label }),
+      children,
+      /* @__PURE__ */ jsx(GroupFooter, { description, error })
+    ] });
+  }
+  if (GROUP_TYPES.includes(field.type)) {
+    return /* @__PURE__ */ jsxs("div", { className: "pb-4 last:pb-0", children: [
+      children,
+      /* @__PURE__ */ jsx(GroupFooter, { description, error })
+    ] });
+  }
+  const rendersOwnLabel = field.type === "boolean";
+  return /* @__PURE__ */ jsxs(Field, { invalid: Boolean(error), className: "pb-4 last:pb-0", children: [
+    !rendersOwnLabel && /* @__PURE__ */ jsx(FieldLabel, { required: field.required, children: label }),
     children,
-    field.fieldConfig?.description && /* @__PURE__ */ jsx(Txt, { as: "p", variant: "caption", tone: "ink", children: field.fieldConfig.description }),
-    error && /* @__PURE__ */ jsx(FieldBlock.ErrorMsg, { name: id, children: error })
+    description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
+    /* @__PURE__ */ jsx(FieldError, { children: error })
   ] });
 };
 

package/dist/lib/form/components/field-wrapper.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-wrapper.es.js","sources":["../../../../src/lib/form/components/field-wrapper.tsx"],"sourcesContent":["import type { FieldWrapperProps } from '@autoform/react';\nimport React from 'react';\nimport { FieldBlock } from '@/ds/components/FormFieldBlocks';\nimport { Txt } from '@/ds/components/Txt';\n\nconst DISABLED_LABELS = ['boolean', 'object', 'array'];\n\nexport const FieldWrapper: React.FC<FieldWrapperProps> = ({ label, children, id, field, error }) => {\n  const isDisabled = DISABLED_LABELS.includes(field.type);\n\n  return (\n    <div className=\"pb-4 last:pb-0\">\n      {!isDisabled && (\n        <FieldBlock.Label name={id} htmlFor={id} required={field.required} className=\"pb-1\">\n          {label}\n        </FieldBlock.Label>\n      )}\n\n      {children}\n\n      {field.fieldConfig?.description && (\n        <Txt as=\"p\" variant=\"caption\" tone=\"ink\">\n          {field.fieldConfig.description}\n        </Txt>\n      )}\n\n      {error && <FieldBlock.ErrorMsg name={id}>{error}</FieldBlock.ErrorMsg>}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAKA,MAAM,eAAA,GAAkB,CAAC,SAAA,EAAW,QAAA,EAAU,OAAO,CAAA;AAE9C,MAAM,YAAA,GAA4C,CAAC,EAAE,KAAA,EAAO,UAAU,EAAA,EAAI,KAAA,EAAO,OAAM,KAAM;AAClG,EAAA,MAAM,UAAA,GAAa,eAAA,CAAgB,QAAA,CAAS,KAAA,CAAM,IAAI,CAAA;AAEtD,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACZ,QAAA,EAAA;AAAA,IAAA,CAAC,UAAA,oBACA,GAAA,CAAC,UAAA,CAAW,KAAA,EAAX,EAAiB,IAAA,EAAM,EAAA,EAAI,OAAA,EAAS,EAAA,EAAI,QAAA,EAAU,KAAA,CAAM,QAAA,EAAU,SAAA,EAAU,QAC1E,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,IAGD,QAAA;AAAA,IAEA,KAAA,CAAM,WAAA,EAAa,WAAA,oBAClB,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAG,GAAA,EAAI,OAAA,EAAQ,SAAA,EAAU,IAAA,EAAK,KAAA,EAChC,QAAA,EAAA,KAAA,CAAM,YAAY,WAAA,EACrB,CAAA;AAAA,IAGD,yBAAS,GAAA,CAAC,UAAA,CAAW,UAAX,EAAoB,IAAA,EAAM,IAAK,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EAClD,CAAA;AAEJ;;;;"}
+{"version":3,"file":"field-wrapper.es.js","sources":["../../../../src/lib/form/components/field-wrapper.tsx"],"sourcesContent":["import type { FieldWrapperProps } from '@autoform/react';\nimport React from 'react';\nimport { Field, FieldDescription, FieldError, FieldLabel, Fieldset, FieldsetLegend } from '@/ds/components/Field';\n\nconst GROUP_TYPES = ['object', 'array'];\n\nfunction GroupFooter({ description, error }: { description?: React.ReactNode; error?: string }) {\n  if (!description && !error) return null;\n  return (\n    <Field invalid={Boolean(error)}>\n      {description && <FieldDescription>{description}</FieldDescription>}\n      <FieldError>{error}</FieldError>\n    </Field>\n  );\n}\n\nexport const FieldWrapper: React.FC<FieldWrapperProps> = ({ label, children, field, error }) => {\n  const description = field.fieldConfig?.description;\n\n  if (field.type === 'record') {\n    return (\n      <Fieldset className=\"gap-2 pb-4 last:pb-0\">\n        <FieldsetLegend required={field.required}>{label}</FieldsetLegend>\n        {children}\n        <GroupFooter description={description} error={error} />\n      </Fieldset>\n    );\n  }\n\n  if (GROUP_TYPES.includes(field.type)) {\n    return (\n      <div className=\"pb-4 last:pb-0\">\n        {children}\n        <GroupFooter description={description} error={error} />\n      </div>\n    );\n  }\n\n  const rendersOwnLabel = field.type === 'boolean';\n\n  return (\n    <Field invalid={Boolean(error)} className=\"pb-4 last:pb-0\">\n      {!rendersOwnLabel && <FieldLabel required={field.required}>{label}</FieldLabel>}\n\n      {children}\n\n      {description && <FieldDescription>{description}</FieldDescription>}\n\n      <FieldError>{error}</FieldError>\n    </Field>\n  );\n};\n"],"names":[],"mappings":";;;;AAIA,MAAM,WAAA,GAAc,CAAC,QAAA,EAAU,OAAO,CAAA;AAEtC,SAAS,WAAA,CAAY,EAAE,WAAA,EAAa,KAAA,EAAM,EAAsD;AAC9F,EAAA,IAAI,CAAC,WAAA,IAAe,CAAC,KAAA,EAAO,OAAO,IAAA;AACnC,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAM,OAAA,EAAS,OAAA,CAAQ,KAAK,CAAA,EAC1B,QAAA,EAAA;AAAA,IAAA,WAAA,oBAAe,GAAA,CAAC,oBAAkB,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,oBAC/C,GAAA,CAAC,cAAY,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACrB,CAAA;AAEJ;AAEO,MAAM,eAA4C,CAAC,EAAE,OAAO,QAAA,EAAU,KAAA,EAAO,OAAM,KAAM;AAC9F,EAAA,MAAM,WAAA,GAAc,MAAM,WAAA,EAAa,WAAA;AAEvC,EAAA,IAAI,KAAA,CAAM,SAAS,QAAA,EAAU;AAC3B,IAAA,uBACE,IAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,sBAAA,EAClB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAU,KAAA,CAAM,QAAA,EAAW,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,MAChD,QAAA;AAAA,sBACD,GAAA,CAAC,WAAA,EAAA,EAAY,WAAA,EAA0B,KAAA,EAAc;AAAA,KAAA,EACvD,CAAA;AAAA,EAEJ;AAEA,EAAA,IAAI,WAAA,CAAY,QAAA,CAAS,KAAA,CAAM,IAAI,CAAA,EAAG;AACpC,IAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACZ,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBACD,GAAA,CAAC,WAAA,EAAA,EAAY,WAAA,EAA0B,KAAA,EAAc;AAAA,KAAA,EACvD,CAAA;AAAA,EAEJ;AAEA,EAAA,MAAM,eAAA,GAAkB,MAAM,IAAA,KAAS,SAAA;AAEvC,EAAA,4BACG,KAAA,EAAA,EAAM,OAAA,EAAS,QAAQ,KAAK,CAAA,EAAG,WAAU,gBAAA,EACvC,QAAA,EAAA;AAAA,IAAA,CAAC,mCAAmB,GAAA,CAAC,UAAA,EAAA,EAAW,QAAA,EAAU,KAAA,CAAM,UAAW,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,IAEjE,QAAA;AAAA,IAEA,WAAA,oBAAe,GAAA,CAAC,gBAAA,EAAA,EAAkB,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,oBAE/C,GAAA,CAAC,cAAY,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACrB,CAAA;AAEJ;;;;"}

package/dist/lib/form/components/form.cjs.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
+const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 
-const Form = React.forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("form", { ref, className: "space-y-4", ...props, children });
-});
+function Form({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("form", { "data-slot": "form", className: utils_cn.cn("flex flex-col gap-4", className), ...props });
+}
 
 exports.Form = Form;
 //# sourceMappingURL=form.cjs.js.map

package/dist/lib/form/components/form.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.cjs.js","sources":["../../../../src/lib/form/components/form.tsx"],"sourcesContent":["import React from 'react';\n\nexport const Form = React.forwardRef<HTMLFormElement, React.ComponentProps<'form'>>(({ children, ...props }, ref) => {\n  return (\n    <form ref={ref} className=\"space-y-4\" {...props}>\n      {children}\n    </form>\n  );\n});\n"],"names":[],"mappings":";;;;;;;AAEO,MAAM,IAAA,GAAO,MAAM,UAAA,CAA0D,CAAC,EAAE,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACnH,EAAA,sCACG,MAAA,EAAA,EAAK,GAAA,EAAU,WAAU,WAAA,EAAa,GAAG,OACvC,QAAA,EACH,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"form.cjs.js","sources":["../../../../src/lib/form/components/form.tsx"],"sourcesContent":["import type React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport function Form({ className, ...props }: React.ComponentProps<'form'>) {\n  return <form data-slot=\"form\" className={cn('flex flex-col gap-4', className)} {...props} />;\n}\n"],"names":["jsx","cn"],"mappings":";;;;;;;AAIO,SAAS,IAAA,CAAK,EAAE,SAAA,EAAW,GAAG,OAAM,EAAiC;AAC1E,EAAA,uBAAOA,cAAA,CAAC,MAAA,EAAA,EAAK,WAAA,EAAU,MAAA,EAAO,SAAA,EAAWC,YAAG,qBAAA,EAAuB,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAC5F;;;;"}

package/dist/lib/form/components/form.es.js

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
-import React__default from 'react';
+import { c as cn } from '../../../cn-65Adrsfj.js';
 
-const Form = React__default.forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx("form", { ref, className: "space-y-4", ...props, children });
-});
+function Form({ className, ...props }) {
+  return /* @__PURE__ */ jsx("form", { "data-slot": "form", className: cn("flex flex-col gap-4", className), ...props });
+}
 
 export { Form };
 //# sourceMappingURL=form.es.js.map

package/dist/lib/form/components/form.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.es.js","sources":["../../../../src/lib/form/components/form.tsx"],"sourcesContent":["import React from 'react';\n\nexport const Form = React.forwardRef<HTMLFormElement, React.ComponentProps<'form'>>(({ children, ...props }, ref) => {\n  return (\n    <form ref={ref} className=\"space-y-4\" {...props}>\n      {children}\n    </form>\n  );\n});\n"],"names":["React"],"mappings":";;;AAEO,MAAM,IAAA,GAAOA,eAAM,UAAA,CAA0D,CAAC,EAAE,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACnH,EAAA,2BACG,MAAA,EAAA,EAAK,GAAA,EAAU,WAAU,WAAA,EAAa,GAAG,OACvC,QAAA,EACH,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"form.es.js","sources":["../../../../src/lib/form/components/form.tsx"],"sourcesContent":["import type React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport function Form({ className, ...props }: React.ComponentProps<'form'>) {\n  return <form data-slot=\"form\" className={cn('flex flex-col gap-4', className)} {...props} />;\n}\n"],"names":[],"mappings":";;;AAIO,SAAS,IAAA,CAAK,EAAE,SAAA,EAAW,GAAG,OAAM,EAAiC;AAC1E,EAAA,uBAAO,GAAA,CAAC,MAAA,EAAA,EAAK,WAAA,EAAU,MAAA,EAAO,SAAA,EAAW,GAAG,qBAAA,EAAuB,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAC5F;;;;"}

package/dist/lib/form/components/number-field.cjs.js

@@ -3,16 +3,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const input = require('../../../input-bd223EJW.cjs');
+const input = require('../../../input-D0UPyj6A.cjs');
 
-const NumberField = ({ inputProps, error, field, id }) => {
+const NumberField = ({ inputProps, field }) => {
   const { key, ...props } = inputProps;
   return /* @__PURE__ */ jsxRuntime.jsx(
     input.Input,
     {
-      id,
       type: "number",
-      className: error ? "border-destructive-indicator" : "",
+      step: "any",
       ...props,
       defaultValue: field.default !== void 0 ? Number(field.default) : void 0,
       onChange: (e) => {