agentic-ds-kit 0.1.0 → 0.2.0

package/{ui → dist/ui}/shared/controls.module.css

@@ -1,4 +1,4 @@
-.control {
+._control_ds57p_1 {
   display: block;
   width: 100%;
   font-family: var(--font-sans);
@@ -12,37 +12,37 @@
   transition: border-color var(--motion-fast) ease, outline-color var(--motion-fast) ease;
 }
 
-.control:focus {
+._control_ds57p_1:focus {
   border-color: var(--border-focus);
   outline: var(--border-focus-width) solid var(--focus-ring);
   outline-offset: var(--space-inset-2xs);
 }
 
-.control:disabled {
+._control_ds57p_1:disabled {
   opacity: 0.5;
   cursor: not-allowed;
   background-color: var(--surface-muted);
 }
 
-.controlLg {
+._controlLg_ds57p_27 {
   padding: var(--space-3) var(--space-4);
   font-size: var(--type-size-body);
 }
 
-.controlMd {
+._controlMd_ds57p_32 {
   padding: var(--space-2) var(--space-3);
 }
 
-.controlSm {
+._controlSm_ds57p_36 {
   padding: var(--space-1) var(--space-2);
   font-size: var(--type-size-label);
 }
 
-.controlError {
+._controlError_ds57p_41 {
   border-color: var(--status-danger);
 }
 
-.controlError:focus {
+._controlError_ds57p_41:focus {
   border-color: var(--status-danger);
   outline-color: var(--status-danger);
 }

package/dist/ui/shared/controls.module.js

@@ -0,0 +1,13 @@
+import "./controls.module.css";
+//#region ui/shared/controls.module.css
+var e = "_control_ds57p_1", t = "_controlLg_ds57p_27", n = "_controlMd_ds57p_32", r = "_controlSm_ds57p_36", i = "_controlError_ds57p_41", a = {
+	control: e,
+	controlLg: t,
+	controlMd: n,
+	controlSm: r,
+	controlError: i
+};
+//#endregion
+export { e as control, i as controlError, t as controlLg, n as controlMd, r as controlSm, a as default };
+
+//# sourceMappingURL=controls.module.js.map

package/dist/ui/shared/controls.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls.module.js","names":[],"sources":["../../../ui/shared/controls.module.css"],"sourcesContent":[".control {\n  display: block;\n  width: 100%;\n  font-family: var(--font-sans);\n  font-size: var(--type-size-body-sm);\n  font-weight: var(--type-weight-body);\n  line-height: var(--type-line-body);\n  color: var(--text-primary);\n  background-color: var(--surface-card);\n  border: var(--border-width-thin) solid var(--border-faint);\n  border-radius: var(--radius-control-md);\n  transition: border-color var(--motion-fast) ease, outline-color var(--motion-fast) ease;\n}\n\n.control:focus {\n  border-color: var(--border-focus);\n  outline: var(--border-focus-width) solid var(--focus-ring);\n  outline-offset: var(--space-inset-2xs);\n}\n\n.control:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  background-color: var(--surface-muted);\n}\n\n.controlLg {\n  padding: var(--space-3) var(--space-4);\n  font-size: var(--type-size-body);\n}\n\n.controlMd {\n  padding: var(--space-2) var(--space-3);\n}\n\n.controlSm {\n  padding: var(--space-1) var(--space-2);\n  font-size: var(--type-size-label);\n}\n\n.controlError {\n  border-color: var(--status-danger);\n}\n\n.controlError:focus {\n  border-color: var(--status-danger);\n  outline-color: var(--status-danger);\n}\n"],"mappings":""}

package/dist/ui/shared/useChartSize.d.ts

@@ -0,0 +1,5 @@
+export declare function useChartSize(fallbackHeight: number): {
+    ref: import('react').RefObject<HTMLDivElement | null>;
+    width: number;
+    height: number;
+};

package/dist/ui/shared/useChartSize.js

@@ -0,0 +1,22 @@
+"use client";
+import { useEffect as e, useRef as t, useState as n } from "react";
+//#region ui/shared/useChartSize.ts
+function r(r) {
+	let i = t(null), [a, o] = n(0);
+	return e(() => {
+		let e = i.current;
+		if (!e) return;
+		let t = () => o(e.clientWidth);
+		t();
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, []), {
+		ref: i,
+		width: a,
+		height: r
+	};
+}
+//#endregion
+export { r as useChartSize };
+
+//# sourceMappingURL=useChartSize.js.map

package/dist/ui/shared/useChartSize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChartSize.js","names":[],"sources":["../../../ui/shared/useChartSize.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\n\nexport function useChartSize(fallbackHeight: number) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState(0);\n\n  useEffect(() => {\n    const node = ref.current;\n    if (!node) return undefined;\n\n    const update = () => setWidth(node.clientWidth);\n    update();\n\n    const observer = new ResizeObserver(update);\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, []);\n\n  return { ref, width, height: fallbackHeight };\n}\n"],"mappings":";;;AAIA,SAAgB,EAAa,GAAwB;CACnD,IAAM,IAAM,EAAuB,IAAI,GACjC,CAAC,GAAO,KAAY,EAAS,CAAC;CAcpC,OAZA,QAAgB;EACd,IAAM,IAAO,EAAI;EACjB,IAAI,CAAC,GAAM;EAEX,IAAM,UAAe,EAAS,EAAK,WAAW;EAC9C,EAAO;EAEP,IAAM,IAAW,IAAI,eAAe,CAAM;EAE1C,OADA,EAAS,QAAQ,CAAI,SACR,EAAS,WAAW;CACnC,GAAG,CAAC,CAAC,GAEE;EAAE;EAAK;EAAO,QAAQ;CAAe;AAC9C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentic-ds-kit",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Code-only agentic design system: contracts, tokens, and React components.",
   "license": "MIT",
   "repository": {
@@ -14,20 +14,27 @@
   },
   "type": "module",
   "sideEffects": [
-    "**/*.css"
+    "**/*.css",
+    "**/*.module.js",
+    "./src/tokens.ts",
+    "./dist/src/tokens.js"
   ],
   "files": [
-    "src",
-    "ui",
+    "dist",
     "contracts",
     "tokens",
     "lib",
     "skills",
     "AGENTS.md",
-    "CLAUDE.md"
+    "CLAUDE.md",
+    "LICENSE"
   ],
   "exports": {
-    ".": "./src/index.ts",
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "import": "./dist/src/index.js",
+      "default": "./dist/src/index.js"
+    },
     "./tokens.css": "./lib/tokens.css",
     "./contracts/index.json": "./contracts/index.json",
     "./contracts/*.json": "./contracts/*.json",
@@ -36,20 +43,33 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "generate:tokens": "node scripts/generate-tokens.mjs"
+    "generate:tokens": "node scripts/generate-tokens.mjs",
+    "build": "npm run generate:tokens && vite build",
+    "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
+    "next": ">=14",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "embla-carousel-react": "^8.6.0",
     "lucide-react": "^1.37.0"
   },
   "devDependencies": {
+    "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "typescript": "^5"
+    "@vitejs/plugin-react": "^6.1.1",
+    "rollup-preserve-directives": "^1.1.3",
+    "typescript": "^5",
+    "vite": "^8.2.2",
+    "vite-plugin-dts": "^5.1.0"
   },
   "engines": {
     "node": ">=20"

package/skills/prototype-from-kit/SKILL.md

@@ -18,7 +18,7 @@ Use this skill when adding or changing UI in an app that depends on `agentic-ds-
 ## Hard rules
 
 - Never define local cousins of kit components.
-- Import tokens once: `import "agentic-ds-kit/tokens.css"`.
+- Importing from `agentic-ds-kit` loads tokens. Do not add a second tokens import unless your own CSS needs the variables first.
 - Never use raw hex in component styles; semantic tokens only.
 - Metric rows use `<Scoreboard items={...} />`, not flex layouts with borders.
 - Settings pages use the `settings-form` pattern with `Field` wrappers.

package/src/index.ts

@@ -1,71 +0,0 @@
-/** Public kit API. Import components and patterns from `agentic-ds-kit`. */
-
-export * from "../ui/Accordion";
-export * from "../ui/Alert";
-export * from "../ui/AlertDialog";
-export * from "../ui/AppHeader";
-export * from "../ui/AppNav";
-export * from "../ui/Avatar";
-export * from "../ui/AvatarGroup";
-export * from "../ui/Badge";
-export * from "../ui/BarChart";
-export * from "../ui/Breadcrumb";
-export * from "../ui/Button";
-export * from "../ui/ButtonGroup";
-export * from "../ui/Calendar";
-export * from "../ui/Card";
-export * from "../ui/Carousel";
-export * from "../ui/Cell";
-export * from "../ui/Chat";
-export * from "../ui/Checkbox";
-export * from "../ui/Collapsible";
-export * from "../ui/Command";
-export * from "../ui/DataTable";
-export * from "../ui/DatePicker";
-export * from "../ui/Drawer";
-export * from "../ui/DropdownMenu";
-export * from "../ui/Empty";
-export * from "../ui/Field";
-export * from "../ui/FieldSet";
-export * from "../ui/HeaderCell";
-export * from "../ui/Input";
-export * from "../ui/InputOTP";
-export * from "../ui/InsightCard";
-export * from "../ui/LineChart";
-export * from "../ui/LoadingAnimation";
-export * from "../ui/Modal";
-export * from "../ui/ModalCard";
-export * from "../ui/NavigationMenu";
-export * from "../ui/NumberTransition";
-export * from "../ui/PageHeader";
-export * from "../ui/Pagination";
-export * from "../ui/PieChart";
-export * from "../ui/Progress";
-export * from "../ui/ProgressSteps";
-export * from "../ui/RadioGroup";
-export * from "../ui/Scoreboard";
-export * from "../ui/Scorecard";
-export * from "../ui/Section";
-export * from "../ui/Select";
-export * from "../ui/ShimmerText";
-export * from "../ui/SideNav";
-export * from "../ui/Slider";
-export * from "../ui/Spinner";
-export * from "../ui/Switch";
-export * from "../ui/Table";
-export * from "../ui/Tabs";
-export * from "../ui/Textarea";
-export * from "../ui/ThinkingAnimation";
-export * from "../ui/Timeline";
-export * from "../ui/Toast";
-export * from "../ui/Tooltip";
-
-export * from "../ui/patterns/ActivityPattern";
-export * from "../ui/patterns/AssistantWorkspacePattern";
-export * from "../ui/patterns/DashboardPattern";
-export * from "../ui/patterns/EmptyFirstRunPattern";
-export * from "../ui/patterns/InboxPattern";
-export * from "../ui/patterns/InviteMembersPattern";
-export * from "../ui/patterns/ListDetailPattern";
-export * from "../ui/patterns/SettingsFormPattern";
-

package/ui/Accordion/Accordion.tsx

@@ -1,51 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { ChevronDown } from "lucide-react";
-import type { AccordionProps } from "./Accordion.types";
-import styles from "./Accordion.module.css";
-
-export type { AccordionProps, AccordionItem } from "./Accordion.types";
-
-export function Accordion({ items, defaultOpen }: AccordionProps) {
-  const [openId, setOpenId] = useState<string | null>(defaultOpen ?? null);
-
-  return (
-    <div className={styles.root}>
-      {items.map((item) => {
-        const open = openId === item.id;
-        const panelId = `accordion-panel-${item.id}`;
-        const buttonId = `accordion-button-${item.id}`;
-        return (
-          <div key={item.id} className={styles.item}>
-            <button
-              type="button"
-              id={buttonId}
-              className={`${styles.trigger} ${open ? styles.triggerOpen : ""}`}
-              aria-expanded={open}
-              aria-controls={panelId}
-              onClick={() => setOpenId((current) => (current === item.id ? null : item.id))}
-            >
-              <span className={styles.title}>{item.title}</span>
-              <ChevronDown
-                className={`${styles.chevron} ${open ? styles.chevronOpen : ""}`}
-                size={16}
-                strokeWidth={2}
-                aria-hidden
-              />
-            </button>
-            <div
-              id={panelId}
-              role="region"
-              aria-labelledby={buttonId}
-              className={styles.panel}
-              hidden={!open}
-            >
-              <p className={styles.body}>{item.content}</p>
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}

package/ui/Accordion/Accordion.types.ts

@@ -1,10 +0,0 @@
-export interface AccordionItem {
-  id: string;
-  title: string;
-  content: string;
-}
-
-export interface AccordionProps {
-  items: AccordionItem[];
-  defaultOpen?: string;
-}

package/ui/Accordion/index.ts

@@ -1,2 +0,0 @@
-export { Accordion } from "./Accordion";
-export type { AccordionProps, AccordionItem } from "./Accordion.types";

package/ui/Alert/Alert.tsx

@@ -1,27 +0,0 @@
-import { CircleAlert, CircleCheck, Info, TriangleAlert } from "lucide-react";
-import type { AlertProps, AlertVariant } from "./Alert.types";
-import styles from "./Alert.module.css";
-
-export type { AlertProps, AlertVariant } from "./Alert.types";
-
-const ICONS: Record<AlertVariant, typeof Info> = {
-  info: Info,
-  success: CircleCheck,
-  warning: TriangleAlert,
-  danger: CircleAlert,
-};
-
-export function Alert({ children, variant = "info", title }: AlertProps) {
-  const Icon = ICONS[variant];
-  const role = variant === "warning" || variant === "danger" ? "alert" : "status";
-
-  return (
-    <div className={`${styles.alert} ${styles[variant]}`} role={role}>
-      <Icon className={styles.icon} size={18} strokeWidth={2} aria-hidden />
-      <div className={styles.copy}>
-        {title ? <p className={styles.title}>{title}</p> : null}
-        <p className={styles.body}>{children}</p>
-      </div>
-    </div>
-  );
-}

package/ui/Alert/index.ts

@@ -1,2 +0,0 @@
-export { Alert } from "./Alert";
-export type { AlertProps, AlertVariant } from "./Alert.types";

package/ui/AlertDialog/AlertDialog.tsx

@@ -1,109 +0,0 @@
-"use client";
-
-import { useEffect, useId, useRef } from "react";
-import { Button } from "../Button";
-import { ButtonGroup } from "../ButtonGroup";
-import type { AlertDialogProps } from "./AlertDialog.types";
-import styles from "./AlertDialog.module.css";
-
-export type { AlertDialogProps, AlertDialogActionVariant, AlertDialogSize } from "./AlertDialog.types";
-
-export function AlertDialog({
-  open,
-  title,
-  description,
-  cancelLabel = "Cancel",
-  actionLabel,
-  actionVariant = "primary",
-  size = "md",
-  onCancel,
-  onAction,
-}: AlertDialogProps) {
-  const titleId = useId();
-  const descriptionId = useId();
-  const dialogRef = useRef<HTMLDivElement>(null);
-  const cancelRef = useRef<HTMLButtonElement | null>(null);
-  const onCancelRef = useRef(onCancel);
-
-  onCancelRef.current = onCancel;
-
-  useEffect(() => {
-    if (!open) return;
-
-    const root = dialogRef.current;
-    if (!root) return;
-
-    const cancelButton = root.querySelector<HTMLButtonElement>("button");
-    cancelRef.current = cancelButton;
-    cancelButton?.focus();
-
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        onCancelRef.current();
-        return;
-      }
-
-      if (event.key !== "Tab") return;
-
-      const buttons = Array.from(root.querySelectorAll<HTMLButtonElement>("button"));
-      if (buttons.length === 0) return;
-
-      const first = buttons[0];
-      const last = buttons[buttons.length - 1];
-      const active = document.activeElement;
-      const inside = active instanceof Node && root.contains(active);
-
-      if (event.shiftKey) {
-        if (!inside || active === first) {
-          event.preventDefault();
-          last.focus();
-        }
-      } else if (!inside || active === last) {
-        event.preventDefault();
-        first.focus();
-      }
-    };
-
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [open]);
-
-  if (!open) return null;
-
-  return (
-    <div
-      className={styles.overlay}
-      role="presentation"
-      onMouseDown={(event) => {
-        if (event.target === event.currentTarget) event.preventDefault();
-      }}
-    >
-      <div
-        ref={dialogRef}
-        role="alertdialog"
-        aria-modal="true"
-        aria-labelledby={titleId}
-        aria-describedby={descriptionId}
-        className={`${styles.dialog} ${styles[size]}`}
-      >
-        <h2 id={titleId} className={styles.title}>
-          {title}
-        </h2>
-        <p id={descriptionId} className={styles.description}>
-          {description}
-        </p>
-        <div className={styles.footer}>
-          <ButtonGroup ariaLabel="Dialog actions">
-            <Button variant="secondary" size="md" onClick={onCancel}>
-              {cancelLabel}
-            </Button>
-            <Button variant={actionVariant} size="md" onClick={onAction}>
-              {actionLabel}
-            </Button>
-          </ButtonGroup>
-        </div>
-      </div>
-    </div>
-  );
-}

package/ui/AlertDialog/AlertDialog.types.ts

@@ -1,14 +0,0 @@
-export type AlertDialogSize = "sm" | "md";
-export type AlertDialogActionVariant = "primary" | "danger";
-
-export interface AlertDialogProps {
-  open: boolean;
-  title: string;
-  description: string;
-  cancelLabel?: string;
-  actionLabel: string;
-  actionVariant?: AlertDialogActionVariant;
-  size?: AlertDialogSize;
-  onCancel: () => void;
-  onAction: () => void;
-}

package/ui/AlertDialog/index.ts

@@ -1,6 +0,0 @@
-export { AlertDialog } from "./AlertDialog";
-export type {
-  AlertDialogProps,
-  AlertDialogSize,
-  AlertDialogActionVariant,
-} from "./AlertDialog.types";

package/ui/AppHeader/AppHeader.tsx

@@ -1,70 +0,0 @@
-import { useId } from "react";
-import { Input } from "../Input";
-import type { AppHeaderProps } from "./AppHeader.types";
-import styles from "./AppHeader.module.css";
-
-export type { AppHeaderProps, AppHeaderRadius } from "./AppHeader.types";
-
-export function AppHeader({
-  title,
-  mark,
-  logo,
-  search = true,
-  searchPlaceholder = "Search",
-  searchValue,
-  defaultSearchValue,
-  onSearch,
-  searchShortcut,
-  searchId,
-  actions,
-  className = "",
-  ariaLabel,
-  radius = "none",
-}: AppHeaderProps) {
-  const generatedId = useId();
-  const inputId = searchId ?? generatedId;
-  const markLetter = (mark && mark.length > 0 ? mark : title?.charAt(0)) || "·";
-  const label = ariaLabel ?? title ?? "Application";
-
-  return (
-    <header
-      className={`${styles.header} ${radius === "md" ? styles.radiusMd : ""} ${className}`.trim()}
-      aria-label={label}
-      data-search={search ? undefined : "false"}
-    >
-      <div className={styles.start}>
-        {logo ? (
-          <div className={styles.logo}>{logo}</div>
-        ) : (
-          <span className={styles.mark} aria-hidden>
-            {markLetter}
-          </span>
-        )}
-        {title ? <p className={styles.title}>{title}</p> : null}
-      </div>
-
-      {search ? (
-        <div className={styles.center}>
-          <div className={styles.search}>
-            <Input
-              id={inputId}
-              type="search"
-              size="md"
-              placeholder={searchPlaceholder}
-              value={searchValue}
-              defaultValue={defaultSearchValue}
-              onChange={onSearch}
-              iconStart="Search"
-              end={searchShortcut}
-              ariaLabel={searchPlaceholder}
-            />
-          </div>
-        </div>
-      ) : null}
-
-      <div className={styles.end} role={actions ? "group" : undefined} aria-label={actions ? "Actions" : undefined}>
-        {actions}
-      </div>
-    </header>
-  );
-}

package/ui/AppHeader/AppHeader.types.ts

@@ -1,28 +0,0 @@
-import type { ReactNode } from "react";
-
-export type AppHeaderRadius = "md" | "none";
-
-export interface AppHeaderProps {
-  /** Product name next to the mark. Ignored as a heading — this is chrome, not PageHeader. */
-  title?: string;
-  /** Brand letter. Defaults to the first character of title. Used when logo is omitted. */
-  mark?: string;
-  /** Custom mark or wordmark. Replaces the default letter mark. Pass the consumer’s logo here. */
-  logo?: ReactNode;
-  /** Show the centered kit Input. Default true. */
-  search?: boolean;
-  searchPlaceholder?: string;
-  searchValue?: string;
-  defaultSearchValue?: string;
-  /** Input onChange. */
-  onSearch?: (value: string) => void;
-  /** Decorative shortcut in the Input end slot, e.g. ⌘K. */
-  searchShortcut?: string;
-  searchId?: string;
-  /** Trailing kit Buttons (and optional Avatar). At most one primary. */
-  actions?: ReactNode;
-  className?: string;
-  ariaLabel?: string;
-  /** Bar corners. none is flush; md is radius-surface-md. */
-  radius?: AppHeaderRadius;
-}

package/ui/AppHeader/index.ts

@@ -1,2 +0,0 @@
-export { AppHeader } from "./AppHeader";
-export type { AppHeaderProps, AppHeaderRadius } from "./AppHeader.types";