agentic-ds-kit 0.1.0

package/ui/Collapsible/Collapsible.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useId, useState } from "react";
+import { ChevronsUpDown } from "lucide-react";
+import type { CollapsibleProps } from "./Collapsible.types";
+import styles from "./Collapsible.module.css";
+
+export type { CollapsibleProps } from "./Collapsible.types";
+
+export function Collapsible({
+  trigger,
+  children,
+  defaultOpen = false,
+  open: openProp,
+  onOpenChange,
+}: CollapsibleProps) {
+  const isControlled = typeof openProp === "boolean";
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const open = isControlled ? openProp : uncontrolledOpen;
+  const uid = useId();
+  const titleId = `${uid}-title`;
+  const buttonId = `${uid}-trigger`;
+  const panelId = `${uid}-panel`;
+
+  function setOpen(next: boolean) {
+    if (!isControlled) setUncontrolledOpen(next);
+    onOpenChange?.(next);
+  }
+
+  return (
+    <div className={styles.root}>
+      <div className={styles.header}>
+        <p id={titleId} className={styles.title}>
+          {trigger}
+        </p>
+        <button
+          type="button"
+          id={buttonId}
+          className={styles.toggle}
+          aria-expanded={open}
+          aria-controls={panelId}
+          aria-label={`Toggle ${trigger}`}
+          onClick={() => setOpen(!open)}
+        >
+          <ChevronsUpDown size={16} strokeWidth={2} aria-hidden />
+        </button>
+      </div>
+      <div
+        id={panelId}
+        role="region"
+        aria-labelledby={titleId}
+        className={styles.panel}
+        hidden={!open}
+      >
+        <div className={styles.body}>{children}</div>
+      </div>
+    </div>
+  );
+}

package/ui/Collapsible/Collapsible.types.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+
+export interface CollapsibleProps {
+  trigger: string;
+  children: ReactNode;
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}

package/ui/Collapsible/index.ts

@@ -0,0 +1,2 @@
+export { Collapsible } from "./Collapsible";
+export type { CollapsibleProps } from "./Collapsible.types";

package/ui/Command/Command.module.css

@@ -0,0 +1,138 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  background-color: var(--surface-card);
+  border: var(--border-surface) solid var(--border-faint);
+  border-radius: var(--radius-surface-md);
+  box-shadow: var(--shadow-sm);
+}
+
+.search {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  border-bottom: var(--border-divider) solid var(--border-faint);
+  border-top-left-radius: var(--radius-surface-md);
+  border-top-right-radius: var(--radius-surface-md);
+}
+
+.search:focus-within {
+  outline: var(--border-focus-width) solid var(--focus-ring);
+  outline-offset: var(--space-inset-2xs);
+}
+
+.searchIcon {
+  flex-shrink: 0;
+  color: var(--icon-muted);
+}
+
+.input {
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body-sm);
+  line-height: var(--type-line-body);
+  color: var(--text-primary);
+  appearance: none;
+}
+
+.input::placeholder {
+  color: var(--text-muted);
+}
+
+.input:focus {
+  outline: none;
+}
+
+.input::-webkit-search-decoration,
+.input::-webkit-search-cancel-button,
+.input::-webkit-search-results-button,
+.input::-webkit-search-results-decoration {
+  appearance: none;
+}
+
+.list {
+  max-height: 18rem;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: var(--space-1);
+}
+
+.group + .group {
+  margin-top: var(--space-1);
+  padding-top: var(--space-1);
+  border-top: var(--border-divider) solid var(--border-faint);
+}
+
+.heading {
+  padding: var(--space-2) var(--space-2) var(--space-1);
+  font-family: var(--font-sans);
+  font-size: var(--type-size-overline);
+  font-weight: var(--type-weight-overline);
+  letter-spacing: var(--type-tracking-overline);
+  color: var(--text-secondary);
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  width: 100%;
+  margin: 0;
+  padding: var(--space-2);
+  border: 0;
+  border-radius: var(--radius-control-sm);
+  background: transparent;
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body-sm);
+  line-height: var(--type-line-body);
+  text-align: left;
+  cursor: pointer;
+}
+
+.item:hover:not([aria-disabled="true"]),
+.itemHighlighted {
+  background-color: var(--surface-muted);
+}
+
+.itemDisabled {
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+}
+
+.itemIcon {
+  flex-shrink: 0;
+  color: var(--icon-muted);
+}
+
+.itemLabel {
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.shortcut {
+  flex-shrink: 0;
+  font-family: var(--font-mono);
+  font-size: var(--type-size-caption);
+  font-weight: var(--type-weight-caption);
+  color: var(--text-muted);
+}
+
+.empty {
+  padding: var(--space-6) var(--space-4);
+  text-align: center;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body-sm);
+  line-height: var(--type-line-body);
+  color: var(--text-secondary);
+}

package/ui/Command/Command.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { useId, useMemo, useState, type KeyboardEvent } from "react";
+import { LucideByName } from "../Button/lucideName";
+import type { CommandProps } from "./Command.types";
+import styles from "./Command.module.css";
+
+export type { CommandProps, CommandGroup, CommandItem } from "./Command.types";
+
+const DEFAULT_PLACEHOLDER = "Type a command or search...";
+const DEFAULT_EMPTY = "No results found.";
+const DEFAULT_LABEL = "Command menu";
+
+export function Command({
+  placeholder = DEFAULT_PLACEHOLDER,
+  empty = DEFAULT_EMPTY,
+  groups,
+  onSelect,
+  label = DEFAULT_LABEL,
+}: CommandProps) {
+  const uid = useId();
+  const listboxId = `${uid}-list`;
+  const [query, setQuery] = useState("");
+  const [highlightId, setHighlightId] = useState<string | null>(null);
+
+  const visibleGroups = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return groups
+      .map((group) => ({
+        heading: group.heading,
+        items: q
+          ? group.items.filter((item) => item.label.toLowerCase().includes(q))
+          : group.items,
+      }))
+      .filter((group) => group.items.length > 0);
+  }, [groups, query]);
+
+  const enabledIds = useMemo(
+    () =>
+      visibleGroups.flatMap((group) =>
+        group.items.filter((item) => !item.disabled).map((item) => item.id),
+      ),
+    [visibleGroups],
+  );
+
+  const activeId =
+    highlightId && enabledIds.includes(highlightId) ? highlightId : (enabledIds[0] ?? null);
+
+  function optionId(id: string) {
+    return `${uid}-opt-${id}`;
+  }
+
+  function select(id: string) {
+    const item = visibleGroups.flatMap((group) => group.items).find((entry) => entry.id === id);
+    if (!item || item.disabled) return;
+    onSelect?.(id);
+  }
+
+  function move(delta: number) {
+    if (enabledIds.length === 0) return;
+    const current = activeId ? enabledIds.indexOf(activeId) : -1;
+    const next = (current + delta + enabledIds.length) % enabledIds.length;
+    setHighlightId(enabledIds[next]);
+  }
+
+  function onKeyDown(event: KeyboardEvent<HTMLInputElement>) {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        move(1);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        move(-1);
+        break;
+      case "Home":
+        event.preventDefault();
+        if (enabledIds[0]) setHighlightId(enabledIds[0]);
+        break;
+      case "End":
+        event.preventDefault();
+        if (enabledIds.length) setHighlightId(enabledIds[enabledIds.length - 1]);
+        break;
+      case "Enter":
+        event.preventDefault();
+        if (activeId) select(activeId);
+        break;
+      default:
+        break;
+    }
+  }
+
+  return (
+    <div className={styles.root}>
+      <div className={styles.search}>
+        <LucideByName name="Search" size={16} className={styles.searchIcon} />
+        <input
+          type="search"
+          role="combobox"
+          className={styles.input}
+          placeholder={placeholder}
+          value={query}
+          autoComplete="off"
+          onChange={(event) => setQuery(event.target.value)}
+          onKeyDown={onKeyDown}
+          aria-expanded={true}
+          aria-controls={listboxId}
+          aria-activedescendant={activeId ? optionId(activeId) : undefined}
+          aria-autocomplete="list"
+          aria-label={label}
+        />
+      </div>
+      <div id={listboxId} role="listbox" className={styles.list} aria-label={label}>
+        {visibleGroups.length === 0 ? (
+          <div className={styles.empty}>{empty}</div>
+        ) : (
+          visibleGroups.map((group, index) => (
+            <div key={group.heading ?? `group-${index}`} className={styles.group}>
+              {group.heading ? <div className={styles.heading}>{group.heading}</div> : null}
+              {group.items.map((item) => {
+                const highlighted = item.id === activeId;
+                return (
+                  <div
+                    key={item.id}
+                    id={optionId(item.id)}
+                    role="option"
+                    aria-selected={highlighted}
+                    aria-disabled={item.disabled || undefined}
+                    className={`${styles.item}${highlighted ? ` ${styles.itemHighlighted}` : ""}${
+                      item.disabled ? ` ${styles.itemDisabled}` : ""
+                    }`}
+                    onMouseEnter={() => {
+                      if (!item.disabled) setHighlightId(item.id);
+                    }}
+                    onMouseDown={(event) => event.preventDefault()}
+                    onClick={() => {
+                      if (!item.disabled) select(item.id);
+                    }}
+                  >
+                    <LucideByName name={item.icon} size={16} className={styles.itemIcon} />
+                    <span className={styles.itemLabel}>{item.label}</span>
+                    {item.shortcut ? <span className={styles.shortcut}>{item.shortcut}</span> : null}
+                  </div>
+                );
+              })}
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

package/ui/Command/Command.types.ts

@@ -0,0 +1,20 @@
+export interface CommandItem {
+  id: string;
+  label: string;
+  icon?: string;
+  shortcut?: string;
+  disabled?: boolean;
+}
+
+export interface CommandGroup {
+  heading?: string;
+  items: CommandItem[];
+}
+
+export interface CommandProps {
+  placeholder?: string;
+  empty?: string;
+  groups: CommandGroup[];
+  onSelect?: (id: string) => void;
+  label?: string;
+}

package/ui/Command/index.ts

@@ -0,0 +1,2 @@
+export { Command } from "./Command";
+export type { CommandProps, CommandGroup, CommandItem } from "./Command.types";

package/ui/DataTable/DataTable.module.css

@@ -0,0 +1,211 @@
+.root {
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  background-color: var(--surface-card);
+  border: var(--border-surface) solid var(--border-faint);
+  border-radius: var(--radius-surface-md);
+  box-shadow: var(--shadow-sm);
+}
+
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+  border-bottom: var(--border-divider) solid var(--border-faint);
+  background: transparent;
+}
+
+.search {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex: 1 1 12rem;
+  min-width: 0;
+  max-width: 18rem;
+  padding: var(--space-2) var(--space-3);
+  border: var(--border-control) solid var(--border-faint);
+  border-radius: var(--radius-control-md);
+  background-color: var(--surface-card);
+}
+
+.search:focus-within {
+  border-color: var(--border-focus);
+  outline: var(--border-focus-width) solid var(--focus-ring);
+  outline-offset: var(--space-inset-2xs);
+}
+
+.searchIcon {
+  flex-shrink: 0;
+  color: var(--icon-muted);
+}
+
+.searchInput {
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body-sm);
+  line-height: var(--type-line-body);
+  color: var(--text-primary);
+  appearance: none;
+}
+
+.searchInput::placeholder {
+  color: var(--text-muted);
+}
+
+.searchInput:focus {
+  outline: none;
+}
+
+.searchInput::-webkit-search-decoration,
+.searchInput::-webkit-search-cancel-button,
+.searchInput::-webkit-search-results-button,
+.searchInput::-webkit-search-results-decoration {
+  appearance: none;
+}
+
+.filter {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  flex-shrink: 0;
+}
+
+.columns {
+  position: relative;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.columnMenu {
+  position: absolute;
+  top: calc(100% + var(--space-1));
+  right: 0;
+  z-index: var(--z-overlay);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-width: 10rem;
+  padding: var(--space-3);
+  background-color: var(--surface-elevated);
+  border: var(--border-surface) solid var(--border-faint);
+  border-radius: var(--radius-surface-sm);
+  box-shadow: var(--shadow-sm);
+}
+
+.count {
+  margin: 0;
+  padding: var(--space-2) var(--space-4);
+  border-bottom: var(--border-divider) solid var(--border-faint);
+  font-family: var(--font-sans);
+  font-size: var(--type-size-caption);
+  font-weight: var(--type-weight-caption);
+  line-height: var(--type-line-body);
+  color: var(--text-muted);
+}
+
+.scroller {
+  width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+  background-color: var(--surface-card);
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--font-sans);
+}
+
+.caption {
+  padding: var(--space-3) var(--space-4);
+  border-bottom: var(--border-divider) solid var(--border-faint);
+  background-color: var(--surface-card);
+  font-family: var(--font-sans);
+  font-size: var(--type-size-heading);
+  font-weight: var(--type-weight-heading);
+  line-height: var(--type-line-heading);
+  color: var(--text-primary);
+  text-align: left;
+}
+
+.th,
+.td {
+  padding: 0;
+  font-size: var(--type-size-body-sm);
+  line-height: var(--type-line-body);
+  text-align: left;
+  vertical-align: middle;
+  border-bottom: var(--border-divider) solid var(--border-faint);
+}
+
+.th {
+  font-weight: var(--type-weight-label);
+  color: var(--text-secondary);
+  background-color: var(--surface-muted);
+}
+
+.td {
+  color: var(--text-primary);
+  background-color: var(--surface-card);
+  transition: background-color var(--motion-interaction-duration) var(--motion-interaction-easing);
+}
+
+.numeric {
+  width: 1%;
+  white-space: nowrap;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.actionCell {
+  width: 1%;
+  white-space: nowrap;
+  text-align: center;
+}
+
+.checkCell {
+  width: 1%;
+  padding-inline: var(--space-4);
+  text-align: center;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.root[data-size="md"] .checkCell {
+  padding-inline: var(--space-6);
+}
+
+.checkCell :global(label) {
+  display: inline-flex;
+  justify-content: center;
+}
+
+.tr:hover .td,
+.tr[data-selected] .td {
+  background-color: var(--surface-muted);
+}
+
+.tr:last-child .td {
+  border-bottom: none;
+}
+
+.emptyCell {
+  padding: var(--space-8) var(--space-4);
+  text-align: center;
+  color: var(--text-secondary);
+  background-color: var(--surface-card);
+}
+
+.tr:hover .emptyCell,
+.emptyCell:hover {
+  background-color: var(--surface-card);
+}