@cck-ui/core 0.4.10 → 0.6.0

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

@@ -1 +1 @@
-{"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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"}
+{"version":3,"file":"button.cjs","names":[],"sources":["../../../src/components/button/button.vue"],"sourcesContent":["<template>\n  <unstyled-button\n    ref=\"_root\"\n    v-bind=\"mergedRootAttrs\"\n    :disabled=\"disabled || loading\"\n    :unstyled=\"unstyled\"\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\n          ref=\"_inner\"\n          tag=\"span\"\n          v-bind=\"getStyles('loader', { style: styles })\"\n          aria-hidden=\"true\"\n        >\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 ref=\"_label\" 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, ref, useAttrs, useSlots } from 'vue'\nimport { CBox, rem, useComponentProps, useStyles } from '../../core'\nimport { UnstyledButton } from '../unstyled-button'\nimport { ButtonFactory, type ButtonProps } from './button.types'\nimport { varsResolver } from './button.utils'\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 _root = ref<InstanceType<typeof UnstyledButton> | null>(null)\nconst _inner = ref<HTMLSpanElement | null>(null)\nconst _label = ref<HTMLSpanElement | null>(null)\n\nconst attrs = useAttrs()\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 rawProps = defineProps<ButtonProps>()\n\nconst props = useComponentProps({\n  component: 'CButton',\n  defaultProps: {},\n  props: rawProps,\n})\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: { ...props.value, ...attrs } as ButtonProps,\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 modList = computed(() => [\n  {\n    disabled: props.value.disabled || props.value.dataDisabled,\n  },\n  { loading: props.value.loading },\n  { block: props.value.fullWidth },\n  { 'with-left-section': hasLeftSlot.value || !!props.value.leftSection },\n  { 'with-right-section': hasRightSlot.value || !!props.value.rightSection },\n])\n\nconst rootAttrs = computed(() =>\n  getStyles('root', {\n    active: !props.value.disabled && !props.value.loading && !props.value.dataDisabled,\n  })\n)\nconst mergedRootAttrs = computed(() => {\n  const others: Record<string, any> = {}\n  const propsValue = props.value\n  Object.keys(propsValue).forEach((key) => {\n    if (!knownProps.includes(key)) {\n      others[key] = propsValue[key as keyof typeof propsValue]\n    }\n  })\n  const userMod = props.value.mod\n  const mergedMod = [\n    ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n    ...(modList.value || []),\n  ]\n  return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\nconst innerAttrs = computed(() => getStyles('inner'))\nconst sectionAttrs = computed(() => getStyles('section'))\nconst labelAttrs = computed(() => getStyles('label'))\n\ndefineExpose({\n  root: computed(() => _root.value?.root ?? null),\n  inner: _inner.value,\n  label: _label.value,\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiFA,MAAM,SAAA,GAAA,IAAA,IAAA,CAAwD,IAAI;EAClE,MAAM,UAAA,GAAA,IAAA,IAAA,CAAqC,IAAI;EAC/C,MAAM,UAAA,GAAA,IAAA,IAAA,CAAqC,IAAI;EAE/C,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EACvB,MAAM,SAAA,GAAA,IAAA,SAAA,CAAiB;EAEvB,MAAM,eAAA,GAAA,IAAA,SAAA,OAA6B,CAAC,CAAC,MAAM,eAAe;EAC1D,MAAM,gBAAA,GAAA,IAAA,SAAA,OAA8B,CAAC,CAAC,MAAM,gBAAgB;EAE5D,MAAM,mBAAkC;GACtC,IAAI;IAAE,SAAS;IAAG,WAAW,+BAA+B,YAAA,IAAI,CAAC,EAAE;GAAI;GACvE,KAAK;IAAE,SAAS;IAAG,WAAW;GAAyB;GACvD,QAAQ,EAAE,iBAAiB,SAAS;GACpC,oBAAoB;EACtB;EAEA,MAAM,WAAW;EAEjB,MAAM,QAAQ,4BAAA,kBAAkB;GAC9B,WAAW;GACX,cAAc,CAAC;GACf,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,YAAY,mBAAA,UAAyB;GACzC,MAAM;GACN,OAAO;IAAE,GAAG,MAAM;IAAO,GAAG;GAAM;GAClC,SAAA,sBAAA;GACA,WAAW,MAAM,MAAM;GACvB,OAAO,MAAM,MAAM;GACnB,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB,cAAA,qBAAA;EACF,CAAC;EAED,MAAM,WAAA,GAAA,IAAA,SAAA,OAAyB;GAC7B,EACE,UAAU,MAAM,MAAM,YAAY,MAAM,MAAM,aAChD;GACA,EAAE,SAAS,MAAM,MAAM,QAAQ;GAC/B,EAAE,OAAO,MAAM,MAAM,UAAU;GAC/B,EAAE,qBAAqB,YAAY,SAAS,CAAC,CAAC,MAAM,MAAM,YAAY;GACtE,EAAE,sBAAsB,aAAa,SAAS,CAAC,CAAC,MAAM,MAAM,aAAa;EAC3E,CAAC;EAED,MAAM,aAAA,GAAA,IAAA,SAAA,OACJ,UAAU,QAAQ,EAChB,QAAQ,CAAC,MAAM,MAAM,YAAY,CAAC,MAAM,MAAM,WAAW,CAAC,MAAM,MAAM,aACxE,CAAC,CACH;EACA,MAAM,mBAAA,GAAA,IAAA,SAAA,OAAiC;GACrC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,OAAO,KAAK,UAAU,CAAC,CAAC,SAAS,QAAQ;IACvC,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAE7B,CAAC;GACD,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAChB,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,GAC/D,GAAI,QAAQ,SAAS,CAAC,CACxB;GACA,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,UAAU;GAAM;EACzD,CAAC;EAED,MAAM,cAAA,GAAA,IAAA,SAAA,OAA4B,UAAU,OAAO,CAAC;EACpD,MAAM,gBAAA,GAAA,IAAA,SAAA,OAA8B,UAAU,SAAS,CAAC;EACxD,MAAM,cAAA,GAAA,IAAA,SAAA,OAA4B,UAAU,OAAO,CAAC;EAEpD,SAAa;GACX,OAAA,GAAA,IAAA,SAAA,OAAqB,MAAM,OAAO,QAAQ,IAAI;GAC9C,OAAO,OAAO;GACd,OAAO,OAAO;EAChB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mDA3HmB,OAAA,oBAAA,GAAA,IAAA,WAAA,CAAA,EAxDhB,KAAI,QAAO,GACH,OAAA,iBAAe;EACtB,UAAU,OAAA,YAAY,OAAA;EACtB,UAAU,OAAA;;kCAsBI,CAAA,OAnBA,OAAA,MAAM,YAAO,cAAA,GAAA,IAAA,UAAA,CAAA,IAAA,GAAA,IAAA,YAAA,CAmBb,OAAA,gBAAA;;GAlBZ,SAAS,OAAA,MAAM;GACf,YAAY,OAAA;GACZ,UAAU;;GAEA,UAAA,GAAA,IAAA,QAAA,EAYD,EAZY,aAAM,EAAA,GAAA,IAAA,YAAA,CAYlB,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA;IAVN,KAAI;IACJ,KAAI;MACI,OAAA,UAAS,UAAA,EAAA,OAAoB,OAAM,CAAA,GAAA,EAC3C,eAAY,OAAM,CAAA,GAAA;oCAMN,EAAA,GAAA,IAAA,YAAA,CAAA,OAAA,aAAA,GAAA,IAAA,WAAA,CAAA;KAHV,OAAM;KACN,MAAK;OACG,OAAA,MAAM,WAAW,GAAA,MAAA,EAAA,CAAA,CAAA;;;;wFAkCzB,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EA5BD,KAAI,OAAM,GAAS,OAAA,UAAU,GAAA;mCAQ1B;IANA,KAAA,OAAM,oBAAA,GAAA,IAAA,UAAA,CAAA,IAAA,GAAA,IAAA,YAAA,CAMN,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAAA,KAAA,EAAA,GALE,OAAA,cAAY;KACpB,KAAI;KACH,KAAK,EAAA,UAAA,OAAA;;qCAE2B,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,cAAA,CAAA,CAAA;;cAEjB,OAAA,gBAAA,GAAA,IAAA,UAAA,CAAA,IAAA,GAAA,IAAA,YAAA,CAGV,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAAA,KAAA,EAAA,GAH+B,OAAA,cAAY;KAAE,KAAI;KAAQ,KAAK,EAAA,UAAA,OAAA;;qCACvD,EAAA,GAAA,IAAA,mBAAA,CAAb,QAAA,KAAA,GAAA,IAAA,UAAA,CAAA,IAAA,GAAA,IAAA,YAAA,EAAA,GAAA,IAAA,wBAAA,CACgB,OAAA,WAAW,CAAA,EAAA,CAAA;;;yBAIrB,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAFD,KAAI,SAAQ,GAAS,OAAA,YAAU;KAAE,KAAI;KAAQ,KAAG,EAAA,SAAI,OAAA,QAAO;;qCACxD,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA;;;IAGF,KAAA,OAAM,qBAAA,GAAA,IAAA,UAAA,CAAA,IAAA,GAAA,IAAA,YAAA,CAMN,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAAA,KAAA,EAAA,GALE,OAAA,cAAY;KACpB,KAAI;KACH,KAAK,EAAA,UAAA,QAAA;;qCAE4B,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,eAAA,CAAA,CAAA;;cAElB,OAAA,iBAAA,GAAA,IAAA,UAAA,CAAA,IAAA,GAAA,IAAA,YAAA,CAGV,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,EAAA,KAAA,EAAA,GAHgC,OAAA,cAAY;KAAE,KAAI;KAAQ,KAAK,EAAA,UAAA,QAAA;;qCACxD,EAAA,GAAA,IAAA,mBAAA,CAAb,QAAA,KAAA,GAAA,IAAA,UAAA,CAAA,IAAA,GAAA,IAAA,YAAA,EAAA,GAAA,IAAA,wBAAA,CACgB,OAAA,YAAY,CAAA,EAAA,CAAA"}

package/cjs/components/button/button.utils.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.utils.cjs","names":["createVarsResolver","getSize","getFontSize","getRadius"],"sources":["../../../src/components/button/button.utils.ts"],"sourcesContent":["import { createVarsResolver, getFontSize, getRadius, getSize } from '../../core'\nimport { ButtonFactory } from './button.types'\n\nexport const 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"],"mappings":";;;AAGA,MAAa,4FAAeA,CAAAA,CAAAA,oBACzB,OAAO,EAAE,QAAQ,OAAO,UAAU,SAAS,MAAM,SAAS,mBAAmB;CAC5E,MAAM,SAAS,MAAM,qBAAqB;EACxC,OAAO,SAAS,MAAM;EACtB;EACA;EACA,SAAS,WAAW;EACpB;CACF,CAAC;CAED,OAAO,EACL,MAAM;EACJ,oBAAoB;EACpB,mBAAmBC,iBAAAA,QAAQ,MAAM,eAAe;EAChD,sBAAsBA,iBAAAA,QAAQ,MAAM,kBAAkB;EACtD,eAAe,MAAM,SAAS,SAAS,IACnCC,iBAAAA,YAAY,KAAK,QAAQ,YAAY,EAAE,CAAC,IACxCA,iBAAAA,YAAY,IAAI;EACpB,mBAAmB,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,MAAM;EACtE,eAAe,SAAS,UAAU,OAAO,aAAa,KAAA;EACtD,kBAAkB,SAAS,UAAU,OAAO,QAAQ,KAAA;EACpD,kBAAkB,OAAO;EACzB,eAAe,SAAS,UAAU,OAAO,SAAS,KAAA;EAClD,wBAAwB,SAAS,UAAU,OAAO,aAAa,KAAA;CACjE,EACF;AACF,CACF"}

package/cjs/components/button/index.cjs

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

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

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

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

@@ -1,6 +1,7 @@
 "use client";
 const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
 const require_export_helper = require("../../../_virtual/_/plugin-vue/export-helper.cjs");
+const require_use_component_props = require("../../../core/config-provider/use-component-props/use-component-props.cjs");
 const require_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");
@@ -17,8 +18,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 	props: {
 		span: {
 			type: null,
-			required: false,
-			default: 12
+			required: false
 		},
 		order: {
 			type: null,
@@ -315,8 +315,13 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 		}
 	},
 	setup(__props, { expose: __expose }) {
-		__expose();
-		const props = __props;
+		const _col = (0, vue.ref)(null);
+		const rawProps = __props;
+		const props = require_use_component_props.useComponentProps({
+			component: "CCol",
+			defaultProps: { span: 12 },
+			props: rawProps
+		});
 		const knownProps = [
 			"classNames",
 			"className",
@@ -329,29 +334,38 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			"align"
 		];
 		const gridContext = (0, vue.inject)(require_grid_constants.GRID_CONTEXT_KEY);
+		if (!gridContext) throw new Error("[@cck-ui/col] CCol component should be wrapped inside CGrid component.");
 		const responsiveClassname = require_use_random_classname.useRandomClassName();
-		const rootAttrs = (0, vue.computed)(() => gridContext.getStyles("col", {
-			className: (0, clsx.default)(props.className, responsiveClassname),
-			style: props.style,
-			classNames: props.classNames,
-			styles: props.styles
-		}));
+		const rootAttrs = (0, vue.computed)(() => {
+			return gridContext.getStyles("col", {
+				className: (0, clsx.default)(props.value.className, responsiveClassname),
+				style: props.value.style,
+				classNames: props.value.classNames,
+				styles: props.value.styles
+			});
+		});
 		const mergedAttrs = (0, vue.computed)(() => {
 			const others = {};
-			for (const key in props) if (!knownProps.includes(key)) others[key] = props[key];
+			const propsValue = props.value;
+			Object.keys(propsValue).forEach((key) => {
+				if (!knownProps.includes(key)) others[key] = propsValue[key];
+			});
+			const userMod = props.value.mod;
+			const mergedMod = [...Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)];
 			return {
 				...others,
+				mod: mergedMod,
 				...rootAttrs.value
 			};
 		});
-		const _offset = require_normalize_number_like_string_prop.normalizeNumberLikeStringProp(props.offset);
-		const _order = require_normalize_number_like_string_prop.normalizeNumberLikeStringProp(props.order);
+		const _offset = require_normalize_number_like_string_prop.normalizeNumberLikeStringProp(props.value.offset);
+		const _order = require_normalize_number_like_string_prop.normalizeNumberLikeStringProp(props.value.order);
 		const colStyle = require_col_custom.useColCustomStyle({
 			selector: responsiveClassname,
-			align: props.align,
+			align: props.value.align,
 			offset: _offset,
 			order: _order,
-			span: props.span
+			span: props.value.span
 		}, gridContext);
 		const currentStyleKey = (0, vue.ref)(null);
 		(0, vue.watchEffect)(() => {
@@ -368,7 +382,10 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 		(0, vue.onUnmounted)(() => {
 			if (currentStyleKey.value) require_responsive_style_manager.responsiveStyleManager.unregister(currentStyleKey.value);
 		});
+		__expose({ root: (0, vue.computed)(() => _col.value?.root ?? null) });
 		const __returned__ = {
+			_col,
+			rawProps,
 			props,
 			knownProps,
 			gridContext,
@@ -391,7 +408,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 	}
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-	return (0, vue.openBlock)(), (0, vue.createBlock)($setup["CBox"], (0, vue.normalizeProps)((0, vue.guardReactiveProps)($setup.mergedAttrs)), {
+	return (0, vue.openBlock)(), (0, vue.createBlock)($setup["CBox"], (0, vue.mergeProps)({ ref: "_col" }, $setup.mergedAttrs), {
 		default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 		_: 3
 	}, 16);

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

@@ -1 +1 @@
-{"version":3,"file":"col.cjs","names":[],"sources":["../../../../src/components/grid/col/col.vue"],"sourcesContent":["<template>\n  <c-box v-bind=\"mergedAttrs\">\n    <slot />\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport cx from 'clsx'\nimport { computed, inject, onUnmounted, ref, watchEffect } from 'vue'\nimport {\n  CBox,\n  normalizeNumberLikeStringProp,\n  responsiveStyleManager,\n  useRandomClassName,\n} from '../../../core'\nimport type { ColProps } from './col.types'\nimport { useColCustomStyle } from './col-custom'\nimport { GridContextValue } from '../grid.context'\nimport { GRID_CONTEXT_KEY } from '../grid.constants'\n\ndefineOptions({\n  name: 'CCol',\n})\n\nconst props = withDefaults(defineProps<ColProps>(), {\n  span: 12,\n})\n\nconst knownProps = [\n  'classNames',\n  'className',\n  'style',\n  'styles',\n  'vars',\n  'span',\n  'order',\n  'offset',\n  'align',\n]\n\nconst gridContext = inject(GRID_CONTEXT_KEY) as GridContextValue\n\nconst responsiveClassname = useRandomClassName()\n\nconst rootAttrs = computed(() =>\n  gridContext.getStyles('col', {\n    className: cx(props.className, responsiveClassname),\n    style: props.style,\n    classNames: props.classNames,\n    styles: props.styles,\n  })\n)\nconst mergedAttrs = computed(() => {\n  const others: Record<string, any> = {}\n  for (const key in props) {\n    if (!knownProps.includes(key)) {\n      others[key] = props[key as keyof typeof props]\n    }\n  }\n  return { ...others, ...rootAttrs.value }\n})\n\nconst _offset = normalizeNumberLikeStringProp(props.offset)\nconst _order = normalizeNumberLikeStringProp(props.order)\nconst colStyle = useColCustomStyle(\n  {\n    selector: responsiveClassname,\n    align: props.align,\n    offset: _offset,\n    order: _order,\n    span: props.span,\n  },\n  gridContext\n)\n\nconst currentStyleKey = ref<string | null>(null)\nwatchEffect(() => {\n  const cssText = colStyle.value.queryStylesString\n  if (cssText) {\n    const newKey = responsiveStyleManager.register(cssText)\n    if (currentStyleKey.value && currentStyleKey.value !== newKey) {\n      responsiveStyleManager.unregister(currentStyleKey.value)\n    }\n    currentStyleKey.value = newKey\n  } else if (currentStyleKey.value) {\n    responsiveStyleManager.unregister(currentStyleKey.value)\n    currentStyleKey.value = null\n  }\n})\nonUnmounted(() => {\n  if (currentStyleKey.value) {\n    responsiveStyleManager.unregister(currentStyleKey.value)\n  }\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwBA,MAAM,QAAQ;EAId,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,eAAA,GAAA,IAAA,OAAA,CAAqB,uBAAA,gBAAgB;EAE3C,MAAM,sBAAsB,6BAAA,mBAAmB;EAE/C,MAAM,aAAA,GAAA,IAAA,SAAA,OACJ,YAAY,UAAU,OAAO;GAC3B,YAAA,GAAA,KAAA,QAAA,CAAc,MAAM,WAAW,mBAAmB;GAClD,OAAO,MAAM;GACb,YAAY,MAAM;GAClB,QAAQ,MAAM;EAChB,CAAC,CACH;EACA,MAAM,eAAA,GAAA,IAAA,SAAA,OAA6B;GACjC,MAAM,SAA8B,CAAC;GACrC,KAAK,MAAM,OAAO,OAChB,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,MAAM;GAGxB,OAAO;IAAE,GAAG;IAAQ,GAAG,UAAU;GAAM;EACzC,CAAC;EAED,MAAM,UAAU,0CAAA,8BAA8B,MAAM,MAAM;EAC1D,MAAM,SAAS,0CAAA,8BAA8B,MAAM,KAAK;EACxD,MAAM,WAAW,mBAAA,kBACf;GACE,UAAU;GACV,OAAO,MAAM;GACb,QAAQ;GACR,OAAO;GACP,MAAM,MAAM;EACd,GACA,WACF;EAEA,MAAM,mBAAA,GAAA,IAAA,IAAA,CAAqC,IAAI;EAC/C,CAAA,GAAA,IAAA,YAAA,OAAkB;GAChB,MAAM,UAAU,SAAS,MAAM;GAC/B,IAAI,SAAS;IACX,MAAM,SAAS,iCAAA,uBAAuB,SAAS,OAAO;IACtD,IAAI,gBAAgB,SAAS,gBAAgB,UAAU,QACrD,iCAAA,uBAAuB,WAAW,gBAAgB,KAAK;IAEzD,gBAAgB,QAAQ;GAC1B,OAAO,IAAI,gBAAgB,OAAO;IAChC,iCAAA,uBAAuB,WAAW,gBAAgB,KAAK;IACvD,gBAAgB,QAAQ;GAC1B;EACF,CAAC;EACD,CAAA,GAAA,IAAA,YAAA,OAAkB;GAChB,IAAI,gBAAgB,OAClB,iCAAA,uBAAuB,WAAW,gBAAgB,KAAK;EAE3D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;mDA1FS,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":"col.cjs","names":[],"sources":["../../../../src/components/grid/col/col.vue"],"sourcesContent":["<template>\n  <c-box ref=\"_col\" v-bind=\"mergedAttrs\">\n    <slot />\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport cx from 'clsx'\nimport { computed, inject, onUnmounted, ref, watchEffect } from 'vue'\nimport {\n  CBox,\n  normalizeNumberLikeStringProp,\n  responsiveStyleManager,\n  useComponentProps,\n  useRandomClassName,\n} from '../../../core'\nimport type { ColProps } from './col.types'\nimport { useColCustomStyle } from './col-custom'\nimport { GRID_CONTEXT_KEY } from '../grid.constants'\n\ndefineOptions({\n  name: 'CCol',\n})\n\nconst _col = ref<InstanceType<typeof CBox> | null>(null)\n\nconst rawProps = defineProps<ColProps>()\n\nconst props = useComponentProps({\n  component: 'CCol',\n  defaultProps: {\n    span: 12,\n  },\n  props: rawProps,\n})\n\nconst knownProps = [\n  'classNames',\n  'className',\n  'style',\n  'styles',\n  'vars',\n  'span',\n  'order',\n  'offset',\n  'align',\n]\n\nconst gridContext = inject(GRID_CONTEXT_KEY)\n\nif (!gridContext) {\n  throw new Error('[@cck-ui/col] CCol component should be wrapped inside CGrid component.')\n}\n\nconst responsiveClassname = useRandomClassName()\n\nconst rootAttrs = computed(() => {\n  return gridContext.getStyles('col', {\n    className: cx(props.value.className, responsiveClassname),\n    style: props.value.style,\n    classNames: props.value.classNames,\n    styles: props.value.styles,\n  })\n})\n\nconst mergedAttrs = computed(() => {\n  const others: Record<string, any> = {}\n  const propsValue = props.value\n  Object.keys(propsValue).forEach((key) => {\n    if (!knownProps.includes(key)) {\n      others[key] = propsValue[key as keyof typeof propsValue]\n    }\n  })\n  const userMod = props.value.mod\n  const mergedMod = [...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean))]\n  return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\nconst _offset = normalizeNumberLikeStringProp(props.value.offset)\nconst _order = normalizeNumberLikeStringProp(props.value.order)\nconst colStyle = useColCustomStyle(\n  {\n    selector: responsiveClassname,\n    align: props.value.align,\n    offset: _offset,\n    order: _order,\n    span: props.value.span,\n  },\n  gridContext\n)\n\nconst currentStyleKey = ref<string | null>(null)\nwatchEffect(() => {\n  const cssText = colStyle.value.queryStylesString\n  if (cssText) {\n    const newKey = responsiveStyleManager.register(cssText)\n    if (currentStyleKey.value && currentStyleKey.value !== newKey) {\n      responsiveStyleManager.unregister(currentStyleKey.value)\n    }\n    currentStyleKey.value = newKey\n  } else if (currentStyleKey.value) {\n    responsiveStyleManager.unregister(currentStyleKey.value)\n    currentStyleKey.value = null\n  }\n})\nonUnmounted(() => {\n  if (currentStyleKey.value) {\n    responsiveStyleManager.unregister(currentStyleKey.value)\n  }\n})\n\ndefineExpose({\n  root: computed(() => _col.value?.root ?? null),\n})\n</script>\n"],"mappings":"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"}

package/cjs/components/grid/grid.cjs

@@ -1,14 +1,15 @@
 "use client";
 const require_is_number_like = require("../../core/utils/is-number-like/is-number-like.cjs");
 const require_export_helper = require("../../_virtual/_/plugin-vue/export-helper.cjs");
+const require_use_component_props = require("../../core/config-provider/use-component-props/use-component-props.cjs");
 const require_responsive_style_manager = require("../../core/responsive-style-manager/responsive-style-manager.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_create_vars_resolver = require("../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
 const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
 const require_grid_custom = require("./grid-custom.cjs");
 const require_grid_constants = require("./grid.constants.cjs");
 const require_grid_module = require("./grid.module.cjs");
+const require_grid_utils = require("./grid.utils.cjs");
 let vue = require("vue");
 //#region packages/@cck-ui/core/src/components/grid/grid.vue
 const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
@@ -17,8 +18,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 	props: {
 		gap: {
 			type: null,
-			required: false,
-			default: "md"
+			required: false
 		},
 		rowGap: {
 			type: null,
@@ -42,8 +42,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 		},
 		columns: {
 			type: [Number, String],
-			required: false,
-			default: 12
+			required: false
 		},
 		overflow: {
 			type: null,
@@ -348,8 +347,19 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 		}
 	},
 	setup(__props, { expose: __expose }) {
-		__expose();
-		const props = __props;
+		const _container = (0, vue.ref)(null);
+		const _root = (0, vue.ref)(null);
+		const _inner = (0, vue.ref)(null);
+		const attrs = (0, vue.useAttrs)();
+		const rawProps = __props;
+		const props = require_use_component_props.useComponentProps({
+			component: "CGrid",
+			defaultProps: {
+				columns: 12,
+				gap: "md"
+			},
+			props: rawProps
+		});
 		const knownProps = [
 			"classNames",
 			"className",
@@ -368,31 +378,35 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			"type",
 			"attributes"
 		];
-		const varsResolver = require_create_vars_resolver.createVarsResolver((_, { justify, align, overflow }) => ({ root: {
-			"--grid-align": align,
-			"--grid-justify": justify,
-			"--grid-overflow": overflow
-		} }));
 		const getStyles = require_use_styles.useStyles({
 			name: "Grid",
 			classes: require_grid_module.default,
-			props,
-			className: props.className,
-			style: props.style,
-			classNames: props.classNames,
-			styles: props.styles,
-			unstyled: props.unstyled,
-			attributes: props.attributes,
-			vars: props.vars,
-			varsResolver
+			props: {
+				...props.value,
+				...attrs
+			},
+			className: props.value.className,
+			style: props.value.style,
+			classNames: props.value.classNames,
+			styles: props.value.styles,
+			unstyled: props.value.unstyled,
+			attributes: props.value.attributes,
+			vars: props.value.vars,
+			varsResolver: require_grid_utils.varsResolver
 		});
 		const responsiveClassname = require_use_random_classname.useRandomClassName();
 		const rootAttrs = (0, vue.computed)(() => getStyles("root", { className: responsiveClassname }));
 		const mergedRootAttrs = (0, vue.computed)(() => {
 			const others = {};
-			for (const key in props) if (!knownProps.includes(key)) others[key] = props[key];
+			const propsValue = props.value;
+			Object.keys(propsValue).forEach((key) => {
+				if (!knownProps.includes(key)) others[key] = propsValue[key];
+			});
+			const userMod = props.value.mod;
+			const mergedMod = [...Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)];
 			return {
 				...others,
+				mod: mergedMod,
 				...rootAttrs.value
 			};
 		});
@@ -417,16 +431,16 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 		(0, vue.onUnmounted)(() => {
 			if (currentStyleKey.value) require_responsive_style_manager.responsiveStyleManager.unregister(currentStyleKey.value);
 		});
-		const _breakpoints = (0, vue.computed)(() => props.breakpoints);
+		const _breakpoints = (0, vue.computed)(() => props.value.breakpoints);
 		const _columns = (0, vue.computed)(() => {
-			if (!require_is_number_like.isNumberLike(props.columns)) {
-				console.warn(`[C-Grid] columns should be number or number-like string, got ${props.columns}. Fallback to default columns 12.`);
+			if (!require_is_number_like.isNumberLike(props.value.columns)) {
+				console.warn(`[C-Grid] columns should be number or number-like string, got ${props.value.columns}. Fallback to default columns 12.`);
 				return 12;
 			}
-			return Number(props.columns);
+			return Number(props.value.columns);
 		});
-		const _grow = (0, vue.computed)(() => props.grow);
-		const _type = (0, vue.computed)(() => props.type);
+		const _grow = (0, vue.computed)(() => props.value.grow);
+		const _type = (0, vue.computed)(() => props.value.type);
 		const context = {
 			getStyles,
 			get breakpoints() {
@@ -443,10 +457,19 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			}
 		};
 		(0, vue.provide)(require_grid_constants.GRID_CONTEXT_KEY, context);
+		__expose({
+			container: (0, vue.computed)(() => _container.value?.root ?? null),
+			root: (0, vue.computed)(() => _root.value?.root ?? null),
+			inner: (0, vue.computed)(() => _inner.value?.root ?? null)
+		});
 		const __returned__ = {
+			_container,
+			_root,
+			_inner,
+			attrs,
+			rawProps,
 			props,
 			knownProps,
-			varsResolver,
 			getStyles,
 			responsiveClassname,
 			rootAttrs,
@@ -472,17 +495,23 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 	}
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-	return $props.type === "container" && $props.breakpoints ? ((0, vue.openBlock)(), (0, vue.createBlock)($setup["CBox"], (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 0 }, $setup.containerAttrs)), {
-		default: (0, vue.withCtx)(() => [(0, vue.createVNode)($setup["CBox"], (0, vue.normalizeProps)((0, vue.guardReactiveProps)($setup.mergedRootAttrs)), {
-			default: (0, vue.withCtx)(() => [(0, vue.createVNode)($setup["CBox"], (0, vue.normalizeProps)((0, vue.guardReactiveProps)($setup.innerAttrs)), {
+	return $props.type === "container" && $props.breakpoints ? ((0, vue.openBlock)(), (0, vue.createBlock)($setup["CBox"], (0, vue.mergeProps)({
+		key: 0,
+		ref: "_container"
+	}, $setup.containerAttrs), {
+		default: (0, vue.withCtx)(() => [(0, vue.createVNode)($setup["CBox"], (0, vue.mergeProps)({ ref: "_root" }, $setup.mergedRootAttrs), {
+			default: (0, vue.withCtx)(() => [(0, vue.createVNode)($setup["CBox"], (0, vue.mergeProps)({ ref: "_inner" }, $setup.innerAttrs), {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 				_: 3
 			}, 16)]),
 			_: 3
 		}, 16)]),
 		_: 3
-	}, 16)) : ((0, vue.openBlock)(), (0, vue.createBlock)($setup["CBox"], (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 1 }, $setup.mergedRootAttrs)), {
-		default: (0, vue.withCtx)(() => [(0, vue.createVNode)($setup["CBox"], (0, vue.normalizeProps)((0, vue.guardReactiveProps)($setup.innerAttrs)), {
+	}, 16)) : ((0, vue.openBlock)(), (0, vue.createBlock)($setup["CBox"], (0, vue.mergeProps)({
+		key: 1,
+		ref: "_root"
+	}, $setup.mergedRootAttrs), {
+		default: (0, vue.withCtx)(() => [(0, vue.createVNode)($setup["CBox"], (0, vue.mergeProps)({ ref: "_inner" }, $setup.innerAttrs), {
 			default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 			_: 3
 		}, 16)]),

package/cjs/components/grid/grid.cjs.map

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

package/cjs/components/grid/grid.constants.cjs.map

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

package/cjs/components/grid/grid.utils.cjs

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

package/cjs/components/grid/grid.utils.cjs.map

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

package/cjs/components/grid/index.cjs

@@ -1,10 +1,15 @@
 "use client";
 const require_install = require("../../core/utils/vue/install.cjs");
+const require_statics = require("../../core/utils/vue/statics.cjs");
+const require_button_utils = require("../button/button.utils.cjs");
+const require_grid_module = require("./grid.module.cjs");
 const require_grid = require("./grid.cjs");
 const require_col = require("./col/col.cjs");
 //#region packages/@cck-ui/core/src/components/grid/index.ts
-const CCol = require_install.withInstall(require_col.default);
-const CGrid = require_install.withInstall(require_grid.default, { Col: require_col.default });
+const GridWithStatic = require_statics.withPropsFactory(require_statics.withExtend(require_statics.withVarsResolver(require_statics.withClasses(require_grid.default, require_grid_module.default), require_button_utils.varsResolver)));
+const ColWithStatic = require_statics.withPropsFactory(require_statics.withExtend(require_statics.withClasses(require_col.default, require_grid_module.default)));
+const CCol = require_install.withInstall(ColWithStatic);
+const CGrid = require_install.withInstall(GridWithStatic, { Col: require_col.default });
 //#endregion
 exports.CCol = CCol;
 exports.CGrid = CGrid;

package/cjs/components/grid/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["withInstall","Col","Grid"],"sources":["../../../src/components/grid/index.ts"],"sourcesContent":["import { type SFCWithInstall, withInstall } from '../../core'\nimport Grid from './grid.vue'\nimport Col from './col/col.vue'\n\nexport const CCol: SFCWithInstall<typeof Col> = withInstall(Col)\nexport const CGrid: SFCWithInstall<typeof Grid> & { Col: typeof Col } = withInstall(Grid, { Col })\nexport default CGrid\n\nexport * from './col/col.types.js'\nexport * from './grid.types.js'\n"],"mappings":";;;;;AAIA,MAAa,OAAmCA,gBAAAA,YAAYC,YAAAA,OAAG;AAC/D,MAAa,QAA2DD,gBAAAA,YAAYE,aAAAA,SAAM,EAAE,KAAA,YAAA,QAAI,CAAC"}
+{"version":3,"file":"index.cjs","names":["withPropsFactory","withExtend","withVarsResolver","withClasses","Grid","classes","varsResolver","Col","withInstall"],"sources":["../../../src/components/grid/index.ts"],"sourcesContent":["import {\n  type SFCWithInstallAndClasses,\n  withClasses,\n  withExtend,\n  withInstall,\n  withPropsFactory,\n  withVarsResolver,\n} from '../../core'\nimport Grid from './grid.vue'\nimport Col from './col/col.vue'\nimport classes from './grid.module.css'\nimport { varsResolver } from '../button/button.utils'\n\nconst GridWithStatic = withPropsFactory(\n  withExtend(withVarsResolver(withClasses(Grid, classes), varsResolver))\n)\nconst ColWithStatic = withPropsFactory(withExtend(withClasses(Col, classes)))\n\nexport const CCol: SFCWithInstallAndClasses<typeof Col> = withInstall(ColWithStatic)\nexport const CGrid: SFCWithInstallAndClasses<typeof Grid, typeof classes> & { Col: typeof Col } =\n  withInstall(GridWithStatic, { Col })\nexport default CGrid\n\nexport * from './col/col.types'\nexport * from './grid.types'\n"],"mappings":";;;;;;;;AAaA,MAAM,iBAAiBA,gBAAAA,iBACrBC,gBAAAA,WAAWC,gBAAAA,iBAAiBC,gBAAAA,YAAYC,aAAAA,SAAMC,oBAAAA,OAAO,GAAGC,qBAAAA,YAAY,CAAC,CACvE;AACA,MAAM,gBAAgBN,gBAAAA,iBAAiBC,gBAAAA,WAAWE,gBAAAA,YAAYI,YAAAA,SAAKF,oBAAAA,OAAO,CAAC,CAAC;AAE5E,MAAa,OAA6CG,gBAAAA,YAAY,aAAa;AACnF,MAAa,QACXA,gBAAAA,YAAY,gBAAgB,EAAE,KAAA,YAAA,QAAI,CAAC"}