@zyncat/ui 0.8.0

package/src/components/primitives/checkbox/Checkbox.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import './checkbox.css';
+import type { ChangeEventHandler, CSSProperties, InputHTMLAttributes, ReactNode } from 'react';
+import { CheckGlyph } from './check-glyph';
+import type { DataAttributes } from '../../../dom-props';
+import { cx } from '../../internal/utils/cx';
+
+interface CheckboxOwnProps {
+  /** Controlled checked state. Omit for uncontrolled (use `defaultChecked`). */
+  checked?: boolean;
+  /** Uncontrolled initial state. */
+  defaultChecked?: boolean;
+  /** Indeterminate - the "some, not all" select-all state; visually wins over `checked`. @default false */
+  indeterminate?: boolean;
+  /** Single error state for consent gates ("you must agree"); also sets `aria-invalid`. @default false */
+  error?: boolean;
+  /** Disabled - inert and de-emphasized (distinct fill when checked). */
+  disabled?: boolean;
+  /** Box size: `md` 18px - `sm` 16px for dense table rows. @default 'md' */
+  size?: 'sm' | 'md';
+  /** Label text beside the box. */
+  label?: ReactNode;
+  /** Optional secondary line under the label (settings rows). */
+  description?: ReactNode;
+  /** Fires on toggle - 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 CheckboxProps extends CheckboxOwnProps {
+  /** Standard <input> attributes (name, value, required, aria-*, ...) forwarded to the checkbox input. */
+  htmlProps?: Omit<InputHTMLAttributes<HTMLInputElement>, keyof CheckboxOwnProps | 'type'> & DataAttributes;
+}
+
+export function Checkbox({
+  checked,
+  defaultChecked,
+  indeterminate = false,
+  error = false,
+  disabled = false,
+  size = 'md',
+  label,
+  description,
+  className = '',
+  style,
+  onChange,
+  htmlProps,
+}: CheckboxProps) {
+  const cls = cx('cbx', size === 'sm' && 'cbx--sm', error && 'cbx--error', disabled && 'cbx--disabled', className);
+
+  const controlled = checked !== undefined;
+  const checkedProps = controlled ? { checked } : { defaultChecked };
+
+  return (
+    <label className={cls} style={style}>
+      <CheckGlyph
+        indeterminate={indeterminate}
+        disabled={disabled}
+        aria-invalid={error || undefined}
+        onChange={onChange}
+        {...checkedProps}
+        {...htmlProps}
+      />
+      {label || description ? (
+        <span className="cbx__text">
+          {label ? <span className="cbx__label">{label}</span> : null}
+          {description ? <span className="cbx__desc">{description}</span> : null}
+        </span>
+      ) : null}
+    </label>
+  );
+}

package/src/components/primitives/checkbox/check-glyph.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import './checkbox.css';
+import { Fragment, useEffect, useRef, type InputHTMLAttributes } from 'react';
+
+export interface CheckGlyphProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+  indeterminate?: boolean;
+}
+
+export function CheckGlyph({ indeterminate = false, ...inputProps }: CheckGlyphProps) {
+  const ref = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (ref.current) ref.current.indeterminate = indeterminate;
+  }, [indeterminate, inputProps.checked]);
+
+  return (
+    <Fragment>
+      <input ref={ref} type="checkbox" className="cbx__input" {...inputProps} />
+      <span className="cbx__box" aria-hidden="true">
+        <svg className="cbx__mark" viewBox="0 0 16 16" fill="none">
+          <path className="cbx__tick" d="M3.5 8.5 L6.75 11.5 L12.5 4.75" />
+        </svg>
+        <span className="cbx__dash" />
+      </span>
+    </Fragment>
+  );
+}

package/src/components/primitives/checkbox/checkbox.css

@@ -0,0 +1,177 @@
+/* Checkbox - on/off + indeterminate; native input hidden, box painted from :has()-set flags read via calc(). */
+
+.cbx {
+  --cbx-fill: linear-gradient(180deg, var(--accent), var(--accent-hover));
+  --cbx-on: var(--accent);
+  --cbx-off: var(--border-strong);
+  --cbx-ring: var(--ring-accent);
+  --cbx-size: var(--control-box);
+  --cbx-radius: var(--radius-sm);
+  --tick-len: 14px; /* needs a unit so the calc() dashoffset is a valid <length>; ~ the polyline path length */
+  --fill: 0;
+  --tick: 0;
+  --dash: 0;
+  --press: 1;
+
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--space-2);
+  padding: var(--space-2);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--duration-base) var(--ease-standard);
+
+  /* later rule wins, so indeterminate beats checked */
+  &:has(:checked) {
+    --fill: 1;
+    --tick: 1;
+  }
+  &:has(:indeterminate) {
+    --fill: 1;
+    --tick: 0;
+    --dash: 1;
+  }
+
+  &:not(.cbx--disabled):hover {
+    background: var(--neutral-wash);
+  }
+  /* accent the empty box on hover */
+  &:not(.cbx--disabled):hover:not(:has(:checked, :indeterminate)) {
+    --cbx-off: var(--cbx-on);
+  }
+  &:not(.cbx--disabled):active {
+    --press: 0.88;
+  }
+  &:has(:focus-visible) .cbx__box {
+    box-shadow: var(--cbx-ring);
+  }
+}
+
+.cbx__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.cbx__box {
+  position: relative;
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: var(--cbx-size);
+  height: var(--cbx-size);
+  margin-top: calc((var(--leading-body) - var(--cbx-size)) / 2);
+  border: var(--border-hairline) solid color-mix(in oklab, var(--cbx-on) calc(var(--fill) * 100%), var(--cbx-off));
+  border-radius: var(--cbx-radius);
+  background: var(--bg-inset);
+  transform: scale(var(--press));
+  transition:
+    border-color var(--duration-fast) var(--ease-standard),
+    background-color var(--duration-fast) var(--ease-standard),
+    box-shadow var(--duration-fast) var(--ease-standard),
+    transform var(--duration-base) var(--ease-spring);
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+
+    /* inner corner = outer radius - border, so the fill reaches the corners (no --bg-inset showing) */
+    border-radius: calc(var(--cbx-radius) - var(--border-hairline));
+    background: var(--cbx-fill);
+    opacity: var(--fill);
+    transform: scale(calc(0.4 + 0.6 * var(--fill)));
+    transition:
+      transform var(--duration-base) var(--ease-spring),
+      opacity var(--duration-fast) var(--ease-standard);
+  }
+}
+
+/* stagger lives in the delay: draw-on waits a beat (calc - --tick), retract fires immediately */
+.cbx__mark {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  color: var(--text-on-accent);
+  pointer-events: none;
+}
+.cbx__tick {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-dasharray: var(--tick-len);
+  stroke-dashoffset: calc(var(--tick-len) * (1 - var(--tick)));
+  transition: stroke-dashoffset var(--duration-base) var(--ease-entrance) calc(var(--tick) * var(--duration-fast));
+}
+
+.cbx__dash {
+  position: absolute;
+  width: 56%;
+  height: 2px;
+  border-radius: var(--border-hairline);
+  background: var(--text-on-accent);
+  pointer-events: none;
+  opacity: var(--dash);
+  transform: scaleX(var(--dash));
+  transition:
+    transform var(--duration-base) var(--ease-spring),
+    opacity var(--duration-fast) var(--ease-standard);
+}
+
+.cbx__text {
+  display: grid;
+  gap: var(--space-1);
+}
+.cbx__label {
+  font: var(--type-label);
+  color: var(--text-strong);
+}
+.cbx__desc {
+  font: var(--type-caption);
+  color: var(--text-muted);
+}
+
+.cbx--sm {
+  --cbx-size: var(--space-4);
+  & .cbx__label {
+    font: var(--type-caption);
+    font-weight: var(--weight-medium);
+    color: var(--text-strong);
+  }
+  & .cbx__box {
+    margin-top: calc((var(--leading-caption) - var(--cbx-size)) / 2);
+  }
+}
+
+.cbx--error {
+  --cbx-fill: linear-gradient(180deg, var(--danger), var(--danger));
+  --cbx-on: var(--danger);
+  --cbx-off: var(--danger);
+  --cbx-ring: var(--ring-danger);
+}
+
+/* disabled leaves the state flags untouched, so the mark still matches checked state */
+.cbx--disabled {
+  cursor: not-allowed;
+  --cbx-fill: var(--border-strong);
+  --cbx-on: var(--border-default);
+  --cbx-off: var(--border-subtle);
+  & .cbx__box {
+    background: var(--bg-muted);
+  }
+  & .cbx__label,
+  & .cbx__desc {
+    color: var(--text-disabled);
+  }
+}

package/src/components/primitives/collapse/Collapse.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import './collapse.css';
+import type { CSSProperties, HTMLAttributes, JSX, ReactNode } from 'react';
+import type { DataAttributes } from '../../../dom-props';
+import type { DurationToken, EaseToken } from '../../../tokens/motion-scale';
+import {
+  timingVars,
+  type AnimationTiming,
+  type DirectionalToken,
+  type DisableableAnimation,
+  type TimingProps,
+} from '../../../motion/timing';
+import { cx } from '../../internal/utils/cx';
+
+/** Motion-scale duration tokens - the only values Collapse timing accepts. */
+export type CollapseDuration = DurationToken;
+/** Motion-scale ease tokens - the only values Collapse timing accepts. */
+export type CollapseEase = EaseToken;
+/** One token for both directions, or split per direction; an omitted direction keeps its default. */
+export type CollapseTiming<Token extends string> = DirectionalToken<Token>;
+/** Grouped `{ duration, ease }` timing for the size/fade transition. */
+export type CollapseAnimation = AnimationTiming;
+
+interface CollapseOwnProps extends TimingProps {
+  /** Open/closed state. Closed content is also removed from the tab order, the accessibility
+   *  tree and hit-testing once the exit transition completes; reopening restores it before
+   *  the entrance runs. */
+  open?: boolean;
+  /** Axis to animate. @default 'height' */
+  axis?: 'height' | 'width';
+  /** Also cross-fade contents while resizing; follows `duration` / `ease`. */
+  fade?: boolean;
+  /** Class applied to the inner measured wrapper - the clipping element (overflow: hidden).
+   *  Content whose focus ring sits flush to its edge needs padding there, or the ring clips. */
+  innerClassName?: string;
+  /** Size (and fade) transition timing - motion tokens only, each field one token or
+   *  `{ open, close }`, e.g. `{ duration: { close: 'fast' }, ease: { close: 'exit' } }`.
+   *  `null` disables the transition (open/close snap instantly).
+   *  @default duration 'slow' + ease 'entrance' (fade-out: 'base' + 'standard') */
+  animation?: DisableableAnimation;
+  /** Tag to render as. @default 'div' */
+  as?: keyof JSX.IntrinsicElements;
+  /** Extra class(es) merged onto the root. */
+  className?: string;
+  /** Inline styles merged onto the root (composed with the timing custom properties). */
+  style?: CSSProperties;
+  /** The collapsing content. */
+  children?: ReactNode;
+}
+
+export interface CollapseProps extends CollapseOwnProps {
+  /** Standard <div> attributes (aria-*, data-*, ...) forwarded to the root. */
+  htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, keyof CollapseOwnProps> & DataAttributes;
+}
+
+export function Collapse({
+  open = false,
+  axis = 'height',
+  fade = false,
+  animation,
+  className = '',
+  innerClassName = '',
+  style,
+  children,
+  as: As = 'div',
+  htmlProps,
+}: CollapseProps) {
+  const cls = cx('collapse', fade && 'collapse--fade', className);
+
+  const vars = timingVars('collapse', animation);
+
+  return (
+    <div
+      className={cls}
+      data-open={open ? 'true' : 'false'}
+      data-axis={axis}
+      style={vars || style ? ({ ...style, ...vars } as CSSProperties) : undefined}
+      {...htmlProps}
+    >
+      <As className={cx('collapse__inner', innerClassName)} style={vars}>
+        {children}
+      </As>
+    </div>
+  );
+}

package/src/components/primitives/collapse/collapse.css

@@ -0,0 +1,88 @@
+/* Collapse - animates open/closed via a grid track interpolating 0fr and 1fr (never `auto`).
+
+   Closed content leaves the page semantics, not just the paint: the root turns
+   visibility:hidden, dropping children out of the tab order, the accessibility tree and
+   hit-testing. The flip is directional by construction. Closing lists visibility with a
+   delay equal to the size duration, so removal lands only after the exit finishes and
+   nothing pops. Opening omits visibility from its transition list entirely, so content is
+   focusable the same frame it opens, before the entrance runs. The delay rides the duration
+   tokens, so the global reduced-motion collapse (~1ms) applies to it as well. The open state
+   deliberately declares no `visibility: visible` - it inherits instead, so a Collapse nested
+   inside a closed ancestor cannot poke a focusable hole through it. */
+
+/* Timing overrides - set inline by Collapse.tsx from the token-typed duration/ease props.
+   Registered non-inheriting so one Collapse's timing can never leak into a Collapse nested
+   inside it; where unset they resolve invalid and the var() fallbacks supply the defaults. */
+@property --collapse-dur-open {
+  syntax: '*';
+  inherits: false;
+}
+@property --collapse-dur-close {
+  syntax: '*';
+  inherits: false;
+}
+@property --collapse-ease-open {
+  syntax: '*';
+  inherits: false;
+}
+@property --collapse-ease-close {
+  syntax: '*';
+  inherits: false;
+}
+
+.collapse {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition:
+    grid-template-rows var(--collapse-dur-close, var(--duration-slow)) var(--collapse-ease-close, var(--ease-entrance)),
+    grid-template-columns var(--collapse-dur-close, var(--duration-slow))
+      var(--collapse-ease-close, var(--ease-entrance)),
+    visibility 0s linear var(--collapse-dur-close, var(--duration-slow));
+}
+.collapse[data-open='false'] {
+  visibility: hidden;
+}
+.collapse[data-open='true'] {
+  grid-template-rows: 1fr;
+  transition:
+    grid-template-rows var(--collapse-dur-open, var(--duration-slow)) var(--collapse-ease-open, var(--ease-entrance)),
+    grid-template-columns var(--collapse-dur-open, var(--duration-slow)) var(--collapse-ease-open, var(--ease-entrance));
+}
+
+.collapse[data-axis='width'] {
+  grid-template-rows: 1fr;
+  grid-template-columns: 0fr;
+}
+.collapse[data-axis='width'][data-open='true'] {
+  grid-template-columns: 1fr;
+}
+
+/* min-size:0 is what lets the grid track collapse to 0. */
+.collapse__inner {
+  overflow: hidden;
+  min-height: 0;
+  min-width: 0;
+}
+
+.collapse--fade .collapse__inner {
+  opacity: 0;
+  transition: opacity var(--collapse-dur-close, var(--duration-base)) var(--collapse-ease-close, var(--ease-standard));
+}
+.collapse--fade[data-open='true'] .collapse__inner {
+  opacity: 1;
+  /* fade in slightly after the size opens */
+  transition: opacity var(--collapse-dur-open, var(--duration-slow)) var(--collapse-ease-open, var(--ease-entrance))
+    60ms;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .collapse,
+  .collapse--fade .collapse__inner {
+    transition-duration: 1ms;
+  }
+  /* drop the fade-in stagger so content is visible immediately; the visibility delay needs
+     no override - it rides the duration tokens, which this media query collapses to 1ms */
+  .collapse--fade .collapse__inner {
+    transition-delay: 0ms;
+  }
+}

package/src/components/primitives/collapse/collapse.typecheck.tsx

@@ -0,0 +1,29 @@
+import { Collapse } from './Collapse';
+
+export const ok = (
+  <>
+    <Collapse open animation={{ duration: 'fast', ease: 'exit' }} />
+    <Collapse
+      open
+      animation={{ duration: { open: 'slower', close: 'fast' }, ease: { open: 'entrance', close: 'exit' } }}
+    />
+    <Collapse open animation={{ duration: { close: 'fast' } }} />
+    <Collapse open animation={null} />
+    <Collapse open className="x" htmlProps={{ 'aria-label': 'panel', 'data-open-state': 'yes', onClick: () => {} }} />
+  </>
+);
+
+export const bad = (
+  <>
+    {/* @ts-expect-error - raw CSS strings must not type-check */}
+    <Collapse open animation={{ duration: '200ms' }} />
+    {/* @ts-expect-error - numbers must not type-check */}
+    <Collapse open animation={{ duration: 200 }} />
+    {/* @ts-expect-error - free-string eases must not type-check */}
+    <Collapse open animation={{ ease: 'ease-in-out' }} />
+    {/* @ts-expect-error - unknown directions must not type-check */}
+    <Collapse open animation={{ duration: { enter: 'fast' } }} />
+    {/* @ts-expect-error - raw DOM attributes no longer live at the top level */}
+    <Collapse open onClick={() => {}} />
+  </>
+);

package/src/components/primitives/input/NumberField.tsx

@@ -0,0 +1,139 @@
+'use client';
+
+import './input.css';
+import { useState } from 'react';
+import type { CSSProperties, InputHTMLAttributes } from 'react';
+import { Icon } from '../../internal/icon/Icon';
+import { FieldLabel, FieldMessage, type FieldCoreMessagingProps, type FieldIdProps } from './field-chrome';
+import { useControllable } from '../../internal/hooks/use-controllable';
+import type { DataAttributes } from '../../../dom-props';
+import { cx } from '../../internal/utils/cx';
+
+interface NumberFieldOwnProps extends FieldIdProps, FieldCoreMessagingProps {
+  /** Unit suffix shown inside the field (e.g. "days", "%"). */
+  unit?: string;
+  /** Minimum value - steps and committed typing clamp up to this; the decrease stepper disables here. @default 0 */
+  min?: number;
+  /** Maximum value - steps and committed typing clamp down to this; the increase stepper disables here. @default Infinity */
+  max?: number;
+  /** Amount added/removed per ArrowUp/ArrowDown press and per caret stepper click. Decimals work. @default 1 */
+  step?: number;
+  /** Controlled numeric value. Omit for uncontrolled (use `defaultValue`). */
+  value?: number | string;
+  /** Uncontrolled initial value. Use instead of `value`. @default 0 */
+  defaultValue?: number;
+  /** Called with the next clamped number. */
+  onChange?: (value: number) => void;
+  /** Disabled - the input and both steppers go inert. */
+  disabled?: boolean;
+  /** Control height: sm - md (default) - lg. */
+  size?: 'sm' | 'md' | 'lg';
+  /** Extra class(es) merged onto the field root. */
+  className?: string;
+  /** Inline styles merged onto the field root. */
+  style?: CSSProperties;
+}
+
+export interface NumberFieldProps extends NumberFieldOwnProps {
+  /** Standard <input> attributes (name, aria-*, ...) forwarded to the input. */
+  htmlProps?: Omit<
+    InputHTMLAttributes<HTMLInputElement>,
+    keyof NumberFieldOwnProps | 'size' | 'value' | 'onChange' | 'min' | 'max' | 'step'
+  > &
+    DataAttributes;
+}
+
+export function NumberField({
+  id,
+  label,
+  helper,
+  error,
+  unit,
+  min = 0,
+  max = Infinity,
+  step = 1,
+  value,
+  defaultValue = 0,
+  onChange,
+  disabled,
+  size,
+  className = '',
+  style,
+  htmlProps,
+}: NumberFieldProps) {
+  const resolvedValue = value === undefined ? undefined : typeof value === 'number' ? value : parseFloat(value) || 0;
+  const [num, setNum] = useControllable<number>(resolvedValue, defaultValue, onChange);
+  const [draft, setDraft] = useState<string | null>(null);
+  const v = draft !== null ? parseFloat(draft) || 0 : num;
+  const snap = (n: number) => parseFloat(n.toFixed(10));
+  const clamp = (n: number) => Math.min(max, Math.max(min, snap(n)));
+  const commit = (n: number) => {
+    setDraft(null);
+    setNum(clamp(n));
+  };
+  const cls = cx(
+    'fld',
+    'numf',
+    unit && 'numf--unit',
+    size === 'sm' ? 'fld--sm' : size === 'lg' ? 'fld--lg' : '',
+    error && 'is-error',
+    className,
+  );
+
+  return (
+    <div className={cls} style={style}>
+      <FieldLabel id={id} label={label} />
+      <div className="fld__control">
+        <input
+          id={id}
+          className="fld__input"
+          type="text"
+          inputMode="decimal"
+          disabled={disabled}
+          aria-invalid={error ? true : undefined}
+          value={draft !== null ? draft : String(num)}
+          onChange={(e) => {
+            const text = e.target.value.replace(/[^\d.-]/g, '');
+            setDraft(text);
+            setNum(clamp(parseFloat(text) || 0));
+          }}
+          onBlur={() => commit(v)}
+          onKeyDown={(e) => {
+            if (e.key === 'ArrowUp') {
+              e.preventDefault();
+              commit(v + step);
+            }
+            if (e.key === 'ArrowDown') {
+              e.preventDefault();
+              commit(v - step);
+            }
+            if (e.key === 'Enter') commit(v);
+          }}
+          {...htmlProps}
+        />
+        {unit && <span className="numf__unit">{unit}</span>}
+        <div className="numf__steppers">
+          <button
+            type="button"
+            className="numf__step"
+            aria-label="Increase"
+            disabled={disabled || v >= max}
+            onClick={() => commit(v + step)}
+          >
+            <Icon name="caret-up" size="sm" />
+          </button>
+          <button
+            type="button"
+            className="numf__step"
+            aria-label="Decrease"
+            disabled={disabled || v <= min}
+            onClick={() => commit(v - step)}
+          >
+            <Icon name="caret-down" size="sm" />
+          </button>
+        </div>
+      </div>
+      <FieldMessage message={error || helper} icon={error ? 'warning-circle' : null} />
+    </div>
+  );
+}