@demokit-ui/demokit 0.1.2 → 0.2.0

package/dist/kit/themes/theme-toggle.js

@@ -1,13 +1,20 @@
-import { jsxs as r, jsx as t } from "react/jsx-runtime";
-import { useSettings as s } from "../../providers/settings-provider.js";
-import { cn as d } from "../../lib/utils.js";
-const n = [
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { useSettings as i } from "../../providers/settings-provider.js";
+import { cn as l } from "../../lib/utils.js";
+const d = [
   { value: "glass", label: "活力", dot: "#009ef7" },
   { value: "navy", label: "沉稳", dot: "#2563eb" }
 ];
-function g() {
-  const { settings: o, storeOption: l } = s();
-  return /* @__PURE__ */ r("div", { className: "theme-toggle px-5 pb-4 pt-3 border-t border-border", children: [
+function u() {
+  const { settings: o, storeOption: s } = i(), r = o.adaptiveTheme ? [
+    ...d,
+    {
+      value: "adaptive",
+      label: "自适配",
+      dot: o.adaptiveTheme.tokens.primary
+    }
+  ] : d;
+  return /* @__PURE__ */ a("div", { className: "theme-toggle px-5 pb-4 pt-3 border-t border-border", children: [
     /* @__PURE__ */ t(
       "div",
       {
@@ -20,18 +27,21 @@ function g() {
       "div",
       {
         "data-slot": "theme-toggle-grid",
-        className: "grid grid-cols-2 gap-1 p-1 bg-muted rounded-md",
-        children: n.map((e) => {
-          const a = o.theme === e.value;
-          return /* @__PURE__ */ r(
+        className: l(
+          "grid gap-1 rounded-md bg-muted p-1",
+          r.length === 3 ? "grid-cols-3" : "grid-cols-2"
+        ),
+        children: r.map((e) => {
+          const n = o.theme === e.value;
+          return /* @__PURE__ */ a(
             "button",
             {
               type: "button",
-              onClick: () => l("theme", e.value),
+              onClick: () => s("theme", e.value),
               title: e.label,
-              className: d(
+              className: l(
                 "flex items-center justify-center gap-1.5 h-8 rounded text-xs font-medium transition-colors",
-                a ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+                n ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
               ),
               children: [
                 /* @__PURE__ */ t(
@@ -52,5 +62,5 @@ function g() {
   ] });
 }
 export {
-  g as ThemeToggle
+  u as ThemeToggle
 };

package/dist/kit/tokens/chart-palette.js

@@ -1,12 +1,12 @@
-import { useOptionalSettings as s } from "../../providers/settings-provider.js";
-const t = {
+import { useOptionalSettings as a } from "../../providers/settings-provider.js";
+const s = {
   glass: ["#009EF7", "#1BC5BD", "#FFA800", "#8950FC", "#F64E60", "#50CD89"],
   navy: ["#2563eb", "#7c3aed", "#0d9488", "#f97316", "#e11d48", "#0891b2"]
 };
-function a() {
-  const e = s()?.settings.theme ?? "glass";
-  return t[e] ?? t.glass;
+function i() {
+  const t = a(), e = t?.settings.theme ?? "glass";
+  return e === "adaptive" && t?.settings.adaptiveTheme ? t.settings.adaptiveTheme.tokens.chart : s[e] ?? s.glass;
 }
 export {
-  a as useChartPalette
+  i as useChartPalette
 };

package/dist/providers/demokit-provider.d.ts

@@ -1,4 +1,7 @@
 import { ReactNode } from 'react';
-export declare function DemoKitProvider({ children }: {
+import { SettingsProviderInitialSettings } from './settings-provider';
+export interface DemoKitProviderProps {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+    initialSettings?: SettingsProviderInitialSettings;
+}
+export declare function DemoKitProvider({ children, initialSettings, }: DemoKitProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/providers/demokit-provider.js

@@ -1,9 +1,12 @@
 import { jsx as r } from "react/jsx-runtime";
-import { SettingsProvider as i } from "./settings-provider.js";
-import { TooltipsProvider as t } from "./tooltips-provider.js";
-function p({ children: o }) {
-  return /* @__PURE__ */ r(i, { children: /* @__PURE__ */ r(t, { children: o }) });
+import { SettingsProvider as t } from "./settings-provider.js";
+import { TooltipsProvider as e } from "./tooltips-provider.js";
+function d({
+  children: o,
+  initialSettings: i
+}) {
+  return /* @__PURE__ */ r(t, { initialSettings: i, children: /* @__PURE__ */ r(e, { children: o }) });
 }
 export {
-  p as DemoKitProvider
+  d as DemoKitProvider
 };

package/dist/providers/settings-provider.d.ts

@@ -7,9 +7,17 @@ type SettingsContextType = {
     storeOption: <T = any>(path: Path, value: T) => void;
     settings: Settings;
 };
-export declare const SettingsProvider: React.FC<{
+export type SettingsProviderInitialSettings = Partial<Omit<Settings, 'appearance' | 'layouts'>> & {
+    appearance?: Partial<Settings['appearance']>;
+    layouts?: {
+        [K in keyof Settings['layouts']]?: Partial<Settings['layouts'][K]>;
+    };
+};
+export interface SettingsProviderProps {
     children: React.ReactNode;
-}>;
+    initialSettings?: SettingsProviderInitialSettings;
+}
+export declare const SettingsProvider: React.FC<SettingsProviderProps>;
 export declare const useSettings: () => SettingsContextType;
 export declare const useOptionalSettings: () => SettingsContextType | undefined;
 export {};

package/dist/providers/settings-provider.js

@@ -1,78 +1,121 @@
-import { jsx as O } from "react/jsx-runtime";
-import { useState as v, useEffect as f, useCallback as g, useMemo as E, useContext as y, createContext as w } from "react";
-import { APP_SETTINGS as p } from "../config/settings.config.js";
-const h = w(
+import { jsx as T } from "react/jsx-runtime";
+import { useState as w, useEffect as i, useCallback as y, useMemo as P, useContext as O, createContext as x } from "react";
+import { applyAdaptiveTheme as C, clearAdaptiveTheme as S } from "../kit/themes/adaptive-theme.js";
+import { APP_SETTINGS as v } from "../config/settings.config.js";
+const g = x(
   void 0
 ), l = "app_settings_", c = () => typeof window < "u";
-function P(e, t) {
-  return t.split(".").reduce((n, s) => n?.[s], e);
+function L(t, e) {
+  return e.split(".").reduce((o, a) => o?.[a], t);
 }
-function S(e, t, n) {
-  const s = t.split("."), i = s.pop(), u = s.reduce((m, r) => m[r] ??= {}, e);
-  return u[i] = n, { ...e };
+function h(t, e, o) {
+  const a = e.split("."), u = a.pop(), d = a.reduce((m, f) => m[f] ??= {}, t);
+  return d[u] = o, { ...t };
 }
-function x(e, t) {
+function A(t, e) {
   if (c())
     try {
       localStorage.setItem(
-        `${l}${e}`,
-        JSON.stringify(t)
+        `${l}${t}`,
+        JSON.stringify(e)
       );
-    } catch (n) {
-      console.error("LocalStorage write error:", n);
+    } catch (o) {
+      console.error("LocalStorage write error:", o);
     }
 }
-function C(e) {
+function I(t) {
   if (c())
     try {
-      const t = localStorage.getItem(`${l}${e}`);
-      return t ? JSON.parse(t) : void 0;
-    } catch (t) {
-      console.error("LocalStorage read error:", t);
+      const e = localStorage.getItem(`${l}${t}`);
+      return e ? JSON.parse(e) : void 0;
+    } catch (e) {
+      console.error("LocalStorage read error:", e);
       return;
     }
 }
-const T = ({
-  children: e
+function E(t) {
+  const e = structuredClone(v);
+  return t ? {
+    ...e,
+    ...t,
+    appearance: {
+      ...e.appearance,
+      ...t.appearance
+    },
+    layouts: {
+      ...e.layouts,
+      ...t.layouts,
+      demo1: {
+        ...e.layouts.demo1,
+        ...t.layouts?.demo1
+      },
+      demo2: {
+        ...e.layouts.demo2,
+        ...t.layouts?.demo2
+      },
+      demo5: {
+        ...e.layouts.demo5,
+        ...t.layouts?.demo5
+      },
+      demo7: {
+        ...e.layouts.demo7,
+        ...t.layouts?.demo7
+      },
+      demo9: {
+        ...e.layouts.demo9,
+        ...t.layouts?.demo9
+      }
+    }
+  } : e;
+}
+const F = ({
+  children: t,
+  initialSettings: e
 }) => {
-  const [t, n] = v(
-    structuredClone(p)
+  const [o, a] = w(
+    () => E(e)
   );
-  f(() => {
+  i(() => {
+    if (!c()) return;
+    const r = E(e);
+    Object.keys(localStorage).filter((n) => n.startsWith(l)).forEach((n) => {
+      const s = n.replace(l, ""), p = I(s);
+      p !== void 0 && h(r, s, p);
+    }), a(r);
+  }, [e]), i(() => {
+    c() && (document.documentElement.dataset.theme = o.theme);
+  }, [o.theme]), i(() => {
     if (!c()) return;
-    const r = structuredClone(p);
-    Object.keys(localStorage).filter((o) => o.startsWith(l)).forEach((o) => {
-      const a = o.replace(l, ""), d = C(a);
-      d !== void 0 && S(r, a, d);
-    }), n(r);
-  }, []), f(() => {
-    c() && (document.documentElement.dataset.theme = t.theme);
-  }, [t.theme]), f(() => {
-    c() && (document.documentElement.dataset.density = t.appearance?.density ?? p.appearance.density, document.documentElement.dataset.radius = t.appearance?.radius ?? p.appearance.radius);
-  }, [t.appearance?.density, t.appearance?.radius]);
-  const s = g(
-    (r) => P(t, r),
-    [t]
-  ), i = g((r, o) => {
-    n((a) => S({ ...a }, r, o));
-  }, []), u = g((r, o) => {
-    n((a) => {
-      const d = S({ ...a }, r, o);
-      return x(r, o), d;
+    const r = document.documentElement;
+    if (o.theme === "adaptive" && o.adaptiveTheme)
+      return C(r, o.adaptiveTheme), () => S(r);
+    S(r);
+  }, [o.theme, o.adaptiveTheme]), i(() => {
+    c() && (document.documentElement.dataset.density = o.appearance?.density ?? v.appearance.density, document.documentElement.dataset.radius = o.appearance?.radius ?? v.appearance.radius);
+  }, [o.appearance?.density, o.appearance?.radius]);
+  const u = y(
+    (r) => L(o, r),
+    [o]
+  ), d = y((r, n) => {
+    a((s) => h({ ...s }, r, n));
+  }, []), m = y((r, n) => {
+    a((s) => {
+      const p = h({ ...s }, r, n);
+      return A(r, n), p;
     });
-  }, []), m = E(
-    () => ({ getOption: s, setOption: i, storeOption: u, settings: t }),
-    [s, i, u, t]
+  }, []), f = P(
+    () => ({ getOption: u, setOption: d, storeOption: m, settings: o }),
+    [u, d, m, o]
   );
-  return /* @__PURE__ */ O(h.Provider, { value: m, children: e });
-}, $ = () => {
-  const e = y(h);
-  if (!e)
+  return /* @__PURE__ */ T(g.Provider, { value: f, children: t });
+}, N = () => {
+  const t = O(g);
+  if (!t)
     throw new Error("useSettings must be used within a SettingsProvider");
-  return e;
-}, b = () => y(h);
+  return t;
+}, j = () => O(g);
 export {
-  T as SettingsProvider,
-  b as useOptionalSettings,
-  $ as useSettings
+  F as SettingsProvider,
+  j as useOptionalSettings,
+  N as useSettings
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@demokit-ui/demokit",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Open-source React component library with provider, styles, and composable UI primitives",
   "license": "MIT",
   "repository": {