@zyncat/ui 0.8.0

package/src/components/primitives/textarea/textarea.css

@@ -0,0 +1,219 @@
+/* textarea.css - Textarea (multiline composer): the .txa box over the .fld shell, auto-grow, char meter, over-limit highlight. */
+
+.txa {
+  --txa-pad-y: var(--space-3);
+  --txa-pad-x: var(--space-4);
+  --txa-lh: var(--leading-body);
+  --txa-min-rows: 3;
+  --txa-max-rows: 10;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-inset);
+  border: var(--border-hairline) solid var(--border-default);
+  border-radius: var(--radius-lg);
+  transition: var(--transition-control);
+}
+.txa:hover:not(.is-disabled):not(.is-readonly):not(:focus-within) {
+  border-color: var(--border-strong);
+}
+.txa:focus-within {
+  border-color: var(--accent);
+  background: var(--bg-surface);
+  box-shadow: var(--ring-accent);
+}
+.txa.is-disabled {
+  background: var(--bg-muted);
+}
+.txa.is-readonly {
+  background: var(--bg-subtle);
+}
+
+/* The .txa__stack wrapper owns the height and is the only thing that animates; overflow:clip while growing (a clip box can't scroll to the caret - no jump), flipped to auto by JS only past max-rows. */
+.txa__stack {
+  position: relative;
+  min-height: calc(var(--txa-min-rows) * var(--txa-lh) + 2 * var(--txa-pad-y));
+  max-height: calc(var(--txa-max-rows) * var(--txa-lh) + 2 * var(--txa-pad-y));
+  overflow: clip;
+  transition: height var(--duration-base) var(--ease-standard);
+}
+.txa__input,
+.txa__mirror {
+  box-sizing: border-box;
+  width: 100%;
+  font: var(--type-body);
+  padding: var(--txa-pad-y) var(--txa-pad-x);
+  border-radius: inherit;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+.txa__input {
+  position: relative;
+  z-index: 1;
+  display: block;
+  margin: 0;
+  border: 0;
+  background: transparent;
+  resize: none;
+  appearance: none;
+  -webkit-appearance: none;
+  outline: none;
+  color: var(--text-strong);
+  overflow: hidden;
+}
+.txa__input::placeholder {
+  color: var(--text-disabled);
+}
+.txa__input:disabled {
+  color: var(--text-disabled);
+  cursor: not-allowed;
+}
+.txa__input[readonly] {
+  color: var(--text-body);
+}
+
+/* over-limit highlight: faint tint + a danger underline on the excess chars */
+.txa__mirror {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 0;
+  color: transparent;
+  pointer-events: none;
+  user-select: none;
+}
+.txa__mirror mark {
+  color: transparent;
+  background: var(--danger-subtle);
+  border-radius: var(--radius-sm);
+  text-decoration: underline;
+  text-decoration-color: var(--danger);
+  text-decoration-thickness: 2px;
+  text-underline-offset: 3px;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+.txa__bar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  border-top: var(--border-hairline) solid var(--border-subtle);
+  transition: border-color var(--duration-fast) var(--ease-standard);
+}
+.txa:focus-within .txa__bar {
+  border-top-color: var(--border-default);
+}
+.txa__hint {
+  font: var(--type-micro);
+  color: var(--text-subtle);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.txa__kbd {
+  font-family: var(--font-mono);
+  font-size: var(--size-micro);
+  line-height: 1;
+  color: var(--text-muted);
+  padding: var(--space-1);
+  border: var(--border-hairline) solid var(--border-default);
+  border-radius: var(--radius-sm);
+  background: var(--bg-surface);
+}
+
+.txa__meter {
+  margin-left: auto;
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.txa__count {
+  font-family: var(--font-mono);
+  font-size: var(--size-micro);
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-subtle);
+  white-space: nowrap;
+  transition: color var(--duration-fast) var(--ease-standard);
+}
+.txa__ring {
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+  flex: none;
+  transform: rotate(-90deg);
+}
+.txa__ring circle {
+  fill: none;
+  stroke-width: 2;
+}
+.txa__ring .txa__ring-trk {
+  stroke: var(--border-default);
+}
+.txa__ring .txa__ring-prg {
+  stroke: var(--accent);
+  stroke-linecap: round;
+  stroke-dasharray: var(--txa-ring-c);
+  stroke-dashoffset: calc(var(--txa-ring-c) * (1 - var(--txa-ring-p, 0)));
+  transition:
+    stroke-dashoffset var(--duration-base) var(--ease-standard),
+    stroke var(--duration-fast) var(--ease-standard);
+}
+.txa__meter.is-near .txa__ring-prg {
+  stroke: var(--warning);
+}
+.txa__meter.is-near .txa__count {
+  color: var(--warning-text);
+}
+.txa__meter.is-over .txa__ring-prg {
+  stroke: var(--danger);
+}
+.txa__meter.is-over .txa__count {
+  color: var(--danger-text);
+  font-weight: var(--weight-medium);
+}
+
+.fld.is-error .txa {
+  border-color: var(--danger);
+}
+.fld.is-error .txa:hover:not(.is-disabled):not(.is-readonly):not(:focus-within) {
+  border-color: var(--danger-text);
+}
+.fld.is-error .txa:focus-within {
+  box-shadow: var(--ring-danger);
+}
+.fld.is-warning .txa {
+  border-color: var(--warning);
+}
+.fld.is-warning .txa:hover:not(.is-disabled):not(.is-readonly):not(:focus-within) {
+  border-color: var(--warning-text);
+}
+.fld.is-warning .txa:focus-within {
+  box-shadow: var(--ring-warning);
+}
+.fld.is-success .txa {
+  border-color: var(--success);
+}
+.fld.is-success .txa:hover:not(.is-disabled):not(.is-readonly):not(:focus-within) {
+  border-color: var(--success-text);
+}
+.fld.is-success .txa:focus-within {
+  box-shadow: var(--ring-success);
+}
+
+.fld--txa.fld--lg .txa {
+  --txa-pad-y: var(--space-4);
+  --txa-lh: var(--leading-body-lg);
+}
+.fld--txa.fld--lg .txa__input,
+.fld--txa.fld--lg .txa__mirror {
+  font: var(--type-body-lg);
+}

package/src/components/primitives/toggle/Toggle.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import './toggle.css';
+import {
+  useState,
+  type ChangeEvent,
+  type ChangeEventHandler,
+  type CSSProperties,
+  type InputHTMLAttributes,
+  type ReactNode,
+} from 'react';
+import { useControllable } from '../../internal/hooks/use-controllable';
+import type { DataAttributes } from '../../../dom-props';
+import { cx } from '../../internal/utils/cx';
+
+interface ToggleOwnProps {
+  /** 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?: ReactNode;
+  /** Optional secondary line under the label (settings rows). */
+  description?: ReactNode;
+  /** Fires on flip - read `e.target.checked`. */
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  /** Extra class(es) merged onto the root label. */
+  className?: string;
+  /** Inline styles merged onto the root label. */
+  style?: CSSProperties;
+}
+
+export interface ToggleProps extends ToggleOwnProps {
+  /** Standard <input> attributes (name, value, required, aria-*, ...) forwarded to the switch input. */
+  htmlProps?: Omit<InputHTMLAttributes<HTMLInputElement>, keyof ToggleOwnProps | 'type'> & DataAttributes;
+}
+
+export function Toggle({
+  checked,
+  defaultChecked = false,
+  disabled = false,
+  size = 'md',
+  label,
+  description,
+  className = '',
+  style,
+  onChange,
+  htmlProps,
+}: ToggleProps) {
+  const [isOn, setOn] = useControllable(checked, !!defaultChecked);
+
+  const cls = cx('sw', size === 'sm' && 'sw--sm', disabled && 'sw--disabled', className);
+
+  const [pressed, setPressed] = useState(false);
+  function press(on: boolean) {
+    return () => {
+      if (!disabled) setPressed(on);
+    };
+  }
+
+  function handleChange(e: ChangeEvent<HTMLInputElement>) {
+    setOn(e.target.checked);
+    if (onChange) onChange(e);
+  }
+
+  return (
+    <label
+      className={cls}
+      style={style}
+      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}
+        {...htmlProps}
+        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/primitives/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);
+  }
+}

package/src/css.d.ts

@@ -0,0 +1 @@
+declare module '*.css';

package/src/dom-props.ts

@@ -0,0 +1 @@
+export type DataAttributes = { [key: `data-${string}`]: string | number | boolean | undefined };

package/src/engine/animate.ts

@@ -0,0 +1,141 @@
+import { resolveTiming, type Timing } from './ease';
+
+export const clock = { scale: 1 };
+
+export interface Playback {
+  stop(): void;
+  finished: Promise<void>;
+}
+
+type Vec = [number, number];
+export type Size = number | 'auto';
+
+export interface Layer {
+  x?: number[];
+  y?: number[];
+  scale?: number[] | Vec[];
+  opacity?: number[];
+  width?: Size[];
+  height?: Size[];
+  timing?: Timing;
+  composite?: CompositeOperation;
+}
+
+const RESET: Record<string, string> = { translate: '0px 0px', scale: '1' };
+const AUTO_METRIC = { width: 'offsetWidth', height: 'offsetHeight' } as const;
+const SIZES = ['width', 'height'] as const;
+
+function measureAuto(el: HTMLElement, key: 'width' | 'height'): number {
+  const saved = el.style.getPropertyValue(key);
+  el.style.setProperty(key, 'auto');
+  const measured = el[AUTO_METRIC[key]];
+  if (saved) el.style.setProperty(key, saved);
+  else el.style.removeProperty(key);
+  return measured;
+}
+
+function held(list: number[], index: number): number {
+  return list[Math.min(index, list.length - 1)];
+}
+
+function currentValue(el: HTMLElement, key: string): string {
+  const raw = getComputedStyle(el).getPropertyValue(key).trim();
+  return raw && raw !== 'none' ? raw : RESET[key];
+}
+
+function compile(el: HTMLElement, layer: Layer) {
+  const frames: Record<string, string[]> = {};
+  const autoKeys: string[] = [];
+
+  if (layer.x?.length || layer.y?.length) {
+    const x = layer.x?.length ? layer.x : [0];
+    const y = layer.y?.length ? layer.y : [0];
+    const count = Math.max(x.length, y.length);
+    frames.translate = Array.from({ length: count }, (_, i) => `${held(x, i)}px ${held(y, i)}px`);
+  }
+  if (layer.scale) frames.scale = layer.scale.map((v) => (typeof v === 'number' ? String(v) : `${v[0]} ${v[1]}`));
+  if (layer.opacity) frames.opacity = layer.opacity.map(String);
+
+  for (const key of SIZES) {
+    const list = layer[key];
+    if (!list) continue;
+    if (list[list.length - 1] === 'auto') autoKeys.push(key);
+    const measured = list.includes('auto') ? measureAuto(el, key) : 0;
+    frames[key] = list.map((v) => `${v === 'auto' ? measured : v}px`);
+  }
+
+  for (const [key, list] of Object.entries(frames)) if (list.length === 1) list.unshift(currentValue(el, key));
+  return { frames, autoKeys };
+}
+
+const owned = new WeakMap<HTMLElement, Map<string, Animation>>();
+
+function claim(el: HTMLElement, keys: string[], animation: Animation | null): void {
+  const map = owned.get(el) ?? new Map<string, Animation>();
+  owned.set(el, map);
+  for (const key of keys) {
+    const previous = map.get(key);
+    if (previous && previous !== animation) previous.cancel();
+    if (animation) map.set(key, animation);
+    else map.delete(key);
+  }
+}
+
+function play(el: HTMLElement, layer: Layer): Playback | null {
+  const { frames, autoKeys } = compile(el, layer);
+  const keys = Object.keys(frames);
+  if (!keys.length) return null;
+
+  const timing = layer.timing;
+  const resolved = resolveTiming(timing);
+
+  if (resolved.duration <= 0) {
+    claim(el, keys, null);
+    if (timing?.fill !== 'none') for (const key of keys) el.style.setProperty(key, frames[key][frames[key].length - 1]);
+    return null;
+  }
+
+  const shaped: PropertyIndexedKeyframes = { ...frames };
+  if (timing?.times) shaped.offset = timing.times;
+  if (resolved.segments) shaped.easing = resolved.segments;
+
+  const animation = el.animate(shaped, {
+    duration: resolved.duration,
+    delay: resolved.delay,
+    easing: resolved.easing,
+    fill: timing?.fill ?? 'both',
+    composite: layer.composite,
+  });
+  animation.playbackRate = 1 / clock.scale;
+  if (layer.composite !== 'add') claim(el, keys, animation);
+
+  const finished = animation.finished.then(
+    (): void => {
+      if (!autoKeys.length) return;
+      animation.commitStyles();
+      animation.cancel();
+      for (const key of autoKeys) el.style.setProperty(key, 'auto');
+    },
+    (): void => {},
+  );
+
+  return { stop: () => animation.cancel(), finished };
+}
+
+const settled: Playback = { stop() {}, finished: Promise.resolve() };
+
+export function animate(el: HTMLElement, ...layers: Layer[]): Playback {
+  const plays: Playback[] = [];
+  for (const layer of layers) {
+    const started = play(el, layer);
+    if (started) plays.push(started);
+  }
+  if (!plays.length) return settled;
+  if (plays.length === 1) return plays[0];
+  return {
+    stop: () => {
+      for (const started of plays) started.stop();
+    },
+    finished: Promise.all(plays.map((started) => started.finished)).then((): void => {}),
+  };
+}

package/src/engine/drag.ts

@@ -0,0 +1,53 @@
+interface Axes {
+  x: number;
+  y: number;
+}
+
+export interface PanInfo {
+  offset: Axes;
+  velocity: Axes;
+}
+
+interface DragHandlers {
+  onMove?: (info: PanInfo) => void;
+  onEnd?: (info: PanInfo) => void;
+}
+
+export function startDrag(origin: { clientX: number; clientY: number }, handlers: DragHandlers): () => void {
+  const startX = origin.clientX;
+  const startY = origin.clientY;
+  let lastX = startX;
+  let lastY = startY;
+  let lastTime = performance.now();
+  let velocity: Axes = { x: 0, y: 0 };
+
+  const info = (): PanInfo => ({ offset: { x: lastX - startX, y: lastY - startY }, velocity });
+
+  const move = (event: PointerEvent) => {
+    const now = performance.now();
+    const elapsed = now - lastTime;
+    if (elapsed > 0) {
+      velocity = { x: ((event.clientX - lastX) / elapsed) * 1000, y: ((event.clientY - lastY) / elapsed) * 1000 };
+      lastTime = now;
+    }
+    lastX = event.clientX;
+    lastY = event.clientY;
+    handlers.onMove?.(info());
+  };
+
+  const detach = () => {
+    window.removeEventListener('pointermove', move);
+    window.removeEventListener('pointerup', end);
+    window.removeEventListener('pointercancel', end);
+  };
+
+  const end = () => {
+    detach();
+    handlers.onEnd?.(info());
+  };
+
+  window.addEventListener('pointermove', move);
+  window.addEventListener('pointerup', end);
+  window.addEventListener('pointercancel', end);
+  return detach;
+}