@tenphi/tasty 0.0.0-snapshot.05c1c22

package/dist/styles/color.d.ts

@@ -0,0 +1,14 @@
+//#region src/styles/color.d.ts
+declare function colorStyle({
+  color
+}: {
+  color?: string | boolean;
+}): {
+  color: string;
+} | undefined;
+declare namespace colorStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+export { colorStyle };
+//# sourceMappingURL=color.d.ts.map

package/dist/styles/color.js

@@ -0,0 +1,26 @@
+import { getColorSpaceSuffix } from "../utils/color-space.js";
+import { parseColor } from "../utils/styles.js";
+import { convertColorChainToComponentChain } from "./createStyle.js";
+//#region src/styles/color.ts
+function colorStyle({ color }) {
+	if (!color) return;
+	if (color === true) color = "currentColor";
+	if (typeof color === "string" && (color.startsWith("#") || color.startsWith("(#"))) color = parseColor(color).color || color;
+	const match = color.match(/var\(--(.+?)-color/);
+	let name = "";
+	if (match) name = match[1];
+	const styles = { color };
+	if (name && name !== "current") {
+		const suffix = getColorSpaceSuffix();
+		Object.assign(styles, {
+			"--current-color": color,
+			[`--current-color-${suffix}`]: convertColorChainToComponentChain(color)
+		});
+	}
+	return styles;
+}
+colorStyle.__lookupStyles = ["color"];
+//#endregion
+export { colorStyle };
+
+//# sourceMappingURL=color.js.map

package/dist/styles/color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.js","names":[],"sources":["../../src/styles/color.ts"],"sourcesContent":["import { getColorSpaceSuffix } from '../utils/color-space';\nimport { parseColor } from '../utils/styles';\n\nimport { convertColorChainToComponentChain } from './createStyle';\n\nexport function colorStyle({ color }: { color?: string | boolean }) {\n  if (!color) return;\n\n  if (color === true) color = 'currentColor';\n\n  if (\n    typeof color === 'string' &&\n    (color.startsWith('#') || color.startsWith('(#'))\n  ) {\n    color = parseColor(color).color || color;\n  }\n\n  const match = color.match(/var\\(--(.+?)-color/);\n  let name = '';\n\n  if (match) {\n    name = match[1];\n  }\n\n  const styles = {\n    color: color,\n  };\n\n  if (name && name !== 'current') {\n    const suffix = getColorSpaceSuffix();\n    Object.assign(styles, {\n      '--current-color': color,\n      [`--current-color-${suffix}`]: convertColorChainToComponentChain(color),\n    });\n  }\n\n  return styles;\n}\n\ncolorStyle.__lookupStyles = ['color'];\n"],"mappings":";;;;AAKA,SAAgB,WAAW,EAAE,SAAuC;AAClE,KAAI,CAAC,MAAO;AAEZ,KAAI,UAAU,KAAM,SAAQ;AAE5B,KACE,OAAO,UAAU,aAChB,MAAM,WAAW,IAAI,IAAI,MAAM,WAAW,KAAK,EAEhD,SAAQ,WAAW,MAAM,CAAC,SAAS;CAGrC,MAAM,QAAQ,MAAM,MAAM,qBAAqB;CAC/C,IAAI,OAAO;AAEX,KAAI,MACF,QAAO,MAAM;CAGf,MAAM,SAAS,EACN,OACR;AAED,KAAI,QAAQ,SAAS,WAAW;EAC9B,MAAM,SAAS,qBAAqB;AACpC,SAAO,OAAO,QAAQ;GACpB,mBAAmB;IAClB,mBAAmB,WAAW,kCAAkC,MAAM;GACxE,CAAC;;AAGJ,QAAO;;AAGT,WAAW,iBAAiB,CAAC,QAAQ"}

package/dist/styles/createStyle.js

@@ -0,0 +1,79 @@
+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;
+			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;
+				styleValue = normalized;
+			}
+			if (converter && typeof styleValue !== "string") {
+				styleValue = converter(styleValue);
+				if (!styleValue) return;
+			}
+			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

@@ -0,0 +1 @@
+{"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 | void => {\n      let styleValue = styleMap[styleName];\n\n      if (styleValue == null || styleValue === false) return;\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;\n        styleValue = normalized;\n      }\n\n      if (converter && typeof styleValue !== 'string') {\n        styleValue = converter(styleValue as string | number | true);\n\n        if (!styleValue) return;\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;GAEhD,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;AACzB,iBAAa;;AAGf,OAAI,aAAa,OAAO,eAAe,UAAU;AAC/C,iBAAa,UAAU,WAAqC;AAE5D,QAAI,CAAC,WAAY;;AAGnB,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

@@ -0,0 +1,96 @@
+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;
+		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

@@ -0,0 +1 @@
+{"version":3,"file":"dimension.js","names":[],"sources":["../../src/styles/dimension.ts"],"sourcesContent":["import { 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 nothing is defined, return undefined\n    if (value == null && min == null && max == null) return;\n\n    // Handle boolean true on main value - reset all to initial\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":";;;AAGA,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;AAE9C,MAAI,SAAS,QAAQ,OAAO,QAAQ,OAAO,KAAM;AAGjD,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/display.d.ts

@@ -0,0 +1,37 @@
+//#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.
+ *
+ * textOverflow syntax:
+ * - `textOverflow="ellipsis"` - single-line truncation with ellipsis
+ * - `textOverflow="ellipsis / 3"` - multi-line clamping (3 lines) with ellipsis
+ * - `textOverflow="clip"` - single-line truncation with clip (no ellipsis)
+ * - `textOverflow="clip / 2"` - multi-line clip (2 lines)
+ * - `textOverflow={true}` or `textOverflow="initial"` - reset to initial
+ *
+ * Priority:
+ * 1. `hide` takes precedence (display: none)
+ * 2. Multi-line `textOverflow` forces display: -webkit-box
+ * 3. Single-line `textOverflow` defaults white-space to nowrap, multi-line defaults to initial
+ * 4. Explicit `whiteSpace` overrides the default white-space from `textOverflow`
+ */
+declare function displayStyle({
+  display,
+  hide,
+  textOverflow,
+  overflow,
+  whiteSpace
+}: DisplayStyleProps): Record<string, string | number> | undefined;
+declare namespace displayStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+export { displayStyle };
+//# sourceMappingURL=display.d.ts.map

package/dist/styles/display.js

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

package/dist/styles/display.js.map

@@ -0,0 +1 @@
+{"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 * Handles display, hide, textOverflow, overflow, and whiteSpace styles.\n *\n * textOverflow syntax:\n * - `textOverflow=\"ellipsis\"` - single-line truncation with ellipsis\n * - `textOverflow=\"ellipsis / 3\"` - multi-line clamping (3 lines) with ellipsis\n * - `textOverflow=\"clip\"` - single-line truncation with clip (no ellipsis)\n * - `textOverflow=\"clip / 2\"` - multi-line clip (2 lines)\n * - `textOverflow={true}` or `textOverflow=\"initial\"` - reset to initial\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, multi-line defaults to initial\n * 4. Explicit `whiteSpace` overrides the default white-space 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  // Handle textOverflow first to determine required overrides\n  if (textOverflow != null && textOverflow !== false) {\n    // Boolean true or 'initial' → reset to initial\n    if (textOverflow === true || textOverflow === 'initial') {\n      result['text-overflow'] = 'initial';\n    } else {\n      const processed = parseStyle(String(textOverflow));\n      const group = processed.groups[0];\n\n      if (group) {\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        // Get clamp value from second part (after /)\n        let clamp = 1;\n        if (clampPart?.values[0]) {\n          const parsed = parseInt(clampPart.values[0], 10);\n          if (!isNaN(parsed) && parsed > 0) {\n            clamp = parsed;\n          }\n        }\n\n        if (hasEllipsis || hasClip) {\n          result['overflow'] = 'hidden';\n          result['text-overflow'] = hasEllipsis ? 'ellipsis' : 'clip';\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      }\n    }\n  }\n\n  // Apply user-specified values (only if not overridden by textOverflow)\n  if (overflow && !result['overflow']) {\n    result['overflow'] = overflow;\n  }\n  if (whiteSpace && !result['white-space']) {\n    result['white-space'] = whiteSpace;\n  }\n\n  // Handle display (hide > textOverflow > user value)\n  if (hide) {\n    result['display'] = 'none';\n  } else if (!result['display'] && display) {\n    result['display'] = display;\n  }\n\n  // Return undefined if no styles to apply\n  if (Object.keys(result).length === 0) {\n    return;\n  }\n\n  return result;\n}\n\ndisplayStyle.__lookupStyles = [\n  'display',\n  'hide',\n  'textOverflow',\n  'overflow',\n  'whiteSpace',\n];\n"],"mappings":";;;;;;;;;;;;;;;;;;AA0BA,SAAgB,aAAa,EAC3B,SACA,MACA,cACA,UACA,cACoB;CACpB,MAAM,SAA0C,EAAE;AAGlD,KAAI,gBAAgB,QAAQ,iBAAiB,MAE3C,KAAI,iBAAiB,QAAQ,iBAAiB,UAC5C,QAAO,mBAAmB;MACrB;EAEL,MAAM,QADY,WAAW,OAAO,aAAa,CAAC,CAC1B,OAAO;AAE/B,MAAI,OAAO;GACT,MAAM,EAAE,UAAU;GAClB,MAAM,WAAW,MAAM;GACvB,MAAM,YAAY,MAAM;GAExB,MAAM,cAAc,UAAU,KAAK,SAAS,WAAW;GACvD,MAAM,UAAU,UAAU,KAAK,SAAS,OAAO;GAG/C,IAAI,QAAQ;AACZ,OAAI,WAAW,OAAO,IAAI;IACxB,MAAM,SAAS,SAAS,UAAU,OAAO,IAAI,GAAG;AAChD,QAAI,CAAC,MAAM,OAAO,IAAI,SAAS,EAC7B,SAAQ;;AAIZ,OAAI,eAAe,SAAS;AAC1B,WAAO,cAAc;AACrB,WAAO,mBAAmB,cAAc,aAAa;AAErD,QAAI,UAAU,EACZ,QAAO,iBAAiB,cAAc;SACjC;AACL,YAAO,aAAa;AACpB,YAAO,wBAAwB;AAC/B,YAAO,wBAAwB;AAC/B,YAAO,gBAAgB;AACvB,YAAO,iBAAiB,cAAc;;;;;AAQhD,KAAI,YAAY,CAAC,OAAO,YACtB,QAAO,cAAc;AAEvB,KAAI,cAAc,CAAC,OAAO,eACxB,QAAO,iBAAiB;AAI1B,KAAI,KACF,QAAO,aAAa;UACX,CAAC,OAAO,cAAc,QAC/B,QAAO,aAAa;AAItB,KAAI,OAAO,KAAK,OAAO,CAAC,WAAW,EACjC;AAGF,QAAO;;AAGT,aAAa,iBAAiB;CAC5B;CACA;CACA;CACA;CACA;CACD"}

package/dist/styles/fade.d.ts

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

package/dist/styles/fade.js

@@ -0,0 +1,57 @@
+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;
+	const groups = parseStyle(fade).groups ?? [];
+	if (!groups.length) return;
+	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;
+	return {
+		mask: gradients.join(", "),
+		"mask-composite": "intersect"
+	};
+}
+fadeStyle.__lookupStyles = ["fade"];
+//#endregion
+export { fadeStyle };
+
+//# sourceMappingURL=fade.js.map

package/dist/styles/fade.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fade.js","names":[],"sources":["../../src/styles/fade.ts"],"sourcesContent":["import { 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;\n\n  const processed = parseStyle(fade);\n  const groups: GroupData[] = processed.groups ?? [];\n\n  if (!groups.length) return;\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;\n\n  return {\n    mask: gradients.join(', '),\n    'mask-composite': 'intersect',\n  };\n}\n\nfadeStyle.__lookupStyles = ['fade'];\n"],"mappings":";;AAEA,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;CAGX,MAAM,SADY,WAAW,KAAK,CACI,UAAU,EAAE;AAElD,KAAI,CAAC,OAAO,OAAQ;CAEpB,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;AAEvB,QAAO;EACL,MAAM,UAAU,KAAK,KAAK;EAC1B,kBAAkB;EACnB;;AAGH,UAAU,iBAAiB,CAAC,OAAO"}

package/dist/styles/fill.d.ts

@@ -0,0 +1,42 @@
+//#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> | undefined;
+declare namespace fillStyle {
+  var __lookupStyles: string[];
+}
+declare function svgFillStyle({
+  svgFill
+}: {
+  svgFill?: string;
+}): {
+  fill: string;
+} | undefined;
+declare namespace svgFillStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+export { fillStyle, svgFillStyle };
+//# sourceMappingURL=fill.d.ts.map

package/dist/styles/fill.js

@@ -0,0 +1,51 @@
+import { parseStyle } from "../utils/styles.js";
+//#region src/styles/fill.ts
+function fillStyle({ fill, backgroundColor, image, backgroundImage, backgroundPosition, backgroundSize, backgroundRepeat, backgroundAttachment, backgroundOrigin, backgroundClip, background }) {
+	if (background) return { background: parseStyle(background).output || background };
+	const result = {};
+	const colorValue = backgroundColor ?? fill;
+	if (colorValue) {
+		const parsed = parseStyle(colorValue);
+		const firstColor = parsed.groups[0]?.colors[0];
+		const secondColor = parsed.groups[0]?.colors[1];
+		result["background-color"] = firstColor || colorValue;
+		if (secondColor) result["--tasty-second-fill-color"] = secondColor;
+	}
+	const gradientLayer = result["--tasty-second-fill-color"] ? "linear-gradient(var(--tasty-second-fill-color), var(--tasty-second-fill-color))" : null;
+	const imageValue = backgroundImage ?? image;
+	if (imageValue) {
+		const imgCss = parseStyle(imageValue).output || imageValue;
+		result["background-image"] = gradientLayer ? `${imgCss}, ${gradientLayer}` : imgCss;
+	} else if (gradientLayer) result["background-image"] = gradientLayer;
+	if (backgroundPosition) result["background-position"] = parseStyle(backgroundPosition).output || backgroundPosition;
+	if (backgroundSize) result["background-size"] = parseStyle(backgroundSize).output || backgroundSize;
+	if (backgroundRepeat) result["background-repeat"] = backgroundRepeat;
+	if (backgroundAttachment) result["background-attachment"] = backgroundAttachment;
+	if (backgroundOrigin) result["background-origin"] = backgroundOrigin;
+	if (backgroundClip) result["background-clip"] = backgroundClip;
+	if (Object.keys(result).length === 0) return;
+	return result;
+}
+fillStyle.__lookupStyles = [
+	"fill",
+	"backgroundColor",
+	"image",
+	"backgroundImage",
+	"backgroundPosition",
+	"backgroundSize",
+	"backgroundRepeat",
+	"backgroundAttachment",
+	"backgroundOrigin",
+	"backgroundClip",
+	"background"
+];
+function svgFillStyle({ svgFill }) {
+	if (!svgFill) return;
+	svgFill = parseStyle(svgFill).groups[0]?.colors[0] || svgFill;
+	return { fill: svgFill };
+}
+svgFillStyle.__lookupStyles = ["svgFill"];
+//#endregion
+export { fillStyle, svgFillStyle };
+
+//# sourceMappingURL=fill.js.map

package/dist/styles/fill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fill.js","names":[],"sources":["../../src/styles/fill.ts"],"sourcesContent":["import { parseStyle } from '../utils/styles';\n\nexport function fillStyle({\n  fill,\n  backgroundColor,\n  image,\n  backgroundImage,\n  backgroundPosition,\n  backgroundSize,\n  backgroundRepeat,\n  backgroundAttachment,\n  backgroundOrigin,\n  backgroundClip,\n  background,\n}: {\n  fill?: string;\n  backgroundColor?: string;\n  image?: string;\n  backgroundImage?: string;\n  backgroundPosition?: string;\n  backgroundSize?: string;\n  backgroundRepeat?: string;\n  backgroundAttachment?: string;\n  backgroundOrigin?: string;\n  backgroundClip?: string;\n  background?: string;\n}) {\n  // If background is set, it overrides everything\n  if (background) {\n    const processed = parseStyle(background);\n    return { background: processed.output || background };\n  }\n\n  const result: Record<string, string> = {};\n\n  // Priority: backgroundColor > fill\n  const colorValue = backgroundColor ?? fill;\n  if (colorValue) {\n    const parsed = parseStyle(colorValue);\n    const firstColor = parsed.groups[0]?.colors[0];\n    const secondColor = parsed.groups[0]?.colors[1];\n\n    result['background-color'] = firstColor || colorValue;\n\n    if (secondColor) {\n      result['--tasty-second-fill-color'] = secondColor;\n    }\n  }\n\n  const gradientLayer = result['--tasty-second-fill-color']\n    ? 'linear-gradient(var(--tasty-second-fill-color), var(--tasty-second-fill-color))'\n    : null;\n\n  // Priority: backgroundImage > image\n  const imageValue = backgroundImage ?? image;\n  if (imageValue) {\n    const parsed = parseStyle(imageValue);\n    const imgCss = parsed.output || imageValue;\n\n    result['background-image'] = gradientLayer\n      ? `${imgCss}, ${gradientLayer}`\n      : imgCss;\n  } else if (gradientLayer) {\n    result['background-image'] = gradientLayer;\n  }\n\n  // Other background properties (pass through with parseStyle for token support)\n  if (backgroundPosition) {\n    result['background-position'] =\n      parseStyle(backgroundPosition).output || backgroundPosition;\n  }\n  if (backgroundSize) {\n    result['background-size'] =\n      parseStyle(backgroundSize).output || backgroundSize;\n  }\n  if (backgroundRepeat) {\n    result['background-repeat'] = backgroundRepeat;\n  }\n  if (backgroundAttachment) {\n    result['background-attachment'] = backgroundAttachment;\n  }\n  if (backgroundOrigin) {\n    result['background-origin'] = backgroundOrigin;\n  }\n  if (backgroundClip) {\n    result['background-clip'] = backgroundClip;\n  }\n\n  if (Object.keys(result).length === 0) return;\n  return result;\n}\n\nfillStyle.__lookupStyles = [\n  'fill',\n  'backgroundColor',\n  'image',\n  'backgroundImage',\n  'backgroundPosition',\n  'backgroundSize',\n  'backgroundRepeat',\n  'backgroundAttachment',\n  'backgroundOrigin',\n  'backgroundClip',\n  'background',\n];\n\nexport function svgFillStyle({ svgFill }: { svgFill?: string }) {\n  if (!svgFill) return;\n\n  const processed = parseStyle(svgFill);\n  svgFill = processed.groups[0]?.colors[0] || svgFill;\n\n  return { fill: svgFill };\n}\n\nsvgFillStyle.__lookupStyles = ['svgFill'];\n"],"mappings":";;AAEA,SAAgB,UAAU,EACxB,MACA,iBACA,OACA,iBACA,oBACA,gBACA,kBACA,sBACA,kBACA,gBACA,cAaC;AAED,KAAI,WAEF,QAAO,EAAE,YADS,WAAW,WAAW,CACT,UAAU,YAAY;CAGvD,MAAM,SAAiC,EAAE;CAGzC,MAAM,aAAa,mBAAmB;AACtC,KAAI,YAAY;EACd,MAAM,SAAS,WAAW,WAAW;EACrC,MAAM,aAAa,OAAO,OAAO,IAAI,OAAO;EAC5C,MAAM,cAAc,OAAO,OAAO,IAAI,OAAO;AAE7C,SAAO,sBAAsB,cAAc;AAE3C,MAAI,YACF,QAAO,+BAA+B;;CAI1C,MAAM,gBAAgB,OAAO,+BACzB,oFACA;CAGJ,MAAM,aAAa,mBAAmB;AACtC,KAAI,YAAY;EAEd,MAAM,SADS,WAAW,WAAW,CACf,UAAU;AAEhC,SAAO,sBAAsB,gBACzB,GAAG,OAAO,IAAI,kBACd;YACK,cACT,QAAO,sBAAsB;AAI/B,KAAI,mBACF,QAAO,yBACL,WAAW,mBAAmB,CAAC,UAAU;AAE7C,KAAI,eACF,QAAO,qBACL,WAAW,eAAe,CAAC,UAAU;AAEzC,KAAI,iBACF,QAAO,uBAAuB;AAEhC,KAAI,qBACF,QAAO,2BAA2B;AAEpC,KAAI,iBACF,QAAO,uBAAuB;AAEhC,KAAI,eACF,QAAO,qBAAqB;AAG9B,KAAI,OAAO,KAAK,OAAO,CAAC,WAAW,EAAG;AACtC,QAAO;;AAGT,UAAU,iBAAiB;CACzB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,SAAgB,aAAa,EAAE,WAAiC;AAC9D,KAAI,CAAC,QAAS;AAGd,WADkB,WAAW,QAAQ,CACjB,OAAO,IAAI,OAAO,MAAM;AAE5C,QAAO,EAAE,MAAM,SAAS;;AAG1B,aAAa,iBAAiB,CAAC,UAAU"}

package/dist/styles/flow.d.ts

@@ -0,0 +1,16 @@
+//#region src/styles/flow.d.ts
+declare function flowStyle({
+  display,
+  flow
+}: {
+  display?: string;
+  flow?: string;
+}): {
+  [x: string]: string | undefined;
+} | null;
+declare namespace flowStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+export { flowStyle };
+//# sourceMappingURL=flow.d.ts.map

package/dist/styles/flow.js

@@ -0,0 +1,12 @@
+//#region src/styles/flow.ts
+function flowStyle({ display = "block", flow }) {
+	let style;
+	if (display.includes("grid")) style = "grid-auto-flow";
+	else if (display.includes("flex")) style = "flex-flow";
+	return style ? { [style]: flow } : null;
+}
+flowStyle.__lookupStyles = ["display", "flow"];
+//#endregion
+export { flowStyle };
+
+//# sourceMappingURL=flow.js.map

package/dist/styles/flow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flow.js","names":[],"sources":["../../src/styles/flow.ts"],"sourcesContent":["export function flowStyle({\n  display = 'block',\n  flow,\n}: {\n  display?: string;\n  flow?: string;\n}) {\n  let style;\n\n  if (display.includes('grid')) {\n    style = 'grid-auto-flow';\n  } else if (display.includes('flex')) {\n    style = 'flex-flow';\n  }\n\n  return style ? { [style]: flow } : null;\n}\n\nflowStyle.__lookupStyles = ['display', 'flow'];\n"],"mappings":";AAAA,SAAgB,UAAU,EACxB,UAAU,SACV,QAIC;CACD,IAAI;AAEJ,KAAI,QAAQ,SAAS,OAAO,CAC1B,SAAQ;UACC,QAAQ,SAAS,OAAO,CACjC,SAAQ;AAGV,QAAO,QAAQ,GAAG,QAAQ,MAAM,GAAG;;AAGrC,UAAU,iBAAiB,CAAC,WAAW,OAAO"}

package/dist/styles/gap.d.ts

@@ -0,0 +1,31 @@
+//#region src/styles/gap.d.ts
+declare function gapStyle({
+  display,
+  flow,
+  gap
+}: {
+  display?: string;
+  flow?: string;
+  gap?: string | number | boolean;
+}): {
+  gap: string;
+  $?: undefined;
+} | ({
+  'margin-right': string;
+  'margin-bottom': string;
+  $?: undefined;
+} | {
+  $: string;
+  'margin-right': string;
+  'margin-bottom': string;
+})[] | {
+  [x: string]: string;
+  $: string;
+  gap?: undefined;
+} | undefined;
+declare namespace gapStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+export { gapStyle };
+//# sourceMappingURL=gap.d.ts.map