agentic-ds-kit 0.1.0

package/ui/Slider/Slider.module.css

@@ -0,0 +1,105 @@
+.root {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+}
+
+.horizontal {
+  height: 1.25rem;
+  align-items: center;
+}
+
+.vertical {
+  width: 1.25rem;
+  height: 8rem;
+  justify-content: center;
+}
+
+.track {
+  position: relative;
+  flex: 1;
+  border-radius: var(--radius-pill);
+  background: var(--fill-subtle);
+  touch-action: none;
+}
+
+.horizontal .track {
+  height: var(--space-2);
+}
+
+.vertical .track {
+  width: var(--space-2);
+  height: 100%;
+}
+
+.fill {
+  position: absolute;
+  border-radius: inherit;
+  background: var(--fill-brand);
+}
+
+.horizontal .fill {
+  top: 0;
+  bottom: 0;
+}
+
+.vertical .fill {
+  left: 0;
+  right: 0;
+}
+
+.thumb {
+  position: absolute;
+  box-sizing: border-box;
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+  padding: 0;
+  border: var(--border-control) solid var(--border-faint);
+  border-radius: var(--radius-full);
+  background: var(--action-on-primary);
+  box-shadow: 0 0 0 1px var(--surface-card);
+  cursor: grab;
+  touch-action: none;
+  transition:
+    border-color var(--motion-interaction-duration) var(--motion-interaction-easing),
+    outline-color var(--motion-interaction-duration) var(--motion-interaction-easing);
+}
+
+.horizontal .thumb {
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.vertical .thumb {
+  left: 50%;
+  transform: translate(-50%, 50%);
+}
+
+.thumb:hover:not(:disabled) {
+  border-color: var(--border-strong);
+}
+
+.thumb:focus-visible {
+  outline: var(--border-focus-width) solid var(--focus-ring);
+  outline-offset: var(--space-inset-2xs);
+}
+
+.thumb:active {
+  cursor: grabbing;
+}
+
+.disabled {
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+}
+
+.disabled .thumb {
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .thumb {
+    transition: none;
+  }
+}

package/ui/Slider/Slider.tsx

@@ -0,0 +1,187 @@
+"use client";
+
+import { useCallback, useRef, type KeyboardEvent, type PointerEvent } from "react";
+import type { SliderProps } from "./Slider.types";
+import styles from "./Slider.module.css";
+
+export type { SliderProps, SliderOrientation } from "./Slider.types";
+
+function clampValue(value: number, min: number, max: number, step: number): number {
+  if (!Number.isFinite(value)) return min;
+  const span = max - min;
+  if (span <= 0) return min;
+  const steps = Math.round((value - min) / step);
+  const snapped = min + steps * step;
+  return Math.min(max, Math.max(min, snapped));
+}
+
+function toPercent(value: number, min: number, max: number): number {
+  if (max <= min) return 0;
+  return ((value - min) / (max - min)) * 100;
+}
+
+function nearestThumbIndex(values: number[], target: number): number {
+  if (values.length <= 1) return 0;
+  let best = 0;
+  let bestDist = Math.abs(values[0] - target);
+  for (let i = 1; i < values.length; i += 1) {
+    const dist = Math.abs(values[i] - target);
+    if (dist < bestDist) {
+      best = i;
+      bestDist = dist;
+    }
+  }
+  return best;
+}
+
+export function Slider({
+  value,
+  min = 0,
+  max = 100,
+  step = 1,
+  orientation = "horizontal",
+  disabled = false,
+  onValueChange,
+}: SliderProps) {
+  const trackRef = useRef<HTMLDivElement>(null);
+  const values = Array.isArray(value) ? value : [value];
+  const isVertical = orientation === "vertical";
+  const isRange = Array.isArray(value);
+
+  const commit = useCallback(
+    (index: number, next: number) => {
+      if (disabled || !onValueChange) return;
+      const clamped = clampValue(next, min, max, step);
+      if (isRange) {
+        const copy = [...(value as number[])];
+        copy[index] = clamped;
+        if (copy.length === 2) {
+          if (index === 0 && copy[0] > copy[1]) copy[0] = copy[1];
+          if (index === 1 && copy[1] < copy[0]) copy[1] = copy[0];
+        }
+        onValueChange(copy);
+      } else {
+        onValueChange(clamped);
+      }
+    },
+    [disabled, isRange, max, min, onValueChange, step, value],
+  );
+
+  const pointerToValue = useCallback(
+    (clientX: number, clientY: number) => {
+      const track = trackRef.current;
+      if (!track) return min;
+      const rect = track.getBoundingClientRect();
+      const ratio = isVertical
+        ? 1 - (clientY - rect.top) / rect.height
+        : (clientX - rect.left) / rect.width;
+      const raw = min + Math.min(1, Math.max(0, ratio)) * (max - min);
+      return clampValue(raw, min, max, step);
+    },
+    [isVertical, min, max, step],
+  );
+
+  const onTrackPointerDown = (event: PointerEvent<HTMLDivElement>) => {
+    if (disabled) return;
+    const target = pointerToValue(event.clientX, event.clientY);
+    const index = nearestThumbIndex(values, target);
+    commit(index, target);
+    event.currentTarget.setPointerCapture(event.pointerId);
+  };
+
+  const onTrackPointerMove = (event: PointerEvent<HTMLDivElement>) => {
+    if (!event.currentTarget.hasPointerCapture(event.pointerId) || disabled) return;
+    const target = pointerToValue(event.clientX, event.clientY);
+    const index = nearestThumbIndex(values, target);
+    commit(index, target);
+  };
+
+  const onThumbKeyDown = (index: number, event: KeyboardEvent<HTMLSpanElement>) => {
+    if (disabled) return;
+    const current = values[index];
+    let next = current;
+    const big = step * 10;
+
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        next = current + step;
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        next = current - step;
+        break;
+      case "PageUp":
+        next = current + big;
+        break;
+      case "PageDown":
+        next = current - big;
+        break;
+      case "Home":
+        next = min;
+        break;
+      case "End":
+        next = max;
+        break;
+      default:
+        return;
+    }
+
+    event.preventDefault();
+    commit(index, next);
+  };
+
+  const sorted = [...values].sort((a, b) => a - b);
+  const fillStart = toPercent(sorted[0], min, max);
+  const fillEnd = toPercent(sorted[sorted.length - 1], min, max);
+
+  const fillStyle = isVertical
+    ? { bottom: `${fillStart}%`, height: `${fillEnd - fillStart}%` }
+    : { left: `${fillStart}%`, width: `${fillEnd - fillStart}%` };
+
+  return (
+    <div
+      className={`${styles.root} ${styles[orientation]}${disabled ? ` ${styles.disabled}` : ""}`}
+    >
+      <div
+        ref={trackRef}
+        className={styles.track}
+        onPointerDown={onTrackPointerDown}
+        onPointerMove={onTrackPointerMove}
+      >
+        <div className={styles.fill} style={fillStyle} aria-hidden />
+        {values.map((thumbValue, index) => {
+          const percent = toPercent(thumbValue, min, max);
+          const thumbStyle = isVertical
+            ? { bottom: `${percent}%` }
+            : { left: `${percent}%` };
+
+          return (
+            <span
+              key={index}
+              role="slider"
+              className={styles.thumb}
+              tabIndex={disabled ? -1 : 0}
+              aria-valuemin={min}
+              aria-valuemax={max}
+              aria-valuenow={thumbValue}
+              aria-orientation={orientation}
+              aria-disabled={disabled || undefined}
+              style={thumbStyle}
+              onKeyDown={(event) => onThumbKeyDown(index, event)}
+              onPointerDown={(event) => {
+                event.stopPropagation();
+                if (disabled) return;
+                event.currentTarget.setPointerCapture(event.pointerId);
+              }}
+              onPointerMove={(event) => {
+                if (!event.currentTarget.hasPointerCapture(event.pointerId) || disabled) return;
+                commit(index, pointerToValue(event.clientX, event.clientY));
+              }}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/ui/Slider/Slider.types.ts

@@ -0,0 +1,11 @@
+export type SliderOrientation = "horizontal" | "vertical";
+
+export interface SliderProps {
+  value: number | number[];
+  min?: number;
+  max?: number;
+  step?: number;
+  orientation?: SliderOrientation;
+  disabled?: boolean;
+  onValueChange?: (value: number | number[]) => void;
+}

package/ui/Slider/index.ts

@@ -0,0 +1,2 @@
+export { Slider } from "./Slider";
+export type { SliderProps, SliderOrientation } from "./Slider.types";

package/ui/Spinner/Spinner.module.css

@@ -0,0 +1,58 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-family: var(--font-sans);
+  color: var(--icon-secondary);
+}
+
+.icon {
+  display: block;
+  flex-shrink: 0;
+  animation: spinner-spin calc(var(--motion-duration-600) * 4) var(--motion-ease-linear) infinite;
+}
+
+.sm .icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.md .icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.lg .icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.label {
+  font-size: var(--type-size-body-sm);
+  line-height: var(--type-line-body);
+  color: var(--text-secondary);
+}
+
+.sm .label {
+  font-size: var(--type-size-caption);
+}
+
+.lg .label {
+  font-size: var(--type-size-label);
+}
+
+@keyframes spinner-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .icon {
+    animation: none;
+  }
+}

package/ui/Spinner/Spinner.tsx

@@ -0,0 +1,19 @@
+import { Loader } from "lucide-react";
+import type { SpinnerProps } from "./Spinner.types";
+import styles from "./Spinner.module.css";
+
+export type { SpinnerProps, SpinnerSize } from "./Spinner.types";
+
+export function Spinner({ size = "md", label }: SpinnerProps) {
+  return (
+    <span
+      className={`${styles.root} ${styles[size]}`}
+      role="status"
+      aria-live="polite"
+      aria-label={label ? undefined : "Loading"}
+    >
+      <Loader className={styles.icon} strokeWidth={2} aria-hidden />
+      {label ? <span className={styles.label}>{label}</span> : null}
+    </span>
+  );
+}

package/ui/Spinner/Spinner.types.ts

@@ -0,0 +1,6 @@
+export type SpinnerSize = "sm" | "md" | "lg";
+
+export interface SpinnerProps {
+  size?: SpinnerSize;
+  label?: string;
+}

package/ui/Spinner/index.ts

@@ -0,0 +1,2 @@
+export { Spinner } from "./Spinner";
+export type { SpinnerProps, SpinnerSize } from "./Spinner.types";

package/ui/Switch/Switch.module.css

@@ -0,0 +1,189 @@
+.switch {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  font-family: var(--font-sans);
+  color: var(--text-primary);
+}
+
+.labeled {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  gap: var(--space-inline-md);
+}
+
+.label {
+  font-weight: var(--type-weight-label);
+  line-height: var(--type-line-body);
+  cursor: pointer;
+}
+
+.switch[data-disabled] {
+  cursor: not-allowed;
+}
+
+.switch[data-disabled] .label {
+  color: var(--text-disabled);
+  cursor: not-allowed;
+}
+
+.sm {
+  font-size: var(--type-size-caption);
+}
+
+.md {
+  font-size: var(--type-size-label);
+}
+
+.lg {
+  font-size: var(--type-size-body-sm);
+}
+
+.control {
+  appearance: none;
+  -webkit-appearance: none;
+  position: relative;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0;
+  width: 2.5rem;
+  height: 1.4rem;
+  border: var(--border-control) solid var(--border-faint);
+  border-radius: var(--radius-pill);
+  background: var(--action-secondary);
+  cursor: pointer;
+  --switch-thumb-inset: 0.12rem;
+  --switch-thumb-size: 1rem;
+  --switch-thumb-stretch: 1.18rem;
+  --switch-thumb-squash: 0.92rem;
+}
+
+.sm .control {
+  width: 2rem;
+  height: 1.15rem;
+  --switch-thumb-inset: 0.1rem;
+  --switch-thumb-size: 0.85rem;
+  --switch-thumb-stretch: 0.98rem;
+  --switch-thumb-squash: 0.78rem;
+}
+
+.lg .control {
+  width: 3rem;
+  height: 1.65rem;
+  --switch-thumb-inset: 0.14rem;
+  --switch-thumb-size: 1.2rem;
+  --switch-thumb-stretch: 1.38rem;
+  --switch-thumb-squash: 1.1rem;
+}
+
+.control[aria-checked="true"] {
+  background: var(--action-primary);
+  border-color: var(--action-primary);
+}
+
+.control:hover:not(:disabled) {
+  border-color: var(--border-strong);
+}
+
+.control[aria-checked="true"]:hover:not(:disabled) {
+  background: var(--action-primary-hover);
+  border-color: var(--action-primary-hover);
+}
+
+.control:focus-visible {
+  outline: var(--border-focus-width) solid var(--focus-ring);
+  outline-offset: var(--space-inset-2xs);
+}
+
+.control:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+}
+
+.thumb {
+  position: absolute;
+  top: 50%;
+  left: var(--switch-thumb-inset);
+  width: var(--switch-thumb-size);
+  height: var(--switch-thumb-size);
+  border-radius: var(--radius-pill);
+  background: var(--action-on-primary);
+  transform: translateY(-50%);
+  pointer-events: none;
+  transition:
+    left var(--motion-modal-duration) var(--motion-ease-spring),
+    width var(--motion-modal-duration) var(--motion-ease-spring);
+}
+
+.control[aria-checked="true"] .thumb {
+  left: calc(100% - var(--switch-thumb-size) - var(--switch-thumb-inset));
+}
+
+@keyframes switch-thumb-on {
+  0% {
+    left: var(--switch-thumb-inset);
+    width: var(--switch-thumb-size);
+    height: var(--switch-thumb-size);
+  }
+  30% {
+    left: var(--switch-thumb-inset);
+    width: var(--switch-thumb-stretch);
+    height: var(--switch-thumb-squash);
+  }
+  70% {
+    left: calc(100% - var(--switch-thumb-stretch) - var(--switch-thumb-inset));
+    width: var(--switch-thumb-stretch);
+    height: var(--switch-thumb-squash);
+  }
+  100% {
+    left: calc(100% - var(--switch-thumb-size) - var(--switch-thumb-inset));
+    width: var(--switch-thumb-size);
+    height: var(--switch-thumb-size);
+  }
+}
+
+@keyframes switch-thumb-off {
+  0% {
+    left: calc(100% - var(--switch-thumb-size) - var(--switch-thumb-inset));
+    width: var(--switch-thumb-size);
+    height: var(--switch-thumb-size);
+  }
+  30% {
+    left: calc(100% - var(--switch-thumb-stretch) - var(--switch-thumb-inset));
+    width: var(--switch-thumb-stretch);
+    height: var(--switch-thumb-squash);
+  }
+  70% {
+    left: var(--switch-thumb-inset);
+    width: var(--switch-thumb-stretch);
+    height: var(--switch-thumb-squash);
+  }
+  100% {
+    left: var(--switch-thumb-inset);
+    width: var(--switch-thumb-size);
+    height: var(--switch-thumb-size);
+  }
+}
+
+.control[data-jelly][aria-checked="true"] .thumb {
+  animation: switch-thumb-on var(--motion-modal-duration) var(--motion-ease-spring) both;
+  transition: none;
+}
+
+.control[data-jelly][aria-checked="false"] .thumb {
+  animation: switch-thumb-off var(--motion-modal-duration) var(--motion-ease-spring) both;
+  transition: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .thumb {
+    transition: none;
+  }
+
+  .control[data-jelly][aria-checked="true"] .thumb,
+  .control[data-jelly][aria-checked="false"] .thumb {
+    animation: none;
+  }
+}

package/ui/Switch/Switch.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useId, useState } from "react";
+import type { SwitchProps } from "./Switch.types";
+import styles from "./Switch.module.css";
+
+export type { SwitchProps, SwitchSize } from "./Switch.types";
+
+export function Switch({
+  id,
+  label,
+  ariaLabel,
+  size = "md",
+  disabled = false,
+  checked,
+  defaultChecked = false,
+  onChange,
+}: SwitchProps) {
+  const generatedId = useId();
+  const switchId = id ?? generatedId;
+  const isControlled = typeof checked === "boolean";
+  const [uncontrolled, setUncontrolled] = useState(defaultChecked);
+  const isChecked = isControlled ? checked : uncontrolled;
+  const [jelly, setJelly] = useState(false);
+
+  function toggle() {
+    if (disabled) return;
+    const next = !isChecked;
+    if (!isControlled) setUncontrolled(next);
+    onChange?.(next);
+    if (jelly) {
+      setJelly(false);
+      requestAnimationFrame(() => setJelly(true));
+      return;
+    }
+    setJelly(true);
+  }
+
+  return (
+    <div
+      className={`${styles.switch} ${styles[size]}${label ? ` ${styles.labeled}` : ""}`}
+      data-disabled={disabled || undefined}
+    >
+      {label ? (
+        <label className={styles.label} htmlFor={switchId}>
+          {label}
+        </label>
+      ) : null}
+      <button
+        type="button"
+        role="switch"
+        id={switchId}
+        className={styles.control}
+        aria-checked={isChecked}
+        aria-label={label ? undefined : ariaLabel}
+        disabled={disabled}
+        data-jelly={jelly || undefined}
+        onClick={toggle}
+        onAnimationEnd={() => setJelly(false)}
+      >
+        <span className={styles.thumb} aria-hidden />
+      </button>
+    </div>
+  );
+}

package/ui/Switch/Switch.types.ts

@@ -0,0 +1,12 @@
+export type SwitchSize = "sm" | "md" | "lg";
+
+export interface SwitchProps {
+  id?: string;
+  label?: string;
+  ariaLabel?: string;
+  size?: SwitchSize;
+  disabled?: boolean;
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onChange?: (checked: boolean) => void;
+}

package/ui/Switch/index.ts

@@ -0,0 +1,2 @@
+export { Switch } from "./Switch";
+export type { SwitchProps, SwitchSize } from "./Switch.types";