@geomak/ui 5.7.0 → 5.7.2

package/dist/index.cjs

@@ -2200,6 +2200,7 @@ function FieldLabel({
   required,
   helperText,
   horizontal = false,
+  align = "start",
   style,
   width,
   className = ""
@@ -2211,7 +2212,10 @@ function FieldLabel({
       style: { width: horizontal ? width : void 0, ...style },
       className: [
         "flex items-center gap-1",
-        horizontal ? "mt-2 flex-shrink-0 whitespace-nowrap" : "",
+        horizontal ? "flex-shrink-0 whitespace-nowrap" : "",
+        // Only the 'start' alignment needs the top nudge; 'center' relies
+        // on the row's items-center to line up with a short control.
+        horizontal && align === "start" ? "mt-2" : "",
         className
       ].filter(Boolean).join(" "),
       children: [
@@ -2232,6 +2236,7 @@ function Field({
   layout = "vertical",
   required,
   helperText,
+  labelAlign = "start",
   labelStyle,
   labelWidth,
   className = "",
@@ -2244,7 +2249,7 @@ function Field({
     {
       className: [
         "flex",
-        horizontal ? "flex-row items-start gap-3" : "flex-col gap-1.5",
+        horizontal ? `flex-row gap-3 ${labelAlign === "center" ? "items-center" : "items-start"}` : "flex-col gap-1.5",
         className
       ].filter(Boolean).join(" "),
       children: [
@@ -2256,6 +2261,7 @@ function Field({
             required,
             helperText,
             horizontal,
+            align: labelAlign,
             style: labelStyle,
             width: labelWidth
           }
@@ -3714,14 +3720,15 @@ function Checkbox({
   // legacy alias
   onChange,
   label,
+  description,
   name,
   htmlFor,
   errorMessage,
+  helperText,
   disabled = false,
+  required,
   layout = "horizontal",
-  labelPosition = "right",
-  helperText,
-  required
+  labelPosition = "right"
 }) {
   const isChecked = checked ?? value ?? false;
   const labelFirst = labelPosition === "left";
@@ -3734,11 +3741,12 @@ function Checkbox({
       name,
       checked: isChecked,
       disabled,
+      required,
       onCheckedChange: (c) => onChange?.({ target: { checked: !!c, id: htmlFor, name } }),
       className: [
-        "relative flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center",
+        "relative mt-0.5 flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center",
         "rounded-sm border transition-colors duration-150",
-        "border-border-strong bg-surface",
+        hasError ? "border-status-error" : "border-border-strong",
         "data-[state=checked]:bg-accent data-[state=checked]:border-accent",
         // Focus halo matches the field tokens for a consistent look.
         "focus:outline-none focus-visible:ring-[3px] focus-visible:ring-focus-ring",
@@ -3750,33 +3758,60 @@ function Checkbox({
       children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxPrimitive__namespace.Indicator, { className: "flex items-center justify-center data-[state=checked]:animate-check-pop", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "11", height: "9", viewBox: "0 0 11 9", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 4.5L4 7.5L10 1", stroke: "white", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
     }
   );
-  const labelEl = label && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-foreground-secondary select-none leading-snug", children: [
-    label,
-    required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-status-error ml-0.5", "aria-hidden": "true", children: "*" })
-  ] });
+  const labelText = label != null && /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      htmlFor,
+      className: ["block select-none text-sm text-foreground leading-snug", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"].join(" "),
+      children: [
+        label,
+        required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-status-error ml-0.5", "aria-hidden": "true", children: "*" })
+      ]
+    }
+  );
+  const descriptionEl = description != null && /* @__PURE__ */ jsxRuntime.jsx(
+    "label",
+    {
+      htmlFor,
+      className: `block text-xs text-foreground-secondary mt-0.5 ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`,
+      children: description
+    }
+  );
+  let content;
+  if (layout === "vertical") {
+    content = /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col items-start gap-1.5", children: [
+      labelFirst ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        labelText,
+        box
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        box,
+        labelText
+      ] }),
+      descriptionEl
+    ] });
+  } else if (labelFirst) {
+    content = /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-start gap-2.5", children: [
+        labelText,
+        box
+      ] }),
+      descriptionEl
+    ] });
+  } else {
+    content = /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-start gap-2.5", children: [
+      box,
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col", children: [
+        labelText,
+        descriptionEl
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "label",
-        {
-          htmlFor,
-          className: [
-            "inline-flex",
-            layout === "vertical" ? "flex-col items-start gap-1.5" : "flex-row items-center gap-2.5",
-            disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
-          ].join(" "),
-          children: labelFirst ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            labelEl,
-            box
-          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            box,
-            labelEl
-          ] })
-        }
-      ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-1", children: [
+      content,
       helperText != null && /* @__PURE__ */ jsxRuntime.jsx(FieldHelpIcon, { text: helperText })
     ] }),
-    errorMessage && /* @__PURE__ */ jsxRuntime.jsx("span", { id: errorId, className: "text-xs text-status-error mt-0.5", children: errorMessage })
+    hasError && /* @__PURE__ */ jsxRuntime.jsx("span", { id: errorId, className: "text-xs text-status-error mt-0.5", children: errorMessage })
   ] });
 }
 var DOT_SIZE = {
@@ -3852,29 +3887,35 @@ function RadioGroup({
                 children: /* @__PURE__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Indicator, { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block h-1/2 w-1/2 rounded-full bg-accent" }) })
               }
             );
-            const labelEl = /* @__PURE__ */ jsxRuntime.jsxs(
+            const labelClass = [
+              "block select-none",
+              opt.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+            ].join(" ");
+            const labelTextEl = /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: itemId, className: labelClass, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `block ${TEXT_SIZE[size]} text-foreground`, children: opt.label }) });
+            const descriptionEl = opt.description ? /* @__PURE__ */ jsxRuntime.jsx(
               "label",
               {
                 htmlFor: itemId,
-                className: [
-                  "select-none",
-                  opt.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
-                  labelFirst ? "text-right" : ""
-                ].filter(Boolean).join(" "),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: `block ${TEXT_SIZE[size]} text-foreground`, children: opt.label }),
-                  opt.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-xs text-foreground-secondary mt-0.5", children: opt.description })
-                ]
+                className: `block text-xs text-foreground-secondary mt-0.5 ${opt.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`,
+                children: opt.description
               }
-            );
-            const rowClass = labelFirst && layout === "vertical" ? "grid grid-cols-[1fr_auto] items-start gap-2.5" : "flex items-start gap-2.5";
-            return /* @__PURE__ */ jsxRuntime.jsx("div", { className: rowClass, children: labelFirst ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              labelEl,
-              dot
-            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            ) : null;
+            if (labelFirst) {
+              return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2.5", children: [
+                  labelTextEl,
+                  dot
+                ] }),
+                descriptionEl
+              ] }, opt.value);
+            }
+            return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2.5", children: [
               dot,
-              labelEl
-            ] }) }, opt.value);
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col", children: [
+                labelTextEl,
+                descriptionEl
+              ] })
+            ] }, opt.value);
           })
         }
       )
@@ -3922,6 +3963,7 @@ function Switch({
       layout,
       required,
       helperText,
+      labelAlign: "center",
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5", children: [
         offLabel != null && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: stateLabel(!isOn), children: offLabel }),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -4211,19 +4253,17 @@ function TreeSelect({
       setOpen(false);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex ${layout === "vertical" ? "flex-col gap-1" : "flex-row items-center gap-2"}`, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        FieldLabel,
-        {
-          label,
-          htmlFor,
-          required,
-          helperText,
-          horizontal: layout === "horizontal"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(Popover__namespace.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Field,
+    {
+      label,
+      htmlFor,
+      errorId,
+      errorMessage,
+      layout,
+      required,
+      helperText,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { 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",
           {
@@ -4287,10 +4327,9 @@ function TreeSelect({
             )
           }
         ) })
-      ] })
-    ] }),
-    hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { id: errorId, className: "text-xs text-status-error ml-1", children: errorMessage })
-  ] });
+      ] }) })
+    }
+  );
 }
 function TreeNodeRow({
   node,