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

@@ -1,5 +1,5 @@
 {
-  "name": "@srjuggernaut/srjuggernaut-panda-preset",
+  "name": "@srjuggernaut-dev/srjuggernaut-panda-preset",
   "module": "dist/index.js",
   "type": "module",
   "files": [
@@ -7,7 +7,7 @@
     "README.md"
   ],
   "main": "dist/index.js",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "scripts": {
     "prepare": "ts-patch install -s && bun .husky/install.ts",
     "prepublishOnly": "bun run build",
@@ -29,7 +29,7 @@
     "typescript-transform-paths": "^3.5.5"
   },
   "peerDependencies": {
-    "@pandacss/dev": "0.53.3",
+    "@pandacss/dev": "^1.2.0",
     "@radix-ui/colors": "3.0.0"
   },
   "dependencies": {}

src/index.ts

@@ -33,7 +33,128 @@ const srJuggernautPandaPreset = (config?: themeConfig) => {
         input: inputRecipe
       },
       tokens: {
-        colors
+        animations: {},
+        aspectRatios: {
+          square: { value: '1 / 1' },
+          '20:9': { value: '20 / 9' },
+          '16:9': { value: '16 / 9' },
+          '9:16': { value: '9 / 16' },
+          '9:20': { value: '9 / 20' },
+          '4:3': { value: '4 / 3' },
+          '3:4': { value: '3 / 4' }
+        },
+        assets: {},
+        blurs: {},
+        borders: {},
+        borderWidths: {},
+        colors,
+        containerNames: {},
+        cursor: {},
+        durations: {
+          fast: { value: '150ms' },
+          normal: { value: '300ms' },
+          slow: { value: '450ms' }
+        },
+        easings: {
+          easeIn: { value: 'cubic-bezier(0.420, 0.000, 1.000, 1.000)' },
+          easeOut: { value: 'cubic-bezier(0.000, 0.000, 0.580, 1.000)' },
+          easeInOut: { value: 'cubic-bezier(0.420, 0.000, 0.580, 1.000)' },
+          easeInQuint: { value: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)' },
+          easeOutQuint: { value: 'cubic-bezier(0.230, 1.000, 0.320, 1.000)' },
+          easeInOutQuint: { value: 'cubic-bezier(0.860, 0.000, 0.070, 1.000)' }
+        },
+        fonts: {},
+        fontSizes: {
+          xs: { value: '0.75em' },
+          sm: { value: '0.875em' },
+          base: { value: '1em' },
+          lg: { value: '1.125em' },
+          xl: { value: '1.5em' },
+          h1: { value: '3em' },
+          h2: { value: '2.5em' },
+          h3: { value: '2.25em' },
+          h4: { value: '2em' },
+          h5: { value: '1.75em' },
+          h6: { value: '1.5em' },
+          rxs: { value: '0.75rem' },
+          rsm: { value: '0.875rem' },
+          rbase: { value: '1rem' },
+          rlg: { value: '1.25rem' },
+          rxl: { value: '1.5rem' },
+          rh1: { value: '3rem' },
+          rh2: { value: '2.5rem' },
+          rh3: { value: '2.25rem' },
+          rh4: { value: '2rem' },
+          rh5: { value: '1.75rem' },
+          rh6: { value: '1.5rem' }
+        },
+        fontWeights: {
+          thin: { value: '100' },
+          extralight: { value: '200' },
+          light: { value: '300' },
+          normal: { value: '400' },
+          medium: { value: '500' },
+          semibold: { value: '600' },
+          bold: { value: '700' },
+          extrabold: { value: '800' },
+          black: { value: '900' }
+        },
+        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' },
+          tight: { value: '1.25em' },
+          snug: { value: '1.375em' },
+          normal: { value: '1.5em' },
+          relaxed: { value: '1.625em' },
+          loose: { value: '2em' }
+        },
+        radii: {
+          none: { value: '0' },
+          xs: { value: '0.125rem' },
+          sm: { value: '0.25rem' },
+          md: { value: '0.375rem' },
+          lg: { value: '0.5rem' },
+          xl: { value: '0.75rem' },
+          xxl: { value: '1rem' }
+        },
+        shadows: {},
+        opacity: {},
+        sizes: {},
+        spacing: {
+          none: { value: '0' },
+          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: {}
+      },
+      keyframes: {
+        shimmerRight: {
+          '0%': { transform: 'translateX(-100%)' },
+          '100%': { transform: 'translateX(150%)' }
+        },
+        shimmerLeft: {
+          '0%': { transform: 'translateX(100%)' },
+          '100%': { transform: 'translateX(-150%)' }
+        }
       },
       semanticTokens: {
         colors: {