premium-ds 0.1.0

package/src/components/dialog/dialog.css

@@ -0,0 +1,170 @@
+/* dialog.css - the styled dialog surface (Overlay owns modality + motion). */
+
+/* The panel - flex column so the body scrolls between a pinned header + footer; padding lives on the parts. */
+.dialog {
+  --dialog-w: 32rem;
+  position: relative;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  width: var(--dialog-w);
+  max-width: 100%;
+  max-height: min(85dvh, 44rem);
+  padding: 0;
+  overflow: hidden;
+  background: var(--bg-surface);
+  border: var(--border-hairline) solid var(--border-default);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-xl);
+  color: var(--text-body);
+  font-family: var(--font-sans);
+}
+
+.dialog[data-size='sm'] {
+  --dialog-w: 25rem;
+}
+.dialog[data-size='lg'] {
+  --dialog-w: 40rem;
+}
+
+/* Header - icon - heading - close; flex-start keeps a tall heading top-aligned with the badge. */
+.dialog__header {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+  padding: var(--space-5) var(--space-5) var(--space-4);
+  transition:
+    border-color var(--duration-base) var(--ease-standard),
+    box-shadow var(--duration-base) var(--ease-standard);
+  border-bottom: var(--border-hairline) solid transparent;
+}
+/* divider + faint lift appears only once the body is scrolled under it */
+.dialog:has(.dialog__body[data-scroll-top]) .dialog__header {
+  border-bottom-color: var(--border-subtle);
+  box-shadow: var(--shadow-xs);
+}
+
+.dialog__icon {
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: var(--radius-md);
+  background: var(--accent-subtle);
+  color: var(--text-accent);
+  font-size: var(--icon-md);
+}
+.dialog[data-tone='danger'] .dialog__icon {
+  background: var(--danger-subtle);
+  color: var(--danger-text);
+}
+
+.dialog__heading {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  /* nudge text to optical-center against the 36px icon badge when present */
+  padding-top: var(--space-px);
+}
+.dialog__title {
+  margin: 0;
+  color: var(--text-strong);
+  font: var(--weight-semibold) var(--size-heading)/var(--leading-heading) var(--font-sans);
+  letter-spacing: var(--tracking-tight);
+  text-wrap: pretty;
+}
+.dialog__desc {
+  margin: 0;
+  color: var(--text-muted);
+  font: var(--type-body);
+  text-wrap: pretty;
+}
+
+/* close - a quiet ghost icon button; the hit box is bigger than the glyph */
+.dialog__close {
+  flex: 0 0 auto;
+  appearance: none;
+  margin: calc(var(--space-1) * -1) calc(var(--space-1) * -1) 0 0;
+  display: grid;
+  place-items: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--text-subtle);
+  cursor: pointer;
+  font-size: var(--icon-sm);
+  transition: var(--transition-control);
+}
+.dialog__close:hover {
+  background: var(--bg-subtle);
+  color: var(--text-strong);
+}
+.dialog__close:active {
+  background: var(--bg-muted);
+}
+.dialog__close:focus-visible {
+  outline: none;
+  color: var(--text-strong);
+  box-shadow: var(--ring-accent);
+}
+
+/* Body - the scroll region; min-height:0 lets it shrink so header/footer stay pinned. */
+.dialog__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 0 var(--space-5) var(--space-5);
+  color: var(--text-body);
+  font: var(--type-body);
+}
+.dialog:has(.dialog__icon) .dialog__body {
+  padding-left: calc(var(--space-5) + 2.25rem + var(--space-3));
+}
+.dialog:has(.dialog__footer) .dialog__body {
+  padding-bottom: var(--space-4);
+}
+.dialog__body > :first-child {
+  margin-top: 0;
+}
+.dialog__body > :last-child {
+  margin-bottom: 0;
+}
+
+.dialog__body {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-strong) transparent;
+}
+.dialog__body::-webkit-scrollbar {
+  width: 10px;
+}
+.dialog__body::-webkit-scrollbar-thumb {
+  background: var(--border-strong);
+  border-radius: var(--radius-full);
+  border: 3px solid var(--bg-surface);
+  background-clip: padding-box;
+}
+
+/* Footer - right-aligned actions; gains a top divider only when the body scrolls under it. */
+.dialog__footer {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+  padding: var(--space-4) var(--space-5) var(--space-5);
+  border-top: var(--border-hairline) solid transparent;
+  transition: border-color var(--duration-base) var(--ease-standard);
+}
+.dialog:has(.dialog__body[data-scroll-bottom]) .dialog__footer {
+  border-top-color: var(--border-subtle);
+}

package/src/components/glass/glass.css

@@ -0,0 +1,100 @@
+/* Glass surface - translucent tint + backdrop blur + a sheen layer; consumer sets --glass-tint and --glass-fg. */
+
+.glass {
+  --glass-fg: var(--text-body);
+  --glass-tint: var(--glass-tint-neutral);
+
+  position: relative;
+  isolation: isolate; /* local stacking for the sheen */
+  color: var(--glass-fg);
+
+  background: var(--glass-tint);
+  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+  box-shadow:
+    var(--glass-highlight),
+    inset 0 0 0 var(--border-hairline) color-mix(in oklab, var(--glass-fg) 22%, transparent),
+    var(--glass-shadow);
+
+  transition:
+    transform var(--duration-base) var(--ease-standard),
+    box-shadow var(--duration-base) var(--ease-standard),
+    background-color var(--duration-base) var(--ease-standard);
+}
+
+/* Sheen on its own layer so hover animates opacity/transform - gradients can't transition directly. */
+.glass::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  border-radius: inherit;
+  background: var(--glass-sheen);
+  opacity: var(--glass-sheen-rest);
+  pointer-events: none;
+  transition:
+    opacity var(--duration-base) var(--ease-standard),
+    transform var(--duration-slow) var(--ease-entrance);
+}
+.glass > * {
+  position: relative;
+  z-index: 1;
+} /* content rides above the sheen */
+
+.glass--strong {
+  --glass-blur: var(--glass-blur-strong);
+}
+
+.glass--interactive:hover {
+  transform: translateY(calc(var(--space-px) * -1));
+  box-shadow:
+    var(--glass-highlight),
+    inset 0 0 0 var(--border-hairline) color-mix(in oklab, var(--glass-fg) 26%, transparent),
+    var(--glass-shadow-hover);
+}
+.glass--interactive:hover::before {
+  opacity: var(--glass-sheen-hover);
+  transform: translateY(-8%);
+}
+
+/* Glint - one-shot light sweep; add .glass-glint to fire, remove after it ends (sits above content, z-index 2). */
+.glass-glint::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  border-radius: inherit;
+  pointer-events: none;
+  opacity: 0; /* resting state is invisible - no mid-sweep flash */
+  background: linear-gradient(118deg, transparent 36%, rgb(255 255 255 / 0.7) 50%, transparent 64%);
+  animation: glass-glint var(--duration-slow) var(--ease-standard) 1 forwards;
+}
+@keyframes glass-glint {
+  0% {
+    opacity: 0;
+    transform: translateX(-28%);
+  }
+  40% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(28%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .glass,
+  .glass::before {
+    transition: none;
+  }
+  .glass--interactive:hover {
+    transform: none;
+  }
+  .glass--interactive:hover::before {
+    transform: none;
+  }
+  .glass-glint::after {
+    animation: none;
+  }
+}

package/src/components/icon/Icon.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+// Icon - internal, curated glyph set; statically imported so the bundle ships only these (tree-shaking).
+
+import {
+  ArrowUp,
+  Calendar,
+  CalendarDot,
+  CaretDown,
+  CaretLeft,
+  CaretRight,
+  CaretUp,
+  Check,
+  CheckCircle,
+  Clock,
+  Globe,
+  Info,
+  MagnifyingGlass,
+  Warning,
+  WarningCircle,
+  X,
+} from '@phosphor-icons/react';
+import type { IconWeight } from '@phosphor-icons/react';
+
+type Glyph = typeof X;
+
+const REGISTRY = {
+  x: X,
+  close: X,
+  check: Check,
+  'arrow-up': ArrowUp,
+  'caret-up': CaretUp,
+  'caret-down': CaretDown,
+  'caret-left': CaretLeft,
+  'caret-right': CaretRight,
+  'magnifying-glass': MagnifyingGlass,
+  calendar: Calendar,
+  'calendar-dot': CalendarDot,
+  clock: Clock,
+  globe: Globe,
+  info: Info,
+  warning: Warning,
+  'warning-circle': WarningCircle,
+  'check-circle': CheckCircle,
+} satisfies Record<string, Glyph>;
+
+export type IconName = keyof typeof REGISTRY;
+export type IconSize = 'sm' | 'md' | 'lg';
+export type { IconWeight };
+
+export interface IconProps {
+  /** A curated glyph name (see the registry in this file). */
+  name: IconName;
+  /** Token size: sm 16 - md 20 (default) - lg 24. */
+  size?: IconSize;
+  /** `fill` marks active/selected; Regular otherwise. */
+  weight?: IconWeight;
+  /** If set, the icon is meaningful and exposed to AT; omit for decorative. */
+  label?: string;
+  className?: string;
+}
+
+const SIZE_PX: Record<IconSize, number> = { sm: 16, md: 20, lg: 24 };
+
+export function Icon({ name, size = 'md', weight = 'regular', label, className = '' }: IconProps) {
+  const Glyph = REGISTRY[name];
+  const a11y = label ? { role: 'img', 'aria-label': label } : { 'aria-hidden': true };
+  return (
+    <Glyph
+      size={SIZE_PX[size]}
+      weight={weight}
+      className={('icon ' + className).trim()}
+      {...a11y}
+    />
+  );
+}

package/src/components/icon/IconSlot.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+// IconSlot - sizes a consumer-supplied icon node to the --icon-* tokens and currentColor.
+
+import type { ReactNode } from 'react';
+import type { IconSize } from './Icon';
+
+export function IconSlot({ size = 'md', children }: { size?: IconSize; children?: ReactNode }) {
+  if (!children) return null;
+  return <span className={`icon-slot icon-slot--${size}`}>{children}</span>;
+}

package/src/components/icon/icon.css

@@ -0,0 +1,33 @@
+/* Icon - base layout (inline/flex seating); size and color come from props/tokens. */
+
+.icon {
+  flex: none;
+  vertical-align: middle;
+}
+
+/* icon-slot - locks a consumer icon node to the token size and currentColor. */
+.icon-slot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  color: currentColor;
+}
+.icon-slot--sm {
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+}
+.icon-slot--md {
+  width: var(--icon-md);
+  height: var(--icon-md);
+}
+.icon-slot--lg {
+  width: var(--icon-lg);
+  height: var(--icon-lg);
+}
+.icon-slot > svg,
+.icon-slot > img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}

package/src/components/input/NumberField.tsx

@@ -0,0 +1,117 @@
+'use client';
+
+// NumberField.tsx - numeric input: tabular figures, caret steppers, unit suffix, min/max clamp, arrow stepping.
+
+import type { ChangeEvent, InputHTMLAttributes, KeyboardEvent, ReactNode } from 'react';
+import { Icon } from '../icon/Icon';
+
+export interface NumberFieldProps extends Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  'size' | 'value' | 'onChange' | 'min' | 'max' | 'step'
+> {
+  id?: string;
+  label?: ReactNode;
+  helper?: ReactNode;
+  /** Error message + error state. */
+  error?: ReactNode;
+  /** Unit suffix shown inside the field (e.g. "days", "%"). */
+  unit?: string;
+  /** Bounds + step. Steppers disable at min/max; value clamps on blur. */
+  min?: number;
+  max?: number;
+  step?: number;
+  /** Controlled numeric value. */
+  value?: number | string;
+  /** Called with the next clamped number. */
+  onChange?: (value: number) => void;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export function NumberField({
+  id,
+  label,
+  helper,
+  error,
+  unit,
+  min = 0,
+  max = Infinity,
+  step = 1,
+  value,
+  onChange,
+  size,
+  className = '',
+  ...rest
+}: NumberFieldProps) {
+  const v = parseInt((value ?? 0) as any, 10) || 0;
+  const set = (n: number) => onChange && onChange(Math.min(max, Math.max(min, n)));
+  const cls = [
+    'fld',
+    'numf',
+    unit ? 'numf--unit' : '',
+    size === 'sm' ? 'fld--sm' : size === 'lg' ? 'fld--lg' : '',
+    error ? 'is-error' : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div className={cls}>
+      {label && (
+        <label className="fld__label" htmlFor={id}>
+          {label}
+        </label>
+      )}
+      <div className="fld__control">
+        <input
+          id={id}
+          className="fld__input"
+          type="text"
+          inputMode="numeric"
+          value={value}
+          onChange={(e: ChangeEvent<HTMLInputElement>) =>
+            set(parseInt(e.target.value.replace(/[^\d]/g, '') || '0', 10))
+          }
+          onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
+            if (e.key === 'ArrowUp') {
+              e.preventDefault();
+              set(v + step);
+            }
+            if (e.key === 'ArrowDown') {
+              e.preventDefault();
+              set(v - step);
+            }
+          }}
+          {...rest}
+        />
+        {unit && <span className="numf__unit">{unit}</span>}
+        <div className="numf__steppers">
+          <button
+            type="button"
+            className="numf__step"
+            aria-label="Increase"
+            disabled={v >= max}
+            onClick={() => set(v + step)}
+          >
+            <Icon name="caret-up" size="sm" />
+          </button>
+          <button
+            type="button"
+            className="numf__step"
+            aria-label="Decrease"
+            disabled={v <= min}
+            onClick={() => set(v - step)}
+          >
+            <Icon name="caret-down" size="sm" />
+          </button>
+        </div>
+      </div>
+      {(error || helper) && (
+        <div className="fld__msg">
+          {error && <Icon name="warning-circle" size="sm" weight="fill" />}
+          {error || helper}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/input/OtpField.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+// OtpField.tsx - segmented one-time-code input: mono slots, auto-advance, arrow nav, paste-to-fill, grouping.
+
+import { useRef } from 'react';
+import type {
+  ChangeEvent,
+  ClipboardEvent,
+  FocusEvent,
+  KeyboardEvent,
+  MouseEvent,
+  ReactNode,
+} from 'react';
+
+export interface OtpFieldProps {
+  /** Number of slots. @default 6 */
+  length?: number;
+  /** Controlled value (digit string). */
+  value?: string;
+  /** Called with the next value string. */
+  onChange?: (value: string) => void;
+  /** Insert a separator every N slots (e.g. 3 - "-------"). */
+  group?: number;
+  /** Error state (red slots + ring). */
+  error?: boolean;
+  disabled?: boolean;
+  size?: 'sm';
+  className?: string;
+}
+
+export function OtpField({
+  length = 6,
+  value = '',
+  onChange,
+  group,
+  error,
+  disabled,
+  size,
+  className = '',
+}: OtpFieldProps) {
+  const refs = useRef<(HTMLInputElement | null)[]>([]);
+  const chars = String(value).slice(0, length).padEnd(length).split('');
+  const emit = (s: string) => onChange && onChange(s.replace(/ +$/, '').slice(0, length));
+  const setAt = (i: number, ch: string) => {
+    const a = chars.slice();
+    a[i] = ch || ' ';
+    emit(a.join(''));
+  };
+  // place caret at the end (no selection highlight); replacement handled by slice(-1)
+  const caretEnd = (el: HTMLInputElement | null) => {
+    if (!el) return;
+    const n = el.value.length;
+    try {
+      el.setSelectionRange(n, n);
+    } catch {}
+  };
+  const go = (j: number) => {
+    const el = refs.current[j];
+    if (el) {
+      el.focus();
+      caretEnd(el);
+    }
+  };
+
+  const cls = ['otp', size === 'sm' ? 'otp--sm' : '', error ? 'is-error' : '', className]
+    .filter(Boolean)
+    .join(' ');
+
+  const cells: ReactNode[] = [];
+  for (let i = 0; i < length; i++) {
+    if (group && i > 0 && i % group === 0)
+      cells.push(<span key={`sep${i}`} className="otp__sep" />);
+    cells.push(
+      <input
+        key={i}
+        ref={(el) => {
+          refs.current[i] = el;
+        }}
+        className="otp__slot"
+        inputMode="numeric"
+        autoComplete="one-time-code"
+        disabled={disabled}
+        value={chars[i].trim()}
+        data-filled={chars[i].trim() ? 'true' : 'false'}
+        onFocus={(e: FocusEvent<HTMLInputElement>) => caretEnd(e.target)}
+        onMouseDown={(e: MouseEvent<HTMLInputElement>) => {
+          e.preventDefault();
+          go(i);
+        }}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => {
+          const ch = e.target.value.replace(/[^\d]/g, '').slice(-1);
+          setAt(i, ch);
+          if (ch && i < length - 1) go(i + 1);
+        }}
+        onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
+          if (e.key === 'Backspace' && !chars[i].trim() && i > 0) {
+            e.preventDefault();
+            setAt(i - 1, '');
+            go(i - 1);
+          } else if (e.key === 'ArrowLeft' && i > 0) {
+            e.preventDefault();
+            go(i - 1);
+          } else if (e.key === 'ArrowRight' && i < length - 1) {
+            e.preventDefault();
+            go(i + 1);
+          }
+        }}
+        onPaste={(e: ClipboardEvent<HTMLInputElement>) => {
+          e.preventDefault();
+          const d = (e.clipboardData.getData('text') || '').replace(/[^\d]/g, '');
+          emit(chars.slice(0, i).join('') + d);
+          refs.current[Math.min(i + d.length, length - 1)]?.focus();
+        }}
+      />,
+    );
+  }
+  return <div className={cls}>{cells}</div>;
+}