@pibit.ai/cure-design-system 0.2.2 → 0.2.3

package/README.md

@@ -1,245 +1,164 @@
-# @pibit/components
+# @pibit.ai/cure-design-system
 
-Component library for Pibit B2B SaaS platform.
+A modern, accessible React component library for building B2B SaaS applications.
 
-## Phase 0 - Foundation (v0.1.0)
-
-This is the initial release with core primitive components.
+📚 **[View Storybook Documentation](https://pibit-ai.github.io/pibit-components/)**
 
 ## Installation
 
 ```bash
-npm install @pibit/components
-```
-
-### Peer Dependencies
-
-You need to have these installed in your project:
-
-```bash
-npm install react react-dom tailwindcss
+npm install @pibit.ai/cure-design-system
 ```
 
 ## Setup
 
-### 1. Add to Tailwind Config
+### 1. Configure Tailwind
 
-Update your `tailwind.config.js`:
+Add the component library to your `tailwind.config.js`:
 
 ```javascript
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
     './src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/@pibit/components/**/*.{js,ts,jsx,tsx}', // Add this
+    './node_modules/@pibit.ai/cure-design-system/**/*.{js,ts,jsx,tsx}',
   ],
-  // ... rest of your config
 };
 ```
 
 ### 2. Import Styles
 
-In your main entry file (e.g., `main.tsx` or `App.tsx`):
-
 ```typescript
-import '@pibit/components/styles';
+import '@pibit.ai/cure-design-system/styles';
 ```
 
 ## Components
 
-### Phase 0 Primitives
+### Primitives
 
-- **Button** - Accessible button with multiple variants
-- **Input** - Text input with label, error states, and icons
-- **Checkbox** - Accessible checkbox with label support
-- **Badge** - Labels and status indicators
-- **Avatar** - User profile images with fallbacks
-- **Icon** - Icon component (abstracts Untitled UI)
+- **Button** – Multiple variants, sizes, and states
+- **Input** – Text input with labels, validation, and icons
+- **Checkbox** – Accessible checkbox with label and description
+- **Badge** – Status indicators and labels
+- **Avatar** – Profile images with fallback support
+- **Icon** – Unified icon system
+- **Text** – Typography component
+- **Heading** – Semantic headings
+- **Toggle** – Switch component
 
-## Usage Examples
+### Patterns
 
-### Button
+- **Table** – Data table with sorting and pagination
 
-```typescript
-import { Button } from '@pibit/components/primitives/button';
-
-function App() {
-  return (
-    <>
-      <Button>Click me</Button>
-      <Button variant="secondary" size="lg">Large Secondary</Button>
-      <Button variant="destructive">Delete</Button>
-      <Button isDisabled>Disabled</Button>
-    </>
-  );
-}
-```
+## Usage
 
-### Input
-
-```typescript
-import { Input } from '@pibit/components/primitives/input';
-import { Icon } from '@pibit/components/primitives/icon';
-
-function LoginForm() {
-  return (
-    <>
-      <Input
-        label="Email"
-        type="email"
-        placeholder="you@example.com"
-        isRequired
-      />
-      <Input
-        label="Search"
-        type="search"
-        placeholder="Search..."
-        leftIcon={<Icon name="SearchMd" size={16} />}
-      />
-      <Input
-        label="Password"
-        type="password"
-        errorMessage="Password is required"
-      />
-    </>
-  );
-}
-```
+### Button
 
-### Checkbox
+```tsx
+import { Button } from '@pibit.ai/cure-design-system/primitives/button';
 
-```typescript
-import { Checkbox } from '@pibit/components/primitives/checkbox';
-
-function TermsForm() {
-  const [accepted, setAccepted] = useState(false);
-
-  return (
-    <Checkbox
-      label="I accept the terms and conditions"
-      description="You must accept to continue"
-      checked={accepted}
-      onCheckedChange={(checked) => setAccepted(!!checked)}
-    />
-  );
-}
+<Button variant="primary">Submit</Button>
+<Button variant="secondary" size="lg">Cancel</Button>
+<Button variant="destructive">Delete</Button>
 ```
 
-### Badge
-
-```typescript
-import { Badge } from '@pibit/components/primitives/badge';
-
-function StatusIndicator({ status }) {
-  return (
-    <>
-      <Badge variant="success">Active</Badge>
-      <Badge variant="warning">Pending</Badge>
-      <Badge variant="error">Failed</Badge>
-      <Badge variant="outline">Draft</Badge>
-    </>
-  );
-}
-```
+### Input
 
-### Avatar
+```tsx
+import { Input } from '@pibit.ai/cure-design-system/primitives/input';
+import { Icon } from '@pibit.ai/cure-design-system/primitives/icon';
 
-```typescript
-import { Avatar } from '@pibit/components/primitives/avatar';
-
-function UserProfile({ user }) {
-  return (
-    <Avatar
-      src={user.avatarUrl}
-      alt={user.name}
-      fallback={user.initials}
-      size="lg"
-    />
-  );
-}
-```
+<Input
+  label="Email"
+  type="email"
+  placeholder="you@example.com"
+  isRequired
+/>
 
-### Icon
+<Input
+  label="Search"
+  leftIcon={<Icon name="SearchMd" size={16} />}
+  placeholder="Search..."
+/>
 
-```typescript
-import { Icon } from '@pibit/components/primitives/icon';
-
-function IconExamples() {
-  return (
-    <>
-      <Icon name="ChevronDown" size={16} />
-      <Icon name="SearchMd" size={20} className="text-gray-500" />
-      <Icon name="CheckCircle" size={24} className="text-success-600" />
-    </>
-  );
-}
+<Input
+  label="Password"
+  type="password"
+  errorMessage="Password is required"
+/>
 ```
 
-## Import Strategies
+### Checkbox
 
-### ✅ Recommended: Direct Imports (Tree-shakeable)
+```tsx
+import { Checkbox } from '@pibit.ai/cure-design-system/primitives/checkbox';
 
-```typescript
-import { Button } from '@pibit/components/primitives/button';
-import { Input } from '@pibit/components/primitives/input';
+<Checkbox
+  label="I accept the terms and conditions"
+  description="You must accept to continue"
+  checked={accepted}
+  onCheckedChange={(checked) => setAccepted(!!checked)}
+/>
 ```
 
-### ✅ Also Good: Barrel Import for Primitives
+### Badge
 
-```typescript
-import { Button, Input, Badge } from '@pibit/components';
+```tsx
+import { Badge } from '@pibit.ai/cure-design-system/primitives/badge';
+
+<Badge variant="success">Active</Badge>
+<Badge variant="warning">Pending</Badge>
+<Badge variant="error">Failed</Badge>
+<Badge variant="outline">Draft</Badge>
 ```
 
-## Development
+### Avatar
 
-### Install Dependencies
+```tsx
+import { Avatar } from '@pibit.ai/cure-design-system/primitives/avatar';
 
-```bash
-npm install
+<Avatar
+  src={user.avatarUrl}
+  alt={user.name}
+  fallback={user.initials}
+  size="lg"
+/>
 ```
 
-### Run Storybook
-
-```bash
-npm run storybook
-```
+### Icon
 
-### Build Library
+```tsx
+import { Icon } from '@pibit.ai/cure-design-system/primitives/icon';
 
-```bash
-npm run build
+<Icon name="ChevronDown" size={16} />
+<Icon name="SearchMd" size={20} className="text-gray-500" />
+<Icon name="CheckCircle" size={24} className="text-success-600" />
 ```
 
-### Run Tests
+## Imports
 
-```bash
-npm test
+### Direct imports (recommended)
+
+```typescript
+import { Button } from '@pibit.ai/cure-design-system/primitives/button';
+import { Input } from '@pibit.ai/cure-design-system/primitives/input';
 ```
 
-## Architecture
+### Barrel import
 
+```typescript
+import { Button, Input, Badge } from '@pibit.ai/cure-design-system';
 ```
-src/
-├── primitives/     # Phase 0 - Basic UI components (Button, Input, etc.)
-├── patterns/       # Phase 1 - Composable patterns (Select, Modal, etc.)
-├── complex/        # Phase 2 - Heavy library abstractions (DataTable, etc.)
-├── domain/         # Phase 3 - Business-aware components (FieldRenderer, etc.)
-├── utils/          # Shared utilities
-└── styles/         # Design tokens and global styles
-```
-
-## Bundle Size
 
-Phase 0 primitives are designed to be lightweight:
+## Accessibility
 
-- **Button**: ~5KB
-- **Input**: ~8KB
-- **Checkbox**: ~6KB
-- **Badge**: ~3KB
-- **Avatar**: ~5KB
-- **Icon**: ~2KB (+ Untitled UI icons as needed)
+All components are built with accessibility as a priority:
 
-**Total (all primitives)**: ~30KB (tree-shaken)
+- WCAG 2.1 AA compliant
+- Full keyboard navigation
+- Screen reader support
+- Proper focus management
+- Semantic HTML
 
 ## Browser Support
 
@@ -248,28 +167,6 @@ Phase 0 primitives are designed to be lightweight:
 - Safari (latest)
 - Edge (latest)
 
-## Accessibility
-
-All components are built with accessibility in mind:
-
-- ✅ WCAG 2.1 AA compliant
-- ✅ Keyboard navigation
-- ✅ Screen reader support
-- ✅ Focus management
-- ✅ Semantic HTML
-
 ## License
 
 MIT
-
-## Contributing
-
-See `CONTRIBUTING.md` for development guidelines.
-
-## Roadmap
-
-- **v0.1.0** (Week 1) - Phase 0: Primitives ← YOU ARE HERE
-- **v0.2.0** (Week 2) - Phase 1: Patterns (Select, Modal, DatePicker)
-- **v0.3.0** (Week 3) - Phase 2: Complex (DataTable, RichTextEditor)
-- **v0.4.0** (Week 4) - Phase 3: Domain (FieldRenderer, PermissionGate)
-- **v1.0.0** (Week 4) - Stable release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pibit.ai/cure-design-system",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "CURE Design System - React component library",
   "author": "Pibit",
   "license": "MIT",