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:T177f,"use client"; import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"; import * as stylex from "@stylexjs/stylex"; import type { ComponentProps } from "react"; import { DialogBackdrop, DialogCloseButton, DialogDescription, DialogPortal, DialogTitle, } from "@/components/primitives/dialog"; import type { Sx } from "@/lib/constella/styles"; import { typeStyles } from "@/lib/constella/styles"; import { colors, durations, easings, layers, media, shadows, sizes, space, strokes, } from "@/lib/constella/tokens.stylex"; const sheetSides = ["top", "right", "bottom", "left"] as const; type SheetSide = (typeof sheetSides)[number]; type Styled = Omit & { sx?: Sx; }; type SheetContentProps = Styled & { showCloseButton?: boolean; side?: SheetSide; }; const offstage = ":is([data-starting-style], [data-ending-style])"; const withClose = ":is(:has(> [data-slot='dialog-close-button']) > *)"; const styles = stylex.create({ // Slides the whole way in from its edge and back out the same way. popup: { backgroundColor: colors.raised, boxShadow: shadows.xl, color: colors.textPrimary, display: "flex", flexDirection: "column", opacity: { default: 1, [media.reducedMotion]: { default: 1, [offstage]: 0 }, }, overflowY: { default: "auto", ":has(> [data-slot='sheet-body'])": "hidden", }, position: "fixed", transitionDuration: { default: durations.layout, ":is([data-ending-style])": durations.dialog, }, transitionProperty: { default: "transform", [media.reducedMotion]: "opacity", }, transitionTimingFunction: easings.layout, zIndex: layers.dialog, }, // Sides are physical, like the slide that brings them in. right: { height: "100%", insetBlockEnd: 0, insetBlockStart: 0, right: 0, transform: { default: "none", [offstage]: { default: "translateX(100%)", [media.reducedMotion]: "none", }, }, width: `min(75%, ${sizes.dialog})`, }, left: { height: "100%", insetBlockEnd: 0, insetBlockStart: 0, left: 0, transform: { default: "none", [offstage]: { default: "translateX(-100%)", [media.reducedMotion]: "none", }, }, width: `min(75%, ${sizes.dialog})`, }, top: { insetBlockStart: 0, insetInlineEnd: 0, insetInlineStart: 0, transform: { default: "none", [offstage]: { default: "translateY(-100%)", [media.reducedMotion]: "none", }, }, }, bottom: { insetBlockEnd: 0, insetInlineEnd: 0, insetInlineStart: 0, transform: { default: "none", [offstage]: { default: "translateY(100%)", [media.reducedMotion]: "none", }, }, }, header: { display: "flex", flexDirection: "column", flexShrink: 0, gap: space.xxs, paddingBlockEnd: space.md, paddingBlockStart: space.md, paddingInlineEnd: { default: space.md, [withClose]: `calc(${sizes.controlSm} + ${space.xs})`, }, paddingInlineStart: space.md, }, body: { flexGrow: 1, minHeight: 0, overflowY: "auto", paddingInlineEnd: space.md, paddingInlineStart: space.md, }, // The dialog's footer bar, pinned to the bottom. footer: { backgroundColor: colors.fillSubtle, borderBlockStartColor: colors.borderSubtle, borderBlockStartStyle: "solid", borderBlockStartWidth: strokes.border, display: "flex", flexDirection: "column", flexShrink: 0, gap: space.xs, marginBlockStart: "auto", paddingBlockEnd: space.md, paddingBlockStart: space.md, paddingInlineEnd: space.md, paddingInlineStart: space.md, }, }); function Sheet(props: SheetPrimitive.Root.Props) { return ; } function SheetTrigger({ sx, ...props }: Styled) { return ( ); } function SheetClose({ sx, ...props }: Styled) { return ( ); } /** Renders the portal, backdrop and popup at the `side` edge, with a close button unless `showCloseButton={false}`. */ function SheetContent({ children, showCloseButton = true, side = "right", sx, ...props }: SheetContentProps) { return ( {children} {showCloseButton && } ); } function SheetHeader({ sx, ...props }: Styled>) { return (

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

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

); } function SheetTitle(props: ComponentProps) { return ; } function SheetDescription(props: ComponentProps) { return ; } export { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, sheetSides, SheetTitle, SheetTrigger, }; export type { SheetContentProps, SheetSide }; 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":[["$","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","@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"}]]}]}]]}],["$","$L50",null,{"namespace":"@constella","registryDependencies":["https://constella.aayush.cv/r/base.json","https://constella.aayush.cv/r/dialog.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/primitives/sheet.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]