chore: initial commit

I just realized i was using this without commiting it, so this is a very big commit
2025-08-31 19:43:26 -06:00
commit 88be319334
19 changed files with 1301 additions and 0 deletions
--- a/src/recipes/button.ts
+++ b/src/recipes/button.ts
@@ -0,0 +1,143 @@
+import { defineRecipe } from '@pandacss/dev'
+
+export const buttonVariants = ['solid', 'outline', 'ghost'] as const
+
+interface ButtonRecipeArg {
+  semanticColors: string[]
+}
+
+const buttonRecipe = ({ semanticColors }: ButtonRecipeArg) => {
+  const colorVariants = ['neutral', ...semanticColors]
+
+  return defineRecipe({
+    className: 'button',
+    base: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '0.5em',
+      width: 'fit-content',
+      borderRadius: '4px',
+      paddingBlock: '0.25em',
+      paddingInline: '0.5em',
+      cursor: 'pointer',
+      transition: 'all 200ms ease-in-out'
+    },
+    variants: {
+      color: {
+        ...Object.fromEntries(colorVariants.map((color) => [color, {}]))
+      },
+      size: {
+        small: {
+          fontSize: '0.875em'
+        },
+        medium: {
+          fontSize: '1em'
+        },
+        large: {
+          fontSize: '1.125em'
+        }
+      },
+      variant: {
+        ...Object.fromEntries(buttonVariants.map((variant) => [variant, {}]))
+      }
+    },
+    compoundVariants: colorVariants.flatMap((color) =>
+      buttonVariants.map((variant) => {
+        switch (variant) {
+          case 'outline':
+            return {
+              color,
+              variant,
+              css: {
+                border: '1px solid',
+                borderColor: `${color}.9`,
+                backgroundColor: 'transparent',
+                color: `${color}.9`,
+                _hover: {
+                  backgroundColor: `${color}.10`,
+                  color: `${color}.foreground`
+                },
+                _active: {
+                  backgroundColor: `color-mix(in srgb, {colors.${color}.9} 80%, {colors.${color}.1})`,
+                  color: `${color}.foreground`
+                },
+                _disabled: {
+                  backgroundColor: `color-mix(in srgb, {colors.${color}.9} 10%, transparent)`,
+                  color: `color-mix(in srgb, {colors.${color}.foreground} 40%, transparent)`,
+                  borderColor: `color-mix(in srgb, {colors.${color}.9} 10%, transparent)`,
+                  cursor: 'not-allowed',
+                  pointerEvents: 'none',
+                  _hover: {
+                    backgroundColor: `color-mix(in srgb, {colors.${color}.9} 10%, transparent)`,
+                    color: `${color}.4/50`
+                  }
+                }
+              }
+            }
+          case 'ghost':
+            return {
+              color,
+              variant,
+              css: {
+                border: 'none',
+                backgroundColor: 'transparent',
+                color: `${color}.9`,
+                _hover: {
+                  backgroundColor: `${color}.10`,
+                  color: `${color}.foreground`
+                },
+                _active: {
+                  backgroundColor: `color-mix(in srgb, {colors.${color}.9} 80%, {colors.${color}.1})`,
+                  color: `${color}.foreground`
+                },
+                _disabled: {
+                  backgroundColor: `color-mix(in srgb, {colors.${color}.9} 10%, transparent)`,
+                  color: `color-mix(in srgb, {colors.${color}.foreground} 40%, transparent)`,
+                  cursor: 'not-allowed',
+                  pointerEvents: 'none',
+                  _hover: {
+                    backgroundColor: `color-mix(in srgb, {colors.${color}.9} 10%, transparent)`
+                  }
+                }
+              }
+            }
+          default:
+            return {
+              color,
+              variant,
+              css: {
+                border: 'none',
+                backgroundColor: `${color}.9`,
+                color: `${color}.foreground`,
+                _hover: {
+                  backgroundColor: `${color}.10`,
+                  color: `${color}.foreground`
+                },
+                _active: {
+                  backgroundColor: `color-mix(in srgb, {colors.${color}.9} 80%, {colors.${color}.1})`,
+                  color: `${color}.foreground`
+                },
+                _disabled: {
+                  backgroundColor: `color-mix(in srgb, {colors.${color}.9} 40%, transparent)`,
+                  color: `color-mix(in srgb, {colors.${color}.foreground} 40%, transparent)`,
+                  cursor: 'not-allowed',
+                  pointerEvents: 'none',
+                  _hover: {
+                    backgroundColor: `color-mix(in srgb, {colors.${color}.9} 40%, transparent)`,
+                    color: `color-mix(in srgb, {colors.${color}.foreground} 40%, transparent)`
+                  }
+                }
+              }
+            }
+        }
+      })
+    ),
+    defaultVariants: {
+      color: 'neutral',
+      size: 'medium',
+      variant: 'solid'
+    }
+  })
+}
+export default buttonRecipe