agentic-ds-kit 0.1.0 → 0.2.0

package/ui/AppNav/AppNav.tsx

@@ -1,137 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import Link from "next/link";
-import { ChevronRight } from "lucide-react";
-import type { AppNavGroup, AppNavItem, AppNavLeaf, AppNavProps } from "./AppNav.types";
-import styles from "./AppNav.module.css";
-
-export type { AppNavProps, AppNavItem, AppNavLeaf, AppNavGroup } from "./AppNav.types";
-
-function navKey(item: AppNavLeaf, index: number): string {
-  return `${item.href}::${item.label}::${index}`;
-}
-
-function groupHasActive(group: AppNavGroup): boolean {
-  return group.items.some((item) => item.active || item.items?.some((child) => child.active));
-}
-
-function NavLink({ href, label, active, nested }: AppNavLeaf & { nested?: boolean }) {
-  return (
-    <Link
-      href={href}
-      className={`${styles.link} ${nested ? styles.linkNested : ""} ${active ? styles.active : ""}`}
-      aria-current={active ? "page" : undefined}
-      onClick={(event) => {
-        const [path, fragment] = href.split("#");
-        if (!fragment) return;
-        const here = window.location.pathname;
-        if (path && path !== here) return;
-        event.preventDefault();
-        window.location.hash = fragment;
-        window.dispatchEvent(new HashChangeEvent("hashchange"));
-      }}
-    >
-      {label}
-    </Link>
-  );
-}
-
-function NavItem({ item }: { item: AppNavItem }) {
-  if (item.items && item.items.length > 0) {
-    return (
-      <li className={styles.item}>
-        <span className={styles.subgroupLabel}>{item.label}</span>
-        <ul className={styles.subList}>
-          {item.items.map((child, index) => (
-            <li key={navKey(child, index)}>
-              <NavLink {...child} nested />
-            </li>
-          ))}
-        </ul>
-      </li>
-    );
-  }
-
-  return (
-    <li className={styles.item}>
-      <NavLink {...item} />
-    </li>
-  );
-}
-
-function NavGroup({
-  group,
-  open,
-  onToggle,
-}: {
-  group: AppNavGroup;
-  open: boolean;
-  onToggle: () => void;
-}) {
-  const groupId = `nav-group-${group.label.replace(/\s+/g, "-").toLowerCase()}`;
-  const hasActive = groupHasActive(group);
-
-  return (
-    <li className={`${styles.group} ${open ? styles.isOpen : ""}`}>
-      <button
-        type="button"
-        className={`${styles.groupToggle} ${open ? styles.groupToggleOpen : ""} ${hasActive ? styles.groupToggleActive : ""}`}
-        aria-expanded={open}
-        aria-controls={groupId}
-        onClick={onToggle}
-      >
-        <span className={styles.groupLabel}>{group.label}</span>
-        <ChevronRight className={`${styles.chevron} ${open ? styles.chevronOpen : ""}`} size={14} strokeWidth={2} aria-hidden />
-      </button>
-      <div className={styles.accordion} id={groupId} aria-hidden={!open} inert={open ? undefined : true}>
-        <div className={styles.accordionInner}>
-          <ul className={styles.list}>
-            {group.items.map((item, index) => (
-              <NavItem key={navKey(item, index)} item={item} />
-            ))}
-          </ul>
-        </div>
-      </div>
-    </li>
-  );
-}
-
-export function AppNav({ title, items = [], groups }: AppNavProps) {
-  const useGroups = Boolean(groups && groups.length > 0);
-  const activeLabel = useGroups ? groups!.find(groupHasActive)?.label ?? null : null;
-  const fallbackLabel = useGroups
-    ? groups!.find((group) => group.defaultOpen !== false)?.label ?? groups![0].label
-    : null;
-  const [openLabel, setOpenLabel] = useState<string | null>(activeLabel ?? fallbackLabel);
-
-  useEffect(() => {
-    if (activeLabel) setOpenLabel(activeLabel);
-  }, [activeLabel]);
-
-  const resolvedOpen = openLabel ?? activeLabel ?? fallbackLabel;
-
-  return (
-    <nav className={styles.nav} aria-label="Application">
-      {title ? <p className={styles.title}>{title}</p> : null}
-      {useGroups ? (
-        <ul className={styles.groupList}>
-          {groups!.map((group) => (
-            <NavGroup
-              key={group.label}
-              group={group}
-              open={resolvedOpen === group.label}
-              onToggle={() => setOpenLabel((current) => (current === group.label ? null : group.label))}
-            />
-          ))}
-        </ul>
-      ) : (
-        <ul className={styles.list}>
-          {items.map((item, index) => (
-            <NavItem key={navKey(item, index)} item={item} />
-          ))}
-        </ul>
-      )}
-    </nav>
-  );
-}

package/ui/AppNav/AppNav.types.ts

@@ -1,24 +0,0 @@
-export interface AppNavLeaf {
-  href: string;
-  label: string;
-  active?: boolean;
-}
-
-/** A nav link, optionally with one nested subgroup of leaves. */
-export interface AppNavItem extends AppNavLeaf {
-  items?: AppNavLeaf[];
-}
-
-export interface AppNavGroup {
-  label: string;
-  defaultOpen?: boolean;
-  items: AppNavItem[];
-}
-
-export interface AppNavProps {
-  title?: string;
-  /** Flat list for simple shells (e.g. list-detail). Ignored when `groups` is provided. */
-  items?: AppNavItem[];
-  /** Grouped catalog nav for docs/playground shells. Takes precedence over `items`. */
-  groups?: AppNavGroup[];
-}

package/ui/Avatar/Avatar.tsx

@@ -1,62 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { User } from "lucide-react";
-import type { AvatarProps } from "./Avatar.types";
-import styles from "./Avatar.module.css";
-
-export type { AvatarProps, AvatarSize } from "./Avatar.types";
-
-function lettersOf(value: string): string {
-  return Array.from(value)
-    .filter((ch) => /\p{L}/u.test(ch))
-    .join("");
-}
-
-function deriveInitials(name: string): string {
-  const words = name
-    .trim()
-    .split(/\s+/)
-    .map(lettersOf)
-    .filter(Boolean);
-
-  if (words.length === 0) return "";
-  if (words.length === 1) return words[0].slice(0, 2).toUpperCase();
-
-  const first = words[0][0];
-  const last = words[words.length - 1][0];
-  return `${first}${last}`.toUpperCase();
-}
-
-function resolveInitials(name: string, initials?: string): string {
-  if (initials !== undefined) {
-    const override = lettersOf(initials).slice(0, 2).toUpperCase();
-    if (override) return override;
-  }
-  return deriveInitials(name);
-}
-
-export function Avatar({ name, src, initials, size = "md" }: AvatarProps) {
-  const [failed, setFailed] = useState(false);
-
-  useEffect(() => {
-    setFailed(false);
-  }, [src]);
-
-  const label = resolveInitials(name, initials);
-  const showImage = Boolean(src) && !failed;
-
-  if (showImage) {
-    return (
-      <span className={`${styles.avatar} ${styles[size]}`}>
-        <img className={styles.image} src={src} alt={name} onError={() => setFailed(true)} />
-      </span>
-    );
-  }
-
-  return (
-    <span className={`${styles.avatar} ${styles[size]} ${styles.fallback}`} role="img" aria-label={name}>
-      {label ? label : <User className={styles.icon} aria-hidden />}
-    </span>
-  );
-}

package/ui/Avatar/Avatar.types.ts

@@ -1,8 +0,0 @@
-export type AvatarSize = "sm" | "md" | "lg";
-
-export interface AvatarProps {
-  name: string;
-  src?: string;
-  initials?: string;
-  size?: AvatarSize;
-}

package/ui/Avatar/index.ts

@@ -1,2 +0,0 @@
-export { Avatar } from "./Avatar";
-export type { AvatarProps, AvatarSize } from "./Avatar.types";

package/ui/AvatarGroup/AvatarGroup.tsx

@@ -1,29 +0,0 @@
-import { Avatar } from "../Avatar";
-import type { AvatarGroupProps } from "./AvatarGroup.types";
-import styles from "./AvatarGroup.module.css";
-
-export type { AvatarGroupItem, AvatarGroupProps, AvatarGroupSize } from "./AvatarGroup.types";
-
-export function AvatarGroup({ items, size = "md", max = 3, ariaLabel }: AvatarGroupProps) {
-  const visible = items.slice(0, max);
-  const leftover = items.length - max;
-
-  return (
-    <div className={styles.group} role="group" aria-label={ariaLabel}>
-      {visible.map((item, index) => (
-        <span key={`${item.name}-${index}`} className={styles.item} style={{ zIndex: index + 1 }}>
-          <Avatar name={item.name} src={item.src} initials={item.initials} size={size} />
-        </span>
-      ))}
-      {leftover > 0 ? (
-        <span
-          className={`${styles.item} ${styles.count} ${styles[size]}`}
-          style={{ zIndex: visible.length + 1 }}
-          aria-label={`${leftover} more`}
-        >
-          +{leftover}
-        </span>
-      ) : null}
-    </div>
-  );
-}

package/ui/AvatarGroup/AvatarGroup.types.ts

@@ -1,16 +0,0 @@
-import type { AvatarSize } from "../Avatar/Avatar.types";
-
-export type AvatarGroupSize = AvatarSize;
-
-export interface AvatarGroupItem {
-  name: string;
-  src?: string;
-  initials?: string;
-}
-
-export interface AvatarGroupProps {
-  items: AvatarGroupItem[];
-  size?: AvatarGroupSize;
-  max?: number;
-  ariaLabel?: string;
-}

package/ui/AvatarGroup/index.ts

@@ -1,2 +0,0 @@
-export { AvatarGroup } from "./AvatarGroup";
-export type { AvatarGroupItem, AvatarGroupProps, AvatarGroupSize } from "./AvatarGroup.types";

package/ui/Badge/Badge.tsx

@@ -1,43 +0,0 @@
-"use client";
-
-import { X } from "lucide-react";
-import type { BadgeProps } from "./Badge.types";
-import styles from "./Badge.module.css";
-
-export type { BadgeProps, BadgeTone, BadgeSize } from "./Badge.types";
-
-const ICON_SIZE = { sm: 12, md: 14, lg: 16 } as const;
-
-export function Badge({
-  children,
-  tone = "neutral",
-  size = "md",
-  removable = false,
-  disabled = false,
-  onRemove,
-}: BadgeProps) {
-  const iconPx = ICON_SIZE[size];
-
-  return (
-    <span
-      className={`${styles.badge} ${styles[tone]} ${styles[size]}${disabled ? ` ${styles.disabled}` : ""}`}
-      aria-disabled={disabled || undefined}
-    >
-      {children}
-      {removable ? (
-        <button
-          type="button"
-          className={styles.remove}
-          aria-label={`Remove ${children}`}
-          disabled={disabled}
-          onClick={() => {
-            if (disabled) return;
-            onRemove?.();
-          }}
-        >
-          <X size={iconPx} color="currentColor" aria-hidden />
-        </button>
-      ) : null}
-    </span>
-  );
-}

package/ui/Badge/index.ts

@@ -1,2 +0,0 @@
-export { Badge } from "./Badge";
-export type { BadgeProps, BadgeTone, BadgeSize } from "./Badge.types";