@tapie-kr/inspire-react/dist/esm/components/molecules/FormField/index.js

React Component Collection for INSPIRE

/* eslint-disable */
/*
 * INSPIRE : Creative Kit
 * React Component Collection for INSPIRE
 *
 * This file is generated automatically. Do not modify it manually
 * Generated at : 2025. 3. 4. 오후 6:18:13
 * @tapie-kr/inspire-react version: 0.2.15
 *
 * (c) 2025 TAPIE. All rights reserved.
 * MIT License
*/
import { jsxs, jsx } from 'react/jsx-runtime';
import { largeLabelWrapper, smallLabelWrapper, descriptionWrapper } from './styles.css.js';
import { colorVars } from '../../../lib/style/contract/color.css.js';
import { spacingVars } from '../../../lib/style/contract/component.css.js';
import { Label } from '../../atoms/Label/index.js';
import { Typography } from '../../foundations/Typography/index.js';
import { Box } from '../../miscellaneous/layout/Box/index.js';
import { VStack } from '../../miscellaneous/layout/VStack/index.js';
import { StackAlign } from '../../../lib/layout/types.js';
import { FormFieldSize } from './shared.js';

function FormField(props){const{label,isEssential,description,size=FormFieldSize.LARGE,fitContent=false,children}=props;const spacing=size===FormFieldSize.LARGE?spacingVars.micro:spacingVars.mini;const DescriptionText=size===FormFieldSize.LARGE?Typography.Petite:Typography.Tiny;return jsxs(VStack,{fullWidth:!fitContent,tag:"label",spacing:spacing,align:StackAlign.START,children:[jsx(Box,{fullWidth:true,className:size===FormFieldSize.LARGE?largeLabelWrapper:smallLabelWrapper,children:jsx(Label,{isEssential:isEssential,children:label})}),children,description&&jsx(Box,{fullWidth:true,className:descriptionWrapper,children:jsx(DescriptionText,{color:colorVars.content.muted,children:description})})]})}

export { FormField };