@cck-ui/core 0.20.0 → 0.20.2

package/esm/components/unstyled-button/unstyled-button.mjs

@@ -332,15 +332,17 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			"style",
 			"attributes"
 		];
+		const styleProps = computed(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = useStyles({
 			name: props.value.__staticSelector,
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: unstyled_button_module_default,
-			className: props.value.className,
-			style: props.value.style,
+			className: () => props.value.className,
+			style: () => props.value.style,
 			classNames: props.value.classNames,
 			styles: props.value.styles,
 			unstyled: props.value.unstyled,
@@ -364,6 +366,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			tag,
 			_root,
 			knownProps,
+			styleProps,
 			getStyles,
 			rootAttrs,
 			mergedAttrs,

package/esm/components/unstyled-button/unstyled-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"unstyled-button.mjs","names":[],"sources":["../../../src/components/unstyled-button/unstyled-button.vue"],"sourcesContent":["<template>\n  <c-box\n    ref=\"_root\"\n    v-bind=\"mergedAttrs\"\n    :tag=\"tag\"\n    :type=\"tag === 'button' ? 'button' : undefined\"\n  >\n    <slot />\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport type { UnstyledButtonFactory, UnstyledButtonProps } from './unstyled-button.types'\nimport classes from './unstyled-button.module.css'\n\ndefineOptions({\n  name: 'UnstyledButton',\n})\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<UnstyledButtonProps>()\n\nconst props = useComponentProps({\n  component: 'UnstyledButton',\n  defaultProps: {\n    __staticSelector: 'UnstyledButton',\n  },\n  props: rawProps,\n})\n\nconst { tag = 'button' } = props.value\n\nconst _root = ref<InstanceType<typeof CBox> | null>(null)\n\nconst knownProps = [\n  'className',\n  'tag',\n  '__staticSelector',\n  'unstyled',\n  'classNames',\n  'styles',\n  'style',\n  'attributes',\n]\n\nconst getStyles = useStyles<UnstyledButtonFactory>({\n  name: props.value.__staticSelector!,\n  props: { ...props.value, ...attrs } as UnstyledButtonProps,\n  classes,\n  className: props.value.className,\n  style: props.value.style,\n  classNames: props.value.classNames,\n  styles: props.value.styles,\n  unstyled: props.value.unstyled,\n  attributes: props.value.attributes,\n})\n\nconst rootAttrs = computed(() => getStyles('root', { focusable: true }))\nconst mergedAttrs = computed(() => {\n  const others: Record<string, any> = {}\n  const propsValue = props.value\n  for (const key in propsValue) {\n    if (!knownProps.includes(key)) {\n      others[key] = propsValue[key as keyof typeof propsValue]\n    }\n  }\n  return { ...others, ...rootAttrs.value }\n})\n\ndefineExpose({\n  root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBA,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX,cAAc,EACZ,kBAAkB,iBACpB;GACA,OAAO;EACT,CAAC;EAED,MAAM,EAAE,MAAM,aAAa,MAAM;EAEjC,MAAM,QAAQ,IAAsC,IAAI;EAExD,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,YAAY,UAAiC;GACjD,MAAM,MAAM,MAAM;GAClB,OAAO;IAAE,GAAG,MAAM;IAAO,GAAG;GAAM;GAClC,SAAA;GACA,WAAW,MAAM,MAAM;GACvB,OAAO,MAAM,MAAM;GACnB,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;EAC1B,CAAC;EAED,MAAM,YAAY,eAAe,UAAU,QAAQ,EAAE,WAAW,KAAK,CAAC,CAAC;EACvE,MAAM,cAAc,eAAe;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,KAAK,MAAM,OAAO,YAChB,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAG7B,OAAO;IAAE,GAAG;IAAQ,GAAG,UAAU;GAAM;EACzC,CAAC;EAED,SAAa,EACX,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC;;;;;;;;;;;;;;;;;;;;;;;qBAzEC,YAOQ,OAAA,SAPR,WAOQ,EANN,KAAI,QAAO,GACH,OAAA,aAAW;EAClB,KAAK,OAAA;EACL,MAAM,OAAA,QAAG,WAAA,WAA2B,KAAA;;yBAE7B,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}
+{"version":3,"file":"unstyled-button.mjs","names":[],"sources":["../../../src/components/unstyled-button/unstyled-button.vue"],"sourcesContent":["<template>\n  <c-box\n    ref=\"_root\"\n    v-bind=\"mergedAttrs\"\n    :tag=\"tag\"\n    :type=\"tag === 'button' ? 'button' : undefined\"\n  >\n    <slot />\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../core'\nimport type { UnstyledButtonFactory, UnstyledButtonProps } from './unstyled-button.types'\nimport classes from './unstyled-button.module.css'\n\ndefineOptions({\n  name: 'UnstyledButton',\n})\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<UnstyledButtonProps>()\n\nconst props = useComponentProps({\n  component: 'UnstyledButton',\n  defaultProps: {\n    __staticSelector: 'UnstyledButton',\n  },\n  props: rawProps,\n})\n\nconst { tag = 'button' } = props.value\n\nconst _root = ref<InstanceType<typeof CBox> | null>(null)\n\nconst knownProps = [\n  'className',\n  'tag',\n  '__staticSelector',\n  'unstyled',\n  'classNames',\n  'styles',\n  'style',\n  'attributes',\n]\n\nconst styleProps = computed(() => ({\n  ...props.value,\n  ...attrs,\n  style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<UnstyledButtonFactory>({\n  name: props.value.__staticSelector!,\n  props: styleProps,\n  classes,\n  className: () => props.value.className,\n  style: () => props.value.style,\n  classNames: props.value.classNames,\n  styles: props.value.styles,\n  unstyled: props.value.unstyled,\n  attributes: props.value.attributes,\n})\n\nconst rootAttrs = computed(() => getStyles('root', { focusable: true }))\nconst mergedAttrs = computed(() => {\n  const others: Record<string, any> = {}\n  const propsValue = props.value\n  for (const key in propsValue) {\n    if (!knownProps.includes(key)) {\n      others[key] = propsValue[key as keyof typeof propsValue]\n    }\n  }\n  return { ...others, ...rootAttrs.value }\n})\n\ndefineExpose({\n  root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBA,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX,cAAc,EACZ,kBAAkB,iBACpB;GACA,OAAO;EACT,CAAC;EAED,MAAM,EAAE,MAAM,aAAa,MAAM;EAEjC,MAAM,QAAQ,IAAsC,IAAI;EAExD,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,aAAa,gBAAgB;GACjC,GAAG,MAAM;GACT,GAAG;GACH,OAAQ,MAAM,SAAS,MAAM,MAAM;EACrC,EAAE;EAEF,MAAM,YAAY,UAAiC;GACjD,MAAM,MAAM,MAAM;GAClB,OAAO;GACP,SAAA;GACA,iBAAiB,MAAM,MAAM;GAC7B,aAAa,MAAM,MAAM;GACzB,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;EAC1B,CAAC;EAED,MAAM,YAAY,eAAe,UAAU,QAAQ,EAAE,WAAW,KAAK,CAAC,CAAC;EACvE,MAAM,cAAc,eAAe;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,KAAK,MAAM,OAAO,YAChB,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAG7B,OAAO;IAAE,GAAG;IAAQ,GAAG,UAAU;GAAM;EACzC,CAAC;EAED,SAAa,EACX,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;qBA/EC,YAOQ,OAAA,SAPR,WAOQ,EANN,KAAI,QAAO,GACH,OAAA,aAAW;EAClB,KAAK,OAAA;EACL,MAAM,OAAA,QAAG,WAAA,WAA2B,KAAA;;yBAE7B,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}

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,86 @@ 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 currentStyle = toValue(style);
+		const currentClassName = toValue(className);
+		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: currentStyle,
+			theme
+		});
+		return {
+			...attributes?.[selector],
+			className: getClassName({
+				theme,
+				options,
+				themeName,
+				selector,
+				classNamesPrefix,
+				resolvedClassNames,
+				resolvedThemeClassNames,
+				classes,
+				unstyled,
+				className: currentClassName,
+				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?: MaybeRefOrGetter<string | undefined>\n  style?: MaybeRefOrGetter<CStyleProp | undefined>\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    const currentStyle = toValue(style) as CStyleProp | undefined\n    const currentClassName = toValue(className)\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: currentStyle, 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: currentClassName,\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;EACpC,MAAM,eAAe,QAAQ,KAAK;EAClC,MAAM,mBAAmB,QAAQ,SAAS;EAE1C,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,OAAO;GAAc;EAAM,CAAC;EAErE,OAAO;GACL,GAAG,aAAa;GAEhB,WAAW,aAAa;IACtB;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,WAAW;IACX;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/lib/core/styles-api/use-styles/use-styles.d.ts

@@ -3,13 +3,14 @@ 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'];
-    className?: string | undefined;
-    style?: CStyleProp;
+    props: MaybeRefOrGetter<Payload['props']>;
+    stylesCtx?: MaybeRefOrGetter<Payload['ctx'] | undefined>;
+    className?: MaybeRefOrGetter<string | undefined>;
+    style?: MaybeRefOrGetter<CStyleProp | undefined>;
     rootSelector?: Payload['stylesNames'];
     unstyled?: boolean;
     classNames?: ClassNames<Payload> | ClassNamesArray<Payload>;

package/package.json

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