@flanksource/clicky-ui/dist/components/theme-switcher.js

Flanksource Clicky UI — React component library built on shadcn/ui with light/dark and density theming.

import { jsx, jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import { Icon } from "../data/Icon.js";
import { IconMenuPicker } from "./icon-menu-picker.js";
import { useTheme } from "../hooks/use-theme.js";
const THEME_OPTIONS = [
  { value: "light", icon: "ph:sun", label: "light" },
  { value: "dark", icon: "ph:moon", label: "dark" },
  { value: "system", icon: "ph:desktop", label: "system" }
];
const ThemeSwitcher = forwardRef(
  ({ className, triggerClassName, menuClassName }, ref) => {
    const { theme, setTheme, resolvedTheme } = useTheme();
    const footer = theme === "system" ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
      /* @__PURE__ */ jsx(Icon, { name: resolvedTheme === "dark" ? "ph:moon" : "ph:sun", width: 12, height: 12 }),
      /* @__PURE__ */ jsxs("span", { children: [
        "resolves to",
        " ",
        /* @__PURE__ */ jsx("span", { "data-testid": "resolved-theme", className: "font-medium text-foreground", children: resolvedTheme })
      ] })
    ] }) : null;
    return /* @__PURE__ */ jsx(
      IconMenuPicker,
      {
        ref,
        value: theme,
        onChange: setTheme,
        options: THEME_OPTIONS,
        ariaLabel: "Theme",
        footer,
        className,
        triggerClassName,
        menuClassName
      }
    );
  }
);
ThemeSwitcher.displayName = "ThemeSwitcher";
export {
  ThemeSwitcher
};
//# sourceMappingURL=theme-switcher.js.map