agentic-ds-kit 0.1.0

package/ui/Button/Button.module.css

@@ -0,0 +1,101 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  border-radius: var(--radius-control-md);
+  font-family: var(--font-sans);
+  font-weight: 600;
+  line-height: 1.25;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+
+.button:focus-visible {
+  outline: var(--border-focus-width) solid var(--focus-ring);
+  outline-offset: var(--space-inset-2xs);
+}
+
+.button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.lg {
+  padding: var(--space-3) var(--space-6);
+  font-size: 1rem;
+}
+
+.md {
+  padding: var(--space-2) var(--space-4);
+  font-size: 0.875rem;
+}
+
+.sm {
+  padding: var(--space-1) var(--space-3);
+  font-size: 0.75rem;
+}
+
+.primary {
+  background-color: var(--action-primary);
+  color: var(--text-inverse);
+}
+
+.primary:hover:not(:disabled) {
+  background-color: var(--action-primary-hover);
+}
+
+.secondary {
+  background-color: var(--surface-card);
+  color: var(--text-primary);
+  border-color: var(--border-faint);
+}
+
+.secondary:hover:not(:disabled) {
+  background-color: var(--surface-muted);
+}
+
+.tertiary {
+  background-color: transparent;
+  color: var(--text-secondary);
+}
+
+.tertiary:hover:not(:disabled) {
+  background-color: var(--surface-muted);
+  color: var(--text-primary);
+}
+
+.danger {
+  background-color: var(--action-danger);
+  color: var(--text-inverse);
+}
+
+.danger:hover:not(:disabled) {
+  background-color: var(--action-danger-hover);
+}
+
+.icon {
+  display: block;
+  flex: 0 0 auto;
+}
+
+.iconOnly.lg {
+  padding: var(--space-3);
+}
+
+.iconOnly.md {
+  padding: var(--space-2);
+}
+
+.iconOnly.sm {
+  padding: var(--space-2);
+}
+
+.pill {
+  border-radius: var(--radius-pill);
+}
+
+.block {
+  width: 100%;
+}

package/ui/Button/Button.tsx

@@ -0,0 +1,49 @@
+import type { ButtonProps } from "./Button.types";
+import { LucideByName } from "./lucideName";
+import styles from "./Button.module.css";
+
+export type { ButtonProps, ButtonSize, ButtonVariant, ButtonType, ButtonShape } from "./Button.types";
+
+const ICON_SIZE = { sm: 14, md: 16, lg: 18 } as const;
+
+export function Button({
+  children,
+  size = "md",
+  variant = "primary",
+  shape = "default",
+  block = false,
+  disabled = false,
+  type = "button",
+  onClick,
+  iconStart,
+  iconEnd,
+  ariaLabel,
+}: ButtonProps) {
+  const hasLabel = Boolean(children && children.trim());
+  const iconOnly = !hasLabel && Boolean(iconStart);
+  const iconPx = ICON_SIZE[size];
+
+  return (
+    <button
+      type={type}
+      disabled={disabled}
+      aria-disabled={disabled || undefined}
+      aria-label={iconOnly ? ariaLabel : undefined}
+      onClick={onClick}
+      className={[
+        styles.button,
+        styles[size],
+        styles[variant],
+        shape === "pill" ? styles.pill : "",
+        block ? styles.block : "",
+        iconOnly ? styles.iconOnly : "",
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      <LucideByName name={iconStart} size={iconPx} className={styles.icon} />
+      {hasLabel ? <span>{children}</span> : null}
+      <LucideByName name={iconEnd} size={iconPx} className={styles.icon} />
+    </button>
+  );
+}

package/ui/Button/Button.types.ts

@@ -0,0 +1,18 @@
+export type ButtonSize = "sm" | "md" | "lg";
+export type ButtonVariant = "primary" | "secondary" | "tertiary" | "danger";
+export type ButtonType = "button" | "submit" | "reset";
+export type ButtonShape = "default" | "pill";
+
+export interface ButtonProps {
+  children?: string;
+  size?: ButtonSize;
+  variant?: ButtonVariant;
+  shape?: ButtonShape;
+  block?: boolean;
+  disabled?: boolean;
+  type?: ButtonType;
+  onClick?: () => void;
+  iconStart?: string;
+  iconEnd?: string;
+  ariaLabel?: string;
+}

package/ui/Button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from "./Button";
+export type { ButtonProps, ButtonSize, ButtonVariant, ButtonType, ButtonShape } from "./Button.types";

package/ui/Button/lucideName.tsx

@@ -0,0 +1,188 @@
+import type { LucideIcon } from "lucide-react";
+import {
+  House,
+  Search,
+  Menu,
+  Settings,
+  User,
+  Bell,
+  CalendarDays,
+  Check,
+  X,
+  Plus,
+  Minus,
+  ArrowRight,
+  Download,
+  Upload,
+  Pencil,
+  Copy,
+  Trash2,
+  Ellipsis,
+  Sparkles,
+  Circle,
+  CircleCheck,
+  Info,
+  TriangleAlert,
+  CircleHelp,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  ChevronDown,
+  ChevronsUpDown,
+  Eye,
+  EyeOff,
+  Lock,
+  Unlock,
+  Mail,
+  Phone,
+  MessageCircle,
+  Paperclip,
+  Camera,
+  Image,
+  File,
+  Folder,
+  FolderOpen,
+  Save,
+  Send,
+  Archive,
+  RefreshCw,
+  RotateCcw,
+  Filter,
+  SlidersHorizontal,
+  CirclePlus,
+  CircleX,
+  ExternalLink,
+  Link,
+  Share2,
+  Play,
+  Pause,
+  Clock,
+  MapPin,
+  Globe,
+  Heart,
+  Star,
+  ShoppingCart,
+  CreditCard,
+  Package,
+  ChartBar,
+  TrendingDown,
+  TrendingUp,
+  Database,
+  Cloud,
+  Wifi,
+  Zap,
+  Layers,
+  LogIn,
+  LogOut,
+  AlignLeft,
+  AlignCenter,
+  AlignRight,
+  Moon,
+  Sun,
+  PanelLeftClose,
+  PanelLeftOpen,
+  PanelRightClose,
+  PanelRightOpen,
+} from "lucide-react";
+
+const LUCIDE_BY_NAME: Record<string, LucideIcon> = {
+  House,
+  Search,
+  Menu,
+  Settings,
+  User,
+  Bell,
+  CalendarDays,
+  Check,
+  X,
+  Plus,
+  Minus,
+  ArrowRight,
+  Download,
+  Upload,
+  Pencil,
+  Copy,
+  Trash2,
+  Ellipsis,
+  MoreHorizontal: Ellipsis,
+  Sparkles,
+  Circle,
+  CircleCheck,
+  Info,
+  TriangleAlert,
+  CircleHelp,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  ChevronDown,
+  ChevronsUpDown,
+  Eye,
+  EyeOff,
+  Lock,
+  Unlock,
+  Mail,
+  Phone,
+  MessageCircle,
+  Paperclip,
+  Camera,
+  Image,
+  File,
+  Folder,
+  FolderOpen,
+  Save,
+  Send,
+  Archive,
+  RefreshCw,
+  RotateCcw,
+  Filter,
+  SlidersHorizontal,
+  CirclePlus,
+  CircleX,
+  ExternalLink,
+  Link,
+  Share2,
+  Play,
+  Pause,
+  Clock,
+  MapPin,
+  Globe,
+  Heart,
+  Star,
+  ShoppingCart,
+  CreditCard,
+  Package,
+  ChartBar,
+  TrendingDown,
+  TrendingUp,
+  Database,
+  Cloud,
+  Wifi,
+  Zap,
+  Layers,
+  LogIn,
+  LogOut,
+  AlignLeft,
+  AlignCenter,
+  AlignRight,
+  Moon,
+  Sun,
+  PanelLeftClose,
+  PanelLeftOpen,
+  PanelRightClose,
+  PanelRightOpen,
+};
+
+export function LucideByName({
+  name,
+  size,
+  className,
+}: {
+  name?: string;
+  size: number;
+  className?: string;
+}) {
+  if (!name) return null;
+  const Icon = LUCIDE_BY_NAME[name];
+  if (!Icon) return null;
+  return <Icon size={size} strokeWidth={2} aria-hidden className={className} />;
+}

package/ui/ButtonGroup/ButtonGroup.module.css

@@ -0,0 +1,31 @@
+.group {
+  display: inline-flex;
+  align-items: stretch;
+}
+
+.group > button {
+  position: relative;
+}
+
+.group > button:not(:first-child) {
+  margin-inline-start: -1px;
+}
+
+.group > button:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+
+.group > button:first-child:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.group > button:last-child:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.group > button:hover,
+.group > button:focus-visible {
+  z-index: 1;
+}

package/ui/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,12 @@
+import type { ButtonGroupProps } from "./ButtonGroup.types";
+import styles from "./ButtonGroup.module.css";
+
+export type { ButtonGroupProps } from "./ButtonGroup.types";
+
+export function ButtonGroup({ children, ariaLabel }: ButtonGroupProps) {
+  return (
+    <div className={styles.group} role="group" aria-label={ariaLabel}>
+      {children}
+    </div>
+  );
+}

package/ui/ButtonGroup/ButtonGroup.types.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+
+export interface ButtonGroupProps {
+  children: ReactNode;
+  ariaLabel?: string;
+}

package/ui/ButtonGroup/index.ts

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

package/ui/Calendar/Calendar.module.css

@@ -0,0 +1,146 @@
+.calendar {
+  --calendar-cell: 2.25rem;
+  box-sizing: border-box;
+  display: inline-grid;
+  gap: var(--space-2);
+  width: max-content;
+  margin: 0;
+  padding: var(--space-4);
+  border: var(--border-width-thin) solid var(--border-faint);
+  border-radius: var(--radius-surface-md);
+  background: var(--surface-card);
+  box-shadow: var(--shadow-sm);
+  font-family: var(--font-sans);
+  color: var(--text-primary);
+}
+
+.sm {
+  --calendar-cell: 1.9rem;
+  gap: var(--space-1);
+  padding: var(--space-2);
+}
+
+.md {
+  --calendar-cell: 2.25rem;
+  padding: var(--space-4);
+}
+
+.lg {
+  --calendar-cell: 2.6rem;
+  gap: var(--space-3);
+  padding: var(--space-6);
+}
+
+.calendar[data-disabled] {
+  opacity: var(--opacity-disabled);
+  pointer-events: none;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+}
+
+.heading {
+  flex: 1;
+  margin: 0;
+  text-align: center;
+  font-size: var(--type-size-label);
+  font-weight: var(--type-weight-heading);
+  line-height: var(--type-line-heading);
+  color: var(--text-primary);
+}
+
+.grid {
+  display: grid;
+  gap: var(--space-1);
+}
+
+.weekdays,
+.row {
+  display: grid;
+  grid-template-columns: repeat(7, var(--calendar-cell));
+  gap: var(--space-1);
+  justify-content: center;
+}
+
+.weekday {
+  display: grid;
+  place-items: center;
+  width: var(--calendar-cell);
+  font-size: var(--type-size-caption);
+  font-weight: var(--type-weight-caption);
+  color: var(--text-muted);
+}
+
+.cell {
+  display: grid;
+  width: var(--calendar-cell);
+  height: var(--calendar-cell);
+}
+
+.day {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: var(--border-width-thin) solid transparent;
+  border-radius: var(--radius-control-sm);
+  background: transparent;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body-sm);
+  font-weight: var(--type-weight-body);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: background var(--motion-interaction-duration) var(--motion-interaction-easing);
+}
+
+.sm .day {
+  font-size: var(--type-size-caption);
+}
+
+.day:hover:not([aria-disabled="true"]):not([data-selected]) {
+  background: var(--surface-muted);
+}
+
+.day[data-today]:not([data-selected]) {
+  border-color: var(--border-strong);
+  font-weight: var(--type-weight-label);
+}
+
+.day[data-outside] {
+  color: var(--text-muted);
+  opacity: var(--opacity-muted);
+}
+
+.day[data-selected] {
+  background: var(--action-primary);
+  color: var(--action-on-primary);
+  border-color: var(--action-primary);
+  opacity: 1;
+  font-weight: var(--type-weight-label);
+}
+
+.day[aria-disabled="true"] {
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+}
+
+.calendar[data-disabled] .day {
+  opacity: 1;
+}
+
+.day:focus-visible {
+  outline: var(--border-focus-width) solid var(--focus-ring);
+  outline-offset: var(--space-inset-2xs);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .day {
+    transition: none;
+  }
+}