51: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"] 52: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"] 53:T2029,"use client"; import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"; import { Cancel01Icon } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import * as stylex from "@stylexjs/stylex"; import type { ComponentProps, RefObject } from "react"; import { Button } from "@/components/primitives/button"; import type { Sx } from "@/lib/constella/styles"; import { typeStyles } from "@/lib/constella/styles"; import { colors, durations, easings, fontWeights, media, radii, shadows, sizes, space, strokes, } from "@/lib/constella/tokens.stylex"; type Styled = Omit & { sx?: Sx; }; type SidePanelContentProps = Styled & { /** The `SidePanelSlot` to open in, beside the content. */ container: RefObject; }; const entering = ":is([data-starting-style])"; const styles = stylex.create({ // Held in view below the header row while the content beside it scrolls. slot: { alignSelf: "flex-start", display: "flex", flexDirection: "column", flexShrink: 0, height: `calc(100svh - ${sizes.header})`, insetBlockStart: sizes.header, position: "sticky", }, // Base UI wraps the popup in the portal's own element, which has to fill the slot too. portal: { display: "flex", flexDirection: "column", flexGrow: 1, minHeight: 0, }, // Beside the content, lifted off it as the composer is: its fill and its edge a ring in its shadow. surface: { backgroundColor: colors.raised, boxShadow: shadows.panel, borderStartStartRadius: radii.lg, borderStartEndRadius: radii.lg, borderEndStartRadius: radii.lg, borderEndEndRadius: radii.lg, color: colors.textPrimary, display: "flex", flexDirection: "column", flexShrink: 0, minHeight: 0, overflow: "hidden", }, // Inset from the content and the window's edges. placed: { marginBlockEnd: space.row, marginBlockStart: space.row, marginInlineEnd: space.row, marginInlineStart: space.row, maxWidth: `calc(100vw - 2 * ${space.row})`, width: sizes.sidePanel, }, popup: { flexGrow: 1, opacity: { default: 1, [entering]: 0 }, overflow: "hidden", transform: { default: "none", [entering]: { default: `translateX(${space.sm})`, [media.reducedMotion]: "none", }, }, // Closes at once, so the content beside it widens in one step. transitionDuration: { default: durations.dialog, ":is([data-ending-style])": "0s", }, transitionProperty: "opacity, transform", transitionTimingFunction: easings.layout, }, // The header row less the panel's inset above and below, so a panel inset by `space.row` // centres its controls on the header row's line. header: { alignItems: "center", borderBlockEndColor: colors.borderSubtle, borderBlockEndStyle: "solid", borderBlockEndWidth: strokes.border, display: "flex", flexShrink: 0, gap: space.row, height: `calc(${sizes.header} - 2 * ${space.row})`, paddingInlineEnd: space.row, paddingInlineStart: space.row, }, // Its text on the body's edge: the strip's padding plus this. title: { flexGrow: 1, paddingInlineStart: space.popup, fontWeight: fontWeights.medium, marginBlockEnd: 0, marginBlockStart: 0, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", }, panelTitle: { fontWeight: fontWeights.semibold, }, // First in the body: the header is one row, with no room under the title. description: { color: colors.textSecondary, marginBlockEnd: space.md, marginBlockStart: 0, marginInlineEnd: 0, marginInlineStart: 0, textWrap: "pretty", }, body: { flexGrow: 1, minHeight: 0, overflowY: "auto", paddingBlockEnd: space.md, paddingBlockStart: space.md, paddingInlineEnd: space.md, paddingInlineStart: space.md, }, footer: { display: "flex", flexDirection: "column", flexShrink: 0, gap: space.xs, paddingBlockEnd: space.md, paddingBlockStart: space.md, paddingInlineEnd: space.md, paddingInlineStart: space.md, }, }); /** The side panel's surface without the dialog or its place: the page sizes and places it. */ function Panel({ sx, ...props }: Styled>) { return (

); } /** The panel's top strip: the title first, any actions after it. */ function PanelHeader({ sx, ...props }: Styled>) { return (

); } function PanelTitle({ children, sx, ...props }: Styled>) { return (

{children}

); } /** Scrolls on its own once the panel's height can't hold it. */ function PanelBody({ sx, ...props }: Styled>) { return (

); } /** A non-modal dialog: clicking the content beside it leaves it open; Escape or Close shuts it. */ function SidePanel(props: DialogPrimitive.Root.Props) { return ( ); } /** Where the panel opens: after the content it sits beside, in a flex row. */ function SidePanelSlot({ sx, ...props }: Styled>) { return (

); } function SidePanelContent({ container, sx, ...props }: SidePanelContentProps) { return ( ); } /** The panel's top strip: the title first, any actions after it, Close last. */ function SidePanelHeader({ children, sx, ...props }: Styled>) { return (

{children} } >

); } function SidePanelTitle({ sx, ...props }: Styled) { return ( ); } function SidePanelDescription({ sx, ...props }: Styled) { return ( ); } function SidePanelBody({ sx, ...props }: Styled>) { return (

); } /** Pinned below the body, which scrolls on its own. */ function SidePanelFooter({ sx, ...props }: Styled>) { return (

); } export { Panel, PanelBody, PanelHeader, PanelTitle, SidePanel, SidePanelBody, SidePanelContent, SidePanelDescription, SidePanelFooter, SidePanelHeader, SidePanelSlot, SidePanelTitle, }; export type { SidePanelContentProps }; 50:["$","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","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react"}]]}]}],["$","li","@hugeicons/core-free-icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Fcore-free-icons","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":"@hugeicons/core-free-icons"}]]}]}],["$","li","@hugeicons/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Freact","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":"@hugeicons/react"}]]}]}],["$","li","@stylexjs/stylex",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40stylexjs%2Fstylex","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":"@stylexjs/stylex"}]]}]}]]}],["$","$L51",null,{"namespace":"@constella","registryDependencies":["https://constella.aayush.cv/r/base.json","https://constella.aayush.cv/r/button.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"src/components/primitives/side-panel.tsx","content":"$53","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]