@anoki/fse-ui/dist/index.es626.js

FSE UI components library

import * as a from "react";
import G from "./index.es616.js";
import { getMatchingGrayColor as N } from "./index.es637.js";
import { themePropDefs as o } from "./index.es638.js";
import { Provider as b } from "./index.es639.js";
import { Provider as w } from "./index.es570.js";
import { Root as D } from "./index.es480.js";
const g = () => {
}, P = a.createContext(void 0), I = a.forwardRef((n, c) => a.useContext(P) === void 0 ? a.createElement(b, { delayDuration: 200 }, a.createElement(w, { dir: "ltr" }, a.createElement(A, { ...n, ref: c }))) : a.createElement(x, { ...n, ref: c }));
I.displayName = "Theme";
const A = a.forwardRef((n, c) => {
  const { appearance: e = o.appearance.default, accentColor: i = o.accentColor.default, grayColor: l = o.grayColor.default, panelBackground: s = o.panelBackground.default, radius: r = o.radius.default, scaling: t = o.scaling.default, hasBackground: d = o.hasBackground.default, ...f } = n, [p, u] = a.useState(e);
  a.useEffect(() => u(e), [e]);
  const [y, C] = a.useState(i);
  a.useEffect(() => C(i), [i]);
  const [B, h] = a.useState(l);
  a.useEffect(() => h(l), [l]);
  const [v, m] = a.useState(s);
  a.useEffect(() => m(s), [s]);
  const [E, R] = a.useState(r);
  a.useEffect(() => R(r), [r]);
  const [k, S] = a.useState(t);
  return a.useEffect(() => S(t), [t]), a.createElement(x, { ...f, ref: c, isRoot: !0, hasBackground: d, appearance: p, accentColor: y, grayColor: B, panelBackground: v, radius: E, scaling: k, onAppearanceChange: u, onAccentColorChange: C, onGrayColorChange: h, onPanelBackgroundChange: m, onRadiusChange: R, onScalingChange: S });
});
A.displayName = "ThemeRoot";
const x = a.forwardRef((n, c) => {
  const e = a.useContext(P), { asChild: i, isRoot: l, hasBackground: s, appearance: r = (e == null ? void 0 : e.appearance) ?? o.appearance.default, accentColor: t = (e == null ? void 0 : e.accentColor) ?? o.accentColor.default, grayColor: d = (e == null ? void 0 : e.resolvedGrayColor) ?? o.grayColor.default, panelBackground: f = (e == null ? void 0 : e.panelBackground) ?? o.panelBackground.default, radius: p = (e == null ? void 0 : e.radius) ?? o.radius.default, scaling: u = (e == null ? void 0 : e.scaling) ?? o.scaling.default, onAppearanceChange: y = g, onAccentColorChange: C = g, onGrayColorChange: B = g, onPanelBackgroundChange: h = g, onRadiusChange: v = g, onScalingChange: m = g, ...E } = n, R = i ? D : "div", k = d === "auto" ? N(t) : d, S = n.appearance === "light" || n.appearance === "dark", T = s === void 0 ? l || S : s;
  return a.createElement(P.Provider, { value: a.useMemo(() => ({ appearance: r, accentColor: t, grayColor: d, resolvedGrayColor: k, panelBackground: f, radius: p, scaling: u, onAppearanceChange: y, onAccentColorChange: C, onGrayColorChange: B, onPanelBackgroundChange: h, onRadiusChange: v, onScalingChange: m }), [r, t, d, k, f, p, u, y, C, B, h, v, m]) }, a.createElement(R, { "data-is-root-theme": l ? "true" : "false", "data-accent-color": t, "data-gray-color": k, "data-has-background": T ? "true" : "false", "data-panel-background": f, "data-radius": p, "data-scaling": u, ref: c, ...E, className: G("radix-themes", { light: r === "light", dark: r === "dark" }, E.className) }));
});
x.displayName = "ThemeImpl";
export {
  I as Theme,
  P as ThemeContext
};
//# sourceMappingURL=index.es626.js.map