@tenphi/tasty 0.1.0

package/dist/styles/transition.js

@@ -0,0 +1,138 @@
+import { parseStyle } from "../utils/styles.js";
+
+//#region src/styles/transition.ts
+const SECOND_FILL_COLOR_PROPERTY = "--tasty-second-fill-color";
+const MAP = {
+	fade: ["mask", "mask-composite"],
+	translate: ["transform", "translate"],
+	rotate: ["transform", "rotate"],
+	scale: ["transform", "scale"],
+	fill: [
+		"background-color",
+		"background-image",
+		SECOND_FILL_COLOR_PROPERTY
+	],
+	image: [
+		"background-image",
+		"background-position",
+		"background-size",
+		"background-repeat",
+		"background-attachment",
+		"background-origin",
+		"background-clip",
+		SECOND_FILL_COLOR_PROPERTY
+	],
+	background: [
+		"background-color",
+		"background-image",
+		"background-position",
+		"background-size",
+		"background-repeat",
+		"background-attachment",
+		"background-origin",
+		"background-clip",
+		SECOND_FILL_COLOR_PROPERTY
+	],
+	border: [
+		"border",
+		"border-top",
+		"border-right",
+		"border-bottom",
+		"border-left"
+	],
+	filter: ["filter", "backdrop-filter"],
+	radius: ["border-radius"],
+	shadow: ["box-shadow"],
+	outline: ["outline", "outline-offset"],
+	preset: [
+		"font-size",
+		"line-height",
+		"letter-spacing",
+		"font-weight",
+		"font-style"
+	],
+	text: ["font-weight", "text-decoration-color"],
+	color: ["color"],
+	opacity: ["opacity"],
+	theme: [
+		"color",
+		"background-color",
+		"background-image",
+		"box-shadow",
+		"border",
+		"border-radius",
+		"outline",
+		"opacity",
+		SECOND_FILL_COLOR_PROPERTY
+	],
+	width: [
+		"max-width",
+		"min-width",
+		"width"
+	],
+	height: [
+		"max-height",
+		"min-height",
+		"height"
+	],
+	gap: ["gap", "margin"],
+	zIndex: ["z-index"],
+	inset: [
+		"inset",
+		"top",
+		"right",
+		"bottom",
+		"left"
+	]
+};
+const DEFAULT_EASING = "linear";
+function getTiming(name) {
+	return `var(--${name}-transition, var(--transition))`;
+}
+function transitionStyle({ transition }) {
+	if (!transition) return;
+	const processed = parseStyle(transition);
+	const tokens = [];
+	processed.groups.forEach((g, idx) => {
+		tokens.push(...g.all);
+		if (idx < processed.groups.length - 1) tokens.push(",");
+	});
+	if (!tokens) return;
+	let tempTransition = [];
+	const transitions = [];
+	tokens.forEach((token) => {
+		if (token === ",") {
+			if (tempTransition) {
+				transitions.push(tempTransition);
+				tempTransition = [];
+			}
+		} else tempTransition.push(token);
+	});
+	if (tempTransition) transitions.push(tempTransition);
+	const map = {};
+	transitions.forEach((transition) => {
+		const name = transition[0];
+		const timing = transition[1];
+		const easing = transition[2];
+		const delay = transition[3];
+		(MAP[name] || [name]).forEach((style) => {
+			map[style] = [
+				name,
+				easing,
+				timing,
+				delay
+			];
+		});
+	});
+	return { transition: Object.entries(map).map(([style, [name, easing, timing, delay]]) => {
+		let value = `${style} ${timing || getTiming(name)}`;
+		if (easing || delay) value += ` ${easing || DEFAULT_EASING}`;
+		if (delay) value += ` ${delay}`;
+		return value;
+	}).join(", ") };
+}
+transitionStyle.__lookupStyles = ["transition"];
+
+//#endregion
+export { transitionStyle };
+//# sourceMappingURL=transition.js.map

package/dist/styles/transition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transition.js","names":[],"sources":["../../src/styles/transition.ts"],"sourcesContent":["import { parseStyle } from '../utils/styles';\n\nconst SECOND_FILL_COLOR_PROPERTY = '--tasty-second-fill-color';\n\nconst MAP = {\n  fade: ['mask', 'mask-composite'],\n  translate: ['transform', 'translate'],\n  rotate: ['transform', 'rotate'],\n  scale: ['transform', 'scale'],\n  fill: ['background-color', 'background-image', SECOND_FILL_COLOR_PROPERTY],\n  image: [\n    'background-image',\n    'background-position',\n    'background-size',\n    'background-repeat',\n    'background-attachment',\n    'background-origin',\n    'background-clip',\n    SECOND_FILL_COLOR_PROPERTY,\n  ],\n  background: [\n    'background-color',\n    'background-image',\n    'background-position',\n    'background-size',\n    'background-repeat',\n    'background-attachment',\n    'background-origin',\n    'background-clip',\n    SECOND_FILL_COLOR_PROPERTY,\n  ],\n  border: [\n    'border',\n    'border-top',\n    'border-right',\n    'border-bottom',\n    'border-left',\n  ],\n  filter: ['filter', 'backdrop-filter'],\n  radius: ['border-radius'],\n  shadow: ['box-shadow'],\n  outline: ['outline', 'outline-offset'],\n  preset: [\n    'font-size',\n    'line-height',\n    'letter-spacing',\n    'font-weight',\n    'font-style',\n  ],\n  text: ['font-weight', 'text-decoration-color'],\n  color: ['color'],\n  opacity: ['opacity'],\n  theme: [\n    'color',\n    'background-color',\n    'background-image',\n    'box-shadow',\n    'border',\n    'border-radius',\n    'outline',\n    'opacity',\n    SECOND_FILL_COLOR_PROPERTY,\n  ],\n  width: ['max-width', 'min-width', 'width'],\n  height: ['max-height', 'min-height', 'height'],\n  gap: ['gap', 'margin'],\n  zIndex: ['z-index'],\n  inset: ['inset', 'top', 'right', 'bottom', 'left'],\n};\n\nexport const DEFAULT_TIMING = 'var(--transition)';\nconst DEFAULT_EASING = 'linear';\n\nfunction getTiming(name) {\n  return `var(--${name}-transition, var(--transition))`;\n}\n\nexport function transitionStyle({ transition }) {\n  if (!transition) return;\n\n  const processed = parseStyle(transition);\n  const tokens: string[] = [];\n  processed.groups.forEach((g, idx) => {\n    tokens.push(...g.all);\n    if (idx < processed.groups.length - 1) tokens.push(',');\n  });\n\n  if (!tokens) return;\n\n  let tempTransition: string[] = [];\n  const transitions: string[][] = [];\n\n  tokens.forEach((token) => {\n    if (token === ',') {\n      if (tempTransition) {\n        transitions.push(tempTransition);\n        tempTransition = [];\n      }\n    } else {\n      tempTransition.push(token);\n    }\n  });\n\n  if (tempTransition) {\n    transitions.push(tempTransition);\n  }\n\n  const map: {\n    name?: string;\n    easing?: string;\n    timing?: string;\n    delay?: string;\n  } = {};\n\n  transitions.forEach((transition) => {\n    const name = transition[0];\n    const timing = transition[1];\n    const easing = transition[2];\n    const delay = transition[3];\n\n    const styles = MAP[name] || [name];\n\n    styles.forEach((style) => {\n      map[style] = [name, easing, timing, delay];\n    });\n  });\n\n  const result = Object.entries(map)\n    .map(([style, [name, easing, timing, delay]]) => {\n      let value = `${style} ${timing || getTiming(name)}`;\n      if (easing || delay) {\n        value += ` ${easing || DEFAULT_EASING}`;\n      }\n      if (delay) {\n        value += ` ${delay}`;\n      }\n      return value;\n    })\n    .join(', ');\n\n  return { transition: result };\n}\n\ntransitionStyle.__lookupStyles = ['transition'];\n"],"mappings":";;;AAEA,MAAM,6BAA6B;AAEnC,MAAM,MAAM;CACV,MAAM,CAAC,QAAQ,iBAAiB;CAChC,WAAW,CAAC,aAAa,YAAY;CACrC,QAAQ,CAAC,aAAa,SAAS;CAC/B,OAAO,CAAC,aAAa,QAAQ;CAC7B,MAAM;EAAC;EAAoB;EAAoB;EAA2B;CAC1E,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,YAAY;EACV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,QAAQ;EACN;EACA;EACA;EACA;EACA;EACD;CACD,QAAQ,CAAC,UAAU,kBAAkB;CACrC,QAAQ,CAAC,gBAAgB;CACzB,QAAQ,CAAC,aAAa;CACtB,SAAS,CAAC,WAAW,iBAAiB;CACtC,QAAQ;EACN;EACA;EACA;EACA;EACA;EACD;CACD,MAAM,CAAC,eAAe,wBAAwB;CAC9C,OAAO,CAAC,QAAQ;CAChB,SAAS,CAAC,UAAU;CACpB,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,OAAO;EAAC;EAAa;EAAa;EAAQ;CAC1C,QAAQ;EAAC;EAAc;EAAc;EAAS;CAC9C,KAAK,CAAC,OAAO,SAAS;CACtB,QAAQ,CAAC,UAAU;CACnB,OAAO;EAAC;EAAS;EAAO;EAAS;EAAU;EAAO;CACnD;AAGD,MAAM,iBAAiB;AAEvB,SAAS,UAAU,MAAM;AACvB,QAAO,SAAS,KAAK;;AAGvB,SAAgB,gBAAgB,EAAE,cAAc;AAC9C,KAAI,CAAC,WAAY;CAEjB,MAAM,YAAY,WAAW,WAAW;CACxC,MAAM,SAAmB,EAAE;AAC3B,WAAU,OAAO,SAAS,GAAG,QAAQ;AACnC,SAAO,KAAK,GAAG,EAAE,IAAI;AACrB,MAAI,MAAM,UAAU,OAAO,SAAS,EAAG,QAAO,KAAK,IAAI;GACvD;AAEF,KAAI,CAAC,OAAQ;CAEb,IAAI,iBAA2B,EAAE;CACjC,MAAM,cAA0B,EAAE;AAElC,QAAO,SAAS,UAAU;AACxB,MAAI,UAAU,KACZ;OAAI,gBAAgB;AAClB,gBAAY,KAAK,eAAe;AAChC,qBAAiB,EAAE;;QAGrB,gBAAe,KAAK,MAAM;GAE5B;AAEF,KAAI,eACF,aAAY,KAAK,eAAe;CAGlC,MAAM,MAKF,EAAE;AAEN,aAAY,SAAS,eAAe;EAClC,MAAM,OAAO,WAAW;EACxB,MAAM,SAAS,WAAW;EAC1B,MAAM,SAAS,WAAW;EAC1B,MAAM,QAAQ,WAAW;AAIzB,GAFe,IAAI,SAAS,CAAC,KAAK,EAE3B,SAAS,UAAU;AACxB,OAAI,SAAS;IAAC;IAAM;IAAQ;IAAQ;IAAM;IAC1C;GACF;AAeF,QAAO,EAAE,YAbM,OAAO,QAAQ,IAAI,CAC/B,KAAK,CAAC,OAAO,CAAC,MAAM,QAAQ,QAAQ,YAAY;EAC/C,IAAI,QAAQ,GAAG,MAAM,GAAG,UAAU,UAAU,KAAK;AACjD,MAAI,UAAU,MACZ,UAAS,IAAI,UAAU;AAEzB,MAAI,MACF,UAAS,IAAI;AAEf,SAAO;GACP,CACD,KAAK,KAAK,EAEgB;;AAG/B,gBAAgB,iBAAiB,CAAC,aAAa"}

package/dist/styles/transition.mjs

@@ -0,0 +1,138 @@
+import { parseStyle } from "../utils/styles.mjs";
+
+//#region src/styles/transition.ts
+const SECOND_FILL_COLOR_PROPERTY = "--tasty-second-fill-color";
+const MAP = {
+	fade: ["mask", "mask-composite"],
+	translate: ["transform", "translate"],
+	rotate: ["transform", "rotate"],
+	scale: ["transform", "scale"],
+	fill: [
+		"background-color",
+		"background-image",
+		SECOND_FILL_COLOR_PROPERTY
+	],
+	image: [
+		"background-image",
+		"background-position",
+		"background-size",
+		"background-repeat",
+		"background-attachment",
+		"background-origin",
+		"background-clip",
+		SECOND_FILL_COLOR_PROPERTY
+	],
+	background: [
+		"background-color",
+		"background-image",
+		"background-position",
+		"background-size",
+		"background-repeat",
+		"background-attachment",
+		"background-origin",
+		"background-clip",
+		SECOND_FILL_COLOR_PROPERTY
+	],
+	border: [
+		"border",
+		"border-top",
+		"border-right",
+		"border-bottom",
+		"border-left"
+	],
+	filter: ["filter", "backdrop-filter"],
+	radius: ["border-radius"],
+	shadow: ["box-shadow"],
+	outline: ["outline", "outline-offset"],
+	preset: [
+		"font-size",
+		"line-height",
+		"letter-spacing",
+		"font-weight",
+		"font-style"
+	],
+	text: ["font-weight", "text-decoration-color"],
+	color: ["color"],
+	opacity: ["opacity"],
+	theme: [
+		"color",
+		"background-color",
+		"background-image",
+		"box-shadow",
+		"border",
+		"border-radius",
+		"outline",
+		"opacity",
+		SECOND_FILL_COLOR_PROPERTY
+	],
+	width: [
+		"max-width",
+		"min-width",
+		"width"
+	],
+	height: [
+		"max-height",
+		"min-height",
+		"height"
+	],
+	gap: ["gap", "margin"],
+	zIndex: ["z-index"],
+	inset: [
+		"inset",
+		"top",
+		"right",
+		"bottom",
+		"left"
+	]
+};
+const DEFAULT_EASING = "linear";
+function getTiming(name) {
+	return `var(--${name}-transition, var(--transition))`;
+}
+function transitionStyle({ transition }) {
+	if (!transition) return;
+	const processed = parseStyle(transition);
+	const tokens = [];
+	processed.groups.forEach((g, idx) => {
+		tokens.push(...g.all);
+		if (idx < processed.groups.length - 1) tokens.push(",");
+	});
+	if (!tokens) return;
+	let tempTransition = [];
+	const transitions = [];
+	tokens.forEach((token) => {
+		if (token === ",") {
+			if (tempTransition) {
+				transitions.push(tempTransition);
+				tempTransition = [];
+			}
+		} else tempTransition.push(token);
+	});
+	if (tempTransition) transitions.push(tempTransition);
+	const map = {};
+	transitions.forEach((transition) => {
+		const name = transition[0];
+		const timing = transition[1];
+		const easing = transition[2];
+		const delay = transition[3];
+		(MAP[name] || [name]).forEach((style) => {
+			map[style] = [
+				name,
+				easing,
+				timing,
+				delay
+			];
+		});
+	});
+	return { transition: Object.entries(map).map(([style, [name, easing, timing, delay]]) => {
+		let value = `${style} ${timing || getTiming(name)}`;
+		if (easing || delay) value += ` ${easing || DEFAULT_EASING}`;
+		if (delay) value += ` ${delay}`;
+		return value;
+	}).join(", ") };
+}
+transitionStyle.__lookupStyles = ["transition"];
+
+//#endregion
+export { transitionStyle };
+//# sourceMappingURL=transition.mjs.map

package/dist/styles/transition.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"transition.mjs","names":[],"sources":["../../src/styles/transition.ts"],"sourcesContent":["import { parseStyle } from '../utils/styles';\n\nconst SECOND_FILL_COLOR_PROPERTY = '--tasty-second-fill-color';\n\nconst MAP = {\n  fade: ['mask', 'mask-composite'],\n  translate: ['transform', 'translate'],\n  rotate: ['transform', 'rotate'],\n  scale: ['transform', 'scale'],\n  fill: ['background-color', 'background-image', SECOND_FILL_COLOR_PROPERTY],\n  image: [\n    'background-image',\n    'background-position',\n    'background-size',\n    'background-repeat',\n    'background-attachment',\n    'background-origin',\n    'background-clip',\n    SECOND_FILL_COLOR_PROPERTY,\n  ],\n  background: [\n    'background-color',\n    'background-image',\n    'background-position',\n    'background-size',\n    'background-repeat',\n    'background-attachment',\n    'background-origin',\n    'background-clip',\n    SECOND_FILL_COLOR_PROPERTY,\n  ],\n  border: [\n    'border',\n    'border-top',\n    'border-right',\n    'border-bottom',\n    'border-left',\n  ],\n  filter: ['filter', 'backdrop-filter'],\n  radius: ['border-radius'],\n  shadow: ['box-shadow'],\n  outline: ['outline', 'outline-offset'],\n  preset: [\n    'font-size',\n    'line-height',\n    'letter-spacing',\n    'font-weight',\n    'font-style',\n  ],\n  text: ['font-weight', 'text-decoration-color'],\n  color: ['color'],\n  opacity: ['opacity'],\n  theme: [\n    'color',\n    'background-color',\n    'background-image',\n    'box-shadow',\n    'border',\n    'border-radius',\n    'outline',\n    'opacity',\n    SECOND_FILL_COLOR_PROPERTY,\n  ],\n  width: ['max-width', 'min-width', 'width'],\n  height: ['max-height', 'min-height', 'height'],\n  gap: ['gap', 'margin'],\n  zIndex: ['z-index'],\n  inset: ['inset', 'top', 'right', 'bottom', 'left'],\n};\n\nexport const DEFAULT_TIMING = 'var(--transition)';\nconst DEFAULT_EASING = 'linear';\n\nfunction getTiming(name) {\n  return `var(--${name}-transition, var(--transition))`;\n}\n\nexport function transitionStyle({ transition }) {\n  if (!transition) return;\n\n  const processed = parseStyle(transition);\n  const tokens: string[] = [];\n  processed.groups.forEach((g, idx) => {\n    tokens.push(...g.all);\n    if (idx < processed.groups.length - 1) tokens.push(',');\n  });\n\n  if (!tokens) return;\n\n  let tempTransition: string[] = [];\n  const transitions: string[][] = [];\n\n  tokens.forEach((token) => {\n    if (token === ',') {\n      if (tempTransition) {\n        transitions.push(tempTransition);\n        tempTransition = [];\n      }\n    } else {\n      tempTransition.push(token);\n    }\n  });\n\n  if (tempTransition) {\n    transitions.push(tempTransition);\n  }\n\n  const map: {\n    name?: string;\n    easing?: string;\n    timing?: string;\n    delay?: string;\n  } = {};\n\n  transitions.forEach((transition) => {\n    const name = transition[0];\n    const timing = transition[1];\n    const easing = transition[2];\n    const delay = transition[3];\n\n    const styles = MAP[name] || [name];\n\n    styles.forEach((style) => {\n      map[style] = [name, easing, timing, delay];\n    });\n  });\n\n  const result = Object.entries(map)\n    .map(([style, [name, easing, timing, delay]]) => {\n      let value = `${style} ${timing || getTiming(name)}`;\n      if (easing || delay) {\n        value += ` ${easing || DEFAULT_EASING}`;\n      }\n      if (delay) {\n        value += ` ${delay}`;\n      }\n      return value;\n    })\n    .join(', ');\n\n  return { transition: result };\n}\n\ntransitionStyle.__lookupStyles = ['transition'];\n"],"mappings":";;;AAEA,MAAM,6BAA6B;AAEnC,MAAM,MAAM;CACV,MAAM,CAAC,QAAQ,iBAAiB;CAChC,WAAW,CAAC,aAAa,YAAY;CACrC,QAAQ,CAAC,aAAa,SAAS;CAC/B,OAAO,CAAC,aAAa,QAAQ;CAC7B,MAAM;EAAC;EAAoB;EAAoB;EAA2B;CAC1E,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,YAAY;EACV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,QAAQ;EACN;EACA;EACA;EACA;EACA;EACD;CACD,QAAQ,CAAC,UAAU,kBAAkB;CACrC,QAAQ,CAAC,gBAAgB;CACzB,QAAQ,CAAC,aAAa;CACtB,SAAS,CAAC,WAAW,iBAAiB;CACtC,QAAQ;EACN;EACA;EACA;EACA;EACA;EACD;CACD,MAAM,CAAC,eAAe,wBAAwB;CAC9C,OAAO,CAAC,QAAQ;CAChB,SAAS,CAAC,UAAU;CACpB,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,OAAO;EAAC;EAAa;EAAa;EAAQ;CAC1C,QAAQ;EAAC;EAAc;EAAc;EAAS;CAC9C,KAAK,CAAC,OAAO,SAAS;CACtB,QAAQ,CAAC,UAAU;CACnB,OAAO;EAAC;EAAS;EAAO;EAAS;EAAU;EAAO;CACnD;AAGD,MAAM,iBAAiB;AAEvB,SAAS,UAAU,MAAM;AACvB,QAAO,SAAS,KAAK;;AAGvB,SAAgB,gBAAgB,EAAE,cAAc;AAC9C,KAAI,CAAC,WAAY;CAEjB,MAAM,YAAY,WAAW,WAAW;CACxC,MAAM,SAAmB,EAAE;AAC3B,WAAU,OAAO,SAAS,GAAG,QAAQ;AACnC,SAAO,KAAK,GAAG,EAAE,IAAI;AACrB,MAAI,MAAM,UAAU,OAAO,SAAS,EAAG,QAAO,KAAK,IAAI;GACvD;AAEF,KAAI,CAAC,OAAQ;CAEb,IAAI,iBAA2B,EAAE;CACjC,MAAM,cAA0B,EAAE;AAElC,QAAO,SAAS,UAAU;AACxB,MAAI,UAAU,KACZ;OAAI,gBAAgB;AAClB,gBAAY,KAAK,eAAe;AAChC,qBAAiB,EAAE;;QAGrB,gBAAe,KAAK,MAAM;GAE5B;AAEF,KAAI,eACF,aAAY,KAAK,eAAe;CAGlC,MAAM,MAKF,EAAE;AAEN,aAAY,SAAS,eAAe;EAClC,MAAM,OAAO,WAAW;EACxB,MAAM,SAAS,WAAW;EAC1B,MAAM,SAAS,WAAW;EAC1B,MAAM,QAAQ,WAAW;AAIzB,GAFe,IAAI,SAAS,CAAC,KAAK,EAE3B,SAAS,UAAU;AACxB,OAAI,SAAS;IAAC;IAAM;IAAQ;IAAQ;IAAM;IAC1C;GACF;AAeF,QAAO,EAAE,YAbM,OAAO,QAAQ,IAAI,CAC/B,KAAK,CAAC,OAAO,CAAC,MAAM,QAAQ,QAAQ,YAAY;EAC/C,IAAI,QAAQ,GAAG,MAAM,GAAG,UAAU,UAAU,KAAK;AACjD,MAAI,UAAU,MACZ,UAAS,IAAI,UAAU;AAEzB,MAAI,MACF,UAAS,IAAI;AAEf,SAAO;GACP,CACD,KAAK,KAAK,EAEgB;;AAG/B,gBAAgB,iBAAiB,CAAC,aAAa"}