@geomak/ui 5.5.2 → 5.5.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -2365,7 +2365,7 @@ function Dropdown({
2365
2365
  "aria-invalid": hasError || void 0,
2366
2366
  "aria-describedby": hasError ? errorId : void 0,
2367
2367
  style,
2368
- 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 })}`,
2368
+ 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 })}`,
2369
2369
  tabIndex: disabled ? -1 : 0,
2370
2370
  onKeyDown: (e) => {
2371
2371
  if (disabled) return;
@@ -2375,31 +2375,25 @@ function Dropdown({
2375
2375
  }
2376
2376
  },
2377
2377
  children: [
2378
- /* @__PURE__ */ jsxRuntime.jsx(
2379
- "div",
2378
+ /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-foreground-muted text-sm", children: placeholder }) : Array.isArray(value) ? value.map((val) => /* @__PURE__ */ jsxRuntime.jsx(
2379
+ Tag,
2380
2380
  {
2381
- className: `${!style?.width ? "min-w-[200px]" : ""} flex flex-wrap items-center gap-1.5`,
2382
- children: !value || Array.isArray(value) && value.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground-muted text-sm", children: placeholder }) : Array.isArray(value) ? value.map((val) => /* @__PURE__ */ jsxRuntime.jsx(
2383
- Tag,
2384
- {
2385
- disabled,
2386
- removeLabel: `Remove ${labelFor(val)}`,
2387
- onRemove: () => removeSelected(val),
2388
- children: labelFor(val)
2389
- },
2390
- String(val)
2391
- )) : /* @__PURE__ */ jsxRuntime.jsx(
2392
- Tag,
2393
- {
2394
- disabled,
2395
- removeLabel: `Remove ${labelFor(value)}`,
2396
- onRemove: () => removeSelected(value),
2397
- children: labelFor(value)
2398
- }
2399
- )
2381
+ disabled,
2382
+ removeLabel: `Remove ${labelFor(val)}`,
2383
+ onRemove: () => removeSelected(val),
2384
+ children: labelFor(val)
2385
+ },
2386
+ String(val)
2387
+ )) : /* @__PURE__ */ jsxRuntime.jsx(
2388
+ Tag,
2389
+ {
2390
+ disabled,
2391
+ removeLabel: `Remove ${labelFor(value)}`,
2392
+ onRemove: () => removeSelected(value),
2393
+ children: labelFor(value)
2400
2394
  }
2401
- ),
2402
- /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
2395
+ ) }),
2396
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-shrink-0 text-foreground-muted transition-transform duration-200 ${open ? "rotate-180" : "rotate-0"}`, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
2403
2397
  ]
2404
2398
  }
2405
2399
  ) }),
@@ -3657,7 +3651,8 @@ function RadioGroup({
3657
3651
  onChange,
3658
3652
  name,
3659
3653
  label,
3660
- orientation = "vertical",
3654
+ layout = "vertical",
3655
+ labelPosition = "right",
3661
3656
  size = "md",
3662
3657
  disabled,
3663
3658
  required,
@@ -3666,6 +3661,7 @@ function RadioGroup({
3666
3661
  const errorId = React8.useId();
3667
3662
  const groupId = React8.useId();
3668
3663
  const hasError = errorMessage != null;
3664
+ const labelFirst = labelPosition === "left";
3669
3665
  return /* @__PURE__ */ jsxRuntime.jsx(
3670
3666
  Field,
3671
3667
  {
@@ -3686,44 +3682,51 @@ function RadioGroup({
3686
3682
  required,
3687
3683
  "aria-invalid": hasError || void 0,
3688
3684
  "aria-describedby": hasError ? errorId : void 0,
3689
- orientation,
3690
- className: orientation === "horizontal" ? "flex flex-row flex-wrap gap-5" : "flex flex-col gap-3",
3685
+ orientation: layout,
3686
+ className: layout === "horizontal" ? "flex flex-row flex-wrap gap-5" : "flex flex-col gap-3",
3691
3687
  children: options.map((opt) => {
3692
3688
  const itemId = `${groupId}-${opt.value}`;
3693
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2.5", children: [
3694
- /* @__PURE__ */ jsxRuntime.jsx(
3695
- RadioGroupPrimitive__namespace.Item,
3696
- {
3697
- id: itemId,
3698
- value: opt.value,
3699
- disabled: opt.disabled,
3700
- className: [
3701
- DOT_SIZE[size],
3702
- "mt-0.5 flex-shrink-0 rounded-full border bg-surface transition-colors duration-150",
3703
- "border-border-strong",
3704
- "hover:border-accent",
3705
- "data-[state=checked]:border-accent",
3706
- "focus:outline-none focus-visible:ring-[3px] focus-visible:ring-focus-ring",
3707
- "disabled:cursor-not-allowed disabled:opacity-50"
3708
- ].join(" "),
3709
- 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" }) })
3710
- }
3711
- ),
3712
- /* @__PURE__ */ jsxRuntime.jsxs(
3713
- "label",
3714
- {
3715
- htmlFor: itemId,
3716
- className: [
3717
- "select-none",
3718
- opt.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
3719
- ].join(" "),
3720
- children: [
3721
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: `block ${TEXT_SIZE[size]} text-foreground`, children: opt.label }),
3722
- opt.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-xs text-foreground-secondary mt-0.5", children: opt.description })
3723
- ]
3724
- }
3725
- )
3726
- ] }, opt.value);
3689
+ const dot = /* @__PURE__ */ jsxRuntime.jsx(
3690
+ RadioGroupPrimitive__namespace.Item,
3691
+ {
3692
+ id: itemId,
3693
+ value: opt.value,
3694
+ disabled: opt.disabled,
3695
+ className: [
3696
+ DOT_SIZE[size],
3697
+ "mt-0.5 flex-shrink-0 rounded-full border bg-surface transition-colors duration-150",
3698
+ "border-border-strong",
3699
+ "hover:border-accent",
3700
+ "data-[state=checked]:border-accent",
3701
+ // Border-only focus, consistent with the fields.
3702
+ "focus:outline-none focus-visible:border-accent",
3703
+ "disabled:cursor-not-allowed disabled:opacity-50"
3704
+ ].join(" "),
3705
+ 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" }) })
3706
+ }
3707
+ );
3708
+ const labelEl = /* @__PURE__ */ jsxRuntime.jsxs(
3709
+ "label",
3710
+ {
3711
+ htmlFor: itemId,
3712
+ className: [
3713
+ "select-none",
3714
+ opt.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
3715
+ labelFirst ? "text-right" : ""
3716
+ ].filter(Boolean).join(" "),
3717
+ children: [
3718
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: `block ${TEXT_SIZE[size]} text-foreground`, children: opt.label }),
3719
+ opt.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-xs text-foreground-secondary mt-0.5", children: opt.description })
3720
+ ]
3721
+ }
3722
+ );
3723
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start gap-2.5", children: labelFirst ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3724
+ labelEl,
3725
+ dot
3726
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3727
+ dot,
3728
+ labelEl
3729
+ ] }) }, opt.value);
3727
3730
  })
3728
3731
  }
3729
3732
  )
@@ -4454,11 +4457,11 @@ function DatePicker({
4454
4457
  };
4455
4458
  const displayValue = value ? format(value) : "";
4456
4459
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
4457
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex ${layout === "vertical" ? "flex-col gap-1" : "flex-row items-center gap-2"}`, children: [
4460
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex ${layout === "vertical" ? "flex-col gap-1.5" : "flex-row items-start gap-3"}`, children: [
4458
4461
  label && /* @__PURE__ */ jsxRuntime.jsx(
4459
4462
  "label",
4460
4463
  {
4461
- className: "text-sm font-medium ml-1 max-content select-none text-foreground",
4464
+ className: `text-sm font-medium select-none text-foreground ${layout === "horizontal" ? "mt-2 flex-shrink-0 whitespace-nowrap" : ""}`,
4462
4465
  htmlFor,
4463
4466
  children: label
4464
4467
  }
@@ -5114,10 +5117,11 @@ function OtpInput({
5114
5117
  className: [
5115
5118
  BOX_SIZE[size],
5116
5119
  "text-center font-medium rounded-lg border bg-surface text-foreground",
5117
- "transition-[border-color,box-shadow] duration-150",
5120
+ "transition-[border-color] duration-150",
5118
5121
  hasError ? "border-status-error" : "border-border",
5119
5122
  "hover:border-border-strong",
5120
- "focus:outline-none focus:border-accent focus:ring-[3px] focus:ring-focus-ring",
5123
+ // Border-only focus, consistent with every field (no clip-prone ring).
5124
+ "focus:outline-none focus:border-accent",
5121
5125
  "disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed"
5122
5126
  ].join(" ")
5123
5127
  }