@neasg/design-system 0.4.7 → 0.4.8

package/README.md

@@ -17,6 +17,127 @@ npm run build
 npm run storybook
 ```
 
+## Package Usage
+
+Import the stylesheet once at your app root before rendering package
+components:
+
+```ts
+import "@neasg/design-system/styles.css";
+```
+
+Use the root package import by default:
+
+```ts
+import {
+  Badge,
+  Button,
+  Card,
+  PageHeader,
+  Table,
+  Typography,
+} from "@neasg/design-system";
+```
+
+For Tailwind-based apps, use the exported preset so you inherit the shared
+colors, font tokens, radius tokens, spacing, and motion defaults:
+
+```ts
+// tailwind.config.ts
+import type { Config } from "tailwindcss";
+import {
+  neaDesignSystemContent,
+  neaTailwindPreset,
+} from "@neasg/design-system";
+
+const config: Config = {
+  presets: [neaTailwindPreset],
+  content: [
+    "./app/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    ...neaDesignSystemContent,
+  ],
+};
+
+export default config;
+```
+
+Theme tokens are provided through the exported stylesheet. If you want to
+change the package base font size, override `--font-size-root` after importing
+the stylesheet:
+
+```css
+:root {
+  --font-size-root: 15px;
+}
+```
+
+If you want the package font token to resolve to the actual Inter font in
+Next.js, load it into `--font-sans`:
+
+```ts
+import { Inter } from "next/font/google";
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-sans",
+});
+```
+
+Use package components before creating app-local UI copies. If a reusable
+pattern is missing, extract it into the design system instead of duplicating it
+locally. This design system is light-theme only.
+
+## AI Usage
+
+This design system includes the
+[Storybook MCP addon](https://storybook.js.org/docs/ai/mcp/overview), which
+lets AI coding assistants read component documentation, props, stories, and
+usage examples from Storybook.
+
+1. Start Storybook in this repo:
+
+   ```bash
+   npm run storybook
+   ```
+
+   Storybook runs on `http://localhost:6007`, with the MCP endpoint at
+   `http://localhost:6007/mcp`.
+
+2. In the consuming project, add a `.mcp.json` at the project root:
+
+   ```json
+   {
+     "mcpServers": {
+       "nea-design-system": {
+         "type": "http",
+         "url": "http://localhost:6007/mcp"
+       }
+     }
+   }
+   ```
+
+3. Restart your MCP-compatible AI tool. The docs toolset can list all
+   documentation, fetch documentation for a component, and fetch documentation
+   for a specific story. The development toolset can preview stories and fetch
+   Storybook story-writing instructions.
+
+If you are not using MCP, give your AI coding assistant these instructions:
+
+```text
+Use @neasg/design-system as the source of truth for shared UI.
+
+- Use the Storybook MCP server to discover available components and their APIs before writing UI code.
+- Prefer components from @neasg/design-system before creating app-local UI.
+- Import components from the root package:
+  import { Button, Input, Card, Table, Typography } from "@neasg/design-system";
+- Use the documented props-driven API. Do not build custom compositions from internal primitives.
+- Use the package theme tokens and Tailwind preset instead of inventing ad hoc colors, spacing, or radius values.
+- Use Typography for headings, body copy, labels, and captions.
+- This design system is light-theme only. Do not generate dark-mode styles, tokens, or examples.
+- If a needed shared pattern is missing, extract it into @neasg/design-system rather than duplicating it locally.
+```
+
 ## Publishing
 
 This package is built to `dist/` before publish. The public package entry points are the compiled files in `dist`, not the raw `src` files.

package/dist/button.js

@@ -75,7 +75,7 @@ function attachAnimatedIconRefs(node, refs) {
         return node;
     }
     if (Array.isArray(node)) {
-        return node.map((child) => attachAnimatedIconRefs(child, refs));
+        return React.Children.map(node, (child) => attachAnimatedIconRefs(child, refs));
     }
     if (!React.isValidElement(node)) {
         return node;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neasg/design-system",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "description": "NEA shared design system primitives, theme tokens, and Storybook docs.",
   "license": "UNLICENSED",
   "type": "module",