agentic-ds-kit 0.1.0

package/ui/PieChart/PieChart.types.ts

@@ -0,0 +1,22 @@
+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/PieChart/index.ts

@@ -0,0 +1,2 @@
+export { PieChart } from "./PieChart";
+export type { PieChartLayout, PieChartProps, PieChartVariant } from "./PieChart.types";

package/ui/Progress/Progress.module.css

@@ -0,0 +1,226 @@
+.root {
+  display: grid;
+  gap: var(--space-2);
+  width: 100%;
+  min-width: 0;
+}
+
+.circle,
+.semicircle {
+  width: fit-content;
+}
+
+.meta {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--space-3);
+  min-width: 0;
+}
+
+.label {
+  min-width: 0;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body-sm);
+  font-weight: var(--type-weight-label);
+  line-height: var(--type-line-body);
+  color: var(--text-primary);
+  overflow-wrap: anywhere;
+}
+
+.value {
+  flex-shrink: 0;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-caption);
+  line-height: var(--type-line-body);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-primary);
+}
+
+.track {
+  width: 100%;
+  overflow: hidden;
+  border-radius: var(--radius-pill);
+}
+
+.brand .track {
+  background-color: var(--fill-brand-subtle);
+}
+
+.brand .fill {
+  background-color: var(--fill-brand);
+}
+
+.brand .trackArc {
+  stroke: var(--fill-brand-subtle);
+}
+
+.brand .valueArc {
+  stroke: var(--fill-brand);
+}
+
+.danger .track {
+  background-color: var(--fill-danger-subtle);
+}
+
+.danger .fill {
+  background-color: var(--fill-danger);
+}
+
+.danger .trackArc {
+  stroke: var(--fill-danger-subtle);
+}
+
+.danger .valueArc {
+  stroke: var(--fill-danger);
+}
+
+.muted .track {
+  background-color: var(--fill-subtle);
+}
+
+.muted .fill {
+  background-color: var(--fill-strong);
+}
+
+.muted .trackArc {
+  stroke: var(--fill-subtle);
+}
+
+.muted .valueArc {
+  stroke: var(--fill-strong);
+}
+
+.sm .track {
+  height: var(--space-1);
+}
+
+.md .track {
+  height: var(--space-2);
+}
+
+.lg .track {
+  height: var(--space-3);
+}
+
+.overlay .track {
+  height: var(--space-5);
+  position: relative;
+}
+
+.overlayValue {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  padding: 0 var(--space-1);
+  border-radius: var(--radius-control-sm);
+  background: var(--surface-card);
+  font-family: var(--font-sans);
+  font-size: var(--type-size-caption);
+  font-weight: var(--type-weight-label);
+  line-height: var(--type-line-body);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.row .track {
+  flex: 1;
+  min-width: 0;
+}
+
+.fill {
+  height: 100%;
+  border-radius: inherit;
+  transform-origin: left center;
+  animation: progressLoad var(--motion-duration-400) var(--motion-ease-out) both;
+  transition: width var(--motion-interaction-duration) var(--motion-interaction-easing);
+}
+
+.meter {
+  position: relative;
+  width: var(--progress-size);
+  height: var(--progress-size);
+  overflow: hidden;
+}
+
+.semicircle .meter {
+  display: grid;
+  align-items: end; /* U sits in the bottom half */
+}
+
+.ring {
+  display: block;
+  overflow: hidden;
+}
+
+.semicircle .ring {
+  justify-self: stretch;
+}
+
+.trackArc,
+.valueArc {
+  fill: none;
+  stroke-linecap: butt;
+}
+
+.valueArc {
+  stroke-dashoffset: var(--progress-offset);
+  animation: progressArcLoad var(--motion-duration-400) var(--motion-ease-out) both;
+  transition: stroke-dashoffset var(--motion-interaction-duration) var(--motion-interaction-easing);
+}
+
+.holeValue {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-caption);
+  font-weight: var(--type-weight-label);
+  line-height: var(--type-line-body);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+
+.semicircle .holeValue {
+  top: 50%;
+  transform: translate(-50%, 0);
+  padding-top: var(--space-2);
+}
+
+@keyframes progressLoad {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+
+@keyframes progressArcLoad {
+  from {
+    stroke-dashoffset: var(--progress-c);
+  }
+  to {
+    stroke-dashoffset: var(--progress-offset);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fill,
+  .valueArc {
+    animation: none;
+    transition: none;
+  }
+}

package/ui/Progress/Progress.tsx

@@ -0,0 +1,167 @@
+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/Progress.types.ts

@@ -0,0 +1,15 @@
+export type ProgressSize = "sm" | "md" | "lg";
+export type ProgressValuePosition = "overlay" | "end";
+export type ProgressTone = "brand" | "danger" | "muted";
+export type ProgressShape = "bar" | "circle" | "semicircle";
+
+export interface ProgressProps {
+  value?: number;
+  size?: ProgressSize;
+  shape?: ProgressShape;
+  label?: string;
+  showValue?: boolean;
+  valuePosition?: ProgressValuePosition;
+  tone?: ProgressTone;
+  ariaLabel?: string;
+}

package/ui/Progress/index.ts

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

package/ui/ProgressSteps/ProgressSteps.module.css

@@ -0,0 +1,210 @@
+.root {
+  width: 100%;
+  min-width: 0;
+}
+
+.list {
+  display: flex;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.horizontal .list {
+  align-items: flex-start;
+}
+
+.vertical .list {
+  display: grid;
+  width: 100%;
+}
+
+.step {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+}
+
+.vertical .step {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  column-gap: var(--space-4);
+  align-items: stretch;
+  flex: none;
+}
+
+.markerRow {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.rail {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.line {
+  flex: 1;
+  min-width: var(--space-2);
+  height: var(--border-width-medium);
+  background: var(--border-faint);
+  transition: background-color var(--motion-interaction-duration) var(--motion-interaction-easing);
+}
+
+.lineComplete {
+  background: var(--fill-strong);
+}
+
+.horizontal .step:first-child .lineStart,
+.horizontal .step:last-child .lineEnd {
+  visibility: hidden;
+}
+
+.vertical .line {
+  width: var(--border-width-medium);
+  min-width: 0;
+  min-height: var(--space-6);
+  height: auto;
+  margin-block: var(--space-1);
+}
+
+.marker {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  border-radius: var(--radius-full);
+  font-family: var(--font-sans);
+  font-weight: var(--type-weight-label);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  transition:
+    background-color var(--motion-interaction-duration) var(--motion-interaction-easing),
+    border-color var(--motion-interaction-duration) var(--motion-interaction-easing),
+    color var(--motion-interaction-duration) var(--motion-interaction-easing),
+    box-shadow var(--motion-interaction-duration) var(--motion-interaction-easing);
+}
+
+.sm .marker {
+  width: var(--space-6);
+  height: var(--space-6);
+  font-size: var(--type-size-caption);
+}
+
+.md .marker {
+  width: var(--space-8);
+  height: var(--space-8);
+  font-size: var(--type-size-body-sm);
+}
+
+.complete .marker {
+  border: var(--border-width-medium) solid var(--fill-strong);
+  background: var(--fill-strong);
+  color: var(--icon-inverse);
+}
+
+.current .marker {
+  border: var(--border-width-medium) solid var(--border-brand);
+  background: var(--surface-card);
+  color: var(--text-brand);
+  box-shadow: 0 0 0 var(--space-1) var(--fill-brand-subtle);
+}
+
+.upcoming .marker {
+  border: var(--border-width-thin) solid var(--border-strong);
+  background: var(--surface-card);
+  color: var(--text-muted);
+}
+
+.error .marker {
+  border: var(--border-width-medium) solid var(--fill-danger);
+  background: var(--fill-danger);
+  color: var(--icon-inverse);
+}
+
+.number {
+  font: inherit;
+  color: inherit;
+}
+
+.copy {
+  display: grid;
+  gap: var(--space-1);
+  margin-top: var(--space-3);
+  padding-inline: var(--space-2);
+  width: 100%;
+  min-width: 0;
+  text-align: center;
+}
+
+.vertical .copy {
+  margin-top: 0;
+  padding-inline: 0;
+  padding-block-end: var(--space-6);
+  text-align: start;
+  align-self: start;
+}
+
+.vertical .step:last-child .copy {
+  padding-block-end: 0;
+}
+
+.label {
+  font-family: var(--font-sans);
+  font-size: var(--type-size-label);
+  font-weight: var(--type-weight-label);
+  line-height: var(--type-line-body);
+  color: var(--text-primary);
+  overflow-wrap: anywhere;
+}
+
+.sm .label {
+  font-size: var(--type-size-caption);
+}
+
+.upcoming .label {
+  color: var(--text-secondary);
+}
+
+.error .label {
+  color: var(--text-danger);
+}
+
+.description {
+  font-family: var(--font-sans);
+  font-size: var(--type-size-caption);
+  font-weight: var(--type-weight-body);
+  line-height: var(--type-line-body);
+  color: var(--text-secondary);
+  overflow-wrap: anywhere;
+}
+
+.upcoming .description {
+  color: var(--text-muted);
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .line,
+  .marker {
+    transition: none;
+  }
+}