@arolariu/components 0.0.29 → 0.0.31

package/readme.md

@@ -1,24 +1,43 @@
-# @arolariu/components
+# ✨ @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)
+![downloads](https://img.shields.io/npm/dm/@arolariu/components)
+![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)
 
 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
+## 📚 Table of Contents
 
-- **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
+- Features
+- Installation
+- Usage
+- Available Components
+- Component Documentation
+- TypeScript Support
+- Server-Side Rendering
+- Browser Support
+- Contributing
+- License
+- Author
+- Acknowledgments
 
-## Installation
+## 🚀 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 with their ARIA compliance standard
+- **🎨 Customizable** - Override styles with Tailwind CSS and/or your styling methods
+- **🔄 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
+
+Choose your preferred package manager:
 
 ```bash
 # npm
@@ -31,24 +50,26 @@ yarn add @arolariu/components
 pnpm add @arolariu/components
 ```
 
-## Usage
+## 🧩 Usage
 
 ### Basic Import
 
 ```tsx
 import { Button } from "@arolariu/components/button";
-import { Card } from "@arolariu/components/card";
+import { Card, CardHeader, CardTitle
+  CardDescription, CardFooter
+ } 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>
+      <CardHeader>
+        <CardTitle>Card Title</CardTitle>
+        <CardDescription>Card Description</CardDescription>
+      </CardHeader>
+      <CardFooter>
         <Button>Click Me</Button>
-      </Card.Footer>
+      </CardFooter>
     </Card>
   );
 }
@@ -59,26 +80,28 @@ export default function MyComponent() {
 For optimal bundle size, import components directly:
 
 ```tsx
-// ✅ Good: Only imports Button component
+// ✅ Good: Only imports the Button component
 import { Button } from "@arolariu/components/button";
 
-// ❌ Avoid: Imports all components
+// ❌ Avoid: Imports all the components
 import { Button } from "@arolariu/components";
 ```
 
-## Available Components
+## 🧰 Available Components
 
-This library includes over 30 components, including:
+This library includes over 30 components, organized by category:
 
-- **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
+| Category         | Components                                                        |
+| ---------------- | ----------------------------------------------------------------- |
+| **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
+## 📖 Component Documentation
 
 Each component can be imported individually:
 
@@ -99,27 +122,33 @@ import { Dialog } from "@arolariu/components/dialog";
 import { Sheet } from "@arolariu/components/sheet";
 ```
 
-## TypeScript Support
+The NPM package delivers declaration maps for each component, providing detailed documentation and prop types.
+
+The declaration maps, coupled with source code that's available under the `src` directory makes troubleshooting and debugging components extremely easy.
 
-This library includes comprehensive TypeScript definitions. All components are properly typed with props interfaces:
+## 🔍 TypeScript Support
+
+This library includes comprehensive TypeScript definitions. All components are properly typed and have declaration maps for tight integration.
 
 ```tsx
 import { Button } from "@arolariu/components/button";
-import type { ButtonProps } from "@arolariu/components/button";
+import type { buttonVariants } from "@arolariu/components/button";
 
 // TypeScript will provide autocomplete and type checking for props
-const MyButton = (props: ButtonProps) => {
-  return <Button {...props} />;
+const MyButton = () => {
+  return <Button variant={buttonVariants.primary}>Click Me</Button>;
 };
 ```
 
-## Server-Side Rendering
+## 🖥️ Server-Side Rendering
 
-All components are compatible with server-side rendering frameworks like Next.js:
+All components are compatible with server-side rendering frameworks like Next.js, by default:
 
 ```tsx
 // Next.js App Router example
-export default function Page() {
+import { Button } from "@arolariu/components/button";
+
+export default async function SSR_Page() {
   return (
     <div>
       <Button>Server Component Button</Button>
@@ -128,42 +157,54 @@ export default function Page() {
 }
 
 // For client interactions
-("use client");
-import { Dialog } from "@arolariu/components/dialog";
+import { Button } from "@arolariu/components/button";
+
+export default function CSR_Page() {
+  return (
+    <div>
+      <Button>Client Component Button</Button>
+    </div>
+  );
+}
 ```
 
-## Browser Support
+## 🌐 Browser Support
 
-- Chrome/Edge (last 2 versions)
-- Firefox (last 2 versions)
-- Safari (last 2 versions)
+- 🌟 Chrome/Edge (All versions starting 2018)
+- 🦊 Firefox (All versions starting 2018)
+- 🧭 Safari (All versions starting 2018)
 
-## Contributing
+## 👥 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
+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
+## 📄 License
 
 [MIT](https://choosealicense.com/licenses/mit/)
 
-## Author
+## 👨‍💻 Author
 
 **Alexandru-Razvan Olariu**
 
-- Website: [https://arolariu.ro](https://arolariu.ro)
-- GitHub: [@arolariu](https://github.com/arolariu)
-- Email: admin@arolariu.ro
+- 🌐 Website: [https://arolariu.ro](https://arolariu.ro)
+- 💻 GitHub: [@arolariu](https://github.com/arolariu)
+- 👥 LinkedIn: [Alexandru-Razvan Olariu](https://www.linkedin.com/in/olariu-alexandru/)
 
-## Acknowledgments
+## 🙏 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
+- [Rollup](https://rollupjs.org/) for bundling
+- [Vite](https://vitejs.dev/) for the development environment
+- [TypeScript](https://www.typescriptlang.org/) for static typing
+
+---
 
-Similar code found with 2 license types
+⭐ **If you find this library helpful, please consider giving it a star on GitHub!** ⭐

package/src/components/ui/accordion.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
+import { cn } from "./../../lib/utils";
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-neutral-950 focus-visible:ring-neutral-950/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180 dark:focus-visible:border-neutral-300 dark:focus-visible:ring-neutral-300/50",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-neutral-500 pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 dark:text-neutral-400" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+import { cn } from "./../../lib/utils";
+import { buttonVariants } from "./button";
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  );
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  );
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-white data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-neutral-200 p-6 shadow-lg duration-200 sm:max-w-lg dark:bg-neutral-950 dark:border-neutral-800",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "text-neutral-500 text-sm dark:text-neutral-400",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/src/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "./../../lib/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border border-neutral-200 px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current dark:border-neutral-800",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-white text-neutral-950 dark:bg-neutral-950 dark:text-neutral-50",
+        destructive:
+          "text-neutral-50 [&>svg]:text-current *:data-[slot=alert-description]:text-neutral-50/80 dark:text-neutral-50 dark:*:data-[slot=alert-description]:text-neutral-50/80",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-neutral-500 col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed dark:text-neutral-400",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription };

package/src/components/ui/aspect-ratio.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import * as React from "react";
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+function AspectRatio({
+  ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
+}
+
+export { AspectRatio };

package/src/components/ui/avatar.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "./../../lib/utils";
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-neutral-100 flex size-full items-center justify-center rounded-full dark:bg-neutral-800",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarImage, AvatarFallback };

package/src/components/ui/badge.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "./../../lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border border-neutral-200 px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-neutral-950 focus-visible:ring-neutral-950/50 focus-visible:ring-[3px] aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/40 aria-invalid:border-red-500 transition-[color,box-shadow] overflow-hidden dark:border-neutral-800 dark:focus-visible:border-neutral-300 dark:focus-visible:ring-neutral-300/50 dark:aria-invalid:ring-red-900/20 dark:dark:aria-invalid:ring-red-900/40 dark:aria-invalid:border-red-900",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-neutral-900 text-neutral-50 [a&]:hover:bg-neutral-900/90 dark:bg-neutral-50 dark:text-neutral-900 dark:[a&]:hover:bg-neutral-50/90",
+        secondary:
+          "border-transparent bg-neutral-100 text-neutral-900 [a&]:hover:bg-neutral-100/90 dark:bg-neutral-800 dark:text-neutral-50 dark:[a&]:hover:bg-neutral-800/90",
+        destructive:
+          "border-transparent bg-red-500 text-white [a&]:hover:bg-red-500/90 focus-visible:ring-red-500/20 dark:focus-visible:ring-red-500/40 dark:bg-red-900 dark:[a&]:hover:bg-red-900/90 dark:focus-visible:ring-red-900/20 dark:dark:focus-visible:ring-red-900/40",
+        outline:
+          "text-neutral-950 [a&]:hover:bg-neutral-100 [a&]:hover:text-neutral-900 dark:text-neutral-50 dark:[a&]:hover:bg-neutral-800 dark:[a&]:hover:text-neutral-50",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span";
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };