@tipp/ui 2.3.20 → 2.3.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/app/index.cjs +5 -2
- package/dist/app/index.cjs.map +1 -1
- package/dist/app/index.js +7 -7
- package/dist/app/platform/coach-question-list.cjs +5 -2
- package/dist/app/platform/coach-question-list.cjs.map +1 -1
- package/dist/app/platform/coach-question-list.js +1 -1
- package/dist/app/platform/contents-card.cjs +5 -2
- package/dist/app/platform/contents-card.cjs.map +1 -1
- package/dist/app/platform/contents-card.js +1 -1
- package/dist/app/platform/edit-coaching-time.cjs +5 -2
- package/dist/app/platform/edit-coaching-time.cjs.map +1 -1
- package/dist/app/platform/edit-coaching-time.js +5 -5
- package/dist/app/platform/edit-service-type.cjs +5 -2
- package/dist/app/platform/edit-service-type.cjs.map +1 -1
- package/dist/app/platform/edit-service-type.js +4 -4
- package/dist/app/platform/goal-manage-card-edit.cjs +5 -2
- package/dist/app/platform/goal-manage-card-edit.cjs.map +1 -1
- package/dist/app/platform/goal-manage-card-edit.js +5 -5
- package/dist/app/platform/goal-manage-card-read.cjs +5 -2
- package/dist/app/platform/goal-manage-card-read.cjs.map +1 -1
- package/dist/app/platform/goal-manage-card-read.js +1 -1
- package/dist/app/platform/on-offline-radio-card.cjs +5 -2
- package/dist/app/platform/on-offline-radio-card.cjs.map +1 -1
- package/dist/app/platform/on-offline-radio-card.js +4 -4
- package/dist/app/platform/report-card.cjs +5 -2
- package/dist/app/platform/report-card.cjs.map +1 -1
- package/dist/app/platform/report-card.js +1 -1
- package/dist/app/platform/reservation-card.cjs +5 -2
- package/dist/app/platform/reservation-card.cjs.map +1 -1
- package/dist/app/platform/reservation-card.js +4 -4
- package/dist/app/platform/session-card.cjs +5 -2
- package/dist/app/platform/session-card.cjs.map +1 -1
- package/dist/app/platform/session-card.js +6 -6
- package/dist/app/platform/session-review-simple-read.cjs +5 -2
- package/dist/app/platform/session-review-simple-read.cjs.map +1 -1
- package/dist/app/platform/session-review-simple-read.js +1 -1
- package/dist/app/platform/userInfos/coaching-customer-info/index.cjs +5 -2
- package/dist/app/platform/userInfos/coaching-customer-info/index.cjs.map +1 -1
- package/dist/app/platform/userInfos/coaching-customer-info/index.js +1 -1
- package/dist/app/platform/userInfos/coaching-customer-info/large.cjs +5 -2
- package/dist/app/platform/userInfos/coaching-customer-info/large.cjs.map +1 -1
- package/dist/app/platform/userInfos/coaching-customer-info/large.js +1 -1
- package/dist/app/platform/userInfos/coaching-customer-info/medium.cjs +5 -2
- package/dist/app/platform/userInfos/coaching-customer-info/medium.cjs.map +1 -1
- package/dist/app/platform/userInfos/coaching-customer-info/medium.js +1 -1
- package/dist/app/platform/userInfos/coaching-customer-info/small.cjs +5 -2
- package/dist/app/platform/userInfos/coaching-customer-info/small.cjs.map +1 -1
- package/dist/app/platform/userInfos/coaching-customer-info/small.js +1 -1
- package/dist/app/platform/userInfos/session-user-info-detail.cjs +5 -2
- package/dist/app/platform/userInfos/session-user-info-detail.cjs.map +1 -1
- package/dist/app/platform/userInfos/session-user-info-detail.js +1 -1
- package/dist/app/platform/userInfos/utils.cjs +5 -2
- package/dist/app/platform/userInfos/utils.cjs.map +1 -1
- package/dist/app/platform/userInfos/utils.js +1 -1
- package/dist/atoms/index.cjs +5 -2
- package/dist/atoms/index.cjs.map +1 -1
- package/dist/atoms/index.js +1 -1
- package/dist/chunk-3C6HB5HA.js +144 -0
- package/dist/chunk-3C6HB5HA.js.map +1 -0
- package/dist/chunk-3CJZYFG3.js +174 -0
- package/dist/chunk-3CJZYFG3.js.map +1 -0
- package/dist/chunk-4U6DFH7Z.js +50 -0
- package/dist/chunk-4U6DFH7Z.js.map +1 -0
- package/dist/chunk-5IIGHOLB.js +196 -0
- package/dist/chunk-5IIGHOLB.js.map +1 -0
- package/dist/chunk-7TOQOZH7.js +245 -0
- package/dist/chunk-7TOQOZH7.js.map +1 -0
- package/dist/chunk-7ZH2GXUS.js +174 -0
- package/dist/chunk-7ZH2GXUS.js.map +1 -0
- package/dist/chunk-AC6MUU6D.js +146 -0
- package/dist/chunk-AC6MUU6D.js.map +1 -0
- package/dist/chunk-AGTBJUYD.js +50 -0
- package/dist/chunk-AGTBJUYD.js.map +1 -0
- package/dist/chunk-BSRPUECS.js +144 -0
- package/dist/chunk-BSRPUECS.js.map +1 -0
- package/dist/chunk-C24L6Z2K.js +69 -0
- package/dist/chunk-C24L6Z2K.js.map +1 -0
- package/dist/chunk-CAYZTABQ.js +144 -0
- package/dist/chunk-CAYZTABQ.js.map +1 -0
- package/dist/chunk-CKQYG7TZ.js +245 -0
- package/dist/chunk-CKQYG7TZ.js.map +1 -0
- package/dist/chunk-CLLBSWGX.js +145 -0
- package/dist/chunk-CLLBSWGX.js.map +1 -0
- package/dist/chunk-CNJT7KEY.js +218 -0
- package/dist/chunk-CNJT7KEY.js.map +1 -0
- package/dist/chunk-DNIPGDRU.js +145 -0
- package/dist/chunk-DNIPGDRU.js.map +1 -0
- package/dist/chunk-DPPRU4D3.js +174 -0
- package/dist/chunk-DPPRU4D3.js.map +1 -0
- package/dist/chunk-DZ6LWD2X.js +174 -0
- package/dist/chunk-DZ6LWD2X.js.map +1 -0
- package/dist/chunk-DZCLAKSB.js +218 -0
- package/dist/chunk-DZCLAKSB.js.map +1 -0
- package/dist/chunk-EDJIZYNL.js +89 -0
- package/dist/chunk-EDJIZYNL.js.map +1 -0
- package/dist/chunk-EE4HLQGV.js +145 -0
- package/dist/chunk-EE4HLQGV.js.map +1 -0
- package/dist/chunk-GJ4GPOIC.js +144 -0
- package/dist/chunk-GJ4GPOIC.js.map +1 -0
- package/dist/chunk-GLZ66EYJ.js +146 -0
- package/dist/chunk-GLZ66EYJ.js.map +1 -0
- package/dist/chunk-H7IE4ZJG.js +174 -0
- package/dist/chunk-H7IE4ZJG.js.map +1 -0
- package/dist/chunk-I7E2IWC4.js +149 -0
- package/dist/chunk-I7E2IWC4.js.map +1 -0
- package/dist/chunk-IDY6K633.js +145 -0
- package/dist/chunk-IDY6K633.js.map +1 -0
- package/dist/chunk-IKJLNJ64.js +145 -0
- package/dist/chunk-IKJLNJ64.js.map +1 -0
- package/dist/chunk-IW7G7LMH.js +245 -0
- package/dist/chunk-IW7G7LMH.js.map +1 -0
- package/dist/chunk-JFM62CXW.js +50 -0
- package/dist/chunk-JFM62CXW.js.map +1 -0
- package/dist/chunk-KC6AEXYR.js +174 -0
- package/dist/chunk-KC6AEXYR.js.map +1 -0
- package/dist/chunk-KOMV6H3L.js +144 -0
- package/dist/chunk-KOMV6H3L.js.map +1 -0
- package/dist/chunk-KVO5ZNRN.js +50 -0
- package/dist/chunk-KVO5ZNRN.js.map +1 -0
- package/dist/chunk-KZVNK5NO.js +145 -0
- package/dist/chunk-KZVNK5NO.js.map +1 -0
- package/dist/chunk-L7ATTNZ2.js +174 -0
- package/dist/chunk-L7ATTNZ2.js.map +1 -0
- package/dist/chunk-LTJELIXX.js +149 -0
- package/dist/chunk-LTJELIXX.js.map +1 -0
- package/dist/chunk-LWVP3RG6.js +212 -0
- package/dist/chunk-LWVP3RG6.js.map +1 -0
- package/dist/chunk-MG3MDWHJ.js +245 -0
- package/dist/chunk-MG3MDWHJ.js.map +1 -0
- package/dist/chunk-MQXF7JLT.js +145 -0
- package/dist/chunk-MQXF7JLT.js.map +1 -0
- package/dist/chunk-N5B7ANSJ.js +145 -0
- package/dist/chunk-N5B7ANSJ.js.map +1 -0
- package/dist/chunk-OSEENHZJ.js +50 -0
- package/dist/chunk-OSEENHZJ.js.map +1 -0
- package/dist/chunk-P4HTQBD6.js +245 -0
- package/dist/chunk-P4HTQBD6.js.map +1 -0
- package/dist/chunk-P74G3XSY.js +50 -0
- package/dist/chunk-P74G3XSY.js.map +1 -0
- package/dist/chunk-PTYFKWCC.js +145 -0
- package/dist/chunk-PTYFKWCC.js.map +1 -0
- package/dist/chunk-PYQQZYJL.js +145 -0
- package/dist/chunk-PYQQZYJL.js.map +1 -0
- package/dist/chunk-Q267B6E6.js +146 -0
- package/dist/chunk-Q267B6E6.js.map +1 -0
- package/dist/chunk-QDC3LFHS.js +149 -0
- package/dist/chunk-QDC3LFHS.js.map +1 -0
- package/dist/chunk-RCTE4E7R.js +144 -0
- package/dist/chunk-RCTE4E7R.js.map +1 -0
- package/dist/chunk-S5M6VXKE.js +144 -0
- package/dist/chunk-S5M6VXKE.js.map +1 -0
- package/dist/chunk-SB2VNB4J.js +145 -0
- package/dist/chunk-SB2VNB4J.js.map +1 -0
- package/dist/chunk-SJ7MGKPR.js +245 -0
- package/dist/chunk-SJ7MGKPR.js.map +1 -0
- package/dist/chunk-SM22LXE7.js +145 -0
- package/dist/chunk-SM22LXE7.js.map +1 -0
- package/dist/chunk-SP4QJ7QT.js +69 -0
- package/dist/chunk-SP4QJ7QT.js.map +1 -0
- package/dist/chunk-VGHBEX6O.js +145 -0
- package/dist/chunk-VGHBEX6O.js.map +1 -0
- package/dist/chunk-VJ7AGB7Y.js +245 -0
- package/dist/chunk-VJ7AGB7Y.js.map +1 -0
- package/dist/chunk-VNJ3VOSY.js +50 -0
- package/dist/chunk-VNJ3VOSY.js.map +1 -0
- package/dist/chunk-WZLD5ZHV.js +245 -0
- package/dist/chunk-WZLD5ZHV.js.map +1 -0
- package/dist/chunk-Z4NLUDDL.js +145 -0
- package/dist/chunk-Z4NLUDDL.js.map +1 -0
- package/dist/chunk-ZOMXQCLY.js +245 -0
- package/dist/chunk-ZOMXQCLY.js.map +1 -0
- package/dist/chunk-ZVWUCJMB.js +146 -0
- package/dist/chunk-ZVWUCJMB.js.map +1 -0
- package/dist/context/dynamic-form-context.cjs +5 -2
- package/dist/context/dynamic-form-context.cjs.map +1 -1
- package/dist/context/dynamic-form-context.js +2 -2
- package/dist/context/index.cjs +5 -2
- package/dist/context/index.cjs.map +1 -1
- package/dist/context/index.js +2 -2
- package/dist/index.cjs +44 -14
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +7 -7
- package/dist/molecules/dynamic-field.cjs +5 -2
- package/dist/molecules/dynamic-field.cjs.map +1 -1
- package/dist/molecules/dynamic-field.js +3 -3
- package/dist/molecules/dynamic-form.cjs +44 -14
- package/dist/molecules/dynamic-form.cjs.map +1 -1
- package/dist/molecules/dynamic-form.js +4 -4
- package/dist/molecules/form/form.cjs +5 -2
- package/dist/molecules/form/form.cjs.map +1 -1
- package/dist/molecules/form/form.js +1 -1
- package/dist/molecules/form/index.cjs +5 -2
- package/dist/molecules/form/index.cjs.map +1 -1
- package/dist/molecules/form/index.js +1 -1
- package/dist/molecules/index.cjs +44 -14
- package/dist/molecules/index.cjs.map +1 -1
- package/dist/molecules/index.js +4 -4
- package/package.json +1 -1
- package/src/molecules/dynamic-form.tsx +44 -15
- package/src/molecules/form/form.tsx +10 -2
|
@@ -185,7 +185,10 @@ function HeadingLabel(props) {
|
|
|
185
185
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Heading2, __spreadProps(__spreadValues({ variant: "heading5" }, props), { children: props.children }));
|
|
186
186
|
}
|
|
187
187
|
function CaptionLabel(props) {
|
|
188
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Typo, __spreadProps(__spreadValues({ color: "gray", variant: "caption" }, props), { children: props.children }));
|
|
188
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Typo, __spreadProps(__spreadValues({ color: "gray", variant: "caption", weight: "bold" }, props), { children: props.children }));
|
|
189
|
+
}
|
|
190
|
+
function BodyLabel(props) {
|
|
191
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Typo, __spreadProps(__spreadValues({ variant: "body", weight: "bold" }, props), { children: props.children }));
|
|
189
192
|
}
|
|
190
193
|
var Label2 = (0, import_react3.forwardRef)(
|
|
191
194
|
(_a, ref) => {
|
|
@@ -198,7 +201,7 @@ var Label2 = (0, import_react3.forwardRef)(
|
|
|
198
201
|
return CaptionLabel;
|
|
199
202
|
case "body":
|
|
200
203
|
default:
|
|
201
|
-
return
|
|
204
|
+
return BodyLabel;
|
|
202
205
|
}
|
|
203
206
|
}, [variant]);
|
|
204
207
|
const fieldProps = (0, import_react3.useContext)(FieldContext);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/molecules/form/form.tsx","../../../src/atoms/heading.tsx","../../../src/utils/map-with-responsive.ts","../../../src/atoms/typo.tsx"],"sourcesContent":["import * as RadixForm from '@radix-ui/react-form';\nimport React, { createContext, forwardRef, useContext, useMemo } from 'react';\nimport type { HeadingProps } from '@radix-ui/themes';\nimport { Heading } from '../../atoms/heading';\nimport type { TypoProps } from '../../atoms/typo';\nimport { Typo } from '../../atoms/typo';\n\nconst Root = forwardRef<HTMLFormElement, RadixForm.FormProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <RadixForm.Root\n {...rest}\n className={`FormRoot ${className || ''}`}\n ref={ref}\n >\n {children}\n </RadixForm.Root>\n );\n }\n);\n\nRoot.displayName = 'FORM_ROOT';\n\nexport type FormFieldProps = RadixForm.FormFieldProps & { required?: boolean };\n\nconst FieldContext = createContext<FormFieldProps>({\n name: '',\n});\n\nconst Field = forwardRef<HTMLDivElement, FormFieldProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <RadixForm.Field\n {...rest}\n className={`FormField ${className || ''}`}\n ref={ref}\n >\n <FieldContext.Provider value={rest}>{children}</FieldContext.Provider>\n </RadixForm.Field>\n );\n }\n);\nField.displayName = 'FORM_FIELD';\n\nexport type FormLabelProps = RadixForm.FormLabelProps & {\n /** label의 타입을 지정 */\n variant?: 'title' | 'body' | 'caption';\n};\n\nfunction HeadingLabel(props: HeadingProps): React.ReactNode {\n return (\n <Heading variant=\"heading5\" {...props}>\n {props.children}\n </Heading>\n );\n}\n\nfunction CaptionLabel(props: TypoProps): React.ReactNode {\n return (\n <Typo color=\"gray\" variant=\"caption\" {...props}>\n {props.children}\n </Typo>\n );\n}\n\nconst Label = forwardRef<HTMLLabelElement, FormLabelProps>(\n ({ children, className, variant, ...rest }, ref) => {\n const Comp = useMemo(() => {\n switch (variant) {\n case 'title':\n return HeadingLabel;\n case 'caption':\n return CaptionLabel;\n case 'body':\n default:\n return Typo;\n }\n }, [variant]);\n\n const fieldProps = useContext(FieldContext);\n return (\n <RadixForm.Label\n {...rest}\n asChild\n className={`FormLabel ${className || ''}`}\n ref={ref}\n >\n <Comp>\n {children}\n {fieldProps.required ? (\n <Typo as=\"span\" color=\"tomato\">\n {` *`}\n </Typo>\n ) : null}\n </Comp>\n </RadixForm.Label>\n );\n }\n);\nLabel.displayName = 'FORM_Label';\n\nconst Message = forwardRef<HTMLSpanElement, RadixForm.FormMessageProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <RadixForm.Message\n {...rest}\n asChild\n className={`FormMessage ${className || ''}`}\n ref={ref}\n >\n <Typo color=\"red\">{children}</Typo>\n </RadixForm.Message>\n );\n }\n);\nMessage.displayName = 'FORM_Message';\n\ntype ControlProps = Omit<RadixForm.FormControlProps, 'required'>;\nconst Control = forwardRef<HTMLInputElement, ControlProps>(\n ({ className, ...rest }, ref) => {\n const fieldProps = useContext(FieldContext);\n return (\n <RadixForm.Control\n {...rest}\n className={`FormControl ${className || ''}`}\n ref={ref}\n required={fieldProps.required}\n />\n );\n }\n);\nControl.displayName = 'FORM_Control';\n\ninterface FormItemProps extends FormFieldProps {\n children: React.ReactNode;\n label: string;\n labelVariant?: FormLabelProps['variant'];\n errorMessage?: string;\n}\n\nexport function FormItem({\n label,\n labelVariant,\n children,\n errorMessage,\n ...fieldProps\n}: FormItemProps): React.ReactNode {\n return (\n <Form.Field {...fieldProps}>\n <Form.Label variant={labelVariant}>{label}</Form.Label>\n {children}\n <Form.Message forceMatch={Boolean(errorMessage)}>\n {errorMessage}\n </Form.Message>\n </Form.Field>\n );\n}\n\nexport const Form = {\n Root,\n Field,\n Label,\n Message,\n Control: RadixForm.Control,\n Submit: RadixForm.Submit,\n FormItem,\n};\n","import {\n Heading as RadixHeading,\n type HeadingProps as RadixHeadingProps,\n} from '@radix-ui/themes';\nimport type { Responsive } from '@radix-ui/themes/props';\nimport { useMemo } from 'react';\nimport { mapWithResponsive } from '@/utils/map-with-responsive';\n\nexport { Heading as RadixHeading } from '@radix-ui/themes';\ntype HeadingVariant =\n | 'heading1'\n | 'heading2'\n | 'heading3'\n | 'heading4'\n | 'heading5';\nexport type HeadingProps = RadixHeadingProps & {\n variant?: Responsive<HeadingVariant>;\n};\n\ntype HeadingSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';\n\nconst mapVariant = (variant?: HeadingVariant): HeadingSize | undefined => {\n switch (variant) {\n case 'heading1':\n return '7';\n case 'heading2':\n return '6';\n case 'heading3':\n return '5';\n case 'heading4':\n return '4';\n case 'heading5':\n return '3';\n default:\n return undefined;\n }\n};\n\nexport function Heading(props: HeadingProps): React.ReactNode {\n const { size, children, variant, ...rest } = props;\n const radixSize = useMemo<RadixHeadingProps['size']>(() => {\n return variant\n ? mapWithResponsive({\n value: variant,\n mapFn: mapVariant,\n })\n : size;\n \n }, [size, variant]);\n\n return (\n <RadixHeading {...rest} size={radixSize}>\n {children}\n </RadixHeading>\n );\n}\n","import type { Breakpoint, Responsive } from \"@radix-ui/themes/props\";\n\nexport const mapWithResponsive = <T extends string,K extends string>(\n args: {value: Responsive<T>, mapFn: (value?:T)=>K |undefined}\n): Responsive<K> | undefined => {\n const {value, mapFn} = args;\n if(typeof value === 'string'){\n return mapFn(value);\n };\n \n if(typeof value === 'object'){\n const newObj: Partial<Record<Breakpoint, K>> = {};\n let key: Breakpoint;\n for(key in value){\n newObj[key] = mapFn(value[key]);\n }\n return newObj;\n }\n return value;\n};\n","import type { TextProps as RadixTextProps } from '@radix-ui/themes';\nimport type { Responsive } from '@radix-ui/themes/props';\nimport { Text as RadixText } from '@radix-ui/themes';\nimport React, { useMemo, forwardRef } from 'react';\nimport { mapWithResponsive } from '@/utils/map-with-responsive';\n\nexport type TypoProps = RadixTextProps & {\n variant?: Responsive<'body' | 'caption' | 'subtitle'>;\n};\n\nexport const Typo = forwardRef<HTMLSpanElement, TypoProps>(\n (props: TypoProps, ref): React.ReactNode => {\n const { size, variant, children, ...rest } = props;\n\n const radixSize = useMemo<RadixTextProps['size']>(() => {\n if (size !== undefined) return size;\n\n if (variant === undefined) return '2';\n\n return mapWithResponsive({\n value: variant,\n mapFn: (variantValue?: 'body' | 'caption' | 'subtitle') => {\n switch (variantValue) {\n case 'caption':\n return '1';\n case 'subtitle':\n return '3';\n case 'body':\n default:\n return '2';\n }\n },\n });\n }, [size, variant]);\n\n return (\n <RadixText {...rest} ref={ref} size={radixSize}>\n {children}\n </RadixText>\n );\n }\n);\n\nTypo.displayName = 'Typo';\n"],"mappings":"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","names":["import_react","import_themes","Heading","RadixHeading","import_themes","import_react","import_jsx_runtime","RadixText","import_jsx_runtime","Root","Field","Heading","Label","Message","Control"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/molecules/form/form.tsx","../../../src/atoms/heading.tsx","../../../src/utils/map-with-responsive.ts","../../../src/atoms/typo.tsx"],"sourcesContent":["import * as RadixForm from '@radix-ui/react-form';\nimport React, { createContext, forwardRef, useContext, useMemo } from 'react';\nimport type { HeadingProps } from '@radix-ui/themes';\nimport { Heading } from '../../atoms/heading';\nimport type { TypoProps } from '../../atoms/typo';\nimport { Typo } from '../../atoms/typo';\n\nconst Root = forwardRef<HTMLFormElement, RadixForm.FormProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <RadixForm.Root\n {...rest}\n className={`FormRoot ${className || ''}`}\n ref={ref}\n >\n {children}\n </RadixForm.Root>\n );\n }\n);\n\nRoot.displayName = 'FORM_ROOT';\n\nexport type FormFieldProps = RadixForm.FormFieldProps & { required?: boolean };\n\nconst FieldContext = createContext<FormFieldProps>({\n name: '',\n});\n\nconst Field = forwardRef<HTMLDivElement, FormFieldProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <RadixForm.Field\n {...rest}\n className={`FormField ${className || ''}`}\n ref={ref}\n >\n <FieldContext.Provider value={rest}>{children}</FieldContext.Provider>\n </RadixForm.Field>\n );\n }\n);\nField.displayName = 'FORM_FIELD';\n\nexport type FormLabelProps = RadixForm.FormLabelProps & {\n /** label의 타입을 지정 */\n variant?: 'title' | 'body' | 'caption';\n};\n\nfunction HeadingLabel(props: HeadingProps): React.ReactNode {\n return (\n <Heading variant=\"heading5\" {...props}>\n {props.children}\n </Heading>\n );\n}\n\nfunction CaptionLabel(props: TypoProps): React.ReactNode {\n return (\n <Typo color=\"gray\" variant=\"caption\" weight=\"bold\" {...props}>\n {props.children}\n </Typo>\n );\n}\n\nfunction BodyLabel(props: TypoProps): React.ReactNode {\n return (\n <Typo variant=\"body\" weight=\"bold\" {...props}>\n {props.children}\n </Typo>\n );\n}\n\nconst Label = forwardRef<HTMLLabelElement, FormLabelProps>(\n ({ children, className, variant, ...rest }, ref) => {\n const Comp = useMemo(() => {\n switch (variant) {\n case 'title':\n return HeadingLabel;\n case 'caption':\n return CaptionLabel;\n case 'body':\n default:\n return BodyLabel;\n }\n }, [variant]);\n\n const fieldProps = useContext(FieldContext);\n return (\n <RadixForm.Label\n {...rest}\n asChild\n className={`FormLabel ${className || ''}`}\n ref={ref}\n >\n <Comp>\n {children}\n {fieldProps.required ? (\n <Typo as=\"span\" color=\"tomato\">\n {` *`}\n </Typo>\n ) : null}\n </Comp>\n </RadixForm.Label>\n );\n }\n);\nLabel.displayName = 'FORM_Label';\n\nconst Message = forwardRef<HTMLSpanElement, RadixForm.FormMessageProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <RadixForm.Message\n {...rest}\n asChild\n className={`FormMessage ${className || ''}`}\n ref={ref}\n >\n <Typo color=\"red\">{children}</Typo>\n </RadixForm.Message>\n );\n }\n);\nMessage.displayName = 'FORM_Message';\n\ntype ControlProps = Omit<RadixForm.FormControlProps, 'required'>;\nconst Control = forwardRef<HTMLInputElement, ControlProps>(\n ({ className, ...rest }, ref) => {\n const fieldProps = useContext(FieldContext);\n return (\n <RadixForm.Control\n {...rest}\n className={`FormControl ${className || ''}`}\n ref={ref}\n required={fieldProps.required}\n />\n );\n }\n);\nControl.displayName = 'FORM_Control';\n\ninterface FormItemProps extends FormFieldProps {\n children: React.ReactNode;\n label: string;\n labelVariant?: FormLabelProps['variant'];\n errorMessage?: string;\n}\n\nexport function FormItem({\n label,\n labelVariant,\n children,\n errorMessage,\n ...fieldProps\n}: FormItemProps): React.ReactNode {\n return (\n <Form.Field {...fieldProps}>\n <Form.Label variant={labelVariant}>{label}</Form.Label>\n {children}\n <Form.Message forceMatch={Boolean(errorMessage)}>\n {errorMessage}\n </Form.Message>\n </Form.Field>\n );\n}\n\nexport const Form = {\n Root,\n Field,\n Label,\n Message,\n Control: RadixForm.Control,\n Submit: RadixForm.Submit,\n FormItem,\n};\n","import {\n Heading as RadixHeading,\n type HeadingProps as RadixHeadingProps,\n} from '@radix-ui/themes';\nimport type { Responsive } from '@radix-ui/themes/props';\nimport { useMemo } from 'react';\nimport { mapWithResponsive } from '@/utils/map-with-responsive';\n\nexport { Heading as RadixHeading } from '@radix-ui/themes';\ntype HeadingVariant =\n | 'heading1'\n | 'heading2'\n | 'heading3'\n | 'heading4'\n | 'heading5';\nexport type HeadingProps = RadixHeadingProps & {\n variant?: Responsive<HeadingVariant>;\n};\n\ntype HeadingSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';\n\nconst mapVariant = (variant?: HeadingVariant): HeadingSize | undefined => {\n switch (variant) {\n case 'heading1':\n return '7';\n case 'heading2':\n return '6';\n case 'heading3':\n return '5';\n case 'heading4':\n return '4';\n case 'heading5':\n return '3';\n default:\n return undefined;\n }\n};\n\nexport function Heading(props: HeadingProps): React.ReactNode {\n const { size, children, variant, ...rest } = props;\n const radixSize = useMemo<RadixHeadingProps['size']>(() => {\n return variant\n ? mapWithResponsive({\n value: variant,\n mapFn: mapVariant,\n })\n : size;\n \n }, [size, variant]);\n\n return (\n <RadixHeading {...rest} size={radixSize}>\n {children}\n </RadixHeading>\n );\n}\n","import type { Breakpoint, Responsive } from \"@radix-ui/themes/props\";\n\nexport const mapWithResponsive = <T extends string,K extends string>(\n args: {value: Responsive<T>, mapFn: (value?:T)=>K |undefined}\n): Responsive<K> | undefined => {\n const {value, mapFn} = args;\n if(typeof value === 'string'){\n return mapFn(value);\n };\n \n if(typeof value === 'object'){\n const newObj: Partial<Record<Breakpoint, K>> = {};\n let key: Breakpoint;\n for(key in value){\n newObj[key] = mapFn(value[key]);\n }\n return newObj;\n }\n return value;\n};\n","import type { TextProps as RadixTextProps } from '@radix-ui/themes';\nimport type { Responsive } from '@radix-ui/themes/props';\nimport { Text as RadixText } from '@radix-ui/themes';\nimport React, { useMemo, forwardRef } from 'react';\nimport { mapWithResponsive } from '@/utils/map-with-responsive';\n\nexport type TypoProps = RadixTextProps & {\n variant?: Responsive<'body' | 'caption' | 'subtitle'>;\n};\n\nexport const Typo = forwardRef<HTMLSpanElement, TypoProps>(\n (props: TypoProps, ref): React.ReactNode => {\n const { size, variant, children, ...rest } = props;\n\n const radixSize = useMemo<RadixTextProps['size']>(() => {\n if (size !== undefined) return size;\n\n if (variant === undefined) return '2';\n\n return mapWithResponsive({\n value: variant,\n mapFn: (variantValue?: 'body' | 'caption' | 'subtitle') => {\n switch (variantValue) {\n case 'caption':\n return '1';\n case 'subtitle':\n return '3';\n case 'body':\n default:\n return '2';\n }\n },\n });\n }, [size, variant]);\n\n return (\n <RadixText {...rest} ref={ref} size={radixSize}>\n {children}\n </RadixText>\n );\n }\n);\n\nTypo.displayName = 'Typo';\n"],"mappings":"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","names":["import_react","import_themes","Heading","RadixHeading","import_themes","import_react","import_jsx_runtime","RadixText","import_jsx_runtime","Root","Field","Heading","Label","Message","Control"]}
|
|
@@ -187,7 +187,10 @@ function HeadingLabel(props) {
|
|
|
187
187
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Heading2, __spreadProps(__spreadValues({ variant: "heading5" }, props), { children: props.children }));
|
|
188
188
|
}
|
|
189
189
|
function CaptionLabel(props) {
|
|
190
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Typo, __spreadProps(__spreadValues({ color: "gray", variant: "caption" }, props), { children: props.children }));
|
|
190
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Typo, __spreadProps(__spreadValues({ color: "gray", variant: "caption", weight: "bold" }, props), { children: props.children }));
|
|
191
|
+
}
|
|
192
|
+
function BodyLabel(props) {
|
|
193
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Typo, __spreadProps(__spreadValues({ variant: "body", weight: "bold" }, props), { children: props.children }));
|
|
191
194
|
}
|
|
192
195
|
var Label2 = (0, import_react3.forwardRef)(
|
|
193
196
|
(_a, ref) => {
|
|
@@ -200,7 +203,7 @@ var Label2 = (0, import_react3.forwardRef)(
|
|
|
200
203
|
return CaptionLabel;
|
|
201
204
|
case "body":
|
|
202
205
|
default:
|
|
203
|
-
return
|
|
206
|
+
return BodyLabel;
|
|
204
207
|
}
|
|
205
208
|
}, [variant]);
|
|
206
209
|
const fieldProps = (0, import_react3.useContext)(FieldContext);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/molecules/form/index.ts","../../../src/molecules/form/form.tsx","../../../src/atoms/heading.tsx","../../../src/utils/map-with-responsive.ts","../../../src/atoms/typo.tsx"],"sourcesContent":["export * from './form';\n","import * as RadixForm from '@radix-ui/react-form';\nimport React, { createContext, forwardRef, useContext, useMemo } from 'react';\nimport type { HeadingProps } from '@radix-ui/themes';\nimport { Heading } from '../../atoms/heading';\nimport type { TypoProps } from '../../atoms/typo';\nimport { Typo } from '../../atoms/typo';\n\nconst Root = forwardRef<HTMLFormElement, RadixForm.FormProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <RadixForm.Root\n {...rest}\n className={`FormRoot ${className || ''}`}\n ref={ref}\n >\n {children}\n </RadixForm.Root>\n );\n }\n);\n\nRoot.displayName = 'FORM_ROOT';\n\nexport type FormFieldProps = RadixForm.FormFieldProps & { required?: boolean };\n\nconst FieldContext = createContext<FormFieldProps>({\n name: '',\n});\n\nconst Field = forwardRef<HTMLDivElement, FormFieldProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <RadixForm.Field\n {...rest}\n className={`FormField ${className || ''}`}\n ref={ref}\n >\n <FieldContext.Provider value={rest}>{children}</FieldContext.Provider>\n </RadixForm.Field>\n );\n }\n);\nField.displayName = 'FORM_FIELD';\n\nexport type FormLabelProps = RadixForm.FormLabelProps & {\n /** label의 타입을 지정 */\n variant?: 'title' | 'body' | 'caption';\n};\n\nfunction HeadingLabel(props: HeadingProps): React.ReactNode {\n return (\n <Heading variant=\"heading5\" {...props}>\n {props.children}\n </Heading>\n );\n}\n\nfunction CaptionLabel(props: TypoProps): React.ReactNode {\n return (\n <Typo color=\"gray\" variant=\"caption\" {...props}>\n {props.children}\n </Typo>\n );\n}\n\nconst Label = forwardRef<HTMLLabelElement, FormLabelProps>(\n ({ children, className, variant, ...rest }, ref) => {\n const Comp = useMemo(() => {\n switch (variant) {\n case 'title':\n return HeadingLabel;\n case 'caption':\n return CaptionLabel;\n case 'body':\n default:\n return Typo;\n }\n }, [variant]);\n\n const fieldProps = useContext(FieldContext);\n return (\n <RadixForm.Label\n {...rest}\n asChild\n className={`FormLabel ${className || ''}`}\n ref={ref}\n >\n <Comp>\n {children}\n {fieldProps.required ? (\n <Typo as=\"span\" color=\"tomato\">\n {` *`}\n </Typo>\n ) : null}\n </Comp>\n </RadixForm.Label>\n );\n }\n);\nLabel.displayName = 'FORM_Label';\n\nconst Message = forwardRef<HTMLSpanElement, RadixForm.FormMessageProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <RadixForm.Message\n {...rest}\n asChild\n className={`FormMessage ${className || ''}`}\n ref={ref}\n >\n <Typo color=\"red\">{children}</Typo>\n </RadixForm.Message>\n );\n }\n);\nMessage.displayName = 'FORM_Message';\n\ntype ControlProps = Omit<RadixForm.FormControlProps, 'required'>;\nconst Control = forwardRef<HTMLInputElement, ControlProps>(\n ({ className, ...rest }, ref) => {\n const fieldProps = useContext(FieldContext);\n return (\n <RadixForm.Control\n {...rest}\n className={`FormControl ${className || ''}`}\n ref={ref}\n required={fieldProps.required}\n />\n );\n }\n);\nControl.displayName = 'FORM_Control';\n\ninterface FormItemProps extends FormFieldProps {\n children: React.ReactNode;\n label: string;\n labelVariant?: FormLabelProps['variant'];\n errorMessage?: string;\n}\n\nexport function FormItem({\n label,\n labelVariant,\n children,\n errorMessage,\n ...fieldProps\n}: FormItemProps): React.ReactNode {\n return (\n <Form.Field {...fieldProps}>\n <Form.Label variant={labelVariant}>{label}</Form.Label>\n {children}\n <Form.Message forceMatch={Boolean(errorMessage)}>\n {errorMessage}\n </Form.Message>\n </Form.Field>\n );\n}\n\nexport const Form = {\n Root,\n Field,\n Label,\n Message,\n Control: RadixForm.Control,\n Submit: RadixForm.Submit,\n FormItem,\n};\n","import {\n Heading as RadixHeading,\n type HeadingProps as RadixHeadingProps,\n} from '@radix-ui/themes';\nimport type { Responsive } from '@radix-ui/themes/props';\nimport { useMemo } from 'react';\nimport { mapWithResponsive } from '@/utils/map-with-responsive';\n\nexport { Heading as RadixHeading } from '@radix-ui/themes';\ntype HeadingVariant =\n | 'heading1'\n | 'heading2'\n | 'heading3'\n | 'heading4'\n | 'heading5';\nexport type HeadingProps = RadixHeadingProps & {\n variant?: Responsive<HeadingVariant>;\n};\n\ntype HeadingSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';\n\nconst mapVariant = (variant?: HeadingVariant): HeadingSize | undefined => {\n switch (variant) {\n case 'heading1':\n return '7';\n case 'heading2':\n return '6';\n case 'heading3':\n return '5';\n case 'heading4':\n return '4';\n case 'heading5':\n return '3';\n default:\n return undefined;\n }\n};\n\nexport function Heading(props: HeadingProps): React.ReactNode {\n const { size, children, variant, ...rest } = props;\n const radixSize = useMemo<RadixHeadingProps['size']>(() => {\n return variant\n ? mapWithResponsive({\n value: variant,\n mapFn: mapVariant,\n })\n : size;\n \n }, [size, variant]);\n\n return (\n <RadixHeading {...rest} size={radixSize}>\n {children}\n </RadixHeading>\n );\n}\n","import type { Breakpoint, Responsive } from \"@radix-ui/themes/props\";\n\nexport const mapWithResponsive = <T extends string,K extends string>(\n args: {value: Responsive<T>, mapFn: (value?:T)=>K |undefined}\n): Responsive<K> | undefined => {\n const {value, mapFn} = args;\n if(typeof value === 'string'){\n return mapFn(value);\n };\n \n if(typeof value === 'object'){\n const newObj: Partial<Record<Breakpoint, K>> = {};\n let key: Breakpoint;\n for(key in value){\n newObj[key] = mapFn(value[key]);\n }\n return newObj;\n }\n return value;\n};\n","import type { TextProps as RadixTextProps } from '@radix-ui/themes';\nimport type { Responsive } from '@radix-ui/themes/props';\nimport { Text as RadixText } from '@radix-ui/themes';\nimport React, { useMemo, forwardRef } from 'react';\nimport { mapWithResponsive } from '@/utils/map-with-responsive';\n\nexport type TypoProps = RadixTextProps & {\n variant?: Responsive<'body' | 'caption' | 'subtitle'>;\n};\n\nexport const Typo = forwardRef<HTMLSpanElement, TypoProps>(\n (props: TypoProps, ref): React.ReactNode => {\n const { size, variant, children, ...rest } = props;\n\n const radixSize = useMemo<RadixTextProps['size']>(() => {\n if (size !== undefined) return size;\n\n if (variant === undefined) return '2';\n\n return mapWithResponsive({\n value: variant,\n mapFn: (variantValue?: 'body' | 'caption' | 'subtitle') => {\n switch (variantValue) {\n case 'caption':\n return '1';\n case 'subtitle':\n return '3';\n case 'body':\n default:\n return '2';\n }\n },\n });\n }, [size, variant]);\n\n return (\n <RadixText {...rest} ref={ref} size={radixSize}>\n {children}\n </RadixText>\n );\n }\n);\n\nTypo.displayName = 'Typo';\n"],"mappings":"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","names":["import_react","import_themes","Heading","RadixHeading","import_themes","import_react","import_jsx_runtime","RadixText","import_jsx_runtime","Root","Field","Heading","Label","Message","Control"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/molecules/form/index.ts","../../../src/molecules/form/form.tsx","../../../src/atoms/heading.tsx","../../../src/utils/map-with-responsive.ts","../../../src/atoms/typo.tsx"],"sourcesContent":["export * from './form';\n","import * as RadixForm from '@radix-ui/react-form';\nimport React, { createContext, forwardRef, useContext, useMemo } from 'react';\nimport type { HeadingProps } from '@radix-ui/themes';\nimport { Heading } from '../../atoms/heading';\nimport type { TypoProps } from '../../atoms/typo';\nimport { Typo } from '../../atoms/typo';\n\nconst Root = forwardRef<HTMLFormElement, RadixForm.FormProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <RadixForm.Root\n {...rest}\n className={`FormRoot ${className || ''}`}\n ref={ref}\n >\n {children}\n </RadixForm.Root>\n );\n }\n);\n\nRoot.displayName = 'FORM_ROOT';\n\nexport type FormFieldProps = RadixForm.FormFieldProps & { required?: boolean };\n\nconst FieldContext = createContext<FormFieldProps>({\n name: '',\n});\n\nconst Field = forwardRef<HTMLDivElement, FormFieldProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <RadixForm.Field\n {...rest}\n className={`FormField ${className || ''}`}\n ref={ref}\n >\n <FieldContext.Provider value={rest}>{children}</FieldContext.Provider>\n </RadixForm.Field>\n );\n }\n);\nField.displayName = 'FORM_FIELD';\n\nexport type FormLabelProps = RadixForm.FormLabelProps & {\n /** label의 타입을 지정 */\n variant?: 'title' | 'body' | 'caption';\n};\n\nfunction HeadingLabel(props: HeadingProps): React.ReactNode {\n return (\n <Heading variant=\"heading5\" {...props}>\n {props.children}\n </Heading>\n );\n}\n\nfunction CaptionLabel(props: TypoProps): React.ReactNode {\n return (\n <Typo color=\"gray\" variant=\"caption\" weight=\"bold\" {...props}>\n {props.children}\n </Typo>\n );\n}\n\nfunction BodyLabel(props: TypoProps): React.ReactNode {\n return (\n <Typo variant=\"body\" weight=\"bold\" {...props}>\n {props.children}\n </Typo>\n );\n}\n\nconst Label = forwardRef<HTMLLabelElement, FormLabelProps>(\n ({ children, className, variant, ...rest }, ref) => {\n const Comp = useMemo(() => {\n switch (variant) {\n case 'title':\n return HeadingLabel;\n case 'caption':\n return CaptionLabel;\n case 'body':\n default:\n return BodyLabel;\n }\n }, [variant]);\n\n const fieldProps = useContext(FieldContext);\n return (\n <RadixForm.Label\n {...rest}\n asChild\n className={`FormLabel ${className || ''}`}\n ref={ref}\n >\n <Comp>\n {children}\n {fieldProps.required ? (\n <Typo as=\"span\" color=\"tomato\">\n {` *`}\n </Typo>\n ) : null}\n </Comp>\n </RadixForm.Label>\n );\n }\n);\nLabel.displayName = 'FORM_Label';\n\nconst Message = forwardRef<HTMLSpanElement, RadixForm.FormMessageProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <RadixForm.Message\n {...rest}\n asChild\n className={`FormMessage ${className || ''}`}\n ref={ref}\n >\n <Typo color=\"red\">{children}</Typo>\n </RadixForm.Message>\n );\n }\n);\nMessage.displayName = 'FORM_Message';\n\ntype ControlProps = Omit<RadixForm.FormControlProps, 'required'>;\nconst Control = forwardRef<HTMLInputElement, ControlProps>(\n ({ className, ...rest }, ref) => {\n const fieldProps = useContext(FieldContext);\n return (\n <RadixForm.Control\n {...rest}\n className={`FormControl ${className || ''}`}\n ref={ref}\n required={fieldProps.required}\n />\n );\n }\n);\nControl.displayName = 'FORM_Control';\n\ninterface FormItemProps extends FormFieldProps {\n children: React.ReactNode;\n label: string;\n labelVariant?: FormLabelProps['variant'];\n errorMessage?: string;\n}\n\nexport function FormItem({\n label,\n labelVariant,\n children,\n errorMessage,\n ...fieldProps\n}: FormItemProps): React.ReactNode {\n return (\n <Form.Field {...fieldProps}>\n <Form.Label variant={labelVariant}>{label}</Form.Label>\n {children}\n <Form.Message forceMatch={Boolean(errorMessage)}>\n {errorMessage}\n </Form.Message>\n </Form.Field>\n );\n}\n\nexport const Form = {\n Root,\n Field,\n Label,\n Message,\n Control: RadixForm.Control,\n Submit: RadixForm.Submit,\n FormItem,\n};\n","import {\n Heading as RadixHeading,\n type HeadingProps as RadixHeadingProps,\n} from '@radix-ui/themes';\nimport type { Responsive } from '@radix-ui/themes/props';\nimport { useMemo } from 'react';\nimport { mapWithResponsive } from '@/utils/map-with-responsive';\n\nexport { Heading as RadixHeading } from '@radix-ui/themes';\ntype HeadingVariant =\n | 'heading1'\n | 'heading2'\n | 'heading3'\n | 'heading4'\n | 'heading5';\nexport type HeadingProps = RadixHeadingProps & {\n variant?: Responsive<HeadingVariant>;\n};\n\ntype HeadingSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';\n\nconst mapVariant = (variant?: HeadingVariant): HeadingSize | undefined => {\n switch (variant) {\n case 'heading1':\n return '7';\n case 'heading2':\n return '6';\n case 'heading3':\n return '5';\n case 'heading4':\n return '4';\n case 'heading5':\n return '3';\n default:\n return undefined;\n }\n};\n\nexport function Heading(props: HeadingProps): React.ReactNode {\n const { size, children, variant, ...rest } = props;\n const radixSize = useMemo<RadixHeadingProps['size']>(() => {\n return variant\n ? mapWithResponsive({\n value: variant,\n mapFn: mapVariant,\n })\n : size;\n \n }, [size, variant]);\n\n return (\n <RadixHeading {...rest} size={radixSize}>\n {children}\n </RadixHeading>\n );\n}\n","import type { Breakpoint, Responsive } from \"@radix-ui/themes/props\";\n\nexport const mapWithResponsive = <T extends string,K extends string>(\n args: {value: Responsive<T>, mapFn: (value?:T)=>K |undefined}\n): Responsive<K> | undefined => {\n const {value, mapFn} = args;\n if(typeof value === 'string'){\n return mapFn(value);\n };\n \n if(typeof value === 'object'){\n const newObj: Partial<Record<Breakpoint, K>> = {};\n let key: Breakpoint;\n for(key in value){\n newObj[key] = mapFn(value[key]);\n }\n return newObj;\n }\n return value;\n};\n","import type { TextProps as RadixTextProps } from '@radix-ui/themes';\nimport type { Responsive } from '@radix-ui/themes/props';\nimport { Text as RadixText } from '@radix-ui/themes';\nimport React, { useMemo, forwardRef } from 'react';\nimport { mapWithResponsive } from '@/utils/map-with-responsive';\n\nexport type TypoProps = RadixTextProps & {\n variant?: Responsive<'body' | 'caption' | 'subtitle'>;\n};\n\nexport const Typo = forwardRef<HTMLSpanElement, TypoProps>(\n (props: TypoProps, ref): React.ReactNode => {\n const { size, variant, children, ...rest } = props;\n\n const radixSize = useMemo<RadixTextProps['size']>(() => {\n if (size !== undefined) return size;\n\n if (variant === undefined) return '2';\n\n return mapWithResponsive({\n value: variant,\n mapFn: (variantValue?: 'body' | 'caption' | 'subtitle') => {\n switch (variantValue) {\n case 'caption':\n return '1';\n case 'subtitle':\n return '3';\n case 'body':\n default:\n return '2';\n }\n },\n });\n }, [size, variant]);\n\n return (\n <RadixText {...rest} ref={ref} size={radixSize}>\n {children}\n </RadixText>\n );\n }\n);\n\nTypo.displayName = 'Typo';\n"],"mappings":"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","names":["import_react","import_themes","Heading","RadixHeading","import_themes","import_react","import_jsx_runtime","RadixText","import_jsx_runtime","Root","Field","Heading","Label","Message","Control"]}
|
package/dist/molecules/index.cjs
CHANGED
|
@@ -4842,7 +4842,10 @@ function HeadingLabel(props) {
|
|
|
4842
4842
|
return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Heading2, __spreadProps(__spreadValues({ variant: "heading5" }, props), { children: props.children }));
|
|
4843
4843
|
}
|
|
4844
4844
|
function CaptionLabel(props) {
|
|
4845
|
-
return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Typo, __spreadProps(__spreadValues({ color: "gray", variant: "caption" }, props), { children: props.children }));
|
|
4845
|
+
return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Typo, __spreadProps(__spreadValues({ color: "gray", variant: "caption", weight: "bold" }, props), { children: props.children }));
|
|
4846
|
+
}
|
|
4847
|
+
function BodyLabel(props) {
|
|
4848
|
+
return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Typo, __spreadProps(__spreadValues({ variant: "body", weight: "bold" }, props), { children: props.children }));
|
|
4846
4849
|
}
|
|
4847
4850
|
var Label2 = (0, import_react35.forwardRef)(
|
|
4848
4851
|
(_a, ref) => {
|
|
@@ -4855,7 +4858,7 @@ var Label2 = (0, import_react35.forwardRef)(
|
|
|
4855
4858
|
return CaptionLabel;
|
|
4856
4859
|
case "body":
|
|
4857
4860
|
default:
|
|
4858
|
-
return
|
|
4861
|
+
return BodyLabel;
|
|
4859
4862
|
}
|
|
4860
4863
|
}, [variant]);
|
|
4861
4864
|
const fieldProps = (0, import_react35.useContext)(FieldContext);
|
|
@@ -5132,10 +5135,14 @@ function scrollToFirstError(errors, _fields) {
|
|
|
5132
5135
|
if (!firstErrorFieldName) return;
|
|
5133
5136
|
let fieldElement = document.querySelector(`[name="${firstErrorFieldName}"]`);
|
|
5134
5137
|
if (!fieldElement) {
|
|
5135
|
-
fieldElement = document.querySelector(
|
|
5138
|
+
fieldElement = document.querySelector(
|
|
5139
|
+
`[data-field-name="${firstErrorFieldName}"]`
|
|
5140
|
+
);
|
|
5136
5141
|
}
|
|
5137
5142
|
if (!fieldElement) {
|
|
5138
|
-
fieldElement = document.querySelector(
|
|
5143
|
+
fieldElement = document.querySelector(
|
|
5144
|
+
`[data-error-field="${firstErrorFieldName}"]`
|
|
5145
|
+
);
|
|
5139
5146
|
}
|
|
5140
5147
|
if (fieldElement) {
|
|
5141
5148
|
fieldElement.scrollIntoView({
|
|
@@ -5164,7 +5171,10 @@ function DynamicFormRoot({
|
|
|
5164
5171
|
if (field.type === "choices") {
|
|
5165
5172
|
schema[field.name] = Yup2.array().min(1, `${field.label}\uC744(\uB97C) \uD558\uB098 \uC774\uC0C1 \uC120\uD0DD\uD574\uC8FC\uC138\uC694`).required(`${field.label}\uC740(\uB294) \uD544\uC218\uC785\uB2C8\uB2E4`);
|
|
5166
5173
|
} else if (field.type === "yes_no") {
|
|
5167
|
-
schema[field.name] = Yup2.boolean().oneOf(
|
|
5174
|
+
schema[field.name] = Yup2.boolean().oneOf(
|
|
5175
|
+
[true],
|
|
5176
|
+
`${field.label}\uC5D0 \uB3D9\uC758\uD574\uC8FC\uC138\uC694`
|
|
5177
|
+
);
|
|
5168
5178
|
} else {
|
|
5169
5179
|
schema[field.name] = Yup2.string().required(
|
|
5170
5180
|
`${field.label}\uC740(\uB294) \uD544\uC218\uC785\uB2C8\uB2E4`
|
|
@@ -5174,9 +5184,12 @@ function DynamicFormRoot({
|
|
|
5174
5184
|
});
|
|
5175
5185
|
return Object.keys(schema).length > 0 ? Yup2.object(schema) : void 0;
|
|
5176
5186
|
}, [fields]);
|
|
5177
|
-
const handleSubmit = (0, import_react39.useCallback)(
|
|
5178
|
-
|
|
5179
|
-
|
|
5187
|
+
const handleSubmit = (0, import_react39.useCallback)(
|
|
5188
|
+
(values) => __async(null, null, function* () {
|
|
5189
|
+
yield onSubmit(values);
|
|
5190
|
+
}),
|
|
5191
|
+
[onSubmit]
|
|
5192
|
+
);
|
|
5180
5193
|
const formik = (0, import_formik2.useFormik)({
|
|
5181
5194
|
initialValues: fields.reduce((acc, field) => {
|
|
5182
5195
|
if (field.type === "choices") {
|
|
@@ -5203,7 +5216,16 @@ function DynamicFormRoot({
|
|
|
5203
5216
|
};
|
|
5204
5217
|
}
|
|
5205
5218
|
}, [formik.submitCount, formik.errors, fields]);
|
|
5206
|
-
return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
|
|
5219
|
+
return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
|
|
5220
|
+
DynamicFormProvider,
|
|
5221
|
+
{
|
|
5222
|
+
fields,
|
|
5223
|
+
formStyle,
|
|
5224
|
+
formik,
|
|
5225
|
+
readonly,
|
|
5226
|
+
children
|
|
5227
|
+
}
|
|
5228
|
+
);
|
|
5207
5229
|
}
|
|
5208
5230
|
function DynamicFormFieldList({
|
|
5209
5231
|
fields: fieldsProp,
|
|
@@ -5228,8 +5250,8 @@ function DynamicFormFieldList({
|
|
|
5228
5250
|
name: field.name,
|
|
5229
5251
|
required: field.required,
|
|
5230
5252
|
children: [
|
|
5231
|
-
/* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
|
|
5232
|
-
|
|
5253
|
+
field.description && field.type !== "yes_no" ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Typo, { variant: "caption", children: field.description }) : null,
|
|
5254
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsx)(DynamicFormField, { field })
|
|
5233
5255
|
]
|
|
5234
5256
|
}
|
|
5235
5257
|
)
|
|
@@ -5307,11 +5329,19 @@ function createYupValidation(field, validation) {
|
|
|
5307
5329
|
}
|
|
5308
5330
|
if (field.required) {
|
|
5309
5331
|
if (field.type === "yes_no") {
|
|
5310
|
-
schema = schema.oneOf(
|
|
5332
|
+
schema = schema.oneOf(
|
|
5333
|
+
[true],
|
|
5334
|
+
validation.message || `${field.label}\uC5D0 \uB3D9\uC758\uD574\uC8FC\uC138\uC694`
|
|
5335
|
+
);
|
|
5311
5336
|
} else if (field.type === "choices") {
|
|
5312
|
-
schema = schema.min(
|
|
5337
|
+
schema = schema.min(
|
|
5338
|
+
1,
|
|
5339
|
+
validation.message || `${field.label}\uC744(\uB97C) \uD558\uB098 \uC774\uC0C1 \uC120\uD0DD\uD574\uC8FC\uC138\uC694`
|
|
5340
|
+
);
|
|
5313
5341
|
} else {
|
|
5314
|
-
schema = schema.required(
|
|
5342
|
+
schema = schema.required(
|
|
5343
|
+
validation.message || `${field.label}\uC740(\uB294) \uD544\uC218\uC785\uB2C8\uB2E4`
|
|
5344
|
+
);
|
|
5315
5345
|
}
|
|
5316
5346
|
}
|
|
5317
5347
|
return schema;
|