@arolariu/components 0.0.37 → 0.0.39

package/src/lib/utils.ts

@@ -1,10 +1,10 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-/**
- * Helper function that merges tailwindcss
- * class names in the given input array.
- */
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Helper function that merges tailwindcss
+ * class names in the given input array.
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/tailwind.config.mjs

@@ -1,65 +1,65 @@
-/**
- * @type {import('tailwindcss').Config}
- */
-const tailwindConfig = {
-  darkMode: "class",
-  plugins: [],
-  content: [
-    "./src/**/*.{js,ts,jsx,tsx,mdx}",
-    "./stories/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  future: { hoverOnlyWhenSupported: true },
-  theme: {
-    extend: {
-      keyframes: {
-        "accordion-down": {
-          from: {
-            height: "0",
-          },
-          to: {
-            height: "var(--radix-accordion-content-height)",
-          },
-        },
-        "accordion-up": {
-          from: {
-            height: "var(--radix-accordion-content-height)",
-          },
-          to: {
-            height: "0",
-          },
-        },
-        overlayShow: {
-          from: { opacity: "0" },
-          to: { opacity: "1" },
-        },
-        contentShow: {
-          from: {
-            opacity: "0",
-            transform: "translate(-50%, -48%) scale(0.96)",
-          },
-          to: { opacity: "1", transform: "translate(-50%, -50%) scale(1)" },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-        overlayShow: "overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)",
-        contentShow: "contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)",
-      },
-      colors: {
-        sidebar: {
-          DEFAULT: "hsl(var(--sidebar-background))",
-          foreground: "hsl(var(--sidebar-foreground))",
-          primary: "hsl(var(--sidebar-primary))",
-          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
-          accent: "hsl(var(--sidebar-accent))",
-          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
-          border: "hsl(var(--sidebar-border))",
-          ring: "hsl(var(--sidebar-ring))",
-        },
-      },
-    },
-  },
-};
-
-export default tailwindConfig;
+/**
+ * @type {import('tailwindcss').Config}
+ */
+const tailwindConfig = {
+  darkMode: "class",
+  plugins: [],
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
+    "./stories/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  future: { hoverOnlyWhenSupported: true },
+  theme: {
+    extend: {
+      keyframes: {
+        "accordion-down": {
+          from: {
+            height: "0",
+          },
+          to: {
+            height: "var(--radix-accordion-content-height)",
+          },
+        },
+        "accordion-up": {
+          from: {
+            height: "var(--radix-accordion-content-height)",
+          },
+          to: {
+            height: "0",
+          },
+        },
+        overlayShow: {
+          from: { opacity: "0" },
+          to: { opacity: "1" },
+        },
+        contentShow: {
+          from: {
+            opacity: "0",
+            transform: "translate(-50%, -48%) scale(0.96)",
+          },
+          to: { opacity: "1", transform: "translate(-50%, -50%) scale(1)" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+        overlayShow: "overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+        contentShow: "contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+      },
+      colors: {
+        sidebar: {
+          DEFAULT: "hsl(var(--sidebar-background))",
+          foreground: "hsl(var(--sidebar-foreground))",
+          primary: "hsl(var(--sidebar-primary))",
+          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+          accent: "hsl(var(--sidebar-accent))",
+          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+          border: "hsl(var(--sidebar-border))",
+          ring: "hsl(var(--sidebar-ring))",
+        },
+      },
+    },
+  },
+};
+
+export default tailwindConfig;

package/tsconfig.json

@@ -1,50 +1,58 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "strict": true,
-    "noImplicitAny": true,
-    "noImplicitThis": true,
-    "noUnusedLocals": true,
-    "noErrorTruncation": true,
-    "noImplicitOverride": true,
-    "noImplicitReturns": true,
-    "noUnusedParameters": false,
-    "noFallthroughCasesInSwitch": true,
-    "useUnknownInCatchVariables": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "allowUnreachableCode": false,
-    "allowImportingTsExtensions": false,
-    "allowArbitraryExtensions": true,
-    "diagnostics": true,
-    "extendedDiagnostics": true,
-    "pretty": true,
-    "resolvePackageJsonExports": true,
-    "resolvePackageJsonImports": true,
-    "removeComments": false,
-    "allowUnusedLabels": false,
-    "declaration": true,
-    "sourceMap": true,
-    "declarationDir": "dist/types",
-    "emitDeclarationOnly": true,
-    "outDir": "dist",
-    "rootDir": "src",
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    },
-    "types": ["@types/node", "@types/react", "@types/react-dom"],
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist", "**/*.{test,stories}.{ts,tsx}"]
-}
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "allowJs": false,
+    "checkJs": false,
+    "alwaysStrict": true,
+    "noEmit": false,
+    "declarationMap": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "erasableSyntaxOnly": true,
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "noErrorTruncation": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "useUnknownInCatchVariables": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "allowUnreachableCode": false,
+    "allowImportingTsExtensions": false,
+    "allowArbitraryExtensions": true,
+    "diagnostics": true,
+    "extendedDiagnostics": true,
+    "pretty": true,
+    "resolvePackageJsonExports": true,
+    "resolvePackageJsonImports": true,
+    "removeComments": false,
+    "allowUnusedLabels": false,
+    "declaration": true,
+    "sourceMap": true,
+    "declarationDir": "dist/types",
+    "emitDeclarationOnly": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "types": ["@types/node", "@types/react", "@types/react-dom"],
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist", "**/*.{test,stories}.{ts,tsx}"]
+}

package/changelog.md

@@ -1,38 +0,0 @@
-# Release History
-
-All notable changes to this component library will be documented in this file.
-
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-
-## 0.0.37 - (2025-04-20)
-
-- Bump radix-ui packages to latest versions.
-- Refactor readme.md to include new components.
-- Added some `Animate-UI` components (9).
-- Added some `Magic-UI` components (2).
-- Added some `Aceternity-UI` components (1).
-
-## 0.0.36 - (2025-04-17)
-
-- Migrate from npm to yarn.
-- Bump ShadCN packages to latest versions.
-
-## 0.0.35 - (2025-04-08)
-
-- Migrate from vite to rslib.
-- Update calendar component from v8 to v9.
-
-## 0.0.34 - (2025-03-27)
-
-- Upped package versions.
-- Removed `daisyUI` dependency from `package.json` and `tailwind.config.js`.
-- De-duplicated packages in `yarn.lock` file.
-
-## 0.0.33 - (2025-03-13)
-
-- Added `toast` function to invoke `Toast` components
-
-## 0.0.32 - (2025-03-05)
-
-- Initial release of changelog for the component library

package/readme.md

@@ -1,214 +0,0 @@
-# ✨ @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)
-![Tree-Shakeable](https://img.shields.io/badge/tree--shakeable-true-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/).
-
-## 📚 Table of Contents
-
-- Features
-- Installation
-- Usage
-- Available Components
-- Component Documentation
-- TypeScript Support
-- Server-Side Rendering
-- Browser Support
-- Contributing
-- License
-- Author
-- Acknowledgments
-
-## 🚀 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
-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, CardHeader, CardTitle
-  CardDescription, CardFooter
- } from "@arolariu/components/card";
-
-export default function MyComponent() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Card Title</CardTitle>
-        <CardDescription>Card Description</CardDescription>
-      </CardHeader>
-      <CardFooter>
-        <Button>Click Me</Button>
-      </CardFooter>
-    </Card>
-  );
-}
-```
-
-### Tree-Shaking
-
-For optimal bundle size, import components directly:
-
-```tsx
-// ✅ Good: Only imports the Button component
-import { Button } from "@arolariu/components/button";
-
-// ❌ Avoid: Imports all the components
-import { Button } from "@arolariu/components";
-```
-
-## 🧰 Available Components
-
-This library includes over 60 components, organized by category:
-
-| Category         | Components                                                        |
-| ---------------- | ----------------------------------------------------------------- |
-| **Layout**       | `Card`, `AspectRatio`, `Separator`, `Resizable`                   |
-| **Background**   | `HoleBackground`, `DotBackground`, `GradientBackground`           |
-| **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";
-```
-
-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.
-
-## 🔍 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 { buttonVariants } from "@arolariu/components/button";
-
-// TypeScript will provide autocomplete and type checking for props
-const MyButton = () => {
-  return <Button variant={buttonVariants.primary}>Click Me</Button>;
-};
-```
-
-## 🖥️ Server-Side Rendering
-
-All components are compatible with server-side rendering frameworks like Next.js, by default:
-
-```tsx
-// Next.js App Router example
-import { Button } from "@arolariu/components/button";
-
-export default async function SSR_Page() {
-  return (
-    <div>
-      <Button>Server Component Button</Button>
-    </div>
-  );
-}
-
-// For client interactions
-import { Button } from "@arolariu/components/button";
-
-export default function CSR_Page() {
-  return (
-    <div>
-      <Button>Client Component Button</Button>
-    </div>
-  );
-}
-```
-
-## 🌐 Browser Support
-
-- 🌟 Chrome/Edge (All modern versions from 2020 onwards)
-- 🦊 Firefox (All modern versions from 2020 onwards)
-- 🧭 Safari (All modern versions from 2020 onwards)
-
-## 👥 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)
-- 👥 LinkedIn: [Alexandru-Razvan Olariu](https://www.linkedin.com/in/olariu-alexandru/)
-
-## 🙏 Acknowledgments
-
-- [Radix UI](https://www.radix-ui.com/) for providing accessible primitives
-- [Animate-UI](https://animate-ui.com) for animated components
-- [Magic-UI](https://magic-ui.com) for utility components
-- [Aceternity-UI](https://aceternity-ui.com) for utility components
-- [shadcn/ui](https://ui.shadcn.com/) for inspiration and component patterns
-- [Tailwind CSS](https://tailwindcss.com/) for styling utilities
-- [RsBuild](https://rsbuild.dev/) for bundling and building
-- [TypeScript](https://www.typescriptlang.org/) for static typing
-
----
-
-⭐ **If you find this library helpful, please consider giving it a star on GitHub!** ⭐