agentic-ds-kit 0.1.0

package/ui/Accordion/Accordion.module.css

@@ -0,0 +1,68 @@
+
+.root {
+  display: flex;
+  flex-direction: column;
+}
+
+.item {
+  border-bottom: var(--border-divider) solid var(--border-faint);
+}
+
+.item:first-child {
+  border-top: var(--border-divider) solid var(--border-faint);
+}
+
+.trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  width: 100%;
+  margin: 0;
+  padding: var(--space-4) 0;
+  border: 0;
+  background: transparent;
+  color: var(--text-primary);
+  cursor: pointer;
+  text-align: left;
+}
+
+.trigger:focus-visible {
+  outline: var(--border-focus-width) solid var(--focus-ring);
+  outline-offset: var(--space-inset-2xs);
+}
+
+.title {
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body);
+  font-weight: var(--type-weight-heading);
+}
+
+.chevron {
+  flex-shrink: 0;
+  color: var(--icon-muted);
+  transition: transform var(--motion-expand-duration) var(--motion-ease-out);
+}
+
+.chevronOpen {
+  transform: rotate(180deg);
+}
+
+.panel {
+  padding: 0 0 var(--space-4);
+}
+
+.body {
+  margin: 0;
+  padding-top: var(--space-1);
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body-sm);
+  line-height: var(--type-line-body);
+  color: var(--text-primary);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chevron {
+    transition: none;
+  }
+}

package/ui/Accordion/Accordion.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { useState } from "react";
+import { ChevronDown } from "lucide-react";
+import type { AccordionProps } from "./Accordion.types";
+import styles from "./Accordion.module.css";
+
+export type { AccordionProps, AccordionItem } from "./Accordion.types";
+
+export function Accordion({ items, defaultOpen }: AccordionProps) {
+  const [openId, setOpenId] = useState<string | null>(defaultOpen ?? null);
+
+  return (
+    <div className={styles.root}>
+      {items.map((item) => {
+        const open = openId === item.id;
+        const panelId = `accordion-panel-${item.id}`;
+        const buttonId = `accordion-button-${item.id}`;
+        return (
+          <div key={item.id} className={styles.item}>
+            <button
+              type="button"
+              id={buttonId}
+              className={`${styles.trigger} ${open ? styles.triggerOpen : ""}`}
+              aria-expanded={open}
+              aria-controls={panelId}
+              onClick={() => setOpenId((current) => (current === item.id ? null : item.id))}
+            >
+              <span className={styles.title}>{item.title}</span>
+              <ChevronDown
+                className={`${styles.chevron} ${open ? styles.chevronOpen : ""}`}
+                size={16}
+                strokeWidth={2}
+                aria-hidden
+              />
+            </button>
+            <div
+              id={panelId}
+              role="region"
+              aria-labelledby={buttonId}
+              className={styles.panel}
+              hidden={!open}
+            >
+              <p className={styles.body}>{item.content}</p>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/ui/Accordion/Accordion.types.ts

@@ -0,0 +1,10 @@
+export interface AccordionItem {
+  id: string;
+  title: string;
+  content: string;
+}
+
+export interface AccordionProps {
+  items: AccordionItem[];
+  defaultOpen?: string;
+}

package/ui/Accordion/index.ts

@@ -0,0 +1,2 @@
+export { Accordion } from "./Accordion";
+export type { AccordionProps, AccordionItem } from "./Accordion.types";

package/ui/Alert/Alert.module.css

@@ -0,0 +1,62 @@
+
+.alert {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border: var(--border-100) solid var(--status-info-border);
+  border-radius: var(--radius-surface-sm);
+  background: var(--status-info-subtle);
+  color: var(--status-info);
+}
+
+.success {
+  border-color: var(--status-success-border);
+  background: var(--status-success-subtle);
+  color: var(--status-success);
+}
+
+.warning {
+  border-color: var(--status-warning-border);
+  background: var(--status-warning-subtle);
+  color: var(--status-warning);
+}
+
+.danger {
+  border-color: var(--status-danger-border);
+  background: var(--status-danger-subtle);
+  color: var(--status-danger);
+}
+
+.icon {
+  margin-top: 0.1rem;
+}
+
+.copy {
+  display: grid;
+  gap: 0.15rem;
+  min-width: 0;
+}
+
+.title {
+  margin: 0;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-label);
+  font-weight: var(--type-weight-label);
+  color: inherit;
+}
+
+.body {
+  margin: 0;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body-sm);
+  line-height: var(--type-line-body);
+  color: var(--text-primary);
+}
+
+.info .body,
+.success .body,
+.warning .body,
+.danger .body {
+  color: var(--text-primary);
+}

package/ui/Alert/Alert.tsx

@@ -0,0 +1,27 @@
+import { CircleAlert, CircleCheck, Info, TriangleAlert } from "lucide-react";
+import type { AlertProps, AlertVariant } from "./Alert.types";
+import styles from "./Alert.module.css";
+
+export type { AlertProps, AlertVariant } from "./Alert.types";
+
+const ICONS: Record<AlertVariant, typeof Info> = {
+  info: Info,
+  success: CircleCheck,
+  warning: TriangleAlert,
+  danger: CircleAlert,
+};
+
+export function Alert({ children, variant = "info", title }: AlertProps) {
+  const Icon = ICONS[variant];
+  const role = variant === "warning" || variant === "danger" ? "alert" : "status";
+
+  return (
+    <div className={`${styles.alert} ${styles[variant]}`} role={role}>
+      <Icon className={styles.icon} size={18} strokeWidth={2} aria-hidden />
+      <div className={styles.copy}>
+        {title ? <p className={styles.title}>{title}</p> : null}
+        <p className={styles.body}>{children}</p>
+      </div>
+    </div>
+  );
+}

package/ui/Alert/Alert.types.ts

@@ -0,0 +1,7 @@
+export type AlertVariant = "info" | "success" | "warning" | "danger";
+
+export interface AlertProps {
+  children: string;
+  variant?: AlertVariant;
+  title?: string;
+}

package/ui/Alert/index.ts

@@ -0,0 +1,2 @@
+export { Alert } from "./Alert";
+export type { AlertProps, AlertVariant } from "./Alert.types";

package/ui/AlertDialog/AlertDialog.module.css

@@ -0,0 +1,71 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-4);
+  background-color: var(--surface-overlay);
+  animation: overlayEnter var(--motion-overlay-duration) var(--motion-overlay-easing);
+}
+
+.dialog {
+  z-index: var(--z-modal);
+  width: 100%;
+  padding: var(--space-6);
+  background-color: var(--surface-elevated);
+  border: var(--border-width-thin) solid var(--border-faint);
+  border-radius: var(--radius-surface-md);
+  box-shadow: var(--shadow-md);
+  animation: dialogEnter var(--motion-modal-duration) var(--motion-modal-easing);
+}
+
+.sm {
+  max-width: 20rem;
+}
+
+.md {
+  max-width: 28rem;
+}
+
+.title {
+  margin: 0;
+  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);
+}
+
+.description {
+  margin: var(--space-3) 0 0;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body);
+  line-height: var(--type-line-body);
+  color: var(--text-muted);
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: var(--space-6);
+}
+
+@keyframes overlayEnter {
+  from {
+    opacity: var(--opacity-0);
+  }
+  to {
+    opacity: var(--opacity-full);
+  }
+}
+
+@keyframes dialogEnter {
+  from {
+    opacity: var(--opacity-0);
+  }
+  to {
+    opacity: var(--opacity-full);
+  }
+}

package/ui/AlertDialog/AlertDialog.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { useEffect, useId, useRef } from "react";
+import { Button } from "../Button";
+import { ButtonGroup } from "../ButtonGroup";
+import type { AlertDialogProps } from "./AlertDialog.types";
+import styles from "./AlertDialog.module.css";
+
+export type { AlertDialogProps, AlertDialogActionVariant, AlertDialogSize } from "./AlertDialog.types";
+
+export function AlertDialog({
+  open,
+  title,
+  description,
+  cancelLabel = "Cancel",
+  actionLabel,
+  actionVariant = "primary",
+  size = "md",
+  onCancel,
+  onAction,
+}: AlertDialogProps) {
+  const titleId = useId();
+  const descriptionId = useId();
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const cancelRef = useRef<HTMLButtonElement | null>(null);
+  const onCancelRef = useRef(onCancel);
+
+  onCancelRef.current = onCancel;
+
+  useEffect(() => {
+    if (!open) return;
+
+    const root = dialogRef.current;
+    if (!root) return;
+
+    const cancelButton = root.querySelector<HTMLButtonElement>("button");
+    cancelRef.current = cancelButton;
+    cancelButton?.focus();
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onCancelRef.current();
+        return;
+      }
+
+      if (event.key !== "Tab") return;
+
+      const buttons = Array.from(root.querySelectorAll<HTMLButtonElement>("button"));
+      if (buttons.length === 0) return;
+
+      const first = buttons[0];
+      const last = buttons[buttons.length - 1];
+      const active = document.activeElement;
+      const inside = active instanceof Node && root.contains(active);
+
+      if (event.shiftKey) {
+        if (!inside || active === first) {
+          event.preventDefault();
+          last.focus();
+        }
+      } else if (!inside || active === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      className={styles.overlay}
+      role="presentation"
+      onMouseDown={(event) => {
+        if (event.target === event.currentTarget) event.preventDefault();
+      }}
+    >
+      <div
+        ref={dialogRef}
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        aria-describedby={descriptionId}
+        className={`${styles.dialog} ${styles[size]}`}
+      >
+        <h2 id={titleId} className={styles.title}>
+          {title}
+        </h2>
+        <p id={descriptionId} className={styles.description}>
+          {description}
+        </p>
+        <div className={styles.footer}>
+          <ButtonGroup ariaLabel="Dialog actions">
+            <Button variant="secondary" size="md" onClick={onCancel}>
+              {cancelLabel}
+            </Button>
+            <Button variant={actionVariant} size="md" onClick={onAction}>
+              {actionLabel}
+            </Button>
+          </ButtonGroup>
+        </div>
+      </div>
+    </div>
+  );
+}

package/ui/AlertDialog/AlertDialog.types.ts

@@ -0,0 +1,14 @@
+export type AlertDialogSize = "sm" | "md";
+export type AlertDialogActionVariant = "primary" | "danger";
+
+export interface AlertDialogProps {
+  open: boolean;
+  title: string;
+  description: string;
+  cancelLabel?: string;
+  actionLabel: string;
+  actionVariant?: AlertDialogActionVariant;
+  size?: AlertDialogSize;
+  onCancel: () => void;
+  onAction: () => void;
+}

package/ui/AlertDialog/index.ts

@@ -0,0 +1,6 @@
+export { AlertDialog } from "./AlertDialog";
+export type {
+  AlertDialogProps,
+  AlertDialogSize,
+  AlertDialogActionVariant,
+} from "./AlertDialog.types";

package/ui/AppHeader/AppHeader.module.css

@@ -0,0 +1,120 @@
+.header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, var(--layout-rail)) minmax(0, 1fr);
+  align-items: center;
+  column-gap: var(--space-4);
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  min-height: calc(var(--space-10) + var(--space-2) + var(--space-2));
+  flex-shrink: 0;
+  padding: var(--space-2) var(--space-5);
+  border-bottom: var(--border-divider) solid var(--border-faint);
+  border-radius: var(--radius-0);
+  background: var(--surface-card);
+  color: var(--text-primary);
+}
+
+.radiusMd {
+  border: var(--border-surface) solid var(--border-faint);
+  border-radius: var(--radius-surface-md);
+  overflow: hidden;
+}
+
+.start {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  min-width: 0;
+  justify-self: start;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  max-height: var(--space-8);
+  overflow: hidden;
+}
+
+.mark {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: var(--space-8);
+  height: var(--space-8);
+  margin: 0;
+  border-radius: var(--radius-control-md);
+  background: var(--fill-brand);
+  color: var(--brand-on-brand);
+  font-family: var(--font-sans);
+  font-size: var(--type-size-label);
+  font-weight: var(--type-weight-label);
+  line-height: 1;
+}
+
+.title {
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  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);
+}
+
+.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-width: 0;
+}
+
+.search {
+  width: 100%;
+  min-width: 0;
+}
+
+.end {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-1);
+  min-width: 0;
+  justify-self: end;
+}
+
+.header[data-search="false"] {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+@media (max-width: 40rem) {
+  .header {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+      "start end"
+      "search search";
+    row-gap: var(--space-2);
+    padding: var(--space-2) var(--space-4);
+  }
+
+  .header[data-search="false"] {
+    grid-template-areas: "start end";
+  }
+
+  .start {
+    grid-area: start;
+  }
+
+  .center {
+    grid-area: search;
+  }
+
+  .end {
+    grid-area: end;
+  }
+}

package/ui/AppHeader/AppHeader.tsx

@@ -0,0 +1,70 @@
+import { useId } from "react";
+import { Input } from "../Input";
+import type { AppHeaderProps } from "./AppHeader.types";
+import styles from "./AppHeader.module.css";
+
+export type { AppHeaderProps, AppHeaderRadius } from "./AppHeader.types";
+
+export function AppHeader({
+  title,
+  mark,
+  logo,
+  search = true,
+  searchPlaceholder = "Search",
+  searchValue,
+  defaultSearchValue,
+  onSearch,
+  searchShortcut,
+  searchId,
+  actions,
+  className = "",
+  ariaLabel,
+  radius = "none",
+}: AppHeaderProps) {
+  const generatedId = useId();
+  const inputId = searchId ?? generatedId;
+  const markLetter = (mark && mark.length > 0 ? mark : title?.charAt(0)) || "·";
+  const label = ariaLabel ?? title ?? "Application";
+
+  return (
+    <header
+      className={`${styles.header} ${radius === "md" ? styles.radiusMd : ""} ${className}`.trim()}
+      aria-label={label}
+      data-search={search ? undefined : "false"}
+    >
+      <div className={styles.start}>
+        {logo ? (
+          <div className={styles.logo}>{logo}</div>
+        ) : (
+          <span className={styles.mark} aria-hidden>
+            {markLetter}
+          </span>
+        )}
+        {title ? <p className={styles.title}>{title}</p> : null}
+      </div>
+
+      {search ? (
+        <div className={styles.center}>
+          <div className={styles.search}>
+            <Input
+              id={inputId}
+              type="search"
+              size="md"
+              placeholder={searchPlaceholder}
+              value={searchValue}
+              defaultValue={defaultSearchValue}
+              onChange={onSearch}
+              iconStart="Search"
+              end={searchShortcut}
+              ariaLabel={searchPlaceholder}
+            />
+          </div>
+        </div>
+      ) : null}
+
+      <div className={styles.end} role={actions ? "group" : undefined} aria-label={actions ? "Actions" : undefined}>
+        {actions}
+      </div>
+    </header>
+  );
+}

package/ui/AppHeader/AppHeader.types.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+
+export type AppHeaderRadius = "md" | "none";
+
+export interface AppHeaderProps {
+  /** Product name next to the mark. Ignored as a heading — this is chrome, not PageHeader. */
+  title?: string;
+  /** Brand letter. Defaults to the first character of title. Used when logo is omitted. */
+  mark?: string;
+  /** Custom mark or wordmark. Replaces the default letter mark. Pass the consumer’s logo here. */
+  logo?: ReactNode;
+  /** Show the centered kit Input. Default true. */
+  search?: boolean;
+  searchPlaceholder?: string;
+  searchValue?: string;
+  defaultSearchValue?: string;
+  /** Input onChange. */
+  onSearch?: (value: string) => void;
+  /** Decorative shortcut in the Input end slot, e.g. ⌘K. */
+  searchShortcut?: string;
+  searchId?: string;
+  /** Trailing kit Buttons (and optional Avatar). At most one primary. */
+  actions?: ReactNode;
+  className?: string;
+  ariaLabel?: string;
+  /** Bar corners. none is flush; md is radius-surface-md. */
+  radius?: AppHeaderRadius;
+}

package/ui/AppHeader/index.ts

@@ -0,0 +1,2 @@
+export { AppHeader } from "./AppHeader";
+export type { AppHeaderProps, AppHeaderRadius } from "./AppHeader.types";