@cck-ui/core 0.26.0 → 0.27.0

package/esm/components/breadcrumbs/breadcrumbs.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.module.mjs","names":[],"sources":["../../../src/components/breadcrumbs/breadcrumbs.module.css"],"sourcesContent":[".root {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n}\n\n.breadcrumb {\n  line-height: 1;\n  word-spacing: nowrap;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.separator {\n  margin-inline: var(--bc-separator-margin, var(--c-spacing-xs));\n  line-height: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  @mixin where-light {\n    color: var(--c-color-gray-7);\n  }\n\n  @mixin where-dark {\n    color: var(--c-color-dark-2);\n  }\n}\n"],"mappings":";;AAAA,IAAA,6BAAe;CAAC,QAAO;CAAa,cAAa;CAAa,aAAY;AAAY"}

package/esm/components/breadcrumbs/breadcrumbs.utils.mjs

@@ -0,0 +1,9 @@
+"use client";
+import { getSpacing } from "../../core/utils/get-size/get-size.mjs";
+import { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
+//#region packages/@cck-ui/core/src/components/breadcrumbs/breadcrumbs.utils.ts
+const varsResolver = createVarsResolver((_, { separatorMargin }) => ({ root: { "--bc-separator-margin": getSpacing(separatorMargin) } }));
+//#endregion
+export { varsResolver };
+
+//# sourceMappingURL=breadcrumbs.utils.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.utils.mjs","names":[],"sources":["../../../src/components/breadcrumbs/breadcrumbs.utils.ts"],"sourcesContent":["import { createVarsResolver, getSpacing } from '../../core'\nimport { BreadcrumbsFactory } from './breadcrumbs.types'\n\nexport const varsResolver = createVarsResolver<BreadcrumbsFactory>((_, { separatorMargin }) => ({\n  root: {\n    '--bc-separator-margin': getSpacing(separatorMargin),\n  },\n}))\n"],"mappings":";;;;AAGA,MAAa,eAAe,oBAAwC,GAAG,EAAE,uBAAuB,EAC9F,MAAM,EACJ,yBAAyB,WAAW,eAAe,EACrD,EACF,EAAE"}

package/esm/components/breadcrumbs/filter-falsy-children/filter-falsy-children.mjs

@@ -0,0 +1,17 @@
+"use client";
+import { Fragment, isVNode } from "vue";
+//#region packages/@cck-ui/core/src/components/breadcrumbs/filter-falsy-children/filter-falsy-children.ts
+function filterFalsyChildren(children) {
+	const nodes = Array.isArray(children) ? children : children ? [children] : [];
+	function process(node) {
+		if (Array.isArray(node)) return node.flatMap((item) => process(item));
+		if (!isVNode(node)) return [];
+		if (node.type === Fragment) return process(Array.isArray(node.children) ? node.children : node.children ? [node.children] : []);
+		return [node];
+	}
+	return process(nodes);
+}
+//#endregion
+export { filterFalsyChildren };
+
+//# sourceMappingURL=filter-falsy-children.mjs.map

package/esm/components/breadcrumbs/filter-falsy-children/filter-falsy-children.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-falsy-children.mjs","names":[],"sources":["../../../../src/components/breadcrumbs/filter-falsy-children/filter-falsy-children.ts"],"sourcesContent":["import { Fragment, isVNode, VNode } from 'vue'\n\nexport function filterFalsyChildren(children: unknown): VNode[] {\n  const nodes = Array.isArray(children) ? children : children ? [children] : []\n\n  function process(node: unknown): VNode[] {\n    if (Array.isArray(node)) {\n      return node.flatMap((item) => process(item))\n    }\n\n    if (!isVNode(node)) {\n      return []\n    }\n\n    if (node.type === Fragment) {\n      const childNodes = Array.isArray(node.children)\n        ? node.children\n        : node.children\n          ? [node.children]\n          : []\n      return process(childNodes)\n    }\n\n    return [node]\n  }\n\n  return process(nodes)\n}\n"],"mappings":";;;AAEA,SAAgB,oBAAoB,UAA4B;CAC9D,MAAM,QAAQ,MAAM,QAAQ,QAAQ,IAAI,WAAW,WAAW,CAAC,QAAQ,IAAI,CAAC;CAE5E,SAAS,QAAQ,MAAwB;EACvC,IAAI,MAAM,QAAQ,IAAI,GACpB,OAAO,KAAK,SAAS,SAAS,QAAQ,IAAI,CAAC;EAG7C,IAAI,CAAC,QAAQ,IAAI,GACf,OAAO,CAAC;EAGV,IAAI,KAAK,SAAS,UAMhB,OAAO,QALY,MAAM,QAAQ,KAAK,QAAQ,IAC1C,KAAK,WACL,KAAK,WACH,CAAC,KAAK,QAAQ,IACd,CAAC,CACkB;EAG3B,OAAO,CAAC,IAAI;CACd;CAEA,OAAO,QAAQ,KAAK;AACtB"}

package/esm/components/breadcrumbs/index.mjs

@@ -0,0 +1,11 @@
+"use client";
+import { withInstall } from "../../core/utils/vue/install.mjs";
+import { withClasses, withExtend, withPropsFactory, withVarsResolver } from "../../core/utils/vue/statics.mjs";
+import { varsResolver } from "./breadcrumbs.utils.mjs";
+import breadcrumbs_module_default from "./breadcrumbs.module.mjs";
+import breadcrumbs_default from "./breadcrumbs.mjs";
+const CBreadcrumbs = withInstall(withPropsFactory(withExtend(withVarsResolver(withClasses(breadcrumbs_default, breadcrumbs_module_default), varsResolver))));
+//#endregion
+export { CBreadcrumbs, CBreadcrumbs as default };
+
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["Breadcrumbs","classes"],"sources":["../../../src/components/breadcrumbs/index.ts"],"sourcesContent":["import {\n  SFCWithInstallAndClasses,\n  withClasses,\n  withExtend,\n  withInstall,\n  withPropsFactory,\n  withVarsResolver,\n} from '../../core'\nimport { varsResolver } from './breadcrumbs.utils'\nimport Breadcrumbs from './breadcrumbs.vue'\nimport classes from './breadcrumbs.module.css'\n\nconst BreadcrumbsWithStatic = withPropsFactory(\n  withExtend(withVarsResolver(withClasses(Breadcrumbs, classes), varsResolver))\n)\n\nexport const CBreadcrumbs: SFCWithInstallAndClasses<typeof Breadcrumbs, typeof classes> =\n  withInstall(BreadcrumbsWithStatic)\n\nexport default CBreadcrumbs\n\nexport * from './breadcrumbs.types'\n"],"mappings":";;;;;;AAgBA,MAAa,eACX,YAL4B,iBAC5B,WAAW,iBAAiB,YAAYA,qBAAaC,0BAAO,GAAG,YAAY,CAAC,CAIhE,CAAqB"}

package/esm/components/group/group.mjs

@@ -7,7 +7,7 @@ import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
 import { filterFalsyChildren } from "./filter-falsy-children/filter-falsy-children.mjs";
 import group_module_default from "./group.module.mjs";
 import { varsResolver } from "./group.utils.mjs";
-import { computed, createBlock, createCommentVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, useAttrs, useSlots, withCtx } from "vue";
+import { Fragment, computed, createBlock, createElementBlock, defineComponent, mergeProps, openBlock, ref, renderList, resolveDynamicComponent, useAttrs, useSlots, withCtx } from "vue";
 //#region packages/@cck-ui/core/src/components/group/group.vue
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "CGroup",
@@ -361,11 +361,16 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			"mod",
 			"attributes"
 		];
-		const filteredChildren = filterFalsyChildren(slots.default?.());
-		const childrenCount = filteredChildren.length;
-		const resolvedGap = getSpacing(props.value.gap);
-		const childWidth = `calc(${100 / childrenCount}% - (${resolvedGap} - ${resolvedGap} / ${childrenCount}))`;
-		const stylesCtx = { childWidth };
+		const filteredChildren = computed(() => filterFalsyChildren(slots.default?.()));
+		const childrenCount = computed(() => filteredChildren.value.length);
+		const resolvedGap = computed(() => getSpacing(props.value.gap));
+		const childWidth = computed(() => {
+			const count = childrenCount.value;
+			const gap = resolvedGap.value;
+			if (count === 0) return "auto";
+			return `calc(${100 / count}% - (${gap} - ${gap} / ${count}))`;
+		});
+		const stylesCtx = computed(() => ({ childWidth: childWidth.value }));
 		const styleProps = computed(() => ({
 			...props.value,
 			...attrs,
@@ -435,12 +440,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 		size: $props.__size,
 		variant: $props.variant
 	}), {
-		default: withCtx(() => [
-			createCommentVNode(" TODO: filter falsy children "),
-			createCommentVNode(" <component v-for=\"(node, index) in filteredChildren\" :key=\"node.key || index\" :is=\"node\" /> "),
-			renderSlot(_ctx.$slots, "default")
-		]),
-		_: 3
+		default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList($setup.filteredChildren, (node, index) => {
+			return openBlock(), createBlock(resolveDynamicComponent(node), { key: node.key || index });
+		}), 128))]),
+		_: 1
 	}, 16, ["size", "variant"]);
 }
 var group_default = /*#__PURE__*/ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/cck-ui/cck-ui/packages/@cck-ui/core/src/components/group/group.vue"]]);

package/esm/components/group/group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"group.mjs","names":[],"sources":["../../../src/components/group/group.vue"],"sourcesContent":["<template>\n  <c-box ref=\"_root\" v-bind=\"mergedAttrs\" :size=\"__size\" :variant=\"variant\">\n    <!-- TODO: filter falsy children -->\n    <!-- <component v-for=\"(node, index) in filteredChildren\" :key=\"node.key || index\" :is=\"node\" /> -->\n    <slot />\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs, useSlots } from 'vue'\nimport type { GroupFactory, GroupProps, GroupStylesCtx } from './group.types'\nimport { filterFalsyChildren } from './filter-falsy-children/filter-falsy-children'\nimport { getSpacing, useStyles, CBox, useComponentProps, CStyleProp } from '../../core'\nimport classes from './group.module.css'\nimport { varsResolver } from './group.utils'\n\ndefineOptions({\n  name: 'CGroup',\n})\n\nconst _root = ref<InstanceType<typeof CBox> | null>(null)\n\nconst attrs = useAttrs()\nconst slots = useSlots()\n\nconst rawProps = defineProps<GroupProps>()\n\nconst props = useComponentProps({\n  component: 'CGroup',\n  defaultProps: {\n    preventGrowOverflow: true,\n    gap: 'md',\n    align: 'center',\n    justify: 'flex-start',\n    wrap: 'wrap',\n  },\n  props: rawProps,\n})\n\nconst knownProps = [\n  'classNames',\n  'className',\n  'style',\n  'styles',\n  'unstyled',\n  'gap',\n  'align',\n  'justify',\n  'wrap',\n  'grow',\n  'preventGrowOverflow',\n  'vars',\n  'variant',\n  '__size',\n  'mod',\n  'attributes',\n]\n\nconst filteredChildren = filterFalsyChildren(slots.default?.())\nconst childrenCount = filteredChildren.length\nconst resolvedGap = getSpacing(props.value.gap)\nconst childWidth = `calc(${100 / childrenCount}% - (${resolvedGap} - ${resolvedGap} / ${childrenCount}))`\n\nconst stylesCtx: GroupStylesCtx = { childWidth }\n\nconst styleProps = computed(() => ({\n  ...props.value,\n  ...attrs,\n  style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<GroupFactory>({\n  name: 'Group',\n  props: styleProps,\n  stylesCtx,\n  className: () => props.value.className,\n  style: () => props.value.style,\n  classes,\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(() => [{ grow: props.value.grow }])\n\nconst rootAttrs = computed(() => getStyles('root'))\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 = [\n    ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n    ...(modList.value || []),\n  ]\n  return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n  root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBA,MAAM,QAAQ,IAAsC,IAAI;EAExD,MAAM,QAAQ,SAAS;EACvB,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX,cAAc;IACZ,qBAAqB;IACrB,KAAK;IACL,OAAO;IACP,SAAS;IACT,MAAM;GACR;GACA,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,mBAAmB,oBAAoB,MAAM,UAAU,CAAC;EAC9D,MAAM,gBAAgB,iBAAiB;EACvC,MAAM,cAAc,WAAW,MAAM,MAAM,GAAG;EAC9C,MAAM,aAAa,QAAQ,MAAM,cAAc,OAAO,YAAY,KAAK,YAAY,KAAK,cAAc;EAEtG,MAAM,YAA4B,EAAE,WAAW;EAE/C,MAAM,aAAa,gBAAgB;GACjC,GAAG,MAAM;GACT,GAAG;GACH,OAAQ,MAAM,SAAS,MAAM,MAAM;EACrC,EAAE;EAEF,MAAM,YAAY,UAAwB;GACxC,MAAM;GACN,OAAO;GACP;GACA,iBAAiB,MAAM,MAAM;GAC7B,aAAa,MAAM,MAAM;GACzB,SAAA;GACA,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB;EACF,CAAC;EAED,MAAM,UAAU,eAAe,CAAC,EAAE,MAAM,MAAM,MAAM,KAAK,CAAC,CAAC;EAE3D,MAAM,YAAY,eAAe,UAAU,MAAM,CAAC;EAElD,MAAM,cAAc,eAAe;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,OAAO,KAAK,UAAU,CAAC,CAAC,SAAS,QAAQ;IACvC,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAE7B,CAAC;GACD,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAChB,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,GAC/D,GAAI,QAAQ,SAAS,CAAC,CACxB;GACA,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,UAAU;GAAM;EACzD,CAAC;EAED,SAAa,EACX,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA3GC,YAIQ,OAAA,SAJR,WAIQ,EAJD,KAAI,QAAO,GAAS,OAAA,aAAW;EAAG,MAAM,OAAA;EAAS,SAAS,OAAA;;yBAC3B;GAApC,mBAAA,+BAAA;GACA,mBAAA,qGAAA;GACA,WAAQ,KAAA,QAAA,SAAA"}
+{"version":3,"file":"group.mjs","names":[],"sources":["../../../src/components/group/group.vue"],"sourcesContent":["<template>\n  <c-box ref=\"_root\" v-bind=\"mergedAttrs\" :size=\"__size\" :variant=\"variant\">\n    <component v-for=\"(node, index) in filteredChildren\" :key=\"node.key || index\" :is=\"node\" />\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs, useSlots } from 'vue'\nimport type { GroupFactory, GroupProps, GroupStylesCtx } from './group.types'\nimport { filterFalsyChildren } from './filter-falsy-children/filter-falsy-children'\nimport { getSpacing, useStyles, CBox, useComponentProps, CStyleProp } from '../../core'\nimport classes from './group.module.css'\nimport { varsResolver } from './group.utils'\n\ndefineOptions({\n  name: 'CGroup',\n})\n\nconst _root = ref<InstanceType<typeof CBox> | null>(null)\n\nconst attrs = useAttrs()\nconst slots = useSlots()\n\nconst rawProps = defineProps<GroupProps>()\n\nconst props = useComponentProps({\n  component: 'CGroup',\n  defaultProps: {\n    preventGrowOverflow: true,\n    gap: 'md',\n    align: 'center',\n    justify: 'flex-start',\n    wrap: 'wrap',\n  },\n  props: rawProps,\n})\n\nconst knownProps = [\n  'classNames',\n  'className',\n  'style',\n  'styles',\n  'unstyled',\n  'gap',\n  'align',\n  'justify',\n  'wrap',\n  'grow',\n  'preventGrowOverflow',\n  'vars',\n  'variant',\n  '__size',\n  'mod',\n  'attributes',\n]\n\nconst filteredChildren = computed(() => filterFalsyChildren(slots.default?.()))\nconst childrenCount = computed(() => filteredChildren.value.length)\nconst resolvedGap = computed(() => getSpacing(props.value.gap))\n\nconst childWidth = computed(() => {\n  const count = childrenCount.value\n  const gap = resolvedGap.value\n  if (count === 0) {\n    return 'auto'\n  }\n  return `calc(${100 / count}% - (${gap} - ${gap} / ${count}))`\n})\n\nconst stylesCtx = computed<GroupStylesCtx>(() => ({\n  childWidth: childWidth.value,\n}))\n\nconst styleProps = computed(() => ({\n  ...props.value,\n  ...attrs,\n  style: (attrs.style ?? props.value.style) as CStyleProp,\n}))\n\nconst getStyles = useStyles<GroupFactory>({\n  name: 'Group',\n  props: styleProps,\n  stylesCtx,\n  className: () => props.value.className,\n  style: () => props.value.style,\n  classes,\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(() => [{ grow: props.value.grow }])\n\nconst rootAttrs = computed(() => getStyles('root'))\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 = [\n    ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n    ...(modList.value || []),\n  ]\n  return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n  root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkBA,MAAM,QAAQ,IAAsC,IAAI;EAExD,MAAM,QAAQ,SAAS;EACvB,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX,cAAc;IACZ,qBAAqB;IACrB,KAAK;IACL,OAAO;IACP,SAAS;IACT,MAAM;GACR;GACA,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,mBAAmB,eAAe,oBAAoB,MAAM,UAAU,CAAC,CAAC;EAC9E,MAAM,gBAAgB,eAAe,iBAAiB,MAAM,MAAM;EAClE,MAAM,cAAc,eAAe,WAAW,MAAM,MAAM,GAAG,CAAC;EAE9D,MAAM,aAAa,eAAe;GAChC,MAAM,QAAQ,cAAc;GAC5B,MAAM,MAAM,YAAY;GACxB,IAAI,UAAU,GACZ,OAAO;GAET,OAAO,QAAQ,MAAM,MAAM,OAAO,IAAI,KAAK,IAAI,KAAK,MAAM;EAC5D,CAAC;EAED,MAAM,YAAY,gBAAgC,EAChD,YAAY,WAAW,MACzB,EAAE;EAEF,MAAM,aAAa,gBAAgB;GACjC,GAAG,MAAM;GACT,GAAG;GACH,OAAQ,MAAM,SAAS,MAAM,MAAM;EACrC,EAAE;EAEF,MAAM,YAAY,UAAwB;GACxC,MAAM;GACN,OAAO;GACP;GACA,iBAAiB,MAAM,MAAM;GAC7B,aAAa,MAAM,MAAM;GACzB,SAAA;GACA,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB;EACF,CAAC;EAED,MAAM,UAAU,eAAe,CAAC,EAAE,MAAM,MAAM,MAAM,KAAK,CAAC,CAAC;EAE3D,MAAM,YAAY,eAAe,UAAU,MAAM,CAAC;EAElD,MAAM,cAAc,eAAe;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,OAAO,KAAK,UAAU,CAAC,CAAC,SAAS,QAAQ;IACvC,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAE7B,CAAC;GACD,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAChB,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,GAC/D,GAAI,QAAQ,SAAS,CAAC,CACxB;GACA,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,UAAU;GAAM;EACzD,CAAC;EAED,SAAa,EACX,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAnHC,YAEQ,OAAA,SAFR,WAEQ,EAFD,KAAI,QAAO,GAAS,OAAA,aAAW;EAAG,MAAM,OAAA;EAAS,SAAS,OAAA;;yBACX,EAAA,UAAA,IAAA,GAApD,mBAA2F,UAAA,MAAA,WAAxD,OAAA,mBAAhB,MAAM,UAAK;uBAA9B,YAA2F,wBAAR,IAAI,GAAA,EAAjC,KAAK,KAAK,OAAO,MAAA,CAAA"}

package/esm/index.mjs

@@ -61,6 +61,7 @@ import { CAlert } from "./components/alert/index.mjs";
 import { CText } from "./components/text/index.mjs";
 import { CAnchor } from "./components/anchor/index.mjs";
 import { CAspectRatio } from "./components/aspect-ratio/index.mjs";
+import { CBreadcrumbs } from "./components/breadcrumbs/index.mjs";
 import { CButton, CButtonGroup, CButtonGroupSection } from "./components/button/index.mjs";
 import { CCenter } from "./components/center/index.mjs";
 import { CContainer } from "./components/container/index.mjs";
@@ -94,6 +95,7 @@ const components = [
 	CAlert,
 	CAnchor,
 	CAspectRatio,
+	CBreadcrumbs,
 	CButton,
 	CButtonGroup,
 	CButtonGroupSection,
@@ -138,6 +140,6 @@ const CckUI = { install(app) {
 	});
 } };
 //#endregion
-export { CActionIcon, CActionIconGroup, CActionIconGroupSection, CAlert, CAnchor, CAspectRatio, CBox, CButton, CButtonGroup, CButtonGroupSection, transitions as CCK_TRANSITIONS, CCenter, CCloseButton, CCol, CContainer, CCopyButton, CDefaultLoaders, CDivider, CEmptyState, CEmptyStateActions, CEmptyStateDescription, CEmptyStateIndicator, CEmptyStateTitle, CFileButton, CFlex, CFocusTrap, CGrid, CGroup, CImage, CLoader, CONFIG_KEY, CPaper, CPortal, CSemiCircleProgress, CSimpleGrid, CSkeleton, CSpace, CSplitter, CSplitterPane, CStack, CText, CTransition, CTypography, CVisuallyHidden, CckConfigProvider, CckUI, CckUI as default, DEFAULT_THEME, FOCUS_CLASS_NAMES, STYLE_PROPS_DATA, THEME_KEY, UnstyledButton, alpha, camelToKebabCase, colorsTuple, createTheme, createVarsResolver, darken, deepMerge, defaultCssVariablesResolver, defaultVariantColorsResolver, em, extractStyleProps, filterProps, getBaseValue, getBreakpointValue, getCSSColorVariables, getComponentName, getFontSize, getGradient, getLineHeight, getPrimaryShade, getRadius, getShadow, getSize, getSortedBreakpoints, getSpacing, getThemeColor, getTransitionProps, hashStyleProps, isLightColor, isNumber, isNumberLike, isString, isStringNumber, isUndefined, isVirtualColor, keys, luminance, mergeThemeOverrides, normalizeNumberLikeStringProp, numberLikeStringToNumber, parseStyleProps, parseThemeColor, px, rem, resolveClassNames, resolveStyles, responsiveStyleManager, rgb, rgba, stylesToString, toRgba, useCckClassNamesPrefix, useCckColorScheme, useCckCssVariablesResolver, useCckEnv, useCckIsHeadless, useCckStyleNonce, useCckStylesTransform, useCckSxTransform, useCckTheme, useCckWithStaticClasses, useComponentProps, useConfigContext, useProviderColorScheme, useRandomClassName, useStyles, virtualColor, withClasses, withExtend, withInstall, withPropsDefaultSetter, withPropsFactory, withVarsResolver };
+export { CActionIcon, CActionIconGroup, CActionIconGroupSection, CAlert, CAnchor, CAspectRatio, CBox, CBreadcrumbs, CButton, CButtonGroup, CButtonGroupSection, transitions as CCK_TRANSITIONS, CCenter, CCloseButton, CCol, CContainer, CCopyButton, CDefaultLoaders, CDivider, CEmptyState, CEmptyStateActions, CEmptyStateDescription, CEmptyStateIndicator, CEmptyStateTitle, CFileButton, CFlex, CFocusTrap, CGrid, CGroup, CImage, CLoader, CONFIG_KEY, CPaper, CPortal, CSemiCircleProgress, CSimpleGrid, CSkeleton, CSpace, CSplitter, CSplitterPane, CStack, CText, CTransition, CTypography, CVisuallyHidden, CckConfigProvider, CckUI, CckUI as default, DEFAULT_THEME, FOCUS_CLASS_NAMES, STYLE_PROPS_DATA, THEME_KEY, UnstyledButton, alpha, camelToKebabCase, colorsTuple, createTheme, createVarsResolver, darken, deepMerge, defaultCssVariablesResolver, defaultVariantColorsResolver, em, extractStyleProps, filterProps, getBaseValue, getBreakpointValue, getCSSColorVariables, getComponentName, getFontSize, getGradient, getLineHeight, getPrimaryShade, getRadius, getShadow, getSize, getSortedBreakpoints, getSpacing, getThemeColor, getTransitionProps, hashStyleProps, isLightColor, isNumber, isNumberLike, isString, isStringNumber, isUndefined, isVirtualColor, keys, luminance, mergeThemeOverrides, normalizeNumberLikeStringProp, numberLikeStringToNumber, parseStyleProps, parseThemeColor, px, rem, resolveClassNames, resolveStyles, responsiveStyleManager, rgb, rgba, stylesToString, toRgba, useCckClassNamesPrefix, useCckColorScheme, useCckCssVariablesResolver, useCckEnv, useCckIsHeadless, useCckStyleNonce, useCckStylesTransform, useCckSxTransform, useCckTheme, useCckWithStaticClasses, useComponentProps, useConfigContext, useProviderColorScheme, useRandomClassName, useStyles, virtualColor, withClasses, withExtend, withInstall, withPropsDefaultSetter, withPropsFactory, withVarsResolver };
 
 //# sourceMappingURL=index.mjs.map

package/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../src/index.ts"],"sourcesContent":["import type { App, Plugin } from 'vue'\nimport {\n  CActionIcon,\n  CActionIconGroup,\n  CActionIconGroupSection,\n  CAlert,\n  CAnchor,\n  CAspectRatio,\n  CButton,\n  CButtonGroup,\n  CButtonGroupSection,\n  CCenter,\n  CCloseButton,\n  CCol,\n  CContainer,\n  CCopyButton,\n  CDivider,\n  CEmptyState,\n  CEmptyStateActions,\n  CEmptyStateDescription,\n  CEmptyStateIndicator,\n  CEmptyStateTitle,\n  CFileButton,\n  CFlex,\n  CFocusTrap,\n  CGrid,\n  CGroup,\n  CImage,\n  CLoader,\n  CPaper,\n  CPortal,\n  CSemiCircleProgress,\n  CSimpleGrid,\n  CSkeleton,\n  CSpace,\n  CSplitter,\n  CSplitterPane,\n  CStack,\n  CText,\n  CTransition,\n  CTypography,\n  CVisuallyHidden,\n  UnstyledButton,\n} from './components'\nimport { CckConfigProvider, CBox } from './core'\n\nconst INSTALLED_KEY = Symbol('INSTALLED_KEY')\n\nconst components = [\n  CckConfigProvider,\n  CBox,\n  CActionIcon,\n  CActionIconGroup,\n  CActionIconGroupSection,\n  CAlert,\n  CAnchor,\n  CAspectRatio,\n  CButton,\n  CButtonGroup,\n  CButtonGroupSection,\n  CCenter,\n  CCloseButton,\n  CCol,\n  CContainer,\n  CCopyButton,\n  CDivider,\n  CEmptyState,\n  CEmptyStateActions,\n  CEmptyStateDescription,\n  CEmptyStateIndicator,\n  CEmptyStateTitle,\n  CFileButton,\n  CFlex,\n  CFocusTrap,\n  CGrid,\n  CGroup,\n  CImage,\n  CLoader,\n  CPaper,\n  CPortal,\n  CSemiCircleProgress,\n  CSimpleGrid,\n  CSkeleton,\n  CSpace,\n  CSplitter,\n  CSplitterPane,\n  CStack,\n  CText,\n  CTransition,\n  CTypography,\n  CVisuallyHidden,\n  UnstyledButton,\n]\n\nconst CckUI: Plugin = {\n  install(app: App) {\n    if ((app as any)[INSTALLED_KEY]) {\n      return\n    }\n    ;(app as any)[INSTALLED_KEY] = true\n    components.forEach((c) => {\n      if (c.name) {\n        app.component(c.name, c)\n      }\n    })\n  },\n}\n\nexport default CckUI\nexport { CckUI }\n\nexport * from './components'\nexport * from './core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAM,gBAAgB,OAAO,eAAe;AAE5C,MAAM,aAAa;CACjB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,QAAgB,EACpB,QAAQ,KAAU;CAChB,IAAK,IAAY,gBACf;CAED,IAAa,iBAAiB;CAC/B,WAAW,SAAS,MAAM;EACxB,IAAI,EAAE,MACJ,IAAI,UAAU,EAAE,MAAM,CAAC;CAE3B,CAAC;AACH,EACF"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/index.ts"],"sourcesContent":["import type { App, Plugin } from 'vue'\nimport {\n  CActionIcon,\n  CActionIconGroup,\n  CActionIconGroupSection,\n  CAlert,\n  CAnchor,\n  CAspectRatio,\n  CBreadcrumbs,\n  CButton,\n  CButtonGroup,\n  CButtonGroupSection,\n  CCenter,\n  CCloseButton,\n  CCol,\n  CContainer,\n  CCopyButton,\n  CDivider,\n  CEmptyState,\n  CEmptyStateActions,\n  CEmptyStateDescription,\n  CEmptyStateIndicator,\n  CEmptyStateTitle,\n  CFileButton,\n  CFlex,\n  CFocusTrap,\n  CGrid,\n  CGroup,\n  CImage,\n  CLoader,\n  CPaper,\n  CPortal,\n  CSemiCircleProgress,\n  CSimpleGrid,\n  CSkeleton,\n  CSpace,\n  CSplitter,\n  CSplitterPane,\n  CStack,\n  CText,\n  CTransition,\n  CTypography,\n  CVisuallyHidden,\n  UnstyledButton,\n} from './components'\nimport { CckConfigProvider, CBox } from './core'\n\nconst INSTALLED_KEY = Symbol('INSTALLED_KEY')\n\nconst components = [\n  CckConfigProvider,\n  CBox,\n  CActionIcon,\n  CActionIconGroup,\n  CActionIconGroupSection,\n  CAlert,\n  CAnchor,\n  CAspectRatio,\n  CBreadcrumbs,\n  CButton,\n  CButtonGroup,\n  CButtonGroupSection,\n  CCenter,\n  CCloseButton,\n  CCol,\n  CContainer,\n  CCopyButton,\n  CDivider,\n  CEmptyState,\n  CEmptyStateActions,\n  CEmptyStateDescription,\n  CEmptyStateIndicator,\n  CEmptyStateTitle,\n  CFileButton,\n  CFlex,\n  CFocusTrap,\n  CGrid,\n  CGroup,\n  CImage,\n  CLoader,\n  CPaper,\n  CPortal,\n  CSemiCircleProgress,\n  CSimpleGrid,\n  CSkeleton,\n  CSpace,\n  CSplitter,\n  CSplitterPane,\n  CStack,\n  CText,\n  CTransition,\n  CTypography,\n  CVisuallyHidden,\n  UnstyledButton,\n]\n\nconst CckUI: Plugin = {\n  install(app: App) {\n    if ((app as any)[INSTALLED_KEY]) {\n      return\n    }\n    ;(app as any)[INSTALLED_KEY] = true\n    components.forEach((c) => {\n      if (c.name) {\n        app.component(c.name, c)\n      }\n    })\n  },\n}\n\nexport default CckUI\nexport { CckUI }\n\nexport * from './components'\nexport * from './core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAM,gBAAgB,OAAO,eAAe;AAE5C,MAAM,aAAa;CACjB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,QAAgB,EACpB,QAAQ,KAAU;CAChB,IAAK,IAAY,gBACf;CAED,IAAa,iBAAiB;CAC/B,WAAW,SAAS,MAAM;EACxB,IAAI,EAAE,MACJ,IAAI,UAAU,EAAE,MAAM,CAAC;CAE3B,CAAC;AACH,EACF"}

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

@@ -0,0 +1,25 @@
+import { VNode } from 'vue';
+import { BoxProps, CSpacing, ElementProps, Factory, StylesApiProps } from '../../core';
+export type BreadcrumbsStylesNames = 'root' | 'separator' | 'breadcrumb';
+export type BreadcrumbsCssVariables = {
+    root: '--bc-separator-margin';
+};
+export type SeparatorRenderer = (child: VNode, index: number, length: number) => string | VNode;
+export interface BreadcrumbsProps extends BoxProps, StylesApiProps<BreadcrumbsFactory>, /* @vue-ignore */ ElementProps<'div'> {
+    /**
+     * Separator between children
+     * @default '/'
+     */
+    separator?: string | VNode | SeparatorRenderer;
+    /**
+     * Controls spacing between separator and breadcrumb
+     * @default 'xs'
+     */
+    separatorMargin?: CSpacing;
+}
+export type BreadcrumbsFactory = Factory<{
+    props: BreadcrumbsProps;
+    ref: HTMLDivElement;
+    stylesNames: BreadcrumbsStylesNames;
+    vars: BreadcrumbsCssVariables;
+}>;

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

@@ -0,0 +1,6 @@
+export declare const varsResolver: import("../..").VarsResolver<{
+    props: import("./breadcrumbs.types").BreadcrumbsProps;
+    ref: HTMLDivElement;
+    stylesNames: import("./breadcrumbs.types").BreadcrumbsStylesNames;
+    vars: import("./breadcrumbs.types").BreadcrumbsCssVariables;
+}>;

package/lib/components/breadcrumbs/filter-falsy-children/filter-falsy-children.d.ts

@@ -0,0 +1,2 @@
+import { VNode } from 'vue';
+export declare function filterFalsyChildren(children: unknown): VNode[];

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

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

package/lib/components/index.d.ts

@@ -2,6 +2,7 @@ export * from './action-icon';
 export * from './alert';
 export * from './anchor';
 export * from './aspect-ratio';
+export * from './breadcrumbs';
 export * from './button';
 export * from './center';
 export * from './close-button';

package/package.json

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

package/styles/breadcrumbs.css

@@ -0,0 +1,27 @@
+.m_bd72d3bf {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.m_c7302920 {
+  line-height: 1;
+  word-spacing: nowrap;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.m_ceadd228 {
+  margin-inline: var(--bc-separator-margin, var(--c-spacing-xs));
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:where([data-c-color-scheme='light']) .m_ceadd228 {
+    color: var(--c-color-gray-7);
+}
+
+:where([data-c-color-scheme='dark']) .m_ceadd228 {
+    color: var(--c-color-dark-2);
+}

package/styles/breadcrumbs.layer.css

@@ -0,0 +1,28 @@
+@layer cck {.m_bd72d3bf {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.m_c7302920 {
+  line-height: 1;
+  word-spacing: nowrap;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.m_ceadd228 {
+  margin-inline: var(--bc-separator-margin, var(--c-spacing-xs));
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:where([data-c-color-scheme='light']) .m_ceadd228 {
+    color: var(--c-color-gray-7);
+}
+
+:where([data-c-color-scheme='dark']) .m_ceadd228 {
+    color: var(--c-color-dark-2);
+}
+}

package/styles.css

@@ -1278,6 +1278,34 @@ fieldset:disabled .c-active:active {
     object-fit: cover;
   }
 
+.m_bd72d3bf {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.m_c7302920 {
+  line-height: 1;
+  word-spacing: nowrap;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.m_ceadd228 {
+  margin-inline: var(--bc-separator-margin, var(--c-spacing-xs));
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:where([data-c-color-scheme='light']) .m_ceadd228 {
+    color: var(--c-color-gray-7);
+}
+
+:where([data-c-color-scheme='dark']) .m_ceadd228 {
+    color: var(--c-color-dark-2);
+}
+
 .m_e0e8435a {
   display: flex;
   align-items: center;

package/styles.layer.css

@@ -1278,6 +1278,34 @@ fieldset:disabled .c-active:active {
     object-fit: cover;
   }
 
+.m_bd72d3bf {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.m_c7302920 {
+  line-height: 1;
+  word-spacing: nowrap;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.m_ceadd228 {
+  margin-inline: var(--bc-separator-margin, var(--c-spacing-xs));
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:where([data-c-color-scheme='light']) .m_ceadd228 {
+    color: var(--c-color-gray-7);
+}
+
+:where([data-c-color-scheme='dark']) .m_ceadd228 {
+    color: var(--c-color-dark-2);
+}
+
 .m_e0e8435a {
   display: flex;
   align-items: center;