import { DefaultChild } from "@brevity-builder/models"; export default { name: "Tabs", acceptsChildren: false, category: "Container", optionalLayers: [ { id: "TabsList", name: "Tabs List", acceptsChildren: true, props: [], defaultStyles: { "": { display: "flex", position: "relative", isolation: "isolate", "align-items": "center", "justify-content": "flex-start", width: "fit-content", }, '[data-variant="enclosed"]': { "border-radius": "var(--theme-radii-md)", "background-color": "var(--theme-bg-muted)", "padding-left": "4px", "padding-right": "4px", "padding-top": "4px", "padding-bottom": "4px", "min-height": "calc(var(--tabs-height) - 4px)", }, '[data-variant="line"]': { width: "100%", "border-color": "var(--theme-border-default)", "border-bottom-width": "1px", }, '[data-variant="outline"]': { "border-color": "var(--theme-border-default)", }, '[data-variant="outline"]::before': { content: "''", position: "absolute", bottom: "0px", width: "100%", "border-bottom-width": "1px", "border-bottom-color": "var(--theme-border-default)", }, }, }, { id: "TabsTrigger", name: "Tabs Trigger", acceptsChildren: true, props: [ { label: "Value", name: "value", type: { kind: "text", isDynamic: true }, default: null, required: true, placeholder: "", help: "The value of the trigger", }, { label: "Is disabled", name: "disabled", type: { kind: "boolean", isDynamic: true }, default: false, placeholder: "", help: "Whether the tab is disabled", }, ], additionalStates: [ { label: "Tab is active", value: "[data-state='active']", }, ], defaultStyles: { ":disabled": { opacity: 0.4, cursor: "not-allowed", "pointer-events": "none", }, ":focus-visible": { outline: "none", "box-shadow": "rgb(49, 130, 206) 0px 0px 0px 1px", }, "": { cursor: "pointer", display: "flex", "justify-content": "center", "white-space": "nowrap", "padding-right": "12px", "padding-left": "12px", "padding-top": "6px", "padding-bottom": "6px", "font-size": "1rem", "font-weight": "var(--theme-fontWeights-medium)", "align-items": "center", "background-color": "transparent", }, '[data-variant="enclosed"]': { "justify-content": "center", color: "var(--theme-fg-muted)", "border-radius": "var(--theme-radii-base)", }, '[data-variant="enclosed"][data-state="active"]': { "background-color": "var(--theme-bg-default)", color: "var(--palette-fg)", "box-shadow": "var(--theme-shadows-sm)", }, '[data-variant="line"]': { color: "var(--theme-fg-muted)", }, '[data-variant="line"][data-state="active"]': { color: "var(--theme-fg-default)", position: "relative", }, '[data-variant="line"][data-state="active"]::before': { content: "''", position: "absolute", bottom: "-1px", "inset-inline": "0", height: "2px", background: "var(--palette-solid)", }, '[data-variant="subtle"]': { "border-radius": "var(--theme-radii-base)", color: "var(--theme-fg-muted)", }, '[data-variant="subtle"][data-state="active"]': { "background-color": "var(--palette-subtle)", color: "var(--palette-fg)", }, '[data-variant="outline"]': { color: "var(--theme-fg-muted)", isolation: "isolate", "border-width": "1px", "border-color": "transparent", "border-top-left-radius": "var(--theme-radii-md)", "border-top-right-radius": "var(--theme-radii-md)", "margin-bottom": "-1px", }, '[data-variant="outline"][data-state="active"]': { "background-color": "var(--theme-bg-default)", color: "var(--palette-fg)", "border-color": "var(--theme-border-default)", "border-bottom-color": "transparent", }, '[data-variant="outline"]:not(:last-child)': { "margin-right": "-1px", }, }, }, { id: "TabsContent", name: "Tabs Content", acceptsChildren: true, props: [ { label: "Value", name: "value", type: { kind: "text", isDynamic: true }, default: null, required: true, placeholder: "", help: "The value of the content", }, ], defaultStyles: { ":focus-visible": { outline: "none", "box-shadow": "var(--palette-ring) 0px 0px 0px 1px", }, "": { "margin-top": "8px", }, }, }, ], props: [ { label: "Initial Value", name: "defaultValue", type: { kind: "text", isDynamic: true }, default: null, required: true, placeholder: "", help: "The initial value of the tabs", }, ], styleProps: [ { label: "Variant", name: "variant", type: { kind: "select" }, options: [ { label: "Enclosed", value: "enclosed", selector: '[data-variant="enclosed"]', styles: {}, }, { label: "Line", value: "line", selector: '[data-variant="line"]', styles: {}, }, { label: "Subtle", value: "subtle", selector: '[data-variant="subtle"]', styles: {}, }, { label: "Outline", value: "outline", selector: '[data-variant="outline"]', styles: {}, }, ], default: "enclosed", }, { label: "Size", name: "size", type: { kind: "select" }, options: [ { label: "sm", value: "sm", selector: ' [data-size="sm"]', styles: { '[data-tabs="list"]': { "min-height": "36px", }, '[data-variant="enclosed"][data-tabs="list"]': { "min-height": "36px", }, '[data-variant="enclosed"][data-tabs="trigger"]': { height: "28px", "min-width": "28px", }, '[data-tabs="trigger"]': { height: "36px", "min-width": "36px", "padding-top": "4px", "padding-bottom": "4px", "padding-left": "12px", "padding-right": "12px", "font-size": "var(--theme-fontSizes-sm)", "line-height": "1.25rem", }, }, }, { label: "md", value: "md", selector: ' [data-size="md"]', styles: { '[data-tabs="list"]': { "min-height": "40px", }, '[data-variant="enclosed"][data-tabs="list"]': { "min-height": "40px", }, '[data-variant="enclosed"][data-tabs="trigger"]': { height: "32px", "min-width": "32px", }, '[data-tabs="trigger"]': { height: "40px", "min-width": "40px", "padding-top": "8px", "padding-bottom": "8px", "padding-left": "16px", "padding-right": "16px", "font-size": "var(--theme-fontSizes-sm)", "line-height": "1.25rem", }, }, }, { label: "lg", value: "lg", selector: ' [data-size="lg"]', styles: { '[data-tabs="list"]': { "min-height": "44px", }, '[data-variant="enclosed"][data-tabs="list"]': { "min-height": "44px", }, '[data-variant="enclosed"][data-tabs="trigger"]': { height: "36px", "min-width": "36px", }, '[data-tabs="trigger"]': { height: "44px", "min-width": "44px", "padding-top": "8px", "padding-bottom": "8px", "padding-left": "18px", "padding-right": "18px", "font-size": "var(--theme-fontSizes-md)", "line-height": "1.5rem", }, }, }, ], default: "md", help: 'The size of the avatr. "md" is the default size', }, { label: "Color Palette", name: "data-palette", type: { kind: "palette" }, default: "brand", help: "The color scheme of the button", }, ], events: [], defaultStyles: { "": { display: "flex", "flex-direction": "column", position: "relative", }, }, sources: [ { id: "value", name: "{{= it.component.name }}'s current value", provider: "StateProvider", description: "The value of the active tab", template: "$get('{{= it.component.id}}', { value: {{= it.stringify(it.component.props.defaultValue) }} ?? '' }).value", instanceTemplate: `{{= it.component.name }}'s current value`, outputType: { kind: "text", }, }, ], actions: [], defaultChildren: [ { kind: "Tabs$Brevity.TabsList", props: {}, styleProps: {}, children: [ { kind: "Tabs$Brevity.TabsTrigger", props: { value: "a", }, styleProps: {}, children: [ { kind: "Text$Brevity", props: { value: "Tab 1", }, styleProps: { size: "inherit", variant: "inherit", }, children: [], }, ], }, { kind: "Tabs$Brevity.TabsTrigger", props: { value: "b", }, styleProps: {}, children: [ { kind: "Text$Brevity", props: { value: "Tab 2", }, styleProps: { size: "inherit", variant: "inherit", }, children: [], }, ], }, ], }, { kind: "Tabs$Brevity.TabsContent", props: { value: "a", }, styleProps: {}, children: [], }, { kind: "Tabs$Brevity.TabsContent", props: { value: "b", }, styleProps: {}, children: [], }, ] satisfies DefaultChild[], };