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

@@ -2,10 +2,16 @@ import { definePreset } from '@pandacss/dev'
 import generateColors from '@/colors/generateColors.js'
 import generateNeutralColor from '@/colors/generateNeutralColor.js'
 import buttonRecipe from '@/recipes/button.js'
-import { detailsRecipe } from '@/recipes/details.js'
+import detailsRecipe from '@/recipes/details.js'
 import inputRecipe from '@/recipes/input.js'
 import { type BrandColor, type Color, type ColorVariation, color, type NeutralColor } from '@/types.js'
 import generateSemanticColors from './colors/generateSemanticColors.js'
+import pulseKeyframes from './keyframes/pulse.js'
+import shimmerKeyframes from './keyframes/shimmer.js'
+import skeletonPattern from './patterns/skeleton.js'
+import chipRecipe from './recipes/chip.js'
+import iconButtonRecipe from './recipes/iconButton.js'
+import markRecipe from './recipes/mark.js'
 
 export type ThemeConfig = {
   neutral?: NeutralColor
@@ -26,13 +32,20 @@ const srJuggernautPandaPreset = (config?: ThemeConfig) => {
   const colors = generateColors(config?.includeColors)
   const neutral = generateNeutralColor(mergedConfig.neutral, mergedConfig.colorVariation)
   const semanticColors = generateSemanticColors(mergedConfig.semanticColors, mergedConfig.colorVariation)
+  const semanticColorKeysArray = Object.keys(semanticColors)
   return definePreset({
     name: 'srjuggernaut-panda-preset',
+    patterns: {
+      skeleton: skeletonPattern
+    },
     theme: {
       recipes: {
-        button: buttonRecipe({ semanticColors: Object.keys(semanticColors) }),
-        details: detailsRecipe({ semanticColors: Object.keys(semanticColors) }),
-        input: inputRecipe
+        button: buttonRecipe({ semanticColorNames: semanticColorKeysArray }),
+        chip: chipRecipe({ semanticColorNames: semanticColorKeysArray }),
+        details: detailsRecipe({ semanticColorNames: semanticColorKeysArray }),
+        mark: markRecipe({ semanticColorNames: semanticColorKeysArray }),
+        input: inputRecipe({ semanticColorNames: semanticColorKeysArray }),
+        iconButton: iconButtonRecipe({ semanticColorNames: semanticColorKeysArray })
       },
       tokens: {
         animations: {},
@@ -102,15 +115,16 @@ const srJuggernautPandaPreset = (config?: ThemeConfig) => {
           black: { value: '900' }
         },
         gradients: {
-          skeleton: {
+          shimmer: {
             value: {
               type: 'linear',
               placement: 'to right',
               stops: [
-                'color-mix(in srgb, {colors.neutral.12} 0%, transparent 100%) 0%',
-                'color-mix(in srgb, {colors.neutral.12} 10%, transparent 100%) 20%',
-                'color-mix(in srgb, {colors.neutral.12} 30%, transparent 100%) 30%',
-                'color-mix(in srgb, {colors.neutral.12} 0%, transparent 100%) 40%'
+                'color-mix(in srgb, {colors.neutral.12} 0%, transparent) 0%',
+                'color-mix(in srgb, {colors.neutral.12} 0%, transparent) 15%',
+                'color-mix(in srgb, {colors.neutral.12} 10%, transparent) 20%',
+                'color-mix(in srgb, {colors.neutral.12} 20%, transparent) 25%',
+                'color-mix(in srgb, {colors.neutral.12} 0%, transparent) 30%'
               ]
             }
           }
@@ -131,7 +145,8 @@ const srJuggernautPandaPreset = (config?: ThemeConfig) => {
           md: { value: '0.375rem' },
           lg: { value: '0.5rem' },
           xl: { value: '0.75rem' },
-          xxl: { value: '1rem' }
+          xxl: { value: '1rem' },
+          full: { value: '9999px' }
         },
         shadows: {},
         opacity: {},
@@ -144,19 +159,21 @@ const srJuggernautPandaPreset = (config?: ThemeConfig) => {
           lg: { value: '1.5rem' },
           xl: { value: '2rem' },
           xxl: { value: '3rem' },
-          xxxl: { value: '4rem' }
+          xxxl: { value: '4rem' },
+          '-xs': { value: '-0.25rem' },
+          '-sm': { value: '-0.5rem' },
+          '-md': { value: '-1rem' },
+          '-lg': { value: '-1.5rem' },
+          '-xl': { value: '-2rem' },
+          '-xxl': { value: '-3rem' },
+          '-xxxl': { value: '-4rem' }
         },
         zIndex: {}
       },
+      animationStyles: {},
       keyframes: {
-        shimmerRight: {
-          '0%': { transform: 'translateX(-100%)' },
-          '100%': { transform: 'translateX(150%)' }
-        },
-        shimmerLeft: {
-          '0%': { transform: 'translateX(100%)' },
-          '100%': { transform: 'translateX(-150%)' }
-        }
+        ...shimmerKeyframes,
+        ...pulseKeyframes
       },
       semanticTokens: {
         colors: {
@@ -169,6 +186,10 @@ const srJuggernautPandaPreset = (config?: ThemeConfig) => {
 }
 
 export default srJuggernautPandaPreset
+
 export { buttonVariants } from '@/recipes/button.js'
+export { chipVariants } from '@/recipes/chip.js'
+export { iconButtonShapes, iconButtonVariants } from '@/recipes/iconButton.js'
+export { markVariants } from '@/recipes/mark.js'
 
 export { BrandColor, ColorVariation, NeutralColor } from '@/types.js'