@proteos/ui 0.53.0 → 0.54.1

package/dist/index.js

@@ -1195,7 +1195,7 @@ function CardHeader({ className, ...props }) {
       ...props,
       className: cn(
         "flex justify-between items-center",
-        "px-5 py-5 border-b border-rule",
+        "px-5 py-3 border-b border-rule",
         "bg-[color-mix(in_oklab,var(--color-surface-2)_60%,var(--color-surface))]",
         "font-mono text-[11.5px] uppercase tracking-[0.06em] text-ink-4",
         className
@@ -5740,7 +5740,11 @@ function Radio({ children, className, ...props }) {
     {
       ...props,
       className: (renderProps) => cn(
-        "group inline-flex items-center gap-2.5 cursor-pointer",
+        // `relative` for the same reason as Checkbox / Switch: RAC's
+        // visually-hidden <input> is absolutely positioned and must resolve
+        // against this radio, not a far-away shell, or focusing it scrolls
+        // the clipped page.
+        "group relative inline-flex items-center gap-2.5 cursor-pointer",
         "font-sans text-[14px] text-ink-2 select-none",
         "data-[disabled]:opacity-45 data-[disabled]:cursor-not-allowed",
         typeof className === "function" ? className(renderProps) : className
@@ -7877,7 +7881,11 @@ function Switch({ children, labelPlacement = "end", className, ...props }) {
     {
       ...props,
       className: (renderProps) => cn(
-        "group inline-flex items-center gap-3 cursor-pointer select-none",
+        // `relative`: RAC's visually-hidden <input> is absolutely positioned;
+        // without a positioned label it escapes an overflow-auto ancestor and
+        // its containing block becomes the page shell, so focusing it (any
+        // press) scrolls the clipped shell and the whole tab goes blank.
+        "group relative inline-flex items-center gap-3 cursor-pointer select-none",
         "font-sans text-[14px] text-ink-2",
         labelPlacement === "start" && "flex-row-reverse",
         "data-[disabled]:opacity-45 data-[disabled]:cursor-not-allowed",