@customafk/lunas-ui 0.2.82 → 0.2.84

package/dist/{simple-array-field-bCUuPMgT.cjs.map → simple-array-field-BAR4MjDR.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-array-field-bCUuPMgT.cjs","names":["useTanStackFieldContext","Button","Trash2Icon","PlusIcon"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-array-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { PlusIcon, Trash2Icon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\n\nimport { useTanStackFieldContext } from '../form-context';\n\n// ─── ArrayCol ──────────────────────────────────────────────────────────────\n\ntype ArrayColProps = {\n  /**\n   * Fixed column width as a pixel number (e.g. `96`) or any CSS string\n   * (e.g. `'8rem'`, `'20%'`). Omit to let the column expand and fill the\n   * remaining row space (`flex: 1`).\n   */\n  width?: number | string;\n  className?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Layout helper for columns inside a `SimpleArrayField` row. Controls width\n * without repeating `<div className=\"w-24\">` or `<div className=\"flex-1\">`.\n *\n * @example\n * <SimpleArrayField defaultRow={...}>\n *   {i => (\n *     <>\n *       <ArrayCol>                 // flex-1 — takes remaining space\n *         <AppField name={`items[${i}].name`}>...</AppField>\n *       </ArrayCol>\n *       <ArrayCol width={96}>     // 96 px fixed\n *         <AppField name={`items[${i}].qty`}>...</AppField>\n *       </ArrayCol>\n *       <ArrayCol width=\"8rem\">   // CSS string\n *         <AppField name={`items[${i}].tax`}>...</AppField>\n *       </ArrayCol>\n *     </>\n *   )}\n * </SimpleArrayField>\n */\nexport function ArrayCol({ width, className, children }: ArrayColProps) {\n  const style: React.CSSProperties = width ? { width: typeof width === 'number' ? `${width}px` : width, flexShrink: 0 } : { flex: 1, minWidth: 0 };\n\n  return (\n    <div data-slot=\"array-col\" style={style} className={className}>\n      {children}\n    </div>\n  );\n}\n\n// ─── ArrayHeaderRow ────────────────────────────────────────────────────────\n\ntype ArrayHeaderRowProps = {\n  className?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Styled header row for a `SimpleArrayField` table. Place it directly above\n * `<SimpleArrayField>` and use `<ArrayCol>` children with text labels to align\n * headers with their columns. A spacer matching the delete-button width is\n * appended automatically.\n *\n * @example\n * <ArrayHeaderRow>\n *   <ArrayCol>Name</ArrayCol>\n *   <ArrayCol width={96}>Price</ArrayCol>\n *   <ArrayCol width={80}>Qty</ArrayCol>\n * </ArrayHeaderRow>\n * <SimpleArrayField defaultRow={...}>\n *   {i => (...)}\n * </SimpleArrayField>\n */\nexport function ArrayHeaderRow({ className, children }: ArrayHeaderRowProps) {\n  return (\n    <div data-slot=\"array-header-row\" className={cn('mb-1 flex items-center gap-2 px-1 text-xs font-medium text-text-positive-weak', className)}>\n      {children}\n      {/* spacer matching the delete icon button width */}\n      <div className=\"min-w-8 w-8 shrink-0\" />\n    </div>\n  );\n}\n\n// ─── SimpleArrayField ──────────────────────────────────────────────────────\n\nexport type SimpleArrayFieldProps<T> = {\n  /**\n   * Shape of a brand-new empty row appended when the user clicks \"Add row\".\n   */\n  defaultRow: T;\n  /**\n   * Render function called once per row. Receives the zero-based row `index`\n   * so you can build field paths like `` `items[${index}].name` ``.\n   */\n  children: (index: number) => React.ReactNode;\n  /** Label on the add button. Defaults to `'Add row'`. */\n  addLabel?: string;\n  className?: string;\n};\n\n/**\n * Array field wrapper that manages rows (add / remove) while letting you\n * freely compose any fields inside each row.\n *\n * @example\n * const { AppForm, AppField } = useTanStackForm({ defaultValues: { items: [] } });\n *\n * <AppForm>\n *   <AppField name=\"items\">\n *     {({ SimpleArrayField }) => (\n *       <SimpleArrayField defaultRow={{ name: null, qty: null }}>\n *         {(i) => (\n *           <div className=\"flex gap-2\">\n *             <AppField name={`items[${i}].name`}>\n *               {({ SimpleTextField }) => <SimpleTextField label=\"Name\" />}\n *             </AppField>\n *             <AppField name={`items[${i}].qty`}>\n *               {({ SimpleNumberField }) => <SimpleNumberField label=\"Qty\" />}\n *             </AppField>\n *           </div>\n *         )}\n *       </SimpleArrayField>\n *     )}\n *   </AppField>\n * </AppForm>\n */\nexport function SimpleArrayField<T>({ defaultRow, children, addLabel = 'Thêm hàng', className }: SimpleArrayFieldProps<T>) {\n  const field = useTanStackFieldContext<T[]>();\n  const rows = field.state.value ?? [];\n\n  const addRow = useCallback(() => {\n    field.pushValue({ ...defaultRow } as T);\n  }, [field, defaultRow]);\n\n  const removeRow = useCallback(\n    (index: number) => {\n      field.removeValue(index);\n    },\n    [field]\n  );\n\n  return (\n    <div data-slot=\"simple-array-field\" className={cn('flex flex-col gap-2', className)}>\n      {rows.map((_, i) => (\n        // biome-ignore lint/suspicious/noArrayIndexKey: index is the stable identity for form rows\n        <div key={i} className=\"flex items-start gap-2\">\n          {children(i)}\n          <Button type=\"button\" size=\"icon\" variant=\"ghost\" color=\"danger\" className=\"min-w-8\" onClick={() => removeRow(i)}>\n            <Trash2Icon size={14} />\n          </Button>\n        </div>\n      ))}\n\n      <div>\n        <Button type=\"button\" variant=\"outline\" color=\"muted\" size=\"xs\" onClick={addRow}>\n          <PlusIcon size={13} />\n          {addLabel}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"yMA8CA,SAAgB,EAAS,CAAE,QAAO,YAAW,YAA2B,CAGtE,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,YAAY,MAHM,EAAQ,CAAE,MAAO,OAAO,GAAU,SAAW,GAAG,EAAM,IAAM,EAAO,WAAY,CAAE,EAAI,CAAE,KAAM,EAAG,SAAU,CAAE,EAGzF,YACjD,UACE,CAAA,CAET,CAyBA,SAAgB,EAAe,CAAE,YAAW,YAAiC,CAC3E,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,YAAU,mBAAmB,WAAA,EAAA,EAAA,GAAA,CAAc,gFAAiF,CAAS,EAA1I,SAAA,CACG,GAED,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,sBAAwB,CAAA,CACpC,GAET,CA6CA,SAAgB,EAAoB,CAAE,aAAY,WAAU,WAAW,YAAa,aAAuC,CACzH,IAAM,EAAQA,EAAAA,EAA6B,EACrC,EAAO,EAAM,MAAM,OAAS,CAAC,EAE7B,GAAA,EAAA,EAAA,YAAA,KAA2B,CAC/B,EAAM,UAAU,CAAE,GAAG,CAAW,CAAM,CACxC,EAAG,CAAC,EAAO,CAAU,CAAC,EAEhB,GAAA,EAAA,EAAA,YAAA,CACH,GAAkB,CACjB,EAAM,YAAY,CAAK,CACzB,EACA,CAAC,CAAK,CACR,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,YAAU,qBAAqB,WAAA,EAAA,EAAA,GAAA,CAAc,sBAAuB,CAAS,EAAlF,SAAA,CACG,EAAK,KAAK,EAAG,KAEZ,EAAA,EAAA,KAAA,CAAC,MAAD,CAAa,UAAU,yBAAvB,SAAA,CACG,EAAS,CAAC,GACX,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,KAAK,SAAS,KAAK,OAAO,QAAQ,QAAQ,MAAM,SAAS,UAAU,UAAU,YAAe,EAAU,CAAC,EAC7G,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,KAAM,EAAK,CAAA,CACjB,CAAA,CACL,CALK,EAAA,CAKL,CACN,GAED,EAAA,EAAA,IAAA,CAAC,MAAD,CAAA,UACE,EAAA,EAAA,KAAA,CAACD,EAAAA,OAAD,CAAQ,KAAK,SAAS,QAAQ,UAAU,MAAM,QAAQ,KAAK,KAAK,QAAS,EAAzE,SAAA,EACE,EAAA,EAAA,IAAA,CAACE,EAAAA,SAAD,CAAU,KAAM,EAAK,CAAA,EACpB,CACK,CACL,CAAA,CAAA,CAAA,CACF,GAET"}
+{"version":3,"file":"simple-array-field-BAR4MjDR.cjs","names":["useTanStackFieldContext","Button","Trash2Icon","PlusIcon"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-array-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { PlusIcon, Trash2Icon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\n\nimport { useTanStackFieldContext } from '../form-context';\n\n// ─── ArrayCol ──────────────────────────────────────────────────────────────\n\ntype ArrayColProps = {\n  /**\n   * Fixed column width as a pixel number (e.g. `96`) or any CSS string\n   * (e.g. `'8rem'`, `'20%'`). Omit to let the column expand and fill the\n   * remaining row space (`flex: 1`).\n   */\n  width?: number | string;\n  className?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Layout helper for columns inside a `SimpleArrayField` row. Controls width\n * without repeating `<div className=\"w-24\">` or `<div className=\"flex-1\">`.\n *\n * @example\n * <SimpleArrayField defaultRow={...}>\n *   {i => (\n *     <>\n *       <ArrayCol>                 // flex-1 — takes remaining space\n *         <AppField name={`items[${i}].name`}>...</AppField>\n *       </ArrayCol>\n *       <ArrayCol width={96}>     // 96 px fixed\n *         <AppField name={`items[${i}].qty`}>...</AppField>\n *       </ArrayCol>\n *       <ArrayCol width=\"8rem\">   // CSS string\n *         <AppField name={`items[${i}].tax`}>...</AppField>\n *       </ArrayCol>\n *     </>\n *   )}\n * </SimpleArrayField>\n */\nexport function ArrayCol({ width, className, children }: ArrayColProps) {\n  const style: React.CSSProperties = width ? { width: typeof width === 'number' ? `${width}px` : width, flexShrink: 0 } : { flex: 1, minWidth: 0 };\n\n  return (\n    <div data-slot=\"array-col\" style={style} className={className}>\n      {children}\n    </div>\n  );\n}\n\n// ─── ArrayHeaderRow ────────────────────────────────────────────────────────\n\ntype ArrayHeaderRowProps = {\n  className?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Styled header row for a `SimpleArrayField` table. Place it directly above\n * `<SimpleArrayField>` and use `<ArrayCol>` children with text labels to align\n * headers with their columns. A spacer matching the delete-button width is\n * appended automatically.\n *\n * @example\n * <ArrayHeaderRow>\n *   <ArrayCol>Name</ArrayCol>\n *   <ArrayCol width={96}>Price</ArrayCol>\n *   <ArrayCol width={80}>Qty</ArrayCol>\n * </ArrayHeaderRow>\n * <SimpleArrayField defaultRow={...}>\n *   {i => (...)}\n * </SimpleArrayField>\n */\nexport function ArrayHeaderRow({ className, children }: ArrayHeaderRowProps) {\n  return (\n    <div data-slot=\"array-header-row\" className={cn('mb-1 flex items-center gap-2 px-1 text-xs font-medium text-text-positive-weak', className)}>\n      {children}\n      {/* spacer matching the delete icon button width */}\n      <div className=\"min-w-8 w-8 shrink-0\" />\n    </div>\n  );\n}\n\n// ─── SimpleArrayField ──────────────────────────────────────────────────────\n\nexport type SimpleArrayFieldProps<T> = {\n  /**\n   * Shape of a brand-new empty row appended when the user clicks \"Add row\".\n   */\n  defaultRow: T;\n  /**\n   * Render function called once per row. Receives the zero-based row `index`\n   * so you can build field paths like `` `items[${index}].name` ``.\n   */\n  children: (index: number) => React.ReactNode;\n  /** Label on the add button. Defaults to `'Add row'`. */\n  addLabel?: string;\n  className?: string;\n};\n\n/**\n * Array field wrapper that manages rows (add / remove) while letting you\n * freely compose any fields inside each row.\n *\n * @example\n * const { AppForm, AppField } = useTanStackForm({ defaultValues: { items: [] } });\n *\n * <AppForm>\n *   <AppField name=\"items\">\n *     {({ SimpleArrayField }) => (\n *       <SimpleArrayField defaultRow={{ name: null, qty: null }}>\n *         {(i) => (\n *           <div className=\"flex gap-2\">\n *             <AppField name={`items[${i}].name`}>\n *               {({ SimpleTextField }) => <SimpleTextField label=\"Name\" />}\n *             </AppField>\n *             <AppField name={`items[${i}].qty`}>\n *               {({ SimpleNumberField }) => <SimpleNumberField label=\"Qty\" />}\n *             </AppField>\n *           </div>\n *         )}\n *       </SimpleArrayField>\n *     )}\n *   </AppField>\n * </AppForm>\n */\nexport function SimpleArrayField<T>({ defaultRow, children, addLabel = 'Thêm hàng', className }: SimpleArrayFieldProps<T>) {\n  const field = useTanStackFieldContext<T[]>();\n  const rows = field.state.value ?? [];\n\n  const addRow = useCallback(() => {\n    field.pushValue({ ...defaultRow } as T);\n  }, [field, defaultRow]);\n\n  const removeRow = useCallback(\n    (index: number) => {\n      field.removeValue(index);\n    },\n    [field]\n  );\n\n  return (\n    <div data-slot=\"simple-array-field\" className={cn('flex flex-col gap-2', className)}>\n      {rows.map((_, i) => (\n        // biome-ignore lint/suspicious/noArrayIndexKey: index is the stable identity for form rows\n        <div key={i} className=\"flex items-start gap-2\">\n          {children(i)}\n          <Button type=\"button\" size=\"icon\" variant=\"ghost\" color=\"danger\" className=\"min-w-8\" onClick={() => removeRow(i)}>\n            <Trash2Icon size={14} />\n          </Button>\n        </div>\n      ))}\n\n      <div>\n        <Button type=\"button\" variant=\"outline\" color=\"muted\" size=\"xs\" onClick={addRow}>\n          <PlusIcon size={13} />\n          {addLabel}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"yMA8CA,SAAgB,EAAS,CAAE,QAAO,YAAW,YAA2B,CAGtE,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,YAAY,MAHM,EAAQ,CAAE,MAAO,OAAO,GAAU,SAAW,GAAG,EAAM,IAAM,EAAO,WAAY,CAAE,EAAI,CAAE,KAAM,EAAG,SAAU,CAAE,EAGzF,YACjD,UACE,CAAA,CAET,CAyBA,SAAgB,EAAe,CAAE,YAAW,YAAiC,CAC3E,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,YAAU,mBAAmB,WAAA,EAAA,EAAA,GAAA,CAAc,gFAAiF,CAAS,EAA1I,SAAA,CACG,GAED,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,sBAAwB,CAAA,CACpC,GAET,CA6CA,SAAgB,EAAoB,CAAE,aAAY,WAAU,WAAW,YAAa,aAAuC,CACzH,IAAM,EAAQA,EAAAA,GAA6B,EACrC,EAAO,EAAM,MAAM,OAAS,CAAC,EAE7B,GAAA,EAAA,EAAA,YAAA,KAA2B,CAC/B,EAAM,UAAU,CAAE,GAAG,CAAW,CAAM,CACxC,EAAG,CAAC,EAAO,CAAU,CAAC,EAEhB,GAAA,EAAA,EAAA,YAAA,CACH,GAAkB,CACjB,EAAM,YAAY,CAAK,CACzB,EACA,CAAC,CAAK,CACR,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,YAAU,qBAAqB,WAAA,EAAA,EAAA,GAAA,CAAc,sBAAuB,CAAS,EAAlF,SAAA,CACG,EAAK,KAAK,EAAG,KAEZ,EAAA,EAAA,KAAA,CAAC,MAAD,CAAa,UAAU,yBAAvB,SAAA,CACG,EAAS,CAAC,GACX,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,KAAK,SAAS,KAAK,OAAO,QAAQ,QAAQ,MAAM,SAAS,UAAU,UAAU,YAAe,EAAU,CAAC,EAC7G,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,KAAM,EAAK,CAAA,CACjB,CAAA,CACL,CALK,EAAA,CAKL,CACN,GAED,EAAA,EAAA,IAAA,CAAC,MAAD,CAAA,UACE,EAAA,EAAA,KAAA,CAACD,EAAAA,OAAD,CAAQ,KAAK,SAAS,QAAQ,UAAU,MAAM,QAAQ,KAAK,KAAK,QAAS,EAAzE,SAAA,EACE,EAAA,EAAA,IAAA,CAACE,EAAAA,SAAD,CAAU,KAAM,EAAK,CAAA,EACpB,CACK,CACL,CAAA,CAAA,CAAA,CACF,GAET"}

package/dist/simple-array-field-C0kpO1cq.mjs

@@ -0,0 +1,2 @@
+import{rt as e}from"./tanstack-form-Do6xL2kv.mjs";import{Button as t}from"./ui/button.mjs";import{PlusIcon as n,Trash2Icon as r}from"lucide-react";import{useCallback as i}from"react";import{cn as a}from"@customafk/react-toolkit/utils";import{jsx as o,jsxs as s}from"react/jsx-runtime";function c({width:e,className:t,children:n}){return o(`div`,{"data-slot":`array-col`,style:e?{width:typeof e==`number`?`${e}px`:e,flexShrink:0}:{flex:1,minWidth:0},className:t,children:n})}function l({className:e,children:t}){return s(`div`,{"data-slot":`array-header-row`,className:a(`mb-1 flex items-center gap-2 px-1 text-xs font-medium text-text-positive-weak`,e),children:[t,o(`div`,{className:`min-w-8 w-8 shrink-0`})]})}function u({defaultRow:c,children:l,addLabel:u=`Thêm hàng`,className:d}){let f=e(),p=f.state.value??[],m=i(()=>{f.pushValue({...c})},[f,c]),h=i(e=>{f.removeValue(e)},[f]);return s(`div`,{"data-slot":`simple-array-field`,className:a(`flex flex-col gap-2`,d),children:[p.map((e,n)=>s(`div`,{className:`flex items-start gap-2`,children:[l(n),o(t,{type:`button`,size:`icon`,variant:`ghost`,color:`danger`,className:`min-w-8`,onClick:()=>h(n),children:o(r,{size:14})})]},n)),o(`div`,{children:s(t,{type:`button`,variant:`outline`,color:`muted`,size:`xs`,onClick:m,children:[o(n,{size:13}),u]})})]})}export{c as ArrayCol,l as ArrayHeaderRow,u as SimpleArrayField};
+//# sourceMappingURL=simple-array-field-C0kpO1cq.mjs.map

package/dist/{simple-array-field-wFE_DUOV.mjs.map → simple-array-field-C0kpO1cq.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-array-field-wFE_DUOV.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-array-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { PlusIcon, Trash2Icon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\n\nimport { useTanStackFieldContext } from '../form-context';\n\n// ─── ArrayCol ──────────────────────────────────────────────────────────────\n\ntype ArrayColProps = {\n  /**\n   * Fixed column width as a pixel number (e.g. `96`) or any CSS string\n   * (e.g. `'8rem'`, `'20%'`). Omit to let the column expand and fill the\n   * remaining row space (`flex: 1`).\n   */\n  width?: number | string;\n  className?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Layout helper for columns inside a `SimpleArrayField` row. Controls width\n * without repeating `<div className=\"w-24\">` or `<div className=\"flex-1\">`.\n *\n * @example\n * <SimpleArrayField defaultRow={...}>\n *   {i => (\n *     <>\n *       <ArrayCol>                 // flex-1 — takes remaining space\n *         <AppField name={`items[${i}].name`}>...</AppField>\n *       </ArrayCol>\n *       <ArrayCol width={96}>     // 96 px fixed\n *         <AppField name={`items[${i}].qty`}>...</AppField>\n *       </ArrayCol>\n *       <ArrayCol width=\"8rem\">   // CSS string\n *         <AppField name={`items[${i}].tax`}>...</AppField>\n *       </ArrayCol>\n *     </>\n *   )}\n * </SimpleArrayField>\n */\nexport function ArrayCol({ width, className, children }: ArrayColProps) {\n  const style: React.CSSProperties = width ? { width: typeof width === 'number' ? `${width}px` : width, flexShrink: 0 } : { flex: 1, minWidth: 0 };\n\n  return (\n    <div data-slot=\"array-col\" style={style} className={className}>\n      {children}\n    </div>\n  );\n}\n\n// ─── ArrayHeaderRow ────────────────────────────────────────────────────────\n\ntype ArrayHeaderRowProps = {\n  className?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Styled header row for a `SimpleArrayField` table. Place it directly above\n * `<SimpleArrayField>` and use `<ArrayCol>` children with text labels to align\n * headers with their columns. A spacer matching the delete-button width is\n * appended automatically.\n *\n * @example\n * <ArrayHeaderRow>\n *   <ArrayCol>Name</ArrayCol>\n *   <ArrayCol width={96}>Price</ArrayCol>\n *   <ArrayCol width={80}>Qty</ArrayCol>\n * </ArrayHeaderRow>\n * <SimpleArrayField defaultRow={...}>\n *   {i => (...)}\n * </SimpleArrayField>\n */\nexport function ArrayHeaderRow({ className, children }: ArrayHeaderRowProps) {\n  return (\n    <div data-slot=\"array-header-row\" className={cn('mb-1 flex items-center gap-2 px-1 text-xs font-medium text-text-positive-weak', className)}>\n      {children}\n      {/* spacer matching the delete icon button width */}\n      <div className=\"min-w-8 w-8 shrink-0\" />\n    </div>\n  );\n}\n\n// ─── SimpleArrayField ──────────────────────────────────────────────────────\n\nexport type SimpleArrayFieldProps<T> = {\n  /**\n   * Shape of a brand-new empty row appended when the user clicks \"Add row\".\n   */\n  defaultRow: T;\n  /**\n   * Render function called once per row. Receives the zero-based row `index`\n   * so you can build field paths like `` `items[${index}].name` ``.\n   */\n  children: (index: number) => React.ReactNode;\n  /** Label on the add button. Defaults to `'Add row'`. */\n  addLabel?: string;\n  className?: string;\n};\n\n/**\n * Array field wrapper that manages rows (add / remove) while letting you\n * freely compose any fields inside each row.\n *\n * @example\n * const { AppForm, AppField } = useTanStackForm({ defaultValues: { items: [] } });\n *\n * <AppForm>\n *   <AppField name=\"items\">\n *     {({ SimpleArrayField }) => (\n *       <SimpleArrayField defaultRow={{ name: null, qty: null }}>\n *         {(i) => (\n *           <div className=\"flex gap-2\">\n *             <AppField name={`items[${i}].name`}>\n *               {({ SimpleTextField }) => <SimpleTextField label=\"Name\" />}\n *             </AppField>\n *             <AppField name={`items[${i}].qty`}>\n *               {({ SimpleNumberField }) => <SimpleNumberField label=\"Qty\" />}\n *             </AppField>\n *           </div>\n *         )}\n *       </SimpleArrayField>\n *     )}\n *   </AppField>\n * </AppForm>\n */\nexport function SimpleArrayField<T>({ defaultRow, children, addLabel = 'Thêm hàng', className }: SimpleArrayFieldProps<T>) {\n  const field = useTanStackFieldContext<T[]>();\n  const rows = field.state.value ?? [];\n\n  const addRow = useCallback(() => {\n    field.pushValue({ ...defaultRow } as T);\n  }, [field, defaultRow]);\n\n  const removeRow = useCallback(\n    (index: number) => {\n      field.removeValue(index);\n    },\n    [field]\n  );\n\n  return (\n    <div data-slot=\"simple-array-field\" className={cn('flex flex-col gap-2', className)}>\n      {rows.map((_, i) => (\n        // biome-ignore lint/suspicious/noArrayIndexKey: index is the stable identity for form rows\n        <div key={i} className=\"flex items-start gap-2\">\n          {children(i)}\n          <Button type=\"button\" size=\"icon\" variant=\"ghost\" color=\"danger\" className=\"min-w-8\" onClick={() => removeRow(i)}>\n            <Trash2Icon size={14} />\n          </Button>\n        </div>\n      ))}\n\n      <div>\n        <Button type=\"button\" variant=\"outline\" color=\"muted\" size=\"xs\" onClick={addRow}>\n          <PlusIcon size={13} />\n          {addLabel}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"4RA8CA,SAAgB,EAAS,CAAE,QAAO,YAAW,YAA2B,CAGtE,OACE,EAAC,MAAD,CAAK,YAAU,YAAY,MAHM,EAAQ,CAAE,MAAO,OAAO,GAAU,SAAW,GAAG,EAAM,IAAM,EAAO,WAAY,CAAE,EAAI,CAAE,KAAM,EAAG,SAAU,CAAE,EAGzF,YACjD,UACE,CAAA,CAET,CAyBA,SAAgB,EAAe,CAAE,YAAW,YAAiC,CAC3E,OACE,EAAC,MAAD,CAAK,YAAU,mBAAmB,UAAW,EAAG,gFAAiF,CAAS,EAA1I,SAAA,CACG,EAED,EAAC,MAAD,CAAK,UAAU,sBAAwB,CAAA,CACpC,GAET,CA6CA,SAAgB,EAAoB,CAAE,aAAY,WAAU,WAAW,YAAa,aAAuC,CACzH,IAAM,EAAQ,EAA6B,EACrC,EAAO,EAAM,MAAM,OAAS,CAAC,EAE7B,EAAS,MAAkB,CAC/B,EAAM,UAAU,CAAE,GAAG,CAAW,CAAM,CACxC,EAAG,CAAC,EAAO,CAAU,CAAC,EAEhB,EAAY,EACf,GAAkB,CACjB,EAAM,YAAY,CAAK,CACzB,EACA,CAAC,CAAK,CACR,EAEA,OACE,EAAC,MAAD,CAAK,YAAU,qBAAqB,UAAW,EAAG,sBAAuB,CAAS,EAAlF,SAAA,CACG,EAAK,KAAK,EAAG,IAEZ,EAAC,MAAD,CAAa,UAAU,yBAAvB,SAAA,CACG,EAAS,CAAC,EACX,EAAC,EAAD,CAAQ,KAAK,SAAS,KAAK,OAAO,QAAQ,QAAQ,MAAM,SAAS,UAAU,UAAU,YAAe,EAAU,CAAC,EAC7G,SAAA,EAAC,EAAD,CAAY,KAAM,EAAK,CAAA,CACjB,CAAA,CACL,CALK,EAAA,CAKL,CACN,EAED,EAAC,MAAD,CAAA,SACE,EAAC,EAAD,CAAQ,KAAK,SAAS,QAAQ,UAAU,MAAM,QAAQ,KAAK,KAAK,QAAS,EAAzE,SAAA,CACE,EAAC,EAAD,CAAU,KAAM,EAAK,CAAA,EACpB,CACK,CACL,CAAA,CAAA,CAAA,CACF,GAET"}
+{"version":3,"file":"simple-array-field-C0kpO1cq.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-array-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { PlusIcon, Trash2Icon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\n\nimport { useTanStackFieldContext } from '../form-context';\n\n// ─── ArrayCol ──────────────────────────────────────────────────────────────\n\ntype ArrayColProps = {\n  /**\n   * Fixed column width as a pixel number (e.g. `96`) or any CSS string\n   * (e.g. `'8rem'`, `'20%'`). Omit to let the column expand and fill the\n   * remaining row space (`flex: 1`).\n   */\n  width?: number | string;\n  className?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Layout helper for columns inside a `SimpleArrayField` row. Controls width\n * without repeating `<div className=\"w-24\">` or `<div className=\"flex-1\">`.\n *\n * @example\n * <SimpleArrayField defaultRow={...}>\n *   {i => (\n *     <>\n *       <ArrayCol>                 // flex-1 — takes remaining space\n *         <AppField name={`items[${i}].name`}>...</AppField>\n *       </ArrayCol>\n *       <ArrayCol width={96}>     // 96 px fixed\n *         <AppField name={`items[${i}].qty`}>...</AppField>\n *       </ArrayCol>\n *       <ArrayCol width=\"8rem\">   // CSS string\n *         <AppField name={`items[${i}].tax`}>...</AppField>\n *       </ArrayCol>\n *     </>\n *   )}\n * </SimpleArrayField>\n */\nexport function ArrayCol({ width, className, children }: ArrayColProps) {\n  const style: React.CSSProperties = width ? { width: typeof width === 'number' ? `${width}px` : width, flexShrink: 0 } : { flex: 1, minWidth: 0 };\n\n  return (\n    <div data-slot=\"array-col\" style={style} className={className}>\n      {children}\n    </div>\n  );\n}\n\n// ─── ArrayHeaderRow ────────────────────────────────────────────────────────\n\ntype ArrayHeaderRowProps = {\n  className?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Styled header row for a `SimpleArrayField` table. Place it directly above\n * `<SimpleArrayField>` and use `<ArrayCol>` children with text labels to align\n * headers with their columns. A spacer matching the delete-button width is\n * appended automatically.\n *\n * @example\n * <ArrayHeaderRow>\n *   <ArrayCol>Name</ArrayCol>\n *   <ArrayCol width={96}>Price</ArrayCol>\n *   <ArrayCol width={80}>Qty</ArrayCol>\n * </ArrayHeaderRow>\n * <SimpleArrayField defaultRow={...}>\n *   {i => (...)}\n * </SimpleArrayField>\n */\nexport function ArrayHeaderRow({ className, children }: ArrayHeaderRowProps) {\n  return (\n    <div data-slot=\"array-header-row\" className={cn('mb-1 flex items-center gap-2 px-1 text-xs font-medium text-text-positive-weak', className)}>\n      {children}\n      {/* spacer matching the delete icon button width */}\n      <div className=\"min-w-8 w-8 shrink-0\" />\n    </div>\n  );\n}\n\n// ─── SimpleArrayField ──────────────────────────────────────────────────────\n\nexport type SimpleArrayFieldProps<T> = {\n  /**\n   * Shape of a brand-new empty row appended when the user clicks \"Add row\".\n   */\n  defaultRow: T;\n  /**\n   * Render function called once per row. Receives the zero-based row `index`\n   * so you can build field paths like `` `items[${index}].name` ``.\n   */\n  children: (index: number) => React.ReactNode;\n  /** Label on the add button. Defaults to `'Add row'`. */\n  addLabel?: string;\n  className?: string;\n};\n\n/**\n * Array field wrapper that manages rows (add / remove) while letting you\n * freely compose any fields inside each row.\n *\n * @example\n * const { AppForm, AppField } = useTanStackForm({ defaultValues: { items: [] } });\n *\n * <AppForm>\n *   <AppField name=\"items\">\n *     {({ SimpleArrayField }) => (\n *       <SimpleArrayField defaultRow={{ name: null, qty: null }}>\n *         {(i) => (\n *           <div className=\"flex gap-2\">\n *             <AppField name={`items[${i}].name`}>\n *               {({ SimpleTextField }) => <SimpleTextField label=\"Name\" />}\n *             </AppField>\n *             <AppField name={`items[${i}].qty`}>\n *               {({ SimpleNumberField }) => <SimpleNumberField label=\"Qty\" />}\n *             </AppField>\n *           </div>\n *         )}\n *       </SimpleArrayField>\n *     )}\n *   </AppField>\n * </AppForm>\n */\nexport function SimpleArrayField<T>({ defaultRow, children, addLabel = 'Thêm hàng', className }: SimpleArrayFieldProps<T>) {\n  const field = useTanStackFieldContext<T[]>();\n  const rows = field.state.value ?? [];\n\n  const addRow = useCallback(() => {\n    field.pushValue({ ...defaultRow } as T);\n  }, [field, defaultRow]);\n\n  const removeRow = useCallback(\n    (index: number) => {\n      field.removeValue(index);\n    },\n    [field]\n  );\n\n  return (\n    <div data-slot=\"simple-array-field\" className={cn('flex flex-col gap-2', className)}>\n      {rows.map((_, i) => (\n        // biome-ignore lint/suspicious/noArrayIndexKey: index is the stable identity for form rows\n        <div key={i} className=\"flex items-start gap-2\">\n          {children(i)}\n          <Button type=\"button\" size=\"icon\" variant=\"ghost\" color=\"danger\" className=\"min-w-8\" onClick={() => removeRow(i)}>\n            <Trash2Icon size={14} />\n          </Button>\n        </div>\n      ))}\n\n      <div>\n        <Button type=\"button\" variant=\"outline\" color=\"muted\" size=\"xs\" onClick={addRow}>\n          <PlusIcon size={13} />\n          {addLabel}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"6RA8CA,SAAgB,EAAS,CAAE,QAAO,YAAW,YAA2B,CAGtE,OACE,EAAC,MAAD,CAAK,YAAU,YAAY,MAHM,EAAQ,CAAE,MAAO,OAAO,GAAU,SAAW,GAAG,EAAM,IAAM,EAAO,WAAY,CAAE,EAAI,CAAE,KAAM,EAAG,SAAU,CAAE,EAGzF,YACjD,UACE,CAAA,CAET,CAyBA,SAAgB,EAAe,CAAE,YAAW,YAAiC,CAC3E,OACE,EAAC,MAAD,CAAK,YAAU,mBAAmB,UAAW,EAAG,gFAAiF,CAAS,EAA1I,SAAA,CACG,EAED,EAAC,MAAD,CAAK,UAAU,sBAAwB,CAAA,CACpC,GAET,CA6CA,SAAgB,EAAoB,CAAE,aAAY,WAAU,WAAW,YAAa,aAAuC,CACzH,IAAM,EAAQ,EAA6B,EACrC,EAAO,EAAM,MAAM,OAAS,CAAC,EAE7B,EAAS,MAAkB,CAC/B,EAAM,UAAU,CAAE,GAAG,CAAW,CAAM,CACxC,EAAG,CAAC,EAAO,CAAU,CAAC,EAEhB,EAAY,EACf,GAAkB,CACjB,EAAM,YAAY,CAAK,CACzB,EACA,CAAC,CAAK,CACR,EAEA,OACE,EAAC,MAAD,CAAK,YAAU,qBAAqB,UAAW,EAAG,sBAAuB,CAAS,EAAlF,SAAA,CACG,EAAK,KAAK,EAAG,IAEZ,EAAC,MAAD,CAAa,UAAU,yBAAvB,SAAA,CACG,EAAS,CAAC,EACX,EAAC,EAAD,CAAQ,KAAK,SAAS,KAAK,OAAO,QAAQ,QAAQ,MAAM,SAAS,UAAU,UAAU,YAAe,EAAU,CAAC,EAC7G,SAAA,EAAC,EAAD,CAAY,KAAM,EAAK,CAAA,CACjB,CAAA,CACL,CALK,EAAA,CAKL,CACN,EAED,EAAC,MAAD,CAAA,SACE,EAAC,EAAD,CAAQ,KAAK,SAAS,QAAQ,UAAU,MAAM,QAAQ,KAAK,KAAK,QAAS,EAAzE,SAAA,CACE,EAAC,EAAD,CAAU,KAAM,EAAK,CAAA,EACpB,CACK,CACL,CAAA,CAAA,CAAA,CACF,GAET"}

package/dist/simple-boolean-field-36jmOxCR.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/checkbox.cjs"),t=require("./tanstack-form-BiOihtxs.cjs"),n=require("./ui/label.cjs"),r=require("./ui/switch.cjs");let i=require("react"),a=require("react/jsx-runtime"),o=require("@tanstack/react-form");const s=({label:s,required:c,disabled:l,variant:u=`checkbox`})=>{let d=(0,i.useId)(),{form:f,name:p,state:m,handleBlur:h,handleChange:g}=t.rt(),_=(0,o.useStore)(f.store,({isSubmitting:e})=>e),v=m.meta.isTouched&&!m.meta.isValid,y=m.value??!1,b=l||_,x=(0,i.useCallback)(e=>{_||g(e)},[_,g]);return(0,a.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[(0,a.jsxs)(`div`,{className:`flex items-center gap-2 h-9`,children:[u===`switch`?(0,a.jsx)(r.Switch,{id:d,name:p,checked:y,disabled:b,"aria-invalid":v,onBlur:h,onCheckedChange:x}):(0,a.jsx)(e.Checkbox,{id:d,name:p,checked:y,disabled:b,"aria-invalid":v,onBlur:h,onCheckedChange:x}),s&&(0,a.jsxs)(n.Label,{htmlFor:d,className:`cursor-pointer`,children:[s,c&&(0,a.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]})]}),v&&(0,a.jsx)(t.Y,{errors:m.meta.errors})]})};exports.SimpleBooleanField=s;
+//# sourceMappingURL=simple-boolean-field-36jmOxCR.cjs.map

package/dist/{simple-boolean-field-DRapzNrB.cjs.map → simple-boolean-field-36jmOxCR.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-boolean-field-DRapzNrB.cjs","names":["useTanStackFieldContext","Switch","Checkbox","Label","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-boolean-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { Label } from '@/components/ui/label';\nimport { Switch } from '@/components/ui/switch';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  required?: boolean;\n  disabled?: boolean;\n  variant?: 'checkbox' | 'switch';\n};\n\nexport const SimpleBooleanField: React.FC<Props> = ({ label, required, disabled, variant = 'checkbox' }) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<boolean | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const checked = state.value ?? false;\n  const isDisabled = disabled || isSubmitting;\n\n  const onCheckedChange = useCallback(\n    (value: boolean) => {\n      if (isSubmitting) return;\n      handleChange(value);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <div className=\"flex items-center gap-2 h-9\">\n        {variant === 'switch' ? (\n          <Switch id={id} name={name} checked={checked} disabled={isDisabled} aria-invalid={_invalid} onBlur={handleBlur} onCheckedChange={onCheckedChange} />\n        ) : (\n          <Checkbox id={id} name={name} checked={checked} disabled={isDisabled} aria-invalid={_invalid} onBlur={handleBlur} onCheckedChange={onCheckedChange} />\n        )}\n        {label && (\n          <Label htmlFor={id} className=\"cursor-pointer\">\n            {label}\n            {required && <span className=\"text-danger-strong\">*</span>}\n          </Label>\n        )}\n      </div>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"kQAoBA,MAAa,GAAuC,CAAE,QAAO,WAAU,WAAU,UAAU,cAAiB,CAC1G,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,EAAwC,EAE1F,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAU,EAAM,OAAS,GACzB,EAAa,GAAY,EAEzB,GAAA,EAAA,EAAA,YAAA,CACH,GAAmB,CACd,GACJ,EAAa,CAAK,CACpB,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,EACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,8BAAf,SAAA,CACG,IAAY,UACX,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAY,KAAU,OAAe,UAAS,SAAU,EAAY,eAAc,EAAU,OAAQ,EAA6B,iBAAkB,CAAA,GAEnJ,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CAAc,KAAU,OAAe,UAAS,SAAU,EAAY,eAAc,EAAU,OAAQ,EAA6B,iBAAkB,CAAA,EAEtJ,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAI,UAAU,iBAA9B,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,CAEN,CAAA,CAAA,CACJ,CAAA,EAAA,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-boolean-field-36jmOxCR.cjs","names":["useTanStackFieldContext","Switch","Checkbox","Label","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-boolean-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { Label } from '@/components/ui/label';\nimport { Switch } from '@/components/ui/switch';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  required?: boolean;\n  disabled?: boolean;\n  variant?: 'checkbox' | 'switch';\n};\n\nexport const SimpleBooleanField: React.FC<Props> = ({ label, required, disabled, variant = 'checkbox' }) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<boolean | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const checked = state.value ?? false;\n  const isDisabled = disabled || isSubmitting;\n\n  const onCheckedChange = useCallback(\n    (value: boolean) => {\n      if (isSubmitting) return;\n      handleChange(value);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <div className=\"flex items-center gap-2 h-9\">\n        {variant === 'switch' ? (\n          <Switch id={id} name={name} checked={checked} disabled={isDisabled} aria-invalid={_invalid} onBlur={handleBlur} onCheckedChange={onCheckedChange} />\n        ) : (\n          <Checkbox id={id} name={name} checked={checked} disabled={isDisabled} aria-invalid={_invalid} onBlur={handleBlur} onCheckedChange={onCheckedChange} />\n        )}\n        {label && (\n          <Label htmlFor={id} className=\"cursor-pointer\">\n            {label}\n            {required && <span className=\"text-danger-strong\">*</span>}\n          </Label>\n        )}\n      </div>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"gOAoBA,MAAa,GAAuC,CAAE,QAAO,WAAU,WAAU,UAAU,cAAiB,CAC1G,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,GAAwC,EAE1F,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAU,EAAM,OAAS,GACzB,EAAa,GAAY,EAEzB,GAAA,EAAA,EAAA,YAAA,CACH,GAAmB,CACd,GACJ,EAAa,CAAK,CACpB,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,EACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,8BAAf,SAAA,CACG,IAAY,UACX,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAY,KAAU,OAAe,UAAS,SAAU,EAAY,eAAc,EAAU,OAAQ,EAA6B,iBAAkB,CAAA,GAEnJ,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CAAc,KAAU,OAAe,UAAS,SAAU,EAAY,eAAc,EAAU,OAAQ,EAA6B,iBAAkB,CAAA,EAEtJ,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAI,UAAU,iBAA9B,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,CAEN,CAAA,CAAA,CACJ,CAAA,EAAA,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-boolean-field-Bdc4wuUU.mjs

@@ -0,0 +1,2 @@
+import{Y as e,rt as t}from"./tanstack-form-Do6xL2kv.mjs";import{Checkbox as n}from"./ui/checkbox.mjs";import{Label as r}from"./ui/label.mjs";import{Switch as i}from"./ui/switch.mjs";import{useCallback as a,useId as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{useStore as l}from"@tanstack/react-form";const u=({label:u,required:d,disabled:f,variant:p=`checkbox`})=>{let m=o(),{form:h,name:g,state:_,handleBlur:v,handleChange:y}=t(),b=l(h.store,({isSubmitting:e})=>e),x=_.meta.isTouched&&!_.meta.isValid,S=_.value??!1,C=f||b,w=a(e=>{b||y(e)},[b,y]);return c(`div`,{className:`flex flex-col gap-1.5`,children:[c(`div`,{className:`flex items-center gap-2 h-9`,children:[s(p===`switch`?i:n,{id:m,name:g,checked:S,disabled:C,"aria-invalid":x,onBlur:v,onCheckedChange:w}),u&&c(r,{htmlFor:m,className:`cursor-pointer`,children:[u,d&&s(`span`,{className:`text-danger-strong`,children:`*`})]})]}),x&&s(e,{errors:_.meta.errors})]})};export{u as SimpleBooleanField};
+//# sourceMappingURL=simple-boolean-field-Bdc4wuUU.mjs.map

package/dist/{simple-boolean-field-GQJyeyVS.mjs.map → simple-boolean-field-Bdc4wuUU.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-boolean-field-GQJyeyVS.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-boolean-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { Label } from '@/components/ui/label';\nimport { Switch } from '@/components/ui/switch';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  required?: boolean;\n  disabled?: boolean;\n  variant?: 'checkbox' | 'switch';\n};\n\nexport const SimpleBooleanField: React.FC<Props> = ({ label, required, disabled, variant = 'checkbox' }) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<boolean | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const checked = state.value ?? false;\n  const isDisabled = disabled || isSubmitting;\n\n  const onCheckedChange = useCallback(\n    (value: boolean) => {\n      if (isSubmitting) return;\n      handleChange(value);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <div className=\"flex items-center gap-2 h-9\">\n        {variant === 'switch' ? (\n          <Switch id={id} name={name} checked={checked} disabled={isDisabled} aria-invalid={_invalid} onBlur={handleBlur} onCheckedChange={onCheckedChange} />\n        ) : (\n          <Checkbox id={id} name={name} checked={checked} disabled={isDisabled} aria-invalid={_invalid} onBlur={handleBlur} onCheckedChange={onCheckedChange} />\n        )}\n        {label && (\n          <Label htmlFor={id} className=\"cursor-pointer\">\n            {label}\n            {required && <span className=\"text-danger-strong\">*</span>}\n          </Label>\n        )}\n      </div>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"iXAoBA,MAAa,GAAuC,CAAE,QAAO,WAAU,WAAU,UAAU,cAAiB,CAC1G,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAwC,EAE1F,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAU,EAAM,OAAS,GACzB,EAAa,GAAY,EAEzB,EAAkB,EACrB,GAAmB,CACd,GACJ,EAAa,CAAK,CACpB,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACE,EAAC,MAAD,CAAK,UAAU,8BAAf,SAAA,CAEI,EADD,IAAY,SACV,EAEA,EAFD,CAAY,KAAU,OAAe,UAAS,SAAU,EAAY,eAAc,EAAU,OAAQ,EAA6B,iBAAkB,CAEE,EAEtJ,GACC,EAAC,EAAD,CAAO,QAAS,EAAI,UAAU,iBAA9B,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,CAEN,CAAA,CAAA,CACJ,CAAA,EAAA,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-boolean-field-Bdc4wuUU.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-boolean-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { Label } from '@/components/ui/label';\nimport { Switch } from '@/components/ui/switch';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  required?: boolean;\n  disabled?: boolean;\n  variant?: 'checkbox' | 'switch';\n};\n\nexport const SimpleBooleanField: React.FC<Props> = ({ label, required, disabled, variant = 'checkbox' }) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<boolean | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const checked = state.value ?? false;\n  const isDisabled = disabled || isSubmitting;\n\n  const onCheckedChange = useCallback(\n    (value: boolean) => {\n      if (isSubmitting) return;\n      handleChange(value);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <div className=\"flex items-center gap-2 h-9\">\n        {variant === 'switch' ? (\n          <Switch id={id} name={name} checked={checked} disabled={isDisabled} aria-invalid={_invalid} onBlur={handleBlur} onCheckedChange={onCheckedChange} />\n        ) : (\n          <Checkbox id={id} name={name} checked={checked} disabled={isDisabled} aria-invalid={_invalid} onBlur={handleBlur} onCheckedChange={onCheckedChange} />\n        )}\n        {label && (\n          <Label htmlFor={id} className=\"cursor-pointer\">\n            {label}\n            {required && <span className=\"text-danger-strong\">*</span>}\n          </Label>\n        )}\n      </div>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"uUAoBA,MAAa,GAAuC,CAAE,QAAO,WAAU,WAAU,UAAU,cAAiB,CAC1G,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAwC,EAE1F,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAU,EAAM,OAAS,GACzB,EAAa,GAAY,EAEzB,EAAkB,EACrB,GAAmB,CACd,GACJ,EAAa,CAAK,CACpB,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACE,EAAC,MAAD,CAAK,UAAU,8BAAf,SAAA,CAEI,EADD,IAAY,SACV,EAEA,EAFD,CAAY,KAAU,OAAe,UAAS,SAAU,EAAY,eAAc,EAAU,OAAQ,EAA6B,iBAAkB,CAEE,EAEtJ,GACC,EAAC,EAAD,CAAO,QAAS,EAAI,UAAU,iBAA9B,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,CAEN,CAAA,CAAA,CACJ,CAAA,EAAA,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-combobox-field-BPDtPj1W.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/button.cjs"),t=require("./ui/command.cjs"),n=require("./ui/popover.cjs"),r=require("./tanstack-form-BiOihtxs.cjs"),i=require("./ui/label.cjs"),a=require("./ui/drawer.cjs");let o=require("react"),s=require("@customafk/react-toolkit/utils"),c=require("react/jsx-runtime"),l=require("@tanstack/react-form"),u=require("@customafk/react-toolkit/hooks/useMobile");const d=({label:d,placeholder:f,required:p,disabled:m,options:h})=>{let g=(0,o.useId)(),{form:_,state:v,handleBlur:y,handleChange:b}=r.rt(),x=(0,l.useStore)(_.store,({isSubmitting:e})=>e),S=(0,u.useIsMobile)(),[C,w]=(0,o.useState)(!1),T=v.meta.isTouched&&!v.meta.isValid,E=m||x,D=h.find(({value:e})=>e===v.value)?.label,O=(0,c.jsxs)(t.Command,{children:[(0,c.jsx)(t.CommandInput,{placeholder:f??`Tìm kiếm…`}),(0,c.jsxs)(t.CommandList,{children:[(0,c.jsx)(t.CommandEmpty,{children:`Không tìm thấy kết quả.`}),(0,c.jsx)(t.CommandGroup,{children:h.map(e=>(0,c.jsx)(t.CommandItem,{value:e.label,onSelect:()=>{b(e.value===v.value?null:e.value),w(!1)},children:e.label},e.value))})]})]});return S?(0,c.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[d&&(0,c.jsxs)(i.Label,{htmlFor:g,children:[d,p&&(0,c.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,c.jsx)(e.Button,{id:g,type:`button`,variant:`outline`,color:`muted`,disabled:E,"aria-invalid":T,className:(0,s.cn)(`w-full justify-start font-normal outline-1 outline-border -outline-offset-1`,!v.value&&`text-text-positive-muted`,T&&`outline-danger bg-danger-bg-subtle`),onBlur:y,onClick:()=>w(!0),children:D??(0,c.jsx)(`span`,{className:`text-text-positive-muted`,children:f})}),(0,c.jsx)(a.Drawer,{open:C,onOpenChange:w,direction:`bottom`,children:(0,c.jsxs)(a.DrawerContent,{children:[(0,c.jsx)(a.DrawerHeader,{children:(0,c.jsx)(a.DrawerTitle,{children:d??f??`Tìm kiếm…`})}),(0,c.jsx)(`div`,{className:`overflow-y-auto pb-safe-bottom`,children:O})]})}),T&&(0,c.jsx)(r.Y,{errors:v.meta.errors})]}):(0,c.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[d&&(0,c.jsxs)(i.Label,{htmlFor:g,children:[d,p&&(0,c.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,c.jsxs)(n.Popover,{children:[(0,c.jsx)(n.PopoverTrigger,{asChild:!0,children:(0,c.jsx)(e.Button,{id:g,variant:`outline`,color:`muted`,size:`lg`,disabled:E,"aria-invalid":T,className:(0,s.cn)(`flex w-full items-center justify-start rounded outline-border font-normal`,`hover:bg-transparent`,`focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak`,`data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`,!v.value&&`text-text-positive-muted`),children:D??(0,c.jsx)(`span`,{className:`text-text-positive-muted`,children:f})})}),(0,c.jsx)(n.PopoverContent,{align:`start`,side:`bottom`,className:`w-[--radix-popover-trigger-width] p-0 rounded`,onBlur:y,children:O})]}),T&&(0,c.jsx)(r.Y,{errors:v.meta.errors})]})};exports.SimpleComboboxField=d;
+//# sourceMappingURL=simple-combobox-field-BPDtPj1W.cjs.map

package/dist/{simple-combobox-field-Cp5dfQv3.cjs.map → simple-combobox-field-BPDtPj1W.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-combobox-field-Cp5dfQv3.cjs","names":["useTanStackFieldContext","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","Label","Button","Drawer","DrawerContent","DrawerHeader","DrawerTitle","FieldError","Popover","PopoverTrigger","PopoverContent"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-combobox-field.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';\nimport { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';\nimport { Label } from '@/components/ui/label';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  disabled?: boolean;\n  options: Array<{ value: string; label: string }>;\n};\n\nexport const SimpleComboboxField: React.FC<Props> = ({ label, placeholder, required, disabled, options }) => {\n  const id = useId();\n  const { form, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n  const isMobile = useIsMobile();\n  const [drawerOpen, setDrawerOpen] = useState(false);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const isDisabled = disabled || isSubmitting;\n\n  const selectedLabel = options.find(({ value }) => value === state.value)?.label;\n\n  const commandList = (\n    <Command>\n      <CommandInput placeholder={placeholder ?? 'Tìm kiếm…'} />\n      <CommandList>\n        <CommandEmpty>Không tìm thấy kết quả.</CommandEmpty>\n        <CommandGroup>\n          {options.map(option => (\n            <CommandItem\n              key={option.value}\n              value={option.label}\n              onSelect={() => {\n                handleChange(option.value === state.value ? null : option.value);\n                setDrawerOpen(false);\n              }}\n            >\n              {option.label}\n            </CommandItem>\n          ))}\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  );\n\n  if (isMobile) {\n    return (\n      <div className=\"flex flex-col gap-1.5\">\n        {label && (\n          <Label htmlFor={id}>\n            {label}\n            {required && <span className=\"text-danger-strong\">*</span>}\n          </Label>\n        )}\n        <Button\n          id={id}\n          type=\"button\"\n          variant=\"outline\"\n          color=\"muted\"\n          disabled={isDisabled}\n          aria-invalid={_invalid}\n          className={cn(\n            'w-full justify-start font-normal outline-1 outline-border -outline-offset-1',\n            !state.value && 'text-text-positive-muted',\n            _invalid && 'outline-danger bg-danger-bg-subtle'\n          )}\n          onBlur={handleBlur}\n          onClick={() => setDrawerOpen(true)}\n        >\n          {selectedLabel ?? <span className=\"text-text-positive-muted\">{placeholder}</span>}\n        </Button>\n\n        <Drawer open={drawerOpen} onOpenChange={setDrawerOpen} direction=\"bottom\">\n          <DrawerContent>\n            <DrawerHeader>\n              <DrawerTitle>{label ?? placeholder ?? 'Tìm kiếm…'}</DrawerTitle>\n            </DrawerHeader>\n            <div className=\"overflow-y-auto pb-safe-bottom\">{commandList}</div>\n          </DrawerContent>\n        </Drawer>\n\n        {_invalid && <FieldError errors={state.meta.errors} />}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            id={id}\n            variant=\"outline\"\n            color=\"muted\"\n            size=\"lg\"\n            disabled={isDisabled}\n            aria-invalid={_invalid}\n            className={cn(\n              'flex w-full items-center justify-start rounded outline-border font-normal',\n              'hover:bg-transparent',\n              'focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak',\n              'data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak',\n              !state.value && 'text-text-positive-muted'\n            )}\n          >\n            {selectedLabel ?? <span className=\"text-text-positive-muted\">{placeholder}</span>}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent align=\"start\" side=\"bottom\" className=\"w-[--radix-popover-trigger-width] p-0 rounded\" onBlur={handleBlur}>\n          {commandList}\n        </PopoverContent>\n      </Popover>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"8ZA0BA,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,WAAU,aAAc,CAC3G,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,EAAuC,EAEnF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EACtE,GAAA,EAAA,EAAA,YAAA,CAAuB,EACvB,CAAC,EAAY,IAAA,EAAA,EAAA,SAAA,CAA0B,EAAK,EAE5C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAa,GAAY,EAEzB,EAAgB,EAAQ,MAAM,CAAE,WAAY,IAAU,EAAM,KAAK,CAAC,EAAE,MAEpE,GACJ,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAc,YAAa,GAAe,WAAc,CAAA,GACxD,EAAA,EAAA,KAAA,CAACC,EAAAA,YAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAA,SAAc,yBAAqC,CAAA,GACnD,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAA,SACG,EAAQ,IAAI,IACX,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAEE,MAAO,EAAO,MACd,aAAgB,CACd,EAAa,EAAO,QAAU,EAAM,MAAQ,KAAO,EAAO,KAAK,EAC/D,EAAc,EAAK,CACrB,EAEC,SAAA,EAAO,KACG,EARN,EAAO,KAQD,CACd,CACW,CAAA,CACH,CAAA,CAAA,CACN,CAAA,CAAA,EA4CX,OAzCI,GAEA,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CACM,KACJ,KAAK,SACL,QAAQ,UACR,MAAM,QACN,SAAU,EACV,eAAc,EACd,WAAA,EAAA,EAAA,GAAA,CACE,8EACA,CAAC,EAAM,OAAS,2BAChB,GAAY,oCACd,EACA,OAAQ,EACR,YAAe,EAAc,EAAI,EAEhC,SAAA,IAAiB,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,2BAA4B,SAAA,CAAkB,CAAA,CAC1E,CAAA,GAER,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,KAAM,EAAY,aAAc,EAAe,UAAU,SAC/D,UAAA,EAAA,EAAA,KAAA,CAACC,EAAAA,cAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAA,SAAc,GAAS,GAAe,WAAyB,CAAA,CACnD,CAAA,GACd,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,iCAAkC,SAAA,CAAiB,CAAA,CACrD,CAAA,CAAA,CACT,CAAA,EAEP,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,KAKP,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACN,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,KAAA,CAACO,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,GACd,UAAA,EAAA,EAAA,IAAA,CAACP,EAAAA,OAAD,CACM,KACJ,QAAQ,UACR,MAAM,QACN,KAAK,KACL,SAAU,EACV,eAAc,EACd,WAAA,EAAA,EAAA,GAAA,CACE,4EACA,uBACA,oFACA,oIACA,CAAC,EAAM,OAAS,0BAClB,EAEC,SAAA,IAAiB,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,2BAA4B,SAAA,CAAkB,CAAA,CAC1E,CAAA,CACM,CAAA,GAChB,EAAA,EAAA,IAAA,CAACQ,EAAAA,eAAD,CAAgB,MAAM,QAAQ,KAAK,SAAS,UAAU,gDAAgD,OAAQ,EAC3G,SAAA,CACa,CAAA,CACT,CAAA,CAAA,EACR,IAAY,EAAA,EAAA,IAAA,CAACH,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-combobox-field-BPDtPj1W.cjs","names":["useTanStackFieldContext","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","Label","Button","Drawer","DrawerContent","DrawerHeader","DrawerTitle","FieldError","Popover","PopoverTrigger","PopoverContent"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-combobox-field.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';\nimport { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';\nimport { Label } from '@/components/ui/label';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  disabled?: boolean;\n  options: Array<{ value: string; label: string }>;\n};\n\nexport const SimpleComboboxField: React.FC<Props> = ({ label, placeholder, required, disabled, options }) => {\n  const id = useId();\n  const { form, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n  const isMobile = useIsMobile();\n  const [drawerOpen, setDrawerOpen] = useState(false);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const isDisabled = disabled || isSubmitting;\n\n  const selectedLabel = options.find(({ value }) => value === state.value)?.label;\n\n  const commandList = (\n    <Command>\n      <CommandInput placeholder={placeholder ?? 'Tìm kiếm…'} />\n      <CommandList>\n        <CommandEmpty>Không tìm thấy kết quả.</CommandEmpty>\n        <CommandGroup>\n          {options.map(option => (\n            <CommandItem\n              key={option.value}\n              value={option.label}\n              onSelect={() => {\n                handleChange(option.value === state.value ? null : option.value);\n                setDrawerOpen(false);\n              }}\n            >\n              {option.label}\n            </CommandItem>\n          ))}\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  );\n\n  if (isMobile) {\n    return (\n      <div className=\"flex flex-col gap-1.5\">\n        {label && (\n          <Label htmlFor={id}>\n            {label}\n            {required && <span className=\"text-danger-strong\">*</span>}\n          </Label>\n        )}\n        <Button\n          id={id}\n          type=\"button\"\n          variant=\"outline\"\n          color=\"muted\"\n          disabled={isDisabled}\n          aria-invalid={_invalid}\n          className={cn(\n            'w-full justify-start font-normal outline-1 outline-border -outline-offset-1',\n            !state.value && 'text-text-positive-muted',\n            _invalid && 'outline-danger bg-danger-bg-subtle'\n          )}\n          onBlur={handleBlur}\n          onClick={() => setDrawerOpen(true)}\n        >\n          {selectedLabel ?? <span className=\"text-text-positive-muted\">{placeholder}</span>}\n        </Button>\n\n        <Drawer open={drawerOpen} onOpenChange={setDrawerOpen} direction=\"bottom\">\n          <DrawerContent>\n            <DrawerHeader>\n              <DrawerTitle>{label ?? placeholder ?? 'Tìm kiếm…'}</DrawerTitle>\n            </DrawerHeader>\n            <div className=\"overflow-y-auto pb-safe-bottom\">{commandList}</div>\n          </DrawerContent>\n        </Drawer>\n\n        {_invalid && <FieldError errors={state.meta.errors} />}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            id={id}\n            variant=\"outline\"\n            color=\"muted\"\n            size=\"lg\"\n            disabled={isDisabled}\n            aria-invalid={_invalid}\n            className={cn(\n              'flex w-full items-center justify-start rounded outline-border font-normal',\n              'hover:bg-transparent',\n              'focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak',\n              'data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak',\n              !state.value && 'text-text-positive-muted'\n            )}\n          >\n            {selectedLabel ?? <span className=\"text-text-positive-muted\">{placeholder}</span>}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent align=\"start\" side=\"bottom\" className=\"w-[--radix-popover-trigger-width] p-0 rounded\" onBlur={handleBlur}>\n          {commandList}\n        </PopoverContent>\n      </Popover>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"4XA0BA,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,WAAU,aAAc,CAC3G,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,GAAuC,EAEnF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EACtE,GAAA,EAAA,EAAA,YAAA,CAAuB,EACvB,CAAC,EAAY,IAAA,EAAA,EAAA,SAAA,CAA0B,EAAK,EAE5C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAa,GAAY,EAEzB,EAAgB,EAAQ,MAAM,CAAE,WAAY,IAAU,EAAM,KAAK,CAAC,EAAE,MAEpE,GACJ,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAc,YAAa,GAAe,WAAc,CAAA,GACxD,EAAA,EAAA,KAAA,CAACC,EAAAA,YAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAA,SAAc,yBAAqC,CAAA,GACnD,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAA,SACG,EAAQ,IAAI,IACX,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAEE,MAAO,EAAO,MACd,aAAgB,CACd,EAAa,EAAO,QAAU,EAAM,MAAQ,KAAO,EAAO,KAAK,EAC/D,EAAc,EAAK,CACrB,EAEC,SAAA,EAAO,KACG,EARN,EAAO,KAQD,CACd,CACW,CAAA,CACH,CAAA,CAAA,CACN,CAAA,CAAA,EA4CX,OAzCI,GAEA,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CACM,KACJ,KAAK,SACL,QAAQ,UACR,MAAM,QACN,SAAU,EACV,eAAc,EACd,WAAA,EAAA,EAAA,GAAA,CACE,8EACA,CAAC,EAAM,OAAS,2BAChB,GAAY,oCACd,EACA,OAAQ,EACR,YAAe,EAAc,EAAI,EAEhC,SAAA,IAAiB,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,2BAA4B,SAAA,CAAkB,CAAA,CAC1E,CAAA,GAER,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,KAAM,EAAY,aAAc,EAAe,UAAU,SAC/D,UAAA,EAAA,EAAA,KAAA,CAACC,EAAAA,cAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAA,SAAc,GAAS,GAAe,WAAyB,CAAA,CACnD,CAAA,GACd,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,iCAAkC,SAAA,CAAiB,CAAA,CACrD,CAAA,CAAA,CACT,CAAA,EAEP,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,KAKP,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACN,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,KAAA,CAACO,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,GACd,UAAA,EAAA,EAAA,IAAA,CAACP,EAAAA,OAAD,CACM,KACJ,QAAQ,UACR,MAAM,QACN,KAAK,KACL,SAAU,EACV,eAAc,EACd,WAAA,EAAA,EAAA,GAAA,CACE,4EACA,uBACA,oFACA,oIACA,CAAC,EAAM,OAAS,0BAClB,EAEC,SAAA,IAAiB,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,2BAA4B,SAAA,CAAkB,CAAA,CAC1E,CAAA,CACM,CAAA,GAChB,EAAA,EAAA,IAAA,CAACQ,EAAAA,eAAD,CAAgB,MAAM,QAAQ,KAAK,SAAS,UAAU,gDAAgD,OAAQ,EAC3G,SAAA,CACa,CAAA,CACT,CAAA,CAAA,EACR,IAAY,EAAA,EAAA,IAAA,CAACH,EAAAA,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-combobox-field-CR5Q6Nsd.mjs

@@ -0,0 +1,2 @@
+import{Y as e,rt as t}from"./tanstack-form-Do6xL2kv.mjs";import{Button as n}from"./ui/button.mjs";import{Command as r,CommandEmpty as i,CommandGroup as a,CommandInput as o,CommandItem as s,CommandList as c}from"./ui/command.mjs";import{Popover as l,PopoverContent as u,PopoverTrigger as d}from"./ui/popover.mjs";import{Label as f}from"./ui/label.mjs";import{Drawer as p,DrawerContent as m,DrawerHeader as h,DrawerTitle as g}from"./ui/drawer.mjs";import{useId as _,useState as v}from"react";import{cn as y}from"@customafk/react-toolkit/utils";import{jsx as b,jsxs as x}from"react/jsx-runtime";import{useStore as S}from"@tanstack/react-form";import{useIsMobile as C}from"@customafk/react-toolkit/hooks/useMobile";const w=({label:w,placeholder:T,required:E,disabled:D,options:O})=>{let k=_(),{form:A,state:j,handleBlur:M,handleChange:N}=t(),P=S(A.store,({isSubmitting:e})=>e),F=C(),[I,L]=v(!1),R=j.meta.isTouched&&!j.meta.isValid,z=D||P,B=O.find(({value:e})=>e===j.value)?.label,V=x(r,{children:[b(o,{placeholder:T??`Tìm kiếm…`}),x(c,{children:[b(i,{children:`Không tìm thấy kết quả.`}),b(a,{children:O.map(e=>b(s,{value:e.label,onSelect:()=>{N(e.value===j.value?null:e.value),L(!1)},children:e.label},e.value))})]})]});return F?x(`div`,{className:`flex flex-col gap-1.5`,children:[w&&x(f,{htmlFor:k,children:[w,E&&b(`span`,{className:`text-danger-strong`,children:`*`})]}),b(n,{id:k,type:`button`,variant:`outline`,color:`muted`,disabled:z,"aria-invalid":R,className:y(`w-full justify-start font-normal outline-1 outline-border -outline-offset-1`,!j.value&&`text-text-positive-muted`,R&&`outline-danger bg-danger-bg-subtle`),onBlur:M,onClick:()=>L(!0),children:B??b(`span`,{className:`text-text-positive-muted`,children:T})}),b(p,{open:I,onOpenChange:L,direction:`bottom`,children:x(m,{children:[b(h,{children:b(g,{children:w??T??`Tìm kiếm…`})}),b(`div`,{className:`overflow-y-auto pb-safe-bottom`,children:V})]})}),R&&b(e,{errors:j.meta.errors})]}):x(`div`,{className:`flex flex-col gap-1.5`,children:[w&&x(f,{htmlFor:k,children:[w,E&&b(`span`,{className:`text-danger-strong`,children:`*`})]}),x(l,{children:[b(d,{asChild:!0,children:b(n,{id:k,variant:`outline`,color:`muted`,size:`lg`,disabled:z,"aria-invalid":R,className:y(`flex w-full items-center justify-start rounded outline-border font-normal`,`hover:bg-transparent`,`focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak`,`data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`,!j.value&&`text-text-positive-muted`),children:B??b(`span`,{className:`text-text-positive-muted`,children:T})})}),b(u,{align:`start`,side:`bottom`,className:`w-[--radix-popover-trigger-width] p-0 rounded`,onBlur:M,children:V})]}),R&&b(e,{errors:j.meta.errors})]})};export{w as SimpleComboboxField};
+//# sourceMappingURL=simple-combobox-field-CR5Q6Nsd.mjs.map

package/dist/{simple-combobox-field-D6IaMJKl.mjs.map → simple-combobox-field-CR5Q6Nsd.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-combobox-field-D6IaMJKl.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-combobox-field.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';\nimport { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';\nimport { Label } from '@/components/ui/label';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  disabled?: boolean;\n  options: Array<{ value: string; label: string }>;\n};\n\nexport const SimpleComboboxField: React.FC<Props> = ({ label, placeholder, required, disabled, options }) => {\n  const id = useId();\n  const { form, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n  const isMobile = useIsMobile();\n  const [drawerOpen, setDrawerOpen] = useState(false);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const isDisabled = disabled || isSubmitting;\n\n  const selectedLabel = options.find(({ value }) => value === state.value)?.label;\n\n  const commandList = (\n    <Command>\n      <CommandInput placeholder={placeholder ?? 'Tìm kiếm…'} />\n      <CommandList>\n        <CommandEmpty>Không tìm thấy kết quả.</CommandEmpty>\n        <CommandGroup>\n          {options.map(option => (\n            <CommandItem\n              key={option.value}\n              value={option.label}\n              onSelect={() => {\n                handleChange(option.value === state.value ? null : option.value);\n                setDrawerOpen(false);\n              }}\n            >\n              {option.label}\n            </CommandItem>\n          ))}\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  );\n\n  if (isMobile) {\n    return (\n      <div className=\"flex flex-col gap-1.5\">\n        {label && (\n          <Label htmlFor={id}>\n            {label}\n            {required && <span className=\"text-danger-strong\">*</span>}\n          </Label>\n        )}\n        <Button\n          id={id}\n          type=\"button\"\n          variant=\"outline\"\n          color=\"muted\"\n          disabled={isDisabled}\n          aria-invalid={_invalid}\n          className={cn(\n            'w-full justify-start font-normal outline-1 outline-border -outline-offset-1',\n            !state.value && 'text-text-positive-muted',\n            _invalid && 'outline-danger bg-danger-bg-subtle'\n          )}\n          onBlur={handleBlur}\n          onClick={() => setDrawerOpen(true)}\n        >\n          {selectedLabel ?? <span className=\"text-text-positive-muted\">{placeholder}</span>}\n        </Button>\n\n        <Drawer open={drawerOpen} onOpenChange={setDrawerOpen} direction=\"bottom\">\n          <DrawerContent>\n            <DrawerHeader>\n              <DrawerTitle>{label ?? placeholder ?? 'Tìm kiếm…'}</DrawerTitle>\n            </DrawerHeader>\n            <div className=\"overflow-y-auto pb-safe-bottom\">{commandList}</div>\n          </DrawerContent>\n        </Drawer>\n\n        {_invalid && <FieldError errors={state.meta.errors} />}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            id={id}\n            variant=\"outline\"\n            color=\"muted\"\n            size=\"lg\"\n            disabled={isDisabled}\n            aria-invalid={_invalid}\n            className={cn(\n              'flex w-full items-center justify-start rounded outline-border font-normal',\n              'hover:bg-transparent',\n              'focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak',\n              'data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak',\n              !state.value && 'text-text-positive-muted'\n            )}\n          >\n            {selectedLabel ?? <span className=\"text-text-positive-muted\">{placeholder}</span>}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent align=\"start\" side=\"bottom\" className=\"w-[--radix-popover-trigger-width] p-0 rounded\" onBlur={handleBlur}>\n          {commandList}\n        </PopoverContent>\n      </Popover>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"ivBA0BA,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,WAAU,aAAc,CAC3G,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEnF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EACtE,EAAW,EAAY,EACvB,CAAC,EAAY,GAAiB,EAAS,EAAK,EAE5C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAa,GAAY,EAEzB,EAAgB,EAAQ,MAAM,CAAE,WAAY,IAAU,EAAM,KAAK,CAAC,EAAE,MAEpE,EACJ,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAc,YAAa,GAAe,WAAc,CAAA,EACxD,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SAAc,yBAAqC,CAAA,EACnD,EAAC,EAAD,CAAA,SACG,EAAQ,IAAI,GACX,EAAC,EAAD,CAEE,MAAO,EAAO,MACd,aAAgB,CACd,EAAa,EAAO,QAAU,EAAM,MAAQ,KAAO,EAAO,KAAK,EAC/D,EAAc,EAAK,CACrB,EAEC,SAAA,EAAO,KACG,EARN,EAAO,KAQD,CACd,CACW,CAAA,CACH,CAAA,CAAA,CACN,CAAA,CAAA,EA4CX,OAzCI,EAEA,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CACM,KACJ,KAAK,SACL,QAAQ,UACR,MAAM,QACN,SAAU,EACV,eAAc,EACd,UAAW,EACT,8EACA,CAAC,EAAM,OAAS,2BAChB,GAAY,oCACd,EACA,OAAQ,EACR,YAAe,EAAc,EAAI,EAEhC,SAAA,GAAiB,EAAC,OAAD,CAAM,UAAU,2BAA4B,SAAA,CAAkB,CAAA,CAC1E,CAAA,EAER,EAAC,EAAD,CAAQ,KAAM,EAAY,aAAc,EAAe,UAAU,SAC/D,SAAA,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAA,SAAc,GAAS,GAAe,WAAyB,CAAA,CACnD,CAAA,EACd,EAAC,MAAD,CAAK,UAAU,iCAAkC,SAAA,CAAiB,CAAA,CACrD,CAAA,CAAA,CACT,CAAA,EAEP,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,IAKP,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,GACd,SAAA,EAAC,EAAD,CACM,KACJ,QAAQ,UACR,MAAM,QACN,KAAK,KACL,SAAU,EACV,eAAc,EACd,UAAW,EACT,4EACA,uBACA,oFACA,oIACA,CAAC,EAAM,OAAS,0BAClB,EAEC,SAAA,GAAiB,EAAC,OAAD,CAAM,UAAU,2BAA4B,SAAA,CAAkB,CAAA,CAC1E,CAAA,CACM,CAAA,EAChB,EAAC,EAAD,CAAgB,MAAM,QAAQ,KAAK,SAAS,UAAU,gDAAgD,OAAQ,EAC3G,SAAA,CACa,CAAA,CACT,CAAA,CAAA,EACR,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-combobox-field-CR5Q6Nsd.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-combobox-field.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';\nimport { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';\nimport { Label } from '@/components/ui/label';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  disabled?: boolean;\n  options: Array<{ value: string; label: string }>;\n};\n\nexport const SimpleComboboxField: React.FC<Props> = ({ label, placeholder, required, disabled, options }) => {\n  const id = useId();\n  const { form, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n  const isMobile = useIsMobile();\n  const [drawerOpen, setDrawerOpen] = useState(false);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const isDisabled = disabled || isSubmitting;\n\n  const selectedLabel = options.find(({ value }) => value === state.value)?.label;\n\n  const commandList = (\n    <Command>\n      <CommandInput placeholder={placeholder ?? 'Tìm kiếm…'} />\n      <CommandList>\n        <CommandEmpty>Không tìm thấy kết quả.</CommandEmpty>\n        <CommandGroup>\n          {options.map(option => (\n            <CommandItem\n              key={option.value}\n              value={option.label}\n              onSelect={() => {\n                handleChange(option.value === state.value ? null : option.value);\n                setDrawerOpen(false);\n              }}\n            >\n              {option.label}\n            </CommandItem>\n          ))}\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  );\n\n  if (isMobile) {\n    return (\n      <div className=\"flex flex-col gap-1.5\">\n        {label && (\n          <Label htmlFor={id}>\n            {label}\n            {required && <span className=\"text-danger-strong\">*</span>}\n          </Label>\n        )}\n        <Button\n          id={id}\n          type=\"button\"\n          variant=\"outline\"\n          color=\"muted\"\n          disabled={isDisabled}\n          aria-invalid={_invalid}\n          className={cn(\n            'w-full justify-start font-normal outline-1 outline-border -outline-offset-1',\n            !state.value && 'text-text-positive-muted',\n            _invalid && 'outline-danger bg-danger-bg-subtle'\n          )}\n          onBlur={handleBlur}\n          onClick={() => setDrawerOpen(true)}\n        >\n          {selectedLabel ?? <span className=\"text-text-positive-muted\">{placeholder}</span>}\n        </Button>\n\n        <Drawer open={drawerOpen} onOpenChange={setDrawerOpen} direction=\"bottom\">\n          <DrawerContent>\n            <DrawerHeader>\n              <DrawerTitle>{label ?? placeholder ?? 'Tìm kiếm…'}</DrawerTitle>\n            </DrawerHeader>\n            <div className=\"overflow-y-auto pb-safe-bottom\">{commandList}</div>\n          </DrawerContent>\n        </Drawer>\n\n        {_invalid && <FieldError errors={state.meta.errors} />}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            id={id}\n            variant=\"outline\"\n            color=\"muted\"\n            size=\"lg\"\n            disabled={isDisabled}\n            aria-invalid={_invalid}\n            className={cn(\n              'flex w-full items-center justify-start rounded outline-border font-normal',\n              'hover:bg-transparent',\n              'focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak',\n              'data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak',\n              !state.value && 'text-text-positive-muted'\n            )}\n          >\n            {selectedLabel ?? <span className=\"text-text-positive-muted\">{placeholder}</span>}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent align=\"start\" side=\"bottom\" className=\"w-[--radix-popover-trigger-width] p-0 rounded\" onBlur={handleBlur}>\n          {commandList}\n        </PopoverContent>\n      </Popover>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"usBA0BA,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,WAAU,aAAc,CAC3G,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEnF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EACtE,EAAW,EAAY,EACvB,CAAC,EAAY,GAAiB,EAAS,EAAK,EAE5C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAa,GAAY,EAEzB,EAAgB,EAAQ,MAAM,CAAE,WAAY,IAAU,EAAM,KAAK,CAAC,EAAE,MAEpE,EACJ,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAc,YAAa,GAAe,WAAc,CAAA,EACxD,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SAAc,yBAAqC,CAAA,EACnD,EAAC,EAAD,CAAA,SACG,EAAQ,IAAI,GACX,EAAC,EAAD,CAEE,MAAO,EAAO,MACd,aAAgB,CACd,EAAa,EAAO,QAAU,EAAM,MAAQ,KAAO,EAAO,KAAK,EAC/D,EAAc,EAAK,CACrB,EAEC,SAAA,EAAO,KACG,EARN,EAAO,KAQD,CACd,CACW,CAAA,CACH,CAAA,CAAA,CACN,CAAA,CAAA,EA4CX,OAzCI,EAEA,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CACM,KACJ,KAAK,SACL,QAAQ,UACR,MAAM,QACN,SAAU,EACV,eAAc,EACd,UAAW,EACT,8EACA,CAAC,EAAM,OAAS,2BAChB,GAAY,oCACd,EACA,OAAQ,EACR,YAAe,EAAc,EAAI,EAEhC,SAAA,GAAiB,EAAC,OAAD,CAAM,UAAU,2BAA4B,SAAA,CAAkB,CAAA,CAC1E,CAAA,EAER,EAAC,EAAD,CAAQ,KAAM,EAAY,aAAc,EAAe,UAAU,SAC/D,SAAA,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAA,SAAc,GAAS,GAAe,WAAyB,CAAA,CACnD,CAAA,EACd,EAAC,MAAD,CAAK,UAAU,iCAAkC,SAAA,CAAiB,CAAA,CACrD,CAAA,CAAA,CACT,CAAA,EAEP,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,IAKP,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,GACd,SAAA,EAAC,EAAD,CACM,KACJ,QAAQ,UACR,MAAM,QACN,KAAK,KACL,SAAU,EACV,eAAc,EACd,UAAW,EACT,4EACA,uBACA,oFACA,oIACA,CAAC,EAAM,OAAS,0BAClB,EAEC,SAAA,GAAiB,EAAC,OAAD,CAAM,UAAU,2BAA4B,SAAA,CAAkB,CAAA,CAC1E,CAAA,CACM,CAAA,EAChB,EAAC,EAAD,CAAgB,MAAM,QAAQ,KAAK,SAAS,UAAU,gDAAgD,OAAQ,EAC3G,SAAA,CACa,CAAA,CACT,CAAA,CAAA,EACR,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-date-field-DUPnGa5d.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/button.cjs"),t=require("./ui/popover.cjs"),n=require("./tanstack-form-BiOihtxs.cjs"),r=require("./ui/label.cjs"),i=require("./ui/calendar.cjs");let a=require("lucide-react"),o=require("react"),s=require("@customafk/react-toolkit/utils"),c=require("react/jsx-runtime"),l=require("@customafk/react-toolkit/date-fns"),u=require("@tanstack/react-form");const d=({label:d,placeholder:f,required:p,disabled:m,minDate:h,maxDate:g})=>{let _=(0,o.useId)(),{form:v,state:y,handleBlur:b,handleChange:x}=n.rt(),S=(0,u.useStore)(v.store,({isSubmitting:e})=>e),C=y.meta.isTouched&&!y.meta.isValid;return(0,c.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[d&&(0,c.jsxs)(r.Label,{htmlFor:_,children:[d,p&&(0,c.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,c.jsxs)(t.Popover,{children:[(0,c.jsx)(t.PopoverTrigger,{asChild:!0,children:(0,c.jsxs)(e.Button,{id:_,variant:`outline`,color:`muted`,size:`lg`,disabled:m||S,"aria-invalid":C,className:(0,s.cn)(`flex w-full items-center justify-between rounded outline-border font-normal`,`hover:bg-transparent`,`focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak`,`data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`,y.value===null&&`text-text-positive-muted`),children:[(0,c.jsx)(`span`,{children:y.value?(0,l.format)(y.value,`PPP`):f??`Select date`}),(0,c.jsx)(a.CalendarDaysIcon,{strokeWidth:1})]})}),(0,c.jsx)(t.PopoverContent,{align:`start`,side:`bottom`,className:`w-fit p-0 rounded`,onBlur:b,children:(0,c.jsx)(i.Calendar,{mode:`single`,selected:y.value??void 0,hidden:{before:h??new Date(1900,0,1),after:g??new Date(2100,11,31)},onSelect:e=>{e&&x(e)}})})]}),C&&(0,c.jsx)(n.Y,{errors:y.meta.errors})]})};exports.SimpleDateField=d;
+//# sourceMappingURL=simple-date-field-DUPnGa5d.cjs.map

package/dist/{simple-date-field-_PSkIXAt.cjs.map → simple-date-field-DUPnGa5d.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-date-field-_PSkIXAt.cjs","names":["useTanStackFieldContext","Label","Popover","PopoverTrigger","Button","CalendarDaysIcon","PopoverContent","Calendar","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-date-field.tsx"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\nimport { CalendarDaysIcon } from 'lucide-react';\n\nimport { format } from '@customafk/react-toolkit/date-fns';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Calendar } from '@/components/ui/calendar';\nimport { Label } from '@/components/ui/label';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  disabled?: boolean;\n  minDate?: Date;\n  maxDate?: Date;\n};\n\nexport const SimpleDateField: React.FC<Props> = ({ label, placeholder, required, disabled, minDate, maxDate }) => {\n  const id = useId();\n  const { form, state, handleBlur, handleChange } = useTanStackFieldContext<Date | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const isDisabled = disabled || isSubmitting;\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            id={id}\n            variant=\"outline\"\n            color=\"muted\"\n            size=\"lg\"\n            disabled={isDisabled}\n            aria-invalid={_invalid}\n            className={cn(\n              'flex w-full items-center justify-between rounded outline-border font-normal',\n              'hover:bg-transparent',\n              'focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak',\n              'data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak',\n              state.value === null && 'text-text-positive-muted'\n            )}\n          >\n            <span>{state.value ? format(state.value, 'PPP') : (placeholder ?? 'Select date')}</span>\n            <CalendarDaysIcon strokeWidth={1} />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent align=\"start\" side=\"bottom\" className=\"w-fit p-0 rounded\" onBlur={handleBlur}>\n          <Calendar\n            mode=\"single\"\n            selected={state.value ?? undefined}\n            hidden={{\n              before: minDate ?? new Date(1900, 0, 1),\n              after: maxDate ?? new Date(2100, 11, 31),\n            }}\n            onSelect={date => {\n              if (!date) return;\n              handleChange(date);\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"qZA2BA,MAAa,GAAoC,CAAE,QAAO,cAAa,WAAU,WAAU,UAAS,aAAc,CAChH,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,EAAqC,EAEjF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAGrD,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,GACd,UAAA,EAAA,EAAA,KAAA,CAACC,EAAAA,OAAD,CACM,KACJ,QAAQ,UACR,MAAM,QACN,KAAK,KACL,SAjBS,GAAY,EAkBrB,eAAc,EACd,WAAA,EAAA,EAAA,GAAA,CACE,8EACA,uBACA,oFACA,oIACA,EAAM,QAAU,MAAQ,0BAC1B,EAbF,SAAA,EAeE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAA,SAAO,EAAM,OAAA,EAAA,EAAA,OAAA,CAAe,EAAM,MAAO,KAAK,EAAK,GAAe,aAAqB,CAAA,GACvF,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAkB,YAAa,CAAI,CAAA,CAC7B,GACM,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAM,QAAQ,KAAK,SAAS,UAAU,oBAAoB,OAAQ,EAChF,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CACE,KAAK,SACL,SAAU,EAAM,OAAS,IAAA,GACzB,OAAQ,CACN,OAAQ,GAAW,IAAI,KAAK,KAAM,EAAG,CAAC,EACtC,MAAO,GAAW,IAAI,KAAK,KAAM,GAAI,EAAE,CACzC,EACA,SAAU,GAAQ,CACX,GACL,EAAa,CAAI,CACnB,CACD,CAAA,CACa,CAAA,CACT,CAAA,CAAA,EACR,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-date-field-DUPnGa5d.cjs","names":["useTanStackFieldContext","Label","Popover","PopoverTrigger","Button","CalendarDaysIcon","PopoverContent","Calendar","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-date-field.tsx"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\nimport { CalendarDaysIcon } from 'lucide-react';\n\nimport { format } from '@customafk/react-toolkit/date-fns';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Calendar } from '@/components/ui/calendar';\nimport { Label } from '@/components/ui/label';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  disabled?: boolean;\n  minDate?: Date;\n  maxDate?: Date;\n};\n\nexport const SimpleDateField: React.FC<Props> = ({ label, placeholder, required, disabled, minDate, maxDate }) => {\n  const id = useId();\n  const { form, state, handleBlur, handleChange } = useTanStackFieldContext<Date | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const isDisabled = disabled || isSubmitting;\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            id={id}\n            variant=\"outline\"\n            color=\"muted\"\n            size=\"lg\"\n            disabled={isDisabled}\n            aria-invalid={_invalid}\n            className={cn(\n              'flex w-full items-center justify-between rounded outline-border font-normal',\n              'hover:bg-transparent',\n              'focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak',\n              'data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak',\n              state.value === null && 'text-text-positive-muted'\n            )}\n          >\n            <span>{state.value ? format(state.value, 'PPP') : (placeholder ?? 'Select date')}</span>\n            <CalendarDaysIcon strokeWidth={1} />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent align=\"start\" side=\"bottom\" className=\"w-fit p-0 rounded\" onBlur={handleBlur}>\n          <Calendar\n            mode=\"single\"\n            selected={state.value ?? undefined}\n            hidden={{\n              before: minDate ?? new Date(1900, 0, 1),\n              after: maxDate ?? new Date(2100, 11, 31),\n            }}\n            onSelect={date => {\n              if (!date) return;\n              handleChange(date);\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"mXA2BA,MAAa,GAAoC,CAAE,QAAO,cAAa,WAAU,WAAU,UAAS,aAAc,CAChH,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,GAAqC,EAEjF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAGrD,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,GACd,UAAA,EAAA,EAAA,KAAA,CAACC,EAAAA,OAAD,CACM,KACJ,QAAQ,UACR,MAAM,QACN,KAAK,KACL,SAjBS,GAAY,EAkBrB,eAAc,EACd,WAAA,EAAA,EAAA,GAAA,CACE,8EACA,uBACA,oFACA,oIACA,EAAM,QAAU,MAAQ,0BAC1B,EAbF,SAAA,EAeE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAA,SAAO,EAAM,OAAA,EAAA,EAAA,OAAA,CAAe,EAAM,MAAO,KAAK,EAAK,GAAe,aAAqB,CAAA,GACvF,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAkB,YAAa,CAAI,CAAA,CAC7B,GACM,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAM,QAAQ,KAAK,SAAS,UAAU,oBAAoB,OAAQ,EAChF,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CACE,KAAK,SACL,SAAU,EAAM,OAAS,IAAA,GACzB,OAAQ,CACN,OAAQ,GAAW,IAAI,KAAK,KAAM,EAAG,CAAC,EACtC,MAAO,GAAW,IAAI,KAAK,KAAM,GAAI,EAAE,CACzC,EACA,SAAU,GAAQ,CACX,GACL,EAAa,CAAI,CACnB,CACD,CAAA,CACa,CAAA,CACT,CAAA,CAAA,EACR,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-date-field-DkhG2o7I.mjs

@@ -0,0 +1,2 @@
+import{Y as e,rt as t}from"./tanstack-form-Do6xL2kv.mjs";import{Button as n}from"./ui/button.mjs";import{Popover as r,PopoverContent as i,PopoverTrigger as a}from"./ui/popover.mjs";import{Label as o}from"./ui/label.mjs";import{Calendar as s}from"./ui/calendar.mjs";import{CalendarDaysIcon as c}from"lucide-react";import{useId as l}from"react";import{cn as u}from"@customafk/react-toolkit/utils";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{format as p}from"@customafk/react-toolkit/date-fns";import{useStore as m}from"@tanstack/react-form";const h=({label:h,placeholder:g,required:_,disabled:v,minDate:y,maxDate:b})=>{let x=l(),{form:S,state:C,handleBlur:w,handleChange:T}=t(),E=m(S.store,({isSubmitting:e})=>e),D=C.meta.isTouched&&!C.meta.isValid;return f(`div`,{className:`flex flex-col gap-1.5`,children:[h&&f(o,{htmlFor:x,children:[h,_&&d(`span`,{className:`text-danger-strong`,children:`*`})]}),f(r,{children:[d(a,{asChild:!0,children:f(n,{id:x,variant:`outline`,color:`muted`,size:`lg`,disabled:v||E,"aria-invalid":D,className:u(`flex w-full items-center justify-between rounded outline-border font-normal`,`hover:bg-transparent`,`focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak`,`data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`,C.value===null&&`text-text-positive-muted`),children:[d(`span`,{children:C.value?p(C.value,`PPP`):g??`Select date`}),d(c,{strokeWidth:1})]})}),d(i,{align:`start`,side:`bottom`,className:`w-fit p-0 rounded`,onBlur:w,children:d(s,{mode:`single`,selected:C.value??void 0,hidden:{before:y??new Date(1900,0,1),after:b??new Date(2100,11,31)},onSelect:e=>{e&&T(e)}})})]}),D&&d(e,{errors:C.meta.errors})]})};export{h as SimpleDateField};
+//# sourceMappingURL=simple-date-field-DkhG2o7I.mjs.map

package/dist/{simple-date-field-dszQs7Ik.mjs.map → simple-date-field-DkhG2o7I.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-date-field-dszQs7Ik.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-date-field.tsx"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\nimport { CalendarDaysIcon } from 'lucide-react';\n\nimport { format } from '@customafk/react-toolkit/date-fns';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Calendar } from '@/components/ui/calendar';\nimport { Label } from '@/components/ui/label';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  disabled?: boolean;\n  minDate?: Date;\n  maxDate?: Date;\n};\n\nexport const SimpleDateField: React.FC<Props> = ({ label, placeholder, required, disabled, minDate, maxDate }) => {\n  const id = useId();\n  const { form, state, handleBlur, handleChange } = useTanStackFieldContext<Date | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const isDisabled = disabled || isSubmitting;\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            id={id}\n            variant=\"outline\"\n            color=\"muted\"\n            size=\"lg\"\n            disabled={isDisabled}\n            aria-invalid={_invalid}\n            className={cn(\n              'flex w-full items-center justify-between rounded outline-border font-normal',\n              'hover:bg-transparent',\n              'focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak',\n              'data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak',\n              state.value === null && 'text-text-positive-muted'\n            )}\n          >\n            <span>{state.value ? format(state.value, 'PPP') : (placeholder ?? 'Select date')}</span>\n            <CalendarDaysIcon strokeWidth={1} />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent align=\"start\" side=\"bottom\" className=\"w-fit p-0 rounded\" onBlur={handleBlur}>\n          <Calendar\n            mode=\"single\"\n            selected={state.value ?? undefined}\n            hidden={{\n              before: minDate ?? new Date(1900, 0, 1),\n              after: maxDate ?? new Date(2100, 11, 31),\n            }}\n            onSelect={date => {\n              if (!date) return;\n              handleChange(date);\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"klBA2BA,MAAa,GAAoC,CAAE,QAAO,cAAa,WAAU,WAAU,UAAS,aAAc,CAChH,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,QAAO,aAAY,gBAAiB,EAAqC,EAEjF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAGrD,OACE,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,GACd,SAAA,EAAC,EAAD,CACM,KACJ,QAAQ,UACR,MAAM,QACN,KAAK,KACL,SAjBS,GAAY,EAkBrB,eAAc,EACd,UAAW,EACT,8EACA,uBACA,oFACA,oIACA,EAAM,QAAU,MAAQ,0BAC1B,EAbF,SAAA,CAeE,EAAC,OAAD,CAAA,SAAO,EAAM,MAAQ,EAAO,EAAM,MAAO,KAAK,EAAK,GAAe,aAAqB,CAAA,EACvF,EAAC,EAAD,CAAkB,YAAa,CAAI,CAAA,CAC7B,GACM,CAAA,EAChB,EAAC,EAAD,CAAgB,MAAM,QAAQ,KAAK,SAAS,UAAU,oBAAoB,OAAQ,EAChF,SAAA,EAAC,EAAD,CACE,KAAK,SACL,SAAU,EAAM,OAAS,IAAA,GACzB,OAAQ,CACN,OAAQ,GAAW,IAAI,KAAK,KAAM,EAAG,CAAC,EACtC,MAAO,GAAW,IAAI,KAAK,KAAM,GAAI,EAAE,CACzC,EACA,SAAU,GAAQ,CACX,GACL,EAAa,CAAI,CACnB,CACD,CAAA,CACa,CAAA,CACT,CAAA,CAAA,EACR,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-date-field-DkhG2o7I.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-date-field.tsx"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\nimport { CalendarDaysIcon } from 'lucide-react';\n\nimport { format } from '@customafk/react-toolkit/date-fns';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Calendar } from '@/components/ui/calendar';\nimport { Label } from '@/components/ui/label';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  disabled?: boolean;\n  minDate?: Date;\n  maxDate?: Date;\n};\n\nexport const SimpleDateField: React.FC<Props> = ({ label, placeholder, required, disabled, minDate, maxDate }) => {\n  const id = useId();\n  const { form, state, handleBlur, handleChange } = useTanStackFieldContext<Date | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const isDisabled = disabled || isSubmitting;\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            id={id}\n            variant=\"outline\"\n            color=\"muted\"\n            size=\"lg\"\n            disabled={isDisabled}\n            aria-invalid={_invalid}\n            className={cn(\n              'flex w-full items-center justify-between rounded outline-border font-normal',\n              'hover:bg-transparent',\n              'focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak',\n              'data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak',\n              state.value === null && 'text-text-positive-muted'\n            )}\n          >\n            <span>{state.value ? format(state.value, 'PPP') : (placeholder ?? 'Select date')}</span>\n            <CalendarDaysIcon strokeWidth={1} />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent align=\"start\" side=\"bottom\" className=\"w-fit p-0 rounded\" onBlur={handleBlur}>\n          <Calendar\n            mode=\"single\"\n            selected={state.value ?? undefined}\n            hidden={{\n              before: minDate ?? new Date(1900, 0, 1),\n              after: maxDate ?? new Date(2100, 11, 31),\n            }}\n            onSelect={date => {\n              if (!date) return;\n              handleChange(date);\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"wiBA2BA,MAAa,GAAoC,CAAE,QAAO,cAAa,WAAU,WAAU,UAAS,aAAc,CAChH,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,QAAO,aAAY,gBAAiB,EAAqC,EAEjF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAGrD,OACE,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,GACd,SAAA,EAAC,EAAD,CACM,KACJ,QAAQ,UACR,MAAM,QACN,KAAK,KACL,SAjBS,GAAY,EAkBrB,eAAc,EACd,UAAW,EACT,8EACA,uBACA,oFACA,oIACA,EAAM,QAAU,MAAQ,0BAC1B,EAbF,SAAA,CAeE,EAAC,OAAD,CAAA,SAAO,EAAM,MAAQ,EAAO,EAAM,MAAO,KAAK,EAAK,GAAe,aAAqB,CAAA,EACvF,EAAC,EAAD,CAAkB,YAAa,CAAI,CAAA,CAC7B,GACM,CAAA,EAChB,EAAC,EAAD,CAAgB,MAAM,QAAQ,KAAK,SAAS,UAAU,oBAAoB,OAAQ,EAChF,SAAA,EAAC,EAAD,CACE,KAAK,SACL,SAAU,EAAM,OAAS,IAAA,GACzB,OAAQ,CACN,OAAQ,GAAW,IAAI,KAAK,KAAM,EAAG,CAAC,EACtC,MAAO,GAAW,IAAI,KAAK,KAAM,GAAI,EAAE,CACzC,EACA,SAAU,GAAQ,CACX,GACL,EAAa,CAAI,CACnB,CACD,CAAA,CACa,CAAA,CACT,CAAA,CAAA,EACR,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-email-field-BTYqiFp8.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/input.cjs"),t=require("./tanstack-form-BiOihtxs.cjs"),n=require("./ui/label.cjs");let r=require("lucide-react"),i=require("react"),a=require("@customafk/react-toolkit/utils"),o=require("react/jsx-runtime"),s=require("@tanstack/react-form");const c=({label:c,placeholder:l,required:u,maxLength:d,disabled:f})=>{let p=(0,i.useId)(),{form:m,name:h,state:g,handleBlur:_,handleChange:v}=t.rt(),y=(0,s.useStore)(m.store,({isSubmitting:e})=>e),b=g.meta.isTouched&&!g.meta.isValid,x=(0,i.useCallback)(({target:{value:e}})=>{y||d&&e.length>d||v(e||null)},[y,d,v]);return(0,o.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[c&&(0,o.jsxs)(n.Label,{htmlFor:p,children:[c,u&&(0,o.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,o.jsxs)(`div`,{className:`relative`,children:[(0,o.jsx)(e.Input,{id:p,name:h,type:`email`,value:g.value??``,"aria-invalid":b,autoComplete:`email`,placeholder:l,disabled:f||y,className:(0,a.cn)(`pl-9`),onBlur:_,onChange:x}),(0,o.jsx)(`div`,{className:`pointer-events-none absolute inset-y-0 left-0 flex size-9 items-center justify-center text-muted`,children:(0,o.jsx)(r.AtSignIcon,{size:14})})]}),b&&(0,o.jsx)(t.Y,{errors:g.meta.errors})]})};exports.SimpleEmailField=c;
+//# sourceMappingURL=simple-email-field-BTYqiFp8.cjs.map

package/dist/{simple-email-field-DIHwYrhk.cjs.map → simple-email-field-BTYqiFp8.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-email-field-DIHwYrhk.cjs","names":["useTanStackFieldContext","Label","Input","AtSignIcon","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-email-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { AtSignIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  maxLength?: number;\n  disabled?: boolean;\n};\n\nexport const SimpleEmailField: React.FC<Props> = ({ label, placeholder, required, maxLength, disabled }) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      if (maxLength && value.length > maxLength) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, maxLength, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <div className=\"relative\">\n        <Input\n          id={id}\n          name={name}\n          type=\"email\"\n          value={state.value ?? ''}\n          aria-invalid={_invalid}\n          autoComplete=\"email\"\n          placeholder={placeholder}\n          disabled={disabled || isSubmitting}\n          className={cn('pl-9')}\n          onBlur={handleBlur}\n          onChange={onChange}\n        />\n        <div className=\"pointer-events-none absolute inset-y-0 left-0 flex size-9 items-center justify-center text-muted\">\n          <AtSignIcon size={14} />\n        </div>\n      </div>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"wSAwBA,MAAa,GAAqC,CAAE,QAAO,cAAa,WAAU,YAAW,cAAe,CAC1G,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,EAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,GAAA,EAAA,EAAA,YAAA,EACH,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,WAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CACM,KACE,OACN,KAAK,QACL,MAAO,EAAM,OAAS,GACtB,eAAc,EACd,aAAa,QACA,cACb,SAAU,GAAY,EACtB,WAAA,EAAA,EAAA,GAAA,CAAc,MAAM,EACpB,OAAQ,EACE,UACX,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,mGACb,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,KAAM,EAAK,CAAA,CACpB,CAAA,CACF,IACJ,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-email-field-BTYqiFp8.cjs","names":["useTanStackFieldContext","Label","Input","AtSignIcon","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-email-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { AtSignIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  maxLength?: number;\n  disabled?: boolean;\n};\n\nexport const SimpleEmailField: React.FC<Props> = ({ label, placeholder, required, maxLength, disabled }) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      if (maxLength && value.length > maxLength) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, maxLength, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <div className=\"relative\">\n        <Input\n          id={id}\n          name={name}\n          type=\"email\"\n          value={state.value ?? ''}\n          aria-invalid={_invalid}\n          autoComplete=\"email\"\n          placeholder={placeholder}\n          disabled={disabled || isSubmitting}\n          className={cn('pl-9')}\n          onBlur={handleBlur}\n          onChange={onChange}\n        />\n        <div className=\"pointer-events-none absolute inset-y-0 left-0 flex size-9 items-center justify-center text-muted\">\n          <AtSignIcon size={14} />\n        </div>\n      </div>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"sQAwBA,MAAa,GAAqC,CAAE,QAAO,cAAa,WAAU,YAAW,cAAe,CAC1G,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,GAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,GAAA,EAAA,EAAA,YAAA,EACH,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,WAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CACM,KACE,OACN,KAAK,QACL,MAAO,EAAM,OAAS,GACtB,eAAc,EACd,aAAa,QACA,cACb,SAAU,GAAY,EACtB,WAAA,EAAA,EAAA,GAAA,CAAc,MAAM,EACpB,OAAQ,EACE,UACX,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,mGACb,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,KAAM,EAAK,CAAA,CACpB,CAAA,CACF,IACJ,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-email-field-CpxklyKr.mjs

@@ -0,0 +1,2 @@
+import{Y as e,rt as t}from"./tanstack-form-Do6xL2kv.mjs";import{Input as n}from"./ui/input.mjs";import{Label as r}from"./ui/label.mjs";import{AtSignIcon as i}from"lucide-react";import{useCallback as a,useId as o}from"react";import{cn as s}from"@customafk/react-toolkit/utils";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{useStore as u}from"@tanstack/react-form";const d=({label:d,placeholder:f,required:p,maxLength:m,disabled:h})=>{let g=o(),{form:_,name:v,state:y,handleBlur:b,handleChange:x}=t(),S=u(_.store,({isSubmitting:e})=>e),C=y.meta.isTouched&&!y.meta.isValid,w=a(({target:{value:e}})=>{S||m&&e.length>m||x(e||null)},[S,m,x]);return l(`div`,{className:`flex flex-col gap-1.5`,children:[d&&l(r,{htmlFor:g,children:[d,p&&c(`span`,{className:`text-danger-strong`,children:`*`})]}),l(`div`,{className:`relative`,children:[c(n,{id:g,name:v,type:`email`,value:y.value??``,"aria-invalid":C,autoComplete:`email`,placeholder:f,disabled:h||S,className:s(`pl-9`),onBlur:b,onChange:w}),c(`div`,{className:`pointer-events-none absolute inset-y-0 left-0 flex size-9 items-center justify-center text-muted`,children:c(i,{size:14})})]}),C&&c(e,{errors:y.meta.errors})]})};export{d as SimpleEmailField};
+//# sourceMappingURL=simple-email-field-CpxklyKr.mjs.map

package/dist/{simple-email-field-CwyoXqWo.mjs.map → simple-email-field-CpxklyKr.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-email-field-CwyoXqWo.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-email-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { AtSignIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  maxLength?: number;\n  disabled?: boolean;\n};\n\nexport const SimpleEmailField: React.FC<Props> = ({ label, placeholder, required, maxLength, disabled }) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      if (maxLength && value.length > maxLength) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, maxLength, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <div className=\"relative\">\n        <Input\n          id={id}\n          name={name}\n          type=\"email\"\n          value={state.value ?? ''}\n          aria-invalid={_invalid}\n          autoComplete=\"email\"\n          placeholder={placeholder}\n          disabled={disabled || isSubmitting}\n          className={cn('pl-9')}\n          onBlur={handleBlur}\n          onChange={onChange}\n        />\n        <div className=\"pointer-events-none absolute inset-y-0 left-0 flex size-9 items-center justify-center text-muted\">\n          <AtSignIcon size={14} />\n        </div>\n      </div>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"gaAwBA,MAAa,GAAqC,CAAE,QAAO,cAAa,WAAU,YAAW,cAAe,CAC1G,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,EAAW,GACd,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEA,OACE,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,MAAD,CAAK,UAAU,WAAf,SAAA,CACE,EAAC,EAAD,CACM,KACE,OACN,KAAK,QACL,MAAO,EAAM,OAAS,GACtB,eAAc,EACd,aAAa,QACA,cACb,SAAU,GAAY,EACtB,UAAW,EAAG,MAAM,EACpB,OAAQ,EACE,UACX,CAAA,EACD,EAAC,MAAD,CAAK,UAAU,mGACb,SAAA,EAAC,EAAD,CAAY,KAAM,EAAK,CAAA,CACpB,CAAA,CACF,IACJ,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-email-field-CpxklyKr.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-email-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { AtSignIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  maxLength?: number;\n  disabled?: boolean;\n};\n\nexport const SimpleEmailField: React.FC<Props> = ({ label, placeholder, required, maxLength, disabled }) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      if (maxLength && value.length > maxLength) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, maxLength, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <div className=\"relative\">\n        <Input\n          id={id}\n          name={name}\n          type=\"email\"\n          value={state.value ?? ''}\n          aria-invalid={_invalid}\n          autoComplete=\"email\"\n          placeholder={placeholder}\n          disabled={disabled || isSubmitting}\n          className={cn('pl-9')}\n          onBlur={handleBlur}\n          onChange={onChange}\n        />\n        <div className=\"pointer-events-none absolute inset-y-0 left-0 flex size-9 items-center justify-center text-muted\">\n          <AtSignIcon size={14} />\n        </div>\n      </div>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"sXAwBA,MAAa,GAAqC,CAAE,QAAO,cAAa,WAAU,YAAW,cAAe,CAC1G,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,EAAW,GACd,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEA,OACE,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,MAAD,CAAK,UAAU,WAAf,SAAA,CACE,EAAC,EAAD,CACM,KACE,OACN,KAAK,QACL,MAAO,EAAM,OAAS,GACtB,eAAc,EACd,aAAa,QACA,cACb,SAAU,GAAY,EACtB,UAAW,EAAG,MAAM,EACpB,OAAQ,EACE,UACX,CAAA,EACD,EAAC,MAAD,CAAK,UAAU,mGACb,SAAA,EAAC,EAAD,CAAY,KAAM,EAAK,CAAA,CACpB,CAAA,CACF,IACJ,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-number-field-CTFyTMgw.cjs

@@ -0,0 +1,2 @@
+const e=require("./tanstack-form-BiOihtxs.cjs"),t=require("./ui/label.cjs"),n=require("./number-input-CAr3JaA-.cjs");let r=require("react"),i=require("react/jsx-runtime"),a=require("@tanstack/react-form");const o=({label:o,placeholder:s,required:c,unit:l,allowNegative:u,disabled:d})=>{let f=(0,r.useId)(),{form:p,state:m,handleBlur:h,handleChange:g}=e.rt(),_=(0,a.useStore)(p.store,({isSubmitting:e})=>e),v=m.meta.isTouched&&!m.meta.isValid,y=(0,r.useCallback)(e=>{_||g(e)},[_,g]);return(0,i.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[o&&(0,i.jsxs)(t.Label,{htmlFor:f,children:[o,c&&(0,i.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,i.jsx)(n.t,{id:f,value:m.value,placeholder:s,unitText:l,allowNegative:u,disabled:d||_,onBlur:h,onValueChange:y}),v&&(0,i.jsx)(e.Y,{errors:m.meta.errors})]})};exports.SimpleNumberField=o;
+//# sourceMappingURL=simple-number-field-CTFyTMgw.cjs.map

package/dist/{simple-number-field-VdEeaIiC.cjs.map → simple-number-field-CTFyTMgw.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-number-field-VdEeaIiC.cjs","names":["useTanStackFieldContext","Label","NumberInput","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-number-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Label } from '@/components/ui/label';\nimport { NumberInput } from '@/components/ui/inputs/number-input';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  unit?: string;\n  allowNegative?: boolean;\n  disabled?: boolean;\n};\n\nexport const SimpleNumberField: React.FC<Props> = ({ label, placeholder, required, unit, allowNegative, disabled }) => {\n  const id = useId();\n  const { form, state, handleBlur, handleChange } = useTanStackFieldContext<number | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n  const onValueChange = useCallback(\n    (value: number | null) => {\n      if (isSubmitting) return;\n      handleChange(value);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <NumberInput\n        id={id}\n        value={state.value}\n        placeholder={placeholder}\n        unitText={unit}\n        allowNegative={allowNegative}\n        disabled={disabled || isSubmitting}\n        onBlur={handleBlur}\n        onValueChange={onValueChange}\n      />\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"+OAqBA,MAAa,GAAsC,CAAE,QAAO,cAAa,WAAU,OAAM,gBAAe,cAAe,CACrH,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,EAAuC,EAEnF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,GAAA,EAAA,EAAA,YAAA,CACH,GAAyB,CACpB,GACJ,EAAa,CAAK,CACpB,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CACM,KACJ,MAAO,EAAM,MACA,cACb,SAAU,EACK,gBACf,SAAU,GAAY,EACtB,OAAQ,EACO,eAChB,CAAA,EACA,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-number-field-CTFyTMgw.cjs","names":["useTanStackFieldContext","Label","NumberInput","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-number-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Label } from '@/components/ui/label';\nimport { NumberInput } from '@/components/ui/inputs/number-input';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  unit?: string;\n  allowNegative?: boolean;\n  disabled?: boolean;\n};\n\nexport const SimpleNumberField: React.FC<Props> = ({ label, placeholder, required, unit, allowNegative, disabled }) => {\n  const id = useId();\n  const { form, state, handleBlur, handleChange } = useTanStackFieldContext<number | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n  const onValueChange = useCallback(\n    (value: number | null) => {\n      if (isSubmitting) return;\n      handleChange(value);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <NumberInput\n        id={id}\n        value={state.value}\n        placeholder={placeholder}\n        unitText={unit}\n        allowNegative={allowNegative}\n        disabled={disabled || isSubmitting}\n        onBlur={handleBlur}\n        onValueChange={onValueChange}\n      />\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"6MAqBA,MAAa,GAAsC,CAAE,QAAO,cAAa,WAAU,OAAM,gBAAe,cAAe,CACrH,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,GAAuC,EAEnF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,GAAA,EAAA,EAAA,YAAA,CACH,GAAyB,CACpB,GACJ,EAAa,CAAK,CACpB,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CACM,KACJ,MAAO,EAAM,MACA,cACb,SAAU,EACK,gBACf,SAAU,GAAY,EACtB,OAAQ,EACO,eAChB,CAAA,EACA,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-number-field-DuCvwUG9.mjs

@@ -0,0 +1,2 @@
+import{Y as e,rt as t}from"./tanstack-form-Do6xL2kv.mjs";import{Label as n}from"./ui/label.mjs";import{t as r}from"./number-input-CJcEV9Cg.mjs";import{useCallback as i,useId as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";import{useStore as c}from"@tanstack/react-form";const l=({label:l,placeholder:u,required:d,unit:f,allowNegative:p,disabled:m})=>{let h=a(),{form:g,state:_,handleBlur:v,handleChange:y}=t(),b=c(g.store,({isSubmitting:e})=>e),x=_.meta.isTouched&&!_.meta.isValid,S=i(e=>{b||y(e)},[b,y]);return s(`div`,{className:`flex flex-col gap-1.5`,children:[l&&s(n,{htmlFor:h,children:[l,d&&o(`span`,{className:`text-danger-strong`,children:`*`})]}),o(r,{id:h,value:_.value,placeholder:u,unitText:f,allowNegative:p,disabled:m||b,onBlur:v,onValueChange:S}),x&&o(e,{errors:_.meta.errors})]})};export{l as SimpleNumberField};
+//# sourceMappingURL=simple-number-field-DuCvwUG9.mjs.map

package/dist/{simple-number-field-Id1kV5yR.mjs.map → simple-number-field-DuCvwUG9.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-number-field-Id1kV5yR.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-number-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Label } from '@/components/ui/label';\nimport { NumberInput } from '@/components/ui/inputs/number-input';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  unit?: string;\n  allowNegative?: boolean;\n  disabled?: boolean;\n};\n\nexport const SimpleNumberField: React.FC<Props> = ({ label, placeholder, required, unit, allowNegative, disabled }) => {\n  const id = useId();\n  const { form, state, handleBlur, handleChange } = useTanStackFieldContext<number | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n  const onValueChange = useCallback(\n    (value: number | null) => {\n      if (isSubmitting) return;\n      handleChange(value);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <NumberInput\n        id={id}\n        value={state.value}\n        placeholder={placeholder}\n        unitText={unit}\n        allowNegative={allowNegative}\n        disabled={disabled || isSubmitting}\n        onBlur={handleBlur}\n        onValueChange={onValueChange}\n      />\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"2UAqBA,MAAa,GAAsC,CAAE,QAAO,cAAa,WAAU,OAAM,gBAAe,cAAe,CACrH,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEnF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,EAAgB,EACnB,GAAyB,CACpB,GACJ,EAAa,CAAK,CACpB,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CACM,KACJ,MAAO,EAAM,MACA,cACb,SAAU,EACK,gBACf,SAAU,GAAY,EACtB,OAAQ,EACO,eAChB,CAAA,EACA,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-number-field-DuCvwUG9.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-number-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Label } from '@/components/ui/label';\nimport { NumberInput } from '@/components/ui/inputs/number-input';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  unit?: string;\n  allowNegative?: boolean;\n  disabled?: boolean;\n};\n\nexport const SimpleNumberField: React.FC<Props> = ({ label, placeholder, required, unit, allowNegative, disabled }) => {\n  const id = useId();\n  const { form, state, handleBlur, handleChange } = useTanStackFieldContext<number | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n  const onValueChange = useCallback(\n    (value: number | null) => {\n      if (isSubmitting) return;\n      handleChange(value);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <NumberInput\n        id={id}\n        value={state.value}\n        placeholder={placeholder}\n        unitText={unit}\n        allowNegative={allowNegative}\n        disabled={disabled || isSubmitting}\n        onBlur={handleBlur}\n        onValueChange={onValueChange}\n      />\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"iSAqBA,MAAa,GAAsC,CAAE,QAAO,cAAa,WAAU,OAAM,gBAAe,cAAe,CACrH,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEnF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,EAAgB,EACnB,GAAyB,CACpB,GACJ,EAAa,CAAK,CACpB,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CACM,KACJ,MAAO,EAAM,MACA,cACb,SAAU,EACK,gBACf,SAAU,GAAY,EACtB,OAAQ,EACO,eAChB,CAAA,EACA,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-password-field-BaeUvVB1.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/input.cjs"),t=require("./tanstack-form-BiOihtxs.cjs"),n=require("./ui/label.cjs");let r=require("lucide-react"),i=require("react"),a=require("react/jsx-runtime"),o=require("@tanstack/react-form");const s=({label:s,placeholder:c,required:l,disabled:u})=>{let d=(0,i.useId)(),{form:f,name:p,state:m,handleBlur:h,handleChange:g}=t.rt(),_=(0,o.useStore)(f.store,({isSubmitting:e})=>e),[v,y]=(0,i.useState)(!1),b=m.meta.isTouched&&!m.meta.isValid,x=(0,i.useCallback)(()=>y(e=>!e),[]),S=(0,i.useCallback)(({target:{value:e}})=>{_||g(e||null)},[_,g]);return(0,a.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[s&&(0,a.jsxs)(n.Label,{htmlFor:d,children:[s,l&&(0,a.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,a.jsxs)(`div`,{className:`relative`,children:[(0,a.jsx)(e.Input,{id:d,name:p,type:v?`text`:`password`,value:m.value??``,"aria-invalid":b,autoComplete:`current-password`,placeholder:c,disabled:u||_,className:`pr-9`,onBlur:h,onChange:S}),(0,a.jsx)(`button`,{type:`button`,tabIndex:-1,"aria-label":v?`Ẩn mật khẩu`:`Hiện mật khẩu`,"aria-pressed":v,"aria-controls":d,className:`absolute inset-y-0 right-0 flex size-9 items-center justify-center text-muted outline-none transition-colors hover:text-text-positive focus-visible:text-text-positive disabled:pointer-events-none disabled:opacity-50`,disabled:u||_,onClick:x,children:v?(0,a.jsx)(r.EyeOffIcon,{size:16,"aria-hidden":`true`}):(0,a.jsx)(r.EyeIcon,{size:16,"aria-hidden":`true`})})]}),b&&(0,a.jsx)(t.Y,{errors:m.meta.errors})]})};exports.SimplePasswordField=s;
+//# sourceMappingURL=simple-password-field-BaeUvVB1.cjs.map

package/dist/{simple-password-field-7xbVB1H3.cjs.map → simple-password-field-BaeUvVB1.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-password-field-7xbVB1H3.cjs","names":["useTanStackFieldContext","Label","Input","EyeOffIcon","EyeIcon","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-password-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\n\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  disabled?: boolean;\n};\n\nexport const SimplePasswordField: React.FC<Props> = ({ label, placeholder, required, disabled }) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const [isVisible, setIsVisible] = useState(false);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n  const toggleVisibility = useCallback(() => setIsVisible(prev => !prev), []);\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <div className=\"relative\">\n        <Input\n          id={id}\n          name={name}\n          type={isVisible ? 'text' : 'password'}\n          value={state.value ?? ''}\n          aria-invalid={_invalid}\n          autoComplete=\"current-password\"\n          placeholder={placeholder}\n          disabled={disabled || isSubmitting}\n          className=\"pr-9\"\n          onBlur={handleBlur}\n          onChange={onChange}\n        />\n        <button\n          type=\"button\"\n          tabIndex={-1}\n          aria-label={isVisible ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n          aria-pressed={isVisible}\n          aria-controls={id}\n          className=\"absolute inset-y-0 right-0 flex size-9 items-center justify-center text-muted outline-none transition-colors hover:text-text-positive focus-visible:text-text-positive disabled:pointer-events-none disabled:opacity-50\"\n          disabled={disabled || isSubmitting}\n          onClick={toggleVisibility}\n        >\n          {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n        </button>\n      </div>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"4PAqBA,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,cAAe,CAClG,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,EAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,CAAC,EAAW,IAAA,EAAA,EAAA,SAAA,CAAyB,EAAK,EAE1C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,GAAA,EAAA,EAAA,YAAA,KAAqC,EAAa,GAAQ,CAAC,CAAI,EAAG,CAAC,CAAC,EAEpE,GAAA,EAAA,EAAA,YAAA,EACH,CAAE,OAAQ,CAAE,YAAc,CACrB,GACJ,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,WAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CACM,KACE,OACN,KAAM,EAAY,OAAS,WAC3B,MAAO,EAAM,OAAS,GACtB,eAAc,EACd,aAAa,mBACA,cACb,SAAU,GAAY,EACtB,UAAU,OACV,OAAQ,EACE,UACX,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,SAAU,GACV,aAAY,EAAY,cAAgB,gBACxC,eAAc,EACd,gBAAe,EACf,UAAU,0NACV,SAAU,GAAY,EACtB,QAAS,EAER,SAAA,GAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,KAAM,GAAI,cAAY,MAAQ,CAAA,GAAI,EAAA,EAAA,IAAA,CAACC,EAAAA,QAAD,CAAS,KAAM,GAAI,cAAY,MAAQ,CAAA,CAC5F,CAAA,CACL,IACJ,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-password-field-BaeUvVB1.cjs","names":["useTanStackFieldContext","Label","Input","EyeOffIcon","EyeIcon","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-password-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\n\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  disabled?: boolean;\n};\n\nexport const SimplePasswordField: React.FC<Props> = ({ label, placeholder, required, disabled }) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const [isVisible, setIsVisible] = useState(false);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n  const toggleVisibility = useCallback(() => setIsVisible(prev => !prev), []);\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <div className=\"relative\">\n        <Input\n          id={id}\n          name={name}\n          type={isVisible ? 'text' : 'password'}\n          value={state.value ?? ''}\n          aria-invalid={_invalid}\n          autoComplete=\"current-password\"\n          placeholder={placeholder}\n          disabled={disabled || isSubmitting}\n          className=\"pr-9\"\n          onBlur={handleBlur}\n          onChange={onChange}\n        />\n        <button\n          type=\"button\"\n          tabIndex={-1}\n          aria-label={isVisible ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n          aria-pressed={isVisible}\n          aria-controls={id}\n          className=\"absolute inset-y-0 right-0 flex size-9 items-center justify-center text-muted outline-none transition-colors hover:text-text-positive focus-visible:text-text-positive disabled:pointer-events-none disabled:opacity-50\"\n          disabled={disabled || isSubmitting}\n          onClick={toggleVisibility}\n        >\n          {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n        </button>\n      </div>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"0NAqBA,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,cAAe,CAClG,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,GAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,CAAC,EAAW,IAAA,EAAA,EAAA,SAAA,CAAyB,EAAK,EAE1C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,GAAA,EAAA,EAAA,YAAA,KAAqC,EAAa,GAAQ,CAAC,CAAI,EAAG,CAAC,CAAC,EAEpE,GAAA,EAAA,EAAA,YAAA,EACH,CAAE,OAAQ,CAAE,YAAc,CACrB,GACJ,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,WAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CACM,KACE,OACN,KAAM,EAAY,OAAS,WAC3B,MAAO,EAAM,OAAS,GACtB,eAAc,EACd,aAAa,mBACA,cACb,SAAU,GAAY,EACtB,UAAU,OACV,OAAQ,EACE,UACX,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,SAAU,GACV,aAAY,EAAY,cAAgB,gBACxC,eAAc,EACd,gBAAe,EACf,UAAU,0NACV,SAAU,GAAY,EACtB,QAAS,EAER,SAAA,GAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,KAAM,GAAI,cAAY,MAAQ,CAAA,GAAI,EAAA,EAAA,IAAA,CAACC,EAAAA,QAAD,CAAS,KAAM,GAAI,cAAY,MAAQ,CAAA,CAC5F,CAAA,CACL,IACJ,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-password-field-Cu_JvDEE.mjs

@@ -0,0 +1,2 @@
+import{Y as e,rt as t}from"./tanstack-form-Do6xL2kv.mjs";import{Input as n}from"./ui/input.mjs";import{Label as r}from"./ui/label.mjs";import{EyeIcon as i,EyeOffIcon as a}from"lucide-react";import{useCallback as o,useId as s,useState as c}from"react";import{jsx as l,jsxs as u}from"react/jsx-runtime";import{useStore as d}from"@tanstack/react-form";const f=({label:f,placeholder:p,required:m,disabled:h})=>{let g=s(),{form:_,name:v,state:y,handleBlur:b,handleChange:x}=t(),S=d(_.store,({isSubmitting:e})=>e),[C,w]=c(!1),T=y.meta.isTouched&&!y.meta.isValid,E=o(()=>w(e=>!e),[]),D=o(({target:{value:e}})=>{S||x(e||null)},[S,x]);return u(`div`,{className:`flex flex-col gap-1.5`,children:[f&&u(r,{htmlFor:g,children:[f,m&&l(`span`,{className:`text-danger-strong`,children:`*`})]}),u(`div`,{className:`relative`,children:[l(n,{id:g,name:v,type:C?`text`:`password`,value:y.value??``,"aria-invalid":T,autoComplete:`current-password`,placeholder:p,disabled:h||S,className:`pr-9`,onBlur:b,onChange:D}),l(`button`,{type:`button`,tabIndex:-1,"aria-label":C?`Ẩn mật khẩu`:`Hiện mật khẩu`,"aria-pressed":C,"aria-controls":g,className:`absolute inset-y-0 right-0 flex size-9 items-center justify-center text-muted outline-none transition-colors hover:text-text-positive focus-visible:text-text-positive disabled:pointer-events-none disabled:opacity-50`,disabled:h||S,onClick:E,children:l(C?a:i,{size:16,"aria-hidden":`true`})})]}),T&&l(e,{errors:y.meta.errors})]})};export{f as SimplePasswordField};
+//# sourceMappingURL=simple-password-field-Cu_JvDEE.mjs.map

package/dist/{simple-password-field-DIO9FwQy.mjs.map → simple-password-field-Cu_JvDEE.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-password-field-DIO9FwQy.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-password-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\n\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  disabled?: boolean;\n};\n\nexport const SimplePasswordField: React.FC<Props> = ({ label, placeholder, required, disabled }) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const [isVisible, setIsVisible] = useState(false);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n  const toggleVisibility = useCallback(() => setIsVisible(prev => !prev), []);\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <div className=\"relative\">\n        <Input\n          id={id}\n          name={name}\n          type={isVisible ? 'text' : 'password'}\n          value={state.value ?? ''}\n          aria-invalid={_invalid}\n          autoComplete=\"current-password\"\n          placeholder={placeholder}\n          disabled={disabled || isSubmitting}\n          className=\"pr-9\"\n          onBlur={handleBlur}\n          onChange={onChange}\n        />\n        <button\n          type=\"button\"\n          tabIndex={-1}\n          aria-label={isVisible ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n          aria-pressed={isVisible}\n          aria-controls={id}\n          className=\"absolute inset-y-0 right-0 flex size-9 items-center justify-center text-muted outline-none transition-colors hover:text-text-positive focus-visible:text-text-positive disabled:pointer-events-none disabled:opacity-50\"\n          disabled={disabled || isSubmitting}\n          onClick={toggleVisibility}\n        >\n          {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n        </button>\n      </div>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"uYAqBA,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,cAAe,CAClG,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,CAAC,EAAW,GAAgB,EAAS,EAAK,EAE1C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,EAAmB,MAAkB,EAAa,GAAQ,CAAC,CAAI,EAAG,CAAC,CAAC,EAEpE,EAAW,GACd,CAAE,OAAQ,CAAE,YAAc,CACrB,GACJ,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,MAAD,CAAK,UAAU,WAAf,SAAA,CACE,EAAC,EAAD,CACM,KACE,OACN,KAAM,EAAY,OAAS,WAC3B,MAAO,EAAM,OAAS,GACtB,eAAc,EACd,aAAa,mBACA,cACb,SAAU,GAAY,EACtB,UAAU,OACV,OAAQ,EACE,UACX,CAAA,EACD,EAAC,SAAD,CACE,KAAK,SACL,SAAU,GACV,aAAY,EAAY,cAAgB,gBACxC,eAAc,EACd,gBAAe,EACf,UAAU,0NACV,SAAU,GAAY,EACtB,QAAS,EAER,SAAY,EAAZ,EAAa,EAA8C,EAA/C,CAAY,KAAM,GAAI,cAAY,MAAQ,CAA2C,CAC5F,CAAA,CACL,IACJ,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-password-field-Cu_JvDEE.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-password-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\n\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  disabled?: boolean;\n};\n\nexport const SimplePasswordField: React.FC<Props> = ({ label, placeholder, required, disabled }) => {\n  const id = useId();\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const [isVisible, setIsVisible] = useState(false);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n  const toggleVisibility = useCallback(() => setIsVisible(prev => !prev), []);\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <div className=\"relative\">\n        <Input\n          id={id}\n          name={name}\n          type={isVisible ? 'text' : 'password'}\n          value={state.value ?? ''}\n          aria-invalid={_invalid}\n          autoComplete=\"current-password\"\n          placeholder={placeholder}\n          disabled={disabled || isSubmitting}\n          className=\"pr-9\"\n          onBlur={handleBlur}\n          onChange={onChange}\n        />\n        <button\n          type=\"button\"\n          tabIndex={-1}\n          aria-label={isVisible ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n          aria-pressed={isVisible}\n          aria-controls={id}\n          className=\"absolute inset-y-0 right-0 flex size-9 items-center justify-center text-muted outline-none transition-colors hover:text-text-positive focus-visible:text-text-positive disabled:pointer-events-none disabled:opacity-50\"\n          disabled={disabled || isSubmitting}\n          onClick={toggleVisibility}\n        >\n          {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n        </button>\n      </div>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"6VAqBA,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,cAAe,CAClG,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,CAAC,EAAW,GAAgB,EAAS,EAAK,EAE1C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,EAAmB,MAAkB,EAAa,GAAQ,CAAC,CAAI,EAAG,CAAC,CAAC,EAEpE,EAAW,GACd,CAAE,OAAQ,CAAE,YAAc,CACrB,GACJ,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,MAAD,CAAK,UAAU,WAAf,SAAA,CACE,EAAC,EAAD,CACM,KACE,OACN,KAAM,EAAY,OAAS,WAC3B,MAAO,EAAM,OAAS,GACtB,eAAc,EACd,aAAa,mBACA,cACb,SAAU,GAAY,EACtB,UAAU,OACV,OAAQ,EACE,UACX,CAAA,EACD,EAAC,SAAD,CACE,KAAK,SACL,SAAU,GACV,aAAY,EAAY,cAAgB,gBACxC,eAAc,EACd,gBAAe,EACf,UAAU,0NACV,SAAU,GAAY,EACtB,QAAS,EAER,SAAY,EAAZ,EAAa,EAA8C,EAA/C,CAAY,KAAM,GAAI,cAAY,MAAQ,CAA2C,CAC5F,CAAA,CACL,IACJ,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-radio-group-field-DiU4eQ_c.cjs

@@ -0,0 +1,2 @@
+const e=require("./tanstack-form-BiOihtxs.cjs"),t=require("./ui/label.cjs"),n=require("./ui/radio-group.cjs");let r=require("react/jsx-runtime"),i=require("@tanstack/react-form");const a=({label:a,required:o,disabled:s,options:c,orientation:l=`vertical`})=>{let{form:u,name:d,state:f,handleBlur:p,handleChange:m}=e.rt(),h=(0,i.useStore)(u.store,({isSubmitting:e})=>e),g=f.meta.isTouched&&!f.meta.isValid,_=s||h;return(0,r.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[a&&(0,r.jsxs)(t.Label,{children:[a,o&&(0,r.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,r.jsx)(n.RadioGroup,{name:d,value:f.value??``,disabled:_,"aria-invalid":g,className:l===`horizontal`?`flex flex-row flex-wrap gap-x-4 gap-y-2`:`flex flex-col gap-2`,onValueChange:m,onBlur:p,children:c.map(e=>(0,r.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,r.jsx)(n.RadioGroupItem,{id:`${d}-${e.value}`,value:e.value}),(0,r.jsx)(t.Label,{htmlFor:`${d}-${e.value}`,className:`cursor-pointer font-normal`,children:e.label})]},e.value))}),g&&(0,r.jsx)(e.Y,{errors:f.meta.errors})]})};exports.SimpleRadioGroupField=a;
+//# sourceMappingURL=simple-radio-group-field-DiU4eQ_c.cjs.map

package/dist/{simple-radio-group-field-CxVAr6yW.cjs.map → simple-radio-group-field-DiU4eQ_c.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-radio-group-field-CxVAr6yW.cjs","names":["useTanStackFieldContext","Label","RadioGroup","RadioGroupItem","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-radio-group-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Label } from '@/components/ui/label';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  required?: boolean;\n  disabled?: boolean;\n  options: Array<{ value: string; label: string }>;\n  orientation?: 'horizontal' | 'vertical';\n};\n\nexport const SimpleRadioGroupField: React.FC<Props> = ({ label, required, disabled, options, orientation = 'vertical' }) => {\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const isDisabled = disabled || isSubmitting;\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <RadioGroup\n        name={name}\n        value={state.value ?? ''}\n        disabled={isDisabled}\n        aria-invalid={_invalid}\n        className={orientation === 'horizontal' ? 'flex flex-row flex-wrap gap-x-4 gap-y-2' : 'flex flex-col gap-2'}\n        onValueChange={handleChange}\n        onBlur={handleBlur}\n      >\n        {options.map(option => (\n          <div key={option.value} className=\"flex items-center gap-2\">\n            <RadioGroupItem id={`${name}-${option.value}`} value={option.value} />\n            <Label htmlFor={`${name}-${option.value}`} className=\"cursor-pointer font-normal\">\n              {option.label}\n            </Label>\n          </div>\n        ))}\n      </RadioGroup>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"qNAkBA,MAAa,GAA0C,CAAE,QAAO,WAAU,WAAU,UAAS,cAAc,cAAiB,CAC1H,GAAM,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,EAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAa,GAAY,EAE/B,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAA,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,CAAA,CAAA,GAET,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CACQ,OACN,MAAO,EAAM,OAAS,GACtB,SAAU,EACV,eAAc,EACd,UAAW,IAAgB,aAAe,0CAA4C,sBACtF,cAAe,EACf,OAAQ,EAEP,SAAA,EAAQ,IAAI,IACX,EAAA,EAAA,KAAA,CAAC,MAAD,CAAwB,UAAU,0BAAlC,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,GAAI,GAAG,EAAK,GAAG,EAAO,QAAS,MAAO,EAAO,KAAQ,CAAA,GACrE,EAAA,EAAA,IAAA,CAACF,EAAAA,MAAD,CAAO,QAAS,GAAG,EAAK,GAAG,EAAO,QAAS,UAAU,6BAClD,SAAA,EAAO,KACH,CAAA,CACJ,CALK,EAAA,EAAO,KAKZ,CACN,CACS,CAAA,EACX,IAAY,EAAA,EAAA,IAAA,CAACG,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-radio-group-field-DiU4eQ_c.cjs","names":["useTanStackFieldContext","Label","RadioGroup","RadioGroupItem","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-radio-group-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Label } from '@/components/ui/label';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  required?: boolean;\n  disabled?: boolean;\n  options: Array<{ value: string; label: string }>;\n  orientation?: 'horizontal' | 'vertical';\n};\n\nexport const SimpleRadioGroupField: React.FC<Props> = ({ label, required, disabled, options, orientation = 'vertical' }) => {\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const isDisabled = disabled || isSubmitting;\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <RadioGroup\n        name={name}\n        value={state.value ?? ''}\n        disabled={isDisabled}\n        aria-invalid={_invalid}\n        className={orientation === 'horizontal' ? 'flex flex-row flex-wrap gap-x-4 gap-y-2' : 'flex flex-col gap-2'}\n        onValueChange={handleChange}\n        onBlur={handleBlur}\n      >\n        {options.map(option => (\n          <div key={option.value} className=\"flex items-center gap-2\">\n            <RadioGroupItem id={`${name}-${option.value}`} value={option.value} />\n            <Label htmlFor={`${name}-${option.value}`} className=\"cursor-pointer font-normal\">\n              {option.label}\n            </Label>\n          </div>\n        ))}\n      </RadioGroup>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"mLAkBA,MAAa,GAA0C,CAAE,QAAO,WAAU,WAAU,UAAS,cAAc,cAAiB,CAC1H,GAAM,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,GAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAa,GAAY,EAE/B,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAA,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,CAAA,CAAA,GAET,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CACQ,OACN,MAAO,EAAM,OAAS,GACtB,SAAU,EACV,eAAc,EACd,UAAW,IAAgB,aAAe,0CAA4C,sBACtF,cAAe,EACf,OAAQ,EAEP,SAAA,EAAQ,IAAI,IACX,EAAA,EAAA,KAAA,CAAC,MAAD,CAAwB,UAAU,0BAAlC,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,GAAI,GAAG,EAAK,GAAG,EAAO,QAAS,MAAO,EAAO,KAAQ,CAAA,GACrE,EAAA,EAAA,IAAA,CAACF,EAAAA,MAAD,CAAO,QAAS,GAAG,EAAK,GAAG,EAAO,QAAS,UAAU,6BAClD,SAAA,EAAO,KACH,CAAA,CACJ,CALK,EAAA,EAAO,KAKZ,CACN,CACS,CAAA,EACX,IAAY,EAAA,EAAA,IAAA,CAACG,EAAAA,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-radio-group-field-RJ_cEsxK.mjs

@@ -0,0 +1,2 @@
+import{Y as e,rt as t}from"./tanstack-form-Do6xL2kv.mjs";import{Label as n}from"./ui/label.mjs";import{RadioGroup as r,RadioGroupItem as i}from"./ui/radio-group.mjs";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{useStore as s}from"@tanstack/react-form";const c=({label:c,required:l,disabled:u,options:d,orientation:f=`vertical`})=>{let{form:p,name:m,state:h,handleBlur:g,handleChange:_}=t(),v=s(p.store,({isSubmitting:e})=>e),y=h.meta.isTouched&&!h.meta.isValid,b=u||v;return o(`div`,{className:`flex flex-col gap-1.5`,children:[c&&o(n,{children:[c,l&&a(`span`,{className:`text-danger-strong`,children:`*`})]}),a(r,{name:m,value:h.value??``,disabled:b,"aria-invalid":y,className:f===`horizontal`?`flex flex-row flex-wrap gap-x-4 gap-y-2`:`flex flex-col gap-2`,onValueChange:_,onBlur:g,children:d.map(e=>o(`div`,{className:`flex items-center gap-2`,children:[a(i,{id:`${m}-${e.value}`,value:e.value}),a(n,{htmlFor:`${m}-${e.value}`,className:`cursor-pointer font-normal`,children:e.label})]},e.value))}),y&&a(e,{errors:h.meta.errors})]})};export{c as SimpleRadioGroupField};
+//# sourceMappingURL=simple-radio-group-field-RJ_cEsxK.mjs.map

package/dist/{simple-radio-group-field-BmHWRnns.mjs.map → simple-radio-group-field-RJ_cEsxK.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-radio-group-field-BmHWRnns.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-radio-group-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Label } from '@/components/ui/label';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  required?: boolean;\n  disabled?: boolean;\n  options: Array<{ value: string; label: string }>;\n  orientation?: 'horizontal' | 'vertical';\n};\n\nexport const SimpleRadioGroupField: React.FC<Props> = ({ label, required, disabled, options, orientation = 'vertical' }) => {\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const isDisabled = disabled || isSubmitting;\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <RadioGroup\n        name={name}\n        value={state.value ?? ''}\n        disabled={isDisabled}\n        aria-invalid={_invalid}\n        className={orientation === 'horizontal' ? 'flex flex-row flex-wrap gap-x-4 gap-y-2' : 'flex flex-col gap-2'}\n        onValueChange={handleChange}\n        onBlur={handleBlur}\n      >\n        {options.map(option => (\n          <div key={option.value} className=\"flex items-center gap-2\">\n            <RadioGroupItem id={`${name}-${option.value}`} value={option.value} />\n            <Label htmlFor={`${name}-${option.value}`} className=\"cursor-pointer font-normal\">\n              {option.label}\n            </Label>\n          </div>\n        ))}\n      </RadioGroup>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"kTAkBA,MAAa,GAA0C,CAAE,QAAO,WAAU,WAAU,UAAS,cAAc,cAAiB,CAC1H,GAAM,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAa,GAAY,EAE/B,OACE,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAA,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,CAAA,CAAA,EAET,EAAC,EAAD,CACQ,OACN,MAAO,EAAM,OAAS,GACtB,SAAU,EACV,eAAc,EACd,UAAW,IAAgB,aAAe,0CAA4C,sBACtF,cAAe,EACf,OAAQ,EAEP,SAAA,EAAQ,IAAI,GACX,EAAC,MAAD,CAAwB,UAAU,0BAAlC,SAAA,CACE,EAAC,EAAD,CAAgB,GAAI,GAAG,EAAK,GAAG,EAAO,QAAS,MAAO,EAAO,KAAQ,CAAA,EACrE,EAAC,EAAD,CAAO,QAAS,GAAG,EAAK,GAAG,EAAO,QAAS,UAAU,6BAClD,SAAA,EAAO,KACH,CAAA,CACJ,CALK,EAAA,EAAO,KAKZ,CACN,CACS,CAAA,EACX,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-radio-group-field-RJ_cEsxK.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-radio-group-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Label } from '@/components/ui/label';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  required?: boolean;\n  disabled?: boolean;\n  options: Array<{ value: string; label: string }>;\n  orientation?: 'horizontal' | 'vertical';\n};\n\nexport const SimpleRadioGroupField: React.FC<Props> = ({ label, required, disabled, options, orientation = 'vertical' }) => {\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const isDisabled = disabled || isSubmitting;\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <RadioGroup\n        name={name}\n        value={state.value ?? ''}\n        disabled={isDisabled}\n        aria-invalid={_invalid}\n        className={orientation === 'horizontal' ? 'flex flex-row flex-wrap gap-x-4 gap-y-2' : 'flex flex-col gap-2'}\n        onValueChange={handleChange}\n        onBlur={handleBlur}\n      >\n        {options.map(option => (\n          <div key={option.value} className=\"flex items-center gap-2\">\n            <RadioGroupItem id={`${name}-${option.value}`} value={option.value} />\n            <Label htmlFor={`${name}-${option.value}`} className=\"cursor-pointer font-normal\">\n              {option.label}\n            </Label>\n          </div>\n        ))}\n      </RadioGroup>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"wQAkBA,MAAa,GAA0C,CAAE,QAAO,WAAU,WAAU,UAAS,cAAc,cAAiB,CAC1H,GAAM,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAa,GAAY,EAE/B,OACE,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAA,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,CAAA,CAAA,EAET,EAAC,EAAD,CACQ,OACN,MAAO,EAAM,OAAS,GACtB,SAAU,EACV,eAAc,EACd,UAAW,IAAgB,aAAe,0CAA4C,sBACtF,cAAe,EACf,OAAQ,EAEP,SAAA,EAAQ,IAAI,GACX,EAAC,MAAD,CAAwB,UAAU,0BAAlC,SAAA,CACE,EAAC,EAAD,CAAgB,GAAI,GAAG,EAAK,GAAG,EAAO,QAAS,MAAO,EAAO,KAAQ,CAAA,EACrE,EAAC,EAAD,CAAO,QAAS,GAAG,EAAK,GAAG,EAAO,QAAS,UAAU,6BAClD,SAAA,EAAO,KACH,CAAA,CACJ,CALK,EAAA,EAAO,KAKZ,CACN,CACS,CAAA,EACX,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-select-field-B3uEUqvQ.mjs

@@ -0,0 +1,2 @@
+import{Y as e,rt as t}from"./tanstack-form-Do6xL2kv.mjs";import{Button as n}from"./ui/button.mjs";import{Label as r}from"./ui/label.mjs";import{Drawer as i,DrawerClose as a,DrawerContent as o,DrawerHeader as s,DrawerTitle as c}from"./ui/drawer.mjs";import{Select as l,SelectContent as u,SelectItem as d,SelectTrigger as f,SelectValue as p}from"./ui/select.mjs";import{PackagePlusIcon as m}from"lucide-react";import{useId as h,useState as g}from"react";import{cn as _}from"@customafk/react-toolkit/utils";import{jsx as v,jsxs as y}from"react/jsx-runtime";import{useIsMobile as b}from"@customafk/react-toolkit/hooks/useMobile";const x=({label:x,placeholder:S,required:C,options:w})=>{let T=h(),{state:E,handleBlur:D,handleChange:O}=t(),k=b(),[A,j]=g(!1),M=E.meta.isTouched&&!E.meta.isValid,N=w.find(e=>e.value===E.value)?.label;return k?y(`div`,{className:`flex flex-col gap-1.5`,children:[x&&y(r,{htmlFor:T,children:[x,C&&v(`span`,{className:`text-danger-strong`,children:`*`})]}),v(n,{id:T,type:`button`,variant:`outline`,color:`muted`,className:_(`w-full justify-start font-normal outline-1 outline-border -outline-offset-1`,!E.value&&`text-text-positive-muted`,M&&`outline-danger bg-danger-bg-subtle`),"aria-invalid":M,onBlur:D,onClick:()=>j(!0),children:N??v(`span`,{className:`text-text-positive-muted`,children:S})}),v(i,{open:A,onOpenChange:j,direction:`bottom`,children:y(o,{children:[v(s,{children:v(c,{children:x??S??`Select an option`})}),v(`div`,{className:`flex flex-col overflow-y-auto pb-safe-bottom`,children:w.length>0?w.map(e=>v(a,{asChild:!0,children:v(`button`,{type:`button`,className:_(`flex w-full items-center px-4 py-3 text-left text-sm transition-colors`,`hover:bg-muted-muted active:bg-muted-muted`,E.value===e.value&&`bg-primary-bg-subtle font-medium text-primary`),onClick:()=>{O(e.value),j(!1)},children:e.label})},e.value)):y(`div`,{className:`flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak`,children:[v(m,{strokeWidth:1}),`No options available`]})})]})}),M&&v(e,{errors:E.meta.errors})]}):y(`div`,{className:`flex flex-col gap-1.5`,children:[x&&y(r,{htmlFor:T,children:[x,C&&v(`span`,{className:`text-danger-strong`,children:`*`})]}),y(l,{value:E.value??``,onValueChange:O,children:[v(f,{id:T,"aria-invalid":M?`true`:void 0,onBlur:D,children:v(p,{placeholder:S})}),v(u,{children:w.length>0?w.map(e=>v(d,{value:e.value,children:e.label},e.value)):y(`div`,{className:`flex items-center justify-center gap-x-2 rounded border border-border bg-muted-muted px-4 py-6.5 text-center text-sm text-text-positive-weak`,children:[v(m,{strokeWidth:1}),`No options available`]})})]}),M&&v(e,{errors:E.meta.errors})]})};export{x as SimpleSelectField};
+//# sourceMappingURL=simple-select-field-B3uEUqvQ.mjs.map