{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "floating-bar",
  "title": "Floating Bar",
  "description": "Responsive Inertia navigation that collapses while scrolling.",
  "dependencies": [
    "@inertiajs/vue3",
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "registry/js/components/ui/floating-bar/FloatingBar.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue';\nimport { computed, onMounted, onUnmounted, provide, ref, watch } from 'vue';\nimport { usePage } from '@inertiajs/vue3';\nimport { cn } from '@/lib/utils';\nimport { floatingBarContextKey } from '.';\n\nconst props = withDefaults(\n    defineProps<{\n        class?: HTMLAttributes['class'];\n        hiddenPaths?: string[];\n    }>(),\n    {\n        hiddenPaths: () => [],\n    },\n);\n\nconst page = usePage();\nconst collapsed = ref(false);\nconst lastScrollY = ref(0);\nconst ticking = ref(false);\nconst animationFrame = ref<number | null>(null);\n\nconst currentPath = computed(() => page.url.split('?')[0] ?? '/');\n\nconst hidden = computed(() =>\n    props.hiddenPaths.some(\n        (path) =>\n            currentPath.value === path ||\n            currentPath.value.startsWith(`${path}/`),\n    ),\n);\n\nprovide(floatingBarContextKey, {\n    collapsed,\n    currentPath,\n});\n\nconst updateCollapsedState = () => {\n    ticking.value = false;\n\n    const y = window.scrollY;\n    const delta = y - lastScrollY.value;\n    const atBottom =\n        window.innerHeight + y >= document.documentElement.scrollHeight - 24;\n\n    if (atBottom) {\n        collapsed.value = true;\n    } else if (Math.abs(delta) >= 6) {\n        collapsed.value = delta > 0 && y > 24;\n    }\n\n    lastScrollY.value = y;\n};\n\nconst handleScroll = () => {\n    if (ticking.value) {\n        return;\n    }\n\n    ticking.value = true;\n    animationFrame.value = window.requestAnimationFrame(updateCollapsedState);\n};\n\nonMounted(() => {\n    lastScrollY.value = window.scrollY;\n    window.addEventListener('scroll', handleScroll, { passive: true });\n});\n\nonUnmounted(() => {\n    window.removeEventListener('scroll', handleScroll);\n\n    if (animationFrame.value !== null) {\n        window.cancelAnimationFrame(animationFrame.value);\n    }\n});\n\nwatch(\n    () => page.url,\n    () => {\n        collapsed.value = false;\n    },\n);\n</script>\n\n<template>\n    <nav\n        v-if=\"!hidden\"\n        aria-label=\"Primary\"\n        :class=\"\n            cn(\n                'mobile-tab-bar pointer-events-none fixed inset-x-0 bottom-[calc(env(safe-area-inset-bottom)+1.5rem)] z-50 md:hidden',\n                props.class,\n            )\n        \"\n    >\n        <div\n            :class=\"\n                cn(\n                    'mx-auto w-fit transform-gpu will-change-transform [backface-visibility:hidden]',\n                    'transition-transform duration-[450ms] ease-[cubic-bezier(0.22,1,0.36,1)]',\n                )\n            \"\n        >\n            <div\n                :class=\"\n                    cn(\n                        'pointer-events-auto flex w-fit items-center rounded-full p-1.5 [contain:layout_paint]',\n                        'border border-white/20 bg-background/70 shadow-lg shadow-black/10 backdrop-blur-xl backdrop-saturate-150 dark:border-white/10',\n                    )\n                \"\n            >\n                <slot />\n            </div>\n        </div>\n    </nav>\n</template>\n",
      "type": "registry:ui",
      "target": "resources/js/components/ui/floating-bar/FloatingBar.vue"
    },
    {
      "path": "registry/js/components/ui/floating-bar/FloatingBarItem.vue",
      "content": "<script setup lang=\"ts\">\nimport type { Component, HTMLAttributes } from 'vue';\nimport { computed, inject } from 'vue';\nimport { Link } from '@inertiajs/vue3';\nimport { cn } from '@/lib/utils';\nimport { floatingBarContextKey, floatingBarItemVariants } from '.';\n\nconst props = defineProps<{\n    href: string;\n    label: string;\n    icon?: Component;\n    activePath?: string;\n    class?: HTMLAttributes['class'];\n}>();\n\nconst context = inject(floatingBarContextKey);\n\nconst active = computed(() => {\n    const currentPath = context?.currentPath.value ?? '';\n    const activePath = props.activePath ?? props.href;\n\n    return (\n        currentPath === activePath || currentPath.startsWith(`${activePath}/`)\n    );\n});\n\nconst collapsed = computed(() => context?.collapsed.value && !active.value);\n</script>\n\n<template>\n    <Link\n        :href=\"href\"\n        :aria-current=\"active ? 'page' : undefined\"\n        :aria-label=\"label\"\n        :class=\"\n            cn(\n                floatingBarItemVariants({\n                    state: collapsed ? 'collapsed' : 'visible',\n                }),\n                active\n                    ? floatingBarItemVariants({ state: 'active' })\n                    : floatingBarItemVariants({ state: 'inactive' }),\n                props.class,\n            )\n        \"\n    >\n        <slot name=\"icon\">\n            <component v-if=\"icon\" :is=\"icon\" class=\"size-5 shrink-0\" />\n        </slot>\n        <slot>\n            <span class=\"truncate text-[9px] leading-none font-medium\">{{\n                label\n            }}</span>\n        </slot>\n    </Link>\n</template>\n",
      "type": "registry:ui",
      "target": "resources/js/components/ui/floating-bar/FloatingBarItem.vue"
    },
    {
      "path": "registry/js/components/ui/floating-bar/index.ts",
      "content": "import type { VariantProps } from 'class-variance-authority';\nimport type { ComputedRef, InjectionKey, Ref } from 'vue';\nimport { cva } from 'class-variance-authority';\n\nexport type FloatingBarContext = {\n    collapsed: Ref<boolean>;\n    currentPath: ComputedRef<string>;\n};\n\nexport const floatingBarContextKey = Symbol(\n    'floatingBarContext',\n) as InjectionKey<FloatingBarContext>;\n\nexport { default as FloatingBar } from './FloatingBar.vue';\nexport { default as FloatingBarItem } from './FloatingBarItem.vue';\n\nexport const floatingBarItemVariants = cva(\n    'relative flex h-14 flex-col items-center justify-center gap-0.5 overflow-hidden rounded-full transition-[width,margin,opacity] duration-[450ms] ease-[cubic-bezier(0.22,1,0.36,1)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none',\n    {\n        variants: {\n            variant: {\n                default: '',\n            },\n            state: {\n                active: 'bg-primary text-primary-foreground',\n                inactive: 'text-muted-foreground hover:text-foreground',\n                collapsed: 'ml-0 w-0 opacity-0',\n                visible: 'ml-0.5 w-14 opacity-100 first:ml-0',\n            },\n        },\n        defaultVariants: {\n            variant: 'default',\n            state: 'inactive',\n        },\n    },\n);\n\nexport type FloatingBarItemVariants = VariantProps<\n    typeof floatingBarItemVariants\n>;\n",
      "type": "registry:ui",
      "target": "resources/js/components/ui/floating-bar/index.ts"
    }
  ],
  "type": "registry:ui"
}