@arolariu/components 0.5.0 → 1.1.0

package/dist/components/ui/dialog.js

@@ -1,67 +1,144 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Close, Content, Description, Overlay, Portal, Root, Title, Trigger } from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
-import { forwardRef } from "react";
+import { Dialog } from "@base-ui/react/dialog";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { forwardRef, isValidElement } 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),
+import dialog_module from "./dialog.module.js";
+function dialog_Dialog(props) {
+    return /*#__PURE__*/ jsx(Dialog.Root, {
         ...props
-    }));
-DialogOverlay.displayName = Overlay.displayName;
-const DialogContent = /*#__PURE__*/ forwardRef(({ className, children, ...props }, ref)=>/*#__PURE__*/ jsxs(DialogPortal, {
+    });
+}
+dialog_Dialog.displayName = "Dialog";
+const DialogTrigger = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { asChild = false, children, className, render, ...otherProps } = props;
+    const renderProp = asChild && /*#__PURE__*/ isValidElement(children) ? children : render;
+    return /*#__PURE__*/ jsx(Dialog.Trigger, {
+        ref: ref,
+        ...otherProps,
+        render: useRender({
+            defaultTagName: "button",
+            render: renderProp,
+            props: mergeProps({
+                className
+            }, {})
+        }),
+        children: renderProp ? void 0 : children
+    });
+});
+DialogTrigger.displayName = "DialogTrigger";
+const DialogPortal = Dialog.Portal;
+DialogPortal.displayName = "DialogPortal";
+function DialogClose(props) {
+    const { className, children, render, ...otherProps } = props;
+    return /*#__PURE__*/ jsx(Dialog.Close, {
+        ...otherProps,
+        render: useRender({
+            defaultTagName: "button",
+            render: render,
+            props: mergeProps({
+                className: cn(dialog_module.close, className)
+            }, {})
+        }),
+        children: children
+    });
+}
+DialogClose.displayName = "DialogClose";
+function DialogOverlay(props) {
+    const { className, render, ...otherProps } = props;
+    return /*#__PURE__*/ jsx(Dialog.Backdrop, {
+        ...otherProps,
+        render: useRender({
+            defaultTagName: "div",
+            render: render,
+            props: mergeProps({
+                className: cn(dialog_module.backdrop, className)
+            }, {})
+        })
+    });
+}
+DialogOverlay.displayName = "DialogOverlay";
+const DialogContent = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { className, children, render, ...otherProps } = props;
+    return /*#__PURE__*/ jsxs(DialogPortal, {
         children: [
             /*#__PURE__*/ jsx(DialogOverlay, {}),
-            /*#__PURE__*/ jsxs(Content, {
+            /*#__PURE__*/ jsx(Dialog.Popup, {
                 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,
-                    /*#__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(X, {
-                                className: "h-4 w-4"
-                            }),
-                            /*#__PURE__*/ jsx("span", {
-                                className: "sr-only",
-                                children: "Close"
-                            })
-                        ]
-                    })
-                ]
+                ...otherProps,
+                render: useRender({
+                    defaultTagName: "div",
+                    render: render,
+                    props: mergeProps({
+                        className: cn(dialog_module.popup, className)
+                    }, {})
+                }),
+                children: children
             })
         ]
-    }));
-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
     });
+});
+DialogContent.displayName = "DialogContent";
+function DialogHeader(props) {
+    const { asChild = false, children, className, render, ...otherProps } = props;
+    const renderProp = asChild && /*#__PURE__*/ isValidElement(children) ? children : render;
+    return useRender({
+        defaultTagName: "div",
+        render: renderProp,
+        props: mergeProps({
+            className: cn(dialog_module.header, className)
+        }, otherProps, {
+            children: renderProp ? void 0 : children
+        })
+    });
+}
 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 DialogFooter(props) {
+    const { asChild = false, children, className, render, ...otherProps } = props;
+    const renderProp = asChild && /*#__PURE__*/ isValidElement(children) ? children : render;
+    return useRender({
+        defaultTagName: "div",
+        render: renderProp,
+        props: mergeProps({
+            className: cn(dialog_module.footer, className)
+        }, otherProps, {
+            children: renderProp ? void 0 : children
+        })
     });
+}
 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
-    }));
-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 };
+function DialogTitle(props) {
+    const { className, children, render, ...otherProps } = props;
+    return /*#__PURE__*/ jsx(Dialog.Title, {
+        ...otherProps,
+        render: useRender({
+            defaultTagName: "h2",
+            render: render,
+            props: mergeProps({
+                className: cn(dialog_module.title, className)
+            }, {})
+        }),
+        children: children
+    });
+}
+DialogTitle.displayName = "DialogTitle";
+function DialogDescription(props) {
+    const { className, children, render, ...otherProps } = props;
+    return /*#__PURE__*/ jsx(Dialog.Description, {
+        ...otherProps,
+        render: useRender({
+            defaultTagName: "p",
+            render: render,
+            props: mergeProps({
+                className: cn(dialog_module.description, className)
+            }, {})
+        }),
+        children: children
+    });
+}
+DialogDescription.displayName = "DialogDescription";
+export { DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, dialog_Dialog as Dialog };
 
 //# sourceMappingURL=dialog.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"components/ui/dialog.js","sources":["../../../src/components/ui/dialog.tsx"],"sourcesContent":["\"use client\";\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.ComponentRef<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.ComponentRef<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.ComponentRef<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.ComponentRef<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"}
+{"version":3,"file":"components/ui/dialog.js","sources":["../../../src/components/ui/dialog.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {Dialog as BaseDialog} from \"@base-ui/react/dialog\";\r\nimport {mergeProps} from \"@base-ui/react/merge-props\";\r\nimport {useRender} from \"@base-ui/react/use-render\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport styles from \"./dialog.module.css\";\r\n\r\ninterface DialogProps extends React.ComponentPropsWithRef<typeof BaseDialog.Root> {}\r\n\r\ninterface DialogTriggerProps extends Omit<React.ComponentPropsWithRef<typeof BaseDialog.Trigger>, \"className\"> {\r\n  /** Additional CSS classes merged with the dialog trigger styles. @default undefined */\r\n  className?: string;\r\n  /** Backward-compatible child-slot API that maps the child element to `render`. @default false @deprecated Prefer Base UI's `render` prop. */\r\n  asChild?: boolean;\r\n}\r\n\r\ninterface DialogCloseProps extends Omit<React.ComponentPropsWithRef<typeof BaseDialog.Close>, \"className\"> {\r\n  /** Additional CSS classes merged with the dialog close control styles. @default undefined */\r\n  className?: string;\r\n}\r\n\r\ninterface DialogOverlayProps extends Omit<React.ComponentPropsWithRef<typeof BaseDialog.Backdrop>, \"className\"> {\r\n  /** Additional CSS classes merged with the dialog backdrop styles. @default undefined */\r\n  className?: string;\r\n}\r\n\r\ninterface DialogContentProps extends Omit<React.ComponentPropsWithRef<typeof BaseDialog.Popup>, \"className\"> {\r\n  /** Additional CSS classes merged with the dialog content styles. @default undefined */\r\n  className?: string;\r\n}\r\n\r\ninterface DialogHeaderProps extends React.ComponentPropsWithRef<\"div\"> {\r\n  /** Additional CSS classes merged with the dialog header layout styles. @default undefined */\r\n  className?: string;\r\n  /** Custom element or render callback used to replace the default header container. @default undefined */\r\n  render?: useRender.RenderProp<Record<string, never>>;\r\n  /** Backward-compatible child-slot API that maps the child element to `render`. @default false @deprecated Prefer the `render` prop. */\r\n  asChild?: boolean;\r\n}\r\n\r\ninterface DialogFooterProps extends React.ComponentPropsWithRef<\"div\"> {\r\n  /** Additional CSS classes merged with the dialog footer layout styles. @default undefined */\r\n  className?: string;\r\n  /** Custom element or render callback used to replace the default footer container. @default undefined */\r\n  render?: useRender.RenderProp<Record<string, never>>;\r\n  /** Backward-compatible child-slot API that maps the child element to `render`. @default false @deprecated Prefer the `render` prop. */\r\n  asChild?: boolean;\r\n}\r\n\r\ninterface DialogTitleProps extends Omit<React.ComponentPropsWithRef<typeof BaseDialog.Title>, \"className\"> {\r\n  /** Additional CSS classes merged with the dialog title styles. @default undefined */\r\n  className?: string;\r\n}\r\n\r\ninterface DialogDescriptionProps extends Omit<React.ComponentPropsWithRef<typeof BaseDialog.Description>, \"className\"> {\r\n  /** Additional CSS classes merged with the dialog description styles. @default undefined */\r\n  className?: string;\r\n}\r\n\r\n/**\r\n * Coordinates modal dialog state, focus management, and accessibility semantics.\r\n *\r\n * @remarks\r\n * - Renders no DOM element by default and coordinates descendant dialog parts\r\n * - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}\r\n * - Supports composition through descendant `render` props\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example Basic usage\r\n * ```tsx\r\n * <Dialog>\r\n *   <DialogTrigger>Open</DialogTrigger>\r\n *   <DialogContent>\r\n *     <DialogTitle>Details</DialogTitle>\r\n *   </DialogContent>\r\n * </Dialog>\r\n * ```\r\n *\r\n * @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}\r\n */\r\nfunction Dialog(props: Readonly<Dialog.Props>): React.ReactElement {\r\n  return <BaseDialog.Root {...props} />;\r\n}\r\nDialog.displayName = \"Dialog\";\r\n\r\n/**\r\n * Opens the dialog from an interactive trigger element.\r\n *\r\n * @remarks\r\n * - Renders a `<button>` element by default\r\n * - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}\r\n * - Supports the `render` prop for element composition\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example Basic usage\r\n * ```tsx\r\n * <DialogTrigger>Open</DialogTrigger>\r\n * ```\r\n *\r\n * @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}\r\n */\r\nconst DialogTrigger = React.forwardRef<HTMLButtonElement, DialogTrigger.Props>(\r\n  (props: Readonly<DialogTrigger.Props>, ref): React.ReactElement => {\r\n    // eslint-disable-next-line sonarjs/deprecation -- backward-compatible asChild support is part of the public API.\r\n    const {asChild = false, children, className, render, ...otherProps} = props;\r\n    const renderProp = asChild && React.isValidElement(children) ? children : render;\r\n\r\n    return (\r\n      <BaseDialog.Trigger\r\n        ref={ref}\r\n        {...otherProps}\r\n        render={useRender({\r\n          defaultTagName: \"button\",\r\n          render: renderProp as never,\r\n          props: mergeProps({className}, {}),\r\n        })}>\r\n        {renderProp ? undefined : children}\r\n      </BaseDialog.Trigger>\r\n    );\r\n  },\r\n);\r\nDialogTrigger.displayName = \"DialogTrigger\";\r\n\r\n/**\r\n * Portals dialog descendants outside the local DOM hierarchy.\r\n *\r\n * @remarks\r\n * - Renders no DOM element by default and portals descendants into the document body\r\n * - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}\r\n * - Does not expose a `render` prop because it only controls mounting context\r\n * - Styling via CSS Modules with `--ac-*` custom properties through descendant components\r\n *\r\n * @example Basic usage\r\n * ```tsx\r\n * <DialogPortal>\r\n *   <DialogOverlay />\r\n *   <DialogContent />\r\n * </DialogPortal>\r\n * ```\r\n *\r\n * @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}\r\n */\r\nconst DialogPortal = BaseDialog.Portal;\r\nDialogPortal.displayName = \"DialogPortal\";\r\n\r\n/**\r\n * Closes the dialog from an interactive control inside the modal.\r\n *\r\n * @remarks\r\n * - Renders a `<button>` element by default\r\n * - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}\r\n * - Supports the `render` prop for element composition\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example Basic usage\r\n * ```tsx\r\n * <DialogClose>Dismiss</DialogClose>\r\n * ```\r\n *\r\n * @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}\r\n */\r\nfunction DialogClose(props: Readonly<DialogClose.Props>): React.ReactElement {\r\n  const {className, children, render, ...otherProps} = props;\r\n\r\n  return (\r\n    <BaseDialog.Close\r\n      {...otherProps}\r\n      render={useRender({\r\n        defaultTagName: \"button\",\r\n        render: render as never,\r\n        props: mergeProps({className: cn(styles.close, className)}, {}),\r\n      })}>\r\n      {children}\r\n    </BaseDialog.Close>\r\n  );\r\n}\r\nDialogClose.displayName = \"DialogClose\";\r\n\r\n/**\r\n * Renders the dimmed backdrop behind dialog content.\r\n *\r\n * @remarks\r\n * - Renders a `<div>` element by default\r\n * - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}\r\n * - Supports the `render` prop for element composition\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example Basic usage\r\n * ```tsx\r\n * <DialogOverlay />\r\n * ```\r\n *\r\n * @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}\r\n */\r\nfunction DialogOverlay(props: Readonly<DialogOverlay.Props>): React.ReactElement {\r\n  const {className, render, ...otherProps} = props;\r\n\r\n  return (\r\n    <BaseDialog.Backdrop\r\n      {...otherProps}\r\n      render={useRender({\r\n        defaultTagName: \"div\",\r\n        render: render as never,\r\n        props: mergeProps({className: cn(styles.backdrop, className)}, {}),\r\n      })}\r\n    />\r\n  );\r\n}\r\nDialogOverlay.displayName = \"DialogOverlay\";\r\n\r\n/**\r\n * Renders the dialog popup inside a portal with its backdrop.\r\n *\r\n * @remarks\r\n * - Renders a `<div>` element by default\r\n * - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}\r\n * - Supports the `render` prop for element composition\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example Basic usage\r\n * ```tsx\r\n * <DialogContent>\r\n *   <DialogTitle>Details</DialogTitle>\r\n * </DialogContent>\r\n * ```\r\n *\r\n * @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}\r\n */\r\nconst DialogContent = React.forwardRef<React.ComponentRef<typeof BaseDialog.Popup>, DialogContent.Props>(\r\n  (props: Readonly<DialogContent.Props>, ref): React.ReactElement => {\r\n    const {className, children, render, ...otherProps} = props;\r\n\r\n    return (\r\n      <DialogPortal>\r\n        <DialogOverlay />\r\n        <BaseDialog.Popup\r\n          ref={ref}\r\n          {...otherProps}\r\n          render={useRender({\r\n            defaultTagName: \"div\",\r\n            render: render as never,\r\n            props: mergeProps({className: cn(styles.popup, className)}, {}),\r\n          })}>\r\n          {children}\r\n        </BaseDialog.Popup>\r\n      </DialogPortal>\r\n    );\r\n  },\r\n);\r\nDialogContent.displayName = \"DialogContent\";\r\n\r\n/**\r\n * Lays out the title and supporting content at the top of a dialog.\r\n *\r\n * @remarks\r\n * - Renders a `<div>` element by default\r\n * - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}\r\n * - Supports the `render` prop for element composition\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example Basic usage\r\n * ```tsx\r\n * <DialogHeader>\r\n *   <DialogTitle>Details</DialogTitle>\r\n * </DialogHeader>\r\n * ```\r\n *\r\n * @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}\r\n */\r\nfunction DialogHeader(props: Readonly<DialogHeader.Props>): React.ReactElement {\r\n  // eslint-disable-next-line sonarjs/deprecation -- backward-compatible asChild support is part of the public API.\r\n  const {asChild = false, children, className, render, ...otherProps} = props;\r\n  const renderProp = asChild && React.isValidElement(children) ? children : render;\r\n\r\n  return useRender({\r\n    defaultTagName: \"div\",\r\n    render: renderProp as never,\r\n    props: mergeProps({className: cn(styles.header, className)}, otherProps, {\r\n      children: renderProp ? undefined : children,\r\n    }),\r\n  });\r\n}\r\nDialogHeader.displayName = \"DialogHeader\";\r\n\r\n/**\r\n * Lays out dialog actions and secondary controls at the bottom edge.\r\n *\r\n * @remarks\r\n * - Renders a `<div>` element by default\r\n * - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}\r\n * - Supports the `render` prop for element composition\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example Basic usage\r\n * ```tsx\r\n * <DialogFooter>\r\n *   <DialogClose>Close</DialogClose>\r\n * </DialogFooter>\r\n * ```\r\n *\r\n * @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}\r\n */\r\nfunction DialogFooter(props: Readonly<DialogFooter.Props>): React.ReactElement {\r\n  // eslint-disable-next-line sonarjs/deprecation -- backward-compatible asChild support is part of the public API.\r\n  const {asChild = false, children, className, render, ...otherProps} = props;\r\n  const renderProp = asChild && React.isValidElement(children) ? children : render;\r\n\r\n  return useRender({\r\n    defaultTagName: \"div\",\r\n    render: renderProp as never,\r\n    props: mergeProps({className: cn(styles.footer, className)}, otherProps, {\r\n      children: renderProp ? undefined : children,\r\n    }),\r\n  });\r\n}\r\nDialogFooter.displayName = \"DialogFooter\";\r\n\r\n/**\r\n * Renders the accessible heading for dialog content.\r\n *\r\n * @remarks\r\n * - Renders an `<h2>` element by default\r\n * - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}\r\n * - Supports the `render` prop for element composition\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example Basic usage\r\n * ```tsx\r\n * <DialogTitle>Details</DialogTitle>\r\n * ```\r\n *\r\n * @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}\r\n */\r\nfunction DialogTitle(props: Readonly<DialogTitle.Props>): React.ReactElement {\r\n  const {className, children, render, ...otherProps} = props;\r\n\r\n  return (\r\n    <BaseDialog.Title\r\n      {...otherProps}\r\n      render={useRender({\r\n        defaultTagName: \"h2\",\r\n        render: render as never,\r\n        props: mergeProps({className: cn(styles.title, className)}, {}),\r\n      })}>\r\n      {children}\r\n    </BaseDialog.Title>\r\n  );\r\n}\r\nDialogTitle.displayName = \"DialogTitle\";\r\n\r\n/**\r\n * Renders supporting copy beneath the dialog title.\r\n *\r\n * @remarks\r\n * - Renders a `<p>` element by default\r\n * - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}\r\n * - Supports the `render` prop for element composition\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example Basic usage\r\n * ```tsx\r\n * <DialogDescription>Review the details before continuing.</DialogDescription>\r\n * ```\r\n *\r\n * @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}\r\n */\r\nfunction DialogDescription(props: Readonly<DialogDescription.Props>): React.ReactElement {\r\n  const {className, children, render, ...otherProps} = props;\r\n\r\n  return (\r\n    <BaseDialog.Description\r\n      {...otherProps}\r\n      render={useRender({\r\n        defaultTagName: \"p\",\r\n        render: render as never,\r\n        props: mergeProps({className: cn(styles.description, className)}, {}),\r\n      })}>\r\n      {children}\r\n    </BaseDialog.Description>\r\n  );\r\n}\r\nDialogDescription.displayName = \"DialogDescription\";\r\n\r\n// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API\r\nnamespace Dialog {\r\n  export type Props = DialogProps;\r\n  export type State = BaseDialog.Root.State;\r\n}\r\n\r\n// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API\r\nnamespace DialogTrigger {\r\n  export type Props = DialogTriggerProps;\r\n  export type State = BaseDialog.Trigger.State;\r\n}\r\n\r\n// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API\r\nnamespace DialogClose {\r\n  export type Props = DialogCloseProps;\r\n  export type State = BaseDialog.Close.State;\r\n}\r\n\r\n// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API\r\nnamespace DialogOverlay {\r\n  export type Props = DialogOverlayProps;\r\n  export type State = BaseDialog.Backdrop.State;\r\n}\r\n\r\n// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API\r\nnamespace DialogContent {\r\n  export type Props = DialogContentProps;\r\n  export type State = BaseDialog.Popup.State;\r\n}\r\n\r\n// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API\r\nnamespace DialogHeader {\r\n  export type Props = DialogHeaderProps;\r\n  export type State = Record<string, never>;\r\n}\r\n\r\n// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API\r\nnamespace DialogFooter {\r\n  export type Props = DialogFooterProps;\r\n  export type State = Record<string, never>;\r\n}\r\n\r\n// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API\r\nnamespace DialogTitle {\r\n  export type Props = DialogTitleProps;\r\n  export type State = BaseDialog.Title.State;\r\n}\r\n\r\n// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API\r\nnamespace DialogDescription {\r\n  export type Props = DialogDescriptionProps;\r\n  export type State = BaseDialog.Description.State;\r\n}\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","props","BaseDialog","DialogTrigger","React","ref","asChild","children","className","render","otherProps","renderProp","useRender","mergeProps","undefined","DialogPortal","DialogClose","cn","styles","DialogOverlay","DialogContent","DialogHeader","DialogFooter","DialogTitle","DialogDescription"],"mappings":"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"}

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

@@ -0,0 +1,13 @@
+import "./dialog_module.css";
+const dialog_module = {
+    backdrop: "backdrop-H5SmLu",
+    popup: "popup-JrRLQN",
+    header: "header-SZ8AjW",
+    footer: "footer-O07Mqi",
+    title: "title-fb9wAs",
+    description: "description-F9WLtj",
+    close: "close-tdDrgs"
+};
+export default dialog_module;
+
+//# sourceMappingURL=dialog.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"components/ui/dialog.module.js","sources":["../../../src/components/ui/dialog.module.css"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./dialog_module.css\"\nexport default {\"backdrop\":\"backdrop-H5SmLu\",\"popup\":\"popup-JrRLQN\",\"header\":\"header-SZ8AjW\",\"footer\":\"footer-O07Mqi\",\"title\":\"title-fb9wAs\",\"description\":\"description-F9WLtj\",\"close\":\"close-tdDrgs\"};"],"names":[],"mappings":";AAEA,sBAAe;IAAC,UAAW;IAAkB,OAAQ;IAAe,QAAS;IAAgB,QAAS;IAAgB,OAAQ;IAAe,aAAc;IAAqB,OAAQ;AAAc"}

package/dist/components/ui/dialog_module.css

@@ -0,0 +1,114 @@
+.backdrop-H5SmLu {
+  touch-action: none;
+  min-height: 100dvh;
+  transition: opacity var(--ac-transition-normal);
+  background-color: #00000080;
+  position: fixed;
+  inset: 0;
+
+  @supports (-webkit-touch-callout: none) {
+    position: absolute;
+  }
+
+  &[data-ending-style], &[data-starting-style] {
+    opacity: 0;
+  }
+}
+
+.popup-JrRLQN {
+  background-color: var(--ac-background);
+  border: 1px solid var(--ac-border);
+  border-radius: var(--ac-radius-lg);
+  box-sizing: border-box;
+  color: var(--ac-foreground);
+  max-width: calc(100vw - 2rem);
+  max-height: 85vh;
+  padding: var(--ac-space-6);
+  touch-action: none;
+  transition: opacity var(--ac-transition-normal),transform var(--ac-transition-normal);
+  width: 32rem;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  overflow-y: auto;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 10px 30px -5px #0000001a, 0 4px 10px -5px #0000000a;
+
+  &[data-ending-style], &[data-starting-style] {
+    opacity: 0;
+    transform: translate(-50%, -50%)scale(.95);
+  }
+}
+
+.header-SZ8AjW {
+  gap: var(--ac-space-1);
+  text-align: center;
+  flex-direction: column;
+  display: flex;
+}
+
+@media (width >= 640px) {
+  .header-SZ8AjW {
+    text-align: left;
+  }
+}
+
+.footer-O07Mqi {
+  gap: var(--ac-space-2);
+  padding-top: var(--ac-space-4);
+  flex-direction: column-reverse;
+  display: flex;
+}
+
+@media (width >= 640px) {
+  .footer-O07Mqi {
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+}
+
+.title-fb9wAs {
+  font-size: var(--ac-text-lg);
+  letter-spacing: -.01em;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.description-F9WLtj {
+  color: var(--ac-muted-foreground);
+  font-size: var(--ac-text-sm);
+}
+
+.close-tdDrgs {
+  border-radius: var(--ac-radius-xs);
+  color: var(--ac-muted-foreground);
+  cursor: pointer;
+  height: 1.5rem;
+  right: var(--ac-space-3);
+  top: var(--ac-space-3);
+  transition: background-color var(--ac-transition-fast),color var(--ac-transition-fast);
+  background: none;
+  border: none;
+  outline: none;
+  justify-content: center;
+  align-items: center;
+  width: 1.5rem;
+  padding: 0;
+  display: inline-flex;
+  position: absolute;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: color-mix(in oklch,var(--ac-muted),transparent 50%);
+      color: var(--ac-foreground);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--ac-ring);
+    outline-offset: -1px;
+  }
+}
+
+
+/*# sourceMappingURL=dialog_module.css.map */

package/dist/components/ui/dialog_module.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://./home/runner/work/arolariu.ro/arolariu.ro/packages/components/src/components/ui/dialog.module.css","webpack://./src/components/ui/dialog.module.css"],"names":[],"mappings":"AADA;ECEE,kBAAkB;EAClB,kBAAkB;EAClB,+CAA+C;EAC/C,2BAA2B;EAC3B,eAAe;EACf,QAAQ;;EAER;IACE,kBAAkB;EACpB;;EAEA;IACE,UAAU;EACZ;AACF;;AAEA;EACE,sCAAsC;EACtC,kCAAkC;EAClC,kCAAkC;EAClC,sBAAsB;EACtB,2BAA2B;EAC3B,6BAA6B;EAC7B,gBAAgB;EAChB,0BAA0B;EAC1B,kBAAkB;EAClB,qFAAqF;EACrF,YAAY;EACZ,eAAe;EACf,QAAQ;EACR,SAAS;EACT,gBAAgB;EAChB,gCAAgC;EAChC,iEAAiE;;EAEjE;IACE,UAAU;IACV,0CAA0C;EAC5C;AACF;;AAEA;EACE,sBAAsB;EACtB,kBAAkB;EAClB,sBAAsB;EACtB,aAAa;AACf;;AAEA;EACE;IACE,gBAAgB;EAClB;AACF;;AAEA;EACE,sBAAsB;EACtB,8BAA8B;EAC9B,8BAA8B;EAC9B,aAAa;AACf;;AAEA;EACE;IACE,mBAAmB;IACnB,yBAAyB;EAC3B;AACF;;AAEA;EACE,4BAA4B;EAC5B,sBAAsB;EACtB,gBAAgB;EAChB,gBAAgB;AAClB;;AAEA;EACE,iCAAiC;EACjC,4BAA4B;AAC9B;;AAEA;EACE,kCAAkC;EAClC,iCAAiC;EACjC,eAAe;EACf,cAAc;EACd,wBAAwB;EACxB,sBAAsB;EACtB,sFAAsF;EACtF,gBAAgB;EAChB,YAAY;EACZ,aAAa;EACb,uBAAuB;EACvB,mBAAmB;EACnB,aAAa;EACb,UAAU;EACV,oBAAoB;EACpB,kBAAkB;;EAElB;IACE;MACE,qEAAqE;MACrE,2BAA2B;IAC7B;EACF;;EAEA;IACE,iCAAiC;IACjC,oBAAoB;EACtB;AACF","sourcesContent":[".backdrop{background-color:rgba(0,0,0,.5);inset:0;min-height:100dvh;position:fixed;touch-action:none;transition:opacity var(--ac-transition-normal);@supports (-webkit-touch-callout:none){position:absolute}&[data-ending-style],&[data-starting-style]{opacity:0}}.popup{background-color:var(--ac-background);border:1px solid var(--ac-border);border-radius:var(--ac-radius-lg);box-shadow:0 10px 30px -5px rgba(0,0,0,.1),0 4px 10px -5px rgba(0,0,0,.04);box-sizing:border-box;color:var(--ac-foreground);left:50%;max-height:85vh;max-width:calc(100vw - 2rem);overflow-y:auto;padding:var(--ac-space-6);position:fixed;top:50%;touch-action:none;transform:translate(-50%,-50%);transition:opacity var(--ac-transition-normal),transform var(--ac-transition-normal);width:32rem;&[data-ending-style],&[data-starting-style]{opacity:0;transform:translate(-50%,-50%) scale(.95)}}.header{display:flex;flex-direction:column;gap:var(--ac-space-1);text-align:center}@media (min-width:640px){.header{text-align:left}}.footer{display:flex;flex-direction:column-reverse;gap:var(--ac-space-2);padding-top:var(--ac-space-4)}@media (min-width:640px){.footer{flex-direction:row;justify-content:flex-end}}.title{font-size:var(--ac-text-lg);font-weight:600;letter-spacing:-.01em;line-height:1.2}.description{color:var(--ac-muted-foreground);font-size:var(--ac-text-sm)}.close{align-items:center;background:transparent;border:none;border-radius:var(--ac-radius-xs);color:var(--ac-muted-foreground);cursor:pointer;display:inline-flex;height:1.5rem;justify-content:center;outline:none;padding:0;position:absolute;right:var(--ac-space-3);top:var(--ac-space-3);transition:background-color var(--ac-transition-fast),color var(--ac-transition-fast);width:1.5rem;@media (hover:hover){&:hover{background-color:color-mix(in oklch,var(--ac-muted),transparent 50%);color:var(--ac-foreground)}}&:focus-visible{outline:2px solid var(--ac-ring);outline-offset:-1px}}",".backdrop {\n  touch-action: none;\n  min-height: 100dvh;\n  transition: opacity var(--ac-transition-normal);\n  background-color: #00000080;\n  position: fixed;\n  inset: 0;\n\n  @supports (-webkit-touch-callout: none) {\n    position: absolute;\n  }\n\n  &[data-ending-style], &[data-starting-style] {\n    opacity: 0;\n  }\n}\n\n.popup {\n  background-color: var(--ac-background);\n  border: 1px solid var(--ac-border);\n  border-radius: var(--ac-radius-lg);\n  box-sizing: border-box;\n  color: var(--ac-foreground);\n  max-width: calc(100vw - 2rem);\n  max-height: 85vh;\n  padding: var(--ac-space-6);\n  touch-action: none;\n  transition: opacity var(--ac-transition-normal),transform var(--ac-transition-normal);\n  width: 32rem;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  overflow-y: auto;\n  transform: translate(-50%, -50%);\n  box-shadow: 0 10px 30px -5px #0000001a, 0 4px 10px -5px #0000000a;\n\n  &[data-ending-style], &[data-starting-style] {\n    opacity: 0;\n    transform: translate(-50%, -50%)scale(.95);\n  }\n}\n\n.header {\n  gap: var(--ac-space-1);\n  text-align: center;\n  flex-direction: column;\n  display: flex;\n}\n\n@media (width >= 640px) {\n  .header {\n    text-align: left;\n  }\n}\n\n.footer {\n  gap: var(--ac-space-2);\n  padding-top: var(--ac-space-4);\n  flex-direction: column-reverse;\n  display: flex;\n}\n\n@media (width >= 640px) {\n  .footer {\n    flex-direction: row;\n    justify-content: flex-end;\n  }\n}\n\n.title {\n  font-size: var(--ac-text-lg);\n  letter-spacing: -.01em;\n  font-weight: 600;\n  line-height: 1.2;\n}\n\n.description {\n  color: var(--ac-muted-foreground);\n  font-size: var(--ac-text-sm);\n}\n\n.close {\n  border-radius: var(--ac-radius-xs);\n  color: var(--ac-muted-foreground);\n  cursor: pointer;\n  height: 1.5rem;\n  right: var(--ac-space-3);\n  top: var(--ac-space-3);\n  transition: background-color var(--ac-transition-fast),color var(--ac-transition-fast);\n  background: none;\n  border: none;\n  outline: none;\n  justify-content: center;\n  align-items: center;\n  width: 1.5rem;\n  padding: 0;\n  display: inline-flex;\n  position: absolute;\n\n  @media (hover: hover) {\n    &:hover {\n      background-color: color-mix(in oklch,var(--ac-muted),transparent 50%);\n      color: var(--ac-foreground);\n    }\n  }\n\n  &:focus-visible {\n    outline: 2px solid var(--ac-ring);\n    outline-offset: -1px;\n  }\n}\n"],"sourceRoot":""}

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

@@ -1,51 +1,41 @@
 import React from "react";
-/**
- *  DotBackground Component Props
- * @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> {
+/** Props accepted by {@link DotBackground}. */
+export interface DotBackgroundProps extends React.SVGProps<SVGSVGElement> {
+    /** Horizontal spacing between generated dots. @default 16 */
     width?: number;
+    /** Vertical spacing between generated dots. @default 16 */
     height?: number;
+    /** Horizontal offset applied to the dot grid. @default 0 */
     x?: number;
+    /** Vertical offset applied to the dot grid. @default 0 */
     y?: number;
+    /** Horizontal center offset for each generated circle. @default 1 */
     cx?: number;
+    /** Vertical center offset for each generated circle. @default 1 */
     cy?: number;
+    /** Radius used for each generated dot. @default 1 */
     cr?: number;
+    /** Additional CSS classes merged with the root SVG element. @default undefined */
     className?: string;
+    /** Enables pulsing radial glow animation for every dot. @default false */
     glow?: boolean;
-    [key: string]: unknown;
 }
 /**
- * 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.
- * @see DotBackgroundProps for the props interface.
+ * Renders an animated dot grid with an optional glowing pulse effect.
+ *
+ * @remarks
+ * - Animated component using the `motion` library
+ * - Renders an `<svg>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ * - Client-side only (`"use client"` directive)
+ *
  * @example
- * // Basic usage
- * <DotBackground />
+ * ```tsx
+ * <DotBackground glow />
+ * ```
  *
- * // With glowing effect and custom spacing
- * <DotBackground
- *   width={20}
- *   height={20}
- *   glow={true}
- *   className="opacity-50"
- * />
- *@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
- * - Uses Motion for animations
- * - Dots color can be controlled via the text color utility classes
+ * @see {@link DotBackgroundProps} for available props
  */
-export declare function DotBackground({ width, height, x, y, cx, cy, cr, className, glow, ...props }: DotBackgroundProps): import("react/jsx-runtime").JSX.Element;
-export {};
+declare const DotBackground: React.ForwardRefExoticComponent<Omit<DotBackgroundProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export { DotBackground };
 //# sourceMappingURL=dot-background.d.ts.map

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,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"}
+{"version":3,"file":"dot-background.d.ts","sourceRoot":"","sources":["../../../src/components/ui/dot-background.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAKhE,+CAA+C;AAC/C,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC;IACvE,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4DAA4D;IAC5D,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,0DAA0D;IAC1D,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,qEAAqE;IACrE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,mEAAmE;IACnE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,qDAAqD;IACrD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,kFAAkF;IAClF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,aAAa,uGA+GlB,CAAC;AAGF,OAAO,EAAC,aAAa,EAAC,CAAC"}

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

@@ -1,45 +1,53 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-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 }) {
+import react, { useEffect, useId, useRef, useState } from "react";
+import { cn } from "../../lib/utilities.js";
+import dot_background_module from "./dot-background.module.js";
+const DotBackground = /*#__PURE__*/ react.forwardRef(({ width = 16, height = 16, x = 0, y = 0, cx = 1, cy = 1, cr = 1, className, glow = false, ...props }, ref)=>{
     const id = useId();
     const containerRef = useRef(null);
     const [dimensions, setDimensions] = useState({
         width: 0,
         height: 0
     });
+    const setRefs = react.useCallback((node)=>{
+        containerRef.current = node;
+        if ("function" == typeof ref) return void ref(node);
+        if (ref) ref.current = node;
+    }, [
+        ref
+    ]);
     useEffect(()=>{
         const updateDimensions = ()=>{
-            if (containerRef.current) {
-                const { width, height } = containerRef.current.getBoundingClientRect();
-                setDimensions({
-                    width,
-                    height
-                });
-            }
+            if (!containerRef.current) return;
+            const rect = containerRef.current.getBoundingClientRect();
+            setDimensions({
+                width: rect.width,
+                height: rect.height
+            });
         };
         updateDimensions();
-        window.addEventListener("resize", updateDimensions);
-        return ()=>window.removeEventListener("resize", updateDimensions);
+        globalThis.window.addEventListener("resize", updateDimensions);
+        return ()=>globalThis.window.removeEventListener("resize", updateDimensions);
     }, []);
+    const totalColumns = Math.ceil(dimensions.width / width);
     const dots = Array.from({
-        length: Math.ceil(dimensions.width / width) * Math.ceil(dimensions.height / height)
-    }, (_, i)=>{
-        const col = i % Math.ceil(dimensions.width / width);
-        const row = Math.floor(i / Math.ceil(dimensions.width / width));
+        length: totalColumns * Math.ceil(dimensions.height / height)
+    }, (_, index)=>{
+        const column = index % Math.max(totalColumns, 1);
+        const row = Math.floor(index / Math.max(totalColumns, 1));
         return {
-            x: col * width + cx,
-            y: row * height + cy,
+            x: x + column * width + cx,
+            y: y + row * height + cy,
             delay: 5 * Math.random(),
             duration: 3 * Math.random() + 2
         };
     });
     return /*#__PURE__*/ jsxs("svg", {
-        ref: containerRef,
+        ref: setRefs,
         "aria-hidden": "true",
-        className: cn("pointer-events-none absolute inset-0 h-full w-full", className),
+        className: cn(dot_background_module.root, className),
         ...props,
         children: [
             /*#__PURE__*/ jsx("defs", {
@@ -64,7 +72,7 @@ function DotBackground({ width = 16, height = 16, x = 0, y = 0, cx = 1, cy = 1,
                     cy: dot.y,
                     r: cr,
                     fill: glow ? `url(#${id}-gradient)` : "currentColor",
-                    className: "text-neutral-400/80",
+                    className: dot_background_module.dot,
                     initial: glow ? {
                         opacity: 0.4,
                         scale: 1
@@ -91,7 +99,8 @@ function DotBackground({ width = 16, height = 16, x = 0, y = 0, cx = 1, cy = 1,
                 }, `${dot.x}-${dot.y}`))
         ]
     });
-}
+});
+DotBackground.displayName = "DotBackground";
 export { DotBackground };
 
 //# sourceMappingURL=dot-background.js.map