shad-m 1.0.2 → 1.0.3

package/dist/common/interactive/select/select-item.mjs

@@ -0,0 +1,191 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cn } from '@/lib/utils';
+import { Check } from 'lucide-react';
+import * as React from 'react';
+import { Checkbox } from '../../../components/checkbox';
+import { useCallbackRef } from '../../../lib/helpers';
+import { ListItem } from '../list';
+import { Pressable } from '../pressable';
+import { SelectTrackingContext, useSelectContext } from './context';
+import { SelectClose } from './select-close';
+import { useUISystemContext } from '@/providers/UISystemProvider';
+import { TRACKING_TYPE } from '@/lib/types';
+
+const SelectItemBase = React.forwardRef(
+  ({
+    className,
+    children,
+    disabled,
+    multiple = false,
+    isChecked = false,
+    closeAfterClick: closeAfterClickProps,
+    rightIcon: rightIconProp,
+    option,
+    group,
+    ...props
+  }, ref) => {
+    const closeAfterClick = closeAfterClickProps ?? !multiple;
+    const ListItemWrapper = closeAfterClick ? SelectClose : React.Fragment;
+    const listItemWrapperProps = closeAfterClick ? { asChild: true } : {};
+    const showIconChecked = isChecked && !multiple;
+    const rightIcon = rightIconProp || (showIconChecked ? /* @__PURE__ */ jsx(Check, { color: "#094bf4", className: "h-4 w-4" }) : null);
+    const {
+      blockSendTracking,
+      keyForValue,
+      keyForName,
+      keyForGroupName,
+      trackingData: trackingDataContext,
+      trackingIndex,
+      trackingName,
+      sendIfUnCheck
+    } = React.useContext(SelectTrackingContext);
+    const trackingData = {
+      ...trackingDataContext ?? {},
+      status: multiple ? !isChecked ? "checked" : "unchecked" : void 0,
+      [keyForValue ?? "value"]: option?.value,
+      [keyForName ?? "name"]: option?.name,
+      ...keyForGroupName && { [keyForGroupName ?? "groupName"]: group?.name }
+    };
+    const blockTracking = !sendIfUnCheck && isChecked;
+    return /* @__PURE__ */ jsx(ListItemWrapper, { ...listItemWrapperProps, children: /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        trackingData,
+        trackingIndex,
+        trackingName,
+        blockSendTracking: blockSendTracking || blockTracking,
+        className: "rounded",
+        children: /* @__PURE__ */ jsxs(
+          ListItem,
+          {
+            ref,
+            activated: isChecked,
+            className: cn(
+              "cursor-pointer space-x-3",
+              {
+                "cursor-not-allowed": disabled,
+                "justify-between": isChecked && !multiple
+              },
+              className
+            ),
+            size: "normal",
+            disabled,
+            ...props,
+            children: [
+              multiple && /* @__PURE__ */ jsx(Checkbox, { checked: isChecked }),
+              /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children }),
+              rightIcon
+            ]
+          }
+        )
+      }
+    ) });
+  }
+);
+SelectItemBase.displayName = "SelectItemBase";
+const SelectItem = React.forwardRef(
+  ({ option, onClick, multiple, group, ...props }, ref) => {
+    const { value, setValue, groupValue, setGroupValue } = useSelectContext();
+    const { sendTrack } = useUISystemContext();
+    const {
+      trackingSelectName,
+      trackingData: trackingDataContext,
+      trackingIndex: trackingIndexContext,
+      blockSendTracking,
+      keyForValue,
+      keyForName
+    } = React.useContext(SelectTrackingContext);
+    const isChecked = React.useMemo(() => {
+      if (!value || !option) return false;
+      return value.some((item) => item?.value === option?.value);
+    }, [value, option]);
+    const _onClick = (e) => {
+      if (props?.disabled) {
+        return;
+      }
+      const sendSelectTracking = (selectedOption, isSelecting) => {
+        if (trackingSelectName && sendTrack && !blockSendTracking) {
+          const selectTrackingData = {
+            ...trackingDataContext || {},
+            status: isSelecting ? "selected" : "unselected",
+            [keyForValue || "value"]: selectedOption?.value,
+            [keyForName || "name"]: selectedOption?.name,
+            ...trackingIndexContext !== void 0 && { index: trackingIndexContext }
+          };
+          sendTrack(trackingSelectName, TRACKING_TYPE.click, selectTrackingData);
+        }
+      };
+      if (!multiple) {
+        if (isChecked) {
+          setValue?.([option]);
+        } else {
+          setValue?.([option]);
+          sendSelectTracking(option, true);
+        }
+      } else {
+        if (isChecked) {
+          const nextValue = value?.filter((item) => item.value !== option.value);
+          sendSelectTracking(option, false);
+          if (!nextValue?.map((nextVal) => nextVal?.groupName)?.includes(group?.name)) {
+            setGroupValue?.((prev) => ({
+              group: prev?.group?.filter((item) => item?.name !== group?.name),
+              child: value?.filter((item) => item?.value !== option?.value)?.map((item) => ({ ...item, parentValue: group?.value }))
+            }));
+          } else {
+            setGroupValue?.((prev) => ({
+              group: prev?.group,
+              child: value?.filter((item) => item?.value !== option?.value)?.map((item) => ({ ...item, parentValue: group?.value }))
+            }));
+          }
+          setValue?.((value2) => (value2 || []).filter((item) => item.value !== option.value));
+        } else {
+          if (!groupValue?.group?.map((groupVal) => groupVal?.value)?.includes(group?.value)) {
+            setGroupValue?.((prev = { group: [], child: [] }) => {
+              const resultGroup = [...prev?.group || []];
+              const resultChild = [...prev?.child || []];
+              if (!resultGroup?.includes(group)) {
+                resultGroup?.push(group);
+              }
+              return {
+                group: resultGroup,
+                child: [...resultChild, { ...option, parentValue: group?.value }]
+              };
+            });
+          } else {
+            setGroupValue?.((prev = { group: [], child: [] }) => {
+              const resultGroup = [...prev?.group || []];
+              const resultChild = [...prev?.child || []];
+              return {
+                group: resultGroup,
+                child: [...resultChild, { ...option, parentValue: group?.value }]
+              };
+            });
+          }
+          setValue?.((value2 = []) => [...value2, option]);
+          sendSelectTracking(option, true);
+        }
+      }
+      onClick?.(e);
+    };
+    const onClickFn = useCallbackRef(_onClick);
+    return /* @__PURE__ */ jsx(
+      SelectItemBase,
+      {
+        option,
+        ref,
+        group,
+        "data-select-item-value": option.value,
+        "data-select-item-name": option.name,
+        onClick: onClickFn,
+        multiple,
+        isChecked,
+        ...props
+      }
+    );
+  }
+);
+SelectItem.displayName = "SelectItem";
+
+export { SelectItem, SelectItemBase };
+//# sourceMappingURL=select-item.mjs.map
+//# sourceMappingURL=select-item.mjs.map

package/dist/common/interactive/select/select-item.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/select/select-item.tsx"],"names":["value"],"mappings":"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","file":"select-item.mjs","sourcesContent":["import { cn } from '@/lib/utils';\nimport { Check } from 'lucide-react';\nimport * as React from 'react';\nimport { Checkbox } from '../../../components/checkbox';\nimport { useCallbackRef } from '../../../lib/helpers';\nimport { ListItem, ListItemValueText } from '../list';\nimport { Pressable } from '../pressable';\nimport { useSelectContext, SelectTrackingContext } from './context';\nimport { SelectClose } from './select-close';\nimport { Option, OptionGroup, SelectItemBaseProps, SelectItemProps } from './types';\nimport { useUISystemContext } from '@/providers/UISystemProvider';\nimport { TRACKING_TYPE } from '@/lib/types';\n\nconst SelectItemBase = React.forwardRef<React.ElementRef<typeof ListItem>, SelectItemBaseProps>(\n  (\n    {\n      className,\n      children,\n      disabled,\n      multiple = false,\n      isChecked = false,\n      closeAfterClick: closeAfterClickProps,\n      rightIcon: rightIconProp,\n      option,\n      group,\n      ...props\n    },\n    ref,\n  ) => {\n    const closeAfterClick = closeAfterClickProps ?? !multiple;\n    const ListItemWrapper = closeAfterClick ? SelectClose : React.Fragment;\n    const listItemWrapperProps = closeAfterClick ? { asChild: true } : {};\n    const showIconChecked = isChecked && !multiple;\n    const rightIcon =\n      rightIconProp || (showIconChecked ? <Check color=\"#094bf4\" className=\"h-4 w-4\" /> : null);\n    const {\n      blockSendTracking,\n      keyForValue,\n      keyForName,\n      keyForGroupName,\n      trackingData: trackingDataContext,\n      trackingIndex,\n      trackingName,\n      sendIfUnCheck,\n    } = React.useContext(SelectTrackingContext);\n    const trackingData = {\n      ...(trackingDataContext ?? {}),\n      status: multiple ? (!isChecked ? 'checked' : 'unchecked') : undefined,\n      [keyForValue ?? 'value']: option?.value,\n      [keyForName ?? 'name']: option?.name,\n      ...(keyForGroupName && { [keyForGroupName ?? 'groupName']: group?.name }),\n    };\n    // Chú ý: giá trị isChecked là giá trị trước đó\n    // Nên nếu isChecked = false và nó được click => thì trạng thái tiếp theo là checked\n    const blockTracking = !sendIfUnCheck && isChecked;\n\n    return (\n      <ListItemWrapper {...listItemWrapperProps}>\n        <Pressable\n          trackingData={trackingData}\n          trackingIndex={trackingIndex}\n          trackingName={trackingName}\n          blockSendTracking={blockSendTracking || blockTracking}\n          className=\"rounded\"\n        >\n          <ListItem\n            ref={ref}\n            activated={isChecked}\n            className={cn(\n              'cursor-pointer space-x-3',\n              {\n                'cursor-not-allowed': disabled,\n                'justify-between': isChecked && !multiple,\n              },\n              className,\n            )}\n            size=\"normal\"\n            disabled={disabled}\n            {...props}\n          >\n            {multiple && <Checkbox checked={isChecked} />}\n            <div className=\"min-w-0 flex-1\">{children}</div>\n            {rightIcon}\n          </ListItem>\n        </Pressable>\n      </ListItemWrapper>\n    );\n  },\n);\n\nSelectItemBase.displayName = 'SelectItemBase';\n\nconst SelectItem = React.forwardRef<React.ElementRef<typeof ListItem>, SelectItemProps>(\n  ({ option, onClick, multiple, group, ...props }, ref) => {\n    const { value, setValue, groupValue, setGroupValue } = useSelectContext();\n    const { sendTrack } = useUISystemContext();\n    const {\n      trackingSelectName,\n      trackingData: trackingDataContext,\n      trackingIndex: trackingIndexContext,\n      blockSendTracking,\n      keyForValue,\n      keyForName,\n    } = React.useContext(SelectTrackingContext);\n\n    // More robust isChecked calculation\n    const isChecked = React.useMemo(() => {\n      if (!value || !option) return false;\n      return value.some((item) => item?.value === option?.value);\n    }, [value, option]);\n\n    const _onClick: React.MouseEventHandler<HTMLDivElement> = (e) => {\n      if (props?.disabled) {\n        return;\n      }\n\n      // Send select tracking for newly selected items\n      const sendSelectTracking = (selectedOption: Option, isSelecting: boolean) => {\n        if (trackingSelectName && sendTrack && !blockSendTracking) {\n          const selectTrackingData = {\n            ...(trackingDataContext || {}),\n            status: isSelecting ? 'selected' : 'unselected',\n            [keyForValue || 'value']: selectedOption?.value,\n            [keyForName || 'name']: selectedOption?.name,\n            ...(trackingIndexContext !== undefined && { index: trackingIndexContext }),\n          };\n          sendTrack(trackingSelectName, TRACKING_TYPE.click, selectTrackingData);\n        }\n      };\n\n      // Handle single select\n      if (!multiple) {\n        if (isChecked) {\n          // For single select, clicking the same option should keep it selected\n          // Don't clear the value - user can use the remove icon if they want to clear\n          setValue?.([option]);\n        } else {\n          setValue?.([option]);\n          // Send tracking for newly selected item\n          sendSelectTracking(option, true);\n        }\n      } else {\n        // Handle in multi select\n        if (isChecked) {\n          // User is UNCHECKING the item in multiple select\n          const nextValue = value?.filter((item) => item.value !== option.value);\n\n          // Send unselected tracking\n          sendSelectTracking(option, false);\n\n          if (!nextValue?.map((nextVal) => (nextVal as any)?.groupName)?.includes(group?.name)) {\n            setGroupValue?.((prev) => ({\n              group: prev?.group?.filter((item) => item?.name !== group?.name),\n              child: value\n                ?.filter((item) => item?.value !== option?.value)\n                ?.map((item) => ({ ...item, parentValue: group?.value })),\n            }));\n          } else {\n            setGroupValue?.((prev) => ({\n              group: prev?.group,\n              child: value\n                ?.filter((item) => item?.value !== option?.value)\n                ?.map((item) => ({ ...item, parentValue: group?.value })),\n            }));\n          }\n          setValue?.((value) => (value || []).filter((item) => item.value !== option.value));\n        } else {\n          if (\n            !groupValue?.group?.map((groupVal) => groupVal?.value)?.includes(group?.value as string)\n          ) {\n            setGroupValue?.((prev = { group: [], child: [] }) => {\n              const resultGroup = [...(prev?.group || [])];\n              const resultChild = [...(prev?.child || [])];\n              if (!resultGroup?.includes(group as OptionGroup<Option>)) {\n                resultGroup?.push(group as OptionGroup<Option>);\n              }\n              return {\n                group: resultGroup,\n                child: [...resultChild, { ...option, parentValue: group?.value }],\n              };\n            });\n          } else {\n            setGroupValue?.((prev = { group: [], child: [] }) => {\n              const resultGroup = [...(prev?.group || [])];\n              const resultChild = [...(prev?.child || [])];\n              return {\n                group: resultGroup,\n                child: [...resultChild, { ...option, parentValue: group?.value }],\n              };\n            });\n          }\n          setValue?.((value = []) => [...value, option]);\n          // Send tracking for newly selected item in multi-select\n          sendSelectTracking(option, true);\n        }\n      }\n      onClick?.(e);\n    };\n    const onClickFn = useCallbackRef(_onClick);\n    return (\n      <SelectItemBase\n        option={option}\n        ref={ref}\n        group={group}\n        data-select-item-value={option.value}\n        data-select-item-name={option.name}\n        onClick={onClickFn}\n        multiple={multiple}\n        isChecked={isChecked}\n        {...props}\n      />\n    );\n  },\n);\n\nSelectItem.displayName = 'SelectItem';\n\nexport { SelectItemBase, SelectItem };\n"]}

package/dist/common/interactive/select/select-layout.js

@@ -0,0 +1,66 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var utils = require('@/lib/utils');
+var React = require('react');
+var separator = require('../../../components/separator');
+var list = require('../list');
+
+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);
+
+const SelectSeparator = React__namespace.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(separator.Separator, { ref, className: utils.cn("my-3", className), ...props });
+});
+SelectSeparator.displayName = "SelectSeparator";
+const SelectList = React__namespace.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(list.List, { ...props, ref });
+});
+SelectList.displayName = "SelectList";
+const SelectGroupTitle = React__namespace.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: utils.cn("px-3 text-lg font-medium leading-[26px]", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+SelectGroupTitle.displayName = "SelectGroupTitle";
+const SelectGroup = React__namespace.forwardRef(
+  ({ title, children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", ref, className: utils.cn(className), ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SelectGroupTitle, { children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx(SelectList, { className: "pt-2", children })
+    ] });
+  }
+);
+SelectGroup.displayName = "SelectGroup";
+
+exports.SelectGroup = SelectGroup;
+exports.SelectGroupTitle = SelectGroupTitle;
+exports.SelectList = SelectList;
+exports.SelectSeparator = SelectSeparator;
+//# sourceMappingURL=select-layout.js.map
+//# sourceMappingURL=select-layout.js.map

package/dist/common/interactive/select/select-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/select/select-layout.tsx"],"names":["React","jsx","Separator","cn","List","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,eAAA,GAAkBA,iBAAM,UAAA,CAG5B,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAClC,EAAA,uBAAOC,cAAA,CAACC,uBAAU,GAAA,EAAU,SAAA,EAAWC,SAAG,MAAA,EAAQ,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAC3E,CAAC;AAED,eAAA,CAAgB,WAAA,GAAc,iBAAA;AAE9B,MAAM,UAAA,GAAaH,gBAAA,CAAM,UAAA,CAGvB,CAAC,OAAO,GAAA,KAAQ;AAChB,EAAA,uBAAOC,cAAA,CAACG,SAAA,EAAA,EAAM,GAAG,KAAA,EAAO,GAAA,EAAU,CAAA;AACpC,CAAC;AAED,UAAA,CAAW,WAAA,GAAc,YAAA;AAEzB,MAAM,mBAAmBJ,gBAAA,CAAM,UAAA;AAAA,EAC7B,CAAC,EAAE,SAAA,EAAW,UAAU,GAAG,KAAA,IAAS,GAAA,KAAQ;AAC1C,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAWE,QAAA,CAAG,yCAAA,EAA2C,SAAS,CAAA;AAAA,QACjE,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,gBAAA,CAAiB,WAAA,GAAc,kBAAA;AAE/B,MAAM,cAAcH,gBAAA,CAAM,UAAA;AAAA,EACxB,CAAC,EAAE,KAAA,EAAO,QAAA,EAAU,WAAW,GAAG,KAAA,IAAS,GAAA,KAAQ;AACjD,IAAA,uBACEK,eAAA,CAAC,KAAA,EAAA,EAAI,IAAA,EAAK,OAAA,EAAQ,GAAA,EAAU,WAAWF,QAAA,CAAG,SAAS,CAAA,EAAI,GAAG,KAAA,EACxD,QAAA,EAAA;AAAA,sBAAAF,cAAA,CAAC,oBAAkB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,sBACzBA,cAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAU,MAAA,EAAQ,QAAA,EAAS;AAAA,KAAA,EACzC,CAAA;AAAA,EAEJ;AACF;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"select-layout.js","sourcesContent":["import { cn } from '@/lib/utils';\nimport * as React from 'react';\nimport { Separator } from '../../../components/separator';\nimport { List } from '../list';\nimport { SelectGroupProps } from './types';\n\nconst SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof Separator>,\n  React.ComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => {\n  return <Separator ref={ref} className={cn('my-3', className)} {...props} />;\n});\n\nSelectSeparator.displayName = 'SelectSeparator';\n\nconst SelectList = React.forwardRef<\n  React.ElementRef<typeof List>,\n  React.ComponentPropsWithoutRef<typeof List>\n>((props, ref) => {\n  return <List {...props} ref={ref} />;\n});\n\nSelectList.displayName = 'SelectList';\n\nconst SelectGroupTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn('px-3 text-lg font-medium leading-[26px]', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nSelectGroupTitle.displayName = 'SelectGroupTitle';\n\nconst SelectGroup = React.forwardRef<HTMLDivElement, SelectGroupProps>(\n  ({ title, children, className, ...props }, ref) => {\n    return (\n      <div role=\"group\" ref={ref} className={cn(className)} {...props}>\n        <SelectGroupTitle>{title}</SelectGroupTitle>\n        <SelectList className=\"pt-2\">{children}</SelectList>\n      </div>\n    );\n  },\n);\n\nSelectGroup.displayName = 'SelectGroup';\n\nexport { SelectSeparator, SelectList, SelectGroupTitle, SelectGroup };\n"]}

package/dist/common/interactive/select/select-layout.mjs

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cn } from '@/lib/utils';
+import * as React from 'react';
+import { Separator } from '../../../components/separator';
+import { List } from '../list';
+
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(Separator, { ref, className: cn("my-3", className), ...props });
+});
+SelectSeparator.displayName = "SelectSeparator";
+const SelectList = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(List, { ...props, ref });
+});
+SelectList.displayName = "SelectList";
+const SelectGroupTitle = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("px-3 text-lg font-medium leading-[26px]", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+SelectGroupTitle.displayName = "SelectGroupTitle";
+const SelectGroup = React.forwardRef(
+  ({ title, children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { role: "group", ref, className: cn(className), ...props, children: [
+      /* @__PURE__ */ jsx(SelectGroupTitle, { children: title }),
+      /* @__PURE__ */ jsx(SelectList, { className: "pt-2", children })
+    ] });
+  }
+);
+SelectGroup.displayName = "SelectGroup";
+
+export { SelectGroup, SelectGroupTitle, SelectList, SelectSeparator };
+//# sourceMappingURL=select-layout.mjs.map
+//# sourceMappingURL=select-layout.mjs.map

package/dist/common/interactive/select/select-layout.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/select/select-layout.tsx"],"names":[],"mappings":";;;;;;AAMA,MAAM,eAAA,GAAkB,MAAM,UAAA,CAG5B,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAClC,EAAA,uBAAO,GAAA,CAAC,aAAU,GAAA,EAAU,SAAA,EAAW,GAAG,MAAA,EAAQ,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAC3E,CAAC;AAED,eAAA,CAAgB,WAAA,GAAc,iBAAA;AAE9B,MAAM,UAAA,GAAa,KAAA,CAAM,UAAA,CAGvB,CAAC,OAAO,GAAA,KAAQ;AAChB,EAAA,uBAAO,GAAA,CAAC,IAAA,EAAA,EAAM,GAAG,KAAA,EAAO,GAAA,EAAU,CAAA;AACpC,CAAC;AAED,UAAA,CAAW,WAAA,GAAc,YAAA;AAEzB,MAAM,mBAAmB,KAAA,CAAM,UAAA;AAAA,EAC7B,CAAC,EAAE,SAAA,EAAW,UAAU,GAAG,KAAA,IAAS,GAAA,KAAQ;AAC1C,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA,CAAG,yCAAA,EAA2C,SAAS,CAAA;AAAA,QACjE,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,gBAAA,CAAiB,WAAA,GAAc,kBAAA;AAE/B,MAAM,cAAc,KAAA,CAAM,UAAA;AAAA,EACxB,CAAC,EAAE,KAAA,EAAO,QAAA,EAAU,WAAW,GAAG,KAAA,IAAS,GAAA,KAAQ;AACjD,IAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,IAAA,EAAK,OAAA,EAAQ,GAAA,EAAU,WAAW,EAAA,CAAG,SAAS,CAAA,EAAI,GAAG,KAAA,EACxD,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,oBAAkB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,sBACzB,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAU,MAAA,EAAQ,QAAA,EAAS;AAAA,KAAA,EACzC,CAAA;AAAA,EAEJ;AACF;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"select-layout.mjs","sourcesContent":["import { cn } from '@/lib/utils';\nimport * as React from 'react';\nimport { Separator } from '../../../components/separator';\nimport { List } from '../list';\nimport { SelectGroupProps } from './types';\n\nconst SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof Separator>,\n  React.ComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => {\n  return <Separator ref={ref} className={cn('my-3', className)} {...props} />;\n});\n\nSelectSeparator.displayName = 'SelectSeparator';\n\nconst SelectList = React.forwardRef<\n  React.ElementRef<typeof List>,\n  React.ComponentPropsWithoutRef<typeof List>\n>((props, ref) => {\n  return <List {...props} ref={ref} />;\n});\n\nSelectList.displayName = 'SelectList';\n\nconst SelectGroupTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn('px-3 text-lg font-medium leading-[26px]', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nSelectGroupTitle.displayName = 'SelectGroupTitle';\n\nconst SelectGroup = React.forwardRef<HTMLDivElement, SelectGroupProps>(\n  ({ title, children, className, ...props }, ref) => {\n    return (\n      <div role=\"group\" ref={ref} className={cn(className)} {...props}>\n        <SelectGroupTitle>{title}</SelectGroupTitle>\n        <SelectList className=\"pt-2\">{children}</SelectList>\n      </div>\n    );\n  },\n);\n\nSelectGroup.displayName = 'SelectGroup';\n\nexport { SelectSeparator, SelectList, SelectGroupTitle, SelectGroup };\n"]}

package/dist/common/interactive/select/select-search.js

@@ -0,0 +1,55 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var React = require('react');
+var input = require('../../../components/input');
+
+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);
+
+const SelectSearch = React__namespace.forwardRef(
+  ({ autoFocus = true, ...props }, ref) => {
+    const inputRef = React__namespace.useRef(null);
+    React__namespace.useImperativeHandle(ref, () => inputRef.current);
+    React__namespace.useEffect(() => {
+      if (autoFocus && inputRef.current) {
+        const timeoutId = setTimeout(() => {
+          inputRef.current?.focus();
+        }, 100);
+        return () => clearTimeout(timeoutId);
+      }
+    }, [autoFocus]);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1 pt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+      input.Input,
+      {
+        ref: inputRef,
+        size: "default",
+        buttonIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { color: "#bbbbbb", className: "h-4 w-4" }),
+        ...props
+      }
+    ) });
+  }
+);
+SelectSearch.displayName = "SelectSearch";
+
+exports.SelectSearch = SelectSearch;
+//# sourceMappingURL=select-search.js.map
+//# sourceMappingURL=select-search.js.map

package/dist/common/interactive/select/select-search.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/select/select-search.tsx"],"names":["React","jsx","Input","Search"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,eAAeA,gBAAA,CAAM,UAAA;AAAA,EACzB,CAAC,EAAE,SAAA,GAAY,MAAM,GAAG,KAAA,IAAS,GAAA,KAAQ;AACvC,IAAA,MAAM,QAAA,GAAWA,gBAAA,CAAM,MAAA,CAAyB,IAAI,CAAA;AAEpD,IAAAA,gBAAA,CAAM,mBAAA,CAAoB,GAAA,EAAK,MAAM,QAAA,CAAS,OAA2B,CAAA;AAEzE,IAAAA,gBAAA,CAAM,UAAU,MAAM;AACpB,MAAA,IAAI,SAAA,IAAa,SAAS,OAAA,EAAS;AAEjC,QAAA,MAAM,SAAA,GAAY,WAAW,MAAM;AACjC,UAAA,QAAA,CAAS,SAAS,KAAA,EAAM;AAAA,QAC1B,GAAG,GAAG,CAAA;AAEN,QAAA,OAAO,MAAM,aAAa,SAAS,CAAA;AAAA,MACrC;AAAA,IACF,CAAA,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,IAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACb,QAAA,kBAAAA,cAAA;AAAA,MAACC,WAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,QAAA;AAAA,QACL,IAAA,EAAK,SAAA;AAAA,QACL,4BAAYD,cAAA,CAACE,kBAAA,EAAA,EAAO,KAAA,EAAM,SAAA,EAAU,WAAU,SAAA,EAAU,CAAA;AAAA,QACvD,GAAG;AAAA;AAAA,KACN,EACF,CAAA;AAAA,EAEJ;AACF;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA","file":"select-search.js","sourcesContent":["import { Search } from 'lucide-react';\nimport * as React from 'react';\nimport { Input } from '../../../components/input';\n\ninterface SelectSearchProps extends React.ComponentPropsWithoutRef<typeof Input> {\n  autoFocus?: boolean;\n}\n\nconst SelectSearch = React.forwardRef<React.ElementRef<typeof Input>, SelectSearchProps>(\n  ({ autoFocus = true, ...props }, ref) => {\n    const inputRef = React.useRef<HTMLInputElement>(null);\n\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\n\n    React.useEffect(() => {\n      if (autoFocus && inputRef.current) {\n        // Use setTimeout to ensure the popover/sheet is fully rendered\n        const timeoutId = setTimeout(() => {\n          inputRef.current?.focus();\n        }, 100);\n\n        return () => clearTimeout(timeoutId);\n      }\n    }, [autoFocus]);\n\n    return (\n      <div className=\"px-2 py-1 pt-2\">\n        <Input\n          ref={inputRef}\n          size=\"default\"\n          buttonIcon={<Search color=\"#bbbbbb\" className=\"h-4 w-4\" />}\n          {...props}\n        />\n      </div>\n    );\n  },\n);\n\nSelectSearch.displayName = 'SelectSearch';\n\nexport { SelectSearch };\n"]}

package/dist/common/interactive/select/select-search.mjs

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import { Search } from 'lucide-react';
+import * as React from 'react';
+import { Input } from '../../../components/input';
+
+const SelectSearch = React.forwardRef(
+  ({ autoFocus = true, ...props }, ref) => {
+    const inputRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => inputRef.current);
+    React.useEffect(() => {
+      if (autoFocus && inputRef.current) {
+        const timeoutId = setTimeout(() => {
+          inputRef.current?.focus();
+        }, 100);
+        return () => clearTimeout(timeoutId);
+      }
+    }, [autoFocus]);
+    return /* @__PURE__ */ jsx("div", { className: "px-2 py-1 pt-2", children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref: inputRef,
+        size: "default",
+        buttonIcon: /* @__PURE__ */ jsx(Search, { color: "#bbbbbb", className: "h-4 w-4" }),
+        ...props
+      }
+    ) });
+  }
+);
+SelectSearch.displayName = "SelectSearch";
+
+export { SelectSearch };
+//# sourceMappingURL=select-search.mjs.map
+//# sourceMappingURL=select-search.mjs.map

package/dist/common/interactive/select/select-search.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/select/select-search.tsx"],"names":[],"mappings":";;;;;AAQA,MAAM,eAAe,KAAA,CAAM,UAAA;AAAA,EACzB,CAAC,EAAE,SAAA,GAAY,MAAM,GAAG,KAAA,IAAS,GAAA,KAAQ;AACvC,IAAA,MAAM,QAAA,GAAW,KAAA,CAAM,MAAA,CAAyB,IAAI,CAAA;AAEpD,IAAA,KAAA,CAAM,mBAAA,CAAoB,GAAA,EAAK,MAAM,QAAA,CAAS,OAA2B,CAAA;AAEzE,IAAA,KAAA,CAAM,UAAU,MAAM;AACpB,MAAA,IAAI,SAAA,IAAa,SAAS,OAAA,EAAS;AAEjC,QAAA,MAAM,SAAA,GAAY,WAAW,MAAM;AACjC,UAAA,QAAA,CAAS,SAAS,KAAA,EAAM;AAAA,QAC1B,GAAG,GAAG,CAAA;AAEN,QAAA,OAAO,MAAM,aAAa,SAAS,CAAA;AAAA,MACrC;AAAA,IACF,CAAA,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACb,QAAA,kBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,QAAA;AAAA,QACL,IAAA,EAAK,SAAA;AAAA,QACL,4BAAY,GAAA,CAAC,MAAA,EAAA,EAAO,KAAA,EAAM,SAAA,EAAU,WAAU,SAAA,EAAU,CAAA;AAAA,QACvD,GAAG;AAAA;AAAA,KACN,EACF,CAAA;AAAA,EAEJ;AACF;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA","file":"select-search.mjs","sourcesContent":["import { Search } from 'lucide-react';\nimport * as React from 'react';\nimport { Input } from '../../../components/input';\n\ninterface SelectSearchProps extends React.ComponentPropsWithoutRef<typeof Input> {\n  autoFocus?: boolean;\n}\n\nconst SelectSearch = React.forwardRef<React.ElementRef<typeof Input>, SelectSearchProps>(\n  ({ autoFocus = true, ...props }, ref) => {\n    const inputRef = React.useRef<HTMLInputElement>(null);\n\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\n\n    React.useEffect(() => {\n      if (autoFocus && inputRef.current) {\n        // Use setTimeout to ensure the popover/sheet is fully rendered\n        const timeoutId = setTimeout(() => {\n          inputRef.current?.focus();\n        }, 100);\n\n        return () => clearTimeout(timeoutId);\n      }\n    }, [autoFocus]);\n\n    return (\n      <div className=\"px-2 py-1 pt-2\">\n        <Input\n          ref={inputRef}\n          size=\"default\"\n          buttonIcon={<Search color=\"#bbbbbb\" className=\"h-4 w-4\" />}\n          {...props}\n        />\n      </div>\n    );\n  },\n);\n\nSelectSearch.displayName = 'SelectSearch';\n\nexport { SelectSearch };\n"]}

package/dist/common/interactive/select/select-states.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Image = require('@/assets/Image');
+var utils = require('@/lib/utils');
+var React = require('react');
+var skeleton = require('../../../components/skeleton');
+
+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);
+
+const SelectEmptyState = React__namespace.forwardRef(
+  ({ className, emptyText = "Kh\xF4ng c\xF3 k\u1EBFt qu\u1EA3 t\xECm ki\u1EBFm", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: utils.cn(
+          "flex h-full min-h-[204px] w-full flex-col items-center justify-center space-y-3",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Image.EmptyNothingOtherImage192, { className: "h-[80px] w-[80px]" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground text-base", children: emptyText })
+        ]
+      }
+    );
+  }
+);
+SelectEmptyState.displayName = "SelectEmptyState";
+const SelectLoading = React__namespace.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn("w-full space-y-2 px-3 py-2", className), ...props, children: new Array(6).fill(1).map((_item, index) => /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-8 w-full" }, index)) });
+});
+SelectLoading.displayName = "SelectLoading";
+
+exports.SelectEmptyState = SelectEmptyState;
+exports.SelectLoading = SelectLoading;
+//# sourceMappingURL=select-states.js.map
+//# sourceMappingURL=select-states.js.map

package/dist/common/interactive/select/select-states.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/select/select-states.tsx"],"names":["React","jsxs","cn","jsx","EmptyNothingOtherImage192","Skeleton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,mBAAmBA,gBAAA,CAAM,UAAA;AAAA,EAC7B,CAAC,EAAE,SAAA,EAAW,SAAA,GAAY,qDAA6B,GAAG,KAAA,IAAS,GAAA,KAAQ;AACzE,IAAA,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAWC,QAAA;AAAA,UACT,iFAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAAC,cAAA,CAACC,+BAAA,EAAA,EAA0B,WAAU,mBAAA,EAAoB,CAAA;AAAA,0BACzDD,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iCAAA,EAAmC,QAAA,EAAA,SAAA,EAAU;AAAA;AAAA;AAAA,KAC9D;AAAA,EAEJ;AACF;AAEA,gBAAA,CAAiB,WAAA,GAAc,kBAAA;AAE/B,MAAM,aAAA,GAAgBH,iBAAM,UAAA,CAG1B,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAClC,EAAA,uBACEG,cAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,SAAA,EAAWD,QAAA,CAAG,4BAAA,EAA8B,SAAS,CAAA,EAAI,GAAG,KAAA,EACxE,QAAA,EAAA,IAAI,KAAA,CAAM,CAAC,CAAA,CAAE,IAAA,CAAK,CAAC,CAAA,CAAE,GAAA,CAAI,CAAC,KAAA,EAAO,KAAA,qBAChCC,cAAA,CAACE,iBAAA,EAAA,EAAS,SAAA,EAAU,YAAA,EAAA,EAAkB,KAAO,CAC9C,CAAA,EACH,CAAA;AAEJ,CAAC;AAED,aAAA,CAAc,WAAA,GAAc,eAAA","file":"select-states.js","sourcesContent":["import { EmptyNothingOtherImage192 } from '@/assets/Image';\nimport { cn } from '@/lib/utils';\nimport * as React from 'react';\nimport { Skeleton } from '../../../components/skeleton';\nimport { SelectEmptyStateProps } from './types';\nimport { SelectList } from './select-layout';\n\nconst SelectEmptyState = React.forwardRef<HTMLDivElement, SelectEmptyStateProps>(\n  ({ className, emptyText = 'Không có kết quả tìm kiếm', ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex h-full min-h-[204px] w-full flex-col items-center justify-center space-y-3',\n          className,\n        )}\n        {...props}\n      >\n        <EmptyNothingOtherImage192 className=\"h-[80px] w-[80px]\" />\n        <div className=\"text-muted-foreground text-base\">{emptyText}</div>\n      </div>\n    );\n  },\n);\n\nSelectEmptyState.displayName = 'SelectEmptyState';\n\nconst SelectLoading = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<typeof SelectList>\n>(({ className, ...props }, ref) => {\n  return (\n    <div ref={ref} className={cn('w-full space-y-2 px-3 py-2', className)} {...props}>\n      {new Array(6).fill(1).map((_item, index) => (\n        <Skeleton className=\"h-8 w-full\" key={index} />\n      ))}\n    </div>\n  );\n});\n\nSelectLoading.displayName = 'SelectLoading';\n\nexport { SelectEmptyState, SelectLoading };\n"]}

package/dist/common/interactive/select/select-states.mjs

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { EmptyNothingOtherImage192 } from '@/assets/Image';
+import { cn } from '@/lib/utils';
+import * as React from 'react';
+import { Skeleton } from '../../../components/skeleton';
+
+const SelectEmptyState = React.forwardRef(
+  ({ className, emptyText = "Kh\xF4ng c\xF3 k\u1EBFt qu\u1EA3 t\xECm ki\u1EBFm", ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex h-full min-h-[204px] w-full flex-col items-center justify-center space-y-3",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(EmptyNothingOtherImage192, { className: "h-[80px] w-[80px]" }),
+          /* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-base", children: emptyText })
+        ]
+      }
+    );
+  }
+);
+SelectEmptyState.displayName = "SelectEmptyState";
+const SelectLoading = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx("div", { ref, className: cn("w-full space-y-2 px-3 py-2", className), ...props, children: new Array(6).fill(1).map((_item, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }, index)) });
+});
+SelectLoading.displayName = "SelectLoading";
+
+export { SelectEmptyState, SelectLoading };
+//# sourceMappingURL=select-states.mjs.map
+//# sourceMappingURL=select-states.mjs.map

package/dist/common/interactive/select/select-states.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/select/select-states.tsx"],"names":[],"mappings":";;;;;;AAOA,MAAM,mBAAmB,KAAA,CAAM,UAAA;AAAA,EAC7B,CAAC,EAAE,SAAA,EAAW,SAAA,GAAY,qDAA6B,GAAG,KAAA,IAAS,GAAA,KAAQ;AACzE,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,iFAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,yBAAA,EAAA,EAA0B,WAAU,mBAAA,EAAoB,CAAA;AAAA,0BACzD,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iCAAA,EAAmC,QAAA,EAAA,SAAA,EAAU;AAAA;AAAA;AAAA,KAC9D;AAAA,EAEJ;AACF;AAEA,gBAAA,CAAiB,WAAA,GAAc,kBAAA;AAE/B,MAAM,aAAA,GAAgB,MAAM,UAAA,CAG1B,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAClC,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,SAAA,EAAW,EAAA,CAAG,4BAAA,EAA8B,SAAS,CAAA,EAAI,GAAG,KAAA,EACxE,QAAA,EAAA,IAAI,KAAA,CAAM,CAAC,CAAA,CAAE,IAAA,CAAK,CAAC,CAAA,CAAE,GAAA,CAAI,CAAC,KAAA,EAAO,KAAA,qBAChC,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,YAAA,EAAA,EAAkB,KAAO,CAC9C,CAAA,EACH,CAAA;AAEJ,CAAC;AAED,aAAA,CAAc,WAAA,GAAc,eAAA","file":"select-states.mjs","sourcesContent":["import { EmptyNothingOtherImage192 } from '@/assets/Image';\nimport { cn } from '@/lib/utils';\nimport * as React from 'react';\nimport { Skeleton } from '../../../components/skeleton';\nimport { SelectEmptyStateProps } from './types';\nimport { SelectList } from './select-layout';\n\nconst SelectEmptyState = React.forwardRef<HTMLDivElement, SelectEmptyStateProps>(\n  ({ className, emptyText = 'Không có kết quả tìm kiếm', ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex h-full min-h-[204px] w-full flex-col items-center justify-center space-y-3',\n          className,\n        )}\n        {...props}\n      >\n        <EmptyNothingOtherImage192 className=\"h-[80px] w-[80px]\" />\n        <div className=\"text-muted-foreground text-base\">{emptyText}</div>\n      </div>\n    );\n  },\n);\n\nSelectEmptyState.displayName = 'SelectEmptyState';\n\nconst SelectLoading = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<typeof SelectList>\n>(({ className, ...props }, ref) => {\n  return (\n    <div ref={ref} className={cn('w-full space-y-2 px-3 py-2', className)} {...props}>\n      {new Array(6).fill(1).map((_item, index) => (\n        <Skeleton className=\"h-8 w-full\" key={index} />\n      ))}\n    </div>\n  );\n});\n\nSelectLoading.displayName = 'SelectLoading';\n\nexport { SelectEmptyState, SelectLoading };\n"]}