@arolariu/components 0.0.9 → 0.0.11

package/package.json

@@ -1,10 +1,16 @@
 {
   "name": "@arolariu/components",
   "displayName": "@arolariu/components",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "A collection of reusable components for React applications.",
   "homepage": "https://arolariu.ro",
-  "repository": "git+https://github.com/arolariu/arolariu.ro.git",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/arolariu/arolariu.ro"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
   "author": {
     "name": "Alexandru-Razvan Olariu",
     "email": "admin@arolariu.ro",
@@ -16,6 +22,7 @@
   "main": "./dist/cjs/index.js",
   "module": "./dist/es/index.js",
   "types": "./dist/types/index.d.ts",
+  "source": "./src/index.ts",
   "files": [
     "dist"
   ],
@@ -24,14 +31,108 @@
     "yarn": ">=4.5"
   },
   "keywords": [
+    "Component Library",
     "ReactJS",
-    "TailwindCSS"
+    "TailwindCSS",
+    "Radix-UI",
+    "ShadCN"
   ],
+  "bugs": {
+    "url": "https://github.com/arolariu/arolariu.ro/issues",
+    "email": "admin@arolariu.ro"
+  },
+  "packageManager": "yarn@4.6.0+sha512.5383cc12567a95f1d668fbe762dfe0075c595b4bfff433be478dbbe24e05251a8e8c3eb992a986667c1d53b6c3a9c85b8398c35a960587fbd9fa3a0915406728",
+  "scripts": {
+    "build": "vite build",
+    "clean": "npx tsx scripts/clean.ts",
+    "dev": "vite",
+    "generate-exports": "npx tsx scripts/generate-exports.ts",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^4.1.2",
+    "@radix-ui/react-accordion": "^1.2.3",
+    "@radix-ui/react-alert-dialog": "^1.1.6",
+    "@radix-ui/react-aspect-ratio": "^1.1.2",
+    "@radix-ui/react-avatar": "^1.1.3",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-collapsible": "^1.1.3",
+    "@radix-ui/react-context-menu": "^2.2.6",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-hover-card": "^1.1.6",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-menubar": "^1.1.6",
+    "@radix-ui/react-navigation-menu": "^1.2.5",
+    "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-progress": "^1.1.2",
+    "@radix-ui/react-radio-group": "^1.2.3",
+    "@radix-ui/react-scroll-area": "^1.2.3",
+    "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-separator": "^1.1.2",
+    "@radix-ui/react-slider": "^1.2.3",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-switch": "^1.1.3",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-toggle": "^1.1.2",
+    "@radix-ui/react-toggle-group": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "2.1.1",
+    "cmdk": "1.0.0",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.5.2",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.477.0",
+    "next-themes": "^0.4.4",
+    "react": "19.0.0",
+    "react-day-picker": "8.10.1",
+    "react-dom": "19.0.0",
+    "react-hook-form": "^7.54.2",
+    "react-resizable-panels": "^2.1.7",
+    "recharts": "^2.15.1",
+    "sonner": "^2.0.1",
+    "tailwind-merge": "3.0.2",
+    "tailwindcss-animate": "1.0.7",
+    "vaul": "^1.1.2",
+    "zod": "^3.24.2"
+  },
+  "peerDependencies": {},
+  "devDependencies": {
+    "@chromatic-com/storybook": "3.2.5",
+    "@storybook/addon-essentials": "8.6.2",
+    "@storybook/addon-onboarding": "8.6.2",
+    "@storybook/blocks": "8.6.2",
+    "@storybook/builder-vite": "8.6.2",
+    "@storybook/experimental-addon-test": "8.6.2",
+    "@storybook/react": "8.6.2",
+    "@storybook/react-vite": "8.6.2",
+    "@storybook/test": "8.6.2",
+    "@tailwindcss/postcss": "4.0.9",
+    "@tailwindcss/vite": "4.0.9",
+    "@types/node": "22.13.8",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
+    "@vitejs/plugin-react": "4.3.4",
+    "@vitest/browser": "3.0.7",
+    "@vitest/coverage-v8": "3.0.7",
+    "daisyui": "5.0.0",
+    "playwright": "1.50.1",
+    "postcss": "8.5.3",
+    "storybook": "8.6.2",
+    "tailwindcss": "4.0.9",
+    "typescript": "5.8.2",
+    "vite": "6.2.0",
+    "vite-plugin-dts": "^4.5.1",
+    "vitest": "3.0.7"
+  },
   "exports": {
     ".": {
       "import": "./dist/es/index.js",
       "require": "./dist/cjs/index.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/types/index.d.ts"
     },
     "./accordion": {
       "import": "./dist/es/components/ui/accordion.js",
@@ -263,97 +364,5 @@
       "require": "./dist/cjs/components/ui/tooltip.js",
       "types": "./dist/types/components/ui/tooltip.d.ts"
     }
-  },
-  "bugs": {
-    "url": "https://github.com/arolariu/arolariu.ro/issues",
-    "email": "admin@arolariu.ro"
-  },
-  "packageManager": "yarn@4.6.0+sha512.5383cc12567a95f1d668fbe762dfe0075c595b4bfff433be478dbbe24e05251a8e8c3eb992a986667c1d53b6c3a9c85b8398c35a960587fbd9fa3a0915406728",
-  "scripts": {
-    "build": "tsc && vite build && npm run build:styles",
-    "build:styles": "postcss ./src/index.css -o ./dist/index.css",
-    "clean": "npx tsx scripts/clean.ts",
-    "dev": "vite",
-    "generate-exports": "npx tsx scripts/generate-exports.ts",
-    "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "dependencies": {
-    "@hookform/resolvers": "^4.1.2",
-    "@radix-ui/react-accordion": "^1.2.3",
-    "@radix-ui/react-alert-dialog": "^1.1.6",
-    "@radix-ui/react-aspect-ratio": "^1.1.2",
-    "@radix-ui/react-avatar": "^1.1.3",
-    "@radix-ui/react-checkbox": "^1.1.4",
-    "@radix-ui/react-collapsible": "^1.1.3",
-    "@radix-ui/react-context-menu": "^2.2.6",
-    "@radix-ui/react-dialog": "^1.1.6",
-    "@radix-ui/react-dropdown-menu": "^2.1.6",
-    "@radix-ui/react-hover-card": "^1.1.6",
-    "@radix-ui/react-label": "^2.1.2",
-    "@radix-ui/react-menubar": "^1.1.6",
-    "@radix-ui/react-navigation-menu": "^1.2.5",
-    "@radix-ui/react-popover": "^1.1.6",
-    "@radix-ui/react-progress": "^1.1.2",
-    "@radix-ui/react-radio-group": "^1.2.3",
-    "@radix-ui/react-scroll-area": "^1.2.3",
-    "@radix-ui/react-select": "^2.1.6",
-    "@radix-ui/react-separator": "^1.1.2",
-    "@radix-ui/react-slider": "^1.2.3",
-    "@radix-ui/react-slot": "^1.1.2",
-    "@radix-ui/react-switch": "^1.1.3",
-    "@radix-ui/react-tabs": "^1.1.3",
-    "@radix-ui/react-toggle": "^1.1.2",
-    "@radix-ui/react-toggle-group": "^1.1.2",
-    "@radix-ui/react-tooltip": "^1.1.8",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "2.1.1",
-    "cmdk": "1.0.0",
-    "date-fns": "^4.1.0",
-    "embla-carousel-react": "^8.5.2",
-    "input-otp": "^1.4.2",
-    "lucide-react": "^0.477.0",
-    "next-themes": "^0.4.4",
-    "react": "19.0.0",
-    "react-day-picker": "8.10.1",
-    "react-dom": "19.0.0",
-    "react-hook-form": "^7.54.2",
-    "react-resizable-panels": "^2.1.7",
-    "recharts": "^2.15.1",
-    "sonner": "^2.0.1",
-    "tailwind-merge": "3.0.2",
-    "tailwindcss-animate": "1.0.7",
-    "vaul": "^1.1.2",
-    "zod": "^3.24.2"
-  },
-  "peerDependencies": {},
-  "devDependencies": {
-    "@chromatic-com/storybook": "3.2.5",
-    "@storybook/addon-essentials": "8.6.2",
-    "@storybook/addon-onboarding": "8.6.2",
-    "@storybook/blocks": "8.6.2",
-    "@storybook/builder-vite": "8.6.2",
-    "@storybook/experimental-addon-test": "8.6.2",
-    "@storybook/react": "8.6.2",
-    "@storybook/react-vite": "8.6.2",
-    "@storybook/test": "8.6.2",
-    "@tailwindcss/postcss": "4.0.9",
-    "@tailwindcss/vite": "4.0.9",
-    "@types/node": "22.13.8",
-    "@types/react": "19.0.10",
-    "@types/react-dom": "19.0.4",
-    "@vitejs/plugin-react": "4.3.4",
-    "@vitest/browser": "3.0.7",
-    "@vitest/coverage-v8": "3.0.7",
-    "daisyui": "5.0.0",
-    "playwright": "1.50.1",
-    "postcss": "8.5.3",
-    "storybook": "8.6.2",
-    "tailwindcss": "4.0.9",
-    "typescript": "5.8.2",
-    "vite": "6.2.0",
-    "vite-plugin-dts": "^4.5.1",
-    "vitest": "3.0.7"
   }
 }

package/readme.md

@@ -0,0 +1,169 @@
+# @arolariu/components
+
+![npm version](https://img.shields.io/npm/v/@arolariu/components)
+![license](https://img.shields.io/npm/l/@arolariu/components)
+![bundle size](https://img.shields.io/bundlephobia/minzip/@arolariu/components)
+![types](https://img.shields.io/npm/types/@arolariu/components)
+
+A collection of reusable, accessible UI components for React applications, built on top of [Radix UI](https://www.radix-ui.com/) primitives and inspired by [shadcn/ui](https://ui.shadcn.com/).
+
+## Features
+
+- **Fully Tree-Shakeable** - Import only the components you need
+- **TypeScript Support** - Full type definitions for all components
+- **Multiple Module Formats** - ESM, CommonJS, and UMD support
+- **Accessibility** - Built on Radix UI primitives for ARIA compliance
+- **Customizable** - Override styles with Tailwind CSS
+- **Modern** - Designed for React 18+ and modern browsers
+- **Zero Runtime CSS** - Uses Tailwind for styling
+- **Server-Side Rendering Compatible** - Works with Next.js and other SSR frameworks
+
+## Installation
+
+```bash
+# npm
+npm install @arolariu/components
+
+# yarn
+yarn add @arolariu/components
+
+# pnpm
+pnpm add @arolariu/components
+```
+
+## Usage
+
+### Basic Import
+
+```tsx
+import { Button } from "@arolariu/components/button";
+import { Card } from "@arolariu/components/card";
+
+export default function MyComponent() {
+  return (
+    <Card>
+      <Card.Header>
+        <Card.Title>Card Title</Card.Title>
+        <Card.Description>Card Description</Card.Description>
+      </Card.Header>
+      <Card.Footer>
+        <Button>Click Me</Button>
+      </Card.Footer>
+    </Card>
+  );
+}
+```
+
+### Tree-Shaking
+
+For optimal bundle size, import components directly:
+
+```tsx
+// ✅ Good: Only imports Button component
+import { Button } from "@arolariu/components/button";
+
+// ❌ Avoid: Imports all components
+import { Button } from "@arolariu/components";
+```
+
+## Available Components
+
+This library includes over 30 components, including:
+
+- **Layout**: Card, AspectRatio, Separator, Resizable
+- **Inputs**: Button, Input, Textarea, Checkbox, RadioGroup, Select
+- **Navigation**: Breadcrumb, Tabs, NavigationMenu, Sidebar
+- **Overlays**: Dialog, Drawer, Sheet, Popover, Tooltip
+- **Feedback**: Alert, Progress, Skeleton
+- **Data Display**: Table, Calendar, Avatar, Badge
+- **Advanced**: Form, Command, Chart, Carousel
+
+## Component Documentation
+
+Each component can be imported individually:
+
+```tsx
+// Buttons
+import { Button, buttonVariants } from "@arolariu/components/button";
+
+// Forms
+import { Form } from "@arolariu/components/form";
+import { Input } from "@arolariu/components/input";
+
+// Data Display
+import { Table } from "@arolariu/components/table";
+import { Avatar } from "@arolariu/components/avatar";
+
+// Overlays
+import { Dialog } from "@arolariu/components/dialog";
+import { Sheet } from "@arolariu/components/sheet";
+```
+
+## TypeScript Support
+
+This library includes comprehensive TypeScript definitions. All components are properly typed with props interfaces:
+
+```tsx
+import { Button } from "@arolariu/components/button";
+import type { ButtonProps } from "@arolariu/components/button";
+
+// TypeScript will provide autocomplete and type checking for props
+const MyButton = (props: ButtonProps) => {
+  return <Button {...props} />;
+};
+```
+
+## Server-Side Rendering
+
+All components are compatible with server-side rendering frameworks like Next.js:
+
+```tsx
+// Next.js App Router example
+export default function Page() {
+  return (
+    <div>
+      <Button>Server Component Button</Button>
+    </div>
+  );
+}
+
+// For client interactions
+("use client");
+import { Dialog } from "@arolariu/components/dialog";
+```
+
+## Browser Support
+
+- Chrome/Edge (last 2 versions)
+- Firefox (last 2 versions)
+- Safari (last 2 versions)
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+1. Fork the repository
+2. Create your feature branch: `git checkout -b my-new-feature`
+3. Commit your changes: `git commit -am 'Add some feature'`
+4. Push to the branch: `git push origin my-new-feature`
+5. Submit a pull request
+
+## License
+
+[MIT](https://choosealicense.com/licenses/mit/)
+
+## Author
+
+**Alexandru-Razvan Olariu**
+
+- Website: [https://arolariu.ro](https://arolariu.ro)
+- GitHub: [@arolariu](https://github.com/arolariu)
+- Email: admin@arolariu.ro
+
+## Acknowledgments
+
+- [Radix UI](https://www.radix-ui.com/) for providing accessible primitives
+- [shadcn/ui](https://ui.shadcn.com/) for inspiration and component patterns
+- [Tailwind CSS](https://tailwindcss.com/) for styling utilities
+
+Similar code found with 2 license types