4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:Tfa4,"use client" import * as React from "react" import { Download, Flower2, Folder, Mail, MessageCircle, Music2, SquareTerminal, StickyNote, Trash2, } from "lucide-react" import { Dock, DockItem, DockSeparator } from "@/components/ballmac/dock" const tile = "text-white [&_svg]:drop-shadow-[0_1px_1px_rgb(0_0_0/0.25)]" export default function DockDemo() { const [running, setRunning] = React.useState(["Files", "Messages", "Music", "Terminal"]) const launch = (name: string) => setRunning((r) => (r.includes(name) ? r : [...r, name])) // Smaller screens get a gentler magnification so the dock stays inside its frame. const [compact, setCompact] = React.useState(false) React.useEffect(() => { const query = window.matchMedia("(max-width: 639px)") const update = () => setCompact(query.matches) update() query.addEventListener("change", update) return () => query.removeEventListener("change", update) }, []) const item = (name: string) => ({ label: name, active: running.includes(name), onClick: () => launch(name) }) return (

{/* Wallpaper */}

} className={`${tile} bg-linear-to-b from-chart-1/80 to-chart-1`} /> } containerClassName="max-[400px]:hidden" className={`${tile} bg-linear-to-b from-chart-1/70 to-chart-1`} /> } className={`${tile} bg-linear-to-b from-chart-2/80 to-chart-2`} /> Sep 29 } containerClassName="max-sm:hidden" className={tile} style={{ background: "conic-gradient(from 20deg, var(--chart-3), var(--chart-5), var(--chart-4), var(--chart-1), var(--chart-2), var(--chart-3))" }} /> } containerClassName="max-sm:hidden" className={`${tile} bg-linear-to-b from-chart-5 to-chart-4`} /> } className={`${tile} bg-linear-to-b from-chart-3/80 to-chart-3`} /> } containerClassName="max-sm:hidden" className={`${tile} bg-black/85`} /> } bounce={false} containerClassName="max-sm:hidden" className="bg-white/30 text-foreground/80 dark:bg-white/10" /> } bounce={false} className="bg-white/30 text-foreground/80 dark:bg-white/10" />

) } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@ballmac","registryDependencies":["https://ui.ballmac.com/r/dock.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/examples/dock-demo.tsx","content":"$50","type":"registry:example","target":"@components/ballmac/examples/dock-demo.tsx"}],"className":"h-[70svh] min-h-80"}]]}]