@cck-ui/core 0.5.0 → 0.6.1

package/esm/components/text/text.mjs

@@ -1,12 +1,11 @@
 "use client";
-import { getFontSize, getLineHeight } from "../../core/utils/get-size/get-size.mjs";
-import { getGradient } from "../../core/config-provider/color-functions/get-gradient/get-gradient.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 text_module_default from "./text.module.mjs";
-import { computed, createBlock, defineComponent, mergeProps, openBlock, renderSlot, withCtx } from "vue";
+import { varsResolver } from "./text.utils.mjs";
+import { computed, createBlock, defineComponent, mergeProps, openBlock, ref, renderSlot, useAttrs, withCtx } from "vue";
 //#region packages/@cck-ui/core/src/components/text/text.vue
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "CText",
@@ -339,8 +338,14 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		}
 	},
 	setup(__props, { expose: __expose }) {
-		__expose();
-		const props = __props;
+		const _root = ref(null);
+		const attrs = useAttrs();
+		const rawProps = __props;
+		const props = useComponentProps({
+			component: "CText",
+			defaultProps: {},
+			props: rawProps
+		});
 		function getTextTruncate(truncate) {
 			if (truncate === "start") return "start";
 			if (truncate === "end" || truncate) return "end";
@@ -366,48 +371,52 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			"attributes"
 		];
 		const modList = computed(() => [{
-			"data-truncate": getTextTruncate(props.truncate),
-			"data-line-clamp": typeof props.lineClamp === "number",
-			"data-inline": props.inline,
-			"data-inherit": props.inherit
-		}, props.mod]);
-		const varsResolver = createVarsResolver((theme, { gradient, lineClamp, size, textWrap, variant }) => ({ root: {
-			"--text-fz": getFontSize(size),
-			"--text-lh": getLineHeight(size),
-			"--text-gradient": variant === "gradient" ? getGradient(gradient, theme) : void 0,
-			"--text-line-clamp": typeof lineClamp === "number" ? lineClamp.toString() : void 0,
-			"--text-text-wrap": textWrap
-		} }));
+			"data-truncate": getTextTruncate(props.value.truncate),
+			"data-line-clamp": typeof props.value.lineClamp === "number",
+			"data-inline": props.value.inline,
+			"data-inherit": props.value.inherit
+		}]);
 		const getStyles = useStyles({
-			name: ["Text", props.__staticSelector],
-			props,
+			name: ["Text", props.value.__staticSelector],
+			props: {
+				...props.value,
+				...attrs
+			},
 			classes: text_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", { focusable: true }));
+		const mergedAttrs = computed(() => {
+			const others = {};
+			const propsValue = props.value;
+			for (const key in propsValue) if (!knownProps.includes(key)) others[key] = propsValue[key];
+			const userMod = props.value.mod;
+			const mergedMod = [...Array.isArray(userMod) ? userMod : [userMod].filter(Boolean), ...modList.value || []];
+			return {
+				...others,
+				mod: mergedMod,
+				...rootAttrs.value
+			};
+		});
+		__expose({ root: computed(() => _root.value?.root ?? null) });
 		const __returned__ = {
+			_root,
+			attrs,
+			rawProps,
 			props,
 			getTextTruncate,
 			knownProps,
 			modList,
-			varsResolver,
 			getStyles,
 			rootAttrs,
-			mergedAttrs: computed(() => {
-				const others = {};
-				for (const key in props) if (!knownProps.includes(key)) others[key] = props[key];
-				return {
-					...others,
-					...rootAttrs.value
-				};
-			}),
+			mergedAttrs,
 			get CBox() {
 				return CBox;
 			}
@@ -420,8 +429,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	}
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-	return openBlock(), createBlock($setup["CBox"], mergeProps($setup.mergedAttrs, {
-		mod: $setup.modList,
+	return openBlock(), createBlock($setup["CBox"], mergeProps({ ref: "_root" }, $setup.mergedAttrs, {
 		size: $setup.props.size,
 		tag: $setup.props.span ? "span" : "p",
 		variant: $setup.props.variant
@@ -429,7 +437,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 		default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 		_: 3
 	}, 16, [
-		"mod",
 		"size",
 		"tag",
 		"variant"

package/esm/components/text/text.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"text.mjs","names":[],"sources":["../../../src/components/text/text.vue"],"sourcesContent":["<template>\n  <c-box\n    v-bind=\"mergedAttrs\"\n    :mod=\"modList\"\n    :size=\"props.size\"\n    :tag=\"props.span ? 'span' : 'p'\"\n    :variant=\"props.variant\"\n  >\n    <slot />\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport type { TextFactory, TextProps, TextTruncate } from './text.types.ts'\nimport classes from './text.module.css'\nimport {\n  createVarsResolver,\n  getFontSize,\n  getGradient,\n  getLineHeight,\n  useStyles,\n  CBox,\n} from '../../core'\n\ndefineOptions({\n  name: 'CText',\n})\n\nconst props = defineProps<TextProps>()\n\nfunction getTextTruncate(truncate: TextTruncate | undefined) {\n  if (truncate === 'start') {\n    return 'start'\n  }\n\n  if (truncate === 'end' || truncate) {\n    return 'end'\n  }\n\n  return undefined\n}\n\nconst knownProps = [\n  'lineClamp',\n  'truncate',\n  'inline',\n  'inherit',\n  'gradient',\n  'span',\n  'textWrap',\n  '__staticSelector',\n  'vars',\n  'className',\n  'style',\n  'classNames',\n  'styles',\n  'unstyled',\n  'variant',\n  'mod',\n  'size',\n  'attributes',\n]\n\nconst modList = computed(() => [\n  {\n    'data-truncate': getTextTruncate(props.truncate),\n    'data-line-clamp': typeof props.lineClamp === 'number',\n    'data-inline': props.inline,\n    'data-inherit': props.inherit,\n  },\n  props.mod,\n])\n\nconst varsResolver = createVarsResolver<TextFactory>(\n  (theme, { gradient, lineClamp, size, textWrap, variant }) => ({\n    root: {\n      '--text-fz': getFontSize(size),\n      '--text-lh': getLineHeight(size),\n      '--text-gradient': variant === 'gradient' ? getGradient(gradient, theme) : undefined,\n      '--text-line-clamp': typeof lineClamp === 'number' ? lineClamp.toString() : undefined,\n      '--text-text-wrap': textWrap,\n    },\n  })\n)\n\nconst getStyles = useStyles<TextFactory>({\n  name: ['Text', props.__staticSelector],\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', { focusable: true }))\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</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BA,MAAM,QAAQ;EAEd,SAAS,gBAAgB,UAAoC;GAC3D,IAAI,aAAa,SACf,OAAO;GAGT,IAAI,aAAa,SAAS,UACxB,OAAO;EAIX;EAEA,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,UAAU,eAAe,CAC7B;GACE,iBAAiB,gBAAgB,MAAM,QAAQ;GAC/C,mBAAmB,OAAO,MAAM,cAAc;GAC9C,eAAe,MAAM;GACrB,gBAAgB,MAAM;EACxB,GACA,MAAM,GACR,CAAC;EAED,MAAM,eAAe,oBAClB,OAAO,EAAE,UAAU,WAAW,MAAM,UAAU,eAAe,EAC5D,MAAM;GACJ,aAAa,YAAY,IAAI;GAC7B,aAAa,cAAc,IAAI;GAC/B,mBAAmB,YAAY,aAAa,YAAY,UAAU,KAAK,IAAI,KAAA;GAC3E,qBAAqB,OAAO,cAAc,WAAW,UAAU,SAAS,IAAI,KAAA;GAC5E,oBAAoB;EACtB,EACF,EACF;EAEA,MAAM,YAAY,UAAuB;GACvC,MAAM,CAAC,QAAQ,MAAM,gBAAgB;GACrC;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,QAAQ,EAAE,WAAW,KAAK,CAAC,CAAC;;;;;;;;;gBAEnD,eAAe;IACjC,MAAM,SAA8B,CAAC;IACrC,KAAK,MAAM,OAAO,OAChB,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,MAAM;IAGxB,OAAO;KAAE,GAAG;KAAQ,GAAG,UAAU;IAAM;GACzC,CAAA;;;;;;;;;;;;;qBA7GE,YAQQ,OAAA,SARR,WAQQ,OAPE,aAAW;EAClB,KAAK,OAAA;EACL,MAAM,OAAA,MAAM;EACZ,KAAK,OAAA,MAAM,OAAI,SAAA;EACf,SAAS,OAAA,MAAM;;yBAER,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}
+{"version":3,"file":"text.mjs","names":[],"sources":["../../../src/components/text/text.vue"],"sourcesContent":["<template>\n  <c-box\n    ref=\"_root\"\n    v-bind=\"mergedAttrs\"\n    :size=\"props.size\"\n    :tag=\"props.span ? 'span' : 'p'\"\n    :variant=\"props.variant\"\n  >\n    <slot />\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport type { TextFactory, TextProps, TextTruncate } from './text.types.ts'\nimport classes from './text.module.css'\nimport { useStyles, CBox, useComponentProps } from '../../core'\nimport { varsResolver } from './text.utils.js'\n\ndefineOptions({\n  name: 'CText',\n})\n\nconst _root = ref<InstanceType<typeof CBox> | null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<TextProps>()\n\nconst props = useComponentProps({\n  component: 'CText',\n  defaultProps: {},\n  props: rawProps,\n})\n\nfunction getTextTruncate(truncate: TextTruncate | undefined) {\n  if (truncate === 'start') {\n    return 'start'\n  }\n\n  if (truncate === 'end' || truncate) {\n    return 'end'\n  }\n\n  return undefined\n}\n\nconst knownProps = [\n  'lineClamp',\n  'truncate',\n  'inline',\n  'inherit',\n  'gradient',\n  'span',\n  'textWrap',\n  '__staticSelector',\n  'vars',\n  'className',\n  'style',\n  'classNames',\n  'styles',\n  'unstyled',\n  'variant',\n  'mod',\n  'size',\n  'attributes',\n]\n\nconst modList = computed(() => [\n  {\n    'data-truncate': getTextTruncate(props.value.truncate),\n    'data-line-clamp': typeof props.value.lineClamp === 'number',\n    'data-inline': props.value.inline,\n    'data-inherit': props.value.inherit,\n  },\n])\n\nconst getStyles = useStyles<TextFactory>({\n  name: ['Text', props.value.__staticSelector],\n  props: { ...props.value, ...attrs } as TextProps,\n  classes,\n  className: props.value.className,\n  style: props.value.style,\n  classNames: props.value.classNames,\n  styles: props.value.styles,\n  unstyled: props.value.unstyled,\n  attributes: props.value.attributes,\n  vars: props.value.vars,\n  varsResolver,\n})\n\nconst rootAttrs = computed(() => getStyles('root', { focusable: true }))\n\nconst mergedAttrs = computed(() => {\n  const others: Record<string, any> = {}\n  const propsValue = props.value\n  for (const key in propsValue) {\n    if (!knownProps.includes(key)) {\n      others[key] = propsValue[key as keyof typeof propsValue]\n    }\n  }\n  const userMod = props.value.mod\n  const mergedMod = [\n    ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n    ...(modList.value || []),\n  ]\n  return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n  root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,QAAQ,IAAsC,IAAI;EAExD,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX,cAAc,CAAC;GACf,OAAO;EACT,CAAC;EAED,SAAS,gBAAgB,UAAoC;GAC3D,IAAI,aAAa,SACf,OAAO;GAGT,IAAI,aAAa,SAAS,UACxB,OAAO;EAIX;EAEA,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,UAAU,eAAe,CAC7B;GACE,iBAAiB,gBAAgB,MAAM,MAAM,QAAQ;GACrD,mBAAmB,OAAO,MAAM,MAAM,cAAc;GACpD,eAAe,MAAM,MAAM;GAC3B,gBAAgB,MAAM,MAAM;EAC9B,CACF,CAAC;EAED,MAAM,YAAY,UAAuB;GACvC,MAAM,CAAC,QAAQ,MAAM,MAAM,gBAAgB;GAC3C,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,QAAQ,EAAE,WAAW,KAAK,CAAC,CAAC;EAEvE,MAAM,cAAc,eAAe;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,KAAK,MAAM,OAAO,YAChB,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAG7B,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAChB,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,GAC/D,GAAI,QAAQ,SAAS,CAAC,CACxB;GACA,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,UAAU;GAAM;EACzD,CAAC;EAED,SAAa,EACX,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;qBA9GC,YAQQ,OAAA,SARR,WAQQ,EAPN,KAAI,QAAO,GACH,OAAA,aAAW;EAClB,MAAM,OAAA,MAAM;EACZ,KAAK,OAAA,MAAM,OAAI,SAAA;EACf,SAAS,OAAA,MAAM;;yBAER,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/esm/components/text/text.utils.mjs

@@ -0,0 +1,16 @@
+"use client";
+import { getFontSize, getLineHeight } from "../../core/utils/get-size/get-size.mjs";
+import { getGradient } from "../../core/config-provider/color-functions/get-gradient/get-gradient.mjs";
+import { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
+//#region packages/@cck-ui/core/src/components/text/text.utils.ts
+const varsResolver = createVarsResolver((theme, { gradient, lineClamp, size, textWrap, variant }) => ({ root: {
+	"--text-fz": getFontSize(size),
+	"--text-lh": getLineHeight(size),
+	"--text-gradient": variant === "gradient" ? getGradient(gradient, theme) : void 0,
+	"--text-line-clamp": typeof lineClamp === "number" ? lineClamp.toString() : void 0,
+	"--text-text-wrap": textWrap
+} }));
+//#endregion
+export { varsResolver };
+
+//# sourceMappingURL=text.utils.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text.utils.mjs","names":[],"sources":["../../../src/components/text/text.utils.ts"],"sourcesContent":["import { createVarsResolver, getFontSize, getGradient, getLineHeight } from '../../core'\nimport { TextFactory } from './text.types'\n\nexport const varsResolver = createVarsResolver<TextFactory>(\n  (theme, { gradient, lineClamp, size, textWrap, variant }) => ({\n    root: {\n      '--text-fz': getFontSize(size),\n      '--text-lh': getLineHeight(size),\n      '--text-gradient': variant === 'gradient' ? getGradient(gradient, theme) : undefined,\n      '--text-line-clamp': typeof lineClamp === 'number' ? lineClamp.toString() : undefined,\n      '--text-text-wrap': textWrap,\n    },\n  })\n)\n"],"mappings":";;;;;AAGA,MAAa,eAAe,oBACzB,OAAO,EAAE,UAAU,WAAW,MAAM,UAAU,eAAe,EAC5D,MAAM;CACJ,aAAa,YAAY,IAAI;CAC7B,aAAa,cAAc,IAAI;CAC/B,mBAAmB,YAAY,aAAa,YAAY,UAAU,KAAK,IAAI,KAAA;CAC3E,qBAAqB,OAAO,cAAc,WAAW,UAAU,SAAS,IAAI,KAAA;CAC5E,oBAAoB;AACtB,EACF,EACF"}

package/esm/components/unstyled-button/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 unstyled_button_module_default from "./unstyled-button.module.mjs";
 import unstyled_button_default from "./unstyled-button.mjs";
-//#region packages/@cck-ui/core/src/components/unstyled-button/index.ts
-const UnstyledButton = withInstall(unstyled_button_default);
+const UnstyledButton = withInstall(withPropsFactory(withExtend(withClasses(unstyled_button_default, unstyled_button_module_default))));
 //#endregion
 export { UnstyledButton, UnstyledButton as default };
 

package/esm/components/unstyled-button/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["_UnstyledButton"],"sources":["../../../src/components/unstyled-button/index.ts"],"sourcesContent":["import { SFCWithInstall, withInstall } from '../../core'\nimport _UnstyledButton from './unstyled-button.vue'\n\nexport const UnstyledButton: SFCWithInstall<typeof _UnstyledButton> = withInstall(_UnstyledButton)\nexport default UnstyledButton\n\nexport * from './unstyled-button.types'\n"],"mappings":";;;;AAGA,MAAa,iBAAyD,YAAYA,uBAAe"}
+{"version":3,"file":"index.mjs","names":["_UnstyledButton","classes"],"sources":["../../../src/components/unstyled-button/index.ts"],"sourcesContent":["import {\n  SFCWithInstallAndClasses,\n  withClasses,\n  withExtend,\n  withInstall,\n  withPropsFactory,\n} from '../../core'\nimport _UnstyledButton from './unstyled-button.vue'\nimport classes from './unstyled-button.module.css'\n\nconst UnstyledButtonWithStatic = withPropsFactory(withExtend(withClasses(_UnstyledButton, classes)))\n\nexport const UnstyledButton: SFCWithInstallAndClasses<typeof _UnstyledButton, typeof classes> =\n  withInstall(UnstyledButtonWithStatic)\nexport default UnstyledButton\n\nexport * from './unstyled-button.types'\n"],"mappings":";;;;;AAYA,MAAa,iBACX,YAH+B,iBAAiB,WAAW,YAAYA,yBAAiBC,8BAAO,CAAC,CAGpF,CAAwB"}

package/esm/components/unstyled-button/unstyled-button.mjs

@@ -4,7 +4,7 @@ import { useComponentProps } from "../../core/config-provider/use-component-prop
 import { CBox } from "../../core/box/index.mjs";
 import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
 import unstyled_button_module_default from "./unstyled-button.module.mjs";
-import { computed, createBlock, defineComponent, mergeProps, openBlock, ref, renderSlot, withCtx } from "vue";
+import { computed, createBlock, defineComponent, mergeProps, openBlock, ref, renderSlot, useAttrs, withCtx } from "vue";
 //#region packages/@cck-ui/core/src/components/unstyled-button/unstyled-button.vue
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "UnstyledButton",
@@ -313,6 +313,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		}
 	},
 	setup(__props, { expose: __expose }) {
+		const attrs = useAttrs();
 		const rawProps = __props;
 		const props = useComponentProps({
 			component: "UnstyledButton",
@@ -333,7 +334,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		];
 		const getStyles = useStyles({
 			name: props.value.__staticSelector,
-			props: props.value,
+			props: {
+				...props.value,
+				...attrs
+			},
 			classes: unstyled_button_module_default,
 			className: props.value.className,
 			style: props.value.style,
@@ -354,6 +358,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		});
 		__expose({ root: computed(() => _root.value?.root ?? null) });
 		const __returned__ = {
+			attrs,
 			rawProps,
 			props,
 			tag,

package/esm/components/unstyled-button/unstyled-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"unstyled-button.mjs","names":[],"sources":["../../../src/components/unstyled-button/unstyled-button.vue"],"sourcesContent":["<template>\n  <c-box\n    ref=\"_root\"\n    v-bind=\"mergedAttrs\"\n    :tag=\"tag\"\n    :type=\"tag === 'button' ? 'button' : undefined\"\n  >\n    <slot />\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport type { UnstyledButtonFactory, UnstyledButtonProps } from './unstyled-button.types'\nimport classes from './unstyled-button.module.css'\n\ndefineOptions({\n  name: 'UnstyledButton',\n})\n\n// const props = withDefaults(defineProps<UnstyledButtonProps>(), {\n//   __staticSelector: 'UnstyledButton',\n// })\n\nconst rawProps = defineProps<UnstyledButtonProps>()\n\nconst props = useComponentProps({\n  component: 'UnstyledButton',\n  defaultProps: {\n    __staticSelector: 'UnstyledButton',\n  },\n  props: rawProps,\n})\n\nconst { tag = 'button' } = props.value\n\nconst _root = ref<InstanceType<typeof CBox> | null>(null)\n\nconst knownProps = [\n  'className',\n  'tag',\n  '__staticSelector',\n  'unstyled',\n  'classNames',\n  'styles',\n  'style',\n  'attributes',\n]\n\nconst getStyles = useStyles<UnstyledButtonFactory>({\n  name: props.value.__staticSelector!,\n  props: props.value,\n  classes,\n  className: props.value.className,\n  style: props.value.style,\n  classNames: props.value.classNames,\n  styles: props.value.styles,\n  unstyled: props.value.unstyled,\n  attributes: props.value.attributes,\n})\n\nconst rootAttrs = computed(() => getStyles('root', { focusable: true }))\nconst mergedAttrs = computed(() => {\n  const others: Record<string, any> = {}\n  const propsValue = props.value\n  for (const key in propsValue) {\n    if (!knownProps.includes(key)) {\n      others[key] = propsValue[key as keyof typeof propsValue]\n    }\n  }\n  return { ...others, ...rootAttrs.value }\n})\n\ndefineExpose({\n  root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyBA,MAAM,WAAW;EAEjB,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX,cAAc,EACZ,kBAAkB,iBACpB;GACA,OAAO;EACT,CAAC;EAED,MAAM,EAAE,MAAM,aAAa,MAAM;EAEjC,MAAM,QAAQ,IAAsC,IAAI;EAExD,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,YAAY,UAAiC;GACjD,MAAM,MAAM,MAAM;GAClB,OAAO,MAAM;GACb,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;EAC1B,CAAC;EAED,MAAM,YAAY,eAAe,UAAU,QAAQ,EAAE,WAAW,KAAK,CAAC,CAAC;EACvE,MAAM,cAAc,eAAe;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,KAAK,MAAM,OAAO,YAChB,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAG7B,OAAO;IAAE,GAAG;IAAQ,GAAG,UAAU;GAAM;EACzC,CAAC;EAED,SAAa,EACX,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC;;;;;;;;;;;;;;;;;;;;;;qBA3EC,YAOQ,OAAA,SAPR,WAOQ,EANN,KAAI,QAAO,GACH,OAAA,aAAW;EAClB,KAAK,OAAA;EACL,MAAM,OAAA,QAAG,WAAA,WAA2B,KAAA;;yBAE7B,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}
+{"version":3,"file":"unstyled-button.mjs","names":[],"sources":["../../../src/components/unstyled-button/unstyled-button.vue"],"sourcesContent":["<template>\n  <c-box\n    ref=\"_root\"\n    v-bind=\"mergedAttrs\"\n    :tag=\"tag\"\n    :type=\"tag === 'button' ? 'button' : undefined\"\n  >\n    <slot />\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport type { UnstyledButtonFactory, UnstyledButtonProps } from './unstyled-button.types'\nimport classes from './unstyled-button.module.css'\n\ndefineOptions({\n  name: 'UnstyledButton',\n})\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<UnstyledButtonProps>()\n\nconst props = useComponentProps({\n  component: 'UnstyledButton',\n  defaultProps: {\n    __staticSelector: 'UnstyledButton',\n  },\n  props: rawProps,\n})\n\nconst { tag = 'button' } = props.value\n\nconst _root = ref<InstanceType<typeof CBox> | null>(null)\n\nconst knownProps = [\n  'className',\n  'tag',\n  '__staticSelector',\n  'unstyled',\n  'classNames',\n  'styles',\n  'style',\n  'attributes',\n]\n\nconst getStyles = useStyles<UnstyledButtonFactory>({\n  name: props.value.__staticSelector!,\n  props: { ...props.value, ...attrs } as UnstyledButtonProps,\n  classes,\n  className: props.value.className,\n  style: props.value.style,\n  classNames: props.value.classNames,\n  styles: props.value.styles,\n  unstyled: props.value.unstyled,\n  attributes: props.value.attributes,\n})\n\nconst rootAttrs = computed(() => getStyles('root', { focusable: true }))\nconst mergedAttrs = computed(() => {\n  const others: Record<string, any> = {}\n  const propsValue = props.value\n  for (const key in propsValue) {\n    if (!knownProps.includes(key)) {\n      others[key] = propsValue[key as keyof typeof propsValue]\n    }\n  }\n  return { ...others, ...rootAttrs.value }\n})\n\ndefineExpose({\n  root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBA,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX,cAAc,EACZ,kBAAkB,iBACpB;GACA,OAAO;EACT,CAAC;EAED,MAAM,EAAE,MAAM,aAAa,MAAM;EAEjC,MAAM,QAAQ,IAAsC,IAAI;EAExD,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,YAAY,UAAiC;GACjD,MAAM,MAAM,MAAM;GAClB,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;EAC1B,CAAC;EAED,MAAM,YAAY,eAAe,UAAU,QAAQ,EAAE,WAAW,KAAK,CAAC,CAAC;EACvE,MAAM,cAAc,eAAe;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,KAAK,MAAM,OAAO,YAChB,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAG7B,OAAO;IAAE,GAAG;IAAQ,GAAG,UAAU;GAAM;EACzC,CAAC;EAED,SAAa,EACX,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC;;;;;;;;;;;;;;;;;;;;;;;qBAzEC,YAOQ,OAAA,SAPR,WAOQ,EANN,KAAI,QAAO,GACH,OAAA,aAAW;EAClB,KAAK,OAAA;EACL,MAAM,OAAA,QAAG,WAAA,WAA2B,KAAA;;yBAE7B,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/esm/index.mjs

@@ -59,6 +59,7 @@ import { CButton, CButtonGroup, CButtonGroupSection } from "./components/button/
 import { CCol, CGrid } from "./components/grid/index.mjs";
 import { CGroup } from "./components/group/index.mjs";
 import { CSimpleGrid } from "./components/simple-grid/index.mjs";
+import { CStack } from "./components/stack/index.mjs";
 import { CText } from "./components/text/index.mjs";
 //#region packages/@cck-ui/core/src/index.ts
 const INSTALLED_KEY = Symbol("INSTALLED_KEY");
@@ -73,6 +74,7 @@ const components = [
 	CGroup,
 	CLoader,
 	CSimpleGrid,
+	CStack,
 	CText,
 	CTransition,
 	UnstyledButton
@@ -85,6 +87,6 @@ const CckUI = { install(app) {
 	});
 } };
 //#endregion
-export { CBox, CButton, CButtonGroup, CButtonGroupSection, transitions as CCK_TRANSITIONS, CCol, CDefaultLoaders, CGrid, CGroup, CLoader, CONFIG_KEY, CSimpleGrid, CText, CTransition, CckConfigProvider, CckUI, CckUI as default, DEFAULT_THEME, FOCUS_CLASS_NAMES, STYLE_PROPS_DATA, THEME_KEY, UnstyledButton, alpha, camelToKebabCase, colorsTuple, createTheme, createVarsResolver, darken, deepMerge, defaultCssVariablesResolver, defaultVariantColorsResolver, em, extractStyleProps, filterProps, getBaseValue, getBreakpointValue, getCSSColorVariables, getComponentName, getFontSize, getGradient, getLineHeight, getPrimaryShade, getRadius, getShadow, getSize, getSortedBreakpoints, getSpacing, getThemeColor, getTransitionProps, hashStyleProps, isLightColor, isNumber, isNumberLike, isString, isStringNumber, isUndefined, isVirtualColor, keys, luminance, mergeThemeOverrides, normalizeNumberLikeStringProp, numberLikeStringToNumber, parseStyleProps, parseThemeColor, px, rem, resolveClassNames, resolveStyles, responsiveStyleManager, rgb, rgba, stylesToString, toRgba, useCckClassNamesPrefix, useCckColorScheme, useCckCssVariablesResolver, useCckEnv, useCckIsHeadless, useCckStyleNonce, useCckStylesTransform, useCckSxTransform, useCckTheme, useCckWithStaticClasses, useComponentProps, useConfigContext, useProviderColorScheme, useRandomClassName, useStyles, virtualColor, withClasses, withExtend, withInstall, withPropsDefaultSetter, withPropsFactory, withVarsResolver };
+export { CBox, CButton, CButtonGroup, CButtonGroupSection, transitions as CCK_TRANSITIONS, CCol, CDefaultLoaders, CGrid, CGroup, CLoader, CONFIG_KEY, CSimpleGrid, CStack, CText, CTransition, CckConfigProvider, CckUI, CckUI as default, DEFAULT_THEME, FOCUS_CLASS_NAMES, STYLE_PROPS_DATA, THEME_KEY, UnstyledButton, alpha, camelToKebabCase, colorsTuple, createTheme, createVarsResolver, darken, deepMerge, defaultCssVariablesResolver, defaultVariantColorsResolver, em, extractStyleProps, filterProps, getBaseValue, getBreakpointValue, getCSSColorVariables, getComponentName, getFontSize, getGradient, getLineHeight, getPrimaryShade, getRadius, getShadow, getSize, getSortedBreakpoints, getSpacing, getThemeColor, getTransitionProps, hashStyleProps, isLightColor, isNumber, isNumberLike, isString, isStringNumber, isUndefined, isVirtualColor, keys, luminance, mergeThemeOverrides, normalizeNumberLikeStringProp, numberLikeStringToNumber, parseStyleProps, parseThemeColor, px, rem, resolveClassNames, resolveStyles, responsiveStyleManager, rgb, rgba, stylesToString, toRgba, useCckClassNamesPrefix, useCckColorScheme, useCckCssVariablesResolver, useCckEnv, useCckIsHeadless, useCckStyleNonce, useCckStylesTransform, useCckSxTransform, useCckTheme, useCckWithStaticClasses, useComponentProps, useConfigContext, useProviderColorScheme, useRandomClassName, useStyles, virtualColor, withClasses, withExtend, withInstall, withPropsDefaultSetter, withPropsFactory, withVarsResolver };
 
 //# sourceMappingURL=index.mjs.map

package/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../src/index.ts"],"sourcesContent":["import type { App, Plugin } from 'vue'\nimport {\n  CButton,\n  CButtonGroup,\n  CButtonGroupSection,\n  CCol,\n  CGrid,\n  CGroup,\n  CLoader,\n  CSimpleGrid,\n  CText,\n  CTransition,\n  UnstyledButton,\n} from './components'\nimport { CckConfigProvider, CBox } from './core'\n\nconst INSTALLED_KEY = Symbol('INSTALLED_KEY')\n\nconst components = [\n  CckConfigProvider,\n  CBox,\n  CButton,\n  CButtonGroup,\n  CButtonGroupSection,\n  CGrid,\n  CCol,\n  CGroup,\n  CLoader,\n  CSimpleGrid,\n  CText,\n  CTransition,\n  UnstyledButton,\n]\n\nconst CckUI: Plugin = {\n  install(app: App) {\n    if ((app as any)[INSTALLED_KEY]) {\n      return\n    }\n    ;(app as any)[INSTALLED_KEY] = true\n    components.forEach((c) => {\n      if (c.name) {\n        app.component(c.name, c)\n      }\n    })\n  },\n}\n\nexport default CckUI\nexport { CckUI }\n\nexport * from './components'\nexport * from './core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,gBAAgB,OAAO,eAAe;AAE5C,MAAM,aAAa;CACjB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,QAAgB,EACpB,QAAQ,KAAU;CAChB,IAAK,IAAY,gBACf;CAED,IAAa,iBAAiB;CAC/B,WAAW,SAAS,MAAM;EACxB,IAAI,EAAE,MACJ,IAAI,UAAU,EAAE,MAAM,CAAC;CAE3B,CAAC;AACH,EACF"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/index.ts"],"sourcesContent":["import type { App, Plugin } from 'vue'\nimport {\n  CButton,\n  CButtonGroup,\n  CButtonGroupSection,\n  CCol,\n  CGrid,\n  CGroup,\n  CLoader,\n  CSimpleGrid,\n  CStack,\n  CText,\n  CTransition,\n  UnstyledButton,\n} from './components'\nimport { CckConfigProvider, CBox } from './core'\n\nconst INSTALLED_KEY = Symbol('INSTALLED_KEY')\n\nconst components = [\n  CckConfigProvider,\n  CBox,\n  CButton,\n  CButtonGroup,\n  CButtonGroupSection,\n  CGrid,\n  CCol,\n  CGroup,\n  CLoader,\n  CSimpleGrid,\n  CStack,\n  CText,\n  CTransition,\n  UnstyledButton,\n]\n\nconst CckUI: Plugin = {\n  install(app: App) {\n    if ((app as any)[INSTALLED_KEY]) {\n      return\n    }\n    ;(app as any)[INSTALLED_KEY] = true\n    components.forEach((c) => {\n      if (c.name) {\n        app.component(c.name, c)\n      }\n    })\n  },\n}\n\nexport default CckUI\nexport { CckUI }\n\nexport * from './components'\nexport * from './core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAM,gBAAgB,OAAO,eAAe;AAE5C,MAAM,aAAa;CACjB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,QAAgB,EACpB,QAAQ,KAAU;CAChB,IAAK,IAAY,gBACf;CAED,IAAa,iBAAiB;CAC/B,WAAW,SAAS,MAAM;EACxB,IAAI,EAAE,MACJ,IAAI,UAAU,EAAE,MAAM,CAAC;CAE3B,CAAC;AACH,EACF"}

package/lib/components/button/button-group/button-group.utils.d.ts

@@ -0,0 +1,6 @@
+export declare const varsResolver: import("../../..").VarsResolver<{
+    props: import("./button-group.types").ButtonGroupProps;
+    ref: HTMLDivElement;
+    stylesNames: import("./button-group.types").ButtonGroupStylesNames;
+    vars: import("./button-group.types").ButtonGroupCssVariables;
+}>;

package/lib/components/button/button-group-section/button-group-section.utils.d.ts

@@ -0,0 +1,7 @@
+export declare const varsResolver: import("../../..").VarsResolver<{
+    props: import("./button-group-section.types").ButtonGroupSectionProps;
+    ref: HTMLDivElement;
+    stylesNames: import("./button-group-section.types").ButtonGroupSectionStylesNames;
+    vars: import("./button-group-section.types").ButtonGroupSectionCssVariables;
+    variant: import("..").ButtonVariant;
+}>;

package/lib/components/button/index.d.ts

@@ -1,13 +1,13 @@
-import { type SFCWithInstall, type SFCWithInstallAndClasses } from '../../core';
+import { type SFCWithInstallAndClasses } from '../../core';
 import ButtonGroup from './button-group/button-group.vue';
 import ButtonGroupSection from './button-group-section/button-group-section.vue';
 import Button from './button.vue';
 import classes from './button.module.css';
-export declare const CButtonGroup: SFCWithInstall<typeof ButtonGroup>;
-export declare const CButtonGroupSection: SFCWithInstall<typeof ButtonGroupSection>;
+export declare const CButtonGroup: SFCWithInstallAndClasses<typeof ButtonGroup, typeof classes>;
+export declare const CButtonGroupSection: SFCWithInstallAndClasses<typeof ButtonGroupSection, typeof classes>;
 export declare const CButton: SFCWithInstallAndClasses<typeof Button, typeof classes> & {
-    ButtonGroup: typeof ButtonGroup;
-    ButtonGroupSection: typeof ButtonGroupSection;
+    CButtonGroup: typeof CButtonGroup;
+    CButtonGroupSection: typeof CButtonGroupSection;
 };
 export default CButton;
 export * from './button-group-section/button-group-section.types';

package/lib/components/group/group.utils.d.ts

@@ -0,0 +1,7 @@
+export declare const varsResolver: import("../..").VarsResolver<{
+    props: import("./group.types").GroupProps;
+    ref: HTMLDivElement;
+    stylesNames: import("./group.types").GroupStylesNames;
+    vars: import("./group.types").GroupCssVariables;
+    ctx: import("./group.types").GroupStylesCtx;
+}>;

package/lib/components/group/index.d.ts

@@ -1,5 +1,6 @@
-import { SFCWithInstall } from '../../core';
+import { SFCWithInstallAndClasses } from '../../core';
 import Group from './group.vue';
-export declare const CGroup: SFCWithInstall<typeof Group>;
+import classes from './group.module.css';
+export declare const CGroup: SFCWithInstallAndClasses<typeof Group, typeof classes>;
 export default CGroup;
 export * from './group.types';

package/lib/components/index.d.ts

@@ -3,6 +3,7 @@ export * from './grid';
 export * from './group';
 export * from './loader';
 export * from './simple-grid';
+export * from './stack';
 export * from './transition';
 export * from './text';
 export * from './unstyled-button';

package/lib/components/loader/index.d.ts

@@ -1,7 +1,8 @@
-import { SFCWithInstall } from '../../core';
+import { SFCWithInstallAndClasses } from '../../core';
 import Loader from './loader.vue';
 import { CLoadersRecord } from './loader.types.js';
+import classes from './loader.module.css';
 export declare const CDefaultLoaders: CLoadersRecord;
-export declare const CLoader: SFCWithInstall<typeof Loader>;
+export declare const CLoader: SFCWithInstallAndClasses<typeof Loader, typeof classes>;
 export default CLoader;
 export * from './loader.types';

package/lib/components/loader/loader.utils.d.ts

@@ -0,0 +1,9 @@
+export declare const varsResolver: import("../..").VarsResolver<{
+    props: import("./loader.types").LoaderProps;
+    ref: SVGSVGElement;
+    stylesNames: import("./loader.types").LoaderStylesNames;
+    vars: import("./loader.types").LoaderCssVariables;
+    staticComponents: {
+        defaultLoaders: typeof import(".").CDefaultLoaders;
+    };
+}>;

package/lib/components/simple-grid/index.d.ts

@@ -1,5 +1,6 @@
-import { SFCWithInstall } from '../../core';
+import { SFCWithInstallAndClasses } from '../../core';
 import SimpleGrid from './simple-grid.vue';
-export declare const CSimpleGrid: SFCWithInstall<typeof SimpleGrid>;
+import classes from './simple-grid.module.css';
+export declare const CSimpleGrid: SFCWithInstallAndClasses<typeof SimpleGrid, typeof classes>;
 export default CSimpleGrid;
 export * from './simple-grid.types';

package/lib/components/stack/index.d.ts

@@ -0,0 +1,6 @@
+import Stack from './stack.vue';
+import classes from './stack.module.css';
+import { SFCWithInstallAndClasses } from '../../core';
+export declare const CStack: SFCWithInstallAndClasses<typeof Stack, typeof classes>;
+export default CStack;
+export * from './stack.types';

package/lib/components/stack/stack.types.d.ts

@@ -0,0 +1,29 @@
+import { Properties } from 'csstype';
+import { BoxProps, CSpacing, ElementProps, Factory, StylesApiProps } from '../../core';
+export type StackStylesNames = 'root';
+export type StackCssVariables = {
+    root: '--stack-gap' | '--stack-align' | '--stack-justify';
+};
+export interface StackProps extends BoxProps, StylesApiProps<StackFactory>, /* @vue-ignore */ ElementProps<'div'> {
+    /**
+     * @description Key of `theme.spacing` or any valid CSS value to set `gap` property, numbers are converted to rem
+     * @default 'md'
+     */
+    gap?: CSpacing;
+    /**
+     * @description Controls `align-items` CSS property
+     * @default 'stretch'
+     */
+    align?: Properties['alignItems'];
+    /**
+     * @description Controls `justify-content` CSS property
+     * @default 'flex-start'
+     */
+    justify?: Properties['justifyContent'];
+}
+export type StackFactory = Factory<{
+    props: StackProps;
+    ref: HTMLDivElement;
+    stylesNames: StackStylesNames;
+    vars: StackCssVariables;
+}>;

package/lib/components/stack/stack.utils.d.ts

@@ -0,0 +1,6 @@
+export declare const varsResolver: import("../..").VarsResolver<{
+    props: import("./stack.types").StackProps;
+    ref: HTMLDivElement;
+    stylesNames: import("./stack.types").StackStylesNames;
+    vars: import("./stack.types").StackCssVariables;
+}>;

package/lib/components/text/index.d.ts

@@ -1,5 +1,6 @@
-import { SFCWithInstall } from '../../core';
+import { SFCWithInstallAndClasses } from '../../core';
 import Text from './text.vue';
-export declare const CText: SFCWithInstall<typeof Text>;
+import classes from './text.module.css';
+export declare const CText: SFCWithInstallAndClasses<typeof Text, typeof classes>;
 export default CText;
 export * from './text.types';

package/lib/components/text/text.utils.d.ts

@@ -0,0 +1,8 @@
+export declare const varsResolver: import("../..").VarsResolver<{
+    props: import("./text.types").TextProps;
+    defaultComponent: "p";
+    defaultRef: HTMLParagraphElement;
+    stylesNames: import("./text.types").TextStylesNames;
+    vars: import("./text.types").TextCssVariables;
+    variant: import("./text.types").TextVariant;
+}>;

package/lib/components/unstyled-button/index.d.ts

@@ -1,5 +1,6 @@
-import { SFCWithInstall } from '../../core';
+import { SFCWithInstallAndClasses } from '../../core';
 import _UnstyledButton from './unstyled-button.vue';
-export declare const UnstyledButton: SFCWithInstall<typeof _UnstyledButton>;
+import classes from './unstyled-button.module.css';
+export declare const UnstyledButton: SFCWithInstallAndClasses<typeof _UnstyledButton, typeof classes>;
 export default UnstyledButton;
 export * from './unstyled-button.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cck-ui/core",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "Vue component library focused on usability, accessibility and developer experience",
   "homepage": "https://cck-ui.jackatlas.xyz",
   "license": "ISC",

package/styles/stack.css

@@ -0,0 +1,7 @@
+.m_f6a13507 {
+  display: flex;
+  flex-direction: column;
+  align-items: var(--stack-align, stretch);
+  justify-content: var(--stack-justify, flex-start);
+  gap: var(--stack-gap, var(--c-spacing-md));
+}

package/styles/stack.layer.css

@@ -0,0 +1,8 @@
+@layer cck {.m_f6a13507 {
+  display: flex;
+  flex-direction: column;
+  align-items: var(--stack-align, stretch);
+  justify-content: var(--stack-justify, flex-start);
+  gap: var(--stack-gap, var(--c-spacing-md));
+}
+}

package/styles.css

@@ -1068,6 +1068,14 @@ fieldset:disabled .c-active:active {
   grid-template-columns: repeat(auto-fit, minmax(var(--sg-min-col-width), 1fr));
 }
 
+.m_f6a13507 {
+  display: flex;
+  flex-direction: column;
+  align-items: var(--stack-align, stretch);
+  justify-content: var(--stack-justify, flex-start);
+  gap: var(--stack-gap, var(--c-spacing-md));
+}
+
 .m_3f669182 {
   -webkit-tap-highlight-color: transparent;
   text-decoration: none;

package/styles.layer.css

@@ -1068,6 +1068,14 @@ fieldset:disabled .c-active:active {
   grid-template-columns: repeat(auto-fit, minmax(var(--sg-min-col-width), 1fr));
 }
 
+.m_f6a13507 {
+  display: flex;
+  flex-direction: column;
+  align-items: var(--stack-align, stretch);
+  justify-content: var(--stack-justify, flex-start);
+  gap: var(--stack-gap, var(--c-spacing-md));
+}
+
 .m_3f669182 {
   -webkit-tap-highlight-color: transparent;
   text-decoration: none;

package/cjs/components/loader/use-loader.cjs

@@ -1,10 +0,0 @@
-"use client";
-let vue = require("vue");
-//#region packages/@cck-ui/core/src/components/loader/use-loader.ts
-const useLoader = () => {
-	return { _ref: (0, vue.ref)() };
-};
-//#endregion
-exports.useLoader = useLoader;
-
-//# sourceMappingURL=use-loader.cjs.map

package/cjs/components/loader/use-loader.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-loader.cjs","names":[],"sources":["../../../src/components/loader/use-loader.ts"],"sourcesContent":["import { ref } from 'vue'\n\nexport const useLoader = () => {\n  const _ref = ref<HTMLElement | SVGElement>()\n\n  return { _ref }\n}\n"],"mappings":";;;AAEA,MAAa,kBAAkB;CAG7B,OAAO,EAAE,OAAA,GAAA,IAAA,IAAA,CAAG,EAAE;AAChB"}

package/esm/components/loader/use-loader.mjs

@@ -1,10 +0,0 @@
-"use client";
-import { ref } from "vue";
-//#region packages/@cck-ui/core/src/components/loader/use-loader.ts
-const useLoader = () => {
-	return { _ref: ref() };
-};
-//#endregion
-export { useLoader };
-
-//# sourceMappingURL=use-loader.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"use-loader.mjs","names":[],"sources":["../../../src/components/loader/use-loader.ts"],"sourcesContent":["import { ref } from 'vue'\n\nexport const useLoader = () => {\n  const _ref = ref<HTMLElement | SVGElement>()\n\n  return { _ref }\n}\n"],"mappings":";;;AAEA,MAAa,kBAAkB;CAG7B,OAAO,EAAE,MAFI,IAED,EAAE;AAChB"}