@syscore/ui-library 1.0.0

package/README.md

@@ -0,0 +1,299 @@
+# Fusion UI Design System
+
+A comprehensive, production-ready React component library built with [Radix UI](https://www.radix-ui.com/), [Tailwind CSS](https://tailwindcss.com/), and [TypeScript](https://www.typescriptlang.org/).
+
+## Features
+
+- 🎨 **46+ React Components** - Accordion, Button, Dialog, Form, Navigation, and more
+- 🎯 **Accessible** - Built on Radix UI primitives with full WCAG compliance
+- 🎭 **Customizable** - Tailwind CSS based styling, easily themable
+- 📦 **Tree-shakeable** - ES modules with proper exports
+- 🔧 **TypeScript** - Full TypeScript support with proper type definitions
+- 📖 **Storybook** - Interactive component documentation and playground
+- ♿ **ARIA Ready** - Screen reader and keyboard navigation support
+
+## Installation
+
+```bash
+npm install @your-org/ui-library
+# or
+pnpm add @your-org/ui-library
+# or
+yarn add @your-org/ui-library
+```
+
+## Prerequisites
+
+Make sure your project has the required peer dependencies:
+
+```bash
+npm install react react-dom tailwindcss
+```
+
+## Quick Start
+
+### 1. Configure Tailwind CSS
+
+Add the component library paths to your `tailwind.config.ts`:
+
+```typescript
+import type { Config } from "tailwindcss";
+
+export default {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "node_modules/@your-org/ui-library/**/*.{js,mjs}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+} satisfies Config;
+```
+
+### 2. Import Components
+
+```tsx
+import { Button, Card, Input } from "@your-org/ui-library";
+
+export default function App() {
+  return (
+    <Card>
+      <Input placeholder="Enter your name" />
+      <Button>Submit</Button>
+    </Card>
+  );
+}
+```
+
+## Available Components
+
+### Layout & Structure
+
+- **Accordion** - Collapsible content sections
+- **AspectRatio** - Maintain aspect ratios for media
+- **Card** - Container component with header, footer, content
+- **Separator** - Visual divider between sections
+- **ScrollArea** - Scrollable area with custom styling
+- **Table** - Data table component
+- **Resizable** - Resizable panel groups
+- **Sidebar** - Navigation sidebar with menu items
+
+### Form & Input
+
+- **Button** - Primary button component with variants
+- **Input** - Text input field
+- **Textarea** - Multi-line text input
+- **Label** - Form label
+- **Checkbox** - Checkbox input
+- **RadioGroup** - Radio button group
+- **Switch** - Toggle switch
+- **Slider** - Range slider
+- **Select** - Dropdown select
+- **InputOTP** - One-time password input
+- **ToggleGroup** - Toggle button group
+- **Toggle** - Single toggle button
+- **Form** - Form container with field validation
+
+### Display
+
+- **Badge** - Small label/tag component
+- **Alert** - Alert message with icon
+- **Avatar** - User avatar with fallback
+- **Breadcrumb** - Navigation breadcrumb
+- **Progress** - Progress bar
+- **Skeleton** - Content loading skeleton
+- **Calendar** - Date picker calendar
+
+### Navigation
+
+- **Tabs** - Tabbed content
+- **Pagination** - Page navigation
+- **NavigationMenu** - Horizontal navigation menu
+- **Menubar** - Application menu bar
+- **DropdownMenu** - Dropdown menu
+
+### Dialog & Overlay
+
+- **Dialog** - Modal dialog
+- **Sheet** - Slide-out sheet/drawer from side
+- **Drawer** - Accessible drawer component
+- **AlertDialog** - Alert dialog with confirmation
+- **Popover** - Floating popover panel
+- **HoverCard** - Card that appears on hover
+- **Tooltip** - Tooltip on hover
+- **ContextMenu** - Right-click context menu
+
+### Interactive
+
+- **Carousel** - Image/content carousel
+- **Collapsible** - Collapsible content
+- **Command** - Command palette/search
+
+### Notifications
+
+- **Toast** - Toast notification system
+- **Toaster** - Toast container
+- **Sonner** - Toast notifications alternative
+
+### Charts
+
+- **Chart** - Data visualization components
+
+## Component Examples
+
+### Button
+
+```tsx
+import { Button } from "@your-org/ui-library";
+
+export default function ButtonExample() {
+  return (
+    <>
+      <Button>Default</Button>
+      <Button variant="outline">Outline</Button>
+      <Button variant="destructive">Destructive</Button>
+      <Button disabled>Disabled</Button>
+    </>
+  );
+}
+```
+
+### Dialog
+
+```tsx
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  Button,
+} from "@your-org/ui-library";
+
+export default function DialogExample() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Open Dialog</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Dialog Title</DialogTitle>
+        </DialogHeader>
+        <p>Dialog content goes here.</p>
+      </DialogContent>
+    </Dialog>
+  );
+}
+```
+
+### Form with Validation
+
+```tsx
+import { useForm } from "react-hook-form";
+import { Button, Input, Label, Form } from "@your-org/ui-library";
+
+export default function FormExample() {
+  const { register, handleSubmit } = useForm();
+
+  return (
+    <form onSubmit={handleSubmit((data) => console.log(data))}>
+      <div className="space-y-4">
+        <div>
+          <Label htmlFor="name">Name</Label>
+          <Input id="name" {...register("name")} />
+        </div>
+        <Button type="submit">Submit</Button>
+      </div>
+    </form>
+  );
+}
+```
+
+## Customization
+
+### Tailwind Configuration
+
+All components use Tailwind CSS classes and can be customized through your `tailwind.config.ts`:
+
+```typescript
+export default {
+  theme: {
+    extend: {
+      colors: {
+        primary: "#YOUR_COLOR",
+        secondary: "#YOUR_COLOR",
+      },
+    },
+  },
+};
+```
+
+### Component Props
+
+Each component accepts standard HTML attributes and additional props for customization:
+
+```tsx
+<Button variant="solid" size="lg" className="custom-class" disabled={false}>
+  Click me
+</Button>
+```
+
+## Storybook
+
+View interactive documentation and examples:
+
+```bash
+npm run storybook
+```
+
+This opens Storybook at `http://localhost:6006` where you can browse all components and their variants.
+
+## TypeScript Support
+
+Full TypeScript support with proper type definitions:
+
+```tsx
+import type { ButtonHTMLAttributes } from "react";
+import { Button, type ButtonProps } from "@your-org/ui-library";
+
+interface MyButtonProps extends ButtonProps {
+  label: string;
+}
+
+export default function MyButton({ label, ...props }: MyButtonProps) {
+  return <Button {...props}>{label}</Button>;
+}
+```
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## Contributing
+
+See [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines.
+
+## License
+
+MIT License - see LICENSE file for details
+
+## Support
+
+- 📖 [Documentation](https://github.com/your-org/ui-library)
+- 🐛 [Issue Tracker](https://github.com/your-org/ui-library/issues)
+- 💬 [Discussions](https://github.com/your-org/ui-library/discussions)
+
+## Related
+
+- [Radix UI](https://www.radix-ui.com/)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [shadcn/ui](https://ui.shadcn.com/)
+
+---
+
+Made with ❤️ by Your Team