import { DefaultChild } from "@brevity-builder/models";
import InternalLink from "./InternalLink";

export default {
  name: "Sidebar",
  acceptsChildren: true,
  category: "Container",
  optionalLayers: [
    {
      id: "Sidebar",
      name: "Sidebar",
      acceptsChildren: true,
      additionalStates: [
        {
          label: "Is expanded",
          value: '[data-state="expanded"]',
        },
        {
          label: "Is collapsed",
          value: '[data-state="collapsed"]',
        },
        {
          label: "Is collapsed to icon",
          value: '[data-collapsible="icon"]',
        },
      ],
      optionalLayers: [
        {
          id: "Header",
          name: "Header",
          acceptsChildren: true,
          props: [],
          defaultStyles: {
            "": {
              display: "flex",
              "flex-direction": "column",
              gap: "8px",
              "padding-top": "8px",
              "padding-bottom": "8px",
              "padding-right": "8px",
              "padding-left": "8px",
            },
          },
        },
        {
          id: "Footer",
          name: "Footer",
          acceptsChildren: true,
          props: [],
          defaultStyles: {
            "": {
              display: "flex",
              "flex-direction": "column",
              gap: "8px",
              "padding-top": "8px",
              "padding-bottom": "8px",
              "padding-right": "8px",
              "padding-left": "8px",
            },
          },
        },
        {
          id: "Separator",
          name: "Separator",
          acceptsChildren: false,
          props: [],
          defaultStyles: {
            "": {
              height: "1px",
              "margin-left": "8px",
              "margin-right": "8px",
              width: "auto",
              "flex-shrink": "0",
              "background-color": "var(--theme-border-default)",
            },
          },
        },
        {
          id: "Content",
          name: "Content",
          acceptsChildren: true,
          props: [],
          defaultStyles: {
            "": {
              display: "flex",
              "min-height": "0",
              "flex-grow": "1",
              "flex-shrink": "1",
              "flex-basis": "0%",
              "flex-direction": "column",
              gap: "8px",
              overflow: "auto",
            },
            '[data-collapsible="icon"] &': {
              overflow: "hidden",
            },
          },
        },
        {
          id: "Group",
          name: "Group",
          acceptsChildren: true,
          props: [],
          defaultChildren: [
            {
              kind: "Sidebar$Brevity.Sidebar.Group.GroupLabel",
              props: {},
              styleProps: {},
              children: [
                {
                  kind: "Text$Brevity",
                  props: {
                    value: "Group Label",
                  },
                  styleProps: {
                    size: "inherit",
                  },
                  children: [],
                },
              ],
            },
            {
              kind: "Sidebar$Brevity.Sidebar.Group.GroupContent",
              props: {},
              styleProps: {},
              children: [],
            },
          ],
          optionalLayers: [
            {
              id: "GroupLabel",
              name: "Group Label",
              acceptsChildren: true,
              props: [],
              defaultStyles: {
                ":focus-visible": {
                  "box-shadow": "var(--theme-shadows-outline)",
                },
                "": {
                  display: "flex",
                  height: "32px",
                  "flex-shrink": "0",
                  "border-radius": "var(--theme-radii-md)",
                  "align-items": "center",
                  "font-size": "var(--theme-font-sizes-sm)",
                  "font-weight": "var(--theme-font-weights-semibold)",
                  "line-height": "var(--theme-line-heights-sm)",
                  "letter-spacing": "var(--theme-letter-spacings-sm)",
                  "text-transform": "uppercase",
                  color: "var(--theme-fg-muted)",
                  "padding-left": "8px",
                  "padding-right": "8px",
                  outline: "none",
                },
                '[data-collapsible="icon"] &': {
                  "margin-top": "-2rem",
                  opacity: "0",
                },
                " > svg": {
                  width: "16px",
                  height: "16px",
                  "flex-shrink": "0",
                },
              },
            },
            {
              id: "GroupAction",
              name: "Group Action",
              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: {
                "--bp-md": {
                  "::after": {
                    display: "none",
                  },
                },
                "--bp-all": {
                  // Increases the hit area of the button on mobile.
                  "::after": {
                    content: '""',
                    position: "absolute",
                    top: "-8px",
                    right: "-8px",
                    bottom: "-8px",
                    left: "-8px",
                  },
                  ":hover": {
                    "background-color": "var(--theme-brand-neutral-muted)",
                    color: "var(--theme-brand-neutral-fg)",
                  },
                  ":focus-visible": {
                    "box-shadow": "var(--theme-shadows-outline)",
                  },
                  "": {
                    position: "absolute",
                    right: "12px",
                    top: "14px",
                    display: "flex",
                    width: "20px",
                    height: "20px",
                    "align-items": "center",
                    "justify-content": "center",
                    "padding-left": "0",
                    "padding-top": "0",
                    "padding-right": "0",
                    "padding-bottom": "0",
                    color: "var(--theme-fg-default)",
                    outline: "none",
                    "border-radius": "var(--theme-radii-md)",
                  },
                  '[data-collapsible="icon"] &': {
                    display: "none",
                  },
                  " > svg": {
                    width: "16px",
                    height: "16px",
                    "flex-shrink": "0",
                  },
                },
              },
            },
            {
              id: "GroupContent",
              name: "Group Content",
              acceptsChildren: true,
              props: [],
              defaultStyles: {
                "": {
                  width: "100%",
                  "font-size": "var(--theme-fontSizes-sm)",
                },
              },
            },
          ],
          defaultStyles: {
            "": {
              position: "relative",
              display: "flex",
              width: "100%",
              "min-width": "0",
              "flex-direction": "column",
              "padding-top": "8px",
              "padding-bottom": "8px",
              "padding-right": "8px",
              "padding-left": "8px",
            },
          },
        },
        {
          id: "Menu",
          name: "Menu",
          acceptsChildren: true,
          props: [],
          defaultChildren: [
            {
              kind: "Sidebar$Brevity.Sidebar.Menu.MenuItem",
              props: {},
              styleProps: {},
              children: [
                {
                  kind: "Sidebar$Brevity.Sidebar.Menu.MenuItem.MenuButton",
                  props: {
                    tooltip: "",
                  },
                  styleProps: {},
                  children: [
                    {
                      kind: "Icon$Brevity",
                      props: {
                        children: {
                          __type: "icon",
                          icon: "draft",
                          pack: "materialsymbolsoutlined",
                        },
                      },
                      styleProps: {},
                      children: [],
                    },
                    {
                      kind: "Text$Brevity",
                      props: {
                        value: "Menu Item",
                      },
                      styleProps: {
                        size: "inherit",
                      },
                      children: [],
                    },
                  ],
                },
              ],
            },
          ],
          optionalLayers: [
            {
              id: "MenuItem",
              name: "Menu Item",
              acceptsChildren: true,
              props: [],
              defaultChildren: [
                {
                  kind: "Sidebar$Brevity.Sidebar.Menu.MenuItem.MenuButton",
                  props: {
                    tooltip: "",
                  },
                  styleProps: {},
                  children: [
                    {
                      kind: "Icon$Brevity",
                      props: {
                        children: {
                          __type: "icon",
                          icon: "draft",
                          pack: "materialsymbolsoutlined",
                        },
                      },
                      styleProps: {},
                      children: [],
                    },
                    {
                      kind: "Text$Brevity",
                      props: {
                        value: "Menu Item",
                      },
                      styleProps: {
                        size: "inherit",
                      },
                      children: [],
                    },
                  ],
                },
              ],
              optionalLayers: [
                {
                  id: "MenuLink",
                  name: "Menu Link",
                  acceptsChildren: true,
                  props: [
                    ...InternalLink.props,
                    {
                      label: "Tooltip",
                      name: "tooltip",
                      type: { kind: "text", isDynamic: true },
                      required: false,
                      isDefault: true,
                      default: null,
                      placeholder: "Optional tooltip",
                      help: "Optional tooltip",
                    },
                  ],
                  additionalStates: InternalLink.additionalStates,
                  events: InternalLink.events,
                  styleProps: [
                    {
                      label: "Variant",
                      name: "variant",
                      type: { kind: "select" },
                      options: [
                        {
                          label: "Solid",
                          value: "solid",
                          selector: '._active[data-variant="solid"]',
                          styles: {
                            "": {
                              "background-color": "var(--palette-solid)",
                              color: "var(--palette-contrast)",
                            },
                            " svg": {
                              color: "var(--palette-contrast)",
                            },
                            ":hover": {
                              "background-color": "var(--palette-solid)",
                            },
                          },
                        },
                        {
                          label: "Subtle",
                          value: "subtle",
                          selector: '._active[data-variant="subtle"]',
                          styles: {
                            "": {
                              "background-color": {
                                __type: "color",
                                color: "var(--palette-muted)",
                                opacity: 65,
                              },
                            },
                            " svg": {
                              color: "var(--palette-fg)",
                            },
                            ":hover": {
                              "background-color": {
                                __type: "color",
                                color: "var(--palette-muted)",
                                opacity: 65,
                              },
                            },
                          },
                        },
                        {
                          label: "Outline",
                          value: "outline",
                          selector: '._active[data-variant="outline"]',
                          styles: {
                            "": {
                              "background-color": "transparent",
                              "border-width": "1px",
                              "border-color":
                                "var(--theme-brand-neutral-muted)",
                            },
                            " svg": {
                              color: "var(--palette-fg)",
                            },
                            ":hover": {
                              "background-color": "transparent",
                            },
                          },
                        },
                        {
                          label: "Elevated",
                          value: "elevated",
                          selector: '._active[data-variant="elevated"]',
                          styles: {
                            "": {
                              "border-width": "1px",
                              "border-color":
                                "var(--theme-brand-neutral-muted)",
                              "background-color": "var(--theme-bg-default)",
                              "box-shadow": "var(--theme-shadows-sm)",
                            },
                            " svg": {
                              color: "var(--palette-fg)",
                            },
                            ":hover": {
                              "background-color": "var(--theme-bg-default)",
                            },
                          },
                        },
                      ],
                      default: "subtle",
                    },
                    {
                      label: "Color Palette",
                      name: "data-palette",
                      type: { kind: "palette" },
                      default: "neutral",
                      help: "The color scheme of the button",
                    },
                  ],
                  defaultStyles: {
                    ":hover": {
                      "background-color": "var(--theme-brand-neutral-muted)",
                      color: "var(--theme-brand-neutral-fg)",
                    },
                    ":focus-visible": {
                      "box-shadow": "var(--theme-shadows-outline)",
                    },
                    ":disabled": {
                      "pointer-events": "none",
                      opacity: 0.5,
                    },
                    "._active": {
                      "background-color": "var(--theme-brand-brand-solid)",
                      color: "var(--theme-brand-brand-contrast)",
                    },
                    " > span": {
                      "line-height": "1",
                      overflow: "hidden",
                      "white-space": "nowrap",
                    },
                    " > span:last-child": {
                      "text-overflow": "ellipsis",
                      overflow: "hidden",
                      "white-space": "nowrap",
                    },
                    " > svg": {
                      color: "var(--theme-fg-muted)",
                      width: "16px",
                      height: "16px",
                      "flex-shrink": "0",
                    },
                    '[data-sidebar="menuitem"]:has([data-sidebar="menu-action"]) &':
                      {
                        "padding-right": "32px",
                      },
                    "": {
                      color: "var(--theme-fg-default)",
                      "font-weight": "var(--theme-fontWeights-medium)",
                      display: "flex",
                      width: "100%",
                      "align-items": "center",
                      gap: "8px",
                      overflow: "hidden",
                      "border-width": "1px",
                      "border-color": "transparent",
                      "border-radius": "var(--theme-radii-md)",
                      "padding-left": "8px",
                      "padding-right": "8px",
                      "padding-top": "8px",
                      "padding-bottom": "8px",
                      "text-align": "left",
                      "font-size": "var(--theme-fontSizes-sm)",
                      outline: "none",
                      transition:
                        "width 200ms linear, padding 200ms linear, height 200ms linear",
                    },
                    '[data-collapsible="icon"] &': {
                      width: "32px !important",
                      height: "32px !important",
                      "padding-top": "8px !important",
                      "padding-bottom": "8px !important",
                      "padding-left": "8px !important",
                      "padding-right": "8px !important",
                    },
                  },
                },
                {
                  id: "MenuButton",
                  name: "Menu Button",
                  acceptsChildren: true,
                  props: [
                    {
                      label: "Tooltip",
                      name: "tooltip",
                      type: { kind: "text", isDynamic: true },
                      required: false,
                      isDefault: true,
                      default: null,
                      placeholder: "Optional tooltip",
                      help: "Optional tooltip",
                    },
                    {
                      label: "isActive",
                      name: "isActive",
                      type: { kind: "boolean" },
                      default: false,
                      placeholder: "",
                      help: "Whether the button should be rendered in its active state",
                    },
                    {
                      label: "asChild",
                      name: "asChild",
                      type: { kind: "boolean" },
                      default: false,
                      placeholder: "",
                      help: "Whether the button should be rendered as it's child",
                    },
                  ],
                  styleProps: [
                    {
                      label: "Variant",
                      name: "variant",
                      type: { kind: "select" },
                      options: [
                        {
                          label: "Solid",
                          value: "solid",
                          selector: '[data-active][data-variant="solid"]',
                          styles: {
                            "": {
                              "background-color": "var(--palette-solid)",
                              color: "var(--palette-contrast)",
                            },
                            " svg": {
                              color: "var(--palette-contrast)",
                            },
                          },
                        },
                        {
                          label: "Subtle",
                          value: "subtle",
                          selector: '[data-active][data-variant="subtle"]',
                          styles: {
                            "": {
                              "background-color": {
                                __type: "color",
                                color: "var(--palette-muted)",
                                opacity: 65,
                              },
                            },
                            " svg": {
                              color: "var(--palette-fg)",
                            },
                          },
                        },
                        {
                          label: "Outline",
                          value: "outline",
                          selector: '[data-active][data-variant="outline"]',
                          styles: {
                            "": {
                              "background-color": "transparent",
                              "border-width": "1px",
                              "border-color":
                                "var(--theme-brand-neutral-muted)",
                            },
                            " svg": {
                              color: "var(--palette-fg)",
                            },
                            ":hover": {
                              "background-color": "transparent",
                            },
                          },
                        },
                        {
                          label: "Elevated",
                          value: "elevated",
                          selector: '[data-active][data-variant="elevated"]',
                          styles: {
                            "": {
                              "border-width": "1px",
                              "border-color":
                                "var(--theme-brand-neutral-muted)",
                              "background-color": "var(--theme-bg-default)",
                              "box-shadow": "var(--theme-shadows-sm)",
                            },
                            " svg": {
                              color: "var(--palette-fg)",
                            },
                          },
                        },
                      ],
                      default: "subtle",
                    },
                    {
                      label: "Color Palette",
                      name: "data-palette",
                      type: { kind: "palette" },
                      default: "neutral",
                      help: "The color scheme of the button",
                    },
                  ],
                  defaultStyles: {
                    ":hover": {
                      "background-color": "var(--theme-brand-neutral-subtle)",
                    },
                    ":focus-visible": {
                      "outline-width": "1px",
                      "outline-style": "solid",
                      "outline-color": "var(--palette-ring)",
                    },
                    ":disabled": {
                      "pointer-events": "none",
                      opacity: 0.5,
                    },
                    " > span": {
                      "line-height": "1",
                      overflow: "hidden",
                      "white-space": "nowrap",
                    },
                    " > span:last-child": {
                      "text-overflow": "ellipsis",
                      overflow: "hidden",
                      "white-space": "nowrap",
                    },
                    " > svg": {
                      color: "var(--theme-fg-muted)",
                      width: "16px",
                      height: "16px",
                      "flex-shrink": "0",
                    },
                    '[data-sidebar="menuitem"]:has([data-sidebar="menu-action"]) &':
                      {
                        "padding-right": "32px",
                      },
                    "": {
                      color: "var(--theme-fg-default)",
                      display: "flex",
                      width: "100%",
                      "align-items": "center",
                      gap: "8px",
                      overflow: "hidden",
                      "border-width": "1px",
                      "border-color": "transparent",
                      "font-weight": "var(--theme-fontWeights-medium)",
                      "border-radius": "var(--theme-radii-md)",
                      "padding-left": "8px",
                      "padding-right": "8px",
                      "padding-top": "8px",
                      "padding-bottom": "8px",
                      "text-align": "left",
                      "font-size": "var(--theme-fontSizes-sm)",
                      outline: "none",
                      transition:
                        "width 200ms linear, padding 200ms linear, height 200ms linear",
                    },
                    '[data-collapsible="icon"] &': {
                      width: "32px !important",
                      height: "32px !important",
                      "padding-top": "8px !important",
                      "padding-bottom": "8px !important",
                      "padding-left": "8px !important",
                      "padding-right": "8px !important",
                    },
                  },
                },
                {
                  id: "MenuAction",
                  name: "Menu Action",
                  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: {
                    "--bp-md": {
                      "[data-show-on-hover]": {
                        opacity: 0,
                      },
                      "::after": {
                        display: "none",
                      },
                    },
                    "--bp-all": {
                      ":focus-visible": {
                        "box-shadow": "var(--theme-shadows-outline)",
                      },
                      ":hover": {
                        "background-color": "var(--theme-brand-neutral-muted)",
                        color: "var(--theme-brand-neutral-fg)",
                      },
                      "::after": {
                        content: '""',
                        position: "absolute",
                        top: "-8px",
                        right: "-8px",
                        bottom: "-8px",
                        left: "-8px",
                      },
                      "": {
                        position: "absolute",
                        right: "4px",
                        top: "6px",
                        display: "flex",
                        width: "20px",
                        height: "20px",
                        "align-items": "center",
                        "justify-content": "center",
                        "padding-left": "0",
                        "padding-top": "0",
                        "padding-right": "0",
                        "padding-bottom": "0",
                        color: "var(--theme-fg-default)",
                        outline: "none",
                        "border-radius": "var(--theme-radii-md)",
                      },
                      '[data-size="sm"] ~ &': {
                        top: "4px",
                      },
                      '[data-size="default"] ~ &': {
                        top: "6px",
                      },
                      '[data-size="lg"] ~ &': {
                        top: "10px",
                      },
                      '[data-active="true"]': {
                        color: "white",
                      },
                      " > svg": {
                        width: "16px",
                        height: "16px",
                        "flex-shrink": "0",
                      },
                      '[data-collapsible="icon"] &': {
                        display: "none",
                      },
                      '[data-sidebar="menu-button"]:hover ~ &': {
                        color: "white",
                      },
                      '[data-sidebar="menu-item"]:hover &[data-show-on-hover]':
                        {
                          opacity: 1,
                        },
                      '[data-sidebar="menu-item"]:focus-within &[data-show-on-hover]':
                        {
                          opacity: 1,
                        },
                      '[data-state="open"][data-show-on-hover]': {
                        opacity: 1,
                      },
                      '[data-sidebar="menu-button"][data-active="true"] ~ &[data-show-on-hover]':
                        {
                          color: "white",
                        },
                    },
                  },
                },
                {
                  id: "MenuBadge",
                  name: "Menu Badge",
                  acceptsChildren: false,
                  props: [],
                  defaultStyles: {
                    "": {
                      position: "absolute",
                      right: "4px",
                      top: "6px",
                      display: "flex",
                      height: "20px",
                      "min-width": "20px",
                      "align-items": "center",
                      "justify-content": "center",
                      "padding-left": "4px",
                      "padding-right": "4px",
                      "font-size": "var(--theme-fontSizes-xs)",
                      "font-weight": "var(--theme-fontWeights-semibold)",
                      "border-radius": "6px",
                      "font-variant-numeric": "tabular-nums",
                      "user-select": "none",
                      "pointer-events": "none",
                    },
                    '[data-size="sm"]': {
                      top: "4px",
                    },
                    '[data-size="lg"]': {
                      top: "10px",
                    },
                    '[data-active="true"]': {
                      color: "white",
                    },
                    '[data-collapsible="icon"] &': {
                      display: "none",
                    },
                    '[data-sidebar="menu-button"]:hover &': {
                      color: "white",
                    },
                    '[data-sidebar="menu-button"]:focus &': {
                      color: "white",
                    },
                  },
                },
                {
                  id: "MenuSub",
                  name: "Menu Sub",
                  acceptsChildren: true,
                  props: [],
                  optionalLayers: [
                    {
                      id: "MenuSubItem",
                      name: "Menu Sub Item",
                      acceptsChildren: true,
                      props: [],
                      defaultStyles: {
                        "": {
                          position: "relative",
                        },
                      },
                    },
                    {
                      id: "MenuSubButton",
                      name: "Menu Sub Button",
                      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: {
                        ":hover": {
                          "background-color":
                            "var(--theme-brand-neutral-muted)",
                          color: "var(--theme-brand-neutral-fg)",
                        },
                        ":focus-visible": {
                          "box-shadow": "var(--theme-shadows-outline)",
                        },
                        ":disabled": {
                          "pointer-events": "none",
                          opacity: 0.5,
                        },
                        " > span": {
                          "line-height": "1",
                        },
                        " > span:last-child": {
                          "text-overflow": "ellipsis",
                          overflow: "hidden",
                          "white-space": "nowrap",
                        },
                        " > svg": {
                          width: "16px",
                          height: "16px",
                          "flex-shrink": "0",
                          color: "white",
                        },
                        "": {
                          display: "flex",
                          width: "100%",
                          "align-items": "center",
                          gap: "8px",
                          overflow: "hidden",
                          "border-radius": "var(--theme-radii-md)",
                          "padding-left": "8px",
                          "padding-right": "8px",
                          "padding-top": "8px",
                          "padding-bottom": "8px",
                          "text-align": "left",
                          "font-size": "var(--theme-fontSizes-sm)",
                          outline: "none",
                          transition:
                            "width 200ms linear, padding 200ms linear, height 200ms linear",
                        },
                        '[data-collapsible="icon"] &': {
                          display: "none",
                        },
                      },
                    },
                  ],
                  defaultStyles: {
                    "": {
                      display: "flex",
                      "flex-direction": "column",
                      gap: "4px",
                      "min-width": "0",
                      "border-left-width": "1px",
                      "margin-left": "14px",
                      "margin-right": "14px",
                      "padding-left": "10px",
                      "padding-top": "2px",
                      "padding-bottom": "2px",
                    },
                    "[data-collapsible='icon'] &": {
                      display: "none",
                    },
                  },
                },
              ],
              defaultStyles: {
                "": {
                  position: "relative",
                },
              },
            },
            {
              id: "MenuSkeleton",
              name: "Menu Skeleton",
              acceptsChildren: false,
              props: [
                {
                  label: "Show Icon",
                  name: "showIcon",
                  type: { kind: "boolean" },
                  default: false,
                  placeholder: "",
                  help: "Whether to show the icon",
                },
              ],
              defaultStyles: {
                '[data-state="collapsed"] &': {
                  display: "none",
                },
                "": {
                  display: "flex",
                  height: "32px",
                  "align-items": "center",
                  gap: "8px",
                  "padding-left": "8px",
                  "padding-right": "8px",
                  "border-radius": "6px",
                },
              },
            },
          ],
          defaultStyles: {
            "": {
              display: "flex",
              width: "100%",
              "min-width": "0",
              "flex-direction": "column",
              gap: "4px",
            },
          },
        },
        {
          id: "Rail",
          name: "Rail",
          acceptsChildren: false,
          props: [],
          defaultStyles: {
            "--bp-sm": {
              ":hover::after": {
                "background-color": "var(--theme-border-default)",
              },
              "": {
                display: "none",
              },
            },
            "--bp-all": {
              "::after": {
                content: '""',
                position: "absolute",
                top: "0",
                bottom: "0",
                left: "50%",
                width: "2px",
              },
              "": {
                display: "flex",
                position: "absolute",
                top: "0",
                bottom: "0",
                "z-index": "20",
                width: "16px",
                transform: "translateX(-50%)",
                transition: "transform 200ms linear",
              },
              '[data-side="left"] &': {
                right: "-16px",
                cursor: "w-resize",
              },
              '[data-side="right"] &': {
                left: "0",
                cursor: "e-resize",
              },
              '[data-collapsible="offcanvas"] &': {
                transform: "translateX(0)",
              },
              '[data-collapsible="offcanvas"] &::after': {
                left: "100%",
              },
              '[data-collapsible="offcanvas"] &:hover': {
                "background-color": "var(--theme-bg-subtle)",
              },
              '[data-collapsible="offcanvas"][data-size="left"] &': {
                right: "-0.5rem",
              },
              '[data-collapsible="offcanvas"][data-size="right"] &': {
                left: "-0.5rem",
              },
            },
          },
        },
      ],
      props: [
        {
          label: "Side",
          name: "side",
          type: { kind: "select" },
          options: [
            { label: "Left", value: "left" },
            { label: "Right", value: "right" },
          ],
          default: "left",
          isDefault: true,
          placeholder: "",
          help: "Position of the sidebar",
        },
        {
          label: "Collapsible",
          name: "collapsible",
          type: { kind: "select" },
          options: [
            { label: "Offcanvas", value: "offcanvas" },
            { label: "Icon", value: "icon" },
            { label: "None", value: "none" },
          ],
          default: "offcanvas",
          isDefault: true,
          placeholder: "",
          help: "Collapsible behavior of the sidebar",
        },
        {
          label: "Variant",
          name: "variant",
          type: { kind: "select" },
          options: [
            { label: "Sidebar (default)", value: "sidebar" },
            { label: "Floating", value: "floating" },
            { label: "Inset", value: "inset" },
          ],
          default: "sidebar",
          isDefault: true,
          placeholder: "",
          help: "The variant of the sidebar",
        },
      ],
      defaultStyles: {
        "--bp-all": {
          "": {
            display: "flex",
            "flex-direction": "column",
            "background-color": "var(--theme-bg-subtle)",
            color: "var(--theme-fg-default)",
          },
          '[data-collapsible="none"]': {
            display: "flex",
            height: "100%",
            width: "var(--sidebar-width)",
            "flex-direction": "column",
            "background-color": "var(--theme-bg-subtle)",
            color: "var(--theme-fg-default)",
          },
          '[data-mobile="true"]': {
            width: "var(--sidebar-width)",
            "background-color": "var(--theme-bg-subtle)",
            color: "var(--theme-fg-default)",
            "padding-top": "0px",
            "padding-right": "0px",
            "padding-left": "0px",
            "padding-bottom": "0px",
          },
          '[data-mobile="true"] > button': {
            display: "none",
          },
          ' [data-mobile="false"]': {
            position: "fixed",
            top: "0",
            bottom: "0",
            width: "var(--sidebar-width)",
            height: "100svh",
            transition:
              "left 200ms linear, right 200ms linear, width 200ms linear",
          },
          '[data-side="left"]& [data-mobile="false"]': {
            left: "0",
          },
          '[data-side="left"][data-collapsible="offcanvas"]& [data-mobile="false"]':
            {
              left: "calc(-1 * var(--sidebar-width))",
            },
          '[data-side="right"]& [data-mobile="false"]': {
            right: "0",
          },
          '[data-side="right"][data-collapsible="offcanvas"]& [data-mobile="false"]':
            {
              right: "calc(-1 * var(--sidebar-width))",
            },
          '[data-variant="floating"]& [data-mobile="false"]': {
            "padding-top": "8px",
            "padding-right": "8px",
            "padding-left": "8px",
            "padding-bottom": "8px",
          },
          '[data-variant="floating"][data-collapsible="icon"]& [data-mobile="false"]':
            {
              width: "calc(var(--sidebar-width-icon) + 1rem + 2px)",
            },
          '[data-variant="inset"][data-collapsible="icon"]& [data-mobile="false"]':
            {
              width: "calc(var(--sidebar-width-icon) + 1rem + 2px)",
            },
          '[data-variant="sidebar"][data-collapsible="icon"]& [data-mobile="false"]':
            {
              width: "var(--sidebar-width-icon)",
            },
          '[data-variant="sidebar"][data-side="left"]& [data-mobile="false"]': {
            "border-right-width": "1px",
          },
          '[data-variant="sidebar"][data-side="right"]& [data-mobile="false"]':
            {
              "border-left-width": "1px",
            },
        },
        "--bp-md": {
          "": {
            display: "none",
          },
        },
      },
    },
    {
      id: "Inset",
      name: "Inset",
      acceptsChildren: true,
      props: [],
      defaultStyles: {
        "--bp-md": {
          '[data-variant="inset"][data-state="collapsed"] ~ &': {
            "margin-left": "8px",
          },
        },
        "--bp-all": {
          '[data-variant="inset"] ~ &': {
            "margin-left": "0px",
            "margin-right": "8px",
            "margin-top": "8px",
            "margin-bottom": "8px",
            "background-color": "var(--theme-bg-default)",
            "border-radius": "var(--theme-radii-xl)",
            "box-shadow": "var(--theme-shadows-base)",
            "min-height": "calc(100svh - 1rem)",
          },
          "": {
            position: "relative",
            display: "flex",
            "flex-direction": "column",
            "min-height": "100svh",
            "flex-basis": "0%",
            "flex-grow": "1",
            "flex-shrink": "1",
          },
        },
      },
    },
    {
      id: "Trigger",
      name: "Trigger",
      acceptsChildren: true,
      props: [],
      defaultStyles: {
        "": {
          width: "28px",
          height: "28px",
        },
      },
    },
  ],
  props: [
    {
      label: "Initially Open",
      name: "defaultOpen",
      type: { kind: "boolean" },
      default: true,
      placeholder: "",
      help: "Whether the sidebar should be open by default",
    },
  ],
  events: [],
  defaultStyles: {
    ":has(> [data-variant='inset'])": {
      "background-color": "var(--theme-bg-subtle)",
    },
    "": {
      display: "flex",
      "flex-direction": "row",
      "min-height": "100svh",
      width: "100%",
    },
  },
  sources: [],
  actions: [],
  defaultChildren: [
    {
      kind: "Sidebar$Brevity.Sidebar",
      props: {
        side: "left",
        collapsible: "offcanvas",
        variant: "sidebar",
      },
      styleProps: {},
      children: [
        {
          kind: "Sidebar$Brevity.Sidebar.Header",
          props: {},
          styleProps: {},
          children: [],
        },
        {
          kind: "Sidebar$Brevity.Sidebar.Content",
          props: {},
          styleProps: {},
          children: [
            {
              kind: "Sidebar$Brevity.Sidebar.Group",
              props: {},
              styleProps: {},
              children: [
                {
                  kind: "Sidebar$Brevity.Sidebar.Group.GroupLabel",
                  props: {},
                  styleProps: {},
                  children: [
                    {
                      kind: "Text$Brevity",
                      props: {
                        value: "Group Label",
                      },
                      styleProps: {
                        size: "inherit",
                      },
                      children: [],
                    },
                  ],
                },
                {
                  kind: "Sidebar$Brevity.Sidebar.Group.GroupAction",
                  props: {},
                  styleProps: {},
                  children: [
                    {
                      kind: "Icon$Brevity",
                      props: {
                        children: {
                          __type: "icon",
                          icon: "more_horiz",
                          pack: "materialsymbolsoutlined",
                        },
                      },
                      styleProps: {},
                      children: [],
                    },
                  ],
                },
                {
                  kind: "Sidebar$Brevity.Sidebar.Group.GroupContent",
                  props: {},
                  styleProps: {},
                  children: [
                    {
                      kind: "Sidebar$Brevity.Sidebar.Menu",
                      props: {},
                      styleProps: {},
                      children: [
                        {
                          kind: "Sidebar$Brevity.Sidebar.Menu.MenuItem",
                          props: {},
                          styleProps: {},
                          children: [
                            {
                              kind: "Sidebar$Brevity.Sidebar.Menu.MenuItem.MenuButton",
                              props: {
                                tooltip: "",
                              },
                              styleProps: {},
                              children: [
                                {
                                  kind: "Icon$Brevity",
                                  props: {
                                    children: {
                                      __type: "icon",
                                      icon: "draft",
                                      pack: "materialsymbolsoutlined",
                                    },
                                  },
                                  styleProps: {},
                                  children: [],
                                },
                                {
                                  kind: "Text$Brevity",
                                  props: {
                                    value: "Menu Item",
                                  },
                                  styleProps: {
                                    size: "inherit",
                                  },
                                  children: [],
                                },
                              ],
                            },
                          ],
                        },
                      ],
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          kind: "Sidebar$Brevity.Sidebar.Footer",
          props: {},
          styleProps: {},
          children: [],
        },
        {
          kind: "Sidebar$Brevity.Sidebar.Rail",
          props: {},
          styleProps: {},
          children: [],
        },
      ],
    },
    {
      kind: "Sidebar$Brevity.Inset",
      props: {},
      styleProps: {},
      children: [
        {
          kind: "Text$Brevity",
          props: {
            value: "Main Content Area",
          },
          styleProps: {
            size: "inherit",
          },
          children: [],
        },
      ],
    },
  ] satisfies DefaultChild[],
};
