feat(templates): update to latest panda

packages/cli/src/index.ts

@@ -33,16 +33,7 @@ const main = async () => {
       async (argv) => {
         console.clear()
         const spinner = p.spinner()
-        p.intro(
-          `${color.bgCyan(
-            color.black(
-              ` Park UI v${
-                // biome-ignore lint/complexity/useLiteralKeys: <explanation>
-                process.env['npm_package_version']
-              }`,
-            ),
-          )}`,
-        )
+        p.intro(`${color.bgCyan(color.black(' Park UI '))}`)
 
         if (isEmpty(argv.components) && !argv.all) {
           p.note('You need to specify at least one component or use the --all flag', 'Error')

templates/react/next-js/package.json

@@ -11,15 +11,15 @@
   "dependencies": {
     "@ark-ui/react": "3.6.2",
     "@icons-pack/react-simple-icons": "9.6.0",
-    "lucide-react": "0.418.0",
+    "lucide-react": "0.419.0",
     "next": "14.1.4",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },
   "devDependencies": {
     "@pandacss/dev": "0.44.0",
-    "@park-ui/panda-preset": "0.41.0",
-    "@types/node": "22.0.1",
+    "@park-ui/panda-preset": "0.42.0",
+    "@types/node": "22.0.2",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "eslint": "8.56.0",

templates/react/next-js/src/components/ui/styled/field.tsx

@@ -1,7 +1,8 @@
 'use client'
 import type { Assign } from '@ark-ui/react'
 import { Field } from '@ark-ui/react/field'
-import { type FieldVariantProps, field } from 'styled-system/recipes'
+import { styled } from 'styled-system/jsx'
+import { type FieldVariantProps, field, input, textarea } from 'styled-system/recipes'
 import type { ComponentProps, HTMLStyledProps } from 'styled-system/types'
 import { createStyleContext } from './utils/create-style-context'
 
@@ -29,11 +30,6 @@ export const HelperText = withContext<
   Assign<HTMLStyledProps<'span'>, Field.HelperTextBaseProps>
 >(Field.HelperText, 'helperText')
 
-export const Input = withContext<
-  HTMLInputElement,
-  Assign<HTMLStyledProps<'input'>, Field.InputBaseProps>
->(Field.Input, 'input')
-
 export const Label = withContext<
   HTMLLabelElement,
   Assign<HTMLStyledProps<'label'>, Field.LabelBaseProps>
@@ -44,9 +40,10 @@ export const Select = withContext<
   Assign<HTMLStyledProps<'select'>, Field.SelectBaseProps>
 >(Field.Select, 'select')
 
-export const Textarea = withContext<
-  HTMLTextAreaElement,
-  Assign<HTMLStyledProps<'textarea'>, Field.TextareaBaseProps>
->(Field.Textarea, 'textarea')
+export type InputProps = ComponentProps<typeof Input>
+export const Input = styled(Field.Input, input)
+
+export type TextareaProps = ComponentProps<typeof Textarea>
+export const Textarea = styled(Field.Textarea, textarea)
 
 export { FieldContext as Context } from '@ark-ui/react/field'

templates/react/next-js/src/components/ui/styled/utils/create-style-context.tsx

@@ -8,14 +8,18 @@ import {
   useContext,
 } from 'react'
 import { cx } from 'styled-system/css'
-import { styled } from 'styled-system/jsx'
+import { type StyledComponent, isCssProperty, styled } from 'styled-system/jsx'
 
 type Props = Record<string, unknown>
 type Recipe = {
   (props?: Props): Props
   splitVariantProps: (props: Props) => [Props, Props]
 }
 type Slot<R extends Recipe> = keyof ReturnType<R>
+type Options = { forwardProps?: string[] }
+
+const shouldForwardProp = (prop: string, variantKeys: string[], options: Options = {}) =>
+  options.forwardProps?.includes(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop))
 
 export const createStyleContext = <R extends Recipe>(recipe: R) => {
   const StyleContext = createContext<Record<Slot<R>, string> | null>(null)
@@ -37,8 +41,15 @@ export const createStyleContext = <R extends Recipe>(recipe: R) => {
   const withProvider = <T, P extends { className?: string | undefined }>(
     Component: ElementType,
     slot: Slot<R>,
+    options?: Options,
   ): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> => {
-    const StyledComponent = styled(Component)
+    const StyledComponent = styled(
+      Component,
+      {},
+      {
+        shouldForwardProp: (prop, variantKeys) => shouldForwardProp(prop, variantKeys, options),
+      },
+    ) as StyledComponent<ElementType>
     const StyledSlotProvider = forwardRef<T, P>((props, ref) => {
       const [variantProps, otherProps] = recipe.splitVariantProps(props)
       const slotStyles = recipe(variantProps) as Record<Slot<R>, string>

templates/solid/solid-start/package.json

@@ -22,8 +22,8 @@
   },
   "devDependencies": {
     "@pandacss/dev": "0.44.0",
-    "@park-ui/panda-preset": "0.41.0",
-    "typescript": "4.5.4",
+    "@park-ui/panda-preset": "0.42.0",
+    "typescript": "5.5.4",
     "vite-tsconfig-paths": "4.3.2"
   }
 }