@zyncat/ui 0.8.0

package/src/components/primitives/badge/badge.css

@@ -0,0 +1,182 @@
+/* Badge / status pill - shape, tones, dot, status morph. */
+
+.badge {
+  /* wire the tone vars into the glass surface hooks */
+  --glass-fg: var(--badge-fg);
+  --glass-tint: var(--badge-tint);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding-block: var(--space-1);
+  padding-inline: var(--space-2);
+  border-radius: var(--radius-sm);
+
+  font-family: var(--font-mono);
+  font-size: var(--size-micro);
+  line-height: var(--leading-micro);
+  font-weight: var(--weight-medium);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0;
+  white-space: nowrap;
+  vertical-align: middle;
+  color: var(--badge-fg);
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.badge--sm {
+  padding-block: var(--space-px);
+  gap: var(--space-px);
+}
+
+.badge--pill {
+  border-radius: var(--radius-full);
+}
+
+.badge__dot {
+  position: relative;
+  width: 0.5em;
+  height: 0.5em;
+  flex: none;
+  border-radius: var(--radius-full);
+  background: var(--badge-dot, var(--badge-fg));
+  /* hue cross-fades as the status morphs */
+  transition: background-color var(--duration-base) var(--ease-standard);
+}
+.badge__dot--live::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: inherit;
+  animation: badge-pulse var(--duration-pulse) var(--ease-entrance) infinite;
+}
+@keyframes badge-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  70% {
+    transform: scale(2.6);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(2.6);
+    opacity: 0;
+  }
+}
+
+.badge__icon {
+  display: inline-flex;
+  flex: none;
+  width: 1em;
+  height: 1em;
+  margin-left: calc(var(--space-px) * -1);
+}
+.badge__icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.badge--neutral {
+  --badge-fg: var(--text-muted);
+  --badge-tint: var(--glass-tint-neutral);
+  --badge-dot: var(--gray-500);
+}
+.badge--info {
+  --badge-fg: var(--info-text);
+  --badge-tint: var(--glass-tint-info);
+  --badge-dot: var(--info);
+}
+.badge--success {
+  --badge-fg: var(--success-text);
+  --badge-tint: var(--glass-tint-success);
+  --badge-dot: var(--success);
+}
+.badge--warning {
+  --badge-fg: var(--warning-text);
+  --badge-tint: var(--glass-tint-warning);
+  --badge-dot: var(--warning);
+}
+.badge--danger {
+  --badge-fg: var(--danger-text);
+  --badge-tint: var(--glass-tint-danger);
+  --badge-dot: var(--danger);
+}
+
+/* Outline variant - deliberately NOT glass: a flat, engraved hairline chip. */
+.badge--outline {
+  position: relative;
+  isolation: isolate;
+  background: color-mix(in oklab, var(--badge-fg) 6%, transparent);
+  box-shadow:
+    inset 0 0 0 var(--border-hairline) color-mix(in oklab, var(--badge-fg) 30%, transparent),
+    inset 0 1px 0 0 rgb(255 255 255 / 0.5),
+    var(--shadow-xs);
+  transition:
+    transform var(--duration-base) var(--ease-standard),
+    box-shadow var(--duration-base) var(--ease-standard),
+    background-color var(--duration-fast) var(--ease-standard);
+}
+.badge--outline .badge__dot {
+  box-shadow: 0 0 0 2.5px color-mix(in oklab, var(--badge-dot) 16%, transparent);
+}
+.badge--outline:hover {
+  transform: translateY(calc(var(--space-px) * -1));
+  box-shadow:
+    inset 0 0 0 var(--border-hairline) color-mix(in oklab, var(--badge-fg) 42%, transparent),
+    inset 0 1px 0 0 rgb(255 255 255 / 0.6),
+    var(--shadow-sm);
+}
+
+/* Status morph - a clipped one-cell grid stack: the ghost measures the next width, the box eases, words roll; shrink mirrors grow. */
+.badge__morph {
+  position: relative;
+  display: inline-grid;
+  align-items: center;
+  justify-items: start;
+  overflow: hidden;
+  transition: width var(--duration-base) var(--ease-entrance);
+}
+.badge__morph > * {
+  grid-area: 1 / 1;
+}
+.badge__ghost {
+  visibility: hidden;
+  pointer-events: none;
+}
+.badge__word {
+  display: inline-block;
+  transition:
+    transform var(--duration-base) var(--ease-entrance),
+    opacity var(--duration-base) var(--ease-standard);
+}
+.badge__word--out {
+  transform: translateY(-52%);
+  opacity: 0;
+}
+.badge__word--in {
+  transform: translateY(52%);
+  opacity: 0;
+  transition: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .badge--outline {
+    transition: none;
+  }
+  .badge--outline:hover {
+    transform: none;
+  }
+  .badge__dot--live::after {
+    animation: none;
+  }
+  .badge__morph {
+    transition: none;
+  }
+  .badge__word {
+    transition: none;
+  }
+}

package/src/components/primitives/badge/odometer.css

@@ -0,0 +1,62 @@
+/* Odometer - each digit is a column clipping a 0-9 strip; .odo__strip--N sets the translateY (no inline styles). */
+.odo {
+  display: inline-flex;
+  align-items: center;
+}
+.odo__col {
+  display: inline-block;
+  height: 1em;
+  line-height: 1;
+  overflow: hidden;
+}
+.odo__strip {
+  display: flex;
+  flex-direction: column;
+  transition: transform var(--duration-slow) var(--ease-entrance);
+  will-change: transform;
+}
+.odo__strip > span {
+  height: 1em;
+  line-height: 1;
+  display: block;
+  text-align: center;
+}
+.odo__fixed {
+  display: inline-block;
+}
+.odo__strip--0 {
+  transform: translateY(0);
+}
+.odo__strip--1 {
+  transform: translateY(-1em);
+}
+.odo__strip--2 {
+  transform: translateY(-2em);
+}
+.odo__strip--3 {
+  transform: translateY(-3em);
+}
+.odo__strip--4 {
+  transform: translateY(-4em);
+}
+.odo__strip--5 {
+  transform: translateY(-5em);
+}
+.odo__strip--6 {
+  transform: translateY(-6em);
+}
+.odo__strip--7 {
+  transform: translateY(-7em);
+}
+.odo__strip--8 {
+  transform: translateY(-8em);
+}
+.odo__strip--9 {
+  transform: translateY(-9em);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .odo__strip {
+    transition: none;
+  }
+}

package/src/components/primitives/badge/odometer.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import './odometer.css';
+
+function Digit({ d }: { d: number }) {
+  return (
+    <span className="odo__col" aria-hidden="true">
+      <span className={'odo__strip odo__strip--' + d}>
+        {Array.from({ length: 10 }, (_, i) => (
+          <span key={i}>{i}</span>
+        ))}
+      </span>
+    </span>
+  );
+}
+
+export interface OdometerProps {
+  value: string | number;
+}
+
+export function Odometer({ value }: OdometerProps) {
+  const str = String(value);
+  return (
+    <span className="odo" role="text" aria-label={str}>
+      {str.split('').map((ch, i) =>
+        /\d/.test(ch) ? (
+          <Digit key={i} d={Number(ch)} />
+        ) : (
+          <span key={i} className="odo__fixed" aria-hidden="true">
+            {ch}
+          </span>
+        ),
+      )}
+    </span>
+  );
+}

package/src/components/primitives/button/Button.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import './button.css';
+import type { ButtonHTMLAttributes, CSSProperties, ReactNode, Ref } from 'react';
+import type { DataAttributes } from '../../../dom-props';
+import { cx } from '../../internal/utils/cx';
+
+interface ButtonOwnProps {
+  /** Visual weight / intent. `unstyled` emits base chrome only (sizing, focus ring,
+   *  layout) with no skin - for local re-skins via `className`, e.g. Alert's tone action. @default 'primary' */
+  variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'link' | 'unstyled';
+  /** Forwarded to the underlying <button> (React 19 ref-as-prop). */
+  ref?: Ref<HTMLButtonElement>;
+  /** Control height. sm 28px - md 36px (default) - lg 40px. @default 'md' */
+  size?: 'sm' | 'md' | 'lg' | 'icon';
+  /** `submit` / `reset` / `button`. @default 'button' */
+  type?: 'button' | 'submit' | 'reset';
+  /** Disable the control (also implied by `loading`). */
+  disabled?: boolean;
+  /** Loading - swaps content for a spinner and makes the button inert. */
+  loading?: boolean;
+  /** Leading icon node (e.g. a 16px <Icon>). Sized & aligned by the component. */
+  iconLeft?: ReactNode;
+  /** Trailing icon node. */
+  iconRight?: ReactNode;
+  /** Stretch to fill the container width. */
+  fullWidth?: boolean;
+  /** Extra class(es) merged onto the button. */
+  className?: string;
+  /** Inline styles merged onto the button. */
+  style?: CSSProperties;
+  /** Button label. */
+  children?: ReactNode;
+  /** Click handler */
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  /** Pointer handler */
+  onPointerDown?: React.PointerEventHandler<HTMLButtonElement>;
+}
+
+type ButtonRestProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonOwnProps> & DataAttributes;
+
+export interface ButtonProps extends ButtonOwnProps, ButtonRestProps {
+  /** Standard <button> attributes (onClick, name, form, aria-*, data-*, ...) forwarded verbatim.
+   *  Bare `<button>` attributes also pass through directly; `htmlProps` wins on conflict. */
+  htmlProps?: ButtonRestProps;
+}
+
+export function Button({
+  variant = 'primary',
+  size = 'md',
+  type = 'button',
+  disabled = false,
+  loading = false,
+  iconLeft = null,
+  iconRight = null,
+  fullWidth = false,
+  className = '',
+  style,
+  children,
+  onClick,
+  ref,
+  onPointerDown,
+  htmlProps,
+  ...rest
+}: ButtonProps) {
+  const cls = cx(
+    'btn',
+    variant !== 'unstyled' && `btn--${variant}`,
+    size !== 'md' && `btn--${size}`,
+    fullWidth && 'btn--block',
+    loading && 'is-loading',
+    className,
+  );
+
+  return (
+    <button
+      type={type}
+      ref={ref}
+      className={cls}
+      style={style}
+      disabled={disabled || loading}
+      aria-busy={loading || undefined}
+      onClick={onClick}
+      onPointerDown={onPointerDown}
+      {...rest}
+      {...htmlProps}
+    >
+      {iconLeft ? (
+        <span className="btn__icon" aria-hidden="true">
+          {iconLeft}
+        </span>
+      ) : null}
+      <span className="btn__label">{children}</span>
+      {iconRight ? (
+        <span className="btn__icon" aria-hidden="true">
+          {iconRight}
+        </span>
+      ) : null}
+      {loading ? <span className="btn__spinner" aria-hidden="true" /> : null}
+    </button>
+  );
+}

package/src/components/primitives/button/button.css

@@ -0,0 +1,269 @@
+/* Button - variants, sizes, states; lit gradient, tactile press, composed focus ring. */
+
+/* Gradient stops as typed properties: background-image can't transition, but registered
+   <color> values can - gradient variants set the stops once and states swap them. */
+@property --btn-grad-a {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: transparent;
+}
+@property --btn-grad-b {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: transparent;
+}
+
+.btn {
+  --btn-shadow: none;
+  --btn-ring: var(--ring-accent);
+
+  position: relative;
+  isolation: isolate;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+
+  height: var(--control-height);
+  padding: 0 var(--space-4);
+  border: var(--border-hairline) solid transparent;
+  border-radius: var(--radius-md);
+
+  font-family: var(--font-sans);
+  font-size: var(--size-body);
+  font-weight: var(--weight-medium);
+  line-height: 1;
+  letter-spacing: var(--tracking-normal);
+  white-space: nowrap;
+
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  appearance: none;
+  box-shadow: var(--btn-shadow);
+
+  transition:
+    background-color var(--duration-fast) var(--ease-standard),
+    --btn-grad-a var(--duration-base) var(--ease-standard),
+    --btn-grad-b var(--duration-base) var(--ease-standard),
+    border-color var(--duration-fast) var(--ease-standard),
+    color var(--duration-fast) var(--ease-standard),
+    box-shadow var(--duration-fast) var(--ease-standard),
+    transform var(--duration-fast) var(--ease-standard);
+}
+
+/* Composed focus ring: keep the resting shadow, add the ring on top. */
+.btn:focus-visible {
+  outline: none;
+  box-shadow: var(--btn-shadow), var(--btn-ring);
+}
+
+.btn--sm {
+  height: var(--control-height-sm);
+  padding: 0 var(--space-3);
+  font-size: var(--size-caption);
+  border-radius: var(--radius-sm);
+  gap: var(--space-1);
+}
+.btn--lg {
+  height: var(--control-height-lg);
+  padding: 0 var(--space-5);
+  border-radius: var(--radius-md);
+}
+.btn--block {
+  width: 100%;
+}
+.btn--icon {
+  width: var(--control-height-sm);
+  height: var(--control-height-sm);
+  border-radius: var(--radius-sm);
+}
+
+.btn__icon {
+  display: inline-flex;
+  flex: none;
+  width: 1em;
+  height: 1em;
+}
+.btn__icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+/* optical: pull icons slightly toward the label */
+.btn__icon:first-child {
+  margin-left: calc(var(--space-1) * -1);
+}
+.btn__icon:last-child {
+  margin-right: calc(var(--space-1) * -1);
+}
+
+.btn--primary {
+  color: var(--text-on-accent);
+  --btn-grad-a: var(--accent);
+  --btn-grad-b: var(--accent-hover);
+  background: linear-gradient(180deg, var(--btn-grad-a), var(--btn-grad-b));
+  --btn-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.16), var(--shadow-sm);
+}
+.btn--primary:hover:not(:disabled):not(.is-loading) {
+  --btn-grad-a: var(--accent-lift);
+  --btn-grad-b: var(--accent);
+  --btn-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.22), var(--shadow-md);
+}
+.btn--primary:active:not(:disabled):not(.is-loading) {
+  --btn-grad-a: var(--accent-hover);
+  --btn-grad-b: var(--accent-active);
+  transform: translateY(var(--space-px));
+  --btn-shadow: inset 0 1px 1px 0 rgb(var(--shadow-rgb) / 0.4), 0 1px 1px 0 rgb(var(--shadow-rgb) / 0.1);
+}
+
+.btn--secondary {
+  color: var(--text-body);
+  background: var(--bg-surface);
+  border-color: var(--border-default);
+  --btn-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.6), 0 1px 2px 0 rgb(var(--shadow-rgb) / 0.05);
+}
+.btn--secondary:hover:not(:disabled):not(.is-loading) {
+  color: var(--text-strong);
+  background: var(--neutral-wash);
+  border-color: var(--border-strong);
+}
+.btn--secondary:active:not(:disabled):not(.is-loading) {
+  background: var(--neutral-wash-press);
+  transform: translateY(var(--space-px));
+  --btn-shadow: inset 0 1px 2px 0 rgb(var(--shadow-rgb) / 0.07);
+}
+
+.btn--ghost {
+  color: var(--text-body);
+  background: transparent;
+}
+/* hover wash grows from the center rather than flat-filling: a ::before scales up under the
+   label (.btn is isolated, so z-index:-1 stays inside the button, behind .btn__label). */
+.btn--ghost::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: var(--neutral-wash);
+  opacity: 0;
+  transform: scale(0.75);
+  transition:
+    transform var(--duration-fast) var(--ease-standard),
+    opacity var(--duration-fast) var(--ease-standard),
+    background-color var(--duration-fast) var(--ease-standard);
+}
+.btn--ghost:hover:not(:disabled):not(.is-loading) {
+  color: var(--text-strong);
+}
+.btn--ghost:hover:not(:disabled):not(.is-loading)::before {
+  opacity: 1;
+  transform: scale(1);
+}
+.btn--ghost:active:not(:disabled):not(.is-loading) {
+  transform: translateY(var(--space-px));
+}
+.btn--ghost:active:not(:disabled):not(.is-loading)::before {
+  background: var(--neutral-wash-press);
+}
+
+.btn--danger {
+  color: var(--text-on-accent);
+  --btn-grad-a: var(--red-500);
+  --btn-grad-b: var(--red-600);
+  background: linear-gradient(180deg, var(--btn-grad-a), var(--btn-grad-b));
+  --btn-ring: var(--ring-danger);
+  --btn-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.16), var(--shadow-sm);
+}
+.btn--danger:hover:not(:disabled):not(.is-loading) {
+  --btn-grad-a: var(--red-400);
+  --btn-grad-b: var(--red-500);
+  --btn-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.22), var(--shadow-md);
+}
+.btn--danger:active:not(:disabled):not(.is-loading) {
+  --btn-grad-a: var(--red-600);
+  --btn-grad-b: var(--red-700);
+  transform: translateY(var(--space-px));
+  --btn-shadow: inset 0 1px 1px 0 rgb(var(--shadow-rgb) / 0.4), 0 1px 1px 0 rgb(var(--shadow-rgb) / 0.1);
+}
+
+.btn--link {
+  height: auto;
+  padding: 0;
+  border-radius: var(--radius-sm);
+  color: var(--text-accent);
+  background: none;
+  --btn-shadow: none;
+  font-weight: var(--weight-medium);
+}
+.btn--link:hover:not(:disabled):not(.is-loading) {
+  color: var(--accent-active);
+  text-decoration: underline;
+  text-underline-offset: var(--space-px);
+}
+.btn--link:active:not(:disabled):not(.is-loading) {
+  color: var(--accent-active);
+}
+.btn--link:focus-visible {
+  border-radius: var(--radius-sm);
+  box-shadow: var(--btn-ring);
+}
+
+/* Disabled - explicit per variant, never a blanket fade. */
+.btn:disabled,
+.btn.is-loading {
+  cursor: default;
+}
+.btn:disabled {
+  transform: none;
+}
+.btn--primary:disabled {
+  background: var(--accent-disabled);
+  color: var(--text-on-accent);
+  --btn-shadow: none;
+}
+.btn--danger:disabled {
+  background: var(--danger-disabled);
+  color: var(--text-on-accent);
+  --btn-shadow: none;
+}
+.btn--secondary:disabled {
+  color: var(--text-disabled);
+  background: var(--bg-surface);
+  border-color: var(--border-subtle);
+  --btn-shadow: none;
+}
+.btn--ghost:disabled {
+  color: var(--text-disabled);
+  background: transparent;
+}
+.btn--link:disabled {
+  color: var(--text-disabled);
+  text-decoration: none;
+}
+
+/* Loading - content holds its width, spinner overlays. */
+.btn.is-loading .btn__label,
+.btn.is-loading .btn__icon {
+  opacity: 0;
+}
+.btn__spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 1em;
+  height: 1em;
+  margin: -0.5em 0 0 -0.5em;
+  border-radius: var(--radius-full);
+  border: var(--border-emphasis) solid currentColor;
+  border-right-color: transparent;
+  opacity: 0.9;
+  animation: btn-spin var(--duration-spin) var(--ease-standard) infinite;
+}
+@keyframes btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}