agentic-ds-kit 0.1.0 → 0.2.0

package/ui/PieChart/PieChart.tsx

@@ -1,293 +0,0 @@
-"use client";
-
-import { useId, useMemo, useState } from "react";
-import { ChartFrame } from "../shared/ChartFrame";
-import frameStyles from "../shared/ChartFrame.module.css";
-import {
-  formatValue,
-  pointOnCircle,
-  prepareSegments,
-  ringPath,
-  TAU,
-  wedgePath,
-  type PreparedSegment,
-} from "../shared/chartMath";
-import type { PieChartProps } from "./PieChart.types";
-import styles from "./PieChart.module.css";
-
-export type { PieChartLayout, PieChartProps, PieChartVariant } from "./PieChart.types";
-
-type SliceGeom = PreparedSegment & {
-  path: string;
-  midX: number;
-  midY: number;
-  percent: number;
-};
-
-function ChartTable({ segments, total }: { segments: PreparedSegment[]; total: number }) {
-  return (
-    <div className={frameStyles.tableScroll}>
-      <table className={frameStyles.table}>
-        <thead>
-          <tr>
-            <th scope="col">Segment</th>
-            <th scope="col">Value</th>
-            <th scope="col">Share</th>
-          </tr>
-        </thead>
-        <tbody>
-          {segments.map((segment) => (
-            <tr key={segment.label}>
-              <th scope="row">{segment.label}</th>
-              <td>{formatValue(segment.value)}</td>
-              <td>{`${Math.round(segment.share * 100)}%`}</td>
-            </tr>
-          ))}
-          <tr>
-            <th scope="row">Total</th>
-            <td>{formatValue(total)}</td>
-            <td>100%</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  );
-}
-
-function Legend({
-  segments,
-  active,
-  orientation,
-  onActivate,
-  onClear,
-}: {
-  segments: PreparedSegment[];
-  active: string | null;
-  orientation: "vertical" | "horizontal";
-  onActivate: (label: string) => void;
-  onClear: () => void;
-}) {
-  return (
-    <ul
-      className={`${frameStyles.legend} ${frameStyles.legendInteractive}${orientation === "vertical" ? ` ${frameStyles.legendVertical}` : ""}`}
-    >
-      {segments.map((segment) => {
-        const dimmed = Boolean(active) && active !== segment.label;
-        const percent = `${Math.round(segment.share * 100)}%`;
-        return (
-          <li key={segment.label}>
-            <button
-              type="button"
-              className={`${frameStyles.legendItem} ${frameStyles.legendButton}${dimmed ? ` ${frameStyles.legendItemDimmed}` : ""}`}
-              onMouseEnter={() => onActivate(segment.label)}
-              onMouseLeave={onClear}
-              onFocus={() => onActivate(segment.label)}
-              onBlur={onClear}
-            >
-              <span
-                className={`${frameStyles.legendSwatch} ${frameStyles.legendSwatchPill}`}
-                style={{ background: segment.color }}
-                aria-hidden
-              />
-              <span>{segment.label}</span>
-              <span className={orientation === "vertical" ? frameStyles.legendPercent : frameStyles.legendMeta}>
-                {percent}
-              </span>
-            </button>
-          </li>
-        );
-      })}
-    </ul>
-  );
-}
-
-export function PieChart({
-  data = [],
-  title,
-  description,
-  variant = "donut",
-  layout = "split",
-  size = 240,
-  maxSegments = 6,
-  sort = true,
-  otherLabel = "Other",
-  centerLabel = "Total",
-  showCenterTotal = true,
-  showTable = true,
-  emptyLabel = "No data for this range",
-  isLoading = false,
-  className = "",
-}: PieChartProps) {
-  const [active, setActive] = useState<string | null>(null);
-  const rawId = useId();
-  const glowId = `pie-glow-${rawId.replace(/:/g, "")}`;
-  const isDonut = variant === "donut";
-  const isSplit = layout === "split";
-
-  const segments = useMemo(
-    () => prepareSegments(data, { maxSegments, sort, otherLabel }),
-    [data, maxSegments, sort, otherLabel],
-  );
-
-  const total = useMemo(() => segments.reduce((sum, entry) => sum + entry.value, 0), [segments]);
-  const isEmpty = !segments.length || total <= 0;
-
-  const geometry = useMemo(() => {
-    const cx = size / 2;
-    const cy = size / 2;
-    const pad = 4;
-    const outerRadius = size / 2 - pad;
-    const thickness = isDonut ? outerRadius * 0.34 : 0;
-    const innerRadius = isDonut ? Math.max(0, outerRadius - thickness) : 0;
-    const midRadius = isDonut ? (innerRadius + outerRadius) / 2 : outerRadius * 0.55;
-
-    if (isEmpty) {
-      return { cx, cy, slices: [] as SliceGeom[] };
-    }
-
-    let cursor = 0;
-    const slices: SliceGeom[] = segments.map((segment) => {
-      const sweep = segment.share * TAU;
-      const start = cursor;
-      const end = cursor + sweep;
-      cursor = end;
-      const mid = (start + end) / 2;
-      const point = pointOnCircle(cx, cy, midRadius, mid);
-      return {
-        ...segment,
-        path: isDonut
-          ? ringPath({ cx, cy, innerRadius, outerRadius, startAngle: start, endAngle: end })
-          : wedgePath({ cx, cy, radius: outerRadius, startAngle: start, endAngle: end }),
-        midX: point.x,
-        midY: point.y,
-        percent: Math.round(segment.share * 100),
-      };
-    });
-
-    return { cx, cy, slices };
-  }, [isDonut, isEmpty, segments, size]);
-
-  const activeSlice = geometry.slices.find((slice) => slice.label === active) ?? null;
-  const compactTotal = formatValue(total);
-  const valueSize = size * 0.14;
-  const labelSize = size * 0.07;
-
-  const legend = !isEmpty ? (
-    <Legend
-      segments={segments}
-      active={active}
-      orientation={isSplit ? "vertical" : "horizontal"}
-      onActivate={setActive}
-      onClear={() => setActive(null)}
-    />
-  ) : undefined;
-
-  const plot = (
-    <div className={styles.plot} style={{ width: size, height: size }}>
-      <svg
-        className={styles.chart}
-        width={size}
-        height={size}
-        viewBox={`0 0 ${size} ${size}`}
-        overflow="visible"
-      >
-        <defs>
-          <filter id={glowId} x="-40%" y="-40%" width="180%" height="180%">
-            <feGaussianBlur stdDeviation="2.2" />
-          </filter>
-        </defs>
-        {geometry.slices.map((slice) => {
-          const isActive = active === slice.label;
-          const isDimmed = Boolean(active) && !isActive;
-          return (
-            <g
-              key={slice.label}
-              className={`${styles.slice}${isActive ? ` ${styles.sliceActive}` : ""}${isDimmed ? ` ${styles.sliceDimmed}` : ""}`}
-            >
-              <path
-                className={styles.glow}
-                d={slice.path}
-                fill={slice.color}
-                filter={`url(#${glowId})`}
-              />
-              <path className={styles.mark} d={slice.path} fill={slice.color} />
-            </g>
-          );
-        })}
-        {isDonut && showCenterTotal && !isEmpty ? (
-          <text className={styles.center} textAnchor="middle">
-            <tspan
-              className={styles.centerValue}
-              x={geometry.cx}
-              y={geometry.cy}
-              dy="-0.15em"
-              fontSize={valueSize}
-            >
-              {compactTotal}
-            </tspan>
-            <tspan
-              className={styles.centerLabel}
-              x={geometry.cx}
-              dy="1.45em"
-              fontSize={labelSize}
-            >
-              {centerLabel}
-            </tspan>
-          </text>
-        ) : null}
-        {geometry.slices.map((slice) => (
-          <path
-            key={`hit-${slice.label}`}
-            className={styles.hit}
-            d={slice.path}
-            fill="transparent"
-            tabIndex={0}
-            role="button"
-            aria-label={`${slice.label}: ${formatValue(slice.value)}, ${slice.percent} percent`}
-            onMouseEnter={() => setActive(slice.label)}
-            onMouseLeave={() => setActive(null)}
-            onFocus={() => setActive(slice.label)}
-            onBlur={() => setActive(null)}
-          />
-        ))}
-      </svg>
-      {activeSlice ? (
-        <div
-          className={`${frameStyles.tooltip}${activeSlice.midX > size * 0.6 ? ` ${frameStyles.tooltipFlip}` : ""}`}
-          style={{ left: activeSlice.midX, top: activeSlice.midY }}
-          role="status"
-          aria-live="polite"
-        >
-          <p className={frameStyles.tooltipTitle}>{activeSlice.label}</p>
-          <div className={frameStyles.tooltipRow}>
-            <span className={frameStyles.tooltipKey} style={{ background: activeSlice.color }} aria-hidden />
-            <span className={frameStyles.tooltipShare}>{`${activeSlice.percent}% of ${compactTotal}`}</span>
-            <span className={frameStyles.tooltipValue}>{formatValue(activeSlice.value)}</span>
-          </div>
-        </div>
-      ) : null}
-    </div>
-  );
-
-  return (
-    <ChartFrame
-      title={title}
-      description={description}
-      legend={!isSplit ? legend : undefined}
-      table={showTable ? <ChartTable segments={segments} total={total} /> : undefined}
-      isEmpty={isEmpty}
-      emptyLabel={emptyLabel}
-      isLoading={isLoading}
-      className={`pie-chart pie-chart--${layout} ${styles.root} ${className}`.trim()}
-    >
-      {isSplit ? (
-        <div className={styles.split}>
-          {plot}
-          {legend}
-        </div>
-      ) : (
-        <div className={styles.stackPlot}>{plot}</div>
-      )}
-    </ChartFrame>
-  );
-}

package/ui/PieChart/PieChart.types.ts

@@ -1,22 +0,0 @@
-import type { ChartDatum } from "../shared/chartMath";
-
-export type PieChartVariant = "donut" | "pie";
-export type PieChartLayout = "split" | "stack";
-
-export interface PieChartProps {
-  data?: ChartDatum[];
-  title?: string;
-  description?: string;
-  variant?: PieChartVariant;
-  layout?: PieChartLayout;
-  size?: number;
-  maxSegments?: number;
-  sort?: boolean;
-  otherLabel?: string;
-  centerLabel?: string;
-  showCenterTotal?: boolean;
-  showTable?: boolean;
-  emptyLabel?: string;
-  isLoading?: boolean;
-  className?: string;
-}

package/ui/Progress/Progress.tsx

@@ -1,167 +0,0 @@
-import type { CSSProperties } from "react";
-import { useId } from "react";
-import type { ProgressProps } from "./Progress.types";
-import styles from "./Progress.module.css";
-
-export type {
-  ProgressProps,
-  ProgressShape,
-  ProgressSize,
-  ProgressValuePosition,
-  ProgressTone,
-} from "./Progress.types";
-
-const RING = {
-  sm: { size: 56, stroke: 5 },
-  md: { size: 96, stroke: 8 },
-  lg: { size: 196, stroke: 16 },
-} as const;
-
-function clamp(value: number): number {
-  if (!Number.isFinite(value)) return 0;
-  return Math.min(100, Math.max(0, value));
-}
-
-export function Progress({
-  value = 0,
-  size = "md",
-  shape = "bar",
-  label,
-  showValue = false,
-  valuePosition = "end",
-  tone = "brand",
-  ariaLabel,
-}: ProgressProps) {
-  const uid = useId();
-  const percent = clamp(value);
-  const rounded = Math.round(percent);
-  const labelId = label ? `${uid}-label` : undefined;
-  const isRing = shape === "circle" || shape === "semicircle";
-  const isSemi = shape === "semicircle";
-  const overlay = !isRing && showValue && valuePosition === "overlay";
-  const metaValue = !isRing && showValue && valuePosition === "end" && Boolean(label);
-  const endBeside = !isRing && showValue && valuePosition === "end" && !label;
-  const holeValue = isRing && showValue;
-  const showMeta = Boolean(label) || metaValue;
-  const unnamed = ariaLabel || `${rounded}%`;
-
-  const a11y = {
-    role: "progressbar" as const,
-    "aria-valuemin": 0,
-    "aria-valuemax": 100,
-    "aria-valuenow": rounded,
-    "aria-valuetext": `${rounded}%`,
-    "aria-labelledby": labelId,
-    "aria-label": label ? undefined : unnamed,
-  };
-
-  const track = (
-    <div className={styles.track} {...a11y}>
-      <div className={styles.fill} style={{ width: `${percent}%` }} />
-      {overlay ? <span className={styles.overlayValue}>{rounded}%</span> : null}
-    </div>
-  );
-
-  let meter = null;
-  if (isRing) {
-    const ring = RING[size];
-    const ringSize = ring.size;
-    const stroke = ring.stroke;
-    const radius = (ringSize - stroke) / 2;
-    const circumference = 2 * Math.PI * radius;
-    const visible = isSemi ? circumference / 2 : circumference;
-    const dashOffset = visible * (1 - percent / 100);
-    const cx = ringSize / 2;
-    const cy = ringSize / 2;
-    const viewBox = isSemi
-      ? `0 ${ringSize / 2} ${ringSize} ${ringSize / 2}`
-      : `0 0 ${ringSize} ${ringSize}`;
-    const svgH = isSemi ? ringSize / 2 : ringSize;
-    const semiDash = `${circumference / 2} ${circumference}`;
-    const groupTransform = isSemi
-      ? `translate(${cx} ${cy}) scale(-1 1) translate(${-cx} ${-cy})`
-      : `rotate(-90 ${cx} ${cy})`;
-    const arcStyle = {
-      "--progress-c": `${visible}`,
-      "--progress-offset": `${dashOffset}`,
-    } as CSSProperties;
-
-    meter = (
-      <div
-        className={styles.meter}
-        style={{ "--progress-size": `${ringSize}px` } as CSSProperties}
-        {...a11y}
-      >
-        <svg
-          className={styles.ring}
-          width={ringSize}
-          height={svgH}
-          viewBox={viewBox}
-          overflow="hidden"
-          aria-hidden="true"
-          focusable="false"
-        >
-          <g transform={groupTransform}>
-            <circle
-              className={styles.trackArc}
-              cx={cx}
-              cy={cy}
-              r={radius}
-              fill="none"
-              strokeWidth={stroke}
-              strokeDasharray={isSemi ? semiDash : undefined}
-            />
-            <circle
-              className={styles.valueArc}
-              cx={cx}
-              cy={cy}
-              r={radius}
-              fill="none"
-              strokeWidth={stroke}
-              strokeDasharray={isSemi ? semiDash : circumference}
-              style={arcStyle}
-            />
-          </g>
-        </svg>
-        {holeValue ? <span className={styles.holeValue}>{rounded}%</span> : null}
-      </div>
-    );
-  }
-
-  const rootClass = [
-    styles.root,
-    styles[size],
-    styles[tone],
-    styles[shape],
-    overlay ? styles.overlay : "",
-  ]
-    .filter(Boolean)
-    .join(" ");
-
-  return (
-    <div className={rootClass}>
-      {showMeta ? (
-        <div className={styles.meta}>
-          {label ? (
-            <span id={labelId} className={styles.label}>
-              {label}
-            </span>
-          ) : (
-            <span />
-          )}
-          {metaValue ? <span className={styles.value}>{rounded}%</span> : null}
-        </div>
-      ) : null}
-      {isRing ? (
-        meter
-      ) : endBeside ? (
-        <div className={styles.row}>
-          {track}
-          <span className={styles.value}>{rounded}%</span>
-        </div>
-      ) : (
-        track
-      )}
-    </div>
-  );
-}

package/ui/Progress/index.ts

@@ -1,8 +0,0 @@
-export { Progress } from "./Progress";
-export type {
-  ProgressProps,
-  ProgressShape,
-  ProgressSize,
-  ProgressValuePosition,
-  ProgressTone,
-} from "./Progress.types";

package/ui/ProgressSteps/ProgressSteps.tsx

@@ -1,105 +0,0 @@
-import { Check, X } from "lucide-react";
-import type { ProgressStepsItem, ProgressStepsProps, ProgressStepsStatus } from "./ProgressSteps.types";
-import styles from "./ProgressSteps.module.css";
-
-export type {
-  ProgressStepsItem,
-  ProgressStepsOrientation,
-  ProgressStepsProps,
-  ProgressStepsSize,
-  ProgressStepsStatus,
-} from "./ProgressSteps.types";
-
-const ICON_SIZE = { sm: 12, md: 14 } as const;
-const STATUSES: readonly ProgressStepsStatus[] = ["complete", "current", "upcoming", "error"];
-
-function clampCurrent(value: number): number {
-  if (!Number.isFinite(value)) return 0;
-  return Math.max(0, Math.round(value));
-}
-
-function isStatus(value: ProgressStepsStatus | undefined): value is ProgressStepsStatus {
-  return Boolean(value && STATUSES.includes(value));
-}
-
-function resolveStatus(step: ProgressStepsItem, index: number, current: number): ProgressStepsStatus {
-  if (isStatus(step.status)) return step.status;
-  if (index < current) return "complete";
-  if (index === current) return "current";
-  return "upcoming";
-}
-
-function statusPhrase(status: ProgressStepsStatus): string {
-  if (status === "complete") return "Completed";
-  if (status === "current") return "Current";
-  if (status === "error") return "Error";
-  return "Upcoming";
-}
-
-export function ProgressSteps({
-  steps,
-  current = 0,
-  orientation = "horizontal",
-  size = "md",
-  ariaLabel = "Progress",
-  className = "",
-}: ProgressStepsProps) {
-  if (!steps.length) return null;
-
-  const currentIndex = clampCurrent(current);
-  const iconPx = ICON_SIZE[size];
-  const statuses = steps.map((step, index) => resolveStatus(step, index, currentIndex));
-
-  return (
-    <nav aria-label={ariaLabel} className={`${styles.root} ${styles[orientation]} ${styles[size]} ${className}`.trim()}>
-      <ol className={styles.list}>
-        {steps.map((step, index) => {
-          const status = statuses[index];
-          const prevComplete = index > 0 && statuses[index - 1] === "complete";
-          const thisComplete = status === "complete";
-          const lineStartClass = `${styles.line} ${styles.lineStart} ${prevComplete ? styles.lineComplete : ""}`.trim();
-          const lineEndClass = `${styles.line} ${styles.lineEnd} ${thisComplete ? styles.lineComplete : ""}`.trim();
-          const marker = (
-            <span className={styles.marker}>
-              {status === "complete" ? (
-                <Check size={iconPx} strokeWidth={2.5} color="currentColor" aria-hidden />
-              ) : status === "error" ? (
-                <X size={iconPx} strokeWidth={2.5} color="currentColor" aria-hidden />
-              ) : (
-                <span className={styles.number}>{index + 1}</span>
-              )}
-            </span>
-          );
-
-          return (
-            <li
-              key={step.id}
-              className={`${styles.step} ${styles[status]}`}
-              aria-current={status === "current" ? "step" : undefined}
-            >
-              <span className={styles.srOnly}>
-                {`${statusPhrase(status)}, step ${index + 1} of ${steps.length}`}
-              </span>
-              {orientation === "horizontal" ? (
-                <div className={styles.markerRow} aria-hidden="true">
-                  <span className={lineStartClass} />
-                  {marker}
-                  <span className={lineEndClass} />
-                </div>
-              ) : (
-                <span className={styles.rail} aria-hidden="true">
-                  {marker}
-                  {index < steps.length - 1 ? <span className={lineEndClass} /> : null}
-                </span>
-              )}
-              <div className={styles.copy}>
-                <span className={styles.label}>{step.label}</span>
-                {step.description ? <span className={styles.description}>{step.description}</span> : null}
-              </div>
-            </li>
-          );
-        })}
-      </ol>
-    </nav>
-  );
-}

package/ui/ProgressSteps/index.ts

@@ -1,8 +0,0 @@
-export { ProgressSteps } from "./ProgressSteps";
-export type {
-  ProgressStepsItem,
-  ProgressStepsOrientation,
-  ProgressStepsProps,
-  ProgressStepsSize,
-  ProgressStepsStatus,
-} from "./ProgressSteps.types";