@hanzo/ui 5.3.19 → 5.3.22

package/dist/dialog.mjs

@@ -1 +1,121 @@
-import*as e from'@radix-ui/react-dialog';import {X}from'lucide-react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsx,jsxs}from'react/jsx-runtime';var d=Object.defineProperty;var i=(t,a)=>d(t,"name",{value:a,configurable:true});function o(...t){return twMerge(clsx(t))}i(o,"cn");var R=e.Root,L=e.Trigger,f=e.Portal,n=i(({className:t,...a})=>jsx(e.Overlay,{className:o("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-bg-dark/90",t),...a}),"DialogOverlay");n.displayName=e.Overlay.displayName;var D=i(({className:t,children:a,showCloseButton:r=false,...m})=>jsxs(f,{children:[jsx(n,{}),jsxs(e.Content,{className:o("bg-bg-default 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 border-divider fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:rounded-lg md:w-full",t),...m,children:[a,jsxs(e.Close,{className:o("ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-text-secondary 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",!r&&"hidden"),children:[jsx(X,{className:"h-4 w-4"}),jsx("span",{className:"sr-only",children:"Close"})]})]})]}),"DialogContent");D.displayName=e.Content.displayName;var u=i(({className:t,...a})=>jsx("div",{className:o("flex flex-col space-y-1.5 text-center sm:text-left",t),...a}),"DialogHeader");u.displayName="DialogHeader";var v=i(({className:t,...a})=>jsx("div",{className:o("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",t),...a}),"DialogFooter");v.displayName="DialogFooter";var y=i(({className:t,...a})=>jsx(e.Title,{className:o("text-lg leading-none font-semibold tracking-tight",t),...a}),"DialogTitle");y.displayName=e.Title.displayName;var P=i(({className:t,...a})=>jsx(e.Description,{className:o("text-text-secondary text-sm",t),...a}),"DialogDescription");P.displayName=e.Description.displayName;export{R as Dialog,D as DialogContent,P as DialogDescription,v as DialogFooter,u as DialogHeader,n as DialogOverlay,f as DialogPortal,y as DialogTitle,L as DialogTrigger};
+"use client";
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-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 Dialog = DialogPrimitive.Root;
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogPortal = DialogPrimitive.Portal;
+var DialogOverlay = /* @__PURE__ */ __name(({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  DialogPrimitive.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-bg-dark/90",
+      className
+    ),
+    ...props
+  }
+), "DialogOverlay");
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var DialogContent = /* @__PURE__ */ __name(({
+  className,
+  children,
+  showCloseButton = false,
+  ...props
+}) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      className: cn(
+        "bg-bg-default 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 border-divider fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:rounded-lg md:w-full",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(
+          DialogPrimitive.Close,
+          {
+            className: cn(
+              "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-text-secondary 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",
+              !showCloseButton && "hidden"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+            ]
+          }
+        )
+      ]
+    }
+  )
+] }), "DialogContent");
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+var DialogHeader = /* @__PURE__ */ __name(({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    ),
+    ...props
+  }
+), "DialogHeader");
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = /* @__PURE__ */ __name(({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    ),
+    ...props
+  }
+), "DialogFooter");
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = /* @__PURE__ */ __name(({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    className: cn(
+      "text-lg leading-none font-semibold tracking-tight",
+      className
+    ),
+    ...props
+  }
+), "DialogTitle");
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+var DialogDescription = /* @__PURE__ */ __name(({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    className: cn("text-text-secondary text-sm", className),
+    ...props
+  }
+), "DialogDescription");
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };

package/dist/dock/basic.js

@@ -1 +1,174 @@
-'use strict';var e=require('react'),framerMotion=require('framer-motion'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),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 e__namespace=/*#__PURE__*/_interopNamespace(e);var I=Object.defineProperty;var n=(t,o)=>I(t,"name",{value:o,configurable:true});function f(...t){return tailwindMerge.twMerge(clsx.clsx(t))}n(f,"cn");var h=e__namespace.createContext({magnification:60,distance:140}),S=e__namespace.forwardRef(({className:t,children:o,position:c="bottom",magnification:r=60,distance:l=140},m)=>{let g={bottom:"bottom-0 left-1/2 -translate-x-1/2 flex-row",left:"left-0 top-1/2 -translate-y-1/2 flex-col",right:"right-0 top-1/2 -translate-y-1/2 flex-col"};return jsxRuntime.jsx(h.Provider,{value:{magnification:r,distance:l},children:jsxRuntime.jsx("div",{ref:m,className:f("fixed z-50 flex items-end gap-1 rounded-2xl border border-white/10 bg-black/10 p-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",g[c],t),children:o})})});S.displayName="Dock";var U=e__namespace.forwardRef(({className:t,children:o,onClick:c,tooltip:r,magnification:l,distance:m},g)=>{let u=e__namespace.useRef(null),{magnification:y,distance:k}=e__namespace.useContext(h),w=l??y,p=m??k,[R,x]=e__namespace.useState(false),d=framerMotion.useMotionValue(1/0),D={mass:.1,stiffness:150,damping:12},s=framerMotion.useSpring(framerMotion.useTransform(d,[-p,0,p],[48,48+w,48]),D),M=n(C=>{if(!u.current)return;let v=u.current.getBoundingClientRect(),P=v.left+v.width/2;d.set(C.clientX-P);},"handleMouseMove"),N=n(()=>{d.set(1/0),x(false);},"handleMouseLeave");return jsxRuntime.jsxs(framerMotion.motion.div,{className:"relative",onMouseMove:M,onMouseLeave:N,onMouseEnter:()=>x(true),children:[r&&R&&jsxRuntime.jsxs(framerMotion.motion.div,{initial:{opacity:0,y:10,scale:.9},animate:{opacity:1,y:0,scale:1},exit:{opacity:0,y:5,scale:.95},transition:{duration:.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:[r,jsxRuntime.jsx("div",{className:"absolute -bottom-1 left-1/2 h-2 w-2 -translate-x-1/2 rotate-45 bg-black/80"})]}),jsxRuntime.jsxs(framerMotion.motion.button,{ref:u,style:{width:s,height:s},whileTap:{scale:.9},onClick:c,className:f("relative flex items-center justify-center 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",t),children:[jsxRuntime.jsx(framerMotion.motion.div,{style:{width:s,height:s},className:"flex items-center justify-center",children:o}),jsxRuntime.jsx(framerMotion.motion.div,{className:"absolute inset-0 rounded-xl",style:{background:"linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%)"}})]})]})});U.displayName="DockItem";exports.Dock=S;exports.DockItem=U;
+"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
+});
+var Dock = React__namespace.forwardRef(
+  ({
+    className,
+    children,
+    position = "bottom",
+    magnification = 60,
+    distance = 140
+  }, ref) => {
+    const positionClasses = {
+      bottom: "bottom-0 left-1/2 -translate-x-1/2 flex-row",
+      left: "left-0 top-1/2 -translate-y-1/2 flex-col",
+      right: "right-0 top-1/2 -translate-y-1/2 flex-col"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(DockContext.Provider, { value: { magnification, distance }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "fixed z-50 flex items-end gap-1 rounded-2xl border border-white/10 bg-black/10 p-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",
+          positionClasses[position],
+          className
+        ),
+        children
+      }
+    ) });
+  }
+);
+Dock.displayName = "Dock";
+var DockItem = React__namespace.forwardRef(
+  ({
+    className,
+    children,
+    onClick,
+    tooltip,
+    magnification: itemMagnification,
+    distance: itemDistance
+  }, ref) => {
+    const buttonRef = React__namespace.useRef(null);
+    const { magnification: contextMagnification, distance: contextDistance } = React__namespace.useContext(DockContext);
+    const magnification = itemMagnification ?? contextMagnification;
+    const distance = itemDistance ?? contextDistance;
+    const [isHovered, setIsHovered] = React__namespace.useState(false);
+    const mouseX = framerMotion.useMotionValue(Infinity);
+    const springConfig = { mass: 0.1, stiffness: 150, damping: 12 };
+    const size = framerMotion.useSpring(
+      framerMotion.useTransform(
+        mouseX,
+        [-distance, 0, distance],
+        [48, 48 + magnification, 48]
+      ),
+      springConfig
+    );
+    const handleMouseMove = /* @__PURE__ */ __name((e) => {
+      if (!buttonRef.current) return;
+      const rect = buttonRef.current.getBoundingClientRect();
+      const centerX = rect.left + rect.width / 2;
+      mouseX.set(e.clientX - centerX);
+    }, "handleMouseMove");
+    const handleMouseLeave = /* @__PURE__ */ __name(() => {
+      mouseX.set(Infinity);
+      setIsHovered(false);
+    }, "handleMouseLeave");
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      framerMotion.motion.div,
+      {
+        className: "relative",
+        onMouseMove: handleMouseMove,
+        onMouseLeave: handleMouseLeave,
+        onMouseEnter: () => setIsHovered(true),
+        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: size,
+                height: size
+              },
+              whileTap: { scale: 0.9 },
+              onClick,
+              className: cn(
+                "relative flex items-center justify-center 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",
+                className
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  framerMotion.motion.div,
+                  {
+                    style: {
+                      width: size,
+                      height: size
+                    },
+                    className: "flex items-center justify-center",
+                    children
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  framerMotion.motion.div,
+                  {
+                    className: "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/basic.mjs

@@ -1 +1,151 @@
-import*as e from'react';import {useMotionValue,useSpring,useTransform,motion}from'framer-motion';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsx,jsxs}from'react/jsx-runtime';var I=Object.defineProperty;var n=(t,o)=>I(t,"name",{value:o,configurable:true});function f(...t){return twMerge(clsx(t))}n(f,"cn");var h=e.createContext({magnification:60,distance:140}),S=e.forwardRef(({className:t,children:o,position:c="bottom",magnification:r=60,distance:l=140},m)=>{let g={bottom:"bottom-0 left-1/2 -translate-x-1/2 flex-row",left:"left-0 top-1/2 -translate-y-1/2 flex-col",right:"right-0 top-1/2 -translate-y-1/2 flex-col"};return jsx(h.Provider,{value:{magnification:r,distance:l},children:jsx("div",{ref:m,className:f("fixed z-50 flex items-end gap-1 rounded-2xl border border-white/10 bg-black/10 p-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",g[c],t),children:o})})});S.displayName="Dock";var U=e.forwardRef(({className:t,children:o,onClick:c,tooltip:r,magnification:l,distance:m},g)=>{let u=e.useRef(null),{magnification:y,distance:k}=e.useContext(h),w=l??y,p=m??k,[R,x]=e.useState(false),d=useMotionValue(1/0),D={mass:.1,stiffness:150,damping:12},s=useSpring(useTransform(d,[-p,0,p],[48,48+w,48]),D),M=n(C=>{if(!u.current)return;let v=u.current.getBoundingClientRect(),P=v.left+v.width/2;d.set(C.clientX-P);},"handleMouseMove"),N=n(()=>{d.set(1/0),x(false);},"handleMouseLeave");return jsxs(motion.div,{className:"relative",onMouseMove:M,onMouseLeave:N,onMouseEnter:()=>x(true),children:[r&&R&&jsxs(motion.div,{initial:{opacity:0,y:10,scale:.9},animate:{opacity:1,y:0,scale:1},exit:{opacity:0,y:5,scale:.95},transition:{duration:.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:[r,jsx("div",{className:"absolute -bottom-1 left-1/2 h-2 w-2 -translate-x-1/2 rotate-45 bg-black/80"})]}),jsxs(motion.button,{ref:u,style:{width:s,height:s},whileTap:{scale:.9},onClick:c,className:f("relative flex items-center justify-center 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",t),children:[jsx(motion.div,{style:{width:s,height:s},className:"flex items-center justify-center",children:o}),jsx(motion.div,{className:"absolute inset-0 rounded-xl",style:{background:"linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%)"}})]})]})});U.displayName="DockItem";export{S as Dock,U as DockItem};
+"use client";
+import * as React from 'react';
+import { useMotionValue, useSpring, useTransform, motion } 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
+});
+var Dock = React.forwardRef(
+  ({
+    className,
+    children,
+    position = "bottom",
+    magnification = 60,
+    distance = 140
+  }, ref) => {
+    const positionClasses = {
+      bottom: "bottom-0 left-1/2 -translate-x-1/2 flex-row",
+      left: "left-0 top-1/2 -translate-y-1/2 flex-col",
+      right: "right-0 top-1/2 -translate-y-1/2 flex-col"
+    };
+    return /* @__PURE__ */ jsx(DockContext.Provider, { value: { magnification, distance }, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "fixed z-50 flex items-end gap-1 rounded-2xl border border-white/10 bg-black/10 p-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",
+          positionClasses[position],
+          className
+        ),
+        children
+      }
+    ) });
+  }
+);
+Dock.displayName = "Dock";
+var DockItem = React.forwardRef(
+  ({
+    className,
+    children,
+    onClick,
+    tooltip,
+    magnification: itemMagnification,
+    distance: itemDistance
+  }, ref) => {
+    const buttonRef = React.useRef(null);
+    const { magnification: contextMagnification, distance: contextDistance } = React.useContext(DockContext);
+    const magnification = itemMagnification ?? contextMagnification;
+    const distance = itemDistance ?? contextDistance;
+    const [isHovered, setIsHovered] = React.useState(false);
+    const mouseX = useMotionValue(Infinity);
+    const springConfig = { mass: 0.1, stiffness: 150, damping: 12 };
+    const size = useSpring(
+      useTransform(
+        mouseX,
+        [-distance, 0, distance],
+        [48, 48 + magnification, 48]
+      ),
+      springConfig
+    );
+    const handleMouseMove = /* @__PURE__ */ __name((e) => {
+      if (!buttonRef.current) return;
+      const rect = buttonRef.current.getBoundingClientRect();
+      const centerX = rect.left + rect.width / 2;
+      mouseX.set(e.clientX - centerX);
+    }, "handleMouseMove");
+    const handleMouseLeave = /* @__PURE__ */ __name(() => {
+      mouseX.set(Infinity);
+      setIsHovered(false);
+    }, "handleMouseLeave");
+    return /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        className: "relative",
+        onMouseMove: handleMouseMove,
+        onMouseLeave: handleMouseLeave,
+        onMouseEnter: () => setIsHovered(true),
+        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: size,
+                height: size
+              },
+              whileTap: { scale: 0.9 },
+              onClick,
+              className: cn(
+                "relative flex items-center justify-center 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",
+                className
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    style: {
+                      width: size,
+                      height: size
+                    },
+                    className: "flex items-center justify-center",
+                    children
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    className: "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 };