@geomak/ui 5.8.0 → 5.10.0

package/dist/index.js

@@ -607,7 +607,9 @@ function IconButton({
   disabled = false,
   size = "lg",
   loading = false,
-  loadingIcon
+  loadingIcon,
+  className = "",
+  style
 }) {
   const colorScheme = useMemo(() => {
     if (type === "primary") {
@@ -624,7 +626,8 @@ function IconButton({
       type: buttonType,
       disabled: disabled || loading,
       onClick,
-      className: `${size === "sm" ? "p-1" : "p-2"} rounded-lg shadow-md transition-colors duration-150 ${colorScheme} disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-accent`,
+      style,
+      className: `${size === "sm" ? "p-1" : "p-2"} rounded-lg shadow-md transition-colors duration-150 ${colorScheme} disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${className}`.trim(),
       children: loading ? loadingIcon : icon
     }
   );
@@ -675,7 +678,8 @@ function Button({
   disabled,
   style,
   icon,
-  onClick
+  onClick,
+  className = ""
 }) {
   return /* @__PURE__ */ jsxs(
     "button",
@@ -690,8 +694,9 @@ function Button({
         "outline-none transition-colors duration-150 select-none",
         "whitespace-nowrap",
         SIZE_CLASSES[size],
-        VARIANT_CLASSES[variant]
-      ].join(" "),
+        VARIANT_CLASSES[variant],
+        className
+      ].filter(Boolean).join(" "),
       children: [
         loading ? /* @__PURE__ */ jsx(
           "svg",
@@ -726,7 +731,8 @@ function Modal({
   cancelText = "Cancel",
   hasFooter = true,
   title,
-  children
+  children,
+  className = ""
 }) {
   const reduced = useReducedMotion();
   const maxWidth = width ?? size?.[0] ?? 600;
@@ -746,7 +752,7 @@ function Modal({
     /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(Dialog.Content, { asChild: true, children: /* @__PURE__ */ jsxs(
       motion.div,
       {
-        className: "fixed left-1/2 top-1/2 z-modal flex flex-col w-[calc(100%-2rem)] max-h-[90dvh] bg-surface rounded-2xl shadow-xl overflow-hidden focus:outline-none",
+        className: `fixed left-1/2 top-1/2 z-modal flex flex-col w-[calc(100%-2rem)] max-h-[90dvh] bg-surface rounded-2xl shadow-xl overflow-hidden focus:outline-none ${className}`.trim(),
         style: {
           maxWidth,
           x: "-50%",
@@ -808,7 +814,8 @@ function Drawer({
   onOk,
   onCancel,
   title,
-  children
+  children,
+  className = ""
 }) {
   const reduced = useReducedMotion();
   const isRight = placement === "right";
@@ -829,7 +836,7 @@ function Drawer({
     /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(Dialog.Content, { asChild: true, children: /* @__PURE__ */ jsxs(
       motion.div,
       {
-        className: `fixed top-0 bottom-0 ${isRight ? "right-0" : "left-0"} z-modal flex flex-col bg-surface shadow-xl focus:outline-none`,
+        className: `fixed top-0 bottom-0 ${isRight ? "right-0" : "left-0"} z-modal flex flex-col bg-surface shadow-xl focus:outline-none ${className}`.trim(),
         style: { width: `min(calc(100vw - 1rem), ${width}px)` },
         initial: { x: reduced ? 0 : hiddenX, opacity: reduced ? 0 : 1 },
         animate: { x: 0, opacity: 1 },
@@ -876,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 }) }),
@@ -896,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(
@@ -1130,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,
@@ -1399,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) : [];
@@ -1434,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
       }
     );
@@ -1445,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
     }
@@ -1496,9 +1508,11 @@ function List2({
   items,
   onItemClick,
   activeKey,
-  density = "comfortable"
+  density = "comfortable",
+  className = "",
+  style
 }) {
-  return /* @__PURE__ */ jsx("div", { role: "listbox", className: "flex flex-col", children: items.map((item) => {
+  return /* @__PURE__ */ jsx("div", { role: "listbox", className: `flex flex-col ${className}`.trim(), style, children: items.map((item) => {
     const isActive = activeKey === item.key;
     const isDisabled = !!item.disabled;
     return /* @__PURE__ */ jsxs(
@@ -1552,7 +1566,8 @@ function ScalableContainer({
   assignClassOnClick,
   expandIcon,
   collapseIcon,
-  togglePosition = "top-right"
+  togglePosition = "top-right",
+  className = ""
 }) {
   const containerRef = useRef(null);
   const [internalScaled, setInternalScaled] = useState(false);
@@ -1587,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",
@@ -1620,8 +1636,8 @@ function CollapseIcon() {
 function ExpandIcon() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 8V4h4M20 8V4h-4M4 16v4h4M20 16v4h-4" }) });
 }
-function GridCard({ item, buttonText = "Open Application", onOpen }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-[200px] h-[250px] rounded-lg bg-ice dark:bg-independence items-center justify-between p-2 shadow-2xl", children: [
+function GridCard({ item, buttonText = "Open Application", onOpen, className = "", style }) {
+  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col w-[200px] h-[250px] rounded-lg bg-ice dark:bg-independence items-center justify-between p-2 shadow-2xl ${className}`.trim(), style, children: [
     /* @__PURE__ */ jsx("div", { className: "text-prussian-blue dark:text-white text-lg font-bold text-center h-1/4", children: /* @__PURE__ */ jsx("h2", { children: item.title }) }),
     /* @__PURE__ */ jsx("div", { className: "h-1/4 flex items-center justify-center", children: typeof item.cover === "string" ? /* @__PURE__ */ jsx("img", { src: item.cover, alt: "Grid Card Cover" }) : item.cover }),
     /* @__PURE__ */ jsx("div", { className: "text-prussian-blue text-sm dark:text-white text-center h-1/4", children: /* @__PURE__ */ jsx("p", { children: item.description }) }),
@@ -1640,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",
@@ -1687,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([]);
@@ -1727,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",
       {
@@ -1777,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))
       }
@@ -2240,8 +2257,8 @@ function Field({
   );
 }
 var SearchIcon = /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z", clipRule: "evenodd" }) });
-var SearchInput = React8.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText }, ref) {
-  return /* @__PURE__ */ jsx(Field, { label, htmlFor, layout, helperText, children: /* @__PURE__ */ jsxs(
+var SearchInput = React8.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
+  return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, layout, helperText, children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: `flex items-center ${fieldShell({ size, disabled, focusWithin: true })}`,
@@ -2389,7 +2406,8 @@ function Dropdown({
   items = [],
   labelStyle = {},
   placeholder,
-  size = "md"
+  size = "md",
+  className = ""
 }) {
   const [open, setOpen] = useState(false);
   const [selectedItems, setSelectedItems] = useState([]);
@@ -2437,7 +2455,7 @@ function Dropdown({
     );
   };
   const isSelected = (key) => Array.isArray(value) ? value.includes(key) : value === key;
-  return /* @__PURE__ */ jsxs("div", { children: [
+  return /* @__PURE__ */ jsxs("div", { className: className || void 0, children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -2845,7 +2863,9 @@ function Table({
   footer = null,
   header = null,
   loading = false,
-  loadingRowCount = 8
+  loadingRowCount = 8,
+  className = "",
+  style
 }) {
   const searchRef = useRef(null);
   const [searchTerm, setSearchTerm] = useState("");
@@ -2905,7 +2925,7 @@ function Table({
     }
     setActivePage(newPage);
   };
-  return /* @__PURE__ */ jsxs("div", { className: "w-full h-max rounded-lg", children: [
+  return /* @__PURE__ */ jsxs("div", { className: `w-full h-max rounded-lg ${className}`.trim(), style, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
       hasSearch && /* @__PURE__ */ jsx(
         SearchInput_default,
@@ -2968,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,
@@ -3082,7 +3102,8 @@ function Sidebar({
   onToggle,
   expandedWidth = 220,
   collapsedWidth = 52,
-  footer
+  footer,
+  className = ""
 }) {
   return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs(
     motion.aside,
@@ -3090,7 +3111,7 @@ function Sidebar({
       initial: false,
       animate: { width: isExpanded ? expandedWidth : collapsedWidth },
       transition: { type: "tween", duration: 0.22, ease: [0.16, 1, 0.3, 1] },
-      className: "relative flex h-full flex-col border-r border-border bg-surface overflow-hidden flex-shrink-0",
+      className: `relative flex h-full flex-col border-r border-border bg-surface overflow-hidden flex-shrink-0 ${className}`.trim(),
       children: [
         /* @__PURE__ */ jsxs("div", { className: [
           "flex h-14 flex-shrink-0 items-center border-b border-border",
@@ -3416,6 +3437,7 @@ function TextInput({
   onBlur,
   errorMessage,
   helperText,
+  className,
   required,
   prefix,
   suffix
@@ -3444,6 +3466,7 @@ function TextInput({
   return /* @__PURE__ */ jsx(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -3478,6 +3501,7 @@ function NumberInput({
   size = "md",
   errorMessage,
   helperText,
+  className,
   required,
   inputStyle,
   labelStyle,
@@ -3522,6 +3546,7 @@ function NumberInput({
   return /* @__PURE__ */ jsx(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -3613,6 +3638,7 @@ function Password({
   onBlur,
   errorMessage,
   helperText,
+  className,
   required,
   showIcon,
   hideIcon
@@ -3623,6 +3649,7 @@ function Password({
   return /* @__PURE__ */ jsx(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -3685,7 +3712,8 @@ function Checkbox({
   disabled = false,
   required,
   layout = "horizontal",
-  labelPosition = "right"
+  labelPosition = "right",
+  className = ""
 }) {
   const isChecked = checked ?? value ?? false;
   const labelFirst = labelPosition === "left";
@@ -3763,7 +3791,7 @@ function Checkbox({
       ] })
     ] });
   }
-  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 items-start gap-1", children: [
       content,
       helperText != null && /* @__PURE__ */ jsx(FieldHelpIcon, { text: helperText })
@@ -3794,6 +3822,7 @@ function RadioGroup({
   disabled,
   required,
   helperText,
+  className,
   errorMessage
 }) {
   const errorId = useId();
@@ -3803,6 +3832,7 @@ function RadioGroup({
   return /* @__PURE__ */ jsx(
     Field,
     {
+      className,
       label,
       htmlFor: groupId,
       errorId,
@@ -3888,6 +3918,7 @@ function Switch({
   label,
   layout = "horizontal",
   helperText,
+  className,
   offLabel,
   onLabel,
   name,
@@ -3913,6 +3944,7 @@ function Switch({
   return /* @__PURE__ */ jsx(
     Field,
     {
+      className,
       label,
       htmlFor: id,
       errorId,
@@ -3967,6 +3999,7 @@ function AutoComplete({
   icon,
   errorMessage,
   helperText,
+  className,
   required,
   htmlFor
 }) {
@@ -4021,6 +4054,7 @@ function AutoComplete({
   return /* @__PURE__ */ jsx(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -4126,6 +4160,7 @@ function TreeSelect({
   disabled,
   layout = "horizontal",
   helperText,
+  className,
   required,
   errorMessage,
   style,
@@ -4213,6 +4248,7 @@ function TreeSelect({
   return /* @__PURE__ */ jsx(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -4379,6 +4415,7 @@ function FileInput({
   maxSize,
   errorMessage,
   helperText,
+  className,
   disabled,
   required,
   icon
@@ -4421,6 +4458,7 @@ function FileInput({
   return /* @__PURE__ */ jsxs(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -4574,7 +4612,8 @@ function DatePicker({
   format = defaultFormat,
   weekStartsOn = 0,
   clearable = true,
-  size = "md"
+  size = "md",
+  className = ""
 }) {
   const errorId = useId();
   const hasError = errorMessage != null;
@@ -4655,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,
@@ -4884,6 +4923,7 @@ function TextArea({
   resize,
   errorMessage,
   helperText,
+  className,
   required,
   style,
   inputStyle
@@ -4905,6 +4945,7 @@ function TextArea({
   return /* @__PURE__ */ jsxs(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -4953,6 +4994,7 @@ function SegmentedControl({
   label,
   layout = "vertical",
   helperText,
+  className,
   name,
   required,
   errorMessage,
@@ -4973,6 +5015,7 @@ function SegmentedControl({
   return /* @__PURE__ */ jsxs(
     Field,
     {
+      className,
       label,
       htmlFor: groupId,
       errorId,
@@ -5051,6 +5094,7 @@ function Slider({
   disabled,
   errorMessage,
   helperText,
+  className,
   required,
   name,
   htmlFor
@@ -5069,7 +5113,7 @@ function Slider({
     onChange?.(next);
   };
   const valueText = current.map(formatValue).join(" \u2013 ");
-  return /* @__PURE__ */ jsxs(Field, { label: void 0, errorId, errorMessage, children: [
+  return /* @__PURE__ */ jsxs(Field, { className, label: void 0, errorId, errorMessage, children: [
     (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
       label && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
         /* @__PURE__ */ jsxs("label", { htmlFor, className: "text-sm font-medium text-foreground select-none", children: [
@@ -5150,6 +5194,7 @@ function TagsInput({
   disabled,
   errorMessage,
   helperText,
+  className,
   required,
   maxTags,
   dedupe = true,
@@ -5213,6 +5258,7 @@ function TagsInput({
   return /* @__PURE__ */ jsx(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -5287,6 +5333,7 @@ function OtpInput({
   required,
   layout = "vertical",
   helperText,
+  className,
   groupAfter
 }) {
   const errorId = useId();
@@ -5340,7 +5387,7 @@ function OtpInput({
     emit(valid.join(""));
     focusBox(valid.length);
   };
-  return /* @__PURE__ */ jsx(Field, { label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxs(React8.Fragment, { children: [
+  return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxs(React8.Fragment, { children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -5395,6 +5442,7 @@ function Rating({
   name,
   layout = "vertical",
   helperText,
+  className,
   required
 }) {
   const errorId = useId();
@@ -5425,7 +5473,7 @@ function Rating({
       commit(count);
     }
   };
-  return /* @__PURE__ */ jsx(Field, { label, errorId, errorMessage, layout, required, helperText, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Field, { className, label, errorId, errorMessage, layout, required, helperText, children: /* @__PURE__ */ jsxs(
     "div",
     {
       role: interactive ? "slider" : "img",
@@ -5518,6 +5566,7 @@ function TimePicker({
   disabled,
   errorMessage,
   helperText,
+  className,
   required,
   style
 }) {
@@ -5550,7 +5599,7 @@ function TimePicker({
     },
     n
   )) });
-  return /* @__PURE__ */ jsxs(Field, { label, htmlFor, errorId, errorMessage, helperText, layout, required, children: [
+  return /* @__PURE__ */ jsxs(Field, { className, label, htmlFor, errorId, errorMessage, helperText, layout, required, children: [
     /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
       /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
         "button",
@@ -5643,6 +5692,7 @@ function DateRangePicker({
   disabled,
   errorMessage,
   helperText,
+  className,
   required,
   style
 }) {
@@ -5715,7 +5765,7 @@ function DateRangePicker({
       ] })
     ] });
   };
-  return /* @__PURE__ */ jsx(Field, { label, htmlFor, errorId, errorMessage, helperText, layout, required, children: /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => {
+  return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, errorId, errorMessage, helperText, layout, required, children: /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => {
     if (!disabled) {
       setOpen(o);
       if (!o) {
@@ -5824,6 +5874,7 @@ function ColorPicker({
   disabled,
   errorMessage,
   helperText,
+  className,
   required,
   placeholder = "Pick a colour\u2026"
 }) {
@@ -5841,7 +5892,7 @@ function ColorPicker({
     setDraft(hex);
     if (HEX_RE.test(hex)) onChange?.(hex);
   };
-  return /* @__PURE__ */ jsxs(Field, { label, htmlFor, errorId, errorMessage, helperText, layout, required, children: [
+  return /* @__PURE__ */ jsxs(Field, { className, label, htmlFor, errorId, errorMessage, helperText, layout, required, children: [
     /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
       /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
         "button",