@agentaily/design-system 0.1.0

package/dist/index.js

@@ -0,0 +1,208 @@
+import { Attachments } from "./components/ai/Attachments.js";
+import { Checkpoint } from "./components/ai/Checkpoint.js";
+import { Confirmation } from "./components/ai/Confirmation.js";
+import { Context } from "./components/ai/Context.js";
+import { Conversation } from "./components/ai/Conversation.js";
+import { ModelSelector } from "./components/ai/ModelSelector.js";
+import { Plan } from "./components/ai/Plan.js";
+import { Queue } from "./components/ai/Queue.js";
+import { Reasoning } from "./components/ai/Reasoning.js";
+import { Shimmer } from "./components/ai/Shimmer.js";
+import { Citation, Sources } from "./components/ai/Sources.js";
+import { Suggestion, Suggestions } from "./components/ai/Suggestion.js";
+import { Task } from "./components/ai/Task.js";
+import { ToolCall } from "./components/ai/ToolCall.js";
+import { Button } from "./components/buttons/Button.js";
+import { ButtonGroup } from "./components/buttons/ButtonGroup.js";
+import { IconButton } from "./components/buttons/IconButton.js";
+import { CodeBlock } from "./components/chat/CodeBlock.js";
+import { Composer } from "./components/chat/Composer.js";
+import { Message } from "./components/chat/Message.js";
+import { Agent } from "./components/code/Agent.js";
+import { Artifact } from "./components/code/Artifact.js";
+import { Commit } from "./components/code/Commit.js";
+import { EnvironmentVariables } from "./components/code/EnvironmentVariables.js";
+import { FileTree } from "./components/code/FileTree.js";
+import { JSXPreview } from "./components/code/JSXPreview.js";
+import { PackageInfo } from "./components/code/PackageInfo.js";
+import { Sandbox } from "./components/code/Sandbox.js";
+import { SchemaDisplay } from "./components/code/SchemaDisplay.js";
+import { Snippet } from "./components/code/Snippet.js";
+import { StackTrace } from "./components/code/StackTrace.js";
+import { Terminal } from "./components/code/Terminal.js";
+import { TestResults } from "./components/code/TestResults.js";
+import { WebPreview } from "./components/code/WebPreview.js";
+import { Accordion } from "./components/display/Accordion.js";
+import { Avatar } from "./components/display/Avatar.js";
+import { Badge } from "./components/display/Badge.js";
+import { Breadcrumb } from "./components/display/Breadcrumb.js";
+import { Card } from "./components/display/Card.js";
+import { Carousel } from "./components/display/Carousel.js";
+import { BarChart, Chart, LineChart } from "./components/display/Chart.js";
+import { Collapsible } from "./components/display/Collapsible.js";
+import { DataTable } from "./components/display/DataTable.js";
+import { Empty } from "./components/display/Empty.js";
+import { Item } from "./components/display/Item.js";
+import { Kbd } from "./components/display/Kbd.js";
+import { Pagination } from "./components/display/Pagination.js";
+import { Progress } from "./components/display/Progress.js";
+import { Separator } from "./components/display/Separator.js";
+import { Skeleton } from "./components/display/Skeleton.js";
+import { Table } from "./components/display/Table.js";
+import { Tabs } from "./components/display/Tabs.js";
+import { Prose, Text, Typography } from "./components/display/Typography.js";
+import { Alert } from "./components/feedback/Alert.js";
+import { Dialog } from "./components/feedback/Dialog.js";
+import { Spinner } from "./components/feedback/Spinner.js";
+import { Toast } from "./components/feedback/Toast.js";
+import { Tooltip } from "./components/feedback/Tooltip.js";
+import { Calendar } from "./components/inputs/Calendar.js";
+import { Checkbox } from "./components/inputs/Checkbox.js";
+import { Combobox } from "./components/inputs/Combobox.js";
+import { DatePicker } from "./components/inputs/DatePicker.js";
+import { Field, FieldGroup } from "./components/inputs/Field.js";
+import { Input } from "./components/inputs/Input.js";
+import { InputGroup } from "./components/inputs/InputGroup.js";
+import { InputOTP } from "./components/inputs/InputOTP.js";
+import { Label } from "./components/inputs/Label.js";
+import { RadioGroup } from "./components/inputs/RadioGroup.js";
+import { Select } from "./components/inputs/Select.js";
+import { Slider } from "./components/inputs/Slider.js";
+import { Switch } from "./components/inputs/Switch.js";
+import { Textarea } from "./components/inputs/Textarea.js";
+import { Toggle, ToggleGroup } from "./components/inputs/Toggle.js";
+import { AspectRatio } from "./components/layout/AspectRatio.js";
+import { Resizable } from "./components/layout/Resizable.js";
+import { ScrollArea } from "./components/layout/ScrollArea.js";
+import { Sidebar } from "./components/layout/Sidebar.js";
+import { AlertDialog } from "./components/overlay/AlertDialog.js";
+import { Command } from "./components/overlay/Command.js";
+import { ContextMenu } from "./components/overlay/ContextMenu.js";
+import { DropdownMenu } from "./components/overlay/DropdownMenu.js";
+import { HoverCard } from "./components/overlay/HoverCard.js";
+import { Menubar } from "./components/overlay/Menubar.js";
+import { NavigationMenu } from "./components/overlay/NavigationMenu.js";
+import { Popover } from "./components/overlay/Popover.js";
+import { Sheet } from "./components/overlay/Sheet.js";
+import { Image } from "./components/utilities/Image.js";
+import { OpenInChat } from "./components/utilities/OpenInChat.js";
+import { AudioPlayer } from "./components/voice/AudioPlayer.js";
+import { MicSelector } from "./components/voice/MicSelector.js";
+import { Persona } from "./components/voice/Persona.js";
+import { SpeechInput } from "./components/voice/SpeechInput.js";
+import { Transcription } from "./components/voice/Transcription.js";
+import { VoiceSelector } from "./components/voice/VoiceSelector.js";
+import { Canvas, Connection, Controls, Edge, Flow, Node, Panel, Toolbar } from "./components/workflow/Flow.js";
+export {
+  Accordion,
+  Agent,
+  Alert,
+  AlertDialog,
+  Artifact,
+  AspectRatio,
+  Attachments,
+  AudioPlayer,
+  Avatar,
+  Badge,
+  BarChart,
+  Breadcrumb,
+  Button,
+  ButtonGroup,
+  Calendar,
+  Canvas,
+  Card,
+  Carousel,
+  Chart,
+  Checkbox,
+  Checkpoint,
+  Citation,
+  CodeBlock,
+  Collapsible,
+  Combobox,
+  Command,
+  Commit,
+  Composer,
+  Confirmation,
+  Connection,
+  Context,
+  ContextMenu,
+  Controls,
+  Conversation,
+  DataTable,
+  DatePicker,
+  Dialog,
+  DropdownMenu,
+  Edge,
+  Empty,
+  EnvironmentVariables,
+  Field,
+  FieldGroup,
+  FileTree,
+  Flow,
+  HoverCard,
+  IconButton,
+  Image,
+  Input,
+  InputGroup,
+  InputOTP,
+  Item,
+  JSXPreview,
+  Kbd,
+  Label,
+  LineChart,
+  Menubar,
+  Message,
+  MicSelector,
+  ModelSelector,
+  NavigationMenu,
+  Node,
+  OpenInChat,
+  PackageInfo,
+  Pagination,
+  Panel,
+  Persona,
+  Plan,
+  Popover,
+  Progress,
+  Prose,
+  Queue,
+  RadioGroup,
+  Reasoning,
+  Resizable,
+  Sandbox,
+  SchemaDisplay,
+  ScrollArea,
+  Select,
+  Separator,
+  Sheet,
+  Shimmer,
+  Sidebar,
+  Skeleton,
+  Slider,
+  Snippet,
+  Sources,
+  SpeechInput,
+  Spinner,
+  StackTrace,
+  Suggestion,
+  Suggestions,
+  Switch,
+  Table,
+  Tabs,
+  Task,
+  Terminal,
+  TestResults,
+  Text,
+  Textarea,
+  Toast,
+  Toggle,
+  ToggleGroup,
+  ToolCall,
+  Toolbar,
+  Tooltip,
+  Transcription,
+  Typography,
+  VoiceSelector,
+  WebPreview
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/styles.css

@@ -0,0 +1,217 @@
+/* Agentaily design system — bundled tokens + fonts. Import once at your app root. */
+@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400&display=swap");
+
+/* src/tokens/fonts.css */
+/* Agentaily webfonts.
+   NOTE: No brand font binaries were provided — these are Google Fonts
+   substitutions (flagged in readme.md). Swap for licensed files by
+   replacing these @import lines with @font-face rules. */
+/* src/tokens/colors.css */
+/* ============================================================
+   Agentaily — color system
+   Monochrome-first. Dark is the default theme (:root);
+   light theme is scoped under [data-theme="light"].
+   The "accent" is the inverted foreground — no hue, all contrast.
+   ============================================================ */
+:root {
+  /* ---- base scale: ink (dark theme) ---- */
+  --bg-0: #0A0A0B;            /* page canvas */
+  --bg-1: #111113;            /* raised panels, sidebar */
+  --bg-2: #18181B;            /* cards, composer */
+  --bg-3: #212124;            /* hover fills, code blocks */
+  --bg-overlay: rgba(10, 10, 11, 0.72);
+  --fg-1: #F4F4F5;            /* primary text */
+  --fg-2: #A1A1AA;            /* secondary text */
+  --fg-3: #63636B;            /* faint text, placeholders */
+  --line-1: rgba(255, 255, 255, 0.08);   /* hairline borders */
+  --line-2: rgba(255, 255, 255, 0.14);   /* strong borders */
+  /* ---- accent: pure mono inversion ---- */
+  --accent: #FAFAFA;          /* filled buttons, active states */
+  --accent-fg: #0A0A0B;       /* text on accent */
+  --accent-hover: #E4E4E7;
+  /* ---- semantic (kept desaturated, used sparingly) ---- */
+  --ok: #3ECF8E;
+  --warn: #E8B339;
+  --danger: #E5484D;
+  --ok-dim: rgba(62, 207, 142, 0.12);
+  --warn-dim: rgba(232, 179, 57, 0.12);
+  --danger-dim: rgba(229, 72, 77, 0.12);
+  /* ---- semantic aliases ---- */
+  --surface-page: var(--bg-0);
+  --surface-panel: var(--bg-1);
+  --surface-card: var(--bg-2);
+  --surface-raised: var(--bg-3);
+  --text-body: var(--fg-1);
+  --text-muted: var(--fg-2);
+  --text-faint: var(--fg-3);
+  --border-default: var(--line-1);
+  --border-strong: var(--line-2);
+  --focus-ring: rgba(250, 250, 250, 0.55);
+  --focus-soft: rgba(250, 250, 250, 0.13); /* @kind other */  /* glow ring on field focus */
+  /* dot-grid motif background */
+  --dot-grid: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px); /* @kind other */
+  color-scheme: dark;
+}
+[data-theme="light"] {
+  --bg-0: #FFFFFF;
+  --bg-1: #FAFAFA;
+  --bg-2: #F4F4F5;
+  --bg-3: #E9E9EB;
+  --bg-overlay: rgba(250, 250, 250, 0.72);
+  --fg-1: #111113;
+  --fg-2: #5D5D66;
+  --fg-3: #9C9CA3;
+  --line-1: rgba(17, 17, 19, 0.09);
+  --line-2: rgba(17, 17, 19, 0.16);
+  --accent: #111113;
+  --accent-fg: #FAFAFA;
+  --accent-hover: #2A2A2E;
+  --ok: #1C9E68;
+  --warn: #B07D14;
+  --danger: #D33338;
+  --ok-dim: rgba(28, 158, 104, 0.1);
+  --warn-dim: rgba(176, 125, 20, 0.12);
+  --danger-dim: rgba(211, 51, 56, 0.08);
+  --focus-ring: rgba(17, 17, 19, 0.45);
+  --focus-soft: rgba(17, 17, 19, 0.10); /* @kind other */
+  --dot-grid: radial-gradient(rgba(17, 17, 19, 0.1) 1px, transparent 1px); /* @kind other */
+  color-scheme: light;
+}
+/* src/tokens/typography.css */
+/* ============================================================
+   Agentaily — typography
+   Space Grotesk for display + UI, JetBrains Mono for code,
+   labels and the terminal motif. CJK falls back to system
+   (PingFang SC / Microsoft YaHei / Noto Sans CJK).
+   ============================================================ */
+:root {
+  --font-display: "Space Grotesk", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
+  --font-body: "Space Grotesk", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", "SF Mono", "PingFang SC", "Microsoft YaHei", ui-monospace, monospace;
+  /* type scale */
+  --text-xs: 12px;
+  --text-sm: 13px;
+  --text-md: 15px;       /* default UI / chat body */
+  --text-lg: 18px;
+  --text-xl: 24px;
+  --text-2xl: 32px;
+  --text-3xl: 44px;
+  --text-hero: 68px;
+  /* weights */
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-bold: 700;
+  /* line heights */
+  --leading-tight: 1.1;
+  --leading-snug: 1.35;
+  --leading-body: 1.6;
+  /* tracking */
+  --tracking-tight: -0.02em;   /* display sizes */
+  --tracking-label: 0.08em;    /* mono ALL-CAPS labels */
+}
+/* src/tokens/spacing.css */
+/* ============================================================
+   Agentaily — spacing
+   4px base grid. Generous outer space (大气), tight inner
+   rhythm (极客).
+   ============================================================ */
+:root {
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+  --space-20: 80px;
+  --space-24: 96px;
+  /* layout */
+  --container-max: 1120px;
+  --sidebar-w: 272px;
+  --thread-max: 760px;     /* chat reading column */
+}
+/* src/tokens/effects.css */
+/* ============================================================
+   Agentaily — radii, shadows, motion
+   Hard-edged: tiny radii, hairline borders over shadows.
+   Motion is fast and decisive — no bounces.
+   ============================================================ */
+:root {
+  /* radii — kept deliberately small */
+  --radius-1: 2px;     /* chips, kbd, code tags */
+  --radius-2: 4px;     /* buttons, inputs */
+  --radius-3: 8px;     /* cards, message bubbles, dialogs */
+  --radius-full: 999px;
+  /* shadows — dark theme leans on borders, not shadows */
+  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25);
+  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.35);
+  --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.5);
+  /* motion */
+  --ease-out: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
+  --dur-1: 120ms; /* @kind other */    /* hovers, presses */
+  --dur-2: 200ms; /* @kind other */    /* reveals, toggles */
+  --dur-3: 320ms; /* @kind other */    /* dialogs, page-level */
+  /* focus */
+  --ring: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--focus-ring);
+  /* blur */
+  --blur-overlay: 12px;
+}
+[data-theme="light"] {
+  --shadow-1: 0 1px 2px rgba(17, 17, 19, 0.06);
+  --shadow-2: 0 4px 16px rgba(17, 17, 19, 0.08);
+  --shadow-3: 0 16px 48px rgba(17, 17, 19, 0.14);
+}
+/* src/tokens/base.css */
+/* ============================================================
+   Agentaily — minimal base rules + shared utility classes
+   ============================================================ */
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  background: var(--surface-page);
+  color: var(--text-body);
+  font-family: var(--font-body);
+  font-size: var(--text-md);
+  line-height: var(--leading-body);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+::selection { background: var(--fg-1); color: var(--bg-0); }
+/* mono ALL-CAPS label — core Agentaily motif */
+.ax-label {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-medium);
+  letter-spacing: var(--tracking-label);
+  text-transform: uppercase;
+  color: var(--text-faint);
+}
+/* blinking terminal cursor — core Agentaily motif */
+.ax-cursor {
+  display: inline-block;
+  width: 0.55em;
+  height: 1.05em;
+  background: currentColor;
+  vertical-align: text-bottom;
+  animation: ax-blink 1.1s steps(1) infinite;
+}
+@keyframes ax-blink { 50% { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .ax-cursor { animation: none; } }
+/* dot-grid surface */
+.ax-dotgrid {
+  background-image: var(--dot-grid);
+  background-size: 24px 24px;
+}
+/* corner-tick frame (place on a position:relative parent) */
+.ax-ticks::before, .ax-ticks::after {
+  content: "";
+  position: absolute;
+  width: 8px; height: 8px;
+  border-color: var(--border-strong);
+  border-style: solid;
+}
+.ax-ticks::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
+.ax-ticks::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@agentaily/design-system",
+  "version": "0.1.0",
+  "description": "Agentaily design system — dark-first monochrome React component library (116 components) + Storybook.",
+  "type": "module",
+  "license": "UNLICENSED",
+  "author": "Agentaily",
+  "homepage": "https://github.com/agentaily/design-system#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/agentaily/design-system.git"
+  },
+  "bugs": {
+    "url": "https://github.com/agentaily/design-system/issues"
+  },
+  "keywords": [
+    "design-system",
+    "react",
+    "components",
+    "ui",
+    "storybook",
+    "agentaily"
+  ],
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./assets/*": "./dist/assets/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "DESIGN.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prepare": "lefthook install",
+    "format": "prettier --write .",
+    "changeset": "changeset",
+    "release": "changeset publish",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "gen:barrel": "node scripts/generate-barrel.mjs",
+    "clean": "node scripts/clean.mjs",
+    "build:js": "vite build --config vite.lib.config.js",
+    "build:css": "node scripts/build-css.mjs",
+    "build:types": "node scripts/build-types.mjs",
+    "build:assets": "node scripts/copy-assets.mjs",
+    "build:lib": "npm run clean && npm run gen:barrel && npm run build:js && npm run build:css && npm run build:types && npm run build:assets",
+    "prepublishOnly": "npm run build:lib"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@changesets/changelog-github": "^0.7.0",
+    "@changesets/cli": "^2.31.0",
+    "@storybook/addon-docs": "^10.4.3",
+    "@storybook/react-vite": "^10.4.3",
+    "@vitejs/plugin-react": "^5.0.0",
+    "lefthook": "^2.1.9",
+    "prettier": "^3.8.4",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "storybook": "^10.4.3",
+    "vite": "^7.0.0"
+  }
+}