@geomak/ui 5.5.2 → 5.5.3

package/dist/index.d.cts

@@ -2134,8 +2134,17 @@ interface RadioGroupProps {
     onChange?: (value: string) => void;
     name?: string;
     label?: React$1.ReactNode;
-    /** Group orientation. Default `'vertical'`. */
-    orientation?: 'vertical' | 'horizontal';
+    /**
+     * Option arrangement. `'vertical'` (default) stacks options in a column;
+     * `'horizontal'` lays them in a row. Named `layout` for consistency with
+     * the other inputs.
+     */
+    layout?: 'vertical' | 'horizontal';
+    /**
+     * Where each option's label sits relative to its radio dot.
+     * `'right'` (default) → dot then label; `'left'` → label then dot.
+     */
+    labelPosition?: 'left' | 'right';
     /** Size preset — controls the dot + text size. Default `'md'`. */
     size?: FieldSize;
     disabled?: boolean;
@@ -2165,7 +2174,7 @@ interface RadioGroupProps {
  * />
  * ```
  */
-declare function RadioGroup({ options, value, defaultValue, onChange, name, label, orientation, size, disabled, required, errorMessage, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
+declare function RadioGroup({ options, value, defaultValue, onChange, name, label, layout, labelPosition, size, disabled, required, errorMessage, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
 
 interface SwitchInputProps {
     checked?: boolean;

package/dist/index.d.ts

@@ -2134,8 +2134,17 @@ interface RadioGroupProps {
     onChange?: (value: string) => void;
     name?: string;
     label?: React$1.ReactNode;
-    /** Group orientation. Default `'vertical'`. */
-    orientation?: 'vertical' | 'horizontal';
+    /**
+     * Option arrangement. `'vertical'` (default) stacks options in a column;
+     * `'horizontal'` lays them in a row. Named `layout` for consistency with
+     * the other inputs.
+     */
+    layout?: 'vertical' | 'horizontal';
+    /**
+     * Where each option's label sits relative to its radio dot.
+     * `'right'` (default) → dot then label; `'left'` → label then dot.
+     */
+    labelPosition?: 'left' | 'right';
     /** Size preset — controls the dot + text size. Default `'md'`. */
     size?: FieldSize;
     disabled?: boolean;
@@ -2165,7 +2174,7 @@ interface RadioGroupProps {
  * />
  * ```
  */
-declare function RadioGroup({ options, value, defaultValue, onChange, name, label, orientation, size, disabled, required, errorMessage, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
+declare function RadioGroup({ options, value, defaultValue, onChange, name, label, layout, labelPosition, size, disabled, required, errorMessage, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
 
 interface SwitchInputProps {
     checked?: boolean;

package/dist/index.js

@@ -2330,7 +2330,7 @@ function Dropdown({
                 "aria-invalid": hasError || void 0,
                 "aria-describedby": hasError ? errorId : void 0,
                 style,
-                className: `flex items-center justify-between gap-1 cursor-pointer select-none min-h-[36px] px-3 py-1.5 ${fieldShell({ size, hasError, disabled, sized: false })}`,
+                className: `flex items-center justify-between gap-2 cursor-pointer select-none min-h-[36px] px-3 py-1.5 ${!style?.width ? "min-w-[200px]" : ""} ${fieldShell({ size, hasError, disabled, sized: false })}`,
                 tabIndex: disabled ? -1 : 0,
                 onKeyDown: (e) => {
                   if (disabled) return;
@@ -2340,31 +2340,25 @@ function Dropdown({
                   }
                 },
                 children: [
-                  /* @__PURE__ */ jsx(
-                    "div",
+                  /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0 flex flex-wrap items-center gap-1.5", children: !value || Array.isArray(value) && value.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-foreground-muted text-sm", children: placeholder }) : Array.isArray(value) ? value.map((val) => /* @__PURE__ */ jsx(
+                    Tag,
                     {
-                      className: `${!style?.width ? "min-w-[200px]" : ""} flex flex-wrap items-center gap-1.5`,
-                      children: !value || Array.isArray(value) && value.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-foreground-muted text-sm", children: placeholder }) : Array.isArray(value) ? value.map((val) => /* @__PURE__ */ jsx(
-                        Tag,
-                        {
-                          disabled,
-                          removeLabel: `Remove ${labelFor(val)}`,
-                          onRemove: () => removeSelected(val),
-                          children: labelFor(val)
-                        },
-                        String(val)
-                      )) : /* @__PURE__ */ jsx(
-                        Tag,
-                        {
-                          disabled,
-                          removeLabel: `Remove ${labelFor(value)}`,
-                          onRemove: () => removeSelected(value),
-                          children: labelFor(value)
-                        }
-                      )
+                      disabled,
+                      removeLabel: `Remove ${labelFor(val)}`,
+                      onRemove: () => removeSelected(val),
+                      children: labelFor(val)
+                    },
+                    String(val)
+                  )) : /* @__PURE__ */ jsx(
+                    Tag,
+                    {
+                      disabled,
+                      removeLabel: `Remove ${labelFor(value)}`,
+                      onRemove: () => removeSelected(value),
+                      children: labelFor(value)
                     }
-                  ),
-                  /* @__PURE__ */ jsx("div", { className: `flex-shrink-0 ml-2 text-foreground-muted transition-transform duration-200 ${open ? "rotate-180" : "rotate-0"}`, "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
+                  ) }),
+                  /* @__PURE__ */ jsx("div", { className: `flex-shrink-0 text-foreground-muted transition-transform duration-200 ${open ? "rotate-180" : "rotate-0"}`, "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
                 ]
               }
             ) }),
@@ -3622,7 +3616,8 @@ function RadioGroup({
   onChange,
   name,
   label,
-  orientation = "vertical",
+  layout = "vertical",
+  labelPosition = "right",
   size = "md",
   disabled,
   required,
@@ -3631,6 +3626,7 @@ function RadioGroup({
   const errorId = useId();
   const groupId = useId();
   const hasError = errorMessage != null;
+  const labelFirst = labelPosition === "left";
   return /* @__PURE__ */ jsx(
     Field,
     {
@@ -3651,44 +3647,51 @@ function RadioGroup({
           required,
           "aria-invalid": hasError || void 0,
           "aria-describedby": hasError ? errorId : void 0,
-          orientation,
-          className: orientation === "horizontal" ? "flex flex-row flex-wrap gap-5" : "flex flex-col gap-3",
+          orientation: layout,
+          className: layout === "horizontal" ? "flex flex-row flex-wrap gap-5" : "flex flex-col gap-3",
           children: options.map((opt) => {
             const itemId = `${groupId}-${opt.value}`;
-            return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5", children: [
-              /* @__PURE__ */ jsx(
-                RadioGroupPrimitive.Item,
-                {
-                  id: itemId,
-                  value: opt.value,
-                  disabled: opt.disabled,
-                  className: [
-                    DOT_SIZE[size],
-                    "mt-0.5 flex-shrink-0 rounded-full border bg-surface transition-colors duration-150",
-                    "border-border-strong",
-                    "hover:border-accent",
-                    "data-[state=checked]:border-accent",
-                    "focus:outline-none focus-visible:ring-[3px] focus-visible:ring-focus-ring",
-                    "disabled:cursor-not-allowed disabled:opacity-50"
-                  ].join(" "),
-                  children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "block h-1/2 w-1/2 rounded-full bg-accent" }) })
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "label",
-                {
-                  htmlFor: itemId,
-                  className: [
-                    "select-none",
-                    opt.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
-                  ].join(" "),
-                  children: [
-                    /* @__PURE__ */ jsx("span", { className: `block ${TEXT_SIZE[size]} text-foreground`, children: opt.label }),
-                    opt.description && /* @__PURE__ */ jsx("span", { className: "block text-xs text-foreground-secondary mt-0.5", children: opt.description })
-                  ]
-                }
-              )
-            ] }, opt.value);
+            const dot = /* @__PURE__ */ jsx(
+              RadioGroupPrimitive.Item,
+              {
+                id: itemId,
+                value: opt.value,
+                disabled: opt.disabled,
+                className: [
+                  DOT_SIZE[size],
+                  "mt-0.5 flex-shrink-0 rounded-full border bg-surface transition-colors duration-150",
+                  "border-border-strong",
+                  "hover:border-accent",
+                  "data-[state=checked]:border-accent",
+                  // Border-only focus, consistent with the fields.
+                  "focus:outline-none focus-visible:border-accent",
+                  "disabled:cursor-not-allowed disabled:opacity-50"
+                ].join(" "),
+                children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "block h-1/2 w-1/2 rounded-full bg-accent" }) })
+              }
+            );
+            const labelEl = /* @__PURE__ */ jsxs(
+              "label",
+              {
+                htmlFor: itemId,
+                className: [
+                  "select-none",
+                  opt.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+                  labelFirst ? "text-right" : ""
+                ].filter(Boolean).join(" "),
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: `block ${TEXT_SIZE[size]} text-foreground`, children: opt.label }),
+                  opt.description && /* @__PURE__ */ jsx("span", { className: "block text-xs text-foreground-secondary mt-0.5", children: opt.description })
+                ]
+              }
+            );
+            return /* @__PURE__ */ jsx("div", { className: "flex items-start gap-2.5", children: labelFirst ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              labelEl,
+              dot
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              dot,
+              labelEl
+            ] }) }, opt.value);
           })
         }
       )
@@ -4419,11 +4422,11 @@ function DatePicker({
   };
   const displayValue = value ? format(value) : "";
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsxs("div", { className: `flex ${layout === "vertical" ? "flex-col gap-1" : "flex-row items-center gap-2"}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: `flex ${layout === "vertical" ? "flex-col gap-1.5" : "flex-row items-start gap-3"}`, children: [
       label && /* @__PURE__ */ jsx(
         "label",
         {
-          className: "text-sm font-medium ml-1 max-content select-none text-foreground",
+          className: `text-sm font-medium select-none text-foreground ${layout === "horizontal" ? "mt-2 flex-shrink-0 whitespace-nowrap" : ""}`,
           htmlFor,
           children: label
         }
@@ -5079,10 +5082,11 @@ function OtpInput({
         className: [
           BOX_SIZE[size],
           "text-center font-medium rounded-lg border bg-surface text-foreground",
-          "transition-[border-color,box-shadow] duration-150",
+          "transition-[border-color] duration-150",
           hasError ? "border-status-error" : "border-border",
           "hover:border-border-strong",
-          "focus:outline-none focus:border-accent focus:ring-[3px] focus:ring-focus-ring",
+          // Border-only focus, consistent with every field (no clip-prone ring).
+          "focus:outline-none focus:border-accent",
           "disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed"
         ].join(" ")
       }