@cck-ui/core 0.5.0 → 0.6.1

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

@@ -1,11 +1,11 @@
 "use client";
-const require_rem = require("../../../core/utils/units-converters/rem.cjs");
 const require_export_helper = require("../../../_virtual/_/plugin-vue/export-helper.cjs");
+const require_use_component_props = require("../../../core/config-provider/use-component-props/use-component-props.cjs");
 const require_index = require("../../../core/box/index.cjs");
-const require_create_vars_resolver = require("../../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
 const require_use_styles = require("../../../core/styles-api/use-styles/use-styles.cjs");
 const require_button_module = require("../button.module.cjs");
 const require_use_button_group = require("./use-button-group.cjs");
+const require_button_group_utils = require("./button-group.utils.cjs");
 let vue = require("vue");
 //#region packages/@cck-ui/core/src/components/button/button-group/button-group.vue
 const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
@@ -14,8 +14,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 	props: {
 		orientation: {
 			type: String,
-			required: false,
-			default: "horizontal"
+			required: false
 		},
 		borderWidth: {
 			type: [Number, String],
@@ -312,47 +311,71 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 		}
 	},
 	setup(__props, { expose: __expose }) {
-		__expose();
+		const _group = (0, vue.ref)(null);
+		const attrs = (0, vue.useAttrs)();
 		const slots = (0, vue.useSlots)();
-		const varsResolver = require_create_vars_resolver.createVarsResolver((_, { borderWidth }) => ({ group: { "--button-border-width": require_rem.rem(borderWidth) } }));
-		const props = __props;
-		const { className, style, classNames, styles, unstyled, orientation, vars, borderWidth, mod, attributes, ...others } = props;
+		const rawProps = __props;
+		const props = require_use_component_props.useComponentProps({
+			component: "CButtonGroup",
+			defaultProps: { orientation: "horizontal" },
+			props: rawProps
+		});
+		const knownProps = [
+			"className",
+			"style",
+			"classNames",
+			"styles",
+			"unstyled",
+			"orientation",
+			"vars",
+			"borderWidth",
+			"mod",
+			"attributes"
+		];
 		const getStyles = require_use_styles.useStyles({
 			name: "ButtonGroup",
-			props,
+			props: {
+				...props.value,
+				...attrs
+			},
 			classes: require_button_module.default,
-			className,
-			style,
-			classNames,
-			styles,
-			unstyled,
-			attributes,
-			vars,
-			varsResolver,
+			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: require_button_group_utils.varsResolver,
 			rootSelector: "group"
 		});
+		const modList = (0, vue.computed)(() => [{ orientation: props.value.orientation }]);
 		const groupAttrs = (0, vue.computed)(() => getStyles("group"));
-		const mergedAttrs = (0, vue.computed)(() => ({
-			...others,
-			...groupAttrs.value
-		}));
+		const mergedAttrs = (0, vue.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,
+				...groupAttrs.value
+			};
+		});
 		const { validChildren } = require_use_button_group.useButtonGroup(slots);
+		__expose({ group: (0, vue.computed)(() => _group.value?.root ?? null) });
 		const __returned__ = {
+			_group,
+			attrs,
 			slots,
-			varsResolver,
+			rawProps,
 			props,
-			className,
-			style,
-			classNames,
-			styles,
-			unstyled,
-			orientation,
-			vars,
-			borderWidth,
-			mod,
-			attributes,
-			others,
+			knownProps,
 			getStyles,
+			modList,
 			groupAttrs,
 			mergedAttrs,
 			validChildren,
@@ -368,12 +391,15 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 	}
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-	return (0, vue.openBlock)(), (0, vue.createBlock)($setup["CBox"], (0, vue.mergeProps)({ rol: "group" }, $setup.mergedAttrs, { mod: [{ "data-orientation": $setup.orientation }, $setup.mod] }), {
+	return (0, vue.openBlock)(), (0, vue.createBlock)($setup["CBox"], (0, vue.mergeProps)({
+		ref: "_group",
+		role: "group"
+	}, $setup.mergedAttrs), {
 		default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)($setup.validChildren, (child, index) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(child), { key: child.key ?? index });
 		}), 128))]),
 		_: 1
-	}, 16, ["mod"]);
+	}, 16);
 }
 var button_group_default = /*#__PURE__*/ require_export_helper.default(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/cck-ui/cck-ui/packages/@cck-ui/core/src/components/button/button-group/button-group.vue"]]);
 //#endregion

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

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

package/cjs/components/button/button-group/button-group.utils.cjs

@@ -0,0 +1,8 @@
+"use client";
+const require_rem = require("../../../core/utils/units-converters/rem.cjs");
+//#region packages/@cck-ui/core/src/components/button/button-group/button-group.utils.ts
+const varsResolver = require("../../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs").createVarsResolver((_, { borderWidth }) => ({ group: { "--button-border-width": require_rem.rem(borderWidth) } }));
+//#endregion
+exports.varsResolver = varsResolver;
+
+//# sourceMappingURL=button-group.utils.cjs.map

package/cjs/components/button/button-group/button-group.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.utils.cjs","names":["createVarsResolver","rem"],"sources":["../../../../src/components/button/button-group/button-group.utils.ts"],"sourcesContent":["import { createVarsResolver, rem } from '../../../core'\nimport { ButtonGroupFactory } from './button-group.types'\n\nexport const varsResolver = createVarsResolver<ButtonGroupFactory>((_, { borderWidth }) => ({\n  group: { '--button-border-width': rem(borderWidth) },\n}))\n"],"mappings":";;;AAGA,MAAa,+FAAeA,CAAAA,CAAAA,oBAAwC,GAAG,EAAE,mBAAmB,EAC1F,OAAO,EAAE,yBAAyBC,YAAAA,IAAI,WAAW,EAAE,EACrD,EAAE"}

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

@@ -1,10 +1,10 @@
 "use client";
-const require_get_size = require("../../../core/utils/get-size/get-size.cjs");
 const require_export_helper = require("../../../_virtual/_/plugin-vue/export-helper.cjs");
+const require_use_component_props = require("../../../core/config-provider/use-component-props/use-component-props.cjs");
 const require_index = require("../../../core/box/index.cjs");
-const require_create_vars_resolver = require("../../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
 const require_use_styles = require("../../../core/styles-api/use-styles/use-styles.cjs");
 const require_button_module = require("../button.module.cjs");
+const require_button_group_section_utils = require("./button-group-section.utils.cjs");
 let vue = require("vue");
 //#region packages/@cck-ui/core/src/components/button/button-group-section/button-group-section.vue
 const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
@@ -298,8 +298,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 		},
 		variant: {
 			type: null,
-			required: false,
-			default: "default"
+			required: false
 		},
 		classNames: {
 			type: null,
@@ -319,62 +318,68 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 		}
 	},
 	setup(__props, { expose: __expose }) {
-		__expose();
-		const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { radius, color, gradient, variant, autoContrast, size }) => {
-			const colors = theme.variantColorResolver({
-				color: color || theme.primaryColor,
-				theme,
-				gradient,
-				variant: variant || "default",
-				autoContrast
-			});
-			return { groupSection: {
-				"--section-height": require_get_size.getSize(size, "section-height"),
-				"--section-padding-x": require_get_size.getSize(size, "section-padding-x"),
-				"--section-fz": size?.includes("compact") ? require_get_size.getFontSize(size.replace("compact-", "")) : require_get_size.getFontSize(size),
-				"--section-radius": radius === void 0 ? void 0 : require_get_size.getRadius(radius),
-				"--section-bg": color || variant ? colors.background : void 0,
-				"--section-color": colors.color,
-				"--section-bd": color || variant ? colors.border : void 0
-			} };
+		const _section = (0, vue.ref)(null);
+		const attrs = (0, vue.useAttrs)();
+		const rawProps = __props;
+		const props = require_use_component_props.useComponentProps({
+			component: "CButtonGroupSection",
+			defaultProps: { variant: "default" },
+			props: rawProps
 		});
-		const props = __props;
-		const { className, style, classNames, styles, unstyled, vars, gradient, radius, autoContrast, attributes, ...others } = props;
+		const knownProps = [
+			"className",
+			"style",
+			"classNames",
+			"styles",
+			"unstyled",
+			"vars",
+			"gradient",
+			"radius",
+			"autoContrast",
+			"attributes"
+		];
 		const getStyles = require_use_styles.useStyles({
 			name: "ButtonGroupSection",
-			props,
+			props: {
+				...props.value,
+				...attrs
+			},
 			classes: require_button_module.default,
-			className,
-			style,
-			classNames,
-			styles,
-			unstyled,
-			attributes,
-			vars,
-			varsResolver,
+			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: require_button_group_section_utils.varsResolver,
 			rootSelector: "groupSection"
 		});
 		const sectionAttrs = (0, vue.computed)(() => getStyles("groupSection"));
+		const mergedAttrs = (0, vue.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)];
+			return {
+				...others,
+				mod: mergedMod,
+				...sectionAttrs.value
+			};
+		});
+		__expose({ section: (0, vue.computed)(() => _section.value?.root ?? null) });
 		const __returned__ = {
-			varsResolver,
+			_section,
+			attrs,
+			rawProps,
 			props,
-			className,
-			style,
-			classNames,
-			styles,
-			unstyled,
-			vars,
-			gradient,
-			radius,
-			autoContrast,
-			attributes,
-			others,
+			knownProps,
 			getStyles,
 			sectionAttrs,
-			mergedAttrs: (0, vue.computed)(() => ({
-				...others,
-				...sectionAttrs.value
-			})),
+			mergedAttrs,
 			get CBox() {
 				return require_index.CBox;
 			}
@@ -387,7 +392,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 	}
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-	return (0, vue.openBlock)(), (0, vue.createBlock)($setup["CBox"], (0, vue.normalizeProps)((0, vue.guardReactiveProps)($setup.mergedAttrs)), {
+	return (0, vue.openBlock)(), (0, vue.createBlock)($setup["CBox"], (0, vue.mergeProps)({ ref: "_section" }, $setup.mergedAttrs), {
 		default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 		_: 3
 	}, 16);

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

@@ -1 +1 @@
-{"version":3,"file":"button-group-section.cjs","names":[],"sources":["../../../../src/components/button/button-group-section/button-group-section.vue"],"sourcesContent":["<template>\n  <c-box v-bind=\"mergedAttrs\">\n    <slot />\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { CBox, createVarsResolver, getFontSize, getRadius, getSize, useStyles } from '../../../core'\nimport type {\n  ButtonGroupSectionFactory,\n  ButtonGroupSectionProps,\n} from './button-group-section.types'\nimport classes from '../button.module.css'\n\ndefineOptions({\n  name: 'CButtonGroupSection',\n})\n\nconst varsResolver = createVarsResolver<ButtonGroupSectionFactory>(\n  (theme, { radius, color, gradient, variant, autoContrast, size }) => {\n    const colors = theme.variantColorResolver({\n      color: color || theme.primaryColor,\n      theme,\n      gradient,\n      variant: variant || 'default',\n      autoContrast,\n    })\n\n    return {\n      groupSection: {\n        '--section-height': getSize(size, 'section-height'),\n        '--section-padding-x': getSize(size, 'section-padding-x'),\n        '--section-fz': size?.includes('compact')\n          ? getFontSize(size.replace('compact-', ''))\n          : getFontSize(size),\n        '--section-radius': radius === undefined ? undefined : getRadius(radius),\n        '--section-bg': color || variant ? colors.background : undefined,\n        '--section-color': colors.color,\n        '--section-bd': color || variant ? colors.border : undefined,\n      },\n    }\n  }\n)\n\nconst props = withDefaults(defineProps<ButtonGroupSectionProps>(), {\n  variant: 'default',\n})\n\nconst {\n  className,\n  style,\n  classNames,\n  styles,\n  unstyled,\n  vars,\n  gradient,\n  radius,\n  autoContrast,\n  attributes,\n  ...others\n} = props\n\nconst getStyles = useStyles<ButtonGroupSectionFactory>({\n  name: 'ButtonGroupSection',\n  props,\n  classes,\n  className,\n  style,\n  classNames,\n  styles,\n  unstyled,\n  attributes,\n  vars,\n  varsResolver,\n  rootSelector: 'groupSection',\n})\n\nconst sectionAttrs = computed(() => getStyles('groupSection'))\nconst mergedAttrs = computed(() => ({ ...others, ...sectionAttrs.value }))\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmBA,MAAM,eAAe,6BAAA,oBAClB,OAAO,EAAE,QAAQ,OAAO,UAAU,SAAS,cAAc,WAAW;GACnE,MAAM,SAAS,MAAM,qBAAqB;IACxC,OAAO,SAAS,MAAM;IACtB;IACA;IACA,SAAS,WAAW;IACpB;GACF,CAAC;GAED,OAAO,EACL,cAAc;IACZ,oBAAoB,iBAAA,QAAQ,MAAM,gBAAgB;IAClD,uBAAuB,iBAAA,QAAQ,MAAM,mBAAmB;IACxD,gBAAgB,MAAM,SAAS,SAAS,IACpC,iBAAA,YAAY,KAAK,QAAQ,YAAY,EAAE,CAAC,IACxC,iBAAA,YAAY,IAAI;IACpB,oBAAoB,WAAW,KAAA,IAAY,KAAA,IAAY,iBAAA,UAAU,MAAM;IACvE,gBAAgB,SAAS,UAAU,OAAO,aAAa,KAAA;IACvD,mBAAmB,OAAO;IAC1B,gBAAgB,SAAS,UAAU,OAAO,SAAS,KAAA;GACrD,EACF;EACF,CACF;EAEA,MAAM,QAAQ;EAId,MAAM,EACJ,WACA,OACA,YACA,QACA,UACA,MACA,UACA,QACA,cACA,YACA,GAAG,WACD;EAEJ,MAAM,YAAY,mBAAA,UAAqC;GACrD,MAAM;GACN;GACA,SAAA,sBAAA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,cAAc;EAChB,CAAC;EAED,MAAM,gBAAA,GAAA,IAAA,SAAA,OAA8B,UAAU,cAAc,CAAC;;;;;;;;;;;;;;;;;yCACzB;IAAE,GAAG;IAAQ,GAAG,aAAa;GAAM,EAAA;;;;;;;;;;;;;mDA5E7D,OAAA,UAAA,GAAA,IAAA,eAAA,EAAA,GAAA,IAAA,mBAAA,CAFO,OAAA,WAAW,CAAA,GAAA;kCAChB,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}
+{"version":3,"file":"button-group-section.cjs","names":[],"sources":["../../../../src/components/button/button-group-section/button-group-section.vue"],"sourcesContent":["<template>\n  <c-box ref=\"_section\" v-bind=\"mergedAttrs\">\n    <slot />\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CBox, useComponentProps, useStyles } from '../../../core'\nimport type {\n  ButtonGroupSectionFactory,\n  ButtonGroupSectionProps,\n} from './button-group-section.types'\nimport classes from '../button.module.css'\nimport { varsResolver } from './button-group-section.utils'\n\ndefineOptions({\n  name: 'CButtonGroupSection',\n})\n\nconst _section = ref<InstanceType<typeof CBox> | null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<ButtonGroupSectionProps>()\n\nconst props = useComponentProps({\n  component: 'CButtonGroupSection',\n  defaultProps: {\n    variant: 'default',\n  },\n  props: rawProps,\n})\n\nconst knownProps = [\n  'className',\n  'style',\n  'classNames',\n  'styles',\n  'unstyled',\n  'vars',\n  'gradient',\n  'radius',\n  'autoContrast',\n  'attributes',\n]\n\nconst getStyles = useStyles<ButtonGroupSectionFactory>({\n  name: 'ButtonGroupSection',\n  props: { ...props.value, ...attrs } as ButtonGroupSectionProps,\n  classes,\n  className: props.value.className,\n  style: props.value.style,\n  classNames: props.value.classNames,\n  styles: props.value.styles,\n  unstyled: props.value.unstyled,\n  attributes: props.value.attributes,\n  vars: props.value.vars,\n  varsResolver,\n  rootSelector: 'groupSection',\n})\n\nconst sectionAttrs = computed(() => getStyles('groupSection'))\nconst mergedAttrs = computed(() => {\n  const others: Record<string, any> = {}\n  const propsValue = props.value\n  Object.keys(propsValue).forEach((key) => {\n    if (!knownProps.includes(key)) {\n      others[key] = propsValue[key as keyof typeof propsValue]\n    }\n  })\n  const userMod = props.value.mod\n  const mergedMod = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n  return { ...others, mod: mergedMod, ...sectionAttrs.value }\n})\n\ndefineExpose({\n  section: computed(() => _section.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBA,MAAM,YAAA,GAAA,IAAA,IAAA,CAAiD,IAAI;EAE3D,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX,cAAc,EACZ,SAAS,UACX;GACA,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,YAAY,mBAAA,UAAqC;GACrD,MAAM;GACN,OAAO;IAAE,GAAG,MAAM;IAAO,GAAG;GAAM;GAClC,SAAA,sBAAA;GACA,WAAW,MAAM,MAAM;GACvB,OAAO,MAAM,MAAM;GACnB,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB,cAAA,mCAAA;GACA,cAAc;EAChB,CAAC;EAED,MAAM,gBAAA,GAAA,IAAA,SAAA,OAA8B,UAAU,cAAc,CAAC;EAC7D,MAAM,eAAA,GAAA,IAAA,SAAA,OAA6B;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,OAAO,KAAK,UAAU,CAAC,CAAC,SAAS,QAAQ;IACvC,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAE7B,CAAC;GACD,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAAC,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,CAAE;GACpF,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,aAAa;GAAM;EAC5D,CAAC;EAED,SAAa,EACX,UAAA,GAAA,IAAA,SAAA,OAAwB,SAAS,OAAO,QAAQ,IAAI,EACtD,CAAC;;;;;;;;;;;;;;;;;;;;;;mDA3ES,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAFD,KAAI,WAAU,GAAS,OAAA,WAAW,GAAA;kCAC/B,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/cjs/components/button/button-group-section/button-group-section.utils.cjs

@@ -0,0 +1,25 @@
+"use client";
+const require_get_size = require("../../../core/utils/get-size/get-size.cjs");
+//#region packages/@cck-ui/core/src/components/button/button-group-section/button-group-section.utils.ts
+const varsResolver = require("../../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs").createVarsResolver((theme, { radius, color, gradient, variant, autoContrast, size }) => {
+	const colors = theme.variantColorResolver({
+		color: color || theme.primaryColor,
+		theme,
+		gradient,
+		variant: variant || "default",
+		autoContrast
+	});
+	return { groupSection: {
+		"--section-height": require_get_size.getSize(size, "section-height"),
+		"--section-padding-x": require_get_size.getSize(size, "section-padding-x"),
+		"--section-fz": size?.includes("compact") ? require_get_size.getFontSize(size.replace("compact-", "")) : require_get_size.getFontSize(size),
+		"--section-radius": radius === void 0 ? void 0 : require_get_size.getRadius(radius),
+		"--section-bg": color || variant ? colors.background : void 0,
+		"--section-color": colors.color,
+		"--section-bd": color || variant ? colors.border : void 0
+	} };
+});
+//#endregion
+exports.varsResolver = varsResolver;
+
+//# sourceMappingURL=button-group-section.utils.cjs.map

package/cjs/components/button/button-group-section/button-group-section.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group-section.utils.cjs","names":["createVarsResolver","getSize","getFontSize","getRadius"],"sources":["../../../../src/components/button/button-group-section/button-group-section.utils.ts"],"sourcesContent":["import { createVarsResolver, getFontSize, getRadius, getSize } from '../../../core'\nimport { ButtonGroupSectionFactory } from './button-group-section.types'\n\nexport const varsResolver = createVarsResolver<ButtonGroupSectionFactory>(\n  (theme, { radius, color, gradient, variant, autoContrast, size }) => {\n    const colors = theme.variantColorResolver({\n      color: color || theme.primaryColor,\n      theme,\n      gradient,\n      variant: variant || 'default',\n      autoContrast,\n    })\n\n    return {\n      groupSection: {\n        '--section-height': getSize(size, 'section-height'),\n        '--section-padding-x': getSize(size, 'section-padding-x'),\n        '--section-fz': size?.includes('compact')\n          ? getFontSize(size.replace('compact-', ''))\n          : getFontSize(size),\n        '--section-radius': radius === undefined ? undefined : getRadius(radius),\n        '--section-bg': color || variant ? colors.background : undefined,\n        '--section-color': colors.color,\n        '--section-bd': color || variant ? colors.border : undefined,\n      },\n    }\n  }\n)\n"],"mappings":";;;AAGA,MAAa,+FAAeA,CAAAA,CAAAA,oBACzB,OAAO,EAAE,QAAQ,OAAO,UAAU,SAAS,cAAc,WAAW;CACnE,MAAM,SAAS,MAAM,qBAAqB;EACxC,OAAO,SAAS,MAAM;EACtB;EACA;EACA,SAAS,WAAW;EACpB;CACF,CAAC;CAED,OAAO,EACL,cAAc;EACZ,oBAAoBC,iBAAAA,QAAQ,MAAM,gBAAgB;EAClD,uBAAuBA,iBAAAA,QAAQ,MAAM,mBAAmB;EACxD,gBAAgB,MAAM,SAAS,SAAS,IACpCC,iBAAAA,YAAY,KAAK,QAAQ,YAAY,EAAE,CAAC,IACxCA,iBAAAA,YAAY,IAAI;EACpB,oBAAoB,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,MAAM;EACvE,gBAAgB,SAAS,UAAU,OAAO,aAAa,KAAA;EACvD,mBAAmB,OAAO;EAC1B,gBAAgB,SAAS,UAAU,OAAO,SAAS,KAAA;CACrD,EACF;AACF,CACF"}

package/cjs/components/button/index.cjs

@@ -4,15 +4,19 @@ const require_statics = require("../../core/utils/vue/statics.cjs");
 const require_button_module = require("./button.module.cjs");
 const require_button_utils = require("./button.utils.cjs");
 const require_button = require("./button.cjs");
+const require_button_group_section_utils = require("./button-group-section/button-group-section.utils.cjs");
 const require_button_group_section = require("./button-group-section/button-group-section.cjs");
+const require_button_group_utils = require("./button-group/button-group.utils.cjs");
 const require_button_group = require("./button-group/button-group.cjs");
 //#region packages/@cck-ui/core/src/components/button/index.ts
+const ButtonGroupSectionWithStatic = require_statics.withPropsFactory(require_statics.withExtend(require_statics.withVarsResolver(require_statics.withClasses(require_button_group_section.default, require_button_module.default), require_button_group_section_utils.varsResolver)));
+const ButtonGroupWithStatic = require_statics.withPropsFactory(require_statics.withExtend(require_statics.withVarsResolver(require_statics.withClasses(require_button_group.default, require_button_module.default), require_button_group_utils.varsResolver)));
 const ButtonWithStatic = require_statics.withPropsFactory(require_statics.withExtend(require_statics.withVarsResolver(require_statics.withClasses(require_button.default, require_button_module.default), require_button_utils.varsResolver)));
-const CButtonGroup = require_install.withInstall(require_button_group.default);
-const CButtonGroupSection = require_install.withInstall(require_button_group_section.default);
+const CButtonGroup = require_install.withInstall(ButtonGroupWithStatic);
+const CButtonGroupSection = require_install.withInstall(ButtonGroupSectionWithStatic);
 const CButton = require_install.withInstall(ButtonWithStatic, {
-	ButtonGroup: require_button_group.default,
-	ButtonGroupSection: require_button_group_section.default
+	CButtonGroup,
+	CButtonGroupSection
 });
 //#endregion
 exports.CButton = CButton;

package/cjs/components/button/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["withPropsFactory","withExtend","withVarsResolver","withClasses","Button","classes","varsResolver","withInstall","ButtonGroup","ButtonGroupSection"],"sources":["../../../src/components/button/index.ts"],"sourcesContent":["import {\n  type SFCWithInstall,\n  type SFCWithInstallAndClasses,\n  withClasses,\n  withExtend,\n  withInstall,\n  withPropsFactory,\n  withVarsResolver,\n} from '../../core'\nimport ButtonGroup from './button-group/button-group.vue'\nimport ButtonGroupSection from './button-group-section/button-group-section.vue'\nimport Button from './button.vue'\nimport classes from './button.module.css'\n\nimport { varsResolver } from './button.utils'\n\nconst ButtonWithStatic = withPropsFactory(\n  withExtend(withVarsResolver(withClasses(Button, classes), varsResolver))\n)\n\nexport const CButtonGroup: SFCWithInstall<typeof ButtonGroup> = withInstall(ButtonGroup)\nexport const CButtonGroupSection: SFCWithInstall<typeof ButtonGroupSection> =\n  withInstall(ButtonGroupSection)\nexport const CButton: SFCWithInstallAndClasses<typeof Button, typeof classes> & {\n  ButtonGroup: typeof ButtonGroup\n  ButtonGroupSection: typeof ButtonGroupSection\n} = withInstall(ButtonWithStatic, {\n  ButtonGroup,\n  ButtonGroupSection,\n})\n\nexport default CButton\n\nexport * from './button-group-section/button-group-section.types'\nexport * from './button-group/button-group.types'\nexport * from './button.types'\n"],"mappings":";;;;;;;;;AAgBA,MAAM,mBAAmBA,gBAAAA,iBACvBC,gBAAAA,WAAWC,gBAAAA,iBAAiBC,gBAAAA,YAAYC,eAAAA,SAAQC,sBAAAA,OAAO,GAAGC,qBAAAA,YAAY,CAAC,CACzE;AAEA,MAAa,eAAmDC,gBAAAA,YAAYC,qBAAAA,OAAW;AACvF,MAAa,sBACXD,gBAAAA,YAAYE,6BAAAA,OAAkB;AAChC,MAAa,UAGTF,gBAAAA,YAAY,kBAAkB;CAChC,aAAA,qBAAA;CACA,oBAAA,6BAAA;AACF,CAAC"}
+{"version":3,"file":"index.cjs","names":["withPropsFactory","withExtend","withVarsResolver","withClasses","ButtonGroupSection","classes","sectionVarsResolver","ButtonGroup","groupVarsResolver","Button","varsResolver","withInstall"],"sources":["../../../src/components/button/index.ts"],"sourcesContent":["import {\n  type SFCWithInstallAndClasses,\n  withClasses,\n  withExtend,\n  withInstall,\n  withPropsFactory,\n  withVarsResolver,\n} from '../../core'\nimport ButtonGroup from './button-group/button-group.vue'\nimport ButtonGroupSection from './button-group-section/button-group-section.vue'\nimport Button from './button.vue'\nimport classes from './button.module.css'\n\nimport { varsResolver as sectionVarsResolver } from './button-group-section/button-group-section.utils'\nimport { varsResolver as groupVarsResolver } from './button-group/button-group.utils'\nimport { varsResolver } from './button.utils'\n\nconst ButtonGroupSectionWithStatic = withPropsFactory(\n  withExtend(withVarsResolver(withClasses(ButtonGroupSection, classes), sectionVarsResolver))\n)\nconst ButtonGroupWithStatic = withPropsFactory(\n  withExtend(withVarsResolver(withClasses(ButtonGroup, classes), groupVarsResolver))\n)\nconst ButtonWithStatic = withPropsFactory(\n  withExtend(withVarsResolver(withClasses(Button, classes), varsResolver))\n)\n\nexport const CButtonGroup: SFCWithInstallAndClasses<typeof ButtonGroup, typeof classes> =\n  withInstall(ButtonGroupWithStatic)\nexport const CButtonGroupSection: SFCWithInstallAndClasses<\n  typeof ButtonGroupSection,\n  typeof classes\n> = withInstall(ButtonGroupSectionWithStatic)\nexport const CButton: SFCWithInstallAndClasses<typeof Button, typeof classes> & {\n  CButtonGroup: typeof CButtonGroup\n  CButtonGroupSection: typeof CButtonGroupSection\n} = withInstall(ButtonWithStatic, {\n  CButtonGroup,\n  CButtonGroupSection,\n})\n\nexport default CButton\n\nexport * from './button-group-section/button-group-section.types'\nexport * from './button-group/button-group.types'\nexport * from './button.types'\n"],"mappings":";;;;;;;;;;;AAiBA,MAAM,+BAA+BA,gBAAAA,iBACnCC,gBAAAA,WAAWC,gBAAAA,iBAAiBC,gBAAAA,YAAYC,6BAAAA,SAAoBC,sBAAAA,OAAO,GAAGC,mCAAAA,YAAmB,CAAC,CAC5F;AACA,MAAM,wBAAwBN,gBAAAA,iBAC5BC,gBAAAA,WAAWC,gBAAAA,iBAAiBC,gBAAAA,YAAYI,qBAAAA,SAAaF,sBAAAA,OAAO,GAAGG,2BAAAA,YAAiB,CAAC,CACnF;AACA,MAAM,mBAAmBR,gBAAAA,iBACvBC,gBAAAA,WAAWC,gBAAAA,iBAAiBC,gBAAAA,YAAYM,eAAAA,SAAQJ,sBAAAA,OAAO,GAAGK,qBAAAA,YAAY,CAAC,CACzE;AAEA,MAAa,eACXC,gBAAAA,YAAY,qBAAqB;AACnC,MAAa,sBAGTA,gBAAAA,YAAY,4BAA4B;AAC5C,MAAa,UAGTA,gBAAAA,YAAY,kBAAkB;CAChC;CACA;AACF,CAAC"}

package/cjs/components/group/group.cjs

@@ -1,11 +1,12 @@
 "use client";
 const require_get_size = require("../../core/utils/get-size/get-size.cjs");
 const require_export_helper = require("../../_virtual/_/plugin-vue/export-helper.cjs");
+const require_use_component_props = require("../../core/config-provider/use-component-props/use-component-props.cjs");
 const require_index = require("../../core/box/index.cjs");
-const require_create_vars_resolver = require("../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
 const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
 const require_filter_falsy_children = require("./filter-falsy-children/filter-falsy-children.cjs");
 const require_group_module = require("./group.module.cjs");
+const require_group_utils = require("./group.utils.cjs");
 let vue = require("vue");
 //#region packages/@cck-ui/core/src/components/group/group.vue
 const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
@@ -18,23 +19,19 @@ const _sfc_main = /*@__PURE__*/ (0, vue.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__*/ (0, vue.defineComponent)({
 		},
 		preventGrowOverflow: {
 			type: Boolean,
-			required: false,
-			default: true
+			required: false
 		},
 		className: {
 			type: String,
@@ -332,69 +328,94 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 		}
 	},
 	setup(__props, { expose: __expose }) {
-		__expose();
+		const _root = (0, vue.ref)(null);
+		const attrs = (0, vue.useAttrs)();
 		const slots = (0, vue.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 = require_use_component_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 = require_filter_falsy_children.filterFalsyChildren(slots.default?.());
 		const childrenCount = filteredChildren.length;
-		const resolvedGap = require_get_size.getSpacing(gap);
+		const resolvedGap = require_get_size.getSpacing(props.value.gap);
 		const childWidth = `calc(${100 / childrenCount}% - (${resolvedGap} - ${resolvedGap} / ${childrenCount}))`;
 		const stylesCtx = { childWidth };
-		const varsResolver = require_create_vars_resolver.createVarsResolver((_, { grow, preventGrowOverflow, gap, align, justify, wrap }, { childWidth }) => ({ root: {
-			"--group-child-width": grow && preventGrowOverflow ? childWidth : void 0,
-			"--group-gap": require_get_size.getSpacing(gap),
-			"--group-align": align,
-			"--group-justify": justify,
-			"--group-wrap": wrap
-		} }));
 		const getStyles = require_use_styles.useStyles({
 			name: "Group",
-			props,
+			props: {
+				...props.value,
+				...attrs
+			},
 			stylesCtx,
-			className,
-			style,
+			className: props.value.className,
+			style: props.value.style,
 			classes: require_group_module.default,
-			classNames,
-			styles,
-			unstyled,
-			attributes,
-			vars,
-			varsResolver
+			classNames: props.value.classNames,
+			styles: props.value.styles,
+			unstyled: props.value.unstyled,
+			attributes: props.value.attributes,
+			vars: props.value.vars,
+			varsResolver: require_group_utils.varsResolver
 		});
+		const modList = (0, vue.computed)(() => [{ grow: props.value.grow }]);
 		const rootAttrs = (0, vue.computed)(() => getStyles("root"));
+		const mergedAttrs = (0, vue.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: (0, vue.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: (0, vue.computed)(() => ({
-				...others,
-				...rootAttrs.value
-			})),
+			mergedAttrs,
 			get CBox() {
 				return require_index.CBox;
 			}
@@ -407,20 +428,15 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 	}
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-	return (0, vue.openBlock)(), (0, vue.createBlock)($setup["CBox"], (0, vue.mergeProps)($setup.mergedAttrs, {
-		mod: [{ grow: $setup.grow }, $setup.mod],
-		size: $setup.__size,
-		variant: $setup.variant
+	return (0, vue.openBlock)(), (0, vue.createBlock)($setup["CBox"], (0, vue.mergeProps)({ ref: "_root" }, $setup.mergedAttrs, {
+		size: $props.__size,
+		variant: $props.variant
 	}), {
 		default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)($setup.filteredChildren, (node, index) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(node), { key: node.key || index });
 		}), 128))]),
 		_: 1
-	}, 16, [
-		"mod",
-		"size",
-		"variant"
-	]);
+	}, 16, ["size", "variant"]);
 }
 var group_default = /*#__PURE__*/ require_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