Fieldset

'use client'
import { ark } from '@ark-ui/react/factory'
import { Fieldset } from '@ark-ui/react/fieldset'
import type { ComponentProps } from 'react'
import { createStyleContext } from 'styled-system/jsx'
import { fieldset } from 'styled-system/recipes'

const { withProvider, withContext } = createStyleContext(fieldset)

export type RootProps = ComponentProps<typeof Root>
export const Root = withProvider(Fieldset.Root, 'root')
export const RootProvider = withProvider(Fieldset.RootProvider, 'root')
export const Legend = withContext(Fieldset.Legend, 'legend')
export const HelperText = withContext(Fieldset.HelperText, 'helperText')
export const ErrorText = withContext(Fieldset.ErrorText, 'errorText')
export const Content = withContext(ark.div, 'content')
export const Control = withContext(ark.div, 'control')

export { FieldsetContext as Context } from '@ark-ui/react/fieldset'

import { fieldsetAnatomy } from '@ark-ui/react/fieldset'
import { defineSlotRecipe } from '@pandacss/dev'

export const fieldset = defineSlotRecipe({
  className: 'fieldset',
  slots: fieldsetAnatomy.extendWith('content', 'control').keys(),
  base: {
    root: {
      display: 'flex',
      justifyContent: 'space-between',
      width: 'full',
      flexDirection: { base: 'column', md: 'row' },
      gap: { base: '5', md: '8' },
    },
    control: {
      maxW: 'xs',
      display: 'flex',
      flexDirection: 'column',
      width: 'full',
      gap: '1',
    },
    content: {
      display: 'flex',
      flexDirection: 'column',
      width: 'full',
      maxW: '2xl',
      gap: '4',
    },
    legend: {
      color: 'fg.default',
      fontWeight: 'semibold',
    },
    helperText: {
      color: 'fg.muted',
      textStyle: 'sm',
    },
    errorText: {
      display: 'inline-flex',
      alignItems: 'center',
      color: 'error',
      gap: '2',
      fontWeight: 'medium',
      textStyle: 'sm',
    },
  },
})