laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
76 lines (75 loc) • 1.93 kB
JavaScript
"use client";
import { jsx as t, jsxs as h } from "react/jsx-runtime";
import { cn as r } from "../../lib/utils.js";
import { useControllableState as p } from "../../node_modules/@radix-ui/react-use-controllable-state/dist/index.js";
import { useState as b, useEffect as g } from "react";
import v from "../../node_modules/lucide-react/dist/esm/icons/monitor.js";
import x from "../../node_modules/lucide-react/dist/esm/icons/sun.js";
import y from "../../node_modules/lucide-react/dist/esm/icons/moon.js";
const k = [
{
key: "system",
icon: v,
label: "System theme"
},
{
key: "light",
icon: x,
label: "Light theme"
},
{
key: "dark",
icon: y,
label: "Dark theme"
}
], z = ({
value: l,
onChange: n,
defaultValue: s,
className: i
}) => {
const [m, a] = p({
defaultProp: s || "system",
prop: l,
onChange: n
}), [u, d] = b(!1);
return g(() => {
d(!0);
}, []), u ? /* @__PURE__ */ t(
"div",
{
className: r(
"bg-d-background ring-d-border relative isolate flex h-8 rounded-full p-1 ring-1",
i
),
children: k.map(({ key: e, icon: c, label: f }) => {
const o = m === e;
return /* @__PURE__ */ h(
"button",
{
type: "button",
className: "relative h-6 w-6 rounded-full",
onClick: () => a(e),
"aria-label": f,
children: [
o && /* @__PURE__ */ t("div", { className: "bg-d-secondary absolute inset-0 rounded-full" }),
/* @__PURE__ */ t(
c,
{
className: r(
"relative z-10 m-auto h-4 w-4",
o ? "text-d-foreground" : "text-d-muted-foreground"
)
}
)
]
},
e
);
})
}
) : null;
};
export {
z as ThemeSwitcher
};