@arolariu/components 0.1.2 → 0.3.0

package/dist/components/ui/counting-number.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 import { useInView, useMotionValue, useSpring } from "motion/react";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 const CountingNumber = /*#__PURE__*/ forwardRef(({ number, fromNumber = 0, padStart = false, inView = false, inViewMargin = "0px", inViewOnce = true, decimalSeparator = ".", transition = {
     stiffness: 90,
     damping: 50
@@ -9,7 +9,7 @@ const CountingNumber = /*#__PURE__*/ forwardRef(({ number, fromNumber = 0, padSt
     const localRef = useRef(null);
     useImperativeHandle(ref, ()=>localRef.current);
     const numberStr = number.toString();
-    const decimals = "number" == typeof decimalPlaces ? decimalPlaces : numberStr.includes(".") ? numberStr.split(".")[1].length : 0;
+    const decimals = "number" == typeof decimalPlaces ? decimalPlaces : numberStr.includes(".") ? numberStr?.split(".")[1].length : 0;
     const motionVal = useMotionValue(fromNumber);
     const springVal = useSpring(motionVal, transition);
     const inViewResult = useInView(localRef, {
@@ -47,7 +47,8 @@ const CountingNumber = /*#__PURE__*/ forwardRef(({ number, fromNumber = 0, padSt
         decimalSeparator
     ]);
     const finalIntLength = Math.floor(Math.abs(number)).toString().length;
-    const initialText = padStart ? "0".padStart(finalIntLength, "0") + (decimals > 0 ? decimalSeparator + "0".repeat(decimals) : "") : "0" + (decimals > 0 ? decimalSeparator + "0".repeat(decimals) : "");
+    const suffix = decimals > 0 ? `${decimalSeparator}${"0".repeat(decimals)}` : "";
+    const initialText = padStart ? `${"0".padStart(finalIntLength, "0")}${suffix}` : `0${suffix}`;
     return /*#__PURE__*/ jsx("span", {
         ref: localRef,
         className: className,

package/dist/components/ui/counting-number.js.map

@@ -1 +1 @@
-{"version":3,"file":"components\\ui\\counting-number.js","sources":["webpack://@arolariu/components/./src/components/ui/counting-number.tsx"],"sourcesContent":["\n\nimport * as React from \"react\";\nimport {\n  type SpringOptions,\n  type UseInViewOptions,\n  useInView,\n  useMotionValue,\n  useSpring,\n} from \"motion/react\";\n\ninterface CountingNumberProps extends React.HTMLAttributes<HTMLSpanElement> {\n  number: number;\n  fromNumber?: number;\n  padStart?: boolean;\n  inView?: boolean;\n  inViewMargin?: UseInViewOptions[\"margin\"];\n  inViewOnce?: boolean;\n  decimalSeparator?: string;\n  transition?: SpringOptions;\n  decimalPlaces?: number;\n}\n\nconst CountingNumber = React.forwardRef<HTMLSpanElement, CountingNumberProps>(\n  (\n    {\n      number,\n      fromNumber = 0,\n      padStart = false,\n      inView = false,\n      inViewMargin = \"0px\",\n      inViewOnce = true,\n      decimalSeparator = \".\",\n      transition = { stiffness: 90, damping: 50 },\n      decimalPlaces = 0,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const localRef = React.useRef<HTMLSpanElement>(null);\n    React.useImperativeHandle(ref, () => localRef.current as HTMLSpanElement);\n\n    const numberStr = number.toString();\n    const decimals =\n      typeof decimalPlaces === \"number\"\n        ? decimalPlaces\n        : numberStr.includes(\".\")\n          ? numberStr.split(\".\")[1].length\n          : 0;\n\n    const motionVal = useMotionValue(fromNumber);\n    const springVal = useSpring(motionVal, transition);\n    const inViewResult = useInView(localRef, {\n      once: inViewOnce,\n      margin: inViewMargin,\n    });\n    const isInView = !inView || inViewResult;\n\n    React.useEffect(() => {\n      if (isInView) motionVal.set(number);\n    }, [isInView, number, motionVal]);\n\n    React.useEffect(() => {\n      const unsubscribe = springVal.on(\"change\", (latest) => {\n        if (localRef.current) {\n          let formatted =\n            decimals > 0\n              ? latest.toFixed(decimals)\n              : Math.round(latest).toString();\n\n          if (decimals > 0) {\n            formatted = formatted.replace(\".\", decimalSeparator);\n          }\n\n          if (padStart) {\n            const finalIntLength = Math.floor(Math.abs(number)).toString()\n              .length;\n            const [intPart, fracPart] = formatted.split(decimalSeparator);\n            const paddedInt = intPart.padStart(finalIntLength, \"0\");\n            formatted = fracPart\n              ? `${paddedInt}${decimalSeparator}${fracPart}`\n              : paddedInt;\n          }\n\n          localRef.current.textContent = formatted;\n        }\n      });\n      return () => unsubscribe();\n    }, [springVal, decimals, padStart, number, decimalSeparator]);\n\n    const finalIntLength = Math.floor(Math.abs(number)).toString().length;\n    const initialText = padStart\n      ? \"0\".padStart(finalIntLength, \"0\") +\n        (decimals > 0 ? decimalSeparator + \"0\".repeat(decimals) : \"\")\n      : \"0\" + (decimals > 0 ? decimalSeparator + \"0\".repeat(decimals) : \"\");\n\n    return (\n      <span ref={localRef} className={className} {...props}>\n        {initialText}\n      </span>\n    );\n  },\n);\n\nCountingNumber.displayName = \"CountingNumber\";\n\nexport { CountingNumber, type CountingNumberProps };\n"],"names":["CountingNumber","React","number","fromNumber","padStart","inView","inViewMargin","inViewOnce","decimalSeparator","transition","decimalPlaces","className","props","ref","localRef","numberStr","decimals","motionVal","useMotionValue","springVal","useSpring","inViewResult","useInView","isInView","unsubscribe","latest","formatted","Math","finalIntLength","intPart","fracPart","paddedInt","initialText"],"mappings":";;;;AAuBA,MAAMA,iBAAiB,WAAjBA,GAAiBC,WACrB,CACE,EACEC,MAAM,EACNC,aAAa,CAAC,EACdC,WAAW,KAAK,EAChBC,SAAS,KAAK,EACdC,eAAe,KAAK,EACpBC,aAAa,IAAI,EACjBC,mBAAmB,GAAG,EACtBC,aAAa;IAAE,WAAW;IAAI,SAAS;AAAG,CAAC,EAC3CC,gBAAgB,CAAC,EACjBC,SAAS,EACT,GAAGC,OACJ,EACDC;IAEA,MAAMC,WAAWb,OAA8B;IAC/CA,oBAA0BY,KAAK,IAAMC,SAAS,OAAO;IAErD,MAAMC,YAAYb,OAAO,QAAQ;IACjC,MAAMc,WACJ,mBAAON,gBACHA,gBACAK,UAAU,QAAQ,CAAC,OACjBA,UAAU,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,GAC9B;IAER,MAAME,YAAYC,eAAef;IACjC,MAAMgB,YAAYC,UAAUH,WAAWR;IACvC,MAAMY,eAAeC,UAAUR,UAAU;QACvC,MAAMP;QACN,QAAQD;IACV;IACA,MAAMiB,WAAW,CAAClB,UAAUgB;IAE5BpB,UAAgB;QACd,IAAIsB,UAAUN,UAAU,GAAG,CAACf;IAC9B,GAAG;QAACqB;QAAUrB;QAAQe;KAAU;IAEhChB,UAAgB;QACd,MAAMuB,cAAcL,UAAU,EAAE,CAAC,UAAU,CAACM;YAC1C,IAAIX,SAAS,OAAO,EAAE;gBACpB,IAAIY,YACFV,WAAW,IACPS,OAAO,OAAO,CAACT,YACfW,KAAK,KAAK,CAACF,QAAQ,QAAQ;gBAEjC,IAAIT,WAAW,GACbU,YAAYA,UAAU,OAAO,CAAC,KAAKlB;gBAGrC,IAAIJ,UAAU;oBACZ,MAAMwB,iBAAiBD,KAAK,KAAK,CAACA,KAAK,GAAG,CAACzB,SAAS,QAAQ,GACzD,MAAM;oBACT,MAAM,CAAC2B,SAASC,SAAS,GAAGJ,UAAU,KAAK,CAAClB;oBAC5C,MAAMuB,YAAYF,QAAQ,QAAQ,CAACD,gBAAgB;oBACnDF,YAAYI,WACR,GAAGC,YAAYvB,mBAAmBsB,UAAU,GAC5CC;gBACN;gBAEAjB,SAAS,OAAO,CAAC,WAAW,GAAGY;YACjC;QACF;QACA,OAAO,IAAMF;IACf,GAAG;QAACL;QAAWH;QAAUZ;QAAUF;QAAQM;KAAiB;IAE5D,MAAMoB,iBAAiBD,KAAK,KAAK,CAACA,KAAK,GAAG,CAACzB,SAAS,QAAQ,GAAG,MAAM;IACrE,MAAM8B,cAAc5B,WAChB,IAAI,QAAQ,CAACwB,gBAAgB,OAC5BZ,CAAAA,WAAW,IAAIR,mBAAmB,IAAI,MAAM,CAACQ,YAAY,EAAC,IAC3D,MAAOA,CAAAA,WAAW,IAAIR,mBAAmB,IAAI,MAAM,CAACQ,YAAY,EAAC;IAErE,OAAO,WAAP,GACE,IAAC;QAAK,KAAKF;QAAU,WAAWH;QAAY,GAAGC,KAAK;kBACjDoB;;AAGP;AAGFhC,eAAe,WAAW,GAAG"}
+{"version":3,"file":"components\\ui\\counting-number.js","sources":["webpack://@arolariu/components/./src/components/ui/counting-number.tsx"],"sourcesContent":["\r\n\r\nimport {type SpringOptions, type UseInViewOptions, useInView, useMotionValue, useSpring} from \"motion/react\";\r\nimport * as React from \"react\";\r\n\r\ninterface CountingNumberProps extends React.HTMLAttributes<HTMLSpanElement> {\r\n  number: number;\r\n  fromNumber?: number;\r\n  padStart?: boolean;\r\n  inView?: boolean;\r\n  inViewMargin?: UseInViewOptions[\"margin\"];\r\n  inViewOnce?: boolean;\r\n  decimalSeparator?: string;\r\n  transition?: SpringOptions;\r\n  decimalPlaces?: number;\r\n}\r\n\r\nconst CountingNumber = React.forwardRef<HTMLSpanElement, CountingNumberProps>(\r\n  (\r\n    {\r\n      number,\r\n      fromNumber = 0,\r\n      padStart = false,\r\n      inView = false,\r\n      inViewMargin = \"0px\",\r\n      inViewOnce = true,\r\n      decimalSeparator = \".\",\r\n      transition = {stiffness: 90, damping: 50},\r\n      decimalPlaces = 0,\r\n      className,\r\n      ...props\r\n    },\r\n    ref,\r\n  ) => {\r\n    const localRef = React.useRef<HTMLSpanElement>(null);\r\n    React.useImperativeHandle(ref, () => localRef.current as HTMLSpanElement);\r\n\r\n    const numberStr = number.toString();\r\n    const decimals = typeof decimalPlaces === \"number\" ? decimalPlaces : numberStr.includes(\".\") ? numberStr?.split(\".\")[1].length : 0;\r\n\r\n    const motionVal = useMotionValue(fromNumber);\r\n    const springVal = useSpring(motionVal, transition);\r\n    const inViewResult = useInView(localRef, {\r\n      once: inViewOnce,\r\n      margin: inViewMargin,\r\n    });\r\n    const isInView = !inView || inViewResult;\r\n\r\n    React.useEffect(() => {\r\n      if (isInView) motionVal.set(number);\r\n    }, [isInView, number, motionVal]);\r\n\r\n    React.useEffect(() => {\r\n      const unsubscribe = springVal.on(\"change\", (latest) => {\r\n        if (localRef.current) {\r\n          let formatted = decimals > 0 ? latest.toFixed(decimals) : Math.round(latest).toString();\r\n\r\n          if (decimals > 0) {\r\n            formatted = formatted.replace(\".\", decimalSeparator);\r\n          }\r\n\r\n          if (padStart) {\r\n            const finalIntLength = Math.floor(Math.abs(number)).toString().length;\r\n            const [intPart, fracPart] = formatted.split(decimalSeparator);\r\n            const paddedInt = intPart.padStart(finalIntLength, \"0\");\r\n            formatted = fracPart ? `${paddedInt}${decimalSeparator}${fracPart}` : paddedInt;\r\n          }\r\n\r\n          localRef.current.textContent = formatted;\r\n        }\r\n      });\r\n      return () => unsubscribe();\r\n    }, [springVal, decimals, padStart, number, decimalSeparator]);\r\n\r\n    const finalIntLength = Math.floor(Math.abs(number)).toString().length;\r\n    const suffix = decimals > 0 ? `${decimalSeparator}${\"0\".repeat(decimals)}` : \"\";\r\n    const initialText = padStart ? `${\"0\".padStart(finalIntLength, \"0\")}${suffix}` : `0${suffix}`;\r\n\r\n    return (\r\n      <span\r\n        ref={localRef}\r\n        className={className}\r\n        {...props}>\r\n        {initialText}\r\n      </span>\r\n    );\r\n  },\r\n);\r\n\r\nCountingNumber.displayName = \"CountingNumber\";\r\n\r\nexport {CountingNumber, type CountingNumberProps};\r\n"],"names":["CountingNumber","React","number","fromNumber","padStart","inView","inViewMargin","inViewOnce","decimalSeparator","transition","decimalPlaces","className","props","ref","localRef","numberStr","decimals","motionVal","useMotionValue","springVal","useSpring","inViewResult","useInView","isInView","unsubscribe","latest","formatted","Math","finalIntLength","intPart","fracPart","paddedInt","suffix","initialText"],"mappings":";;;;AAiBA,MAAMA,iBAAiB,WAAjBA,GAAiBC,WACrB,CACE,EACEC,MAAM,EACNC,aAAa,CAAC,EACdC,WAAW,KAAK,EAChBC,SAAS,KAAK,EACdC,eAAe,KAAK,EACpBC,aAAa,IAAI,EACjBC,mBAAmB,GAAG,EACtBC,aAAa;IAAC,WAAW;IAAI,SAAS;AAAE,CAAC,EACzCC,gBAAgB,CAAC,EACjBC,SAAS,EACT,GAAGC,OACJ,EACDC;IAEA,MAAMC,WAAWb,OAA8B;IAC/CA,oBAA0BY,KAAK,IAAMC,SAAS,OAAO;IAErD,MAAMC,YAAYb,OAAO,QAAQ;IACjC,MAAMc,WAAW,mBAAON,gBAA6BA,gBAAgBK,UAAU,QAAQ,CAAC,OAAOA,WAAW,MAAM,IAAI,CAAC,EAAE,CAAC,SAAS;IAEjI,MAAME,YAAYC,eAAef;IACjC,MAAMgB,YAAYC,UAAUH,WAAWR;IACvC,MAAMY,eAAeC,UAAUR,UAAU;QACvC,MAAMP;QACN,QAAQD;IACV;IACA,MAAMiB,WAAW,CAAClB,UAAUgB;IAE5BpB,UAAgB;QACd,IAAIsB,UAAUN,UAAU,GAAG,CAACf;IAC9B,GAAG;QAACqB;QAAUrB;QAAQe;KAAU;IAEhChB,UAAgB;QACd,MAAMuB,cAAcL,UAAU,EAAE,CAAC,UAAU,CAACM;YAC1C,IAAIX,SAAS,OAAO,EAAE;gBACpB,IAAIY,YAAYV,WAAW,IAAIS,OAAO,OAAO,CAACT,YAAYW,KAAK,KAAK,CAACF,QAAQ,QAAQ;gBAErF,IAAIT,WAAW,GACbU,YAAYA,UAAU,OAAO,CAAC,KAAKlB;gBAGrC,IAAIJ,UAAU;oBACZ,MAAMwB,iBAAiBD,KAAK,KAAK,CAACA,KAAK,GAAG,CAACzB,SAAS,QAAQ,GAAG,MAAM;oBACrE,MAAM,CAAC2B,SAASC,SAAS,GAAGJ,UAAU,KAAK,CAAClB;oBAC5C,MAAMuB,YAAYF,QAAQ,QAAQ,CAACD,gBAAgB;oBACnDF,YAAYI,WAAW,GAAGC,YAAYvB,mBAAmBsB,UAAU,GAAGC;gBACxE;gBAEAjB,SAAS,OAAO,CAAC,WAAW,GAAGY;YACjC;QACF;QACA,OAAO,IAAMF;IACf,GAAG;QAACL;QAAWH;QAAUZ;QAAUF;QAAQM;KAAiB;IAE5D,MAAMoB,iBAAiBD,KAAK,KAAK,CAACA,KAAK,GAAG,CAACzB,SAAS,QAAQ,GAAG,MAAM;IACrE,MAAM8B,SAAShB,WAAW,IAAI,GAAGR,mBAAmB,IAAI,MAAM,CAACQ,WAAW,GAAG;IAC7E,MAAMiB,cAAc7B,WAAW,GAAG,IAAI,QAAQ,CAACwB,gBAAgB,OAAOI,QAAQ,GAAG,CAAC,CAAC,EAAEA,QAAQ;IAE7F,OAAO,WAAP,GACE,IAAC;QACC,KAAKlB;QACL,WAAWH;QACV,GAAGC,KAAK;kBACRqB;;AAGP;AAGFjC,eAAe,WAAW,GAAG"}

package/dist/components/ui/dialog.d.ts

@@ -1,16 +1,20 @@
-import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
-declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
-declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
-declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
-declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
-    showCloseButton?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
-declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+import * as React from "react";
+declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };
 //# sourceMappingURL=dialog.d.ts.map

package/dist/components/ui/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/ui/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAK1D,iBAAS,MAAM,CAAC,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAEnD;AAED,iBAAS,aAAa,CAAC,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAEtD;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,2CAErD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAWtD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,eAAsB,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IACxD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,2CAyBA;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQzE;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWzE;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQpD;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,2CAW1D;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,CAAC"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/ui/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,QAAA,MAAM,MAAM,uCAAuB,CAAC;AAEpC,QAAA,MAAM,aAAa,8GAA0B,CAAC;AAE9C,QAAA,MAAM,YAAY,6CAAyB,CAAC;AAE5C,QAAA,MAAM,WAAW,4GAAwB,CAAC;AAE1C,QAAA,MAAM,aAAa,8JAYjB,CAAC;AAGH,QAAA,MAAM,aAAa,8JAoBjB,CAAC;AAGH,QAAA,MAAM,YAAY;8BAA2B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAKhF,CAAC;AAGF,QAAA,MAAM,YAAY;8BAA2B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAKhF,CAAC;AAGF,QAAA,MAAM,WAAW,oKASf,CAAC;AAGH,QAAA,MAAM,iBAAiB,8KASrB,CAAC;AAGH,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,CAAC"}

package/dist/components/ui/dialog.js

@@ -1,56 +1,34 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import "react";
 import { Close, Content, Description, Overlay, Portal, Root, Title, Trigger } from "@radix-ui/react-dialog";
-import { XIcon } from "lucide-react";
-import { cn } from "../../lib/utils.js";
-function Dialog({ ...props }) {
-    return /*#__PURE__*/ jsx(Root, {
-        "data-slot": "dialog",
+import { X } from "lucide-react";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utilities.js";
+const Dialog = Root;
+const DialogTrigger = Trigger;
+const DialogPortal = Portal;
+const DialogClose = Close;
+const DialogOverlay = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Overlay, {
+        ref: ref,
+        className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80", className),
         ...props
-    });
-}
-function DialogTrigger({ ...props }) {
-    return /*#__PURE__*/ jsx(Trigger, {
-        "data-slot": "dialog-trigger",
-        ...props
-    });
-}
-function DialogPortal({ ...props }) {
-    return /*#__PURE__*/ jsx(Portal, {
-        "data-slot": "dialog-portal",
-        ...props
-    });
-}
-function DialogClose({ ...props }) {
-    return /*#__PURE__*/ jsx(Close, {
-        "data-slot": "dialog-close",
-        ...props
-    });
-}
-function DialogOverlay({ className, ...props }) {
-    return /*#__PURE__*/ jsx(Overlay, {
-        "data-slot": "dialog-overlay",
-        className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", className),
-        ...props
-    });
-}
-function DialogContent({ className, children, showCloseButton = true, ...props }) {
-    return /*#__PURE__*/ jsxs(DialogPortal, {
-        "data-slot": "dialog-portal",
+    }));
+DialogOverlay.displayName = Overlay.displayName;
+const DialogContent = /*#__PURE__*/ forwardRef(({ className, children, ...props }, ref)=>/*#__PURE__*/ jsxs(DialogPortal, {
         children: [
             /*#__PURE__*/ jsx(DialogOverlay, {}),
             /*#__PURE__*/ jsxs(Content, {
-                "data-slot": "dialog-content",
-                className: cn("bg-white 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-neutral-200 p-6 shadow-lg duration-200 sm:max-w-lg dark:bg-neutral-950 dark:border-neutral-800", className),
+                ref: ref,
+                className: cn("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%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 sm:rounded-lg dark:border-neutral-800 dark:bg-neutral-950", className),
                 ...props,
                 children: [
                     children,
-                    showCloseButton && /*#__PURE__*/ jsxs(Close, {
-                        "data-slot": "dialog-close",
-                        className: "ring-offset-white focus:ring-neutral-950 data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400",
+                    /*#__PURE__*/ jsxs(Close, {
+                        className: "absolute top-4 right-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400",
                         children: [
-                            /*#__PURE__*/ jsx(XIcon, {}),
+                            /*#__PURE__*/ jsx(X, {
+                                className: "h-4 w-4"
+                            }),
                             /*#__PURE__*/ jsx("span", {
                                 className: "sr-only",
                                 children: "Close"
@@ -60,36 +38,30 @@ function DialogContent({ className, children, showCloseButton = true, ...props }
                 ]
             })
         ]
-    });
-}
-function DialogHeader({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
-        "data-slot": "dialog-header",
-        className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+    }));
+DialogContent.displayName = Content.displayName;
+const DialogHeader = ({ className, ...props })=>/*#__PURE__*/ jsx("div", {
+        className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className),
         ...props
     });
-}
-function DialogFooter({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
-        "data-slot": "dialog-footer",
-        className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+DialogHeader.displayName = "DialogHeader";
+const DialogFooter = ({ className, ...props })=>/*#__PURE__*/ jsx("div", {
+        className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
         ...props
     });
-}
-function DialogTitle({ className, ...props }) {
-    return /*#__PURE__*/ jsx(Title, {
-        "data-slot": "dialog-title",
-        className: cn("text-lg leading-none font-semibold", className),
+DialogFooter.displayName = "DialogFooter";
+const DialogTitle = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Title, {
+        ref: ref,
+        className: cn("text-lg leading-none font-semibold tracking-tight", className),
         ...props
-    });
-}
-function DialogDescription({ className, ...props }) {
-    return /*#__PURE__*/ jsx(Description, {
-        "data-slot": "dialog-description",
-        className: cn("text-neutral-500 text-sm dark:text-neutral-400", className),
+    }));
+DialogTitle.displayName = Title.displayName;
+const DialogDescription = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Description, {
+        ref: ref,
+        className: cn("text-sm text-neutral-500 dark:text-neutral-400", className),
         ...props
-    });
-}
+    }));
+DialogDescription.displayName = Description.displayName;
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
 
 //# sourceMappingURL=dialog.js.map

package/dist/components/ui/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"components\\ui\\dialog.js","sources":["webpack://@arolariu/components/./src/components/ui/dialog.tsx"],"sourcesContent":["\n\nimport * as React from \"react\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { XIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean;\n}) {\n  return (\n    <DialogPortal data-slot=\"dialog-portal\">\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-white 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-neutral-200 p-6 shadow-lg duration-200 sm:max-w-lg dark:bg-neutral-950 dark:border-neutral-800\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            className=\"ring-offset-white focus:ring-neutral-950 data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400\"\n          >\n            <XIcon />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2 text-center sm:text-left\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-lg leading-none font-semibold\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-neutral-500 text-sm dark:text-neutral-400\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n"],"names":["Dialog","props","DialogPrimitive","DialogTrigger","DialogPortal","DialogClose","DialogOverlay","className","cn","DialogContent","children","showCloseButton","XIcon","DialogHeader","DialogFooter","DialogTitle","DialogDescription"],"mappings":";;;;;;AAQA,SAASA,OAAO,EACd,GAAGC,OAC+C;IAClD,OAAO,WAAP,GAAO,IAACC,MAAoB;QAAC,aAAU;QAAU,GAAGD,KAAK;;AAC3D;AAEA,SAASE,cAAc,EACrB,GAAGF,OACkD;IACrD,OAAO,WAAP,GAAO,IAACC,SAAuB;QAAC,aAAU;QAAkB,GAAGD,KAAK;;AACtE;AAEA,SAASG,aAAa,EACpB,GAAGH,OACiD;IACpD,OAAO,WAAP,GAAO,IAACC,QAAsB;QAAC,aAAU;QAAiB,GAAGD,KAAK;;AACpE;AAEA,SAASI,YAAY,EACnB,GAAGJ,OACgD;IACnD,OAAO,WAAP,GAAO,IAACC,OAAqB;QAAC,aAAU;QAAgB,GAAGD,KAAK;;AAClE;AAEA,SAASK,cAAc,EACrBC,SAAS,EACT,GAAGN,OACkD;IACrD,OAAO,WAAP,GACE,IAACC,SAAuB;QACtB,aAAU;QACV,WAAWM,GACT,0JACAD;QAED,GAAGN,KAAK;;AAGf;AAEA,SAASQ,cAAc,EACrBF,SAAS,EACTG,QAAQ,EACRC,kBAAkB,IAAI,EACtB,GAAGV,OAGJ;IACC,OAAO,WAAP,GACE,KAACG,cAAAA;QAAa,aAAU;;0BACtB,IAACE,eAAAA,CAAAA;0BACD,KAACJ,SAAuB;gBACtB,aAAU;gBACV,WAAWM,GACT,yaACAD;gBAED,GAAGN,KAAK;;oBAERS;oBACAC,mBAAmB,WAAnBA,GACC,KAACT,OAAqB;wBACpB,aAAU;wBACV,WAAU;;0CAEV,IAACU,OAAKA,CAAAA;0CACN,IAAC;gCAAK,WAAU;0CAAU;;;;;;;;AAMtC;AAEA,SAASC,aAAa,EAAEN,SAAS,EAAE,GAAGN,OAAoC;IACxE,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,WAAWO,GAAG,gDAAgDD;QAC7D,GAAGN,KAAK;;AAGf;AAEA,SAASa,aAAa,EAAEP,SAAS,EAAE,GAAGN,OAAoC;IACxE,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,WAAWO,GACT,0DACAD;QAED,GAAGN,KAAK;;AAGf;AAEA,SAASc,YAAY,EACnBR,SAAS,EACT,GAAGN,OACgD;IACnD,OAAO,WAAP,GACE,IAACC,OAAqB;QACpB,aAAU;QACV,WAAWM,GAAG,sCAAsCD;QACnD,GAAGN,KAAK;;AAGf;AAEA,SAASe,kBAAkB,EACzBT,SAAS,EACT,GAAGN,OACsD;IACzD,OAAO,WAAP,GACE,IAACC,aAA2B;QAC1B,aAAU;QACV,WAAWM,GACT,kDACAD;QAED,GAAGN,KAAK;;AAGf"}
+{"version":3,"file":"components\\ui\\dialog.js","sources":["webpack://@arolariu/components/./src/components/ui/dialog.tsx"],"sourcesContent":["\r\n\r\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\r\nimport {X} from \"lucide-react\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nconst Dialog = DialogPrimitive.Root;\r\n\r\nconst DialogTrigger = DialogPrimitive.Trigger;\r\n\r\nconst DialogPortal = DialogPrimitive.Portal;\r\n\r\nconst DialogClose = DialogPrimitive.Close;\r\n\r\nconst DialogOverlay = React.forwardRef<\r\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\r\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\r\n>(({className, ...props}, ref) => (\r\n  <DialogPrimitive.Overlay\r\n    ref={ref}\r\n    className={cn(\r\n      \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80\",\r\n      className,\r\n    )}\r\n    {...props}\r\n  />\r\n));\r\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName;\r\n\r\nconst DialogContent = React.forwardRef<\r\n  React.ElementRef<typeof DialogPrimitive.Content>,\r\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\r\n>(({className, children, ...props}, ref) => (\r\n  <DialogPortal>\r\n    <DialogOverlay />\r\n    <DialogPrimitive.Content\r\n      ref={ref}\r\n      className={cn(\r\n        \"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%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 sm:rounded-lg dark:border-neutral-800 dark:bg-neutral-950\",\r\n        className,\r\n      )}\r\n      {...props}>\r\n      {children}\r\n      <DialogPrimitive.Close className='absolute top-4 right-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400'>\r\n        <X className='h-4 w-4' />\r\n        <span className='sr-only'>Close</span>\r\n      </DialogPrimitive.Close>\r\n    </DialogPrimitive.Content>\r\n  </DialogPortal>\r\n));\r\nDialogContent.displayName = DialogPrimitive.Content.displayName;\r\n\r\nconst DialogHeader = ({className, ...props}: React.HTMLAttributes<HTMLDivElement>) => (\r\n  <div\r\n    className={cn(\"flex flex-col space-y-1.5 text-center sm:text-left\", className)}\r\n    {...props}\r\n  />\r\n);\r\nDialogHeader.displayName = \"DialogHeader\";\r\n\r\nconst DialogFooter = ({className, ...props}: React.HTMLAttributes<HTMLDivElement>) => (\r\n  <div\r\n    className={cn(\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\", className)}\r\n    {...props}\r\n  />\r\n);\r\nDialogFooter.displayName = \"DialogFooter\";\r\n\r\nconst DialogTitle = React.forwardRef<\r\n  React.ElementRef<typeof DialogPrimitive.Title>,\r\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\r\n>(({className, ...props}, ref) => (\r\n  <DialogPrimitive.Title\r\n    ref={ref}\r\n    className={cn(\"text-lg leading-none font-semibold tracking-tight\", className)}\r\n    {...props}\r\n  />\r\n));\r\nDialogTitle.displayName = DialogPrimitive.Title.displayName;\r\n\r\nconst DialogDescription = React.forwardRef<\r\n  React.ElementRef<typeof DialogPrimitive.Description>,\r\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\r\n>(({className, ...props}, ref) => (\r\n  <DialogPrimitive.Description\r\n    ref={ref}\r\n    className={cn(\"text-sm text-neutral-500 dark:text-neutral-400\", className)}\r\n    {...props}\r\n  />\r\n));\r\nDialogDescription.displayName = DialogPrimitive.Description.displayName;\r\n\r\nexport {\r\n  Dialog,\r\n  DialogClose,\r\n  DialogContent,\r\n  DialogDescription,\r\n  DialogFooter,\r\n  DialogHeader,\r\n  DialogOverlay,\r\n  DialogPortal,\r\n  DialogTitle,\r\n  DialogTrigger,\r\n};\r\n"],"names":["Dialog","DialogPrimitive","DialogTrigger","DialogPortal","DialogClose","DialogOverlay","React","className","props","ref","cn","DialogContent","children","X","DialogHeader","DialogFooter","DialogTitle","DialogDescription"],"mappings":";;;;;;AAQA,MAAMA,SAASC;AAEf,MAAMC,gBAAgBD;AAEtB,MAAME,eAAeF;AAErB,MAAMG,cAAcH;AAEpB,MAAMI,gBAAgB,WAAhBA,GAAgBC,WAGpB,CAAC,EAACC,SAAS,EAAE,GAAGC,OAAM,EAAEC,MAAAA,WAAAA,GACxB,IAACR,SAAuB;QACtB,KAAKQ;QACL,WAAWC,GACT,0JACAH;QAED,GAAGC,KAAK;;AAGbH,cAAc,WAAW,GAAGJ,QAAAA,WAAmC;AAE/D,MAAMU,gBAAgB,WAAhBA,GAAgBL,WAGpB,CAAC,EAACC,SAAS,EAAEK,QAAQ,EAAE,GAAGJ,OAAM,EAAEC,MAAAA,WAAAA,GAClC,KAACN,cAAAA;;0BACC,IAACE,eAAAA,CAAAA;0BACD,KAACJ,SAAuB;gBACtB,KAAKQ;gBACL,WAAWC,GACT,yjBACAH;gBAED,GAAGC,KAAK;;oBACRI;kCACD,KAACX,OAAqB;wBAAC,WAAU;;0CAC/B,IAACY,GAACA;gCAAC,WAAU;;0CACb,IAAC;gCAAK,WAAU;0CAAU;;;;;;;;AAKlCF,cAAc,WAAW,GAAGV,QAAAA,WAAmC;AAE/D,MAAMa,eAAe,CAAC,EAACP,SAAS,EAAE,GAAGC,OAA4C,iBAC/E,IAAC;QACC,WAAWE,GAAG,sDAAsDH;QACnE,GAAGC,KAAK;;AAGbM,aAAa,WAAW,GAAG;AAE3B,MAAMC,eAAe,CAAC,EAACR,SAAS,EAAE,GAAGC,OAA4C,iBAC/E,IAAC;QACC,WAAWE,GAAG,iEAAiEH;QAC9E,GAAGC,KAAK;;AAGbO,aAAa,WAAW,GAAG;AAE3B,MAAMC,cAAc,WAAdA,GAAcV,WAGlB,CAAC,EAACC,SAAS,EAAE,GAAGC,OAAM,EAAEC,MAAAA,WAAAA,GACxB,IAACR,OAAqB;QACpB,KAAKQ;QACL,WAAWC,GAAG,qDAAqDH;QAClE,GAAGC,KAAK;;AAGbQ,YAAY,WAAW,GAAGf,MAAAA,WAAiC;AAE3D,MAAMgB,oBAAoB,WAApBA,GAAoBX,WAGxB,CAAC,EAACC,SAAS,EAAE,GAAGC,OAAM,EAAEC,MAAAA,WAAAA,GACxB,IAACR,aAA2B;QAC1B,KAAKQ;QACL,WAAWC,GAAG,kDAAkDH;QAC/D,GAAGC,KAAK;;AAGbS,kBAAkB,WAAW,GAAGhB,YAAAA,WAAuC"}

package/dist/components/ui/dot-background.d.ts

@@ -1,16 +1,15 @@
 import React from "react";
 /**
  *  DotBackground Component Props
- *
- * @param {number} [width=16] - The horizontal spacing between dots
- * @param {number} [height=16] - The vertical spacing between dots
- * @param {number} [x=0] - The x-offset of the entire pattern
- * @param {number} [y=0] - The y-offset of the entire pattern
- * @param {number} [cx=1] - The x-offset of individual dots
- * @param {number} [cy=1] - The y-offset of individual dots
- * @param {number} [cr=1] - The radius of each dot
- * @param {string} [className] - Additional CSS classes to apply to the SVG container
- * @param {boolean} [glow=false] - Whether dots should have a glowing animation effect
+ * @param width The horizontal spacing between dots
+ * @param height The vertical spacing between dots
+ * @param x The x-offset of the entire pattern
+ * @param y The y-offset of the entire pattern
+ * @param cx The x-offset of individual dots
+ * @param cy The y-offset of individual dots
+ * @param cr The radius of each dot
+ * @param className Additional CSS classes to apply to the SVG container
+ * @param glow Whether dots should have a glowing animation effect
  */
 interface DotBackgroundProps extends React.SVGProps<SVGSVGElement> {
     width?: number;
@@ -26,14 +25,9 @@ interface DotBackgroundProps extends React.SVGProps<SVGSVGElement> {
 }
 /**
  * DotBackground Component
- *
  * A React component that creates an animated or static dot pattern background using SVG.
  * The pattern automatically adjusts to fill its container and can optionally display glowing dots.
- *
- * @component
- *
  * @see DotBackgroundProps for the props interface.
- *
  * @example
  * // Basic usage
  * <DotBackground />
@@ -45,8 +39,7 @@ interface DotBackgroundProps extends React.SVGProps<SVGSVGElement> {
  *   glow={true}
  *   className="opacity-50"
  * />
- *
- * @notes
+ *@summary Summary:
  * - The component is client-side only ("use client")
  * - Automatically responds to container size changes
  * - When glow is enabled, dots will animate with random delays and durations

package/dist/components/ui/dot-background.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dot-background.d.ts","sourceRoot":"","sources":["../../../src/components/ui/dot-background.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAElE;;;;;;;;;;;;GAYG;AACH,UAAU,kBAAmB,SAAQ,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,wBAAgB,aAAa,CAAC,EAC5B,KAAU,EACV,MAAW,EACX,CAAK,EACL,CAAK,EACL,EAAM,EACN,EAAM,EACN,EAAM,EACN,SAAS,EACT,IAAY,EACZ,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAoFpB"}
+{"version":3,"file":"dot-background.d.ts","sourceRoot":"","sources":["../../../src/components/ui/dot-background.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE;;;;;;;;;;;GAWG;AACH,UAAU,kBAAmB,SAAQ,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,wBAAgB,aAAa,CAAC,EAC5B,KAAU,EACV,MAAW,EACX,CAAK,EACL,CAAK,EACL,EAAM,EACN,EAAM,EACN,EAAM,EACN,SAAS,EACT,IAAY,EACZ,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAsFpB"}

package/dist/components/ui/dot-background.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "../../lib/utils.js";
+import { cn } from "../../lib/utilities.js";
 import { motion } from "motion/react";
 import { useEffect, useId, useRef, useState } from "react";
 function DotBackground({ width = 16, height = 16, x = 0, y = 0, cx = 1, cy = 1, cr = 1, className, glow = false, ...props }) {
@@ -59,7 +59,7 @@ function DotBackground({ width = 16, height = 16, x = 0, y = 0, cx = 1, cy = 1,
                     ]
                 })
             }),
-            dots.map((dot, index)=>/*#__PURE__*/ jsx(motion.circle, {
+            dots.map((dot)=>/*#__PURE__*/ jsx(motion.circle, {
                     cx: dot.x,
                     cy: dot.y,
                     r: cr,

package/dist/components/ui/dot-background.js.map

@@ -1 +1 @@
-{"version":3,"file":"components\\ui\\dot-background.js","sources":["webpack://@arolariu/components/./src/components/ui/dot-background.tsx"],"sourcesContent":["\n\nimport { cn } from \"@/lib/utils\";\nimport { motion } from \"motion/react\";\nimport React, { useEffect, useId, useRef, useState } from \"react\";\n\n/**\n *  DotBackground Component Props\n *\n * @param {number} [width=16] - The horizontal spacing between dots\n * @param {number} [height=16] - The vertical spacing between dots\n * @param {number} [x=0] - The x-offset of the entire pattern\n * @param {number} [y=0] - The y-offset of the entire pattern\n * @param {number} [cx=1] - The x-offset of individual dots\n * @param {number} [cy=1] - The y-offset of individual dots\n * @param {number} [cr=1] - The radius of each dot\n * @param {string} [className] - Additional CSS classes to apply to the SVG container\n * @param {boolean} [glow=false] - Whether dots should have a glowing animation effect\n */\ninterface DotBackgroundProps extends React.SVGProps<SVGSVGElement> {\n  width?: number;\n  height?: number;\n  x?: number;\n  y?: number;\n  cx?: number;\n  cy?: number;\n  cr?: number;\n  className?: string;\n  glow?: boolean;\n  [key: string]: unknown;\n}\n\n/**\n * DotBackground Component\n *\n * A React component that creates an animated or static dot pattern background using SVG.\n * The pattern automatically adjusts to fill its container and can optionally display glowing dots.\n *\n * @component\n *\n * @see DotBackgroundProps for the props interface.\n *\n * @example\n * // Basic usage\n * <DotBackground />\n *\n * // With glowing effect and custom spacing\n * <DotBackground\n *   width={20}\n *   height={20}\n *   glow={true}\n *   className=\"opacity-50\"\n * />\n *\n * @notes\n * - The component is client-side only (\"use client\")\n * - Automatically responds to container size changes\n * - When glow is enabled, dots will animate with random delays and durations\n * - Uses Motion for animations\n * - Dots color can be controlled via the text color utility classes\n */\n\nexport function DotBackground({\n  width = 16,\n  height = 16,\n  x = 0,\n  y = 0,\n  cx = 1,\n  cy = 1,\n  cr = 1,\n  className,\n  glow = false,\n  ...props\n}: DotBackgroundProps) {\n  const id = useId();\n  const containerRef = useRef<SVGSVGElement>(null);\n  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });\n\n  useEffect(() => {\n    const updateDimensions = () => {\n      if (containerRef.current) {\n        const { width, height } = containerRef.current.getBoundingClientRect();\n        setDimensions({ width, height });\n      }\n    };\n\n    updateDimensions();\n    window.addEventListener(\"resize\", updateDimensions);\n    return () => window.removeEventListener(\"resize\", updateDimensions);\n  }, []);\n\n  const dots = Array.from(\n    {\n      length:\n        Math.ceil(dimensions.width / width) *\n        Math.ceil(dimensions.height / height),\n    },\n    (_, i) => {\n      const col = i % Math.ceil(dimensions.width / width);\n      const row = Math.floor(i / Math.ceil(dimensions.width / width));\n      return {\n        x: col * width + cx,\n        y: row * height + cy,\n        delay: Math.random() * 5,\n        duration: Math.random() * 3 + 2,\n      };\n    },\n  );\n\n  return (\n    <svg\n      ref={containerRef}\n      aria-hidden=\"true\"\n      className={cn(\n        \"pointer-events-none absolute inset-0 h-full w-full\",\n        className,\n      )}\n      {...props}\n    >\n      <defs>\n        <radialGradient id={`${id}-gradient`}>\n          <stop offset=\"0%\" stopColor=\"currentColor\" stopOpacity=\"1\" />\n          <stop offset=\"100%\" stopColor=\"currentColor\" stopOpacity=\"0\" />\n        </radialGradient>\n      </defs>\n      {dots.map((dot, index) => (\n        <motion.circle\n          key={`${dot.x}-${dot.y}`}\n          cx={dot.x}\n          cy={dot.y}\n          r={cr}\n          fill={glow ? `url(#${id}-gradient)` : \"currentColor\"}\n          className=\"text-neutral-400/80\"\n          initial={glow ? { opacity: 0.4, scale: 1 } : {}}\n          animate={\n            glow\n              ? {\n                  opacity: [0.4, 1, 0.4],\n                  scale: [1, 1.5, 1],\n                }\n              : {}\n          }\n          transition={\n            glow\n              ? {\n                  duration: dot.duration,\n                  repeat: Infinity,\n                  repeatType: \"reverse\",\n                  delay: dot.delay,\n                  ease: \"easeInOut\",\n                }\n              : {}\n          }\n        />\n      ))}\n    </svg>\n  );\n}\n"],"names":["DotBackground","width","height","x","y","cx","cy","cr","className","glow","props","id","useId","containerRef","useRef","dimensions","setDimensions","useState","useEffect","updateDimensions","window","dots","Array","Math","_","i","col","row","cn","dot","index","motion","Infinity"],"mappings":";;;;;AA8DO,SAASA,cAAc,EAC5BC,QAAQ,EAAE,EACVC,SAAS,EAAE,EACXC,IAAI,CAAC,EACLC,IAAI,CAAC,EACLC,KAAK,CAAC,EACNC,KAAK,CAAC,EACNC,KAAK,CAAC,EACNC,SAAS,EACTC,OAAO,KAAK,EACZ,GAAGC,OACgB;IACnB,MAAMC,KAAKC;IACX,MAAMC,eAAeC,OAAsB;IAC3C,MAAM,CAACC,YAAYC,cAAc,GAAGC,SAAS;QAAE,OAAO;QAAG,QAAQ;IAAE;IAEnEC,UAAU;QACR,MAAMC,mBAAmB;YACvB,IAAIN,aAAa,OAAO,EAAE;gBACxB,MAAM,EAAEZ,KAAK,EAAEC,MAAM,EAAE,GAAGW,aAAa,OAAO,CAAC,qBAAqB;gBACpEG,cAAc;oBAAEf;oBAAOC;gBAAO;YAChC;QACF;QAEAiB;QACAC,OAAO,gBAAgB,CAAC,UAAUD;QAClC,OAAO,IAAMC,OAAO,mBAAmB,CAAC,UAAUD;IACpD,GAAG,EAAE;IAEL,MAAME,OAAOC,MAAM,IAAI,CACrB;QACE,QACEC,KAAK,IAAI,CAACR,WAAW,KAAK,GAAGd,SAC7BsB,KAAK,IAAI,CAACR,WAAW,MAAM,GAAGb;IAClC,GACA,CAACsB,GAAGC;QACF,MAAMC,MAAMD,IAAIF,KAAK,IAAI,CAACR,WAAW,KAAK,GAAGd;QAC7C,MAAM0B,MAAMJ,KAAK,KAAK,CAACE,IAAIF,KAAK,IAAI,CAACR,WAAW,KAAK,GAAGd;QACxD,OAAO;YACL,GAAGyB,MAAMzB,QAAQI;YACjB,GAAGsB,MAAMzB,SAASI;YAClB,OAAOiB,IAAAA,KAAK,MAAM;YAClB,UAAUA,IAAAA,KAAK,MAAM,KAAS;QAChC;IACF;IAGF,OAAO,WAAP,GACE,KAAC;QACC,KAAKV;QACL,eAAY;QACZ,WAAWe,GACT,sDACApB;QAED,GAAGE,KAAK;;0BAET,IAAC;0BACC,mBAAC;oBAAe,IAAI,GAAGC,GAAG,SAAS,CAAC;;sCAClC,IAAC;4BAAK,QAAO;4BAAK,WAAU;4BAAe,aAAY;;sCACvD,IAAC;4BAAK,QAAO;4BAAO,WAAU;4BAAe,aAAY;;;;;YAG5DU,KAAK,GAAG,CAAC,CAACQ,KAAKC,QAAAA,WAAAA,GACd,IAACC,OAAO,MAAM;oBAEZ,IAAIF,IAAI,CAAC;oBACT,IAAIA,IAAI,CAAC;oBACT,GAAGtB;oBACH,MAAME,OAAO,CAAC,KAAK,EAAEE,GAAG,UAAU,CAAC,GAAG;oBACtC,WAAU;oBACV,SAASF,OAAO;wBAAE,SAAS;wBAAK,OAAO;oBAAE,IAAI,CAAC;oBAC9C,SACEA,OACI;wBACE,SAAS;4BAAC;4BAAK;4BAAG;yBAAI;wBACtB,OAAO;4BAAC;4BAAG;4BAAK;yBAAE;oBACpB,IACA,CAAC;oBAEP,YACEA,OACI;wBACE,UAAUoB,IAAI,QAAQ;wBACtB,QAAQG;wBACR,YAAY;wBACZ,OAAOH,IAAI,KAAK;wBAChB,MAAM;oBACR,IACA,CAAC;mBAxBF,GAAGA,IAAI,CAAC,CAAC,CAAC,EAAEA,IAAI,CAAC,EAAE;;;AA8BlC"}
+{"version":3,"file":"components\\ui\\dot-background.js","sources":["webpack://@arolariu/components/./src/components/ui/dot-background.tsx"],"sourcesContent":["\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport {motion} from \"motion/react\";\r\nimport React, {useEffect, useId, useRef, useState} from \"react\";\r\n\r\n/**\r\n *  DotBackground Component Props\r\n * @param width The horizontal spacing between dots\r\n * @param height The vertical spacing between dots\r\n * @param x The x-offset of the entire pattern\r\n * @param y The y-offset of the entire pattern\r\n * @param cx The x-offset of individual dots\r\n * @param cy The y-offset of individual dots\r\n * @param cr The radius of each dot\r\n * @param className Additional CSS classes to apply to the SVG container\r\n * @param glow Whether dots should have a glowing animation effect\r\n */\r\ninterface DotBackgroundProps extends React.SVGProps<SVGSVGElement> {\r\n  width?: number;\r\n  height?: number;\r\n  x?: number;\r\n  y?: number;\r\n  cx?: number;\r\n  cy?: number;\r\n  cr?: number;\r\n  className?: string;\r\n  glow?: boolean;\r\n  [key: string]: unknown;\r\n}\r\n\r\n/**\r\n * DotBackground Component\r\n * A React component that creates an animated or static dot pattern background using SVG.\r\n * The pattern automatically adjusts to fill its container and can optionally display glowing dots.\r\n * @see DotBackgroundProps for the props interface.\r\n * @example\r\n * // Basic usage\r\n * <DotBackground />\r\n *\r\n * // With glowing effect and custom spacing\r\n * <DotBackground\r\n *   width={20}\r\n *   height={20}\r\n *   glow={true}\r\n *   className=\"opacity-50\"\r\n * />\r\n *@summary Summary:\r\n * - The component is client-side only (\"use client\")\r\n * - Automatically responds to container size changes\r\n * - When glow is enabled, dots will animate with random delays and durations\r\n * - Uses Motion for animations\r\n * - Dots color can be controlled via the text color utility classes\r\n */\r\n\r\nexport function DotBackground({\r\n  width = 16,\r\n  height = 16,\r\n  x = 0,\r\n  y = 0,\r\n  cx = 1,\r\n  cy = 1,\r\n  cr = 1,\r\n  className,\r\n  glow = false,\r\n  ...props\r\n}: DotBackgroundProps) {\r\n  const id = useId();\r\n  const containerRef = useRef<SVGSVGElement>(null);\r\n  const [dimensions, setDimensions] = useState({width: 0, height: 0});\r\n\r\n  useEffect(() => {\r\n    const updateDimensions = () => {\r\n      if (containerRef.current) {\r\n        const {width, height} = containerRef.current.getBoundingClientRect();\r\n        setDimensions({width, height});\r\n      }\r\n    };\r\n\r\n    updateDimensions();\r\n    window.addEventListener(\"resize\", updateDimensions);\r\n    return () => window.removeEventListener(\"resize\", updateDimensions);\r\n  }, []);\r\n\r\n  const dots = Array.from(\r\n    {\r\n      length: Math.ceil(dimensions.width / width) * Math.ceil(dimensions.height / height),\r\n    },\r\n    (_, i) => {\r\n      const col = i % Math.ceil(dimensions.width / width);\r\n      const row = Math.floor(i / Math.ceil(dimensions.width / width));\r\n      return {\r\n        x: col * width + cx,\r\n        y: row * height + cy,\r\n        delay: Math.random() * 5,\r\n        duration: Math.random() * 3 + 2,\r\n      };\r\n    },\r\n  );\r\n\r\n  return (\r\n    <svg\r\n      ref={containerRef}\r\n      aria-hidden='true'\r\n      className={cn(\"pointer-events-none absolute inset-0 h-full w-full\", className)}\r\n      {...props}>\r\n      <defs>\r\n        <radialGradient id={`${id}-gradient`}>\r\n          <stop\r\n            offset='0%'\r\n            stopColor='currentColor'\r\n            stopOpacity='1'\r\n          />\r\n          <stop\r\n            offset='100%'\r\n            stopColor='currentColor'\r\n            stopOpacity='0'\r\n          />\r\n        </radialGradient>\r\n      </defs>\r\n      {dots.map((dot) => (\r\n        <motion.circle\r\n          key={`${dot.x}-${dot.y}`}\r\n          cx={dot.x}\r\n          cy={dot.y}\r\n          r={cr}\r\n          fill={glow ? `url(#${id}-gradient)` : \"currentColor\"}\r\n          className='text-neutral-400/80'\r\n          initial={glow ? {opacity: 0.4, scale: 1} : {}}\r\n          animate={\r\n            glow\r\n              ? {\r\n                  opacity: [0.4, 1, 0.4],\r\n                  scale: [1, 1.5, 1],\r\n                }\r\n              : {}\r\n          }\r\n          transition={\r\n            glow\r\n              ? {\r\n                  duration: dot.duration,\r\n                  repeat: Infinity,\r\n                  repeatType: \"reverse\",\r\n                  delay: dot.delay,\r\n                  ease: \"easeInOut\",\r\n                }\r\n              : {}\r\n          }\r\n        />\r\n      ))}\r\n    </svg>\r\n  );\r\n}\r\n"],"names":["DotBackground","width","height","x","y","cx","cy","cr","className","glow","props","id","useId","containerRef","useRef","dimensions","setDimensions","useState","useEffect","updateDimensions","window","dots","Array","Math","_","i","col","row","cn","dot","motion","Infinity"],"mappings":";;;;;AAuDO,SAASA,cAAc,EAC5BC,QAAQ,EAAE,EACVC,SAAS,EAAE,EACXC,IAAI,CAAC,EACLC,IAAI,CAAC,EACLC,KAAK,CAAC,EACNC,KAAK,CAAC,EACNC,KAAK,CAAC,EACNC,SAAS,EACTC,OAAO,KAAK,EACZ,GAAGC,OACgB;IACnB,MAAMC,KAAKC;IACX,MAAMC,eAAeC,OAAsB;IAC3C,MAAM,CAACC,YAAYC,cAAc,GAAGC,SAAS;QAAC,OAAO;QAAG,QAAQ;IAAC;IAEjEC,UAAU;QACR,MAAMC,mBAAmB;YACvB,IAAIN,aAAa,OAAO,EAAE;gBACxB,MAAM,EAACZ,KAAK,EAAEC,MAAM,EAAC,GAAGW,aAAa,OAAO,CAAC,qBAAqB;gBAClEG,cAAc;oBAACf;oBAAOC;gBAAM;YAC9B;QACF;QAEAiB;QACAC,OAAO,gBAAgB,CAAC,UAAUD;QAClC,OAAO,IAAMC,OAAO,mBAAmB,CAAC,UAAUD;IACpD,GAAG,EAAE;IAEL,MAAME,OAAOC,MAAM,IAAI,CACrB;QACE,QAAQC,KAAK,IAAI,CAACR,WAAW,KAAK,GAAGd,SAASsB,KAAK,IAAI,CAACR,WAAW,MAAM,GAAGb;IAC9E,GACA,CAACsB,GAAGC;QACF,MAAMC,MAAMD,IAAIF,KAAK,IAAI,CAACR,WAAW,KAAK,GAAGd;QAC7C,MAAM0B,MAAMJ,KAAK,KAAK,CAACE,IAAIF,KAAK,IAAI,CAACR,WAAW,KAAK,GAAGd;QACxD,OAAO;YACL,GAAGyB,MAAMzB,QAAQI;YACjB,GAAGsB,MAAMzB,SAASI;YAClB,OAAOiB,IAAAA,KAAK,MAAM;YAClB,UAAUA,IAAAA,KAAK,MAAM,KAAS;QAChC;IACF;IAGF,OAAO,WAAP,GACE,KAAC;QACC,KAAKV;QACL,eAAY;QACZ,WAAWe,GAAG,sDAAsDpB;QACnE,GAAGE,KAAK;;0BACT,IAAC;0BACC,mBAAC;oBAAe,IAAI,GAAGC,GAAG,SAAS,CAAC;;sCAClC,IAAC;4BACC,QAAO;4BACP,WAAU;4BACV,aAAY;;sCAEd,IAAC;4BACC,QAAO;4BACP,WAAU;4BACV,aAAY;;;;;YAIjBU,KAAK,GAAG,CAAC,CAACQ,MAAAA,WAAAA,GACT,IAACC,OAAO,MAAM;oBAEZ,IAAID,IAAI,CAAC;oBACT,IAAIA,IAAI,CAAC;oBACT,GAAGtB;oBACH,MAAME,OAAO,CAAC,KAAK,EAAEE,GAAG,UAAU,CAAC,GAAG;oBACtC,WAAU;oBACV,SAASF,OAAO;wBAAC,SAAS;wBAAK,OAAO;oBAAC,IAAI,CAAC;oBAC5C,SACEA,OACI;wBACE,SAAS;4BAAC;4BAAK;4BAAG;yBAAI;wBACtB,OAAO;4BAAC;4BAAG;4BAAK;yBAAE;oBACpB,IACA,CAAC;oBAEP,YACEA,OACI;wBACE,UAAUoB,IAAI,QAAQ;wBACtB,QAAQE;wBACR,YAAY;wBACZ,OAAOF,IAAI,KAAK;wBAChB,MAAM;oBACR,IACA,CAAC;mBAxBF,GAAGA,IAAI,CAAC,CAAC,CAAC,EAAEA,IAAI,CAAC,EAAE;;;AA8BlC"}

package/dist/components/ui/drawer.d.ts

@@ -1,14 +1,23 @@
 import * as React from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
-declare function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-declare function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
-declare function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
-declare function DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
-declare function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
-declare function DrawerContent({ className, children, ...props }: React.ComponentProps<typeof DrawerPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
-declare function DrawerHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare function DrawerFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
-declare function DrawerDescription({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
-export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };
+declare const Drawer: {
+    ({ shouldScaleBackground, ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DrawerTrigger: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DrawerPortal: typeof import("vaul").Portal;
+declare const DrawerClose: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DrawerOverlay: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DrawerContent: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DrawerHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DrawerFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DrawerTitle: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DrawerDescription: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, };
 //# sourceMappingURL=drawer.d.ts.map

package/dist/components/ui/drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/components/ui/drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,MAAM,CAAC;AAIjD,iBAAS,MAAM,CAAC,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAEnD;AAED,iBAAS,aAAa,CAAC,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAEtD;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,2CAErD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAWtD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAqBtD;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWzE;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQzE;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAWpD;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,2CAW1D;AAED,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAC"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/components/ui/drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,MAAM,IAAI,eAAe,EAAC,MAAM,MAAM,CAAC;AAI/C,QAAA,MAAM,MAAM;0CAA8C,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;;CAK1G,CAAC;AAGF,QAAA,MAAM,aAAa,+HAA0B,CAAC;AAE9C,QAAA,MAAM,YAAY,8BAAyB,CAAC;AAE5C,QAAA,MAAM,WAAW,6HAAwB,CAAC;AAE1C,QAAA,MAAM,aAAa,kOASjB,CAAC;AAGH,QAAA,MAAM,aAAa,kOAiBjB,CAAC;AAGH,QAAA,MAAM,YAAY;8BAA2B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAKhF,CAAC;AAGF,QAAA,MAAM,YAAY;8BAA2B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAKhF,CAAC;AAGF,QAAA,MAAM,WAAW,qLASf,CAAC;AAGH,QAAA,MAAM,iBAAiB,+LASrB,CAAC;AAGH,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,CAAC"}

package/dist/components/ui/drawer.js

@@ -1,86 +1,61 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import "react";
+import { forwardRef } from "react";
 import { Drawer } from "vaul";
-import { cn } from "../../lib/utils.js";
-function drawer_Drawer({ ...props }) {
-    return /*#__PURE__*/ jsx(Drawer.Root, {
-        "data-slot": "drawer",
-        ...props
-    });
-}
-function DrawerTrigger({ ...props }) {
-    return /*#__PURE__*/ jsx(Drawer.Trigger, {
-        "data-slot": "drawer-trigger",
-        ...props
-    });
-}
-function DrawerPortal({ ...props }) {
-    return /*#__PURE__*/ jsx(Drawer.Portal, {
-        "data-slot": "drawer-portal",
-        ...props
-    });
-}
-function DrawerClose({ ...props }) {
-    return /*#__PURE__*/ jsx(Drawer.Close, {
-        "data-slot": "drawer-close",
-        ...props
-    });
-}
-function DrawerOverlay({ className, ...props }) {
-    return /*#__PURE__*/ jsx(Drawer.Overlay, {
-        "data-slot": "drawer-overlay",
-        className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", className),
-        ...props
-    });
-}
-function DrawerContent({ className, children, ...props }) {
-    return /*#__PURE__*/ jsxs(DrawerPortal, {
-        "data-slot": "drawer-portal",
+import { cn } from "../../lib/utilities.js";
+const drawer_Drawer = ({ shouldScaleBackground = true, ...props })=>/*#__PURE__*/ jsx(Drawer.Root, {
+        shouldScaleBackground: shouldScaleBackground,
+        ...props
+    });
+drawer_Drawer.displayName = "Drawer";
+const DrawerTrigger = Drawer.Trigger;
+const DrawerPortal = Drawer.Portal;
+const DrawerClose = Drawer.Close;
+const DrawerOverlay = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Drawer.Overlay, {
+        ref: ref,
+        className: cn("fixed inset-0 z-50 bg-black/80", className),
+        ...props
+    }));
+DrawerOverlay.displayName = Drawer.Overlay.displayName;
+const DrawerContent = /*#__PURE__*/ forwardRef(({ className, children, ...props }, ref)=>/*#__PURE__*/ jsxs(DrawerPortal, {
         children: [
             /*#__PURE__*/ jsx(DrawerOverlay, {}),
             /*#__PURE__*/ jsxs(Drawer.Content, {
-                "data-slot": "drawer-content",
-                className: cn("group/drawer-content bg-white fixed z-50 flex h-auto flex-col dark:bg-neutral-950", "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b", "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t", "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm", "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm", className),
+                ref: ref,
+                className: cn("fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-950", className),
                 ...props,
                 children: [
                     /*#__PURE__*/ jsx("div", {
-                        className: "bg-neutral-100 mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block dark:bg-neutral-800"
+                        className: "mx-auto mt-4 h-2 w-[100px] rounded-full bg-neutral-100 dark:bg-neutral-800"
                     }),
                     children
                 ]
             })
         ]
-    });
-}
-function DrawerHeader({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
-        "data-slot": "drawer-header",
-        className: cn("flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left", className),
+    }));
+DrawerContent.displayName = "DrawerContent";
+const DrawerHeader = ({ className, ...props })=>/*#__PURE__*/ jsx("div", {
+        className: cn("grid gap-1.5 p-4 text-center sm:text-left", className),
         ...props
     });
-}
-function DrawerFooter({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
-        "data-slot": "drawer-footer",
+DrawerHeader.displayName = "DrawerHeader";
+const DrawerFooter = ({ className, ...props })=>/*#__PURE__*/ jsx("div", {
         className: cn("mt-auto flex flex-col gap-2 p-4", className),
         ...props
     });
-}
-function DrawerTitle({ className, ...props }) {
-    return /*#__PURE__*/ jsx(Drawer.Title, {
-        "data-slot": "drawer-title",
-        className: cn("text-neutral-950 font-semibold dark:text-neutral-50", className),
+DrawerFooter.displayName = "DrawerFooter";
+const DrawerTitle = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Drawer.Title, {
+        ref: ref,
+        className: cn("text-lg leading-none font-semibold tracking-tight", className),
         ...props
-    });
-}
-function DrawerDescription({ className, ...props }) {
-    return /*#__PURE__*/ jsx(Drawer.Description, {
-        "data-slot": "drawer-description",
-        className: cn("text-neutral-500 text-sm dark:text-neutral-400", className),
+    }));
+DrawerTitle.displayName = Drawer.Title.displayName;
+const DrawerDescription = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Drawer.Description, {
+        ref: ref,
+        className: cn("text-sm text-neutral-500 dark:text-neutral-400", className),
         ...props
-    });
-}
+    }));
+DrawerDescription.displayName = Drawer.Description.displayName;
 export { drawer_Drawer as Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger };
 
 //# sourceMappingURL=drawer.js.map