{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bottom-mobile-nav",
  "description": "BottomMobileNav block",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "blocks/bottom-mobile-nav/page.tsx",
      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { Heart, Home, Search, User } from \"lucide-react\"\n\nimport { BottomMobileNav } from \"./components/bottom-mobile-nav\"\nimport { Sidebar } from \"./components/sidebar\"\n\n// Layout Component Props Interface\ninterface LayoutProps {\n  children: React.ReactNode\n  sidebarClassName?: string\n  bottomNavClassName?: string\n}\n\n// Layout Component (moved from layout.tsx)\nfunction Layout({\n  children,\n  sidebarClassName,\n  bottomNavClassName,\n}: LayoutProps) {\n  const routes = [\n    {\n      href: \"#\",\n      label: \"Home\",\n      icon: Home,\n    },\n    {\n      href: \"#search\",\n      label: \"Search\",\n      icon: Search,\n    },\n    {\n      href: \"#love\",\n      label: \"Love\",\n      icon: Heart,\n    },\n    {\n      href: \"#profile\",\n      label: \"Profile\",\n      icon: User,\n    },\n  ]\n\n  return (\n    <div className=\"min-h-screen\">\n      {/* Desktop Sidebar */}\n      <Sidebar routes={routes} className={sidebarClassName} />\n\n      {/* Main Content */}\n      <main className=\"pb-20 md:ml-20 md:pb-8\">{children}</main>\n\n      {/* Mobile Bottom Navigation */}\n      <BottomMobileNav\n        routes={routes}\n        labels={true}\n        className={bottomNavClassName}\n      />\n    </div>\n  )\n}\n\nexport default function BottomMobileNavPage() {\n  return (\n    <Layout>\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4 p-4\">\n        <p>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad\n          minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n          aliquip ex ea commodo consequat.\n        </p>\n        <p>\n          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum\n          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n          proident, sunt in culpa qui officia deserunt mollit anim id est\n          laborum.\n        </p>\n        <p>\n          Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n          accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae\n          ab illo inventore veritatis et quasi architecto beatae vitae dicta\n          sunt explicabo.\n        </p>\n        <p>\n          Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut\n          fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem\n          sequi nesciunt.\n        </p>\n        <p>\n          Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,\n          consectetur, adipisci velit, sed quia non numquam eius modi tempora\n          incidunt ut labore et dolore magnam aliquam quaerat voluptatem.\n        </p>\n        <p>\n          Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis\n          suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis\n          autem vel eum iure reprehenderit qui in ea voluptate velit esse quam\n          nihil molestiae consequatur.\n        </p>\n        <p>\n          At vero eos et accusamus et iusto odio dignissimos ducimus qui\n          blanditiis praesentium voluptatum deleniti atque corrupti quos dolores\n          et quas molestias excepturi sint occaecati cupiditate non provident,\n          similique sunt in culpa qui officia deserunt mollitia animi, id est\n          laborum et dolorum fuga.\n        </p>\n        <p>\n          Et harum quidem rerum facilis est et expedita distinctio. Nam libero\n          tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo\n          minus id quod maxime placeat facere possimus, omnis voluptas assumenda\n          est, omnis dolor repellendus.\n        </p>\n      </div>\n    </Layout>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/bottom-mobile-nav/page.tsx"
    },
    {
      "path": "blocks/bottom-mobile-nav/components/bottom-mobile-nav.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\nimport { usePathname } from \"next/navigation\"\nimport { Plus } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface Route {\n  href: string\n  label: string\n  icon: React.ComponentType<any>\n}\n\ninterface BarItemProps {\n  href: string\n  label: string\n  Icon?: React.ComponentType<any>\n  isActive: boolean\n  labels: boolean\n  onItemClick: (href: string) => void\n}\n\nfunction usePressAnimation(releaseDuration = 300) {\n  const [phase, setPhase] = React.useState<\"idle\" | \"down\" | \"up\">(\"idle\")\n  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null)\n\n  const clearPending = React.useCallback(() => {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current)\n      timeoutRef.current = null\n    }\n  }, [])\n\n  const pressDown = React.useCallback(() => {\n    clearPending()\n    setPhase(\"down\")\n  }, [clearPending])\n\n  const pressUp = React.useCallback(() => {\n    clearPending()\n    setPhase(\"up\")\n    timeoutRef.current = setTimeout(() => {\n      setPhase(\"idle\")\n    }, releaseDuration)\n  }, [clearPending, releaseDuration])\n\n  const triggerPress = React.useCallback(() => {\n    clearPending()\n    setPhase(\"down\")\n    timeoutRef.current = setTimeout(() => {\n      setPhase(\"up\")\n      timeoutRef.current = setTimeout(() => {\n        setPhase(\"idle\")\n      }, releaseDuration)\n    }, 80)\n  }, [clearPending, releaseDuration])\n\n  React.useEffect(() => {\n    return () => clearPending()\n  }, [clearPending])\n\n  return { phase, pressDown, pressUp, triggerPress }\n}\n\nconst PRESS_DOWN_DURATION = \"120ms\"\nconst PRESS_DOWN_EASING = \"cubic-bezier(0.25, 0.1, 0.25, 1)\"\nconst PRESS_DOWN_SCALE = \"scale(0.86)\"\n\nconst RELEASE_DURATION = \"320ms\"\nconst RELEASE_EASING = \"cubic-bezier(0.175, 0.885, 0.32, 1.275)\"\nconst RELEASE_SCALE = \"scale(1)\"\n\nfunction getPressStyle(phase: \"idle\" | \"down\" | \"up\") {\n  if (phase === \"down\") {\n    return {\n      transform: PRESS_DOWN_SCALE,\n      transitionProperty: \"transform\",\n      transitionDuration: PRESS_DOWN_DURATION,\n      transitionTimingFunction: PRESS_DOWN_EASING,\n    }\n  }\n  return {\n    transform: RELEASE_SCALE,\n    transitionProperty: \"transform\",\n    transitionDuration: phase === \"up\" ? RELEASE_DURATION : \"0ms\",\n    transitionTimingFunction: RELEASE_EASING,\n  }\n}\n\nconst CENTER_PRESS_DOWN_SCALE = \"scale(0.88)\"\n\nfunction getCenterPressStyle(phase: \"idle\" | \"down\" | \"up\") {\n  if (phase === \"down\") {\n    return {\n      transform: CENTER_PRESS_DOWN_SCALE,\n      transitionProperty: \"transform\",\n      transitionDuration: PRESS_DOWN_DURATION,\n      transitionTimingFunction: PRESS_DOWN_EASING,\n    }\n  }\n  return {\n    transform: RELEASE_SCALE,\n    transitionProperty: \"transform\",\n    transitionDuration: phase === \"up\" ? RELEASE_DURATION : \"0ms\",\n    transitionTimingFunction: RELEASE_EASING,\n  }\n}\n\nconst BarItem = React.memo<BarItemProps>(\n  ({ href, label, Icon, isActive, labels, onItemClick }) => {\n    const { phase, pressDown, pressUp, triggerPress } = usePressAnimation(300)\n    const touchedRef = React.useRef(false)\n\n    const handleTouchStart = () => {\n      touchedRef.current = true\n      pressDown()\n    }\n\n    const handleTouchEnd = () => {\n      pressUp()\n    }\n\n    const handleClick = () => {\n      if (!touchedRef.current) {\n        triggerPress()\n      }\n      touchedRef.current = false\n      onItemClick(href)\n    }\n\n    return (\n      <li className=\"flex-1\">\n        <Link\n          href={href}\n          className={cn(\n            \"flex h-full w-full flex-col items-center justify-center px-1 transition-colors duration-150 select-none\",\n            labels ? \"py-2\" : \"py-3\"\n          )}\n          style={{ WebkitTouchCallout: \"none\" }}\n          onTouchStart={handleTouchStart}\n          onTouchEnd={handleTouchEnd}\n          onTouchCancel={handleTouchEnd}\n          onClick={handleClick}\n        >\n          <div\n            className=\"pointer-events-none flex flex-col items-center will-change-transform\"\n            style={getPressStyle(phase)}\n          >\n            {Icon && (\n              <Icon\n                className={cn(\n                  \"h-7 w-7 transition-colors duration-150\",\n                  isActive ? \"text-primary\" : \"text-muted-foreground\"\n                )}\n              />\n            )}\n            {labels && (\n              <span\n                className={cn(\n                  \"mt-1.5 text-center text-[10px] leading-tight transition-colors duration-150\",\n                  isActive ? \"text-primary\" : \"text-muted-foreground\"\n                )}\n              >\n                {label}\n              </span>\n            )}\n          </div>\n        </Link>\n      </li>\n    )\n  }\n)\n\nBarItem.displayName = \"BarItem\"\n\ninterface CenterButtonConfig {\n  onClick: () => void\n  label?: string\n}\n\ninterface CenterButtonProps {\n  onClick: () => void\n  label?: string\n  labels: boolean\n}\n\nconst CenterButton = React.memo<CenterButtonProps>(\n  ({ onClick, label, labels }) => {\n    const { phase, pressDown, pressUp, triggerPress } = usePressAnimation(300)\n    const touchedRef = React.useRef(false)\n\n    const handleTouchStart = () => {\n      touchedRef.current = true\n      pressDown()\n    }\n\n    const handleTouchEnd = () => {\n      pressUp()\n    }\n\n    const handleClick = () => {\n      if (!touchedRef.current) {\n        triggerPress()\n      }\n      touchedRef.current = false\n      onClick()\n    }\n\n    return (\n      <li className=\"flex-1\">\n        <button\n          type=\"button\"\n          onClick={handleClick}\n          onTouchStart={handleTouchStart}\n          onTouchEnd={handleTouchEnd}\n          onTouchCancel={handleTouchEnd}\n          className=\"flex h-full w-full flex-col items-center justify-center px-1 py-1 transition-colors duration-150 select-none\"\n          style={{ WebkitTouchCallout: \"none\" }}\n          aria-label={label || \"Add\"}\n        >\n          <div className=\"pointer-events-none flex flex-col items-center\">\n            <div\n              className=\"supports-[backdrop-filter]:bg-muted/90 rounded-lg px-6 py-2 backdrop-blur-lg will-change-transform\"\n              style={getCenterPressStyle(phase)}\n            >\n              <Plus className=\"text-muted-foreground h-7 w-7 transition-colors duration-150\" />\n            </div>\n            {labels && label && (\n              <span className=\"text-accent-foreground mt-1.5 text-center text-[10px] leading-tight\">\n                {label}\n              </span>\n            )}\n          </div>\n        </button>\n      </li>\n    )\n  }\n)\n\nCenterButton.displayName = \"CenterButton\"\n\ninterface BottomMobileNavProps {\n  routes?: Route[]\n  labels?: boolean\n  centerButton?: CenterButtonConfig\n  className?: string\n  /**\n   * Renders a soft top-to-bottom gradient backdrop fading the content behind\n   * the nav into the background colour. When false, falls back to a solid\n   * blurred background.\n   */\n  gradient?: boolean\n}\n\nexport function BottomMobileNav({\n  routes = [],\n  labels = false,\n  centerButton,\n  className,\n  gradient = true,\n}: BottomMobileNavProps) {\n  const pathname = usePathname()\n  const [lastClickedItem, setLastClickedItem] = React.useState<string | null>(\n    null\n  )\n  const [activeRoute, setActiveRoute] = React.useState<string>(\"\")\n\n  React.useEffect(() => {\n    if (routes.length === 0) return\n\n    const updateActiveRoute = () => {\n      const hasHashRoutes = routes.some((route) => route.href.startsWith(\"#\"))\n      let currentRoute = \"\"\n\n      if (hasHashRoutes) {\n        currentRoute = window.location.hash\n        if (!currentRoute && routes.length > 0) {\n          currentRoute = routes[0].href\n        }\n      } else {\n        currentRoute = pathname\n      }\n\n      setActiveRoute(currentRoute || routes[0]?.href || \"\")\n    }\n\n    updateActiveRoute()\n\n    const handleRouteChange = () => updateActiveRoute()\n\n    window.addEventListener(\"hashchange\", handleRouteChange, { passive: true })\n    window.addEventListener(\"popstate\", handleRouteChange, { passive: true })\n\n    return () => {\n      window.removeEventListener(\"hashchange\", handleRouteChange)\n      window.removeEventListener(\"popstate\", handleRouteChange)\n    }\n  }, [routes, pathname])\n\n  React.useEffect(() => {\n    if (\n      typeof window !== \"undefined\" &&\n      routes.some((route) => route.href.startsWith(\"#\"))\n    ) {\n      const initialHash = window.location.hash\n      if (initialHash) {\n        setActiveRoute(initialHash)\n      }\n    }\n  }, [])\n\n  const handleItemClick = React.useCallback(\n    (href: string) => {\n      if (lastClickedItem === href && activeRoute === href) {\n        requestAnimationFrame(() => {\n          window.scrollTo({\n            top: 0,\n            behavior: \"smooth\",\n          })\n        })\n      }\n      setLastClickedItem(href)\n    },\n    [lastClickedItem, activeRoute]\n  )\n\n  const handleCenterButtonClick = React.useCallback(() => {\n    centerButton?.onClick()\n  }, [centerButton])\n\n  const { firstHalf, secondHalf } = React.useMemo(() => {\n    const halfLength = Math.ceil(routes.length / 2)\n    return {\n      firstHalf: routes.slice(0, halfLength),\n      secondHalf: routes.slice(halfLength),\n    }\n  }, [routes])\n\n  return (\n    <nav\n      className={cn(\n        \"fixed right-0 bottom-0 left-0 z-50 block py-1 md:hidden\",\n        \"pt-1 pb-[env(safe-area-inset-bottom,4px)]\",\n        !gradient &&\n          \"supports-[backdrop-filter]:bg-background/85 backdrop-blur-lg\",\n        className\n      )}\n      style={\n        gradient\n          ? {\n              background:\n                \"linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--background) 15%, transparent) 5%, color-mix(in srgb, var(--background) 40%, transparent) 10%, color-mix(in srgb, var(--background) 60%, transparent) 15%, color-mix(in srgb, var(--background) 80%, transparent) 25%, var(--background) 45%)\",\n            }\n          : undefined\n      }\n    >\n      <ul className=\"relative flex items-center justify-around\">\n        {centerButton ? (\n          <>\n            {firstHalf.map(({ href, label, icon: Icon }, index) => (\n              <BarItem\n                key={`${label}-${index}`}\n                href={href}\n                label={label}\n                Icon={Icon}\n                isActive={activeRoute === href}\n                labels={labels}\n                onItemClick={handleItemClick}\n              />\n            ))}\n\n            <CenterButton\n              onClick={handleCenterButtonClick}\n              label={centerButton.label}\n              labels={labels}\n            />\n\n            {secondHalf.map(({ href, label, icon: Icon }, index) => (\n              <BarItem\n                key={`${label}-${firstHalf.length + index}`}\n                href={href}\n                label={label}\n                Icon={Icon}\n                isActive={activeRoute === href}\n                labels={labels}\n                onItemClick={handleItemClick}\n              />\n            ))}\n          </>\n        ) : (\n          routes.map(({ href, label, icon: Icon }, index) => (\n            <BarItem\n              key={`${label}-${index}`}\n              href={href}\n              label={label}\n              Icon={Icon}\n              isActive={activeRoute === href}\n              labels={labels}\n              onItemClick={handleItemClick}\n            />\n          ))\n        )}\n      </ul>\n    </nav>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/bottom-mobile-nav.tsx"
    },
    {
      "path": "blocks/bottom-mobile-nav/components/sidebar.tsx",
      "content": "\"use client\"\n\nimport React, { memo, useCallback, useRef, useState } from \"react\"\nimport Link from \"next/link\"\nimport { usePathname } from \"next/navigation\"\nimport { Plus } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\"\n\ninterface Route {\n  href: string\n  label: string\n  icon: React.ComponentType<any>\n}\n\ninterface SidebarProps {\n  className?: string\n  routes?: Route[]\n  showCTAButton?: boolean\n  onCTAClick?: () => void\n  tooltips?: boolean\n}\n\nfunction usePressAnimation(duration = 100) {\n  const [isPressed, setIsPressed] = useState(false)\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null)\n\n  const trigger = useCallback(() => {\n    if (timeoutRef.current) clearTimeout(timeoutRef.current)\n    setIsPressed(true)\n    timeoutRef.current = setTimeout(() => setIsPressed(false), duration)\n  }, [duration])\n\n  React.useEffect(() => {\n    return () => {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current)\n    }\n  }, [])\n\n  return { isPressed, trigger }\n}\n\nexport const Sidebar = memo(function Sidebar({\n  className,\n  routes = [],\n  showCTAButton = true,\n  onCTAClick = () => console.log(\"Sidebar CTA clicked\"),\n  tooltips = true,\n}: SidebarProps) {\n  const pathname = usePathname()\n  const [lastClickedItem, setLastClickedItem] = React.useState<string | null>(\n    null\n  )\n  const [activeRoute, setActiveRoute] = React.useState<string>(\"\")\n  const [clickedItem, setClickedItem] = React.useState<string | null>(null)\n\n  const pressAnimations = useRef<\n    Record<string, ReturnType<typeof usePressAnimation>>\n  >({})\n  const getAnimation = (key: string) => {\n    if (!pressAnimations.current[key]) {\n      pressAnimations.current[key] = { isPressed: false, trigger: () => {} }\n    }\n    return pressAnimations.current[key]\n  }\n\n  const [pressedItems, setPressedItems] = useState<Record<string, boolean>>({})\n  const timeoutsRef = useRef<Record<string, NodeJS.Timeout>>({})\n\n  const triggerPress = useCallback((key: string) => {\n    if (timeoutsRef.current[key]) clearTimeout(timeoutsRef.current[key])\n    setPressedItems((prev) => ({ ...prev, [key]: true }))\n    timeoutsRef.current[key] = setTimeout(() => {\n      setPressedItems((prev) => ({ ...prev, [key]: false }))\n    }, 100)\n  }, [])\n\n  React.useEffect(() => {\n    return () => {\n      Object.values(timeoutsRef.current).forEach(clearTimeout)\n    }\n  }, [])\n\n  React.useEffect(() => {\n    if (routes.length > 0) {\n      setActiveRoute(routes[0]?.href || \"\")\n      setClickedItem(routes[0]?.href || null)\n    }\n  }, [routes])\n\n  const handleItemClick = React.useCallback(\n    (href: string) => {\n      if (lastClickedItem === href && activeRoute === href) {\n        requestAnimationFrame(() => {\n          window.scrollTo({\n            top: 0,\n            behavior: \"smooth\",\n          })\n        })\n      }\n      setLastClickedItem(href)\n    },\n    [lastClickedItem, activeRoute]\n  )\n\n  return (\n    <TooltipProvider>\n      <nav\n        className={cn(\n          \"bg-background/80 fixed top-0 left-0 z-50 hidden h-screen w-20 flex-col items-center border-r py-3 backdrop-blur-lg md:flex\",\n          className\n        )}\n      >\n        <div className=\"mb-8 py-2\">\n          <Link href=\"/\" className=\"block\" onClick={() => handleItemClick(\"/\")}>\n            <svg\n              viewBox=\"0 0 282 308\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className=\"size-6\"\n            >\n              <path\n                d=\"M280.438 295.396L152.117 5.66075C151.645 3.87252 150.584 2.32152 149.12 1.29292C147.665 0.264327 145.896 -0.172778 144.147 0.0619372H120.258C118.509 -0.172778 116.74 0.264327 115.285 1.29292C113.821 2.32152 112.76 3.87252 112.288 5.66075L0.780777 295.396C0.171502 296.774 -0.0839596 298.294 0.0241376 299.81C0.132235 301.327 0.603995 302.788 1.40981 304.052C2.2058 305.318 3.30641 306.345 4.58392 307.034C5.87126 307.725 7.30596 308.054 8.75053 307.993H272.92C279.111 307.993 284.86 300.528 280.438 295.396ZM122.469 127.434L177.775 250.605C178.384 252.07 178.65 253.664 178.551 255.257C178.453 256.85 177.991 258.395 177.215 259.765C176.429 261.133 175.358 262.286 174.07 263.128C172.783 263.969 171.329 264.475 169.815 264.602H68.037C66.4941 264.493 64.9807 264.019 63.6246 263.213C62.2685 262.408 61.1089 261.293 60.2146 259.951C59.3204 258.607 58.7307 257.07 58.4752 255.454C58.2197 253.836 58.318 252.18 58.7504 250.605L106.539 127.434C107.266 125.856 108.397 124.525 109.802 123.594C111.207 122.663 112.838 122.169 114.499 122.169C116.17 122.169 117.791 122.663 119.206 123.594C120.612 124.525 121.741 125.856 122.469 127.434Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </Link>\n        </div>\n\n        <div className=\"flex flex-1 flex-col items-center justify-center space-y-4\">\n          {routes.slice(0, 2).map(({ href, icon: Icon, label }, index) => {\n            const isActive = clickedItem === href\n            const linkElement = (\n              <Link\n                key={href}\n                href={href}\n                onClick={() => {\n                  handleItemClick(href)\n                  setClickedItem(href)\n                  triggerPress(href)\n                }}\n                style={{\n                  transform: pressedItems[href] ? \"scale(0.92)\" : \"scale(1)\",\n                  transition: \"transform 100ms cubic-bezier(.08,.52,.52,1)\",\n                }}\n                className={cn(\n                  \"group relative rounded-lg px-4 py-3 transition-colors duration-300\",\n                  isActive ? \"text-accent-foreground\" : \"text-muted-foreground\"\n                )}\n              >\n                <div className=\"bg-accent absolute inset-0 scale-75 rounded-lg opacity-0 transition-all duration-200 ease-out group-hover:scale-100 group-hover:opacity-100\" />\n                {Icon && (\n                  <Icon\n                    className={cn(\n                      \"relative z-10 h-6 w-6 transition-colors duration-300\",\n                      isActive ? \"text-accent-foreground\" : \"\"\n                    )}\n                  />\n                )}\n              </Link>\n            )\n\n            return tooltips ? (\n              <Tooltip key={href}>\n                <TooltipTrigger asChild>{linkElement}</TooltipTrigger>\n                <TooltipContent side=\"right\" sideOffset={4} hideArrow>\n                  {label}\n                </TooltipContent>\n              </Tooltip>\n            ) : (\n              <div key={href}>{linkElement}</div>\n            )\n          })}\n\n          {showCTAButton &&\n            (() => {\n              const buttonElement = (\n                <button\n                  key=\"cta-button\"\n                  onClick={() => {\n                    onCTAClick()\n                    triggerPress(\"cta\")\n                  }}\n                  style={{\n                    transform: pressedItems[\"cta\"] ? \"scale(0.92)\" : \"scale(1)\",\n                    transition: \"transform 100ms cubic-bezier(.08,.52,.52,1)\",\n                  }}\n                  className=\"group bg-muted text-muted-foreground relative cursor-pointer rounded-lg px-4 py-3 transition-colors duration-300\"\n                >\n                  <div className=\"bg-accent absolute inset-0 scale-75 rounded-lg opacity-0 transition-all duration-200 ease-out group-hover:scale-100 group-hover:opacity-100\" />\n                  <Plus className=\"group-hover:text-accent-foreground relative z-10 h-6 w-6 transition-colors duration-300\" />\n                </button>\n              )\n\n              return tooltips ? (\n                <Tooltip>\n                  <TooltipTrigger asChild>{buttonElement}</TooltipTrigger>\n                  <TooltipContent side=\"right\" sideOffset={4} hideArrow>\n                    Add\n                  </TooltipContent>\n                </Tooltip>\n              ) : (\n                buttonElement\n              )\n            })()}\n\n          {routes.slice(2).map(({ href, icon: Icon, label }, index) => {\n            const isActive = clickedItem === href\n            const linkElement = (\n              <Link\n                key={href}\n                href={href}\n                onClick={() => {\n                  handleItemClick(href)\n                  setClickedItem(href)\n                  triggerPress(href)\n                }}\n                style={{\n                  transform: pressedItems[href] ? \"scale(0.92)\" : \"scale(1)\",\n                  transition: \"transform 100ms cubic-bezier(.08,.52,.52,1)\",\n                }}\n                className={cn(\n                  \"group relative rounded-lg px-4 py-3 transition-colors duration-300\",\n                  isActive ? \"text-accent-foreground\" : \"text-muted-foreground\"\n                )}\n              >\n                <div className=\"bg-accent absolute inset-0 scale-75 rounded-lg opacity-0 transition-all duration-200 ease-out group-hover:scale-100 group-hover:opacity-100\" />\n                {Icon && (\n                  <Icon\n                    className={cn(\n                      \"relative z-10 h-6 w-6 transition-colors duration-300\",\n                      isActive ? \"text-accent-foreground\" : \"\"\n                    )}\n                  />\n                )}\n              </Link>\n            )\n\n            return tooltips ? (\n              <Tooltip key={href}>\n                <TooltipTrigger asChild>{linkElement}</TooltipTrigger>\n                <TooltipContent side=\"right\" sideOffset={4} hideArrow>\n                  {label}\n                </TooltipContent>\n              </Tooltip>\n            ) : (\n              <div key={href}>{linkElement}</div>\n            )\n          })}\n        </div>\n\n        <div className=\"mt-auto\">\n          {/* You can add theme switcher or other controls here */}\n        </div>\n      </nav>\n    </TooltipProvider>\n  )\n})\n\nSidebar.displayName = \"Sidebar\"\n",
      "type": "registry:component",
      "target": "components/sidebar.tsx"
    }
  ],
  "meta": {
    "iframeHeight": "800px",
    "container": "",
    "mobile": "component"
  },
  "categories": [
    "layout"
  ],
  "type": "registry:block"
}