feat: add new components and improve styling utilities

- Add chip, mark, and iconButton recipes with semantic color support - Introduce skeleton pattern and shimmer gradient for loading states - Enhance button and details recipes with refined transition properties - Update border radius tokens to include 'full' and negative spacing values - Refactor details recipe export and semantic color key handling - Bump package version to 0.0.6
2025-09-24 15:20:56 -06:00
parent 2f2b01fcde
commit d21d55f481
12 changed files with 554 additions and 69 deletions
--- a/src/recipes/iconButton.ts
+++ b/src/recipes/iconButton.ts
@@ -0,0 +1,176 @@
+import { defineRecipe, type SystemStyleObject } from '@pandacss/dev'
+
+export const iconButtonVariants = ['solid', 'outline', 'ghost'] as const
+export const iconButtonShapes = ['circle', 'square'] as const
+
+interface IconButtonRecipeArg {
+  semanticColorNames: string[]
+}
+
+const iconButtonRecipe = ({ semanticColorNames }: IconButtonRecipeArg) => {
+  const colors = ['neutral', ...semanticColorNames]
+  return defineRecipe({
+    className: 'iconButton',
+    base: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 'calc(max-content)',
+      height: 'auto',
+      aspectRatio: '1/1',
+      cursor: 'pointer',
+      transitionProperty: 'color, background-color, border-color',
+      transitionDuration: 'normal',
+      transitionTimingFunction: 'easeOut',
+      _disabled: {
+        cursor: 'not-allowed'
+      }
+    },
+    variants: {
+      shape: {
+        ...Object.fromEntries(
+          iconButtonShapes.map((shape) => {
+            switch (shape) {
+              case 'circle':
+                return [
+                  shape,
+                  {
+                    borderRadius: 'full'
+                  }
+                ]
+              case 'square':
+                return [
+                  shape,
+                  {
+                    borderRadius: 'none'
+                  }
+                ]
+              default:
+                return [shape, {}]
+            }
+          })
+        )
+      },
+      color: {
+        ...Object.fromEntries(colors.map((color) => [color, {}]))
+      },
+      variant: {
+        ...Object.fromEntries(iconButtonVariants.map((variant) => [variant, {}]))
+      },
+      size: {
+        small: {
+          padding: 'calc({spacing.xs} * 0.75) '
+        },
+        medium: {
+          padding: 'xs'
+        },
+        large: {
+          padding: 'calc({spacing.xs} * 1.25)'
+        }
+      }
+    },
+    compoundVariants: colors.flatMap((color) =>
+      iconButtonVariants.map((variant) => {
+        switch (variant) {
+          case 'solid':
+            return {
+              color,
+              variant,
+              css: {
+                border: 'none',
+                backgroundColor: `${color}.9`,
+                color: `${color}.foreground`,
+                _hover: {
+                  backgroundColor: `${color}.10`
+                },
+                _active: {
+                  backgroundColor: `color-mix(in srgb, {colors.${color}.9} 80%, {colors.${color}.1})`
+                },
+                _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)`
+                  }
+                }
+              } as SystemStyleObject
+            }
+          case 'outline':
+            return {
+              color,
+              variant,
+              css: {
+                border: '1px solid',
+                borderColor: `${color}.9`,
+                backgroundColor: 'transparent',
+                color: `${color}.9`,
+                _hover: {
+                  backgroundColor: `${color}.10`,
+                  color: `${color}.foreground`
+                },
+                _active: {
+                  backgroundColor: `color-mix(in srgb, {colors.${color}.9} 80%, {colors.${color}.1})`,
+                  color: `${color}.foreground`
+                },
+                _disabled: {
+                  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`
+                  }
+                }
+              }
+            }
+          case 'ghost':
+            return {
+              color,
+              variant,
+              css: {
+                border: 'none',
+                backgroundColor: 'transparent',
+                color: `${color}.9`,
+                _hover: {
+                  backgroundColor: `${color}.10`,
+                  color: `${color}.foreground`
+                },
+                _active: {
+                  backgroundColor: `color-mix(in srgb, {colors.${color}.9} 80%, {colors.${color}.1})`,
+                  color: `${color}.foreground`
+                },
+                _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)`
+                  }
+                }
+              }
+            }
+          default:
+            return {
+              color,
+              variant,
+              css: {}
+            }
+        }
+      })
+    ),
+    defaultVariants: {
+      shape: 'circle',
+      color: 'neutral',
+      variant: 'solid',
+      size: 'medium'
+    }
+  })
+}
+
+export default iconButtonRecipe