<div data-controller="ui--theme" class="contents">
  <div class="relative inline-block" data-controller="ui--menu"><button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:pointer-events-none disabled:text-muted-foreground! hover:bg-accent hover:text-accent-foreground disabled:bg-transparent! h-7 w-7 disabled:cursor-not-allowed size-7!" aria-label="Change theme" id="ui-menu-trigger-ui-menu-46a0f6bf" aria-haspopup="true" aria-expanded="false" aria-controls="ui-menu-content-ui-menu-46a0f6bf" data-ui--menu-target="trigger" data-action="click->ui--menu#toggle keydown->ui--menu#triggerKeydown"><i data-lucide="sun" class="shrink-0 w-4 h-4 block in-data-[theme=dark]:hidden in-data-[theme=system]:hidden" aria-hidden="true"></i>
      <i data-lucide="moon" class="shrink-0 w-4 h-4 hidden in-data-[theme=dark]:block" aria-hidden="true"></i>
      <i data-lucide="monitor" class="shrink-0 w-4 h-4 hidden in-data-[theme=system]:block" aria-hidden="true"></i>
    </button>
    <div id="ui-menu-content-ui-menu-46a0f6bf" class="z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md flex flex-col gap-[5px] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 w-40" role="menu" aria-orientation="vertical" data-ui--menu-target="content" hidden="hidden" data-side="bottom" data-align="end" tabindex="-1">
      <div class="px-2 py-1.5 text-sm font-semibold text-muted-foreground">Theme</div>
      <button role="menuitemradio" data-theme="light" data-action="ui--theme#select" data-ui--theme-target="option" aria-checked="false" class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all group" tabindex="-1" data-ui--menu-target="item"><i data-lucide="sun" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
        <span>Light</span><i data-lucide="check" class="shrink-0 w-4 h-4 ml-auto hidden group-aria-checked:block" aria-hidden="true"></i>
      </button>
      <button role="menuitemradio" data-theme="dark" data-action="ui--theme#select" data-ui--theme-target="option" aria-checked="false" class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all group" tabindex="-1" data-ui--menu-target="item"><i data-lucide="moon" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
        <span>Dark</span><i data-lucide="check" class="shrink-0 w-4 h-4 ml-auto hidden group-aria-checked:block" aria-hidden="true"></i>
      </button>
      <button role="menuitemradio" data-theme="system" data-action="ui--theme#select" data-ui--theme-target="option" aria-checked="false" class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all group" tabindex="-1" data-ui--menu-target="item"><i data-lucide="monitor" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
        <span>System</span><i data-lucide="check" class="shrink-0 w-4 h-4 ml-auto hidden group-aria-checked:block" aria-hidden="true"></i>
      </button>
    </div>
  </div>
</div>