@geomak/ui 5.8.0 → 5.9.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 },
@@ -1496,9 +1503,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(
@@ -1620,8 +1629,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 }) }),
@@ -2240,8 +2249,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 +2398,8 @@ function Dropdown({
   items = [],
   labelStyle = {},
   placeholder,
-  size = "md"
+  size = "md",
+  className = ""
 }) {
   const [open, setOpen] = useState(false);
   const [selectedItems, setSelectedItems] = useState([]);
@@ -2437,7 +2447,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 +2855,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 +2917,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,
@@ -3082,7 +3094,8 @@ function Sidebar({
   onToggle,
   expandedWidth = 220,
   collapsedWidth = 52,
-  footer
+  footer,
+  className = ""
 }) {
   return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs(
     motion.aside,
@@ -3090,7 +3103,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 +3429,7 @@ function TextInput({
   onBlur,
   errorMessage,
   helperText,
+  className,
   required,
   prefix,
   suffix
@@ -3444,6 +3458,7 @@ function TextInput({
   return /* @__PURE__ */ jsx(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -3478,6 +3493,7 @@ function NumberInput({
   size = "md",
   errorMessage,
   helperText,
+  className,
   required,
   inputStyle,
   labelStyle,
@@ -3522,6 +3538,7 @@ function NumberInput({
   return /* @__PURE__ */ jsx(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -3613,6 +3630,7 @@ function Password({
   onBlur,
   errorMessage,
   helperText,
+  className,
   required,
   showIcon,
   hideIcon
@@ -3623,6 +3641,7 @@ function Password({
   return /* @__PURE__ */ jsx(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -3685,7 +3704,8 @@ function Checkbox({
   disabled = false,
   required,
   layout = "horizontal",
-  labelPosition = "right"
+  labelPosition = "right",
+  className = ""
 }) {
   const isChecked = checked ?? value ?? false;
   const labelFirst = labelPosition === "left";
@@ -3763,7 +3783,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 +3814,7 @@ function RadioGroup({
   disabled,
   required,
   helperText,
+  className,
   errorMessage
 }) {
   const errorId = useId();
@@ -3803,6 +3824,7 @@ function RadioGroup({
   return /* @__PURE__ */ jsx(
     Field,
     {
+      className,
       label,
       htmlFor: groupId,
       errorId,
@@ -3888,6 +3910,7 @@ function Switch({
   label,
   layout = "horizontal",
   helperText,
+  className,
   offLabel,
   onLabel,
   name,
@@ -3913,6 +3936,7 @@ function Switch({
   return /* @__PURE__ */ jsx(
     Field,
     {
+      className,
       label,
       htmlFor: id,
       errorId,
@@ -3967,6 +3991,7 @@ function AutoComplete({
   icon,
   errorMessage,
   helperText,
+  className,
   required,
   htmlFor
 }) {
@@ -4021,6 +4046,7 @@ function AutoComplete({
   return /* @__PURE__ */ jsx(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -4126,6 +4152,7 @@ function TreeSelect({
   disabled,
   layout = "horizontal",
   helperText,
+  className,
   required,
   errorMessage,
   style,
@@ -4213,6 +4240,7 @@ function TreeSelect({
   return /* @__PURE__ */ jsx(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -4379,6 +4407,7 @@ function FileInput({
   maxSize,
   errorMessage,
   helperText,
+  className,
   disabled,
   required,
   icon
@@ -4421,6 +4450,7 @@ function FileInput({
   return /* @__PURE__ */ jsxs(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -4884,6 +4914,7 @@ function TextArea({
   resize,
   errorMessage,
   helperText,
+  className,
   required,
   style,
   inputStyle
@@ -4905,6 +4936,7 @@ function TextArea({
   return /* @__PURE__ */ jsxs(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -4953,6 +4985,7 @@ function SegmentedControl({
   label,
   layout = "vertical",
   helperText,
+  className,
   name,
   required,
   errorMessage,
@@ -4973,6 +5006,7 @@ function SegmentedControl({
   return /* @__PURE__ */ jsxs(
     Field,
     {
+      className,
       label,
       htmlFor: groupId,
       errorId,
@@ -5051,6 +5085,7 @@ function Slider({
   disabled,
   errorMessage,
   helperText,
+  className,
   required,
   name,
   htmlFor
@@ -5069,7 +5104,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 +5185,7 @@ function TagsInput({
   disabled,
   errorMessage,
   helperText,
+  className,
   required,
   maxTags,
   dedupe = true,
@@ -5213,6 +5249,7 @@ function TagsInput({
   return /* @__PURE__ */ jsx(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -5287,6 +5324,7 @@ function OtpInput({
   required,
   layout = "vertical",
   helperText,
+  className,
   groupAfter
 }) {
   const errorId = useId();
@@ -5340,7 +5378,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 +5433,7 @@ function Rating({
   name,
   layout = "vertical",
   helperText,
+  className,
   required
 }) {
   const errorId = useId();
@@ -5425,7 +5464,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 +5557,7 @@ function TimePicker({
   disabled,
   errorMessage,
   helperText,
+  className,
   required,
   style
 }) {
@@ -5550,7 +5590,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 +5683,7 @@ function DateRangePicker({
   disabled,
   errorMessage,
   helperText,
+  className,
   required,
   style
 }) {
@@ -5715,7 +5756,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 +5865,7 @@ function ColorPicker({
   disabled,
   errorMessage,
   helperText,
+  className,
   required,
   placeholder = "Pick a colour\u2026"
 }) {
@@ -5841,7 +5883,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",