agentic-ds-kit 0.1.0 → 0.2.0

package/ui/SideNav/SideNav.tsx

@@ -1,222 +0,0 @@
-"use client";
-
-import { useId, useState } from "react";
-import { Button } from "../Button";
-import { LucideByName } from "../Button/lucideName";
-import type { SideNavItem, SideNavProps } from "./SideNav.types";
-import styles from "./SideNav.module.css";
-
-export type {
-  SideNavGroup,
-  SideNavItem,
-  SideNavProps,
-  SideNavRadius,
-  SideNavSide,
-} from "./SideNav.types";
-
-const ICON_SIZE = 16;
-
-function ItemBody({
-  item,
-  expanded,
-}: {
-  item: SideNavItem;
-  expanded?: boolean;
-}) {
-  const nested = Boolean(item.items && item.items.length > 0);
-
-  return (
-    <>
-      {item.icon ? (
-        <span className={styles.icon} aria-hidden>
-          <LucideByName name={item.icon} size={ICON_SIZE} />
-        </span>
-      ) : null}
-      <span className={styles.label}>{item.label}</span>
-      {item.badge || nested ? (
-        <span className={styles.meta}>
-          {item.badge ? <span className={styles.badge}>{item.badge}</span> : null}
-          {nested ? (
-            <span className={`${styles.chevron} ${expanded ? styles.chevronOpen : ""}`}>
-              <LucideByName name="ChevronRight" size={ICON_SIZE} />
-            </span>
-          ) : null}
-        </span>
-      ) : null}
-    </>
-  );
-}
-
-function NavItem({ item, rail }: { item: SideNavItem; rail: boolean }) {
-  const nested = Boolean(item.items && item.items.length > 0);
-  const submenuId = useId();
-  const [expanded, setExpanded] = useState(nested);
-
-  const className = [
-    styles.item,
-    item.active ? styles.itemActive : "",
-    item.disabled ? styles.itemDisabled : "",
-  ]
-    .filter(Boolean)
-    .join(" ");
-
-  if (nested) {
-    return (
-      <li className={styles.entry}>
-        <button
-          type="button"
-          className={className}
-          disabled={item.disabled}
-          aria-expanded={expanded}
-          aria-controls={submenuId}
-          aria-current={item.active ? "page" : undefined}
-          onClick={() => {
-            if (!rail) setExpanded((current) => !current);
-          }}
-        >
-          <ItemBody item={item} expanded={expanded} />
-        </button>
-        {expanded && !rail ? (
-          <ul className={styles.submenu} id={submenuId}>
-            {item.items!.map((child) => (
-              <NavItem key={child.id} item={child} rail={rail} />
-            ))}
-          </ul>
-        ) : null}
-      </li>
-    );
-  }
-
-  if (item.onClick && !item.disabled) {
-    return (
-      <li className={styles.entry}>
-        <button
-          type="button"
-          className={className}
-          aria-current={item.active ? "page" : undefined}
-          onClick={item.onClick}
-        >
-          <ItemBody item={item} />
-        </button>
-      </li>
-    );
-  }
-
-  if (item.href && !item.disabled) {
-    return (
-      <li className={styles.entry}>
-        <a
-          href={item.href}
-          className={className}
-          aria-current={item.active ? "page" : undefined}
-        >
-          <ItemBody item={item} />
-        </a>
-      </li>
-    );
-  }
-
-  return (
-    <li className={styles.entry}>
-      <button
-        type="button"
-        className={className}
-        disabled={item.disabled}
-        aria-current={item.active ? "page" : undefined}
-      >
-        <ItemBody item={item} />
-      </button>
-    </li>
-  );
-}
-
-function NavList({ items, rail }: { items: SideNavItem[]; rail: boolean }) {
-  return (
-    <ul className={styles.list}>
-      {items.map((item) => (
-        <NavItem key={item.id} item={item} rail={rail} />
-      ))}
-    </ul>
-  );
-}
-
-export function SideNav({
-  title,
-  mark,
-  showHeader = true,
-  radius = "md",
-  open: openProp,
-  defaultOpen = true,
-  onOpenChange,
-  side = "left",
-  groups,
-  items = [],
-  footer,
-}: SideNavProps) {
-  const isControlled = typeof openProp === "boolean";
-  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
-  const expanded = showHeader ? (isControlled ? openProp : uncontrolledOpen) : true;
-  const useGroups = Boolean(groups && groups.length > 0);
-  const markLetter = (mark && mark.length > 0 ? mark : title.charAt(0)) || "·";
-
-  function setOpen(next: boolean) {
-    if (!isControlled) setUncontrolledOpen(next);
-    onOpenChange?.(next);
-  }
-
-  return (
-    <aside
-      className={`${styles.root} ${radius === "none" ? styles.radiusNone : ""} ${expanded ? "" : styles.rootClosed}`.trim()}
-      aria-label={title}
-      data-side={side}
-    >
-      {showHeader ? (
-        <header className={styles.header}>
-          {expanded ? (
-            <span className={styles.mark} aria-hidden>
-              {markLetter}
-            </span>
-          ) : (
-            <button
-              type="button"
-              className={`${styles.mark} ${styles.markButton}`}
-              aria-label="Open"
-              onClick={() => setOpen(true)}
-            >
-              {markLetter}
-            </button>
-          )}
-          <p className={styles.title}>{title}</p>
-          {expanded ? (
-            <span className={styles.close}>
-              <Button
-                variant="tertiary"
-                size="sm"
-                iconStart={side === "right" ? "PanelRightClose" : "PanelLeftClose"}
-                ariaLabel="Close"
-                onClick={() => setOpen(false)}
-              />
-            </span>
-          ) : null}
-        </header>
-      ) : null}
-
-      <nav className={styles.nav} aria-label={title}>
-        {useGroups
-          ? groups!.map((group) => (
-              <div key={group.label} className={styles.section}>
-                <p className={styles.sectionLabel}>{group.label}</p>
-                <NavList items={group.items} rail={!expanded} />
-              </div>
-            ))
-          : <NavList items={items} rail={!expanded} />}
-      </nav>
-
-      {footer ? (
-        <div className={styles.footer}>
-          <NavList items={Array.isArray(footer) ? footer : [footer]} rail={!expanded} />
-        </div>
-      ) : null}
-    </aside>
-  );
-}

package/ui/SideNav/SideNav.types.ts

@@ -1,42 +0,0 @@
-export type SideNavSide = "left" | "right";
-
-export type SideNavRadius = "md" | "none";
-
-export interface SideNavItem {
-  id: string;
-  label: string;
-  href?: string;
-  /** In-app select. When set, the leaf is a button and href is not used. */
-  onClick?: () => void;
-  /** Lucide name, via LucideByName from @/ui/Button/lucideName */
-  icon?: string;
-  active?: boolean;
-  disabled?: boolean;
-  badge?: string;
-  /** One nested submenu level. */
-  items?: SideNavItem[];
-}
-
-export interface SideNavGroup {
-  label: string;
-  items: SideNavItem[];
-}
-
-export interface SideNavProps {
-  title: string;
-  /** Brand letter; default first char of title. */
-  mark?: string;
-  /** Brand header and close. Default true. Set false when AppHeader already provides brand. */
-  showHeader?: boolean;
-  /** Rail corners. Default md. Use none when SideNav is flush in an app shell. */
-  radius?: SideNavRadius;
-  open?: boolean;
-  defaultOpen?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  side?: SideNavSide;
-  groups?: SideNavGroup[];
-  /** Flat list if no groups. */
-  items?: SideNavItem[];
-  /** Footer rows. One or many. */
-  footer?: SideNavItem | SideNavItem[];
-}

package/ui/SideNav/index.ts

@@ -1,8 +0,0 @@
-export { SideNav } from "./SideNav";
-export type {
-  SideNavProps,
-  SideNavRadius,
-  SideNavSide,
-  SideNavItem,
-  SideNavGroup,
-} from "./SideNav.types";

package/ui/Slider/Slider.tsx

@@ -1,187 +0,0 @@
-"use client";
-
-import { useCallback, useRef, type KeyboardEvent, type PointerEvent } from "react";
-import type { SliderProps } from "./Slider.types";
-import styles from "./Slider.module.css";
-
-export type { SliderProps, SliderOrientation } from "./Slider.types";
-
-function clampValue(value: number, min: number, max: number, step: number): number {
-  if (!Number.isFinite(value)) return min;
-  const span = max - min;
-  if (span <= 0) return min;
-  const steps = Math.round((value - min) / step);
-  const snapped = min + steps * step;
-  return Math.min(max, Math.max(min, snapped));
-}
-
-function toPercent(value: number, min: number, max: number): number {
-  if (max <= min) return 0;
-  return ((value - min) / (max - min)) * 100;
-}
-
-function nearestThumbIndex(values: number[], target: number): number {
-  if (values.length <= 1) return 0;
-  let best = 0;
-  let bestDist = Math.abs(values[0] - target);
-  for (let i = 1; i < values.length; i += 1) {
-    const dist = Math.abs(values[i] - target);
-    if (dist < bestDist) {
-      best = i;
-      bestDist = dist;
-    }
-  }
-  return best;
-}
-
-export function Slider({
-  value,
-  min = 0,
-  max = 100,
-  step = 1,
-  orientation = "horizontal",
-  disabled = false,
-  onValueChange,
-}: SliderProps) {
-  const trackRef = useRef<HTMLDivElement>(null);
-  const values = Array.isArray(value) ? value : [value];
-  const isVertical = orientation === "vertical";
-  const isRange = Array.isArray(value);
-
-  const commit = useCallback(
-    (index: number, next: number) => {
-      if (disabled || !onValueChange) return;
-      const clamped = clampValue(next, min, max, step);
-      if (isRange) {
-        const copy = [...(value as number[])];
-        copy[index] = clamped;
-        if (copy.length === 2) {
-          if (index === 0 && copy[0] > copy[1]) copy[0] = copy[1];
-          if (index === 1 && copy[1] < copy[0]) copy[1] = copy[0];
-        }
-        onValueChange(copy);
-      } else {
-        onValueChange(clamped);
-      }
-    },
-    [disabled, isRange, max, min, onValueChange, step, value],
-  );
-
-  const pointerToValue = useCallback(
-    (clientX: number, clientY: number) => {
-      const track = trackRef.current;
-      if (!track) return min;
-      const rect = track.getBoundingClientRect();
-      const ratio = isVertical
-        ? 1 - (clientY - rect.top) / rect.height
-        : (clientX - rect.left) / rect.width;
-      const raw = min + Math.min(1, Math.max(0, ratio)) * (max - min);
-      return clampValue(raw, min, max, step);
-    },
-    [isVertical, min, max, step],
-  );
-
-  const onTrackPointerDown = (event: PointerEvent<HTMLDivElement>) => {
-    if (disabled) return;
-    const target = pointerToValue(event.clientX, event.clientY);
-    const index = nearestThumbIndex(values, target);
-    commit(index, target);
-    event.currentTarget.setPointerCapture(event.pointerId);
-  };
-
-  const onTrackPointerMove = (event: PointerEvent<HTMLDivElement>) => {
-    if (!event.currentTarget.hasPointerCapture(event.pointerId) || disabled) return;
-    const target = pointerToValue(event.clientX, event.clientY);
-    const index = nearestThumbIndex(values, target);
-    commit(index, target);
-  };
-
-  const onThumbKeyDown = (index: number, event: KeyboardEvent<HTMLSpanElement>) => {
-    if (disabled) return;
-    const current = values[index];
-    let next = current;
-    const big = step * 10;
-
-    switch (event.key) {
-      case "ArrowRight":
-      case "ArrowUp":
-        next = current + step;
-        break;
-      case "ArrowLeft":
-      case "ArrowDown":
-        next = current - step;
-        break;
-      case "PageUp":
-        next = current + big;
-        break;
-      case "PageDown":
-        next = current - big;
-        break;
-      case "Home":
-        next = min;
-        break;
-      case "End":
-        next = max;
-        break;
-      default:
-        return;
-    }
-
-    event.preventDefault();
-    commit(index, next);
-  };
-
-  const sorted = [...values].sort((a, b) => a - b);
-  const fillStart = toPercent(sorted[0], min, max);
-  const fillEnd = toPercent(sorted[sorted.length - 1], min, max);
-
-  const fillStyle = isVertical
-    ? { bottom: `${fillStart}%`, height: `${fillEnd - fillStart}%` }
-    : { left: `${fillStart}%`, width: `${fillEnd - fillStart}%` };
-
-  return (
-    <div
-      className={`${styles.root} ${styles[orientation]}${disabled ? ` ${styles.disabled}` : ""}`}
-    >
-      <div
-        ref={trackRef}
-        className={styles.track}
-        onPointerDown={onTrackPointerDown}
-        onPointerMove={onTrackPointerMove}
-      >
-        <div className={styles.fill} style={fillStyle} aria-hidden />
-        {values.map((thumbValue, index) => {
-          const percent = toPercent(thumbValue, min, max);
-          const thumbStyle = isVertical
-            ? { bottom: `${percent}%` }
-            : { left: `${percent}%` };
-
-          return (
-            <span
-              key={index}
-              role="slider"
-              className={styles.thumb}
-              tabIndex={disabled ? -1 : 0}
-              aria-valuemin={min}
-              aria-valuemax={max}
-              aria-valuenow={thumbValue}
-              aria-orientation={orientation}
-              aria-disabled={disabled || undefined}
-              style={thumbStyle}
-              onKeyDown={(event) => onThumbKeyDown(index, event)}
-              onPointerDown={(event) => {
-                event.stopPropagation();
-                if (disabled) return;
-                event.currentTarget.setPointerCapture(event.pointerId);
-              }}
-              onPointerMove={(event) => {
-                if (!event.currentTarget.hasPointerCapture(event.pointerId) || disabled) return;
-                commit(index, pointerToValue(event.clientX, event.clientY));
-              }}
-            />
-          );
-        })}
-      </div>
-    </div>
-  );
-}

package/ui/Slider/Slider.types.ts

@@ -1,11 +0,0 @@
-export type SliderOrientation = "horizontal" | "vertical";
-
-export interface SliderProps {
-  value: number | number[];
-  min?: number;
-  max?: number;
-  step?: number;
-  orientation?: SliderOrientation;
-  disabled?: boolean;
-  onValueChange?: (value: number | number[]) => void;
-}

package/ui/Slider/index.ts

@@ -1,2 +0,0 @@
-export { Slider } from "./Slider";
-export type { SliderProps, SliderOrientation } from "./Slider.types";

package/ui/Spinner/Spinner.tsx

@@ -1,19 +0,0 @@
-import { Loader } from "lucide-react";
-import type { SpinnerProps } from "./Spinner.types";
-import styles from "./Spinner.module.css";
-
-export type { SpinnerProps, SpinnerSize } from "./Spinner.types";
-
-export function Spinner({ size = "md", label }: SpinnerProps) {
-  return (
-    <span
-      className={`${styles.root} ${styles[size]}`}
-      role="status"
-      aria-live="polite"
-      aria-label={label ? undefined : "Loading"}
-    >
-      <Loader className={styles.icon} strokeWidth={2} aria-hidden />
-      {label ? <span className={styles.label}>{label}</span> : null}
-    </span>
-  );
-}

package/ui/Spinner/index.ts

@@ -1,2 +0,0 @@
-export { Spinner } from "./Spinner";
-export type { SpinnerProps, SpinnerSize } from "./Spinner.types";

package/ui/Switch/Switch.tsx

@@ -1,65 +0,0 @@
-"use client";
-
-import { useId, useState } from "react";
-import type { SwitchProps } from "./Switch.types";
-import styles from "./Switch.module.css";
-
-export type { SwitchProps, SwitchSize } from "./Switch.types";
-
-export function Switch({
-  id,
-  label,
-  ariaLabel,
-  size = "md",
-  disabled = false,
-  checked,
-  defaultChecked = false,
-  onChange,
-}: SwitchProps) {
-  const generatedId = useId();
-  const switchId = id ?? generatedId;
-  const isControlled = typeof checked === "boolean";
-  const [uncontrolled, setUncontrolled] = useState(defaultChecked);
-  const isChecked = isControlled ? checked : uncontrolled;
-  const [jelly, setJelly] = useState(false);
-
-  function toggle() {
-    if (disabled) return;
-    const next = !isChecked;
-    if (!isControlled) setUncontrolled(next);
-    onChange?.(next);
-    if (jelly) {
-      setJelly(false);
-      requestAnimationFrame(() => setJelly(true));
-      return;
-    }
-    setJelly(true);
-  }
-
-  return (
-    <div
-      className={`${styles.switch} ${styles[size]}${label ? ` ${styles.labeled}` : ""}`}
-      data-disabled={disabled || undefined}
-    >
-      {label ? (
-        <label className={styles.label} htmlFor={switchId}>
-          {label}
-        </label>
-      ) : null}
-      <button
-        type="button"
-        role="switch"
-        id={switchId}
-        className={styles.control}
-        aria-checked={isChecked}
-        aria-label={label ? undefined : ariaLabel}
-        disabled={disabled}
-        data-jelly={jelly || undefined}
-        onClick={toggle}
-        onAnimationEnd={() => setJelly(false)}
-      >
-        <span className={styles.thumb} aria-hidden />
-      </button>
-    </div>
-  );
-}

package/ui/Switch/Switch.types.ts

@@ -1,12 +0,0 @@
-export type SwitchSize = "sm" | "md" | "lg";
-
-export interface SwitchProps {
-  id?: string;
-  label?: string;
-  ariaLabel?: string;
-  size?: SwitchSize;
-  disabled?: boolean;
-  checked?: boolean;
-  defaultChecked?: boolean;
-  onChange?: (checked: boolean) => void;
-}

package/ui/Switch/index.ts

@@ -1,2 +0,0 @@
-export { Switch } from "./Switch";
-export type { SwitchProps, SwitchSize } from "./Switch.types";

package/ui/Table/Table.tsx

@@ -1,108 +0,0 @@
-import type { ReactNode } from "react";
-import type { TableColumn, TableProps } from "./Table.types";
-import styles from "./Table.module.css";
-
-export type {
-  TableProps,
-  TableColumn,
-  TableSize,
-  TableAlign,
-  TableFooter,
-} from "./Table.types";
-
-const DEFAULT_EMPTY = "No results.";
-
-function isNumeric(column: TableColumn): boolean {
-  return column.numeric === true || column.align === "end";
-}
-
-function isEmphasis(column: TableColumn, index: number): boolean {
-  return column.emphasis === true || index === 0;
-}
-
-function classNames(...parts: Array<string | false | undefined>): string {
-  return parts.filter(Boolean).join(" ");
-}
-
-function cellValue(value: string | number | ReactNode | undefined): ReactNode {
-  if (value === undefined || value === null) return "";
-  return value;
-}
-
-export function Table({
-  columns,
-  rows,
-  caption,
-  size = "md",
-  emptyLabel = DEFAULT_EMPTY,
-  footer,
-}: TableProps) {
-  const empty = rows.length === 0;
-  const colCount = Math.max(columns.length, 1);
-  const footerLabelSpan = columns.length > 1 ? columns.length - 1 : 1;
-
-  return (
-    <div className={classNames(styles.wrapper, styles[size])}>
-      <table className={styles.table}>
-        {caption ? <caption className={styles.caption}>{caption}</caption> : null}
-        <thead className={styles.thead}>
-          <tr className={styles.tr}>
-            {columns.map((column) => (
-              <th
-                key={column.key}
-                scope="col"
-                className={classNames(styles.th, isNumeric(column) && styles.numeric)}
-              >
-                {column.header}
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody className={styles.tbody}>
-          {empty ? (
-            <tr className={styles.tr}>
-              <td className={classNames(styles.td, styles.empty)} colSpan={colCount}>
-                {emptyLabel}
-              </td>
-            </tr>
-          ) : (
-            rows.map((row, index) => (
-              <tr key={index} className={styles.tr}>
-                {columns.map((column, columnIndex) => (
-                  <td
-                    key={column.key}
-                    className={classNames(
-                      styles.td,
-                      isNumeric(column) && styles.numeric,
-                      isEmphasis(column, columnIndex) && styles.emphasis,
-                    )}
-                  >
-                    {cellValue(row[column.key])}
-                  </td>
-                ))}
-              </tr>
-            ))
-          )}
-        </tbody>
-        {footer ? (
-          <tfoot className={styles.tfoot}>
-            <tr className={styles.tr}>
-              {columns.length > 1 ? (
-                <>
-                  <td className={styles.td} colSpan={footerLabelSpan}>
-                    {footer.label}
-                  </td>
-                  <td className={classNames(styles.td, styles.numeric)}>{footer.value}</td>
-                </>
-              ) : (
-                <td className={classNames(styles.td, styles.numeric)}>
-                  {footer.label} {footer.value}
-                </td>
-              )}
-            </tr>
-          </tfoot>
-        ) : null}
-      </table>
-    </div>
-  );
-}