@trsys-tech/matrix-library 0.6.0 → 1.0.0-canary.0

package/dist/dialog.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.es.js","sources":["../src/components/dialog/Dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport type {\n  DialogContentProps,\n  DialogTriggerProps,\n  DialogProps,\n  DialogCloseProps,\n  DialogTitleProps,\n  DialogPortalProps,\n  DialogOverlayProps,\n  DialogDescriptionProps,\n} from \"@radix-ui/react-dialog\";\nimport { XMark } from \"@trsys-tech/matrix-icons\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst Dialog = DialogPrimitive.Root;\n\nconst DialogTrigger = DialogPrimitive.Trigger;\n\nconst DialogPortal = DialogPrimitive.Portal;\n\nconst DialogClose = DialogPrimitive.Close;\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className,\n    )}\n    {...props}\n  />\n));\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName;\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <DialogPrimitive.Close className=\"absolute right-4 top-4 rounded-sm disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\">\n        <XMark className=\"h-5 w-5\" />\n        <span className=\"sr-only\">Close</span>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Content>\n  </DialogPortal>\n));\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn(\"flex flex-col space-y-1.5 text-left\", className)} {...props} />\n);\nDialogHeader.displayName = \"DialogHeader\";\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn(\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\", className)} {...props} />\n);\nDialogFooter.displayName = \"DialogFooter\";\n\nconst DialogTitle = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Title>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>>(\n  ({ className, ...props }, ref) => (\n    <DialogPrimitive.Title ref={ref} className={cn(\"text-lg font-semibold leading-none tracking-tight\", className)} {...props} />\n  ),\n);\nDialogTitle.displayName = DialogPrimitive.Title.displayName;\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => <DialogPrimitive.Description ref={ref} className={cn(\"text-sm text-muted-foreground\", className)} {...props} />);\nDialogDescription.displayName = DialogPrimitive.Description.displayName;\n\nexport { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription };\nexport type {\n  DialogContentProps,\n  DialogTriggerProps,\n  DialogProps,\n  DialogCloseProps,\n  DialogTitleProps,\n  DialogPortalProps,\n  DialogOverlayProps,\n  DialogDescriptionProps,\n};\n"],"names":["Dialog","DialogPrimitive","DialogTrigger","DialogPortal","DialogClose","DialogOverlay","React","className","props","ref","jsx","cn","DialogContent","children","jsxs","XMark","DialogHeader","DialogFooter","DialogTitle","DialogDescription"],"mappings":";;;;;AAkBA,MAAMA,IAASC,EAAgB,MAEzBC,IAAgBD,EAAgB,SAEhCE,IAAeF,EAAgB,QAE/BG,IAAcH,EAAgB,OAE9BI,IAAgBC,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACT,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAQ;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAc,cAAcJ,EAAgB,QAAQ;AAEpD,MAAMW,IAAgBN,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,UAAAM,GAAU,GAAGL,EAAA,GAASC,MACpC,gBAAAK,EAACX,GAAA,EACC,UAAA;AAAA,EAAA,gBAAAO,EAACL,GAAA,EAAc;AAAA,EACf,gBAAAS;AAAA,IAACb,EAAgB;AAAA,IAAhB;AAAA,MACC,KAAAQ;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAK;AAAA,QACD,gBAAAC,EAACb,EAAgB,OAAhB,EAAsB,WAAU,sIAC/B,UAAA;AAAA,UAAA,gBAAAS,EAACK,GAAA,EAAM,WAAU,UAAA,CAAU;AAAA,UAC3B,gBAAAL,EAAC,QAAA,EAAK,WAAU,WAAU,UAAA,QAAA,CAAK;AAAA,QAAA,EAAA,CACjC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AACF,GACF,CACD;AACDE,EAAc,cAAcX,EAAgB,QAAQ;AAEpD,MAAMe,IAAe,CAAC,EAAE,WAAAT,GAAW,GAAGC,EAAA,MACpC,gBAAAE,EAAC,OAAA,EAAI,WAAWC,EAAG,uCAAuCJ,CAAS,GAAI,GAAGC,EAAA,CAAO;AAEnFQ,EAAa,cAAc;AAE3B,MAAMC,IAAe,CAAC,EAAE,WAAAV,GAAW,GAAGC,EAAA,MACpC,gBAAAE,EAAC,OAAA,EAAI,WAAWC,EAAG,iEAAiEJ,CAAS,GAAI,GAAGC,EAAA,CAAO;AAE7GS,EAAa,cAAc;AAE3B,MAAMC,IAAcZ,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MACxB,gBAAAC,EAACT,EAAgB,OAAhB,EAAsB,KAAAQ,GAAU,WAAWE,EAAG,qDAAqDJ,CAAS,GAAI,GAAGC,EAAA,CAAO;AAE/H;AACAU,EAAY,cAAcjB,EAAgB,MAAM;AAEhD,MAAMkB,IAAoBb,EAAM,WAG9B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAAQ,gBAAAC,EAACT,EAAgB,aAAhB,EAA4B,KAAAQ,GAAU,WAAWE,EAAG,iCAAiCJ,CAAS,GAAI,GAAGC,GAAO,CAAE;AACnJW,EAAkB,cAAclB,EAAgB,YAAY;"}
+{"version":3,"file":"dialog.es.js","sources":["../src/components/dialog/Dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport type {\n  DialogContentProps,\n  DialogTriggerProps,\n  DialogProps,\n  DialogCloseProps,\n  DialogTitleProps,\n  DialogPortalProps,\n  DialogOverlayProps,\n  DialogDescriptionProps,\n} from \"@radix-ui/react-dialog\";\nimport { XMark } from \"@trsys-tech/matrix-icons\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst Dialog = DialogPrimitive.Root;\n\nconst DialogTrigger = DialogPrimitive.Trigger;\n\nconst DialogPortal = DialogPrimitive.Portal;\n\nconst DialogClose = DialogPrimitive.Close;\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"mtx-fixed mtx-inset-0 mtx-z-50 mtx-bg-black/80  data-[state=open]:mtx-animate-in data-[state=closed]:mtx-animate-out data-[state=closed]:mtx-fade-out-0 data-[state=open]:mtx-fade-in-0\",\n      className,\n    )}\n    {...props}\n  />\n));\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName;\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"mtx-fixed mtx-left-[50%] mtx-top-[50%] mtx-z-50 mtx-grid mtx-w-full mtx-max-w-lg mtx-translate-x-[-50%] mtx-translate-y-[-50%] mtx-gap-4 mtx-border mtx-bg-background mtx-p-6 mtx-shadow-lg mtx-duration-200 data-[state=open]:mtx-animate-in data-[state=closed]:mtx-animate-out data-[state=closed]:mtx-fade-out-0 data-[state=open]:mtx-fade-in-0 data-[state=closed]:mtx-zoom-out-95 data-[state=open]:mtx-zoom-in-95 data-[state=closed]:mtx-slide-out-to-left-1/2 data-[state=closed]:mtx-slide-out-to-top-[48%] data-[state=open]:mtx-slide-in-from-left-1/2 data-[state=open]:mtx-slide-in-from-top-[48%] sm:mtx-rounded-lg\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <DialogPrimitive.Close className=\"mtx-absolute mtx-right-4 mtx-top-4 mtx-rounded-sm disabled:mtx-pointer-events-none data-[state=open]:mtx-bg-accent data-[state=open]:mtx-text-muted-foreground\">\n        <XMark className=\"mtx-h-5 mtx-w-5\" />\n        <span className=\"mtx-sr-only\">Close</span>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Content>\n  </DialogPortal>\n));\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn(\"mtx-flex mtx-flex-col mtx-space-y-1.5 mtx-text-left\", className)} {...props} />\n);\nDialogHeader.displayName = \"DialogHeader\";\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn(\"mtx-flex mtx-flex-col-reverse sm:mtx-flex-row sm:mtx-justify-end sm:mtx-space-x-2\", className)} {...props} />\n);\nDialogFooter.displayName = \"DialogFooter\";\n\nconst DialogTitle = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Title>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>>(\n  ({ className, ...props }, ref) => (\n    <DialogPrimitive.Title ref={ref} className={cn(\"mtx-text-lg mtx-font-semibold mtx-leading-none mtx-tracking-tight\", className)} {...props} />\n  ),\n);\nDialogTitle.displayName = DialogPrimitive.Title.displayName;\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description ref={ref} className={cn(\"mtx-text-sm mtx-text-muted-foreground\", className)} {...props} />\n));\nDialogDescription.displayName = DialogPrimitive.Description.displayName;\n\nexport { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription };\nexport type {\n  DialogContentProps,\n  DialogTriggerProps,\n  DialogProps,\n  DialogCloseProps,\n  DialogTitleProps,\n  DialogPortalProps,\n  DialogOverlayProps,\n  DialogDescriptionProps,\n};\n"],"names":["Dialog","DialogPrimitive","DialogTrigger","DialogPortal","DialogClose","DialogOverlay","React","className","props","ref","jsx","cn","DialogContent","children","jsxs","XMark","DialogHeader","DialogFooter","DialogTitle","DialogDescription"],"mappings":";;;;;AAkBA,MAAMA,IAASC,EAAgB,MAEzBC,IAAgBD,EAAgB,SAEhCE,IAAeF,EAAgB,QAE/BG,IAAcH,EAAgB,OAE9BI,IAAgBC,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACT,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAQ;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAc,cAAcJ,EAAgB,QAAQ;AAEpD,MAAMW,IAAgBN,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,UAAAM,GAAU,GAAGL,EAAA,GAASC,MACpC,gBAAAK,EAACX,GAAA,EACC,UAAA;AAAA,EAAA,gBAAAO,EAACL,GAAA,EAAc;AAAA,EACf,gBAAAS;AAAA,IAACb,EAAgB;AAAA,IAAhB;AAAA,MACC,KAAAQ;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAK;AAAA,QACD,gBAAAC,EAACb,EAAgB,OAAhB,EAAsB,WAAU,kKAC/B,UAAA;AAAA,UAAA,gBAAAS,EAACK,GAAA,EAAM,WAAU,kBAAA,CAAkB;AAAA,UACnC,gBAAAL,EAAC,QAAA,EAAK,WAAU,eAAc,UAAA,QAAA,CAAK;AAAA,QAAA,EAAA,CACrC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AACF,GACF,CACD;AACDE,EAAc,cAAcX,EAAgB,QAAQ;AAEpD,MAAMe,IAAe,CAAC,EAAE,WAAAT,GAAW,GAAGC,EAAA,MACpC,gBAAAE,EAAC,OAAA,EAAI,WAAWC,EAAG,uDAAuDJ,CAAS,GAAI,GAAGC,EAAA,CAAO;AAEnGQ,EAAa,cAAc;AAE3B,MAAMC,IAAe,CAAC,EAAE,WAAAV,GAAW,GAAGC,EAAA,MACpC,gBAAAE,EAAC,OAAA,EAAI,WAAWC,EAAG,qFAAqFJ,CAAS,GAAI,GAAGC,EAAA,CAAO;AAEjIS,EAAa,cAAc;AAE3B,MAAMC,IAAcZ,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MACxB,gBAAAC,EAACT,EAAgB,OAAhB,EAAsB,KAAAQ,GAAU,WAAWE,EAAG,qEAAqEJ,CAAS,GAAI,GAAGC,EAAA,CAAO;AAE/I;AACAU,EAAY,cAAcjB,EAAgB,MAAM;AAEhD,MAAMkB,IAAoBb,EAAM,WAG9B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC,EAACT,EAAgB,aAAhB,EAA4B,KAAAQ,GAAU,WAAWE,EAAG,yCAAyCJ,CAAS,GAAI,GAAGC,GAAO,CACtH;AACDW,EAAkB,cAAclB,EAAgB,YAAY;"}

package/dist/drawer.es.js

@@ -1,49 +1,49 @@
-import { jsx as e, Fragment as v, jsxs as b } from "react/jsx-runtime";
-import * as h from "react";
-import { Slot as g } from "@radix-ui/react-slot";
+import { jsx as r, Fragment as v, jsxs as w } from "react/jsx-runtime";
+import * as p from "react";
+import { Slot as b } from "@radix-ui/react-slot";
 import { ChevronsRight as C } from "@trsys-tech/matrix-icons";
 import { createContextScope as D } from "@radix-ui/react-context";
-import { cn as i } from "./utils.es.js";
+import { cn as a } from "./utils.es.js";
 import { Modal as M } from "./modal.es.js";
 import { IconButton as R } from "./iconbutton.es.js";
 import { useIsMobile as E } from "./use-mobile.es.js";
-const w = "Drawer", [A] = D(w), [_, N] = A(w), j = h.forwardRef((t, r) => {
-  const { asChild: c, anchor: n = "right", children: o, open: l, width: d = 240, className: s, onClose: a, __scopeDrawer: f, ...m } = t, p = c ? g : "div", u = E();
-  return /* @__PURE__ */ e(p, { ref: r, className: i("flex", s), ...m, children: /* @__PURE__ */ e(_, { anchor: n, onClose: a, open: l, width: d, isMobile: u, scope: f, children: o }) });
+const u = "Drawer", [A] = D(u), [_, g] = A(u), j = p.forwardRef((o, t) => {
+  const { asChild: x, anchor: m = "right", children: e, open: n, width: i = 240, className: l, onClose: s, __scopeDrawer: c, ...d } = o, f = x ? b : "div", h = E();
+  return /* @__PURE__ */ r(f, { ref: t, className: a("mtx-flex", l), ...d, children: /* @__PURE__ */ r(_, { anchor: m, onClose: s, open: n, width: i, isMobile: h, scope: c, children: e }) });
 });
-j.displayName = w;
-const x = "DrawerMain", k = h.forwardRef(
-  ({ asChild: t, children: r, className: c, style: n, __scopeDrawer: o, ...l }, d) => {
-    const s = t ? g : "div", { anchor: a, open: f, width: m, isMobile: p } = N(x, o), u = h.useMemo(() => p ? {} : a === "left" ? { marginInlineStart: f ? m : 0 } : { marginInlineEnd: f ? m : 0 }, [a, f, m, p]);
-    return /* @__PURE__ */ e(s, { ref: d, className: i("flex-grow overflow-hidden", c), style: { ...n, ...u }, ...l, children: r });
+j.displayName = u;
+const N = "DrawerMain", k = p.forwardRef(
+  ({ asChild: o, children: t, className: x, style: m, __scopeDrawer: e, ...n }, i) => {
+    const l = o ? b : "div", { anchor: s, open: c, width: d, isMobile: f } = g(N, e), h = p.useMemo(() => f ? {} : s === "left" ? { marginInlineStart: c ? d : 0 } : { marginInlineEnd: c ? d : 0 }, [s, c, d, f]);
+    return /* @__PURE__ */ r(l, { ref: i, className: a("mtx-flex-grow mtx-overflow-hidden", x), style: { ...m, ...h }, ...n, children: t });
   }
 );
-k.displayName = x;
-const y = "DrawerContent", I = h.forwardRef(({ children: t, title: r, __scopeDrawer: c }, n) => {
-  const { anchor: o, open: l, width: d, onClose: s, isMobile: a } = N(y, c);
-  return /* @__PURE__ */ e(v, { children: a ? /* @__PURE__ */ e(M, { title: r, open: l, onOpenChange: s, ref: n, fullScreen: !0, children: t }) : /* @__PURE__ */ e("div", { className: i("hidden md:block overflow-hidden"), style: { width: d }, ref: n, children: /* @__PURE__ */ b(
+k.displayName = N;
+const y = "DrawerContent", I = p.forwardRef(({ children: o, title: t, __scopeDrawer: x }, m) => {
+  const { anchor: e, open: n, width: i, onClose: l, isMobile: s } = g(y, x);
+  return /* @__PURE__ */ r(v, { children: s ? /* @__PURE__ */ r(M, { title: t, open: n, onOpenChange: l, ref: m, fullScreen: !0, children: o }) : /* @__PURE__ */ r("div", { className: a("mtx-hidden md:mtx-block mtx-overflow-hidden"), style: { width: i }, ref: m, children: /* @__PURE__ */ w(
     "div",
     {
-      className: i(
-        "overflow-y-auto flex flex-col h-full top-0 z-[120] bg-background transition-all border-gray-200",
-        l ? "" : o === "left" ? "-translate-x-full rtl:translate-x-full invisible" : "translate-x-full rtl:-translate-x-full invisible",
-        o === "left" ? "border-r" : "border-l"
+      className: a(
+        "mtx-overflow-y-auto mtx-flex mtx-flex-col mtx-h-full mtx-top-0 mtx-z-[120] mtx-bg-background mtx-transition-all mtx-border-gray-200",
+        n ? "" : e === "left" ? "-mtx-translate-x-full rtl:mtx-translate-x-full mtx-invisible" : "mtx-translate-x-full rtl:-mtx-translate-x-full mtx-invisible",
+        e === "left" ? "mtx-border-r" : "mtx-border-l"
       ),
       children: [
-        /* @__PURE__ */ b(
+        /* @__PURE__ */ w(
           "div",
           {
-            className: i(
-              "h-9 flex items-center gap-2 p-2 bg-background w-full sticky top-0 border-b border-gray-200",
-              o === "right" ? "justify-start rtl:justify-end" : "justify-end rtl:justify-start"
+            className: a(
+              "mtx-h-9 mtx-flex mtx-items-center mtx-gap-2 mtx-p-2 mtx-bg-background mtx-w-full mtx-sticky mtx-top-0 mtx-border-b mtx-border-gray-200",
+              e === "right" ? "mtx-justify-start rtl:mtx-justify-end" : "mtx-justify-end rtl:mtx-justify-start"
             ),
             children: [
-              /* @__PURE__ */ e(R, { onClick: s, className: "w-5 h-5 p-0", children: /* @__PURE__ */ e(C, { className: i("w-5 h-5", o === "right" ? "rtl:-scale-100" : "-scale-100 rtl:scale-100") }) }),
-              typeof r == "string" || typeof r == "number" ? /* @__PURE__ */ e("h2", { className: "text-lg font-bold text-text", children: r }) : r
+              /* @__PURE__ */ r(R, { onClick: l, className: "mtx-w-5 mtx-h-5 mtx-p-0", children: /* @__PURE__ */ r(C, { className: a("mtx-w-5 mtx-h-5", e === "right" ? "rtl:-mtx-scale-100" : "-mtx-scale-100 rtl:mtx-scale-100") }) }),
+              typeof t == "string" || typeof t == "number" ? /* @__PURE__ */ r("h2", { className: "mtx-text-lg mtx-font-bold mtx-text-text", children: t }) : t
             ]
           }
         ),
-        t
+        o
       ]
     }
   ) }) });

package/dist/drawer.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.es.js","sources":["../src/components/drawer/Drawer.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\nimport { ChevronsRight } from \"@trsys-tech/matrix-icons\";\r\nimport { createContextScope, Scope } from \"@radix-ui/react-context\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Modal } from \"../modal/Modal\";\r\nimport { IconButton } from \"../icon-botton/IconButton\";\r\nimport { useIsMobile } from \"../../lib/hooks/use-mobile\";\r\n\r\ntype ScopedProps<P> = P & { __scopeDrawer?: Scope };\r\n\r\nconst DRAWER_NAME = \"Drawer\";\r\n\r\nconst [createDrawerContext] = createContextScope(DRAWER_NAME);\r\n\r\ninterface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  open: boolean;\r\n  onClose?: () => void;\r\n  anchor?: \"left\" | \"right\";\r\n  width?: number;\r\n  children?: React.ReactNode;\r\n  asChild?: boolean;\r\n  mobileBreakpoint?: number;\r\n}\r\n\r\ntype DrawerContextValue = {\r\n  open: boolean;\r\n  onClose?: () => void;\r\n  anchor: \"left\" | \"right\";\r\n  width: number;\r\n  isMobile: boolean;\r\n};\r\n\r\nconst [DrawerProvider, useDrawerProvider] = createDrawerContext<DrawerContextValue>(DRAWER_NAME);\r\n\r\n/**\r\n * Drawer component\r\n * This is the wrapper component for Drawer content and main components\r\n * @param {React.HTMLAttributes<HTMLDivElement>} props\r\n * @param {boolean} open - Drawer open state\r\n * @param {() => void} onClose - Drawer close handler\r\n * @param {\"left\" | \"right\"} anchor - Drawer anchor position\r\n * @param {number} width - Drawer width\r\n * @param {React.ReactNode} children - Drawer children\r\n * @param {boolean} asChild - Render as child component\r\n * @returns {React.ReactElement}\r\n */\r\nconst Drawer = React.forwardRef<React.ElementRef<\"div\">, ScopedProps<DrawerProps>>((props, ref) => {\r\n  const { asChild, anchor = \"right\", children, open, width = 240, className, onClose, __scopeDrawer, ...restProps } = props;\r\n  const Comp = asChild ? Slot : \"div\";\r\n\r\n  const isMobile = useIsMobile();\r\n\r\n  return (\r\n    <Comp ref={ref} className={cn(\"flex\", className)} {...restProps}>\r\n      <DrawerProvider anchor={anchor} onClose={onClose} open={open} width={width} isMobile={isMobile} scope={__scopeDrawer}>\r\n        {children}\r\n      </DrawerProvider>\r\n    </Comp>\r\n  );\r\n});\r\n\r\nDrawer.displayName = DRAWER_NAME;\r\n\r\ninterface DrawerMainProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  asChild: boolean;\r\n}\r\n\r\nconst DRAWER_MAIN_NAME = \"DrawerMain\";\r\n\r\n/**\r\n * DrawerMain component\r\n * This is the main container for the tree that should be shown always\r\n * @param {React.HTMLAttributes<HTMLDivElement>} props\r\n * @param {boolean} asChild - Render as child component\r\n * @property {React.ReactNode} children - DrawerMain children\r\n * @property {string} className - DrawerMain class name\r\n * @property {React.CSSProperties} style - DrawerMain style\r\n * @property {ScopedProps<DrawerMainProps>} __scopeDrawer - DrawerMain scope\r\n * @property {React.Ref<HTMLDivElement>} ref - DrawerMain ref\r\n * @property {React.HTMLAttributes<HTMLDivElement>} props - DrawerMain props\r\n * @returns {React.ReactElement}\r\n */\r\nconst DrawerMain = React.forwardRef<HTMLDivElement, ScopedProps<DrawerMainProps>>(\r\n  ({ asChild, children, className, style, __scopeDrawer, ...props }, ref) => {\r\n    const Comp = asChild ? Slot : \"div\";\r\n    const { anchor, open, width, isMobile } = useDrawerProvider(DRAWER_MAIN_NAME, __scopeDrawer);\r\n\r\n    const marginStyle = React.useMemo(() => {\r\n      if (isMobile) {\r\n        return {};\r\n      }\r\n      if (anchor === \"left\") {\r\n        return { marginInlineStart: open ? width : 0 };\r\n      } else {\r\n        return { marginInlineEnd: open ? width : 0 };\r\n      }\r\n    }, [anchor, open, width, isMobile]);\r\n\r\n    return (\r\n      <Comp ref={ref} className={cn(\"flex-grow overflow-hidden\", className)} style={{ ...style, ...marginStyle }} {...props}>\r\n        {children}\r\n      </Comp>\r\n    );\r\n  },\r\n);\r\n\r\nDrawerMain.displayName = DRAWER_MAIN_NAME;\r\n\r\ntype DrawerContentProps = {\r\n  children?: React.ReactNode;\r\n  title: React.ReactNode;\r\n};\r\n\r\nconst DRAWER_CONTENT_NAME = \"DrawerContent\";\r\n\r\n/**\r\n * DrawerContent component\r\n * This is the content container for the tree that should be shown when the drawer is open\r\n * @param {React.HTMLAttributes<HTMLDivElement>} props\r\n * @param {React.ReactNode} children - DrawerContent children\r\n * @param {React.ReactNode} title - DrawerContent title\r\n * @property {ScopedProps<DrawerContentProps>} __scopeDrawer - DrawerContent scope\r\n * @property {React.Ref<HTMLDivElement>} ref - DrawerContent ref\r\n * @property {React.HTMLAttributes<HTMLDivElement>} props - DrawerContent props\r\n * @returns {React.ReactElement}\r\n */\r\nconst DrawerContent = React.forwardRef<HTMLDivElement, ScopedProps<DrawerContentProps>>(({ children, title, __scopeDrawer }, ref) => {\r\n  const { anchor, open, width, onClose, isMobile } = useDrawerProvider(DRAWER_CONTENT_NAME, __scopeDrawer);\r\n\r\n  return (\r\n    <>\r\n      {isMobile ? (\r\n        <Modal title={title} open={open} onOpenChange={onClose} ref={ref} fullScreen>\r\n          {children}\r\n        </Modal>\r\n      ) : (\r\n        <div className={cn(\"hidden md:block overflow-hidden\")} style={{ width }} ref={ref}>\r\n          <div\r\n            className={cn(\r\n              \"overflow-y-auto flex flex-col h-full top-0 z-[120] bg-background transition-all border-gray-200\",\r\n              open ? \"\" : anchor === \"left\" ? \"-translate-x-full rtl:translate-x-full invisible\" : \"translate-x-full rtl:-translate-x-full invisible\",\r\n              anchor === \"left\" ? \"border-r\" : \"border-l\",\r\n            )}\r\n          >\r\n            <div\r\n              className={cn(\r\n                \"h-9 flex items-center gap-2 p-2 bg-background w-full sticky top-0 border-b border-gray-200\",\r\n                anchor === \"right\" ? \"justify-start rtl:justify-end\" : \"justify-end rtl:justify-start\",\r\n              )}\r\n            >\r\n              <IconButton onClick={onClose} className=\"w-5 h-5 p-0\">\r\n                <ChevronsRight className={cn(\"w-5 h-5\", anchor === \"right\" ? \"rtl:-scale-100\" : \"-scale-100 rtl:scale-100\")} />\r\n              </IconButton>\r\n              {typeof title === \"string\" || typeof title === \"number\" ? <h2 className=\"text-lg font-bold text-text\">{title}</h2> : title}\r\n            </div>\r\n            {children}\r\n          </div>\r\n        </div>\r\n      )}\r\n    </>\r\n  );\r\n});\r\n\r\nDrawerContent.displayName = DRAWER_CONTENT_NAME;\r\n\r\nconst Root = Drawer;\r\nconst Main = DrawerMain;\r\nconst Content = DrawerContent;\r\n\r\nexport { Drawer, DrawerMain, DrawerContent, Root, Main, Content };\r\nexport type { DrawerContentProps, DrawerMainProps, DrawerProps };\r\n"],"names":["DRAWER_NAME","createDrawerContext","createContextScope","DrawerProvider","useDrawerProvider","Drawer","React","props","ref","asChild","anchor","children","open","width","className","onClose","__scopeDrawer","restProps","Comp","Slot","isMobile","useIsMobile","jsx","cn","DRAWER_MAIN_NAME","DrawerMain","style","marginStyle","DRAWER_CONTENT_NAME","DrawerContent","title","Fragment","Modal","jsxs","IconButton","ChevronsRight"],"mappings":"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"}
+{"version":3,"file":"drawer.es.js","sources":["../src/components/drawer/Drawer.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\nimport { ChevronsRight } from \"@trsys-tech/matrix-icons\";\r\nimport { createContextScope, Scope } from \"@radix-ui/react-context\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Modal } from \"../modal/Modal\";\r\nimport { IconButton } from \"../icon-botton/IconButton\";\r\nimport { useIsMobile } from \"../../lib/hooks/use-mobile\";\r\n\r\ntype ScopedProps<P> = P & { __scopeDrawer?: Scope };\r\n\r\nconst DRAWER_NAME = \"Drawer\";\r\n\r\nconst [createDrawerContext] = createContextScope(DRAWER_NAME);\r\n\r\ninterface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  open: boolean;\r\n  onClose?: () => void;\r\n  anchor?: \"left\" | \"right\";\r\n  width?: number;\r\n  children?: React.ReactNode;\r\n  asChild?: boolean;\r\n  mobileBreakpoint?: number;\r\n}\r\n\r\ntype DrawerContextValue = {\r\n  open: boolean;\r\n  onClose?: () => void;\r\n  anchor: \"left\" | \"right\";\r\n  width: number;\r\n  isMobile: boolean;\r\n};\r\n\r\nconst [DrawerProvider, useDrawerProvider] = createDrawerContext<DrawerContextValue>(DRAWER_NAME);\r\n\r\n/**\r\n * Drawer component\r\n * This is the wrapper component for Drawer content and main components\r\n * @param {React.HTMLAttributes<HTMLDivElement>} props\r\n * @param {boolean} open - Drawer open state\r\n * @param {() => void} onClose - Drawer close handler\r\n * @param {\"left\" | \"right\"} anchor - Drawer anchor position\r\n * @param {number} width - Drawer width\r\n * @param {React.ReactNode} children - Drawer children\r\n * @param {boolean} asChild - Render as child component\r\n * @returns {React.ReactElement}\r\n */\r\nconst Drawer = React.forwardRef<React.ElementRef<\"div\">, ScopedProps<DrawerProps>>((props, ref) => {\r\n  const { asChild, anchor = \"right\", children, open, width = 240, className, onClose, __scopeDrawer, ...restProps } = props;\r\n  const Comp = asChild ? Slot : \"div\";\r\n\r\n  const isMobile = useIsMobile();\r\n\r\n  return (\r\n    <Comp ref={ref} className={cn(\"mtx-flex\", className)} {...restProps}>\r\n      <DrawerProvider anchor={anchor} onClose={onClose} open={open} width={width} isMobile={isMobile} scope={__scopeDrawer}>\r\n        {children}\r\n      </DrawerProvider>\r\n    </Comp>\r\n  );\r\n});\r\n\r\nDrawer.displayName = DRAWER_NAME;\r\n\r\ninterface DrawerMainProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  asChild: boolean;\r\n}\r\n\r\nconst DRAWER_MAIN_NAME = \"DrawerMain\";\r\n\r\n/**\r\n * DrawerMain component\r\n * This is the main container for the tree that should be shown always\r\n * @param {React.HTMLAttributes<HTMLDivElement>} props\r\n * @param {boolean} asChild - Render as child component\r\n * @property {React.ReactNode} children - DrawerMain children\r\n * @property {string} className - DrawerMain class name\r\n * @property {React.CSSProperties} style - DrawerMain style\r\n * @property {ScopedProps<DrawerMainProps>} __scopeDrawer - DrawerMain scope\r\n * @property {React.Ref<HTMLDivElement>} ref - DrawerMain ref\r\n * @property {React.HTMLAttributes<HTMLDivElement>} props - DrawerMain props\r\n * @returns {React.ReactElement}\r\n */\r\nconst DrawerMain = React.forwardRef<HTMLDivElement, ScopedProps<DrawerMainProps>>(\r\n  ({ asChild, children, className, style, __scopeDrawer, ...props }, ref) => {\r\n    const Comp = asChild ? Slot : \"div\";\r\n    const { anchor, open, width, isMobile } = useDrawerProvider(DRAWER_MAIN_NAME, __scopeDrawer);\r\n\r\n    const marginStyle = React.useMemo(() => {\r\n      if (isMobile) {\r\n        return {};\r\n      }\r\n      if (anchor === \"left\") {\r\n        return { marginInlineStart: open ? width : 0 };\r\n      } else {\r\n        return { marginInlineEnd: open ? width : 0 };\r\n      }\r\n    }, [anchor, open, width, isMobile]);\r\n\r\n    return (\r\n      <Comp ref={ref} className={cn(\"mtx-flex-grow mtx-overflow-hidden\", className)} style={{ ...style, ...marginStyle }} {...props}>\r\n        {children}\r\n      </Comp>\r\n    );\r\n  },\r\n);\r\n\r\nDrawerMain.displayName = DRAWER_MAIN_NAME;\r\n\r\ntype DrawerContentProps = {\r\n  children?: React.ReactNode;\r\n  title: React.ReactNode;\r\n};\r\n\r\nconst DRAWER_CONTENT_NAME = \"DrawerContent\";\r\n\r\n/**\r\n * DrawerContent component\r\n * This is the content container for the tree that should be shown when the drawer is open\r\n * @param {React.HTMLAttributes<HTMLDivElement>} props\r\n * @param {React.ReactNode} children - DrawerContent children\r\n * @param {React.ReactNode} title - DrawerContent title\r\n * @property {ScopedProps<DrawerContentProps>} __scopeDrawer - DrawerContent scope\r\n * @property {React.Ref<HTMLDivElement>} ref - DrawerContent ref\r\n * @property {React.HTMLAttributes<HTMLDivElement>} props - DrawerContent props\r\n * @returns {React.ReactElement}\r\n */\r\nconst DrawerContent = React.forwardRef<HTMLDivElement, ScopedProps<DrawerContentProps>>(({ children, title, __scopeDrawer }, ref) => {\r\n  const { anchor, open, width, onClose, isMobile } = useDrawerProvider(DRAWER_CONTENT_NAME, __scopeDrawer);\r\n\r\n  return (\r\n    <>\r\n      {isMobile ? (\r\n        <Modal title={title} open={open} onOpenChange={onClose} ref={ref} fullScreen>\r\n          {children}\r\n        </Modal>\r\n      ) : (\r\n        <div className={cn(\"mtx-hidden md:mtx-block mtx-overflow-hidden\")} style={{ width }} ref={ref}>\r\n          <div\r\n            className={cn(\r\n              \"mtx-overflow-y-auto mtx-flex mtx-flex-col mtx-h-full mtx-top-0 mtx-z-[120] mtx-bg-background mtx-transition-all mtx-border-gray-200\",\r\n              open\r\n                ? \"\"\r\n                : anchor === \"left\"\r\n                  ? \"-mtx-translate-x-full rtl:mtx-translate-x-full mtx-invisible\"\r\n                  : \"mtx-translate-x-full rtl:-mtx-translate-x-full mtx-invisible\",\r\n              anchor === \"left\" ? \"mtx-border-r\" : \"mtx-border-l\",\r\n            )}\r\n          >\r\n            <div\r\n              className={cn(\r\n                \"mtx-h-9 mtx-flex mtx-items-center mtx-gap-2 mtx-p-2 mtx-bg-background mtx-w-full mtx-sticky mtx-top-0 mtx-border-b mtx-border-gray-200\",\r\n                anchor === \"right\" ? \"mtx-justify-start rtl:mtx-justify-end\" : \"mtx-justify-end rtl:mtx-justify-start\",\r\n              )}\r\n            >\r\n              <IconButton onClick={onClose} className=\"mtx-w-5 mtx-h-5 mtx-p-0\">\r\n                <ChevronsRight className={cn(\"mtx-w-5 mtx-h-5\", anchor === \"right\" ? \"rtl:-mtx-scale-100\" : \"-mtx-scale-100 rtl:mtx-scale-100\")} />\r\n              </IconButton>\r\n              {typeof title === \"string\" || typeof title === \"number\" ? <h2 className=\"mtx-text-lg mtx-font-bold mtx-text-text\">{title}</h2> : title}\r\n            </div>\r\n            {children}\r\n          </div>\r\n        </div>\r\n      )}\r\n    </>\r\n  );\r\n});\r\n\r\nDrawerContent.displayName = DRAWER_CONTENT_NAME;\r\n\r\nconst Root = Drawer;\r\nconst Main = DrawerMain;\r\nconst Content = DrawerContent;\r\n\r\nexport { Drawer, DrawerMain, DrawerContent, Root, Main, Content };\r\nexport type { DrawerContentProps, DrawerMainProps, DrawerProps };\r\n"],"names":["DRAWER_NAME","createDrawerContext","createContextScope","DrawerProvider","useDrawerProvider","Drawer","React","props","ref","asChild","anchor","children","open","width","className","onClose","__scopeDrawer","restProps","Comp","Slot","isMobile","useIsMobile","jsx","cn","DRAWER_MAIN_NAME","DrawerMain","style","marginStyle","DRAWER_CONTENT_NAME","DrawerContent","title","Fragment","Modal","jsxs","IconButton","ChevronsRight"],"mappings":"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"}

package/dist/duration.es.js

@@ -1,44 +1,44 @@
 import { jsxs as $, jsx as E } from "react/jsx-runtime";
-import * as p from "react";
+import * as x from "react";
 import { tv as F } from "tailwind-variants";
 import { cn as h } from "./utils.es.js";
 const H = F({
   base: [
-    "flex items-center w-full rounded-sm border border-input text-text bg-transparent p-0 text-xs [&_input]:text-xs font-medium transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
-    "placeholder:text-text-300 hover:border-primary-400 focus-within:border-primary-400 focus-within:outline-none focus-within:ring focus-within:ring-primary-100",
-    "aria-disabled:text-text-300 aria-disabled:bg-gray-100 aria-disabled:border-gray-100"
+    "mtx-flex mtx-items-center mtx-w-full mtx-rounded-sm mtx-border mtx-border-input mtx-text-text mtx-bg-transparent mtx-p-0 mtx-text-xs [&_input]:mtx-text-xs mtx-font-medium mtx-transition-colors file:mtx-border-0 file:mtx-bg-transparent file:mtx-text-sm file:mtx-font-medium file:mtx-text-foreground",
+    "placeholder:mtx-text-text-300 hover:mtx-border-primary-400 focus-within:mtx-border-primary-400 focus-within:mtx-outline-none focus-within:mtx-ring focus-within:mtx-ring-primary-100",
+    "aria-disabled:mtx-text-text-300 aria-disabled:mtx-bg-gray-100 aria-disabled:mtx-border-gray-100"
   ],
   variants: {
     size: {
-      sm: "h-7",
-      md: "h-8",
-      lg: "h-11"
+      sm: "mtx-h-7",
+      md: "mtx-h-8",
+      lg: "mtx-h-11"
     }
   },
   defaultVariants: {
     size: "md"
   }
-}), T = p.forwardRef(
-  ({ className: v, slotProps: g, endAdornment: w, startAdornment: x, size: D, value: d, onChange: c, defaultValue: A, disabled: b, showSeconds: u = !1, ...R }, V) => {
-    const f = p.useCallback(
+}), T = x.forwardRef(
+  ({ className: v, slotProps: d, endAdornment: w, startAdornment: g, size: D, value: p, onChange: u, defaultValue: A, disabled: b, showSeconds: m = !1, ...R }, V) => {
+    const c = x.useCallback(
       (e) => {
-        const r = e.replace(/\D/g, ""), n = u ? 6 : 4, a = r.substring(0, n).padEnd(n, "0");
-        let t = a.substring(0, 2), o = a.substring(2, 4), i = u ? a.substring(4, 6) : "";
-        parseInt(t, 10) > 23 && (t = "23"), parseInt(o, 10) > 59 && (o = "59"), u && parseInt(i, 10) > 59 && (i = "59");
+        const r = e.replace(/\D/g, ""), n = m ? 6 : 4, a = r.substring(0, n).padEnd(n, "0");
+        let t = a.substring(0, 2), o = a.substring(2, 4), i = m ? a.substring(4, 6) : "";
+        parseInt(t, 10) > 23 && (t = "23"), parseInt(o, 10) > 59 && (o = "59"), m && parseInt(i, 10) > 59 && (i = "59");
         let s = t;
-        return n >= 4 && (s += `:${o}`), u && (s += `:${i}`), s;
+        return n >= 4 && (s += `:${o}`), m && (s += `:${i}`), s;
       },
-      [u]
-    ), [l, m] = p.useState(() => f(A || "")), y = p.useRef(null);
-    p.useImperativeHandle(V, () => y.current), p.useEffect(() => {
-      d !== void 0 && m(f(d));
-    }, [d, f]);
+      [m]
+    ), [l, f] = x.useState(() => c(A || "")), y = x.useRef(null);
+    x.useImperativeHandle(V, () => y.current), x.useEffect(() => {
+      p !== void 0 && f(c(p));
+    }, [p, c]);
     const M = (e) => {
       e.preventDefault();
-      const r = e.currentTarget, { key: n } = e, a = r.selectionStart ?? 0, t = l.substring(0, a) + n + l.substring(a + 1), o = f(t);
-      if (m(o), c) {
+      const r = e.currentTarget, { key: n } = e, a = r.selectionStart ?? 0, t = l.substring(0, a) + n + l.substring(a + 1), o = c(t);
+      if (f(o), u) {
         const i = { ...e, target: { ...e.target, value: o } };
-        c(i);
+        u(i);
       }
       requestAnimationFrame(() => {
         let i = a + 1;
@@ -53,12 +53,12 @@ const H = F({
         a = `${l.substring(0, n - 2)}0${l.substring(n - 1)}`, t = n - 2;
       else {
         const i = l.replace(/\D/g, ""), s = n - Math.floor((n - 1) / 3), N = `${i.substring(0, s - 1)}0${i.substring(s)}`;
-        a = f(N);
+        a = c(N);
       }
-      const o = f(a);
-      if (m(o), c) {
+      const o = c(a);
+      if (f(o), u) {
         const i = { ...e, target: { ...e.target, value: o } };
-        c(i);
+        u(i);
       }
       requestAnimationFrame(() => {
         r.setSelectionRange(t, t);
@@ -71,12 +71,12 @@ const H = F({
       else if (o >= 3 && o <= 5) {
         const s = t[1] + a;
         s >= 60 ? (t[0] = (t[0] + 1) % 24, t[1] = s % 60) : s < 0 ? (t[0] = (t[0] - 1 + 24) % 24, t[1] = 59) : t[1] = s;
-      } else if (u && o >= 6) {
+      } else if (m && o >= 6) {
         const s = t[2] + a;
         s >= 60 ? (t[1] += 1, t[2] = s % 60) : s < 0 ? (t[1] -= 1, t[2] = 59) : t[2] = s, t[1] >= 60 ? (t[0] = (t[0] + 1) % 24, t[1] %= 60) : t[1] < 0 && (t[0] = (t[0] - 1 + 24) % 24, t[1] = 59);
       }
       const i = t.map((s) => String(s).padStart(2, "0")).join(":");
-      m(i), c && c({ target: { value: i } }), requestAnimationFrame(() => {
+      f(i), u && u({ target: { value: i } }), requestAnimationFrame(() => {
         r.setSelectionRange(o, o);
       });
     }, I = (e) => {
@@ -84,7 +84,7 @@ const H = F({
       r.length === 1 && /\d/.test(r) ? M(e) : r === "Backspace" ? S(e) : r === "ArrowUp" || r === "ArrowDown" ? k(e) : r === "ArrowRight" || r === "ArrowLeft" || r.length > 1 || a !== t || e.preventDefault();
     };
     return /* @__PURE__ */ $("div", { ...R, className: h(H({ size: D, className: v })), "aria-disabled": b, children: [
-      x,
+      g,
       /* @__PURE__ */ E(
         "input",
         {
@@ -95,13 +95,13 @@ const H = F({
           onChange: () => {
           },
           value: l,
-          placeholder: u ? "HH:MM:SS" : "HH:MM",
+          placeholder: m ? "HH:MM:SS" : "HH:MM",
           disabled: b,
-          ...g?.inputProps ?? {},
+          ...d?.inputProps ?? {},
           className: h(
-            "focus:outline-none w-full h-full py-1 rounded-sm file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-text-300",
-            x ? "ps-1 pe-3" : "px-3",
-            g?.inputProps?.className
+            "focus:mtx-outline-none mtx-w-full mtx-h-full mtx-py-1 mtx-rounded-sm file:mtx-border-0 file:mtx-bg-transparent file:mtx-text-sm file:mtx-font-medium file:mtx-text-foreground placeholder:mtx-text-text-300",
+            g ? "mtx-ps-1 mtx-pe-3" : "mtx-px-3",
+            d?.inputProps?.className
           )
         }
       ),

package/dist/duration.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"duration.es.js","sources":["../src/components/duration/Duration.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { tv, VariantProps } from \"tailwind-variants\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nconst textFieldVariants = tv({\r\n  base: [\r\n    \"flex items-center w-full rounded-sm border border-input text-text bg-transparent p-0 text-xs [&_input]:text-xs font-medium transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground\",\r\n    \"placeholder:text-text-300 hover:border-primary-400 focus-within:border-primary-400 focus-within:outline-none focus-within:ring focus-within:ring-primary-100\",\r\n    \"aria-disabled:text-text-300 aria-disabled:bg-gray-100 aria-disabled:border-gray-100\",\r\n  ],\r\n  variants: {\r\n    size: {\r\n      sm: \"h-7\",\r\n      md: \"h-8\",\r\n      lg: \"h-11\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    size: \"md\",\r\n  },\r\n});\r\n\r\ninterface DurationProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof textFieldVariants> {\r\n  disabled?: boolean;\r\n  endAdornment?: React.ReactNode;\r\n  startAdornment?: React.ReactNode;\r\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\r\n  value?: string;\r\n  defaultValue?: string;\r\n  showSeconds?: boolean;\r\n  slotProps?: {\r\n    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\r\n  };\r\n}\r\n\r\nconst Duration = React.forwardRef<HTMLInputElement, DurationProps>(\r\n  (\r\n    { className, slotProps, endAdornment, startAdornment, size, value: _value, onChange, defaultValue, disabled, showSeconds = false, ...props },\r\n    ref,\r\n  ) => {\r\n    const getFormattedValue = React.useCallback(\r\n      (val: string) => {\r\n        const digits = val.replace(/\\D/g, \"\");\r\n        const maxLength = showSeconds ? 6 : 4;\r\n        const limitedDigits = digits.substring(0, maxLength).padEnd(maxLength, \"0\");\r\n\r\n        let hours = limitedDigits.substring(0, 2);\r\n        let minutes = limitedDigits.substring(2, 4);\r\n        let seconds = showSeconds ? limitedDigits.substring(4, 6) : \"\";\r\n\r\n        if (parseInt(hours, 10) > 23) hours = \"23\";\r\n        if (parseInt(minutes, 10) > 59) minutes = \"59\";\r\n        if (showSeconds && parseInt(seconds, 10) > 59) seconds = \"59\";\r\n\r\n        let formatted = hours;\r\n        if (maxLength >= 4) formatted += `:${minutes}`;\r\n        if (showSeconds) formatted += `:${seconds}`;\r\n\r\n        return formatted;\r\n      },\r\n      [showSeconds],\r\n    );\r\n\r\n    const [value, setValue] = React.useState(() => getFormattedValue(defaultValue || \"\"));\r\n    const inputRef = React.useRef<HTMLInputElement>(null);\r\n\r\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\r\n\r\n    React.useEffect(() => {\r\n      if (_value !== undefined) {\r\n        setValue(getFormattedValue(_value));\r\n      }\r\n    }, [_value, getFormattedValue]);\r\n\r\n    const handleNumericInput = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n      e.preventDefault();\r\n      const input = e.currentTarget;\r\n      const { key } = e;\r\n      const selection = input.selectionStart ?? 0;\r\n      const nextValue = value.substring(0, selection) + key + value.substring(selection + 1);\r\n      const formatted = getFormattedValue(nextValue);\r\n      setValue(formatted);\r\n\r\n      if (onChange) {\r\n        const syntheticEvent = { ...e, target: { ...e.target, value: formatted } };\r\n        onChange(syntheticEvent as unknown as React.ChangeEvent<HTMLInputElement>);\r\n      }\r\n\r\n      requestAnimationFrame(() => {\r\n        let nextCursor = selection + 1;\r\n        if (formatted[nextCursor] === \":\") {\r\n          nextCursor++;\r\n        }\r\n        input.setSelectionRange(nextCursor, nextCursor);\r\n      });\r\n    };\r\n\r\n    const handleBackspace = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n      e.preventDefault();\r\n      const input = e.currentTarget;\r\n      const selection = input.selectionStart ?? 0;\r\n      if (selection === 0) return;\r\n\r\n      let nextValue = \"\";\r\n      let nextCursor = selection - 1;\r\n\r\n      if (value[selection - 1] === \":\") {\r\n        nextValue = `${value.substring(0, selection - 2)}0${value.substring(selection - 1)}`;\r\n        nextCursor = selection - 2;\r\n      } else {\r\n        const currentValue = value.replace(/\\D/g, \"\");\r\n        const cursorIndex = selection - Math.floor((selection - 1) / 3);\r\n        const nextDigits = `${currentValue.substring(0, cursorIndex - 1)}0${currentValue.substring(cursorIndex)}`;\r\n        nextValue = getFormattedValue(nextDigits);\r\n      }\r\n\r\n      const formatted = getFormattedValue(nextValue);\r\n      setValue(formatted);\r\n\r\n      if (onChange) {\r\n        const syntheticEvent = { ...e, target: { ...e.target, value: formatted } };\r\n        onChange(syntheticEvent as unknown as React.ChangeEvent<HTMLInputElement>);\r\n      }\r\n\r\n      requestAnimationFrame(() => {\r\n        input.setSelectionRange(nextCursor, nextCursor);\r\n      });\r\n    };\r\n\r\n    const handleArrowKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n      e.preventDefault();\r\n      const input = e.currentTarget;\r\n      const { key } = e;\r\n      const increment = key === \"ArrowUp\" ? 1 : -1;\r\n      const parts = value.split(\":\").map(Number);\r\n      const selection = input.selectionStart ?? 0;\r\n\r\n      if (selection <= 2) {\r\n        // Hours\r\n        parts[0] = (parts[0] + increment + 24) % 24;\r\n      } else if (selection >= 3 && selection <= 5) {\r\n        // Minutes\r\n        const newMinutes = parts[1] + increment;\r\n        if (newMinutes >= 60) {\r\n          parts[0] = (parts[0] + 1) % 24;\r\n          parts[1] = newMinutes % 60;\r\n        } else if (newMinutes < 0) {\r\n          parts[0] = (parts[0] - 1 + 24) % 24;\r\n          parts[1] = 59;\r\n        } else {\r\n          parts[1] = newMinutes;\r\n        }\r\n      } else if (showSeconds && selection >= 6) {\r\n        // Seconds\r\n        const newSeconds = parts[2] + increment;\r\n        if (newSeconds >= 60) {\r\n          parts[1] += 1;\r\n          parts[2] = newSeconds % 60;\r\n        } else if (newSeconds < 0) {\r\n          parts[1] -= 1;\r\n          parts[2] = 59;\r\n        } else {\r\n          parts[2] = newSeconds;\r\n        }\r\n\r\n        if (parts[1] >= 60) {\r\n          parts[0] = (parts[0] + 1) % 24;\r\n          parts[1] %= 60;\r\n        } else if (parts[1] < 0) {\r\n          parts[0] = (parts[0] - 1 + 24) % 24;\r\n          parts[1] = 59;\r\n        }\r\n      }\r\n\r\n      const newValue = parts.map(part => String(part).padStart(2, \"0\")).join(\":\");\r\n      setValue(newValue);\r\n      if (onChange) {\r\n        onChange({ target: { value: newValue } } as React.ChangeEvent<HTMLInputElement>);\r\n      }\r\n      requestAnimationFrame(() => {\r\n        input.setSelectionRange(selection, selection);\r\n      });\r\n    };\r\n\r\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n      const { key, currentTarget } = e;\r\n      const { selectionStart, selectionEnd } = currentTarget;\r\n\r\n      if (key.length === 1 && /\\d/.test(key)) {\r\n        handleNumericInput(e);\r\n      } else if (key === \"Backspace\") {\r\n        handleBackspace(e);\r\n      } else if (key === \"ArrowUp\" || key === \"ArrowDown\") {\r\n        handleArrowKey(e);\r\n      } else if (key === \"ArrowRight\" || key === \"ArrowLeft\" || key.length > 1 || selectionStart !== selectionEnd) {\r\n        // Allow navigation, control keys, and replacing a selection\r\n      } else {\r\n        e.preventDefault();\r\n      }\r\n    };\r\n\r\n    return (\r\n      <div {...props} className={cn(textFieldVariants({ size, className }))} aria-disabled={disabled}>\r\n        {startAdornment}\r\n        <input\r\n          type=\"text\"\r\n          inputMode=\"numeric\"\r\n          ref={inputRef}\r\n          onKeyDown={handleKeyDown}\r\n          onChange={() => {}}\r\n          value={value}\r\n          placeholder={showSeconds ? \"HH:MM:SS\" : \"HH:MM\"}\r\n          disabled={disabled}\r\n          {...(slotProps?.inputProps ?? {})}\r\n          className={cn(\r\n            \"focus:outline-none w-full h-full py-1 rounded-sm file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-text-300\",\r\n            !startAdornment ? \"px-3\" : \"ps-1 pe-3\",\r\n            slotProps?.inputProps?.className,\r\n          )}\r\n        />\r\n\r\n        {endAdornment}\r\n      </div>\r\n    );\r\n  },\r\n);\r\nDuration.displayName = \"Duration\";\r\n\r\nexport { Duration, type DurationProps };\r\n"],"names":["textFieldVariants","tv","Duration","React","className","slotProps","endAdornment","startAdornment","size","_value","onChange","defaultValue","disabled","showSeconds","props","ref","getFormattedValue","val","digits","maxLength","limitedDigits","hours","minutes","seconds","formatted","value","setValue","inputRef","handleNumericInput","input","key","selection","nextValue","syntheticEvent","nextCursor","handleBackspace","currentValue","cursorIndex","nextDigits","handleArrowKey","increment","parts","newMinutes","newSeconds","newValue","part","handleKeyDown","currentTarget","selectionStart","selectionEnd","jsxs","cn","jsx"],"mappings":"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"}
+{"version":3,"file":"duration.es.js","sources":["../src/components/duration/Duration.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { tv, VariantProps } from \"tailwind-variants\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nconst textFieldVariants = tv({\r\n  base: [\r\n    \"mtx-flex mtx-items-center mtx-w-full mtx-rounded-sm mtx-border mtx-border-input mtx-text-text mtx-bg-transparent mtx-p-0 mtx-text-xs [&_input]:mtx-text-xs mtx-font-medium mtx-transition-colors file:mtx-border-0 file:mtx-bg-transparent file:mtx-text-sm file:mtx-font-medium file:mtx-text-foreground\",\r\n    \"placeholder:mtx-text-text-300 hover:mtx-border-primary-400 focus-within:mtx-border-primary-400 focus-within:mtx-outline-none focus-within:mtx-ring focus-within:mtx-ring-primary-100\",\r\n    \"aria-disabled:mtx-text-text-300 aria-disabled:mtx-bg-gray-100 aria-disabled:mtx-border-gray-100\",\r\n  ],\r\n  variants: {\r\n    size: {\r\n      sm: \"mtx-h-7\",\r\n      md: \"mtx-h-8\",\r\n      lg: \"mtx-h-11\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    size: \"md\",\r\n  },\r\n});\r\n\r\ninterface DurationProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof textFieldVariants> {\r\n  disabled?: boolean;\r\n  endAdornment?: React.ReactNode;\r\n  startAdornment?: React.ReactNode;\r\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\r\n  value?: string;\r\n  defaultValue?: string;\r\n  showSeconds?: boolean;\r\n  slotProps?: {\r\n    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\r\n  };\r\n}\r\n\r\nconst Duration = React.forwardRef<HTMLInputElement, DurationProps>(\r\n  (\r\n    { className, slotProps, endAdornment, startAdornment, size, value: _value, onChange, defaultValue, disabled, showSeconds = false, ...props },\r\n    ref,\r\n  ) => {\r\n    const getFormattedValue = React.useCallback(\r\n      (val: string) => {\r\n        const digits = val.replace(/\\D/g, \"\");\r\n        const maxLength = showSeconds ? 6 : 4;\r\n        const limitedDigits = digits.substring(0, maxLength).padEnd(maxLength, \"0\");\r\n\r\n        let hours = limitedDigits.substring(0, 2);\r\n        let minutes = limitedDigits.substring(2, 4);\r\n        let seconds = showSeconds ? limitedDigits.substring(4, 6) : \"\";\r\n\r\n        if (parseInt(hours, 10) > 23) hours = \"23\";\r\n        if (parseInt(minutes, 10) > 59) minutes = \"59\";\r\n        if (showSeconds && parseInt(seconds, 10) > 59) seconds = \"59\";\r\n\r\n        let formatted = hours;\r\n        if (maxLength >= 4) formatted += `:${minutes}`;\r\n        if (showSeconds) formatted += `:${seconds}`;\r\n\r\n        return formatted;\r\n      },\r\n      [showSeconds],\r\n    );\r\n\r\n    const [value, setValue] = React.useState(() => getFormattedValue(defaultValue || \"\"));\r\n    const inputRef = React.useRef<HTMLInputElement>(null);\r\n\r\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\r\n\r\n    React.useEffect(() => {\r\n      if (_value !== undefined) {\r\n        setValue(getFormattedValue(_value));\r\n      }\r\n    }, [_value, getFormattedValue]);\r\n\r\n    const handleNumericInput = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n      e.preventDefault();\r\n      const input = e.currentTarget;\r\n      const { key } = e;\r\n      const selection = input.selectionStart ?? 0;\r\n      const nextValue = value.substring(0, selection) + key + value.substring(selection + 1);\r\n      const formatted = getFormattedValue(nextValue);\r\n      setValue(formatted);\r\n\r\n      if (onChange) {\r\n        const syntheticEvent = { ...e, target: { ...e.target, value: formatted } };\r\n        onChange(syntheticEvent as unknown as React.ChangeEvent<HTMLInputElement>);\r\n      }\r\n\r\n      requestAnimationFrame(() => {\r\n        let nextCursor = selection + 1;\r\n        if (formatted[nextCursor] === \":\") {\r\n          nextCursor++;\r\n        }\r\n        input.setSelectionRange(nextCursor, nextCursor);\r\n      });\r\n    };\r\n\r\n    const handleBackspace = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n      e.preventDefault();\r\n      const input = e.currentTarget;\r\n      const selection = input.selectionStart ?? 0;\r\n      if (selection === 0) return;\r\n\r\n      let nextValue = \"\";\r\n      let nextCursor = selection - 1;\r\n\r\n      if (value[selection - 1] === \":\") {\r\n        nextValue = `${value.substring(0, selection - 2)}0${value.substring(selection - 1)}`;\r\n        nextCursor = selection - 2;\r\n      } else {\r\n        const currentValue = value.replace(/\\D/g, \"\");\r\n        const cursorIndex = selection - Math.floor((selection - 1) / 3);\r\n        const nextDigits = `${currentValue.substring(0, cursorIndex - 1)}0${currentValue.substring(cursorIndex)}`;\r\n        nextValue = getFormattedValue(nextDigits);\r\n      }\r\n\r\n      const formatted = getFormattedValue(nextValue);\r\n      setValue(formatted);\r\n\r\n      if (onChange) {\r\n        const syntheticEvent = { ...e, target: { ...e.target, value: formatted } };\r\n        onChange(syntheticEvent as unknown as React.ChangeEvent<HTMLInputElement>);\r\n      }\r\n\r\n      requestAnimationFrame(() => {\r\n        input.setSelectionRange(nextCursor, nextCursor);\r\n      });\r\n    };\r\n\r\n    const handleArrowKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n      e.preventDefault();\r\n      const input = e.currentTarget;\r\n      const { key } = e;\r\n      const increment = key === \"ArrowUp\" ? 1 : -1;\r\n      const parts = value.split(\":\").map(Number);\r\n      const selection = input.selectionStart ?? 0;\r\n\r\n      if (selection <= 2) {\r\n        // Hours\r\n        parts[0] = (parts[0] + increment + 24) % 24;\r\n      } else if (selection >= 3 && selection <= 5) {\r\n        // Minutes\r\n        const newMinutes = parts[1] + increment;\r\n        if (newMinutes >= 60) {\r\n          parts[0] = (parts[0] + 1) % 24;\r\n          parts[1] = newMinutes % 60;\r\n        } else if (newMinutes < 0) {\r\n          parts[0] = (parts[0] - 1 + 24) % 24;\r\n          parts[1] = 59;\r\n        } else {\r\n          parts[1] = newMinutes;\r\n        }\r\n      } else if (showSeconds && selection >= 6) {\r\n        // Seconds\r\n        const newSeconds = parts[2] + increment;\r\n        if (newSeconds >= 60) {\r\n          parts[1] += 1;\r\n          parts[2] = newSeconds % 60;\r\n        } else if (newSeconds < 0) {\r\n          parts[1] -= 1;\r\n          parts[2] = 59;\r\n        } else {\r\n          parts[2] = newSeconds;\r\n        }\r\n\r\n        if (parts[1] >= 60) {\r\n          parts[0] = (parts[0] + 1) % 24;\r\n          parts[1] %= 60;\r\n        } else if (parts[1] < 0) {\r\n          parts[0] = (parts[0] - 1 + 24) % 24;\r\n          parts[1] = 59;\r\n        }\r\n      }\r\n\r\n      const newValue = parts.map(part => String(part).padStart(2, \"0\")).join(\":\");\r\n      setValue(newValue);\r\n      if (onChange) {\r\n        onChange({ target: { value: newValue } } as React.ChangeEvent<HTMLInputElement>);\r\n      }\r\n      requestAnimationFrame(() => {\r\n        input.setSelectionRange(selection, selection);\r\n      });\r\n    };\r\n\r\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n      const { key, currentTarget } = e;\r\n      const { selectionStart, selectionEnd } = currentTarget;\r\n\r\n      if (key.length === 1 && /\\d/.test(key)) {\r\n        handleNumericInput(e);\r\n      } else if (key === \"Backspace\") {\r\n        handleBackspace(e);\r\n      } else if (key === \"ArrowUp\" || key === \"ArrowDown\") {\r\n        handleArrowKey(e);\r\n      } else if (key === \"ArrowRight\" || key === \"ArrowLeft\" || key.length > 1 || selectionStart !== selectionEnd) {\r\n        // Allow navigation, control keys, and replacing a selection\r\n      } else {\r\n        e.preventDefault();\r\n      }\r\n    };\r\n\r\n    return (\r\n      <div {...props} className={cn(textFieldVariants({ size, className }))} aria-disabled={disabled}>\r\n        {startAdornment}\r\n        <input\r\n          type=\"text\"\r\n          inputMode=\"numeric\"\r\n          ref={inputRef}\r\n          onKeyDown={handleKeyDown}\r\n          onChange={() => {}}\r\n          value={value}\r\n          placeholder={showSeconds ? \"HH:MM:SS\" : \"HH:MM\"}\r\n          disabled={disabled}\r\n          {...(slotProps?.inputProps ?? {})}\r\n          className={cn(\r\n            \"focus:mtx-outline-none mtx-w-full mtx-h-full mtx-py-1 mtx-rounded-sm file:mtx-border-0 file:mtx-bg-transparent file:mtx-text-sm file:mtx-font-medium file:mtx-text-foreground placeholder:mtx-text-text-300\",\r\n            !startAdornment ? \"mtx-px-3\" : \"mtx-ps-1 mtx-pe-3\",\r\n            slotProps?.inputProps?.className,\r\n          )}\r\n        />\r\n\r\n        {endAdornment}\r\n      </div>\r\n    );\r\n  },\r\n);\r\nDuration.displayName = \"Duration\";\r\n\r\nexport { Duration, type DurationProps };\r\n"],"names":["textFieldVariants","tv","Duration","React","className","slotProps","endAdornment","startAdornment","size","_value","onChange","defaultValue","disabled","showSeconds","props","ref","getFormattedValue","val","digits","maxLength","limitedDigits","hours","minutes","seconds","formatted","value","setValue","inputRef","handleNumericInput","input","key","selection","nextValue","syntheticEvent","nextCursor","handleBackspace","currentValue","cursorIndex","nextDigits","handleArrowKey","increment","parts","newMinutes","newSeconds","newValue","part","handleKeyDown","currentTarget","selectionStart","selectionEnd","jsxs","cn","jsx"],"mappings":"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"}

package/dist/form.es.js

@@ -1,16 +1,16 @@
 import { jsx as a } from "react/jsx-runtime";
 import * as m from "react";
-import { Slot as F } from "@radix-ui/react-slot";
-import { FormProvider as u, Controller as p, useFormContext as x } from "react-hook-form";
+import { Slot as x } from "@radix-ui/react-slot";
+import { FormProvider as F, Controller as u, useFormContext as p } from "react-hook-form";
 import { Label as I } from "./label.es.js";
 import { cn as i } from "./utils.es.js";
-const D = u, l = m.createContext({}), M = ({
+const D = F, l = m.createContext({}), M = ({
   ...e
-}) => /* @__PURE__ */ a(l.Provider, { value: { name: e.name }, children: /* @__PURE__ */ a(p, { ...e }) }), d = () => {
-  const e = m.useContext(l), o = m.useContext(f), { getFieldState: t, formState: r } = x(), n = t(e.name, r);
+}) => /* @__PURE__ */ a(l.Provider, { value: { name: e.name }, children: /* @__PURE__ */ a(u, { ...e }) }), d = () => {
+  const e = m.useContext(l), t = m.useContext(f), { getFieldState: o, formState: r } = p(), n = o(e.name, r);
   if (!e)
     throw new Error("useFormField should be used within <FormField>");
-  const { id: s } = o;
+  const { id: s } = t;
   return {
     id: s,
     name: e.name,
@@ -19,39 +19,39 @@ const D = u, l = m.createContext({}), M = ({
     formMessageId: `${s}-form-item-message`,
     ...n
   };
-}, f = m.createContext({}), g = m.forwardRef(({ className: e, ...o }, t) => {
+}, f = m.createContext({}), g = m.forwardRef(({ className: e, ...t }, o) => {
   const r = m.useId();
-  return /* @__PURE__ */ a(f.Provider, { value: { id: r }, children: /* @__PURE__ */ a("div", { ref: t, className: i("space-y-1", e), ...o }) });
+  return /* @__PURE__ */ a(f.Provider, { value: { id: r }, children: /* @__PURE__ */ a("div", { ref: o, className: i("mtx-space-y-1", e), ...t }) });
 });
 g.displayName = "FormItem";
-const b = m.forwardRef(({ className: e, ...o }, t) => {
+const b = m.forwardRef(({ className: e, ...t }, o) => {
   const { error: r, formItemId: n } = d();
-  return /* @__PURE__ */ a(I, { ref: t, className: i(r && "text-danger", "block text-text-300", e), htmlFor: n, ...o });
+  return /* @__PURE__ */ a(I, { ref: o, className: i(r && "mtx-text-danger", "mtx-block mtx-text-text-300", e), htmlFor: n, ...t });
 });
 b.displayName = "FormLabel";
-const C = m.forwardRef(({ className: e, ...o }, t) => {
+const C = m.forwardRef(({ className: e, ...t }, o) => {
   const { error: r, formItemId: n, formDescriptionId: s, formMessageId: c } = d();
   return /* @__PURE__ */ a(
-    F,
+    x,
     {
-      ref: t,
+      ref: o,
       id: n,
       "aria-describedby": r ? `${s} ${c}` : `${s}`,
       "aria-invalid": !!r,
-      className: i(e, r && "border-danger hover:border-danger focus-visible:border-danger"),
-      ...o
+      className: i(e, r && "mtx-border-danger hover:mtx-border-danger focus-visible:mtx-border-danger"),
+      ...t
     }
   );
 });
 C.displayName = "FormControl";
-const N = m.forwardRef(({ className: e, ...o }, t) => {
+const N = m.forwardRef(({ className: e, ...t }, o) => {
   const { formDescriptionId: r } = d();
-  return /* @__PURE__ */ a("p", { ref: t, id: r, className: i("text-[0.8rem] text-muted-foreground", e), ...o });
+  return /* @__PURE__ */ a("p", { ref: o, id: r, className: i("mtx-text-[0.8rem] mtx-text-muted-foreground", e), ...t });
 });
 N.displayName = "FormDescription";
-const h = m.forwardRef(({ className: e, children: o, ...t }, r) => {
-  const { error: n, formMessageId: s } = d(), c = n ? String(n?.message) : o;
-  return /* @__PURE__ */ a("p", { ref: r, id: s, className: i("text-[0.625rem] font-medium text-danger h-4", e), ...t, children: c ?? " " });
+const h = m.forwardRef(({ className: e, children: t, ...o }, r) => {
+  const { error: n, formMessageId: s } = d(), c = n ? String(n?.message) : t;
+  return /* @__PURE__ */ a("p", { ref: r, id: s, className: i("mtx-text-[0.625rem] mtx-font-medium mtx-text-danger mtx-h-4", e), ...o, children: c ?? " " });
 });
 h.displayName = "FormMessage";
 export {

package/dist/form.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.es.js","sources":["../src/components/form/Form.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useFormContext } from \"react-hook-form\";\n\nimport { Label } from \"../label/Label\";\nimport { cn } from \"../../lib/utils\";\n\nconst Form = FormProvider;\n\ntype FormFieldContextValue<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {\n  name: TName;\n};\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);\n\nconst FormField = <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n};\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext);\n  const itemContext = React.useContext(FormItemContext);\n  const { getFieldState, formState } = useFormContext();\n\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\");\n  }\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n};\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nconst FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);\n\nconst FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => {\n  const id = React.useId();\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div ref={ref} className={cn(\"space-y-1\", className)} {...props} />\n    </FormItemContext.Provider>\n  );\n});\nFormItem.displayName = \"FormItem\";\n\nconst FormLabel = React.forwardRef<HTMLLabelElement, React.ComponentPropsWithoutRef<\"label\">>(({ className, ...props }, ref) => {\n  const { error, formItemId } = useFormField();\n\n  return <Label ref={ref} className={cn(error && \"text-danger\", \"block text-text-300\", className)} htmlFor={formItemId} {...props} />;\n});\nFormLabel.displayName = \"FormLabel\";\n\nconst FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(({ className, ...props }, ref) => {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n\n  return (\n    <Slot\n      ref={ref}\n      id={formItemId}\n      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}\n      aria-invalid={!!error}\n      className={cn(className, error && \"border-danger hover:border-danger focus-visible:border-danger\")}\n      {...props}\n    />\n  );\n});\nFormControl.displayName = \"FormControl\";\n\nconst FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, ...props }, ref) => {\n  const { formDescriptionId } = useFormField();\n\n  return <p ref={ref} id={formDescriptionId} className={cn(\"text-[0.8rem] text-muted-foreground\", className)} {...props} />;\n});\nFormDescription.displayName = \"FormDescription\";\n\nconst FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, children, ...props }, ref) => {\n  const { error, formMessageId } = useFormField();\n  const body = error ? String(error?.message) : children;\n\n  // if (!body) {\n  //   return null;\n  // }\n\n  return (\n    <p ref={ref} id={formMessageId} className={cn(\"text-[0.625rem] font-medium text-danger h-4\", className)} {...props}>\n      {body ?? \" \"}\n    </p>\n  );\n});\nFormMessage.displayName = \"FormMessage\";\n\nexport { Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };\n"],"names":["Form","FormProvider","FormFieldContext","React","FormField","props","jsx","Controller","useFormField","fieldContext","itemContext","FormItemContext","getFieldState","formState","useFormContext","fieldState","id","FormItem","className","ref","cn","FormLabel","error","formItemId","Label","FormControl","formDescriptionId","formMessageId","Slot","FormDescription","FormMessage","children","body"],"mappings":"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"}
+{"version":3,"file":"form.es.js","sources":["../src/components/form/Form.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useFormContext } from \"react-hook-form\";\n\nimport { Label } from \"../label/Label\";\nimport { cn } from \"../../lib/utils\";\n\nconst Form = FormProvider;\n\ntype FormFieldContextValue<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {\n  name: TName;\n};\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);\n\nconst FormField = <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n};\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext);\n  const itemContext = React.useContext(FormItemContext);\n  const { getFieldState, formState } = useFormContext();\n\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\");\n  }\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n};\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nconst FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);\n\nconst FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => {\n  const id = React.useId();\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div ref={ref} className={cn(\"mtx-space-y-1\", className)} {...props} />\n    </FormItemContext.Provider>\n  );\n});\nFormItem.displayName = \"FormItem\";\n\nconst FormLabel = React.forwardRef<HTMLLabelElement, React.ComponentPropsWithoutRef<\"label\">>(({ className, ...props }, ref) => {\n  const { error, formItemId } = useFormField();\n\n  return <Label ref={ref} className={cn(error && \"mtx-text-danger\", \"mtx-block mtx-text-text-300\", className)} htmlFor={formItemId} {...props} />;\n});\nFormLabel.displayName = \"FormLabel\";\n\nconst FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(({ className, ...props }, ref) => {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n\n  return (\n    <Slot\n      ref={ref}\n      id={formItemId}\n      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}\n      aria-invalid={!!error}\n      className={cn(className, error && \"mtx-border-danger hover:mtx-border-danger focus-visible:mtx-border-danger\")}\n      {...props}\n    />\n  );\n});\nFormControl.displayName = \"FormControl\";\n\nconst FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, ...props }, ref) => {\n  const { formDescriptionId } = useFormField();\n\n  return <p ref={ref} id={formDescriptionId} className={cn(\"mtx-text-[0.8rem] mtx-text-muted-foreground\", className)} {...props} />;\n});\nFormDescription.displayName = \"FormDescription\";\n\nconst FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, children, ...props }, ref) => {\n  const { error, formMessageId } = useFormField();\n  const body = error ? String(error?.message) : children;\n\n  // if (!body) {\n  //   return null;\n  // }\n\n  return (\n    <p ref={ref} id={formMessageId} className={cn(\"mtx-text-[0.625rem] mtx-font-medium mtx-text-danger mtx-h-4\", className)} {...props}>\n      {body ?? \" \"}\n    </p>\n  );\n});\nFormMessage.displayName = \"FormMessage\";\n\nexport { Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };\n"],"names":["Form","FormProvider","FormFieldContext","React","FormField","props","jsx","Controller","useFormField","fieldContext","itemContext","FormItemContext","getFieldState","formState","useFormContext","fieldState","id","FormItem","className","ref","cn","FormLabel","error","formItemId","Label","FormControl","formDescriptionId","formMessageId","Slot","FormDescription","FormMessage","children","body"],"mappings":"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"}

package/dist/formcheckbox.es.js

@@ -4,8 +4,8 @@ import { useController as P } from "react-hook-form";
 import { Checkbox as N } from "./checkbox.es.js";
 import { useCallback as j } from "react";
 import { cn as y } from "./utils.es.js";
-const U = (p) => {
-  const { name: a, control: t, defaultValue: l, disabled: s, readOnly: f, rules: m, shouldUnregister: n, label: h, slotProps: e, required: c, ...u } = p, { field: d } = P({ name: a, control: t, rules: m, defaultValue: l, disabled: s, shouldUnregister: n }), x = j(
+const U = (x) => {
+  const { name: m, control: s, defaultValue: a, disabled: t, readOnly: p, rules: l, shouldUnregister: n, label: f, slotProps: e, required: c, ...h } = x, { field: d } = P({ name: m, control: s, rules: l, defaultValue: a, disabled: t, shouldUnregister: n }), u = j(
     (o) => {
       d.onChange(o);
     },
@@ -14,27 +14,27 @@ const U = (p) => {
   return /* @__PURE__ */ r(
     C,
     {
-      control: t,
-      name: a,
-      defaultValue: l,
-      disabled: s,
-      rules: m,
+      control: s,
+      name: m,
+      defaultValue: a,
+      disabled: t,
+      rules: l,
       shouldUnregister: n,
-      render: ({ field: o }) => /* @__PURE__ */ i(b, { ...u, className: "flex items-center gap-2 justify-start space-y-0", children: [
+      render: ({ field: o }) => /* @__PURE__ */ i(b, { ...h, className: "mtx-flex mtx-items-center mtx-gap-2 mtx-justify-start mtx-space-y-0", children: [
         /* @__PURE__ */ r(g, { ...e?.formControlProps ?? {}, children: /* @__PURE__ */ r(
           N,
           {
             ...e?.checkboxProps ?? {},
             ...o,
             checked: o.value,
-            onCheckedChange: x,
+            onCheckedChange: u,
             "aria-required": c,
-            disabled: s || f
+            disabled: t || p
           }
         ) }),
-        /* @__PURE__ */ i(k, { ...e?.formLabelProps ?? {}, className: y("text-text", e?.formLabelProps?.className), children: [
-          h,
-          c && /* @__PURE__ */ r("span", { className: "text-danger text-sm leading-4", children: "*" })
+        /* @__PURE__ */ i(k, { ...e?.formLabelProps ?? {}, className: y("mtx-text-text", e?.formLabelProps?.className), children: [
+          f,
+          c && /* @__PURE__ */ r("span", { className: "mtx-text-danger mtx-text-sm mtx-leading-4", children: "*" })
         ] }),
         /* @__PURE__ */ r(F, { ...e?.formMessageProps ?? {} })
       ] })

package/dist/formcheckbox.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"formcheckbox.es.js","sources":["../src/components/form-checkbox/FormCheckbox.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { FormControl, FormField, FormItem, FormLabel, FormMessage } from \"../form/Form\";\r\nimport { SlotProps } from \"@radix-ui/react-slot\";\r\nimport { Control, ControllerProps, FieldPath, FieldValues, useController } from \"react-hook-form\";\r\nimport { Checkbox, CheckboxProps } from \"../checkbox/Checkbox\";\r\nimport { useCallback } from \"react\";\r\nimport { cn } from \"../../lib/utils\";\r\n\r\ntype FormCheckboxProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<\r\n  ControllerProps<TFieldValues, TName>,\r\n  \"render\"\r\n> &\r\n  React.ComponentProps<typeof FormItem> & {\r\n    label: string;\r\n    control: Control<TFieldValues>;\r\n    required?: boolean;\r\n    readOnly?: boolean;\r\n    slotProps?: {\r\n      formLabelProps?: React.HTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLLabelElement>;\r\n      formMessageProps?: React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>;\r\n      formControlProps?: Omit<SlotProps & React.RefAttributes<HTMLElement>, \"ref\"> & React.RefAttributes<HTMLElement>;\r\n      checkboxProps?: CheckboxProps;\r\n    };\r\n  };\r\n\r\nconst FormCheckbox = <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>(props: FormCheckboxProps<TFieldValues, TName>) => {\r\n  const { name, control, defaultValue, disabled, readOnly, rules, shouldUnregister, label, slotProps, required, ...formItemProps } = props;\r\n  const { field } = useController({ name, control, rules, defaultValue, disabled, shouldUnregister });\r\n\r\n  const handleCheckChanged = useCallback(\r\n    (checked: boolean) => {\r\n      field.onChange(checked);\r\n    },\r\n    [field],\r\n  );\r\n\r\n  return (\r\n    <FormField\r\n      control={control}\r\n      name={name}\r\n      defaultValue={defaultValue}\r\n      disabled={disabled}\r\n      rules={rules}\r\n      shouldUnregister={shouldUnregister}\r\n      render={({ field }) => {\r\n        return (\r\n          <FormItem {...formItemProps} className=\"flex items-center gap-2 justify-start space-y-0\">\r\n            <FormControl {...(slotProps?.formControlProps ?? {})}>\r\n              <Checkbox\r\n                {...(slotProps?.checkboxProps ?? {})}\r\n                {...field}\r\n                checked={field.value}\r\n                onCheckedChange={handleCheckChanged}\r\n                aria-required={required}\r\n                disabled={disabled || readOnly}\r\n              />\r\n            </FormControl>\r\n            <FormLabel {...(slotProps?.formLabelProps ?? {})} className={cn(\"text-text\", slotProps?.formLabelProps?.className)}>\r\n              {label}\r\n              {required && <span className=\"text-danger text-sm leading-4\">*</span>}\r\n            </FormLabel>\r\n            <FormMessage {...(slotProps?.formMessageProps ?? {})} />\r\n          </FormItem>\r\n        );\r\n      }}\r\n    />\r\n  );\r\n};\r\nexport { FormCheckbox, type FormCheckboxProps };\r\n"],"names":["FormCheckbox","props","name","control","defaultValue","disabled","readOnly","rules","shouldUnregister","label","slotProps","required","formItemProps","field","useController","handleCheckChanged","useCallback","checked","jsx","FormField","jsxs","FormItem","FormControl","Checkbox","FormLabel","cn","FormMessage"],"mappings":";;;;;;AA0BA,MAAMA,IAAe,CAA0EC,MAAkD;AAC/I,QAAM,EAAE,MAAAC,GAAM,SAAAC,GAAS,cAAAC,GAAc,UAAAC,GAAU,UAAAC,GAAU,OAAAC,GAAO,kBAAAC,GAAkB,OAAAC,GAAO,WAAAC,GAAW,UAAAC,GAAU,GAAGC,MAAkBX,GAC7H,EAAE,OAAAY,EAAA,IAAUC,EAAc,EAAE,MAAAZ,GAAM,SAAAC,GAAS,OAAAI,GAAO,cAAAH,GAAc,UAAAC,GAAU,kBAAAG,GAAkB,GAE5FO,IAAqBC;AAAA,IACzB,CAACC,MAAqB;AACpB,MAAAJ,EAAM,SAASI,CAAO;AAAA,IACxB;AAAA,IACA,CAACJ,CAAK;AAAA,EAAA;AAGR,SACE,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAhB;AAAA,MACA,MAAAD;AAAA,MACA,cAAAE;AAAA,MACA,UAAAC;AAAA,MACA,OAAAE;AAAA,MACA,kBAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAK,QAEP,gBAAAO,EAACC,GAAA,EAAU,GAAGT,GAAe,WAAU,mDACrC,UAAA;AAAA,QAAA,gBAAAM,EAACI,GAAA,EAAa,GAAIZ,GAAW,oBAAoB,CAAA,GAC/C,UAAA,gBAAAQ;AAAA,UAACK;AAAA,UAAA;AAAA,YACE,GAAIb,GAAW,iBAAiB,CAAA;AAAA,YAChC,GAAGG;AAAAA,YACJ,SAASA,EAAM;AAAA,YACf,iBAAiBE;AAAA,YACjB,iBAAeJ;AAAA,YACf,UAAUN,KAAYC;AAAA,UAAA;AAAA,QAAA,GAE1B;AAAA,QACA,gBAAAc,EAACI,GAAA,EAAW,GAAId,GAAW,kBAAkB,CAAA,GAAK,WAAWe,EAAG,aAAaf,GAAW,gBAAgB,SAAS,GAC9G,UAAA;AAAA,UAAAD;AAAA,UACAE,KAAY,gBAAAO,EAAC,QAAA,EAAK,WAAU,iCAAgC,UAAA,IAAA,CAAC;AAAA,QAAA,GAChE;AAAA,0BACCQ,GAAA,EAAa,GAAIhB,GAAW,oBAAoB,CAAA,EAAC,CAAI;AAAA,MAAA,GACxD;AAAA,IAEJ;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"formcheckbox.es.js","sources":["../src/components/form-checkbox/FormCheckbox.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { FormControl, FormField, FormItem, FormLabel, FormMessage } from \"../form/Form\";\r\nimport { SlotProps } from \"@radix-ui/react-slot\";\r\nimport { Control, ControllerProps, FieldPath, FieldValues, useController } from \"react-hook-form\";\r\nimport { Checkbox, CheckboxProps } from \"../checkbox/Checkbox\";\r\nimport { useCallback } from \"react\";\r\nimport { cn } from \"../../lib/utils\";\r\n\r\ntype FormCheckboxProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<\r\n  ControllerProps<TFieldValues, TName>,\r\n  \"render\"\r\n> &\r\n  React.ComponentProps<typeof FormItem> & {\r\n    label: string;\r\n    control: Control<TFieldValues>;\r\n    required?: boolean;\r\n    readOnly?: boolean;\r\n    slotProps?: {\r\n      formLabelProps?: React.HTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLLabelElement>;\r\n      formMessageProps?: React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>;\r\n      formControlProps?: Omit<SlotProps & React.RefAttributes<HTMLElement>, \"ref\"> & React.RefAttributes<HTMLElement>;\r\n      checkboxProps?: CheckboxProps;\r\n    };\r\n  };\r\n\r\nconst FormCheckbox = <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>(props: FormCheckboxProps<TFieldValues, TName>) => {\r\n  const { name, control, defaultValue, disabled, readOnly, rules, shouldUnregister, label, slotProps, required, ...formItemProps } = props;\r\n  const { field } = useController({ name, control, rules, defaultValue, disabled, shouldUnregister });\r\n\r\n  const handleCheckChanged = useCallback(\r\n    (checked: boolean) => {\r\n      field.onChange(checked);\r\n    },\r\n    [field],\r\n  );\r\n\r\n  return (\r\n    <FormField\r\n      control={control}\r\n      name={name}\r\n      defaultValue={defaultValue}\r\n      disabled={disabled}\r\n      rules={rules}\r\n      shouldUnregister={shouldUnregister}\r\n      render={({ field }) => {\r\n        return (\r\n          <FormItem {...formItemProps} className=\"mtx-flex mtx-items-center mtx-gap-2 mtx-justify-start mtx-space-y-0\">\r\n            <FormControl {...(slotProps?.formControlProps ?? {})}>\r\n              <Checkbox\r\n                {...(slotProps?.checkboxProps ?? {})}\r\n                {...field}\r\n                checked={field.value}\r\n                onCheckedChange={handleCheckChanged}\r\n                aria-required={required}\r\n                disabled={disabled || readOnly}\r\n              />\r\n            </FormControl>\r\n            <FormLabel {...(slotProps?.formLabelProps ?? {})} className={cn(\"mtx-text-text\", slotProps?.formLabelProps?.className)}>\r\n              {label}\r\n              {required && <span className=\"mtx-text-danger mtx-text-sm mtx-leading-4\">*</span>}\r\n            </FormLabel>\r\n            <FormMessage {...(slotProps?.formMessageProps ?? {})} />\r\n          </FormItem>\r\n        );\r\n      }}\r\n    />\r\n  );\r\n};\r\nexport { FormCheckbox, type FormCheckboxProps };\r\n"],"names":["FormCheckbox","props","name","control","defaultValue","disabled","readOnly","rules","shouldUnregister","label","slotProps","required","formItemProps","field","useController","handleCheckChanged","useCallback","checked","jsx","FormField","jsxs","FormItem","FormControl","Checkbox","FormLabel","cn","FormMessage"],"mappings":";;;;;;AA0BA,MAAMA,IAAe,CAA0EC,MAAkD;AAC/I,QAAM,EAAE,MAAAC,GAAM,SAAAC,GAAS,cAAAC,GAAc,UAAAC,GAAU,UAAAC,GAAU,OAAAC,GAAO,kBAAAC,GAAkB,OAAAC,GAAO,WAAAC,GAAW,UAAAC,GAAU,GAAGC,MAAkBX,GAC7H,EAAE,OAAAY,EAAA,IAAUC,EAAc,EAAE,MAAAZ,GAAM,SAAAC,GAAS,OAAAI,GAAO,cAAAH,GAAc,UAAAC,GAAU,kBAAAG,GAAkB,GAE5FO,IAAqBC;AAAA,IACzB,CAACC,MAAqB;AACpB,MAAAJ,EAAM,SAASI,CAAO;AAAA,IACxB;AAAA,IACA,CAACJ,CAAK;AAAA,EAAA;AAGR,SACE,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAhB;AAAA,MACA,MAAAD;AAAA,MACA,cAAAE;AAAA,MACA,UAAAC;AAAA,MACA,OAAAE;AAAA,MACA,kBAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAK,QAEP,gBAAAO,EAACC,GAAA,EAAU,GAAGT,GAAe,WAAU,uEACrC,UAAA;AAAA,QAAA,gBAAAM,EAACI,GAAA,EAAa,GAAIZ,GAAW,oBAAoB,CAAA,GAC/C,UAAA,gBAAAQ;AAAA,UAACK;AAAA,UAAA;AAAA,YACE,GAAIb,GAAW,iBAAiB,CAAA;AAAA,YAChC,GAAGG;AAAAA,YACJ,SAASA,EAAM;AAAA,YACf,iBAAiBE;AAAA,YACjB,iBAAeJ;AAAA,YACf,UAAUN,KAAYC;AAAA,UAAA;AAAA,QAAA,GAE1B;AAAA,QACA,gBAAAc,EAACI,GAAA,EAAW,GAAId,GAAW,kBAAkB,CAAA,GAAK,WAAWe,EAAG,iBAAiBf,GAAW,gBAAgB,SAAS,GAClH,UAAA;AAAA,UAAAD;AAAA,UACAE,KAAY,gBAAAO,EAAC,QAAA,EAAK,WAAU,6CAA4C,UAAA,IAAA,CAAC;AAAA,QAAA,GAC5E;AAAA,0BACCQ,GAAA,EAAa,GAAIhB,GAAW,oBAAoB,CAAA,EAAC,CAAI;AAAA,MAAA,GACxD;AAAA,IAEJ;AAAA,EAAA;AAGN;"}