@tenphi/tasty 0.0.0-snapshot.d2dcdeb → 0.0.0-snapshot.d4ccea8

package/dist/styles/createStyle.js

@@ -1,79 +0,0 @@
-import { getColorSpaceComponents, getColorSpaceSuffix, strToColorSpace } from "../utils/color-space.js";
-import { normalizeColorTokenValue, parseColor, parseStyle } from "../utils/styles.js";
-import { toSnakeCase } from "../utils/string.js";
-//#region src/styles/createStyle.ts
-const CACHE = {};
-/**
-* Convert color fallback chain to component fallback chain.
-* Example: var(--primary-color, var(--secondary-color))
-*   → var(--primary-color-oklch, var(--secondary-color-oklch))
-*/
-function convertColorChainToComponentChain(colorValue) {
-	const suffix = getColorSpaceSuffix();
-	const componentVarMatch = colorValue.match(/^(?:rgb|hsl|oklch)a?\(\s*(var\(--[a-z0-9-]+-color-(?:rgb|hsl|oklch)\))\s*\//);
-	if (componentVarMatch) return componentVarMatch[1];
-	const match = colorValue.match(/var\(--([a-z0-9-]+)-color\s*(?:,\s*(.+))?\)/);
-	if (!match) {
-		const components = getColorSpaceComponents(colorValue);
-		if (components !== colorValue) return components;
-		return colorValue;
-	}
-	const [, name, fallback] = match;
-	if (!fallback) return `var(--${name}-color-${suffix})`;
-	return `var(--${name}-color-${suffix}, ${convertColorChainToComponentChain(fallback.trim())})`;
-}
-function createStyle(styleName, cssStyle, converter) {
-	const key = `${styleName}.${cssStyle ?? ""}`;
-	if (!CACHE[key]) {
-		const styleHandler = (styleMap) => {
-			let styleValue = styleMap[styleName];
-			if (styleValue == null || styleValue === false) return null;
-			let finalCssStyle;
-			const isColorToken = !cssStyle && typeof styleName === "string" && styleName.startsWith("#");
-			if (isColorToken) finalCssStyle = `--${toSnakeCase(styleName.slice(1)).replace(/^-+/, "")}-color`;
-			else finalCssStyle = cssStyle || toSnakeCase(styleName).replace(/^\$/, "--");
-			if (isColorToken) {
-				const normalized = normalizeColorTokenValue(styleValue);
-				if (normalized === null) return null;
-				styleValue = normalized;
-			}
-			if (converter && typeof styleValue !== "string") {
-				styleValue = converter(styleValue);
-				if (!styleValue) return null;
-			}
-			if (typeof styleValue === "string" && finalCssStyle.startsWith("--") && finalCssStyle.endsWith("-color")) {
-				styleValue = styleValue.trim();
-				const suffix = getColorSpaceSuffix();
-				const colorSpaceStr = strToColorSpace(styleValue);
-				const { color, name } = parseColor(styleValue);
-				if (name && colorSpaceStr) return {
-					[finalCssStyle]: `var(--${name}-color, ${colorSpaceStr})`,
-					[`${finalCssStyle}-${suffix}`]: `var(--${name}-color-${suffix}, ${getColorSpaceComponents(colorSpaceStr)})`
-				};
-				else if (name) {
-					if (color) return {
-						[finalCssStyle]: color,
-						[`${finalCssStyle}-${suffix}`]: convertColorChainToComponentChain(color)
-					};
-					return {
-						[finalCssStyle]: `var(--${name}-color)`,
-						[`${finalCssStyle}-${suffix}`]: `var(--${name}-color-${suffix})`
-					};
-				} else if (colorSpaceStr) return {
-					[finalCssStyle]: colorSpaceStr,
-					[`${finalCssStyle}-${suffix}`]: getColorSpaceComponents(colorSpaceStr)
-				};
-				return { [finalCssStyle]: color ?? "" };
-			}
-			const processed = parseStyle(styleValue);
-			return { [finalCssStyle]: processed.output };
-		};
-		styleHandler.__lookupStyles = [styleName];
-		CACHE[key] = styleHandler;
-	}
-	return CACHE[key];
-}
-//#endregion
-export { convertColorChainToComponentChain, createStyle };
-
-//# sourceMappingURL=createStyle.js.map

package/dist/styles/createStyle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"createStyle.js","names":[],"sources":["../../src/styles/createStyle.ts"],"sourcesContent":["import {\n  getColorSpaceComponents,\n  getColorSpaceSuffix,\n  strToColorSpace,\n} from '../utils/color-space';\nimport { toSnakeCase } from '../utils/string';\nimport {\n  normalizeColorTokenValue,\n  parseColor,\n  parseStyle,\n} from '../utils/styles';\nimport type {\n  CSSMap,\n  StyleHandler,\n  StyleValue,\n  StyleValueStateMap,\n} from '../utils/styles';\n\nconst CACHE: Record<string, StyleHandler> = {};\n\n/**\n * Convert color fallback chain to component fallback chain.\n * Example: var(--primary-color, var(--secondary-color))\n *   → var(--primary-color-oklch, var(--secondary-color-oklch))\n */\nexport function convertColorChainToComponentChain(colorValue: string): string {\n  const suffix = getColorSpaceSuffix();\n\n  // Handle func(var(--name-color-{suffix}) / alpha) pattern.\n  // When #name.opacity is parsed, the classifier produces e.g.\n  // oklch(var(--name-color-oklch) / .opacity).\n  // The component chain should be just the inner var() reference.\n  const componentVarMatch = colorValue.match(\n    /^(?:rgb|hsl|oklch)a?\\(\\s*(var\\(--[a-z0-9-]+-color-(?:rgb|hsl|oklch)\\))\\s*\\//,\n  );\n  if (componentVarMatch) {\n    return componentVarMatch[1];\n  }\n\n  // Match var(--name-color, ...) pattern\n  const varPattern = /var\\(--([a-z0-9-]+)-color\\s*(?:,\\s*(.+))?\\)/;\n  const match = colorValue.match(varPattern);\n\n  if (!match) {\n    // Not a color variable — try to convert to components\n    const components = getColorSpaceComponents(colorValue);\n    if (components !== colorValue) return components;\n    return colorValue;\n  }\n\n  const [, name, fallback] = match;\n\n  if (!fallback) {\n    return `var(--${name}-color-${suffix})`;\n  }\n\n  const processedFallback = convertColorChainToComponentChain(fallback.trim());\n  return `var(--${name}-color-${suffix}, ${processedFallback})`;\n}\n\nexport function createStyle(\n  styleName: string,\n  cssStyle?: string,\n  converter?: (styleValue: string | number | true) => string | undefined,\n) {\n  const key = `${styleName}.${cssStyle ?? ''}`;\n\n  if (!CACHE[key]) {\n    const styleHandler = (styleMap: StyleValueStateMap): CSSMap | null => {\n      let styleValue = styleMap[styleName];\n\n      if (styleValue == null || styleValue === false) return null;\n\n      let finalCssStyle: string;\n      const isColorToken =\n        !cssStyle && typeof styleName === 'string' && styleName.startsWith('#');\n\n      if (isColorToken) {\n        const raw = styleName.slice(1);\n        const name = toSnakeCase(raw).replace(/^-+/, '');\n        finalCssStyle = `--${name}-color`;\n      } else {\n        finalCssStyle = cssStyle || toSnakeCase(styleName).replace(/^\\$/, '--');\n      }\n\n      if (isColorToken) {\n        const normalized = normalizeColorTokenValue(styleValue);\n        if (normalized === null) return null;\n        styleValue = normalized;\n      }\n\n      if (converter && typeof styleValue !== 'string') {\n        styleValue = converter(styleValue as string | number | true);\n\n        if (!styleValue) return null;\n      }\n\n      if (\n        typeof styleValue === 'string' &&\n        finalCssStyle.startsWith('--') &&\n        finalCssStyle.endsWith('-color')\n      ) {\n        styleValue = styleValue.trim();\n        const suffix = getColorSpaceSuffix();\n\n        const colorSpaceStr = strToColorSpace(styleValue as string);\n\n        const { color, name } = parseColor(styleValue as string);\n\n        if (name && colorSpaceStr) {\n          return {\n            [finalCssStyle]: `var(--${name}-color, ${colorSpaceStr})`,\n            [`${finalCssStyle}-${suffix}`]: `var(--${name}-color-${suffix}, ${getColorSpaceComponents(\n              colorSpaceStr,\n            )})`,\n          };\n        } else if (name) {\n          if (color) {\n            return {\n              [finalCssStyle]: color,\n              [`${finalCssStyle}-${suffix}`]:\n                convertColorChainToComponentChain(color),\n            };\n          }\n\n          return {\n            [finalCssStyle]: `var(--${name}-color)`,\n            [`${finalCssStyle}-${suffix}`]: `var(--${name}-color-${suffix})`,\n          };\n        } else if (colorSpaceStr) {\n          return {\n            [finalCssStyle]: colorSpaceStr,\n            [`${finalCssStyle}-${suffix}`]:\n              getColorSpaceComponents(colorSpaceStr),\n          };\n        }\n\n        return {\n          [finalCssStyle]: color ?? '',\n        };\n      }\n\n      const processed = parseStyle(styleValue as StyleValue);\n      return { [finalCssStyle]: processed.output };\n    };\n\n    styleHandler.__lookupStyles = [styleName];\n\n    CACHE[key] = styleHandler;\n  }\n\n  return CACHE[key];\n}\n"],"mappings":";;;;AAkBA,MAAM,QAAsC,EAAE;;;;;;AAO9C,SAAgB,kCAAkC,YAA4B;CAC5E,MAAM,SAAS,qBAAqB;CAMpC,MAAM,oBAAoB,WAAW,MACnC,8EACD;AACD,KAAI,kBACF,QAAO,kBAAkB;CAK3B,MAAM,QAAQ,WAAW,MADN,8CACuB;AAE1C,KAAI,CAAC,OAAO;EAEV,MAAM,aAAa,wBAAwB,WAAW;AACtD,MAAI,eAAe,WAAY,QAAO;AACtC,SAAO;;CAGT,MAAM,GAAG,MAAM,YAAY;AAE3B,KAAI,CAAC,SACH,QAAO,SAAS,KAAK,SAAS,OAAO;AAIvC,QAAO,SAAS,KAAK,SAAS,OAAO,IADX,kCAAkC,SAAS,MAAM,CAAC,CACjB;;AAG7D,SAAgB,YACd,WACA,UACA,WACA;CACA,MAAM,MAAM,GAAG,UAAU,GAAG,YAAY;AAExC,KAAI,CAAC,MAAM,MAAM;EACf,MAAM,gBAAgB,aAAgD;GACpE,IAAI,aAAa,SAAS;AAE1B,OAAI,cAAc,QAAQ,eAAe,MAAO,QAAO;GAEvD,IAAI;GACJ,MAAM,eACJ,CAAC,YAAY,OAAO,cAAc,YAAY,UAAU,WAAW,IAAI;AAEzE,OAAI,aAGF,iBAAgB,KADH,YADD,UAAU,MAAM,EAAE,CACD,CAAC,QAAQ,OAAO,GAAG,CACtB;OAE1B,iBAAgB,YAAY,YAAY,UAAU,CAAC,QAAQ,OAAO,KAAK;AAGzE,OAAI,cAAc;IAChB,MAAM,aAAa,yBAAyB,WAAW;AACvD,QAAI,eAAe,KAAM,QAAO;AAChC,iBAAa;;AAGf,OAAI,aAAa,OAAO,eAAe,UAAU;AAC/C,iBAAa,UAAU,WAAqC;AAE5D,QAAI,CAAC,WAAY,QAAO;;AAG1B,OACE,OAAO,eAAe,YACtB,cAAc,WAAW,KAAK,IAC9B,cAAc,SAAS,SAAS,EAChC;AACA,iBAAa,WAAW,MAAM;IAC9B,MAAM,SAAS,qBAAqB;IAEpC,MAAM,gBAAgB,gBAAgB,WAAqB;IAE3D,MAAM,EAAE,OAAO,SAAS,WAAW,WAAqB;AAExD,QAAI,QAAQ,cACV,QAAO;MACJ,gBAAgB,SAAS,KAAK,UAAU,cAAc;MACtD,GAAG,cAAc,GAAG,WAAW,SAAS,KAAK,SAAS,OAAO,IAAI,wBAChE,cACD,CAAC;KACH;aACQ,MAAM;AACf,SAAI,MACF,QAAO;OACJ,gBAAgB;OAChB,GAAG,cAAc,GAAG,WACnB,kCAAkC,MAAM;MAC3C;AAGH,YAAO;OACJ,gBAAgB,SAAS,KAAK;OAC9B,GAAG,cAAc,GAAG,WAAW,SAAS,KAAK,SAAS,OAAO;MAC/D;eACQ,cACT,QAAO;MACJ,gBAAgB;MAChB,GAAG,cAAc,GAAG,WACnB,wBAAwB,cAAc;KACzC;AAGH,WAAO,GACJ,gBAAgB,SAAS,IAC3B;;GAGH,MAAM,YAAY,WAAW,WAAyB;AACtD,UAAO,GAAG,gBAAgB,UAAU,QAAQ;;AAG9C,eAAa,iBAAiB,CAAC,UAAU;AAEzC,QAAM,OAAO;;AAGf,QAAO,MAAM"}

package/dist/styles/dimension.js

@@ -1,109 +0,0 @@
-import { CSS_WIDE_KEYWORDS } from "../parser/const.js";
-import { makeEmptyDetails } from "../parser/types.js";
-import { parseStyle } from "../utils/styles.js";
-//#region src/styles/dimension.ts
-const DEFAULT_MIN_SIZE = "var(--gap)";
-const DEFAULT_MAX_SIZE = "100%";
-/**
-* Parse a dimension value (string, number, or boolean) into a CSS value
-*/
-function parseDimensionValue(val) {
-	if (val == null) return null;
-	if (typeof val === "number") return `${val}px`;
-	if (val === true) return "initial";
-	return parseStyle(String(val)).groups[0]?.values[0] || null;
-}
-/**
-* Creates a dimension style handler for width or height.
-*
-* Supports:
-* - Main dimension prop (width/height) with syntax for min/max
-* - Separate min/max props (minWidth/maxWidth or minHeight/maxHeight)
-*
-* Priority: Individual min/max props override values from main prop syntax
-*/
-function dimensionStyle(name) {
-	const minStyle = `min-${name}`;
-	const maxStyle = `max-${name}`;
-	return ({ value, min, max }) => {
-		if (value == null && min == null && max == null) return null;
-		if (value != null && typeof value === "string" && CSS_WIDE_KEYWORDS.has(value)) {
-			const styles = {
-				[name]: value,
-				[minStyle]: value,
-				[maxStyle]: value
-			};
-			const minVal = parseDimensionValue(min);
-			const maxVal = parseDimensionValue(max);
-			if (minVal) styles[minStyle] = minVal;
-			if (maxVal) styles[maxStyle] = maxVal;
-			return styles;
-		}
-		if (value === true) {
-			const styles = {
-				[name]: "auto",
-				[minStyle]: "initial",
-				[maxStyle]: "initial"
-			};
-			const minVal = parseDimensionValue(min);
-			const maxVal = parseDimensionValue(max);
-			if (minVal) styles[minStyle] = minVal;
-			if (maxVal) styles[maxStyle] = maxVal;
-			return styles;
-		}
-		const styles = {
-			[name]: "auto",
-			[minStyle]: "initial",
-			[maxStyle]: "initial"
-		};
-		if (value != null) {
-			let val = value;
-			if (typeof val === "number") val = `${val}px`;
-			val = String(val);
-			const { mods, values } = parseStyle(val).groups[0] ?? makeEmptyDetails();
-			let flag = false;
-			for (const mod of mods) switch (mod) {
-				case "min":
-					styles[minStyle] = values[0] || DEFAULT_MIN_SIZE;
-					flag = true;
-					break;
-				case "max":
-					styles[maxStyle] = values[0] || DEFAULT_MAX_SIZE;
-					flag = true;
-					break;
-				case "fixed": {
-					const fixedValue = values[0] || "max-content";
-					styles[minStyle] = fixedValue;
-					styles[name] = fixedValue;
-					styles[maxStyle] = fixedValue;
-					flag = true;
-					break;
-				}
-				default: break;
-			}
-			if (!flag || !mods.length) if (values.length === 2) {
-				styles[minStyle] = values[0];
-				styles[maxStyle] = values[1];
-			} else if (values.length === 3) {
-				styles[minStyle] = values[0];
-				styles[name] = values[1];
-				styles[maxStyle] = values[2];
-			} else styles[name] = values[0] || "auto";
-			if (styles[name] === "stretch") if (name === "width") styles[name] = [
-				"stretch",
-				"-webkit-fill-available",
-				"-moz-available"
-			];
-			else styles[name] = "auto";
-		}
-		const minVal = parseDimensionValue(min);
-		const maxVal = parseDimensionValue(max);
-		if (minVal) styles[minStyle] = minVal;
-		if (maxVal) styles[maxStyle] = maxVal;
-		return styles;
-	};
-}
-//#endregion
-export { dimensionStyle };
-
-//# sourceMappingURL=dimension.js.map

package/dist/styles/dimension.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dimension.js","names":[],"sources":["../../src/styles/dimension.ts"],"sourcesContent":["import { CSS_WIDE_KEYWORDS } from '../parser/const';\nimport { makeEmptyDetails } from '../parser/types';\nimport { parseStyle } from '../utils/styles';\n\nconst DEFAULT_MIN_SIZE = 'var(--gap)';\nconst DEFAULT_MAX_SIZE = '100%';\n\n/**\n * Parse a dimension value (string, number, or boolean) into a CSS value\n */\nfunction parseDimensionValue(\n  val: string | number | boolean | undefined,\n): string | null {\n  if (val == null) return null;\n  if (typeof val === 'number') return `${val}px`;\n  if (val === true) return 'initial';\n\n  const processed = parseStyle(String(val));\n  return processed.groups[0]?.values[0] || null;\n}\n\ninterface DimensionProps {\n  value?: string | number | boolean;\n  min?: string | number | boolean;\n  max?: string | number | boolean;\n}\n\n/**\n * Creates a dimension style handler for width or height.\n *\n * Supports:\n * - Main dimension prop (width/height) with syntax for min/max\n * - Separate min/max props (minWidth/maxWidth or minHeight/maxHeight)\n *\n * Priority: Individual min/max props override values from main prop syntax\n */\nexport function dimensionStyle(name: 'width' | 'height') {\n  const minStyle = `min-${name}`;\n  const maxStyle = `max-${name}`;\n\n  return ({ value, min, max }: DimensionProps) => {\n    if (value == null && min == null && max == null) return null;\n\n    if (\n      value != null &&\n      typeof value === 'string' &&\n      CSS_WIDE_KEYWORDS.has(value)\n    ) {\n      const styles: Record<string, string> = {\n        [name]: value,\n        [minStyle]: value,\n        [maxStyle]: value,\n      };\n\n      const minVal = parseDimensionValue(min);\n      const maxVal = parseDimensionValue(max);\n      if (minVal) styles[minStyle] = minVal;\n      if (maxVal) styles[maxStyle] = maxVal;\n\n      return styles;\n    }\n\n    if (value === true) {\n      const styles: Record<string, string | string[]> = {\n        [name]: 'auto',\n        [minStyle]: 'initial',\n        [maxStyle]: 'initial',\n      };\n\n      // Apply individual min/max overrides\n      const minVal = parseDimensionValue(min);\n      const maxVal = parseDimensionValue(max);\n      if (minVal) styles[minStyle] = minVal;\n      if (maxVal) styles[maxStyle] = maxVal;\n\n      return styles;\n    }\n\n    const styles: Record<string, string | string[]> = {\n      [name]: 'auto',\n      [minStyle]: 'initial',\n      [maxStyle]: 'initial',\n    };\n\n    // Process main dimension value\n    if (value != null) {\n      let val = value;\n      if (typeof val === 'number') {\n        val = `${val}px`;\n      }\n\n      val = String(val);\n\n      const processed = parseStyle(val);\n      const { mods, values } = processed.groups[0] ?? makeEmptyDetails();\n\n      let flag = false;\n\n      for (const mod of mods) {\n        switch (mod) {\n          case 'min':\n            styles[minStyle] = values[0] || DEFAULT_MIN_SIZE;\n            flag = true;\n            break;\n          case 'max':\n            styles[maxStyle] = values[0] || DEFAULT_MAX_SIZE;\n            flag = true;\n            break;\n          case 'fixed': {\n            // Fixed modifier: set all three dimensions to the same value\n            const fixedValue = values[0] || 'max-content';\n            styles[minStyle] = fixedValue;\n            styles[name] = fixedValue;\n            styles[maxStyle] = fixedValue;\n            flag = true;\n            break;\n          }\n          default:\n            break;\n        }\n      }\n\n      if (!flag || !mods.length) {\n        if (values.length === 2) {\n          styles[minStyle] = values[0];\n          styles[maxStyle] = values[1];\n        } else if (values.length === 3) {\n          styles[minStyle] = values[0];\n          styles[name] = values[1];\n          styles[maxStyle] = values[2];\n        } else {\n          styles[name] = values[0] || 'auto';\n        }\n      }\n\n      if (styles[name] === 'stretch') {\n        if (name === 'width') {\n          styles[name] = [\n            'stretch',\n            '-webkit-fill-available',\n            '-moz-available',\n          ];\n        } else {\n          styles[name] = 'auto';\n        }\n      }\n    }\n\n    // Apply individual min/max props (higher priority, override main prop syntax)\n    const minVal = parseDimensionValue(min);\n    const maxVal = parseDimensionValue(max);\n    if (minVal) styles[minStyle] = minVal;\n    if (maxVal) styles[maxStyle] = maxVal;\n\n    return styles;\n  };\n}\n"],"mappings":";;;;AAIA,MAAM,mBAAmB;AACzB,MAAM,mBAAmB;;;;AAKzB,SAAS,oBACP,KACe;AACf,KAAI,OAAO,KAAM,QAAO;AACxB,KAAI,OAAO,QAAQ,SAAU,QAAO,GAAG,IAAI;AAC3C,KAAI,QAAQ,KAAM,QAAO;AAGzB,QADkB,WAAW,OAAO,IAAI,CAAC,CACxB,OAAO,IAAI,OAAO,MAAM;;;;;;;;;;;AAkB3C,SAAgB,eAAe,MAA0B;CACvD,MAAM,WAAW,OAAO;CACxB,MAAM,WAAW,OAAO;AAExB,SAAQ,EAAE,OAAO,KAAK,UAA0B;AAC9C,MAAI,SAAS,QAAQ,OAAO,QAAQ,OAAO,KAAM,QAAO;AAExD,MACE,SAAS,QACT,OAAO,UAAU,YACjB,kBAAkB,IAAI,MAAM,EAC5B;GACA,MAAM,SAAiC;KACpC,OAAO;KACP,WAAW;KACX,WAAW;IACb;GAED,MAAM,SAAS,oBAAoB,IAAI;GACvC,MAAM,SAAS,oBAAoB,IAAI;AACvC,OAAI,OAAQ,QAAO,YAAY;AAC/B,OAAI,OAAQ,QAAO,YAAY;AAE/B,UAAO;;AAGT,MAAI,UAAU,MAAM;GAClB,MAAM,SAA4C;KAC/C,OAAO;KACP,WAAW;KACX,WAAW;IACb;GAGD,MAAM,SAAS,oBAAoB,IAAI;GACvC,MAAM,SAAS,oBAAoB,IAAI;AACvC,OAAI,OAAQ,QAAO,YAAY;AAC/B,OAAI,OAAQ,QAAO,YAAY;AAE/B,UAAO;;EAGT,MAAM,SAA4C;IAC/C,OAAO;IACP,WAAW;IACX,WAAW;GACb;AAGD,MAAI,SAAS,MAAM;GACjB,IAAI,MAAM;AACV,OAAI,OAAO,QAAQ,SACjB,OAAM,GAAG,IAAI;AAGf,SAAM,OAAO,IAAI;GAGjB,MAAM,EAAE,MAAM,WADI,WAAW,IAAI,CACE,OAAO,MAAM,kBAAkB;GAElE,IAAI,OAAO;AAEX,QAAK,MAAM,OAAO,KAChB,SAAQ,KAAR;IACE,KAAK;AACH,YAAO,YAAY,OAAO,MAAM;AAChC,YAAO;AACP;IACF,KAAK;AACH,YAAO,YAAY,OAAO,MAAM;AAChC,YAAO;AACP;IACF,KAAK,SAAS;KAEZ,MAAM,aAAa,OAAO,MAAM;AAChC,YAAO,YAAY;AACnB,YAAO,QAAQ;AACf,YAAO,YAAY;AACnB,YAAO;AACP;;IAEF,QACE;;AAIN,OAAI,CAAC,QAAQ,CAAC,KAAK,OACjB,KAAI,OAAO,WAAW,GAAG;AACvB,WAAO,YAAY,OAAO;AAC1B,WAAO,YAAY,OAAO;cACjB,OAAO,WAAW,GAAG;AAC9B,WAAO,YAAY,OAAO;AAC1B,WAAO,QAAQ,OAAO;AACtB,WAAO,YAAY,OAAO;SAE1B,QAAO,QAAQ,OAAO,MAAM;AAIhC,OAAI,OAAO,UAAU,UACnB,KAAI,SAAS,QACX,QAAO,QAAQ;IACb;IACA;IACA;IACD;OAED,QAAO,QAAQ;;EAMrB,MAAM,SAAS,oBAAoB,IAAI;EACvC,MAAM,SAAS,oBAAoB,IAAI;AACvC,MAAI,OAAQ,QAAO,YAAY;AAC/B,MAAI,OAAQ,QAAO,YAAY;AAE/B,SAAO"}

package/dist/styles/directional.js

@@ -1,133 +0,0 @@
-import { CSS_WIDE_KEYWORDS } from "../parser/const.js";
-import { DIRECTIONS, filterMods, parseStyle } from "../utils/styles.js";
-import { extractCSSWideKeyword } from "./shared.js";
-//#region src/styles/directional.ts
-function parseSingleValue(val, defaultValue, trueValue) {
-	if (typeof val === "number") return `${val}px`;
-	if (!val) return null;
-	if (val === true) val = trueValue;
-	const strVal = String(val);
-	if (CSS_WIDE_KEYWORDS.has(strVal)) return strVal;
-	const { values } = parseStyle(strVal).groups[0] ?? { values: [] };
-	return values[0] || defaultValue;
-}
-function extractGroupData(group, defaultValue) {
-	const { values = [], mods = [] } = group;
-	return {
-		values: values.length ? values : [defaultValue],
-		directions: filterMods(mods, DIRECTIONS)
-	};
-}
-function applyGroup(dirs, values, directions) {
-	if (!values.length) return;
-	if (directions.length === 0) {
-		dirs.top = values[0];
-		dirs.right = values[1] || values[0];
-		dirs.bottom = values[2] || values[0];
-		dirs.left = values[3] || values[1] || values[0];
-	} else directions.forEach((dir, i) => {
-		dirs[dir] = values[i] ?? values[0];
-	});
-}
-function optimizeShorthand(property, dirs) {
-	const { top, right, bottom, left } = dirs;
-	if (top === right && right === bottom && bottom === left) return { [property]: top };
-	if (top === bottom && left === right) return { [property]: `${top} ${left}` };
-	return { [property]: `${top} ${right} ${bottom} ${left}` };
-}
-/**
-* Core directional style logic shared by padding, margin, inset, scrollMargin.
-*/
-function processDirectionalStyle(config, props) {
-	const { main, block, inline, top, right, bottom, left } = props;
-	if (main == null && block == null && inline == null && top == null && right == null && bottom == null && left == null) return null;
-	const { property, defaultValue, trueValue, defaultInit, individualOnly, directionProperty } = config;
-	const dirProp = directionProperty ?? ((dir) => `${property}-${dir}`);
-	if (individualOnly) {
-		if (main == null && block == null && inline == null) {
-			const result = {};
-			if (top != null) {
-				const val = parseSingleValue(top, defaultValue, trueValue);
-				if (val) result[dirProp("top")] = val;
-			}
-			if (right != null) {
-				const val = parseSingleValue(right, defaultValue, trueValue);
-				if (val) result[dirProp("right")] = val;
-			}
-			if (bottom != null) {
-				const val = parseSingleValue(bottom, defaultValue, trueValue);
-				if (val) result[dirProp("bottom")] = val;
-			}
-			if (left != null) {
-				const val = parseSingleValue(left, defaultValue, trueValue);
-				if (val) result[dirProp("left")] = val;
-			}
-			return Object.keys(result).length > 0 ? result : null;
-		}
-	}
-	const dirs = {
-		top: defaultInit,
-		right: defaultInit,
-		bottom: defaultInit,
-		left: defaultInit
-	};
-	let useLonghand = false;
-	if (main != null) if (typeof main === "number") dirs.top = dirs.right = dirs.bottom = dirs.left = `${main}px`;
-	else {
-		const strMain = main === true ? trueValue : String(main);
-		if (strMain) {
-			const keyword = CSS_WIDE_KEYWORDS.has(strMain) ? strMain : null;
-			if (keyword) dirs.top = dirs.right = dirs.bottom = dirs.left = keyword;
-			else {
-				const groups = parseStyle(strMain).groups ?? [];
-				for (const group of groups) {
-					if (group.mods.includes("longhand")) useLonghand = true;
-					const kw = extractCSSWideKeyword(group);
-					if (kw) {
-						const groupDirs = filterMods(group.mods, DIRECTIONS);
-						if (groupDirs.length === 0) dirs.top = dirs.right = dirs.bottom = dirs.left = kw;
-						else for (const dir of groupDirs) dirs[dir] = kw;
-					} else {
-						const { values, directions } = extractGroupData(group, defaultValue);
-						applyGroup(dirs, values, directions);
-					}
-				}
-			}
-		}
-	}
-	if (block != null) {
-		const val = parseSingleValue(block, defaultValue, trueValue);
-		if (val) dirs.top = dirs.bottom = val;
-	}
-	if (inline != null) {
-		const val = parseSingleValue(inline, defaultValue, trueValue);
-		if (val) dirs.left = dirs.right = val;
-	}
-	if (top != null) {
-		const val = parseSingleValue(top, defaultValue, trueValue);
-		if (val) dirs.top = val;
-	}
-	if (right != null) {
-		const val = parseSingleValue(right, defaultValue, trueValue);
-		if (val) dirs.right = val;
-	}
-	if (bottom != null) {
-		const val = parseSingleValue(bottom, defaultValue, trueValue);
-		if (val) dirs.bottom = val;
-	}
-	if (left != null) {
-		const val = parseSingleValue(left, defaultValue, trueValue);
-		if (val) dirs.left = val;
-	}
-	if (useLonghand) return {
-		[dirProp("top")]: dirs.top,
-		[dirProp("right")]: dirs.right,
-		[dirProp("bottom")]: dirs.bottom,
-		[dirProp("left")]: dirs.left
-	};
-	return optimizeShorthand(property, dirs);
-}
-//#endregion
-export { processDirectionalStyle };
-
-//# sourceMappingURL=directional.js.map

package/dist/styles/directional.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"directional.js","names":[],"sources":["../../src/styles/directional.ts"],"sourcesContent":["import type { StyleDetails } from '../parser/types';\nimport { CSS_WIDE_KEYWORDS } from '../parser/const';\nimport { DIRECTIONS, filterMods, parseStyle } from '../utils/styles';\nimport { extractCSSWideKeyword } from './shared';\n\ntype Direction = (typeof DIRECTIONS)[number];\n\nexport interface DirectionalConfig {\n  /** CSS property name (e.g. 'padding', 'margin', 'inset', 'scroll-margin') */\n  property: string;\n  /** Default value when parsing yields empty (e.g. 'var(--gap)', '0') */\n  defaultValue: string;\n  /** Value used when the prop is `true` (e.g. '1x', '0') */\n  trueValue: string;\n  /** Default per-direction init value (e.g. '0', 'auto') */\n  defaultInit: string;\n  /**\n   * When true, if only individual direction props are set (no shorthand,\n   * no block/inline), output individual CSS properties instead of the\n   * shorthand. Needed by inset for correct CSS cascade with modifiers.\n   */\n  individualOnly?: boolean;\n  /**\n   * Maps individual direction CSS property names. Defaults to\n   * `${property}-top`, `${property}-right`, etc. For inset this is\n   * `top`, `right`, `bottom`, `left`.\n   */\n  directionProperty?: (dir: Direction) => string;\n}\n\nexport function parseSingleValue(\n  val: string | number | boolean,\n  defaultValue: string,\n  trueValue: string,\n): string | null {\n  if (typeof val === 'number') return `${val}px`;\n  if (!val) return null;\n  if (val === true) val = trueValue;\n\n  const strVal = String(val);\n\n  if (CSS_WIDE_KEYWORDS.has(strVal)) return strVal;\n\n  const { values } = parseStyle(strVal).groups[0] ?? { values: [] };\n\n  return values[0] || defaultValue;\n}\n\nfunction extractGroupData(\n  group: StyleDetails,\n  defaultValue: string,\n): {\n  values: string[];\n  directions: Direction[];\n} {\n  const { values = [], mods = [] } = group;\n\n  return {\n    values: values.length ? values : [defaultValue],\n    directions: filterMods(mods, DIRECTIONS) as Direction[],\n  };\n}\n\nfunction applyGroup(\n  dirs: Record<Direction, string>,\n  values: string[],\n  directions: Direction[],\n): void {\n  if (!values.length) return;\n\n  if (directions.length === 0) {\n    dirs.top = values[0];\n    dirs.right = values[1] || values[0];\n    dirs.bottom = values[2] || values[0];\n    dirs.left = values[3] || values[1] || values[0];\n  } else {\n    directions.forEach((dir, i) => {\n      dirs[dir] = values[i] ?? values[0];\n    });\n  }\n}\n\nfunction optimizeShorthand(\n  property: string,\n  dirs: Record<Direction, string>,\n): Record<string, string> {\n  const { top, right, bottom, left } = dirs;\n\n  if (top === right && right === bottom && bottom === left) {\n    return { [property]: top };\n  }\n  if (top === bottom && left === right) {\n    return { [property]: `${top} ${left}` };\n  }\n\n  return { [property]: `${top} ${right} ${bottom} ${left}` };\n}\n\nexport interface DirectionalProps {\n  main?: string | number | boolean;\n  block?: string | number | boolean;\n  inline?: string | number | boolean;\n  top?: string | number | boolean;\n  right?: string | number | boolean;\n  bottom?: string | number | boolean;\n  left?: string | number | boolean;\n}\n\n/**\n * Core directional style logic shared by padding, margin, inset, scrollMargin.\n */\nexport function processDirectionalStyle(\n  config: DirectionalConfig,\n  props: DirectionalProps,\n): Record<string, string> | null {\n  const { main, block, inline, top, right, bottom, left } = props;\n\n  if (\n    main == null &&\n    block == null &&\n    inline == null &&\n    top == null &&\n    right == null &&\n    bottom == null &&\n    left == null\n  ) {\n    return null;\n  }\n\n  const {\n    property,\n    defaultValue,\n    trueValue,\n    defaultInit,\n    individualOnly,\n    directionProperty,\n  } = config;\n  const dirProp =\n    directionProperty ?? ((dir: Direction) => `${property}-${dir}`);\n\n  if (individualOnly) {\n    const onlyIndividualProps = main == null && block == null && inline == null;\n\n    if (onlyIndividualProps) {\n      const result: Record<string, string> = {};\n\n      if (top != null) {\n        const val = parseSingleValue(top, defaultValue, trueValue);\n        if (val) result[dirProp('top')] = val;\n      }\n      if (right != null) {\n        const val = parseSingleValue(right, defaultValue, trueValue);\n        if (val) result[dirProp('right')] = val;\n      }\n      if (bottom != null) {\n        const val = parseSingleValue(bottom, defaultValue, trueValue);\n        if (val) result[dirProp('bottom')] = val;\n      }\n      if (left != null) {\n        const val = parseSingleValue(left, defaultValue, trueValue);\n        if (val) result[dirProp('left')] = val;\n      }\n\n      return Object.keys(result).length > 0 ? result : null;\n    }\n  }\n\n  const dirs: Record<Direction, string> = {\n    top: defaultInit,\n    right: defaultInit,\n    bottom: defaultInit,\n    left: defaultInit,\n  };\n\n  let useLonghand = false;\n\n  if (main != null) {\n    if (typeof main === 'number') {\n      const v = `${main}px`;\n      dirs.top = dirs.right = dirs.bottom = dirs.left = v;\n    } else {\n      const strMain = main === true ? trueValue : String(main);\n\n      if (strMain) {\n        const keyword = CSS_WIDE_KEYWORDS.has(strMain) ? strMain : null;\n\n        if (keyword) {\n          dirs.top = dirs.right = dirs.bottom = dirs.left = keyword;\n        } else {\n          const processed = parseStyle(strMain);\n          const groups = processed.groups ?? [];\n\n          for (const group of groups) {\n            if (group.mods.includes('longhand')) {\n              useLonghand = true;\n            }\n\n            const kw = extractCSSWideKeyword(group);\n\n            if (kw) {\n              const groupDirs = filterMods(\n                group.mods,\n                DIRECTIONS,\n              ) as Direction[];\n\n              if (groupDirs.length === 0) {\n                dirs.top = dirs.right = dirs.bottom = dirs.left = kw;\n              } else {\n                for (const dir of groupDirs) {\n                  dirs[dir] = kw;\n                }\n              }\n            } else {\n              const { values, directions } = extractGroupData(\n                group,\n                defaultValue,\n              );\n              applyGroup(dirs, values, directions);\n            }\n          }\n        }\n      }\n    }\n  }\n\n  if (block != null) {\n    const val = parseSingleValue(block, defaultValue, trueValue);\n    if (val) dirs.top = dirs.bottom = val;\n  }\n  if (inline != null) {\n    const val = parseSingleValue(inline, defaultValue, trueValue);\n    if (val) dirs.left = dirs.right = val;\n  }\n\n  if (top != null) {\n    const val = parseSingleValue(top, defaultValue, trueValue);\n    if (val) dirs.top = val;\n  }\n  if (right != null) {\n    const val = parseSingleValue(right, defaultValue, trueValue);\n    if (val) dirs.right = val;\n  }\n  if (bottom != null) {\n    const val = parseSingleValue(bottom, defaultValue, trueValue);\n    if (val) dirs.bottom = val;\n  }\n  if (left != null) {\n    const val = parseSingleValue(left, defaultValue, trueValue);\n    if (val) dirs.left = val;\n  }\n\n  if (useLonghand) {\n    return {\n      [dirProp('top')]: dirs.top,\n      [dirProp('right')]: dirs.right,\n      [dirProp('bottom')]: dirs.bottom,\n      [dirProp('left')]: dirs.left,\n    };\n  }\n\n  return optimizeShorthand(property, dirs);\n}\n"],"mappings":";;;;AA8BA,SAAgB,iBACd,KACA,cACA,WACe;AACf,KAAI,OAAO,QAAQ,SAAU,QAAO,GAAG,IAAI;AAC3C,KAAI,CAAC,IAAK,QAAO;AACjB,KAAI,QAAQ,KAAM,OAAM;CAExB,MAAM,SAAS,OAAO,IAAI;AAE1B,KAAI,kBAAkB,IAAI,OAAO,CAAE,QAAO;CAE1C,MAAM,EAAE,WAAW,WAAW,OAAO,CAAC,OAAO,MAAM,EAAE,QAAQ,EAAE,EAAE;AAEjE,QAAO,OAAO,MAAM;;AAGtB,SAAS,iBACP,OACA,cAIA;CACA,MAAM,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK;AAEnC,QAAO;EACL,QAAQ,OAAO,SAAS,SAAS,CAAC,aAAa;EAC/C,YAAY,WAAW,MAAM,WAAW;EACzC;;AAGH,SAAS,WACP,MACA,QACA,YACM;AACN,KAAI,CAAC,OAAO,OAAQ;AAEpB,KAAI,WAAW,WAAW,GAAG;AAC3B,OAAK,MAAM,OAAO;AAClB,OAAK,QAAQ,OAAO,MAAM,OAAO;AACjC,OAAK,SAAS,OAAO,MAAM,OAAO;AAClC,OAAK,OAAO,OAAO,MAAM,OAAO,MAAM,OAAO;OAE7C,YAAW,SAAS,KAAK,MAAM;AAC7B,OAAK,OAAO,OAAO,MAAM,OAAO;GAChC;;AAIN,SAAS,kBACP,UACA,MACwB;CACxB,MAAM,EAAE,KAAK,OAAO,QAAQ,SAAS;AAErC,KAAI,QAAQ,SAAS,UAAU,UAAU,WAAW,KAClD,QAAO,GAAG,WAAW,KAAK;AAE5B,KAAI,QAAQ,UAAU,SAAS,MAC7B,QAAO,GAAG,WAAW,GAAG,IAAI,GAAG,QAAQ;AAGzC,QAAO,GAAG,WAAW,GAAG,IAAI,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ;;;;;AAgB5D,SAAgB,wBACd,QACA,OAC+B;CAC/B,MAAM,EAAE,MAAM,OAAO,QAAQ,KAAK,OAAO,QAAQ,SAAS;AAE1D,KACE,QAAQ,QACR,SAAS,QACT,UAAU,QACV,OAAO,QACP,SAAS,QACT,UAAU,QACV,QAAQ,KAER,QAAO;CAGT,MAAM,EACJ,UACA,cACA,WACA,aACA,gBACA,sBACE;CACJ,MAAM,UACJ,uBAAuB,QAAmB,GAAG,SAAS,GAAG;AAE3D,KAAI;MAC0B,QAAQ,QAAQ,SAAS,QAAQ,UAAU,MAE9C;GACvB,MAAM,SAAiC,EAAE;AAEzC,OAAI,OAAO,MAAM;IACf,MAAM,MAAM,iBAAiB,KAAK,cAAc,UAAU;AAC1D,QAAI,IAAK,QAAO,QAAQ,MAAM,IAAI;;AAEpC,OAAI,SAAS,MAAM;IACjB,MAAM,MAAM,iBAAiB,OAAO,cAAc,UAAU;AAC5D,QAAI,IAAK,QAAO,QAAQ,QAAQ,IAAI;;AAEtC,OAAI,UAAU,MAAM;IAClB,MAAM,MAAM,iBAAiB,QAAQ,cAAc,UAAU;AAC7D,QAAI,IAAK,QAAO,QAAQ,SAAS,IAAI;;AAEvC,OAAI,QAAQ,MAAM;IAChB,MAAM,MAAM,iBAAiB,MAAM,cAAc,UAAU;AAC3D,QAAI,IAAK,QAAO,QAAQ,OAAO,IAAI;;AAGrC,UAAO,OAAO,KAAK,OAAO,CAAC,SAAS,IAAI,SAAS;;;CAIrD,MAAM,OAAkC;EACtC,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACP;CAED,IAAI,cAAc;AAElB,KAAI,QAAQ,KACV,KAAI,OAAO,SAAS,SAElB,MAAK,MAAM,KAAK,QAAQ,KAAK,SAAS,KAAK,OADjC,GAAG,KAAK;MAEb;EACL,MAAM,UAAU,SAAS,OAAO,YAAY,OAAO,KAAK;AAExD,MAAI,SAAS;GACX,MAAM,UAAU,kBAAkB,IAAI,QAAQ,GAAG,UAAU;AAE3D,OAAI,QACF,MAAK,MAAM,KAAK,QAAQ,KAAK,SAAS,KAAK,OAAO;QAC7C;IAEL,MAAM,SADY,WAAW,QAAQ,CACZ,UAAU,EAAE;AAErC,SAAK,MAAM,SAAS,QAAQ;AAC1B,SAAI,MAAM,KAAK,SAAS,WAAW,CACjC,eAAc;KAGhB,MAAM,KAAK,sBAAsB,MAAM;AAEvC,SAAI,IAAI;MACN,MAAM,YAAY,WAChB,MAAM,MACN,WACD;AAED,UAAI,UAAU,WAAW,EACvB,MAAK,MAAM,KAAK,QAAQ,KAAK,SAAS,KAAK,OAAO;UAElD,MAAK,MAAM,OAAO,UAChB,MAAK,OAAO;YAGX;MACL,MAAM,EAAE,QAAQ,eAAe,iBAC7B,OACA,aACD;AACD,iBAAW,MAAM,QAAQ,WAAW;;;;;;AAQhD,KAAI,SAAS,MAAM;EACjB,MAAM,MAAM,iBAAiB,OAAO,cAAc,UAAU;AAC5D,MAAI,IAAK,MAAK,MAAM,KAAK,SAAS;;AAEpC,KAAI,UAAU,MAAM;EAClB,MAAM,MAAM,iBAAiB,QAAQ,cAAc,UAAU;AAC7D,MAAI,IAAK,MAAK,OAAO,KAAK,QAAQ;;AAGpC,KAAI,OAAO,MAAM;EACf,MAAM,MAAM,iBAAiB,KAAK,cAAc,UAAU;AAC1D,MAAI,IAAK,MAAK,MAAM;;AAEtB,KAAI,SAAS,MAAM;EACjB,MAAM,MAAM,iBAAiB,OAAO,cAAc,UAAU;AAC5D,MAAI,IAAK,MAAK,QAAQ;;AAExB,KAAI,UAAU,MAAM;EAClB,MAAM,MAAM,iBAAiB,QAAQ,cAAc,UAAU;AAC7D,MAAI,IAAK,MAAK,SAAS;;AAEzB,KAAI,QAAQ,MAAM;EAChB,MAAM,MAAM,iBAAiB,MAAM,cAAc,UAAU;AAC3D,MAAI,IAAK,MAAK,OAAO;;AAGvB,KAAI,YACF,QAAO;GACJ,QAAQ,MAAM,GAAG,KAAK;GACtB,QAAQ,QAAQ,GAAG,KAAK;GACxB,QAAQ,SAAS,GAAG,KAAK;GACzB,QAAQ,OAAO,GAAG,KAAK;EACzB;AAGH,QAAO,kBAAkB,UAAU,KAAK"}

package/dist/styles/display.d.ts

@@ -1,30 +0,0 @@
-//#region src/styles/display.d.ts
-interface DisplayStyleProps {
-  display?: string;
-  hide?: boolean;
-  textOverflow?: string | boolean;
-  overflow?: string;
-  whiteSpace?: string;
-}
-/**
- * Handles display, hide, textOverflow, overflow, and whiteSpace styles.
- *
- * Priority:
- * 1. `hide` takes precedence (display: none)
- * 2. Multi-line `textOverflow` forces display: -webkit-box
- * 3. Single-line `textOverflow` defaults white-space to nowrap
- * 4. Explicit `whiteSpace` overrides the default from `textOverflow`
- */
-declare function displayStyle({
-  display,
-  hide,
-  textOverflow,
-  overflow,
-  whiteSpace
-}: DisplayStyleProps): Record<string, string | number> | null;
-declare namespace displayStyle {
-  var __lookupStyles: string[];
-}
-//#endregion
-export { displayStyle };
-//# sourceMappingURL=display.d.ts.map

package/dist/styles/display.js

@@ -1,73 +0,0 @@
-import { parseStyle } from "../utils/styles.js";
-//#region src/styles/display.ts
-/**
-* Process textOverflow into CSS properties for truncation/clamping.
-*
-* - `ellipsis` — single-line truncation with ellipsis
-* - `ellipsis / 3` — multi-line clamping (3 lines) with ellipsis
-* - `clip` — single-line truncation with clip
-* - `clip / 2` — multi-line clip (2 lines)
-* - `true` or `initial` — reset to initial
-*/
-function processTextOverflow(textOverflow, whiteSpace) {
-	if (textOverflow === true || textOverflow === "initial") return { "text-overflow": "initial" };
-	const group = parseStyle(String(textOverflow)).groups[0];
-	if (!group) return null;
-	const { parts } = group;
-	const modePart = parts[0];
-	const clampPart = parts[1];
-	const hasEllipsis = modePart?.mods.includes("ellipsis");
-	const hasClip = modePart?.mods.includes("clip");
-	if (!hasEllipsis && !hasClip) return null;
-	let clamp = 1;
-	if (clampPart?.values[0]) {
-		const parsed = parseInt(clampPart.values[0], 10);
-		if (!isNaN(parsed) && parsed > 0) clamp = parsed;
-	}
-	const result = {
-		overflow: "hidden",
-		"text-overflow": hasEllipsis ? "ellipsis" : "clip"
-	};
-	if (clamp === 1) result["white-space"] = whiteSpace || "nowrap";
-	else {
-		result["display"] = "-webkit-box";
-		result["-webkit-box-orient"] = "vertical";
-		result["-webkit-line-clamp"] = clamp;
-		result["line-clamp"] = clamp;
-		result["white-space"] = whiteSpace || "initial";
-	}
-	return result;
-}
-/**
-* Handles display, hide, textOverflow, overflow, and whiteSpace styles.
-*
-* Priority:
-* 1. `hide` takes precedence (display: none)
-* 2. Multi-line `textOverflow` forces display: -webkit-box
-* 3. Single-line `textOverflow` defaults white-space to nowrap
-* 4. Explicit `whiteSpace` overrides the default from `textOverflow`
-*/
-function displayStyle({ display, hide, textOverflow, overflow, whiteSpace }) {
-	const result = {};
-	if (textOverflow != null && textOverflow !== false) {
-		const textResult = processTextOverflow(textOverflow, whiteSpace);
-		if (textResult) Object.assign(result, textResult);
-	}
-	if (overflow && !result["overflow"]) result["overflow"] = overflow;
-	if (whiteSpace && !result["white-space"]) result["white-space"] = whiteSpace;
-	if (hide) result["display"] = "none";
-	else if (!result["display"] && display) result["display"] = display;
-	if (Object.keys(result).length === 0) return null;
-	return result;
-}
-displayStyle.__lookupStyles = [
-	"display",
-	"hide",
-	"textOverflow",
-	"overflow",
-	"whiteSpace"
-];
-//#endregion
-export { displayStyle };
-
-//# sourceMappingURL=display.js.map

package/dist/styles/display.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"display.js","names":[],"sources":["../../src/styles/display.ts"],"sourcesContent":["import { parseStyle } from '../utils/styles';\n\ninterface DisplayStyleProps {\n  display?: string;\n  hide?: boolean;\n  textOverflow?: string | boolean;\n  overflow?: string;\n  whiteSpace?: string;\n}\n\n/**\n * Process textOverflow into CSS properties for truncation/clamping.\n *\n * - `ellipsis` — single-line truncation with ellipsis\n * - `ellipsis / 3` — multi-line clamping (3 lines) with ellipsis\n * - `clip` — single-line truncation with clip\n * - `clip / 2` — multi-line clip (2 lines)\n * - `true` or `initial` — reset to initial\n */\nfunction processTextOverflow(\n  textOverflow: string | boolean,\n  whiteSpace?: string,\n): Record<string, string | number> | null {\n  if (textOverflow === true || textOverflow === 'initial') {\n    return { 'text-overflow': 'initial' };\n  }\n\n  const processed = parseStyle(String(textOverflow));\n  const group = processed.groups[0];\n\n  if (!group) return null;\n\n  const { parts } = group;\n  const modePart = parts[0];\n  const clampPart = parts[1];\n\n  const hasEllipsis = modePart?.mods.includes('ellipsis');\n  const hasClip = modePart?.mods.includes('clip');\n\n  if (!hasEllipsis && !hasClip) return null;\n\n  let clamp = 1;\n\n  if (clampPart?.values[0]) {\n    const parsed = parseInt(clampPart.values[0], 10);\n\n    if (!isNaN(parsed) && parsed > 0) {\n      clamp = parsed;\n    }\n  }\n\n  const result: Record<string, string | number> = {\n    overflow: 'hidden',\n    'text-overflow': hasEllipsis ? 'ellipsis' : 'clip',\n  };\n\n  if (clamp === 1) {\n    result['white-space'] = whiteSpace || 'nowrap';\n  } else {\n    result['display'] = '-webkit-box';\n    result['-webkit-box-orient'] = 'vertical';\n    result['-webkit-line-clamp'] = clamp;\n    result['line-clamp'] = clamp;\n    result['white-space'] = whiteSpace || 'initial';\n  }\n\n  return result;\n}\n\n/**\n * Handles display, hide, textOverflow, overflow, and whiteSpace styles.\n *\n * Priority:\n * 1. `hide` takes precedence (display: none)\n * 2. Multi-line `textOverflow` forces display: -webkit-box\n * 3. Single-line `textOverflow` defaults white-space to nowrap\n * 4. Explicit `whiteSpace` overrides the default from `textOverflow`\n */\nexport function displayStyle({\n  display,\n  hide,\n  textOverflow,\n  overflow,\n  whiteSpace,\n}: DisplayStyleProps) {\n  const result: Record<string, string | number> = {};\n\n  if (textOverflow != null && textOverflow !== false) {\n    const textResult = processTextOverflow(textOverflow, whiteSpace);\n\n    if (textResult) Object.assign(result, textResult);\n  }\n\n  if (overflow && !result['overflow']) {\n    result['overflow'] = overflow;\n  }\n  if (whiteSpace && !result['white-space']) {\n    result['white-space'] = whiteSpace;\n  }\n\n  if (hide) {\n    result['display'] = 'none';\n  } else if (!result['display'] && display) {\n    result['display'] = display;\n  }\n\n  if (Object.keys(result).length === 0) {\n    return null;\n  }\n\n  return result;\n}\n\ndisplayStyle.__lookupStyles = [\n  'display',\n  'hide',\n  'textOverflow',\n  'overflow',\n  'whiteSpace',\n];\n"],"mappings":";;;;;;;;;;;AAmBA,SAAS,oBACP,cACA,YACwC;AACxC,KAAI,iBAAiB,QAAQ,iBAAiB,UAC5C,QAAO,EAAE,iBAAiB,WAAW;CAIvC,MAAM,QADY,WAAW,OAAO,aAAa,CAAC,CAC1B,OAAO;AAE/B,KAAI,CAAC,MAAO,QAAO;CAEnB,MAAM,EAAE,UAAU;CAClB,MAAM,WAAW,MAAM;CACvB,MAAM,YAAY,MAAM;CAExB,MAAM,cAAc,UAAU,KAAK,SAAS,WAAW;CACvD,MAAM,UAAU,UAAU,KAAK,SAAS,OAAO;AAE/C,KAAI,CAAC,eAAe,CAAC,QAAS,QAAO;CAErC,IAAI,QAAQ;AAEZ,KAAI,WAAW,OAAO,IAAI;EACxB,MAAM,SAAS,SAAS,UAAU,OAAO,IAAI,GAAG;AAEhD,MAAI,CAAC,MAAM,OAAO,IAAI,SAAS,EAC7B,SAAQ;;CAIZ,MAAM,SAA0C;EAC9C,UAAU;EACV,iBAAiB,cAAc,aAAa;EAC7C;AAED,KAAI,UAAU,EACZ,QAAO,iBAAiB,cAAc;MACjC;AACL,SAAO,aAAa;AACpB,SAAO,wBAAwB;AAC/B,SAAO,wBAAwB;AAC/B,SAAO,gBAAgB;AACvB,SAAO,iBAAiB,cAAc;;AAGxC,QAAO;;;;;;;;;;;AAYT,SAAgB,aAAa,EAC3B,SACA,MACA,cACA,UACA,cACoB;CACpB,MAAM,SAA0C,EAAE;AAElD,KAAI,gBAAgB,QAAQ,iBAAiB,OAAO;EAClD,MAAM,aAAa,oBAAoB,cAAc,WAAW;AAEhE,MAAI,WAAY,QAAO,OAAO,QAAQ,WAAW;;AAGnD,KAAI,YAAY,CAAC,OAAO,YACtB,QAAO,cAAc;AAEvB,KAAI,cAAc,CAAC,OAAO,eACxB,QAAO,iBAAiB;AAG1B,KAAI,KACF,QAAO,aAAa;UACX,CAAC,OAAO,cAAc,QAC/B,QAAO,aAAa;AAGtB,KAAI,OAAO,KAAK,OAAO,CAAC,WAAW,EACjC,QAAO;AAGT,QAAO;;AAGT,aAAa,iBAAiB;CAC5B;CACA;CACA;CACA;CACA;CACD"}

package/dist/styles/fade.d.ts

@@ -1,15 +0,0 @@
-//#region src/styles/fade.d.ts
-declare function fadeStyle({
-  fade
-}: {
-  fade?: string;
-}): {
-  mask: string;
-  'mask-composite': string;
-} | null;
-declare namespace fadeStyle {
-  var __lookupStyles: string[];
-}
-//#endregion
-export { fadeStyle };
-//# sourceMappingURL=fade.d.ts.map

package/dist/styles/fade.js

@@ -1,62 +0,0 @@
-import { CSS_WIDE_KEYWORDS } from "../parser/const.js";
-import { DIRECTIONS, filterMods, parseStyle } from "../utils/styles.js";
-//#region src/styles/fade.ts
-const DIRECTION_MAP = {
-	right: "to left",
-	left: "to right",
-	top: "to bottom",
-	bottom: "to top"
-};
-const DEFAULT_TRANSPARENT_COLOR = "rgb(0 0 0 / 0)";
-const DEFAULT_OPAQUE_COLOR = "rgb(0 0 0 / 1)";
-/**
-* Process a single group and return gradient strings for its directions.
-*/
-function processGroup(group, isOnlyGroup) {
-	let { values } = group;
-	const { mods, colors } = group;
-	let directions = filterMods(mods, DIRECTIONS);
-	if (!values.length) values = ["calc(2 * var(--gap))"];
-	if (!directions.length) if (isOnlyGroup) directions = [
-		"top",
-		"right",
-		"bottom",
-		"left"
-	];
-	else return [];
-	const transparentColor = colors?.[0] || DEFAULT_TRANSPARENT_COLOR;
-	const opaqueColor = colors?.[1] || DEFAULT_OPAQUE_COLOR;
-	return directions.map((direction, index) => {
-		const size = values[index] || values[index % 2] || values[0];
-		return `linear-gradient(${DIRECTION_MAP[direction]}, ${transparentColor} 0%, ${opaqueColor} ${size})`;
-	});
-}
-function fadeStyle({ fade }) {
-	if (!fade) return null;
-	if (CSS_WIDE_KEYWORDS.has(fade)) return {
-		mask: fade,
-		"mask-composite": fade
-	};
-	const groups = parseStyle(fade).groups ?? [];
-	if (!groups.length) return null;
-	const isOnlyGroup = groups.length === 1;
-	const gradients = [];
-	for (const group of groups) {
-		const groupGradients = processGroup({
-			values: group.values ?? [],
-			mods: group.mods ?? [],
-			colors: group.colors ?? []
-		}, isOnlyGroup);
-		gradients.push(...groupGradients);
-	}
-	if (!gradients.length) return null;
-	return {
-		mask: gradients.join(", "),
-		"mask-composite": "intersect"
-	};
-}
-fadeStyle.__lookupStyles = ["fade"];
-//#endregion
-export { fadeStyle };
-
-//# sourceMappingURL=fade.js.map

package/dist/styles/fade.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"fade.js","names":[],"sources":["../../src/styles/fade.ts"],"sourcesContent":["import { CSS_WIDE_KEYWORDS } from '../parser/const';\nimport { DIRECTIONS, filterMods, parseStyle } from '../utils/styles';\n\nconst DIRECTION_MAP: Record<(typeof DIRECTIONS)[number], string> = {\n  right: 'to left',\n  left: 'to right',\n  top: 'to bottom',\n  bottom: 'to top',\n};\n\n// Default mask colors (standard black with alpha for gradient masks)\nconst DEFAULT_TRANSPARENT_COLOR = 'rgb(0 0 0 / 0)';\nconst DEFAULT_OPAQUE_COLOR = 'rgb(0 0 0 / 1)';\n\ninterface GroupData {\n  values: string[];\n  mods: string[];\n  colors: string[];\n}\n\n/**\n * Process a single group and return gradient strings for its directions.\n */\nfunction processGroup(group: GroupData, isOnlyGroup: boolean): string[] {\n  let { values } = group;\n  const { mods, colors } = group;\n\n  let directions = filterMods(\n    mods,\n    DIRECTIONS,\n  ) as (typeof DIRECTIONS)[number][];\n\n  if (!values.length) {\n    values = ['calc(2 * var(--gap))'];\n  }\n\n  // If this is the only group and no directions specified, apply to all edges\n  if (!directions.length) {\n    if (isOnlyGroup) {\n      directions = ['top', 'right', 'bottom', 'left'];\n    } else {\n      // For multi-group without explicit direction, skip this group\n      return [];\n    }\n  }\n\n  // Extract colors: first = transparent mask color, second = opaque mask color\n  const transparentColor = colors?.[0] || DEFAULT_TRANSPARENT_COLOR;\n  const opaqueColor = colors?.[1] || DEFAULT_OPAQUE_COLOR;\n\n  return directions.map(\n    (direction: (typeof DIRECTIONS)[number], index: number) => {\n      const size = values[index] || values[index % 2] || values[0];\n\n      return `linear-gradient(${DIRECTION_MAP[direction]}, ${transparentColor} 0%, ${opaqueColor} ${size})`;\n    },\n  );\n}\n\nexport function fadeStyle({ fade }: { fade?: string }) {\n  if (!fade) return null;\n\n  if (CSS_WIDE_KEYWORDS.has(fade)) {\n    return { mask: fade, 'mask-composite': fade };\n  }\n\n  const processed = parseStyle(fade);\n  const groups: GroupData[] = processed.groups ?? [];\n\n  if (!groups.length) return null;\n\n  const isOnlyGroup = groups.length === 1;\n\n  // Process all groups and collect gradients\n  const gradients: string[] = [];\n\n  for (const group of groups) {\n    const groupGradients = processGroup(\n      {\n        values: group.values ?? [],\n        mods: group.mods ?? [],\n        colors: group.colors ?? [],\n      },\n      isOnlyGroup,\n    );\n    gradients.push(...groupGradients);\n  }\n\n  if (!gradients.length) return null;\n\n  return {\n    mask: gradients.join(', '),\n    'mask-composite': 'intersect',\n  };\n}\n\nfadeStyle.__lookupStyles = ['fade'];\n"],"mappings":";;;AAGA,MAAM,gBAA6D;CACjE,OAAO;CACP,MAAM;CACN,KAAK;CACL,QAAQ;CACT;AAGD,MAAM,4BAA4B;AAClC,MAAM,uBAAuB;;;;AAW7B,SAAS,aAAa,OAAkB,aAAgC;CACtE,IAAI,EAAE,WAAW;CACjB,MAAM,EAAE,MAAM,WAAW;CAEzB,IAAI,aAAa,WACf,MACA,WACD;AAED,KAAI,CAAC,OAAO,OACV,UAAS,CAAC,uBAAuB;AAInC,KAAI,CAAC,WAAW,OACd,KAAI,YACF,cAAa;EAAC;EAAO;EAAS;EAAU;EAAO;KAG/C,QAAO,EAAE;CAKb,MAAM,mBAAmB,SAAS,MAAM;CACxC,MAAM,cAAc,SAAS,MAAM;AAEnC,QAAO,WAAW,KACf,WAAwC,UAAkB;EACzD,MAAM,OAAO,OAAO,UAAU,OAAO,QAAQ,MAAM,OAAO;AAE1D,SAAO,mBAAmB,cAAc,WAAW,IAAI,iBAAiB,OAAO,YAAY,GAAG,KAAK;GAEtG;;AAGH,SAAgB,UAAU,EAAE,QAA2B;AACrD,KAAI,CAAC,KAAM,QAAO;AAElB,KAAI,kBAAkB,IAAI,KAAK,CAC7B,QAAO;EAAE,MAAM;EAAM,kBAAkB;EAAM;CAI/C,MAAM,SADY,WAAW,KAAK,CACI,UAAU,EAAE;AAElD,KAAI,CAAC,OAAO,OAAQ,QAAO;CAE3B,MAAM,cAAc,OAAO,WAAW;CAGtC,MAAM,YAAsB,EAAE;AAE9B,MAAK,MAAM,SAAS,QAAQ;EAC1B,MAAM,iBAAiB,aACrB;GACE,QAAQ,MAAM,UAAU,EAAE;GAC1B,MAAM,MAAM,QAAQ,EAAE;GACtB,QAAQ,MAAM,UAAU,EAAE;GAC3B,EACD,YACD;AACD,YAAU,KAAK,GAAG,eAAe;;AAGnC,KAAI,CAAC,UAAU,OAAQ,QAAO;AAE9B,QAAO;EACL,MAAM,UAAU,KAAK,KAAK;EAC1B,kBAAkB;EACnB;;AAGH,UAAU,iBAAiB,CAAC,OAAO"}

package/dist/styles/fill.d.ts

@@ -1,42 +0,0 @@
-//#region src/styles/fill.d.ts
-declare function fillStyle({
-  fill,
-  backgroundColor,
-  image,
-  backgroundImage,
-  backgroundPosition,
-  backgroundSize,
-  backgroundRepeat,
-  backgroundAttachment,
-  backgroundOrigin,
-  backgroundClip,
-  background
-}: {
-  fill?: string;
-  backgroundColor?: string;
-  image?: string;
-  backgroundImage?: string;
-  backgroundPosition?: string;
-  backgroundSize?: string;
-  backgroundRepeat?: string;
-  backgroundAttachment?: string;
-  backgroundOrigin?: string;
-  backgroundClip?: string;
-  background?: string;
-}): Record<string, string> | null;
-declare namespace fillStyle {
-  var __lookupStyles: string[];
-}
-declare function svgFillStyle({
-  svgFill
-}: {
-  svgFill?: string;
-}): {
-  fill: string;
-} | null;
-declare namespace svgFillStyle {
-  var __lookupStyles: string[];
-}
-//#endregion
-export { fillStyle, svgFillStyle };
-//# sourceMappingURL=fill.d.ts.map