@geomak/ui 5.9.0 → 5.10.0

package/dist/index.d.cts

@@ -707,6 +707,8 @@ interface TooltipProps {
     delayDuration?: number;
     /** Offset from trigger in px (default 8) */
     sideOffset?: number;
+    /** Extra classes merged onto the tooltip content bubble. */
+    className?: string;
 }
 /**
  * Tooltip powered by Radix Tooltip.
@@ -723,7 +725,7 @@ interface TooltipProps {
  *   </Tooltip>
  * </TooltipProvider>
  */
-declare function Tooltip({ children, title, placement, delayDuration, sideOffset, }: TooltipProps): react_jsx_runtime.JSX.Element;
+declare function Tooltip({ children, title, placement, delayDuration, sideOffset, className, }: TooltipProps): react_jsx_runtime.JSX.Element;
 
 declare const TooltipProvider: React__default.FC<TooltipPrimitive.TooltipProviderProps>;
 
@@ -779,6 +781,10 @@ interface TreeProps {
     onNodeClick: (payload: TreeItemClickPayload) => void;
     defaultExpandAll?: boolean;
     defaultExpandedKeys?: string[];
+    /** Extra classes merged onto the tree root. */
+    className?: string;
+    /** Inline style on the tree root. */
+    style?: React__default.CSSProperties;
 }
 /** ─────────────────── public component ─────────────────── */
 /**
@@ -795,7 +801,7 @@ interface TreeProps {
  *   defaultExpandAll
  * />
  */
-declare function Tree({ nodes, onNodeClick, defaultExpandAll, defaultExpandedKeys, }: TreeProps): react_jsx_runtime.JSX.Element;
+declare function Tree({ nodes, onNodeClick, defaultExpandAll, defaultExpandedKeys, className, style, }: TreeProps): react_jsx_runtime.JSX.Element;
 
 /** ─────────────────── types ─────────────────── */
 type NotificationType = 'info' | 'success' | 'warning' | 'danger';
@@ -873,6 +879,8 @@ interface LoadingSpinnerProps {
      * previous state. Ignored when `inline` is true.
      */
     backdropOpacity?: number;
+    /** Extra classes merged onto the spinner root. */
+    className?: string;
 }
 /**
  * Enterprise-grade loading indicator.
@@ -917,7 +925,7 @@ interface LoadingSpinnerProps {
  * />
  * ```
  */
-declare function LoadingSpinner({ prompt, size, inline, spinnerColor, textColor, backdropOpacity, }: LoadingSpinnerProps): react_jsx_runtime.JSX.Element;
+declare function LoadingSpinner({ prompt, size, inline, spinnerColor, textColor, backdropOpacity, className, }: LoadingSpinnerProps): react_jsx_runtime.JSX.Element;
 
 interface FadingBaseProps {
     className?: string;
@@ -1039,6 +1047,8 @@ interface ScalableContainerProps {
      * Default `'top-right'` — matches the OS-window convention.
      */
     togglePosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** Extra classes merged onto the container root. */
+    className?: string;
 }
 /**
  * Container that smoothly expands to fill its parent on click and
@@ -1065,7 +1075,7 @@ interface ScalableContainerProps {
  * </ScalableContainer>
  * ```
  */
-declare function ScalableContainer({ width, height, expandedWidth, expandedHeight, expanded, onExpandedChange, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
+declare function ScalableContainer({ width, height, expandedWidth, expandedHeight, expanded, onExpandedChange, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, className, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
 
 interface GridCardItem {
     key: string | number;
@@ -1106,6 +1116,8 @@ interface OpaqueGridCardProps {
     isRight?: boolean;
     buttonText?: string;
     onOpen?: (item: GridCardItem) => void;
+    /** Extra classes merged onto the card root. */
+    className?: string;
 }
 /**
  * Opaque carousel variant of GridCard (left or right edge of the carousel).
@@ -1116,29 +1128,33 @@ interface OpaqueGridCardProps {
  * @example
  * <OpaqueGridCard item={sideItem} isRight onOpen={({ to }) => navigate(to!)} />
  */
-declare function OpaqueGridCard({ item, isRight, buttonText, onOpen, }: OpaqueGridCardProps): react_jsx_runtime.JSX.Element;
+declare function OpaqueGridCard({ item, isRight, buttonText, onOpen, className, }: OpaqueGridCardProps): react_jsx_runtime.JSX.Element;
 
 interface CatalogGridProps {
     items: GridCardItem[];
     buttonText?: string;
     onOpen?: (item: GridCardItem) => void;
+    /** Extra classes merged onto the grid root. */
+    className?: string;
 }
 /**
  * Wrapping flex grid of `GridCard` tiles.
  */
-declare function CatalogGrid({ items, buttonText, onOpen }: CatalogGridProps): react_jsx_runtime.JSX.Element;
+declare function CatalogGrid({ items, buttonText, onOpen, className }: CatalogGridProps): react_jsx_runtime.JSX.Element;
 
 interface CatalogCarouselProps {
     items: GridCardItem[];
     buttonText?: string;
     onOpen?: (item: GridCardItem) => void;
+    /** Extra classes merged onto the carousel root. */
+    className?: string;
 }
 /**
  * Three-card carousel (previous → active (scaled) → next).
  *
  * Decoupled from ThemeContext — uses CSS `dark:` classes.
  */
-declare function CatalogCarousel({ items, buttonText, onOpen }: CatalogCarouselProps): react_jsx_runtime.JSX.Element;
+declare function CatalogCarousel({ items, buttonText, onOpen, className }: CatalogCarouselProps): react_jsx_runtime.JSX.Element;
 
 interface CatalogProps {
     /** 'grid' | 'carousel' */
@@ -1146,6 +1162,8 @@ interface CatalogProps {
     items?: GridCardItem[];
     buttonText?: string;
     onOpen?: (item: GridCardItem) => void;
+    /** Extra classes merged onto the catalog root. */
+    className?: string;
 }
 /**
  * Switches between grid and carousel layouts for a list of application tiles.
@@ -1153,7 +1171,7 @@ interface CatalogProps {
  * @example
  * <Catalog display="carousel" items={apps} onOpen={({ to }) => navigate(to!)} />
  */
-declare function Catalog({ display, items, buttonText, onOpen }: CatalogProps): react_jsx_runtime.JSX.Element;
+declare function Catalog({ display, items, buttonText, onOpen, className }: CatalogProps): react_jsx_runtime.JSX.Element;
 
 /**
  * A single action in the context menu.
@@ -1184,6 +1202,8 @@ interface ContextMenuProps {
      * component / div / image — anything you can right-click on.
      */
     children: React__default.ReactNode;
+    /** Extra classes merged onto the menu content panel. */
+    className?: string;
 }
 /**
  * Right-click context menu, built on `@radix-ui/react-context-menu`.
@@ -1222,7 +1242,7 @@ interface ContextMenuProps {
  * </ContextMenu>
  * ```
  */
-declare function ContextMenu({ items, children }: ContextMenuProps): react_jsx_runtime.JSX.Element;
+declare function ContextMenu({ items, children, className }: ContextMenuProps): react_jsx_runtime.JSX.Element;
 /** @deprecated The Radix rewrite positions the menu automatically — no coordinates needed. */
 interface ContextMenuPosition {
     x: number;
@@ -1449,6 +1469,8 @@ interface ThemeSwitchProps {
     }) => void;
     /** Optional accessible label (defaults to "Toggle dark mode") */
     label?: string;
+    /** Extra classes merged onto the root label. */
+    className?: string;
 }
 /**
  * Theme (dark-mode) toggle switch powered by Radix Switch.
@@ -1460,7 +1482,7 @@ interface ThemeSwitchProps {
  * @example
  * <ThemeSwitch checked={isDark} onChange={({ target }) => setDark(target.checked)} />
  */
-declare function ThemeSwitch({ checked, onChange, label }: ThemeSwitchProps): react_jsx_runtime.JSX.Element;
+declare function ThemeSwitch({ checked, onChange, label, className }: ThemeSwitchProps): react_jsx_runtime.JSX.Element;
 
 interface TopBarProps {
     /** Brand area — logo, wordmark, or app name. Rendered on the leading edge. */
@@ -2772,6 +2794,8 @@ interface DatePickerProps {
     clearable?: boolean;
     /** Size preset. Default `'md'`. */
     size?: FieldSize;
+    /** Extra classes merged onto the component root. */
+    className?: string;
 }
 type TemporalPickerProps = DatePickerProps;
 /**
@@ -2809,7 +2833,7 @@ type TemporalPickerProps = DatePickerProps;
  * />
  * ```
  */
-declare function DatePicker({ value, onChange, label, placeholder, htmlFor, name: _name, layout, helperText, required, disabled, errorMessage, min, max, style, format, weekStartsOn, clearable, size, }: DatePickerProps): react_jsx_runtime.JSX.Element;
+declare function DatePicker({ value, onChange, label, placeholder, htmlFor, name: _name, layout, helperText, required, disabled, errorMessage, min, max, style, format, weekStartsOn, clearable, size, className, }: DatePickerProps): react_jsx_runtime.JSX.Element;
 
 interface TextAreaProps {
     /** Controlled value. */

package/dist/index.d.ts

@@ -707,6 +707,8 @@ interface TooltipProps {
     delayDuration?: number;
     /** Offset from trigger in px (default 8) */
     sideOffset?: number;
+    /** Extra classes merged onto the tooltip content bubble. */
+    className?: string;
 }
 /**
  * Tooltip powered by Radix Tooltip.
@@ -723,7 +725,7 @@ interface TooltipProps {
  *   </Tooltip>
  * </TooltipProvider>
  */
-declare function Tooltip({ children, title, placement, delayDuration, sideOffset, }: TooltipProps): react_jsx_runtime.JSX.Element;
+declare function Tooltip({ children, title, placement, delayDuration, sideOffset, className, }: TooltipProps): react_jsx_runtime.JSX.Element;
 
 declare const TooltipProvider: React__default.FC<TooltipPrimitive.TooltipProviderProps>;
 
@@ -779,6 +781,10 @@ interface TreeProps {
     onNodeClick: (payload: TreeItemClickPayload) => void;
     defaultExpandAll?: boolean;
     defaultExpandedKeys?: string[];
+    /** Extra classes merged onto the tree root. */
+    className?: string;
+    /** Inline style on the tree root. */
+    style?: React__default.CSSProperties;
 }
 /** ─────────────────── public component ─────────────────── */
 /**
@@ -795,7 +801,7 @@ interface TreeProps {
  *   defaultExpandAll
  * />
  */
-declare function Tree({ nodes, onNodeClick, defaultExpandAll, defaultExpandedKeys, }: TreeProps): react_jsx_runtime.JSX.Element;
+declare function Tree({ nodes, onNodeClick, defaultExpandAll, defaultExpandedKeys, className, style, }: TreeProps): react_jsx_runtime.JSX.Element;
 
 /** ─────────────────── types ─────────────────── */
 type NotificationType = 'info' | 'success' | 'warning' | 'danger';
@@ -873,6 +879,8 @@ interface LoadingSpinnerProps {
      * previous state. Ignored when `inline` is true.
      */
     backdropOpacity?: number;
+    /** Extra classes merged onto the spinner root. */
+    className?: string;
 }
 /**
  * Enterprise-grade loading indicator.
@@ -917,7 +925,7 @@ interface LoadingSpinnerProps {
  * />
  * ```
  */
-declare function LoadingSpinner({ prompt, size, inline, spinnerColor, textColor, backdropOpacity, }: LoadingSpinnerProps): react_jsx_runtime.JSX.Element;
+declare function LoadingSpinner({ prompt, size, inline, spinnerColor, textColor, backdropOpacity, className, }: LoadingSpinnerProps): react_jsx_runtime.JSX.Element;
 
 interface FadingBaseProps {
     className?: string;
@@ -1039,6 +1047,8 @@ interface ScalableContainerProps {
      * Default `'top-right'` — matches the OS-window convention.
      */
     togglePosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** Extra classes merged onto the container root. */
+    className?: string;
 }
 /**
  * Container that smoothly expands to fill its parent on click and
@@ -1065,7 +1075,7 @@ interface ScalableContainerProps {
  * </ScalableContainer>
  * ```
  */
-declare function ScalableContainer({ width, height, expandedWidth, expandedHeight, expanded, onExpandedChange, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
+declare function ScalableContainer({ width, height, expandedWidth, expandedHeight, expanded, onExpandedChange, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, className, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
 
 interface GridCardItem {
     key: string | number;
@@ -1106,6 +1116,8 @@ interface OpaqueGridCardProps {
     isRight?: boolean;
     buttonText?: string;
     onOpen?: (item: GridCardItem) => void;
+    /** Extra classes merged onto the card root. */
+    className?: string;
 }
 /**
  * Opaque carousel variant of GridCard (left or right edge of the carousel).
@@ -1116,29 +1128,33 @@ interface OpaqueGridCardProps {
  * @example
  * <OpaqueGridCard item={sideItem} isRight onOpen={({ to }) => navigate(to!)} />
  */
-declare function OpaqueGridCard({ item, isRight, buttonText, onOpen, }: OpaqueGridCardProps): react_jsx_runtime.JSX.Element;
+declare function OpaqueGridCard({ item, isRight, buttonText, onOpen, className, }: OpaqueGridCardProps): react_jsx_runtime.JSX.Element;
 
 interface CatalogGridProps {
     items: GridCardItem[];
     buttonText?: string;
     onOpen?: (item: GridCardItem) => void;
+    /** Extra classes merged onto the grid root. */
+    className?: string;
 }
 /**
  * Wrapping flex grid of `GridCard` tiles.
  */
-declare function CatalogGrid({ items, buttonText, onOpen }: CatalogGridProps): react_jsx_runtime.JSX.Element;
+declare function CatalogGrid({ items, buttonText, onOpen, className }: CatalogGridProps): react_jsx_runtime.JSX.Element;
 
 interface CatalogCarouselProps {
     items: GridCardItem[];
     buttonText?: string;
     onOpen?: (item: GridCardItem) => void;
+    /** Extra classes merged onto the carousel root. */
+    className?: string;
 }
 /**
  * Three-card carousel (previous → active (scaled) → next).
  *
  * Decoupled from ThemeContext — uses CSS `dark:` classes.
  */
-declare function CatalogCarousel({ items, buttonText, onOpen }: CatalogCarouselProps): react_jsx_runtime.JSX.Element;
+declare function CatalogCarousel({ items, buttonText, onOpen, className }: CatalogCarouselProps): react_jsx_runtime.JSX.Element;
 
 interface CatalogProps {
     /** 'grid' | 'carousel' */
@@ -1146,6 +1162,8 @@ interface CatalogProps {
     items?: GridCardItem[];
     buttonText?: string;
     onOpen?: (item: GridCardItem) => void;
+    /** Extra classes merged onto the catalog root. */
+    className?: string;
 }
 /**
  * Switches between grid and carousel layouts for a list of application tiles.
@@ -1153,7 +1171,7 @@ interface CatalogProps {
  * @example
  * <Catalog display="carousel" items={apps} onOpen={({ to }) => navigate(to!)} />
  */
-declare function Catalog({ display, items, buttonText, onOpen }: CatalogProps): react_jsx_runtime.JSX.Element;
+declare function Catalog({ display, items, buttonText, onOpen, className }: CatalogProps): react_jsx_runtime.JSX.Element;
 
 /**
  * A single action in the context menu.
@@ -1184,6 +1202,8 @@ interface ContextMenuProps {
      * component / div / image — anything you can right-click on.
      */
     children: React__default.ReactNode;
+    /** Extra classes merged onto the menu content panel. */
+    className?: string;
 }
 /**
  * Right-click context menu, built on `@radix-ui/react-context-menu`.
@@ -1222,7 +1242,7 @@ interface ContextMenuProps {
  * </ContextMenu>
  * ```
  */
-declare function ContextMenu({ items, children }: ContextMenuProps): react_jsx_runtime.JSX.Element;
+declare function ContextMenu({ items, children, className }: ContextMenuProps): react_jsx_runtime.JSX.Element;
 /** @deprecated The Radix rewrite positions the menu automatically — no coordinates needed. */
 interface ContextMenuPosition {
     x: number;
@@ -1449,6 +1469,8 @@ interface ThemeSwitchProps {
     }) => void;
     /** Optional accessible label (defaults to "Toggle dark mode") */
     label?: string;
+    /** Extra classes merged onto the root label. */
+    className?: string;
 }
 /**
  * Theme (dark-mode) toggle switch powered by Radix Switch.
@@ -1460,7 +1482,7 @@ interface ThemeSwitchProps {
  * @example
  * <ThemeSwitch checked={isDark} onChange={({ target }) => setDark(target.checked)} />
  */
-declare function ThemeSwitch({ checked, onChange, label }: ThemeSwitchProps): react_jsx_runtime.JSX.Element;
+declare function ThemeSwitch({ checked, onChange, label, className }: ThemeSwitchProps): react_jsx_runtime.JSX.Element;
 
 interface TopBarProps {
     /** Brand area — logo, wordmark, or app name. Rendered on the leading edge. */
@@ -2772,6 +2794,8 @@ interface DatePickerProps {
     clearable?: boolean;
     /** Size preset. Default `'md'`. */
     size?: FieldSize;
+    /** Extra classes merged onto the component root. */
+    className?: string;
 }
 type TemporalPickerProps = DatePickerProps;
 /**
@@ -2809,7 +2833,7 @@ type TemporalPickerProps = DatePickerProps;
  * />
  * ```
  */
-declare function DatePicker({ value, onChange, label, placeholder, htmlFor, name: _name, layout, helperText, required, disabled, errorMessage, min, max, style, format, weekStartsOn, clearable, size, }: DatePickerProps): react_jsx_runtime.JSX.Element;
+declare function DatePicker({ value, onChange, label, placeholder, htmlFor, name: _name, layout, helperText, required, disabled, errorMessage, min, max, style, format, weekStartsOn, clearable, size, className, }: DatePickerProps): react_jsx_runtime.JSX.Element;
 
 interface TextAreaProps {
     /** Controlled value. */

package/dist/index.js

@@ -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(
@@ -1137,9 +1139,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 +1410,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 +1446,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 +1457,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 +1566,8 @@ function ScalableContainer({
   assignClassOnClick,
   expandIcon,
   collapseIcon,
-  togglePosition = "top-right"
+  togglePosition = "top-right",
+  className = ""
 }) {
   const containerRef = useRef(null);
   const [internalScaled, setInternalScaled] = useState(false);
@@ -1596,8 +1602,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 +1656,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 +1704,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 +1744,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 +1794,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 +2988,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 +4612,8 @@ function DatePicker({
   format = defaultFormat,
   weekStartsOn = 0,
   clearable = true,
-  size = "md"
+  size = "md",
+  className = ""
 }) {
   const errorId = useId();
   const hasError = errorMessage != null;
@@ -4685,7 +4694,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,