banhaten-ui 0.0.9

package/README.md

@@ -0,0 +1,275 @@
+# @banhaten/design-system
+
+A comprehensive React component library with full RTL (Right-to-Left) support, built with TypeScript and Tailwind CSS. Sourced from a complete RTL-supporting Figma library.
+
+## Features
+
+- 🌍 **Full RTL Support** - Built-in support for Arabic, Hebrew, and other RTL languages
+- 🎨 **10 Production-Ready Components** - Button, Badge, SocialButton, ButtonGroup, Checkbox, CheckmarkCard, Divider, Menu, Accordion, Alert
+- 📦 **Tree-Shakeable** - Import only what you need
+- 🎯 **TypeScript First** - Full type safety with comprehensive type definitions
+- 🎭 **Tailwind CSS** - Customizable design tokens via Tailwind preset
+- 📐 **Figma-Accurate** - Matches design specs precisely with visual documentation
+- ⚡ **Modern Stack** - React 18, TypeScript, Vite
+
+## Installation
+
+```bash
+npm install @banhaten/design-system
+```
+
+### Peer Dependencies
+
+This library requires the following peer dependencies:
+
+```bash
+npm install react react-dom tailwindcss
+```
+
+## Quick Start
+
+### 1. Import Styles
+
+Import the base styles in your main entry file:
+
+```typescript
+import '@banhaten/design-system/dist/style.css';
+```
+
+### 2. Configure Tailwind CSS
+
+Extend your `tailwind.config.js` with the Banhaten preset:
+
+```javascript
+module.exports = {
+  presets: [
+    require('@banhaten/design-system/tailwind.preset')
+  ],
+  content: [
+    './src/**/*.{js,jsx,ts,tsx}',
+    './node_modules/@banhaten/design-system/dist/**/*.js'
+  ],
+  // Your custom config...
+}
+```
+
+### 3. Use Components
+
+```typescript
+import { Button, Badge, Alert } from '@banhaten/design-system';
+
+function App() {
+  return (
+    <div>
+      <Button variant="primary" size="md">
+        Click Me
+      </Button>
+      
+      <Badge color="blue" style="Solid">
+        New
+      </Badge>
+      
+      <Alert 
+        variant="info" 
+        title="Welcome"
+        message="This is a sample alert"
+      />
+    </div>
+  );
+}
+```
+
+## RTL Support
+
+All components support RTL out of the box. Simply pass the `rtl` prop:
+
+```typescript
+<Button rtl variant="primary">
+  زر
+</Button>
+
+<Badge rtl color="green">
+  جديد
+</Badge>
+```
+
+## Available Components
+
+### Buttons
+- **Button** - Primary UI button with multiple variants, sizes, and icon support
+- **SocialButton** - Pre-styled buttons for social platforms (Facebook, Google, Apple, etc.)
+- **ButtonGroup** - Grouped button controls
+
+### Form Controls
+- **Checkbox** - Accessible checkbox with support text
+- **CheckmarkCard** - Card-style selectable component
+
+### Display
+- **Badge** - Status indicators and labels
+- **Alert** - Contextual feedback messages
+- **Divider** - Visual separators
+
+### Navigation
+- **Menu** - Dropdown menu with rich item types
+- **Accordion** - Collapsible content sections
+
+### Other
+- **CodeBlock** - Syntax-highlighted code display
+
+## Component Examples
+
+### Button with Icons
+
+```typescript
+import { Button } from '@banhaten/design-system';
+import { Search, Settings } from 'lucide-react';
+
+<Button 
+  variant="primary" 
+  size="md"
+  iconLeft={<Search />}
+>
+  Search
+</Button>
+
+<Button 
+  variant="outline" 
+  icon={<Settings />}
+/>
+```
+
+### Badge Colors
+
+```typescript
+<Badge color="blue" style="Solid">Info</Badge>
+<Badge color="green" style="Light">Success</Badge>
+<Badge color="red" style="Outline">Error</Badge>
+```
+
+### Accordion
+
+```typescript
+<Accordion
+  label="Section Title"
+  description="Section content goes here"
+  expandable
+  style="Boxed"
+/>
+```
+
+## TypeScript Support
+
+All components are fully typed with exported type definitions:
+
+```typescript
+import type { 
+  ButtonProps, 
+  ButtonVariant, 
+  ButtonSize,
+  BadgeProps,
+  BadgeColor 
+} from '@banhaten/design-system';
+
+const variant: ButtonVariant = 'primary';
+const size: ButtonSize = 'md';
+```
+
+## Customization
+
+### Design Tokens
+
+The Tailwind preset includes:
+- **Colors**: Primary, Critical, Neutral, and semantic colors
+- **Shadows**: 3-layer shadow system matching Figma specs
+- **Typography**: Inter, Noto Sans Arabic, JetBrains Mono, Space Grotesk
+- **Spacing**: Consistent spacing scale
+- **Border Radius**: Control-specific radii
+
+### Overriding Defaults
+
+```javascript
+// tailwind.config.js
+module.exports = {
+  presets: [require('@banhaten/design-system/tailwind.preset')],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          // Override primary colors
+          600: '#your-color',
+        }
+      }
+    }
+  }
+}
+```
+
+## Development
+
+### Building from Source
+
+```bash
+# Install dependencies
+npm install
+
+# Build the library
+npm run build
+
+# Watch mode
+npm run build:watch
+
+# Type check
+npm run typecheck
+```
+
+### Development Server
+
+```bash
+npm run dev
+```
+
+### Storybook
+
+```bash
+npm run storybook
+```
+
+## Package Structure
+
+```
+dist/
+├── index.js          # ESM bundle
+├── index.cjs         # CommonJS bundle  
+├── index.d.ts        # TypeScript definitions
+└── style.css         # Component styles
+
+tailwind.preset.js    # Tailwind configuration preset
+```
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## License
+
+ISC
+
+## Contributing
+
+Contributions are welcome! Please ensure:
+- Components maintain RTL support
+- TypeScript types are comprehensive
+- Figma design specs are matched
+- Tests pass and code is linted
+
+## Credits
+
+UI Design by the Banhaten design team.
+Developed and maintained by Ibrahim SP.
+
+---
+
+**Need Help?** Check out our [Storybook documentation](#) or [open an issue](https://github.com/ibrahimSP/banhaten-design-system/issues).