icon-dock-nav 1.0.0

package/README.md

@@ -0,0 +1,59 @@
+# @security-scan-console/dock-nav
+
+A macOS-style dock navigation component for React with smooth magnification effects.
+
+![DockNav Preview](assets/preview.png)
+
+## Installation
+
+```bash
+npm install @security-scan-console/dock-nav
+```
+
+## Usage
+
+```tsx
+import { DockNav, DockNavItem } from "@security-scan-console/dock-nav";
+
+const HomeIcon = (props) => (
+  <svg {...props} viewBox="0 0 24 24" fill="currentColor">
+    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
+  </svg>
+);
+
+const items: DockNavItem[] = [
+  { id: "home", label: "Home", icon: HomeIcon },
+  { id: "settings", label: "Settings", icon: SettingsIcon },
+];
+
+function App() {
+  return (
+    <DockNav
+      items={items}
+      position="top"
+      onNavigate={(id) => console.log("Navigated to:", id)}
+    />
+  );
+}
+```
+
+## Props
+
+| Prop            | Type                   | Default  | Description                                         |
+| --------------- | ---------------------- | -------- | --------------------------------------------------- |
+| `items`         | `DockNavItem[]`        | required | Navigation items                                    |
+| `position`      | `"top" \| "bottom"`    | `"top"`  | Dock position                                       |
+| `style`         | `CSSProperties`        | -        | Custom styles                                       |
+| `onNavigate`    | `(id: string) => void` | -        | Navigation callback                                 |
+| `activeId`      | `string`               | -        | Controlled active item                              |
+| `observeScroll` | `boolean`              | `false`  | Auto-detect active section via IntersectionObserver |
+| `baseSize`      | `number`               | `48`     | Base icon size in pixels                            |
+| `maxScale`      | `number`               | `1.4`    | Max magnification multiplier                        |
+
+## Features
+
+- Smooth magnification effect on hover (like macOS dock)
+- Keyboard navigation support
+- Respects `prefers-reduced-motion`
+- Optional scroll-based active detection
+- Zero external CSS dependencies

package/dist/DockNav.d.ts

@@ -0,0 +1,72 @@
+import React, { CSSProperties, ReactNode } from "react";
+export interface DockNavItem {
+    id: string;
+    label: string;
+    icon: React.FC<React.SVGProps<SVGSVGElement>>;
+}
+export interface DockNavTheme {
+    /** Active button background (default: "linear-gradient(to bottom right, #3b82f6, #1d4ed8)") */
+    activeBackground?: string;
+    /** Active button text/icon color (default: "white") */
+    activeColor?: string;
+    /** Inactive button background (default: "linear-gradient(to bottom right, #374151, #1f2937)") */
+    inactiveBackground?: string;
+    /** Inactive button text/icon color (default: "#d1d5db") */
+    inactiveColor?: string;
+    /** Active indicator dot color (default: "#60a5fa") */
+    indicatorColor?: string;
+    /** Tooltip background color (default: "#111827") */
+    tooltipBackground?: string;
+    /** Tooltip text color (default: "white") */
+    tooltipColor?: string;
+}
+export interface DockNavClassNames {
+    /** Class for the nav container */
+    nav?: string;
+    /** Class for the dock container */
+    dock?: string;
+    /** Class for each item wrapper */
+    item?: string;
+    /** Class for buttons */
+    button?: string;
+    /** Class for active button (added alongside button) */
+    buttonActive?: string;
+    /** Class for inactive button (added alongside button) */
+    buttonInactive?: string;
+    /** Class for tooltip */
+    tooltip?: string;
+    /** Class for active indicator dot */
+    indicator?: string;
+}
+export interface DockNavProps {
+    items: DockNavItem[];
+    position?: "top" | "bottom";
+    style?: CSSProperties;
+    onNavigate?: (id: string) => void;
+    activeId?: string;
+    /** Enable scroll-based active detection via IntersectionObserver */
+    observeScroll?: boolean;
+    /** Base icon size in pixels (default: 48) */
+    baseSize?: number;
+    /** Max magnification multiplier (default: 1.4) */
+    maxScale?: number;
+    /** Gap between items in pixels (default: 12) */
+    gap?: number;
+    /** Magnification distance in pixels (default: 100) */
+    magnifyDistance?: number;
+    /** Animation duration in ms (default: 100) */
+    animationDuration?: number;
+    /** Theme customization (inline styles) */
+    theme?: DockNavTheme;
+    /** Custom tooltip renderer */
+    renderTooltip?: (item: DockNavItem, isVisible: boolean) => ReactNode;
+    /** Hide tooltips entirely */
+    hideTooltips?: boolean;
+    /** Class names for Tailwind/CSS styling (overrides theme when provided) */
+    classNames?: DockNavClassNames;
+    /** Use only classNames, skip all default inline styles */
+    unstyled?: boolean;
+}
+export declare const DockNav: React.FC<DockNavProps>;
+export default DockNav;
+//# sourceMappingURL=DockNav.d.ts.map

package/dist/DockNav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DockNav.d.ts","sourceRoot":"","sources":["../src/DockNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAMZ,aAAa,EACb,SAAS,EACV,MAAM,OAAO,CAAC;AAEf,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;CAC/C;AAED,MAAM,WAAW,YAAY;IAC3B,+FAA+F;IAC/F,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iGAAiG;IACjG,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,2DAA2D;IAC3D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sDAAsD;IACtD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oDAAoD;IACpD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,iBAAiB;IAChC,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uDAAuD;IACvD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,wBAAwB;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gDAAgD;IAChD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sDAAsD;IACtD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,8CAA8C;IAC9C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,0CAA0C;IAC1C,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,8BAA8B;IAC9B,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,KAAK,SAAS,CAAC;IACrE,6BAA6B;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,2EAA2E;IAC3E,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAYD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAgY1C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/DockNav.js

@@ -0,0 +1,277 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useRef, useMemo, } from "react";
+const defaultTheme = {
+    activeBackground: "linear-gradient(to bottom right, #3b82f6, #1d4ed8)",
+    activeColor: "white",
+    inactiveBackground: "linear-gradient(to bottom right, #374151, #1f2937)",
+    inactiveColor: "#d1d5db",
+    indicatorColor: "#60a5fa",
+    tooltipBackground: "#111827",
+    tooltipColor: "white",
+};
+export const DockNav = ({ items, position = "top", style, onNavigate, activeId, observeScroll = false, baseSize = 48, maxScale = 1.4, gap = 12, magnifyDistance = 100, animationDuration = 100, theme: userTheme, renderTooltip, hideTooltips = false, classNames = {}, unstyled = false, }) => {
+    const theme = { ...defaultTheme, ...userTheme };
+    const [mouseX, setMouseX] = useState(null);
+    const [isHoveringDock, setIsHoveringDock] = useState(false);
+    const [focusedId, setFocusedId] = useState(null);
+    const [currentActiveId, setCurrentActiveId] = useState(activeId || items[0]?.id || "");
+    const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+    const [buttonRects, setButtonRects] = useState(new Map());
+    const observerRef = useRef(null);
+    const dockRef = useRef(null);
+    const buttonRefs = useRef(new Map());
+    const setButtonRef = useCallback((index) => (el) => {
+        if (el) {
+            buttonRefs.current.set(index, el);
+        }
+        else {
+            buttonRefs.current.delete(index);
+        }
+    }, []);
+    useEffect(() => {
+        const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+        setPrefersReducedMotion(mediaQuery.matches);
+        const handler = (e) => setPrefersReducedMotion(e.matches);
+        mediaQuery.addEventListener("change", handler);
+        return () => mediaQuery.removeEventListener("change", handler);
+    }, []);
+    useEffect(() => {
+        if (!observeScroll)
+            return;
+        const options = {
+            root: null,
+            rootMargin: "-20% 0px -60% 0px",
+            threshold: 0,
+        };
+        observerRef.current = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    setCurrentActiveId(entry.target.id);
+                }
+            });
+        }, options);
+        items.forEach((item) => {
+            const element = document.getElementById(item.id);
+            if (element && observerRef.current) {
+                observerRef.current.observe(element);
+            }
+        });
+        return () => {
+            observerRef.current?.disconnect();
+        };
+    }, [observeScroll, items]);
+    useEffect(() => {
+        if (activeId) {
+            setCurrentActiveId(activeId);
+        }
+    }, [activeId]);
+    useEffect(() => {
+        if (isHoveringDock) {
+            const rects = new Map();
+            buttonRefs.current.forEach((button, index) => {
+                rects.set(index, button.getBoundingClientRect());
+            });
+            setButtonRects(rects);
+        }
+    }, [isHoveringDock, mouseX]);
+    const handleClick = useCallback((id) => {
+        if (observeScroll) {
+            const element = document.getElementById(id);
+            if (element) {
+                element.scrollIntoView({
+                    behavior: prefersReducedMotion ? "auto" : "smooth",
+                    block: "start",
+                });
+            }
+        }
+        setCurrentActiveId(id);
+        onNavigate?.(id);
+    }, [onNavigate, prefersReducedMotion, observeScroll]);
+    const handleKeyDown = useCallback((e, id) => {
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleClick(id);
+        }
+    }, [handleClick]);
+    const getSize = useCallback((index) => {
+        if (prefersReducedMotion)
+            return 1;
+        if (!isHoveringDock || mouseX === null)
+            return 1;
+        const rect = buttonRects.get(index);
+        if (!rect)
+            return 1;
+        const buttonCenterX = rect.left + rect.width / 2;
+        const distance = Math.abs(mouseX - buttonCenterX);
+        if (distance > magnifyDistance)
+            return 1;
+        return 1 + (maxScale - 1) * Math.pow(1 - distance / magnifyDistance, 2);
+    }, [
+        prefersReducedMotion,
+        isHoveringDock,
+        mouseX,
+        buttonRects,
+        maxScale,
+        magnifyDistance,
+    ]);
+    const closestIndex = useMemo(() => {
+        if (!isHoveringDock || mouseX === null)
+            return null;
+        let closest = null;
+        let closestDistance = Infinity;
+        buttonRects.forEach((rect, index) => {
+            const buttonCenterX = rect.left + rect.width / 2;
+            const distance = Math.abs(mouseX - buttonCenterX);
+            if (distance < closestDistance && distance < 40) {
+                closestDistance = distance;
+                closest = index;
+            }
+        });
+        return closest;
+    }, [isHoveringDock, mouseX, buttonRects]);
+    const showTooltip = (id, index) => {
+        if (hideTooltips)
+            return false;
+        const isClosest = closestIndex === index;
+        const isFocused = focusedId === id;
+        const isActive = currentActiveId === id;
+        return (isClosest || isFocused) && !isActive;
+    };
+    const transitionStyle = prefersReducedMotion
+        ? "none"
+        : `transform ${animationDuration}ms ease-out`;
+    if (items.length === 0) {
+        return null;
+    }
+    const navStyle = unstyled
+        ? style || {}
+        : {
+            display: "flex",
+            justifyContent: "center",
+            padding: "12px 0",
+            ...(position === "bottom"
+                ? {
+                    position: "fixed",
+                    bottom: 16,
+                    left: "50%",
+                    transform: "translateX(-50%)",
+                }
+                : { position: "sticky", top: 0, zIndex: 50 }),
+            ...style,
+        };
+    const dockStyle = unstyled
+        ? {}
+        : {
+            display: "flex",
+            alignItems: "flex-end",
+            gap,
+            padding: "12px 16px",
+        };
+    return (_jsx("nav", { style: navStyle, className: classNames.nav, role: "navigation", "aria-label": "Main navigation", children: _jsx("div", { ref: dockRef, style: dockStyle, className: classNames.dock, onMouseMove: (e) => setMouseX(e.clientX), onMouseEnter: () => setIsHoveringDock(true), onMouseLeave: () => {
+                setIsHoveringDock(false);
+                setMouseX(null);
+            }, children: items.map((item, index) => {
+                const Icon = item.icon;
+                const isActive = currentActiveId === item.id;
+                const sizeMultiplier = getSize(index);
+                const translateY = (sizeMultiplier - 1) * baseSize * 0.5;
+                const isTooltipVisible = showTooltip(item.id, index);
+                const buttonStyle = unstyled
+                    ? {
+                        width: baseSize,
+                        height: baseSize,
+                        transform: `scale(${sizeMultiplier}) translateY(-${translateY / sizeMultiplier}px)`,
+                        transition: transitionStyle,
+                    }
+                    : {
+                        position: "relative",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        borderRadius: 12,
+                        border: "none",
+                        cursor: "pointer",
+                        outline: "none",
+                        background: isActive
+                            ? theme.activeBackground
+                            : theme.inactiveBackground,
+                        color: isActive ? theme.activeColor : theme.inactiveColor,
+                        boxShadow: isActive
+                            ? "0 4px 6px -1px rgba(59, 130, 246, 0.3)"
+                            : "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+                        width: baseSize,
+                        height: baseSize,
+                        transform: `scale(${sizeMultiplier}) translateY(-${translateY / sizeMultiplier}px)`,
+                        transformOrigin: "bottom center",
+                        transition: transitionStyle,
+                    };
+                const tooltipOffset = baseSize * sizeMultiplier + 12;
+                const tooltipStyle = unstyled
+                    ? {
+                        opacity: isTooltipVisible ? 1 : 0,
+                        pointerEvents: isTooltipVisible ? "auto" : "none",
+                    }
+                    : {
+                        position: "absolute",
+                        bottom: baseSize,
+                        transform: `translateY(-${tooltipOffset - baseSize}px)`,
+                        padding: "8px 16px",
+                        backgroundColor: theme.tooltipBackground,
+                        color: theme.tooltipColor,
+                        fontSize: 15,
+                        fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+                        fontWeight: 500,
+                        borderRadius: 10,
+                        whiteSpace: "nowrap",
+                        zIndex: 50,
+                        opacity: isTooltipVisible ? 1 : 0,
+                        pointerEvents: isTooltipVisible ? "auto" : "none",
+                        transition: prefersReducedMotion
+                            ? "none"
+                            : `opacity 150ms, transform ${animationDuration}ms ease-out`,
+                        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
+                    };
+                const tooltipArrowStyle = unstyled
+                    ? {}
+                    : {
+                        position: "absolute",
+                        left: "50%",
+                        transform: "translateX(-50%)",
+                        top: "100%",
+                        width: 0,
+                        height: 0,
+                        borderLeft: "4px solid transparent",
+                        borderRight: "4px solid transparent",
+                        borderTop: `4px solid ${theme.tooltipBackground}`,
+                    };
+                const itemStyle = unstyled
+                    ? {}
+                    : {
+                        position: "relative",
+                        display: "flex",
+                        flexDirection: "column",
+                        alignItems: "center",
+                    };
+                const indicatorStyle = unstyled
+                    ? {}
+                    : {
+                        position: "absolute",
+                        bottom: -8,
+                        width: 4,
+                        height: 4,
+                        backgroundColor: theme.indicatorColor,
+                        borderRadius: "50%",
+                    };
+                const buttonClassName = [
+                    classNames.button,
+                    isActive ? classNames.buttonActive : classNames.buttonInactive,
+                ]
+                    .filter(Boolean)
+                    .join(" ");
+                return (_jsxs("div", { style: itemStyle, className: classNames.item, children: [renderTooltip ? (renderTooltip(item, isTooltipVisible)) : (_jsxs("div", { role: "tooltip", id: `tooltip-${item.id}`, style: tooltipStyle, className: classNames.tooltip, children: [item.label, !unstyled && _jsx("div", { style: tooltipArrowStyle })] })), _jsx("button", { ref: setButtonRef(index), type: "button", onClick: () => handleClick(item.id), onKeyDown: (e) => handleKeyDown(e, item.id), onFocus: () => setFocusedId(item.id), onBlur: () => setFocusedId(null), "aria-label": item.label, "aria-describedby": renderTooltip ? undefined : `tooltip-${item.id}`, "aria-current": isActive ? "page" : undefined, style: buttonStyle, className: buttonClassName || undefined, children: _jsx(Icon, { style: {
+                                    width: baseSize,
+                                    height: baseSize,
+                                } }) }), isActive && (_jsx("div", { style: indicatorStyle, className: classNames.indicator }))] }, item.id));
+            }) }) }));
+};
+export default DockNav;

package/dist/DockNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DockNav.js","sourceRoot":"","sources":["../src/DockNav.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAsBxE,MAAM,CAAC,MAAM,OAAO,GAA2B,CAAC,EAC9C,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,EAAE,EACd,UAAU,EACV,QAAQ,EACR,aAAa,GAAG,KAAK,EACrB,QAAQ,GAAG,EAAE,EACb,QAAQ,GAAG,GAAG,GACf,EAAE,EAAE;IACH,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAC1D,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAChE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CACpD,QAAQ,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,CAC/B,CAAC;IACF,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxE,MAAM,WAAW,GAAG,MAAM,CAA8B,IAAI,CAAC,CAAC;IAC9D,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC7C,MAAM,UAAU,GAAG,MAAM,CAA+B,EAAE,CAAC,CAAC;IAE5D,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC;QACzE,uBAAuB,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAC5C,MAAM,OAAO,GAAG,CAAC,CAAsB,EAAE,EAAE,CACzC,uBAAuB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QACrC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;QAC/C,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IACjE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,aAAa;YAAE,OAAO;QAE3B,MAAM,OAAO,GAAG;YACd,IAAI,EAAE,IAAI;YACV,UAAU,EAAE,mBAAmB;YAC/B,SAAS,EAAE,CAAC;SACb,CAAC;QAEF,WAAW,CAAC,OAAO,GAAG,IAAI,oBAAoB,CAAC,CAAC,OAAO,EAAE,EAAE;YACzD,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;gBACxB,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;oBACzB,kBAAkB,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;gBACtC,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC,EAAE,OAAO,CAAC,CAAC;QAEZ,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACrB,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACjD,IAAI,OAAO,IAAI,WAAW,CAAC,OAAO,EAAE,CAAC;gBACnC,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YACvC,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,IAAI,WAAW,CAAC,OAAO,EAAE,CAAC;gBACxB,WAAW,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;YACnC,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC;IAE3B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,EAAE,CAAC;YACb,kBAAkB,CAAC,QAAQ,CAAC,CAAC;QAC/B,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,EAAU,EAAE,EAAE;QACb,IAAI,aAAa,EAAE,CAAC;YAClB,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;YAC5C,IAAI,OAAO,EAAE,CAAC;gBACZ,OAAO,CAAC,cAAc,CAAC;oBACrB,QAAQ,EAAE,oBAAoB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;oBAClD,KAAK,EAAE,OAAO;iBACf,CAAC,CAAC;YACL,CAAC;QACH,CAAC;QACD,kBAAkB,CAAC,EAAE,CAAC,CAAC;QACvB,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC;IACnB,CAAC,EACD,CAAC,UAAU,EAAE,oBAAoB,EAAE,aAAa,CAAC,CAClD,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,CAAsB,EAAE,EAAU,EAAE,EAAE;QACrC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YACvC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,WAAW,CAAC,EAAE,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,EACD,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,MAAM,OAAO,GAAG,CAAC,KAAa,EAAU,EAAE;QACxC,IAAI,oBAAoB;YAAE,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,cAAc,IAAI,MAAM,KAAK,IAAI;YAAE,OAAO,CAAC,CAAC;QAEjD,MAAM,MAAM,GAAG,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACzC,IAAI,CAAC,MAAM;YAAE,OAAO,CAAC,CAAC;QAEtB,MAAM,IAAI,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;QAC5C,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;QACjD,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,aAAa,CAAC,CAAC;QAClD,MAAM,WAAW,GAAG,GAAG,CAAC;QAExB,IAAI,QAAQ,GAAG,WAAW;YAAE,OAAO,CAAC,CAAC;QAErC,MAAM,KAAK,GAAG,CAAC,GAAG,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,QAAQ,GAAG,WAAW,EAAE,CAAC,CAAC,CAAC;QAC3E,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,GAAkB,EAAE;QAC9C,IAAI,CAAC,cAAc,IAAI,MAAM,KAAK,IAAI;YAAE,OAAO,IAAI,CAAC;QAEpD,IAAI,YAAY,GAAG,IAAI,CAAC;QACxB,IAAI,eAAe,GAAG,QAAQ,CAAC;QAE/B,UAAU,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YAC3C,IAAI,CAAC,MAAM;gBAAE,OAAO;YACpB,MAAM,IAAI,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;YAC5C,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;YACjD,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,aAAa,CAAC,CAAC;YAElD,IAAI,QAAQ,GAAG,eAAe,IAAI,QAAQ,GAAG,EAAE,EAAE,CAAC;gBAChD,eAAe,GAAG,QAAQ,CAAC;gBAC3B,YAAY,GAAG,KAAK,CAAC;YACvB,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,YAAY,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,mBAAmB,EAAE,CAAC;IAE3C,MAAM,WAAW,GAAG,CAAC,EAAU,EAAE,KAAa,EAAE,EAAE;QAChD,MAAM,SAAS,GAAG,YAAY,KAAK,KAAK,CAAC;QACzC,MAAM,SAAS,GAAG,SAAS,KAAK,EAAE,CAAC;QACnC,MAAM,QAAQ,GAAG,eAAe,KAAK,EAAE,CAAC;QACxC,OAAO,CAAC,SAAS,IAAI,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC/C,CAAC,CAAC;IAEF,MAAM,eAAe,GACnB,QAAQ,KAAK,QAAQ;QACnB,CAAC,CAAC,0CAA0C;QAC5C,CAAC,CAAC,mBAAmB,CAAC;IAE1B,OAAO,CACL,cACE,SAAS,EAAE,4BAA4B,eAAe,IAAI,SAAS,EAAE,EACrE,IAAI,EAAC,YAAY,gBACN,iBAAiB,YAE5B,cACE,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,gCAAgC,EAC1C,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,EACxC,YAAY,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAC3C,YAAY,EAAE,GAAG,EAAE;gBACjB,iBAAiB,CAAC,KAAK,CAAC,CAAC;gBACzB,SAAS,CAAC,IAAI,CAAC,CAAC;YAClB,CAAC,YAEA,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBACzB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;gBACvB,MAAM,QAAQ,GAAG,eAAe,KAAK,IAAI,CAAC,EAAE,CAAC;gBAC7C,MAAM,cAAc,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;gBACtC,MAAM,IAAI,GAAG,QAAQ,GAAG,cAAc,CAAC;gBACvC,MAAM,QAAQ,GAAG,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,cAAc,CAAC;gBAEjD,OAAO,CACL,eAAmB,SAAS,EAAC,qCAAqC,aAChE,eACE,SAAS,EAAE,sIACT,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAC9B,IAAI,WAAW,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,+BAA+B,EAAE,EACnF,IAAI,EAAC,SAAS,EACd,EAAE,EAAE,WAAW,IAAI,CAAC,EAAE,EAAE,aAEvB,IAAI,CAAC,KAAK,EACX,cAAK,SAAS,EAAC,2HAA2H,GAAG,IACzI,EAEN,iBACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE;gCACV,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;4BACjC,CAAC,EACD,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,EACnC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,EAC3C,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,EACpC,MAAM,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,gBACpB,IAAI,CAAC,KAAK,sBACJ,WAAW,IAAI,CAAC,EAAE,EAAE,kBACxB,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC3C,SAAS,EAAE,qMACT,QAAQ;gCACN,CAAC,CAAC,2EAA2E;gCAC7E,CAAC,CAAC,iGACN,EAAE,EACF,KAAK,EAAE;gCACL,KAAK,EAAE,GAAG,IAAI,IAAI;gCAClB,MAAM,EAAE,GAAG,IAAI,IAAI;gCACnB,UAAU,EAAE,oBAAoB;oCAC9B,CAAC,CAAC,MAAM;oCACR,CAAC,CAAC,6CAA6C;6BAClD,YAED,KAAC,IAAI,IACH,KAAK,EAAE;oCACL,KAAK,EAAE,GAAG,QAAQ,IAAI;oCACtB,MAAM,EAAE,GAAG,QAAQ,IAAI;oCACvB,UAAU,EAAE,oBAAoB;wCAC9B,CAAC,CAAC,MAAM;wCACR,CAAC,CAAC,6CAA6C;iCAClD,GACD,GACK,EAER,QAAQ,IAAI,CACX,cAAK,SAAS,EAAC,qDAAqD,GAAG,CACxE,KAlDO,IAAI,CAAC,EAAE,CAmDX,CACP,CAAC;YACJ,CAAC,CAAC,GACE,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { DockNav, type DockNavProps, type DockNavItem, type DockNavTheme, type DockNavClassNames, } from "./DockNav.js";
+export { default } from "./DockNav.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EACP,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,iBAAiB,GACvB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { DockNav, } from "./DockNav.js";
+export { default } from "./DockNav.js";

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAuC,MAAM,cAAc,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "icon-dock-nav",
+  "version": "1.0.0",
+  "description": "macOS-style dock navigation component for React with smooth magnification effects",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "license": "MIT",
+  "author": "klazapp",
+  "keywords": [
+    "react",
+    "navigation",
+    "dock",
+    "macos",
+    "component",
+    "ui",
+    "magnification",
+    "navbar"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/klazapp/icon-dock-nav.git"
+  },
+  "bugs": {
+    "url": "https://github.com/klazapp/icon-dock-nav/issues"
+  },
+  "homepage": "https://github.com/klazapp/icon-dock-nav#readme",
+  "scripts": {
+    "build": "tsc",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "typescript": "^5.3.0"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ]
+}