@adam-milo/ui 1.0.35 → 1.0.41

package/README.md

@@ -1,461 +1,341 @@
 # @adam-milo/ui
 
-> A modern, accessible, and fully-typed React component library built with TypeScript and TailwindCSS.
+A modern, accessible React component library built with TypeScript and Tailwind CSS v4.
 
-[![npm version](https://badge.fury.io/js/%40adam-milo%2Fui.svg)](https://www.npmjs.com/package/@adam-milo/ui)
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
-
----
-
-## 🎨 Features
-
-- **React 18** with TypeScript for type-safe development
-- **Modern CSS** with native nesting and logical properties for RTL support
-- **TailwindCSS** integration with comprehensive design tokens
-- **Radix UI** primitives for accessible components
-- **Fully Typed** with comprehensive TypeScript definitions
-- **Tested** with Vitest and React Testing Library
-- **Documented** with Storybook
-- **Accessible** - WCAG compliant components
-- **RTL Ready** - Built-in right-to-left language support
-
----
-
-## 📦 Installation
+## Installation
 
 ```bash
 npm install @adam-milo/ui
-# or
-yarn add @adam-milo/ui
-# or
-pnpm add @adam-milo/ui
 ```
 
-### Peer Dependencies
-
-Make sure you have React 18+ installed:
+## Setup
 
-```bash
-npm install react react-dom
-```
-
----
-
-## 🚀 Quick Start
-
-### 1. Import Styles
-
-Import the styles in your app's entry point:
+Import styles once in your app entry:
 
 ```tsx
-// App.tsx or index.tsx
+// main.tsx or App.tsx
 import '@adam-milo/ui/styles.css';
 ```
 
-### 2. Use Components
+## Usage
 
 ```tsx
-import { Button, Input, Card } from '@adam-milo/ui';
+import { Button, Stack, Checkbox } from '@adam-milo/ui';
 
 function App() {
   return (
-    <Card>
-      <h2>Welcome</h2>
-      <Input label="Name" placeholder="Enter your name" />
-      <Button variant="primary-workspace">Submit</Button>
-    </Card>
+    <Stack spacing="4">
+      <Button variant="main-orange">Submit</Button>
+      <Button variant="secondary-blue">Cancel</Button>
+      <Checkbox label="I agree to the terms" />
+    </Stack>
   );
 }
 ```
 
-### 3. With TypeScript
-
-Full TypeScript support out of the box:
-
-```tsx
-import { Button, type ButtonProps } from '@adam-milo/ui';
-
-const MyButton: React.FC<{ customProp: string }> = ({ customProp }) => {
-  const buttonProps: ButtonProps = {
-    variant: 'primary-workspace',
-    fullWidth: true,
-    onClick: () => console.log(customProp),
-  };
-
-  return <Button {...buttonProps}>Click me</Button>;
-};
-```
-
----
-
-## 📚 Components
-
-### Core Components
+## Components
 
-#### Button
-
-Multiple variants with full accessibility support:
+### Button
 
 ```tsx
 import { Button } from '@adam-milo/ui';
 
 // Variants
-<Button variant="primary-workspace">Primary Workspace</Button>
-<Button variant="primary-builder">Primary Builder</Button>
-<Button variant="secondary">Secondary</Button>
-<Button variant="ghost">Ghost</Button>
-
-// With icons
-<Button
-  variant="primary-workspace"
-  iconLeft={<Icon name="plus" />}
->
+<Button variant="main-orange">Main Orange</Button>
+<Button variant="secondary-orange">Secondary Orange</Button>
+<Button variant="secondary-blue">Secondary Blue</Button>
+
+// With icon
+<Button variant="main-orange" icon={<Icon name="PlusIcon" />}>
   Add Item
 </Button>
 
 // Full width
-<Button variant="primary-workspace" fullWidth>
+<Button variant="main-orange" fullWidth>
   Submit
 </Button>
 
-// Disabled state
-<Button variant="primary-workspace" disabled>
-  Loading...
+// Disabled
+<Button variant="main-orange" disabled>
+  Disabled
 </Button>
 ```
 
-#### Icon
-
-SVG icon wrapper component:
+### EmailInput
 
 ```tsx
-import { Icon } from '@adam-milo/ui';
-
-<Icon name="check" size="md" />;
+import { EmailInput } from '@adam-milo/ui';
+
+<EmailInput
+  label="Email"
+  placeholder="Enter your email"
+  value={email}
+  onChange={(e) => setEmail(e.target.value)}
+  error={error}
+  helperText="We'll never share your email"
+/>;
 ```
 
-### Form Components
+### PasswordInput
 
-#### Input
+```tsx
+import { PasswordInput } from '@adam-milo/ui';
+
+<PasswordInput
+  label="Password"
+  placeholder="Enter your password"
+  value={password}
+  onChange={(e) => setPassword(e.target.value)}
+  error={error}
+/>;
+```
 
-Text input with label and validation:
+### PhoneInput
 
 ```tsx
-import { Input } from '@adam-milo/ui';
+import { PhoneInput } from '@adam-milo/ui';
 
-<Input label="Email" type="email" placeholder="you@example.com" required />;
+<PhoneInput label="Phone Number" value={phone} onChange={setPhone} defaultCountry="IL" />;
 ```
 
-### Layout Components
-
-#### Stack
-
-Flexbox-based spacing utility:
+### OTPInput
 
 ```tsx
-import { Stack } from '@adam-milo/ui';
+import { OTPInput } from '@adam-milo/ui';
 
-<Stack direction="vertical" spacing={4}>
-  <Button>Button 1</Button>
-  <Button>Button 2</Button>
-</Stack>;
+<OTPInput length={6} value={otp} onChange={setOtp} onComplete={(code) => verifyCode(code)} />;
 ```
 
-#### Card
-
-Content container with elevation:
+### Checkbox
 
 ```tsx
-import { Card } from '@adam-milo/ui';
+import { Checkbox } from '@adam-milo/ui';
 
-<Card>
-  <h3>Card Title</h3>
-  <p>Card content goes here</p>
-</Card>;
+<Checkbox
+  label="I agree to the terms"
+  checked={checked}
+  onChange={(e) => setChecked(e.target.checked)}
+/>;
 ```
 
-### Data Display
+### Radio
 
-#### DataTable
+```tsx
+import { Radio } from '@adam-milo/ui';
+
+<Radio
+  name="plan"
+  label="Basic Plan"
+  value="basic"
+  checked={plan === 'basic'}
+  onChange={(e) => setPlan(e.target.value)}
+/>;
+```
 
-Semantic table component:
+### Toggle
 
 ```tsx
-import { DataTable } from '@adam-milo/ui';
+import { Toggle } from '@adam-milo/ui';
 
-<DataTable headers={['Name', 'Email', 'Status']} rows={data} />;
+<Toggle label="Enable notifications" checked={enabled} onChange={setEnabled} />;
 ```
 
-### Feedback Components
+### Select
 
-#### Alert
+```tsx
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@adam-milo/ui';
+
+<Select value={value} onValueChange={setValue}>
+  <SelectTrigger>
+    <SelectValue placeholder="Select option" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value="option1">Option 1</SelectItem>
+    <SelectItem value="option2">Option 2</SelectItem>
+  </SelectContent>
+</Select>;
+```
 
-Contextual feedback messages:
+### Stack
 
 ```tsx
-import { Alert } from '@adam-milo/ui';
+import { Stack } from '@adam-milo/ui';
 
-<Alert variant="success">Operation completed!</Alert>
-<Alert variant="error">Something went wrong</Alert>
-<Alert variant="warning">Please review your input</Alert>
-<Alert variant="info">New updates available</Alert>
+// Vertical stack (default)
+<Stack spacing="4">
+  <div>Item 1</div>
+  <div>Item 2</div>
+</Stack>
+
+// Horizontal stack
+<Stack direction="horizontal" spacing="4">
+  <div>Item 1</div>
+  <div>Item 2</div>
+</Stack>
 ```
 
-### Navigation Components
-
-#### Tabs
-
-Accessible tabbed interface:
+### Grid
 
 ```tsx
-import { Tabs } from '@adam-milo/ui';
+import { Grid } from '@adam-milo/ui';
 
-<Tabs defaultValue="tab1">
-  <Tabs.List>
-    <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
-    <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
-  </Tabs.List>
-  <Tabs.Content value="tab1">Content 1</Tabs.Content>
-  <Tabs.Content value="tab2">Content 2</Tabs.Content>
-</Tabs>;
+<Grid columns={3} gap="4">
+  <div>Cell 1</div>
+  <div>Cell 2</div>
+  <div>Cell 3</div>
+</Grid>;
 ```
 
-### Overlay Components
+### Card
 
-#### Dialog
+```tsx
+import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@adam-milo/ui';
+
+<Card>
+  <CardHeader>
+    <CardTitle>Card Title</CardTitle>
+  </CardHeader>
+  <CardContent>Card content goes here</CardContent>
+  <CardFooter>
+    <Button>Action</Button>
+  </CardFooter>
+</Card>;
+```
 
-Accessible modal dialog:
+### Dialog
 
 ```tsx
-import { Dialog } from '@adam-milo/ui';
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '@adam-milo/ui';
 
 <Dialog>
-  <Dialog.Trigger asChild>
+  <DialogTrigger asChild>
     <Button>Open Dialog</Button>
-  </Dialog.Trigger>
-  <Dialog.Content>
-    <Dialog.Title>Dialog Title</Dialog.Title>
-    <Dialog.Description>Dialog content goes here</Dialog.Description>
-  </Dialog.Content>
+  </DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Dialog Title</DialogTitle>
+      <DialogDescription>Dialog description here.</DialogDescription>
+    </DialogHeader>
+    <p>Dialog content</p>
+  </DialogContent>
 </Dialog>;
 ```
 
----
-
-## 🎨 Design Tokens
-
-### CSS Variables
-
-All design tokens are available as CSS custom properties:
+### Tabs
 
-```css
-/* Colors */
---color-text: #191a39;
---color-action: #272643;
---color-popup: #ed6726;
---color-card: #ffffff;
-
-/* Spacing */
---spacing-1: 0.25rem; /* 4px */
---spacing-2: 0.5rem; /* 8px */
---spacing-4: 1rem; /* 16px */
-
-/* Typography */
---font-size-8: 1rem; /* 16px */
---font-size-6: 1.25rem; /* 20px */
+```tsx
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@adam-milo/ui';
 
-/* Border Radius */
---radius-default: 0.25rem; /* 4px */
---radius-lg: 0.75rem; /* 12px */
+<Tabs defaultValue="tab1">
+  <TabsList>
+    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+  </TabsList>
+  <TabsContent value="tab1">Content 1</TabsContent>
+  <TabsContent value="tab2">Content 2</TabsContent>
+</Tabs>;
 ```
 
-### Using Design Tokens
+### Alert
 
 ```tsx
-// In your components
-const CustomComponent = styled.div`
-  color: var(--color-text);
-  padding: var(--spacing-4);
-  border-radius: var(--radius-default);
-`;
-```
-
----
-
-## ♿ Accessibility
-
-All components follow WCAG 2.1 Level AA guidelines:
-
-- ✅ Semantic HTML structure
-- ✅ ARIA attributes where needed
-- ✅ Keyboard navigation support
-- ✅ Focus management
-- ✅ Screen reader friendly
-- ✅ Color contrast compliance
-- ✅ Focus-visible indicators
-
----
-
-## 🌍 RTL Support
-
-Components automatically support right-to-left languages:
+import { Alert } from '@adam-milo/ui';
 
-```tsx
-// Set direction on your root element
-<html dir="rtl">
-  <body>
-    <App />
-  </body>
-</html>
+<Alert variant="success">Operation completed successfully!</Alert>
+<Alert variant="error">Something went wrong.</Alert>
+<Alert variant="warning">Please check your input.</Alert>
+<Alert variant="info">Here's some information.</Alert>
 ```
 
-All components use logical CSS properties that automatically adapt to text direction.
-
----
-
-## 🧪 Testing
-
-### Unit Tests
+### Heading & Text
 
-Run tests with Vitest:
-
-```bash
-npm run test
-```
-
-Watch mode:
+```tsx
+import { Heading, Text } from '@adam-milo/ui';
 
-```bash
-npm run test:watch
+<Heading level="h1" size="xl">Page Title</Heading>
+<Heading level="h2" size="lg">Section Title</Heading>
+<Text size="md">Body text content</Text>
+<Text size="sm" color="secondary">Secondary text</Text>
 ```
 
-### E2E Tests
-
-Cypress tests are available in the main repository.
-
----
+### Spinner
 
-## 📖 Documentation
-
-### Storybook
-
-View interactive component documentation:
+```tsx
+import { Spinner } from '@adam-milo/ui';
 
-```bash
-# Clone the repository
-git clone https://github.com/adam-milo/adam-milo-design-system.git
-cd adam-milo-design-system
+<Spinner size="sm" />
+<Spinner size="md" />
+<Spinner size="lg" />
+```
 
-# Install dependencies
-npm install
+### Chip
 
-# Run Storybook
-npm run storybook
+```tsx
+import { Chip, ChipGroup } from '@adam-milo/ui';
+
+<Chip>Tag</Chip>
+<Chip variant="outline">Outline</Chip>
+
+<ChipGroup
+  items={[
+    { id: '1', label: 'Option 1' },
+    { id: '2', label: 'Option 2' },
+  ]}
+  selected={selected}
+  onSelectionChange={setSelected}
+/>
 ```
 
-Visit `http://localhost:6006` to explore all components.
-
----
+## TypeScript
 
-## 🛠️ Development
+Full TypeScript support with exported types:
 
-### Project Structure
+```tsx
+import { Button, type ButtonProps } from '@adam-milo/ui';
 
-```
-packages/ui/
-├── src/
-│   ├── components/
-│   │   ├── core/           # Button, Icon
-│   │   ├── forms/          # Input, Checkbox, Select
-│   │   ├── navigation/     # Tabs, Breadcrumb
-│   │   ├── feedback/       # Alert, Toast
-│   │   ├── data-display/   # Card, DataTable
-│   │   ├── overlays/       # Dialog, Modal
-│   │   └── layout/         # Stack, Grid
-│   ├── lib/                # Utilities
-│   ├── index.ts            # Main exports
-│   └── styles.css          # Global styles
-├── dist/                   # Build output
-├── package.json
-├── vite.config.ts
-└── README.md
+const MyButton: React.FC<ButtonProps> = (props) => {
+  return <Button {...props} />;
+};
 ```
 
-### Component Naming
+## RTL Support
 
-Each component follows this structure:
+Components support RTL out of the box using CSS logical properties:
 
+```tsx
+<html dir="rtl">
+  <body>
+    <App /> {/* All components render correctly in RTL */}
+  </body>
+</html>
 ```
-ComponentName/
-├── ComponentName.component.tsx  # Implementation
-├── ComponentName.css           # Styles (if needed)
-├── ComponentName.stories.tsx   # Storybook stories
-└── ComponentName.spec.tsx      # Tests
-```
-
----
-
-## 📋 Requirements
-
-- **Node.js**: >= 18.0.0
-- **npm**: >= 9.0.0
-- **React**: >= 18.2.0
-- **TypeScript**: >= 5.0.0
-
----
-
-## 🤝 Contributing
 
-We welcome contributions! Please see [CONTRIBUTING.md](../../CONTRIBUTING.md) for guidelines.
+## Accessibility
 
-### Quick Contribution Guide
+All components are WCAG AA compliant with:
 
-1. Fork the repository
-2. Create a feature branch: `git checkout -b feature/my-feature`
-3. Make your changes
-4. Run tests: `npm test`
-5. Commit: `git commit -m "feat: add new feature"`
-6. Push: `git push origin feature/my-feature`
-7. Open a Pull Request
+- Semantic HTML elements
+- Proper ARIA attributes
+- Keyboard navigation
+- Focus management
+- Screen reader support
 
----
+## Tree Shaking
 
-## 📄 License
+Import only what you need - unused components are automatically removed:
 
-MIT © Adam Milo
-
-See [LICENSE](./LICENSE) for details.
-
----
-
-## 🔗 Links
-
-- [GitHub Repository](https://github.com/adam-milo/adam-milo-design-system)
-- [npm Package](https://www.npmjs.com/package/@adam-milo/ui)
-- [Issue Tracker](https://github.com/adam-milo/adam-milo-design-system/issues)
-- [Changelog](https://github.com/adam-milo/adam-milo-design-system/releases)
-
----
-
-## 💬 Support
-
-- 📧 Email: support@adam-milo.com
-- 🐛 Issues: [GitHub Issues](https://github.com/adam-milo/adam-milo-design-system/issues)
-- 💬 Discussions: [GitHub Discussions](https://github.com/adam-milo/adam-milo-design-system/discussions)
-
----
-
-## 🙏 Acknowledgments
-
-Built with:
-
-- [React](https://react.dev/)
-- [TypeScript](https://www.typescriptlang.org/)
-- [TailwindCSS](https://tailwindcss.com/)
-- [Radix UI](https://www.radix-ui.com/)
-- [Vite](https://vitejs.dev/)
-- [Storybook](https://storybook.js.org/)
+```tsx
+// Only Button code is included in your bundle
+import { Button } from '@adam-milo/ui';
+```
 
----
+## License
 
-Made with ❤️ by the Adam Milo team
+MIT