feat: enhance UI components and update build configuration

src/recipes/iconButton.ts

@@ -2,6 +2,7 @@ import { defineRecipe, type SystemStyleObject } from '@pandacss/dev'
 
 export const iconButtonVariants = ['solid', 'outline', 'ghost'] as const
 export const iconButtonShapes = ['circle', 'square'] as const
+export const iconButtonSizes = ['small', 'medium', 'large'] as const
 
 interface IconButtonRecipeArg {
   semanticColorNames: string[]
@@ -23,7 +24,10 @@ const iconButtonRecipe = ({ semanticColorNames }: IconButtonRecipeArg) => {
       transitionDuration: 'normal',
       transitionTimingFunction: 'easeOut',
       _disabled: {
-        cursor: 'not-allowed'
+        cursor: 'not-allowed',
+        _hover: {
+          cursor: 'not-allowed'
+        }
       }
     },
     variants: {
@@ -58,15 +62,20 @@ const iconButtonRecipe = ({ semanticColorNames }: IconButtonRecipeArg) => {
         ...Object.fromEntries(iconButtonVariants.map((variant) => [variant, {}]))
       },
       size: {
-        small: {
-          padding: 'calc({spacing.sm} * 0.5)'
-        },
-        medium: {
-          padding: 'calc({spacing.sm} * 0.75)'
-        },
-        large: {
-          padding: 'calc({spacing.sm})'
-        }
+        ...Object.fromEntries(
+          iconButtonSizes.map((size) => {
+            switch (size) {
+              case 'small':
+                return [size, { padding: 'calc({spacing.sm} * 0.5)' }]
+              case 'medium':
+                return [size, { padding: 'calc({spacing.sm} * 0.75)' }]
+              case 'large':
+                return [size, { padding: 'calc({spacing.sm})' }]
+              default:
+                return [size, {}]
+            }
+          })
+        )
       }
     },
     compoundVariants: colors.flatMap((color) =>
@@ -89,8 +98,6 @@ const iconButtonRecipe = ({ semanticColorNames }: IconButtonRecipeArg) => {
                 _disabled: {
                   backgroundColor: `color-mix(in srgb, {colors.${color}.9} 40%, transparent)`,
                   color: `color-mix(in srgb, {colors.${color}.foreground} 40%, transparent)`,
-                  cursor: 'not-allowed',
-                  pointerEvents: 'none',
                   _hover: {
                     backgroundColor: `color-mix(in srgb, {colors.${color}.9} 40%, transparent)`,
                     color: `color-mix(in srgb, {colors.${color}.foreground} 40%, transparent)`
@@ -119,8 +126,6 @@ const iconButtonRecipe = ({ semanticColorNames }: IconButtonRecipeArg) => {
                   backgroundColor: `color-mix(in srgb, {colors.${color}.9} 10%, transparent)`,
                   color: `color-mix(in srgb, {colors.${color}.foreground} 40%, transparent)`,
                   borderColor: `color-mix(in srgb, {colors.${color}.9} 10%, transparent)`,
-                  cursor: 'not-allowed',
-                  pointerEvents: 'none',
                   _hover: {
                     backgroundColor: `color-mix(in srgb, {colors.${color}.9} 10%, transparent)`,
                     color: `${color}.4/50`
@@ -147,8 +152,6 @@ const iconButtonRecipe = ({ semanticColorNames }: IconButtonRecipeArg) => {
                 _disabled: {
                   backgroundColor: `color-mix(in srgb, {colors.${color}.9} 10%, transparent)`,
                   color: `color-mix(in srgb, {colors.${color}.foreground} 40%, transparent)`,
-                  cursor: 'not-allowed',
-                  pointerEvents: 'none',
                   _hover: {
                     backgroundColor: `color-mix(in srgb, {colors.${color}.9} 10%, transparent)`
                   }