@cck-ui/core 0.4.10 → 0.6.0

package/esm/components/group/group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"group.mjs","names":[],"sources":["../../../src/components/group/group.vue"],"sourcesContent":["<template>\n  <c-box v-bind=\"mergedAttrs\" :mod=\"[{ grow }, mod]\" :size=\"__size\" :variant=\"variant\">\n    <component v-for=\"(node, index) in filteredChildren\" :key=\"node.key || index\" :is=\"node\" />\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, useSlots } from 'vue'\nimport type { GroupFactory, GroupProps, GroupStylesCtx } from './group.types'\nimport { filterFalsyChildren } from './filter-falsy-children/filter-falsy-children'\nimport { createVarsResolver, getSpacing, useStyles, CBox } from '../../core'\nimport classes from './group.module.css'\n\ndefineOptions({\n  name: 'CGroup',\n})\n\nconst slots = useSlots()\n\nconst props = withDefaults(defineProps<GroupProps>(), {\n  preventGrowOverflow: true,\n  gap: 'md',\n  align: 'center',\n  justify: 'flex-start',\n  wrap: 'wrap',\n})\n\nconst {\n  classNames,\n  className,\n  style,\n  styles,\n  unstyled,\n  gap,\n  align,\n  justify,\n  wrap,\n  grow,\n  preventGrowOverflow,\n  vars,\n  variant,\n  __size,\n  mod,\n  attributes,\n  ...others\n} = props\n\nconst filteredChildren = filterFalsyChildren(slots.default?.())\nconst childrenCount = filteredChildren.length\nconst resolvedGap = getSpacing(gap)\nconst childWidth = `calc(${100 / childrenCount}% - (${resolvedGap} - ${resolvedGap} / ${childrenCount}))`\n\nconst stylesCtx: GroupStylesCtx = { childWidth }\n\nconst varsResolver = createVarsResolver<GroupFactory>(\n  (_, { grow, preventGrowOverflow, gap, align, justify, wrap }, { childWidth }) => ({\n    root: {\n      '--group-child-width': grow && preventGrowOverflow ? childWidth : undefined,\n      '--group-gap': getSpacing(gap),\n      '--group-align': align,\n      '--group-justify': justify,\n      '--group-wrap': wrap,\n    },\n  })\n)\n\nconst getStyles = useStyles<GroupFactory>({\n  name: 'Group',\n  props,\n  stylesCtx,\n  className,\n  style,\n  classes,\n  classNames,\n  styles,\n  unstyled,\n  attributes,\n  vars,\n  varsResolver,\n})\n\nconst rootAttrs = computed(() => getStyles('root'))\n\nconst mergedAttrs = computed(() => ({ ...others, ...rootAttrs.value }))\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,QAAQ,SAAS;EAEvB,MAAM,QAAQ;EAQd,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,KACA,OACA,SACA,MACA,MACA,qBACA,MACA,SACA,QACA,KACA,YACA,GAAG,WACD;EAEJ,MAAM,mBAAmB,oBAAoB,MAAM,UAAU,CAAC;EAC9D,MAAM,gBAAgB,iBAAiB;EACvC,MAAM,cAAc,WAAW,GAAG;EAClC,MAAM,aAAa,QAAQ,MAAM,cAAc,OAAO,YAAY,KAAK,YAAY,KAAK,cAAc;EAEtG,MAAM,YAA4B,EAAE,WAAW;EAE/C,MAAM,eAAe,oBAClB,GAAG,EAAE,MAAM,qBAAqB,KAAK,OAAO,SAAS,QAAQ,EAAE,kBAAkB,EAChF,MAAM;GACJ,uBAAuB,QAAQ,sBAAsB,aAAa,KAAA;GAClE,eAAe,WAAW,GAAG;GAC7B,iBAAiB;GACjB,mBAAmB;GACnB,gBAAgB;EAClB,EACF,EACF;EAEA,MAAM,YAAY,UAAwB;GACxC,MAAM;GACN;GACA;GACA;GACA;GACA,SAAA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAAC;EAED,MAAM,YAAY,eAAe,UAAU,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAE9B,gBAAgB;IAAE,GAAG;IAAQ,GAAG,UAAU;GAAM,EAAA;;;;;;;;;;;;;qBAlFlE,YAEQ,OAAA,SAFR,WAEQ,OAFO,aAAW;EAAG,KAAG,CAAA,EAAA,MAAK,OAAA,KAAI,GAAI,OAAA,GAAG;EAAI,MAAM,OAAA;EAAS,SAAS,OAAA;;yBACtB,EAAA,UAAA,IAAA,GAApD,mBAA2F,UAAA,MAAA,WAAxD,OAAA,mBAAhB,MAAM,UAAK;uBAA9B,YAA2F,wBAAR,IAAI,GAAA,EAAjC,KAAK,KAAK,OAAO,MAAA,CAAA"}
+{"version":3,"file":"group.mjs","names":[],"sources":["../../../src/components/group/group.vue"],"sourcesContent":["<template>\n  <c-box ref=\"_root\" v-bind=\"mergedAttrs\" :size=\"__size\" :variant=\"variant\">\n    <component v-for=\"(node, index) in filteredChildren\" :key=\"node.key || index\" :is=\"node\" />\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs, useSlots } from 'vue'\nimport type { GroupFactory, GroupProps, GroupStylesCtx } from './group.types'\nimport { filterFalsyChildren } from './filter-falsy-children/filter-falsy-children'\nimport { getSpacing, useStyles, CBox, useComponentProps } from '../../core'\nimport classes from './group.module.css'\nimport { varsResolver } from './group.utils'\n\ndefineOptions({\n  name: 'CGroup',\n})\n\nconst _root = ref<InstanceType<typeof CBox> | null>(null)\n\nconst attrs = useAttrs()\nconst slots = useSlots()\n\nconst rawProps = defineProps<GroupProps>()\n\nconst props = useComponentProps({\n  component: 'CGroup',\n  defaultProps: {\n    preventGrowOverflow: true,\n    gap: 'md',\n    align: 'center',\n    justify: 'flex-start',\n    wrap: 'wrap',\n  },\n  props: rawProps,\n})\n\nconst knownProps = [\n  'classNames',\n  'className',\n  'style',\n  'styles',\n  'unstyled',\n  'gap',\n  'align',\n  'justify',\n  'wrap',\n  'grow',\n  'preventGrowOverflow',\n  'vars',\n  'variant',\n  '__size',\n  'mod',\n  'attributes',\n]\n\nconst filteredChildren = filterFalsyChildren(slots.default?.())\nconst childrenCount = filteredChildren.length\nconst resolvedGap = getSpacing(props.value.gap)\nconst childWidth = `calc(${100 / childrenCount}% - (${resolvedGap} - ${resolvedGap} / ${childrenCount}))`\n\nconst stylesCtx: GroupStylesCtx = { childWidth }\n\nconst getStyles = useStyles<GroupFactory>({\n  name: 'Group',\n  props: { ...props.value, ...attrs } as GroupProps,\n  stylesCtx,\n  className: props.value.className,\n  style: props.value.style,\n  classes,\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(() => [{ grow: props.value.grow }])\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkBA,MAAM,QAAQ,IAAsC,IAAI;EAExD,MAAM,QAAQ,SAAS;EACvB,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX,cAAc;IACZ,qBAAqB;IACrB,KAAK;IACL,OAAO;IACP,SAAS;IACT,MAAM;GACR;GACA,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,mBAAmB,oBAAoB,MAAM,UAAU,CAAC;EAC9D,MAAM,gBAAgB,iBAAiB;EACvC,MAAM,cAAc,WAAW,MAAM,MAAM,GAAG;EAC9C,MAAM,aAAa,QAAQ,MAAM,cAAc,OAAO,YAAY,KAAK,YAAY,KAAK,cAAc;EAEtG,MAAM,YAA4B,EAAE,WAAW;EAE/C,MAAM,YAAY,UAAwB;GACxC,MAAM;GACN,OAAO;IAAE,GAAG,MAAM;IAAO,GAAG;GAAM;GAClC;GACA,WAAW,MAAM,MAAM;GACvB,OAAO,MAAM,MAAM;GACnB,SAAA;GACA,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB;EACF,CAAC;EAED,MAAM,UAAU,eAAe,CAAC,EAAE,MAAM,MAAM,MAAM,KAAK,CAAC,CAAC;EAE3D,MAAM,YAAY,eAAe,UAAU,MAAM,CAAC;EAElD,MAAM,cAAc,eAAe;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,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAnGC,YAEQ,OAAA,SAFR,WAEQ,EAFD,KAAI,QAAO,GAAS,OAAA,aAAW;EAAG,MAAM,OAAA;EAAS,SAAS,OAAA;;yBACX,EAAA,UAAA,IAAA,GAApD,mBAA2F,UAAA,MAAA,WAAxD,OAAA,mBAAhB,MAAM,UAAK;uBAA9B,YAA2F,wBAAR,IAAI,GAAA,EAAjC,KAAK,KAAK,OAAO,MAAA,CAAA"}

package/esm/components/group/group.utils.mjs

@@ -0,0 +1,15 @@
+"use client";
+import { getSpacing } from "../../core/utils/get-size/get-size.mjs";
+import { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
+//#region packages/@cck-ui/core/src/components/group/group.utils.ts
+const varsResolver = createVarsResolver((_, { grow, preventGrowOverflow, gap, align, justify, wrap }, { childWidth }) => ({ root: {
+	"--group-child-width": grow && preventGrowOverflow ? childWidth : void 0,
+	"--group-gap": getSpacing(gap),
+	"--group-align": align,
+	"--group-justify": justify,
+	"--group-wrap": wrap
+} }));
+//#endregion
+export { varsResolver };
+
+//# sourceMappingURL=group.utils.mjs.map

package/esm/components/group/group.utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.utils.mjs","names":[],"sources":["../../../src/components/group/group.utils.ts"],"sourcesContent":["import { createVarsResolver, getSpacing } from '../../core'\nimport { GroupFactory } from './group.types'\n\nexport const varsResolver = createVarsResolver<GroupFactory>(\n  (_, { grow, preventGrowOverflow, gap, align, justify, wrap }, { childWidth }) => ({\n    root: {\n      '--group-child-width': grow && preventGrowOverflow ? childWidth : undefined,\n      '--group-gap': getSpacing(gap),\n      '--group-align': align,\n      '--group-justify': justify,\n      '--group-wrap': wrap,\n    },\n  })\n)\n"],"mappings":";;;;AAGA,MAAa,eAAe,oBACzB,GAAG,EAAE,MAAM,qBAAqB,KAAK,OAAO,SAAS,QAAQ,EAAE,kBAAkB,EAChF,MAAM;CACJ,uBAAuB,QAAQ,sBAAsB,aAAa,KAAA;CAClE,eAAe,WAAW,GAAG;CAC7B,iBAAiB;CACjB,mBAAmB;CACnB,gBAAgB;AAClB,EACF,EACF"}

package/esm/components/group/index.mjs

@@ -1,8 +1,10 @@
 "use client";
 import { withInstall } from "../../core/utils/vue/install.mjs";
+import { withClasses, withExtend, withPropsFactory, withVarsResolver } from "../../core/utils/vue/statics.mjs";
+import group_module_default from "./group.module.mjs";
+import { varsResolver } from "./group.utils.mjs";
 import group_default from "./group.mjs";
-//#region packages/@cck-ui/core/src/components/group/index.ts
-const CGroup = withInstall(group_default);
+const CGroup = withInstall(withPropsFactory(withExtend(withVarsResolver(withClasses(group_default, group_module_default), varsResolver))));
 //#endregion
 export { CGroup, CGroup as default };
 

package/esm/components/group/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Group"],"sources":["../../../src/components/group/index.ts"],"sourcesContent":["import { SFCWithInstall, withInstall } from '../../core'\nimport Group from './group.vue'\n\nexport const CGroup: SFCWithInstall<typeof Group> = withInstall(Group)\nexport default CGroup\n\nexport * from './group.types'\n"],"mappings":";;;;AAGA,MAAa,SAAuC,YAAYA,aAAK"}
+{"version":3,"file":"index.mjs","names":["Group","classes"],"sources":["../../../src/components/group/index.ts"],"sourcesContent":["import {\n  SFCWithInstallAndClasses,\n  withClasses,\n  withExtend,\n  withInstall,\n  withPropsFactory,\n  withVarsResolver,\n} from '../../core'\nimport Group from './group.vue'\nimport classes from './group.module.css'\n\nimport { varsResolver } from './group.utils'\n\nconst GroupWithStatic = withPropsFactory(\n  withExtend(withVarsResolver(withClasses(Group, classes), varsResolver))\n)\n\nexport const CGroup: SFCWithInstallAndClasses<typeof Group, typeof classes> =\n  withInstall(GroupWithStatic)\n\nexport default CGroup\n\nexport * from './group.types'\n"],"mappings":";;;;;;AAiBA,MAAa,SACX,YALsB,iBACtB,WAAW,iBAAiB,YAAYA,eAAOC,oBAAO,GAAG,YAAY,CAAC,CAI1D,CAAe"}

package/esm/components/loader/index.mjs

@@ -1,5 +1,8 @@
 "use client";
 import { withInstall } from "../../core/utils/vue/install.mjs";
+import { withClasses, withExtend, withPropsFactory, withVarsResolver } from "../../core/utils/vue/statics.mjs";
+import loader_module_default from "./loader.module.mjs";
+import { varsResolver } from "./loader.utils.mjs";
 import loader_default from "./loader.mjs";
 import bars_default from "./loaders/bars.mjs";
 import dots_default from "./loaders/dots.mjs";
@@ -10,7 +13,7 @@ const CDefaultLoaders = {
 	dots: dots_default,
 	oval: oval_default
 };
-const CLoader = withInstall(loader_default);
+const CLoader = withInstall(withPropsFactory(withExtend(withVarsResolver(withClasses(loader_default, loader_module_default), varsResolver))));
 //#endregion
 export { CDefaultLoaders, CLoader, CLoader as default };
 

package/esm/components/loader/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Bars","Dots","Oval","Loader"],"sources":["../../../src/components/loader/index.ts"],"sourcesContent":["import { SFCWithInstall, withInstall } from '../../core'\nimport Loader from './loader.vue'\nimport { CLoadersRecord } from './loader.types.js'\n\nimport Bars from './loaders/bars.vue'\nimport Dots from './loaders/dots.vue'\nimport Oval from './loaders/oval.vue'\n\nexport const CDefaultLoaders: CLoadersRecord = {\n  bars: Bars,\n  dots: Dots,\n  oval: Oval,\n}\n\nexport const CLoader: SFCWithInstall<typeof Loader> = withInstall(Loader)\nexport default CLoader\n\nexport * from './loader.types'\n"],"mappings":";;;;;;;AAQA,MAAa,kBAAkC;CAC7C,MAAMA;CACN,MAAMC;CACN,MAAMC;AACR;AAEA,MAAa,UAAyC,YAAYC,cAAM"}
+{"version":3,"file":"index.mjs","names":["Bars","Dots","Oval","Loader","classes"],"sources":["../../../src/components/loader/index.ts"],"sourcesContent":["import {\n  SFCWithInstallAndClasses,\n  withClasses,\n  withExtend,\n  withInstall,\n  withPropsFactory,\n  withVarsResolver,\n} from '../../core'\nimport Loader from './loader.vue'\nimport { CLoadersRecord } from './loader.types.js'\nimport classes from './loader.module.css'\n\nimport Bars from './loaders/bars.vue'\nimport Dots from './loaders/dots.vue'\nimport Oval from './loaders/oval.vue'\n\nexport const CDefaultLoaders: CLoadersRecord = {\n  bars: Bars,\n  dots: Dots,\n  oval: Oval,\n}\n\nimport { varsResolver } from './loader.utils'\n\nconst LoaderWithStatic = withPropsFactory(\n  withExtend(withVarsResolver(withClasses(Loader, classes), varsResolver))\n)\n\nexport const CLoader: SFCWithInstallAndClasses<typeof Loader, typeof classes> =\n  withInstall(LoaderWithStatic)\nexport default CLoader\n\nexport * from './loader.types'\n"],"mappings":";;;;;;;;;;AAgBA,MAAa,kBAAkC;CAC7C,MAAMA;CACN,MAAMC;CACN,MAAMC;AACR;AAQA,MAAa,UACX,YALuB,iBACvB,WAAW,iBAAiB,YAAYC,gBAAQC,qBAAO,GAAG,YAAY,CAAC,CAI3D,CAAgB"}

package/esm/components/loader/loader.mjs

@@ -1,14 +1,12 @@
 "use client";
-import { getSize } from "../../core/utils/get-size/get-size.mjs";
-import { getThemeColor } from "../../core/config-provider/color-functions/get-theme-color/get-theme-color.mjs";
 import export_helper_default from "../../_virtual/_/plugin-vue/export-helper.mjs";
+import { useComponentProps } from "../../core/config-provider/use-component-props/use-component-props.mjs";
 import { CBox } from "../../core/box/index.mjs";
-import { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
 import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
-import { useLoader } from "./use-loader.mjs";
 import loader_module_default from "./loader.module.mjs";
+import { varsResolver } from "./loader.utils.mjs";
 import { CDefaultLoaders } from "./index.mjs";
-import { computed, createBlock, defineComponent, mergeProps, normalizeProps, openBlock, renderSlot, withCtx } from "vue";
+import { computed, createBlock, defineComponent, mergeProps, openBlock, ref, renderSlot, resolveDynamicComponent, useAttrs, withCtx } from "vue";
 //#region packages/@cck-ui/core/src/components/loader/loader.vue
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "CLoader",
@@ -20,8 +18,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		},
 		loaders: {
 			type: Object,
-			required: false,
-			default: () => CDefaultLoaders
+			required: false
 		},
 		size: {
 			type: [
@@ -33,8 +30,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		},
 		type: {
 			type: [String, Object],
-			required: false,
-			default: "oval"
+			required: false
 		},
 		className: {
 			type: String,
@@ -327,9 +323,18 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		}
 	},
 	setup(__props, { expose: __expose }) {
-		const props = __props;
+		const _root = ref(null);
+		const attrs = useAttrs();
+		const rawProps = __props;
+		const props = useComponentProps({
+			component: "CLoader",
+			defaultProps: {
+				loaders: CDefaultLoaders,
+				type: "oval"
+			},
+			props: rawProps
+		});
 		const knownProps = [
-			"size",
 			"color",
 			"type",
 			"vars",
@@ -339,50 +344,59 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			"styles",
 			"unstyled",
 			"loaders",
-			"variant",
 			"attributes"
 		];
-		const varsResolver = createVarsResolver((theme, { size, color }) => ({ root: {
-			"--loader-size": getSize(size, "loader-size"),
-			"--loader-color": color ? getThemeColor(color, theme) : void 0
-		} }));
 		const getStyles = useStyles({
 			name: "Loader",
-			props,
+			props: {
+				...props.value,
+				...attrs
+			},
 			classes: loader_module_default,
-			className: props.className,
-			style: props.style,
-			classNames: props.classNames,
-			styles: props.styles,
-			unstyled: props.unstyled,
-			attributes: props.attributes,
-			vars: props.vars,
+			className: props.value.className,
+			style: props.value.style,
+			classNames: props.value.classNames,
+			styles: props.value.styles,
+			unstyled: props.value.unstyled,
+			attributes: props.value.attributes,
+			vars: props.value.vars,
 			varsResolver
 		});
 		const rootAttrs = computed(() => getStyles("root"));
 		const mergedAttrs = computed(() => {
 			const others = {};
-			for (const key in props) if (!knownProps.includes(key)) others[key] = props[key];
+			const propsValue = props.value;
+			Object.keys(propsValue).forEach((key) => {
+				if (!knownProps.includes(key)) others[key] = propsValue[key];
+			});
+			const userMod = props.value.mod;
+			const mergedMod = [...Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)];
 			return {
 				...others,
+				mod: mergedMod,
 				...rootAttrs.value
 			};
 		});
-		const { _ref } = useLoader();
+		const componentAttrs = computed(() => {
+			const { className, mod, ...rest } = mergedAttrs.value;
+			return rest;
+		});
 		__expose({
 			/** @description loader html element */
-			ref: _ref,
+			root: computed(() => _root.value?.root ?? null),
 			/** @description loader size */
-			size: props.size
+			size: props.value.size
 		});
 		const __returned__ = {
+			_root,
+			attrs,
+			rawProps,
 			props,
 			knownProps,
-			varsResolver,
 			getStyles,
 			rootAttrs,
 			mergedAttrs,
-			_ref,
+			componentAttrs,
 			get CBox() {
 				return CBox;
 			}
@@ -395,18 +409,13 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	}
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-	return _ctx.$slots.default ? (openBlock(), createBlock($setup["CBox"], normalizeProps(mergeProps({ key: 0 }, $setup.mergedAttrs)), {
-		default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+	return openBlock(), createBlock($setup["CBox"], mergeProps({ ref: "_root" }, $setup.mergedAttrs), {
+		default: withCtx(() => [_ctx.$slots.default ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(), createBlock(resolveDynamicComponent($setup.props.loaders[$setup.props.type]), mergeProps({ key: 1 }, $setup.componentAttrs, {
+			variant: $props.variant,
+			size: $props.size
+		}), null, 16, ["variant", "size"]))]),
 		_: 3
-	}, 16)) : (openBlock(), createBlock($setup["CBox"], mergeProps({ key: 1 }, $setup.mergedAttrs, {
-		tag: $props.loaders[$props.type],
-		variant: $props.variant,
-		size: $props.size
-	}), null, 16, [
-		"tag",
-		"variant",
-		"size"
-	]));
+	}, 16);
 }
 var loader_default = /*#__PURE__*/ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/cck-ui/cck-ui/packages/@cck-ui/core/src/components/loader/loader.vue"]]);
 //#endregion

package/esm/components/loader/loader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"loader.mjs","names":[],"sources":["../../../src/components/loader/loader.vue"],"sourcesContent":["<template>\n  <c-box v-if=\"$slots.default\" v-bind=\"mergedAttrs\">\n    <slot />\n  </c-box>\n  <c-box v-else v-bind=\"mergedAttrs\" :tag=\"loaders[type]\" :variant=\"variant\" :size=\"size\"></c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { CBox, createVarsResolver, getSize, getThemeColor, useStyles } from '../../core'\nimport type { LoaderProps } from './loader.types'\nimport { useLoader } from './use-loader'\nimport { CDefaultLoaders, LoaderFactory } from '.'\nimport classes from './loader.module.css'\n\ndefineOptions({\n  name: 'CLoader',\n})\n\nconst props = withDefaults(defineProps<LoaderProps>(), {\n  loaders: () => CDefaultLoaders,\n  type: 'oval',\n})\n\nconst knownProps = [\n  'size',\n  'color',\n  'type',\n  'vars',\n  'className',\n  'style',\n  'classNames',\n  'styles',\n  'unstyled',\n  'loaders',\n  'variant',\n  'attributes',\n]\n\nconst varsResolver = createVarsResolver<LoaderFactory>((theme, { size, color }) => ({\n  root: {\n    '--loader-size': getSize(size, 'loader-size'),\n    '--loader-color': color ? getThemeColor(color, theme) : undefined,\n  },\n}))\n\nconst getStyles = useStyles<LoaderFactory>({\n  name: 'Loader',\n  props,\n  classes,\n  className: props.className,\n  style: props.style,\n  classNames: props.classNames,\n  styles: props.styles,\n  unstyled: props.unstyled,\n  attributes: props.attributes,\n  vars: props.vars,\n  varsResolver,\n})\n\nconst rootAttrs = computed(() => getStyles('root'))\n\nconst mergedAttrs = computed(() => {\n  const others: Record<string, any> = {}\n  for (const key in props) {\n    if (!knownProps.includes(key)) {\n      others[key] = props[key as keyof typeof props]\n    }\n  }\n  return { ...others, ...rootAttrs.value }\n})\n\nconst { _ref } = useLoader()\n\ndefineExpose({\n  /** @description loader html element */\n  ref: _ref,\n  /** @description loader size */\n  size: props.size,\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmBA,MAAM,QAAQ;EAKd,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,eAAe,oBAAmC,OAAO,EAAE,MAAM,aAAa,EAClF,MAAM;GACJ,iBAAiB,QAAQ,MAAM,aAAa;GAC5C,kBAAkB,QAAQ,cAAc,OAAO,KAAK,IAAI,KAAA;EAC1D,EACF,EAAE;EAEF,MAAM,YAAY,UAAyB;GACzC,MAAM;GACN;GACA,SAAA;GACA,WAAW,MAAM;GACjB,OAAO,MAAM;GACb,YAAY,MAAM;GAClB,QAAQ,MAAM;GACd,UAAU,MAAM;GAChB,YAAY,MAAM;GAClB,MAAM,MAAM;GACZ;EACF,CAAC;EAED,MAAM,YAAY,eAAe,UAAU,MAAM,CAAC;EAElD,MAAM,cAAc,eAAe;GACjC,MAAM,SAA8B,CAAC;GACrC,KAAK,MAAM,OAAO,OAChB,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,MAAM;GAGxB,OAAO;IAAE,GAAG;IAAQ,GAAG,UAAU;GAAM;EACzC,CAAC;EAED,MAAM,EAAE,SAAS,UAAU;EAE3B,SAAa;;GAEX,KAAK;;GAEL,MAAM,MAAM;EACd,CAAC;;;;;;;;;;;;;;;;;;;;;QA9Ec,KAAA,OAAO,WAAA,UAAA,GAApB,YAEQ,OAAA,SAAA,eAAA,WAAA,EAAA,KAAA,EAAA,GAF6B,OAAA,WAAW,CAAA,GAAA;yBACtC,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA;;yBAEV,YAAgG,OAAA,SAAhG,WAAgG,EAAA,KAAA,EAAA,GAA1E,OAAA,aAAW;EAAG,KAAK,OAAA,QAAQ,OAAA;EAAQ,SAAS,OAAA;EAAU,MAAM,OAAA"}
+{"version":3,"file":"loader.mjs","names":[],"sources":["../../../src/components/loader/loader.vue"],"sourcesContent":["<template>\n  <c-box ref=\"_root\" v-bind=\"mergedAttrs\">\n    <slot v-if=\"$slots.default\" />\n    <component\n      v-else\n      v-bind=\"componentAttrs\"\n      :is=\"props.loaders![props.type!]\"\n      :variant=\"variant\"\n      :size=\"size\"\n    ></component>\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 { LoaderProps } from './loader.types'\nimport { CDefaultLoaders, LoaderFactory } from '.'\nimport classes from './loader.module.css'\nimport { varsResolver } from './loader.utils'\n\ndefineOptions({\n  name: 'CLoader',\n})\n\nconst _root = ref<InstanceType<typeof CBox> | null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<LoaderProps>()\n\nconst props = useComponentProps({\n  component: 'CLoader',\n  defaultProps: {\n    loaders: CDefaultLoaders,\n    type: 'oval',\n  },\n  props: rawProps,\n})\n\nconst knownProps = [\n  'color',\n  'type',\n  'vars',\n  'className',\n  'style',\n  'classNames',\n  'styles',\n  'unstyled',\n  'loaders',\n  'attributes',\n]\n\nconst getStyles = useStyles<LoaderFactory>({\n  name: 'Loader',\n  props: { ...props.value, ...attrs } as LoaderProps,\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\nconst componentAttrs = computed(() => {\n  const { className, mod, ...rest } = mergedAttrs.value\n  return rest\n})\n\ndefineExpose({\n  /** @description loader html element */\n  root: computed(() => _root.value?.root ?? null),\n  /** @description loader size */\n  size: props.value.size,\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyBA,MAAM,QAAQ,IAAsC,IAAI;EAExD,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX,cAAc;IACZ,SAAS;IACT,MAAM;GACR;GACA,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,YAAY,UAAyB;GACzC,MAAM;GACN,OAAO;IAAE,GAAG,MAAM;IAAO,GAAG;GAAM;GAClC,SAAA;GACA,WAAW,MAAM,MAAM;GACvB,OAAO,MAAM,MAAM;GACnB,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB;EACF,CAAC;EAED,MAAM,YAAY,eAAe,UAAU,MAAM,CAAC;EAElD,MAAM,cAAc,eAAe;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,MAAM,iBAAiB,eAAe;GACpC,MAAM,EAAE,WAAW,KAAK,GAAG,SAAS,YAAY;GAChD,OAAO;EACT,CAAC;EAED,SAAa;;GAEX,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI;;GAE9C,MAAM,MAAM,MAAM;EACpB,CAAC;;;;;;;;;;;;;;;;;;;;;;;qBA3FC,YASQ,OAAA,SATR,WASQ,EATD,KAAI,QAAO,GAAS,OAAA,WAAW,GAAA;yBACN,CAAlB,KAAA,OAAO,UAAnB,WAA8B,KAAA,QAAA,WAAA,EAAA,KAAA,EAAA,CAAA,KAAA,UAAA,GAC9B,YAMa,wBAHN,OAAA,MAAM,QAAS,OAAA,MAAM,KAAI,GAHhC,WAMa,EAAA,KAAA,EAAA,GAJH,OAAA,gBAAc;GAErB,SAAS,OAAA;GACT,MAAM,OAAA"}

package/esm/components/loader/loader.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"loader.module.mjs","names":[],"sources":["../../../src/components/loader/loader.module.css"],"sourcesContent":[".root {\n  --loader-size-xs: 18px;\n  --loader-size-sm: 22px;\n  --loader-size-md: 36px;\n  --loader-size-lg: 44px;\n  --loader-size-xl: 58px;\n  --loader-size: var(--loader-size-md);\n  --loader-color: var(--c-primary-color-filled);\n}\n\n.root,\n.root *,\n.root::before,\n.root::after {\n  box-sizing: border-box;\n}\n\n@keyframes bars-loader-animation {\n  0% {\n    transform: scale(0.6);\n    opacity: 0;\n  }\n\n  50%,\n  100% {\n    transform: scale(1);\n  }\n}\n\n.barsLoader {\n  position: relative;\n  width: var(--loader-size);\n  height: var(--loader-size);\n  display: flex;\n  gap: calc(var(--loader-size) / 5);\n}\n\n.bar {\n  flex: 1;\n  background: var(--loader-color);\n  animation: bars-loader-animation 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;\n  border-radius: 2px;\n\n  &:nth-of-type(1) {\n    animation-delay: -240ms;\n  }\n\n  &:nth-of-type(2) {\n    animation-delay: -120ms;\n  }\n\n  &:nth-of-type(3) {\n    animation-delay: 0;\n  }\n}\n\n@keyframes loader-dots-animation {\n  0%,\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n\n  50% {\n    transform: scale(0.6);\n    opacity: 0.5;\n  }\n}\n\n.dotsLoader {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: calc(var(--loader-size) / 10);\n  position: relative;\n  width: var(--loader-size);\n  height: var(--loader-size);\n}\n\n.dot {\n  width: calc(var(--loader-size) / 3 - var(--loader-size) / 15);\n  height: calc(var(--loader-size) / 3 - var(--loader-size) / 15);\n  border-radius: 50%;\n  background: var(--loader-color);\n  animation: loader-dots-animation 0.8s infinite linear;\n\n  &:nth-child(2) {\n    animation-delay: 0.4s;\n  }\n}\n\n@keyframes oval-loader-animation {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.ovalLoader {\n  display: inline-block;\n  width: var(--loader-size);\n  height: var(--loader-size);\n\n  &::after {\n    content: '';\n    display: block;\n    width: var(--loader-size);\n    height: var(--loader-size);\n    border-radius: 10000px;\n    border-width: calc(var(--loader-size) / 8);\n    border-style: solid;\n    border-color: var(--loader-color) var(--loader-color) var(--loader-color)\n      transparent;\n    animation: oval-loader-animation 1.2s linear infinite;\n  }\n}\n"],"mappings":";;AAAA,IAAA,wBAAe;CAAC,QAAO;CAAa,cAAa;CAAa,OAAM;CAAa,yBAAwB;CAAa,cAAa;CAAa,OAAM;CAAa,yBAAwB;CAAa,cAAa;CAAa,yBAAwB;AAAY"}
+{"version":3,"file":"loader.module.mjs","names":[],"sources":["../../../src/components/loader/loader.module.css"],"sourcesContent":[".root {\n  --loader-size-xs: 18px;\n  --loader-size-sm: 22px;\n  --loader-size-md: 36px;\n  --loader-size-lg: 44px;\n  --loader-size-xl: 58px;\n  --loader-size: var(--loader-size-md);\n  --loader-color: var(--c-primary-color-filled);\n}\n\n.root,\n.root *,\n.root::before,\n.root::after {\n  box-sizing: border-box;\n}\n\n@keyframes bars-loader-animation {\n  0% {\n    transform: scale(0.6);\n    opacity: 0;\n  }\n\n  50%,\n  100% {\n    transform: scale(1);\n  }\n}\n\n.barsLoader {\n  position: relative;\n  width: var(--loader-size);\n  height: var(--loader-size);\n  display: flex;\n  gap: calc(var(--loader-size) / 5);\n}\n\n.bar {\n  flex: 1;\n  background: var(--loader-color);\n  animation: bars-loader-animation 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;\n  border-radius: 2px;\n\n  &:nth-of-type(1) {\n    animation-delay: -240ms;\n  }\n\n  &:nth-of-type(2) {\n    animation-delay: -120ms;\n  }\n\n  &:nth-of-type(3) {\n    animation-delay: 0;\n  }\n}\n\n@keyframes loader-dots-animation {\n  0%,\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n\n  50% {\n    transform: scale(0.6);\n    opacity: 0.5;\n  }\n}\n\n.dotsLoader {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: calc(var(--loader-size) / 10);\n  position: relative;\n  width: var(--loader-size);\n  height: var(--loader-size);\n}\n\n.dot {\n  width: calc(var(--loader-size) / 3 - var(--loader-size) / 15);\n  height: calc(var(--loader-size) / 3 - var(--loader-size) / 15);\n  border-radius: 50%;\n  background: var(--loader-color);\n  animation: loader-dots-animation 0.8s infinite linear;\n\n  &:nth-child(2) {\n    animation-delay: 0.4s;\n  }\n}\n\n@keyframes oval-loader-animation {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.ovalLoader {\n  display: inline-block;\n  width: var(--loader-size);\n  height: var(--loader-size);\n\n  &::after {\n    content: '';\n    display: block;\n    width: var(--loader-size);\n    height: var(--loader-size);\n    border-radius: 10000px;\n    border-width: calc(var(--loader-size) / 8);\n    border-style: solid;\n    border-color: var(--loader-color) var(--loader-color) var(--loader-color) transparent;\n    animation: oval-loader-animation 1.2s linear infinite;\n  }\n}\n"],"mappings":";;AAAA,IAAA,wBAAe;CAAC,QAAO;CAAa,cAAa;CAAa,OAAM;CAAa,yBAAwB;CAAa,cAAa;CAAa,OAAM;CAAa,yBAAwB;CAAa,cAAa;CAAa,yBAAwB;AAAY"}

package/esm/components/loader/loader.utils.mjs

@@ -0,0 +1,13 @@
+"use client";
+import { getSize } from "../../core/utils/get-size/get-size.mjs";
+import { getThemeColor } from "../../core/config-provider/color-functions/get-theme-color/get-theme-color.mjs";
+import { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
+//#region packages/@cck-ui/core/src/components/loader/loader.utils.ts
+const varsResolver = createVarsResolver((theme, { size, color }) => ({ root: {
+	"--loader-size": getSize(size, "loader-size"),
+	"--loader-color": color ? getThemeColor(color, theme) : void 0
+} }));
+//#endregion
+export { varsResolver };
+
+//# sourceMappingURL=loader.utils.mjs.map

package/esm/components/loader/loader.utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.utils.mjs","names":[],"sources":["../../../src/components/loader/loader.utils.ts"],"sourcesContent":["import { createVarsResolver, getSize, getThemeColor } from '../../core'\nimport { LoaderFactory } from './loader.types'\n\nexport const varsResolver = createVarsResolver<LoaderFactory>((theme, { size, color }) => ({\n  root: {\n    '--loader-size': getSize(size, 'loader-size'),\n    '--loader-color': color ? getThemeColor(color, theme) : undefined,\n  },\n}))\n"],"mappings":";;;;;AAGA,MAAa,eAAe,oBAAmC,OAAO,EAAE,MAAM,aAAa,EACzF,MAAM;CACJ,iBAAiB,QAAQ,MAAM,aAAa;CAC5C,kBAAkB,QAAQ,cAAc,OAAO,KAAK,IAAI,KAAA;AAC1D,EACF,EAAE"}

package/esm/components/loader/loaders/bars.mjs

@@ -1,7 +1,8 @@
 "use client";
 import export_helper_default from "../../../_virtual/_/plugin-vue/export-helper.mjs";
+import { CBox } from "../../../core/box/index.mjs";
 import loader_module_default from "../loader.module.mjs";
-import { createBlock, createElementVNode, createPropsRestProxy, defineComponent, mergeProps, normalizeClass, openBlock, resolveComponent, withCtx } from "vue";
+import { createBlock, createElementVNode, createPropsRestProxy, defineComponent, mergeProps, normalizeClass, openBlock, withCtx } from "vue";
 import cx from "clsx";
 //#region packages/@cck-ui/core/src/components/loader/loaders/bars.vue
 const _sfc_main = /*@__PURE__*/ defineComponent({
@@ -322,6 +323,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const __returned__ = {
 			others: createPropsRestProxy(__props, ["className", "attributes"]),
 			loaderClass: cx(loader_module_default.barsLoader, __props.className),
+			get CBox() {
+				return CBox;
+			},
 			get classes() {
 				return loader_module_default;
 			}
@@ -334,15 +338,14 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	}
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-	const _component_c_box = resolveComponent("c-box");
-	return openBlock(), createBlock(_component_c_box, mergeProps({ tag: "span" }, $setup.others, { class: $setup.loaderClass }), {
+	return openBlock(), createBlock($setup["CBox"], mergeProps({ tag: "span" }, $setup.others, { className: $setup.loaderClass }), {
 		default: withCtx(() => [
 			createElementVNode("span", { class: normalizeClass($setup.classes.bar) }, null, 2),
 			createElementVNode("span", { class: normalizeClass($setup.classes.bar) }, null, 2),
 			createElementVNode("span", { class: normalizeClass($setup.classes.bar) }, null, 2)
 		]),
 		_: 1
-	}, 16, ["class"]);
+	}, 16, ["className"]);
 }
 var bars_default = /*#__PURE__*/ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/cck-ui/cck-ui/packages/@cck-ui/core/src/components/loader/loaders/bars.vue"]]);
 //#endregion

package/esm/components/loader/loaders/bars.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"bars.mjs","names":[],"sources":["../../../../src/components/loader/loaders/bars.vue"],"sourcesContent":["<template>\n  <c-box tag=\"span\" v-bind=\"others\" :class=\"loaderClass\">\n    <span :class=\"classes.bar\" />\n    <span :class=\"classes.bar\" />\n    <span :class=\"classes.bar\" />\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport cx from 'clsx'\nimport type { LoaderProps } from '../loader.types'\nimport classes from '../loader.module.css'\n\nconst { className, attributes, ...others } = defineProps<LoaderProps>()\n\nconst loaderClass = cx(classes.barsLoader, className)\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAa6C,qBAAA,SAAA,CAAA,aAAA,YAAA,CAAA;gBAEzB,GAAG,sBAAQ,YAAY,QAAA,SAAA;;;;;;;;;;;;;;qBAdzC,YAIQ,kBAJR,WAIQ,EAJD,KAAI,OAAM,GAAS,OAAA,QAAM,EAAG,OAAO,OAAA,YAAW,CAAA,GAAA;yBACtB;GAA7B,mBAA6B,QAAA,EAAtB,OAAK,eAAE,OAAA,QAAQ,GAAG,EAAA,GAAA,MAAA,CAAA;GACzB,mBAA6B,QAAA,EAAtB,OAAK,eAAE,OAAA,QAAQ,GAAG,EAAA,GAAA,MAAA,CAAA;GACzB,mBAA6B,QAAA,EAAtB,OAAK,eAAE,OAAA,QAAQ,GAAG,EAAA,GAAA,MAAA,CAAA"}
+{"version":3,"file":"bars.mjs","names":[],"sources":["../../../../src/components/loader/loaders/bars.vue"],"sourcesContent":["<template>\n  <c-box tag=\"span\" v-bind=\"others\" :className=\"loaderClass\">\n    <span :class=\"classes.bar\" />\n    <span :class=\"classes.bar\" />\n    <span :class=\"classes.bar\" />\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport cx from 'clsx'\nimport { CBox } from '../../../core'\nimport type { LoaderProps } from '../loader.types'\nimport classes from '../loader.module.css'\n\nconst { className, attributes, ...others } = defineProps<LoaderProps>()\n\nconst loaderClass = cx(classes.barsLoader, className)\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAc6C,qBAAA,SAAA,CAAA,aAAA,YAAA,CAAA;gBAEzB,GAAG,sBAAQ,YAAY,QAAA,SAAA;;;;;;;;;;;;;;;;qBAfzC,YAIQ,OAAA,SAJR,WAIQ,EAJD,KAAI,OAAM,GAAS,OAAA,QAAM,EAAG,WAAW,OAAA,YAAW,CAAA,GAAA;yBAC1B;GAA7B,mBAA6B,QAAA,EAAtB,OAAK,eAAE,OAAA,QAAQ,GAAG,EAAA,GAAA,MAAA,CAAA;GACzB,mBAA6B,QAAA,EAAtB,OAAK,eAAE,OAAA,QAAQ,GAAG,EAAA,GAAA,MAAA,CAAA;GACzB,mBAA6B,QAAA,EAAtB,OAAK,eAAE,OAAA,QAAQ,GAAG,EAAA,GAAA,MAAA,CAAA"}

package/esm/components/loader/loaders/dots.mjs

@@ -1,7 +1,8 @@
 "use client";
 import export_helper_default from "../../../_virtual/_/plugin-vue/export-helper.mjs";
+import { CBox } from "../../../core/box/index.mjs";
 import loader_module_default from "../loader.module.mjs";
-import { createBlock, createElementVNode, createPropsRestProxy, defineComponent, mergeProps, normalizeClass, openBlock, resolveComponent, withCtx } from "vue";
+import { createBlock, createElementVNode, createPropsRestProxy, defineComponent, mergeProps, normalizeClass, openBlock, withCtx } from "vue";
 import cx from "clsx";
 //#region packages/@cck-ui/core/src/components/loader/loaders/dots.vue
 const _sfc_main = /*@__PURE__*/ defineComponent({
@@ -322,6 +323,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const __returned__ = {
 			others: createPropsRestProxy(__props, ["className", "attributes"]),
 			loaderClass: cx(loader_module_default.dotsLoader, __props.className),
+			get CBox() {
+				return CBox;
+			},
 			get classes() {
 				return loader_module_default;
 			}
@@ -334,15 +338,14 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	}
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-	const _component_c_box = resolveComponent("c-box");
-	return openBlock(), createBlock(_component_c_box, mergeProps({ tag: "span" }, $setup.others, { class: $setup.loaderClass }), {
+	return openBlock(), createBlock($setup["CBox"], mergeProps({ tag: "span" }, $setup.others, { className: $setup.loaderClass }), {
 		default: withCtx(() => [
 			createElementVNode("span", { class: normalizeClass($setup.classes.dot) }, null, 2),
 			createElementVNode("span", { class: normalizeClass($setup.classes.dot) }, null, 2),
 			createElementVNode("span", { class: normalizeClass($setup.classes.dot) }, null, 2)
 		]),
 		_: 1
-	}, 16, ["class"]);
+	}, 16, ["className"]);
 }
 var dots_default = /*#__PURE__*/ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/cck-ui/cck-ui/packages/@cck-ui/core/src/components/loader/loaders/dots.vue"]]);
 //#endregion

package/esm/components/loader/loaders/dots.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dots.mjs","names":[],"sources":["../../../../src/components/loader/loaders/dots.vue"],"sourcesContent":["<template>\n  <c-box tag=\"span\" v-bind=\"others\" :class=\"loaderClass\">\n    <span :class=\"classes.dot\" />\n    <span :class=\"classes.dot\" />\n    <span :class=\"classes.dot\" />\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport cx from 'clsx'\nimport type { LoaderProps } from '../loader.types'\nimport classes from '../loader.module.css'\n\nconst { className, attributes, ...others } = defineProps<LoaderProps>()\n\nconst loaderClass = cx(classes.dotsLoader, className)\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAa6C,qBAAA,SAAA,CAAA,aAAA,YAAA,CAAA;gBAEzB,GAAG,sBAAQ,YAAY,QAAA,SAAA;;;;;;;;;;;;;;qBAdzC,YAIQ,kBAJR,WAIQ,EAJD,KAAI,OAAM,GAAS,OAAA,QAAM,EAAG,OAAO,OAAA,YAAW,CAAA,GAAA;yBACtB;GAA7B,mBAA6B,QAAA,EAAtB,OAAK,eAAE,OAAA,QAAQ,GAAG,EAAA,GAAA,MAAA,CAAA;GACzB,mBAA6B,QAAA,EAAtB,OAAK,eAAE,OAAA,QAAQ,GAAG,EAAA,GAAA,MAAA,CAAA;GACzB,mBAA6B,QAAA,EAAtB,OAAK,eAAE,OAAA,QAAQ,GAAG,EAAA,GAAA,MAAA,CAAA"}
+{"version":3,"file":"dots.mjs","names":[],"sources":["../../../../src/components/loader/loaders/dots.vue"],"sourcesContent":["<template>\n  <c-box tag=\"span\" v-bind=\"others\" :className=\"loaderClass\">\n    <span :class=\"classes.dot\" />\n    <span :class=\"classes.dot\" />\n    <span :class=\"classes.dot\" />\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport cx from 'clsx'\nimport { CBox } from '../../../core'\nimport type { LoaderProps } from '../loader.types'\nimport classes from '../loader.module.css'\n\nconst { className, attributes, ...others } = defineProps<LoaderProps>()\n\nconst loaderClass = cx(classes.dotsLoader, className)\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAc6C,qBAAA,SAAA,CAAA,aAAA,YAAA,CAAA;gBAEzB,GAAG,sBAAQ,YAAY,QAAA,SAAA;;;;;;;;;;;;;;;;qBAfzC,YAIQ,OAAA,SAJR,WAIQ,EAJD,KAAI,OAAM,GAAS,OAAA,QAAM,EAAG,WAAW,OAAA,YAAW,CAAA,GAAA;yBAC1B;GAA7B,mBAA6B,QAAA,EAAtB,OAAK,eAAE,OAAA,QAAQ,GAAG,EAAA,GAAA,MAAA,CAAA;GACzB,mBAA6B,QAAA,EAAtB,OAAK,eAAE,OAAA,QAAQ,GAAG,EAAA,GAAA,MAAA,CAAA;GACzB,mBAA6B,QAAA,EAAtB,OAAK,eAAE,OAAA,QAAQ,GAAG,EAAA,GAAA,MAAA,CAAA"}

package/esm/components/loader/loaders/oval.mjs

@@ -1,7 +1,8 @@
 "use client";
 import export_helper_default from "../../../_virtual/_/plugin-vue/export-helper.mjs";
+import { CBox } from "../../../core/box/index.mjs";
 import loader_module_default from "../loader.module.mjs";
-import { createBlock, createPropsRestProxy, defineComponent, mergeProps, openBlock, resolveComponent } from "vue";
+import { createBlock, createPropsRestProxy, defineComponent, mergeProps, openBlock } from "vue";
 import cx from "clsx";
 //#region packages/@cck-ui/core/src/components/loader/loaders/oval.vue
 const _sfc_main = /*@__PURE__*/ defineComponent({
@@ -321,7 +322,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		__expose();
 		const __returned__ = {
 			others: createPropsRestProxy(__props, ["className", "attributes"]),
-			loaderClass: cx(loader_module_default.ovalLoader, __props.className)
+			loaderClass: cx(loader_module_default.ovalLoader, __props.className),
+			get CBox() {
+				return CBox;
+			}
 		};
 		Object.defineProperty(__returned__, "__isScriptSetup", {
 			enumerable: false,
@@ -331,8 +335,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	}
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-	const _component_c_box = resolveComponent("c-box");
-	return openBlock(), createBlock(_component_c_box, mergeProps({ tag: "span" }, $setup.others, { class: $setup.loaderClass }), null, 16, ["class"]);
+	return openBlock(), createBlock($setup["CBox"], mergeProps({ tag: "span" }, $setup.others, { className: $setup.loaderClass }), null, 16, ["className"]);
 }
 var oval_default = /*#__PURE__*/ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/cck-ui/cck-ui/packages/@cck-ui/core/src/components/loader/loaders/oval.vue"]]);
 //#endregion

package/esm/components/loader/loaders/oval.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"oval.mjs","names":[],"sources":["../../../../src/components/loader/loaders/oval.vue"],"sourcesContent":["<template>\n  <c-box tag=\"span\" v-bind=\"others\" :class=\"loaderClass\" />\n</template>\n\n<script setup lang=\"ts\">\nimport cx from 'clsx'\nimport type { LoaderProps } from '../loader.types'\nimport classes from '../loader.module.css'\n\nconst { className, attributes, ...others } = defineProps<LoaderProps>()\n\nconst loaderClass = cx(classes.ovalLoader, className)\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAS6C,qBAAA,SAAA,CAAA,aAAA,YAAA,CAAA;gBAEzB,GAAG,sBAAQ,YAAY,QAAA,SAAA;;;;;;;;;;;qBAVzC,YAAyD,kBAAzD,WAAyD,EAAlD,KAAI,OAAM,GAAS,OAAA,QAAM,EAAG,OAAO,OAAA,YAAW,CAAA,GAAA,MAAA,IAAA,CAAA,OAAA,CAAA"}
+{"version":3,"file":"oval.mjs","names":[],"sources":["../../../../src/components/loader/loaders/oval.vue"],"sourcesContent":["<template>\n  <c-box tag=\"span\" v-bind=\"others\" :className=\"loaderClass\" />\n</template>\n\n<script setup lang=\"ts\">\nimport cx from 'clsx'\nimport { CBox } from '../../../core'\nimport type { LoaderProps } from '../loader.types'\nimport classes from '../loader.module.css'\n\nconst { className, attributes, ...others } = defineProps<LoaderProps>()\n\nconst loaderClass = cx(classes.ovalLoader, className)\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAU6C,qBAAA,SAAA,CAAA,aAAA,YAAA,CAAA;gBAEzB,GAAG,sBAAQ,YAAY,QAAA,SAAA;;;;;;;;;;;;;qBAXzC,YAA6D,OAAA,SAA7D,WAA6D,EAAtD,KAAI,OAAM,GAAS,OAAA,QAAM,EAAG,WAAW,OAAA,YAAW,CAAA,GAAA,MAAA,IAAA,CAAA,WAAA,CAAA"}

package/esm/components/simple-grid/index.mjs

@@ -1,8 +1,9 @@
 "use client";
 import { withInstall } from "../../core/utils/vue/install.mjs";
+import { withClasses, withExtend, withPropsFactory } from "../../core/utils/vue/statics.mjs";
+import simple_grid_module_default from "./simple-grid.module.mjs";
 import simple_grid_default from "./simple-grid.mjs";
-//#region packages/@cck-ui/core/src/components/simple-grid/index.ts
-const CSimpleGrid = withInstall(simple_grid_default);
+const CSimpleGrid = withInstall(withPropsFactory(withExtend(withClasses(simple_grid_default, simple_grid_module_default))));
 //#endregion
 export { CSimpleGrid, CSimpleGrid as default };
 

package/esm/components/simple-grid/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["SimpleGrid"],"sources":["../../../src/components/simple-grid/index.ts"],"sourcesContent":["import { SFCWithInstall, withInstall } from '../../core'\nimport SimpleGrid from './simple-grid.vue'\n\nexport const CSimpleGrid: SFCWithInstall<typeof SimpleGrid> = withInstall(SimpleGrid)\nexport default CSimpleGrid\n\nexport * from './simple-grid.types'\n"],"mappings":";;;;AAGA,MAAa,cAAiD,YAAYA,mBAAU"}
+{"version":3,"file":"index.mjs","names":["SimpleGrid","classes"],"sources":["../../../src/components/simple-grid/index.ts"],"sourcesContent":["import {\n  SFCWithInstallAndClasses,\n  withClasses,\n  withExtend,\n  withInstall,\n  withPropsFactory,\n} from '../../core'\nimport SimpleGrid from './simple-grid.vue'\nimport classes from './simple-grid.module.css'\n\nconst SimpleGridWithStatic = withPropsFactory(withExtend(withClasses(SimpleGrid, classes)))\n\nexport const CSimpleGrid: SFCWithInstallAndClasses<typeof SimpleGrid, typeof classes> =\n  withInstall(SimpleGridWithStatic)\nexport default CSimpleGrid\n\nexport * from './simple-grid.types'\n"],"mappings":";;;;;AAYA,MAAa,cACX,YAH2B,iBAAiB,WAAW,YAAYA,qBAAYC,0BAAO,CAAC,CAG3E,CAAoB"}

package/esm/components/simple-grid/simple-grid.mjs

@@ -1,12 +1,13 @@
 "use client";
 import export_helper_default from "../../_virtual/_/plugin-vue/export-helper.mjs";
+import { useComponentProps } from "../../core/config-provider/use-component-props/use-component-props.mjs";
 import { responsiveStyleManager } from "../../core/responsive-style-manager/responsive-style-manager.mjs";
 import { useRandomClassName } from "../../core/box/use-random-classname/use-random-classname.mjs";
 import { CBox } from "../../core/box/index.mjs";
 import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
 import simple_grid_module_default from "./simple-grid.module.mjs";
 import { useSimpleGridStyle } from "./simple-grid-custom.mjs";
-import { computed, createBlock, createVNode, defineComponent, mergeProps, normalizeProps, onUnmounted, openBlock, ref, renderSlot, watchEffect, withCtx } from "vue";
+import { computed, createBlock, createVNode, defineComponent, mergeProps, onUnmounted, openBlock, ref, renderSlot, useAttrs, watchEffect, withCtx } from "vue";
 //#region packages/@cck-ui/core/src/components/simple-grid/simple-grid.vue
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "CSimpleGrid",
@@ -14,13 +15,11 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	props: {
 		cols: {
 			type: null,
-			required: false,
-			default: 1
+			required: false
 		},
 		spacing: {
 			type: null,
-			required: false,
-			default: "md"
+			required: false
 		},
 		verticalSpacing: {
 			type: null,
@@ -28,8 +27,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		},
 		type: {
 			type: String,
-			required: false,
-			default: "media"
+			required: false
 		},
 		minColWidth: {
 			type: null,
@@ -334,8 +332,15 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		}
 	},
 	setup(__props, { expose: __expose }) {
-		__expose();
-		const props = __props;
+		const _container = ref(null);
+		const _root = ref(null);
+		const attrs = useAttrs();
+		const rawProps = __props;
+		const props = useComponentProps({
+			component: "CSimpleGrid",
+			defaultProps: {},
+			props: rawProps
+		});
 		const knownProps = [
 			"classNames",
 			"className",
@@ -355,21 +360,27 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const getStyles = useStyles({
 			name: "SimpleGrid",
 			classes: simple_grid_module_default,
-			props,
-			className: props.className,
-			style: props.style,
-			classNames: props.classNames,
-			styles: props.styles,
-			unstyled: props.unstyled,
-			attributes: props.attributes,
-			vars: props.vars
+			props: {
+				...props.value,
+				...attrs
+			},
+			className: props.value.className,
+			style: props.value.style,
+			classNames: props.value.classNames,
+			styles: props.value.styles,
+			unstyled: props.value.unstyled,
+			attributes: props.value.attributes,
+			vars: props.value.vars
 		});
 		const responsiveClassname = useRandomClassName();
-		const autoColsAttr = props.minColWidth !== void 0 ? props.autoFlow || "auto-fill" : void 0;
+		const autoColsAttr = props.value.minColWidth !== void 0 ? props.value.autoFlow || "auto-fill" : void 0;
 		const rootAttrs = computed(() => getStyles("root", { className: responsiveClassname }));
 		const mergedRootAttrs = computed(() => {
 			const others = {};
-			for (const key in props) if (!knownProps.includes(key)) others[key] = props[key];
+			const propsValue = props.value;
+			for (const key in propsValue) if (!knownProps.includes(key)) others[key] = propsValue[key];
+			const userMod = props.value.mod;
+			[...Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)];
 			return {
 				...others,
 				...rootAttrs.value
@@ -395,7 +406,15 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		onUnmounted(() => {
 			if (currentStyleKey.value) responsiveStyleManager.unregister(currentStyleKey.value);
 		});
+		__expose({
+			root: computed(() => _root.value?.root ?? null),
+			container: computed(() => _container.value?.root ?? null)
+		});
 		const __returned__ = {
+			_container,
+			_root,
+			attrs,
+			rawProps,
 			props,
 			knownProps,
 			getStyles,
@@ -418,13 +437,19 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	}
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-	return $props.type === "container" ? (openBlock(), createBlock($setup["CBox"], normalizeProps(mergeProps({ key: 0 }, $setup.containerAttrs)), {
-		default: withCtx(() => [createVNode($setup["CBox"], mergeProps($setup.mergedRootAttrs, { "data-auto-cols": $setup.autoColsAttr }), {
+	return $props.type === "container" ? (openBlock(), createBlock($setup["CBox"], mergeProps({
+		key: 0,
+		ref: "_container"
+	}, $setup.containerAttrs), {
+		default: withCtx(() => [createVNode($setup["CBox"], mergeProps({ ref: "_root" }, $setup.mergedRootAttrs, { "data-auto-cols": $setup.autoColsAttr }), {
 			default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 			_: 3
 		}, 16, ["data-auto-cols"])]),
 		_: 3
-	}, 16)) : (openBlock(), createBlock($setup["CBox"], mergeProps({ key: 1 }, $setup.mergedRootAttrs, { "data-auto-cols": $setup.autoColsAttr }), {
+	}, 16)) : (openBlock(), createBlock($setup["CBox"], mergeProps({
+		key: 1,
+		ref: "_root"
+	}, $setup.mergedRootAttrs, { "data-auto-cols": $setup.autoColsAttr }), {
 		default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 		_: 3
 	}, 16, ["data-auto-cols"]));