premium-ds 0.1.0

package/src/components/badge/CountBadge.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+// CountBadge - count chip (counts, totals, deltas); roll mode is an odometer, digits roll on change.
+
+import { Badge, type BadgeProps } from './Badge';
+
+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 CountBadgeProps extends Omit<BadgeProps, 'children'> {
+  value: string | number;
+  /** Odometer: digits roll vertically on change. */
+  roll?: boolean;
+}
+
+export function CountBadge({ value, tone = 'neutral', roll = false, ...rest }: CountBadgeProps) {
+  const str = String(value);
+  return (
+    <Badge tone={tone} {...rest}>
+      {roll ? (
+        <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 === ' ' ? ' ' : ch}
+              </span>
+            ),
+          )}
+        </span>
+      ) : (
+        str
+      )}
+    </Badge>
+  );
+}

package/src/components/badge/StatusBadge.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+// StatusBadge - a status as a badge; canonical tone+label mapping; morph tweens width in place.
+
+import * as React from 'react';
+import { Badge, type BadgeProps } from './Badge';
+import { UIMotion } from '../../tokens/motion-tokens';
+
+const SM = UIMotion;
+
+export type PostStatus = 'draft' | 'scheduled' | 'processing' | 'published' | 'failed';
+
+export const POST_STATUS: Record<
+  PostStatus,
+  { tone: BadgeProps['tone']; label: string; live?: boolean }
+> = {
+  draft: { tone: 'neutral', label: 'Draft' },
+  scheduled: { tone: 'info', label: 'Scheduled' },
+  processing: { tone: 'warning', label: 'Processing', live: true },
+  published: { tone: 'success', label: 'Published' },
+  failed: { tone: 'danger', label: 'Failed' },
+};
+
+const TERMINAL: Partial<Record<PostStatus, boolean>> = { published: true, failed: true };
+
+export interface StatusBadgeProps extends Omit<BadgeProps, 'children' | 'tone'> {
+  status: PostStatus;
+  /** Morph in place as `status` changes instead of swapping. */
+  morph?: boolean;
+}
+
+export function StatusBadge({ status, morph = false, ...rest }: StatusBadgeProps) {
+  if (!morph) {
+    const s = POST_STATUS[status] || POST_STATUS.draft;
+    return (
+      <Badge tone={s.tone} dot live={!!s.live} {...rest}>
+        {s.label}
+      </Badge>
+    );
+  }
+  return <StatusMorph status={status} {...rest} />;
+}
+
+interface StatusMorphProps extends Omit<BadgeProps, 'children' | 'tone'> {
+  status: PostStatus;
+}
+
+interface Word {
+  key: number;
+  label: string;
+  cls: string;
+}
+
+function StatusMorph({ status, className = '', ...rest }: StatusMorphProps) {
+  const s = POST_STATUS[status] || POST_STATUS.draft;
+
+  const prev = React.useRef(status);
+  const keyRef = React.useRef(1);
+  const labelRef = React.useRef<HTMLSpanElement>(null);
+  const ghostRef = React.useRef<HTMLSpanElement>(null);
+  const [words, setWords] = React.useState<Word[]>([{ key: 0, label: s.label, cls: '' }]);
+  const [boxW, setBoxW] = React.useState<number>();
+
+  // initial width only; on change the width eases in the rAF below, synced to the word roll
+  React.useLayoutEffect(() => {
+    if (ghostRef.current) setBoxW(ghostRef.current.offsetWidth);
+  }, []);
+
+  React.useEffect(() => {
+    if (prev.current === status) return;
+    prev.current = status;
+    const next = POST_STATUS[status] || POST_STATUS.draft;
+    const nk = keyRef.current++;
+    // ghost already holds the new label
+    const nextW = ghostRef.current?.offsetWidth;
+
+    // add the new word primed below (invisible); the current word stays settled
+    setWords((ws) => ws.concat({ key: nk, label: next.label, cls: 'badge__word--in' }));
+    // next frame: roll the new word in, the old out, ease the box - one tween; clip hides the wider word
+    const raf = requestAnimationFrame(() =>
+      requestAnimationFrame(() => {
+        setWords((ws) =>
+          ws.map((w) => (w.key === nk ? { ...w, cls: '' } : { ...w, cls: 'badge__word--out' })),
+        );
+        if (nextW) setBoxW(nextW);
+      }),
+    );
+    // old word done rolling out - drop it; width already settled in the rAF, so this only prunes the DOM
+    const drop = setTimeout(
+      () => setWords((ws) => ws.filter((w) => !w.cls.includes('--out'))),
+      SM.dur.base * 1000 + 80,
+    );
+    // glint when a post lands on a terminal state
+    let glintT: ReturnType<typeof setTimeout> | undefined;
+    if (TERMINAL[status] && labelRef.current) {
+      const chip = labelRef.current.closest('.badge') as HTMLElement | null;
+      if (chip) {
+        chip.classList.remove('glass-glint');
+        // restart the one-shot
+        void chip.offsetWidth;
+        chip.classList.add('glass-glint');
+        glintT = setTimeout(() => chip.classList.remove('glass-glint'), SM.dur.slow * 1000 + 80);
+      }
+    }
+    return () => {
+      cancelAnimationFrame(raf);
+      clearTimeout(drop);
+      clearTimeout(glintT);
+    };
+  }, [status]);
+
+  return (
+    <Badge
+      tone={s.tone}
+      dot
+      live={!!s.live}
+      className={['badge--morph', className].filter(Boolean).join(' ')}
+      {...rest}
+    >
+      <span className="badge__morph" ref={labelRef} style={boxW ? { width: boxW } : undefined}>
+        <span className="badge__ghost" ref={ghostRef} aria-hidden="true">
+          {s.label}
+        </span>
+        {words.map((w) => (
+          <span key={w.key} className={['badge__word', w.cls].filter(Boolean).join(' ')}>
+            {w.label}
+          </span>
+        ))}
+      </span>
+    </Badge>
+  );
+}

package/src/components/badge/badge.css

@@ -0,0 +1,243 @@
+/* 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: 0;
+  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: 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));
+  background: color-mix(in oklab, var(--badge-fg) 7%, transparent);
+  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;
+}
+
+/* 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) {
+  .badge--outline {
+    transition: none;
+  }
+  .badge--outline:hover {
+    transform: none;
+  }
+  .badge__dot--live::after {
+    animation: none;
+  }
+  .badge__morph {
+    transition: none;
+  }
+  .badge__word {
+    transition: none;
+  }
+  .odo__strip {
+    transition: none;
+  }
+}

package/src/components/button/Button.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+// Button - primitive; composes button.css classes, renders icons, manages loading.
+
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Visual weight / intent. @default 'primary' */
+  variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'link';
+  /** Control height. sm 28px - md 36px (default) - lg 40px. @default 'md' */
+  size?: 'sm' | 'md' | 'lg';
+  /** 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;
+}
+
+export function Button({
+  variant = 'primary',
+  size = 'md',
+  type = 'button',
+  disabled = false,
+  loading = false,
+  iconLeft = null,
+  iconRight = null,
+  fullWidth = false,
+  className = '',
+  children,
+  ...rest
+}: ButtonProps) {
+  const classes = [
+    'btn',
+    `btn--${variant}`,
+    size !== 'md' ? `btn--${size}` : '',
+    fullWidth ? 'btn--block' : '',
+    loading ? 'is-loading' : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <button
+      type={type}
+      className={classes}
+      disabled={disabled || loading}
+      aria-busy={loading || undefined}
+      {...rest}
+    >
+      {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/button/button.css

@@ -0,0 +1,222 @@
+/* Button - variants, sizes, states; lit gradient, tactile press, composed focus ring. */
+
+.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-semibold);
+  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),
+    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 {
+  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);
+  background: linear-gradient(180deg, var(--accent), var(--accent-hover));
+  --btn-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.16), var(--shadow-sm);
+}
+.btn--primary:hover:not(:disabled):not(.is-loading) {
+  background: linear-gradient(180deg, var(--teal-400), var(--teal-500));
+  --btn-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.22), var(--shadow-md);
+}
+.btn--primary:active:not(:disabled):not(.is-loading) {
+  background: linear-gradient(180deg, var(--accent-hover), 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(--bg-subtle);
+  border-color: var(--border-strong);
+}
+.btn--secondary:active:not(:disabled):not(.is-loading) {
+  background: var(--bg-muted);
+  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;
+}
+.btn--ghost:hover:not(:disabled):not(.is-loading) {
+  color: var(--text-strong);
+  background: var(--bg-subtle);
+}
+.btn--ghost:active:not(:disabled):not(.is-loading) {
+  background: var(--bg-muted);
+  transform: translateY(var(--space-px));
+}
+
+.btn--danger {
+  color: var(--text-on-accent);
+  background: linear-gradient(180deg, var(--red-500), var(--red-600));
+  --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) {
+  background: linear-gradient(180deg, var(--red-400), 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) {
+  background: linear-gradient(180deg, var(--red-600), 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);
+  }
+}