import { DefaultChild } from "@brevity-builder/models"; export default { name: "Sheet", acceptsChildren: false, category: "Container", optionalLayers: [ { id: "SheetTrigger", name: "Sheet Trigger", acceptsChildren: true, props: [], defaultStyles: { "": {}, }, }, { id: "SheetContent", name: "Sheet Content", acceptsChildren: true, styleProps: [ { label: "Side", name: "side", type: { kind: "select" }, options: [ { label: "right", value: "right", selector: '[data-side="right"]', styles: { "": { top: "0", bottom: "0", right: "0", height: "100%", width: "75%", "max-width": "384px", "border-left-width": "1px", "border-left-style": "solid", }, }, }, { label: "left", value: "left", selector: '[data-side="left"]', styles: { "": { top: "0", bottom: "0", left: "0", height: "100%", width: "75%", "max-width": "384px", "border-right-width": "1px", "border-right-style": "solid", }, }, }, { label: "top", value: "top", selector: '[data-side="top"]', styles: { "": { position: "absolute", top: "0", left: "0", right: "0", height: "auto", "border-bottom-width": "1px", "border-bottom-style": "solid", }, }, }, { label: "bottom", value: "bottom", selector: '[data-side="bottom"]', styles: { "": { position: "absolute", bottom: "0", left: "0", right: "0", height: "auto", "border-top-width": "1px", "border-top-style": "solid", }, }, }, ], default: "right", help: "Which side of the screen should the sheet be positioned on?", }, ], 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", }, "": { "background-color": "var(--theme-bg-panel)", position: "fixed", "z-index": "var(--theme-zIndices-modal)", display: "flex", "flex-direction": "column", gap: "16px", "box-shadow": "var(--theme-shadows-lg)", }, }, "--bp-sm": { "": { "border-radius": "0px", }, }, }, optionalLayers: [ { id: "SheetClose", name: "Sheet 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: "SheetHeader", name: "Sheet Header", acceptsChildren: true, props: [], defaultStyles: { "--bp-all": { "": { display: "flex", "flex-direction": "column", "padding-left": "16px", "padding-right": "16px", "padding-top": "16px", "padding-bottom": "16px", gap: "6px", }, }, "--bp-sm": { "": { "text-align": "left", }, }, }, }, { id: "SheetFooter", name: "Sheet Footer", acceptsChildren: true, props: [], defaultStyles: { "--bp-all": { "": { display: "flex", "margin-top": "auto", "flex-direction": "row", "justify-content": "flex-end", gap: "8px", "padding-left": "16px", "padding-right": "16px", "padding-top": "16px", "padding-bottom": "16px", }, }, "--bp-sm": { "": { "flex-direction": "column-reverse", "justify-content": "flex-start", }, }, }, }, { id: "SheetTitle", name: "Sheet 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: "SheetDescription", name: "Sheet 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: "Sheet$Brevity.SheetTrigger", 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: "Sheet$Brevity.SheetContent", props: {}, styleProps: { size: "md", }, children: [ { kind: "Sheet$Brevity.SheetContent.SheetHeader", props: {}, styleProps: {}, children: [ { kind: "Sheet$Brevity.SheetContent.SheetTitle", props: {}, styleProps: {}, children: [ { kind: "Text$Brevity", props: { value: "Sheet Title", }, styleProps: {}, children: [], }, ], }, { kind: "Sheet$Brevity.SheetContent.SheetDescription", props: {}, styleProps: {}, children: [ { kind: "Text$Brevity", props: { value: "Sheet Description", }, styleProps: {}, children: [], }, ], }, ], }, { kind: "Container$Brevity", props: {}, styleProps: {}, children: [], }, { kind: "Sheet$Brevity.SheetContent.SheetFooter", props: {}, styleProps: {}, children: [ { kind: "Sheet$Brevity.SheetContent.SheetClose", 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;