refactor library to use tailwind-variants

.vscode /settings.json

@@ -2,19 +2,21 @@
   "editor.tabSize": 2,
   "editor.detectIndentation": false,
   "search.exclude": {
-    "package-lock.json": true
+    "yarn-lock.json": true
   },
   "editor.defaultFormatter": "dbaeumer.vscode-eslint",
-  "editor.formatOnSave": false,
-  "editor.codeActionsOnSave": {
-    "source.addMissingImports": true,
-    "source.fixAll.eslint": true
-  },
-  // Multiple language settings for json and jsonc files
-  "[json][jsonc]": {
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": [
+    "source.addMissingImports",
+    "source.fixAll.eslint"
+  ],
+  "[json][jsonc][yaml]": {
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "tailwindCSS.experimental.classRegex": [["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]],
+  "tailwindCSS.experimental.classRegex": [
+    ["tv\\((([^()]*|\\([^()]*\\))*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
+  ],
+  "prettier.ignorePath": ".gitignore",
   "typescript.tsdk": "./node_modules/typescript/lib"
 }

README.md

@@ -16,16 +16,16 @@ The reason these are required is because most of these components are created us
 
 Here's a list of all the peer dependencies this package relies on:
 
-- `class-variance-authority@^0.7.0`
-- `clsx@^2.1.0`
 - `lucide-react@0.312.0`
 - `react@^18.2.0`
 - `react-dom@^18.2.0"`
 - `react-hook-form@^7.49.3`
-- `tailwind-merge@^2.2.0`
+- `tailwind-variants@^0.2.0`
 - `tailwindcss-animate@^1.0.7`
 - `tailwindcss@^3.4.1`
 
+**Note: As of v1.1.0, `clsx`, `cva`, and `twMerge` are replaced by `tv`.**
+
 ### Installing Dependencies
 
 You can use whatever package management library, but I'll be using yarn for this example.
@@ -39,7 +39,7 @@ yarn add chad-ui
 #### 2. Install other necessary dependencies:
 
 ```
-yarn add class-variance-authority clsx lucide-react react react-dom react-hook-form tailwind-merge
+yarn add lucide-react react react-dom react-hook-form tailwind-variants
 ```
 
 These can be added as dev dependencies:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chad-ui",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "description": "A React UI component library bundled with Rollup.js to commonJs, ES6 Modules, Storybook, Tailwind CSS, and Shadcn UI.",
   "author": "Damir Vazgird",
   "license": "MIT",
@@ -39,13 +39,11 @@
     "ui:diff": "npx shadcn-ui diff"
   },
   "peerDependencies": {
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.0",
     "lucide-react": "^0.321.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.49.3",
-    "tailwind-merge": "^2.2.0",
+    "tailwind-variants": "^0.2.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
@@ -72,31 +70,29 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
     "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-docs": "^7.6.12",
-    "@storybook/addon-essentials": "^7.6.12",
-    "@storybook/addon-interactions": "^7.6.12",
-    "@storybook/addon-links": "^7.6.12",
+    "@storybook/addon-docs": "^7.6.17",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
     "@storybook/addon-onboarding": "^1.0.11",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/addon-themes": "^7.6.12",
-    "@storybook/blocks": "^7.6.12",
-    "@storybook/react": "^7.6.12",
-    "@storybook/react-vite": "^7.6.12",
+    "@storybook/addon-themes": "^7.6.17",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-vite": "^7.6.17",
     "@storybook/testing-library": "^0.2.2",
     "@svgr/rollup": "^8.1.0",
-    "@testing-library/jest-dom": "^6.4.1",
+    "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/node": "^20.11.16",
-    "@types/react": "^18.2.52",
-    "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.20.0",
-    "@typescript-eslint/parser": "^6.20.0",
-    "autoprefixer": "^10.4.17",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.0",
+    "@types/node": "^20.11.24",
+    "@types/react": "^18.2.61",
+    "@types/react-dom": "^18.2.19",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "autoprefixer": "^10.4.18",
     "embla-carousel-react": "^8.0.0-rc21",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
@@ -105,32 +101,32 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "gh-pages": "^6.1.1",
     "jsdom": "^24.0.0",
-    "lucide-react": "^0.321.0",
-    "postcss": "^8.4.33",
-    "prettier": "3.2.4",
+    "lucide-react": "^0.344.0",
+    "postcss": "^8.4.35",
+    "prettier": "3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.50.0",
+    "react-hook-form": "^7.51.0",
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^5.0.5",
-    "rollup": "^4.9.6",
+    "rollup": "^4.12.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
-    "storybook": "^7.6.12",
-    "tailwind-merge": "^2.2.1",
+    "storybook": "^7.6.17",
+    "tailwind-variants": "^0.2.0",
     "tailwindcss": "^3.4.1",
     "tailwindcss-animate": "^1.0.7",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
-    "vite": "^5.0.12",
+    "vite": "^5.1.4",
     "vite-plugin-svgr": "^4.2.0",
-    "vitest": "^1.2.2",
+    "vitest": "^1.3.1",
     "zod": "^3.22.4"
   },
   "packageManager": "yarn@3.6.3"

src/components/Accordion/index.tsx

@@ -3,52 +3,82 @@
 import * as React from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { ChevronDown } from 'lucide-react';
+import { tv } from 'tailwind-variants';
 
-import { cn } from '@/utils';
+// Accordion
 
 const Accordion = AccordionPrimitive.Root;
 
+// AccordionItem
+
+const accordionItem = tv({ base: 'border-b' });
+
 const AccordionItem = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
 >(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item ref={ref} className={cn('border-b', className)} {...props} />
+  <AccordionPrimitive.Item ref={ref} className={accordionItem({ className })} {...props} />
 ));
 AccordionItem.displayName = 'AccordionItem';
 
+// AccordionTigger
+
+const accordionTrigger = tv({
+  slots: {
+    base: 'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+    wrapper: 'flex',
+    icon: 'h-4 w-4 shrink-0 transition-transform duration-200',
+  },
+});
+
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-));
+>(({ className, children, ...props }, ref) => {
+  const { base, wrapper, icon } = accordionTrigger();
+
+  return (
+    <AccordionPrimitive.Header className={wrapper()}>
+      <AccordionPrimitive.Trigger ref={ref} className={base({ className })} {...props}>
+        {children}
+        <ChevronDown className={icon()} />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+});
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 
+// AccordionContent
+
+const accordionContent = tv({
+  slots: {
+    base: 'pb-4 pt-0',
+    wrapper:
+      'overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
+  },
+});
+
 const AccordionContent = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-    {...props}
-  >
-    <div className={cn('pb-4 pt-0', className)}>{children}</div>
-  </AccordionPrimitive.Content>
-));
+>(({ className, children, ...props }, ref) => {
+  const { base, wrapper } = accordionContent();
+
+  return (
+    <AccordionPrimitive.Content ref={ref} className={wrapper()} {...props}>
+      <div className={base({ className })}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+});
 
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+export {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+  accordionItem,
+  accordionTrigger,
+  accordionContent,
+};

src/components/Avatar/index.tsx

@@ -2,38 +2,41 @@
 
 import * as React from 'react';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { tv } from 'tailwind-variants';
 
-import { cn } from '@/utils';
+// Avatar
+
+const avatar = tv({
+  base: 'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
+});
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    ref={ref}
-    className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => <AvatarPrimitive.Root ref={ref} className={avatar({ className })} {...props} />);
 Avatar.displayName = AvatarPrimitive.Root.displayName;
 
+// AvatarImage
+
+const avatarImage = tv({ base: 'aspect-square h-full w-full' });
+
 const AvatarImage = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Image>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
 >(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image ref={ref} className={cn('aspect-square h-full w-full', className)} {...props} />
+  <AvatarPrimitive.Image ref={ref} className={avatarImage({ className })} {...props} />
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
+// AvatarFallback
+
+const avatarFallback = tv({ base: 'flex h-full w-full items-center justify-center rounded-full bg-muted' });
+
 const AvatarFallback = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
 >(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className)}
-    {...props}
-  />
+  <AvatarPrimitive.Fallback ref={ref} className={avatarFallback({ className })} {...props} />
 ));
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;