feat: upgrade srjuggernaut-panda-preset and centralize theme config

src/components/ui/button.astro

@@ -0,0 +1,22 @@
+---
+import { cx } from '@styled-system/css'
+import {
+  type ButtonVariantProps,
+  button as buttonRecipe
+} from '@styled-system/recipes/button'
+import type { HTMLAttributes } from 'astro/types'
+import type { MergeOmitting } from '@/types/utilities'
+
+type ButtonProps = MergeOmitting<HTMLAttributes<'button'>, ButtonVariantProps>
+
+export type Props = ButtonProps
+
+const { class: className, ...props } = Astro.props
+
+const [buttonRecipeArgs, ButtonProps] = buttonRecipe.splitVariantProps(props)
+const buttonClass = buttonRecipe(buttonRecipeArgs)
+---
+
+<button {...ButtonProps} class={cx(buttonClass, className)}>
+  <slot />
+</button>

src/styles/container.ts

@@ -0,0 +1,13 @@
+import { css } from '@styled-system/css'
+
+export const containerClass = css({
+  width: '100%',
+  marginInline: 'auto',
+  maxWidth: {
+    sm: 'breakpoint-sm',
+    md: 'breakpoint-md',
+    lg: 'breakpoint-lg',
+    xl: 'breakpoint-xl',
+    '2xl': 'breakpoint-2xl'
+  }
+})

src/styles/theme.ts

@@ -0,0 +1,19 @@
+import type { ThemeConfig } from '@srjuggernaut-dev/srjuggernaut-panda-preset'
+
+export const breakpoints = {
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  '2xl': 1400
+} satisfies ThemeConfig['breakpoints']
+
+export const themeConfig: ThemeConfig = {
+  neutral: 'gray',
+  colorVariation: { dark: true, alpha: false, p3: false },
+  includeColors: ['teal', 'gray'],
+  semanticColors: { primary: 'teal' },
+  breakpoints
+}
+
+export default themeConfig

src/types/utilities.ts

@@ -0,0 +1,5 @@
+export type MergeOmitting<ReplaceableType, ReplacerType> = Omit<
+  ReplaceableType,
+  keyof ReplacerType
+> &
+  ReplacerType