@customafk/lunas-ui 0.2.70 → 0.2.72

package/dist/{tanstack-form-DU-ZKXxZ.cjs.map → tanstack-form-CX3lC3mC.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"tanstack-form-DU-ZKXxZ.cjs","names":["Skeleton","Suspense","Impl"],"sources":["../packages/components/features/tanstack-form/components/form-context.ts","../packages/components/features/tanstack-form/tanstack-form.tsx"],"sourcesContent":["'use client';\n\nimport { createFormHookContexts } from '@tanstack/react-form';\n\n/**\n * Shared field/form contexts, split out from `tanstack-form.tsx` so that field and form\n * components can depend on them directly instead of importing back through the file that\n * lazy-loads those same components (which would reintroduce a circular import).\n */\nexport const { fieldContext, formContext, useFieldContext: useTanStackFieldContext, useFormContext: useTanStackFormContext } = createFormHookContexts();\n","'use client';\n\nimport type { ComponentProps, ComponentType } from 'react';\nimport { lazy, Suspense } from 'react';\n\nimport { createFormHook } from '@tanstack/react-form';\n\nimport { Skeleton } from '@/components/ui/skeleton';\n\nimport type { ArrayCol as ArrayColType, ArrayHeaderRow as ArrayHeaderRowType, SimpleArrayFieldProps } from './components/atoms/simple-array-field';\nimport type { SimpleBooleanField as SimpleBooleanFieldType } from './components/atoms/simple-boolean-field';\nimport type { SimpleComboboxField as SimpleComboboxFieldType } from './components/atoms/simple-combobox-field';\nimport type { SimpleDateField as SimpleDateFieldType } from './components/atoms/simple-date-field';\nimport type { SimpleEmailField as SimpleEmailFieldType } from './components/atoms/simple-email-field';\nimport type { SimpleNumberField as SimpleNumberFieldType } from './components/atoms/simple-number-field';\nimport type { SimplePasswordField as SimplePasswordFieldType } from './components/atoms/simple-password-field';\nimport type { SimpleRadioGroupField as SimpleRadioGroupFieldType } from './components/atoms/simple-radio-group-field';\nimport type { SimpleSelectField as SimpleSelectFieldType } from './components/atoms/simple-select-field';\nimport type { SimpleTextField as SimpleTextFieldType } from './components/atoms/simple-text-field';\nimport type { SimpleTextareaField as SimpleTextareaFieldType } from './components/atoms/simple-textarea-field';\nimport type { CheckboxField as CheckboxFieldType } from './components/fields/checkbox-field';\nimport type { ComboboxField as ComboboxFieldType } from './components/fields/combobox-field';\nimport type { DateField as DateFieldType } from './components/fields/date-field';\nimport type { EmailField as EmailFieldType } from './components/fields/email-field';\nimport type { NumberField as NumberFieldType } from './components/fields/number-field';\nimport type { PasswordField as PasswordFieldType } from './components/fields/password-field';\nimport type { RadioGroupField as RadioGroupFieldType } from './components/fields/radio-group-field';\nimport type { SelectField as SelectFieldType } from './components/fields/select-field';\nimport type { SwitchField as SwitchFieldType } from './components/fields/switch-field';\nimport type { TextEditorField as TextEditorFieldType } from './components/fields/text-editor-field';\nimport type { TextField as TextFieldType } from './components/fields/text-field';\nimport type { TextareaField as TextareaFieldType } from './components/fields/textarea-field';\nimport { fieldContext, formContext, useTanStackFieldContext, useTanStackFormContext } from './components/form-context';\nimport type { TanStackActionSubmit as TanStackActionSubmitType } from './components/forms/action-submit';\nimport type { TanStackActionsForm as TanStackActionsFormType } from './components/forms/actions-form';\nimport type { TanStackCardForm as TanStackCardFormType } from './components/forms/card-form';\nimport type { TanStackContainerForm as TanStackContainerFormType } from './components/forms/container-form';\nimport type { TanStackDialogForm as TanStackDialogFormType } from './components/forms/dialog-form';\nimport type { TanStackFieldGroup as TanStackFieldGroupType } from './components/forms/group-field';\nimport type { TanStackPopoverForm as TanStackPopoverFormType } from './components/forms/popover-form';\nimport type { TanStackSectionForm as TanStackSectionFormType } from './components/forms/section-form';\nimport type { TanStackTitleField as TanStackTitleFieldType } from './components/forms/title-field';\nimport type {\n  FieldContentMain as FieldContentMainType,\n  FieldContent as FieldContentType,\n  FieldError as FieldErrorType,\n  FieldGroup as FieldGroupType,\n  FieldLabel as FieldLabelType,\n  FieldSeparator as FieldSeparatorType,\n  Field as FieldType,\n} from './components/ui/field';\n\n/** Input-shaped pulse placeholder shown while a lazy field/form chunk is still loading. */\nfunction FieldSkeleton() {\n  return <Skeleton data-slot=\"tanstack-field-skeleton\" className=\"h-9 w-full rounded\" />;\n}\n\n/**\n * Wraps a `lazy()`-loaded component in its own `Suspense` boundary so it can be dropped\n * anywhere (inside or outside our own form containers) without callers needing to set up\n * Suspense themselves. Keeps this file itself small — the heavy per-field-type\n * implementations (Radix Select/Combobox/date-picker, the rich text editor, etc.) only load\n * when a form actually renders that field type.\n */\nfunction lazyField<P extends object>(loader: () => Promise<{ default: ComponentType<P> }>): ComponentType<P> {\n  const LazyComponent = lazy(loader);\n  return (props: P) => (\n    <Suspense fallback={<FieldSkeleton />}>\n      <LazyComponent {...props} />\n    </Suspense>\n  );\n}\n\n// ─── Rich field components (lazy) ─────────────────────────────────────────────\n\nconst TextField = lazyField<ComponentProps<typeof TextFieldType>>(() => import('./components/fields/text-field').then(m => ({ default: m.TextField })));\nconst TextareaField = lazyField<ComponentProps<typeof TextareaFieldType>>(() =>\n  import('./components/fields/textarea-field').then(m => ({ default: m.TextareaField }))\n);\nconst TextEditorField = lazyField<ComponentProps<typeof TextEditorFieldType>>(() =>\n  import('./components/fields/text-editor-field').then(m => ({ default: m.TextEditorField }))\n);\nconst NumberField = lazyField<ComponentProps<typeof NumberFieldType>>(() => import('./components/fields/number-field').then(m => ({ default: m.NumberField })));\nconst EmailField = lazyField<ComponentProps<typeof EmailFieldType>>(() => import('./components/fields/email-field').then(m => ({ default: m.EmailField })));\nconst PasswordField = lazyField<ComponentProps<typeof PasswordFieldType>>(() =>\n  import('./components/fields/password-field').then(m => ({ default: m.PasswordField }))\n);\nconst SelectField = lazyField<ComponentProps<typeof SelectFieldType>>(() => import('./components/fields/select-field').then(m => ({ default: m.SelectField })));\nconst ComboboxField = lazyField<ComponentProps<typeof ComboboxFieldType>>(() =>\n  import('./components/fields/combobox-field').then(m => ({ default: m.ComboboxField }))\n);\nconst DateField = lazyField<ComponentProps<typeof DateFieldType>>(() => import('./components/fields/date-field').then(m => ({ default: m.DateField })));\nconst SwitchField = lazyField<ComponentProps<typeof SwitchFieldType>>(() => import('./components/fields/switch-field').then(m => ({ default: m.SwitchField })));\nconst RadioGroupField = lazyField<ComponentProps<typeof RadioGroupFieldType>>(() =>\n  import('./components/fields/radio-group-field').then(m => ({ default: m.RadioGroupField }))\n);\nconst CheckboxField = lazyField<ComponentProps<typeof CheckboxFieldType>>(() =>\n  import('./components/fields/checkbox-field').then(m => ({ default: m.CheckboxField }))\n);\n\n// ─── Simple (minimal) field components (lazy) ─────────────────────────────────\n\nconst SimpleTextField = lazyField<ComponentProps<typeof SimpleTextFieldType>>(() =>\n  import('./components/atoms/simple-text-field').then(m => ({ default: m.SimpleTextField }))\n);\nconst SimpleEmailField = lazyField<ComponentProps<typeof SimpleEmailFieldType>>(() =>\n  import('./components/atoms/simple-email-field').then(m => ({ default: m.SimpleEmailField }))\n);\nconst SimplePasswordField = lazyField<ComponentProps<typeof SimplePasswordFieldType>>(() =>\n  import('./components/atoms/simple-password-field').then(m => ({ default: m.SimplePasswordField }))\n);\nconst SimpleTextareaField = lazyField<ComponentProps<typeof SimpleTextareaFieldType>>(() =>\n  import('./components/atoms/simple-textarea-field').then(m => ({ default: m.SimpleTextareaField }))\n);\nconst SimpleNumberField = lazyField<ComponentProps<typeof SimpleNumberFieldType>>(() =>\n  import('./components/atoms/simple-number-field').then(m => ({ default: m.SimpleNumberField }))\n);\nconst SimpleSelectField = lazyField<ComponentProps<typeof SimpleSelectFieldType>>(() =>\n  import('./components/atoms/simple-select-field').then(m => ({ default: m.SimpleSelectField }))\n);\nconst LazySimpleArrayField = lazy(() =>\n  import('./components/atoms/simple-array-field').then(m => ({ default: m.SimpleArrayField as ComponentType<SimpleArrayFieldProps<unknown>> }))\n);\n\n/** Kept as its own generic wrapper (instead of `lazyField`) so callers can still write `<SimpleArrayField<Row> />`. */\nfunction SimpleArrayField<T>(props: SimpleArrayFieldProps<T>) {\n  const Impl = LazySimpleArrayField as ComponentType<SimpleArrayFieldProps<T>>;\n  return (\n    <Suspense fallback={<FieldSkeleton />}>\n      <Impl {...props} />\n    </Suspense>\n  );\n}\n\nconst SimpleBooleanField = lazyField<ComponentProps<typeof SimpleBooleanFieldType>>(() =>\n  import('./components/atoms/simple-boolean-field').then(m => ({ default: m.SimpleBooleanField }))\n);\nconst SimpleComboboxField = lazyField<ComponentProps<typeof SimpleComboboxFieldType>>(() =>\n  import('./components/atoms/simple-combobox-field').then(m => ({ default: m.SimpleComboboxField }))\n);\nconst SimpleDateField = lazyField<ComponentProps<typeof SimpleDateFieldType>>(() =>\n  import('./components/atoms/simple-date-field').then(m => ({ default: m.SimpleDateField }))\n);\nconst SimpleRadioGroupField = lazyField<ComponentProps<typeof SimpleRadioGroupFieldType>>(() =>\n  import('./components/atoms/simple-radio-group-field').then(m => ({ default: m.SimpleRadioGroupField }))\n);\n\n// ─── Array field layout helpers (lazy, co-located with SimpleArrayField) ──────\n\nconst ArrayCol = lazyField<ComponentProps<typeof ArrayColType>>(() => import('./components/atoms/simple-array-field').then(m => ({ default: m.ArrayCol })));\nconst ArrayHeaderRow = lazyField<ComponentProps<typeof ArrayHeaderRowType>>(() =>\n  import('./components/atoms/simple-array-field').then(m => ({ default: m.ArrayHeaderRow }))\n);\n\n// ─── Form containers (lazy) ───────────────────────────────────────────────────\n\nconst TanStackDialogForm = lazyField<ComponentProps<typeof TanStackDialogFormType>>(() =>\n  import('./components/forms/dialog-form').then(m => ({ default: m.TanStackDialogForm }))\n);\nconst TanStackPopoverForm = lazyField<ComponentProps<typeof TanStackPopoverFormType>>(() =>\n  import('./components/forms/popover-form').then(m => ({ default: m.TanStackPopoverForm }))\n);\nconst TanStackContainerForm = lazyField<ComponentProps<typeof TanStackContainerFormType>>(() =>\n  import('./components/forms/container-form').then(m => ({ default: m.TanStackContainerForm }))\n);\nconst TanStackSectionForm = lazyField<ComponentProps<typeof TanStackSectionFormType>>(() =>\n  import('./components/forms/section-form').then(m => ({ default: m.TanStackSectionForm }))\n);\nconst TanStackCardForm = lazyField<ComponentProps<typeof TanStackCardFormType>>(() =>\n  import('./components/forms/card-form').then(m => ({ default: m.TanStackCardForm }))\n);\nconst TanStackFieldGroup = lazyField<ComponentProps<typeof TanStackFieldGroupType>>(() =>\n  import('./components/forms/group-field').then(m => ({ default: m.TanStackFieldGroup }))\n);\nconst TanStackTitleField = lazyField<ComponentProps<typeof TanStackTitleFieldType>>(() =>\n  import('./components/forms/title-field').then(m => ({ default: m.TanStackTitleField }))\n);\nconst TanStackActionsForm = lazyField<ComponentProps<typeof TanStackActionsFormType>>(() =>\n  import('./components/forms/actions-form').then(m => ({ default: m.TanStackActionsForm }))\n);\nconst TanStackActionSubmit = lazyField<ComponentProps<typeof TanStackActionSubmitType>>(() =>\n  import('./components/forms/action-submit').then(m => ({ default: m.TanStackActionSubmit }))\n);\n\n// ─── Field UI primitives (lazy) ───────────────────────────────────────────────\n\nconst FieldGroup = lazyField<ComponentProps<typeof FieldGroupType>>(() => import('./components/ui/field').then(m => ({ default: m.FieldGroup })));\nconst Field = lazyField<ComponentProps<typeof FieldType>>(() => import('./components/ui/field').then(m => ({ default: m.Field })));\nconst FieldContent = lazyField<ComponentProps<typeof FieldContentType>>(() => import('./components/ui/field').then(m => ({ default: m.FieldContent })));\nconst FieldLabel = lazyField<ComponentProps<typeof FieldLabelType>>(() => import('./components/ui/field').then(m => ({ default: m.FieldLabel })));\nconst FieldContentMain = lazyField<ComponentProps<typeof FieldContentMainType>>(() =>\n  import('./components/ui/field').then(m => ({ default: m.FieldContentMain }))\n);\nconst FieldSeparator = lazyField<ComponentProps<typeof FieldSeparatorType>>(() => import('./components/ui/field').then(m => ({ default: m.FieldSeparator })));\nconst FieldError = lazyField<ComponentProps<typeof FieldErrorType>>(() => import('./components/ui/field').then(m => ({ default: m.FieldError })));\n\n/**\n * Factory result from {@link createFormHook} pre-wired with all Lunas UI field and form components.\n *\n * ### `useTanStackForm`\n * Pre-configured TanStack Form hook that returns a type-safe form instance bound to all Lunas UI\n * field and form components.\n *\n * @example\n * import { useTanStackForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * const form = useTanStackForm({\n *   defaultValues: { name: '', email: '' },\n *   onSubmit: async ({ value }) => console.log(value),\n * });\n *\n * return (\n *   <form.Provider>\n *     <form.AppForm>\n *       <form.AppField name=\"name\" children={(field) => <field.TextField label=\"Name\" />} />\n *       <form.Subscribe selector={(s) => s.canSubmit}>\n *         {(canSubmit) => <form.TanStackActionSubmit disabled={!canSubmit} />}\n *       </form.Subscribe>\n *     </form.AppForm>\n *   </form.Provider>\n * );\n *\n * ### `withTanStackForm`\n * Higher-order component that wraps a sub-form component with access to the parent\n * `useTanStackForm` form context, enabling isolated field groups that still participate in the\n * top-level form state.\n *\n * @example\n * import { withTanStackForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * const AddressFields = withTanStackForm(\n *   { street: '', city: '' } as const,\n *   ({ form }) => (\n *     <>\n *       <form.AppField name=\"street\" children={(f) => <f.TextField label=\"Street\" />} />\n *       <form.AppField name=\"city\" children={(f) => <f.TextField label=\"City\" />} />\n *     </>\n *   ),\n * );\n *\n * ### `withTanStackFieldGroup`\n * Higher-order component that creates a reusable field-group component sharing the enclosing\n * `useTanStackForm` context without requiring additional form providers.\n *\n * @example\n * import { withTanStackFieldGroup } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * const ContactGroup = withTanStackFieldGroup(({ form }) => (\n *   <form.AppField name=\"phone\" children={(f) => <f.TextField label=\"Phone\" />} />\n * ));\n */\nconst {\n  useAppForm: useTanStackForm,\n  withForm: withTanStackForm,\n  withFieldGroup: withTanStackFieldGroup,\n} = createFormHook({\n  fieldContext,\n  formContext,\n\n  fieldComponents: {\n    TextField,\n    TextareaField,\n    TextEditorField,\n    NumberField,\n    EmailField,\n    PasswordField,\n\n    SelectField,\n    ComboboxField,\n    DateField,\n    SwitchField,\n    RadioGroupField,\n    CheckboxField,\n\n    SimpleTextField,\n    SimpleEmailField,\n    SimplePasswordField,\n    SimpleTextareaField,\n    SimpleNumberField,\n    SimpleSelectField,\n    SimpleArrayField,\n    SimpleBooleanField,\n    SimpleComboboxField,\n    SimpleDateField,\n    SimpleRadioGroupField,\n\n    FieldGroup,\n    Field,\n    FieldContent,\n    FieldLabel,\n    FieldContentMain,\n    FieldSeparator,\n    FieldError,\n  },\n  formComponents: {\n    TanStackDialogForm,\n    TanStackPopoverForm,\n    TanStackContainerForm,\n    TanStackSectionForm,\n    TanStackCardForm,\n    TanStackFieldGroup,\n    TanStackTitleField,\n\n    TanStackActionsForm,\n    TanStackActionSubmit,\n\n    ArrayCol,\n    ArrayHeaderRow,\n  },\n});\n\nexport {\n  // Array helpers\n  ArrayCol,\n  ArrayHeaderRow,\n  CheckboxField,\n  ComboboxField,\n  DateField,\n  EmailField,\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldError,\n  // Field UI primitives\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  NumberField,\n  PasswordField,\n  RadioGroupField,\n  SelectField,\n  SimpleArrayField,\n  SimpleBooleanField,\n  SimpleComboboxField,\n  SimpleDateField,\n  SimpleEmailField,\n  SimpleNumberField,\n  SimplePasswordField,\n  SimpleRadioGroupField,\n  SimpleSelectField,\n  SimpleTextareaField,\n  // Simple (minimal) field components\n  SimpleTextField,\n  SwitchField,\n  TanStackActionSubmit,\n  // Form actions\n  TanStackActionsForm,\n  TanStackCardForm,\n  TanStackContainerForm,\n  // Form containers\n  TanStackDialogForm,\n  TanStackFieldGroup,\n  TanStackPopoverForm,\n  TanStackSectionForm,\n  TanStackTitleField,\n  TextareaField,\n  TextEditorField,\n  // Rich field components\n  TextField,\n  useTanStackFieldContext,\n  // Hooks & HOCs\n  useTanStackForm,\n  useTanStackFormContext,\n  withTanStackFieldGroup,\n  withTanStackForm,\n};\n"],"mappings":"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"}
+{"version":3,"file":"tanstack-form-CX3lC3mC.cjs","names":["Skeleton","Suspense","Impl"],"sources":["../packages/components/features/tanstack-form/components/form-context.ts","../packages/components/features/tanstack-form/tanstack-form.tsx"],"sourcesContent":["'use client';\n\nimport { createFormHookContexts } from '@tanstack/react-form';\n\n/**\n * Shared field/form contexts, split out from `tanstack-form.tsx` so that field and form\n * components can depend on them directly instead of importing back through the file that\n * lazy-loads those same components (which would reintroduce a circular import).\n */\nexport const { fieldContext, formContext, useFieldContext: useTanStackFieldContext, useFormContext: useTanStackFormContext } = createFormHookContexts();\n","'use client';\n\nimport type { ComponentProps, ComponentType } from 'react';\nimport { lazy, Suspense } from 'react';\n\nimport { createFormHook } from '@tanstack/react-form';\n\nimport { Skeleton } from '@/components/ui/skeleton';\n\nimport type { ArrayCol as ArrayColType, ArrayHeaderRow as ArrayHeaderRowType, SimpleArrayFieldProps } from './components/atoms/simple-array-field';\nimport type { SimpleBooleanField as SimpleBooleanFieldType } from './components/atoms/simple-boolean-field';\nimport type { SimpleComboboxField as SimpleComboboxFieldType } from './components/atoms/simple-combobox-field';\nimport type { SimpleDateField as SimpleDateFieldType } from './components/atoms/simple-date-field';\nimport type { SimpleEmailField as SimpleEmailFieldType } from './components/atoms/simple-email-field';\nimport type { SimpleNumberField as SimpleNumberFieldType } from './components/atoms/simple-number-field';\nimport type { SimplePasswordField as SimplePasswordFieldType } from './components/atoms/simple-password-field';\nimport type { SimpleRadioGroupField as SimpleRadioGroupFieldType } from './components/atoms/simple-radio-group-field';\nimport type { SimpleSelectField as SimpleSelectFieldType } from './components/atoms/simple-select-field';\nimport type { SimpleTextField as SimpleTextFieldType } from './components/atoms/simple-text-field';\nimport type { SimpleTextareaField as SimpleTextareaFieldType } from './components/atoms/simple-textarea-field';\nimport type { CheckboxField as CheckboxFieldType } from './components/fields/checkbox-field';\nimport type { ComboboxField as ComboboxFieldType } from './components/fields/combobox-field';\nimport type { DateField as DateFieldType } from './components/fields/date-field';\nimport type { EmailField as EmailFieldType } from './components/fields/email-field';\nimport type { NumberField as NumberFieldType } from './components/fields/number-field';\nimport type { PasswordField as PasswordFieldType } from './components/fields/password-field';\nimport type { RadioGroupField as RadioGroupFieldType } from './components/fields/radio-group-field';\nimport type { SelectField as SelectFieldType } from './components/fields/select-field';\nimport type { SwitchField as SwitchFieldType } from './components/fields/switch-field';\nimport type { TextEditorField as TextEditorFieldType } from './components/fields/text-editor-field';\nimport type { TextField as TextFieldType } from './components/fields/text-field';\nimport type { TextareaField as TextareaFieldType } from './components/fields/textarea-field';\nimport { fieldContext, formContext, useTanStackFieldContext, useTanStackFormContext } from './components/form-context';\nimport type { TanStackActionSubmit as TanStackActionSubmitType } from './components/forms/action-submit';\nimport type { TanStackActionsForm as TanStackActionsFormType } from './components/forms/actions-form';\nimport type { TanStackCardForm as TanStackCardFormType } from './components/forms/card-form';\nimport type { TanStackContainerForm as TanStackContainerFormType } from './components/forms/container-form';\nimport type { TanStackDialogForm as TanStackDialogFormType } from './components/forms/dialog-form';\nimport type { TanStackFieldGroup as TanStackFieldGroupType } from './components/forms/group-field';\nimport type { TanStackPopoverForm as TanStackPopoverFormType } from './components/forms/popover-form';\nimport type { TanStackSectionForm as TanStackSectionFormType } from './components/forms/section-form';\nimport type { TanStackTitleField as TanStackTitleFieldType } from './components/forms/title-field';\nimport type {\n  FieldContentMain as FieldContentMainType,\n  FieldContent as FieldContentType,\n  FieldError as FieldErrorType,\n  FieldGroup as FieldGroupType,\n  FieldLabel as FieldLabelType,\n  FieldSeparator as FieldSeparatorType,\n  Field as FieldType,\n} from './components/ui/field';\n\n/** Input-shaped pulse placeholder shown while a lazy field/form chunk is still loading. */\nfunction FieldSkeleton() {\n  return <Skeleton data-slot=\"tanstack-field-skeleton\" className=\"h-9 w-full rounded\" />;\n}\n\n/**\n * Wraps a `lazy()`-loaded component in its own `Suspense` boundary so it can be dropped\n * anywhere (inside or outside our own form containers) without callers needing to set up\n * Suspense themselves. Keeps this file itself small — the heavy per-field-type\n * implementations (Radix Select/Combobox/date-picker, the rich text editor, etc.) only load\n * when a form actually renders that field type.\n */\nfunction lazyField<P extends object>(loader: () => Promise<{ default: ComponentType<P> }>): ComponentType<P> {\n  const LazyComponent = lazy(loader);\n  return (props: P) => (\n    <Suspense fallback={<FieldSkeleton />}>\n      <LazyComponent {...props} />\n    </Suspense>\n  );\n}\n\n// ─── Rich field components (lazy) ─────────────────────────────────────────────\n\nconst TextField = lazyField<ComponentProps<typeof TextFieldType>>(() => import('./components/fields/text-field').then(m => ({ default: m.TextField })));\nconst TextareaField = lazyField<ComponentProps<typeof TextareaFieldType>>(() =>\n  import('./components/fields/textarea-field').then(m => ({ default: m.TextareaField }))\n);\nconst TextEditorField = lazyField<ComponentProps<typeof TextEditorFieldType>>(() =>\n  import('./components/fields/text-editor-field').then(m => ({ default: m.TextEditorField }))\n);\nconst NumberField = lazyField<ComponentProps<typeof NumberFieldType>>(() => import('./components/fields/number-field').then(m => ({ default: m.NumberField })));\nconst EmailField = lazyField<ComponentProps<typeof EmailFieldType>>(() => import('./components/fields/email-field').then(m => ({ default: m.EmailField })));\nconst PasswordField = lazyField<ComponentProps<typeof PasswordFieldType>>(() =>\n  import('./components/fields/password-field').then(m => ({ default: m.PasswordField }))\n);\nconst SelectField = lazyField<ComponentProps<typeof SelectFieldType>>(() => import('./components/fields/select-field').then(m => ({ default: m.SelectField })));\nconst ComboboxField = lazyField<ComponentProps<typeof ComboboxFieldType>>(() =>\n  import('./components/fields/combobox-field').then(m => ({ default: m.ComboboxField }))\n);\nconst DateField = lazyField<ComponentProps<typeof DateFieldType>>(() => import('./components/fields/date-field').then(m => ({ default: m.DateField })));\nconst SwitchField = lazyField<ComponentProps<typeof SwitchFieldType>>(() => import('./components/fields/switch-field').then(m => ({ default: m.SwitchField })));\nconst RadioGroupField = lazyField<ComponentProps<typeof RadioGroupFieldType>>(() =>\n  import('./components/fields/radio-group-field').then(m => ({ default: m.RadioGroupField }))\n);\nconst CheckboxField = lazyField<ComponentProps<typeof CheckboxFieldType>>(() =>\n  import('./components/fields/checkbox-field').then(m => ({ default: m.CheckboxField }))\n);\n\n// ─── Simple (minimal) field components (lazy) ─────────────────────────────────\n\nconst SimpleTextField = lazyField<ComponentProps<typeof SimpleTextFieldType>>(() =>\n  import('./components/atoms/simple-text-field').then(m => ({ default: m.SimpleTextField }))\n);\nconst SimpleEmailField = lazyField<ComponentProps<typeof SimpleEmailFieldType>>(() =>\n  import('./components/atoms/simple-email-field').then(m => ({ default: m.SimpleEmailField }))\n);\nconst SimplePasswordField = lazyField<ComponentProps<typeof SimplePasswordFieldType>>(() =>\n  import('./components/atoms/simple-password-field').then(m => ({ default: m.SimplePasswordField }))\n);\nconst SimpleTextareaField = lazyField<ComponentProps<typeof SimpleTextareaFieldType>>(() =>\n  import('./components/atoms/simple-textarea-field').then(m => ({ default: m.SimpleTextareaField }))\n);\nconst SimpleNumberField = lazyField<ComponentProps<typeof SimpleNumberFieldType>>(() =>\n  import('./components/atoms/simple-number-field').then(m => ({ default: m.SimpleNumberField }))\n);\nconst SimpleSelectField = lazyField<ComponentProps<typeof SimpleSelectFieldType>>(() =>\n  import('./components/atoms/simple-select-field').then(m => ({ default: m.SimpleSelectField }))\n);\nconst LazySimpleArrayField = lazy(() =>\n  import('./components/atoms/simple-array-field').then(m => ({ default: m.SimpleArrayField as ComponentType<SimpleArrayFieldProps<unknown>> }))\n);\n\n/** Kept as its own generic wrapper (instead of `lazyField`) so callers can still write `<SimpleArrayField<Row> />`. */\nfunction SimpleArrayField<T>(props: SimpleArrayFieldProps<T>) {\n  const Impl = LazySimpleArrayField as ComponentType<SimpleArrayFieldProps<T>>;\n  return (\n    <Suspense fallback={<FieldSkeleton />}>\n      <Impl {...props} />\n    </Suspense>\n  );\n}\n\nconst SimpleBooleanField = lazyField<ComponentProps<typeof SimpleBooleanFieldType>>(() =>\n  import('./components/atoms/simple-boolean-field').then(m => ({ default: m.SimpleBooleanField }))\n);\nconst SimpleComboboxField = lazyField<ComponentProps<typeof SimpleComboboxFieldType>>(() =>\n  import('./components/atoms/simple-combobox-field').then(m => ({ default: m.SimpleComboboxField }))\n);\nconst SimpleDateField = lazyField<ComponentProps<typeof SimpleDateFieldType>>(() =>\n  import('./components/atoms/simple-date-field').then(m => ({ default: m.SimpleDateField }))\n);\nconst SimpleRadioGroupField = lazyField<ComponentProps<typeof SimpleRadioGroupFieldType>>(() =>\n  import('./components/atoms/simple-radio-group-field').then(m => ({ default: m.SimpleRadioGroupField }))\n);\n\n// ─── Array field layout helpers (lazy, co-located with SimpleArrayField) ──────\n\nconst ArrayCol = lazyField<ComponentProps<typeof ArrayColType>>(() => import('./components/atoms/simple-array-field').then(m => ({ default: m.ArrayCol })));\nconst ArrayHeaderRow = lazyField<ComponentProps<typeof ArrayHeaderRowType>>(() =>\n  import('./components/atoms/simple-array-field').then(m => ({ default: m.ArrayHeaderRow }))\n);\n\n// ─── Form containers (lazy) ───────────────────────────────────────────────────\n\nconst TanStackDialogForm = lazyField<ComponentProps<typeof TanStackDialogFormType>>(() =>\n  import('./components/forms/dialog-form').then(m => ({ default: m.TanStackDialogForm }))\n);\nconst TanStackPopoverForm = lazyField<ComponentProps<typeof TanStackPopoverFormType>>(() =>\n  import('./components/forms/popover-form').then(m => ({ default: m.TanStackPopoverForm }))\n);\nconst TanStackContainerForm = lazyField<ComponentProps<typeof TanStackContainerFormType>>(() =>\n  import('./components/forms/container-form').then(m => ({ default: m.TanStackContainerForm }))\n);\nconst TanStackSectionForm = lazyField<ComponentProps<typeof TanStackSectionFormType>>(() =>\n  import('./components/forms/section-form').then(m => ({ default: m.TanStackSectionForm }))\n);\nconst TanStackCardForm = lazyField<ComponentProps<typeof TanStackCardFormType>>(() =>\n  import('./components/forms/card-form').then(m => ({ default: m.TanStackCardForm }))\n);\nconst TanStackFieldGroup = lazyField<ComponentProps<typeof TanStackFieldGroupType>>(() =>\n  import('./components/forms/group-field').then(m => ({ default: m.TanStackFieldGroup }))\n);\nconst TanStackTitleField = lazyField<ComponentProps<typeof TanStackTitleFieldType>>(() =>\n  import('./components/forms/title-field').then(m => ({ default: m.TanStackTitleField }))\n);\nconst TanStackActionsForm = lazyField<ComponentProps<typeof TanStackActionsFormType>>(() =>\n  import('./components/forms/actions-form').then(m => ({ default: m.TanStackActionsForm }))\n);\nconst TanStackActionSubmit = lazyField<ComponentProps<typeof TanStackActionSubmitType>>(() =>\n  import('./components/forms/action-submit').then(m => ({ default: m.TanStackActionSubmit }))\n);\n\n// ─── Field UI primitives (lazy) ───────────────────────────────────────────────\n\nconst FieldGroup = lazyField<ComponentProps<typeof FieldGroupType>>(() => import('./components/ui/field').then(m => ({ default: m.FieldGroup })));\nconst Field = lazyField<ComponentProps<typeof FieldType>>(() => import('./components/ui/field').then(m => ({ default: m.Field })));\nconst FieldContent = lazyField<ComponentProps<typeof FieldContentType>>(() => import('./components/ui/field').then(m => ({ default: m.FieldContent })));\nconst FieldLabel = lazyField<ComponentProps<typeof FieldLabelType>>(() => import('./components/ui/field').then(m => ({ default: m.FieldLabel })));\nconst FieldContentMain = lazyField<ComponentProps<typeof FieldContentMainType>>(() =>\n  import('./components/ui/field').then(m => ({ default: m.FieldContentMain }))\n);\nconst FieldSeparator = lazyField<ComponentProps<typeof FieldSeparatorType>>(() => import('./components/ui/field').then(m => ({ default: m.FieldSeparator })));\nconst FieldError = lazyField<ComponentProps<typeof FieldErrorType>>(() => import('./components/ui/field').then(m => ({ default: m.FieldError })));\n\n/**\n * Factory result from {@link createFormHook} pre-wired with all Lunas UI field and form components.\n *\n * ### `useTanStackForm`\n * Pre-configured TanStack Form hook that returns a type-safe form instance bound to all Lunas UI\n * field and form components.\n *\n * @example\n * import { useTanStackForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * const form = useTanStackForm({\n *   defaultValues: { name: '', email: '' },\n *   onSubmit: async ({ value }) => console.log(value),\n * });\n *\n * return (\n *   <form.Provider>\n *     <form.AppForm>\n *       <form.AppField name=\"name\" children={(field) => <field.TextField label=\"Name\" />} />\n *       <form.Subscribe selector={(s) => s.canSubmit}>\n *         {(canSubmit) => <form.TanStackActionSubmit disabled={!canSubmit} />}\n *       </form.Subscribe>\n *     </form.AppForm>\n *   </form.Provider>\n * );\n *\n * ### `withTanStackForm`\n * Higher-order component that wraps a sub-form component with access to the parent\n * `useTanStackForm` form context, enabling isolated field groups that still participate in the\n * top-level form state.\n *\n * @example\n * import { withTanStackForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * const AddressFields = withTanStackForm(\n *   { street: '', city: '' } as const,\n *   ({ form }) => (\n *     <>\n *       <form.AppField name=\"street\" children={(f) => <f.TextField label=\"Street\" />} />\n *       <form.AppField name=\"city\" children={(f) => <f.TextField label=\"City\" />} />\n *     </>\n *   ),\n * );\n *\n * ### `withTanStackFieldGroup`\n * Higher-order component that creates a reusable field-group component sharing the enclosing\n * `useTanStackForm` context without requiring additional form providers.\n *\n * @example\n * import { withTanStackFieldGroup } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * const ContactGroup = withTanStackFieldGroup(({ form }) => (\n *   <form.AppField name=\"phone\" children={(f) => <f.TextField label=\"Phone\" />} />\n * ));\n */\nconst {\n  useAppForm: useTanStackForm,\n  withForm: withTanStackForm,\n  withFieldGroup: withTanStackFieldGroup,\n} = createFormHook({\n  fieldContext,\n  formContext,\n\n  fieldComponents: {\n    TextField,\n    TextareaField,\n    TextEditorField,\n    NumberField,\n    EmailField,\n    PasswordField,\n\n    SelectField,\n    ComboboxField,\n    DateField,\n    SwitchField,\n    RadioGroupField,\n    CheckboxField,\n\n    SimpleTextField,\n    SimpleEmailField,\n    SimplePasswordField,\n    SimpleTextareaField,\n    SimpleNumberField,\n    SimpleSelectField,\n    SimpleArrayField,\n    SimpleBooleanField,\n    SimpleComboboxField,\n    SimpleDateField,\n    SimpleRadioGroupField,\n\n    FieldGroup,\n    Field,\n    FieldContent,\n    FieldLabel,\n    FieldContentMain,\n    FieldSeparator,\n    FieldError,\n  },\n  formComponents: {\n    TanStackDialogForm,\n    TanStackPopoverForm,\n    TanStackContainerForm,\n    TanStackSectionForm,\n    TanStackCardForm,\n    TanStackFieldGroup,\n    TanStackTitleField,\n\n    TanStackActionsForm,\n    TanStackActionSubmit,\n\n    ArrayCol,\n    ArrayHeaderRow,\n  },\n});\n\nexport {\n  // Array helpers\n  ArrayCol,\n  ArrayHeaderRow,\n  CheckboxField,\n  ComboboxField,\n  DateField,\n  EmailField,\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldError,\n  // Field UI primitives\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  NumberField,\n  PasswordField,\n  RadioGroupField,\n  SelectField,\n  SimpleArrayField,\n  SimpleBooleanField,\n  SimpleComboboxField,\n  SimpleDateField,\n  SimpleEmailField,\n  SimpleNumberField,\n  SimplePasswordField,\n  SimpleRadioGroupField,\n  SimpleSelectField,\n  SimpleTextareaField,\n  // Simple (minimal) field components\n  SimpleTextField,\n  SwitchField,\n  TanStackActionSubmit,\n  // Form actions\n  TanStackActionsForm,\n  TanStackCardForm,\n  TanStackContainerForm,\n  // Form containers\n  TanStackDialogForm,\n  TanStackFieldGroup,\n  TanStackPopoverForm,\n  TanStackSectionForm,\n  TanStackTitleField,\n  TextareaField,\n  TextEditorField,\n  // Rich field components\n  TextField,\n  useTanStackFieldContext,\n  // Hooks & HOCs\n  useTanStackForm,\n  useTanStackFormContext,\n  withTanStackFieldGroup,\n  withTanStackForm,\n};\n"],"mappings":"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"}

package/dist/{text-editor-field-DG0c8wVs.cjs → text-editor-field-Ddvgdo_p.cjs}

@@ -1,2 +1,2 @@
-const e=require("./tanstack-form-DU-ZKXxZ.cjs"),t=require("./text-editor-CfQk5dIx.cjs"),n=require("./field-BV5twmKA.cjs");let r=require("react"),i=require("react/jsx-runtime"),a=require("@tanstack/react-form");const o=(0,r.memo)(({label:o,description:s,placeholder:c,tooltip:l,helperText:u,showErrorMessage:d=!0,required:f=!1})=>{let{form:p,state:m,handleChange:h}=e.G(),g=(0,a.useStore)(p.store,({isSubmitting:e})=>e),_=m.meta.isDirty&&m.meta.isTouched&&!m.meta.isValid,v=f&&m.value===null,y=(0,r.useCallback)(e=>{g||h(e||null)},[g,h]);return(0,i.jsxs)(n.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,i.jsxs)(n.Field,{orientation:`vertical`,"data-invalid":_,children:[(0,i.jsxs)(n.FieldContent,{children:[(0,i.jsxs)(n.FieldLabel,{"aria-required":v,children:[o,l&&(0,i.jsx)(n.FieldTooltip,{tooltip:l})]}),(0,i.jsx)(n.FieldDescription,{children:s})]}),(0,i.jsx)(t.t,{value:m.value??``,placeholder:c,readOnly:g,onChange:y}),m.meta.isDirty&&d&&!!m.meta.errors.length&&(0,i.jsx)(n.FieldError,{errors:m.meta.errors}),(0,i.jsx)(n.FieldNote,{isShow:!!u,children:u})]}),(0,i.jsx)(n.FieldSeparator,{})]})});o.displayName=`TextEditorField`,exports.TextEditorField=o;
-//# sourceMappingURL=text-editor-field-DG0c8wVs.cjs.map
+const e=require("./tanstack-form-CX3lC3mC.cjs"),t=require("./text-editor-CfQk5dIx.cjs"),n=require("./field-BSLi-P0Q.cjs");let r=require("react"),i=require("react/jsx-runtime"),a=require("@tanstack/react-form");const o=(0,r.memo)(({label:o,description:s,placeholder:c,tooltip:l,helperText:u,showErrorMessage:d=!0,required:f=!1})=>{let{form:p,state:m,handleChange:h}=e.G(),g=(0,a.useStore)(p.store,({isSubmitting:e})=>e),_=m.meta.isDirty&&m.meta.isTouched&&!m.meta.isValid,v=f&&m.value===null,y=(0,r.useCallback)(e=>{g||h(e||null)},[g,h]);return(0,i.jsxs)(n.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,i.jsxs)(n.Field,{orientation:`vertical`,"data-invalid":_,children:[(0,i.jsxs)(n.FieldContent,{children:[(0,i.jsxs)(n.FieldLabel,{"aria-required":v,children:[o,l&&(0,i.jsx)(n.FieldTooltip,{tooltip:l})]}),(0,i.jsx)(n.FieldDescription,{children:s})]}),(0,i.jsx)(t.t,{value:m.value??``,placeholder:c,readOnly:g,onChange:y}),m.meta.isDirty&&d&&!!m.meta.errors.length&&(0,i.jsx)(n.FieldError,{errors:m.meta.errors}),(0,i.jsx)(n.FieldNote,{isShow:!!u,children:u})]}),(0,i.jsx)(n.FieldSeparator,{})]})});o.displayName=`TextEditorField`,exports.TextEditorField=o;
+//# sourceMappingURL=text-editor-field-Ddvgdo_p.cjs.map

package/dist/{text-editor-field-DG0c8wVs.cjs.map → text-editor-field-Ddvgdo_p.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"text-editor-field-DG0c8wVs.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","TextEditor","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/text-editor-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { TextEditor } from '@/components/features/text-editor';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldNote, FieldSeparator, FieldTooltip } from '../ui/field';\n\nimport type { TextEditorFieldProps as Props } from '../../types';\n\nexport const TextEditorField: React.FC<Props> = memo(({ label, description, placeholder, tooltip, helperText, showErrorMessage = true, required = false }) => {\n  const { form, state, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isDirty && state.meta.isTouched && !state.meta.isValid;\n  const _isEmpty = required && state.value === null;\n\n  const onChange = useCallback(\n    (html: string) => {\n      if (isSubmitting) return;\n      handleChange(html || null);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field orientation=\"vertical\" data-invalid={_invalid}>\n        <FieldContent>\n          <FieldLabel aria-required={_isEmpty}>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <TextEditor value={state.value ?? ''} placeholder={placeholder} readOnly={isSubmitting} onChange={onChange} />\n        {state.meta.isDirty && showErrorMessage && !!state.meta.errors.length && <FieldError errors={state.meta.errors} />}\n        <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n});\nTextEditorField.displayName = 'TextEditorField';\n"],"mappings":"kNAaA,MAAa,GAAA,EAAA,EAAA,KAAA,EAAyC,CAAE,QAAO,cAAa,cAAa,UAAS,aAAY,mBAAmB,GAAM,WAAW,MAAY,CAC5J,GAAM,CAAE,OAAM,QAAO,gBAAiBA,EAAAA,EAAuC,EAEvE,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,SAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QACrE,EAAW,GAAY,EAAM,QAAU,KAEvC,GAAA,EAAA,EAAA,YAAA,CACH,GAAiB,CACZ,GACJ,EAAa,GAAQ,IAAI,CAC3B,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,wBAAtB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,YAAY,WAAW,eAAc,WAA5C,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,gBAAe,WAA3B,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAuB,SAAU,CAAA,CACnC,KACZ,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,GACd,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAY,MAAO,EAAM,OAAS,GAAiB,cAAa,SAAU,EAAwB,UAAW,CAAA,EAC5G,EAAM,KAAK,SAAW,GAAoB,CAAC,CAAC,EAAM,KAAK,OAAO,SAAU,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,GACjH,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACnD,KACP,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAiB,CAAA,CACP,GAEhB,CAAC,EACD,EAAgB,YAAc"}
+{"version":3,"file":"text-editor-field-Ddvgdo_p.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","TextEditor","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/text-editor-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { TextEditor } from '@/components/features/text-editor';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldNote, FieldSeparator, FieldTooltip } from '../ui/field';\n\nimport type { TextEditorFieldProps as Props } from '../../types';\n\nexport const TextEditorField: React.FC<Props> = memo(({ label, description, placeholder, tooltip, helperText, showErrorMessage = true, required = false }) => {\n  const { form, state, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isDirty && state.meta.isTouched && !state.meta.isValid;\n  const _isEmpty = required && state.value === null;\n\n  const onChange = useCallback(\n    (html: string) => {\n      if (isSubmitting) return;\n      handleChange(html || null);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field orientation=\"vertical\" data-invalid={_invalid}>\n        <FieldContent>\n          <FieldLabel aria-required={_isEmpty}>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <TextEditor value={state.value ?? ''} placeholder={placeholder} readOnly={isSubmitting} onChange={onChange} />\n        {state.meta.isDirty && showErrorMessage && !!state.meta.errors.length && <FieldError errors={state.meta.errors} />}\n        <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n});\nTextEditorField.displayName = 'TextEditorField';\n"],"mappings":"kNAaA,MAAa,GAAA,EAAA,EAAA,KAAA,EAAyC,CAAE,QAAO,cAAa,cAAa,UAAS,aAAY,mBAAmB,GAAM,WAAW,MAAY,CAC5J,GAAM,CAAE,OAAM,QAAO,gBAAiBA,EAAAA,EAAuC,EAEvE,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,SAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QACrE,EAAW,GAAY,EAAM,QAAU,KAEvC,GAAA,EAAA,EAAA,YAAA,CACH,GAAiB,CACZ,GACJ,EAAa,GAAQ,IAAI,CAC3B,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,wBAAtB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,YAAY,WAAW,eAAc,WAA5C,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,gBAAe,WAA3B,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAuB,SAAU,CAAA,CACnC,KACZ,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,GACd,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAY,MAAO,EAAM,OAAS,GAAiB,cAAa,SAAU,EAAwB,UAAW,CAAA,EAC5G,EAAM,KAAK,SAAW,GAAoB,CAAC,CAAC,EAAM,KAAK,OAAO,SAAU,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,GACjH,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACnD,KACP,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAiB,CAAA,CACP,GAEhB,CAAC,EACD,EAAgB,YAAc"}

package/dist/{text-editor-field-Dm2yxTUZ.mjs → text-editor-field-qa3t2GBg.mjs}

@@ -1,2 +1,2 @@
-import{G as e}from"./tanstack-form-B6mzOylW.mjs";import{t}from"./text-editor-BYE2-G5K.mjs";import{Field as n,FieldContent as r,FieldDescription as i,FieldError as a,FieldGroup as o,FieldLabel as s,FieldNote as c,FieldSeparator as l,FieldTooltip as u}from"./field-BKyUqvzh.mjs";import{memo as d,useCallback as f}from"react";import{jsx as p,jsxs as m}from"react/jsx-runtime";import{useStore as h}from"@tanstack/react-form";const g=d(({label:d,description:g,placeholder:_,tooltip:v,helperText:y,showErrorMessage:b=!0,required:x=!1})=>{let{form:S,state:C,handleChange:w}=e(),T=h(S.store,({isSubmitting:e})=>e),E=C.meta.isDirty&&C.meta.isTouched&&!C.meta.isValid,D=x&&C.value===null,O=f(e=>{T||w(e||null)},[T,w]);return m(o,{className:`gap-y-4 px-4`,children:[m(n,{orientation:`vertical`,"data-invalid":E,children:[m(r,{children:[m(s,{"aria-required":D,children:[d,v&&p(u,{tooltip:v})]}),p(i,{children:g})]}),p(t,{value:C.value??``,placeholder:_,readOnly:T,onChange:O}),C.meta.isDirty&&b&&!!C.meta.errors.length&&p(a,{errors:C.meta.errors}),p(c,{isShow:!!y,children:y})]}),p(l,{})]})});g.displayName=`TextEditorField`;export{g as TextEditorField};
-//# sourceMappingURL=text-editor-field-Dm2yxTUZ.mjs.map
+import{G as e}from"./tanstack-form-CKAWexet.mjs";import{t}from"./text-editor-BYE2-G5K.mjs";import{Field as n,FieldContent as r,FieldDescription as i,FieldError as a,FieldGroup as o,FieldLabel as s,FieldNote as c,FieldSeparator as l,FieldTooltip as u}from"./field-V2DoD8qL.mjs";import{memo as d,useCallback as f}from"react";import{jsx as p,jsxs as m}from"react/jsx-runtime";import{useStore as h}from"@tanstack/react-form";const g=d(({label:d,description:g,placeholder:_,tooltip:v,helperText:y,showErrorMessage:b=!0,required:x=!1})=>{let{form:S,state:C,handleChange:w}=e(),T=h(S.store,({isSubmitting:e})=>e),E=C.meta.isDirty&&C.meta.isTouched&&!C.meta.isValid,D=x&&C.value===null,O=f(e=>{T||w(e||null)},[T,w]);return m(o,{className:`gap-y-4 px-4`,children:[m(n,{orientation:`vertical`,"data-invalid":E,children:[m(r,{children:[m(s,{"aria-required":D,children:[d,v&&p(u,{tooltip:v})]}),p(i,{children:g})]}),p(t,{value:C.value??``,placeholder:_,readOnly:T,onChange:O}),C.meta.isDirty&&b&&!!C.meta.errors.length&&p(a,{errors:C.meta.errors}),p(c,{isShow:!!y,children:y})]}),p(l,{})]})});g.displayName=`TextEditorField`;export{g as TextEditorField};
+//# sourceMappingURL=text-editor-field-qa3t2GBg.mjs.map

package/dist/{text-editor-field-Dm2yxTUZ.mjs.map → text-editor-field-qa3t2GBg.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"text-editor-field-Dm2yxTUZ.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/text-editor-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { TextEditor } from '@/components/features/text-editor';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldNote, FieldSeparator, FieldTooltip } from '../ui/field';\n\nimport type { TextEditorFieldProps as Props } from '../../types';\n\nexport const TextEditorField: React.FC<Props> = memo(({ label, description, placeholder, tooltip, helperText, showErrorMessage = true, required = false }) => {\n  const { form, state, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isDirty && state.meta.isTouched && !state.meta.isValid;\n  const _isEmpty = required && state.value === null;\n\n  const onChange = useCallback(\n    (html: string) => {\n      if (isSubmitting) return;\n      handleChange(html || null);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field orientation=\"vertical\" data-invalid={_invalid}>\n        <FieldContent>\n          <FieldLabel aria-required={_isEmpty}>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <TextEditor value={state.value ?? ''} placeholder={placeholder} readOnly={isSubmitting} onChange={onChange} />\n        {state.meta.isDirty && showErrorMessage && !!state.meta.errors.length && <FieldError errors={state.meta.errors} />}\n        <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n});\nTextEditorField.displayName = 'TextEditorField';\n"],"mappings":"qaAaA,MAAa,EAAmC,GAAM,CAAE,QAAO,cAAa,cAAa,UAAS,aAAY,mBAAmB,GAAM,WAAW,MAAY,CAC5J,GAAM,CAAE,OAAM,QAAO,gBAAiB,EAAuC,EAEvE,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,SAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QACrE,EAAW,GAAY,EAAM,QAAU,KAEvC,EAAW,EACd,GAAiB,CACZ,GACJ,EAAa,GAAQ,IAAI,CAC3B,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAC,EAAD,CAAY,UAAU,wBAAtB,CACE,EAAC,EAAD,CAAO,YAAY,WAAW,eAAc,WAA5C,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAY,gBAAe,WAA3B,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,IACZ,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,EACd,EAAC,EAAD,CAAY,MAAO,EAAM,OAAS,GAAiB,cAAa,SAAU,EAAwB,UAAW,CAAA,EAC5G,EAAM,KAAK,SAAW,GAAoB,CAAC,CAAC,EAAM,KAAK,OAAO,QAAU,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,EACjH,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACnD,IACP,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB,CAAC,EACD,EAAgB,YAAc"}
+{"version":3,"file":"text-editor-field-qa3t2GBg.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/text-editor-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { TextEditor } from '@/components/features/text-editor';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldNote, FieldSeparator, FieldTooltip } from '../ui/field';\n\nimport type { TextEditorFieldProps as Props } from '../../types';\n\nexport const TextEditorField: React.FC<Props> = memo(({ label, description, placeholder, tooltip, helperText, showErrorMessage = true, required = false }) => {\n  const { form, state, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isDirty && state.meta.isTouched && !state.meta.isValid;\n  const _isEmpty = required && state.value === null;\n\n  const onChange = useCallback(\n    (html: string) => {\n      if (isSubmitting) return;\n      handleChange(html || null);\n    },\n    [isSubmitting, handleChange]\n  );\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field orientation=\"vertical\" data-invalid={_invalid}>\n        <FieldContent>\n          <FieldLabel aria-required={_isEmpty}>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <TextEditor value={state.value ?? ''} placeholder={placeholder} readOnly={isSubmitting} onChange={onChange} />\n        {state.meta.isDirty && showErrorMessage && !!state.meta.errors.length && <FieldError errors={state.meta.errors} />}\n        <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n});\nTextEditorField.displayName = 'TextEditorField';\n"],"mappings":"qaAaA,MAAa,EAAmC,GAAM,CAAE,QAAO,cAAa,cAAa,UAAS,aAAY,mBAAmB,GAAM,WAAW,MAAY,CAC5J,GAAM,CAAE,OAAM,QAAO,gBAAiB,EAAuC,EAEvE,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,SAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QACrE,EAAW,GAAY,EAAM,QAAU,KAEvC,EAAW,EACd,GAAiB,CACZ,GACJ,EAAa,GAAQ,IAAI,CAC3B,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAC,EAAD,CAAY,UAAU,wBAAtB,CACE,EAAC,EAAD,CAAO,YAAY,WAAW,eAAc,WAA5C,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAY,gBAAe,WAA3B,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,IACZ,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,EACd,EAAC,EAAD,CAAY,MAAO,EAAM,OAAS,GAAiB,cAAa,SAAU,EAAwB,UAAW,CAAA,EAC5G,EAAM,KAAK,SAAW,GAAoB,CAAC,CAAC,EAAM,KAAK,OAAO,QAAU,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,EACjH,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACnD,IACP,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB,CAAC,EACD,EAAgB,YAAc"}

package/dist/text-field-CBUTZKGH.mjs

@@ -0,0 +1,2 @@
+import{G as e}from"./tanstack-form-CKAWexet.mjs";import{Input as t}from"./ui/input.mjs";import{Field as n,FieldContent as r,FieldContentMain as i,FieldDescription as a,FieldError as o,FieldGroup as s,FieldLabel as c,FieldNote as l,FieldSeparator as u,FieldTooltip as d}from"./field-V2DoD8qL.mjs";import{BanIcon as f,Loader2Icon as p,XIcon as m}from"lucide-react";import{memo as h,useCallback as g,useId as _,useRef 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";const C=e=>{e.key===`Enter`&&e.preventDefault()},w=h(({label:h,description:w,placeholder:T,tooltip:E,helperText:D,counter:O=!1,orientation:k=`responsive`,showClearButton:A=!1,showErrorMessage:j=!0,required:M=!1,disabled:N=!1,maxLength:P})=>{let F=_(),I=_(),L=v(null),{form:R,name:z,state:B,handleBlur:V,handleChange:H}=e(),U=S(R.store,({isSubmitting:e})=>e),W=N||U,G=B.meta.isDirty||B.meta.isTouched,K=G&&!B.meta.isValid,q=M&&B.value===null,J=B.meta.errors.length>0,Y=A&&!W&&!!B.value,X=O?B.value?.length??0:0,Z=O&&!!P&&X>=P*.8,Q=O&&!!P&&X>=P,$=O?P?`${X} / ${P} ký tự`:`${X} ký tự`:null,ee=O||G&&j&&J,te=g(({target:{value:e}})=>{O&&P&&e.length>P||H(e||null)},[O,P,H]),ne=g(()=>{H(null),L.current?.focus()},[H]);return x(s,{className:`gap-y-4 px-4`,children:[x(n,{orientation:k,"data-invalid":K,children:[x(r,{children:[x(c,{"aria-required":q,htmlFor:F,children:[h,E&&b(d,{tooltip:E})]}),w&&b(a,{children:w})]}),x(i,{children:[b(t,{ref:L,id:F,name:z,value:B.value??``,"aria-invalid":K,"aria-describedby":I,autoComplete:`off`,placeholder:T,autoCapitalize:`none`,autoCorrect:`off`,disabled:W,className:y(`pr-6`,W&&`pointer-events-none bg-muted-muted opacity-60`),onBlur:V,onChange:te,onKeyDown:C}),Y&&b(`button`,{type:`button`,"aria-label":`Xóa`,className:`absolute inset-e-1 top-2.5 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform`,onClick:ne,children:b(m,{"aria-hidden":`true`})}),U&&b(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-muted-weak`,children:b(p,{size:14,className:`animate-spin text-primary-strong`})}),!Y&&G&&j&&J&&b(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-danger-strong`,children:b(f,{"aria-hidden":`true`,size:14})}),ee&&x(`div`,{className:`my-1 flex w-full items-start justify-between gap-x-2`,children:[G&&j?b(o,{id:I,className:`flex-1`,errors:B.meta.errors}):b(`div`,{}),O&&b(`p`,{className:y(`h-4 flex-0 text-nowrap text-end text-xs tabular-nums transition-colors`,Q?`font-medium text-danger-strong`:Z?`text-warning-strong`:`text-text-positive-weak`),children:$})]}),b(l,{isShow:!!D,children:D})]})]}),b(u,{})]})});w.displayName=`TextField`;export{w as TextField};
+//# sourceMappingURL=text-field-CBUTZKGH.mjs.map

package/dist/text-field-CBUTZKGH.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field-CBUTZKGH.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/text-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback, useId, useRef } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { BanIcon, Loader2Icon, XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '@/components/ui/input';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTooltip,\n} from '@/components/features/tanstack-form/components/ui/field';\nimport { useTanStackFieldContext } from '../form-context';\n\nimport type { TextFieldProps as Props } from '../../types';\n\n/** Fraction of maxLength at which the counter turns warning color (80%). */\nconst COUNTER_WARNING_THRESHOLD = 0.8;\n\n/** Pixel size for inline adornment icons (error ban, loading spinner). */\nconst ADORNMENT_ICON_SIZE = 14;\n\n// Static handler — no closure deps, shared across all TextField instances\nconst onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = e => {\n  if (e.key === 'Enter') e.preventDefault();\n};\n\n/**\n * A TanStack Form-connected single-line text input with label, validation, and optional features.\n *\n * Must be rendered inside an `AppField` context from `useTanStackForm`.\n * The field value type is `string | null` — `null` represents an empty/unset state.\n *\n * ---\n *\n * **Basic usage**\n * @example\n * const { AppField } = useTanStackForm({ defaultValues: { name: null } });\n *\n * <AppField name=\"name\">\n *   {field => <field.TextField label=\"Full name\" placeholder=\"Nguyễn Văn A\" />}\n * </AppField>\n *\n * ---\n *\n * **With validation**\n * @example\n * <AppField\n *   name=\"username\"\n *   validators={{ onChange: ({ value }) => !value ? 'Bắt buộc' : undefined }}\n * >\n *   {field => <field.TextField label=\"Username\" required />}\n * </AppField>\n *\n * ---\n *\n * **With character counter and max length**\n * @example\n * <AppField name=\"bio\">\n *   {field => (\n *     <field.TextField\n *       label=\"Bio\"\n *       counter\n *       maxLength={160}\n *       placeholder=\"Giới thiệu bản thân…\"\n *     />\n *   )}\n * </AppField>\n *\n * ---\n *\n * **With clear button and helper note**\n * @example\n * <AppField name=\"search\">\n *   {field => (\n *     <field.TextField\n *       label=\"Tìm kiếm\"\n *       showClearButton\n *       helperText=\"Nhập ít nhất 3 ký tự để tìm kiếm.\"\n *     />\n *   )}\n * </AppField>\n *\n * ---\n *\n * **Horizontal layout**\n * @example\n * <AppField name=\"code\">\n *   {field => (\n *     <field.TextField\n *       label=\"Mã sản phẩm\"\n *       orientation=\"horizontal\"\n *       tooltip=\"Mã duy nhất định danh sản phẩm trong hệ thống.\"\n *     />\n *   )}\n * </AppField>\n */\nexport const TextField = memo<Props>(\n  ({\n    label,\n    description,\n    placeholder,\n\n    tooltip,\n    helperText,\n    counter = false,\n    orientation = 'responsive',\n    showClearButton = false,\n    showErrorMessage = true,\n\n    required = false,\n    disabled = false,\n    maxLength,\n  }) => {\n    const id = useId();\n    const errorId = useId();\n    const inputRef = useRef<HTMLInputElement>(null);\n    const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n    const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n    const isDisabled = disabled || isSubmitting;\n\n    const _touched = state.meta.isDirty || state.meta.isTouched;\n    const _invalid = _touched && !state.meta.isValid;\n    const _isEmpty = required && state.value === null;\n    const _hasErrors = state.meta.errors.length > 0;\n    const _showClearButton = showClearButton && !isDisabled && !!state.value;\n\n    // Counter values are only computed when the feature is active\n    const _count = counter ? (state.value?.length ?? 0) : 0;\n    const _isNearLimit = counter && !!maxLength && _count >= maxLength * COUNTER_WARNING_THRESHOLD;\n    const _isAtLimit = counter && !!maxLength && _count >= maxLength;\n    const _countText = counter ? (maxLength ? `${_count} / ${maxLength} ký tự` : `${_count} ký tự`) : null;\n\n    // Skip the bottom row entirely when neither error nor counter will render\n    const _showBottomRow = counter || (_touched && showErrorMessage && _hasErrors);\n\n    const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n      ({ target: { value } }) => {\n        if (counter && maxLength && value.length > maxLength) return;\n        handleChange(value || null);\n      },\n      [counter, maxLength, handleChange]\n    );\n\n    const onClear = useCallback(() => {\n      handleChange(null);\n      inputRef.current?.focus();\n    }, [handleChange]);\n\n    return (\n      <FieldGroup className=\"gap-y-4 px-4\">\n        <Field orientation={orientation} data-invalid={_invalid}>\n          <FieldContent>\n            <FieldLabel aria-required={_isEmpty} htmlFor={id}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            {description && <FieldDescription>{description}</FieldDescription>}\n          </FieldContent>\n          <FieldContentMain>\n            <Input\n              ref={inputRef}\n              id={id}\n              name={name}\n              value={state.value ?? ''}\n              aria-invalid={_invalid}\n              aria-describedby={errorId}\n              autoComplete=\"off\"\n              placeholder={placeholder}\n              autoCapitalize=\"none\"\n              autoCorrect=\"off\"\n              disabled={isDisabled}\n              className={cn('pr-6', isDisabled && 'pointer-events-none bg-muted-muted opacity-60')}\n              onBlur={handleBlur}\n              onChange={onChange}\n              onKeyDown={onKeyDown}\n            />\n            {_showClearButton && (\n              <button\n                type=\"button\"\n                aria-label=\"Xóa\"\n                className=\"absolute inset-e-1 top-2.5 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform\"\n                onClick={onClear}\n              >\n                <XIcon aria-hidden=\"true\" />\n              </button>\n            )}\n            {isSubmitting && (\n              <div className=\"absolute inset-e-2 inset-y-0 top-2.5 text-muted-weak\">\n                <Loader2Icon size={ADORNMENT_ICON_SIZE} className=\"animate-spin text-primary-strong\" />\n              </div>\n            )}\n            {!_showClearButton && _touched && showErrorMessage && _hasErrors && (\n              <div className=\"absolute inset-e-2 inset-y-0 top-2.5 text-danger-strong\">\n                <BanIcon aria-hidden=\"true\" size={ADORNMENT_ICON_SIZE} />\n              </div>\n            )}\n            {_showBottomRow && (\n              <div className=\"my-1 flex w-full items-start justify-between gap-x-2\">\n                {_touched && showErrorMessage ? <FieldError id={errorId} className=\"flex-1\" errors={state.meta.errors} /> : <div />}\n                {counter && (\n                  <p\n                    className={cn(\n                      'h-4 flex-0 text-nowrap text-end text-xs tabular-nums transition-colors',\n                      _isAtLimit ? 'font-medium text-danger-strong' : _isNearLimit ? 'text-warning-strong' : 'text-text-positive-weak'\n                    )}\n                  >\n                    {_countText}\n                  </p>\n                )}\n              </div>\n            )}\n            <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nTextField.displayName = 'TextField';\n"],"mappings":"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"}

package/dist/text-field-Cwu0xuXt.cjs

@@ -0,0 +1,2 @@
+const e=require("./tanstack-form-CX3lC3mC.cjs"),t=require("./ui/input.cjs"),n=require("./field-BSLi-P0Q.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=e=>{e.key===`Enter`&&e.preventDefault()},l=(0,i.memo)(({label:l,description:u,placeholder:d,tooltip:f,helperText:p,counter:m=!1,orientation:h=`responsive`,showClearButton:g=!1,showErrorMessage:_=!0,required:v=!1,disabled:y=!1,maxLength:b})=>{let x=(0,i.useId)(),S=(0,i.useId)(),C=(0,i.useRef)(null),{form:w,name:T,state:E,handleBlur:D,handleChange:O}=e.G(),k=(0,s.useStore)(w.store,({isSubmitting:e})=>e),A=y||k,j=E.meta.isDirty||E.meta.isTouched,M=j&&!E.meta.isValid,N=v&&E.value===null,P=E.meta.errors.length>0,F=g&&!A&&!!E.value,I=m?E.value?.length??0:0,L=m&&!!b&&I>=b*.8,R=m&&!!b&&I>=b,z=m?b?`${I} / ${b} ký tự`:`${I} ký tự`:null,B=m||j&&_&&P,V=(0,i.useCallback)(({target:{value:e}})=>{m&&b&&e.length>b||O(e||null)},[m,b,O]),H=(0,i.useCallback)(()=>{O(null),C.current?.focus()},[O]);return(0,o.jsxs)(n.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,o.jsxs)(n.Field,{orientation:h,"data-invalid":M,children:[(0,o.jsxs)(n.FieldContent,{children:[(0,o.jsxs)(n.FieldLabel,{"aria-required":N,htmlFor:x,children:[l,f&&(0,o.jsx)(n.FieldTooltip,{tooltip:f})]}),u&&(0,o.jsx)(n.FieldDescription,{children:u})]}),(0,o.jsxs)(n.FieldContentMain,{children:[(0,o.jsx)(t.Input,{ref:C,id:x,name:T,value:E.value??``,"aria-invalid":M,"aria-describedby":S,autoComplete:`off`,placeholder:d,autoCapitalize:`none`,autoCorrect:`off`,disabled:A,className:(0,a.cn)(`pr-6`,A&&`pointer-events-none bg-muted-muted opacity-60`),onBlur:D,onChange:V,onKeyDown:c}),F&&(0,o.jsx)(`button`,{type:`button`,"aria-label":`Xóa`,className:`absolute inset-e-1 top-2.5 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform`,onClick:H,children:(0,o.jsx)(r.XIcon,{"aria-hidden":`true`})}),k&&(0,o.jsx)(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-muted-weak`,children:(0,o.jsx)(r.Loader2Icon,{size:14,className:`animate-spin text-primary-strong`})}),!F&&j&&_&&P&&(0,o.jsx)(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-danger-strong`,children:(0,o.jsx)(r.BanIcon,{"aria-hidden":`true`,size:14})}),B&&(0,o.jsxs)(`div`,{className:`my-1 flex w-full items-start justify-between gap-x-2`,children:[j&&_?(0,o.jsx)(n.FieldError,{id:S,className:`flex-1`,errors:E.meta.errors}):(0,o.jsx)(`div`,{}),m&&(0,o.jsx)(`p`,{className:(0,a.cn)(`h-4 flex-0 text-nowrap text-end text-xs tabular-nums transition-colors`,R?`font-medium text-danger-strong`:L?`text-warning-strong`:`text-text-positive-weak`),children:z})]}),(0,o.jsx)(n.FieldNote,{isShow:!!p,children:p})]})]}),(0,o.jsx)(n.FieldSeparator,{})]})});l.displayName=`TextField`,exports.TextField=l;
+//# sourceMappingURL=text-field-Cwu0xuXt.cjs.map

package/dist/text-field-Cwu0xuXt.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field-Cwu0xuXt.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","Input","XIcon","Loader2Icon","BanIcon","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/text-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback, useId, useRef } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { BanIcon, Loader2Icon, XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '@/components/ui/input';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTooltip,\n} from '@/components/features/tanstack-form/components/ui/field';\nimport { useTanStackFieldContext } from '../form-context';\n\nimport type { TextFieldProps as Props } from '../../types';\n\n/** Fraction of maxLength at which the counter turns warning color (80%). */\nconst COUNTER_WARNING_THRESHOLD = 0.8;\n\n/** Pixel size for inline adornment icons (error ban, loading spinner). */\nconst ADORNMENT_ICON_SIZE = 14;\n\n// Static handler — no closure deps, shared across all TextField instances\nconst onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = e => {\n  if (e.key === 'Enter') e.preventDefault();\n};\n\n/**\n * A TanStack Form-connected single-line text input with label, validation, and optional features.\n *\n * Must be rendered inside an `AppField` context from `useTanStackForm`.\n * The field value type is `string | null` — `null` represents an empty/unset state.\n *\n * ---\n *\n * **Basic usage**\n * @example\n * const { AppField } = useTanStackForm({ defaultValues: { name: null } });\n *\n * <AppField name=\"name\">\n *   {field => <field.TextField label=\"Full name\" placeholder=\"Nguyễn Văn A\" />}\n * </AppField>\n *\n * ---\n *\n * **With validation**\n * @example\n * <AppField\n *   name=\"username\"\n *   validators={{ onChange: ({ value }) => !value ? 'Bắt buộc' : undefined }}\n * >\n *   {field => <field.TextField label=\"Username\" required />}\n * </AppField>\n *\n * ---\n *\n * **With character counter and max length**\n * @example\n * <AppField name=\"bio\">\n *   {field => (\n *     <field.TextField\n *       label=\"Bio\"\n *       counter\n *       maxLength={160}\n *       placeholder=\"Giới thiệu bản thân…\"\n *     />\n *   )}\n * </AppField>\n *\n * ---\n *\n * **With clear button and helper note**\n * @example\n * <AppField name=\"search\">\n *   {field => (\n *     <field.TextField\n *       label=\"Tìm kiếm\"\n *       showClearButton\n *       helperText=\"Nhập ít nhất 3 ký tự để tìm kiếm.\"\n *     />\n *   )}\n * </AppField>\n *\n * ---\n *\n * **Horizontal layout**\n * @example\n * <AppField name=\"code\">\n *   {field => (\n *     <field.TextField\n *       label=\"Mã sản phẩm\"\n *       orientation=\"horizontal\"\n *       tooltip=\"Mã duy nhất định danh sản phẩm trong hệ thống.\"\n *     />\n *   )}\n * </AppField>\n */\nexport const TextField = memo<Props>(\n  ({\n    label,\n    description,\n    placeholder,\n\n    tooltip,\n    helperText,\n    counter = false,\n    orientation = 'responsive',\n    showClearButton = false,\n    showErrorMessage = true,\n\n    required = false,\n    disabled = false,\n    maxLength,\n  }) => {\n    const id = useId();\n    const errorId = useId();\n    const inputRef = useRef<HTMLInputElement>(null);\n    const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n    const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n    const isDisabled = disabled || isSubmitting;\n\n    const _touched = state.meta.isDirty || state.meta.isTouched;\n    const _invalid = _touched && !state.meta.isValid;\n    const _isEmpty = required && state.value === null;\n    const _hasErrors = state.meta.errors.length > 0;\n    const _showClearButton = showClearButton && !isDisabled && !!state.value;\n\n    // Counter values are only computed when the feature is active\n    const _count = counter ? (state.value?.length ?? 0) : 0;\n    const _isNearLimit = counter && !!maxLength && _count >= maxLength * COUNTER_WARNING_THRESHOLD;\n    const _isAtLimit = counter && !!maxLength && _count >= maxLength;\n    const _countText = counter ? (maxLength ? `${_count} / ${maxLength} ký tự` : `${_count} ký tự`) : null;\n\n    // Skip the bottom row entirely when neither error nor counter will render\n    const _showBottomRow = counter || (_touched && showErrorMessage && _hasErrors);\n\n    const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n      ({ target: { value } }) => {\n        if (counter && maxLength && value.length > maxLength) return;\n        handleChange(value || null);\n      },\n      [counter, maxLength, handleChange]\n    );\n\n    const onClear = useCallback(() => {\n      handleChange(null);\n      inputRef.current?.focus();\n    }, [handleChange]);\n\n    return (\n      <FieldGroup className=\"gap-y-4 px-4\">\n        <Field orientation={orientation} data-invalid={_invalid}>\n          <FieldContent>\n            <FieldLabel aria-required={_isEmpty} htmlFor={id}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            {description && <FieldDescription>{description}</FieldDescription>}\n          </FieldContent>\n          <FieldContentMain>\n            <Input\n              ref={inputRef}\n              id={id}\n              name={name}\n              value={state.value ?? ''}\n              aria-invalid={_invalid}\n              aria-describedby={errorId}\n              autoComplete=\"off\"\n              placeholder={placeholder}\n              autoCapitalize=\"none\"\n              autoCorrect=\"off\"\n              disabled={isDisabled}\n              className={cn('pr-6', isDisabled && 'pointer-events-none bg-muted-muted opacity-60')}\n              onBlur={handleBlur}\n              onChange={onChange}\n              onKeyDown={onKeyDown}\n            />\n            {_showClearButton && (\n              <button\n                type=\"button\"\n                aria-label=\"Xóa\"\n                className=\"absolute inset-e-1 top-2.5 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform\"\n                onClick={onClear}\n              >\n                <XIcon aria-hidden=\"true\" />\n              </button>\n            )}\n            {isSubmitting && (\n              <div className=\"absolute inset-e-2 inset-y-0 top-2.5 text-muted-weak\">\n                <Loader2Icon size={ADORNMENT_ICON_SIZE} className=\"animate-spin text-primary-strong\" />\n              </div>\n            )}\n            {!_showClearButton && _touched && showErrorMessage && _hasErrors && (\n              <div className=\"absolute inset-e-2 inset-y-0 top-2.5 text-danger-strong\">\n                <BanIcon aria-hidden=\"true\" size={ADORNMENT_ICON_SIZE} />\n              </div>\n            )}\n            {_showBottomRow && (\n              <div className=\"my-1 flex w-full items-start justify-between gap-x-2\">\n                {_touched && showErrorMessage ? <FieldError id={errorId} className=\"flex-1\" errors={state.meta.errors} /> : <div />}\n                {counter && (\n                  <p\n                    className={cn(\n                      'h-4 flex-0 text-nowrap text-end text-xs tabular-nums transition-colors',\n                      _isAtLimit ? 'font-medium text-danger-strong' : _isNearLimit ? 'text-warning-strong' : 'text-text-positive-weak'\n                    )}\n                  >\n                    {_countText}\n                  </p>\n                )}\n              </div>\n            )}\n            <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nTextField.displayName = 'TextField';\n"],"mappings":"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"}

package/dist/{textarea-field-f8E3HEkw.mjs → textarea-field-Ctj5o5my.mjs}

@@ -1,2 +1,2 @@
-import{G as e}from"./tanstack-form-B6mzOylW.mjs";import{Textarea as t}from"./ui/textarea.mjs";import{Field as n,FieldContent as r,FieldContentMain as i,FieldDescription as a,FieldError as o,FieldGroup as s,FieldLabel as c,FieldNote as l,FieldSeparator as u,FieldTooltip as d}from"./field-BKyUqvzh.mjs";import{BanIcon as f,CheckIcon as p,CopyIcon as ee,Loader2Icon as m}from"lucide-react";import{memo as h,useCallback as g,useEffect as _,useId as v,useMemo as y,useRef as b,useState as x}from"react";import{cn as S}from"@customafk/react-toolkit/utils";import{jsx as C,jsxs as w}from"react/jsx-runtime";import{useStore as T}from"@tanstack/react-form";const E=h(({label:h,description:E,placeholder:te,tooltip:D,helperText:O,counter:k=!1,orientation:A=`responsive`,showErrorMessage:j=!0,required:M=!1,disabled:N=!1,maxLength:P})=>{let F=v(),I=v(),[L,R]=x(!1),z=b(null),{form:B,state:V,name:H,handleBlur:U,handleChange:W}=e(),G=T(B.store,({isSubmitting:e})=>e),K=N||G,q=V.value?.length??0,J=y(()=>k?P?`${q} / ${P} ký tự`:`${q} ký tự`:``,[q,k,P]),Y=!!P&&q>=P*.8,X=!!P&&q>=P,Z=V.meta.isDirty||V.meta.isTouched,Q=Z&&!V.meta.isValid,ne=M&&V.value===null,re=!!V.meta.errors.length,$=!!V.value&&!K,ie=y(()=>S(`h-4 flex-0 text-nowrap text-end text-xs tabular-nums transition-colors`,X?`font-medium text-danger-strong`:Y?`text-warning-strong`:`text-text-positive-weak`),[X,Y]),ae=g(({target:{value:e}})=>{K||k&&P&&e.length>P||W(e||null)},[K,k,P,W]),oe=g(async()=>{V.value&&(await navigator.clipboard.writeText(V.value),z.current!==null&&window.clearTimeout(z.current),R(!0),z.current=window.setTimeout(()=>R(!1),1500))},[V.value]);return _(()=>()=>{z.current!==null&&window.clearTimeout(z.current)},[]),w(s,{className:`gap-y-4 px-4`,children:[w(n,{orientation:A,"data-invalid":Q,children:[w(r,{children:[w(c,{"aria-required":ne,htmlFor:F,children:[h,D&&C(d,{tooltip:D})]}),C(a,{children:E})]}),w(i,{children:[C(t,{id:F,name:H,value:V.value??``,"aria-invalid":Q,"aria-describedby":I,autoCapitalize:`none`,autoComplete:`off`,autoCorrect:`off`,placeholder:te,disabled:K,className:S(K&&`pointer-events-none bg-muted-muted opacity-60`),onChange:ae,onBlur:U}),$&&C(`button`,{type:`button`,"aria-label":`Sao chép`,className:`absolute inset-e-1 top-2 flex size-4 cursor-pointer items-center justify-center rounded-md outline-none transition-[color,transform] focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform`,onClick:oe,children:L?C(p,{"aria-hidden":`true`,className:`text-success-strong`}):C(ee,{"aria-hidden":`true`,className:`text-text-positive-weak transition-colors hover:text-text-positive focus-visible:text-primary-strong`})}),G&&C(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-muted-weak`,children:C(m,{size:14,className:`animate-spin text-primary-strong`})}),!$&&Z&&j&&re&&C(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-danger-strong`,children:C(f,{size:14})}),w(`div`,{className:`my-1 flex w-full items-start justify-between gap-x-2`,children:[Z&&j?C(o,{id:I,className:`flex-1`,errors:V.meta.errors}):C(`div`,{}),!!k&&C(`p`,{className:ie,children:J})]}),C(l,{isShow:!!O,children:O})]})]}),C(u,{})]})});E.displayName=`TextareaField`;export{E as TextareaField};
-//# sourceMappingURL=textarea-field-f8E3HEkw.mjs.map
+import{G as e}from"./tanstack-form-CKAWexet.mjs";import{Textarea as t}from"./ui/textarea.mjs";import{Field as n,FieldContent as r,FieldContentMain as i,FieldDescription as a,FieldError as o,FieldGroup as s,FieldLabel as c,FieldNote as l,FieldSeparator as u,FieldTooltip as d}from"./field-V2DoD8qL.mjs";import{BanIcon as f,CheckIcon as p,CopyIcon as ee,Loader2Icon as m}from"lucide-react";import{memo as h,useCallback as g,useEffect as _,useId as v,useMemo as y,useRef as b,useState as x}from"react";import{cn as S}from"@customafk/react-toolkit/utils";import{jsx as C,jsxs as w}from"react/jsx-runtime";import{useStore as T}from"@tanstack/react-form";const E=h(({label:h,description:E,placeholder:te,tooltip:D,helperText:O,counter:k=!1,orientation:A=`responsive`,showErrorMessage:j=!0,required:M=!1,disabled:N=!1,maxLength:P})=>{let F=v(),I=v(),[L,R]=x(!1),z=b(null),{form:B,state:V,name:H,handleBlur:U,handleChange:W}=e(),G=T(B.store,({isSubmitting:e})=>e),K=N||G,q=V.value?.length??0,J=y(()=>k?P?`${q} / ${P} ký tự`:`${q} ký tự`:``,[q,k,P]),Y=!!P&&q>=P*.8,X=!!P&&q>=P,Z=V.meta.isDirty||V.meta.isTouched,Q=Z&&!V.meta.isValid,ne=M&&V.value===null,re=!!V.meta.errors.length,$=!!V.value&&!K,ie=y(()=>S(`h-4 flex-0 text-nowrap text-end text-xs tabular-nums transition-colors`,X?`font-medium text-danger-strong`:Y?`text-warning-strong`:`text-text-positive-weak`),[X,Y]),ae=g(({target:{value:e}})=>{K||k&&P&&e.length>P||W(e||null)},[K,k,P,W]),oe=g(async()=>{V.value&&(await navigator.clipboard.writeText(V.value),z.current!==null&&window.clearTimeout(z.current),R(!0),z.current=window.setTimeout(()=>R(!1),1500))},[V.value]);return _(()=>()=>{z.current!==null&&window.clearTimeout(z.current)},[]),w(s,{className:`gap-y-4 px-4`,children:[w(n,{orientation:A,"data-invalid":Q,children:[w(r,{children:[w(c,{"aria-required":ne,htmlFor:F,children:[h,D&&C(d,{tooltip:D})]}),C(a,{children:E})]}),w(i,{children:[C(t,{id:F,name:H,value:V.value??``,"aria-invalid":Q,"aria-describedby":I,autoCapitalize:`none`,autoComplete:`off`,autoCorrect:`off`,placeholder:te,disabled:K,className:S(K&&`pointer-events-none bg-muted-muted opacity-60`),onChange:ae,onBlur:U}),$&&C(`button`,{type:`button`,"aria-label":`Sao chép`,className:`absolute inset-e-1 top-2 flex size-4 cursor-pointer items-center justify-center rounded-md outline-none transition-[color,transform] focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform`,onClick:oe,children:L?C(p,{"aria-hidden":`true`,className:`text-success-strong`}):C(ee,{"aria-hidden":`true`,className:`text-text-positive-weak transition-colors hover:text-text-positive focus-visible:text-primary-strong`})}),G&&C(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-muted-weak`,children:C(m,{size:14,className:`animate-spin text-primary-strong`})}),!$&&Z&&j&&re&&C(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-danger-strong`,children:C(f,{size:14})}),w(`div`,{className:`my-1 flex w-full items-start justify-between gap-x-2`,children:[Z&&j?C(o,{id:I,className:`flex-1`,errors:V.meta.errors}):C(`div`,{}),!!k&&C(`p`,{className:ie,children:J})]}),C(l,{isShow:!!O,children:O})]})]}),C(u,{})]})});E.displayName=`TextareaField`;export{E as TextareaField};
+//# sourceMappingURL=textarea-field-Ctj5o5my.mjs.map

package/dist/{textarea-field-f8E3HEkw.mjs.map → textarea-field-Ctj5o5my.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"textarea-field-f8E3HEkw.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/textarea-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { BanIcon, CheckIcon, CopyIcon, Loader2Icon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Textarea } from '@/components/ui/textarea';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTooltip,\n} from '../ui/field';\n\nimport type { TextareaFieldProps as Props } from '../../types';\n\nexport const TextareaField = memo<Props>(\n  ({\n    label,\n    description,\n    placeholder,\n\n    tooltip,\n    helperText,\n    counter = false,\n    orientation = 'responsive',\n    showErrorMessage = true,\n\n    required = false,\n    disabled = false,\n    maxLength,\n  }) => {\n    const id = useId();\n    const errorId = useId();\n    const [copied, setCopied] = useState(false);\n    const copyTimeoutRef = useRef<number | null>(null);\n\n    const { form, state, name, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n    const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n    const isDisabled = disabled || isSubmitting;\n\n    const _count = state.value?.length ?? 0;\n\n    const _countText = useMemo(() => {\n      if (!counter) return '';\n      return maxLength ? `${_count} / ${maxLength} ký tự` : `${_count} ký tự`;\n    }, [_count, counter, maxLength]);\n\n    const _isNearLimit = !!maxLength && _count >= maxLength * 0.8;\n    const _isAtLimit = !!maxLength && _count >= maxLength;\n\n    const _touched = state.meta.isDirty || state.meta.isTouched;\n    const _invalid = _touched && !state.meta.isValid;\n    const _isEmpty = required && state.value === null;\n    const _hasErrors = !!state.meta.errors.length;\n    const _showCopy = !!state.value && !isDisabled;\n\n    const _counterClass = useMemo(\n      () =>\n        cn(\n          'h-4 flex-0 text-nowrap text-end text-xs tabular-nums transition-colors',\n          _isAtLimit ? 'font-medium text-danger-strong' : _isNearLimit ? 'text-warning-strong' : 'text-text-positive-weak'\n        ),\n      [_isAtLimit, _isNearLimit]\n    );\n\n    const onChange = useCallback<React.ChangeEventHandler<HTMLTextAreaElement>>(\n      ({ target: { value } }) => {\n        if (isDisabled) return;\n        if (counter && maxLength && value.length > maxLength) return;\n        handleChange(value || null);\n      },\n      [isDisabled, counter, maxLength, handleChange]\n    );\n\n    const onCopy = useCallback(async () => {\n      if (!state.value) return;\n      await navigator.clipboard.writeText(state.value);\n      if (copyTimeoutRef.current !== null) window.clearTimeout(copyTimeoutRef.current);\n      setCopied(true);\n      copyTimeoutRef.current = window.setTimeout(() => setCopied(false), 1500);\n    }, [state.value]);\n\n    useEffect(() => {\n      return () => {\n        if (copyTimeoutRef.current !== null) window.clearTimeout(copyTimeoutRef.current);\n      };\n    }, []);\n\n    return (\n      <FieldGroup className=\"gap-y-4 px-4\">\n        <Field orientation={orientation} data-invalid={_invalid}>\n          <FieldContent>\n            <FieldLabel aria-required={_isEmpty} htmlFor={id}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            <FieldDescription>{description}</FieldDescription>\n          </FieldContent>\n          <FieldContentMain>\n            <Textarea\n              id={id}\n              name={name}\n              value={state.value ?? ''}\n              aria-invalid={_invalid}\n              aria-describedby={errorId}\n              autoCapitalize=\"none\"\n              autoComplete=\"off\"\n              autoCorrect=\"off\"\n              placeholder={placeholder}\n              disabled={isDisabled}\n              className={cn(isDisabled && 'pointer-events-none bg-muted-muted opacity-60')}\n              onChange={onChange}\n              onBlur={handleBlur}\n            />\n            {_showCopy && (\n              <button\n                type=\"button\"\n                aria-label=\"Sao chép\"\n                className=\"absolute inset-e-1 top-2 flex size-4 cursor-pointer items-center justify-center rounded-md outline-none transition-[color,transform] focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform\"\n                onClick={onCopy}\n              >\n                {copied ? (\n                  <CheckIcon aria-hidden=\"true\" className=\"text-success-strong\" />\n                ) : (\n                  <CopyIcon\n                    aria-hidden=\"true\"\n                    className=\"text-text-positive-weak transition-colors hover:text-text-positive focus-visible:text-primary-strong\"\n                  />\n                )}\n              </button>\n            )}\n            {isSubmitting && (\n              <div className=\"absolute inset-e-2 inset-y-0 top-2.5 text-muted-weak\">\n                <Loader2Icon size={14} className=\"animate-spin text-primary-strong\" />\n              </div>\n            )}\n            {!_showCopy && _touched && showErrorMessage && _hasErrors && (\n              <div className=\"absolute inset-e-2 inset-y-0 top-2.5 text-danger-strong\">\n                <BanIcon size={14} />\n              </div>\n            )}\n            <div className=\"my-1 flex w-full items-start justify-between gap-x-2\">\n              {_touched && showErrorMessage ? <FieldError id={errorId} className=\"flex-1\" errors={state.meta.errors} /> : <div />}\n              {!!counter && <p className={_counterClass}>{_countText}</p>}\n            </div>\n            <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nTextareaField.displayName = 'TextareaField';\n"],"mappings":"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"}
+{"version":3,"file":"textarea-field-Ctj5o5my.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/textarea-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { BanIcon, CheckIcon, CopyIcon, Loader2Icon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Textarea } from '@/components/ui/textarea';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTooltip,\n} from '../ui/field';\n\nimport type { TextareaFieldProps as Props } from '../../types';\n\nexport const TextareaField = memo<Props>(\n  ({\n    label,\n    description,\n    placeholder,\n\n    tooltip,\n    helperText,\n    counter = false,\n    orientation = 'responsive',\n    showErrorMessage = true,\n\n    required = false,\n    disabled = false,\n    maxLength,\n  }) => {\n    const id = useId();\n    const errorId = useId();\n    const [copied, setCopied] = useState(false);\n    const copyTimeoutRef = useRef<number | null>(null);\n\n    const { form, state, name, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n    const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n    const isDisabled = disabled || isSubmitting;\n\n    const _count = state.value?.length ?? 0;\n\n    const _countText = useMemo(() => {\n      if (!counter) return '';\n      return maxLength ? `${_count} / ${maxLength} ký tự` : `${_count} ký tự`;\n    }, [_count, counter, maxLength]);\n\n    const _isNearLimit = !!maxLength && _count >= maxLength * 0.8;\n    const _isAtLimit = !!maxLength && _count >= maxLength;\n\n    const _touched = state.meta.isDirty || state.meta.isTouched;\n    const _invalid = _touched && !state.meta.isValid;\n    const _isEmpty = required && state.value === null;\n    const _hasErrors = !!state.meta.errors.length;\n    const _showCopy = !!state.value && !isDisabled;\n\n    const _counterClass = useMemo(\n      () =>\n        cn(\n          'h-4 flex-0 text-nowrap text-end text-xs tabular-nums transition-colors',\n          _isAtLimit ? 'font-medium text-danger-strong' : _isNearLimit ? 'text-warning-strong' : 'text-text-positive-weak'\n        ),\n      [_isAtLimit, _isNearLimit]\n    );\n\n    const onChange = useCallback<React.ChangeEventHandler<HTMLTextAreaElement>>(\n      ({ target: { value } }) => {\n        if (isDisabled) return;\n        if (counter && maxLength && value.length > maxLength) return;\n        handleChange(value || null);\n      },\n      [isDisabled, counter, maxLength, handleChange]\n    );\n\n    const onCopy = useCallback(async () => {\n      if (!state.value) return;\n      await navigator.clipboard.writeText(state.value);\n      if (copyTimeoutRef.current !== null) window.clearTimeout(copyTimeoutRef.current);\n      setCopied(true);\n      copyTimeoutRef.current = window.setTimeout(() => setCopied(false), 1500);\n    }, [state.value]);\n\n    useEffect(() => {\n      return () => {\n        if (copyTimeoutRef.current !== null) window.clearTimeout(copyTimeoutRef.current);\n      };\n    }, []);\n\n    return (\n      <FieldGroup className=\"gap-y-4 px-4\">\n        <Field orientation={orientation} data-invalid={_invalid}>\n          <FieldContent>\n            <FieldLabel aria-required={_isEmpty} htmlFor={id}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            <FieldDescription>{description}</FieldDescription>\n          </FieldContent>\n          <FieldContentMain>\n            <Textarea\n              id={id}\n              name={name}\n              value={state.value ?? ''}\n              aria-invalid={_invalid}\n              aria-describedby={errorId}\n              autoCapitalize=\"none\"\n              autoComplete=\"off\"\n              autoCorrect=\"off\"\n              placeholder={placeholder}\n              disabled={isDisabled}\n              className={cn(isDisabled && 'pointer-events-none bg-muted-muted opacity-60')}\n              onChange={onChange}\n              onBlur={handleBlur}\n            />\n            {_showCopy && (\n              <button\n                type=\"button\"\n                aria-label=\"Sao chép\"\n                className=\"absolute inset-e-1 top-2 flex size-4 cursor-pointer items-center justify-center rounded-md outline-none transition-[color,transform] focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform\"\n                onClick={onCopy}\n              >\n                {copied ? (\n                  <CheckIcon aria-hidden=\"true\" className=\"text-success-strong\" />\n                ) : (\n                  <CopyIcon\n                    aria-hidden=\"true\"\n                    className=\"text-text-positive-weak transition-colors hover:text-text-positive focus-visible:text-primary-strong\"\n                  />\n                )}\n              </button>\n            )}\n            {isSubmitting && (\n              <div className=\"absolute inset-e-2 inset-y-0 top-2.5 text-muted-weak\">\n                <Loader2Icon size={14} className=\"animate-spin text-primary-strong\" />\n              </div>\n            )}\n            {!_showCopy && _touched && showErrorMessage && _hasErrors && (\n              <div className=\"absolute inset-e-2 inset-y-0 top-2.5 text-danger-strong\">\n                <BanIcon size={14} />\n              </div>\n            )}\n            <div className=\"my-1 flex w-full items-start justify-between gap-x-2\">\n              {_touched && showErrorMessage ? <FieldError id={errorId} className=\"flex-1\" errors={state.meta.errors} /> : <div />}\n              {!!counter && <p className={_counterClass}>{_countText}</p>}\n            </div>\n            <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nTextareaField.displayName = 'TextareaField';\n"],"mappings":"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"}

package/dist/{textarea-field-DDPqESGM.cjs → textarea-field-jOqHJcAL.cjs}

@@ -1,2 +1,2 @@
-const e=require("./tanstack-form-DU-ZKXxZ.cjs"),t=require("./ui/textarea.cjs"),n=require("./field-BV5twmKA.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=(0,i.memo)(({label:c,description:l,placeholder:u,tooltip:d,helperText:f,counter:p=!1,orientation:m=`responsive`,showErrorMessage:h=!0,required:g=!1,disabled:_=!1,maxLength:v})=>{let y=(0,i.useId)(),b=(0,i.useId)(),[x,S]=(0,i.useState)(!1),C=(0,i.useRef)(null),{form:w,state:T,name:E,handleBlur:D,handleChange:O}=e.G(),k=(0,s.useStore)(w.store,({isSubmitting:e})=>e),A=_||k,j=T.value?.length??0,M=(0,i.useMemo)(()=>p?v?`${j} / ${v} ký tự`:`${j} ký tự`:``,[j,p,v]),N=!!v&&j>=v*.8,P=!!v&&j>=v,F=T.meta.isDirty||T.meta.isTouched,I=F&&!T.meta.isValid,L=g&&T.value===null,R=!!T.meta.errors.length,z=!!T.value&&!A,B=(0,i.useMemo)(()=>(0,a.cn)(`h-4 flex-0 text-nowrap text-end text-xs tabular-nums transition-colors`,P?`font-medium text-danger-strong`:N?`text-warning-strong`:`text-text-positive-weak`),[P,N]),V=(0,i.useCallback)(({target:{value:e}})=>{A||p&&v&&e.length>v||O(e||null)},[A,p,v,O]),H=(0,i.useCallback)(async()=>{T.value&&(await navigator.clipboard.writeText(T.value),C.current!==null&&window.clearTimeout(C.current),S(!0),C.current=window.setTimeout(()=>S(!1),1500))},[T.value]);return(0,i.useEffect)(()=>()=>{C.current!==null&&window.clearTimeout(C.current)},[]),(0,o.jsxs)(n.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,o.jsxs)(n.Field,{orientation:m,"data-invalid":I,children:[(0,o.jsxs)(n.FieldContent,{children:[(0,o.jsxs)(n.FieldLabel,{"aria-required":L,htmlFor:y,children:[c,d&&(0,o.jsx)(n.FieldTooltip,{tooltip:d})]}),(0,o.jsx)(n.FieldDescription,{children:l})]}),(0,o.jsxs)(n.FieldContentMain,{children:[(0,o.jsx)(t.Textarea,{id:y,name:E,value:T.value??``,"aria-invalid":I,"aria-describedby":b,autoCapitalize:`none`,autoComplete:`off`,autoCorrect:`off`,placeholder:u,disabled:A,className:(0,a.cn)(A&&`pointer-events-none bg-muted-muted opacity-60`),onChange:V,onBlur:D}),z&&(0,o.jsx)(`button`,{type:`button`,"aria-label":`Sao chép`,className:`absolute inset-e-1 top-2 flex size-4 cursor-pointer items-center justify-center rounded-md outline-none transition-[color,transform] focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform`,onClick:H,children:x?(0,o.jsx)(r.CheckIcon,{"aria-hidden":`true`,className:`text-success-strong`}):(0,o.jsx)(r.CopyIcon,{"aria-hidden":`true`,className:`text-text-positive-weak transition-colors hover:text-text-positive focus-visible:text-primary-strong`})}),k&&(0,o.jsx)(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-muted-weak`,children:(0,o.jsx)(r.Loader2Icon,{size:14,className:`animate-spin text-primary-strong`})}),!z&&F&&h&&R&&(0,o.jsx)(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-danger-strong`,children:(0,o.jsx)(r.BanIcon,{size:14})}),(0,o.jsxs)(`div`,{className:`my-1 flex w-full items-start justify-between gap-x-2`,children:[F&&h?(0,o.jsx)(n.FieldError,{id:b,className:`flex-1`,errors:T.meta.errors}):(0,o.jsx)(`div`,{}),!!p&&(0,o.jsx)(`p`,{className:B,children:M})]}),(0,o.jsx)(n.FieldNote,{isShow:!!f,children:f})]})]}),(0,o.jsx)(n.FieldSeparator,{})]})});c.displayName=`TextareaField`,exports.TextareaField=c;
-//# sourceMappingURL=textarea-field-DDPqESGM.cjs.map
+const e=require("./tanstack-form-CX3lC3mC.cjs"),t=require("./ui/textarea.cjs"),n=require("./field-BSLi-P0Q.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=(0,i.memo)(({label:c,description:l,placeholder:u,tooltip:d,helperText:f,counter:p=!1,orientation:m=`responsive`,showErrorMessage:h=!0,required:g=!1,disabled:_=!1,maxLength:v})=>{let y=(0,i.useId)(),b=(0,i.useId)(),[x,S]=(0,i.useState)(!1),C=(0,i.useRef)(null),{form:w,state:T,name:E,handleBlur:D,handleChange:O}=e.G(),k=(0,s.useStore)(w.store,({isSubmitting:e})=>e),A=_||k,j=T.value?.length??0,M=(0,i.useMemo)(()=>p?v?`${j} / ${v} ký tự`:`${j} ký tự`:``,[j,p,v]),N=!!v&&j>=v*.8,P=!!v&&j>=v,F=T.meta.isDirty||T.meta.isTouched,I=F&&!T.meta.isValid,L=g&&T.value===null,R=!!T.meta.errors.length,z=!!T.value&&!A,B=(0,i.useMemo)(()=>(0,a.cn)(`h-4 flex-0 text-nowrap text-end text-xs tabular-nums transition-colors`,P?`font-medium text-danger-strong`:N?`text-warning-strong`:`text-text-positive-weak`),[P,N]),V=(0,i.useCallback)(({target:{value:e}})=>{A||p&&v&&e.length>v||O(e||null)},[A,p,v,O]),H=(0,i.useCallback)(async()=>{T.value&&(await navigator.clipboard.writeText(T.value),C.current!==null&&window.clearTimeout(C.current),S(!0),C.current=window.setTimeout(()=>S(!1),1500))},[T.value]);return(0,i.useEffect)(()=>()=>{C.current!==null&&window.clearTimeout(C.current)},[]),(0,o.jsxs)(n.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,o.jsxs)(n.Field,{orientation:m,"data-invalid":I,children:[(0,o.jsxs)(n.FieldContent,{children:[(0,o.jsxs)(n.FieldLabel,{"aria-required":L,htmlFor:y,children:[c,d&&(0,o.jsx)(n.FieldTooltip,{tooltip:d})]}),(0,o.jsx)(n.FieldDescription,{children:l})]}),(0,o.jsxs)(n.FieldContentMain,{children:[(0,o.jsx)(t.Textarea,{id:y,name:E,value:T.value??``,"aria-invalid":I,"aria-describedby":b,autoCapitalize:`none`,autoComplete:`off`,autoCorrect:`off`,placeholder:u,disabled:A,className:(0,a.cn)(A&&`pointer-events-none bg-muted-muted opacity-60`),onChange:V,onBlur:D}),z&&(0,o.jsx)(`button`,{type:`button`,"aria-label":`Sao chép`,className:`absolute inset-e-1 top-2 flex size-4 cursor-pointer items-center justify-center rounded-md outline-none transition-[color,transform] focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform`,onClick:H,children:x?(0,o.jsx)(r.CheckIcon,{"aria-hidden":`true`,className:`text-success-strong`}):(0,o.jsx)(r.CopyIcon,{"aria-hidden":`true`,className:`text-text-positive-weak transition-colors hover:text-text-positive focus-visible:text-primary-strong`})}),k&&(0,o.jsx)(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-muted-weak`,children:(0,o.jsx)(r.Loader2Icon,{size:14,className:`animate-spin text-primary-strong`})}),!z&&F&&h&&R&&(0,o.jsx)(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-danger-strong`,children:(0,o.jsx)(r.BanIcon,{size:14})}),(0,o.jsxs)(`div`,{className:`my-1 flex w-full items-start justify-between gap-x-2`,children:[F&&h?(0,o.jsx)(n.FieldError,{id:b,className:`flex-1`,errors:T.meta.errors}):(0,o.jsx)(`div`,{}),!!p&&(0,o.jsx)(`p`,{className:B,children:M})]}),(0,o.jsx)(n.FieldNote,{isShow:!!f,children:f})]})]}),(0,o.jsx)(n.FieldSeparator,{})]})});c.displayName=`TextareaField`,exports.TextareaField=c;
+//# sourceMappingURL=textarea-field-jOqHJcAL.cjs.map

package/dist/{textarea-field-DDPqESGM.cjs.map → textarea-field-jOqHJcAL.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"textarea-field-DDPqESGM.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","Textarea","CheckIcon","CopyIcon","Loader2Icon","BanIcon","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/textarea-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { BanIcon, CheckIcon, CopyIcon, Loader2Icon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Textarea } from '@/components/ui/textarea';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTooltip,\n} from '../ui/field';\n\nimport type { TextareaFieldProps as Props } from '../../types';\n\nexport const TextareaField = memo<Props>(\n  ({\n    label,\n    description,\n    placeholder,\n\n    tooltip,\n    helperText,\n    counter = false,\n    orientation = 'responsive',\n    showErrorMessage = true,\n\n    required = false,\n    disabled = false,\n    maxLength,\n  }) => {\n    const id = useId();\n    const errorId = useId();\n    const [copied, setCopied] = useState(false);\n    const copyTimeoutRef = useRef<number | null>(null);\n\n    const { form, state, name, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n    const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n    const isDisabled = disabled || isSubmitting;\n\n    const _count = state.value?.length ?? 0;\n\n    const _countText = useMemo(() => {\n      if (!counter) return '';\n      return maxLength ? `${_count} / ${maxLength} ký tự` : `${_count} ký tự`;\n    }, [_count, counter, maxLength]);\n\n    const _isNearLimit = !!maxLength && _count >= maxLength * 0.8;\n    const _isAtLimit = !!maxLength && _count >= maxLength;\n\n    const _touched = state.meta.isDirty || state.meta.isTouched;\n    const _invalid = _touched && !state.meta.isValid;\n    const _isEmpty = required && state.value === null;\n    const _hasErrors = !!state.meta.errors.length;\n    const _showCopy = !!state.value && !isDisabled;\n\n    const _counterClass = useMemo(\n      () =>\n        cn(\n          'h-4 flex-0 text-nowrap text-end text-xs tabular-nums transition-colors',\n          _isAtLimit ? 'font-medium text-danger-strong' : _isNearLimit ? 'text-warning-strong' : 'text-text-positive-weak'\n        ),\n      [_isAtLimit, _isNearLimit]\n    );\n\n    const onChange = useCallback<React.ChangeEventHandler<HTMLTextAreaElement>>(\n      ({ target: { value } }) => {\n        if (isDisabled) return;\n        if (counter && maxLength && value.length > maxLength) return;\n        handleChange(value || null);\n      },\n      [isDisabled, counter, maxLength, handleChange]\n    );\n\n    const onCopy = useCallback(async () => {\n      if (!state.value) return;\n      await navigator.clipboard.writeText(state.value);\n      if (copyTimeoutRef.current !== null) window.clearTimeout(copyTimeoutRef.current);\n      setCopied(true);\n      copyTimeoutRef.current = window.setTimeout(() => setCopied(false), 1500);\n    }, [state.value]);\n\n    useEffect(() => {\n      return () => {\n        if (copyTimeoutRef.current !== null) window.clearTimeout(copyTimeoutRef.current);\n      };\n    }, []);\n\n    return (\n      <FieldGroup className=\"gap-y-4 px-4\">\n        <Field orientation={orientation} data-invalid={_invalid}>\n          <FieldContent>\n            <FieldLabel aria-required={_isEmpty} htmlFor={id}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            <FieldDescription>{description}</FieldDescription>\n          </FieldContent>\n          <FieldContentMain>\n            <Textarea\n              id={id}\n              name={name}\n              value={state.value ?? ''}\n              aria-invalid={_invalid}\n              aria-describedby={errorId}\n              autoCapitalize=\"none\"\n              autoComplete=\"off\"\n              autoCorrect=\"off\"\n              placeholder={placeholder}\n              disabled={isDisabled}\n              className={cn(isDisabled && 'pointer-events-none bg-muted-muted opacity-60')}\n              onChange={onChange}\n              onBlur={handleBlur}\n            />\n            {_showCopy && (\n              <button\n                type=\"button\"\n                aria-label=\"Sao chép\"\n                className=\"absolute inset-e-1 top-2 flex size-4 cursor-pointer items-center justify-center rounded-md outline-none transition-[color,transform] focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform\"\n                onClick={onCopy}\n              >\n                {copied ? (\n                  <CheckIcon aria-hidden=\"true\" className=\"text-success-strong\" />\n                ) : (\n                  <CopyIcon\n                    aria-hidden=\"true\"\n                    className=\"text-text-positive-weak transition-colors hover:text-text-positive focus-visible:text-primary-strong\"\n                  />\n                )}\n              </button>\n            )}\n            {isSubmitting && (\n              <div className=\"absolute inset-e-2 inset-y-0 top-2.5 text-muted-weak\">\n                <Loader2Icon size={14} className=\"animate-spin text-primary-strong\" />\n              </div>\n            )}\n            {!_showCopy && _touched && showErrorMessage && _hasErrors && (\n              <div className=\"absolute inset-e-2 inset-y-0 top-2.5 text-danger-strong\">\n                <BanIcon size={14} />\n              </div>\n            )}\n            <div className=\"my-1 flex w-full items-start justify-between gap-x-2\">\n              {_touched && showErrorMessage ? <FieldError id={errorId} className=\"flex-1\" errors={state.meta.errors} /> : <div />}\n              {!!counter && <p className={_counterClass}>{_countText}</p>}\n            </div>\n            <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nTextareaField.displayName = 'TextareaField';\n"],"mappings":"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"}
+{"version":3,"file":"textarea-field-jOqHJcAL.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","Textarea","CheckIcon","CopyIcon","Loader2Icon","BanIcon","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/textarea-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { BanIcon, CheckIcon, CopyIcon, Loader2Icon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Textarea } from '@/components/ui/textarea';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTooltip,\n} from '../ui/field';\n\nimport type { TextareaFieldProps as Props } from '../../types';\n\nexport const TextareaField = memo<Props>(\n  ({\n    label,\n    description,\n    placeholder,\n\n    tooltip,\n    helperText,\n    counter = false,\n    orientation = 'responsive',\n    showErrorMessage = true,\n\n    required = false,\n    disabled = false,\n    maxLength,\n  }) => {\n    const id = useId();\n    const errorId = useId();\n    const [copied, setCopied] = useState(false);\n    const copyTimeoutRef = useRef<number | null>(null);\n\n    const { form, state, name, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n    const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n    const isDisabled = disabled || isSubmitting;\n\n    const _count = state.value?.length ?? 0;\n\n    const _countText = useMemo(() => {\n      if (!counter) return '';\n      return maxLength ? `${_count} / ${maxLength} ký tự` : `${_count} ký tự`;\n    }, [_count, counter, maxLength]);\n\n    const _isNearLimit = !!maxLength && _count >= maxLength * 0.8;\n    const _isAtLimit = !!maxLength && _count >= maxLength;\n\n    const _touched = state.meta.isDirty || state.meta.isTouched;\n    const _invalid = _touched && !state.meta.isValid;\n    const _isEmpty = required && state.value === null;\n    const _hasErrors = !!state.meta.errors.length;\n    const _showCopy = !!state.value && !isDisabled;\n\n    const _counterClass = useMemo(\n      () =>\n        cn(\n          'h-4 flex-0 text-nowrap text-end text-xs tabular-nums transition-colors',\n          _isAtLimit ? 'font-medium text-danger-strong' : _isNearLimit ? 'text-warning-strong' : 'text-text-positive-weak'\n        ),\n      [_isAtLimit, _isNearLimit]\n    );\n\n    const onChange = useCallback<React.ChangeEventHandler<HTMLTextAreaElement>>(\n      ({ target: { value } }) => {\n        if (isDisabled) return;\n        if (counter && maxLength && value.length > maxLength) return;\n        handleChange(value || null);\n      },\n      [isDisabled, counter, maxLength, handleChange]\n    );\n\n    const onCopy = useCallback(async () => {\n      if (!state.value) return;\n      await navigator.clipboard.writeText(state.value);\n      if (copyTimeoutRef.current !== null) window.clearTimeout(copyTimeoutRef.current);\n      setCopied(true);\n      copyTimeoutRef.current = window.setTimeout(() => setCopied(false), 1500);\n    }, [state.value]);\n\n    useEffect(() => {\n      return () => {\n        if (copyTimeoutRef.current !== null) window.clearTimeout(copyTimeoutRef.current);\n      };\n    }, []);\n\n    return (\n      <FieldGroup className=\"gap-y-4 px-4\">\n        <Field orientation={orientation} data-invalid={_invalid}>\n          <FieldContent>\n            <FieldLabel aria-required={_isEmpty} htmlFor={id}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            <FieldDescription>{description}</FieldDescription>\n          </FieldContent>\n          <FieldContentMain>\n            <Textarea\n              id={id}\n              name={name}\n              value={state.value ?? ''}\n              aria-invalid={_invalid}\n              aria-describedby={errorId}\n              autoCapitalize=\"none\"\n              autoComplete=\"off\"\n              autoCorrect=\"off\"\n              placeholder={placeholder}\n              disabled={isDisabled}\n              className={cn(isDisabled && 'pointer-events-none bg-muted-muted opacity-60')}\n              onChange={onChange}\n              onBlur={handleBlur}\n            />\n            {_showCopy && (\n              <button\n                type=\"button\"\n                aria-label=\"Sao chép\"\n                className=\"absolute inset-e-1 top-2 flex size-4 cursor-pointer items-center justify-center rounded-md outline-none transition-[color,transform] focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform\"\n                onClick={onCopy}\n              >\n                {copied ? (\n                  <CheckIcon aria-hidden=\"true\" className=\"text-success-strong\" />\n                ) : (\n                  <CopyIcon\n                    aria-hidden=\"true\"\n                    className=\"text-text-positive-weak transition-colors hover:text-text-positive focus-visible:text-primary-strong\"\n                  />\n                )}\n              </button>\n            )}\n            {isSubmitting && (\n              <div className=\"absolute inset-e-2 inset-y-0 top-2.5 text-muted-weak\">\n                <Loader2Icon size={14} className=\"animate-spin text-primary-strong\" />\n              </div>\n            )}\n            {!_showCopy && _touched && showErrorMessage && _hasErrors && (\n              <div className=\"absolute inset-e-2 inset-y-0 top-2.5 text-danger-strong\">\n                <BanIcon size={14} />\n              </div>\n            )}\n            <div className=\"my-1 flex w-full items-start justify-between gap-x-2\">\n              {_touched && showErrorMessage ? <FieldError id={errorId} className=\"flex-1\" errors={state.meta.errors} /> : <div />}\n              {!!counter && <p className={_counterClass}>{_countText}</p>}\n            </div>\n            <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nTextareaField.displayName = 'TextareaField';\n"],"mappings":"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"}

package/dist/{title-field-CKxwzMOM.cjs → title-field-B2hM3S_S.cjs}

@@ -1,2 +1,2 @@
-const e=require("./field-BV5twmKA.cjs");let t=require("react/jsx-runtime");const n=({title:n,description:r,helperText:i})=>(0,t.jsxs)(e.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,t.jsxs)(e.Field,{className:`gap-0`,children:[(0,t.jsxs)(e.FieldContent,{children:[(0,t.jsx)(e.FieldLegend,{className:`mb-1`,children:n}),(0,t.jsx)(e.FieldDescription,{children:r})]}),(0,t.jsx)(e.FieldNote,{isShow:!!i,children:i})]}),(0,t.jsx)(e.FieldSeparator,{})]});exports.TanStackTitleField=n;
-//# sourceMappingURL=title-field-CKxwzMOM.cjs.map
+const e=require("./field-BSLi-P0Q.cjs");let t=require("react/jsx-runtime");const n=({title:n,description:r,helperText:i})=>(0,t.jsxs)(e.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,t.jsxs)(e.Field,{className:`gap-0`,children:[(0,t.jsxs)(e.FieldContent,{children:[(0,t.jsx)(e.FieldLegend,{className:`mb-1`,children:n}),(0,t.jsx)(e.FieldDescription,{children:r})]}),(0,t.jsx)(e.FieldNote,{isShow:!!i,children:i})]}),(0,t.jsx)(e.FieldSeparator,{})]});exports.TanStackTitleField=n;
+//# sourceMappingURL=title-field-B2hM3S_S.cjs.map

package/dist/{title-field-CKxwzMOM.cjs.map → title-field-B2hM3S_S.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"title-field-CKxwzMOM.cjs","names":["FieldGroup","Field","FieldContent","FieldLegend","FieldDescription","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/forms/title-field.tsx"],"sourcesContent":["import { Field, FieldContent, FieldDescription, FieldGroup, FieldLegend, FieldNote, FieldSeparator } from '../ui/field';\n\n/**\n * Renders a standalone section title with an optional description and helper note, followed by a separator.\n *\n * @example\n * import { TanStackTitleField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackTitleField\n *   title=\"Billing Address\"\n *   description=\"Provide the address associated with your payment method.\"\n *   helperText=\"Must match your bank records.\"\n * />\n */\nexport const TanStackTitleField: React.FC<{\n  /** The heading text rendered as a legend element. */\n  title: string;\n  /** Optional supplementary text displayed beneath the title. */\n  description?: string;\n  /** Optional helper note shown below the description area. */\n  helperText?: string;\n}> = ({ title, description, helperText }) => {\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field className=\"gap-0\">\n        <FieldContent>\n          <FieldLegend className=\"mb-1\">{title}</FieldLegend>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"2EAcA,MAAa,GAOP,CAAE,QAAO,cAAa,iBAExB,EAAA,EAAA,KAAA,CAACA,EAAAA,WAAD,CAAY,UAAU,wBAAtB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,UAAU,iBAAjB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,UAAU,gBAAQ,CAAmB,CAAA,GAClD,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,GACd,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACnD,KACP,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAiB,CAAA,CACP"}
+{"version":3,"file":"title-field-B2hM3S_S.cjs","names":["FieldGroup","Field","FieldContent","FieldLegend","FieldDescription","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/forms/title-field.tsx"],"sourcesContent":["import { Field, FieldContent, FieldDescription, FieldGroup, FieldLegend, FieldNote, FieldSeparator } from '../ui/field';\n\n/**\n * Renders a standalone section title with an optional description and helper note, followed by a separator.\n *\n * @example\n * import { TanStackTitleField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackTitleField\n *   title=\"Billing Address\"\n *   description=\"Provide the address associated with your payment method.\"\n *   helperText=\"Must match your bank records.\"\n * />\n */\nexport const TanStackTitleField: React.FC<{\n  /** The heading text rendered as a legend element. */\n  title: string;\n  /** Optional supplementary text displayed beneath the title. */\n  description?: string;\n  /** Optional helper note shown below the description area. */\n  helperText?: string;\n}> = ({ title, description, helperText }) => {\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field className=\"gap-0\">\n        <FieldContent>\n          <FieldLegend className=\"mb-1\">{title}</FieldLegend>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"2EAcA,MAAa,GAOP,CAAE,QAAO,cAAa,iBAExB,EAAA,EAAA,KAAA,CAACA,EAAAA,WAAD,CAAY,UAAU,wBAAtB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,UAAU,iBAAjB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,UAAU,gBAAQ,CAAmB,CAAA,GAClD,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,GACd,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACnD,KACP,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAiB,CAAA,CACP"}

package/dist/{title-field-84EnHPvl.mjs → title-field-oAqHRw59.mjs}

@@ -1,2 +1,2 @@
-import{Field as e,FieldContent as t,FieldDescription as n,FieldGroup as r,FieldLegend as i,FieldNote as a,FieldSeparator as o}from"./field-BKyUqvzh.mjs";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=({title:l,description:u,helperText:d})=>c(r,{className:`gap-y-4 px-4`,children:[c(e,{className:`gap-0`,children:[c(t,{children:[s(i,{className:`mb-1`,children:l}),s(n,{children:u})]}),s(a,{isShow:!!d,children:d})]}),s(o,{})]});export{l as TanStackTitleField};
-//# sourceMappingURL=title-field-84EnHPvl.mjs.map
+import{Field as e,FieldContent as t,FieldDescription as n,FieldGroup as r,FieldLegend as i,FieldNote as a,FieldSeparator as o}from"./field-V2DoD8qL.mjs";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=({title:l,description:u,helperText:d})=>c(r,{className:`gap-y-4 px-4`,children:[c(e,{className:`gap-0`,children:[c(t,{children:[s(i,{className:`mb-1`,children:l}),s(n,{children:u})]}),s(a,{isShow:!!d,children:d})]}),s(o,{})]});export{l as TanStackTitleField};
+//# sourceMappingURL=title-field-oAqHRw59.mjs.map

package/dist/{title-field-84EnHPvl.mjs.map → title-field-oAqHRw59.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"title-field-84EnHPvl.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/forms/title-field.tsx"],"sourcesContent":["import { Field, FieldContent, FieldDescription, FieldGroup, FieldLegend, FieldNote, FieldSeparator } from '../ui/field';\n\n/**\n * Renders a standalone section title with an optional description and helper note, followed by a separator.\n *\n * @example\n * import { TanStackTitleField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackTitleField\n *   title=\"Billing Address\"\n *   description=\"Provide the address associated with your payment method.\"\n *   helperText=\"Must match your bank records.\"\n * />\n */\nexport const TanStackTitleField: React.FC<{\n  /** The heading text rendered as a legend element. */\n  title: string;\n  /** Optional supplementary text displayed beneath the title. */\n  description?: string;\n  /** Optional helper note shown below the description area. */\n  helperText?: string;\n}> = ({ title, description, helperText }) => {\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field className=\"gap-0\">\n        <FieldContent>\n          <FieldLegend className=\"mb-1\">{title}</FieldLegend>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"2MAcA,MAAa,GAOP,CAAE,QAAO,cAAa,gBAExB,EAAC,EAAD,CAAY,UAAU,wBAAtB,CACE,EAAC,EAAD,CAAO,UAAU,iBAAjB,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAa,UAAU,gBAAQ,CAAmB,CAAA,EAClD,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,EACd,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACnD,IACP,EAAC,EAAD,CAAiB,CAAA,CACP"}
+{"version":3,"file":"title-field-oAqHRw59.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/forms/title-field.tsx"],"sourcesContent":["import { Field, FieldContent, FieldDescription, FieldGroup, FieldLegend, FieldNote, FieldSeparator } from '../ui/field';\n\n/**\n * Renders a standalone section title with an optional description and helper note, followed by a separator.\n *\n * @example\n * import { TanStackTitleField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackTitleField\n *   title=\"Billing Address\"\n *   description=\"Provide the address associated with your payment method.\"\n *   helperText=\"Must match your bank records.\"\n * />\n */\nexport const TanStackTitleField: React.FC<{\n  /** The heading text rendered as a legend element. */\n  title: string;\n  /** Optional supplementary text displayed beneath the title. */\n  description?: string;\n  /** Optional helper note shown below the description area. */\n  helperText?: string;\n}> = ({ title, description, helperText }) => {\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field className=\"gap-0\">\n        <FieldContent>\n          <FieldLegend className=\"mb-1\">{title}</FieldLegend>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"2MAcA,MAAa,GAOP,CAAE,QAAO,cAAa,gBAExB,EAAC,EAAD,CAAY,UAAU,wBAAtB,CACE,EAAC,EAAD,CAAO,UAAU,iBAAjB,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAa,UAAU,gBAAQ,CAAmB,CAAA,EAClD,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,EACd,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACnD,IACP,EAAC,EAAD,CAAiB,CAAA,CACP"}

package/dist/ui/input.d.cts

@@ -1,2 +1,2 @@
-import { n as InputVariantProps, r as inputVariants, t as Input } from "../input-BieGEIDf.cjs";
+import { n as InputVariantProps, r as inputVariants, t as Input } from "../input-BQJV7ryj.cjs";
 export { Input, InputVariantProps, inputVariants };

package/dist/ui/input.d.mts

@@ -1,2 +1,2 @@
-import { n as InputVariantProps, r as inputVariants, t as Input } from "../input-BieGEIDf.mjs";
+import { n as InputVariantProps, r as inputVariants, t as Input } from "../input-BQJV7ryj.mjs";
 export { Input, InputVariantProps, inputVariants };

package/dist/ui/inputs/search-input.d.cts

@@ -1,2 +1,2 @@
-import { t as SearchInput } from "../../search-input-Bq4enQzR.cjs";
+import { t as SearchInput } from "../../search-input-CE9lDDeD.cjs";
 export { SearchInput };

package/dist/ui/inputs/search-input.d.mts

@@ -1,2 +1,2 @@
-import { t as SearchInput } from "../../search-input-D51_mAY-.mjs";
+import { t as SearchInput } from "../../search-input-D2rEfTmY.mjs";
 export { SearchInput };

package/dist/ui/resizable.d.cts

@@ -1,2 +1,2 @@
-import { n as ResizablePanel, r as ResizablePanelGroup, t as ResizableHandle } from "../resizable-koX293wy.cjs";
+import { n as ResizablePanel, r as ResizablePanelGroup, t as ResizableHandle } from "../resizable-CAyWR1At.cjs";
 export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

package/dist/ui/resizable.d.mts

@@ -1,2 +1,2 @@
-import { n as ResizablePanel, r as ResizablePanelGroup, t as ResizableHandle } from "../resizable-koX293wy.mjs";
+import { n as ResizablePanel, r as ResizablePanelGroup, t as ResizableHandle } from "../resizable-CAyWR1At.mjs";
 export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

package/dist/ui/status.cjs

@@ -0,0 +1,2 @@
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("@customafk/react-toolkit/utils"),t=require("class-variance-authority"),n=require("react/jsx-runtime");const r=(0,t.cva)(`inline-flex w-fit items-center font-medium transition-colors duration-150`,{variants:{variant:{dot:`rounded border bg-background`,solid:`rounded text-white shadow-btn`,soft:`rounded`,bar:`gap-2 rounded-none border-l-4 pl-2`},color:{none:``,slate:``,gray:``,zinc:``,neutral:``,stone:``,red:``,orange:``,amber:``,yellow:``,lime:``,green:``,emerald:``,teal:``,cyan:``,sky:``,blue:``,indigo:``,violet:``,purple:``,fuchsia:``,pink:``,rose:``},size:{sm:`gap-1 px-1.5 py-0.5 text-[11px]`,md:`gap-1 px-2 py-0.5 text-xs`,lg:`gap-1.5 px-2.5 py-1 text-sm`}},defaultVariants:{variant:`dot`,color:`gray`,size:`md`},compoundVariants:[{variant:`dot`,color:`none`,className:`border-dashed border-gray-300 text-gray-400`},{variant:`dot`,color:`slate`,className:`border-slate-300 text-slate-700`},{variant:`dot`,color:`gray`,className:`border-gray-300 text-gray-700`},{variant:`dot`,color:`zinc`,className:`border-zinc-300 text-zinc-700`},{variant:`dot`,color:`neutral`,className:`border-neutral-300 text-neutral-700`},{variant:`dot`,color:`stone`,className:`border-stone-300 text-stone-700`},{variant:`dot`,color:`red`,className:`border-red-300 text-red-700`},{variant:`dot`,color:`orange`,className:`border-orange-300 text-orange-700`},{variant:`dot`,color:`amber`,className:`border-amber-300 text-amber-700`},{variant:`dot`,color:`yellow`,className:`border-yellow-300 text-yellow-700`},{variant:`dot`,color:`lime`,className:`border-lime-300 text-lime-700`},{variant:`dot`,color:`green`,className:`border-green-300 text-green-700`},{variant:`dot`,color:`emerald`,className:`border-emerald-300 text-emerald-700`},{variant:`dot`,color:`teal`,className:`border-teal-300 text-teal-700`},{variant:`dot`,color:`cyan`,className:`border-cyan-300 text-cyan-700`},{variant:`dot`,color:`sky`,className:`border-sky-300 text-sky-700`},{variant:`dot`,color:`blue`,className:`border-blue-300 text-blue-700`},{variant:`dot`,color:`indigo`,className:`border-indigo-300 text-indigo-700`},{variant:`dot`,color:`violet`,className:`border-violet-300 text-violet-700`},{variant:`dot`,color:`purple`,className:`border-purple-300 text-purple-700`},{variant:`dot`,color:`fuchsia`,className:`border-fuchsia-300 text-fuchsia-700`},{variant:`dot`,color:`pink`,className:`border-pink-300 text-pink-700`},{variant:`dot`,color:`rose`,className:`border-rose-300 text-rose-700`},{variant:`solid`,color:`none`,className:`border border-dashed border-gray-300 bg-transparent text-gray-400`},{variant:`solid`,color:`slate`,className:`bg-slate-500`},{variant:`solid`,color:`gray`,className:`bg-gray-500`},{variant:`solid`,color:`zinc`,className:`bg-zinc-500`},{variant:`solid`,color:`neutral`,className:`bg-neutral-500`},{variant:`solid`,color:`stone`,className:`bg-stone-500`},{variant:`solid`,color:`red`,className:`bg-red-500`},{variant:`solid`,color:`orange`,className:`bg-orange-500`},{variant:`solid`,color:`amber`,className:`bg-amber-500`},{variant:`solid`,color:`yellow`,className:`bg-yellow-500`},{variant:`solid`,color:`lime`,className:`bg-lime-500`},{variant:`solid`,color:`green`,className:`bg-green-500`},{variant:`solid`,color:`emerald`,className:`bg-emerald-500`},{variant:`solid`,color:`teal`,className:`bg-teal-500`},{variant:`solid`,color:`cyan`,className:`bg-cyan-500`},{variant:`solid`,color:`sky`,className:`bg-sky-500`},{variant:`solid`,color:`blue`,className:`bg-blue-500`},{variant:`solid`,color:`indigo`,className:`bg-indigo-500`},{variant:`solid`,color:`violet`,className:`bg-violet-500`},{variant:`solid`,color:`purple`,className:`bg-purple-500`},{variant:`solid`,color:`fuchsia`,className:`bg-fuchsia-500`},{variant:`solid`,color:`pink`,className:`bg-pink-500`},{variant:`solid`,color:`rose`,className:`bg-rose-500`},{variant:`soft`,color:`none`,className:`bg-gray-50 text-gray-400`},{variant:`soft`,color:`slate`,className:`bg-slate-100 text-slate-700`},{variant:`soft`,color:`gray`,className:`bg-gray-100 text-gray-700`},{variant:`soft`,color:`zinc`,className:`bg-zinc-100 text-zinc-700`},{variant:`soft`,color:`neutral`,className:`bg-neutral-100 text-neutral-700`},{variant:`soft`,color:`stone`,className:`bg-stone-100 text-stone-700`},{variant:`soft`,color:`red`,className:`bg-red-100 text-red-700`},{variant:`soft`,color:`orange`,className:`bg-orange-100 text-orange-700`},{variant:`soft`,color:`amber`,className:`bg-amber-100 text-amber-700`},{variant:`soft`,color:`yellow`,className:`bg-yellow-100 text-yellow-700`},{variant:`soft`,color:`lime`,className:`bg-lime-100 text-lime-700`},{variant:`soft`,color:`green`,className:`bg-green-100 text-green-700`},{variant:`soft`,color:`emerald`,className:`bg-emerald-100 text-emerald-700`},{variant:`soft`,color:`teal`,className:`bg-teal-100 text-teal-700`},{variant:`soft`,color:`cyan`,className:`bg-cyan-100 text-cyan-700`},{variant:`soft`,color:`sky`,className:`bg-sky-100 text-sky-700`},{variant:`soft`,color:`blue`,className:`bg-blue-100 text-blue-700`},{variant:`soft`,color:`indigo`,className:`bg-indigo-100 text-indigo-700`},{variant:`soft`,color:`violet`,className:`bg-violet-100 text-violet-700`},{variant:`soft`,color:`purple`,className:`bg-purple-100 text-purple-700`},{variant:`soft`,color:`fuchsia`,className:`bg-fuchsia-100 text-fuchsia-700`},{variant:`soft`,color:`pink`,className:`bg-pink-100 text-pink-700`},{variant:`soft`,color:`rose`,className:`bg-rose-100 text-rose-700`},{variant:`bar`,color:`none`,className:`border-gray-300 border-dashed text-gray-400`},{variant:`bar`,color:`slate`,className:`border-slate-500 text-slate-700`},{variant:`bar`,color:`gray`,className:`border-gray-500 text-gray-700`},{variant:`bar`,color:`zinc`,className:`border-zinc-500 text-zinc-700`},{variant:`bar`,color:`neutral`,className:`border-neutral-500 text-neutral-700`},{variant:`bar`,color:`stone`,className:`border-stone-500 text-stone-700`},{variant:`bar`,color:`red`,className:`border-red-500 text-red-700`},{variant:`bar`,color:`orange`,className:`border-orange-500 text-orange-700`},{variant:`bar`,color:`amber`,className:`border-amber-500 text-amber-700`},{variant:`bar`,color:`yellow`,className:`border-yellow-500 text-yellow-700`},{variant:`bar`,color:`lime`,className:`border-lime-500 text-lime-700`},{variant:`bar`,color:`green`,className:`border-green-500 text-green-700`},{variant:`bar`,color:`emerald`,className:`border-emerald-500 text-emerald-700`},{variant:`bar`,color:`teal`,className:`border-teal-500 text-teal-700`},{variant:`bar`,color:`cyan`,className:`border-cyan-500 text-cyan-700`},{variant:`bar`,color:`sky`,className:`border-sky-500 text-sky-700`},{variant:`bar`,color:`blue`,className:`border-blue-500 text-blue-700`},{variant:`bar`,color:`indigo`,className:`border-indigo-500 text-indigo-700`},{variant:`bar`,color:`violet`,className:`border-violet-500 text-violet-700`},{variant:`bar`,color:`purple`,className:`border-purple-500 text-purple-700`},{variant:`bar`,color:`fuchsia`,className:`border-fuchsia-500 text-fuchsia-700`},{variant:`bar`,color:`pink`,className:`border-pink-500 text-pink-700`},{variant:`bar`,color:`rose`,className:`border-rose-500 text-rose-700`}]}),i={none:`border border-dashed border-gray-300 bg-transparent`,slate:`bg-slate-500`,gray:`bg-gray-500`,zinc:`bg-zinc-500`,neutral:`bg-neutral-500`,stone:`bg-stone-500`,red:`bg-red-500`,orange:`bg-orange-500`,amber:`bg-amber-500`,yellow:`bg-yellow-500`,lime:`bg-lime-500`,green:`bg-green-500`,emerald:`bg-emerald-500`,teal:`bg-teal-500`,cyan:`bg-cyan-500`,sky:`bg-sky-500`,blue:`bg-blue-500`,indigo:`bg-indigo-500`,violet:`bg-violet-500`,purple:`bg-purple-500`,fuchsia:`bg-fuchsia-500`,pink:`bg-pink-500`,rose:`bg-rose-500`},a={none:`border border-dashed border-gray-300 bg-transparent`,slate:`bg-slate-300`,gray:`bg-gray-300`,zinc:`bg-zinc-300`,neutral:`bg-neutral-300`,stone:`bg-stone-300`,red:`bg-red-300`,orange:`bg-orange-300`,amber:`bg-amber-300`,yellow:`bg-yellow-300`,lime:`bg-lime-300`,green:`bg-green-300`,emerald:`bg-emerald-300`,teal:`bg-teal-300`,cyan:`bg-cyan-300`,sky:`bg-sky-300`,blue:`bg-blue-300`,indigo:`bg-indigo-300`,violet:`bg-violet-300`,purple:`bg-purple-300`,fuchsia:`bg-fuchsia-300`,pink:`bg-pink-300`,rose:`bg-rose-300`};function o({className:t,variant:o=`dot`,color:s=`gray`,size:c,children:l,...u}){let d=s??`gray`,f=o===`dot`||o===`solid`;return(0,n.jsxs)(`span`,{className:(0,e.cn)(r({variant:o,color:s,size:c}),t),...u,children:[f&&(0,n.jsx)(`span`,{"aria-hidden":!0,className:(0,e.cn)(`inline-block size-1.5 shrink-0 rounded-full`,o===`solid`?a[d]:i[d])}),l]})}exports.Status=o,exports.statusVariants=r;
+//# sourceMappingURL=status.cjs.map

package/dist/ui/status.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"status.cjs","names":[],"sources":["../../packages/components/ui/status.variants.ts","../../packages/components/ui/status.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const statusVariants = cva('inline-flex w-fit items-center font-medium transition-colors duration-150', {\n  variants: {\n    variant: {\n      dot: 'rounded border bg-background',\n      solid: 'rounded text-white shadow-btn',\n      soft: 'rounded',\n      bar: 'gap-2 rounded-none border-l-4 pl-2',\n    },\n    color: {\n      none: '',\n      slate: '',\n      gray: '',\n      zinc: '',\n      neutral: '',\n      stone: '',\n      red: '',\n      orange: '',\n      amber: '',\n      yellow: '',\n      lime: '',\n      green: '',\n      emerald: '',\n      teal: '',\n      cyan: '',\n      sky: '',\n      blue: '',\n      indigo: '',\n      violet: '',\n      purple: '',\n      fuchsia: '',\n      pink: '',\n      rose: '',\n    },\n    size: {\n      sm: 'gap-1 px-1.5 py-0.5 text-[11px]',\n      md: 'gap-1 px-2 py-0.5 text-xs',\n      lg: 'gap-1.5 px-2.5 py-1 text-sm',\n    },\n  },\n  defaultVariants: { variant: 'dot', color: 'gray', size: 'md' },\n  compoundVariants: [\n    // dot — outlined pill, colored dot + colored text\n    { variant: 'dot', color: 'none', className: 'border-dashed border-gray-300 text-gray-400' },\n    { variant: 'dot', color: 'slate', className: 'border-slate-300 text-slate-700' },\n    { variant: 'dot', color: 'gray', className: 'border-gray-300 text-gray-700' },\n    { variant: 'dot', color: 'zinc', className: 'border-zinc-300 text-zinc-700' },\n    { variant: 'dot', color: 'neutral', className: 'border-neutral-300 text-neutral-700' },\n    { variant: 'dot', color: 'stone', className: 'border-stone-300 text-stone-700' },\n    { variant: 'dot', color: 'red', className: 'border-red-300 text-red-700' },\n    { variant: 'dot', color: 'orange', className: 'border-orange-300 text-orange-700' },\n    { variant: 'dot', color: 'amber', className: 'border-amber-300 text-amber-700' },\n    { variant: 'dot', color: 'yellow', className: 'border-yellow-300 text-yellow-700' },\n    { variant: 'dot', color: 'lime', className: 'border-lime-300 text-lime-700' },\n    { variant: 'dot', color: 'green', className: 'border-green-300 text-green-700' },\n    { variant: 'dot', color: 'emerald', className: 'border-emerald-300 text-emerald-700' },\n    { variant: 'dot', color: 'teal', className: 'border-teal-300 text-teal-700' },\n    { variant: 'dot', color: 'cyan', className: 'border-cyan-300 text-cyan-700' },\n    { variant: 'dot', color: 'sky', className: 'border-sky-300 text-sky-700' },\n    { variant: 'dot', color: 'blue', className: 'border-blue-300 text-blue-700' },\n    { variant: 'dot', color: 'indigo', className: 'border-indigo-300 text-indigo-700' },\n    { variant: 'dot', color: 'violet', className: 'border-violet-300 text-violet-700' },\n    { variant: 'dot', color: 'purple', className: 'border-purple-300 text-purple-700' },\n    { variant: 'dot', color: 'fuchsia', className: 'border-fuchsia-300 text-fuchsia-700' },\n    { variant: 'dot', color: 'pink', className: 'border-pink-300 text-pink-700' },\n    { variant: 'dot', color: 'rose', className: 'border-rose-300 text-rose-700' },\n    // solid — filled pill, white text\n    {\n      variant: 'solid',\n      color: 'none',\n      className: 'border border-dashed border-gray-300 bg-transparent text-gray-400',\n    },\n    { variant: 'solid', color: 'slate', className: 'bg-slate-500' },\n    { variant: 'solid', color: 'gray', className: 'bg-gray-500' },\n    { variant: 'solid', color: 'zinc', className: 'bg-zinc-500' },\n    { variant: 'solid', color: 'neutral', className: 'bg-neutral-500' },\n    { variant: 'solid', color: 'stone', className: 'bg-stone-500' },\n    { variant: 'solid', color: 'red', className: 'bg-red-500' },\n    { variant: 'solid', color: 'orange', className: 'bg-orange-500' },\n    { variant: 'solid', color: 'amber', className: 'bg-amber-500' },\n    { variant: 'solid', color: 'yellow', className: 'bg-yellow-500' },\n    { variant: 'solid', color: 'lime', className: 'bg-lime-500' },\n    { variant: 'solid', color: 'green', className: 'bg-green-500' },\n    { variant: 'solid', color: 'emerald', className: 'bg-emerald-500' },\n    { variant: 'solid', color: 'teal', className: 'bg-teal-500' },\n    { variant: 'solid', color: 'cyan', className: 'bg-cyan-500' },\n    { variant: 'solid', color: 'sky', className: 'bg-sky-500' },\n    { variant: 'solid', color: 'blue', className: 'bg-blue-500' },\n    { variant: 'solid', color: 'indigo', className: 'bg-indigo-500' },\n    { variant: 'solid', color: 'violet', className: 'bg-violet-500' },\n    { variant: 'solid', color: 'purple', className: 'bg-purple-500' },\n    { variant: 'solid', color: 'fuchsia', className: 'bg-fuchsia-500' },\n    { variant: 'solid', color: 'pink', className: 'bg-pink-500' },\n    { variant: 'solid', color: 'rose', className: 'bg-rose-500' },\n    // soft — tinted background, bold colored text, no dot\n    { variant: 'soft', color: 'none', className: 'bg-gray-50 text-gray-400' },\n    { variant: 'soft', color: 'slate', className: 'bg-slate-100 text-slate-700' },\n    { variant: 'soft', color: 'gray', className: 'bg-gray-100 text-gray-700' },\n    { variant: 'soft', color: 'zinc', className: 'bg-zinc-100 text-zinc-700' },\n    { variant: 'soft', color: 'neutral', className: 'bg-neutral-100 text-neutral-700' },\n    { variant: 'soft', color: 'stone', className: 'bg-stone-100 text-stone-700' },\n    { variant: 'soft', color: 'red', className: 'bg-red-100 text-red-700' },\n    { variant: 'soft', color: 'orange', className: 'bg-orange-100 text-orange-700' },\n    { variant: 'soft', color: 'amber', className: 'bg-amber-100 text-amber-700' },\n    { variant: 'soft', color: 'yellow', className: 'bg-yellow-100 text-yellow-700' },\n    { variant: 'soft', color: 'lime', className: 'bg-lime-100 text-lime-700' },\n    { variant: 'soft', color: 'green', className: 'bg-green-100 text-green-700' },\n    { variant: 'soft', color: 'emerald', className: 'bg-emerald-100 text-emerald-700' },\n    { variant: 'soft', color: 'teal', className: 'bg-teal-100 text-teal-700' },\n    { variant: 'soft', color: 'cyan', className: 'bg-cyan-100 text-cyan-700' },\n    { variant: 'soft', color: 'sky', className: 'bg-sky-100 text-sky-700' },\n    { variant: 'soft', color: 'blue', className: 'bg-blue-100 text-blue-700' },\n    { variant: 'soft', color: 'indigo', className: 'bg-indigo-100 text-indigo-700' },\n    { variant: 'soft', color: 'violet', className: 'bg-violet-100 text-violet-700' },\n    { variant: 'soft', color: 'purple', className: 'bg-purple-100 text-purple-700' },\n    { variant: 'soft', color: 'fuchsia', className: 'bg-fuchsia-100 text-fuchsia-700' },\n    { variant: 'soft', color: 'pink', className: 'bg-pink-100 text-pink-700' },\n    { variant: 'soft', color: 'rose', className: 'bg-rose-100 text-rose-700' },\n    // bar — plain text with a colored left accent bar, for lists/timelines\n    { variant: 'bar', color: 'none', className: 'border-gray-300 border-dashed text-gray-400' },\n    { variant: 'bar', color: 'slate', className: 'border-slate-500 text-slate-700' },\n    { variant: 'bar', color: 'gray', className: 'border-gray-500 text-gray-700' },\n    { variant: 'bar', color: 'zinc', className: 'border-zinc-500 text-zinc-700' },\n    { variant: 'bar', color: 'neutral', className: 'border-neutral-500 text-neutral-700' },\n    { variant: 'bar', color: 'stone', className: 'border-stone-500 text-stone-700' },\n    { variant: 'bar', color: 'red', className: 'border-red-500 text-red-700' },\n    { variant: 'bar', color: 'orange', className: 'border-orange-500 text-orange-700' },\n    { variant: 'bar', color: 'amber', className: 'border-amber-500 text-amber-700' },\n    { variant: 'bar', color: 'yellow', className: 'border-yellow-500 text-yellow-700' },\n    { variant: 'bar', color: 'lime', className: 'border-lime-500 text-lime-700' },\n    { variant: 'bar', color: 'green', className: 'border-green-500 text-green-700' },\n    { variant: 'bar', color: 'emerald', className: 'border-emerald-500 text-emerald-700' },\n    { variant: 'bar', color: 'teal', className: 'border-teal-500 text-teal-700' },\n    { variant: 'bar', color: 'cyan', className: 'border-cyan-500 text-cyan-700' },\n    { variant: 'bar', color: 'sky', className: 'border-sky-500 text-sky-700' },\n    { variant: 'bar', color: 'blue', className: 'border-blue-500 text-blue-700' },\n    { variant: 'bar', color: 'indigo', className: 'border-indigo-500 text-indigo-700' },\n    { variant: 'bar', color: 'violet', className: 'border-violet-500 text-violet-700' },\n    { variant: 'bar', color: 'purple', className: 'border-purple-500 text-purple-700' },\n    { variant: 'bar', color: 'fuchsia', className: 'border-fuchsia-500 text-fuchsia-700' },\n    { variant: 'bar', color: 'pink', className: 'border-pink-500 text-pink-700' },\n    { variant: 'bar', color: 'rose', className: 'border-rose-500 text-rose-700' },\n  ],\n});\n\nexport type StatusVariants = VariantProps<typeof statusVariants>;\n","'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type StatusVariants, statusVariants } from './status.variants';\n\nconst dotColorMap: Record<NonNullable<StatusVariants['color']>, string> = {\n  none: 'border border-dashed border-gray-300 bg-transparent',\n  slate: 'bg-slate-500',\n  gray: 'bg-gray-500',\n  zinc: 'bg-zinc-500',\n  neutral: 'bg-neutral-500',\n  stone: 'bg-stone-500',\n  red: 'bg-red-500',\n  orange: 'bg-orange-500',\n  amber: 'bg-amber-500',\n  yellow: 'bg-yellow-500',\n  lime: 'bg-lime-500',\n  green: 'bg-green-500',\n  emerald: 'bg-emerald-500',\n  teal: 'bg-teal-500',\n  cyan: 'bg-cyan-500',\n  sky: 'bg-sky-500',\n  blue: 'bg-blue-500',\n  indigo: 'bg-indigo-500',\n  violet: 'bg-violet-500',\n  purple: 'bg-purple-500',\n  fuchsia: 'bg-fuchsia-500',\n  pink: 'bg-pink-500',\n  rose: 'bg-rose-500',\n};\n\nconst solidDotColorMap: Record<NonNullable<StatusVariants['color']>, string> = {\n  none: 'border border-dashed border-gray-300 bg-transparent',\n  slate: 'bg-slate-300',\n  gray: 'bg-gray-300',\n  zinc: 'bg-zinc-300',\n  neutral: 'bg-neutral-300',\n  stone: 'bg-stone-300',\n  red: 'bg-red-300',\n  orange: 'bg-orange-300',\n  amber: 'bg-amber-300',\n  yellow: 'bg-yellow-300',\n  lime: 'bg-lime-300',\n  green: 'bg-green-300',\n  emerald: 'bg-emerald-300',\n  teal: 'bg-teal-300',\n  cyan: 'bg-cyan-300',\n  sky: 'bg-sky-300',\n  blue: 'bg-blue-300',\n  indigo: 'bg-indigo-300',\n  violet: 'bg-violet-300',\n  purple: 'bg-purple-300',\n  fuchsia: 'bg-fuchsia-300',\n  pink: 'bg-pink-300',\n  rose: 'bg-rose-300',\n};\n\n/**\n * Props for the `Status` component.\n *\n * @property variant - Visual style — `'dot'` (outlined pill with a colored dot, default), `'solid'`\n * (filled pill with a colored dot), `'soft'` (tinted pill, no dot), or `'bar'` (plain text with a\n * colored left accent bar, for lists/timelines).\n * @property color - Full Tailwind color family, e.g. `'red'` | `'orange'` | `'green'` | `'cyan'` |\n * `'blue'` | `'pink'` | ... , or `'none'` for an unset/dashed neutral state. Defaults to `'gray'`.\n * @property size - `'sm'` | `'md'` (default) | `'lg'`.\n */\nexport type StatusProps = StatusVariants & React.ComponentPropsWithoutRef<'span'>;\n\n/**\n * Color-coded status indicator for pipeline/lifecycle states (e.g. lead, deal, order status).\n *\n * @example\n * ```tsx\n * import { Status } from '@customafk/lunas-ui/ui/status';\n *\n * <Status color=\"orange\">Đang tư vấn</Status>\n * <Status variant=\"soft\" color=\"green\">Đang đàm phán</Status>\n * <Status variant=\"bar\" color=\"pink\">Hoàn tất giao dịch</Status>\n * ```\n */\nfunction Status({ className, variant = 'dot', color = 'gray', size, children, ...props }: StatusProps) {\n  const resolvedColor = color ?? 'gray';\n  const showDot = variant === 'dot' || variant === 'solid';\n\n  return (\n    <span className={cn(statusVariants({ variant, color, size }), className)} {...props}>\n      {showDot && (\n        <span\n          aria-hidden\n          className={cn('inline-block size-1.5 shrink-0 rounded-full', variant === 'solid' ? solidDotColorMap[resolvedColor] : dotColorMap[resolvedColor])}\n        />\n      )}\n      {children}\n    </span>\n  );\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport { Status, statusVariants };\n"],"mappings":"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"}