@sth87/shadcn-design-system 0.0.35 → 0.1.0

package/dist/esm/components/Breadcrumb/Breadcrumb.js

@@ -1,4 +1,4 @@
-import { jsx as r, jsxs as l, Fragment as x } from "react/jsx-runtime";
+import { jsx as r, jsxs as d, Fragment as x } from "react/jsx-runtime";
 import o from "react";
 import { Breadcrumb as j, BreadcrumbList as H, BreadcrumbSeparator as b, BreadcrumbItem as u, BreadcrumbPage as L, BreadcrumbLink as O, BreadcrumbEllipsis as _ } from "../../packages/ui/src/components/breadcrumb.js";
 import { cn as F } from "../../packages/ui/src/lib/utils.js";
@@ -6,19 +6,19 @@ import { Home as v } from "lucide-react";
 import { Popover as R, PopoverTrigger as U, PopoverContent as A } from "../../packages/ui/src/components/popover.js";
 const T = {
   default: "",
-  primary: "text-primary [&_[data-slot=breadcrumb-link]:hover]:text-primary/80 [&_[data-slot=breadcrumb-page]]:text-primary",
-  secondary: "text-secondary [&_[data-slot=breadcrumb-link]:hover]:text-secondary/80 [&_[data-slot=breadcrumb-page]]:text-secondary",
-  accent: "text-accent [&_[data-slot=breadcrumb-link]:hover]:text-accent/80 [&_[data-slot=breadcrumb-page]]:text-accent",
-  destructive: "text-destructive [&_[data-slot=breadcrumb-link]:hover]:text-destructive/80 [&_[data-slot=breadcrumb-page]]:text-destructive",
-  muted: "text-muted-foreground [&_[data-slot=breadcrumb-link]:hover]:text-muted-foreground/80 [&_[data-slot=breadcrumb-page]]:text-muted-foreground",
-  success: "text-success [&_[data-slot=breadcrumb-link]:hover]:text-success/80 [&_[data-slot=breadcrumb-page]]:text-success",
-  error: "text-error [&_[data-slot=breadcrumb-link]:hover]:text-error/80 [&_[data-slot=breadcrumb-page]]:text-error",
-  warning: "text-warning [&_[data-slot=breadcrumb-link]:hover]:text-warning/80 [&_[data-slot=breadcrumb-page]]:text-warning"
+  primary: "ds:text-primary ds:[&_[data-slot=breadcrumb-link]:hover]:text-primary/80 ds:[&_[data-slot=breadcrumb-page]]:text-primary",
+  secondary: "ds:text-secondary ds:[&_[data-slot=breadcrumb-link]:hover]:text-secondary/80 ds:[&_[data-slot=breadcrumb-page]]:text-secondary",
+  accent: "ds:text-accent ds:[&_[data-slot=breadcrumb-link]:hover]:text-accent/80 ds:[&_[data-slot=breadcrumb-page]]:text-accent",
+  destructive: "ds:text-destructive ds:[&_[data-slot=breadcrumb-link]:hover]:text-destructive/80 ds:[&_[data-slot=breadcrumb-page]]:text-destructive",
+  muted: "ds:text-muted-foreground ds:[&_[data-slot=breadcrumb-link]:hover]:text-muted-foreground/80 ds:[&_[data-slot=breadcrumb-page]]:text-muted-foreground",
+  success: "ds:text-success ds:[&_[data-slot=breadcrumb-link]:hover]:text-success/80 ds:[&_[data-slot=breadcrumb-page]]:text-success",
+  error: "ds:text-error ds:[&_[data-slot=breadcrumb-link]:hover]:text-error/80 ds:[&_[data-slot=breadcrumb-page]]:text-error",
+  warning: "ds:text-warning ds:[&_[data-slot=breadcrumb-link]:hover]:text-warning/80 ds:[&_[data-slot=breadcrumb-page]]:text-warning"
 }, V = {
   default: "",
-  compact: "text-xs [&_[data-slot=breadcrumb-list]]:gap-1 [&_[data-slot=breadcrumb-separator]>svg]:size-3",
-  badge: "[&_[data-slot=breadcrumb-list]]:gap-1 [&_[data-slot=breadcrumb-item]]:border [&_[data-slot=breadcrumb-item]]:bg-muted [&_[data-slot=breadcrumb-item]]:px-2 [&_[data-slot=breadcrumb-item]]:py-0.5 [&_[data-slot=breadcrumb-item]]:rounded-full [&_[data-slot=breadcrumb-item]]:text-sm",
-  bordered: "border rounded-md px-3 py-2"
+  compact: "ds:text-xs ds:[&_[data-slot=breadcrumb-list]]:gap-1 ds:[&_[data-slot=breadcrumb-separator]>svg]:size-3",
+  badge: "ds:[&_[data-slot=breadcrumb-list]]:gap-1 ds:[&_[data-slot=breadcrumb-item]]:border ds:[&_[data-slot=breadcrumb-item]]:bg-muted ds:[&_[data-slot=breadcrumb-item]]:px-2 ds:[&_[data-slot=breadcrumb-item]]:py-0.5 ds:[&_[data-slot=breadcrumb-item]]:rounded-full ds:[&_[data-slot=breadcrumb-item]]:text-sm",
+  bordered: "ds:border ds:rounded-md ds:px-3 ds:py-2"
 }, $ = o.forwardRef(
   ({
     className: y,
@@ -32,34 +32,34 @@ const T = {
     showPopoverOnEllipsis: C = !1,
     ...E
   }, I) => {
-    const [P, z] = o.useState(!1), d = k;
+    const [P, z] = o.useState(!1), l = k;
     let t = [];
-    const a = h === !0 ? "label" : h;
-    a && (a === "label" ? t = [{ label: "Home", href: "/" }] : a === "icon" ? t = [{ icon: /* @__PURE__ */ r(v, { className: "size-4" }), href: "/" }] : a === "both" ? t = [
-      { label: "Home", icon: /* @__PURE__ */ r(v, { className: "size-4" }), href: "/" }
-    ] : typeof a == "object" && !o.isValidElement(a) ? t = [a] : t = [
-      { label: a, href: "/" }
+    const s = h === !0 ? "label" : h;
+    s && (s === "label" ? t = [{ label: "Home", href: "/" }] : s === "icon" ? t = [{ icon: /* @__PURE__ */ r(v, { className: "ds:size-4" }), href: "/" }] : s === "both" ? t = [
+      { label: "Home", icon: /* @__PURE__ */ r(v, { className: "ds:size-4" }), href: "/" }
+    ] : typeof s == "object" && !o.isValidElement(s) ? t = [s] : t = [
+      { label: s, href: "/" }
     ]);
     let c = [], m = !1, p = [];
     if (i === 0)
-      c = [...t, ...d];
+      c = [...t, ...l];
     else if (i) {
-      const e = i - t.length, s = e > 0 ? d.slice(-e) : [];
-      c = [...t, ...s], m = e > 0 && d.length > e && w, p = e > 0 ? d.slice(0, -e) : d;
+      const e = i - t.length, a = e > 0 ? l.slice(-e) : [];
+      c = [...t, ...a], m = e > 0 && l.length > e && w, p = e > 0 ? l.slice(0, -e) : l;
     } else
-      c = [...t, ...d];
-    const f = () => C ? /* @__PURE__ */ l(R, { open: P, onOpenChange: z, children: [
+      c = [...t, ...l];
+    const f = () => C ? /* @__PURE__ */ d(R, { open: P, onOpenChange: z, children: [
       /* @__PURE__ */ r(U, { asChild: !0, children: /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(_, {}) }) }),
-      /* @__PURE__ */ r(A, { className: "w-auto max-w-64 p-2", children: p.map((e, s) => /* @__PURE__ */ l(
+      /* @__PURE__ */ r(A, { className: "ds:w-auto ds:max-w-64 ds:p-2", children: p.map((e, a) => /* @__PURE__ */ d(
         "div",
         {
-          className: "flex items-center gap-2 py-1 px-3 rounded hover:bg-muted",
+          className: "ds:flex ds:items-center ds:gap-2 ds:py-1 ds:px-3 ds:rounded ds:hover:bg-muted",
           children: [
             e.icon,
-            e.label && /* @__PURE__ */ r("a", { href: e.href, className: "text-sm hover:underline", children: e.label })
+            e.label && /* @__PURE__ */ r("a", { href: e.href, className: "ds:text-sm ds:hover:underline", children: e.label })
           ]
         },
-        s
+        a
       )) })
     ] }) : /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(_, {}) });
     return /* @__PURE__ */ r(
@@ -68,27 +68,27 @@ const T = {
         ref: I,
         className: F(V[B], y),
         ...E,
-        children: /* @__PURE__ */ l(H, { className: T[N], children: [
-          m && t.length === 0 && /* @__PURE__ */ l(x, { children: [
+        children: /* @__PURE__ */ d(H, { className: T[N], children: [
+          m && t.length === 0 && /* @__PURE__ */ d(x, { children: [
             f(),
             /* @__PURE__ */ r(b, { children: n })
           ] }),
-          c.map((e, s) => {
-            const g = s === c.length - 1, S = m && s === 0 && t.length > 0;
-            return /* @__PURE__ */ l(o.Fragment, { children: [
-              /* @__PURE__ */ r(u, { children: g ? /* @__PURE__ */ r(L, { children: /* @__PURE__ */ l("div", { className: "flex items-center gap-1", children: [
+          c.map((e, a) => {
+            const g = a === c.length - 1, S = m && a === 0 && t.length > 0;
+            return /* @__PURE__ */ d(o.Fragment, { children: [
+              /* @__PURE__ */ r(u, { children: g ? /* @__PURE__ */ r(L, { children: /* @__PURE__ */ d("div", { className: "ds:flex ds:items-center ds:gap-1", children: [
                 e.icon,
                 e.label
-              ] }) }) : /* @__PURE__ */ r(O, { href: e.href, children: /* @__PURE__ */ l("div", { className: "flex items-center gap-1", children: [
+              ] }) }) : /* @__PURE__ */ r(O, { href: e.href, children: /* @__PURE__ */ d("div", { className: "ds:flex ds:items-center ds:gap-1", children: [
                 e.icon,
                 e.label
               ] }) }) }),
-              S && /* @__PURE__ */ l(x, { children: [
+              S && /* @__PURE__ */ d(x, { children: [
                 /* @__PURE__ */ r(b, { children: n }),
                 f()
               ] }),
               !g && /* @__PURE__ */ r(b, { children: n })
-            ] }, s);
+            ] }, a);
           })
         ] })
       }

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

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","sources":["../../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  Breadcrumb as SBreadcrumb,\n  BreadcrumbList as SBreadcrumbList,\n  BreadcrumbItem as SBreadcrumbItem,\n  BreadcrumbLink as SBreadcrumbLink,\n  BreadcrumbPage as SBreadcrumbPage,\n  BreadcrumbSeparator as SBreadcrumbSeparator,\n  BreadcrumbEllipsis as SBreadcrumbEllipsis,\n} from \"@dsui/ui/components/breadcrumb\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport { Home } from \"lucide-react\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@dsui/ui/components/popover\";\n\nexport type BreadcrumbItemType = {\n  label?: React.ReactNode;\n  href?: string;\n  icon?: React.ReactNode;\n};\n\nexport type BreadcrumbProps = React.ComponentProps<\"nav\"> & {\n  variant?: \"default\" | \"compact\" | \"badge\" | \"bordered\";\n  color?:\n    | \"default\"\n    | \"primary\"\n    | \"secondary\"\n    | \"accent\"\n    | \"destructive\"\n    | \"muted\"\n    | \"success\"\n    | \"error\"\n    | \"warning\";\n  items: BreadcrumbItemType[];\n  separator?: React.ReactNode;\n  maxItems?: number;\n  showEllipsis?: boolean;\n  showHome?:\n    | boolean\n    | \"label\"\n    | \"icon\"\n    | \"both\"\n    | React.ReactNode\n    | { label?: React.ReactNode; icon?: React.ReactNode; href?: string };\n  showPopoverOnEllipsis?: boolean;\n};\n\nconst colorClasses = {\n  default: \"\",\n  primary:\n    \"text-primary [&_[data-slot=breadcrumb-link]:hover]:text-primary/80 [&_[data-slot=breadcrumb-page]]:text-primary\",\n  secondary:\n    \"text-secondary [&_[data-slot=breadcrumb-link]:hover]:text-secondary/80 [&_[data-slot=breadcrumb-page]]:text-secondary\",\n  accent:\n    \"text-accent [&_[data-slot=breadcrumb-link]:hover]:text-accent/80 [&_[data-slot=breadcrumb-page]]:text-accent\",\n  destructive:\n    \"text-destructive [&_[data-slot=breadcrumb-link]:hover]:text-destructive/80 [&_[data-slot=breadcrumb-page]]:text-destructive\",\n  muted:\n    \"text-muted-foreground [&_[data-slot=breadcrumb-link]:hover]:text-muted-foreground/80 [&_[data-slot=breadcrumb-page]]:text-muted-foreground\",\n  success:\n    \"text-success [&_[data-slot=breadcrumb-link]:hover]:text-success/80 [&_[data-slot=breadcrumb-page]]:text-success\",\n  error:\n    \"text-error [&_[data-slot=breadcrumb-link]:hover]:text-error/80 [&_[data-slot=breadcrumb-page]]:text-error\",\n  warning:\n    \"text-warning [&_[data-slot=breadcrumb-link]:hover]:text-warning/80 [&_[data-slot=breadcrumb-page]]:text-warning\",\n};\n\nconst variantClasses = {\n  default: \"\",\n  compact:\n    \"text-xs [&_[data-slot=breadcrumb-list]]:gap-1 [&_[data-slot=breadcrumb-separator]>svg]:size-3\",\n  badge:\n    \"[&_[data-slot=breadcrumb-list]]:gap-1 [&_[data-slot=breadcrumb-item]]:border [&_[data-slot=breadcrumb-item]]:bg-muted [&_[data-slot=breadcrumb-item]]:px-2 [&_[data-slot=breadcrumb-item]]:py-0.5 [&_[data-slot=breadcrumb-item]]:rounded-full [&_[data-slot=breadcrumb-item]]:text-sm\",\n  bordered: \"border rounded-md px-3 py-2\",\n};\n\nconst Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      color = \"default\",\n      items,\n      separator,\n      maxItems,\n      showEllipsis = true,\n      showHome = \"label\",\n      showPopoverOnEllipsis = false,\n      ...props\n    },\n    ref\n  ) => {\n    const [popoverOpen, setPopoverOpen] = React.useState(false);\n    const userItems = items;\n    let homeItem: BreadcrumbItemType[] = [];\n    const normalizedShowHome = showHome === true ? \"label\" : showHome;\n    if (normalizedShowHome) {\n      if (normalizedShowHome === \"label\") {\n        homeItem = [{ label: \"Home\", href: \"/\" }];\n      } else if (normalizedShowHome === \"icon\") {\n        homeItem = [{ icon: <Home className=\"size-4\" />, href: \"/\" }];\n      } else if (normalizedShowHome === \"both\") {\n        homeItem = [\n          { label: \"Home\", icon: <Home className=\"size-4\" />, href: \"/\" },\n        ];\n      } else if (\n        typeof normalizedShowHome === \"object\" &&\n        !React.isValidElement(normalizedShowHome)\n      ) {\n        // custom object\n        homeItem = [normalizedShowHome as BreadcrumbItemType];\n      } else {\n        // ReactNode\n        homeItem = [\n          { label: normalizedShowHome as React.ReactNode, href: \"/\" },\n        ];\n      }\n    }\n    // Calculate which items to display\n    let displayItems: BreadcrumbItemType[] = [];\n    let hasEllipsis = false;\n    let hiddenItems: BreadcrumbItemType[] = [];\n\n    if (maxItems === 0) {\n      displayItems = [...homeItem, ...userItems];\n    } else if (maxItems) {\n      const numUserItems = maxItems - homeItem.length;\n      const truncatedUserItems =\n        numUserItems > 0 ? userItems.slice(-numUserItems) : [];\n      displayItems = [...homeItem, ...truncatedUserItems];\n      hasEllipsis =\n        numUserItems > 0 && userItems.length > numUserItems && showEllipsis;\n      hiddenItems =\n        numUserItems > 0 ? userItems.slice(0, -numUserItems) : userItems;\n    } else {\n      displayItems = [...homeItem, ...userItems];\n    }\n\n    const renderEllipsis = () => {\n      if (showPopoverOnEllipsis) {\n        return (\n          <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>\n            <PopoverTrigger asChild>\n              <SBreadcrumbItem>\n                <SBreadcrumbEllipsis />\n              </SBreadcrumbItem>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-auto max-w-64 p-2\">\n              {hiddenItems.map((item, index) => (\n                <div\n                  key={index}\n                  className=\"flex items-center gap-2 py-1 px-3 rounded hover:bg-muted\"\n                >\n                  {item.icon}\n                  {item.label && (\n                    <a href={item.href} className=\"text-sm hover:underline\">\n                      {item.label}\n                    </a>\n                  )}\n                </div>\n              ))}\n            </PopoverContent>\n          </Popover>\n        );\n      }\n      return (\n        <SBreadcrumbItem>\n          <SBreadcrumbEllipsis />\n        </SBreadcrumbItem>\n      );\n    };\n\n    return (\n      <SBreadcrumb\n        ref={ref}\n        className={cn(variantClasses[variant], className)}\n        {...props}\n      >\n        <SBreadcrumbList className={colorClasses[color]}>\n          {hasEllipsis && homeItem.length === 0 && (\n            <>\n              {renderEllipsis()}\n              <SBreadcrumbSeparator>{separator}</SBreadcrumbSeparator>\n            </>\n          )}\n          {displayItems.map((item, index) => {\n            const isLast = index === displayItems.length - 1;\n            const shouldShowEllipsisAfter =\n              hasEllipsis && index === 0 && homeItem.length > 0;\n            return (\n              <React.Fragment key={index}>\n                <SBreadcrumbItem>\n                  {isLast ? (\n                    <SBreadcrumbPage>\n                      <div className=\"flex items-center gap-1\">\n                        {item.icon}\n                        {item.label}\n                      </div>\n                    </SBreadcrumbPage>\n                  ) : (\n                    <SBreadcrumbLink href={item.href}>\n                      <div className=\"flex items-center gap-1\">\n                        {item.icon}\n                        {item.label}\n                      </div>\n                    </SBreadcrumbLink>\n                  )}\n                </SBreadcrumbItem>\n                {shouldShowEllipsisAfter && (\n                  <>\n                    <SBreadcrumbSeparator>{separator}</SBreadcrumbSeparator>\n                    {renderEllipsis()}\n                  </>\n                )}\n                {!isLast && (\n                  <SBreadcrumbSeparator>{separator}</SBreadcrumbSeparator>\n                )}\n              </React.Fragment>\n            );\n          })}\n        </SBreadcrumbList>\n      </SBreadcrumb>\n    );\n  }\n);\n\nBreadcrumb.displayName = \"Breadcrumb\";\n\nexport default Breadcrumb;\n"],"names":["colorClasses","variantClasses","Breadcrumb","React","className","variant","color","items","separator","maxItems","showEllipsis","showHome","showPopoverOnEllipsis","props","ref","popoverOpen","setPopoverOpen","userItems","homeItem","normalizedShowHome","jsx","Home","displayItems","hasEllipsis","hiddenItems","numUserItems","truncatedUserItems","renderEllipsis","jsxs","Popover","PopoverTrigger","SBreadcrumbItem","SBreadcrumbEllipsis","PopoverContent","item","index","SBreadcrumb","cn","SBreadcrumbList","Fragment","SBreadcrumbSeparator","isLast","shouldShowEllipsisAfter","SBreadcrumbPage","SBreadcrumbLink"],"mappings":"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"}
+{"version":3,"file":"Breadcrumb.js","sources":["../../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  Breadcrumb as SBreadcrumb,\n  BreadcrumbList as SBreadcrumbList,\n  BreadcrumbItem as SBreadcrumbItem,\n  BreadcrumbLink as SBreadcrumbLink,\n  BreadcrumbPage as SBreadcrumbPage,\n  BreadcrumbSeparator as SBreadcrumbSeparator,\n  BreadcrumbEllipsis as SBreadcrumbEllipsis,\n} from \"@dsui/ui/components/breadcrumb\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport { Home } from \"lucide-react\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@dsui/ui/components/popover\";\n\nexport type BreadcrumbItemType = {\n  label?: React.ReactNode;\n  href?: string;\n  icon?: React.ReactNode;\n};\n\nexport type BreadcrumbProps = React.ComponentProps<\"nav\"> & {\n  variant?: \"default\" | \"compact\" | \"badge\" | \"bordered\";\n  color?:\n    | \"default\"\n    | \"primary\"\n    | \"secondary\"\n    | \"accent\"\n    | \"destructive\"\n    | \"muted\"\n    | \"success\"\n    | \"error\"\n    | \"warning\";\n  items: BreadcrumbItemType[];\n  separator?: React.ReactNode;\n  maxItems?: number;\n  showEllipsis?: boolean;\n  showHome?:\n    | boolean\n    | \"label\"\n    | \"icon\"\n    | \"both\"\n    | React.ReactNode\n    | { label?: React.ReactNode; icon?: React.ReactNode; href?: string };\n  showPopoverOnEllipsis?: boolean;\n};\n\nconst colorClasses = {\n  default: \"\",\n  primary:\n    \"ds:text-primary ds:[&_[data-slot=breadcrumb-link]:hover]:text-primary/80 ds:[&_[data-slot=breadcrumb-page]]:text-primary\",\n  secondary:\n    \"ds:text-secondary ds:[&_[data-slot=breadcrumb-link]:hover]:text-secondary/80 ds:[&_[data-slot=breadcrumb-page]]:text-secondary\",\n  accent:\n    \"ds:text-accent ds:[&_[data-slot=breadcrumb-link]:hover]:text-accent/80 ds:[&_[data-slot=breadcrumb-page]]:text-accent\",\n  destructive:\n    \"ds:text-destructive ds:[&_[data-slot=breadcrumb-link]:hover]:text-destructive/80 ds:[&_[data-slot=breadcrumb-page]]:text-destructive\",\n  muted:\n    \"ds:text-muted-foreground ds:[&_[data-slot=breadcrumb-link]:hover]:text-muted-foreground/80 ds:[&_[data-slot=breadcrumb-page]]:text-muted-foreground\",\n  success:\n    \"ds:text-success ds:[&_[data-slot=breadcrumb-link]:hover]:text-success/80 ds:[&_[data-slot=breadcrumb-page]]:text-success\",\n  error:\n    \"ds:text-error ds:[&_[data-slot=breadcrumb-link]:hover]:text-error/80 ds:[&_[data-slot=breadcrumb-page]]:text-error\",\n  warning:\n    \"ds:text-warning ds:[&_[data-slot=breadcrumb-link]:hover]:text-warning/80 ds:[&_[data-slot=breadcrumb-page]]:text-warning\",\n};\n\nconst variantClasses = {\n  default: \"\",\n  compact:\n    \"ds:text-xs ds:[&_[data-slot=breadcrumb-list]]:gap-1 ds:[&_[data-slot=breadcrumb-separator]>svg]:size-3\",\n  badge:\n    \"ds:[&_[data-slot=breadcrumb-list]]:gap-1 ds:[&_[data-slot=breadcrumb-item]]:border ds:[&_[data-slot=breadcrumb-item]]:bg-muted ds:[&_[data-slot=breadcrumb-item]]:px-2 ds:[&_[data-slot=breadcrumb-item]]:py-0.5 ds:[&_[data-slot=breadcrumb-item]]:rounded-full ds:[&_[data-slot=breadcrumb-item]]:text-sm\",\n  bordered: \"ds:border ds:rounded-md ds:px-3 ds:py-2\",\n};\n\nconst Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      color = \"default\",\n      items,\n      separator,\n      maxItems,\n      showEllipsis = true,\n      showHome = \"label\",\n      showPopoverOnEllipsis = false,\n      ...props\n    },\n    ref\n  ) => {\n    const [popoverOpen, setPopoverOpen] = React.useState(false);\n    const userItems = items;\n    let homeItem: BreadcrumbItemType[] = [];\n    const normalizedShowHome = showHome === true ? \"label\" : showHome;\n    if (normalizedShowHome) {\n      if (normalizedShowHome === \"label\") {\n        homeItem = [{ label: \"Home\", href: \"/\" }];\n      } else if (normalizedShowHome === \"icon\") {\n        homeItem = [{ icon: <Home className=\"ds:size-4\" />, href: \"/\" }];\n      } else if (normalizedShowHome === \"both\") {\n        homeItem = [\n          { label: \"Home\", icon: <Home className=\"ds:size-4\" />, href: \"/\" },\n        ];\n      } else if (\n        typeof normalizedShowHome === \"object\" &&\n        !React.isValidElement(normalizedShowHome)\n      ) {\n        // custom object\n        homeItem = [normalizedShowHome as BreadcrumbItemType];\n      } else {\n        // ReactNode\n        homeItem = [\n          { label: normalizedShowHome as React.ReactNode, href: \"/\" },\n        ];\n      }\n    }\n    // Calculate which items to display\n    let displayItems: BreadcrumbItemType[] = [];\n    let hasEllipsis = false;\n    let hiddenItems: BreadcrumbItemType[] = [];\n\n    if (maxItems === 0) {\n      displayItems = [...homeItem, ...userItems];\n    } else if (maxItems) {\n      const numUserItems = maxItems - homeItem.length;\n      const truncatedUserItems =\n        numUserItems > 0 ? userItems.slice(-numUserItems) : [];\n      displayItems = [...homeItem, ...truncatedUserItems];\n      hasEllipsis =\n        numUserItems > 0 && userItems.length > numUserItems && showEllipsis;\n      hiddenItems =\n        numUserItems > 0 ? userItems.slice(0, -numUserItems) : userItems;\n    } else {\n      displayItems = [...homeItem, ...userItems];\n    }\n\n    const renderEllipsis = () => {\n      if (showPopoverOnEllipsis) {\n        return (\n          <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>\n            <PopoverTrigger asChild>\n              <SBreadcrumbItem>\n                <SBreadcrumbEllipsis />\n              </SBreadcrumbItem>\n            </PopoverTrigger>\n            <PopoverContent className=\"ds:w-auto ds:max-w-64 ds:p-2\">\n              {hiddenItems.map((item, index) => (\n                <div\n                  key={index}\n                  className=\"ds:flex ds:items-center ds:gap-2 ds:py-1 ds:px-3 ds:rounded ds:hover:bg-muted\"\n                >\n                  {item.icon}\n                  {item.label && (\n                    <a href={item.href} className=\"ds:text-sm ds:hover:underline\">\n                      {item.label}\n                    </a>\n                  )}\n                </div>\n              ))}\n            </PopoverContent>\n          </Popover>\n        );\n      }\n      return (\n        <SBreadcrumbItem>\n          <SBreadcrumbEllipsis />\n        </SBreadcrumbItem>\n      );\n    };\n\n    return (\n      <SBreadcrumb\n        ref={ref}\n        className={cn(variantClasses[variant], className)}\n        {...props}\n      >\n        <SBreadcrumbList className={colorClasses[color]}>\n          {hasEllipsis && homeItem.length === 0 && (\n            <>\n              {renderEllipsis()}\n              <SBreadcrumbSeparator>{separator}</SBreadcrumbSeparator>\n            </>\n          )}\n          {displayItems.map((item, index) => {\n            const isLast = index === displayItems.length - 1;\n            const shouldShowEllipsisAfter =\n              hasEllipsis && index === 0 && homeItem.length > 0;\n            return (\n              <React.Fragment key={index}>\n                <SBreadcrumbItem>\n                  {isLast ? (\n                    <SBreadcrumbPage>\n                      <div className=\"ds:flex ds:items-center ds:gap-1\">\n                        {item.icon}\n                        {item.label}\n                      </div>\n                    </SBreadcrumbPage>\n                  ) : (\n                    <SBreadcrumbLink href={item.href}>\n                      <div className=\"ds:flex ds:items-center ds:gap-1\">\n                        {item.icon}\n                        {item.label}\n                      </div>\n                    </SBreadcrumbLink>\n                  )}\n                </SBreadcrumbItem>\n                {shouldShowEllipsisAfter && (\n                  <>\n                    <SBreadcrumbSeparator>{separator}</SBreadcrumbSeparator>\n                    {renderEllipsis()}\n                  </>\n                )}\n                {!isLast && (\n                  <SBreadcrumbSeparator>{separator}</SBreadcrumbSeparator>\n                )}\n              </React.Fragment>\n            );\n          })}\n        </SBreadcrumbList>\n      </SBreadcrumb>\n    );\n  }\n);\n\nBreadcrumb.displayName = \"Breadcrumb\";\n\nexport default Breadcrumb;\n"],"names":["colorClasses","variantClasses","Breadcrumb","React","className","variant","color","items","separator","maxItems","showEllipsis","showHome","showPopoverOnEllipsis","props","ref","popoverOpen","setPopoverOpen","userItems","homeItem","normalizedShowHome","jsx","Home","displayItems","hasEllipsis","hiddenItems","numUserItems","truncatedUserItems","renderEllipsis","jsxs","Popover","PopoverTrigger","SBreadcrumbItem","SBreadcrumbEllipsis","PopoverContent","item","index","SBreadcrumb","cn","SBreadcrumbList","Fragment","SBreadcrumbSeparator","isLast","shouldShowEllipsisAfter","SBreadcrumbPage","SBreadcrumbLink"],"mappings":"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"}

package/dist/esm/components/Button/Button.js

@@ -1,19 +1,19 @@
-import { jsxs as d, Fragment as u, jsx as e } from "react/jsx-runtime";
+import { jsxs as d, Fragment as u, jsx as o } from "react/jsx-runtime";
 import h, { useMemo as f } from "react";
 import { buttonVariants as p, Button as N } from "../../packages/ui/src/components/button.js";
 import { cn as C } from "../../packages/ui/src/lib/utils.js";
 import { LoaderCircle as y } from "lucide-react";
 import { animationEffect as g } from "../../utils/animations.js";
 const v = h.forwardRef(
-  (s, i) => {
+  (e, i) => {
     const {
       variant: n = "solid",
       size: r = "normal",
       color: l = "muted",
-      animation: o,
+      animation: s,
       ...t
-    } = s, a = f(() => g({
-      animation: o,
+    } = e, a = f(() => g({
+      animation: s,
       children: t?.children,
       className: t?.className,
       rootClassName: p({
@@ -22,17 +22,17 @@ const v = h.forwardRef(
       }),
       variantType: n,
       ...t
-    }), [o, t, r, n]), m = (a?.children ? !0 : t.asChild) && !t?.isLoading, c = t?.isLoading ? /* @__PURE__ */ d(u, { children: [
-      /* @__PURE__ */ e(y, { className: "animate-spin" }),
+    }), [s, t, r, n]), m = (a?.children ? !0 : t.asChild) && !t?.isLoading, c = t?.isLoading ? /* @__PURE__ */ d(u, { children: [
+      /* @__PURE__ */ o(y, { className: "ds:animate-spin" }),
       a?.children ?? t.children ?? null
     ] }) : a?.children ?? t.children ?? null;
-    return /* @__PURE__ */ e(
+    return /* @__PURE__ */ o(
       N,
       {
         ref: i,
         ...t,
         className: C(
-          "cursor-pointer group",
+          "ds:cursor-pointer ds:group",
           t?.className,
           a?.className
         ),

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n  buttonVariants,\n  Button as SButton,\n  type ButtonProps as SButtonProps,\n} from \"@dsui/ui/components/button\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport type { ButtonAnimation } from \"@/types/variables\";\nimport { LoaderCircle } from \"lucide-react\";\nimport { animationEffect } from \"@/utils/animations\";\n\nexport type ButtonProps = SButtonProps & {\n  animation?: ButtonAnimation;\n  isLoading?: boolean;\n};\n\ntype AnimResult = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  variant?: SButtonProps[\"variant\"];\n};\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (props, ref) => {\n    const {\n      variant = \"solid\",\n      size = \"normal\",\n      color = \"muted\",\n      animation,\n      ...rest\n    } = props;\n\n    const buttonAnimation = useMemo<AnimResult | null>(() => {\n      return animationEffect<ButtonAnimation, SButtonProps[\"variant\"]>({\n        animation,\n        children: rest?.children,\n        className: rest?.className,\n        rootClassName: buttonVariants({\n          variant: variant,\n          size: size,\n        }),\n        variantType: variant,\n        ...rest,\n      });\n    }, [animation, rest, size, variant]);\n\n    // Disable asChild when loading to avoid React.Children.only error\n    const shouldUseAsChild =\n      (buttonAnimation?.children ? true : rest.asChild) && !rest?.isLoading;\n\n    const buttonContent = rest?.isLoading ? (\n      <>\n        <LoaderCircle className=\"animate-spin\" />\n        {\n          (buttonAnimation?.children ??\n            rest.children ??\n            null) as SButtonProps[\"children\"]\n        }\n      </>\n    ) : (\n      ((buttonAnimation?.children ??\n        rest.children ??\n        null) as SButtonProps[\"children\"])\n    );\n\n    return (\n      <SButton\n        ref={ref}\n        {...rest}\n        className={cn(\n          \"cursor-pointer group\",\n          rest?.className,\n          buttonAnimation?.className\n        )}\n        asChild={shouldUseAsChild}\n        style={{ ...(rest.style || {}), ...(buttonAnimation?.style || {}) }}\n        variant={buttonAnimation?.variant ?? variant}\n        color={color}\n        size={size}\n      >\n        {buttonContent}\n      </SButton>\n    );\n  }\n);\n\nButton.displayName = \"Button\";\nexport default Button;\n"],"names":["Button","React","props","ref","variant","size","color","animation","rest","buttonAnimation","useMemo","animationEffect","buttonVariants","shouldUseAsChild","buttonContent","jsxs","Fragment","jsx","LoaderCircle","SButton","cn"],"mappings":";;;;;;AAuBA,MAAMA,IAASC,EAAM;AAAA,EACnB,CAACC,GAAOC,MAAQ;AACd,UAAM;AAAA,MACJ,SAAAC,IAAU;AAAA,MACV,MAAAC,IAAO;AAAA,MACP,OAAAC,IAAQ;AAAA,MACR,WAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDN,GAEEO,IAAkBC,EAA2B,MAC1CC,EAA0D;AAAA,MAC/D,WAAAJ;AAAA,MACA,UAAUC,GAAM;AAAA,MAChB,WAAWA,GAAM;AAAA,MACjB,eAAeI,EAAe;AAAA,QAC5B,SAAAR;AAAA,QACA,MAAAC;AAAA,MAAA,CACD;AAAA,MACD,aAAaD;AAAA,MACb,GAAGI;AAAA,IAAA,CACJ,GACA,CAACD,GAAWC,GAAMH,GAAMD,CAAO,CAAC,GAG7BS,KACHJ,GAAiB,WAAW,KAAOD,EAAK,YAAY,CAACA,GAAM,WAExDM,IAAgBN,GAAM,YAC1B,gBAAAO,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAa,WAAU,eAAA,CAAe;AAAA,MAEpCT,GAAiB,YAChBD,EAAK,YACL;AAAA,IAAA,EAAA,CAEN,IAEEC,GAAiB,YACjBD,EAAK,YACL;AAGJ,WACE,gBAAAS;AAAA,MAACE;AAAAA,MAAA;AAAA,QACC,KAAAhB;AAAA,QACC,GAAGK;AAAA,QACJ,WAAWY;AAAA,UACT;AAAA,UACAZ,GAAM;AAAA,UACNC,GAAiB;AAAA,QAAA;AAAA,QAEnB,SAASI;AAAA,QACT,OAAO,EAAE,GAAIL,EAAK,SAAS,CAAA,GAAK,GAAIC,GAAiB,SAAS,GAAC;AAAA,QAC/D,SAASA,GAAiB,WAAWL;AAAA,QACrC,OAAAE;AAAA,QACA,MAAAD;AAAA,QAEC,UAAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEAd,EAAO,cAAc;"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n  buttonVariants,\n  Button as SButton,\n  type ButtonProps as SButtonProps,\n} from \"@dsui/ui/components/button\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport type { ButtonAnimation } from \"@/types/variables\";\nimport { LoaderCircle } from \"lucide-react\";\nimport { animationEffect } from \"@/utils/animations\";\n\nexport type ButtonProps = SButtonProps & {\n  animation?: ButtonAnimation;\n  isLoading?: boolean;\n};\n\ntype AnimResult = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  variant?: SButtonProps[\"variant\"];\n};\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (props, ref) => {\n    const {\n      variant = \"solid\",\n      size = \"normal\",\n      color = \"muted\",\n      animation,\n      ...rest\n    } = props;\n\n    const buttonAnimation = useMemo<AnimResult | null>(() => {\n      return animationEffect<ButtonAnimation, SButtonProps[\"variant\"]>({\n        animation,\n        children: rest?.children,\n        className: rest?.className,\n        rootClassName: buttonVariants({\n          variant: variant,\n          size: size,\n        }),\n        variantType: variant,\n        ...rest,\n      });\n    }, [animation, rest, size, variant]);\n\n    // Disable asChild when loading to avoid React.Children.only error\n    const shouldUseAsChild =\n      (buttonAnimation?.children ? true : rest.asChild) && !rest?.isLoading;\n\n    const buttonContent = rest?.isLoading ? (\n      <>\n        <LoaderCircle className=\"ds:animate-spin\" />\n        {\n          (buttonAnimation?.children ??\n            rest.children ??\n            null) as SButtonProps[\"children\"]\n        }\n      </>\n    ) : (\n      ((buttonAnimation?.children ??\n        rest.children ??\n        null) as SButtonProps[\"children\"])\n    );\n\n    return (\n      <SButton\n        ref={ref}\n        {...rest}\n        className={cn(\n          \"ds:cursor-pointer ds:group\",\n          rest?.className,\n          buttonAnimation?.className\n        )}\n        asChild={shouldUseAsChild}\n        style={{ ...(rest.style || {}), ...(buttonAnimation?.style || {}) }}\n        variant={buttonAnimation?.variant ?? variant}\n        color={color}\n        size={size}\n      >\n        {buttonContent}\n      </SButton>\n    );\n  }\n);\n\nButton.displayName = \"Button\";\nexport default Button;\n"],"names":["Button","React","props","ref","variant","size","color","animation","rest","buttonAnimation","useMemo","animationEffect","buttonVariants","shouldUseAsChild","buttonContent","jsxs","Fragment","jsx","LoaderCircle","SButton","cn"],"mappings":";;;;;;AAuBA,MAAMA,IAASC,EAAM;AAAA,EACnB,CAACC,GAAOC,MAAQ;AACd,UAAM;AAAA,MACJ,SAAAC,IAAU;AAAA,MACV,MAAAC,IAAO;AAAA,MACP,OAAAC,IAAQ;AAAA,MACR,WAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDN,GAEEO,IAAkBC,EAA2B,MAC1CC,EAA0D;AAAA,MAC/D,WAAAJ;AAAA,MACA,UAAUC,GAAM;AAAA,MAChB,WAAWA,GAAM;AAAA,MACjB,eAAeI,EAAe;AAAA,QAC5B,SAAAR;AAAA,QACA,MAAAC;AAAA,MAAA,CACD;AAAA,MACD,aAAaD;AAAA,MACb,GAAGI;AAAA,IAAA,CACJ,GACA,CAACD,GAAWC,GAAMH,GAAMD,CAAO,CAAC,GAG7BS,KACHJ,GAAiB,WAAW,KAAOD,EAAK,YAAY,CAACA,GAAM,WAExDM,IAAgBN,GAAM,YAC1B,gBAAAO,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAa,WAAU,kBAAA,CAAkB;AAAA,MAEvCT,GAAiB,YAChBD,EAAK,YACL;AAAA,IAAA,EAAA,CAEN,IAEEC,GAAiB,YACjBD,EAAK,YACL;AAGJ,WACE,gBAAAS;AAAA,MAACE;AAAAA,MAAA;AAAA,QACC,KAAAhB;AAAA,QACC,GAAGK;AAAA,QACJ,WAAWY;AAAA,UACT;AAAA,UACAZ,GAAM;AAAA,UACNC,GAAiB;AAAA,QAAA;AAAA,QAEnB,SAASI;AAAA,QACT,OAAO,EAAE,GAAIL,EAAK,SAAS,CAAA,GAAK,GAAIC,GAAiB,SAAS,GAAC;AAAA,QAC/D,SAASA,GAAiB,WAAWL;AAAA,QACrC,OAAAE;AAAA,QACA,MAAAD;AAAA,QAEC,UAAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEAd,EAAO,cAAc;"}

package/dist/esm/components/Calendar/Calendar.js

@@ -1,4 +1,4 @@
-import { jsx as d } from "react/jsx-runtime";
+import { jsx as c } from "react/jsx-runtime";
 import { CalendarDayButton as s, Calendar as f } from "../../packages/ui/src/components/calendar.js";
 import "@radix-ui/react-slot";
 import "../../packages/ui/src/components/button.js";
@@ -45,7 +45,7 @@ function Y({
   ...l
 }) {
   const r = o || (t === "en" ? C : x);
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ c(
     f,
     {
       ...l,
@@ -55,11 +55,11 @@ function Y({
       variant: n,
       color: e,
       formatters: {
-        formatMonthDropdown: (c) => c.toLocaleString(r.code, { month: "short" }),
+        formatMonthDropdown: (d) => d.toLocaleString(r.code, { month: "short" }),
         ...i
       },
       className: u(
-        "mx-auto [--cell-size:clamp(0px,calc(100vw/7.5),40px)]",
+        "ds:mx-auto ds:[--cell-size:clamp(0px,calc(100vw/7.5),40px)]",
         m
       )
     }

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sources":["../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import {\n  CalendarDayButton as SCalendarDayButton,\n  type CalendarDayButtonProps as SCalendarDayButtonProps,\n  Calendar as SCalendar,\n  type CalendarProps as SCalendarProps,\n  type CalendarColor,\n} from \"@dsui/ui/components/calendar\";\nimport { cn } from \"@dsui/ui/index\";\nimport { vi, enUS } from \"date-fns/locale\";\n\nexport type DateRange = {\n  from: Date | undefined;\n  to?: Date | undefined;\n};\n\nexport type CalendarProps = SCalendarProps & {\n  language?: \"vi\" | \"en\";\n  variant?: \"default\" | \"rounded\";\n  color?: CalendarColor;\n};\n\nexport function Calendar({\n  language = \"vi\",\n  className,\n  captionLayout = \"dropdown\",\n  formatters,\n  buttonVariant,\n  locale,\n  variant = \"default\",\n  color = \"primary\",\n  ...props\n}: CalendarProps) {\n  const _locale = locale ? locale : language === \"en\" ? enUS : vi;\n\n  return (\n    <SCalendar\n      {...props}\n      locale={_locale}\n      buttonVariant={buttonVariant}\n      captionLayout={captionLayout}\n      variant={variant}\n      color={color}\n      formatters={{\n        formatMonthDropdown: (date: Date) =>\n          date.toLocaleString(_locale.code, { month: \"short\" }),\n        ...formatters,\n      }}\n      className={cn(\n        \"mx-auto [--cell-size:clamp(0px,calc(100vw/7.5),40px)]\",\n        className\n      )}\n    />\n  );\n}\n\nexport const CalendarDayButton = SCalendarDayButton;\nexport type {\n  CalendarDayButtonProps,\n  CalendarColor,\n} from \"@dsui/ui/components/calendar\";\n"],"names":["Calendar","language","className","captionLayout","formatters","buttonVariant","locale","variant","color","props","_locale","enUS","vi","jsx","SCalendar","date","cn","CalendarDayButton","SCalendarDayButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBO,SAASA,EAAS;AAAA,EACvB,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,OAAAC,IAAQ;AAAA,EACR,GAAGC;AACL,GAAkB;AAChB,QAAMC,IAAUJ,MAAkBL,MAAa,OAAOU,IAAOC;AAE7D,SACE,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACE,GAAGL;AAAA,MACJ,QAAQC;AAAA,MACR,eAAAL;AAAA,MACA,eAAAF;AAAA,MACA,SAAAI;AAAA,MACA,OAAAC;AAAA,MACA,YAAY;AAAA,QACV,qBAAqB,CAACO,MACpBA,EAAK,eAAeL,EAAQ,MAAM,EAAE,OAAO,SAAS;AAAA,QACtD,GAAGN;AAAA,MAAA;AAAA,MAEL,WAAWY;AAAA,QACT;AAAA,QACAd;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;AAEO,MAAMe,IAAoBC;"}
+{"version":3,"file":"Calendar.js","sources":["../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import {\n  CalendarDayButton as SCalendarDayButton,\n  type CalendarDayButtonProps as SCalendarDayButtonProps,\n  Calendar as SCalendar,\n  type CalendarProps as SCalendarProps,\n  type CalendarColor,\n} from \"@dsui/ui/components/calendar\";\nimport { cn } from \"@dsui/ui/index\";\nimport { vi, enUS } from \"date-fns/locale\";\n\nexport type DateRange = {\n  from: Date | undefined;\n  to?: Date | undefined;\n};\n\nexport type CalendarProps = SCalendarProps & {\n  language?: \"vi\" | \"en\";\n  variant?: \"default\" | \"rounded\";\n  color?: CalendarColor;\n};\n\nexport function Calendar({\n  language = \"vi\",\n  className,\n  captionLayout = \"dropdown\",\n  formatters,\n  buttonVariant,\n  locale,\n  variant = \"default\",\n  color = \"primary\",\n  ...props\n}: CalendarProps) {\n  const _locale = locale ? locale : language === \"en\" ? enUS : vi;\n\n  return (\n    <SCalendar\n      {...props}\n      locale={_locale}\n      buttonVariant={buttonVariant}\n      captionLayout={captionLayout}\n      variant={variant}\n      color={color}\n      formatters={{\n        formatMonthDropdown: (date: Date) =>\n          date.toLocaleString(_locale.code, { month: \"short\" }),\n        ...formatters,\n      }}\n      className={cn(\n        \"ds:mx-auto ds:[--cell-size:clamp(0px,calc(100vw/7.5),40px)]\",\n        className\n      )}\n    />\n  );\n}\n\nexport const CalendarDayButton = SCalendarDayButton;\nexport type {\n  CalendarDayButtonProps,\n  CalendarColor,\n} from \"@dsui/ui/components/calendar\";\n"],"names":["Calendar","language","className","captionLayout","formatters","buttonVariant","locale","variant","color","props","_locale","enUS","vi","jsx","SCalendar","date","cn","CalendarDayButton","SCalendarDayButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBO,SAASA,EAAS;AAAA,EACvB,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,OAAAC,IAAQ;AAAA,EACR,GAAGC;AACL,GAAkB;AAChB,QAAMC,IAAUJ,MAAkBL,MAAa,OAAOU,IAAOC;AAE7D,SACE,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACE,GAAGL;AAAA,MACJ,QAAQC;AAAA,MACR,eAAAL;AAAA,MACA,eAAAF;AAAA,MACA,SAAAI;AAAA,MACA,OAAAC;AAAA,MACA,YAAY;AAAA,QACV,qBAAqB,CAACO,MACpBA,EAAK,eAAeL,EAAQ,MAAM,EAAE,OAAO,SAAS;AAAA,QACtD,GAAGN;AAAA,MAAA;AAAA,MAEL,WAAWY;AAAA,QACT;AAAA,QACAd;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;AAEO,MAAMe,IAAoBC;"}