52: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"] 53: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"] 54:T1393,'use client'; import { Plus } from 'lucide-react'; import * as React from 'react'; import { focusRing, transitionBase } from '@/lib/recipes'; import { cn } from '@/lib/utils'; import { useLabels, usePreset } from '@/components/ui/labels-context'; // Mobile bottom navigation (Figma "Bottom navigation" + "_Bottom navigation item"): up to five slots, // an optional centered primary action, count badges. The marketing-only NavigationBottom composition stays as is. const BottomNavigation = React.forwardRef>( ({ className, 'aria-label': ariaLabelProp, ...props }, ref) => { const l = useLabels(); const ariaLabel = ariaLabelProp ?? l.primary; const zero = usePreset() === 'zero'; return (

); }, ); BottomNavigation.displayName = 'BottomNavigation'; export interface BottomNavigationItemProps extends React.AnchorHTMLAttributes { icon: React.ReactNode; label: string; current?: boolean; /** Count badge on the icon, e.g. unread items. */ count?: number; /** Renders a real button instead of a link, e.g. a "More" trigger that opens a sheet. Pass `aria-haspopup` and `aria-expanded` as needed. */ as?: 'a' | 'button'; } const BottomNavigationItem = React.forwardRef( ({ className, icon, label, current = false, count, as = 'a', ...props }, ref) => { const isButton = as === 'button'; const Tag = (isButton ? 'button' : 'a') as 'a'; // Zero: brand pill and icon for the current item, 11/500 label, 20px icons, brand count badge. const zero = usePreset() === 'zero'; // The label comes first in the DOM, so the accessible name starts with the visible label and continues with the count (2.5.3). The icon wrapper is moved above it visually. return ( {label} svg]:h-5 [&>svg]:w-5 group-hover/item:bg-muted group-data-[current]/item:bg-background-brand-subtle group-data-[current]/item:text-icon-brand' : 'h-8 w-12 [&>svg]:h-icon-lg [&>svg]:w-icon-lg group-hover/item:bg-muted group-data-[current]/item:bg-muted', )} > {icon} {count ? , : null} {count ? ( {count} ) : null} ); }, ); BottomNavigationItem.displayName = 'BottomNavigationItem'; export interface BottomNavigationActionProps extends React.ButtonHTMLAttributes { /** Required accessible name, e.g. `New`. */ label: string; icon?: React.ReactNode; } // Centered primary action (quick create); a real button, not a destination. const BottomNavigationAction = React.forwardRef( ({ className, label, icon, ...props }, ref) => { const zero = usePreset() === 'zero'; return ( ); }, ); BottomNavigationAction.displayName = 'BottomNavigationAction'; export { BottomNavigation, BottomNavigationAction, BottomNavigationItem }; 51:["$","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@^0.379.0",{"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@^0.379.0"}]]}]}]]}],["$","$L52",null,{"namespace":"@getitdone","registryDependencies":["https://zero-design.itdone.de/r/labels-context.json","https://zero-design.itdone.de/r/recipes.json","https://zero-design.itdone.de/r/utils.json","https://zero-design.itdone.de/r/theme.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/ui/bottom-navigation.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]