agentic-ds-kit 0.1.0 → 0.2.0

package/ui/Table/Table.types.ts

@@ -1,26 +0,0 @@
-import type { ReactNode } from "react";
-
-export type TableSize = "sm" | "md" | "lg";
-export type TableAlign = "start" | "end";
-
-export interface TableColumn {
-  key: string;
-  header: string;
-  align?: TableAlign;
-  numeric?: boolean;
-  emphasis?: boolean;
-}
-
-export interface TableFooter {
-  label: string;
-  value: string | number;
-}
-
-export interface TableProps {
-  columns: TableColumn[];
-  rows: Record<string, string | number | ReactNode>[];
-  caption?: string;
-  size?: TableSize;
-  emptyLabel?: string;
-  footer?: TableFooter;
-}

package/ui/Table/index.ts

@@ -1,8 +0,0 @@
-export { Table } from "./Table";
-export type {
-  TableProps,
-  TableColumn,
-  TableSize,
-  TableAlign,
-  TableFooter,
-} from "./Table.types";

package/ui/Tabs/Tabs.tsx

@@ -1,150 +0,0 @@
-"use client";
-
-import { useId, useLayoutEffect, useRef, useState, type KeyboardEvent } from "react";
-import type { TabsProps } from "./Tabs.types";
-import styles from "./Tabs.module.css";
-
-export type { TabsProps, TabItem, TabsSize, TabsVariant } from "./Tabs.types";
-
-function firstEnabledId(items: TabsProps["items"], preferred?: string) {
-  if (preferred && items.some((item) => item.id === preferred && !item.disabled)) {
-    return preferred;
-  }
-  return items.find((item) => !item.disabled)?.id;
-}
-
-export function Tabs({
-  items,
-  value,
-  defaultValue,
-  onChange,
-  size = "md",
-  variant = "segmented",
-  ariaLabel = "Tabs",
-}: TabsProps) {
-  const baseId = useId();
-  const isControlled = value !== undefined;
-  const [internal, setInternal] = useState(() => firstEnabledId(items, defaultValue) ?? items[0]?.id);
-  const selected = (isControlled ? value : internal) ?? items[0]?.id;
-  const selectedItem = items.find((item) => item.id === selected) ?? items.find((item) => !item.disabled) ?? items[0];
-
-  const listRef = useRef<HTMLDivElement>(null);
-  const tabRefs = useRef(new Map<string, HTMLButtonElement>());
-  const [indicator, setIndicator] = useState({ left: 0, top: 0, width: 0, height: 0, ready: false });
-
-  function select(id: string) {
-    const item = items.find((entry) => entry.id === id);
-    if (!item || item.disabled) return;
-    if (!isControlled) setInternal(id);
-    onChange?.(id);
-  }
-
-  useLayoutEffect(() => {
-    function update() {
-      const list = listRef.current;
-      const active = selected ? tabRefs.current.get(selected) : undefined;
-      if (!list || !active) {
-        setIndicator((current) => ({ ...current, ready: false }));
-        return;
-      }
-      setIndicator({
-        left: active.offsetLeft,
-        top: active.offsetTop,
-        width: active.offsetWidth,
-        height: active.offsetHeight,
-        ready: true,
-      });
-    }
-
-    update();
-    const observer = new ResizeObserver(update);
-    if (listRef.current) observer.observe(listRef.current);
-    tabRefs.current.forEach((node) => observer.observe(node));
-    window.addEventListener("resize", update);
-    return () => {
-      observer.disconnect();
-      window.removeEventListener("resize", update);
-    };
-  }, [selected, size, variant, items]);
-
-  function onListKeyDown(event: KeyboardEvent<HTMLDivElement>) {
-    const enabled = items.filter((item) => !item.disabled);
-    if (enabled.length === 0) return;
-    const index = enabled.findIndex((item) => item.id === selected);
-    const current = index < 0 ? 0 : index;
-    let next = current;
-    if (event.key === "ArrowRight" || event.key === "ArrowDown") next = (current + 1) % enabled.length;
-    else if (event.key === "ArrowLeft" || event.key === "ArrowUp") next = (current - 1 + enabled.length) % enabled.length;
-    else if (event.key === "Home") next = 0;
-    else if (event.key === "End") next = enabled.length - 1;
-    else return;
-    event.preventDefault();
-    select(enabled[next].id);
-    tabRefs.current.get(enabled[next].id)?.focus();
-  }
-
-  if (!selectedItem) return null;
-  const showPanel = selectedItem.content != null && selectedItem.content !== false;
-
-  return (
-    <div
-      className={`${styles.tabs} ${styles[size]} ${styles[variant]}${showPanel ? "" : ` ${styles.listOnly}`}`}
-    >
-      <div
-        ref={listRef}
-        role="tablist"
-        aria-label={ariaLabel}
-        className={styles.list}
-        onKeyDown={onListKeyDown}
-      >
-        <span
-          className={styles.indicator}
-          data-ready={indicator.ready ? "" : undefined}
-          aria-hidden
-          style={{
-            transform: `translate(${indicator.left}px, ${indicator.top}px)`,
-            width: indicator.width,
-            height: indicator.height,
-          }}
-        />
-        {items.map((item) => {
-          const isSelected = item.id === selected;
-          const triggerId = `${baseId}-trigger-${item.id}`;
-          const panelId = `${baseId}-panel-${item.id}`;
-          return (
-            <button
-              key={item.id}
-              id={triggerId}
-              ref={(node) => {
-                if (node) tabRefs.current.set(item.id, node);
-                else tabRefs.current.delete(item.id);
-              }}
-              type="button"
-              role="tab"
-              className={styles.trigger}
-              aria-selected={isSelected}
-              aria-controls={panelId}
-              tabIndex={isSelected ? 0 : -1}
-              disabled={item.disabled}
-              data-state={isSelected ? "active" : "inactive"}
-              onClick={() => select(item.id)}
-            >
-              {item.label}
-            </button>
-          );
-        })}
-      </div>
-      {showPanel ? (
-        <div
-          id={`${baseId}-panel-${selectedItem.id}`}
-          role="tabpanel"
-          className={styles.content}
-          aria-labelledby={`${baseId}-trigger-${selectedItem.id}`}
-          tabIndex={0}
-        >
-          {selectedItem.content}
-        </div>
-      ) : null}
-    </div>
-  );
-}

package/ui/Tabs/Tabs.types.ts

@@ -1,21 +0,0 @@
-import type { ReactNode } from "react";
-
-export type TabsSize = "sm" | "md" | "lg";
-export type TabsVariant = "segmented" | "line";
-
-export interface TabItem {
-  id: string;
-  label: string;
-  content?: ReactNode;
-  disabled?: boolean;
-}
-
-export interface TabsProps {
-  items: TabItem[];
-  value?: string;
-  defaultValue?: string;
-  onChange?: (id: string) => void;
-  size?: TabsSize;
-  variant?: TabsVariant;
-  ariaLabel?: string;
-}

package/ui/Tabs/index.ts

@@ -1,2 +0,0 @@
-export { Tabs } from "./Tabs";
-export type { TabsProps, TabItem, TabsSize, TabsVariant } from "./Tabs.types";

package/ui/Textarea/Textarea.tsx

@@ -1,38 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

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

package/ui/ThinkingAnimation/ThinkingAnimation.tsx

@@ -1,31 +0,0 @@
-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

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

package/ui/ThinkingAnimation/index.ts

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

package/ui/Timeline/Timeline.tsx

@@ -1,47 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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/Toast/Toast.tsx

@@ -1,89 +0,0 @@
-"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

@@ -1,17 +0,0 @@
-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

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

package/ui/Tooltip/Tooltip.tsx

@@ -1,101 +0,0 @@
-"use client";
-
-import {
-  cloneElement,
-  isValidElement,
-  useEffect,
-  useId,
-  useRef,
-  useState,
-  type ReactElement,
-  type ReactNode,
-} from "react";
-import styles from "./Tooltip.module.css";
-
-export type TooltipPlacement = "top" | "bottom" | "left" | "right";
-
-export interface TooltipProps {
-  content: string;
-  placement?: TooltipPlacement;
-  delay?: number;
-  open?: boolean;
-  disabled?: boolean;
-  children: ReactNode;
-  className?: string;
-}
-
-export function Tooltip({
-  content,
-  placement = "top",
-  delay = 150,
-  open: controlledOpen,
-  disabled = false,
-  children,
-  className = "",
-}: TooltipProps) {
-  const tooltipId = useId();
-  const timerRef = useRef<number | null>(null);
-  const isControlled = controlledOpen !== undefined;
-  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
-  const open = !disabled && (isControlled ? controlledOpen : uncontrolledOpen);
-
-  function clearTimer() {
-    if (timerRef.current != null) {
-      window.clearTimeout(timerRef.current);
-      timerRef.current = null;
-    }
-  }
-
-  function show(immediate = false) {
-    if (disabled || isControlled) return;
-    clearTimer();
-    if (immediate || delay <= 0) {
-      setUncontrolledOpen(true);
-      return;
-    }
-    timerRef.current = window.setTimeout(() => setUncontrolledOpen(true), delay);
-  }
-
-  function hide() {
-    if (isControlled) return;
-    clearTimer();
-    setUncontrolledOpen(false);
-  }
-
-  useEffect(() => () => clearTimer(), []);
-
-  useEffect(() => {
-    if (!open) return undefined;
-    function handleKeyDown(event: KeyboardEvent) {
-      if (event.key === "Escape") hide();
-    }
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [open]);
-
-  const trigger = isValidElement(children)
-    ? cloneElement(children as ReactElement<{ "aria-describedby"?: string }>, {
-        "aria-describedby": open ? tooltipId : undefined,
-      })
-    : children;
-
-  return (
-    <span
-      className={`${styles.wrapper} ${className}`.trim()}
-      onPointerEnter={() => show()}
-      onPointerLeave={hide}
-      onFocus={() => show(true)}
-      onBlur={hide}
-    >
-      {trigger}
-      <span
-        id={tooltipId}
-        role="tooltip"
-        className={`${styles.bubble} ${styles[placement]}${open ? ` ${styles.open}` : ""}`}
-      >
-        {content}
-        <span className={styles.arrow} aria-hidden="true" />
-      </span>
-    </span>
-  );
-}

package/ui/Tooltip/index.ts

@@ -1,2 +0,0 @@
-export type { TooltipProps, TooltipPlacement } from "./Tooltip";
-export { Tooltip } from "./Tooltip";

package/ui/patterns/ActivityPattern/ActivityFeed.tsx

@@ -1,77 +0,0 @@
-import { DataTable } from "../../DataTable";
-import type { DataTableColumn, DataTableRow } from "../../DataTable";
-
-const EVENT_COLUMNS: DataTableColumn[] = [
-  { key: "actor", header: "Person", sortable: true },
-  { key: "event", header: "Event", sortable: true },
-  { key: "type", header: "Type", sortable: true },
-  { key: "when", header: "When", sortable: true },
-];
-
-const EVENT_ROWS: DataTableRow[] = [
-  {
-    id: "comment-launch",
-    actor: { type: "avatar", label: "Maya Chen", name: "Maya Chen", src: "/faces/maya-chen.jpg" },
-    event: { type: "file", label: "Commented on Launch brief" },
-    type: { type: "badge", label: "Comment", tone: "info" },
-    when: "2h ago",
-  },
-  {
-    id: "blocked-qa",
-    actor: { type: "avatar", label: "Unassigned", name: "Unassigned" },
-    event: { type: "file", label: "QA checklist marked Blocked" },
-    type: { type: "badge", label: "Status", tone: "danger" },
-    when: "4h ago",
-  },
-  {
-    id: "macros-update",
-    actor: { type: "avatar", label: "Alex Rivera", name: "Alex Rivera", src: "/faces/alex-rivera.jpg" },
-    event: { type: "file", label: "Updated Support macros" },
-    type: { type: "badge", label: "Edit", tone: "neutral" },
-    when: "5h ago",
-  },
-  {
-    id: "ready-notes",
-    actor: { type: "avatar", label: "Jordan Lee", name: "Jordan Lee", src: "/faces/jordan-lee.jpg" },
-    event: { type: "file", label: "Moved Release notes to Ready" },
-    type: { type: "badge", label: "Status", tone: "success" },
-    when: "Yesterday",
-  },
-  {
-    id: "mention-launch",
-    actor: { type: "avatar", label: "Maya Chen", name: "Maya Chen", src: "/faces/maya-chen.jpg" },
-    event: { type: "file", label: "Mentioned you in Launch brief" },
-    type: { type: "badge", label: "Mention", tone: "brand" },
-    when: "Yesterday",
-  },
-  {
-    id: "macros-comment",
-    actor: { type: "avatar", label: "Alex Rivera", name: "Alex Rivera", src: "/faces/alex-rivera.jpg" },
-    event: { type: "file", label: "Replied on Support macros" },
-    type: { type: "badge", label: "Comment", tone: "info" },
-    when: "Mon",
-  },
-];
-
-function rowsFor(tab: string): DataTableRow[] {
-  if (tab === "all") return EVENT_ROWS;
-  const label = tab === "comments" ? "Comment" : tab === "status" ? "Status" : "Mention";
-  return EVENT_ROWS.filter((row) => {
-    const cell = row.type;
-    return typeof cell === "object" && cell !== null && "label" in cell && cell.label === label;
-  });
-}
-
-export function ActivityFeed({ tab, caption }: { tab: string; caption: string }) {
-  return (
-    <DataTable
-      caption={caption}
-      toolbar
-      cellSize="sm"
-      searchPlaceholder="Search activity..."
-      emptyMessage="No activity in this filter."
-      columns={EVENT_COLUMNS}
-      rows={rowsFor(tab)}
-    />
-  );
-}