premium-ds 0.1.0

package/src/components/tooltip/Tooltip.tsx

@@ -0,0 +1,365 @@
+'use client';
+
+/* Tooltip - a transient, non-interactive hint on hover/focus (one shared bubble). */
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
+import { motion, AnimatePresence } from 'motion/react';
+import type { ReactElement, ReactNode } from 'react';
+import { UIMotion } from '../../tokens/motion-tokens';
+
+const SM = UIMotion;
+const { useRef, useEffect, useLayoutEffect, useState, useId, useSyncExternalStore } = React;
+
+type Placement = 'top' | 'bottom' | 'left' | 'right';
+
+interface ActivePayload {
+  id: string;
+  content: ReactNode;
+  shortcut?: string | null;
+  placement: Placement;
+  rect: () => DOMRect;
+}
+
+interface Size {
+  w: number;
+  h: number;
+}
+interface TargetBox extends Size {
+  x: number;
+  y: number;
+  placement: Placement;
+}
+interface RenderedBox extends TargetBox {
+  bodyW: number;
+}
+
+const OPEN_DELAY = 350;
+const CLOSE_GRACE = 140;
+const WARM_WINDOW = 300;
+
+const TIP_GAP =
+  typeof document !== 'undefined'
+    ? parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--space-2')) || 8
+    : 8;
+
+/* Store - what's showing, where; triggers write, the host renders. */
+const store = {
+  active: null as ActivePayload | null,
+  closeTimer: 0 as ReturnType<typeof setTimeout> | 0,
+  warmUntil: 0,
+  listeners: new Set<() => void>(),
+  get: () => store.active,
+  subscribe(l: () => void) {
+    store.listeners.add(l);
+    return () => store.listeners.delete(l);
+  },
+  emit() {
+    store.listeners.forEach((l) => l());
+  },
+  isWarm: () => store.active !== null || performance.now() < store.warmUntil,
+  open(payload: ActivePayload) {
+    clearTimeout(store.closeTimer);
+    store.active = payload;
+    store.emit();
+  },
+  close(id: string, grace = CLOSE_GRACE) {
+    // graced; only the owning trigger can close
+    clearTimeout(store.closeTimer);
+    store.closeTimer = setTimeout(() => {
+      if (store.active && store.active.id === id) store.closeNow();
+    }, grace);
+  },
+  closeNow() {
+    clearTimeout(store.closeTimer);
+    if (!store.active) return;
+    store.warmUntil = performance.now() + WARM_WINDOW;
+    store.active = null;
+    store.emit();
+  },
+};
+
+/* Target box from the trigger rect + the measured content size; flips + clamps. */
+function targetBox(size: Size, t: DOMRect, want: Placement): TargetBox {
+  const vw = window.innerWidth,
+    vh = window.innerHeight,
+    M = TIP_GAP;
+  let p = want;
+  if (p === 'top' && t.top - size.h - TIP_GAP < M) p = 'bottom';
+  else if (p === 'bottom' && t.bottom + size.h + TIP_GAP > vh - M) p = 'top';
+  else if (p === 'left' && t.left - size.w - TIP_GAP < M) p = 'right';
+  else if (p === 'right' && t.right + size.w + TIP_GAP > vw - M) p = 'left';
+  let x, y;
+  if (p === 'top') {
+    x = t.left + t.width / 2 - size.w / 2;
+    y = t.top - size.h - TIP_GAP;
+  } else if (p === 'bottom') {
+    x = t.left + t.width / 2 - size.w / 2;
+    y = t.bottom + TIP_GAP;
+  } else if (p === 'left') {
+    x = t.left - size.w - TIP_GAP;
+    y = t.top + t.height / 2 - size.h / 2;
+  } else {
+    x = t.right + TIP_GAP;
+    y = t.top + t.height / 2 - size.h / 2;
+  }
+  return {
+    x: Math.round(Math.min(Math.max(x, M), vw - size.w - M)),
+    y: Math.round(Math.min(Math.max(y, M), vh - size.h - M)),
+    w: size.w,
+    h: size.h,
+    placement: p,
+  };
+}
+
+const fromEdge = (p: Placement) => ({
+  // enter/exit offset toward the trigger
+  x: p === 'left' ? 4 : p === 'right' ? -4 : 0,
+  y: p === 'top' ? 4 : p === 'bottom' ? -4 : 0,
+});
+
+function Body({ a, width }: { a: ActivePayload; width?: number }) {
+  return (
+    <span className="tooltip__body" style={width ? { width } : undefined}>
+      {a.shortcut ? (
+        <span className="tooltip__row">
+          <span>{a.content}</span>
+          <kbd className="tooltip__shortcut">{a.shortcut}</kbd>
+        </span>
+      ) : (
+        a.content
+      )}
+    </span>
+  );
+}
+
+/* Host - the one bubble + its hidden measuring twin. */
+function TooltipHost() {
+  const active = useSyncExternalStore(store.subscribe, store.get);
+  const measureRef = useRef<HTMLDivElement>(null);
+  const [box, setBox] = useState<RenderedBox | null>(null);
+
+  // Measure the clone before paint: box = its border box; bodyW locks the live body's wrapping to the clone's.
+  useLayoutEffect(() => {
+    if (!active) {
+      setBox(null);
+      return;
+    }
+    const r = measureRef.current.getBoundingClientRect();
+    const b = (measureRef.current.firstChild as HTMLElement).getBoundingClientRect();
+    setBox({
+      ...targetBox(
+        { w: Math.ceil(r.width), h: Math.ceil(r.height) },
+        active.rect(),
+        active.placement,
+      ),
+      bodyW: Math.ceil(b.width),
+    });
+  }, [active]);
+
+  // Esc or any scroll dismisses (a stale hint is worse than none)
+  useEffect(() => {
+    if (!active) return undefined;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') store.closeNow();
+    };
+    const onScroll = () => store.closeNow();
+    document.addEventListener('keydown', onKey);
+    window.addEventListener('scroll', onScroll, true);
+    return () => {
+      document.removeEventListener('keydown', onKey);
+      window.removeEventListener('scroll', onScroll, true);
+    };
+  }, [active]);
+
+  const off = box ? fromEdge(box.placement) : { x: 0, y: 0 };
+
+  return ReactDOM.createPortal(
+    <React.Fragment>
+      {active && (
+        <div className="tooltip tooltip--measure" ref={measureRef} aria-hidden="true">
+          <Body a={active} />
+        </div>
+      )}
+      <AnimatePresence>
+        {active && box && (
+          <motion.div
+            key="tip"
+            className="tooltip"
+            id="scheduly-tooltip"
+            role="tooltip"
+            data-placement={box.placement}
+            initial={{
+              x: box.x + off.x,
+              y: box.y + off.y,
+              width: box.w,
+              height: box.h,
+              opacity: 0,
+              scale: 0.96,
+            }}
+            animate={{ x: box.x, y: box.y, width: box.w, height: box.h, opacity: 1, scale: 1 }}
+            exit={{
+              x: box.x + off.x,
+              y: box.y + off.y,
+              opacity: 0,
+              scale: 0.96,
+              transition: { duration: SM.dur.fast, ease: SM.ease.exit },
+            }}
+            transition={{
+              x: SM.t.layout,
+              y: SM.t.layout,
+              width: SM.t.layout,
+              height: SM.t.layout,
+              opacity: SM.t.enter,
+              scale: SM.t.enter,
+            }}
+          >
+            {/* one node keyed by trigger: old cuts, new fades in while the box travels (fixed width keeps wrapping stable) */}
+            <motion.span
+              key={active.id}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1, transition: SM.t.enter }}
+            >
+              <Body a={active} width={box.bodyW} />
+            </motion.span>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </React.Fragment>,
+    document.body,
+  );
+}
+
+// Mount the host exactly once, lazily, in its own root.
+let hostMounted = false;
+function ensureHost() {
+  if (hostMounted) return;
+  hostMounted = true;
+  const el = document.createElement('div');
+  el.setAttribute('data-tooltip-host', '');
+  document.body.appendChild(el);
+  createRoot(el).render(<TooltipHost />);
+}
+
+const chain = (theirs: ((e: any) => void) | undefined, mine: (e: any) => void) => (e: any) => {
+  if (theirs) theirs(e);
+  mine(e);
+};
+
+/* Trigger - reports to the store; default wraps the child in a display:contents anchor (any element, no ref), asChild clones instead. */
+export interface TooltipProps {
+  /** The hint - a string or small node; never interactive content. */
+  content: ReactNode;
+  /** Optional keyboard hint, rendered as mono metadata ("⌘↩", "S"). */
+  shortcut?: string | null;
+  /** Preferred side; flips automatically when out of viewport room. */
+  placement?: Placement;
+  /** Suppress the tooltip entirely (trigger renders untouched). */
+  disabled?: boolean;
+  /** ms before a cold hover shows; warm hovers + focus are instant. Default 350. */
+  openDelay?: number;
+  /** ms the bubble lingers after leaving (bridges moving to a neighbour). Default 140. */
+  closeDelay?: number;
+  /** Skip the wrapper - clone the child and merge handlers + ref onto it (child must take a ref). Default false. */
+  asChild?: boolean;
+  id?: string;
+  /** Exactly one element; any element works by default, asChild requires one that accepts a ref. */
+  children: ReactElement;
+}
+
+function Tooltip({
+  content,
+  shortcut = null,
+  placement = 'top',
+  disabled = false,
+  openDelay = OPEN_DELAY,
+  closeDelay = CLOSE_GRACE,
+  asChild = false,
+  id,
+  children,
+}: TooltipProps) {
+  const triggerRef = useRef<HTMLElement | null>(null);
+  const wrapRef = useRef<HTMLSpanElement | null>(null);
+  const openTimer = useRef<ReturnType<typeof setTimeout> | 0>(0);
+  const myId = id || 'tip-' + useId();
+
+  // The element we anchor to + set aria-describedby on (clone, or the wrapper's child).
+  const anchorEl = (): HTMLElement | null =>
+    asChild ? triggerRef.current : ((wrapRef.current?.firstElementChild as HTMLElement) ?? null);
+
+  useEffect(
+    () => () => {
+      clearTimeout(openTimer.current);
+      store.close(myId, 0);
+    },
+    [],
+  ); // eslint-disable-line react-hooks/exhaustive-deps
+
+  function show(immediate: boolean) {
+    if (disabled) return;
+    ensureHost();
+    clearTimeout(openTimer.current);
+    const el = anchorEl();
+    if (!el) return;
+    el.setAttribute('aria-describedby', 'scheduly-tooltip');
+    const open = () =>
+      store.open({
+        id: myId,
+        content,
+        shortcut,
+        placement,
+        rect: () => anchorEl()!.getBoundingClientRect(),
+      });
+    if (immediate || store.isWarm()) open();
+    else openTimer.current = setTimeout(open, openDelay);
+  }
+  function hide() {
+    clearTimeout(openTimer.current);
+    const el = anchorEl();
+    if (el) el.removeAttribute('aria-describedby');
+    store.close(myId, closeDelay);
+  }
+
+  const onEnter = (e: React.PointerEvent) => {
+    if (e.pointerType !== 'touch') show(false);
+  };
+  const onFocusIn = (e: React.FocusEvent) => {
+    if ((e.target as HTMLElement).matches(':focus-visible')) show(true);
+  };
+
+  // Default: a display:contents wrapper carries the listeners + rect; the child needs no ref.
+  if (!asChild) {
+    return (
+      <span
+        ref={wrapRef}
+        className="tooltip-anchor"
+        onPointerEnter={onEnter}
+        onPointerLeave={hide}
+        onPointerDown={hide}
+        onFocus={onFocusIn}
+        onBlur={hide}
+      >
+        {children}
+      </span>
+    );
+  }
+
+  // asChild: clone the child, merging our handlers + ref (a press dismisses: activating != hinting).
+  const child = React.Children.only(children) as ReactElement & { ref?: any };
+  const childRef = child.ref;
+  const childProps = child.props as any;
+  return React.cloneElement(child, {
+    ref: (node: HTMLElement | null) => {
+      triggerRef.current = node;
+      if (typeof childRef === 'function') childRef(node);
+      else if (childRef && typeof childRef === 'object') childRef.current = node;
+    },
+    onPointerEnter: chain(childProps.onPointerEnter, onEnter),
+    onPointerLeave: chain(childProps.onPointerLeave, hide),
+    onPointerDown: chain(childProps.onPointerDown, hide),
+    onFocus: chain(childProps.onFocus, onFocusIn),
+    onBlur: chain(childProps.onBlur, hide),
+  } as any);
+}
+
+export { Tooltip, TooltipHost };

package/src/components/tooltip/tooltip.css

@@ -0,0 +1,86 @@
+/* tooltip.css - the floating tooltip surface (one shared bubble). */
+
+.tooltip {
+  position: fixed;
+  left: 0;
+  top: 0;
+  box-sizing: border-box;
+  overflow: hidden; /* clips content while the box morphs  */
+  z-index: var(--layer-tooltip);
+  pointer-events: none;
+  width: max-content; /* the live bubble gets an animated width; this also sizes the measuring clone */
+  padding: var(--space-2) var(--space-3);
+  background: var(--bg-surface-raised);
+  color: var(--text-body);
+  border: var(--border-hairline) solid var(--border-default);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  font: var(--type-caption);
+  letter-spacing: var(--tracking-normal);
+}
+
+/* the hidden twin the host measures the NEXT box from (same styles, no motion) */
+.tooltip--measure {
+  visibility: hidden;
+  left: -9999px;
+  top: 0;
+}
+
+/* default trigger wrapper - display:contents, so it adds no layout; carries the listeners + rect */
+.tooltip-anchor {
+  display: contents;
+}
+
+/* wraps at the measure cap; the live body also gets its measured width inline (locked wrapping during the morph) */
+.tooltip__body {
+  display: block;
+  width: max-content;
+  max-inline-size: var(--measure-floating);
+  text-wrap: pretty;
+}
+
+/* grow from the trigger's edge (per placement) */
+.tooltip[data-placement='top'] {
+  transform-origin: center bottom;
+}
+.tooltip[data-placement='bottom'] {
+  transform-origin: center top;
+}
+.tooltip[data-placement='left'] {
+  transform-origin: right center;
+}
+.tooltip[data-placement='right'] {
+  transform-origin: left center;
+}
+
+.tooltip__row {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-3);
+}
+.tooltip__shortcut {
+  flex: 0 0 auto;
+  font-family: var(--font-mono);
+  font-size: var(--size-micro);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-subtle);
+  background: var(--bg-muted);
+  padding: 0 var(--space-1);
+  border-radius: var(--radius-sm);
+  white-space: nowrap;
+}
+
+/* Multi-line content - rich nodes style themselves with these; keep hierarchy minimal. */
+.tooltip strong {
+  font-weight: var(--weight-medium);
+  color: var(--text-strong);
+}
+.tooltip p {
+  margin: 0;
+}
+.tooltip p + p {
+  margin-top: var(--space-1);
+}
+.tooltip .tooltip__muted {
+  color: var(--text-muted);
+}

package/src/index.ts

@@ -0,0 +1,42 @@
+/* premium-ds public barrel - shipped components + prop types; internal helpers (*-core, field-shell, glide-pill, sheet-drag, date-utils) are intentionally not re-exported. */
+
+export * from './components/button/Button';
+export * from './components/motion/Collapse';
+
+export * from './components/badge/Badge';
+export * from './components/badge/StatusBadge';
+export * from './components/badge/CountBadge';
+export * from './components/avatar/Avatar';
+export * from './components/avatar/AvatarGroup';
+export * from './components/tag/Tag';
+export * from './components/tag/ToggleTag';
+export * from './components/table/Table';
+export * from './components/pagination/Pagination';
+
+export * from './components/input/TextField';
+export * from './components/input/NumberField';
+export * from './components/input/OtpField';
+export * from './components/textarea/Textarea';
+export * from './components/checkbox/Checkbox';
+export * from './components/toggle/Toggle';
+export * from './components/radio-group/RadioGroup';
+export * from './components/select/Select';
+export * from './components/select/MultiSelect';
+export type { SelectOption, SelectGroup } from './components/select/select-core';
+
+export * from './components/date-picker/DateField';
+export * from './components/date-picker/DateTimeField';
+export * from './components/date-picker/DateRangeField';
+export * from './components/date-picker/TimeField';
+
+export * from './components/tabs/Tabs';
+
+export * from './components/overlay/Overlay';
+export * from './components/dialog/Dialog';
+export * from './components/tooltip/Tooltip';
+export * from './components/alert/Alert';
+export * from './components/toast/Toast';
+export * from './components/toast/toast-store';
+
+export { UIMotion } from './tokens/motion-tokens';
+export type { MotionTokens, Bezier } from './tokens/motion-tokens';

package/src/styles.css

@@ -0,0 +1,39 @@
+/* premium-ds entry - @import manifest; order matters: fonts - primitives - semantics - components. */
+
+@import url('./tokens/fonts.css');
+
+@import url('./tokens/color.css');
+@import url('./tokens/typography.css');
+@import url('./tokens/spacing.css');
+@import url('./tokens/radius.css');
+@import url('./tokens/elevation.css');
+@import url('./tokens/motion.css');
+@import url('./tokens/glass.css');
+@import url('./tokens/icons.css');
+@import url('./tokens/layers.css');
+@import url('./tokens/avatar.css');
+
+@import url('./tokens/semantic.css');
+
+@import url('./components/button/button.css');
+@import url('./components/motion/collapse.css');
+@import url('./components/icon/icon.css');
+@import url('./components/input/input.css');
+@import url('./components/textarea/textarea.css');
+@import url('./components/checkbox/checkbox.css');
+@import url('./components/radio-group/radio-group.css');
+@import url('./components/toggle/toggle.css');
+@import url('./components/dialog/dialog.css');
+@import url('./components/select/select.css');
+@import url('./components/glass/glass.css');
+@import url('./components/badge/badge.css');
+@import url('./components/tag/tag.css');
+@import url('./components/tooltip/tooltip.css');
+@import url('./components/toast/toast.css');
+@import url('./components/tabs/tabs.css');
+@import url('./components/overlay/overlay.css');
+@import url('./components/pagination/pagination.css');
+@import url('./components/alert/alert.css');
+@import url('./components/avatar/avatar.css');
+@import url('./components/table/table.css');
+@import url('./components/date-picker/date-picker.css');

package/src/tokens/avatar.css

@@ -0,0 +1,20 @@
+/* Avatar tokens - reserved identity palette + lit-from-above face finish. */
+
+:root {
+  --avatar-1-bg: oklch(0.945 0.04 250);
+  --avatar-1-fg: oklch(0.45 0.08 250);
+  --avatar-2-bg: oklch(0.945 0.04 292);
+  --avatar-2-fg: oklch(0.45 0.08 292);
+  --avatar-3-bg: oklch(0.945 0.04 334);
+  --avatar-3-fg: oklch(0.45 0.08 334);
+  --avatar-4-bg: oklch(0.945 0.04 5);
+  --avatar-4-fg: oklch(0.45 0.08 5);
+  --avatar-5-bg: oklch(0.945 0.04 55);
+  --avatar-5-fg: oklch(0.45 0.08 55);
+  --avatar-6-bg: oklch(0.945 0.04 125);
+  --avatar-6-fg: oklch(0.45 0.08 125);
+
+  /* Surface finish - white sheen from top, cool near-black shade from bottom (never pure black). */
+  --avatar-sheen: oklch(1 0 0 / 0.35);
+  --avatar-shade: oklch(0.225 0.012 264 / 0.05);
+}

package/src/tokens/color.css

@@ -0,0 +1,56 @@
+/* Color primitives - the closed neutral + status ramps. */
+
+:root {
+  --gray-0: oklch(1 0 0);
+  --gray-25: oklch(0.992 0.0015 264);
+  --gray-50: oklch(0.984 0.003 264);
+  --gray-100: oklch(0.968 0.004 264);
+  --gray-150: oklch(0.948 0.005 264);
+  --gray-200: oklch(0.922 0.006 264);
+  --gray-300: oklch(0.872 0.008 264);
+  --gray-400: oklch(0.765 0.01 264);
+  --gray-500: oklch(0.642 0.012 264);
+  --gray-600: oklch(0.532 0.013 264);
+  --gray-700: oklch(0.422 0.013 264);
+  --gray-800: oklch(0.305 0.012 264);
+  --gray-900: oklch(0.225 0.01 264);
+  --gray-950: oklch(0.165 0.008 264);
+
+  --teal-50: oklch(0.972 0.02 198);
+  --teal-100: oklch(0.935 0.04 198);
+  --teal-200: oklch(0.88 0.066 198);
+  --teal-300: oklch(0.795 0.092 198);
+  --teal-400: oklch(0.705 0.112 198);
+  --teal-500: oklch(0.63 0.118 198);
+  --teal-600: oklch(0.56 0.114 198);
+  --teal-700: oklch(0.478 0.1 198);
+  --teal-800: oklch(0.4 0.082 198);
+  --teal-900: oklch(0.32 0.062 198);
+
+  --green-50: oklch(0.965 0.028 152);
+  --green-500: oklch(0.62 0.13 152);
+  --green-600: oklch(0.548 0.122 152);
+  --green-700: oklch(0.462 0.1 152);
+
+  --amber-50: oklch(0.972 0.034 75);
+  --amber-500: oklch(0.76 0.14 75);
+  --amber-600: oklch(0.7 0.142 75);
+  --amber-700: oklch(0.56 0.118 75);
+
+  --red-50: oklch(0.968 0.02 27);
+  --red-300: oklch(0.8 0.09 27);
+  --red-400: oklch(0.64 0.2 27);
+  --red-500: oklch(0.602 0.196 27);
+  --red-600: oklch(0.545 0.196 27);
+  --red-700: oklch(0.478 0.172 27);
+
+  /* Wash tints - glassy active/selected fills that let the surface show through; low alpha per hue. */
+  --gray-wash: oklch(0.42 0.012 264 / 0.06);
+  --teal-wash: oklch(0.63 0.118 198 / 0.05);
+  --green-wash: oklch(0.62 0.13 152 / 0.1);
+  --amber-wash: oklch(0.76 0.14 75 / 0.12);
+  --red-wash: oklch(0.602 0.196 27 / 0.1);
+
+  /* Cool near-black shadow ink - pure black looks muddy on a cool canvas. */
+  --shadow-rgb: 13 18 30;
+}

package/src/tokens/elevation.css

@@ -0,0 +1,20 @@
+/* Elevation - two-layer shadows, focus/selection rings, border widths. */
+
+:root {
+  --shadow-xs: 0 1px 1px rgb(var(--shadow-rgb) / 0.04);
+  --shadow-sm: 0 1px 2px rgb(var(--shadow-rgb) / 0.05), 0 1px 1px rgb(var(--shadow-rgb) / 0.04);
+  --shadow-md: 0 2px 4px rgb(var(--shadow-rgb) / 0.04), 0 6px 12px rgb(var(--shadow-rgb) / 0.07);
+  --shadow-lg: 0 4px 8px rgb(var(--shadow-rgb) / 0.04), 0 12px 28px rgb(var(--shadow-rgb) / 0.1);
+  --shadow-xl: 0 8px 16px rgb(var(--shadow-rgb) / 0.06), 0 24px 48px rgb(var(--shadow-rgb) / 0.14);
+
+  /* Borders - one hairline (1px); weight comes from the border color, not thickness; 2px for focus/selected. */
+  --border-hairline: 1px;
+  --border-emphasis: 1.5px;
+
+  /* Focus & selection rings - box-shadows (not outlines) so they follow border-radius. */
+  --ring-accent: 0 0 0 3px oklch(0.63 0.118 198 / 0.32);
+  --ring-danger: 0 0 0 3px oklch(0.602 0.196 27 / 0.3);
+  --ring-warning: 0 0 0 3px color-mix(in oklab, var(--warning) 30%, transparent);
+  --ring-success: 0 0 0 3px color-mix(in oklab, var(--success) 30%, transparent);
+  --ring-offset: 0 0 0 2px var(--bg-surface), 0 0 0 4px oklch(0.63 0.118 198 / 0.4);
+}

package/src/tokens/fonts.css

@@ -0,0 +1,3 @@
+/* Webfonts - Geist (UI) + Geist Mono (numerals, data, code) from Google Fonts; self-host woff2 for prod. */
+
+@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

package/src/tokens/glass.css

@@ -0,0 +1,21 @@
+/* Glass tokens - structural frosted-surface pieces; per-tone tints live in semantic.css. */
+
+:root {
+  --glass-blur: 9px;
+  --glass-blur-strong: 16px;
+  --glass-saturate: 1.5;
+
+  --glass-sheen: linear-gradient(
+    145deg,
+    rgb(255 255 255 / 0.55) 0%,
+    rgb(255 255 255 / 0.1) 24%,
+    rgb(255 255 255 / 0) 46%
+  );
+  --glass-sheen-rest: 0.8;
+  --glass-sheen-hover: 1;
+
+  --glass-highlight: inset 0 1px 0 0 rgb(255 255 255 / 0.55);
+  --glass-shadow: 0 1px 2px rgb(var(--shadow-rgb) / 0.05), 0 2px 5px rgb(var(--shadow-rgb) / 0.05);
+  --glass-shadow-hover:
+    0 2px 4px rgb(var(--shadow-rgb) / 0.06), 0 8px 18px rgb(var(--shadow-rgb) / 0.1);
+}

package/src/tokens/icons.css

@@ -0,0 +1,7 @@
+/* Icon sizing - sm 16 (inline) - md 20 (default) - lg 24 (emphasis). */
+
+:root {
+  --icon-sm: 16px;
+  --icon-md: 20px;
+  --icon-lg: 24px;
+}

package/src/tokens/layers.css

@@ -0,0 +1,6 @@
+/* Z-index bands - one stacking contract; --layer-overlay is a BAND (base + stack depth) so a later overlay paints above an earlier one. */
+:root {
+  --layer-overlay: 1000;
+  --layer-toast: 1050;
+  --layer-tooltip: 1100;
+}