nfx-ui 0.16.2 → 0.20.0

package/dist/chunk-useLayout-CjXHRPLD.mjs

@@ -0,0 +1,302 @@
+import { A as z, D as N, I, N as b, P as m, d as D, o as k, p as B, s as U } from "./chunk-dashboard-BsGK96hu.mjs";
+import { C as P, D as V, E as M, S as G, T as $, b as F, s as v, w as T } from "./chunk-preference-x4EdmqU6.mjs";
+import { i as x, r as O } from "./chunk-preference-Y15HwKd0.mjs";
+import { i as X, r as j } from "./chunk-useLanguageLabel-BLdxHuep.mjs";
+import { createContext as K, useContext as W } from "react";
+import { Box as R, Button as f, Flex as i, IconButton as q, Popover as w, RadioCards as A, SegmentedControl as u, Separator as H, Text as s } from "@radix-ui/themes";
+import { jsx as a, jsxs as l } from "react/jsx-runtime";
+import { useTranslation as Q } from "react-i18next";
+import { CheckIcon as y, GearIcon as J } from "@radix-ui/react-icons";
+var Y = "styles-module__logo___z1FuW", Z = "styles-module__mark___HoiFg", ee = "styles-module__plain___TC66Z", ae = "styles-module__glassSquare___QaL-M", re = "styles-module__glassCircle___lE0Nw", ie = "styles-module__small___GCns1", ne = "styles-module__large___eKQOz", g = {
+  logo: Y,
+  mark: Z,
+  plain: ee,
+  glassSquare: ae,
+  glassCircle: re,
+  small: ie,
+  large: ne
+};
+function Re({ src: d, srcDark: r, alt: c = "logo", title: h, subtitle: o, variant: _ = "plain", size: p = "medium", className: e = "", onClick: n }) {
+  const S = O(), E = [
+    g.logo,
+    g[_],
+    g[p],
+    e
+  ].filter(Boolean).join(" "), C = S === "dark" && r ? r : d;
+  return /* @__PURE__ */ a(i, {
+    asChild: !0,
+    align: "center",
+    gap: "3",
+    width: "fit-content",
+    children: /* @__PURE__ */ l("button", {
+      type: "button",
+      className: E,
+      "aria-label": typeof h == "string" ? h : c,
+      onClick: n,
+      children: [C ? /* @__PURE__ */ a(R, {
+        asChild: !0,
+        className: g.mark,
+        children: /* @__PURE__ */ a("span", { children: /* @__PURE__ */ a("img", {
+          src: C,
+          alt: c
+        }) })
+      }) : null, (h || o) && /* @__PURE__ */ l(i, {
+        direction: "column",
+        gap: "1",
+        minWidth: "0",
+        overflow: "hidden",
+        children: [h && /* @__PURE__ */ a(s, {
+          as: "span",
+          size: "3",
+          weight: "bold",
+          truncate: !0,
+          color: "gray",
+          highContrast: !0,
+          children: h
+        }), o && /* @__PURE__ */ a(s, {
+          as: "span",
+          size: "1",
+          weight: "medium",
+          truncate: !0,
+          color: "gray",
+          children: o
+        })]
+      })]
+    })
+  });
+}
+var le = "s-module__swatch___hDS54", oe = "s-module__swatchActive___C0Ctk", se = "s-module__radiusCorner___w9M0j", te = "s-module__radiusNone___dBnuF", de = "s-module__radiusSmall___WpDJf", ce = "s-module__radiusMedium___R0cof", ue = "s-module__radiusLarge___9KEvz", he = "s-module__radiusFull___gai30", t = {
+  swatch: le,
+  swatchActive: oe,
+  radiusCorner: se,
+  radiusNone: te,
+  radiusSmall: de,
+  radiusMedium: ce,
+  radiusLarge: ue,
+  radiusFull: he
+};
+function L(d) {
+  return d === "auto" ? "var(--gray-9)" : `var(--${d}-9)`;
+}
+var me = {
+  [m.NONE]: t.radiusNone,
+  [m.SMALL]: t.radiusSmall,
+  [m.MEDIUM]: t.radiusMedium,
+  [m.LARGE]: t.radiusLarge,
+  [m.FULL]: t.radiusFull
+};
+function Se({ triggerVariant: d = "soft" }) {
+  const { t: r } = Q("language"), c = v((e) => e.theme), h = v((e) => e.language), { syncPreference: o } = x(), { getLanguageDisplayName: _ } = X(), { getBaseDisplayName: p } = j();
+  return /* @__PURE__ */ l(w.Root, { children: [/* @__PURE__ */ a(w.Trigger, { children: /* @__PURE__ */ a(q, {
+    variant: d,
+    size: "2",
+    "aria-label": r("header.preferences"),
+    children: /* @__PURE__ */ a(J, {})
+  }) }), /* @__PURE__ */ a(w.Content, {
+    width: "400px",
+    side: "bottom",
+    align: "end",
+    sideOffset: 8,
+    children: /* @__PURE__ */ l(i, {
+      direction: "column",
+      gap: "3",
+      width: "100%",
+      children: [
+        /* @__PURE__ */ a(s, {
+          size: "3",
+          weight: "bold",
+          children: r("header.theme")
+        }),
+        /* @__PURE__ */ l(i, {
+          direction: "column",
+          gap: "1",
+          children: [/* @__PURE__ */ a(s, {
+            size: "2",
+            weight: "medium",
+            children: r("header.accentColor")
+          }), /* @__PURE__ */ a(i, {
+            wrap: "wrap",
+            gap: "2",
+            children: F.map((e) => {
+              const n = c.accent === e;
+              return /* @__PURE__ */ a(f, {
+                type: "button",
+                variant: "soft",
+                color: "gray",
+                "aria-label": e,
+                "aria-pressed": n,
+                className: `${t.swatch} ${n ? t.swatchActive : ""}`,
+                style: { background: L(e) },
+                onClick: () => o({ theme: { accent: D(e) } }),
+                children: n ? /* @__PURE__ */ a(y, {
+                  color: "white",
+                  width: 11,
+                  height: 11
+                }) : null
+              }, e);
+            })
+          })]
+        }),
+        /* @__PURE__ */ l(i, {
+          direction: "column",
+          gap: "1",
+          children: [/* @__PURE__ */ a(s, {
+            size: "2",
+            weight: "medium",
+            children: r("header.grayColor")
+          }), /* @__PURE__ */ a(i, {
+            wrap: "wrap",
+            gap: "2",
+            children: G.map((e) => {
+              const n = c.gray === e;
+              return /* @__PURE__ */ a(f, {
+                type: "button",
+                variant: "soft",
+                color: "gray",
+                "aria-label": e,
+                "aria-pressed": n,
+                className: `${t.swatch} ${n ? t.swatchActive : ""}`,
+                style: { background: L(e) },
+                onClick: () => o({ theme: { gray: N(e) } }),
+                children: n ? /* @__PURE__ */ a(y, {
+                  color: "white",
+                  width: 11,
+                  height: 11
+                }) : null
+              }, e);
+            })
+          })]
+        }),
+        /* @__PURE__ */ a(H, { size: "4" }),
+        /* @__PURE__ */ l(i, {
+          direction: "column",
+          gap: "1",
+          children: [/* @__PURE__ */ a(s, {
+            size: "2",
+            weight: "medium",
+            children: r("header.appearance")
+          }), /* @__PURE__ */ a(u.Root, {
+            value: c.appearance,
+            onValueChange: (e) => {
+              e && o({ theme: { appearance: B(e) } });
+            },
+            size: "1",
+            children: V.map((e) => /* @__PURE__ */ a(u.Item, {
+              value: e,
+              children: r(`header.appearanceMode.${e}`)
+            }, e))
+          })]
+        }),
+        /* @__PURE__ */ l(i, {
+          direction: "column",
+          gap: "1",
+          children: [/* @__PURE__ */ a(s, {
+            size: "2",
+            weight: "medium",
+            children: r("header.radius")
+          }), /* @__PURE__ */ a(A.Root, {
+            size: "1",
+            columns: "5",
+            gap: "2",
+            value: c.radius,
+            onValueChange: (e) => o({ theme: { radius: b(e) } }),
+            children: $.map((e) => {
+              const n = p(T[e]);
+              return /* @__PURE__ */ a(A.Item, {
+                value: e,
+                "aria-label": n,
+                children: /* @__PURE__ */ l(i, {
+                  direction: "column",
+                  align: "center",
+                  gap: "1",
+                  width: "100%",
+                  children: [/* @__PURE__ */ a(R, {
+                    asChild: !0,
+                    className: `${t.radiusCorner} ${me[e]}`,
+                    children: /* @__PURE__ */ a("span", {})
+                  }), /* @__PURE__ */ a(s, {
+                    as: "span",
+                    size: "1",
+                    weight: "bold",
+                    align: "center",
+                    children: n
+                  })]
+                })
+              }, e);
+            })
+          })]
+        }),
+        /* @__PURE__ */ l(i, {
+          direction: "column",
+          gap: "1",
+          children: [/* @__PURE__ */ a(s, {
+            size: "2",
+            weight: "medium",
+            children: r("header.scaling")
+          }), /* @__PURE__ */ a(u.Root, {
+            value: c.scaling,
+            onValueChange: (e) => {
+              e && o({ theme: { scaling: I(e) } });
+            },
+            size: "1",
+            children: M.map((e) => /* @__PURE__ */ a(u.Item, {
+              value: e,
+              children: e
+            }, e))
+          })]
+        }),
+        /* @__PURE__ */ l(i, {
+          direction: "column",
+          gap: "1",
+          children: [/* @__PURE__ */ a(s, {
+            size: "2",
+            weight: "medium",
+            children: r("header.panelBackground")
+          }), /* @__PURE__ */ a(u.Root, {
+            value: c.panelBackground,
+            onValueChange: (e) => {
+              e && o({ theme: { panelBackground: z(e) } });
+            },
+            size: "1",
+            children: P.map((e) => /* @__PURE__ */ a(u.Item, {
+              value: e,
+              children: r(`header.panelBackgroundMode.${e}`)
+            }, e))
+          })]
+        }),
+        /* @__PURE__ */ l(i, {
+          direction: "column",
+          gap: "1",
+          children: [/* @__PURE__ */ a(s, {
+            size: "2",
+            weight: "medium",
+            children: r("header.language")
+          }), /* @__PURE__ */ a(u.Root, {
+            value: h,
+            onValueChange: (e) => {
+              e && o({ language: U(e) });
+            },
+            size: "1",
+            children: k.map((e) => /* @__PURE__ */ a(u.Item, {
+              value: e,
+              children: _(e)
+            }, e))
+          })]
+        })
+      ]
+    })
+  })] });
+}
+var ge = K(void 0), Ee = () => {
+  const d = W(ge);
+  if (d === void 0) throw new Error("useLayout must be used within a LayoutProvider");
+  return d;
+};
+export {
+  Re as i,
+  Ee as n,
+  Se as r,
+  ge as t
+};
+
+//# sourceMappingURL=chunk-useLayout-CjXHRPLD.mjs.map

package/dist/chunk-useLayout-CjXHRPLD.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-useLayout-CjXHRPLD.mjs","names":[],"sources":["../src/designs/components/Logo/styles.module.css","../src/designs/components/Logo/index.tsx","../src/designs/components/PreferencesPopover/s.module.css","../src/designs/components/PreferencesPopover/index.tsx","../src/designs/layouts/hooks/useLayout.ts"],"sourcesContent":["/* Native button reset + brand hover motion — Themes Button chrome cannot be fully disabled */\n.logo {\n  appearance: none;\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: transparent;\n  color: inherit;\n  text-decoration: none;\n  cursor: pointer;\n  transition: transform 120ms cubic-bezier(0.2, 0, 0, 1);\n}\n\n.logo:hover {\n  transform: translateY(-1px);\n}\n\n.logo:focus-visible {\n  outline: none;\n}\n\n.logo:focus-visible .mark {\n  box-shadow:\n    0 0 0 2px var(--accent-a4),\n    0 14px 30px color-mix(in oklab, var(--black-a3) 75%, transparent);\n}\n\n.mark {\n  display: block;\n  flex: 0 0 auto;\n  overflow: hidden;\n  transition:\n    transform 120ms cubic-bezier(0.2, 0, 0, 1),\n    box-shadow 120ms cubic-bezier(0.2, 0, 0, 1);\n}\n\n.mark img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  object-fit: cover;\n  transition: transform 120ms cubic-bezier(0.2, 0, 0, 1);\n}\n\n.logo:hover .mark {\n  transform: translateY(-1px) scale(1.02);\n}\n\n.logo:hover .mark img {\n  transform: scale(1.04);\n}\n\n.plain .mark {\n  width: 40px;\n  height: 40px;\n  border-radius: var(--radius-chip);\n  box-shadow: 0 14px 30px color-mix(in oklab, var(--black-a3) 75%, transparent);\n}\n\n.glassSquare .mark {\n  width: 54px;\n  height: 54px;\n  border: 1px solid color-mix(in srgb, white 30%, transparent);\n  border-radius: var(--radius-icon);\n  background: color-mix(in srgb, white 18%, transparent);\n  box-shadow: 0 12px 34px color-mix(in srgb, var(--black-a6) 72%, transparent);\n}\n\n.glassCircle .mark {\n  width: 48px;\n  height: 48px;\n  border: 1px solid color-mix(in srgb, white 46%, transparent);\n  border-radius: 50%;\n  background: color-mix(in srgb, white 20%, transparent);\n  box-shadow: 0 16px 36px color-mix(in srgb, var(--black-a6) 54%, transparent);\n}\n\n.small .mark {\n  width: 36px;\n  height: 36px;\n}\n\n.large.plain .mark {\n  width: calc(40px + var(--space-3));\n  height: calc(40px + var(--space-3));\n}\n\n.large.glassSquare .mark {\n  width: 64px;\n  height: 64px;\n}\n\n.large.glassCircle .mark {\n  width: 56px;\n  height: 56px;\n}\n","import type { ReactNode } from \"react\";\n\nimport { Box, Flex, Text } from \"@radix-ui/themes\";\n\nimport { useResolvedAppearance } from \"@/hooks/preference\";\n\nimport styles from \"./styles.module.css\";\n\nexport interface LogoProps {\n  src?: string;\n  srcDark?: string;\n  alt?: string;\n  title?: ReactNode;\n  subtitle?: ReactNode;\n  variant?: \"plain\" | \"glassSquare\" | \"glassCircle\";\n  size?: \"small\" | \"medium\" | \"large\";\n  className?: string;\n  onClick?: () => void;\n}\n\nfunction Logo({ src, srcDark, alt = \"logo\", title, subtitle, variant = \"plain\", size = \"medium\", className = \"\", onClick }: LogoProps) {\n  const appearance = useResolvedAppearance();\n  const logoClasses = [styles.logo, styles[variant], styles[size], className].filter(Boolean).join(\" \");\n  const imgSrc = appearance === \"dark\" && srcDark ? srcDark : src;\n\n  return (\n    <Flex asChild align=\"center\" gap=\"3\" width=\"fit-content\">\n      <button type=\"button\" className={logoClasses} aria-label={typeof title === \"string\" ? title : alt} onClick={onClick}>\n        {imgSrc ? (\n          <Box asChild className={styles.mark}>\n            <span>\n              <img src={imgSrc} alt={alt} />\n            </span>\n          </Box>\n        ) : null}\n\n        {(title || subtitle) && (\n          <Flex direction=\"column\" gap=\"1\" minWidth=\"0\" overflow=\"hidden\">\n            {title && (\n              <Text as=\"span\" size=\"3\" weight=\"bold\" truncate color=\"gray\" highContrast>\n                {title}\n              </Text>\n            )}\n            {subtitle && (\n              <Text as=\"span\" size=\"1\" weight=\"medium\" truncate color=\"gray\">\n                {subtitle}\n              </Text>\n            )}\n          </Flex>\n        )}\n      </button>\n    </Flex>\n  );\n}\n\nexport default Logo;\n","/* Swatch / radius preview chrome — Themes props cannot express color chips */\n\n.swatch {\n  width: 22px;\n  height: 22px;\n  min-width: 22px;\n  min-height: 22px;\n  padding: 0;\n  border-radius: 999px;\n  border: 1px solid var(--gray-a6);\n  flex: 0 0 auto;\n}\n\n.swatchActive {\n  outline: 2px solid var(--gray-12);\n  outline-offset: 2px;\n}\n\n.radiusCorner {\n  width: 16px;\n  height: 16px;\n  border-left: 2px solid var(--accent-9);\n  border-top: 2px solid var(--accent-9);\n  background: color-mix(in oklab, var(--accent-9) 22%, transparent);\n  flex: 0 0 auto;\n}\n\n.radiusNone {\n  border-radius: 0;\n}\n\n.radiusSmall {\n  border-radius: 3px 0 0 0;\n}\n\n.radiusMedium {\n  border-radius: 6px 0 0 0;\n}\n\n.radiusLarge {\n  border-radius: 10px 0 0 0;\n}\n\n.radiusFull {\n  border-radius: 999px 0 0 0;\n}\n","import type { AccentColorEnum, GrayColorEnum } from \"@/enums/theme\";\n\nimport { CheckIcon, GearIcon } from \"@radix-ui/react-icons\";\nimport { Box, Button, Flex, IconButton, Popover, RadioCards, SegmentedControl, Separator, Text } from \"@radix-ui/themes\";\nimport { AccentColor, Appearance, GrayColor, PanelBackground, Radius, RadiusEnum, Scaling } from \"@/enums/theme\";\nimport { LANGUAGE_VALUES, Language as LanguageHelper } from \"@/languages/types\";\nimport { useBaseLabel, useLanguageLabel } from \"@/languages/hooks\";\nimport { useSyncPreference } from \"@/hooks/preference\";\nimport { usePreferenceStore } from \"@/stores/preference\";\nimport {\n  RADIX_ACCENT_VALUES,\n  RADIX_GRAY_VALUES,\n  RADIX_PANEL_BACKGROUND_VALUES,\n  RADIX_RADIUS_TO_BASE,\n  RADIX_RADIUS_VALUES,\n  RADIX_SCALING_VALUES,\n  THEME_APPEARANCE_VALUES,\n} from \"@/themes/radix\";\nimport { useTranslation } from \"react-i18next\";\n\nimport styles from \"./s.module.css\";\n\nexport type PreferencesPopoverProps = {\n  triggerVariant?: \"soft\" | \"outline\";\n};\n\nfunction swatchVar(color: AccentColorEnum | GrayColorEnum): string {\n  return color === \"auto\" ? \"var(--gray-9)\" : `var(--${color}-9)`;\n}\n\nconst RADIUS_CORNER: Record<RadiusEnum, string> = {\n  [RadiusEnum.NONE]: styles.radiusNone,\n  [RadiusEnum.SMALL]: styles.radiusSmall,\n  [RadiusEnum.MEDIUM]: styles.radiusMedium,\n  [RadiusEnum.LARGE]: styles.radiusLarge,\n  [RadiusEnum.FULL]: styles.radiusFull,\n};\n\nfunction PreferencesPopover({ triggerVariant = \"soft\" }: PreferencesPopoverProps) {\n  const { t } = useTranslation(\"language\");\n  const themePreference = usePreferenceStore((s) => s.theme);\n  const currentLanguage = usePreferenceStore((s) => s.language);\n  const { syncPreference } = useSyncPreference();\n  const { getLanguageDisplayName } = useLanguageLabel();\n  const { getBaseDisplayName } = useBaseLabel();\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger>\n        <IconButton variant={triggerVariant} size=\"2\" aria-label={t(\"header.preferences\")}>\n          <GearIcon />\n        </IconButton>\n      </Popover.Trigger>\n      <Popover.Content width=\"400px\" side=\"bottom\" align=\"end\" sideOffset={8}>\n        <Flex direction=\"column\" gap=\"3\" width=\"100%\">\n          <Text size=\"3\" weight=\"bold\">\n            {t(\"header.theme\")}\n          </Text>\n\n          <Flex direction=\"column\" gap=\"1\">\n            <Text size=\"2\" weight=\"medium\">\n              {t(\"header.accentColor\")}\n            </Text>\n            <Flex wrap=\"wrap\" gap=\"2\">\n              {RADIX_ACCENT_VALUES.map((c) => {\n                const active = themePreference.accent === c;\n                return (\n                  <Button\n                    key={c}\n                    type=\"button\"\n                    variant=\"soft\"\n                    color=\"gray\"\n                    aria-label={c}\n                    aria-pressed={active}\n                    className={`${styles.swatch} ${active ? styles.swatchActive : \"\"}`}\n                    style={{ background: swatchVar(c) }}\n                    onClick={() => syncPreference({ theme: { accent: AccentColor(c) } })}\n                  >\n                    {active ? <CheckIcon color=\"white\" width={11} height={11} /> : null}\n                  </Button>\n                );\n              })}\n            </Flex>\n          </Flex>\n\n          <Flex direction=\"column\" gap=\"1\">\n            <Text size=\"2\" weight=\"medium\">\n              {t(\"header.grayColor\")}\n            </Text>\n            <Flex wrap=\"wrap\" gap=\"2\">\n              {RADIX_GRAY_VALUES.map((c) => {\n                const active = themePreference.gray === c;\n                return (\n                  <Button\n                    key={c}\n                    type=\"button\"\n                    variant=\"soft\"\n                    color=\"gray\"\n                    aria-label={c}\n                    aria-pressed={active}\n                    className={`${styles.swatch} ${active ? styles.swatchActive : \"\"}`}\n                    style={{ background: swatchVar(c) }}\n                    onClick={() => syncPreference({ theme: { gray: GrayColor(c) } })}\n                  >\n                    {active ? <CheckIcon color=\"white\" width={11} height={11} /> : null}\n                  </Button>\n                );\n              })}\n            </Flex>\n          </Flex>\n\n          <Separator size=\"4\" />\n\n          <Flex direction=\"column\" gap=\"1\">\n            <Text size=\"2\" weight=\"medium\">\n              {t(\"header.appearance\")}\n            </Text>\n            <SegmentedControl.Root\n              value={themePreference.appearance}\n              onValueChange={(next) => {\n                if (next) syncPreference({ theme: { appearance: Appearance(next) } });\n              }}\n              size=\"1\"\n            >\n              {THEME_APPEARANCE_VALUES.map((v) => (\n                <SegmentedControl.Item key={v} value={v}>\n                  {t(`header.appearanceMode.${v}`)}\n                </SegmentedControl.Item>\n              ))}\n            </SegmentedControl.Root>\n          </Flex>\n\n          <Flex direction=\"column\" gap=\"1\">\n            <Text size=\"2\" weight=\"medium\">\n              {t(\"header.radius\")}\n            </Text>\n            <RadioCards.Root size=\"1\" columns=\"5\" gap=\"2\" value={themePreference.radius} onValueChange={(next) => syncPreference({ theme: { radius: Radius(next) } })}>\n              {RADIX_RADIUS_VALUES.map((v) => {\n                const platform = getBaseDisplayName(RADIX_RADIUS_TO_BASE[v]);\n                return (\n                  <RadioCards.Item key={v} value={v} aria-label={platform}>\n                    <Flex direction=\"column\" align=\"center\" gap=\"1\" width=\"100%\">\n                      <Box asChild className={`${styles.radiusCorner} ${RADIUS_CORNER[v]}`}>\n                        <span />\n                      </Box>\n                      <Text as=\"span\" size=\"1\" weight=\"bold\" align=\"center\">\n                        {platform}\n                      </Text>\n                    </Flex>\n                  </RadioCards.Item>\n                );\n              })}\n            </RadioCards.Root>\n          </Flex>\n\n          <Flex direction=\"column\" gap=\"1\">\n            <Text size=\"2\" weight=\"medium\">\n              {t(\"header.scaling\")}\n            </Text>\n            <SegmentedControl.Root\n              value={themePreference.scaling}\n              onValueChange={(next) => {\n                if (next) syncPreference({ theme: { scaling: Scaling(next) } });\n              }}\n              size=\"1\"\n            >\n              {RADIX_SCALING_VALUES.map((v) => (\n                <SegmentedControl.Item key={v} value={v}>\n                  {v}\n                </SegmentedControl.Item>\n              ))}\n            </SegmentedControl.Root>\n          </Flex>\n\n          <Flex direction=\"column\" gap=\"1\">\n            <Text size=\"2\" weight=\"medium\">\n              {t(\"header.panelBackground\")}\n            </Text>\n            <SegmentedControl.Root\n              value={themePreference.panelBackground}\n              onValueChange={(next) => {\n                if (next)\n                  syncPreference({\n                    theme: { panelBackground: PanelBackground(next) },\n                  });\n              }}\n              size=\"1\"\n            >\n              {RADIX_PANEL_BACKGROUND_VALUES.map((v) => (\n                <SegmentedControl.Item key={v} value={v}>\n                  {t(`header.panelBackgroundMode.${v}`)}\n                </SegmentedControl.Item>\n              ))}\n            </SegmentedControl.Root>\n          </Flex>\n\n          <Flex direction=\"column\" gap=\"1\">\n            <Text size=\"2\" weight=\"medium\">\n              {t(\"header.language\")}\n            </Text>\n            <SegmentedControl.Root\n              value={currentLanguage}\n              onValueChange={(next) => {\n                if (next) syncPreference({ language: LanguageHelper(next) });\n              }}\n              size=\"1\"\n            >\n              {LANGUAGE_VALUES.map((v) => (\n                <SegmentedControl.Item key={v} value={v}>\n                  {getLanguageDisplayName(v)}\n                </SegmentedControl.Item>\n              ))}\n            </SegmentedControl.Root>\n          </Flex>\n        </Flex>\n      </Popover.Content>\n    </Popover.Root>\n  );\n}\n\nexport default PreferencesPopover;\n","/**\n * 布局上下文与 useLayout：供子组件消费侧栏状态与 setLayoutMode。\n * Layout context and useLayout: for consuming sidebar state and setLayoutMode.\n */\nimport type { LayoutContextType } from \"../types\";\n\nimport { createContext, useContext } from \"react\";\n\nconst LayoutContext = createContext<LayoutContextType | undefined>(undefined);\n\nconst useLayout = () => {\n  const context = useContext(LayoutContext);\n  if (context === undefined) {\n    throw new Error(\"useLayout must be used within a LayoutProvider\");\n  }\n  return context;\n};\n\nexport default useLayout;\nexport { LayoutContext, useLayout };\n"],"mappings":"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"}

package/dist/chunk-useTheme-C2Ip6OAs.mjs

@@ -0,0 +1,34 @@
+import { h as n } from "./chunk-dashboard-BsGK96hu.mjs";
+import { a, m as o, s as m, w as c } from "./chunk-preference-x4EdmqU6.mjs";
+function r(t, e) {
+  if (typeof document > "u") return e;
+  const s = document.querySelector(".radix-themes") ?? document.documentElement;
+  return getComputedStyle(s).getPropertyValue(t).trim() || e;
+}
+function f() {
+  const t = m((e) => e.theme);
+  return {
+    theme: t,
+    currentTheme: { colors: { variables: {
+      primary: r("--accent-9", "#e54d2e"),
+      info: r("--blue-9", "#0090ff"),
+      success: r("--green-9", "#30a46c"),
+      fgHeading: r("--gray-12", "#1c2024"),
+      border5: r("--gray-8", "#b9bbc6"),
+      fg: r("--gray-11", "#60646c"),
+      bg3: r("--gray-3", "#f0f0f3"),
+      border3: r("--gray-6", "#d8d9e0")
+    } } },
+    themeName: t.accent,
+    baseName: c[t.radius],
+    setTheme: (e) => a({ theme: e }),
+    setBase: (e) => a({ theme: { radius: o[e] } }),
+    availableBases: n
+  };
+}
+export {
+  f as n,
+  r as t
+};
+
+//# sourceMappingURL=chunk-useTheme-C2Ip6OAs.mjs.map

package/dist/chunk-useTheme-C2Ip6OAs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-useTheme-C2Ip6OAs.mjs","names":[],"sources":["../src/themes/hooks/useTheme.ts"],"sourcesContent":["import { usePreferenceStore } from \"@/stores/preference\";\nimport { BASE_VALUES, type BaseEnum } from \"@/enums/theme\";\nimport { BASE_TO_RADIX_RADIUS, RADIX_RADIUS_TO_BASE, type ResolvedThemePreference } from \"@/themes/radix\";\nimport { setPreference } from \"@/stores/preference\";\n\nexport function readCssColor(varName: string, fallback: string): string {\n  if (typeof document === \"undefined\") return fallback;\n  const el = document.querySelector(\".radix-themes\") ?? document.documentElement;\n  const value = getComputedStyle(el).getPropertyValue(varName).trim();\n  return value || fallback;\n}\n\nexport function useTheme() {\n  const theme = usePreferenceStore((s) => s.theme);\n  const currentTheme = {\n    colors: {\n      variables: {\n        primary: readCssColor(\"--accent-9\", \"#e54d2e\"),\n        info: readCssColor(\"--blue-9\", \"#0090ff\"),\n        success: readCssColor(\"--green-9\", \"#30a46c\"),\n        fgHeading: readCssColor(\"--gray-12\", \"#1c2024\"),\n        border5: readCssColor(\"--gray-8\", \"#b9bbc6\"),\n        fg: readCssColor(\"--gray-11\", \"#60646c\"),\n        bg3: readCssColor(\"--gray-3\", \"#f0f0f3\"),\n        border3: readCssColor(\"--gray-6\", \"#d8d9e0\"),\n      },\n    },\n  };\n  return {\n    theme,\n    currentTheme,\n    themeName: theme.accent,\n    baseName: RADIX_RADIUS_TO_BASE[theme.radius],\n    setTheme: (patch: Partial<ResolvedThemePreference>) => setPreference({ theme: patch }),\n    setBase: (base: BaseEnum) => setPreference({ theme: { radius: BASE_TO_RADIX_RADIUS[base] } }),\n    availableBases: BASE_VALUES,\n  };\n}\n"],"mappings":";;AAKA,SAAgB,EAAa,GAAiB,GAA0B;AACtE,MAAI,OAAO,WAAa,IAAa,QAAO;AAC5C,QAAM,IAAK,SAAS,cAAc,eAAe,KAAK,SAAS;AAE/D,SADc,iBAAiB,CAAE,EAAE,iBAAiB,CAAO,EAAE,KACtD,KAAS;AAClB;AAEA,SAAgB,IAAW;AACzB,QAAM,IAAQ,EAAA,CAAoB,MAAM,EAAE,KAAK;AAe/C,SAAO;AAAA,IACL,OAAA;AAAA,IACA,cAAA,EAfA,QAAQ,EACN,WAAW;AAAA,MACT,SAAS,EAAa,cAAc,SAAS;AAAA,MAC7C,MAAM,EAAa,YAAY,SAAS;AAAA,MACxC,SAAS,EAAa,aAAa,SAAS;AAAA,MAC5C,WAAW,EAAa,aAAa,SAAS;AAAA,MAC9C,SAAS,EAAa,YAAY,SAAS;AAAA,MAC3C,IAAI,EAAa,aAAa,SAAS;AAAA,MACvC,KAAK,EAAa,YAAY,SAAS;AAAA,MACvC,SAAS,EAAa,YAAY,SAAS;AAAA,IAC7C,EACF,EAIA;AAAA,IACA,WAAW,EAAM;AAAA,IACjB,UAAU,EAAqB,EAAM,MAAA;AAAA,IACrC,UAAA,CAAW,MAA4C,EAAc,EAAE,OAAO,EAAM,CAAC;AAAA,IACrF,SAAA,CAAU,MAAmB,EAAc,EAAE,OAAO,EAAE,QAAQ,EAAqB,CAAA,EAAM,EAAE,CAAC;AAAA,IAC5F,gBAAgB;AAAA,EAClB;AACF"}

package/dist/chunk-useTheme-DSps5NbC.cjs

@@ -0,0 +1,3 @@
+const c=require("./chunk-dashboard-CFT0HjSM.cjs"),n=require("./chunk-preference-BXXryZLY.cjs");function e(t,r){if(typeof document>"u")return r;const u=document.querySelector(".radix-themes")??document.documentElement;return getComputedStyle(u).getPropertyValue(t).trim()||r}function o(){const t=n.usePreferenceStore(r=>r.theme);return{theme:t,currentTheme:{colors:{variables:{primary:e("--accent-9","#e54d2e"),info:e("--blue-9","#0090ff"),success:e("--green-9","#30a46c"),fgHeading:e("--gray-12","#1c2024"),border5:e("--gray-8","#b9bbc6"),fg:e("--gray-11","#60646c"),bg3:e("--gray-3","#f0f0f3"),border3:e("--gray-6","#d8d9e0")}}},themeName:t.accent,baseName:n.RADIX_RADIUS_TO_BASE[t.radius],setTheme:r=>n.setPreference({theme:r}),setBase:r=>n.setPreference({theme:{radius:n.BASE_TO_RADIX_RADIUS[r]}}),availableBases:c.BASE_VALUES}}Object.defineProperty(exports,"readCssColor",{enumerable:!0,get:function(){return e}});Object.defineProperty(exports,"useTheme",{enumerable:!0,get:function(){return o}});
+
+//# sourceMappingURL=chunk-useTheme-DSps5NbC.cjs.map

package/dist/chunk-useTheme-DSps5NbC.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-useTheme-DSps5NbC.cjs","names":[],"sources":["../src/themes/hooks/useTheme.ts"],"sourcesContent":["import { usePreferenceStore } from \"@/stores/preference\";\nimport { BASE_VALUES, type BaseEnum } from \"@/enums/theme\";\nimport { BASE_TO_RADIX_RADIUS, RADIX_RADIUS_TO_BASE, type ResolvedThemePreference } from \"@/themes/radix\";\nimport { setPreference } from \"@/stores/preference\";\n\nexport function readCssColor(varName: string, fallback: string): string {\n  if (typeof document === \"undefined\") return fallback;\n  const el = document.querySelector(\".radix-themes\") ?? document.documentElement;\n  const value = getComputedStyle(el).getPropertyValue(varName).trim();\n  return value || fallback;\n}\n\nexport function useTheme() {\n  const theme = usePreferenceStore((s) => s.theme);\n  const currentTheme = {\n    colors: {\n      variables: {\n        primary: readCssColor(\"--accent-9\", \"#e54d2e\"),\n        info: readCssColor(\"--blue-9\", \"#0090ff\"),\n        success: readCssColor(\"--green-9\", \"#30a46c\"),\n        fgHeading: readCssColor(\"--gray-12\", \"#1c2024\"),\n        border5: readCssColor(\"--gray-8\", \"#b9bbc6\"),\n        fg: readCssColor(\"--gray-11\", \"#60646c\"),\n        bg3: readCssColor(\"--gray-3\", \"#f0f0f3\"),\n        border3: readCssColor(\"--gray-6\", \"#d8d9e0\"),\n      },\n    },\n  };\n  return {\n    theme,\n    currentTheme,\n    themeName: theme.accent,\n    baseName: RADIX_RADIUS_TO_BASE[theme.radius],\n    setTheme: (patch: Partial<ResolvedThemePreference>) => setPreference({ theme: patch }),\n    setBase: (base: BaseEnum) => setPreference({ theme: { radius: BASE_TO_RADIX_RADIUS[base] } }),\n    availableBases: BASE_VALUES,\n  };\n}\n"],"mappings":"+FAKA,SAAgB,EAAa,EAAiB,EAA0B,CACtE,GAAI,OAAO,SAAa,IAAa,OAAO,EAC5C,MAAM,EAAK,SAAS,cAAc,eAAe,GAAK,SAAS,gBAE/D,OADc,iBAAiB,CAAE,EAAE,iBAAiB,CAAO,EAAE,KACtD,GAAS,CAClB,CAEA,SAAgB,GAAW,CACzB,MAAM,EAAQ,EAAA,mBAAoB,GAAM,EAAE,KAAK,EAe/C,MAAO,CACL,MAAA,EACA,aAAA,CAfA,OAAQ,CACN,UAAW,CACT,QAAS,EAAa,aAAc,SAAS,EAC7C,KAAM,EAAa,WAAY,SAAS,EACxC,QAAS,EAAa,YAAa,SAAS,EAC5C,UAAW,EAAa,YAAa,SAAS,EAC9C,QAAS,EAAa,WAAY,SAAS,EAC3C,GAAI,EAAa,YAAa,SAAS,EACvC,IAAK,EAAa,WAAY,SAAS,EACvC,QAAS,EAAa,WAAY,SAAS,CAC7C,CACF,CAIA,EACA,UAAW,EAAM,OACjB,SAAU,EAAA,qBAAqB,EAAM,MAAA,EACrC,SAAW,GAA4C,EAAA,cAAc,CAAE,MAAO,CAAM,CAAC,EACrF,QAAU,GAAmB,EAAA,cAAc,CAAE,MAAO,CAAE,OAAQ,EAAA,qBAAqB,CAAA,CAAM,CAAE,CAAC,EAC5F,eAAgB,EAAA,WAClB,CACF"}