@cck-ui/core 0.2.0 → 0.3.3

package/cjs/components/transition/transitions.cjs

@@ -0,0 +1,220 @@
+"use client";
+//#region packages/@cck-ui/core/src/components/transition/transitions.ts
+const popIn = (from) => ({
+	in: {
+		opacity: 1,
+		transform: "scale(1)"
+	},
+	out: {
+		opacity: 0,
+		transform: `scale(0.9) translateY(${from === "bottom" ? 10 : -10}px)`
+	},
+	transitionProperty: "transform, opacity"
+});
+const transitions = {
+	fade: {
+		in: { opacity: 1 },
+		out: { opacity: 0 },
+		transitionProperty: "opacity"
+	},
+	"fade-up": {
+		in: {
+			opacity: 1,
+			transform: "translateY(0)"
+		},
+		out: {
+			opacity: 0,
+			transform: "translateY(30px)"
+		},
+		transitionProperty: "opacity, transform"
+	},
+	"fade-down": {
+		in: {
+			opacity: 1,
+			transform: "translateY(0)"
+		},
+		out: {
+			opacity: 0,
+			transform: "translateY(-30px)"
+		},
+		transitionProperty: "opacity, transform"
+	},
+	"fade-left": {
+		in: {
+			opacity: 1,
+			transform: "translateX(0)"
+		},
+		out: {
+			opacity: 0,
+			transform: "translateX(30px)"
+		},
+		transitionProperty: "opacity, transform"
+	},
+	"fade-right": {
+		in: {
+			opacity: 1,
+			transform: "translateX(0)"
+		},
+		out: {
+			opacity: 0,
+			transform: "translateX(-30px)"
+		},
+		transitionProperty: "opacity, transform"
+	},
+	scale: {
+		in: {
+			opacity: 1,
+			transform: "scale(1)"
+		},
+		out: {
+			opacity: 0,
+			transform: "scale(0)"
+		},
+		common: { transformOrigin: "top" },
+		transitionProperty: "transform, opacity"
+	},
+	"scale-y": {
+		in: {
+			opacity: 1,
+			transform: "scaleY(1)"
+		},
+		out: {
+			opacity: 0,
+			transform: "scaleY(0)"
+		},
+		common: { transformOrigin: "top" },
+		transitionProperty: "transform, opacity"
+	},
+	"scale-x": {
+		in: {
+			opacity: 1,
+			transform: "scaleX(1)"
+		},
+		out: {
+			opacity: 0,
+			transform: "scaleX(0)"
+		},
+		common: { transformOrigin: "left" },
+		transitionProperty: "transform, opacity"
+	},
+	"skew-up": {
+		in: {
+			opacity: 1,
+			transform: "translateY(0) skew(0deg, 0deg)"
+		},
+		out: {
+			opacity: 0,
+			transform: "translateY(-20px) skew(-10deg, -5deg)"
+		},
+		common: { transformOrigin: "top" },
+		transitionProperty: "transform, opacity"
+	},
+	"skew-down": {
+		in: {
+			opacity: 1,
+			transform: "translateY(0) skew(0deg, 0deg)"
+		},
+		out: {
+			opacity: 0,
+			transform: "translateY(20px) skew(-10deg, -5deg)"
+		},
+		common: { transformOrigin: "bottom" },
+		transitionProperty: "transform, opacity"
+	},
+	"rotate-left": {
+		in: {
+			opacity: 1,
+			transform: "translateY(0) rotate(0deg)"
+		},
+		out: {
+			opacity: 0,
+			transform: "translateY(20px) rotate(-5deg)"
+		},
+		common: { transformOrigin: "bottom" },
+		transitionProperty: "transform, opacity"
+	},
+	"rotate-right": {
+		in: {
+			opacity: 1,
+			transform: "translateY(0) rotate(0deg)"
+		},
+		out: {
+			opacity: 0,
+			transform: "translateY(20px) rotate(5deg)"
+		},
+		common: { transformOrigin: "top" },
+		transitionProperty: "transform, opacity"
+	},
+	"slide-down": {
+		in: {
+			opacity: 1,
+			transform: "translateY(0)"
+		},
+		out: {
+			opacity: 0,
+			transform: "translateY(-100%)"
+		},
+		common: { transformOrigin: "top" },
+		transitionProperty: "transform, opacity"
+	},
+	"slide-up": {
+		in: {
+			opacity: 1,
+			transform: "translateY(0)"
+		},
+		out: {
+			opacity: 0,
+			transform: "translateY(100%)"
+		},
+		common: { transformOrigin: "bottom" },
+		transitionProperty: "transform, opacity"
+	},
+	"slide-left": {
+		in: {
+			opacity: 1,
+			transform: "translateX(0)"
+		},
+		out: {
+			opacity: 0,
+			transform: "translateX(100%)"
+		},
+		common: { transformOrigin: "left" },
+		transitionProperty: "transform, opacity"
+	},
+	"slide-right": {
+		in: {
+			opacity: 1,
+			transform: "translateX(0)"
+		},
+		out: {
+			opacity: 0,
+			transform: "translateX(-100%)"
+		},
+		common: { transformOrigin: "right" },
+		transitionProperty: "transform, opacity"
+	},
+	pop: {
+		...popIn("bottom"),
+		common: { transformOrigin: "center center" }
+	},
+	"pop-bottom-left": {
+		...popIn("bottom"),
+		common: { transformOrigin: "bottom left" }
+	},
+	"pop-bottom-right": {
+		...popIn("bottom"),
+		common: { transformOrigin: "bottom right" }
+	},
+	"pop-top-left": {
+		...popIn("top"),
+		common: { transformOrigin: "top left" }
+	},
+	"pop-top-right": {
+		...popIn("top"),
+		common: { transformOrigin: "top right" }
+	}
+};
+//#endregion
+exports.transitions = transitions;
+
+//# sourceMappingURL=transitions.cjs.map

package/cjs/components/transition/transitions.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"transitions.cjs","names":[],"sources":["../../../src/components/transition/transitions.ts"],"sourcesContent":["import { Properties } from 'csstype'\n\nexport interface CTransitionStyles {\n  common?: Properties\n  in: Properties\n  out: Properties\n  transitionProperty: Properties['transitionProperty']\n}\n\nexport type CTransitionName =\n  | 'fade'\n  | 'fade-down'\n  | 'fade-up'\n  | 'fade-left'\n  | 'fade-right'\n  | 'skew-up'\n  | 'skew-down'\n  | 'rotate-right'\n  | 'rotate-left'\n  | 'slide-down'\n  | 'slide-up'\n  | 'slide-right'\n  | 'slide-left'\n  | 'scale-y'\n  | 'scale-x'\n  | 'scale'\n  | 'pop'\n  | 'pop-top-left'\n  | 'pop-top-right'\n  | 'pop-bottom-left'\n  | 'pop-bottom-right'\n\nexport type CTransition = CTransitionName | CTransitionStyles\n\nconst popIn = (from: 'top' | 'bottom') =>\n  ({\n    in: { opacity: 1, transform: 'scale(1)' },\n    out: { opacity: 0, transform: `scale(0.9) translateY(${from === 'bottom' ? 10 : -10}px)` },\n    transitionProperty: 'transform, opacity',\n  }) satisfies CTransitionStyles\n\nexport const transitions: Record<CTransitionName, CTransitionStyles> = {\n  fade: {\n    in: { opacity: 1 },\n    out: { opacity: 0 },\n    transitionProperty: 'opacity',\n  },\n\n  'fade-up': {\n    in: { opacity: 1, transform: 'translateY(0)' },\n    out: { opacity: 0, transform: 'translateY(30px)' },\n    transitionProperty: 'opacity, transform',\n  },\n\n  'fade-down': {\n    in: { opacity: 1, transform: 'translateY(0)' },\n    out: { opacity: 0, transform: 'translateY(-30px)' },\n    transitionProperty: 'opacity, transform',\n  },\n\n  'fade-left': {\n    in: { opacity: 1, transform: 'translateX(0)' },\n    out: { opacity: 0, transform: 'translateX(30px)' },\n    transitionProperty: 'opacity, transform',\n  },\n\n  'fade-right': {\n    in: { opacity: 1, transform: 'translateX(0)' },\n    out: { opacity: 0, transform: 'translateX(-30px)' },\n    transitionProperty: 'opacity, transform',\n  },\n\n  scale: {\n    in: { opacity: 1, transform: 'scale(1)' },\n    out: { opacity: 0, transform: 'scale(0)' },\n    common: { transformOrigin: 'top' },\n    transitionProperty: 'transform, opacity',\n  },\n\n  'scale-y': {\n    in: { opacity: 1, transform: 'scaleY(1)' },\n    out: { opacity: 0, transform: 'scaleY(0)' },\n    common: { transformOrigin: 'top' },\n    transitionProperty: 'transform, opacity',\n  },\n\n  'scale-x': {\n    in: { opacity: 1, transform: 'scaleX(1)' },\n    out: { opacity: 0, transform: 'scaleX(0)' },\n    common: { transformOrigin: 'left' },\n    transitionProperty: 'transform, opacity',\n  },\n\n  'skew-up': {\n    in: { opacity: 1, transform: 'translateY(0) skew(0deg, 0deg)' },\n    out: { opacity: 0, transform: 'translateY(-20px) skew(-10deg, -5deg)' },\n    common: { transformOrigin: 'top' },\n    transitionProperty: 'transform, opacity',\n  },\n\n  'skew-down': {\n    in: { opacity: 1, transform: 'translateY(0) skew(0deg, 0deg)' },\n    out: { opacity: 0, transform: 'translateY(20px) skew(-10deg, -5deg)' },\n    common: { transformOrigin: 'bottom' },\n    transitionProperty: 'transform, opacity',\n  },\n\n  'rotate-left': {\n    in: { opacity: 1, transform: 'translateY(0) rotate(0deg)' },\n    out: { opacity: 0, transform: 'translateY(20px) rotate(-5deg)' },\n    common: { transformOrigin: 'bottom' },\n    transitionProperty: 'transform, opacity',\n  },\n\n  'rotate-right': {\n    in: { opacity: 1, transform: 'translateY(0) rotate(0deg)' },\n    out: { opacity: 0, transform: 'translateY(20px) rotate(5deg)' },\n    common: { transformOrigin: 'top' },\n    transitionProperty: 'transform, opacity',\n  },\n\n  'slide-down': {\n    in: { opacity: 1, transform: 'translateY(0)' },\n    out: { opacity: 0, transform: 'translateY(-100%)' },\n    common: { transformOrigin: 'top' },\n    transitionProperty: 'transform, opacity',\n  },\n\n  'slide-up': {\n    in: { opacity: 1, transform: 'translateY(0)' },\n    out: { opacity: 0, transform: 'translateY(100%)' },\n    common: { transformOrigin: 'bottom' },\n    transitionProperty: 'transform, opacity',\n  },\n\n  'slide-left': {\n    in: { opacity: 1, transform: 'translateX(0)' },\n    out: { opacity: 0, transform: 'translateX(100%)' },\n    common: { transformOrigin: 'left' },\n    transitionProperty: 'transform, opacity',\n  },\n\n  'slide-right': {\n    in: { opacity: 1, transform: 'translateX(0)' },\n    out: { opacity: 0, transform: 'translateX(-100%)' },\n    common: { transformOrigin: 'right' },\n    transitionProperty: 'transform, opacity',\n  },\n\n  pop: {\n    ...popIn('bottom'),\n    common: { transformOrigin: 'center center' },\n  },\n\n  'pop-bottom-left': {\n    ...popIn('bottom'),\n    common: { transformOrigin: 'bottom left' },\n  },\n\n  'pop-bottom-right': {\n    ...popIn('bottom'),\n    common: { transformOrigin: 'bottom right' },\n  },\n\n  'pop-top-left': {\n    ...popIn('top'),\n    common: { transformOrigin: 'top left' },\n  },\n\n  'pop-top-right': {\n    ...popIn('top'),\n    common: { transformOrigin: 'top right' },\n  },\n}\n"],"mappings":"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"}

package/cjs/components/transition/use-transition.cjs

@@ -0,0 +1,84 @@
+"use client";
+const require_config_provider_context = require("../../core/config-provider/config-provider.context.cjs");
+let vue = require("vue");
+let _vueuse_core = require("@vueuse/core");
+//#region packages/@cck-ui/core/src/components/transition/use-transition.ts
+function useTransition({ duration, exitDuration, timingFunction, mounted, onEnter, onEntered, onExit, onExited, enterDelay, exitDelay }) {
+	const theme = require_config_provider_context.useCckTheme().value;
+	const shouldReduceMotion = (0, _vueuse_core.usePreferredReducedMotion)();
+	const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;
+	const transitionDuration = (0, vue.ref)(reduceMotion ? 0 : duration);
+	const transitionStatus = (0, vue.ref)(mounted.value ? "entered" : "exited");
+	let transitionTimeout = null;
+	let delayTimeout = null;
+	let rafId = null;
+	const clearAllTimeouts = () => {
+		if (transitionTimeout) {
+			clearTimeout(transitionTimeout);
+			transitionTimeout = null;
+		}
+		if (delayTimeout) {
+			clearTimeout(delayTimeout);
+			delayTimeout = null;
+		}
+		if (rafId) {
+			cancelAnimationFrame(rafId);
+			rafId = null;
+		}
+	};
+	const handleStateChange = (shouldMount) => {
+		clearAllTimeouts();
+		const preHandler = shouldMount ? onEnter : onExit;
+		const handler = shouldMount ? onEntered : onExited;
+		const newDuration = reduceMotion ? 0 : shouldMount ? duration : exitDuration;
+		transitionDuration.value = newDuration;
+		if (newDuration === 0) {
+			preHandler?.();
+			handler?.();
+			transitionStatus.value = shouldMount ? "entered" : "exited";
+		} else rafId = requestAnimationFrame(() => {
+			(0, vue.nextTick)(() => {
+				transitionStatus.value = shouldMount ? "pre-entering" : "pre-exiting";
+				rafId = requestAnimationFrame(() => {
+					preHandler?.();
+					transitionStatus.value = shouldMount ? "entering" : "exiting";
+					transitionTimeout = window.setTimeout(() => {
+						handler?.();
+						transitionStatus.value = shouldMount ? "entered" : "exited";
+					}, newDuration);
+				});
+			});
+		});
+	};
+	const handleTransitionWithDelay = (shouldMount) => {
+		clearAllTimeouts();
+		const delay = shouldMount ? enterDelay : exitDelay;
+		if (delay === null) {
+			handleStateChange(shouldMount);
+			return;
+		}
+		delayTimeout = window.setTimeout(() => {
+			handleStateChange(shouldMount);
+		}, delay);
+	};
+	let isInitial = true;
+	(0, vue.watch)(mounted, (newVal) => {
+		if (isInitial) {
+			isInitial = false;
+			return;
+		}
+		handleTransitionWithDelay(newVal);
+	}, { immediate: true });
+	(0, vue.onUnmounted)(() => {
+		clearAllTimeouts();
+	});
+	return {
+		transitionDuration,
+		transitionStatus,
+		transitionTimingFunction: timingFunction || "ease"
+	};
+}
+//#endregion
+exports.useTransition = useTransition;
+
+//# sourceMappingURL=use-transition.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-transition.cjs","names":["useCckTheme"],"sources":["../../../src/components/transition/use-transition.ts"],"sourcesContent":["import { usePreferredReducedMotion } from '@vueuse/core'\nimport { useCckTheme } from '../../core'\nimport { nextTick, onUnmounted, Ref, ref, watch } from 'vue'\n\nexport type TransitionStatus =\n  | 'entered'\n  | 'exited'\n  | 'entering'\n  | 'exiting'\n  | 'pre-entering'\n  | 'pre-exiting'\n\ninterface UseTransitionOptions {\n  duration: number\n  exitDuration: number\n  timingFunction: string\n  mounted: Ref<boolean>\n  onEnter?: () => void\n  onExit?: () => void\n  onEntered?: () => void\n  onExited?: () => void\n  enterDelay?: number\n  exitDelay?: number\n}\n\nexport function useTransition({\n  duration,\n  exitDuration,\n  timingFunction,\n  mounted,\n  onEnter,\n  onEntered,\n  onExit,\n  onExited,\n  enterDelay,\n  exitDelay,\n}: UseTransitionOptions) {\n  const theme = useCckTheme().value\n  const shouldReduceMotion = usePreferredReducedMotion()\n  const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false\n\n  const transitionDuration = ref(reduceMotion ? 0 : duration)\n  const transitionStatus = ref<TransitionStatus>(mounted.value ? 'entered' : 'exited')\n\n  let transitionTimeout: number | null = null\n  let delayTimeout: number | null = null\n  let rafId: number | null = null\n\n  const clearAllTimeouts = () => {\n    if (transitionTimeout) {\n      clearTimeout(transitionTimeout)\n      transitionTimeout = null\n    }\n    if (delayTimeout) {\n      clearTimeout(delayTimeout)\n      delayTimeout = null\n    }\n    if (rafId) {\n      cancelAnimationFrame(rafId)\n      rafId = null\n    }\n  }\n\n  const handleStateChange = (shouldMount: boolean) => {\n    clearAllTimeouts()\n    const preHandler = shouldMount ? onEnter : onExit\n    const handler = shouldMount ? onEntered : onExited\n    const newDuration = reduceMotion ? 0 : shouldMount ? duration : exitDuration\n    transitionDuration.value = newDuration\n\n    if (newDuration === 0) {\n      preHandler?.()\n      handler?.()\n      transitionStatus.value = shouldMount ? 'entered' : 'exited'\n    } else {\n      rafId = requestAnimationFrame(() => {\n        nextTick(() => {\n          transitionStatus.value = shouldMount ? 'pre-entering' : 'pre-exiting'\n          rafId = requestAnimationFrame(() => {\n            preHandler?.()\n            transitionStatus.value = shouldMount ? 'entering' : 'exiting'\n            transitionTimeout = window.setTimeout(() => {\n              handler?.()\n              transitionStatus.value = shouldMount ? 'entered' : 'exited'\n            }, newDuration)\n          })\n        })\n      })\n    }\n  }\n\n  const handleTransitionWithDelay = (shouldMount: boolean) => {\n    clearAllTimeouts()\n    const delay = shouldMount ? enterDelay : exitDelay\n    if (delay === null) {\n      handleStateChange(shouldMount)\n      return\n    }\n    delayTimeout = window.setTimeout(() => {\n      handleStateChange(shouldMount)\n    }, delay)\n  }\n\n  let isInitial = true\n  watch(\n    mounted,\n    (newVal) => {\n      if (isInitial) {\n        isInitial = false\n        return\n      }\n      handleTransitionWithDelay(newVal)\n    },\n    { immediate: true }\n  )\n\n  onUnmounted(() => {\n    clearAllTimeouts()\n  })\n\n  return {\n    transitionDuration,\n    transitionStatus,\n    transitionTimingFunction: timingFunction || 'ease',\n  }\n}\n"],"mappings":";;;;;AAyBA,SAAgB,cAAc,EAC5B,UACA,cACA,gBACA,SACA,SACA,WACA,QACA,UACA,YACA,aACuB;CACvB,MAAM,QAAQA,gCAAAA,YAAY,CAAC,CAAC;CAC5B,MAAM,sBAAA,GAAA,aAAA,0BAAA,CAA+C;CACrD,MAAM,eAAe,MAAM,uBAAuB,qBAAqB;CAEvE,MAAM,sBAAA,GAAA,IAAA,IAAA,CAAyB,eAAe,IAAI,QAAQ;CAC1D,MAAM,oBAAA,GAAA,IAAA,IAAA,CAAyC,QAAQ,QAAQ,YAAY,QAAQ;CAEnF,IAAI,oBAAmC;CACvC,IAAI,eAA8B;CAClC,IAAI,QAAuB;CAE3B,MAAM,yBAAyB;EAC7B,IAAI,mBAAmB;GACrB,aAAa,iBAAiB;GAC9B,oBAAoB;EACtB;EACA,IAAI,cAAc;GAChB,aAAa,YAAY;GACzB,eAAe;EACjB;EACA,IAAI,OAAO;GACT,qBAAqB,KAAK;GAC1B,QAAQ;EACV;CACF;CAEA,MAAM,qBAAqB,gBAAyB;EAClD,iBAAiB;EACjB,MAAM,aAAa,cAAc,UAAU;EAC3C,MAAM,UAAU,cAAc,YAAY;EAC1C,MAAM,cAAc,eAAe,IAAI,cAAc,WAAW;EAChE,mBAAmB,QAAQ;EAE3B,IAAI,gBAAgB,GAAG;GACrB,aAAa;GACb,UAAU;GACV,iBAAiB,QAAQ,cAAc,YAAY;EACrD,OACE,QAAQ,4BAA4B;GAClC,CAAA,GAAA,IAAA,SAAA,OAAe;IACb,iBAAiB,QAAQ,cAAc,iBAAiB;IACxD,QAAQ,4BAA4B;KAClC,aAAa;KACb,iBAAiB,QAAQ,cAAc,aAAa;KACpD,oBAAoB,OAAO,iBAAiB;MAC1C,UAAU;MACV,iBAAiB,QAAQ,cAAc,YAAY;KACrD,GAAG,WAAW;IAChB,CAAC;GACH,CAAC;EACH,CAAC;CAEL;CAEA,MAAM,6BAA6B,gBAAyB;EAC1D,iBAAiB;EACjB,MAAM,QAAQ,cAAc,aAAa;EACzC,IAAI,UAAU,MAAM;GAClB,kBAAkB,WAAW;GAC7B;EACF;EACA,eAAe,OAAO,iBAAiB;GACrC,kBAAkB,WAAW;EAC/B,GAAG,KAAK;CACV;CAEA,IAAI,YAAY;CAChB,CAAA,GAAA,IAAA,MAAA,CACE,UACC,WAAW;EACV,IAAI,WAAW;GACb,YAAY;GACZ;EACF;EACA,0BAA0B,MAAM;CAClC,GACA,EAAE,WAAW,KAAK,CACpB;CAEA,CAAA,GAAA,IAAA,YAAA,OAAkB;EAChB,iBAAiB;CACnB,CAAC;CAED,OAAO;EACL;EACA;EACA,0BAA0B,kBAAkB;CAC9C;AACF"}

package/cjs/components/unstyled-button/unstyled-button.cjs

@@ -315,36 +315,43 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 	setup(__props, { expose: __expose }) {
 		__expose();
 		const props = __props;
-		const { className, tag = "button", __staticSelector, unstyled, classNames, styles, style, attributes, ...others } = props;
+		const { tag = "button" } = props;
+		const knownProps = [
+			"className",
+			"tag",
+			"__staticSelector",
+			"unstyled",
+			"classNames",
+			"styles",
+			"style",
+			"attributes"
+		];
 		const getStyles = require_use_styles.useStyles({
-			name: __staticSelector,
+			name: props.__staticSelector,
 			props,
 			classes: require_unstyled_button_module.default,
-			className,
-			style,
-			classNames,
-			styles,
-			unstyled,
-			attributes
+			className: props.className,
+			style: props.style,
+			classNames: props.classNames,
+			styles: props.styles,
+			unstyled: props.unstyled,
+			attributes: props.attributes
 		});
 		const rootAttrs = (0, vue.computed)(() => getStyles("root", { focusable: true }));
 		const __returned__ = {
 			props,
-			className,
 			tag,
-			__staticSelector,
-			unstyled,
-			classNames,
-			styles,
-			style,
-			attributes,
-			others,
+			knownProps,
 			getStyles,
 			rootAttrs,
-			mergedAttrs: (0, vue.computed)(() => ({
-				...others,
-				...rootAttrs.value
-			})),
+			mergedAttrs: (0, vue.computed)(() => {
+				const others = {};
+				for (const key in props) if (!knownProps.includes(key)) others[key] = props[key];
+				return {
+					...others,
+					...rootAttrs.value
+				};
+			}),
 			get CBox() {
 				return require_index.CBox;
 			}
@@ -360,9 +367,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 	return (0, vue.openBlock)(), (0, vue.createBlock)($setup["CBox"], (0, vue.mergeProps)($setup.mergedAttrs, {
 		tag: $setup.tag,
 		type: $setup.tag === "button" ? "button" : void 0
-	}), null, 16, ["tag", "type"]);
+	}), {
+		default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+		_: 3
+	}, 16, ["tag", "type"]);
 }
-var unstyled_button_default = /*#__PURE__*/ require_export_helper.default(_sfc_main, [["render", _sfc_render], ["__file", "D:\\work\\jackatlas\\cck-ui\\packages\\@cck-ui\\core\\src\\components\\unstyled-button\\unstyled-button.vue"]]);
+var unstyled_button_default = /*#__PURE__*/ require_export_helper.default(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/cck-ui/cck-ui/packages/@cck-ui/core/src/components/unstyled-button/unstyled-button.vue"]]);
 //#endregion
 exports.default = unstyled_button_default;
 

package/cjs/components/unstyled-button/unstyled-button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"unstyled-button.cjs","names":[],"sources":["../../../src/components/unstyled-button/unstyled-button.vue","../../../src/components/unstyled-button/unstyled-button.vue"],"sourcesContent":["<template>\n  <c-box v-bind=\"mergedAttrs\" :tag=\"tag\" :type=\"tag === 'button' ? 'button' : undefined\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { CBox, useStyles } from '../../core'\nimport classes from './unstyled-button.module.css'\nimport type { UnstyledButtonFactory, UnstyledButtonProps } from './unstyled-button.types'\n\ndefineOptions({\n  name: 'UnstyledButton',\n})\n\nconst props = withDefaults(defineProps<UnstyledButtonProps>(), {\n  __staticSelector: 'UnstyledButton',\n})\n\nconst {\n  className,\n  tag = 'button',\n  __staticSelector,\n  unstyled,\n  classNames,\n  styles,\n  style,\n  attributes,\n  ...others\n} = props\n\nconst getStyles = useStyles<UnstyledButtonFactory>({\n  name: __staticSelector,\n  props,\n  classes,\n  className,\n  style,\n  classNames,\n  styles,\n  unstyled,\n  attributes,\n})\n\nconst rootAttrs = computed(() => getStyles('root', { focusable: true }))\nconst mergedAttrs = computed(() => ({ ...others, ...rootAttrs.value }))\n</script>\n",null],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAcA,MAAM,QAAQ;EAId,MAAM,EACJ,WACA,MAAM,UACN,kBACA,UACA,YACA,QACA,OACA,YACA,GAAG,WACD;EAEJ,MAAM,YAAY,mBAAA,UAAiC;GACjD,MAAM;GACN;GACA,SAAA,+BAAA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAAC;EAED,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,QAAQ,EAAE,WAAW,KAAK,CAAC,CAAC;;;;;;;;;;;;;;yCACnC;IAAE,GAAG;IAAQ,GAAG,UAAU;GAAM,EAAA;;;;;;;;;;;;;mDC1CuB,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,OAA1E,aAAW;EAAG,KAAK,OAAA;EAAM,MAAM,OAAA,QAAG,WAAA,WAA2B,KAAA"}
+{"version":3,"file":"unstyled-button.cjs","names":[],"sources":["../../../src/components/unstyled-button/unstyled-button.vue"],"sourcesContent":["<template>\n  <c-box v-bind=\"mergedAttrs\" :tag=\"tag\" :type=\"tag === 'button' ? 'button' : undefined\">\n    <slot />\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { CBox, useStyles } from '../../core'\nimport type { UnstyledButtonFactory, UnstyledButtonProps } from './unstyled-button.types'\nimport classes from './unstyled-button.module.css'\n\ndefineOptions({\n  name: 'UnstyledButton',\n})\n\nconst props = withDefaults(defineProps<UnstyledButtonProps>(), {\n  __staticSelector: 'UnstyledButton',\n})\n\nconst { tag = 'button' } = props\n\nconst knownProps = [\n  'className',\n  'tag',\n  '__staticSelector',\n  'unstyled',\n  'classNames',\n  'styles',\n  'style',\n  'attributes',\n]\n\nconst getStyles = useStyles<UnstyledButtonFactory>({\n  name: props.__staticSelector,\n  props,\n  classes,\n  className: props.className,\n  style: props.style,\n  classNames: props.classNames,\n  styles: props.styles,\n  unstyled: props.unstyled,\n  attributes: props.attributes,\n})\n\nconst rootAttrs = computed(() => getStyles('root', { focusable: true }))\nconst mergedAttrs = computed(() => {\n  const others: Record<string, any> = {}\n  for (const key in props) {\n    if (!knownProps.includes(key)) {\n      others[key] = props[key as keyof typeof props]\n    }\n  }\n  return { ...others, ...rootAttrs.value }\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgBA,MAAM,QAAQ;EAId,MAAM,EAAE,MAAM,aAAa;EAE3B,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,YAAY,mBAAA,UAAiC;GACjD,MAAM,MAAM;GACZ;GACA,SAAA,+BAAA;GACA,WAAW,MAAM;GACjB,OAAO,MAAM;GACb,YAAY,MAAM;GAClB,QAAQ,MAAM;GACd,UAAU,MAAM;GAChB,YAAY,MAAM;EACpB,CAAC;EAED,MAAM,aAAA,GAAA,IAAA,SAAA,OAA2B,UAAU,QAAQ,EAAE,WAAW,KAAK,CAAC,CAAC;;;;;;;wCACpC;IACjC,MAAM,SAA8B,CAAC;IACrC,KAAK,MAAM,OAAO,OAChB,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,MAAM;IAGxB,OAAO;KAAE,GAAG;KAAQ,GAAG,UAAU;IAAM;GACzC,CAAA;;;;;;;;;;;;;mDAnDU,OAAA,UAAA,GAAA,IAAA,WAAA,CAAA,OAFO,aAAW;EAAG,KAAK,OAAA;EAAM,MAAM,OAAA,QAAG,WAAA,WAA2B,KAAA;;kCAClE,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/cjs/core/box/box.cjs

@@ -1,9 +1,8 @@
 "use client";
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_is_number_like = require("../utils/is-number-like/is-number-like.cjs");
-const require_config_provider_types = require("../config-provider/config-provider.types.cjs");
 const require_export_helper = require("../../_virtual/_/plugin-vue/export-helper.cjs");
-const require_default_theme = require("../config-provider/default-theme.cjs");
+const require_config_provider_context = require("../config-provider/config-provider.context.cjs");
 const require_extract_style_props = require("./style-props/extract-style-props/extract-style-props.cjs");
 const require_parse_style_props = require("./style-props/parse-style-props/parse-style-props.cjs");
 const require_style_props_data = require("./style-props/style-props-data.cjs");
@@ -302,14 +301,18 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 	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 = (0, vue.inject)(require_config_provider_types.THEME_KEY, require_default_theme.DEFAULT_THEME);
-		const { styleProps, rest } = require_extract_style_props.extractStyleProps(others);
-		const parsedStyleProps = (0, vue.computed)(() => require_parse_style_props.parseStyleProps({
-			styleProps,
-			theme,
-			data: require_style_props_data.STYLE_PROPS_DATA
-		}));
+		const theme = require_config_provider_context.useCckTheme();
+		const parsedStyleProps = (0, vue.computed)(() => {
+			const { styleProps, rest } = require_extract_style_props.extractStyleProps(props);
+			return {
+				...require_parse_style_props.parseStyleProps({
+					styleProps,
+					theme: theme.value,
+					data: require_style_props_data.STYLE_PROPS_DATA
+				}),
+				rest
+			};
+		});
 		const hasResponsive = (0, vue.computed)(() => parsedStyleProps.value.hasResponsiveStyles);
 		const responsiveClassName = (0, vue.ref)(null);
 		let currentStyleKey = null;
@@ -349,22 +352,7 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 		});
 		const __returned__ = {
 			props,
-			__size,
-			__vars,
-			className,
-			darkHidden,
-			hiddenFrom,
-			lightHidden,
-			mod,
-			size,
-			style,
-			tag,
-			variant,
-			visibleFrom,
-			others,
 			theme,
-			styleProps,
-			rest,
 			parsedStyleProps,
 			hasResponsive,
 			responsiveClassName,
@@ -376,25 +364,31 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 			},
 			buildMediaQueriesFromObject,
 			updateResponsiveStyles,
-			_props: {
-				style: require_get_box_style.getBoxStyle({
-					theme,
-					style,
-					vars: __vars,
-					styleProps: parsedStyleProps.value.inlineStyles
-				}),
-				className: (0, clsx.default)(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": require_is_number_like.isNumberLike(size) ? void 0 : size || void 0,
-				size: __size,
-				...require_get_box_mod.getBoxMod(mod),
-				...rest
-			}
+			_props: (0, vue.computed)(() => {
+				const { rest, inlineStyles } = parsedStyleProps.value;
+				const finalStyle = require_get_box_style.getBoxStyle({
+					theme: theme.value,
+					style: props.style,
+					vars: props.__vars,
+					styleProps: inlineStyles
+				});
+				const finalClassName = (0, clsx.default)(props.className, responsiveClassName.value, {
+					"c-light-hidden": props.lightHidden,
+					"c-dark-hidden": props.darkHidden,
+					[`c-hidden-from-${props.hiddenFrom}`]: props.hiddenFrom,
+					[`c-visible-from-${props.visibleFrom}`]: props.visibleFrom
+				});
+				const { tag, style, __vars, className, variant, mod, size, hiddenFrom, visibleFrom, lightHidden, darkHidden, __size, ...restProps } = rest || {};
+				return {
+					...restProps,
+					style: finalStyle,
+					className: finalClassName,
+					"data-variant": props.variant,
+					"data-size": require_is_number_like.isNumberLike(props.size) ? void 0 : props.size || void 0,
+					size: props.__size,
+					...require_get_box_mod.getBoxMod(props.mod)
+				};
+			})
 		};
 		Object.defineProperty(__returned__, "__isScriptSetup", {
 			enumerable: false,
@@ -404,12 +398,12 @@ const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
 	}
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-	return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)($setup.tag), (0, vue.normalizeProps)((0, vue.guardReactiveProps)($setup._props)), {
+	return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)($props.tag), (0, vue.normalizeProps)((0, vue.guardReactiveProps)($setup._props)), {
 		default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 		_: 3
 	}, 16);
 }
-var box_default = /*#__PURE__*/ require_export_helper.default(_sfc_main, [["render", _sfc_render], ["__file", "D:\\work\\jackatlas\\cck-ui\\packages\\@cck-ui\\core\\src\\core\\box\\box.vue"]]);
+var box_default = /*#__PURE__*/ require_export_helper.default(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/cck-ui/cck-ui/packages/@cck-ui/core/src/core/box/box.vue"]]);
 //#endregion
 exports.default = box_default;
 

package/cjs/core/box/box.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"box.cjs","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,SAAA,GAAA,IAAA,OAAA,CAAe,8BAAA,WAAW,sBAAA,aAAa;EAC7C,MAAM,EAAE,YAAY,SAAS,4BAAA,kBAAkB,MAAM;EACrD,MAAM,oBAAA,GAAA,IAAA,SAAA,OACJ,0BAAA,gBAAgB;GACd;GACA;GACA,MAAM,yBAAA;EACR,CAAC,CACH;EAEA,MAAM,iBAAA,GAAA,IAAA,SAAA,OAA+B,iBAAiB,MAAM,mBAAmB;EAC/E,MAAM,uBAAA,GAAA,IAAA,IAAA,CAAyC,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,iCAAA,uBAAuB,WAAW,eAAe;IACjD,kBAAkB;IAClB,oBAAoB,QAAQ;GAC9B;GAEA,IAAI,CAAC,eACH;GAGF,MAAM,aAAa,4BAA4B,iBAAiB,MAAM,KAAK;GAE3E,MAAM,YADO,oBAAA,eAAe,iBAAiB,MAAM,QAAQ,UACzC;GAElB,MAAM,UAAU,yBAAA,eAAe;IAC7B,UAAU;IACV,QAAQ,iBAAiB,MAAM;IAC/B,OAAO;GACT,CAAC;GAGD,kBADsB,iCAAA,uBAAuB,SAAS,SAAS,SAC7C;GAClB,oBAAoB,QAAQ;EAC9B;EAEA,uBAAuB;EAEvB,CAAA,GAAA,IAAA,MAAA,OACQ,CAAC,iBAAiB,MAAM,QAAQ,iBAAiB,MAAM,KAAK,SAC5D;GACJ,uBAAuB;EACzB,GACA;GAAE,MAAM;GAAM,WAAW;EAAM,CACjC;EAEA,CAAA,GAAA,IAAA,gBAAA,OAAsB;GACpB,IAAI,iBACF,iCAAA,uBAAuB,WAAW,eAAe;EAErD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAGC,OAAO,sBAAA,YAAY;KACjB;KACA;KACA,MAAM;KACN,YAAY,iBAAiB,MAAM;IACrC,CAAC;IACD,YAAA,GAAA,KAAA,QAAA,CAAc,WAAW,oBAAoB,OAAO;KAClD,kBAAkB;KAClB,iBAAiB;MAChB,iBAAiB,eAAe;MAChC,kBAAkB,gBAAgB;IACrC,CAAC;IACD,gBAAgB;IAChB,aAAa,uBAAA,aAAa,IAAI,IAAI,KAAA,IAAY,QAAQ,KAAA;IACtD,MAAM;IACN,GAAG,oBAAA,UAAU,GAAG;IAChB,GAAG;;;;;;;;;;;oFClIa,OAAA,GAAG,IAAA,GAAA,IAAA,eAAA,EAAA,GAAA,IAAA,mBAAA,CAAU,OAAA,MAAM,CAAA,GAAA;kCACzB,EAAA,GAAA,IAAA,WAAA,CAAA,KAAA,QAAA,SAAA,CAAA,CAAA"}
+{"version":3,"file":"box.cjs","names":[],"sources":["../../../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, onBeforeUnmount, ref, watch } from 'vue'\nimport { isNumberLike } from '../utils'\nimport type { BoxComponentProps } from './box.types'\nimport { useCckTheme } 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 theme = useCckTheme()\n\nconst parsedStyleProps = computed(() => {\n  const { styleProps, rest } = extractStyleProps(props)\n  return {\n    ...parseStyleProps({\n      styleProps,\n      theme: theme.value,\n      data: STYLE_PROPS_DATA,\n    }),\n    rest,\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 = computed(() => {\n  const { rest, inlineStyles } = parsedStyleProps.value\n\n  const finalStyle = getBoxStyle({\n    theme: theme.value,\n    style: props.style,\n    vars: props.__vars,\n    styleProps: inlineStyles,\n  })\n\n  const finalClassName = cx(props.className, responsiveClassName.value, {\n    'c-light-hidden': props.lightHidden,\n    'c-dark-hidden': props.darkHidden,\n    [`c-hidden-from-${props.hiddenFrom}`]: props.hiddenFrom,\n    [`c-visible-from-${props.visibleFrom}`]: props.visibleFrom,\n  })\n\n  const {\n    tag,\n    style,\n    __vars,\n    className,\n    variant,\n    mod,\n    size,\n    hiddenFrom,\n    visibleFrom,\n    lightHidden,\n    darkHidden,\n    __size,\n    ...restProps\n  } = rest || {}\n\n  return {\n    ...restProps,\n    style: finalStyle,\n    className: finalClassName,\n    'data-variant': props.variant,\n    'data-size': isNumberLike(props.size) ? undefined : props.size || undefined,\n    size: props.__size,\n    ...getBoxMod(props.mod),\n  }\n})\n</script>\n"],"mappings":"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"}

package/cjs/core/box/get-box-mod/get-box-mod.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"get-box-mod.cjs","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"}
+{"version":3,"file":"get-box-mod.cjs","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 (value === undefined || value === '' || value === false || value === null) {\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) {\n    return null\n  }\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,IAAI,UAAU,KAAA,KAAa,UAAU,MAAM,UAAU,SAAS,UAAU,MACtE,OAAO;EAGT,IAAI,gBAAgB,GAAG,KAAK,MAAM;EAClC,OAAO;CACT,GAAG,CAAC,CAAC;AACP;AAEA,SAAgB,UAAU,KAAuC;CAC/D,IAAI,CAAC,KACH,OAAO;CAGT,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/cjs/core/box/style-props/parse-style-props/parse-style-props.cjs

@@ -26,7 +26,7 @@ function getBreakpointValue(value, breakpoint) {
 }
 function parseStyleProps({ data, styleProps, theme }) {
 	return require_sort_media_queries.sortMediaQueries(require_keys.keys(styleProps).reduce((acc, styleProp) => {
-		if (styleProp === "hiddenFrom" || styleProp === "visibleFrom" || styleProp === "sx") return acc;
+		if (styleProp === "hiddenFrom" || styleProp === "visibleFrom" || styleProp === "sx" || styleProp === "lightHidden" || styleProp === "darkHidden") return acc;
 		const propertyData = data[styleProp];
 		const properties = Array.isArray(propertyData.property) ? propertyData.property : [propertyData.property];
 		const baseValue = getBaseValue(styleProps[styleProp]);

package/cjs/core/box/style-props/parse-style-props/parse-style-props.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"parse-style-props.cjs","names":["keys","sortMediaQueries","resolvers"],"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,OAAOA,aAAAA,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,OAAOC,2BAAAA,iBACLD,aAAAA,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,YAAYE,cAAAA,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,YAAYA,cAAAA,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,WAAWA,cAAAA,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"}
+{"version":3,"file":"parse-style-props.cjs","names":["keys","sortMediaQueries","resolvers"],"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) {\n    return false\n  }\n\n  const breakpoints = Object.keys(styleProp)\n\n  if (breakpoints.length === 1 && breakpoints[0] === 'base') {\n    return false\n  }\n\n  return true\n}\n\nfunction getBaseValue(value: StyleProp<unknown>) {\n  if (typeof value === 'object' && value !== null) {\n    if ('base' in value) {\n      return value.base\n    }\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          (styleProp as string) === 'lightHidden' ||\n          (styleProp as string) === 'darkHidden'\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](baseValue, theme)\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](baseValue, theme)\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,MACjD,OAAO;CAGT,MAAM,cAAc,OAAO,KAAK,SAAS;CAEzC,IAAI,YAAY,WAAW,KAAK,YAAY,OAAO,QACjD,OAAO;CAGT,OAAO;AACT;AAEA,SAAS,aAAa,OAA2B;CAC/C,IAAI,OAAO,UAAU,YAAY,UAAU,MAAM;EAC/C,IAAI,UAAU,OACZ,OAAO,MAAM;EAGf;CACF;CAEA,OAAO;AACT;AAEA,SAAS,kBAAkB,OAA2B;CACpD,IAAI,OAAO,UAAU,YAAY,UAAU,MACzC,OAAOA,aAAAA,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,OAAOC,2BAAAA,iBACLD,aAAAA,KAAK,UAAU,CAAC,CAAC,QAMd,KAAK,cAAc;EAClB,IACG,cAAyB,gBACzB,cAAyB,iBACzB,cAAyB,QACzB,cAAyB,iBACzB,cAAyB,cAE1B,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,YAAYE,cAAAA,UAAU,aAAa,KAAK,CAAC,WAAW,KAAK;GAC5E,CAAC;GAED,OAAO;EACT;EAEA,IAAI,sBAAsB;EAE1B,MAAM,cAAc,kBAAkB,WAAW,UAAU;EAE3D,WAAW,SAAS,aAAa;GAC/B,IAAI,cAAc,MAChB,IAAI,OAAO,YAAYA,cAAAA,UAAU,aAAa,KAAK,CAAC,WAAW,KAAK;GAGtE,YAAY,SAAS,eAAe;IAClC,MAAM,KAAK,eAAe,MAAM,YAAY,YAAY;IACxD,IAAI,MAAM,MAAM;KACd,GAAG,IAAI,MAAM;MACZ,WAAWA,cAAAA,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/cjs/core/config-provider/baseline.cjs

@@ -0,0 +1 @@
+"use client";