feat: add skeleton gradients and shimmer animations

bun.lock

@@ -17,7 +17,7 @@
         "typescript-transform-paths": "^3.5.5",
       },
       "peerDependencies": {
-        "@pandacss/dev": "0.53.3",
+        "@pandacss/dev": "^1.2.0",
         "@radix-ui/colors": "3.0.0",
       },
     },

package.json

@@ -7,7 +7,7 @@
     "README.md"
   ],
   "main": "dist/index.js",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "scripts": {
     "prepare": "ts-patch install -s && bun .husky/install.ts",
     "prepublishOnly": "bun run build",

src/index.ts

@@ -99,7 +99,20 @@ const srJuggernautPandaPreset = (config?: themeConfig) => {
           extrabold: { value: '800' },
           black: { value: '900' }
         },
-        gradients: {},
+        gradients: {
+          skeleton: {
+            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%'
+              ]
+            }
+          }
+        },
         letterSpacings: {},
         lineHeights: {
           none: { value: '1em' },
@@ -133,6 +146,16 @@ const srJuggernautPandaPreset = (config?: themeConfig) => {
         },
         zIndex: {}
       },
+      keyframes: {
+        shimmerRight: {
+          '0%': { transform: 'translateX(-100%)' },
+          '100%': { transform: 'translateX(150%)' }
+        },
+        shimmerLeft: {
+          '0%': { transform: 'translateX(100%)' },
+          '100%': { transform: 'translateX(-150%)' }
+        }
+      },
       semanticTokens: {
         colors: {
           neutral: neutral,