@geomak/ui 5.9.0 → 5.10.0

package/dist/index.cjs

@@ -918,7 +918,8 @@ function Tooltip({
   title,
   placement = "top",
   delayDuration = 300,
-  sideOffset = 8
+  sideOffset = 8,
+  className = ""
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Provider, { delayDuration, children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipPrimitive__namespace.Root, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex", children }) }),
@@ -938,8 +939,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__ */ jsxRuntime.jsx(
@@ -1172,9 +1174,11 @@ function Tree({
   nodes,
   onNodeClick,
   defaultExpandAll = false,
-  defaultExpandedKeys = []
+  defaultExpandedKeys = [],
+  className = "",
+  style
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-1 w-full", children: nodes.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `p-1 w-full ${className}`.trim(), style, children: nodes.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
     TreeNodeItem,
     {
       item,
@@ -1441,7 +1445,8 @@ function LoadingSpinner({
   inline = false,
   spinnerColor,
   textColor,
-  backdropOpacity = 0.8
+  backdropOpacity = 0.8,
+  className = ""
 }) {
   const reduced = framerMotion.useReducedMotion();
   const letters = prompt ? Array.from(prompt) : [];
@@ -1476,7 +1481,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
       }
     );
@@ -1487,7 +1492,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
     }
@@ -1596,7 +1601,8 @@ function ScalableContainer({
   assignClassOnClick,
   expandIcon,
   collapseIcon,
-  togglePosition = "top-right"
+  togglePosition = "top-right",
+  className = ""
 }) {
   const containerRef = React8.useRef(null);
   const [internalScaled, setInternalScaled] = React8.useState(false);
@@ -1631,8 +1637,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__ */ jsxRuntime.jsx(Tooltip, { placement: "bottom", title: isScaled ? "Collapse" : "Expand", children: /* @__PURE__ */ jsxRuntime.jsx(
           "button",
@@ -1684,12 +1691,13 @@ function OpaqueGridCard({
   item,
   isRight = false,
   buttonText = "Open Application",
-  onOpen
+  onOpen,
+  className = ""
 }) {
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
           "div",
@@ -1731,10 +1739,10 @@ function OpaqueGridCard({
     }
   );
 }
-function CatalogGrid({ items, buttonText, onOpen }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(GridCard, { item, buttonText, onOpen }, item.key)) });
+function CatalogGrid({ items, buttonText, onOpen, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex flex-wrap gap-2 ${className}`.trim(), children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(GridCard, { item, buttonText, onOpen }, item.key)) });
 }
-function CatalogCarousel({ items, buttonText, onOpen }) {
+function CatalogCarousel({ items, buttonText, onOpen, className = "" }) {
   const [activeIndex, setActiveIndex] = React8.useState(0);
   const [indexPool, setIndexPool] = React8.useState([]);
   const cardRefs = React8.useRef([]);
@@ -1771,7 +1779,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__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-full h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-10", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex items-center justify-center w-full h-full ${className}`.trim(), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-10", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -1821,16 +1829,16 @@ function CatalogCarousel({ items, buttonText, onOpen }) {
     )
   ] }) });
 }
-function Catalog({ display: display2 = "grid", items = [], buttonText, onOpen }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full", children: display2 === "grid" ? /* @__PURE__ */ jsxRuntime.jsx(CatalogGrid, { items, buttonText, onOpen }) : /* @__PURE__ */ jsxRuntime.jsx(CatalogCarousel, { items, buttonText, onOpen }) });
+function Catalog({ display: display2 = "grid", items = [], buttonText, onOpen, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full h-full ${className}`.trim(), children: display2 === "grid" ? /* @__PURE__ */ jsxRuntime.jsx(CatalogGrid, { items, buttonText, onOpen }) : /* @__PURE__ */ jsxRuntime.jsx(CatalogCarousel, { items, buttonText, onOpen }) });
 }
-function ContextMenu({ items, children }) {
+function ContextMenu({ items, children, className = "" }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(ContextMenuPrimitive__namespace.Root, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ContextMenuPrimitive__namespace.Trigger, { asChild: true, children }),
     /* @__PURE__ */ jsxRuntime.jsx(ContextMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
       ContextMenuPrimitive__namespace.Content,
       {
-        className: CONTENT_CLASSNAME,
+        className: `${CONTENT_CLASSNAME} ${className}`.trim(),
         collisionPadding: 8,
         children: items.map((item) => renderItem(item))
       }
@@ -3015,9 +3023,9 @@ function TableSkeletonBody({
     i
   )) });
 }
-function ThemeSwitch({ checked, onChange, label = "Toggle dark mode" }) {
+function ThemeSwitch({ checked, onChange, label = "Toggle dark mode", className = "" }) {
   const id = React8.useId();
-  return /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "flex items-center gap-2 cursor-pointer select-none", children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: `flex items-center gap-2 cursor-pointer select-none ${className}`.trim(), children: /* @__PURE__ */ jsxRuntime.jsx(
     SwitchPrimitive__namespace.Root,
     {
       id,
@@ -4639,7 +4647,8 @@ function DatePicker({
   format = defaultFormat,
   weekStartsOn = 0,
   clearable = true,
-  size = "md"
+  size = "md",
+  className = ""
 }) {
   const errorId = React8.useId();
   const hasError = errorMessage != null;
@@ -4720,7 +4729,7 @@ function DatePicker({
     }
   };
   const displayValue = value ? format(value) : "";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col gap-1 ${className}`.trim(), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex ${layout === "vertical" ? "flex-col gap-1.5" : "flex-row items-start gap-3"}`, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         FieldLabel,