agentic-ds-kit 0.1.0

package/ui/Textarea/Textarea.tsx

@@ -0,0 +1,38 @@
+import type { TextareaProps } from "./Textarea.types";
+import styles from "./Textarea.module.css";
+
+export type { TextareaProps, TextareaSize } from "./Textarea.types";
+
+const SIZE_CLASS = {
+  sm: styles.sm,
+  md: styles.md,
+  lg: styles.lg,
+} as const;
+
+export function Textarea({
+  id,
+  size = "md",
+  rows,
+  placeholder,
+  disabled = false,
+  error = false,
+  defaultValue,
+  name,
+  demo,
+  describedBy,
+}: TextareaProps) {
+  return (
+    <textarea
+      id={id}
+      name={name}
+      rows={rows}
+      placeholder={placeholder}
+      disabled={disabled}
+      defaultValue={defaultValue}
+      aria-invalid={error || undefined}
+      aria-describedby={describedBy}
+      data-demo={disabled ? undefined : demo}
+      className={`${styles.textarea} ${SIZE_CLASS[size]}${error ? ` ${styles.error}` : ""}`}
+    />
+  );
+}

package/ui/Textarea/Textarea.types.ts

@@ -0,0 +1,14 @@
+export type TextareaSize = "sm" | "md" | "lg";
+
+export interface TextareaProps {
+  id: string;
+  size?: TextareaSize;
+  rows?: number;
+  placeholder?: string;
+  disabled?: boolean;
+  error?: boolean;
+  defaultValue?: string;
+  name?: string;
+  demo?: "hover" | "focus";
+  describedBy?: string;
+}

package/ui/Textarea/index.ts

@@ -0,0 +1,2 @@
+export { Textarea } from "./Textarea";
+export type { TextareaProps, TextareaSize } from "./Textarea.types";

package/ui/ThinkingAnimation/ThinkingAnimation.module.css

@@ -0,0 +1,75 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--text-secondary);
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body-sm);
+}
+
+.dots {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+.dot {
+  inline-size: var(--space-2);
+  block-size: var(--space-2);
+  border-radius: var(--radius-full);
+  background: var(--text-muted);
+  animation: thinking-dot 1.2s var(--motion-ease-in-out) infinite;
+}
+
+.dot:nth-child(2) {
+  animation-delay: 0.15s;
+}
+
+.dot:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+.sm {
+  gap: var(--space-1);
+  font-size: var(--type-size-caption);
+}
+
+.sm .dot {
+  inline-size: 0.3rem;
+  block-size: 0.3rem;
+}
+
+.lg {
+  gap: var(--space-3);
+  font-size: var(--type-size-body);
+}
+
+.lg .dot {
+  inline-size: var(--space-3);
+  block-size: var(--space-3);
+}
+
+.label {
+  color: var(--text-secondary);
+}
+
+@keyframes thinking-dot {
+  0%,
+  80%,
+  100% {
+    opacity: 0.35;
+    transform: translateY(0);
+  }
+
+  40% {
+    opacity: 1;
+    transform: translateY(-0.15rem);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dot {
+    animation: none;
+    opacity: 1;
+  }
+}

package/ui/ThinkingAnimation/ThinkingAnimation.tsx

@@ -0,0 +1,31 @@
+import type { ThinkingAnimationProps } from "./ThinkingAnimation.types";
+import styles from "./ThinkingAnimation.module.css";
+
+export type { ThinkingAnimationProps, ThinkingAnimationSize } from "./ThinkingAnimation.types";
+
+export function ThinkingAnimation({
+  label = "Thinking",
+  size = "md",
+  showLabel = true,
+  className = "",
+}: ThinkingAnimationProps) {
+  return (
+    <span
+      className={`${styles.root} ${styles[size]} ${className}`.trim()}
+      role="status"
+      aria-label={label}
+      aria-live="polite"
+    >
+      <span className={styles.dots} aria-hidden="true">
+        <span className={styles.dot} />
+        <span className={styles.dot} />
+        <span className={styles.dot} />
+      </span>
+      {showLabel ? (
+        <span className={styles.label} aria-hidden="true">
+          {label}
+        </span>
+      ) : null}
+    </span>
+  );
+}

package/ui/ThinkingAnimation/ThinkingAnimation.types.ts

@@ -0,0 +1,8 @@
+export type ThinkingAnimationSize = "sm" | "md" | "lg";
+
+export interface ThinkingAnimationProps {
+  label?: string;
+  size?: ThinkingAnimationSize;
+  showLabel?: boolean;
+  className?: string;
+}

package/ui/ThinkingAnimation/index.ts

@@ -0,0 +1,2 @@
+export { ThinkingAnimation } from "./ThinkingAnimation";
+export type { ThinkingAnimationProps, ThinkingAnimationSize } from "./ThinkingAnimation.types";

package/ui/Timeline/Timeline.module.css

@@ -0,0 +1,99 @@
+.timeline {
+  display: grid;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.step {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  column-gap: var(--space-4);
+  align-items: stretch;
+}
+
+.rail {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: var(--space-4);
+}
+
+.dot {
+  flex: none;
+  width: var(--space-3);
+  height: var(--space-3);
+  border: var(--border-width-thin) solid var(--border-strong);
+  border-radius: var(--radius-full);
+  background: transparent;
+}
+
+.line {
+  flex: 1;
+  width: var(--border-width-thin);
+  min-height: var(--space-6);
+  margin-block: var(--space-1);
+  background: var(--border-faint);
+}
+
+.now .dot {
+  border-color: var(--text-primary);
+  background: var(--text-primary);
+}
+
+.now .line {
+  background: var(--text-primary);
+}
+
+.next .dot {
+  border-color: var(--border-strong);
+  background: transparent;
+}
+
+.later .dot {
+  border-color: var(--border-faint);
+  background: transparent;
+}
+
+.later .line {
+  background: var(--border-subtle);
+}
+
+.copy {
+  display: grid;
+  gap: var(--space-1);
+  padding-block-end: var(--space-6);
+}
+
+.step:last-child .copy {
+  padding-block-end: 0;
+}
+
+.phase {
+  margin: 0;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-caption);
+  color: var(--text-muted);
+}
+
+.now .phase {
+  color: var(--text-primary);
+}
+
+.title {
+  margin: 0;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-label);
+  font-weight: var(--type-weight-heading);
+  line-height: var(--type-line-heading);
+  color: var(--text-primary);
+}
+
+.body {
+  margin: 0;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body-sm);
+  line-height: var(--type-line-body);
+  color: var(--text-secondary);
+}

package/ui/Timeline/Timeline.tsx

@@ -0,0 +1,47 @@
+import type { TimelineProps } from "./Timeline.types";
+import styles from "./Timeline.module.css";
+
+export type { TimelineItem, TimelineProps, TimelineStatus } from "./Timeline.types";
+
+const STATUSES = ["now", "next", "later"] as const;
+
+function headingTag(level: 2 | 3 | 4): "h2" | "h3" | "h4" {
+  if (level === 2) return "h2";
+  if (level === 4) return "h4";
+  return "h3";
+}
+
+export function Timeline({
+  items = [],
+  label,
+  headingLevel = 3,
+  className = "",
+}: TimelineProps) {
+  if (!items.length) return null;
+
+  const TitleTag = headingTag(headingLevel);
+
+  return (
+    <ol className={`${styles.timeline} ${className}`.trim()} aria-label={label}>
+      {items.map((item, index) => {
+        const status = STATUSES.includes(item.status ?? "next")
+          ? (item.status ?? "next")
+          : "next";
+
+        return (
+          <li key={item.id ?? item.title ?? index} className={`${styles.step} ${styles[status]}`}>
+            <span className={styles.rail} aria-hidden="true">
+              <span className={styles.dot} />
+              {index < items.length - 1 ? <span className={styles.line} /> : null}
+            </span>
+            <div className={styles.copy}>
+              {item.phase ? <p className={styles.phase}>{item.phase}</p> : null}
+              {item.title ? <TitleTag className={styles.title}>{item.title}</TitleTag> : null}
+              {item.body ? <p className={styles.body}>{item.body}</p> : null}
+            </div>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}

package/ui/Timeline/Timeline.types.ts

@@ -0,0 +1,16 @@
+export type TimelineStatus = "now" | "next" | "later";
+
+export interface TimelineItem {
+  id?: string;
+  title?: string;
+  body?: string;
+  phase?: string;
+  status?: TimelineStatus;
+}
+
+export interface TimelineProps {
+  items?: TimelineItem[];
+  label?: string;
+  headingLevel?: 2 | 3 | 4;
+  className?: string;
+}

package/ui/Timeline/index.ts

@@ -0,0 +1,2 @@
+export { Timeline } from "./Timeline";
+export type { TimelineItem, TimelineProps, TimelineStatus } from "./Timeline.types";

package/ui/Toast/Toast.module.css

@@ -0,0 +1,133 @@
+.toast {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-1);
+  width: min(100%, 19.5rem);
+  margin: 0;
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-control-sm);
+  background: var(--surface-card);
+  box-shadow: var(--shadow-raised-depth);
+  color: var(--text-primary);
+  outline: none;
+  animation: toast-in var(--motion-overlay-duration) var(--motion-ease-spring-soft) both;
+}
+
+.sm {
+  padding: var(--space-2) var(--space-3);
+}
+
+.md {
+  padding: var(--space-3) var(--space-4);
+}
+
+.lg {
+  padding: var(--space-4) var(--space-5);
+}
+
+.header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-4);
+  width: 100%;
+}
+
+.lead {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-1);
+  flex: 1;
+  min-width: 0;
+}
+
+.icon {
+  display: grid;
+  flex-shrink: 0;
+  color: var(--icon-primary);
+}
+
+.info .icon {
+  color: var(--icon-info);
+}
+
+.success .icon {
+  color: var(--icon-success);
+}
+
+.warning .icon {
+  color: var(--icon-warning);
+}
+
+.danger .icon {
+  color: var(--icon-danger);
+}
+
+.title {
+  margin: 0;
+  min-width: 0;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-label);
+  font-weight: var(--type-weight-label);
+  line-height: var(--type-line-heading);
+  color: var(--text-primary);
+}
+
+.description {
+  margin: 0;
+  width: 100%;
+  padding-left: var(--space-1);
+  font-family: var(--font-sans);
+  font-size: var(--type-size-caption);
+  font-weight: var(--type-weight-body);
+  line-height: var(--type-line-body);
+  color: var(--text-secondary);
+}
+
+.action {
+  width: 100%;
+  padding-left: var(--space-1);
+}
+
+.close {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: var(--space-5);
+  height: var(--space-5);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-control-sm);
+  background: transparent;
+  color: var(--icon-secondary);
+  cursor: pointer;
+}
+
+.close:hover {
+  color: var(--icon-primary);
+}
+
+.close:focus-visible {
+  outline: var(--border-focus-width) solid var(--focus-ring);
+  outline-offset: var(--space-inset-2xs);
+}
+
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(0.5rem) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .toast {
+    animation: none;
+  }
+}

package/ui/Toast/Toast.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { CircleAlert, CircleCheck, Info, Minus, TriangleAlert, X } from "lucide-react";
+import { useEffect, useId, useRef } from "react";
+import type { ToastProps, ToastStatus } from "./Toast.types";
+import styles from "./Toast.module.css";
+
+export type { ToastProps, ToastSize, ToastStatus } from "./Toast.types";
+
+const ICONS: Record<ToastStatus, typeof Info> = {
+  info: Info,
+  success: CircleCheck,
+  warning: TriangleAlert,
+  danger: CircleAlert,
+  default: Minus,
+};
+
+export function Toast({
+  open = true,
+  onOpenChange,
+  title,
+  description,
+  status = "default",
+  size = "md",
+  duration = null,
+  onClose,
+  action,
+  className = "",
+}: ToastProps) {
+  const titleId = useId();
+  const descriptionId = useId();
+  const timerRef = useRef<number | null>(null);
+  const Icon = ICONS[status];
+
+  function handleClose() {
+    onClose?.();
+    onOpenChange?.(false);
+  }
+
+  useEffect(() => {
+    if (!open || duration == null || duration <= 0) return undefined;
+
+    timerRef.current = window.setTimeout(() => {
+      onClose?.();
+      onOpenChange?.(false);
+    }, duration);
+
+    return () => {
+      if (timerRef.current != null) window.clearTimeout(timerRef.current);
+    };
+  }, [open, duration, onClose, onOpenChange]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      className={[styles.toast, styles[status], styles[size], className].filter(Boolean).join(" ")}
+      role="status"
+      aria-live="polite"
+      aria-atomic="true"
+      aria-labelledby={title ? titleId : undefined}
+      aria-describedby={description ? descriptionId : undefined}
+    >
+      <div className={styles.header}>
+        <div className={styles.lead}>
+          <span className={styles.icon}>
+            <Icon aria-hidden="true" size={20} strokeWidth={2} />
+          </span>
+          {title ? (
+            <p id={titleId} className={styles.title}>
+              {title}
+            </p>
+          ) : null}
+        </div>
+        {onClose || onOpenChange ? (
+          <button type="button" className={styles.close} aria-label="Dismiss" onClick={handleClose}>
+            <X aria-hidden="true" size={20} strokeWidth={2} />
+          </button>
+        ) : null}
+      </div>
+      {description ? (
+        <p id={descriptionId} className={styles.description}>
+          {description}
+        </p>
+      ) : null}
+      {action ? <div className={styles.action}>{action}</div> : null}
+    </div>
+  );
+}

package/ui/Toast/Toast.types.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+
+export type ToastStatus = "default" | "success" | "warning" | "danger" | "info";
+export type ToastSize = "sm" | "md" | "lg";
+
+export interface ToastProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title?: string;
+  description?: string;
+  status?: ToastStatus;
+  size?: ToastSize;
+  duration?: number | null;
+  onClose?: () => void;
+  action?: ReactNode;
+  className?: string;
+}

package/ui/Toast/index.ts

@@ -0,0 +1,2 @@
+export { Toast } from "./Toast";
+export type { ToastProps, ToastSize, ToastStatus } from "./Toast.types";

package/ui/Tooltip/Tooltip.module.css

@@ -0,0 +1,111 @@
+.wrapper {
+  position: relative;
+  display: inline-flex;
+}
+
+.bubble {
+  --tooltip-offset: calc(100% + 0.5rem);
+  position: absolute;
+  z-index: var(--z-tooltip);
+  width: max-content;
+  max-width: 16rem;
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-control-md);
+  background: var(--surface-inverse);
+  box-shadow: var(--shadow-md);
+  color: var(--text-inverse);
+  font-family: var(--font-sans);
+  font-size: var(--type-size-caption);
+  font-weight: var(--type-weight-label);
+  line-height: var(--type-line-body);
+  text-align: center;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity var(--motion-overlay-exit-duration) var(--motion-overlay-exit-easing),
+    transform var(--motion-overlay-exit-duration) var(--motion-overlay-exit-easing),
+    visibility 0s linear var(--motion-overlay-exit-duration);
+}
+
+.open {
+  opacity: 1;
+  visibility: visible;
+  transition:
+    opacity var(--motion-overlay-duration) var(--motion-overlay-easing),
+    transform var(--motion-overlay-duration) var(--motion-overlay-easing);
+}
+
+.arrow {
+  position: absolute;
+  width: 0.5rem;
+  height: 0.5rem;
+  background: var(--surface-inverse);
+  transform: rotate(45deg);
+}
+
+.top {
+  bottom: var(--tooltip-offset);
+  left: 50%;
+  transform: translate(-50%, 0.25rem) scale(0.96);
+}
+
+.top.open {
+  transform: translate(-50%, 0) scale(1);
+}
+
+.top .arrow {
+  bottom: -0.2rem;
+  left: calc(50% - 0.25rem);
+}
+
+.bottom {
+  top: var(--tooltip-offset);
+  left: 50%;
+  transform: translate(-50%, -0.25rem) scale(0.96);
+}
+
+.bottom.open {
+  transform: translate(-50%, 0) scale(1);
+}
+
+.bottom .arrow {
+  top: -0.2rem;
+  left: calc(50% - 0.25rem);
+}
+
+.left {
+  right: var(--tooltip-offset);
+  top: 50%;
+  transform: translate(0.25rem, -50%) scale(0.96);
+}
+
+.left.open {
+  transform: translate(0, -50%) scale(1);
+}
+
+.left .arrow {
+  right: -0.2rem;
+  top: calc(50% - 0.25rem);
+}
+
+.right {
+  left: var(--tooltip-offset);
+  top: 50%;
+  transform: translate(-0.25rem, -50%) scale(0.96);
+}
+
+.right.open {
+  transform: translate(0, -50%) scale(1);
+}
+
+.right .arrow {
+  left: -0.2rem;
+  top: calc(50% - 0.25rem);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bubble {
+    transition: none;
+  }
+}