@geomak/ui 5.8.0 → 5.9.0

package/dist/index.cjs

@@ -642,7 +642,9 @@ function IconButton({
   disabled = false,
   size = "lg",
   loading = false,
-  loadingIcon
+  loadingIcon,
+  className = "",
+  style
 }) {
   const colorScheme = React8.useMemo(() => {
     if (type === "primary") {
@@ -659,7 +661,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
     }
   );
@@ -710,7 +713,8 @@ function Button({
   disabled,
   style,
   icon,
-  onClick
+  onClick,
+  className = ""
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
@@ -725,8 +729,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__ */ jsxRuntime.jsx(
           "svg",
@@ -761,7 +766,8 @@ function Modal({
   cancelText = "Cancel",
   hasFooter = true,
   title,
-  children
+  children,
+  className = ""
 }) {
   const reduced = framerMotion.useReducedMotion();
   const maxWidth = width ?? size?.[0] ?? 600;
@@ -781,7 +787,7 @@ function Modal({
     /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Content, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       framerMotion.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%",
@@ -843,7 +849,8 @@ function Drawer({
   onOk,
   onCancel,
   title,
-  children
+  children,
+  className = ""
 }) {
   const reduced = framerMotion.useReducedMotion();
   const isRight = placement === "right";
@@ -864,7 +871,7 @@ function Drawer({
     /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Content, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       framerMotion.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 },
@@ -1531,9 +1538,11 @@ function List2({
   items,
   onItemClick,
   activeKey,
-  density = "comfortable"
+  density = "comfortable",
+  className = "",
+  style
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "listbox", className: "flex flex-col", children: items.map((item) => {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
@@ -1655,8 +1664,8 @@ function CollapseIcon() {
 function ExpandIcon() {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 8V4h4M20 8V4h-4M4 16v4h4M20 16v4h-4" }) });
 }
-function GridCard({ item, buttonText = "Open Application", onOpen }) {
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "text-prussian-blue dark:text-white text-lg font-bold text-center h-1/4", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: item.title }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1/4 flex items-center justify-center", children: typeof item.cover === "string" ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: item.cover, alt: "Grid Card Cover" }) : item.cover }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-prussian-blue text-sm dark:text-white text-center h-1/4", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: item.description }) }),
@@ -2275,8 +2284,8 @@ function Field({
   );
 }
 var SearchIcon = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__default.default.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Field, { label, htmlFor, layout, helperText, children: /* @__PURE__ */ jsxRuntime.jsxs(
+var SearchInput = React8__default.default.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Field, { className, label, htmlFor, layout, helperText, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: `flex items-center ${fieldShell({ size, disabled, focusWithin: true })}`,
@@ -2424,7 +2433,8 @@ function Dropdown({
   items = [],
   labelStyle = {},
   placeholder,
-  size = "md"
+  size = "md",
+  className = ""
 }) {
   const [open, setOpen] = React8.useState(false);
   const [selectedItems, setSelectedItems] = React8.useState([]);
@@ -2472,7 +2482,7 @@ function Dropdown({
     );
   };
   const isSelected = (key) => Array.isArray(value) ? value.includes(key) : value === key;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: className || void 0, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -2880,7 +2890,9 @@ function Table({
   footer = null,
   header = null,
   loading = false,
-  loadingRowCount = 8
+  loadingRowCount = 8,
+  className = "",
+  style
 }) {
   const searchRef = React8.useRef(null);
   const [searchTerm, setSearchTerm] = React8.useState("");
@@ -2940,7 +2952,7 @@ function Table({
     }
     setActivePage(newPage);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full h-max rounded-lg", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `w-full h-max rounded-lg ${className}`.trim(), style, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
       hasSearch && /* @__PURE__ */ jsxRuntime.jsx(
         SearchInput_default,
@@ -3117,7 +3129,8 @@ function Sidebar({
   onToggle,
   expandedWidth = 220,
   collapsedWidth = 52,
-  footer
+  footer,
+  className = ""
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxRuntime.jsxs(
     framerMotion.motion.aside,
@@ -3125,7 +3138,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__ */ jsxRuntime.jsxs("div", { className: [
           "flex h-14 flex-shrink-0 items-center border-b border-border",
@@ -3451,6 +3464,7 @@ function TextInput({
   onBlur,
   errorMessage,
   helperText,
+  className,
   required,
   prefix,
   suffix
@@ -3479,6 +3493,7 @@ function TextInput({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -3513,6 +3528,7 @@ function NumberInput({
   size = "md",
   errorMessage,
   helperText,
+  className,
   required,
   inputStyle,
   labelStyle,
@@ -3557,6 +3573,7 @@ function NumberInput({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -3648,6 +3665,7 @@ function Password({
   onBlur,
   errorMessage,
   helperText,
+  className,
   required,
   showIcon,
   hideIcon
@@ -3658,6 +3676,7 @@ function Password({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -3720,7 +3739,8 @@ function Checkbox({
   disabled = false,
   required,
   layout = "horizontal",
-  labelPosition = "right"
+  labelPosition = "right",
+  className = ""
 }) {
   const isChecked = checked ?? value ?? false;
   const labelFirst = labelPosition === "left";
@@ -3798,7 +3818,7 @@ function Checkbox({
       ] })
     ] });
   }
-  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 items-start gap-1", children: [
       content,
       helperText != null && /* @__PURE__ */ jsxRuntime.jsx(FieldHelpIcon, { text: helperText })
@@ -3829,6 +3849,7 @@ function RadioGroup({
   disabled,
   required,
   helperText,
+  className,
   errorMessage
 }) {
   const errorId = React8.useId();
@@ -3838,6 +3859,7 @@ function RadioGroup({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Field,
     {
+      className,
       label,
       htmlFor: groupId,
       errorId,
@@ -3923,6 +3945,7 @@ function Switch({
   label,
   layout = "horizontal",
   helperText,
+  className,
   offLabel,
   onLabel,
   name,
@@ -3948,6 +3971,7 @@ function Switch({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Field,
     {
+      className,
       label,
       htmlFor: id,
       errorId,
@@ -4002,6 +4026,7 @@ function AutoComplete({
   icon,
   errorMessage,
   helperText,
+  className,
   required,
   htmlFor
 }) {
@@ -4056,6 +4081,7 @@ function AutoComplete({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -4161,6 +4187,7 @@ function TreeSelect({
   disabled,
   layout = "horizontal",
   helperText,
+  className,
   required,
   errorMessage,
   style,
@@ -4248,6 +4275,7 @@ function TreeSelect({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -4414,6 +4442,7 @@ function FileInput({
   maxSize,
   errorMessage,
   helperText,
+  className,
   disabled,
   required,
   icon
@@ -4456,6 +4485,7 @@ function FileInput({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -4919,6 +4949,7 @@ function TextArea({
   resize,
   errorMessage,
   helperText,
+  className,
   required,
   style,
   inputStyle
@@ -4940,6 +4971,7 @@ function TextArea({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -4988,6 +5020,7 @@ function SegmentedControl({
   label,
   layout = "vertical",
   helperText,
+  className,
   name,
   required,
   errorMessage,
@@ -5008,6 +5041,7 @@ function SegmentedControl({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Field,
     {
+      className,
       label,
       htmlFor: groupId,
       errorId,
@@ -5086,6 +5120,7 @@ function Slider({
   disabled,
   errorMessage,
   helperText,
+  className,
   required,
   name,
   htmlFor
@@ -5104,7 +5139,7 @@ function Slider({
     onChange?.(next);
   };
   const valueText = current.map(formatValue).join(" \u2013 ");
-  return /* @__PURE__ */ jsxRuntime.jsxs(Field, { label: void 0, errorId, errorMessage, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Field, { className, label: void 0, errorId, errorMessage, children: [
     (label || showValue) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
       label && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor, className: "text-sm font-medium text-foreground select-none", children: [
@@ -5185,6 +5220,7 @@ function TagsInput({
   disabled,
   errorMessage,
   helperText,
+  className,
   required,
   maxTags,
   dedupe = true,
@@ -5248,6 +5284,7 @@ function TagsInput({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Field,
     {
+      className,
       label,
       htmlFor,
       errorId,
@@ -5322,6 +5359,7 @@ function OtpInput({
   required,
   layout = "vertical",
   helperText,
+  className,
   groupAfter
 }) {
   const errorId = React8.useId();
@@ -5375,7 +5413,7 @@ function OtpInput({
     emit(valid.join(""));
     focusBox(valid.length);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(Field, { label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(React8__default.default.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Field, { className, label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(React8__default.default.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
@@ -5430,6 +5468,7 @@ function Rating({
   name,
   layout = "vertical",
   helperText,
+  className,
   required
 }) {
   const errorId = React8.useId();
@@ -5460,7 +5499,7 @@ function Rating({
       commit(count);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(Field, { label, errorId, errorMessage, layout, required, helperText, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(Field, { className, label, errorId, errorMessage, layout, required, helperText, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       role: interactive ? "slider" : "img",
@@ -5553,6 +5592,7 @@ function TimePicker({
   disabled,
   errorMessage,
   helperText,
+  className,
   required,
   style
 }) {
@@ -5585,7 +5625,7 @@ function TimePicker({
     },
     n
   )) });
-  return /* @__PURE__ */ jsxRuntime.jsxs(Field, { label, htmlFor, errorId, errorMessage, helperText, layout, required, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Field, { className, label, htmlFor, errorId, errorMessage, helperText, layout, required, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Popover__namespace.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
       /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
@@ -5678,6 +5718,7 @@ function DateRangePicker({
   disabled,
   errorMessage,
   helperText,
+  className,
   required,
   style
 }) {
@@ -5750,7 +5791,7 @@ function DateRangePicker({
       ] })
     ] });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(Field, { label, htmlFor, errorId, errorMessage, helperText, layout, required, children: /* @__PURE__ */ jsxRuntime.jsxs(Popover__namespace.Root, { open: open && !disabled, onOpenChange: (o) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Field, { className, label, htmlFor, errorId, errorMessage, helperText, layout, required, children: /* @__PURE__ */ jsxRuntime.jsxs(Popover__namespace.Root, { open: open && !disabled, onOpenChange: (o) => {
     if (!disabled) {
       setOpen(o);
       if (!o) {
@@ -5859,6 +5900,7 @@ function ColorPicker({
   disabled,
   errorMessage,
   helperText,
+  className,
   required,
   placeholder = "Pick a colour\u2026"
 }) {
@@ -5876,7 +5918,7 @@ function ColorPicker({
     setDraft(hex);
     if (HEX_RE.test(hex)) onChange?.(hex);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(Field, { label, htmlFor, errorId, errorMessage, helperText, layout, required, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Field, { className, label, htmlFor, errorId, errorMessage, helperText, layout, required, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Popover__namespace.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
       /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
         "button",