npm - @cck-ui/core - Versions diffs - 0.19.0 → 0.20.1 - Mend

@cck-ui/core 0.19.0 → 0.20.1

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 (129) hide show

package/cjs/components/simple-grid/simple-grid.cjs CHANGED Viewed

@@ -357,13 +357,15 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			"autoRows",
 			"attributes"
 		];
+		const styleProps = (0, vue.computed)(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = require_use_styles.useStyles({
 			name: "SimpleGrid",
 			classes: require_simple_grid_module.default,
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			className: props.value.className,
 			style: props.value.style,
 			classNames: props.value.classNames,
@@ -417,6 +419,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			rawProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			responsiveClassname,
 			autoColsAttr,

package/cjs/components/simple-grid/simple-grid.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"simple-grid.cjs","names":[],"sources":["../../../src/components/simple-grid/simple-grid.vue"],"sourcesContent":["<template>\n <c-box ref=\"_container\" v-if=\"type === 'container'\" v-bind=\"containerAttrs\">\n <c-box ref=\"_root\" v-bind=\"mergedRootAttrs\" :data-auto-cols=\"autoColsAttr\">\n <slot />\n </c-box>\n </c-box>\n <template v-else>\n <c-box ref=\"_root\" v-bind=\"mergedRootAttrs\" :data-auto-cols=\"autoColsAttr\">\n <slot />\n </c-box>\n </template>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, onUnmounted, ref, useAttrs, watchEffect } from 'vue'\nimport {\n CBox,\n responsiveStyleManager,\n useComponentProps,\n useRandomClassName,\n useStyles,\n} from '../../core'\nimport type { SimpleGridFactory, SimpleGridProps } from './simple-grid.types'\nimport classes from './simple-grid.module.css'\nimport { useSimpleGridStyle } from './simple-grid-custom'\n\ndefineOptions({\n name: 'CSimpleGrid',\n})\n\nconst _container = ref<InstanceType<typeof CBox> \| null>(null)\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<SimpleGridProps>()\n\nconst props = useComponentProps({\n component: 'CSimpleGrid',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'cols',\n 'verticalSpacing',\n 'spacing',\n 'type',\n 'minColWidth',\n 'autoFlow',\n 'autoRows',\n 'attributes',\n]\n\nconst getStyles = useStyles<SimpleGridFactory>({\n name: 'SimpleGrid',\n classes,\n props: ~~{ ...props.value, ...attrs } as SimpleGridProps~~,\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 responsiveClassname = useRandomClassName()\n\nconst autoColsAttr =\n props.value.minColWidth !== undefined ? props.value.autoFlow \|\| 'auto-fill' : undefined\n\nconst rootAttrs = computed(() => getStyles('root', { className: responsiveClassname }))\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].filter(Boolean))]\n return { ...others, ...rootAttrs.value }\n})\n\nconst containerAttrs = computed(() => getStyles('container'))\n\nconst gridStyle = useSimpleGridStyle({\n selector: responsiveClassname,\n ...props.value,\n})\n\nconst currentStyleKey = ref<string \| null>(null)\nwatchEffect(() => {\n const cssText = gridStyle.value.queryStylesString\n if (cssText) {\n const newKey = responsiveStyleManager.register(cssText)\n if (currentStyleKey.value && currentStyleKey.value !== newKey) {\n responsiveStyleManager.unregister(currentStyleKey.value)\n }\n currentStyleKey.value = newKey\n } else if (currentStyleKey.value) {\n responsiveStyleManager.unregister(currentStyleKey.value)\n currentStyleKey.value = null\n }\n})\nonUnmounted(() => {\n if (currentStyleKey.value) {\n responsiveStyleManager.unregister(currentStyleKey.value)\n }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n container: computed(() => _container.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~EA8BA~~,MAAM,cAAA,GAAA,IAAA,IAAA,CAAmD,IAAI;EAC7D,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;EACF;EAEA,MAAM,YAAY,mBAAA,UAA6B;GAC7C,MAAM;GACN,SAAA,2BAAA;GACA,OAAO;~~IAAE~~,~~GAAG,MAAM;IAAO,GAAG;GAAM;GAClC,~~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,sBAAsB,6BAAA,mBAAmB;EAE/C,MAAM,eACJ,MAAM,MAAM,gBAAgB,KAAA,IAAY,MAAM,MAAM,YAAY,cAAc,KAAA;EAEhF,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,QAAQ,EAAE,WAAW,oBAAoB,CAAC,CAAC;EACtF,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;GACV,CAAC,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,CAAE;GACpF,OAAO;IAAE,GAAG;IAAQ,GAAG,UAAU;GAAM;EACzC,CAAC;EAED,MAAM,kBAAA,GAAA,IAAA,SAAA,OAAgC,UAAU,WAAW,CAAC;EAE5D,MAAM,YAAY,2BAAA,mBAAmB;GACnC,UAAU;GACV,GAAG,MAAM;EACX,CAAC;EAED,MAAM,mBAAA,GAAA,IAAA,IAAA,CAAqC,IAAI;EAC/C,CAAA,GAAA,IAAA,YAAA,OAAkB;GAChB,MAAM,UAAU,UAAU,MAAM;GAChC,IAAI,SAAS;IACX,MAAM,SAAS,iCAAA,uBAAuB,SAAS,OAAO;IACtD,IAAI,gBAAgB,SAAS,gBAAgB,UAAU,QACrD,iCAAA,uBAAuB,WAAW,gBAAgB,KAAK;IAEzD,gBAAgB,QAAQ;GAC1B,OAAO,IAAI,gBAAgB,OAAO;IAChC,iCAAA,uBAAuB,WAAW,gBAAgB,KAAK;IACvD,gBAAgB,QAAQ;GAC1B;EACF,CAAC;EACD,CAAA,GAAA,IAAA,YAAA,OAAkB;GAChB,IAAI,gBAAgB,OAClB,iCAAA,uBAAuB,WAAW,gBAAgB,KAAK;EAE3D,CAAC;EAED,SAAa;GACX,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI;GAC9C,YAAA,GAAA,IAAA,SAAA,OAA0B,WAAW,OAAO,QAAQ,IAAI;EAC1D,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAzH~~+B,OAAA,SAAI,gBAAA,GAAA,IAAA,UAAA,CAAA,IAAA,GAAA,IAAA,YAAA,CAI1B,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA;;EAJD,KAAI;IAAiD,OAAA,cAAc,GAAA;kCAGhE,EAAA,GAAA,IAAA,YAAA,CAAA,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAFD,KAAI,QAAO,GAAS,OAAA,iBAAe,EAAG,kBAAgB,OAAA,aAAY,CAAA,GAAA;mCAC/D,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA;;;;uDAMF,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA;;EAFD,KAAI;IAAgB,OAAA,iBAAe,EAAG,kBAAgB,OAAA,aAAY,CAAA,GAAA;kCAC/D,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"simple-grid.cjs","names":[],"sources":["../../../src/components/simple-grid/simple-grid.vue"],"sourcesContent":["<template>\n <c-box ref=\"_container\" v-if=\"type === 'container'\" v-bind=\"containerAttrs\">\n <c-box ref=\"_root\" v-bind=\"mergedRootAttrs\" :data-auto-cols=\"autoColsAttr\">\n <slot />\n </c-box>\n </c-box>\n <template v-else>\n <c-box ref=\"_root\" v-bind=\"mergedRootAttrs\" :data-auto-cols=\"autoColsAttr\">\n <slot />\n </c-box>\n </template>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, onUnmounted, ref, useAttrs, watchEffect } from 'vue'\nimport {\n CBox,\n CStyleProp,\n responsiveStyleManager,\n useComponentProps,\n useRandomClassName,\n useStyles,\n} from '../../core'\nimport type { SimpleGridFactory, SimpleGridProps } from './simple-grid.types'\nimport classes from './simple-grid.module.css'\nimport { useSimpleGridStyle } from './simple-grid-custom'\n\ndefineOptions({\n name: 'CSimpleGrid',\n})\n\nconst _container = ref<InstanceType<typeof CBox> \| null>(null)\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<SimpleGridProps>()\n\nconst props = useComponentProps({\n component: 'CSimpleGrid',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'cols',\n 'verticalSpacing',\n 'spacing',\n 'type',\n 'minColWidth',\n 'autoFlow',\n 'autoRows',\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<SimpleGridFactory>({\n name: 'SimpleGrid',\n classes,\n props: styleProps,\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 responsiveClassname = useRandomClassName()\n\nconst autoColsAttr =\n props.value.minColWidth !== undefined ? props.value.autoFlow \|\| 'auto-fill' : undefined\n\nconst rootAttrs = computed(() => getStyles('root', { className: responsiveClassname }))\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].filter(Boolean))]\n return { ...others, ...rootAttrs.value }\n})\n\nconst containerAttrs = computed(() => getStyles('container'))\n\nconst gridStyle = useSimpleGridStyle({\n selector: responsiveClassname,\n ...props.value,\n})\n\nconst currentStyleKey = ref<string \| null>(null)\nwatchEffect(() => {\n const cssText = gridStyle.value.queryStylesString\n if (cssText) {\n const newKey = responsiveStyleManager.register(cssText)\n if (currentStyleKey.value && currentStyleKey.value !== newKey) {\n responsiveStyleManager.unregister(currentStyleKey.value)\n }\n currentStyleKey.value = newKey\n } else if (currentStyleKey.value) {\n responsiveStyleManager.unregister(currentStyleKey.value)\n currentStyleKey.value = null\n }\n})\nonUnmounted(() => {\n if (currentStyleKey.value) {\n responsiveStyleManager.unregister(currentStyleKey.value)\n }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n container: computed(() => _container.value?.root ?? null),\n})\n</script>\n"],"mappings":"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"}

package/cjs/components/skeleton/skeleton.cjs CHANGED Viewed

@@ -333,6 +333,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 		const rawProps = __props;
 		const props = require_use_component_props.useComponentProps({
 			component: "CSkeleton",
+			defaultProps: {},
 			props: rawProps
 		});
 		const knownProps = [
@@ -351,13 +352,15 @@ 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: "Skeleton",
 			classes: require_skeleton_module.default,
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			className: props.value.className,
 			style: props.value.style,
 			classNames: props.value.classNames,
@@ -388,6 +391,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			rawProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			modList,
 			rootAttrs,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"skeleton.cjs","names":[],"sources":["../../../src/components/skeleton/skeleton.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 { CBox, useComponentProps, useStyles } from '../../core'\nimport { SkeletonFactory, SkeletonProps } from './skeleton.types'\nimport classes from './skeleton.module.css'\nimport { varsResolver } from './skeleton.utils'\nimport { computed, ref, useAttrs } from 'vue'\n\ndefineOptions({\n name: 'CSkeleton',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = withDefaults(defineProps<SkeletonProps>(), {\n animate: true,\n visible: true,\n})\n\nconst props = useComponentProps({\n component: 'CSkeleton',\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'width',\n 'height',\n 'circle',\n 'visible',\n 'radius',\n 'animate',\n 'mod',\n 'attributes',\n]\n\nconst getStyles = useStyles<SkeletonFactory>({\n name: 'Skeleton',\n classes,\n props: ~~{ ...props.value, ...attrs } as SkeletonProps~~,\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(() => [{ visible: props.value.visible }, { animate: props.value.animate }])\n\nconst rootAttrs = computed(() => getStyles('root'))\n\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, ...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;EAKjB,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,YAAY,mBAAA,UAA2B;GAC3C,MAAM;GACN,SAAA,wBAAA;GACA,OAAO;~~IAAE~~,~~GAAG,MAAM;IAAO,GAAG;GAAM;GAClC,~~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,uBAAA;EACF,CAAC;EAED,MAAM,WAAA,GAAA,IAAA,SAAA,OAAyB,CAAC,EAAE,SAAS,MAAM,MAAM,QAAQ,GAAG,EAAE,SAAS,MAAM,MAAM,QAAQ,CAAC,CAAC;EAEnG,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,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,EACX,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;mDAjFS~~,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":"skeleton.cjs","names":[],"sources":["../../../src/components/skeleton/skeleton.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 { CBox, CStyleProp, useComponentProps, useStyles } from '../../core'\nimport { SkeletonFactory, SkeletonProps } from './skeleton.types'\nimport classes from './skeleton.module.css'\nimport { varsResolver } from './skeleton.utils'\nimport { computed, ref, useAttrs } from 'vue'\n\ndefineOptions({\n name: 'CSkeleton',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = withDefaults(defineProps<SkeletonProps>(), {\n animate: true,\n visible: true,\n})\n\nconst props = useComponentProps({\n component: 'CSkeleton',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'width',\n 'height',\n 'circle',\n 'visible',\n 'radius',\n 'animate',\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<SkeletonFactory>({\n name: 'Skeleton',\n classes,\n props: styleProps,\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(() => [{ visible: props.value.visible }, { animate: props.value.animate }])\n\nconst rootAttrs = computed(() => getStyles('root'))\n\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, ...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;EAKjB,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;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,UAA2B;GAC3C,MAAM;GACN,SAAA,wBAAA;GACA,OAAO;GACP,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,uBAAA;EACF,CAAC;EAED,MAAM,WAAA,GAAA,IAAA,SAAA,OAAyB,CAAC,EAAE,SAAS,MAAM,MAAM,QAAQ,GAAG,EAAE,SAAS,MAAM,MAAM,QAAQ,CAAC,CAAC;EAEnG,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,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,EACX,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;mDAxFS,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/space/space.cjs CHANGED Viewed

@@ -322,12 +322,14 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			"mih",
 			"attributes"
 		];
+		const styleProps = (0, vue.computed)(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = require_use_styles.useStyles({
 			name: "Space",
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: require_space_module.default,
 			className: props.value.className,
 			style: props.value.style,
@@ -357,6 +359,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			rawProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			rootAttrs,
 			mergedAttrs,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"space.cjs","names":[],"sources":["../../../src/components/space/space.vue"],"sourcesContent":["<template>\n <c-box\n ref=\"_root\"\n v-bind=\"mergedAttrs\"\n :w=\"props.w\"\n :miw=\"props.miw ?? props.w\"\n :h=\"props.h\"\n :mih=\"props.mih ?? props.h\"\n >\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport { SpaceFactory, SpaceProps } from './space.types'\nimport classes from './space.module.css'\n\ndefineOptions({\n name: 'CSpace',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<SpaceProps>()\n\nconst props = useComponentProps({\n component: 'CSpace',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'w',\n 'h',\n 'miw',\n 'mih',\n 'attributes',\n]\n\nconst getStyles = useStyles<SpaceFactory>({\n name: 'Space',\n props: ~~{ ...props.value, ...attrs } as SpaceProps~~,\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 rootAttrs = computed(() => getStyles('root'))\n\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, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,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;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;EACpB,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,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,UAAU;GAAM;EACzD,CAAC;EAED,SAAa,EACX,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC~~;;;;;;;;;;;;;;;;;;;;;;mDArES~~,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EARN,KAAI,QAAO,GACH,OAAA,aAAW;EAClB,GAAG,OAAA,MAAM;EACT,KAAK,OAAA,MAAM,OAAO,OAAA,MAAM;EACxB,GAAG,OAAA,MAAM;EACT,KAAK,OAAA,MAAM,OAAO,OAAA,MAAM;;kCAEjB,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"space.cjs","names":[],"sources":["../../../src/components/space/space.vue"],"sourcesContent":["<template>\n <c-box\n ref=\"_root\"\n v-bind=\"mergedAttrs\"\n :w=\"props.w\"\n :miw=\"props.miw ?? props.w\"\n :h=\"props.h\"\n :mih=\"props.mih ?? props.h\"\n >\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../core'\nimport { SpaceFactory, SpaceProps } from './space.types'\nimport classes from './space.module.css'\n\ndefineOptions({\n name: 'CSpace',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<SpaceProps>()\n\nconst props = useComponentProps({\n component: 'CSpace',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'w',\n 'h',\n 'miw',\n 'mih',\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<SpaceFactory>({\n name: 'Space',\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 rootAttrs = computed(() => getStyles('root'))\n\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, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,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;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,UAAwB;GACxC,MAAM;GACN,OAAO;GACP,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;EACpB,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,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,UAAU;GAAM;EACzD,CAAC;EAED,SAAa,EACX,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC;;;;;;;;;;;;;;;;;;;;;;;mDA3ES,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EARN,KAAI,QAAO,GACH,OAAA,aAAW;EAClB,GAAG,OAAA,MAAM;EACT,KAAK,OAAA,MAAM,OAAO,OAAA,MAAM;EACxB,GAAG,OAAA,MAAM;EACT,KAAK,OAAA,MAAM,OAAO,OAAA,MAAM;;kCAEjB,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/cjs/components/splitter/splitter.cjs CHANGED Viewed

@@ -402,13 +402,15 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			"attributes"
 		];
 		const modList = (0, vue.computed)(() => [{ orientation: props.value.orientation }]);
+		const styleProps = (0, vue.computed)(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = require_use_styles.useStyles({
 			name: "Splitter",
 			classes: require_splitter_module.default,
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			className: props.value.className,
 			style: props.value.style,
 			classNames: props.value.classNames,
@@ -552,6 +554,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			props,
 			knownProps,
 			modList,
+			styleProps,
 			getStyles,
 			paneVNodes,
 			panels,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"splitter.cjs","names":[],"sources":["../../../src/components/splitter/splitter.vue"],"sourcesContent":["<template>\n <c-box ref=\"rootRef\" v-bind=\"mergedAttrs\">\n <template v-for=\"(vnode, index) in paneVNodes\" :key=\"`pane-${index}`\">\n <c-box\n v-if=\"index > 0\"\n v-bind=\"handleAttrs(index - 1)\"\n :key=\"`handle-${index - 1}`\"\n @pointerdown=\"splitter.getHandleEventHandlers({ index: index - 1 }).onPointerDown\"\n @touchstart=\"splitter.getHandleEventHandlers({ index: index - 1 }).onTouchStart\"\n @keydown=\"splitter.getHandleEventHandlers({ index: index - 1 }).onKeyDown\"\n @dblclick=\"handleDblClick(index - 1)\"\n >\n <c-box\n v-if=\"withHandle\"\n v-bind=\"getStyles('thumb')\"\n :data-orientation=\"orientation\"\n :data-active=\"isHandleActive(index - 1) \|\| undefined\"\n >\n <component :is=\"thumbIcon\" :orientation=\"defaultIcon\" />\n </c-box>\n </c-box>\n\n <component :is=\"vnode\" :__index=\"index\" />\n </template>\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs, useSlots, watch, watchEffect } from 'vue'\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport { SplitterFactory, type SplitterProps } from './splitter.types'\nimport classes from './splitter.module.css'\nimport { varsResolver } from './splitter.utils'\nimport SplitterPane from './splitter-pane/splitter-pane.vue'\nimport { useSplitter, UseSplitterPanel } from '@cck-ui/hooks'\nimport { provideSplitterContext } from './splitter.context'\nimport GripIcon from './grip-icon.vue'\n\ndefineOptions({\n name: 'CSplitter',\n})\n\nconst rootRef = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\nconst slots = useSlots()\n\nconst rawProps = defineProps<SplitterProps>()\n\nconst defaultProps = {\n orientation: 'horizontal',\n lineSize: 2,\n withHandle: true,\n resetOnDoubleClick: true,\n} satisfies Partial<SplitterProps>\n\nconst props = useComponentProps({\n component: 'CSplitter',\n defaultProps,\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'orientation',\n 'sizes',\n 'onSizeChange',\n 'onResizeStart',\n 'onResizeEnd',\n 'onCollapseChange',\n 'redistribute',\n 'step',\n 'shiftStep',\n 'lineSize',\n 'handleColor',\n 'handleIcon',\n 'withHandle',\n 'resetOnDoubleClick',\n 'mod',\n 'attributes',\n]\n\nconst modList = computed(() => [\n {\n orientation: props.value.orientation,\n },\n])\n\nconst getStyles = useStyles<SplitterFactory>({\n name: 'Splitter',\n classes,\n props: { ...props.value, ...attrs } as SplitterProps,\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 paneVNodes = ref<any[]>([])\nconst panels = ref<UseSplitterPanel[]>([])\n\nwatchEffect(() => {\n const defaultSlots = slots.default?.() \|\| []\n const filtered = defaultSlots.filter((vnode) => vnode.type === SplitterPane)\n paneVNodes.value = filtered\n panels.value = filtered.map((vnode) => {\n const vProps = vnode.props \|\| {}\n return {\n defaultSize: vProps.defaultSize ?? vProps['default-size'] ?? 0,\n min: vProps.min ?? undefined,\n max: vProps.max ?? undefined,\n collapsible: vProps.collapsible ?? false,\n collapseThreshold: vProps.collapseThreshold ?? vProps['collapse-threshold'] ?? undefined,\n }\n })\n})\n\nconst splitter = useSplitter({\n panels: panels.value,\n orientation: props.value.orientation,\n sizes: props.value.sizes,\n onSizeChange: props.value.onSizeChange,\n onResizeStart: props.value.onResizeStart,\n onResizeEnd: props.value.onResizeEnd,\n onCollapseChange: props.value.onCollapseChange,\n redistribute: props.value.redistribute,\n step: props.value.step,\n shiftStep: props.value.shiftStep,\n resetOnDoubleClick: props.value.resetOnDoubleClick,\n})\n\nwatch(\n rootRef,\n (newVal) => {\n if (newVal) {\n const domEl = newVal.$el \|\| newVal.root\n if (domEl instanceof HTMLElement) {\n splitter.containerRef(domEl)\n }\n } else {\n splitter.containerRef(null)\n }\n },\n { immediate: true }\n)\n\nconst getHandleAttrs = (index: number) => {\n const handleProps = splitter.getHandleProps({ index })\n const { ref: _ref, onDoubleClick, ...attrs } = handleProps\n return {\n role: attrs.role,\n 'aria-orientation': attrs['aria-orientation'],\n 'aria-valuenow': handleProps['aria-valuenow'],\n 'aria-valuemin': handleProps['aria-valuemin'],\n 'aria-valuemax': handleProps['aria-valuemax'],\n tabIndex: handleProps.tabIndex,\n 'data-active': handleProps['data-active'],\n 'data-orientation': handleProps['data-orientation'],\n }\n}\n\nconst isHandleActive = (index: number) => {\n return splitter.activeHandle === index\n}\n\nconst handleAttrs = (index: number) => {\n const styles = getStyles('handle')\n const attrs = getHandleAttrs(index)\n return {\n ...styles,\n ...attrs,\n key: `handle-${index}`,\n }\n}\n\nconst getPaneStyle = (index: number) => {\n const sizes = splitter.sizes.value\n const size = sizes[index]\n const pixelMode = splitter.pixelMode\n if (!pixelMode) {\n const magnitude = typeof size === 'number' ? size : parseFloat(size as string)\n return { flexBasis: `${magnitude}%` }\n }\n const isFixed = typeof size === 'string' && (size.endsWith('px') \|\| size.endsWith('rem'))\n if (isFixed) {\n return { flexGrow: 0, flexShrink: 1, flexBasis: size as string }\n }\n const magnitude = typeof size === 'number' ? size : parseFloat(size as string)\n return { flexGrow: magnitude, flexShrink: 1, flexBasis: 0 }\n}\n\nwatch(\n () => props.value.sizes,\n (newSizes) => {\n if (!newSizes) {\n return\n }\n const currentSizes = splitter.sizes.value\n if (JSON.stringify(newSizes) !== JSON.stringify(currentSizes)) {\n splitter.setSizes(newSizes)\n }\n },\n { immediate: true, deep: true }\n)\n\nconst collapsed = computed(() => splitter.collapsed)\nconst orientation = computed(() => props.value.orientation \|\| 'horizontal')\n\nprovideSplitterContext({\n getStyles,\n sizes: splitter.sizes,\n collapsed,\n orientation,\n getPaneStyle,\n})\n\nconst defaultIcon = computed(() =>\n props.value.orientation === 'vertical' ? 'horizontal' : 'vertical'\n)\n\nconst thumbIcon = computed(() => {\n if (props.value.handleIcon !== undefined) {\n return props.value.handleIcon\n }\n return GripIcon\n})\n\nconst withHandle = computed(() => props.value.withHandle)\n\nconst handleDblClick = (index: number) => {\n if (props.value.resetOnDoubleClick !== false) {\n splitter.reset(index)\n }\n}\n\nconst rootAttrs = computed(() => getStyles('root'))\n\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, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => rootRef.value?.root \|\| null),\n sizes: splitter.sizes,\n collapsed: splitter.collapsed,\n activeHandle: splitter.activeHandle,\n setSizes: splitter.setSizes,\n collapse: splitter.collapse,\n expand: splitter.expand,\n toggleCollapse: splitter.toggleCollapse,\n reset: splitter.reset,\n})\n</script>\n"],"mappings":"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"}
1	+ {"version":3,"file":"splitter.cjs","names":[],"sources":["../../../src/components/splitter/splitter.vue"],"sourcesContent":["<template>\n <c-box ref=\"rootRef\" v-bind=\"mergedAttrs\">\n <template v-for=\"(vnode, index) in paneVNodes\" :key=\"`pane-${index}`\">\n <c-box\n v-if=\"index > 0\"\n v-bind=\"handleAttrs(index - 1)\"\n :key=\"`handle-${index - 1}`\"\n @pointerdown=\"splitter.getHandleEventHandlers({ index: index - 1 }).onPointerDown\"\n @touchstart=\"splitter.getHandleEventHandlers({ index: index - 1 }).onTouchStart\"\n @keydown=\"splitter.getHandleEventHandlers({ index: index - 1 }).onKeyDown\"\n @dblclick=\"handleDblClick(index - 1)\"\n >\n <c-box\n v-if=\"withHandle\"\n v-bind=\"getStyles('thumb')\"\n :data-orientation=\"orientation\"\n :data-active=\"isHandleActive(index - 1) \|\| undefined\"\n >\n <component :is=\"thumbIcon\" :orientation=\"defaultIcon\" />\n </c-box>\n </c-box>\n\n <component :is=\"vnode\" :__index=\"index\" />\n </template>\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs, useSlots, watch, watchEffect } from 'vue'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../core'\nimport { SplitterFactory, type SplitterProps } from './splitter.types'\nimport classes from './splitter.module.css'\nimport { varsResolver } from './splitter.utils'\nimport SplitterPane from './splitter-pane/splitter-pane.vue'\nimport { useSplitter, UseSplitterPanel } from '@cck-ui/hooks'\nimport { provideSplitterContext } from './splitter.context'\nimport GripIcon from './grip-icon.vue'\n\ndefineOptions({\n name: 'CSplitter',\n})\n\nconst rootRef = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\nconst slots = useSlots()\n\nconst rawProps = defineProps<SplitterProps>()\n\nconst defaultProps = {\n orientation: 'horizontal',\n lineSize: 2,\n withHandle: true,\n resetOnDoubleClick: true,\n} satisfies Partial<SplitterProps>\n\nconst props = useComponentProps({\n component: 'CSplitter',\n defaultProps,\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'orientation',\n 'sizes',\n 'onSizeChange',\n 'onResizeStart',\n 'onResizeEnd',\n 'onCollapseChange',\n 'redistribute',\n 'step',\n 'shiftStep',\n 'lineSize',\n 'handleColor',\n 'handleIcon',\n 'withHandle',\n 'resetOnDoubleClick',\n 'mod',\n 'attributes',\n]\n\nconst modList = computed(() => [\n {\n orientation: props.value.orientation,\n },\n])\n\nconst styleProps = computed(() => ({\n ...props.value,\n ...attrs,\n style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<SplitterFactory>({\n name: 'Splitter',\n classes,\n props: styleProps,\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 paneVNodes = ref<any[]>([])\nconst panels = ref<UseSplitterPanel[]>([])\n\nwatchEffect(() => {\n const defaultSlots = slots.default?.() \|\| []\n const filtered = defaultSlots.filter((vnode) => vnode.type === SplitterPane)\n paneVNodes.value = filtered\n panels.value = filtered.map((vnode) => {\n const vProps = vnode.props \|\| {}\n return {\n defaultSize: vProps.defaultSize ?? vProps['default-size'] ?? 0,\n min: vProps.min ?? undefined,\n max: vProps.max ?? undefined,\n collapsible: vProps.collapsible ?? false,\n collapseThreshold: vProps.collapseThreshold ?? vProps['collapse-threshold'] ?? undefined,\n }\n })\n})\n\nconst splitter = useSplitter({\n panels: panels.value,\n orientation: props.value.orientation,\n sizes: props.value.sizes,\n onSizeChange: props.value.onSizeChange,\n onResizeStart: props.value.onResizeStart,\n onResizeEnd: props.value.onResizeEnd,\n onCollapseChange: props.value.onCollapseChange,\n redistribute: props.value.redistribute,\n step: props.value.step,\n shiftStep: props.value.shiftStep,\n resetOnDoubleClick: props.value.resetOnDoubleClick,\n})\n\nwatch(\n rootRef,\n (newVal) => {\n if (newVal) {\n const domEl = newVal.$el \|\| newVal.root\n if (domEl instanceof HTMLElement) {\n splitter.containerRef(domEl)\n }\n } else {\n splitter.containerRef(null)\n }\n },\n { immediate: true }\n)\n\nconst getHandleAttrs = (index: number) => {\n const handleProps = splitter.getHandleProps({ index })\n const { ref: _ref, onDoubleClick, ...attrs } = handleProps\n return {\n role: attrs.role,\n 'aria-orientation': attrs['aria-orientation'],\n 'aria-valuenow': handleProps['aria-valuenow'],\n 'aria-valuemin': handleProps['aria-valuemin'],\n 'aria-valuemax': handleProps['aria-valuemax'],\n tabIndex: handleProps.tabIndex,\n 'data-active': handleProps['data-active'],\n 'data-orientation': handleProps['data-orientation'],\n }\n}\n\nconst isHandleActive = (index: number) => {\n return splitter.activeHandle === index\n}\n\nconst handleAttrs = (index: number) => {\n const styles = getStyles('handle')\n const attrs = getHandleAttrs(index)\n return {\n ...styles,\n ...attrs,\n key: `handle-${index}`,\n }\n}\n\nconst getPaneStyle = (index: number) => {\n const sizes = splitter.sizes.value\n const size = sizes[index]\n const pixelMode = splitter.pixelMode\n if (!pixelMode) {\n const magnitude = typeof size === 'number' ? size : parseFloat(size as string)\n return { flexBasis: `${magnitude}%` }\n }\n const isFixed = typeof size === 'string' && (size.endsWith('px') \|\| size.endsWith('rem'))\n if (isFixed) {\n return { flexGrow: 0, flexShrink: 1, flexBasis: size as string }\n }\n const magnitude = typeof size === 'number' ? size : parseFloat(size as string)\n return { flexGrow: magnitude, flexShrink: 1, flexBasis: 0 }\n}\n\nwatch(\n () => props.value.sizes,\n (newSizes) => {\n if (!newSizes) {\n return\n }\n const currentSizes = splitter.sizes.value\n if (JSON.stringify(newSizes) !== JSON.stringify(currentSizes)) {\n splitter.setSizes(newSizes)\n }\n },\n { immediate: true, deep: true }\n)\n\nconst collapsed = computed(() => splitter.collapsed)\nconst orientation = computed(() => props.value.orientation \|\| 'horizontal')\n\nprovideSplitterContext({\n getStyles,\n sizes: splitter.sizes,\n collapsed,\n orientation,\n getPaneStyle,\n})\n\nconst defaultIcon = computed(() =>\n props.value.orientation === 'vertical' ? 'horizontal' : 'vertical'\n)\n\nconst thumbIcon = computed(() => {\n if (props.value.handleIcon !== undefined) {\n return props.value.handleIcon\n }\n return GripIcon\n})\n\nconst withHandle = computed(() => props.value.withHandle)\n\nconst handleDblClick = (index: number) => {\n if (props.value.resetOnDoubleClick !== false) {\n splitter.reset(index)\n }\n}\n\nconst rootAttrs = computed(() => getStyles('root'))\n\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, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => rootRef.value?.root \|\| null),\n sizes: splitter.sizes,\n collapsed: splitter.collapsed,\n activeHandle: splitter.activeHandle,\n setSizes: splitter.setSizes,\n collapse: splitter.collapse,\n expand: splitter.expand,\n toggleCollapse: splitter.toggleCollapse,\n reset: splitter.reset,\n})\n</script>\n"],"mappings":"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"}

package/cjs/components/stack/stack.cjs CHANGED Viewed

@@ -340,12 +340,14 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			"variant",
 			"attributes"
 		];
+		const styleProps = (0, vue.computed)(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = require_use_styles.useStyles({
 			name: "Stack",
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: require_stack_module.default,
 			className: props.value.className,
 			style: props.value.style,
@@ -379,6 +381,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			defaultProps,
 			props,
 			knownProps,
+			styleProps,
 			getStyles,
 			rootAttrs,
 			mergedAttrs,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"stack.cjs","names":[],"sources":["../../../src/components/stack/stack.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" v-bind=\"mergedAttrs\" :variant=\"props.variant\">\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { StackFactory, StackProps } from './stack.types'\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport classes from './stack.module.css'\nimport { varsResolver } from './stack.utils'\n\ndefineOptions({\n name: 'CStack',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<StackProps>()\n\nconst defaultProps = {\n gap: 'md',\n align: 'stretch',\n justify: 'flex-start',\n} satisfies Partial<StackProps>\n\nconst props = useComponentProps({\n component: 'CStack',\n defaultProps,\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'align',\n 'justify',\n 'gap',\n 'variant',\n 'attributes',\n]\n\nconst getStyles = useStyles<StackFactory>({\n name: 'Stack',\n props: ~~{ ...props.value, ...attrs } as StackProps~~,\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 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,eAAe;GACnB,KAAK;GACL,OAAO;GACP,SAAS;EACX;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;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,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~~;;;;;;;;;;;;;;;;;;;;;;;mDA7ES~~,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAFD,KAAI,QAAO,GAAS,OAAA,aAAW,EAAG,SAAS,OAAA,MAAM,QAAA,CAAA,GAAA;kCAC9C,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"stack.cjs","names":[],"sources":["../../../src/components/stack/stack.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" v-bind=\"mergedAttrs\" :variant=\"props.variant\">\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { StackFactory, StackProps } from './stack.types'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../core'\nimport classes from './stack.module.css'\nimport { varsResolver } from './stack.utils'\n\ndefineOptions({\n name: 'CStack',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<StackProps>()\n\nconst defaultProps = {\n gap: 'md',\n align: 'stretch',\n justify: 'flex-start',\n} satisfies Partial<StackProps>\n\nconst props = useComponentProps({\n component: 'CStack',\n defaultProps,\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'align',\n 'justify',\n 'gap',\n 'variant',\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<StackFactory>({\n name: 'Stack',\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 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,eAAe;GACnB,KAAK;GACL,OAAO;GACP,SAAS;EACX;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;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,UAAwB;GACxC,MAAM;GACN,OAAO;GACP,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,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;;;;;;;;;;;;;;;;;;;;;;;;mDAnFS,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAFD,KAAI,QAAO,GAAS,OAAA,aAAW,EAAG,SAAS,OAAA,MAAM,QAAA,CAAA,GAAA;kCAC9C,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/cjs/components/text/text.cjs CHANGED Viewed

@@ -376,12 +376,14 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			"data-inline": props.value.inline,
 			"data-inherit": props.value.inherit
 		}]);
+		const styleProps = (0, vue.computed)(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = require_use_styles.useStyles({
 			name: ["Text", props.value.__staticSelector],
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: require_text_module.default,
 			className: props.value.className,
 			style: props.value.style,
@@ -414,6 +416,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			getTextTruncate,
 			knownProps,
 			modList,
+			styleProps,
 			getStyles,
 			rootAttrs,
 			mergedAttrs,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"text.cjs","names":[],"sources":["../../../src/components/text/text.vue"],"sourcesContent":["<template>\n <c-box\n ref=\"_root\"\n v-bind=\"mergedAttrs\"\n :size=\"props.size\"\n :tag=\"props.span ? 'span' : 'p'\"\n :variant=\"props.variant\"\n >\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport type { TextFactory, TextProps, TextTruncate } from './text.types.ts'\nimport classes from './text.module.css'\nimport { useStyles, CBox, useComponentProps } from '../../core'\nimport { varsResolver } from './text.utils.js'\n\ndefineOptions({\n name: 'CText',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<TextProps>()\n\nconst props = useComponentProps({\n component: 'CText',\n defaultProps: {},\n props: rawProps,\n})\n\nfunction getTextTruncate(truncate: TextTruncate \| undefined) {\n if (truncate === 'start') {\n return 'start'\n }\n\n if (truncate === 'end' \|\| truncate) {\n return 'end'\n }\n\n return undefined\n}\n\nconst knownProps = [\n 'lineClamp',\n 'truncate',\n 'inline',\n 'inherit',\n 'gradient',\n 'span',\n 'textWrap',\n '__staticSelector',\n 'vars',\n 'className',\n 'style',\n 'classNames',\n 'styles',\n 'unstyled',\n 'variant',\n 'mod',\n 'size',\n 'attributes',\n]\n\nconst modList = computed(() => [\n {\n 'data-truncate': getTextTruncate(props.value.truncate),\n 'data-line-clamp': typeof props.value.lineClamp === 'number',\n 'data-inline': props.value.inline,\n 'data-inherit': props.value.inherit,\n },\n])\n\nconst getStyles = useStyles<TextFactory>({\n name: ['Text', props.value.__staticSelector],\n props: ~~{ ...props.value, ...attrs } as TextProps~~,\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 rootAttrs = computed(() => getStyles('root', { focusable: true }))\n\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, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,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,SAAS,gBAAgB,UAAoC;GAC3D,IAAI,aAAa,SACf,OAAO;GAGT,IAAI,aAAa,SAAS,UACxB,OAAO;EAIX;EAEA,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,WAAA,GAAA,IAAA,SAAA,OAAyB,CAC7B;GACE,iBAAiB,gBAAgB,MAAM,MAAM,QAAQ;GACrD,mBAAmB,OAAO,MAAM,MAAM,cAAc;GACpD,eAAe,MAAM,MAAM;GAC3B,gBAAgB,MAAM,MAAM;EAC9B,CACF,CAAC;EAED,MAAM,YAAY,mBAAA,UAAuB;GACvC,MAAM,CAAC,QAAQ,MAAM,MAAM,gBAAgB;GAC3C,OAAO;~~IAAE~~,~~GAAG,MAAM;IAAO,GAAG;GAAM;GAClC,~~SAAA,oBAAA;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,mBAAA;EACF,CAAC;EAED,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,QAAQ,EAAE,WAAW,KAAK,CAAC,CAAC;EAEvE,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,UAAU;GAAM;EACzD,CAAC;EAED,SAAa,EACX,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;mDAtGS~~,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAPN,KAAI,QAAO,GACH,OAAA,aAAW;EAClB,MAAM,OAAA,MAAM;EACZ,KAAK,OAAA,MAAM,OAAI,SAAA;EACf,SAAS,OAAA,MAAM;;kCAER,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"text.cjs","names":[],"sources":["../../../src/components/text/text.vue"],"sourcesContent":["<template>\n <c-box\n ref=\"_root\"\n v-bind=\"mergedAttrs\"\n :size=\"props.size\"\n :tag=\"props.span ? 'span' : 'p'\"\n :variant=\"props.variant\"\n >\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport type { TextFactory, TextProps, TextTruncate } from './text.types.ts'\nimport classes from './text.module.css'\nimport { useStyles, CBox, useComponentProps, CStyleProp } from '../../core'\nimport { varsResolver } from './text.utils.js'\n\ndefineOptions({\n name: 'CText',\n})\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<TextProps>()\n\nconst props = useComponentProps({\n component: 'CText',\n defaultProps: {},\n props: rawProps,\n})\n\nfunction getTextTruncate(truncate: TextTruncate \| undefined) {\n if (truncate === 'start') {\n return 'start'\n }\n\n if (truncate === 'end' \|\| truncate) {\n return 'end'\n }\n\n return undefined\n}\n\nconst knownProps = [\n 'lineClamp',\n 'truncate',\n 'inline',\n 'inherit',\n 'gradient',\n 'span',\n 'textWrap',\n '__staticSelector',\n 'vars',\n 'className',\n 'style',\n 'classNames',\n 'styles',\n 'unstyled',\n 'variant',\n 'mod',\n 'size',\n 'attributes',\n]\n\nconst modList = computed(() => [\n {\n 'data-truncate': getTextTruncate(props.value.truncate),\n 'data-line-clamp': typeof props.value.lineClamp === 'number',\n 'data-inline': props.value.inline,\n 'data-inherit': props.value.inherit,\n },\n])\n\nconst styleProps = computed(() => ({\n ...props.value,\n ...attrs,\n style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<TextFactory>({\n name: ['Text', 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 rootAttrs = computed(() => getStyles('root', { focusable: true }))\n\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, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,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,SAAS,gBAAgB,UAAoC;GAC3D,IAAI,aAAa,SACf,OAAO;GAGT,IAAI,aAAa,SAAS,UACxB,OAAO;EAIX;EAEA,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,WAAA,GAAA,IAAA,SAAA,OAAyB,CAC7B;GACE,iBAAiB,gBAAgB,MAAM,MAAM,QAAQ;GACrD,mBAAmB,OAAO,MAAM,MAAM,cAAc;GACpD,eAAe,MAAM,MAAM;GAC3B,gBAAgB,MAAM,MAAM;EAC9B,CACF,CAAC;EAED,MAAM,cAAA,GAAA,IAAA,SAAA,QAA6B;GACjC,GAAG,MAAM;GACT,GAAG;GACH,OAAQ,MAAM,SAAS,MAAM,MAAM;EACrC,EAAE;EAEF,MAAM,YAAY,mBAAA,UAAuB;GACvC,MAAM,CAAC,QAAQ,MAAM,MAAM,gBAAgB;GAC3C,OAAO;GACP,SAAA,oBAAA;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,mBAAA;EACF,CAAC;EAED,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,QAAQ,EAAE,WAAW,KAAK,CAAC,CAAC;EAEvE,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,UAAU;GAAM;EACzD,CAAC;EAED,SAAa,EACX,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;mDA5GS,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAPN,KAAI,QAAO,GACH,OAAA,aAAW;EAClB,MAAM,OAAA,MAAM;EACZ,KAAK,OAAA,MAAM,OAAI,SAAA;EACf,SAAS,OAAA,MAAM;;kCAER,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}

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

@@ -332,12 +332,14 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			"style",
 			"attributes"
 		];
+		const styleProps = (0, vue.computed)(() => ({
+			...props.value,
+			...attrs,
+			style: attrs.style ?? props.value.style
+		}));
 		const getStyles = require_use_styles.useStyles({
 			name: props.value.__staticSelector,
-			props: {
-				...props.value,
-				...attrs
-			},
+			props: styleProps,
 			classes: require_unstyled_button_module.default,
 			className: props.value.className,
 			style: props.value.style,
@@ -364,6 +366,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			tag,
 			_root,
 			knownProps,
+			styleProps,
 			getStyles,
 			rootAttrs,
 			mergedAttrs,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"unstyled-button.cjs","names":[],"sources":["../../../src/components/unstyled-button/unstyled-button.vue"],"sourcesContent":["<template>\n <c-box\n ref=\"_root\"\n v-bind=\"mergedAttrs\"\n :tag=\"tag\"\n :type=\"tag === 'button' ? 'button' : undefined\"\n >\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport type { UnstyledButtonFactory, UnstyledButtonProps } from './unstyled-button.types'\nimport classes from './unstyled-button.module.css'\n\ndefineOptions({\n name: 'UnstyledButton',\n})\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<UnstyledButtonProps>()\n\nconst props = useComponentProps({\n component: 'UnstyledButton',\n defaultProps: {\n __staticSelector: 'UnstyledButton',\n },\n props: rawProps,\n})\n\nconst { tag = 'button' } = props.value\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst knownProps = [\n 'className',\n 'tag',\n '__staticSelector',\n 'unstyled',\n 'classNames',\n 'styles',\n 'style',\n 'attributes',\n]\n\nconst getStyles = useStyles<UnstyledButtonFactory>({\n name: props.value.__staticSelector!,\n props: ~~{ ...props.value, ...attrs } as UnstyledButtonProps~~,\n classes,\n className: props.value.className,\n style: props.value.style,\n classNames: props.value.classNames,\n styles: props.value.styles,\n unstyled: props.value.unstyled,\n attributes: props.value.attributes,\n})\n\nconst rootAttrs = computed(() => getStyles('root', { focusable: true }))\nconst mergedAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n for (const key in propsValue) {\n if (!knownProps.includes(key)) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n }\n return { ...others, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBA,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX,cAAc,EACZ,kBAAkB,iBACpB;GACA,OAAO;EACT,CAAC;EAED,MAAM,EAAE,MAAM,aAAa,MAAM;EAEjC,MAAM,SAAA,GAAA,IAAA,IAAA,CAA8C,IAAI;EAExD,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,YAAY,mBAAA,UAAiC;GACjD,MAAM,MAAM,MAAM;GAClB,OAAO;~~IAAE~~,~~GAAG,MAAM;IAAO,GAAG;GAAM;GAClC,~~SAAA,+BAAA;GACA,WAAW,MAAM,MAAM;GACvB,OAAO,MAAM,MAAM;GACnB,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;EAC1B,CAAC;EAED,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,QAAQ,EAAE,WAAW,KAAK,CAAC,CAAC;EACvE,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,OAAO;IAAE,GAAG;IAAQ,GAAG,UAAU;GAAM;EACzC,CAAC;EAED,SAAa,EACX,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;mDAlES~~,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EANN,KAAI,QAAO,GACH,OAAA,aAAW;EAClB,KAAK,OAAA;EACL,MAAM,OAAA,QAAG,WAAA,WAA2B,KAAA;;kCAE7B,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"unstyled-button.cjs","names":[],"sources":["../../../src/components/unstyled-button/unstyled-button.vue"],"sourcesContent":["<template>\n <c-box\n ref=\"_root\"\n v-bind=\"mergedAttrs\"\n :tag=\"tag\"\n :type=\"tag === 'button' ? 'button' : undefined\"\n >\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CBox, CStyleProp, useComponentProps, useStyles } from '../../core'\nimport type { UnstyledButtonFactory, UnstyledButtonProps } from './unstyled-button.types'\nimport classes from './unstyled-button.module.css'\n\ndefineOptions({\n name: 'UnstyledButton',\n})\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<UnstyledButtonProps>()\n\nconst props = useComponentProps({\n component: 'UnstyledButton',\n defaultProps: {\n __staticSelector: 'UnstyledButton',\n },\n props: rawProps,\n})\n\nconst { tag = 'button' } = props.value\n\nconst _root = ref<InstanceType<typeof CBox> \| null>(null)\n\nconst knownProps = [\n 'className',\n 'tag',\n '__staticSelector',\n 'unstyled',\n 'classNames',\n 'styles',\n 'style',\n 'attributes',\n]\n\nconst styleProps = computed(() => ({\n ...props.value,\n ...attrs,\n style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<UnstyledButtonFactory>({\n name: props.value.__staticSelector!,\n props: styleProps,\n classes,\n className: props.value.className,\n style: props.value.style,\n classNames: props.value.classNames,\n styles: props.value.styles,\n unstyled: props.value.unstyled,\n attributes: props.value.attributes,\n})\n\nconst rootAttrs = computed(() => getStyles('root', { focusable: true }))\nconst mergedAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n for (const key in propsValue) {\n if (!knownProps.includes(key)) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n }\n return { ...others, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBA,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX,cAAc,EACZ,kBAAkB,iBACpB;GACA,OAAO;EACT,CAAC;EAED,MAAM,EAAE,MAAM,aAAa,MAAM;EAEjC,MAAM,SAAA,GAAA,IAAA,IAAA,CAA8C,IAAI;EAExD,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,UAAiC;GACjD,MAAM,MAAM,MAAM;GAClB,OAAO;GACP,SAAA,+BAAA;GACA,WAAW,MAAM,MAAM;GACvB,OAAO,MAAM,MAAM;GACnB,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;EAC1B,CAAC;EAED,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,QAAQ,EAAE,WAAW,KAAK,CAAC,CAAC;EACvE,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,OAAO;IAAE,GAAG;IAAQ,GAAG,UAAU;GAAM;EACzC,CAAC;EAED,SAAa,EACX,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;mDAxES,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EANN,KAAI,QAAO,GACH,OAAA,aAAW;EAClB,KAAK,OAAA;EACL,MAAM,OAAA,QAAG,WAAA,WAA2B,KAAA;;kCAE7B,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/cjs/core/styles-api/use-styles/use-styles.cjs CHANGED Viewed

@@ -7,6 +7,7 @@ const require_merge_vars = require("./get-style/resolve-vars/merge-vars.cjs");
 const require_resolve_style = require("./get-style/resolve-style/resolve-style.cjs");
 const require_get_class_name = require("./get-class-name/get-class-name.cjs");
 const require_get_style = require("./get-style/get-style.cjs");
+let vue = require("vue");
 //#region packages/@cck-ui/core/src/core/styles-api/use-styles/use-styles.ts
 function useStyles({ name, classes, props, stylesCtx, className, style, rootSelector = "root", unstyled, classNames, styles, vars, varsResolver, attributes }) {
 	const theme = require_config_provider_context.useCckTheme().value;
@@ -20,80 +21,84 @@ function useStyles({ name, classes, props, stylesCtx, className, style, rootSele
 		themeName,
 		theme
 	});
-	const resolvedClassNames = require_resolve_class_names.resolveClassNames({
-		theme,
-		classNames,
-		props,
-		stylesCtx
-	});
-	const resolvedThemeClassNames = themeName.map((n) => require_resolve_class_names.resolveClassNames({
-		theme,
-		classNames: theme.components?.[n]?.classNames,
-		props,
-		stylesCtx
-	}));
-	const resolvedComponentStyles = withStylesTransform ? {} : require_resolve_styles.resolveStyles({
-		theme,
-		styles,
-		props,
-		stylesCtx
-	});
-	const resolvedThemeStyles = {};
-	if (!withStylesTransform) for (const n of themeName) {
-		const resolved = require_resolve_styles.resolveStyles({
+	return (selector, options) => {
+		const currentProps = (0, vue.toValue)(props);
+		const currentCtx = (0, vue.toValue)(stylesCtx);
+		const resolvedClassNames = require_resolve_class_names.resolveClassNames({
 			theme,
-			styles: theme.components?.[n]?.styles,
-			props,
-			stylesCtx
+			classNames,
+			props: currentProps,
+			stylesCtx: currentCtx
 		});
-		for (const key of Object.keys(resolved)) resolvedThemeStyles[key] = {
-			...resolvedThemeStyles[key],
-			...resolved[key]
-		};
-	}
-	const resolvedVars = require_merge_vars.mergeVars([
-		headless ? {} : varsResolver?.(theme, props, stylesCtx),
-		...themeName.map((n) => theme.components?.[n]?.vars?.(theme, props, stylesCtx)),
-		vars?.(theme, props, stylesCtx)
-	]);
-	const resolvedRootStyle = require_resolve_style.resolveStyle({
-		style,
-		theme
-	});
-	return (selector, options) => ({
-		...attributes?.[selector],
-		className: require_get_class_name.getClassName({
+		const resolvedThemeClassNames = themeName.map((n) => require_resolve_class_names.resolveClassNames({
 			theme,
-			options,
-			themeName,
-			selector,
-			classNamesPrefix,
-			resolvedClassNames,
-			resolvedThemeClassNames,
-			classes,
-			unstyled,
-			className,
-			rootSelector,
-			props,
-			stylesCtx,
-			withStaticClasses,
-			headless,
-			transformedStyles: getTransformedStyles([options?.styles, styles])
-		}),
-		style: require_get_style.getStyle({
+			classNames: theme.components?.[n]?.classNames,
+			props: currentProps,
+			stylesCtx: currentCtx
+		}));
+		const resolvedComponentStyles = withStylesTransform ? {} : require_resolve_styles.resolveStyles({
 			theme,
-			selector,
-			options,
-			props,
-			stylesCtx,
-			rootSelector,
-			withStylesTransform,
-			resolvedStyles: resolvedComponentStyles,
-			resolvedThemeStyles,
-			resolvedVars,
-			resolvedRootStyle
-		})
-	});
+			styles,
+			props: currentProps,
+			stylesCtx: currentCtx
+		});
+		const resolvedThemeStyles = {};
+		if (!withStylesTransform) for (const n of themeName) {
+			const resolved = require_resolve_styles.resolveStyles({
+				theme,
+				styles: theme.components?.[n]?.styles,
+				props: currentProps,
+				stylesCtx: currentCtx
+			});
+			for (const key of Object.keys(resolved)) resolvedThemeStyles[key] = {
+				...resolvedThemeStyles[key],
+				...resolved[key]
+			};
+		}
+		const resolvedVars = require_merge_vars.mergeVars([
+			headless ? {} : varsResolver?.(theme, currentProps, currentCtx),
+			...themeName.map((n) => theme.components?.[n]?.vars?.(theme, currentProps, currentCtx)),
+			vars?.(theme, currentProps, currentCtx)
+		]);
+		const resolvedRootStyle = require_resolve_style.resolveStyle({
+			style,
+			theme
+		});
+		return {
+			...attributes?.[selector],
+			className: require_get_class_name.getClassName({
+				theme,
+				options,
+				themeName,
+				selector,
+				classNamesPrefix,
+				resolvedClassNames,
+				resolvedThemeClassNames,
+				classes,
+				unstyled,
+				className,
+				rootSelector,
+				props: currentProps,
+				stylesCtx: currentCtx,
+				withStaticClasses,
+				headless,
+				transformedStyles: getTransformedStyles([options?.styles, styles])
+			}),
+			style: require_get_style.getStyle({
+				theme,
+				selector,
+				options,
+				props: currentProps,
+				stylesCtx: currentCtx,
+				rootSelector,
+				withStylesTransform,
+				resolvedStyles: resolvedComponentStyles,
+				resolvedThemeStyles,
+				resolvedVars,
+				resolvedRootStyle
+			})
+		};
+	};
 }
 //#endregion
 exports.useStyles = useStyles;

package/cjs/core/styles-api/use-styles/use-styles.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-styles.cjs","names":["useCckTheme","useCckClassNamesPrefix","useCckWithStaticClasses","useCckIsHeadless","useStylesTransform","resolveClassNames","resolveStyles","mergeVars","resolveStyle","getClassName","getStyle"],"sources":["../../../../src/core/styles-api/use-styles/use-styles.ts"],"sourcesContent":["import {\n Attributes,\n ClassNames,\n ClassNamesArray,\n GetStylesApiOptions,\n Styles,\n} from '../styles-api.types'\nimport { PartialVarsResolver, VarsResolver } from '../create-vars-resolver/create-vars-resolver'\nimport { useStylesTransform } from './use-transformed-styles'\nimport { resolveClassNames } from './get-class-name/resolve-class-names/resolve-class-names'\nimport { resolveStyles } from './get-style/resolve-styles/resolve-styles'\nimport { mergeVars } from './get-style/resolve-vars/merge-vars'\nimport { resolveStyle } from './get-style/resolve-style/resolve-style'\nimport { getClassName } from './get-class-name/get-class-name'\nimport { Properties } from 'csstype'\nimport { getStyle } from './get-style/get-style'\nimport { FactoryPayload } from '../../factory'\nimport { CStyleProp } from '../../box'\nimport {\n useCckClassNamesPrefix,\n useCckIsHeadless,\n useCckTheme,\n useCckWithStaticClasses,\n} from '../../config-provider'\n\nexport interface UseStylesInput<Payload extends FactoryPayload> {\n name: string \| (string \| undefined)[]\n classes: Payload['stylesNames'] extends string ? Record<string, string> : never\n props: Payload['props']\n stylesCtx?: Payload['ctx']\n className?: string \| undefined\n style?: CStyleProp\n rootSelector?: Payload['stylesNames']\n unstyled?: boolean\n classNames?: ClassNames<Payload> \| ClassNamesArray<Payload>\n styles?: Styles<Payload>\n vars?: PartialVarsResolver<Payload>\n varsResolver?: VarsResolver<Payload>\n attributes?: Attributes<Payload>\n}\n\nexport type GetStylesApi<Payload extends FactoryPayload> = (\n selector: NonNullable<Payload['stylesNames']>,\n options?: GetStylesApiOptions\n) => {\n className: string\n style: Properties\n}\n\nexport function useStyles<Payload extends FactoryPayload>({\n name,\n classes,\n props,\n stylesCtx,\n className,\n style,\n rootSelector = 'root' as NonNullable<Payload['stylesNames']>,\n unstyled,\n classNames,\n styles,\n vars,\n varsResolver,\n attributes,\n}: UseStylesInput<Payload>): GetStylesApi<Payload> {\n const _theme = useCckTheme()\n const theme = _theme.value\n const classNamesPrefix = useCckClassNamesPrefix()\n const withStaticClasses = useCckWithStaticClasses()\n const headless = useCckIsHeadless()\n\n const themeNames = Array.isArray(name) ? name : [name]\n const themeName = themeNames.filter((n) => n) as string[]\n const { withStylesTransform, getTransformedStyles } = useStylesTransform({\n props,\n stylesCtx,\n themeName,\n theme,\n })\n\n const resolvedClassNames = resolveClassNames({\n theme,\n classNames,\n props,\n stylesCtx,\n })\n const resolvedThemeClassNames = themeName.map((n) =>\n resolveClassNames({\n theme,\n classNames: theme.components?.[n]?.classNames,\n props,\n stylesCtx,\n })\n )\n\n const resolvedComponentStyles = withStylesTransform\n ? {}\n : resolveStyles({ theme, styles, props, stylesCtx })\n\n const resolvedThemeStyles: Record<string, any> = {}\n\n if (!withStylesTransform) {\n for (const n of themeName) {\n const resolved = resolveStyles({\n theme,\n styles: theme.components?.[n]?.styles,\n props,\n stylesCtx,\n })\n for (const key of Object.keys(resolved)) {\n resolvedThemeStyles[key] = {\n ...resolvedThemeStyles[key],\n ...resolved[key],\n }\n }\n }\n }\n\n const resolvedVars = mergeVars([\n headless ? {} : varsResolver?.(theme, ~~props~~, ~~stylesCtx~~),\n ...themeName.map((n) => theme.components?.[n]?.vars?.(theme, ~~props~~, ~~stylesCtx~~)),\n vars?.(theme, ~~props~~, ~~stylesCtx~~),\n ])\n\n const resolvedRootStyle = resolveStyle({ style, theme })\n\n return ~~(selector, options) => (~~{\n ...attributes?.[selector],\n\n className: getClassName({\n theme,\n options,\n themeName,\n selector,\n classNamesPrefix,\n resolvedClassNames,\n resolvedThemeClassNames,\n classes,\n unstyled,\n className,\n rootSelector,\n props,\n stylesCtx,\n withStaticClasses,\n headless,\n transformedStyles: getTransformedStyles([options?.styles, styles]),\n }),\n\n style: getStyle({\n theme,\n selector,\n options,\n props,\n stylesCtx,\n rootSelector,\n withStylesTransform,\n resolvedStyles: resolvedComponentStyles,\n resolvedThemeStyles,\n resolvedVars,\n resolvedRootStyle,\n }),\n })\n}\n"],"mappings":"~~;;;;;;;;;;AAiDA~~,SAAgB,UAA0C,EACxD,MACA,SACA,OACA,WACA,WACA,OACA,eAAe,QACf,UACA,YACA,QACA,MACA,cACA,cACiD;CAEjD,MAAM,QADSA,gCAAAA,YACI,CAAC,CAAC;CACrB,MAAM,mBAAmBC,gCAAAA,uBAAuB;CAChD,MAAM,oBAAoBC,gCAAAA,wBAAwB;CAClD,MAAM,WAAWC,gCAAAA,iBAAiB;CAGlC,MAAM,aADa,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAC,IAAI,EAAA,CACxB,QAAQ,MAAM,CAAC;~~CAC5C~~,MAAM,EAAE,qBAAqB,yBAAyBC,+BAAAA,mBAAmB;EACvE;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,qBAAqBC,4BAAAA,kBAAkB;~~EAC3C~~;~~EACA~~;~~EACA~~;~~EACA~~;~~CACF~~,CAAC;~~CACD~~,MAAM,0BAA0B,UAAU,KAAK,MAC7CA,4BAAAA,kBAAkB;~~EAChB~~;~~EACA~~,YAAY,MAAM,aAAa,EAAE,EAAE;~~EACnC~~;~~EACA~~;~~CACF~~,CAAC,CACH;~~CAEA~~,MAAM,0BAA0B,sBAC5B,CAAC,IACDC,uBAAAA,cAAc;~~EAAE~~;~~EAAO~~;~~EAAQ~~;~~EAAO~~;~~CAAU~~,CAAC;~~CAErD~~,MAAM,sBAA2C,CAAC;~~CAElD~~,IAAI,CAAC,qBACH,KAAK,MAAM,KAAK,WAAW;~~EACzB~~,MAAM,WAAWA,uBAAAA,cAAc;~~GAC7B~~;~~GACA~~,QAAQ,MAAM,aAAa,EAAE,EAAE;~~GAC~~/B;~~GACA~~;~~EACF~~,CAAC;~~EACD~~,KAAK,MAAM,OAAO,OAAO,KAAK,QAAQ,GACpC,oBAAoB,OAAO;~~GACzB~~,GAAG,oBAAoB;~~GACvB~~,GAAG,SAAS;~~EACd~~;~~CAEJ~~;~~CAGF~~,MAAM,eAAeC,mBAAAA,UAAU;~~EAC7B~~,WAAW,CAAC,IAAI,eAAe,OAAO,~~OAAO~~,~~SAAS~~;~~EACtD~~,GAAG,UAAU,KAAK,MAAM,MAAM,aAAa,EAAE,EAAE,OAAO,OAAO,~~OAAO~~,~~SAAS~~,CAAC;~~EAC9E~~,OAAO,OAAO,~~OAAO~~,~~SAAS~~;~~CAChC~~,CAAC;~~CAED~~,MAAM,oBAAoBC,sBAAAA,aAAa;~~EAAE~~;~~EAAO~~;~~CAAM~~,CAAC;~~CAEvD~~,~~QAAQ,UAAU,aAAa~~;~~EAC7B~~,GAAG,aAAa;~~EAEhB~~,WAAWC,uBAAAA,aAAa;~~GACtB~~;~~GACA~~;~~GACA~~;~~GACA~~;~~GACA~~;~~GACA~~;~~GACA~~;~~GACA~~;~~GACA~~;~~GACA~~;~~GACA~~;~~GACA~~;~~GACA~~;~~GACA~~;~~GACA~~;~~GACA~~,mBAAmB,qBAAqB,CAAC,SAAS,QAAQ,MAAM,CAAC;~~EACnE~~,CAAC;~~EAED~~,OAAOC,kBAAAA,SAAS;~~GACd~~;~~GACA~~;~~GACA~~;~~GACA~~;~~GACA~~;~~GACA~~;~~GACA~~;~~GACA~~,gBAAgB;~~GAChB~~;~~GACA~~;~~GACA~~;~~EACF~~,CAAC;~~CACH~~;AACF"}
1	+ {"version":3,"file":"use-styles.cjs","names":["useCckTheme","useCckClassNamesPrefix","useCckWithStaticClasses","useCckIsHeadless","useStylesTransform","resolveClassNames","resolveStyles","mergeVars","resolveStyle","getClassName","getStyle"],"sources":["../../../../src/core/styles-api/use-styles/use-styles.ts"],"sourcesContent":["import {\n Attributes,\n ClassNames,\n ClassNamesArray,\n GetStylesApiOptions,\n Styles,\n} from '../styles-api.types'\nimport { PartialVarsResolver, VarsResolver } from '../create-vars-resolver/create-vars-resolver'\nimport { useStylesTransform } from './use-transformed-styles'\nimport { resolveClassNames } from './get-class-name/resolve-class-names/resolve-class-names'\nimport { resolveStyles } from './get-style/resolve-styles/resolve-styles'\nimport { mergeVars } from './get-style/resolve-vars/merge-vars'\nimport { resolveStyle } from './get-style/resolve-style/resolve-style'\nimport { getClassName } from './get-class-name/get-class-name'\nimport { Properties } from 'csstype'\nimport { getStyle } from './get-style/get-style'\nimport { FactoryPayload } from '../../factory'\nimport { CStyleProp } from '../../box'\nimport {\n useCckClassNamesPrefix,\n useCckIsHeadless,\n useCckTheme,\n useCckWithStaticClasses,\n} from '../../config-provider'\nimport { MaybeRefOrGetter, toValue } from 'vue'\n\nexport interface UseStylesInput<Payload extends FactoryPayload> {\n name: string \| (string \| undefined)[]\n classes: Payload['stylesNames'] extends string ? Record<string, string> : never\n props: MaybeRefOrGetter<Payload['props']>\n stylesCtx?: MaybeRefOrGetter<Payload['ctx'] \| undefined>\n className?: string \| undefined\n style?: CStyleProp\n rootSelector?: Payload['stylesNames']\n unstyled?: boolean\n classNames?: ClassNames<Payload> \| ClassNamesArray<Payload>\n styles?: Styles<Payload>\n vars?: PartialVarsResolver<Payload>\n varsResolver?: VarsResolver<Payload>\n attributes?: Attributes<Payload>\n}\n\nexport type GetStylesApi<Payload extends FactoryPayload> = (\n selector: NonNullable<Payload['stylesNames']>,\n options?: GetStylesApiOptions\n) => {\n className: string\n style: Properties\n}\n\nexport function useStyles<Payload extends FactoryPayload>({\n name,\n classes,\n props,\n stylesCtx,\n className,\n style,\n rootSelector = 'root' as NonNullable<Payload['stylesNames']>,\n unstyled,\n classNames,\n styles,\n vars,\n varsResolver,\n attributes,\n}: UseStylesInput<Payload>): GetStylesApi<Payload> {\n const _theme = useCckTheme()\n const theme = _theme.value\n const classNamesPrefix = useCckClassNamesPrefix()\n const withStaticClasses = useCckWithStaticClasses()\n const headless = useCckIsHeadless()\n\n const themeNames = Array.isArray(name) ? name : [name]\n const themeName = themeNames.filter((n) => n) as string[]\n\n const { withStylesTransform, getTransformedStyles } = useStylesTransform({\n props,\n stylesCtx,\n themeName,\n theme,\n })\n\n return (selector, options) => {\n const currentProps = toValue(props) as Payload['props']\n const currentCtx = toValue(stylesCtx) as Payload['ctx'] \| undefined\n\n const resolvedClassNames = resolveClassNames({\n theme,\n classNames,\n props: currentProps,\n stylesCtx: currentCtx,\n })\n\n const resolvedThemeClassNames = themeName.map((n) =>\n resolveClassNames({\n theme,\n classNames: theme.components?.[n]?.classNames,\n props: currentProps,\n stylesCtx: currentCtx,\n })\n )\n\n const resolvedComponentStyles = withStylesTransform\n ? {}\n : resolveStyles({ theme, styles, props: currentProps, stylesCtx: currentCtx })\n\n const resolvedThemeStyles: Record<string, any> = {}\n if (!withStylesTransform) {\n for (const n of themeName) {\n const resolved = resolveStyles({\n theme,\n styles: theme.components?.[n]?.styles,\n props: currentProps,\n stylesCtx: currentCtx,\n })\n for (const key of Object.keys(resolved)) {\n resolvedThemeStyles[key] = {\n ...resolvedThemeStyles[key],\n ...resolved[key],\n }\n }\n }\n }\n\n const resolvedVars = mergeVars([\n headless ? {} : varsResolver?.(theme, currentProps, currentCtx),\n ...themeName.map((n) => theme.components?.[n]?.vars?.(theme, currentProps, currentCtx)),\n vars?.(theme, currentProps, currentCtx),\n ])\n\n const resolvedRootStyle = resolveStyle({ style, theme })\n\n return {\n ...attributes?.[selector],\n\n className: getClassName({\n theme,\n options,\n themeName,\n selector,\n classNamesPrefix,\n resolvedClassNames,\n resolvedThemeClassNames,\n classes,\n unstyled,\n className,\n rootSelector,\n props: currentProps,\n stylesCtx: currentCtx,\n withStaticClasses,\n headless,\n transformedStyles: getTransformedStyles([options?.styles, styles]),\n }),\n\n style: getStyle({\n theme,\n selector,\n options,\n props: currentProps,\n stylesCtx: currentCtx,\n rootSelector,\n withStylesTransform,\n resolvedStyles: resolvedComponentStyles,\n resolvedThemeStyles,\n resolvedVars,\n resolvedRootStyle,\n }),\n }\n }\n}\n"],"mappings":";;;;;;;;;;;AAkDA,SAAgB,UAA0C,EACxD,MACA,SACA,OACA,WACA,WACA,OACA,eAAe,QACf,UACA,YACA,QACA,MACA,cACA,cACiD;CAEjD,MAAM,QADSA,gCAAAA,YACI,CAAC,CAAC;CACrB,MAAM,mBAAmBC,gCAAAA,uBAAuB;CAChD,MAAM,oBAAoBC,gCAAAA,wBAAwB;CAClD,MAAM,WAAWC,gCAAAA,iBAAiB;CAGlC,MAAM,aADa,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAC,IAAI,EAAA,CACxB,QAAQ,MAAM,CAAC;CAE5C,MAAM,EAAE,qBAAqB,yBAAyBC,+BAAAA,mBAAmB;EACvE;EACA;EACA;EACA;CACF,CAAC;CAED,QAAQ,UAAU,YAAY;EAC5B,MAAM,gBAAA,GAAA,IAAA,QAAA,CAAuB,KAAK;EAClC,MAAM,cAAA,GAAA,IAAA,QAAA,CAAqB,SAAS;EAEpC,MAAM,qBAAqBC,4BAAAA,kBAAkB;GAC3C;GACA;GACA,OAAO;GACP,WAAW;EACb,CAAC;EAED,MAAM,0BAA0B,UAAU,KAAK,MAC7CA,4BAAAA,kBAAkB;GAChB;GACA,YAAY,MAAM,aAAa,EAAE,EAAE;GACnC,OAAO;GACP,WAAW;EACb,CAAC,CACH;EAEA,MAAM,0BAA0B,sBAC5B,CAAC,IACDC,uBAAAA,cAAc;GAAE;GAAO;GAAQ,OAAO;GAAc,WAAW;EAAW,CAAC;EAE/E,MAAM,sBAA2C,CAAC;EAClD,IAAI,CAAC,qBACH,KAAK,MAAM,KAAK,WAAW;GACzB,MAAM,WAAWA,uBAAAA,cAAc;IAC7B;IACA,QAAQ,MAAM,aAAa,EAAE,EAAE;IAC/B,OAAO;IACP,WAAW;GACb,CAAC;GACD,KAAK,MAAM,OAAO,OAAO,KAAK,QAAQ,GACpC,oBAAoB,OAAO;IACzB,GAAG,oBAAoB;IACvB,GAAG,SAAS;GACd;EAEJ;EAGF,MAAM,eAAeC,mBAAAA,UAAU;GAC7B,WAAW,CAAC,IAAI,eAAe,OAAO,cAAc,UAAU;GAC9D,GAAG,UAAU,KAAK,MAAM,MAAM,aAAa,EAAE,EAAE,OAAO,OAAO,cAAc,UAAU,CAAC;GACtF,OAAO,OAAO,cAAc,UAAU;EACxC,CAAC;EAED,MAAM,oBAAoBC,sBAAAA,aAAa;GAAE;GAAO;EAAM,CAAC;EAEvD,OAAO;GACL,GAAG,aAAa;GAEhB,WAAWC,uBAAAA,aAAa;IACtB;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,OAAO;IACP,WAAW;IACX;IACA;IACA,mBAAmB,qBAAqB,CAAC,SAAS,QAAQ,MAAM,CAAC;GACnE,CAAC;GAED,OAAOC,kBAAAA,SAAS;IACd;IACA;IACA;IACA,OAAO;IACP,WAAW;IACX;IACA;IACA,gBAAgB;IAChB;IACA;IACA;GACF,CAAC;EACH;CACF;AACF"}