@tipp/ui 1.4.11 → 1.4.12

package/dist/chunk-YRHQKIRO.js

@@ -0,0 +1,117 @@
+import {
+  Heading
+} from "./chunk-HK224ADT.js";
+import {
+  Typo
+} from "./chunk-52MVZ6AN.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-N552FDTV.js";
+
+// src/molecules/form.tsx
+import * as RadixForm from "@radix-ui/react-form";
+import { createContext, forwardRef, useContext } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Root2 = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+    return /* @__PURE__ */ jsx(
+      RadixForm.Root,
+      __spreadProps(__spreadValues({}, rest), {
+        className: `FormRoot ${className || ""}`,
+        ref,
+        children
+      })
+    );
+  }
+);
+Root2.displayName = "FORM_ROOT";
+var FieldContext = createContext({
+  name: ""
+});
+var Field2 = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+    return /* @__PURE__ */ jsx(
+      RadixForm.Field,
+      __spreadProps(__spreadValues({}, rest), {
+        className: `FormField ${className || ""}`,
+        ref,
+        children: /* @__PURE__ */ jsxs(FieldContext.Provider, { value: rest, children: [
+          children,
+          /* @__PURE__ */ jsx(RadixForm.ValidityState, { children: (props) => {
+            console.log({ props }, rest.name);
+            return /* @__PURE__ */ jsx(Fragment, {});
+          } })
+        ] })
+      })
+    );
+  }
+);
+Field2.displayName = "FORM_FIELD";
+var Label2 = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+    const fieldProps = useContext(FieldContext);
+    return /* @__PURE__ */ jsx(
+      RadixForm.Label,
+      __spreadProps(__spreadValues({}, rest), {
+        asChild: true,
+        className: `FormLabel ${className || ""}`,
+        ref,
+        children: /* @__PURE__ */ jsxs(Heading, { variant: "heading5", children: [
+          children,
+          fieldProps.required ? /* @__PURE__ */ jsx(Typo, { as: "span", color: "tomato", children: ` *` }) : null
+        ] })
+      })
+    );
+  }
+);
+Label2.displayName = "FORM_Label";
+var Message2 = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+    return /* @__PURE__ */ jsx(
+      RadixForm.Message,
+      __spreadProps(__spreadValues({}, rest), {
+        asChild: true,
+        className: `FormMessage ${className || ""}`,
+        ref,
+        children: /* @__PURE__ */ jsx(Typo, { color: "red", children })
+      })
+    );
+  }
+);
+Message2.displayName = "FORM_Message";
+var Control2 = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+    const fieldProps = useContext(FieldContext);
+    return /* @__PURE__ */ jsx(
+      RadixForm.Control,
+      __spreadProps(__spreadValues({}, rest), {
+        className: `FormControl ${className || ""}`,
+        ref,
+        required: fieldProps.required
+      })
+    );
+  }
+);
+Control2.displayName = "FORM_Control";
+var Form = {
+  Root: Root2,
+  Field: Field2,
+  Label: Label2,
+  Message: Message2,
+  ValidityState,
+  Control: RadixForm.Control,
+  Submit: RadixForm.Submit
+};
+
+export {
+  RadixForm,
+  Form
+};
+//# sourceMappingURL=chunk-YRHQKIRO.js.map

package/dist/chunk-YRHQKIRO.js.map

@@ -0,0 +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 }, rest.name);\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,GAAG,KAAK,IAAI;AAChC,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"]}

package/dist/index.cjs

@@ -938,7 +938,7 @@ function ToastContainer(props) {
   );
 }
 
-// src/atoms/form.tsx
+// src/molecules/form.tsx
 var RadixForm = __toESM(require("@radix-ui/react-form"), 1);
 var import_react17 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
@@ -956,6 +956,9 @@ var Root6 = (0, import_react17.forwardRef)(
   }
 );
 Root6.displayName = "FORM_ROOT";
+var FieldContext = (0, import_react17.createContext)({
+  name: ""
+});
 var Field2 = (0, import_react17.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
@@ -964,21 +967,30 @@ var Field2 = (0, import_react17.forwardRef)(
       __spreadProps(__spreadValues({}, rest), {
         className: `FormField ${className || ""}`,
         ref,
-        children
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(FieldContext.Provider, { value: rest, children })
       })
     );
   }
 );
 Field2.displayName = "FORM_FIELD";
+function HeadingLabel(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Heading2, __spreadProps(__spreadValues({ variant: "heading5" }, props), { children: props.children }));
+}
 var Label2 = (0, import_react17.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+    var _b = _a, { children, className, variant = "body" } = _b, rest = __objRest(_b, ["children", "className", "variant"]);
+    const Comp = variant === "title" ? HeadingLabel : Typo;
+    const fieldProps = (0, import_react17.useContext)(FieldContext);
     return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       RadixForm.Label,
       __spreadProps(__spreadValues({}, rest), {
+        asChild: true,
         className: `FormLabel ${className || ""}`,
         ref,
-        children
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Comp, { children: [
+          children,
+          fieldProps.required ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Typo, { as: "span", color: "tomato", children: ` *` }) : null
+        ] })
       })
     );
   }
@@ -990,19 +1002,36 @@ var Message2 = (0, import_react17.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       RadixForm.Message,
       __spreadProps(__spreadValues({}, rest), {
+        asChild: true,
         className: `FormMessage ${className || ""}`,
         ref,
-        children
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Typo, { color: "red", children })
       })
     );
   }
 );
 Message2.displayName = "FORM_Message";
+var Control2 = (0, import_react17.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+    const fieldProps = (0, import_react17.useContext)(FieldContext);
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      RadixForm.Control,
+      __spreadProps(__spreadValues({}, rest), {
+        className: `FormControl ${className || ""}`,
+        ref,
+        required: fieldProps.required
+      })
+    );
+  }
+);
+Control2.displayName = "FORM_Control";
 var Form = {
   Root: Root6,
   Field: Field2,
   Label: Label2,
   Message: Message2,
+  ValidityState,
   Control: RadixForm.Control,
   Submit: RadixForm.Submit
 };