{
"name": "stepkit-glass-dock",
"type": "registry:component",
"title": "Glass dock",
"description": "A glass navigation dock over an original saturated landscape with selected and magnified destinations.",
"author": "Vladislav Stepanov",
"dependencies": [
"react@19.3.0",
"react-dom@19.3.0"
],
"files": [
{
"path": "components/stepkit/GlassDock.tsx",
"content": "/*\n * Stepkit 0.3.0\n * Copyright (c) 2026 Vladislav Stepanov\n *\n * Original Stepkit portions in this release are licensed under the MIT License. Adapted portions identify their upstream licence and attribution in the copied source and in the entry-specific upstream notice files.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n *\n */\n\"use client\";\n\nimport { useState, type ReactNode } from \"react\";\nimport \"./styles.css\";\nimport \"./showcase.css\";\n\nexport type GlassDockIcon = \"grid\" | \"spark\" | \"layers\" | \"chart\" | \"user\";\nexport interface GlassDockItem { id: string; label: string; icon?: GlassDockIcon; badge?: boolean; }\nexport interface GlassDockProps {\n items?: GlassDockItem[];\n selectedId?: string;\n defaultSelectedId?: string;\n onSelect?: (item: GlassDockItem) => void;\n headline?: string;\n description?: string;\n paused?: boolean;\n children?: ReactNode;\n className?: string;\n}\n\nconst defaultItems: GlassDockItem[] = [\n { id: \"canvas\", label: \"Canvas\", icon: \"grid\" },\n { id: \"spark\", label: \"Spark\", icon: \"spark\", badge: true },\n { id: \"layers\", label: \"Layers\", icon: \"layers\" },\n { id: \"analytics\", label: \"Analytics\", icon: \"chart\" },\n { id: \"profile\", label: \"Profile\", icon: \"user\" }\n];\n\nfunction DockIcon({ icon = \"grid\" }: { icon?: GlassDockIcon }) {\n if (icon === \"spark\") return ;\n if (icon === \"layers\") return ;\n if (icon === \"chart\") return ;\n if (icon === \"user\") return ;\n return ;\n}\n\nexport function GlassDock({ items = defaultItems, selectedId, defaultSelectedId = items[0]?.id, onSelect, headline = \"Find your flow.\", description = \"A tactile navigation surface with a little atmosphere built in.\", paused = false, children, className = \"\" }: GlassDockProps) {\n const [internalSelected, setInternalSelected] = useState(defaultSelectedId);\n const activeId = selectedId ?? internalSelected;\n const activeItem = items.find((item) => item.id === activeId) ?? items[0];\n const select = (item: GlassDockItem) => { if (selectedId === undefined) setInternalSelected(item.id); onSelect?.(item); };\n return (\n \n