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

src/recipes/button.ts

@@ -3,11 +3,11 @@ import { defineRecipe } from '@pandacss/dev'
 export const buttonVariants = ['solid', 'outline', 'ghost'] as const
 
 interface ButtonRecipeArg {
-  semanticColors: string[]
+  semanticColorNames: string[]
 }
 
-const buttonRecipe = ({ semanticColors }: ButtonRecipeArg) => {
-  const colorVariants = ['neutral', ...semanticColors]
+const buttonRecipe = ({ semanticColorNames }: ButtonRecipeArg) => {
+  const colorVariants = ['neutral', ...semanticColorNames]
 
   return defineRecipe({
     className: 'button',
@@ -15,13 +15,15 @@ const buttonRecipe = ({ semanticColors }: ButtonRecipeArg) => {
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
-      gap: '0.5em',
+      gap: 'xs',
       width: 'fit-content',
-      borderRadius: '4px',
-      paddingBlock: '0.25em',
-      paddingInline: '0.5em',
+      borderRadius: 'sm',
+      paddingBlock: 'xs',
+      paddingInline: 'sm',
       cursor: 'pointer',
-      transition: 'all 200ms ease-in-out'
+      transition: 'all',
+      transitionDuration: 'normal',
+      transitionTimingFunction: 'easeOut'
     },
     variants: {
       color: {
@@ -29,13 +31,19 @@ const buttonRecipe = ({ semanticColors }: ButtonRecipeArg) => {
       },
       size: {
         small: {
-          fontSize: '0.875em'
+          paddingBlock: 'calc({spacing.xs} * 0.5)',
+          paddingInline: 'calc({spacing.xs} * 1)',
+          fontSize: 'sm'
         },
         medium: {
-          fontSize: '1em'
+          paddingBlock: 'calc({spacing.xs} * 0.75)',
+          paddingInline: 'calc({spacing.xs} * 1.25)',
+          fontSize: 'base'
         },
         large: {
-          fontSize: '1.125em'
+          paddingBlock: 'calc({spacing.xs} * 1)',
+          paddingInline: 'calc({spacing.xs} * 1.5)',
+          fontSize: 'lg'
         }
       },
       variant: {