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/input.ts

@@ -1,36 +1,69 @@
 import { defineRecipe } from '@pandacss/dev'
 
-export const inputRecipe = defineRecipe({
-  className: 'input',
-  base: {
-    display: 'inline-flex',
-    borderRadius: '4px',
-    cursor: 'pointer',
-    paddingBlock: '0.25em',
-    paddingInline: '0.5em',
-    border: '1px solid',
-    borderColor: 'neutral.7',
-    backgroundColor: 'neutral.3',
-    color: 'neutral.12',
-    outline: 'none',
-    transition: 'all 200ms ease-in-out',
-    _hover: {
-      backgroundColor: 'neutral.4'
-    },
-    _disabled: {
-      backgroundColor: 'neutral.3/50',
-      color: 'neutral.11/50',
-      borderColor: 'neutral.6/50',
-      cursor: 'not-allowed',
-      _hover: {
-        backgroundColor: 'neutral.6/50',
-        color: 'neutral.11/50'
+export interface InputRecipeArg {
+  semanticColorNames: string[]
+}
+
+export const inputRecipe = ({ semanticColorNames }: InputRecipeArg) => {
+  const colorVariants = ['neutral', ...semanticColorNames]
+
+  return defineRecipe({
+    className: 'input',
+    base: {
+      display: 'inline-flex',
+      borderRadius: 'sm',
+      paddingBlock: 'xs',
+      paddingInline: 'sm',
+      border: '1px solid',
+      outline: 'none',
+      transitionProperty: 'color, background-color, border-color',
+      transitionDuration: 'normal',
+      transitionTimingFunction: 'easeOut',
+      cursor: 'text',
+      _disabled: {
+        cursor: 'not-allowed'
       }
     },
-    _active: {
-      backgroundColor: 'neutral.8'
+    variants: {
+      color: {
+        ...Object.fromEntries(
+          colorVariants.map((color) => [
+            color,
+            {
+              borderColor: `${color}.6`,
+              backgroundColor: `${color}.2`,
+              color: `${color}.12`,
+              _hover: {
+                backgroundColor: `${color}.3`
+              },
+              _focus: {
+                backgroundColor: `${color}.3`,
+                borderColor: `${color}.7`
+              },
+              _disabled: {
+                backgroundColor: `color-mix(in srgb, {colors.${color}.2} 30%, transparent)`,
+                color: `color-mix(in srgb, {colors.${color}.11} 30%, transparent)`,
+                borderColor: `color-mix(in srgb, {colors.${color}.6} 30%, transparent)`,
+                _hover: {
+                  backgroundColor: `color-mix(in srgb, {colors.${color}.2} 30%, transparent)`,
+                  borderColor: `color-mix(in srgb, {colors.${color}.6} 30%, transparent)`,
+                  color: `color-mix(in srgb, {colors.${color}.11} 30%, transparent)`
+                },
+                _focus: {
+                  backgroundColor: `color-mix(in srgb, {colors.${color}.2} 30%, transparent)`,
+                  borderColor: `color-mix(in srgb, {colors.${color}.6} 30%, transparent)`,
+                  color: `color-mix(in srgb, {colors.${color}.11} 30%, transparent)`
+                }
+              }
+            }
+          ])
+        )
+      }
+    },
+    defaultVariants: {
+      color: 'neutral'
     }
-  }
-})
+  })
+}
 
 export default inputRecipe