@customafk/lunas-ui 0.0.4 → 0.0.5

package/dist/multi-select.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select.cjs","names":["React","groupOption: GroupOption","cn","CommandItem","value","Command","X","CommandPrimitive","CommandList","CommandSeparator","CommandGroup","Button","PlusIcon"],"sources":["../packages/components/ui/multi-select.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { Command as CommandPrimitive, useCommandState } from \"cmdk\";\nimport { PlusIcon, X } from \"lucide-react\";\n\nimport {\n  Command,\n  CommandGroup,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from \"@/components/ui/command\";\nimport { cn } from \"@/lib/utils\";\n\nimport { Button } from \"./button\";\n\nexport interface Option {\n  value: string;\n  label: string;\n  disable?: boolean;\n  /** fixed option that can&lsquo;t be removed. */\n  fixed?: boolean;\n  /** Group the options by providing key. */\n  [key: string]: string | boolean | undefined;\n}\ninterface GroupOption {\n  [key: string]: Option[];\n}\n\ninterface MultipleSelectorProps {\n  value?: Option[];\n  defaultOptions?: Option[];\n  /** manually controlled options */\n  options?: Option[];\n  placeholder?: string;\n  /** Loading component. */\n  loadingIndicator?: React.ReactNode;\n  /** Empty component. */\n  emptyIndicator?: React.ReactNode;\n  /** Debounce time for async search. Only work with `onSearch`. */\n  delay?: number;\n  /**\n   * Only work with `onSearch` prop. Trigger search when `onFocus`.\n   * For example, when user click on the input, it will trigger the search to get initial options.\n   **/\n  triggerSearchOnFocus?: boolean;\n  /** async search */\n  onSearch?: (value: string) => Promise<Option[]>;\n  /**\n   * sync search. This search will not showing loadingIndicator.\n   * The rest props are the same as async search.\n   * i.e.: creatable, groupBy, delay.\n   **/\n  onSearchSync?: (value: string) => Option[];\n  onChange?: (options: Option[]) => void;\n  /** Limit the maximum number of selected options. */\n  maxSelected?: number;\n  /** When the number of selected options exceeds the limit, the onMaxSelected will be called. */\n  onMaxSelected?: (maxLimit: number) => void;\n  /** Hide the placeholder when there are options selected. */\n  hidePlaceholderWhenSelected?: boolean;\n  disabled?: boolean;\n  /** Group the options base on provided key. */\n  groupBy?: string;\n  className?: string;\n  badgeClassName?: string;\n  /**\n   * First item selected is a default behavior by cmdk. That is why the default is true.\n   * This is a workaround solution by add a dummy item.\n   *\n   * @reference: https://github.com/pacocoursey/cmdk/issues/171\n   */\n  selectFirstItem?: boolean;\n  /** Allow user to create option when there is no option matched. */\n  creatable?: boolean;\n  /** Props of `Command` */\n  commandProps?: React.ComponentPropsWithoutRef<typeof Command>;\n  /** Props of `CommandInput` */\n  inputProps?: Omit<\n    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>,\n    \"value\" | \"placeholder\" | \"disabled\"\n  >;\n  /** hide the clear all button. */\n  hideClearAllButton?: boolean;\n\n  /**  Add new item event for select with search */\n  onAddNewItem?: () => void;\n}\n\nexport interface MultipleSelectorRef {\n  selectedValue: Option[];\n  input: HTMLInputElement;\n  focus: () => void;\n  reset: () => void;\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useDebounce<T>(value: T, delay?: number): T {\n  const [debouncedValue, setDebouncedValue] = React.useState<T>(value);\n\n  React.useEffect(() => {\n    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);\n\n    return () => {\n      clearTimeout(timer);\n    };\n  }, [value, delay]);\n\n  return debouncedValue;\n}\n\nfunction transToGroupOption(options: Option[], groupBy?: string) {\n  if (options.length === 0) {\n    return {};\n  }\n  if (!groupBy) {\n    return {\n      \"\": options,\n    };\n  }\n\n  const groupOption: GroupOption = {};\n  options.forEach((option) => {\n    const key = (option[groupBy] as string) || \"\";\n    if (!groupOption[key]) {\n      groupOption[key] = [];\n    }\n    groupOption[key].push(option);\n  });\n  return groupOption;\n}\n\nfunction removePickedOption(groupOption: GroupOption, picked: Option[]) {\n  const cloneOption = JSON.parse(JSON.stringify(groupOption)) as GroupOption;\n\n  for (const [key, value] of Object.entries(cloneOption)) {\n    cloneOption[key] = value.filter(\n      (val) => !picked.find((p) => p.value === val.value),\n    );\n  }\n  return cloneOption;\n}\n\nfunction isOptionsExist(groupOption: GroupOption, targetOption: Option[]) {\n  for (const [, value] of Object.entries(groupOption)) {\n    if (\n      value.some((option) => targetOption.find((p) => p.value === option.value))\n    ) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * The `CommandEmpty` of shadcn/ui will cause the cmdk empty not rendering correctly.\n * So we create one and copy the `Empty` implementation from `cmdk`.\n *\n * @reference: https://github.com/hsuanyi-chou/shadcn-ui-expansions/issues/34#issuecomment-1949561607\n **/\nconst CommandEmpty = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof CommandPrimitive.Empty>\n>(({ className, ...props }, forwardedRef) => {\n  const render = useCommandState((state) => state.filtered.count === 0);\n\n  if (!render) return null;\n\n  return (\n    <div\n      ref={forwardedRef}\n      className={cn(\"px-2 py-4 text-center text-sm\", className)}\n      cmdk-empty=\"\"\n      role=\"presentation\"\n      {...props}\n    />\n  );\n});\n\nCommandEmpty.displayName = \"CommandEmpty\";\n\nconst MultipleSelector = React.forwardRef<\n  MultipleSelectorRef,\n  MultipleSelectorProps\n>(\n  (\n    {\n      value,\n      onChange,\n      placeholder,\n      defaultOptions: arrayDefaultOptions = [],\n      options: arrayOptions,\n      delay,\n      onSearch,\n      onSearchSync,\n      loadingIndicator: LoadingIndicator,\n      emptyIndicator,\n      maxSelected = Number.MAX_SAFE_INTEGER,\n      onMaxSelected,\n      hidePlaceholderWhenSelected,\n      disabled,\n      groupBy,\n      className,\n      badgeClassName,\n      selectFirstItem = true,\n      creatable = false,\n      triggerSearchOnFocus = false,\n      commandProps,\n      inputProps,\n      hideClearAllButton = false,\n      onAddNewItem,\n    }: MultipleSelectorProps,\n    ref: React.Ref<MultipleSelectorRef>,\n  ) => {\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const dropdownRef = React.useRef<HTMLDivElement>(null); // Added this\n\n    const [open, setOpen] = React.useState(false);\n    const [onScrollbar, setOnScrollbar] = React.useState(false);\n    const [isLoading, setIsLoading] = React.useState(false);\n\n    const [selected, setSelected] = React.useState<Option[]>(value || []);\n    const [options, setOptions] = React.useState<GroupOption>(\n      transToGroupOption(arrayDefaultOptions, groupBy),\n    );\n    const [inputValue, setInputValue] = React.useState(\"\");\n\n    const debouncedSearchTerm = useDebounce(inputValue, delay || 500);\n\n    React.useImperativeHandle(\n      ref,\n      () => ({\n        selectedValue: [...selected],\n        input: inputRef.current as HTMLInputElement,\n        focus: () => inputRef?.current?.focus(),\n        reset: () => setSelected([]),\n      }),\n      [selected],\n    );\n\n    const handleClickOutside = React.useCallback(\n      (event: MouseEvent | TouchEvent) => {\n        if (\n          dropdownRef.current &&\n          !dropdownRef.current.contains(event.target as Node) &&\n          inputRef.current &&\n          !inputRef.current.contains(event.target as Node)\n        ) {\n          setOpen(false);\n          inputRef.current.blur();\n        }\n      },\n      [],\n    );\n\n    const handleUnselect = React.useCallback(\n      (option: Option) => {\n        const newOptions = selected.filter((s) => s.value !== option.value);\n        setSelected(newOptions);\n        onChange?.(newOptions);\n      },\n      [onChange, selected],\n    );\n\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent<HTMLDivElement>) => {\n        const input = inputRef.current;\n        if (!input) return;\n\n        if (e.key === \"Delete\" || e.key === \"Backspace\") {\n          if (input.value === \"\" && selected.length > 0) {\n            const lastSelectOption = selected[selected.length - 1];\n            // If last item is fixed, we should not remove it.\n            if (!lastSelectOption.fixed) {\n              handleUnselect(selected[selected.length - 1]);\n            }\n          }\n        }\n\n        // This is not a default behavior of the <input /> field\n        if (e.key === \"Escape\") {\n          input.blur();\n        }\n      },\n      [handleUnselect, selected],\n    );\n\n    React.useEffect(() => {\n      if (open) {\n        document.addEventListener(\"mousedown\", handleClickOutside);\n        document.addEventListener(\"touchend\", handleClickOutside);\n      } else {\n        document.removeEventListener(\"mousedown\", handleClickOutside);\n        document.removeEventListener(\"touchend\", handleClickOutside);\n      }\n\n      return () => {\n        document.removeEventListener(\"mousedown\", handleClickOutside);\n        document.removeEventListener(\"touchend\", handleClickOutside);\n      };\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [open]);\n\n    React.useEffect(() => {\n      if (value) {\n        setSelected(value);\n      }\n    }, [value]);\n\n    React.useEffect(() => {\n      /** If `onSearch` is provided, do not trigger options updated. */\n      if (!arrayOptions || onSearch) {\n        return;\n      }\n      const newOption = transToGroupOption(arrayOptions || [], groupBy);\n      if (JSON.stringify(newOption) !== JSON.stringify(options)) {\n        setOptions(newOption);\n      }\n    }, [arrayDefaultOptions, arrayOptions, groupBy, onSearch, options]);\n\n    React.useEffect(() => {\n      /** sync search */\n\n      const doSearchSync = () => {\n        const res = onSearchSync?.(debouncedSearchTerm);\n        setOptions(transToGroupOption(res || [], groupBy));\n      };\n\n      const exec = async () => {\n        if (!onSearchSync || !open) return;\n\n        if (triggerSearchOnFocus) {\n          doSearchSync();\n        }\n\n        if (debouncedSearchTerm) {\n          doSearchSync();\n        }\n      };\n\n      void exec();\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [debouncedSearchTerm, groupBy, open, triggerSearchOnFocus]);\n\n    React.useEffect(() => {\n      /** async search */\n\n      const doSearch = async () => {\n        setIsLoading(true);\n        const res = await onSearch?.(debouncedSearchTerm);\n        setOptions(transToGroupOption(res || [], groupBy));\n        setIsLoading(false);\n      };\n\n      const exec = async () => {\n        if (!onSearch || !open) return;\n\n        if (triggerSearchOnFocus) {\n          await doSearch();\n        }\n\n        if (debouncedSearchTerm) {\n          await doSearch();\n        }\n      };\n\n      void exec();\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [debouncedSearchTerm, groupBy, open, triggerSearchOnFocus]);\n\n    const CreatableItem = () => {\n      if (!creatable) return undefined;\n      if (\n        isOptionsExist(options, [{ value: inputValue, label: inputValue }]) ||\n        selected.find((s) => s.value === inputValue)\n      ) {\n        return undefined;\n      }\n\n      const Item = (\n        <CommandItem\n          value={inputValue}\n          className=\"cursor-pointer\"\n          onMouseDown={(e) => {\n            e.preventDefault();\n            e.stopPropagation();\n          }}\n          onSelect={(value: string) => {\n            if (selected.length >= maxSelected) {\n              onMaxSelected?.(selected.length);\n              return;\n            }\n            setInputValue(\"\");\n            const newOptions = [...selected, { value, label: value }];\n            setSelected(newOptions);\n            onChange?.(newOptions);\n          }}\n        >\n          {`Create \"${inputValue}\"`}\n        </CommandItem>\n      );\n\n      // For normal creatable\n      if (!onSearch && inputValue.length > 0) {\n        return Item;\n      }\n\n      // For async search creatable. avoid showing creatable item before loading at first.\n      if (onSearch && debouncedSearchTerm.length > 0 && !isLoading) {\n        return Item;\n      }\n\n      return undefined;\n    };\n\n    const EmptyItem = React.useCallback(() => {\n      if (!emptyIndicator) return undefined;\n\n      // For async search that showing emptyIndicator\n      if (onSearch && !creatable && Object.keys(options).length === 0) {\n        return (\n          <CommandItem value=\"-\" disabled>\n            {emptyIndicator}\n          </CommandItem>\n        );\n      }\n\n      return <CommandEmpty>{emptyIndicator}</CommandEmpty>;\n    }, [creatable, emptyIndicator, onSearch, options]);\n\n    const selectables = React.useMemo<GroupOption>(\n      () => removePickedOption(options, selected),\n      [options, selected],\n    );\n\n    /** Avoid Creatable Selector freezing or lagging when paste a long string. */\n    const commandFilter = React.useCallback(() => {\n      if (commandProps?.filter) {\n        return commandProps.filter;\n      }\n\n      if (creatable) {\n        return (value: string, search: string) => {\n          return value.toLowerCase().includes(search.toLowerCase()) ? 1 : -1;\n        };\n      }\n      // Using default filter in `cmdk`. We don&lsquo;t have to provide it.\n      return undefined;\n    }, [creatable, commandProps?.filter]);\n\n    return (\n      <Command\n        ref={dropdownRef}\n        {...commandProps}\n        onKeyDown={(e) => {\n          handleKeyDown(e);\n          commandProps?.onKeyDown?.(e);\n        }}\n        className={cn(\n          \"h-auto overflow-visible bg-transparent\",\n          commandProps?.className,\n        )}\n        shouldFilter={\n          commandProps?.shouldFilter !== undefined\n            ? commandProps.shouldFilter\n            : !onSearch\n        } // When onSearch is provided, we don&lsquo;t want to filter the options. You can still override it.\n        filter={commandFilter()}\n      >\n        <div\n          className={cn(\n            \"border-input focus-within:border-primary focus-within:ring-ring relative rounded-md border text-sm transition-shadow focus-within:ring-4 focus-within:outline-hidden\",\n            \"has-disabled:bg-muted\",\n            \"has-disabled:text-muted-foreground\",\n            {\n              \"p-1\": selected.length !== 0,\n              \"cursor-text\": !disabled && selected.length !== 0,\n            },\n            !hideClearAllButton && \"pe-9\",\n            className,\n          )}\n          onClick={() => {\n            if (disabled) return;\n            inputRef?.current?.focus();\n          }}\n        >\n          <div className=\"flex flex-wrap gap-1\">\n            {selected.map((option) => {\n              return (\n                <div\n                  key={option.value}\n                  className={cn(\n                    \"animate-fadeIn bg-background text-secondary-foreground hover:bg-background relative inline-flex h-7 cursor-default items-center rounded-md border border-solid ps-2 pe-7 pl-2 text-xs font-medium transition-all disabled:cursor-not-allowed disabled:opacity-50 data-fixed:pe-2\",\n                    badgeClassName,\n                  )}\n                  data-fixed={option.fixed}\n                  data-disabled={disabled || undefined}\n                >\n                  {option.label}\n                  <button\n                    type=\"button\"\n                    disabled={disabled || option.fixed}\n                    className={cn(\n                      \"text-muted-foreground/80 absolute -inset-y-px -end-px flex size-7 items-center justify-center rounded-e-lg border border-transparent p-0 outline-0 transition-colors\",\n                      \"hover:text-foreground\",\n                      \"focus-visible:outline\",\n                      \"focus-visible:outline-2\",\n                      \"focus-visible:outline-ring/70\",\n                      \"disabled:hover:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n                    )}\n                    onKeyDown={(e) => {\n                      if (e.key === \"Enter\") {\n                        handleUnselect(option);\n                      }\n                    }}\n                    onMouseDown={(e) => {\n                      e.preventDefault();\n                      e.stopPropagation();\n                    }}\n                    onClick={() => handleUnselect(option)}\n                    aria-label=\"Remove\"\n                  >\n                    <X size={14} strokeWidth={2} aria-hidden=\"true\" />\n                  </button>\n                </div>\n              );\n            })}\n            {/* Avoid having the \"Search\" Icon */}\n            <CommandPrimitive.Input\n              {...inputProps}\n              ref={inputRef}\n              value={inputValue}\n              disabled={disabled}\n              onValueChange={(value) => {\n                setInputValue(value);\n                inputProps?.onValueChange?.(value);\n              }}\n              onBlur={(event) => {\n                if (!onScrollbar) {\n                  setOpen(false);\n                }\n                inputProps?.onBlur?.(event);\n              }}\n              onFocus={(event) => {\n                setOpen(true);\n                if (triggerSearchOnFocus) {\n                  onSearch?.(debouncedSearchTerm);\n                }\n                inputProps?.onFocus?.(event);\n              }}\n              placeholder={\n                hidePlaceholderWhenSelected && selected.length !== 0\n                  ? \"\"\n                  : placeholder\n              }\n              className={cn(\n                \"placeholder:text-muted-foreground flex-1 bg-transparent outline-hidden\",\n                \"disabled:placeholder:text-transparent\",\n                {\n                  \"w-full\": hidePlaceholderWhenSelected,\n                  \"px-3 py-2\": selected.length === 0,\n                  \"ml-1\": selected.length !== 0,\n                },\n                inputProps?.className,\n              )}\n            />\n            <button\n              type=\"button\"\n              onClick={() => {\n                setSelected(selected.filter((s) => s.fixed));\n                onChange?.(selected.filter((s) => s.fixed));\n              }}\n              className={cn(\n                \"text-muted-foreground/80\",\n                \"absolute end-0 top-0 flex size-9 items-center justify-center rounded-lg border border-transparent transition-colors\",\n                \"focus-visible:outline-2\",\n                \"hover:text-foreground\",\n                \"focus-visible:outline-ring/70\",\n                (hideClearAllButton ||\n                  disabled ||\n                  selected.length < 1 ||\n                  selected.filter(({ fixed }) => fixed).length ===\n                    selected.length) &&\n                  \"hidden\",\n              )}\n              aria-label=\"Clear all\"\n            >\n              <X size={16} strokeWidth={2} aria-hidden=\"true\" />\n            </button>\n          </div>\n        </div>\n        <div className=\"relative\">\n          <div\n            className={cn(\n              \"border-input absolute top-2 z-10 w-full overflow-hidden rounded-lg border shadow-sm\",\n              \"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\",\n              !open && \"hidden\",\n            )}\n            data-state={open ? \"open\" : \"closed\"}\n          >\n            {open && (\n              <CommandList\n                className=\"bg-popover text-popover-foreground shadow-lg outline-hidden\"\n                onMouseLeave={() => {\n                  setOnScrollbar(false);\n                }}\n                onMouseEnter={() => {\n                  setOnScrollbar(true);\n                }}\n                onMouseUp={() => {\n                  inputRef?.current?.focus();\n                }}\n              >\n                {onAddNewItem && (\n                  <>\n                    <CommandSeparator />\n                    <CommandGroup>\n                      <Button\n                        type=\"button\"\n                        variant=\"ghost\"\n                        className=\"w-full font-normal [&_div]:justify-start\"\n                        onClick={onAddNewItem}\n                      >\n                        <PlusIcon\n                          size={14}\n                          className=\"-ms-2 opacity-60\"\n                          aria-hidden=\"true\"\n                        />\n                        Thêm mới\n                      </Button>\n                    </CommandGroup>\n                  </>\n                )}\n                {isLoading ? (\n                  LoadingIndicator\n                ) : (\n                  <React.Fragment>\n                    {EmptyItem()}\n                    {CreatableItem()}\n                    {!selectFirstItem && (\n                      <CommandItem value=\"-\" className=\"hidden\" />\n                    )}\n                    {Object.entries(selectables).map(([key, dropdowns]) => (\n                      <CommandGroup\n                        key={key}\n                        heading={key}\n                        className=\"h-full overflow-auto\"\n                      >\n                        {dropdowns.map((option) => {\n                          return (\n                            <CommandItem\n                              key={option.value}\n                              value={option.value}\n                              disabled={option.disable}\n                              onMouseDown={(e) => {\n                                e.preventDefault();\n                                e.stopPropagation();\n                              }}\n                              onSelect={() => {\n                                if (selected.length >= maxSelected) {\n                                  onMaxSelected?.(selected.length);\n                                  return;\n                                }\n                                setInputValue(\"\");\n                                const newOptions = [...selected, option];\n                                setSelected(newOptions);\n                                onChange?.(newOptions);\n                              }}\n                              className={cn(\n                                \"cursor-pointer\",\n                                option.disable &&\n                                  \"cursor-not-allowed opacity-50\",\n                              )}\n                            >\n                              {option.label}\n                            </CommandItem>\n                          );\n                        })}\n                      </CommandGroup>\n                    ))}\n                  </React.Fragment>\n                )}\n              </CommandList>\n            )}\n          </div>\n        </div>\n      </Command>\n    );\n  },\n);\n\nMultipleSelector.displayName = \"MultipleSelector\";\nexport default MultipleSelector;\n"],"mappings":"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"}

package/dist/multi-select.d.cts

@@ -0,0 +1,81 @@
+import "./dialog-Biy5wRCC.cjs";
+import { Command as Command$1 } from "./command-C3VVCkM3.cjs";
+import React from "react";
+import { Command } from "cmdk";
+
+//#region packages/components/ui/multi-select.d.ts
+interface Option {
+  value: string;
+  label: string;
+  disable?: boolean;
+  /** fixed option that can‘t be removed. */
+  fixed?: boolean;
+  /** Group the options by providing key. */
+  [key: string]: string | boolean | undefined;
+}
+interface MultipleSelectorProps {
+  value?: Option[];
+  defaultOptions?: Option[];
+  /** manually controlled options */
+  options?: Option[];
+  placeholder?: string;
+  /** Loading component. */
+  loadingIndicator?: React.ReactNode;
+  /** Empty component. */
+  emptyIndicator?: React.ReactNode;
+  /** Debounce time for async search. Only work with `onSearch`. */
+  delay?: number;
+  /**
+   * Only work with `onSearch` prop. Trigger search when `onFocus`.
+   * For example, when user click on the input, it will trigger the search to get initial options.
+   **/
+  triggerSearchOnFocus?: boolean;
+  /** async search */
+  onSearch?: (value: string) => Promise<Option[]>;
+  /**
+   * sync search. This search will not showing loadingIndicator.
+   * The rest props are the same as async search.
+   * i.e.: creatable, groupBy, delay.
+   **/
+  onSearchSync?: (value: string) => Option[];
+  onChange?: (options: Option[]) => void;
+  /** Limit the maximum number of selected options. */
+  maxSelected?: number;
+  /** When the number of selected options exceeds the limit, the onMaxSelected will be called. */
+  onMaxSelected?: (maxLimit: number) => void;
+  /** Hide the placeholder when there are options selected. */
+  hidePlaceholderWhenSelected?: boolean;
+  disabled?: boolean;
+  /** Group the options base on provided key. */
+  groupBy?: string;
+  className?: string;
+  badgeClassName?: string;
+  /**
+   * First item selected is a default behavior by cmdk. That is why the default is true.
+   * This is a workaround solution by add a dummy item.
+   *
+   * @reference: https://github.com/pacocoursey/cmdk/issues/171
+   */
+  selectFirstItem?: boolean;
+  /** Allow user to create option when there is no option matched. */
+  creatable?: boolean;
+  /** Props of `Command` */
+  commandProps?: React.ComponentPropsWithoutRef<typeof Command$1>;
+  /** Props of `CommandInput` */
+  inputProps?: Omit<React.ComponentPropsWithoutRef<typeof Command.Input>, "value" | "placeholder" | "disabled">;
+  /** hide the clear all button. */
+  hideClearAllButton?: boolean;
+  /**  Add new item event for select with search */
+  onAddNewItem?: () => void;
+}
+interface MultipleSelectorRef {
+  selectedValue: Option[];
+  input: HTMLInputElement;
+  focus: () => void;
+  reset: () => void;
+}
+declare function useDebounce<T>(value: T, delay?: number): T;
+declare const MultipleSelector: React.ForwardRefExoticComponent<MultipleSelectorProps & React.RefAttributes<MultipleSelectorRef>>;
+//#endregion
+export { MultipleSelectorRef, Option, MultipleSelector as default, useDebounce };
+//# sourceMappingURL=multi-select.d.cts.map

package/dist/multi-select.d.ts

@@ -0,0 +1,81 @@
+import "./dialog-BylavpqI.js";
+import { Command as Command$1 } from "./command-BgkG6sKW.js";
+import React from "react";
+import { Command } from "cmdk";
+
+//#region packages/components/ui/multi-select.d.ts
+interface Option {
+  value: string;
+  label: string;
+  disable?: boolean;
+  /** fixed option that can‘t be removed. */
+  fixed?: boolean;
+  /** Group the options by providing key. */
+  [key: string]: string | boolean | undefined;
+}
+interface MultipleSelectorProps {
+  value?: Option[];
+  defaultOptions?: Option[];
+  /** manually controlled options */
+  options?: Option[];
+  placeholder?: string;
+  /** Loading component. */
+  loadingIndicator?: React.ReactNode;
+  /** Empty component. */
+  emptyIndicator?: React.ReactNode;
+  /** Debounce time for async search. Only work with `onSearch`. */
+  delay?: number;
+  /**
+   * Only work with `onSearch` prop. Trigger search when `onFocus`.
+   * For example, when user click on the input, it will trigger the search to get initial options.
+   **/
+  triggerSearchOnFocus?: boolean;
+  /** async search */
+  onSearch?: (value: string) => Promise<Option[]>;
+  /**
+   * sync search. This search will not showing loadingIndicator.
+   * The rest props are the same as async search.
+   * i.e.: creatable, groupBy, delay.
+   **/
+  onSearchSync?: (value: string) => Option[];
+  onChange?: (options: Option[]) => void;
+  /** Limit the maximum number of selected options. */
+  maxSelected?: number;
+  /** When the number of selected options exceeds the limit, the onMaxSelected will be called. */
+  onMaxSelected?: (maxLimit: number) => void;
+  /** Hide the placeholder when there are options selected. */
+  hidePlaceholderWhenSelected?: boolean;
+  disabled?: boolean;
+  /** Group the options base on provided key. */
+  groupBy?: string;
+  className?: string;
+  badgeClassName?: string;
+  /**
+   * First item selected is a default behavior by cmdk. That is why the default is true.
+   * This is a workaround solution by add a dummy item.
+   *
+   * @reference: https://github.com/pacocoursey/cmdk/issues/171
+   */
+  selectFirstItem?: boolean;
+  /** Allow user to create option when there is no option matched. */
+  creatable?: boolean;
+  /** Props of `Command` */
+  commandProps?: React.ComponentPropsWithoutRef<typeof Command$1>;
+  /** Props of `CommandInput` */
+  inputProps?: Omit<React.ComponentPropsWithoutRef<typeof Command.Input>, "value" | "placeholder" | "disabled">;
+  /** hide the clear all button. */
+  hideClearAllButton?: boolean;
+  /**  Add new item event for select with search */
+  onAddNewItem?: () => void;
+}
+interface MultipleSelectorRef {
+  selectedValue: Option[];
+  input: HTMLInputElement;
+  focus: () => void;
+  reset: () => void;
+}
+declare function useDebounce<T>(value: T, delay?: number): T;
+declare const MultipleSelector: React.ForwardRefExoticComponent<MultipleSelectorProps & React.RefAttributes<MultipleSelectorRef>>;
+//#endregion
+export { MultipleSelectorRef, Option, MultipleSelector as default, useDebounce };
+//# sourceMappingURL=multi-select.d.ts.map

package/dist/multi-select.js

@@ -0,0 +1,2 @@
+"use client";import{cn as e}from"./utils-D9AH0PUV.js";import{Button as t}from"./button-C1iCV8GH.js";import"./dialog-CgosQe5q.js";import{Command as n,CommandGroup as r,CommandItem as i,CommandList as ee,CommandSeparator as te}from"./command-DEl_iWXo.js";import a from"react";import{Fragment as o,jsx as s,jsxs as c}from"react/jsx-runtime";import{PlusIcon as l,X as u}from"lucide-react";import{Command as ne,useCommandState as d}from"cmdk";function f(e,t){let[n,r]=a.useState(e);return a.useEffect(()=>{let n=setTimeout(()=>r(e),t||500);return()=>{clearTimeout(n)}},[e,t]),n}function p(e,t){if(e.length===0)return{};if(!t)return{"":e};let n={};return e.forEach(e=>{let r=e[t]||``;n[r]||(n[r]=[]),n[r].push(e)}),n}function re(e,t){let n=JSON.parse(JSON.stringify(e));for(let[e,r]of Object.entries(n))n[e]=r.filter(e=>!t.find(t=>t.value===e.value));return n}function m(e,t){for(let[,n]of Object.entries(e))if(n.some(e=>t.find(t=>t.value===e.value)))return!0;return!1}const h=a.forwardRef(({className:t,...n},r)=>{let i=d(e=>e.filtered.count===0);return i?s(`div`,{ref:r,className:e(`px-2 py-4 text-center text-sm`,t),"cmdk-empty":``,role:`presentation`,...n}):null});h.displayName=`CommandEmpty`;const g=a.forwardRef(({value:d,onChange:g,placeholder:_,defaultOptions:v=[],options:y,delay:b,onSearch:x,onSearchSync:S,loadingIndicator:ie,emptyIndicator:C,maxSelected:w=2**53-1,onMaxSelected:T,hidePlaceholderWhenSelected:E,disabled:D,groupBy:O,className:ae,badgeClassName:k,selectFirstItem:A=!0,creatable:j=!1,triggerSearchOnFocus:M=!1,commandProps:N,inputProps:P,hideClearAllButton:F=!1,onAddNewItem:I},L)=>{let R=a.useRef(null),z=a.useRef(null),[B,V]=a.useState(!1),[oe,H]=a.useState(!1),[U,W]=a.useState(!1),[G,K]=a.useState(d||[]),[q,J]=a.useState(p(v,O)),[Y,X]=a.useState(``),Z=f(Y,b||500);a.useImperativeHandle(L,()=>({selectedValue:[...G],input:R.current,focus:()=>R?.current?.focus(),reset:()=>K([])}),[G]);let Q=a.useCallback(e=>{z.current&&!z.current.contains(e.target)&&R.current&&!R.current.contains(e.target)&&(V(!1),R.current.blur())},[]),$=a.useCallback(e=>{let t=G.filter(t=>t.value!==e.value);K(t),g?.(t)},[g,G]),se=a.useCallback(e=>{let t=R.current;if(t){if((e.key===`Delete`||e.key===`Backspace`)&&t.value===``&&G.length>0){let e=G[G.length-1];e.fixed||$(G[G.length-1])}e.key===`Escape`&&t.blur()}},[$,G]);a.useEffect(()=>(B?(document.addEventListener(`mousedown`,Q),document.addEventListener(`touchend`,Q)):(document.removeEventListener(`mousedown`,Q),document.removeEventListener(`touchend`,Q)),()=>{document.removeEventListener(`mousedown`,Q),document.removeEventListener(`touchend`,Q)}),[B]),a.useEffect(()=>{d&&K(d)},[d]),a.useEffect(()=>{if(!y||x)return;let e=p(y||[],O);JSON.stringify(e)!==JSON.stringify(q)&&J(e)},[v,y,O,x,q]),a.useEffect(()=>{let e=()=>{let e=S?.(Z);J(p(e||[],O))},t=async()=>{!S||!B||(M&&e(),Z&&e())};t()},[Z,O,B,M]),a.useEffect(()=>{let e=async()=>{W(!0);let e=await x?.(Z);J(p(e||[],O)),W(!1)},t=async()=>{!x||!B||(M&&await e(),Z&&await e())};t()},[Z,O,B,M]);let ce=()=>{if(!j||m(q,[{value:Y,label:Y}])||G.find(e=>e.value===Y))return;let e=s(i,{value:Y,className:`cursor-pointer`,onMouseDown:e=>{e.preventDefault(),e.stopPropagation()},onSelect:e=>{if(G.length>=w){T?.(G.length);return}X(``);let t=[...G,{value:e,label:e}];K(t),g?.(t)},children:`Create "${Y}"`});if(!x&&Y.length>0||x&&Z.length>0&&!U)return e},le=a.useCallback(()=>{if(C)return x&&!j&&Object.keys(q).length===0?s(i,{value:`-`,disabled:!0,children:C}):s(h,{children:C})},[j,C,x,q]),ue=a.useMemo(()=>re(q,G),[q,G]),de=a.useCallback(()=>{if(N?.filter)return N.filter;if(j)return(e,t)=>e.toLowerCase().includes(t.toLowerCase())?1:-1},[j,N?.filter]);return c(n,{ref:z,...N,onKeyDown:e=>{se(e),N?.onKeyDown?.(e)},className:e(`h-auto overflow-visible bg-transparent`,N?.className),shouldFilter:N?.shouldFilter===void 0?!x:N.shouldFilter,filter:de(),children:[s(`div`,{className:e(`border-input focus-within:border-primary focus-within:ring-ring relative rounded-md border text-sm transition-shadow focus-within:ring-4 focus-within:outline-hidden`,`has-disabled:bg-muted`,`has-disabled:text-muted-foreground`,{"p-1":G.length!==0,"cursor-text":!D&&G.length!==0},!F&&`pe-9`,ae),onClick:()=>{D||R?.current?.focus()},children:c(`div`,{className:`flex flex-wrap gap-1`,children:[G.map(t=>c(`div`,{className:e(`animate-fadeIn bg-background text-secondary-foreground hover:bg-background relative inline-flex h-7 cursor-default items-center rounded-md border border-solid ps-2 pe-7 pl-2 text-xs font-medium transition-all disabled:cursor-not-allowed disabled:opacity-50 data-fixed:pe-2`,k),"data-fixed":t.fixed,"data-disabled":D||void 0,children:[t.label,s(`button`,{type:`button`,disabled:D||t.fixed,className:e(`text-muted-foreground/80 absolute -inset-y-px -end-px flex size-7 items-center justify-center rounded-e-lg border border-transparent p-0 outline-0 transition-colors`,`hover:text-foreground`,`focus-visible:outline`,`focus-visible:outline-2`,`focus-visible:outline-ring/70`,`disabled:hover:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50`),onKeyDown:e=>{e.key===`Enter`&&$(t)},onMouseDown:e=>{e.preventDefault(),e.stopPropagation()},onClick:()=>$(t),"aria-label":`Remove`,children:s(u,{size:14,strokeWidth:2,"aria-hidden":`true`})})]},t.value)),s(ne.Input,{...P,ref:R,value:Y,disabled:D,onValueChange:e=>{X(e),P?.onValueChange?.(e)},onBlur:e=>{oe||V(!1),P?.onBlur?.(e)},onFocus:e=>{V(!0),M&&x?.(Z),P?.onFocus?.(e)},placeholder:E&&G.length!==0?``:_,className:e(`placeholder:text-muted-foreground flex-1 bg-transparent outline-hidden`,`disabled:placeholder:text-transparent`,{"w-full":E,"px-3 py-2":G.length===0,"ml-1":G.length!==0},P?.className)}),s(`button`,{type:`button`,onClick:()=>{K(G.filter(e=>e.fixed)),g?.(G.filter(e=>e.fixed))},className:e(`text-muted-foreground/80`,`absolute end-0 top-0 flex size-9 items-center justify-center rounded-lg border border-transparent transition-colors`,`focus-visible:outline-2`,`hover:text-foreground`,`focus-visible:outline-ring/70`,(F||D||G.length<1||G.filter(({fixed:e})=>e).length===G.length)&&`hidden`),"aria-label":`Clear all`,children:s(u,{size:16,strokeWidth:2,"aria-hidden":`true`})})]})}),s(`div`,{className:`relative`,children:s(`div`,{className:e(`border-input absolute top-2 z-10 w-full overflow-hidden rounded-lg border shadow-sm`,`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`,!B&&`hidden`),"data-state":B?`open`:`closed`,children:B&&c(ee,{className:`bg-popover text-popover-foreground shadow-lg outline-hidden`,onMouseLeave:()=>{H(!1)},onMouseEnter:()=>{H(!0)},onMouseUp:()=>{R?.current?.focus()},children:[I&&c(o,{children:[s(te,{}),s(r,{children:c(t,{type:`button`,variant:`ghost`,className:`w-full font-normal [&_div]:justify-start`,onClick:I,children:[s(l,{size:14,className:`-ms-2 opacity-60`,"aria-hidden":`true`}),`Thêm mới`]})})]}),U?ie:c(a.Fragment,{children:[le(),ce(),!A&&s(i,{value:`-`,className:`hidden`}),Object.entries(ue).map(([t,n])=>s(r,{heading:t,className:`h-full overflow-auto`,children:n.map(t=>s(i,{value:t.value,disabled:t.disable,onMouseDown:e=>{e.preventDefault(),e.stopPropagation()},onSelect:()=>{if(G.length>=w){T?.(G.length);return}X(``);let e=[...G,t];K(e),g?.(e)},className:e(`cursor-pointer`,t.disable&&`cursor-not-allowed opacity-50`),children:t.label},t.value))},t))]})]})})})]})});g.displayName=`MultipleSelector`;export{g as default,f as useDebounce};
+//# sourceMappingURL=multi-select.js.map

package/dist/multi-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select.js","names":["groupOption: GroupOption","value","Command","CommandPrimitive"],"sources":["../packages/components/ui/multi-select.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { Command as CommandPrimitive, useCommandState } from \"cmdk\";\nimport { PlusIcon, X } from \"lucide-react\";\n\nimport {\n  Command,\n  CommandGroup,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from \"@/components/ui/command\";\nimport { cn } from \"@/lib/utils\";\n\nimport { Button } from \"./button\";\n\nexport interface Option {\n  value: string;\n  label: string;\n  disable?: boolean;\n  /** fixed option that can&lsquo;t be removed. */\n  fixed?: boolean;\n  /** Group the options by providing key. */\n  [key: string]: string | boolean | undefined;\n}\ninterface GroupOption {\n  [key: string]: Option[];\n}\n\ninterface MultipleSelectorProps {\n  value?: Option[];\n  defaultOptions?: Option[];\n  /** manually controlled options */\n  options?: Option[];\n  placeholder?: string;\n  /** Loading component. */\n  loadingIndicator?: React.ReactNode;\n  /** Empty component. */\n  emptyIndicator?: React.ReactNode;\n  /** Debounce time for async search. Only work with `onSearch`. */\n  delay?: number;\n  /**\n   * Only work with `onSearch` prop. Trigger search when `onFocus`.\n   * For example, when user click on the input, it will trigger the search to get initial options.\n   **/\n  triggerSearchOnFocus?: boolean;\n  /** async search */\n  onSearch?: (value: string) => Promise<Option[]>;\n  /**\n   * sync search. This search will not showing loadingIndicator.\n   * The rest props are the same as async search.\n   * i.e.: creatable, groupBy, delay.\n   **/\n  onSearchSync?: (value: string) => Option[];\n  onChange?: (options: Option[]) => void;\n  /** Limit the maximum number of selected options. */\n  maxSelected?: number;\n  /** When the number of selected options exceeds the limit, the onMaxSelected will be called. */\n  onMaxSelected?: (maxLimit: number) => void;\n  /** Hide the placeholder when there are options selected. */\n  hidePlaceholderWhenSelected?: boolean;\n  disabled?: boolean;\n  /** Group the options base on provided key. */\n  groupBy?: string;\n  className?: string;\n  badgeClassName?: string;\n  /**\n   * First item selected is a default behavior by cmdk. That is why the default is true.\n   * This is a workaround solution by add a dummy item.\n   *\n   * @reference: https://github.com/pacocoursey/cmdk/issues/171\n   */\n  selectFirstItem?: boolean;\n  /** Allow user to create option when there is no option matched. */\n  creatable?: boolean;\n  /** Props of `Command` */\n  commandProps?: React.ComponentPropsWithoutRef<typeof Command>;\n  /** Props of `CommandInput` */\n  inputProps?: Omit<\n    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>,\n    \"value\" | \"placeholder\" | \"disabled\"\n  >;\n  /** hide the clear all button. */\n  hideClearAllButton?: boolean;\n\n  /**  Add new item event for select with search */\n  onAddNewItem?: () => void;\n}\n\nexport interface MultipleSelectorRef {\n  selectedValue: Option[];\n  input: HTMLInputElement;\n  focus: () => void;\n  reset: () => void;\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useDebounce<T>(value: T, delay?: number): T {\n  const [debouncedValue, setDebouncedValue] = React.useState<T>(value);\n\n  React.useEffect(() => {\n    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);\n\n    return () => {\n      clearTimeout(timer);\n    };\n  }, [value, delay]);\n\n  return debouncedValue;\n}\n\nfunction transToGroupOption(options: Option[], groupBy?: string) {\n  if (options.length === 0) {\n    return {};\n  }\n  if (!groupBy) {\n    return {\n      \"\": options,\n    };\n  }\n\n  const groupOption: GroupOption = {};\n  options.forEach((option) => {\n    const key = (option[groupBy] as string) || \"\";\n    if (!groupOption[key]) {\n      groupOption[key] = [];\n    }\n    groupOption[key].push(option);\n  });\n  return groupOption;\n}\n\nfunction removePickedOption(groupOption: GroupOption, picked: Option[]) {\n  const cloneOption = JSON.parse(JSON.stringify(groupOption)) as GroupOption;\n\n  for (const [key, value] of Object.entries(cloneOption)) {\n    cloneOption[key] = value.filter(\n      (val) => !picked.find((p) => p.value === val.value),\n    );\n  }\n  return cloneOption;\n}\n\nfunction isOptionsExist(groupOption: GroupOption, targetOption: Option[]) {\n  for (const [, value] of Object.entries(groupOption)) {\n    if (\n      value.some((option) => targetOption.find((p) => p.value === option.value))\n    ) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * The `CommandEmpty` of shadcn/ui will cause the cmdk empty not rendering correctly.\n * So we create one and copy the `Empty` implementation from `cmdk`.\n *\n * @reference: https://github.com/hsuanyi-chou/shadcn-ui-expansions/issues/34#issuecomment-1949561607\n **/\nconst CommandEmpty = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof CommandPrimitive.Empty>\n>(({ className, ...props }, forwardedRef) => {\n  const render = useCommandState((state) => state.filtered.count === 0);\n\n  if (!render) return null;\n\n  return (\n    <div\n      ref={forwardedRef}\n      className={cn(\"px-2 py-4 text-center text-sm\", className)}\n      cmdk-empty=\"\"\n      role=\"presentation\"\n      {...props}\n    />\n  );\n});\n\nCommandEmpty.displayName = \"CommandEmpty\";\n\nconst MultipleSelector = React.forwardRef<\n  MultipleSelectorRef,\n  MultipleSelectorProps\n>(\n  (\n    {\n      value,\n      onChange,\n      placeholder,\n      defaultOptions: arrayDefaultOptions = [],\n      options: arrayOptions,\n      delay,\n      onSearch,\n      onSearchSync,\n      loadingIndicator: LoadingIndicator,\n      emptyIndicator,\n      maxSelected = Number.MAX_SAFE_INTEGER,\n      onMaxSelected,\n      hidePlaceholderWhenSelected,\n      disabled,\n      groupBy,\n      className,\n      badgeClassName,\n      selectFirstItem = true,\n      creatable = false,\n      triggerSearchOnFocus = false,\n      commandProps,\n      inputProps,\n      hideClearAllButton = false,\n      onAddNewItem,\n    }: MultipleSelectorProps,\n    ref: React.Ref<MultipleSelectorRef>,\n  ) => {\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const dropdownRef = React.useRef<HTMLDivElement>(null); // Added this\n\n    const [open, setOpen] = React.useState(false);\n    const [onScrollbar, setOnScrollbar] = React.useState(false);\n    const [isLoading, setIsLoading] = React.useState(false);\n\n    const [selected, setSelected] = React.useState<Option[]>(value || []);\n    const [options, setOptions] = React.useState<GroupOption>(\n      transToGroupOption(arrayDefaultOptions, groupBy),\n    );\n    const [inputValue, setInputValue] = React.useState(\"\");\n\n    const debouncedSearchTerm = useDebounce(inputValue, delay || 500);\n\n    React.useImperativeHandle(\n      ref,\n      () => ({\n        selectedValue: [...selected],\n        input: inputRef.current as HTMLInputElement,\n        focus: () => inputRef?.current?.focus(),\n        reset: () => setSelected([]),\n      }),\n      [selected],\n    );\n\n    const handleClickOutside = React.useCallback(\n      (event: MouseEvent | TouchEvent) => {\n        if (\n          dropdownRef.current &&\n          !dropdownRef.current.contains(event.target as Node) &&\n          inputRef.current &&\n          !inputRef.current.contains(event.target as Node)\n        ) {\n          setOpen(false);\n          inputRef.current.blur();\n        }\n      },\n      [],\n    );\n\n    const handleUnselect = React.useCallback(\n      (option: Option) => {\n        const newOptions = selected.filter((s) => s.value !== option.value);\n        setSelected(newOptions);\n        onChange?.(newOptions);\n      },\n      [onChange, selected],\n    );\n\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent<HTMLDivElement>) => {\n        const input = inputRef.current;\n        if (!input) return;\n\n        if (e.key === \"Delete\" || e.key === \"Backspace\") {\n          if (input.value === \"\" && selected.length > 0) {\n            const lastSelectOption = selected[selected.length - 1];\n            // If last item is fixed, we should not remove it.\n            if (!lastSelectOption.fixed) {\n              handleUnselect(selected[selected.length - 1]);\n            }\n          }\n        }\n\n        // This is not a default behavior of the <input /> field\n        if (e.key === \"Escape\") {\n          input.blur();\n        }\n      },\n      [handleUnselect, selected],\n    );\n\n    React.useEffect(() => {\n      if (open) {\n        document.addEventListener(\"mousedown\", handleClickOutside);\n        document.addEventListener(\"touchend\", handleClickOutside);\n      } else {\n        document.removeEventListener(\"mousedown\", handleClickOutside);\n        document.removeEventListener(\"touchend\", handleClickOutside);\n      }\n\n      return () => {\n        document.removeEventListener(\"mousedown\", handleClickOutside);\n        document.removeEventListener(\"touchend\", handleClickOutside);\n      };\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [open]);\n\n    React.useEffect(() => {\n      if (value) {\n        setSelected(value);\n      }\n    }, [value]);\n\n    React.useEffect(() => {\n      /** If `onSearch` is provided, do not trigger options updated. */\n      if (!arrayOptions || onSearch) {\n        return;\n      }\n      const newOption = transToGroupOption(arrayOptions || [], groupBy);\n      if (JSON.stringify(newOption) !== JSON.stringify(options)) {\n        setOptions(newOption);\n      }\n    }, [arrayDefaultOptions, arrayOptions, groupBy, onSearch, options]);\n\n    React.useEffect(() => {\n      /** sync search */\n\n      const doSearchSync = () => {\n        const res = onSearchSync?.(debouncedSearchTerm);\n        setOptions(transToGroupOption(res || [], groupBy));\n      };\n\n      const exec = async () => {\n        if (!onSearchSync || !open) return;\n\n        if (triggerSearchOnFocus) {\n          doSearchSync();\n        }\n\n        if (debouncedSearchTerm) {\n          doSearchSync();\n        }\n      };\n\n      void exec();\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [debouncedSearchTerm, groupBy, open, triggerSearchOnFocus]);\n\n    React.useEffect(() => {\n      /** async search */\n\n      const doSearch = async () => {\n        setIsLoading(true);\n        const res = await onSearch?.(debouncedSearchTerm);\n        setOptions(transToGroupOption(res || [], groupBy));\n        setIsLoading(false);\n      };\n\n      const exec = async () => {\n        if (!onSearch || !open) return;\n\n        if (triggerSearchOnFocus) {\n          await doSearch();\n        }\n\n        if (debouncedSearchTerm) {\n          await doSearch();\n        }\n      };\n\n      void exec();\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [debouncedSearchTerm, groupBy, open, triggerSearchOnFocus]);\n\n    const CreatableItem = () => {\n      if (!creatable) return undefined;\n      if (\n        isOptionsExist(options, [{ value: inputValue, label: inputValue }]) ||\n        selected.find((s) => s.value === inputValue)\n      ) {\n        return undefined;\n      }\n\n      const Item = (\n        <CommandItem\n          value={inputValue}\n          className=\"cursor-pointer\"\n          onMouseDown={(e) => {\n            e.preventDefault();\n            e.stopPropagation();\n          }}\n          onSelect={(value: string) => {\n            if (selected.length >= maxSelected) {\n              onMaxSelected?.(selected.length);\n              return;\n            }\n            setInputValue(\"\");\n            const newOptions = [...selected, { value, label: value }];\n            setSelected(newOptions);\n            onChange?.(newOptions);\n          }}\n        >\n          {`Create \"${inputValue}\"`}\n        </CommandItem>\n      );\n\n      // For normal creatable\n      if (!onSearch && inputValue.length > 0) {\n        return Item;\n      }\n\n      // For async search creatable. avoid showing creatable item before loading at first.\n      if (onSearch && debouncedSearchTerm.length > 0 && !isLoading) {\n        return Item;\n      }\n\n      return undefined;\n    };\n\n    const EmptyItem = React.useCallback(() => {\n      if (!emptyIndicator) return undefined;\n\n      // For async search that showing emptyIndicator\n      if (onSearch && !creatable && Object.keys(options).length === 0) {\n        return (\n          <CommandItem value=\"-\" disabled>\n            {emptyIndicator}\n          </CommandItem>\n        );\n      }\n\n      return <CommandEmpty>{emptyIndicator}</CommandEmpty>;\n    }, [creatable, emptyIndicator, onSearch, options]);\n\n    const selectables = React.useMemo<GroupOption>(\n      () => removePickedOption(options, selected),\n      [options, selected],\n    );\n\n    /** Avoid Creatable Selector freezing or lagging when paste a long string. */\n    const commandFilter = React.useCallback(() => {\n      if (commandProps?.filter) {\n        return commandProps.filter;\n      }\n\n      if (creatable) {\n        return (value: string, search: string) => {\n          return value.toLowerCase().includes(search.toLowerCase()) ? 1 : -1;\n        };\n      }\n      // Using default filter in `cmdk`. We don&lsquo;t have to provide it.\n      return undefined;\n    }, [creatable, commandProps?.filter]);\n\n    return (\n      <Command\n        ref={dropdownRef}\n        {...commandProps}\n        onKeyDown={(e) => {\n          handleKeyDown(e);\n          commandProps?.onKeyDown?.(e);\n        }}\n        className={cn(\n          \"h-auto overflow-visible bg-transparent\",\n          commandProps?.className,\n        )}\n        shouldFilter={\n          commandProps?.shouldFilter !== undefined\n            ? commandProps.shouldFilter\n            : !onSearch\n        } // When onSearch is provided, we don&lsquo;t want to filter the options. You can still override it.\n        filter={commandFilter()}\n      >\n        <div\n          className={cn(\n            \"border-input focus-within:border-primary focus-within:ring-ring relative rounded-md border text-sm transition-shadow focus-within:ring-4 focus-within:outline-hidden\",\n            \"has-disabled:bg-muted\",\n            \"has-disabled:text-muted-foreground\",\n            {\n              \"p-1\": selected.length !== 0,\n              \"cursor-text\": !disabled && selected.length !== 0,\n            },\n            !hideClearAllButton && \"pe-9\",\n            className,\n          )}\n          onClick={() => {\n            if (disabled) return;\n            inputRef?.current?.focus();\n          }}\n        >\n          <div className=\"flex flex-wrap gap-1\">\n            {selected.map((option) => {\n              return (\n                <div\n                  key={option.value}\n                  className={cn(\n                    \"animate-fadeIn bg-background text-secondary-foreground hover:bg-background relative inline-flex h-7 cursor-default items-center rounded-md border border-solid ps-2 pe-7 pl-2 text-xs font-medium transition-all disabled:cursor-not-allowed disabled:opacity-50 data-fixed:pe-2\",\n                    badgeClassName,\n                  )}\n                  data-fixed={option.fixed}\n                  data-disabled={disabled || undefined}\n                >\n                  {option.label}\n                  <button\n                    type=\"button\"\n                    disabled={disabled || option.fixed}\n                    className={cn(\n                      \"text-muted-foreground/80 absolute -inset-y-px -end-px flex size-7 items-center justify-center rounded-e-lg border border-transparent p-0 outline-0 transition-colors\",\n                      \"hover:text-foreground\",\n                      \"focus-visible:outline\",\n                      \"focus-visible:outline-2\",\n                      \"focus-visible:outline-ring/70\",\n                      \"disabled:hover:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n                    )}\n                    onKeyDown={(e) => {\n                      if (e.key === \"Enter\") {\n                        handleUnselect(option);\n                      }\n                    }}\n                    onMouseDown={(e) => {\n                      e.preventDefault();\n                      e.stopPropagation();\n                    }}\n                    onClick={() => handleUnselect(option)}\n                    aria-label=\"Remove\"\n                  >\n                    <X size={14} strokeWidth={2} aria-hidden=\"true\" />\n                  </button>\n                </div>\n              );\n            })}\n            {/* Avoid having the \"Search\" Icon */}\n            <CommandPrimitive.Input\n              {...inputProps}\n              ref={inputRef}\n              value={inputValue}\n              disabled={disabled}\n              onValueChange={(value) => {\n                setInputValue(value);\n                inputProps?.onValueChange?.(value);\n              }}\n              onBlur={(event) => {\n                if (!onScrollbar) {\n                  setOpen(false);\n                }\n                inputProps?.onBlur?.(event);\n              }}\n              onFocus={(event) => {\n                setOpen(true);\n                if (triggerSearchOnFocus) {\n                  onSearch?.(debouncedSearchTerm);\n                }\n                inputProps?.onFocus?.(event);\n              }}\n              placeholder={\n                hidePlaceholderWhenSelected && selected.length !== 0\n                  ? \"\"\n                  : placeholder\n              }\n              className={cn(\n                \"placeholder:text-muted-foreground flex-1 bg-transparent outline-hidden\",\n                \"disabled:placeholder:text-transparent\",\n                {\n                  \"w-full\": hidePlaceholderWhenSelected,\n                  \"px-3 py-2\": selected.length === 0,\n                  \"ml-1\": selected.length !== 0,\n                },\n                inputProps?.className,\n              )}\n            />\n            <button\n              type=\"button\"\n              onClick={() => {\n                setSelected(selected.filter((s) => s.fixed));\n                onChange?.(selected.filter((s) => s.fixed));\n              }}\n              className={cn(\n                \"text-muted-foreground/80\",\n                \"absolute end-0 top-0 flex size-9 items-center justify-center rounded-lg border border-transparent transition-colors\",\n                \"focus-visible:outline-2\",\n                \"hover:text-foreground\",\n                \"focus-visible:outline-ring/70\",\n                (hideClearAllButton ||\n                  disabled ||\n                  selected.length < 1 ||\n                  selected.filter(({ fixed }) => fixed).length ===\n                    selected.length) &&\n                  \"hidden\",\n              )}\n              aria-label=\"Clear all\"\n            >\n              <X size={16} strokeWidth={2} aria-hidden=\"true\" />\n            </button>\n          </div>\n        </div>\n        <div className=\"relative\">\n          <div\n            className={cn(\n              \"border-input absolute top-2 z-10 w-full overflow-hidden rounded-lg border shadow-sm\",\n              \"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\",\n              !open && \"hidden\",\n            )}\n            data-state={open ? \"open\" : \"closed\"}\n          >\n            {open && (\n              <CommandList\n                className=\"bg-popover text-popover-foreground shadow-lg outline-hidden\"\n                onMouseLeave={() => {\n                  setOnScrollbar(false);\n                }}\n                onMouseEnter={() => {\n                  setOnScrollbar(true);\n                }}\n                onMouseUp={() => {\n                  inputRef?.current?.focus();\n                }}\n              >\n                {onAddNewItem && (\n                  <>\n                    <CommandSeparator />\n                    <CommandGroup>\n                      <Button\n                        type=\"button\"\n                        variant=\"ghost\"\n                        className=\"w-full font-normal [&_div]:justify-start\"\n                        onClick={onAddNewItem}\n                      >\n                        <PlusIcon\n                          size={14}\n                          className=\"-ms-2 opacity-60\"\n                          aria-hidden=\"true\"\n                        />\n                        Thêm mới\n                      </Button>\n                    </CommandGroup>\n                  </>\n                )}\n                {isLoading ? (\n                  LoadingIndicator\n                ) : (\n                  <React.Fragment>\n                    {EmptyItem()}\n                    {CreatableItem()}\n                    {!selectFirstItem && (\n                      <CommandItem value=\"-\" className=\"hidden\" />\n                    )}\n                    {Object.entries(selectables).map(([key, dropdowns]) => (\n                      <CommandGroup\n                        key={key}\n                        heading={key}\n                        className=\"h-full overflow-auto\"\n                      >\n                        {dropdowns.map((option) => {\n                          return (\n                            <CommandItem\n                              key={option.value}\n                              value={option.value}\n                              disabled={option.disable}\n                              onMouseDown={(e) => {\n                                e.preventDefault();\n                                e.stopPropagation();\n                              }}\n                              onSelect={() => {\n                                if (selected.length >= maxSelected) {\n                                  onMaxSelected?.(selected.length);\n                                  return;\n                                }\n                                setInputValue(\"\");\n                                const newOptions = [...selected, option];\n                                setSelected(newOptions);\n                                onChange?.(newOptions);\n                              }}\n                              className={cn(\n                                \"cursor-pointer\",\n                                option.disable &&\n                                  \"cursor-not-allowed opacity-50\",\n                              )}\n                            >\n                              {option.label}\n                            </CommandItem>\n                          );\n                        })}\n                      </CommandGroup>\n                    ))}\n                  </React.Fragment>\n                )}\n              </CommandList>\n            )}\n          </div>\n        </div>\n      </Command>\n    );\n  },\n);\n\nMultipleSelector.displayName = \"MultipleSelector\";\nexport default MultipleSelector;\n"],"mappings":"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"}

package/dist/navigation-menu.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require(`./chunk-CUT6urMc.cjs`),t=require(`./utils-BsjVK5EW.cjs`),n=e.__toESM(require(`react`)),r=e.__toESM(require(`radix-ui`)),i=e.__toESM(require(`class-variance-authority`)),a=e.__toESM(require(`react/jsx-runtime`)),o=e.__toESM(require(`lucide-react`));function s({className:e,children:n,viewport:i=!0,...o}){return(0,a.jsxs)(r.NavigationMenu.Root,{"data-slot":`navigation-menu`,"data-viewport":i,className:t.cn(`group/navigation-menu relative flex max-w-max flex-1 items-center justify-center`,e),...o,children:[n,i&&(0,a.jsx)(p,{})]})}function c({className:e,...n}){return(0,a.jsx)(r.NavigationMenu.List,{"data-slot":`navigation-menu-list`,className:t.cn(`group flex flex-1 list-none items-center justify-center gap-1`,e),...n})}function l({className:e,...n}){return(0,a.jsx)(r.NavigationMenu.Item,{"data-slot":`navigation-menu-item`,className:t.cn(`relative`,e),...n})}const u=(0,i.cva)(`group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1`);function d({className:e,children:n,...i}){return(0,a.jsxs)(r.NavigationMenu.Trigger,{"data-slot":`navigation-menu-trigger`,className:t.cn(u(),`group`,e),...i,children:[n,` `,(0,a.jsx)(o.ChevronDownIcon,{className:`relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180`,"aria-hidden":`true`})]})}function f({className:e,...n}){return(0,a.jsx)(r.NavigationMenu.Content,{"data-slot":`navigation-menu-content`,className:t.cn(`data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto`,`group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none`,e),...n})}function p({className:e,...n}){return(0,a.jsx)(`div`,{className:t.cn(`absolute top-full left-0 isolate z-50 flex justify-center`),children:(0,a.jsx)(r.NavigationMenu.Viewport,{"data-slot":`navigation-menu-viewport`,className:t.cn(`origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]`,e),...n})})}function m({className:e,...n}){return(0,a.jsx)(r.NavigationMenu.Link,{"data-slot":`navigation-menu-link`,className:t.cn(`data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4`,e),...n})}function h({className:e,...n}){return(0,a.jsx)(r.NavigationMenu.Indicator,{"data-slot":`navigation-menu-indicator`,className:t.cn(`data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden`,e),...n,children:(0,a.jsx)(`div`,{className:`bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md`})})}exports.NavigationMenu=s,exports.NavigationMenuContent=f,exports.NavigationMenuIndicator=h,exports.NavigationMenuItem=l,exports.NavigationMenuLink=m,exports.NavigationMenuList=c,exports.NavigationMenuTrigger=d,exports.NavigationMenuViewport=p,exports.navigationMenuTriggerStyle=u;
+//# sourceMappingURL=navigation-menu.cjs.map

package/dist/navigation-menu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-menu.cjs","names":["NavigationMenuPrimitive","cn","ChevronDownIcon"],"sources":["../packages/components/ui/navigation-menu.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\";\nimport { cva } from \"class-variance-authority\";\nimport { ChevronDownIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  viewport?: boolean;\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  );\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"group flex flex-1 list-none items-center justify-center gap-1\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  );\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1\",\n);\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <ChevronDownIcon\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  );\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto\",\n        \"group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div\n      className={cn(\n        \"absolute top-full left-0 isolate z-50 flex justify-center\",\n      )}\n    >\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        \"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md\" />\n    </NavigationMenuPrimitive.Indicator>\n  );\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  // eslint-disable-next-line react-refresh/only-export-components\n  navigationMenuTriggerStyle,\n  NavigationMenuViewport,\n};\n"],"mappings":"sRAQA,SAAS,EAAe,CACtB,YACA,WACA,WAAW,GACX,GAAG,EAGJ,CAAE,CACD,OACE,EAAA,EAAA,MAACA,EAAAA,eAAwB,KAAA,CACvB,YAAU,kBACV,gBAAe,EACf,UAAWC,EAAAA,GACT,mFACA,GAEF,GAAI,YAEH,EACA,IAAY,EAAA,EAAA,KAAC,EAAA,EAAA,EAAA,EAGnB,CAED,SAAS,EAAmB,CAC1B,YACA,GAAG,EACuD,CAAE,CAC5D,OACE,EAAA,EAAA,KAACD,EAAAA,eAAwB,KAAA,CACvB,YAAU,uBACV,UAAWC,EAAAA,GACT,gEACA,GAEF,GAAI,GAGT,CAED,SAAS,EAAmB,CAC1B,YACA,GAAG,EACuD,CAAE,CAC5D,OACE,EAAA,EAAA,KAACD,EAAAA,eAAwB,KAAA,CACvB,YAAU,uBACV,UAAWC,EAAAA,GAAG,WAAY,GAC1B,GAAI,GAGT,CAED,MAAM,GAAA,EAAA,EAAA,KACJ,ggBAGF,SAAS,EAAsB,CAC7B,YACA,WACA,GAAG,EAC0D,CAAE,CAC/D,OACE,EAAA,EAAA,MAACD,EAAAA,eAAwB,QAAA,CACvB,YAAU,0BACV,UAAWC,EAAAA,GAAG,IAA8B,QAAS,GACrD,GAAI,YAEH,EAAU,KACX,EAAA,EAAA,KAACC,EAAAA,gBAAAA,CACC,UAAU,4FACV,cAAY,WAInB,CAED,SAAS,EAAsB,CAC7B,YACA,GAAG,EAC0D,CAAE,CAC/D,OACE,EAAA,EAAA,KAACF,EAAAA,eAAwB,QAAA,CACvB,YAAU,0BACV,UAAWC,EAAAA,GACT,mWACA,4hCACA,GAEF,GAAI,GAGT,CAED,SAAS,EAAuB,CAC9B,YACA,GAAG,EAC2D,CAAE,CAChE,OACE,EAAA,EAAA,KAAC,MAAA,CACC,UAAWA,EAAAA,GACT,uEAGF,EAAA,EAAA,KAACD,EAAAA,eAAwB,SAAA,CACvB,YAAU,2BACV,UAAWC,EAAAA,GACT,qVACA,GAEF,GAAI,KAIX,CAED,SAAS,EAAmB,CAC1B,YACA,GAAG,EACuD,CAAE,CAC5D,OACE,EAAA,EAAA,KAACD,EAAAA,eAAwB,KAAA,CACvB,YAAU,uBACV,UAAWC,EAAAA,GACT,wdACA,GAEF,GAAI,GAGT,CAED,SAAS,EAAwB,CAC/B,YACA,GAAG,EAC4D,CAAE,CACjE,OACE,EAAA,EAAA,KAACD,EAAAA,eAAwB,UAAA,CACvB,YAAU,4BACV,UAAWC,EAAAA,GACT,+LACA,GAEF,GAAI,YAEJ,EAAA,EAAA,KAAC,MAAA,CAAI,UAAU,yEAAA,GAGpB"}

package/dist/navigation-menu.d.cts

@@ -0,0 +1,46 @@
+import React from "react";
+import { NavigationMenu as NavigationMenu$1 } from "radix-ui";
+import * as class_variance_authority_types0 from "class-variance-authority/types";
+
+//#region packages/components/ui/navigation-menu.d.ts
+declare function NavigationMenu({
+  className,
+  children,
+  viewport,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu$1.Root> & {
+  viewport?: boolean;
+}): React.JSX.Element;
+declare function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu$1.List>): React.JSX.Element;
+declare function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu$1.Item>): React.JSX.Element;
+declare const navigationMenuTriggerStyle: (props?: class_variance_authority_types0.ClassProp | undefined) => string;
+declare function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu$1.Trigger>): React.JSX.Element;
+declare function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu$1.Content>): React.JSX.Element;
+declare function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu$1.Viewport>): React.JSX.Element;
+declare function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu$1.Link>): React.JSX.Element;
+declare function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu$1.Indicator>): React.JSX.Element;
+//#endregion
+export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle };
+//# sourceMappingURL=navigation-menu.d.cts.map

package/dist/navigation-menu.d.ts

@@ -0,0 +1,46 @@
+import React from "react";
+import { NavigationMenu as NavigationMenu$1 } from "radix-ui";
+import * as class_variance_authority_types2 from "class-variance-authority/types";
+
+//#region packages/components/ui/navigation-menu.d.ts
+declare function NavigationMenu({
+  className,
+  children,
+  viewport,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu$1.Root> & {
+  viewport?: boolean;
+}): React.JSX.Element;
+declare function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu$1.List>): React.JSX.Element;
+declare function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu$1.Item>): React.JSX.Element;
+declare const navigationMenuTriggerStyle: (props?: class_variance_authority_types2.ClassProp | undefined) => string;
+declare function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu$1.Trigger>): React.JSX.Element;
+declare function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu$1.Content>): React.JSX.Element;
+declare function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu$1.Viewport>): React.JSX.Element;
+declare function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu$1.Link>): React.JSX.Element;
+declare function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu$1.Indicator>): React.JSX.Element;
+//#endregion
+export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle };
+//# sourceMappingURL=navigation-menu.d.ts.map

package/dist/navigation-menu.js

@@ -0,0 +1,2 @@
+"use client";import{cn as e}from"./utils-D9AH0PUV.js";import t from"react";import{NavigationMenu as n}from"radix-ui";import{cva as r}from"class-variance-authority";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{ChevronDownIcon as o}from"lucide-react";function s({className:t,children:r,viewport:o=!0,...s}){return a(n.Root,{"data-slot":`navigation-menu`,"data-viewport":o,className:e(`group/navigation-menu relative flex max-w-max flex-1 items-center justify-center`,t),...s,children:[r,o&&i(p,{})]})}function c({className:t,...r}){return i(n.List,{"data-slot":`navigation-menu-list`,className:e(`group flex flex-1 list-none items-center justify-center gap-1`,t),...r})}function l({className:t,...r}){return i(n.Item,{"data-slot":`navigation-menu-item`,className:e(`relative`,t),...r})}const u=r(`group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1`);function d({className:t,children:r,...s}){return a(n.Trigger,{"data-slot":`navigation-menu-trigger`,className:e(u(),`group`,t),...s,children:[r,` `,i(o,{className:`relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180`,"aria-hidden":`true`})]})}function f({className:t,...r}){return i(n.Content,{"data-slot":`navigation-menu-content`,className:e(`data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto`,`group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none`,t),...r})}function p({className:t,...r}){return i(`div`,{className:e(`absolute top-full left-0 isolate z-50 flex justify-center`),children:i(n.Viewport,{"data-slot":`navigation-menu-viewport`,className:e(`origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]`,t),...r})})}function m({className:t,...r}){return i(n.Link,{"data-slot":`navigation-menu-link`,className:e(`data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4`,t),...r})}function h({className:t,...r}){return i(n.Indicator,{"data-slot":`navigation-menu-indicator`,className:e(`data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden`,t),...r,children:i(`div`,{className:`bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md`})})}export{s as NavigationMenu,f as NavigationMenuContent,h as NavigationMenuIndicator,l as NavigationMenuItem,m as NavigationMenuLink,c as NavigationMenuList,d as NavigationMenuTrigger,p as NavigationMenuViewport,u as navigationMenuTriggerStyle};
+//# sourceMappingURL=navigation-menu.js.map

package/dist/navigation-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-menu.js","names":["NavigationMenuPrimitive"],"sources":["../packages/components/ui/navigation-menu.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\";\nimport { cva } from \"class-variance-authority\";\nimport { ChevronDownIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  viewport?: boolean;\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  );\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"group flex flex-1 list-none items-center justify-center gap-1\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  );\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1\",\n);\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <ChevronDownIcon\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  );\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto\",\n        \"group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div\n      className={cn(\n        \"absolute top-full left-0 isolate z-50 flex justify-center\",\n      )}\n    >\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        \"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md\" />\n    </NavigationMenuPrimitive.Indicator>\n  );\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  // eslint-disable-next-line react-refresh/only-export-components\n  navigationMenuTriggerStyle,\n  NavigationMenuViewport,\n};\n"],"mappings":"qQAQA,SAAS,EAAe,CACtB,YACA,WACA,WAAW,GACX,GAAG,EAGJ,CAAE,CACD,OACE,EAACA,EAAwB,KAAA,CACvB,YAAU,kBACV,gBAAe,EACf,UAAW,EACT,mFACA,GAEF,GAAI,YAEH,EACA,GAAY,EAAC,EAAA,EAAA,EAAA,EAGnB,CAED,SAAS,EAAmB,CAC1B,YACA,GAAG,EACuD,CAAE,CAC5D,OACE,EAACA,EAAwB,KAAA,CACvB,YAAU,uBACV,UAAW,EACT,gEACA,GAEF,GAAI,GAGT,CAED,SAAS,EAAmB,CAC1B,YACA,GAAG,EACuD,CAAE,CAC5D,OACE,EAACA,EAAwB,KAAA,CACvB,YAAU,uBACV,UAAW,EAAG,WAAY,GAC1B,GAAI,GAGT,CAED,MAAM,EAA6B,EACjC,ggBAGF,SAAS,EAAsB,CAC7B,YACA,WACA,GAAG,EAC0D,CAAE,CAC/D,OACE,EAACA,EAAwB,QAAA,CACvB,YAAU,0BACV,UAAW,EAAG,IAA8B,QAAS,GACrD,GAAI,YAEH,EAAU,IACX,EAAC,EAAA,CACC,UAAU,4FACV,cAAY,WAInB,CAED,SAAS,EAAsB,CAC7B,YACA,GAAG,EAC0D,CAAE,CAC/D,OACE,EAACA,EAAwB,QAAA,CACvB,YAAU,0BACV,UAAW,EACT,mWACA,4hCACA,GAEF,GAAI,GAGT,CAED,SAAS,EAAuB,CAC9B,YACA,GAAG,EAC2D,CAAE,CAChE,OACE,EAAC,MAAA,CACC,UAAW,EACT,sEAGF,EAACA,EAAwB,SAAA,CACvB,YAAU,2BACV,UAAW,EACT,qVACA,GAEF,GAAI,KAIX,CAED,SAAS,EAAmB,CAC1B,YACA,GAAG,EACuD,CAAE,CAC5D,OACE,EAACA,EAAwB,KAAA,CACvB,YAAU,uBACV,UAAW,EACT,wdACA,GAEF,GAAI,GAGT,CAED,SAAS,EAAwB,CAC/B,YACA,GAAG,EAC4D,CAAE,CACjE,OACE,EAACA,EAAwB,UAAA,CACvB,YAAU,4BACV,UAAW,EACT,+LACA,GAEF,GAAI,WAEJ,EAAC,MAAA,CAAI,UAAU,yEAAA,GAGpB"}

package/dist/pagination.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require(`./chunk-CUT6urMc.cjs`),t=require(`./utils-BsjVK5EW.cjs`),n=require(`./button-CXoxOggw.cjs`),r=e.__toESM(require(`react`)),i=e.__toESM(require(`react/jsx-runtime`)),a=e.__toESM(require(`lucide-react`));function o({className:e,...n}){return(0,i.jsx)(`nav`,{role:`navigation`,"aria-label":`pagination`,"data-slot":`pagination`,className:t.cn(`mx-auto flex w-full justify-center`,e),...n})}function s({className:e,...n}){return(0,i.jsx)(`ul`,{"data-slot":`pagination-content`,className:t.cn(`flex flex-row items-center gap-1`,e),...n})}function c({...e}){return(0,i.jsx)(`li`,{"data-slot":`pagination-item`,...e})}function l({className:e,isActive:r,size:a=`icon`,...o}){return(0,i.jsx)(`a`,{"aria-current":r?`page`:void 0,"data-slot":`pagination-link`,"data-active":r,className:t.cn(n.buttonVariants({variant:r?`outline`:`ghost`,size:a}),e),...o})}function u({className:e,...n}){return(0,i.jsxs)(l,{"aria-label":`Go to previous page`,size:`default`,className:t.cn(`gap-1 px-2.5 sm:pl-2.5`,e),...n,children:[(0,i.jsx)(a.ChevronLeftIcon,{}),(0,i.jsx)(`span`,{className:`hidden sm:block`,children:`Previous`})]})}function d({className:e,...n}){return(0,i.jsxs)(l,{"aria-label":`Go to next page`,size:`default`,className:t.cn(`gap-1 px-2.5 sm:pr-2.5`,e),...n,children:[(0,i.jsx)(`span`,{className:`hidden sm:block`,children:`Next`}),(0,i.jsx)(a.ChevronRightIcon,{})]})}function f({className:e,...n}){return(0,i.jsxs)(`span`,{"aria-hidden":!0,"data-slot":`pagination-ellipsis`,className:t.cn(`flex size-9 items-center justify-center`,e),...n,children:[(0,i.jsx)(a.MoreHorizontalIcon,{className:`size-4`}),(0,i.jsx)(`span`,{className:`sr-only`,children:`More pages`})]})}exports.Pagination=o,exports.PaginationContent=s,exports.PaginationEllipsis=f,exports.PaginationItem=c,exports.PaginationLink=l,exports.PaginationNext=d,exports.PaginationPrevious=u;
+//# sourceMappingURL=pagination.cjs.map

package/dist/pagination.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.cjs","names":["cn","buttonVariants","ChevronLeftIcon","ChevronRightIcon","MoreHorizontalIcon"],"sources":["../packages/components/ui/pagination.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  MoreHorizontalIcon,\n} from \"lucide-react\";\n\nimport { Button, buttonVariants } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"flex flex-row items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />;\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean;\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">;\n\nfunction PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      data-slot=\"pagination-link\"\n      data-active={isActive}\n      className={cn(\n        buttonVariants({\n          variant: isActive ? \"outline\" : \"ghost\",\n          size,\n        }),\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"gap-1 px-2.5 sm:pl-2.5\", className)}\n      {...props}\n    >\n      <ChevronLeftIcon />\n      <span className=\"hidden sm:block\">Previous</span>\n    </PaginationLink>\n  );\n}\n\nfunction PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"gap-1 px-2.5 sm:pr-2.5\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">Next</span>\n      <ChevronRightIcon />\n    </PaginationLink>\n  );\n}\n\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <MoreHorizontalIcon className=\"size-4\" />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  );\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n};\n"],"mappings":"uOAWA,SAAS,EAAW,CAAE,YAAW,GAAG,EAAoC,CAAE,CACxE,OACE,EAAA,EAAA,KAAC,MAAA,CACC,KAAK,aACL,aAAW,aACX,YAAU,aACV,UAAWA,EAAAA,GAAG,qCAAsC,GACpD,GAAI,GAGT,CAED,SAAS,EAAkB,CACzB,YACA,GAAG,EACwB,CAAE,CAC7B,OACE,EAAA,EAAA,KAAC,KAAA,CACC,YAAU,qBACV,UAAWA,EAAAA,GAAG,mCAAoC,GAClD,GAAI,GAGT,CAED,SAAS,EAAe,CAAE,GAAG,EAAmC,CAAE,CAChE,OAAO,EAAA,EAAA,KAAC,KAAA,CAAG,YAAU,kBAAkB,GAAI,GAC5C,CAOD,SAAS,EAAe,CACtB,YACA,WACA,OAAO,OACP,GAAG,EACiB,CAAE,CACtB,OACE,EAAA,EAAA,KAAC,IAAA,CACC,eAAc,EAAW,OAAS,IAAA,GAClC,YAAU,kBACV,cAAa,EACb,UAAWA,EAAAA,GACTC,EAAAA,eAAe,CACb,QAAS,EAAW,UAAY,QAChC,OACD,EACD,GAEF,GAAI,GAGT,CAED,SAAS,EAAmB,CAC1B,YACA,GAAG,EACyC,CAAE,CAC9C,OACE,EAAA,EAAA,MAAC,EAAA,CACC,aAAW,sBACX,KAAK,UACL,UAAWD,EAAAA,GAAG,yBAA0B,GACxC,GAAI,aAEJ,EAAA,EAAA,KAACE,EAAAA,gBAAAA,EAAAA,GACD,EAAA,EAAA,KAAC,OAAA,CAAK,UAAU,2BAAkB,eAGvC,CAED,SAAS,EAAe,CACtB,YACA,GAAG,EACyC,CAAE,CAC9C,OACE,EAAA,EAAA,MAAC,EAAA,CACC,aAAW,kBACX,KAAK,UACL,UAAWF,EAAAA,GAAG,yBAA0B,GACxC,GAAI,aAEJ,EAAA,EAAA,KAAC,OAAA,CAAK,UAAU,2BAAkB,UAClC,EAAA,EAAA,KAACG,EAAAA,iBAAAA,EAAAA,EAAAA,EAGN,CAED,SAAS,EAAmB,CAC1B,YACA,GAAG,EAC0B,CAAE,CAC/B,OACE,EAAA,EAAA,MAAC,OAAA,CACC,cAAA,GACA,YAAU,sBACV,UAAWH,EAAAA,GAAG,0CAA2C,GACzD,GAAI,aAEJ,EAAA,EAAA,KAACI,EAAAA,mBAAAA,CAAmB,UAAU,SAAA,GAC9B,EAAA,EAAA,KAAC,OAAA,CAAK,UAAU,mBAAU,iBAG/B"}

package/dist/pagination.d.cts

@@ -0,0 +1,39 @@
+import { Button } from "./button-B7eGk6JD.cjs";
+import React from "react";
+
+//#region packages/components/ui/pagination.d.ts
+declare function Pagination({
+  className,
+  ...props
+}: React.ComponentProps<"nav">): React.JSX.Element;
+declare function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<"ul">): React.JSX.Element;
+declare function PaginationItem({
+  ...props
+}: React.ComponentProps<"li">): React.JSX.Element;
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<React.ComponentProps<typeof Button>, "size"> & React.ComponentProps<"a">;
+declare function PaginationLink({
+  className,
+  isActive,
+  size,
+  ...props
+}: PaginationLinkProps): React.JSX.Element;
+declare function PaginationPrevious({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>): React.JSX.Element;
+declare function PaginationNext({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>): React.JSX.Element;
+declare function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">): React.JSX.Element;
+//#endregion
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };
+//# sourceMappingURL=pagination.d.cts.map

package/dist/pagination.d.ts

@@ -0,0 +1,39 @@
+import { Button } from "./button-DrAGGMHl.js";
+import React from "react";
+
+//#region packages/components/ui/pagination.d.ts
+declare function Pagination({
+  className,
+  ...props
+}: React.ComponentProps<"nav">): React.JSX.Element;
+declare function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<"ul">): React.JSX.Element;
+declare function PaginationItem({
+  ...props
+}: React.ComponentProps<"li">): React.JSX.Element;
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<React.ComponentProps<typeof Button>, "size"> & React.ComponentProps<"a">;
+declare function PaginationLink({
+  className,
+  isActive,
+  size,
+  ...props
+}: PaginationLinkProps): React.JSX.Element;
+declare function PaginationPrevious({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>): React.JSX.Element;
+declare function PaginationNext({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>): React.JSX.Element;
+declare function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">): React.JSX.Element;
+//#endregion
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };
+//# sourceMappingURL=pagination.d.ts.map

package/dist/pagination.js

@@ -0,0 +1,2 @@
+"use client";import{cn as e}from"./utils-D9AH0PUV.js";import{buttonVariants as t}from"./button-C1iCV8GH.js";import n from"react";import{jsx as r,jsxs as i}from"react/jsx-runtime";import{ChevronLeftIcon as a,ChevronRightIcon as o,MoreHorizontalIcon as s}from"lucide-react";function c({className:t,...n}){return r(`nav`,{role:`navigation`,"aria-label":`pagination`,"data-slot":`pagination`,className:e(`mx-auto flex w-full justify-center`,t),...n})}function l({className:t,...n}){return r(`ul`,{"data-slot":`pagination-content`,className:e(`flex flex-row items-center gap-1`,t),...n})}function u({...e}){return r(`li`,{"data-slot":`pagination-item`,...e})}function d({className:n,isActive:i,size:a=`icon`,...o}){return r(`a`,{"aria-current":i?`page`:void 0,"data-slot":`pagination-link`,"data-active":i,className:e(t({variant:i?`outline`:`ghost`,size:a}),n),...o})}function f({className:t,...n}){return i(d,{"aria-label":`Go to previous page`,size:`default`,className:e(`gap-1 px-2.5 sm:pl-2.5`,t),...n,children:[r(a,{}),r(`span`,{className:`hidden sm:block`,children:`Previous`})]})}function p({className:t,...n}){return i(d,{"aria-label":`Go to next page`,size:`default`,className:e(`gap-1 px-2.5 sm:pr-2.5`,t),...n,children:[r(`span`,{className:`hidden sm:block`,children:`Next`}),r(o,{})]})}function m({className:t,...n}){return i(`span`,{"aria-hidden":!0,"data-slot":`pagination-ellipsis`,className:e(`flex size-9 items-center justify-center`,t),...n,children:[r(s,{className:`size-4`}),r(`span`,{className:`sr-only`,children:`More pages`})]})}export{c as Pagination,l as PaginationContent,m as PaginationEllipsis,u as PaginationItem,d as PaginationLink,p as PaginationNext,f as PaginationPrevious};
+//# sourceMappingURL=pagination.js.map