@hanzo/ui 5.3.35 → 5.3.36

package/dist/dock/basic.mjs

@@ -1,151 +1,2 @@
 "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 };
+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};