fix(pixels): fix Button extend by using same tailwind-merge and tailwind-variants version of theme

Author: toxsick

packages/pixel-utils/package.json

@@ -40,12 +40,14 @@
     "build": "tsup --config node_modules/@repo/tsup-config/config.ts",
     "prepack": "pnpm build"
   },
+  "peerDependencies": {
+    "tailwind-merge": "*",
+    "tailwind-variants": "*"
+  },
   "dependencies": {
     "@heroui/theme": "2.4.20",
     "classnames": "2.5.1",
-    "slug": "9.1.0",
-    "tailwind-merge": "3.3.1",
-    "tailwind-variants": "3.1.1"
+    "slug": "9.1.0"
   },
   "devDependencies": {
     "@types/slug": "5.0.9"

packages/pixels/src/Alert/__snapshots__/Alert.test.tsx.snap

@@ -115,7 +115,7 @@ exports[`Story Snapshots > AllColorsAndVariants 1`] = `
         faded
       </div>
       <div
-        class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 border-small rounded-medium border-info-200 bg-info-50 text-info-600 dark:border-info-100 dark:bg-info-50/50"
+        class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 rounded-medium border-small border-info-200 bg-info-50 text-info-600 dark:border-info-100 dark:bg-info-50/50"
         data-has-description="true"
         data-has-title="true"
         data-visible="true"
@@ -163,7 +163,7 @@ exports[`Story Snapshots > AllColorsAndVariants 1`] = `
         bordered
       </div>
       <div
-        class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 border-small rounded-medium bg-transparent border-info text-info"
+        class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 rounded-medium bg-transparent border-small border-info text-info"
         data-has-description="true"
         data-has-title="true"
         data-visible="true"
@@ -316,7 +316,7 @@ exports[`Story Snapshots > AllColorsAndVariants 1`] = `
         faded
       </div>
       <div
-        class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 border-small rounded-medium bg-default-100 dark:bg-default-50/50 text-default-foreground border-default-300 dark:border-default-200"
+        class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 rounded-medium border-small bg-default-100 dark:bg-default-50/50 text-default-foreground border-default-300 dark:border-default-200"
         data-has-description="true"
         data-has-title="true"
         data-visible="true"
@@ -364,7 +364,7 @@ exports[`Story Snapshots > AllColorsAndVariants 1`] = `
         bordered
       </div>
       <div
-        class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 border-small rounded-medium bg-transparent border-default text-foreground"
+        class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 rounded-medium border-small bg-transparent border-default text-foreground"
         data-has-description="true"
         data-has-title="true"
         data-visible="true"
@@ -517,7 +517,7 @@ exports[`Story Snapshots > AllColorsAndVariants 1`] = `
         faded
       </div>
       <div
-        class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 border-small rounded-medium text-primary-600 bg-primary-50 dark:bg-primary-50/50 border-primary-200 dark:border-primary-100"
+        class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 rounded-medium border-small text-primary-600 bg-primary-50 dark:bg-primary-50/50 border-primary-200 dark:border-primary-100"
         data-has-description="true"
         data-has-title="true"
         data-visible="true"
@@ -565,7 +565,7 @@ exports[`Story Snapshots > AllColorsAndVariants 1`] = `
         bordered
       </div>
       <div
-        class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 border-small rounded-medium bg-transparent border-primary text-primary"
+        class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 rounded-medium border-small bg-transparent border-primary text-primary"
         data-has-description="true"
         data-has-title="true"
         data-visible="true"
@@ -718,7 +718,7 @@ exports[`Story Snapshots > AllColorsAndVariants 1`] = `
         faded
       </div>
       <div
-        class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 border-small rounded-medium text-secondary-600 bg-secondary-50 dark:bg-secondary-50/50 border-secondary-200"
+        class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 rounded-medium border-small text-secondary-600 bg-secondary-50 dark:bg-secondary-50/50 border-secondary-200"
         data-has-description="true"
         data-has-title="true"
         data-visible="true"
@@ -766,7 +766,7 @@ exports[`Story Snapshots > AllColorsAndVariants 1`] = `
         bordered
       </div>
       <div
-        class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 border-small rounded-medium bg-transparent border-secondary text-secondary"
+        class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 rounded-medium border-small bg-transparent border-secondary text-secondary"
         data-has-description="true"
         data-has-title="true"
         data-visible="true"
@@ -929,7 +929,7 @@ exports[`Story Snapshots > AllColorsAndVariants 1`] = `
         faded
       </div>
       <div
-        class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 border-small rounded-medium text-success-700 dark:text-success bg-success-50 dark:bg-success-50/50 border-success-300 dark:border-success-100"
+        class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 rounded-medium border-small text-success-700 dark:text-success bg-success-50 dark:bg-success-50/50 border-success-300 dark:border-success-100"
         data-has-description="true"
         data-has-title="true"
         data-visible="true"
@@ -982,7 +982,7 @@ exports[`Story Snapshots > AllColorsAndVariants 1`] = `
         bordered
       </div>
       <div
-        class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 border-small rounded-medium bg-transparent border-success text-success"
+        class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 rounded-medium border-small bg-transparent border-success text-success"
         data-has-description="true"
         data-has-title="true"
         data-visible="true"
@@ -1146,7 +1146,7 @@ exports[`Story Snapshots > AllColorsAndVariants 1`] = `
         faded
       </div>
       <div
-        class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 border-small rounded-medium text-warning-700 dark:text-warning bg-warning-50 dark:bg-warning-50/50 border-warning-300 dark:border-warning-100"
+        class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 rounded-medium border-small text-warning-700 dark:text-warning bg-warning-50 dark:bg-warning-50/50 border-warning-300 dark:border-warning-100"
         data-has-description="true"
         data-has-title="true"
         data-visible="true"
@@ -1197,7 +1197,7 @@ exports[`Story Snapshots > AllColorsAndVariants 1`] = `
         bordered
       </div>
       <div
-        class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 border-small rounded-medium bg-transparent border-warning text-warning"
+        class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 rounded-medium border-small bg-transparent border-warning text-warning"
         data-has-description="true"
         data-has-title="true"
         data-visible="true"
@@ -1353,7 +1353,7 @@ exports[`Story Snapshots > AllColorsAndVariants 1`] = `
         faded
       </div>
       <div
-        class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 border-small rounded-medium text-danger-600 dark:text-danger-500 bg-danger-50 dark:bg-danger-50/50 border-danger-200 dark:border-danger-100"
+        class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 rounded-medium border-small text-danger-600 dark:text-danger-500 bg-danger-50 dark:bg-danger-50/50 border-danger-200 dark:border-danger-100"
         data-has-description="true"
         data-has-title="true"
         data-visible="true"
@@ -1401,7 +1401,7 @@ exports[`Story Snapshots > AllColorsAndVariants 1`] = `
         bordered
       </div>
       <div
-        class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 border-small rounded-medium bg-transparent border-danger text-danger"
+        class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 rounded-medium border-small bg-transparent border-danger text-danger"
         data-has-description="true"
         data-has-title="true"
         data-visible="true"
@@ -1453,7 +1453,7 @@ exports[`Story Snapshots > AllColorsWithShowMoreButton 1`] = `
       info
     </div>
     <div
-      class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 border-small rounded-medium border-info-200 bg-info-50 text-info-600 dark:border-info-100 dark:bg-info-50/50"
+      class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 rounded-medium border-small border-info-200 bg-info-50 text-info-600 dark:border-info-100 dark:bg-info-50/50"
       data-has-description="true"
       data-has-title="true"
       data-visible="true"
@@ -1505,7 +1505,7 @@ exports[`Story Snapshots > AllColorsWithShowMoreButton 1`] = `
       default
     </div>
     <div
-      class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 border-small rounded-medium bg-default-100 dark:bg-default-50/50 text-default-foreground border-default-300 dark:border-default-200"
+      class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 rounded-medium border-small bg-default-100 dark:bg-default-50/50 text-default-foreground border-default-300 dark:border-default-200"
       data-has-description="true"
       data-has-title="true"
       data-visible="true"
@@ -1557,7 +1557,7 @@ exports[`Story Snapshots > AllColorsWithShowMoreButton 1`] = `
       primary
     </div>
     <div
-      class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 border-small rounded-medium text-primary-600 bg-primary-50 dark:bg-primary-50/50 border-primary-200 dark:border-primary-100"
+      class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 rounded-medium border-small text-primary-600 bg-primary-50 dark:bg-primary-50/50 border-primary-200 dark:border-primary-100"
       data-has-description="true"
       data-has-title="true"
       data-visible="true"
@@ -1609,7 +1609,7 @@ exports[`Story Snapshots > AllColorsWithShowMoreButton 1`] = `
       secondary
     </div>
     <div
-      class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 border-small rounded-medium text-secondary-600 bg-secondary-50 dark:bg-secondary-50/50 border-secondary-200"
+      class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 rounded-medium border-small text-secondary-600 bg-secondary-50 dark:bg-secondary-50/50 border-secondary-200"
       data-has-description="true"
       data-has-title="true"
       data-visible="true"
@@ -1661,7 +1661,7 @@ exports[`Story Snapshots > AllColorsWithShowMoreButton 1`] = `
       success
     </div>
     <div
-      class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 border-small rounded-medium text-success-700 dark:text-success bg-success-50 dark:bg-success-50/50 border-success-300 dark:border-success-100"
+      class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 rounded-medium border-small text-success-700 dark:text-success bg-success-50 dark:bg-success-50/50 border-success-300 dark:border-success-100"
       data-has-description="true"
       data-has-title="true"
       data-visible="true"
@@ -1718,7 +1718,7 @@ exports[`Story Snapshots > AllColorsWithShowMoreButton 1`] = `
       warning
     </div>
     <div
-      class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 border-small rounded-medium text-warning-700 dark:text-warning bg-warning-50 dark:bg-warning-50/50 border-warning-300 dark:border-warning-100"
+      class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 rounded-medium border-small text-warning-700 dark:text-warning bg-warning-50 dark:bg-warning-50/50 border-warning-300 dark:border-warning-100"
       data-has-description="true"
       data-has-title="true"
       data-visible="true"
@@ -1773,7 +1773,7 @@ exports[`Story Snapshots > AllColorsWithShowMoreButton 1`] = `
       danger
     </div>
     <div
-      class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 border-small rounded-medium text-danger-600 dark:text-danger-500 bg-danger-50 dark:bg-danger-50/50 border-danger-200 dark:border-danger-100"
+      class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 rounded-medium border-small text-danger-600 dark:text-danger-500 bg-danger-50 dark:bg-danger-50/50 border-danger-200 dark:border-danger-100"
       data-has-description="true"
       data-has-title="true"
       data-visible="true"
@@ -2014,7 +2014,7 @@ exports[`Story Snapshots > Closable 1`] = `
       faded
     </div>
     <div
-      class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 border-small rounded-medium border-info-200 bg-info-50 text-info-600 dark:border-info-100 dark:bg-info-50/50"
+      class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 rounded-medium border-small border-info-200 bg-info-50 text-info-600 dark:border-info-100 dark:bg-info-50/50"
       data-closeable="true"
       data-has-description="true"
       data-has-title="true"
@@ -2087,7 +2087,7 @@ exports[`Story Snapshots > Closable 1`] = `
       bordered
     </div>
     <div
-      class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 border-small rounded-medium bg-transparent border-info text-info"
+      class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 rounded-medium bg-transparent border-small border-info text-info"
       data-closeable="true"
       data-has-description="true"
       data-has-title="true"
@@ -2492,7 +2492,7 @@ exports[`Story Snapshots > NoIcon 1`] = `
       faded
     </div>
     <div
-      class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 border-small rounded-medium text-primary-600 bg-primary-50 dark:bg-primary-50/50 border-primary-200 dark:border-primary-100"
+      class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 rounded-medium border-small text-primary-600 bg-primary-50 dark:bg-primary-50/50 border-primary-200 dark:border-primary-100"
       data-has-description="true"
       data-has-title="true"
       data-visible="true"
@@ -2538,7 +2538,7 @@ exports[`Story Snapshots > NoIcon 1`] = `
       bordered
     </div>
     <div
-      class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 border-small rounded-medium bg-transparent border-primary text-primary"
+      class="flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1 rounded-medium border-small bg-transparent border-primary text-primary"
       data-has-description="true"
       data-has-title="true"
       data-visible="true"

packages/pixels/src/Button/Button.tsx

@@ -1,3 +1,4 @@
+import type { TVProps } from '@fuf-stack/pixel-utils';
 import type { ButtonProps as HeroButtonProps } from '@heroui/button';
 import type { ReactNode } from 'react';
 
@@ -8,11 +9,7 @@ import { tv } from '@fuf-stack/pixel-utils';
 
 import LoadingSpinner from './subcomponents/LoadingSpinner';
 
-const tvConfig = <T extends Parameters<typeof tv>[0]>(c: T) => {
-  return c;
-};
-
-const buttonVariantsConfig = tvConfig({
+export const buttonVariants = tv({
   extend: heroButtonVariants,
   variants: {
     color: {
@@ -85,17 +82,17 @@ const buttonVariantsConfig = tvConfig({
   ],
 });
 
-export const buttonVariants: ReturnType<typeof tv> = tv(buttonVariantsConfig);
+type VariantProps = TVProps<typeof buttonVariants>;
 
-export interface ButtonProps {
+export interface ButtonProps extends VariantProps {
   /** sets HTML aria-label attribute */
   ariaLabel?: string;
   /** content of the button */
   children?: ReactNode;
   /** CSS class name */
   className?: string;
   /** color of the button */
-  color?: HeroButtonProps['color'] | 'info';
+  color?: VariantProps['color'];
   /** disables the button */
   disabled?: boolean;
   /** disables all animations */
@@ -107,17 +104,17 @@ export interface ButtonProps {
   /** click event handler */
   onClick?: HeroButtonProps['onPress'];
   /** border radius size */
-  radius?: HeroButtonProps['radius'];
+  radius?: VariantProps['radius'];
   /** enable ripple animation effect on click */
   ripple?: boolean;
   /** size options */
-  size?: HeroButtonProps['size'];
+  size?: VariantProps['size'];
   /** HTML data-testid attribute used in e2e tests */
   testId?: string;
   /** HTML button type attribute */
   type?: 'button' | 'submit' | 'reset' | undefined;
   /** visual style variant */
-  variant?: HeroButtonProps['variant'];
+  variant?: VariantProps['variant'];
 }
 
 /**