agentic-ds-kit 0.1.0

package/ui/Drawer/Drawer.module.css

@@ -0,0 +1,204 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-overlay);
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  padding: var(--space-4);
+  background-color: var(--surface-overlay);
+  animation: overlayEnter var(--motion-overlay-duration) var(--motion-overlay-easing);
+}
+
+.panel {
+  position: relative;
+  z-index: var(--z-modal);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background-color: var(--surface-elevated);
+  border: var(--border-width-thin) solid var(--border-faint);
+  border-radius: var(--radius-surface-lg);
+  box-shadow: var(--shadow-md);
+  animation-duration: var(--motion-modal-duration);
+  animation-timing-function: var(--motion-modal-easing);
+  animation-fill-mode: both;
+}
+
+.right {
+  margin-left: auto;
+  width: min(24rem, 100%);
+  max-height: 100%;
+  animation-name: enterRight;
+}
+
+.left {
+  margin-right: auto;
+  width: min(24rem, 100%);
+  max-height: 100%;
+  animation-name: enterLeft;
+}
+
+.bottom {
+  align-self: flex-end;
+  margin-inline: auto;
+  width: min(24rem, 100%);
+  max-height: 100%;
+  background-color: var(--surface-card);
+  animation-name: enterBottom;
+}
+
+.top {
+  align-self: flex-start;
+  width: 100%;
+  max-height: 100%;
+  animation-name: enterTop;
+}
+
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+  flex-shrink: 0;
+  padding: var(--space-4) var(--space-6);
+}
+
+.bottom .header {
+  padding: var(--space-6) var(--space-6) var(--space-4);
+}
+
+.copy {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  min-width: 0;
+  flex: 1;
+}
+
+.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: 0;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body);
+  line-height: var(--type-line-body);
+  color: var(--text-muted);
+}
+
+.close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  margin: 0;
+  padding: 0;
+  color: var(--icon-muted);
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-control-sm);
+  cursor: pointer;
+}
+
+.close:hover {
+  background-color: var(--surface-muted);
+  color: var(--text-primary);
+}
+
+.close:focus-visible {
+  outline: var(--border-focus-width) solid var(--focus-ring);
+  outline-offset: var(--space-inset-2xs);
+}
+
+.body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--space-6);
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body);
+  line-height: var(--type-line-body);
+  color: var(--text-primary);
+}
+
+.bottom .body {
+  padding: var(--space-2) var(--space-6) var(--space-4);
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  flex-shrink: 0;
+  padding: var(--space-4) var(--space-6);
+  border-top: var(--border-width-thin) solid var(--border-faint);
+}
+
+.left .footer,
+.right .footer,
+.bottom .footer {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--space-3);
+}
+
+.bottom .footer {
+  padding: var(--space-4) var(--space-6) var(--space-6);
+  border-top: 0;
+}
+
+@keyframes overlayEnter {
+  from {
+    opacity: var(--opacity-0);
+  }
+  to {
+    opacity: var(--opacity-full);
+  }
+}
+
+@keyframes enterRight {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes enterLeft {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes enterBottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes enterTop {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}

package/ui/Drawer/Drawer.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { useEffect, useId, useRef } from "react";
+import { LucideByName } from "../Button/lucideName";
+import type { DrawerProps } from "./Drawer.types";
+import styles from "./Drawer.module.css";
+
+export type { DrawerProps, DrawerSide } from "./Drawer.types";
+
+const FOCUSABLE = "a, button, input, select, textarea, [tabindex]:not([tabindex='-1'])";
+
+export function Drawer({
+  open,
+  title,
+  description,
+  side = "right",
+  showClose = true,
+  onClose,
+  children,
+  footer,
+}: DrawerProps) {
+  const titleId = useId();
+  const descriptionId = useId();
+  const panelRef = useRef<HTMLDivElement>(null);
+  const onCloseRef = useRef(onClose);
+
+  onCloseRef.current = onClose;
+
+  useEffect(() => {
+    if (!open) return;
+
+    const root = panelRef.current;
+    if (!root) return;
+
+    const getFocusable = () => Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE));
+    const firstFocusable = getFocusable()[0];
+    (firstFocusable ?? root).focus();
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onCloseRef.current();
+        return;
+      }
+
+      if (event.key !== "Tab") return;
+
+      const items = getFocusable();
+      if (items.length === 0) return;
+
+      const first = items[0];
+      const last = items[items.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) onClose();
+      }}
+    >
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        aria-describedby={description ? descriptionId : undefined}
+        className={`${styles.panel} ${styles[side]}`}
+        tabIndex={-1}
+      >
+        <header className={styles.header}>
+          <div className={styles.copy}>
+            <h2 id={titleId} className={styles.title}>
+              {title}
+            </h2>
+            {description ? (
+              <p id={descriptionId} className={styles.description}>
+                {description}
+              </p>
+            ) : null}
+          </div>
+          {showClose ? (
+            <button type="button" className={styles.close} onClick={onClose} aria-label="Close">
+              <LucideByName name="X" size={16} />
+            </button>
+          ) : null}
+        </header>
+        <div className={styles.body}>{children}</div>
+        {footer ? <div className={styles.footer}>{footer}</div> : null}
+      </div>
+    </div>
+  );
+}

package/ui/Drawer/Drawer.types.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+
+export type DrawerSide = "right" | "left" | "bottom" | "top";
+
+export interface DrawerProps {
+  open: boolean;
+  title: string;
+  description?: string;
+  side?: DrawerSide;
+  showClose?: boolean;
+  onClose: () => void;
+  children: ReactNode;
+  footer?: ReactNode;
+}

package/ui/Drawer/index.ts

@@ -0,0 +1,2 @@
+export { Drawer } from "./Drawer";
+export type { DrawerProps, DrawerSide } from "./Drawer.types";

package/ui/DropdownMenu/DropdownMenu.module.css

@@ -0,0 +1,319 @@
+.root {
+  position: relative;
+  display: inline-flex;
+}
+
+.rootField {
+  display: block;
+  width: 100%;
+}
+
+.panel {
+  position: fixed;
+  z-index: var(--z-overlay);
+  min-width: 13.5rem;
+  padding: var(--space-1);
+  background-color: var(--surface-card);
+  border: var(--border-surface) solid var(--border-faint);
+  border-radius: var(--radius-surface-sm);
+  box-shadow: var(--shadow-sm);
+}
+
+.panelColumns {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-1);
+  min-width: 28rem;
+  padding: var(--space-2);
+}
+
+.panelColumns .group {
+  display: contents;
+}
+
+.panelColumns .heading {
+  grid-column: 1 / -1;
+}
+
+.panelColumns .group + .group {
+  margin-top: 0;
+  padding-top: 0;
+  border-top: 0;
+}
+
+.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) var(--space-3);
+  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;
+  text-decoration: none;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.itemWithDescription {
+  align-items: flex-start;
+}
+
+.item:hover:not([aria-disabled="true"]),
+.itemHighlighted {
+  background-color: var(--surface-muted);
+}
+
+.item:focus-visible {
+  outline: var(--border-focus-width) solid var(--focus-ring);
+  outline-offset: calc(-1 * var(--border-focus-width));
+}
+
+.itemDisabled {
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+}
+
+.itemDanger {
+  color: var(--text-danger);
+}
+
+.itemIcon,
+.itemChevron {
+  flex-shrink: 0;
+  color: var(--icon-muted);
+}
+
+.itemDanger .itemIcon {
+  color: var(--text-danger);
+}
+
+.itemText {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.itemLabel {
+  color: var(--text-primary);
+  overflow-wrap: anywhere;
+}
+
+.itemDanger .itemLabel {
+  color: var(--text-danger);
+}
+
+.itemDescription {
+  font-family: var(--font-sans);
+  font-size: var(--type-size-caption);
+  font-weight: var(--type-weight-body);
+  line-height: var(--type-line-body);
+  color: var(--text-muted);
+  overflow-wrap: anywhere;
+}
+
+.shortcut {
+  flex-shrink: 0;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-caption);
+  font-weight: var(--type-weight-caption);
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+}
+
+.fieldTrigger {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  width: 100%;
+  margin: 0;
+  border: var(--border-width-thin) solid var(--border-faint);
+  background-color: var(--surface-card);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-weight: var(--type-weight-body);
+  line-height: var(--type-line-body);
+  text-align: left;
+  cursor: pointer;
+}
+
+.fieldTrigger:hover:not(:disabled) {
+  border-color: var(--border-strong);
+}
+
+.fieldTrigger:focus-visible {
+  border-color: var(--border-focus);
+  outline: var(--border-focus-width) solid var(--focus-ring);
+  outline-offset: var(--space-inset-2xs);
+}
+
+.fieldsm {
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-control-sm);
+  font-size: var(--type-size-label);
+}
+
+.fieldmd {
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-control-md);
+  font-size: var(--type-size-body-sm);
+}
+
+.fieldlg {
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-control-lg);
+  font-size: var(--type-size-body);
+}
+
+.fieldError {
+  border-color: var(--status-danger);
+}
+
+.fieldError:hover:not(:disabled),
+.fieldError:focus-visible {
+  border-color: var(--status-danger);
+  outline-color: var(--status-danger);
+}
+
+.fieldTrigger:disabled {
+  cursor: not-allowed;
+  color: var(--text-disabled);
+  background-color: var(--surface-disabled);
+  border-color: var(--border-disabled);
+}
+
+.fieldMain {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+  flex: 1;
+}
+
+.fieldLabel {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fieldIcon {
+  flex-shrink: 0;
+  color: var(--icon-muted);
+}
+
+.navTrigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  height: 2.25rem;
+  margin: 0;
+  padding-inline: var(--space-3);
+  border: 0;
+  border-radius: var(--radius-control-md);
+  background: transparent;
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body-sm);
+  font-weight: var(--type-weight-label);
+  line-height: var(--type-line-body);
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.navTrigger:hover:not(:disabled),
+.navTrigger[aria-expanded="true"],
+.navOpen {
+  background-color: var(--surface-muted);
+}
+
+.navTrigger:focus-visible {
+  outline: var(--border-focus-width) solid var(--focus-ring);
+  outline-offset: var(--space-inset-2xs);
+}
+
+.navTrigger:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+}
+
+.navChevron {
+  flex-shrink: 0;
+  color: var(--icon-muted);
+  transition: transform var(--motion-interaction-duration) var(--motion-interaction-easing);
+}
+
+.navTrigger[aria-expanded="true"] .navChevron,
+.navOpen .navChevron {
+  transform: rotate(180deg);
+}
+
+.itemCheck {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  color: var(--text-primary);
+}
+
+.fieldMuted .fieldMain {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+  flex: 1;
+}
+
+.fieldLabel {
+  color: var(--text-muted);
+}
+
+.itemCheckbox {
+  display: inline-flex;
+  flex-shrink: 0;
+  pointer-events: none;
+}
+
+.search {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding: var(--space-1);
+  margin: calc(var(--space-1) * -1) calc(var(--space-1) * -1) var(--space-1);
+  background-color: var(--surface-card);
+}
+
+.empty {
+  padding: var(--space-3) var(--space-2);
+  color: var(--text-muted);
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body-sm);
+}
+
+.panelSearchable {
+  max-height: min(24rem, calc(100vh - 2rem));
+  overflow-y: auto;
+}