@comitor/ui 3.13.2 → 3.13.4

package/dist/components/ui/key-value.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/key-value.tsx"],"sourcesContent":["\"use client\";\n\n/*\n * Port từ Dice UI (https://diceui.com/docs/components/key-value) — MIT, © 2024 Sadman Sakib.\n * Giữ nguyên cấu trúc thượng nguồn để còn đối chiếu ngược được; mọi chỗ đổi đều có chú thích.\n */\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Plus, X } from \"lucide-react\";\nimport * as React from \"react\";\nimport { useComitorLabels } from \"../../i18n/locale-provider.js\";\nimport { cn } from \"../../lib/cn.js\";\nimport { useComposedRefs } from \"../../lib/compose-refs.js\";\nimport { useAsRef } from \"../../lib/use-as-ref.js\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/use-isomorphic-layout-effect.js\";\nimport { useLazyRef } from \"../../lib/use-lazy-ref.js\";\nimport { VisuallyHiddenInput } from \"../../lib/visually-hidden-input.js\";\nimport { Button } from \"./button.js\";\nimport { Input } from \"./input.js\";\nimport type { KeyValueLabels } from \"./key-value-constants.js\";\nimport { Textarea } from \"./textarea.js\";\n\nconst ROOT_NAME = \"KeyValue\";\nconst LIST_NAME = \"KeyValueList\";\nconst ITEM_NAME = \"KeyValueItem\";\nconst KEY_INPUT_NAME = \"KeyValueKeyInput\";\nconst VALUE_INPUT_NAME = \"KeyValueValueInput\";\nconst REMOVE_NAME = \"KeyValueRemove\";\nconst ADD_NAME = \"KeyValueAdd\";\nconst ERROR_NAME = \"KeyValueError\";\n\ntype Orientation = \"vertical\" | \"horizontal\";\ntype Field = \"key\" | \"value\";\n\ninterface DivProps extends React.ComponentProps<\"div\"> {\n  asChild?: boolean;\n}\n\ntype RootElement = React.ComponentRef<typeof KeyValue>;\ntype KeyInputElement = React.ComponentRef<typeof KeyValueKeyInput>;\ntype RemoveElement = React.ComponentRef<typeof KeyValueRemove>;\ntype AddElement = React.ComponentRef<typeof KeyValueAdd>;\n\nfunction getErrorId(rootId: string, itemId: string, field: Field) {\n  return `${rootId}-${itemId}-${field}-error`;\n}\n\n/*\n * ⚠ Khác thượng nguồn: bản gốc gọi thẳng `crypto.randomUUID()`. Hàm đó chỉ tồn tại trong NGỮ CẢNH\n * AN TOÀN (HTTPS hoặc localhost) — mở trang quản trị qua `http://` bằng IP nội bộ là `TypeError`\n * ngay lúc render dòng đầu tiên. Id ở đây chỉ làm key của React và nối vào id của thông báo lỗi,\n * không cần ngẫu nhiên mật mã, nên có đường lui.\n */\nlet fallbackIdCounter = 0;\n\nfunction createItemId(): string {\n  if (typeof crypto !== \"undefined\" && typeof crypto.randomUUID === \"function\") {\n    return crypto.randomUUID();\n  }\n  fallbackIdCounter += 1;\n  return `kv-${Date.now().toString(36)}-${fallbackIdCounter}`;\n}\n\nfunction removeQuotes(string: string, shouldStrip: boolean): string {\n  if (!shouldStrip) return string;\n\n  const trimmed = string.trim();\n  if ((trimmed.startsWith('\"') && trimmed.endsWith('\"')) || (trimmed.startsWith(\"'\") && trimmed.endsWith(\"'\"))) {\n    return trimmed.slice(1, -1);\n  }\n  return trimmed;\n}\n\ninterface Store {\n  subscribe: (callback: () => void) => () => void;\n  getState: () => KeyValueState;\n  setState: <K extends keyof KeyValueState>(key: K, value: KeyValueState[K]) => void;\n  notify: () => void;\n}\n\nfunction useStore<T>(selector: (state: KeyValueState) => T, ogStore?: Store | null): T {\n  const contextStore = React.useContext(StoreContext);\n\n  const store = ogStore ?? contextStore;\n\n  if (!store) {\n    throw new Error(`\\`useKeyValueStore\\` phải được gọi bên trong \\`${ROOT_NAME}\\``);\n  }\n\n  const getSnapshot = React.useCallback(() => selector(store.getState()), [store, selector]);\n\n  return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);\n}\n\ninterface ItemData {\n  id: string;\n  key: string;\n  value: string;\n}\n\ninterface KeyValueState {\n  value: ItemData[];\n  focusedId: string | null;\n  errors: Record<string, { key?: string; value?: string }>;\n}\n\nconst StoreContext = React.createContext<Store | null>(null);\n\nfunction useStoreContext(consumerName: string) {\n  const context = React.useContext(StoreContext);\n  if (!context) {\n    throw new Error(`\\`${consumerName}\\` phải nằm bên trong \\`${ROOT_NAME}\\``);\n  }\n  return context;\n}\n\ninterface KeyValueContextValue {\n  onPaste?: (event: ClipboardEvent, items: ItemData[]) => void;\n  onAdd?: (value: ItemData) => void;\n  onRemove?: (value: ItemData) => void;\n  onKeyValidate?: (key: string, value: ItemData[]) => string | undefined;\n  onValueValidate?: (value: string, key: string, items: ItemData[]) => string | undefined;\n  rootId: string;\n  maxItems?: number;\n  minItems: number;\n  keyPlaceholder: string;\n  valuePlaceholder: string;\n  labels: KeyValueLabels;\n  allowDuplicateKeys: boolean;\n  enablePaste: boolean;\n  trim: boolean;\n  stripQuotes: boolean;\n  disabled: boolean;\n  readOnly: boolean;\n  required: boolean;\n}\n\nconst KeyValueContext = React.createContext<KeyValueContextValue | null>(null);\n\nfunction useKeyValueContext(consumerName: string) {\n  const context = React.useContext(KeyValueContext);\n  if (!context) {\n    throw new Error(`\\`${consumerName}\\` phải nằm bên trong \\`${ROOT_NAME}\\``);\n  }\n  return context;\n}\n\n/**\n * Ghi MỘT ô (khoá hoặc giá trị) của một dòng vào store rồi kiểm lỗi lại dòng đó. Dùng chung cho\n * hai ô nhập — trước `3.0.1` khối này chép nguyên hai lần, mỗi ô một bản.\n */\nfunction commitItemField(store: Store, context: KeyValueContextValue, itemId: string, field: Field, text: string) {\n  const state = store.getState();\n  const newValue = state.value.map((item) => (item.id === itemId ? { ...item, [field]: text } : item));\n\n  store.setState(\"value\", newValue);\n\n  const updatedItemData = newValue.find((item) => item.id === itemId);\n  if (!updatedItemData) return;\n\n  const errors: { key?: string; value?: string } = {};\n\n  if (context.onKeyValidate) {\n    const keyError = context.onKeyValidate(updatedItemData.key, newValue);\n    if (keyError) errors.key = keyError;\n  }\n\n  if (!context.allowDuplicateKeys) {\n    const duplicateKey = newValue.find(\n      (item) => item.id !== updatedItemData.id && item.key === updatedItemData.key && updatedItemData.key !== \"\"\n    );\n    if (duplicateKey) {\n      errors.key = context.labels.duplicateKey;\n    }\n  }\n\n  if (context.onValueValidate) {\n    const valueError = context.onValueValidate(updatedItemData.value, updatedItemData.key, newValue);\n    if (valueError) errors.value = valueError;\n  }\n\n  const newErrorsState = { ...state.errors };\n  if (Object.keys(errors).length > 0) {\n    newErrorsState[itemId] = errors;\n  } else {\n    delete newErrorsState[itemId];\n  }\n  store.setState(\"errors\", newErrorsState);\n}\n\n/*\n * ⚠ Khác thượng nguồn (3.0.1): với `trim`, Ô NHẬP hiện đúng chữ đang gõ, còn STORE nhận bản đã cắt.\n * Bản gốc cắt ngay trong `onChange` rồi đưa chính chuỗi đã cắt về lại ô, nên dấu cách vừa gõ ở cuối\n * biến mất trước khi chữ kế tiếp tới — với `trim` mặc định `true`, không gõ được \"Contract term\" hay\n * \"Bearer token\" theo cách bình thường (ra \"Contractterm\").\n * Mọi thứ app nhận (`onValueChange`, ô ẩn trong form, kiểm lỗi, trùng khoá) vẫn LUÔN là bản đã cắt,\n * đúng như bản gốc — kể cả khi Enter gửi form ngay sau một dấu cách. Chỉ phần hiển thị giữ khoảng\n * trắng, cho tới khi rời ô.\n */\nfunction useTrimDraft(committed: string) {\n  const [draft, setDraft] = React.useState<string | null>(null);\n  // Bản nháp chỉ được hiện khi nó còn khớp store: store đổi từ nơi khác (app đặt `value`, dán nhiều\n  // dòng) thì hiện giá trị mới.\n  const shown = draft !== null && draft.trim() === committed ? draft : committed;\n  return [shown, setDraft] as const;\n}\n\ninterface KeyValueProps extends Omit<DivProps, \"onPaste\" | \"defaultValue\"> {\n  id?: string;\n  defaultValue?: ItemData[];\n  value?: ItemData[];\n  onValueChange?: (value: ItemData[]) => void;\n  maxItems?: number;\n  minItems?: number;\n  /** Placeholder của ô khoá — thắng `labels.keyPlaceholder` (mặc định \"Key\"). */\n  keyPlaceholder?: string;\n  /** Placeholder của ô giá trị — thắng `labels.valuePlaceholder` (mặc định \"Value\"). */\n  valuePlaceholder?: string;\n  /**\n   * Chuỗi hiển thị và chuỗi cho trình đọc màn hình — truyền MỘT PHẦN là đủ, phần còn lại theo\n   * namespace `keyValue` của `ComitorLocaleProvider` (mặc định tiếng Anh). ⚠ Thêm so với thượng\n   * nguồn (bản gốc chôn cứng \"Add\" / \"Duplicate key\" và để nút xoá không có tên).\n   */\n  labels?: Partial<KeyValueLabels>;\n  name?: string;\n  allowDuplicateKeys?: boolean;\n  enablePaste?: boolean;\n  trim?: boolean;\n  stripQuotes?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  onPaste?: (event: ClipboardEvent, items: ItemData[]) => void;\n  onAdd?: (value: ItemData) => void;\n  onRemove?: (value: ItemData) => void;\n  onKeyValidate?: (key: string, value: ItemData[]) => string | undefined;\n  onValueValidate?: (value: string, key: string, items: ItemData[]) => string | undefined;\n}\n\n/**\n * KeyValue — danh sách cặp khoá/giá trị sửa được: trường tuỳ biến của bản ghi CRM, header /\n * metadata của webhook ở trang quản trị. Dán nhiều dòng `KEY=value` (hoặc `KEY: value`, hoặc\n * cách bằng tab) vào ô khoá là tách thành nhiều cặp.\n */\nfunction KeyValue(props: KeyValueProps) {\n  const {\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    onPaste,\n    onAdd,\n    onRemove,\n    onKeyValidate,\n    onValueValidate,\n    maxItems,\n    minItems = 0,\n    labels: labelsProp,\n    keyPlaceholder: keyPlaceholderProp,\n    valuePlaceholder: valuePlaceholderProp,\n    allowDuplicateKeys = false,\n    asChild,\n    enablePaste = true,\n    trim = true,\n    stripQuotes = true,\n    disabled = false,\n    readOnly = false,\n    required = false,\n    className,\n    id,\n    name,\n    ref,\n    ...rootProps\n  } = props;\n\n  const instanceId = React.useId();\n  const rootId = id ?? instanceId;\n\n  const labels = useComitorLabels(\"keyValue\", labelsProp);\n  const keyPlaceholder = keyPlaceholderProp ?? labels.keyPlaceholder;\n  const valuePlaceholder = valuePlaceholderProp ?? labels.valuePlaceholder;\n\n  const [formTrigger, setFormTrigger] = React.useState<RootElement | null>(null);\n  const composedRef = useComposedRefs(ref, (node) => setFormTrigger(node));\n  const isFormControl = formTrigger ? !!formTrigger.closest(\"form\") : true;\n\n  const listenersRef = useLazyRef(() => new Set<() => void>());\n  const stateRef = useLazyRef<KeyValueState>(() => ({\n    value: valueProp ?? defaultValue ?? [{ id: createItemId(), key: \"\", value: \"\" }],\n    focusedId: null,\n    errors: {}\n  }));\n  const propsRef = useAsRef({ onValueChange });\n\n  const store = React.useMemo<Store>(() => {\n    return {\n      subscribe: (cb) => {\n        listenersRef.current.add(cb);\n        return () => listenersRef.current.delete(cb);\n      },\n      getState: () => stateRef.current,\n      setState: (key, val) => {\n        if (Object.is(stateRef.current[key], val)) return;\n\n        if (key === \"value\" && Array.isArray(val)) {\n          stateRef.current.value = val as ItemData[];\n          propsRef.current.onValueChange?.(val as ItemData[]);\n        } else {\n          stateRef.current[key] = val;\n        }\n\n        store.notify();\n      },\n      notify: () => {\n        for (const cb of listenersRef.current) {\n          cb();\n        }\n      }\n    };\n  }, [listenersRef, stateRef, propsRef]);\n\n  const value = useStore((state) => state.value, store);\n  const errors = useStore((state) => state.errors, store);\n  const isInvalid = Object.keys(errors).length > 0;\n\n  useIsomorphicLayoutEffect(() => {\n    if (valueProp !== undefined) {\n      store.setState(\"value\", valueProp);\n    }\n  }, [valueProp]);\n\n  const contextValue = React.useMemo<KeyValueContextValue>(\n    () => ({\n      onPaste,\n      onAdd,\n      onRemove,\n      onKeyValidate,\n      onValueValidate,\n      rootId,\n      maxItems,\n      minItems,\n      keyPlaceholder,\n      valuePlaceholder,\n      labels,\n      allowDuplicateKeys,\n      enablePaste,\n      trim,\n      stripQuotes,\n      disabled,\n      readOnly,\n      required\n    }),\n    [\n      onPaste,\n      onAdd,\n      onRemove,\n      onKeyValidate,\n      onValueValidate,\n      rootId,\n      disabled,\n      readOnly,\n      required,\n      maxItems,\n      minItems,\n      keyPlaceholder,\n      valuePlaceholder,\n      labels,\n      allowDuplicateKeys,\n      enablePaste,\n      trim,\n      stripQuotes\n    ]\n  );\n\n  const RootPrimitive = asChild ? Slot : \"div\";\n\n  return (\n    <StoreContext.Provider value={store}>\n      <KeyValueContext.Provider value={contextValue}>\n        <RootPrimitive\n          id={id}\n          data-slot=\"key-value\"\n          data-disabled={disabled ? \"\" : undefined}\n          data-invalid={isInvalid ? \"\" : undefined}\n          data-readonly={readOnly ? \"\" : undefined}\n          {...rootProps}\n          ref={composedRef}\n          className={cn(\"flex flex-col gap-2\", className)}\n        />\n        {isFormControl && (\n          <VisuallyHiddenInput\n            type=\"hidden\"\n            control={formTrigger}\n            name={name}\n            value={value}\n            disabled={disabled}\n            readOnly={readOnly}\n            required={required}\n          />\n        )}\n      </KeyValueContext.Provider>\n    </StoreContext.Provider>\n  );\n}\n\ninterface KeyValueListProps extends DivProps {\n  orientation?: Orientation;\n}\n\nfunction KeyValueList(props: KeyValueListProps) {\n  const { orientation = \"vertical\", asChild, className, ...listProps } = props;\n\n  const value = useStore((state) => state.value);\n\n  const ListPrimitive = asChild ? Slot : \"div\";\n\n  return (\n    <ListPrimitive\n      role=\"list\"\n      /*\n       * ⚠ Khác thượng nguồn (a11y): bỏ `aria-orientation`. Thuộc tính đó KHÔNG được phép trên\n       * `role=\"list\"` (ARIA 1.2 chỉ cho nó ở listbox, menu, tablist, toolbar, radiogroup, slider…)\n       * — axe báo `aria-allowed-attr`. Hướng vẫn còn ở `data-orientation` cho CSS.\n       */\n      data-slot=\"key-value-list\"\n      data-orientation={orientation}\n      {...listProps}\n      className={cn(\"flex\", orientation === \"vertical\" ? \"flex-col gap-2\" : \"flex-row gap-2\", className)}\n    >\n      {value.map((item) => {\n        const children = React.Children.toArray(props.children);\n\n        return (\n          <KeyValueItemContext.Provider key={item.id} value={item}>\n            {children}\n          </KeyValueItemContext.Provider>\n        );\n      })}\n    </ListPrimitive>\n  );\n}\n\nconst KeyValueItemContext = React.createContext<ItemData | null>(null);\n\nfunction useKeyValueItemContext(consumerName: string) {\n  const context = React.useContext(KeyValueItemContext);\n  if (!context) {\n    throw new Error(`\\`${consumerName}\\` phải nằm bên trong \\`${LIST_NAME}\\``);\n  }\n  return context;\n}\n\ninterface KeyValueItemProps extends React.ComponentProps<\"div\"> {\n  asChild?: boolean;\n}\n\nfunction KeyValueItem(props: KeyValueItemProps) {\n  const { asChild, className, ...itemProps } = props;\n  const itemData = useKeyValueItemContext(ITEM_NAME);\n\n  const focusedId = useStore((state) => state.focusedId);\n\n  const ItemPrimitive = asChild ? Slot : \"div\";\n\n  return (\n    <ItemPrimitive\n      role=\"listitem\"\n      data-slot=\"key-value-item\"\n      data-highlighted={focusedId === itemData.id ? \"\" : undefined}\n      {...itemProps}\n      className={cn(\"flex items-start gap-2\", className)}\n    />\n  );\n}\n\ninterface KeyValueKeyInputProps extends React.ComponentProps<\"input\"> {\n  asChild?: boolean;\n}\n\nfunction KeyValueKeyInput(props: KeyValueKeyInputProps) {\n  const {\n    onChange: onChangeProp,\n    onBlur: onBlurProp,\n    onPaste: onPasteProp,\n    asChild,\n    disabled,\n    readOnly,\n    required,\n    ref,\n    ...keyInputProps\n  } = props;\n\n  const context = useKeyValueContext(KEY_INPUT_NAME);\n  const itemData = useKeyValueItemContext(KEY_INPUT_NAME);\n  const store = useStoreContext(KEY_INPUT_NAME);\n  const errors = useStore((state) => state.errors);\n  const focusedId = useStore((state) => state.focusedId);\n\n  const inputRef = React.useRef<KeyInputElement>(null);\n  const composedRef = useComposedRefs(ref, inputRef);\n\n  /*\n   * ⚠ Khác thượng nguồn (a11y): `KeyValueAdd` ghi id dòng mới vào `focusedId` nhưng bản gốc không\n   * bao giờ dùng nó để đưa focus — bấm \"Thêm\" xong focus vẫn đứng ở nút, người dùng bàn phím phải\n   * tự Tab ngược lên dòng vừa thêm. Ở đây ô KHOÁ của dòng mới tự nhận focus. Chỉ chạy khi\n   * `focusedId` ĐỔI sang dòng này (mà chỉ `KeyValueAdd` ghi nó), nên dòng có sẵn lúc mount và dòng\n   * sinh ra do dán không bị cướp focus.\n   */\n  React.useEffect(() => {\n    if (focusedId === itemData.id) {\n      inputRef.current?.focus();\n    }\n  }, [focusedId, itemData.id]);\n\n  const propsRef = useAsRef({\n    onChange: onChangeProp,\n    onBlur: onBlurProp,\n    onPaste: onPasteProp\n  });\n\n  const isDisabled = disabled || context.disabled;\n  const isReadOnly = readOnly || context.readOnly;\n  const isRequired = required || context.required;\n  const isInvalid = errors[itemData.id]?.key !== undefined;\n  const [shownKey, setKeyDraft] = useTrimDraft(itemData.key);\n\n  const onChange = React.useCallback(\n    (event: React.ChangeEvent<KeyInputElement>) => {\n      const text = event.target.value;\n      if (context.trim) setKeyDraft(text);\n      commitItemField(store, context, itemData.id, \"key\", context.trim ? text.trim() : text);\n      propsRef.current.onChange?.(event);\n    },\n    [store, itemData.id, context, propsRef, setKeyDraft]\n  );\n\n  const onBlur = React.useCallback(\n    (event: React.FocusEvent<KeyInputElement>) => {\n      propsRef.current.onBlur?.(event);\n      setKeyDraft(null);\n    },\n    [propsRef, setKeyDraft]\n  );\n\n  const onPaste = React.useCallback(\n    (event: React.ClipboardEvent<KeyInputElement>) => {\n      if (!context.enablePaste) return;\n\n      propsRef.current.onPaste?.(event);\n      if (event.defaultPrevented) return;\n\n      const content = event.clipboardData.getData(\"text\");\n      const lines = content.split(/\\r?\\n/).filter((line) => line.trim());\n\n      if (lines.length > 1) {\n        event.preventDefault();\n\n        const parsed: ItemData[] = [];\n\n        for (const line of lines) {\n          let key = \"\";\n          let value = \"\";\n\n          if (line.includes(\"=\")) {\n            const parts = line.split(\"=\");\n            key = parts[0]?.trim() ?? \"\";\n            value = removeQuotes(parts.slice(1).join(\"=\").trim(), context.stripQuotes);\n          } else if (line.includes(\":\")) {\n            const parts = line.split(\":\");\n            key = parts[0]?.trim() ?? \"\";\n            value = removeQuotes(parts.slice(1).join(\":\").trim(), context.stripQuotes);\n          } else if (/\\s{2,}|\\t/.test(line)) {\n            const parts = line.split(/\\s{2,}|\\t/);\n            key = parts[0]?.trim() ?? \"\";\n            value = removeQuotes(parts.slice(1).join(\" \").trim(), context.stripQuotes);\n          }\n\n          if (key) {\n            parsed.push({ id: createItemId(), key, value });\n          }\n        }\n\n        if (parsed.length > 0) {\n          const state = store.getState();\n          const currentIndex = state.value.findIndex((item) => item.id === itemData.id);\n\n          let newValue: ItemData[];\n          if (itemData.key === \"\" && itemData.value === \"\") {\n            newValue = [...state.value.slice(0, currentIndex), ...parsed, ...state.value.slice(currentIndex + 1)];\n          } else {\n            newValue = [...state.value.slice(0, currentIndex + 1), ...parsed, ...state.value.slice(currentIndex + 1)];\n          }\n\n          if (context.maxItems !== undefined) {\n            newValue = newValue.slice(0, context.maxItems);\n          }\n\n          store.setState(\"value\", newValue);\n\n          if (context.onPaste) {\n            context.onPaste(event.nativeEvent as unknown as ClipboardEvent, parsed);\n          }\n        }\n      }\n    },\n    [context, store, itemData, propsRef]\n  );\n\n  const KeyInputPrimitive = asChild ? Slot : Input;\n\n  return (\n    <KeyInputPrimitive\n      aria-invalid={isInvalid}\n      aria-describedby={isInvalid ? getErrorId(context.rootId, itemData.id, \"key\") : undefined}\n      data-slot=\"key-value-key-input\"\n      autoCapitalize=\"off\"\n      autoComplete=\"off\"\n      autoCorrect=\"off\"\n      spellCheck=\"false\"\n      disabled={isDisabled}\n      readOnly={isReadOnly}\n      required={isRequired}\n      placeholder={context.keyPlaceholder}\n      {...keyInputProps}\n      ref={composedRef}\n      value={shownKey}\n      onChange={onChange}\n      onBlur={onBlur}\n      onPaste={onPaste}\n    />\n  );\n}\n\ninterface KeyValueValueInputProps extends Omit<React.ComponentProps<\"textarea\">, \"rows\"> {\n  maxRows?: number;\n  asChild?: boolean;\n}\n\nfunction KeyValueValueInput(props: KeyValueValueInputProps) {\n  const {\n    onChange: onChangeProp,\n    onBlur: onBlurProp,\n    asChild,\n    disabled,\n    readOnly,\n    required,\n    className,\n    maxRows,\n    style,\n    ...valueInputProps\n  } = props;\n\n  const context = useKeyValueContext(VALUE_INPUT_NAME);\n  const itemData = useKeyValueItemContext(VALUE_INPUT_NAME);\n  const store = useStoreContext(VALUE_INPUT_NAME);\n  const errors = useStore((state) => state.errors);\n\n  const propsRef = useAsRef({\n    onChange: onChangeProp,\n    onBlur: onBlurProp\n  });\n\n  const isDisabled = disabled || context.disabled;\n  const isReadOnly = readOnly || context.readOnly;\n  const isRequired = required || context.required;\n  const isInvalid = errors[itemData.id]?.value !== undefined;\n  const maxHeight = maxRows ? `calc(${maxRows} * 1.5em + 1rem)` : undefined;\n  const [shownValue, setValueDraft] = useTrimDraft(itemData.value);\n\n  const onChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n      propsRef.current.onChange?.(event);\n      const text = event.target.value;\n      if (context.trim) setValueDraft(text);\n      commitItemField(store, context, itemData.id, \"value\", context.trim ? text.trim() : text);\n    },\n    [store, itemData.id, context, propsRef, setValueDraft]\n  );\n\n  const onBlur = React.useCallback(\n    (event: React.FocusEvent<HTMLTextAreaElement>) => {\n      propsRef.current.onBlur?.(event);\n      setValueDraft(null);\n    },\n    [propsRef, setValueDraft]\n  );\n\n  const ValueInputPrimitive = asChild ? Slot : Textarea;\n\n  return (\n    <ValueInputPrimitive\n      aria-invalid={isInvalid}\n      aria-describedby={isInvalid ? getErrorId(context.rootId, itemData.id, \"value\") : undefined}\n      data-slot=\"key-value-value-input\"\n      autoCapitalize=\"off\"\n      autoComplete=\"off\"\n      autoCorrect=\"off\"\n      spellCheck=\"false\"\n      disabled={isDisabled}\n      readOnly={isReadOnly}\n      required={isRequired}\n      placeholder={context.valuePlaceholder}\n      {...valueInputProps}\n      className={cn(\n        /*\n         * ⚠ Khác thượng nguồn: ô giá trị phải trông như ô khoá (`Input`) đứng ngay cạnh khi còn MỘT\n         * dòng. `Textarea` của gói theo comitor-ds: `text-base md:text-sm` + `py-2` (cao 38px ở\n         * desktop, 42px và chữ 16px ở mobile), nền `bg-transparent dark:bg-input-fill`, có\n         * `shadow-xs`; còn `Input` là `h-9 text-sm bg-background`, không bóng. Ghi đè ở ĐÂY chứ\n         * không sửa hai primitive: `text-sm` ở mọi cỡ màn, `min-h-9` + `py-1.5` (dòng chữ 20px cách\n         * mép trên 7px — đúng chỗ `Input` căn giữa dòng chữ trong 36px), `bg-background` ở cả hai\n         * theme, bỏ bóng. Nhiều dòng thì `field-sizing-content` vẫn cho ô cao dần như cũ.\n         */\n        \"field-sizing-content min-h-9 resize-none py-1.5 text-sm md:text-sm bg-background dark:bg-background shadow-none\",\n        maxRows && \"overflow-y-auto\",\n        className\n      )}\n      style={{\n        ...style,\n        ...(maxHeight && { maxHeight })\n      }}\n      value={shownValue}\n      onChange={onChange}\n      onBlur={onBlur}\n    />\n  );\n}\n\ninterface KeyValueRemoveProps extends React.ComponentProps<typeof Button> {}\n\nfunction KeyValueRemove(props: KeyValueRemoveProps) {\n  const { onClick: onClickProp, children, className, ...removeProps } = props;\n\n  const context = useKeyValueContext(REMOVE_NAME);\n  const itemData = useKeyValueItemContext(REMOVE_NAME);\n  const store = useStoreContext(REMOVE_NAME);\n\n  const propsRef = useAsRef({\n    onClick: onClickProp\n  });\n  const value = useStore((state) => state.value);\n  const isDisabled = context.disabled || value.length <= context.minItems;\n  const itemIndex = value.findIndex((item) => item.id === itemData.id);\n\n  const onClick = React.useCallback(\n    (event: React.MouseEvent<RemoveElement>) => {\n      propsRef.current.onClick?.(event);\n\n      const state = store.getState();\n      if (state.value.length <= context.minItems) return;\n\n      const itemToRemove = state.value.find((item) => item.id === itemData.id);\n      if (!itemToRemove) return;\n\n      /*\n       * ⚠ Khác thượng nguồn (a11y): nút đang giữ focus biến mất cùng dòng của nó, và focus rơi về\n       * `<body>` — người dùng bàn phím phải Tab lại từ đầu trang (WCAG 2.4.3). Nếu nút có focus lúc\n       * bấm thì sau khi xoá, đưa focus sang nút xoá của dòng kế (hoặc dòng trước nếu vừa xoá dòng\n       * cuối), không còn nút nào dùng được thì sang nút thêm.\n       */\n      const button = event.currentTarget;\n      const hadFocus = button.ownerDocument.activeElement === button;\n      const root = button.closest<HTMLElement>('[data-slot=\"key-value\"]');\n      const removedIndex = state.value.indexOf(itemToRemove);\n\n      const newValue = state.value.filter((item) => item.id !== itemData.id);\n      const newErrors = { ...state.errors };\n      delete newErrors[itemData.id];\n\n      store.setState(\"value\", newValue);\n      store.setState(\"errors\", newErrors);\n\n      context.onRemove?.(itemToRemove);\n\n      if (hadFocus && root) {\n        requestAnimationFrame(() => {\n          const removeButtons = root.querySelectorAll<HTMLElement>('[data-slot=\"key-value-remove\"]:not(:disabled)');\n          const nextTarget =\n            removeButtons[Math.min(removedIndex, removeButtons.length - 1)] ??\n            root.querySelector<HTMLElement>('[data-slot=\"key-value-add\"]:not(:disabled)');\n          nextTarget?.focus();\n        });\n      }\n    },\n    [store, context, itemData.id, propsRef]\n  );\n\n  return (\n    <Button\n      type=\"button\"\n      data-slot=\"key-value-remove\"\n      variant=\"outline\"\n      size=\"icon\"\n      /*\n       * ⚠ Khác thượng nguồn (a11y): nút chỉ có icon ✕ và bản gốc không đặt tên nào — trình đọc màn\n       * hình đọc \"nút\" trơn, lặp lại ở mọi dòng. Tên mặc định nói RÕ dòng nào: \"Remove API_KEY\",\n       * hoặc \"Remove row 3\" khi khoá còn trống. Đổi qua `labels.remove` của `KeyValue`, hoặc `aria-label`.\n       */\n      aria-label={context.labels.remove(itemData.key, itemIndex + 1)}\n      disabled={isDisabled}\n      {...removeProps}\n      // ⚠ Khác thượng nguồn: `shrink-0` — nút là mục flex cạnh hai ô `w-full`; thiếu nó thì flex\n      // bóp nút còn ~18×36px. `size=\"icon\"` của `Button` đã là ô vuông 36×36 (`h-9 w-9`).\n      className={cn(\"shrink-0\", className)}\n      onClick={onClick}\n    >\n      {/* `size-4`: `Button` của gói không tự đặt cỡ cho svg con như shadcn — thiếu là icon 24px. */}\n      {children ?? <X aria-hidden=\"true\" className=\"size-4\" />}\n    </Button>\n  );\n}\n\ntype KeyValueAddProps = React.ComponentProps<typeof Button>;\n\nfunction KeyValueAdd(props: KeyValueAddProps) {\n  const { onClick: onClickProp, children, ...addProps } = props;\n\n  const context = useKeyValueContext(ADD_NAME);\n  const store = useStoreContext(ADD_NAME);\n\n  const propsRef = useAsRef({\n    onClick: onClickProp\n  });\n  const value = useStore((state) => state.value);\n  const isDisabled = context.disabled || (context.maxItems !== undefined && value.length >= context.maxItems);\n\n  const onClick = React.useCallback(\n    (event: React.MouseEvent<AddElement>) => {\n      propsRef.current.onClick?.(event);\n\n      const state = store.getState();\n      if (context.maxItems !== undefined && state.value.length >= context.maxItems) {\n        return;\n      }\n\n      const newItem: ItemData = {\n        id: createItemId(),\n        key: \"\",\n        value: \"\"\n      };\n\n      const newValue = [...state.value, newItem];\n      store.setState(\"value\", newValue);\n      store.setState(\"focusedId\", newItem.id);\n\n      context.onAdd?.(newItem);\n    },\n    [store, context, propsRef]\n  );\n\n  return (\n    <Button\n      type=\"button\"\n      data-slot=\"key-value-add\"\n      variant=\"outline\"\n      disabled={isDisabled}\n      {...addProps}\n      onClick={onClick}\n    >\n      {children ?? (\n        <>\n          <Plus aria-hidden=\"true\" className=\"size-4\" />\n          {context.labels.add}\n        </>\n      )}\n    </Button>\n  );\n}\n\ninterface KeyValueErrorProps extends DivProps {\n  field: Field;\n}\n\nfunction KeyValueError(props: KeyValueErrorProps) {\n  const { field, asChild, className, ...errorProps } = props;\n\n  const context = useKeyValueContext(ERROR_NAME);\n  const itemData = useKeyValueItemContext(ERROR_NAME);\n\n  const errors = useStore((state) => state.errors);\n  const error = errors[itemData.id]?.[field];\n\n  if (!error) return null;\n\n  const ErrorPrimitive = asChild ? Slot : \"span\";\n\n  return (\n    <ErrorPrimitive\n      id={getErrorId(context.rootId, itemData.id, field)}\n      role=\"alert\"\n      {...errorProps}\n      className={cn(\n        // ⚠ Khác thượng nguồn: `text-destructive` (bậc TÔ NỀN) → `text-destructive-ink`, bậc dành\n        // cho chữ trên nền trang — cùng token với chữ lỗi của `Input`.\n        \"text-sm font-medium text-destructive-ink\",\n        className\n      )}\n    >\n      {error}\n    </ErrorPrimitive>\n  );\n}\n\nexport {\n  type ItemData as KeyValueItemData,\n  KeyValue,\n  KeyValueAdd,\n  type KeyValueAddProps,\n  KeyValueError,\n  type KeyValueErrorProps,\n  KeyValueItem,\n  type KeyValueItemProps,\n  KeyValueKeyInput,\n  type KeyValueKeyInputProps,\n  KeyValueList,\n  type KeyValueListProps,\n  type KeyValueProps,\n  KeyValueRemove,\n  type KeyValueRemoveProps,\n  KeyValueValueInput,\n  type KeyValueValueInputProps,\n  useStore as useKeyValueStore\n};\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/ui/key-value.tsx"],"sourcesContent":["\"use client\";\n\n/*\n * Port từ Dice UI (https://diceui.com/docs/components/key-value) — MIT, © 2024 Sadman Sakib.\n * Giữ nguyên cấu trúc thượng nguồn để còn đối chiếu ngược được; mọi chỗ đổi đều có chú thích.\n */\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Plus, X } from \"lucide-react\";\nimport * as React from \"react\";\nimport { useComitorLabels } from \"../../i18n/locale-provider.js\";\nimport { cn } from \"../../lib/cn.js\";\nimport { useComposedRefs } from \"../../lib/compose-refs.js\";\nimport { useAsRef } from \"../../lib/use-as-ref.js\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/use-isomorphic-layout-effect.js\";\nimport { useLazyRef } from \"../../lib/use-lazy-ref.js\";\nimport { VisuallyHiddenInput } from \"../../lib/visually-hidden-input.js\";\nimport { Button } from \"./button.js\";\nimport { Input } from \"./input.js\";\nimport type { KeyValueLabels } from \"./key-value-constants.js\";\nimport { Textarea } from \"./textarea.js\";\n\nconst ROOT_NAME = \"KeyValue\";\nconst LIST_NAME = \"KeyValueList\";\nconst ITEM_NAME = \"KeyValueItem\";\nconst KEY_INPUT_NAME = \"KeyValueKeyInput\";\nconst VALUE_INPUT_NAME = \"KeyValueValueInput\";\nconst REMOVE_NAME = \"KeyValueRemove\";\nconst ADD_NAME = \"KeyValueAdd\";\nconst ERROR_NAME = \"KeyValueError\";\n\ntype Orientation = \"vertical\" | \"horizontal\";\ntype Field = \"key\" | \"value\";\n\ninterface DivProps extends React.ComponentProps<\"div\"> {\n  asChild?: boolean;\n}\n\ntype RootElement = React.ComponentRef<typeof KeyValue>;\ntype KeyInputElement = React.ComponentRef<typeof KeyValueKeyInput>;\ntype RemoveElement = React.ComponentRef<typeof KeyValueRemove>;\ntype AddElement = React.ComponentRef<typeof KeyValueAdd>;\n\nfunction getErrorId(rootId: string, itemId: string, field: Field) {\n  return `${rootId}-${itemId}-${field}-error`;\n}\n\n/*\n * ⚠ Khác thượng nguồn: bản gốc gọi thẳng `crypto.randomUUID()`. Hàm đó chỉ tồn tại trong NGỮ CẢNH\n * AN TOÀN (HTTPS hoặc localhost) — mở trang quản trị qua `http://` bằng IP nội bộ là `TypeError`\n * ngay lúc render dòng đầu tiên. Id ở đây chỉ làm key của React và nối vào id của thông báo lỗi,\n * không cần ngẫu nhiên mật mã, nên có đường lui.\n */\nlet fallbackIdCounter = 0;\n\nfunction createItemId(): string {\n  if (typeof crypto !== \"undefined\" && typeof crypto.randomUUID === \"function\") {\n    return crypto.randomUUID();\n  }\n  fallbackIdCounter += 1;\n  return `kv-${Date.now().toString(36)}-${fallbackIdCounter}`;\n}\n\nfunction removeQuotes(string: string, shouldStrip: boolean): string {\n  if (!shouldStrip) return string;\n\n  const trimmed = string.trim();\n  if ((trimmed.startsWith('\"') && trimmed.endsWith('\"')) || (trimmed.startsWith(\"'\") && trimmed.endsWith(\"'\"))) {\n    return trimmed.slice(1, -1);\n  }\n  return trimmed;\n}\n\ninterface Store {\n  subscribe: (callback: () => void) => () => void;\n  getState: () => KeyValueState;\n  setState: <K extends keyof KeyValueState>(key: K, value: KeyValueState[K]) => void;\n  notify: () => void;\n}\n\nfunction useStore<T>(selector: (state: KeyValueState) => T, ogStore?: Store | null): T {\n  const contextStore = React.useContext(StoreContext);\n\n  const store = ogStore ?? contextStore;\n\n  if (!store) {\n    throw new Error(`\\`useKeyValueStore\\` phải được gọi bên trong \\`${ROOT_NAME}\\``);\n  }\n\n  const getSnapshot = React.useCallback(() => selector(store.getState()), [store, selector]);\n\n  return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);\n}\n\ninterface ItemData {\n  id: string;\n  key: string;\n  value: string;\n}\n\ninterface KeyValueState {\n  value: ItemData[];\n  focusedId: string | null;\n  errors: Record<string, { key?: string; value?: string }>;\n}\n\nconst StoreContext = React.createContext<Store | null>(null);\n\nfunction useStoreContext(consumerName: string) {\n  const context = React.useContext(StoreContext);\n  if (!context) {\n    throw new Error(`\\`${consumerName}\\` phải nằm bên trong \\`${ROOT_NAME}\\``);\n  }\n  return context;\n}\n\ninterface KeyValueContextValue {\n  onPaste?: (event: ClipboardEvent, items: ItemData[]) => void;\n  onAdd?: (value: ItemData) => void;\n  onRemove?: (value: ItemData) => void;\n  onKeyValidate?: (key: string, value: ItemData[]) => string | undefined;\n  onValueValidate?: (value: string, key: string, items: ItemData[]) => string | undefined;\n  rootId: string;\n  maxItems?: number;\n  minItems: number;\n  keyPlaceholder: string;\n  valuePlaceholder: string;\n  labels: KeyValueLabels;\n  allowDuplicateKeys: boolean;\n  enablePaste: boolean;\n  trim: boolean;\n  stripQuotes: boolean;\n  disabled: boolean;\n  readOnly: boolean;\n  required: boolean;\n}\n\nconst KeyValueContext = React.createContext<KeyValueContextValue | null>(null);\n\nfunction useKeyValueContext(consumerName: string) {\n  const context = React.useContext(KeyValueContext);\n  if (!context) {\n    throw new Error(`\\`${consumerName}\\` phải nằm bên trong \\`${ROOT_NAME}\\``);\n  }\n  return context;\n}\n\n/**\n * Ghi MỘT ô (khoá hoặc giá trị) của một dòng vào store rồi kiểm lỗi lại dòng đó. Dùng chung cho\n * hai ô nhập — trước `3.0.1` khối này chép nguyên hai lần, mỗi ô một bản.\n */\nfunction commitItemField(store: Store, context: KeyValueContextValue, itemId: string, field: Field, text: string) {\n  const state = store.getState();\n  const newValue = state.value.map((item) => (item.id === itemId ? { ...item, [field]: text } : item));\n\n  store.setState(\"value\", newValue);\n\n  const updatedItemData = newValue.find((item) => item.id === itemId);\n  if (!updatedItemData) return;\n\n  const errors: { key?: string; value?: string } = {};\n\n  if (context.onKeyValidate) {\n    const keyError = context.onKeyValidate(updatedItemData.key, newValue);\n    if (keyError) errors.key = keyError;\n  }\n\n  if (!context.allowDuplicateKeys) {\n    const duplicateKey = newValue.find(\n      (item) => item.id !== updatedItemData.id && item.key === updatedItemData.key && updatedItemData.key !== \"\"\n    );\n    if (duplicateKey) {\n      errors.key = context.labels.duplicateKey;\n    }\n  }\n\n  if (context.onValueValidate) {\n    const valueError = context.onValueValidate(updatedItemData.value, updatedItemData.key, newValue);\n    if (valueError) errors.value = valueError;\n  }\n\n  const newErrorsState = { ...state.errors };\n  if (Object.keys(errors).length > 0) {\n    newErrorsState[itemId] = errors;\n  } else {\n    delete newErrorsState[itemId];\n  }\n  store.setState(\"errors\", newErrorsState);\n}\n\n/*\n * ⚠ Khác thượng nguồn (3.0.1): với `trim`, Ô NHẬP hiện đúng chữ đang gõ, còn STORE nhận bản đã cắt.\n * Bản gốc cắt ngay trong `onChange` rồi đưa chính chuỗi đã cắt về lại ô, nên dấu cách vừa gõ ở cuối\n * biến mất trước khi chữ kế tiếp tới — với `trim` mặc định `true`, không gõ được \"Contract term\" hay\n * \"Bearer token\" theo cách bình thường (ra \"Contractterm\").\n * Mọi thứ app nhận (`onValueChange`, ô ẩn trong form, kiểm lỗi, trùng khoá) vẫn LUÔN là bản đã cắt,\n * đúng như bản gốc — kể cả khi Enter gửi form ngay sau một dấu cách. Chỉ phần hiển thị giữ khoảng\n * trắng, cho tới khi rời ô.\n */\nfunction useTrimDraft(committed: string) {\n  const [draft, setDraft] = React.useState<string | null>(null);\n  // Bản nháp chỉ được hiện khi nó còn khớp store: store đổi từ nơi khác (app đặt `value`, dán nhiều\n  // dòng) thì hiện giá trị mới.\n  const shown = draft !== null && draft.trim() === committed ? draft : committed;\n  return [shown, setDraft] as const;\n}\n\ninterface KeyValueProps extends Omit<DivProps, \"onPaste\" | \"defaultValue\"> {\n  id?: string;\n  defaultValue?: ItemData[];\n  value?: ItemData[];\n  onValueChange?: (value: ItemData[]) => void;\n  maxItems?: number;\n  minItems?: number;\n  /** Placeholder của ô khoá — thắng `labels.keyPlaceholder` (mặc định \"Key\"). */\n  keyPlaceholder?: string;\n  /** Placeholder của ô giá trị — thắng `labels.valuePlaceholder` (mặc định \"Value\"). */\n  valuePlaceholder?: string;\n  /**\n   * Chuỗi hiển thị và chuỗi cho trình đọc màn hình — truyền MỘT PHẦN là đủ, phần còn lại theo\n   * namespace `keyValue` của `ComitorLocaleProvider` (mặc định tiếng Anh). ⚠ Thêm so với thượng\n   * nguồn (bản gốc chôn cứng \"Add\" / \"Duplicate key\" và để nút xoá không có tên).\n   */\n  labels?: Partial<KeyValueLabels>;\n  name?: string;\n  allowDuplicateKeys?: boolean;\n  enablePaste?: boolean;\n  trim?: boolean;\n  stripQuotes?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  onPaste?: (event: ClipboardEvent, items: ItemData[]) => void;\n  onAdd?: (value: ItemData) => void;\n  onRemove?: (value: ItemData) => void;\n  onKeyValidate?: (key: string, value: ItemData[]) => string | undefined;\n  onValueValidate?: (value: string, key: string, items: ItemData[]) => string | undefined;\n}\n\n/**\n * KeyValue — danh sách cặp khoá/giá trị sửa được: trường tuỳ biến của bản ghi CRM, header /\n * metadata của webhook ở trang quản trị. Dán nhiều dòng `KEY=value` (hoặc `KEY: value`, hoặc\n * cách bằng tab) vào ô khoá là tách thành nhiều cặp.\n */\nfunction KeyValue(props: KeyValueProps) {\n  const {\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    onPaste,\n    onAdd,\n    onRemove,\n    onKeyValidate,\n    onValueValidate,\n    maxItems,\n    minItems = 0,\n    labels: labelsProp,\n    keyPlaceholder: keyPlaceholderProp,\n    valuePlaceholder: valuePlaceholderProp,\n    allowDuplicateKeys = false,\n    asChild,\n    enablePaste = true,\n    trim = true,\n    stripQuotes = true,\n    disabled = false,\n    readOnly = false,\n    required = false,\n    className,\n    id,\n    name,\n    ref,\n    ...rootProps\n  } = props;\n\n  const instanceId = React.useId();\n  const rootId = id ?? instanceId;\n\n  const labels = useComitorLabels(\"keyValue\", labelsProp);\n  const keyPlaceholder = keyPlaceholderProp ?? labels.keyPlaceholder;\n  const valuePlaceholder = valuePlaceholderProp ?? labels.valuePlaceholder;\n\n  const [formTrigger, setFormTrigger] = React.useState<RootElement | null>(null);\n  const composedRef = useComposedRefs(ref, (node) => setFormTrigger(node));\n  const isFormControl = formTrigger ? !!formTrigger.closest(\"form\") : true;\n\n  const listenersRef = useLazyRef(() => new Set<() => void>());\n  const stateRef = useLazyRef<KeyValueState>(() => ({\n    value: valueProp ?? defaultValue ?? [{ id: createItemId(), key: \"\", value: \"\" }],\n    focusedId: null,\n    errors: {}\n  }));\n  const propsRef = useAsRef({ onValueChange });\n\n  const store = React.useMemo<Store>(() => {\n    return {\n      subscribe: (cb) => {\n        listenersRef.current.add(cb);\n        return () => listenersRef.current.delete(cb);\n      },\n      getState: () => stateRef.current,\n      setState: (key, val) => {\n        if (Object.is(stateRef.current[key], val)) return;\n\n        if (key === \"value\" && Array.isArray(val)) {\n          stateRef.current.value = val as ItemData[];\n          propsRef.current.onValueChange?.(val as ItemData[]);\n        } else {\n          stateRef.current[key] = val;\n        }\n\n        store.notify();\n      },\n      notify: () => {\n        for (const cb of listenersRef.current) {\n          cb();\n        }\n      }\n    };\n  }, [listenersRef, stateRef, propsRef]);\n\n  const value = useStore((state) => state.value, store);\n  const errors = useStore((state) => state.errors, store);\n  const isInvalid = Object.keys(errors).length > 0;\n\n  useIsomorphicLayoutEffect(() => {\n    if (valueProp !== undefined) {\n      store.setState(\"value\", valueProp);\n    }\n  }, [valueProp]);\n\n  const contextValue = React.useMemo<KeyValueContextValue>(\n    () => ({\n      onPaste,\n      onAdd,\n      onRemove,\n      onKeyValidate,\n      onValueValidate,\n      rootId,\n      maxItems,\n      minItems,\n      keyPlaceholder,\n      valuePlaceholder,\n      labels,\n      allowDuplicateKeys,\n      enablePaste,\n      trim,\n      stripQuotes,\n      disabled,\n      readOnly,\n      required\n    }),\n    [\n      onPaste,\n      onAdd,\n      onRemove,\n      onKeyValidate,\n      onValueValidate,\n      rootId,\n      disabled,\n      readOnly,\n      required,\n      maxItems,\n      minItems,\n      keyPlaceholder,\n      valuePlaceholder,\n      labels,\n      allowDuplicateKeys,\n      enablePaste,\n      trim,\n      stripQuotes\n    ]\n  );\n\n  const RootPrimitive = asChild ? Slot : \"div\";\n\n  return (\n    <StoreContext.Provider value={store}>\n      <KeyValueContext.Provider value={contextValue}>\n        <RootPrimitive\n          id={id}\n          data-slot=\"key-value\"\n          data-disabled={disabled ? \"\" : undefined}\n          data-invalid={isInvalid ? \"\" : undefined}\n          data-readonly={readOnly ? \"\" : undefined}\n          {...rootProps}\n          ref={composedRef}\n          className={cn(\"flex flex-col gap-2\", className)}\n        />\n        {isFormControl && (\n          <VisuallyHiddenInput\n            type=\"hidden\"\n            control={formTrigger}\n            name={name}\n            value={value}\n            disabled={disabled}\n            readOnly={readOnly}\n            required={required}\n          />\n        )}\n      </KeyValueContext.Provider>\n    </StoreContext.Provider>\n  );\n}\n\ninterface KeyValueListProps extends DivProps {\n  orientation?: Orientation;\n}\n\nfunction KeyValueList(props: KeyValueListProps) {\n  const { orientation = \"vertical\", asChild, className, ...listProps } = props;\n\n  const value = useStore((state) => state.value);\n\n  const ListPrimitive = asChild ? Slot : \"div\";\n\n  return (\n    <ListPrimitive\n      role=\"list\"\n      /*\n       * ⚠ Khác thượng nguồn (a11y): bỏ `aria-orientation`. Thuộc tính đó KHÔNG được phép trên\n       * `role=\"list\"` (ARIA 1.2 chỉ cho nó ở listbox, menu, tablist, toolbar, radiogroup, slider…)\n       * — axe báo `aria-allowed-attr`. Hướng vẫn còn ở `data-orientation` cho CSS.\n       */\n      data-slot=\"key-value-list\"\n      data-orientation={orientation}\n      {...listProps}\n      className={cn(\"flex\", orientation === \"vertical\" ? \"flex-col gap-2\" : \"flex-row gap-2\", className)}\n    >\n      {value.map((item) => {\n        const children = React.Children.toArray(props.children);\n\n        return (\n          <KeyValueItemContext.Provider key={item.id} value={item}>\n            {children}\n          </KeyValueItemContext.Provider>\n        );\n      })}\n    </ListPrimitive>\n  );\n}\n\nconst KeyValueItemContext = React.createContext<ItemData | null>(null);\n\nfunction useKeyValueItemContext(consumerName: string) {\n  const context = React.useContext(KeyValueItemContext);\n  if (!context) {\n    throw new Error(`\\`${consumerName}\\` phải nằm bên trong \\`${LIST_NAME}\\``);\n  }\n  return context;\n}\n\ninterface KeyValueItemProps extends React.ComponentProps<\"div\"> {\n  asChild?: boolean;\n}\n\nfunction KeyValueItem(props: KeyValueItemProps) {\n  const { asChild, className, ...itemProps } = props;\n  const itemData = useKeyValueItemContext(ITEM_NAME);\n\n  const focusedId = useStore((state) => state.focusedId);\n\n  const ItemPrimitive = asChild ? Slot : \"div\";\n\n  return (\n    <ItemPrimitive\n      role=\"listitem\"\n      data-slot=\"key-value-item\"\n      data-highlighted={focusedId === itemData.id ? \"\" : undefined}\n      {...itemProps}\n      className={cn(\"flex items-start gap-2\", className)}\n    />\n  );\n}\n\ninterface KeyValueKeyInputProps extends React.ComponentProps<\"input\"> {\n  asChild?: boolean;\n}\n\nfunction KeyValueKeyInput(props: KeyValueKeyInputProps) {\n  const {\n    onChange: onChangeProp,\n    onBlur: onBlurProp,\n    onPaste: onPasteProp,\n    asChild,\n    disabled,\n    readOnly,\n    required,\n    ref,\n    ...keyInputProps\n  } = props;\n\n  const context = useKeyValueContext(KEY_INPUT_NAME);\n  const itemData = useKeyValueItemContext(KEY_INPUT_NAME);\n  const store = useStoreContext(KEY_INPUT_NAME);\n  const errors = useStore((state) => state.errors);\n  const focusedId = useStore((state) => state.focusedId);\n\n  const inputRef = React.useRef<KeyInputElement>(null);\n  const composedRef = useComposedRefs(ref, inputRef);\n\n  /*\n   * ⚠ Khác thượng nguồn (a11y): `KeyValueAdd` ghi id dòng mới vào `focusedId` nhưng bản gốc không\n   * bao giờ dùng nó để đưa focus — bấm \"Thêm\" xong focus vẫn đứng ở nút, người dùng bàn phím phải\n   * tự Tab ngược lên dòng vừa thêm. Ở đây ô KHOÁ của dòng mới tự nhận focus. Chỉ chạy khi\n   * `focusedId` ĐỔI sang dòng này (mà chỉ `KeyValueAdd` ghi nó), nên dòng có sẵn lúc mount và dòng\n   * sinh ra do dán không bị cướp focus.\n   */\n  React.useEffect(() => {\n    if (focusedId === itemData.id) {\n      inputRef.current?.focus();\n    }\n  }, [focusedId, itemData.id]);\n\n  const propsRef = useAsRef({\n    onChange: onChangeProp,\n    onBlur: onBlurProp,\n    onPaste: onPasteProp\n  });\n\n  const isDisabled = disabled || context.disabled;\n  const isReadOnly = readOnly || context.readOnly;\n  const isRequired = required || context.required;\n  const isInvalid = errors[itemData.id]?.key !== undefined;\n  const [shownKey, setKeyDraft] = useTrimDraft(itemData.key);\n\n  const onChange = React.useCallback(\n    (event: React.ChangeEvent<KeyInputElement>) => {\n      const text = event.target.value;\n      if (context.trim) setKeyDraft(text);\n      commitItemField(store, context, itemData.id, \"key\", context.trim ? text.trim() : text);\n      propsRef.current.onChange?.(event);\n    },\n    [store, itemData.id, context, propsRef, setKeyDraft]\n  );\n\n  const onBlur = React.useCallback(\n    (event: React.FocusEvent<KeyInputElement>) => {\n      propsRef.current.onBlur?.(event);\n      setKeyDraft(null);\n    },\n    [propsRef, setKeyDraft]\n  );\n\n  const onPaste = React.useCallback(\n    (event: React.ClipboardEvent<KeyInputElement>) => {\n      if (!context.enablePaste) return;\n\n      propsRef.current.onPaste?.(event);\n      if (event.defaultPrevented) return;\n\n      const content = event.clipboardData.getData(\"text\");\n      const lines = content.split(/\\r?\\n/).filter((line) => line.trim());\n\n      if (lines.length > 1) {\n        event.preventDefault();\n\n        const parsed: ItemData[] = [];\n\n        for (const line of lines) {\n          let key = \"\";\n          let value = \"\";\n\n          if (line.includes(\"=\")) {\n            const parts = line.split(\"=\");\n            key = parts[0]?.trim() ?? \"\";\n            value = removeQuotes(parts.slice(1).join(\"=\").trim(), context.stripQuotes);\n          } else if (line.includes(\":\")) {\n            const parts = line.split(\":\");\n            key = parts[0]?.trim() ?? \"\";\n            value = removeQuotes(parts.slice(1).join(\":\").trim(), context.stripQuotes);\n          } else if (/\\s{2,}|\\t/.test(line)) {\n            const parts = line.split(/\\s{2,}|\\t/);\n            key = parts[0]?.trim() ?? \"\";\n            value = removeQuotes(parts.slice(1).join(\" \").trim(), context.stripQuotes);\n          }\n\n          if (key) {\n            parsed.push({ id: createItemId(), key, value });\n          }\n        }\n\n        if (parsed.length > 0) {\n          const state = store.getState();\n          const currentIndex = state.value.findIndex((item) => item.id === itemData.id);\n\n          let newValue: ItemData[];\n          if (itemData.key === \"\" && itemData.value === \"\") {\n            newValue = [...state.value.slice(0, currentIndex), ...parsed, ...state.value.slice(currentIndex + 1)];\n          } else {\n            newValue = [...state.value.slice(0, currentIndex + 1), ...parsed, ...state.value.slice(currentIndex + 1)];\n          }\n\n          if (context.maxItems !== undefined) {\n            newValue = newValue.slice(0, context.maxItems);\n          }\n\n          store.setState(\"value\", newValue);\n\n          if (context.onPaste) {\n            context.onPaste(event.nativeEvent as unknown as ClipboardEvent, parsed);\n          }\n        }\n      }\n    },\n    [context, store, itemData, propsRef]\n  );\n\n  const KeyInputPrimitive = asChild ? Slot : Input;\n\n  return (\n    <KeyInputPrimitive\n      aria-invalid={isInvalid}\n      aria-describedby={isInvalid ? getErrorId(context.rootId, itemData.id, \"key\") : undefined}\n      data-slot=\"key-value-key-input\"\n      autoCapitalize=\"off\"\n      autoComplete=\"off\"\n      autoCorrect=\"off\"\n      spellCheck=\"false\"\n      disabled={isDisabled}\n      readOnly={isReadOnly}\n      required={isRequired}\n      placeholder={context.keyPlaceholder}\n      {...keyInputProps}\n      ref={composedRef}\n      value={shownKey}\n      onChange={onChange}\n      onBlur={onBlur}\n      onPaste={onPaste}\n    />\n  );\n}\n\ninterface KeyValueValueInputProps extends Omit<React.ComponentProps<\"textarea\">, \"rows\"> {\n  maxRows?: number;\n  asChild?: boolean;\n}\n\nfunction KeyValueValueInput(props: KeyValueValueInputProps) {\n  const {\n    onChange: onChangeProp,\n    onBlur: onBlurProp,\n    asChild,\n    disabled,\n    readOnly,\n    required,\n    className,\n    maxRows,\n    style,\n    ...valueInputProps\n  } = props;\n\n  const context = useKeyValueContext(VALUE_INPUT_NAME);\n  const itemData = useKeyValueItemContext(VALUE_INPUT_NAME);\n  const store = useStoreContext(VALUE_INPUT_NAME);\n  const errors = useStore((state) => state.errors);\n\n  const propsRef = useAsRef({\n    onChange: onChangeProp,\n    onBlur: onBlurProp\n  });\n\n  const isDisabled = disabled || context.disabled;\n  const isReadOnly = readOnly || context.readOnly;\n  const isRequired = required || context.required;\n  const isInvalid = errors[itemData.id]?.value !== undefined;\n  const maxHeight = maxRows ? `calc(${maxRows} * 1.5em + 1rem)` : undefined;\n  const [shownValue, setValueDraft] = useTrimDraft(itemData.value);\n\n  const onChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n      propsRef.current.onChange?.(event);\n      const text = event.target.value;\n      if (context.trim) setValueDraft(text);\n      commitItemField(store, context, itemData.id, \"value\", context.trim ? text.trim() : text);\n    },\n    [store, itemData.id, context, propsRef, setValueDraft]\n  );\n\n  const onBlur = React.useCallback(\n    (event: React.FocusEvent<HTMLTextAreaElement>) => {\n      propsRef.current.onBlur?.(event);\n      setValueDraft(null);\n    },\n    [propsRef, setValueDraft]\n  );\n\n  const ValueInputPrimitive = asChild ? Slot : Textarea;\n\n  return (\n    <ValueInputPrimitive\n      aria-invalid={isInvalid}\n      aria-describedby={isInvalid ? getErrorId(context.rootId, itemData.id, \"value\") : undefined}\n      data-slot=\"key-value-value-input\"\n      autoCapitalize=\"off\"\n      autoComplete=\"off\"\n      autoCorrect=\"off\"\n      spellCheck=\"false\"\n      disabled={isDisabled}\n      readOnly={isReadOnly}\n      required={isRequired}\n      placeholder={context.valuePlaceholder}\n      {...valueInputProps}\n      className={cn(\n        /*\n         * ⚠ Khác thượng nguồn: ô giá trị phải trông như ô khoá (`Input`) đứng ngay cạnh khi còn MỘT\n         * dòng. `Textarea` của gói theo comitor-ds: `text-base md:text-sm` + `py-2` (cao 38px ở\n         * desktop, 42px và chữ 16px ở mobile), nền `bg-transparent dark:bg-input-fill`, có\n         * `shadow-xs`; còn `Input` là `h-9 bg-background`, không bóng. Ghi đè ở ĐÂY chứ không sửa\n         * hai primitive: cùng cỡ chữ với mọi ô nhập (`text-base md:text-sm`), `min-h-9` + `py-1.5` (dòng chữ 20px cách\n         * mép trên 7px — đúng chỗ `Input` căn giữa dòng chữ trong 36px), `bg-background` ở cả hai\n         * theme, bỏ bóng. Nhiều dòng thì `field-sizing-content` vẫn cho ô cao dần như cũ.\n         */\n        \"field-sizing-content min-h-9 resize-none py-1.5 text-base md:text-sm bg-background dark:bg-background shadow-none\",\n        maxRows && \"overflow-y-auto\",\n        className\n      )}\n      style={{\n        ...style,\n        ...(maxHeight && { maxHeight })\n      }}\n      value={shownValue}\n      onChange={onChange}\n      onBlur={onBlur}\n    />\n  );\n}\n\ninterface KeyValueRemoveProps extends React.ComponentProps<typeof Button> {}\n\nfunction KeyValueRemove(props: KeyValueRemoveProps) {\n  const { onClick: onClickProp, children, className, ...removeProps } = props;\n\n  const context = useKeyValueContext(REMOVE_NAME);\n  const itemData = useKeyValueItemContext(REMOVE_NAME);\n  const store = useStoreContext(REMOVE_NAME);\n\n  const propsRef = useAsRef({\n    onClick: onClickProp\n  });\n  const value = useStore((state) => state.value);\n  const isDisabled = context.disabled || value.length <= context.minItems;\n  const itemIndex = value.findIndex((item) => item.id === itemData.id);\n\n  const onClick = React.useCallback(\n    (event: React.MouseEvent<RemoveElement>) => {\n      propsRef.current.onClick?.(event);\n\n      const state = store.getState();\n      if (state.value.length <= context.minItems) return;\n\n      const itemToRemove = state.value.find((item) => item.id === itemData.id);\n      if (!itemToRemove) return;\n\n      /*\n       * ⚠ Khác thượng nguồn (a11y): nút đang giữ focus biến mất cùng dòng của nó, và focus rơi về\n       * `<body>` — người dùng bàn phím phải Tab lại từ đầu trang (WCAG 2.4.3). Nếu nút có focus lúc\n       * bấm thì sau khi xoá, đưa focus sang nút xoá của dòng kế (hoặc dòng trước nếu vừa xoá dòng\n       * cuối), không còn nút nào dùng được thì sang nút thêm.\n       */\n      const button = event.currentTarget;\n      const hadFocus = button.ownerDocument.activeElement === button;\n      const root = button.closest<HTMLElement>('[data-slot=\"key-value\"]');\n      const removedIndex = state.value.indexOf(itemToRemove);\n\n      const newValue = state.value.filter((item) => item.id !== itemData.id);\n      const newErrors = { ...state.errors };\n      delete newErrors[itemData.id];\n\n      store.setState(\"value\", newValue);\n      store.setState(\"errors\", newErrors);\n\n      context.onRemove?.(itemToRemove);\n\n      if (hadFocus && root) {\n        requestAnimationFrame(() => {\n          const removeButtons = root.querySelectorAll<HTMLElement>('[data-slot=\"key-value-remove\"]:not(:disabled)');\n          const nextTarget =\n            removeButtons[Math.min(removedIndex, removeButtons.length - 1)] ??\n            root.querySelector<HTMLElement>('[data-slot=\"key-value-add\"]:not(:disabled)');\n          nextTarget?.focus();\n        });\n      }\n    },\n    [store, context, itemData.id, propsRef]\n  );\n\n  return (\n    <Button\n      type=\"button\"\n      data-slot=\"key-value-remove\"\n      variant=\"outline\"\n      size=\"icon\"\n      /*\n       * ⚠ Khác thượng nguồn (a11y): nút chỉ có icon ✕ và bản gốc không đặt tên nào — trình đọc màn\n       * hình đọc \"nút\" trơn, lặp lại ở mọi dòng. Tên mặc định nói RÕ dòng nào: \"Remove API_KEY\",\n       * hoặc \"Remove row 3\" khi khoá còn trống. Đổi qua `labels.remove` của `KeyValue`, hoặc `aria-label`.\n       */\n      aria-label={context.labels.remove(itemData.key, itemIndex + 1)}\n      disabled={isDisabled}\n      {...removeProps}\n      // ⚠ Khác thượng nguồn: `shrink-0` — nút là mục flex cạnh hai ô `w-full`; thiếu nó thì flex\n      // bóp nút còn ~18×36px. `size=\"icon\"` của `Button` đã là ô vuông 36×36 (`h-9 w-9`).\n      className={cn(\"shrink-0\", className)}\n      onClick={onClick}\n    >\n      {/* `size-4`: `Button` của gói không tự đặt cỡ cho svg con như shadcn — thiếu là icon 24px. */}\n      {children ?? <X aria-hidden=\"true\" className=\"size-4\" />}\n    </Button>\n  );\n}\n\ntype KeyValueAddProps = React.ComponentProps<typeof Button>;\n\nfunction KeyValueAdd(props: KeyValueAddProps) {\n  const { onClick: onClickProp, children, ...addProps } = props;\n\n  const context = useKeyValueContext(ADD_NAME);\n  const store = useStoreContext(ADD_NAME);\n\n  const propsRef = useAsRef({\n    onClick: onClickProp\n  });\n  const value = useStore((state) => state.value);\n  const isDisabled = context.disabled || (context.maxItems !== undefined && value.length >= context.maxItems);\n\n  const onClick = React.useCallback(\n    (event: React.MouseEvent<AddElement>) => {\n      propsRef.current.onClick?.(event);\n\n      const state = store.getState();\n      if (context.maxItems !== undefined && state.value.length >= context.maxItems) {\n        return;\n      }\n\n      const newItem: ItemData = {\n        id: createItemId(),\n        key: \"\",\n        value: \"\"\n      };\n\n      const newValue = [...state.value, newItem];\n      store.setState(\"value\", newValue);\n      store.setState(\"focusedId\", newItem.id);\n\n      context.onAdd?.(newItem);\n    },\n    [store, context, propsRef]\n  );\n\n  return (\n    <Button\n      type=\"button\"\n      data-slot=\"key-value-add\"\n      variant=\"outline\"\n      disabled={isDisabled}\n      {...addProps}\n      onClick={onClick}\n    >\n      {children ?? (\n        <>\n          <Plus aria-hidden=\"true\" className=\"size-4\" />\n          {context.labels.add}\n        </>\n      )}\n    </Button>\n  );\n}\n\ninterface KeyValueErrorProps extends DivProps {\n  field: Field;\n}\n\nfunction KeyValueError(props: KeyValueErrorProps) {\n  const { field, asChild, className, ...errorProps } = props;\n\n  const context = useKeyValueContext(ERROR_NAME);\n  const itemData = useKeyValueItemContext(ERROR_NAME);\n\n  const errors = useStore((state) => state.errors);\n  const error = errors[itemData.id]?.[field];\n\n  if (!error) return null;\n\n  const ErrorPrimitive = asChild ? Slot : \"span\";\n\n  return (\n    <ErrorPrimitive\n      id={getErrorId(context.rootId, itemData.id, field)}\n      role=\"alert\"\n      {...errorProps}\n      className={cn(\n        // ⚠ Khác thượng nguồn: `text-destructive` (bậc TÔ NỀN) → `text-destructive-ink`, bậc dành\n        // cho chữ trên nền trang — cùng token với chữ lỗi của `Input`.\n        \"text-sm font-medium text-destructive-ink\",\n        className\n      )}\n    >\n      {error}\n    </ErrorPrimitive>\n  );\n}\n\nexport {\n  type ItemData as KeyValueItemData,\n  KeyValue,\n  KeyValueAdd,\n  type KeyValueAddProps,\n  KeyValueError,\n  type KeyValueErrorProps,\n  KeyValueItem,\n  type KeyValueItemProps,\n  KeyValueKeyInput,\n  type KeyValueKeyInputProps,\n  KeyValueList,\n  type KeyValueListProps,\n  type KeyValueProps,\n  KeyValueRemove,\n  type KeyValueRemoveProps,\n  KeyValueValueInput,\n  type KeyValueValueInputProps,\n  useStore as useKeyValueStore\n};\n"],"mappings":";AAyXM,SAkeE,UAjeA,KADF;AAlXN,SAAS,YAAY;AACrB,SAAS,MAAM,SAAS;AACxB,YAAY,WAAW;AACvB,SAAS,wBAAwB;AACjC,SAAS,UAAU;AACnB,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,iCAAiC;AAC1C,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AACpC,SAAS,cAAc;AACvB,SAAS,aAAa;AAEtB,SAAS,gBAAgB;AAEzB,MAAM,YAAY;AAClB,MAAM,YAAY;AAClB,MAAM,YAAY;AAClB,MAAM,iBAAiB;AACvB,MAAM,mBAAmB;AACzB,MAAM,cAAc;AACpB,MAAM,WAAW;AACjB,MAAM,aAAa;AAcnB,SAAS,WAAW,QAAgB,QAAgB,OAAc;AAChE,SAAO,GAAG,MAAM,IAAI,MAAM,IAAI,KAAK;AACrC;AAQA,IAAI,oBAAoB;AAExB,SAAS,eAAuB;AAC9B,MAAI,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,YAAY;AAC5E,WAAO,OAAO,WAAW;AAAA,EAC3B;AACA,uBAAqB;AACrB,SAAO,MAAM,KAAK,IAAI,EAAE,SAAS,EAAE,CAAC,IAAI,iBAAiB;AAC3D;AAEA,SAAS,aAAa,QAAgB,aAA8B;AAClE,MAAI,CAAC,YAAa,QAAO;AAEzB,QAAM,UAAU,OAAO,KAAK;AAC5B,MAAK,QAAQ,WAAW,GAAG,KAAK,QAAQ,SAAS,GAAG,KAAO,QAAQ,WAAW,GAAG,KAAK,QAAQ,SAAS,GAAG,GAAI;AAC5G,WAAO,QAAQ,MAAM,GAAG,EAAE;AAAA,EAC5B;AACA,SAAO;AACT;AASA,SAAS,SAAY,UAAuC,SAA2B;AACrF,QAAM,eAAe,MAAM,WAAW,YAAY;AAElD,QAAM,QAAQ,WAAW;AAEzB,MAAI,CAAC,OAAO;AACV,UAAM,IAAI,MAAM,8EAAkD,SAAS,IAAI;AAAA,EACjF;AAEA,QAAM,cAAc,MAAM,YAAY,MAAM,SAAS,MAAM,SAAS,CAAC,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEzF,SAAO,MAAM,qBAAqB,MAAM,WAAW,aAAa,WAAW;AAC7E;AAcA,MAAM,eAAe,MAAM,cAA4B,IAAI;AAE3D,SAAS,gBAAgB,cAAsB;AAC7C,QAAM,UAAU,MAAM,WAAW,YAAY;AAC7C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,KAAK,YAAY,wCAA2B,SAAS,IAAI;AAAA,EAC3E;AACA,SAAO;AACT;AAuBA,MAAM,kBAAkB,MAAM,cAA2C,IAAI;AAE7E,SAAS,mBAAmB,cAAsB;AAChD,QAAM,UAAU,MAAM,WAAW,eAAe;AAChD,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,KAAK,YAAY,wCAA2B,SAAS,IAAI;AAAA,EAC3E;AACA,SAAO;AACT;AAMA,SAAS,gBAAgB,OAAc,SAA+B,QAAgB,OAAc,MAAc;AAChH,QAAM,QAAQ,MAAM,SAAS;AAC7B,QAAM,WAAW,MAAM,MAAM,IAAI,CAAC,SAAU,KAAK,OAAO,SAAS,EAAE,GAAG,MAAM,CAAC,KAAK,GAAG,KAAK,IAAI,IAAK;AAEnG,QAAM,SAAS,SAAS,QAAQ;AAEhC,QAAM,kBAAkB,SAAS,KAAK,CAAC,SAAS,KAAK,OAAO,MAAM;AAClE,MAAI,CAAC,gBAAiB;AAEtB,QAAM,SAA2C,CAAC;AAElD,MAAI,QAAQ,eAAe;AACzB,UAAM,WAAW,QAAQ,cAAc,gBAAgB,KAAK,QAAQ;AACpE,QAAI,SAAU,QAAO,MAAM;AAAA,EAC7B;AAEA,MAAI,CAAC,QAAQ,oBAAoB;AAC/B,UAAM,eAAe,SAAS;AAAA,MAC5B,CAAC,SAAS,KAAK,OAAO,gBAAgB,MAAM,KAAK,QAAQ,gBAAgB,OAAO,gBAAgB,QAAQ;AAAA,IAC1G;AACA,QAAI,cAAc;AAChB,aAAO,MAAM,QAAQ,OAAO;AAAA,IAC9B;AAAA,EACF;AAEA,MAAI,QAAQ,iBAAiB;AAC3B,UAAM,aAAa,QAAQ,gBAAgB,gBAAgB,OAAO,gBAAgB,KAAK,QAAQ;AAC/F,QAAI,WAAY,QAAO,QAAQ;AAAA,EACjC;AAEA,QAAM,iBAAiB,EAAE,GAAG,MAAM,OAAO;AACzC,MAAI,OAAO,KAAK,MAAM,EAAE,SAAS,GAAG;AAClC,mBAAe,MAAM,IAAI;AAAA,EAC3B,OAAO;AACL,WAAO,eAAe,MAAM;AAAA,EAC9B;AACA,QAAM,SAAS,UAAU,cAAc;AACzC;AAWA,SAAS,aAAa,WAAmB;AACvC,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAwB,IAAI;AAG5D,QAAM,QAAQ,UAAU,QAAQ,MAAM,KAAK,MAAM,YAAY,QAAQ;AACrE,SAAO,CAAC,OAAO,QAAQ;AACzB;AAuCA,SAAS,SAAS,OAAsB;AACtC,QAAM;AAAA,IACJ,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,kBAAkB;AAAA,IAClB,qBAAqB;AAAA,IACrB;AAAA,IACA,cAAc;AAAA,IACd,OAAO;AAAA,IACP,cAAc;AAAA,IACd,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,aAAa,MAAM,MAAM;AAC/B,QAAM,SAAS,MAAM;AAErB,QAAM,SAAS,iBAAiB,YAAY,UAAU;AACtD,QAAM,iBAAiB,sBAAsB,OAAO;AACpD,QAAM,mBAAmB,wBAAwB,OAAO;AAExD,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAA6B,IAAI;AAC7E,QAAM,cAAc,gBAAgB,KAAK,CAAC,SAAS,eAAe,IAAI,CAAC;AACvE,QAAM,gBAAgB,cAAc,CAAC,CAAC,YAAY,QAAQ,MAAM,IAAI;AAEpE,QAAM,eAAe,WAAW,MAAM,oBAAI,IAAgB,CAAC;AAC3D,QAAM,WAAW,WAA0B,OAAO;AAAA,IAChD,OAAO,aAAa,gBAAgB,CAAC,EAAE,IAAI,aAAa,GAAG,KAAK,IAAI,OAAO,GAAG,CAAC;AAAA,IAC/E,WAAW;AAAA,IACX,QAAQ,CAAC;AAAA,EACX,EAAE;AACF,QAAM,WAAW,SAAS,EAAE,cAAc,CAAC;AAE3C,QAAM,QAAQ,MAAM,QAAe,MAAM;AACvC,WAAO;AAAA,MACL,WAAW,CAAC,OAAO;AACjB,qBAAa,QAAQ,IAAI,EAAE;AAC3B,eAAO,MAAM,aAAa,QAAQ,OAAO,EAAE;AAAA,MAC7C;AAAA,MACA,UAAU,MAAM,SAAS;AAAA,MACzB,UAAU,CAAC,KAAK,QAAQ;AACtB,YAAI,OAAO,GAAG,SAAS,QAAQ,GAAG,GAAG,GAAG,EAAG;AAE3C,YAAI,QAAQ,WAAW,MAAM,QAAQ,GAAG,GAAG;AACzC,mBAAS,QAAQ,QAAQ;AACzB,mBAAS,QAAQ,gBAAgB,GAAiB;AAAA,QACpD,OAAO;AACL,mBAAS,QAAQ,GAAG,IAAI;AAAA,QAC1B;AAEA,cAAM,OAAO;AAAA,MACf;AAAA,MACA,QAAQ,MAAM;AACZ,mBAAW,MAAM,aAAa,SAAS;AACrC,aAAG;AAAA,QACL;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,cAAc,UAAU,QAAQ,CAAC;AAErC,QAAM,QAAQ,SAAS,CAAC,UAAU,MAAM,OAAO,KAAK;AACpD,QAAM,SAAS,SAAS,CAAC,UAAU,MAAM,QAAQ,KAAK;AACtD,QAAM,YAAY,OAAO,KAAK,MAAM,EAAE,SAAS;AAE/C,4BAA0B,MAAM;AAC9B,QAAI,cAAc,QAAW;AAC3B,YAAM,SAAS,SAAS,SAAS;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,eAAe,MAAM;AAAA,IACzB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,gBAAgB,UAAU,OAAO;AAEvC,SACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,OAC5B,+BAAC,gBAAgB,UAAhB,EAAyB,OAAO,cAC/B;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,aAAU;AAAA,QACV,iBAAe,WAAW,KAAK;AAAA,QAC/B,gBAAc,YAAY,KAAK;AAAA,QAC/B,iBAAe,WAAW,KAAK;AAAA,QAC9B,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,WAAW,GAAG,uBAAuB,SAAS;AAAA;AAAA,IAChD;AAAA,IACC,iBACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KAEJ,GACF;AAEJ;AAMA,SAAS,aAAa,OAA0B;AAC9C,QAAM,EAAE,cAAc,YAAY,SAAS,WAAW,GAAG,UAAU,IAAI;AAEvE,QAAM,QAAQ,SAAS,CAAC,UAAU,MAAM,KAAK;AAE7C,QAAM,gBAAgB,UAAU,OAAO;AAEvC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MAML,aAAU;AAAA,MACV,oBAAkB;AAAA,MACjB,GAAG;AAAA,MACJ,WAAW,GAAG,QAAQ,gBAAgB,aAAa,mBAAmB,kBAAkB,SAAS;AAAA,MAEhG,gBAAM,IAAI,CAAC,SAAS;AACnB,cAAM,WAAW,MAAM,SAAS,QAAQ,MAAM,QAAQ;AAEtD,eACE,oBAAC,oBAAoB,UAApB,EAA2C,OAAO,MAChD,YADgC,KAAK,EAExC;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;AAEA,MAAM,sBAAsB,MAAM,cAA+B,IAAI;AAErE,SAAS,uBAAuB,cAAsB;AACpD,QAAM,UAAU,MAAM,WAAW,mBAAmB;AACpD,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,KAAK,YAAY,wCAA2B,SAAS,IAAI;AAAA,EAC3E;AACA,SAAO;AACT;AAMA,SAAS,aAAa,OAA0B;AAC9C,QAAM,EAAE,SAAS,WAAW,GAAG,UAAU,IAAI;AAC7C,QAAM,WAAW,uBAAuB,SAAS;AAEjD,QAAM,YAAY,SAAS,CAAC,UAAU,MAAM,SAAS;AAErD,QAAM,gBAAgB,UAAU,OAAO;AAEvC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,oBAAkB,cAAc,SAAS,KAAK,KAAK;AAAA,MAClD,GAAG;AAAA,MACJ,WAAW,GAAG,0BAA0B,SAAS;AAAA;AAAA,EACnD;AAEJ;AAMA,SAAS,iBAAiB,OAA8B;AACtD,QAAM;AAAA,IACJ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,UAAU,mBAAmB,cAAc;AACjD,QAAM,WAAW,uBAAuB,cAAc;AACtD,QAAM,QAAQ,gBAAgB,cAAc;AAC5C,QAAM,SAAS,SAAS,CAAC,UAAU,MAAM,MAAM;AAC/C,QAAM,YAAY,SAAS,CAAC,UAAU,MAAM,SAAS;AAErD,QAAM,WAAW,MAAM,OAAwB,IAAI;AACnD,QAAM,cAAc,gBAAgB,KAAK,QAAQ;AASjD,QAAM,UAAU,MAAM;AACpB,QAAI,cAAc,SAAS,IAAI;AAC7B,eAAS,SAAS,MAAM;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,WAAW,SAAS,EAAE,CAAC;AAE3B,QAAM,WAAW,SAAS;AAAA,IACxB,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,SAAS;AAAA,EACX,CAAC;AAED,QAAM,aAAa,YAAY,QAAQ;AACvC,QAAM,aAAa,YAAY,QAAQ;AACvC,QAAM,aAAa,YAAY,QAAQ;AACvC,QAAM,YAAY,OAAO,SAAS,EAAE,GAAG,QAAQ;AAC/C,QAAM,CAAC,UAAU,WAAW,IAAI,aAAa,SAAS,GAAG;AAEzD,QAAM,WAAW,MAAM;AAAA,IACrB,CAAC,UAA8C;AAC7C,YAAM,OAAO,MAAM,OAAO;AAC1B,UAAI,QAAQ,KAAM,aAAY,IAAI;AAClC,sBAAgB,OAAO,SAAS,SAAS,IAAI,OAAO,QAAQ,OAAO,KAAK,KAAK,IAAI,IAAI;AACrF,eAAS,QAAQ,WAAW,KAAK;AAAA,IACnC;AAAA,IACA,CAAC,OAAO,SAAS,IAAI,SAAS,UAAU,WAAW;AAAA,EACrD;AAEA,QAAM,SAAS,MAAM;AAAA,IACnB,CAAC,UAA6C;AAC5C,eAAS,QAAQ,SAAS,KAAK;AAC/B,kBAAY,IAAI;AAAA,IAClB;AAAA,IACA,CAAC,UAAU,WAAW;AAAA,EACxB;AAEA,QAAM,UAAU,MAAM;AAAA,IACpB,CAAC,UAAiD;AAChD,UAAI,CAAC,QAAQ,YAAa;AAE1B,eAAS,QAAQ,UAAU,KAAK;AAChC,UAAI,MAAM,iBAAkB;AAE5B,YAAM,UAAU,MAAM,cAAc,QAAQ,MAAM;AAClD,YAAM,QAAQ,QAAQ,MAAM,OAAO,EAAE,OAAO,CAAC,SAAS,KAAK,KAAK,CAAC;AAEjE,UAAI,MAAM,SAAS,GAAG;AACpB,cAAM,eAAe;AAErB,cAAM,SAAqB,CAAC;AAE5B,mBAAW,QAAQ,OAAO;AACxB,cAAI,MAAM;AACV,cAAI,QAAQ;AAEZ,cAAI,KAAK,SAAS,GAAG,GAAG;AACtB,kBAAM,QAAQ,KAAK,MAAM,GAAG;AAC5B,kBAAM,MAAM,CAAC,GAAG,KAAK,KAAK;AAC1B,oBAAQ,aAAa,MAAM,MAAM,CAAC,EAAE,KAAK,GAAG,EAAE,KAAK,GAAG,QAAQ,WAAW;AAAA,UAC3E,WAAW,KAAK,SAAS,GAAG,GAAG;AAC7B,kBAAM,QAAQ,KAAK,MAAM,GAAG;AAC5B,kBAAM,MAAM,CAAC,GAAG,KAAK,KAAK;AAC1B,oBAAQ,aAAa,MAAM,MAAM,CAAC,EAAE,KAAK,GAAG,EAAE,KAAK,GAAG,QAAQ,WAAW;AAAA,UAC3E,WAAW,YAAY,KAAK,IAAI,GAAG;AACjC,kBAAM,QAAQ,KAAK,MAAM,WAAW;AACpC,kBAAM,MAAM,CAAC,GAAG,KAAK,KAAK;AAC1B,oBAAQ,aAAa,MAAM,MAAM,CAAC,EAAE,KAAK,GAAG,EAAE,KAAK,GAAG,QAAQ,WAAW;AAAA,UAC3E;AAEA,cAAI,KAAK;AACP,mBAAO,KAAK,EAAE,IAAI,aAAa,GAAG,KAAK,MAAM,CAAC;AAAA,UAChD;AAAA,QACF;AAEA,YAAI,OAAO,SAAS,GAAG;AACrB,gBAAM,QAAQ,MAAM,SAAS;AAC7B,gBAAM,eAAe,MAAM,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO,SAAS,EAAE;AAE5E,cAAI;AACJ,cAAI,SAAS,QAAQ,MAAM,SAAS,UAAU,IAAI;AAChD,uBAAW,CAAC,GAAG,MAAM,MAAM,MAAM,GAAG,YAAY,GAAG,GAAG,QAAQ,GAAG,MAAM,MAAM,MAAM,eAAe,CAAC,CAAC;AAAA,UACtG,OAAO;AACL,uBAAW,CAAC,GAAG,MAAM,MAAM,MAAM,GAAG,eAAe,CAAC,GAAG,GAAG,QAAQ,GAAG,MAAM,MAAM,MAAM,eAAe,CAAC,CAAC;AAAA,UAC1G;AAEA,cAAI,QAAQ,aAAa,QAAW;AAClC,uBAAW,SAAS,MAAM,GAAG,QAAQ,QAAQ;AAAA,UAC/C;AAEA,gBAAM,SAAS,SAAS,QAAQ;AAEhC,cAAI,QAAQ,SAAS;AACnB,oBAAQ,QAAQ,MAAM,aAA0C,MAAM;AAAA,UACxE;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,SAAS,OAAO,UAAU,QAAQ;AAAA,EACrC;AAEA,QAAM,oBAAoB,UAAU,OAAO;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAc;AAAA,MACd,oBAAkB,YAAY,WAAW,QAAQ,QAAQ,SAAS,IAAI,KAAK,IAAI;AAAA,MAC/E,aAAU;AAAA,MACV,gBAAe;AAAA,MACf,cAAa;AAAA,MACb,aAAY;AAAA,MACZ,YAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,aAAa,QAAQ;AAAA,MACpB,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAOA,SAAS,mBAAmB,OAAgC;AAC1D,QAAM;AAAA,IACJ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,UAAU,mBAAmB,gBAAgB;AACnD,QAAM,WAAW,uBAAuB,gBAAgB;AACxD,QAAM,QAAQ,gBAAgB,gBAAgB;AAC9C,QAAM,SAAS,SAAS,CAAC,UAAU,MAAM,MAAM;AAE/C,QAAM,WAAW,SAAS;AAAA,IACxB,UAAU;AAAA,IACV,QAAQ;AAAA,EACV,CAAC;AAED,QAAM,aAAa,YAAY,QAAQ;AACvC,QAAM,aAAa,YAAY,QAAQ;AACvC,QAAM,aAAa,YAAY,QAAQ;AACvC,QAAM,YAAY,OAAO,SAAS,EAAE,GAAG,UAAU;AACjD,QAAM,YAAY,UAAU,QAAQ,OAAO,qBAAqB;AAChE,QAAM,CAAC,YAAY,aAAa,IAAI,aAAa,SAAS,KAAK;AAE/D,QAAM,WAAW,MAAM;AAAA,IACrB,CAAC,UAAkD;AACjD,eAAS,QAAQ,WAAW,KAAK;AACjC,YAAM,OAAO,MAAM,OAAO;AAC1B,UAAI,QAAQ,KAAM,eAAc,IAAI;AACpC,sBAAgB,OAAO,SAAS,SAAS,IAAI,SAAS,QAAQ,OAAO,KAAK,KAAK,IAAI,IAAI;AAAA,IACzF;AAAA,IACA,CAAC,OAAO,SAAS,IAAI,SAAS,UAAU,aAAa;AAAA,EACvD;AAEA,QAAM,SAAS,MAAM;AAAA,IACnB,CAAC,UAAiD;AAChD,eAAS,QAAQ,SAAS,KAAK;AAC/B,oBAAc,IAAI;AAAA,IACpB;AAAA,IACA,CAAC,UAAU,aAAa;AAAA,EAC1B;AAEA,QAAM,sBAAsB,UAAU,OAAO;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAc;AAAA,MACd,oBAAkB,YAAY,WAAW,QAAQ,QAAQ,SAAS,IAAI,OAAO,IAAI;AAAA,MACjF,aAAU;AAAA,MACV,gBAAe;AAAA,MACf,cAAa;AAAA,MACb,aAAY;AAAA,MACZ,YAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,aAAa,QAAQ;AAAA,MACpB,GAAG;AAAA,MACJ,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAUT;AAAA,QACA,WAAW;AAAA,QACX;AAAA,MACF;AAAA,MACA,OAAO;AAAA,QACL,GAAG;AAAA,QACH,GAAI,aAAa,EAAE,UAAU;AAAA,MAC/B;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAIA,SAAS,eAAe,OAA4B;AAClD,QAAM,EAAE,SAAS,aAAa,UAAU,WAAW,GAAG,YAAY,IAAI;AAEtE,QAAM,UAAU,mBAAmB,WAAW;AAC9C,QAAM,WAAW,uBAAuB,WAAW;AACnD,QAAM,QAAQ,gBAAgB,WAAW;AAEzC,QAAM,WAAW,SAAS;AAAA,IACxB,SAAS;AAAA,EACX,CAAC;AACD,QAAM,QAAQ,SAAS,CAAC,UAAU,MAAM,KAAK;AAC7C,QAAM,aAAa,QAAQ,YAAY,MAAM,UAAU,QAAQ;AAC/D,QAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO,SAAS,EAAE;AAEnE,QAAM,UAAU,MAAM;AAAA,IACpB,CAAC,UAA2C;AAC1C,eAAS,QAAQ,UAAU,KAAK;AAEhC,YAAM,QAAQ,MAAM,SAAS;AAC7B,UAAI,MAAM,MAAM,UAAU,QAAQ,SAAU;AAE5C,YAAM,eAAe,MAAM,MAAM,KAAK,CAAC,SAAS,KAAK,OAAO,SAAS,EAAE;AACvE,UAAI,CAAC,aAAc;AAQnB,YAAM,SAAS,MAAM;AACrB,YAAM,WAAW,OAAO,cAAc,kBAAkB;AACxD,YAAM,OAAO,OAAO,QAAqB,yBAAyB;AAClE,YAAM,eAAe,MAAM,MAAM,QAAQ,YAAY;AAErD,YAAM,WAAW,MAAM,MAAM,OAAO,CAAC,SAAS,KAAK,OAAO,SAAS,EAAE;AACrE,YAAM,YAAY,EAAE,GAAG,MAAM,OAAO;AACpC,aAAO,UAAU,SAAS,EAAE;AAE5B,YAAM,SAAS,SAAS,QAAQ;AAChC,YAAM,SAAS,UAAU,SAAS;AAElC,cAAQ,WAAW,YAAY;AAE/B,UAAI,YAAY,MAAM;AACpB,8BAAsB,MAAM;AAC1B,gBAAM,gBAAgB,KAAK,iBAA8B,+CAA+C;AACxG,gBAAM,aACJ,cAAc,KAAK,IAAI,cAAc,cAAc,SAAS,CAAC,CAAC,KAC9D,KAAK,cAA2B,4CAA4C;AAC9E,sBAAY,MAAM;AAAA,QACpB,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IACA,CAAC,OAAO,SAAS,SAAS,IAAI,QAAQ;AAAA,EACxC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,SAAQ;AAAA,MACR,MAAK;AAAA,MAML,cAAY,QAAQ,OAAO,OAAO,SAAS,KAAK,YAAY,CAAC;AAAA,MAC7D,UAAU;AAAA,MACT,GAAG;AAAA,MAGJ,WAAW,GAAG,YAAY,SAAS;AAAA,MACnC;AAAA,MAGC,sBAAY,oBAAC,KAAE,eAAY,QAAO,WAAU,UAAS;AAAA;AAAA,EACxD;AAEJ;AAIA,SAAS,YAAY,OAAyB;AAC5C,QAAM,EAAE,SAAS,aAAa,UAAU,GAAG,SAAS,IAAI;AAExD,QAAM,UAAU,mBAAmB,QAAQ;AAC3C,QAAM,QAAQ,gBAAgB,QAAQ;AAEtC,QAAM,WAAW,SAAS;AAAA,IACxB,SAAS;AAAA,EACX,CAAC;AACD,QAAM,QAAQ,SAAS,CAAC,UAAU,MAAM,KAAK;AAC7C,QAAM,aAAa,QAAQ,YAAa,QAAQ,aAAa,UAAa,MAAM,UAAU,QAAQ;AAElG,QAAM,UAAU,MAAM;AAAA,IACpB,CAAC,UAAwC;AACvC,eAAS,QAAQ,UAAU,KAAK;AAEhC,YAAM,QAAQ,MAAM,SAAS;AAC7B,UAAI,QAAQ,aAAa,UAAa,MAAM,MAAM,UAAU,QAAQ,UAAU;AAC5E;AAAA,MACF;AAEA,YAAM,UAAoB;AAAA,QACxB,IAAI,aAAa;AAAA,QACjB,KAAK;AAAA,QACL,OAAO;AAAA,MACT;AAEA,YAAM,WAAW,CAAC,GAAG,MAAM,OAAO,OAAO;AACzC,YAAM,SAAS,SAAS,QAAQ;AAChC,YAAM,SAAS,aAAa,QAAQ,EAAE;AAEtC,cAAQ,QAAQ,OAAO;AAAA,IACzB;AAAA,IACA,CAAC,OAAO,SAAS,QAAQ;AAAA,EAC3B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,SAAQ;AAAA,MACR,UAAU;AAAA,MACT,GAAG;AAAA,MACJ;AAAA,MAEC,sBACC,iCACE;AAAA,4BAAC,QAAK,eAAY,QAAO,WAAU,UAAS;AAAA,QAC3C,QAAQ,OAAO;AAAA,SAClB;AAAA;AAAA,EAEJ;AAEJ;AAMA,SAAS,cAAc,OAA2B;AAChD,QAAM,EAAE,OAAO,SAAS,WAAW,GAAG,WAAW,IAAI;AAErD,QAAM,UAAU,mBAAmB,UAAU;AAC7C,QAAM,WAAW,uBAAuB,UAAU;AAElD,QAAM,SAAS,SAAS,CAAC,UAAU,MAAM,MAAM;AAC/C,QAAM,QAAQ,OAAO,SAAS,EAAE,IAAI,KAAK;AAEzC,MAAI,CAAC,MAAO,QAAO;AAEnB,QAAM,iBAAiB,UAAU,OAAO;AAExC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI,WAAW,QAAQ,QAAQ,SAAS,IAAI,KAAK;AAAA,MACjD,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ,WAAW;AAAA;AAAA;AAAA,QAGT;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/components/ui/mask-input.js

@@ -528,7 +528,7 @@ function MaskInput(props) {
          * Bỏ `dark:bg-input/30` (viết thẳng thang màu — bảng tương phản cao không đổi được) và
          * `shadow-xs` (không có trong bộ bóng của gói).
          */
-        "w-full h-9 px-3 rounded-md border bg-background text-sm text-foreground placeholder:text-muted-foreground",
+        "w-full h-9 px-3 rounded-md border bg-background text-base md:text-sm text-foreground placeholder:text-muted-foreground",
         "transition-colors duration-150 ease-out",
         "focus:outline-none focus:ring-2 focus:ring-ring/50 focus:border-primary-ink",
         "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-muted",

package/dist/components/ui/mask-input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/mask-input.tsx"],"sourcesContent":["\"use client\";\n\n/*\n * Port từ Dice UI (https://diceui.com/docs/components/mask-input) — MIT, © 2024 Sadman Sakib.\n * Giữ nguyên cấu trúc thượng nguồn để còn đối chiếu ngược được; mọi chỗ đổi đều có chú thích.\n */\n\n/*\n * ⚠ Khác thượng nguồn: thượng nguồn là MỘT file. Ở đây nửa trên (bảng `MASK_PATTERNS` + mọi hàm\n * thuần) nằm ở `mask-input-constants.ts` — hằng dữ liệu export ra không được sống trong file\n * `\"use client\"` (Server Component đọc ra `undefined`, không throw). File này chỉ còn component,\n * và chỉ `import` từ đó, KHÔNG `export` lại (re-export vòng qua file client là vô hiệu).\n */\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { useComitorLocale } from \"../../i18n/locale-provider.js\";\nimport { cn } from \"../../lib/cn.js\";\nimport { useComposedRefs } from \"../../lib/compose-refs.js\";\nimport {\n  applyMask,\n  CURRENCY_PERCENTAGE_SYMBOLS,\n  DEFAULT_CURRENCY,\n  fromUnmaskedIndex,\n  getCurrencyCaretPosition,\n  getPatternCaretPosition,\n  getPercentageCaretPosition,\n  getUnmaskedValue,\n  isCurrencyAtEnd,\n  isCurrencyMask,\n  isDecimalCommaPercentage,\n  MASK_PATTERNS,\n  type MaskPattern,\n  type MaskPatternKey,\n  NUMERIC_MASK_PATTERNS,\n  REGEX_CACHE,\n  toUnmaskedIndex\n} from \"./mask-input-constants.js\";\n\ntype InputElement = React.ComponentRef<\"input\">;\n\ninterface MaskInputProps extends React.ComponentProps<\"input\"> {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (maskedValue: string, unmaskedValue: string) => void;\n  onValidate?: (isValid: boolean, unmaskedValue: string) => void;\n  validationMode?: \"onChange\" | \"onBlur\" | \"onSubmit\" | \"onTouched\" | \"all\";\n  /**\n   * Tên một mẫu dựng sẵn (`\"currency\"`, `\"percentage\"`, `\"time\"`, `\"creditCard\"`…) hoặc một\n   * `MaskPattern` tự viết. ⚠ `\"phone\"`, `\"date\"`, `\"ssn\"`, `\"zipCode\"`, `\"ein\"` là định dạng Hoa Kỳ\n   * — số điện thoại ở app Comitor dùng `PhoneInput`.\n   */\n  mask?: MaskPatternKey | MaskPattern;\n  maskPlaceholder?: string;\n  /**\n   * Mã tiền tệ ISO 4217 cho `mask=\"currency\"`. Mặc định `\"USD\"`, như thượng nguồn.\n   *\n   * Tiền tệ là thiết lập VÙNG / nghiệp vụ, không suy từ ngôn ngữ: app Comitor truyền từ cài đặt\n   * workspace (vd `\"VND\"`). Trước `3.0.0` mặc định cứng là `\"VND\"`.\n   */\n  currency?: string;\n  /**\n   * Locale BCP 47 cho `mask=\"currency\"` — quyết định dấu nhóm, dấu thập phân và vị trí ký hiệu — và\n   * cho `mask=\"percentage\"` — dấu thập phân (từ `3.1.0`: `\"vi\"` đọc `12,5` là 12,5 và hiện `12,5%`;\n   * giá trị thô vẫn là `\"12.5\"`). Không truyền thì theo `locale` của `ComitorLocaleProvider` (không\n   * có provider → `\"en\"` → `$1,234,567`; `\"vi\"` kèm `currency=\"VND\"` → `1.234.567 ₫`).\n   *\n   * ⚠ Khác thượng nguồn: thượng nguồn mặc định cứng `\"en-US\"`, và `percentage` không đọc `locale`.\n   * Trước `3.0.0` mặc định cứng là `\"vi-VN\"`.\n   */\n  locale?: string;\n  asChild?: boolean;\n  invalid?: boolean;\n  withoutMask?: boolean;\n}\n\nfunction MaskInput(props: MaskInputProps) {\n  const {\n    value: valueProp,\n    defaultValue,\n    onValueChange: onValueChangeProp,\n    onValidate,\n    onBlur: onBlurProp,\n    onFocus: onFocusProp,\n    onKeyDown: onKeyDownProp,\n    onPaste: onPasteProp,\n    onCompositionStart: onCompositionStartProp,\n    onCompositionEnd: onCompositionEndProp,\n    validationMode = \"onChange\",\n    mask,\n    maskPlaceholder,\n    currency = DEFAULT_CURRENCY,\n    locale: localeProp,\n    placeholder,\n    inputMode,\n    min,\n    max,\n    maxLength,\n    asChild = false,\n    disabled = false,\n    invalid = false,\n    readOnly = false,\n    required = false,\n    withoutMask = false,\n    className,\n    ref,\n    ...inputProps\n  } = props;\n\n  const { locale: providerLocale } = useComitorLocale();\n  const locale = localeProp ?? providerLocale;\n  const [internalValue, setInternalValue] = React.useState(defaultValue ?? \"\");\n  const [focused, setFocused] = React.useState(false);\n  const [composing, setComposing] = React.useState(false);\n  const [touched, setTouched] = React.useState(false);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const composedRef = useComposedRefs(ref, inputRef);\n\n  const isControlled = valueProp !== undefined;\n  const value = isControlled ? valueProp : internalValue;\n\n  const maskPattern = React.useMemo(() => {\n    if (typeof mask === \"string\") {\n      return MASK_PATTERNS[mask];\n    }\n    return mask;\n  }, [mask]);\n\n  const transformOpts = React.useMemo(\n    () => ({\n      currency,\n      locale\n    }),\n    [currency, locale]\n  );\n\n  const placeholderValue = React.useMemo(() => {\n    if (withoutMask) return placeholder;\n\n    if (placeholder && maskPlaceholder) {\n      return focused ? maskPlaceholder : placeholder;\n    }\n\n    if (maskPlaceholder) {\n      return focused ? maskPlaceholder : undefined;\n    }\n\n    return placeholder;\n  }, [placeholder, maskPlaceholder, focused, withoutMask]);\n\n  const displayValue = React.useMemo(() => {\n    if (withoutMask || !maskPattern || !value) return value ?? \"\";\n    const unmasked = getUnmaskedValue({\n      value,\n      transform: maskPattern.transform,\n      ...transformOpts\n    });\n    return applyMask({\n      value: unmasked,\n      pattern: maskPattern.pattern,\n      ...transformOpts,\n      mask\n    });\n  }, [value, maskPattern, withoutMask, transformOpts, mask]);\n\n  const tokenCount = React.useMemo(() => {\n    if (!maskPattern || CURRENCY_PERCENTAGE_SYMBOLS.test(maskPattern.pattern)) return undefined;\n    return maskPattern.pattern.match(REGEX_CACHE.hashPattern)?.length ?? 0;\n  }, [maskPattern]);\n\n  const calculatedMaxLength = tokenCount ? maskPattern?.pattern.length : maxLength;\n\n  const calculatedInputMode = React.useMemo(() => {\n    if (inputMode) return inputMode;\n    if (!maskPattern) return undefined;\n\n    if (mask === \"currency\" || mask === \"percentage\" || mask === \"ipv4\") {\n      return \"decimal\";\n    }\n\n    if (typeof mask === \"string\" && NUMERIC_MASK_PATTERNS.test(mask)) {\n      return \"numeric\";\n    }\n    return undefined;\n  }, [maskPattern, mask, inputMode]);\n\n  const shouldValidate = React.useCallback(\n    (trigger: \"change\" | \"blur\") => {\n      if (!onValidate || !maskPattern?.validate) return false;\n\n      switch (validationMode) {\n        case \"onChange\":\n          return trigger === \"change\";\n        case \"onBlur\":\n          return trigger === \"blur\";\n        case \"onSubmit\":\n          return false;\n        case \"onTouched\":\n          return touched ? trigger === \"change\" : trigger === \"blur\";\n        case \"all\":\n          return true;\n        default:\n          return trigger === \"change\";\n      }\n    },\n    [onValidate, maskPattern, validationMode, touched]\n  );\n\n  const validationOpts = React.useMemo(\n    () => ({\n      min: typeof min === \"string\" ? Number.parseFloat(min) : min,\n      max: typeof max === \"string\" ? Number.parseFloat(max) : max\n    }),\n    [min, max]\n  );\n\n  const onInputValidate = React.useCallback(\n    (unmaskedValue: string) => {\n      if (onValidate && maskPattern?.validate) {\n        const isValid = maskPattern.validate(unmaskedValue, validationOpts);\n        onValidate(isValid, unmaskedValue);\n      }\n    },\n    [onValidate, maskPattern?.validate, validationOpts]\n  );\n\n  const onValueChange = React.useCallback(\n    (event: React.ChangeEvent<InputElement>) => {\n      const inputValue = event.target.value;\n      let newValue = inputValue;\n      let unmaskedValue = inputValue;\n\n      if (composing) {\n        if (!isControlled) setInternalValue(inputValue);\n        return;\n      }\n\n      if (withoutMask || !maskPattern) {\n        if (!isControlled) setInternalValue(inputValue);\n        if (shouldValidate(\"change\")) onValidate?.(true, inputValue);\n        onValueChangeProp?.(inputValue, inputValue);\n        return;\n      }\n\n      if (maskPattern) {\n        unmaskedValue = getUnmaskedValue({\n          value: inputValue,\n          transform: maskPattern.transform,\n          ...transformOpts\n        });\n        newValue = applyMask({\n          value: unmaskedValue,\n          pattern: maskPattern.pattern,\n          ...transformOpts,\n          mask\n        });\n\n        if (inputRef.current && newValue !== inputValue) {\n          const inputElement = inputRef.current;\n          if (!(inputElement instanceof HTMLInputElement)) return;\n\n          const oldCursorPosition = inputElement.selectionStart ?? 0;\n\n          inputElement.value = newValue;\n\n          const currentUnmasked = getUnmaskedValue({\n            value: newValue,\n            transform: maskPattern.transform,\n            ...transformOpts\n          });\n\n          let newCursorPosition: number;\n\n          const previousUnmasked = getUnmaskedValue({\n            value,\n            transform: maskPattern.transform,\n            ...transformOpts\n          });\n\n          if (isDecimalCommaPercentage({ mask, locale: transformOpts.locale })) {\n            // ⚠ Khác thượng nguồn (3.1.0): mặt nạ đổi cả dấu thập phân (`.` → `,`) — lý do ở hàm.\n            newCursorPosition = getPercentageCaretPosition({ newValue, oldValue: inputValue, oldCursorPosition });\n          } else if (CURRENCY_PERCENTAGE_SYMBOLS.test(maskPattern.pattern)) {\n            newCursorPosition = getCurrencyCaretPosition({\n              newValue,\n              mask,\n              transformOpts,\n              oldCursorPosition,\n              oldValue: inputValue,\n              previousUnmasked\n            });\n          } else {\n            newCursorPosition = getPatternCaretPosition({\n              newValue,\n              maskPattern,\n              currentUnmasked,\n              oldCursorPosition,\n              oldValue: inputValue,\n              previousUnmasked\n            });\n          }\n\n          if (isCurrencyMask({ mask, pattern: maskPattern.pattern })) {\n            if (mask === \"currency\") {\n              const currencyAtEnd = isCurrencyAtEnd(transformOpts);\n              if (!currencyAtEnd) {\n                newCursorPosition = Math.max(1, newCursorPosition);\n              }\n            } else {\n              newCursorPosition = Math.max(1, newCursorPosition);\n            }\n          } else if (maskPattern.pattern.includes(\"%\")) {\n            newCursorPosition = Math.min(newValue.length - 1, newCursorPosition);\n          }\n\n          newCursorPosition = Math.min(newCursorPosition, newValue.length);\n\n          inputElement.setSelectionRange(newCursorPosition, newCursorPosition);\n        }\n      }\n\n      if (!isControlled) {\n        setInternalValue(newValue);\n      }\n\n      if (shouldValidate(\"change\")) {\n        onInputValidate(unmaskedValue);\n      }\n\n      onValueChangeProp?.(newValue, unmaskedValue);\n    },\n    [\n      maskPattern,\n      isControlled,\n      onValueChangeProp,\n      onValidate,\n      onInputValidate,\n      composing,\n      shouldValidate,\n      withoutMask,\n      transformOpts,\n      mask,\n      value\n    ]\n  );\n\n  const onFocus = React.useCallback(\n    (event: React.FocusEvent<InputElement>) => {\n      onFocusProp?.(event);\n      if (event.defaultPrevented) return;\n\n      setFocused(true);\n    },\n    [onFocusProp]\n  );\n\n  const onBlur = React.useCallback(\n    (event: React.FocusEvent<InputElement>) => {\n      onBlurProp?.(event);\n      if (event.defaultPrevented) return;\n\n      setFocused(false);\n\n      if (!touched) {\n        setTouched(true);\n      }\n\n      if (shouldValidate(\"blur\")) {\n        const currentValue = event.target.value;\n        const unmaskedValue = maskPattern\n          ? getUnmaskedValue({\n              value: currentValue,\n              transform: maskPattern.transform,\n              ...transformOpts\n            })\n          : currentValue;\n        onInputValidate(unmaskedValue);\n      }\n    },\n    [onBlurProp, touched, shouldValidate, onInputValidate, maskPattern, transformOpts]\n  );\n\n  const onCompositionStart = React.useCallback(\n    (event: React.CompositionEvent<InputElement>) => {\n      onCompositionStartProp?.(event);\n      if (event.defaultPrevented) return;\n\n      setComposing(true);\n    },\n    [onCompositionStartProp]\n  );\n\n  const onCompositionEnd = React.useCallback(\n    (event: React.CompositionEvent<InputElement>) => {\n      onCompositionEndProp?.(event);\n      if (event.defaultPrevented) return;\n\n      setComposing(false);\n\n      const inputElement = inputRef.current;\n      if (!inputElement) return;\n      if (!(inputElement instanceof HTMLInputElement)) return;\n      const inputValue = inputElement.value;\n\n      if (!maskPattern || withoutMask) {\n        if (!isControlled) setInternalValue(inputValue);\n        if (shouldValidate(\"change\")) onValidate?.(true, inputValue);\n        onValueChangeProp?.(inputValue, inputValue);\n        return;\n      }\n\n      const unmasked = getUnmaskedValue({\n        value: inputValue,\n        transform: maskPattern.transform,\n        ...transformOpts\n      });\n      const masked = applyMask({\n        value: unmasked,\n        pattern: maskPattern.pattern,\n        ...transformOpts,\n        mask\n      });\n\n      if (!isControlled) setInternalValue(masked);\n      if (shouldValidate(\"change\")) onInputValidate(unmasked);\n      onValueChangeProp?.(masked, unmasked);\n    },\n    [\n      onCompositionEndProp,\n      maskPattern,\n      withoutMask,\n      isControlled,\n      shouldValidate,\n      onValidate,\n      onValueChangeProp,\n      transformOpts,\n      mask,\n      onInputValidate\n    ]\n  );\n\n  const onPaste = React.useCallback(\n    (event: React.ClipboardEvent<InputElement>) => {\n      onPasteProp?.(event);\n      if (event.defaultPrevented) return;\n\n      if (withoutMask || !maskPattern) return;\n\n      if (mask === \"ipv4\") return;\n\n      const target = event.target as InputElement;\n      if (!(target instanceof HTMLInputElement)) return;\n\n      const pastedData = event.clipboardData.getData(\"text\");\n      if (!pastedData) return;\n\n      event.preventDefault();\n\n      const currentValue = target.value;\n      const selectionStart = target.selectionStart ?? 0;\n      const selectionEnd = target.selectionEnd ?? 0;\n\n      const beforeSelection = currentValue.slice(0, selectionStart);\n      const afterSelection = currentValue.slice(selectionEnd);\n      const newInputValue = beforeSelection + pastedData + afterSelection;\n\n      const unmasked = getUnmaskedValue({\n        value: newInputValue,\n        transform: maskPattern.transform,\n        ...transformOpts\n      });\n      const newMaskedValue = applyMask({\n        value: unmasked,\n        pattern: maskPattern.pattern,\n        ...transformOpts,\n        mask\n      });\n\n      target.value = newMaskedValue;\n\n      /*\n       * ⚠ Khác thượng nguồn (3.0.1): nhánh tiền tệ và phần trăm chỉ đặt con trỏ rồi đi TIẾP xuống\n       * phần báo giá trị. Bản gốc `return` ngay trong hai nhánh này, nên dán vào ô tiền/phần trăm\n       * chỉ đổi DOM: `onValueChange` không chạy, state nội bộ không đổi, và lần render kế tiếp trả\n       * ô về số cũ — đo trên comitor-ds: dán \"777\" hiện `777 US$`, app vẫn giữ 12345.56.\n       */\n      let newCursorPosition = newMaskedValue.length;\n      if (isCurrencyMask({ mask, pattern: maskPattern.pattern })) {\n        const currencyAtEnd = isCurrencyAtEnd(transformOpts);\n        const symbolStart = newMaskedValue.search(/\\s*[^\\d\\s]+$/);\n        newCursorPosition = currencyAtEnd && symbolStart !== -1 ? symbolStart : newMaskedValue.length;\n      } else if (maskPattern.pattern.includes(\"%\")) {\n        newCursorPosition = Math.max(0, newMaskedValue.length - 1);\n      } else {\n        try {\n          const unmaskedCount = unmasked.length;\n          let position = 0;\n          let count = 0;\n\n          for (let i = 0; i < maskPattern.pattern.length && i < newMaskedValue.length; i++) {\n            if (maskPattern.pattern[i] === \"#\") {\n              count++;\n              if (count <= unmaskedCount) {\n                position = i + 1;\n              }\n            }\n          }\n          newCursorPosition = position;\n        } catch {\n          // Lỗi thì để con trỏ ở cuối.\n        }\n      }\n\n      target.setSelectionRange(newCursorPosition, newCursorPosition);\n\n      if (!isControlled) setInternalValue(newMaskedValue);\n      if (shouldValidate(\"change\")) onInputValidate(unmasked);\n      onValueChangeProp?.(newMaskedValue, unmasked);\n    },\n    [\n      onPasteProp,\n      withoutMask,\n      maskPattern,\n      mask,\n      transformOpts,\n      isControlled,\n      shouldValidate,\n      onInputValidate,\n      onValueChangeProp\n    ]\n  );\n\n  const onKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<InputElement>) => {\n      onKeyDownProp?.(event);\n      if (event.defaultPrevented) return;\n\n      if (withoutMask || !maskPattern) return;\n\n      if (mask === \"ipv4\") return;\n\n      if (event.key === \"Backspace\") {\n        const target = event.target as InputElement;\n        if (!(target instanceof HTMLInputElement)) return;\n        const cursorPosition = target.selectionStart ?? 0;\n        const selectionEnd = target.selectionEnd ?? 0;\n        const currentValue = target.value;\n\n        if (\n          mask === \"currency\" ||\n          mask === \"percentage\" ||\n          maskPattern.pattern.includes(\"$\") ||\n          maskPattern.pattern.includes(\"€\") ||\n          maskPattern.pattern.includes(\"%\")\n        ) {\n          return;\n        }\n\n        if (cursorPosition !== selectionEnd) {\n          return;\n        }\n\n        if (cursorPosition > 0) {\n          const charBeforeCursor = currentValue[cursorPosition - 1];\n\n          if (charBeforeCursor) {\n            event.preventDefault();\n\n            const unmaskedIndex = toUnmaskedIndex({\n              masked: currentValue,\n              pattern: maskPattern.pattern,\n              caret: cursorPosition\n            });\n\n            if (unmaskedIndex > 0) {\n              const currentUnmasked = getUnmaskedValue({\n                value: currentValue,\n                transform: maskPattern.transform,\n                ...transformOpts\n              });\n              const nextUnmasked = currentUnmasked.slice(0, unmaskedIndex - 1) + currentUnmasked.slice(unmaskedIndex);\n              const nextMasked = applyMask({\n                value: nextUnmasked,\n                pattern: maskPattern.pattern,\n                ...transformOpts,\n                mask\n              });\n\n              target.value = nextMasked;\n              const nextCaret = fromUnmaskedIndex({\n                masked: nextMasked,\n                pattern: maskPattern.pattern,\n                unmaskedIndex: unmaskedIndex - 1\n              });\n\n              target.setSelectionRange(nextCaret, nextCaret);\n\n              onValueChangeProp?.(nextMasked, nextUnmasked);\n            }\n            return;\n          }\n        }\n      }\n\n      if (event.key === \"Delete\") {\n        const target = event.target as InputElement;\n        if (!(target instanceof HTMLInputElement)) return;\n        const cursorPosition = target.selectionStart ?? 0;\n        const selectionEnd = target.selectionEnd ?? 0;\n        const currentValue = target.value;\n\n        if (\n          mask === \"currency\" ||\n          mask === \"percentage\" ||\n          maskPattern.pattern.includes(\"$\") ||\n          maskPattern.pattern.includes(\"€\") ||\n          maskPattern.pattern.includes(\"%\")\n        ) {\n          return;\n        }\n\n        if (cursorPosition !== selectionEnd) {\n          return;\n        }\n\n        if (cursorPosition < currentValue.length) {\n          const charAtCursor = currentValue[cursorPosition];\n\n          if (charAtCursor) {\n            event.preventDefault();\n\n            const unmaskedIndex = toUnmaskedIndex({\n              masked: currentValue,\n              pattern: maskPattern.pattern,\n              caret: cursorPosition\n            });\n\n            const currentUnmasked = getUnmaskedValue({\n              value: currentValue,\n              transform: maskPattern.transform,\n              ...transformOpts\n            });\n\n            if (unmaskedIndex < currentUnmasked.length) {\n              const nextUnmasked = currentUnmasked.slice(0, unmaskedIndex) + currentUnmasked.slice(unmaskedIndex + 1);\n              const nextMasked = applyMask({\n                value: nextUnmasked,\n                pattern: maskPattern.pattern,\n                ...transformOpts,\n                mask\n              });\n\n              target.value = nextMasked;\n              const nextCaret = fromUnmaskedIndex({\n                masked: nextMasked,\n                pattern: maskPattern.pattern,\n                unmaskedIndex: unmaskedIndex\n              });\n\n              target.setSelectionRange(nextCaret, nextCaret);\n\n              onValueChangeProp?.(nextMasked, nextUnmasked);\n            }\n            return;\n          }\n        }\n      }\n    },\n    [maskPattern, onKeyDownProp, onValueChangeProp, transformOpts, mask, withoutMask]\n  );\n\n  const InputPrimitive = asChild ? Slot : \"input\";\n\n  return (\n    <InputPrimitive\n      // ⚠ Khác thượng nguồn: chỉ phát thuộc tính khi THẬT SỰ lỗi — `aria-invalid=\"false\"` hợp lệ\n      // nhưng thừa, và cùng quy ước với `Input`/`Combobox` của gói. Đặt TRƯỚC spread để\n      // `aria-invalid` do `<FormControl>` dán vào vẫn thắng.\n      aria-invalid={invalid || undefined}\n      data-disabled={disabled ? \"\" : undefined}\n      data-invalid={invalid ? \"\" : undefined}\n      data-readonly={readOnly ? \"\" : undefined}\n      data-required={required ? \"\" : undefined}\n      data-slot=\"mask-input\"\n      {...inputProps}\n      className={cn(\n        /*\n         * ⚠ Khác thượng nguồn: chuỗi lớp của `Input` Comitor thay cho của shadcn, để ô có mặt nạ\n         * đứng cạnh ô nhập thường trong cùng một form không lệch nhau (cao, nền, viền, cỡ chữ,\n         * focus). Số đo của từng vai trò ở chú thích đầu `input.tsx`:\n         *   viền nghỉ `border-input` · hover `--control-edge-strong` · focus `--primary-ink`;\n         *   lỗi `border-destructive-ink` (không phải `border-destructive` — token TÔ NỀN).\n         * Bỏ `dark:bg-input/30` (viết thẳng thang màu — bảng tương phản cao không đổi được) và\n         * `shadow-xs` (không có trong bộ bóng của gói).\n         */\n        \"w-full h-9 px-3 rounded-md border bg-background text-sm text-foreground placeholder:text-muted-foreground\",\n        \"transition-colors duration-150 ease-out\",\n        \"focus:outline-none focus:ring-2 focus:ring-ring/50 focus:border-primary-ink\",\n        \"disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-muted\",\n        \"border-input hover:border-control-edge-strong\",\n        \"aria-invalid:border-destructive-ink aria-invalid:hover:border-destructive-ink aria-invalid:focus:border-destructive-ink aria-invalid:focus:ring-destructive/30\",\n        className\n      )}\n      placeholder={placeholderValue}\n      ref={composedRef}\n      value={displayValue}\n      disabled={disabled}\n      maxLength={calculatedMaxLength}\n      readOnly={readOnly}\n      required={required}\n      inputMode={calculatedInputMode}\n      min={min}\n      max={max}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onKeyDown={onKeyDown}\n      onPaste={onPaste}\n      onChange={onValueChange}\n      onCompositionStart={onCompositionStart}\n      onCompositionEnd={onCompositionEnd}\n    />\n  );\n}\n\nexport { MaskInput, type MaskInputProps };\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/ui/mask-input.tsx"],"sourcesContent":["\"use client\";\n\n/*\n * Port từ Dice UI (https://diceui.com/docs/components/mask-input) — MIT, © 2024 Sadman Sakib.\n * Giữ nguyên cấu trúc thượng nguồn để còn đối chiếu ngược được; mọi chỗ đổi đều có chú thích.\n */\n\n/*\n * ⚠ Khác thượng nguồn: thượng nguồn là MỘT file. Ở đây nửa trên (bảng `MASK_PATTERNS` + mọi hàm\n * thuần) nằm ở `mask-input-constants.ts` — hằng dữ liệu export ra không được sống trong file\n * `\"use client\"` (Server Component đọc ra `undefined`, không throw). File này chỉ còn component,\n * và chỉ `import` từ đó, KHÔNG `export` lại (re-export vòng qua file client là vô hiệu).\n */\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { useComitorLocale } from \"../../i18n/locale-provider.js\";\nimport { cn } from \"../../lib/cn.js\";\nimport { useComposedRefs } from \"../../lib/compose-refs.js\";\nimport {\n  applyMask,\n  CURRENCY_PERCENTAGE_SYMBOLS,\n  DEFAULT_CURRENCY,\n  fromUnmaskedIndex,\n  getCurrencyCaretPosition,\n  getPatternCaretPosition,\n  getPercentageCaretPosition,\n  getUnmaskedValue,\n  isCurrencyAtEnd,\n  isCurrencyMask,\n  isDecimalCommaPercentage,\n  MASK_PATTERNS,\n  type MaskPattern,\n  type MaskPatternKey,\n  NUMERIC_MASK_PATTERNS,\n  REGEX_CACHE,\n  toUnmaskedIndex\n} from \"./mask-input-constants.js\";\n\ntype InputElement = React.ComponentRef<\"input\">;\n\ninterface MaskInputProps extends React.ComponentProps<\"input\"> {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (maskedValue: string, unmaskedValue: string) => void;\n  onValidate?: (isValid: boolean, unmaskedValue: string) => void;\n  validationMode?: \"onChange\" | \"onBlur\" | \"onSubmit\" | \"onTouched\" | \"all\";\n  /**\n   * Tên một mẫu dựng sẵn (`\"currency\"`, `\"percentage\"`, `\"time\"`, `\"creditCard\"`…) hoặc một\n   * `MaskPattern` tự viết. ⚠ `\"phone\"`, `\"date\"`, `\"ssn\"`, `\"zipCode\"`, `\"ein\"` là định dạng Hoa Kỳ\n   * — số điện thoại ở app Comitor dùng `PhoneInput`.\n   */\n  mask?: MaskPatternKey | MaskPattern;\n  maskPlaceholder?: string;\n  /**\n   * Mã tiền tệ ISO 4217 cho `mask=\"currency\"`. Mặc định `\"USD\"`, như thượng nguồn.\n   *\n   * Tiền tệ là thiết lập VÙNG / nghiệp vụ, không suy từ ngôn ngữ: app Comitor truyền từ cài đặt\n   * workspace (vd `\"VND\"`). Trước `3.0.0` mặc định cứng là `\"VND\"`.\n   */\n  currency?: string;\n  /**\n   * Locale BCP 47 cho `mask=\"currency\"` — quyết định dấu nhóm, dấu thập phân và vị trí ký hiệu — và\n   * cho `mask=\"percentage\"` — dấu thập phân (từ `3.1.0`: `\"vi\"` đọc `12,5` là 12,5 và hiện `12,5%`;\n   * giá trị thô vẫn là `\"12.5\"`). Không truyền thì theo `locale` của `ComitorLocaleProvider` (không\n   * có provider → `\"en\"` → `$1,234,567`; `\"vi\"` kèm `currency=\"VND\"` → `1.234.567 ₫`).\n   *\n   * ⚠ Khác thượng nguồn: thượng nguồn mặc định cứng `\"en-US\"`, và `percentage` không đọc `locale`.\n   * Trước `3.0.0` mặc định cứng là `\"vi-VN\"`.\n   */\n  locale?: string;\n  asChild?: boolean;\n  invalid?: boolean;\n  withoutMask?: boolean;\n}\n\nfunction MaskInput(props: MaskInputProps) {\n  const {\n    value: valueProp,\n    defaultValue,\n    onValueChange: onValueChangeProp,\n    onValidate,\n    onBlur: onBlurProp,\n    onFocus: onFocusProp,\n    onKeyDown: onKeyDownProp,\n    onPaste: onPasteProp,\n    onCompositionStart: onCompositionStartProp,\n    onCompositionEnd: onCompositionEndProp,\n    validationMode = \"onChange\",\n    mask,\n    maskPlaceholder,\n    currency = DEFAULT_CURRENCY,\n    locale: localeProp,\n    placeholder,\n    inputMode,\n    min,\n    max,\n    maxLength,\n    asChild = false,\n    disabled = false,\n    invalid = false,\n    readOnly = false,\n    required = false,\n    withoutMask = false,\n    className,\n    ref,\n    ...inputProps\n  } = props;\n\n  const { locale: providerLocale } = useComitorLocale();\n  const locale = localeProp ?? providerLocale;\n  const [internalValue, setInternalValue] = React.useState(defaultValue ?? \"\");\n  const [focused, setFocused] = React.useState(false);\n  const [composing, setComposing] = React.useState(false);\n  const [touched, setTouched] = React.useState(false);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const composedRef = useComposedRefs(ref, inputRef);\n\n  const isControlled = valueProp !== undefined;\n  const value = isControlled ? valueProp : internalValue;\n\n  const maskPattern = React.useMemo(() => {\n    if (typeof mask === \"string\") {\n      return MASK_PATTERNS[mask];\n    }\n    return mask;\n  }, [mask]);\n\n  const transformOpts = React.useMemo(\n    () => ({\n      currency,\n      locale\n    }),\n    [currency, locale]\n  );\n\n  const placeholderValue = React.useMemo(() => {\n    if (withoutMask) return placeholder;\n\n    if (placeholder && maskPlaceholder) {\n      return focused ? maskPlaceholder : placeholder;\n    }\n\n    if (maskPlaceholder) {\n      return focused ? maskPlaceholder : undefined;\n    }\n\n    return placeholder;\n  }, [placeholder, maskPlaceholder, focused, withoutMask]);\n\n  const displayValue = React.useMemo(() => {\n    if (withoutMask || !maskPattern || !value) return value ?? \"\";\n    const unmasked = getUnmaskedValue({\n      value,\n      transform: maskPattern.transform,\n      ...transformOpts\n    });\n    return applyMask({\n      value: unmasked,\n      pattern: maskPattern.pattern,\n      ...transformOpts,\n      mask\n    });\n  }, [value, maskPattern, withoutMask, transformOpts, mask]);\n\n  const tokenCount = React.useMemo(() => {\n    if (!maskPattern || CURRENCY_PERCENTAGE_SYMBOLS.test(maskPattern.pattern)) return undefined;\n    return maskPattern.pattern.match(REGEX_CACHE.hashPattern)?.length ?? 0;\n  }, [maskPattern]);\n\n  const calculatedMaxLength = tokenCount ? maskPattern?.pattern.length : maxLength;\n\n  const calculatedInputMode = React.useMemo(() => {\n    if (inputMode) return inputMode;\n    if (!maskPattern) return undefined;\n\n    if (mask === \"currency\" || mask === \"percentage\" || mask === \"ipv4\") {\n      return \"decimal\";\n    }\n\n    if (typeof mask === \"string\" && NUMERIC_MASK_PATTERNS.test(mask)) {\n      return \"numeric\";\n    }\n    return undefined;\n  }, [maskPattern, mask, inputMode]);\n\n  const shouldValidate = React.useCallback(\n    (trigger: \"change\" | \"blur\") => {\n      if (!onValidate || !maskPattern?.validate) return false;\n\n      switch (validationMode) {\n        case \"onChange\":\n          return trigger === \"change\";\n        case \"onBlur\":\n          return trigger === \"blur\";\n        case \"onSubmit\":\n          return false;\n        case \"onTouched\":\n          return touched ? trigger === \"change\" : trigger === \"blur\";\n        case \"all\":\n          return true;\n        default:\n          return trigger === \"change\";\n      }\n    },\n    [onValidate, maskPattern, validationMode, touched]\n  );\n\n  const validationOpts = React.useMemo(\n    () => ({\n      min: typeof min === \"string\" ? Number.parseFloat(min) : min,\n      max: typeof max === \"string\" ? Number.parseFloat(max) : max\n    }),\n    [min, max]\n  );\n\n  const onInputValidate = React.useCallback(\n    (unmaskedValue: string) => {\n      if (onValidate && maskPattern?.validate) {\n        const isValid = maskPattern.validate(unmaskedValue, validationOpts);\n        onValidate(isValid, unmaskedValue);\n      }\n    },\n    [onValidate, maskPattern?.validate, validationOpts]\n  );\n\n  const onValueChange = React.useCallback(\n    (event: React.ChangeEvent<InputElement>) => {\n      const inputValue = event.target.value;\n      let newValue = inputValue;\n      let unmaskedValue = inputValue;\n\n      if (composing) {\n        if (!isControlled) setInternalValue(inputValue);\n        return;\n      }\n\n      if (withoutMask || !maskPattern) {\n        if (!isControlled) setInternalValue(inputValue);\n        if (shouldValidate(\"change\")) onValidate?.(true, inputValue);\n        onValueChangeProp?.(inputValue, inputValue);\n        return;\n      }\n\n      if (maskPattern) {\n        unmaskedValue = getUnmaskedValue({\n          value: inputValue,\n          transform: maskPattern.transform,\n          ...transformOpts\n        });\n        newValue = applyMask({\n          value: unmaskedValue,\n          pattern: maskPattern.pattern,\n          ...transformOpts,\n          mask\n        });\n\n        if (inputRef.current && newValue !== inputValue) {\n          const inputElement = inputRef.current;\n          if (!(inputElement instanceof HTMLInputElement)) return;\n\n          const oldCursorPosition = inputElement.selectionStart ?? 0;\n\n          inputElement.value = newValue;\n\n          const currentUnmasked = getUnmaskedValue({\n            value: newValue,\n            transform: maskPattern.transform,\n            ...transformOpts\n          });\n\n          let newCursorPosition: number;\n\n          const previousUnmasked = getUnmaskedValue({\n            value,\n            transform: maskPattern.transform,\n            ...transformOpts\n          });\n\n          if (isDecimalCommaPercentage({ mask, locale: transformOpts.locale })) {\n            // ⚠ Khác thượng nguồn (3.1.0): mặt nạ đổi cả dấu thập phân (`.` → `,`) — lý do ở hàm.\n            newCursorPosition = getPercentageCaretPosition({ newValue, oldValue: inputValue, oldCursorPosition });\n          } else if (CURRENCY_PERCENTAGE_SYMBOLS.test(maskPattern.pattern)) {\n            newCursorPosition = getCurrencyCaretPosition({\n              newValue,\n              mask,\n              transformOpts,\n              oldCursorPosition,\n              oldValue: inputValue,\n              previousUnmasked\n            });\n          } else {\n            newCursorPosition = getPatternCaretPosition({\n              newValue,\n              maskPattern,\n              currentUnmasked,\n              oldCursorPosition,\n              oldValue: inputValue,\n              previousUnmasked\n            });\n          }\n\n          if (isCurrencyMask({ mask, pattern: maskPattern.pattern })) {\n            if (mask === \"currency\") {\n              const currencyAtEnd = isCurrencyAtEnd(transformOpts);\n              if (!currencyAtEnd) {\n                newCursorPosition = Math.max(1, newCursorPosition);\n              }\n            } else {\n              newCursorPosition = Math.max(1, newCursorPosition);\n            }\n          } else if (maskPattern.pattern.includes(\"%\")) {\n            newCursorPosition = Math.min(newValue.length - 1, newCursorPosition);\n          }\n\n          newCursorPosition = Math.min(newCursorPosition, newValue.length);\n\n          inputElement.setSelectionRange(newCursorPosition, newCursorPosition);\n        }\n      }\n\n      if (!isControlled) {\n        setInternalValue(newValue);\n      }\n\n      if (shouldValidate(\"change\")) {\n        onInputValidate(unmaskedValue);\n      }\n\n      onValueChangeProp?.(newValue, unmaskedValue);\n    },\n    [\n      maskPattern,\n      isControlled,\n      onValueChangeProp,\n      onValidate,\n      onInputValidate,\n      composing,\n      shouldValidate,\n      withoutMask,\n      transformOpts,\n      mask,\n      value\n    ]\n  );\n\n  const onFocus = React.useCallback(\n    (event: React.FocusEvent<InputElement>) => {\n      onFocusProp?.(event);\n      if (event.defaultPrevented) return;\n\n      setFocused(true);\n    },\n    [onFocusProp]\n  );\n\n  const onBlur = React.useCallback(\n    (event: React.FocusEvent<InputElement>) => {\n      onBlurProp?.(event);\n      if (event.defaultPrevented) return;\n\n      setFocused(false);\n\n      if (!touched) {\n        setTouched(true);\n      }\n\n      if (shouldValidate(\"blur\")) {\n        const currentValue = event.target.value;\n        const unmaskedValue = maskPattern\n          ? getUnmaskedValue({\n              value: currentValue,\n              transform: maskPattern.transform,\n              ...transformOpts\n            })\n          : currentValue;\n        onInputValidate(unmaskedValue);\n      }\n    },\n    [onBlurProp, touched, shouldValidate, onInputValidate, maskPattern, transformOpts]\n  );\n\n  const onCompositionStart = React.useCallback(\n    (event: React.CompositionEvent<InputElement>) => {\n      onCompositionStartProp?.(event);\n      if (event.defaultPrevented) return;\n\n      setComposing(true);\n    },\n    [onCompositionStartProp]\n  );\n\n  const onCompositionEnd = React.useCallback(\n    (event: React.CompositionEvent<InputElement>) => {\n      onCompositionEndProp?.(event);\n      if (event.defaultPrevented) return;\n\n      setComposing(false);\n\n      const inputElement = inputRef.current;\n      if (!inputElement) return;\n      if (!(inputElement instanceof HTMLInputElement)) return;\n      const inputValue = inputElement.value;\n\n      if (!maskPattern || withoutMask) {\n        if (!isControlled) setInternalValue(inputValue);\n        if (shouldValidate(\"change\")) onValidate?.(true, inputValue);\n        onValueChangeProp?.(inputValue, inputValue);\n        return;\n      }\n\n      const unmasked = getUnmaskedValue({\n        value: inputValue,\n        transform: maskPattern.transform,\n        ...transformOpts\n      });\n      const masked = applyMask({\n        value: unmasked,\n        pattern: maskPattern.pattern,\n        ...transformOpts,\n        mask\n      });\n\n      if (!isControlled) setInternalValue(masked);\n      if (shouldValidate(\"change\")) onInputValidate(unmasked);\n      onValueChangeProp?.(masked, unmasked);\n    },\n    [\n      onCompositionEndProp,\n      maskPattern,\n      withoutMask,\n      isControlled,\n      shouldValidate,\n      onValidate,\n      onValueChangeProp,\n      transformOpts,\n      mask,\n      onInputValidate\n    ]\n  );\n\n  const onPaste = React.useCallback(\n    (event: React.ClipboardEvent<InputElement>) => {\n      onPasteProp?.(event);\n      if (event.defaultPrevented) return;\n\n      if (withoutMask || !maskPattern) return;\n\n      if (mask === \"ipv4\") return;\n\n      const target = event.target as InputElement;\n      if (!(target instanceof HTMLInputElement)) return;\n\n      const pastedData = event.clipboardData.getData(\"text\");\n      if (!pastedData) return;\n\n      event.preventDefault();\n\n      const currentValue = target.value;\n      const selectionStart = target.selectionStart ?? 0;\n      const selectionEnd = target.selectionEnd ?? 0;\n\n      const beforeSelection = currentValue.slice(0, selectionStart);\n      const afterSelection = currentValue.slice(selectionEnd);\n      const newInputValue = beforeSelection + pastedData + afterSelection;\n\n      const unmasked = getUnmaskedValue({\n        value: newInputValue,\n        transform: maskPattern.transform,\n        ...transformOpts\n      });\n      const newMaskedValue = applyMask({\n        value: unmasked,\n        pattern: maskPattern.pattern,\n        ...transformOpts,\n        mask\n      });\n\n      target.value = newMaskedValue;\n\n      /*\n       * ⚠ Khác thượng nguồn (3.0.1): nhánh tiền tệ và phần trăm chỉ đặt con trỏ rồi đi TIẾP xuống\n       * phần báo giá trị. Bản gốc `return` ngay trong hai nhánh này, nên dán vào ô tiền/phần trăm\n       * chỉ đổi DOM: `onValueChange` không chạy, state nội bộ không đổi, và lần render kế tiếp trả\n       * ô về số cũ — đo trên comitor-ds: dán \"777\" hiện `777 US$`, app vẫn giữ 12345.56.\n       */\n      let newCursorPosition = newMaskedValue.length;\n      if (isCurrencyMask({ mask, pattern: maskPattern.pattern })) {\n        const currencyAtEnd = isCurrencyAtEnd(transformOpts);\n        const symbolStart = newMaskedValue.search(/\\s*[^\\d\\s]+$/);\n        newCursorPosition = currencyAtEnd && symbolStart !== -1 ? symbolStart : newMaskedValue.length;\n      } else if (maskPattern.pattern.includes(\"%\")) {\n        newCursorPosition = Math.max(0, newMaskedValue.length - 1);\n      } else {\n        try {\n          const unmaskedCount = unmasked.length;\n          let position = 0;\n          let count = 0;\n\n          for (let i = 0; i < maskPattern.pattern.length && i < newMaskedValue.length; i++) {\n            if (maskPattern.pattern[i] === \"#\") {\n              count++;\n              if (count <= unmaskedCount) {\n                position = i + 1;\n              }\n            }\n          }\n          newCursorPosition = position;\n        } catch {\n          // Lỗi thì để con trỏ ở cuối.\n        }\n      }\n\n      target.setSelectionRange(newCursorPosition, newCursorPosition);\n\n      if (!isControlled) setInternalValue(newMaskedValue);\n      if (shouldValidate(\"change\")) onInputValidate(unmasked);\n      onValueChangeProp?.(newMaskedValue, unmasked);\n    },\n    [\n      onPasteProp,\n      withoutMask,\n      maskPattern,\n      mask,\n      transformOpts,\n      isControlled,\n      shouldValidate,\n      onInputValidate,\n      onValueChangeProp\n    ]\n  );\n\n  const onKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<InputElement>) => {\n      onKeyDownProp?.(event);\n      if (event.defaultPrevented) return;\n\n      if (withoutMask || !maskPattern) return;\n\n      if (mask === \"ipv4\") return;\n\n      if (event.key === \"Backspace\") {\n        const target = event.target as InputElement;\n        if (!(target instanceof HTMLInputElement)) return;\n        const cursorPosition = target.selectionStart ?? 0;\n        const selectionEnd = target.selectionEnd ?? 0;\n        const currentValue = target.value;\n\n        if (\n          mask === \"currency\" ||\n          mask === \"percentage\" ||\n          maskPattern.pattern.includes(\"$\") ||\n          maskPattern.pattern.includes(\"€\") ||\n          maskPattern.pattern.includes(\"%\")\n        ) {\n          return;\n        }\n\n        if (cursorPosition !== selectionEnd) {\n          return;\n        }\n\n        if (cursorPosition > 0) {\n          const charBeforeCursor = currentValue[cursorPosition - 1];\n\n          if (charBeforeCursor) {\n            event.preventDefault();\n\n            const unmaskedIndex = toUnmaskedIndex({\n              masked: currentValue,\n              pattern: maskPattern.pattern,\n              caret: cursorPosition\n            });\n\n            if (unmaskedIndex > 0) {\n              const currentUnmasked = getUnmaskedValue({\n                value: currentValue,\n                transform: maskPattern.transform,\n                ...transformOpts\n              });\n              const nextUnmasked = currentUnmasked.slice(0, unmaskedIndex - 1) + currentUnmasked.slice(unmaskedIndex);\n              const nextMasked = applyMask({\n                value: nextUnmasked,\n                pattern: maskPattern.pattern,\n                ...transformOpts,\n                mask\n              });\n\n              target.value = nextMasked;\n              const nextCaret = fromUnmaskedIndex({\n                masked: nextMasked,\n                pattern: maskPattern.pattern,\n                unmaskedIndex: unmaskedIndex - 1\n              });\n\n              target.setSelectionRange(nextCaret, nextCaret);\n\n              onValueChangeProp?.(nextMasked, nextUnmasked);\n            }\n            return;\n          }\n        }\n      }\n\n      if (event.key === \"Delete\") {\n        const target = event.target as InputElement;\n        if (!(target instanceof HTMLInputElement)) return;\n        const cursorPosition = target.selectionStart ?? 0;\n        const selectionEnd = target.selectionEnd ?? 0;\n        const currentValue = target.value;\n\n        if (\n          mask === \"currency\" ||\n          mask === \"percentage\" ||\n          maskPattern.pattern.includes(\"$\") ||\n          maskPattern.pattern.includes(\"€\") ||\n          maskPattern.pattern.includes(\"%\")\n        ) {\n          return;\n        }\n\n        if (cursorPosition !== selectionEnd) {\n          return;\n        }\n\n        if (cursorPosition < currentValue.length) {\n          const charAtCursor = currentValue[cursorPosition];\n\n          if (charAtCursor) {\n            event.preventDefault();\n\n            const unmaskedIndex = toUnmaskedIndex({\n              masked: currentValue,\n              pattern: maskPattern.pattern,\n              caret: cursorPosition\n            });\n\n            const currentUnmasked = getUnmaskedValue({\n              value: currentValue,\n              transform: maskPattern.transform,\n              ...transformOpts\n            });\n\n            if (unmaskedIndex < currentUnmasked.length) {\n              const nextUnmasked = currentUnmasked.slice(0, unmaskedIndex) + currentUnmasked.slice(unmaskedIndex + 1);\n              const nextMasked = applyMask({\n                value: nextUnmasked,\n                pattern: maskPattern.pattern,\n                ...transformOpts,\n                mask\n              });\n\n              target.value = nextMasked;\n              const nextCaret = fromUnmaskedIndex({\n                masked: nextMasked,\n                pattern: maskPattern.pattern,\n                unmaskedIndex: unmaskedIndex\n              });\n\n              target.setSelectionRange(nextCaret, nextCaret);\n\n              onValueChangeProp?.(nextMasked, nextUnmasked);\n            }\n            return;\n          }\n        }\n      }\n    },\n    [maskPattern, onKeyDownProp, onValueChangeProp, transformOpts, mask, withoutMask]\n  );\n\n  const InputPrimitive = asChild ? Slot : \"input\";\n\n  return (\n    <InputPrimitive\n      // ⚠ Khác thượng nguồn: chỉ phát thuộc tính khi THẬT SỰ lỗi — `aria-invalid=\"false\"` hợp lệ\n      // nhưng thừa, và cùng quy ước với `Input`/`Combobox` của gói. Đặt TRƯỚC spread để\n      // `aria-invalid` do `<FormControl>` dán vào vẫn thắng.\n      aria-invalid={invalid || undefined}\n      data-disabled={disabled ? \"\" : undefined}\n      data-invalid={invalid ? \"\" : undefined}\n      data-readonly={readOnly ? \"\" : undefined}\n      data-required={required ? \"\" : undefined}\n      data-slot=\"mask-input\"\n      {...inputProps}\n      className={cn(\n        /*\n         * ⚠ Khác thượng nguồn: chuỗi lớp của `Input` Comitor thay cho của shadcn, để ô có mặt nạ\n         * đứng cạnh ô nhập thường trong cùng một form không lệch nhau (cao, nền, viền, cỡ chữ,\n         * focus). Số đo của từng vai trò ở chú thích đầu `input.tsx`:\n         *   viền nghỉ `border-input` · hover `--control-edge-strong` · focus `--primary-ink`;\n         *   lỗi `border-destructive-ink` (không phải `border-destructive` — token TÔ NỀN).\n         * Bỏ `dark:bg-input/30` (viết thẳng thang màu — bảng tương phản cao không đổi được) và\n         * `shadow-xs` (không có trong bộ bóng của gói).\n         */\n        \"w-full h-9 px-3 rounded-md border bg-background text-base md:text-sm text-foreground placeholder:text-muted-foreground\",\n        \"transition-colors duration-150 ease-out\",\n        \"focus:outline-none focus:ring-2 focus:ring-ring/50 focus:border-primary-ink\",\n        \"disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-muted\",\n        \"border-input hover:border-control-edge-strong\",\n        \"aria-invalid:border-destructive-ink aria-invalid:hover:border-destructive-ink aria-invalid:focus:border-destructive-ink aria-invalid:focus:ring-destructive/30\",\n        className\n      )}\n      placeholder={placeholderValue}\n      ref={composedRef}\n      value={displayValue}\n      disabled={disabled}\n      maxLength={calculatedMaxLength}\n      readOnly={readOnly}\n      required={required}\n      inputMode={calculatedInputMode}\n      min={min}\n      max={max}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onKeyDown={onKeyDown}\n      onPaste={onPaste}\n      onChange={onValueChange}\n      onCompositionStart={onCompositionStart}\n      onCompositionEnd={onCompositionEnd}\n    />\n  );\n}\n\nexport { MaskInput, type MaskInputProps };\n"],"mappings":"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","names":[]}

package/dist/components/ui/mention.js

@@ -79,7 +79,7 @@ function MentionInput({ className, ...props }) {
          * ⚠ Khác thượng nguồn: `focus-visible:ring-1 ring-ring` → khuôn focus của `Input`; bỏ
          * `shadow-xs` (bóng của gói chỉ đi qua `--elevation-*`, `Input` không có bóng).
          */
-        "flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm text-foreground transition-colors duration-150 ease-out placeholder:text-muted-foreground hover:border-control-edge-strong focus:border-primary-ink focus:outline-none focus:ring-2 focus:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input-fill",
+        "flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-base md:text-sm text-foreground transition-colors duration-150 ease-out placeholder:text-muted-foreground hover:border-control-edge-strong focus:border-primary-ink focus:outline-none focus:ring-2 focus:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input-fill",
         className
       ),
       ...props

package/dist/components/ui/mention.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/mention.tsx"],"sourcesContent":["\"use client\";\n\n/*\n * Port từ Dice UI (https://diceui.com/docs/components/mention) — MIT, © 2024 Sadman Sakib.\n * Giữ nguyên cấu trúc thượng nguồn để còn đối chiếu ngược được; mọi chỗ đổi đều có chú thích.\n */\n\nimport * as MentionPrimitive from \"@diceui/mention\";\nimport { useDirection } from \"@radix-ui/react-direction\";\nimport * as React from \"react\";\nimport { useComitorMessages } from \"../../i18n/locale-provider.js\";\nimport { cn } from \"../../lib/cn.js\";\n/*\n * Bộ lọc mặc định của `Mention` phải cho ĐÚNG kết quả của `Combobox` / `SearchFilterBar`, nên nó dùng\n * CHÍNH `matchesSearch` — phép chuẩn hoá duy nhất của gói — từ `lib/text-search.ts` (chuyển xuống đó ở\n * `3.1.0` để Tier 1 khỏi nhập ngược lên Tier 2; `composite/text-utils.ts` xuất lại nguyên tên).\n */\nimport { matchesSearch } from \"../../lib/text-search.js\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/use-isomorphic-layout-effect.js\";\nimport { useLazyRef } from \"../../lib/use-lazy-ref.js\";\n\n/*\n * ⚠ Khác thượng nguồn: context RIÊNG của lớp bọc (lõi headless không xuất context của nó):\n *   · `listId` — xem chú thích ở `MentionInput`;\n *   · `itemLabels` (3.1.0) — bảng `value → label` của các `MentionItem` đang mount, cho bộ lọc mặc\n *     định — xem `Mention`.\n */\ninterface MentionWrapperContextValue {\n  listId: string;\n  itemLabels: Map<string, string>;\n}\n\nconst MentionWrapperContext = React.createContext<MentionWrapperContextValue | null>(null);\n\n/**\n * Bộ lọc mặc định: chữ gõ sau ký tự kích hoạt nằm trong NHÃN của mục — không dấu, không phân biệt\n * hoa thường, đúng luật `matchesSearch` của `Combobox` / `SearchFilterBar` (\"@nguyen\" ra \"Nguyễn\",\n * \"@duc\" ra \"Đức\"). Thêm một vế so với nhãn đã BỎ khoảng trắng: lõi đóng danh sách ở dấu cách đầu\n * tiên (xem `Mention`), nên đây là cách duy nhất để đi QUA từ đầu của tên — \"@nguyenvana\" vẫn còn\n * \"Nguyễn Văn An\" mà đã loại \"Nguyễn Văn Bình\".\n */\nfunction matchesMentionLabel(label: string, term: string): boolean {\n  return matchesSearch(label, term) || matchesSearch(label.replace(/\\s+/g, \"\"), term);\n}\n\n/**\n * Mention — ô nhập có gợi ý `@nhắc tên`: gõ ký tự kích hoạt (mặc định `@`) là mở danh sách, chọn\n * một mục thì chèn `@Tên` vào ô và đánh dấu nó thành một khối (xoá là xoá cả khối).\n * Dùng cho ô soạn tin của Chat và bình luận trong task.\n *\n * Phần lõi (dò ký tự kích hoạt, lọc, điều hướng bàn phím, định vị danh sách theo con trỏ) là gói\n * headless `@diceui/mention`; file này chỉ phủ style theo token của Comitor.\n *\n * Lọc: không truyền `onFilter` thì so với NHÃN của mục (`label`, thiếu thì `value` — đúng chữ được\n * chèn sau `@`), không dấu, không phân biệt hoa thường. `onFilter` của app vẫn thắng. `exactMatch`\n * không còn tác dụng: lõi bỏ qua nó khi có `onFilter`, mà nay luôn có.\n *\n * Chữ gõ dừng ở dấu cách ĐẦU TIÊN — luật cứng trong `MentionInput` của lõi (chuỗi sau ký tự kích\n * hoạt có dấu cách thì không còn là mention, danh sách đóng), không prop nào mở được. Tên nhiều chữ\n * vì thế gõ LIỀN: \"@nguyenvana\" tới \"Nguyễn Văn An\" (bộ lọc mặc định so cả nhãn đã bỏ khoảng trắng).\n */\ntype MentionProps = React.ComponentProps<typeof MentionPrimitive.Root>;\n\nfunction Mention({ className, dir: dirProp, onFilter: onFilterProp, ...props }: MentionProps) {\n  /*\n   * ⚠ Khác thượng nguồn: `@diceui/shared` có `useDirection` RIÊNG, đọc một `DirectionContext` mà\n   * gói không xuất ra — nên `DirectionProvider` của Radix (nguồn hướng chữ của mọi component khác\n   * trong gói) không tới được nó. Đọc hướng từ Radix rồi truyền xuống bằng prop `dir`.\n   */\n  const dir = useDirection(dirProp);\n  const listId = React.useId();\n  const itemLabels = useLazyRef(() => new Map<string, string>()).current;\n\n  /*\n   * ⚠ Khác thượng nguồn (3.1.0): bộ lọc MẶC ĐỊNH đi theo nhãn, không dấu. Bộ lọc của lõi so với\n   * `value` — thường là id (\"u-anna\"), nên gõ tên chỉ trúng khi id tình cờ chứa chữ đó — và giữ dấu\n   * (bỏ khoảng trắng/dấu câu rồi so KHỚP MỜ, hạ chữ thường nhưng chuẩn hoá NFC: \"nguyen\" không tới\n   * \"Nguyễn\"). Lõi chỉ đưa `value` cho `onFilter` (gọi từng mục một: `onFilter([value], term)`), nên\n   * nhãn lấy từ bảng `itemLabels` mà `MentionItem` ghi vào.\n   * Lõi còn một bước CHẠY TRƯỚC `onFilter` mà lớp bọc không chạm được: mục có `value` bằng hoặc bắt\n   * đầu bằng chữ gõ (so thô, phân biệt hoa thường) luôn được giữ — \"@u\" giữ mọi id \"u-…\".\n   */\n  const defaultOnFilter = React.useCallback(\n    (values: string[], term: string) =>\n      values.filter((value) => matchesMentionLabel(itemLabels.get(value) ?? value, term)),\n    [itemLabels]\n  );\n\n  const wrapperContext = React.useMemo<MentionWrapperContextValue>(\n    () => ({ listId, itemLabels }),\n    [listId, itemLabels]\n  );\n\n  return (\n    <MentionWrapperContext.Provider value={wrapperContext}>\n      <MentionPrimitive.Root\n        data-slot=\"mention\"\n        dir={dir}\n        onFilter={onFilterProp ?? defaultOnFilter}\n        className={cn(\n          /*\n           * Khối `@Tên` đã chèn. Gói vẽ nó bằng một lớp phủ (`MentionHighlighter`) định vị TUYỆT\n           * ĐỐI nằm ĐÈ LÊN ô nhập: chữ thường của lớp phủ trong suốt để lộ chữ của ô bên dưới,\n           * chỉ đoạn `[data-tag]` là có nền.\n           *\n           * ⚠ Khác thượng nguồn: bản gốc tô `bg-blue-200 text-blue-950` / `dark:bg-blue-800\n           * dark:text-blue-50` (bảng màu mặc định của Tailwind). Đổi sang cặp tonal của gói\n           * (`info` = teal — bậc \"xanh\" của Comitor), và CHỮ là `text-foreground` chứ không phải\n           * `text-info-ink`: nền tint `/15` trong suốt nên chữ của ô nhập vẫn lộ ra dưới khối,\n           * chữ khối vẽ đè đúng chỗ đó — hai lớp chữ phải CÙNG MÀU, lệch màu là thành viền răng\n           * cưa quanh từng nét. (Bản gốc cũng chọn chữ gần như trùng màu chữ thường ở cả hai theme.)\n           * Khối không chỉ nói bằng màu: nó luôn mang ký tự kích hoạt `@` ở đầu.\n           *     chữ ⇄ khối: 15,69:1 (light, trên nền trắng) · 15,15:1 (dark) · tệ nhất 13,44:1\n           *     (dark tương phản cao, `--teal` #2DD4BF). Khối ⇄ nền trang 1,21:1 — cố ý nhạt.\n           */\n          \"**:data-tag:rounded **:data-tag:bg-info/15 **:data-tag:py-px **:data-tag:text-foreground\",\n          className\n        )}\n        {...props}\n      />\n    </MentionWrapperContext.Provider>\n  );\n}\n\ntype MentionLabelProps = React.ComponentProps<typeof MentionPrimitive.Label>;\n\nfunction MentionLabel({ className, ...props }: MentionLabelProps) {\n  return (\n    <MentionPrimitive.Label\n      data-slot=\"mention-label\"\n      className={cn(\"px-0.5 py-1.5 text-sm font-semibold\", className)}\n      {...props}\n    />\n  );\n}\n\ntype MentionInputProps = React.ComponentProps<typeof MentionPrimitive.Input>;\n\n/**\n * Ô nhập của `Mention`. Muốn nhiều dòng (ô soạn tin) thì `asChild` với một `<textarea />`.\n * Không có `MentionLabel` thì PHẢI truyền `aria-label`.\n */\nfunction MentionInput({ className, ...props }: MentionInputProps) {\n  const listId = React.useContext(MentionWrapperContext)?.listId;\n\n  return (\n    <MentionPrimitive.Input\n      data-slot=\"mention-input\"\n      /*\n       * ⚠ Khác thượng nguồn (a11y): ô nhập là `role=\"combobox\"` và gói đặt `aria-controls` trỏ tới\n       * một id sinh trong gốc — nhưng `MentionContent` của gói KHÔNG gắn id đó lên `role=\"listbox\"`,\n       * nên quan hệ combobox → listbox trỏ vào hư không. Lớp bọc tự sinh một id, gắn ở CẢ HAI đầu\n       * (props của ta được trải SAU props của gói nên thắng).\n       */\n      aria-controls={listId}\n      className={cn(\n        /*\n         * Khuôn viền/focus của `Input`: `border-input` lúc nghỉ, `--control-edge-strong` khi rê,\n         * `--primary-ink` + `ring-2 ring/50` khi focus. Nền theo `Textarea` (ô soạn tin thường là\n         * `asChild` + `<textarea>`): trong suốt, ở dark tô `--input-fill` — không `bg-input/30`,\n         * xem chú thích đầu textarea.tsx.\n         * ⚠ Khác thượng nguồn: `focus-visible:ring-1 ring-ring` → khuôn focus của `Input`; bỏ\n         * `shadow-xs` (bóng của gói chỉ đi qua `--elevation-*`, `Input` không có bóng).\n         */\n        \"flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm text-foreground transition-colors duration-150 ease-out placeholder:text-muted-foreground hover:border-control-edge-strong focus:border-primary-ink focus:outline-none focus:ring-2 focus:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input-fill\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\ntype MentionContentProps = React.ComponentProps<typeof MentionPrimitive.Content>;\n\n/**\n * Danh sách gợi ý (`role=\"listbox\"`), render qua portal.\n * Tên cho trình đọc màn hình mặc định là khoá `listLabel` của namespace `mention`\n * (`ComitorLocaleProvider`) — đổi bằng `aria-label`.\n */\nfunction MentionContent({ className, children, \"aria-label\": ariaLabelProp, ...props }: MentionContentProps) {\n  const listId = React.useContext(MentionWrapperContext)?.listId;\n  const t = useComitorMessages(\"mention\");\n  const ariaLabel = ariaLabelProp ?? t.listLabel;\n\n  return (\n    <MentionPrimitive.Portal>\n      <MentionPrimitive.Content\n        data-slot=\"mention-content\"\n        // ⚠ Khác thượng nguồn (a11y): id để `aria-controls` của ô nhập trỏ tới được — xem\n        // `MentionInput`. Và `role=\"listbox\"` BẮT BUỘC có tên (ARIA 1.2); bản gốc không đặt.\n        id={listId}\n        aria-label={ariaLabel}\n        className={cn(\n          /*\n           * Mặt nổi cùng bộ với `PopoverContent`/`Command`: `bg-popover text-popover-foreground`,\n           * bóng `shadow-overlay` (đổi theo theme qua `--elevation-*`).\n           * ⚠ Khác thượng nguồn: `shadow-md` → `shadow-overlay`; thêm `origin-(--dice-transform-origin)`\n           * — biến gói headless tính sẵn theo cạnh bám, để hiệu ứng `zoom-in-95` nở ra TỪ phía con\n           * trỏ như `PopoverContent` (bản gốc nở từ tâm).\n           */\n          \"relative z-50 min-w-32 origin-(--dice-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-overlay data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </MentionPrimitive.Content>\n    </MentionPrimitive.Portal>\n  );\n}\n\ntype MentionItemProps = React.ComponentProps<typeof MentionPrimitive.Item>;\n\n/**\n * Một gợi ý. `value` là thứ app nhận lại (id), `label` là chữ chèn sau `@` — và là chữ bộ lọc mặc\n * định của `Mention` so với chữ gõ (thiếu `label` thì dùng `value`).\n */\nfunction MentionItem({ className, children, value, label, ...props }: MentionItemProps) {\n  const itemLabels = React.useContext(MentionWrapperContext)?.itemLabels;\n  const text = label ?? value;\n\n  /*\n   * ⚠ Khác thượng nguồn (3.1.0): ghi `value → label` cho bộ lọc mặc định của `Mention` — lõi chỉ\n   * đưa `value` cho `onFilter`. Ghi trong layout effect, CÙNG NHỊP lõi tự đăng ký mục (danh sách\n   * đóng thì mục bị gỡ, mở ra thì mount lại), nên bảng luôn khớp đúng những mục lõi đang lọc; lõi\n   * chỉ lọc trong handler sự kiện của ô nhập (gõ, bấm, focus, đổi vùng chọn), tức sau khi commit đã\n   * xong. Gỡ có điều kiện — chỉ khi bảng còn giữ đúng nhãn của mục này — để hai mục trùng `value`\n   * không gỡ nhãn của nhau.\n   */\n  useIsomorphicLayoutEffect(() => {\n    if (!itemLabels) return;\n    itemLabels.set(value, text);\n    return () => {\n      if (itemLabels.get(value) === text) itemLabels.delete(value);\n    };\n  }, [itemLabels, value, text]);\n\n  return (\n    <MentionPrimitive.Item\n      data-slot=\"mention-item\"\n      value={value}\n      label={label}\n      className={cn(\n        /*\n         * ⚠ Khác thượng nguồn: bộ lớp của `CommandItem` (mục đang sáng `bg-accent`/`text-accent-\n         * foreground`, khoảng đệm theo trục mật độ `--menu-item-py`, icon con mặc định\n         * `text-muted-foreground` cỡ 4) — chỉ đổi thuộc tính trạng thái sang dạng của gói headless\n         * (`data-highlighted` / `data-disabled` là thuộc tính CÓ MẶT, không phải `=\"true\"`).\n         */\n        \"relative mt-1 flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-(--menu-item-py) text-sm outline-hidden select-none first:mt-0 data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </MentionPrimitive.Item>\n  );\n}\n\nexport {\n  Mention,\n  MentionContent,\n  type MentionContentProps,\n  MentionInput,\n  type MentionInputProps,\n  MentionItem,\n  type MentionItemProps,\n  MentionLabel,\n  type MentionLabelProps,\n  type MentionProps\n};\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/ui/mention.tsx"],"sourcesContent":["\"use client\";\n\n/*\n * Port từ Dice UI (https://diceui.com/docs/components/mention) — MIT, © 2024 Sadman Sakib.\n * Giữ nguyên cấu trúc thượng nguồn để còn đối chiếu ngược được; mọi chỗ đổi đều có chú thích.\n */\n\nimport * as MentionPrimitive from \"@diceui/mention\";\nimport { useDirection } from \"@radix-ui/react-direction\";\nimport * as React from \"react\";\nimport { useComitorMessages } from \"../../i18n/locale-provider.js\";\nimport { cn } from \"../../lib/cn.js\";\n/*\n * Bộ lọc mặc định của `Mention` phải cho ĐÚNG kết quả của `Combobox` / `SearchFilterBar`, nên nó dùng\n * CHÍNH `matchesSearch` — phép chuẩn hoá duy nhất của gói — từ `lib/text-search.ts` (chuyển xuống đó ở\n * `3.1.0` để Tier 1 khỏi nhập ngược lên Tier 2; `composite/text-utils.ts` xuất lại nguyên tên).\n */\nimport { matchesSearch } from \"../../lib/text-search.js\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/use-isomorphic-layout-effect.js\";\nimport { useLazyRef } from \"../../lib/use-lazy-ref.js\";\n\n/*\n * ⚠ Khác thượng nguồn: context RIÊNG của lớp bọc (lõi headless không xuất context của nó):\n *   · `listId` — xem chú thích ở `MentionInput`;\n *   · `itemLabels` (3.1.0) — bảng `value → label` của các `MentionItem` đang mount, cho bộ lọc mặc\n *     định — xem `Mention`.\n */\ninterface MentionWrapperContextValue {\n  listId: string;\n  itemLabels: Map<string, string>;\n}\n\nconst MentionWrapperContext = React.createContext<MentionWrapperContextValue | null>(null);\n\n/**\n * Bộ lọc mặc định: chữ gõ sau ký tự kích hoạt nằm trong NHÃN của mục — không dấu, không phân biệt\n * hoa thường, đúng luật `matchesSearch` của `Combobox` / `SearchFilterBar` (\"@nguyen\" ra \"Nguyễn\",\n * \"@duc\" ra \"Đức\"). Thêm một vế so với nhãn đã BỎ khoảng trắng: lõi đóng danh sách ở dấu cách đầu\n * tiên (xem `Mention`), nên đây là cách duy nhất để đi QUA từ đầu của tên — \"@nguyenvana\" vẫn còn\n * \"Nguyễn Văn An\" mà đã loại \"Nguyễn Văn Bình\".\n */\nfunction matchesMentionLabel(label: string, term: string): boolean {\n  return matchesSearch(label, term) || matchesSearch(label.replace(/\\s+/g, \"\"), term);\n}\n\n/**\n * Mention — ô nhập có gợi ý `@nhắc tên`: gõ ký tự kích hoạt (mặc định `@`) là mở danh sách, chọn\n * một mục thì chèn `@Tên` vào ô và đánh dấu nó thành một khối (xoá là xoá cả khối).\n * Dùng cho ô soạn tin của Chat và bình luận trong task.\n *\n * Phần lõi (dò ký tự kích hoạt, lọc, điều hướng bàn phím, định vị danh sách theo con trỏ) là gói\n * headless `@diceui/mention`; file này chỉ phủ style theo token của Comitor.\n *\n * Lọc: không truyền `onFilter` thì so với NHÃN của mục (`label`, thiếu thì `value` — đúng chữ được\n * chèn sau `@`), không dấu, không phân biệt hoa thường. `onFilter` của app vẫn thắng. `exactMatch`\n * không còn tác dụng: lõi bỏ qua nó khi có `onFilter`, mà nay luôn có.\n *\n * Chữ gõ dừng ở dấu cách ĐẦU TIÊN — luật cứng trong `MentionInput` của lõi (chuỗi sau ký tự kích\n * hoạt có dấu cách thì không còn là mention, danh sách đóng), không prop nào mở được. Tên nhiều chữ\n * vì thế gõ LIỀN: \"@nguyenvana\" tới \"Nguyễn Văn An\" (bộ lọc mặc định so cả nhãn đã bỏ khoảng trắng).\n */\ntype MentionProps = React.ComponentProps<typeof MentionPrimitive.Root>;\n\nfunction Mention({ className, dir: dirProp, onFilter: onFilterProp, ...props }: MentionProps) {\n  /*\n   * ⚠ Khác thượng nguồn: `@diceui/shared` có `useDirection` RIÊNG, đọc một `DirectionContext` mà\n   * gói không xuất ra — nên `DirectionProvider` của Radix (nguồn hướng chữ của mọi component khác\n   * trong gói) không tới được nó. Đọc hướng từ Radix rồi truyền xuống bằng prop `dir`.\n   */\n  const dir = useDirection(dirProp);\n  const listId = React.useId();\n  const itemLabels = useLazyRef(() => new Map<string, string>()).current;\n\n  /*\n   * ⚠ Khác thượng nguồn (3.1.0): bộ lọc MẶC ĐỊNH đi theo nhãn, không dấu. Bộ lọc của lõi so với\n   * `value` — thường là id (\"u-anna\"), nên gõ tên chỉ trúng khi id tình cờ chứa chữ đó — và giữ dấu\n   * (bỏ khoảng trắng/dấu câu rồi so KHỚP MỜ, hạ chữ thường nhưng chuẩn hoá NFC: \"nguyen\" không tới\n   * \"Nguyễn\"). Lõi chỉ đưa `value` cho `onFilter` (gọi từng mục một: `onFilter([value], term)`), nên\n   * nhãn lấy từ bảng `itemLabels` mà `MentionItem` ghi vào.\n   * Lõi còn một bước CHẠY TRƯỚC `onFilter` mà lớp bọc không chạm được: mục có `value` bằng hoặc bắt\n   * đầu bằng chữ gõ (so thô, phân biệt hoa thường) luôn được giữ — \"@u\" giữ mọi id \"u-…\".\n   */\n  const defaultOnFilter = React.useCallback(\n    (values: string[], term: string) =>\n      values.filter((value) => matchesMentionLabel(itemLabels.get(value) ?? value, term)),\n    [itemLabels]\n  );\n\n  const wrapperContext = React.useMemo<MentionWrapperContextValue>(\n    () => ({ listId, itemLabels }),\n    [listId, itemLabels]\n  );\n\n  return (\n    <MentionWrapperContext.Provider value={wrapperContext}>\n      <MentionPrimitive.Root\n        data-slot=\"mention\"\n        dir={dir}\n        onFilter={onFilterProp ?? defaultOnFilter}\n        className={cn(\n          /*\n           * Khối `@Tên` đã chèn. Gói vẽ nó bằng một lớp phủ (`MentionHighlighter`) định vị TUYỆT\n           * ĐỐI nằm ĐÈ LÊN ô nhập: chữ thường của lớp phủ trong suốt để lộ chữ của ô bên dưới,\n           * chỉ đoạn `[data-tag]` là có nền.\n           *\n           * ⚠ Khác thượng nguồn: bản gốc tô `bg-blue-200 text-blue-950` / `dark:bg-blue-800\n           * dark:text-blue-50` (bảng màu mặc định của Tailwind). Đổi sang cặp tonal của gói\n           * (`info` = teal — bậc \"xanh\" của Comitor), và CHỮ là `text-foreground` chứ không phải\n           * `text-info-ink`: nền tint `/15` trong suốt nên chữ của ô nhập vẫn lộ ra dưới khối,\n           * chữ khối vẽ đè đúng chỗ đó — hai lớp chữ phải CÙNG MÀU, lệch màu là thành viền răng\n           * cưa quanh từng nét. (Bản gốc cũng chọn chữ gần như trùng màu chữ thường ở cả hai theme.)\n           * Khối không chỉ nói bằng màu: nó luôn mang ký tự kích hoạt `@` ở đầu.\n           *     chữ ⇄ khối: 15,69:1 (light, trên nền trắng) · 15,15:1 (dark) · tệ nhất 13,44:1\n           *     (dark tương phản cao, `--teal` #2DD4BF). Khối ⇄ nền trang 1,21:1 — cố ý nhạt.\n           */\n          \"**:data-tag:rounded **:data-tag:bg-info/15 **:data-tag:py-px **:data-tag:text-foreground\",\n          className\n        )}\n        {...props}\n      />\n    </MentionWrapperContext.Provider>\n  );\n}\n\ntype MentionLabelProps = React.ComponentProps<typeof MentionPrimitive.Label>;\n\nfunction MentionLabel({ className, ...props }: MentionLabelProps) {\n  return (\n    <MentionPrimitive.Label\n      data-slot=\"mention-label\"\n      className={cn(\"px-0.5 py-1.5 text-sm font-semibold\", className)}\n      {...props}\n    />\n  );\n}\n\ntype MentionInputProps = React.ComponentProps<typeof MentionPrimitive.Input>;\n\n/**\n * Ô nhập của `Mention`. Muốn nhiều dòng (ô soạn tin) thì `asChild` với một `<textarea />`.\n * Không có `MentionLabel` thì PHẢI truyền `aria-label`.\n */\nfunction MentionInput({ className, ...props }: MentionInputProps) {\n  const listId = React.useContext(MentionWrapperContext)?.listId;\n\n  return (\n    <MentionPrimitive.Input\n      data-slot=\"mention-input\"\n      /*\n       * ⚠ Khác thượng nguồn (a11y): ô nhập là `role=\"combobox\"` và gói đặt `aria-controls` trỏ tới\n       * một id sinh trong gốc — nhưng `MentionContent` của gói KHÔNG gắn id đó lên `role=\"listbox\"`,\n       * nên quan hệ combobox → listbox trỏ vào hư không. Lớp bọc tự sinh một id, gắn ở CẢ HAI đầu\n       * (props của ta được trải SAU props của gói nên thắng).\n       */\n      aria-controls={listId}\n      className={cn(\n        /*\n         * Khuôn viền/focus của `Input`: `border-input` lúc nghỉ, `--control-edge-strong` khi rê,\n         * `--primary-ink` + `ring-2 ring/50` khi focus. Nền theo `Textarea` (ô soạn tin thường là\n         * `asChild` + `<textarea>`): trong suốt, ở dark tô `--input-fill` — không `bg-input/30`,\n         * xem chú thích đầu textarea.tsx.\n         * ⚠ Khác thượng nguồn: `focus-visible:ring-1 ring-ring` → khuôn focus của `Input`; bỏ\n         * `shadow-xs` (bóng của gói chỉ đi qua `--elevation-*`, `Input` không có bóng).\n         */\n        \"flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-base md:text-sm text-foreground transition-colors duration-150 ease-out placeholder:text-muted-foreground hover:border-control-edge-strong focus:border-primary-ink focus:outline-none focus:ring-2 focus:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input-fill\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\ntype MentionContentProps = React.ComponentProps<typeof MentionPrimitive.Content>;\n\n/**\n * Danh sách gợi ý (`role=\"listbox\"`), render qua portal.\n * Tên cho trình đọc màn hình mặc định là khoá `listLabel` của namespace `mention`\n * (`ComitorLocaleProvider`) — đổi bằng `aria-label`.\n */\nfunction MentionContent({ className, children, \"aria-label\": ariaLabelProp, ...props }: MentionContentProps) {\n  const listId = React.useContext(MentionWrapperContext)?.listId;\n  const t = useComitorMessages(\"mention\");\n  const ariaLabel = ariaLabelProp ?? t.listLabel;\n\n  return (\n    <MentionPrimitive.Portal>\n      <MentionPrimitive.Content\n        data-slot=\"mention-content\"\n        // ⚠ Khác thượng nguồn (a11y): id để `aria-controls` của ô nhập trỏ tới được — xem\n        // `MentionInput`. Và `role=\"listbox\"` BẮT BUỘC có tên (ARIA 1.2); bản gốc không đặt.\n        id={listId}\n        aria-label={ariaLabel}\n        className={cn(\n          /*\n           * Mặt nổi cùng bộ với `PopoverContent`/`Command`: `bg-popover text-popover-foreground`,\n           * bóng `shadow-overlay` (đổi theo theme qua `--elevation-*`).\n           * ⚠ Khác thượng nguồn: `shadow-md` → `shadow-overlay`; thêm `origin-(--dice-transform-origin)`\n           * — biến gói headless tính sẵn theo cạnh bám, để hiệu ứng `zoom-in-95` nở ra TỪ phía con\n           * trỏ như `PopoverContent` (bản gốc nở từ tâm).\n           */\n          \"relative z-50 min-w-32 origin-(--dice-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-overlay data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </MentionPrimitive.Content>\n    </MentionPrimitive.Portal>\n  );\n}\n\ntype MentionItemProps = React.ComponentProps<typeof MentionPrimitive.Item>;\n\n/**\n * Một gợi ý. `value` là thứ app nhận lại (id), `label` là chữ chèn sau `@` — và là chữ bộ lọc mặc\n * định của `Mention` so với chữ gõ (thiếu `label` thì dùng `value`).\n */\nfunction MentionItem({ className, children, value, label, ...props }: MentionItemProps) {\n  const itemLabels = React.useContext(MentionWrapperContext)?.itemLabels;\n  const text = label ?? value;\n\n  /*\n   * ⚠ Khác thượng nguồn (3.1.0): ghi `value → label` cho bộ lọc mặc định của `Mention` — lõi chỉ\n   * đưa `value` cho `onFilter`. Ghi trong layout effect, CÙNG NHỊP lõi tự đăng ký mục (danh sách\n   * đóng thì mục bị gỡ, mở ra thì mount lại), nên bảng luôn khớp đúng những mục lõi đang lọc; lõi\n   * chỉ lọc trong handler sự kiện của ô nhập (gõ, bấm, focus, đổi vùng chọn), tức sau khi commit đã\n   * xong. Gỡ có điều kiện — chỉ khi bảng còn giữ đúng nhãn của mục này — để hai mục trùng `value`\n   * không gỡ nhãn của nhau.\n   */\n  useIsomorphicLayoutEffect(() => {\n    if (!itemLabels) return;\n    itemLabels.set(value, text);\n    return () => {\n      if (itemLabels.get(value) === text) itemLabels.delete(value);\n    };\n  }, [itemLabels, value, text]);\n\n  return (\n    <MentionPrimitive.Item\n      data-slot=\"mention-item\"\n      value={value}\n      label={label}\n      className={cn(\n        /*\n         * ⚠ Khác thượng nguồn: bộ lớp của `CommandItem` (mục đang sáng `bg-accent`/`text-accent-\n         * foreground`, khoảng đệm theo trục mật độ `--menu-item-py`, icon con mặc định\n         * `text-muted-foreground` cỡ 4) — chỉ đổi thuộc tính trạng thái sang dạng của gói headless\n         * (`data-highlighted` / `data-disabled` là thuộc tính CÓ MẶT, không phải `=\"true\"`).\n         */\n        \"relative mt-1 flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-(--menu-item-py) text-sm outline-hidden select-none first:mt-0 data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </MentionPrimitive.Item>\n  );\n}\n\nexport {\n  Mention,\n  MentionContent,\n  type MentionContentProps,\n  MentionInput,\n  type MentionInputProps,\n  MentionItem,\n  type MentionItemProps,\n  MentionLabel,\n  type MentionLabelProps,\n  type MentionProps\n};\n"],"mappings":"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","names":[]}

package/dist/components/ui/select.js

@@ -19,7 +19,7 @@ function SelectTrigger({ className, size = "default", children, ...props }) {
       "data-slot": "select-trigger",
       "data-size": size,
       className: cn(
-        "border-input bg-background text-foreground data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground hover:border-control-edge-strong focus:outline-none focus:ring-2 focus:ring-ring/50 focus:border-primary-ink aria-invalid:border-destructive-ink aria-invalid:ring-destructive/30 flex w-fit items-center justify-between gap-2 rounded-md border px-3 text-sm whitespace-nowrap transition-colors duration-150 ease-out outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-input bg-background text-foreground data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground hover:border-control-edge-strong focus:outline-none focus:ring-2 focus:ring-ring/50 focus:border-primary-ink aria-invalid:border-destructive-ink aria-invalid:ring-destructive/30 flex w-fit items-center justify-between gap-2 rounded-md border px-3 text-base md:text-sm whitespace-nowrap transition-colors duration-150 ease-out outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,

package/dist/components/ui/select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/select.tsx"],"sourcesContent":["\"use client\";\n\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\n\n/**\n * Select (Radix) theo style new-york + brand Comitor.\n * Trigger có 2 cỡ (`sm` = h-8, `default` = h-9); mục đang chọn tô nền gold nhạt.\n * Lưu ý: Radix KHÔNG nhận `value=\"\"` cho SelectItem — dùng sentinel (vd `__empty__`).\n *\n * ─ VIỀN TRIGGER: BA TRẠNG THÁI, BA TOKEN ─\n * Trigger nền trong suốt nên VIỀN là thứ duy nhất khoanh vùng control → ngưỡng 3:1 ở mọi\n * trạng thái, và hover/focus phải ĐẬM HƠN lúc nghỉ chứ không nhạt đi:\n *\n *     nghỉ  `border-input` (= --control-edge)   : 3,83:1 (light) · 4,94:1 (dark) ✓\n *     hover `border-control-edge-strong`        : 10,55:1 (light) · 11,65:1 (dark) ✓\n *     focus `border-primary-ink`                : 6,51:1 (light) · 12,67:1 (dark) ✓\n *     lỗi   `border-destructive-ink`            : 7,15:1 (light) · 6,84:1 (dark) ✓\n *\n * Bản trước đi SAI CHIỀU ở light: `hover:border-ash-300` chỉ **1,62:1** và\n * `focus:border-gold-300` chỉ **1,86:1** — rê chuột hoặc focus vào là trigger biến mất, đúng\n * cái bẫy mà docs/hop-dong-mau.md §3 nêu. Viền lỗi cũ `border-red` (#D64545) chỉ 4,38:1 và là\n * token TÔ NỀN đem làm viền; bậc `-ink` mới là bậc đứng trên nền trang.\n * (`ring-*` giữ nguyên bậc `--destructive`/`--ring`: quầng ring là vai trò TÔ, đúng hợp đồng.)\n */\n\nexport type SelectProps = React.ComponentProps<typeof SelectPrimitive.Root>;\nexport type SelectGroupProps = React.ComponentProps<typeof SelectPrimitive.Group>;\nexport type SelectValueProps = React.ComponentProps<typeof SelectPrimitive.Value>;\nexport type SelectTriggerProps = React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  /** Chiều cao trigger: `sm` = 32px, `default` = 36px. */\n  size?: \"sm\" | \"default\";\n};\nexport type SelectContentProps = React.ComponentProps<typeof SelectPrimitive.Content>;\nexport type SelectLabelProps = React.ComponentProps<typeof SelectPrimitive.Label>;\nexport type SelectItemProps = React.ComponentProps<typeof SelectPrimitive.Item>;\nexport type SelectSeparatorProps = React.ComponentProps<typeof SelectPrimitive.Separator>;\nexport type SelectScrollUpButtonProps = React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>;\nexport type SelectScrollDownButtonProps = React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>;\n\nfunction Select({ ...props }: SelectProps) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />;\n}\n\nfunction SelectGroup({ ...props }: SelectGroupProps) {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />;\n}\n\nfunction SelectValue({ ...props }: SelectValueProps) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />;\n}\n\nfunction SelectTrigger({ className, size = \"default\", children, ...props }: SelectTriggerProps) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input bg-background text-foreground data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground hover:border-control-edge-strong focus:outline-none focus:ring-2 focus:ring-ring/50 focus:border-primary-ink aria-invalid:border-destructive-ink aria-invalid:ring-destructive/30 flex w-fit items-center justify-between gap-2 rounded-md border px-3 text-sm whitespace-nowrap transition-colors duration-150 ease-out outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDownIcon className=\"size-3.5 text-muted-foreground\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n}\n\nfunction SelectContent({ className, children, position = \"popper\", ...props }: SelectContentProps) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border shadow-overlay\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className\n        )}\n        position={position}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          className={cn(\n            \"p-1\",\n            position === \"popper\" &&\n              \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  );\n}\n\nfunction SelectLabel({ className, ...props }: SelectLabelProps) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * SelectItem — mục trong danh sách chọn.\n *\n * ─ KHOẢNG CÁCH GIỮA CÁC MỤC: `mt-1 first:mt-0` ─\n * Đặt trên CHÍNH mục chứ không phải `gap` của vùng chứa, và cả họ menu của gói đều theo đúng lối\n * này (`CommandItem`, `DropdownMenuItem`/CheckboxItem/RadioItem/SubTrigger, `ContextMenu*`,\n * `Menubar*` — 14 công thức, cùng một class).\n *\n * Vì sao không `gap` ở vùng chứa: mục có thể nằm TRỰC TIẾP trong viewport hoặc lồng trong một\n * `Group`, nên `gap` phải khai ở hai chỗ và sẽ lệch nhau ngay lần sửa đầu tiên. `:first-child`\n * thì tính theo cha thật của mục, nên một class chạy đúng cho cả hai bố cục.\n *\n * Và vì sao không đổi viewport sang `display:flex`: viewport của Radix mang sẵn\n * `h-[var(--radix-select-trigger-height)]` — hôm nay không ăn thua vì nó là flex item của Content,\n * nhưng đổi kiểu bố cục ra là đánh cược rằng nó vẫn im. Margin không đụng tới chuyện đó.\n *\n * ⚠ `Menubar`Trigger KHÔNG có class này: nó nằm trên thanh NGANG, không phải trong danh sách dọc.\n *\n * Mục ĐANG RÊ/ĐANG FOCUS và mục ĐÃ CHỌN dùng CÙNG một tint `--accent`, và tint đó quá nhạt để\n * TỰ mang thông tin: ~1,0:1 với nền của popover. Nó chỉ là lớp nhận biết mềm.\n *\n * `bg-accent` chứ không phải `bg-gold-50 dark:bg-gold-500/10` như bản trước: `--accent` LÀ nhóm\n * token mà hợp đồng màu cấp riêng cho tint trạng thái nhạt, và mọi menu khác của gói\n * (`DropdownMenu`, `ContextMenu`, `Menubar`) đều dùng đúng nó — `Select` là chỗ duy nhất còn tô\n * bằng màu thang thô. Ở light hai bên là CÙNG một hex `#FBF5DC` nên không đổi gì trên màn hình;\n * ở dark tint đổi từ warm `#191814` sang trung tính `#1E2128`, tức khớp lại với các menu kia.\n *\n * ⚠ Vậy nên thứ NÓI \"đã chọn\" phải là DẤU CHECK bên phải, không phải nền: nó là một hình dạng\n * (WCAG 1.4.1 — không truyền tin chỉ bằng màu) và được nhuộm `text-app-accent-ink`, đo TRÊN CHÍNH\n * tint gold mà nó đứng lên: 5,96:1 (light) · 11,15:1 (dark), tệ nhất 10,04:1 khi popover nằm trên\n * `--muted`. Bỏ dấu check đi là mục đã chọn chỉ còn khác nhau ở một lớp tint 1,09:1 — lúc đó mới\n * là lỗi thật.\n *\n * Trước đây còn một vạch `border-l-2 border-l-app-accent-ink` làm dấu hiệu THỨ HAI. Đã bỏ: dấu\n * check một mình đã đủ cho cả 1.4.1 lẫn 1.4.11, `Combobox`/`DropdownMenu` xưa nay cũng chỉ có dấu\n * check, và mẫu Select ở comitor-ds không có vạch nào. Bỏ luôn `border-l-transparent` đi kèm —\n * nó chỉ tồn tại để giữ chỗ 2px cho vạch đó, giờ `pl-2` khớp đúng bản duyệt.\n *\n * Vì sao dấu check là `-ink` chứ không `--app-accent` trần: gold `#E8B824` chỉ 1,86:1 với nền\n * trắng — đúng cái bẫy \"token tô NỀN đem vẽ DẤU\" mà hợp đồng màu §1 cấm.\n */\nfunction SelectItem({ className, children, ...props }: SelectItemProps) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent data-[state=checked]:bg-accent [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 mt-1 first:mt-0 rounded-sm py-(--menu-item-py) pr-8 pl-2 text-sm outline-hidden select-none transition-colors duration-150 ease-out data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4 text-app-accent-ink\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  );\n}\n\nfunction SelectSeparator({ className, ...props }: SelectSeparatorProps) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border pointer-events-none -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction SelectScrollUpButton({ className, ...props }: SelectScrollUpButtonProps) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\"flex cursor-default items-center justify-center py-1\", className)}\n      {...props}\n    >\n      <ChevronUpIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollUpButton>\n  );\n}\n\nfunction SelectScrollDownButton({ className, ...props }: SelectScrollDownButtonProps) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\"flex cursor-default items-center justify-center py-1\", className)}\n      {...props}\n    >\n      <ChevronDownIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollDownButton>\n  );\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue\n};\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/ui/select.tsx"],"sourcesContent":["\"use client\";\n\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\n\n/**\n * Select (Radix) theo style new-york + brand Comitor.\n * Trigger có 2 cỡ (`sm` = h-8, `default` = h-9); mục đang chọn tô nền gold nhạt.\n * Lưu ý: Radix KHÔNG nhận `value=\"\"` cho SelectItem — dùng sentinel (vd `__empty__`).\n *\n * ─ VIỀN TRIGGER: BA TRẠNG THÁI, BA TOKEN ─\n * Trigger nền trong suốt nên VIỀN là thứ duy nhất khoanh vùng control → ngưỡng 3:1 ở mọi\n * trạng thái, và hover/focus phải ĐẬM HƠN lúc nghỉ chứ không nhạt đi:\n *\n *     nghỉ  `border-input` (= --control-edge)   : 3,83:1 (light) · 4,94:1 (dark) ✓\n *     hover `border-control-edge-strong`        : 10,55:1 (light) · 11,65:1 (dark) ✓\n *     focus `border-primary-ink`                : 6,51:1 (light) · 12,67:1 (dark) ✓\n *     lỗi   `border-destructive-ink`            : 7,15:1 (light) · 6,84:1 (dark) ✓\n *\n * Bản trước đi SAI CHIỀU ở light: `hover:border-ash-300` chỉ **1,62:1** và\n * `focus:border-gold-300` chỉ **1,86:1** — rê chuột hoặc focus vào là trigger biến mất, đúng\n * cái bẫy mà docs/hop-dong-mau.md §3 nêu. Viền lỗi cũ `border-red` (#D64545) chỉ 4,38:1 và là\n * token TÔ NỀN đem làm viền; bậc `-ink` mới là bậc đứng trên nền trang.\n * (`ring-*` giữ nguyên bậc `--destructive`/`--ring`: quầng ring là vai trò TÔ, đúng hợp đồng.)\n */\n\nexport type SelectProps = React.ComponentProps<typeof SelectPrimitive.Root>;\nexport type SelectGroupProps = React.ComponentProps<typeof SelectPrimitive.Group>;\nexport type SelectValueProps = React.ComponentProps<typeof SelectPrimitive.Value>;\nexport type SelectTriggerProps = React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  /** Chiều cao trigger: `sm` = 32px, `default` = 36px. */\n  size?: \"sm\" | \"default\";\n};\nexport type SelectContentProps = React.ComponentProps<typeof SelectPrimitive.Content>;\nexport type SelectLabelProps = React.ComponentProps<typeof SelectPrimitive.Label>;\nexport type SelectItemProps = React.ComponentProps<typeof SelectPrimitive.Item>;\nexport type SelectSeparatorProps = React.ComponentProps<typeof SelectPrimitive.Separator>;\nexport type SelectScrollUpButtonProps = React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>;\nexport type SelectScrollDownButtonProps = React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>;\n\nfunction Select({ ...props }: SelectProps) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />;\n}\n\nfunction SelectGroup({ ...props }: SelectGroupProps) {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />;\n}\n\nfunction SelectValue({ ...props }: SelectValueProps) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />;\n}\n\nfunction SelectTrigger({ className, size = \"default\", children, ...props }: SelectTriggerProps) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input bg-background text-foreground data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground hover:border-control-edge-strong focus:outline-none focus:ring-2 focus:ring-ring/50 focus:border-primary-ink aria-invalid:border-destructive-ink aria-invalid:ring-destructive/30 flex w-fit items-center justify-between gap-2 rounded-md border px-3 text-base md:text-sm whitespace-nowrap transition-colors duration-150 ease-out outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDownIcon className=\"size-3.5 text-muted-foreground\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n}\n\nfunction SelectContent({ className, children, position = \"popper\", ...props }: SelectContentProps) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border shadow-overlay\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className\n        )}\n        position={position}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          className={cn(\n            \"p-1\",\n            position === \"popper\" &&\n              \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  );\n}\n\nfunction SelectLabel({ className, ...props }: SelectLabelProps) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * SelectItem — mục trong danh sách chọn.\n *\n * ─ KHOẢNG CÁCH GIỮA CÁC MỤC: `mt-1 first:mt-0` ─\n * Đặt trên CHÍNH mục chứ không phải `gap` của vùng chứa, và cả họ menu của gói đều theo đúng lối\n * này (`CommandItem`, `DropdownMenuItem`/CheckboxItem/RadioItem/SubTrigger, `ContextMenu*`,\n * `Menubar*` — 14 công thức, cùng một class).\n *\n * Vì sao không `gap` ở vùng chứa: mục có thể nằm TRỰC TIẾP trong viewport hoặc lồng trong một\n * `Group`, nên `gap` phải khai ở hai chỗ và sẽ lệch nhau ngay lần sửa đầu tiên. `:first-child`\n * thì tính theo cha thật của mục, nên một class chạy đúng cho cả hai bố cục.\n *\n * Và vì sao không đổi viewport sang `display:flex`: viewport của Radix mang sẵn\n * `h-[var(--radix-select-trigger-height)]` — hôm nay không ăn thua vì nó là flex item của Content,\n * nhưng đổi kiểu bố cục ra là đánh cược rằng nó vẫn im. Margin không đụng tới chuyện đó.\n *\n * ⚠ `Menubar`Trigger KHÔNG có class này: nó nằm trên thanh NGANG, không phải trong danh sách dọc.\n *\n * Mục ĐANG RÊ/ĐANG FOCUS và mục ĐÃ CHỌN dùng CÙNG một tint `--accent`, và tint đó quá nhạt để\n * TỰ mang thông tin: ~1,0:1 với nền của popover. Nó chỉ là lớp nhận biết mềm.\n *\n * `bg-accent` chứ không phải `bg-gold-50 dark:bg-gold-500/10` như bản trước: `--accent` LÀ nhóm\n * token mà hợp đồng màu cấp riêng cho tint trạng thái nhạt, và mọi menu khác của gói\n * (`DropdownMenu`, `ContextMenu`, `Menubar`) đều dùng đúng nó — `Select` là chỗ duy nhất còn tô\n * bằng màu thang thô. Ở light hai bên là CÙNG một hex `#FBF5DC` nên không đổi gì trên màn hình;\n * ở dark tint đổi từ warm `#191814` sang trung tính `#1E2128`, tức khớp lại với các menu kia.\n *\n * ⚠ Vậy nên thứ NÓI \"đã chọn\" phải là DẤU CHECK bên phải, không phải nền: nó là một hình dạng\n * (WCAG 1.4.1 — không truyền tin chỉ bằng màu) và được nhuộm `text-app-accent-ink`, đo TRÊN CHÍNH\n * tint gold mà nó đứng lên: 5,96:1 (light) · 11,15:1 (dark), tệ nhất 10,04:1 khi popover nằm trên\n * `--muted`. Bỏ dấu check đi là mục đã chọn chỉ còn khác nhau ở một lớp tint 1,09:1 — lúc đó mới\n * là lỗi thật.\n *\n * Trước đây còn một vạch `border-l-2 border-l-app-accent-ink` làm dấu hiệu THỨ HAI. Đã bỏ: dấu\n * check một mình đã đủ cho cả 1.4.1 lẫn 1.4.11, `Combobox`/`DropdownMenu` xưa nay cũng chỉ có dấu\n * check, và mẫu Select ở comitor-ds không có vạch nào. Bỏ luôn `border-l-transparent` đi kèm —\n * nó chỉ tồn tại để giữ chỗ 2px cho vạch đó, giờ `pl-2` khớp đúng bản duyệt.\n *\n * Vì sao dấu check là `-ink` chứ không `--app-accent` trần: gold `#E8B824` chỉ 1,86:1 với nền\n * trắng — đúng cái bẫy \"token tô NỀN đem vẽ DẤU\" mà hợp đồng màu §1 cấm.\n */\nfunction SelectItem({ className, children, ...props }: SelectItemProps) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent data-[state=checked]:bg-accent [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 mt-1 first:mt-0 rounded-sm py-(--menu-item-py) pr-8 pl-2 text-sm outline-hidden select-none transition-colors duration-150 ease-out data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4 text-app-accent-ink\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  );\n}\n\nfunction SelectSeparator({ className, ...props }: SelectSeparatorProps) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border pointer-events-none -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction SelectScrollUpButton({ className, ...props }: SelectScrollUpButtonProps) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\"flex cursor-default items-center justify-center py-1\", className)}\n      {...props}\n    >\n      <ChevronUpIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollUpButton>\n  );\n}\n\nfunction SelectScrollDownButton({ className, ...props }: SelectScrollDownButtonProps) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\"flex cursor-default items-center justify-center py-1\", className)}\n      {...props}\n    >\n      <ChevronDownIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollDownButton>\n  );\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue\n};\n"],"mappings":"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","names":[]}