@gx-design-vue/context 0.0.4 → 0.0.5-beta.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 gx12358
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,10 +1,76 @@
-# context
+<div align="center"><a name="readme-top"></a>
 
-```shell
+<img height="180" src="https://gx12358.cn/resource/img/favicon.ico">
+
+<h1>Context</h1>
+
+</div>
+
+## ✨ Features
+
+- 🌈 Enterprise-class UI designed for web applications.
+- 📦 A set of high-quality Vue3 components out of the box.
+- 🛡 Written in TypeScript with predictable static types.
+- ⚙️ Whole package of design resources and development tools.
+- 🌍 Internationalization support for dozens of languages.
+- 🎨 Powerful theme customization based on CSS-in-JS.
+
+## 🖥 Environment Support
+
+- Modern browsers
+- Server-side Rendering
+- [Electron](https://www.electronjs.org/)
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)<br>Electron |
+| --- | --- | --- | --- | --- |
+| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+
+## 📦 Install
+
+```bash
+npm install @gx-design-vue/context
+```
+
+```bash
+yarn add @gx-design-vue/context
+```
+
+```bash
 pnpm add @gx-design-vue/context
 ```
 
-```ts
-// 可全局引入，也可以单独引入
-import { useContext } from '@gx-design-vue/context'
+```bash
+bun add @gx-design-vue/context
 ```
+
+## Acknowledgements
+
+Antdv Next is inspired by and built upon the following open-source projects.
+
+- [Ant Design](https://ant.design/)
+- [Vue.js](https://vuejs.org/)
+- [Vite](https://vitejs.dev/)
+
+## Maintainer
+
+[@gx12358](https://github.com/gx12358/vue3-antd-admin)
+
+## Contributors
+
+<a href="https://github.com/gx12358/vue3-antd-admin/graphs/contributors">
+  <img alt="Contributors" src="https://contrib.rocks/image?repo=gx12358/vue3-antd-admin" />
+</a>
+
+## Special Thanks
+
+Thanks to the [vbenjs/vue-vben-admin](https://github.com/gx12358/vue3-antd-admin) project for providing inspiration and reference implementation.
+
+## License
+
+[MIT © gx12358-2021](./LICENSE)
+
+## `Star`
+
+Thank you very much for the stars from kind-hearted people, thank you for your support :heart:
+
+[![Stargazers repo roster for @gx12358/vue3-antd-admin](https://bytecrank.com/nastyox/reporoster/php/stargazersSVG.php?user=gx12358&repo=vue3-antd-admin)](https://github.com/gx12358/vue3-antd-admin/stargazers)

package/dist/context/ContextProvider.d.ts

@@ -1,26 +1,18 @@
-import type { PropType, SlotsType } from 'vue';
-declare const ContextProvider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    contextKey: {
-        type: PropType<string>;
-        required: true;
-    };
-    value: {
-        type: PropType<any>;
-        required: true;
-    };
-}>, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    contextKey: {
-        type: PropType<string>;
-        required: true;
-    };
-    value: {
-        type: PropType<any>;
-        required: true;
-    };
-}>> & Readonly<{}>, {}, SlotsType<{
-    default: any;
-}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const useContextProvider: <T = any>(contextInjectKey: string, defaultValue?: T) => T & {
-    contextId: string;
+import * as vue0 from "vue";
+import { SlotsType } from "vue";
+import { EmptyEmit } from "@gx-design-vue/pro-utils";
+
+//#region src/context/ContextProvider.d.ts
+interface ContextProviderProps {
+  contextKey: string;
+  value: any;
+}
+interface ContextProviderSlots {
+  default?: () => any;
+}
+declare const ContextProvider: vue0.DefineSetupFnComponent<ContextProviderProps, EmptyEmit, SlotsType<ContextProviderSlots>, ContextProviderProps, vue0.PublicProps>;
+declare function useContextProvider<T = any>(contextInjectKey: string, defaultValue?: T): T & {
+  contextId: string;
 };
-export { ContextProvider, useContextProvider };
+//#endregion
+export { ContextProvider, ContextProviderSlots, useContextProvider };

package/dist/context/ContextProvider.js

@@ -0,0 +1,34 @@
+import { defineComponent, inject, provide, toRefs } from "vue";
+import { getRandomNumber, isObject } from "@gx-design-vue/pro-utils";
+
+//#region src/context/ContextProvider.tsx
+let contextId = null;
+function updateContextKey(key) {
+	if (contextId) return contextId;
+	contextId = Symbol(key);
+	return contextId;
+}
+const ContextProvider = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	if (props.contextKey && props.value && isObject(props.value)) provide(updateContextKey(props.contextKey), {
+		...toRefs(props.value),
+		contextId: `${props.contextKey}-${getRandomNumber().uuid(10)}`
+	});
+	else console.warn("[ContextProvider]: contextKey is required");
+	return () => slots.default?.();
+}, { props: {
+	contextKey: {
+		type: String,
+		required: true,
+		default: void 0
+	},
+	value: {
+		required: true,
+		default: void 0
+	}
+} });
+function useContextProvider(contextInjectKey, defaultValue) {
+	if (typeof contextId === "symbol") return inject(updateContextKey(contextInjectKey), defaultValue || {});
+}
+
+//#endregion
+export { ContextProvider, useContextProvider };

package/dist/context/index.d.ts

@@ -1,7 +1,10 @@
-import type { InjectionKey } from 'vue';
-export * from './ContextProvider';
-export declare function useContext<T>(key: string, defaultValue?: T): {
-    provideContext: (value: T) => void;
-    useInjectContext: (injectDefaultValue?: T) => T;
-    contextInjectKey: InjectionKey<T>;
+import { InjectionKey } from "vue";
+
+//#region src/context/index.d.ts
+declare function useContext<T>(key: string, defaultValue?: T): {
+  provideContext: (value: T) => void;
+  useInjectContext: (injectDefaultValue?: T) => T;
+  contextInjectKey: InjectionKey<T>;
 };
+//#endregion
+export { useContext };

package/dist/context/index.js

@@ -0,0 +1,20 @@
+import { inject, provide } from "vue";
+
+//#region src/context/index.ts
+function useContext(key, defaultValue) {
+	const contextInjectKey = Symbol(key);
+	const provideContext = (value) => {
+		provide(contextInjectKey, value);
+	};
+	const useInjectContext = (injectDefaultValue) => {
+		return inject(contextInjectKey, injectDefaultValue || defaultValue || {});
+	};
+	return {
+		provideContext,
+		useInjectContext,
+		contextInjectKey
+	};
+}
+
+//#endregion
+export { useContext };

package/dist/context.js

@@ -1,150 +1 @@
-/*!
-  * Gx Design Pro
-  * Version: 0.0.3
-  * Author: gx12358
-  * Copyright (C) 2024 gx12358
-  * License: MIT License
-  * Description: Gx Design Context
-  * Date Created: 2025-12-14 
-  * Homepage: 
-  * Contact: gx12358@gmail.com
-*/
-import { defineComponent as y, provide as x, toRefs as C, inject as v, nextTick as T, ref as f, watch as d, computed as p } from "vue";
-import { isObject as k, getRandomNumber as w } from "@gx-design-vue/pro-utils";
-import { useDark as b, useToggle as j, useColorMode as D } from "@vueuse/core";
-let u = null;
-function g(e) {
-  return u || (u = Symbol(e), u);
-}
-const P = /* @__PURE__ */ y({
-  name: "ContextProvider",
-  inheritAttrs: !1,
-  props: {
-    contextKey: {
-      type: [String],
-      required: !0
-    },
-    value: {
-      type: Object,
-      required: !0
-    }
-  },
-  slots: Object,
-  setup(e, {
-    slots: n
-  }) {
-    return e.contextKey && e.value && k(e.value) ? x(g(e.contextKey), {
-      ...C(e.value),
-      contextId: `${e.contextKey}-${w().uuid(10)}`
-    }) : console.warn("[ContextProvider]: contextKey is required"), () => n.default?.();
-  }
-}), q = (e, n) => {
-  if (typeof u == "symbol")
-    return v(g(e), n || {});
-};
-function K(e, n) {
-  const a = Symbol(e);
-  return {
-    provideContext: (t) => {
-      x(a, t);
-    },
-    useInjectContext: (t) => v(a, t || n || {}),
-    contextInjectKey: a
-  };
-}
-const { provideContext: S, useInjectContext: B } = K("theme-provider"), A = b({
-  storageKey: "gx-pro-theme-appearance"
-}), O = j(A);
-function F(e, n) {
-  if (!(document.startViewTransition && !window.matchMedia("(prefers-reduced-motion: reduce)").matches)) {
-    n.setTheme?.(n.isDark ? "dark" : "light");
-    return;
-  }
-  const r = e.getBoundingClientRect(), o = r.left + r.width / 2, t = r.top + r.height / 2, c = Math.hypot(Math.max(o, innerWidth - o), Math.max(t, innerHeight - t)), m = 100 * o / innerWidth, s = 100 * t / innerHeight, h = Math.hypot(innerWidth, innerHeight) / Math.SQRT2, i = 100 * c / h;
-  document.startViewTransition(async () => {
-    n.setTheme?.(n.isDark ? "dark" : "light"), await T();
-  }).ready.then(() => {
-    const l = [
-      `circle(0% at ${m}% ${s}%)`,
-      `circle(${i}% at ${m}% ${s}%)`
-    ];
-    document.documentElement.animate({
-      clipPath: n.isDark ? [...l].reverse() : l
-    }, {
-      duration: 400,
-      // 保持最终状态
-      fill: "forwards",
-      easing: "ease-in",
-      pseudoElement: n.isDark ? "::view-transition-old(root)" : "::view-transition-new(root)"
-    });
-  });
-}
-const H = /* @__PURE__ */ y({
-  name: "ThemeContext",
-  inheritAttrs: !1,
-  props: {
-    theme: {
-      type: String
-    },
-    defaultTheme: {
-      type: String,
-      default: "system"
-    },
-    onChange: {
-      type: Function
-    },
-    "onUpdate:theme": {
-      type: Function
-    },
-    onChangeBase: {
-      type: Function
-    }
-  },
-  emits: ["change", "changeBase", "update:theme"],
-  slots: Object,
-  setup(e, {
-    slots: n,
-    emit: a
-  }) {
-    const r = document.querySelector("html"), o = f(), t = f(e.theme || e.defaultTheme || "system");
-    d(() => e.theme, (i) => {
-      i && (t.value = i);
-    });
-    const {
-      system: c,
-      store: m
-    } = D();
-    d(() => c.value, () => {
-      s();
-    }, {
-      immediate: !0
-    }), d(() => o.value, (i) => {
-      i && e.onChangeBase?.(i);
-    }, {
-      immediate: !0
-    }), d(t, (i) => {
-      e.onChange?.(i), a("update:theme", i), s();
-    });
-    function s() {
-      r && (t.value === "system" ? (o.value = c.value, r.setAttribute("data-theme", o.value)) : (o.value = t.value, r.setAttribute("data-theme", t.value)), m.value = o.value);
-    }
-    function h(i) {
-      t.value = i, s();
-    }
-    return S({
-      theme: t,
-      resolvedTheme: o,
-      isDark: p(() => o.value === "dark"),
-      setTheme: h
-    }), () => n.default();
-  }
-});
-export {
-  P as ContextProvider,
-  H as ThemeContext,
-  F as toggleAnimateTheme,
-  O as toggleDark,
-  K as useContext,
-  q as useContextProvider,
-  B as useThemeContext
-};
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`),require(`@gx-design-vue/pro-utils`),require(`@vueuse/core`)):typeof define==`function`&&define.amd?define([`exports`,`vue`,`@gx-design-vue/pro-utils`,`@vueuse/core`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.Context={},e.vue,e._gx_design_vue_pro_utils,e._vueuse_core))})(this,function(e,t,n,r){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function i(e,n){let r=Symbol(e);return{provideContext:e=>{(0,t.provide)(r,e)},useInjectContext:e=>(0,t.inject)(r,e||n||{}),contextInjectKey:r}}var a=null;function o(e){return a||(a=Symbol(e),a)}var s=(0,t.defineComponent)((e,{slots:r})=>(e.contextKey&&e.value&&(0,n.isObject)(e.value)?(0,t.provide)(o(e.contextKey),{...(0,t.toRefs)(e.value),contextId:`${e.contextKey}-${(0,n.getRandomNumber)().uuid(10)}`}):console.warn(`[ContextProvider]: contextKey is required`),()=>r.default?.()),{props:{contextKey:{type:String,required:!0,default:void 0},value:{required:!0,default:void 0}}});function c(e,n){if(typeof a==`symbol`)return(0,t.inject)(o(e),n||{})}let{provideContext:l,useInjectContext:u}=i(`theme-provider`),d=(0,r.useDark)({storageKey:`gx-pro-theme-appearance`}),f=(0,r.useToggle)(d);var p=(0,t.defineComponent)((e,{slots:n,emit:i})=>{let a=document.querySelector(`html`),o=(0,t.ref)(),s=(0,t.ref)(e.theme||e.defaultTheme||`system`);(0,t.watch)(()=>e.theme,e=>{e&&(s.value=e)});let{system:c,store:u}=(0,r.useColorMode)();(0,t.watch)(()=>c.value,()=>{d()},{immediate:!0}),(0,t.watch)(()=>o.value,t=>{t&&e.onChangeBase?.(t)},{immediate:!0}),(0,t.watch)(s,t=>{e.onChange?.(t),i(`update:theme`,t),d()});function d(){a&&(s.value===`system`?(o.value=c.value,a.setAttribute(`data-theme`,o.value)):(o.value=s.value,a.setAttribute(`data-theme`,s.value)),u.value=o.value)}function f(e){s.value=e,d()}return l({theme:s,resolvedTheme:o,isDark:(0,t.computed)(()=>o.value===`dark`),setTheme:f}),()=>n.default?.()},{emits:[`change`,`changeBase`,`update:theme`],props:(0,t.mergeDefaults)({theme:{type:String,required:!1,default:void 0},defaultTheme:{type:String,required:!1,default:void 0},onChange:{type:Function,required:!1,default:void 0},onChangeBase:{type:Function,required:!1,default:void 0},onUpdateTheme:{type:Function,required:!1,default:void 0}},{defaultTheme:`system`}),name:`ThemeContext`,inheritAttrs:!1});function m(e,n){if(!(document.startViewTransition&&!window.matchMedia(`(prefers-reduced-motion: reduce)`).matches)){n.setTheme?.(n.isDark?`dark`:`light`);return}let r=e.getBoundingClientRect(),i=r.left+r.width/2,a=r.top+r.height/2,o=Math.hypot(Math.max(i,innerWidth-i),Math.max(a,innerHeight-a)),s=100*i/innerWidth,c=100*a/innerHeight,l=Math.hypot(innerWidth,innerHeight)/Math.SQRT2,u=100*o/l;document.startViewTransition(async()=>{n.setTheme?.(n.isDark?`dark`:`light`),await(0,t.nextTick)()}).ready.then(()=>{let e=[`circle(0% at ${s}% ${c}%)`,`circle(${u}% at ${s}% ${c}%)`];document.documentElement.animate({clipPath:n.isDark?[...e].reverse():e},{duration:400,fill:`forwards`,easing:`ease-in`,pseudoElement:n.isDark?`::view-transition-old(root)`:`::view-transition-new(root)`})})}e.ContextProvider=s,e.ThemeContext=p,e.toggleAnimateTheme=m,e.toggleDark=f,e.useContext=i,e.useContextProvider=c,e.useThemeContext=u});

package/dist/index.d.ts

@@ -1,2 +1,9 @@
-export * from './context';
-export * from './theme-context';
+import { ContextProvider, useContextProvider } from "./context/ContextProvider.js";
+import { useContext } from "./context/index.js";
+import { BaseTheme, ThemeProviderContext, ThemeValue } from "./theme-context/types.js";
+import { useThemeContext } from "./theme-context/context.js";
+import { toggleDark } from "./theme-context/dark.js";
+import ThemeContext from "./theme-context/ThemeContext.js";
+import { toggleAnimateTheme } from "./theme-context/utils.js";
+import "./theme-context/index.js";
+export { BaseTheme, ContextProvider, ThemeContext, ThemeProviderContext, ThemeValue, toggleAnimateTheme, toggleDark, useContext, useContextProvider, useThemeContext };

package/dist/index.js

@@ -0,0 +1,9 @@
+import { useContext } from "./context/index.js";
+import { ContextProvider, useContextProvider } from "./context/ContextProvider.js";
+import { useThemeContext } from "./theme-context/context.js";
+import { toggleDark } from "./theme-context/dark.js";
+import ThemeContext_default from "./theme-context/ThemeContext.js";
+import { toggleAnimateTheme } from "./theme-context/utils.js";
+import "./theme-context/index.js";
+
+export { ContextProvider, ThemeContext_default as ThemeContext, toggleAnimateTheme, toggleDark, useContext, useContextProvider, useThemeContext };

package/dist/theme-context/ThemeContext.d.ts

@@ -1,46 +1,23 @@
-import type { PropType, SlotsType } from 'vue';
-import type { BaseTheme, ThemeValue } from './types';
-declare const ThemeContext: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    theme: {
-        type: PropType<ThemeValue>;
-    };
-    defaultTheme: {
-        type: PropType<ThemeValue>;
-        default: string;
-    };
-    onChange: {
-        type: PropType<(theme: ThemeValue) => void>;
-    };
-    'onUpdate:theme': {
-        type: PropType<(theme: ThemeValue) => void>;
-    };
-    onChangeBase: {
-        type: PropType<(theme: BaseTheme) => void>;
-    };
-}>, () => void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "changeBase" | "update:theme")[], "change" | "changeBase" | "update:theme", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    theme: {
-        type: PropType<ThemeValue>;
-    };
-    defaultTheme: {
-        type: PropType<ThemeValue>;
-        default: string;
-    };
-    onChange: {
-        type: PropType<(theme: ThemeValue) => void>;
-    };
-    'onUpdate:theme': {
-        type: PropType<(theme: ThemeValue) => void>;
-    };
-    onChangeBase: {
-        type: PropType<(theme: BaseTheme) => void>;
-    };
-}>> & Readonly<{
-    onChange?: ((...args: any[]) => any) | undefined;
-    "onUpdate:theme"?: ((...args: any[]) => any) | undefined;
-    onChangeBase?: ((...args: any[]) => any) | undefined;
-}>, {
-    defaultTheme: ThemeValue;
-}, SlotsType<{
-    default(): void;
-}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default ThemeContext;
+import { BaseTheme, ThemeValue } from "./types.js";
+import * as vue1 from "vue";
+import { SlotsType } from "vue";
+
+//#region src/theme-context/ThemeContext.d.ts
+interface ThemeContextProps {
+  theme?: ThemeValue;
+  defaultTheme?: ThemeValue;
+  onChange?: (theme: ThemeValue) => void;
+  onChangeBase?: (theme: BaseTheme) => void;
+  onUpdateTheme?: (theme: ThemeValue) => void;
+}
+interface ThemeContextEmits {
+  change: (value: ThemeValue) => void;
+  changeBase: (value: BaseTheme) => void;
+  'update:theme': (value: ThemeValue) => void;
+}
+interface ThemeContextSlots {
+  default?: () => any;
+}
+declare const ThemeContext: vue1.DefineSetupFnComponent<ThemeContextProps, ThemeContextEmits, SlotsType<ThemeContextSlots>, ThemeContextProps, vue1.PublicProps>;
+//#endregion
+export { ThemeContextEmits, ThemeContextSlots, ThemeContext as default };

package/dist/theme-context/ThemeContext.js

@@ -0,0 +1,87 @@
+import { createThemeContext } from "./context.js";
+import { computed, defineComponent, mergeDefaults, ref, watch } from "vue";
+import { useColorMode } from "@vueuse/core";
+
+//#region src/theme-context/ThemeContext.tsx
+const ThemeContext = /* @__PURE__ */ defineComponent((props, { slots, emit }) => {
+	const html = document.querySelector("html");
+	const theme = ref();
+	const systemTheme = ref(props.theme || props.defaultTheme || "system");
+	watch(() => props.theme, (val) => {
+		if (val) systemTheme.value = val;
+	});
+	const { system, store } = useColorMode();
+	watch(() => system.value, () => {
+		updateSystemThem();
+	}, { immediate: true });
+	watch(() => theme.value, (val) => {
+		if (val) props.onChangeBase?.(val);
+	}, { immediate: true });
+	watch(systemTheme, (val) => {
+		props.onChange?.(val);
+		emit("update:theme", val);
+		updateSystemThem();
+	});
+	function updateSystemThem() {
+		if (html) {
+			if (systemTheme.value === "system") {
+				theme.value = system.value;
+				html.setAttribute("data-theme", theme.value);
+			} else {
+				theme.value = systemTheme.value;
+				html.setAttribute("data-theme", systemTheme.value);
+			}
+			store.value = theme.value;
+		}
+	}
+	function setTheme(val) {
+		systemTheme.value = val;
+		updateSystemThem();
+	}
+	createThemeContext({
+		theme: systemTheme,
+		resolvedTheme: theme,
+		isDark: computed(() => theme.value === "dark"),
+		setTheme
+	});
+	return () => slots.default?.();
+}, {
+	emits: [
+		"change",
+		"changeBase",
+		"update:theme"
+	],
+	props: /* @__PURE__ */ mergeDefaults({
+		theme: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		defaultTheme: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onChangeBase: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onUpdateTheme: {
+			type: Function,
+			required: false,
+			default: void 0
+		}
+	}, { defaultTheme: "system" }),
+	name: "ThemeContext",
+	inheritAttrs: false
+});
+var ThemeContext_default = ThemeContext;
+
+//#endregion
+export { ThemeContext_default as default };

package/dist/theme-context/context.d.ts

@@ -1,2 +1,6 @@
-import type { ThemeProviderContext } from './types';
-export declare const createThemeContext: (value: ThemeProviderContext) => void, useThemeContext: (injectDefaultValue?: ThemeProviderContext | undefined) => ThemeProviderContext;
+import { ThemeProviderContext } from "./types.js";
+
+//#region src/theme-context/context.d.ts
+declare const createThemeContext: (value: ThemeProviderContext) => void, useThemeContext: (injectDefaultValue?: ThemeProviderContext | undefined) => ThemeProviderContext;
+//#endregion
+export { createThemeContext, useThemeContext };

package/dist/theme-context/context.js

@@ -0,0 +1,7 @@
+import { useContext } from "../context/index.js";
+
+//#region src/theme-context/context.ts
+const { provideContext: createThemeContext, useInjectContext: useThemeContext } = useContext("theme-provider");
+
+//#endregion
+export { createThemeContext, useThemeContext };

package/dist/theme-context/dark.d.ts

@@ -1,2 +1,7 @@
-export declare const isDark: import("vue").WritableComputedRef<boolean, boolean>;
-export declare const toggleDark: (value?: boolean | undefined) => boolean;
+import * as _vueuse_core0 from "@vueuse/core";
+
+//#region src/theme-context/dark.d.ts
+declare const isDark: _vueuse_core0.UseDarkReturn;
+declare const toggleDark: (value?: boolean | undefined) => boolean;
+//#endregion
+export { isDark, toggleDark };

package/dist/theme-context/dark.js

@@ -0,0 +1,8 @@
+import { useDark, useToggle } from "@vueuse/core";
+
+//#region src/theme-context/dark.ts
+const isDark = useDark({ storageKey: "gx-pro-theme-appearance" });
+const toggleDark = useToggle(isDark);
+
+//#endregion
+export { isDark, toggleDark };

package/dist/theme-context/index.d.ts

@@ -1,6 +1,6 @@
-import { useThemeContext } from './context';
-import { toggleDark } from './dark';
-export { toggleDark, useThemeContext };
-export * from './utils';
-export * from './types';
-export { default as ThemeContext } from './ThemeContext';
+import { BaseTheme, ThemeProviderContext, ThemeValue } from "./types.js";
+import { useThemeContext } from "./context.js";
+import { toggleDark } from "./dark.js";
+import ThemeContext from "./ThemeContext.js";
+import { toggleAnimateTheme } from "./utils.js";
+export { BaseTheme, ThemeContext, ThemeProviderContext, ThemeValue, toggleAnimateTheme, toggleDark, useThemeContext };

package/dist/theme-context/index.js

@@ -0,0 +1,6 @@
+import { useThemeContext } from "./context.js";
+import { toggleDark } from "./dark.js";
+import ThemeContext_default from "./ThemeContext.js";
+import { toggleAnimateTheme } from "./utils.js";
+
+export { ThemeContext_default as ThemeContext, toggleAnimateTheme, toggleDark, useThemeContext };

package/dist/theme-context/types.d.ts

@@ -1,9 +1,13 @@
-import type { ComputedRef, Ref } from 'vue';
-export type BaseTheme = 'light' | 'dark';
-export type ThemeValue = 'light' | 'dark' | 'system';
-export interface ThemeProviderContext {
-    theme: Ref<ThemeValue>;
-    resolvedTheme: Ref<BaseTheme>;
-    isDark: ComputedRef<boolean>;
-    setTheme: (theme: ThemeValue) => void;
+import { ComputedRef, Ref } from "vue";
+
+//#region src/theme-context/types.d.ts
+type BaseTheme = 'light' | 'dark';
+type ThemeValue = 'light' | 'dark' | 'system';
+interface ThemeProviderContext {
+  theme: Ref<ThemeValue>;
+  resolvedTheme: Ref<BaseTheme>;
+  isDark: ComputedRef<boolean>;
+  setTheme: (theme: ThemeValue) => void;
 }
+//#endregion
+export { BaseTheme, ThemeProviderContext, ThemeValue };

package/dist/theme-context/types.js

@@ -0,0 +1 @@
+export {  };

package/dist/theme-context/utils.d.ts

@@ -1,5 +1,9 @@
-import type { BaseTheme } from './types';
-export declare function toggleAnimateTheme(el: HTMLElement, props: {
-    isDark: boolean;
-    setTheme?: (value: BaseTheme) => void;
+import { BaseTheme } from "./types.js";
+
+//#region src/theme-context/utils.d.ts
+declare function toggleAnimateTheme(el: HTMLElement, props: {
+  isDark: boolean;
+  setTheme?: (value: BaseTheme) => void;
 }): void;
+//#endregion
+export { toggleAnimateTheme };

package/dist/theme-context/utils.js

@@ -0,0 +1,32 @@
+import { nextTick } from "vue";
+
+//#region src/theme-context/utils.ts
+function toggleAnimateTheme(el, props) {
+	if (!(document.startViewTransition && !window.matchMedia("(prefers-reduced-motion: reduce)").matches)) {
+		props.setTheme?.(props.isDark ? "dark" : "light");
+		return;
+	}
+	const rect = el.getBoundingClientRect();
+	const x = rect.left + rect.width / 2;
+	const y = rect.top + rect.height / 2;
+	const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
+	const ratioX = 100 * x / innerWidth;
+	const ratioY = 100 * y / innerHeight;
+	const referR = Math.hypot(innerWidth, innerHeight) / Math.SQRT2;
+	const ratioR = 100 * endRadius / referR;
+	document.startViewTransition(async () => {
+		props.setTheme?.(props.isDark ? "dark" : "light");
+		await nextTick();
+	}).ready.then(() => {
+		const clipPath = [`circle(0% at ${ratioX}% ${ratioY}%)`, `circle(${ratioR}% at ${ratioX}% ${ratioY}%)`];
+		document.documentElement.animate({ clipPath: props.isDark ? [...clipPath].reverse() : clipPath }, {
+			duration: 400,
+			fill: "forwards",
+			easing: "ease-in",
+			pseudoElement: props.isDark ? "::view-transition-old(root)" : "::view-transition-new(root)"
+		});
+	});
+}
+
+//#endregion
+export { toggleAnimateTheme };

package/global.d.ts

@@ -0,0 +1,8 @@
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    ThemeContext: typeof import('@gx-design-vue/context')['ThemeContext']
+    ContextProvider: typeof import('@gx-design-vue/context')['ContextProvider']
+  }
+}

package/package.json

@@ -1,41 +1,66 @@
 {
   "name": "@gx-design-vue/context",
   "type": "module",
-  "version": "0.0.4",
+  "version": "0.0.5-beta.1",
   "description": "Gx Design Context",
+  "author": {
+    "name": "gx12358",
+    "email": "gx12358@gmail.com",
+    "url": "https://github.com/gx12358"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gx12358/pro-components-next.git",
+    "directory": "packages/context"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/context.js",
-      "require": "./dist/context.umd.cjs"
-    }
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./dist/*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.js",
+      "default": "./dist/*.js"
+    },
+    "./global.d.ts": "./global.d.ts",
+    "./global": "./global.d.ts",
+    "./package.json": "./package.json"
   },
-  "main": "./dist/context.umd.cjs",
-  "module": "./dist/context.js",
-  "types": "./dist",
+  "unpkg": "dist/context.js",
+  "jsdelivr": "dist/context.js",
   "files": [
-    "dist"
+    "dist",
+    "global.d.ts",
+    "package.json"
   ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "types": "vue-tsc --declaration --emitDeclarationOnly",
-    "preview": "vite preview --port 5050",
-    "test:unit": "vitest --environment jsdom",
-    "typecheck": "vue-tsc --noEmit && vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
-    "lint": "TIMING=1 eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+  "contributes": {
+    "html": {
+      "customData": [
+        "./web-tags.json"
+      ]
+    }
   },
   "peerDependencies": {
-    "vue": ">=3.0.0"
+    "vue": ">=3.2.0"
   },
   "dependencies": {
-    "@vueuse/core": "^14.0.0",
-    "@gx-design-vue/pro-utils": "^0.2.0-beta.85"
-  },
-  "devDependencies": {
-    "typescript": "^5.3.3"
+    "@vueuse/core": "^14.2.0",
+    "@gx-design-vue/pro-utils": "0.2.0-beta.90"
   },
-  "authors": [
-    "gx12358 <gx12358@gmail.com> (https://github.com/gx12358)"
-  ]
-}
+  "web-types": "web-types.json",
+  "browserslist": [
+    "> 1%",
+    "not ie 11",
+    "not op_mini all"
+  ],
+  "scripts": {
+    "test": "vitest run",
+    "build": "run-s build:esm build:umd",
+    "build:esm": "tsdown",
+    "build:umd": "vite build",
+    "prepublish": "pnpm build"
+  }
+}

package/dist/context.umd.cjs

@@ -1,12 +0,0 @@
-/*!
-  * Gx Design Pro
-  * Version: 0.0.3
-  * Author: gx12358
-  * Copyright (C) 2024 gx12358
-  * License: MIT License
-  * Description: Gx Design Context
-  * Date Created: 2025-12-14 
-  * Homepage: 
-  * Contact: gx12358@gmail.com
-*/
-(function(n,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("@gx-design-vue/pro-utils"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","@gx-design-vue/pro-utils","@vueuse/core"],t):(n=typeof globalThis<"u"?globalThis:n||self,t(n.GContext={},n.vue,n.proUtils,n.core))})(this,(function(n,t,y,l){"use strict";let d=null;function g(e){return d||(d=Symbol(e),d)}const T=t.defineComponent({name:"ContextProvider",inheritAttrs:!1,props:{contextKey:{type:[String],required:!0},value:{type:Object,required:!0}},slots:Object,setup(e,{slots:o}){return e.contextKey&&e.value&&y.isObject(e.value)?t.provide(g(e.contextKey),{...t.toRefs(e.value),contextId:`${e.contextKey}-${y.getRandomNumber().uuid(10)}`}):console.warn("[ContextProvider]: contextKey is required"),()=>o.default?.()}}),v=(e,o)=>{if(typeof d=="symbol")return t.inject(g(e),o||{})};function x(e,o){const u=Symbol(e);return{provideContext:i=>{t.provide(u,i)},useInjectContext:i=>t.inject(u,i||o||{}),contextInjectKey:u}}const{provideContext:p,useInjectContext:w}=x("theme-provider"),k=l.useDark({storageKey:"gx-pro-theme-appearance"}),j=l.useToggle(k);function b(e,o){if(!(document.startViewTransition&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches)){o.setTheme?.(o.isDark?"dark":"light");return}const s=e.getBoundingClientRect(),r=s.left+s.width/2,i=s.top+s.height/2,m=Math.hypot(Math.max(r,innerWidth-r),Math.max(i,innerHeight-i)),h=100*r/innerWidth,c=100*i/innerHeight,f=Math.hypot(innerWidth,innerHeight)/Math.SQRT2,a=100*m/f;document.startViewTransition(async()=>{o.setTheme?.(o.isDark?"dark":"light"),await t.nextTick()}).ready.then(()=>{const C=[`circle(0% at ${h}% ${c}%)`,`circle(${a}% at ${h}% ${c}%)`];document.documentElement.animate({clipPath:o.isDark?[...C].reverse():C},{duration:400,fill:"forwards",easing:"ease-in",pseudoElement:o.isDark?"::view-transition-old(root)":"::view-transition-new(root)"})})}const S=t.defineComponent({name:"ThemeContext",inheritAttrs:!1,props:{theme:{type:String},defaultTheme:{type:String,default:"system"},onChange:{type:Function},"onUpdate:theme":{type:Function},onChangeBase:{type:Function}},emits:["change","changeBase","update:theme"],slots:Object,setup(e,{slots:o,emit:u}){const s=document.querySelector("html"),r=t.ref(),i=t.ref(e.theme||e.defaultTheme||"system");t.watch(()=>e.theme,a=>{a&&(i.value=a)});const{system:m,store:h}=l.useColorMode();t.watch(()=>m.value,()=>{c()},{immediate:!0}),t.watch(()=>r.value,a=>{a&&e.onChangeBase?.(a)},{immediate:!0}),t.watch(i,a=>{e.onChange?.(a),u("update:theme",a),c()});function c(){s&&(i.value==="system"?(r.value=m.value,s.setAttribute("data-theme",r.value)):(r.value=i.value,s.setAttribute("data-theme",i.value)),h.value=r.value)}function f(a){i.value=a,c()}return p({theme:i,resolvedTheme:r,isDark:t.computed(()=>r.value==="dark"),setTheme:f}),()=>o.default()}});n.ContextProvider=T,n.ThemeContext=S,n.toggleAnimateTheme=b,n.toggleDark=j,n.useContext=x,n.useContextProvider=v,n.useThemeContext=w,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));