@triptease/design-system-mcp 0.0.3

package/CHANGELOG.md

@@ -0,0 +1,26 @@
+# @triptease/design-system-mcp
+
+## 0.0.3
+
+### Patch Changes
+
+- Updated dependencies
+  - @triptease/tt-data-point@1.0.1
+  - @triptease/tt-highlight@1.0.1
+  - @triptease/tt-dataset@1.0.2
+  - @triptease/tt-bar-chart@1.0.2
+  - @triptease/tt-line-chart@1.0.7
+
+## 0.0.2
+
+### Patch Changes
+
+- Updated dependencies
+  - @triptease/tt-line-chart@1.0.6
+
+## 0.0.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @triptease/stylesheet@1.4.1

package/README.md

@@ -0,0 +1,340 @@
+# Triptease Design System MCP Server
+
+Model Context Protocol (MCP) server that provides programmatic access to Triptease design system documentation, componentManifest, and tokens.
+
+## What is this?
+
+This MCP server enables Claude Code and other MCP-compatible tools to query design system information directly. Instead of manually looking up component documentation or design tokens, you can ask Claude to retrieve this information for you.
+
+## Installation
+
+### Prerequisites
+
+- Node.js 18+
+- Yarn
+
+### Building
+
+From this directory:
+
+```bash
+yarn install
+yarn build
+```
+
+This will compile the TypeScript source to JavaScript in the `dist/` directory.
+
+## Configuration
+
+### Claude Code CLI (Recommended)
+
+Use the Claude Code CLI to install the MCP server globally for all your projects:
+
+```bash
+claude mcp add --scope user --transport stdio triptease-design-system -- \
+  node /absolute/path/to/component-library/packages/design-system-mcp/dist/src/index.js
+```
+
+**Important:** Replace `/absolute/path/to/component-library` with the actual path (e.g., `/Users/yourname/repos/component-library`)
+
+**Verify installation:**
+
+```bash
+# List all MCP servers
+claude mcp list
+
+# Should show: triptease-design-system: ... - ✓ Connected
+```
+
+**Restart Claude Code** after installation. The design system tools will now be available in all your sessions.
+
+**Management commands:**
+
+```bash
+# Remove the server
+claude mcp remove triptease-design-system
+
+# Get server details
+claude mcp get triptease-design-system
+
+# Check status within Claude Code
+/mcp
+```
+
+### Claude Desktop (GUI Application)
+
+For the Claude Desktop application, manually edit the configuration file:
+
+**Configuration file locations:**
+
+- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`
+- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json`
+
+**Add to the configuration file:**
+
+```json
+{
+  "mcpServers": {
+    "triptease-design-system": {
+      "command": "node",
+      "args": ["/absolute/path/to/component-library/design-system-mcp/dist/index.js"]
+    }
+  }
+}
+```
+
+**macOS example:**
+
+```json
+{
+  "mcpServers": {
+    "triptease-design-system": {
+      "command": "node",
+      "args": ["/Users/yourname/repos/component-library/design-system-mcp/dist/index.js"]
+    }
+  }
+}
+```
+
+**Windows example:**
+
+```json
+{
+  "mcpServers": {
+    "triptease-design-system": {
+      "command": "node",
+      "args": ["C:\\Users\\yourname\\repos\\component-library\\design-system-mcp\\dist\\index.js"]
+    }
+  }
+}
+```
+
+> [!IMPORTANT]
+> Use absolute paths, not relative paths. After saving the configuration, restart Claude Desktop completely.
+
+#### Usage with NVM
+
+If Claude Desktop has issues starting the MCP servers due to resolving the wrong `nvm`-managed node version, replace the command with the absolute path to the `nvm`-managed node version, e.g. in MacOS:
+
+```json
+{
+  "mcpServers": {
+    "triptease-design-system": {
+      "command": "/Users/yourname/.nvm/versions/node/v24.11.1/bin/node",
+      "args": ["/Users/yourname/repos/component-library/design-system-mcp/dist/index.js"]
+    }
+  }
+}
+```
+
+### Per-Project Installation
+
+To enable the server for a specific project only (works with both Claude Code and Claude Desktop):
+
+**Claude Code CLI:**
+
+```bash
+# Install for current project only (default scope)
+claude mcp add --transport stdio triptease-design-system -- \
+  node /absolute/path/to/component-library/design-system-mcp/dist/index.js
+
+# Or install for team sharing (committed to version control)
+claude mcp add --scope project --transport stdio triptease-design-system -- \
+  node /absolute/path/to/component-library/design-system-mcp/dist/index.js
+```
+
+**Manual configuration:**
+
+Create or edit `.mcp.json` in your project root:
+
+```json
+{
+  "mcpServers": {
+    "triptease-design-system": {
+      "command": "node",
+      "args": ["<path-to-component-library>/design-system-mcp/dist/index.js"]
+    }
+  }
+}
+```
+
+Replace `<path-to-component-library>` with the relative or absolute path to the component-library repository.
+
+## Available Tools
+
+The MCP server provides 4 tools:
+
+### 1. `get_component_docs`
+
+Get detailed documentation for a specific component.
+
+**Parameters:**
+
+- `component` (string, required): Component name (e.g., 'button', 'input', 'badge', 'checkbox', 'card')
+
+**Returns:** JSON with complete component documentation including usage guidance, attributes, states, examples, and design tokens.
+
+**Example usage with Claude:**
+
+> "Get me the documentation for the button component"
+
+### 2. `list_components`
+
+List all available design system componentManifest.
+
+**Parameters:** None
+
+**Returns:** JSON array of componentManifest with name, description, and element type.
+
+**Example usage with Claude:**
+
+> "What componentManifest are available in the design system?"
+
+### 3. `get_design_tokens`
+
+Get design tokens by category.
+
+**Parameters:**
+
+- `category` (string, required): One of 'colors', 'spacing', 'typography', 'shadows', 'all'
+
+**Returns:** JSON object with design tokens organized by category.
+
+**Example usage with Claude:**
+
+> "Show me all the color tokens in the design system"
+> "What spacing tokens are available?"
+
+### 4. `search_components`
+
+Search for componentManifest by keyword.
+
+**Parameters:**
+
+- `query` (string, required): Search term to find in component names and descriptions
+
+**Returns:** JSON with search results including matched componentManifest.
+
+**Example usage with Claude:**
+
+> "Search for form-related componentManifest"
+> "Find componentManifest for status indicators"
+
+## Usage Examples
+
+Once configured, you can interact with the MCP server naturally through Claude Code:
+
+**Getting component documentation:**
+
+```text
+You: "How do I create a destructive button?"
+Claude: [Uses get_component_docs to fetch button documentation]
+       "Here's how to create a destructive button:
+       <button data-theme="destructive-primary">Delete</button>"
+```
+
+**Exploring design tokens:**
+
+```text
+You: "What color should I use for error states?"
+Claude: [Uses get_design_tokens with category="colors"]
+       "For error states, use the alert color tokens:
+       - --color-alert-400 for primary error color
+       - --color-alert-100 for error backgrounds"
+```
+
+**Finding componentManifest:**
+
+```text
+You: "What can I use to show validation errors?"
+Claude: [Uses search_components with query="validation"]
+       "The Input component supports validation styling via aria-invalid..."
+```
+
+## Architecture
+
+- **Transport**: StdioServerTransport (local, on-demand)
+- **Token Source**: `../../packages/stylesheet/dist/web/tokens.json` (relative to compiled dist directory)
+- **Components**: Component manifest in `src/componentManifest.ts` (button, input, badge, checkbox, card)
+- **Response Format**: JSON for all tool responses
+
+## Maintenance
+
+### Adding New Components
+
+Edit `src/componentManifest.ts` and add new component definitions to the `componentManifest` object. Each component should include:
+
+```typescript
+componentName: {
+  name: "Component Name",
+  description: "Brief description",
+  element: "html-element",
+  usageGuidance: {
+    whenToUse: ["..."],
+    bestPractices: ["..."],
+    accessibility: ["..."],
+    avoid: ["..."]
+  },
+  dataAttributes: { /* optional */ },
+  classes: { /* optional */ },
+  attributes: { /* optional */ },
+  states: [ /* optional */ ],
+  examples: [
+    {
+      title: "Example name",
+      code: `<html example code>`
+    }
+  ],
+  tokens: ["--token-1", "--token-2"]
+}
+```
+
+After making changes:
+
+```bash
+yarn build
+```
+
+## Troubleshooting
+
+**"Failed to load tokens.json" error:**
+
+- Ensure `tokens.json` exists at `packages/stylesheet/dist/web/tokens.json`
+- Try rebuilding the stylesheet package: `cd packages/stylesheet && yarn build`
+
+**Server not appearing in Claude Code:**
+
+_For Claude Code CLI:_
+
+- Run `claude mcp list` to verify the server is installed
+- Check that the server shows `✓ Connected` status
+- If not installed, run the installation command again
+- Restart Claude Code after installation
+- Check logs: `~/.claude/debug/*.txt` for error messages
+
+_For Claude Desktop:_
+
+- Verify the configuration file exists at the correct location
+  - macOS: `~/Library/Application Support/Claude/claude_desktop_config.json`
+  - Windows: `%APPDATA%\Claude\claude_desktop_config.json`
+- Check that the path to `dist/index.js` is correct and absolute
+- Verify JSON syntax is valid (no trailing commas, proper quotes)
+- Restart Claude Desktop completely (not just reload)
+- Check logs: `~/Library/Logs/Claude/mcp*.log` (macOS) or `%APPDATA%\Claude\logs` (Windows)
+
+_For project-level installation:_
+
+- Verify `.mcp.json` exists in your project root
+- Check that the path to `dist/index.js` is correct
+- Restart after configuration changes
+
+**Tool calls failing:**
+
+- Ensure the build completed successfully (`yarn build`)
+- Check Node.js version is 18+
+- Verify no TypeScript compilation errors
+
+## Related
+
+- **Design System Documentation**: For design system patterns and usage, see the main component library README
+- **MCP Protocol**: https://modelcontextprotocol.io/

package/dist/package.json

@@ -0,0 +1,41 @@
+{
+    "private": true,
+    "name": "@triptease/design-system-mcp",
+    "version": "0.0.3",
+    "description": "MCP server for Triptease design system documentation",
+    "type": "module",
+    "main": "dist/index.js",
+    "bin": "./dist/index.js",
+    "scripts": {
+        "build": "rm -rf dist && tsc && tsc-alias",
+        "dev": "tsc --watch",
+        "start": "node dist/index.js",
+        "test": "vitest run",
+        "test:watch": "vitest"
+    },
+    "author": "Triptease",
+    "license": "MIT",
+    "engines": {
+        "node": ">=18.0.0"
+    },
+    "dependencies": {
+        "@modelcontextprotocol/sdk": "^1.0.4",
+        "@triptease/stylesheet": "1.4.1",
+        "@triptease/tt-bar-chart": "1.0.2",
+        "@triptease/tt-combobox": "5.6.5",
+        "@triptease/tt-data-point": "1.0.1",
+        "@triptease/tt-dataset": "1.0.2",
+        "@triptease/tt-date-picker": "6.1.2",
+        "@triptease/tt-date-range-picker": "6.2.3",
+        "@triptease/tt-dialog": "5.1.1",
+        "@triptease/tt-highlight": "1.0.1",
+        "@triptease/tt-line-chart": "1.0.7",
+        "zod": "^4.3.6"
+    },
+    "devDependencies": {
+        "tsc-alias": "^1.8.16",
+        "typescript": "^5.7.2",
+        "vite-tsconfig-paths": "^6.0.5",
+        "vitest": "^4.0.18"
+    }
+}

package/dist/src/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/src/index.js

@@ -0,0 +1,39 @@
+#!/usr/bin/env node
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
+import packageJson from './../package.json' with { type: 'json' };
+import getComponentDocsTool from './tools/getComponentDocs/index.js';
+import listComponentsTool from './tools/listComponents/index.js';
+import getDesignTokensTool from './tools/getCSSTokens/index.js';
+import searchComponentsTool from './tools/searchComponents/index.js';
+import getSetupGuideTool from './tools/getSetupGuide/index.js';
+import listCSSTokens from './tools/listCSSTokens/index.js';
+// Initialize MCP server
+const server = new McpServer({
+    name: 'Triptease Design System MCP Server',
+    version: packageJson.version,
+    description: packageJson.description,
+}, {
+    capabilities: {
+        tools: {},
+    },
+});
+// Register getComponentDocsTool definitions
+server.registerTool(getComponentDocsTool.name, getComponentDocsTool.config, getComponentDocsTool.handler);
+server.registerTool(listComponentsTool.name, listComponentsTool.config, listComponentsTool.handler);
+server.registerTool(getDesignTokensTool.name, getDesignTokensTool.config, getDesignTokensTool.handler);
+server.registerTool(searchComponentsTool.name, searchComponentsTool.config, searchComponentsTool.handler);
+server.registerTool(getSetupGuideTool.name, getSetupGuideTool.config, getSetupGuideTool.handler);
+server.registerTool(listCSSTokens.name, listCSSTokens.config, listCSSTokens.handler);
+// Start the server
+async function main() {
+    const transport = new StdioServerTransport();
+    await server.connect(transport);
+    console.info('Server started');
+}
+main().catch((error) => {
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    console.error(errorMessage);
+    process.exit(1);
+});
+//# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,WAAW,MAAM,mBAAmB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AAElE,OAAO,oBAAoB,MAAM,mCAAmC,CAAC;AACrE,OAAO,kBAAkB,MAAM,iCAAiC,CAAC;AACjE,OAAO,mBAAmB,MAAM,+BAA+B,CAAC;AAChE,OAAO,oBAAoB,MAAM,mCAAmC,CAAC;AACrE,OAAO,iBAAiB,MAAM,gCAAgC,CAAC;AAC/D,OAAO,aAAa,MAAM,gCAAgC,CAAC;AAE3D,wBAAwB;AACxB,MAAM,MAAM,GAAG,IAAI,SAAS,CAC1B;IACE,IAAI,EAAE,oCAAoC;IAC1C,OAAO,EAAE,WAAW,CAAC,OAAO;IAC5B,WAAW,EAAE,WAAW,CAAC,WAAW;CACrC,EACD;IACE,YAAY,EAAE;QACZ,KAAK,EAAE,EAAE;KACV;CACF,CACF,CAAC;AAEF,4CAA4C;AAC5C,MAAM,CAAC,YAAY,CAAC,oBAAoB,CAAC,IAAI,EAAE,oBAAoB,CAAC,MAAM,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAC1G,MAAM,CAAC,YAAY,CAAC,kBAAkB,CAAC,IAAI,EAAE,kBAAkB,CAAC,MAAM,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;AACpG,MAAM,CAAC,YAAY,CAAC,mBAAmB,CAAC,IAAI,EAAE,mBAAmB,CAAC,MAAM,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;AACvG,MAAM,CAAC,YAAY,CAAC,oBAAoB,CAAC,IAAI,EAAE,oBAAoB,CAAC,MAAM,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAC1G,MAAM,CAAC,YAAY,CAAC,iBAAiB,CAAC,IAAI,EAAE,iBAAiB,CAAC,MAAM,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;AACjG,MAAM,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,EAAE,aAAa,CAAC,MAAM,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;AAErF,mBAAmB;AACnB,KAAK,UAAU,IAAI;IACjB,MAAM,SAAS,GAAG,IAAI,oBAAoB,EAAE,CAAC;IAC7C,MAAM,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAChC,OAAO,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;AACjC,CAAC;AAED,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE;IACrB,MAAM,YAAY,GAAG,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC5E,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAC5B,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAClB,CAAC,CAAC,CAAC","sourcesContent":["#!/usr/bin/env node\nimport { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';\nimport { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';\nimport packageJson from '@/../package.json' with { type: 'json' };\n\nimport getComponentDocsTool from '@/tools/getComponentDocs/index.js';\nimport listComponentsTool from '@/tools/listComponents/index.js';\nimport getDesignTokensTool from '@/tools/getCSSTokens/index.js';\nimport searchComponentsTool from '@/tools/searchComponents/index.js';\nimport getSetupGuideTool from '@/tools/getSetupGuide/index.js';\nimport listCSSTokens from '@/tools/listCSSTokens/index.js';\n\n// Initialize MCP server\nconst server = new McpServer(\n  {\n    name: 'Triptease Design System MCP Server',\n    version: packageJson.version,\n    description: packageJson.description,\n  },\n  {\n    capabilities: {\n      tools: {},\n    },\n  }\n);\n\n// Register getComponentDocsTool definitions\nserver.registerTool(getComponentDocsTool.name, getComponentDocsTool.config, getComponentDocsTool.handler);\nserver.registerTool(listComponentsTool.name, listComponentsTool.config, listComponentsTool.handler);\nserver.registerTool(getDesignTokensTool.name, getDesignTokensTool.config, getDesignTokensTool.handler);\nserver.registerTool(searchComponentsTool.name, searchComponentsTool.config, searchComponentsTool.handler);\nserver.registerTool(getSetupGuideTool.name, getSetupGuideTool.config, getSetupGuideTool.handler);\nserver.registerTool(listCSSTokens.name, listCSSTokens.config, listCSSTokens.handler);\n\n// Start the server\nasync function main() {\n  const transport = new StdioServerTransport();\n  await server.connect(transport);\n  console.info('Server started');\n}\n\nmain().catch((error) => {\n  const errorMessage = error instanceof Error ? error.message : String(error);\n  console.error(errorMessage);\n  process.exit(1);\n});\n"]}

package/dist/src/manifests/components/entries/badge.d.ts

@@ -0,0 +1,27 @@
+declare const _default: {
+    badge: {
+        name: string;
+        description: string;
+        element: string;
+        usageGuidance: {
+            whenToUse: string[];
+            avoid: string[];
+        };
+        classes: {
+            badge: string;
+        };
+        dataAttributes: {
+            'data-theme': {
+                type: string;
+                values: string[];
+                description: string;
+            };
+        };
+        examples: {
+            title: string;
+            description: string;
+            code: string;
+        }[];
+    };
+};
+export default _default;

package/dist/src/manifests/components/entries/badge.js

@@ -0,0 +1,43 @@
+export default {
+    badge: {
+        name: 'Badge',
+        description: 'Status indicator or label badge for highlighting small pieces of information',
+        element: 'span',
+        usageGuidance: {
+            whenToUse: [
+                'Display notification counts or unread items',
+                'Show status (new, updated, beta)',
+                'Label or categorize content',
+                'Highlight key metrics or data points',
+            ],
+            avoid: [
+                'For interactive elements (use buttons instead)',
+                'As primary navigation (consider tabs or links)',
+                'For lengthy text (keep content brief)',
+            ],
+        },
+        classes: {
+            badge: 'Base badge class (required)',
+        },
+        dataAttributes: {
+            'data-theme': {
+                type: 'enum',
+                values: ['primary', 'success', 'danger', 'warning', 'info', 'subtle'],
+                description: 'Badge color theme with semantic meaning. Use success for positive states (active, completed), danger for errors or destructive actions, warning for caution, info for neutral information, subtle for de-emphasized content.',
+            },
+        },
+        examples: [
+            {
+                title: 'Status badges',
+                description: 'Use semantic themes to indicate status or state',
+                code: `<div>
+  <span class="badge" data-theme="success">Active</span>
+  <span class="badge" data-theme="danger">Failed</span>
+  <span class="badge" data-theme="warning">Pending</span>
+  <span class="badge" data-theme="info">Draft</span>
+</div>`,
+            },
+        ],
+    },
+};
+//# sourceMappingURL=badge.js.map

package/dist/src/manifests/components/entries/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/badge.ts"],"names":[],"mappings":"AAEA,eAAe;IACb,KAAK,EAAE;QACL,IAAI,EAAE,OAAO;QACb,WAAW,EAAE,8EAA8E;QAC3F,OAAO,EAAE,MAAM;QACf,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,6CAA6C;gBAC7C,kCAAkC;gBAClC,6BAA6B;gBAC7B,sCAAsC;aACvC;YACD,KAAK,EAAE;gBACL,gDAAgD;gBAChD,gDAAgD;gBAChD,uCAAuC;aACxC;SACF;QACD,OAAO,EAAE;YACP,KAAK,EAAE,6BAA6B;SACrC;QACD,cAAc,EAAE;YACd,YAAY,EAAE;gBACZ,IAAI,EAAE,MAAM;gBACZ,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC;gBACrE,WAAW,EACT,8NAA8N;aACjO;SACF;QACD,QAAQ,EAAE;YACR;gBACE,KAAK,EAAE,eAAe;gBACtB,WAAW,EAAE,iDAAiD;gBAC9D,IAAI,EAAE;;;;;OAKP;aACA;SACF;KACF;CAC0B,CAAC","sourcesContent":["import { ComponentManifest } from '@/manifests/components/types.js';\n\nexport default {\n  badge: {\n    name: 'Badge',\n    description: 'Status indicator or label badge for highlighting small pieces of information',\n    element: 'span',\n    usageGuidance: {\n      whenToUse: [\n        'Display notification counts or unread items',\n        'Show status (new, updated, beta)',\n        'Label or categorize content',\n        'Highlight key metrics or data points',\n      ],\n      avoid: [\n        'For interactive elements (use buttons instead)',\n        'As primary navigation (consider tabs or links)',\n        'For lengthy text (keep content brief)',\n      ],\n    },\n    classes: {\n      badge: 'Base badge class (required)',\n    },\n    dataAttributes: {\n      'data-theme': {\n        type: 'enum',\n        values: ['primary', 'success', 'danger', 'warning', 'info', 'subtle'],\n        description:\n          'Badge color theme with semantic meaning. Use success for positive states (active, completed), danger for errors or destructive actions, warning for caution, info for neutral information, subtle for de-emphasized content.',\n      },\n    },\n    examples: [\n      {\n        title: 'Status badges',\n        description: 'Use semantic themes to indicate status or state',\n        code: `<div>\n  <span class=\"badge\" data-theme=\"success\">Active</span>\n  <span class=\"badge\" data-theme=\"danger\">Failed</span>\n  <span class=\"badge\" data-theme=\"warning\">Pending</span>\n  <span class=\"badge\" data-theme=\"info\">Draft</span>\n</div>`,\n      },\n    ],\n  },\n} satisfies ComponentManifest;\n"]}

package/dist/src/manifests/components/entries/barChart.d.ts

@@ -0,0 +1,73 @@
+declare const _default: {
+    'bar-chart': {
+        name: string;
+        description: string;
+        ssrSafe: true;
+        element: string;
+        usageGuidance: {
+            whenToUse: string[];
+            avoid: string[];
+        };
+        installation: {
+            npm: ({
+                name: string;
+                includesTypes: true;
+                optional: false;
+            } | {
+                name: string;
+                includesTypes: true;
+                optional: true;
+            })[];
+            cdn: {
+                name: string;
+                includesTypes: false;
+                optional: false;
+                pinnedVersionUrl: string;
+                pinnedMajorVersionUrl: string;
+                latestVersionUrl: string;
+                guidance: string;
+            }[];
+        };
+        attributes: {
+            width: {
+                type: string;
+                description: string;
+            };
+            height: {
+                type: string;
+                description: string;
+            };
+            'x-axis-title': {
+                type: string;
+                description: string;
+            };
+            'y-axis-title': {
+                type: string;
+                description: string;
+            };
+            direction: {
+                type: string;
+                values: string[];
+                description: string;
+            };
+            stacked: {
+                type: string;
+                description: string;
+            };
+            loading: {
+                type: string;
+                description: string;
+            };
+        };
+        examples: ({
+            title: string;
+            code: string;
+            description?: undefined;
+        } | {
+            title: string;
+            description: string;
+            code: string;
+        })[];
+    };
+};
+export default _default;