@customafk/lunas-ui 0.2.72 → 0.2.74

package/dist/text-editor-DJYQXXtP.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-editor-DJYQXXtP.cjs","names":["Popover","PopoverTrigger","Link2","PopoverContent","Link2Off","Undo","Redo","DropdownMenu","DropdownMenuTrigger","ChevronDown","DropdownMenuContent","DropdownMenuItem","Bold","Italic","Underline","Strikethrough","Code","List","ListOrdered","ListChecks","Quote","Code2","Minus","AlignLeft","AlignCenter","AlignRight","AlignJustify","Popover","PopoverTrigger","Palette","PopoverContent","Highlighter","StarterKit","Underline","Placeholder","TextAlign","ListKeymap","TextStyle","Link","TaskList","TaskItem","Highlight","Color","CharacterCount","BubbleMenu","Bold","Italic","UnderlineIcon","Strikethrough","EditorContent"],"sources":["../packages/components/features/text-editor/toolbar-primitives.tsx","../packages/components/features/text-editor/link-dialog.tsx","../packages/components/features/text-editor/text-editor.variants.ts","../packages/components/features/text-editor/toolbar.tsx","../packages/components/features/text-editor/text-editor.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\ninterface ToolbarButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  isActive?: boolean;\n}\n\nfunction ToolbarButton({ isActive, className, children, ...props }: ToolbarButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"toolbar-button\"\n      data-active={isActive || undefined}\n      className={cn(\n        'inline-flex h-7 w-7 items-center justify-center rounded text-sm transition-colors',\n        'hover:bg-muted-muted hover:text-text-positive-strong',\n        'disabled:pointer-events-none disabled:opacity-40',\n        isActive && 'bg-primary-muted text-primary hover:bg-primary-muted/80 hover:text-primary',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n\nfunction ToolbarDivider() {\n  return <div data-slot=\"toolbar-divider\" className=\"mx-0.5 h-5 w-px shrink-0 bg-border\" />;\n}\n\nexport { ToolbarButton, ToolbarDivider };\n// biome-ignore lint/style/useComponentExportOnlyModules: type export needed by sibling feature files\nexport type { ToolbarButtonProps };\n","'use client';\n\nimport { useCallback, useState } from 'react';\n\nimport { Link2, Link2Off } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\n\nimport { type Editor, useEditorState } from '@tiptap/react';\nimport { ToolbarButton } from './toolbar-primitives';\n\nexport interface LinkDialogProps {\n  editor: Editor;\n}\n\nfunction LinkDialog({ editor }: LinkDialogProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [url, setUrl] = useState('');\n\n  const isLinkActive = useEditorState({\n    editor,\n    selector: ctx => ctx.editor.isActive('link'),\n  });\n\n  const handleOpenChange = useCallback(\n    (open: boolean) => {\n      if (open) {\n        const existingHref = editor.getAttributes('link').href ?? '';\n        setUrl(existingHref);\n      }\n      setIsOpen(open);\n    },\n    [editor]\n  );\n\n  const handleApply = useCallback(() => {\n    const trimmed = url.trim();\n    if (!trimmed) return;\n    editor.chain().focus().setLink({ href: trimmed, target: '_blank' }).run();\n    setIsOpen(false);\n  }, [editor, url]);\n\n  const handleRemove = useCallback(() => {\n    editor.chain().focus().unsetLink().run();\n    setIsOpen(false);\n  }, [editor]);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      handleApply();\n    }\n    if (e.key === 'Escape') {\n      setIsOpen(false);\n    }\n  };\n\n  return (\n    <Popover open={isOpen} onOpenChange={handleOpenChange}>\n      <PopoverTrigger asChild>\n        <ToolbarButton isActive={isLinkActive} title=\"Link (Ctrl+K)\" data-slot=\"toolbar-link-button\">\n          <Link2 className=\"h-3.5 w-3.5\" />\n        </ToolbarButton>\n      </PopoverTrigger>\n      <PopoverContent data-slot=\"link-dialog\" sideOffset={6} align=\"start\" className=\"w-72 p-3\">\n        <p className=\"mb-2 font-medium text-text-positive-strong text-xs\">{isLinkActive ? 'Edit Link' : 'Insert Link'}</p>\n        <div className=\"flex gap-1.5\">\n          <input\n            type=\"url\"\n            placeholder=\"https://example.com\"\n            value={url}\n            onChange={e => setUrl(e.target.value)}\n            onKeyDown={handleKeyDown}\n            autoFocus\n            className={cn(\n              'flex-1 rounded border border-border bg-transparent px-2.5 py-1.5 text-sm text-text-positive',\n              'outline-none placeholder:text-text-positive-muted',\n              'focus:border-primary focus:ring-1 focus:ring-primary/30'\n            )}\n          />\n          <button\n            type=\"button\"\n            onClick={handleApply}\n            disabled={!url.trim()}\n            className={cn(\n              'rounded bg-primary px-2.5 py-1.5 font-medium text-text-negative text-xs',\n              'transition-colors hover:bg-primary-strong',\n              'disabled:pointer-events-none disabled:opacity-50'\n            )}\n          >\n            Apply\n          </button>\n        </div>\n        {isLinkActive && (\n          <button type=\"button\" onClick={handleRemove} className=\"mt-2 flex items-center gap-1 text-danger-strong text-xs hover:underline\">\n            <Link2Off className=\"h-3 w-3\" />\n            Remove link\n          </button>\n        )}\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport { LinkDialog };\n","import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const textEditorVariants = cva(['flex flex-col overflow-hidden rounded-md'], {\n  variants: {\n    variant: {\n      outline: 'border border-border bg-background shadow-xs',\n      ghost: 'border-0',\n    },\n    size: {\n      sm: 'text-xs [&_.ProseMirror]:min-h-24 [&_.ProseMirror]:px-2.5 [&_.ProseMirror]:py-1.5',\n      md: '',\n      lg: 'text-base [&_.ProseMirror]:min-h-56 [&_.ProseMirror]:px-4 [&_.ProseMirror]:py-3',\n    },\n  },\n  defaultVariants: {\n    variant: 'outline',\n    size: 'md',\n  },\n});\n\nexport type TextEditorVariantProps = VariantProps<typeof textEditorVariants>;\n","'use client';\n\nimport {\n  AlignCenter,\n  AlignJustify,\n  AlignLeft,\n  AlignRight,\n  Bold,\n  ChevronDown,\n  Code,\n  Code2,\n  Highlighter,\n  Italic,\n  List,\n  ListChecks,\n  ListOrdered,\n  Minus,\n  Palette,\n  Quote,\n  Redo,\n  Strikethrough,\n  Underline,\n  Undo,\n} from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\n\nimport { type Editor, useEditorState } from '@tiptap/react';\nimport { LinkDialog } from './link-dialog';\nimport { ToolbarButton, ToolbarDivider } from './toolbar-primitives';\n\nconst HIGHLIGHT_COLORS = [\n  { label: 'Yellow', value: '#fde047' },\n  { label: 'Green', value: '#86efac' },\n  { label: 'Blue', value: '#93c5fd' },\n  { label: 'Pink', value: '#f9a8d4' },\n  { label: 'Orange', value: '#fdba74' },\n  { label: 'Purple', value: '#c4b5fd' },\n  { label: 'Red', value: '#fca5a5' },\n  { label: 'Cyan', value: '#67e8f9' },\n  { label: 'Lime', value: '#bef264' },\n  { label: 'Gray', value: '#d1d5db' },\n];\n\nconst TEXT_COLORS = [\n  { label: 'Default', value: '' },\n  { label: 'Red', value: '#ef4444' },\n  { label: 'Orange', value: '#f97316' },\n  { label: 'Yellow', value: '#eab308' },\n  { label: 'Green', value: '#22c55e' },\n  { label: 'Blue', value: '#3b82f6' },\n  { label: 'Purple', value: '#a855f7' },\n  { label: 'Pink', value: '#ec4899' },\n  { label: 'Gray', value: '#6b7280' },\n  { label: 'Black', value: '#000000' },\n];\n\nexport interface TextEditorToolbarProps {\n  editor: Editor;\n  className?: string;\n  enableLink?: boolean;\n  enableTaskList?: boolean;\n  enableHighlight?: boolean;\n  enableColor?: boolean;\n}\n\nfunction TextEditorToolbar({ editor, className, enableLink, enableTaskList, enableHighlight, enableColor }: TextEditorToolbarProps) {\n  const isHeading1Active = useEditorState({\n    editor,\n    selector: ctx => ctx.editor.isActive('heading', { level: 1 }),\n  });\n  const isHeading2Active = useEditorState({\n    editor,\n    selector: ctx => ctx.editor.isActive('heading', { level: 2 }),\n  });\n  const isHeading3Active = useEditorState({\n    editor,\n    selector: ctx => ctx.editor.isActive('heading', { level: 3 }),\n  });\n  const isBoldActive = useEditorState({\n    editor,\n    selector: ctx => ctx.editor.isActive('bold'),\n  });\n  const isItalicActive = useEditorState({\n    editor,\n    selector: ctx => ctx.editor.isActive('italic'),\n  });\n  const isUnderlineActive = useEditorState({\n    editor,\n    selector: ctx => ctx.editor.isActive('underline'),\n  });\n  const isStrikeActive = useEditorState({\n    editor,\n    selector: ctx => ctx.editor.isActive('strike'),\n  });\n  const isCodeActive = useEditorState({\n    editor,\n    selector: ctx => ctx.editor.isActive('code'),\n  });\n  const isBulletListActive = useEditorState({\n    editor,\n    selector: ctx => ctx.editor.isActive('bulletList'),\n  });\n  const isOrderedListActive = useEditorState({\n    editor,\n    selector: ctx => ctx.editor.isActive('orderedList'),\n  });\n  const isTaskListActive = useEditorState({\n    editor,\n    selector: ctx => ctx.editor.isActive('taskList'),\n  });\n  const isBlockquoteActive = useEditorState({\n    editor,\n    selector: ctx => ctx.editor.isActive('blockquote'),\n  });\n  const isCodeBlockActive = useEditorState({\n    editor,\n    selector: ctx => ctx.editor.isActive('codeBlock'),\n  });\n  const isAlignLeftActive = useEditorState({\n    editor,\n    selector: ctx => ctx.editor.isActive({ textAlign: 'left' }),\n  });\n  const isAlignCenterActive = useEditorState({\n    editor,\n    selector: ctx => ctx.editor.isActive({ textAlign: 'center' }),\n  });\n  const isAlignRightActive = useEditorState({\n    editor,\n    selector: ctx => ctx.editor.isActive({ textAlign: 'right' }),\n  });\n  const isAlignJustifyActive = useEditorState({\n    editor,\n    selector: ctx => ctx.editor.isActive({ textAlign: 'justify' }),\n  });\n\n  const headingLabel = isHeading1Active ? 'H1' : isHeading2Active ? 'H2' : isHeading3Active ? 'H3' : 'P';\n\n  return (\n    <div data-slot=\"text-editor-toolbar\" className={cn('flex flex-wrap items-center gap-0.5 border-border border-b bg-muted-muted/50 p-1.5', className)}>\n      {/* History */}\n      <ToolbarButton onClick={() => editor.chain().focus().undo().run()} disabled={!editor.can().undo()} title=\"Undo (Ctrl+Z)\">\n        <Undo className=\"h-3.5 w-3.5\" />\n      </ToolbarButton>\n      <ToolbarButton onClick={() => editor.chain().focus().redo().run()} disabled={!editor.can().redo()} title=\"Redo (Ctrl+Y)\">\n        <Redo className=\"h-3.5 w-3.5\" />\n      </ToolbarButton>\n\n      <ToolbarDivider />\n\n      {/* Heading dropdown */}\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <button\n            type=\"button\"\n            data-slot=\"toolbar-heading-trigger\"\n            className={cn(\n              'inline-flex h-7 items-center gap-1 rounded px-1.5 font-medium text-xs transition-colors',\n              'hover:bg-muted-muted hover:text-text-positive-strong',\n              'disabled:pointer-events-none disabled:opacity-40',\n              (isHeading1Active || isHeading2Active || isHeading3Active) && 'bg-primary-muted text-primary hover:bg-primary-muted/80 hover:text-primary'\n            )}\n          >\n            <span className=\"w-5 text-center\">{headingLabel}</span>\n            <ChevronDown className=\"h-3 w-3 opacity-60\" />\n          </button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"start\" className=\"min-w-32\">\n          <DropdownMenuItem onClick={() => editor.chain().focus().setParagraph().run()}>\n            <span className=\"text-sm\">Paragraph</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}>\n            <span className=\"font-bold text-lg\">Heading 1</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}>\n            <span className=\"font-semibold text-base\">Heading 2</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}>\n            <span className=\"font-semibold text-sm\">Heading 3</span>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n\n      <ToolbarDivider />\n\n      {/* Text formatting */}\n      <ToolbarButton onClick={() => editor.chain().focus().toggleBold().run()} isActive={isBoldActive} title=\"Bold (Ctrl+B)\">\n        <Bold className=\"h-3.5 w-3.5\" />\n      </ToolbarButton>\n      <ToolbarButton onClick={() => editor.chain().focus().toggleItalic().run()} isActive={isItalicActive} title=\"Italic (Ctrl+I)\">\n        <Italic className=\"h-3.5 w-3.5\" />\n      </ToolbarButton>\n      <ToolbarButton onClick={() => editor.chain().focus().toggleUnderline().run()} isActive={isUnderlineActive} title=\"Underline (Ctrl+U)\">\n        <Underline className=\"h-3.5 w-3.5\" />\n      </ToolbarButton>\n      <ToolbarButton onClick={() => editor.chain().focus().toggleStrike().run()} isActive={isStrikeActive} title=\"Strikethrough\">\n        <Strikethrough className=\"h-3.5 w-3.5\" />\n      </ToolbarButton>\n      <ToolbarButton onClick={() => editor.chain().focus().toggleCode().run()} isActive={isCodeActive} title=\"Inline Code\">\n        <Code className=\"h-3.5 w-3.5\" />\n      </ToolbarButton>\n\n      <ToolbarDivider />\n\n      {/* Lists */}\n      <ToolbarButton onClick={() => editor.chain().focus().toggleBulletList().run()} isActive={isBulletListActive} title=\"Bullet List\">\n        <List className=\"h-3.5 w-3.5\" />\n      </ToolbarButton>\n      <ToolbarButton onClick={() => editor.chain().focus().toggleOrderedList().run()} isActive={isOrderedListActive} title=\"Ordered List\">\n        <ListOrdered className=\"h-3.5 w-3.5\" />\n      </ToolbarButton>\n      {enableTaskList && (\n        <ToolbarButton onClick={() => editor.chain().focus().toggleTaskList().run()} isActive={isTaskListActive} title=\"Task List\">\n          <ListChecks className=\"h-3.5 w-3.5\" />\n        </ToolbarButton>\n      )}\n\n      <ToolbarDivider />\n\n      {/* Blocks */}\n      <ToolbarButton onClick={() => editor.chain().focus().toggleBlockquote().run()} isActive={isBlockquoteActive} title=\"Blockquote\">\n        <Quote className=\"h-3.5 w-3.5\" />\n      </ToolbarButton>\n      <ToolbarButton onClick={() => editor.chain().focus().toggleCodeBlock().run()} isActive={isCodeBlockActive} title=\"Code Block\">\n        <Code2 className=\"h-3.5 w-3.5\" />\n      </ToolbarButton>\n      <ToolbarButton onClick={() => editor.chain().focus().setHorizontalRule().run()} title=\"Horizontal Rule\">\n        <Minus className=\"h-3.5 w-3.5\" />\n      </ToolbarButton>\n\n      <ToolbarDivider />\n\n      {/* Text alignment */}\n      <ToolbarButton onClick={() => editor.chain().focus().setTextAlign('left').run()} isActive={isAlignLeftActive} title=\"Align Left\">\n        <AlignLeft className=\"h-3.5 w-3.5\" />\n      </ToolbarButton>\n      <ToolbarButton onClick={() => editor.chain().focus().setTextAlign('center').run()} isActive={isAlignCenterActive} title=\"Align Center\">\n        <AlignCenter className=\"h-3.5 w-3.5\" />\n      </ToolbarButton>\n      <ToolbarButton onClick={() => editor.chain().focus().setTextAlign('right').run()} isActive={isAlignRightActive} title=\"Align Right\">\n        <AlignRight className=\"h-3.5 w-3.5\" />\n      </ToolbarButton>\n      <ToolbarButton onClick={() => editor.chain().focus().setTextAlign('justify').run()} isActive={isAlignJustifyActive} title=\"Align Justify\">\n        <AlignJustify className=\"h-3.5 w-3.5\" />\n      </ToolbarButton>\n\n      {/* Link */}\n      {enableLink && (\n        <>\n          <ToolbarDivider />\n          <LinkDialog editor={editor} />\n        </>\n      )}\n\n      {/* Color & Highlight */}\n      {(enableColor || enableHighlight) && (\n        <>\n          <ToolbarDivider />\n          {enableColor && (\n            <Popover>\n              <PopoverTrigger asChild>\n                <ToolbarButton title=\"Text Color\">\n                  <Palette className=\"h-3.5 w-3.5\" />\n                </ToolbarButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\" className=\"w-44 p-2\">\n                <p className=\"mb-1.5 font-medium text-text-positive-weak text-xs\">Text Color</p>\n                <div className=\"grid grid-cols-5 gap-1\">\n                  {TEXT_COLORS.map(color => (\n                    <button\n                      key={color.label}\n                      type=\"button\"\n                      title={color.label}\n                      onClick={() => {\n                        if (!color.value) {\n                          editor.chain().focus().unsetColor().run();\n                        } else {\n                          editor.chain().focus().setColor(color.value).run();\n                        }\n                      }}\n                      className={cn(\n                        'h-6 w-6 rounded border border-border transition-transform hover:scale-110',\n                        !color.value && 'bg-background text-[10px] text-text-positive leading-none'\n                      )}\n                      style={color.value ? { backgroundColor: color.value } : undefined}\n                    >\n                      {!color.value && '∅'}\n                    </button>\n                  ))}\n                </div>\n              </PopoverContent>\n            </Popover>\n          )}\n          {enableHighlight && (\n            <Popover>\n              <PopoverTrigger asChild>\n                <ToolbarButton title=\"Highlight\">\n                  <Highlighter className=\"h-3.5 w-3.5\" />\n                </ToolbarButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\" className=\"w-44 p-2\">\n                <p className=\"mb-1.5 font-medium text-text-positive-weak text-xs\">Highlight</p>\n                <div className=\"grid grid-cols-5 gap-1\">\n                  {HIGHLIGHT_COLORS.map(color => (\n                    <button\n                      key={color.label}\n                      type=\"button\"\n                      title={color.label}\n                      onClick={() => editor.chain().focus().toggleHighlight({ color: color.value }).run()}\n                      className=\"h-6 w-6 rounded border border-border transition-transform hover:scale-110\"\n                      style={{ backgroundColor: color.value }}\n                    />\n                  ))}\n                </div>\n                <button\n                  type=\"button\"\n                  onClick={() => editor.chain().focus().unsetHighlight().run()}\n                  className=\"mt-1.5 w-full rounded border border-border py-0.5 text-center text-text-positive-weak text-xs hover:bg-muted-muted\"\n                >\n                  Clear highlight\n                </button>\n              </PopoverContent>\n            </Popover>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n\nexport { TextEditorToolbar };\n","'use client';\n\nimport { useEffect, useMemo } from 'react';\n\nimport { Bold, Italic, Strikethrough, Underline as UnderlineIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { CharacterCount } from '@tiptap/extension-character-count';\nimport { Highlight } from '@tiptap/extension-highlight';\nimport { Link } from '@tiptap/extension-link';\nimport { ListKeymap } from '@tiptap/extension-list-keymap';\nimport Placeholder from '@tiptap/extension-placeholder';\nimport { TaskItem } from '@tiptap/extension-task-item';\nimport { TaskList } from '@tiptap/extension-task-list';\nimport TextAlign from '@tiptap/extension-text-align';\nimport { Color, TextStyle } from '@tiptap/extension-text-style';\nimport Underline from '@tiptap/extension-underline';\nimport { type AnyExtension, EditorContent, useEditor, useEditorState } from '@tiptap/react';\nimport { BubbleMenu } from '@tiptap/react/menus';\nimport StarterKit from '@tiptap/starter-kit';\nimport { LinkDialog } from './link-dialog';\nimport { type TextEditorVariantProps, textEditorVariants } from './text-editor.variants';\nimport { TextEditorToolbar } from './toolbar';\nimport { ToolbarButton, ToolbarDivider } from './toolbar-primitives';\n\nexport interface TextEditorProps extends TextEditorVariantProps {\n  value?: string;\n  defaultValue?: string;\n  onChange?: (html: string) => void;\n  placeholder?: string;\n  readOnly?: boolean;\n  showToolbar?: boolean;\n  className?: string;\n  toolbarClassName?: string;\n  editorClassName?: string;\n  // Character count\n  maxLength?: number;\n  showCharacterCount?: boolean;\n  onCharacterCount?: (stats: { characters: number; words: number }) => void;\n  // Feature flags\n  enableLink?: boolean;\n  enableBubbleMenu?: boolean;\n  enableTaskList?: boolean;\n  enableHighlight?: boolean;\n  enableColor?: boolean;\n}\n\nfunction TextEditor({\n  value,\n  defaultValue,\n  onChange,\n  placeholder = 'Start writing...',\n  readOnly = false,\n  showToolbar = true,\n  variant,\n  size,\n  className,\n  toolbarClassName,\n  editorClassName,\n  maxLength,\n  showCharacterCount,\n  onCharacterCount,\n  enableLink,\n  enableBubbleMenu,\n  enableTaskList,\n  enableHighlight,\n  enableColor,\n}: TextEditorProps) {\n  const needsCharCount = maxLength !== undefined || showCharacterCount || onCharacterCount !== undefined;\n  const needsTextStyle = enableColor || enableHighlight;\n\n  const extensions = useMemo(() => {\n    const base: AnyExtension[] = [\n      StarterKit,\n      Underline,\n      Placeholder.configure({ placeholder }),\n      TextAlign.configure({ types: ['heading', 'paragraph'] }),\n      ListKeymap,\n    ];\n\n    if (needsTextStyle) base.push(TextStyle);\n    if (enableLink) {\n      base.push(Link.configure({ openOnClick: false, linkOnPaste: true, defaultProtocol: 'https' }));\n    }\n    if (enableTaskList) {\n      base.push(TaskList, TaskItem.configure({ nested: true }));\n    }\n    if (enableHighlight) {\n      base.push(Highlight.configure({ multicolor: true }));\n    }\n    if (enableColor) {\n      base.push(Color);\n    }\n    if (needsCharCount) {\n      base.push(CharacterCount.configure({ limit: maxLength }));\n    }\n\n    return base;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [needsCharCount, placeholder, maxLength, enableHighlight, needsTextStyle, enableTaskList, enableLink, enableColor]);\n\n  const editor = useEditor({\n    extensions,\n    content: value ?? defaultValue,\n    editable: !readOnly,\n    onUpdate: ({ editor: e }) => {\n      onChange?.(e.getHTML());\n      if (onCharacterCount) {\n        const storage = e.storage.characterCount;\n        onCharacterCount({ characters: storage.characters(), words: storage.words() });\n      }\n    },\n  });\n\n  useEffect(() => {\n    if (!editor || value === undefined) return;\n    if (editor.getHTML() === value) return;\n    editor.commands.setContent(value);\n  }, [editor, value]);\n\n  useEffect(() => {\n    if (!editor) return;\n    editor.setEditable(!readOnly);\n  }, [editor, readOnly]);\n\n  const charCount = useEditorState({\n    editor,\n    selector: ctx => {\n      const storage = ctx.editor?.storage?.characterCount;\n      return storage ? (storage.characters() as number) : 0;\n    },\n  });\n\n  const wordCount = useEditorState({\n    editor,\n    selector: ctx => {\n      const storage = ctx.editor?.storage?.characterCount;\n      return storage ? (storage.words() as number) : 0;\n    },\n  });\n\n  const showCharCount = showCharacterCount || maxLength !== undefined;\n  const isNearLimit = maxLength !== undefined && charCount > maxLength * 0.9;\n\n  return (\n    <div data-slot=\"text-editor\" className={cn('lunas-text-editor', textEditorVariants({ variant, size }), className)}>\n      {showToolbar && !readOnly && editor && (\n        <TextEditorToolbar\n          editor={editor}\n          className={toolbarClassName}\n          enableLink={enableLink}\n          enableTaskList={enableTaskList}\n          enableHighlight={enableHighlight}\n          enableColor={enableColor}\n        />\n      )}\n\n      {enableBubbleMenu && !readOnly && editor && (\n        <BubbleMenu\n          editor={editor}\n          options={{ placement: 'top' }}\n          className={cn('flex items-center gap-0.5 rounded-md border border-border bg-popover p-1 shadow-dropdown')}\n        >\n          <ToolbarButton onClick={() => editor.chain().focus().toggleBold().run()} isActive={editor.isActive('bold')} title=\"Bold (Ctrl+B)\">\n            <Bold className=\"h-3.5 w-3.5\" />\n          </ToolbarButton>\n          <ToolbarButton onClick={() => editor.chain().focus().toggleItalic().run()} isActive={editor.isActive('italic')} title=\"Italic (Ctrl+I)\">\n            <Italic className=\"h-3.5 w-3.5\" />\n          </ToolbarButton>\n          <ToolbarButton onClick={() => editor.chain().focus().toggleUnderline().run()} isActive={editor.isActive('underline')} title=\"Underline (Ctrl+U)\">\n            <UnderlineIcon className=\"h-3.5 w-3.5\" />\n          </ToolbarButton>\n          <ToolbarButton onClick={() => editor.chain().focus().toggleStrike().run()} isActive={editor.isActive('strike')} title=\"Strikethrough\">\n            <Strikethrough className=\"h-3.5 w-3.5\" />\n          </ToolbarButton>\n          {enableLink && (\n            <>\n              <ToolbarDivider />\n              <LinkDialog editor={editor} />\n            </>\n          )}\n        </BubbleMenu>\n      )}\n\n      <EditorContent editor={editor} data-slot=\"text-editor-content\" className={cn('flex-1 bg-white text-sm text-text-positive', editorClassName)} />\n\n      {showCharCount && needsCharCount && (\n        <div\n          data-slot=\"text-editor-footer\"\n          className=\"flex items-center justify-between border-border border-t bg-muted-muted/30 px-3 py-1 text-text-positive-weak text-xs\"\n        >\n          <span>{wordCount} words</span>\n          <span data-warning={isNearLimit || undefined} className=\"data-warning:text-warning-strong\">\n            {charCount}\n            {maxLength ? ` / ${maxLength}` : ''} characters\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport { TextEditor };\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-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
+import{G as e}from"./tanstack-form-AGwPfwiM.mjs";import{t}from"./text-editor-BQtIXOpM.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-C2KDtfZV.mjs.map

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"text-editor-field-C2KDtfZV.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-editor-field-Ddvgdo_p.cjs → text-editor-field-DF8lkOc_.cjs}

@@ -1,2 +1,2 @@
-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
+const e=require("./tanstack-form-Bae0TOEr.cjs"),t=require("./text-editor-DJYQXXtP.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-DF8lkOc_.cjs.map

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"text-editor-field-DF8lkOc_.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-field-Cwu0xuXt.cjs → text-field-B1n5Xd-k.cjs}

@@ -1,2 +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
+const e=require("./tanstack-form-Bae0TOEr.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-B1n5Xd-k.cjs.map

package/dist/{text-field-Cwu0xuXt.cjs.map → text-field-B1n5Xd-k.cjs.map}

@@ -1 +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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"}
+{"version":3,"file":"text-field-B1n5Xd-k.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/{text-field-CBUTZKGH.mjs → text-field-BJciq-S8.mjs}

@@ -1,2 +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
+import{G as e}from"./tanstack-form-AGwPfwiM.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-BJciq-S8.mjs.map

package/dist/{text-field-CBUTZKGH.mjs.map → text-field-BJciq-S8.mjs.map}

@@ -1 +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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"}
+{"version":3,"file":"text-field-BJciq-S8.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/{textarea-field-Ctj5o5my.mjs → textarea-field-BjdX2Qjt.mjs}

@@ -1,2 +1,2 @@
-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
+import{G as e}from"./tanstack-form-AGwPfwiM.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-BjdX2Qjt.mjs.map

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

@@ -1 +1 @@
-{"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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"}
+{"version":3,"file":"textarea-field-BjdX2Qjt.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-jOqHJcAL.cjs → textarea-field-Bm7bsyjB.cjs}

@@ -1,2 +1,2 @@
-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
+const e=require("./tanstack-form-Bae0TOEr.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-Bm7bsyjB.cjs.map

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

@@ -1 +1 @@
-{"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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"}
+{"version":3,"file":"textarea-field-Bm7bsyjB.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/{toggle-Bh4EazxT.d.cts → toggle-Bk5Lvs5n.d.cts}

@@ -4,7 +4,7 @@ import { Toggle } from "radix-ui";
 //#region packages/components/ui/toggle.d.ts
 declare const toggleVariants: (props?: ({
   variant?: "default" | "outline" | null | undefined;
-  size?: "sm" | "lg" | "default" | null | undefined;
+  size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * A two-state button that switches between pressed (`on`) and unpressed (`off`).
@@ -27,4 +27,4 @@ declare function Toggle$1({
 }: React.ComponentProps<typeof Toggle.Root> & VariantProps<typeof toggleVariants>): import("react").JSX.Element;
 //#endregion
 export { toggleVariants as n, Toggle$1 as t };
-//# sourceMappingURL=toggle-Bh4EazxT.d.cts.map
+//# sourceMappingURL=toggle-Bk5Lvs5n.d.cts.map

package/dist/{toggle-Bh4EazxT.d.mts → toggle-Bk5Lvs5n.d.mts}

@@ -4,7 +4,7 @@ import { Toggle } from "radix-ui";
 //#region packages/components/ui/toggle.d.ts
 declare const toggleVariants: (props?: ({
   variant?: "default" | "outline" | null | undefined;
-  size?: "sm" | "lg" | "default" | null | undefined;
+  size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * A two-state button that switches between pressed (`on`) and unpressed (`off`).
@@ -27,4 +27,4 @@ declare function Toggle$1({
 }: React.ComponentProps<typeof Toggle.Root> & VariantProps<typeof toggleVariants>): import("react").JSX.Element;
 //#endregion
 export { toggleVariants as n, Toggle$1 as t };
-//# sourceMappingURL=toggle-Bh4EazxT.d.mts.map
+//# sourceMappingURL=toggle-Bk5Lvs5n.d.mts.map

package/dist/{toggle-group-BpqkL1ds.d.cts → toggle-group-7ZP2e-K1.d.mts}

@@ -1,4 +1,4 @@
-import { n as toggleVariants } from "./toggle-Bh4EazxT.cjs";
+import { n as toggleVariants } from "./toggle-Bk5Lvs5n.mjs";
 import { VariantProps } from "class-variance-authority";
 import { ToggleGroup } from "radix-ui";
 
@@ -34,4 +34,4 @@ declare function ToggleGroupItem({
 }: React.ComponentProps<typeof ToggleGroup.Item> & VariantProps<typeof toggleVariants>): import("react").JSX.Element;
 //#endregion
 export { ToggleGroupItem as n, ToggleGroup$1 as t };
-//# sourceMappingURL=toggle-group-BpqkL1ds.d.cts.map
+//# sourceMappingURL=toggle-group-7ZP2e-K1.d.mts.map

package/dist/{toggle-group-DzNE38v5.d.mts → toggle-group-B0pu4YV-.d.cts}

@@ -1,4 +1,4 @@
-import { n as toggleVariants } from "./toggle-Bh4EazxT.mjs";
+import { n as toggleVariants } from "./toggle-Bk5Lvs5n.cjs";
 import { VariantProps } from "class-variance-authority";
 import { ToggleGroup } from "radix-ui";
 
@@ -34,4 +34,4 @@ declare function ToggleGroupItem({
 }: React.ComponentProps<typeof ToggleGroup.Item> & VariantProps<typeof toggleVariants>): import("react").JSX.Element;
 //#endregion
 export { ToggleGroupItem as n, ToggleGroup$1 as t };
-//# sourceMappingURL=toggle-group-DzNE38v5.d.mts.map
+//# sourceMappingURL=toggle-group-B0pu4YV-.d.cts.map

package/dist/ui/button.d.cts

@@ -1,2 +1,2 @@
-import { n as ButtonProps, t as Button } from "../button-Bk4Y6_9I.cjs";
+import { n as ButtonProps, t as Button } from "../button-CKRN3ZQT.cjs";
 export { Button, ButtonProps };

package/dist/ui/button.d.mts

@@ -1,2 +1,2 @@
-import { n as ButtonProps, t as Button } from "../button-Bk4Y6_9I.mjs";
+import { n as ButtonProps, t as Button } from "../button-CKRN3ZQT.mjs";
 export { Button, ButtonProps };

package/dist/ui/calendar.d.cts

@@ -1,2 +1,2 @@
-import { n as CalendarDayButton, t as Calendar } from "../calendar-stv2bJv0.cjs";
+import { n as CalendarDayButton, t as Calendar } from "../calendar-DJdVw-yD.cjs";
 export { Calendar, CalendarDayButton };

package/dist/ui/calendar.d.mts

@@ -1,2 +1,2 @@
-import { n as CalendarDayButton, t as Calendar } from "../calendar-DPKt7D3w.mjs";
+import { n as CalendarDayButton, t as Calendar } from "../calendar-CIhMEz65.mjs";
 export { Calendar, CalendarDayButton };

package/dist/ui/carousel.d.cts

@@ -1,2 +1,2 @@
-import { a as CarouselNext, i as CarouselItem, n as CarouselApi, o as CarouselPrevious, r as CarouselContent, t as Carousel } from "../carousel-c2XuzmYN.cjs";
+import { a as CarouselNext, i as CarouselItem, n as CarouselApi, o as CarouselPrevious, r as CarouselContent, t as Carousel } from "../carousel-D4--8HfP.cjs";
 export { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious };

package/dist/ui/carousel.d.mts

@@ -1,2 +1,2 @@
-import { a as CarouselNext, i as CarouselItem, n as CarouselApi, o as CarouselPrevious, r as CarouselContent, t as Carousel } from "../carousel-CV3IZ96x.mjs";
+import { a as CarouselNext, i as CarouselItem, n as CarouselApi, o as CarouselPrevious, r as CarouselContent, t as Carousel } from "../carousel-BniJSLfd.mjs";
 export { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious };

package/dist/ui/input.d.cts

@@ -1,2 +1,2 @@
-import { n as InputVariantProps, r as inputVariants, t as Input } from "../input-BQJV7ryj.cjs";
+import { n as InputVariantProps, r as inputVariants, t as Input } from "../input-BieGEIDf.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-BQJV7ryj.mjs";
+import { n as InputVariantProps, r as inputVariants, t as Input } from "../input-BieGEIDf.mjs";
 export { Input, InputVariantProps, inputVariants };

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

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