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:T240f,"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 } from "react"; import { Button } from "@/components/primitives/button"; import type { Sx } from "@/lib/constella/styles"; import { typeStyles } from "@/lib/constella/styles"; import { blurs, colors, durations, easings, fontWeights, layers, media, motion, radii, shadows, sizes, space, strokes, } from "@/lib/constella/tokens.stylex"; const dialogSizes = ["sm", "default", "lg", "full"] as const; type DialogSize = (typeof dialogSizes)[number]; type Styled = Omit & { sx?: Sx; }; type DialogPopupProps = Styled & { size?: DialogSize; }; const offstage = ":is([data-starting-style], [data-ending-style])"; const instant = ":is([data-skip-motion])"; const withClose = ":is(:has(> [data-slot='dialog-close-button']) > *)"; const styles = stylex.create({ backdrop: { backdropFilter: `blur(${blurs.backdrop})`, backgroundColor: colors.overlay, insetBlockEnd: 0, insetBlockStart: 0, insetInlineEnd: 0, insetInlineStart: 0, opacity: { default: 1, [offstage]: 0 }, position: "fixed", transitionDuration: { default: durations.dialog, [instant]: 0 }, transitionProperty: "opacity", transitionTimingFunction: easings.out, zIndex: layers.dialog, }, viewport: { alignItems: "center", display: "flex", insetBlockEnd: 0, insetBlockStart: 0, insetInlineEnd: 0, insetInlineStart: 0, justifyContent: "center", paddingBlock: space.md, paddingInlineEnd: space.md, paddingInlineStart: space.md, position: "fixed", zIndex: layers.dialog, }, popup: { backgroundColor: colors.raised, borderStartStartRadius: radii.xl, borderStartEndRadius: radii.xl, borderEndStartRadius: radii.xl, borderEndEndRadius: radii.xl, boxShadow: shadows.xl, color: colors.textPrimary, display: "flex", flexDirection: "column", gap: space.md, maxHeight: "100%", opacity: { default: 1, [offstage]: 0 }, overflowY: { default: "auto", ":has(> [data-slot='dialog-body'])": "hidden", }, paddingBlock: space.md, paddingInlineEnd: space.md, paddingInlineStart: space.md, position: "relative", // A parent steps back while a dialog opened from it sits on top. transform: { default: `translateY(calc(var(--nested-dialogs, 0) * -1 * ${space.sm})) scale(calc(1 - var(--nested-dialogs, 0) * ${motion.stackScale}))`, [offstage]: `scale(${motion.dialogScale})`, }, transitionDuration: { default: durations.dialog, [instant]: 0 }, transitionProperty: { default: "opacity, transform", [media.reducedMotion]: "opacity", }, transitionTimingFunction: easings.out, width: `min(100%, ${sizes.dialog})`, }, sm: { width: `min(100%, ${sizes.dialogSm})` }, lg: { width: `min(100%, ${sizes.dialogLg})` }, // The viewport's padding stays around it, so it still reads as a dialog over the page. full: { height: "100%", width: "100%" }, header: { display: "flex", flexDirection: "column", flexShrink: 0, gap: space.xxs, paddingInlineEnd: { default: null, [withClose]: `calc(${sizes.controlSm} + ${space.xs} - ${space.md})`, }, }, // Bleeds to the popup's edges so the scrollbar sits there, not beside the text. body: { flexGrow: 1, flexShrink: 1, marginInline: `calc(-1 * ${space.md})`, minHeight: 0, overflowY: "auto", paddingInlineEnd: space.md, paddingInlineStart: space.md, }, // A tinted bar set into the popup's bottom edge, so the actions read as their own row. footer: { backgroundColor: colors.fillSubtle, borderTopColor: colors.borderSubtle, borderTopStyle: "solid", borderTopWidth: strokes.border, display: "flex", flexDirection: { default: "column-reverse", [media.sm]: "row" }, flexShrink: 0, gap: space.xs, justifyContent: "flex-end", marginBlockEnd: `calc(-1 * ${space.md})`, // Pinned to the bottom when the popup is taller than its content, as at `full`. marginBlockStart: "auto", marginInline: `calc(-1 * ${space.md})`, paddingBlock: space.md, paddingInlineEnd: space.md, paddingInlineStart: space.md, }, title: { fontWeight: fontWeights.medium, marginBlockEnd: 0, marginBlockStart: 0, marginInline: 0, // A long name or address in the title breaks rather than widening the popup. overflowWrap: "anywhere", textWrap: "balance", }, description: { color: colors.textSecondary, marginBlockEnd: 0, marginBlockStart: 0, marginInline: 0, overflowWrap: "anywhere", textWrap: "pretty", }, closeButton: { insetBlockStart: space.xs, insetInlineEnd: space.xs, position: "absolute", }, }); function Dialog(props: DialogPrimitive.Root.Props) { return ; } function DialogTrigger({ sx, ...props }: Styled) { return ( ); } function DialogPortal({ sx, ...props }: Styled) { return ( ); } function DialogBackdrop({ sx, ...props }: Styled) { return ( ); } function DialogViewport({ sx, ...props }: Styled) { return ( ); } // Shared with Alert Dialog, type included, so the two never drift apart. const dialogStyles = { ...styles, description: [typeStyles.textSm, styles.description], popup: [typeStyles.textSm, styles.popup], title: [typeStyles.textBase, styles.title], }; const sizeStyles = { default: null, full: styles.full, lg: styles.lg, sm: styles.sm, } satisfies Record; function DialogPopup({ size = "default", sx, ...props }: DialogPopupProps) { return ( ); } function DialogContent(props: DialogPopupProps) { return ( ); } function DialogHeader({ sx, ...props }: Styled>) { return (

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

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

); } function DialogTitle({ sx, ...props }: Styled) { return ( ); } function DialogDescription({ sx, ...props }: Styled) { return ( ); } function DialogClose({ sx, ...props }: Styled) { return ( ); } // The styles ride on the Button: it applies its own last, over anything Base UI merges in. function DialogCloseButton({ children, sx, ...props }: Omit, "render">) { return ( } {...props} > {children ?? ( )} ); } export { Dialog, DialogBackdrop, DialogBody, DialogClose, DialogCloseButton, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, dialogSizes, dialogStyles, }; export type { DialogPopupProps, DialogSize }; 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","@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"}]]}]}]]}],["$","$L50",null,{"namespace":"@constella","registryDependencies":["https://constella.aayush.cv/r/base.json","https://constella.aayush.cv/r/button.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/primitives/dialog.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]