@zyncat/ui 0.11.0 → 0.13.0

package/src/components/primitives/radio-group/RadioGroup.tsx

@@ -1,20 +1,21 @@
 'use client';
 
 import './radio-group.css';
-import { useId, useRef, useState, type CSSProperties, type FieldsetHTMLAttributes, type ReactNode } from 'react';
-import { Icon } from '../../internal/icon/Icon';
-import { IconSlot } from '../../internal/icon/IconSlot';
-import { Collapse } from '../collapse/Collapse';
-import { GlidePill, useGlide } from '../../../motion/glide';
+
+import { useId, useRef, type CSSProperties, type FieldsetHTMLAttributes, type ReactNode } from 'react';
+
+import type { DataAttributes } from '../../../dom-props';
 import { Motion } from '../../../motion/element';
+import { GlidePill, useGlide } from '../../../motion/glide';
 import { UIMotion } from '../../../tokens/motion-tokens';
-import type { DataAttributes } from '../../../dom-props';
+import { Icon } from '../../internal/icon/Icon';
+import { IconSlot } from '../../internal/icon/IconSlot';
 import { cx } from '../../internal/utils/cx';
+import { Collapse } from '../collapse/Collapse';
 import type { FieldRequirementProps } from '../input/field-chrome';
 
 const SM = UIMotion;
 const LAYOUT_FLIP = { timing: SM.t.layout };
-const HOVER_FLIP = { scale: false, timing: SM.t.layout };
 
 export interface RadioOption {
   /** The stored value - what `onChange` returns and `value` matches. */
@@ -82,7 +83,6 @@ export function RadioGroup({
   htmlProps,
 }: RadioGroupProps) {
   const groupId = useId();
-  const [hovered, setHovered] = useState<string | null>(null);
   const optionsRef = useRef<HTMLDivElement>(null);
   const glide = useGlide(optionsRef);
 
@@ -98,28 +98,19 @@ export function RadioGroup({
   return (
     <fieldset className={cls} style={style} aria-invalid={error ? true : undefined} {...htmlProps}>
       {label && (
-        <div className="rg__head">
-          <legend className="rg__label">
-            {label}
-            {required && (
-              <span className="rg__req" aria-hidden="true">
-                *
-              </span>
-            )}
-            {optional && <span className="rg__optional">(optional)</span>}
-          </legend>
-          {helper && <p className="rg__helper">{helper}</p>}
-        </div>
+        <legend className="rg__label">
+          {label}
+          {required && (
+            <span className="rg__req" aria-hidden="true">
+              *
+            </span>
+          )}
+          {optional && <span className="rg__optional">(optional)</span>}
+        </legend>
       )}
+      {label && helper && <p className="rg__helper">{helper}</p>}
 
-      <div
-        className="rg__options"
-        ref={optionsRef}
-        onPointerLeave={() => {
-          glide.leave();
-          setHovered(null);
-        }}
-      >
+      <div className="rg__options" ref={optionsRef} onPointerLeave={() => glide.leave()}>
         {variant === 'rows' && <GlidePill className="rg__hover" glide={glide} />}
         {options.map((opt) => {
           const selected = opt.value === value;
@@ -128,13 +119,7 @@ export function RadioGroup({
             <label
               key={opt.value}
               className={cx('rg-opt', selected && 'is-selected', isDisabled && 'is-disabled')}
-              onPointerEnter={
-                isDisabled
-                  ? undefined
-                  : variant === 'rows'
-                    ? (e) => glide.enter(e.currentTarget)
-                    : () => setHovered(opt.value)
-              }
+              onPointerEnter={isDisabled || variant !== 'rows' ? undefined : (e) => glide.enter(e.currentTarget)}
             >
               <input
                 className="rg-opt__input"
@@ -146,15 +131,6 @@ export function RadioGroup({
                 disabled={isDisabled}
                 onChange={() => onChange && onChange(opt.value)}
               />
-              {variant === 'cards' && hovered === opt.value && !selected && (
-                <Motion
-                  as="span"
-                  layoutId={groupId + ':card-hover'}
-                  layoutTransition={HOVER_FLIP}
-                  className="rg__card-hover"
-                  aria-hidden="true"
-                />
-              )}
               {variant === 'cards' && selected && (
                 <Motion
                   as="span"

package/src/components/primitives/radio-group/RadioGroup.usage.md

@@ -0,0 +1,13 @@
+# RadioGroup - @zyncat/ui/radio-group
+
+Group: forms
+Docs: https://ui.zyncat.app/radio-group
+
+Pick exactly one from options that stay visible - rows or cards; pick Select for long lists.
+
+options: RadioOption[] ({ value, label, description?, icon?, disabled? }); variant rows|cards,
+orientation; value/onChange(value).
+
+```tsx
+<RadioGroup name="role" label="Member role" value={role} onChange={setRole} options={ROLES} />
+```