agentic-ds-kit 0.1.0

package/ui/Chat/Chat.module.css

@@ -0,0 +1,149 @@
+.panel {
+  box-sizing: border-box;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto auto;
+  width: 100%;
+  min-block-size: 32rem;
+  block-size: 100%;
+  max-block-size: 100%;
+  overflow: hidden;
+  border: var(--border-width-thin) solid var(--border-faint);
+  border-radius: var(--radius-surface-lg);
+  background: var(--surface-card);
+  color: var(--text-primary);
+}
+
+.radiusNone {
+  border-radius: var(--radius-0);
+  border-block-width: 0;
+  border-inline-end-width: 0;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+  background: var(--fill-brand-subtle);
+}
+
+.identity {
+  flex: 1;
+  display: grid;
+  gap: var(--space-1);
+  min-width: 0;
+}
+
+.title {
+  margin: 0;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-label);
+  font-weight: var(--type-weight-heading);
+  color: var(--text-primary);
+}
+
+.status {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  font-family: var(--font-sans);
+  font-size: var(--type-size-caption);
+  color: var(--text-secondary);
+}
+
+.statusDot {
+  width: var(--space-1);
+  height: var(--space-1);
+  border-radius: var(--radius-full);
+  background: var(--status-success);
+}
+
+.headerActions {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+.thread {
+  display: grid;
+  align-content: start;
+  gap: var(--space-4);
+  min-block-size: 0;
+  padding: var(--space-4);
+  overflow-y: auto;
+}
+
+.empty {
+  margin: 0;
+  color: var(--text-muted);
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body-sm);
+}
+
+.message {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+}
+
+.messageUser {
+  justify-content: flex-end;
+}
+
+.messageAssistant {
+  justify-content: flex-start;
+}
+
+.mark {
+  flex: none;
+  width: var(--space-5);
+  height: var(--space-5);
+  border-radius: var(--radius-full);
+  background: var(--fill-brand);
+}
+
+.body {
+  display: grid;
+  gap: var(--space-1);
+  min-width: 0;
+  max-width: 85%;
+}
+
+.copy {
+  margin: 0;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body-sm);
+  line-height: var(--type-line-body);
+  color: var(--text-primary);
+}
+
+.messageUser .copy {
+  text-align: right;
+}
+
+.timestamp {
+  font-family: var(--font-sans);
+  font-size: var(--type-size-caption);
+  color: var(--text-muted);
+}
+
+.messageUser .timestamp {
+  text-align: right;
+}
+
+.suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  padding: 0 var(--space-4) var(--space-3);
+}
+
+.composer {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: var(--space-2);
+  align-items: center;
+  padding: var(--space-3) var(--space-4) var(--space-4);
+  border-top: var(--border-width-thin) solid var(--border-faint);
+}

package/ui/Chat/Chat.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import { useEffect, useId, useRef, useState } from "react";
+import { Button } from "../Button";
+import { DropdownMenu } from "../DropdownMenu";
+import { Input } from "../Input";
+import { ThinkingAnimation } from "../ThinkingAnimation";
+import type { ChatProps } from "./Chat.types";
+import styles from "./Chat.module.css";
+
+export type { ChatMessage, ChatMessageRole, ChatMenuItem, ChatProps, ChatRadius } from "./Chat.types";
+
+export function Chat({
+  title = "Assistant",
+  status,
+  messages = [],
+  suggestions = [],
+  placeholder = "How can we help you?",
+  emptyState = "Start a conversation.",
+  isThinking = false,
+  disabled = false,
+  value,
+  defaultValue = "",
+  onValueChange,
+  onSend,
+  onClose,
+  closeLabel = "Close",
+  menuItems = [],
+  menuLabel = "More",
+  radius = "lg",
+  className = "",
+}: ChatProps) {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const threadRef = useRef<HTMLDivElement>(null);
+  const inputId = useId();
+  const draft = value ?? internalValue;
+
+  useEffect(() => {
+    const thread = threadRef.current;
+    if (!thread) return;
+    thread.scrollTop = thread.scrollHeight;
+  }, [isThinking, messages.length]);
+
+  function updateDraft(nextValue: string) {
+    if (value === undefined) setInternalValue(nextValue);
+    onValueChange?.(nextValue);
+  }
+
+  function sendMessage(message = draft) {
+    const nextMessage = message.trim();
+    if (!nextMessage || disabled) return;
+    onSend?.(nextMessage);
+    updateDraft("");
+  }
+
+  return (
+    <section
+      className={`${styles.panel} ${radius === "none" ? styles.radiusNone : ""} ${className}`.trim()}
+      aria-label={title}
+    >
+      <header className={styles.header}>
+        <span className={styles.identity}>
+          <span className={styles.title}>{title}</span>
+          {status ? (
+            <span className={styles.status}>
+              <span className={styles.statusDot} aria-hidden="true" />
+              {status}
+            </span>
+          ) : null}
+        </span>
+        <div className={styles.headerActions}>
+          {menuItems.length > 0 ? (
+            <DropdownMenu
+              ariaLabel={menuLabel}
+              iconStart="MoreHorizontal"
+              variant="tertiary"
+              size="sm"
+              align="end"
+              groups={[
+                {
+                  items: menuItems.map((item, index) => ({
+                    id: item.id ?? `${item.label}-${index}`,
+                    label: item.label,
+                    danger: item.tone === "danger",
+                  })),
+                },
+              ]}
+              onSelect={(id) => {
+                const item = menuItems.find((entry, index) => (entry.id ?? `${entry.label}-${index}`) === id);
+                item?.onSelect?.();
+              }}
+            />
+          ) : null}
+          {onClose ? (
+            <Button type="button" variant="tertiary" size="sm" iconStart="X" ariaLabel={closeLabel} onClick={onClose} />
+          ) : null}
+        </div>
+      </header>
+
+      <div
+        ref={threadRef}
+        className={styles.thread}
+        role="log"
+        aria-label="Conversation"
+        aria-live="polite"
+        aria-busy={isThinking}
+      >
+        {messages.length === 0 && !isThinking ? <p className={styles.empty}>{emptyState}</p> : null}
+        {messages.map((message, index) => {
+          const isUser = message.role === "user";
+          return (
+            <article
+              key={message.id ?? index}
+              className={`${styles.message} ${isUser ? styles.messageUser : styles.messageAssistant}`}
+            >
+              {isUser ? null : <span className={styles.mark} aria-hidden="true" />}
+              <div className={styles.body}>
+                <p className={styles.copy}>{message.content}</p>
+                {message.timestamp ? <span className={styles.timestamp}>{message.timestamp}</span> : null}
+              </div>
+            </article>
+          );
+        })}
+        {isThinking ? (
+          <div className={`${styles.message} ${styles.messageAssistant}`}>
+            <span className={styles.mark} aria-hidden="true" />
+            <ThinkingAnimation label="Thinking" size="md" />
+          </div>
+        ) : null}
+      </div>
+
+      {suggestions.length > 0 ? (
+        <div className={styles.suggestions} aria-label="Suggested prompts">
+          {suggestions.map((suggestion) => (
+            <Button
+              key={suggestion}
+              type="button"
+              variant="tertiary"
+              size="sm"
+              disabled={disabled}
+              onClick={() => sendMessage(suggestion)}
+            >
+              {suggestion}
+            </Button>
+          ))}
+        </div>
+      ) : null}
+
+      <form
+        className={styles.composer}
+        onSubmit={(event) => {
+          event.preventDefault();
+          sendMessage();
+        }}
+      >
+        <Input
+          id={inputId}
+          value={draft}
+          placeholder={placeholder}
+          ariaLabel={placeholder}
+          disabled={disabled}
+          onChange={updateDraft}
+        />
+        <Button
+          type="submit"
+          variant="primary"
+          size="md"
+          ariaLabel="Send"
+          disabled={disabled || !draft.trim()}
+          iconStart="Send"
+        />
+      </form>
+    </section>
+  );
+}

package/ui/Chat/Chat.types.ts

@@ -0,0 +1,39 @@
+export type ChatMessageRole = "user" | "assistant";
+
+export interface ChatMessage {
+  id?: string;
+  role: ChatMessageRole;
+  content: string;
+  timestamp?: string;
+}
+
+export interface ChatMenuItem {
+  id?: string;
+  label: string;
+  tone?: "default" | "danger";
+  onSelect?: () => void;
+}
+
+export type ChatRadius = "lg" | "none";
+
+export interface ChatProps {
+  title?: string;
+  status?: string;
+  messages?: ChatMessage[];
+  suggestions?: string[];
+  placeholder?: string;
+  emptyState?: string;
+  isThinking?: boolean;
+  disabled?: boolean;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  onSend?: (message: string) => void;
+  onClose?: () => void;
+  closeLabel?: string;
+  menuItems?: ChatMenuItem[];
+  menuLabel?: string;
+  /** `lg` is the standalone card. `none` squares the panel and drops the outer block/end borders so Chat can sit flush in a workspace rail. */
+  radius?: ChatRadius;
+  className?: string;
+}

package/ui/Chat/index.ts

@@ -0,0 +1,2 @@
+export { Chat } from "./Chat";
+export type { ChatMessage, ChatMessageRole, ChatMenuItem, ChatProps, ChatRadius } from "./Chat.types";

package/ui/Checkbox/Checkbox.module.css

@@ -0,0 +1,135 @@
+.label {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  cursor: pointer;
+  font-family: var(--font-sans);
+  font-weight: var(--type-weight-body);
+  color: var(--text-primary);
+}
+
+.label[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.input {
+  appearance: none;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+
+.label[data-disabled] .input {
+  cursor: not-allowed;
+}
+
+.box {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  border: var(--border-width-thin) solid var(--border-strong);
+  border-radius: var(--radius-control-sm);
+  background-color: var(--surface-card);
+  color: var(--action-on-primary);
+  transition:
+    border-color var(--motion-interaction-duration) var(--motion-interaction-easing),
+    background var(--motion-interaction-duration) var(--motion-interaction-easing),
+    color var(--motion-interaction-duration) var(--motion-interaction-easing);
+}
+
+.icon {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0.12rem;
+  transform-origin: center;
+  transform: scale(0);
+  opacity: 0;
+  transition:
+    transform var(--motion-expand-duration) var(--motion-ease-spring),
+    opacity var(--motion-interaction-duration) var(--motion-interaction-easing);
+}
+
+.sm {
+  font-size: var(--type-size-caption);
+}
+
+.md {
+  font-size: var(--type-size-body-sm);
+}
+
+.lg {
+  font-size: var(--type-size-body);
+}
+
+.sm .input,
+.sm .box {
+  width: 1rem;
+  height: 1rem;
+}
+
+.md .input,
+.md .box {
+  width: 1.15rem;
+  height: 1.15rem;
+}
+
+.lg .input,
+.lg .box {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.input:checked + .box,
+.input:indeterminate + .box {
+  background-color: var(--action-primary);
+  border-color: var(--action-primary);
+}
+
+.input:checked + .box .icon,
+.input:indeterminate + .box .icon {
+  transform: scale(1);
+  opacity: 1;
+}
+
+.label[data-error] .box {
+  border-color: var(--status-danger);
+}
+
+.label[data-error] .input:checked + .box,
+.label[data-error] .input:indeterminate + .box {
+  background-color: var(--action-primary);
+  border-color: var(--status-danger);
+}
+
+.input:focus-visible + .box {
+  outline: var(--border-focus-width) solid var(--focus-ring);
+  outline-offset: var(--space-inset-2xs);
+}
+
+.text {
+  line-height: var(--type-line-body);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .box,
+  .icon {
+    transition: none;
+  }
+
+  .input:checked + .box .icon,
+  .input:indeterminate + .box .icon {
+    transform: none;
+  }
+}

package/ui/Checkbox/Checkbox.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Check, Minus } from "lucide-react";
+import type { CheckboxProps } from "./Checkbox.types";
+import styles from "./Checkbox.module.css";
+
+export type { CheckboxProps, CheckboxSize } from "./Checkbox.types";
+
+const ICON_SIZE = { sm: 12, md: 14, lg: 16 } as const;
+
+export function Checkbox({
+  id,
+  label,
+  ariaLabel,
+  size = "md",
+  disabled = false,
+  error = false,
+  checked,
+  defaultChecked = false,
+  indeterminate = false,
+  onChange,
+  name,
+}: CheckboxProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const isControlled = typeof checked === "boolean";
+  const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked);
+  const isChecked = isControlled ? checked : uncontrolledChecked;
+  const iconPx = ICON_SIZE[size];
+
+  useEffect(() => {
+    const el = inputRef.current;
+    if (el) el.indeterminate = Boolean(indeterminate);
+  }, [indeterminate]);
+
+  return (
+    <label
+      className={`${styles.label} ${styles[size]}`}
+      htmlFor={id}
+      data-disabled={disabled || undefined}
+      data-error={error || undefined}
+    >
+      <input
+        ref={inputRef}
+        className={styles.input}
+        type="checkbox"
+        id={id}
+        name={name}
+        disabled={disabled}
+        checked={isControlled ? checked : undefined}
+        defaultChecked={isControlled ? undefined : defaultChecked}
+        onChange={(event) => {
+          if (!isControlled) setUncontrolledChecked(event.target.checked);
+          onChange?.(event.target.checked);
+        }}
+        aria-label={label ? undefined : ariaLabel}
+        aria-invalid={error || undefined}
+        aria-checked={indeterminate ? "mixed" : undefined}
+      />
+      <span className={styles.box} aria-hidden>
+        {indeterminate ? (
+          <Minus className={styles.icon} size={iconPx} strokeWidth={2.5} color="currentColor" />
+        ) : isChecked ? (
+          <Check className={styles.icon} size={iconPx} strokeWidth={2.5} color="currentColor" />
+        ) : null}
+      </span>
+      {label ? <span className={styles.text}>{label}</span> : null}
+    </label>
+  );
+}

package/ui/Checkbox/Checkbox.types.ts

@@ -0,0 +1,15 @@
+export type CheckboxSize = "sm" | "md" | "lg";
+
+export interface CheckboxProps {
+  id: string;
+  label?: string;
+  ariaLabel?: string;
+  size?: CheckboxSize;
+  disabled?: boolean;
+  error?: boolean;
+  checked?: boolean;
+  defaultChecked?: boolean;
+  indeterminate?: boolean;
+  onChange?: (checked: boolean) => void;
+  name?: string;
+}

package/ui/Checkbox/index.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from "./Checkbox";
+export type { CheckboxProps, CheckboxSize } from "./Checkbox.types";

package/ui/Collapsible/Collapsible.module.css

@@ -0,0 +1,68 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  padding: var(--space-4);
+  gap: var(--space-3);
+  background-color: var(--surface-muted);
+  border: var(--border-width-thin) solid var(--border-faint);
+  border-radius: var(--radius-surface-md);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  min-width: 0;
+}
+
+.title {
+  min-width: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body);
+  font-weight: var(--type-weight-heading);
+  color: var(--text-primary);
+}
+
+.toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin: 0;
+  padding: var(--space-2);
+  color: var(--icon-muted);
+  background-color: var(--surface-card);
+  border: var(--border-width-thin) solid var(--border-faint);
+  border-radius: var(--radius-control-sm);
+  cursor: pointer;
+}
+
+.toggle:focus-visible {
+  outline: var(--border-focus-width) solid var(--focus-ring);
+  outline-offset: var(--space-inset-2xs);
+}
+
+.panel {
+  min-width: 0;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-width: 0;
+  margin: 0;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body-sm);
+  line-height: var(--type-line-body);
+  color: var(--text-primary);
+}
+
+.body p {
+  margin: 0;
+}