@cck-ui/core 0.2.0 → 0.4.0

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

@@ -375,7 +375,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 		_: 1
 	}, 16, ["mod"]);
 }
-var button_group_default = /*#__PURE__*/ require_export_helper.default(_sfc_main, [["render", _sfc_render], ["__file", "D:\\work\\jackatlas\\cck-ui\\packages\\@cck-ui\\core\\src\\components\\button\\button-group\\button-group.vue"]]);
+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
 exports.default = button_group_default;
 

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","../../../../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",null],"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mDCxDpC,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 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"}

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

@@ -24,7 +24,8 @@ const getValidButtons = (children) => {
 };
 const useButtonGroup = (slots) => {
 	return { validChildren: (0, vue.computed)(() => {
-		return getValidButtons(slots.default?.() ?? []);
+		const defaultSlot = slots.default?.() ?? [];
+		return getValidButtons(defaultSlot);
 	}) };
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"use-button-group.cjs","names":["Comment","Text","Fragment","CButton","CButtonGroupSection","getComponentName"],"sources":["../../../../src/components/button/button-group/use-button-group.ts"],"sourcesContent":["import { Comment, Fragment, Slots, Text, VNode, computed, isVNode } from 'vue'\nimport { getComponentName } from '../../../core/utils'\nimport CButton from '../button.vue'\nimport CButtonGroupSection from '../button-group-section/button-group-section.vue'\n\nexport const getValidButtons = (children: VNode[]): VNode[] => {\n  const result: VNode[] = []\n\n  for (const child of children) {\n    if (!isVNode(child)) {\n      continue\n    }\n\n    if (child.type === Comment || child.type === Text) {\n      continue\n    }\n\n    if (child.type === Fragment) {\n      const fragmentChildren = Array.isArray(child.children) ? child.children : [child.children]\n      result.push(...getValidButtons(fragmentChildren as VNode[]))\n      continue\n    }\n\n    if (child.type !== CButton && child.type !== CButtonGroupSection) {\n      console.error(\n        '[CButtonGroup] invalid child component: only CButton or CButtonGroupSection components are allowed as direct children.',\n        `Received: <${getComponentName(child.type)}>.`,\n        'Please ensure all direct children are <c-button> or <c-button-group-section> components.'\n      )\n      continue\n    }\n\n    result.push(child)\n  }\n\n  return result\n}\n\nexport const useButtonGroup = (slots: Slots) => {\n  const validChildren = computed(() => {\n    const defaultSlot = slots.default?.() ?? []\n    return getValidButtons(defaultSlot)\n  })\n\n  return { validChildren }\n}\n"],"mappings":";;;;;;AAKA,MAAa,mBAAmB,aAA+B;CAC7D,MAAM,SAAkB,CAAC;CAEzB,KAAK,MAAM,SAAS,UAAU;EAC5B,IAAI,EAAA,GAAA,IAAA,QAAA,CAAS,KAAK,GAChB;EAGF,IAAI,MAAM,SAASA,IAAAA,WAAW,MAAM,SAASC,IAAAA,MAC3C;EAGF,IAAI,MAAM,SAASC,IAAAA,UAAU;GAC3B,MAAM,mBAAmB,MAAM,QAAQ,MAAM,QAAQ,IAAI,MAAM,WAAW,CAAC,MAAM,QAAQ;GACzF,OAAO,KAAK,GAAG,gBAAgB,gBAA2B,CAAC;GAC3D;EACF;EAEA,IAAI,MAAM,SAASC,eAAAA,WAAW,MAAM,SAASC,6BAAAA,SAAqB;GAChE,QAAQ,MACN,0HACA,cAAcC,kBAAAA,iBAAiB,MAAM,IAAI,EAAE,KAC3C,0FACF;GACA;EACF;EAEA,OAAO,KAAK,KAAK;CACnB;CAEA,OAAO;AACT;AAEA,MAAa,kBAAkB,UAAiB;CAM9C,OAAO,EAAE,gBAAA,GAAA,IAAA,SAAA,OAL4B;EAEnC,OAAO,gBADa,MAAM,UAAU,KAAK,CAAC,CACR;CACpC,CAEqB,EAAE;AACzB"}
+{"version":3,"file":"use-button-group.cjs","names":["Comment","Text","Fragment","CButton","CButtonGroupSection","getComponentName"],"sources":["../../../../src/components/button/button-group/use-button-group.ts"],"sourcesContent":["import { Comment, Fragment, Slots, Text, VNode, computed, isVNode } from 'vue'\nimport { getComponentName } from '../../../core/utils'\nimport CButton from '../button.vue'\nimport CButtonGroupSection from '../button-group-section/button-group-section.vue'\n\nexport const getValidButtons = (children: VNode[]): VNode[] => {\n  const result: VNode[] = []\n\n  for (const child of children) {\n    if (!isVNode(child)) {\n      continue\n    }\n\n    if (child.type === Comment || child.type === Text) {\n      continue\n    }\n\n    if (child.type === Fragment) {\n      const fragmentChildren = Array.isArray(child.children) ? child.children : [child.children]\n      result.push(...getValidButtons(fragmentChildren as VNode[]))\n      continue\n    }\n\n    if (child.type !== CButton && child.type !== CButtonGroupSection) {\n      console.error(\n        '[CButtonGroup] invalid child component: only CButton or CButtonGroupSection components are allowed as direct children.',\n        `Received: <${getComponentName(child.type)}>.`,\n        'Please ensure all direct children are <c-button> or <c-button-group-section> components.'\n      )\n      continue\n    }\n\n    result.push(child)\n  }\n\n  return result\n}\n\nexport const useButtonGroup = (slots: Slots) => {\n  const validChildren = computed(() => {\n    const defaultSlot = slots.default?.() ?? []\n    return getValidButtons(defaultSlot)\n  })\n\n  return { validChildren }\n}\n"],"mappings":";;;;;;AAKA,MAAa,mBAAmB,aAA+B;CAC7D,MAAM,SAAkB,CAAC;CAEzB,KAAK,MAAM,SAAS,UAAU;EAC5B,IAAI,EAAA,GAAA,IAAA,QAAA,CAAS,KAAK,GAChB;EAGF,IAAI,MAAM,SAASA,IAAAA,WAAW,MAAM,SAASC,IAAAA,MAC3C;EAGF,IAAI,MAAM,SAASC,IAAAA,UAAU;GAC3B,MAAM,mBAAmB,MAAM,QAAQ,MAAM,QAAQ,IAAI,MAAM,WAAW,CAAC,MAAM,QAAQ;GACzF,OAAO,KAAK,GAAG,gBAAgB,gBAA2B,CAAC;GAC3D;EACF;EAEA,IAAI,MAAM,SAASC,eAAAA,WAAW,MAAM,SAASC,6BAAAA,SAAqB;GAChE,QAAQ,MACN,0HACA,cAAcC,kBAAAA,iBAAiB,MAAM,IAAI,EAAE,KAC3C,0FACF;GACA;EACF;EAEA,OAAO,KAAK,KAAK;CACnB;CAEA,OAAO;AACT;AAEA,MAAa,kBAAkB,UAAiB;CAM9C,OAAO,EAAE,gBAAA,GAAA,IAAA,SAAA,OAL4B;EACnC,MAAM,cAAc,MAAM,UAAU,KAAK,CAAC;EAC1C,OAAO,gBAAgB,WAAW;CACpC,CAEqB,EAAE;AACzB"}

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

@@ -392,7 +392,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 		_: 3
 	}, 16);
 }
-var button_group_section_default = /*#__PURE__*/ require_export_helper.default(_sfc_main, [["render", _sfc_render], ["__file", "D:\\work\\jackatlas\\cck-ui\\packages\\@cck-ui\\core\\src\\components\\button\\button-group-section\\button-group-section.vue"]]);
+var button_group_section_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-section/button-group-section.vue"]]);
 //#endregion
 exports.default = button_group_section_default;
 

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","../../../../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",null],"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;;;;;;;;;;;;;mDC5E7D,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 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"}

package/cjs/components/button/button.cjs

@@ -1,4 +1,5 @@
 "use client";
+const require_rem = require("../../core/utils/units-converters/rem.cjs");
 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_index = require("../../core/box/index.cjs");
@@ -6,13 +7,15 @@ const require_create_vars_resolver = require("../../core/styles-api/create-vars-
 const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
 const require_button_module = require("./button.module.cjs");
 const require_index$1 = require("../unstyled-button/index.cjs");
+const require_index$2 = require("../loader/index.cjs");
+const require_index$3 = require("../transition/index.cjs");
 let vue = require("vue");
 //#region packages/@cck-ui/core/src/components/button/button.vue
 const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 	name: "CButton",
 	__name: "button",
 	props: {
-		"data-disabled": {
+		dataDisabled: {
 			type: Boolean,
 			required: false
 		},
@@ -54,8 +57,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 		},
 		radius: {
 			type: null,
-			required: false,
-			default: "4px"
+			required: false
 		},
 		rightSection: {
 			type: null,
@@ -63,18 +65,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 		},
 		size: {
 			type: null,
-			required: false,
-			default: "sm"
-		},
-		tag: {
-			type: null,
-			required: false,
-			default: "button"
-		},
-		variant: {
-			type: String,
-			required: false,
-			default: "default"
+			required: false
 		},
 		className: {
 			type: String,
@@ -345,6 +336,10 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			type: Boolean,
 			required: false
 		},
+		variant: {
+			type: null,
+			required: false
+		},
 		classNames: {
 			type: null,
 			required: false
@@ -367,6 +362,18 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 		const slots = (0, vue.useSlots)();
 		const hasLeftSlot = (0, vue.computed)(() => !!slots["left-section"]);
 		const hasRightSlot = (0, vue.computed)(() => !!slots["right-section"]);
+		const loaderTransition = {
+			in: {
+				opacity: 1,
+				transform: `translate(-50%, calc(-50% + ${require_rem.rem(1)}))`
+			},
+			out: {
+				opacity: 0,
+				transform: "translate(-50%, -200%)"
+			},
+			common: { transformOrigin: "center" },
+			transitionProperty: "transform, opacity"
+		};
 		const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { radius, color, gradient, variant, size, justify, autoContrast }) => {
 			const colors = theme.variantColorResolver({
 				color: color || theme.primaryColor,
@@ -384,67 +391,85 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 				"--button-bg": color || variant ? colors.background : void 0,
 				"--button-hover": color || variant ? colors.hover : void 0,
 				"--button-color": colors.color,
-				"--button-bd": color || variant ? colors.color : void 0,
+				"--button-bd": color || variant ? colors.border : void 0,
 				"--button-hover-color": color || variant ? colors.hoverColor : void 0
 			} };
 		});
 		const props = __props;
-		const { style, vars, className, color, disabled, leftSection, rightSection, fullWidth, variant, radius, loading, loaderProps, gradient, classNames, styles, unstyled, "data-disabled": dataDisabled, autoContrast, mod, attributes, ...others } = props;
+		const knownProps = [
+			"style",
+			"vars",
+			"className",
+			"color",
+			"disabled",
+			"leftSection",
+			"rightSection",
+			"fullWidth",
+			"radius",
+			"loading",
+			"loaderProps",
+			"gradient",
+			"classNames",
+			"styles",
+			"unstyled",
+			"dataDisabled",
+			"autoContrast",
+			"mod",
+			"attributes"
+		];
 		const getStyles = require_use_styles.useStyles({
 			name: "Button",
 			props,
 			classes: require_button_module.default,
-			className,
-			style,
-			classNames,
-			styles,
-			unstyled,
-			attributes,
-			vars,
+			className: props.className,
+			style: props.style,
+			classNames: props.classNames,
+			styles: props.styles,
+			unstyled: props.unstyled,
+			attributes: props.attributes,
+			vars: props.vars,
 			varsResolver
 		});
-		const rootAttrs = (0, vue.computed)(() => getStyles("root"));
+		const rootAttrs = (0, vue.computed)(() => getStyles("root", { active: !props.disabled && !props.loading && !props.dataDisabled }));
 		const __returned__ = {
 			slots,
 			hasLeftSlot,
 			hasRightSlot,
+			loaderTransition,
 			varsResolver,
 			props,
-			style,
-			vars,
-			className,
-			color,
-			disabled,
-			leftSection,
-			rightSection,
-			fullWidth,
-			variant,
-			radius,
-			loading,
-			loaderProps,
-			gradient,
-			classNames,
-			styles,
-			unstyled,
-			dataDisabled,
-			autoContrast,
-			mod,
-			attributes,
-			others,
+			knownProps,
 			getStyles,
 			rootAttrs,
-			mergedRootAttrs: (0, vue.computed)(() => ({
-				...others,
-				...rootAttrs.value
-			})),
+			mergedRootAttrs: (0, vue.computed)(() => {
+				const others = {};
+				for (const key in props) if (!knownProps.includes(key)) others[key] = props[key];
+				return {
+					...others,
+					...rootAttrs.value
+				};
+			}),
 			innerAttrs: (0, vue.computed)(() => getStyles("inner")),
 			sectionAttrs: (0, vue.computed)(() => getStyles("section")),
 			labelAttrs: (0, vue.computed)(() => getStyles("label")),
+			modList: (0, vue.computed)(() => [{
+				disabled: props.disabled || props.dataDisabled,
+				loading: props.loading,
+				block: props.fullWidth,
+				"with-left-section": hasLeftSlot.value || !!props.leftSection,
+				"with-right-section": hasRightSlot.value || !!props.rightSection
+			}]),
 			get CBox() {
 				return require_index.CBox;
 			},
 			get UnstyledButton() {
 				return require_index$1.UnstyledButton;
+			},
+			get CLoader() {
+				return require_index$2.CLoader;
+			},
+			get CTransition() {
+				return require_index$3.CTransition;
 			}
 		};
 		Object.defineProperty(__returned__, "__isScriptSetup", {
@@ -456,18 +481,25 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 	return (0, vue.openBlock)(), (0, vue.createBlock)($setup["UnstyledButton"], (0, vue.mergeProps)($setup.mergedRootAttrs, {
-		disabled: $setup.disabled || $setup.loading,
-		unstyled: $setup.unstyled,
-		variant: $setup.variant,
-		mod: [{
-			disabled: $setup.disabled || $setup.dataDisabled,
-			loading: $setup.loading,
-			block: $setup.fullWidth,
-			"with-left-section": $setup.hasLeftSlot || $setup.leftSection,
-			"with-right-section": $setup.hasRightSlot || $setup.rightSection
-		}]
+		disabled: $props.disabled || $props.loading,
+		unstyled: $props.unstyled,
+		mod: $setup.modList
 	}), {
-		default: (0, vue.withCtx)(() => [(0, vue.createVNode)($setup["CBox"], (0, vue.normalizeProps)((0, vue.guardReactiveProps)($setup.innerAttrs)), {
+		default: (0, vue.withCtx)(() => [typeof $setup.props.loading === "boolean" ? ((0, vue.openBlock)(), (0, vue.createBlock)($setup["CTransition"], {
+			key: 0,
+			mounted: $setup.props.loading,
+			transition: $setup.loaderTransition,
+			duration: 150
+		}, {
+			default: (0, vue.withCtx)(({ styles }) => [(0, vue.createVNode)($setup["CBox"], (0, vue.mergeProps)({ tag: "span" }, $setup.getStyles("loader", { style: styles }), { "aria-hidden": "true" }), {
+				default: (0, vue.withCtx)(() => [(0, vue.createVNode)($setup["CLoader"], (0, vue.mergeProps)({
+					color: "var(--button-color)",
+					size: "calc(var(--button-height) / 1.8)"
+				}, $setup.props.loaderProps), null, 16)]),
+				_: 1
+			}, 16)]),
+			_: 1
+		}, 8, ["mounted"])) : (0, vue.createCommentVNode)("v-if", true), (0, vue.createVNode)($setup["CBox"], (0, vue.mergeProps)({ tag: "span" }, $setup.innerAttrs), {
 			default: (0, vue.withCtx)(() => [
 				_ctx.$slots["left-section"] ? ((0, vue.openBlock)(), (0, vue.createBlock)($setup["CBox"], (0, vue.mergeProps)({ key: 0 }, $setup.sectionAttrs, {
 					tag: "span",
@@ -475,16 +507,16 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 				}), {
 					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "left-section")]),
 					_: 3
-				}, 16)) : $setup.leftSection ? ((0, vue.openBlock)(), (0, vue.createBlock)($setup["CBox"], (0, vue.mergeProps)({ key: 1 }, $setup.sectionAttrs, {
+				}, 16)) : $props.leftSection ? ((0, vue.openBlock)(), (0, vue.createBlock)($setup["CBox"], (0, vue.mergeProps)({ key: 1 }, $setup.sectionAttrs, {
 					tag: "span",
 					mod: { position: "left" }
 				}), {
-					default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)($setup.leftSection)))]),
+					default: (0, vue.withCtx)(() => [(0, vue.createCommentVNode)(" TODO "), ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)($props.leftSection)))]),
 					_: 1
 				}, 16)) : (0, vue.createCommentVNode)("v-if", true),
 				(0, vue.createVNode)($setup["CBox"], (0, vue.mergeProps)($setup.labelAttrs, {
 					tag: "span",
-					mod: { loading: $setup.loading }
+					mod: { loading: $props.loading }
 				}), {
 					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 					_: 3
@@ -495,11 +527,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 				}), {
 					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "right-section")]),
 					_: 3
-				}, 16)) : $setup.rightSection ? ((0, vue.openBlock)(), (0, vue.createBlock)($setup["CBox"], (0, vue.mergeProps)({ key: 3 }, $setup.sectionAttrs, {
+				}, 16)) : $props.rightSection ? ((0, vue.openBlock)(), (0, vue.createBlock)($setup["CBox"], (0, vue.mergeProps)({ key: 3 }, $setup.sectionAttrs, {
 					tag: "span",
 					mod: { position: "right" }
 				}), {
-					default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)($setup.rightSection)))]),
+					default: (0, vue.withCtx)(() => [(0, vue.createCommentVNode)(" TODO "), ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)($props.rightSection)))]),
 					_: 1
 				}, 16)) : (0, vue.createCommentVNode)("v-if", true)
 			]),
@@ -509,11 +541,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 	}, 16, [
 		"disabled",
 		"unstyled",
-		"variant",
 		"mod"
 	]);
 }
-var button_default = /*#__PURE__*/ require_export_helper.default(_sfc_main, [["render", _sfc_render], ["__file", "D:\\work\\jackatlas\\cck-ui\\packages\\@cck-ui\\core\\src\\components\\button\\button.vue"]]);
+var button_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.vue"]]);
 //#endregion
 exports.default = button_default;
 

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

@@ -1 +1 @@
-{"version":3,"file":"button.cjs","names":[],"sources":["../../../src/components/button/button.vue","../../../src/components/button/button.vue"],"sourcesContent":["<template>\n  <unstyled-button\n    v-bind=\"mergedRootAttrs\"\n    :disabled=\"disabled || loading\"\n    :unstyled=\"unstyled\"\n    :variant=\"variant\"\n    :mod=\"[\n      {\n        disabled: disabled || dataDisabled,\n        loading,\n        block: fullWidth,\n        'with-left-section': hasLeftSlot || leftSection,\n        'with-right-section': hasRightSlot || rightSection,\n      },\n    ]\"\n  >\n    <c-box v-bind=\"innerAttrs\">\n      <c-box\n        v-if=\"$slots['left-section']\"\n        v-bind=\"sectionAttrs\"\n        tag=\"span\"\n        :mod=\"{ position: 'left' }\"\n      >\n        <slot name=\"left-section\"></slot>\n      </c-box>\n      <c-box v-else-if=\"leftSection\" v-bind=\"sectionAttrs\" tag=\"span\" :mod=\"{ position: 'left' }\">\n        <component :is=\"leftSection\" />\n      </c-box>\n      <c-box v-bind=\"labelAttrs\" tag=\"span\" :mod=\"{ loading }\">\n        <slot />\n      </c-box>\n      <c-box\n        v-if=\"$slots['right-section']\"\n        v-bind=\"sectionAttrs\"\n        tag=\"span\"\n        :mod=\"{ position: 'right' }\"\n      >\n        <slot name=\"right-section\"></slot>\n      </c-box>\n      <c-box v-else-if=\"rightSection\" v-bind=\"sectionAttrs\" tag=\"span\" :mod=\"{ position: 'right' }\">\n        <component :is=\"rightSection\" />\n      </c-box>\n    </c-box>\n  </unstyled-button>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, useSlots } from 'vue'\nimport { CBox, createVarsResolver, getFontSize, getRadius, getSize, useStyles } from '../../core'\nimport { UnstyledButton } from '../unstyled-button'\nimport { ButtonFactory, type ButtonProps } from './button.types'\nimport classes from './button.module.css'\n\ndefineOptions({\n  name: 'CButton',\n})\n\ndefineSlots<{\n  'left-section': any\n  'right-section': any\n  default: any\n}>()\n\nconst slots = useSlots()\n\nconst hasLeftSlot = computed(() => !!slots['left-section'])\nconst hasRightSlot = computed(() => !!slots['right-section'])\n\nconst varsResolver = createVarsResolver<ButtonFactory>(\n  (theme, { radius, color, gradient, variant, size, justify, autoContrast }) => {\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      root: {\n        '--button-justify': justify,\n        '--button-height': getSize(size, 'button-height'),\n        '--button-padding-x': getSize(size, 'button-padding-x'),\n        '--button-fz': size?.includes('compact')\n          ? getFontSize(size.replace('compact-', ''))\n          : getFontSize(size),\n        '--button-radius': radius === undefined ? undefined : getRadius(radius),\n        '--button-bg': color || variant ? colors.background : undefined,\n        '--button-hover': color || variant ? colors.hover : undefined,\n        '--button-color': colors.color,\n        '--button-bd': color || variant ? colors.color : undefined,\n        '--button-hover-color': color || variant ? colors.hoverColor : undefined,\n      },\n    }\n  }\n)\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n  radius: '4px',\n  size: 'sm',\n  tag: 'button',\n  variant: 'default',\n})\n\nconst {\n  style,\n  vars,\n  className,\n  color,\n  disabled,\n  leftSection,\n  rightSection,\n  fullWidth,\n  variant,\n  radius,\n  loading,\n  loaderProps,\n  gradient,\n  classNames,\n  styles,\n  unstyled,\n  'data-disabled': dataDisabled,\n  autoContrast,\n  mod,\n  attributes,\n  ...others\n} = props\n\nconst getStyles = useStyles<ButtonFactory>({\n  name: 'Button',\n  props,\n  classes,\n  className,\n  style,\n  classNames,\n  styles,\n  unstyled,\n  attributes,\n  vars,\n  varsResolver,\n})\n\nconst rootAttrs = computed(() => getStyles('root'))\nconst mergedRootAttrs = computed(() => ({ ...others, ...rootAttrs.value }))\n\nconst innerAttrs = computed(() => getStyles('inner'))\nconst sectionAttrs = computed(() => getStyles('section'))\nconst labelAttrs = computed(() => getStyles('label'))\n</script>\n",null],"mappings":"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"}
+{"version":3,"file":"button.cjs","names":[],"sources":["../../../src/components/button/button.vue"],"sourcesContent":["<template>\n  <unstyled-button\n    v-bind=\"mergedRootAttrs\"\n    :disabled=\"disabled || loading\"\n    :unstyled=\"unstyled\"\n    :mod=\"modList\"\n  >\n    <c-transition\n      v-if=\"typeof props.loading === 'boolean'\"\n      :mounted=\"props.loading\"\n      :transition=\"loaderTransition\"\n      :duration=\"150\"\n    >\n      <template #default=\"{ styles }\">\n        <c-box tag=\"span\" v-bind=\"getStyles('loader', { style: styles })\" aria-hidden=\"true\">\n          <c-loader\n            color=\"var(--button-color)\"\n            size=\"calc(var(--button-height) / 1.8)\"\n            v-bind=\"props.loaderProps\"\n          ></c-loader>\n        </c-box>\n      </template>\n    </c-transition>\n\n    <c-box tag=\"span\" v-bind=\"innerAttrs\">\n      <c-box\n        v-if=\"$slots['left-section']\"\n        v-bind=\"sectionAttrs\"\n        tag=\"span\"\n        :mod=\"{ position: 'left' }\"\n      >\n        <slot name=\"left-section\"></slot>\n      </c-box>\n      <c-box v-else-if=\"leftSection\" v-bind=\"sectionAttrs\" tag=\"span\" :mod=\"{ position: 'left' }\">\n        <!-- TODO -->\n        <component :is=\"leftSection\" />\n      </c-box>\n      <c-box v-bind=\"labelAttrs\" tag=\"span\" :mod=\"{ loading }\">\n        <slot />\n      </c-box>\n      <c-box\n        v-if=\"$slots['right-section']\"\n        v-bind=\"sectionAttrs\"\n        tag=\"span\"\n        :mod=\"{ position: 'right' }\"\n      >\n        <slot name=\"right-section\"></slot>\n      </c-box>\n      <c-box v-else-if=\"rightSection\" v-bind=\"sectionAttrs\" tag=\"span\" :mod=\"{ position: 'right' }\">\n        <!-- TODO -->\n        <component :is=\"rightSection\" />\n      </c-box>\n    </c-box>\n  </unstyled-button>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, useSlots } from 'vue'\nimport {\n  CBox,\n  createVarsResolver,\n  getFontSize,\n  getRadius,\n  getSize,\n  rem,\n  useStyles,\n} from '../../core'\nimport { UnstyledButton } from '../unstyled-button'\nimport { ButtonFactory, type ButtonProps } from './button.types'\nimport classes from './button.module.css'\nimport { CLoader } from '../loader'\nimport { CTransition, CckTransition } from '../transition'\n\ndefineOptions({\n  name: 'CButton',\n})\n\ndefineSlots<{\n  'left-section': any\n  'right-section': any\n  default: any\n}>()\n\nconst slots = useSlots()\n\nconst hasLeftSlot = computed(() => !!slots['left-section'])\nconst hasRightSlot = computed(() => !!slots['right-section'])\n\nconst loaderTransition: CckTransition = {\n  in: { opacity: 1, transform: `translate(-50%, calc(-50% + ${rem(1)}))` },\n  out: { opacity: 0, transform: 'translate(-50%, -200%)' },\n  common: { transformOrigin: 'center' },\n  transitionProperty: 'transform, opacity',\n}\n\nconst varsResolver = createVarsResolver<ButtonFactory>(\n  (theme, { radius, color, gradient, variant, size, justify, autoContrast }) => {\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      root: {\n        '--button-justify': justify,\n        '--button-height': getSize(size, 'button-height'),\n        '--button-padding-x': getSize(size, 'button-padding-x'),\n        '--button-fz': size?.includes('compact')\n          ? getFontSize(size.replace('compact-', ''))\n          : getFontSize(size),\n        '--button-radius': radius === undefined ? undefined : getRadius(radius),\n        '--button-bg': color || variant ? colors.background : undefined,\n        '--button-hover': color || variant ? colors.hover : undefined,\n        '--button-color': colors.color,\n        '--button-bd': color || variant ? colors.border : undefined,\n        '--button-hover-color': color || variant ? colors.hoverColor : undefined,\n      },\n    }\n  }\n)\n\nconst props = defineProps<ButtonProps>()\n\nconst knownProps = [\n  'style',\n  'vars',\n  'className',\n  'color',\n  'disabled',\n  'leftSection',\n  'rightSection',\n  'fullWidth',\n  'radius',\n  'loading',\n  'loaderProps',\n  'gradient',\n  'classNames',\n  'styles',\n  'unstyled',\n  'dataDisabled',\n  'autoContrast',\n  'mod',\n  'attributes',\n]\n\nconst getStyles = useStyles<ButtonFactory>({\n  name: 'Button',\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(() =>\n  getStyles('root', { active: !props.disabled && !props.loading && !props.dataDisabled })\n)\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'))\nconst sectionAttrs = computed(() => getStyles('section'))\nconst labelAttrs = computed(() => getStyles('label'))\n\nconst modList = computed(() => [\n  {\n    disabled: props.disabled || props.dataDisabled,\n    loading: props.loading,\n    block: props.fullWidth,\n    'with-left-section': hasLeftSlot.value || !!props.leftSection,\n    'with-right-section': hasRightSlot.value || !!props.rightSection,\n  },\n])\n</script>\n"],"mappings":"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"}

package/cjs/components/button/button.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"button.module.cjs","names":[],"sources":["../../../src/components/button/button.module.css"],"sourcesContent":[".root {\n  --button-height-xs: 30px;\n  --button-height-sm: 36px;\n  --button-height-md: 42px;\n  --button-height-lg: 50px;\n  --button-height-xl: 60px;\n\n  --button-height-compact-xs: 22px;\n  --button-height-compact-sm: 26px;\n  --button-height-compact-md: 30px;\n  --button-height-compact-lg: 34px;\n  --button-height-compact-xl: 40px;\n\n  --button-padding-x-xs: 14px;\n  --button-padding-x-sm: 18px;\n  --button-padding-x-md: 22px;\n  --button-padding-x-lg: 26px;\n  --button-padding-x-xl: 32px;\n\n  --button-padding-x-compact-xs: 7px;\n  --button-padding-x-compact-sm: 8px;\n  --button-padding-x-compact-md: 10px;\n  --button-padding-x-compact-lg: 12px;\n  --button-padding-x-compact-xl: 14px;\n\n  --button-height: var(--button-height-sm);\n  --button-padding-x: var(--button-padding-x-sm);\n  --button-color: var(--c-color-white);\n\n  user-select: none;\n  font-weight: var(--c-font-weight-medium);\n  position: relative;\n  line-height: 1;\n  text-align: center;\n  overflow: hidden;\n\n  width: auto;\n  cursor: pointer;\n  display: inline-block;\n  border-radius: var(--button-radius, var(--c-radius-default));\n  font-size: var(--button-fz, var(--c-font-size-sm));\n  background: var(--button-bg, var(--c-primary-color-filled));\n  border-color: var(--button-bd, transparent);\n  border-style: solid;\n  border-width: rem(1px);\n  color: var(--button-color, var(--c-color-white));\n  height: var(--button-height, var(--button-height-sm));\n  padding-inline: var(--button-padding-x, var(--button-padding-x-sm));\n  vertical-align: middle;\n\n  &:where([data-block]) {\n    display: block;\n    width: 100%;\n  }\n\n  &:where([data-with-left-section]) {\n    padding-inline-start: calc(var(--button-padding-x) / 1.5);\n  }\n\n  &:where([data-with-right-section]) {\n    padding-inline-end: calc(var(--button-padding-x) / 1.5);\n  }\n\n  &:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {\n    cursor: not-allowed;\n    border-color: transparent;\n    transform: none;\n    color: var(--c-color-disabled-color);\n    background: var(--c-color-disabled);\n  }\n\n  &::before {\n    content: '';\n    pointer-events: none;\n    position: absolute;\n    inset: -1px;\n    border-radius: var(--button-radius, var(--c-radius-default));\n    transform: translateY(-100%);\n    opacity: 0;\n    filter: blur(12px);\n    transition:\n      transform 150ms ease,\n      opacity 100ms ease;\n\n    @mixin where-light {\n      background-color: rgba(255, 255, 255, 0.15);\n    }\n\n    @mixin where-dark {\n      background-color: rgba(0, 0, 0, 0.15);\n    }\n  }\n\n  &:where([data-loading]) {\n    cursor: not-allowed;\n    transform: none;\n\n    &::before {\n      transform: translateY(0);\n      opacity: 1;\n    }\n\n    & .inner {\n      opacity: 0;\n      transform: translateY(100%);\n    }\n  }\n\n  @mixin hover {\n    &:where(:not([data-loading], :disabled, [data-disabled])) {\n      background-color: var(--button-hover, var(--c-primary-color-filled-hover));\n      color: var(--button-hover-color, var(--button-color));\n    }\n  }\n}\n\n.inner {\n  display: flex;\n  align-items: center;\n  justify-content: var(--button-justify, center);\n  height: 100%;\n  overflow: visible;\n  transition:\n    transform 150ms ease,\n    opacity 100ms ease;\n}\n\n.label {\n  white-space: nowrap;\n  height: 100%;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  opacity: 1;\n  text-box-trim: trim-both;\n  text-box-edge: cap alphabetic;\n\n  &:where([data-loading]) {\n    opacity: 0.2;\n  }\n}\n\n.section {\n  display: flex;\n  align-items: center;\n\n  &:where([data-position='left']) {\n    margin-inline-end: var(--c-spacing-xs);\n  }\n\n  &:where([data-position='right']) {\n    margin-inline-start: var(--c-spacing-xs);\n  }\n}\n\n.loader {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n}\n\n.group {\n  --button-border-width: 1px;\n  display: flex;\n\n  & :where(.root) {\n    &:focus {\n      position: relative;\n      z-index: 1;\n    }\n  }\n\n  &[data-orientation='horizontal'] {\n    flex-direction: row;\n\n    & .root,\n    & .groupSection {\n      &:not(:only-child):first-child {\n        border-end-end-radius: 0;\n        border-start-end-radius: 0;\n        border-inline-end-width: calc(var(--button-border-width) / 2);\n      }\n\n      &:not(:only-child):last-child {\n        border-end-start-radius: 0;\n        border-start-start-radius: 0;\n        border-inline-start-width: calc(var(--button-border-width) / 2);\n      }\n\n      &:not(:only-child):not(:first-child):not(:last-child) {\n        border-radius: 0;\n        border-inline-width: calc(var(--button-border-width) / 2);\n      }\n    }\n  }\n\n  &[data-orientation='vertical'] {\n    flex-direction: column;\n\n    & .root,\n    & .groupSection {\n      &:not(:only-child):first-child {\n        border-end-start-radius: 0;\n        border-end-end-radius: 0;\n        border-bottom-width: calc(var(--button-border-width) / 2);\n      }\n\n      &:not(:only-child):last-child {\n        border-start-start-radius: 0;\n        border-start-end-radius: 0;\n        border-top-width: calc(var(--button-border-width) / 2);\n      }\n\n      &:not(:only-child):not(:first-child):not(:last-child) {\n        border-radius: 0;\n        border-bottom-width: calc(var(--button-border-width) / 2);\n        border-top-width: calc(var(--button-border-width) / 2);\n      }\n    }\n  }\n}\n\n.groupSection {\n  --section-height-xs: 30px;\n  --section-height-sm: 36px;\n  --section-height-md: 42px;\n  --section-height-lg: 50px;\n  --section-height-xl: 60px;\n\n  --section-height-compact-xs: 22px;\n  --section-height-compact-sm: 26px;\n  --section-height-compact-md: 30px;\n  --section-height-compact-lg: 34px;\n  --section-height-compact-xl: 40px;\n\n  --section-padding-x-xs: 14px;\n  --section-padding-x-sm: 18px;\n  --section-padding-x-md: 22px;\n  --section-padding-x-lg: 26px;\n  --section-padding-x-xl: 32px;\n\n  --section-padding-x-compact-xs: 7px;\n  --section-padding-x-compact-sm: 8px;\n  --section-padding-x-compact-md: 10px;\n  --section-padding-x-compact-lg: 12px;\n  --section-padding-x-compact-xl: 14px;\n\n  --section-height: var(--section-height-sm);\n  --section-padding-x: var(--section-padding-x-sm);\n  --section-color: var(--c-color-white);\n\n  font-weight: var(--c-font-weight-medium);\n  width: auto;\n  border-radius: var(--section-radius, var(--c-radius-default));\n  font-size: var(--section-fz, var(--c-font-size-sm));\n  background: var(--section-bg, var(--c-primary-color-filled));\n  border-color: var(--section-bd, transparent);\n  border-style: solid;\n  border-width: rem(1px);\n  height: var(--section-height, var(--section-height-sm));\n  padding-inline: var(--section-padding-x, var(--section-padding-x-sm));\n  vertical-align: middle;\n  line-height: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n"],"mappings":";;AAAA,IAAA,wBAAe;CAAC,QAAO;CAAa,SAAQ;CAAa,SAAQ;CAAa,WAAU;CAAa,UAAS;CAAa,SAAQ;CAAa,gBAAe;AAAY"}
+{"version":3,"file":"button.module.cjs","names":[],"sources":["../../../src/components/button/button.module.css"],"sourcesContent":[".root {\n  --button-height-xs: 30px;\n  --button-height-sm: 36px;\n  --button-height-md: 42px;\n  --button-height-lg: 50px;\n  --button-height-xl: 60px;\n\n  --button-height-compact-xs: 22px;\n  --button-height-compact-sm: 26px;\n  --button-height-compact-md: 30px;\n  --button-height-compact-lg: 34px;\n  --button-height-compact-xl: 40px;\n\n  --button-padding-x-xs: 14px;\n  --button-padding-x-sm: 18px;\n  --button-padding-x-md: 22px;\n  --button-padding-x-lg: 26px;\n  --button-padding-x-xl: 32px;\n\n  --button-padding-x-compact-xs: 7px;\n  --button-padding-x-compact-sm: 8px;\n  --button-padding-x-compact-md: 10px;\n  --button-padding-x-compact-lg: 12px;\n  --button-padding-x-compact-xl: 14px;\n\n  --button-height: var(--button-height-sm);\n  --button-padding-x: var(--button-padding-x-sm);\n  --button-color: var(--c-color-white);\n\n  user-select: none;\n  font-weight: var(--c-font-weight-medium);\n  position: relative;\n  line-height: 1;\n  text-align: center;\n  overflow: hidden;\n\n  width: auto;\n  cursor: pointer;\n  display: inline-block;\n  border-radius: var(--button-radius, var(--c-radius-default));\n  font-size: var(--button-fz, var(--c-font-size-sm));\n  background: var(--button-bg, var(--c-color-default));\n  border: var(--button-bd, rem(1px) solid var(--c-color-default-border));\n  color: var(--button-color, var(--c-color-default-color));\n  height: var(--button-height, var(--button-height-sm));\n  padding-inline: var(--button-padding-x, var(--button-padding-x-sm));\n  vertical-align: middle;\n\n  &:where([data-block]) {\n    display: block;\n    width: 100%;\n  }\n\n  &:where([data-with-left-section]) {\n    padding-inline-start: calc(var(--button-padding-x) / 1.5);\n  }\n\n  &:where([data-with-right-section]) {\n    padding-inline-end: calc(var(--button-padding-x) / 1.5);\n  }\n\n  &:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {\n    cursor: not-allowed;\n    border-color: transparent;\n    transform: none;\n    color: var(--c-color-disabled-color);\n    background: var(--c-color-disabled);\n  }\n\n  &::before {\n    content: '';\n    pointer-events: none;\n    position: absolute;\n    inset: -1px;\n    border-radius: var(--button-radius, var(--c-radius-default));\n    transform: translateY(-100%);\n    opacity: 0;\n    filter: blur(12px);\n    transition:\n      transform 150ms ease,\n      opacity 100ms ease;\n\n    @mixin where-light {\n      background-color: rgba(255, 255, 255, 0.15);\n    }\n\n    @mixin where-dark {\n      background-color: rgba(0, 0, 0, 0.15);\n    }\n  }\n\n  &:where([data-loading]) {\n    cursor: not-allowed;\n    transform: none;\n\n    &::before {\n      transform: translateY(0);\n      opacity: 1;\n    }\n\n    & .inner {\n      opacity: 0;\n      transform: translateY(100%);\n    }\n  }\n\n  @mixin hover {\n    &:where(:not([data-loading], :disabled, [data-disabled])) {\n      background-color: var(--button-hover, var(--c-color-default-hover));\n      color: var(--button-hover-color, var(--button-color));\n    }\n  }\n}\n\n.inner {\n  display: flex;\n  align-items: center;\n  justify-content: var(--button-justify, center);\n  height: 100%;\n  overflow: visible;\n  transition:\n    transform 150ms ease,\n    opacity 100ms ease;\n}\n\n.label {\n  white-space: nowrap;\n  height: 100%;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  opacity: 1;\n  text-box-trim: trim-both;\n  text-box-edge: cap alphabetic;\n\n  &:where([data-loading]) {\n    opacity: 0.2;\n  }\n}\n\n.section {\n  display: flex;\n  align-items: center;\n\n  &:where([data-position='left']) {\n    margin-inline-end: var(--c-spacing-xs);\n  }\n\n  &:where([data-position='right']) {\n    margin-inline-start: var(--c-spacing-xs);\n  }\n}\n\n.loader {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n}\n\n.group {\n  --button-border-width: 1px;\n  display: flex;\n\n  & :where(.root) {\n    &:focus {\n      position: relative;\n      z-index: 1;\n    }\n  }\n\n  &[data-orientation='horizontal'] {\n    flex-direction: row;\n\n    & .root,\n    & .groupSection {\n      &:not(:only-child):first-child {\n        border-end-end-radius: 0;\n        border-start-end-radius: 0;\n        border-inline-end-width: calc(var(--button-border-width) / 2);\n      }\n\n      &:not(:only-child):last-child {\n        border-end-start-radius: 0;\n        border-start-start-radius: 0;\n        border-inline-start-width: calc(var(--button-border-width) / 2);\n      }\n\n      &:not(:only-child):not(:first-child):not(:last-child) {\n        border-radius: 0;\n        border-inline-width: calc(var(--button-border-width) / 2);\n      }\n    }\n  }\n\n  &[data-orientation='vertical'] {\n    flex-direction: column;\n\n    & .root,\n    & .groupSection {\n      &:not(:only-child):first-child {\n        border-end-start-radius: 0;\n        border-end-end-radius: 0;\n        border-bottom-width: calc(var(--button-border-width) / 2);\n      }\n\n      &:not(:only-child):last-child {\n        border-start-start-radius: 0;\n        border-start-end-radius: 0;\n        border-top-width: calc(var(--button-border-width) / 2);\n      }\n\n      &:not(:only-child):not(:first-child):not(:last-child) {\n        border-radius: 0;\n        border-bottom-width: calc(var(--button-border-width) / 2);\n        border-top-width: calc(var(--button-border-width) / 2);\n      }\n    }\n  }\n}\n\n.groupSection {\n  --section-height-xs: 30px;\n  --section-height-sm: 36px;\n  --section-height-md: 42px;\n  --section-height-lg: 50px;\n  --section-height-xl: 60px;\n\n  --section-height-compact-xs: 22px;\n  --section-height-compact-sm: 26px;\n  --section-height-compact-md: 30px;\n  --section-height-compact-lg: 34px;\n  --section-height-compact-xl: 40px;\n\n  --section-padding-x-xs: 14px;\n  --section-padding-x-sm: 18px;\n  --section-padding-x-md: 22px;\n  --section-padding-x-lg: 26px;\n  --section-padding-x-xl: 32px;\n\n  --section-padding-x-compact-xs: 7px;\n  --section-padding-x-compact-sm: 8px;\n  --section-padding-x-compact-md: 10px;\n  --section-padding-x-compact-lg: 12px;\n  --section-padding-x-compact-xl: 14px;\n\n  --section-height: var(--section-height-sm);\n  --section-padding-x: var(--section-padding-x-sm);\n  --section-color: var(--c-color-white);\n\n  font-weight: var(--c-font-weight-medium);\n  width: auto;\n  border-radius: var(--section-radius, var(--c-radius-default));\n  font-size: var(--section-fz, var(--c-font-size-sm));\n  background: var(--section-bg, var(--c-primary-color-filled));\n  border: var(--section-bd, rem(1px) solid transparent);\n  height: var(--section-height, var(--section-height-sm));\n  padding-inline: var(--section-padding-x, var(--section-padding-x-sm));\n  vertical-align: middle;\n  line-height: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n"],"mappings":";;AAAA,IAAA,wBAAe;CAAC,QAAO;CAAa,SAAQ;CAAa,SAAQ;CAAa,WAAU;CAAa,UAAS;CAAa,SAAQ;CAAa,gBAAe;AAAY"}

package/cjs/components/grid/col/col-custom.cjs

@@ -3,8 +3,7 @@ const require_filter_props = require("../../../core/utils/filter-props/filter-pr
 const require_get_base_value = require("../../../core/utils/get-base-value/get-base-value.cjs");
 const require_get_sorted_breakpoints = require("../../../core/utils/get-sorted-breakpoints/get-sorted-breakpoints.cjs");
 const require_keys = require("../../../core/utils/keys/keys.cjs");
-const require_config_provider_types = require("../../../core/config-provider/config-provider.types.cjs");
-const require_default_theme = require("../../../core/config-provider/default-theme.cjs");
+const require_config_provider_context = require("../../../core/config-provider/config-provider.context.cjs");
 const require_styles_to_string = require("../../../core/responsive-style-manager/styles-to-string/styles-to-string.cjs");
 let vue = require("vue");
 //#region packages/@cck-ui/core/src/components/grid/col/col-custom.ts
@@ -31,7 +30,7 @@ const getColumnOffset = (offset, columns) => {
 };
 function useColCustomStyle({ align, offset, order, selector, span }, gridContext) {
 	return (0, vue.computed)(() => {
-		const theme = (0, vue.inject)(require_config_provider_types.THEME_KEY, require_default_theme.DEFAULT_THEME);
+		const theme = require_config_provider_context.useCckTheme().value;
 		const _breakpoints = gridContext.breakpoints || theme.breakpoints;
 		const baseValue = require_get_base_value.getBaseValue(span);
 		const baseSpan = baseValue === void 0 ? 12 : baseValue;

package/cjs/components/grid/col/col-custom.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"col-custom.cjs","names":["THEME_KEY","DEFAULT_THEME","getBaseValue","filterProps","keys","getSortedBreakpoints","stylesToString"],"sources":["../../../../src/components/grid/col/col-custom.ts"],"sourcesContent":["import { computed, inject } from 'vue'\nimport { ColProps, ColSpan } from './col.types'\nimport {\n  DEFAULT_THEME,\n  filterProps,\n  getBaseValue,\n  getSortedBreakpoints,\n  keys,\n  StyleProp,\n  stylesToString,\n  THEME_KEY,\n} from '../../../core'\nimport { GridContextValue } from '../grid.context'\nimport type { GridBreakpoints } from '../grid.types'\n\ninterface ColVariablesProps {\n  selector: string\n  align?: ColProps['align'] | undefined\n  offset?: StyleProp<number> | undefined\n  order?: ColProps['order'] | undefined\n  span: ColProps['span'] | undefined\n}\n\nconst getColumnFlexBasis = (colSpan: ColSpan | undefined, columns: number) => {\n  if (colSpan === 'content') {\n    return 'auto'\n  }\n\n  if (colSpan === 'auto') {\n    return '0rem'\n  }\n\n  if (!colSpan) {\n    return undefined\n  }\n\n  if (colSpan === columns) {\n    return '100%'\n  }\n\n  const percentage = (100 * colSpan) / columns\n  const gapFactor = (columns - colSpan) / columns\n  return `calc(${percentage}% - ${gapFactor} * var(--grid-column-gap))`\n}\n\nconst getColumnMaxWidth = (\n  colSpan: ColSpan | undefined,\n  columns: number,\n  grow: boolean | undefined\n) => {\n  if (grow || colSpan === 'auto') {\n    return '100%'\n  }\n\n  if (colSpan === 'content') {\n    return 'unset'\n  }\n\n  return getColumnFlexBasis(colSpan, columns)\n}\n\nconst getColumnFlexGrow = (colSpan: ColSpan | undefined, grow: boolean | undefined) => {\n  if (!colSpan) {\n    return undefined\n  }\n  return colSpan === 'auto' || grow ? '1' : 'auto'\n}\n\nconst getColumnOffset = (offset: number | undefined, columns: number) => {\n  if (offset === 0) {\n    return '0'\n  }\n\n  if (!offset) {\n    return undefined\n  }\n\n  const percentage = (100 * offset) / columns\n  const gapFactor = offset / columns\n  return `calc(${percentage}% + ${gapFactor} * var(--grid-column-gap))`\n}\n\nexport function useColCustomStyle(\n  { align, offset, order, selector, span }: ColVariablesProps,\n  gridContext: GridContextValue\n) {\n  return computed(() => {\n    const theme = inject(THEME_KEY, DEFAULT_THEME)\n\n    const _breakpoints = gridContext.breakpoints || theme.breakpoints\n    const baseValue = getBaseValue(span)\n    const baseSpan = baseValue === undefined ? 12 : baseValue\n\n    const styles: Record<string, string | undefined> = filterProps({\n      '--col-order': getBaseValue(order)?.toString(),\n      '--col-flex-grow': getColumnFlexGrow(baseSpan, gridContext.grow),\n      '--col-flex-basis': getColumnFlexBasis(baseSpan, gridContext.columns),\n      '--col-width': baseSpan === 'content' ? 'auto' : undefined,\n      '--col-max-width': getColumnMaxWidth(baseSpan, gridContext.columns, gridContext.grow),\n      '--col-offset': getColumnOffset(getBaseValue(offset), gridContext.columns),\n      '--col-align-self': getBaseValue(align),\n    })\n\n    const queries = keys(_breakpoints).reduce<Record<string, Record<string, any>>>(\n      (acc, breakpoint) => {\n        if (!acc[breakpoint as string]) {\n          acc[breakpoint as string] = {}\n        }\n\n        if (typeof order === 'object' && order[breakpoint as string] !== undefined) {\n          acc[breakpoint as string]['--col-order'] = order[breakpoint as string]?.toString()\n        }\n\n        if (typeof span === 'object' && span[breakpoint as string] !== undefined) {\n          acc[breakpoint as string]['--col-flex-grow'] = getColumnFlexGrow(\n            span[breakpoint as string],\n            gridContext.grow\n          )\n          acc[breakpoint as string]['--col-flex-basis'] = getColumnFlexBasis(\n            span[breakpoint as string],\n            gridContext.columns\n          )\n          acc[breakpoint as string]['--col-width'] =\n            span[breakpoint as string] === 'content' ? 'auto' : undefined\n          acc[breakpoint as string]['--col-max-width'] = getColumnMaxWidth(\n            span[breakpoint as string],\n            gridContext.columns,\n            gridContext.grow\n          )\n        }\n\n        if (typeof offset === 'object' && offset[breakpoint as string] !== undefined) {\n          acc[breakpoint as string]['--col-offset'] = getColumnOffset(\n            offset[breakpoint as string],\n            gridContext.columns\n          )\n        }\n\n        if (typeof align === 'object' && align[breakpoint] !== undefined) {\n          acc[breakpoint as string]['--col-align-self'] = align[breakpoint]\n        }\n\n        return acc\n      },\n      {}\n    )\n\n    const sortedBreakpoints = getSortedBreakpoints(keys(queries), _breakpoints).filter(\n      (breakpoint) => keys(queries[breakpoint.value]).length > 0\n    )\n\n    const values = sortedBreakpoints.map((breakpoint) => ({\n      query:\n        gridContext.type === 'container'\n          ? `c-grid (min-width: ${_breakpoints[breakpoint.value as keyof GridBreakpoints]})`\n          : `(min-width: ${_breakpoints[breakpoint.value as keyof GridBreakpoints]})`,\n      styles: queries[breakpoint.value],\n    }))\n\n    const queryStyles = {\n      styles,\n      media: gridContext.type === 'container' ? undefined : values,\n      container: gridContext.type === 'container' ? values : undefined,\n      selector,\n    }\n\n    const queryStylesString = stylesToString(queryStyles)\n\n    return { queryStylesString }\n  })\n}\n"],"mappings":"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"}
+{"version":3,"file":"col-custom.cjs","names":["useCckTheme","getBaseValue","filterProps","keys","getSortedBreakpoints","stylesToString"],"sources":["../../../../src/components/grid/col/col-custom.ts"],"sourcesContent":["import { computed } from 'vue'\nimport { ColProps, ColSpan } from './col.types'\nimport {\n  filterProps,\n  getBaseValue,\n  getSortedBreakpoints,\n  keys,\n  StyleProp,\n  stylesToString,\n  useCckTheme,\n} from '../../../core'\nimport { GridContextValue } from '../grid.context'\nimport type { GridBreakpoints } from '../grid.types'\n\ninterface ColVariablesProps {\n  selector: string\n  align?: ColProps['align'] | undefined\n  offset?: StyleProp<number> | undefined\n  order?: ColProps['order'] | undefined\n  span: ColProps['span'] | undefined\n}\n\nconst getColumnFlexBasis = (colSpan: ColSpan | undefined, columns: number) => {\n  if (colSpan === 'content') {\n    return 'auto'\n  }\n\n  if (colSpan === 'auto') {\n    return '0rem'\n  }\n\n  if (!colSpan) {\n    return undefined\n  }\n\n  if (colSpan === columns) {\n    return '100%'\n  }\n\n  const percentage = (100 * colSpan) / columns\n  const gapFactor = (columns - colSpan) / columns\n  return `calc(${percentage}% - ${gapFactor} * var(--grid-column-gap))`\n}\n\nconst getColumnMaxWidth = (\n  colSpan: ColSpan | undefined,\n  columns: number,\n  grow: boolean | undefined\n) => {\n  if (grow || colSpan === 'auto') {\n    return '100%'\n  }\n\n  if (colSpan === 'content') {\n    return 'unset'\n  }\n\n  return getColumnFlexBasis(colSpan, columns)\n}\n\nconst getColumnFlexGrow = (colSpan: ColSpan | undefined, grow: boolean | undefined) => {\n  if (!colSpan) {\n    return undefined\n  }\n  return colSpan === 'auto' || grow ? '1' : 'auto'\n}\n\nconst getColumnOffset = (offset: number | undefined, columns: number) => {\n  if (offset === 0) {\n    return '0'\n  }\n\n  if (!offset) {\n    return undefined\n  }\n\n  const percentage = (100 * offset) / columns\n  const gapFactor = offset / columns\n  return `calc(${percentage}% + ${gapFactor} * var(--grid-column-gap))`\n}\n\nexport function useColCustomStyle(\n  { align, offset, order, selector, span }: ColVariablesProps,\n  gridContext: GridContextValue\n) {\n  return computed(() => {\n    const _theme = useCckTheme()\n    const theme = _theme.value\n\n    const _breakpoints = gridContext.breakpoints || theme.breakpoints\n    const baseValue = getBaseValue(span)\n    const baseSpan = baseValue === undefined ? 12 : baseValue\n\n    const styles: Record<string, string | undefined> = filterProps({\n      '--col-order': getBaseValue(order)?.toString(),\n      '--col-flex-grow': getColumnFlexGrow(baseSpan, gridContext.grow),\n      '--col-flex-basis': getColumnFlexBasis(baseSpan, gridContext.columns),\n      '--col-width': baseSpan === 'content' ? 'auto' : undefined,\n      '--col-max-width': getColumnMaxWidth(baseSpan, gridContext.columns, gridContext.grow),\n      '--col-offset': getColumnOffset(getBaseValue(offset), gridContext.columns),\n      '--col-align-self': getBaseValue(align),\n    })\n\n    const queries = keys(_breakpoints).reduce<Record<string, Record<string, any>>>(\n      (acc, breakpoint) => {\n        if (!acc[breakpoint as string]) {\n          acc[breakpoint as string] = {}\n        }\n\n        if (typeof order === 'object' && order[breakpoint as string] !== undefined) {\n          acc[breakpoint as string]['--col-order'] = order[breakpoint as string]?.toString()\n        }\n\n        if (typeof span === 'object' && span[breakpoint as string] !== undefined) {\n          acc[breakpoint as string]['--col-flex-grow'] = getColumnFlexGrow(\n            span[breakpoint as string],\n            gridContext.grow\n          )\n          acc[breakpoint as string]['--col-flex-basis'] = getColumnFlexBasis(\n            span[breakpoint as string],\n            gridContext.columns\n          )\n          acc[breakpoint as string]['--col-width'] =\n            span[breakpoint as string] === 'content' ? 'auto' : undefined\n          acc[breakpoint as string]['--col-max-width'] = getColumnMaxWidth(\n            span[breakpoint as string],\n            gridContext.columns,\n            gridContext.grow\n          )\n        }\n\n        if (typeof offset === 'object' && offset[breakpoint as string] !== undefined) {\n          acc[breakpoint as string]['--col-offset'] = getColumnOffset(\n            offset[breakpoint as string],\n            gridContext.columns\n          )\n        }\n\n        if (typeof align === 'object' && align[breakpoint] !== undefined) {\n          acc[breakpoint as string]['--col-align-self'] = align[breakpoint]\n        }\n\n        return acc\n      },\n      {}\n    )\n\n    const sortedBreakpoints = getSortedBreakpoints(keys(queries), _breakpoints).filter(\n      (breakpoint) => keys(queries[breakpoint.value]).length > 0\n    )\n\n    const values = sortedBreakpoints.map((breakpoint) => ({\n      query:\n        gridContext.type === 'container'\n          ? `c-grid (min-width: ${_breakpoints[breakpoint.value as keyof GridBreakpoints]})`\n          : `(min-width: ${_breakpoints[breakpoint.value as keyof GridBreakpoints]})`,\n      styles: queries[breakpoint.value],\n    }))\n\n    const queryStyles = {\n      styles,\n      media: gridContext.type === 'container' ? undefined : values,\n      container: gridContext.type === 'container' ? values : undefined,\n      selector,\n    }\n\n    const queryStylesString = stylesToString(queryStyles)\n\n    return { queryStylesString }\n  })\n}\n"],"mappings":"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"}

package/cjs/components/grid/col/col.cjs

@@ -4,6 +4,7 @@ const require_export_helper = require("../../../_virtual/_/plugin-vue/export-hel
 const require_responsive_style_manager = require("../../../core/responsive-style-manager/responsive-style-manager.cjs");
 const require_normalize_number_like_string_prop = require("../../../core/responsive-style-manager/normalize-number-like-string-prop/normalize-number-like-string-prop.cjs");
 const require_use_random_classname = require("../../../core/box/use-random-classname/use-random-classname.cjs");
+const require_index = require("../../../core/box/index.cjs");
 const require_grid_constants = require("../grid.constants.cjs");
 const require_col_custom = require("./col-custom.cjs");
 let vue = require("vue");
@@ -316,19 +317,33 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 	setup(__props, { expose: __expose }) {
 		__expose();
 		const props = __props;
-		const { classNames, className, style, styles, vars, span, order, offset, align, ...others } = props;
+		const knownProps = [
+			"classNames",
+			"className",
+			"style",
+			"styles",
+			"vars",
+			"span",
+			"order",
+			"offset",
+			"align"
+		];
 		const gridContext = (0, vue.inject)(require_grid_constants.GRID_CONTEXT_KEY);
 		const responsiveClassname = require_use_random_classname.useRandomClassName();
 		const rootAttrs = (0, vue.computed)(() => gridContext.getStyles("col", {
-			className: (0, clsx.default)(className, responsiveClassname),
-			style,
-			classNames,
-			styles
-		}));
-		const mergedAttrs = (0, vue.computed)(() => ({
-			...others,
-			...rootAttrs.value
+			className: (0, clsx.default)(props.className, responsiveClassname),
+			style: props.style,
+			classNames: props.classNames,
+			styles: props.styles
 		}));
+		const mergedAttrs = (0, vue.computed)(() => {
+			const others = {};
+			for (const key in props) if (!knownProps.includes(key)) others[key] = props[key];
+			return {
+				...others,
+				...rootAttrs.value
+			};
+		});
 		const _offset = require_normalize_number_like_string_prop.normalizeNumberLikeStringProp(props.offset);
 		const _order = require_normalize_number_like_string_prop.normalizeNumberLikeStringProp(props.order);
 		const colStyle = require_col_custom.useColCustomStyle({
@@ -355,16 +370,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 		});
 		const __returned__ = {
 			props,
-			classNames,
-			className,
-			style,
-			styles,
-			vars,
-			span,
-			order,
-			offset,
-			align,
-			others,
+			knownProps,
 			gridContext,
 			responsiveClassname,
 			rootAttrs,
@@ -372,7 +378,10 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			_offset,
 			_order,
 			colStyle,
-			currentStyleKey
+			currentStyleKey,
+			get CBox() {
+				return require_index.CBox;
+			}
 		};
 		Object.defineProperty(__returned__, "__isScriptSetup", {
 			enumerable: false,
@@ -382,13 +391,12 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 	}
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-	const _component_c_box = (0, vue.resolveComponent)("c-box");
-	return (0, vue.openBlock)(), (0, vue.createBlock)(_component_c_box, (0, vue.normalizeProps)((0, vue.guardReactiveProps)($setup.mergedAttrs)), {
+	return (0, vue.openBlock)(), (0, vue.createBlock)($setup["CBox"], (0, vue.normalizeProps)((0, vue.guardReactiveProps)($setup.mergedAttrs)), {
 		default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 		_: 3
 	}, 16);
 }
-var col_default = /*#__PURE__*/ require_export_helper.default(_sfc_main, [["render", _sfc_render], ["__file", "D:\\work\\jackatlas\\cck-ui\\packages\\@cck-ui\\core\\src\\components\\grid\\col\\col.vue"]]);
+var col_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/grid/col/col.vue"]]);
 //#endregion
 exports.default = col_default;