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:T130b,"use client"; import * as stylex from "@stylexjs/stylex"; import type { ComponentProps, ReactNode } from "react"; import { Dialog, DialogCloseButton, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "@/components/primitives/dialog"; import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarProvider, } from "@/components/primitives/sidebar"; import type { Sx } from "@/lib/constella/styles"; import { typeStyles } from "@/lib/constella/styles"; import { media, sizes, space } from "@/lib/constella/tokens.stylex"; type Styled = Omit & { sx?: Sx; }; const styles = stylex.create({ // Narrow, the nav stacks above the page. popup: { flexDirection: { default: "column", [media.sm]: "row" }, gap: 0, height: sizes.settingsDialogHeight, overflowX: "hidden", overflowY: "hidden", paddingBlockEnd: 0, paddingBlockStart: 0, paddingInlineEnd: 0, paddingInlineStart: 0, width: `min(100%, ${sizes.settingsDialog})`, }, // The provider fills the window beside an app; here it only holds the nav. provider: { flexShrink: 0, minHeight: 0, width: "auto", }, // Stacked, the nav runs under the close button, so its rows end before it. nav: { height: { default: "auto", [media.sm]: "100%" }, paddingInlineEnd: { default: `calc(${sizes.controlSm} + ${space.xs})`, [media.sm]: 0, }, width: { default: "100%", [media.sm]: sizes.sidebar }, }, // Inside the scroller, so the first row's focus ring isn't clipped. navContent: { paddingBlockStart: space.md, }, // The one pane that scrolls on its own: the page behind a dialog can't. page: { display: "flex", flexDirection: "column", flexGrow: 1, gap: space.md, minHeight: 0, minWidth: 0, overflowY: "auto", paddingBlockEnd: space.lg, paddingBlockStart: space.lg, paddingInlineEnd: space.lg, paddingInlineStart: space.lg, }, // Beside the nav, the close button drops to the page's padding, onto its title line. close: { insetBlockStart: { default: space.xs, [media.sm]: space.lg }, insetInlineEnd: { default: space.xs, [media.sm]: space.lg }, }, // Ends its controls clear of the close button on the same line. header: { paddingInlineEnd: { default: `calc(${sizes.controlSm} + ${space.xs} * 2 - ${space.lg})`, [media.sm]: `calc(${sizes.controlSm} + ${space.lg})`, }, }, titleLine: { alignItems: "center", display: "flex", gap: space.sm, minHeight: sizes.controlSm, }, title: { flexGrow: 1, minWidth: 0, }, description: { textWrap: "balance", }, }); /** A dialog laid out as a nav beside a page, with a close button in its corner. */ function SettingsDialog({ children, sx, ...props }: Omit, "children"> & { children?: ReactNode; sx?: Sx; }) { return ( ); } /** Holds a `SidebarMenuItem` per page, under an optional group `title`. */ function SettingsDialogNav({ children, label, sx, title, ...props }: Styled, "ref" | "title">> & { label: string; title?: ReactNode; }) { return ( {title === undefined ? null : ( {title} )} ); } function SettingsDialogPage({ action, children, description, leading, sx, title, ...props }: Styled, "title">> & { action?: ReactNode; description?: ReactNode; leading?: ReactNode; title: ReactNode; }) { return (

{leading} {title} {action}

{description === undefined ? null : ( {description} )} {children}

); } export { SettingsDialog, SettingsDialogNav, SettingsDialogPage }; 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","@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"}]]}]}]]}],["$","$L52",null,{"namespace":"@constella","registryDependencies":["https://constella.aayush.cv/r/base.json","https://constella.aayush.cv/r/dialog.json","https://constella.aayush.cv/r/sidebar.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"src/components/primitives/settings-dialog.tsx","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]