@ereactthohir/rice-ui 1.1.0

package/README.md

@@ -0,0 +1,292 @@
+# 🍚 Rice UI - The Most Powerful CSS Framework for EreactThohir
+
+Rice UI is the default and most powerful CSS framework for EreactThohir, designed to be **more comprehensive and feature-rich than Tailwind CSS**.
+
+## ✨ Why Rice UI?
+
+### **Advantages over Tailwind CSS:**
+
+1. **🎨 Glassmorphism Built-in** - Advanced visual effects out of the box
+2. **🎭 Custom Animations** - Fade-in, slide-up, pulse, spin, and gradient animations
+3. **🌈 Advanced Gradients** - Rainbow, sunset, and custom gradient utilities
+4. **🎯 CSS Variables** - Easy theme customization with CSS custom properties
+5. **📦 Comprehensive Components** - 14+ pre-built components
+6. **🚀 Zero Configuration** - Works immediately without build step
+7. **💪 TypeScript Support** - Full type safety for all components
+8. **🌙 Dark Mode Ready** - Built-in support for dark themes
+
+## 📦 Components
+
+Rice UI includes 14+ production-ready components:
+
+### Core Components
+- **Button** - Multiple variants (primary, outline, ghost, danger)
+- **Input** - Text inputs with labels and descriptions
+- **Card** - Container component with title and description
+- **Badge** - Status indicators with multiple variants
+- **Modal** - Accessible dialog component
+- **Toast** - Notification system
+- **Table** - Data table with sorting and pagination
+- **Skeleton** - Loading placeholders
+
+### Advanced Components (NEW!)
+- **Dropdown** - Select component with search and icons
+- **Tabs** - Tab navigation with 3 variants (default, pills, underline)
+- **Accordion** - Collapsible content panels
+- **Alert** - Contextual feedback messages
+- **Progress** - Progress bars with animations
+- **Layout** - Page layout utilities
+
+## 🎨 Utility Classes
+
+All Rice UI classes use the `rice-` prefix to avoid conflicts:
+
+### Layout
+```tsx
+rice-flex, rice-grid, rice-block, rice-inline-flex
+rice-flex-col, rice-flex-row, rice-flex-wrap
+rice-items-center, rice-justify-between
+rice-gap-4, rice-gap-6, rice-gap-8
+```
+
+### Spacing
+```tsx
+rice-p-4, rice-p-6, rice-p-8, rice-p-12
+rice-m-4, rice-mx-auto, rice-mb-8
+```
+
+### Typography
+```tsx
+rice-text-xs, rice-text-sm, rice-text-lg, rice-text-xl
+rice-text-3xl, rice-text-5xl, rice-text-7xl
+rice-font-medium, rice-font-bold, rice-font-black
+rice-text-center, rice-text-left
+```
+
+### Colors
+```tsx
+rice-text-primary, rice-text-success, rice-text-danger
+rice-bg-primary, rice-bg-white
+```
+
+### Effects
+```tsx
+rice-glass, rice-glass-dark
+rice-shadow-lg, rice-shadow-xl, rice-shadow-2xl
+rice-rounded-lg, rice-rounded-xl, rice-rounded-full
+```
+
+### Animations
+```tsx
+rice-animate-fade-in
+rice-animate-slide-up
+rice-animate-pulse
+rice-animate-spin
+rice-animate-gradient
+```
+
+### Hover Effects
+```tsx
+rice-hover-scale
+rice-hover-shadow
+rice-hover-lift
+```
+
+## 🚀 Usage Examples
+
+### Basic Example
+```tsx
+import { Button, Card, Input } from '@ereactthohir/rice-ui';
+
+function MyComponent() {
+    return (
+        <div className="rice-p-6 rice-bg-gradient">
+            <Card title="Welcome" description="Get started with Rice UI">
+                <Input label="Email" placeholder="Enter your email" />
+                <Button variant="primary" className="rice-mt-4">
+                    Submit
+                </Button>
+            </Card>
+        </div>
+    );
+}
+```
+
+### Glassmorphism Effect
+```tsx
+<div className="rice-glass rice-p-8 rice-rounded-2xl rice-shadow-xl">
+    <h1 className="rice-text-3xl rice-font-bold">Beautiful Glass Effect</h1>
+</div>
+```
+
+### Dropdown Component
+```tsx
+import { Dropdown } from '@ereactthohir/rice-ui';
+
+const items = [
+    { label: 'Option 1', value: '1', icon: '🎯' },
+    { label: 'Option 2', value: '2', icon: '⚡' },
+    { label: 'Option 3', value: '3', icon: '🚀' }
+];
+
+<Dropdown
+    items={items}
+    label="Select an option"
+    onChange={(value) => console.log(value)}
+/>
+```
+
+### Tabs Component
+```tsx
+import { Tabs } from '@ereactthohir/rice-ui';
+
+const tabs = [
+    { id: 'tab1', label: 'Overview', icon: '📊', content: <div>Overview content</div> },
+    { id: 'tab2', label: 'Settings', icon: '⚙️', content: <div>Settings content</div> }
+];
+
+<Tabs items={tabs} variant="pills" />
+```
+
+### Accordion Component
+```tsx
+import { Accordion } from '@ereactthohir/rice-ui';
+
+const items = [
+    { id: '1', title: 'What is Rice UI?', icon: '❓', content: 'Rice UI is...' },
+    { id: '2', title: 'How to install?', icon: '📦', content: 'Run npm install...' }
+];
+
+<Accordion items={items} allowMultiple />
+```
+
+### Alert Component
+```tsx
+import { Alert } from '@ereactthohir/rice-ui';
+
+<Alert variant="success" title="Success!" dismissible>
+    Your changes have been saved successfully.
+</Alert>
+```
+
+### Progress Component
+```tsx
+import { Progress } from '@ereactthohir/rice-ui';
+
+<Progress 
+    value={75} 
+    label="Upload Progress" 
+    showPercentage 
+    variant="success"
+    animated
+    striped
+/>
+```
+
+## 🎯 CSS Variables
+
+Customize Rice UI by overriding CSS variables:
+
+```css
+:root {
+    --rice-primary-500: #your-color;
+    --rice-space-4: 1.5rem;
+    --rice-radius-lg: 1rem;
+    --rice-shadow-xl: your-shadow;
+}
+```
+
+## 🌙 Dark Mode
+
+Rice UI supports dark mode out of the box:
+
+```tsx
+<div className="rice-glass-dark rice-p-6">
+    <h1 className="rice-text-white">Dark Mode Content</h1>
+</div>
+```
+
+## 📱 Responsive Design
+
+All utilities support responsive breakpoints:
+
+```tsx
+<div className="rice-grid rice-grid-cols-1 rice-md-grid-cols-2 rice-lg-grid-cols-3">
+    {/* Responsive grid */}
+</div>
+```
+
+Breakpoints:
+- `sm`: 640px
+- `md`: 768px
+- `lg`: 1024px
+- `xl`: 1280px
+
+## 🎨 Advanced Features
+
+### Gradient Text
+```tsx
+<h1 className="rice-text-5xl rice-font-black rice-text-transparent rice-bg-clip-text rice-gradient-primary rice-animate-gradient">
+    Animated Gradient Text
+</h1>
+```
+
+### Glassmorphism Cards
+```tsx
+<div className="rice-glass rice-rounded-2xl rice-p-8 rice-shadow-2xl rice-hover-scale rice-transition">
+    <h2>Premium Glass Card</h2>
+</div>
+```
+
+## 🔧 Framework Alternatives
+
+EreactThohir also supports:
+- **Tailwind CSS** (optional)
+- **Bootstrap** (optional)
+
+Choose your preferred framework during project creation with `ereact create`.
+
+## 📚 Full Component List
+
+| Component | Description | Variants |
+|-----------|-------------|----------|
+| Button | Action buttons | primary, outline, ghost, danger |
+| Input | Text input fields | - |
+| Card | Content containers | - |
+| Badge | Status indicators | primary, success, warning, danger, info |
+| Modal | Dialog windows | - |
+| Toast | Notifications | success, error, warning, info |
+| Table | Data tables | - |
+| Skeleton | Loading states | - |
+| Dropdown | Select menus | - |
+| Tabs | Tab navigation | default, pills, underline |
+| Accordion | Collapsible panels | - |
+| Alert | Feedback messages | info, success, warning, danger |
+| Progress | Progress indicators | default, success, warning, danger |
+| Layout | Page layouts | - |
+
+## 🚀 Getting Started
+
+Rice UI is automatically included in all EreactThohir projects. No installation required!
+
+```tsx
+import { Button, Card, Input } from '@ereactthohir/rice-ui';
+
+// Start building!
+```
+
+## 💡 Tips
+
+1. **Use `rice-` prefix** for all utility classes
+2. **Combine utilities** for complex designs
+3. **Leverage CSS variables** for theming
+4. **Use glassmorphism** for premium effects
+5. **Add animations** for better UX
+
+## 📖 Documentation
+
+For full documentation, visit the EreactThohir docs or explore the component source code in `packages/rice-ui/src/components/`.
+
+---
+
+**Rice UI** - More powerful than Tailwind, built for EreactThohir 🚀

package/dist/components/Accordion.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface AccordionItem {
+    id: string;
+    title: string;
+    content: React.ReactNode;
+    icon?: string;
+    disabled?: boolean;
+}
+export interface AccordionProps {
+    items: AccordionItem[];
+    allowMultiple?: boolean;
+    defaultOpen?: string[];
+    className?: string;
+}
+export declare const Accordion: React.FC<AccordionProps>;
+//# sourceMappingURL=Accordion.d.ts.map

package/dist/components/Accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../src/components/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,MAAM,WAAW,aAAa;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,cAAc;IAC3B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA+E9C,CAAC"}

package/dist/components/Accordion.js

@@ -0,0 +1,74 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = void 0;
+const react_1 = __importStar(require("react"));
+const Accordion = ({ items, allowMultiple = false, defaultOpen = [], className = '' }) => {
+    const [openItems, setOpenItems] = (0, react_1.useState)(defaultOpen);
+    const toggleItem = (itemId) => {
+        if (allowMultiple) {
+            setOpenItems(prev => prev.includes(itemId)
+                ? prev.filter(id => id !== itemId)
+                : [...prev, itemId]);
+        }
+        else {
+            setOpenItems(prev => prev.includes(itemId) ? [] : [itemId]);
+        }
+    };
+    return (react_1.default.createElement("div", { className: `rice-w-full rice-space-y-2 ${className}` }, items.map((item) => {
+        const isOpen = openItems.includes(item.id);
+        return (react_1.default.createElement("div", { key: item.id, className: "rice-border rice-rounded-lg rice-overflow-hidden rice-bg-white rice-shadow-sm" },
+            react_1.default.createElement("button", { onClick: () => !item.disabled && toggleItem(item.id), disabled: item.disabled, className: "rice-w-full rice-flex rice-items-center rice-justify-between rice-p-4 rice-text-left rice-font-semibold rice-transition", style: {
+                    cursor: item.disabled ? 'not-allowed' : 'pointer',
+                    opacity: item.disabled ? 0.5 : 1,
+                    backgroundColor: isOpen ? '#f8fafc' : '#ffffff',
+                    color: '#0f172a'
+                } },
+                react_1.default.createElement("div", { className: "rice-flex rice-items-center rice-gap-3" },
+                    item.icon && react_1.default.createElement("span", { className: "rice-text-xl" }, item.icon),
+                    react_1.default.createElement("span", null, item.title)),
+                react_1.default.createElement("svg", { className: "rice-w-5 rice-h-5 rice-transition", style: {
+                        transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                        color: '#64748b'
+                    }, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" },
+                    react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }))),
+            isOpen && (react_1.default.createElement("div", { className: "rice-p-4 rice-border-t rice-animate-slide-up", style: {
+                    backgroundColor: '#ffffff',
+                    color: '#475569'
+                } }, item.content))));
+    })));
+};
+exports.Accordion = Accordion;
+//# sourceMappingURL=Accordion.js.map

package/dist/components/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/components/Accordion.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AAiBjC,MAAM,SAAS,GAA6B,CAAC,EAChD,KAAK,EACL,aAAa,GAAG,KAAK,EACrB,WAAW,GAAG,EAAE,EAChB,SAAS,GAAG,EAAE,EACjB,EAAE,EAAE;IACD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAW,WAAW,CAAC,CAAC;IAElE,MAAM,UAAU,GAAG,CAAC,MAAc,EAAE,EAAE;QAClC,IAAI,aAAa,EAAE,CAAC;YAChB,YAAY,CAAC,IAAI,CAAC,EAAE,CAChB,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;gBACjB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,MAAM,CAAC;gBAClC,CAAC,CAAC,CAAC,GAAG,IAAI,EAAE,MAAM,CAAC,CAC1B,CAAC;QACN,CAAC;aAAM,CAAC;YACJ,YAAY,CAAC,IAAI,CAAC,EAAE,CAChB,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CACxC,CAAC;QACN,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,uCAAK,SAAS,EAAE,8BAA8B,SAAS,EAAE,IACpD,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QAChB,MAAM,MAAM,GAAG,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAE3C,OAAO,CACH,uCACI,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,SAAS,EAAC,+EAA+E;YAGzF,0CACI,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,EACpD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAC,yHAAyH,EACnI,KAAK,EAAE;oBACH,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;oBACjD,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;oBAChC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;oBAC/C,KAAK,EAAE,SAAS;iBACnB;gBAED,uCAAK,SAAS,EAAC,wCAAwC;oBAClD,IAAI,CAAC,IAAI,IAAI,wCAAM,SAAS,EAAC,cAAc,IAAE,IAAI,CAAC,IAAI,CAAQ;oBAC/D,4CAAO,IAAI,CAAC,KAAK,CAAQ,CACvB;gBACN,uCACI,SAAS,EAAC,mCAAmC,EAC7C,KAAK,EAAE;wBACH,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,cAAc;wBACrD,KAAK,EAAE,SAAS;qBACnB,EACD,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,EACnB,MAAM,EAAC,cAAc;oBAErB,wCAAM,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW,EAAE,CAAC,EAAE,CAAC,EAAC,gBAAgB,GAAG,CACtF,CACD;YAGR,MAAM,IAAI,CACP,uCACI,SAAS,EAAC,8CAA8C,EACxD,KAAK,EAAE;oBACH,eAAe,EAAE,SAAS;oBAC1B,KAAK,EAAE,SAAS;iBACnB,IAEA,IAAI,CAAC,OAAO,CACX,CACT,CACC,CACT,CAAC;IACN,CAAC,CAAC,CACA,CACT,CAAC;AACN,CAAC,CAAC;AA/EW,QAAA,SAAS,aA+EpB"}

package/dist/components/Alert.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface AlertProps {
+    children: React.ReactNode;
+    variant?: 'info' | 'success' | 'warning' | 'danger';
+    title?: string;
+    icon?: string;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    className?: string;
+}
+export declare const Alert: React.FC<AlertProps>;
+//# sourceMappingURL=Alert.d.ts.map

package/dist/components/Alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../src/components/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,MAAM,WAAW,UAAU;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAiGtC,CAAC"}

package/dist/components/Alert.js

@@ -0,0 +1,96 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Alert = void 0;
+const react_1 = __importStar(require("react"));
+const Alert = ({ children, variant = 'info', title, icon, dismissible = false, onDismiss, className = '' }) => {
+    const [isVisible, setIsVisible] = (0, react_1.useState)(true);
+    const handleDismiss = () => {
+        setIsVisible(false);
+        onDismiss?.();
+    };
+    if (!isVisible)
+        return null;
+    const variantStyles = {
+        info: {
+            background: '#eff6ff',
+            border: '#93c5fd',
+            color: '#1e40af',
+            iconColor: '#3b82f6'
+        },
+        success: {
+            background: '#d1fae5',
+            border: '#6ee7b7',
+            color: '#065f46',
+            iconColor: '#10b981'
+        },
+        warning: {
+            background: '#fef3c7',
+            border: '#fcd34d',
+            color: '#92400e',
+            iconColor: '#f59e0b'
+        },
+        danger: {
+            background: '#fee2e2',
+            border: '#fca5a5',
+            color: '#991b1b',
+            iconColor: '#ef4444'
+        }
+    };
+    const styles = variantStyles[variant];
+    const defaultIcons = {
+        info: 'ℹ️',
+        success: '✅',
+        warning: '⚠️',
+        danger: '❌'
+    };
+    return (react_1.default.createElement("div", { className: `rice-flex rice-items-start rice-gap-3 rice-p-4 rice-rounded-lg rice-border rice-animate-slide-up ${className}`, style: {
+            backgroundColor: styles.background,
+            borderColor: styles.border,
+            color: styles.color
+        } },
+        react_1.default.createElement("div", { className: "rice-flex-shrink-0 rice-text-xl", style: { color: styles.iconColor } }, icon || defaultIcons[variant]),
+        react_1.default.createElement("div", { className: "rice-flex-1" },
+            title && (react_1.default.createElement("h4", { className: "rice-font-bold rice-mb-1", style: { color: styles.color } }, title)),
+            react_1.default.createElement("div", { className: "rice-text-sm", style: { color: styles.color } }, children)),
+        dismissible && (react_1.default.createElement("button", { onClick: handleDismiss, className: "rice-flex-shrink-0 rice-p-1 rice-rounded rice-transition rice-hover-scale-105", style: {
+                color: styles.color,
+                cursor: 'pointer'
+            } },
+            react_1.default.createElement("svg", { className: "rice-w-4 rice-h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" },
+                react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }))))));
+};
+exports.Alert = Alert;
+//# sourceMappingURL=Alert.js.map

package/dist/components/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/components/Alert.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AAYjC,MAAM,KAAK,GAAyB,CAAC,EACxC,QAAQ,EACR,OAAO,GAAG,MAAM,EAChB,KAAK,EACL,IAAI,EACJ,WAAW,GAAG,KAAK,EACnB,SAAS,EACT,SAAS,GAAG,EAAE,EACjB,EAAE,EAAE;IACD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC;IAEjD,MAAM,aAAa,GAAG,GAAG,EAAE;QACvB,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,SAAS,EAAE,EAAE,CAAC;IAClB,CAAC,CAAC;IAEF,IAAI,CAAC,SAAS;QAAE,OAAO,IAAI,CAAC;IAE5B,MAAM,aAAa,GAAG;QAClB,IAAI,EAAE;YACF,UAAU,EAAE,SAAS;YACrB,MAAM,EAAE,SAAS;YACjB,KAAK,EAAE,SAAS;YAChB,SAAS,EAAE,SAAS;SACvB;QACD,OAAO,EAAE;YACL,UAAU,EAAE,SAAS;YACrB,MAAM,EAAE,SAAS;YACjB,KAAK,EAAE,SAAS;YAChB,SAAS,EAAE,SAAS;SACvB;QACD,OAAO,EAAE;YACL,UAAU,EAAE,SAAS;YACrB,MAAM,EAAE,SAAS;YACjB,KAAK,EAAE,SAAS;YAChB,SAAS,EAAE,SAAS;SACvB;QACD,MAAM,EAAE;YACJ,UAAU,EAAE,SAAS;YACrB,MAAM,EAAE,SAAS;YACjB,KAAK,EAAE,SAAS;YAChB,SAAS,EAAE,SAAS;SACvB;KACJ,CAAC;IAEF,MAAM,MAAM,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAEtC,MAAM,YAAY,GAAG;QACjB,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,GAAG;QACZ,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,GAAG;KACd,CAAC;IAEF,OAAO,CACH,uCACI,SAAS,EAAE,oGAAoG,SAAS,EAAE,EAC1H,KAAK,EAAE;YACH,eAAe,EAAE,MAAM,CAAC,UAAU;YAClC,WAAW,EAAE,MAAM,CAAC,MAAM;YAC1B,KAAK,EAAE,MAAM,CAAC,KAAK;SACtB;QAGD,uCAAK,SAAS,EAAC,iCAAiC,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,SAAS,EAAE,IAC9E,IAAI,IAAI,YAAY,CAAC,OAAO,CAAC,CAC5B;QAGN,uCAAK,SAAS,EAAC,aAAa;YACvB,KAAK,IAAI,CACN,sCAAI,SAAS,EAAC,0BAA0B,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,IAClE,KAAK,CACL,CACR;YACD,uCAAK,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,IACvD,QAAQ,CACP,CACJ;QAGL,WAAW,IAAI,CACZ,0CACI,OAAO,EAAE,aAAa,EACtB,SAAS,EAAC,+EAA+E,EACzF,KAAK,EAAE;gBACH,KAAK,EAAE,MAAM,CAAC,KAAK;gBACnB,MAAM,EAAE,SAAS;aACpB;YAED,uCAAK,SAAS,EAAC,mBAAmB,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,MAAM,EAAC,cAAc;gBACpF,wCAAM,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW,EAAE,CAAC,EAAE,CAAC,EAAC,sBAAsB,GAAG,CAC5F,CACD,CACZ,CACC,CACT,CAAC;AACN,CAAC,CAAC;AAjGW,QAAA,KAAK,SAiGhB"}

package/dist/components/Badge.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface BadgeProps {
+    children: React.ReactNode;
+    variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+    size?: 'sm' | 'md';
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Badge: React.FC<BadgeProps>;
+//# sourceMappingURL=Badge.d.ts.map

package/dist/components/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,UAAU;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;IAC9E,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC/B;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAyCtC,CAAC"}

package/dist/components/Badge.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Badge = void 0;
+const react_1 = __importDefault(require("react"));
+const Badge = ({ children, variant = 'primary', size = 'md', className = '', style }) => {
+    const variants = {
+        primary: 'rice-bg-primary rice-text-primary',
+        secondary: 'rice-bg-secondary rice-text-secondary',
+        success: 'rice-text-success',
+        danger: 'rice-text-danger',
+        warning: 'rice-text-warning',
+        info: 'rice-text-info'
+    };
+    const sizes = {
+        sm: 'rice-px-2 rice-py-1 rice-text-xs',
+        md: 'rice-px-3 rice-py-1 rice-text-sm'
+    };
+    const baseStyles = {
+        display: 'inline-flex',
+        alignItems: 'center',
+        fontWeight: 700,
+        textTransform: 'uppercase',
+        letterSpacing: '0.05em',
+        border: '1px solid',
+        borderRadius: '9999px',
+        transition: 'all 300ms',
+        ...style
+    };
+    return (react_1.default.createElement("span", { className: `${variants[variant]} ${sizes[size]} ${className}`, style: baseStyles }, children));
+};
+exports.Badge = Badge;
+//# sourceMappingURL=Badge.js.map

package/dist/components/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAUnB,MAAM,KAAK,GAAyB,CAAC,EACxC,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,SAAS,GAAG,EAAE,EACd,KAAK,EACR,EAAE,EAAE;IACD,MAAM,QAAQ,GAAG;QACb,OAAO,EAAE,mCAAmC;QAC5C,SAAS,EAAE,uCAAuC;QAClD,OAAO,EAAE,mBAAmB;QAC5B,MAAM,EAAE,kBAAkB;QAC1B,OAAO,EAAE,mBAAmB;QAC5B,IAAI,EAAE,gBAAgB;KACzB,CAAC;IAEF,MAAM,KAAK,GAAG;QACV,EAAE,EAAE,kCAAkC;QACtC,EAAE,EAAE,kCAAkC;KACzC,CAAC;IAEF,MAAM,UAAU,GAAwB;QACpC,OAAO,EAAE,aAAa;QACtB,UAAU,EAAE,QAAQ;QACpB,UAAU,EAAE,GAAG;QACf,aAAa,EAAE,WAAW;QAC1B,aAAa,EAAE,QAAQ;QACvB,MAAM,EAAE,WAAW;QACnB,YAAY,EAAE,QAAQ;QACtB,UAAU,EAAE,WAAW;QACvB,GAAG,KAAK;KACX,CAAC;IAEF,OAAO,CACH,wCACI,SAAS,EAAE,GAAG,QAAQ,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,SAAS,EAAE,EAC7D,KAAK,EAAE,UAAU,IAEhB,QAAQ,CACN,CACV,CAAC;AACN,CAAC,CAAC;AAzCW,QAAA,KAAK,SAyChB"}

package/dist/components/Button.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'outline' | 'danger';
+    size?: 'sm' | 'md' | 'lg';
+    label?: string;
+    loading?: boolean;
+}
+export declare const Button: React.FC<ButtonProps>;
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC9E,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;IACzD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA2CxC,CAAC"}

package/dist/components/Button.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const react_1 = __importDefault(require("react"));
+const Button = ({ variant = 'primary', size = 'md', label, children, className = '', loading = false, ...props }) => {
+    const baseStyles = 'inline-flex items-center justify-center font-semibold transition-all duration-300 ease-out focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed rounded-xl active:scale-95 transform';
+    const variants = {
+        primary: 'bg-indigo-600 text-white hover:bg-indigo-700 hover:shadow-[0_0_20px_rgba(79,70,229,0.4)] focus:ring-indigo-500',
+        secondary: 'bg-white text-slate-900 border border-slate-200 hover:bg-slate-50 hover:shadow-lg focus:ring-slate-300',
+        outline: 'bg-transparent text-indigo-600 border-2 border-indigo-600 hover:bg-indigo-50 hover:shadow-md focus:ring-indigo-500',
+        danger: 'bg-rose-600 text-white hover:bg-rose-700 hover:shadow-[0_0_20px_rgba(225,29,72,0.4)] focus:ring-rose-500'
+    };
+    const sizes = {
+        sm: 'px-4 py-2 text-xs',
+        md: 'px-6 py-3 text-sm',
+        lg: 'px-8 py-4 text-base'
+    };
+    const combinedClasses = `${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`;
+    return (react_1.default.createElement("button", { className: combinedClasses, disabled: loading, ...props }, loading ? (react_1.default.createElement("div", { className: "flex items-center gap-2" },
+        react_1.default.createElement("svg", { className: "animate-spin h-4 w-4 text-current", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" },
+            react_1.default.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+            react_1.default.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })),
+        react_1.default.createElement("span", null, "Loading..."))) : (react_1.default.createElement("span", { className: "flex items-center gap-2" }, label || children))));
+};
+exports.Button = Button;
+//# sourceMappingURL=Button.js.map

package/dist/components/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AASnB,MAAM,MAAM,GAA0B,CAAC,EAC1C,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,KAAK,EACL,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,OAAO,GAAG,KAAK,EACf,GAAG,KAAK,EACX,EAAE,EAAE;IACD,MAAM,UAAU,GAAG,qOAAqO,CAAC;IAEzP,MAAM,QAAQ,GAAG;QACb,OAAO,EAAE,gHAAgH;QACzH,SAAS,EAAE,wGAAwG;QACnH,OAAO,EAAE,oHAAoH;QAC7H,MAAM,EAAE,0GAA0G;KACrH,CAAC;IAEF,MAAM,KAAK,GAAG;QACV,EAAE,EAAE,mBAAmB;QACvB,EAAE,EAAE,mBAAmB;QACvB,EAAE,EAAE,qBAAqB;KAC5B,CAAC;IAEF,MAAM,eAAe,GAAG,GAAG,UAAU,IAAI,QAAQ,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,SAAS,EAAE,CAAC;IAEzF,OAAO,CACH,0CAAQ,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,OAAO,KAAM,KAAK,IAC3D,OAAO,CAAC,CAAC,CAAC,CACP,uCAAK,SAAS,EAAC,yBAAyB;QACpC,uCAAK,SAAS,EAAC,mCAAmC,EAAC,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW;YACjH,0CAAQ,SAAS,EAAC,YAAY,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,GAAU;YACrG,wCAAM,SAAS,EAAC,YAAY,EAAC,IAAI,EAAC,cAAc,EAAC,CAAC,EAAC,iHAAiH,GAAQ,CAC1K;QACN,yDAAuB,CACrB,CACT,CAAC,CAAC,CAAC,CACA,wCAAM,SAAS,EAAC,yBAAyB,IACpC,KAAK,IAAI,QAAQ,CACf,CACV,CACI,CACZ,CAAC;AACN,CAAC,CAAC;AA3CW,QAAA,MAAM,UA2CjB"}

package/dist/components/Card.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface CardProps {
+    title?: string;
+    description?: string;
+    children?: React.ReactNode;
+    footer?: React.ReactNode;
+    className?: string;
+}
+export declare const Card: React.FC<CardProps>;
+//# sourceMappingURL=Card.d.ts.map

package/dist/components/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,SAAS;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAyBpC,CAAC"}

package/dist/components/Card.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = void 0;
+const react_1 = __importDefault(require("react"));
+const Card = ({ title, description, children, footer, className = '' }) => {
+    return (react_1.default.createElement("div", { className: `bg-white/80 backdrop-blur-sm border border-slate-200 rounded-2xl overflow-hidden shadow-sm hover:shadow-2xl hover:-translate-y-1 transition-all duration-300 ease-out group ${className}` },
+        (title || description) && (react_1.default.createElement("div", { className: "px-8 py-6 border-b border-slate-100 bg-gradient-to-r from-slate-50/50 to-transparent" },
+            title && react_1.default.createElement("h3", { className: "text-xl font-bold text-slate-900 group-hover:text-indigo-600 transition-colors duration-300" }, title),
+            description && react_1.default.createElement("p", { className: "text-sm text-slate-500 mt-1" }, description))),
+        react_1.default.createElement("div", { className: "px-8 py-6" }, children),
+        footer && (react_1.default.createElement("div", { className: "px-8 py-4 bg-slate-50/80 border-t border-slate-100 backdrop-blur-sm" }, footer))));
+};
+exports.Card = Card;
+//# sourceMappingURL=Card.js.map

package/dist/components/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAUnB,MAAM,IAAI,GAAwB,CAAC,EACtC,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,SAAS,GAAG,EAAE,EACjB,EAAE,EAAE;IACD,OAAO,CACH,uCAAK,SAAS,EAAE,+KAA+K,SAAS,EAAE;QACrM,CAAC,KAAK,IAAI,WAAW,CAAC,IAAI,CACvB,uCAAK,SAAS,EAAC,sFAAsF;YAChG,KAAK,IAAI,sCAAI,SAAS,EAAC,6FAA6F,IAAE,KAAK,CAAM;YACjI,WAAW,IAAI,qCAAG,SAAS,EAAC,6BAA6B,IAAE,WAAW,CAAK,CAC1E,CACT;QACD,uCAAK,SAAS,EAAC,WAAW,IACrB,QAAQ,CACP;QACL,MAAM,IAAI,CACP,uCAAK,SAAS,EAAC,qEAAqE,IAC/E,MAAM,CACL,CACT,CACC,CACT,CAAC;AACN,CAAC,CAAC;AAzBW,QAAA,IAAI,QAyBf"}