@tipp/ui 1.4.11 → 1.4.12

package/dist/molecules/form.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/molecules/form.tsx","../../src/atoms/heading.tsx","../../src/atoms/typo.tsx"],"sourcesContent":["import * as RadixForm from '@radix-ui/react-form';\nimport { createContext, forwardRef, useContext } from 'react';\nimport type { HeadingProps } from '@radix-ui/themes';\nimport { Heading } from '../atoms/heading';\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\ntype 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\ntype LabelProps = RadixForm.FormLabelProps & {\n  /** label의 타입을 지정  */\n  variant?: 'title' | 'body';\n};\n\nfunction HeadingLabel(props: HeadingProps): React.ReactElement {\n  return (\n    <Heading variant=\"heading5\" {...props}>\n      {props.children}\n    </Heading>\n  );\n}\n\nconst Label = forwardRef<HTMLLabelElement, LabelProps>(\n  ({ children, className, variant = 'body', ...rest }, ref) => {\n    const Comp = variant === 'title' ? HeadingLabel : Typo;\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\nexport const Form = {\n  Root,\n  Field,\n  Label,\n  Message,\n  ValidityState,\n  Control: RadixForm.Control,\n  Submit: RadixForm.Submit,\n};\n","import {\n  Heading as RadixHeading,\n  type HeadingProps as RadixHeadingProps,\n} from '@radix-ui/themes';\nimport { useMemo } from 'react';\n\nexport { Heading as RadixHeading } from '@radix-ui/themes';\n\nexport type HeadingProps = RadixHeadingProps & {\n  variant?: 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5';\n};\n\nexport function Heading(props: HeadingProps): React.ReactElement {\n  const { size, children, variant, ...rest } = props;\n  const radixSize = useMemo<RadixHeadingProps['size']>(() => {\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 size;\n    }\n  }, [size, variant]);\n\n  return (\n    <RadixHeading {...rest} size={radixSize}>\n      {children}\n    </RadixHeading>\n  );\n}\n","import type { TextProps as RadixTextProps } from '@radix-ui/themes';\nimport { Text as RadixText } from '@radix-ui/themes';\nimport React, { useMemo, forwardRef } from 'react';\n\nexport type TypoProps = RadixTextProps & {\n  variant?: 'body' | 'caption' | 'subtitle';\n};\n\nexport const Typo = forwardRef<HTMLSpanElement, TypoProps>(\n  (props: TypoProps, ref): React.ReactElement => {\n    const { size, variant, children, ...rest } = props;\n\n    const radixSize = useMemo<RadixTextProps['size']>(() => {\n      if (size !== undefined) return size;\n      switch (variant) {\n        case 'caption':\n          return '1';\n        case 'subtitle':\n          return '3';\n        case 'body':\n        default:\n          return '2';\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/form.d.cts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+import * as RadixForm from '@radix-ui/react-form';
+
+declare const Form: {
+    Root: react.ForwardRefExoticComponent<RadixForm.FormProps & react.RefAttributes<HTMLFormElement>>;
+    Field: react.ForwardRefExoticComponent<RadixForm.FormFieldProps & {
+        required?: boolean | undefined;
+    } & react.RefAttributes<HTMLDivElement>>;
+    Label: react.ForwardRefExoticComponent<RadixForm.FormLabelProps & {
+        /** label의 타입을 지정  */
+        variant?: "title" | "body" | undefined;
+    } & react.RefAttributes<HTMLLabelElement>>;
+    Message: react.ForwardRefExoticComponent<RadixForm.FormMessageProps & react.RefAttributes<HTMLSpanElement>>;
+    ValidityState: {
+        new (): ValidityState;
+        prototype: ValidityState;
+    };
+    Control: react.ForwardRefExoticComponent<RadixForm.FormControlProps & react.RefAttributes<HTMLInputElement>>;
+    Submit: react.ForwardRefExoticComponent<RadixForm.FormSubmitProps & react.RefAttributes<HTMLButtonElement>>;
+};
+
+export { Form };

package/dist/molecules/form.d.ts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+import * as RadixForm from '@radix-ui/react-form';
+
+declare const Form: {
+    Root: react.ForwardRefExoticComponent<RadixForm.FormProps & react.RefAttributes<HTMLFormElement>>;
+    Field: react.ForwardRefExoticComponent<RadixForm.FormFieldProps & {
+        required?: boolean | undefined;
+    } & react.RefAttributes<HTMLDivElement>>;
+    Label: react.ForwardRefExoticComponent<RadixForm.FormLabelProps & {
+        /** label의 타입을 지정  */
+        variant?: "title" | "body" | undefined;
+    } & react.RefAttributes<HTMLLabelElement>>;
+    Message: react.ForwardRefExoticComponent<RadixForm.FormMessageProps & react.RefAttributes<HTMLSpanElement>>;
+    ValidityState: {
+        new (): ValidityState;
+        prototype: ValidityState;
+    };
+    Control: react.ForwardRefExoticComponent<RadixForm.FormControlProps & react.RefAttributes<HTMLInputElement>>;
+    Submit: react.ForwardRefExoticComponent<RadixForm.FormSubmitProps & react.RefAttributes<HTMLButtonElement>>;
+};
+
+export { Form };

package/dist/molecules/form.js

@@ -0,0 +1,10 @@
+import {
+  Form
+} from "../chunk-MOAXPZLZ.js";
+import "../chunk-52MVZ6AN.js";
+import "../chunk-HK224ADT.js";
+import "../chunk-N552FDTV.js";
+export {
+  Form
+};
+//# sourceMappingURL=form.js.map

package/dist/molecules/form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/molecules/index.js

@@ -1,89 +1,89 @@
 import "../chunk-6ZAP2Q6K.js";
 import {
   DatePicker
-} from "../chunk-C3YMRWG2.js";
+} from "../chunk-2QDLO3YM.js";
 import {
   ExpandTable,
   createColumnHelper
-} from "../chunk-3D63H4NN.js";
+} from "../chunk-BSG2Q4XC.js";
 import "../chunk-PCWEW2UL.js";
-import "../chunk-NDUKDKGB.js";
 import {
   DotNavigation
 } from "../chunk-EDTEVEJW.js";
 import {
   LearningPost
-} from "../chunk-CLBSZCMO.js";
+} from "../chunk-YNIACSWN.js";
+import "../chunk-BVNXAZ4W.js";
 import {
   Navigation
-} from "../chunk-F44BXTHN.js";
+} from "../chunk-OCINOC2X.js";
 import {
   Stepper
-} from "../chunk-Y3L7BYDF.js";
+} from "../chunk-PF5CPG6R.js";
 import {
   TagSelector
-} from "../chunk-2E772Q7M.js";
-import "../chunk-BVNXAZ4W.js";
+} from "../chunk-KQ75QB4F.js";
 import "../chunk-BSTJBBEX.js";
+import "../chunk-NDUKDKGB.js";
 import "../chunk-KTVZ4KLX.js";
+import "../chunk-MOAXPZLZ.js";
+import "../chunk-ILRUXI2E.js";
+import "../chunk-JPIZP2PZ.js";
 import "../chunk-CYYWMYE7.js";
+import "../chunk-3JRNKBMN.js";
+import "../chunk-HYITAA4J.js";
 import "../chunk-5H3YPCZK.js";
 import "../chunk-FR2GDOU2.js";
 import "../chunk-74DX4CU7.js";
 import "../chunk-OYM4XCHQ.js";
 import "../chunk-YJ7ZFOYL.js";
 import "../chunk-5ZITU5L7.js";
-import "../chunk-ILRUXI2E.js";
-import "../chunk-JPIZP2PZ.js";
+import "../chunk-365QMK4D.js";
+import "../chunk-YO3BQW6S.js";
 import "../chunk-6IVCARWS.js";
 import "../chunk-6DJOIRMF.js";
 import "../chunk-FPD73OHW.js";
 import "../chunk-ZKZDVS7G.js";
 import "../chunk-MUNMDHRF.js";
 import "../chunk-TVDKGMBI.js";
-import "../chunk-3JRNKBMN.js";
-import "../chunk-HYITAA4J.js";
+import "../chunk-O3T3TM3V.js";
 import "../chunk-XQOL7UBI.js";
 import "../chunk-TULWX7D6.js";
 import "../chunk-SIM6HKVI.js";
-import "../chunk-5X3BCQPR.js";
+import "../chunk-IM7DSIK2.js";
+import "../chunk-O3DNDMV3.js";
 import "../chunk-5AVBYDPB.js";
-import "../chunk-365QMK4D.js";
-import "../chunk-YO3BQW6S.js";
+import "../chunk-UC627KGO.js";
+import "../chunk-4WFMOFN2.js";
+import "../chunk-WKFZ5MMN.js";
+import "../chunk-ACVANQJ4.js";
 import "../chunk-2DZ2Y3JI.js";
-import "../chunk-DJN2IEY6.js";
+import "../chunk-QDZS4B6A.js";
+import "../chunk-52MVZ6AN.js";
 import "../chunk-25HMMI7R.js";
-import "../chunk-2CVXGGI5.js";
 import "../chunk-EGEQY3KT.js";
 import "../chunk-HK224ADT.js";
-import "../chunk-O3T3TM3V.js";
-import "../chunk-O3DNDMV3.js";
+import "../chunk-MIMJ7LON.js";
+import "../chunk-IQEEPHOY.js";
+import "../chunk-LHCDPZ5E.js";
 import "../chunk-OHMOP5PV.js";
 import "../chunk-LZJR77Q2.js";
 import "../chunk-Q37G2GS6.js";
 import "../chunk-VTJZMOSP.js";
 import "../chunk-BDVTRPXG.js";
-import "../chunk-UC627KGO.js";
-import "../chunk-4WFMOFN2.js";
-import "../chunk-WKFZ5MMN.js";
-import "../chunk-ACVANQJ4.js";
-import "../chunk-52MVZ6AN.js";
+import "../chunk-3SSSCLJ5.js";
+import "../chunk-EWD4AO5N.js";
+import "../chunk-YGL6SWKN.js";
 import "../chunk-4Y5BEXVN.js";
 import "../chunk-U7JPP7WJ.js";
 import "../chunk-LQY4RKWI.js";
 import "../chunk-ZD7MNMED.js";
 import "../chunk-B6XJN6EC.js";
 import "../chunk-UVKNLJDZ.js";
-import "../chunk-MIMJ7LON.js";
-import "../chunk-IQEEPHOY.js";
-import "../chunk-LHCDPZ5E.js";
 import "../chunk-66C4U3BG.js";
 import "../chunk-J242TTFH.js";
 import "../chunk-EAXUQEO5.js";
 import "../chunk-YJCCE5WP.js";
-import "../chunk-3SSSCLJ5.js";
-import "../chunk-EWD4AO5N.js";
-import "../chunk-YGL6SWKN.js";
 import "../chunk-N552FDTV.js";
 export {
   DatePicker,

package/dist/molecules/learning-post.js

@@ -1,16 +1,16 @@
 import {
   LearningPost
-} from "../chunk-CLBSZCMO.js";
+} from "../chunk-YNIACSWN.js";
 import "../chunk-BVNXAZ4W.js";
+import "../chunk-52MVZ6AN.js";
 import "../chunk-25HMMI7R.js";
 import "../chunk-EGEQY3KT.js";
 import "../chunk-HK224ADT.js";
-import "../chunk-52MVZ6AN.js";
+import "../chunk-EWD4AO5N.js";
 import "../chunk-4Y5BEXVN.js";
 import "../chunk-U7JPP7WJ.js";
 import "../chunk-LQY4RKWI.js";
 import "../chunk-EAXUQEO5.js";
-import "../chunk-EWD4AO5N.js";
 import "../chunk-N552FDTV.js";
 export {
   LearningPost

package/dist/molecules/navigation.js

@@ -1,65 +1,65 @@
 import {
   Navigation
-} from "../chunk-F44BXTHN.js";
+} from "../chunk-OCINOC2X.js";
 import "../chunk-KTVZ4KLX.js";
+import "../chunk-MOAXPZLZ.js";
+import "../chunk-ILRUXI2E.js";
+import "../chunk-JPIZP2PZ.js";
 import "../chunk-CYYWMYE7.js";
+import "../chunk-3JRNKBMN.js";
+import "../chunk-HYITAA4J.js";
 import "../chunk-5H3YPCZK.js";
 import "../chunk-FR2GDOU2.js";
 import "../chunk-74DX4CU7.js";
 import "../chunk-OYM4XCHQ.js";
 import "../chunk-YJ7ZFOYL.js";
 import "../chunk-5ZITU5L7.js";
-import "../chunk-ILRUXI2E.js";
-import "../chunk-JPIZP2PZ.js";
+import "../chunk-365QMK4D.js";
+import "../chunk-YO3BQW6S.js";
 import "../chunk-6IVCARWS.js";
 import "../chunk-6DJOIRMF.js";
 import "../chunk-FPD73OHW.js";
 import "../chunk-ZKZDVS7G.js";
 import "../chunk-MUNMDHRF.js";
 import "../chunk-TVDKGMBI.js";
-import "../chunk-3JRNKBMN.js";
-import "../chunk-HYITAA4J.js";
+import "../chunk-O3T3TM3V.js";
 import "../chunk-XQOL7UBI.js";
 import "../chunk-TULWX7D6.js";
 import "../chunk-SIM6HKVI.js";
-import "../chunk-5X3BCQPR.js";
+import "../chunk-IM7DSIK2.js";
+import "../chunk-O3DNDMV3.js";
 import "../chunk-5AVBYDPB.js";
-import "../chunk-365QMK4D.js";
-import "../chunk-YO3BQW6S.js";
+import "../chunk-UC627KGO.js";
+import "../chunk-4WFMOFN2.js";
+import "../chunk-WKFZ5MMN.js";
+import "../chunk-ACVANQJ4.js";
 import "../chunk-2DZ2Y3JI.js";
-import "../chunk-DJN2IEY6.js";
+import "../chunk-QDZS4B6A.js";
+import "../chunk-52MVZ6AN.js";
 import "../chunk-25HMMI7R.js";
-import "../chunk-2CVXGGI5.js";
 import "../chunk-EGEQY3KT.js";
 import "../chunk-HK224ADT.js";
-import "../chunk-O3T3TM3V.js";
-import "../chunk-O3DNDMV3.js";
+import "../chunk-MIMJ7LON.js";
+import "../chunk-IQEEPHOY.js";
+import "../chunk-LHCDPZ5E.js";
 import "../chunk-OHMOP5PV.js";
 import "../chunk-LZJR77Q2.js";
 import "../chunk-Q37G2GS6.js";
 import "../chunk-VTJZMOSP.js";
 import "../chunk-BDVTRPXG.js";
-import "../chunk-UC627KGO.js";
-import "../chunk-4WFMOFN2.js";
-import "../chunk-WKFZ5MMN.js";
-import "../chunk-ACVANQJ4.js";
-import "../chunk-52MVZ6AN.js";
+import "../chunk-3SSSCLJ5.js";
+import "../chunk-EWD4AO5N.js";
+import "../chunk-YGL6SWKN.js";
 import "../chunk-4Y5BEXVN.js";
 import "../chunk-U7JPP7WJ.js";
 import "../chunk-LQY4RKWI.js";
 import "../chunk-ZD7MNMED.js";
 import "../chunk-B6XJN6EC.js";
 import "../chunk-UVKNLJDZ.js";
-import "../chunk-MIMJ7LON.js";
-import "../chunk-IQEEPHOY.js";
-import "../chunk-LHCDPZ5E.js";
 import "../chunk-66C4U3BG.js";
 import "../chunk-J242TTFH.js";
 import "../chunk-EAXUQEO5.js";
 import "../chunk-YJCCE5WP.js";
-import "../chunk-3SSSCLJ5.js";
-import "../chunk-EWD4AO5N.js";
-import "../chunk-YGL6SWKN.js";
 import "../chunk-N552FDTV.js";
 export {
   Navigation

package/dist/molecules/stepper.js

@@ -1,10 +1,10 @@
 import {
   Stepper
-} from "../chunk-Y3L7BYDF.js";
-import "../chunk-25HMMI7R.js";
+} from "../chunk-PF5CPG6R.js";
 import "../chunk-52MVZ6AN.js";
-import "../chunk-66C4U3BG.js";
+import "../chunk-25HMMI7R.js";
 import "../chunk-3SSSCLJ5.js";
+import "../chunk-66C4U3BG.js";
 import "../chunk-N552FDTV.js";
 export {
   Stepper

package/dist/molecules/tag-selector.js

@@ -1,65 +1,65 @@
 import {
   TagSelector
-} from "../chunk-2E772Q7M.js";
+} from "../chunk-KQ75QB4F.js";
 import "../chunk-KTVZ4KLX.js";
+import "../chunk-MOAXPZLZ.js";
+import "../chunk-ILRUXI2E.js";
+import "../chunk-JPIZP2PZ.js";
 import "../chunk-CYYWMYE7.js";
+import "../chunk-3JRNKBMN.js";
+import "../chunk-HYITAA4J.js";
 import "../chunk-5H3YPCZK.js";
 import "../chunk-FR2GDOU2.js";
 import "../chunk-74DX4CU7.js";
 import "../chunk-OYM4XCHQ.js";
 import "../chunk-YJ7ZFOYL.js";
 import "../chunk-5ZITU5L7.js";
-import "../chunk-ILRUXI2E.js";
-import "../chunk-JPIZP2PZ.js";
+import "../chunk-365QMK4D.js";
+import "../chunk-YO3BQW6S.js";
 import "../chunk-6IVCARWS.js";
 import "../chunk-6DJOIRMF.js";
 import "../chunk-FPD73OHW.js";
 import "../chunk-ZKZDVS7G.js";
 import "../chunk-MUNMDHRF.js";
 import "../chunk-TVDKGMBI.js";
-import "../chunk-3JRNKBMN.js";
-import "../chunk-HYITAA4J.js";
+import "../chunk-O3T3TM3V.js";
 import "../chunk-XQOL7UBI.js";
 import "../chunk-TULWX7D6.js";
 import "../chunk-SIM6HKVI.js";
-import "../chunk-5X3BCQPR.js";
+import "../chunk-IM7DSIK2.js";
+import "../chunk-O3DNDMV3.js";
 import "../chunk-5AVBYDPB.js";
-import "../chunk-365QMK4D.js";
-import "../chunk-YO3BQW6S.js";
+import "../chunk-UC627KGO.js";
+import "../chunk-4WFMOFN2.js";
+import "../chunk-WKFZ5MMN.js";
+import "../chunk-ACVANQJ4.js";
 import "../chunk-2DZ2Y3JI.js";
-import "../chunk-DJN2IEY6.js";
+import "../chunk-QDZS4B6A.js";
+import "../chunk-52MVZ6AN.js";
 import "../chunk-25HMMI7R.js";
-import "../chunk-2CVXGGI5.js";
 import "../chunk-EGEQY3KT.js";
 import "../chunk-HK224ADT.js";
-import "../chunk-O3T3TM3V.js";
-import "../chunk-O3DNDMV3.js";
+import "../chunk-MIMJ7LON.js";
+import "../chunk-IQEEPHOY.js";
+import "../chunk-LHCDPZ5E.js";
 import "../chunk-OHMOP5PV.js";
 import "../chunk-LZJR77Q2.js";
 import "../chunk-Q37G2GS6.js";
 import "../chunk-VTJZMOSP.js";
 import "../chunk-BDVTRPXG.js";
-import "../chunk-UC627KGO.js";
-import "../chunk-4WFMOFN2.js";
-import "../chunk-WKFZ5MMN.js";
-import "../chunk-ACVANQJ4.js";
-import "../chunk-52MVZ6AN.js";
+import "../chunk-3SSSCLJ5.js";
+import "../chunk-EWD4AO5N.js";
+import "../chunk-YGL6SWKN.js";
 import "../chunk-4Y5BEXVN.js";
 import "../chunk-U7JPP7WJ.js";
 import "../chunk-LQY4RKWI.js";
 import "../chunk-ZD7MNMED.js";
 import "../chunk-B6XJN6EC.js";
 import "../chunk-UVKNLJDZ.js";
-import "../chunk-MIMJ7LON.js";
-import "../chunk-IQEEPHOY.js";
-import "../chunk-LHCDPZ5E.js";
 import "../chunk-66C4U3BG.js";
 import "../chunk-J242TTFH.js";
 import "../chunk-EAXUQEO5.js";
 import "../chunk-YJCCE5WP.js";
-import "../chunk-3SSSCLJ5.js";
-import "../chunk-EWD4AO5N.js";
-import "../chunk-YGL6SWKN.js";
 import "../chunk-N552FDTV.js";
 export {
   TagSelector

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "1.4.11",
+  "version": "1.4.12",
   "private": false,
   "sideEffects": false,
   "type": "module",

package/src/atoms/index.ts

@@ -52,5 +52,5 @@ export * from './field-error-wrapper';
 export * from './ellipsis-tooltip';
 export * from './drawer';
 export * from './toast';
-export * from './form';
+export * from '../molecules/form';
 export * from './auto-sizing-input';

package/src/molecules/form.tsx

@@ -0,0 +1,122 @@
+import * as RadixForm from '@radix-ui/react-form';
+import { createContext, forwardRef, useContext } from 'react';
+import type { HeadingProps } from '@radix-ui/themes';
+import { Heading } from '../atoms/heading';
+import { Typo } from '../atoms/typo';
+
+const Root = forwardRef<HTMLFormElement, RadixForm.FormProps>(
+  ({ children, className, ...rest }, ref) => {
+    return (
+      <RadixForm.Root
+        {...rest}
+        className={`FormRoot ${className || ''}`}
+        ref={ref}
+      >
+        {children}
+      </RadixForm.Root>
+    );
+  }
+);
+
+Root.displayName = 'FORM_ROOT';
+
+type FormFieldProps = RadixForm.FormFieldProps & { required?: boolean };
+
+const FieldContext = createContext<FormFieldProps>({
+  name: '',
+});
+
+const Field = forwardRef<HTMLDivElement, FormFieldProps>(
+  ({ children, className, ...rest }, ref) => {
+    return (
+      <RadixForm.Field
+        {...rest}
+        className={`FormField ${className || ''}`}
+        ref={ref}
+      >
+        <FieldContext.Provider value={rest}>{children}</FieldContext.Provider>
+      </RadixForm.Field>
+    );
+  }
+);
+Field.displayName = 'FORM_FIELD';
+
+type LabelProps = RadixForm.FormLabelProps & {
+  /** label의 타입을 지정  */
+  variant?: 'title' | 'body';
+};
+
+function HeadingLabel(props: HeadingProps): React.ReactElement {
+  return (
+    <Heading variant="heading5" {...props}>
+      {props.children}
+    </Heading>
+  );
+}
+
+const Label = forwardRef<HTMLLabelElement, LabelProps>(
+  ({ children, className, variant = 'body', ...rest }, ref) => {
+    const Comp = variant === 'title' ? HeadingLabel : Typo;
+    const fieldProps = useContext(FieldContext);
+    return (
+      <RadixForm.Label
+        {...rest}
+        asChild
+        className={`FormLabel ${className || ''}`}
+        ref={ref}
+      >
+        <Comp>
+          {children}
+          {fieldProps.required ? (
+            <Typo as="span" color="tomato">
+              {` *`}
+            </Typo>
+          ) : null}
+        </Comp>
+      </RadixForm.Label>
+    );
+  }
+);
+Label.displayName = 'FORM_Label';
+
+const Message = forwardRef<HTMLSpanElement, RadixForm.FormMessageProps>(
+  ({ children, className, ...rest }, ref) => {
+    return (
+      <RadixForm.Message
+        {...rest}
+        asChild
+        className={`FormMessage ${className || ''}`}
+        ref={ref}
+      >
+        <Typo color="red">{children}</Typo>
+      </RadixForm.Message>
+    );
+  }
+);
+Message.displayName = 'FORM_Message';
+
+type ControlProps = Omit<RadixForm.FormControlProps, 'required'>;
+const Control = forwardRef<HTMLInputElement, ControlProps>(
+  ({ className, ...rest }, ref) => {
+    const fieldProps = useContext(FieldContext);
+    return (
+      <RadixForm.Control
+        {...rest}
+        className={`FormControl ${className || ''}`}
+        ref={ref}
+        required={fieldProps.required}
+      />
+    );
+  }
+);
+Control.displayName = 'FORM_Control';
+
+export const Form = {
+  Root,
+  Field,
+  Label,
+  Message,
+  ValidityState,
+  Control: RadixForm.Control,
+  Submit: RadixForm.Submit,
+};

package/src/atoms/form.tsx

@@ -1,72 +0,0 @@
-import * as RadixForm from '@radix-ui/react-form';
-import { forwardRef } from 'react';
-
-const Root = forwardRef<HTMLFormElement, RadixForm.FormProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <RadixForm.Root
-        {...rest}
-        className={`FormRoot ${className || ''}`}
-        ref={ref}
-      >
-        {children}
-      </RadixForm.Root>
-    );
-  }
-);
-
-Root.displayName = 'FORM_ROOT';
-
-const Field = forwardRef<HTMLDivElement, RadixForm.FormFieldProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <RadixForm.Field
-        {...rest}
-        className={`FormField ${className || ''}`}
-        ref={ref}
-      >
-        {children}
-      </RadixForm.Field>
-    );
-  }
-);
-Field.displayName = 'FORM_FIELD';
-
-const Label = forwardRef<HTMLLabelElement, RadixForm.FormLabelProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <RadixForm.Label
-        {...rest}
-        className={`FormLabel ${className || ''}`}
-        ref={ref}
-      >
-        {children}
-      </RadixForm.Label>
-    );
-  }
-);
-Label.displayName = 'FORM_Label';
-
-const Message = forwardRef<HTMLSpanElement, RadixForm.FormMessageProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <RadixForm.Message
-        {...rest}
-        className={`FormMessage ${className || ''}`}
-        ref={ref}
-      >
-        {children}
-      </RadixForm.Message>
-    );
-  }
-);
-Message.displayName = 'FORM_Message';
-
-export const Form = {
-  Root,
-  Field,
-  Label,
-  Message,
-  Control: RadixForm.Control,
-  Submit: RadixForm.Submit,
-};