@tenphi/tasty 0.0.0-snapshot.05c1c22

package/dist/styles/outline.d.ts

@@ -0,0 +1,29 @@
+//#region src/styles/outline.d.ts
+interface OutlineStyleProps {
+  outline?: string | boolean | number;
+  outlineOffset?: string | number;
+}
+/**
+ * Generates CSS for outline property with optional offset.
+ *
+ * Syntax:
+ * - `outline="2px solid #red"` - outline only
+ * - `outline="2px solid #red / 4px"` - outline with offset (slash separator)
+ * - `outline="2px / 4px"` - width with offset (simpler form)
+ * - `outline={true}` - default 1ow solid outline
+ * - `outlineOffset="4px"` - offset as separate prop (can be combined with outline)
+ *
+ * Priority: slash syntax in outline takes precedence over outlineOffset prop
+ *
+ * @return CSS properties for outline and optionally outline-offset
+ */
+declare function outlineStyle({
+  outline,
+  outlineOffset
+}: OutlineStyleProps): Record<string, string> | undefined;
+declare namespace outlineStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+export { outlineStyle };
+//# sourceMappingURL=outline.d.ts.map

package/dist/styles/outline.js

@@ -0,0 +1,64 @@
+import { filterMods, parseStyle } from "../utils/styles.js";
+//#region src/styles/outline.ts
+const BORDER_STYLES = [
+	"none",
+	"hidden",
+	"dotted",
+	"dashed",
+	"solid",
+	"double",
+	"groove",
+	"ridge",
+	"inset",
+	"outset"
+];
+/**
+* Generates CSS for outline property with optional offset.
+*
+* Syntax:
+* - `outline="2px solid #red"` - outline only
+* - `outline="2px solid #red / 4px"` - outline with offset (slash separator)
+* - `outline="2px / 4px"` - width with offset (simpler form)
+* - `outline={true}` - default 1ow solid outline
+* - `outlineOffset="4px"` - offset as separate prop (can be combined with outline)
+*
+* Priority: slash syntax in outline takes precedence over outlineOffset prop
+*
+* @return CSS properties for outline and optionally outline-offset
+*/
+function outlineStyle({ outline, outlineOffset }) {
+	const result = {};
+	if (outline != null && outline !== false) {
+		let outlineValue = outline;
+		if (outline === true) outlineValue = "1ow";
+		if (outline === 0) outlineValue = "0";
+		const group = parseStyle(String(outlineValue)).groups[0];
+		if (group) {
+			const { parts } = group;
+			const outlinePart = parts[0] ?? {
+				values: [],
+				mods: [],
+				colors: []
+			};
+			const offsetPart = parts[1];
+			const typeMods = filterMods(outlinePart.mods, BORDER_STYLES);
+			result["outline"] = [
+				outlinePart.values[0] || "var(--outline-width)",
+				typeMods[0] || "solid",
+				outlinePart.colors[0] || "var(--outline-color)"
+			].join(" ");
+			if (offsetPart?.values[0]) result["outline-offset"] = offsetPart.values[0];
+		}
+	}
+	if (outlineOffset != null && !result["outline-offset"]) {
+		const offsetValue = typeof outlineOffset === "number" ? `${outlineOffset}px` : outlineOffset;
+		result["outline-offset"] = parseStyle(offsetValue).groups[0]?.values[0] || offsetValue;
+	}
+	if (Object.keys(result).length === 0) return;
+	return result;
+}
+outlineStyle.__lookupStyles = ["outline", "outlineOffset"];
+//#endregion
+export { outlineStyle };
+
+//# sourceMappingURL=outline.js.map

package/dist/styles/outline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outline.js","names":[],"sources":["../../src/styles/outline.ts"],"sourcesContent":["import { filterMods, parseStyle } from '../utils/styles';\n\nconst BORDER_STYLES = [\n  'none',\n  'hidden',\n  'dotted',\n  'dashed',\n  'solid',\n  'double',\n  'groove',\n  'ridge',\n  'inset',\n  'outset',\n];\n\ninterface OutlineStyleProps {\n  outline?: string | boolean | number;\n  outlineOffset?: string | number;\n}\n\n/**\n * Generates CSS for outline property with optional offset.\n *\n * Syntax:\n * - `outline=\"2px solid #red\"` - outline only\n * - `outline=\"2px solid #red / 4px\"` - outline with offset (slash separator)\n * - `outline=\"2px / 4px\"` - width with offset (simpler form)\n * - `outline={true}` - default 1ow solid outline\n * - `outlineOffset=\"4px\"` - offset as separate prop (can be combined with outline)\n *\n * Priority: slash syntax in outline takes precedence over outlineOffset prop\n *\n * @return CSS properties for outline and optionally outline-offset\n */\nexport function outlineStyle({ outline, outlineOffset }: OutlineStyleProps) {\n  const result: Record<string, string> = {};\n\n  // Handle outline (0 is valid - means no outline)\n  if (outline != null && outline !== false) {\n    let outlineValue: string | boolean | number = outline;\n    if (outline === true) outlineValue = '1ow';\n    if (outline === 0) outlineValue = '0';\n\n    const processed = parseStyle(String(outlineValue));\n    const group = processed.groups[0];\n\n    if (group) {\n      const { parts } = group;\n      const outlinePart = parts[0] ?? { values: [], mods: [], colors: [] };\n      const offsetPart = parts[1];\n\n      const typeMods = filterMods(outlinePart.mods, BORDER_STYLES);\n\n      const value = outlinePart.values[0] || 'var(--outline-width)';\n      const type = typeMods[0] || 'solid';\n      const outlineColor = outlinePart.colors[0] || 'var(--outline-color)';\n\n      result['outline'] = [value, type, outlineColor].join(' ');\n\n      // Check for offset in second part (after /) - takes precedence\n      if (offsetPart?.values[0]) {\n        result['outline-offset'] = offsetPart.values[0];\n      }\n    }\n  }\n\n  // Handle outlineOffset prop (only if not already set by slash syntax)\n  if (outlineOffset != null && !result['outline-offset']) {\n    const offsetValue =\n      typeof outlineOffset === 'number' ? `${outlineOffset}px` : outlineOffset;\n    const processed = parseStyle(offsetValue);\n    result['outline-offset'] = processed.groups[0]?.values[0] || offsetValue;\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\noutlineStyle.__lookupStyles = ['outline', 'outlineOffset'];\n"],"mappings":";;AAEA,MAAM,gBAAgB;CACpB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;;;;;;;;;;;;;;AAqBD,SAAgB,aAAa,EAAE,SAAS,iBAAoC;CAC1E,MAAM,SAAiC,EAAE;AAGzC,KAAI,WAAW,QAAQ,YAAY,OAAO;EACxC,IAAI,eAA0C;AAC9C,MAAI,YAAY,KAAM,gBAAe;AACrC,MAAI,YAAY,EAAG,gBAAe;EAGlC,MAAM,QADY,WAAW,OAAO,aAAa,CAAC,CAC1B,OAAO;AAE/B,MAAI,OAAO;GACT,MAAM,EAAE,UAAU;GAClB,MAAM,cAAc,MAAM,MAAM;IAAE,QAAQ,EAAE;IAAE,MAAM,EAAE;IAAE,QAAQ,EAAE;IAAE;GACpE,MAAM,aAAa,MAAM;GAEzB,MAAM,WAAW,WAAW,YAAY,MAAM,cAAc;AAM5D,UAAO,aAAa;IAJN,YAAY,OAAO,MAAM;IAC1B,SAAS,MAAM;IACP,YAAY,OAAO,MAAM;IAEC,CAAC,KAAK,IAAI;AAGzD,OAAI,YAAY,OAAO,GACrB,QAAO,oBAAoB,WAAW,OAAO;;;AAMnD,KAAI,iBAAiB,QAAQ,CAAC,OAAO,mBAAmB;EACtD,MAAM,cACJ,OAAO,kBAAkB,WAAW,GAAG,cAAc,MAAM;AAE7D,SAAO,oBADW,WAAW,YAAY,CACJ,OAAO,IAAI,OAAO,MAAM;;AAI/D,KAAI,OAAO,KAAK,OAAO,CAAC,WAAW,EACjC;AAGF,QAAO;;AAGT,aAAa,iBAAiB,CAAC,WAAW,gBAAgB"}

package/dist/styles/padding.d.ts

@@ -0,0 +1,24 @@
+//#region src/styles/padding.d.ts
+declare function paddingStyle({
+  padding,
+  paddingBlock,
+  paddingInline,
+  paddingTop,
+  paddingRight,
+  paddingBottom,
+  paddingLeft
+}: {
+  padding?: string | number | boolean;
+  paddingBlock?: string | number | boolean;
+  paddingInline?: string | number | boolean;
+  paddingTop?: string | number | boolean;
+  paddingRight?: string | number | boolean;
+  paddingBottom?: string | number | boolean;
+  paddingLeft?: string | number | boolean;
+}): {};
+declare namespace paddingStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+export { paddingStyle };
+//# sourceMappingURL=padding.d.ts.map

package/dist/styles/padding.js

@@ -0,0 +1,103 @@
+import { DIRECTIONS, filterMods, parseStyle } from "../utils/styles.js";
+//#region src/styles/padding.ts
+/**
+* Parse a padding value and return the first processed value
+*/
+function parsePaddingValue(value) {
+	if (typeof value === "number") return `${value}px`;
+	if (!value) return null;
+	if (value === true) value = "1x";
+	const { values } = parseStyle(value).groups[0] ?? { values: [] };
+	return values[0] || "var(--gap)";
+}
+/**
+* Extract values and directions from a single parsed group.
+*/
+function extractGroupData(group) {
+	const { values = [], mods = [] } = group;
+	return {
+		values: values.length ? values : ["var(--gap)"],
+		directions: filterMods(mods, DIRECTIONS)
+	};
+}
+/**
+* Apply a single group's values and directions onto a direction map.
+*/
+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];
+	});
+}
+/**
+* Optimize padding output shorthand.
+*/
+function optimizePadding(dirs) {
+	const { top, right, bottom, left } = dirs;
+	if (top === right && right === bottom && bottom === left) return { padding: top };
+	if (top === bottom && left === right) return { padding: `${top} ${left}` };
+	return { padding: `${top} ${right} ${bottom} ${left}` };
+}
+function paddingStyle({ padding, paddingBlock, paddingInline, paddingTop, paddingRight, paddingBottom, paddingLeft }) {
+	if (padding == null && paddingBlock == null && paddingInline == null && paddingTop == null && paddingRight == null && paddingBottom == null && paddingLeft == null) return {};
+	const dirs = {
+		top: "0",
+		right: "0",
+		bottom: "0",
+		left: "0"
+	};
+	if (padding != null) {
+		if (typeof padding === "number") dirs.top = dirs.right = dirs.bottom = dirs.left = `${padding}px`;
+		else if (padding === true) padding = "1x";
+		if (typeof padding === "string" && padding) {
+			const groups = parseStyle(padding).groups ?? [];
+			for (const group of groups) {
+				const { values, directions } = extractGroupData(group);
+				applyGroup(dirs, values, directions);
+			}
+		}
+	}
+	if (paddingBlock != null) {
+		const val = parsePaddingValue(paddingBlock);
+		if (val) dirs.top = dirs.bottom = val;
+	}
+	if (paddingInline != null) {
+		const val = parsePaddingValue(paddingInline);
+		if (val) dirs.left = dirs.right = val;
+	}
+	if (paddingTop != null) {
+		const val = parsePaddingValue(paddingTop);
+		if (val) dirs.top = val;
+	}
+	if (paddingRight != null) {
+		const val = parsePaddingValue(paddingRight);
+		if (val) dirs.right = val;
+	}
+	if (paddingBottom != null) {
+		const val = parsePaddingValue(paddingBottom);
+		if (val) dirs.bottom = val;
+	}
+	if (paddingLeft != null) {
+		const val = parsePaddingValue(paddingLeft);
+		if (val) dirs.left = val;
+	}
+	return optimizePadding(dirs);
+}
+paddingStyle.__lookupStyles = [
+	"padding",
+	"paddingTop",
+	"paddingRight",
+	"paddingBottom",
+	"paddingLeft",
+	"paddingBlock",
+	"paddingInline"
+];
+//#endregion
+export { paddingStyle };
+
+//# sourceMappingURL=padding.js.map

package/dist/styles/padding.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"padding.js","names":[],"sources":["../../src/styles/padding.ts"],"sourcesContent":["import type { StyleDetails } from '../parser/types';\nimport { DIRECTIONS, filterMods, parseStyle } from '../utils/styles';\n\ntype Direction = (typeof DIRECTIONS)[number];\n\n/**\n * Parse a padding value and return the first processed value\n */\nfunction parsePaddingValue(value: string | number | boolean): string | null {\n  if (typeof value === 'number') return `${value}px`;\n  if (!value) return null;\n  if (value === true) value = '1x';\n\n  const { values } = parseStyle(value).groups[0] ?? { values: [] };\n\n  return values[0] || 'var(--gap)';\n}\n\n/**\n * Extract values and directions from a single parsed group.\n */\nfunction extractGroupData(group: StyleDetails): {\n  values: string[];\n  directions: Direction[];\n} {\n  const { values = [], mods = [] } = group;\n  return {\n    values: values.length ? values : ['var(--gap)'],\n    directions: filterMods(mods, DIRECTIONS) as Direction[],\n  };\n}\n\n/**\n * Apply a single group's values and directions onto a direction map.\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\n/**\n * Optimize padding output shorthand.\n */\nfunction optimizePadding(dirs: Record<Direction, string>): {\n  padding: string;\n} {\n  const { top, right, bottom, left } = dirs;\n  if (top === right && right === bottom && bottom === left) {\n    return { padding: top };\n  }\n  if (top === bottom && left === right) {\n    return { padding: `${top} ${left}` };\n  }\n  return { padding: `${top} ${right} ${bottom} ${left}` };\n}\n\nexport function paddingStyle({\n  padding,\n  paddingBlock,\n  paddingInline,\n  paddingTop,\n  paddingRight,\n  paddingBottom,\n  paddingLeft,\n}: {\n  padding?: string | number | boolean;\n  paddingBlock?: string | number | boolean;\n  paddingInline?: string | number | boolean;\n  paddingTop?: string | number | boolean;\n  paddingRight?: string | number | boolean;\n  paddingBottom?: string | number | boolean;\n  paddingLeft?: string | number | boolean;\n}) {\n  if (\n    padding == null &&\n    paddingBlock == null &&\n    paddingInline == null &&\n    paddingTop == null &&\n    paddingRight == null &&\n    paddingBottom == null &&\n    paddingLeft == null\n  ) {\n    return {};\n  }\n\n  const dirs: Record<Direction, string> = {\n    top: '0',\n    right: '0',\n    bottom: '0',\n    left: '0',\n  };\n\n  // Priority 1 (lowest): padding\n  if (padding != null) {\n    if (typeof padding === 'number') {\n      const v = `${padding}px`;\n      dirs.top = dirs.right = dirs.bottom = dirs.left = v;\n    } else if (padding === true) {\n      padding = '1x';\n    }\n\n    if (typeof padding === 'string' && padding) {\n      const processed = parseStyle(padding);\n      const groups = processed.groups ?? [];\n\n      for (const group of groups) {\n        const { values, directions } = extractGroupData(group);\n        applyGroup(dirs, values, directions);\n      }\n    }\n  }\n\n  // Priority 2 (medium): paddingBlock/paddingInline\n  if (paddingBlock != null) {\n    const val = parsePaddingValue(paddingBlock);\n    if (val) dirs.top = dirs.bottom = val;\n  }\n  if (paddingInline != null) {\n    const val = parsePaddingValue(paddingInline);\n    if (val) dirs.left = dirs.right = val;\n  }\n\n  // Priority 3 (highest): individual directions\n  if (paddingTop != null) {\n    const val = parsePaddingValue(paddingTop);\n    if (val) dirs.top = val;\n  }\n  if (paddingRight != null) {\n    const val = parsePaddingValue(paddingRight);\n    if (val) dirs.right = val;\n  }\n  if (paddingBottom != null) {\n    const val = parsePaddingValue(paddingBottom);\n    if (val) dirs.bottom = val;\n  }\n  if (paddingLeft != null) {\n    const val = parsePaddingValue(paddingLeft);\n    if (val) dirs.left = val;\n  }\n\n  return optimizePadding(dirs);\n}\n\npaddingStyle.__lookupStyles = [\n  'padding',\n  'paddingTop',\n  'paddingRight',\n  'paddingBottom',\n  'paddingLeft',\n  'paddingBlock',\n  'paddingInline',\n];\n"],"mappings":";;;;;AAQA,SAAS,kBAAkB,OAAiD;AAC1E,KAAI,OAAO,UAAU,SAAU,QAAO,GAAG,MAAM;AAC/C,KAAI,CAAC,MAAO,QAAO;AACnB,KAAI,UAAU,KAAM,SAAQ;CAE5B,MAAM,EAAE,WAAW,WAAW,MAAM,CAAC,OAAO,MAAM,EAAE,QAAQ,EAAE,EAAE;AAEhE,QAAO,OAAO,MAAM;;;;;AAMtB,SAAS,iBAAiB,OAGxB;CACA,MAAM,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK;AACnC,QAAO;EACL,QAAQ,OAAO,SAAS,SAAS,CAAC,aAAa;EAC/C,YAAY,WAAW,MAAM,WAAW;EACzC;;;;;AAMH,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;;;;;AAON,SAAS,gBAAgB,MAEvB;CACA,MAAM,EAAE,KAAK,OAAO,QAAQ,SAAS;AACrC,KAAI,QAAQ,SAAS,UAAU,UAAU,WAAW,KAClD,QAAO,EAAE,SAAS,KAAK;AAEzB,KAAI,QAAQ,UAAU,SAAS,MAC7B,QAAO,EAAE,SAAS,GAAG,IAAI,GAAG,QAAQ;AAEtC,QAAO,EAAE,SAAS,GAAG,IAAI,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ;;AAGzD,SAAgB,aAAa,EAC3B,SACA,cACA,eACA,YACA,cACA,eACA,eASC;AACD,KACE,WAAW,QACX,gBAAgB,QAChB,iBAAiB,QACjB,cAAc,QACd,gBAAgB,QAChB,iBAAiB,QACjB,eAAe,KAEf,QAAO,EAAE;CAGX,MAAM,OAAkC;EACtC,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACP;AAGD,KAAI,WAAW,MAAM;AACnB,MAAI,OAAO,YAAY,SAErB,MAAK,MAAM,KAAK,QAAQ,KAAK,SAAS,KAAK,OADjC,GAAG,QAAQ;WAEZ,YAAY,KACrB,WAAU;AAGZ,MAAI,OAAO,YAAY,YAAY,SAAS;GAE1C,MAAM,SADY,WAAW,QAAQ,CACZ,UAAU,EAAE;AAErC,QAAK,MAAM,SAAS,QAAQ;IAC1B,MAAM,EAAE,QAAQ,eAAe,iBAAiB,MAAM;AACtD,eAAW,MAAM,QAAQ,WAAW;;;;AAM1C,KAAI,gBAAgB,MAAM;EACxB,MAAM,MAAM,kBAAkB,aAAa;AAC3C,MAAI,IAAK,MAAK,MAAM,KAAK,SAAS;;AAEpC,KAAI,iBAAiB,MAAM;EACzB,MAAM,MAAM,kBAAkB,cAAc;AAC5C,MAAI,IAAK,MAAK,OAAO,KAAK,QAAQ;;AAIpC,KAAI,cAAc,MAAM;EACtB,MAAM,MAAM,kBAAkB,WAAW;AACzC,MAAI,IAAK,MAAK,MAAM;;AAEtB,KAAI,gBAAgB,MAAM;EACxB,MAAM,MAAM,kBAAkB,aAAa;AAC3C,MAAI,IAAK,MAAK,QAAQ;;AAExB,KAAI,iBAAiB,MAAM;EACzB,MAAM,MAAM,kBAAkB,cAAc;AAC5C,MAAI,IAAK,MAAK,SAAS;;AAEzB,KAAI,eAAe,MAAM;EACvB,MAAM,MAAM,kBAAkB,YAAY;AAC1C,MAAI,IAAK,MAAK,OAAO;;AAGvB,QAAO,gBAAgB,KAAK;;AAG9B,aAAa,iBAAiB;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}

package/dist/styles/predefined.d.ts

@@ -0,0 +1,71 @@
+import { alignStyle } from "./align.js";
+import { borderStyle } from "./border.js";
+import { colorStyle } from "./color.js";
+import { displayStyle } from "./display.js";
+import { fadeStyle } from "./fade.js";
+import { fillStyle, svgFillStyle } from "./fill.js";
+import { flowStyle } from "./flow.js";
+import { gapStyle } from "./gap.js";
+import { heightStyle } from "./height.js";
+import { insetStyle } from "./inset.js";
+import { justifyStyle } from "./justify.js";
+import { marginStyle } from "./margin.js";
+import { outlineStyle } from "./outline.js";
+import { paddingStyle } from "./padding.js";
+import { presetStyle } from "./preset.js";
+import { radiusStyle } from "./radius.js";
+import { scrollbarStyle } from "./scrollbar.js";
+import { shadowStyle } from "./shadow.js";
+import { transitionStyle } from "./transition.js";
+import { widthStyle } from "./width.js";
+
+//#region src/styles/predefined.d.ts
+/**
+ * Exported object containing wrapped predefined style handlers.
+ * Users can import and call these to extend or delegate to built-in behavior.
+ *
+ * Internal handlers use *Style suffix for searchability.
+ * External API uses short names for convenience.
+ *
+ * @example
+ * ```ts
+ * import { styleHandlers, configure } from '@tenphi/tasty';
+ *
+ * configure({
+ *   handlers: {
+ *     fill: ({ fill }) => {
+ *       if (fill?.startsWith('gradient:')) {
+ *         return { background: fill.slice(9) };
+ *       }
+ *       return styleHandlers.fill({ fill });
+ *     },
+ *   },
+ * });
+ * ```
+ */
+declare const styleHandlers: {
+  readonly align: typeof alignStyle;
+  readonly border: typeof borderStyle;
+  readonly color: typeof colorStyle;
+  readonly display: typeof displayStyle;
+  readonly fade: typeof fadeStyle;
+  readonly fill: typeof fillStyle;
+  readonly svgFill: typeof svgFillStyle;
+  readonly flow: typeof flowStyle;
+  readonly gap: typeof gapStyle;
+  readonly height: typeof heightStyle;
+  readonly inset: typeof insetStyle;
+  readonly justify: typeof justifyStyle;
+  readonly margin: typeof marginStyle;
+  readonly outline: typeof outlineStyle;
+  readonly padding: typeof paddingStyle;
+  readonly preset: typeof presetStyle;
+  readonly radius: typeof radiusStyle;
+  readonly scrollbar: typeof scrollbarStyle;
+  readonly shadow: typeof shadowStyle;
+  readonly transition: typeof transitionStyle;
+  readonly width: typeof widthStyle;
+};
+//#endregion
+export { styleHandlers };
+//# sourceMappingURL=predefined.d.ts.map

package/dist/styles/predefined.js

@@ -0,0 +1,237 @@
+import { isDevEnv } from "../utils/is-dev-env.js";
+import { alignStyle } from "./align.js";
+import { borderStyle } from "./border.js";
+import { createStyle } from "./createStyle.js";
+import { colorStyle } from "./color.js";
+import { displayStyle } from "./display.js";
+import { fadeStyle } from "./fade.js";
+import { fillStyle, svgFillStyle } from "./fill.js";
+import { flowStyle } from "./flow.js";
+import { gapStyle } from "./gap.js";
+import { heightStyle } from "./height.js";
+import { insetStyle } from "./inset.js";
+import { justifyStyle } from "./justify.js";
+import { marginStyle } from "./margin.js";
+import { outlineStyle } from "./outline.js";
+import { paddingStyle } from "./padding.js";
+import { presetStyle } from "./preset.js";
+import { radiusStyle } from "./radius.js";
+import { scrollbarStyle } from "./scrollbar.js";
+import { shadowStyle } from "./shadow.js";
+import { transitionStyle } from "./transition.js";
+import { widthStyle } from "./width.js";
+//#region src/styles/predefined.ts
+const devMode = isDevEnv();
+const columnsConverter = (val) => {
+	if (typeof val === "number") return "minmax(1px, 1fr) ".repeat(val).trim();
+};
+const rowsConverter = (val) => {
+	if (typeof val === "number") return "auto ".repeat(val).trim();
+};
+const STYLE_HANDLER_MAP = {};
+let initialHandlerMapSnapshot = null;
+/**
+* Capture a snapshot of the current STYLE_HANDLER_MAP.
+* Called after predefine() to preserve built-in handler state.
+*/
+function captureInitialHandlerState() {
+	initialHandlerMapSnapshot = {};
+	for (const key of Object.keys(STYLE_HANDLER_MAP)) initialHandlerMapSnapshot[key] = [...STYLE_HANDLER_MAP[key]];
+}
+/**
+* Reset STYLE_HANDLER_MAP to the initial built-in state.
+* Called by resetConfig() to restore handlers after tests.
+*/
+function resetHandlers() {
+	if (!initialHandlerMapSnapshot) return;
+	for (const key of Object.keys(STYLE_HANDLER_MAP)) delete STYLE_HANDLER_MAP[key];
+	for (const key of Object.keys(initialHandlerMapSnapshot)) STYLE_HANDLER_MAP[key] = [...initialHandlerMapSnapshot[key]];
+}
+function defineCustomStyle(names, handler) {
+	let handlerWithLookup;
+	if (typeof names === "function") {
+		handlerWithLookup = names;
+		names = handlerWithLookup.__lookupStyles;
+	} else if (handler) handlerWithLookup = Object.assign(handler, { __lookupStyles: names });
+	else {
+		console.warn("Tasty: incorrect custom style definition: ", names);
+		return;
+	}
+	if (Array.isArray(names)) names.forEach((name) => {
+		if (!STYLE_HANDLER_MAP[name]) STYLE_HANDLER_MAP[name] = [];
+		STYLE_HANDLER_MAP[name].push(handlerWithLookup);
+	});
+}
+function defineStyleAlias(styleName, cssStyleName, converter) {
+	const styleHandler = createStyle(styleName, cssStyleName, converter);
+	if (!STYLE_HANDLER_MAP[styleName]) STYLE_HANDLER_MAP[styleName] = [];
+	STYLE_HANDLER_MAP[styleName].push(styleHandler);
+}
+function predefine() {
+	defineStyleAlias("gridAreas", "grid-template-areas");
+	defineStyleAlias("gridColumns", "grid-template-columns", columnsConverter);
+	defineStyleAlias("gridRows", "grid-template-rows", rowsConverter);
+	defineStyleAlias("gridTemplate", "grid-template", (val) => {
+		if (typeof val !== "string") return;
+		return val.split("/").map((s, i) => (i ? columnsConverter : rowsConverter)(s)).join("/");
+	});
+	[
+		displayStyle,
+		transitionStyle,
+		fillStyle,
+		svgFillStyle,
+		widthStyle,
+		marginStyle,
+		gapStyle,
+		flowStyle,
+		colorStyle,
+		heightStyle,
+		radiusStyle,
+		borderStyle,
+		shadowStyle,
+		paddingStyle,
+		alignStyle,
+		justifyStyle,
+		presetStyle,
+		outlineStyle,
+		scrollbarStyle,
+		fadeStyle,
+		insetStyle
+	].forEach((handler) => defineCustomStyle(handler));
+	captureInitialHandlerState();
+	return {
+		STYLE_HANDLER_MAP,
+		defineCustomStyle,
+		defineStyleAlias
+	};
+}
+/**
+* Normalize a handler definition to a StyleHandler with __lookupStyles.
+* - Function only: lookup styles inferred from key name
+* - [string, fn]: single lookup style
+* - [string[], fn]: multiple lookup styles
+*/
+function normalizeHandlerDefinition(keyName, definition) {
+	let handler;
+	let lookupStyles;
+	if (typeof definition === "function") {
+		handler = definition;
+		lookupStyles = [keyName];
+	} else if (Array.isArray(definition)) {
+		const [first, fn] = definition;
+		if (typeof fn !== "function") throw new Error(`[Tasty] Invalid handler definition for "${keyName}". Tuple must have a function as the second element: [string, function] or [string[], function].`);
+		handler = fn;
+		if (typeof first === "string") lookupStyles = [first];
+		else if (Array.isArray(first)) lookupStyles = first;
+		else throw new Error(`[Tasty] Invalid handler definition for "${keyName}". First element must be a string or string array.`);
+	} else throw new Error(`[Tasty] Invalid handler definition for "${keyName}". Expected function, [string, function], or [string[], function].`);
+	validateHandler(keyName, handler, lookupStyles);
+	const wrappedHandler = ((props) => handler(props));
+	wrappedHandler.__lookupStyles = lookupStyles;
+	return wrappedHandler;
+}
+/**
+* Validate a handler definition in development mode.
+*/
+function validateHandler(name, handler, lookupStyles) {
+	if (!devMode) return;
+	if (typeof handler !== "function") console.warn(`[Tasty] Handler "${name}" is not a function. Handlers must be functions that return CSSMap, CSSMap[], or void.`);
+	if (!lookupStyles || !Array.isArray(lookupStyles) || lookupStyles.length === 0) console.warn(`[Tasty] Handler "${name}" has invalid lookupStyles. Expected non-empty array of style names.`);
+}
+/**
+* Register a custom handler, replacing any existing handlers for the same lookup styles.
+* This is called by configure() to process user-defined handlers.
+*
+* When registering a handler for style X, any existing handler that processes X
+* is removed from ALL its lookup styles to prevent double-processing.
+* For example, if gapStyle handles ['display', 'flow', 'gap'] and a new handler
+* is registered for just ['gap'], gapStyle is removed from display and flow too.
+*/
+function registerHandler(handler) {
+	const lookupStyles = handler.__lookupStyles;
+	if (!lookupStyles || lookupStyles.length === 0) {
+		if (devMode) console.warn("[Tasty] Cannot register handler without __lookupStyles property.");
+		return;
+	}
+	const handlersToRemove = /* @__PURE__ */ new Set();
+	for (const styleName of lookupStyles) {
+		const existing = STYLE_HANDLER_MAP[styleName];
+		if (existing) for (const existingHandler of existing) handlersToRemove.add(existingHandler);
+	}
+	for (const oldHandler of handlersToRemove) {
+		const oldLookupStyles = oldHandler.__lookupStyles;
+		if (oldLookupStyles) for (const oldStyleName of oldLookupStyles) {
+			const handlers = STYLE_HANDLER_MAP[oldStyleName];
+			if (handlers) {
+				const filtered = handlers.filter((h) => h !== oldHandler);
+				if (filtered.length === 0) delete STYLE_HANDLER_MAP[oldStyleName];
+				else STYLE_HANDLER_MAP[oldStyleName] = filtered;
+			}
+		}
+	}
+	for (const styleName of lookupStyles) {
+		const existing = STYLE_HANDLER_MAP[styleName];
+		if (existing) existing.push(handler);
+		else STYLE_HANDLER_MAP[styleName] = [handler];
+	}
+}
+/**
+* Create a wrapped handler that can be safely called by users.
+* The wrapper preserves __lookupStyles for proper registration.
+*/
+function wrapHandler(handler) {
+	const fn = handler;
+	const wrapped = ((props) => fn(props));
+	wrapped.__lookupStyles = handler.__lookupStyles;
+	return wrapped;
+}
+/**
+* Exported object containing wrapped predefined style handlers.
+* Users can import and call these to extend or delegate to built-in behavior.
+*
+* Internal handlers use *Style suffix for searchability.
+* External API uses short names for convenience.
+*
+* @example
+* ```ts
+* import { styleHandlers, configure } from '@tenphi/tasty';
+*
+* configure({
+*   handlers: {
+*     fill: ({ fill }) => {
+*       if (fill?.startsWith('gradient:')) {
+*         return { background: fill.slice(9) };
+*       }
+*       return styleHandlers.fill({ fill });
+*     },
+*   },
+* });
+* ```
+*/
+const styleHandlers = {
+	align: wrapHandler(alignStyle),
+	border: wrapHandler(borderStyle),
+	color: wrapHandler(colorStyle),
+	display: wrapHandler(displayStyle),
+	fade: wrapHandler(fadeStyle),
+	fill: wrapHandler(fillStyle),
+	svgFill: wrapHandler(svgFillStyle),
+	flow: wrapHandler(flowStyle),
+	gap: wrapHandler(gapStyle),
+	height: wrapHandler(heightStyle),
+	inset: wrapHandler(insetStyle),
+	justify: wrapHandler(justifyStyle),
+	margin: wrapHandler(marginStyle),
+	outline: wrapHandler(outlineStyle),
+	padding: wrapHandler(paddingStyle),
+	preset: wrapHandler(presetStyle),
+	radius: wrapHandler(radiusStyle),
+	scrollbar: wrapHandler(scrollbarStyle),
+	shadow: wrapHandler(shadowStyle),
+	transition: wrapHandler(transitionStyle),
+	width: wrapHandler(widthStyle)
+};
+//#endregion
+export { normalizeHandlerDefinition, predefine, registerHandler, resetHandlers, styleHandlers };
+
+//# sourceMappingURL=predefined.js.map

package/dist/styles/predefined.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"predefined.js","names":[],"sources":["../../src/styles/predefined.ts"],"sourcesContent":["import { isDevEnv } from '../utils/is-dev-env';\nimport type {\n  RawStyleHandler,\n  StyleHandler,\n  StyleHandlerDefinition,\n} from '../utils/styles';\n\nimport { alignStyle } from './align';\nimport { borderStyle } from './border';\nimport { colorStyle } from './color';\nimport { createStyle } from './createStyle';\nimport { displayStyle } from './display';\nimport { fadeStyle } from './fade';\nimport { fillStyle, svgFillStyle } from './fill';\nimport { flowStyle } from './flow';\n// Note: fontStyle (font.ts) and fontStyleStyle (fontStyle.ts) removed\n// Both font and fontStyle props are now handled by presetStyle\nimport { gapStyle } from './gap';\nimport { heightStyle } from './height';\nimport { insetStyle } from './inset';\nimport { justifyStyle } from './justify';\nimport { marginStyle } from './margin';\nimport { outlineStyle } from './outline';\nimport { paddingStyle } from './padding';\nimport { presetStyle } from './preset';\nimport { radiusStyle } from './radius';\nimport { scrollbarStyle } from './scrollbar';\nimport { shadowStyle } from './shadow';\nimport { transitionStyle } from './transition';\nimport { widthStyle } from './width';\n\nconst devMode = isDevEnv();\n\nconst _numberConverter = (val: string | number | boolean | undefined) => {\n  if (typeof val === 'number') {\n    return `${val}px`;\n  }\n\n  return val;\n};\nconst columnsConverter = (val: string | number | boolean | undefined) => {\n  if (typeof val === 'number') {\n    return 'minmax(1px, 1fr) '.repeat(val).trim();\n  }\n\n  return;\n};\nconst rowsConverter = (val: string | number | boolean | undefined) => {\n  if (typeof val === 'number') {\n    return 'auto '.repeat(val).trim();\n  }\n\n  return;\n};\n\ntype StyleHandlerMap = Record<string, StyleHandler[]>;\n\nexport const STYLE_HANDLER_MAP: StyleHandlerMap = {};\n\n// Store initial handler state for reset functionality\nlet initialHandlerMapSnapshot: StyleHandlerMap | null = null;\n\n/**\n * Capture a snapshot of the current STYLE_HANDLER_MAP.\n * Called after predefine() to preserve built-in handler state.\n */\nfunction captureInitialHandlerState(): void {\n  initialHandlerMapSnapshot = {};\n  for (const key of Object.keys(STYLE_HANDLER_MAP)) {\n    // Shallow copy the array - handlers themselves are immutable\n    initialHandlerMapSnapshot[key] = [...STYLE_HANDLER_MAP[key]];\n  }\n}\n\n/**\n * Reset STYLE_HANDLER_MAP to the initial built-in state.\n * Called by resetConfig() to restore handlers after tests.\n */\nexport function resetHandlers(): void {\n  if (!initialHandlerMapSnapshot) {\n    // predefine() hasn't been called yet, nothing to reset\n    return;\n  }\n\n  // Clear current map\n  for (const key of Object.keys(STYLE_HANDLER_MAP)) {\n    delete STYLE_HANDLER_MAP[key];\n  }\n\n  // Restore initial state\n  for (const key of Object.keys(initialHandlerMapSnapshot)) {\n    STYLE_HANDLER_MAP[key] = [...initialHandlerMapSnapshot[key]];\n  }\n}\n\nexport function defineCustomStyle(\n  names: string[] | StyleHandler,\n  handler?: RawStyleHandler,\n) {\n  let handlerWithLookup: StyleHandler;\n\n  if (typeof names === 'function') {\n    handlerWithLookup = names;\n    names = handlerWithLookup.__lookupStyles;\n  } else if (handler) {\n    handlerWithLookup = Object.assign(handler, { __lookupStyles: names });\n  } else {\n    console.warn('Tasty: incorrect custom style definition: ', names);\n    return;\n  }\n\n  if (Array.isArray(names)) {\n    // just to pass type checking\n    names.forEach((name) => {\n      if (!STYLE_HANDLER_MAP[name]) {\n        STYLE_HANDLER_MAP[name] = [];\n      }\n\n      STYLE_HANDLER_MAP[name].push(handlerWithLookup);\n    });\n  }\n}\n\ntype ConverterHandler = (\n  s: string | boolean | number | undefined,\n) => string | undefined;\n\nexport function defineStyleAlias(\n  styleName: string,\n  cssStyleName?: string,\n  converter?: ConverterHandler,\n) {\n  const styleHandler = createStyle(styleName, cssStyleName, converter);\n\n  if (!STYLE_HANDLER_MAP[styleName]) {\n    STYLE_HANDLER_MAP[styleName] = [];\n  }\n\n  STYLE_HANDLER_MAP[styleName].push(styleHandler);\n}\n\nexport function predefine() {\n  // Style aliases\n  defineStyleAlias('gridAreas', 'grid-template-areas');\n  defineStyleAlias('gridColumns', 'grid-template-columns', columnsConverter);\n  defineStyleAlias('gridRows', 'grid-template-rows', rowsConverter);\n  defineStyleAlias(\n    'gridTemplate',\n    'grid-template',\n    (val: string | boolean | number | undefined) => {\n      if (typeof val !== 'string') return;\n\n      return val\n        .split('/')\n        .map((s, i) => (i ? columnsConverter : rowsConverter)(s))\n        .join('/');\n    },\n  );\n  // Note: outlineOffset is now handled by outlineStyle\n\n  [\n    displayStyle,\n    transitionStyle,\n    fillStyle,\n    svgFillStyle,\n    widthStyle,\n    marginStyle,\n    gapStyle,\n    flowStyle,\n    colorStyle,\n    heightStyle,\n    radiusStyle,\n    borderStyle,\n    shadowStyle,\n    paddingStyle,\n    alignStyle,\n    justifyStyle,\n    presetStyle,\n    outlineStyle,\n    scrollbarStyle,\n    fadeStyle,\n    insetStyle,\n  ]\n    // @ts-expect-error handler type varies across built-in style handlers\n    .forEach((handler) => defineCustomStyle(handler));\n\n  // Capture initial state after all built-in handlers are registered\n  captureInitialHandlerState();\n\n  return { STYLE_HANDLER_MAP, defineCustomStyle, defineStyleAlias };\n}\n\n// ============================================================================\n// Handler Registration API (for configure())\n// ============================================================================\n\n/**\n * Normalize a handler definition to a StyleHandler with __lookupStyles.\n * - Function only: lookup styles inferred from key name\n * - [string, fn]: single lookup style\n * - [string[], fn]: multiple lookup styles\n */\nexport function normalizeHandlerDefinition(\n  keyName: string,\n  definition: StyleHandlerDefinition,\n): StyleHandler {\n  let handler: RawStyleHandler;\n  let lookupStyles: string[];\n\n  if (typeof definition === 'function') {\n    // Function only - lookup styles inferred from key name\n    handler = definition;\n    lookupStyles = [keyName];\n  } else if (Array.isArray(definition)) {\n    const [first, fn] = definition;\n\n    if (typeof fn !== 'function') {\n      throw new Error(\n        `[Tasty] Invalid handler definition for \"${keyName}\". ` +\n          'Tuple must have a function as the second element: [string, function] or [string[], function].',\n      );\n    }\n\n    handler = fn;\n\n    if (typeof first === 'string') {\n      // [string, fn] - single lookup style\n      lookupStyles = [first];\n    } else if (Array.isArray(first)) {\n      // [string[], fn] - multiple lookup styles\n      lookupStyles = first;\n    } else {\n      throw new Error(\n        `[Tasty] Invalid handler definition for \"${keyName}\". ` +\n          'First element must be a string or string array.',\n      );\n    }\n  } else {\n    throw new Error(\n      `[Tasty] Invalid handler definition for \"${keyName}\". ` +\n        'Expected function, [string, function], or [string[], function].',\n    );\n  }\n\n  // Validate handler in dev mode\n  validateHandler(keyName, handler, lookupStyles);\n\n  // Wrap the handler to avoid mutation issues when the same function\n  // is reused for multiple handler definitions. Each registration\n  // gets its own function identity with its own __lookupStyles.\n  const wrappedHandler = ((props) => handler(props)) as StyleHandler;\n  wrappedHandler.__lookupStyles = lookupStyles;\n\n  return wrappedHandler;\n}\n\n/**\n * Validate a handler definition in development mode.\n */\nfunction validateHandler(\n  name: string,\n  handler: RawStyleHandler,\n  lookupStyles: string[],\n): void {\n  if (!devMode) return;\n\n  if (typeof handler !== 'function') {\n    console.warn(\n      `[Tasty] Handler \"${name}\" is not a function. ` +\n        'Handlers must be functions that return CSSMap, CSSMap[], or void.',\n    );\n  }\n\n  if (\n    !lookupStyles ||\n    !Array.isArray(lookupStyles) ||\n    lookupStyles.length === 0\n  ) {\n    console.warn(\n      `[Tasty] Handler \"${name}\" has invalid lookupStyles. ` +\n        'Expected non-empty array of style names.',\n    );\n  }\n}\n\n/**\n * Validate a handler result in development mode.\n * Call this after invoking a handler to check the return value.\n */\nexport function validateHandlerResult(name: string, result: unknown): void {\n  if (!devMode) return;\n  if (result === undefined || result === null) return; // void is valid\n\n  // Check for empty string (migration from old pattern)\n  if (result === '') {\n    console.warn(\n      `[Tasty] Handler \"${name}\" returned empty string. ` +\n        'Return void/undefined instead for no output.',\n    );\n    return;\n  }\n\n  // Check result is object (CSSMap or CSSMap[])\n  if (typeof result !== 'object') {\n    console.warn(\n      `[Tasty] Handler \"${name}\" returned invalid type: ${typeof result}. ` +\n        'Expected CSSMap, CSSMap[], or void.',\n    );\n  }\n}\n\n/**\n * Register a custom handler, replacing any existing handlers for the same lookup styles.\n * This is called by configure() to process user-defined handlers.\n *\n * When registering a handler for style X, any existing handler that processes X\n * is removed from ALL its lookup styles to prevent double-processing.\n * For example, if gapStyle handles ['display', 'flow', 'gap'] and a new handler\n * is registered for just ['gap'], gapStyle is removed from display and flow too.\n */\nexport function registerHandler(handler: StyleHandler): void {\n  const lookupStyles = handler.__lookupStyles;\n\n  if (!lookupStyles || lookupStyles.length === 0) {\n    if (devMode) {\n      console.warn(\n        '[Tasty] Cannot register handler without __lookupStyles property.',\n      );\n    }\n    return;\n  }\n\n  // Find and remove existing handlers that would conflict\n  // A handler conflicts if it handles any of the same styles as the new handler\n  const handlersToRemove = new Set<StyleHandler>();\n\n  for (const styleName of lookupStyles) {\n    const existing = STYLE_HANDLER_MAP[styleName];\n    if (existing) {\n      for (const existingHandler of existing) {\n        handlersToRemove.add(existingHandler);\n      }\n    }\n  }\n\n  // Remove conflicting handlers from ALL their lookup styles\n  for (const oldHandler of handlersToRemove) {\n    const oldLookupStyles = oldHandler.__lookupStyles;\n    if (oldLookupStyles) {\n      for (const oldStyleName of oldLookupStyles) {\n        const handlers = STYLE_HANDLER_MAP[oldStyleName];\n        if (handlers) {\n          const filtered = handlers.filter((h) => h !== oldHandler);\n          if (filtered.length === 0) {\n            delete STYLE_HANDLER_MAP[oldStyleName];\n          } else {\n            STYLE_HANDLER_MAP[oldStyleName] = filtered;\n          }\n        }\n      }\n    }\n  }\n\n  // Register the new handler under its lookup styles\n  for (const styleName of lookupStyles) {\n    const existing = STYLE_HANDLER_MAP[styleName];\n    if (existing) {\n      existing.push(handler);\n    } else {\n      STYLE_HANDLER_MAP[styleName] = [handler];\n    }\n  }\n}\n\n// ============================================================================\n// Wrapped Style Handlers Export\n// ============================================================================\n\n/**\n * Create a wrapped handler that can be safely called by users.\n * The wrapper preserves __lookupStyles for proper registration.\n */\nfunction wrapHandler<T extends { __lookupStyles: string[] }>(handler: T): T {\n  const fn = handler as unknown as (props: unknown) => unknown;\n  const wrapped = ((props: unknown) => fn(props)) as unknown as T;\n  wrapped.__lookupStyles = handler.__lookupStyles;\n  return wrapped;\n}\n\n/**\n * Exported object containing wrapped predefined style handlers.\n * Users can import and call these to extend or delegate to built-in behavior.\n *\n * Internal handlers use *Style suffix for searchability.\n * External API uses short names for convenience.\n *\n * @example\n * ```ts\n * import { styleHandlers, configure } from '@tenphi/tasty';\n *\n * configure({\n *   handlers: {\n *     fill: ({ fill }) => {\n *       if (fill?.startsWith('gradient:')) {\n *         return { background: fill.slice(9) };\n *       }\n *       return styleHandlers.fill({ fill });\n *     },\n *   },\n * });\n * ```\n */\nexport const styleHandlers = {\n  align: wrapHandler(alignStyle),\n  border: wrapHandler(borderStyle),\n  color: wrapHandler(colorStyle),\n  display: wrapHandler(displayStyle),\n  fade: wrapHandler(fadeStyle),\n  fill: wrapHandler(fillStyle),\n  svgFill: wrapHandler(svgFillStyle),\n  flow: wrapHandler(flowStyle),\n  gap: wrapHandler(gapStyle),\n  height: wrapHandler(heightStyle),\n  inset: wrapHandler(insetStyle),\n  justify: wrapHandler(justifyStyle),\n  margin: wrapHandler(marginStyle),\n  outline: wrapHandler(outlineStyle),\n  padding: wrapHandler(paddingStyle),\n  preset: wrapHandler(presetStyle),\n  radius: wrapHandler(radiusStyle),\n  scrollbar: wrapHandler(scrollbarStyle),\n  shadow: wrapHandler(shadowStyle),\n  transition: wrapHandler(transitionStyle),\n  width: wrapHandler(widthStyle),\n} as const;\n"],"mappings":"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"}

package/dist/styles/preset.d.ts

@@ -0,0 +1,52 @@
+import { Styles } from "./types.js";
+
+//#region src/styles/preset.d.ts
+interface PresetStyleProps {
+  preset?: string | boolean;
+  fontSize?: string | number;
+  lineHeight?: string | number;
+  textTransform?: string;
+  letterSpacing?: string | number;
+  fontWeight?: string | number;
+  fontStyle?: string | boolean;
+  fontFamily?: string;
+  /** Alias for fontFamily with special handling for 'monospace' and boolean */
+  font?: string | boolean;
+}
+/**
+ * Handles typography preset and individual font properties.
+ *
+ * Preset syntax uses `/` to separate name from modifier:
+ * - `preset="h1"` — name only
+ * - `preset="h2 / strong"` — name + modifier
+ * - `preset="bold"` — modifier-only shorthand (name defaults to `inherit`)
+ *
+ * When `preset` is defined, it sets up CSS custom properties for typography.
+ * Individual font props can be used with or without `preset`:
+ * - With `preset`: overrides the preset value for that property
+ * - Without `preset`: outputs the CSS directly
+ *
+ * Number values are converted to pixels for fontSize, lineHeight, letterSpacing.
+ * fontWeight accepts numbers directly (e.g., 400, 700).
+ *
+ * font vs fontFamily:
+ * - `font` is the recommended prop with special handling (monospace, boolean, fallback)
+ * - `fontFamily` is a direct value without special handling
+ */
+declare function presetStyle({
+  preset,
+  fontSize,
+  lineHeight,
+  textTransform,
+  letterSpacing,
+  fontWeight,
+  fontStyle,
+  fontFamily,
+  font
+}: PresetStyleProps): Styles | undefined;
+declare namespace presetStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+export { presetStyle };
+//# sourceMappingURL=preset.d.ts.map