@raydenui/ui 0.1.0 → 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Rayden UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,239 @@
+# Rayden UI
+
+A modern, accessible React component library built with Tailwind CSS v4. Rayden UI brings the [Rayna UI](https://www.figma.com/community/file/1229854793310881425) Figma design system to life with pixel-perfect React components.
+
+[![npm version](https://img.shields.io/npm/v/@raydenui/ui.svg)](https://www.npmjs.com/package/@raydenui/ui)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## Features
+
+- **15+ Production-Ready Components** — Buttons, Inputs, Tabs, Alerts, and more
+- **Tailwind CSS v4** — Modern styling with custom design tokens
+- **Fully Typed** — Complete TypeScript support with exported types
+- **Accessible** — Built with ARIA attributes and keyboard navigation
+- **Tree-Shakeable** — Import only what you need
+- **Dual Format** — ESM and CommonJS builds included
+
+## Installation
+
+```bash
+# npm
+npm install @raydenui/ui
+
+# pnpm
+pnpm add @raydenui/ui
+
+# yarn
+yarn add @raydenui/ui
+```
+
+### Peer Dependencies
+
+Rayden UI requires React 18 or higher:
+
+```bash
+npm install react react-dom
+```
+
+## Quick Start
+
+### 1. Import the Styles
+
+Add the Rayden UI stylesheet to your app's entry point:
+
+```tsx
+// App.tsx or main.tsx
+import "@raydenui/ui/styles.css";
+```
+
+Or in CSS:
+
+```css
+/* globals.css */
+@import "@raydenui/ui/styles.css";
+```
+
+### 2. Use Components
+
+```tsx
+import { Button, Input, Badge } from "@raydenui/ui";
+
+function App() {
+  return (
+    <div className="flex flex-col gap-4 p-8">
+      <Input
+        label="Email"
+        placeholder="you@example.com"
+        helperText="We'll never share your email"
+      />
+      <Button variant="primary" size="lg">
+        Subscribe
+      </Button>
+      <Badge color="success">Active</Badge>
+    </div>
+  );
+}
+```
+
+## Components
+
+### Forms & Inputs
+
+| Component | Description |
+|-----------|-------------|
+| [Button](./docs/components/Button.md) | Primary action buttons with variants and icon support |
+| [ButtonGroup](./docs/components/ButtonGroup.md) | Horizontal grouping of related buttons |
+| [Input](./docs/components/Input.md) | Text input with label, helper text, and validation states |
+| [Checkbox](./docs/components/FormControl.md#checkbox) | Checkbox input with label and description |
+| [Radio](./docs/components/FormControl.md#radio) | Radio button input with label and description |
+| [Toggle](./docs/components/FormControl.md#toggle) | Switch/toggle input for boolean values |
+| [Chip](./docs/components/Chip.md) | Compact input tags with close/filter actions |
+
+### Navigation
+
+| Component | Description |
+|-----------|-------------|
+| [Tabs](./docs/components/Tabs.md) | Tabbed navigation with line and pill variants |
+| [Breadcrumb](./docs/components/Breadcrumb.md) | Hierarchical page navigation |
+| [Pagination](./docs/components/Pagination.md) | Page navigation with prev/next controls |
+
+### Feedback
+
+| Component | Description |
+|-----------|-------------|
+| [Alert](./docs/components/Alert.md) | Toast and banner notifications with actions |
+| [Badge](./docs/components/Badge.md) | Status indicators and labels |
+| [ProgressBar](./docs/components/ProgressBar.md) | Linear progress indicator |
+| [ProgressCircle](./docs/components/ProgressCircle.md) | Circular progress indicator |
+| [Tooltip](./docs/components/Tooltip.md) | Contextual information popover |
+
+### Layout
+
+| Component | Description |
+|-----------|-------------|
+| [Divider](./docs/components/Divider.md) | Content separator with optional label/button |
+
+## Design Tokens
+
+Rayden UI includes a complete design token system extracted from the Rayna UI Figma design system.
+
+### Using Tokens with Tailwind
+
+All tokens are available as Tailwind CSS v4 theme variables:
+
+```tsx
+// Use token colors directly in Tailwind classes
+<div className="bg-primary-400 text-grey-900">
+  Primary background with grey text
+</div>
+
+// Custom shadows
+<div className="shadow-soft-lg">
+  Soft shadow effect
+</div>
+```
+
+### Importing Tokens Programmatically
+
+```tsx
+import { colors, shadows, spacing, typography } from "@raydenui/ui/preset";
+
+// Access tokens in JavaScript
+console.log(colors.primary[400]); // "#F56630"
+console.log(shadows.soft.lg);     // "0px 4px 6px..."
+```
+
+### Color Palette
+
+| Scale | Primary | Secondary | Grey | Success | Error | Warning |
+|-------|---------|-----------|------|---------|-------|---------|
+| 50 | ![#FFECE5](https://via.placeholder.com/12/FFECE5/FFECE5.png) `#FFECE5` | ![#E3EFFC](https://via.placeholder.com/12/E3EFFC/E3EFFC.png) `#E3EFFC` | ![#F9FAFB](https://via.placeholder.com/12/F9FAFB/F9FAFB.png) `#F9FAFB` | ![#E7F6EC](https://via.placeholder.com/12/E7F6EC/E7F6EC.png) `#E7F6EC` | ![#FBEAE9](https://via.placeholder.com/12/FBEAE9/FBEAE9.png) `#FBEAE9` | ![#FEF6E7](https://via.placeholder.com/12/FEF6E7/FEF6E7.png) `#FEF6E7` |
+| 400 | ![#F56630](https://via.placeholder.com/12/F56630/F56630.png) `#F56630` | ![#1671D9](https://via.placeholder.com/12/1671D9/1671D9.png) `#1671D9` | ![#98A2B3](https://via.placeholder.com/12/98A2B3/98A2B3.png) `#98A2B3` | ![#0F973D](https://via.placeholder.com/12/0F973D/0F973D.png) `#0F973D` | ![#D42620](https://via.placeholder.com/12/D42620/D42620.png) `#D42620` | ![#F3A218](https://via.placeholder.com/12/F3A218/F3A218.png) `#F3A218` |
+| 700 | ![#AD3307](https://via.placeholder.com/12/AD3307/AD3307.png) `#AD3307` | ![#04326B](https://via.placeholder.com/12/04326B/04326B.png) `#04326B` | ![#344054](https://via.placeholder.com/12/344054/344054.png) `#344054` | ![#036B26](https://via.placeholder.com/12/036B26/036B26.png) `#036B26` | ![#9E0A05](https://via.placeholder.com/12/9E0A05/9E0A05.png) `#9E0A05` | ![#865503](https://via.placeholder.com/12/865503/865503.png) `#865503` |
+
+See [Design Tokens Documentation](./docs/design-tokens.md) for the complete reference.
+
+## Development
+
+### Prerequisites
+
+- Node.js 18+
+- pnpm 8+
+
+### Setup
+
+```bash
+# Clone the repository
+git clone https://github.com/your-org/rayden.git
+cd rayden
+
+# Install dependencies
+pnpm install
+
+# Start Storybook
+pnpm storybook
+```
+
+### Commands
+
+```bash
+pnpm build            # Build the library
+pnpm dev              # Watch mode for development
+pnpm typecheck        # Run TypeScript type checking
+pnpm storybook        # Start Storybook on port 6006
+pnpm build-storybook  # Build static Storybook
+```
+
+### Testing
+
+Tests run via Storybook's Vitest addon with Playwright browser testing:
+
+```bash
+pnpm exec vitest              # Run all tests
+pnpm exec vitest Button       # Run tests matching "Button"
+pnpm exec vitest --watch      # Watch mode
+```
+
+### Project Structure
+
+```
+src/
+├── components/           # React components
+│   ├── Button/
+│   │   ├── Button.tsx
+│   │   ├── Button.stories.tsx
+│   │   └── index.ts
+│   └── ...
+├── styles/
+│   └── globals.css       # Tailwind v4 theme tokens
+├── utils/
+│   └── cn.ts             # Class merging utility
+├── index.ts              # Component exports
+└── preset.ts             # Design token exports
+```
+
+## Contributing
+
+We welcome contributions! Please see our [Contributing Guide](./CONTRIBUTING.md) for details.
+
+### Development Workflow
+
+1. Fork and clone the repository
+2. Create a feature branch: `git checkout -b feature/my-feature`
+3. Make your changes and add tests
+4. Run `pnpm typecheck` and `pnpm exec vitest`
+5. Commit your changes following [Conventional Commits](https://www.conventionalcommits.org/)
+6. Submit a pull request
+
+## License
+
+MIT License - see [LICENSE](./LICENSE) for details.
+
+## Acknowledgments
+
+- Design system based on [Rayna UI](https://www.figma.com/community/file/1229854793310881425) by Rayna UI Team
+- Built with [React](https://react.dev/), [Tailwind CSS](https://tailwindcss.com/), and [Storybook](https://storybook.js.org/)
+
+---
+
+Made with care for the React community.