agentic-ds-kit 0.1.0

package/ui/Table/Table.module.css

@@ -0,0 +1,132 @@
+.wrapper {
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+}
+
+.table {
+  width: 100%;
+  caption-side: bottom;
+  border-collapse: collapse;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body-sm);
+  line-height: var(--type-line-body);
+  color: var(--text-primary);
+  text-align: start;
+}
+
+.caption {
+  caption-side: bottom;
+  margin-top: var(--space-4);
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body-sm);
+  font-weight: var(--type-weight-body);
+  line-height: var(--type-line-body);
+  color: var(--text-muted);
+  text-align: start;
+}
+
+.tr {
+  border-bottom: var(--border-divider) solid var(--border-faint);
+  transition: background-color var(--motion-interaction-duration) var(--motion-interaction-easing);
+}
+
+.thead .tr {
+  border-bottom: var(--border-divider) solid var(--border-faint);
+}
+
+.tbody .tr:last-child {
+  border-bottom: none;
+}
+
+.tbody .tr:hover .td {
+  background-color: color-mix(in srgb, var(--surface-muted) 50%, var(--surface-card));
+}
+
+.tfoot {
+  border-top: var(--border-divider) solid var(--border-faint);
+  background-color: color-mix(in srgb, var(--surface-muted) 50%, transparent);
+  font-weight: var(--type-weight-label);
+}
+
+.tfoot .td {
+  color: var(--text-primary);
+  font-weight: var(--type-weight-label);
+  background-color: color-mix(in srgb, var(--surface-muted) 50%, var(--surface-card));
+}
+
+.tfoot .tr {
+  border-bottom: none;
+}
+
+.tfoot .tr:last-child {
+  border-bottom: none;
+}
+
+.th,
+.td {
+  vertical-align: middle;
+  text-align: start;
+  white-space: nowrap;
+}
+
+.th {
+  height: 2.5rem;
+  padding-inline: var(--space-2);
+  padding-block: 0;
+  font-weight: var(--type-weight-label);
+  color: var(--text-primary);
+  background-color: var(--surface-card);
+}
+
+.td {
+  padding: var(--space-2);
+  color: var(--text-secondary);
+  background-color: var(--surface-card);
+  transition: background-color var(--motion-interaction-duration) var(--motion-interaction-easing);
+}
+
+.emphasis {
+  font-weight: var(--type-weight-label);
+  color: var(--text-primary);
+}
+
+.numeric {
+  width: 1%;
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
+.empty {
+  min-height: 6rem;
+  height: 6rem;
+  text-align: center;
+  white-space: normal;
+  color: var(--text-muted);
+}
+
+.sm .th {
+  height: 2rem;
+  padding-inline: var(--space-1);
+}
+
+.sm .td {
+  padding: var(--space-1);
+}
+
+.lg .th {
+  height: 3rem;
+  padding-inline: var(--space-3);
+}
+
+.lg .td {
+  padding: var(--space-3);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tr,
+  .td {
+    transition: none;
+  }
+}

package/ui/Table/Table.tsx

@@ -0,0 +1,108 @@
+import type { ReactNode } from "react";
+import type { TableColumn, TableProps } from "./Table.types";
+import styles from "./Table.module.css";
+
+export type {
+  TableProps,
+  TableColumn,
+  TableSize,
+  TableAlign,
+  TableFooter,
+} from "./Table.types";
+
+const DEFAULT_EMPTY = "No results.";
+
+function isNumeric(column: TableColumn): boolean {
+  return column.numeric === true || column.align === "end";
+}
+
+function isEmphasis(column: TableColumn, index: number): boolean {
+  return column.emphasis === true || index === 0;
+}
+
+function classNames(...parts: Array<string | false | undefined>): string {
+  return parts.filter(Boolean).join(" ");
+}
+
+function cellValue(value: string | number | ReactNode | undefined): ReactNode {
+  if (value === undefined || value === null) return "";
+  return value;
+}
+
+export function Table({
+  columns,
+  rows,
+  caption,
+  size = "md",
+  emptyLabel = DEFAULT_EMPTY,
+  footer,
+}: TableProps) {
+  const empty = rows.length === 0;
+  const colCount = Math.max(columns.length, 1);
+  const footerLabelSpan = columns.length > 1 ? columns.length - 1 : 1;
+
+  return (
+    <div className={classNames(styles.wrapper, styles[size])}>
+      <table className={styles.table}>
+        {caption ? <caption className={styles.caption}>{caption}</caption> : null}
+        <thead className={styles.thead}>
+          <tr className={styles.tr}>
+            {columns.map((column) => (
+              <th
+                key={column.key}
+                scope="col"
+                className={classNames(styles.th, isNumeric(column) && styles.numeric)}
+              >
+                {column.header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody className={styles.tbody}>
+          {empty ? (
+            <tr className={styles.tr}>
+              <td className={classNames(styles.td, styles.empty)} colSpan={colCount}>
+                {emptyLabel}
+              </td>
+            </tr>
+          ) : (
+            rows.map((row, index) => (
+              <tr key={index} className={styles.tr}>
+                {columns.map((column, columnIndex) => (
+                  <td
+                    key={column.key}
+                    className={classNames(
+                      styles.td,
+                      isNumeric(column) && styles.numeric,
+                      isEmphasis(column, columnIndex) && styles.emphasis,
+                    )}
+                  >
+                    {cellValue(row[column.key])}
+                  </td>
+                ))}
+              </tr>
+            ))
+          )}
+        </tbody>
+        {footer ? (
+          <tfoot className={styles.tfoot}>
+            <tr className={styles.tr}>
+              {columns.length > 1 ? (
+                <>
+                  <td className={styles.td} colSpan={footerLabelSpan}>
+                    {footer.label}
+                  </td>
+                  <td className={classNames(styles.td, styles.numeric)}>{footer.value}</td>
+                </>
+              ) : (
+                <td className={classNames(styles.td, styles.numeric)}>
+                  {footer.label} {footer.value}
+                </td>
+              )}
+            </tr>
+          </tfoot>
+        ) : null}
+      </table>
+    </div>
+  );
+}

package/ui/Table/Table.types.ts

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

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

package/ui/Tabs/Tabs.module.css

@@ -0,0 +1,162 @@
+.tabs {
+  display: grid;
+  gap: var(--space-stack-md);
+  width: 100%;
+}
+
+.listOnly {
+  gap: 0;
+  width: fit-content;
+  max-width: 100%;
+}
+
+.list {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  width: fit-content;
+  max-width: 100%;
+}
+
+.indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0;
+  transform-origin: left center;
+}
+
+.indicator[data-ready] {
+  opacity: 1;
+}
+
+.trigger {
+  position: relative;
+  z-index: 1;
+  appearance: none;
+  margin: 0;
+  border: 0;
+  background: transparent;
+  color: var(--text-muted);
+  font-family: var(--font-sans);
+  font-size: var(--type-size-label);
+  font-weight: var(--type-weight-label);
+  line-height: var(--type-line-body);
+  cursor: pointer;
+}
+
+.trigger:hover:not(:disabled) {
+  color: var(--text-primary);
+}
+
+.trigger[data-state="active"] {
+  color: var(--text-primary);
+}
+
+.trigger:focus-visible {
+  outline: var(--border-focus-width) solid var(--focus-ring);
+  outline-offset: var(--space-inset-2xs);
+}
+
+.trigger:disabled {
+  color: var(--text-disabled);
+  cursor: not-allowed;
+  opacity: var(--opacity-disabled);
+}
+
+.content {
+  min-width: 0;
+  color: var(--text-secondary);
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body-sm);
+  font-weight: var(--type-weight-body);
+  line-height: var(--type-line-body);
+  outline: none;
+}
+
+.segmented .list {
+  gap: var(--space-inline-2xs);
+  padding: var(--space-inset-2xs);
+  border-radius: var(--radius-control-md);
+  background: var(--surface-muted);
+  box-shadow: inset 0 0 0 var(--border-100) var(--border-faint);
+}
+
+.segmented .indicator {
+  border-radius: var(--radius-control-sm);
+  background: var(--surface-card);
+  box-shadow: var(--shadow-raised-sm);
+}
+
+.segmented .trigger {
+  border-radius: var(--radius-control-sm);
+  padding: var(--space-inset-sm) var(--space-inset-md);
+}
+
+.line .list {
+  gap: var(--space-inline-md);
+  width: 100%;
+  border-bottom: var(--border-divider) solid var(--border-faint);
+}
+
+.line .indicator {
+  top: auto;
+  bottom: 0;
+  height: var(--border-control-strong) !important;
+  border-radius: var(--radius-pill);
+  background: var(--text-primary);
+}
+
+.line .trigger {
+  padding: var(--space-inset-sm) var(--space-inset-2xs);
+  margin-bottom: calc(-1 * var(--border-divider));
+}
+
+.sm {
+  gap: var(--space-stack-sm);
+}
+
+.sm.segmented .trigger {
+  padding: var(--space-inset-xs) var(--space-inset-sm);
+  font-size: var(--type-size-caption);
+  font-weight: var(--type-weight-caption);
+}
+
+.sm.line .trigger {
+  padding: var(--space-inset-xs) var(--space-inset-2xs);
+  font-size: var(--type-size-caption);
+  font-weight: var(--type-weight-caption);
+}
+
+.lg {
+  gap: var(--space-stack-lg);
+}
+
+.lg.segmented .list {
+  padding: var(--space-inset-xs);
+  border-radius: var(--radius-control-lg);
+  gap: var(--space-inline-xs);
+}
+
+.lg.segmented .trigger {
+  padding: var(--space-inset-sm) var(--space-inset-lg);
+  border-radius: var(--radius-control-md);
+  font-size: var(--type-size-body-sm);
+}
+
+.lg.segmented .indicator {
+  border-radius: var(--radius-control-md);
+}
+
+.lg.line .trigger {
+  padding: var(--space-inset-md) var(--space-inset-xs);
+  font-size: var(--type-size-body-sm);
+}
+
+.lg .content {
+  font-size: var(--type-size-body);
+}
+

package/ui/Tabs/Tabs.tsx

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

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

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

package/ui/Textarea/Textarea.module.css

@@ -0,0 +1,74 @@
+.textarea {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  resize: vertical;
+  font-family: var(--font-sans);
+  font-weight: var(--type-weight-body);
+  line-height: var(--type-line-body);
+  color: var(--text-primary);
+  background-color: var(--surface-card);
+  border: var(--border-control) solid var(--border-faint);
+  outline: none;
+}
+
+.textarea::placeholder {
+  color: var(--text-muted);
+}
+
+.sm {
+  min-height: 5rem;
+  padding: var(--space-inset-sm);
+  border-radius: var(--radius-control-md);
+  font-size: var(--type-size-caption);
+}
+
+.md {
+  min-height: 6.5rem;
+  padding: var(--space-inset-sm) var(--space-inset-md);
+  border-radius: var(--radius-control-md);
+  font-size: var(--type-size-body-sm);
+}
+
+.lg {
+  min-height: 8rem;
+  padding: var(--space-inset-md) var(--space-inset-lg);
+  border-radius: var(--radius-control-lg);
+  font-size: var(--type-size-body);
+}
+
+.textarea:hover:not(:disabled):not(:focus),
+.textarea[data-demo="hover"]:not(:disabled):not(:focus) {
+  border-color: var(--border-strong);
+}
+
+.textarea:focus-visible,
+.textarea[data-demo="focus"] {
+  border-color: var(--border-focus);
+  outline: var(--border-focus-width) solid var(--focus-ring);
+  outline-offset: var(--space-inset-2xs);
+}
+
+.error {
+  border-color: var(--status-danger);
+}
+
+.error:hover:not(:disabled):not(:focus),
+.error[data-demo="hover"]:not(:disabled):not(:focus) {
+  border-color: var(--status-danger);
+}
+
+.error:focus-visible,
+.error[data-demo="focus"] {
+  border-color: var(--status-danger);
+  outline-color: var(--status-danger);
+}
+
+.textarea:disabled {
+  resize: none;
+  cursor: not-allowed;
+  color: var(--text-disabled);
+  background-color: var(--surface-disabled);
+  border-color: var(--border-disabled);
+}