@cck-ui/core 0.4.10 → 0.6.0

package/esm/components/grid/col/col.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 { normalizeNumberLikeStringProp } from "../../../core/responsive-style-manager/normalize-number-like-string-prop/normalize-number-like-string-prop.mjs";
 import { useRandomClassName } from "../../../core/box/use-random-classname/use-random-classname.mjs";
 import { CBox } from "../../../core/box/index.mjs";
 import { GRID_CONTEXT_KEY } from "../grid.constants.mjs";
 import { useColCustomStyle } from "./col-custom.mjs";
-import { computed, createBlock, defineComponent, guardReactiveProps, inject, normalizeProps, onUnmounted, openBlock, ref, renderSlot, watchEffect, withCtx } from "vue";
+import { computed, createBlock, defineComponent, inject, mergeProps, onUnmounted, openBlock, ref, renderSlot, watchEffect, withCtx } from "vue";
 import cx from "clsx";
 //#region packages/@cck-ui/core/src/components/grid/col/col.vue
 const _sfc_main = /*@__PURE__*/ defineComponent({
@@ -15,8 +16,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	props: {
 		span: {
 			type: null,
-			required: false,
-			default: 12
+			required: false
 		},
 		order: {
 			type: null,
@@ -313,8 +313,13 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		}
 	},
 	setup(__props, { expose: __expose }) {
-		__expose();
-		const props = __props;
+		const _col = ref(null);
+		const rawProps = __props;
+		const props = useComponentProps({
+			component: "CCol",
+			defaultProps: { span: 12 },
+			props: rawProps
+		});
 		const knownProps = [
 			"classNames",
 			"className",
@@ -327,29 +332,38 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			"align"
 		];
 		const gridContext = inject(GRID_CONTEXT_KEY);
+		if (!gridContext) throw new Error("[@cck-ui/col] CCol component should be wrapped inside CGrid component.");
 		const responsiveClassname = useRandomClassName();
-		const rootAttrs = computed(() => gridContext.getStyles("col", {
-			className: cx(props.className, responsiveClassname),
-			style: props.style,
-			classNames: props.classNames,
-			styles: props.styles
-		}));
+		const rootAttrs = computed(() => {
+			return gridContext.getStyles("col", {
+				className: cx(props.value.className, responsiveClassname),
+				style: props.value.style,
+				classNames: props.value.classNames,
+				styles: props.value.styles
+			});
+		});
 		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 _offset = normalizeNumberLikeStringProp(props.offset);
-		const _order = normalizeNumberLikeStringProp(props.order);
+		const _offset = normalizeNumberLikeStringProp(props.value.offset);
+		const _order = normalizeNumberLikeStringProp(props.value.order);
 		const colStyle = useColCustomStyle({
 			selector: responsiveClassname,
-			align: props.align,
+			align: props.value.align,
 			offset: _offset,
 			order: _order,
-			span: props.span
+			span: props.value.span
 		}, gridContext);
 		const currentStyleKey = ref(null);
 		watchEffect(() => {
@@ -366,7 +380,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		onUnmounted(() => {
 			if (currentStyleKey.value) responsiveStyleManager.unregister(currentStyleKey.value);
 		});
+		__expose({ root: computed(() => _col.value?.root ?? null) });
 		const __returned__ = {
+			_col,
+			rawProps,
 			props,
 			knownProps,
 			gridContext,
@@ -389,7 +406,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	}
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-	return openBlock(), createBlock($setup["CBox"], normalizeProps(guardReactiveProps($setup.mergedAttrs)), {
+	return openBlock(), createBlock($setup["CBox"], mergeProps({ ref: "_col" }, $setup.mergedAttrs), {
 		default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 		_: 3
 	}, 16);

package/esm/components/grid/col/col.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"col.mjs","names":[],"sources":["../../../../src/components/grid/col/col.vue"],"sourcesContent":["<template>\n  <c-box v-bind=\"mergedAttrs\">\n    <slot />\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport cx from 'clsx'\nimport { computed, inject, onUnmounted, ref, watchEffect } from 'vue'\nimport {\n  CBox,\n  normalizeNumberLikeStringProp,\n  responsiveStyleManager,\n  useRandomClassName,\n} from '../../../core'\nimport type { ColProps } from './col.types'\nimport { useColCustomStyle } from './col-custom'\nimport { GridContextValue } from '../grid.context'\nimport { GRID_CONTEXT_KEY } from '../grid.constants'\n\ndefineOptions({\n  name: 'CCol',\n})\n\nconst props = withDefaults(defineProps<ColProps>(), {\n  span: 12,\n})\n\nconst knownProps = [\n  'classNames',\n  'className',\n  'style',\n  'styles',\n  'vars',\n  'span',\n  'order',\n  'offset',\n  'align',\n]\n\nconst gridContext = inject(GRID_CONTEXT_KEY) as GridContextValue\n\nconst responsiveClassname = useRandomClassName()\n\nconst rootAttrs = computed(() =>\n  gridContext.getStyles('col', {\n    className: cx(props.className, responsiveClassname),\n    style: props.style,\n    classNames: props.classNames,\n    styles: props.styles,\n  })\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 _offset = normalizeNumberLikeStringProp(props.offset)\nconst _order = normalizeNumberLikeStringProp(props.order)\nconst colStyle = useColCustomStyle(\n  {\n    selector: responsiveClassname,\n    align: props.align,\n    offset: _offset,\n    order: _order,\n    span: props.span,\n  },\n  gridContext\n)\n\nconst currentStyleKey = ref<string | null>(null)\nwatchEffect(() => {\n  const cssText = colStyle.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</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwBA,MAAM,QAAQ;EAId,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,cAAc,OAAO,gBAAgB;EAE3C,MAAM,sBAAsB,mBAAmB;EAE/C,MAAM,YAAY,eAChB,YAAY,UAAU,OAAO;GAC3B,WAAW,GAAG,MAAM,WAAW,mBAAmB;GAClD,OAAO,MAAM;GACb,YAAY,MAAM;GAClB,QAAQ,MAAM;EAChB,CAAC,CACH;EACA,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,UAAU,8BAA8B,MAAM,MAAM;EAC1D,MAAM,SAAS,8BAA8B,MAAM,KAAK;EACxD,MAAM,WAAW,kBACf;GACE,UAAU;GACV,OAAO,MAAM;GACb,QAAQ;GACR,OAAO;GACP,MAAM,MAAM;EACd,GACA,WACF;EAEA,MAAM,kBAAkB,IAAmB,IAAI;EAC/C,kBAAkB;GAChB,MAAM,UAAU,SAAS,MAAM;GAC/B,IAAI,SAAS;IACX,MAAM,SAAS,uBAAuB,SAAS,OAAO;IACtD,IAAI,gBAAgB,SAAS,gBAAgB,UAAU,QACrD,uBAAuB,WAAW,gBAAgB,KAAK;IAEzD,gBAAgB,QAAQ;GAC1B,OAAO,IAAI,gBAAgB,OAAO;IAChC,uBAAuB,WAAW,gBAAgB,KAAK;IACvD,gBAAgB,QAAQ;GAC1B;EACF,CAAC;EACD,kBAAkB;GAChB,IAAI,gBAAgB,OAClB,uBAAuB,WAAW,gBAAgB,KAAK;EAE3D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;qBA5FC,YAEQ,OAAA,SAAA,eAAA,mBAFO,OAAA,WAAW,CAAA,GAAA;yBAChB,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}
+{"version":3,"file":"col.mjs","names":[],"sources":["../../../../src/components/grid/col/col.vue"],"sourcesContent":["<template>\n  <c-box ref=\"_col\" v-bind=\"mergedAttrs\">\n    <slot />\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport cx from 'clsx'\nimport { computed, inject, onUnmounted, ref, watchEffect } from 'vue'\nimport {\n  CBox,\n  normalizeNumberLikeStringProp,\n  responsiveStyleManager,\n  useComponentProps,\n  useRandomClassName,\n} from '../../../core'\nimport type { ColProps } from './col.types'\nimport { useColCustomStyle } from './col-custom'\nimport { GRID_CONTEXT_KEY } from '../grid.constants'\n\ndefineOptions({\n  name: 'CCol',\n})\n\nconst _col = ref<InstanceType<typeof CBox> | null>(null)\n\nconst rawProps = defineProps<ColProps>()\n\nconst props = useComponentProps({\n  component: 'CCol',\n  defaultProps: {\n    span: 12,\n  },\n  props: rawProps,\n})\n\nconst knownProps = [\n  'classNames',\n  'className',\n  'style',\n  'styles',\n  'vars',\n  'span',\n  'order',\n  'offset',\n  'align',\n]\n\nconst gridContext = inject(GRID_CONTEXT_KEY)\n\nif (!gridContext) {\n  throw new Error('[@cck-ui/col] CCol component should be wrapped inside CGrid component.')\n}\n\nconst responsiveClassname = useRandomClassName()\n\nconst rootAttrs = computed(() => {\n  return gridContext.getStyles('col', {\n    className: cx(props.value.className, responsiveClassname),\n    style: props.value.style,\n    classNames: props.value.classNames,\n    styles: props.value.styles,\n  })\n})\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 _offset = normalizeNumberLikeStringProp(props.value.offset)\nconst _order = normalizeNumberLikeStringProp(props.value.order)\nconst colStyle = useColCustomStyle(\n  {\n    selector: responsiveClassname,\n    align: props.value.align,\n    offset: _offset,\n    order: _order,\n    span: props.value.span,\n  },\n  gridContext\n)\n\nconst currentStyleKey = ref<string | null>(null)\nwatchEffect(() => {\n  const cssText = colStyle.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(() => _col.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwBA,MAAM,OAAO,IAAsC,IAAI;EAEvD,MAAM,WAAW;EAEjB,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX,cAAc,EACZ,MAAM,GACR;GACA,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,cAAc,OAAO,gBAAgB;EAE3C,IAAI,CAAC,aACH,MAAM,IAAI,MAAM,wEAAwE;EAG1F,MAAM,sBAAsB,mBAAmB;EAE/C,MAAM,YAAY,eAAe;GAC/B,OAAO,YAAY,UAAU,OAAO;IAClC,WAAW,GAAG,MAAM,MAAM,WAAW,mBAAmB;IACxD,OAAO,MAAM,MAAM;IACnB,YAAY,MAAM,MAAM;IACxB,QAAQ,MAAM,MAAM;GACtB,CAAC;EACH,CAAC;EAED,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,UAAU,8BAA8B,MAAM,MAAM,MAAM;EAChE,MAAM,SAAS,8BAA8B,MAAM,MAAM,KAAK;EAC9D,MAAM,WAAW,kBACf;GACE,UAAU;GACV,OAAO,MAAM,MAAM;GACnB,QAAQ;GACR,OAAO;GACP,MAAM,MAAM,MAAM;EACpB,GACA,WACF;EAEA,MAAM,kBAAkB,IAAmB,IAAI;EAC/C,kBAAkB;GAChB,MAAM,UAAU,SAAS,MAAM;GAC/B,IAAI,SAAS;IACX,MAAM,SAAS,uBAAuB,SAAS,OAAO;IACtD,IAAI,gBAAgB,SAAS,gBAAgB,UAAU,QACrD,uBAAuB,WAAW,gBAAgB,KAAK;IAEzD,gBAAgB,QAAQ;GAC1B,OAAO,IAAI,gBAAgB,OAAO;IAChC,uBAAuB,WAAW,gBAAgB,KAAK;IACvD,gBAAgB,QAAQ;GAC1B;EACF,CAAC;EACD,kBAAkB;GAChB,IAAI,gBAAgB,OAClB,uBAAuB,WAAW,gBAAgB,KAAK;EAE3D,CAAC;EAED,SAAa,EACX,MAAM,eAAe,KAAK,OAAO,QAAQ,IAAI,EAC/C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;qBAhHC,YAEQ,OAAA,SAFR,WAEQ,EAFD,KAAI,OAAM,GAAS,OAAA,WAAW,GAAA;yBAC3B,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/esm/components/grid/grid.constants.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"grid.constants.mjs","names":[],"sources":["../../../src/components/grid/grid.constants.ts"],"sourcesContent":["import { InjectionKey } from 'vue'\nimport { GridContextValue } from './grid.context'\n\nexport const GRID_CONTEXT_KEY: InjectionKey<GridContextValue> =\n  Symbol('GridContext')\n\nexport const DEFAULT_COLUMNS = 12\n"],"mappings":";;AAGA,MAAa,mBACX,OAAO,aAAa"}
+{"version":3,"file":"grid.constants.mjs","names":[],"sources":["../../../src/components/grid/grid.constants.ts"],"sourcesContent":["import { InjectionKey } from 'vue'\nimport { GridContextValue } from './grid.context'\n\nexport const GRID_CONTEXT_KEY: InjectionKey<GridContextValue> = Symbol('GridContext')\n\nexport const DEFAULT_COLUMNS = 12\n"],"mappings":";;AAGA,MAAa,mBAAmD,OAAO,aAAa"}

package/esm/components/grid/grid.mjs

@@ -1,15 +1,16 @@
 "use client";
 import { isNumberLike } from "../../core/utils/is-number-like/is-number-like.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 { 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 { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
 import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
 import { useGridCustomStyle } from "./grid-custom.mjs";
 import { GRID_CONTEXT_KEY } from "./grid.constants.mjs";
 import grid_module_default from "./grid.module.mjs";
-import { computed, createBlock, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, onUnmounted, openBlock, provide, ref, renderSlot, watchEffect, withCtx } from "vue";
+import { varsResolver } from "./grid.utils.mjs";
+import { computed, createBlock, createVNode, defineComponent, mergeProps, onUnmounted, openBlock, provide, ref, renderSlot, useAttrs, watchEffect, withCtx } from "vue";
 //#region packages/@cck-ui/core/src/components/grid/grid.vue
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "CGrid",
@@ -17,8 +18,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	props: {
 		gap: {
 			type: null,
-			required: false,
-			default: "md"
+			required: false
 		},
 		rowGap: {
 			type: null,
@@ -42,8 +42,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		},
 		columns: {
 			type: [Number, String],
-			required: false,
-			default: 12
+			required: false
 		},
 		overflow: {
 			type: null,
@@ -348,8 +347,19 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		}
 	},
 	setup(__props, { expose: __expose }) {
-		__expose();
-		const props = __props;
+		const _container = ref(null);
+		const _root = ref(null);
+		const _inner = ref(null);
+		const attrs = useAttrs();
+		const rawProps = __props;
+		const props = useComponentProps({
+			component: "CGrid",
+			defaultProps: {
+				columns: 12,
+				gap: "md"
+			},
+			props: rawProps
+		});
 		const knownProps = [
 			"classNames",
 			"className",
@@ -368,31 +378,35 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			"type",
 			"attributes"
 		];
-		const varsResolver = createVarsResolver((_, { justify, align, overflow }) => ({ root: {
-			"--grid-align": align,
-			"--grid-justify": justify,
-			"--grid-overflow": overflow
-		} }));
 		const getStyles = useStyles({
 			name: "Grid",
 			classes: 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,
 			varsResolver
 		});
 		const responsiveClassname = useRandomClassName();
 		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;
+			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
 			};
 		});
@@ -417,16 +431,16 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		onUnmounted(() => {
 			if (currentStyleKey.value) responsiveStyleManager.unregister(currentStyleKey.value);
 		});
-		const _breakpoints = computed(() => props.breakpoints);
+		const _breakpoints = computed(() => props.value.breakpoints);
 		const _columns = computed(() => {
-			if (!isNumberLike(props.columns)) {
-				console.warn(`[C-Grid] columns should be number or number-like string, got ${props.columns}. Fallback to default columns 12.`);
+			if (!isNumberLike(props.value.columns)) {
+				console.warn(`[C-Grid] columns should be number or number-like string, got ${props.value.columns}. Fallback to default columns 12.`);
 				return 12;
 			}
-			return Number(props.columns);
+			return Number(props.value.columns);
 		});
-		const _grow = computed(() => props.grow);
-		const _type = computed(() => props.type);
+		const _grow = computed(() => props.value.grow);
+		const _type = computed(() => props.value.type);
 		const context = {
 			getStyles,
 			get breakpoints() {
@@ -443,10 +457,19 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			}
 		};
 		provide(GRID_CONTEXT_KEY, context);
+		__expose({
+			container: computed(() => _container.value?.root ?? null),
+			root: computed(() => _root.value?.root ?? null),
+			inner: computed(() => _inner.value?.root ?? null)
+		});
 		const __returned__ = {
+			_container,
+			_root,
+			_inner,
+			attrs,
+			rawProps,
 			props,
 			knownProps,
-			varsResolver,
 			getStyles,
 			responsiveClassname,
 			rootAttrs,
@@ -472,17 +495,23 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	}
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-	return $props.type === "container" && $props.breakpoints ? (openBlock(), createBlock($setup["CBox"], normalizeProps(mergeProps({ key: 0 }, $setup.containerAttrs)), {
-		default: withCtx(() => [createVNode($setup["CBox"], normalizeProps(guardReactiveProps($setup.mergedRootAttrs)), {
-			default: withCtx(() => [createVNode($setup["CBox"], normalizeProps(guardReactiveProps($setup.innerAttrs)), {
+	return $props.type === "container" && $props.breakpoints ? (openBlock(), createBlock($setup["CBox"], mergeProps({
+		key: 0,
+		ref: "_container"
+	}, $setup.containerAttrs), {
+		default: withCtx(() => [createVNode($setup["CBox"], mergeProps({ ref: "_root" }, $setup.mergedRootAttrs), {
+			default: withCtx(() => [createVNode($setup["CBox"], mergeProps({ ref: "_inner" }, $setup.innerAttrs), {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
 			}, 16)]),
 			_: 3
 		}, 16)]),
 		_: 3
-	}, 16)) : (openBlock(), createBlock($setup["CBox"], normalizeProps(mergeProps({ key: 1 }, $setup.mergedRootAttrs)), {
-		default: withCtx(() => [createVNode($setup["CBox"], normalizeProps(guardReactiveProps($setup.innerAttrs)), {
+	}, 16)) : (openBlock(), createBlock($setup["CBox"], mergeProps({
+		key: 1,
+		ref: "_root"
+	}, $setup.mergedRootAttrs), {
+		default: withCtx(() => [createVNode($setup["CBox"], mergeProps({ ref: "_inner" }, $setup.innerAttrs), {
 			default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 			_: 3
 		}, 16)]),

package/esm/components/grid/grid.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"grid.mjs","names":[],"sources":["../../../src/components/grid/grid.vue"],"sourcesContent":["<template>\n  <c-box v-if=\"type === 'container' && breakpoints\" v-bind=\"containerAttrs\">\n    <c-box v-bind=\"mergedRootAttrs\">\n      <c-box v-bind=\"innerAttrs\">\n        <slot />\n      </c-box>\n    </c-box>\n  </c-box>\n  <template v-else>\n    <c-box v-bind=\"mergedRootAttrs\">\n      <c-box v-bind=\"innerAttrs\">\n        <slot />\n      </c-box>\n    </c-box>\n  </template>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, onUnmounted, provide, ref, watchEffect } from 'vue'\nimport {\n  CBox,\n  createVarsResolver,\n  isNumberLike,\n  responsiveStyleManager,\n  useRandomClassName,\n  useStyles,\n} from '../../core'\nimport { useGridCustomStyle } from './grid-custom'\nimport { DEFAULT_COLUMNS, GRID_CONTEXT_KEY } from './grid.constants'\nimport { GridContextValue } from './grid.context'\nimport type { GridFactory, GridProps } from './grid.types'\nimport classes from './grid.module.css'\n\ndefineOptions({\n  name: 'CGrid',\n})\n\nconst props = withDefaults(defineProps<GridProps>(), {\n  columns: DEFAULT_COLUMNS,\n  gap: 'md',\n})\n\nconst knownProps = [\n  'classNames',\n  'className',\n  'style',\n  'styles',\n  'unstyled',\n  'vars',\n  'grow',\n  'gap',\n  'rowGap',\n  'columnGap',\n  'columns',\n  'align',\n  'justify',\n  'breakpoints',\n  'type',\n  'attributes',\n]\n\nconst varsResolver = createVarsResolver<GridFactory>((_, { justify, align, overflow }) => ({\n  root: {\n    '--grid-align': align,\n    '--grid-justify': justify,\n    '--grid-overflow': overflow,\n  },\n}))\n\nconst getStyles = useStyles<GridFactory>({\n  name: 'Grid',\n  classes,\n  props,\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 responsiveClassname = useRandomClassName()\n\nconst rootAttrs = computed(() => getStyles('root', { className: responsiveClassname }))\nconst mergedRootAttrs = 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 innerAttrs = computed(() => getStyles('inner'))\n\nconst containerAttrs = computed(() => getStyles('container'))\n\nconst gridStyle = useGridCustomStyle({\n  selector: responsiveClassname,\n  ...props,\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\nconst _breakpoints = computed(() => props.breakpoints)\nconst _columns = computed(() => {\n  if (!isNumberLike(props.columns)) {\n    console.warn(\n      `[C-Grid] columns should be number or number-like string, got ${props.columns}. Fallback to default columns ${DEFAULT_COLUMNS}.`\n    )\n    return DEFAULT_COLUMNS\n  }\n\n  return Number(props.columns)\n})\nconst _grow = computed(() => props.grow)\nconst _type = computed(() => props.type)\n\nconst context: GridContextValue = {\n  getStyles,\n  get breakpoints() {\n    return _breakpoints.value\n  },\n  get columns() {\n    return _columns.value\n  },\n  get grow() {\n    return _grow.value\n  },\n  get type() {\n    return _type.value\n  },\n}\n\nprovide(GRID_CONTEXT_KEY, context)\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"grid.mjs","names":[],"sources":["../../../src/components/grid/grid.vue"],"sourcesContent":["<template>\n  <c-box ref=\"_container\" v-if=\"type === 'container' && breakpoints\" v-bind=\"containerAttrs\">\n    <c-box ref=\"_root\" v-bind=\"mergedRootAttrs\">\n      <c-box ref=\"_inner\" v-bind=\"innerAttrs\">\n        <slot />\n      </c-box>\n    </c-box>\n  </c-box>\n  <template v-else>\n    <c-box ref=\"_root\" v-bind=\"mergedRootAttrs\">\n      <c-box ref=\"_inner\" v-bind=\"innerAttrs\">\n        <slot />\n      </c-box>\n    </c-box>\n  </template>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, onUnmounted, provide, ref, useAttrs, watchEffect } from 'vue'\nimport {\n  CBox,\n  isNumberLike,\n  responsiveStyleManager,\n  useComponentProps,\n  useRandomClassName,\n  useStyles,\n} from '../../core'\nimport { useGridCustomStyle } from './grid-custom'\nimport { DEFAULT_COLUMNS, GRID_CONTEXT_KEY } from './grid.constants'\nimport { GridContextValue } from './grid.context'\nimport type { GridFactory, GridProps } from './grid.types'\nimport classes from './grid.module.css'\nimport { varsResolver } from './grid.utils'\n\ndefineOptions({\n  name: 'CGrid',\n})\n\nconst _container = ref<InstanceType<typeof CBox> | null>(null)\nconst _root = ref<InstanceType<typeof CBox> | null>(null)\nconst _inner = ref<InstanceType<typeof CBox> | null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<GridProps>()\n\nconst props = useComponentProps({\n  component: 'CGrid',\n  defaultProps: {\n    columns: DEFAULT_COLUMNS,\n    gap: 'md',\n  },\n  props: rawProps,\n})\n\nconst knownProps = [\n  'classNames',\n  'className',\n  'style',\n  'styles',\n  'unstyled',\n  'vars',\n  'grow',\n  'gap',\n  'rowGap',\n  'columnGap',\n  'columns',\n  'align',\n  'justify',\n  'breakpoints',\n  'type',\n  'attributes',\n]\n\nconst getStyles = useStyles<GridFactory>({\n  name: 'Grid',\n  classes,\n  props: { ...props.value, ...attrs } as GridProps,\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 responsiveClassname = useRandomClassName()\n\nconst rootAttrs = computed(() => getStyles('root', { className: responsiveClassname }))\n\nconst mergedRootAttrs = computed(() => {\n  const others: Record<string, any> = {}\n  const propsValue = props.value\n  Object.keys(propsValue).forEach((key) => {\n    if (!knownProps.includes(key)) {\n      others[key] = propsValue[key as keyof typeof propsValue]\n    }\n  })\n  const userMod = props.value.mod\n  const mergedMod = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n  return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\nconst innerAttrs = computed(() => getStyles('inner'))\n\nconst containerAttrs = computed(() => getStyles('container'))\n\nconst gridStyle = useGridCustomStyle({\n  selector: responsiveClassname,\n  ...props,\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\nconst _breakpoints = computed(() => props.value.breakpoints)\nconst _columns = computed(() => {\n  if (!isNumberLike(props.value.columns)) {\n    console.warn(\n      `[C-Grid] columns should be number or number-like string, got ${props.value.columns}. Fallback to default columns ${DEFAULT_COLUMNS}.`\n    )\n    return DEFAULT_COLUMNS\n  }\n\n  return Number(props.value.columns)\n})\nconst _grow = computed(() => props.value.grow)\nconst _type = computed(() => props.value.type)\n\nconst context: GridContextValue = {\n  getStyles,\n  get breakpoints() {\n    return _breakpoints.value\n  },\n  get columns() {\n    return _columns.value\n  },\n  get grow() {\n    return _grow.value\n  },\n  get type() {\n    return _type.value\n  },\n}\n\nprovide(GRID_CONTEXT_KEY, context)\n\ndefineExpose({\n  container: computed(() => _container.value?.root ?? null),\n  root: computed(() => _root.value?.root ?? null),\n  inner: computed(() => _inner.value?.root ?? null),\n})\n</script>\n"],"mappings":"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"}

package/esm/components/grid/grid.utils.mjs

@@ -0,0 +1,12 @@
+"use client";
+import { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
+//#region packages/@cck-ui/core/src/components/grid/grid.utils.ts
+const varsResolver = createVarsResolver((_, { justify, align, overflow }) => ({ root: {
+	"--grid-align": align,
+	"--grid-justify": justify,
+	"--grid-overflow": overflow
+} }));
+//#endregion
+export { varsResolver };
+
+//# sourceMappingURL=grid.utils.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grid.utils.mjs","names":[],"sources":["../../../src/components/grid/grid.utils.ts"],"sourcesContent":["import { createVarsResolver } from '../../core'\nimport { GridFactory } from './grid.types'\n\nexport const varsResolver = createVarsResolver<GridFactory>((_, { justify, align, overflow }) => ({\n  root: {\n    '--grid-align': align,\n    '--grid-justify': justify,\n    '--grid-overflow': overflow,\n  },\n}))\n"],"mappings":";;;AAGA,MAAa,eAAe,oBAAiC,GAAG,EAAE,SAAS,OAAO,gBAAgB,EAChG,MAAM;CACJ,gBAAgB;CAChB,kBAAkB;CAClB,mBAAmB;AACrB,EACF,EAAE"}

package/esm/components/grid/index.mjs

@@ -1,10 +1,14 @@
 "use client";
 import { withInstall } from "../../core/utils/vue/install.mjs";
+import { withClasses, withExtend, withPropsFactory, withVarsResolver } from "../../core/utils/vue/statics.mjs";
+import { varsResolver } from "../button/button.utils.mjs";
+import grid_module_default from "./grid.module.mjs";
 import grid_default from "./grid.mjs";
 import col_default from "./col/col.mjs";
 //#region packages/@cck-ui/core/src/components/grid/index.ts
-const CCol = withInstall(col_default);
-const CGrid = withInstall(grid_default, { Col: col_default });
+const GridWithStatic = withPropsFactory(withExtend(withVarsResolver(withClasses(grid_default, grid_module_default), varsResolver)));
+const CCol = withInstall(withPropsFactory(withExtend(withClasses(col_default, grid_module_default))));
+const CGrid = withInstall(GridWithStatic, { Col: col_default });
 //#endregion
 export { CCol, CGrid, CGrid as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Col","Grid"],"sources":["../../../src/components/grid/index.ts"],"sourcesContent":["import { type SFCWithInstall, withInstall } from '../../core'\nimport Grid from './grid.vue'\nimport Col from './col/col.vue'\n\nexport const CCol: SFCWithInstall<typeof Col> = withInstall(Col)\nexport const CGrid: SFCWithInstall<typeof Grid> & { Col: typeof Col } = withInstall(Grid, { Col })\nexport default CGrid\n\nexport * from './col/col.types.js'\nexport * from './grid.types.js'\n"],"mappings":";;;;;AAIA,MAAa,OAAmC,YAAYA,WAAG;AAC/D,MAAa,QAA2D,YAAYC,cAAM,EAAE,KAAA,YAAI,CAAC"}
+{"version":3,"file":"index.mjs","names":["Grid","classes","Col"],"sources":["../../../src/components/grid/index.ts"],"sourcesContent":["import {\n  type SFCWithInstallAndClasses,\n  withClasses,\n  withExtend,\n  withInstall,\n  withPropsFactory,\n  withVarsResolver,\n} from '../../core'\nimport Grid from './grid.vue'\nimport Col from './col/col.vue'\nimport classes from './grid.module.css'\nimport { varsResolver } from '../button/button.utils'\n\nconst GridWithStatic = withPropsFactory(\n  withExtend(withVarsResolver(withClasses(Grid, classes), varsResolver))\n)\nconst ColWithStatic = withPropsFactory(withExtend(withClasses(Col, classes)))\n\nexport const CCol: SFCWithInstallAndClasses<typeof Col> = withInstall(ColWithStatic)\nexport const CGrid: SFCWithInstallAndClasses<typeof Grid, typeof classes> & { Col: typeof Col } =\n  withInstall(GridWithStatic, { Col })\nexport default CGrid\n\nexport * from './col/col.types'\nexport * from './grid.types'\n"],"mappings":";;;;;;;;AAaA,MAAM,iBAAiB,iBACrB,WAAW,iBAAiB,YAAYA,cAAMC,mBAAO,GAAG,YAAY,CAAC,CACvE;AAGA,MAAa,OAA6C,YAFpC,iBAAiB,WAAW,YAAYC,aAAKD,mBAAO,CAAC,CAEL,CAAa;AACnF,MAAa,QACX,YAAY,gBAAgB,EAAE,KAAA,YAAI,CAAC"}

package/esm/components/group/group.mjs

@@ -1,12 +1,13 @@
 "use client";
 import { getSpacing } from "../../core/utils/get-size/get-size.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 { filterFalsyChildren } from "./filter-falsy-children/filter-falsy-children.mjs";
 import group_module_default from "./group.module.mjs";
-import { Fragment, computed, createBlock, createElementBlock, defineComponent, mergeProps, openBlock, renderList, resolveDynamicComponent, useSlots, withCtx } from "vue";
+import { varsResolver } from "./group.utils.mjs";
+import { Fragment, computed, createBlock, createElementBlock, defineComponent, mergeProps, openBlock, ref, renderList, resolveDynamicComponent, useAttrs, useSlots, withCtx } from "vue";
 //#region packages/@cck-ui/core/src/components/group/group.vue
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "CGroup",
@@ -18,23 +19,19 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		},
 		justify: {
 			type: null,
-			required: false,
-			default: "flex-start"
+			required: false
 		},
 		align: {
 			type: null,
-			required: false,
-			default: "center"
+			required: false
 		},
 		wrap: {
 			type: null,
-			required: false,
-			default: "wrap"
+			required: false
 		},
 		gap: {
 			type: null,
-			required: false,
-			default: "md"
+			required: false
 		},
 		grow: {
 			type: Boolean,
@@ -42,8 +39,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		},
 		preventGrowOverflow: {
 			type: Boolean,
-			required: false,
-			default: true
+			required: false
 		},
 		className: {
 			type: String,
@@ -332,69 +328,94 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		}
 	},
 	setup(__props, { expose: __expose }) {
-		__expose();
+		const _root = ref(null);
+		const attrs = useAttrs();
 		const slots = useSlots();
-		const props = __props;
-		const { classNames, className, style, styles, unstyled, gap, align, justify, wrap, grow, preventGrowOverflow, vars, variant, __size, mod, attributes, ...others } = props;
+		const rawProps = __props;
+		const props = useComponentProps({
+			component: "CGroup",
+			defaultProps: {
+				preventGrowOverflow: true,
+				gap: "md",
+				align: "center",
+				justify: "flex-start",
+				wrap: "wrap"
+			},
+			props: rawProps
+		});
+		const knownProps = [
+			"classNames",
+			"className",
+			"style",
+			"styles",
+			"unstyled",
+			"gap",
+			"align",
+			"justify",
+			"wrap",
+			"grow",
+			"preventGrowOverflow",
+			"vars",
+			"variant",
+			"__size",
+			"mod",
+			"attributes"
+		];
 		const filteredChildren = filterFalsyChildren(slots.default?.());
 		const childrenCount = filteredChildren.length;
-		const resolvedGap = getSpacing(gap);
+		const resolvedGap = getSpacing(props.value.gap);
 		const childWidth = `calc(${100 / childrenCount}% - (${resolvedGap} - ${resolvedGap} / ${childrenCount}))`;
 		const stylesCtx = { childWidth };
-		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
-		} }));
 		const getStyles = useStyles({
 			name: "Group",
-			props,
+			props: {
+				...props.value,
+				...attrs
+			},
 			stylesCtx,
-			className,
-			style,
+			className: props.value.className,
+			style: props.value.style,
 			classes: group_module_default,
-			classNames,
-			styles,
-			unstyled,
-			attributes,
-			vars,
+			classNames: props.value.classNames,
+			styles: props.value.styles,
+			unstyled: props.value.unstyled,
+			attributes: props.value.attributes,
+			vars: props.value.vars,
 			varsResolver
 		});
+		const modList = computed(() => [{ grow: props.value.grow }]);
 		const rootAttrs = computed(() => getStyles("root"));
+		const mergedAttrs = computed(() => {
+			const others = {};
+			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), ...modList.value || []];
+			return {
+				...others,
+				mod: mergedMod,
+				...rootAttrs.value
+			};
+		});
+		__expose({ root: computed(() => _root.value?.root ?? null) });
 		const __returned__ = {
+			_root,
+			attrs,
 			slots,
+			rawProps,
 			props,
-			classNames,
-			className,
-			style,
-			styles,
-			unstyled,
-			gap,
-			align,
-			justify,
-			wrap,
-			grow,
-			preventGrowOverflow,
-			vars,
-			variant,
-			__size,
-			mod,
-			attributes,
-			others,
+			knownProps,
 			filteredChildren,
 			childrenCount,
 			resolvedGap,
 			childWidth,
 			stylesCtx,
-			varsResolver,
 			getStyles,
+			modList,
 			rootAttrs,
-			mergedAttrs: computed(() => ({
-				...others,
-				...rootAttrs.value
-			})),
+			mergedAttrs,
 			get CBox() {
 				return CBox;
 			}
@@ -407,20 +428,15 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	}
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-	return openBlock(), createBlock($setup["CBox"], mergeProps($setup.mergedAttrs, {
-		mod: [{ grow: $setup.grow }, $setup.mod],
-		size: $setup.__size,
-		variant: $setup.variant
+	return openBlock(), createBlock($setup["CBox"], mergeProps({ ref: "_root" }, $setup.mergedAttrs, {
+		size: $props.__size,
+		variant: $props.variant
 	}), {
 		default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList($setup.filteredChildren, (node, index) => {
 			return openBlock(), createBlock(resolveDynamicComponent(node), { key: node.key || index });
 		}), 128))]),
 		_: 1
-	}, 16, [
-		"mod",
-		"size",
-		"variant"
-	]);
+	}, 16, ["size", "variant"]);
 }
 var group_default = /*#__PURE__*/ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/cck-ui/cck-ui/packages/@cck-ui/core/src/components/group/group.vue"]]);
 //#endregion