shad-m 1.0.0

package/dist/common/interactive/autocomplete.js

@@ -0,0 +1,178 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cmdk = require('cmdk');
+var React = require('react');
+var command = require('@/components/command');
+var input = require('@/components/input');
+var popover = require('@/components/popover');
+var skeleton = require('@/components/skeleton');
+var utils = require('@/lib/utils');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function AutoComplete({
+  label = "",
+  placeholder = "",
+  options,
+  searchApi,
+  value,
+  onInputChange,
+  onSelectChange,
+  children,
+  enableAddNewItem,
+  newItemOption,
+  renderOption,
+  className,
+  renderEmpty,
+  ...props
+}) {
+  const triggerRef = React__namespace.useRef(null);
+  const [triggerWidth, setTriggerWidth] = React.useState();
+  const [open, setOpen] = React.useState(false);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [searchedOptions, setSearchedOptions] = React.useState([]);
+  const newItem = React.useMemo(() => newItemOption?.(value ?? ""), [newItemOption, value]);
+  React.useEffect(() => {
+    if (open) handleSearch(value);
+    if (triggerRef.current) {
+      setTriggerWidth(triggerRef.current.offsetWidth);
+    }
+  }, [open, value]);
+  const isPaginatedApi = (api) => {
+    return typeof api === "function" && api.length >= 2;
+  };
+  const handleSearch = async (searchValue) => {
+    if (!searchValue) {
+      setSearchedOptions([]);
+    } else if (searchApi) {
+      handleSearchApi(value, 1, 10);
+    } else if (options) {
+      handleSearchLocal(searchValue);
+    }
+  };
+  const handleSearchLocal = (searchValue) => {
+    if (searchValue && options && options?.length > 0) {
+      const resultOptions = [...options ?? []].filter(
+        // (option) => (option.name?.toLowerCase().search(searchValue.toLowerCase()) ?? -1) > -1,
+        (option) => option.name?.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").includes(
+          searchValue.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "")
+        ) ?? false
+      );
+      setSearchedOptions(resultOptions);
+    } else if (options && options?.length > 0) {
+      setSearchedOptions([...options ?? []]);
+    }
+  };
+  const handleSearchApi = async (searchValue = "", page = 1, size = 10) => {
+    try {
+      setIsLoading(true);
+      if (isPaginatedApi(searchApi)) {
+        const res = await searchApi?.(searchValue, page, size);
+        const resultOptions = res?.data ?? [];
+        setSearchedOptions(resultOptions);
+      } else {
+        const resultOptions = await searchApi(searchValue);
+        setSearchedOptions(resultOptions);
+      }
+    } catch (error) {
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const handleSelectItem = (option) => {
+    onSelectChange?.(option);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(command.Command, { shouldFilter: false, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(popover.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: triggerRef, children: /* @__PURE__ */ jsxRuntime.jsx(
+      cmdk.Command.Input,
+      {
+        ...props,
+        asChild: true,
+        value,
+        onValueChange: onInputChange,
+        placeholder,
+        onKeyDown: (e) => setOpen(e.key !== "Escape"),
+        children: children ?? /* @__PURE__ */ jsxRuntime.jsx(input.Input, { label })
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      popover.PopoverContent,
+      {
+        asChild: true,
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        onInteractOutside: (e) => {
+          if (e.target instanceof Element && e.target.hasAttribute("cmdk-input")) {
+            e.preventDefault();
+          }
+        },
+        className: "w-full min-w-[300px] p-0",
+        hidden: !value,
+        align: "start",
+        style: { width: triggerWidth },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(command.CommandList, { children: [
+          isLoading && /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Loading, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2 p-3", children: new Array(5).fill(1).map((_item, index) => /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-10 w-full" }, index)) }) }),
+          searchedOptions?.length > 0 && !isLoading && /* @__PURE__ */ jsxRuntime.jsx(command.CommandGroup, { className: "px-0 py-2", children: searchedOptions.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            command.CommandItem,
+            {
+              value: option.value,
+              onMouseDown: (e) => e.preventDefault(),
+              onSelect: () => handleSelectItem(option),
+              className: utils.cn(
+                "text-t16m hover:!bg-accent data-[selected='true']:bg-accent rounded-none p-3",
+                index > 0 && "border-border border-t"
+              ),
+              children: renderOption ? renderOption(option) : option.name ?? option.value
+            },
+            option.value
+          )) }),
+          searchedOptions?.length === 0 && !isLoading && enableAddNewItem && newItem && /* @__PURE__ */ jsxRuntime.jsx(command.CommandGroup, { className: "px-0 py-2", children: [newItem].filter((o) => !!o).map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            command.CommandItem,
+            {
+              value: option.value,
+              onMouseDown: (e) => e.preventDefault(),
+              onSelect: () => handleSelectItem(option),
+              className: utils.cn(
+                "text-t16m hover:!bg-accent data-[selected='true']:bg-accent rounded-none px-3 py-4",
+                index > 0 && "border-border border-t"
+              ),
+              children: renderOption ? renderOption(option, true) : option.name ?? option.value
+            },
+            option.value
+          )) }),
+          searchedOptions?.length === 0 && !isLoading && !enableAddNewItem && /* @__PURE__ */ jsxRuntime.jsx(command.CommandGroup, { className: "px-0 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+            command.CommandItem,
+            {
+              onMouseDown: (e) => e.preventDefault(),
+              className: utils.cn("!text-t16 !text-muted-foreground !bg-transparent px-3 py-4"),
+              children: renderEmpty ? renderEmpty() : /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Kh\xF4ng c\xF3 th\xF4ng tin hi\u1EC3n th\u1ECB" })
+            }
+          ) })
+        ] })
+      }
+    )
+  ] }) });
+}
+
+exports.AutoComplete = AutoComplete;
+//# sourceMappingURL=autocomplete.js.map
+//# sourceMappingURL=autocomplete.js.map

package/dist/common/interactive/autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/interactive/autocomplete.tsx"],"names":["React","useState","useMemo","useEffect","jsx","Popover","jsxs","Command","PopoverTrigger","CommandPrimitive","Input","PopoverContent","CommandList","Skeleton","CommandGroup","CommandItem","cn"],"mappings":"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","file":"autocomplete.js","sourcesContent":["import { Command as CommandPrimitive } from 'cmdk';\nimport { useEffect, useMemo, useState } from 'react';\nimport { Command, CommandGroup, CommandItem, CommandList } from '@/components/command';\nimport { Input } from '@/components/input';\nimport { Popover, PopoverTrigger, PopoverContent } from '@/components/popover';\nimport { Skeleton } from '@/components/skeleton';\nimport { Option } from '@/common/interactive/select';\nimport {\n  ApiSearchFunction,\n  ApiSearchPaginatedFunction,\n} from '@/common/interactive/select-with-api';\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\n\ntype Props<T extends string> = {\n  label?: string;\n  placeholder?: string;\n  options?: Option[];\n  searchApi?: ApiSearchFunction<Option> | ApiSearchPaginatedFunction<Option>;\n  value?: string;\n  onInputChange?: (value?: string) => void;\n  onSelectChange?: (value?: Option) => void;\n  children?: React.ReactNode;\n  enableAddNewItem?: boolean;\n  newItemOption?: (value: string) => Option | null;\n  renderOption?: (option: Option, isNewItem?: boolean) => React.ReactNode;\n  renderEmpty?: () => React.ReactNode;\n  className?: string;\n};\n\nexport function AutoComplete<T extends string>({\n  label = '',\n  placeholder = '',\n  options,\n  searchApi,\n  value,\n  onInputChange,\n  onSelectChange,\n  children,\n  enableAddNewItem,\n  newItemOption,\n  renderOption,\n  className,\n  renderEmpty,\n  ...props\n}: Props<T>) {\n  const triggerRef = React.useRef<HTMLDivElement>(null);\n  const [triggerWidth, setTriggerWidth] = useState<number>();\n  const [open, setOpen] = useState(false);\n  const [isLoading, setIsLoading] = useState(false);\n  const [searchedOptions, setSearchedOptions] = useState<Option[]>([]);\n\n  const newItem = useMemo(() => newItemOption?.(value ?? ''), [newItemOption, value]);\n\n  useEffect(() => {\n    if (open) handleSearch(value);\n\n    if (triggerRef.current) {\n      setTriggerWidth(triggerRef.current.offsetWidth);\n    }\n  }, [open, value]);\n\n  const isPaginatedApi = (api: any): api is ApiSearchPaginatedFunction<Option> => {\n    return typeof api === 'function' && api.length >= 2;\n  };\n\n  const handleSearch = async (searchValue?: string) => {\n    if (!searchValue) {\n      setSearchedOptions([]);\n    } else if (searchApi) {\n      handleSearchApi(value, 1, 10);\n    } else if (options) {\n      handleSearchLocal(searchValue);\n    }\n  };\n\n  const handleSearchLocal = (searchValue?: string) => {\n    if (searchValue && options && options?.length > 0) {\n      const resultOptions = [...(options ?? [])].filter(\n        // (option) => (option.name?.toLowerCase().search(searchValue.toLowerCase()) ?? -1) > -1,\n        (option) =>\n          option.name\n            ?.toLowerCase()\n            .normalize('NFD')\n            .replace(/[\\u0300-\\u036f]/g, '')\n            .includes(\n              searchValue\n                .toLowerCase()\n                .normalize('NFD')\n                .replace(/[\\u0300-\\u036f]/g, ''),\n            ) ?? false,\n      );\n\n      setSearchedOptions(resultOptions);\n    } else if (options && options?.length > 0) {\n      setSearchedOptions([...(options ?? [])]);\n    }\n  };\n\n  const handleSearchApi = async (searchValue: string = '', page: number = 1, size: number = 10) => {\n    try {\n      setIsLoading(true);\n      if (isPaginatedApi(searchApi)) {\n        const res = await searchApi?.(searchValue, page, size);\n        const resultOptions = res?.data ?? [];\n        setSearchedOptions(resultOptions);\n      } else {\n        const resultOptions = await (searchApi as ApiSearchFunction<Option>)(searchValue);\n        setSearchedOptions(resultOptions);\n      }\n    } catch (error) {\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  const handleSelectItem = (option: Option) => {\n    onSelectChange?.(option);\n    setOpen(false);\n  };\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <Command shouldFilter={false}>\n        <PopoverTrigger asChild>\n          <div ref={triggerRef}>\n            <CommandPrimitive.Input\n              {...props}\n              asChild\n              value={value}\n              onValueChange={onInputChange}\n              placeholder={placeholder}\n              onKeyDown={(e) => setOpen(e.key !== 'Escape')}\n            >\n              {children ?? <Input label={label} />}\n            </CommandPrimitive.Input>\n          </div>\n        </PopoverTrigger>\n\n        <PopoverContent\n          asChild\n          onOpenAutoFocus={(e) => e.preventDefault()}\n          onInteractOutside={(e) => {\n            if (e.target instanceof Element && e.target.hasAttribute('cmdk-input')) {\n              e.preventDefault();\n            }\n          }}\n          className=\"w-full min-w-[300px] p-0\"\n          // hidden={\n          //   // (!searchedOptions || searchedOptions?.length == 0) &&\n          //   // (!enableAddNewItem || !value || !newItem) &&\n          //   // !isLoading\n          // }\n          hidden={!value}\n          align=\"start\"\n          style={{ width: triggerWidth }}\n        >\n          <CommandList>\n            {isLoading && (\n              <CommandPrimitive.Loading>\n                <div className=\"space-y-2 p-3\">\n                  {new Array(5).fill(1).map((_item, index) => (\n                    <Skeleton className=\"h-10 w-full\" key={index} />\n                  ))}\n                </div>\n              </CommandPrimitive.Loading>\n            )}\n\n            {searchedOptions?.length > 0 && !isLoading && (\n              <CommandGroup className=\"px-0 py-2\">\n                {searchedOptions.map((option, index: number) => (\n                  <CommandItem\n                    key={option.value}\n                    value={option.value}\n                    onMouseDown={(e) => e.preventDefault()}\n                    onSelect={() => handleSelectItem(option)}\n                    className={cn(\n                      \"text-t16m hover:!bg-accent data-[selected='true']:bg-accent rounded-none p-3\",\n                      index > 0 && 'border-border border-t',\n                    )}\n                  >\n                    {renderOption ? renderOption(option) : (option.name ?? option.value)}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            )}\n\n            {searchedOptions?.length === 0 && !isLoading && enableAddNewItem && newItem && (\n              <CommandGroup className=\"px-0 py-2\">\n                {[newItem]\n                  .filter((o) => !!o)\n                  .map((option, index: number) => (\n                    <CommandItem\n                      key={option.value}\n                      value={option.value}\n                      onMouseDown={(e) => e.preventDefault()}\n                      onSelect={() => handleSelectItem(option)}\n                      className={cn(\n                        \"text-t16m hover:!bg-accent data-[selected='true']:bg-accent rounded-none px-3 py-4\",\n                        index > 0 && 'border-border border-t',\n                      )}\n                    >\n                      {renderOption ? renderOption(option, true) : (option.name ?? option.value)}\n                    </CommandItem>\n                  ))}\n              </CommandGroup>\n            )}\n\n            {searchedOptions?.length === 0 && !isLoading && !enableAddNewItem && (\n              <CommandGroup className=\"px-0 py-2\">\n                <CommandItem\n                  onMouseDown={(e) => e.preventDefault()}\n                  className={cn('!text-t16 !text-muted-foreground !bg-transparent px-3 py-4')}\n                >\n                  {renderEmpty ? renderEmpty() : <p>Không có thông tin hiển thị</p>}\n                </CommandItem>\n              </CommandGroup>\n            )}\n          </CommandList>\n        </PopoverContent>\n      </Command>\n    </Popover>\n  );\n}\n"]}

package/dist/common/interactive/autocomplete.mjs

@@ -0,0 +1,157 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Command as Command$1 } from 'cmdk';
+import * as React from 'react';
+import { useState, useMemo, useEffect } from 'react';
+import { Command, CommandList, CommandGroup, CommandItem } from '@/components/command';
+import { Input } from '@/components/input';
+import { Popover, PopoverTrigger, PopoverContent } from '@/components/popover';
+import { Skeleton } from '@/components/skeleton';
+import { cn } from '@/lib/utils';
+
+function AutoComplete({
+  label = "",
+  placeholder = "",
+  options,
+  searchApi,
+  value,
+  onInputChange,
+  onSelectChange,
+  children,
+  enableAddNewItem,
+  newItemOption,
+  renderOption,
+  className,
+  renderEmpty,
+  ...props
+}) {
+  const triggerRef = React.useRef(null);
+  const [triggerWidth, setTriggerWidth] = useState();
+  const [open, setOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchedOptions, setSearchedOptions] = useState([]);
+  const newItem = useMemo(() => newItemOption?.(value ?? ""), [newItemOption, value]);
+  useEffect(() => {
+    if (open) handleSearch(value);
+    if (triggerRef.current) {
+      setTriggerWidth(triggerRef.current.offsetWidth);
+    }
+  }, [open, value]);
+  const isPaginatedApi = (api) => {
+    return typeof api === "function" && api.length >= 2;
+  };
+  const handleSearch = async (searchValue) => {
+    if (!searchValue) {
+      setSearchedOptions([]);
+    } else if (searchApi) {
+      handleSearchApi(value, 1, 10);
+    } else if (options) {
+      handleSearchLocal(searchValue);
+    }
+  };
+  const handleSearchLocal = (searchValue) => {
+    if (searchValue && options && options?.length > 0) {
+      const resultOptions = [...options ?? []].filter(
+        // (option) => (option.name?.toLowerCase().search(searchValue.toLowerCase()) ?? -1) > -1,
+        (option) => option.name?.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").includes(
+          searchValue.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "")
+        ) ?? false
+      );
+      setSearchedOptions(resultOptions);
+    } else if (options && options?.length > 0) {
+      setSearchedOptions([...options ?? []]);
+    }
+  };
+  const handleSearchApi = async (searchValue = "", page = 1, size = 10) => {
+    try {
+      setIsLoading(true);
+      if (isPaginatedApi(searchApi)) {
+        const res = await searchApi?.(searchValue, page, size);
+        const resultOptions = res?.data ?? [];
+        setSearchedOptions(resultOptions);
+      } else {
+        const resultOptions = await searchApi(searchValue);
+        setSearchedOptions(resultOptions);
+      }
+    } catch (error) {
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const handleSelectItem = (option) => {
+    onSelectChange?.(option);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsx(Popover, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(Command, { shouldFilter: false, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { ref: triggerRef, children: /* @__PURE__ */ jsx(
+      Command$1.Input,
+      {
+        ...props,
+        asChild: true,
+        value,
+        onValueChange: onInputChange,
+        placeholder,
+        onKeyDown: (e) => setOpen(e.key !== "Escape"),
+        children: children ?? /* @__PURE__ */ jsx(Input, { label })
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        asChild: true,
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        onInteractOutside: (e) => {
+          if (e.target instanceof Element && e.target.hasAttribute("cmdk-input")) {
+            e.preventDefault();
+          }
+        },
+        className: "w-full min-w-[300px] p-0",
+        hidden: !value,
+        align: "start",
+        style: { width: triggerWidth },
+        children: /* @__PURE__ */ jsxs(CommandList, { children: [
+          isLoading && /* @__PURE__ */ jsx(Command$1.Loading, { children: /* @__PURE__ */ jsx("div", { className: "space-y-2 p-3", children: new Array(5).fill(1).map((_item, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" }, index)) }) }),
+          searchedOptions?.length > 0 && !isLoading && /* @__PURE__ */ jsx(CommandGroup, { className: "px-0 py-2", children: searchedOptions.map((option, index) => /* @__PURE__ */ jsx(
+            CommandItem,
+            {
+              value: option.value,
+              onMouseDown: (e) => e.preventDefault(),
+              onSelect: () => handleSelectItem(option),
+              className: cn(
+                "text-t16m hover:!bg-accent data-[selected='true']:bg-accent rounded-none p-3",
+                index > 0 && "border-border border-t"
+              ),
+              children: renderOption ? renderOption(option) : option.name ?? option.value
+            },
+            option.value
+          )) }),
+          searchedOptions?.length === 0 && !isLoading && enableAddNewItem && newItem && /* @__PURE__ */ jsx(CommandGroup, { className: "px-0 py-2", children: [newItem].filter((o) => !!o).map((option, index) => /* @__PURE__ */ jsx(
+            CommandItem,
+            {
+              value: option.value,
+              onMouseDown: (e) => e.preventDefault(),
+              onSelect: () => handleSelectItem(option),
+              className: cn(
+                "text-t16m hover:!bg-accent data-[selected='true']:bg-accent rounded-none px-3 py-4",
+                index > 0 && "border-border border-t"
+              ),
+              children: renderOption ? renderOption(option, true) : option.name ?? option.value
+            },
+            option.value
+          )) }),
+          searchedOptions?.length === 0 && !isLoading && !enableAddNewItem && /* @__PURE__ */ jsx(CommandGroup, { className: "px-0 py-2", children: /* @__PURE__ */ jsx(
+            CommandItem,
+            {
+              onMouseDown: (e) => e.preventDefault(),
+              className: cn("!text-t16 !text-muted-foreground !bg-transparent px-3 py-4"),
+              children: renderEmpty ? renderEmpty() : /* @__PURE__ */ jsx("p", { children: "Kh\xF4ng c\xF3 th\xF4ng tin hi\u1EC3n th\u1ECB" })
+            }
+          ) })
+        ] })
+      }
+    )
+  ] }) });
+}
+
+export { AutoComplete };
+//# sourceMappingURL=autocomplete.mjs.map
+//# sourceMappingURL=autocomplete.mjs.map

package/dist/common/interactive/autocomplete.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/interactive/autocomplete.tsx"],"names":["CommandPrimitive"],"mappings":"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","file":"autocomplete.mjs","sourcesContent":["import { Command as CommandPrimitive } from 'cmdk';\nimport { useEffect, useMemo, useState } from 'react';\nimport { Command, CommandGroup, CommandItem, CommandList } from '@/components/command';\nimport { Input } from '@/components/input';\nimport { Popover, PopoverTrigger, PopoverContent } from '@/components/popover';\nimport { Skeleton } from '@/components/skeleton';\nimport { Option } from '@/common/interactive/select';\nimport {\n  ApiSearchFunction,\n  ApiSearchPaginatedFunction,\n} from '@/common/interactive/select-with-api';\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\n\ntype Props<T extends string> = {\n  label?: string;\n  placeholder?: string;\n  options?: Option[];\n  searchApi?: ApiSearchFunction<Option> | ApiSearchPaginatedFunction<Option>;\n  value?: string;\n  onInputChange?: (value?: string) => void;\n  onSelectChange?: (value?: Option) => void;\n  children?: React.ReactNode;\n  enableAddNewItem?: boolean;\n  newItemOption?: (value: string) => Option | null;\n  renderOption?: (option: Option, isNewItem?: boolean) => React.ReactNode;\n  renderEmpty?: () => React.ReactNode;\n  className?: string;\n};\n\nexport function AutoComplete<T extends string>({\n  label = '',\n  placeholder = '',\n  options,\n  searchApi,\n  value,\n  onInputChange,\n  onSelectChange,\n  children,\n  enableAddNewItem,\n  newItemOption,\n  renderOption,\n  className,\n  renderEmpty,\n  ...props\n}: Props<T>) {\n  const triggerRef = React.useRef<HTMLDivElement>(null);\n  const [triggerWidth, setTriggerWidth] = useState<number>();\n  const [open, setOpen] = useState(false);\n  const [isLoading, setIsLoading] = useState(false);\n  const [searchedOptions, setSearchedOptions] = useState<Option[]>([]);\n\n  const newItem = useMemo(() => newItemOption?.(value ?? ''), [newItemOption, value]);\n\n  useEffect(() => {\n    if (open) handleSearch(value);\n\n    if (triggerRef.current) {\n      setTriggerWidth(triggerRef.current.offsetWidth);\n    }\n  }, [open, value]);\n\n  const isPaginatedApi = (api: any): api is ApiSearchPaginatedFunction<Option> => {\n    return typeof api === 'function' && api.length >= 2;\n  };\n\n  const handleSearch = async (searchValue?: string) => {\n    if (!searchValue) {\n      setSearchedOptions([]);\n    } else if (searchApi) {\n      handleSearchApi(value, 1, 10);\n    } else if (options) {\n      handleSearchLocal(searchValue);\n    }\n  };\n\n  const handleSearchLocal = (searchValue?: string) => {\n    if (searchValue && options && options?.length > 0) {\n      const resultOptions = [...(options ?? [])].filter(\n        // (option) => (option.name?.toLowerCase().search(searchValue.toLowerCase()) ?? -1) > -1,\n        (option) =>\n          option.name\n            ?.toLowerCase()\n            .normalize('NFD')\n            .replace(/[\\u0300-\\u036f]/g, '')\n            .includes(\n              searchValue\n                .toLowerCase()\n                .normalize('NFD')\n                .replace(/[\\u0300-\\u036f]/g, ''),\n            ) ?? false,\n      );\n\n      setSearchedOptions(resultOptions);\n    } else if (options && options?.length > 0) {\n      setSearchedOptions([...(options ?? [])]);\n    }\n  };\n\n  const handleSearchApi = async (searchValue: string = '', page: number = 1, size: number = 10) => {\n    try {\n      setIsLoading(true);\n      if (isPaginatedApi(searchApi)) {\n        const res = await searchApi?.(searchValue, page, size);\n        const resultOptions = res?.data ?? [];\n        setSearchedOptions(resultOptions);\n      } else {\n        const resultOptions = await (searchApi as ApiSearchFunction<Option>)(searchValue);\n        setSearchedOptions(resultOptions);\n      }\n    } catch (error) {\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  const handleSelectItem = (option: Option) => {\n    onSelectChange?.(option);\n    setOpen(false);\n  };\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <Command shouldFilter={false}>\n        <PopoverTrigger asChild>\n          <div ref={triggerRef}>\n            <CommandPrimitive.Input\n              {...props}\n              asChild\n              value={value}\n              onValueChange={onInputChange}\n              placeholder={placeholder}\n              onKeyDown={(e) => setOpen(e.key !== 'Escape')}\n            >\n              {children ?? <Input label={label} />}\n            </CommandPrimitive.Input>\n          </div>\n        </PopoverTrigger>\n\n        <PopoverContent\n          asChild\n          onOpenAutoFocus={(e) => e.preventDefault()}\n          onInteractOutside={(e) => {\n            if (e.target instanceof Element && e.target.hasAttribute('cmdk-input')) {\n              e.preventDefault();\n            }\n          }}\n          className=\"w-full min-w-[300px] p-0\"\n          // hidden={\n          //   // (!searchedOptions || searchedOptions?.length == 0) &&\n          //   // (!enableAddNewItem || !value || !newItem) &&\n          //   // !isLoading\n          // }\n          hidden={!value}\n          align=\"start\"\n          style={{ width: triggerWidth }}\n        >\n          <CommandList>\n            {isLoading && (\n              <CommandPrimitive.Loading>\n                <div className=\"space-y-2 p-3\">\n                  {new Array(5).fill(1).map((_item, index) => (\n                    <Skeleton className=\"h-10 w-full\" key={index} />\n                  ))}\n                </div>\n              </CommandPrimitive.Loading>\n            )}\n\n            {searchedOptions?.length > 0 && !isLoading && (\n              <CommandGroup className=\"px-0 py-2\">\n                {searchedOptions.map((option, index: number) => (\n                  <CommandItem\n                    key={option.value}\n                    value={option.value}\n                    onMouseDown={(e) => e.preventDefault()}\n                    onSelect={() => handleSelectItem(option)}\n                    className={cn(\n                      \"text-t16m hover:!bg-accent data-[selected='true']:bg-accent rounded-none p-3\",\n                      index > 0 && 'border-border border-t',\n                    )}\n                  >\n                    {renderOption ? renderOption(option) : (option.name ?? option.value)}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            )}\n\n            {searchedOptions?.length === 0 && !isLoading && enableAddNewItem && newItem && (\n              <CommandGroup className=\"px-0 py-2\">\n                {[newItem]\n                  .filter((o) => !!o)\n                  .map((option, index: number) => (\n                    <CommandItem\n                      key={option.value}\n                      value={option.value}\n                      onMouseDown={(e) => e.preventDefault()}\n                      onSelect={() => handleSelectItem(option)}\n                      className={cn(\n                        \"text-t16m hover:!bg-accent data-[selected='true']:bg-accent rounded-none px-3 py-4\",\n                        index > 0 && 'border-border border-t',\n                      )}\n                    >\n                      {renderOption ? renderOption(option, true) : (option.name ?? option.value)}\n                    </CommandItem>\n                  ))}\n              </CommandGroup>\n            )}\n\n            {searchedOptions?.length === 0 && !isLoading && !enableAddNewItem && (\n              <CommandGroup className=\"px-0 py-2\">\n                <CommandItem\n                  onMouseDown={(e) => e.preventDefault()}\n                  className={cn('!text-t16 !text-muted-foreground !bg-transparent px-3 py-4')}\n                >\n                  {renderEmpty ? renderEmpty() : <p>Không có thông tin hiển thị</p>}\n                </CommandItem>\n              </CommandGroup>\n            )}\n          </CommandList>\n        </PopoverContent>\n      </Command>\n    </Popover>\n  );\n}\n"]}

package/dist/common/interactive/copy-tooltip.d.ts

@@ -0,0 +1,27 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { TooltipContent } from '../../components/tooltip';
+export interface CopyTooltipProps extends ComponentPropsWithoutRef<typeof TooltipContent> {
+    trigger?: React.ReactNode;
+    triggerAsChild?: boolean;
+    triggerClassName?: string;
+    children?: React.ReactNode;
+    text?: string;
+    responseContent?: string;
+    contentClassName?: string;
+    childrenClassName?: string;
+    delayDuration?: number;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    defaultOpen?: boolean;
+    disableHoverableContent?: boolean;
+    showArrow?: boolean;
+    arrowClassName?: string;
+    onCopySuccess?: (text: string) => void;
+    onCopyError?: (error: Error) => void;
+    resetDelay?: number;
+    skipDelayDuration?: number;
+}
+declare const CopyTooltip: React.ForwardRefExoticComponent<CopyTooltipProps & React.RefAttributes<HTMLDivElement>>;
+export { CopyTooltip };
+export default CopyTooltip;
+//# sourceMappingURL=copy-tooltip.d.ts.map

package/dist/common/interactive/copy-tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-tooltip.d.ts","sourceRoot":"","sources":["../../../src/common/interactive/copy-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,wBAAwB,EAAoC,MAAM,OAAO,CAAC;AAC1F,OAAO,EAGL,cAAc,EAGf,MAAM,0BAA0B,CAAC;AAIlC,MAAM,WAAW,gBAAiB,SAAQ,wBAAwB,CAAC,OAAO,cAAc,CAAC;IAEvF,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAG1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAG3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAGlC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,QAAA,MAAM,WAAW,yFA+IhB,CAAC;AAIF,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,eAAe,WAAW,CAAC"}

package/dist/common/interactive/copy-tooltip.js

@@ -0,0 +1,152 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var tooltip = require('../../components/tooltip');
+var utils = require('../../lib/utils');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const CopyTooltip = React__default.default.forwardRef(
+  ({
+    // Trigger props
+    trigger,
+    triggerAsChild = false,
+    triggerClassName,
+    // Tooltip behavior props
+    delayDuration = 700,
+    open: controlledOpen,
+    onOpenChange: controlledOnOpenChange,
+    defaultOpen = false,
+    disableHoverableContent = true,
+    // Arrow props
+    showArrow = true,
+    arrowClassName,
+    // Content props
+    children,
+    text,
+    responseContent = "\u0110\xE3 sao ch\xE9p",
+    contentClassName,
+    childrenClassName,
+    // Copy behavior props
+    onCopySuccess,
+    onCopyError,
+    resetDelay = 2e3,
+    // Tooltip provider props
+    skipDelayDuration = 300,
+    // Other props
+    className,
+    ...props
+  }, ref) => {
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+    const [status, setStatus] = React.useState("idle");
+    const isControlled = controlledOpen !== void 0;
+    const open = isControlled ? controlledOpen : internalOpen && status !== "idle";
+    const setOpen = isControlled ? controlledOnOpenChange : setInternalOpen;
+    const handleOpenChange = React.useCallback(
+      (newOpen) => {
+        setOpen?.(newOpen);
+      },
+      [setOpen]
+    );
+    const copyToClipboard = React.useCallback(
+      async (textToCopy) => {
+        try {
+          await navigator.clipboard.writeText(textToCopy);
+          setStatus("copied");
+          setInternalOpen(true);
+          onCopySuccess?.(textToCopy);
+          return true;
+        } catch (error) {
+          const err = error;
+          setStatus("failed");
+          setInternalOpen(true);
+          onCopyError?.(err);
+          console.error("Failed to copy text to clipboard:", err);
+          return false;
+        }
+      },
+      [onCopySuccess, onCopyError]
+    );
+    const handleTriggerClick = React.useCallback(
+      (event) => {
+        event.preventDefault();
+        if (text) {
+          copyToClipboard(text);
+        }
+      },
+      [text, copyToClipboard]
+    );
+    React.useEffect(() => {
+      if (status === "copied" || status === "failed") {
+        const timeout = setTimeout(() => {
+          setStatus("idle");
+          setInternalOpen(false);
+        }, resetDelay);
+        return () => clearTimeout(timeout);
+      }
+    }, [status, resetDelay]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      tooltip.TooltipProvider,
+      {
+        delayDuration,
+        skipDelayDuration,
+        disableHoverableContent,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          tooltip.Tooltip,
+          {
+            open,
+            onOpenChange: handleOpenChange,
+            defaultOpen: false,
+            delayDuration,
+            disableHoverableContent,
+            children: [
+              trigger && /* @__PURE__ */ jsxRuntime.jsx(
+                tooltip.TooltipTrigger,
+                {
+                  asChild: triggerAsChild,
+                  className: utils.cn("cursor-pointer", triggerClassName),
+                  onClick: handleTriggerClick,
+                  children: trigger
+                }
+              ),
+              children && /* @__PURE__ */ jsxRuntime.jsx(
+                tooltip.TooltipTrigger,
+                {
+                  asChild: triggerAsChild,
+                  className: utils.cn("cursor-pointer", triggerClassName),
+                  onClick: handleTriggerClick,
+                  children
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                tooltip.TooltipContent,
+                {
+                  ref,
+                  showArrow,
+                  className: utils.cn("flex flex-col px-3 py-1", className, contentClassName),
+                  ...props,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn(childrenClassName), children: responseContent }),
+                    showArrow && /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipArrow, { className: utils.cn("fill-foreground !h-[5px] !w-[8px]", arrowClassName) })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+CopyTooltip.displayName = "CopyTooltip";
+var copy_tooltip_default = CopyTooltip;
+
+exports.CopyTooltip = CopyTooltip;
+exports.default = copy_tooltip_default;
+//# sourceMappingURL=copy-tooltip.js.map
+//# sourceMappingURL=copy-tooltip.js.map

package/dist/common/interactive/copy-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/interactive/copy-tooltip.tsx"],"names":["React","useState","useCallback","useEffect","jsx","TooltipProvider","jsxs","Tooltip","TooltipTrigger","cn","TooltipContent","TooltipArrow"],"mappings":"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","file":"copy-tooltip.js","sourcesContent":["import React, { ComponentPropsWithoutRef, useCallback, useEffect, useState } from 'react';\nimport {\n  Tooltip,\n  TooltipArrow,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '../../components/tooltip';\nimport { type CopyStatus } from '../../hooks/useCopyToClipboard';\nimport { cn } from '../../lib/utils';\n\nexport interface CopyTooltipProps extends ComponentPropsWithoutRef<typeof TooltipContent> {\n  // Trigger props\n  trigger?: React.ReactNode;\n  triggerAsChild?: boolean;\n  triggerClassName?: string;\n\n  // Content props\n  children?: React.ReactNode;\n  text?: string;\n  responseContent?: string;\n  contentClassName?: string;\n  childrenClassName?: string;\n\n  // Tooltip behavior props\n  delayDuration?: number;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  defaultOpen?: boolean;\n  disableHoverableContent?: boolean;\n\n  // Arrow props\n  showArrow?: boolean;\n  arrowClassName?: string;\n\n  // Copy behavior props\n  onCopySuccess?: (text: string) => void;\n  onCopyError?: (error: Error) => void;\n  resetDelay?: number;\n\n  // Tooltip provider props\n  skipDelayDuration?: number;\n}\n\nconst CopyTooltip = React.forwardRef<React.ElementRef<typeof TooltipContent>, CopyTooltipProps>(\n  (\n    {\n      // Trigger props\n      trigger,\n      triggerAsChild = false,\n      triggerClassName,\n\n      // Tooltip behavior props\n      delayDuration = 700,\n      open: controlledOpen,\n      onOpenChange: controlledOnOpenChange,\n      defaultOpen = false,\n      disableHoverableContent = true,\n\n      // Arrow props\n      showArrow = true,\n      arrowClassName,\n\n      // Content props\n      children,\n      text,\n      responseContent = 'Đã sao chép',\n      contentClassName,\n      childrenClassName,\n\n      // Copy behavior props\n      onCopySuccess,\n      onCopyError,\n      resetDelay = 2000,\n\n      // Tooltip provider props\n      skipDelayDuration = 300,\n\n      // Other props\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const [internalOpen, setInternalOpen] = useState(defaultOpen);\n    const [status, setStatus] = useState<CopyStatus>('idle');\n\n    // Use controlled or uncontrolled state\n    const isControlled = controlledOpen !== undefined;\n    const open = isControlled ? controlledOpen : internalOpen && status !== 'idle';\n    const setOpen = isControlled ? controlledOnOpenChange : setInternalOpen;\n\n    const handleOpenChange = useCallback(\n      (newOpen: boolean) => {\n        setOpen?.(newOpen);\n      },\n      [setOpen],\n    );\n\n    const copyToClipboard = useCallback(\n      async (textToCopy: string): Promise<boolean> => {\n        try {\n          await navigator.clipboard.writeText(textToCopy);\n          setStatus('copied');\n          setInternalOpen(true);\n          onCopySuccess?.(textToCopy);\n          return true;\n        } catch (error) {\n          const err = error as Error;\n          setStatus('failed');\n          setInternalOpen(true);\n          onCopyError?.(err);\n          console.error('Failed to copy text to clipboard:', err);\n          return false;\n        }\n      },\n      [onCopySuccess, onCopyError],\n    );\n\n    const handleTriggerClick = useCallback(\n      (event: React.MouseEvent) => {\n        event.preventDefault();\n        if (text) {\n          copyToClipboard(text);\n        }\n      },\n      [text, copyToClipboard],\n    );\n\n    // Reset status after specified delay\n    useEffect(() => {\n      if (status === 'copied' || status === 'failed') {\n        const timeout = setTimeout(() => {\n          setStatus('idle');\n          setInternalOpen(false);\n        }, resetDelay);\n\n        return () => clearTimeout(timeout);\n      }\n    }, [status, resetDelay]);\n\n    return (\n      <TooltipProvider\n        delayDuration={delayDuration}\n        skipDelayDuration={skipDelayDuration}\n        disableHoverableContent={disableHoverableContent}\n      >\n        <Tooltip\n          open={open}\n          onOpenChange={handleOpenChange}\n          defaultOpen={false}\n          delayDuration={delayDuration}\n          disableHoverableContent={disableHoverableContent}\n        >\n          {trigger && (\n            <TooltipTrigger\n              asChild={triggerAsChild}\n              className={cn('cursor-pointer', triggerClassName)}\n              onClick={handleTriggerClick}\n            >\n              {trigger}\n            </TooltipTrigger>\n          )}\n          {children && (\n            <TooltipTrigger\n              asChild={triggerAsChild}\n              className={cn('cursor-pointer', triggerClassName)}\n              onClick={handleTriggerClick}\n            >\n              {children}\n            </TooltipTrigger>\n          )}\n          <TooltipContent\n            ref={ref}\n            showArrow={showArrow}\n            className={cn('flex flex-col px-3 py-1', className, contentClassName)}\n            {...props}\n          >\n            <div className={cn(childrenClassName)}>{responseContent}</div>\n            {showArrow && (\n              <TooltipArrow className={cn('fill-foreground !h-[5px] !w-[8px]', arrowClassName)} />\n            )}\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    );\n  },\n);\n\nCopyTooltip.displayName = 'CopyTooltip';\n\nexport { CopyTooltip };\nexport default CopyTooltip;\n"]}