@geomak/ui 5.9.0 → 6.0.0

package/dist/index.js

@@ -1,7 +1,7 @@
 import { colors_default } from './chunk-GKXP6OJJ.js';
 export { colors_default as COLORS, PALETTE as palette, semanticTokens, vars } from './chunk-GKXP6OJJ.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React8, { createContext, useState, useEffect, useMemo, useCallback, useContext, useRef, useId, useLayoutEffect, useSyncExternalStore } from 'react';
+import React8, { createContext, useState, useEffect, useMemo, useId, useCallback, useContext, useRef, useLayoutEffect, useSyncExternalStore } from 'react';
 import { createPortal } from 'react-dom';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as Dialog from '@radix-ui/react-dialog';
@@ -883,7 +883,8 @@ function Tooltip({
   title,
   placement = "top",
   delayDuration = 300,
-  sideOffset = 8
+  sideOffset = 8,
+  className = ""
 }) {
   return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { delayDuration, children: /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { children: [
     /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "inline-flex", children }) }),
@@ -903,8 +904,9 @@ function Tooltip({
           // Out animation (always the same — just fade)
           "data-[state=closed]:animate-tooltip-out",
           // In animation — direction-aware
-          ANIMATION[placement]
-        ].join(" "),
+          ANIMATION[placement],
+          className
+        ].filter(Boolean).join(" "),
         children: [
           title,
           /* @__PURE__ */ jsx(
@@ -921,131 +923,225 @@ function Tooltip({
   ] }) });
 }
 var TooltipProvider = TooltipPrimitive.Provider;
+var TabsContext = createContext(null);
+function useTabsContext() {
+  const ctx = useContext(TabsContext);
+  if (!ctx) throw new Error("Tabs.List / Tabs.Trigger / Tabs.Panel must be rendered inside <Tabs>.");
+  return ctx;
+}
+var SIZE = {
+  sm: { trigger: "h-8 text-xs px-2.5", icon: "h-3.5 w-3.5", add: "h-8 w-8" },
+  md: { trigger: "h-10 text-sm px-3", icon: "h-4 w-4", add: "h-10 w-9" },
+  lg: { trigger: "h-12 text-sm px-4", icon: "h-[18px] w-[18px]", add: "h-12 w-10" }
+};
+var MARKER_TRANSITION = { duration: 0.26, ease: [0.16, 1, 0.3, 1] };
 function Tabs({
-  tabs = [],
-  onTabChange,
-  onTabClose,
-  isLazy,
-  tabsClosable = true,
-  defaultActiveTab
+  value,
+  defaultValue,
+  onValueChange,
+  variant = "underline",
+  size = "md",
+  orientation = "horizontal",
+  className = "",
+  style,
+  children
 }) {
-  const [value, setValue] = useState(() => defaultActiveTab ?? tabs[0]?.key ?? "");
-  useEffect(() => {
-    if (defaultActiveTab) setValue(defaultActiveTab);
-  }, [defaultActiveTab]);
-  useEffect(() => {
-    if (tabs.length === 0) {
-      setValue("");
-      return;
-    }
-    const exists = tabs.find((t) => t.key === value);
-    if (!exists) {
-      setValue(tabs[tabs.length - 1].key);
-    }
-  }, [tabs, value]);
-  const handleValueChange = (newValue) => {
-    const prev = tabs.find((t) => t.key === value);
-    const next = tabs.find((t) => t.key === newValue);
-    onTabChange?.(prev, next);
-    setValue(newValue);
-  };
-  const toPreviousTab = () => {
-    const idx = tabs.findIndex((t) => t.key === value);
-    if (idx > 0) handleValueChange(tabs[idx - 1].key);
-  };
-  const toNextTab = () => {
-    const idx = tabs.findIndex((t) => t.key === value);
-    if (idx < tabs.length - 1) handleValueChange(tabs[idx + 1].key);
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = useState(defaultValue);
+  const current = isControlled ? value : internal;
+  const reduced = !!useReducedMotion();
+  const indicatorId = useId();
+  const handle = (next) => {
+    if (!isControlled) setInternal(next);
+    onValueChange?.(next);
   };
-  if (tabs.length === 0) return null;
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { value: current, variant, size, orientation, indicatorId, reduced }, children: /* @__PURE__ */ jsx(
     TabsPrimitive.Root,
+    {
+      value: current,
+      onValueChange: handle,
+      orientation,
+      className: [
+        "flex min-w-0",
+        orientation === "vertical" ? "flex-row gap-4" : "flex-col gap-3",
+        className
+      ].filter(Boolean).join(" "),
+      style,
+      children
+    }
+  ) });
+}
+function TabsList({ children, "aria-label": ariaLabel, className = "" }) {
+  const { variant, orientation, reduced } = useTabsContext();
+  const horizontal = orientation === "horizontal";
+  const scrollRef = useRef(null);
+  const [edges, setEdges] = useState({ start: false, end: false });
+  const scrollable = variant !== "segmented";
+  useLayoutEffect(() => {
+    const el = scrollRef.current;
+    if (!el || !scrollable) return;
+    const update = () => {
+      if (horizontal) {
+        setEdges({
+          start: el.scrollLeft > 1,
+          end: el.scrollLeft + el.clientWidth < el.scrollWidth - 1
+        });
+      } else {
+        setEdges({
+          start: el.scrollTop > 1,
+          end: el.scrollTop + el.clientHeight < el.scrollHeight - 1
+        });
+      }
+    };
+    update();
+    el.addEventListener("scroll", update, { passive: true });
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => {
+      el.removeEventListener("scroll", update);
+      ro.disconnect();
+    };
+  }, [horizontal, scrollable, children]);
+  const nudge = useCallback((dir) => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const amount = (horizontal ? el.clientWidth : el.clientHeight) * 0.7 * dir;
+    el.scrollBy({ [horizontal ? "left" : "top"]: amount, behavior: reduced ? "auto" : "smooth" });
+  }, [horizontal, reduced]);
+  const maskStyle = scrollable && (edges.start || edges.end) ? (() => {
+    const dir = horizontal ? "to right" : "to bottom";
+    const a = edges.start ? "transparent, black 36px" : "black";
+    const b = edges.end ? "black calc(100% - 36px), transparent" : "black";
+    const img = `linear-gradient(${dir}, ${a}, ${b})`;
+    return { maskImage: img, WebkitMaskImage: img };
+  })() : {};
+  const trackClass = (() => {
+    if (variant === "segmented") {
+      return horizontal ? "inline-flex items-center gap-1 rounded-lg border border-border bg-surface-raised p-1 w-fit" : "inline-flex flex-col items-stretch gap-1 rounded-lg border border-border bg-surface-raised p-1 w-fit";
+    }
+    const hairline = horizontal ? "border-b border-border" : "border-r border-border";
+    const align = variant === "enclosed" && horizontal ? "items-end" : "items-stretch";
+    return `flex ${horizontal ? "flex-row" : "flex-col"} ${align} gap-1 ${hairline}`;
+  })();
+  const scrollClass = scrollable ? horizontal ? "overflow-x-auto overflow-y-hidden hidden-scrollbar" : "overflow-y-auto overflow-x-hidden hidden-scrollbar" : "";
+  return /* @__PURE__ */ jsxs("div", { className: ["relative flex min-w-0", horizontal ? "flex-row items-stretch" : "flex-col items-stretch", className].filter(Boolean).join(" "), children: [
+    scrollable && edges.start && /* @__PURE__ */ jsx(Chevron, { side: "start", orientation, onClick: () => nudge(-1) }),
+    /* @__PURE__ */ jsx(
+      TabsPrimitive.List,
+      {
+        ref: scrollRef,
+        "aria-label": ariaLabel,
+        className: [scrollClass, trackClass, "min-w-0 flex-1"].filter(Boolean).join(" "),
+        style: maskStyle,
+        children
+      }
+    ),
+    scrollable && edges.end && /* @__PURE__ */ jsx(Chevron, { side: "end", orientation, onClick: () => nudge(1) })
+  ] });
+}
+function Chevron({ side, orientation, onClick }) {
+  const horizontal = orientation === "horizontal";
+  const rotate = horizontal ? side === "start" ? "rotate-180" : "" : side === "start" ? "-rotate-90" : "rotate-90";
+  const pos = horizontal ? side === "start" ? "left-0 top-1/2 -translate-y-1/2" : "right-0 top-1/2 -translate-y-1/2" : side === "start" ? "top-0 left-1/2 -translate-x-1/2" : "bottom-0 left-1/2 -translate-x-1/2";
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": side === "start" ? "Scroll tabs backward" : "Scroll tabs forward",
+      onClick,
+      className: `absolute z-20 ${pos} flex h-7 w-7 items-center justify-center rounded-full border border-border bg-surface text-foreground-secondary shadow-sm hover:text-foreground hover:bg-surface-raised transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent`,
+      children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: `h-4 w-4 ${rotate}`, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
+    }
+  );
+}
+function TabsTrigger({ value, icon, badge, closeable, onClose, disabled, className = "", children }) {
+  const { value: active, variant, size, orientation, indicatorId, reduced } = useTabsContext();
+  const isActive = active === value;
+  const horizontal = orientation === "horizontal";
+  const sz = SIZE[size];
+  const base = "group/trigger relative inline-flex items-center justify-center whitespace-nowrap font-medium select-none transition-colors duration-150 focus:outline-none disabled:opacity-40 disabled:cursor-not-allowed flex-shrink-0";
+  const variantCls = variant === "segmented" ? `rounded-md ${isActive ? "text-accent" : "text-foreground-secondary hover:text-foreground"} focus-visible:text-accent` : variant === "enclosed" ? `${horizontal ? "rounded-t-md border border-b-0 -mb-px" : "rounded-l-md border border-r-0 -mr-px"} ${isActive ? "bg-surface border-border text-foreground" : "border-transparent text-foreground-secondary hover:text-foreground hover:bg-surface-raised"} focus-visible:text-accent` : `${isActive ? "text-accent" : "text-foreground-secondary hover:text-foreground"} focus-visible:text-accent`;
+  const trigger = /* @__PURE__ */ jsxs(
+    TabsPrimitive.Trigger,
     {
       value,
-      onValueChange: handleValueChange,
-      className: "h-full max-w-full flex flex-col gap-2",
+      disabled,
+      className: [base, sz.trigger, closeable ? "pr-8" : "", variantCls, className].filter(Boolean).join(" "),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "bg-surface border border-border rounded-lg flex items-center justify-between flex-shrink-0 w-full p-1 overflow-hidden", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: toPreviousTab,
-              "aria-label": "Previous tab",
-              className: "cursor-pointer rounded-lg transition-colors duration-150 hover:bg-surface-raised text-foreground-secondary hover:text-foreground rotate-180 flex-shrink-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
-              children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-6 w-6", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            TabsPrimitive.List,
-            {
-              "aria-label": "Tabs",
-              className: "flex-1 flex items-center gap-1 overflow-x-auto overflow-y-hidden rounded-lg scroll-smooth snap-x snap-mandatory hidden-scrollbar",
-              children: tabs.map((tab) => (
-                // Trigger + close button are SIBLINGS, not nested.
-                // Nesting a clickable element inside <button> is invalid
-                // HTML and breaks keyboard activation of the inner one.
-                // The wrapper carries `group` so the close button can
-                // react to the trigger's `data-state=active` for styling.
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: "snap-start snap-always relative flex items-center flex-1 min-w-[120px] max-w-[220px] flex-shrink-0 group",
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        TabsPrimitive.Trigger,
-                        {
-                          value: tab.key,
-                          className: `w-full ${tabsClosable ? "pr-8" : "pr-3"} pl-3 py-2 rounded-3xl cursor-pointer transition-all duration-200 select-none h-10 text-left
-                                           text-foreground-secondary bg-surface-raised
-                                           hover:bg-surface hover:text-foreground
-                                           data-[state=active]:bg-accent data-[state=active]:text-accent-foreground
-                                           focus:outline-none focus-visible:ring-2 focus-visible:ring-accent`,
-                          children: /* @__PURE__ */ jsx("span", { className: "truncate text-sm block", children: tab.title })
-                        }
-                      ),
-                      tabsClosable && /* @__PURE__ */ jsx(
-                        "button",
-                        {
-                          type: "button",
-                          "aria-label": `Close ${tab.title}`,
-                          onClick: (e) => {
-                            e.stopPropagation();
-                            onTabClose?.(tab.key);
-                          },
-                          className: "absolute right-1.5 top-1/2 -translate-y-1/2 rounded p-0.5 text-foreground-secondary group-data-[state=active]:text-accent-foreground hover:bg-black/10 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
-                          children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
-                        }
-                      )
-                    ]
-                  },
-                  tab.key
-                )
-              ))
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: toNextTab,
-              "aria-label": "Next tab",
-              className: "cursor-pointer rounded-lg transition-colors duration-150 hover:bg-surface-raised text-foreground-secondary hover:text-foreground flex-shrink-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
-              children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-6 w-6", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
-            }
-          )
+        variant === "segmented" && isActive && /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            layoutId: `${indicatorId}-seg`,
+            className: "absolute inset-0 rounded-md bg-surface shadow-sm",
+            transition: reduced ? { duration: 0 } : MARKER_TRANSITION,
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "relative z-[1] inline-flex items-center gap-2 min-w-0", children: [
+          icon && /* @__PURE__ */ jsx("span", { className: `flex-shrink-0 inline-flex items-center justify-center ${sz.icon}`, children: icon }),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children }),
+          badge != null && /* @__PURE__ */ jsx("span", { className: "ml-0.5 inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-border px-1 text-[11px] font-semibold leading-none text-foreground-secondary group-data-[state=active]/trigger:bg-accent group-data-[state=active]/trigger:text-accent-foreground transition-colors", children: badge })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "p-2 rounded-lg w-full flex-1 min-h-0 bg-surface border border-border overflow-hidden", children: isLazy ? (
-          // Mount only the active content
-          tabs.filter((t) => t.key === value).map((t) => /* @__PURE__ */ jsx(TabsPrimitive.Content, { value: t.key, className: "w-full h-full focus:outline-none", children: t.content }, t.key))
-        ) : (
-          // Pre-mount all, hide non-active via Radix
-          tabs.map((t) => /* @__PURE__ */ jsx(TabsPrimitive.Content, { value: t.key, className: "w-full h-full focus:outline-none", forceMount: true, children: /* @__PURE__ */ jsx("div", { className: `w-full h-full ${t.key === value ? "block" : "hidden"}`, children: t.content }) }, t.key))
-        ) })
+        variant === "underline" && isActive && /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            layoutId: `${indicatorId}-line`,
+            className: horizontal ? "absolute left-2 right-2 bottom-0 h-0.5 rounded-full bg-accent" : "absolute top-1.5 bottom-1.5 right-0 w-0.5 rounded-full bg-accent",
+            transition: reduced ? { duration: 0 } : MARKER_TRANSITION,
+            "aria-hidden": "true"
+          }
+        )
       ]
     }
   );
+  if (!closeable) return trigger;
+  return /* @__PURE__ */ jsxs("span", { className: "relative inline-flex items-center flex-shrink-0", children: [
+    trigger,
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Close tab",
+        onClick: (e) => {
+          e.stopPropagation();
+          onClose?.();
+        },
+        className: "absolute right-1.5 top-1/2 z-[2] -translate-y-1/2 inline-flex h-5 w-5 items-center justify-center rounded text-foreground-muted hover:text-status-error hover:bg-surface-raised transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-accent",
+        children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+      }
+    )
+  ] });
+}
+function TabsAdd({ onClick, "aria-label": ariaLabel = "Add tab", className = "" }) {
+  const { size } = useTabsContext();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-label": ariaLabel,
+      className: `flex-shrink-0 inline-flex items-center justify-center rounded-md text-foreground-muted hover:text-foreground hover:bg-surface-raised transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${SIZE[size].add} ${className}`.trim(),
+      children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 5v14M5 12h14" }) })
+    }
+  );
+}
+function TabsPanel({ value, keepMounted, className = "", style, children }) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Content,
+    {
+      value,
+      forceMount: keepMounted || void 0,
+      className: ["min-w-0 flex-1 focus:outline-none data-[state=inactive]:hidden", className].filter(Boolean).join(" "),
+      style,
+      children
+    }
+  );
 }
+Tabs.List = TabsList;
+Tabs.Trigger = TabsTrigger;
+Tabs.Panel = TabsPanel;
+Tabs.Add = TabsAdd;
+var Tabs_default = Tabs;
 var isParent = (item) => Boolean(item.children && item.children.length > 0);
 function TreeNodeItem({
   item,
@@ -1137,9 +1233,11 @@ function Tree({
   nodes,
   onNodeClick,
   defaultExpandAll = false,
-  defaultExpandedKeys = []
+  defaultExpandedKeys = [],
+  className = "",
+  style
 }) {
-  return /* @__PURE__ */ jsx("div", { className: "p-1 w-full", children: nodes.map((item) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: `p-1 w-full ${className}`.trim(), style, children: nodes.map((item) => /* @__PURE__ */ jsx(
     TreeNodeItem,
     {
       item,
@@ -1406,7 +1504,8 @@ function LoadingSpinner({
   inline = false,
   spinnerColor,
   textColor,
-  backdropOpacity = 0.8
+  backdropOpacity = 0.8,
+  className = ""
 }) {
   const reduced = useReducedMotion();
   const letters = prompt ? Array.from(prompt) : [];
@@ -1441,7 +1540,7 @@ function LoadingSpinner({
         role: "status",
         "aria-live": "polite",
         "aria-label": prompt ?? "Loading",
-        className: "flex flex-col items-center justify-center gap-3",
+        className: `flex flex-col items-center justify-center gap-3 ${className}`.trim(),
         children: content
       }
     );
@@ -1452,7 +1551,7 @@ function LoadingSpinner({
       role: "status",
       "aria-live": "polite",
       "aria-label": prompt ?? "Loading",
-      className: "fixed inset-0 z-[8000000] flex flex-col items-center justify-center gap-6 bg-background backdrop-blur-sm",
+      className: `fixed inset-0 z-[8000000] flex flex-col items-center justify-center gap-6 bg-background backdrop-blur-sm ${className}`.trim(),
       style: { opacity: backdropOpacity },
       children: content
     }
@@ -1561,7 +1660,8 @@ function ScalableContainer({
   assignClassOnClick,
   expandIcon,
   collapseIcon,
-  togglePosition = "top-right"
+  togglePosition = "top-right",
+  className = ""
 }) {
   const containerRef = useRef(null);
   const [internalScaled, setInternalScaled] = useState(false);
@@ -1596,8 +1696,9 @@ function ScalableContainer({
         // OS-window aesthetic: subtle elevation at rest, lifted shadow
         // when expanded. No background colour change.
         isScaled ? "shadow-2xl" : "shadow-md",
-        "transition-shadow duration-300"
-      ].join(" "),
+        "transition-shadow duration-300",
+        className
+      ].filter(Boolean).join(" "),
       children: [
         /* @__PURE__ */ jsx(Tooltip, { placement: "bottom", title: isScaled ? "Collapse" : "Expand", children: /* @__PURE__ */ jsx(
           "button",
@@ -1649,12 +1750,13 @@ function OpaqueGridCard({
   item,
   isRight = false,
   buttonText = "Open Application",
-  onOpen
+  onOpen,
+  className = ""
 }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `flex flex-col w-[200px] h-[250px] rounded-lg items-center p-2 ${!isRight ? "opaque-carousel-card-left dark:opaque-carousel-card-dark-left" : "opaque-carousel-card-right dark:opaque-carousel-card-dark-right"}`,
+      className: `flex flex-col w-[200px] h-[250px] rounded-lg items-center p-2 ${!isRight ? "opaque-carousel-card-left dark:opaque-carousel-card-dark-left" : "opaque-carousel-card-right dark:opaque-carousel-card-dark-right"} ${className}`.trim(),
       children: [
         /* @__PURE__ */ jsx(
           "div",
@@ -1696,10 +1798,10 @@ function OpaqueGridCard({
     }
   );
 }
-function CatalogGrid({ items, buttonText, onOpen }) {
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: items.map((item) => /* @__PURE__ */ jsx(GridCard, { item, buttonText, onOpen }, item.key)) });
+function CatalogGrid({ items, buttonText, onOpen, className = "" }) {
+  return /* @__PURE__ */ jsx("div", { className: `flex flex-wrap gap-2 ${className}`.trim(), children: items.map((item) => /* @__PURE__ */ jsx(GridCard, { item, buttonText, onOpen }, item.key)) });
 }
-function CatalogCarousel({ items, buttonText, onOpen }) {
+function CatalogCarousel({ items, buttonText, onOpen, className = "" }) {
   const [activeIndex, setActiveIndex] = useState(0);
   const [indexPool, setIndexPool] = useState([]);
   const cardRefs = useRef([]);
@@ -1736,7 +1838,7 @@ function CatalogCarousel({ items, buttonText, onOpen }) {
   }, [activeIndex, getIndexes, items.length]);
   const nextApp = () => setActiveIndex((prev) => prev + 1 === items.length ? 0 : prev + 1);
   const previousApp = () => setActiveIndex((prev) => prev - 1 === -1 ? items.length - 1 : prev - 1);
-  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-full h-full", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-10", children: [
+  return /* @__PURE__ */ jsx("div", { className: `flex items-center justify-center w-full h-full ${className}`.trim(), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-10", children: [
     /* @__PURE__ */ jsx(
       "button",
       {
@@ -1786,16 +1888,16 @@ function CatalogCarousel({ items, buttonText, onOpen }) {
     )
   ] }) });
 }
-function Catalog({ display: display2 = "grid", items = [], buttonText, onOpen }) {
-  return /* @__PURE__ */ jsx("div", { className: "w-full h-full", children: display2 === "grid" ? /* @__PURE__ */ jsx(CatalogGrid, { items, buttonText, onOpen }) : /* @__PURE__ */ jsx(CatalogCarousel, { items, buttonText, onOpen }) });
+function Catalog({ display: display2 = "grid", items = [], buttonText, onOpen, className = "" }) {
+  return /* @__PURE__ */ jsx("div", { className: `w-full h-full ${className}`.trim(), children: display2 === "grid" ? /* @__PURE__ */ jsx(CatalogGrid, { items, buttonText, onOpen }) : /* @__PURE__ */ jsx(CatalogCarousel, { items, buttonText, onOpen }) });
 }
-function ContextMenu({ items, children }) {
+function ContextMenu({ items, children, className = "" }) {
   return /* @__PURE__ */ jsxs(ContextMenuPrimitive.Root, { children: [
     /* @__PURE__ */ jsx(ContextMenuPrimitive.Trigger, { asChild: true, children }),
     /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
       ContextMenuPrimitive.Content,
       {
-        className: CONTENT_CLASSNAME,
+        className: `${CONTENT_CLASSNAME} ${className}`.trim(),
         collisionPadding: 8,
         children: items.map((item) => renderItem(item))
       }
@@ -2980,9 +3082,9 @@ function TableSkeletonBody({
     i
   )) });
 }
-function ThemeSwitch({ checked, onChange, label = "Toggle dark mode" }) {
+function ThemeSwitch({ checked, onChange, label = "Toggle dark mode", className = "" }) {
   const id = useId();
-  return /* @__PURE__ */ jsx("label", { htmlFor: id, className: "flex items-center gap-2 cursor-pointer select-none", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("label", { htmlFor: id, className: `flex items-center gap-2 cursor-pointer select-none ${className}`.trim(), children: /* @__PURE__ */ jsx(
     SwitchPrimitive.Root,
     {
       id,
@@ -4604,7 +4706,8 @@ function DatePicker({
   format = defaultFormat,
   weekStartsOn = 0,
   clearable = true,
-  size = "md"
+  size = "md",
+  className = ""
 }) {
   const errorId = useId();
   const hasError = errorMessage != null;
@@ -4685,7 +4788,7 @@ function DatePicker({
     }
   };
   const displayValue = value ? format(value) : "";
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-1 ${className}`.trim(), children: [
     /* @__PURE__ */ jsxs("div", { className: `flex ${layout === "vertical" ? "flex-col gap-1.5" : "flex-row items-start gap-3"}`, children: [
       /* @__PURE__ */ jsx(
         FieldLabel,
@@ -4969,7 +5072,7 @@ function TextArea({
     }
   );
 }
-var SIZE = {
+var SIZE2 = {
   sm: { h: "h-control-sm", text: "text-xs", pad: "px-2.5" },
   md: { h: "h-control-md", text: "text-sm", pad: "px-3.5" },
   lg: { h: "h-control-lg", text: "text-sm", pad: "px-4" }
@@ -4991,7 +5094,7 @@ function SegmentedControl({
   errorMessage,
   "aria-label": ariaLabel
 }) {
-  const sz = SIZE[size];
+  const sz = SIZE2[size];
   const groupId = useId();
   const errorId = useId();
   const hasError = errorMessage != null;
@@ -6592,6 +6695,6 @@ function CreditCardForm({
   );
 }
 
-export { AppShell, AutoComplete, Avatar, Box, Button, CARD_BRANDS, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ColorPicker, ContextMenu, CreditCardForm, DateRangePicker, Drawer, Dropdown, FadingBase, Field, FieldHelpIcon, FieldLabel, FileInput, Flex, Form, FormContext, FormField, FormStore, Grid2 as Grid, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, Modal, NotificationProvider, NumberInput, OpaqueGridCard, OtpInput, Password, Portal, RadioGroup, Rating, ScalableContainer, SearchInput_default as SearchInput, SegmentedControl, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Slider, Switch, Table, Tabs, TagsInput, DatePicker as Temporal, TextArea, TextInput, ThemeProvider, ThemeSwitch, TimePicker, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useFieldArray, useForm, useFormField, useFormStore, useNotification };
+export { AppShell, AutoComplete, Avatar, Box, Button, CARD_BRANDS, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ColorPicker, ContextMenu, CreditCardForm, DateRangePicker, Drawer, Dropdown, FadingBase, Field, FieldHelpIcon, FieldLabel, FileInput, Flex, Form, FormContext, FormField, FormStore, Grid2 as Grid, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, Modal, NotificationProvider, NumberInput, OpaqueGridCard, OtpInput, Password, Portal, RadioGroup, Rating, ScalableContainer, SearchInput_default as SearchInput, SegmentedControl, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Slider, Switch, Table, Tabs_default as Tabs, TagsInput, DatePicker as Temporal, TextArea, TextInput, ThemeProvider, ThemeSwitch, TimePicker, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useFieldArray, useForm, useFormField, useFormStore, useNotification };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map