Is it possible to update component sizes globally?

[t-rosa]

Hello, I would like to globally update the component sizes.

For example, I want to use the "sm" size on Input by default, like shadcn/ui, when you switch to "New York" mode, the size of the elements changes.

Is this possible, or do I have to fill in each element manually?

[cschroeter]

in ~/components/ui/primitives/input.tsx

import { ark } from '@ark-ui/react/factory'
import { styled } from 'styled-system/jsx'
import { input } from 'styled-system/recipes'
import type { ComponentProps } from 'styled-system/types'

export type InputProps = ComponentProps<typeof Input>
export const Input = styled(ark.input, input, { defaultProps: { size: 'sm' } })

Or as an alternative in panda.config.ts

import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  // ...
  theme: {
    extend: {
      recipes: {
        input: {
          defaultVariants: {
            size: 'sm',
          },
        },
      },
    },
  },
})

[t-rosa]

Perfect, thanks!