npm - @cck-ui/core - Versions diffs - 0.20.0 → 0.20.2 - Mend

@cck-ui/core 0.20.0 → 0.20.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (114) hide show

package/cjs/components/action-icon/action-icon-group/action-icon-group.cjs CHANGED Viewed

@@ -331,15 +331,17 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			"mod",
 			"attributes"
 		];
+		const styleProps = (0, vue.computed)(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = require_use_styles.useStyles({
 			name: "ActionIconGroup",
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: require_action_icon_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,
@@ -370,6 +372,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			defaultProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			modList,
 			groupAttrs,

package/cjs/components/action-icon/action-icon-group/action-icon-group.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"action-icon-group.cjs","names":[],"sources":["../../../../src/components/action-icon/action-icon-group/action-icon-group.vue"],"sourcesContent":["<template>\n <c-box ref=\"_group\" role=\"group\" v-bind=\"mergedAttrs\">\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 { ActionIconGroupFactory, ActionIconGroupProps } from './action-icon-group.types'\nimport classes from '../action-icon.module.css'\nimport { varsResolver } from './action-icon-group.utils'\n\ndefineOptions({\n name: 'CActionIconGroup',\n})\n\nconst _group = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<ActionIconGroupProps>()\n\nconst defaultProps = {\n orientation: 'horizontal',\n} satisfies Partial<ActionIconGroupProps>\n\nconst props = useComponentProps({\n component: 'CActionIconGroup',\n defaultProps,\n props: rawProps,\n})\n\nconst knownProps = [\n 'className',\n 'style',\n 'classNames',\n 'styles',\n 'unstyled',\n 'orientation',\n 'vars',\n 'borderWidth',\n 'mod',\n 'attributes',\n]\n\nconst getStyles = useStyles<ActionIconGroupFactory>({\n name: 'ActionIconGroup',\n props: ~~{ ...props.value, ...attrs } as ActionIconGroupProps~~,\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 vars: props.value.vars,\n varsResolver,\n rootSelector: 'group',\n})\n\nconst modList = computed(() => [\n {\n orientation: props.value.orientation,\n },\n])\n\nconst groupAttrs = computed(() => getStyles('group'))\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 const userMod = props.value.mod\n const mergedMod = [\n ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n ...(modList.value \|\| []),\n ]\n return { ...others, mod: mergedMod, ...groupAttrs.value }\n})\n\ndefineExpose({\n group: computed(() => _group.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,UAAA,GAAA,IAAA,IAAA,CAA+C,IAAI;EAEzD,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAEjB,MAAM,eAAe,EACnB,aAAa,aACf;EAEA,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX;GACA,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,~~YAAY~~,~~mBAAA~~,~~UAAkC~~;~~GAClD~~,MAAM;~~GACN~~,~~OAAO~~;~~IAAE~~,~~GAAG~~,MAAM;~~IAAO~~,~~GAAG~~;~~GAAM~~;~~GAClC~~,SAAA,2BAAA;GACA,~~WAAW~~,MAAM,MAAM;~~GACvB~~,~~OAAO~~,MAAM,MAAM;~~GACnB~~,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB,cAAA,gCAAA;GACA,cAAc;EAChB,CAAC;EAED,MAAM,WAAA,GAAA,IAAA,SAAA,OAAyB,CAC7B,EACE,aAAa,MAAM,MAAM,YAC3B,CACF,CAAC;EAED,MAAM,cAAA,GAAA,IAAA,SAAA,OAA4B,UAAU,OAAO,CAAC;EACpD,MAAM,eAAA,GAAA,IAAA,SAAA,OAA6B;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,KAAK,MAAM,OAAO,YAChB,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAG7B,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAChB,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,GAC/D,GAAI,QAAQ,SAAS,CAAC,CACxB;GACA,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,WAAW;GAAM;EAC1D,CAAC;EAED,SAAa,EACX,QAAA,GAAA,IAAA,SAAA,OAAsB,OAAO,OAAO,QAAQ,IAAI,EAClD,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;mDAnFS~~,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA;EAFD,KAAI;EAAS,MAAK;IAAgB,OAAA,WAAW,GAAA;kCAC1C,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"action-icon-group.cjs","names":[],"sources":["../../../../src/components/action-icon/action-icon-group/action-icon-group.vue"],"sourcesContent":["<template>\n <c-box ref=\"_group\" role=\"group\" v-bind=\"mergedAttrs\">\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 { ActionIconGroupFactory, ActionIconGroupProps } from './action-icon-group.types'\nimport classes from '../action-icon.module.css'\nimport { varsResolver } from './action-icon-group.utils'\n\ndefineOptions({\n name: 'CActionIconGroup',\n})\n\nconst _group = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<ActionIconGroupProps>()\n\nconst defaultProps = {\n orientation: 'horizontal',\n} satisfies Partial<ActionIconGroupProps>\n\nconst props = useComponentProps({\n component: 'CActionIconGroup',\n defaultProps,\n props: rawProps,\n})\n\nconst knownProps = [\n 'className',\n 'style',\n 'classNames',\n 'styles',\n 'unstyled',\n 'orientation',\n 'vars',\n 'borderWidth',\n 'mod',\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<ActionIconGroupFactory>({\n name: 'ActionIconGroup',\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 vars: props.value.vars,\n varsResolver,\n rootSelector: 'group',\n})\n\nconst modList = computed(() => [\n {\n orientation: props.value.orientation,\n },\n])\n\nconst groupAttrs = computed(() => getStyles('group'))\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 const userMod = props.value.mod\n const mergedMod = [\n ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n ...(modList.value \|\| []),\n ]\n return { ...others, mod: mergedMod, ...groupAttrs.value }\n})\n\ndefineExpose({\n group: computed(() => _group.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,UAAA,GAAA,IAAA,IAAA,CAA+C,IAAI;EAEzD,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAEjB,MAAM,eAAe,EACnB,aAAa,aACf;EAEA,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX;GACA,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,cAAA,GAAA,IAAA,SAAA,QAA6B;GACjC,GAAG,MAAM;GACT,GAAG;GACH,OAAQ,MAAM,SAAS,MAAM,MAAM;EACrC,EAAE;EAEF,MAAM,YAAY,mBAAA,UAAkC;GAClD,MAAM;GACN,OAAO;GACP,SAAA,2BAAA;GACA,iBAAiB,MAAM,MAAM;GAC7B,aAAa,MAAM,MAAM;GACzB,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB,cAAA,gCAAA;GACA,cAAc;EAChB,CAAC;EAED,MAAM,WAAA,GAAA,IAAA,SAAA,OAAyB,CAC7B,EACE,aAAa,MAAM,MAAM,YAC3B,CACF,CAAC;EAED,MAAM,cAAA,GAAA,IAAA,SAAA,OAA4B,UAAU,OAAO,CAAC;EACpD,MAAM,eAAA,GAAA,IAAA,SAAA,OAA6B;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,KAAK,MAAM,OAAO,YAChB,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAG7B,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAChB,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,GAC/D,GAAI,QAAQ,SAAS,CAAC,CACxB;GACA,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,WAAW;GAAM;EAC1D,CAAC;EAED,SAAa,EACX,QAAA,GAAA,IAAA,SAAA,OAAsB,OAAO,OAAO,QAAQ,IAAI,EAClD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;mDAzFS,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA;EAFD,KAAI;EAAS,MAAK;IAAgB,OAAA,WAAW,GAAA;kCAC1C,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/cjs/components/action-icon/action-icon-group-section/action-icon-group-section.cjs CHANGED Viewed

@@ -337,21 +337,22 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			"styles",
 			"unstyled",
 			"vars",
-			"variant",
 			"gradient",
 			"radius",
 			"autoContrast",
 			"attributes"
 		];
+		const styleProps = (0, vue.computed)(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = require_use_styles.useStyles({
 			name: "ActionIconGroupSection",
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: require_action_icon_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,7 +365,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 		const mergedAttrs = (0, vue.computed)(() => {
 			const others = {};
 			const propsValue = props.value;
-			for (const key in propsValue) others[key] = propsValue[key];
+			for (const key in propsValue) if (!knownProps.includes(key)) others[key] = propsValue[key];
 			const userMod = props.value.mod;
 			const mergedMod = [...Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)];
 			return {
@@ -380,6 +381,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			rawProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			sectionAttrs,
 			mergedAttrs,

package/cjs/components/action-icon/action-icon-group-section/action-icon-group-section.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"action-icon-group-section.cjs","names":[],"sources":["../../../../src/components/action-icon/action-icon-group-section/action-icon-group-section.vue"],"sourcesContent":["<template>\n <c-box ref=\"_section\" v-bind=\"mergedAttrs\">\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 classes from '../action-icon.module.css'\nimport {\n ActionIconGroupSectionFactory,\n ActionIconGroupSectionProps,\n} from './action-icon-group-section.types'\nimport { varsResolver } from './action-icon-group-section.utils'\n\ndefineOptions({\n name: 'CActionIconGroupSection',\n})\n\nconst _section = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<ActionIconGroupSectionProps>()\n\nconst props = useComponentProps({\n component: 'CActionIconGroupSection',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'className',\n 'style',\n 'classNames',\n 'styles',\n 'unstyled',\n 'vars',\n '~~variant',\n '~~gradient',\n 'radius',\n 'autoContrast',\n 'attributes',\n]\n\nconst getStyles = useStyles<ActionIconGroupSectionFactory>({\n name: 'ActionIconGroupSection',\n props: ~~{ ...props.value, ...attrs } as ActionIconGroupSectionProps~~,\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 vars: props.value.vars,\n varsResolver,\n rootSelector: 'groupSection',\n})\n\nconst sectionAttrs = computed(() => getStyles('groupSection'))\nconst mergedAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n for (const key in propsValue) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n const userMod = props.value.mod\n const mergedMod = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n return { ...others, mod: mergedMod, ...sectionAttrs.value }\n})\n\ndefineExpose({\n section: computed(() => _section.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBA,MAAM,YAAA,GAAA,IAAA,IAAA,CAAiD,IAAI;EAE3D,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX,cAAc,CAAC;GACf,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;~~GACA;~~EACF;EAEA,MAAM,~~YAAY~~,~~mBAAA~~,~~UAAyC~~;~~GACzD~~,MAAM;~~GACN~~,~~OAAO~~;~~IAAE~~,~~GAAG~~,MAAM;~~IAAO~~,~~GAAG~~;~~GAAM~~;~~GAClC~~,SAAA,2BAAA;GACA,~~WAAW~~,MAAM,MAAM;~~GACvB~~,~~OAAO~~,MAAM,MAAM;~~GACnB~~,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB,cAAA,wCAAA;GACA,cAAc;EAChB,CAAC;EAED,MAAM,gBAAA,GAAA,IAAA,SAAA,OAA8B,UAAU,cAAc,CAAC;EAC7D,MAAM,eAAA,GAAA,IAAA,SAAA,OAA6B;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,KAAK,MAAM,OAAO,YAChB,OAAO,OAAO,WAAW;~~GAE3B~~,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAAC,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,CAAE;GACpF,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,aAAa;GAAM;EAC5D,CAAC;EAED,SAAa,EACX,UAAA,GAAA,IAAA,SAAA,OAAwB,SAAS,OAAO,QAAQ,IAAI,EACtD,CAAC~~;;;;;;;;;;;;;;;;;;;;;;mDAxES~~,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAFD,KAAI,WAAU,GAAS,OAAA,WAAW,GAAA;kCAC/B,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"action-icon-group-section.cjs","names":[],"sources":["../../../../src/components/action-icon/action-icon-group-section/action-icon-group-section.vue"],"sourcesContent":["<template>\n <c-box ref=\"_section\" v-bind=\"mergedAttrs\">\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 classes from '../action-icon.module.css'\nimport {\n ActionIconGroupSectionFactory,\n ActionIconGroupSectionProps,\n} from './action-icon-group-section.types'\nimport { varsResolver } from './action-icon-group-section.utils'\n\ndefineOptions({\n name: 'CActionIconGroupSection',\n})\n\nconst _section = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<ActionIconGroupSectionProps>()\n\nconst props = useComponentProps({\n component: 'CActionIconGroupSection',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'className',\n 'style',\n 'classNames',\n 'styles',\n 'unstyled',\n 'vars',\n 'gradient',\n 'radius',\n 'autoContrast',\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<ActionIconGroupSectionFactory>({\n name: 'ActionIconGroupSection',\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 vars: props.value.vars,\n varsResolver,\n rootSelector: 'groupSection',\n})\n\nconst sectionAttrs = computed(() => getStyles('groupSection'))\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 const userMod = props.value.mod\n const mergedMod = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n return { ...others, mod: mergedMod, ...sectionAttrs.value }\n})\n\ndefineExpose({\n section: computed(() => _section.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBA,MAAM,YAAA,GAAA,IAAA,IAAA,CAAiD,IAAI;EAE3D,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX,cAAc,CAAC;GACf,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,cAAA,GAAA,IAAA,SAAA,QAA6B;GACjC,GAAG,MAAM;GACT,GAAG;GACH,OAAQ,MAAM,SAAS,MAAM,MAAM;EACrC,EAAE;EAEF,MAAM,YAAY,mBAAA,UAAyC;GACzD,MAAM;GACN,OAAO;GACP,SAAA,2BAAA;GACA,iBAAiB,MAAM,MAAM;GAC7B,aAAa,MAAM,MAAM;GACzB,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB,cAAA,wCAAA;GACA,cAAc;EAChB,CAAC;EAED,MAAM,gBAAA,GAAA,IAAA,SAAA,OAA8B,UAAU,cAAc,CAAC;EAC7D,MAAM,eAAA,GAAA,IAAA,SAAA,OAA6B;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,KAAK,MAAM,OAAO,YAChB,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAG7B,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAAC,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,CAAE;GACpF,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,aAAa;GAAM;EAC5D,CAAC;EAED,SAAa,EACX,UAAA,GAAA,IAAA,SAAA,OAAwB,SAAS,OAAO,QAAQ,IAAI,EACtD,CAAC;;;;;;;;;;;;;;;;;;;;;;;mDA/ES,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAFD,KAAI,WAAU,GAAS,OAAA,WAAW,GAAA;kCAC/B,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/cjs/components/action-icon/action-icon.cjs CHANGED Viewed

@@ -374,15 +374,17 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			"mod",
 			"attributes"
 		];
+		const styleProps = (0, vue.computed)(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = require_use_styles.useStyles({
 			name: ["ActionIcon", props.value.__staticSelector],
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: require_action_icon_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,
@@ -415,6 +417,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			rawProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			modList,
 			rootAttrs,

package/cjs/components/action-icon/action-icon.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"action-icon.cjs","names":[],"sources":["../../../src/components/action-icon/action-icon.vue"],"sourcesContent":["<template>\n <unstyled-button\n ref=\"_root\"\n v-bind=\"mergedRootAttrs\"\n :aria-busy=\"props.loading \|\| undefined\"\n :disabled=\"props.disabled \|\| props.loading\"\n :size=\"props.size\"\n :unstyled=\"props.unstyled\"\n >\n <c-transition\n transition=\"slide-down\"\n v-if=\"typeof props.loading === 'boolean'\"\n :duration=\"150\"\n :mounted=\"props.loading\"\n >\n <template #default=\"{ styles }\">\n <c-box\n aria-hidden=\"true\"\n ref=\"_inner\"\n tag=\"span\"\n v-bind=\"getStyles('loader', { style: styles })\"\n >\n <c-loader\n color=\"var(--ai-color)\"\n size=\"calc(var(--ai-size) * 0.55)\"\n v-bind=\"props.loaderProps\"\n ></c-loader>\n </c-box>\n </template>\n </c-transition>\n\n <c-box tag=\"span\" v-bind=\"getStyles('icon')\" :mod=\"{ loading: props.loading }\">\n <slot />\n </c-box>\n </unstyled-button>\n</template>\n\n<script setup lang=\"ts\">\nimport UnstyledButton from '../unstyled-button'\nimport { CLoader } from '../loader'\nimport { CTransition } from '../transition'\nimport { computed, ref, useAttrs } from 'vue'\nimport { ActionIconFactory, ActionIconProps } from './action-icon.types'\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport classes from './action-icon.module.css'\nimport { varsResolver } from './action-icon.utils'\n\ndefineOptions({\n name: 'CActionIcon',\n})\n\nconst _root = ref<InstanceType<typeof UnstyledButton> \| null>(null)\nconst _inner = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<ActionIconProps>()\n\nconst props = useComponentProps({\n component: 'CActionIcon',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'className',\n 'classNames',\n 'style',\n 'styles',\n 'unstyled',\n 'loading',\n 'loaderProps',\n 'size',\n 'color',\n 'radius',\n '__staticSelector',\n 'gradient',\n 'vars',\n 'disabled',\n 'dataDisabled',\n 'autoContrast',\n 'mod',\n 'attributes',\n]\n\nconst getStyles = useStyles<ActionIconFactory>({\n name: ['ActionIcon', props.value.__staticSelector],\n props: ~~{ ...props.value, ...attrs } as ActionIconProps~~,\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 vars: props.value.vars,\n varsResolver,\n})\n\nconst modList = computed(() => [\n { disabled: props.value.disabled \|\| props.value.dataDisabled },\n { loading: props.value.loading },\n])\n\nconst rootAttrs = computed(() =>\n getStyles('root', {\n active: !props.value.disabled && !props.value.loading && !props.value.dataDisabled,\n })\n)\n\nconst mergedRootAttrs = 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 const userMod = props.value.mod\n const mergedMod = [\n ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n ...(modList.value \|\| []),\n ]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n inner: computed(() => _inner.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmDA,MAAM,SAAA,GAAA,IAAA,IAAA,CAAwD,IAAI;EAClE,MAAM,UAAA,GAAA,IAAA,IAAA,CAA+C,IAAI;EAEzD,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX,cAAc,CAAC;GACf,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,YAAY,mBAAA,UAA6B;GAC7C,MAAM,CAAC,cAAc,MAAM,MAAM,gBAAgB;GACjD,OAAO;~~IAAE~~,~~GAAG,MAAM;IAAO,GAAG;GAAM;GAClC,~~SAAA,2BAAA;GACA,~~WAAW~~,MAAM,MAAM;~~GACvB~~,~~OAAO~~,MAAM,MAAM;~~GACnB~~,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB,cAAA,0BAAA;EACF,CAAC;EAED,MAAM,WAAA,GAAA,IAAA,SAAA,OAAyB,CAC7B,EAAE,UAAU,MAAM,MAAM,YAAY,MAAM,MAAM,aAAa,GAC7D,EAAE,SAAS,MAAM,MAAM,QAAQ,CACjC,CAAC;EAED,MAAM,aAAA,GAAA,IAAA,SAAA,OACJ,UAAU,QAAQ,EAChB,QAAQ,CAAC,MAAM,MAAM,YAAY,CAAC,MAAM,MAAM,WAAW,CAAC,MAAM,MAAM,aACxE,CAAC,CACH;EAEA,MAAM,mBAAA,GAAA,IAAA,SAAA,OAAiC;GACrC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,KAAK,MAAM,OAAO,YAChB,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAG7B,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAChB,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,GAC/D,GAAI,QAAQ,SAAS,CAAC,CACxB;GACA,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,UAAU;GAAM;EACzD,CAAC;EAED,SAAa;GACX,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI;GAC9C,QAAA,GAAA,IAAA,SAAA,OAAsB,OAAO,OAAO,QAAQ,IAAI;EAClD,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mDA/FmB~~,OAAA,oBAAA,GAAA,IAAA,WAAA,CAAA,EAhChB,KAAI,QAAO,GACH,OAAA,iBAAe;EACtB,aAAW,OAAA,MAAM,WAAW,KAAA;EAC5B,UAAU,OAAA,MAAM,YAAY,OAAA,MAAM;EAClC,MAAM,OAAA,MAAM;EACZ,UAAU,OAAA,MAAM;;kCAsBF,CAAA,OAlBA,OAAA,MAAM,YAAO,cAAA,GAAA,IAAA,UAAA,CAAA,IAAA,GAAA,IAAA,YAAA,CAkBb,OAAA,gBAAA;;GAnBb,YAAW;GAEV,UAAU;GACV,SAAS,OAAA,MAAM;;GAEL,UAAA,GAAA,IAAA,QAAA,EAYD,EAZY,aAAM,EAAA,GAAA,IAAA,YAAA,CAYlB,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA;IAVN,eAAY;IACZ,KAAI;IACJ,KAAI;MACI,OAAA,UAAS,UAAA,EAAA,OAAoB,OAAM,CAAA,CAAA,GAAA;oCAM/B,EAAA,GAAA,IAAA,YAAA,CAAA,OAAA,aAAA,GAAA,IAAA,WAAA,CAAA;KAHV,OAAM;KACN,MAAK;OACG,OAAA,MAAM,WAAW,GAAA,MAAA,EAAA,CAAA,CAAA;;;;wFAQzB,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAFD,KAAI,OAAM,GAAS,OAAA,UAAS,MAAA,GAAA,EAAW,KAAG,EAAA,SAAa,OAAA,MAAM,QAAO,EAAA,CAAA,GAAA;mCACjE,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"action-icon.cjs","names":[],"sources":["../../../src/components/action-icon/action-icon.vue"],"sourcesContent":["<template>\n <unstyled-button\n ref=\"_root\"\n v-bind=\"mergedRootAttrs\"\n :aria-busy=\"props.loading \|\| undefined\"\n :disabled=\"props.disabled \|\| props.loading\"\n :size=\"props.size\"\n :unstyled=\"props.unstyled\"\n >\n <c-transition\n transition=\"slide-down\"\n v-if=\"typeof props.loading === 'boolean'\"\n :duration=\"150\"\n :mounted=\"props.loading\"\n >\n <template #default=\"{ styles }\">\n <c-box\n aria-hidden=\"true\"\n ref=\"_inner\"\n tag=\"span\"\n v-bind=\"getStyles('loader', { style: styles })\"\n >\n <c-loader\n color=\"var(--ai-color)\"\n size=\"calc(var(--ai-size) * 0.55)\"\n v-bind=\"props.loaderProps\"\n ></c-loader>\n </c-box>\n </template>\n </c-transition>\n\n <c-box tag=\"span\" v-bind=\"getStyles('icon')\" :mod=\"{ loading: props.loading }\">\n <slot />\n </c-box>\n </unstyled-button>\n</template>\n\n<script setup lang=\"ts\">\nimport UnstyledButton from '../unstyled-button'\nimport { CLoader } from '../loader'\nimport { CTransition } from '../transition'\nimport { computed, ref, useAttrs } from 'vue'\nimport { ActionIconFactory, ActionIconProps } from './action-icon.types'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../core'\nimport classes from './action-icon.module.css'\nimport { varsResolver } from './action-icon.utils'\n\ndefineOptions({\n name: 'CActionIcon',\n})\n\nconst _root = ref<InstanceType<typeof UnstyledButton> \| null>(null)\nconst _inner = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<ActionIconProps>()\n\nconst props = useComponentProps({\n component: 'CActionIcon',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'className',\n 'classNames',\n 'style',\n 'styles',\n 'unstyled',\n 'loading',\n 'loaderProps',\n 'size',\n 'color',\n 'radius',\n '__staticSelector',\n 'gradient',\n 'vars',\n 'disabled',\n 'dataDisabled',\n 'autoContrast',\n 'mod',\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<ActionIconFactory>({\n name: ['ActionIcon', 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 vars: props.value.vars,\n varsResolver,\n})\n\nconst modList = computed(() => [\n { disabled: props.value.disabled \|\| props.value.dataDisabled },\n { loading: props.value.loading },\n])\n\nconst rootAttrs = computed(() =>\n getStyles('root', {\n active: !props.value.disabled && !props.value.loading && !props.value.dataDisabled,\n })\n)\n\nconst mergedRootAttrs = 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 const userMod = props.value.mod\n const mergedMod = [\n ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n ...(modList.value \|\| []),\n ]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n inner: computed(() => _inner.value?.root ?? null),\n})\n</script>\n"],"mappings":"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"}

package/cjs/components/alert/alert.cjs CHANGED Viewed

@@ -355,15 +355,17 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			"role",
 			"attributes"
 		];
+		const styleProps = (0, vue.computed)(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = require_use_styles.useStyles({
 			name: "Alert",
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: require_alert_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,
@@ -402,6 +404,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			rawProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			rootId,
 			titleId,

package/cjs/components/alert/alert.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"alert.cjs","names":[],"sources":["../../../src/components/alert/alert.vue"],"sourcesContent":["<template>\n <c-box\n ref=\"_root\"\n v-bind=\"mergedRootAttrs\"\n :aria-describedby=\"$slots.default ? bodyId : undefined\"\n :aria-labelledby=\"$slots.title ? titleId : undefined\"\n :id=\"rootId\"\n :role=\"props.role \|\| 'alert'\"\n :variant=\"props.variant\"\n >\n <c-box v-bind=\"wrapperAttrs\">\n <c-box v-bind=\"iconAttrs\" v-if=\"$slots.icon\">\n <slot name=\"icon\" />\n </c-box>\n\n <c-box v-bind=\"bodyAttrs\">\n <c-box\n v-bind=\"titleAttrs\"\n v-if=\"$slots.title\"\n :data-with-close-button=\"props.withCloseButton \|\| undefined\"\n >\n <c-box tag=\"span\" :id=\"titleId\" v-bind=\"labelAttrs\">\n <slot name=\"title\" />\n </c-box>\n </c-box>\n\n <c-box\n v-bind=\"messageAttrs\"\n v-if=\"$slots.default\"\n :data-variant=\"props.variant\"\n :id=\"bodyId\"\n >\n <slot />\n </c-box>\n </c-box>\n\n <c-close-button\n v-bind=\"closeButtonAttrs\"\n v-if=\"props.withCloseButton\"\n :aria-label=\"closeButtonLabel\"\n :icon-size=\"16\"\n :size=\"16\"\n :unstyled=\"props.unstyled\"\n variant=\"transparent\"\n @click=\"props.onClose\"\n ></c-close-button>\n </c-box>\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { useId } from '@cck-ui/hooks'\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport classes from './alert.module.css'\nimport { AlertFactory, type AlertProps } from './alert.types'\nimport { varsResolver } from './alert.utils'\nimport CCloseButton from '../close-button'\n\ndefineOptions({\n name: 'CAlert',\n})\n\nconst slots = defineSlots<{\n default: any\n icon: any\n title: any\n}>()\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<AlertProps>()\n\nconst props = useComponentProps({\n component: 'CAlert',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'style',\n 'className',\n 'styles',\n 'classNames',\n 'unstyled',\n 'vars',\n 'radius',\n 'color',\n 'id',\n 'withCloseButton',\n 'onClose',\n 'closeButtonLabel',\n 'variant',\n 'autoContrast',\n 'role',\n 'attributes',\n]\n\nconst getStyles = useStyles<AlertFactory>({\n name: 'Alert',\n props: ~~{ ...props.value, ...attrs } as AlertProps~~,\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 vars: props.value.vars,\n varsResolver,\n})\n\nconst rootId = useId(props.value.id).value\nconst titleId = (slots.title && `${rootId}-title`) \|\| undefined\nconst bodyId = `${rootId}-body`\n\nconst rootAttrs = computed(() => getStyles('root'))\nconst wrapperAttrs = computed(() => getStyles('wrapper'))\nconst iconAttrs = computed(() => getStyles('icon'))\nconst bodyAttrs = computed(() => getStyles('body'))\nconst titleAttrs = computed(() => getStyles('title'))\nconst labelAttrs = computed(() => getStyles('label'))\nconst messageAttrs = computed(() => getStyles('message'))\nconst closeButtonAttrs = computed(() => getStyles('close-button'))\n\nconst mergedRootAttrs = 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 const userMod = props.value.mod\n const mergedMod = [...(Array.isArray(userMod) ? userMod : [userMod])]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+DA,MAAM,SAAA,GAAA,IAAA,SAAA,CAAQ;EAMd,MAAM,SAAA,GAAA,IAAA,IAAA,CAA8C,IAAI;EAExD,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX,cAAc,CAAC;GACf,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,~~YAAY~~,~~mBAAA~~,~~UAAwB~~;~~GACxC~~,MAAM;~~GACN~~,~~OAAO~~;~~IAAE~~,~~GAAG~~,MAAM;~~IAAO~~,~~GAAG~~;~~GAAM~~;~~GAClC~~,SAAA,qBAAA;GACA,~~WAAW~~,MAAM,MAAM;~~GACvB~~,~~OAAO~~,MAAM,MAAM;~~GACnB~~,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB,cAAA,oBAAA;EACF,CAAC;EAED,MAAM,UAAA,GAAA,cAAA,MAAA,CAAe,MAAM,MAAM,EAAE,CAAC,CAAC;EACrC,MAAM,UAAW,MAAM,SAAS,GAAG,OAAO,WAAY,KAAA;EACtD,MAAM,SAAS,GAAG,OAAO;EAEzB,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,MAAM,CAAC;EAClD,MAAM,gBAAA,GAAA,IAAA,SAAA,OAA8B,UAAU,SAAS,CAAC;EACxD,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,MAAM,CAAC;EAClD,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,MAAM,CAAC;EAClD,MAAM,cAAA,GAAA,IAAA,SAAA,OAA4B,UAAU,OAAO,CAAC;EACpD,MAAM,cAAA,GAAA,IAAA,SAAA,OAA4B,UAAU,OAAO,CAAC;EACpD,MAAM,gBAAA,GAAA,IAAA,SAAA,OAA8B,UAAU,SAAS,CAAC;EACxD,MAAM,oBAAA,GAAA,IAAA,SAAA,OAAkC,UAAU,cAAc,CAAC;EAEjE,MAAM,mBAAA,GAAA,IAAA,SAAA,OAAiC;GACrC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,KAAK,MAAM,OAAO,YAChB,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAG7B,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAAC,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAE;GACpE,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,UAAU;GAAM;EACzD,CAAC;EAED,SAAa,EACX,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mDA/FS~~,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EA7CN,KAAI,QAAO,GACH,OAAA,iBAAe;EACtB,oBAAkB,KAAA,OAAO,UAAU,OAAA,SAAS,KAAA;EAC5C,mBAAiB,KAAA,OAAO,QAAQ,OAAA,UAAU,KAAA;EAC1C,IAAI,OAAA;EACJ,MAAM,OAAA,MAAM,QAAI;EAChB,SAAS,OAAA,MAAM;;kCAsCR,EAAA,GAAA,IAAA,YAAA,CAAA,OAAA,UAAA,GAAA,IAAA,eAAA,EAAA,GAAA,IAAA,mBAAA,CApCO,OAAA,YAAY,CAAA,GAAA;mCAGjB;IAFwB,KAAA,OAAO,SAAA,GAAA,IAAA,UAAA,CAAA,IAAA,GAAA,IAAA,YAAA,CAE/B,OAAA,UAAA,GAAA,IAAA,eAAA,EAAA,GAAA,IAAA,WAAA,CAAA,EAAA,KAAA,EAAA,GAFO,OAAA,SAAS,CAAA,GAAA;qCACF,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,MAAA,CAAA,CAAA;;;yBAsBd,OAAA,UAAA,GAAA,IAAA,eAAA,EAAA,GAAA,IAAA,mBAAA,CAnBO,OAAA,SAAS,CAAA,GAAA;qCASd,CANA,KAAA,OAAO,UAAA,GAAA,IAAA,UAAA,CAAA,IAAA,GAAA,IAAA,YAAA,CAMP,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAAA,KAAA,EAAA,GAPE,OAAA,YAAU,EAEjB,0BAAwB,OAAA,MAAM,mBAAmB,KAAA,EAAA,CAAA,GAAA;sCAI1C,EAAA,GAAA,IAAA,YAAA,CAAA,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA;OAFD,KAAI;OAAQ,IAAI,OAAA;SAAiB,OAAA,UAAU,GAAA;uCAC3B,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,OAAA,CAAA,CAAA;;;;sFAMjB,KAAA,OAAO,YAAA,GAAA,IAAA,UAAA,CAAA,IAAA,GAAA,IAAA,YAAA,CAKP,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAAA,KAAA,EAAA,GANE,OAAA,cAAY;MAEnB,gBAAc,OAAA,MAAM;MACpB,IAAI,OAAA;;sCAEG,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA;;;;;IAMJ,OAAA,MAAM,oBAAA,GAAA,IAAA,UAAA,CAAA,IAAA,GAAA,IAAA,YAAA,CAOI,OAAA,kBAAA,GAAA,IAAA,WAAA,CAAA,EAAA,KAAA,EAAA,GARR,OAAA,kBAAgB;KAEvB,cAAY,OAAA;KACZ,aAAW;KACX,MAAM;KACN,UAAU,OAAA,MAAM;KACjB,SAAQ;KACP,SAAO,OAAA,MAAM"}
1	+ {"version":3,"file":"alert.cjs","names":[],"sources":["../../../src/components/alert/alert.vue"],"sourcesContent":["<template>\n <c-box\n ref=\"_root\"\n v-bind=\"mergedRootAttrs\"\n :aria-describedby=\"$slots.default ? bodyId : undefined\"\n :aria-labelledby=\"$slots.title ? titleId : undefined\"\n :id=\"rootId\"\n :role=\"props.role \|\| 'alert'\"\n :variant=\"props.variant\"\n >\n <c-box v-bind=\"wrapperAttrs\">\n <c-box v-bind=\"iconAttrs\" v-if=\"$slots.icon\">\n <slot name=\"icon\" />\n </c-box>\n\n <c-box v-bind=\"bodyAttrs\">\n <c-box\n v-bind=\"titleAttrs\"\n v-if=\"$slots.title\"\n :data-with-close-button=\"props.withCloseButton \|\| undefined\"\n >\n <c-box tag=\"span\" :id=\"titleId\" v-bind=\"labelAttrs\">\n <slot name=\"title\" />\n </c-box>\n </c-box>\n\n <c-box\n v-bind=\"messageAttrs\"\n v-if=\"$slots.default\"\n :data-variant=\"props.variant\"\n :id=\"bodyId\"\n >\n <slot />\n </c-box>\n </c-box>\n\n <c-close-button\n v-bind=\"closeButtonAttrs\"\n v-if=\"props.withCloseButton\"\n :aria-label=\"closeButtonLabel\"\n :icon-size=\"16\"\n :size=\"16\"\n :unstyled=\"props.unstyled\"\n variant=\"transparent\"\n @click=\"props.onClose\"\n ></c-close-button>\n </c-box>\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { useId } from '@cck-ui/hooks'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../core'\nimport classes from './alert.module.css'\nimport { AlertFactory, type AlertProps } from './alert.types'\nimport { varsResolver } from './alert.utils'\nimport CCloseButton from '../close-button'\n\ndefineOptions({\n name: 'CAlert',\n})\n\nconst slots = defineSlots<{\n default: any\n icon: any\n title: any\n}>()\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<AlertProps>()\n\nconst props = useComponentProps({\n component: 'CAlert',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'style',\n 'className',\n 'styles',\n 'classNames',\n 'unstyled',\n 'vars',\n 'radius',\n 'color',\n 'id',\n 'withCloseButton',\n 'onClose',\n 'closeButtonLabel',\n 'variant',\n 'autoContrast',\n 'role',\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<AlertFactory>({\n name: 'Alert',\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 vars: props.value.vars,\n varsResolver,\n})\n\nconst rootId = useId(props.value.id).value\nconst titleId = (slots.title && `${rootId}-title`) \|\| undefined\nconst bodyId = `${rootId}-body`\n\nconst rootAttrs = computed(() => getStyles('root'))\nconst wrapperAttrs = computed(() => getStyles('wrapper'))\nconst iconAttrs = computed(() => getStyles('icon'))\nconst bodyAttrs = computed(() => getStyles('body'))\nconst titleAttrs = computed(() => getStyles('title'))\nconst labelAttrs = computed(() => getStyles('label'))\nconst messageAttrs = computed(() => getStyles('message'))\nconst closeButtonAttrs = computed(() => getStyles('close-button'))\n\nconst mergedRootAttrs = 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 const userMod = props.value.mod\n const mergedMod = [...(Array.isArray(userMod) ? userMod : [userMod])]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":"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"}

package/cjs/components/aspect-ratio/aspect-ratio.cjs CHANGED Viewed

@@ -324,16 +324,18 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			"ratio",
 			"attributes"
 		];
+		const styleProps = (0, vue.computed)(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = require_use_styles.useStyles({
 			name: "AspectRatio",
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: require_aspect_ratio_module.default,
-			className: props.value.className,
+			className: () => props.value.className,
 			classNames: props.value.classNames,
-			style: props.value.style,
+			style: () => props.value.style,
 			styles: props.value.styles,
 			unstyled: props.value.unstyled,
 			attributes: props.value.attributes,
@@ -362,6 +364,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			rawProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			rootAttrs,
 			mergedAttrs,

package/cjs/components/aspect-ratio/aspect-ratio.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"aspect-ratio.cjs","names":[],"sources":["../../../src/components/aspect-ratio/aspect-ratio.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" v-bind=\"mergedAttrs\">\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { AspectRatioFactory, AspectRatioProps } from './aspect-ratio.types'\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport classes from './aspect-ratio.module.css'\nimport { varsResolver } from './aspect-ratio.utils'\n\ndefineOptions({\n name: 'CAspectRatio',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<AspectRatioProps>()\n\nconst props = useComponentProps({\n component: 'CAspectRatio',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'ratio',\n 'attributes',\n]\n\nconst getStyles = useStyles<AspectRatioFactory>({\n name: 'AspectRatio',\n props: ~~{ ...props.value, ...attrs } as AspectRatioProps~~,\n classes,\n className: props.value.className,\n classNames: props.value.classNames,\n style: props.value.style,\n styles: props.value.styles,\n unstyled: props.value.unstyled,\n attributes: props.value.attributes,\n vars: props.value.vars,\n varsResolver,\n})\n\nconst rootAttrs = computed(() => getStyles('root'))\n\nconst mergedAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n Object.keys(propsValue).forEach((key) => {\n if (!knownProps.includes(key)) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n })\n const userMod = props.value.mod\n const mergedMod = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,SAAA,GAAA,IAAA,IAAA,CAA8C,IAAI;EAExD,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX,cAAc,CAAC;GACf,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,~~YAAY~~,~~mBAAA~~,~~UAA8B~~;~~GAC9C~~,MAAM;~~GACN~~,~~OAAO~~;~~IAAE~~,~~GAAG~~,MAAM;~~IAAO~~,~~GAAG~~;~~GAAM~~;~~GAClC~~,SAAA,4BAAA;GACA,~~WAAW~~,MAAM,MAAM;~~GACvB~~,YAAY,MAAM,MAAM;GACxB,~~OAAO~~,MAAM,MAAM;~~GACnB~~,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB,cAAA,2BAAA;EACF,CAAC;EAED,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,MAAM,CAAC;EAElD,MAAM,eAAA,GAAA,IAAA,SAAA,OAA6B;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,OAAO,KAAK,UAAU,CAAC,CAAC,SAAS,QAAQ;IACvC,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAE7B,CAAC;GACD,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAAC,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,CAAE;GACpF,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,UAAU;GAAM;EACzD,CAAC;EAED,SAAa,EACX,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC~~;;;;;;;;;;;;;;;;;;;;;;mDApES~~,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAFD,KAAI,QAAO,GAAS,OAAA,WAAW,GAAA;kCAC5B,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"aspect-ratio.cjs","names":[],"sources":["../../../src/components/aspect-ratio/aspect-ratio.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" v-bind=\"mergedAttrs\">\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { AspectRatioFactory, AspectRatioProps } from './aspect-ratio.types'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../core'\nimport classes from './aspect-ratio.module.css'\nimport { varsResolver } from './aspect-ratio.utils'\n\ndefineOptions({\n name: 'CAspectRatio',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<AspectRatioProps>()\n\nconst props = useComponentProps({\n component: 'CAspectRatio',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'ratio',\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<AspectRatioFactory>({\n name: 'AspectRatio',\n props: styleProps,\n classes,\n className: () => props.value.className,\n classNames: props.value.classNames,\n style: () => props.value.style,\n styles: props.value.styles,\n unstyled: props.value.unstyled,\n attributes: props.value.attributes,\n vars: props.value.vars,\n varsResolver,\n})\n\nconst rootAttrs = computed(() => getStyles('root'))\n\nconst mergedAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n Object.keys(propsValue).forEach((key) => {\n if (!knownProps.includes(key)) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n })\n const userMod = props.value.mod\n const mergedMod = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,SAAA,GAAA,IAAA,IAAA,CAA8C,IAAI;EAExD,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX,cAAc,CAAC;GACf,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,cAAA,GAAA,IAAA,SAAA,QAA6B;GACjC,GAAG,MAAM;GACT,GAAG;GACH,OAAQ,MAAM,SAAS,MAAM,MAAM;EACrC,EAAE;EAEF,MAAM,YAAY,mBAAA,UAA8B;GAC9C,MAAM;GACN,OAAO;GACP,SAAA,4BAAA;GACA,iBAAiB,MAAM,MAAM;GAC7B,YAAY,MAAM,MAAM;GACxB,aAAa,MAAM,MAAM;GACzB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB,cAAA,2BAAA;EACF,CAAC;EAED,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,MAAM,CAAC;EAElD,MAAM,eAAA,GAAA,IAAA,SAAA,OAA6B;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,OAAO,KAAK,UAAU,CAAC,CAAC,SAAS,QAAQ;IACvC,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAE7B,CAAC;GACD,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAAC,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,CAAE;GACpF,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,UAAU;GAAM;EACzD,CAAC;EAED,SAAa,EACX,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC;;;;;;;;;;;;;;;;;;;;;;;mDA1ES,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAFD,KAAI,QAAO,GAAS,OAAA,WAAW,GAAA;kCAC5B,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/cjs/components/button/button-group/button-group.cjs CHANGED Viewed

@@ -332,15 +332,17 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			"mod",
 			"attributes"
 		];
+		const styleProps = (0, vue.computed)(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = require_use_styles.useStyles({
 			name: "ButtonGroup",
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: require_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,
@@ -374,6 +376,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			rawProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			modList,
 			groupAttrs,

package/cjs/components/button/button-group/button-group.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button-group.cjs","names":[],"sources":["../../../../src/components/button/button-group/button-group.vue"],"sourcesContent":["<template>\n <c-box ref=\"_group\" role=\"group\" v-bind=\"mergedAttrs\">\n <template v-for=\"(child, index) in validChildren\" :key=\"child.key ?? index\">\n <component :is=\"child\" />\n </template>\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs, useSlots } from 'vue'\nimport { CBox, useComponentProps, useStyles } from '../../../core'\nimport classes from '../button.module.css'\nimport { ButtonGroupFactory, type ButtonGroupProps } from './button-group.types'\nimport { useButtonGroup } from './use-button-group'\nimport { varsResolver } from './button-group.utils'\n\ndefineOptions({\n name: 'CButtonGroup',\n})\n\nconst _group = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\nconst slots = useSlots()\n\nconst rawProps = defineProps<ButtonGroupProps>()\n\nconst props = useComponentProps({\n component: 'CButtonGroup',\n defaultProps: {\n orientation: 'horizontal',\n },\n props: rawProps,\n})\n\nconst knownProps = [\n 'className',\n 'style',\n 'classNames',\n 'styles',\n 'unstyled',\n 'orientation',\n 'vars',\n 'borderWidth',\n 'mod',\n 'attributes',\n]\n\nconst getStyles = useStyles<ButtonGroupFactory>({\n name: 'ButtonGroup',\n props: ~~{ ...props.value, ...attrs } as ButtonGroupProps~~,\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 vars: props.value.vars,\n varsResolver,\n rootSelector: 'group',\n})\n\nconst modList = computed(() => [\n {\n orientation: props.value.orientation,\n },\n])\n\nconst groupAttrs = computed(() => getStyles('group'))\nconst mergedAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n Object.keys(propsValue).forEach((key) => {\n if (!knownProps.includes(key)) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n })\n const userMod = props.value.mod\n const mergedMod = [\n ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n ...(modList.value \|\| []),\n ]\n return { ...others, mod: mergedMod, ...groupAttrs.value }\n})\n\nconst { validChildren } = useButtonGroup(slots)\n\ndefineExpose({\n group: computed(() => _group.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBA,MAAM,UAAA,GAAA,IAAA,IAAA,CAA+C,IAAI;EAEzD,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EACvB,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX,cAAc,EACZ,aAAa,aACf;GACA,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,~~YAAY~~,~~mBAAA~~,~~UAA8B~~;~~GAC9C~~,MAAM;~~GACN~~,~~OAAO~~;~~IAAE~~,~~GAAG~~,MAAM;~~IAAO~~,~~GAAG~~;~~GAAM~~;~~GAClC~~,SAAA,sBAAA;GACA,~~WAAW~~,MAAM,MAAM;~~GACvB~~,~~OAAO~~,MAAM,MAAM;~~GACnB~~,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB,cAAA,2BAAA;GACA,cAAc;EAChB,CAAC;EAED,MAAM,WAAA,GAAA,IAAA,SAAA,OAAyB,CAC7B,EACE,aAAa,MAAM,MAAM,YAC3B,CACF,CAAC;EAED,MAAM,cAAA,GAAA,IAAA,SAAA,OAA4B,UAAU,OAAO,CAAC;EACpD,MAAM,eAAA,GAAA,IAAA,SAAA,OAA6B;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,OAAO,KAAK,UAAU,CAAC,CAAC,SAAS,QAAQ;IACvC,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAE7B,CAAC;GACD,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAChB,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,GAC/D,GAAI,QAAQ,SAAS,CAAC,CACxB;GACA,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,WAAW;GAAM;EAC1D,CAAC;EAED,MAAM,EAAE,kBAAkB,yBAAA,eAAe,KAAK;EAE9C,SAAa,EACX,QAAA,GAAA,IAAA,SAAA,OAAsB,OAAO,OAAO,QAAQ,IAAI,EAClD,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;mDArFS~~,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA;EAJD,KAAI;EAAS,MAAK;IAAgB,OAAA,WAAW,GAAA;kCACD,GAAA,GAAA,IAAA,UAAA,CAAA,IAAA,IAAA,GAAA,IAAA,mBAAA,CAEtC,IAAA,UAAA,OAAA,GAAA,IAAA,WAAA,CAFwB,OAAA,gBAAjB,OAAO,UAAK;sFACZ,KAAK,GAAA,EAAA,KADiC,MAAM,OAAO,MAAA,CAAA"}
1	+ {"version":3,"file":"button-group.cjs","names":[],"sources":["../../../../src/components/button/button-group/button-group.vue"],"sourcesContent":["<template>\n <c-box ref=\"_group\" role=\"group\" v-bind=\"mergedAttrs\">\n <template v-for=\"(child, index) in validChildren\" :key=\"child.key ?? index\">\n <component :is=\"child\" />\n </template>\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs, useSlots } from 'vue'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../../core'\nimport classes from '../button.module.css'\nimport { ButtonGroupFactory, type ButtonGroupProps } from './button-group.types'\nimport { useButtonGroup } from './use-button-group'\nimport { varsResolver } from './button-group.utils'\n\ndefineOptions({\n name: 'CButtonGroup',\n})\n\nconst _group = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\nconst slots = useSlots()\n\nconst rawProps = defineProps<ButtonGroupProps>()\n\nconst props = useComponentProps({\n component: 'CButtonGroup',\n defaultProps: {\n orientation: 'horizontal',\n },\n props: rawProps,\n})\n\nconst knownProps = [\n 'className',\n 'style',\n 'classNames',\n 'styles',\n 'unstyled',\n 'orientation',\n 'vars',\n 'borderWidth',\n 'mod',\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<ButtonGroupFactory>({\n name: 'ButtonGroup',\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 vars: props.value.vars,\n varsResolver,\n rootSelector: 'group',\n})\n\nconst modList = computed(() => [\n {\n orientation: props.value.orientation,\n },\n])\n\nconst groupAttrs = computed(() => getStyles('group'))\nconst mergedAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n Object.keys(propsValue).forEach((key) => {\n if (!knownProps.includes(key)) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n })\n const userMod = props.value.mod\n const mergedMod = [\n ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n ...(modList.value \|\| []),\n ]\n return { ...others, mod: mergedMod, ...groupAttrs.value }\n})\n\nconst { validChildren } = useButtonGroup(slots)\n\ndefineExpose({\n group: computed(() => _group.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBA,MAAM,UAAA,GAAA,IAAA,IAAA,CAA+C,IAAI;EAEzD,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EACvB,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX,cAAc,EACZ,aAAa,aACf;GACA,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,cAAA,GAAA,IAAA,SAAA,QAA6B;GACjC,GAAG,MAAM;GACT,GAAG;GACH,OAAQ,MAAM,SAAS,MAAM,MAAM;EACrC,EAAE;EAEF,MAAM,YAAY,mBAAA,UAA8B;GAC9C,MAAM;GACN,OAAO;GACP,SAAA,sBAAA;GACA,iBAAiB,MAAM,MAAM;GAC7B,aAAa,MAAM,MAAM;GACzB,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB,cAAA,2BAAA;GACA,cAAc;EAChB,CAAC;EAED,MAAM,WAAA,GAAA,IAAA,SAAA,OAAyB,CAC7B,EACE,aAAa,MAAM,MAAM,YAC3B,CACF,CAAC;EAED,MAAM,cAAA,GAAA,IAAA,SAAA,OAA4B,UAAU,OAAO,CAAC;EACpD,MAAM,eAAA,GAAA,IAAA,SAAA,OAA6B;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,OAAO,KAAK,UAAU,CAAC,CAAC,SAAS,QAAQ;IACvC,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAE7B,CAAC;GACD,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAChB,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,GAC/D,GAAI,QAAQ,SAAS,CAAC,CACxB;GACA,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,WAAW;GAAM;EAC1D,CAAC;EAED,MAAM,EAAE,kBAAkB,yBAAA,eAAe,KAAK;EAE9C,SAAa,EACX,QAAA,GAAA,IAAA,SAAA,OAAsB,OAAO,OAAO,QAAQ,IAAI,EAClD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;mDA3FS,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA;EAJD,KAAI;EAAS,MAAK;IAAgB,OAAA,WAAW,GAAA;kCACD,GAAA,GAAA,IAAA,UAAA,CAAA,IAAA,IAAA,GAAA,IAAA,mBAAA,CAEtC,IAAA,UAAA,OAAA,GAAA,IAAA,WAAA,CAFwB,OAAA,gBAAjB,OAAO,UAAK;sFACZ,KAAK,GAAA,EAAA,KADiC,MAAM,OAAO,MAAA,CAAA"}

package/cjs/components/button/button-group-section/button-group-section.cjs CHANGED Viewed

@@ -338,15 +338,17 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			"autoContrast",
 			"attributes"
 		];
+		const styleProps = (0, vue.computed)(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = require_use_styles.useStyles({
 			name: "ButtonGroupSection",
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: require_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,
@@ -377,6 +379,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			rawProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			sectionAttrs,
 			mergedAttrs,

package/cjs/components/button/button-group-section/button-group-section.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button-group-section.cjs","names":[],"sources":["../../../../src/components/button/button-group-section/button-group-section.vue"],"sourcesContent":["<template>\n <c-box ref=\"_section\" v-bind=\"mergedAttrs\">\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 {\n ButtonGroupSectionFactory,\n ButtonGroupSectionProps,\n} from './button-group-section.types'\nimport classes from '../button.module.css'\nimport { varsResolver } from './button-group-section.utils'\n\ndefineOptions({\n name: 'CButtonGroupSection',\n})\n\nconst _section = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<ButtonGroupSectionProps>()\n\nconst props = useComponentProps({\n component: 'CButtonGroupSection',\n defaultProps: {\n variant: 'default',\n },\n props: rawProps,\n})\n\nconst knownProps = [\n 'className',\n 'style',\n 'classNames',\n 'styles',\n 'unstyled',\n 'vars',\n 'gradient',\n 'radius',\n 'autoContrast',\n 'attributes',\n]\n\nconst getStyles = useStyles<ButtonGroupSectionFactory>({\n name: 'ButtonGroupSection',\n props: ~~{ ...props.value, ...attrs } as ButtonGroupSectionProps~~,\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 vars: props.value.vars,\n varsResolver,\n rootSelector: 'groupSection',\n})\n\nconst sectionAttrs = computed(() => getStyles('groupSection'))\nconst mergedAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n Object.keys(propsValue).forEach((key) => {\n if (!knownProps.includes(key)) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n })\n const userMod = props.value.mod\n const mergedMod = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n return { ...others, mod: mergedMod, ...sectionAttrs.value }\n})\n\ndefineExpose({\n section: computed(() => _section.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBA,MAAM,YAAA,GAAA,IAAA,IAAA,CAAiD,IAAI;EAE3D,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX,cAAc,EACZ,SAAS,UACX;GACA,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,~~YAAY~~,~~mBAAA~~,~~UAAqC~~;~~GACrD~~,MAAM;~~GACN~~,~~OAAO~~;~~IAAE~~,~~GAAG~~,MAAM;~~IAAO~~,~~GAAG~~;~~GAAM~~;~~GAClC~~,SAAA,sBAAA;GACA,~~WAAW~~,MAAM,MAAM;~~GACvB~~,~~OAAO~~,MAAM,MAAM;~~GACnB~~,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB,cAAA,mCAAA;GACA,cAAc;EAChB,CAAC;EAED,MAAM,gBAAA,GAAA,IAAA,SAAA,OAA8B,UAAU,cAAc,CAAC;EAC7D,MAAM,eAAA,GAAA,IAAA,SAAA,OAA6B;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,OAAO,KAAK,UAAU,CAAC,CAAC,SAAS,QAAQ;IACvC,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAE7B,CAAC;GACD,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAAC,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,CAAE;GACpF,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,aAAa;GAAM;EAC5D,CAAC;EAED,SAAa,EACX,UAAA,GAAA,IAAA,SAAA,OAAwB,SAAS,OAAO,QAAQ,IAAI,EACtD,CAAC~~;;;;;;;;;;;;;;;;;;;;;;mDA3ES~~,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAFD,KAAI,WAAU,GAAS,OAAA,WAAW,GAAA;kCAC/B,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"button-group-section.cjs","names":[],"sources":["../../../../src/components/button/button-group-section/button-group-section.vue"],"sourcesContent":["<template>\n <c-box ref=\"_section\" v-bind=\"mergedAttrs\">\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 {\n ButtonGroupSectionFactory,\n ButtonGroupSectionProps,\n} from './button-group-section.types'\nimport classes from '../button.module.css'\nimport { varsResolver } from './button-group-section.utils'\n\ndefineOptions({\n name: 'CButtonGroupSection',\n})\n\nconst _section = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<ButtonGroupSectionProps>()\n\nconst props = useComponentProps({\n component: 'CButtonGroupSection',\n defaultProps: {\n variant: 'default',\n },\n props: rawProps,\n})\n\nconst knownProps = [\n 'className',\n 'style',\n 'classNames',\n 'styles',\n 'unstyled',\n 'vars',\n 'gradient',\n 'radius',\n 'autoContrast',\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<ButtonGroupSectionFactory>({\n name: 'ButtonGroupSection',\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 vars: props.value.vars,\n varsResolver,\n rootSelector: 'groupSection',\n})\n\nconst sectionAttrs = computed(() => getStyles('groupSection'))\nconst mergedAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n Object.keys(propsValue).forEach((key) => {\n if (!knownProps.includes(key)) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n })\n const userMod = props.value.mod\n const mergedMod = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n return { ...others, mod: mergedMod, ...sectionAttrs.value }\n})\n\ndefineExpose({\n section: computed(() => _section.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBA,MAAM,YAAA,GAAA,IAAA,IAAA,CAAiD,IAAI;EAE3D,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX,cAAc,EACZ,SAAS,UACX;GACA,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,cAAA,GAAA,IAAA,SAAA,QAA6B;GACjC,GAAG,MAAM;GACT,GAAG;GACH,OAAQ,MAAM,SAAS,MAAM,MAAM;EACrC,EAAE;EAEF,MAAM,YAAY,mBAAA,UAAqC;GACrD,MAAM;GACN,OAAO;GACP,SAAA,sBAAA;GACA,iBAAiB,MAAM,MAAM;GAC7B,aAAa,MAAM,MAAM;GACzB,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB,cAAA,mCAAA;GACA,cAAc;EAChB,CAAC;EAED,MAAM,gBAAA,GAAA,IAAA,SAAA,OAA8B,UAAU,cAAc,CAAC;EAC7D,MAAM,eAAA,GAAA,IAAA,SAAA,OAA6B;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,OAAO,KAAK,UAAU,CAAC,CAAC,SAAS,QAAQ;IACvC,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAE7B,CAAC;GACD,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAAC,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,CAAE;GACpF,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,aAAa;GAAM;EAC5D,CAAC;EAED,SAAa,EACX,UAAA,GAAA,IAAA,SAAA,OAAwB,SAAS,OAAO,QAAQ,IAAI,EACtD,CAAC;;;;;;;;;;;;;;;;;;;;;;;mDAjFS,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAFD,KAAI,WAAU,GAAS,OAAA,WAAW,GAAA;kCAC/B,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/cjs/components/button/button.cjs CHANGED Viewed

@@ -404,15 +404,17 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			"mod",
 			"attributes"
 		];
+		const styleProps = (0, vue.computed)(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = require_use_styles.useStyles({
 			name: "Button",
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: require_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,
@@ -462,6 +464,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			rawProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			modList,
 			rootAttrs,

package/cjs/components/button/button.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.cjs","names":[],"sources":["../../../src/components/button/button.vue"],"sourcesContent":["<template>\n <unstyled-button\n ref=\"_root\"\n v-bind=\"mergedRootAttrs\"\n :disabled=\"disabled \|\| loading\"\n :unstyled=\"unstyled\"\n >\n <c-transition\n v-if=\"typeof props.loading === 'boolean'\"\n :mounted=\"props.loading\"\n :transition=\"loaderTransition\"\n :duration=\"150\"\n >\n <template #default=\"{ styles }\">\n <c-box\n ref=\"_inner\"\n tag=\"span\"\n v-bind=\"getStyles('loader', { style: styles })\"\n aria-hidden=\"true\"\n >\n <c-loader\n color=\"var(--button-color)\"\n size=\"calc(var(--button-height) / 1.8)\"\n v-bind=\"props.loaderProps\"\n ></c-loader>\n </c-box>\n </template>\n </c-transition>\n\n <c-box tag=\"span\" v-bind=\"innerAttrs\">\n <c-box\n v-if=\"$slots['left-section']\"\n v-bind=\"sectionAttrs\"\n tag=\"span\"\n :mod=\"{ position: 'left' }\"\n >\n <slot name=\"left-section\"></slot>\n </c-box>\n <c-box v-else-if=\"leftSection\" v-bind=\"sectionAttrs\" tag=\"span\" :mod=\"{ position: 'left' }\">\n <!-- TODO -->\n <component :is=\"leftSection\" />\n </c-box>\n <c-box ref=\"_label\" v-bind=\"labelAttrs\" tag=\"span\" :mod=\"{ loading }\">\n <slot />\n </c-box>\n <c-box\n v-if=\"$slots['right-section']\"\n v-bind=\"sectionAttrs\"\n tag=\"span\"\n :mod=\"{ position: 'right' }\"\n >\n <slot name=\"right-section\"></slot>\n </c-box>\n <c-box v-else-if=\"rightSection\" v-bind=\"sectionAttrs\" tag=\"span\" :mod=\"{ position: 'right' }\">\n <!-- TODO -->\n <component :is=\"rightSection\" />\n </c-box>\n </c-box>\n </unstyled-button>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs, useSlots } from 'vue'\nimport { CBox, rem, useComponentProps, useStyles } from '../../core'\nimport { UnstyledButton } from '../unstyled-button'\nimport { ButtonFactory, type ButtonProps } from './button.types'\nimport { varsResolver } from './button.utils'\nimport classes from './button.module.css'\nimport { CLoader } from '../loader'\nimport { CTransition, CckTransition } from '../transition'\n\ndefineOptions({\n name: 'CButton',\n})\n\ndefineSlots<{\n 'left-section': any\n 'right-section': any\n default: any\n}>()\n\nconst _root = ref<InstanceType<typeof UnstyledButton> \| null>(null)\nconst _inner = ref<HTMLSpanElement \| null>(null)\nconst _label = ref<HTMLSpanElement \| null>(null)\n\nconst attrs = useAttrs()\nconst slots = useSlots()\n\nconst hasLeftSlot = computed(() => !!slots['left-section'])\nconst hasRightSlot = computed(() => !!slots['right-section'])\n\nconst loaderTransition: CckTransition = {\n in: { opacity: 1, transform: `translate(-50%, calc(-50% + ${rem(1)}))` },\n out: { opacity: 0, transform: 'translate(-50%, -200%)' },\n common: { transformOrigin: 'center' },\n transitionProperty: 'transform, opacity',\n}\n\nconst rawProps = defineProps<ButtonProps>()\n\nconst props = useComponentProps({\n component: 'CButton',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'style',\n 'vars',\n 'className',\n 'color',\n 'disabled',\n 'leftSection',\n 'rightSection',\n 'fullWidth',\n 'radius',\n 'loading',\n 'loaderProps',\n 'gradient',\n 'classNames',\n 'styles',\n 'unstyled',\n 'dataDisabled',\n 'autoContrast',\n 'mod',\n 'attributes',\n]\n\nconst getStyles = useStyles<ButtonFactory>({\n name: 'Button',\n props: ~~{ ...props.value, ...attrs } as ButtonProps~~,\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 vars: props.value.vars,\n varsResolver,\n})\n\nconst modList = computed(() => [\n {\n disabled: props.value.disabled \|\| props.value.dataDisabled,\n },\n { loading: props.value.loading },\n { block: props.value.fullWidth },\n { 'with-left-section': hasLeftSlot.value \|\| !!props.value.leftSection },\n { 'with-right-section': hasRightSlot.value \|\| !!props.value.rightSection },\n])\n\nconst rootAttrs = computed(() =>\n getStyles('root', {\n active: !props.value.disabled && !props.value.loading && !props.value.dataDisabled,\n })\n)\nconst mergedRootAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n Object.keys(propsValue).forEach((key) => {\n if (!knownProps.includes(key)) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n })\n const userMod = props.value.mod\n const mergedMod = [\n ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n ...(modList.value \|\| []),\n ]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\nconst innerAttrs = computed(() => getStyles('inner'))\nconst sectionAttrs = computed(() => getStyles('section'))\nconst labelAttrs = computed(() => getStyles('label'))\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n inner: _inner.value,\n label: _label.value,\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiFA,MAAM,SAAA,GAAA,IAAA,IAAA,CAAwD,IAAI;EAClE,MAAM,UAAA,GAAA,IAAA,IAAA,CAAqC,IAAI;EAC/C,MAAM,UAAA,GAAA,IAAA,IAAA,CAAqC,IAAI;EAE/C,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EACvB,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,eAAA,GAAA,IAAA,SAAA,OAA6B,CAAC,CAAC,MAAM,eAAe;EAC1D,MAAM,gBAAA,GAAA,IAAA,SAAA,OAA8B,CAAC,CAAC,MAAM,gBAAgB;EAE5D,MAAM,mBAAkC;GACtC,IAAI;IAAE,SAAS;IAAG,WAAW,+BAA+B,YAAA,IAAI,CAAC,EAAE;GAAI;GACvE,KAAK;IAAE,SAAS;IAAG,WAAW;GAAyB;GACvD,QAAQ,EAAE,iBAAiB,SAAS;GACpC,oBAAoB;EACtB;EAEA,MAAM,WAAW;EAEjB,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX,cAAc,CAAC;GACf,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,~~YAAY~~,~~mBAAA~~,~~UAAyB~~;~~GACzC~~,MAAM;~~GACN~~,~~OAAO~~;~~IAAE~~,~~GAAG~~,MAAM;~~IAAO~~,~~GAAG~~;~~GAAM~~;~~GAClC~~,SAAA,sBAAA;GACA,~~WAAW~~,MAAM,MAAM;~~GACvB~~,~~OAAO~~,MAAM,MAAM;~~GACnB~~,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB,cAAA,qBAAA;EACF,CAAC;EAED,MAAM,WAAA,GAAA,IAAA,SAAA,OAAyB;GAC7B,EACE,UAAU,MAAM,MAAM,YAAY,MAAM,MAAM,aAChD;GACA,EAAE,SAAS,MAAM,MAAM,QAAQ;GAC/B,EAAE,OAAO,MAAM,MAAM,UAAU;GAC/B,EAAE,qBAAqB,YAAY,SAAS,CAAC,CAAC,MAAM,MAAM,YAAY;GACtE,EAAE,sBAAsB,aAAa,SAAS,CAAC,CAAC,MAAM,MAAM,aAAa;EAC3E,CAAC;EAED,MAAM,aAAA,GAAA,IAAA,SAAA,OACJ,UAAU,QAAQ,EAChB,QAAQ,CAAC,MAAM,MAAM,YAAY,CAAC,MAAM,MAAM,WAAW,CAAC,MAAM,MAAM,aACxE,CAAC,CACH;EACA,MAAM,mBAAA,GAAA,IAAA,SAAA,OAAiC;GACrC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,OAAO,KAAK,UAAU,CAAC,CAAC,SAAS,QAAQ;IACvC,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAE7B,CAAC;GACD,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAChB,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,GAC/D,GAAI,QAAQ,SAAS,CAAC,CACxB;GACA,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,UAAU;GAAM;EACzD,CAAC;EAED,MAAM,cAAA,GAAA,IAAA,SAAA,OAA4B,UAAU,OAAO,CAAC;EACpD,MAAM,gBAAA,GAAA,IAAA,SAAA,OAA8B,UAAU,SAAS,CAAC;EACxD,MAAM,cAAA,GAAA,IAAA,SAAA,OAA4B,UAAU,OAAO,CAAC;EAEpD,SAAa;GACX,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI;GAC9C,OAAO,OAAO;GACd,OAAO,OAAO;EAChB,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mDA3HmB~~,OAAA,oBAAA,GAAA,IAAA,WAAA,CAAA,EAxDhB,KAAI,QAAO,GACH,OAAA,iBAAe;EACtB,UAAU,OAAA,YAAY,OAAA;EACtB,UAAU,OAAA;;kCAsBI,CAAA,OAnBA,OAAA,MAAM,YAAO,cAAA,GAAA,IAAA,UAAA,CAAA,IAAA,GAAA,IAAA,YAAA,CAmBb,OAAA,gBAAA;;GAlBZ,SAAS,OAAA,MAAM;GACf,YAAY,OAAA;GACZ,UAAU;;GAEA,UAAA,GAAA,IAAA,QAAA,EAYD,EAZY,aAAM,EAAA,GAAA,IAAA,YAAA,CAYlB,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA;IAVN,KAAI;IACJ,KAAI;MACI,OAAA,UAAS,UAAA,EAAA,OAAoB,OAAM,CAAA,GAAA,EAC3C,eAAY,OAAM,CAAA,GAAA;oCAMN,EAAA,GAAA,IAAA,YAAA,CAAA,OAAA,aAAA,GAAA,IAAA,WAAA,CAAA;KAHV,OAAM;KACN,MAAK;OACG,OAAA,MAAM,WAAW,GAAA,MAAA,EAAA,CAAA,CAAA;;;;wFAkCzB,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EA5BD,KAAI,OAAM,GAAS,OAAA,UAAU,GAAA;mCAQ1B;IANA,KAAA,OAAM,oBAAA,GAAA,IAAA,UAAA,CAAA,IAAA,GAAA,IAAA,YAAA,CAMN,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAAA,KAAA,EAAA,GALE,OAAA,cAAY;KACpB,KAAI;KACH,KAAK,EAAA,UAAA,OAAA;;qCAE2B,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,cAAA,CAAA,CAAA;;cAEjB,OAAA,gBAAA,GAAA,IAAA,UAAA,CAAA,IAAA,GAAA,IAAA,YAAA,CAGV,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAAA,KAAA,EAAA,GAH+B,OAAA,cAAY;KAAE,KAAI;KAAQ,KAAK,EAAA,UAAA,OAAA;;qCACvD,EAAA,GAAA,IAAA,mBAAA,CAAb,QAAA,KAAA,GAAA,IAAA,UAAA,CAAA,IAAA,GAAA,IAAA,YAAA,EAAA,GAAA,IAAA,wBAAA,CACgB,OAAA,WAAW,CAAA,EAAA,CAAA;;;yBAIrB,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAFD,KAAI,SAAQ,GAAS,OAAA,YAAU;KAAE,KAAI;KAAQ,KAAG,EAAA,SAAI,OAAA,QAAO;;qCACxD,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA;;;IAGF,KAAA,OAAM,qBAAA,GAAA,IAAA,UAAA,CAAA,IAAA,GAAA,IAAA,YAAA,CAMN,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAAA,KAAA,EAAA,GALE,OAAA,cAAY;KACpB,KAAI;KACH,KAAK,EAAA,UAAA,QAAA;;qCAE4B,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,eAAA,CAAA,CAAA;;cAElB,OAAA,iBAAA,GAAA,IAAA,UAAA,CAAA,IAAA,GAAA,IAAA,YAAA,CAGV,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAAA,KAAA,EAAA,GAHgC,OAAA,cAAY;KAAE,KAAI;KAAQ,KAAK,EAAA,UAAA,QAAA;;qCACxD,EAAA,GAAA,IAAA,mBAAA,CAAb,QAAA,KAAA,GAAA,IAAA,UAAA,CAAA,IAAA,GAAA,IAAA,YAAA,EAAA,GAAA,IAAA,wBAAA,CACgB,OAAA,YAAY,CAAA,EAAA,CAAA"}
1	+ {"version":3,"file":"button.cjs","names":[],"sources":["../../../src/components/button/button.vue"],"sourcesContent":["<template>\n <unstyled-button\n ref=\"_root\"\n v-bind=\"mergedRootAttrs\"\n :disabled=\"disabled \|\| loading\"\n :unstyled=\"unstyled\"\n >\n <c-transition\n v-if=\"typeof props.loading === 'boolean'\"\n :mounted=\"props.loading\"\n :transition=\"loaderTransition\"\n :duration=\"150\"\n >\n <template #default=\"{ styles }\">\n <c-box\n ref=\"_inner\"\n tag=\"span\"\n v-bind=\"getStyles('loader', { style: styles })\"\n aria-hidden=\"true\"\n >\n <c-loader\n color=\"var(--button-color)\"\n size=\"calc(var(--button-height) / 1.8)\"\n v-bind=\"props.loaderProps\"\n ></c-loader>\n </c-box>\n </template>\n </c-transition>\n\n <c-box tag=\"span\" v-bind=\"innerAttrs\">\n <c-box\n v-if=\"$slots['left-section']\"\n v-bind=\"sectionAttrs\"\n tag=\"span\"\n :mod=\"{ position: 'left' }\"\n >\n <slot name=\"left-section\"></slot>\n </c-box>\n <c-box v-else-if=\"leftSection\" v-bind=\"sectionAttrs\" tag=\"span\" :mod=\"{ position: 'left' }\">\n <!-- TODO -->\n <component :is=\"leftSection\" />\n </c-box>\n <c-box ref=\"_label\" v-bind=\"labelAttrs\" tag=\"span\" :mod=\"{ loading }\">\n <slot />\n </c-box>\n <c-box\n v-if=\"$slots['right-section']\"\n v-bind=\"sectionAttrs\"\n tag=\"span\"\n :mod=\"{ position: 'right' }\"\n >\n <slot name=\"right-section\"></slot>\n </c-box>\n <c-box v-else-if=\"rightSection\" v-bind=\"sectionAttrs\" tag=\"span\" :mod=\"{ position: 'right' }\">\n <!-- TODO -->\n <component :is=\"rightSection\" />\n </c-box>\n </c-box>\n </unstyled-button>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs, useSlots } from 'vue'\nimport { CBox, CStyleProp, rem, useComponentProps, useStyles } from '../../core'\nimport { UnstyledButton } from '../unstyled-button'\nimport { ButtonFactory, type ButtonProps } from './button.types'\nimport { varsResolver } from './button.utils'\nimport classes from './button.module.css'\nimport { CLoader } from '../loader'\nimport { CTransition, CckTransition } from '../transition'\n\ndefineOptions({\n name: 'CButton',\n})\n\ndefineSlots<{\n 'left-section': any\n 'right-section': any\n default: any\n}>()\n\nconst _root = ref<InstanceType<typeof UnstyledButton> \| null>(null)\nconst _inner = ref<HTMLSpanElement \| null>(null)\nconst _label = ref<HTMLSpanElement \| null>(null)\n\nconst attrs = useAttrs()\nconst slots = useSlots()\n\nconst hasLeftSlot = computed(() => !!slots['left-section'])\nconst hasRightSlot = computed(() => !!slots['right-section'])\n\nconst loaderTransition: CckTransition = {\n in: { opacity: 1, transform: `translate(-50%, calc(-50% + ${rem(1)}))` },\n out: { opacity: 0, transform: 'translate(-50%, -200%)' },\n common: { transformOrigin: 'center' },\n transitionProperty: 'transform, opacity',\n}\n\nconst rawProps = defineProps<ButtonProps>()\n\nconst props = useComponentProps({\n component: 'CButton',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'style',\n 'vars',\n 'className',\n 'color',\n 'disabled',\n 'leftSection',\n 'rightSection',\n 'fullWidth',\n 'radius',\n 'loading',\n 'loaderProps',\n 'gradient',\n 'classNames',\n 'styles',\n 'unstyled',\n 'dataDisabled',\n 'autoContrast',\n 'mod',\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<ButtonFactory>({\n name: 'Button',\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 vars: props.value.vars,\n varsResolver,\n})\n\nconst modList = computed(() => [\n {\n disabled: props.value.disabled \|\| props.value.dataDisabled,\n },\n { loading: props.value.loading },\n { block: props.value.fullWidth },\n { 'with-left-section': hasLeftSlot.value \|\| !!props.value.leftSection },\n { 'with-right-section': hasRightSlot.value \|\| !!props.value.rightSection },\n])\n\nconst rootAttrs = computed(() =>\n getStyles('root', {\n active: !props.value.disabled && !props.value.loading && !props.value.dataDisabled,\n })\n)\nconst mergedRootAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n Object.keys(propsValue).forEach((key) => {\n if (!knownProps.includes(key)) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n })\n const userMod = props.value.mod\n const mergedMod = [\n ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n ...(modList.value \|\| []),\n ]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\nconst innerAttrs = computed(() => getStyles('inner'))\nconst sectionAttrs = computed(() => getStyles('section'))\nconst labelAttrs = computed(() => getStyles('label'))\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n inner: _inner.value,\n label: _label.value,\n})\n</script>\n"],"mappings":"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"}

package/cjs/components/center/center.cjs CHANGED Viewed

@@ -324,15 +324,17 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			"mod",
 			"attributes"
 		];
+		const styleProps = (0, vue.computed)(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = require_use_styles.useStyles({
 			name: "Center",
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: require_center_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,
@@ -362,6 +364,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			rawProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			modList,
 			rootAttrs,

package/cjs/components/center/center.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"center.cjs","names":[],"sources":["../../../src/components/center/center.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" v-bind=\"mergedAttrs\">\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CenterFactory, CenterProps } from './center.types'\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport classes from './center.module.css'\n\ndefineOptions({\n name: 'CCenter',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<CenterProps>()\n\nconst props = useComponentProps({\n component: 'CCenter',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'inline',\n 'mod',\n 'attributes',\n]\n\nconst getStyles = useStyles<CenterFactory>({\n name: 'Center',\n props: ~~{ ...props.value, ...attrs } as CenterProps~~,\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 vars: props.value.vars,\n})\n\nconst modList = computed(() => [{ inline: props.value.inline }])\n\nconst rootAttrs = computed(() => getStyles('root'))\n\nconst mergedAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n Object.keys(propsValue).forEach((key) => {\n if (!knownProps.includes(key)) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n })\n const userMod = props.value.mod\n const mergedMod = [\n ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n ...(modList.value \|\| []),\n ]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgBA,MAAM,SAAA,GAAA,IAAA,IAAA,CAA8C,IAAI;EAExD,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX,cAAc,CAAC;GACf,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,~~YAAY~~,~~mBAAA~~,~~UAAyB~~;~~GACzC~~,MAAM;~~GACN~~,~~OAAO~~;~~IAAE~~,~~GAAG~~,MAAM;~~IAAO~~,~~GAAG~~;~~GAAM~~;~~GAClC~~,SAAA,sBAAA;GACA,~~WAAW~~,MAAM,MAAM;~~GACvB~~,~~OAAO~~,MAAM,MAAM;~~GACnB~~,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;EACpB,CAAC;EAED,MAAM,WAAA,GAAA,IAAA,SAAA,OAAyB,CAAC,EAAE,QAAQ,MAAM,MAAM,OAAO,CAAC,CAAC;EAE/D,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,MAAM,CAAC;EAElD,MAAM,eAAA,GAAA,IAAA,SAAA,OAA6B;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,OAAO,KAAK,UAAU,CAAC,CAAC,SAAS,QAAQ;IACvC,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAE7B,CAAC;GACD,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAChB,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,GAC/D,GAAI,QAAQ,SAAS,CAAC,CACxB;GACA,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,UAAU;GAAM;EACzD,CAAC;EAED,SAAa,EACX,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;mDAxES~~,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAFD,KAAI,QAAO,GAAS,OAAA,WAAW,GAAA;kCAC5B,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"center.cjs","names":[],"sources":["../../../src/components/center/center.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" v-bind=\"mergedAttrs\">\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CenterFactory, CenterProps } from './center.types'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../core'\nimport classes from './center.module.css'\n\ndefineOptions({\n name: 'CCenter',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<CenterProps>()\n\nconst props = useComponentProps({\n component: 'CCenter',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'inline',\n 'mod',\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<CenterFactory>({\n name: 'Center',\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 vars: props.value.vars,\n})\n\nconst modList = computed(() => [{ inline: props.value.inline }])\n\nconst rootAttrs = computed(() => getStyles('root'))\n\nconst mergedAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n Object.keys(propsValue).forEach((key) => {\n if (!knownProps.includes(key)) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n })\n const userMod = props.value.mod\n const mergedMod = [\n ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n ...(modList.value \|\| []),\n ]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgBA,MAAM,SAAA,GAAA,IAAA,IAAA,CAA8C,IAAI;EAExD,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX,cAAc,CAAC;GACf,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,cAAA,GAAA,IAAA,SAAA,QAA6B;GACjC,GAAG,MAAM;GACT,GAAG;GACH,OAAQ,MAAM,SAAS,MAAM,MAAM;EACrC,EAAE;EAEF,MAAM,YAAY,mBAAA,UAAyB;GACzC,MAAM;GACN,OAAO;GACP,SAAA,sBAAA;GACA,iBAAiB,MAAM,MAAM;GAC7B,aAAa,MAAM,MAAM;GACzB,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;EACpB,CAAC;EAED,MAAM,WAAA,GAAA,IAAA,SAAA,OAAyB,CAAC,EAAE,QAAQ,MAAM,MAAM,OAAO,CAAC,CAAC;EAE/D,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,MAAM,CAAC;EAElD,MAAM,eAAA,GAAA,IAAA,SAAA,OAA6B;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,OAAO,KAAK,UAAU,CAAC,CAAC,SAAS,QAAQ;IACvC,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAE7B,CAAC;GACD,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAChB,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,GAC/D,GAAI,QAAQ,SAAS,CAAC,CACxB;GACA,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,UAAU;GAAM;EACzD,CAAC;EAED,SAAa,EACX,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;mDA9ES,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAFD,KAAI,QAAO,GAAS,OAAA,WAAW,GAAA;kCAC5B,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/cjs/components/close-button/close-button.cjs CHANGED Viewed

@@ -356,16 +356,18 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			"attributes",
 			"__staticSelector"
 		];
+		const styleProps = (0, vue.computed)(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = require_use_styles.useStyles({
 			name: props.value.__staticSelector || "CloseButton",
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: require_close_button_module.default,
-			className: props.value.className,
+			className: () => props.value.className,
 			classNames: props.value.classNames,
-			style: props.value.style,
+			style: () => props.value.style,
 			styles: props.value.styles,
 			unstyled: props.value.unstyled,
 			attributes: props.value.attributes,
@@ -397,6 +399,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			defaultProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			modList,
 			rootAttrs,