agentic-ds-kit 0.1.0 → 0.2.0

package/ui/ModalCard/ModalCard.types.ts

@@ -1,15 +0,0 @@
-import type { ReactNode } from "react";
-
-export type ModalCardSize = "sm" | "md" | "lg";
-
-export interface ModalCardProps {
-  title: string;
-  description?: string;
-  size?: ModalCardSize;
-  onClose?: () => void;
-  children?: ReactNode;
-  footer?: ReactNode;
-  role?: string;
-  tabIndex?: number;
-  "aria-modal"?: boolean | "true" | "false";
-}

package/ui/ModalCard/index.ts

@@ -1,2 +0,0 @@
-export { ModalCard } from "./ModalCard";
-export type { ModalCardProps, ModalCardSize } from "./ModalCard.types";

package/ui/NavigationMenu/NavigationMenu.tsx

@@ -1,57 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { DropdownMenu } from "../DropdownMenu";
-import type {
-  NavigationMenuDropdownItem,
-  NavigationMenuItem,
-  NavigationMenuProps,
-} from "./NavigationMenu.types";
-import styles from "./NavigationMenu.module.css";
-
-export type {
-  NavigationMenuDropdownItem,
-  NavigationMenuItem,
-  NavigationMenuLinkItem,
-  NavigationMenuProps,
-} from "./NavigationMenu.types";
-
-function isDropdown(item: NavigationMenuItem): item is NavigationMenuDropdownItem {
-  return "groups" in item && Array.isArray((item as NavigationMenuDropdownItem).groups);
-}
-
-export function NavigationMenu({ items, onSelect }: NavigationMenuProps) {
-  const [openId, setOpenId] = useState<string | null>(null);
-
-  return (
-    <nav className={styles.root} aria-label="Site">
-      {items.map((item) => {
-        if (isDropdown(item)) {
-          return (
-            <DropdownMenu
-              key={item.id}
-              trigger={item.label}
-              triggerStyle="nav"
-              groups={item.groups}
-              columns={item.columns}
-              open={openId === item.id}
-              onOpenChange={(next) => setOpenId(next ? item.id : null)}
-              onSelect={onSelect}
-            />
-          );
-        }
-        return (
-          <a
-            key={item.id}
-            href={item.href}
-            className={`${styles.link}${item.active ? ` ${styles.linkActive}` : ""}`}
-            aria-current={item.active ? "page" : undefined}
-            onClick={() => onSelect?.(item.id)}
-          >
-            {item.label}
-          </a>
-        );
-      })}
-    </nav>
-  );
-}

package/ui/NavigationMenu/NavigationMenu.types.ts

@@ -1,22 +0,0 @@
-import type { DropdownMenuGroup } from "../DropdownMenu/DropdownMenu.types";
-
-export interface NavigationMenuLinkItem {
-  id: string;
-  label: string;
-  href: string;
-  active?: boolean;
-}
-
-export interface NavigationMenuDropdownItem {
-  id: string;
-  label: string;
-  groups: DropdownMenuGroup[];
-  columns?: 1 | 2;
-}
-
-export type NavigationMenuItem = NavigationMenuLinkItem | NavigationMenuDropdownItem;
-
-export interface NavigationMenuProps {
-  items: NavigationMenuItem[];
-  onSelect?: (id: string) => void;
-}

package/ui/NavigationMenu/index.ts

@@ -1,7 +0,0 @@
-export { NavigationMenu } from "./NavigationMenu";
-export type {
-  NavigationMenuProps,
-  NavigationMenuItem,
-  NavigationMenuLinkItem,
-  NavigationMenuDropdownItem,
-} from "./NavigationMenu.types";

package/ui/NumberTransition/NumberTransition.tsx

@@ -1,78 +0,0 @@
-"use client";
-
-import { useLayoutEffect, useState } from "react";
-import type { NumberTransitionProps } from "./NumberTransition.types";
-import styles from "./NumberTransition.module.css";
-
-export type { NumberTransitionProps, NumberTransitionSize } from "./NumberTransition.types";
-
-function visibleCharacter(character: string): string {
-  return character === " " ? "\u00a0" : character;
-}
-
-export function NumberTransition({
-  value,
-  format,
-  size = "md",
-  label,
-  className = "",
-}: NumberTransitionProps) {
-  const formattedValue = String(format ? format(value) : value);
-  const numericValue = Number(value);
-  const [frame, setFrame] = useState(() => ({
-    previous: formattedValue,
-    current: formattedValue,
-    currentValue: numericValue,
-    direction: "up" as "up" | "down",
-    id: 0,
-  }));
-
-  useLayoutEffect(() => {
-    setFrame((current) => {
-      if (current.current === formattedValue) return current;
-      return {
-        previous: current.current,
-        current: formattedValue,
-        currentValue: numericValue,
-        direction:
-          Number.isFinite(numericValue) &&
-          Number.isFinite(current.currentValue) &&
-          numericValue < current.currentValue
-            ? "down"
-            : "up",
-        id: current.id + 1,
-      };
-    });
-  }, [formattedValue, numericValue]);
-
-  const length = Math.max(frame.previous.length, frame.current.length);
-  const previousCharacters = frame.previous.padStart(length, " ").split("");
-  const currentCharacters = frame.current.padStart(length, " ").split("");
-
-  return (
-    <span
-      className={`${styles.root} ${styles[size]} ${className}`.trim()}
-      aria-label={label ?? formattedValue}
-      aria-live="polite"
-    >
-      <span className={styles.content} aria-hidden="true">
-        {currentCharacters.map((character, index) => {
-          const previousCharacter = previousCharacters[index];
-          const changed = previousCharacter !== character;
-          return (
-            <span
-              className={`${styles.cell}${changed ? ` ${styles.changing}` : ""}`}
-              data-direction={frame.direction}
-              key={`${frame.id}-${index}`}
-            >
-              {changed ? (
-                <span className={styles.old}>{visibleCharacter(previousCharacter)}</span>
-              ) : null}
-              <span className={styles.new}>{visibleCharacter(character)}</span>
-            </span>
-          );
-        })}
-      </span>
-    </span>
-  );
-}

package/ui/NumberTransition/NumberTransition.types.ts

@@ -1,9 +0,0 @@
-export type NumberTransitionSize = "sm" | "md" | "lg";
-
-export interface NumberTransitionProps {
-  value: number | string;
-  format?: (value: number | string) => string;
-  size?: NumberTransitionSize;
-  label?: string;
-  className?: string;
-}

package/ui/NumberTransition/index.ts

@@ -1,2 +0,0 @@
-export { NumberTransition } from "./NumberTransition";
-export type { NumberTransitionProps, NumberTransitionSize } from "./NumberTransition.types";

package/ui/PageHeader/PageHeader.tsx

@@ -1,39 +0,0 @@
-import { Breadcrumb } from "../Breadcrumb";
-import type { PageHeaderProps } from "./PageHeader.types";
-import styles from "./PageHeader.module.css";
-
-export type { PageHeaderProps } from "./PageHeader.types";
-
-export function PageHeader({
-  title,
-  subtitle,
-  eyebrow,
-  actions,
-  breadcrumbs,
-  breadcrumbSeparator,
-  breadcrumbMaxItems,
-}: PageHeaderProps) {
-  const trail = breadcrumbs && breadcrumbs.length >= 2 ? breadcrumbs : undefined;
-
-  return (
-    <header className={styles.header}>
-      {trail ? (
-        <div className={styles.trail}>
-          <Breadcrumb
-            items={trail}
-            separator={breadcrumbSeparator}
-            maxItems={breadcrumbMaxItems}
-          />
-        </div>
-      ) : null}
-      <div className={styles.row}>
-        <div className={styles.content}>
-          {eyebrow ? <p className={styles.eyebrow}>{eyebrow}</p> : null}
-          <h1 className={styles.title}>{title}</h1>
-          {subtitle ? <p className={styles.subtitle}>{subtitle}</p> : null}
-        </div>
-        {actions ? <div className={styles.actions}>{actions}</div> : null}
-      </div>
-    </header>
-  );
-}

package/ui/PageHeader/PageHeader.types.ts

@@ -1,12 +0,0 @@
-import type { ReactNode } from "react";
-import type { BreadcrumbItem, BreadcrumbSeparator } from "../Breadcrumb";
-
-export interface PageHeaderProps {
-  title: string;
-  subtitle?: string;
-  eyebrow?: string;
-  actions?: ReactNode;
-  breadcrumbs?: BreadcrumbItem[];
-  breadcrumbSeparator?: BreadcrumbSeparator;
-  breadcrumbMaxItems?: number;
-}

package/ui/PageHeader/index.ts

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

package/ui/Pagination/Pagination.tsx

@@ -1,147 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Button } from "../Button";
-import { LucideByName } from "../Button/lucideName";
-import type { PaginationProps } from "./Pagination.types";
-import styles from "./Pagination.module.css";
-
-export type { PaginationProps, PaginationSize } from "./Pagination.types";
-
-const ICON_SIZE = { sm: 14, md: 16 } as const;
-
-function clampCount(value: number): number {
-  if (!Number.isFinite(value) || value < 1) return 1;
-  return Math.floor(value);
-}
-
-function clampPage(value: number, count: number): number {
-  if (!Number.isFinite(value)) return 1;
-  return Math.min(count, Math.max(1, Math.round(value)));
-}
-
-type WindowNode = { kind: "page"; page: number } | { kind: "ellipsis"; id: string };
-
-function pageWindow(current: number, count: number): WindowNode[] {
-  if (count <= 7) {
-    return Array.from({ length: count }, (_, i) => ({ kind: "page" as const, page: i + 1 }));
-  }
-
-  const pages = new Set<number>([1, count, current]);
-  if (current - 1 >= 1) pages.add(current - 1);
-  if (current + 1 <= count) pages.add(current + 1);
-
-  const sorted = [...pages].sort((a, b) => a - b);
-  const nodes: WindowNode[] = [];
-  for (let i = 0; i < sorted.length; i += 1) {
-    const page = sorted[i];
-    if (i > 0 && page - sorted[i - 1] > 1) {
-      nodes.push({ kind: "ellipsis", id: `gap-${sorted[i - 1]}-${page}` });
-    }
-    nodes.push({ kind: "page", page });
-  }
-  return nodes;
-}
-
-export function Pagination({
-  page,
-  defaultPage = 1,
-  pageCount,
-  onPageChange,
-  showPages = true,
-  showLabels = true,
-  showPreviousNext = true,
-  size = "md",
-}: PaginationProps) {
-  const count = clampCount(pageCount);
-  const isControlled = typeof page === "number";
-  const [uncontrolled, setUncontrolled] = useState(() => clampPage(defaultPage, count));
-  const current = clampPage(isControlled ? page : uncontrolled, count);
-  const iconPx = ICON_SIZE[size];
-
-  function go(next: number) {
-    const nextPage = clampPage(next, count);
-    if (nextPage === current) return;
-    if (!isControlled) setUncontrolled(nextPage);
-    onPageChange?.(nextPage);
-  }
-
-  return (
-    <nav aria-label="Pagination" className={styles.nav}>
-      {showPreviousNext ? (
-        showLabels ? (
-          <Button
-            size={size}
-            variant="tertiary"
-            iconStart="ChevronLeft"
-            disabled={current <= 1}
-            onClick={() => go(current - 1)}
-          >
-            Previous
-          </Button>
-        ) : (
-          <Button
-            size={size}
-            variant="tertiary"
-            iconStart="ChevronLeft"
-            ariaLabel="Previous"
-            disabled={current <= 1}
-            onClick={() => go(current - 1)}
-          />
-        )
-      ) : null}
-
-      {showPages
-        ? pageWindow(current, count).map((node) => {
-            if (node.kind === "ellipsis") {
-              return (
-                <span key={node.id} className={styles.ellipsis} aria-hidden>
-                  <LucideByName name="Ellipsis" size={iconPx} />
-                </span>
-              );
-            }
-
-            const isCurrent = node.page === current;
-            return (
-              <span
-                key={node.page}
-                className={styles.page}
-                aria-current={isCurrent ? "page" : undefined}
-              >
-                <Button
-                  size={size}
-                  variant={isCurrent ? "secondary" : "tertiary"}
-                  onClick={() => go(node.page)}
-                >
-                  {String(node.page)}
-                </Button>
-              </span>
-            );
-          })
-        : null}
-
-      {showPreviousNext ? (
-        showLabels ? (
-          <Button
-            size={size}
-            variant="tertiary"
-            iconEnd="ChevronRight"
-            disabled={current >= count}
-            onClick={() => go(current + 1)}
-          >
-            Next
-          </Button>
-        ) : (
-          <Button
-            size={size}
-            variant="tertiary"
-            iconStart="ChevronRight"
-            ariaLabel="Next"
-            disabled={current >= count}
-            onClick={() => go(current + 1)}
-          />
-        )
-      ) : null}
-    </nav>
-  );
-}

package/ui/Pagination/Pagination.types.ts

@@ -1,12 +0,0 @@
-export type PaginationSize = "sm" | "md";
-
-export interface PaginationProps {
-  page?: number;
-  defaultPage?: number;
-  pageCount: number;
-  onPageChange?: (page: number) => void;
-  showPages?: boolean;
-  showLabels?: boolean;
-  showPreviousNext?: boolean;
-  size?: PaginationSize;
-}

package/ui/Pagination/index.ts

@@ -1,2 +0,0 @@
-export { Pagination } from "./Pagination";
-export type { PaginationProps, PaginationSize } from "./Pagination.types";