50: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"] 51: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"] 52:Tdfd,.cr-sidebar { display: flex; flex-direction: column; gap: var(--cr-space-1); box-sizing: border-box; width: var(--cr-sidebar-width, 256px); min-height: 100%; padding: var(--cr-space-3); color: var(--cr-color-text-default); font-family: var(--cr-font-family-sans); } .cr-sidebar.cr-surface { border-radius: var(--cr-radius-xl); } .cr-sidebar[data-collapsed] { width: var(--cr-sidebar-collapsed-width, 68px); align-items: center; } .cr-sidebar__header { margin-bottom: var(--cr-space-1); } .cr-sidebar__body { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow-y: auto; } .cr-sidebar__title { margin: var(--cr-space-4) var(--cr-space-3) var(--cr-space-1); color: var(--cr-color-text-muted); font-size: var(--cr-font-size-xs); font-weight: var(--cr-font-weight-semibold); } .cr-sidebar__list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; } .cr-sidebar__link { display: flex; align-items: center; gap: var(--cr-space-3); box-sizing: border-box; min-height: 40px; padding: 0 var(--cr-space-3); border-radius: var(--cr-radius-md); color: var(--cr-color-text-secondary); font-size: var(--cr-font-size-md); font-weight: var(--cr-font-weight-medium); text-decoration: none; } .cr-sidebar__link:hover { background: var(--cr-color-bg-subtle); color: var(--cr-color-text-default); } .cr-sidebar__link[aria-current='page'] { background: var(--cr-color-ink-bg); color: var(--cr-color-ink-fg); font-weight: var(--cr-font-weight-semibold); } .cr-sidebar__link:focus-visible { outline: var(--cr-focus-width) solid var(--cr-color-focus); outline-offset: var(--cr-focus-offset); } .cr-sidebar__icon { display: grid; place-items: center; flex: none; width: 18px; font-size: var(--cr-font-size-lg); font-weight: var(--cr-font-weight-semibold); } .cr-sidebar__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cr-sidebar__count { min-width: 18px; padding: 0 5px; border-radius: var(--cr-radius-full); background: var(--cr-color-bg-subtle); font-size: 11px; font-weight: var(--cr-font-weight-bold); line-height: 18px; text-align: center; } .cr-sidebar__link[aria-current='page'] .cr-sidebar__count { background: color-mix(in srgb, currentColor 22%, transparent); } .cr-sidebar__footer { display: flex; align-items: center; gap: var(--cr-space-2); padding-top: var(--cr-space-3); border-top: 1px solid var(--cr-color-border-default); } .cr-sidebar__footer-slot { flex: 1; min-width: 0; } /* Collapsed: icons only. Labels stay in the page for screen readers; the count becomes a dot. */ .cr-sidebar[data-collapsed] .cr-sidebar__title { height: 1px; margin: var(--cr-space-3) var(--cr-space-2); overflow: hidden; background: var(--cr-color-border-default); color: transparent; } .cr-sidebar[data-collapsed] .cr-sidebar__link { position: relative; justify-content: center; width: 44px; min-height: 44px; padding: 0; border-radius: 14px; } .cr-sidebar[data-collapsed] .cr-sidebar__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .cr-sidebar[data-collapsed] .cr-sidebar__count { position: absolute; top: 7px; right: 7px; width: 8px; min-width: 0; height: 8px; padding: 0; overflow: hidden; background: currentColor; color: inherit; font-size: 0; } .cr-sidebar[data-collapsed] .cr-sidebar__footer { flex-direction: column; } 53:T12d7,'use client'; import { useId, useState, type MouseEventHandler, type ReactNode } from 'react'; import { IconButton } from '@/components/creance/icon-button/IconButton'; import { Tooltip } from '@/components/creance/tooltip/Tooltip'; import { cx } from '@/lib/creance/cx'; import { SidebarIcon } from '@/lib/creance/icons'; import './Sidebar.css'; export interface SidebarItem { /** Also the tooltip and accessible name when the sidebar is collapsed. */ label: string; href?: string; onClick?: MouseEventHandler; /** The page the person is on. */ current?: boolean; /** Shown beside the label. Collapsed, it becomes a dot. */ count?: number; /** Decorative. Collapsed, a link with no icon shows the first letter of its label. */ icon?: ReactNode; } export interface SidebarGroup { /** A heading above the group. */ title?: string; items: SidebarItem[]; } type Slot = ReactNode | ((state: { collapsed: boolean }) => ReactNode); export interface SidebarProps { groups: SidebarGroup[]; /** Above the links: a logo or a workspace switcher. A function receives `{ collapsed }`. */ header?: Slot; /** Below the links: the account. A function receives `{ collapsed }`. */ footer?: Slot; /** Shows a button that collapses the sidebar to icons. */ collapsible?: boolean; collapsed?: boolean; defaultCollapsed?: boolean; onCollapsedChange?: (collapsed: boolean) => void; /** `flush` has no background of its own, for use inside AppShell. `card` is a glass tile. */ variant?: 'flush' | 'card'; /** Accessible name of the nav. Default "Sidebar". */ label?: string; collapseLabel?: string; expandLabel?: string; className?: string; } /** Links down the side of an app, in groups. Collapses to icons; each icon keeps its name as a tooltip and for screen readers. */ export function Sidebar({ groups, header, footer, collapsible, collapsed: controlled, defaultCollapsed = false, onCollapsedChange, variant = 'flush', label = 'Sidebar', collapseLabel = 'Collapse sidebar', expandLabel = 'Expand sidebar', className, }: SidebarProps) { const [own, setOwn] = useState(defaultCollapsed); const collapsed = controlled ?? own; const id = useId(); const slot = (s: Slot) => (typeof s === 'function' ? s({ collapsed }) : s); function toggle() { setOwn(!collapsed); onCollapsedChange?.(!collapsed); } return (

{header !== undefined &&

{slot(header)}

}

{groups.map((group, g) => (

{group.title && (

{group.title}

)}

{item.label} {/* The space keeps the count a separate word in the link's accessible name. */} {item.count !== undefined && ' '} {item.count !== undefined && {item.count}}

{collapsed ? ( {link} ) : ( link )}

))}

{(footer !== undefined || collapsible) && (

{footer !== undefined &&

{slot(footer)}

} {collapsible && ( } label={collapsed ? expandLabel : collapseLabel} aria-expanded={!collapsed} tooltip={false} onClick={toggle} /> )}

)}

); } 4f:["$","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":[null,["$","$L50",null,{"namespace":"@creance","registryDependencies":["https://creance.pages.dev/r/creance-base.json","https://creance.pages.dev/r/icon-button.json","https://creance.pages.dev/r/tooltip.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"sidebar/Sidebar.css","content":"$52","type":"registry:file","target":"@components/creance/sidebar/Sidebar.css"},{"path":"sidebar/Sidebar.tsx","content":"$53","type":"registry:ui","target":"@components/creance/sidebar/Sidebar.tsx"}],"className":"h-[70svh] min-h-80"}]]}]