@zyncat/ui 0.8.0

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

@@ -0,0 +1,183 @@
+'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 { useSharedFlip } from '../../../motion/flip';
+import { UIMotion } from '../../../tokens/motion-tokens';
+import type { DataAttributes } from '../../../dom-props';
+import { cx } from '../../internal/utils/cx';
+import type { FieldRequirementProps } from '../input/field-chrome';
+
+const SM = UIMotion;
+
+export interface RadioOption {
+  /** The stored value - what `onChange` returns and `value` matches. */
+  value: string;
+  /** Visible label (sentence case). */
+  label: ReactNode;
+  /** Optional secondary line (muted) explaining the choice. */
+  description?: ReactNode;
+  /** Leading icon - your own node. CARDS only; ignored for rows. */
+  icon?: ReactNode;
+  /** Disable just this option. */
+  disabled?: boolean;
+}
+
+interface RadioGroupOwnProps extends FieldRequirementProps {
+  /** Shared radio name - ties the options into one keyboard group. Required. */
+  name: string;
+  /** The selected value (controlled). */
+  value?: string;
+  /** Called with the chosen option's `value`. */
+  onChange?: (value: string) => void;
+  /** Group label / legend (sentence case). */
+  label?: ReactNode;
+  /** Persistent context shown under the legend, before the options. */
+  helper?: ReactNode;
+  /** Group-level error (e.g. required). Sets the error state + reveals the message. */
+  error?: ReactNode;
+  /** Skin: quiet rows (default) or selectable cards. */
+  variant?: 'rows' | 'cards';
+  /** Lay options out in a line instead of a stack. */
+  orientation?: 'vertical' | 'horizontal';
+  /** Control size: sm (dot 16) - md (default, dot 18). */
+  size?: 'sm' | 'md';
+  /** Disable the whole group. */
+  disabled?: boolean;
+  /** The options to choose between. */
+  options: RadioOption[];
+  /** Extra class(es) merged onto the root element. */
+  className?: string;
+  /** Inline styles merged onto the root element. */
+  style?: CSSProperties;
+}
+
+export interface RadioGroupProps extends RadioGroupOwnProps {
+  /** Standard <fieldset> attributes (aria-*, data-*, ...) forwarded to the root. */
+  htmlProps?: Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, keyof RadioGroupOwnProps> & DataAttributes;
+}
+
+export function RadioGroup({
+  name,
+  value,
+  onChange,
+  label,
+  helper,
+  error,
+  required,
+  optional,
+  variant = 'rows',
+  orientation = 'vertical',
+  size = 'md',
+  disabled,
+  options = [],
+  className = '',
+  style,
+  htmlProps,
+}: RadioGroupProps) {
+  const groupId = useId();
+  const [hovered, setHovered] = useState<string | null>(null);
+  const optionsRef = useRef<HTMLDivElement>(null);
+  const glide = useGlide(optionsRef);
+  const markerRef = useSharedFlip<HTMLSpanElement>(groupId + ':marker', { timing: SM.t.layout });
+  const fillRef = useSharedFlip<HTMLSpanElement>(groupId + ':card-fill', { timing: SM.t.layout });
+  const cardHoverRef = useSharedFlip<HTMLSpanElement>(groupId + ':card-hover', { scale: false, timing: SM.t.layout });
+
+  const cls = cx(
+    'rg',
+    variant === 'cards' && 'rg--cards',
+    orientation === 'horizontal' && 'rg--horizontal',
+    size === 'sm' && 'rg--sm',
+    error && 'is-error',
+    className,
+  );
+
+  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>
+      )}
+
+      <div
+        className="rg__options"
+        ref={optionsRef}
+        onPointerLeave={() => {
+          glide.leave();
+          setHovered(null);
+        }}
+      >
+        {variant === 'rows' && <GlidePill className="rg__hover" glide={glide} />}
+        {options.map((opt) => {
+          const selected = opt.value === value;
+          const isDisabled = disabled || opt.disabled;
+          return (
+            <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)
+              }
+            >
+              <input
+                className="rg-opt__input"
+                type="radio"
+                name={name}
+                value={opt.value}
+                checked={selected}
+                required={required}
+                disabled={isDisabled}
+                onChange={() => onChange && onChange(opt.value)}
+              />
+              {variant === 'cards' && hovered === opt.value && !selected && (
+                <span className="rg__card-hover" aria-hidden="true" ref={cardHoverRef}></span>
+              )}
+              {variant === 'cards' && selected && (
+                <span className="rg__card-fill" aria-hidden="true" ref={fillRef}></span>
+              )}
+              {variant === 'cards' && opt.icon && (
+                <span className="rg-opt__icon">
+                  <IconSlot>{opt.icon}</IconSlot>
+                </span>
+              )}
+              <span className="rg-opt__control">
+                <span className="rg-opt__dot">
+                  {selected && <span className="rg__marker" aria-hidden="true" ref={markerRef}></span>}
+                </span>
+              </span>
+              <span className="rg-opt__body">
+                <span className="rg-opt__label">{opt.label}</span>
+                {opt.description && <span className="rg-opt__desc">{opt.description}</span>}
+              </span>
+            </label>
+          );
+        })}
+      </div>
+
+      <Collapse open={!!error} fade className="rg__msg-wrap">
+        <div className="rg__msg">
+          <Icon name="warning-circle" size="sm" weight="fill" />
+          {error}
+        </div>
+      </Collapse>
+    </fieldset>
+  );
+}

package/src/components/primitives/radio-group/radio-group.css

@@ -0,0 +1,300 @@
+/* RadioGroup - single-select in two skins: rows (dot + label) and cards (selectable tiles). */
+
+/* dot dims (18 / sm 16, inner 8 / sm 7) are bespoke, intentionally off the token ramps - don't "fix" to a token */
+.rg {
+  --rg-dot: 18px;
+  --rg-dot-inner: 8px;
+
+  display: grid;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  min-width: 0;
+}
+.rg--sm {
+  --rg-dot: 16px;
+  --rg-dot-inner: 7px;
+}
+
+.rg__head {
+  margin-bottom: var(--space-4);
+}
+.rg__label {
+  font: var(--type-caption);
+  font-weight: var(--weight-medium);
+  color: var(--text-body);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  line-height: 1;
+  padding: 0;
+}
+.rg__req {
+  color: var(--danger);
+}
+.rg__optional {
+  color: var(--text-subtle);
+  font-weight: var(--weight-regular);
+}
+.rg__helper {
+  font: var(--type-caption);
+  color: var(--text-muted);
+  margin-top: var(--space-1);
+  max-width: var(--measure-prose);
+}
+
+.rg__options {
+  position: relative; /* anchors the rows' shared glide pill */
+  display: grid;
+  gap: var(--space-1);
+}
+.rg--horizontal .rg__options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2) var(--space-5);
+}
+.rg--cards .rg__options {
+  gap: var(--space-3);
+}
+.rg--cards.rg--horizontal .rg__options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+}
+.rg--cards.rg--horizontal .rg-opt {
+  flex: 1 1 0;
+  min-width: 12rem;
+}
+
+/* align-items:flex-start pins the dot to the first text line when a description wraps below */
+.rg-opt {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: var(--transition-colors);
+  -webkit-tap-highlight-color: transparent;
+}
+/* Hover pill - one persistent fill (../motion/glide, first child of .rg__options) that
+   springs between rows; the positioned rows paint above it. Rows only; cards keep their
+   own layoutId hover (their opaque bg + press transform need the fill inside the card). */
+.rg__hover {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  border-radius: var(--radius-md);
+  background: var(--neutral-wash);
+  pointer-events: none;
+}
+.rg-opt__control,
+.rg-opt__body {
+  position: relative;
+  z-index: 1;
+}
+
+.rg-opt__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* height = the label's line-box, so the dot optically centers on the first line */
+.rg-opt__control {
+  flex: none;
+  height: var(--leading-body);
+  display: grid;
+  place-items: center;
+}
+.rg--sm .rg-opt__control {
+  height: var(--leading-caption);
+}
+
+.rg-opt__dot {
+  position: relative;
+  width: var(--rg-dot);
+  height: var(--rg-dot);
+  border-radius: var(--radius-full);
+  /* transparent so the ring-centre gap shows the surface behind (card tint), never a white halo */
+  background: transparent;
+  border: var(--border-hairline) solid var(--border-strong);
+  /* transform stays in the bundle so the press scale eases instead of snapping */
+  transition:
+    var(--transition-control),
+    transform var(--duration-fast) var(--ease-standard);
+}
+/* single marker glides between dots via Motion layoutId; centred by inset:0 + margin:auto, so no CSS transition here - Motion owns the move */
+.rg__marker {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: var(--rg-dot-inner);
+  height: var(--rg-dot-inner);
+  border-radius: var(--radius-full);
+  background: var(--accent);
+  pointer-events: none;
+  will-change: transform;
+}
+
+.rg-opt__body {
+  display: grid;
+  gap: var(--space-px);
+  padding-top: 0;
+}
+.rg-opt__label {
+  font: var(--type-body);
+  color: var(--text-strong);
+}
+.rg--sm .rg-opt__label {
+  font: var(--type-caption);
+  font-weight: var(--weight-medium);
+}
+.rg-opt__desc {
+  font: var(--type-caption);
+  color: var(--text-muted);
+  text-wrap: pretty;
+}
+
+.rg-opt:hover:not(.is-disabled):not(.is-selected) .rg-opt__dot {
+  border-color: var(--text-muted);
+}
+.rg-opt:active:not(.is-disabled) .rg-opt__dot {
+  transform: scale(0.92);
+}
+
+/* .is-selected (React) drives selection, not :checked/:has - Chromium doesn't reliably invalidate those on a radio's implicit sibling-uncheck */
+.rg-opt.is-selected .rg-opt__dot {
+  border-color: var(--accent);
+}
+
+.rg-opt__input:focus-visible ~ .rg-opt__control .rg-opt__dot {
+  border-color: var(--accent);
+  box-shadow: var(--ring-accent);
+}
+
+.rg-opt.is-disabled {
+  cursor: not-allowed;
+}
+.rg-opt.is-disabled .rg-opt__label {
+  color: var(--text-disabled);
+}
+.rg-opt.is-disabled .rg-opt__desc {
+  color: var(--text-disabled);
+}
+.rg-opt.is-disabled .rg-opt__dot {
+  background: var(--bg-muted);
+  border-color: var(--border-default);
+}
+.rg-opt.is-disabled.is-selected .rg-opt__dot {
+  border-color: var(--border-strong);
+}
+.rg-opt.is-disabled.is-selected .rg__marker {
+  background: var(--text-disabled);
+}
+
+.rg--cards .rg-opt {
+  position: relative;
+  align-items: center;
+  padding: var(--space-4);
+  background: var(--bg-surface);
+  border: var(--border-hairline) solid var(--border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xs);
+  transition:
+    var(--transition-control),
+    transform var(--duration-fast) var(--ease-standard);
+}
+.rg--cards .rg-opt:active:not(.is-disabled) {
+  transform: translateY(var(--space-px));
+  box-shadow: var(--shadow-xs);
+}
+
+.rg--cards .rg-opt__control {
+  order: 3;
+  margin-left: auto;
+}
+.rg-opt__icon {
+  flex: none;
+  display: inline-flex;
+  color: var(--text-muted);
+  transition: color var(--duration-fast) var(--ease-standard);
+}
+.rg-opt__icon svg {
+  display: block;
+}
+
+/* selected fill is a shared layoutId layer that glides between cards - the card paints no selected bg/border of its own */
+.rg__card-fill {
+  position: absolute;
+
+  /* negative inset covers the card's hairline so the accent edge replaces it */
+  inset: calc(-1 * var(--border-hairline));
+  z-index: 0;
+  border: var(--border-hairline) solid var(--accent);
+  border-radius: var(--radius-lg);
+  background: var(--accent-subtle);
+  pointer-events: none;
+}
+
+/* hover highlight - a neutral bordered fill that glides between cards (layoutId, non-selected
+   only), mirroring the selected fill muted. Replaces the old per-card border/shadow swap. */
+.rg__card-hover {
+  position: absolute;
+  inset: calc(-1 * var(--border-hairline));
+  z-index: 0;
+  border: var(--border-hairline) solid var(--border-strong);
+  border-radius: var(--radius-lg);
+  background: var(--neutral-wash);
+  pointer-events: none;
+}
+.rg--cards .rg-opt > .rg-opt__icon,
+.rg--cards .rg-opt > .rg-opt__control,
+.rg--cards .rg-opt > .rg-opt__body {
+  position: relative;
+  z-index: 1;
+}
+.rg--cards .rg-opt.is-selected .rg-opt__icon {
+  color: var(--text-accent);
+}
+.rg--cards .rg-opt:has(.rg-opt__input:focus-visible) {
+  box-shadow: var(--ring-accent);
+}
+
+.rg--cards .rg-opt.is-disabled {
+  background: var(--bg-subtle);
+  border-color: var(--border-subtle);
+  box-shadow: none;
+}
+.rg--cards .rg-opt.is-disabled .rg-opt__icon {
+  color: var(--text-disabled);
+}
+
+/* in a <Collapse>: absent = zero reserved space; the padding-top is the options-message gap, inside the collapsible area */
+.rg__msg {
+  font: var(--type-caption);
+  color: var(--danger-text);
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  min-height: 1em;
+  padding-top: var(--space-3);
+}
+.rg__msg i,
+.rg__msg svg {
+  flex: none;
+}
+
+.rg.is-error .rg-opt:not(.is-selected) .rg-opt__dot {
+  border-color: var(--danger);
+}
+.rg.is-error.rg--cards .rg-opt:not(.is-selected) {
+  border-color: var(--danger);
+}

package/src/components/primitives/tag/Tag.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+import './tag.css';
+import { createContext, useContext, type CSSProperties, type HTMLAttributes, type ReactNode, type Ref } from 'react';
+import { Presence } from '../../../motion/presence';
+import { Motion } from '../../../motion/element';
+import { resolveMotionTiming } from '../../../motion/motion-timing';
+import type { DisableableAnimation } from '../../../motion/timing';
+import type { FlipTuning } from '../../../motion/flip';
+import type { Layer } from '../../../engine';
+import { IconSlot } from '../../internal/icon/IconSlot';
+import type { DataAttributes } from '../../../dom-props';
+import { cx } from '../../internal/utils/cx';
+
+const TAG_TIMING = { open: { duration: 'base', ease: 'entrance' }, close: { duration: 'fast', ease: 'exit' } } as const;
+const TAG_LAYOUT_TIMING = {
+  open: { duration: 'slow', ease: 'entrance' },
+  close: { duration: 'slow', ease: 'entrance' },
+} as const;
+
+interface TagGroupMotion {
+  animate: Layer;
+  exit: Layer;
+  layout: FlipTuning;
+}
+
+const TagGroupContext = createContext<TagGroupMotion | null>(null);
+
+interface TagOwnProps {
+  /** Tag content; a string label also seeds the default remove-button `aria-label`. */
+  children: ReactNode;
+  /** Your own icon node, sized small and tinted to the tag's text. */
+  icon?: ReactNode | null;
+  /** Presence adds the remove button; called on click - remove the item yourself. */
+  onRemove?: (() => void) | null;
+  /** Accessible label for the remove button. Defaults to "Remove {label}" for string labels. */
+  removeLabel?: string;
+  /** 'md' = 28px (default) - 'sm' = 24px for dense rows. */
+  size?: 'md' | 'sm';
+  /** Set `data-disabled` on the tag and disable its remove button. @default false */
+  disabled?: boolean;
+  /** Extra class(es) merged onto the root element. */
+  className?: string;
+  /** Inline styles merged onto the root element. */
+  style?: CSSProperties;
+}
+
+/** Tag - the removable, editable label (stateless; the parent owns the list). */
+export interface TagProps extends TagOwnProps {
+  /** Standard <span> attributes forwarded to the tag root. */
+  htmlProps?: Omit<HTMLAttributes<HTMLSpanElement>, keyof TagOwnProps> & DataAttributes;
+  /** Ref to the tag root span. */
+  ref?: Ref<HTMLSpanElement>;
+}
+
+interface TagGroupOwnProps {
+  /** Accessible name for the group (role="group"). */
+  ariaLabel?: string;
+  /** The `Tag`s; adds, removals and reflow are animated. */
+  children?: ReactNode;
+  /** Extra class(es) merged onto the group wrapper. */
+  className?: string;
+  /** Inline styles merged onto the group wrapper. */
+  style?: CSSProperties;
+  /** Add/remove/reflow timing for the member tags - motion tokens only, or `null` to disable. */
+  animation?: DisableableAnimation;
+}
+
+/** TagGroup - wrapping flex row + removal/insertion choreography. */
+export interface TagGroupProps extends TagGroupOwnProps {
+  /** Standard <div> attributes forwarded to the group wrapper. */
+  htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, keyof TagGroupOwnProps> & DataAttributes;
+}
+
+function TagRemoveGlyph() {
+  return (
+    <svg viewBox="0 0 12 12" fill="none" aria-hidden="true">
+      <path d="M3 3 L9 9 M9 3 L3 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+export function Tag({
+  children,
+  icon = null,
+  onRemove = null,
+  removeLabel,
+  size = 'md',
+  disabled = false,
+  className = '',
+  style,
+  htmlProps,
+  ref,
+}: TagProps) {
+  const cls = cx('tag', size === 'sm' && 'tag--sm', className);
+  const xLabel = removeLabel || (typeof children === 'string' ? 'Remove ' + children : 'Remove');
+  const group = useContext(TagGroupContext);
+
+  return (
+    <Motion
+      as="span"
+      ref={ref}
+      animate={group?.animate}
+      exit={group?.exit}
+      layout={group?.layout}
+      className={cls}
+      style={style}
+      data-disabled={disabled ? 'true' : undefined}
+      {...htmlProps}
+    >
+      {icon && (
+        <span className="tag__icon">
+          <IconSlot size="sm">{icon}</IconSlot>
+        </span>
+      )}
+      <span className="tag__label">{children}</span>
+      {onRemove && (
+        <button type="button" className="tag__remove" aria-label={xLabel} disabled={disabled} onClick={onRemove}>
+          <TagRemoveGlyph />
+        </button>
+      )}
+    </Motion>
+  );
+}
+
+export function TagGroup({ ariaLabel, className = '', style, children, htmlProps, animation }: TagGroupProps) {
+  const step = resolveMotionTiming(animation, TAG_TIMING);
+  const layout = resolveMotionTiming(animation, TAG_LAYOUT_TIMING).open;
+
+  const motion = {
+    animate: { opacity: [0, 1], scale: [0.9, 1], timing: step.open },
+    exit: { opacity: [1, 0], scale: [1, 0.9], timing: step.close },
+    layout: { timing: layout },
+  };
+
+  return (
+    <div className={cx('tag-group', className)} style={style} role="group" aria-label={ariaLabel} {...htmlProps}>
+      <TagGroupContext.Provider value={motion}>
+        <Presence initial={false}>{children}</Presence>
+      </TagGroupContext.Provider>
+    </div>
+  );
+}