@cck-ui/core 0.2.0

package/esm/core/box/box.mjs

@@ -0,0 +1,414 @@
+"use client";
+import { isNumberLike } from "../utils/is-number-like/is-number-like.mjs";
+import { THEME_KEY } from "../config-provider/config-provider.types.mjs";
+import export_helper_default from "../../_virtual/_/plugin-vue/export-helper.mjs";
+import { DEFAULT_THEME } from "../config-provider/default-theme.mjs";
+import { extractStyleProps } from "./style-props/extract-style-props/extract-style-props.mjs";
+import { parseStyleProps } from "./style-props/parse-style-props/parse-style-props.mjs";
+import { STYLE_PROPS_DATA } from "./style-props/style-props-data.mjs";
+import { getBoxStyle } from "./get-box-style/get-box-style.mjs";
+import { responsiveStyleManager } from "../responsive-style-manager/responsive-style-manager.mjs";
+import { hashStyleProps } from "../responsive-style-manager/hash-styles.mjs";
+import { stylesToString } from "../responsive-style-manager/styles-to-string/styles-to-string.mjs";
+import { getBoxMod } from "./get-box-mod/get-box-mod.mjs";
+import { computed, createBlock, defineComponent, guardReactiveProps, inject, normalizeProps, onBeforeUnmount, openBlock, ref, renderSlot, resolveDynamicComponent, watch, withCtx } from "vue";
+import cx from "clsx";
+//#region packages/@cck-ui/core/src/core/box/box.vue
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "CBox",
+	__name: "box",
+	props: {
+		size: {
+			type: [String, Number],
+			required: false
+		},
+		variant: {
+			type: String,
+			required: false
+		},
+		className: {
+			type: String,
+			required: false
+		},
+		style: {
+			type: [
+				Object,
+				Function,
+				Array
+			],
+			required: false,
+			skipCheck: true
+		},
+		__vars: {
+			type: null,
+			required: false
+		},
+		__size: {
+			type: String,
+			required: false
+		},
+		hiddenFrom: {
+			type: null,
+			required: false
+		},
+		visibleFrom: {
+			type: null,
+			required: false
+		},
+		lightHidden: {
+			type: Boolean,
+			required: false
+		},
+		darkHidden: {
+			type: Boolean,
+			required: false
+		},
+		mod: {
+			type: [
+				Object,
+				String,
+				Array
+			],
+			required: false
+		},
+		m: {
+			type: null,
+			required: false
+		},
+		my: {
+			type: null,
+			required: false
+		},
+		mx: {
+			type: null,
+			required: false
+		},
+		mt: {
+			type: null,
+			required: false
+		},
+		mb: {
+			type: null,
+			required: false
+		},
+		ms: {
+			type: null,
+			required: false
+		},
+		me: {
+			type: null,
+			required: false
+		},
+		mis: {
+			type: null,
+			required: false
+		},
+		mie: {
+			type: null,
+			required: false
+		},
+		ml: {
+			type: null,
+			required: false
+		},
+		mr: {
+			type: null,
+			required: false
+		},
+		p: {
+			type: null,
+			required: false
+		},
+		py: {
+			type: null,
+			required: false
+		},
+		px: {
+			type: null,
+			required: false
+		},
+		pt: {
+			type: null,
+			required: false
+		},
+		pb: {
+			type: null,
+			required: false
+		},
+		ps: {
+			type: null,
+			required: false
+		},
+		pe: {
+			type: null,
+			required: false
+		},
+		pis: {
+			type: null,
+			required: false
+		},
+		pie: {
+			type: null,
+			required: false
+		},
+		pl: {
+			type: null,
+			required: false
+		},
+		pr: {
+			type: null,
+			required: false
+		},
+		bd: {
+			type: null,
+			required: false
+		},
+		bdrs: {
+			type: null,
+			required: false
+		},
+		bg: {
+			type: null,
+			required: false
+		},
+		c: {
+			type: null,
+			required: false
+		},
+		opacity: {
+			type: [
+				String,
+				Object,
+				Number
+			],
+			required: false
+		},
+		ff: {
+			type: [String, Object],
+			required: false
+		},
+		fz: {
+			type: null,
+			required: false
+		},
+		fw: {
+			type: null,
+			required: false
+		},
+		lts: {
+			type: null,
+			required: false
+		},
+		ta: {
+			type: [String, Object],
+			required: false
+		},
+		lh: {
+			type: null,
+			required: false
+		},
+		fs: {
+			type: null,
+			required: false
+		},
+		tt: {
+			type: [String, Object],
+			required: false
+		},
+		td: {
+			type: null,
+			required: false
+		},
+		w: {
+			type: null,
+			required: false
+		},
+		miw: {
+			type: null,
+			required: false
+		},
+		maw: {
+			type: null,
+			required: false
+		},
+		h: {
+			type: null,
+			required: false
+		},
+		mih: {
+			type: null,
+			required: false
+		},
+		mah: {
+			type: null,
+			required: false
+		},
+		bgsz: {
+			type: null,
+			required: false
+		},
+		bgp: {
+			type: null,
+			required: false
+		},
+		bgr: {
+			type: null,
+			required: false
+		},
+		bga: {
+			type: null,
+			required: false
+		},
+		pos: {
+			type: [String, Object],
+			required: false
+		},
+		top: {
+			type: null,
+			required: false
+		},
+		left: {
+			type: null,
+			required: false
+		},
+		bottom: {
+			type: null,
+			required: false
+		},
+		right: {
+			type: null,
+			required: false
+		},
+		inset: {
+			type: null,
+			required: false
+		},
+		display: {
+			type: null,
+			required: false
+		},
+		flex: {
+			type: null,
+			required: false
+		},
+		tag: {
+			type: null,
+			required: false,
+			default: "div"
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		__expose();
+		const props = __props;
+		const { __size, __vars, className, darkHidden, hiddenFrom, lightHidden, mod, size, style, tag, variant, visibleFrom, ...others } = props;
+		const theme = inject(THEME_KEY, DEFAULT_THEME);
+		const { styleProps, rest } = extractStyleProps(others);
+		const parsedStyleProps = computed(() => parseStyleProps({
+			styleProps,
+			theme,
+			data: STYLE_PROPS_DATA
+		}));
+		const hasResponsive = computed(() => parsedStyleProps.value.hasResponsiveStyles);
+		const responsiveClassName = ref(null);
+		let currentStyleKey = null;
+		function buildMediaQueriesFromObject(mediaObj) {
+			if (!mediaObj) return [];
+			return Object.entries(mediaObj).map(([query, styles]) => ({
+				query,
+				styles
+			}));
+		}
+		function updateResponsiveStyles() {
+			if (currentStyleKey) {
+				responsiveStyleManager.unregister(currentStyleKey);
+				currentStyleKey = null;
+				responsiveClassName.value = null;
+			}
+			if (!hasResponsive) return;
+			const mediaArray = buildMediaQueriesFromObject(parsedStyleProps.value.media);
+			const className = hashStyleProps(parsedStyleProps.value.styles, mediaArray);
+			const cssText = stylesToString({
+				selector: className,
+				styles: parsedStyleProps.value.styles,
+				media: mediaArray
+			});
+			currentStyleKey = responsiveStyleManager.register(cssText, className);
+			responsiveClassName.value = className;
+		}
+		updateResponsiveStyles();
+		watch(() => [parsedStyleProps.value.styles, parsedStyleProps.value.media], () => {
+			updateResponsiveStyles();
+		}, {
+			deep: true,
+			immediate: false
+		});
+		onBeforeUnmount(() => {
+			if (currentStyleKey) responsiveStyleManager.unregister(currentStyleKey);
+		});
+		const __returned__ = {
+			props,
+			__size,
+			__vars,
+			className,
+			darkHidden,
+			hiddenFrom,
+			lightHidden,
+			mod,
+			size,
+			style,
+			tag,
+			variant,
+			visibleFrom,
+			others,
+			theme,
+			styleProps,
+			rest,
+			parsedStyleProps,
+			hasResponsive,
+			responsiveClassName,
+			get currentStyleKey() {
+				return currentStyleKey;
+			},
+			set currentStyleKey(v) {
+				currentStyleKey = v;
+			},
+			buildMediaQueriesFromObject,
+			updateResponsiveStyles,
+			_props: {
+				style: getBoxStyle({
+					theme,
+					style,
+					vars: __vars,
+					styleProps: parsedStyleProps.value.inlineStyles
+				}),
+				className: cx(className, responsiveClassName.value, {
+					"c-light-hidden": lightHidden,
+					"c-dark-hidden": darkHidden,
+					[`c-hidden-from-${hiddenFrom}`]: hiddenFrom,
+					[`c-visible-from-${visibleFrom}`]: visibleFrom
+				}),
+				"data-variant": variant,
+				"data-size": isNumberLike(size) ? void 0 : size || void 0,
+				size: __size,
+				...getBoxMod(mod),
+				...rest
+			}
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createBlock(resolveDynamicComponent($setup.tag), normalizeProps(guardReactiveProps($setup._props)), {
+		default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+		_: 3
+	}, 16);
+}
+var box_default = /*#__PURE__*/ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "D:\\work\\jackatlas\\cck-ui\\packages\\@cck-ui\\core\\src\\core\\box\\box.vue"]]);
+//#endregion
+export { box_default as default };
+
+//# sourceMappingURL=box.mjs.map

package/esm/core/box/box.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.mjs","names":[],"sources":["../../../src/core/box/box.vue","../../../src/core/box/box.vue"],"sourcesContent":["<template>\n  <component :is=\"tag\" v-bind=\"_props\">\n    <slot />\n  </component>\n</template>\n\n<script setup lang=\"ts\">\nimport cx from 'clsx'\nimport { computed, inject, onBeforeUnmount, ref, watch } from 'vue'\nimport { isNumberLike } from '../utils'\nimport type { BoxComponentProps } from './box.types'\nimport { DEFAULT_THEME, THEME_KEY } from '../config-provider'\nimport { extractStyleProps, parseStyleProps, STYLE_PROPS_DATA } from './style-props'\nimport { getBoxStyle } from './get-box-style/get-box-style'\nimport {\n  hashStyleProps,\n  responsiveStyleManager,\n  StylesMediaQuery,\n  stylesToString,\n} from '../responsive-style-manager'\nimport { getBoxMod } from './get-box-mod/get-box-mod'\n\ndefineOptions({\n  name: 'CBox',\n})\n\nconst props = withDefaults(defineProps<BoxComponentProps & { className: string; tag?: any }>(), {\n  tag: 'div',\n})\n\nconst {\n  __size,\n  __vars,\n  className,\n  darkHidden,\n  hiddenFrom,\n  lightHidden,\n  mod,\n  size,\n  style,\n  tag,\n  variant,\n  visibleFrom,\n  ...others\n} = props\n\nconst theme = inject(THEME_KEY, DEFAULT_THEME)\nconst { styleProps, rest } = extractStyleProps(others)\nconst parsedStyleProps = computed(() =>\n  parseStyleProps({\n    styleProps,\n    theme,\n    data: STYLE_PROPS_DATA,\n  })\n)\n\nconst hasResponsive = computed(() => parsedStyleProps.value.hasResponsiveStyles)\nconst responsiveClassName = ref<string | null>(null)\nlet currentStyleKey: string | null = null\n\nfunction buildMediaQueriesFromObject(\n  mediaObj: Record<string, any> | undefined\n): StylesMediaQuery[] {\n  if (!mediaObj) {\n    return []\n  }\n  return Object.entries(mediaObj).map(([query, styles]) => ({\n    query,\n    styles,\n  }))\n}\n\nfunction updateResponsiveStyles() {\n  if (currentStyleKey) {\n    responsiveStyleManager.unregister(currentStyleKey)\n    currentStyleKey = null\n    responsiveClassName.value = null\n  }\n\n  if (!hasResponsive) {\n    return\n  }\n\n  const mediaArray = buildMediaQueriesFromObject(parsedStyleProps.value.media)\n  const hash = hashStyleProps(parsedStyleProps.value.styles, mediaArray)\n  const className = hash\n\n  const cssText = stylesToString({\n    selector: className,\n    styles: parsedStyleProps.value.styles,\n    media: mediaArray,\n  })\n\n  const registeredKey = responsiveStyleManager.register(cssText, className)\n  currentStyleKey = registeredKey\n  responsiveClassName.value = className\n}\n\nupdateResponsiveStyles()\n\nwatch(\n  () => [parsedStyleProps.value.styles, parsedStyleProps.value.media],\n  () => {\n    updateResponsiveStyles()\n  },\n  { deep: true, immediate: false }\n)\n\nonBeforeUnmount(() => {\n  if (currentStyleKey) {\n    responsiveStyleManager.unregister(currentStyleKey)\n  }\n})\n\nconst _props = {\n  style: getBoxStyle({\n    theme,\n    style,\n    vars: __vars,\n    styleProps: parsedStyleProps.value.inlineStyles,\n  }),\n  className: cx(className, responsiveClassName.value, {\n    'c-light-hidden': lightHidden,\n    'c-dark-hidden': darkHidden,\n    [`c-hidden-from-${hiddenFrom}`]: hiddenFrom,\n    [`c-visible-from-${visibleFrom}`]: visibleFrom,\n  }),\n  'data-variant': variant,\n  'data-size': isNumberLike(size) ? undefined : size || undefined,\n  size: __size,\n  ...getBoxMod(mod),\n  ...rest,\n}\n</script>\n",null],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BA,MAAM,QAAQ;EAId,MAAM,EACJ,QACA,QACA,WACA,YACA,YACA,aACA,KACA,MACA,OACA,KACA,SACA,aACA,GAAG,WACD;EAEJ,MAAM,QAAQ,OAAO,WAAW,aAAa;EAC7C,MAAM,EAAE,YAAY,SAAS,kBAAkB,MAAM;EACrD,MAAM,mBAAmB,eACvB,gBAAgB;GACd;GACA;GACA,MAAM;EACR,CAAC,CACH;EAEA,MAAM,gBAAgB,eAAe,iBAAiB,MAAM,mBAAmB;EAC/E,MAAM,sBAAsB,IAAmB,IAAI;EACnD,IAAI,kBAAiC;EAErC,SAAS,4BACP,UACoB;GACpB,IAAI,CAAC,UACH,OAAO,CAAC;GAEV,OAAO,OAAO,QAAQ,QAAQ,CAAA,CAAE,KAAK,CAAC,OAAO,aAAa;IACxD;IACA;GACF,EAAE;EACJ;EAEA,SAAS,yBAAyB;GAChC,IAAI,iBAAiB;IACnB,uBAAuB,WAAW,eAAe;IACjD,kBAAkB;IAClB,oBAAoB,QAAQ;GAC9B;GAEA,IAAI,CAAC,eACH;GAGF,MAAM,aAAa,4BAA4B,iBAAiB,MAAM,KAAK;GAE3E,MAAM,YADO,eAAe,iBAAiB,MAAM,QAAQ,UACzC;GAElB,MAAM,UAAU,eAAe;IAC7B,UAAU;IACV,QAAQ,iBAAiB,MAAM;IAC/B,OAAO;GACT,CAAC;GAGD,kBADsB,uBAAuB,SAAS,SAAS,SAC7C;GAClB,oBAAoB,QAAQ;EAC9B;EAEA,uBAAuB;EAEvB,YACQ,CAAC,iBAAiB,MAAM,QAAQ,iBAAiB,MAAM,KAAK,SAC5D;GACJ,uBAAuB;EACzB,GACA;GAAE,MAAM;GAAM,WAAW;EAAM,CACjC;EAEA,sBAAsB;GACpB,IAAI,iBACF,uBAAuB,WAAW,eAAe;EAErD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAGC,OAAO,YAAY;KACjB;KACA;KACA,MAAM;KACN,YAAY,iBAAiB,MAAM;IACrC,CAAC;IACD,WAAW,GAAG,WAAW,oBAAoB,OAAO;KAClD,kBAAkB;KAClB,iBAAiB;MAChB,iBAAiB,eAAe;MAChC,kBAAkB,gBAAgB;IACrC,CAAC;IACD,gBAAgB;IAChB,aAAa,aAAa,IAAI,IAAI,KAAA,IAAY,QAAQ,KAAA;IACtD,MAAM;IACN,GAAG,UAAU,GAAG;IAChB,GAAG;;;;;;;;;;;qBClIH,YAEY,wBAFI,OAAA,GAAG,GAAA,eAAA,mBAAU,OAAA,MAAM,CAAA,GAAA;yBACzB,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/esm/core/box/get-box-mod/get-box-mod.mjs

@@ -0,0 +1,26 @@
+"use client";
+//#region packages/@cck-ui/core/src/core/box/get-box-mod/get-box-mod.ts
+function transformModKey(key) {
+	return `data-${(key.startsWith("data-") ? key.slice(5) : key).replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()}`;
+}
+function getMod(props) {
+	return Object.keys(props).reduce((acc, key) => {
+		const value = props[key];
+		if (value === void 0 || value === "" || value === false || value === null) return acc;
+		acc[transformModKey(key)] = props[key];
+		return acc;
+	}, {});
+}
+function getBoxMod(mod) {
+	if (!mod) return null;
+	if (typeof mod === "string") return { [transformModKey(mod)]: true };
+	if (Array.isArray(mod)) return [...mod].reduce((acc, value) => ({
+		...acc,
+		...getBoxMod(value)
+	}), {});
+	return getMod(mod);
+}
+//#endregion
+export { getBoxMod, getMod };
+
+//# sourceMappingURL=get-box-mod.mjs.map

package/esm/core/box/get-box-mod/get-box-mod.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-box-mod.mjs","names":[],"sources":["../../../../src/core/box/get-box-mod/get-box-mod.ts"],"sourcesContent":["function transformModKey(key: string) {\n  const cleanKey = key.startsWith('data-') ? key.slice(5) : key\n  const kebabKey = cleanKey.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()\n  return `data-${kebabKey}`\n}\n\nexport function getMod(props: Record<string, any>) {\n  return Object.keys(props).reduce<Record<string, any>>((acc, key) => {\n    const value = props[key]\n\n    if (\n      value === undefined ||\n      value === '' ||\n      value === false ||\n      value === null\n    ) {\n      return acc\n    }\n\n    acc[transformModKey(key)] = props[key]\n    return acc\n  }, {})\n}\n\nexport function getBoxMod(mod?: any): Record<string, any> | null {\n  if (!mod) return null\n\n  if (typeof mod === 'string') {\n    return { [transformModKey(mod)]: true }\n  }\n\n  if (Array.isArray(mod)) {\n    return [...mod].reduce<Record<`data-${string}`, any>>(\n      (acc, value) => ({ ...acc, ...getBoxMod(value) }),\n      {}\n    )\n  }\n\n  return getMod(mod)\n}\n"],"mappings":";;AAAA,SAAS,gBAAgB,KAAa;CAGpC,OAAO,SAFU,IAAI,WAAW,OAAO,IAAI,IAAI,MAAM,CAAC,IAAI,IAAA,CAChC,QAAQ,mBAAmB,OAAO,CAAC,CAAC,YACxC;AACxB;AAEA,SAAgB,OAAO,OAA4B;CACjD,OAAO,OAAO,KAAK,KAAK,CAAC,CAAC,QAA6B,KAAK,QAAQ;EAClE,MAAM,QAAQ,MAAM;EAEpB,IACE,UAAU,KAAA,KACV,UAAU,MACV,UAAU,SACV,UAAU,MAEV,OAAO;EAGT,IAAI,gBAAgB,GAAG,KAAK,MAAM;EAClC,OAAO;CACT,GAAG,CAAC,CAAC;AACP;AAEA,SAAgB,UAAU,KAAuC;CAC/D,IAAI,CAAC,KAAK,OAAO;CAEjB,IAAI,OAAO,QAAQ,UACjB,OAAO,GAAG,gBAAgB,GAAG,IAAI,KAAK;CAGxC,IAAI,MAAM,QAAQ,GAAG,GACnB,OAAO,CAAC,GAAG,GAAG,CAAC,CAAC,QACb,KAAK,WAAW;EAAE,GAAG;EAAK,GAAG,UAAU,KAAK;CAAE,IAC/C,CAAC,CACH;CAGF,OAAO,OAAO,GAAG;AACnB"}

package/esm/core/box/get-box-style/get-box-style.mjs

@@ -0,0 +1,24 @@
+"use client";
+//#region packages/@cck-ui/core/src/core/box/get-box-style/get-box-style.ts
+function mergeStyles(styles, theme) {
+	if (Array.isArray(styles)) return [...styles].reduce((acc, item) => ({
+		...acc,
+		...mergeStyles(item, theme)
+	}), {});
+	if (typeof styles === "function") return styles(theme);
+	if (styles == null) return {};
+	return styles;
+}
+function getBoxStyle({ style, styleProps, theme, vars }) {
+	const _style = mergeStyles(style, theme);
+	const _vars = mergeStyles(vars, theme);
+	return {
+		..._style,
+		..._vars,
+		...styleProps
+	};
+}
+//#endregion
+export { getBoxStyle };
+
+//# sourceMappingURL=get-box-style.mjs.map

package/esm/core/box/get-box-style/get-box-style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-box-style.mjs","names":[],"sources":["../../../../src/core/box/get-box-style/get-box-style.ts"],"sourcesContent":["import { Properties } from 'csstype'\nimport { CStyleProp, CssVarsProp } from '../box.types'\nimport { CTheme } from '../../config-provider'\n\ninterface GetBoxStyleOptions {\n  theme: CTheme\n  styleProps: Properties\n  style?: CStyleProp\n  vars?: CssVarsProp\n}\n\nfunction mergeStyles(\n  styles: CStyleProp | CssVarsProp | undefined,\n  theme: CTheme\n): Properties {\n  if (Array.isArray(styles)) {\n    return [...styles].reduce<Record<string, any>>(\n      (acc, item) => ({ ...acc, ...mergeStyles(item, theme) }),\n      {}\n    )\n  }\n\n  if (typeof styles === 'function') {\n    return styles(theme)\n  }\n\n  if (styles == null) {\n    return {}\n  }\n\n  return styles\n}\n\nexport function getBoxStyle({\n  style,\n  styleProps,\n  theme,\n  vars\n}: GetBoxStyleOptions): Properties {\n  const _style = mergeStyles(style, theme)\n  const _vars = mergeStyles(vars, theme)\n  return { ..._style, ..._vars, ...styleProps }\n}\n"],"mappings":";;AAWA,SAAS,YACP,QACA,OACY;CACZ,IAAI,MAAM,QAAQ,MAAM,GACtB,OAAO,CAAC,GAAG,MAAM,CAAC,CAAC,QAChB,KAAK,UAAU;EAAE,GAAG;EAAK,GAAG,YAAY,MAAM,KAAK;CAAE,IACtD,CAAC,CACH;CAGF,IAAI,OAAO,WAAW,YACpB,OAAO,OAAO,KAAK;CAGrB,IAAI,UAAU,MACZ,OAAO,CAAC;CAGV,OAAO;AACT;AAEA,SAAgB,YAAY,EAC1B,OACA,YACA,OACA,QACiC;CACjC,MAAM,SAAS,YAAY,OAAO,KAAK;CACvC,MAAM,QAAQ,YAAY,MAAM,KAAK;CACrC,OAAO;EAAE,GAAG;EAAQ,GAAG;EAAO,GAAG;CAAW;AAC9C"}

package/esm/core/box/index.mjs

@@ -0,0 +1,13 @@
+"use client";
+import { withInstall } from "../utils/vue/install.mjs";
+import { extractStyleProps } from "./style-props/extract-style-props/extract-style-props.mjs";
+import { parseStyleProps } from "./style-props/parse-style-props/parse-style-props.mjs";
+import { STYLE_PROPS_DATA } from "./style-props/style-props-data.mjs";
+import box_default from "./box.mjs";
+import { useRandomClassName } from "./use-random-classname/use-random-classname.mjs";
+//#region packages/@cck-ui/core/src/core/box/index.ts
+const CBox = withInstall(box_default);
+//#endregion
+export { CBox, CBox as default, STYLE_PROPS_DATA, extractStyleProps, parseStyleProps, useRandomClassName };
+
+//# sourceMappingURL=index.mjs.map

package/esm/core/box/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["Box"],"sources":["../../../src/core/box/index.ts"],"sourcesContent":["import { SFCWithInstall, withInstall } from '../utils'\nimport Box from './box.vue'\n\nexport * from './style-props'\nexport * from './box.types'\nexport { useRandomClassName } from './use-random-classname/use-random-classname'\n\nexport const CBox: SFCWithInstall<typeof Box> = withInstall(Box)\nexport default CBox\n"],"mappings":";;;;;;;;AAOA,MAAa,OAAmC,YAAYA,WAAG"}

package/esm/core/box/style-props/extract-style-props/extract-style-props.mjs

@@ -0,0 +1,74 @@
+"use client";
+import { filterProps } from "../../../utils/filter-props/filter-props.mjs";
+//#region packages/@cck-ui/core/src/core/box/style-props/extract-style-props/extract-style-props.ts
+function extractStyleProps(others) {
+	const { m, mx, my, mt, mb, ml, mr, me, ms, mis, mie, p, px, py, pt, pb, pl, pr, pe, ps, pis, pie, bd, bdrs, bg, c, opacity, ff, fz, fw, lts, ta, lh, fs, tt, td, w, miw, maw, h, mih, mah, bgsz, bgp, bgr, bga, pos, top, left, bottom, right, inset, display, flex, hiddenFrom, visibleFrom, lightHidden, darkHidden, sx, ...rest } = others;
+	return {
+		styleProps: filterProps({
+			m,
+			mx,
+			my,
+			mt,
+			mb,
+			ml,
+			mr,
+			me,
+			ms,
+			mis,
+			mie,
+			p,
+			px,
+			py,
+			pt,
+			pb,
+			pl,
+			pr,
+			pis,
+			pie,
+			pe,
+			ps,
+			bd,
+			bg,
+			c,
+			opacity,
+			ff,
+			fz,
+			fw,
+			lts,
+			ta,
+			lh,
+			fs,
+			tt,
+			td,
+			w,
+			miw,
+			maw,
+			h,
+			mih,
+			mah,
+			bgsz,
+			bgp,
+			bgr,
+			bga,
+			pos,
+			top,
+			left,
+			bottom,
+			right,
+			inset,
+			display,
+			flex,
+			bdrs,
+			hiddenFrom,
+			visibleFrom,
+			lightHidden,
+			darkHidden,
+			sx
+		}),
+		rest
+	};
+}
+//#endregion
+export { extractStyleProps };
+
+//# sourceMappingURL=extract-style-props.mjs.map

package/esm/core/box/style-props/extract-style-props/extract-style-props.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"extract-style-props.mjs","names":[],"sources":["../../../../../src/core/box/style-props/extract-style-props/extract-style-props.ts"],"sourcesContent":["import { filterProps } from '../../../utils'\nimport { CStyleProps } from '../style-props.types'\n\nexport function extractStyleProps<T extends Record<string, any>>(\n  others: CStyleProps & T\n): { styleProps: CStyleProps & { sx?: any }; rest: T } {\n  const {\n    m,\n    mx,\n    my,\n    mt,\n    mb,\n    ml,\n    mr,\n    me,\n    ms,\n    mis,\n    mie,\n    p,\n    px,\n    py,\n    pt,\n    pb,\n    pl,\n    pr,\n    pe,\n    ps,\n    pis,\n    pie,\n    bd,\n    bdrs,\n    bg,\n    c,\n    opacity,\n    ff,\n    fz,\n    fw,\n    lts,\n    ta,\n    lh,\n    fs,\n    tt,\n    td,\n    w,\n    miw,\n    maw,\n    h,\n    mih,\n    mah,\n    bgsz,\n    bgp,\n    bgr,\n    bga,\n    pos,\n    top,\n    left,\n    bottom,\n    right,\n    inset,\n    display,\n    flex,\n    hiddenFrom,\n    visibleFrom,\n    lightHidden,\n    darkHidden,\n    sx,\n    ...rest\n  } = others\n\n  const styleProps = filterProps({\n    m,\n    mx,\n    my,\n    mt,\n    mb,\n    ml,\n    mr,\n    me,\n    ms,\n    mis,\n    mie,\n    p,\n    px,\n    py,\n    pt,\n    pb,\n    pl,\n    pr,\n    pis,\n    pie,\n    pe,\n    ps,\n    bd,\n    bg,\n    c,\n    opacity,\n    ff,\n    fz,\n    fw,\n    lts,\n    ta,\n    lh,\n    fs,\n    tt,\n    td,\n    w,\n    miw,\n    maw,\n    h,\n    mih,\n    mah,\n    bgsz,\n    bgp,\n    bgr,\n    bga,\n    pos,\n    top,\n    left,\n    bottom,\n    right,\n    inset,\n    display,\n    flex,\n    bdrs,\n    hiddenFrom,\n    visibleFrom,\n    lightHidden,\n    darkHidden,\n    sx\n  })\n\n  return { styleProps, rest: rest as unknown as T }\n}\n"],"mappings":";;;AAGA,SAAgB,kBACd,QACqD;CACrD,MAAM,EACJ,GACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,KACA,KACA,GACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,KACA,KACA,IACA,MACA,IACA,GACA,SACA,IACA,IACA,IACA,KACA,IACA,IACA,IACA,IACA,IACA,GACA,KACA,KACA,GACA,KACA,KACA,MACA,KACA,KACA,KACA,KACA,KACA,MACA,QACA,OACA,OACA,SACA,MACA,YACA,aACA,aACA,YACA,IACA,GAAG,SACD;CAgEJ,OAAO;EAAE,YA9DU,YAAY;GAC7B;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAEkB;EAAS;CAAqB;AAClD"}

package/esm/core/box/style-props/parse-style-props/parse-style-props.mjs

@@ -0,0 +1,62 @@
+"use client";
+import { keys } from "../../../utils/keys/keys.mjs";
+import { sortMediaQueries } from "./sort-media-queries.mjs";
+import { resolvers } from "../resolvers/index.mjs";
+//#region packages/@cck-ui/core/src/core/box/style-props/parse-style-props/parse-style-props.ts
+function hasResponsiveStyles(styleProp) {
+	if (typeof styleProp !== "object" || styleProp === null) return false;
+	const breakpoints = Object.keys(styleProp);
+	if (breakpoints.length === 1 && breakpoints[0] === "base") return false;
+	return true;
+}
+function getBaseValue(value) {
+	if (typeof value === "object" && value !== null) {
+		if ("base" in value) return value.base;
+		return;
+	}
+	return value;
+}
+function getBreakpointKeys(value) {
+	if (typeof value === "object" && value !== null) return keys(value).filter((key) => key !== "base");
+	return [];
+}
+function getBreakpointValue(value, breakpoint) {
+	if (typeof value === "object" && value !== null && breakpoint in value) return value[breakpoint];
+	return value;
+}
+function parseStyleProps({ data, styleProps, theme }) {
+	return sortMediaQueries(keys(styleProps).reduce((acc, styleProp) => {
+		if (styleProp === "hiddenFrom" || styleProp === "visibleFrom" || styleProp === "sx") return acc;
+		const propertyData = data[styleProp];
+		const properties = Array.isArray(propertyData.property) ? propertyData.property : [propertyData.property];
+		const baseValue = getBaseValue(styleProps[styleProp]);
+		if (!hasResponsiveStyles(styleProps[styleProp])) {
+			properties.forEach((property) => {
+				acc.inlineStyles[property] = resolvers[propertyData.type](baseValue, theme);
+			});
+			return acc;
+		}
+		acc.hasResponsiveStyles = true;
+		const breakpoints = getBreakpointKeys(styleProps[styleProp]);
+		properties.forEach((property) => {
+			if (baseValue !== null) acc.styles[property] = resolvers[propertyData.type](baseValue, theme);
+			breakpoints.forEach((breakpoint) => {
+				const bp = `(min-width: ${theme.breakpoints[breakpoint]})`;
+				acc.media[bp] = {
+					...acc.media[bp],
+					[property]: resolvers[propertyData.type](getBreakpointValue(styleProps[styleProp], breakpoint), theme)
+				};
+			});
+		});
+		return acc;
+	}, {
+		hasResponsiveStyles: false,
+		styles: {},
+		inlineStyles: {},
+		media: {}
+	}));
+}
+//#endregion
+export { parseStyleProps };
+
+//# sourceMappingURL=parse-style-props.mjs.map

package/esm/core/box/style-props/parse-style-props/parse-style-props.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"parse-style-props.mjs","names":[],"sources":["../../../../../src/core/box/style-props/parse-style-props/parse-style-props.ts"],"sourcesContent":["import { Properties } from 'csstype'\nimport { CTheme } from '../../../config-provider'\nimport { keys } from '../../../utils'\nimport { SystemPropData } from '../style-props-data'\nimport { StyleProp } from '../style-props.types'\nimport { SortMediaQueriesResult, sortMediaQueries } from './sort-media-queries'\nimport { resolvers } from '../resolvers'\n\nfunction hasResponsiveStyles(styleProp: StyleProp<unknown>) {\n  if (typeof styleProp !== 'object' || styleProp === null) return false\n\n  const breakpoints = Object.keys(styleProp)\n\n  if (breakpoints.length === 1 && breakpoints[0] === 'base') return false\n\n  return true\n}\n\nfunction getBaseValue(value: StyleProp<unknown>) {\n  if (typeof value === 'object' && value !== null) {\n    if ('base' in value) return value.base\n\n    return undefined\n  }\n\n  return value\n}\n\nfunction getBreakpointKeys(value: StyleProp<unknown>) {\n  if (typeof value === 'object' && value !== null) {\n    return keys(value).filter((key) => key !== 'base')\n  }\n\n  return []\n}\n\nfunction getBreakpointValue(value: StyleProp<unknown>, breakpoint: string) {\n  if (typeof value === 'object' && value !== null && breakpoint in value) {\n    return value[breakpoint as keyof typeof value]\n  }\n\n  return value\n}\n\nexport interface ParseStylePropsOptions {\n  data: Record<string, SystemPropData>\n  styleProps: Record<string, StyleProp<any>>\n  theme: CTheme\n}\n\nexport interface ParseStylePropsResult {\n  hasResponsiveStyles: boolean\n  inlineStyles: Properties\n  styles: Properties\n  media: Record<string, Properties>\n}\n\nexport function parseStyleProps({\n  data,\n  styleProps,\n  theme\n}: ParseStylePropsOptions): SortMediaQueriesResult {\n  return sortMediaQueries(\n    keys(styleProps).reduce<{\n      hasResponsiveStyles: boolean\n      inlineStyles: Record<string, unknown>\n      styles: Record<string, unknown>\n      media: Record<string, Record<string, unknown>>\n    }>(\n      (acc, styleProp) => {\n        if (\n          (styleProp as string) === 'hiddenFrom' ||\n          (styleProp as string) === 'visibleFrom' ||\n          (styleProp as string) === 'sx'\n        ) {\n          return acc\n        }\n\n        const propertyData = data[styleProp]\n        const properties = Array.isArray(propertyData.property)\n          ? propertyData.property\n          : [propertyData.property]\n        const baseValue = getBaseValue(styleProps[styleProp])\n\n        if (!hasResponsiveStyles(styleProps[styleProp])) {\n          properties.forEach((property) => {\n            acc.inlineStyles[property] = resolvers[propertyData.type](\n              baseValue,\n              theme\n            )\n          })\n\n          return acc\n        }\n\n        acc.hasResponsiveStyles = true\n\n        const breakpoints = getBreakpointKeys(styleProps[styleProp])\n\n        properties.forEach((property) => {\n          if (baseValue !== null) {\n            acc.styles[property] = resolvers[propertyData.type](\n              baseValue,\n              theme\n            )\n          }\n\n          breakpoints.forEach((breakpoint) => {\n            const bp = `(min-width: ${theme.breakpoints[breakpoint]})`\n            acc.media[bp] = {\n              ...acc.media[bp],\n              [property]: resolvers[propertyData.type](\n                getBreakpointValue(styleProps[styleProp], breakpoint),\n                theme\n              )\n            }\n          })\n        })\n\n        return acc\n      },\n      {\n        hasResponsiveStyles: false,\n        styles: {},\n        inlineStyles: {},\n        media: {}\n      }\n    )\n  )\n}\n"],"mappings":";;;;;AAQA,SAAS,oBAAoB,WAA+B;CAC1D,IAAI,OAAO,cAAc,YAAY,cAAc,MAAM,OAAO;CAEhE,MAAM,cAAc,OAAO,KAAK,SAAS;CAEzC,IAAI,YAAY,WAAW,KAAK,YAAY,OAAO,QAAQ,OAAO;CAElE,OAAO;AACT;AAEA,SAAS,aAAa,OAA2B;CAC/C,IAAI,OAAO,UAAU,YAAY,UAAU,MAAM;EAC/C,IAAI,UAAU,OAAO,OAAO,MAAM;EAElC;CACF;CAEA,OAAO;AACT;AAEA,SAAS,kBAAkB,OAA2B;CACpD,IAAI,OAAO,UAAU,YAAY,UAAU,MACzC,OAAO,KAAK,KAAK,CAAC,CAAC,QAAQ,QAAQ,QAAQ,MAAM;CAGnD,OAAO,CAAC;AACV;AAEA,SAAS,mBAAmB,OAA2B,YAAoB;CACzE,IAAI,OAAO,UAAU,YAAY,UAAU,QAAQ,cAAc,OAC/D,OAAO,MAAM;CAGf,OAAO;AACT;AAeA,SAAgB,gBAAgB,EAC9B,MACA,YACA,SACiD;CACjD,OAAO,iBACL,KAAK,UAAU,CAAC,CAAC,QAMd,KAAK,cAAc;EAClB,IACG,cAAyB,gBACzB,cAAyB,iBACzB,cAAyB,MAE1B,OAAO;EAGT,MAAM,eAAe,KAAK;EAC1B,MAAM,aAAa,MAAM,QAAQ,aAAa,QAAQ,IAClD,aAAa,WACb,CAAC,aAAa,QAAQ;EAC1B,MAAM,YAAY,aAAa,WAAW,UAAU;EAEpD,IAAI,CAAC,oBAAoB,WAAW,UAAU,GAAG;GAC/C,WAAW,SAAS,aAAa;IAC/B,IAAI,aAAa,YAAY,UAAU,aAAa,KAAK,CACvD,WACA,KACF;GACF,CAAC;GAED,OAAO;EACT;EAEA,IAAI,sBAAsB;EAE1B,MAAM,cAAc,kBAAkB,WAAW,UAAU;EAE3D,WAAW,SAAS,aAAa;GAC/B,IAAI,cAAc,MAChB,IAAI,OAAO,YAAY,UAAU,aAAa,KAAK,CACjD,WACA,KACF;GAGF,YAAY,SAAS,eAAe;IAClC,MAAM,KAAK,eAAe,MAAM,YAAY,YAAY;IACxD,IAAI,MAAM,MAAM;KACd,GAAG,IAAI,MAAM;MACZ,WAAW,UAAU,aAAa,KAAK,CACtC,mBAAmB,WAAW,YAAY,UAAU,GACpD,KACF;IACF;GACF,CAAC;EACH,CAAC;EAED,OAAO;CACT,GACA;EACE,qBAAqB;EACrB,QAAQ,CAAC;EACT,cAAc,CAAC;EACf,OAAO,CAAC;CACV,CACF,CACF;AACF"}

package/esm/core/box/style-props/parse-style-props/sort-media-queries.mjs

@@ -0,0 +1,19 @@
+"use client";
+//#region packages/@cck-ui/core/src/core/box/style-props/parse-style-props/sort-media-queries.ts
+function replaceMediaQuery(query) {
+	return query.replace("(min-width: ", "").replace("em)", "");
+}
+function sortMediaQueries({ media, ...props }) {
+	const sortedMedia = Object.keys(media).sort((a, b) => Number(replaceMediaQuery(a)) - Number(replaceMediaQuery(b))).map((query) => ({
+		query,
+		styles: media[query]
+	}));
+	return {
+		...props,
+		media: sortedMedia
+	};
+}
+//#endregion
+export { sortMediaQueries };
+
+//# sourceMappingURL=sort-media-queries.mjs.map

package/esm/core/box/style-props/parse-style-props/sort-media-queries.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort-media-queries.mjs","names":[],"sources":["../../../../../src/core/box/style-props/parse-style-props/sort-media-queries.ts"],"sourcesContent":["import { StylesMediaQuery } from '../../../responsive-style-manager'\nimport { ParseStylePropsResult } from './parse-style-props'\n\nexport interface SortMediaQueriesResult extends Omit<\n  ParseStylePropsResult,\n  'media'\n> {\n  media: StylesMediaQuery[]\n}\n\nfunction replaceMediaQuery(query: string) {\n  return query.replace('(min-width: ', '').replace('em)', '')\n}\n\nexport function sortMediaQueries({\n  media,\n  ...props\n}: ParseStylePropsResult): SortMediaQueriesResult {\n  const breakpoints = Object.keys(media)\n  const sortedMedia = breakpoints\n    .sort((a, b) => Number(replaceMediaQuery(a)) - Number(replaceMediaQuery(b)))\n    .map((query) => ({ query, styles: media[query] }))\n\n  return { ...props, media: sortedMedia }\n}\n"],"mappings":";;AAUA,SAAS,kBAAkB,OAAe;CACxC,OAAO,MAAM,QAAQ,gBAAgB,EAAE,CAAC,CAAC,QAAQ,OAAO,EAAE;AAC5D;AAEA,SAAgB,iBAAiB,EAC/B,OACA,GAAG,SAC6C;CAEhD,MAAM,cADc,OAAO,KAAK,KACF,CAAC,CAC5B,MAAM,GAAG,MAAM,OAAO,kBAAkB,CAAC,CAAC,IAAI,OAAO,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAC3E,KAAK,WAAW;EAAE;EAAO,QAAQ,MAAM;CAAO,EAAE;CAEnD,OAAO;EAAE,GAAG;EAAO,OAAO;CAAY;AACxC"}