agentic-ds-kit 0.1.0 → 0.2.0

package/ui/Chat/Chat.tsx

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

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

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

package/ui/Checkbox/Checkbox.tsx

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

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

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

package/ui/Collapsible/Collapsible.tsx

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

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

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

package/ui/Command/Command.tsx

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

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

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