@libreapps/ui 5.4.1

package/dist/dock/macos.js

@@ -0,0 +1,141 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var framerMotion = require('framer-motion');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+__name(cn, "cn");
+var DockContext = React__namespace.createContext({
+  magnification: 60,
+  distance: 140,
+  mouseX: null
+});
+var Dock = React__namespace.forwardRef(
+  ({ className, children, magnification = 60, distance = 140 }, ref) => {
+    const mouseX = framerMotion.useMotionValue(Infinity);
+    return /* @__PURE__ */ jsxRuntime.jsx(DockContext.Provider, { value: { magnification, distance, mouseX }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
+      {
+        ref,
+        onMouseMove: (e) => mouseX.set(e.pageX),
+        onMouseLeave: () => mouseX.set(Infinity),
+        className: cn(
+          "mx-auto flex h-16 items-end gap-2 rounded-2xl border border-white/10 bg-black/10 px-3 pb-2 backdrop-blur-xl",
+          "shadow-2xl shadow-black/20",
+          "before:absolute before:inset-0 before:rounded-2xl before:bg-gradient-to-b before:from-white/10 before:to-transparent before:opacity-50",
+          className
+        ),
+        children
+      }
+    ) });
+  }
+);
+Dock.displayName = "Dock";
+var DockItem = React__namespace.forwardRef(
+  ({ className, children, onClick, tooltip }, ref) => {
+    const buttonRef = React__namespace.useRef(null);
+    const { magnification, distance, mouseX } = React__namespace.useContext(DockContext);
+    const [isHovered, setIsHovered] = React__namespace.useState(false);
+    const distanceCalc = framerMotion.useTransform(mouseX, (val) => {
+      const bounds = buttonRef.current?.getBoundingClientRect() ?? {
+        x: 0,
+        width: 0
+      };
+      return val - bounds.x - bounds.width / 2;
+    });
+    const widthSync = framerMotion.useTransform(
+      distanceCalc,
+      [-distance, 0, distance],
+      [48, 48 + magnification, 48]
+    );
+    const width = framerMotion.useSpring(widthSync, {
+      mass: 0.1,
+      stiffness: 150,
+      damping: 12
+    });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      framerMotion.motion.div,
+      {
+        className: "relative",
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        children: [
+          tooltip && isHovered && /* @__PURE__ */ jsxRuntime.jsxs(
+            framerMotion.motion.div,
+            {
+              initial: { opacity: 0, y: 10, scale: 0.9 },
+              animate: { opacity: 1, y: 0, scale: 1 },
+              exit: { opacity: 0, y: 5, scale: 0.95 },
+              transition: { duration: 0.15 },
+              className: "absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded-lg bg-black/80 px-2 py-1 text-xs text-white backdrop-blur-md",
+              children: [
+                tooltip,
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-1 left-1/2 h-2 w-2 -translate-x-1/2 rotate-45 bg-black/80" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            framerMotion.motion.button,
+            {
+              ref: buttonRef,
+              style: { width },
+              whileTap: { scale: 0.95 },
+              onClick,
+              className: cn(
+                "aspect-square w-12 rounded-xl bg-white/10 backdrop-blur-md transition-colors",
+                "hover:bg-white/20",
+                "focus:outline-none focus-visible:ring-2 focus-visible:ring-white/50",
+                "relative overflow-hidden",
+                className
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center", children }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "pointer-events-none absolute inset-0 rounded-xl",
+                    style: {
+                      background: "linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%)"
+                    }
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+DockItem.displayName = "DockItem";
+
+exports.Dock = Dock;
+exports.DockItem = DockItem;

package/dist/dock/macos.mjs

@@ -0,0 +1,118 @@
+"use client";
+import * as React from 'react';
+import { useMotionValue, motion, useTransform, useSpring } from 'framer-motion';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+__name(cn, "cn");
+var DockContext = React.createContext({
+  magnification: 60,
+  distance: 140,
+  mouseX: null
+});
+var Dock = React.forwardRef(
+  ({ className, children, magnification = 60, distance = 140 }, ref) => {
+    const mouseX = useMotionValue(Infinity);
+    return /* @__PURE__ */ jsx(DockContext.Provider, { value: { magnification, distance, mouseX }, children: /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        ref,
+        onMouseMove: (e) => mouseX.set(e.pageX),
+        onMouseLeave: () => mouseX.set(Infinity),
+        className: cn(
+          "mx-auto flex h-16 items-end gap-2 rounded-2xl border border-white/10 bg-black/10 px-3 pb-2 backdrop-blur-xl",
+          "shadow-2xl shadow-black/20",
+          "before:absolute before:inset-0 before:rounded-2xl before:bg-gradient-to-b before:from-white/10 before:to-transparent before:opacity-50",
+          className
+        ),
+        children
+      }
+    ) });
+  }
+);
+Dock.displayName = "Dock";
+var DockItem = React.forwardRef(
+  ({ className, children, onClick, tooltip }, ref) => {
+    const buttonRef = React.useRef(null);
+    const { magnification, distance, mouseX } = React.useContext(DockContext);
+    const [isHovered, setIsHovered] = React.useState(false);
+    const distanceCalc = useTransform(mouseX, (val) => {
+      const bounds = buttonRef.current?.getBoundingClientRect() ?? {
+        x: 0,
+        width: 0
+      };
+      return val - bounds.x - bounds.width / 2;
+    });
+    const widthSync = useTransform(
+      distanceCalc,
+      [-distance, 0, distance],
+      [48, 48 + magnification, 48]
+    );
+    const width = useSpring(widthSync, {
+      mass: 0.1,
+      stiffness: 150,
+      damping: 12
+    });
+    return /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        className: "relative",
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        children: [
+          tooltip && isHovered && /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              initial: { opacity: 0, y: 10, scale: 0.9 },
+              animate: { opacity: 1, y: 0, scale: 1 },
+              exit: { opacity: 0, y: 5, scale: 0.95 },
+              transition: { duration: 0.15 },
+              className: "absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded-lg bg-black/80 px-2 py-1 text-xs text-white backdrop-blur-md",
+              children: [
+                tooltip,
+                /* @__PURE__ */ jsx("div", { className: "absolute -bottom-1 left-1/2 h-2 w-2 -translate-x-1/2 rotate-45 bg-black/80" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            motion.button,
+            {
+              ref: buttonRef,
+              style: { width },
+              whileTap: { scale: 0.95 },
+              onClick,
+              className: cn(
+                "aspect-square w-12 rounded-xl bg-white/10 backdrop-blur-md transition-colors",
+                "hover:bg-white/20",
+                "focus:outline-none focus-visible:ring-2 focus-visible:ring-white/50",
+                "relative overflow-hidden",
+                className
+              ),
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center", children }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "pointer-events-none absolute inset-0 rounded-xl",
+                    style: {
+                      background: "linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%)"
+                    }
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+DockItem.displayName = "DockItem";
+
+export { Dock, DockItem };

package/dist/dock/menu.js

@@ -0,0 +1,70 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+__name(cn, "cn");
+var MenuDock = React__namespace.forwardRef(
+  ({ className, items, orientation = "horizontal", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex gap-2 rounded-full border bg-background/95 p-2 shadow-lg backdrop-blur",
+          orientation === "vertical" ? "flex-col" : "flex-row",
+          className
+        ),
+        ...props,
+        children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: item.onClick,
+            className: cn(
+              "group relative flex items-center justify-center rounded-full p-3 transition-colors hover:bg-accent",
+              item.active && "bg-primary text-primary-foreground hover:bg-primary/90"
+            ),
+            title: item.label,
+            children: [
+              item.icon,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: item.label }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-popover px-2 py-1 text-xs text-popover-foreground opacity-0 transition-opacity group-hover:opacity-100", children: item.label })
+            ]
+          },
+          index
+        ))
+      }
+    );
+  }
+);
+MenuDock.displayName = "MenuDock";
+
+exports.MenuDock = MenuDock;

package/dist/dock/menu.mjs

@@ -0,0 +1,48 @@
+"use client";
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+__name(cn, "cn");
+var MenuDock = React.forwardRef(
+  ({ className, items, orientation = "horizontal", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex gap-2 rounded-full border bg-background/95 p-2 shadow-lg backdrop-blur",
+          orientation === "vertical" ? "flex-col" : "flex-row",
+          className
+        ),
+        ...props,
+        children: items.map((item, index) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: item.onClick,
+            className: cn(
+              "group relative flex items-center justify-center rounded-full p-3 transition-colors hover:bg-accent",
+              item.active && "bg-primary text-primary-foreground hover:bg-primary/90"
+            ),
+            title: item.label,
+            children: [
+              item.icon,
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: item.label }),
+              /* @__PURE__ */ jsx("span", { className: "absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-popover px-2 py-1 text-xs text-popover-foreground opacity-0 transition-opacity group-hover:opacity-100", children: item.label })
+            ]
+          },
+          index
+        ))
+      }
+    );
+  }
+);
+MenuDock.displayName = "MenuDock";
+
+export { MenuDock };

package/dist/dock/message.js

@@ -0,0 +1,149 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var lucideReact = require('lucide-react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+__name(cn, "cn");
+var buttonVariants = classVarianceAuthority.cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+        // Keep the additional LibreApps variants for backward compatibility
+        primary: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        linkFG: "text-primary underline-offset-4 hover:underline",
+        linkMuted: "text-muted-foreground underline-offset-4 hover:underline hover:text-foreground"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React__namespace.forwardRef(
+  ({ className, variant = "default", size = "default", asChild = false, isLoading = false, children, ...props }, ref) => {
+    const Comp = asChild ? reactSlot.Slot : "button";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Comp,
+      {
+        "data-slot": "button",
+        "data-variant": variant,
+        "data-size": size,
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props,
+        children: [
+          isLoading ? /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.Loader2,
+            {
+              className: cn("h-4 w-4 animate-spin", size !== "icon" && size !== "icon-sm" && size !== "icon-lg" && "mr-2")
+            }
+          ) : null,
+          isLoading && (size === "icon" || size === "icon-sm" || size === "icon-lg") ? null : children
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var MessageDock = React__namespace.forwardRef(
+  ({ className, messages, onClose, position = "bottom-right", ...props }, ref) => {
+    const positionClasses = {
+      top: "top-4 left-1/2 -translate-x-1/2",
+      bottom: "bottom-4 left-1/2 -translate-x-1/2",
+      "top-right": "top-4 right-4",
+      "bottom-right": "bottom-4 right-4"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "fixed z-50 flex flex-col gap-2",
+          positionClasses[position],
+          className
+        ),
+        ...props,
+        children: messages.map((message) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "min-w-[300px] rounded-lg border p-4 shadow-lg",
+              message.type === "success" && "border-green-500 bg-green-50 dark:bg-green-950",
+              message.type === "warning" && "border-yellow-500 bg-yellow-50 dark:bg-yellow-950",
+              message.type === "error" && "border-red-500 bg-red-50 dark:bg-red-950",
+              message.type === "info" && "border-blue-500 bg-blue-50 dark:bg-blue-950",
+              !message.type && "bg-background"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-medium", children: message.title }),
+                message.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: message.description })
+              ] }),
+              onClose && /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "h-6 w-6",
+                  onClick: () => onClose(message.id),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
+                }
+              )
+            ] })
+          },
+          message.id
+        ))
+      }
+    );
+  }
+);
+MessageDock.displayName = "MessageDock";
+
+exports.MessageDock = MessageDock;

package/dist/dock/message.mjs

@@ -0,0 +1,127 @@
+"use client";
+import * as React from 'react';
+import { Loader2, X } from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+__name(cn, "cn");
+var buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+        // Keep the additional LibreApps variants for backward compatibility
+        primary: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        linkFG: "text-primary underline-offset-4 hover:underline",
+        linkMuted: "text-muted-foreground underline-offset-4 hover:underline hover:text-foreground"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({ className, variant = "default", size = "default", asChild = false, isLoading = false, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsxs(
+      Comp,
+      {
+        "data-slot": "button",
+        "data-variant": variant,
+        "data-size": size,
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props,
+        children: [
+          isLoading ? /* @__PURE__ */ jsx(
+            Loader2,
+            {
+              className: cn("h-4 w-4 animate-spin", size !== "icon" && size !== "icon-sm" && size !== "icon-lg" && "mr-2")
+            }
+          ) : null,
+          isLoading && (size === "icon" || size === "icon-sm" || size === "icon-lg") ? null : children
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var MessageDock = React.forwardRef(
+  ({ className, messages, onClose, position = "bottom-right", ...props }, ref) => {
+    const positionClasses = {
+      top: "top-4 left-1/2 -translate-x-1/2",
+      bottom: "bottom-4 left-1/2 -translate-x-1/2",
+      "top-right": "top-4 right-4",
+      "bottom-right": "bottom-4 right-4"
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "fixed z-50 flex flex-col gap-2",
+          positionClasses[position],
+          className
+        ),
+        ...props,
+        children: messages.map((message) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "min-w-[300px] rounded-lg border p-4 shadow-lg",
+              message.type === "success" && "border-green-500 bg-green-50 dark:bg-green-950",
+              message.type === "warning" && "border-yellow-500 bg-yellow-50 dark:bg-yellow-950",
+              message.type === "error" && "border-red-500 bg-red-50 dark:bg-red-950",
+              message.type === "info" && "border-blue-500 bg-blue-50 dark:bg-blue-950",
+              !message.type && "bg-background"
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+                /* @__PURE__ */ jsx("h4", { className: "font-medium", children: message.title }),
+                message.description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: message.description })
+              ] }),
+              onClose && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "h-6 w-6",
+                  onClick: () => onClose(message.id),
+                  children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+                }
+              )
+            ] })
+          },
+          message.id
+        ))
+      }
+    );
+  }
+);
+MessageDock.displayName = "MessageDock";
+
+export { MessageDock };