@cck-ui/core 0.19.0 → 0.20.1

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

@@ -7,6 +7,7 @@ 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 { toValue } 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 = useCckTheme().value;
@@ -20,80 +21,84 @@ function useStyles({ name, classes, props, stylesCtx, className, style, rootSele
 		themeName,
 		theme
 	});
-	const resolvedClassNames = resolveClassNames({
-		theme,
-		classNames,
-		props,
-		stylesCtx
-	});
-	const resolvedThemeClassNames = themeName.map((n) => resolveClassNames({
-		theme,
-		classNames: theme.components?.[n]?.classNames,
-		props,
-		stylesCtx
-	}));
-	const resolvedComponentStyles = withStylesTransform ? {} : resolveStyles({
-		theme,
-		styles,
-		props,
-		stylesCtx
-	});
-	const resolvedThemeStyles = {};
-	if (!withStylesTransform) for (const n of themeName) {
-		const resolved = resolveStyles({
+	return (selector, options) => {
+		const currentProps = toValue(props);
+		const currentCtx = toValue(stylesCtx);
+		const resolvedClassNames = resolveClassNames({
 			theme,
-			styles: theme.components?.[n]?.styles,
-			props,
-			stylesCtx
+			classNames,
+			props: currentProps,
+			stylesCtx: currentCtx
 		});
-		for (const key of Object.keys(resolved)) resolvedThemeStyles[key] = {
-			...resolvedThemeStyles[key],
-			...resolved[key]
-		};
-	}
-	const resolvedVars = mergeVars([
-		headless ? {} : varsResolver?.(theme, props, stylesCtx),
-		...themeName.map((n) => theme.components?.[n]?.vars?.(theme, props, stylesCtx)),
-		vars?.(theme, props, stylesCtx)
-	]);
-	const resolvedRootStyle = resolveStyle({
-		style,
-		theme
-	});
-	return (selector, options) => ({
-		...attributes?.[selector],
-		className: getClassName({
+		const resolvedThemeClassNames = themeName.map((n) => resolveClassNames({
 			theme,
-			options,
-			themeName,
-			selector,
-			classNamesPrefix,
-			resolvedClassNames,
-			resolvedThemeClassNames,
-			classes,
-			unstyled,
-			className,
-			rootSelector,
-			props,
-			stylesCtx,
-			withStaticClasses,
-			headless,
-			transformedStyles: getTransformedStyles([options?.styles, styles])
-		}),
-		style: getStyle({
+			classNames: theme.components?.[n]?.classNames,
+			props: currentProps,
+			stylesCtx: currentCtx
+		}));
+		const resolvedComponentStyles = withStylesTransform ? {} : resolveStyles({
 			theme,
-			selector,
-			options,
-			props,
-			stylesCtx,
-			rootSelector,
-			withStylesTransform,
-			resolvedStyles: resolvedComponentStyles,
-			resolvedThemeStyles,
-			resolvedVars,
-			resolvedRootStyle
-		})
-	});
+			styles,
+			props: currentProps,
+			stylesCtx: currentCtx
+		});
+		const resolvedThemeStyles = {};
+		if (!withStylesTransform) for (const n of themeName) {
+			const resolved = resolveStyles({
+				theme,
+				styles: theme.components?.[n]?.styles,
+				props: currentProps,
+				stylesCtx: currentCtx
+			});
+			for (const key of Object.keys(resolved)) resolvedThemeStyles[key] = {
+				...resolvedThemeStyles[key],
+				...resolved[key]
+			};
+		}
+		const resolvedVars = mergeVars([
+			headless ? {} : varsResolver?.(theme, currentProps, currentCtx),
+			...themeName.map((n) => theme.components?.[n]?.vars?.(theme, currentProps, currentCtx)),
+			vars?.(theme, currentProps, currentCtx)
+		]);
+		const resolvedRootStyle = resolveStyle({
+			style,
+			theme
+		});
+		return {
+			...attributes?.[selector],
+			className: getClassName({
+				theme,
+				options,
+				themeName,
+				selector,
+				classNamesPrefix,
+				resolvedClassNames,
+				resolvedThemeClassNames,
+				classes,
+				unstyled,
+				className,
+				rootSelector,
+				props: currentProps,
+				stylesCtx: currentCtx,
+				withStaticClasses,
+				headless,
+				transformedStyles: getTransformedStyles([options?.styles, styles])
+			}),
+			style: getStyle({
+				theme,
+				selector,
+				options,
+				props: currentProps,
+				stylesCtx: currentCtx,
+				rootSelector,
+				withStylesTransform,
+				resolvedStyles: resolvedComponentStyles,
+				resolvedThemeStyles,
+				resolvedVars,
+				resolvedRootStyle
+			})
+		};
+	};
 }
 //#endregion
 export { useStyles };

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 {\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"}
+{"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'\nimport { MaybeRefOrGetter, toValue } from 'vue'\n\nexport interface UseStylesInput<Payload extends FactoryPayload> {\n  name: string | (string | undefined)[]\n  classes: Payload['stylesNames'] extends string ? Record<string, string> : never\n  props: MaybeRefOrGetter<Payload['props']>\n  stylesCtx?: MaybeRefOrGetter<Payload['ctx'] | undefined>\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\n  const { withStylesTransform, getTransformedStyles } = useStylesTransform({\n    props,\n    stylesCtx,\n    themeName,\n    theme,\n  })\n\n  return (selector, options) => {\n    const currentProps = toValue(props) as Payload['props']\n    const currentCtx = toValue(stylesCtx) as Payload['ctx'] | undefined\n\n    const resolvedClassNames = resolveClassNames({\n      theme,\n      classNames,\n      props: currentProps,\n      stylesCtx: currentCtx,\n    })\n\n    const resolvedThemeClassNames = themeName.map((n) =>\n      resolveClassNames({\n        theme,\n        classNames: theme.components?.[n]?.classNames,\n        props: currentProps,\n        stylesCtx: currentCtx,\n      })\n    )\n\n    const resolvedComponentStyles = withStylesTransform\n      ? {}\n      : resolveStyles({ theme, styles, props: currentProps, stylesCtx: currentCtx })\n\n    const resolvedThemeStyles: Record<string, any> = {}\n    if (!withStylesTransform) {\n      for (const n of themeName) {\n        const resolved = resolveStyles({\n          theme,\n          styles: theme.components?.[n]?.styles,\n          props: currentProps,\n          stylesCtx: currentCtx,\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, currentProps, currentCtx),\n      ...themeName.map((n) => theme.components?.[n]?.vars?.(theme, currentProps, currentCtx)),\n      vars?.(theme, currentProps, currentCtx),\n    ])\n\n    const resolvedRootStyle = resolveStyle({ style, theme })\n\n    return {\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: currentProps,\n        stylesCtx: currentCtx,\n        withStaticClasses,\n        headless,\n        transformedStyles: getTransformedStyles([options?.styles, styles]),\n      }),\n\n      style: getStyle({\n        theme,\n        selector,\n        options,\n        props: currentProps,\n        stylesCtx: currentCtx,\n        rootSelector,\n        withStylesTransform,\n        resolvedStyles: resolvedComponentStyles,\n        resolvedThemeStyles,\n        resolvedVars,\n        resolvedRootStyle,\n      }),\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;AAkDA,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;CAE5C,MAAM,EAAE,qBAAqB,yBAAyB,mBAAmB;EACvE;EACA;EACA;EACA;CACF,CAAC;CAED,QAAQ,UAAU,YAAY;EAC5B,MAAM,eAAe,QAAQ,KAAK;EAClC,MAAM,aAAa,QAAQ,SAAS;EAEpC,MAAM,qBAAqB,kBAAkB;GAC3C;GACA;GACA,OAAO;GACP,WAAW;EACb,CAAC;EAED,MAAM,0BAA0B,UAAU,KAAK,MAC7C,kBAAkB;GAChB;GACA,YAAY,MAAM,aAAa,EAAE,EAAE;GACnC,OAAO;GACP,WAAW;EACb,CAAC,CACH;EAEA,MAAM,0BAA0B,sBAC5B,CAAC,IACD,cAAc;GAAE;GAAO;GAAQ,OAAO;GAAc,WAAW;EAAW,CAAC;EAE/E,MAAM,sBAA2C,CAAC;EAClD,IAAI,CAAC,qBACH,KAAK,MAAM,KAAK,WAAW;GACzB,MAAM,WAAW,cAAc;IAC7B;IACA,QAAQ,MAAM,aAAa,EAAE,EAAE;IAC/B,OAAO;IACP,WAAW;GACb,CAAC;GACD,KAAK,MAAM,OAAO,OAAO,KAAK,QAAQ,GACpC,oBAAoB,OAAO;IACzB,GAAG,oBAAoB;IACvB,GAAG,SAAS;GACd;EAEJ;EAGF,MAAM,eAAe,UAAU;GAC7B,WAAW,CAAC,IAAI,eAAe,OAAO,cAAc,UAAU;GAC9D,GAAG,UAAU,KAAK,MAAM,MAAM,aAAa,EAAE,EAAE,OAAO,OAAO,cAAc,UAAU,CAAC;GACtF,OAAO,OAAO,cAAc,UAAU;EACxC,CAAC;EAED,MAAM,oBAAoB,aAAa;GAAE;GAAO;EAAM,CAAC;EAEvD,OAAO;GACL,GAAG,aAAa;GAEhB,WAAW,aAAa;IACtB;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,OAAO;IACP,WAAW;IACX;IACA;IACA,mBAAmB,qBAAqB,CAAC,SAAS,QAAQ,MAAM,CAAC;GACnE,CAAC;GAED,OAAO,SAAS;IACd;IACA;IACA;IACA,OAAO;IACP,WAAW;IACX;IACA;IACA,gBAAgB;IAChB;IACA;IACA;GACF,CAAC;EACH;CACF;AACF"}

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

@@ -1,18 +1,21 @@
 "use client";
 import { useCckStylesTransform } from "../../config-provider/config-provider.context.mjs";
+import { toValue } from "vue";
 //#region packages/@cck-ui/core/src/core/styles-api/use-styles/use-transformed-styles.ts
 function useStylesTransform({ props, stylesCtx, themeName, theme }) {
 	const stylesTransform = useCckStylesTransform()?.();
 	const getTransformedStyles = (styles) => {
 		if (!stylesTransform) return [];
+		const currentProps = toValue(props);
+		const currentCtx = toValue(stylesCtx);
 		return [...styles.map((style) => stylesTransform(style, {
-			props,
+			props: currentProps,
 			theme,
-			ctx: stylesCtx
+			ctx: currentCtx
 		})), ...themeName.map((n) => stylesTransform(theme.components[n]?.styles, {
-			props,
+			props: currentProps,
 			theme,
-			ctx: stylesCtx
+			ctx: currentCtx
 		}))].filter(Boolean);
 	};
 	return {

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

@@ -1 +1 @@
-{"version":3,"file":"use-transformed-styles.mjs","names":[],"sources":["../../../../src/core/styles-api/use-styles/use-transformed-styles.ts"],"sourcesContent":["import { CTheme, useCckStylesTransform } from '../../config-provider'\n\ninterface UseTransformedStylesInput {\n  props: Record<string, any>\n  stylesCtx: Record<string, any> | undefined\n  themeName: string[]\n  theme: CTheme\n}\n\nexport function useStylesTransform({\n  props,\n  stylesCtx,\n  themeName,\n  theme,\n}: UseTransformedStylesInput) {\n  const stylesTransform = useCckStylesTransform()?.()\n\n  const getTransformedStyles = (styles: any[]) => {\n    if (!stylesTransform) {\n      return []\n    }\n\n    const transformedStyles = styles.map((style) =>\n      stylesTransform(style, { props, theme, ctx: stylesCtx })\n    )\n\n    return [\n      ...transformedStyles,\n      ...themeName.map((n) =>\n        stylesTransform(theme.components[n]?.styles, {\n          props,\n          theme,\n          ctx: stylesCtx,\n        })\n      ),\n    ].filter(Boolean) as Record<string, string>[]\n  }\n\n  return {\n    getTransformedStyles,\n    withStylesTransform: !!stylesTransform,\n  }\n}\n"],"mappings":";;;AASA,SAAgB,mBAAmB,EACjC,OACA,WACA,WACA,SAC4B;CAC5B,MAAM,kBAAkB,sBAAsB,CAAC,GAAG;CAElD,MAAM,wBAAwB,WAAkB;EAC9C,IAAI,CAAC,iBACH,OAAO,CAAC;EAOV,OAAO,CACL,GALwB,OAAO,KAAK,UACpC,gBAAgB,OAAO;GAAE;GAAO;GAAO,KAAK;EAAU,CAAC,CAIpC,GACnB,GAAG,UAAU,KAAK,MAChB,gBAAgB,MAAM,WAAW,EAAE,EAAE,QAAQ;GAC3C;GACA;GACA,KAAK;EACP,CAAC,CACH,CACF,CAAC,CAAC,OAAO,OAAO;CAClB;CAEA,OAAO;EACL;EACA,qBAAqB,CAAC,CAAC;CACzB;AACF"}
+{"version":3,"file":"use-transformed-styles.mjs","names":[],"sources":["../../../../src/core/styles-api/use-styles/use-transformed-styles.ts"],"sourcesContent":["import { toValue } from 'vue'\nimport { CTheme, useCckStylesTransform } from '../../config-provider'\n\ninterface UseTransformedStylesInput {\n  props: Record<string, any>\n  stylesCtx: Record<string, any> | undefined\n  themeName: string[]\n  theme: CTheme\n}\n\nexport function useStylesTransform({\n  props,\n  stylesCtx,\n  themeName,\n  theme,\n}: UseTransformedStylesInput) {\n  const stylesTransform = useCckStylesTransform()?.()\n\n  const getTransformedStyles = (styles: any[]) => {\n    if (!stylesTransform) {\n      return []\n    }\n\n    const currentProps = toValue(props)\n    const currentCtx = toValue(stylesCtx)\n\n    const transformedStyles = styles.map((style) =>\n      stylesTransform(style, { props: currentProps, theme, ctx: currentCtx })\n    )\n\n    return [\n      ...transformedStyles,\n      ...themeName.map((n) =>\n        stylesTransform(theme.components[n]?.styles, {\n          props: currentProps,\n          theme,\n          ctx: currentCtx,\n        })\n      ),\n    ].filter(Boolean) as Record<string, string>[]\n  }\n\n  return {\n    getTransformedStyles,\n    withStylesTransform: !!stylesTransform,\n  }\n}\n"],"mappings":";;;;AAUA,SAAgB,mBAAmB,EACjC,OACA,WACA,WACA,SAC4B;CAC5B,MAAM,kBAAkB,sBAAsB,CAAC,GAAG;CAElD,MAAM,wBAAwB,WAAkB;EAC9C,IAAI,CAAC,iBACH,OAAO,CAAC;EAGV,MAAM,eAAe,QAAQ,KAAK;EAClC,MAAM,aAAa,QAAQ,SAAS;EAMpC,OAAO,CACL,GALwB,OAAO,KAAK,UACpC,gBAAgB,OAAO;GAAE,OAAO;GAAc;GAAO,KAAK;EAAW,CAAC,CAInD,GACnB,GAAG,UAAU,KAAK,MAChB,gBAAgB,MAAM,WAAW,EAAE,EAAE,QAAQ;GAC3C,OAAO;GACP;GACA,KAAK;EACP,CAAC,CACH,CACF,CAAC,CAAC,OAAO,OAAO;CAClB;CAEA,OAAO;EACL;EACA,qBAAqB,CAAC,CAAC;CACzB;AACF"}

package/esm/index.mjs

@@ -62,6 +62,7 @@ import { CAspectRatio } from "./components/aspect-ratio/index.mjs";
 import { CButton, CButtonGroup, CButtonGroupSection } from "./components/button/index.mjs";
 import { CCenter } from "./components/center/index.mjs";
 import { CContainer } from "./components/container/index.mjs";
+import { CCopyButton } from "./components/copy-button/index.mjs";
 import { CEmptyState, CEmptyStateActions, CEmptyStateDescription, CEmptyStateIndicator, CEmptyStateTitle } from "./components/empty-state/index.mjs";
 import { CFlex } from "./components/flex/index.mjs";
 import { CCol, CGrid } from "./components/grid/index.mjs";
@@ -92,6 +93,7 @@ const components = [
 	CCloseButton,
 	CCol,
 	CContainer,
+	CCopyButton,
 	CEmptyState,
 	CEmptyStateActions,
 	CEmptyStateDescription,
@@ -122,6 +124,6 @@ const CckUI = { install(app) {
 	});
 } };
 //#endregion
-export { CActionIcon, CActionIconGroup, CActionIconGroupSection, CAlert, CAspectRatio, CBox, CButton, CButtonGroup, CButtonGroupSection, transitions as CCK_TRANSITIONS, CCenter, CCloseButton, CCol, CContainer, CDefaultLoaders, CEmptyState, CEmptyStateActions, CEmptyStateDescription, CEmptyStateIndicator, CEmptyStateTitle, CFlex, CGrid, CGroup, CImage, CLoader, CONFIG_KEY, CPaper, CSemiCircleProgress, CSimpleGrid, CSkeleton, CSpace, CSplitter, CSplitterPane, CStack, CText, CTransition, CckConfigProvider, CckUI, CckUI as default, DEFAULT_THEME, FOCUS_CLASS_NAMES, STYLE_PROPS_DATA, THEME_KEY, UnstyledButton, alpha, camelToKebabCase, colorsTuple, createTheme, createVarsResolver, darken, deepMerge, defaultCssVariablesResolver, defaultVariantColorsResolver, em, extractStyleProps, filterProps, 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, mergeThemeOverrides, normalizeNumberLikeStringProp, numberLikeStringToNumber, parseStyleProps, parseThemeColor, px, rem, resolveClassNames, resolveStyles, responsiveStyleManager, rgb, rgba, stylesToString, toRgba, useCckClassNamesPrefix, useCckColorScheme, useCckCssVariablesResolver, useCckEnv, useCckIsHeadless, useCckStyleNonce, useCckStylesTransform, useCckSxTransform, useCckTheme, useCckWithStaticClasses, useComponentProps, useConfigContext, useProviderColorScheme, useRandomClassName, useStyles, virtualColor, withClasses, withExtend, withInstall, withPropsDefaultSetter, withPropsFactory, withVarsResolver };
+export { CActionIcon, CActionIconGroup, CActionIconGroupSection, CAlert, CAspectRatio, CBox, CButton, CButtonGroup, CButtonGroupSection, transitions as CCK_TRANSITIONS, CCenter, CCloseButton, CCol, CContainer, CCopyButton, CDefaultLoaders, CEmptyState, CEmptyStateActions, CEmptyStateDescription, CEmptyStateIndicator, CEmptyStateTitle, CFlex, CGrid, CGroup, CImage, CLoader, CONFIG_KEY, CPaper, CSemiCircleProgress, CSimpleGrid, CSkeleton, CSpace, CSplitter, CSplitterPane, CStack, CText, CTransition, CckConfigProvider, CckUI, CckUI as default, DEFAULT_THEME, FOCUS_CLASS_NAMES, STYLE_PROPS_DATA, THEME_KEY, UnstyledButton, alpha, camelToKebabCase, colorsTuple, createTheme, createVarsResolver, darken, deepMerge, defaultCssVariablesResolver, defaultVariantColorsResolver, em, extractStyleProps, filterProps, 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, mergeThemeOverrides, normalizeNumberLikeStringProp, numberLikeStringToNumber, parseStyleProps, parseThemeColor, px, rem, resolveClassNames, resolveStyles, responsiveStyleManager, rgb, rgba, stylesToString, toRgba, useCckClassNamesPrefix, useCckColorScheme, useCckCssVariablesResolver, useCckEnv, useCckIsHeadless, useCckStyleNonce, useCckStylesTransform, useCckSxTransform, useCckTheme, useCckWithStaticClasses, useComponentProps, useConfigContext, useProviderColorScheme, useRandomClassName, useStyles, virtualColor, withClasses, withExtend, withInstall, withPropsDefaultSetter, withPropsFactory, withVarsResolver };
 
 //# sourceMappingURL=index.mjs.map

package/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../src/index.ts"],"sourcesContent":["import type { App, Plugin } from 'vue'\nimport {\n  CActionIcon,\n  CActionIconGroup,\n  CActionIconGroupSection,\n  CAlert,\n  CAspectRatio,\n  CButton,\n  CButtonGroup,\n  CButtonGroupSection,\n  CCenter,\n  CCloseButton,\n  CCol,\n  CContainer,\n  CEmptyState,\n  CEmptyStateActions,\n  CEmptyStateDescription,\n  CEmptyStateIndicator,\n  CEmptyStateTitle,\n  CFlex,\n  CGrid,\n  CGroup,\n  CImage,\n  CLoader,\n  CPaper,\n  CSemiCircleProgress,\n  CSimpleGrid,\n  CSkeleton,\n  CSpace,\n  CSplitter,\n  CSplitterPane,\n  CStack,\n  CText,\n  CTransition,\n  UnstyledButton,\n} from './components'\nimport { CckConfigProvider, CBox } from './core'\n\nconst INSTALLED_KEY = Symbol('INSTALLED_KEY')\n\nconst components = [\n  CckConfigProvider,\n  CBox,\n  CActionIcon,\n  CActionIconGroup,\n  CActionIconGroupSection,\n  CAlert,\n  CAspectRatio,\n  CButton,\n  CButtonGroup,\n  CButtonGroupSection,\n  CCenter,\n  CCloseButton,\n  CCol,\n  CContainer,\n  CEmptyState,\n  CEmptyStateActions,\n  CEmptyStateDescription,\n  CEmptyStateIndicator,\n  CEmptyStateTitle,\n  CFlex,\n  CGrid,\n  CGroup,\n  CImage,\n  CLoader,\n  CPaper,\n  CSemiCircleProgress,\n  CSimpleGrid,\n  CSkeleton,\n  CSpace,\n  CSplitter,\n  CSplitterPane,\n  CStack,\n  CText,\n  CTransition,\n  UnstyledButton,\n]\n\nconst CckUI: Plugin = {\n  install(app: App) {\n    if ((app as any)[INSTALLED_KEY]) {\n      return\n    }\n    ;(app as any)[INSTALLED_KEY] = true\n    components.forEach((c) => {\n      if (c.name) {\n        app.component(c.name, c)\n      }\n    })\n  },\n}\n\nexport default CckUI\nexport { CckUI }\n\nexport * from './components'\nexport * from './core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,MAAM,gBAAgB,OAAO,eAAe;AAE5C,MAAM,aAAa;CACjB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,QAAgB,EACpB,QAAQ,KAAU;CAChB,IAAK,IAAY,gBACf;CAED,IAAa,iBAAiB;CAC/B,WAAW,SAAS,MAAM;EACxB,IAAI,EAAE,MACJ,IAAI,UAAU,EAAE,MAAM,CAAC;CAE3B,CAAC;AACH,EACF"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/index.ts"],"sourcesContent":["import type { App, Plugin } from 'vue'\nimport {\n  CActionIcon,\n  CActionIconGroup,\n  CActionIconGroupSection,\n  CAlert,\n  CAspectRatio,\n  CButton,\n  CButtonGroup,\n  CButtonGroupSection,\n  CCenter,\n  CCloseButton,\n  CCol,\n  CContainer,\n  CCopyButton,\n  CEmptyState,\n  CEmptyStateActions,\n  CEmptyStateDescription,\n  CEmptyStateIndicator,\n  CEmptyStateTitle,\n  CFlex,\n  CGrid,\n  CGroup,\n  CImage,\n  CLoader,\n  CPaper,\n  CSemiCircleProgress,\n  CSimpleGrid,\n  CSkeleton,\n  CSpace,\n  CSplitter,\n  CSplitterPane,\n  CStack,\n  CText,\n  CTransition,\n  UnstyledButton,\n} from './components'\nimport { CckConfigProvider, CBox } from './core'\n\nconst INSTALLED_KEY = Symbol('INSTALLED_KEY')\n\nconst components = [\n  CckConfigProvider,\n  CBox,\n  CActionIcon,\n  CActionIconGroup,\n  CActionIconGroupSection,\n  CAlert,\n  CAspectRatio,\n  CButton,\n  CButtonGroup,\n  CButtonGroupSection,\n  CCenter,\n  CCloseButton,\n  CCol,\n  CContainer,\n  CCopyButton,\n  CEmptyState,\n  CEmptyStateActions,\n  CEmptyStateDescription,\n  CEmptyStateIndicator,\n  CEmptyStateTitle,\n  CFlex,\n  CGrid,\n  CGroup,\n  CImage,\n  CLoader,\n  CPaper,\n  CSemiCircleProgress,\n  CSimpleGrid,\n  CSkeleton,\n  CSpace,\n  CSplitter,\n  CSplitterPane,\n  CStack,\n  CText,\n  CTransition,\n  UnstyledButton,\n]\n\nconst CckUI: Plugin = {\n  install(app: App) {\n    if ((app as any)[INSTALLED_KEY]) {\n      return\n    }\n    ;(app as any)[INSTALLED_KEY] = true\n    components.forEach((c) => {\n      if (c.name) {\n        app.component(c.name, c)\n      }\n    })\n  },\n}\n\nexport default CckUI\nexport { CckUI }\n\nexport * from './components'\nexport * from './core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,MAAM,gBAAgB,OAAO,eAAe;AAE5C,MAAM,aAAa;CACjB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,QAAgB,EACpB,QAAQ,KAAU;CAChB,IAAK,IAAY,gBACf;CAED,IAAa,iBAAiB;CAC/B,WAAW,SAAS,MAAM;EACxB,IAAI,EAAE,MACJ,IAAI,UAAU,EAAE,MAAM,CAAC;CAE3B,CAAC;AACH,EACF"}

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

@@ -0,0 +1,11 @@
+export interface CopyButtonProps {
+    /**
+     * @description Copied status timeout in ms
+     * @default 1000
+     */
+    timeout?: number;
+    /**
+     * @description Value that is copied to the clipboard when the button is clicked
+     */
+    value: string;
+}

package/lib/components/copy-button/index.d.ts

@@ -0,0 +1,3 @@
+export declare const CCopyButton: any;
+export default CCopyButton;
+export * from './copy-button.types';

package/lib/components/index.d.ts

@@ -5,6 +5,7 @@ export * from './button';
 export * from './center';
 export * from './close-button';
 export * from './container';
+export * from './copy-button';
 export * from './empty-state';
 export * from './flex';
 export * from './grid';

package/lib/core/styles-api/use-styles/use-styles.d.ts

@@ -3,11 +3,12 @@ import { PartialVarsResolver, VarsResolver } from '../create-vars-resolver/creat
 import { Properties } from 'csstype';
 import { FactoryPayload } from '../../factory';
 import { CStyleProp } from '../../box';
+import { MaybeRefOrGetter } from 'vue';
 export interface UseStylesInput<Payload extends FactoryPayload> {
     name: string | (string | undefined)[];
     classes: Payload['stylesNames'] extends string ? Record<string, string> : never;
-    props: Payload['props'];
-    stylesCtx?: Payload['ctx'];
+    props: MaybeRefOrGetter<Payload['props']>;
+    stylesCtx?: MaybeRefOrGetter<Payload['ctx'] | undefined>;
     className?: string | undefined;
     style?: CStyleProp;
     rootSelector?: Payload['stylesNames'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cck-ui/core",
-  "version": "0.19.0",
+  "version": "0.20.1",
   "description": "Vue component library focused on usability, accessibility and developer experience",
   "homepage": "https://cck-ui.jackatlas.xyz",
   "license": "ISC",