@urbint/cl 1.0.1

package/mcp-server/src/registry/index.ts

@@ -0,0 +1,3 @@
+export * from './components.js';
+export * from './tokens.js';
+

package/mcp-server/src/registry/tokens.ts

@@ -0,0 +1,256 @@
+/**
+ * Urbint Component Library - Design Tokens Registry
+ * Complete design token documentation for the design system
+ */
+
+export interface TokenCategory {
+  name: string;
+  description: string;
+  tokens: TokenValue[];
+}
+
+export interface TokenValue {
+  name: string;
+  value: string;
+  description?: string;
+  cssVariable?: string;
+}
+
+export const colorTokens: TokenCategory[] = [
+  {
+    name: 'Brand Colors',
+    description: 'Primary brand colors used across the application',
+    tokens: [
+      { name: 'brand.navy', value: '#0D2B3E', description: 'Primary dark brand color' },
+      { name: 'brand.blue', value: '#00A0CC', description: 'Primary action color' },
+    ],
+  },
+  {
+    name: 'Text Colors',
+    description: 'Colors for text content',
+    tokens: [
+      { name: 'text.primary', value: '#1F2937', description: 'Primary text color' },
+      { name: 'text.secondary', value: '#6B7280', description: 'Secondary/muted text' },
+      { name: 'text.disabled', value: '#9CA3AF', description: 'Disabled text color' },
+      { name: 'text.inverse', value: '#FFFFFF', description: 'Text on dark backgrounds' },
+    ],
+  },
+  {
+    name: 'Background Colors',
+    description: 'Surface and background colors',
+    tokens: [
+      { name: 'background.primary', value: '#FFFFFF', description: 'Main background' },
+      { name: 'background.secondary', value: '#F9FAFB', description: 'Subtle/alternate background' },
+      { name: 'background.tertiary', value: '#F3F4F6', description: 'Elevated surfaces' },
+      { name: 'background.inverse', value: '#111827', description: 'Dark background' },
+      { name: 'background.hover', value: '#F5F6F7', description: 'Hover state background' },
+    ],
+  },
+  {
+    name: 'Border Colors',
+    description: 'Colors for borders and dividers',
+    tokens: [
+      { name: 'border.disabled', value: '#E5E7EB', description: 'Subtle/disabled borders' },
+      { name: 'border.default', value: '#D1D5DB', description: 'Standard borders' },
+      { name: 'border.hover', value: '#9CA3AF', description: 'Hover state borders' },
+      { name: 'border.active', value: '#00A0CC', description: 'Focus/active state borders' },
+    ],
+  },
+  {
+    name: 'Feedback Colors',
+    description: 'Semantic colors for feedback states',
+    tokens: [
+      { name: 'feedback.info', value: '#3B82F6', description: 'Information state' },
+      { name: 'feedback.success', value: '#22C55E', description: 'Success state' },
+      { name: 'feedback.warning', value: '#F59E0B', description: 'Warning state' },
+      { name: 'feedback.error', value: '#EF4444', description: 'Error state' },
+    ],
+  },
+  {
+    name: 'Badge Colors',
+    description: 'Colors for badge variants',
+    tokens: [
+      { name: 'badge.gray', value: '#6B7280', description: 'Default/neutral badge' },
+      { name: 'badge.red', value: '#DC2626', description: 'Critical/error badge' },
+      { name: 'badge.orange', value: '#EA580C', description: 'Warning badge' },
+      { name: 'badge.yellow', value: '#CA8A04', description: 'Pending badge' },
+      { name: 'badge.green', value: '#16A34A', description: 'Success/active badge' },
+      { name: 'badge.blue', value: '#2563EB', description: 'Info badge' },
+      { name: 'badge.purple', value: '#7C3AED', description: 'New/highlight badge' },
+    ],
+  },
+];
+
+export const spacingTokens: TokenCategory = {
+  name: 'Spacing',
+  description: 'Consistent spacing values for padding, margin, and gaps. Use token names for component props.',
+  tokens: [
+    { name: 'none', value: '0px', description: 'No spacing' },
+    { name: 'xs', value: '4px', description: 'Extra small spacing' },
+    { name: 'sm', value: '8px', description: 'Small spacing' },
+    { name: 'md', value: '12px', description: 'Medium spacing' },
+    { name: 'lg', value: '16px', description: 'Large spacing' },
+    { name: 'xl', value: '24px', description: 'Extra large spacing' },
+    { name: '2xl', value: '32px', description: '2x extra large spacing' },
+    { name: '3xl', value: '48px', description: '3x extra large spacing' },
+    { name: '4xl', value: '64px', description: '4x extra large spacing' },
+    { name: '5xl', value: '72px', description: '5x extra large spacing' },
+    // Legacy multiplier tokens
+    { name: '0.5x', value: '2px', description: 'Legacy: 0.5x base (2px)' },
+    { name: 'base', value: '4px', description: 'Legacy: base unit (4px)' },
+    { name: '2x', value: '8px', description: 'Legacy: 2x base (8px)' },
+    { name: '3x', value: '12px', description: 'Legacy: 3x base (12px)' },
+    { name: '4x', value: '16px', description: 'Legacy: 4x base (16px)' },
+    { name: '6x', value: '24px', description: 'Legacy: 6x base (24px)' },
+    { name: '8x', value: '32px', description: 'Legacy: 8x base (32px)' },
+    { name: '12x', value: '48px', description: 'Legacy: 12x base (48px)' },
+    { name: '18x', value: '72px', description: 'Legacy: 18x base (72px)' },
+  ],
+};
+
+export const typographyTokens: TokenCategory = {
+  name: 'Typography',
+  description: 'Font sizes and weights for text styles',
+  tokens: [
+    { name: 'h1', value: '32px / bold (700)', description: 'Page titles' },
+    { name: 'h2', value: '24px / semibold (600)', description: 'Section titles' },
+    { name: 'h3', value: '20px / semibold (600)', description: 'Subsection titles' },
+    { name: 'h4', value: '18px / semibold (600)', description: 'Minor headings' },
+    { name: 'body', value: '16px / regular (400)', description: 'Body text' },
+    { name: 'label', value: '14px / regular (400)', description: 'Form labels' },
+    { name: 'caption', value: '13px / regular (400)', description: 'Captions and hints' },
+    { name: 'small', value: '12px / regular (400)', description: 'Small text' },
+  ],
+};
+
+export const borderRadiusTokens: TokenCategory = {
+  name: 'Border Radius',
+  description: 'Corner rounding values',
+  tokens: [
+    { name: 'none', value: '0', description: 'No rounding' },
+    { name: 'sm', value: '2px', description: 'Subtle rounding' },
+    { name: 'md', value: '4px', description: 'Standard rounding' },
+    { name: 'lg', value: '8px', description: 'Medium rounding' },
+    { name: 'xl', value: '12px', description: 'Large rounding' },
+    { name: '2xl', value: '16px', description: 'Extra large rounding' },
+    { name: '3xl', value: '24px', description: 'Maximum rounding' },
+    { name: 'full', value: '9999px', description: 'Fully rounded (circular)' },
+  ],
+};
+
+export const elevationTokens: TokenCategory = {
+  name: 'Elevation (Shadows)',
+  description: 'Shadow levels for depth and elevation',
+  tokens: [
+    { name: '5', value: '0 1px 2px rgba(0,0,0,0.05)', description: 'Subtle shadow' },
+    { name: '10', value: '0 1px 3px rgba(0,0,0,0.1)', description: 'Light shadow' },
+    { name: '20', value: '0 4px 6px rgba(0,0,0,0.1)', description: 'Medium shadow' },
+    { name: '30', value: '0 10px 15px rgba(0,0,0,0.1)', description: 'Strong shadow' },
+    { name: '40', value: '0 20px 25px rgba(0,0,0,0.15)', description: 'Heavy shadow' },
+  ],
+};
+
+export const allTokenCategories = {
+  colors: colorTokens,
+  spacing: spacingTokens,
+  typography: typographyTokens,
+  borderRadius: borderRadiusTokens,
+  elevation: elevationTokens,
+};
+
+// Helper functions
+export function getTokensByCategory(category: keyof typeof allTokenCategories) {
+  return allTokenCategories[category];
+}
+
+export function searchTokens(query: string): TokenValue[] {
+  const lowerQuery = query.toLowerCase();
+  const results: TokenValue[] = [];
+
+  // Search in color tokens
+  colorTokens.forEach((category) => {
+    category.tokens.forEach((token) => {
+      if (
+        token.name.toLowerCase().includes(lowerQuery) ||
+        token.description?.toLowerCase().includes(lowerQuery)
+      ) {
+        results.push(token);
+      }
+    });
+  });
+
+  // Search in other tokens
+  [spacingTokens, typographyTokens, borderRadiusTokens, elevationTokens].forEach(
+    (category) => {
+      category.tokens.forEach((token) => {
+        if (
+          token.name.toLowerCase().includes(lowerQuery) ||
+          token.description?.toLowerCase().includes(lowerQuery)
+        ) {
+          results.push(token);
+        }
+      });
+    }
+  );
+
+  return results;
+}
+
+export function formatTokensAsMarkdown(): string {
+  let markdown = '# Urbint Design Tokens\n\n';
+
+  // Colors
+  markdown += '## Colors\n\n';
+  colorTokens.forEach((category) => {
+    markdown += `### ${category.name}\n`;
+    markdown += `${category.description}\n\n`;
+    markdown += '| Token | Value | Description |\n';
+    markdown += '|-------|-------|-------------|\n';
+    category.tokens.forEach((token) => {
+      markdown += `| \`${token.name}\` | ${token.value} | ${token.description || ''} |\n`;
+    });
+    markdown += '\n';
+  });
+
+  // Spacing
+  markdown += `## ${spacingTokens.name}\n`;
+  markdown += `${spacingTokens.description}\n\n`;
+  markdown += '| Token | Value | Description |\n';
+  markdown += '|-------|-------|-------------|\n';
+  spacingTokens.tokens.forEach((token) => {
+    markdown += `| \`'${token.name}'\` | ${token.value} | ${token.description || ''} |\n`;
+  });
+  markdown += '\n';
+
+  // Typography
+  markdown += `## ${typographyTokens.name}\n`;
+  markdown += `${typographyTokens.description}\n\n`;
+  markdown += '| Token | Value | Description |\n';
+  markdown += '|-------|-------|-------------|\n';
+  typographyTokens.tokens.forEach((token) => {
+    markdown += `| \`${token.name}\` | ${token.value} | ${token.description || ''} |\n`;
+  });
+  markdown += '\n';
+
+  // Border Radius
+  markdown += `## ${borderRadiusTokens.name}\n`;
+  markdown += `${borderRadiusTokens.description}\n\n`;
+  markdown += '| Token | Value | Description |\n';
+  markdown += '|-------|-------|-------------|\n';
+  borderRadiusTokens.tokens.forEach((token) => {
+    markdown += `| \`'${token.name}'\` | ${token.value} | ${token.description || ''} |\n`;
+  });
+  markdown += '\n';
+
+  // Elevation
+  markdown += `## ${elevationTokens.name}\n`;
+  markdown += `${elevationTokens.description}\n\n`;
+  markdown += '| Token | Value | Description |\n';
+  markdown += '|-------|-------|-------------|\n';
+  elevationTokens.tokens.forEach((token) => {
+    markdown += `| \`'${token.name}'\` | ${token.value} | ${token.description || ''} |\n`;
+  });
+
+  return markdown;
+}
+

package/mcp-server/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "strict": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
+

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "@urbint/cl",
+  "version": "1.0.1",
+  "description": "Enterprise-ready React Native component library built with Unistyles",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "module": "src/index.ts",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "web": "expo start --web",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "typecheck": "tsc --noEmit",
+    "build": "tsc",
+    "prebuild": "expo prebuild --clean",
+    "mcp:install": "cd mcp-server && npm install",
+    "mcp:build": "cd mcp-server && npm run build",
+    "mcp:dev": "cd mcp-server && npm run dev",
+    "mcp:start": "node mcp-server/dist/index.js"
+  },
+  "keywords": [
+    "react-native",
+    "component-library",
+    "ui-components",
+    "unistyles",
+    "enterprise",
+    "urbint",
+    "design-system",
+    "mcp",
+    "model-context-protocol"
+  ],
+  "author": "Urbint",
+  "license": "MIT",
+  "dependencies": {
+    "@expo/metro-runtime": "^6.1.2",
+    "@expo/vector-icons": "^15.0.3",
+    "@gorhom/bottom-sheet": "^5.2.8",
+    "@react-native-community/datetimepicker": "^8.5.1",
+    "@react-native-community/slider": "^5.1.1",
+    "expo": "~54.0.27",
+    "expo-status-bar": "~3.0.9",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-edge-to-edge": "^1.7.0",
+    "react-native-gesture-handler": "^2.29.1",
+    "react-native-nitro-modules": "^0.31.10",
+    "react-native-reanimated": "^4.2.0",
+    "react-native-safe-area-context": "^5.6.2",
+    "react-native-svg": "^15.15.1",
+    "react-native-unistyles": "^3.0.19",
+    "react-native-web": "^0.21.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.5",
+    "@chromatic-com/storybook": "^4.1.3",
+    "@react-native-async-storage/async-storage": "^2.2.0",
+    "@storybook/addon-a11y": "^10.1.9",
+    "@storybook/addon-docs": "^10.1.9",
+    "@storybook/addon-vitest": "^10.1.9",
+    "@storybook/react-native-web-vite": "^10.1.9",
+    "@types/react": "~19.1.0",
+    "@vitest/browser-playwright": "^4.0.15",
+    "@vitest/coverage-v8": "^4.0.15",
+    "babel-loader": "^8.4.1",
+    "babel-preset-expo": "^54.0.8",
+    "playwright": "^1.57.0",
+    "storybook": "^10.1.9",
+    "typescript": "~5.9.2",
+    "vite": "^7.3.0",
+    "vitest": "^4.0.15"
+  },
+  "private": false,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "directories": {
+    "doc": "docs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/urbint/urbint-cl.git"
+  },
+  "bugs": {
+    "url": "https://github.com/urbint/urbint-cl/issues"
+  },
+  "homepage": "https://github.com/urbint/urbint-cl#readme"
+}

package/src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,226 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Accordion, AccordionItem, AccordionButton, AccordionPanel } from './Accordion';
+import { VStack } from '../VStack';
+import { Text } from '../Text';
+import { colors, spacing } from '../../styles/tokens';
+
+const meta: Meta<typeof Accordion> = {
+  title: 'Components/Accordion',
+  component: Accordion,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Accordion>;
+
+export const Default: Story = {
+  render: () => (
+    <Accordion defaultIndex={['item-1']}>
+      <AccordionItem value="item-1">
+        <AccordionButton>Section 1</AccordionButton>
+        <AccordionPanel>
+          <Text color={colors.text.secondary}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </Text>
+        </AccordionPanel>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionButton>Section 2</AccordionButton>
+        <AccordionPanel>
+          <Text color={colors.text.secondary}>
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+            nisi ut aliquip ex ea commodo consequat.
+          </Text>
+        </AccordionPanel>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionButton>Section 3</AccordionButton>
+        <AccordionPanel>
+          <Text color={colors.text.secondary}>
+            Duis aute irure dolor in reprehenderit in voluptate velit esse
+            cillum dolore eu fugiat nulla pariatur.
+          </Text>
+        </AccordionPanel>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+export const AllowMultiple: Story = {
+  render: () => (
+    <VStack space={spacing.sm}>
+      <Text weight="semiBold">Allow Multiple Open</Text>
+      <Accordion allowMultiple defaultIndex={['item-1', 'item-2']}>
+        <AccordionItem value="item-1">
+          <AccordionButton>First Section</AccordionButton>
+          <AccordionPanel>
+            <Text color="#6B7280">Content for the first section.</Text>
+          </AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionButton>Second Section</AccordionButton>
+          <AccordionPanel>
+            <Text color="#6B7280">Content for the second section.</Text>
+          </AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="item-3">
+          <AccordionButton>Third Section</AccordionButton>
+          <AccordionPanel>
+            <Text color="#6B7280">Content for the third section.</Text>
+          </AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    </VStack>
+  ),
+};
+
+export const DisabledItem: Story = {
+  render: () => (
+    <VStack space={spacing.sm}>
+      <Text weight="semiBold">With Disabled Item</Text>
+      <Accordion>
+        <AccordionItem value="item-1">
+          <AccordionButton>Available Section</AccordionButton>
+          <AccordionPanel>
+            <Text color="#6B7280">This section is available.</Text>
+          </AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="item-2" isDisabled>
+          <AccordionButton>Disabled Section</AccordionButton>
+          <AccordionPanel>
+            <Text color="#6B7280">This content is not accessible.</Text>
+          </AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="item-3">
+          <AccordionButton>Another Available Section</AccordionButton>
+          <AccordionPanel>
+            <Text color="#6B7280">This section is also available.</Text>
+          </AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    </VStack>
+  ),
+};
+
+export const FAQ: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold" style={{ fontSize: 20 }}>Frequently Asked Questions</Text>
+      <Accordion>
+        <AccordionItem value="faq-1">
+          <AccordionButton>What is Urbint Component Library?</AccordionButton>
+          <AccordionPanel>
+            <Text color="#6B7280">
+              Urbint Component Library is an enterprise-ready React Native
+              component library built with Unistyles for consistent styling
+              across platforms.
+            </Text>
+          </AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="faq-2">
+          <AccordionButton>How do I install the library?</AccordionButton>
+          <AccordionPanel>
+            <Text color="#6B7280">
+              You can install the library using npm or yarn. Simply run
+              `npm install urbint-cl` or `yarn add urbint-cl` in your project.
+            </Text>
+          </AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="faq-3">
+          <AccordionButton>Is it compatible with Expo?</AccordionButton>
+          <AccordionPanel>
+            <Text color="#6B7280">
+              Yes! The library is fully compatible with Expo SDK 53+ and
+              supports both iOS and Android platforms.
+            </Text>
+          </AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="faq-4">
+          <AccordionButton>Can I customize the theme?</AccordionButton>
+          <AccordionPanel>
+            <Text color="#6B7280">
+              Absolutely! The library uses Unistyles for theming, which allows
+              you to customize colors, typography, spacing, and more through
+              the theme configuration.
+            </Text>
+          </AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    </VStack>
+  ),
+};
+
+export const IconOnLeft: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold" style={{ fontSize: 20 }}>Icon Position: Left</Text>
+      <Accordion iconPosition="left" defaultIndex={['item-1']}>
+        <AccordionItem value="item-1">
+          <AccordionButton>Site Conditions</AccordionButton>
+          <AccordionPanel>
+            <Text color="#6B7280">
+              Site conditions include weather, terrain, and environmental factors
+              that may affect the work.
+            </Text>
+          </AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionButton>Activities</AccordionButton>
+          <AccordionPanel>
+            <Text color="#6B7280">
+              Activities include installation, maintenance, and removal tasks
+              that need to be performed.
+            </Text>
+          </AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="item-3">
+          <AccordionButton>Equipment</AccordionButton>
+          <AccordionPanel>
+            <Text color="#6B7280">
+              Equipment details for the job site including machinery and tools.
+            </Text>
+          </AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    </VStack>
+  ),
+};
+
+export const MixedIconPosition: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold" style={{ fontSize: 20 }}>Mixed Icon Positions</Text>
+      <Text color={colors.text.secondary} style={{ marginBottom: spacing.sm }}>
+        Default is right, but individual items can override to left
+      </Text>
+      <Accordion iconPosition="right" defaultIndex={['item-1']}>
+        <AccordionItem value="item-1">
+          <AccordionButton iconPosition="left">Icon on Left (override)</AccordionButton>
+          <AccordionPanel>
+            <Text color="#6B7280">
+              This item has its icon position overridden to left.
+            </Text>
+          </AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionButton>Icon on Right (default)</AccordionButton>
+          <AccordionPanel>
+            <Text color="#6B7280">
+              This item uses the default right icon position.
+            </Text>
+          </AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="item-3">
+          <AccordionButton iconPosition="left">Icon on Left (override)</AccordionButton>
+          <AccordionPanel>
+            <Text color="#6B7280">
+              Another item with left icon position override.
+            </Text>
+          </AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    </VStack>
+  ),
+};
+