premium-ds 0.1.0

package/src/components/toast/toast.css

@@ -0,0 +1,233 @@
+/* toast.css - the glass notification card, tinted per tone (a draining timer ring). */
+
+.toast-viewport {
+  position: fixed;
+  bottom: var(--space-6);
+  right: var(--space-6);
+  width: min(22.5rem, calc(100vw - 2 * var(--space-6)));
+  z-index: var(--layer-toast);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  pointer-events: none; /* only the cards themselves are live */
+}
+
+/* The card - a glass consumer (.glass is set in JSX). */
+.toast {
+  /* tone hooks - set by [data-tone] below */
+  --toast-hue: var(--text-subtle);
+  --glass-fg: var(--text-strong);
+  --glass-tint: color-mix(in oklab, var(--glass-tint-neutral) 75%, transparent);
+  --glass-sheen-rest: 0.45;
+
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden; /* custom content stays in the pane   */
+  pointer-events: auto;
+  transform-origin: center bottom; /* the stack recedes upward           */
+  border-radius: var(--radius-lg);
+
+  /* Motion owns transform - keep only the color/shadow transitions (never smooth Motion's writes) */
+  transition:
+    background-color var(--duration-base) var(--ease-standard),
+    box-shadow var(--duration-base) var(--ease-standard);
+}
+
+/* rich panes for genuine status, diluted to stay glass; neutral otherwise */
+.toast[data-tone='success'] {
+  --toast-hue: var(--success);
+  --glass-fg: var(--success-text);
+  --glass-tint: color-mix(in oklab, var(--glass-tint-success) 70%, transparent);
+}
+.toast[data-tone='error'] {
+  --toast-hue: var(--danger);
+  --glass-fg: var(--danger-text);
+  --glass-tint: color-mix(in oklab, var(--glass-tint-danger) 70%, transparent);
+}
+.toast[data-tone='warning'] {
+  --toast-hue: var(--warning);
+  --glass-fg: var(--warning-text);
+  --glass-tint: color-mix(in oklab, var(--glass-tint-warning) 70%, transparent);
+}
+.toast[data-tone='info'] {
+  --toast-hue: var(--info);
+  --glass-fg: var(--info-text);
+  --glass-tint: color-mix(in oklab, var(--glass-tint-info) 70%, transparent);
+}
+
+/* receding cards fall quiet: tone drains out, sheen dims, content fades */
+.toast[data-behind] {
+  --glass-tint: color-mix(in oklab, var(--glass-tint-neutral) 75%, transparent);
+  --glass-sheen-rest: 0.3;
+}
+.toast[data-behind] .toast__inner,
+.toast[data-behind] .toast__custom {
+  opacity: 0;
+}
+
+.toast__inner {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  transition: var(--transition-opacity);
+}
+
+/* the dial - glyph centered in the timer ring; one instrument, not two */
+.toast__icon {
+  position: relative;
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: calc(var(--icon-md) + 2 * var(--space-2));
+  height: calc(var(--icon-md) + 2 * var(--space-2));
+  color: var(--toast-hue);
+}
+.toast__icon-glyph {
+  display: grid;
+  place-items: center;
+}
+
+/* the ring - a draining arc; linear by design, animation-duration set at runtime to the toast's lifetime */
+.toast__ring {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg); /* arc starts at 12 o'clock           */
+  pointer-events: none;
+}
+.toast__ring circle {
+  fill: none;
+  stroke-width: var(--border-emphasis);
+}
+.toast__ring-track {
+  stroke: color-mix(in oklab, var(--toast-hue) 16%, transparent);
+}
+.toast__ring-arc {
+  stroke: var(--toast-hue);
+  stroke-linecap: round;
+  stroke-dasharray: 1; /* pathLength=1 - offset is a fraction */
+  animation-name: toast-ring;
+  animation-timing-function: linear;
+  animation-fill-mode: both;
+}
+.toast-viewport.is-paused .toast__ring-arc {
+  animation-play-state: paused;
+}
+@keyframes toast-ring {
+  from {
+    stroke-dashoffset: 0;
+  }
+  to {
+    stroke-dashoffset: 1;
+  }
+}
+
+.toast__text {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.toast__message {
+  margin: 0;
+  font: var(--type-label);
+  color: var(--glass-fg);
+  text-wrap: pretty;
+}
+.toast__desc {
+  margin: var(--space-1) 0 0;
+  font: var(--type-caption);
+  color: color-mix(in oklab, var(--glass-fg) 76%, transparent);
+  text-wrap: pretty;
+}
+
+/* coalesce counter - same toast refired becomes a xN counter (mono) */
+.toast__count {
+  flex: none;
+  font-family: var(--font-mono);
+  font-size: var(--size-micro);
+  line-height: var(--leading-micro);
+  font-variant-numeric: tabular-nums;
+  color: var(--glass-fg);
+  background: color-mix(in oklab, var(--glass-fg) 9%, transparent);
+  border-radius: var(--radius-sm);
+  padding: 0 var(--space-1);
+}
+
+.toast__action {
+  flex: none;
+}
+
+/* dismiss - appears only while the card is hovered or holds focus */
+.toast__close {
+  flex: none;
+  appearance: none;
+  display: grid;
+  place-items: center;
+  width: var(--space-6);
+  height: var(--space-6);
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: color-mix(in oklab, var(--glass-fg) 64%, transparent);
+  cursor: pointer;
+  opacity: 0;
+  transition:
+    var(--transition-control),
+    opacity var(--duration-fast) var(--ease-standard);
+}
+.toast:hover .toast__close,
+.toast:focus-within .toast__close {
+  opacity: 1;
+}
+.toast__close:hover {
+  background: color-mix(in oklab, var(--glass-fg) 9%, transparent);
+  color: var(--glass-fg);
+}
+.toast__close:active {
+  background: color-mix(in oklab, var(--glass-fg) 14%, transparent);
+}
+.toast__close:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+  opacity: 1;
+}
+
+/* Loading spinner - continuous --duration-spin (linear is allowed for loops; reduced motion slows, never freezes) */
+.toast__spinner {
+  display: block;
+  box-sizing: border-box;
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+  border-radius: var(--radius-full);
+  border: var(--border-emphasis) solid currentColor;
+  border-right-color: transparent;
+  color: var(--text-muted);
+  animation: toast-spin var(--duration-spin) linear infinite;
+}
+@keyframes toast-spin {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+/* Custom slot - bare neutral glass; the consumer owns the interior. */
+.toast__custom {
+  padding: var(--space-3) var(--space-4);
+  transition: var(--transition-opacity);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* travel/gestures collapse via the tokens; the ring is data, so it keeps running */
+  .toast,
+  .toast__close,
+  .toast__inner,
+  .toast__custom {
+    transition: none;
+  }
+}

package/src/components/toggle/Toggle.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+// Toggle - binary on/off switch for an immediate setting (vs. Checkbox, which stages a choice).
+
+import * as React from 'react';
+
+const { useState } = React;
+
+export interface ToggleProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'size' | 'type'
+> {
+  /** Controlled checked state. Omit for uncontrolled (use `defaultChecked`). */
+  checked?: boolean;
+  /** Uncontrolled initial state. */
+  defaultChecked?: boolean;
+  /** Disabled - inert and de-emphasized (faded track, retains its position). */
+  disabled?: boolean;
+  /** Track size: `md` 36x20 - `sm` 28x16 for dense settings/table rows. @default 'md' */
+  size?: 'sm' | 'md';
+  /** Label text beside the track. */
+  label?: React.ReactNode;
+  /** Optional secondary line under the label (settings rows). */
+  description?: React.ReactNode;
+  /** Fires on flip - read `e.target.checked`. */
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+}
+
+export function Toggle({
+  checked,
+  defaultChecked = false,
+  disabled = false,
+  size = 'md',
+  label,
+  description,
+  className = '',
+  onChange,
+  ...rest
+}: ToggleProps) {
+  const controlled = checked !== undefined;
+  const [internal, setInternal] = useState(!!defaultChecked);
+  const isOn = controlled ? !!checked : internal;
+
+  const classes = ['sw', size === 'sm' ? 'sw--sm' : '', disabled ? 'sw--disabled' : '', className]
+    .filter(Boolean)
+    .join(' ');
+
+  const [pressed, setPressed] = useState(false);
+  function press(on: boolean) {
+    return () => {
+      if (!disabled) setPressed(on);
+    };
+  }
+
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    if (!controlled) setInternal(e.target.checked);
+    if (onChange) onChange(e);
+  }
+
+  return (
+    <label
+      className={classes}
+      onPointerDown={press(true)}
+      onPointerUp={press(false)}
+      onPointerLeave={press(false)}
+      onPointerCancel={press(false)}
+    >
+      <input
+        type="checkbox"
+        role="switch"
+        className="sw__input"
+        disabled={disabled}
+        checked={isOn}
+        onChange={handleChange}
+        {...rest}
+        defaultChecked={undefined}
+      />
+      <span
+        className="sw__track"
+        data-on={isOn ? 'true' : undefined}
+        data-pressed={pressed ? 'true' : undefined}
+        aria-hidden="true"
+      >
+        <span className="sw__thumb"></span>
+      </span>
+      {label || description ? (
+        <span className="sw__text">
+          {label ? <span className="sw__label">{label}</span> : null}
+          {description ? <span className="sw__desc">{description}</span> : null}
+        </span>
+      ) : null}
+    </label>
+  );
+}

package/src/components/toggle/toggle.css

@@ -0,0 +1,152 @@
+/* Toggle (switch) - immediate on/off; native input hidden, track + thumb painted, thumb travels on a CSS spring. */
+
+.sw {
+  --sw-on-fill: linear-gradient(180deg, var(--accent), var(--accent-hover));
+  --sw-off-fill: var(--bg-muted);
+  --sw-on-border: var(--accent);
+  --sw-off-border: var(--border-strong);
+  --sw-ring: var(--ring-accent);
+  /* track size is the only input; thumb + travel derive from it */
+  --sw-w: var(--control-height);
+  --sw-h: var(--control-switch);
+  --sw-inset: calc(2 * var(--space-px));
+  /* inner track height minus both borders and the gap each side, so the inset is uniform on all edges */
+  --sw-thumb: calc(var(--sw-h) - 2 * var(--border-hairline) - 2 * var(--sw-inset));
+  /* colors read this flag; the thumb is moved by transform, not by it */
+  --on: 0;
+
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+  padding: var(--space-2);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--duration-fast) var(--ease-standard);
+
+  &:has(:checked) {
+    --on: 1;
+  }
+
+  &:not(.sw--disabled):hover {
+    background: var(--bg-muted);
+  }
+  &:not(.sw--disabled):hover:not(:has(:checked)) {
+    --sw-off-border: var(--text-subtle);
+  }
+  &:has(:focus-visible) .sw__track {
+    box-shadow: var(--sw-ring);
+  }
+}
+
+.sw__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.sw__track {
+  position: relative;
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: var(--sw-inset);
+  width: var(--sw-w);
+  height: var(--sw-h);
+  margin-top: calc((var(--leading-body) - var(--sw-h)) / 2);
+  border: var(--border-hairline) solid
+    color-mix(in oklab, var(--sw-on-border) calc(var(--on) * 100%), var(--sw-off-border));
+  border-radius: var(--radius-full);
+  background: var(--sw-off-fill);
+  transform: scale(1);
+  transition:
+    border-color var(--duration-base) var(--ease-standard),
+    background-color var(--duration-base) var(--ease-standard),
+    box-shadow var(--duration-fast) var(--ease-standard),
+    transform var(--duration-fast) var(--ease-spring);
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: var(--sw-on-fill);
+    opacity: var(--on);
+    transition: opacity var(--duration-base) var(--ease-standard);
+  }
+}
+/* --tx (travel) + --sx (press-stretch) compose one transform, so press and travel never fight over it */
+.sw__thumb {
+  --tx: 0px;
+  --sx: 1;
+  position: relative;
+  z-index: 1;
+  flex: none;
+  width: var(--sw-thumb);
+  height: var(--sw-thumb);
+  border-radius: var(--radius-full);
+  background: var(--bg-surface);
+  box-shadow: var(--shadow-sm);
+  transform: translateX(var(--tx)) scaleX(var(--sx));
+  transition: transform var(--duration-base) var(--ease-spring);
+}
+/* React-set [data-on] drives travel - no :has() twin to move the thumb out from under the spring and snap it */
+.sw__track[data-on='true'] .sw__thumb {
+  --tx: calc(var(--sw-w) - var(--sw-h));
+}
+.sw__track[data-pressed='true'] {
+  transform: scale(0.96);
+}
+.sw__track[data-pressed='true'] .sw__thumb {
+  --sx: 1.16;
+}
+
+.sw__text {
+  display: grid;
+  gap: var(--space-1);
+}
+.sw__label {
+  font: var(--type-label);
+  color: var(--text-strong);
+}
+.sw__desc {
+  font: var(--type-caption);
+  color: var(--text-muted);
+}
+
+.sw--sm {
+  --sw-w: var(--control-height-sm);
+  --sw-h: var(--space-4);
+  & .sw__label {
+    font: var(--type-caption);
+    font-weight: var(--weight-medium);
+    color: var(--text-strong);
+  }
+  & .sw__track {
+    margin-top: calc((var(--leading-caption) - var(--sw-h)) / 2);
+  }
+}
+
+/* disabled leaves the flag untouched, so the thumb keeps its correct position */
+.sw--disabled {
+  cursor: not-allowed;
+  --sw-on-fill: var(--accent-disabled);
+  --sw-off-fill: var(--bg-muted);
+  --sw-on-border: var(--accent-disabled);
+  --sw-off-border: var(--border-default);
+  & .sw__thumb {
+    box-shadow: var(--shadow-xs);
+  }
+  & .sw__label,
+  & .sw__desc {
+    color: var(--text-disabled);
+  }
+}