agentic-ds-kit 0.1.0

package/ui/InputOTP/InputOTP.module.css

@@ -0,0 +1,139 @@
+.root {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  width: fit-content;
+  font-family: var(--font-sans);
+  color: var(--text-primary);
+}
+
+.root[data-disabled] {
+  opacity: var(--opacity-disabled);
+  pointer-events: none;
+}
+
+.native {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  background: transparent;
+  color: transparent;
+  caret-color: transparent;
+  font: inherit;
+  cursor: text;
+}
+
+.native:disabled {
+  cursor: not-allowed;
+}
+
+.group {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.separator {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  color: var(--icon-muted);
+  pointer-events: none;
+}
+
+.slot {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  pointer-events: none;
+  background-color: var(--surface-card);
+  border: var(--border-width-thin) solid var(--border-faint);
+  border-radius: var(--radius-control-md);
+  font-family: var(--font-sans);
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--type-weight-label);
+  line-height: 1;
+  color: var(--text-primary);
+  text-align: center;
+  transition:
+    border-color var(--motion-fast) ease,
+    outline-color var(--motion-fast) ease;
+}
+
+.sm .slot {
+  width: 1.75rem;
+  height: 1.75rem;
+  font-size: var(--type-size-caption);
+}
+
+.md .slot {
+  width: 2.25rem;
+  height: 2.25rem;
+  font-size: var(--type-size-body-sm);
+}
+
+.lg .slot {
+  width: 2.75rem;
+  height: 2.75rem;
+  font-size: var(--type-size-body);
+}
+
+.root:not([data-disabled]):not([data-error]):not(:focus-within):hover .slot {
+  border-color: var(--border-strong);
+}
+
+.root:focus-within .slotActive {
+  outline: var(--border-focus-width) solid var(--focus-ring);
+  outline-offset: var(--space-inset-2xs);
+  border-color: var(--border-focus);
+}
+
+.root[data-error] .slot {
+  border-color: var(--status-danger);
+}
+
+.root[data-error]:focus-within .slotActive {
+  outline-color: var(--status-danger);
+  border-color: var(--status-danger);
+}
+
+.char {
+  display: block;
+}
+
+.caret {
+  display: none;
+  width: var(--border-width-thin);
+  height: 1em;
+  background-color: var(--text-primary);
+}
+
+.root:focus-within .slotActive .caret {
+  display: block;
+  animation: otpCaret var(--motion-duration-600) var(--motion-ease-linear) infinite alternate;
+}
+
+@keyframes otpCaret {
+  from {
+    opacity: var(--opacity-full);
+  }
+  to {
+    opacity: var(--opacity-0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .root:focus-within .slotActive .caret {
+    animation: none;
+    opacity: var(--opacity-full);
+  }
+}

package/ui/InputOTP/InputOTP.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { Fragment, useRef, useState } from "react";
+import { LucideByName } from "../Button/lucideName";
+import type { InputOTPPattern, InputOTPProps, InputOTPSize } from "./InputOTP.types";
+import styles from "./InputOTP.module.css";
+
+export type { InputOTPProps, InputOTPSize, InputOTPPattern } from "./InputOTP.types";
+
+const ICON_PX: Record<InputOTPSize, number> = { sm: 12, md: 16, lg: 18 };
+
+function sanitize(raw: string, pattern: InputOTPPattern, length: number): string {
+  const next =
+    pattern === "digits"
+      ? raw.replace(/\D/g, "")
+      : raw.replace(/[^A-Za-z0-9]/g, "").toUpperCase();
+  return next.slice(0, length);
+}
+
+function resolveGroups(length: number, groups?: number[]): number[] {
+  if (groups && groups.length > 0) {
+    const sum = groups.reduce((total, count) => total + count, 0);
+    if (sum === length) return groups;
+  }
+  if (length === 6) return [3, 3];
+  return [length];
+}
+
+export function InputOTP({
+  id,
+  length = 6,
+  groups,
+  size = "md",
+  disabled = false,
+  error = false,
+  value,
+  defaultValue = "",
+  onChange,
+  onComplete,
+  pattern = "digits",
+  name,
+  autoComplete = "one-time-code",
+  ariaLabel,
+}: InputOTPProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const isControlled = typeof value === "string";
+  const [uncontrolled, setUncontrolled] = useState(() =>
+    sanitize(defaultValue, pattern, length),
+  );
+  const current = sanitize(isControlled ? value : uncontrolled, pattern, length);
+  const slotGroups = resolveGroups(length, groups);
+  const activeIndex = current.length >= length ? length - 1 : current.length;
+  const iconPx = ICON_PX[size];
+
+  function commit(raw: string) {
+    const next = sanitize(raw, pattern, length);
+    if (!isControlled) setUncontrolled(next);
+    onChange?.(next);
+    if (next.length === length) onComplete?.(next);
+  }
+
+  function focusInput() {
+    if (disabled) return;
+    const el = inputRef.current;
+    if (!el) return;
+    el.focus();
+    const pos = current.length;
+    el.setSelectionRange(pos, pos);
+  }
+
+  let offset = 0;
+
+  return (
+    <div
+      className={`${styles.root} ${styles[size]}`}
+      data-disabled={disabled || undefined}
+      data-error={error || undefined}
+      onClick={focusInput}
+    >
+      <input
+        ref={inputRef}
+        id={id}
+        name={name}
+        className={styles.native}
+        value={current}
+        disabled={disabled}
+        maxLength={length}
+        autoComplete={autoComplete}
+        autoCapitalize="off"
+        spellCheck={false}
+        inputMode={pattern === "digits" ? "numeric" : "text"}
+        aria-invalid={error || undefined}
+        aria-label={ariaLabel}
+        onChange={(event) => commit(event.target.value)}
+        onPaste={(event) => {
+          event.preventDefault();
+          commit(event.clipboardData.getData("text"));
+        }}
+      />
+      {slotGroups.map((count, groupIndex) => {
+        const start = offset;
+        offset += count;
+        return (
+          <Fragment key={`group-${groupIndex}-${start}`}>
+            {groupIndex > 0 ? (
+              <span className={styles.separator} aria-hidden>
+                <LucideByName name="Minus" size={iconPx} />
+              </span>
+            ) : null}
+            <span className={styles.group}>
+              {Array.from({ length: count }, (_, slotIndex) => {
+                const index = start + slotIndex;
+                const char = current[index];
+                const isActive = index === activeIndex;
+                return (
+                  <span
+                    key={index}
+                    className={`${styles.slot}${isActive ? ` ${styles.slotActive}` : ""}`}
+                    data-active={isActive || undefined}
+                    aria-hidden
+                  >
+                    {char ? (
+                      <span className={styles.char}>{char}</span>
+                    ) : isActive ? (
+                      <span className={styles.caret} />
+                    ) : null}
+                  </span>
+                );
+              })}
+            </span>
+          </Fragment>
+        );
+      })}
+    </div>
+  );
+}

package/ui/InputOTP/InputOTP.types.ts

@@ -0,0 +1,19 @@
+export type InputOTPSize = "sm" | "md" | "lg";
+export type InputOTPPattern = "digits" | "alphanumeric";
+
+export interface InputOTPProps {
+  id: string;
+  length?: number;
+  groups?: number[];
+  size?: InputOTPSize;
+  disabled?: boolean;
+  error?: boolean;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  onComplete?: (value: string) => void;
+  pattern?: InputOTPPattern;
+  name?: string;
+  autoComplete?: string;
+  ariaLabel?: string;
+}

package/ui/InputOTP/index.ts

@@ -0,0 +1,2 @@
+export { InputOTP } from "./InputOTP";
+export type { InputOTPProps, InputOTPSize, InputOTPPattern } from "./InputOTP.types";

package/ui/InsightCard/InsightCard.module.css

@@ -0,0 +1,166 @@
+.card {
+  --insight-padding: var(--space-6);
+  --insight-gap: var(--space-4);
+  --insight-width: 24rem;
+  display: flex;
+  flex-direction: column;
+  gap: var(--insight-gap);
+  width: min(100%, var(--insight-width));
+  min-width: 0;
+  padding: var(--insight-padding);
+  background-color: var(--surface-card);
+  border: var(--border-highlight) solid var(--border-faint);
+  border-radius: var(--radius-surface-md);
+  box-shadow: var(--shadow-sm);
+}
+
+.sm {
+  --insight-padding: var(--space-4);
+  --insight-gap: var(--space-3);
+  --insight-width: 20rem;
+}
+
+.md {
+  --insight-padding: var(--space-6);
+  --insight-gap: var(--space-4);
+  --insight-width: 24rem;
+}
+
+.lg {
+  --insight-padding: var(--space-8);
+  --insight-gap: var(--space-5);
+  --insight-width: 28rem;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+
+.lead {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.icon {
+  display: block;
+  flex-shrink: 0;
+  color: var(--icon-brand);
+}
+
+.opportunity .icon {
+  color: var(--icon-brand);
+}
+
+.warning .icon {
+  color: var(--icon-warning);
+}
+
+.danger .icon {
+  color: var(--icon-danger);
+}
+
+.info .icon {
+  color: var(--icon-info);
+}
+
+.neutral .icon {
+  color: var(--icon-secondary);
+}
+
+.eyebrow {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-caption);
+  font-weight: var(--type-weight-caption);
+  line-height: var(--type-line-body);
+  color: var(--text-secondary);
+}
+
+.confidence {
+  flex-shrink: 0;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-caption);
+  font-weight: var(--type-weight-caption);
+  line-height: var(--type-line-body);
+  color: var(--text-muted);
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.title {
+  margin: 0;
+  overflow-wrap: anywhere;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-heading);
+  font-weight: var(--type-weight-heading);
+  line-height: var(--type-line-heading);
+  color: var(--text-primary);
+}
+
+.description {
+  margin: 0;
+  overflow-wrap: anywhere;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body-sm);
+  line-height: var(--type-line-body);
+  color: var(--text-secondary);
+}
+
+.source {
+  margin: 0;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-caption);
+  font-weight: var(--type-weight-caption);
+  line-height: var(--type-line-body);
+  color: var(--text-muted);
+}
+
+.footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-3);
+  margin-block-start: auto;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.dismiss {
+  margin: 0;
+  margin-inline-start: auto;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-caption);
+  font-weight: var(--type-weight-caption);
+  line-height: var(--type-line-body);
+  color: var(--text-muted);
+  cursor: pointer;
+}
+
+.dismiss:hover {
+  color: var(--text-secondary);
+}
+
+.dismiss:focus-visible {
+  outline: var(--border-focus-width) solid var(--focus-ring);
+  outline-offset: var(--space-inset-2xs);
+}

package/ui/InsightCard/InsightCard.tsx

@@ -0,0 +1,90 @@
+import { useId } from "react";
+import { Button } from "../Button";
+import { LucideByName } from "../Button/lucideName";
+import type { InsightCardProps, InsightCardTone } from "./InsightCard.types";
+import styles from "./InsightCard.module.css";
+
+export type {
+  InsightCardProps,
+  InsightCardTone,
+  InsightCardSize,
+  InsightCardAction,
+} from "./InsightCard.types";
+
+const TONE_ICON: Record<InsightCardTone, string> = {
+  opportunity: "Sparkles",
+  warning: "TriangleAlert",
+  danger: "CircleX",
+  info: "Info",
+  neutral: "Sparkles",
+};
+
+const ICON_SIZE = { sm: 14, md: 16, lg: 18 } as const;
+
+export function InsightCard({
+  title,
+  description,
+  eyebrow = "Insight",
+  tone = "opportunity",
+  size = "md",
+  confidence,
+  source,
+  primaryAction,
+  secondaryAction,
+  onDismiss,
+}: InsightCardProps) {
+  const titleId = useId();
+  const descriptionId = useId();
+  const showFooter = Boolean(primaryAction || secondaryAction || onDismiss);
+  const buttonSize = size === "lg" ? "md" : "sm";
+
+  return (
+    <article
+      className={`${styles.card} ${styles[size]} ${styles[tone]}`}
+      aria-labelledby={titleId}
+      aria-describedby={description ? descriptionId : undefined}
+    >
+      <header className={styles.header}>
+        <div className={styles.lead}>
+          <LucideByName name={TONE_ICON[tone]} size={ICON_SIZE[size]} className={styles.icon} />
+          <span className={styles.eyebrow}>{eyebrow}</span>
+        </div>
+        {confidence ? <span className={styles.confidence}>{confidence}</span> : null}
+      </header>
+      <div className={styles.body}>
+        <h3 id={titleId} className={styles.title}>
+          {title}
+        </h3>
+        {description ? (
+          <p id={descriptionId} className={styles.description}>
+            {description}
+          </p>
+        ) : null}
+        {source ? <p className={styles.source}>{source}</p> : null}
+      </div>
+      {showFooter ? (
+        <footer className={styles.footer}>
+          {primaryAction || secondaryAction ? (
+            <div className={styles.actions}>
+              {primaryAction ? (
+                <Button variant="primary" size={buttonSize} onClick={primaryAction.onClick}>
+                  {primaryAction.label}
+                </Button>
+              ) : null}
+              {secondaryAction ? (
+                <Button variant="secondary" size={buttonSize} onClick={secondaryAction.onClick}>
+                  {secondaryAction.label}
+                </Button>
+              ) : null}
+            </div>
+          ) : null}
+          {onDismiss ? (
+            <button type="button" className={styles.dismiss} onClick={onDismiss}>
+              Dismiss
+            </button>
+          ) : null}
+        </footer>
+      ) : null}
+    </article>
+  );
+}

package/ui/InsightCard/InsightCard.types.ts

@@ -0,0 +1,20 @@
+export type InsightCardTone = "opportunity" | "warning" | "danger" | "info" | "neutral";
+export type InsightCardSize = "sm" | "md" | "lg";
+
+export interface InsightCardAction {
+  label: string;
+  onClick?: () => void;
+}
+
+export interface InsightCardProps {
+  title: string;
+  description?: string;
+  eyebrow?: string;
+  tone?: InsightCardTone;
+  size?: InsightCardSize;
+  confidence?: string;
+  source?: string;
+  primaryAction?: InsightCardAction;
+  secondaryAction?: InsightCardAction;
+  onDismiss?: () => void;
+}

package/ui/InsightCard/index.ts

@@ -0,0 +1,7 @@
+export { InsightCard } from "./InsightCard";
+export type {
+  InsightCardProps,
+  InsightCardTone,
+  InsightCardSize,
+  InsightCardAction,
+} from "./InsightCard.types";

package/ui/LineChart/LineChart.module.css

@@ -0,0 +1,93 @@
+.plot {
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  overflow: visible;
+}
+
+.chart {
+  display: block;
+  width: 100%;
+  overflow: visible;
+}
+
+.grid {
+  stroke: var(--border-strong);
+  stroke-width: 1;
+  shape-rendering: crispEdges;
+  pointer-events: none;
+}
+
+.axis {
+  stroke: var(--border-strong);
+  stroke-width: 1;
+  shape-rendering: crispEdges;
+  pointer-events: none;
+}
+
+.crosshair {
+  stroke: var(--text-muted);
+  stroke-width: 1;
+  opacity: 0.45;
+  pointer-events: none;
+}
+
+.series {
+  transition: opacity 0.48s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.seriesDimmed {
+  opacity: 0.45;
+}
+
+.area {
+  fill-opacity: 0.15;
+  pointer-events: none;
+}
+
+.line {
+  fill: none;
+  stroke-width: 2.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  pointer-events: none;
+}
+
+.dot {
+  stroke: var(--surface-card);
+  stroke-width: 2.5;
+  pointer-events: none;
+}
+
+.categoryLabel,
+.tickLabel {
+  fill: var(--text-muted);
+  font-family: var(--font-sans);
+  font-size: var(--type-size-caption);
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+}
+
+.hit {
+  fill: transparent;
+  cursor: pointer;
+  outline: none;
+  pointer-events: none;
+}
+
+.hit:focus-visible {
+  outline: var(--border-focus-width) solid var(--focus-ring);
+  outline-offset: var(--space-inset-2xs);
+}
+
+.overlay {
+  fill: transparent;
+  cursor: pointer;
+  touch-action: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .series {
+    transition: opacity var(--motion-interaction-duration) var(--motion-interaction-easing);
+  }
+}