shad-m 1.0.0

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

@@ -0,0 +1,187 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var useDevice = require('@/hooks/useDevice');
+var utils = require('@/lib/utils');
+var lucideReact = require('lucide-react');
+var React = require('react');
+var sheet = require('../../../components/sheet');
+var context = require('./context');
+var selectFooter = require('./select-footer');
+var selectStates = require('./select-states');
+
+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 SelectContent = React__namespace.forwardRef(
+  ({
+    children,
+    searchElm,
+    additionalContent,
+    hasFooter,
+    className,
+    title: titleProp,
+    loading,
+    footerClassName,
+    backIcon,
+    onBack,
+    cancelTracking,
+    applyTracking,
+    closeAfterClear,
+    ...props
+  }, ref) => {
+    const { isDesktop } = useDevice.useDevice();
+    const { label: selectLabel } = context.useSelectContext();
+    const CompHeader = !isDesktop ? sheet.SheetHeader : "div";
+    const CompTitle = !isDesktop ? sheet.SheetTitle : "span";
+    const CompFooter = !isDesktop ? sheet.SheetFooter : "div";
+    const title = React__namespace.useMemo(() => {
+      if (titleProp) return titleProp;
+      if (!isDesktop) return selectLabel || "Ch\u1ECDn m\u1EE5c";
+      return "";
+    }, [selectLabel, titleProp]);
+    const contentElm = isDesktop ? /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: utils.cn(
+          "overflow-y-auto [&>*>*:first-child]:rounded-t [&>*>*:last-child]:rounded-b [&>*>*:only-child]:rounded",
+          className
+        ),
+        ...props,
+        children
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsxs(sheet.SheetContent, { ref, ...props, className: utils.cn("overflow-y-auto", className), side: "bottom", children: [
+      title && /* @__PURE__ */ jsxRuntime.jsx(sheet.SheetHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(sheet.SheetTitle, { className: "text-center", children: title }) }),
+      searchElm,
+      additionalContent,
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto", children }),
+      hasFooter && /* @__PURE__ */ jsxRuntime.jsx(
+        sheet.SheetFooter,
+        {
+          className: utils.cn(
+            "shadow-up-shadow-8 relative !mt-0 w-full border-t p-3 sm:justify-start",
+            footerClassName
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(selectFooter.SelectFooter, { cancelTracking, applyTracking })
+        }
+      )
+    ] });
+    const headerElm = /* @__PURE__ */ jsxRuntime.jsxs(
+      CompHeader,
+      {
+        className: utils.cn(
+          "lg:flex lg:space-x-1 lg:px-2 lg:pb-1 lg:pt-3 lg:text-lg lg:font-medium lg:leading-[26px]",
+          {
+            "lg:hidden": !title
+          }
+        ),
+        children: [
+          backIcon && /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.ChevronLeft,
+            {
+              className: "absolute left-2 cursor-pointer lg:relative lg:left-auto",
+              onClick: onBack
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CompTitle,
+            {
+              className: utils.cn({
+                "lg:hidden": !title
+                // Chỉ ẩn trên desktop khi không có title
+              }),
+              children: title
+            }
+          )
+        ]
+      }
+    );
+    if (loading) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        isDesktop && headerElm,
+        isDesktop && searchElm,
+        isDesktop && additionalContent,
+        isDesktop ? /* @__PURE__ */ jsxRuntime.jsx(selectStates.SelectLoading, {}) : /* @__PURE__ */ jsxRuntime.jsxs(sheet.SheetContent, { side: "bottom", children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx(sheet.SheetHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(sheet.SheetTitle, { className: "text-center", children: title }) }),
+          searchElm,
+          additionalContent,
+          /* @__PURE__ */ jsxRuntime.jsx(selectStates.SelectLoading, {}),
+          hasFooter && /* @__PURE__ */ jsxRuntime.jsx(
+            sheet.SheetFooter,
+            {
+              className: utils.cn(
+                "shadow-up-shadow-8 relative !mt-0 w-full border-t p-3 sm:justify-start",
+                footerClassName
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                selectFooter.SelectFooter,
+                {
+                  cancelTracking,
+                  applyTracking,
+                  closeAfterClear
+                }
+              )
+            }
+          )
+        ] }),
+        hasFooter && isDesktop && /* @__PURE__ */ jsxRuntime.jsx(
+          CompFooter,
+          {
+            className: utils.cn("shadow-up-shadow-8 relative !mt-0 border-t p-3", footerClassName),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              selectFooter.SelectFooter,
+              {
+                cancelTracking,
+                applyTracking,
+                closeAfterClear
+              }
+            )
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      isDesktop && headerElm,
+      isDesktop && searchElm,
+      isDesktop && additionalContent,
+      contentElm,
+      hasFooter && isDesktop && /* @__PURE__ */ jsxRuntime.jsx(
+        CompFooter,
+        {
+          className: utils.cn("shadow-up-shadow-8 relative !mt-0 border-t p-3", footerClassName),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            selectFooter.SelectFooter,
+            {
+              cancelTracking,
+              applyTracking,
+              closeAfterClear
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+SelectContent.displayName = "SelectContent";
+
+exports.SelectContent = SelectContent;
+//# sourceMappingURL=select-content.js.map
+//# sourceMappingURL=select-content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/select/select-content.tsx"],"names":["React","useDevice","useSelectContext","SheetHeader","SheetTitle","SheetFooter","jsx","cn","jsxs","SheetContent","SelectFooter","ChevronLeft","Fragment","SelectLoading"],"mappings":"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","file":"select-content.js","sourcesContent":["import { useDevice } from '@/hooks/useDevice';\nimport { cn } from '@/lib/utils';\nimport { ChevronLeft } from 'lucide-react';\nimport * as React from 'react';\nimport { SheetContent, SheetFooter, SheetHeader, SheetTitle } from '../../../components/sheet';\nimport { useSelectContext } from './context';\nimport { SelectContentProps } from './types';\nimport { SelectFooter } from './select-footer';\nimport { SelectLoading } from './select-states';\n\nconst SelectContent = React.forwardRef<HTMLDivElement, SelectContentProps>(\n  (\n    {\n      children,\n      searchElm,\n      additionalContent,\n      hasFooter,\n      className,\n      title: titleProp,\n      loading,\n      footerClassName,\n      backIcon,\n      onBack,\n      cancelTracking,\n      applyTracking,\n      closeAfterClear,\n      ...props\n    },\n    ref,\n  ) => {\n    const { isDesktop } = useDevice();\n    const { label: selectLabel } = useSelectContext();\n\n    const CompHeader = !isDesktop ? SheetHeader : 'div';\n\n    const CompTitle = !isDesktop ? SheetTitle : 'span';\n\n    const CompFooter = !isDesktop ? SheetFooter : 'div';\n\n    const title = React.useMemo(() => {\n      if (titleProp) return titleProp;\n      if (!isDesktop) return selectLabel || 'Chọn mục';\n      return '';\n    }, [selectLabel, titleProp]);\n\n    const contentElm = isDesktop ? (\n      <div\n        ref={ref}\n        className={cn(\n          'overflow-y-auto [&>*>*:first-child]:rounded-t [&>*>*:last-child]:rounded-b [&>*>*:only-child]:rounded',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    ) : (\n      <SheetContent ref={ref} {...props} className={cn('overflow-y-auto', className)} side=\"bottom\">\n        {title && (\n          <SheetHeader>\n            <SheetTitle className=\"text-center\">{title}</SheetTitle>\n          </SheetHeader>\n        )}\n        {/* Render search and additional content inside SheetContent on mobile */}\n        {searchElm}\n        {additionalContent}\n        <div className=\"flex-1 overflow-y-auto\">{children}</div>\n        {hasFooter && (\n          <SheetFooter\n            className={cn(\n              'shadow-up-shadow-8 relative !mt-0 w-full border-t p-3 sm:justify-start',\n              footerClassName,\n            )}\n          >\n            <SelectFooter cancelTracking={cancelTracking} applyTracking={applyTracking} />\n          </SheetFooter>\n        )}\n      </SheetContent>\n    );\n    const headerElm = (\n      <CompHeader\n        className={cn(\n          'lg:flex lg:space-x-1 lg:px-2 lg:pb-1 lg:pt-3 lg:text-lg lg:font-medium lg:leading-[26px]',\n          {\n            'lg:hidden': !title,\n          },\n        )}\n      >\n        {backIcon && (\n          <ChevronLeft\n            className=\"absolute left-2 cursor-pointer lg:relative lg:left-auto\"\n            onClick={onBack}\n          />\n        )}\n        <CompTitle\n          className={cn({\n            'lg:hidden': !title, // Chỉ ẩn trên desktop khi không có title\n          })}\n        >\n          {title}\n        </CompTitle>\n      </CompHeader>\n    );\n\n    if (loading) {\n      return (\n        <>\n          {isDesktop && headerElm}\n          {/* Only render search and additional content outside on desktop */}\n          {isDesktop && searchElm}\n          {isDesktop && additionalContent}\n          {isDesktop ? (\n            <SelectLoading />\n          ) : (\n            <SheetContent side=\"bottom\">\n              {title && (\n                <SheetHeader>\n                  <SheetTitle className=\"text-center\">{title}</SheetTitle>\n                </SheetHeader>\n              )}\n              {/* Render search and additional content inside SheetContent on mobile */}\n              {searchElm}\n              {additionalContent}\n              <SelectLoading />\n              {hasFooter && (\n                <SheetFooter\n                  className={cn(\n                    'shadow-up-shadow-8 relative !mt-0 w-full border-t p-3 sm:justify-start',\n                    footerClassName,\n                  )}\n                >\n                  <SelectFooter\n                    cancelTracking={cancelTracking}\n                    applyTracking={applyTracking}\n                    closeAfterClear={closeAfterClear}\n                  />\n                </SheetFooter>\n              )}\n            </SheetContent>\n          )}\n          {hasFooter && isDesktop && (\n            <CompFooter\n              className={cn('shadow-up-shadow-8 relative !mt-0 border-t p-3', footerClassName)}\n            >\n              <SelectFooter\n                cancelTracking={cancelTracking}\n                applyTracking={applyTracking}\n                closeAfterClear={closeAfterClear}\n              />\n            </CompFooter>\n          )}\n        </>\n      );\n    }\n\n    return (\n      <>\n        {isDesktop && headerElm}\n        {/* Only render search and additional content outside on desktop */}\n        {isDesktop && searchElm}\n        {isDesktop && additionalContent}\n        {contentElm}\n        {hasFooter && isDesktop && (\n          <CompFooter\n            className={cn('shadow-up-shadow-8 relative !mt-0 border-t p-3', footerClassName)}\n          >\n            <SelectFooter\n              cancelTracking={cancelTracking}\n              applyTracking={applyTracking}\n              closeAfterClear={closeAfterClear}\n            />\n          </CompFooter>\n        )}\n      </>\n    );\n  },\n);\n\nSelectContent.displayName = 'SelectContent';\n\nexport { SelectContent };\n"]}

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

@@ -0,0 +1,165 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useDevice } from '@/hooks/useDevice';
+import { cn } from '@/lib/utils';
+import { ChevronLeft } from 'lucide-react';
+import * as React from 'react';
+import { SheetContent, SheetHeader, SheetTitle, SheetFooter } from '../../../components/sheet';
+import { useSelectContext } from './context';
+import { SelectFooter } from './select-footer';
+import { SelectLoading } from './select-states';
+
+const SelectContent = React.forwardRef(
+  ({
+    children,
+    searchElm,
+    additionalContent,
+    hasFooter,
+    className,
+    title: titleProp,
+    loading,
+    footerClassName,
+    backIcon,
+    onBack,
+    cancelTracking,
+    applyTracking,
+    closeAfterClear,
+    ...props
+  }, ref) => {
+    const { isDesktop } = useDevice();
+    const { label: selectLabel } = useSelectContext();
+    const CompHeader = !isDesktop ? SheetHeader : "div";
+    const CompTitle = !isDesktop ? SheetTitle : "span";
+    const CompFooter = !isDesktop ? SheetFooter : "div";
+    const title = React.useMemo(() => {
+      if (titleProp) return titleProp;
+      if (!isDesktop) return selectLabel || "Ch\u1ECDn m\u1EE5c";
+      return "";
+    }, [selectLabel, titleProp]);
+    const contentElm = isDesktop ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "overflow-y-auto [&>*>*:first-child]:rounded-t [&>*>*:last-child]:rounded-b [&>*>*:only-child]:rounded",
+          className
+        ),
+        ...props,
+        children
+      }
+    ) : /* @__PURE__ */ jsxs(SheetContent, { ref, ...props, className: cn("overflow-y-auto", className), side: "bottom", children: [
+      title && /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { className: "text-center", children: title }) }),
+      searchElm,
+      additionalContent,
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children }),
+      hasFooter && /* @__PURE__ */ jsx(
+        SheetFooter,
+        {
+          className: cn(
+            "shadow-up-shadow-8 relative !mt-0 w-full border-t p-3 sm:justify-start",
+            footerClassName
+          ),
+          children: /* @__PURE__ */ jsx(SelectFooter, { cancelTracking, applyTracking })
+        }
+      )
+    ] });
+    const headerElm = /* @__PURE__ */ jsxs(
+      CompHeader,
+      {
+        className: cn(
+          "lg:flex lg:space-x-1 lg:px-2 lg:pb-1 lg:pt-3 lg:text-lg lg:font-medium lg:leading-[26px]",
+          {
+            "lg:hidden": !title
+          }
+        ),
+        children: [
+          backIcon && /* @__PURE__ */ jsx(
+            ChevronLeft,
+            {
+              className: "absolute left-2 cursor-pointer lg:relative lg:left-auto",
+              onClick: onBack
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            CompTitle,
+            {
+              className: cn({
+                "lg:hidden": !title
+                // Chỉ ẩn trên desktop khi không có title
+              }),
+              children: title
+            }
+          )
+        ]
+      }
+    );
+    if (loading) {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        isDesktop && headerElm,
+        isDesktop && searchElm,
+        isDesktop && additionalContent,
+        isDesktop ? /* @__PURE__ */ jsx(SelectLoading, {}) : /* @__PURE__ */ jsxs(SheetContent, { side: "bottom", children: [
+          title && /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { className: "text-center", children: title }) }),
+          searchElm,
+          additionalContent,
+          /* @__PURE__ */ jsx(SelectLoading, {}),
+          hasFooter && /* @__PURE__ */ jsx(
+            SheetFooter,
+            {
+              className: cn(
+                "shadow-up-shadow-8 relative !mt-0 w-full border-t p-3 sm:justify-start",
+                footerClassName
+              ),
+              children: /* @__PURE__ */ jsx(
+                SelectFooter,
+                {
+                  cancelTracking,
+                  applyTracking,
+                  closeAfterClear
+                }
+              )
+            }
+          )
+        ] }),
+        hasFooter && isDesktop && /* @__PURE__ */ jsx(
+          CompFooter,
+          {
+            className: cn("shadow-up-shadow-8 relative !mt-0 border-t p-3", footerClassName),
+            children: /* @__PURE__ */ jsx(
+              SelectFooter,
+              {
+                cancelTracking,
+                applyTracking,
+                closeAfterClear
+              }
+            )
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      isDesktop && headerElm,
+      isDesktop && searchElm,
+      isDesktop && additionalContent,
+      contentElm,
+      hasFooter && isDesktop && /* @__PURE__ */ jsx(
+        CompFooter,
+        {
+          className: cn("shadow-up-shadow-8 relative !mt-0 border-t p-3", footerClassName),
+          children: /* @__PURE__ */ jsx(
+            SelectFooter,
+            {
+              cancelTracking,
+              applyTracking,
+              closeAfterClear
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+SelectContent.displayName = "SelectContent";
+
+export { SelectContent };
+//# sourceMappingURL=select-content.mjs.map
+//# sourceMappingURL=select-content.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/select/select-content.tsx"],"names":[],"mappings":";;;;;;;;;;AAUA,MAAM,gBAAgB,KAAA,CAAM,UAAA;AAAA,EAC1B,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,iBAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA,EAAO,SAAA;AAAA,IACP,OAAA;AAAA,IACA,eAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA;AAAA,IACA,eAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,EAAE,SAAA,EAAU,GAAI,SAAA,EAAU;AAChC,IAAA,MAAM,EAAE,KAAA,EAAO,WAAA,EAAY,GAAI,gBAAA,EAAiB;AAEhD,IAAA,MAAM,UAAA,GAAa,CAAC,SAAA,GAAY,WAAA,GAAc,KAAA;AAE9C,IAAA,MAAM,SAAA,GAAY,CAAC,SAAA,GAAY,UAAA,GAAa,MAAA;AAE5C,IAAA,MAAM,UAAA,GAAa,CAAC,SAAA,GAAY,WAAA,GAAc,KAAA;AAE9C,IAAA,MAAM,KAAA,GAAQ,KAAA,CAAM,OAAA,CAAQ,MAAM;AAChC,MAAA,IAAI,WAAW,OAAO,SAAA;AACtB,MAAA,IAAI,CAAC,SAAA,EAAW,OAAO,WAAA,IAAe,oBAAA;AACtC,MAAA,OAAO,EAAA;AAAA,IACT,CAAA,EAAG,CAAC,WAAA,EAAa,SAAS,CAAC,CAAA;AAE3B,IAAA,MAAM,aAAa,SAAA,mBACjB,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,uGAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH,mBAEA,IAAA,CAAC,YAAA,EAAA,EAAa,GAAA,EAAW,GAAG,KAAA,EAAO,SAAA,EAAW,EAAA,CAAG,iBAAA,EAAmB,SAAS,CAAA,EAAG,IAAA,EAAK,QAAA,EAClF,QAAA,EAAA;AAAA,MAAA,KAAA,wBACE,WAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,cAAW,SAAA,EAAU,aAAA,EAAe,iBAAM,CAAA,EAC7C,CAAA;AAAA,MAGD,SAAA;AAAA,MACA,iBAAA;AAAA,sBACD,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wBAAA,EAA0B,QAAA,EAAS,CAAA;AAAA,MACjD,SAAA,oBACC,GAAA;AAAA,QAAC,WAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,EAAA;AAAA,YACT,wEAAA;AAAA,YACA;AAAA,WACF;AAAA,UAEA,QAAA,kBAAA,GAAA,CAAC,YAAA,EAAA,EAAa,cAAA,EAAgC,aAAA,EAA8B;AAAA;AAAA;AAC9E,KAAA,EAEJ,CAAA;AAEF,IAAA,MAAM,SAAA,mBACJ,IAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,0FAAA;AAAA,UACA;AAAA,YACE,aAAa,CAAC;AAAA;AAChB,SACF;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,QAAA,oBACC,GAAA;AAAA,YAAC,WAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,yDAAA;AAAA,cACV,OAAA,EAAS;AAAA;AAAA,WACX;AAAA,0BAEF,GAAA;AAAA,YAAC,SAAA;AAAA,YAAA;AAAA,cACC,WAAW,EAAA,CAAG;AAAA,gBACZ,aAAa,CAAC;AAAA;AAAA,eACf,CAAA;AAAA,cAEA,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,KACF;AAGF,IAAA,IAAI,OAAA,EAAS;AACX,MAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,SAAA,IAAa,SAAA;AAAA,QAEb,SAAA,IAAa,SAAA;AAAA,QACb,SAAA,IAAa,iBAAA;AAAA,QACb,4BACC,GAAA,CAAC,aAAA,EAAA,EAAc,oBAEf,IAAA,CAAC,YAAA,EAAA,EAAa,MAAK,QAAA,EAChB,QAAA,EAAA;AAAA,UAAA,KAAA,wBACE,WAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,cAAW,SAAA,EAAU,aAAA,EAAe,iBAAM,CAAA,EAC7C,CAAA;AAAA,UAGD,SAAA;AAAA,UACA,iBAAA;AAAA,8BACA,aAAA,EAAA,EAAc,CAAA;AAAA,UACd,SAAA,oBACC,GAAA;AAAA,YAAC,WAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,EAAA;AAAA,gBACT,wEAAA;AAAA,gBACA;AAAA,eACF;AAAA,cAEA,QAAA,kBAAA,GAAA;AAAA,gBAAC,YAAA;AAAA,gBAAA;AAAA,kBACC,cAAA;AAAA,kBACA,aAAA;AAAA,kBACA;AAAA;AAAA;AACF;AAAA;AACF,SAAA,EAEJ,CAAA;AAAA,QAED,aAAa,SAAA,oBACZ,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA,CAAG,gDAAA,EAAkD,eAAe,CAAA;AAAA,YAE/E,QAAA,kBAAA,GAAA;AAAA,cAAC,YAAA;AAAA,cAAA;AAAA,gBACC,cAAA;AAAA,gBACA,aAAA;AAAA,gBACA;AAAA;AAAA;AACF;AAAA;AACF,OAAA,EAEJ,CAAA;AAAA,IAEJ;AAEA,IAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,MAAA,SAAA,IAAa,SAAA;AAAA,MAEb,SAAA,IAAa,SAAA;AAAA,MACb,SAAA,IAAa,iBAAA;AAAA,MACb,UAAA;AAAA,MACA,aAAa,SAAA,oBACZ,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,EAAA,CAAG,gDAAA,EAAkD,eAAe,CAAA;AAAA,UAE/E,QAAA,kBAAA,GAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,cAAA;AAAA,cACA,aAAA;AAAA,cACA;AAAA;AAAA;AACF;AAAA;AACF,KAAA,EAEJ,CAAA;AAAA,EAEJ;AACF;AAEA,aAAA,CAAc,WAAA,GAAc,eAAA","file":"select-content.mjs","sourcesContent":["import { useDevice } from '@/hooks/useDevice';\nimport { cn } from '@/lib/utils';\nimport { ChevronLeft } from 'lucide-react';\nimport * as React from 'react';\nimport { SheetContent, SheetFooter, SheetHeader, SheetTitle } from '../../../components/sheet';\nimport { useSelectContext } from './context';\nimport { SelectContentProps } from './types';\nimport { SelectFooter } from './select-footer';\nimport { SelectLoading } from './select-states';\n\nconst SelectContent = React.forwardRef<HTMLDivElement, SelectContentProps>(\n  (\n    {\n      children,\n      searchElm,\n      additionalContent,\n      hasFooter,\n      className,\n      title: titleProp,\n      loading,\n      footerClassName,\n      backIcon,\n      onBack,\n      cancelTracking,\n      applyTracking,\n      closeAfterClear,\n      ...props\n    },\n    ref,\n  ) => {\n    const { isDesktop } = useDevice();\n    const { label: selectLabel } = useSelectContext();\n\n    const CompHeader = !isDesktop ? SheetHeader : 'div';\n\n    const CompTitle = !isDesktop ? SheetTitle : 'span';\n\n    const CompFooter = !isDesktop ? SheetFooter : 'div';\n\n    const title = React.useMemo(() => {\n      if (titleProp) return titleProp;\n      if (!isDesktop) return selectLabel || 'Chọn mục';\n      return '';\n    }, [selectLabel, titleProp]);\n\n    const contentElm = isDesktop ? (\n      <div\n        ref={ref}\n        className={cn(\n          'overflow-y-auto [&>*>*:first-child]:rounded-t [&>*>*:last-child]:rounded-b [&>*>*:only-child]:rounded',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    ) : (\n      <SheetContent ref={ref} {...props} className={cn('overflow-y-auto', className)} side=\"bottom\">\n        {title && (\n          <SheetHeader>\n            <SheetTitle className=\"text-center\">{title}</SheetTitle>\n          </SheetHeader>\n        )}\n        {/* Render search and additional content inside SheetContent on mobile */}\n        {searchElm}\n        {additionalContent}\n        <div className=\"flex-1 overflow-y-auto\">{children}</div>\n        {hasFooter && (\n          <SheetFooter\n            className={cn(\n              'shadow-up-shadow-8 relative !mt-0 w-full border-t p-3 sm:justify-start',\n              footerClassName,\n            )}\n          >\n            <SelectFooter cancelTracking={cancelTracking} applyTracking={applyTracking} />\n          </SheetFooter>\n        )}\n      </SheetContent>\n    );\n    const headerElm = (\n      <CompHeader\n        className={cn(\n          'lg:flex lg:space-x-1 lg:px-2 lg:pb-1 lg:pt-3 lg:text-lg lg:font-medium lg:leading-[26px]',\n          {\n            'lg:hidden': !title,\n          },\n        )}\n      >\n        {backIcon && (\n          <ChevronLeft\n            className=\"absolute left-2 cursor-pointer lg:relative lg:left-auto\"\n            onClick={onBack}\n          />\n        )}\n        <CompTitle\n          className={cn({\n            'lg:hidden': !title, // Chỉ ẩn trên desktop khi không có title\n          })}\n        >\n          {title}\n        </CompTitle>\n      </CompHeader>\n    );\n\n    if (loading) {\n      return (\n        <>\n          {isDesktop && headerElm}\n          {/* Only render search and additional content outside on desktop */}\n          {isDesktop && searchElm}\n          {isDesktop && additionalContent}\n          {isDesktop ? (\n            <SelectLoading />\n          ) : (\n            <SheetContent side=\"bottom\">\n              {title && (\n                <SheetHeader>\n                  <SheetTitle className=\"text-center\">{title}</SheetTitle>\n                </SheetHeader>\n              )}\n              {/* Render search and additional content inside SheetContent on mobile */}\n              {searchElm}\n              {additionalContent}\n              <SelectLoading />\n              {hasFooter && (\n                <SheetFooter\n                  className={cn(\n                    'shadow-up-shadow-8 relative !mt-0 w-full border-t p-3 sm:justify-start',\n                    footerClassName,\n                  )}\n                >\n                  <SelectFooter\n                    cancelTracking={cancelTracking}\n                    applyTracking={applyTracking}\n                    closeAfterClear={closeAfterClear}\n                  />\n                </SheetFooter>\n              )}\n            </SheetContent>\n          )}\n          {hasFooter && isDesktop && (\n            <CompFooter\n              className={cn('shadow-up-shadow-8 relative !mt-0 border-t p-3', footerClassName)}\n            >\n              <SelectFooter\n                cancelTracking={cancelTracking}\n                applyTracking={applyTracking}\n                closeAfterClear={closeAfterClear}\n              />\n            </CompFooter>\n          )}\n        </>\n      );\n    }\n\n    return (\n      <>\n        {isDesktop && headerElm}\n        {/* Only render search and additional content outside on desktop */}\n        {isDesktop && searchElm}\n        {isDesktop && additionalContent}\n        {contentElm}\n        {hasFooter && isDesktop && (\n          <CompFooter\n            className={cn('shadow-up-shadow-8 relative !mt-0 border-t p-3', footerClassName)}\n          >\n            <SelectFooter\n              cancelTracking={cancelTracking}\n              applyTracking={applyTracking}\n              closeAfterClear={closeAfterClear}\n            />\n          </CompFooter>\n        )}\n      </>\n    );\n  },\n);\n\nSelectContent.displayName = 'SelectContent';\n\nexport { SelectContent };\n"]}

package/dist/common/interactive/select/select-footer.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { SelectFooterProps } from './types';
+declare const SelectFooter: React.ForwardRefExoticComponent<SelectFooterProps & React.RefAttributes<HTMLDivElement>>;
+export { SelectFooter };
+//# sourceMappingURL=select-footer.d.ts.map

package/dist/common/interactive/select/select-footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-footer.d.ts","sourceRoot":"","sources":["../../../../src/common/interactive/select/select-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,QAAA,MAAM,YAAY,0FAoDjB,CAAC;AAIF,OAAO,EAAE,YAAY,EAAE,CAAC"}

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

@@ -0,0 +1,82 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var button = require('../../../components/button');
+var helpers = require('../../../lib/helpers');
+var context = require('./context');
+var selectClose = require('./select-close');
+
+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 SelectFooter = React__namespace.forwardRef(
+  ({ closeAfterClear = false, cancelTracking, applyTracking, ...props }, ref) => {
+    const { onApply, onClearValue, value, setValue, setGroupValue } = context.useSelectContext();
+    const onClearProp = helpers.useCallbackRef(() => {
+      setValue?.([]);
+      setGroupValue?.({ group: [], child: [] });
+      onClearValue?.();
+    });
+    const onApplyProp = helpers.useCallbackRef((e) => {
+      onApply?.(value);
+    });
+    const ClearButton = closeAfterClear ? selectClose.SelectClose : React__namespace.Fragment;
+    const clearButtonProps = closeAfterClear ? { asChild: true } : {};
+    const multipleValue = value?.length;
+    return /* @__PURE__ */ jsxRuntime.jsxs(button.ButtonGroup, { ref, ...props, className: "w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ClearButton, { ...clearButtonProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+        button.Button,
+        {
+          type: "button",
+          className: "w-full px-0",
+          style: {
+            flex: 1
+          },
+          variant: "secondary",
+          size: "sm",
+          onClick: onClearProp,
+          ...cancelTracking,
+          children: "B\u1ECF ch\u1ECDn"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(selectClose.SelectClose, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        button.Button,
+        {
+          type: "button",
+          className: "w-full flex-1",
+          style: {
+            flex: 2
+          },
+          variant: "default",
+          size: "sm",
+          onClick: onApplyProp,
+          ...applyTracking,
+          children: `${`\xC1p d\u1EE5ng`}${multipleValue ? ` (${multipleValue})` : ""}`
+        }
+      ) })
+    ] });
+  }
+);
+SelectFooter.displayName = "SelectFooter";
+
+exports.SelectFooter = SelectFooter;
+//# sourceMappingURL=select-footer.js.map
+//# sourceMappingURL=select-footer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/select/select-footer.tsx"],"names":["React","useSelectContext","useCallbackRef","SelectClose","ButtonGroup","jsx","Button"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,eAAeA,gBAAA,CAAM,UAAA;AAAA,EACzB,CAAC,EAAE,eAAA,GAAkB,KAAA,EAAO,gBAAgB,aAAA,EAAe,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC7E,IAAA,MAAM,EAAE,OAAA,EAAS,YAAA,EAAc,OAAO,QAAA,EAAU,aAAA,KAAkBC,wBAAA,EAAiB;AACnF,IAAA,MAAM,WAAA,GAAcC,uBAA2D,MAAM;AAEnF,MAAA,QAAA,GAAW,EAAE,CAAA;AACb,MAAA,aAAA,GAAgB,EAAE,KAAA,EAAO,IAAI,KAAA,EAAO,IAAI,CAAA;AACxC,MAAA,YAAA,IAAe;AAAA,IACjB,CAAC,CAAA;AAED,IAAA,MAAM,WAAA,GAAcA,sBAAA,CAA2D,CAAC,CAAA,KAAM;AACpF,MAAA,OAAA,GAAU,KAAK,CAAA;AAAA,IACjB,CAAC,CAAA;AAED,IAAA,MAAM,WAAA,GAAc,eAAA,GAAkBC,uBAAA,GAAcH,gBAAA,CAAM,QAAA;AAC1D,IAAA,MAAM,mBAAmB,eAAA,GAAkB,EAAE,OAAA,EAAS,IAAA,KAAS,EAAC;AAChE,IAAA,MAAM,gBAAgB,KAAA,EAAO,MAAA;AAC7B,IAAA,uCACGI,kBAAA,EAAA,EAAY,GAAA,EAAW,GAAG,KAAA,EAAO,WAAU,QAAA,EAC1C,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAAC,WAAA,EAAA,EAAa,GAAG,gBAAA,EACf,QAAA,kBAAAA,cAAA;AAAA,QAACC,aAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,QAAA;AAAA,UACL,SAAA,EAAU,aAAA;AAAA,UACV,KAAA,EAAO;AAAA,YACL,IAAA,EAAM;AAAA,WACR;AAAA,UACA,OAAA,EAAS,WAAA;AAAA,UACT,IAAA,EAAM,IAAA;AAAA,UACN,OAAA,EAAS,WAAA;AAAA,UACR,GAAG,cAAA;AAAA,UACL,QAAA,EAAA;AAAA;AAAA,OAED,EACF,CAAA;AAAA,sBACAD,cAAA,CAACF,uBAAA,EAAA,EAAY,OAAA,EAAO,IAAA,EAClB,QAAA,kBAAAE,cAAA;AAAA,QAACC,aAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,QAAA;AAAA,UACL,SAAA,EAAU,eAAA;AAAA,UACV,KAAA,EAAO;AAAA,YACL,IAAA,EAAM;AAAA,WACR;AAAA,UACA,OAAA,EAAS,SAAA;AAAA,UACT,IAAA,EAAM,IAAA;AAAA,UACN,OAAA,EAAS,WAAA;AAAA,UACR,GAAG,aAAA;AAAA,UAEH,aAAG,CAAA,eAAA,CAAS,CAAA,EAAG,gBAAgB,CAAA,EAAA,EAAK,aAAa,MAAM,EAAE,CAAA;AAAA;AAAA,OAC5D,EACF;AAAA,KAAA,EACF,CAAA;AAAA,EAEJ;AACF;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA","file":"select-footer.js","sourcesContent":["import * as React from 'react';\nimport { Button, ButtonGroup } from '../../../components/button';\nimport { useCallbackRef } from '../../../lib/helpers';\nimport { useSelectContext } from './context';\nimport { SelectClose } from './select-close';\nimport { SelectFooterProps } from './types';\n\nconst SelectFooter = React.forwardRef<React.ElementRef<typeof ButtonGroup>, SelectFooterProps>(\n  ({ closeAfterClear = false, cancelTracking, applyTracking, ...props }, ref) => {\n    const { onApply, onClearValue, value, setValue, setGroupValue } = useSelectContext();\n    const onClearProp = useCallbackRef<React.MouseEventHandler<HTMLButtonElement>>(() => {\n      // Clear value\n      setValue?.([]);\n      setGroupValue?.({ group: [], child: [] });\n      onClearValue?.();\n    });\n\n    const onApplyProp = useCallbackRef<React.MouseEventHandler<HTMLButtonElement>>((e) => {\n      onApply?.(value);\n    });\n\n    const ClearButton = closeAfterClear ? SelectClose : React.Fragment;\n    const clearButtonProps = closeAfterClear ? { asChild: true } : {};\n    const multipleValue = value?.length;\n    return (\n      <ButtonGroup ref={ref} {...props} className=\"w-full\">\n        <ClearButton {...clearButtonProps}>\n          <Button\n            type=\"button\"\n            className=\"w-full px-0\"\n            style={{\n              flex: 1,\n            }}\n            variant={'secondary'}\n            size={'sm'}\n            onClick={onClearProp}\n            {...cancelTracking}\n          >\n            Bỏ chọn\n          </Button>\n        </ClearButton>\n        <SelectClose asChild>\n          <Button\n            type=\"button\"\n            className=\"w-full flex-1\"\n            style={{\n              flex: 2,\n            }}\n            variant={'default'}\n            size={'sm'}\n            onClick={onApplyProp}\n            {...applyTracking}\n          >\n            {`${`Áp dụng`}${multipleValue ? ` (${multipleValue})` : ''}`}\n          </Button>\n        </SelectClose>\n      </ButtonGroup>\n    );\n  },\n);\n\nSelectFooter.displayName = 'SelectFooter';\n\nexport { SelectFooter };\n"]}

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

@@ -0,0 +1,60 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { ButtonGroup, Button } from '../../../components/button';
+import { useCallbackRef } from '../../../lib/helpers';
+import { useSelectContext } from './context';
+import { SelectClose } from './select-close';
+
+const SelectFooter = React.forwardRef(
+  ({ closeAfterClear = false, cancelTracking, applyTracking, ...props }, ref) => {
+    const { onApply, onClearValue, value, setValue, setGroupValue } = useSelectContext();
+    const onClearProp = useCallbackRef(() => {
+      setValue?.([]);
+      setGroupValue?.({ group: [], child: [] });
+      onClearValue?.();
+    });
+    const onApplyProp = useCallbackRef((e) => {
+      onApply?.(value);
+    });
+    const ClearButton = closeAfterClear ? SelectClose : React.Fragment;
+    const clearButtonProps = closeAfterClear ? { asChild: true } : {};
+    const multipleValue = value?.length;
+    return /* @__PURE__ */ jsxs(ButtonGroup, { ref, ...props, className: "w-full", children: [
+      /* @__PURE__ */ jsx(ClearButton, { ...clearButtonProps, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          className: "w-full px-0",
+          style: {
+            flex: 1
+          },
+          variant: "secondary",
+          size: "sm",
+          onClick: onClearProp,
+          ...cancelTracking,
+          children: "B\u1ECF ch\u1ECDn"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(SelectClose, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          className: "w-full flex-1",
+          style: {
+            flex: 2
+          },
+          variant: "default",
+          size: "sm",
+          onClick: onApplyProp,
+          ...applyTracking,
+          children: `${`\xC1p d\u1EE5ng`}${multipleValue ? ` (${multipleValue})` : ""}`
+        }
+      ) })
+    ] });
+  }
+);
+SelectFooter.displayName = "SelectFooter";
+
+export { SelectFooter };
+//# sourceMappingURL=select-footer.mjs.map
+//# sourceMappingURL=select-footer.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/select/select-footer.tsx"],"names":[],"mappings":";;;;;;;AAOA,MAAM,eAAe,KAAA,CAAM,UAAA;AAAA,EACzB,CAAC,EAAE,eAAA,GAAkB,KAAA,EAAO,gBAAgB,aAAA,EAAe,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC7E,IAAA,MAAM,EAAE,OAAA,EAAS,YAAA,EAAc,OAAO,QAAA,EAAU,aAAA,KAAkB,gBAAA,EAAiB;AACnF,IAAA,MAAM,WAAA,GAAc,eAA2D,MAAM;AAEnF,MAAA,QAAA,GAAW,EAAE,CAAA;AACb,MAAA,aAAA,GAAgB,EAAE,KAAA,EAAO,IAAI,KAAA,EAAO,IAAI,CAAA;AACxC,MAAA,YAAA,IAAe;AAAA,IACjB,CAAC,CAAA;AAED,IAAA,MAAM,WAAA,GAAc,cAAA,CAA2D,CAAC,CAAA,KAAM;AACpF,MAAA,OAAA,GAAU,KAAK,CAAA;AAAA,IACjB,CAAC,CAAA;AAED,IAAA,MAAM,WAAA,GAAc,eAAA,GAAkB,WAAA,GAAc,KAAA,CAAM,QAAA;AAC1D,IAAA,MAAM,mBAAmB,eAAA,GAAkB,EAAE,OAAA,EAAS,IAAA,KAAS,EAAC;AAChE,IAAA,MAAM,gBAAgB,KAAA,EAAO,MAAA;AAC7B,IAAA,4BACG,WAAA,EAAA,EAAY,GAAA,EAAW,GAAG,KAAA,EAAO,WAAU,QAAA,EAC1C,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,WAAA,EAAA,EAAa,GAAG,gBAAA,EACf,QAAA,kBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,QAAA;AAAA,UACL,SAAA,EAAU,aAAA;AAAA,UACV,KAAA,EAAO;AAAA,YACL,IAAA,EAAM;AAAA,WACR;AAAA,UACA,OAAA,EAAS,WAAA;AAAA,UACT,IAAA,EAAM,IAAA;AAAA,UACN,OAAA,EAAS,WAAA;AAAA,UACR,GAAG,cAAA;AAAA,UACL,QAAA,EAAA;AAAA;AAAA,OAED,EACF,CAAA;AAAA,sBACA,GAAA,CAAC,WAAA,EAAA,EAAY,OAAA,EAAO,IAAA,EAClB,QAAA,kBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,QAAA;AAAA,UACL,SAAA,EAAU,eAAA;AAAA,UACV,KAAA,EAAO;AAAA,YACL,IAAA,EAAM;AAAA,WACR;AAAA,UACA,OAAA,EAAS,SAAA;AAAA,UACT,IAAA,EAAM,IAAA;AAAA,UACN,OAAA,EAAS,WAAA;AAAA,UACR,GAAG,aAAA;AAAA,UAEH,aAAG,CAAA,eAAA,CAAS,CAAA,EAAG,gBAAgB,CAAA,EAAA,EAAK,aAAa,MAAM,EAAE,CAAA;AAAA;AAAA,OAC5D,EACF;AAAA,KAAA,EACF,CAAA;AAAA,EAEJ;AACF;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA","file":"select-footer.mjs","sourcesContent":["import * as React from 'react';\nimport { Button, ButtonGroup } from '../../../components/button';\nimport { useCallbackRef } from '../../../lib/helpers';\nimport { useSelectContext } from './context';\nimport { SelectClose } from './select-close';\nimport { SelectFooterProps } from './types';\n\nconst SelectFooter = React.forwardRef<React.ElementRef<typeof ButtonGroup>, SelectFooterProps>(\n  ({ closeAfterClear = false, cancelTracking, applyTracking, ...props }, ref) => {\n    const { onApply, onClearValue, value, setValue, setGroupValue } = useSelectContext();\n    const onClearProp = useCallbackRef<React.MouseEventHandler<HTMLButtonElement>>(() => {\n      // Clear value\n      setValue?.([]);\n      setGroupValue?.({ group: [], child: [] });\n      onClearValue?.();\n    });\n\n    const onApplyProp = useCallbackRef<React.MouseEventHandler<HTMLButtonElement>>((e) => {\n      onApply?.(value);\n    });\n\n    const ClearButton = closeAfterClear ? SelectClose : React.Fragment;\n    const clearButtonProps = closeAfterClear ? { asChild: true } : {};\n    const multipleValue = value?.length;\n    return (\n      <ButtonGroup ref={ref} {...props} className=\"w-full\">\n        <ClearButton {...clearButtonProps}>\n          <Button\n            type=\"button\"\n            className=\"w-full px-0\"\n            style={{\n              flex: 1,\n            }}\n            variant={'secondary'}\n            size={'sm'}\n            onClick={onClearProp}\n            {...cancelTracking}\n          >\n            Bỏ chọn\n          </Button>\n        </ClearButton>\n        <SelectClose asChild>\n          <Button\n            type=\"button\"\n            className=\"w-full flex-1\"\n            style={{\n              flex: 2,\n            }}\n            variant={'default'}\n            size={'sm'}\n            onClick={onApplyProp}\n            {...applyTracking}\n          >\n            {`${`Áp dụng`}${multipleValue ? ` (${multipleValue})` : ''}`}\n          </Button>\n        </SelectClose>\n      </ButtonGroup>\n    );\n  },\n);\n\nSelectFooter.displayName = 'SelectFooter';\n\nexport { SelectFooter };\n"]}

package/dist/common/interactive/select/select-item.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { SelectItemBaseProps, SelectItemProps } from './types';
+declare const SelectItemBase: React.ForwardRefExoticComponent<SelectItemBaseProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
+export { SelectItemBase, SelectItem };
+//# sourceMappingURL=select-item.d.ts.map

package/dist/common/interactive/select/select-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-item.d.ts","sourceRoot":"","sources":["../../../../src/common/interactive/select/select-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAuB,mBAAmB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAIpF,QAAA,MAAM,cAAc,4FA2EnB,CAAC;AAIF,QAAA,MAAM,UAAU,wFAyHf,CAAC;AAIF,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,CAAC"}