@zyncat/ui 0.8.0

package/dist/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/dist/radio-group.d.ts

@@ -0,0 +1,52 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties, FieldsetHTMLAttributes } from 'react';
+import { D as DataAttributes } from './dom-props-C0jrllBw.js';
+import { c as FieldRequirementProps } from './field-chrome-CMPOQSLs.js';
+
+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;
+}
+interface RadioGroupProps extends RadioGroupOwnProps {
+    /** Standard <fieldset> attributes (aria-*, data-*, ...) forwarded to the root. */
+    htmlProps?: Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, keyof RadioGroupOwnProps> & DataAttributes;
+}
+declare function RadioGroup({ name, value, onChange, label, helper, error, required, optional, variant, orientation, size, disabled, options, className, style, htmlProps, }: RadioGroupProps): react.JSX.Element;
+
+export { RadioGroup, type RadioGroupProps, type RadioOption };

package/dist/radio-group.js

@@ -0,0 +1,115 @@
+'use client';import { useGlide, GlidePill } from './chunk-MKIQFK7S.js';
+import { useSharedFlip } from './chunk-JSKXZMLH.js';
+import './chunk-L3Q3VDIW.js';
+import { IconSlot } from './chunk-2ERBBFZS.js';
+import { Icon } from './chunk-3SBCBYB7.js';
+import { UIMotion } from './chunk-S5ZTZANS.js';
+import { Collapse } from './chunk-7SZCJ7WI.js';
+import './chunk-VTJTGVZZ.js';
+import { cx } from './chunk-QGNC7LH5.js';
+import './radio-group.css';
+import { useId, useState, useRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var SM = UIMotion;
+function RadioGroup({
+  name,
+  value,
+  onChange,
+  label,
+  helper,
+  error,
+  required,
+  optional,
+  variant = "rows",
+  orientation = "vertical",
+  size = "md",
+  disabled,
+  options = [],
+  className = "",
+  style,
+  htmlProps
+}) {
+  const groupId = useId();
+  const [hovered, setHovered] = useState(null);
+  const optionsRef = useRef(null);
+  const glide = useGlide(optionsRef);
+  const markerRef = useSharedFlip(groupId + ":marker", { timing: SM.t.layout });
+  const fillRef = useSharedFlip(groupId + ":card-fill", { timing: SM.t.layout });
+  const cardHoverRef = useSharedFlip(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 /* @__PURE__ */ jsxs("fieldset", { className: cls, style, "aria-invalid": error ? true : void 0, ...htmlProps, children: [
+    label && /* @__PURE__ */ jsxs("div", { className: "rg__head", children: [
+      /* @__PURE__ */ jsxs("legend", { className: "rg__label", children: [
+        label,
+        required && /* @__PURE__ */ jsx("span", { className: "rg__req", "aria-hidden": "true", children: "*" }),
+        optional && /* @__PURE__ */ jsx("span", { className: "rg__optional", children: "(optional)" })
+      ] }),
+      helper && /* @__PURE__ */ jsx("p", { className: "rg__helper", children: helper })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "rg__options",
+        ref: optionsRef,
+        onPointerLeave: () => {
+          glide.leave();
+          setHovered(null);
+        },
+        children: [
+          variant === "rows" && /* @__PURE__ */ jsx(GlidePill, { className: "rg__hover", glide }),
+          options.map((opt) => {
+            const selected = opt.value === value;
+            const isDisabled = disabled || opt.disabled;
+            return /* @__PURE__ */ jsxs(
+              "label",
+              {
+                className: cx("rg-opt", selected && "is-selected", isDisabled && "is-disabled"),
+                onPointerEnter: isDisabled ? void 0 : variant === "rows" ? (e) => glide.enter(e.currentTarget) : () => setHovered(opt.value),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      className: "rg-opt__input",
+                      type: "radio",
+                      name,
+                      value: opt.value,
+                      checked: selected,
+                      required,
+                      disabled: isDisabled,
+                      onChange: () => onChange && onChange(opt.value)
+                    }
+                  ),
+                  variant === "cards" && hovered === opt.value && !selected && /* @__PURE__ */ jsx("span", { className: "rg__card-hover", "aria-hidden": "true", ref: cardHoverRef }),
+                  variant === "cards" && selected && /* @__PURE__ */ jsx("span", { className: "rg__card-fill", "aria-hidden": "true", ref: fillRef }),
+                  variant === "cards" && opt.icon && /* @__PURE__ */ jsx("span", { className: "rg-opt__icon", children: /* @__PURE__ */ jsx(IconSlot, { children: opt.icon }) }),
+                  /* @__PURE__ */ jsx("span", { className: "rg-opt__control", children: /* @__PURE__ */ jsx("span", { className: "rg-opt__dot", children: selected && /* @__PURE__ */ jsx("span", { className: "rg__marker", "aria-hidden": "true", ref: markerRef }) }) }),
+                  /* @__PURE__ */ jsxs("span", { className: "rg-opt__body", children: [
+                    /* @__PURE__ */ jsx("span", { className: "rg-opt__label", children: opt.label }),
+                    opt.description && /* @__PURE__ */ jsx("span", { className: "rg-opt__desc", children: opt.description })
+                  ] })
+                ]
+              },
+              opt.value
+            );
+          })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Collapse, { open: !!error, fade: true, className: "rg__msg-wrap", children: /* @__PURE__ */ jsxs("div", { className: "rg__msg", children: [
+      /* @__PURE__ */ jsx(Icon, { name: "warning-circle", size: "sm", weight: "fill" }),
+      error
+    ] }) })
+  ] });
+}
+
+export { RadioGroup };
+//# sourceMappingURL=radio-group.js.map
+//# sourceMappingURL=radio-group.js.map

package/dist/radio-group.js.map

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