@customafk/lunas-ui 0.2.75 → 0.2.77

package/dist/{combobox-field-Bxrct4lA.cjs.map → combobox-field-BE9miJ3D.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"combobox-field-Bxrct4lA.cjs","names":["useTanStackFieldContext","Button","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","Dialog","DialogPortal","DialogOverlay","RadixDialog","DialogClose","XIcon","Popover","PopoverTrigger","PopoverContent","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/combobox-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { XIcon } from 'lucide-react';\n\nimport { Dialog as RadixDialog } from 'radix-ui';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';\nimport { Dialog, DialogClose, DialogOverlay, DialogPortal } from '@/components/ui/dialog';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\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 { ComboboxFieldProps } from '../../types';\n\nexport const ComboboxField = memo<ComboboxFieldProps>(\n  ({\n    label,\n    description,\n    placeholder,\n    tooltip,\n    helperText,\n    orientation = 'responsive',\n    options,\n    required = false,\n    disabled = false,\n    clearable = false,\n    showErrorMessage = true,\n    modal,\n  }) => {\n    const errorId = useId();\n    const field = useTanStackFieldContext<string | null>();\n    const isMobile = useIsMobile();\n    const [dialogOpen, setDialogOpen] = useState(false);\n    const [popoverOpen, setPopoverOpen] = useState(false);\n\n    const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n    const isDisabled = disabled || isSubmitting;\n\n    const _touched = field.state.meta.isDirty || field.state.meta.isTouched;\n    const _invalid = _touched && !field.state.meta.isValid;\n    const _isEmpty = required && field.state.value === null;\n    const _showClear = clearable && !!field.state.value && !isDisabled;\n    const _hasErrors = field.state.meta.errors.length > 0;\n\n    const selectedLabel = options.find(({ value }) => value === field.state.value)?.label;\n\n    const onClear = () => {\n      field.handleChange(null);\n      field.handleBlur();\n    };\n\n    const triggerButton = (onClick?: () => void) => (\n      <Button\n        variant=\"outline\"\n        color=\"muted\"\n        size=\"lg\"\n        disabled={isDisabled}\n        aria-invalid={_invalid ? true : undefined}\n        aria-describedby={errorId}\n        className={cn(\n          'flex w-full items-center justify-start rounded outline-border',\n          'hover:bg-transparent',\n          'focus-visible:outline-1 focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak',\n          'data-[state=open]:text-text-positive-muted data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak',\n          _showClear && 'pr-8',\n          !field.state.value && 'text-text-positive-muted',\n          _invalid && 'outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak'\n        )}\n        onClick={onClick}\n      >\n        {selectedLabel ? (\n          <p className=\"flex min-w-0 flex-1 items-center gap-2 truncate text-start\">{selectedLabel}</p>\n        ) : (\n          <p className=\"flex-1 text-start text-text-positive-muted\">{placeholder}</p>\n        )}\n      </Button>\n    );\n\n    const renderCommandList = (onSelect: (value: string) => void) => (\n      <Command className=\"border-none\">\n        <CommandInput placeholder={placeholder ?? 'Tìm kiếm…'} />\n        <CommandList>\n          <CommandEmpty className=\"flex min-h-30 items-center justify-center text-sm text-text-positive-weak\">Không tìm thấy kết quả nào phù hợp.</CommandEmpty>\n          <CommandGroup className=\"max-h-60 overflow-y-auto\">\n            {options.map(({ value, label: optLabel }) => (\n              <CommandItem key={value} value={optLabel} onSelect={() => onSelect(value)}>\n                {optLabel}\n              </CommandItem>\n            ))}\n          </CommandGroup>\n        </CommandList>\n      </Command>\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={field.name}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            <FieldDescription>{description}</FieldDescription>\n          </FieldContent>\n\n          <FieldContentMain className=\"flex justify-end\">\n            <div className=\"flex w-full flex-col\">\n              <div className=\"relative\">\n                {isMobile ? (\n                  <>\n                    {triggerButton(() => setDialogOpen(true))}\n                    <Dialog\n                      open={dialogOpen}\n                      onOpenChange={open => {\n                        setDialogOpen(open);\n                        if (!open) field.handleBlur();\n                      }}\n                    >\n                      <DialogPortal>\n                        <DialogOverlay />\n                        <RadixDialog.Content\n                          onOpenAutoFocus={e => e.preventDefault()}\n                          className={cn(\n                            'fixed inset-x-0 bottom-0 z-50',\n                            'flex flex-col bg-background rounded-t-2xl outline-none',\n                            'max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]',\n                            'data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0',\n                            'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0',\n                            'duration-300'\n                          )}\n                        >\n                          <div className=\"flex items-center justify-between px-4 py-3 border-b border-border shrink-0\">\n                            <span className=\"font-semibold text-sm text-text-positive\">{label}</span>\n                            <DialogClose asChild>\n                              <button\n                                type=\"button\"\n                                aria-label=\"Đóng\"\n                                className=\"flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive\"\n                              >\n                                <XIcon size={16} />\n                              </button>\n                            </DialogClose>\n                          </div>\n\n                          <div className=\"flex flex-col overflow-y-auto\">\n                            {_showClear && (\n                              <DialogClose asChild>\n                                <button\n                                  type=\"button\"\n                                  className=\"flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle\"\n                                  onClick={onClear}\n                                >\n                                  <XIcon size={14} />\n                                  Xóa lựa chọn\n                                </button>\n                              </DialogClose>\n                            )}\n                            {renderCommandList(value => {\n                              field.handleChange(value);\n                              setDialogOpen(false);\n                              field.handleBlur();\n                            })}\n                          </div>\n\n                          <div className=\"shrink-0 h-safe-bottom\" />\n                        </RadixDialog.Content>\n                      </DialogPortal>\n                    </Dialog>\n                  </>\n                ) : (\n                  <Popover\n                    open={popoverOpen}\n                    modal={modal}\n                    onOpenChange={open => {\n                      setPopoverOpen(open);\n                      if (!open) field.handleBlur();\n                    }}\n                  >\n                    <PopoverTrigger asChild>{triggerButton()}</PopoverTrigger>\n                    <PopoverContent align=\"end\" side=\"bottom\" className=\"flex w-fit rounded p-0\">\n                      {renderCommandList(value => {\n                        field.handleChange(value);\n                        setPopoverOpen(false);\n                        field.handleBlur();\n                      })}\n                    </PopoverContent>\n                  </Popover>\n                )}\n\n                {_showClear && (\n                  <button\n                    type=\"button\"\n                    aria-label=\"Xóa lựa chọn\"\n                    className=\"absolute right-2 top-1/2 -translate-y-1/2 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              </div>\n\n              {_touched && showErrorMessage && _hasErrors && <FieldError id={errorId} className=\"mt-1\" errors={field.state.meta.errors} />}\n              <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n            </div>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nComboboxField.displayName = 'ComboboxField';\n"],"mappings":"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"}
+{"version":3,"file":"combobox-field-BE9miJ3D.cjs","names":["useTanStackFieldContext","Button","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","Dialog","DialogPortal","DialogOverlay","RadixDialog","DialogClose","XIcon","Popover","PopoverTrigger","PopoverContent","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/combobox-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { XIcon } from 'lucide-react';\n\nimport { Dialog as RadixDialog } from 'radix-ui';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';\nimport { Dialog, DialogClose, DialogOverlay, DialogPortal } from '@/components/ui/dialog';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\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 { ComboboxFieldProps } from '../../types';\n\nexport const ComboboxField = memo<ComboboxFieldProps>(\n  ({\n    label,\n    description,\n    placeholder,\n    tooltip,\n    helperText,\n    orientation = 'responsive',\n    options,\n    required = false,\n    disabled = false,\n    clearable = false,\n    showErrorMessage = true,\n    modal,\n  }) => {\n    const errorId = useId();\n    const field = useTanStackFieldContext<string | null>();\n    const isMobile = useIsMobile();\n    const [dialogOpen, setDialogOpen] = useState(false);\n    const [popoverOpen, setPopoverOpen] = useState(false);\n\n    const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n    const isDisabled = disabled || isSubmitting;\n\n    const _touched = field.state.meta.isDirty || field.state.meta.isTouched;\n    const _invalid = _touched && !field.state.meta.isValid;\n    const _isEmpty = required && field.state.value === null;\n    const _showClear = clearable && !!field.state.value && !isDisabled;\n    const _hasErrors = field.state.meta.errors.length > 0;\n\n    const selectedLabel = options.find(({ value }) => value === field.state.value)?.label;\n\n    const onClear = () => {\n      field.handleChange(null);\n      field.handleBlur();\n    };\n\n    const triggerButton = (onClick?: () => void) => (\n      <Button\n        variant=\"outline\"\n        color=\"muted\"\n        size=\"lg\"\n        disabled={isDisabled}\n        aria-invalid={_invalid ? true : undefined}\n        aria-describedby={errorId}\n        className={cn(\n          'flex w-full items-center justify-start rounded outline-border',\n          'hover:bg-transparent',\n          'focus-visible:outline-1 focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak',\n          'data-[state=open]:text-text-positive-muted data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak',\n          _showClear && 'pr-8',\n          !field.state.value && 'text-text-positive-muted',\n          _invalid && 'outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak'\n        )}\n        onClick={onClick}\n      >\n        {selectedLabel ? (\n          <p className=\"flex min-w-0 flex-1 items-center gap-2 truncate text-start\">{selectedLabel}</p>\n        ) : (\n          <p className=\"flex-1 text-start text-text-positive-muted\">{placeholder}</p>\n        )}\n      </Button>\n    );\n\n    const renderCommandList = (onSelect: (value: string) => void) => (\n      <Command className=\"border-none\">\n        <CommandInput placeholder={placeholder ?? 'Tìm kiếm…'} />\n        <CommandList>\n          <CommandEmpty className=\"flex min-h-30 items-center justify-center text-sm text-text-positive-weak\">Không tìm thấy kết quả nào phù hợp.</CommandEmpty>\n          <CommandGroup className=\"max-h-60 overflow-y-auto\">\n            {options.map(({ value, label: optLabel }) => (\n              <CommandItem key={value} value={optLabel} onSelect={() => onSelect(value)}>\n                {optLabel}\n              </CommandItem>\n            ))}\n          </CommandGroup>\n        </CommandList>\n      </Command>\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={field.name}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            <FieldDescription>{description}</FieldDescription>\n          </FieldContent>\n\n          <FieldContentMain className=\"flex justify-end\">\n            <div className=\"flex w-full flex-col\">\n              <div className=\"relative\">\n                {isMobile ? (\n                  <>\n                    {triggerButton(() => setDialogOpen(true))}\n                    <Dialog\n                      open={dialogOpen}\n                      onOpenChange={open => {\n                        setDialogOpen(open);\n                        if (!open) field.handleBlur();\n                      }}\n                    >\n                      <DialogPortal>\n                        <DialogOverlay />\n                        <RadixDialog.Content\n                          onOpenAutoFocus={e => e.preventDefault()}\n                          className={cn(\n                            'fixed inset-x-0 bottom-0 z-50',\n                            'flex flex-col bg-background rounded-t-2xl outline-none',\n                            'max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]',\n                            'data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0',\n                            'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0',\n                            'duration-300'\n                          )}\n                        >\n                          <div className=\"flex items-center justify-between px-4 py-3 border-b border-border shrink-0\">\n                            <span className=\"font-semibold text-sm text-text-positive\">{label}</span>\n                            <DialogClose asChild>\n                              <button\n                                type=\"button\"\n                                aria-label=\"Đóng\"\n                                className=\"flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive\"\n                              >\n                                <XIcon size={16} />\n                              </button>\n                            </DialogClose>\n                          </div>\n\n                          <div className=\"flex flex-col overflow-y-auto\">\n                            {_showClear && (\n                              <DialogClose asChild>\n                                <button\n                                  type=\"button\"\n                                  className=\"flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle\"\n                                  onClick={onClear}\n                                >\n                                  <XIcon size={14} />\n                                  Xóa lựa chọn\n                                </button>\n                              </DialogClose>\n                            )}\n                            {renderCommandList(value => {\n                              field.handleChange(value);\n                              setDialogOpen(false);\n                              field.handleBlur();\n                            })}\n                          </div>\n\n                          <div className=\"shrink-0 h-safe-bottom\" />\n                        </RadixDialog.Content>\n                      </DialogPortal>\n                    </Dialog>\n                  </>\n                ) : (\n                  <Popover\n                    open={popoverOpen}\n                    modal={modal}\n                    onOpenChange={open => {\n                      setPopoverOpen(open);\n                      if (!open) field.handleBlur();\n                    }}\n                  >\n                    <PopoverTrigger asChild>{triggerButton()}</PopoverTrigger>\n                    <PopoverContent align=\"end\" side=\"bottom\" className=\"flex w-fit rounded p-0\">\n                      {renderCommandList(value => {\n                        field.handleChange(value);\n                        setPopoverOpen(false);\n                        field.handleBlur();\n                      })}\n                    </PopoverContent>\n                  </Popover>\n                )}\n\n                {_showClear && (\n                  <button\n                    type=\"button\"\n                    aria-label=\"Xóa lựa chọn\"\n                    className=\"absolute right-2 top-1/2 -translate-y-1/2 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              </div>\n\n              {_touched && showErrorMessage && _hasErrors && <FieldError id={errorId} className=\"mt-1\" errors={field.state.meta.errors} />}\n              <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n            </div>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nComboboxField.displayName = 'ComboboxField';\n"],"mappings":"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"}

package/dist/{combobox-field-BMfA_taQ.mjs → combobox-field-Bug1qI5B.mjs}

@@ -1,2 +1,2 @@
-import{Button as e}from"./ui/button.mjs";import{Dialog as t,DialogClose as n,DialogOverlay as ee,DialogPortal as te}from"./ui/dialog.mjs";import{Command as r,CommandEmpty as i,CommandGroup as a,CommandInput as o,CommandItem as s,CommandList as ne}from"./ui/command.mjs";import{G as re}from"./tanstack-form-AGwPfwiM.mjs";import{Popover as ie,PopoverContent as c,PopoverTrigger as l}from"./ui/popover.mjs";import{Field as u,FieldContent as d,FieldContentMain as f,FieldDescription as p,FieldError as m,FieldGroup as h,FieldLabel as g,FieldNote as ae,FieldSeparator as oe,FieldTooltip as se}from"./field-V2DoD8qL.mjs";import{XIcon as _}from"lucide-react";import{memo as v,useId as y,useState as b}from"react";import{cn as x}from"@customafk/react-toolkit/utils";import{Fragment as S,jsx as C,jsxs as w}from"react/jsx-runtime";import{Dialog as T}from"radix-ui";import{useIsMobile as E}from"@customafk/react-toolkit/hooks/useMobile";import{useStore as D}from"@tanstack/react-form";const O=v(({label:v,description:O,placeholder:k,tooltip:A,helperText:j,orientation:M=`responsive`,options:N,required:P=!1,disabled:ce=!1,clearable:F=!1,showErrorMessage:I=!0,modal:L})=>{let R=y(),z=re(),B=E(),[V,H]=b(!1),[U,W]=b(!1),G=D(z.form.store,({isSubmitting:e})=>e),K=ce||G,q=z.state.meta.isDirty||z.state.meta.isTouched,J=q&&!z.state.meta.isValid,le=P&&z.state.value===null,Y=F&&!!z.state.value&&!K,ue=z.state.meta.errors.length>0,X=N.find(({value:e})=>e===z.state.value)?.label,Z=()=>{z.handleChange(null),z.handleBlur()},Q=t=>C(e,{variant:`outline`,color:`muted`,size:`lg`,disabled:K,"aria-invalid":J?!0:void 0,"aria-describedby":R,className:x(`flex w-full items-center justify-start rounded outline-border`,`hover:bg-transparent`,`focus-visible:outline-1 focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak`,`data-[state=open]:text-text-positive-muted data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`,Y&&`pr-8`,!z.state.value&&`text-text-positive-muted`,J&&`outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak`),onClick:t,children:X?C(`p`,{className:`flex min-w-0 flex-1 items-center gap-2 truncate text-start`,children:X}):C(`p`,{className:`flex-1 text-start text-text-positive-muted`,children:k})}),$=e=>w(r,{className:`border-none`,children:[C(o,{placeholder:k??`Tìm kiếm…`}),w(ne,{children:[C(i,{className:`flex min-h-30 items-center justify-center text-sm text-text-positive-weak`,children:`Không tìm thấy kết quả nào phù hợp.`}),C(a,{className:`max-h-60 overflow-y-auto`,children:N.map(({value:t,label:n})=>C(s,{value:n,onSelect:()=>e(t),children:n},t))})]})]});return w(h,{className:`gap-y-4 px-4`,children:[w(u,{orientation:M,"data-invalid":J,children:[w(d,{children:[w(g,{"aria-required":le,htmlFor:z.name,children:[v,A&&C(se,{tooltip:A})]}),C(p,{children:O})]}),C(f,{className:`flex justify-end`,children:w(`div`,{className:`flex w-full flex-col`,children:[w(`div`,{className:`relative`,children:[B?w(S,{children:[Q(()=>H(!0)),C(t,{open:V,onOpenChange:e=>{H(e),e||z.handleBlur()},children:w(te,{children:[C(ee,{}),w(T.Content,{onOpenAutoFocus:e=>e.preventDefault(),className:x(`fixed inset-x-0 bottom-0 z-50`,`flex flex-col bg-background rounded-t-2xl outline-none`,`max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]`,`data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0`,`data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0`,`duration-300`),children:[w(`div`,{className:`flex items-center justify-between px-4 py-3 border-b border-border shrink-0`,children:[C(`span`,{className:`font-semibold text-sm text-text-positive`,children:v}),C(n,{asChild:!0,children:C(`button`,{type:`button`,"aria-label":`Đóng`,className:`flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive`,children:C(_,{size:16})})})]}),w(`div`,{className:`flex flex-col overflow-y-auto`,children:[Y&&C(n,{asChild:!0,children:w(`button`,{type:`button`,className:`flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle`,onClick:Z,children:[C(_,{size:14}),`Xóa lựa chọn`]})}),$(e=>{z.handleChange(e),H(!1),z.handleBlur()})]}),C(`div`,{className:`shrink-0 h-safe-bottom`})]})]})})]}):w(ie,{open:U,modal:L,onOpenChange:e=>{W(e),e||z.handleBlur()},children:[C(l,{asChild:!0,children:Q()}),C(c,{align:`end`,side:`bottom`,className:`flex w-fit rounded p-0`,children:$(e=>{z.handleChange(e),W(!1),z.handleBlur()})})]}),Y&&C(`button`,{type:`button`,"aria-label":`Xóa lựa chọn`,className:`absolute right-2 top-1/2 -translate-y-1/2 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:Z,children:C(_,{"aria-hidden":`true`})})]}),q&&I&&ue&&C(m,{id:R,className:`mt-1`,errors:z.state.meta.errors}),C(ae,{isShow:!!j,children:j})]})})]}),C(oe,{})]})});O.displayName=`ComboboxField`;export{O as ComboboxField};
-//# sourceMappingURL=combobox-field-BMfA_taQ.mjs.map
+import{Button as e}from"./ui/button.mjs";import{Dialog as t,DialogClose as n,DialogOverlay as ee,DialogPortal as te}from"./ui/dialog.mjs";import{Command as r,CommandEmpty as i,CommandGroup as a,CommandInput as o,CommandItem as s,CommandList as ne}from"./ui/command.mjs";import{G as re}from"./tanstack-form-q9hDCc0Y.mjs";import{Popover as ie,PopoverContent as c,PopoverTrigger as l}from"./ui/popover.mjs";import{Field as u,FieldContent as d,FieldContentMain as f,FieldDescription as p,FieldError as m,FieldGroup as h,FieldLabel as g,FieldNote as ae,FieldSeparator as oe,FieldTooltip as se}from"./field-V2DoD8qL.mjs";import{XIcon as _}from"lucide-react";import{memo as v,useId as y,useState as b}from"react";import{cn as x}from"@customafk/react-toolkit/utils";import{Fragment as S,jsx as C,jsxs as w}from"react/jsx-runtime";import{Dialog as T}from"radix-ui";import{useStore as E}from"@tanstack/react-form";import{useIsMobile as D}from"@customafk/react-toolkit/hooks/useMobile";const O=v(({label:v,description:O,placeholder:k,tooltip:A,helperText:j,orientation:M=`responsive`,options:N,required:P=!1,disabled:ce=!1,clearable:F=!1,showErrorMessage:I=!0,modal:L})=>{let R=y(),z=re(),B=D(),[V,H]=b(!1),[U,W]=b(!1),G=E(z.form.store,({isSubmitting:e})=>e),K=ce||G,q=z.state.meta.isDirty||z.state.meta.isTouched,J=q&&!z.state.meta.isValid,le=P&&z.state.value===null,Y=F&&!!z.state.value&&!K,ue=z.state.meta.errors.length>0,X=N.find(({value:e})=>e===z.state.value)?.label,Z=()=>{z.handleChange(null),z.handleBlur()},Q=t=>C(e,{variant:`outline`,color:`muted`,size:`lg`,disabled:K,"aria-invalid":J?!0:void 0,"aria-describedby":R,className:x(`flex w-full items-center justify-start rounded outline-border`,`hover:bg-transparent`,`focus-visible:outline-1 focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak`,`data-[state=open]:text-text-positive-muted data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`,Y&&`pr-8`,!z.state.value&&`text-text-positive-muted`,J&&`outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak`),onClick:t,children:X?C(`p`,{className:`flex min-w-0 flex-1 items-center gap-2 truncate text-start`,children:X}):C(`p`,{className:`flex-1 text-start text-text-positive-muted`,children:k})}),$=e=>w(r,{className:`border-none`,children:[C(o,{placeholder:k??`Tìm kiếm…`}),w(ne,{children:[C(i,{className:`flex min-h-30 items-center justify-center text-sm text-text-positive-weak`,children:`Không tìm thấy kết quả nào phù hợp.`}),C(a,{className:`max-h-60 overflow-y-auto`,children:N.map(({value:t,label:n})=>C(s,{value:n,onSelect:()=>e(t),children:n},t))})]})]});return w(h,{className:`gap-y-4 px-4`,children:[w(u,{orientation:M,"data-invalid":J,children:[w(d,{children:[w(g,{"aria-required":le,htmlFor:z.name,children:[v,A&&C(se,{tooltip:A})]}),C(p,{children:O})]}),C(f,{className:`flex justify-end`,children:w(`div`,{className:`flex w-full flex-col`,children:[w(`div`,{className:`relative`,children:[B?w(S,{children:[Q(()=>H(!0)),C(t,{open:V,onOpenChange:e=>{H(e),e||z.handleBlur()},children:w(te,{children:[C(ee,{}),w(T.Content,{onOpenAutoFocus:e=>e.preventDefault(),className:x(`fixed inset-x-0 bottom-0 z-50`,`flex flex-col bg-background rounded-t-2xl outline-none`,`max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]`,`data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0`,`data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0`,`duration-300`),children:[w(`div`,{className:`flex items-center justify-between px-4 py-3 border-b border-border shrink-0`,children:[C(`span`,{className:`font-semibold text-sm text-text-positive`,children:v}),C(n,{asChild:!0,children:C(`button`,{type:`button`,"aria-label":`Đóng`,className:`flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive`,children:C(_,{size:16})})})]}),w(`div`,{className:`flex flex-col overflow-y-auto`,children:[Y&&C(n,{asChild:!0,children:w(`button`,{type:`button`,className:`flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle`,onClick:Z,children:[C(_,{size:14}),`Xóa lựa chọn`]})}),$(e=>{z.handleChange(e),H(!1),z.handleBlur()})]}),C(`div`,{className:`shrink-0 h-safe-bottom`})]})]})})]}):w(ie,{open:U,modal:L,onOpenChange:e=>{W(e),e||z.handleBlur()},children:[C(l,{asChild:!0,children:Q()}),C(c,{align:`end`,side:`bottom`,className:`flex w-fit rounded p-0`,children:$(e=>{z.handleChange(e),W(!1),z.handleBlur()})})]}),Y&&C(`button`,{type:`button`,"aria-label":`Xóa lựa chọn`,className:`absolute right-2 top-1/2 -translate-y-1/2 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:Z,children:C(_,{"aria-hidden":`true`})})]}),q&&I&&ue&&C(m,{id:R,className:`mt-1`,errors:z.state.meta.errors}),C(ae,{isShow:!!j,children:j})]})})]}),C(oe,{})]})});O.displayName=`ComboboxField`;export{O as ComboboxField};
+//# sourceMappingURL=combobox-field-Bug1qI5B.mjs.map

package/dist/{combobox-field-BMfA_taQ.mjs.map → combobox-field-Bug1qI5B.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"combobox-field-BMfA_taQ.mjs","names":["Dialog","RadixDialog","Popover"],"sources":["../packages/components/features/tanstack-form/components/fields/combobox-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { XIcon } from 'lucide-react';\n\nimport { Dialog as RadixDialog } from 'radix-ui';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';\nimport { Dialog, DialogClose, DialogOverlay, DialogPortal } from '@/components/ui/dialog';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\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 { ComboboxFieldProps } from '../../types';\n\nexport const ComboboxField = memo<ComboboxFieldProps>(\n  ({\n    label,\n    description,\n    placeholder,\n    tooltip,\n    helperText,\n    orientation = 'responsive',\n    options,\n    required = false,\n    disabled = false,\n    clearable = false,\n    showErrorMessage = true,\n    modal,\n  }) => {\n    const errorId = useId();\n    const field = useTanStackFieldContext<string | null>();\n    const isMobile = useIsMobile();\n    const [dialogOpen, setDialogOpen] = useState(false);\n    const [popoverOpen, setPopoverOpen] = useState(false);\n\n    const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n    const isDisabled = disabled || isSubmitting;\n\n    const _touched = field.state.meta.isDirty || field.state.meta.isTouched;\n    const _invalid = _touched && !field.state.meta.isValid;\n    const _isEmpty = required && field.state.value === null;\n    const _showClear = clearable && !!field.state.value && !isDisabled;\n    const _hasErrors = field.state.meta.errors.length > 0;\n\n    const selectedLabel = options.find(({ value }) => value === field.state.value)?.label;\n\n    const onClear = () => {\n      field.handleChange(null);\n      field.handleBlur();\n    };\n\n    const triggerButton = (onClick?: () => void) => (\n      <Button\n        variant=\"outline\"\n        color=\"muted\"\n        size=\"lg\"\n        disabled={isDisabled}\n        aria-invalid={_invalid ? true : undefined}\n        aria-describedby={errorId}\n        className={cn(\n          'flex w-full items-center justify-start rounded outline-border',\n          'hover:bg-transparent',\n          'focus-visible:outline-1 focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak',\n          'data-[state=open]:text-text-positive-muted data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak',\n          _showClear && 'pr-8',\n          !field.state.value && 'text-text-positive-muted',\n          _invalid && 'outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak'\n        )}\n        onClick={onClick}\n      >\n        {selectedLabel ? (\n          <p className=\"flex min-w-0 flex-1 items-center gap-2 truncate text-start\">{selectedLabel}</p>\n        ) : (\n          <p className=\"flex-1 text-start text-text-positive-muted\">{placeholder}</p>\n        )}\n      </Button>\n    );\n\n    const renderCommandList = (onSelect: (value: string) => void) => (\n      <Command className=\"border-none\">\n        <CommandInput placeholder={placeholder ?? 'Tìm kiếm…'} />\n        <CommandList>\n          <CommandEmpty className=\"flex min-h-30 items-center justify-center text-sm text-text-positive-weak\">Không tìm thấy kết quả nào phù hợp.</CommandEmpty>\n          <CommandGroup className=\"max-h-60 overflow-y-auto\">\n            {options.map(({ value, label: optLabel }) => (\n              <CommandItem key={value} value={optLabel} onSelect={() => onSelect(value)}>\n                {optLabel}\n              </CommandItem>\n            ))}\n          </CommandGroup>\n        </CommandList>\n      </Command>\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={field.name}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            <FieldDescription>{description}</FieldDescription>\n          </FieldContent>\n\n          <FieldContentMain className=\"flex justify-end\">\n            <div className=\"flex w-full flex-col\">\n              <div className=\"relative\">\n                {isMobile ? (\n                  <>\n                    {triggerButton(() => setDialogOpen(true))}\n                    <Dialog\n                      open={dialogOpen}\n                      onOpenChange={open => {\n                        setDialogOpen(open);\n                        if (!open) field.handleBlur();\n                      }}\n                    >\n                      <DialogPortal>\n                        <DialogOverlay />\n                        <RadixDialog.Content\n                          onOpenAutoFocus={e => e.preventDefault()}\n                          className={cn(\n                            'fixed inset-x-0 bottom-0 z-50',\n                            'flex flex-col bg-background rounded-t-2xl outline-none',\n                            'max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]',\n                            'data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0',\n                            'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0',\n                            'duration-300'\n                          )}\n                        >\n                          <div className=\"flex items-center justify-between px-4 py-3 border-b border-border shrink-0\">\n                            <span className=\"font-semibold text-sm text-text-positive\">{label}</span>\n                            <DialogClose asChild>\n                              <button\n                                type=\"button\"\n                                aria-label=\"Đóng\"\n                                className=\"flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive\"\n                              >\n                                <XIcon size={16} />\n                              </button>\n                            </DialogClose>\n                          </div>\n\n                          <div className=\"flex flex-col overflow-y-auto\">\n                            {_showClear && (\n                              <DialogClose asChild>\n                                <button\n                                  type=\"button\"\n                                  className=\"flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle\"\n                                  onClick={onClear}\n                                >\n                                  <XIcon size={14} />\n                                  Xóa lựa chọn\n                                </button>\n                              </DialogClose>\n                            )}\n                            {renderCommandList(value => {\n                              field.handleChange(value);\n                              setDialogOpen(false);\n                              field.handleBlur();\n                            })}\n                          </div>\n\n                          <div className=\"shrink-0 h-safe-bottom\" />\n                        </RadixDialog.Content>\n                      </DialogPortal>\n                    </Dialog>\n                  </>\n                ) : (\n                  <Popover\n                    open={popoverOpen}\n                    modal={modal}\n                    onOpenChange={open => {\n                      setPopoverOpen(open);\n                      if (!open) field.handleBlur();\n                    }}\n                  >\n                    <PopoverTrigger asChild>{triggerButton()}</PopoverTrigger>\n                    <PopoverContent align=\"end\" side=\"bottom\" className=\"flex w-fit rounded p-0\">\n                      {renderCommandList(value => {\n                        field.handleChange(value);\n                        setPopoverOpen(false);\n                        field.handleBlur();\n                      })}\n                    </PopoverContent>\n                  </Popover>\n                )}\n\n                {_showClear && (\n                  <button\n                    type=\"button\"\n                    aria-label=\"Xóa lựa chọn\"\n                    className=\"absolute right-2 top-1/2 -translate-y-1/2 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              </div>\n\n              {_touched && showErrorMessage && _hasErrors && <FieldError id={errorId} className=\"mt-1\" errors={field.state.meta.errors} />}\n              <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n            </div>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nComboboxField.displayName = 'ComboboxField';\n"],"mappings":"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"}
+{"version":3,"file":"combobox-field-Bug1qI5B.mjs","names":["Dialog","RadixDialog","Popover"],"sources":["../packages/components/features/tanstack-form/components/fields/combobox-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { XIcon } from 'lucide-react';\n\nimport { Dialog as RadixDialog } from 'radix-ui';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';\nimport { Dialog, DialogClose, DialogOverlay, DialogPortal } from '@/components/ui/dialog';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\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 { ComboboxFieldProps } from '../../types';\n\nexport const ComboboxField = memo<ComboboxFieldProps>(\n  ({\n    label,\n    description,\n    placeholder,\n    tooltip,\n    helperText,\n    orientation = 'responsive',\n    options,\n    required = false,\n    disabled = false,\n    clearable = false,\n    showErrorMessage = true,\n    modal,\n  }) => {\n    const errorId = useId();\n    const field = useTanStackFieldContext<string | null>();\n    const isMobile = useIsMobile();\n    const [dialogOpen, setDialogOpen] = useState(false);\n    const [popoverOpen, setPopoverOpen] = useState(false);\n\n    const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n    const isDisabled = disabled || isSubmitting;\n\n    const _touched = field.state.meta.isDirty || field.state.meta.isTouched;\n    const _invalid = _touched && !field.state.meta.isValid;\n    const _isEmpty = required && field.state.value === null;\n    const _showClear = clearable && !!field.state.value && !isDisabled;\n    const _hasErrors = field.state.meta.errors.length > 0;\n\n    const selectedLabel = options.find(({ value }) => value === field.state.value)?.label;\n\n    const onClear = () => {\n      field.handleChange(null);\n      field.handleBlur();\n    };\n\n    const triggerButton = (onClick?: () => void) => (\n      <Button\n        variant=\"outline\"\n        color=\"muted\"\n        size=\"lg\"\n        disabled={isDisabled}\n        aria-invalid={_invalid ? true : undefined}\n        aria-describedby={errorId}\n        className={cn(\n          'flex w-full items-center justify-start rounded outline-border',\n          'hover:bg-transparent',\n          'focus-visible:outline-1 focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak',\n          'data-[state=open]:text-text-positive-muted data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak',\n          _showClear && 'pr-8',\n          !field.state.value && 'text-text-positive-muted',\n          _invalid && 'outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak'\n        )}\n        onClick={onClick}\n      >\n        {selectedLabel ? (\n          <p className=\"flex min-w-0 flex-1 items-center gap-2 truncate text-start\">{selectedLabel}</p>\n        ) : (\n          <p className=\"flex-1 text-start text-text-positive-muted\">{placeholder}</p>\n        )}\n      </Button>\n    );\n\n    const renderCommandList = (onSelect: (value: string) => void) => (\n      <Command className=\"border-none\">\n        <CommandInput placeholder={placeholder ?? 'Tìm kiếm…'} />\n        <CommandList>\n          <CommandEmpty className=\"flex min-h-30 items-center justify-center text-sm text-text-positive-weak\">Không tìm thấy kết quả nào phù hợp.</CommandEmpty>\n          <CommandGroup className=\"max-h-60 overflow-y-auto\">\n            {options.map(({ value, label: optLabel }) => (\n              <CommandItem key={value} value={optLabel} onSelect={() => onSelect(value)}>\n                {optLabel}\n              </CommandItem>\n            ))}\n          </CommandGroup>\n        </CommandList>\n      </Command>\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={field.name}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            <FieldDescription>{description}</FieldDescription>\n          </FieldContent>\n\n          <FieldContentMain className=\"flex justify-end\">\n            <div className=\"flex w-full flex-col\">\n              <div className=\"relative\">\n                {isMobile ? (\n                  <>\n                    {triggerButton(() => setDialogOpen(true))}\n                    <Dialog\n                      open={dialogOpen}\n                      onOpenChange={open => {\n                        setDialogOpen(open);\n                        if (!open) field.handleBlur();\n                      }}\n                    >\n                      <DialogPortal>\n                        <DialogOverlay />\n                        <RadixDialog.Content\n                          onOpenAutoFocus={e => e.preventDefault()}\n                          className={cn(\n                            'fixed inset-x-0 bottom-0 z-50',\n                            'flex flex-col bg-background rounded-t-2xl outline-none',\n                            'max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]',\n                            'data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0',\n                            'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0',\n                            'duration-300'\n                          )}\n                        >\n                          <div className=\"flex items-center justify-between px-4 py-3 border-b border-border shrink-0\">\n                            <span className=\"font-semibold text-sm text-text-positive\">{label}</span>\n                            <DialogClose asChild>\n                              <button\n                                type=\"button\"\n                                aria-label=\"Đóng\"\n                                className=\"flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive\"\n                              >\n                                <XIcon size={16} />\n                              </button>\n                            </DialogClose>\n                          </div>\n\n                          <div className=\"flex flex-col overflow-y-auto\">\n                            {_showClear && (\n                              <DialogClose asChild>\n                                <button\n                                  type=\"button\"\n                                  className=\"flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle\"\n                                  onClick={onClear}\n                                >\n                                  <XIcon size={14} />\n                                  Xóa lựa chọn\n                                </button>\n                              </DialogClose>\n                            )}\n                            {renderCommandList(value => {\n                              field.handleChange(value);\n                              setDialogOpen(false);\n                              field.handleBlur();\n                            })}\n                          </div>\n\n                          <div className=\"shrink-0 h-safe-bottom\" />\n                        </RadixDialog.Content>\n                      </DialogPortal>\n                    </Dialog>\n                  </>\n                ) : (\n                  <Popover\n                    open={popoverOpen}\n                    modal={modal}\n                    onOpenChange={open => {\n                      setPopoverOpen(open);\n                      if (!open) field.handleBlur();\n                    }}\n                  >\n                    <PopoverTrigger asChild>{triggerButton()}</PopoverTrigger>\n                    <PopoverContent align=\"end\" side=\"bottom\" className=\"flex w-fit rounded p-0\">\n                      {renderCommandList(value => {\n                        field.handleChange(value);\n                        setPopoverOpen(false);\n                        field.handleBlur();\n                      })}\n                    </PopoverContent>\n                  </Popover>\n                )}\n\n                {_showClear && (\n                  <button\n                    type=\"button\"\n                    aria-label=\"Xóa lựa chọn\"\n                    className=\"absolute right-2 top-1/2 -translate-y-1/2 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              </div>\n\n              {_touched && showErrorMessage && _hasErrors && <FieldError id={errorId} className=\"mt-1\" errors={field.state.meta.errors} />}\n              <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n            </div>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nComboboxField.displayName = 'ComboboxField';\n"],"mappings":"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"}

package/dist/combobox-kp_kPY8o.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/button.cjs"),t=require("./ui/badge.cjs"),n=require("./ui/command.cjs"),r=require("./ui/spinner.cjs"),i=require("./ui/popover.cjs"),ee=require("./ui/input.cjs");let a=require("lucide-react"),o=require("react"),s=require("@customafk/react-toolkit/utils"),c=require("class-variance-authority"),l=require("react/jsx-runtime"),u=require("cmdk");const te=(0,c.cva)([`relative flex flex-wrap items-center gap-1 rounded border bg-transparent text-sm transition-shadow`,`outline-hidden`,`aria-disabled:cursor-not-allowed aria-disabled:bg-muted-muted aria-disabled:text-text-positive-weak`],{variants:{color:{normal:[`border-border-weak`,`focus-visible:border-primary focus-visible:ring-4 focus-visible:ring-primary-weak`,`data-[state=open]:border-primary data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`].join(` `),danger:[`border-danger bg-danger-bg-subtle`,`focus-visible:border-danger focus-visible:ring-4 focus-visible:ring-danger-weak`,`data-[state=open]:border-danger data-[state=open]:ring-4 data-[state=open]:ring-danger-weak`].join(` `)},size:{sm:`min-h-8 text-xs`,md:`min-h-9 text-sm`,lg:`min-h-10 text-base`}},defaultVariants:{color:`normal`,size:`md`}});function d(e){e.preventDefault(),e.stopPropagation()}function ne(e,t){let[n,r]=(0,o.useState)(e);return(0,o.useEffect)(()=>{let n=setTimeout(()=>r(e),t??500);return()=>clearTimeout(n)},[e,t]),n}function f(e,t){if(e.length===0)return{};if(!t)return{"":e};let n={};return e.forEach(e=>{let r=e[t]||``;n[r]||(n[r]=[]),n[r].push(e)}),n}function re(e,t){let n={};for(let[r,i]of Object.entries(e))n[r]=i.filter(e=>!t.has(e.value));return n}function p(e,t){return e.length===t.length&&e.every((e,n)=>e.value===t[n]?.value)}const m=(0,o.forwardRef)(({className:e,...t},n)=>(0,u.useCommandState)(e=>e.filtered.count===0)?(0,l.jsx)(`div`,{ref:n,className:(0,s.cn)(`p-2.5 pt-1 text-center text-xs`,e),"cmdk-empty":``,role:`presentation`,...t}):null);m.displayName=`ComboboxCommandEmpty`;const h=(0,o.forwardRef)(({value:c,defaultValue:h=[],onChange:g,options:_,defaultOptions:ie=[],onSearch:v,delay:ae,triggerSearchOnFocus:y=!1,groupBy:b,placeholder:x,disabled:S,color:C,size:w=`md`,loadingIndicator:oe,loadingText:se,emptyIndicator:ce,creatable:T=!1,createHint:E,createLabel:D,onCreateOption:O,maxSelected:k=2**53-1,onMaxSelected:A,hideSelectedFromList:j=!1,hideClearAllButton:le=!1,onClearAll:ue,hideClearQueryButton:de=!1,onClearQuery:fe,className:pe,badgeClassName:me,contentClassName:he,commandProps:M,inputProps:N},ge)=>{let P=(0,o.useRef)(null),F=(0,o.useRef)(0),I=(0,o.useRef)(!0),[L,R]=(0,o.useState)(!1),[z,B]=(0,o.useState)(!1),[_e,ve]=(0,o.useState)(h),[V,H]=(0,o.useState)(f(ie,b)),[U,W]=(0,o.useState)(``),G=c??_e,K=U.trim(),q=ne(U,ae??500),J=(0,o.useCallback)(e=>{c===void 0&&ve(e),g?.(e)},[g,c]);(0,o.useImperativeHandle)(ge,()=>({selectedValue:[...G],input:P.current,focus:()=>{R(!0),P.current?.focus()},reset:()=>J([]),clearQuery:()=>W(``)}),[G,J]),(0,o.useEffect)(()=>(I.current=!0,()=>{I.current=!1}),[]),(0,o.useEffect)(()=>{L||W(``)},[L]);let Y=(0,o.useMemo)(()=>new Set(G.map(e=>e.value)),[G]),X=(0,o.useCallback)(e=>{J(G.filter(t=>t.value!==e.value))},[G,J]),ye=(0,o.useCallback)(e=>{if(Y.has(e.value)){e.fixed||X(e);return}if(G.length>=k){A?.(k);return}W(``),J([...G,e])},[X,k,A,G,Y,J]);(0,o.useEffect)(()=>{!_||v||H(e=>p(_,Object.values(e).flat())?e:f(_,b))},[_,b,v]),(0,o.useEffect)(()=>{(async()=>{if(!v||!L||!y&&!q)return;let e=++F.current;B(!0);let t=await v(q);!I.current||e!==F.current||(H(f(t,b)),B(!1))})()},[q,b,L,y,v]);let be=(0,o.useMemo)(()=>j?re(V,Y):V,[j,V,Y]),Z=(0,o.useMemo)(()=>{if(!T||!K||z)return!1;let e=K.toLowerCase(),t=Object.values(V).some(t=>t.some(t=>t.label.toLowerCase()===e)),n=G.some(t=>t.label.toLowerCase()===e);return!t&&!n},[T,K,z,V,G]),xe=typeof D==`function`?D(K):D??`Create "${K}"`,Q=typeof E==`function`?E(K):E,$=(0,o.useCallback)(()=>{if(G.length>=k){A?.(k);return}let e=K;W(``),J([...G,{value:e,label:e}]),O?.(e),R(!1)},[K,k,O,A,G,J]),Se=(0,o.useCallback)(e=>{let t=P.current;if(t){if((e.key===`Delete`||e.key===`Backspace`)&&t.value===``&&G.length>0){let e=G[G.length-1];e.fixed||X(e)}e.key===`Enter`&&Z&&(e.preventDefault(),$())}},[$,X,G,Z]),Ce=G.some(e=>!e.fixed);return(0,l.jsxs)(i.Popover,{open:L,onOpenChange:e=>!S&&R(e),children:[(0,l.jsx)(i.PopoverTrigger,{asChild:!0,children:(0,l.jsxs)(`div`,{"data-slot":`combobox-trigger`,role:`combobox`,"aria-expanded":L,"aria-haspopup":`listbox`,"aria-disabled":S||void 0,tabIndex:S?-1:0,className:(0,s.cn)(te({color:C,size:w}),G.length!==0&&`p-1`,!S&&`cursor-pointer`,S&&`pointer-events-none`,pe),onKeyDown:e=>{S||(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),R(e=>!e))},children:[G.length===0&&(0,l.jsx)(`span`,{className:`flex-1 truncate px-3 py-2 text-text-positive-muted`,children:x}),G.map(e=>(0,l.jsxs)(t.Badge,{"data-slot":`combobox-chip`,"data-fixed":e.fixed||void 0,variant:`soft`,color:C===`danger`?`danger`:`secondary`,size:w,pill:!1,className:(0,s.cn)(`gap-1 text-xs bg-muted-muted font-normal`,S&&`opacity-50`,me),children:[e.label,!e.fixed&&!S&&(0,l.jsx)(`button`,{type:`button`,"data-slot":`combobox-chip-remove`,"aria-label":`Remove ${e.label}`,onMouseDown:d,onClick:t=>{t.stopPropagation(),X(e)},className:`ms-0.5 -me-0.5 rounded-sm outline-hidden hover:text-text-positive text-text-positive-muted`,children:(0,l.jsx)(a.XIcon,{size:12,strokeWidth:2,"aria-hidden":`true`})})]},e.value)),(0,l.jsx)(a.ChevronDownIcon,{size:16,"aria-hidden":`true`,className:(0,s.cn)(`ms-auto me-2 shrink-0 text-text-positive-muted transition-transform`,L&&`rotate-180`)})]})}),(0,l.jsx)(i.PopoverContent,{align:`start`,"data-slot":`combobox-content`,className:(0,s.cn)(`w-(--radix-popover-trigger-width) p-0`,he),children:(0,l.jsxs)(n.Command,{...M,onKeyDown:e=>{Se(e),M?.onKeyDown?.(e)},"data-slot":`combobox`,className:(0,s.cn)(`overflow-visible bg-white`,M?.className),shouldFilter:M?.shouldFilter??!v,children:[!le&&Ce&&(0,l.jsxs)(e.Button,{type:`button`,"data-slot":`combobox-clear-all`,tabIndex:-1,size:`xs`,variant:`ghost`,color:`muted`,className:`w-fit mt-1 font-normal hover:text-text-positive`,onMouseDown:d,onClick:()=>{let e=G.filter(e=>e.fixed);J(e),ue?.()},children:[(0,l.jsx)(a.XIcon,{size:10,strokeWidth:2,"aria-hidden":`true`,className:`size-3!`}),`Clear Selected Input`]}),(0,l.jsxs)(`div`,{"data-slot":`combobox-search`,className:`relative px-2.5 pt-2.5 pb-1 border-t border-t-border`,children:[(0,l.jsx)(u.Command.Input,{...N,ref:P,"data-slot":`combobox-input`,value:U,onValueChange:e=>{W(e),N?.onValueChange?.(e)},placeholder:x,className:(0,s.cn)(ee.inputVariants({size:`sm`}),`pe-8`,N?.className)}),!de&&U.length>0&&(0,l.jsx)(`button`,{type:`button`,"data-slot":`combobox-clear-query`,"aria-label":`Clear search`,onMouseDown:d,onClick:()=>{W(``),fe?.(),P.current?.focus()},className:`absolute inset-y-6 inset-e-4 flex items-center justify-center text-text-positive-muted transition-colors hover:text-text-positive`,children:(0,l.jsx)(a.XIcon,{size:14,strokeWidth:2,"aria-hidden":`true`})})]}),(0,l.jsx)(n.CommandList,{"data-slot":`combobox-list`,className:`shadow-lg outline-hidden`,onMouseDown:e=>e.preventDefault(),children:z?(0,l.jsx)(`div`,{"data-slot":`combobox-loading`,className:`flex items-center justify-center gap-2 px-2 py-6 text-sm text-text-positive-muted`,children:oe??(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(r.Spinner,{className:`size-4`}),se]})}):Z?(0,l.jsxs)(`div`,{"data-slot":`combobox-create`,className:`flex flex-col gap-2 p-3`,children:[Q&&(0,l.jsx)(`p`,{className:`pe-10 text-text-positive-weak text-xs`,children:Q}),(0,l.jsx)(`div`,{className:`flex justify-end`,children:(0,l.jsxs)(e.Button,{type:`button`,"data-slot":`combobox-create-confirm`,"aria-label":xe,size:`xs`,variant:`outline`,color:`muted`,onMouseDown:d,onClick:$,children:[(0,l.jsx)(a.PlusIcon,{}),`Thêm mới`]})})]}):(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(m,{"data-slot":`combobox-empty`,children:(0,l.jsx)(`div`,{className:`bg-muted-muted size-full min-h-14 flex items-center justify-center`,children:ce??`No results found.`})}),(0,l.jsx)(n.CommandItem,{value:`__combobox-first-item-guard__`,className:`hidden`,"aria-hidden":`true`}),Object.entries(be).map(([e,t])=>(0,l.jsx)(n.CommandGroup,{heading:e||void 0,value:e||`__combobox-options__`,children:t.map(e=>{let t=Y.has(e.value);return(0,l.jsxs)(n.CommandItem,{value:e.value,keywords:[e.label],disabled:e.disable,"data-picked":t||void 0,onMouseDown:d,onSelect:()=>ye(e),className:(0,s.cn)(`cursor-pointer justify-between`,e.disable&&`cursor-not-allowed opacity-50`,t&&`bg-primary-bg-subtle! text-primary!`),children:[e.label,t&&(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(a.CheckIcon,{size:14,className:`ms-auto text-primary`,"aria-hidden":`true`}),(0,l.jsx)(`span`,{className:`sr-only`,children:`, selected`})]})]},e.value)})},e))]})})]})})]})});h.displayName=`Combobox`,Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return h}});
+//# sourceMappingURL=combobox-kp_kPY8o.cjs.map

package/dist/combobox-kp_kPY8o.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-kp_kPY8o.cjs","names":["Popover","PopoverTrigger","Badge","XIcon","ChevronDownIcon","PopoverContent","Command","Button","CommandPrimitive","inputVariants","CommandList","Spinner","PlusIcon","CommandItem","CommandGroup","CheckIcon"],"sources":["../packages/components/ui/combobox.variants.ts","../packages/components/ui/combobox.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\n/** CVA styling for the `Combobox` trigger box (border/background/focus-ring by color and size). */\nexport const comboboxVariants = cva(\n  [\n    'relative flex flex-wrap items-center gap-1 rounded border bg-transparent text-sm transition-shadow',\n    'outline-hidden',\n    'aria-disabled:cursor-not-allowed aria-disabled:bg-muted-muted aria-disabled:text-text-positive-weak',\n  ],\n  {\n    variants: {\n      color: {\n        normal: [\n          'border-border-weak',\n          'focus-visible:border-primary focus-visible:ring-4 focus-visible:ring-primary-weak',\n          'data-[state=open]:border-primary data-[state=open]:ring-4 data-[state=open]:ring-primary-weak',\n        ].join(' '),\n        danger: [\n          'border-danger bg-danger-bg-subtle',\n          'focus-visible:border-danger focus-visible:ring-4 focus-visible:ring-danger-weak',\n          'data-[state=open]:border-danger data-[state=open]:ring-4 data-[state=open]:ring-danger-weak',\n        ].join(' '),\n      },\n      size: {\n        sm: 'min-h-8 text-xs',\n        md: 'min-h-9 text-sm',\n        lg: 'min-h-10 text-base',\n      },\n    },\n    defaultVariants: { color: 'normal', size: 'md' },\n  }\n);\n\nexport type ComboboxVariantProps = VariantProps<typeof comboboxVariants>;\n","'use client';\n\nimport { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\n\nimport { CheckIcon, ChevronDownIcon, PlusIcon, XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Command as CommandPrimitive, useCommandState } from 'cmdk';\nimport { Badge } from './badge';\nimport { comboboxVariants } from './combobox.variants';\nimport { Command, CommandGroup, CommandItem, CommandList } from './command';\nimport { inputVariants } from './input';\nimport { Popover, PopoverContent, PopoverTrigger } from './popover';\nimport { Spinner } from './spinner';\nimport { Button } from './button';\n\n/** A single selectable/creatable option rendered in the `Combobox` dropdown. */\nexport interface ComboboxOption {\n  /** Unique value used for selection, comparison, and de-duplication. */\n  value: string;\n  /** Human-readable label displayed in the dropdown and as a chip. */\n  label: string;\n  /** When true, the option cannot be selected. */\n  disable?: boolean;\n  /** When true, the resulting chip cannot be removed via the ×/Backspace and is excluded from \"clear all\". */\n  fixed?: boolean;\n  /** Group the options by providing a matching key. */\n  [key: string]: string | boolean | undefined;\n}\n\ninterface GroupOption {\n  [key: string]: ComboboxOption[];\n}\n\n/** Props for the `Combobox` component. */\nexport interface ComboboxProps {\n  /** Controlled list of currently selected options. */\n  value?: ComboboxOption[];\n  /** Initial selection when uncontrolled. */\n  defaultValue?: ComboboxOption[];\n  /** Fired whenever the selection changes. */\n  onChange?: (options: ComboboxOption[]) => void;\n\n  /** Manually controlled options. */\n  options?: ComboboxOption[];\n  /** Initial options pre-loaded into the dropdown (uncontrolled). */\n  defaultOptions?: ComboboxOption[];\n  /** Async search, called (debounced) whenever the typed query changes while the dropdown is open. */\n  onSearch?: (query: string) => Promise<ComboboxOption[]>;\n  /** Debounce delay in ms for `onSearch`. Defaults to 500. */\n  delay?: number;\n  /** Trigger `onSearch` as soon as the dropdown opens, even before typing. */\n  triggerSearchOnFocus?: boolean;\n  /** Group options in the dropdown by this option key. */\n  groupBy?: string;\n\n  /** Placeholder shown on the closed trigger (when nothing is selected) and in the search input. */\n  placeholder?: string;\n  disabled?: boolean;\n  /** Visual color variant of the trigger box. Defaults to `'normal'`. */\n  color?: 'normal' | 'danger';\n  /** Size of the trigger box, chips, and dropdown text. Defaults to `'md'`. */\n  size?: 'sm' | 'md' | 'lg';\n\n  /** Full override of the loading row content, shown while `onSearch` is pending. */\n  loadingIndicator?: React.ReactNode;\n  /** Convenience text shown next to the default spinner while loading. Ignored if `loadingIndicator` is set. */\n  loadingText?: string;\n\n  /** Content shown when no options match the current query. Defaults to `'No results found.'`. Ignored while the creatable prompt is shown. */\n  emptyIndicator?: React.ReactNode;\n\n  /** Allow creating a new option when the typed query doesn't match any existing option. */\n  creatable?: boolean;\n  /** Explanatory hint rendered above the confirm button when no option matches the typed query (e.g. why this value isn't in the list). */\n  createHint?: React.ReactNode | ((query: string) => React.ReactNode);\n  /** Accessible label for the confirm button. Defaults to `Create \"<query>\"`. */\n  createLabel?: string | ((query: string) => string);\n  /** Fired when a new option is created via the creatable flow. */\n  onCreateOption?: (query: string) => void;\n\n  /** Maximum number of options that can be selected at once. */\n  maxSelected?: number;\n  /** Fired when a selection attempt exceeds `maxSelected`, with the configured cap. */\n  onMaxSelected?: (max: number) => void;\n\n  /** When true, already-selected options are removed from the dropdown instead of shown with a checkmark. */\n  hideSelectedFromList?: boolean;\n\n  /** Hide the \"Clear Selected Input\" action. */\n  hideClearAllButton?: boolean;\n  /** Fired after all (non-fixed) selections are cleared via \"Clear Selected Input\". */\n  onClearAll?: () => void;\n  /** Hide the search input's clear (×) button. */\n  hideClearQueryButton?: boolean;\n  /** Fired after the typed query is cleared via the search input's clear button. */\n  onClearQuery?: () => void;\n\n  className?: string;\n  badgeClassName?: string;\n  contentClassName?: string;\n  /** Props forwarded to the underlying `Command` root. `value`/`onValueChange` are excluded — they control cmdk's internal highlighted-item tracking, not this component's selection. */\n  commandProps?: Omit<React.ComponentPropsWithoutRef<typeof Command>, 'value' | 'onValueChange'>;\n  /** Props forwarded to the underlying `CommandPrimitive.Input`. */\n  inputProps?: Omit<React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>, 'value' | 'placeholder' | 'disabled'>;\n}\n\n/** Imperative handle exposed by `Combobox` via `ref`. */\nexport interface ComboboxRef {\n  /** The currently selected options. */\n  selectedValue: ComboboxOption[];\n  /** The underlying search `<input>` DOM element. */\n  input: HTMLInputElement;\n  /** Programmatically open the dropdown and focus the search input. */\n  focus: () => void;\n  /** Clear all selected options. */\n  reset: () => void;\n  /** Clear the currently typed query without touching the selection. */\n  clearQuery: () => void;\n}\n\n/** Shared handler that keeps the search input focused while interacting with a chip/button/row. */\nfunction stopMouseDown(event: React.MouseEvent) {\n  event.preventDefault();\n  event.stopPropagation();\n}\n\nfunction useDebounce<T>(value: T, delay?: number): T {\n  const [debouncedValue, setDebouncedValue] = useState<T>(value);\n\n  useEffect(() => {\n    const timer = setTimeout(() => setDebouncedValue(value), delay ?? 500);\n    return () => clearTimeout(timer);\n  }, [value, delay]);\n\n  return debouncedValue;\n}\n\nfunction transToGroupOption(options: ComboboxOption[], groupBy?: string) {\n  if (options.length === 0) return {};\n  if (!groupBy) return { '': options };\n\n  const groupOption: GroupOption = {};\n  options.forEach(option => {\n    const key = (option[groupBy] as string) || '';\n    if (!groupOption[key]) groupOption[key] = [];\n    groupOption[key].push(option);\n  });\n  return groupOption;\n}\n\nfunction removePickedOption(groupOption: GroupOption, pickedValues: Set<string>) {\n  const cloneOption: GroupOption = {};\n  for (const [key, options] of Object.entries(groupOption)) {\n    cloneOption[key] = options.filter(option => !pickedValues.has(option.value));\n  }\n  return cloneOption;\n}\n\n/** Cheap structural-equality check on option identity (by `value`, in order) — avoids `JSON.stringify` comparisons. */\nfunction haveSameOptionValues(a: ComboboxOption[], b: ComboboxOption[]) {\n  if (a.length !== b.length) return false;\n  return a.every((option, index) => option.value === b[index]?.value);\n}\n\n/**\n * shadcn/ui's `CommandEmpty` doesn't render correctly inside a controlled/filtered `Command`, so\n * this re-implements `cmdk`'s own `Empty` primitive directly.\n *\n * @reference https://github.com/hsuanyi-chou/shadcn-ui-expansions/issues/34#issuecomment-1949561607\n */\nconst CommandEmpty = forwardRef<HTMLDivElement, React.ComponentProps<typeof CommandPrimitive.Empty>>(({ className, ...props }, forwardedRef) => {\n  const render = useCommandState(state => state.filtered.count === 0);\n  if (!render) return null;\n  return <div ref={forwardedRef} className={cn('p-2.5 pt-1 text-center text-xs', className)} cmdk-empty=\"\" role=\"presentation\" {...props} />;\n});\nCommandEmpty.displayName = 'ComboboxCommandEmpty';\n\n/**\n * A multi-select combobox: a closed trigger shows the current selection as removable chips (or a\n * placeholder) and toggles a popover on click; the popover holds a type-to-filter search input, an\n * optional async-loaded option list, and a creatable \"custom input\" prompt for values that don't\n * match any existing option.\n *\n * @example\n * ```tsx\n * import { Combobox } from '@customafk/lunas-ui/ui/combobox';\n *\n * const options = [\n *   { value: 'hokkaido', label: 'Hokkaido' },\n *   { value: 'aomori', label: 'Aomori' },\n * ];\n *\n * <Combobox\n *   options={options}\n *   placeholder=\"Search location…\"\n *   creatable\n *   createHint=\"This location isn't registered yet — it will be added as a custom entry.\"\n *   onChange={(selected) => console.log(selected)}\n * />\n * ```\n */\nexport const Combobox = forwardRef<ComboboxRef, ComboboxProps>(\n  (\n    {\n      value,\n      defaultValue = [],\n      onChange,\n      options: arrayOptions,\n      defaultOptions: arrayDefaultOptions = [],\n      onSearch,\n      delay,\n      triggerSearchOnFocus = false,\n      groupBy,\n      placeholder,\n      disabled,\n      color,\n      size = 'md',\n      loadingIndicator,\n      loadingText,\n      emptyIndicator,\n      creatable = false,\n      createHint,\n      createLabel,\n      onCreateOption,\n      maxSelected = Number.MAX_SAFE_INTEGER,\n      onMaxSelected,\n      hideSelectedFromList = false,\n      hideClearAllButton = false,\n      onClearAll,\n      hideClearQueryButton = false,\n      onClearQuery,\n      className,\n      badgeClassName,\n      contentClassName,\n      commandProps,\n      inputProps,\n    }: ComboboxProps,\n    ref: React.Ref<ComboboxRef>\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const searchRequestIdRef = useRef(0);\n    const isMountedRef = useRef(true);\n\n    const [open, setOpen] = useState(false);\n    const [isLoading, setIsLoading] = useState(false);\n\n    const [internalSelected, setInternalSelected] = useState<ComboboxOption[]>(defaultValue);\n    const [options, setOptions] = useState<GroupOption>(transToGroupOption(arrayDefaultOptions, groupBy));\n    const [inputValue, setInputValue] = useState('');\n\n    const selected = value ?? internalSelected;\n    const trimmedInputValue = inputValue.trim();\n    const debouncedSearchTerm = useDebounce(inputValue, delay ?? 500);\n\n    /** Notifies `onChange` unconditionally; only mirrors into local state when uncontrolled. */\n    const setSelected = useCallback(\n      (next: ComboboxOption[]) => {\n        if (value === undefined) setInternalSelected(next);\n        onChange?.(next);\n      },\n      [onChange, value]\n    );\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        selectedValue: [...selected],\n        input: inputRef.current as HTMLInputElement,\n        focus: () => {\n          setOpen(true);\n          inputRef.current?.focus();\n        },\n        reset: () => setSelected([]),\n        clearQuery: () => setInputValue(''),\n      }),\n      [selected, setSelected]\n    );\n\n    useEffect(() => {\n      isMountedRef.current = true;\n      return () => {\n        isMountedRef.current = false;\n      };\n    }, []);\n\n    // Start each open with a blank query, so reopening always shows the full list first.\n    useEffect(() => {\n      if (!open) setInputValue('');\n    }, [open]);\n\n    const selectedValues = useMemo(() => new Set(selected.map(option => option.value)), [selected]);\n\n    const handleUnselect = useCallback(\n      (option: ComboboxOption) => {\n        setSelected(selected.filter(s => s.value !== option.value));\n      },\n      [selected, setSelected]\n    );\n\n    const handleSelect = useCallback(\n      (option: ComboboxOption) => {\n        if (selectedValues.has(option.value)) {\n          if (!option.fixed) handleUnselect(option);\n          return;\n        }\n        if (selected.length >= maxSelected) {\n          onMaxSelected?.(maxSelected);\n          return;\n        }\n        setInputValue('');\n        setSelected([...selected, option]);\n      },\n      [handleUnselect, maxSelected, onMaxSelected, selected, selectedValues, setSelected]\n    );\n\n    useEffect(() => {\n      if (!arrayOptions || onSearch) return;\n      setOptions(prev => {\n        const prevFlat = Object.values(prev).flat();\n        return haveSameOptionValues(arrayOptions, prevFlat) ? prev : transToGroupOption(arrayOptions, groupBy);\n      });\n    }, [arrayOptions, groupBy, onSearch]);\n\n    useEffect(() => {\n      const exec = async () => {\n        if (!onSearch || !open) return;\n        if (!triggerSearchOnFocus && !debouncedSearchTerm) return;\n\n        const requestId = ++searchRequestIdRef.current;\n        setIsLoading(true);\n        const res = await onSearch(debouncedSearchTerm);\n        if (!isMountedRef.current || requestId !== searchRequestIdRef.current) return;\n        setOptions(transToGroupOption(res, groupBy));\n        setIsLoading(false);\n      };\n      void exec();\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [debouncedSearchTerm, groupBy, open, triggerSearchOnFocus, onSearch]);\n\n    const selectables = useMemo<GroupOption>(\n      () => (hideSelectedFromList ? removePickedOption(options, selectedValues) : options),\n      [hideSelectedFromList, options, selectedValues]\n    );\n\n    const showCreatePrompt = useMemo(() => {\n      if (!creatable || !trimmedInputValue || isLoading) return false;\n\n      const normalizedQuery = trimmedInputValue.toLowerCase();\n      const matchesExisting = Object.values(options).some(group => group.some(o => o.label.toLowerCase() === normalizedQuery));\n      const matchesSelected = selected.some(s => s.label.toLowerCase() === normalizedQuery);\n      return !matchesExisting && !matchesSelected;\n    }, [creatable, trimmedInputValue, isLoading, options, selected]);\n\n    const resolvedCreateLabel = typeof createLabel === 'function' ? createLabel(trimmedInputValue) : (createLabel ?? `Create \"${trimmedInputValue}\"`);\n    const resolvedCreateHint = typeof createHint === 'function' ? createHint(trimmedInputValue) : createHint;\n\n    const handleCreateOption = useCallback(() => {\n      if (selected.length >= maxSelected) {\n        onMaxSelected?.(maxSelected);\n        return;\n      }\n      const query = trimmedInputValue;\n      setInputValue('');\n      setSelected([...selected, { value: query, label: query }]);\n      onCreateOption?.(query);\n      setOpen(false);\n    }, [trimmedInputValue, maxSelected, onCreateOption, onMaxSelected, selected, setSelected]);\n\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLDivElement>) => {\n        const input = inputRef.current;\n        if (!input) return;\n\n        if ((e.key === 'Delete' || e.key === 'Backspace') && input.value === '' && selected.length > 0) {\n          const lastSelectOption = selected[selected.length - 1];\n          if (!lastSelectOption.fixed) handleUnselect(lastSelectOption);\n        }\n\n        if (e.key === 'Enter' && showCreatePrompt) {\n          e.preventDefault();\n          handleCreateOption();\n        }\n      },\n      [handleCreateOption, handleUnselect, selected, showCreatePrompt]\n    );\n\n    const hasClearableSelection = selected.some(s => !s.fixed);\n\n    return (\n      <Popover open={open} onOpenChange={next => !disabled && setOpen(next)}>\n        <PopoverTrigger asChild>\n          <div\n            data-slot=\"combobox-trigger\"\n            role=\"combobox\"\n            aria-expanded={open}\n            aria-haspopup=\"listbox\"\n            aria-disabled={disabled || undefined}\n            tabIndex={disabled ? -1 : 0}\n            className={cn(\n              comboboxVariants({ color, size }),\n              selected.length !== 0 && 'p-1',\n              !disabled && 'cursor-pointer',\n              disabled && 'pointer-events-none',\n              className\n            )}\n            onKeyDown={e => {\n              if (disabled) return;\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                setOpen(o => !o);\n              }\n            }}\n          >\n            {selected.length === 0 && <span className=\"flex-1 truncate px-3 py-2 text-text-positive-muted\">{placeholder}</span>}\n\n            {selected.map(option => (\n              <Badge\n                key={option.value}\n                data-slot=\"combobox-chip\"\n                data-fixed={option.fixed || undefined}\n                variant=\"soft\"\n                color={color === 'danger' ? 'danger' : 'secondary'}\n                size={size}\n                pill={false}\n                className={cn('gap-1 text-xs bg-muted-muted font-normal', disabled && 'opacity-50', badgeClassName)}\n              >\n                {option.label}\n                {!option.fixed && !disabled && (\n                  <button\n                    type=\"button\"\n                    data-slot=\"combobox-chip-remove\"\n                    aria-label={`Remove ${option.label}`}\n                    onMouseDown={stopMouseDown}\n                    onClick={e => {\n                      e.stopPropagation();\n                      handleUnselect(option);\n                    }}\n                    className=\"ms-0.5 -me-0.5 rounded-sm outline-hidden hover:text-text-positive text-text-positive-muted\"\n                  >\n                    <XIcon size={12} strokeWidth={2} aria-hidden=\"true\" />\n                  </button>\n                )}\n              </Badge>\n            ))}\n\n            <ChevronDownIcon\n              size={16}\n              aria-hidden=\"true\"\n              className={cn('ms-auto me-2 shrink-0 text-text-positive-muted transition-transform', open && 'rotate-180')}\n            />\n          </div>\n        </PopoverTrigger>\n\n        <PopoverContent align=\"start\" data-slot=\"combobox-content\" className={cn('w-(--radix-popover-trigger-width) p-0', contentClassName)}>\n          <Command\n            {...commandProps}\n            onKeyDown={e => {\n              handleKeyDown(e);\n              commandProps?.onKeyDown?.(e);\n            }}\n            data-slot=\"combobox\"\n            className={cn('overflow-visible bg-white', commandProps?.className)}\n            shouldFilter={commandProps?.shouldFilter ?? !onSearch}\n          >\n            {!hideClearAllButton && hasClearableSelection && (\n              <Button\n                type=\"button\"\n                data-slot=\"combobox-clear-all\"\n                tabIndex={-1}\n                size=\"xs\"\n                variant=\"ghost\"\n                color=\"muted\"\n                className=\"w-fit mt-1 font-normal hover:text-text-positive\"\n                onMouseDown={stopMouseDown}\n                onClick={() => {\n                  const remaining = selected.filter(s => s.fixed);\n                  setSelected(remaining);\n                  onClearAll?.();\n                }}\n              >\n                <XIcon size={10} strokeWidth={2} aria-hidden=\"true\" className=\"size-3!\" />\n                Clear Selected Input\n              </Button>\n            )}\n\n            <div data-slot=\"combobox-search\" className=\"relative px-2.5 pt-2.5 pb-1 border-t border-t-border\">\n              <CommandPrimitive.Input\n                {...inputProps}\n                ref={inputRef}\n                data-slot=\"combobox-input\"\n                value={inputValue}\n                onValueChange={val => {\n                  setInputValue(val);\n                  inputProps?.onValueChange?.(val);\n                }}\n                placeholder={placeholder}\n                className={cn(inputVariants({ size: 'sm' }), 'pe-8', inputProps?.className)}\n              />\n              {!hideClearQueryButton && inputValue.length > 0 && (\n                <button\n                  type=\"button\"\n                  data-slot=\"combobox-clear-query\"\n                  aria-label=\"Clear search\"\n                  onMouseDown={stopMouseDown}\n                  onClick={() => {\n                    setInputValue('');\n                    onClearQuery?.();\n                    inputRef.current?.focus();\n                  }}\n                  className=\"absolute inset-y-6 inset-e-4 flex items-center justify-center text-text-positive-muted transition-colors hover:text-text-positive\"\n                >\n                  <XIcon size={14} strokeWidth={2} aria-hidden=\"true\" />\n                </button>\n              )}\n            </div>\n\n            <CommandList data-slot=\"combobox-list\" className=\"shadow-lg outline-hidden\" onMouseDown={e => e.preventDefault()}>\n              {isLoading ? (\n                <div data-slot=\"combobox-loading\" className=\"flex items-center justify-center gap-2 px-2 py-6 text-sm text-text-positive-muted\">\n                  {loadingIndicator ?? (\n                    <>\n                      <Spinner className=\"size-4\" />\n                      {loadingText}\n                    </>\n                  )}\n                </div>\n              ) : showCreatePrompt ? (\n                <div data-slot=\"combobox-create\" className=\"flex flex-col gap-2 p-3\">\n                  {resolvedCreateHint && <p className=\"pe-10 text-text-positive-weak text-xs\">{resolvedCreateHint}</p>}\n                  <div className=\"flex justify-end\">\n                    <Button\n                      type=\"button\"\n                      data-slot=\"combobox-create-confirm\"\n                      aria-label={resolvedCreateLabel}\n                      size=\"xs\"\n                      variant=\"outline\"\n                      color=\"muted\"\n                      onMouseDown={stopMouseDown}\n                      onClick={handleCreateOption}\n                    >\n                      <PlusIcon />\n                      Thêm mới\n                    </Button>\n                  </div>\n                </div>\n              ) : (\n                <>\n                  <CommandEmpty data-slot=\"combobox-empty\">\n                    <div className=\"bg-muted-muted size-full min-h-14 flex items-center justify-center\">{emptyIndicator ?? 'No results found.'}</div>\n                  </CommandEmpty>\n\n                  {/* Absorbs cmdk's default \"auto-highlight the first item\" behavior so opening the\n                      dropdown with no typed query doesn't silently arm Enter to toggle a real option. */}\n                  <CommandItem value=\"__combobox-first-item-guard__\" className=\"hidden\" aria-hidden=\"true\" />\n\n                  {Object.entries(selectables).map(([key, groupOptions]) => (\n                    <CommandGroup key={key} heading={key || undefined} value={key || '__combobox-options__'}>\n                      {groupOptions.map(option => {\n                        const picked = selectedValues.has(option.value);\n                        return (\n                          <CommandItem\n                            key={option.value}\n                            value={option.value}\n                            keywords={[option.label]}\n                            disabled={option.disable}\n                            data-picked={picked || undefined}\n                            onMouseDown={stopMouseDown}\n                            onSelect={() => handleSelect(option)}\n                            className={cn(\n                              'cursor-pointer justify-between',\n                              option.disable && 'cursor-not-allowed opacity-50',\n                              picked && 'bg-primary-bg-subtle! text-primary!'\n                            )}\n                          >\n                            {option.label}\n                            {picked && (\n                              <>\n                                <CheckIcon size={14} className=\"ms-auto text-primary\" aria-hidden=\"true\" />\n                                <span className=\"sr-only\">, selected</span>\n                              </>\n                            )}\n                          </CommandItem>\n                        );\n                      })}\n                    </CommandGroup>\n                  ))}\n                </>\n              )}\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    );\n  }\n);\n\nCombobox.displayName = 'Combobox';\n"],"mappings":"0WAGA,MAAa,IAAA,EAAA,EAAA,IAAA,CACX,CACE,qGACA,iBACA,qGACF,EACA,CACE,SAAU,CACR,MAAO,CACL,OAAQ,CACN,qBACA,oFACA,+FACF,CAAC,CAAC,KAAK,GAAG,EACV,OAAQ,CACN,oCACA,kFACA,6FACF,CAAC,CAAC,KAAK,GAAG,CACZ,EACA,KAAM,CACJ,GAAI,kBACJ,GAAI,kBACJ,GAAI,oBACN,CACF,EACA,gBAAiB,CAAE,MAAO,SAAU,KAAM,IAAK,CACjD,CACF,EC4FA,SAAS,EAAc,EAAyB,CAC9C,EAAM,eAAe,EACrB,EAAM,gBAAgB,CACxB,CAEA,SAAS,GAAe,EAAU,EAAmB,CACnD,GAAM,CAAC,EAAgB,IAAA,EAAA,EAAA,SAAA,CAAiC,CAAK,EAO7D,OALA,EAAA,EAAA,UAAA,KAAgB,CACd,IAAM,EAAQ,eAAiB,EAAkB,CAAK,EAAG,GAAS,GAAG,EACrE,UAAa,aAAa,CAAK,CACjC,EAAG,CAAC,EAAO,CAAK,CAAC,EAEV,CACT,CAEA,SAAS,EAAmB,EAA2B,EAAkB,CACvE,GAAI,EAAQ,SAAW,EAAG,MAAO,CAAC,EAClC,GAAI,CAAC,EAAS,MAAO,CAAE,GAAI,CAAQ,EAEnC,IAAM,EAA2B,CAAC,EAMlC,OALA,EAAQ,QAAQ,GAAU,CACxB,IAAM,EAAO,EAAO,IAAuB,GACtC,EAAY,KAAM,EAAY,GAAO,CAAC,GAC3C,EAAY,EAAI,CAAC,KAAK,CAAM,CAC9B,CAAC,EACM,CACT,CAEA,SAAS,GAAmB,EAA0B,EAA2B,CAC/E,IAAM,EAA2B,CAAC,EAClC,IAAK,GAAM,CAAC,EAAK,KAAY,OAAO,QAAQ,CAAW,EACrD,EAAY,GAAO,EAAQ,OAAO,GAAU,CAAC,EAAa,IAAI,EAAO,KAAK,CAAC,EAE7E,OAAO,CACT,CAGA,SAAS,EAAqB,EAAqB,EAAqB,CAEtE,OADI,EAAE,SAAW,EAAE,QACZ,EAAE,OAAO,EAAQ,IAAU,EAAO,QAAU,EAAE,EAAM,EAAE,KAAK,CACpE,CAQA,MAAM,GAAA,EAAA,EAAA,WAAA,EAAgG,CAAE,YAAW,GAAG,GAAS,KAEzH,EAAA,EAAA,gBAAA,CAD2B,GAAS,EAAM,SAAS,QAAU,CACvD,GACH,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,IAAK,EAAc,WAAA,EAAA,EAAA,GAAA,CAAc,iCAAkC,CAAS,EAAG,aAAW,GAAG,KAAK,eAAe,GAAI,CAAQ,CAAA,EADrH,IAErB,EACD,EAAa,YAAc,uBA0B3B,MAAa,GAAA,EAAA,EAAA,WAAA,EAET,CACE,QACA,eAAe,CAAC,EAChB,WACA,QAAS,EACT,eAAgB,GAAsB,CAAC,EACvC,WACA,SACA,uBAAuB,GACvB,UACA,cACA,WACA,QACA,OAAO,KACP,oBACA,eACA,kBACA,YAAY,GACZ,aACA,cACA,iBACA,sBACA,gBACA,uBAAuB,GACvB,sBAAqB,GACrB,cACA,wBAAuB,GACvB,gBACA,aACA,kBACA,oBACA,eACA,cAEF,KACG,CACH,IAAM,GAAA,EAAA,EAAA,OAAA,CAAoC,IAAI,EACxC,GAAA,EAAA,EAAA,OAAA,CAA4B,CAAC,EAC7B,GAAA,EAAA,EAAA,OAAA,CAAsB,EAAI,EAE1B,CAAC,EAAM,IAAA,EAAA,EAAA,SAAA,CAAoB,EAAK,EAChC,CAAC,EAAW,IAAA,EAAA,EAAA,SAAA,CAAyB,EAAK,EAE1C,CAAC,GAAkB,KAAA,EAAA,EAAA,SAAA,CAAkD,CAAY,EACjF,CAAC,EAAS,IAAA,EAAA,EAAA,SAAA,CAAoC,EAAmB,GAAqB,CAAO,CAAC,EAC9F,CAAC,EAAY,IAAA,EAAA,EAAA,SAAA,CAA0B,EAAE,EAEzC,EAAW,GAAS,GACpB,EAAoB,EAAW,KAAK,EACpC,EAAsB,GAAY,EAAY,IAAS,GAAG,EAG1D,GAAA,EAAA,EAAA,YAAA,CACH,GAA2B,CACtB,IAAU,IAAA,IAAW,GAAoB,CAAI,EACjD,IAAW,CAAI,CACjB,EACA,CAAC,EAAU,CAAK,CAClB,GAEA,EAAA,EAAA,oBAAA,CACE,QACO,CACL,cAAe,CAAC,GAAG,CAAQ,EAC3B,MAAO,EAAS,QAChB,UAAa,CACX,EAAQ,EAAI,EACZ,EAAS,SAAS,MAAM,CAC1B,EACA,UAAa,EAAY,CAAC,CAAC,EAC3B,eAAkB,EAAc,EAAE,CACpC,GACA,CAAC,EAAU,CAAW,CACxB,GAEA,EAAA,EAAA,UAAA,MACE,EAAa,QAAU,OACV,CACX,EAAa,QAAU,EACzB,GACC,CAAC,CAAC,GAGL,EAAA,EAAA,UAAA,KAAgB,CACT,GAAM,EAAc,EAAE,CAC7B,EAAG,CAAC,CAAI,CAAC,EAET,IAAM,GAAA,EAAA,EAAA,QAAA,KAA+B,IAAI,IAAI,EAAS,IAAI,GAAU,EAAO,KAAK,CAAC,EAAG,CAAC,CAAQ,CAAC,EAExF,GAAA,EAAA,EAAA,YAAA,CACH,GAA2B,CAC1B,EAAY,EAAS,OAAO,GAAK,EAAE,QAAU,EAAO,KAAK,CAAC,CAC5D,EACA,CAAC,EAAU,CAAW,CACxB,EAEM,IAAA,EAAA,EAAA,YAAA,CACH,GAA2B,CAC1B,GAAI,EAAe,IAAI,EAAO,KAAK,EAAG,CAC/B,EAAO,OAAO,EAAe,CAAM,EACxC,MACF,CACA,GAAI,EAAS,QAAU,EAAa,CAClC,IAAgB,CAAW,EAC3B,MACF,CACA,EAAc,EAAE,EAChB,EAAY,CAAC,GAAG,EAAU,CAAM,CAAC,CACnC,EACA,CAAC,EAAgB,EAAa,EAAe,EAAU,EAAgB,CAAW,CACpF,GAEA,EAAA,EAAA,UAAA,KAAgB,CACV,CAAC,GAAgB,GACrB,EAAW,GAEF,EAAqB,EADX,OAAO,OAAO,CAAI,CAAC,CAAC,KACY,CAAC,EAAI,EAAO,EAAmB,EAAc,CAAO,CACtG,CACH,EAAG,CAAC,EAAc,EAAS,CAAQ,CAAC,GAEpC,EAAA,EAAA,UAAA,KAAgB,EAYd,SAXyB,CAEvB,GADI,CAAC,GAAY,CAAC,GACd,CAAC,GAAwB,CAAC,EAAqB,OAEnD,IAAM,EAAY,EAAE,EAAmB,QACvC,EAAa,EAAI,EACjB,IAAM,EAAM,MAAM,EAAS,CAAmB,EAC1C,CAAC,EAAa,SAAW,IAAc,EAAmB,UAC9D,EAAW,EAAmB,EAAK,CAAO,CAAC,EAC3C,EAAa,EAAK,EACpB,EACK,CAAK,CAEZ,EAAG,CAAC,EAAqB,EAAS,EAAM,EAAsB,CAAQ,CAAC,EAEvE,IAAM,IAAA,EAAA,EAAA,QAAA,KACG,EAAuB,GAAmB,EAAS,CAAc,EAAI,EAC5E,CAAC,EAAsB,EAAS,CAAc,CAChD,EAEM,GAAA,EAAA,EAAA,QAAA,KAAiC,CACrC,GAAI,CAAC,GAAa,CAAC,GAAqB,EAAW,MAAO,GAE1D,IAAM,EAAkB,EAAkB,YAAY,EAChD,EAAkB,OAAO,OAAO,CAAO,CAAC,CAAC,KAAK,GAAS,EAAM,KAAK,GAAK,EAAE,MAAM,YAAY,IAAM,CAAe,CAAC,EACjH,EAAkB,EAAS,KAAK,GAAK,EAAE,MAAM,YAAY,IAAM,CAAe,EACpF,MAAO,CAAC,GAAmB,CAAC,CAC9B,EAAG,CAAC,EAAW,EAAmB,EAAW,EAAS,CAAQ,CAAC,EAEzD,GAAsB,OAAO,GAAgB,WAAa,EAAY,CAAiB,EAAK,GAAe,WAAW,EAAkB,GACxI,EAAqB,OAAO,GAAe,WAAa,EAAW,CAAiB,EAAI,EAExF,GAAA,EAAA,EAAA,YAAA,KAAuC,CAC3C,GAAI,EAAS,QAAU,EAAa,CAClC,IAAgB,CAAW,EAC3B,MACF,CACA,IAAM,EAAQ,EACd,EAAc,EAAE,EAChB,EAAY,CAAC,GAAG,EAAU,CAAE,MAAO,EAAO,MAAO,CAAM,CAAC,CAAC,EACzD,IAAiB,CAAK,EACtB,EAAQ,EAAK,CACf,EAAG,CAAC,EAAmB,EAAa,EAAgB,EAAe,EAAU,CAAW,CAAC,EAEnF,IAAA,EAAA,EAAA,YAAA,CACH,GAA2C,CAC1C,IAAM,EAAQ,EAAS,QAClB,KAEL,KAAK,EAAE,MAAQ,UAAY,EAAE,MAAQ,cAAgB,EAAM,QAAU,IAAM,EAAS,OAAS,EAAG,CAC9F,IAAM,EAAmB,EAAS,EAAS,OAAS,GAC/C,EAAiB,OAAO,EAAe,CAAgB,CAC9D,CAEI,EAAE,MAAQ,SAAW,IACvB,EAAE,eAAe,EACjB,EAAmB,EAJrB,CAMF,EACA,CAAC,EAAoB,EAAgB,EAAU,CAAgB,CACjE,EAEM,GAAwB,EAAS,KAAK,GAAK,CAAC,EAAE,KAAK,EAEzD,OACE,EAAA,EAAA,KAAA,CAACA,EAAAA,QAAD,CAAe,OAAM,aAAc,GAAQ,CAAC,GAAY,EAAQ,CAAI,EAApE,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,GACd,UAAA,EAAA,EAAA,KAAA,CAAC,MAAD,CACE,YAAU,mBACV,KAAK,WACL,gBAAe,EACf,gBAAc,UACd,gBAAe,GAAY,IAAA,GAC3B,SAAU,EAAW,GAAK,EAC1B,WAAA,EAAA,EAAA,GAAA,CACE,GAAiB,CAAE,QAAO,MAAK,CAAC,EAChC,EAAS,SAAW,GAAK,MACzB,CAAC,GAAY,iBACb,GAAY,sBACZ,EACF,EACA,UAAW,GAAK,CACV,IACA,EAAE,MAAQ,SAAW,EAAE,MAAQ,OACjC,EAAE,eAAe,EACjB,EAAQ,GAAK,CAAC,CAAC,EAEnB,EApBF,SAAA,CAsBG,EAAS,SAAW,IAAK,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qDAAsD,SAAA,CAAkB,CAAA,EAEjH,EAAS,IAAI,IACZ,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAEE,YAAU,gBACV,aAAY,EAAO,OAAS,IAAA,GAC5B,QAAQ,OACR,MAAO,IAAU,SAAW,SAAW,YACjC,OACN,KAAM,GACN,WAAA,EAAA,EAAA,GAAA,CAAc,2CAA4C,GAAY,aAAc,EAAc,EARpG,SAAA,CAUG,EAAO,MACP,CAAC,EAAO,OAAS,CAAC,IACjB,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,YAAU,uBACV,aAAY,UAAU,EAAO,QAC7B,YAAa,EACb,QAAS,GAAK,CACZ,EAAE,gBAAgB,EAClB,EAAe,CAAM,CACvB,EACA,UAAU,6FAEV,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,KAAM,GAAI,YAAa,EAAG,cAAY,MAAQ,CAAA,CAC/C,CAAA,CAEL,CAzBA,EAAA,EAAO,KAyBP,CACR,GAED,EAAA,EAAA,IAAA,CAACC,EAAAA,gBAAD,CACE,KAAM,GACN,cAAY,OACZ,WAAA,EAAA,EAAA,GAAA,CAAc,sEAAuE,GAAQ,YAAY,CAC1G,CAAA,CACE,GACS,CAAA,GAEhB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAM,QAAQ,YAAU,mBAAmB,WAAA,EAAA,EAAA,GAAA,CAAc,wCAAyC,EAAgB,EAChI,UAAA,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CACE,GAAI,EACJ,UAAW,GAAK,CACd,GAAc,CAAC,EACf,GAAc,YAAY,CAAC,CAC7B,EACA,YAAU,WACV,WAAA,EAAA,EAAA,GAAA,CAAc,4BAA6B,GAAc,SAAS,EAClE,aAAc,GAAc,cAAgB,CAAC,EAR/C,SAAA,CAUG,CAAC,IAAsB,KACtB,EAAA,EAAA,KAAA,CAACC,EAAAA,OAAD,CACE,KAAK,SACL,YAAU,qBACV,SAAU,GACV,KAAK,KACL,QAAQ,QACR,MAAM,QACN,UAAU,kDACV,YAAa,EACb,YAAe,CACb,IAAM,EAAY,EAAS,OAAO,GAAK,EAAE,KAAK,EAC9C,EAAY,CAAS,EACrB,KAAa,CACf,EAbF,SAAA,EAeE,EAAA,EAAA,IAAA,CAACJ,EAAAA,MAAD,CAAO,KAAM,GAAI,YAAa,EAAG,cAAY,OAAO,UAAU,SAAW,CAAA,EAAC,sBAEpE,KAGV,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,YAAU,kBAAkB,UAAU,uDAA3C,SAAA,EACE,EAAA,EAAA,IAAA,CAACK,EAAAA,QAAiB,MAAlB,CACE,GAAI,EACJ,IAAK,EACL,YAAU,iBACV,MAAO,EACP,cAAe,GAAO,CACpB,EAAc,CAAG,EACjB,GAAY,gBAAgB,CAAG,CACjC,EACa,cACb,WAAA,EAAA,EAAA,GAAA,CAAcC,GAAAA,cAAc,CAAE,KAAM,IAAK,CAAC,EAAG,OAAQ,GAAY,SAAS,CAC3E,CAAA,EACA,CAAC,IAAwB,EAAW,OAAS,IAC5C,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,YAAU,uBACV,aAAW,eACX,YAAa,EACb,YAAe,CACb,EAAc,EAAE,EAChB,KAAe,EACf,EAAS,SAAS,MAAM,CAC1B,EACA,UAAU,oIAEV,UAAA,EAAA,EAAA,IAAA,CAACN,EAAAA,MAAD,CAAO,KAAM,GAAI,YAAa,EAAG,cAAY,MAAQ,CAAA,CAC/C,CAAA,CAEP,KAEL,EAAA,EAAA,IAAA,CAACO,EAAAA,YAAD,CAAa,YAAU,gBAAgB,UAAU,2BAA2B,YAAa,GAAK,EAAE,eAAe,EAC5G,SAAA,GACC,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,mBAAmB,UAAU,oFACzC,SAAA,KACC,EAAA,EAAA,KAAA,CAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,QAAD,CAAS,UAAU,QAAU,CAAA,EAC5B,EACD,CAAA,CAAA,CAED,CAAA,EACH,GACF,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,YAAU,kBAAkB,UAAU,0BAA3C,SAAA,CACG,IAAsB,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,wCAAyC,SAAA,CAAsB,CAAA,GACnG,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,mBACb,UAAA,EAAA,EAAA,KAAA,CAACJ,EAAAA,OAAD,CACE,KAAK,SACL,YAAU,0BACV,aAAY,GACZ,KAAK,KACL,QAAQ,UACR,MAAM,QACN,YAAa,EACb,QAAS,EARX,SAAA,EAUE,EAAA,EAAA,IAAA,CAACK,EAAAA,SAAD,CAAW,CAAA,EAAC,UAEN,GACL,CAAA,CACF,CAEL,CAAA,GAAA,EAAA,EAAA,KAAA,CAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,EAAD,CAAc,YAAU,iBACtB,UAAA,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,qEAAsE,SAAA,IAAkB,mBAAyB,CAAA,CACpH,CAAA,GAId,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,MAAM,gCAAgC,UAAU,SAAS,cAAY,MAAQ,CAAA,EAEzF,OAAO,QAAQ,EAAW,CAAC,CAAC,KAAK,CAAC,EAAK,MACtC,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAwB,QAAS,GAAO,IAAA,GAAW,MAAO,GAAO,uBAC9D,SAAA,EAAa,IAAI,GAAU,CAC1B,IAAM,EAAS,EAAe,IAAI,EAAO,KAAK,EAC9C,OACE,EAAA,EAAA,KAAA,CAACD,EAAAA,YAAD,CAEE,MAAO,EAAO,MACd,SAAU,CAAC,EAAO,KAAK,EACvB,SAAU,EAAO,QACjB,cAAa,GAAU,IAAA,GACvB,YAAa,EACb,aAAgB,GAAa,CAAM,EACnC,WAAA,EAAA,EAAA,GAAA,CACE,iCACA,EAAO,SAAW,gCAClB,GAAU,qCACZ,EAZF,SAAA,CAcG,EAAO,MACP,IACC,EAAA,EAAA,KAAA,CAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACE,EAAAA,UAAD,CAAW,KAAM,GAAI,UAAU,uBAAuB,cAAY,MAAQ,CAAA,GAC1E,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,UAAU,SAAA,YAAgB,CAAA,CAC1C,CAAA,CAAA,CAEO,CApBN,EAAA,EAAO,KAoBD,CAEjB,CAAC,CACW,EA5BK,CA4BL,CACf,CACD,CAAA,CAAA,CAEO,CAAA,CACN,GACK,CAAA,CACT,GAEb,CACF,EAEA,EAAS,YAAc"}

package/dist/combobox-wOpqEFBq.d.mts

@@ -0,0 +1,120 @@
+import { t as Command$1 } from "./command-DLnIGYou.mjs";
+import { Command } from "cmdk";
+//#region packages/components/ui/combobox.d.ts
+/** A single selectable/creatable option rendered in the `Combobox` dropdown. */
+interface ComboboxOption {
+  /** Unique value used for selection, comparison, and de-duplication. */
+  value: string;
+  /** Human-readable label displayed in the dropdown and as a chip. */
+  label: string;
+  /** When true, the option cannot be selected. */
+  disable?: boolean;
+  /** When true, the resulting chip cannot be removed via the ×/Backspace and is excluded from "clear all". */
+  fixed?: boolean;
+  /** Group the options by providing a matching key. */
+  [key: string]: string | boolean | undefined;
+}
+/** Props for the `Combobox` component. */
+interface ComboboxProps {
+  /** Controlled list of currently selected options. */
+  value?: ComboboxOption[];
+  /** Initial selection when uncontrolled. */
+  defaultValue?: ComboboxOption[];
+  /** Fired whenever the selection changes. */
+  onChange?: (options: ComboboxOption[]) => void;
+  /** Manually controlled options. */
+  options?: ComboboxOption[];
+  /** Initial options pre-loaded into the dropdown (uncontrolled). */
+  defaultOptions?: ComboboxOption[];
+  /** Async search, called (debounced) whenever the typed query changes while the dropdown is open. */
+  onSearch?: (query: string) => Promise<ComboboxOption[]>;
+  /** Debounce delay in ms for `onSearch`. Defaults to 500. */
+  delay?: number;
+  /** Trigger `onSearch` as soon as the dropdown opens, even before typing. */
+  triggerSearchOnFocus?: boolean;
+  /** Group options in the dropdown by this option key. */
+  groupBy?: string;
+  /** Placeholder shown on the closed trigger (when nothing is selected) and in the search input. */
+  placeholder?: string;
+  disabled?: boolean;
+  /** Visual color variant of the trigger box. Defaults to `'normal'`. */
+  color?: 'normal' | 'danger';
+  /** Size of the trigger box, chips, and dropdown text. Defaults to `'md'`. */
+  size?: 'sm' | 'md' | 'lg';
+  /** Full override of the loading row content, shown while `onSearch` is pending. */
+  loadingIndicator?: React.ReactNode;
+  /** Convenience text shown next to the default spinner while loading. Ignored if `loadingIndicator` is set. */
+  loadingText?: string;
+  /** Content shown when no options match the current query. Defaults to `'No results found.'`. Ignored while the creatable prompt is shown. */
+  emptyIndicator?: React.ReactNode;
+  /** Allow creating a new option when the typed query doesn't match any existing option. */
+  creatable?: boolean;
+  /** Explanatory hint rendered above the confirm button when no option matches the typed query (e.g. why this value isn't in the list). */
+  createHint?: React.ReactNode | ((query: string) => React.ReactNode);
+  /** Accessible label for the confirm button. Defaults to `Create "<query>"`. */
+  createLabel?: string | ((query: string) => string);
+  /** Fired when a new option is created via the creatable flow. */
+  onCreateOption?: (query: string) => void;
+  /** Maximum number of options that can be selected at once. */
+  maxSelected?: number;
+  /** Fired when a selection attempt exceeds `maxSelected`, with the configured cap. */
+  onMaxSelected?: (max: number) => void;
+  /** When true, already-selected options are removed from the dropdown instead of shown with a checkmark. */
+  hideSelectedFromList?: boolean;
+  /** Hide the "Clear Selected Input" action. */
+  hideClearAllButton?: boolean;
+  /** Fired after all (non-fixed) selections are cleared via "Clear Selected Input". */
+  onClearAll?: () => void;
+  /** Hide the search input's clear (×) button. */
+  hideClearQueryButton?: boolean;
+  /** Fired after the typed query is cleared via the search input's clear button. */
+  onClearQuery?: () => void;
+  className?: string;
+  badgeClassName?: string;
+  contentClassName?: string;
+  /** Props forwarded to the underlying `Command` root. `value`/`onValueChange` are excluded — they control cmdk's internal highlighted-item tracking, not this component's selection. */
+  commandProps?: Omit<React.ComponentPropsWithoutRef<typeof Command$1>, 'value' | 'onValueChange'>;
+  /** Props forwarded to the underlying `CommandPrimitive.Input`. */
+  inputProps?: Omit<React.ComponentPropsWithoutRef<typeof Command.Input>, 'value' | 'placeholder' | 'disabled'>;
+}
+/** Imperative handle exposed by `Combobox` via `ref`. */
+interface ComboboxRef {
+  /** The currently selected options. */
+  selectedValue: ComboboxOption[];
+  /** The underlying search `<input>` DOM element. */
+  input: HTMLInputElement;
+  /** Programmatically open the dropdown and focus the search input. */
+  focus: () => void;
+  /** Clear all selected options. */
+  reset: () => void;
+  /** Clear the currently typed query without touching the selection. */
+  clearQuery: () => void;
+}
+/**
+ * A multi-select combobox: a closed trigger shows the current selection as removable chips (or a
+ * placeholder) and toggles a popover on click; the popover holds a type-to-filter search input, an
+ * optional async-loaded option list, and a creatable "custom input" prompt for values that don't
+ * match any existing option.
+ *
+ * @example
+ * ```tsx
+ * import { Combobox } from '@customafk/lunas-ui/ui/combobox';
+ *
+ * const options = [
+ *   { value: 'hokkaido', label: 'Hokkaido' },
+ *   { value: 'aomori', label: 'Aomori' },
+ * ];
+ *
+ * <Combobox
+ *   options={options}
+ *   placeholder="Search location…"
+ *   creatable
+ *   createHint="This location isn't registered yet — it will be added as a custom entry."
+ *   onChange={(selected) => console.log(selected)}
+ * />
+ * ```
+ */
+declare const Combobox: import("react").ForwardRefExoticComponent<ComboboxProps & import("react").RefAttributes<ComboboxRef>>;
+//#endregion
+export { ComboboxRef as i, ComboboxOption as n, ComboboxProps as r, Combobox as t };
+//# sourceMappingURL=combobox-wOpqEFBq.d.mts.map

package/dist/{command-Bb6SneVI.d.mts → command-BM9cIuFp.d.cts}

@@ -1,6 +1,5 @@
-import { t as Dialog } from "./dialog-BASlxWF_.mjs";
+import { t as Dialog } from "./dialog-c1vBnso8.cjs";
 import { Command } from "cmdk";
-
 //#region packages/components/ui/command.d.ts
 /**
  * A cmdk-powered command palette for searching and executing commands.
@@ -24,10 +23,7 @@ import { Command } from "cmdk";
  * </Command>
  * ```
  */
-declare function Command$1({
-  className,
-  ...props
-}: React.ComponentProps<typeof Command>): import("react").JSX.Element;
+declare function Command$1({ className, ...props }: React.ComponentProps<typeof Command>): import("react").JSX.Element;
 /**
  * A Command palette rendered inside a Dialog overlay.
  *
@@ -35,53 +31,26 @@ declare function Command$1({
  * @param description - Accessible description for the dialog (screen-reader only).
  * @param showCloseButton - Whether to show the built-in close button on the dialog.
  */
-declare function CommandDialog({
-  title,
-  description,
-  children,
-  className,
-  showCloseButton,
-  ...props
-}: React.ComponentProps<typeof Dialog> & {
+declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: React.ComponentProps<typeof Dialog> & {
   title?: string;
   description?: string;
   className?: string;
   showCloseButton?: boolean;
 }): import("react").JSX.Element;
 /** Search input with a leading search icon that filters CommandItems in real time. */
-declare function CommandInput({
-  className,
-  ...props
-}: React.ComponentProps<typeof Command.Input>): import("react").JSX.Element;
+declare function CommandInput({ className, ...props }: React.ComponentProps<typeof Command.Input>): import("react").JSX.Element;
 /** Scrollable list that renders filtered CommandGroups and CommandItems. */
-declare function CommandList({
-  className,
-  ...props
-}: React.ComponentProps<typeof Command.List>): import("react").JSX.Element;
+declare function CommandList({ className, ...props }: React.ComponentProps<typeof Command.List>): import("react").JSX.Element;
 /** Fallback message displayed when no CommandItems match the current search query. */
-declare function CommandEmpty({
-  ...props
-}: React.ComponentProps<typeof Command.Empty>): import("react").JSX.Element;
+declare function CommandEmpty({ ...props }: React.ComponentProps<typeof Command.Empty>): import("react").JSX.Element;
 /** Groups CommandItems under an optional heading label. */
-declare function CommandGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof Command.Group>): import("react").JSX.Element;
+declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof Command.Group>): import("react").JSX.Element;
 /** Horizontal dividing line between groups in a CommandList. */
-declare function CommandSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof Command.Separator>): import("react").JSX.Element;
+declare function CommandSeparator({ className, ...props }: React.ComponentProps<typeof Command.Separator>): import("react").JSX.Element;
 /** A selectable row inside a CommandGroup that is highlighted when active or hovered. */
-declare function CommandItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof Command.Item>): import("react").JSX.Element;
+declare function CommandItem({ className, ...props }: React.ComponentProps<typeof Command.Item>): import("react").JSX.Element;
 /** Displays a keyboard shortcut hint aligned to the right of a CommandItem. */
-declare function CommandShortcut({
-  className,
-  ...props
-}: React.ComponentProps<'span'>): import("react").JSX.Element;
+declare function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>): import("react").JSX.Element;
 //#endregion
 export { CommandInput as a, CommandSeparator as c, CommandGroup as i, CommandShortcut as l, CommandDialog as n, CommandItem as o, CommandEmpty as r, CommandList as s, Command$1 as t };
-//# sourceMappingURL=command-Bb6SneVI.d.mts.map
+//# sourceMappingURL=command-BM9cIuFp.d.cts.map

package/dist/{command-CHSJVU9o.d.cts → command-DLnIGYou.d.mts}

@@ -1,6 +1,5 @@
-import { t as Dialog } from "./dialog-BASlxWF_.cjs";
+import { t as Dialog } from "./dialog-c1vBnso8.mjs";
 import { Command } from "cmdk";
-
 //#region packages/components/ui/command.d.ts
 /**
  * A cmdk-powered command palette for searching and executing commands.
@@ -24,10 +23,7 @@ import { Command } from "cmdk";
  * </Command>
  * ```
  */
-declare function Command$1({
-  className,
-  ...props
-}: React.ComponentProps<typeof Command>): import("react").JSX.Element;
+declare function Command$1({ className, ...props }: React.ComponentProps<typeof Command>): import("react").JSX.Element;
 /**
  * A Command palette rendered inside a Dialog overlay.
  *
@@ -35,53 +31,26 @@ declare function Command$1({
  * @param description - Accessible description for the dialog (screen-reader only).
  * @param showCloseButton - Whether to show the built-in close button on the dialog.
  */
-declare function CommandDialog({
-  title,
-  description,
-  children,
-  className,
-  showCloseButton,
-  ...props
-}: React.ComponentProps<typeof Dialog> & {
+declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: React.ComponentProps<typeof Dialog> & {
   title?: string;
   description?: string;
   className?: string;
   showCloseButton?: boolean;
 }): import("react").JSX.Element;
 /** Search input with a leading search icon that filters CommandItems in real time. */
-declare function CommandInput({
-  className,
-  ...props
-}: React.ComponentProps<typeof Command.Input>): import("react").JSX.Element;
+declare function CommandInput({ className, ...props }: React.ComponentProps<typeof Command.Input>): import("react").JSX.Element;
 /** Scrollable list that renders filtered CommandGroups and CommandItems. */
-declare function CommandList({
-  className,
-  ...props
-}: React.ComponentProps<typeof Command.List>): import("react").JSX.Element;
+declare function CommandList({ className, ...props }: React.ComponentProps<typeof Command.List>): import("react").JSX.Element;
 /** Fallback message displayed when no CommandItems match the current search query. */
-declare function CommandEmpty({
-  ...props
-}: React.ComponentProps<typeof Command.Empty>): import("react").JSX.Element;
+declare function CommandEmpty({ ...props }: React.ComponentProps<typeof Command.Empty>): import("react").JSX.Element;
 /** Groups CommandItems under an optional heading label. */
-declare function CommandGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof Command.Group>): import("react").JSX.Element;
+declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof Command.Group>): import("react").JSX.Element;
 /** Horizontal dividing line between groups in a CommandList. */
-declare function CommandSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof Command.Separator>): import("react").JSX.Element;
+declare function CommandSeparator({ className, ...props }: React.ComponentProps<typeof Command.Separator>): import("react").JSX.Element;
 /** A selectable row inside a CommandGroup that is highlighted when active or hovered. */
-declare function CommandItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof Command.Item>): import("react").JSX.Element;
+declare function CommandItem({ className, ...props }: React.ComponentProps<typeof Command.Item>): import("react").JSX.Element;
 /** Displays a keyboard shortcut hint aligned to the right of a CommandItem. */
-declare function CommandShortcut({
-  className,
-  ...props
-}: React.ComponentProps<'span'>): import("react").JSX.Element;
+declare function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>): import("react").JSX.Element;
 //#endregion
 export { CommandInput as a, CommandSeparator as c, CommandGroup as i, CommandShortcut as l, CommandDialog as n, CommandItem as o, CommandEmpty as r, CommandList as s, Command$1 as t };
-//# sourceMappingURL=command-CHSJVU9o.d.cts.map
+//# sourceMappingURL=command-DLnIGYou.d.mts.map