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/chip.ts
+++ b/src/recipes/chip.ts
@@ -0,0 +1,97 @@
+import { defineRecipe } from '@pandacss/dev'
+
+export const chipVariants = ['solid', 'outline', 'ghost'] as const
+
+interface ChipRecipeArg {
+  semanticColorNames: string[]
+}
+
+const chipRecipe = ({ semanticColorNames }: ChipRecipeArg) => {
+  const colors = ['neutral', ...semanticColorNames]
+  return defineRecipe({
+    className: 'chip',
+    base: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 'xs',
+      lineHeight: '1',
+      borderRadius: 'sm',
+      fontWeight: 'semibold',
+      lineHeightStep: 'none',
+      userSelect: 'none'
+    },
+    variants: {
+      color: {
+        ...Object.fromEntries(colors.map((color) => [color, {}]))
+      },
+      variant: {
+        ...Object.fromEntries(chipVariants.map((variant) => [variant, {}]))
+      },
+      size: {
+        small: {
+          paddingBlock: 'calc({spacing.sm} * 0.5)',
+          paddingInline: 'calc({spacing.sm} * 0.75)',
+          fontSize: 'xs'
+        },
+        medium: {
+          paddingBlock: 'calc({spacing.sm} * 0.75)',
+          paddingInline: 'calc({spacing.sm})',
+          fontSize: 'sm'
+        },
+        large: {
+          paddingBlock: 'calc({spacing.sm})',
+          paddingInline: 'calc({spacing.sm} * 1.25)',
+          fontSize: 'base'
+        }
+      }
+    },
+    compoundVariants: colors.flatMap((color) => {
+      return chipVariants.map((variant) => {
+        switch (variant) {
+          case 'solid':
+            return {
+              color,
+              variant,
+              css: {
+                backgroundColor: `{colors.${color}.9}`,
+                color: `{colors.${color}.foreground}`
+              }
+            }
+          case 'outline':
+            return {
+              color,
+              variant,
+              css: {
+                border: '1px solid',
+                borderColor: `{colors.${color}.6}`,
+                color: `{colors.${color}.9}`
+              }
+            }
+          case 'ghost':
+            return {
+              color,
+              variant,
+              css: {
+                backgroundColor: `{colors.${color}.2}`,
+                color: `{colors.${color}.9}`
+              }
+            }
+          default:
+            return {
+              color,
+              variant,
+              css: {}
+            }
+        }
+      })
+    }),
+    defaultVariants: {
+      color: 'neutral',
+      size: 'medium',
+      variant: 'solid'
+    }
+  })
+}
+
+export default chipRecipe