@vinicunca/unocss-preset 1.18.0 → 1.20.0

package/dist/{chunks/index5.mjs → akar-CBKfktHl.js}

@@ -1,8 +1,6 @@
-import { c as compressCSS } from '../shared/unocss-preset.Csuyh8w-.mjs';
-import '@unocss/core';
-import '@vinicunca/perkakas';
-import 'defu';
+import { compressCSS } from "./utils-DFMuAdWB.js";
 
+//#region src/presets/akar/index.ts
 const drawerAkarCss = `
 [data-akar-drawer] {
   touch-action: none;
@@ -261,14 +259,11 @@ const drawerAkarCss = `
   }
 }`;
 function presetAkar() {
-  return {
-    name: "unocss-preset-akar",
-    preflights: [
-      {
-        getCSS: () => compressCSS(drawerAkarCss)
-      }
-    ]
-  };
+	return {
+		name: "unocss-preset-akar",
+		preflights: [{ getCSS: () => compressCSS(drawerAkarCss) }]
+	};
 }
 
-export { presetAkar };
+//#endregion
+export { presetAkar };

package/dist/animation-KZDlcVMl.js

@@ -0,0 +1,150 @@
+import { layerMeta } from "./meta-hBxi8oC8.js";
+import { h } from "@unocss/preset-mini/utils";
+
+//#region src/presets/animation/animation.entity.ts
+const CSS_VARIABLE_PREFIX = "--vin";
+const ENTER_ANIMATION_NAME = "vin-in";
+const EXIT_ANIMATION_NAME = "vin-out";
+
+//#endregion
+//#region src/presets/animation/animation.util.ts
+function handleSlide(val, dir) {
+	let value = h.cssvar.fraction.rem(val || DEFAULT_SLIDE_TRANSLATE);
+	if (!value) return [];
+	if (!value.startsWith("var(--") && ["left", "top"].includes(dir ?? "")) {
+		if (value.startsWith("-")) value = value.slice(1);
+		else if (value !== "0") value = `-${value}`;
+	}
+	return [value, dir];
+}
+
+//#endregion
+//#region src/presets/animation/animation.rule.ts
+const DEFAULT_FADE_OPACITY = "0";
+const DEFAULT_ZOOM_SCALE = "0";
+const DEFAULT_SPIN_DEGREE = "30deg";
+const DEFAULT_SLIDE_TRANSLATE = "100%";
+const DIRECTIONS_AUTOCOMPLETE = "(t|b|l|r|top|bottom|left|right)";
+const fadeRules = [[
+	/^fade-in(?:-(.+))?$/,
+	([, op]) => ({ [`${CSS_VARIABLE_PREFIX}-enter-opacity`]: h.cssvar.percent(op || DEFAULT_FADE_OPACITY) }),
+	{ autocomplete: "fade-(in|out)-<percent>" }
+], [/^fade-out(?:-(.+))?$/, ([, op]) => ({ [`${CSS_VARIABLE_PREFIX}-exit-opacity`]: h.cssvar.percent(op || DEFAULT_FADE_OPACITY) })]];
+const zoomRules = [[
+	/^zoom-in(?:-(.+))?$/,
+	([, scale]) => ({ [`${CSS_VARIABLE_PREFIX}-enter-scale`]: h.cssvar.fraction.percent(scale || DEFAULT_ZOOM_SCALE) }),
+	{ autocomplete: "zoom-(in|out)-<percent>" }
+], [/^zoom-out(?:-(.+))?$/, ([, scale]) => ({ [`${CSS_VARIABLE_PREFIX}-exit-scale`]: h.cssvar.fraction.percent(scale || DEFAULT_ZOOM_SCALE) })]];
+const spinRules = [[
+	/^spin-in(?:-(.+))?$/,
+	([, deg]) => ({ [`${CSS_VARIABLE_PREFIX}-enter-rotate`]: h.cssvar.degree(deg || DEFAULT_SPIN_DEGREE) }),
+	{
+		autocomplete: "spin-(in|out)-<percent>",
+		layer: "animation"
+	}
+], [/^spin-out(?:-(.+))?$/, ([, deg]) => ({ [`${CSS_VARIABLE_PREFIX}-exit-rotate`]: h.cssvar.degree(deg || DEFAULT_SPIN_DEGREE) })]];
+const slideRules = [[
+	/^slide-in(?:-from)?-([tblr]|top|bottom|left|right)(?:-(.+))?$/,
+	([, dir, val]) => {
+		const [value, direction] = handleSlide(val, dir);
+		if (!value) return;
+		switch (direction) {
+			case "bottom":
+			case "top": return { [`${CSS_VARIABLE_PREFIX}-enter-translate-y`]: value };
+			case "left":
+			case "right": return { [`${CSS_VARIABLE_PREFIX}-enter-translate-x`]: value };
+		}
+	},
+	{ autocomplete: [
+		`slide-(in|out)-${DIRECTIONS_AUTOCOMPLETE}-<percent>`,
+		`slide-(in|out)-${DIRECTIONS_AUTOCOMPLETE}-full`,
+		`slide-in-from-${DIRECTIONS_AUTOCOMPLETE}-<percent>`,
+		`slide-in-from-${DIRECTIONS_AUTOCOMPLETE}-full`
+	] }
+], [
+	/^slide-out(?:-to)?-([tblr]|top|bottom|left|right)(?:-(.+))?$/,
+	([, dir, val]) => {
+		const [value, direction] = handleSlide(val, dir);
+		if (!value) return;
+		switch (direction) {
+			case "bottom":
+			case "top": return { [`${CSS_VARIABLE_PREFIX}-exit-translate-y`]: value };
+			case "left":
+			case "right": return { [`${CSS_VARIABLE_PREFIX}-exit-translate-x`]: value };
+		}
+	},
+	{ autocomplete: [`slide-out-to-${DIRECTIONS_AUTOCOMPLETE}-<percent>`, `slide-out-to-${DIRECTIONS_AUTOCOMPLETE}-full`] }
+]];
+const animationRules = [
+	...fadeRules,
+	...zoomRules,
+	...spinRules,
+	...slideRules
+];
+/**
+* We need to add the layers into the rules.
+* So we need to run this immediately.
+*/
+for (const rule of animationRules) rule[2] = Object.assign(rule[2] || {}, layerMeta);
+
+//#endregion
+//#region src/presets/animation/animation.shortcut.ts
+function animationShortcuts(options) {
+	function getSharedAnimationProperties() {
+		return {
+			"animation-duration": options.duration ? `${options.duration}${options.unit}` : "150ms",
+			...options.delay && { "animation-delay": `${options.delay}${options.unit}` },
+			...options.direction && { "animation-direction": options.direction },
+			...options.fillMode && { "animation-fill-mode": options.fillMode },
+			...options.iterationCount && { "animation-iteration-count": options.iterationCount },
+			...options.playState && { "animation-play-state": options.playState },
+			...options.timingFunction && { "animation-timing-function": options.timingFunction }
+		};
+	}
+	return [[
+		/^animate-in$/,
+		() => [`keyframes-${ENTER_ANIMATION_NAME}`, {
+			"animation-name": ENTER_ANIMATION_NAME,
+			...getSharedAnimationProperties(),
+			[`${CSS_VARIABLE_PREFIX}-enter-opacity`]: "initial",
+			[`${CSS_VARIABLE_PREFIX}-enter-scale`]: "initial",
+			[`${CSS_VARIABLE_PREFIX}-enter-rotate`]: "initial",
+			[`${CSS_VARIABLE_PREFIX}-enter-translate-x`]: "initial",
+			[`${CSS_VARIABLE_PREFIX}-enter-translate-y`]: "initial"
+		}],
+		{ autocomplete: "animate-in" }
+	], [
+		/^animate-out$/,
+		() => [`keyframes-${EXIT_ANIMATION_NAME}`, {
+			"animation-name": EXIT_ANIMATION_NAME,
+			...getSharedAnimationProperties(),
+			[`${CSS_VARIABLE_PREFIX}-exit-opacity`]: "initial",
+			[`${CSS_VARIABLE_PREFIX}-exit-scale`]: "initial",
+			[`${CSS_VARIABLE_PREFIX}-exit-rotate`]: "initial",
+			[`${CSS_VARIABLE_PREFIX}-exit-translate-x`]: "initial",
+			[`${CSS_VARIABLE_PREFIX}-exit-translate-y`]: "initial"
+		}],
+		{ autocomplete: "animate-out" }
+	]];
+}
+
+//#endregion
+//#region src/presets/animation/animation.theme.ts
+const animationTheme = { keyframes: {
+	[ENTER_ANIMATION_NAME]: `{from{opacity:var(${CSS_VARIABLE_PREFIX}-enter-opacity,1);transform:translate3d(var(${CSS_VARIABLE_PREFIX}-enter-translate-x,0),var(${CSS_VARIABLE_PREFIX}-enter-translate-y,0),0) scale3d(var(${CSS_VARIABLE_PREFIX}-enter-scale,1),var(${CSS_VARIABLE_PREFIX}-enter-scale,1),var(${CSS_VARIABLE_PREFIX}-enter-scale,1)) rotate(var(${CSS_VARIABLE_PREFIX}-enter-rotate,0))}}`,
+	[EXIT_ANIMATION_NAME]: `{to{opacity:var(${CSS_VARIABLE_PREFIX}-exit-opacity,1);transform:translate3d(var(${CSS_VARIABLE_PREFIX}-exit-translate-x,0),var(${CSS_VARIABLE_PREFIX}-exit-translate-y,0),0) scale3d(var(${CSS_VARIABLE_PREFIX}-exit-scale,1),var(${CSS_VARIABLE_PREFIX}-exit-scale,1),var(${CSS_VARIABLE_PREFIX}-exit-scale,1)) rotate(var(${CSS_VARIABLE_PREFIX}-exit-rotate,0))}}`
+} };
+
+//#endregion
+//#region src/presets/animation/index.ts
+function presetAnimation(options) {
+	return {
+		name: "unocss-preset-animation",
+		theme: { animation: animationTheme },
+		shortcuts: [...animationShortcuts(options)],
+		rules: [...animationRules]
+	};
+}
+
+//#endregion
+export { presetAnimation };

package/dist/fluid-7LHAeN3X.js

@@ -0,0 +1,344 @@
+//#region src/presets/fluid/utils/regex.util.ts
+const REGEX_PATTERNS_NUMERIC_VALUES = "(?:--)?(-?\\d+)?(?:--)?(-?\\d+)?$";
+const REGEX_PATTERNS_RANGE_VALUES = "(?:--)?(-?\\d+)?(?:-([a-zA-Z0-9]+))?$";
+function extractValuesFromRegexMatch(match) {
+	const [utility, matchMin, matchMax, , predefinedRangeName] = match;
+	return {
+		utility,
+		matchMin,
+		matchMax,
+		predefinedRangeName
+	};
+}
+
+//#endregion
+//#region src/presets/fluid/utils/parser.util.ts
+function invertAndParseNumber(value) {
+	if (!value) return 0;
+	if (value.includes("-")) return Number.parseInt(value.replace("-", ""));
+	return -Number.parseInt(value);
+}
+
+//#endregion
+//#region src/presets/fluid/utils/validation.util.ts
+function validateUtilityRange({ range, utility, config }) {
+	if (!config.ranges) throw new Error(`[unocss-vinicunca fluid] (${utility}) Trying to use predefined range ${range} but no ranges are defined.`);
+	if (!config.ranges[range]) throw new Error(`[unocss-vinicunca fluid] (${utility}) Trying to use predefined range ${range} but it is not defined in ranges.`);
+	return true;
+}
+function validateUtilityName({ match, config }) {
+	const { utility, matchMin, matchMax, predefinedRangeName } = extractValuesFromRegexMatch(match);
+	if (!predefinedRangeName && matchMin && matchMax) return true;
+	try {
+		validateUtilityRange({
+			range: predefinedRangeName,
+			utility,
+			config
+		});
+	} catch (error) {
+		console.warn(error.message);
+		return false;
+	}
+	return true;
+}
+
+//#endregion
+//#region src/presets/fluid/utils/rem.util.ts
+function getRemMaxWidth(config) {
+	const maxWidth = config.extendMaxWidth || config.maxWidth;
+	if (config.useRemByDefault) return maxWidth;
+	else return maxWidth / config.remBase;
+}
+function getRemMinWidth(config) {
+	const minWidth = config.extendMinWidth || config.minWidth;
+	if (config.useRemByDefault) return minWidth;
+	else return minWidth / config.remBase;
+}
+function toRem(value, config) {
+	if (config.useRemByDefault) return value;
+	else return value / config.remBase;
+}
+/**
+* Calculates the relative size based on the original viewport size and the new viewport size.
+* This allows you to extend the min and max sizes of the fluid layout keeping the proportions.
+* This function is used for the extendMinWidth and extendMaxWidth options.
+* The result of this value is used to calculate the min and max values in rem when the viewport are extended.
+*/
+function calculateRelativeSize({ originalViewPortMin, originalMinSize, originalMaxSize, originalViewPortMax, newViewPortSize }) {
+	const slope = (originalMaxSize - originalMinSize) / (originalViewPortMax - originalViewPortMin);
+	return slope * (newViewPortSize - originalViewPortMin) + originalMinSize;
+}
+/**
+* Returns the min and max values in rem for the given match.
+*/
+function extractRemBoundsFromMatch({ match, config }) {
+	let max, min;
+	const [utility, matchMin, matchMax, , predefinedRangeName] = match;
+	if (predefinedRangeName) {
+		validateUtilityRange({
+			range: predefinedRangeName,
+			utility,
+			config
+		});
+		const [minRange, maxRange] = config.ranges[predefinedRangeName];
+		min = toRem(minRange, config);
+		max = toRem(maxRange, config);
+	} else {
+		min = toRem(invertAndParseNumber(matchMin), config);
+		max = toRem(invertAndParseNumber(matchMax), config);
+	}
+	let relativeMin;
+	let relativeMax;
+	if (config.extendMinWidth) relativeMin = calculateRelativeSize({
+		originalViewPortMin: config.minWidth,
+		originalMinSize: min,
+		originalMaxSize: max,
+		originalViewPortMax: config.maxWidth,
+		newViewPortSize: config.extendMinWidth
+	});
+	if (config.extendMaxWidth) relativeMax = calculateRelativeSize({
+		originalViewPortMin: config.minWidth,
+		originalMinSize: min,
+		originalMaxSize: max,
+		originalViewPortMax: config.maxWidth,
+		newViewPortSize: config.extendMinWidth
+	});
+	return {
+		min: relativeMin ?? min,
+		max: relativeMax ?? max
+	};
+}
+
+//#endregion
+//#region src/presets/fluid/utils/clamp.util.ts
+/**
+* Calculates the slope value for fluid.
+*
+* @param options - GetSlopeParams.
+* @param options.min - The minimum value in the fluid range.
+* @param options.max - The maximum value in the fluid range.
+* @param options.config - Configuration object for additional settings.
+*
+* @returns The calculated slope value.
+*/
+function getSlope({ min, max, config }) {
+	const remMaxWidth = getRemMaxWidth(config);
+	const remMinWidth = getRemMinWidth(config);
+	return (max - min) / (remMaxWidth - remMinWidth);
+}
+/**
+* Calculates the intersection point for the fluid formula.
+*
+* @param options - GetIntersectionParams.
+* @param options.min - The minimum value in the fluid range.
+* @param options.slope - The slope value calculated for the fluid.
+* @param options.minWidth - The minimum viewport width.
+*
+* @returns The calculated intersection point.
+*/
+function getIntersection({ min, slope, minWidth }) {
+	return -minWidth * slope + min;
+}
+/**
+* Calculates the slope percentage for the CSS 'clamp' function.
+*
+* @param options - GetSlopePercentageParams.
+* @param options.min - The minimum value in the fluid range.
+* @param options.max - The maximum value in the fluid range.
+* @param options.config - Configuration object.
+*
+* @returns The slope value as a percentage for use in the 'clamp' function.
+*/
+function getSlopePercentage({ min, max, config }) {
+	const slope = getSlope({
+		min,
+		max,
+		config
+	});
+	return slope * 100;
+}
+/**
+* Generates a CSS 'clamp' function value for fluid.
+*
+* @param options - GetClampParams.
+* @param options.min - The minimum value in the fluid range.
+* @param options.max - The maximum value in the fluid range.
+* @param options.config - Configuration object.
+*
+* @returns A string representing the CSS 'clamp' function.
+*/
+function getClamp({ min, max, config }) {
+	const slope = getSlope({
+		min,
+		max,
+		config
+	});
+	const intersection = getIntersection({
+		min,
+		slope,
+		minWidth: getRemMinWidth(config)
+	});
+	const slopePercentage = getSlopePercentage({
+		min,
+		max,
+		config
+	});
+	const clampMin = Math.min(min, max);
+	const clampMax = Math.max(min, max);
+	return `clamp(${clampMin}rem, ${intersection.toFixed(4)}rem + ${slopePercentage.toFixed(4)}vw, ${clampMax}rem)`;
+}
+/**
+* Generates a comment with the fluid values for the clamp CSS.
+*
+* @param options - GetClampCommentParams.
+* @param options.match - The match array from the regex.
+* @param options.config - Configuration object.
+*
+* @returns A string representing the comment for the 'clamp' function with fluid real values.
+*/
+function getClampComment({ match, config }) {
+	if (!config.commentHelpers) return "";
+	const { predefinedRangeName, matchMin, matchMax } = extractValuesFromRegexMatch(match);
+	const predefinedRange = config.ranges && config.ranges[predefinedRangeName];
+	const isRem = config.useRemByDefault;
+	const min = predefinedRange ? predefinedRange[0] : -Number.parseInt(matchMin);
+	const max = predefinedRange ? predefinedRange[1] : -Number.parseInt(matchMax);
+	const unit = isRem ? "rem" : "px";
+	return `/* ${min}${unit} -> ${max}${unit} */`;
+}
+
+//#endregion
+//#region src/presets/fluid/utils/constant.util.ts
+const FLUID_UTILITIES = {
+	"fluid-text": "font-size",
+	"fluid-w": "width",
+	"fluid-min-w": "min-width",
+	"fluid-max-w": "max-width",
+	"fluid-h": "height",
+	"fluid-min-h": "min-height",
+	"fluid-max-h": "max-height",
+	"fluid-p": "padding",
+	"fluid-pt": "padding-top",
+	"fluid-pb": "padding-bottom",
+	"fluid-pl": "padding-left",
+	"fluid-pr": "padding-right",
+	"fluid-px": ["padding-left", "padding-right"],
+	"fluid-py": ["padding-top", "padding-bottom"],
+	"fluid-m": "margin",
+	"fluid-mt": "margin-top",
+	"fluid-mb": "margin-bottom",
+	"fluid-ml": "margin-left",
+	"fluid-mr": "margin-right",
+	"fluid-mx": ["margin-left", "margin-right"],
+	"fluid-my": ["margin-top", "margin-bottom"],
+	"fluid-gap": "gap",
+	"fluid-gap-x": "column-gap",
+	"fluid-gap-y": "row-gap",
+	"fluid-indent": "text-indent",
+	"fluid-scroll-m": "scroll-margin",
+	"fluid-scroll-mt": "scroll-margin-top",
+	"fluid-scroll-mb": "scroll-margin-bottom",
+	"fluid-scroll-ml": "scroll-margin-left",
+	"fluid-scroll-mr": "scroll-margin-right",
+	"fluid-scroll-mx": ["scroll-margin-left", "scroll-margin-right"],
+	"fluid-scroll-my": ["scroll-margin-top", "scroll-margin-bottom"],
+	"fluid-scroll-ms": "scroll-margin-inline-start",
+	"fluid-scroll-me": "scroll-margin-inline-end",
+	"fluid-scroll-p": "scroll-padding",
+	"fluid-scroll-pt": "scroll-padding-top",
+	"fluid-scroll-pb": "scroll-padding-bottom",
+	"fluid-scroll-pl": "scroll-padding-left",
+	"fluid-scroll-pr": "scroll-padding-right",
+	"fluid-scroll-px": ["scroll-padding-left", "scroll-padding-right"],
+	"fluid-scroll-py": ["scroll-padding-top", "scroll-padding-bottom"],
+	"fluid-scroll-ps": "scroll-padding-inline-start",
+	"fluid-scroll-pe": "scroll-padding-inline-end",
+	"fluid-leading": "line-height",
+	"fluid-top": "top",
+	"fluid-right": "right",
+	"fluid-bottom": "bottom",
+	"fluid-left": "left",
+	"fluid-inset": "inset",
+	"fluid-inset-x": ["left", "right"],
+	"fluid-inset-y": ["top", "bottom"]
+};
+
+//#endregion
+//#region src/presets/fluid/utils/rule.util.ts
+function buildSinglePropertyRule({ match, config, property }) {
+	if (!validateUtilityName({
+		match,
+		config
+	})) return "";
+	const { min, max } = extractRemBoundsFromMatch({
+		match,
+		config
+	});
+	return { [`${property}`]: getClamp({
+		min,
+		max,
+		config
+	}) + getClampComment({
+		match,
+		config
+	}) };
+}
+function buildMultiplePropertiesRule({ match, config, properties }) {
+	if (!validateUtilityName({
+		match,
+		config
+	}) || !Array.isArray(properties)) return "";
+	const { min, max } = extractRemBoundsFromMatch({
+		match,
+		config
+	});
+	const selectors = {};
+	properties.forEach((property) => {
+		selectors[property] = getClamp({
+			min,
+			max,
+			config
+		}) + getClampComment({
+			match,
+			config
+		});
+	});
+	return { ...selectors };
+}
+function buildRule({ name, properties, config }) {
+	const regexPattersNumericValues = `^${name}${REGEX_PATTERNS_NUMERIC_VALUES}`;
+	const regexPattersRangeValues = `^${name}${REGEX_PATTERNS_RANGE_VALUES}`;
+	const regexPattern = `${regexPattersNumericValues}|${regexPattersRangeValues}`;
+	const regex = new RegExp(regexPattern);
+	if (Array.isArray(properties)) return [[regex, (match) => buildMultiplePropertiesRule({
+		match,
+		config,
+		properties
+	})]];
+	else return [[regex, (match) => buildSinglePropertyRule({
+		match,
+		config,
+		property: properties
+	})]];
+}
+function buildFluidRules(config) {
+	return Object.entries(FLUID_UTILITIES).flatMap(([name, property]) => {
+		return buildRule({
+			name,
+			properties: property,
+			config
+		});
+	});
+}
+
+//#endregion
+//#region src/presets/fluid/index.ts
+function presetFluid(options) {
+	return {
+		name: "unocss-preset-fluid",
+		rules: [...buildFluidRules(options)]
+	};
+}
+
+//#endregion
+export { presetFluid };