@sth87/shadcn-design-system 0.1.0 → 0.1.2

package/dist/esm/components/Toast/Toast.js

@@ -49,36 +49,36 @@ const h = {
   default: null,
   primary: /* @__PURE__ */ t(i, { className: "ds:w-4 ds:h-4 ds:shrink-0" }),
   secondary: /* @__PURE__ */ t(i, { className: "ds:w-4 ds:h-4 ds:shrink-0" })
-}, e = (s, r) => /* @__PURE__ */ p(
+}, d = (r, s) => /* @__PURE__ */ p(
   "div",
   {
     className: g(
       "ds:flex ds:items-center ds:gap-2 ds:rounded-md ds:px-3 ds:py-2 ds:shadow-md ds:text-sm ds:font-medium",
-      h[s]
+      h[r]
     ),
     children: [
-      w[s],
-      /* @__PURE__ */ t("span", { children: r })
+      w[r],
+      /* @__PURE__ */ t("span", { children: s })
     ]
   }
-), rr = Object.assign(
-  (...s) => {
-    const [r] = s, d = typeof r == "function" ? r() : r ?? "Notification";
-    return o.custom(() => e("default", d));
+), ss = Object.assign(
+  (...r) => {
+    const [s] = r, e = typeof s == "function" ? s() : s ?? "Notification";
+    return o.custom(() => d("default", e));
   },
   {
-    success: (s, r) => o.custom(() => e("success", s), r),
-    error: (s, r) => o.custom(() => e("error", s), r),
-    warning: (s, r) => o.custom(() => e("warning", s), r),
-    info: (s, r) => o.custom(() => e("info", s), r),
-    primary: (s, r) => o.custom(() => e("primary", s), r),
-    secondary: (s, r) => o.custom(() => e("secondary", s), r)
+    success: (r, s) => o.custom(() => d("success", r), s),
+    error: (r, s) => o.custom(() => d("error", r), s),
+    warning: (r, s) => o.custom(() => d("warning", r), s),
+    info: (r, s) => o.custom(() => d("info", r), s),
+    primary: (r, s) => o.custom(() => d("primary", r), s),
+    secondary: (r, s) => o.custom(() => d("secondary", r), s)
   }
 );
-function sr({
-  position: s = "top-right",
-  richColors: r = !0,
-  closeButton: d = !1,
+function rs({
+  position: r = "top-right",
+  richColors: s = !0,
+  closeButton: e = !1,
   expand: m = !1,
   visibleToasts: n = 3,
   duration: a = 4e3,
@@ -88,24 +88,24 @@ function sr({
     u,
     {
       ...c,
-      position: s,
-      richColors: r,
-      closeButton: d,
+      position: r,
+      richColors: s,
+      closeButton: e,
       expand: m,
       visibleToasts: n,
       toastOptions: {
         duration: a,
         classNames: {
-          toast: "rounded-md shadow-md border-none text-sm font-medium backdrop-blur-sm text-black dark:text-white",
-          description: "text-muted-foreground",
-          actionButton: "bg-white/10"
+          toast: "ds:rounded-md ds:shadow-md ds:border-none ds:text-sm ds:font-medium ds:backdrop-blur-sm ds:text-black ds:dark:text-white",
+          description: "ds:text-muted-foreground",
+          actionButton: "ds:bg-white/10"
         }
       }
     }
   );
 }
 export {
-  sr as Toaster,
-  rr as toast
+  rs as Toaster,
+  ss as toast
 };
 //# sourceMappingURL=Toast.js.map

package/dist/esm/components/Toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import {\n  Toaster as SonnerToaster,\n  toast as sonnerToast,\n  type ToasterProps as SonnerToasterProps,\n} from \"sonner\";\nimport { CheckCircle, XCircle, Info, AlertTriangle } from \"lucide-react\";\nimport { cn } from \"@dsui/ui/index\";\n\nconst variantStyles = {\n  default: \"ds:bg-neutral-800 ds:text-white ds:border ds:border-neutral-700\",\n  success: \"ds:bg-success ds:text-white ds:border ds:border-success/20\",\n  error: \"ds:bg-error ds:text-white ds:border ds:border-error/20\",\n  warning: \"ds:bg-warning ds:text-black ds:border ds:border-warning/20\",\n  info: \"ds:bg-info ds:text-foreground\",\n  primary: \"ds:bg-primary ds:text-primary-foreground ds:border ds:border-primary/20\",\n  secondary:\n    \"ds:bg-secondary ds:text-secondary-foreground ds:border ds:border-secondary/20\",\n};\n\nconst variantIcons = {\n  success: <CheckCircle className=\"ds:w-4 ds:h-4 ds:shrink-0\" />,\n  error: <XCircle className=\"ds:w-4 ds:h-4 ds:shrink-0\" />,\n  warning: <AlertTriangle className=\"ds:w-4 ds:h-4 ds:shrink-0\" />,\n  info: <Info className=\"ds:w-4 ds:h-4 ds:shrink-0\" />,\n  default: null,\n  primary: <Info className=\"ds:w-4 ds:h-4 ds:shrink-0\" />,\n  secondary: <Info className=\"ds:w-4 ds:h-4 ds:shrink-0\" />,\n};\n\ntype Variant = keyof typeof variantStyles;\n\nconst renderToastContent = (variant: Variant, message: React.ReactNode) => (\n  <div\n    className={cn(\n      \"ds:flex ds:items-center ds:gap-2 ds:rounded-md ds:px-3 ds:py-2 ds:shadow-md ds:text-sm ds:font-medium\",\n      variantStyles[variant]\n    )}\n  >\n    {variantIcons[variant]}\n    <span>{message}</span>\n  </div>\n);\n\nconst toast = Object.assign(\n  (...args: Parameters<typeof sonnerToast>) => {\n    const [message] = args;\n    const content =\n      typeof message === \"function\" ? message() : (message ?? \"Notification\");\n\n    return sonnerToast.custom(() => renderToastContent(\"default\", content));\n  },\n  {\n    success: (\n      message: React.ReactNode,\n      opts?: Parameters<typeof sonnerToast>[1]\n    ) => sonnerToast.custom(() => renderToastContent(\"success\", message), opts),\n\n    error: (\n      message: React.ReactNode,\n      opts?: Parameters<typeof sonnerToast>[1]\n    ) => sonnerToast.custom(() => renderToastContent(\"error\", message), opts),\n\n    warning: (\n      message: React.ReactNode,\n      opts?: Parameters<typeof sonnerToast>[1]\n    ) => sonnerToast.custom(() => renderToastContent(\"warning\", message), opts),\n\n    info: (\n      message: React.ReactNode,\n      opts?: Parameters<typeof sonnerToast>[1]\n    ) => sonnerToast.custom(() => renderToastContent(\"info\", message), opts),\n\n    primary: (\n      message: React.ReactNode,\n      opts?: Parameters<typeof sonnerToast>[1]\n    ) => sonnerToast.custom(() => renderToastContent(\"primary\", message), opts),\n\n    secondary: (\n      message: React.ReactNode,\n      opts?: Parameters<typeof sonnerToast>[1]\n    ) =>\n      sonnerToast.custom(() => renderToastContent(\"secondary\", message), opts),\n  }\n) as any;\n\nfunction Toaster({\n  position = \"top-right\",\n  richColors = true,\n  closeButton = false,\n  expand = false,\n  visibleToasts = 3,\n  duration = 4000,\n  ...props\n}: SonnerToasterProps) {\n  return (\n    <SonnerToaster\n      {...props}\n      position={position}\n      richColors={richColors}\n      closeButton={closeButton}\n      expand={expand}\n      visibleToasts={visibleToasts}\n      toastOptions={{\n        duration: duration,\n        classNames: {\n          toast:\n            \"rounded-md shadow-md border-none text-sm font-medium backdrop-blur-sm text-black dark:text-white\",\n          description: \"text-muted-foreground\",\n          actionButton: \"bg-white/10\",\n        },\n      }}\n    />\n  );\n}\n\nexport { toast, Toaster };\n"],"names":["variantStyles","variantIcons","jsx","CheckCircle","XCircle","AlertTriangle","Info","renderToastContent","variant","message","jsxs","cn","toast","args","content","sonnerToast","opts","Toaster","position","richColors","closeButton","expand","visibleToasts","duration","props","SonnerToaster"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAMA,IAAgB;AAAA,EACpB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,WACE;AACJ,GAEMC,IAAe;AAAA,EACnB,SAAS,gBAAAC,EAACC,GAAA,EAAY,WAAU,4BAAA,CAA4B;AAAA,EAC5D,OAAO,gBAAAD,EAACE,GAAA,EAAQ,WAAU,4BAAA,CAA4B;AAAA,EACtD,SAAS,gBAAAF,EAACG,GAAA,EAAc,WAAU,4BAAA,CAA4B;AAAA,EAC9D,MAAM,gBAAAH,EAACI,GAAA,EAAK,WAAU,4BAAA,CAA4B;AAAA,EAClD,SAAS;AAAA,EACT,SAAS,gBAAAJ,EAACI,GAAA,EAAK,WAAU,4BAAA,CAA4B;AAAA,EACrD,WAAW,gBAAAJ,EAACI,GAAA,EAAK,WAAU,4BAAA,CAA4B;AACzD,GAIMC,IAAqB,CAACC,GAAkBC,MAC5C,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAX,EAAcQ,CAAO;AAAA,IAAA;AAAA,IAGtB,UAAA;AAAA,MAAAP,EAAaO,CAAO;AAAA,MACrB,gBAAAN,EAAC,UAAM,UAAAO,EAAA,CAAQ;AAAA,IAAA;AAAA,EAAA;AACjB,GAGIG,KAAQ,OAAO;AAAA,EACnB,IAAIC,MAAyC;AAC3C,UAAM,CAACJ,CAAO,IAAII,GACZC,IACJ,OAAOL,KAAY,aAAaA,EAAA,IAAaA,KAAW;AAE1D,WAAOM,EAAY,OAAO,MAAMR,EAAmB,WAAWO,CAAO,CAAC;AAAA,EACxE;AAAA,EACA;AAAA,IACE,SAAS,CACPL,GACAO,MACGD,EAAY,OAAO,MAAMR,EAAmB,WAAWE,CAAO,GAAGO,CAAI;AAAA,IAE1E,OAAO,CACLP,GACAO,MACGD,EAAY,OAAO,MAAMR,EAAmB,SAASE,CAAO,GAAGO,CAAI;AAAA,IAExE,SAAS,CACPP,GACAO,MACGD,EAAY,OAAO,MAAMR,EAAmB,WAAWE,CAAO,GAAGO,CAAI;AAAA,IAE1E,MAAM,CACJP,GACAO,MACGD,EAAY,OAAO,MAAMR,EAAmB,QAAQE,CAAO,GAAGO,CAAI;AAAA,IAEvE,SAAS,CACPP,GACAO,MACGD,EAAY,OAAO,MAAMR,EAAmB,WAAWE,CAAO,GAAGO,CAAI;AAAA,IAE1E,WAAW,CACTP,GACAO,MAEAD,EAAY,OAAO,MAAMR,EAAmB,aAAaE,CAAO,GAAGO,CAAI;AAAA,EAAA;AAE7E;AAEA,SAASC,GAAQ;AAAA,EACf,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,aAAAC,IAAc;AAAA,EACd,QAAAC,IAAS;AAAA,EACT,eAAAC,IAAgB;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,GAAGC;AACL,GAAuB;AACrB,SACE,gBAAAtB;AAAA,IAACuB;AAAAA,IAAA;AAAA,MACE,GAAGD;AAAA,MACJ,UAAAN;AAAA,MACA,YAAAC;AAAA,MACA,aAAAC;AAAA,MACA,QAAAC;AAAA,MACA,eAAAC;AAAA,MACA,cAAc;AAAA,QACZ,UAAAC;AAAA,QACA,YAAY;AAAA,UACV,OACE;AAAA,UACF,aAAa;AAAA,UACb,cAAc;AAAA,QAAA;AAAA,MAChB;AAAA,IACF;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Toast.js","sources":["../../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import {\n  Toaster as SonnerToaster,\n  toast as sonnerToast,\n  type ToasterProps as SonnerToasterProps,\n} from \"sonner\";\nimport { CheckCircle, XCircle, Info, AlertTriangle } from \"lucide-react\";\nimport { cn } from \"@dsui/ui/index\";\n\nconst variantStyles = {\n  default: \"ds:bg-neutral-800 ds:text-white ds:border ds:border-neutral-700\",\n  success: \"ds:bg-success ds:text-white ds:border ds:border-success/20\",\n  error: \"ds:bg-error ds:text-white ds:border ds:border-error/20\",\n  warning: \"ds:bg-warning ds:text-black ds:border ds:border-warning/20\",\n  info: \"ds:bg-info ds:text-foreground\",\n  primary: \"ds:bg-primary ds:text-primary-foreground ds:border ds:border-primary/20\",\n  secondary:\n    \"ds:bg-secondary ds:text-secondary-foreground ds:border ds:border-secondary/20\",\n};\n\nconst variantIcons = {\n  success: <CheckCircle className=\"ds:w-4 ds:h-4 ds:shrink-0\" />,\n  error: <XCircle className=\"ds:w-4 ds:h-4 ds:shrink-0\" />,\n  warning: <AlertTriangle className=\"ds:w-4 ds:h-4 ds:shrink-0\" />,\n  info: <Info className=\"ds:w-4 ds:h-4 ds:shrink-0\" />,\n  default: null,\n  primary: <Info className=\"ds:w-4 ds:h-4 ds:shrink-0\" />,\n  secondary: <Info className=\"ds:w-4 ds:h-4 ds:shrink-0\" />,\n};\n\ntype Variant = keyof typeof variantStyles;\n\nconst renderToastContent = (variant: Variant, message: React.ReactNode) => (\n  <div\n    className={cn(\n      \"ds:flex ds:items-center ds:gap-2 ds:rounded-md ds:px-3 ds:py-2 ds:shadow-md ds:text-sm ds:font-medium\",\n      variantStyles[variant]\n    )}\n  >\n    {variantIcons[variant]}\n    <span>{message}</span>\n  </div>\n);\n\nconst toast = Object.assign(\n  (...args: Parameters<typeof sonnerToast>) => {\n    const [message] = args;\n    const content =\n      typeof message === \"function\" ? message() : (message ?? \"Notification\");\n\n    return sonnerToast.custom(() => renderToastContent(\"default\", content));\n  },\n  {\n    success: (\n      message: React.ReactNode,\n      opts?: Parameters<typeof sonnerToast>[1]\n    ) => sonnerToast.custom(() => renderToastContent(\"success\", message), opts),\n\n    error: (\n      message: React.ReactNode,\n      opts?: Parameters<typeof sonnerToast>[1]\n    ) => sonnerToast.custom(() => renderToastContent(\"error\", message), opts),\n\n    warning: (\n      message: React.ReactNode,\n      opts?: Parameters<typeof sonnerToast>[1]\n    ) => sonnerToast.custom(() => renderToastContent(\"warning\", message), opts),\n\n    info: (\n      message: React.ReactNode,\n      opts?: Parameters<typeof sonnerToast>[1]\n    ) => sonnerToast.custom(() => renderToastContent(\"info\", message), opts),\n\n    primary: (\n      message: React.ReactNode,\n      opts?: Parameters<typeof sonnerToast>[1]\n    ) => sonnerToast.custom(() => renderToastContent(\"primary\", message), opts),\n\n    secondary: (\n      message: React.ReactNode,\n      opts?: Parameters<typeof sonnerToast>[1]\n    ) =>\n      sonnerToast.custom(() => renderToastContent(\"secondary\", message), opts),\n  }\n) as any;\n\nfunction Toaster({\n  position = \"top-right\",\n  richColors = true,\n  closeButton = false,\n  expand = false,\n  visibleToasts = 3,\n  duration = 4000,\n  ...props\n}: SonnerToasterProps) {\n  return (\n    <SonnerToaster\n      {...props}\n      position={position}\n      richColors={richColors}\n      closeButton={closeButton}\n      expand={expand}\n      visibleToasts={visibleToasts}\n      toastOptions={{\n        duration: duration,\n        classNames: {\n          toast:\n            \"ds:rounded-md ds:shadow-md ds:border-none ds:text-sm ds:font-medium ds:backdrop-blur-sm ds:text-black ds:dark:text-white\",\n          description: \"ds:text-muted-foreground\",\n          actionButton: \"ds:bg-white/10\",\n        },\n      }}\n    />\n  );\n}\n\nexport { toast, Toaster };\n"],"names":["variantStyles","variantIcons","jsx","CheckCircle","XCircle","AlertTriangle","Info","renderToastContent","variant","message","jsxs","cn","toast","args","content","sonnerToast","opts","Toaster","position","richColors","closeButton","expand","visibleToasts","duration","props","SonnerToaster"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAMA,IAAgB;AAAA,EACpB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,WACE;AACJ,GAEMC,IAAe;AAAA,EACnB,SAAS,gBAAAC,EAACC,GAAA,EAAY,WAAU,4BAAA,CAA4B;AAAA,EAC5D,OAAO,gBAAAD,EAACE,GAAA,EAAQ,WAAU,4BAAA,CAA4B;AAAA,EACtD,SAAS,gBAAAF,EAACG,GAAA,EAAc,WAAU,4BAAA,CAA4B;AAAA,EAC9D,MAAM,gBAAAH,EAACI,GAAA,EAAK,WAAU,4BAAA,CAA4B;AAAA,EAClD,SAAS;AAAA,EACT,SAAS,gBAAAJ,EAACI,GAAA,EAAK,WAAU,4BAAA,CAA4B;AAAA,EACrD,WAAW,gBAAAJ,EAACI,GAAA,EAAK,WAAU,4BAAA,CAA4B;AACzD,GAIMC,IAAqB,CAACC,GAAkBC,MAC5C,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAX,EAAcQ,CAAO;AAAA,IAAA;AAAA,IAGtB,UAAA;AAAA,MAAAP,EAAaO,CAAO;AAAA,MACrB,gBAAAN,EAAC,UAAM,UAAAO,EAAA,CAAQ;AAAA,IAAA;AAAA,EAAA;AACjB,GAGIG,KAAQ,OAAO;AAAA,EACnB,IAAIC,MAAyC;AAC3C,UAAM,CAACJ,CAAO,IAAII,GACZC,IACJ,OAAOL,KAAY,aAAaA,EAAA,IAAaA,KAAW;AAE1D,WAAOM,EAAY,OAAO,MAAMR,EAAmB,WAAWO,CAAO,CAAC;AAAA,EACxE;AAAA,EACA;AAAA,IACE,SAAS,CACPL,GACAO,MACGD,EAAY,OAAO,MAAMR,EAAmB,WAAWE,CAAO,GAAGO,CAAI;AAAA,IAE1E,OAAO,CACLP,GACAO,MACGD,EAAY,OAAO,MAAMR,EAAmB,SAASE,CAAO,GAAGO,CAAI;AAAA,IAExE,SAAS,CACPP,GACAO,MACGD,EAAY,OAAO,MAAMR,EAAmB,WAAWE,CAAO,GAAGO,CAAI;AAAA,IAE1E,MAAM,CACJP,GACAO,MACGD,EAAY,OAAO,MAAMR,EAAmB,QAAQE,CAAO,GAAGO,CAAI;AAAA,IAEvE,SAAS,CACPP,GACAO,MACGD,EAAY,OAAO,MAAMR,EAAmB,WAAWE,CAAO,GAAGO,CAAI;AAAA,IAE1E,WAAW,CACTP,GACAO,MAEAD,EAAY,OAAO,MAAMR,EAAmB,aAAaE,CAAO,GAAGO,CAAI;AAAA,EAAA;AAE7E;AAEA,SAASC,GAAQ;AAAA,EACf,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,aAAAC,IAAc;AAAA,EACd,QAAAC,IAAS;AAAA,EACT,eAAAC,IAAgB;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,GAAGC;AACL,GAAuB;AACrB,SACE,gBAAAtB;AAAA,IAACuB;AAAAA,IAAA;AAAA,MACE,GAAGD;AAAA,MACJ,UAAAN;AAAA,MACA,YAAAC;AAAA,MACA,aAAAC;AAAA,MACA,QAAAC;AAAA,MACA,eAAAC;AAAA,MACA,cAAc;AAAA,QACZ,UAAAC;AAAA,QACA,YAAY;AAAA,UACV,OACE;AAAA,UACF,aAAa;AAAA,UACb,cAAc;AAAA,QAAA;AAAA,MAChB;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/dist/esm/components/Tooltip/Tooltip.js

@@ -1,4 +1,4 @@
-import { jsx as t, Fragment as _, jsxs as m } from "react/jsx-runtime";
+import { jsx as s, Fragment as _, jsxs as m } from "react/jsx-runtime";
 import * as c from "react";
 import { useMemo as g, useCallback as j } from "react";
 import { TooltipProvider as S, Tooltip as W, TooltipTrigger as X, TooltipContent as A } from "../../packages/ui/src/components/tooltip.js";
@@ -8,7 +8,7 @@ import "../../packages/ui/src/components/button-group.js";
 import "../../packages/ui/src/components/input.js";
 import "../../packages/ui/src/components/textarea.js";
 import "@radix-ui/react-label";
-import { cn as e } from "../../packages/ui/src/lib/utils.js";
+import { cn as r } from "../../packages/ui/src/lib/utils.js";
 import "../../packages/ui/src/components/select.js";
 import "../../packages/ui/src/components/combobox.js";
 import "lucide-react";
@@ -35,69 +35,69 @@ import "../../packages/ui/src/components/tabs.js";
 import "../../packages/ui/src/components/toggle.js";
 import { useMotionValue as E, useSpring as u, useTransform as f, motion as v } from "motion/react";
 import { animationClass as F } from "../../utils/animations.js";
-const xt = c.memo(function({
-  content: n,
-  children: o,
+const xs = c.memo(function({
+  content: a,
+  children: e,
   sideOffset: b = 4,
   delayDuration: h = 0,
-  className: s,
+  className: o,
   childClassName: x,
   position: y = "top",
   noArrow: w = !1,
   animation: i,
-  ...a
+  ...d
 }) {
-  const l = { stiffness: 100, damping: 5 }, k = g(() => F(i, s), [i, s]), d = g(() => {
-    switch (a.color) {
+  const n = { stiffness: 100, damping: 5 }, k = g(() => F(i, o), [i, o]), l = g(() => {
+    switch (d.color) {
       case "primary":
-        return "bg-primary text-primary-foreground [&>span>svg]:bg-primary [&>span>svg]:fill-primary";
+        return "ds:bg-primary ds:text-primary-foreground ds:[&>span>svg]:bg-primary ds:[&>span>svg]:fill-primary";
       case "secondary":
-        return "bg-secondary text-secondary-foreground [&>span>svg]:bg-secondary [&>span>svg]:fill-secondary";
+        return "ds:bg-secondary ds:text-secondary-foreground ds:[&>span>svg]:bg-secondary ds:[&>span>svg]:fill-secondary";
       case "dark":
         return "";
       case "light":
-        return "bg-neutral-200 text-neutral-950 [&_svg]:bg-neutral-200 [&_svg]:fill-neutral-200";
+        return "ds:bg-neutral-200 ds:text-neutral-950 ds:[&_svg]:bg-neutral-200 ds:[&_svg]:fill-neutral-200";
       case "inverted":
-        return "dark:bg-white dark:text-black dark:[&_svg]:bg-white dark:[&_svg]:fill-white";
+        return "ds:dark:bg-white ds:dark:text-black ds:dark:[&_svg]:bg-white ds:dark:[&_svg]:fill-white";
       case "success":
-        return "bg-success text-success-foreground [&>span>svg]:bg-success [&>span>svg]:fill-success";
+        return "ds:bg-success ds:text-success-foreground ds:[&>span>svg]:bg-success ds:[&>span>svg]:fill-success";
       case "warning":
-        return "bg-warning text-warning-foreground [&>span>svg]:bg-warning [&>span>svg]:fill-warning";
+        return "ds:bg-warning ds:text-warning-foreground ds:[&>span>svg]:bg-warning ds:[&>span>svg]:fill-warning";
       case "error":
-        return "bg-error text-error-foreground [&>span>svg]:bg-error [&>span>svg]:fill-error";
+        return "ds:bg-error ds:text-error-foreground ds:[&>span>svg]:bg-error ds:[&>span>svg]:fill-error";
       case "glass":
-        return "bg-white/15 text-foreground backdrop-blur-sm shadow-lg [&>span>svg]:bg-white/15 [&>span>svg]:fill-white/15";
+        return "ds:bg-white/15 ds:text-foreground ds:backdrop-blur-sm ds:shadow-lg ds:[&>span>svg]:bg-white/15 ds:[&>span>svg]:fill-white/15";
       default:
-        return "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance";
+        return "ds:bg-foreground ds:text-background ds:animate-in ds:fade-in-0 ds:zoom-in-95 ds:data-[state=closed]:animate-out ds:data-[state=closed]:fade-out-0 ds:data-[state=closed]:zoom-out-95 ds:data-[side=bottom]:slide-in-from-top-2 ds:data-[side=left]:slide-in-from-right-2 ds:data-[side=right]:slide-in-from-left-2 ds:data-[side=top]:slide-in-from-bottom-2 ds:z-50 ds:w-fit ds:origin-(--radix-tooltip-content-transform-origin) ds:rounded-md ds:px-3 ds:py-1.5 ds:text-xs ds:text-balance";
     }
-  }, [a?.color]), r = E(0), T = u(
-    f(r, [-100, 100], [-45, 45]),
-    l
+  }, [d?.color]), t = E(0), T = u(
+    f(t, [-100, 100], [-45, 45]),
+    n
   ), C = u(
-    f(r, [-100, 100], [-50, 50]),
-    l
+    f(t, [-100, 100], [-50, 50]),
+    n
   ), M = j(
     (p) => {
       const N = p.target.offsetWidth / 2;
-      r.set(p.nativeEvent.offsetX - N);
+      t.set(p.nativeEvent.offsetX - N);
     },
-    [r]
-  ), z = c.memo(() => o ? /* @__PURE__ */ t(
+    [t]
+  ), z = c.memo(() => e ? /* @__PURE__ */ s(
     "span",
     {
       onMouseMove: M,
-      className: e("ds:inline-block", x),
-      children: o
+      className: r("ds:inline-block", x),
+      children: e
     }
-  ) : /* @__PURE__ */ t(_, {}));
+  ) : /* @__PURE__ */ s(_, {}));
   return i === "spec" ? /* @__PURE__ */ m(
     v.div,
     {
-      className: e("ds:relative ds:-me-2.5 ds:inline-block", s),
+      className: r("ds:relative ds:-me-2.5 ds:inline-block", o),
       whileHover: "hover",
       initial: "initial",
       children: [
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ s(
           v.div,
           {
             variants: {
@@ -118,33 +118,33 @@ const xt = c.memo(function({
               rotate: T,
               whiteSpace: "nowrap"
             },
-            className: e(
+            className: r(
               "ds:absolute ds:-top-2 ds:left-1/2 ds:z-50 ds:flex ds:-translate-x-1/2 ds:-translate-y-full ds:flex-col ds:items-center ds:justify-center ds:rounded-md ds:px-4 ds:py-2 ds:text-xs ds:shadow-xl",
-              d
+              l
             ),
-            children: /* @__PURE__ */ t("div", { className: "ds:relative ds:z-1", children: n })
+            children: /* @__PURE__ */ s("div", { className: "ds:relative ds:z-1", children: a })
           }
         ),
-        /* @__PURE__ */ t(z, {})
+        /* @__PURE__ */ s(z, {})
       ]
     }
-  ) : /* @__PURE__ */ t(S, { delayDuration: h, children: /* @__PURE__ */ m(W, { children: [
-    /* @__PURE__ */ t(X, { asChild: !0, children: o }),
-    /* @__PURE__ */ t(
+  ) : /* @__PURE__ */ s(S, { delayDuration: h, children: /* @__PURE__ */ m(W, { children: [
+    /* @__PURE__ */ s(X, { asChild: !0, children: e }),
+    /* @__PURE__ */ s(
       A,
       {
-        ...a,
+        ...d,
         side: y,
         sideOffset: b,
-        className: e(k?.className, d, {
+        className: r(k?.className, l, {
           "ds:[&>span>svg]:invisible": w
         }),
-        children: n
+        children: a
       }
     )
   ] }) });
 });
 export {
-  xt as Tooltip
+  xs as Tooltip
 };
 //# sourceMappingURL=Tooltip.js.map

package/dist/esm/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  Tooltip as DsTooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n  type TooltipContentProps,\n} from \"@dsui/ui/components/tooltip\";\nimport { cn } from \"@dsui/ui/index\";\nimport { motion, useMotionValue, useSpring, useTransform } from \"motion/react\";\nimport type { BasicAnimation, BasicColor } from \"@/types/variables\";\nimport { useMemo, useCallback } from \"react\";\nimport { animationClass } from \"@/utils/animations\";\n\ntype Color = BasicColor | \"dark\" | \"light\" | \"inverted\";\n\nexport type TooltipProps = TooltipContentProps & {\n  content: React.ReactNode;\n  children: React.ReactNode;\n  sideOffset?: number;\n  delayDuration?: number;\n  position?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  className?: string;\n  childClassName?: string;\n  noArrow?: boolean;\n  animation?: BasicAnimation;\n  color?: Color;\n};\n\nexport const Tooltip = React.memo(function Tooltip({\n  content,\n  children,\n  sideOffset = 4,\n  delayDuration = 0,\n  className,\n  childClassName,\n  position = \"top\",\n  noArrow = false,\n  animation,\n  ...props\n}: TooltipProps) {\n  const springConfig = { stiffness: 100, damping: 5 };\n\n  const tooltipAnimation = useMemo<{ className?: string } | null>(() => {\n    return animationClass(animation, className);\n  }, [animation, className]);\n\n  const tooltipColor = useMemo<string>(() => {\n    switch (props.color) {\n      case \"primary\":\n        return \"bg-primary text-primary-foreground [&>span>svg]:bg-primary [&>span>svg]:fill-primary\";\n      case \"secondary\":\n        return \"bg-secondary text-secondary-foreground [&>span>svg]:bg-secondary [&>span>svg]:fill-secondary\";\n      case \"dark\":\n        return \"\";\n      case \"light\":\n        return \"bg-neutral-200 text-neutral-950 [&_svg]:bg-neutral-200 [&_svg]:fill-neutral-200\";\n      case \"inverted\":\n        return \"dark:bg-white dark:text-black dark:[&_svg]:bg-white dark:[&_svg]:fill-white\";\n      case \"success\":\n        return \"bg-success text-success-foreground [&>span>svg]:bg-success [&>span>svg]:fill-success\";\n      case \"warning\":\n        return \"bg-warning text-warning-foreground [&>span>svg]:bg-warning [&>span>svg]:fill-warning\";\n      case \"error\":\n        return \"bg-error text-error-foreground [&>span>svg]:bg-error [&>span>svg]:fill-error\";\n      case \"glass\":\n        return \"bg-white/15 text-foreground backdrop-blur-sm shadow-lg [&>span>svg]:bg-white/15 [&>span>svg]:fill-white/15\";\n      default:\n        return \"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance\";\n    }\n  }, [props?.color]);\n\n  // on mouse move\n  const x = useMotionValue(0);\n  // rotate the tooltip\n  const rotate = useSpring(\n    useTransform(x, [-100, 100], [-45, 45]),\n    springConfig\n  );\n  // translate the tooltip\n  const translateX = useSpring(\n    useTransform(x, [-100, 100], [-50, 50]),\n    springConfig\n  );\n\n  const handleMouseMove = useCallback(\n    (event: React.MouseEvent) => {\n      const halfWidth = (event.target as HTMLElement).offsetWidth / 2;\n      x.set(event.nativeEvent.offsetX - halfWidth);\n    },\n    [x]\n  );\n\n  const ChildComp = React.memo(() => {\n    if (!children) return <></>;\n\n    return (\n      <span\n        onMouseMove={handleMouseMove}\n        className={cn(\"ds:inline-block\", childClassName)}\n      >\n        {children}\n      </span>\n    );\n  });\n\n  if (animation === \"spec\") {\n    return (\n      <motion.div\n        className={cn(\"ds:relative ds:-me-2.5 ds:inline-block\", className)}\n        whileHover=\"hover\"\n        initial=\"initial\"\n      >\n        <motion.div\n          variants={{\n            initial: { opacity: 0, y: 20, scale: 0 },\n            hover: {\n              opacity: 1,\n              y: -5,\n              scale: 1,\n              transition: {\n                type: \"tween\",\n                duration: 0.2,\n                ease: \"easeOut\",\n              },\n            },\n          }}\n          style={{\n            translateX: translateX,\n            rotate: rotate,\n            whiteSpace: \"nowrap\",\n          }}\n          className={cn(\n            \"ds:absolute ds:-top-2 ds:left-1/2 ds:z-50 ds:flex ds:-translate-x-1/2 ds:-translate-y-full ds:flex-col ds:items-center ds:justify-center ds:rounded-md ds:px-4 ds:py-2 ds:text-xs ds:shadow-xl\",\n            tooltipColor\n          )}\n        >\n          <div className=\"ds:relative ds:z-1\">{content}</div>\n        </motion.div>\n\n        <ChildComp />\n      </motion.div>\n    );\n  }\n\n  return (\n    <TooltipProvider delayDuration={delayDuration}>\n      <DsTooltip>\n        <TooltipTrigger asChild>{children}</TooltipTrigger>\n        <TooltipContent\n          {...props}\n          side={position}\n          sideOffset={sideOffset}\n          className={cn(tooltipAnimation?.className, tooltipColor, {\n            \"ds:[&>span>svg]:invisible\": noArrow,\n          })}\n        >\n          {content}\n        </TooltipContent>\n      </DsTooltip>\n    </TooltipProvider>\n  );\n});\n"],"names":["Tooltip","React","content","children","sideOffset","delayDuration","className","childClassName","position","noArrow","animation","props","springConfig","tooltipAnimation","useMemo","animationClass","tooltipColor","x","useMotionValue","rotate","useSpring","useTransform","translateX","handleMouseMove","useCallback","event","halfWidth","ChildComp","jsx","cn","Fragment","jsxs","motion","TooltipProvider","DsTooltip","TooltipTrigger","TooltipContent"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  Tooltip as DsTooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n  type TooltipContentProps,\n} from \"@dsui/ui/components/tooltip\";\nimport { cn } from \"@dsui/ui/index\";\nimport { motion, useMotionValue, useSpring, useTransform } from \"motion/react\";\nimport type { BasicAnimation, BasicColor } from \"@/types/variables\";\nimport { useMemo, useCallback } from \"react\";\nimport { animationClass } from \"@/utils/animations\";\n\ntype Color = BasicColor | \"dark\" | \"light\" | \"inverted\";\n\nexport type TooltipProps = TooltipContentProps & {\n  content: React.ReactNode;\n  children: React.ReactNode;\n  sideOffset?: number;\n  delayDuration?: number;\n  position?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  className?: string;\n  childClassName?: string;\n  noArrow?: boolean;\n  animation?: BasicAnimation;\n  color?: Color;\n};\n\nexport const Tooltip = React.memo(function Tooltip({\n  content,\n  children,\n  sideOffset = 4,\n  delayDuration = 0,\n  className,\n  childClassName,\n  position = \"top\",\n  noArrow = false,\n  animation,\n  ...props\n}: TooltipProps) {\n  const springConfig = { stiffness: 100, damping: 5 };\n\n  const tooltipAnimation = useMemo<{ className?: string } | null>(() => {\n    return animationClass(animation, className);\n  }, [animation, className]);\n\n  const tooltipColor = useMemo<string>(() => {\n    switch (props.color) {\n      case \"primary\":\n        return \"ds:bg-primary ds:text-primary-foreground ds:[&>span>svg]:bg-primary ds:[&>span>svg]:fill-primary\";\n      case \"secondary\":\n        return \"ds:bg-secondary ds:text-secondary-foreground ds:[&>span>svg]:bg-secondary ds:[&>span>svg]:fill-secondary\";\n      case \"dark\":\n        return \"\";\n      case \"light\":\n        return \"ds:bg-neutral-200 ds:text-neutral-950 ds:[&_svg]:bg-neutral-200 ds:[&_svg]:fill-neutral-200\";\n      case \"inverted\":\n        return \"ds:dark:bg-white ds:dark:text-black ds:dark:[&_svg]:bg-white ds:dark:[&_svg]:fill-white\";\n      case \"success\":\n        return \"ds:bg-success ds:text-success-foreground ds:[&>span>svg]:bg-success ds:[&>span>svg]:fill-success\";\n      case \"warning\":\n        return \"ds:bg-warning ds:text-warning-foreground ds:[&>span>svg]:bg-warning ds:[&>span>svg]:fill-warning\";\n      case \"error\":\n        return \"ds:bg-error ds:text-error-foreground ds:[&>span>svg]:bg-error ds:[&>span>svg]:fill-error\";\n      case \"glass\":\n        return \"ds:bg-white/15 ds:text-foreground ds:backdrop-blur-sm ds:shadow-lg ds:[&>span>svg]:bg-white/15 ds:[&>span>svg]:fill-white/15\";\n      default:\n        return \"ds:bg-foreground ds:text-background ds:animate-in ds:fade-in-0 ds:zoom-in-95 ds:data-[state=closed]:animate-out ds:data-[state=closed]:fade-out-0 ds:data-[state=closed]:zoom-out-95 ds:data-[side=bottom]:slide-in-from-top-2 ds:data-[side=left]:slide-in-from-right-2 ds:data-[side=right]:slide-in-from-left-2 ds:data-[side=top]:slide-in-from-bottom-2 ds:z-50 ds:w-fit ds:origin-(--radix-tooltip-content-transform-origin) ds:rounded-md ds:px-3 ds:py-1.5 ds:text-xs ds:text-balance\";\n    }\n  }, [props?.color]);\n\n  // on mouse move\n  const x = useMotionValue(0);\n  // rotate the tooltip\n  const rotate = useSpring(\n    useTransform(x, [-100, 100], [-45, 45]),\n    springConfig\n  );\n  // translate the tooltip\n  const translateX = useSpring(\n    useTransform(x, [-100, 100], [-50, 50]),\n    springConfig\n  );\n\n  const handleMouseMove = useCallback(\n    (event: React.MouseEvent) => {\n      const halfWidth = (event.target as HTMLElement).offsetWidth / 2;\n      x.set(event.nativeEvent.offsetX - halfWidth);\n    },\n    [x]\n  );\n\n  const ChildComp = React.memo(() => {\n    if (!children) return <></>;\n\n    return (\n      <span\n        onMouseMove={handleMouseMove}\n        className={cn(\"ds:inline-block\", childClassName)}\n      >\n        {children}\n      </span>\n    );\n  });\n\n  if (animation === \"spec\") {\n    return (\n      <motion.div\n        className={cn(\"ds:relative ds:-me-2.5 ds:inline-block\", className)}\n        whileHover=\"hover\"\n        initial=\"initial\"\n      >\n        <motion.div\n          variants={{\n            initial: { opacity: 0, y: 20, scale: 0 },\n            hover: {\n              opacity: 1,\n              y: -5,\n              scale: 1,\n              transition: {\n                type: \"tween\",\n                duration: 0.2,\n                ease: \"easeOut\",\n              },\n            },\n          }}\n          style={{\n            translateX: translateX,\n            rotate: rotate,\n            whiteSpace: \"nowrap\",\n          }}\n          className={cn(\n            \"ds:absolute ds:-top-2 ds:left-1/2 ds:z-50 ds:flex ds:-translate-x-1/2 ds:-translate-y-full ds:flex-col ds:items-center ds:justify-center ds:rounded-md ds:px-4 ds:py-2 ds:text-xs ds:shadow-xl\",\n            tooltipColor\n          )}\n        >\n          <div className=\"ds:relative ds:z-1\">{content}</div>\n        </motion.div>\n\n        <ChildComp />\n      </motion.div>\n    );\n  }\n\n  return (\n    <TooltipProvider delayDuration={delayDuration}>\n      <DsTooltip>\n        <TooltipTrigger asChild>{children}</TooltipTrigger>\n        <TooltipContent\n          {...props}\n          side={position}\n          sideOffset={sideOffset}\n          className={cn(tooltipAnimation?.className, tooltipColor, {\n            \"ds:[&>span>svg]:invisible\": noArrow,\n          })}\n        >\n          {content}\n        </TooltipContent>\n      </DsTooltip>\n    </TooltipProvider>\n  );\n});\n"],"names":["Tooltip","React","content","children","sideOffset","delayDuration","className","childClassName","position","noArrow","animation","props","springConfig","tooltipAnimation","useMemo","animationClass","tooltipColor","x","useMotionValue","rotate","useSpring","useTransform","translateX","handleMouseMove","useCallback","event","halfWidth","ChildComp","jsx","cn","Fragment","jsxs","motion","TooltipProvider","DsTooltip","TooltipTrigger","TooltipContent"],"mappings":"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"}

package/dist/esm/components/WheelColumn.js

@@ -34,15 +34,15 @@ import "@radix-ui/react-slider";
 import "../packages/ui/src/components/tabs.js";
 import "../packages/ui/src/components/toggle.js";
 const F = (r) => String(r).padStart(2, "0"), P = (r = "primary") => ({
-  primary: "text-primary",
-  secondary: "text-secondary",
-  accent: "text-accent",
-  destructive: "text-destructive",
-  muted: "text-muted-foreground",
-  success: "text-success",
-  error: "text-error",
-  warning: "text-warning",
-  foreground: "text-foreground"
+  primary: "ds:text-primary",
+  secondary: "ds:text-secondary",
+  accent: "ds:text-accent",
+  destructive: "ds:text-destructive",
+  muted: "ds:text-muted-foreground",
+  success: "ds:text-success",
+  error: "ds:text-error",
+  warning: "ds:text-warning",
+  foreground: "ds:text-foreground"
 })[r], W = O(
   Y.forwardRef(
     ({

package/dist/esm/components/WheelColumn.js.map

@@ -1 +1 @@
-{"version":3,"file":"WheelColumn.js","sources":["../../../src/components/WheelColumn.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { memo, useCallback, useEffect, useRef, useState } from \"react\";\nimport { cn } from \"@dsui/ui/index\";\nimport type { CalendarColor } from \"./Calendar/Calendar\";\n\nconst pad = (num: number): string => String(num).padStart(2, \"0\");\n\n// Color variants for time picker items\nconst getColorClass = (color: CalendarColor = \"primary\"): string => {\n  const colorMap = {\n    primary: \"text-primary\",\n    secondary: \"text-secondary\",\n    accent: \"text-accent\",\n    destructive: \"text-destructive\",\n    muted: \"text-muted-foreground\",\n    success: \"text-success\",\n    error: \"text-error\",\n    warning: \"text-warning\",\n    foreground: \"text-foreground\",\n  };\n  return colorMap[color];\n};\n\ntype TimeColumnwheelProps = {\n  items: number[];\n  value: number | undefined;\n  onChange: (val: number) => void;\n  timeLabel?: string;\n  itemClassName?: string;\n  isItemDisabled: (item: number) => boolean;\n  disabled: boolean;\n  color?: CalendarColor;\n};\n\nexport const TimeColumnwheel = memo(\n  React.forwardRef<HTMLDivElement, TimeColumnwheelProps>(\n    (\n      {\n        items,\n        value: selectedValue,\n        onChange: onChangeCol,\n        timeLabel,\n        itemClassName,\n        isItemDisabled,\n        disabled,\n        color = \"primary\",\n      },\n      ref\n    ) => {\n      const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(\n        null\n      );\n      const containerRef = useRef<HTMLDivElement | null>(null);\n      const [scrollTop, setScrollTop] = useState(0);\n\n      // Debounced scroll handler\n      const handleScroll = useCallback(() => {\n        if (!containerRef.current || disabled) return;\n\n        const container = containerRef.current;\n        const currentScrollTop = container.scrollTop;\n        setScrollTop(currentScrollTop);\n\n        // Clear previous timer\n        if (debounceTimerRef.current) {\n          clearTimeout(debounceTimerRef.current);\n        }\n\n        // Set new timer\n        debounceTimerRef.current = setTimeout(() => {\n          const scrollTop = container.scrollTop;\n          const itemHeight = 40; // h-10 = 40px\n          const containerHeight = container.clientHeight;\n          const dividerCenter = containerHeight / 2; // Divider lines ở giữa container\n\n          // Calculate which item is at the divider center\n          // Account for top spacer (h-30 = 120px)\n          const adjustedScrollTop = scrollTop - 120;\n          const dividerPosition = adjustedScrollTop + dividerCenter;\n\n          // Find the item whose center is closest to divider center\n          let closestItem = items[0];\n          let minDistance = Infinity;\n\n          items.forEach((item, index) => {\n            const itemTop = index * itemHeight;\n            const itemCenter = itemTop + itemHeight / 2;\n            const distance = Math.abs(itemCenter - dividerPosition);\n\n            if (distance < minDistance) {\n              minDistance = distance;\n              closestItem = item;\n            }\n          });\n\n          // Only trigger change if different from current value and not disabled\n          if (!isItemDisabled(closestItem)) {\n            // Always update if item is different, or snap to correct position\n            if (closestItem !== selectedValue) {\n              onChangeCol(closestItem);\n            } else {\n              // Re-trigger to ensure input reflects the snapped value\n              // This handles cases where user scrolled slightly but ended on same value\n              const itemIndex = items.indexOf(closestItem);\n              const targetScrollTop =\n                120 +\n                itemIndex * itemHeight -\n                containerHeight / 2 +\n                itemHeight / 2;\n\n              if (Math.abs(container.scrollTop - targetScrollTop) > 5) {\n                container.scrollTo({\n                  top: targetScrollTop,\n                  behavior: \"smooth\",\n                });\n              }\n            }\n          }\n        }, 100); // 100ms debounce for faster response\n      }, [items, selectedValue, onChangeCol, isItemDisabled, disabled]);\n\n      // Set up scroll listener\n      useEffect(() => {\n        const container = containerRef.current;\n        if (container) {\n          container.addEventListener(\"scroll\", handleScroll, { passive: true });\n          return () => {\n            container.removeEventListener(\"scroll\", handleScroll);\n            if (debounceTimerRef.current) {\n              clearTimeout(debounceTimerRef.current);\n            }\n          };\n        }\n      }, [handleScroll]);\n\n      // Scroll to selected value when it changes or on mount\n      useEffect(() => {\n        if (containerRef.current && selectedValue !== undefined) {\n          const itemIndex = items.indexOf(selectedValue);\n          if (itemIndex !== -1) {\n            const itemHeight = 40;\n            const containerHeight = containerRef.current.clientHeight;\n            const targetScrollTop =\n              120 +\n              itemIndex * itemHeight -\n              containerHeight / 2 +\n              itemHeight / 2;\n\n            containerRef.current.scrollTo({\n              top: targetScrollTop,\n              behavior: \"smooth\",\n            });\n          }\n        }\n      }, [selectedValue, items]);\n\n      // Cleanup on unmount\n      useEffect(() => {\n        return () => {\n          if (debounceTimerRef.current) {\n            clearTimeout(debounceTimerRef.current);\n          }\n        };\n      }, []);\n\n      const getItemStyle = (index: number, isSelected: boolean) => {\n        const itemHeight = 40;\n        const containerHeight = 256; // h-64 = 256px\n        const centerY = containerHeight / 2;\n        const itemCenterY = 120 + index * itemHeight + itemHeight / 2; // 120px spacer + item position\n        const distanceFromCenter = Math.abs(\n          itemCenterY - (scrollTop + centerY)\n        );\n        const maxDistance = containerHeight / 2;\n\n        // Calculate opacity and scale based on distance\n        const opacity = Math.max(\n          0.3,\n          1 - (distanceFromCenter / maxDistance) * 0.7\n        );\n        const fontSize = isSelected ? \"1.3rem\" : \"1rem\";\n\n        return {\n          opacity,\n          fontSize,\n          transition: \"opacity 0.2s ease, transform 0.2s ease\",\n        };\n      };\n\n      return (\n        <div className=\"ds:flex ds:flex-col ds:items-center ds:gap-2 ds:w-full ds:h-full ds:max-h-72\">\n          {timeLabel && (\n            <div className=\"ds:text-xs ds:font-semibold ds:text-muted-foreground ds:uppercase ds:p-2 ds:border-b ds:w-full ds:text-center ds:h-8\">\n              {timeLabel}\n            </div>\n          )}\n          <div\n            className={cn(\n              \"ds:relative ds:w-full\",\n              timeLabel ? \"ds:h-[calc(100%_-_2rem)]\" : \" ds:h-full\"\n            )}\n          >\n            {/* wheel style divider lines */}\n            <div className=\"ds:absolute ds:top-1/2 ds:left-0 ds:right-0 ds:h-10 ds:-translate-y-1/2 ds:border-t ds:border-b ds:border-border ds:pointer-events-none ds:z-10\" />\n\n            <div\n              ref={(el) => {\n                containerRef.current = el;\n                if (typeof ref === \"function\") {\n                  ref(el);\n                } else if (ref) {\n                  ref.current = el;\n                }\n              }}\n              className={cn(\n                \"ds:relative ds:h-full ds:w-full ds:min-w-20 ds:min-h-60 ds:overflow-y-scroll ds:scroll-smooth\",\n                \"ds:[&::-webkit-scrollbar]:w-1 ds:[&::-webkit-scrollbar-track]:bg-transparent\",\n                \"ds:[&::-webkit-scrollbar-thumb]:bg-border ds:[&::-webkit-scrollbar-thumb]:rounded\",\n                \"ds:flex ds:flex-col ds:snap-y ds:snap-mandatory\",\n                itemClassName\n              )}\n              style={{\n                maskImage: `linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%)`,\n                WebkitMaskImage: `linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%)`,\n              }}\n            >\n              {/* Spacer Top */}\n              <div className=\"ds:h-[calc(50%-1.25rem)] ds:flex-shrink-0\" />\n\n              {items.map((item, index) => {\n                const itemDisabled = isItemDisabled(item);\n                const isSelected =\n                  selectedValue !== undefined && item === selectedValue;\n                const itemStyle = getItemStyle(index, isSelected);\n\n                return (\n                  <div\n                    key={item}\n                    onClick={\n                      disabled || itemDisabled\n                        ? undefined\n                        : () => onChangeCol(item)\n                    }\n                    data-selected={isSelected || undefined}\n                    className={cn(\n                      \"ds:h-10 ds:flex-shrink-0 ds:flex ds:items-center ds:justify-center ds:transition-all ds:snap-center\",\n                      \"ds:cursor-pointer ds:text-lg ds:font-medium ds:select-none\",\n                      \"ds:disabled:opacity-30 ds:disabled:cursor-not-allowed ds:disabled:line-through\",\n                      isSelected\n                        ? `${getColorClass(color)} ds:font-bold`\n                        : \"ds:text-muted-foreground\"\n                    )}\n                    style={itemStyle}\n                  >\n                    {pad(item)}\n                  </div>\n                );\n              })}\n\n              {/* Spacer Bottom */}\n              <div className=\"ds:h-[calc(50%-1.25rem)] ds:flex-shrink-0\" />\n            </div>\n          </div>\n        </div>\n      );\n    }\n  )\n);\n\nTimeColumnwheel.displayName = \"TimeColumnwheel\";\n"],"names":["pad","num","getColorClass","color","TimeColumnwheel","memo","React","items","selectedValue","onChangeCol","timeLabel","itemClassName","isItemDisabled","disabled","ref","debounceTimerRef","useRef","containerRef","scrollTop","setScrollTop","useState","handleScroll","useCallback","container","currentScrollTop","itemHeight","containerHeight","dividerCenter","dividerPosition","closestItem","minDistance","item","index","itemCenter","distance","targetScrollTop","useEffect","itemIndex","getItemStyle","isSelected","itemCenterY","distanceFromCenter","maxDistance","jsxs","jsx","cn","el","itemDisabled","itemStyle"],"mappings":"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"}
+{"version":3,"file":"WheelColumn.js","sources":["../../../src/components/WheelColumn.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { memo, useCallback, useEffect, useRef, useState } from \"react\";\nimport { cn } from \"@dsui/ui/index\";\nimport type { CalendarColor } from \"./Calendar/Calendar\";\n\nconst pad = (num: number): string => String(num).padStart(2, \"0\");\n\n// Color variants for time picker items\nconst getColorClass = (color: CalendarColor = \"primary\"): string => {\n  const colorMap = {\n    primary: \"ds:text-primary\",\n    secondary: \"ds:text-secondary\",\n    accent: \"ds:text-accent\",\n    destructive: \"ds:text-destructive\",\n    muted: \"ds:text-muted-foreground\",\n    success: \"ds:text-success\",\n    error: \"ds:text-error\",\n    warning: \"ds:text-warning\",\n    foreground: \"ds:text-foreground\",\n  };\n  return colorMap[color];\n};\n\ntype TimeColumnwheelProps = {\n  items: number[];\n  value: number | undefined;\n  onChange: (val: number) => void;\n  timeLabel?: string;\n  itemClassName?: string;\n  isItemDisabled: (item: number) => boolean;\n  disabled: boolean;\n  color?: CalendarColor;\n};\n\nexport const TimeColumnwheel = memo(\n  React.forwardRef<HTMLDivElement, TimeColumnwheelProps>(\n    (\n      {\n        items,\n        value: selectedValue,\n        onChange: onChangeCol,\n        timeLabel,\n        itemClassName,\n        isItemDisabled,\n        disabled,\n        color = \"primary\",\n      },\n      ref\n    ) => {\n      const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(\n        null\n      );\n      const containerRef = useRef<HTMLDivElement | null>(null);\n      const [scrollTop, setScrollTop] = useState(0);\n\n      // Debounced scroll handler\n      const handleScroll = useCallback(() => {\n        if (!containerRef.current || disabled) return;\n\n        const container = containerRef.current;\n        const currentScrollTop = container.scrollTop;\n        setScrollTop(currentScrollTop);\n\n        // Clear previous timer\n        if (debounceTimerRef.current) {\n          clearTimeout(debounceTimerRef.current);\n        }\n\n        // Set new timer\n        debounceTimerRef.current = setTimeout(() => {\n          const scrollTop = container.scrollTop;\n          const itemHeight = 40; // h-10 = 40px\n          const containerHeight = container.clientHeight;\n          const dividerCenter = containerHeight / 2; // Divider lines ở giữa container\n\n          // Calculate which item is at the divider center\n          // Account for top spacer (h-30 = 120px)\n          const adjustedScrollTop = scrollTop - 120;\n          const dividerPosition = adjustedScrollTop + dividerCenter;\n\n          // Find the item whose center is closest to divider center\n          let closestItem = items[0];\n          let minDistance = Infinity;\n\n          items.forEach((item, index) => {\n            const itemTop = index * itemHeight;\n            const itemCenter = itemTop + itemHeight / 2;\n            const distance = Math.abs(itemCenter - dividerPosition);\n\n            if (distance < minDistance) {\n              minDistance = distance;\n              closestItem = item;\n            }\n          });\n\n          // Only trigger change if different from current value and not disabled\n          if (!isItemDisabled(closestItem)) {\n            // Always update if item is different, or snap to correct position\n            if (closestItem !== selectedValue) {\n              onChangeCol(closestItem);\n            } else {\n              // Re-trigger to ensure input reflects the snapped value\n              // This handles cases where user scrolled slightly but ended on same value\n              const itemIndex = items.indexOf(closestItem);\n              const targetScrollTop =\n                120 +\n                itemIndex * itemHeight -\n                containerHeight / 2 +\n                itemHeight / 2;\n\n              if (Math.abs(container.scrollTop - targetScrollTop) > 5) {\n                container.scrollTo({\n                  top: targetScrollTop,\n                  behavior: \"smooth\",\n                });\n              }\n            }\n          }\n        }, 100); // 100ms debounce for faster response\n      }, [items, selectedValue, onChangeCol, isItemDisabled, disabled]);\n\n      // Set up scroll listener\n      useEffect(() => {\n        const container = containerRef.current;\n        if (container) {\n          container.addEventListener(\"scroll\", handleScroll, { passive: true });\n          return () => {\n            container.removeEventListener(\"scroll\", handleScroll);\n            if (debounceTimerRef.current) {\n              clearTimeout(debounceTimerRef.current);\n            }\n          };\n        }\n      }, [handleScroll]);\n\n      // Scroll to selected value when it changes or on mount\n      useEffect(() => {\n        if (containerRef.current && selectedValue !== undefined) {\n          const itemIndex = items.indexOf(selectedValue);\n          if (itemIndex !== -1) {\n            const itemHeight = 40;\n            const containerHeight = containerRef.current.clientHeight;\n            const targetScrollTop =\n              120 +\n              itemIndex * itemHeight -\n              containerHeight / 2 +\n              itemHeight / 2;\n\n            containerRef.current.scrollTo({\n              top: targetScrollTop,\n              behavior: \"smooth\",\n            });\n          }\n        }\n      }, [selectedValue, items]);\n\n      // Cleanup on unmount\n      useEffect(() => {\n        return () => {\n          if (debounceTimerRef.current) {\n            clearTimeout(debounceTimerRef.current);\n          }\n        };\n      }, []);\n\n      const getItemStyle = (index: number, isSelected: boolean) => {\n        const itemHeight = 40;\n        const containerHeight = 256; // h-64 = 256px\n        const centerY = containerHeight / 2;\n        const itemCenterY = 120 + index * itemHeight + itemHeight / 2; // 120px spacer + item position\n        const distanceFromCenter = Math.abs(\n          itemCenterY - (scrollTop + centerY)\n        );\n        const maxDistance = containerHeight / 2;\n\n        // Calculate opacity and scale based on distance\n        const opacity = Math.max(\n          0.3,\n          1 - (distanceFromCenter / maxDistance) * 0.7\n        );\n        const fontSize = isSelected ? \"1.3rem\" : \"1rem\";\n\n        return {\n          opacity,\n          fontSize,\n          transition: \"opacity 0.2s ease, transform 0.2s ease\",\n        };\n      };\n\n      return (\n        <div className=\"ds:flex ds:flex-col ds:items-center ds:gap-2 ds:w-full ds:h-full ds:max-h-72\">\n          {timeLabel && (\n            <div className=\"ds:text-xs ds:font-semibold ds:text-muted-foreground ds:uppercase ds:p-2 ds:border-b ds:w-full ds:text-center ds:h-8\">\n              {timeLabel}\n            </div>\n          )}\n          <div\n            className={cn(\n              \"ds:relative ds:w-full\",\n              timeLabel ? \"ds:h-[calc(100%_-_2rem)]\" : \" ds:h-full\"\n            )}\n          >\n            {/* wheel style divider lines */}\n            <div className=\"ds:absolute ds:top-1/2 ds:left-0 ds:right-0 ds:h-10 ds:-translate-y-1/2 ds:border-t ds:border-b ds:border-border ds:pointer-events-none ds:z-10\" />\n\n            <div\n              ref={(el) => {\n                containerRef.current = el;\n                if (typeof ref === \"function\") {\n                  ref(el);\n                } else if (ref) {\n                  ref.current = el;\n                }\n              }}\n              className={cn(\n                \"ds:relative ds:h-full ds:w-full ds:min-w-20 ds:min-h-60 ds:overflow-y-scroll ds:scroll-smooth\",\n                \"ds:[&::-webkit-scrollbar]:w-1 ds:[&::-webkit-scrollbar-track]:bg-transparent\",\n                \"ds:[&::-webkit-scrollbar-thumb]:bg-border ds:[&::-webkit-scrollbar-thumb]:rounded\",\n                \"ds:flex ds:flex-col ds:snap-y ds:snap-mandatory\",\n                itemClassName\n              )}\n              style={{\n                maskImage: `linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%)`,\n                WebkitMaskImage: `linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%)`,\n              }}\n            >\n              {/* Spacer Top */}\n              <div className=\"ds:h-[calc(50%-1.25rem)] ds:flex-shrink-0\" />\n\n              {items.map((item, index) => {\n                const itemDisabled = isItemDisabled(item);\n                const isSelected =\n                  selectedValue !== undefined && item === selectedValue;\n                const itemStyle = getItemStyle(index, isSelected);\n\n                return (\n                  <div\n                    key={item}\n                    onClick={\n                      disabled || itemDisabled\n                        ? undefined\n                        : () => onChangeCol(item)\n                    }\n                    data-selected={isSelected || undefined}\n                    className={cn(\n                      \"ds:h-10 ds:flex-shrink-0 ds:flex ds:items-center ds:justify-center ds:transition-all ds:snap-center\",\n                      \"ds:cursor-pointer ds:text-lg ds:font-medium ds:select-none\",\n                      \"ds:disabled:opacity-30 ds:disabled:cursor-not-allowed ds:disabled:line-through\",\n                      isSelected\n                        ? `${getColorClass(color)} ds:font-bold`\n                        : \"ds:text-muted-foreground\"\n                    )}\n                    style={itemStyle}\n                  >\n                    {pad(item)}\n                  </div>\n                );\n              })}\n\n              {/* Spacer Bottom */}\n              <div className=\"ds:h-[calc(50%-1.25rem)] ds:flex-shrink-0\" />\n            </div>\n          </div>\n        </div>\n      );\n    }\n  )\n);\n\nTimeColumnwheel.displayName = \"TimeColumnwheel\";\n"],"names":["pad","num","getColorClass","color","TimeColumnwheel","memo","React","items","selectedValue","onChangeCol","timeLabel","itemClassName","isItemDisabled","disabled","ref","debounceTimerRef","useRef","containerRef","scrollTop","setScrollTop","useState","handleScroll","useCallback","container","currentScrollTop","itemHeight","containerHeight","dividerCenter","dividerPosition","closestItem","minDistance","item","index","itemCenter","distance","targetScrollTop","useEffect","itemIndex","getItemStyle","isSelected","itemCenterY","distanceFromCenter","maxDistance","jsxs","jsx","cn","el","itemDisabled","itemStyle"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAMA,IAAM,CAACC,MAAwB,OAAOA,CAAG,EAAE,SAAS,GAAG,GAAG,GAG1DC,IAAgB,CAACC,IAAuB,eAC3B;AAAA,EACf,SAAS;AAAA,EACT,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,YAAY;AAAA,GAEEA,CAAK,GAcVC,IAAkBC;AAAA,EAC7BC,EAAM;AAAA,IACJ,CACE;AAAA,MACE,OAAAC;AAAA,MACA,OAAOC;AAAA,MACP,UAAUC;AAAA,MACV,WAAAC;AAAA,MACA,eAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,UAAAC;AAAA,MACA,OAAAV,IAAQ;AAAA,IAAA,GAEVW,MACG;AACH,YAAMC,IAAmBC;AAAA,QACvB;AAAA,MAAA,GAEIC,IAAeD,EAA8B,IAAI,GACjD,CAACE,GAAWC,CAAY,IAAIC,EAAS,CAAC,GAGtCC,IAAeC,EAAY,MAAM;AACrC,YAAI,CAACL,EAAa,WAAWJ,EAAU;AAEvC,cAAMU,IAAYN,EAAa,SACzBO,IAAmBD,EAAU;AACnC,QAAAJ,EAAaK,CAAgB,GAGzBT,EAAiB,WACnB,aAAaA,EAAiB,OAAO,GAIvCA,EAAiB,UAAU,WAAW,MAAM;AAC1C,gBAAMG,IAAYK,EAAU,WACtBE,IAAa,IACbC,IAAkBH,EAAU,cAC5BI,IAAgBD,IAAkB,GAKlCE,IADoBV,IAAY,MACMS;AAG5C,cAAIE,IAActB,EAAM,CAAC,GACrBuB,IAAc;AAclB,cAZAvB,EAAM,QAAQ,CAACwB,GAAMC,MAAU;AAE7B,kBAAMC,IADUD,IAAQP,IACKA,IAAa,GACpCS,IAAW,KAAK,IAAID,IAAaL,CAAe;AAEtD,YAAIM,IAAWJ,MACbA,IAAcI,GACdL,IAAcE;AAAA,UAElB,CAAC,GAGG,CAACnB,EAAeiB,CAAW;AAE7B,gBAAIA,MAAgBrB;AAClB,cAAAC,EAAYoB,CAAW;AAAA,iBAClB;AAIL,oBAAMM,IACJ,MAFgB5B,EAAM,QAAQsB,CAAW,IAG7BJ,IACZC,IAAkB,IAClBD,IAAa;AAEf,cAAI,KAAK,IAAIF,EAAU,YAAYY,CAAe,IAAI,KACpDZ,EAAU,SAAS;AAAA,gBACjB,KAAKY;AAAA,gBACL,UAAU;AAAA,cAAA,CACX;AAAA,YAEL;AAAA,QAEJ,GAAG,GAAG;AAAA,MACR,GAAG,CAAC5B,GAAOC,GAAeC,GAAaG,GAAgBC,CAAQ,CAAC;AAGhE,MAAAuB,EAAU,MAAM;AACd,cAAMb,IAAYN,EAAa;AAC/B,YAAIM;AACF,iBAAAA,EAAU,iBAAiB,UAAUF,GAAc,EAAE,SAAS,IAAM,GAC7D,MAAM;AACX,YAAAE,EAAU,oBAAoB,UAAUF,CAAY,GAChDN,EAAiB,WACnB,aAAaA,EAAiB,OAAO;AAAA,UAEzC;AAAA,MAEJ,GAAG,CAACM,CAAY,CAAC,GAGjBe,EAAU,MAAM;AACd,YAAInB,EAAa,WAAWT,MAAkB,QAAW;AACvD,gBAAM6B,IAAY9B,EAAM,QAAQC,CAAa;AAC7C,cAAI6B,MAAc,IAAI;AAEpB,kBAAMX,IAAkBT,EAAa,QAAQ,cACvCkB,IACJ,MACAE,IAAY,KACZX,IAAkB,IAClB,KAAa;AAEf,YAAAT,EAAa,QAAQ,SAAS;AAAA,cAC5B,KAAKkB;AAAA,cACL,UAAU;AAAA,YAAA,CACX;AAAA,UACH;AAAA,QACF;AAAA,MACF,GAAG,CAAC3B,GAAeD,CAAK,CAAC,GAGzB6B,EAAU,MACD,MAAM;AACX,QAAIrB,EAAiB,WACnB,aAAaA,EAAiB,OAAO;AAAA,MAEzC,GACC,CAAA,CAAE;AAEL,YAAMuB,IAAe,CAACN,GAAeO,MAAwB;AAI3D,cAAMC,IAAc,MAAMR,IAAQ,KAAa,IACzCS,IAAqB,KAAK;AAAA,UAC9BD,KAAetB,IAAY;AAAA,QAAA,GAEvBwB,IAAc,MAAkB;AAStC,eAAO;AAAA,UACL,SAPc,KAAK;AAAA,YACnB;AAAA,YACA,IAAKD,IAAqBC,IAAe;AAAA,UAAA;AAAA,UAMzC,UAJeH,IAAa,WAAW;AAAA,UAKvC,YAAY;AAAA,QAAA;AAAA,MAEhB;AAEA,aACE,gBAAAI,EAAC,OAAA,EAAI,WAAU,gFACZ,UAAA;AAAA,QAAAjC,KACC,gBAAAkC,EAAC,OAAA,EAAI,WAAU,wHACZ,UAAAlC,GACH;AAAA,QAEF,gBAAAiC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWE;AAAA,cACT;AAAA,cACAnC,IAAY,6BAA6B;AAAA,YAAA;AAAA,YAI3C,UAAA;AAAA,cAAA,gBAAAkC,EAAC,OAAA,EAAI,WAAU,kJAAA,CAAkJ;AAAA,cAEjK,gBAAAD;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,KAAK,CAACG,MAAO;AACX,oBAAA7B,EAAa,UAAU6B,GACnB,OAAOhC,KAAQ,aACjBA,EAAIgC,CAAE,IACGhC,MACTA,EAAI,UAAUgC;AAAA,kBAElB;AAAA,kBACA,WAAWD;AAAA,oBACT;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACAlC;AAAA,kBAAA;AAAA,kBAEF,OAAO;AAAA,oBACL,WAAW;AAAA,oBACX,iBAAiB;AAAA,kBAAA;AAAA,kBAInB,UAAA;AAAA,oBAAA,gBAAAiC,EAAC,OAAA,EAAI,WAAU,4CAAA,CAA4C;AAAA,oBAE1DrC,EAAM,IAAI,CAACwB,GAAMC,MAAU;AAC1B,4BAAMe,IAAenC,EAAemB,CAAI,GAClCQ,IACJ/B,MAAkB,UAAauB,MAASvB,GACpCwC,IAAYV,EAAaN,GAAOO,CAAU;AAEhD,6BACE,gBAAAK;AAAA,wBAAC;AAAA,wBAAA;AAAA,0BAEC,SACE/B,KAAYkC,IACR,SACA,MAAMtC,EAAYsB,CAAI;AAAA,0BAE5B,iBAAeQ,KAAc;AAAA,0BAC7B,WAAWM;AAAA,4BACT;AAAA,4BACA;AAAA,4BACA;AAAA,4BACAN,IACI,GAAGrC,EAAcC,CAAK,CAAC,kBACvB;AAAA,0BAAA;AAAA,0BAEN,OAAO6C;AAAA,0BAEN,YAAIjB,CAAI;AAAA,wBAAA;AAAA,wBAjBJA;AAAA,sBAAA;AAAA,oBAoBX,CAAC;AAAA,oBAGD,gBAAAa,EAAC,OAAA,EAAI,WAAU,4CAAA,CAA4C;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YAC7D;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,GACF;AAAA,IAEJ;AAAA,EAAA;AAEJ;AAEAxC,EAAgB,cAAc;"}