@spaced-out/ui-design-system 0.5.20 → 0.5.22

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.5.22](https://github.com/spaced-out/ui-design-system/compare/v0.5.21...v0.5.22) (2025-11-12)
+
+
+### Bug Fixes
+
+* add context aware results and utils and types info ([#431](https://github.com/spaced-out/ui-design-system/issues/431)) ([743fecf](https://github.com/spaced-out/ui-design-system/commit/743fecf93625edd13800e345c408343eff773748))
+
+### [0.5.21](https://github.com/spaced-out/ui-design-system/compare/v0.5.20...v0.5.21) (2025-11-12)
+
+
+### Features
+
+* add figma section to mcp documentation in storybook ([#429](https://github.com/spaced-out/ui-design-system/issues/429)) ([7a45eaf](https://github.com/spaced-out/ui-design-system/commit/7a45eaf4504541009f450b2f43adb169be40c0e7))
+* add mcp documentation to storybook ([#428](https://github.com/spaced-out/ui-design-system/issues/428)) ([4f9af69](https://github.com/spaced-out/ui-design-system/commit/4f9af692a9a110e3b00aab0e17946db52d459e0b))
+
+
+### Bug Fixes
+
+* hide footer conditionally for checklist component ([#430](https://github.com/spaced-out/ui-design-system/issues/430)) ([2d76761](https://github.com/spaced-out/ui-design-system/commit/2d76761fabceda767300e812787d63cbf1522b17))
+
 ### [0.5.20](https://github.com/spaced-out/ui-design-system/compare/v0.5.19...v0.5.20) (2025-11-11)
 
 

package/lib/components/Checklist/Checklist.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { ColorTypes } from '../../types/typography';
-import type { IconType } from '../../components/Icon';
+import type { IconSize, IconType } from '../../components/Icon';
 type ClassNames = Readonly<{
     header?: string;
     wrapper?: string;
@@ -14,6 +14,7 @@ export interface ChecklistItem {
     iconLeftName?: string;
     iconLeftType?: IconType;
     iconLeftColor?: ColorTypes;
+    iconLeftSize?: IconSize;
     disabled?: boolean;
     rightSlot?: React.ReactNode;
     onExpand?: (item: ChecklistItem) => void;

package/lib/components/Checklist/Checklist.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checklist.d.ts","sourceRoot":"","sources":["../../../src/components/Checklist/Checklist.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAMrD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AASlD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,CAAC,CAAC;AAEH,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED,MAAM,WAAW,cAAc;IAC7B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IAChC,6BAA6B,CAAC,EAAE,OAAO,CAAC;CACzC;AAED,MAAM,WAAW,yBAAyB;IACxC,UAAU,CAAC,EAAE;QACX,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,oBAAoB,kGAiB/B,CAAC;AAEH,eAAO,MAAM,SAAS,uFAwHrB,CAAC"}
+{"version":3,"file":"Checklist.d.ts","sourceRoot":"","sources":["../../../src/components/Checklist/Checklist.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAMrD,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAS5D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,CAAC,CAAC;AAEH,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED,MAAM,WAAW,cAAc;IAC7B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IAChC,6BAA6B,CAAC,EAAE,OAAO,CAAC;CACzC;AAED,MAAM,WAAW,yBAAyB;IACxC,UAAU,CAAC,EAAE;QACX,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,oBAAoB,kGAiB/B,CAAC;AAEH,eAAO,MAAM,SAAS,uFAyHrB,CAAC"}

package/lib/components/Checklist/Checklist.js

@@ -113,7 +113,8 @@ const Checklist = exports.Checklist = /*#__PURE__*/React.forwardRef((_ref2, ref)
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                 name: item.iconLeftName || '',
                 type: item.iconLeftType,
-                color: item.iconLeftColor || 'tertiary'
+                color: item.iconLeftColor || 'tertiary',
+                size: item.iconLeftSize || 'small'
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodyMedium, {
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TruncatedTextWithTooltip.TruncatedTextWithTooltip, {
                   tooltip: {
@@ -136,9 +137,9 @@ const Checklist = exports.Checklist = /*#__PURE__*/React.forwardRef((_ref2, ref)
               }) : null
             })]
           }))
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardFooter, {
+        }), footer ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardFooter, {
           children: footer
-        })]
+        }) : null]
       })
     })]
   });

package/mcp/README.md

@@ -19,96 +19,73 @@ Unlike traditional MCP servers that require a local copy of the design system, t
 
 ### With Cursor
 
-Add to your Cursor MCP settings:
+⚠️ **macOS Users**: Cursor may not find `npx` in its PATH. Use the full path instead.
+
+1. Find your `npx` path in terminal:
+
+```bash
+which npx
+```
+
+2. Add to your Cursor MCP settings with the **full path**:
 
 ```json
 {
   "mcpServers": {
     "genesis-design-system": {
-      "command": "npx",
+      "command": "/opt/homebrew/bin/npx",
       "args": ["-y", "@spaced-out/genesis-mcp-server@latest"]
     }
   }
 }
 ```
 
+**Common npx locations:**
+
+- Apple Silicon Mac (Homebrew): `/opt/homebrew/bin/npx`
+- Intel Mac (Homebrew): `/usr/local/bin/npx`
+- nvm users: `/Users/YOUR_USERNAME/.nvm/versions/node/vX.X.X/bin/npx`
+
+**Windows/Linux users** can typically use `"command": "npx"` directly.
+
 ### With Claude Desktop
 
+⚠️ **macOS Users**: Claude Desktop may not find `npx` in its PATH. Use the full path instead.
+
 Add to your Claude config file:
 
 **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`  
 **Windows**: `%APPDATA%\Claude\claude_desktop_config.json`  
 **Linux**: `~/.config/Claude/claude_desktop_config.json`
 
+1. Find your `npx` path in terminal:
+
+```bash
+which npx
+```
+
+2. Use the **full path** in your config:
+
 ```json
 {
   "mcpServers": {
     "genesis-design-system": {
-      "command": "npx",
+      "command": "/opt/homebrew/bin/npx",
       "args": ["-y", "@spaced-out/genesis-mcp-server@latest"]
     }
   }
 }
 ```
 
-Then restart Cursor or Claude Desktop.
-
-## 💬 Usage Examples
-
-Once configured, you can ask:
-
-**Component Discovery:**
-
-```
-"List all components in Genesis"
-"Search for dropdown components"
-"Show me the Button component implementation"
-"What types does the Icon component export?"
-"Show me the Icon component with its exported types"
-```
-
-**Design Tokens:**
-
-```
-"Show me all color tokens"
-"What spacing tokens are available?"
-"List all shadow/elevation tokens"
-```
-
-**Component Onboarding:**
+**Common npx locations:**
 
-```
-"I want to create a new Toast component, show me the template"
-"Help me onboard an Alert component"
-"What's the standard structure for a Genesis component?"
-```
-
-**Design Token Imports:**
-
-```
-"How do I import design tokens in CSS Module files?"
-"Show me the correct way to import color and spacing tokens"
-"What token files are available and how do I import them?"
-```
+- Apple Silicon Mac (Homebrew): `/opt/homebrew/bin/npx`
+- Intel Mac (Homebrew): `/usr/local/bin/npx`
+- nvm users: `/Users/YOUR_USERNAME/.nvm/versions/node/vX.X.X/bin/npx`
 
-**CSS Module Guidelines:**
+**Windows/Linux users** can typically use `"command": "npx"` directly.
 
-```
-"Show me CSS Module styling guidelines for Genesis"
-"What are the class naming conventions for CSS Modules?"
-"How should I style child elements in CSS Modules?"
-"What's the correct pattern for state-based styling in CSS?"
-"Show me common CSS mistakes to avoid"
-"How do I apply colors to child elements like text, icons, or buttons?"
-```
-
-**Dependencies:**
-
-```
-"What components does Modal depend on?"
-"Show me the dependencies of Dropdown"
-"What hooks does the Table component use?"
-```
+Then restart Cursor or Claude Desktop.
 
 ## 🔧 Development
 
@@ -284,6 +261,153 @@ npm config set @spaced-out:registry https://your-private-registry.com
 yarn config set registry https://your-private-registry.com
 ```
 
+## 🐛 Troubleshooting
+
+### "spawn npx ENOENT" Error (macOS/Windows)
+
+**Symptoms:**
+
+- Cursor or Claude Desktop logs show `spawn npx ENOENT` error
+- MCP server fails to start with connection errors
+- Error message: `Server transport closed unexpectedly`
+
+**Cause:**
+GUI applications on macOS and Windows don't inherit your terminal's PATH environment variables, so they cannot find the `npx` command.
+
+**Solution:**
+
+1. Find your `npx` path in terminal:
+
+**macOS/Linux:**
+
+```bash
+which npx
+```
+
+**Windows (PowerShell):**
+
+```powershell
+where.exe npx
+```
+
+2. Use the **full path** in your MCP configuration instead of just `"command": "npx"`:
+
+**Example (macOS):**
+
+```json
+{
+  "mcpServers": {
+    "genesis-design-system": {
+      "command": "/opt/homebrew/bin/npx",
+      "args": ["-y", "@spaced-out/genesis-mcp-server@latest"]
+    }
+  }
+}
+```
+
+**Example (Windows):**
+
+```json
+{
+  "mcpServers": {
+    "genesis-design-system": {
+      "command": "C:\\Program Files\\nodejs\\npx.cmd",
+      "args": ["-y", "@spaced-out/genesis-mcp-server@latest"]
+    }
+  }
+}
+```
+
+**Common npx locations:**
+
+**macOS:**
+
+- Homebrew (Apple Silicon): `/opt/homebrew/bin/npx`
+- Homebrew (Intel): `/usr/local/bin/npx`
+- nvm: `/Users/YOUR_USERNAME/.nvm/versions/node/vX.X.X/bin/npx`
+
+**Windows:**
+
+- Default Node.js: `C:\Program Files\nodejs\npx.cmd`
+- nvm-windows: `C:\Users\YOUR_USERNAME\AppData\Roaming\nvm\vX.X.X\npx.cmd`
+
+**Linux:**
+
+- Most distributions: `/usr/bin/npx` or `/usr/local/bin/npx`
+
+3. Restart your AI assistant (Cursor or Claude Desktop)
+
+**Verify the fix:**
+After restarting, check the application logs. You should see successful initialization:
+
+```
+✅ Loaded Genesis design system data
+   Version: X.X.X
+   Components: XX
+   Hooks: XX
+```
+
+Instead of `ENOENT` errors.
+
+### MCP Inspector (Advanced Debugging)
+
+If you're still having issues, use the MCP Inspector to debug:
+
+```bash
+npx @modelcontextprotocol/inspector
+```
+
+Navigate to `http://127.0.0.1:6274` and configure:
+
+- **Transport type:** Stdio
+- **Command:** Your full npx path (e.g., `/opt/homebrew/bin/npx`)
+- **Arguments:** `-y @spaced-out/genesis-mcp-server@latest`
+
+Click **Connect** to test the connection. If it fails, check the terminal logs for detailed error messages.
+
+### Test the Server Directly
+
+Test if the server runs correctly in your terminal:
+
+```bash
+npx -y @spaced-out/genesis-mcp-server@latest
+```
+
+You should see:
+
+```
+✅ Loaded Genesis design system data
+   Version: X.X.X
+   Components: XX
+   Hooks: XX
+   Built: YYYY-MM-DD
+```
+
+If this fails, there may be an issue with the published package.
+
+### Package Not Found
+
+**Error:** `npm ERR! 404 '@spaced-out/genesis-mcp-server@latest' is not in this registry`
+
+**Solution:**
+
+- Verify the package is published: `npm view @spaced-out/genesis-mcp-server`
+- If using a private registry, ensure you're authenticated
+- Check your npm registry configuration: `npm config get registry`
+
+### Node.js Version
+
+**Error:** `The engine "node" is incompatible with this module`
+
+**Solution:**
+This server requires Node.js >= 18.0.0. Update your Node.js installation:
+
+```bash
+node --version  # Check current version
+```
+
+Use [nvm](https://github.com/nvm-sh/nvm) or download from [nodejs.org](https://nodejs.org/).
+
 ## 🤝 Contributing
 
 When updating the design system:
@@ -293,9 +417,105 @@ When updating the design system:
 3. New version is published to npm
 4. Users get updates on next `npx` run (or immediately with `@latest`)
 
+## 🎨 Integration with Figma MCP
+
+The Genesis MCP server works seamlessly alongside the Figma MCP server, enabling a powerful design-to-code workflow. By using both servers together, you can bridge design and implementation.
+
+### Why Use Both?
+
+**Figma MCP** provides:
+
+- Design screenshots and visual context
+- Component properties and variants from Figma
+- Design tokens and variables from Figma files
+- Layout measurements and spacing
+
+**Genesis MCP** provides:
+
+- Actual React component implementations
+- Design system tokens and guidelines
+- TypeScript types and APIs
+- CSS Module styling patterns
+
+Together, they create a complete workflow: **Design in Figma → Implement with Genesis**
+
+### Configuration Examples
+
+You can run multiple MCP servers simultaneously:
+
+**VS Code/Cursor:**
+
+```json
+{
+  "mcpServers": {
+    "genesis-design-system": {
+      "command": "/opt/homebrew/bin/npx",
+      "args": ["-y", "@spaced-out/genesis-mcp-server@latest"]
+    },
+    "figma-desktop": {
+      "command": "/opt/homebrew/bin/npx",
+      "args": ["-y", "@modelcontextprotocol/server-figma"]
+    }
+  }
+}
+```
+
+**Claude Desktop:**
+
+```json
+{
+  "mcpServers": {
+    "genesis-design-system": {
+      "command": "/opt/homebrew/bin/npx",
+      "args": ["-y", "@spaced-out/genesis-mcp-server@latest"]
+    },
+    "figma-desktop": {
+      "command": "/opt/homebrew/bin/npx",
+      "args": ["-y", "@modelcontextprotocol/server-figma"]
+    }
+  }
+}
+```
+
+### Workflow Examples
+
+**Design-to-Code:**
+
+```
+"Show me the current Figma selection"
+"Find the matching Genesis component for this design"
+"Implement this Figma button using Genesis Button component"
+```
+
+**Token Mapping:**
+
+```
+"Compare Figma colors with Genesis color tokens"
+"What Genesis spacing token matches this 16px gap?"
+"Map this Figma shadow to Genesis elevation tokens"
+```
+
+**Validation:**
+
+```
+"Does Genesis have a component matching this Figma design?"
+"Are these Figma colors available in Genesis palette?"
+"What Genesis components would I need for this Figma screen?"
+```
+
+### Requirements
+
+- **Figma MCP**: Figma Desktop app running with design files open
+- **Genesis MCP**: Node.js >= 18.0.0
+
+See [Figma MCP documentation](https://modelcontextprotocol.io/docs/tools/figma) for Figma setup details.
+
 ## 📚 Additional Resources
 
 - [MCP Documentation](https://modelcontextprotocol.io)
+- [Figma MCP Documentation](https://modelcontextprotocol.io/docs/tools/figma)
+- [MCP Inspector](https://github.com/modelcontextprotocol/inspector)
+- [Genesis Storybook MCP Guide](https://your-storybook-url.com/?path=/docs/model-context-protocol--docs)
 
 ## 📄 License
 

package/mcp/build-mcp-data.js

@@ -42,7 +42,34 @@ function getDirectories(path) {
 }
 
 /**
- * Extract all components with their files
+ * Get all files recursively in a directory
+ */
+function getAllFilesRecursively(dirPath, filesList = [], baseDir = dirPath) {
+  try {
+    const files = readdirSync(dirPath);
+    
+    files.forEach(file => {
+      if (file.startsWith('.')) return;
+      
+      const filePath = join(dirPath, file);
+      const stat = statSync(filePath);
+      
+      if (stat.isDirectory()) {
+        getAllFilesRecursively(filePath, filesList, baseDir);
+      } else {
+        const relativePath = filePath.replace(baseDir + '/', '');
+        filesList.push(relativePath);
+      }
+    });
+  } catch (error) {
+    // Ignore errors for non-existent directories
+  }
+  
+  return filesList;
+}
+
+/**
+ * Extract all components with their files (including sub-components)
  */
 function buildComponentsData() {
   console.log('📦 Extracting components...');
@@ -59,24 +86,58 @@ function buildComponentsData() {
   for (const componentName of componentDirs) {
     const componentDir = join(componentsPath, componentName);
     
+    // Get all files in the component directory
+    const allFiles = getAllFilesRecursively(componentDir);
+    
+    // Extract main component files
     const mainTsx = join(componentDir, `${componentName}.tsx`);
     const mainTs = join(componentDir, `${componentName}.ts`);
+    const mainContent = safeReadFile(mainTsx) || safeReadFile(mainTs);
     
+    // Extract story files
     const storyTsx = join(componentDir, `${componentName}.stories.tsx`);
     const storyTs = join(componentDir, `${componentName}.stories.ts`);
+    const storyContent = safeReadFile(storyTsx) || safeReadFile(storyTs);
     
+    // Extract CSS file
     const cssFile = join(componentDir, `${componentName}.module.css`);
+    const cssContent = safeReadFile(cssFile);
     
+    // Extract index file
     const indexFile = join(componentDir, 'index.ts');
-    
-    const mainContent = safeReadFile(mainTsx) || safeReadFile(mainTs);
-    const storyContent = safeReadFile(storyTsx) || safeReadFile(storyTs);
-    const cssContent = safeReadFile(cssFile);
     const indexContent = safeReadFile(indexFile);
     
-    const allFiles = existsSync(componentDir) 
-      ? readdirSync(componentDir).filter(f => !f.startsWith('.'))
-      : [];
+    // Extract all additional TypeScript/TSX files (sub-components)
+    const additionalFiles = {};
+    for (const file of allFiles) {
+      // Skip main files we already extracted
+      if (
+        file === `${componentName}.tsx` ||
+        file === `${componentName}.ts` ||
+        file === `${componentName}.stories.tsx` ||
+        file === `${componentName}.stories.ts` ||
+        file === `${componentName}.module.css` ||
+        file === 'index.ts' ||
+        file.endsWith('.module.css') ||
+        file.endsWith('.stories.tsx') ||
+        file.endsWith('.stories.ts') ||
+        file.endsWith('.stories.module.css')
+      ) {
+        continue;
+      }
+      
+      // Only include .tsx and .ts files (sub-components)
+      if (file.endsWith('.tsx') || file.endsWith('.ts')) {
+        const fullPath = join(componentDir, file);
+        const content = safeReadFile(fullPath);
+        if (content) {
+          additionalFiles[file] = {
+            path: file,
+            content: content
+          };
+        }
+      }
+    }
     
     components[componentName] = {
       name: componentName,
@@ -86,6 +147,7 @@ function buildComponentsData() {
         story: storyContent ? { path: `${componentName}.stories.tsx`, content: storyContent } : null,
         css: cssContent ? { path: `${componentName}.module.css`, content: cssContent } : null,
         index: indexContent ? { path: 'index.ts', content: indexContent } : null,
+        additional: additionalFiles,
       },
       allFiles,
     };
@@ -190,6 +252,94 @@ function buildTokensData() {
   return tokens;
 }
 
+/**
+ * Extract all utils
+ */
+function buildUtilsData() {
+  console.log('🔧 Extracting utils...');
+  const utilsPath = join(DESIGN_SYSTEM_PATH, 'src/utils');
+  const utils = {};
+  
+  if (!existsSync(utilsPath)) {
+    console.warn('⚠️  Utils path not found');
+    return utils;
+  }
+
+  const utilDirs = getDirectories(utilsPath);
+  
+  for (const utilName of utilDirs) {
+    const utilDir = join(utilsPath, utilName);
+    
+    // Get all files in the util directory
+    const allFiles = getAllFilesRecursively(utilDir);
+    
+    // Read all TypeScript files
+    const files = {};
+    for (const file of allFiles) {
+      if ((file.endsWith('.ts') || file.endsWith('.tsx')) && !file.endsWith('.d.ts')) {
+        const fullPath = join(utilDir, file);
+        const content = safeReadFile(fullPath);
+        if (content) {
+          files[file] = {
+            path: file,
+            content: content
+          };
+        }
+      }
+    }
+    
+    utils[utilName] = {
+      name: utilName,
+      path: `src/utils/${utilName}`,
+      files: files,
+      allFiles: allFiles,
+    };
+  }
+  
+  console.log(`   ✅ Extracted ${Object.keys(utils).length} util modules`);
+  return utils;
+}
+
+/**
+ * Extract all types
+ */
+function buildTypesData() {
+  console.log('📐 Extracting types...');
+  const typesPath = join(DESIGN_SYSTEM_PATH, 'src/types');
+  const types = {};
+  
+  if (!existsSync(typesPath)) {
+    console.warn('⚠️  Types path not found');
+    return types;
+  }
+
+  try {
+    const files = readdirSync(typesPath).filter(f => 
+      !f.startsWith('.') && 
+      (f.endsWith('.ts') || f.endsWith('.tsx')) &&
+      !f.endsWith('.d.ts')
+    );
+    
+    for (const file of files) {
+      const filePath = join(typesPath, file);
+      const content = safeReadFile(filePath);
+      if (content) {
+        const typeName = file.replace(/\.(ts|tsx)$/, '');
+        types[typeName] = {
+          name: typeName,
+          path: `src/types/${file}`,
+          content: content,
+        };
+      }
+    }
+  } catch (error) {
+    console.warn(`   ⚠️  Error reading types:`, error.message);
+  }
+  
+  console.log(`   ✅ Extracted ${Object.keys(types).length} type files`);
+  return types;
+}
+
 /**
  * Get package version
  */
@@ -217,6 +367,8 @@ function build() {
       components: buildComponentsData(),
       hooks: buildHooksData(),
       tokens: buildTokensData(),
+      utils: buildUtilsData(),
+      types: buildTypesData(),
     };
 
     // Create output directory if it doesn't exist
@@ -232,6 +384,8 @@ function build() {
     console.log(`   - Components: ${Object.keys(data.components).length}`);
     console.log(`   - Hooks: ${Object.keys(data.hooks).length}`);
     console.log(`   - Token categories: ${Object.keys(data.tokens).length}`);
+    console.log(`   - Utils: ${Object.keys(data.utils).length}`);
+    console.log(`   - Types: ${Object.keys(data.types).length}`);
     console.log(`   - Version: ${data.metadata.version}`);
     console.log(`   - Output: ${OUTPUT_FILE}`);
     console.log(`   - Size: ${(Buffer.byteLength(JSON.stringify(data)) / 1024 / 1024).toFixed(2)} MB\n`);