@cck-ui/core 0.2.0 → 0.3.3

package/esm/core/config-provider/config-provider.mjs

@@ -1,7 +1,15 @@
 "use client";
 import { CONFIG_KEY, THEME_KEY } from "./config-provider.types.mjs";
+import { useProviderColorScheme } from "./use-cck-color-scheme/use-provider-color-scheme.mjs";
+import { localStorageColorSchemeManager } from "./color-scheme-managers/local-storage-manager.mjs";
+import { useRespectReduceMotion } from "./use-respect-reduce-motion/use-respect-reduce-motion.mjs";
+import { DEFAULT_THEME } from "./default-theme.mjs";
+import { mergeCckTheme } from "./merge-cck-theme/merge-cck-theme.mjs";
+import "./baseline.mjs";
+import "./global.mjs";
+import "./default-css-variables.mjs";
 import export_helper_default from "../../_virtual/_/plugin-vue/export-helper.mjs";
-import { defineComponent, provide, renderSlot } from "vue";
+import { computed, defineComponent, provide, renderSlot } from "vue";
 //#region packages/@cck-ui/core/src/core/config-provider/config-provider.vue
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "CckConfigProvider",
@@ -11,9 +19,15 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			type: null,
 			required: false
 		},
+		colorSchemeManager: {
+			type: Object,
+			required: false,
+			default: () => localStorageColorSchemeManager()
+		},
 		defaultColorScheme: {
 			type: String,
-			required: false
+			required: false,
+			default: "light"
 		},
 		forceColorScheme: {
 			type: String,
@@ -21,27 +35,33 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		},
 		cssVariablesSelector: {
 			type: String,
-			required: false
+			required: false,
+			default: ":root"
 		},
 		withCssVariables: {
 			type: Boolean,
-			required: false
+			required: false,
+			default: true
 		},
 		getRootElement: {
 			type: Function,
-			required: false
+			required: false,
+			default: () => document.documentElement
 		},
 		classNamesPrefix: {
 			type: String,
-			required: false
+			required: false,
+			default: "c"
 		},
 		withStaticClasses: {
 			type: Boolean,
-			required: false
+			required: false,
+			default: true
 		},
 		withGlobalClasses: {
 			type: Boolean,
-			required: false
+			required: false,
+			default: true
 		},
 		stylesTransform: {
 			type: Object,
@@ -55,9 +75,43 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	setup(__props, { expose: __expose }) {
 		__expose();
 		const config = __props;
-		provide(CONFIG_KEY, config);
-		config.theme && provide(THEME_KEY, config.theme);
-		const __returned__ = { config };
+		const { defaultColorScheme, forceColorScheme, colorSchemeManager, getRootElement, theme: userTheme } = config;
+		const finalTheme = computed(() => {
+			if (userTheme) return mergeCckTheme(DEFAULT_THEME, userTheme);
+			return DEFAULT_THEME;
+		});
+		const { colorScheme, setColorScheme, clearColorScheme } = useProviderColorScheme({
+			defaultColorScheme,
+			forceColorScheme,
+			manager: colorSchemeManager,
+			getRootElement
+		});
+		useRespectReduceMotion({
+			respectReduceMotion: config.theme?.respectReducedMotion || false,
+			getRootElement
+		});
+		const { theme: _excludedTheme, ...configWithoutTheme } = config;
+		provide(CONFIG_KEY, {
+			...configWithoutTheme,
+			colorScheme,
+			setColorScheme,
+			clearColorScheme
+		});
+		provide(THEME_KEY, finalTheme);
+		const __returned__ = {
+			config,
+			defaultColorScheme,
+			forceColorScheme,
+			colorSchemeManager,
+			getRootElement,
+			userTheme,
+			finalTheme,
+			colorScheme,
+			setColorScheme,
+			clearColorScheme,
+			_excludedTheme,
+			configWithoutTheme
+		};
 		Object.defineProperty(__returned__, "__isScriptSetup", {
 			enumerable: false,
 			value: true
@@ -68,7 +122,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 	return renderSlot(_ctx.$slots, "default");
 }
-var config_provider_default = /*#__PURE__*/ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "D:\\work\\jackatlas\\cck-ui\\packages\\@cck-ui\\core\\src\\core\\config-provider\\config-provider.vue"]]);
+var config_provider_default = /*#__PURE__*/ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/cck-ui/cck-ui/packages/@cck-ui/core/src/core/config-provider/config-provider.vue"]]);
 //#endregion
 export { config_provider_default as default };
 

package/esm/core/config-provider/config-provider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"config-provider.mjs","names":[],"sources":["../../../src/core/config-provider/config-provider.vue","../../../src/core/config-provider/config-provider.vue"],"sourcesContent":["<template>\n  <slot />\n</template>\n\n<script setup lang=\"ts\">\nimport { provide } from 'vue'\nimport {\n  CONFIG_KEY,\n  type ConfigProviderProps,\n  THEME_KEY\n} from './config-provider.types'\n\ndefineOptions({\n  name: 'CckConfigProvider'\n})\n\nconst config = defineProps<ConfigProviderProps>()\n\nprovide(CONFIG_KEY, config)\nconfig.theme && provide(THEME_KEY, config.theme)\n</script>\n",null],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgBA,MAAM,SAAS;EAEf,QAAQ,YAAY,MAAM;EAC1B,OAAO,SAAS,QAAQ,WAAW,OAAO,KAAK;;;;;;;;;;QClB7C,WAAQ,KAAA,QAAA,SAAA"}
+{"version":3,"file":"config-provider.mjs","names":[],"sources":["../../../src/core/config-provider/config-provider.vue"],"sourcesContent":["<template>\n  <slot />\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, provide } from 'vue'\nimport { CONFIG_KEY, type ConfigProviderProps, THEME_KEY } from './config-provider.types'\nimport { useProviderColorScheme } from './use-cck-color-scheme/use-provider-color-scheme'\nimport { localStorageColorSchemeManager } from './color-scheme-managers'\nimport { useRespectReduceMotion } from './use-respect-reduce-motion/use-respect-reduce-motion'\nimport { DEFAULT_THEME } from './default-theme'\nimport { mergeCckTheme } from './merge-cck-theme'\nimport { CContextValue } from './config-provider.context'\nimport './baseline.css'\nimport './global.css'\nimport './default-css-variables.css'\n\ndefineOptions({\n  name: 'CckConfigProvider',\n})\n\nconst config = withDefaults(defineProps<ConfigProviderProps>(), {\n  withStaticClasses: true,\n  withGlobalClasses: true,\n  withCssVariables: true,\n  classNamesPrefix: 'c',\n  defaultColorScheme: 'light',\n  cssVariablesSelector: ':root',\n  colorSchemeManager: () => localStorageColorSchemeManager(),\n  getRootElement: () => document.documentElement,\n})\n\nconst {\n  defaultColorScheme,\n  forceColorScheme,\n  colorSchemeManager,\n  getRootElement,\n  theme: userTheme,\n} = config\n\nconst finalTheme = computed(() => {\n  if (userTheme) {\n    return mergeCckTheme(DEFAULT_THEME, userTheme)\n  }\n\n  return DEFAULT_THEME\n})\n\nconst { colorScheme, setColorScheme, clearColorScheme } = useProviderColorScheme({\n  defaultColorScheme,\n  forceColorScheme,\n  manager: colorSchemeManager,\n  getRootElement,\n})\n\nuseRespectReduceMotion({\n  respectReduceMotion: config.theme?.respectReducedMotion || false,\n  getRootElement,\n})\n\nconst { theme: _excludedTheme, ...configWithoutTheme } = config\nprovide<CContextValue>(CONFIG_KEY, {\n  ...configWithoutTheme,\n  colorScheme,\n  setColorScheme,\n  clearColorScheme,\n})\nprovide(THEME_KEY, finalTheme)\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBA,MAAM,SAAS;EAWf,MAAM,EACJ,oBACA,kBACA,oBACA,gBACA,OAAO,cACL;EAEJ,MAAM,aAAa,eAAe;GAChC,IAAI,WACF,OAAO,cAAc,eAAe,SAAS;GAG/C,OAAO;EACT,CAAC;EAED,MAAM,EAAE,aAAa,gBAAgB,qBAAqB,uBAAuB;GAC/E;GACA;GACA,SAAS;GACT;EACF,CAAC;EAED,uBAAuB;GACrB,qBAAqB,OAAO,OAAO,wBAAwB;GAC3D;EACF,CAAC;EAED,MAAM,EAAE,OAAO,gBAAgB,GAAG,uBAAuB;EACzD,QAAuB,YAAY;GACjC,GAAG;GACH;GACA;GACA;EACF,CAAC;EACD,QAAQ,WAAW,UAAU;;;;;;;;;;;;;;;;;;;;;;;QAlE3B,WAAQ,KAAA,QAAA,SAAA"}

package/esm/core/config-provider/config-provider.types.mjs

@@ -1,7 +1,7 @@
 "use client";
 //#region packages/@cck-ui/core/src/core/config-provider/config-provider.types.ts
 const CONFIG_KEY = Symbol("CCK_CONFIG_KEY");
-const THEME_KEY = Symbol("THEME_SLATE");
+const THEME_KEY = Symbol("CCK_THEME");
 //#endregion
 export { CONFIG_KEY, THEME_KEY };
 

package/esm/core/config-provider/config-provider.types.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"config-provider.types.mjs","names":[],"sources":["../../../src/core/config-provider/config-provider.types.ts"],"sourcesContent":["import { CStylesTransform } from './config-provider.context'\nimport { CColorScheme, CThemeOverride } from './theme.types'\n\nexport const CONFIG_KEY = Symbol('CCK_CONFIG_KEY')\n\nexport const THEME_KEY = Symbol('THEME_SLATE')\n\nexport interface ConfigProviderProps {\n  /**\n   * @description Theme override object\n   */\n  theme?: CThemeOverride\n\n  /**\n   * @description Default color scheme value used when `colorSchemeManager` cannot retrieve value from external storage\n   */\n  defaultColorScheme?: CColorScheme\n\n  /**\n   * @description Forces color scheme value, if set, useTheme ignores `colorSchemeManager` and `defaultColorScheme`\n   */\n  forceColorScheme?: 'light' | 'dark'\n\n  /**\n   * @description CSS selector to which CSS variales should be added\n   */\n  cssVariablesSelector?: string\n\n  /**\n   * @description Determines whether theme CSS variables should be added to given `cssVariablesSelector`\n   */\n  withCssVariables?: boolean\n\n  /**\n   * @description Function to resolve root element to set `data-c-color-scheme` attribute\n   * @returns root element, must return undefined on server\n   */\n  getRootElement?: () => HTMLElement | undefined\n\n  /**\n   * @description A prefix for components static classes (for example `${prefix}-text__root`)\n   */\n  classNamesPrefix?: string\n\n  /**\n   * @description Determines whether components should have static classes, for example `c-button__root`\n   */\n  withStaticClasses?: boolean\n\n  /**\n   * @description Determines whether global classes should be added with `<style />` tag. Global classes are required for `hiddenFrom`/`visibleFrom` and `lightHidden`/`darkHidden` props to work.\n   * @default true\n   */\n  withGlobalClasses?: boolean\n\n  /**\n   * An object to transform `styles` and `sx` props into css classes, can be used with CSS-in-JS libraries\n   */\n  stylesTransform?: CStylesTransform\n\n  /**\n   * @description Enviroment at which the useTheme is used, `'test'` environment disables all transitions and portals\n   */\n  env?: 'default' | 'test'\n}\n"],"mappings":";;AAGA,MAAa,aAAa,OAAO,gBAAgB;AAEjD,MAAa,YAAY,OAAO,aAAa"}
+{"version":3,"file":"config-provider.types.mjs","names":[],"sources":["../../../src/core/config-provider/config-provider.types.ts"],"sourcesContent":["import { ComputedRef, InjectionKey } from 'vue'\nimport { CColorSchemeManager } from './color-scheme-managers/types'\nimport { CContextValue, CStylesTransform } from './config-provider.context'\nimport { CColorScheme, CTheme, CThemeOverride } from './theme.types'\n\nexport const CONFIG_KEY: InjectionKey<CContextValue> = Symbol('CCK_CONFIG_KEY')\n\nexport const THEME_KEY: InjectionKey<ComputedRef<CTheme>> = Symbol('CCK_THEME')\n\nexport interface ConfigProviderProps {\n  /**\n   * @description Theme override object\n   */\n  theme?: CThemeOverride\n\n  /**\n   * @description Used to retrieve/set color scheme value in external storage, by default was `window.localStorage`\n   */\n  colorSchemeManager?: CColorSchemeManager\n\n  /**\n   * @description Default color scheme value used when `colorSchemeManager` cannot retrieve value from external storage\n   */\n  defaultColorScheme?: CColorScheme\n\n  /**\n   * @description Forces color scheme value, if set, useTheme ignores `colorSchemeManager` and `defaultColorScheme`\n   */\n  forceColorScheme?: 'light' | 'dark'\n\n  /**\n   * @description CSS selector to which CSS variales should be added\n   */\n  cssVariablesSelector?: string\n\n  /**\n   * @description Determines whether theme CSS variables should be added to given `cssVariablesSelector`\n   */\n  withCssVariables?: boolean\n\n  /**\n   * @description Function to resolve root element to set `data-c-color-scheme` attribute\n   * @returns root element, must return undefined on server\n   */\n  getRootElement?: () => HTMLElement | undefined\n\n  /**\n   * @description A prefix for components static classes (for example `${prefix}-text__root`)\n   */\n  classNamesPrefix?: string\n\n  /**\n   * @description Determines whether components should have static classes, for example `c-button__root`\n   */\n  withStaticClasses?: boolean\n\n  /**\n   * @description Determines whether global classes should be added with `<style />` tag. Global classes are required for `hiddenFrom`/`visibleFrom` and `lightHidden`/`darkHidden` props to work.\n   * @default true\n   */\n  withGlobalClasses?: boolean\n\n  /**\n   * An object to transform `styles` and `sx` props into css classes, can be used with CSS-in-JS libraries\n   */\n  stylesTransform?: CStylesTransform\n\n  /**\n   * @description Enviroment at which the useTheme is used, `'test'` environment disables all transitions and portals\n   */\n  env?: 'default' | 'test'\n}\n"],"mappings":";;AAKA,MAAa,aAA0C,OAAO,gBAAgB;AAE9E,MAAa,YAA+C,OAAO,WAAW"}

package/esm/core/config-provider/create-theme/create-theme.mjs

@@ -0,0 +1,8 @@
+//#region packages/@cck-ui/core/src/core/config-provider/create-theme/create-theme.ts
+function createTheme(theme) {
+	return theme;
+}
+//#endregion
+export { createTheme };
+
+//# sourceMappingURL=create-theme.mjs.map

package/esm/core/config-provider/create-theme/create-theme.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-theme.mjs","names":[],"sources":["../../../../src/core/config-provider/create-theme/create-theme.ts"],"sourcesContent":["import { CThemeOverride } from '../theme.types'\n\nexport function createTheme(theme: CThemeOverride): CThemeOverride {\n  return theme\n}\n"],"mappings":";AAEA,SAAgB,YAAY,OAAuC;CACjE,OAAO;AACT"}

package/esm/core/config-provider/default-css-variables.mjs

@@ -0,0 +1 @@
+"use client";

package/esm/core/config-provider/global.mjs

@@ -0,0 +1 @@
+"use client";

package/esm/core/config-provider/index.mjs

@@ -1,7 +1,8 @@
 "use client";
 import { withInstall } from "../utils/vue/install.mjs";
 import { CONFIG_KEY, THEME_KEY } from "./config-provider.types.mjs";
-import config_provider_default from "./config-provider.mjs";
+import { useProviderColorScheme } from "./use-cck-color-scheme/use-provider-color-scheme.mjs";
+import { colorsTuple } from "./color-functions/colors-tuple/colors-tuple.mjs";
 import { toRgba } from "./color-functions/to-rgba/to-rgba.mjs";
 import { darken } from "./color-functions/darken/darken.mjs";
 import { alpha, rgba } from "./color-functions/rgba/rgba.mjs";
@@ -11,11 +12,17 @@ import { parseThemeColor } from "./color-functions/parse-theme-color/parse-theme
 import { getThemeColor } from "./color-functions/get-theme-color/get-theme-color.mjs";
 import { getGradient } from "./color-functions/get-gradient/get-gradient.mjs";
 import { defaultVariantColorsResolver } from "./color-functions/default-variant-colors-resolver/default-variant-colors-resolver.mjs";
-import { useCckClassNamesPrefix, useCckCssVariablesResolver, useCckEnv, useCckIsHeadless, useCckStyleNonce, useCckStylesTransform, useCckSxTransform, useCckWithStaticClasses, useConfigContext } from "./config-provider.context.mjs";
 import { DEFAULT_THEME } from "./default-theme.mjs";
+import config_provider_default from "./config-provider.mjs";
+import { isVirtualColor, virtualColor } from "./cck-css-variables/virtual-color/virtual-color.mjs";
+import { getCSSColorVariables } from "./cck-css-variables/get-css-color-variables.mjs";
+import { defaultCssVariablesResolver } from "./cck-css-variables/default-css-variables-resolver.mjs";
+import { useCckClassNamesPrefix, useCckCssVariablesResolver, useCckEnv, useCckIsHeadless, useCckStyleNonce, useCckStylesTransform, useCckSxTransform, useCckTheme, useCckWithStaticClasses, useConfigContext } from "./config-provider.context.mjs";
+import { createTheme } from "./create-theme/create-theme.mjs";
+import { useCckColorScheme } from "./use-cck-color-scheme/use-cck-color-scheme.mjs";
 //#region packages/@cck-ui/core/src/core/config-provider/index.ts
 const CckConfigProvider = withInstall(config_provider_default);
 //#endregion
-export { CONFIG_KEY, CckConfigProvider, CckConfigProvider as default, DEFAULT_THEME, THEME_KEY, alpha, darken, defaultVariantColorsResolver, getGradient, getPrimaryShade, getThemeColor, isLightColor, luminance, parseThemeColor, rgba, toRgba, useCckClassNamesPrefix, useCckCssVariablesResolver, useCckEnv, useCckIsHeadless, useCckStyleNonce, useCckStylesTransform, useCckSxTransform, useCckWithStaticClasses, useConfigContext };
+export { CONFIG_KEY, CckConfigProvider, CckConfigProvider as default, DEFAULT_THEME, THEME_KEY, alpha, colorsTuple, createTheme, darken, defaultCssVariablesResolver, defaultVariantColorsResolver, getCSSColorVariables, getGradient, getPrimaryShade, getThemeColor, isLightColor, isVirtualColor, luminance, parseThemeColor, rgba, toRgba, useCckClassNamesPrefix, useCckColorScheme, useCckCssVariablesResolver, useCckEnv, useCckIsHeadless, useCckStyleNonce, useCckStylesTransform, useCckSxTransform, useCckTheme, useCckWithStaticClasses, useConfigContext, useProviderColorScheme, virtualColor };
 
 //# sourceMappingURL=index.mjs.map

package/esm/core/config-provider/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["ConfigProvider"],"sources":["../../../src/core/config-provider/index.ts"],"sourcesContent":["import { SFCWithInstall, withInstall } from '../utils'\nimport ConfigProvider from './config-provider.vue'\n\nexport * from './color-functions'\nexport * from './config-provider.context'\nexport * from './config-provider.types'\nexport * from './default-theme'\nexport * from './theme.types'\n\nexport const CckConfigProvider: SFCWithInstall<typeof ConfigProvider> = withInstall(ConfigProvider)\nexport default CckConfigProvider\n"],"mappings":";;;;;;;;;;;;;;;;AASA,MAAa,oBAA2D,YAAYA,uBAAc"}
+{"version":3,"file":"index.mjs","names":["ConfigProvider"],"sources":["../../../src/core/config-provider/index.ts"],"sourcesContent":["import { SFCWithInstall, withInstall } from '../utils'\nimport ConfigProvider from './config-provider.vue'\n\nexport * from './cck-css-variables'\nexport * from './color-functions'\nexport * from './config-provider.context'\nexport * from './config-provider.types'\nexport * from './create-theme/create-theme'\nexport * from './default-theme'\nexport * from './theme.types'\nexport * from './use-cck-color-scheme'\n\nexport const CckConfigProvider: SFCWithInstall<typeof ConfigProvider> = withInstall(ConfigProvider)\nexport default CckConfigProvider\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAa,oBAA2D,YAAYA,uBAAc"}

package/esm/core/config-provider/merge-cck-theme/merge-cck-theme.mjs

@@ -0,0 +1,32 @@
+import { merge } from "es-toolkit";
+//#region packages/@cck-ui/core/src/core/config-provider/merge-cck-theme/merge-cck-theme.ts
+const INVALID_PRIMARY_COLOR_ERROR = "[@cck-ui/core] ConfigProvider: Invalid theme.primaryColor, it accepts only key of theme.colors";
+const INVALID_PRIMARY_SHADE_ERROR = "[@cck-ui/core] ConfigProvider: Invalid theme.primaryShade, it accepts only 0-9 integers or an object { light: 0-9, dark: 0-9 }";
+function isValidPrimaryShade(shade) {
+	if (shade < 0 || shade > 9) return false;
+	return parseInt(shade.toString(), 10) === shade;
+}
+function validateCckTheme(theme) {
+	if (!(theme.primaryColor in theme.colors)) throw new Error(INVALID_PRIMARY_COLOR_ERROR);
+	if (typeof theme.primaryShade === "object") {
+		if (!isValidPrimaryShade(theme.primaryShade.dark) || !isValidPrimaryShade(theme.primaryShade.light)) throw new Error(INVALID_PRIMARY_SHADE_ERROR);
+	}
+	if (typeof theme.primaryShade === "number" && !isValidPrimaryShade(theme.primaryShade)) throw new Error(INVALID_PRIMARY_SHADE_ERROR);
+}
+function mergeCckTheme(currentTheme, themeOverride) {
+	if (!themeOverride) {
+		validateCckTheme(currentTheme);
+		return currentTheme;
+	}
+	const result = merge(currentTheme, themeOverride);
+	if (themeOverride.fontFamily && !themeOverride.headings?.fontFamily) result.headings = {
+		...result.headings,
+		fontFamily: themeOverride.fontFamily
+	};
+	validateCckTheme(result);
+	return result;
+}
+//#endregion
+export { INVALID_PRIMARY_COLOR_ERROR, INVALID_PRIMARY_SHADE_ERROR, mergeCckTheme, validateCckTheme };
+
+//# sourceMappingURL=merge-cck-theme.mjs.map

package/esm/core/config-provider/merge-cck-theme/merge-cck-theme.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge-cck-theme.mjs","names":[],"sources":["../../../../src/core/config-provider/merge-cck-theme/merge-cck-theme.ts"],"sourcesContent":["import { merge } from 'es-toolkit'\nimport type { CTheme, CThemeOverride } from '../theme.types'\n\nexport const INVALID_PRIMARY_COLOR_ERROR =\n  '[@cck-ui/core] ConfigProvider: Invalid theme.primaryColor, it accepts only key of theme.colors'\n\nexport const INVALID_PRIMARY_SHADE_ERROR =\n  '[@cck-ui/core] ConfigProvider: Invalid theme.primaryShade, it accepts only 0-9 integers or an object { light: 0-9, dark: 0-9 }'\n\nfunction isValidPrimaryShade(shade: number) {\n  if (shade < 0 || shade > 9) {\n    return false\n  }\n\n  return parseInt(shade.toString(), 10) === shade\n}\n\nexport function validateCckTheme(theme: CTheme): asserts theme is CTheme {\n  if (!(theme.primaryColor in theme.colors)) {\n    throw new Error(INVALID_PRIMARY_COLOR_ERROR)\n  }\n\n  if (typeof theme.primaryShade === 'object') {\n    if (\n      !isValidPrimaryShade(theme.primaryShade.dark) ||\n      !isValidPrimaryShade(theme.primaryShade.light)\n    ) {\n      throw new Error(INVALID_PRIMARY_SHADE_ERROR)\n    }\n  }\n\n  if (typeof theme.primaryShade === 'number' && !isValidPrimaryShade(theme.primaryShade)) {\n    throw new Error(INVALID_PRIMARY_SHADE_ERROR)\n  }\n}\n\nexport function mergeCckTheme(currentTheme: CTheme, themeOverride?: CThemeOverride) {\n  if (!themeOverride) {\n    validateCckTheme(currentTheme)\n    return currentTheme\n  }\n\n  const result = merge(currentTheme, themeOverride)\n\n  if (themeOverride.fontFamily && !themeOverride.headings?.fontFamily) {\n    result.headings = { ...result.headings, fontFamily: themeOverride.fontFamily }\n  }\n\n  validateCckTheme(result)\n  return result\n}\n"],"mappings":";;AAGA,MAAa,8BACX;AAEF,MAAa,8BACX;AAEF,SAAS,oBAAoB,OAAe;CAC1C,IAAI,QAAQ,KAAK,QAAQ,GACvB,OAAO;CAGT,OAAO,SAAS,MAAM,SAAS,GAAG,EAAE,MAAM;AAC5C;AAEA,SAAgB,iBAAiB,OAAwC;CACvE,IAAI,EAAE,MAAM,gBAAgB,MAAM,SAChC,MAAM,IAAI,MAAM,2BAA2B;CAG7C,IAAI,OAAO,MAAM,iBAAiB;MAE9B,CAAC,oBAAoB,MAAM,aAAa,IAAI,KAC5C,CAAC,oBAAoB,MAAM,aAAa,KAAK,GAE7C,MAAM,IAAI,MAAM,2BAA2B;CAAA;CAI/C,IAAI,OAAO,MAAM,iBAAiB,YAAY,CAAC,oBAAoB,MAAM,YAAY,GACnF,MAAM,IAAI,MAAM,2BAA2B;AAE/C;AAEA,SAAgB,cAAc,cAAsB,eAAgC;CAClF,IAAI,CAAC,eAAe;EAClB,iBAAiB,YAAY;EAC7B,OAAO;CACT;CAEA,MAAM,SAAS,MAAM,cAAc,aAAa;CAEhD,IAAI,cAAc,cAAc,CAAC,cAAc,UAAU,YACvD,OAAO,WAAW;EAAE,GAAG,OAAO;EAAU,YAAY,cAAc;CAAW;CAG/E,iBAAiB,MAAM;CACvB,OAAO;AACT"}

package/esm/core/config-provider/use-cck-color-scheme/use-cck-color-scheme.mjs

@@ -0,0 +1,84 @@
+"use client";
+import { useConfigContext } from "../config-provider.context.mjs";
+import { computed, onMounted, onUnmounted, ref } from "vue";
+//#region packages/@cck-ui/core/src/core/config-provider/use-cck-color-scheme/use-cck-color-scheme.ts
+function getSystemTheme() {
+	if (typeof window === "undefined") return "light";
+	return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function watchSystemTheme(callback) {
+	if (typeof window === "undefined") return () => {};
+	const mql = window.matchMedia("(prefers-color-scheme: dark)");
+	const listener = (e) => callback(e.matches ? "dark" : "light");
+	mql.addEventListener("change", listener);
+	return () => mql.removeEventListener("change", listener);
+}
+function disableTransitions(nonce) {
+	if (typeof document === "undefined") return () => {};
+	const style = document.createElement("style");
+	style.setAttribute("data-color-scheme-transition", "inline");
+	style.innerHTML = "*, *::before, *::after { transition: none !important; }";
+	if (nonce) style.setAttribute("nonce", nonce);
+	document.head.appendChild(style);
+	return () => {
+		document.querySelectorAll("[data-color-scheme-transition]").forEach((el) => el.remove());
+	};
+}
+function useCckColorScheme({ keepTransition } = {}) {
+	const ctx = useConfigContext();
+	const colorScheme = ctx.colorScheme;
+	const systemTheme = ref("light");
+	const computedColorScheme = computed(() => {
+		const scheme = colorScheme.value;
+		return scheme === "auto" ? systemTheme.value : scheme;
+	});
+	let clearStyles = null;
+	let timeoutId = null;
+	function disableTransitionsTemporarily() {
+		if (keepTransition) return;
+		clearStyles?.();
+		const nonce = ctx.getStyleNonce?.();
+		clearStyles = disableTransitions(nonce);
+		if (timeoutId) window.clearTimeout(timeoutId);
+		timeoutId = window.setTimeout(() => {
+			clearStyles?.();
+			clearStyles = null;
+		}, 10);
+	}
+	const setColorScheme = (value) => {
+		ctx.setColorScheme(value);
+		disableTransitionsTemporarily();
+	};
+	const clearColorScheme = () => {
+		ctx.clearColorScheme();
+		disableTransitionsTemporarily();
+	};
+	const toggleColorScheme = () => {
+		const current = computedColorScheme.value;
+		setColorScheme(current === "light" ? "dark" : "light");
+	};
+	onMounted(() => {
+		systemTheme.value = getSystemTheme();
+		const unwatch = watchSystemTheme((theme) => {
+			systemTheme.value = theme;
+		});
+		onUnmounted(() => {
+			unwatch();
+			if (timeoutId) {
+				window.clearTimeout(timeoutId);
+				clearStyles?.();
+			}
+		});
+	});
+	return {
+		colorScheme,
+		computedColorScheme,
+		setColorScheme,
+		clearColorScheme,
+		toggleColorScheme
+	};
+}
+//#endregion
+export { useCckColorScheme };
+
+//# sourceMappingURL=use-cck-color-scheme.mjs.map

package/esm/core/config-provider/use-cck-color-scheme/use-cck-color-scheme.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-cck-color-scheme.mjs","names":[],"sources":["../../../../src/core/config-provider/use-cck-color-scheme/use-cck-color-scheme.ts"],"sourcesContent":["import { computed, onMounted, onUnmounted, ref } from 'vue'\nimport { useConfigContext } from '../config-provider.context'\nimport { CColorScheme } from '../theme.types'\n\nfunction getSystemTheme(): 'light' | 'dark' {\n  if (typeof window === 'undefined') {\n    return 'light'\n  }\n\n  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'\n}\n\nfunction watchSystemTheme(callback: (theme: 'light' | 'dark') => void) {\n  if (typeof window === 'undefined') {\n    return () => {}\n  }\n  const mql = window.matchMedia('(prefers-color-scheme: dark)')\n  const listener = (e: MediaQueryListEvent) => callback(e.matches ? 'dark' : 'light')\n  mql.addEventListener('change', listener)\n  return () => mql.removeEventListener('change', listener)\n}\n\nfunction disableTransitions(nonce?: string): () => void {\n  if (typeof document === 'undefined') {\n    return () => {}\n  }\n\n  const style = document.createElement('style')\n  style.setAttribute('data-color-scheme-transition', 'inline')\n  style.innerHTML = '*, *::before, *::after { transition: none !important; }'\n  if (nonce) {\n    style.setAttribute('nonce', nonce)\n  }\n  document.head.appendChild(style)\n  return () => {\n    document.querySelectorAll('[data-color-scheme-transition]').forEach((el) => el.remove())\n  }\n}\n\nexport function useCckColorScheme({ keepTransition }: { keepTransition?: boolean } = {}) {\n  const ctx = useConfigContext()\n\n  const colorScheme = ctx.colorScheme\n\n  const systemTheme = ref<'light' | 'dark'>('light')\n\n  const computedColorScheme = computed<'light' | 'dark'>(() => {\n    const scheme = colorScheme.value\n    return scheme === 'auto' ? systemTheme.value : scheme\n  })\n\n  let clearStyles: (() => void) | null = null\n  let timeoutId: number | null = null\n\n  function disableTransitionsTemporarily() {\n    if (keepTransition) {\n      return\n    }\n    clearStyles?.()\n    const nonce = ctx.getStyleNonce?.()\n    clearStyles = disableTransitions(nonce)\n    if (timeoutId) {\n      window.clearTimeout(timeoutId)\n    }\n    timeoutId = window.setTimeout(() => {\n      clearStyles?.()\n      clearStyles = null\n    }, 10)\n  }\n\n  const setColorScheme = (value: CColorScheme) => {\n    ctx.setColorScheme(value)\n    disableTransitionsTemporarily()\n  }\n\n  const clearColorScheme = () => {\n    ctx.clearColorScheme()\n    disableTransitionsTemporarily()\n  }\n\n  const toggleColorScheme = () => {\n    const current = computedColorScheme.value\n    setColorScheme(current === 'light' ? 'dark' : 'light')\n  }\n\n  onMounted(() => {\n    systemTheme.value = getSystemTheme()\n    const unwatch = watchSystemTheme((theme) => {\n      systemTheme.value = theme\n    })\n\n    onUnmounted(() => {\n      unwatch()\n      if (timeoutId) {\n        window.clearTimeout(timeoutId)\n        clearStyles?.()\n      }\n    })\n  })\n\n  return {\n    colorScheme,\n    computedColorScheme,\n    setColorScheme,\n    clearColorScheme,\n    toggleColorScheme,\n  }\n}\n"],"mappings":";;;;AAIA,SAAS,iBAAmC;CAC1C,IAAI,OAAO,WAAW,aACpB,OAAO;CAGT,OAAO,OAAO,WAAW,8BAA8B,CAAC,CAAC,UAAU,SAAS;AAC9E;AAEA,SAAS,iBAAiB,UAA6C;CACrE,IAAI,OAAO,WAAW,aACpB,aAAa,CAAC;CAEhB,MAAM,MAAM,OAAO,WAAW,8BAA8B;CAC5D,MAAM,YAAY,MAA2B,SAAS,EAAE,UAAU,SAAS,OAAO;CAClF,IAAI,iBAAiB,UAAU,QAAQ;CACvC,aAAa,IAAI,oBAAoB,UAAU,QAAQ;AACzD;AAEA,SAAS,mBAAmB,OAA4B;CACtD,IAAI,OAAO,aAAa,aACtB,aAAa,CAAC;CAGhB,MAAM,QAAQ,SAAS,cAAc,OAAO;CAC5C,MAAM,aAAa,gCAAgC,QAAQ;CAC3D,MAAM,YAAY;CAClB,IAAI,OACF,MAAM,aAAa,SAAS,KAAK;CAEnC,SAAS,KAAK,YAAY,KAAK;CAC/B,aAAa;EACX,SAAS,iBAAiB,gCAAgC,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,CAAC;CACzF;AACF;AAEA,SAAgB,kBAAkB,EAAE,mBAAiD,CAAC,GAAG;CACvF,MAAM,MAAM,iBAAiB;CAE7B,MAAM,cAAc,IAAI;CAExB,MAAM,cAAc,IAAsB,OAAO;CAEjD,MAAM,sBAAsB,eAAiC;EAC3D,MAAM,SAAS,YAAY;EAC3B,OAAO,WAAW,SAAS,YAAY,QAAQ;CACjD,CAAC;CAED,IAAI,cAAmC;CACvC,IAAI,YAA2B;CAE/B,SAAS,gCAAgC;EACvC,IAAI,gBACF;EAEF,cAAc;EACd,MAAM,QAAQ,IAAI,gBAAgB;EAClC,cAAc,mBAAmB,KAAK;EACtC,IAAI,WACF,OAAO,aAAa,SAAS;EAE/B,YAAY,OAAO,iBAAiB;GAClC,cAAc;GACd,cAAc;EAChB,GAAG,EAAE;CACP;CAEA,MAAM,kBAAkB,UAAwB;EAC9C,IAAI,eAAe,KAAK;EACxB,8BAA8B;CAChC;CAEA,MAAM,yBAAyB;EAC7B,IAAI,iBAAiB;EACrB,8BAA8B;CAChC;CAEA,MAAM,0BAA0B;EAC9B,MAAM,UAAU,oBAAoB;EACpC,eAAe,YAAY,UAAU,SAAS,OAAO;CACvD;CAEA,gBAAgB;EACd,YAAY,QAAQ,eAAe;EACnC,MAAM,UAAU,kBAAkB,UAAU;GAC1C,YAAY,QAAQ;EACtB,CAAC;EAED,kBAAkB;GAChB,QAAQ;GACR,IAAI,WAAW;IACb,OAAO,aAAa,SAAS;IAC7B,cAAc;GAChB;EACF,CAAC;CACH,CAAC;CAED,OAAO;EACL;EACA;EACA;EACA;EACA;CACF;AACF"}

package/esm/core/config-provider/use-cck-color-scheme/use-provider-color-scheme.mjs

@@ -0,0 +1,59 @@
+"use client";
+import { computed, onMounted, onUnmounted, ref } from "vue";
+import { useIsomorphicEffect } from "@cck-ui/hooks";
+//#region packages/@cck-ui/core/src/core/config-provider/use-cck-color-scheme/use-provider-color-scheme.ts
+function setColorSchemeAttribute(colorScheme, getRootElement) {
+	const hasDarkColorScheme = typeof window !== "undefined" && "matchMedia" in window && window.matchMedia("(prefers-color-scheme: dark)")?.matches;
+	const computedColorScheme = colorScheme !== "auto" ? colorScheme : hasDarkColorScheme ? "dark" : "light";
+	getRootElement()?.setAttribute("data-c-color-scheme", computedColorScheme);
+}
+function useProviderColorScheme({ manager, defaultColorScheme, getRootElement, forceColorScheme }) {
+	const value = ref(manager.get(defaultColorScheme));
+	const colorScheme = computed(() => forceColorScheme || value.value);
+	const applyColorScheme = (scheme) => {
+		setColorSchemeAttribute(scheme, getRootElement);
+	};
+	const setColorScheme = (scheme) => {
+		if (!forceColorScheme) {
+			applyColorScheme(scheme);
+			value.value = scheme;
+			manager.set(scheme);
+		}
+	};
+	const clearColorScheme = () => {
+		value.value = defaultColorScheme;
+		applyColorScheme(defaultColorScheme);
+		manager.clear();
+	};
+	let unsubscribeManager = null;
+	let mediaQuery = null;
+	const handleMediaChange = (event) => {
+		if (value.value === "auto") applyColorScheme(event.matches ? "dark" : "light");
+	};
+	onMounted(() => {
+		manager.subscribe((scheme) => {
+			if (!forceColorScheme) value.value = scheme;
+		});
+		unsubscribeManager = manager.unsubscribe.bind(manager);
+		if (typeof window !== "undefined" && "matchMedia" in window) {
+			mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+			mediaQuery.addEventListener("change", handleMediaChange);
+		}
+	});
+	useIsomorphicEffect(() => {
+		applyColorScheme(colorScheme.value);
+	}, [colorScheme]);
+	onUnmounted(() => {
+		if (unsubscribeManager) unsubscribeManager();
+		if (mediaQuery) mediaQuery.removeEventListener("change", handleMediaChange);
+	});
+	return {
+		colorScheme,
+		setColorScheme,
+		clearColorScheme
+	};
+}
+//#endregion
+export { useProviderColorScheme };
+
+//# sourceMappingURL=use-provider-color-scheme.mjs.map

package/esm/core/config-provider/use-cck-color-scheme/use-provider-color-scheme.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-provider-color-scheme.mjs","names":[],"sources":["../../../../src/core/config-provider/use-cck-color-scheme/use-provider-color-scheme.ts"],"sourcesContent":["import { computed, type ComputedRef, onMounted, onUnmounted, ref } from 'vue'\nimport { useIsomorphicEffect } from '@cck-ui/hooks'\nimport type { CColorSchemeManager } from '../color-scheme-managers'\nimport type { CColorScheme } from '../theme.types'\n\nfunction setColorSchemeAttribute(\n  colorScheme: CColorScheme,\n  getRootElement: () => HTMLElement | undefined\n) {\n  const hasDarkColorScheme =\n    typeof window !== 'undefined' &&\n    'matchMedia' in window &&\n    window.matchMedia('(prefers-color-scheme: dark)')?.matches\n\n  const computedColorScheme =\n    colorScheme !== 'auto' ? colorScheme : hasDarkColorScheme ? 'dark' : 'light'\n  getRootElement()?.setAttribute('data-c-color-scheme', computedColorScheme)\n}\n\ninterface UseProviderColorSchemeOptions {\n  manager: CColorSchemeManager\n  defaultColorScheme: CColorScheme\n  forceColorScheme: 'light' | 'dark' | undefined\n  getRootElement: () => HTMLElement | undefined\n}\n\nexport function useProviderColorScheme({\n  manager,\n  defaultColorScheme,\n  getRootElement,\n  forceColorScheme,\n}: UseProviderColorSchemeOptions) {\n  const value = ref<CColorScheme>(manager.get(defaultColorScheme))\n  const colorScheme = computed(() => forceColorScheme || value.value) as ComputedRef<CColorScheme>\n\n  const applyColorScheme = (scheme: CColorScheme) => {\n    setColorSchemeAttribute(scheme, getRootElement)\n  }\n\n  const setColorScheme = (scheme: CColorScheme) => {\n    if (!forceColorScheme) {\n      applyColorScheme(scheme)\n      value.value = scheme\n      manager.set(scheme)\n    }\n  }\n\n  const clearColorScheme = () => {\n    value.value = defaultColorScheme\n    applyColorScheme(defaultColorScheme)\n    manager.clear()\n  }\n\n  let unsubscribeManager: (() => void) | null = null\n  let mediaQuery: MediaQueryList | null = null\n\n  const handleMediaChange = (event: MediaQueryListEvent) => {\n    if (value.value === 'auto') {\n      applyColorScheme(event.matches ? 'dark' : 'light')\n    }\n  }\n\n  onMounted(() => {\n    manager.subscribe((scheme) => {\n      if (!forceColorScheme) {\n        value.value = scheme\n      }\n    })\n    unsubscribeManager = manager.unsubscribe.bind(manager)\n\n    if (typeof window !== 'undefined' && 'matchMedia' in window) {\n      mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\n      mediaQuery.addEventListener('change', handleMediaChange)\n    }\n  })\n\n  useIsomorphicEffect(() => {\n    applyColorScheme(colorScheme.value)\n  }, [colorScheme])\n\n  onUnmounted(() => {\n    if (unsubscribeManager) {\n      unsubscribeManager()\n    }\n    if (mediaQuery) {\n      mediaQuery.removeEventListener('change', handleMediaChange)\n    }\n  })\n\n  return { colorScheme, setColorScheme, clearColorScheme }\n}\n"],"mappings":";;;;AAKA,SAAS,wBACP,aACA,gBACA;CACA,MAAM,qBACJ,OAAO,WAAW,eAClB,gBAAgB,UAChB,OAAO,WAAW,8BAA8B,CAAC,EAAE;CAErD,MAAM,sBACJ,gBAAgB,SAAS,cAAc,qBAAqB,SAAS;CACvE,eAAe,CAAC,EAAE,aAAa,uBAAuB,mBAAmB;AAC3E;AASA,SAAgB,uBAAuB,EACrC,SACA,oBACA,gBACA,oBACgC;CAChC,MAAM,QAAQ,IAAkB,QAAQ,IAAI,kBAAkB,CAAC;CAC/D,MAAM,cAAc,eAAe,oBAAoB,MAAM,KAAK;CAElE,MAAM,oBAAoB,WAAyB;EACjD,wBAAwB,QAAQ,cAAc;CAChD;CAEA,MAAM,kBAAkB,WAAyB;EAC/C,IAAI,CAAC,kBAAkB;GACrB,iBAAiB,MAAM;GACvB,MAAM,QAAQ;GACd,QAAQ,IAAI,MAAM;EACpB;CACF;CAEA,MAAM,yBAAyB;EAC7B,MAAM,QAAQ;EACd,iBAAiB,kBAAkB;EACnC,QAAQ,MAAM;CAChB;CAEA,IAAI,qBAA0C;CAC9C,IAAI,aAAoC;CAExC,MAAM,qBAAqB,UAA+B;EACxD,IAAI,MAAM,UAAU,QAClB,iBAAiB,MAAM,UAAU,SAAS,OAAO;CAErD;CAEA,gBAAgB;EACd,QAAQ,WAAW,WAAW;GAC5B,IAAI,CAAC,kBACH,MAAM,QAAQ;EAElB,CAAC;EACD,qBAAqB,QAAQ,YAAY,KAAK,OAAO;EAErD,IAAI,OAAO,WAAW,eAAe,gBAAgB,QAAQ;GAC3D,aAAa,OAAO,WAAW,8BAA8B;GAC7D,WAAW,iBAAiB,UAAU,iBAAiB;EACzD;CACF,CAAC;CAED,0BAA0B;EACxB,iBAAiB,YAAY,KAAK;CACpC,GAAG,CAAC,WAAW,CAAC;CAEhB,kBAAkB;EAChB,IAAI,oBACF,mBAAmB;EAErB,IAAI,YACF,WAAW,oBAAoB,UAAU,iBAAiB;CAE9D,CAAC;CAED,OAAO;EAAE;EAAa;EAAgB;CAAiB;AACzD"}

package/esm/core/config-provider/use-respect-reduce-motion/use-respect-reduce-motion.mjs

@@ -0,0 +1,14 @@
+"use client";
+import { toRef } from "vue";
+import { useIsomorphicEffect } from "@cck-ui/hooks";
+//#region packages/@cck-ui/core/src/core/config-provider/use-respect-reduce-motion/use-respect-reduce-motion.ts
+function useRespectReduceMotion({ respectReduceMotion, getRootElement }) {
+	const respectRef = toRef(respectReduceMotion);
+	useIsomorphicEffect(() => {
+		if (respectRef.value) getRootElement()?.setAttribute("data-respect-reduced-motion", "true");
+	}, [respectRef]);
+}
+//#endregion
+export { useRespectReduceMotion };
+
+//# sourceMappingURL=use-respect-reduce-motion.mjs.map

package/esm/core/config-provider/use-respect-reduce-motion/use-respect-reduce-motion.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-respect-reduce-motion.mjs","names":[],"sources":["../../../../src/core/config-provider/use-respect-reduce-motion/use-respect-reduce-motion.ts"],"sourcesContent":["import { MaybeRef, toRef } from 'vue'\nimport { useIsomorphicEffect } from '@cck-ui/hooks'\n\ninterface UseRespectReduceMotionOptions {\n  respectReduceMotion: MaybeRef<boolean>\n  getRootElement: () => HTMLElement | undefined\n}\n\nexport function useRespectReduceMotion({\n  respectReduceMotion,\n  getRootElement,\n}: UseRespectReduceMotionOptions) {\n  const respectRef = toRef(respectReduceMotion)\n\n  useIsomorphicEffect(() => {\n    if (respectRef.value) {\n      getRootElement()?.setAttribute('data-respect-reduced-motion', 'true')\n    }\n  }, [respectRef])\n}\n"],"mappings":";;;;AAQA,SAAgB,uBAAuB,EACrC,qBACA,kBACgC;CAChC,MAAM,aAAa,MAAM,mBAAmB;CAE5C,0BAA0B;EACxB,IAAI,WAAW,OACb,eAAe,CAAC,EAAE,aAAa,+BAA+B,MAAM;CAExE,GAAG,CAAC,UAAU,CAAC;AACjB"}

package/esm/core/styles-api/use-styles/use-styles.mjs

@@ -1,7 +1,5 @@
 "use client";
-import { THEME_KEY } from "../../config-provider/config-provider.types.mjs";
-import { useCckClassNamesPrefix, useCckIsHeadless, useCckWithStaticClasses } from "../../config-provider/config-provider.context.mjs";
-import { DEFAULT_THEME } from "../../config-provider/default-theme.mjs";
+import { useCckClassNamesPrefix, useCckIsHeadless, useCckTheme, useCckWithStaticClasses } from "../../config-provider/config-provider.context.mjs";
 import { resolveClassNames } from "./get-class-name/resolve-class-names/resolve-class-names.mjs";
 import { resolveStyles } from "./get-style/resolve-styles/resolve-styles.mjs";
 import { useStylesTransform } from "./use-transformed-styles.mjs";
@@ -9,10 +7,9 @@ import { mergeVars } from "./get-style/resolve-vars/merge-vars.mjs";
 import { resolveStyle } from "./get-style/resolve-style/resolve-style.mjs";
 import { getClassName } from "./get-class-name/get-class-name.mjs";
 import { getStyle } from "./get-style/get-style.mjs";
-import { inject } from "vue";
 //#region packages/@cck-ui/core/src/core/styles-api/use-styles/use-styles.ts
 function useStyles({ name, classes, props, stylesCtx, className, style, rootSelector = "root", unstyled, classNames, styles, vars, varsResolver, attributes }) {
-	const theme = inject(THEME_KEY, DEFAULT_THEME);
+	const theme = useCckTheme().value;
 	const classNamesPrefix = useCckClassNamesPrefix();
 	const withStaticClasses = useCckWithStaticClasses();
 	const headless = useCckIsHeadless();

package/esm/core/styles-api/use-styles/use-styles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-styles.mjs","names":[],"sources":["../../../../src/core/styles-api/use-styles/use-styles.ts"],"sourcesContent":["import { inject } from 'vue'\nimport {\n  Attributes,\n  ClassNames,\n  ClassNamesArray,\n  GetStylesApiOptions,\n  Styles,\n} from '../styles-api.types'\nimport { PartialVarsResolver, VarsResolver } from '../create-vars-resolver/create-vars-resolver'\nimport { useStylesTransform } from './use-transformed-styles'\nimport { resolveClassNames } from './get-class-name/resolve-class-names/resolve-class-names'\nimport { resolveStyles } from './get-style/resolve-styles/resolve-styles'\nimport { mergeVars } from './get-style/resolve-vars/merge-vars'\nimport { resolveStyle } from './get-style/resolve-style/resolve-style'\nimport { getClassName } from './get-class-name/get-class-name'\nimport { Properties } from 'csstype'\nimport { getStyle } from './get-style/get-style'\nimport { FactoryPayload } from '../../factory'\nimport { CStyleProp } from '../../box'\nimport {\n  DEFAULT_THEME,\n  THEME_KEY,\n  useCckClassNamesPrefix,\n  useCckIsHeadless,\n  useCckWithStaticClasses,\n} from '../../config-provider'\n\nexport interface UseStylesInput<Payload extends FactoryPayload> {\n  name: string | (string | undefined)[]\n  classes: Payload['stylesNames'] extends string ? Record<string, string> : never\n  props: Payload['props']\n  stylesCtx?: Payload['ctx']\n  className?: string | undefined\n  style?: CStyleProp\n  rootSelector?: Payload['stylesNames']\n  unstyled?: boolean\n  classNames?: ClassNames<Payload> | ClassNamesArray<Payload>\n  styles?: Styles<Payload>\n  vars?: PartialVarsResolver<Payload>\n  varsResolver?: VarsResolver<Payload>\n  attributes?: Attributes<Payload>\n}\n\nexport type GetStylesApi<Payload extends FactoryPayload> = (\n  selector: NonNullable<Payload['stylesNames']>,\n  options?: GetStylesApiOptions\n) => {\n  className: string\n  style: Properties\n}\n\nexport function useStyles<Payload extends FactoryPayload>({\n  name,\n  classes,\n  props,\n  stylesCtx,\n  className,\n  style,\n  rootSelector = 'root' as NonNullable<Payload['stylesNames']>,\n  unstyled,\n  classNames,\n  styles,\n  vars,\n  varsResolver,\n  attributes,\n}: UseStylesInput<Payload>): GetStylesApi<Payload> {\n  const theme = inject(THEME_KEY, DEFAULT_THEME)\n  const classNamesPrefix = useCckClassNamesPrefix()\n  const withStaticClasses = useCckWithStaticClasses()\n  const headless = useCckIsHeadless()\n\n  const themeNames = Array.isArray(name) ? name : [name]\n  const themeName = themeNames.filter((n) => n) as string[]\n  const { withStylesTransform, getTransformedStyles } = useStylesTransform({\n    props,\n    stylesCtx,\n    themeName,\n    theme,\n  })\n\n  const resolvedClassNames = resolveClassNames({\n    theme,\n    classNames,\n    props,\n    stylesCtx,\n  })\n  const resolvedThemeClassNames = themeName.map((n) =>\n    resolveClassNames({\n      theme,\n      classNames: theme.components?.[n]?.classNames,\n      props,\n      stylesCtx,\n    })\n  )\n\n  const resolvedComponentStyles = withStylesTransform\n    ? {}\n    : resolveStyles({ theme, styles, props, stylesCtx })\n\n  const resolvedThemeStyles: Record<string, any> = {}\n\n  if (!withStylesTransform) {\n    for (const n of themeName) {\n      const resolved = resolveStyles({\n        theme,\n        styles: theme.components?.[n]?.styles,\n        props,\n        stylesCtx,\n      })\n      for (const key of Object.keys(resolved)) {\n        resolvedThemeStyles[key] = {\n          ...resolvedThemeStyles[key],\n          ...resolved[key],\n        }\n      }\n    }\n  }\n\n  const resolvedVars = mergeVars([\n    headless ? {} : varsResolver?.(theme, props, stylesCtx),\n    ...themeName.map((n) => theme.components?.[n]?.vars?.(theme, props, stylesCtx)),\n    vars?.(theme, props, stylesCtx),\n  ])\n\n  const resolvedRootStyle = resolveStyle({ style, theme })\n\n  return (selector, options) => ({\n    ...attributes?.[selector],\n\n    className: getClassName({\n      theme,\n      options,\n      themeName,\n      selector,\n      classNamesPrefix,\n      resolvedClassNames,\n      resolvedThemeClassNames,\n      classes,\n      unstyled,\n      className,\n      rootSelector,\n      props,\n      stylesCtx,\n      withStaticClasses,\n      headless,\n      transformedStyles: getTransformedStyles([options?.styles, styles]),\n    }),\n\n    style: getStyle({\n      theme,\n      selector,\n      options,\n      props,\n      stylesCtx,\n      rootSelector,\n      withStylesTransform,\n      resolvedStyles: resolvedComponentStyles,\n      resolvedThemeStyles,\n      resolvedVars,\n      resolvedRootStyle,\n    }),\n  })\n}\n"],"mappings":";;;;;;;;;;;;;AAmDA,SAAgB,UAA0C,EACxD,MACA,SACA,OACA,WACA,WACA,OACA,eAAe,QACf,UACA,YACA,QACA,MACA,cACA,cACiD;CACjD,MAAM,QAAQ,OAAO,WAAW,aAAa;CAC7C,MAAM,mBAAmB,uBAAuB;CAChD,MAAM,oBAAoB,wBAAwB;CAClD,MAAM,WAAW,iBAAiB;CAGlC,MAAM,aADa,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAC,IAAI,EAAA,CACxB,QAAQ,MAAM,CAAC;CAC5C,MAAM,EAAE,qBAAqB,yBAAyB,mBAAmB;EACvE;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,qBAAqB,kBAAkB;EAC3C;EACA;EACA;EACA;CACF,CAAC;CACD,MAAM,0BAA0B,UAAU,KAAK,MAC7C,kBAAkB;EAChB;EACA,YAAY,MAAM,aAAa,EAAE,EAAE;EACnC;EACA;CACF,CAAC,CACH;CAEA,MAAM,0BAA0B,sBAC5B,CAAC,IACD,cAAc;EAAE;EAAO;EAAQ;EAAO;CAAU,CAAC;CAErD,MAAM,sBAA2C,CAAC;CAElD,IAAI,CAAC,qBACH,KAAK,MAAM,KAAK,WAAW;EACzB,MAAM,WAAW,cAAc;GAC7B;GACA,QAAQ,MAAM,aAAa,EAAE,EAAE;GAC/B;GACA;EACF,CAAC;EACD,KAAK,MAAM,OAAO,OAAO,KAAK,QAAQ,GACpC,oBAAoB,OAAO;GACzB,GAAG,oBAAoB;GACvB,GAAG,SAAS;EACd;CAEJ;CAGF,MAAM,eAAe,UAAU;EAC7B,WAAW,CAAC,IAAI,eAAe,OAAO,OAAO,SAAS;EACtD,GAAG,UAAU,KAAK,MAAM,MAAM,aAAa,EAAE,EAAE,OAAO,OAAO,OAAO,SAAS,CAAC;EAC9E,OAAO,OAAO,OAAO,SAAS;CAChC,CAAC;CAED,MAAM,oBAAoB,aAAa;EAAE;EAAO;CAAM,CAAC;CAEvD,QAAQ,UAAU,aAAa;EAC7B,GAAG,aAAa;EAEhB,WAAW,aAAa;GACtB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,mBAAmB,qBAAqB,CAAC,SAAS,QAAQ,MAAM,CAAC;EACnE,CAAC;EAED,OAAO,SAAS;GACd;GACA;GACA;GACA;GACA;GACA;GACA;GACA,gBAAgB;GAChB;GACA;GACA;EACF,CAAC;CACH;AACF"}
+{"version":3,"file":"use-styles.mjs","names":[],"sources":["../../../../src/core/styles-api/use-styles/use-styles.ts"],"sourcesContent":["import {\n  Attributes,\n  ClassNames,\n  ClassNamesArray,\n  GetStylesApiOptions,\n  Styles,\n} from '../styles-api.types'\nimport { PartialVarsResolver, VarsResolver } from '../create-vars-resolver/create-vars-resolver'\nimport { useStylesTransform } from './use-transformed-styles'\nimport { resolveClassNames } from './get-class-name/resolve-class-names/resolve-class-names'\nimport { resolveStyles } from './get-style/resolve-styles/resolve-styles'\nimport { mergeVars } from './get-style/resolve-vars/merge-vars'\nimport { resolveStyle } from './get-style/resolve-style/resolve-style'\nimport { getClassName } from './get-class-name/get-class-name'\nimport { Properties } from 'csstype'\nimport { getStyle } from './get-style/get-style'\nimport { FactoryPayload } from '../../factory'\nimport { CStyleProp } from '../../box'\nimport {\n  useCckClassNamesPrefix,\n  useCckIsHeadless,\n  useCckTheme,\n  useCckWithStaticClasses,\n} from '../../config-provider'\n\nexport interface UseStylesInput<Payload extends FactoryPayload> {\n  name: string | (string | undefined)[]\n  classes: Payload['stylesNames'] extends string ? Record<string, string> : never\n  props: Payload['props']\n  stylesCtx?: Payload['ctx']\n  className?: string | undefined\n  style?: CStyleProp\n  rootSelector?: Payload['stylesNames']\n  unstyled?: boolean\n  classNames?: ClassNames<Payload> | ClassNamesArray<Payload>\n  styles?: Styles<Payload>\n  vars?: PartialVarsResolver<Payload>\n  varsResolver?: VarsResolver<Payload>\n  attributes?: Attributes<Payload>\n}\n\nexport type GetStylesApi<Payload extends FactoryPayload> = (\n  selector: NonNullable<Payload['stylesNames']>,\n  options?: GetStylesApiOptions\n) => {\n  className: string\n  style: Properties\n}\n\nexport function useStyles<Payload extends FactoryPayload>({\n  name,\n  classes,\n  props,\n  stylesCtx,\n  className,\n  style,\n  rootSelector = 'root' as NonNullable<Payload['stylesNames']>,\n  unstyled,\n  classNames,\n  styles,\n  vars,\n  varsResolver,\n  attributes,\n}: UseStylesInput<Payload>): GetStylesApi<Payload> {\n  const _theme = useCckTheme()\n  const theme = _theme.value\n  const classNamesPrefix = useCckClassNamesPrefix()\n  const withStaticClasses = useCckWithStaticClasses()\n  const headless = useCckIsHeadless()\n\n  const themeNames = Array.isArray(name) ? name : [name]\n  const themeName = themeNames.filter((n) => n) as string[]\n  const { withStylesTransform, getTransformedStyles } = useStylesTransform({\n    props,\n    stylesCtx,\n    themeName,\n    theme,\n  })\n\n  const resolvedClassNames = resolveClassNames({\n    theme,\n    classNames,\n    props,\n    stylesCtx,\n  })\n  const resolvedThemeClassNames = themeName.map((n) =>\n    resolveClassNames({\n      theme,\n      classNames: theme.components?.[n]?.classNames,\n      props,\n      stylesCtx,\n    })\n  )\n\n  const resolvedComponentStyles = withStylesTransform\n    ? {}\n    : resolveStyles({ theme, styles, props, stylesCtx })\n\n  const resolvedThemeStyles: Record<string, any> = {}\n\n  if (!withStylesTransform) {\n    for (const n of themeName) {\n      const resolved = resolveStyles({\n        theme,\n        styles: theme.components?.[n]?.styles,\n        props,\n        stylesCtx,\n      })\n      for (const key of Object.keys(resolved)) {\n        resolvedThemeStyles[key] = {\n          ...resolvedThemeStyles[key],\n          ...resolved[key],\n        }\n      }\n    }\n  }\n\n  const resolvedVars = mergeVars([\n    headless ? {} : varsResolver?.(theme, props, stylesCtx),\n    ...themeName.map((n) => theme.components?.[n]?.vars?.(theme, props, stylesCtx)),\n    vars?.(theme, props, stylesCtx),\n  ])\n\n  const resolvedRootStyle = resolveStyle({ style, theme })\n\n  return (selector, options) => ({\n    ...attributes?.[selector],\n\n    className: getClassName({\n      theme,\n      options,\n      themeName,\n      selector,\n      classNamesPrefix,\n      resolvedClassNames,\n      resolvedThemeClassNames,\n      classes,\n      unstyled,\n      className,\n      rootSelector,\n      props,\n      stylesCtx,\n      withStaticClasses,\n      headless,\n      transformedStyles: getTransformedStyles([options?.styles, styles]),\n    }),\n\n    style: getStyle({\n      theme,\n      selector,\n      options,\n      props,\n      stylesCtx,\n      rootSelector,\n      withStylesTransform,\n      resolvedStyles: resolvedComponentStyles,\n      resolvedThemeStyles,\n      resolvedVars,\n      resolvedRootStyle,\n    }),\n  })\n}\n"],"mappings":";;;;;;;;;;AAiDA,SAAgB,UAA0C,EACxD,MACA,SACA,OACA,WACA,WACA,OACA,eAAe,QACf,UACA,YACA,QACA,MACA,cACA,cACiD;CAEjD,MAAM,QADS,YACI,CAAC,CAAC;CACrB,MAAM,mBAAmB,uBAAuB;CAChD,MAAM,oBAAoB,wBAAwB;CAClD,MAAM,WAAW,iBAAiB;CAGlC,MAAM,aADa,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAC,IAAI,EAAA,CACxB,QAAQ,MAAM,CAAC;CAC5C,MAAM,EAAE,qBAAqB,yBAAyB,mBAAmB;EACvE;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,qBAAqB,kBAAkB;EAC3C;EACA;EACA;EACA;CACF,CAAC;CACD,MAAM,0BAA0B,UAAU,KAAK,MAC7C,kBAAkB;EAChB;EACA,YAAY,MAAM,aAAa,EAAE,EAAE;EACnC;EACA;CACF,CAAC,CACH;CAEA,MAAM,0BAA0B,sBAC5B,CAAC,IACD,cAAc;EAAE;EAAO;EAAQ;EAAO;CAAU,CAAC;CAErD,MAAM,sBAA2C,CAAC;CAElD,IAAI,CAAC,qBACH,KAAK,MAAM,KAAK,WAAW;EACzB,MAAM,WAAW,cAAc;GAC7B;GACA,QAAQ,MAAM,aAAa,EAAE,EAAE;GAC/B;GACA;EACF,CAAC;EACD,KAAK,MAAM,OAAO,OAAO,KAAK,QAAQ,GACpC,oBAAoB,OAAO;GACzB,GAAG,oBAAoB;GACvB,GAAG,SAAS;EACd;CAEJ;CAGF,MAAM,eAAe,UAAU;EAC7B,WAAW,CAAC,IAAI,eAAe,OAAO,OAAO,SAAS;EACtD,GAAG,UAAU,KAAK,MAAM,MAAM,aAAa,EAAE,EAAE,OAAO,OAAO,OAAO,SAAS,CAAC;EAC9E,OAAO,OAAO,OAAO,SAAS;CAChC,CAAC;CAED,MAAM,oBAAoB,aAAa;EAAE;EAAO;CAAM,CAAC;CAEvD,QAAQ,UAAU,aAAa;EAC7B,GAAG,aAAa;EAEhB,WAAW,aAAa;GACtB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,mBAAmB,qBAAqB,CAAC,SAAS,QAAQ,MAAM,CAAC;EACnE,CAAC;EAED,OAAO,SAAS;GACd;GACA;GACA;GACA;GACA;GACA;GACA;GACA,gBAAgB;GAChB;GACA;GACA;EACF,CAAC;CACH;AACF"}

package/esm/index.mjs

@@ -15,6 +15,8 @@ import { clearShadeCache, generateColorShades, setColorAlpha } from "./core/util
 import { isNumber, isString, isStringNumber, isUndefined } from "./core/utils/types/index.mjs";
 import { addUnit } from "./core/utils/dom/style.mjs";
 import { CONFIG_KEY, THEME_KEY } from "./core/config-provider/config-provider.types.mjs";
+import { useProviderColorScheme } from "./core/config-provider/use-cck-color-scheme/use-provider-color-scheme.mjs";
+import { colorsTuple } from "./core/config-provider/color-functions/colors-tuple/colors-tuple.mjs";
 import { toRgba } from "./core/config-provider/color-functions/to-rgba/to-rgba.mjs";
 import { darken } from "./core/config-provider/color-functions/darken/darken.mjs";
 import { alpha, rgba } from "./core/config-provider/color-functions/rgba/rgba.mjs";
@@ -24,8 +26,13 @@ import { parseThemeColor } from "./core/config-provider/color-functions/parse-th
 import { getThemeColor } from "./core/config-provider/color-functions/get-theme-color/get-theme-color.mjs";
 import { getGradient } from "./core/config-provider/color-functions/get-gradient/get-gradient.mjs";
 import { defaultVariantColorsResolver } from "./core/config-provider/color-functions/default-variant-colors-resolver/default-variant-colors-resolver.mjs";
-import { useCckClassNamesPrefix, useCckCssVariablesResolver, useCckEnv, useCckIsHeadless, useCckStyleNonce, useCckStylesTransform, useCckSxTransform, useCckWithStaticClasses, useConfigContext } from "./core/config-provider/config-provider.context.mjs";
 import { DEFAULT_THEME } from "./core/config-provider/default-theme.mjs";
+import { isVirtualColor, virtualColor } from "./core/config-provider/cck-css-variables/virtual-color/virtual-color.mjs";
+import { getCSSColorVariables } from "./core/config-provider/cck-css-variables/get-css-color-variables.mjs";
+import { defaultCssVariablesResolver } from "./core/config-provider/cck-css-variables/default-css-variables-resolver.mjs";
+import { useCckClassNamesPrefix, useCckCssVariablesResolver, useCckEnv, useCckIsHeadless, useCckStyleNonce, useCckStylesTransform, useCckSxTransform, useCckTheme, useCckWithStaticClasses, useConfigContext } from "./core/config-provider/config-provider.context.mjs";
+import { createTheme } from "./core/config-provider/create-theme/create-theme.mjs";
+import { useCckColorScheme } from "./core/config-provider/use-cck-color-scheme/use-cck-color-scheme.mjs";
 import { CckConfigProvider } from "./core/config-provider/index.mjs";
 import { extractStyleProps } from "./core/box/style-props/extract-style-props/extract-style-props.mjs";
 import { parseStyleProps } from "./core/box/style-props/parse-style-props/parse-style-props.mjs";
@@ -41,10 +48,13 @@ import { resolveClassNames } from "./core/styles-api/use-styles/get-class-name/r
 import { resolveStyles } from "./core/styles-api/use-styles/get-style/resolve-styles/resolve-styles.mjs";
 import { FOCUS_CLASS_NAMES } from "./core/styles-api/use-styles/get-class-name/get-global-class-names/get-global-class-names.mjs";
 import { useStyles } from "./core/styles-api/use-styles/use-styles.mjs";
+import { CDefaultLoaders, CLoader } from "./components/loader/index.mjs";
+import { transitions } from "./components/transition/transitions.mjs";
+import { getTransitionProps } from "./components/transition/get-transition-props/get-transition-props.mjs";
+import { CTransition } from "./components/transition/index.mjs";
 import { CButton, CButtonGroup, CButtonGroupSection } from "./components/button/index.mjs";
 import { CCol, CGrid } from "./components/grid/index.mjs";
 import { CGroup } from "./components/group/index.mjs";
-import { CDefaultLoaders, CLoader } from "./components/loader/index.mjs";
 import { CSimpleGrid } from "./components/simple-grid/index.mjs";
 import { CText } from "./components/text/index.mjs";
-export { CBox, CButton, CButtonGroup, CButtonGroupSection, CCol, CDefaultLoaders, CGrid, CGroup, CLoader, CONFIG_KEY, CSimpleGrid, CText, CckConfigProvider, DEFAULT_THEME, FOCUS_CLASS_NAMES, STYLE_PROPS_DATA, THEME_KEY, addUnit, alpha, camelToKebabCase, clearShadeCache, createVarsResolver, darken, defaultVariantColorsResolver, em, extractStyleProps, filterProps, generateColorShades, getBaseValue, getBreakpointValue, getComponentName, getFontSize, getGradient, getLineHeight, getPrimaryShade, getRadius, getShadow, getSize, getSortedBreakpoints, getSpacing, getThemeColor, hashStyleProps, isLightColor, isNumber, isNumberLike, isString, isStringNumber, isUndefined, keys, luminance, normalizeNumberLikeStringProp, numberLikeStringToNumber, parseStyleProps, parseThemeColor, px, rem, resolveClassNames, resolveStyles, responsiveStyleManager, rgba, setColorAlpha, stylesToString, toRgba, useCckClassNamesPrefix, useCckCssVariablesResolver, useCckEnv, useCckIsHeadless, useCckStyleNonce, useCckStylesTransform, useCckSxTransform, useCckWithStaticClasses, useConfigContext, useRandomClassName, useStyles, withInstall, withPropsDefaultSetter };
+export { CBox, CButton, CButtonGroup, CButtonGroupSection, transitions as CCK_TRANSITIONS, CCol, CDefaultLoaders, CGrid, CGroup, CLoader, CONFIG_KEY, CSimpleGrid, CText, CTransition, CckConfigProvider, DEFAULT_THEME, FOCUS_CLASS_NAMES, STYLE_PROPS_DATA, THEME_KEY, addUnit, alpha, camelToKebabCase, clearShadeCache, colorsTuple, createTheme, createVarsResolver, darken, defaultCssVariablesResolver, defaultVariantColorsResolver, em, extractStyleProps, filterProps, generateColorShades, getBaseValue, getBreakpointValue, getCSSColorVariables, getComponentName, getFontSize, getGradient, getLineHeight, getPrimaryShade, getRadius, getShadow, getSize, getSortedBreakpoints, getSpacing, getThemeColor, getTransitionProps, hashStyleProps, isLightColor, isNumber, isNumberLike, isString, isStringNumber, isUndefined, isVirtualColor, keys, luminance, normalizeNumberLikeStringProp, numberLikeStringToNumber, parseStyleProps, parseThemeColor, px, rem, resolveClassNames, resolveStyles, responsiveStyleManager, rgba, setColorAlpha, stylesToString, toRgba, useCckClassNamesPrefix, useCckColorScheme, useCckCssVariablesResolver, useCckEnv, useCckIsHeadless, useCckStyleNonce, useCckStylesTransform, useCckSxTransform, useCckTheme, useCckWithStaticClasses, useConfigContext, useProviderColorScheme, useRandomClassName, useStyles, virtualColor, withInstall, withPropsDefaultSetter };

package/lib/components/button/button.types.d.ts

@@ -17,7 +17,7 @@ export type ButtonFactory = PolymorphicFactory<{
     staticComponents: {};
 }>;
 export interface ButtonProps extends BoxProps, StylesApiProps<ButtonFactory> {
-    'data-disabled'?: boolean;
+    dataDisabled?: boolean;
     /**
      * @description If set, adjusts text color based on background color for `filled` variant
      */
@@ -72,14 +72,4 @@ export interface ButtonProps extends BoxProps, StylesApiProps<ButtonFactory> {
      * @default 'sm'
      */
     size?: ButtonSize;
-    /**
-     * @description custom element tag
-     * @default 'button'
-     */
-    tag?: string | Component;
-    /**
-     * @description variants of button
-     * @default 'default'
-     */
-    variant?: ButtonVariant;
 }

package/lib/components/index.d.ts

@@ -3,4 +3,5 @@ export * from './grid';
 export * from './group';
 export * from './loader';
 export * from './simple-grid';
+export * from './transition';
 export * from './text';

package/lib/components/text/text.types.d.ts

@@ -25,7 +25,7 @@ export interface TextProps extends BoxProps, StylesApiProps<TextFactory> {
      */
     lineClamp?: number;
     /**
-     * @description Side on which Text must be truncated, if `true`, text is truncated from the start
+     * @description Side on which Text must be truncated, if `true`, text is truncated from the end
      */
     truncate?: TextTruncate;
     /**

package/lib/components/transition/get-transition-props/get-transition-props.d.ts

@@ -0,0 +1,5 @@
+import type { SetRequired } from 'type-fest';
+import type { TransitionOverride } from '../transition.types';
+type MinimalTransitionOverride = SetRequired<TransitionOverride, 'duration' | 'transition'>;
+export declare function getTransitionProps(transitionProps: TransitionOverride | undefined, componentTransition: TransitionOverride | undefined): MinimalTransitionOverride;
+export {};