import { DefaultChild } from "@brevity-builder/models"; export default { name: "Dialog", acceptsChildren: false, category: "Container", optionalLayers: [ { id: "DialogTrigger", name: "Dialog Trigger", acceptsChildren: true, props: [], defaultStyles: { "": {}, }, }, { id: "DialogContent", name: "Dialog Content", acceptsChildren: true, styleProps: [ { label: "Size", name: "size", type: { kind: "select" }, options: [ { label: "xs", value: "xs", selector: '[data-size="xs"]', styles: { "": { "max-width": "var(--theme-sizes-sm)", }, }, }, { label: "sm", value: "sm", selector: '[data-size="sm"]', styles: { "": { "max-width": "var(--theme-sizes-md)", }, }, }, { label: "md", value: "md", selector: '[data-size="md"]', styles: { "": { "max-width": "var(--theme-sizes-lg)", }, }, }, { label: "lg", value: "lg", selector: '[data-size="lg"]', styles: { "": { "max-width": "var(--theme-sizes-2xl)", }, }, }, { label: "xl", value: "xl", selector: '[data-size="xl"]', styles: { "": { "max-width": "var(--theme-sizes-4xl)", }, }, }, { label: "full", value: "full", selector: '[data-size="full"]', styles: { "": { "max-width": "var(--theme-sizes-full)", "min-height": "var(--theme-sizes-screen-h)", "border-radius": "0px", }, }, }, ], default: "md", help: 'Whether the button is in a "loading" state', }, ], props: [ { label: "Auto Focus", name: "autoFocus", type: { kind: "boolean" }, default: true, required: false, placeholder: "", help: "Should the dialog manage focus for user?", }, ], defaultStyles: { "--bp-all": { ":focus-visible": { outline: "none", }, "": { position: "fixed", top: "50%", left: "50%", "z-index": "var(--theme-zIndices-modal)", transform: "translate(-50%, -50%)", display: "grid", width: "100%", "max-height": "85vh", gap: "16px", "border-width": "1px", "background-color": "var(--theme-bg-panel)", "padding-top": "24px", "padding-bottom": "24px", "padding-left": "24px", "padding-right": "24px", "border-radius": "var(--theme-radii-lg)", "box-shadow": "var(--theme-shadows-lg)", "animation-duration": "200ms", }, }, "--bp-sm": { "": { "border-radius": "0px", }, }, }, optionalLayers: [ { id: "DialogClose", name: "Dialog Close", acceptsChildren: true, props: [ { label: "asChild", name: "asChild", type: { kind: "boolean" }, default: false, placeholder: "", help: "Whether the button should be rendered as it's child", }, ], defaultStyles: { "": {}, }, events: [ { label: "When clicked", name: "onClick", help: "Select an action to run when button is clicked", isDefault: true, }, ], }, { id: "DialogHeader", name: "Dialog Header", acceptsChildren: true, props: [], defaultStyles: { "--bp-all": { "": { display: "flex", "flex-direction": "column", gap: "6px", "text-align": "center", }, }, "--bp-sm": { "": { "text-align": "left", }, }, }, }, { id: "DialogFooter", name: "Dialog Footer", acceptsChildren: true, props: [], defaultStyles: { "--bp-all": { "": { display: "flex", "flex-direction": "row", "justify-content": "flex-end", gap: "8px", }, }, "--bp-sm": { "": { "flex-direction": "column-reverse", "justify-content": "flex-start", }, }, }, }, { id: "DialogTitle", name: "Dialog Title", acceptsChildren: true, props: [], defaultStyles: { "--bp-all": { "": { "font-size": "var(--theme-fontSizes-lg)", "font-weight": "var(--theme-fontWeights-semibold)", "line-height": "var(--theme-lineHeights-none)", "letter-spacing": "var(--theme-letterSpacings-tight)", }, }, }, }, { id: "DialogDescription", name: "Dialog Description", acceptsChildren: true, props: [], defaultStyles: { "--bp-all": { "": { "font-size": "var(--theme-fontSizes-sm)", color: "var(--theme-fg-muted)", }, }, }, }, ], }, ], props: [ { label: "Modal", name: "modal", type: { kind: "boolean" }, default: true, required: false, placeholder: "", help: "Should the dialog be modal?", }, ], events: [ { label: "When open change", name: "onOpenChange", help: "Select an action to run when component is toggled", isDefault: false, additionalSources: [ { id: "$$isOpen", name: "Is Open", description: "Whether the component is open or not", template: "$$isOpen", instanceTemplate: `Is Open`, outputType: { kind: "boolean" }, }, ], }, ], defaultStyles: { "": { "background-color": "rgba(0, 0, 0, 0.8)", position: "fixed", left: 0, top: 0, width: "100vw", height: "100dvh", "z-index": "var(--theme-zIndices-modal)", }, }, sources: [ { id: "isOpen", name: "{{= it.component.name }}'s popover is open", provider: "StateProvider", description: "Whether the popover is open or not", template: "$get($$getKey('{{= it.component.id}}'{{? it.hasIndex?.(it.data) }}, {{= it.findIndexes(it.data) }}{{?}}), { isOpen: false }).isOpen", instanceTemplate: `{{= it.component.name }}'s is open`, outputType: { kind: "boolean" }, }, ], actions: [ { id: "open", availableInCanvas: true, name: `Open "{{= it.component.name }}" popover`, provider: "StateProvider", description: "Open the popover", async: false, template: // eslint-disable-next-line no-template-curly-in-string "$set('{{= it.component.id }}', { isOpen: true }, 'Open'{{? it.hasIndex?.(it.data) }}, {{= it.findIndexes(it.data) }}{{?}});", instanceTemplate: `Open "{{= it.component.name }}"`, props: [], }, { id: "close", availableInCanvas: true, name: `Close "{{= it.component.name }}" popover`, provider: "StateProvider", description: "Close the popover", async: false, template: // eslint-disable-next-line no-template-curly-in-string "$set('{{= it.component.id }}', { isOpen: false }, 'Close'{{? it.hasIndex?.(it.data) }}, {{= it.findIndexes(it.data) }}{{?}});", instanceTemplate: `Close "{{= it.component.name }}"`, props: [], }, ], defaultChildren: [ { kind: "Dialog$Brevity.DialogTrigger", props: {}, styleProps: {}, children: [ { kind: "Button$Brevity", props: {}, styleProps: { variant: "subtle", size: "md", "data-palette": "neutral", }, children: [ { kind: "Text$Brevity", props: { value: "Open", }, styleProps: {}, children: [], }, ], }, ], }, { kind: "Dialog$Brevity.DialogContent", props: {}, styleProps: { size: "md", }, children: [ { kind: "Dialog$Brevity.DialogContent.DialogHeader", props: {}, styleProps: {}, children: [ { kind: "Dialog$Brevity.DialogContent.DialogTitle", props: {}, styleProps: {}, children: [ { kind: "Text$Brevity", props: { value: "Dialog Title", }, styleProps: {}, children: [], }, ], }, { kind: "Dialog$Brevity.DialogContent.DialogDescription", props: {}, styleProps: {}, children: [ { kind: "Text$Brevity", props: { value: "Dialog Description", }, styleProps: {}, children: [], }, ], }, ], }, { kind: "Container$Brevity", props: {}, styleProps: {}, children: [], }, { kind: "Dialog$Brevity.DialogContent.DialogFooter", props: {}, styleProps: {}, children: [ { kind: "Dialog$Brevity.DialogContent.DialogClose", props: {}, styleProps: {}, children: [ { kind: "Button$Brevity", props: {}, styleProps: { variant: "subtle", size: "md", "data-palette": "neutral", }, children: [ { kind: "Text$Brevity", props: { value: "Close", }, styleProps: {}, children: [], }, ], }, ], }, { kind: "Button$Brevity", props: {}, styleProps: { variant: "solid", size: "md", "data-palette": "brand", }, children: [ { kind: "Text$Brevity", props: { value: "Save", }, styleProps: {}, children: [], }, ], }, ], }, ], }, ] satisfies DefaultChild[], } as const;