@tipp/ui 1.4.10 → 1.4.12
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/atoms/button.type.js +1 -0
- package/dist/atoms/form.cjs +88 -11
- package/dist/atoms/form.cjs.map +1 -1
- package/dist/atoms/form.d.cts +3 -1
- package/dist/atoms/form.d.ts +3 -1
- package/dist/atoms/form.js +3 -1
- package/dist/atoms/index.cjs +34 -5
- package/dist/atoms/index.cjs.map +1 -1
- package/dist/atoms/index.d.cts +4 -2
- package/dist/atoms/index.d.ts +4 -2
- package/dist/atoms/index.js +14 -13
- package/dist/chunk-2E772Q7M.js +340 -0
- package/dist/chunk-2E772Q7M.js.map +1 -0
- package/dist/chunk-32VPQ7D7.js +115 -0
- package/dist/chunk-32VPQ7D7.js.map +1 -0
- package/dist/chunk-3D63H4NN.js +192 -0
- package/dist/chunk-3D63H4NN.js.map +1 -0
- package/dist/chunk-5AONIQFL.js +109 -0
- package/dist/chunk-5AONIQFL.js.map +1 -0
- package/dist/chunk-5JNG5M3K.js +192 -0
- package/dist/chunk-5JNG5M3K.js.map +1 -0
- package/dist/chunk-6EZF7NBC.js +164 -0
- package/dist/chunk-6EZF7NBC.js.map +1 -0
- package/dist/chunk-6IGZEBJG.js +112 -0
- package/dist/chunk-6IGZEBJG.js.map +1 -0
- package/dist/chunk-6SVCBP7D.js +340 -0
- package/dist/chunk-6SVCBP7D.js.map +1 -0
- package/dist/chunk-7P3RJ3PX.js +114 -0
- package/dist/chunk-7P3RJ3PX.js.map +1 -0
- package/dist/chunk-AA4HC2IG.js +164 -0
- package/dist/chunk-AA4HC2IG.js.map +1 -0
- package/dist/chunk-BH6Y4UOA.js +164 -0
- package/dist/chunk-BH6Y4UOA.js.map +1 -0
- package/dist/chunk-CAI3LDYJ.js +340 -0
- package/dist/chunk-CAI3LDYJ.js.map +1 -0
- package/dist/chunk-CLBSZCMO.js +164 -0
- package/dist/chunk-CLBSZCMO.js.map +1 -0
- package/dist/chunk-DKOJFPCY.js +63 -0
- package/dist/chunk-DKOJFPCY.js.map +1 -0
- package/dist/chunk-DUQ7QVCY.js +340 -0
- package/dist/chunk-DUQ7QVCY.js.map +1 -0
- package/dist/chunk-EYX7O5YA.js +111 -0
- package/dist/chunk-EYX7O5YA.js.map +1 -0
- package/dist/chunk-F44BXTHN.js +63 -0
- package/dist/chunk-F44BXTHN.js.map +1 -0
- package/dist/chunk-FVT3CWDP.js +340 -0
- package/dist/chunk-FVT3CWDP.js.map +1 -0
- package/dist/chunk-FXPW5E3O.js +169 -0
- package/dist/chunk-FXPW5E3O.js.map +1 -0
- package/dist/chunk-GFYZHWFM.js +117 -0
- package/dist/chunk-GFYZHWFM.js.map +1 -0
- package/dist/chunk-GVVNEQAM.js +114 -0
- package/dist/chunk-GVVNEQAM.js.map +1 -0
- package/dist/chunk-HS4UMG25.js +60 -0
- package/dist/chunk-HS4UMG25.js.map +1 -0
- package/dist/chunk-IFONY3P4.js +83 -0
- package/dist/chunk-IFONY3P4.js.map +1 -0
- package/dist/chunk-IH5KYNBX.js +117 -0
- package/dist/chunk-IH5KYNBX.js.map +1 -0
- package/dist/chunk-IJRCXNT4.js +340 -0
- package/dist/chunk-IJRCXNT4.js.map +1 -0
- package/dist/chunk-JOQA4635.js +110 -0
- package/dist/chunk-JOQA4635.js.map +1 -0
- package/dist/chunk-KFUQSMZY.js +340 -0
- package/dist/chunk-KFUQSMZY.js.map +1 -0
- package/dist/chunk-KKEXBKSB.js +112 -0
- package/dist/chunk-KKEXBKSB.js.map +1 -0
- package/dist/chunk-KQ75QB4F.js +340 -0
- package/dist/chunk-KQ75QB4F.js.map +1 -0
- package/dist/chunk-KTVZ4KLX.js +1 -0
- package/dist/chunk-KTVZ4KLX.js.map +1 -0
- package/dist/chunk-LMDAXWJG.js +192 -0
- package/dist/chunk-LMDAXWJG.js.map +1 -0
- package/dist/chunk-LZCKTU33.js +109 -0
- package/dist/chunk-LZCKTU33.js.map +1 -0
- package/dist/chunk-M3XIYHN4.js +340 -0
- package/dist/chunk-M3XIYHN4.js.map +1 -0
- package/dist/chunk-MOAXPZLZ.js +114 -0
- package/dist/chunk-MOAXPZLZ.js.map +1 -0
- package/dist/chunk-NCJ7W6Q6.js +111 -0
- package/dist/chunk-NCJ7W6Q6.js.map +1 -0
- package/dist/chunk-T4CFVC4D.js +83 -0
- package/dist/chunk-T4CFVC4D.js.map +1 -0
- package/dist/chunk-T5SEG6AS.js +164 -0
- package/dist/chunk-T5SEG6AS.js.map +1 -0
- package/dist/chunk-TJKYEERY.js +114 -0
- package/dist/chunk-TJKYEERY.js.map +1 -0
- package/dist/chunk-TOBTSM5I.js +63 -0
- package/dist/chunk-TOBTSM5I.js.map +1 -0
- package/dist/chunk-UGS3D4GN.js +111 -0
- package/dist/chunk-UGS3D4GN.js.map +1 -0
- package/dist/chunk-UNKNG6YR.js +340 -0
- package/dist/chunk-UNKNG6YR.js.map +1 -0
- package/dist/chunk-V2PH6RFH.js +164 -0
- package/dist/chunk-V2PH6RFH.js.map +1 -0
- package/dist/chunk-W3QLZMC4.js +192 -0
- package/dist/chunk-W3QLZMC4.js.map +1 -0
- package/dist/chunk-WLRX3IFJ.js +110 -0
- package/dist/chunk-WLRX3IFJ.js.map +1 -0
- package/dist/chunk-WX4S7KAG.js +109 -0
- package/dist/chunk-WX4S7KAG.js.map +1 -0
- package/dist/chunk-YNIACSWN.js +164 -0
- package/dist/chunk-YNIACSWN.js.map +1 -0
- package/dist/chunk-YRHQKIRO.js +117 -0
- package/dist/chunk-YRHQKIRO.js.map +1 -0
- package/dist/chunk-ZD7MNMED.js +1 -0
- package/dist/chunk-ZD7MNMED.js.map +1 -0
- package/dist/index.cjs +35 -6
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +4 -7
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +4 -2
- package/dist/index.d.ts +4 -2
- package/dist/index.js +21 -20
- package/dist/molecules/date-picker/index.js +2 -2
- package/dist/molecules/expand-table/index.js +9 -8
- package/dist/molecules/expand-table/row.js +7 -6
- package/dist/molecules/form.cjs +218 -0
- package/dist/molecules/form.cjs.map +1 -0
- package/dist/molecules/form.d.cts +22 -0
- package/dist/molecules/form.d.ts +22 -0
- package/dist/molecules/form.js +10 -0
- package/dist/molecules/form.js.map +1 -0
- package/dist/molecules/index.cjs +1 -1
- package/dist/molecules/index.cjs.map +1 -1
- package/dist/molecules/index.js +14 -13
- package/dist/molecules/learning-post.js +2 -2
- package/dist/molecules/navigation.js +7 -6
- package/dist/molecules/tag-selector.cjs +1 -1
- package/dist/molecules/tag-selector.cjs.map +1 -1
- package/dist/molecules/tag-selector.js +8 -7
- package/package.json +3 -3
- package/src/atoms/index.ts +2 -1
- package/src/molecules/form.tsx +122 -0
- package/src/molecules/tag-selector.tsx +1 -1
- package/src/atoms/form.tsx +0 -72
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/form.tsx"],"sourcesContent":["import * as RadixForm from '@radix-ui/react-form';\nimport { createContext, forwardRef, useContext } from 'react';\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}>\n {children}\n\n <RadixForm.ValidityState>\n {(props) => {\n console.log({ props });\n return <></>;\n }}\n </RadixForm.ValidityState>\n </FieldContext.Provider>\n </RadixForm.Field>\n );\n }\n);\nField.displayName = 'FORM_FIELD';\n\nconst Label = forwardRef<HTMLLabelElement, RadixForm.FormLabelProps>(\n ({ children, className, ...rest }, ref) => {\n const fieldProps = useContext(FieldContext);\n return (\n <RadixForm.Label\n {...rest}\n asChild\n className={`FormLabel ${className || ''}`}\n ref={ref}\n >\n <Heading variant=\"heading5\">\n {children}\n {fieldProps.required ? (\n <Typo as=\"span\" color=\"tomato\">\n {` *`}\n </Typo>\n ) : null}\n </Heading>\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 { RadixForm as Form2 };\n\nexport const Form = {\n Root,\n Field,\n Label,\n Message,\n ValidityState,\n Control: RadixForm.Control,\n Submit: RadixForm.Submit,\n};\n"],"mappings":";;;;;;;;;;;;;AAAA,YAAY,eAAe;AAC3B,SAAS,eAAe,YAAY,kBAAkB;AAOhD,SAiCe,UAjCf,KA2BE,YA3BF;AAHN,IAAMA,QAAO;AAAA,EACX,CAAC,IAAkC,QAAQ;AAA1C,iBAAE,YAAU,UANf,IAMG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACX,WACE;AAAA,MAAW;AAAA,MAAV,iCACK,OADL;AAAA,QAEC,WAAW,YAAY,aAAa,EAAE;AAAA,QACtC;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEAA,MAAK,cAAc;AAInB,IAAM,eAAe,cAA8B;AAAA,EACjD,MAAM;AACR,CAAC;AAED,IAAMC,SAAQ;AAAA,EACZ,CAAC,IAAkC,QAAQ;AAA1C,iBAAE,YAAU,UA5Bf,IA4BG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACX,WACE;AAAA,MAAW;AAAA,MAAV,iCACK,OADL;AAAA,QAEC,WAAW,aAAa,aAAa,EAAE;AAAA,QACvC;AAAA,QAEA,+BAAC,aAAa,UAAb,EAAsB,OAAO,MAC3B;AAAA;AAAA,UAED,oBAAW,yBAAV,EACE,WAAC,UAAU;AACV,oBAAQ,IAAI,EAAE,MAAM,CAAC;AACrB,mBAAO,gCAAE;AAAA,UACX,GACF;AAAA,WACF;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AACAA,OAAM,cAAc;AAEpB,IAAMC,SAAQ;AAAA,EACZ,CAAC,IAAkC,QAAQ;AAA1C,iBAAE,YAAU,UApDf,IAoDG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACX,UAAM,aAAa,WAAW,YAAY;AAC1C,WACE;AAAA,MAAW;AAAA,MAAV,iCACK,OADL;AAAA,QAEC,SAAO;AAAA,QACP,WAAW,aAAa,aAAa,EAAE;AAAA,QACvC;AAAA,QAEA,+BAAC,WAAQ,SAAQ,YACd;AAAA;AAAA,UACA,WAAW,WACV,oBAAC,QAAK,IAAG,QAAO,OAAM,UACnB,gBACH,IACE;AAAA,WACN;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AACAA,OAAM,cAAc;AAEpB,IAAMC,WAAU;AAAA,EACd,CAAC,IAAkC,QAAQ;AAA1C,iBAAE,YAAU,UA5Ef,IA4EG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACX,WACE;AAAA,MAAW;AAAA,MAAV,iCACK,OADL;AAAA,QAEC,SAAO;AAAA,QACP,WAAW,eAAe,aAAa,EAAE;AAAA,QACzC;AAAA,QAEA,8BAAC,QAAK,OAAM,OAAO,UAAS;AAAA;AAAA,IAC9B;AAAA,EAEJ;AACF;AACAA,SAAQ,cAAc;AAGtB,IAAMC,WAAU;AAAA,EACd,CAAC,IAAwB,QAAQ;AAAhC,iBAAE,YA7FL,IA6FG,IAAgB,iBAAhB,IAAgB,CAAd;AACD,UAAM,aAAa,WAAW,YAAY;AAC1C,WACE;AAAA,MAAW;AAAA,MAAV,iCACK,OADL;AAAA,QAEC,WAAW,eAAe,aAAa,EAAE;AAAA,QACzC;AAAA,QACA,UAAU,WAAW;AAAA;AAAA,IACvB;AAAA,EAEJ;AACF;AACAA,SAAQ,cAAc;AAIf,IAAM,OAAO;AAAA,EAClB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA;AAAA,EACA,SAAmB;AAAA,EACnB,QAAkB;AACpB;","names":["Root","Field","Label","Message","Control","Root","Field","Label","Message"]}
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Heading
|
|
3
|
+
} from "./chunk-HK224ADT.js";
|
|
4
|
+
import {
|
|
5
|
+
Typo
|
|
6
|
+
} from "./chunk-52MVZ6AN.js";
|
|
7
|
+
import {
|
|
8
|
+
__objRest,
|
|
9
|
+
__spreadProps,
|
|
10
|
+
__spreadValues
|
|
11
|
+
} from "./chunk-N552FDTV.js";
|
|
12
|
+
|
|
13
|
+
// src/molecules/form.tsx
|
|
14
|
+
import * as RadixForm from "@radix-ui/react-form";
|
|
15
|
+
import { createContext, forwardRef, useContext } from "react";
|
|
16
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
17
|
+
var Root2 = forwardRef(
|
|
18
|
+
(_a, ref) => {
|
|
19
|
+
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
|
20
|
+
return /* @__PURE__ */ jsx(
|
|
21
|
+
RadixForm.Root,
|
|
22
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
23
|
+
className: `FormRoot ${className || ""}`,
|
|
24
|
+
ref,
|
|
25
|
+
children
|
|
26
|
+
})
|
|
27
|
+
);
|
|
28
|
+
}
|
|
29
|
+
);
|
|
30
|
+
Root2.displayName = "FORM_ROOT";
|
|
31
|
+
var FieldContext = createContext({
|
|
32
|
+
name: ""
|
|
33
|
+
});
|
|
34
|
+
var Field2 = forwardRef(
|
|
35
|
+
(_a, ref) => {
|
|
36
|
+
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
|
37
|
+
return /* @__PURE__ */ jsx(
|
|
38
|
+
RadixForm.Field,
|
|
39
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
40
|
+
className: `FormField ${className || ""}`,
|
|
41
|
+
ref,
|
|
42
|
+
children: /* @__PURE__ */ jsxs(FieldContext.Provider, { value: rest, children: [
|
|
43
|
+
children,
|
|
44
|
+
/* @__PURE__ */ jsx(RadixForm.ValidityState, {})
|
|
45
|
+
] })
|
|
46
|
+
})
|
|
47
|
+
);
|
|
48
|
+
}
|
|
49
|
+
);
|
|
50
|
+
Field2.displayName = "FORM_FIELD";
|
|
51
|
+
var Label2 = forwardRef(
|
|
52
|
+
(_a, ref) => {
|
|
53
|
+
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
|
54
|
+
const fieldProps = useContext(FieldContext);
|
|
55
|
+
return /* @__PURE__ */ jsx(
|
|
56
|
+
RadixForm.Label,
|
|
57
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
58
|
+
asChild: true,
|
|
59
|
+
className: `FormLabel ${className || ""}`,
|
|
60
|
+
ref,
|
|
61
|
+
children: /* @__PURE__ */ jsxs(Heading, { variant: "heading5", children: [
|
|
62
|
+
children,
|
|
63
|
+
fieldProps.required ? /* @__PURE__ */ jsx(Typo, { as: "span", color: "tomato", children: ` *` }) : null
|
|
64
|
+
] })
|
|
65
|
+
})
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
);
|
|
69
|
+
Label2.displayName = "FORM_Label";
|
|
70
|
+
var Message2 = forwardRef(
|
|
71
|
+
(_a, ref) => {
|
|
72
|
+
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
|
73
|
+
return /* @__PURE__ */ jsx(
|
|
74
|
+
RadixForm.Message,
|
|
75
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
76
|
+
asChild: true,
|
|
77
|
+
className: `FormMessage ${className || ""}`,
|
|
78
|
+
ref,
|
|
79
|
+
children: /* @__PURE__ */ jsx(Typo, { color: "red", children })
|
|
80
|
+
})
|
|
81
|
+
);
|
|
82
|
+
}
|
|
83
|
+
);
|
|
84
|
+
Message2.displayName = "FORM_Message";
|
|
85
|
+
var Control2 = forwardRef(
|
|
86
|
+
(_a, ref) => {
|
|
87
|
+
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
|
|
88
|
+
const fieldProps = useContext(FieldContext);
|
|
89
|
+
return /* @__PURE__ */ jsx(
|
|
90
|
+
RadixForm.Control,
|
|
91
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
92
|
+
className: `FormControl ${className || ""}`,
|
|
93
|
+
ref,
|
|
94
|
+
required: fieldProps.required
|
|
95
|
+
})
|
|
96
|
+
);
|
|
97
|
+
}
|
|
98
|
+
);
|
|
99
|
+
Control2.displayName = "FORM_Control";
|
|
100
|
+
var Form = {
|
|
101
|
+
Root: Root2,
|
|
102
|
+
Field: Field2,
|
|
103
|
+
Label: Label2,
|
|
104
|
+
Message: Message2,
|
|
105
|
+
ValidityState,
|
|
106
|
+
Control: RadixForm.Control,
|
|
107
|
+
Submit: RadixForm.Submit
|
|
108
|
+
};
|
|
109
|
+
|
|
110
|
+
export {
|
|
111
|
+
RadixForm,
|
|
112
|
+
Form
|
|
113
|
+
};
|
|
114
|
+
//# sourceMappingURL=chunk-GVVNEQAM.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/form.tsx"],"sourcesContent":["import * as RadixForm from '@radix-ui/react-form';\nimport { createContext, forwardRef, useContext } from 'react';\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}>\n {children}\n\n <RadixForm.ValidityState></RadixForm.ValidityState>\n </FieldContext.Provider>\n </RadixForm.Field>\n );\n }\n);\nField.displayName = 'FORM_FIELD';\n\nconst Label = forwardRef<HTMLLabelElement, RadixForm.FormLabelProps>(\n ({ children, className, ...rest }, ref) => {\n const fieldProps = useContext(FieldContext);\n return (\n <RadixForm.Label\n {...rest}\n asChild\n className={`FormLabel ${className || ''}`}\n ref={ref}\n >\n <Heading variant=\"heading5\">\n {children}\n {fieldProps.required ? (\n <Typo as=\"span\" color=\"tomato\">\n {` *`}\n </Typo>\n ) : null}\n </Heading>\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 { RadixForm as Form2 };\n\nexport const Form = {\n Root,\n Field,\n Label,\n Message,\n ValidityState,\n Control: RadixForm.Control,\n Submit: RadixForm.Submit,\n};\n"],"mappings":";;;;;;;;;;;;;AAAA,YAAY,eAAe;AAC3B,SAAS,eAAe,YAAY,kBAAkB;AAOhD,cA2BE,YA3BF;AAHN,IAAMA,QAAO;AAAA,EACX,CAAC,IAAkC,QAAQ;AAA1C,iBAAE,YAAU,UANf,IAMG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACX,WACE;AAAA,MAAW;AAAA,MAAV,iCACK,OADL;AAAA,QAEC,WAAW,YAAY,aAAa,EAAE;AAAA,QACtC;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEAA,MAAK,cAAc;AAInB,IAAM,eAAe,cAA8B;AAAA,EACjD,MAAM;AACR,CAAC;AAED,IAAMC,SAAQ;AAAA,EACZ,CAAC,IAAkC,QAAQ;AAA1C,iBAAE,YAAU,UA5Bf,IA4BG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACX,WACE;AAAA,MAAW;AAAA,MAAV,iCACK,OADL;AAAA,QAEC,WAAW,aAAa,aAAa,EAAE;AAAA,QACvC;AAAA,QAEA,+BAAC,aAAa,UAAb,EAAsB,OAAO,MAC3B;AAAA;AAAA,UAED,oBAAW,yBAAV,EAAwB;AAAA,WAC3B;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AACAA,OAAM,cAAc;AAEpB,IAAMC,SAAQ;AAAA,EACZ,CAAC,IAAkC,QAAQ;AAA1C,iBAAE,YAAU,UA/Cf,IA+CG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACX,UAAM,aAAa,WAAW,YAAY;AAC1C,WACE;AAAA,MAAW;AAAA,MAAV,iCACK,OADL;AAAA,QAEC,SAAO;AAAA,QACP,WAAW,aAAa,aAAa,EAAE;AAAA,QACvC;AAAA,QAEA,+BAAC,WAAQ,SAAQ,YACd;AAAA;AAAA,UACA,WAAW,WACV,oBAAC,QAAK,IAAG,QAAO,OAAM,UACnB,gBACH,IACE;AAAA,WACN;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AACAA,OAAM,cAAc;AAEpB,IAAMC,WAAU;AAAA,EACd,CAAC,IAAkC,QAAQ;AAA1C,iBAAE,YAAU,UAvEf,IAuEG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACX,WACE;AAAA,MAAW;AAAA,MAAV,iCACK,OADL;AAAA,QAEC,SAAO;AAAA,QACP,WAAW,eAAe,aAAa,EAAE;AAAA,QACzC;AAAA,QAEA,8BAAC,QAAK,OAAM,OAAO,UAAS;AAAA;AAAA,IAC9B;AAAA,EAEJ;AACF;AACAA,SAAQ,cAAc;AAGtB,IAAMC,WAAU;AAAA,EACd,CAAC,IAAwB,QAAQ;AAAhC,iBAAE,YAxFL,IAwFG,IAAgB,iBAAhB,IAAgB,CAAd;AACD,UAAM,aAAa,WAAW,YAAY;AAC1C,WACE;AAAA,MAAW;AAAA,MAAV,iCACK,OADL;AAAA,QAEC,WAAW,eAAe,aAAa,EAAE;AAAA,QACzC;AAAA,QACA,UAAU,WAAW;AAAA;AAAA,IACvB;AAAA,EAEJ;AACF;AACAA,SAAQ,cAAc;AAIf,IAAM,OAAO;AAAA,EAClB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA;AAAA,EACA,SAAmB;AAAA,EACnB,QAAkB;AACpB;","names":["Root","Field","Label","Message","Control","Root","Field","Label","Message"]}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Button
|
|
3
|
+
} from "./chunk-U7JPP7WJ.js";
|
|
4
|
+
import {
|
|
5
|
+
Box
|
|
6
|
+
} from "./chunk-4Y5BEXVN.js";
|
|
7
|
+
import {
|
|
8
|
+
__objRest,
|
|
9
|
+
__spreadProps,
|
|
10
|
+
__spreadValues
|
|
11
|
+
} from "./chunk-N552FDTV.js";
|
|
12
|
+
|
|
13
|
+
// src/atoms/drawer.tsx
|
|
14
|
+
import { useEffect, useRef } from "react";
|
|
15
|
+
import * as Dialog from "@radix-ui/react-dialog";
|
|
16
|
+
import { Cross1Icon } from "@radix-ui/react-icons";
|
|
17
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
18
|
+
function Root2(props) {
|
|
19
|
+
return /* @__PURE__ */ jsx(Dialog.Root, __spreadValues({}, props));
|
|
20
|
+
}
|
|
21
|
+
function Content2(props) {
|
|
22
|
+
const _a = props, { position = "right", className, children } = _a, rest = __objRest(_a, ["position", "className", "children"]);
|
|
23
|
+
const containerRef = useRef(null);
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
containerRef.current = document.getElementsByClassName("radix-themes")[0];
|
|
26
|
+
}, []);
|
|
27
|
+
return /* @__PURE__ */ jsxs(Dialog.Portal, { container: containerRef.current, children: [
|
|
28
|
+
/* @__PURE__ */ jsx(Dialog.Overlay, { className: "DrawerOverlay" }),
|
|
29
|
+
/* @__PURE__ */ jsxs(
|
|
30
|
+
Dialog.Content,
|
|
31
|
+
__spreadProps(__spreadValues({
|
|
32
|
+
className: `DrawerContent ${position} ${className || ""}`
|
|
33
|
+
}, rest), {
|
|
34
|
+
children: [
|
|
35
|
+
/* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, className: "DialogClose", children: /* @__PURE__ */ jsx(Button, { color: "gray", variant: "transparent", children: /* @__PURE__ */ jsx(Cross1Icon, { height: "18px", width: "18px" }) }) }) }),
|
|
36
|
+
children
|
|
37
|
+
]
|
|
38
|
+
})
|
|
39
|
+
)
|
|
40
|
+
] });
|
|
41
|
+
}
|
|
42
|
+
function Trigger2(props) {
|
|
43
|
+
return /* @__PURE__ */ jsx(Dialog.Trigger, __spreadValues({ asChild: true }, props));
|
|
44
|
+
}
|
|
45
|
+
var Drawer = {
|
|
46
|
+
Root: Dialog.Root,
|
|
47
|
+
Trigger: Trigger2,
|
|
48
|
+
Content: Content2,
|
|
49
|
+
Close: Dialog.Close,
|
|
50
|
+
Title: Dialog.Title,
|
|
51
|
+
Description: Dialog.Description
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
export {
|
|
55
|
+
Root2 as Root,
|
|
56
|
+
Content2 as Content,
|
|
57
|
+
Trigger2 as Trigger,
|
|
58
|
+
Drawer
|
|
59
|
+
};
|
|
60
|
+
//# sourceMappingURL=chunk-HS4UMG25.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/atoms/drawer.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport * as Dialog from '@radix-ui/react-dialog';\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { Button } from './button';\nimport { Box } from './box';\n\nexport function Root(props: Dialog.DialogProps): React.ReactNode {\n return <Dialog.Root {...props} />;\n}\n\ntype ContentProps = Dialog.DialogContentProps & {\n /** Drawer가 붙는 위치, 기본값 right */\n position?: 'left' | 'right' | 'bottom' | 'top';\n};\n\nexport function Content(props: ContentProps): React.ReactElement {\n const { position = 'right', className, children, ...rest } = props;\n\n const containerRef = useRef<Element | null>(null);\n useEffect(() => {\n containerRef.current = document.getElementsByClassName('radix-themes')[0];\n }, []);\n\n return (\n <Dialog.Portal container={containerRef.current}>\n <Dialog.Overlay className=\"DrawerOverlay\" />\n <Dialog.Content\n className={`DrawerContent ${position} ${className || ''}`}\n {...rest}\n >\n <Box>\n <Dialog.Close asChild className=\"DialogClose\">\n <Button color=\"gray\" variant=\"transparent\">\n <Cross1Icon height=\"18px\" width=\"18px\" />\n </Button>\n </Dialog.Close>\n </Box>\n\n {children}\n </Dialog.Content>\n </Dialog.Portal>\n );\n}\n\nexport function Trigger(props: Dialog.DialogTriggerProps): React.ReactNode {\n return <Dialog.Trigger asChild {...props} />;\n}\n\nexport const Drawer = {\n Root: Dialog.Root,\n Trigger,\n Content,\n Close: Dialog.Close,\n Title: Dialog.Title,\n Description: Dialog.Description,\n};\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAgB,WAAW,cAAc;AACzC,YAAY,YAAY;AACxB,SAAS,kBAAkB;AAKlB,cAmBH,YAnBG;AADF,SAASA,MAAK,OAA4C;AAC/D,SAAO,oBAAQ,aAAP,mBAAgB,MAAO;AACjC;AAOO,SAASC,SAAQ,OAAyC;AAC/D,QAA6D,YAArD,aAAW,SAAS,WAAW,SAhBzC,IAgB+D,IAAT,iBAAS,IAAT,CAA5C,YAAoB,aAAW;AAEvC,QAAM,eAAe,OAAuB,IAAI;AAChD,YAAU,MAAM;AACd,iBAAa,UAAU,SAAS,uBAAuB,cAAc,EAAE,CAAC;AAAA,EAC1E,GAAG,CAAC,CAAC;AAEL,SACE,qBAAQ,eAAP,EAAc,WAAW,aAAa,SACrC;AAAA,wBAAQ,gBAAP,EAAe,WAAU,iBAAgB;AAAA,IAC1C;AAAA,MAAQ;AAAA,MAAP;AAAA,QACC,WAAW,iBAAiB,QAAQ,IAAI,aAAa,EAAE;AAAA,SACnD,OAFL;AAAA,QAIC;AAAA,8BAAC,OACC,8BAAQ,cAAP,EAAa,SAAO,MAAC,WAAU,eAC9B,8BAAC,UAAO,OAAM,QAAO,SAAQ,eAC3B,8BAAC,cAAW,QAAO,QAAO,OAAM,QAAO,GACzC,GACF,GACF;AAAA,UAEC;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AAEO,SAASC,SAAQ,OAAmD;AACzE,SAAO,oBAAQ,gBAAP,iBAAe,SAAO,QAAK,MAAO;AAC5C;AAEO,IAAM,SAAS;AAAA,EACpB,MAAa;AAAA,EACb,SAAAA;AAAA,EACA,SAAAD;AAAA,EACA,OAAc;AAAA,EACd,OAAc;AAAA,EACd,aAAoB;AACtB;","names":["Root","Content","Trigger"]}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Typo
|
|
3
|
+
} from "./chunk-52MVZ6AN.js";
|
|
4
|
+
import {
|
|
5
|
+
__objRest,
|
|
6
|
+
__spreadProps,
|
|
7
|
+
__spreadValues
|
|
8
|
+
} from "./chunk-N552FDTV.js";
|
|
9
|
+
|
|
10
|
+
// src/atoms/form.tsx
|
|
11
|
+
import * as RadixForm from "@radix-ui/react-form";
|
|
12
|
+
import { forwardRef } from "react";
|
|
13
|
+
import { jsx } from "react/jsx-runtime";
|
|
14
|
+
var Root2 = forwardRef(
|
|
15
|
+
(_a, ref) => {
|
|
16
|
+
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
|
17
|
+
return /* @__PURE__ */ jsx(
|
|
18
|
+
RadixForm.Root,
|
|
19
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
20
|
+
className: `FormRoot ${className || ""}`,
|
|
21
|
+
ref,
|
|
22
|
+
children
|
|
23
|
+
})
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
);
|
|
27
|
+
Root2.displayName = "FORM_ROOT";
|
|
28
|
+
var Field2 = forwardRef(
|
|
29
|
+
(_a, ref) => {
|
|
30
|
+
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
|
31
|
+
return /* @__PURE__ */ jsx(
|
|
32
|
+
RadixForm.Field,
|
|
33
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
34
|
+
className: `FormField ${className || ""}`,
|
|
35
|
+
ref,
|
|
36
|
+
children
|
|
37
|
+
})
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
);
|
|
41
|
+
Field2.displayName = "FORM_FIELD";
|
|
42
|
+
var Label2 = forwardRef(
|
|
43
|
+
(_a, ref) => {
|
|
44
|
+
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
|
45
|
+
return /* @__PURE__ */ jsx(
|
|
46
|
+
RadixForm.Label,
|
|
47
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
48
|
+
asChild: true,
|
|
49
|
+
className: `FormLabel ${className || ""}`,
|
|
50
|
+
ref,
|
|
51
|
+
children: /* @__PURE__ */ jsx(Typo, { children })
|
|
52
|
+
})
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
);
|
|
56
|
+
Label2.displayName = "FORM_Label";
|
|
57
|
+
var Message2 = forwardRef(
|
|
58
|
+
(_a, ref) => {
|
|
59
|
+
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
|
60
|
+
return /* @__PURE__ */ jsx(
|
|
61
|
+
RadixForm.Message,
|
|
62
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
63
|
+
className: `FormMessage ${className || ""}`,
|
|
64
|
+
ref,
|
|
65
|
+
children
|
|
66
|
+
})
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
);
|
|
70
|
+
Message2.displayName = "FORM_Message";
|
|
71
|
+
var Form = {
|
|
72
|
+
Root: Root2,
|
|
73
|
+
Field: Field2,
|
|
74
|
+
Label: Label2,
|
|
75
|
+
Message: Message2,
|
|
76
|
+
Control: RadixForm.Control,
|
|
77
|
+
Submit: RadixForm.Submit
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
export {
|
|
81
|
+
Form
|
|
82
|
+
};
|
|
83
|
+
//# sourceMappingURL=chunk-IFONY3P4.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/atoms/form.tsx"],"sourcesContent":["import * as RadixForm from '@radix-ui/react-form';\nimport { forwardRef } from 'react';\nimport { Typo } from './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\nconst Field = forwardRef<HTMLDivElement, RadixForm.FormFieldProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <RadixForm.Field\n {...rest}\n className={`FormField ${className || ''}`}\n ref={ref}\n >\n {children}\n </RadixForm.Field>\n );\n }\n);\nField.displayName = 'FORM_FIELD';\n\nconst Label = forwardRef<HTMLLabelElement, RadixForm.FormLabelProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <RadixForm.Label\n {...rest}\n asChild\n className={`FormLabel ${className || ''}`}\n ref={ref}\n >\n <Typo>{children}</Typo>\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 className={`FormMessage ${className || ''}`}\n ref={ref}\n >\n {children}\n </RadixForm.Message>\n );\n }\n);\nMessage.displayName = 'FORM_Message';\n\nexport const Form = {\n Root,\n Field,\n Label,\n Message,\n Control: RadixForm.Control,\n Submit: RadixForm.Submit,\n};\n"],"mappings":";;;;;;;;;;AAAA,YAAY,eAAe;AAC3B,SAAS,kBAAkB;AAMrB;AAHN,IAAMA,QAAO;AAAA,EACX,CAAC,IAAkC,QAAQ;AAA1C,iBAAE,YAAU,UALf,IAKG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACX,WACE;AAAA,MAAW;AAAA,MAAV,iCACK,OADL;AAAA,QAEC,WAAW,YAAY,aAAa,EAAE;AAAA,QACtC;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEAA,MAAK,cAAc;AAEnB,IAAMC,SAAQ;AAAA,EACZ,CAAC,IAAkC,QAAQ;AAA1C,iBAAE,YAAU,UArBf,IAqBG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACX,WACE;AAAA,MAAW;AAAA,MAAV,iCACK,OADL;AAAA,QAEC,WAAW,aAAa,aAAa,EAAE;AAAA,QACvC;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACAA,OAAM,cAAc;AAEpB,IAAMC,SAAQ;AAAA,EACZ,CAAC,IAAkC,QAAQ;AAA1C,iBAAE,YAAU,UApCf,IAoCG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACX,WACE;AAAA,MAAW;AAAA,MAAV,iCACK,OADL;AAAA,QAEC,SAAO;AAAA,QACP,WAAW,aAAa,aAAa,EAAE;AAAA,QACvC;AAAA,QAEA,8BAAC,QAAM,UAAS;AAAA;AAAA,IAClB;AAAA,EAEJ;AACF;AACAA,OAAM,cAAc;AAEpB,IAAMC,WAAU;AAAA,EACd,CAAC,IAAkC,QAAQ;AAA1C,iBAAE,YAAU,UApDf,IAoDG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACX,WACE;AAAA,MAAW;AAAA,MAAV,iCACK,OADL;AAAA,QAEC,WAAW,eAAe,aAAa,EAAE;AAAA,QACzC;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACAA,SAAQ,cAAc;AAEf,IAAM,OAAO;AAAA,EAClB,MAAAH;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAmB;AAAA,EACnB,QAAkB;AACpB;","names":["Root","Field","Label","Message"]}
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Heading
|
|
3
|
+
} from "./chunk-HK224ADT.js";
|
|
4
|
+
import {
|
|
5
|
+
Typo
|
|
6
|
+
} from "./chunk-52MVZ6AN.js";
|
|
7
|
+
import {
|
|
8
|
+
__objRest,
|
|
9
|
+
__spreadProps,
|
|
10
|
+
__spreadValues
|
|
11
|
+
} from "./chunk-N552FDTV.js";
|
|
12
|
+
|
|
13
|
+
// src/molecules/form.tsx
|
|
14
|
+
import * as RadixForm from "@radix-ui/react-form";
|
|
15
|
+
import { createContext, forwardRef, useContext } from "react";
|
|
16
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
17
|
+
var Root2 = forwardRef(
|
|
18
|
+
(_a, ref) => {
|
|
19
|
+
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
|
20
|
+
return /* @__PURE__ */ jsx(
|
|
21
|
+
RadixForm.Root,
|
|
22
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
23
|
+
className: `FormRoot ${className || ""}`,
|
|
24
|
+
ref,
|
|
25
|
+
children
|
|
26
|
+
})
|
|
27
|
+
);
|
|
28
|
+
}
|
|
29
|
+
);
|
|
30
|
+
Root2.displayName = "FORM_ROOT";
|
|
31
|
+
var FieldContext = createContext({
|
|
32
|
+
name: ""
|
|
33
|
+
});
|
|
34
|
+
var Field2 = forwardRef(
|
|
35
|
+
(_a, ref) => {
|
|
36
|
+
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
|
37
|
+
return /* @__PURE__ */ jsx(
|
|
38
|
+
RadixForm.Field,
|
|
39
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
40
|
+
className: `FormField ${className || ""}`,
|
|
41
|
+
ref,
|
|
42
|
+
children: /* @__PURE__ */ jsxs(FieldContext.Provider, { value: rest, children: [
|
|
43
|
+
children,
|
|
44
|
+
/* @__PURE__ */ jsx(RadixForm.ValidityState, { children: (props) => {
|
|
45
|
+
console.log({ props });
|
|
46
|
+
return /* @__PURE__ */ jsx(Fragment, {});
|
|
47
|
+
} })
|
|
48
|
+
] })
|
|
49
|
+
})
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
);
|
|
53
|
+
Field2.displayName = "FORM_FIELD";
|
|
54
|
+
var Label2 = forwardRef(
|
|
55
|
+
(_a, ref) => {
|
|
56
|
+
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
|
57
|
+
const fieldProps = useContext(FieldContext);
|
|
58
|
+
return /* @__PURE__ */ jsx(
|
|
59
|
+
RadixForm.Label,
|
|
60
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
61
|
+
asChild: true,
|
|
62
|
+
className: `FormLabel ${className || ""}`,
|
|
63
|
+
ref,
|
|
64
|
+
children: /* @__PURE__ */ jsxs(Heading, { variant: "heading5", children: [
|
|
65
|
+
children,
|
|
66
|
+
fieldProps.required ? /* @__PURE__ */ jsx(Typo, { as: "span", color: "tomato", children: ` *` }) : null
|
|
67
|
+
] })
|
|
68
|
+
})
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
);
|
|
72
|
+
Label2.displayName = "FORM_Label";
|
|
73
|
+
var Message2 = forwardRef(
|
|
74
|
+
(_a, ref) => {
|
|
75
|
+
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
|
76
|
+
return /* @__PURE__ */ jsx(
|
|
77
|
+
RadixForm.Message,
|
|
78
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
79
|
+
asChild: true,
|
|
80
|
+
className: `FormMessage ${className || ""}`,
|
|
81
|
+
ref,
|
|
82
|
+
children: /* @__PURE__ */ jsx(Typo, { color: "red", children })
|
|
83
|
+
})
|
|
84
|
+
);
|
|
85
|
+
}
|
|
86
|
+
);
|
|
87
|
+
Message2.displayName = "FORM_Message";
|
|
88
|
+
var Control2 = forwardRef(
|
|
89
|
+
(_a, ref) => {
|
|
90
|
+
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
|
|
91
|
+
const fieldProps = useContext(FieldContext);
|
|
92
|
+
return /* @__PURE__ */ jsx(
|
|
93
|
+
RadixForm.Control,
|
|
94
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
95
|
+
className: `FormControl ${className || ""}`,
|
|
96
|
+
ref,
|
|
97
|
+
required: fieldProps.required
|
|
98
|
+
})
|
|
99
|
+
);
|
|
100
|
+
}
|
|
101
|
+
);
|
|
102
|
+
Control2.displayName = "FORM_Control";
|
|
103
|
+
var Form = {
|
|
104
|
+
Root: Root2,
|
|
105
|
+
Field: Field2,
|
|
106
|
+
Label: Label2,
|
|
107
|
+
Message: Message2,
|
|
108
|
+
ValidityState,
|
|
109
|
+
Control: RadixForm.Control,
|
|
110
|
+
Submit: RadixForm.Submit
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
export {
|
|
114
|
+
RadixForm,
|
|
115
|
+
Form
|
|
116
|
+
};
|
|
117
|
+
//# sourceMappingURL=chunk-IH5KYNBX.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/form.tsx"],"sourcesContent":["import * as RadixForm from '@radix-ui/react-form';\nimport { createContext, forwardRef, useContext } from 'react';\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}>\n {children}\n\n <RadixForm.ValidityState>\n {(props) => {\n console.log({ props });\n return <></>;\n }}\n </RadixForm.ValidityState>\n </FieldContext.Provider>\n </RadixForm.Field>\n );\n }\n);\nField.displayName = 'FORM_FIELD';\n\nconst Label = forwardRef<HTMLLabelElement, RadixForm.FormLabelProps>(\n ({ children, className, ...rest }, ref) => {\n const fieldProps = useContext(FieldContext);\n return (\n <RadixForm.Label\n {...rest}\n asChild\n className={`FormLabel ${className || ''}`}\n ref={ref}\n >\n <Heading variant=\"heading5\">\n {children}\n {fieldProps.required ? (\n <Typo as=\"span\" color=\"tomato\">\n {` *`}\n </Typo>\n ) : null}\n </Heading>\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 { RadixForm as Form2 };\n\nexport const Form = {\n Root,\n Field,\n Label,\n Message,\n ValidityState,\n Control: RadixForm.Control,\n Submit: RadixForm.Submit,\n};\n"],"mappings":";;;;;;;;;;;;;AAAA,YAAY,eAAe;AAC3B,SAAS,eAAe,YAAY,kBAAkB;AAOhD,SAiCe,UAjCf,KA2BE,YA3BF;AAHN,IAAMA,QAAO;AAAA,EACX,CAAC,IAAkC,QAAQ;AAA1C,iBAAE,YAAU,UANf,IAMG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACX,WACE;AAAA,MAAW;AAAA,MAAV,iCACK,OADL;AAAA,QAEC,WAAW,YAAY,aAAa,EAAE;AAAA,QACtC;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEAA,MAAK,cAAc;AAInB,IAAM,eAAe,cAA8B;AAAA,EACjD,MAAM;AACR,CAAC;AAED,IAAMC,SAAQ;AAAA,EACZ,CAAC,IAAkC,QAAQ;AAA1C,iBAAE,YAAU,UA5Bf,IA4BG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACX,WACE;AAAA,MAAW;AAAA,MAAV,iCACK,OADL;AAAA,QAEC,WAAW,aAAa,aAAa,EAAE;AAAA,QACvC;AAAA,QAEA,+BAAC,aAAa,UAAb,EAAsB,OAAO,MAC3B;AAAA;AAAA,UAED,oBAAW,yBAAV,EACE,WAAC,UAAU;AACV,oBAAQ,IAAI,EAAE,MAAM,CAAC;AACrB,mBAAO,gCAAE;AAAA,UACX,GACF;AAAA,WACF;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AACAA,OAAM,cAAc;AAEpB,IAAMC,SAAQ;AAAA,EACZ,CAAC,IAAkC,QAAQ;AAA1C,iBAAE,YAAU,UApDf,IAoDG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACX,UAAM,aAAa,WAAW,YAAY;AAC1C,WACE;AAAA,MAAW;AAAA,MAAV,iCACK,OADL;AAAA,QAEC,SAAO;AAAA,QACP,WAAW,aAAa,aAAa,EAAE;AAAA,QACvC;AAAA,QAEA,+BAAC,WAAQ,SAAQ,YACd;AAAA;AAAA,UACA,WAAW,WACV,oBAAC,QAAK,IAAG,QAAO,OAAM,UACnB,gBACH,IACE;AAAA,WACN;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AACAA,OAAM,cAAc;AAEpB,IAAMC,WAAU;AAAA,EACd,CAAC,IAAkC,QAAQ;AAA1C,iBAAE,YAAU,UA5Ef,IA4EG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACX,WACE;AAAA,MAAW;AAAA,MAAV,iCACK,OADL;AAAA,QAEC,SAAO;AAAA,QACP,WAAW,eAAe,aAAa,EAAE;AAAA,QACzC;AAAA,QAEA,8BAAC,QAAK,OAAM,OAAO,UAAS;AAAA;AAAA,IAC9B;AAAA,EAEJ;AACF;AACAA,SAAQ,cAAc;AAGtB,IAAMC,WAAU;AAAA,EACd,CAAC,IAAwB,QAAQ;AAAhC,iBAAE,YA7FL,IA6FG,IAAgB,iBAAhB,IAAgB,CAAd;AACD,UAAM,aAAa,WAAW,YAAY;AAC1C,WACE;AAAA,MAAW;AAAA,MAAV,iCACK,OADL;AAAA,QAEC,WAAW,eAAe,aAAa,EAAE;AAAA,QACzC;AAAA,QACA,UAAU,WAAW;AAAA;AAAA,IACvB;AAAA,EAEJ;AACF;AACAA,SAAQ,cAAc;AAIf,IAAM,OAAO;AAAA,EAClB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA;AAAA,EACA,SAAmB;AAAA,EACnB,QAAkB;AACpB;","names":["Root","Field","Label","Message","Control","Root","Field","Label","Message"]}
|