@tenphi/tasty 0.0.0-snapshot.056b911

package/dist/styles/index.js

@@ -0,0 +1,8 @@
+import "./createStyle.js";
+import { predefine } from "./predefined.js";
+//#region src/styles/index.ts
+const { STYLE_HANDLER_MAP, defineCustomStyle, defineStyleAlias } = predefine();
+//#endregion
+export { STYLE_HANDLER_MAP };
+
+//# sourceMappingURL=index.js.map

package/dist/styles/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/styles/index.ts"],"sourcesContent":["import { predefine, styleHandlers } from './predefined';\n\nconst { STYLE_HANDLER_MAP, defineCustomStyle, defineStyleAlias } = predefine();\n\nexport {\n  STYLE_HANDLER_MAP,\n  defineCustomStyle,\n  defineStyleAlias,\n  styleHandlers,\n};\nexport * from './createStyle';\nexport {\n  normalizeHandlerDefinition,\n  registerHandler,\n  resetHandlers,\n  validateHandlerResult,\n} from './predefined';\n"],"mappings":";;;AAEA,MAAM,EAAE,mBAAmB,mBAAmB,qBAAqB,WAAW"}

package/dist/styles/inset.d.ts

@@ -0,0 +1,24 @@
+//#region src/styles/inset.d.ts
+declare function insetStyle({
+  inset,
+  insetBlock,
+  insetInline,
+  top,
+  right,
+  bottom,
+  left
+}: {
+  inset?: string | number | boolean;
+  insetBlock?: string | number | boolean;
+  insetInline?: string | number | boolean;
+  top?: string | number | boolean;
+  right?: string | number | boolean;
+  bottom?: string | number | boolean;
+  left?: string | number | boolean;
+}): Record<string, string> | null;
+declare namespace insetStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+export { insetStyle };
+//# sourceMappingURL=inset.d.ts.map

package/dist/styles/inset.js

@@ -0,0 +1,34 @@
+import { processDirectionalStyle } from "./directional.js";
+//#region src/styles/inset.ts
+const INSET_CONFIG = {
+	property: "inset",
+	defaultValue: "0",
+	trueValue: "0",
+	defaultInit: "auto",
+	individualOnly: true,
+	directionProperty: (dir) => dir
+};
+function insetStyle({ inset, insetBlock, insetInline, top, right, bottom, left }) {
+	return processDirectionalStyle(INSET_CONFIG, {
+		main: inset,
+		block: insetBlock,
+		inline: insetInline,
+		top,
+		right,
+		bottom,
+		left
+	});
+}
+insetStyle.__lookupStyles = [
+	"inset",
+	"insetBlock",
+	"insetInline",
+	"top",
+	"right",
+	"bottom",
+	"left"
+];
+//#endregion
+export { insetStyle };
+
+//# sourceMappingURL=inset.js.map

package/dist/styles/inset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inset.js","names":[],"sources":["../../src/styles/inset.ts"],"sourcesContent":["import { type DirectionalConfig, processDirectionalStyle } from './directional';\n\nconst INSET_CONFIG: DirectionalConfig = {\n  property: 'inset',\n  defaultValue: '0',\n  trueValue: '0',\n  defaultInit: 'auto',\n  individualOnly: true,\n  directionProperty: (dir) => dir,\n};\n\nexport function insetStyle({\n  inset,\n  insetBlock,\n  insetInline,\n  top,\n  right,\n  bottom,\n  left,\n}: {\n  inset?: string | number | boolean;\n  insetBlock?: string | number | boolean;\n  insetInline?: string | number | boolean;\n  top?: string | number | boolean;\n  right?: string | number | boolean;\n  bottom?: string | number | boolean;\n  left?: string | number | boolean;\n}) {\n  return processDirectionalStyle(INSET_CONFIG, {\n    main: inset,\n    block: insetBlock,\n    inline: insetInline,\n    top,\n    right,\n    bottom,\n    left,\n  });\n}\n\ninsetStyle.__lookupStyles = [\n  'inset',\n  'insetBlock',\n  'insetInline',\n  'top',\n  'right',\n  'bottom',\n  'left',\n];\n"],"mappings":";;AAEA,MAAM,eAAkC;CACtC,UAAU;CACV,cAAc;CACd,WAAW;CACX,aAAa;CACb,gBAAgB;CAChB,oBAAoB,QAAQ;CAC7B;AAED,SAAgB,WAAW,EACzB,OACA,YACA,aACA,KACA,OACA,QACA,QASC;AACD,QAAO,wBAAwB,cAAc;EAC3C,MAAM;EACN,OAAO;EACP,QAAQ;EACR;EACA;EACA;EACA;EACD,CAAC;;AAGJ,WAAW,iBAAiB;CAC1B;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}

package/dist/styles/list.d.ts

@@ -0,0 +1,16 @@
+//#region src/styles/list.d.ts
+declare const BASE_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace", "opacity", "transition"];
+declare const POSITION_STYLES: readonly ["gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "inset", "position", "scrollMargin"];
+declare const BLOCK_INNER_STYLES: readonly ["padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign"];
+declare const BLOCK_OUTER_STYLES: readonly ["border", "radius", "shadow", "outline"];
+declare const BLOCK_STYLES: readonly ["padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "border", "radius", "shadow", "outline"];
+declare const COLOR_STYLES: readonly ["color", "fill", "fade", "image"];
+declare const TEXT_STYLES: readonly ["textTransform", "fontWeight", "fontStyle"];
+declare const DIMENSION_STYLES: readonly ["width", "height", "flexBasis", "flexGrow", "flexShrink", "flex"];
+declare const FLOW_STYLES: readonly ["flow", "place", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
+declare const CONTAINER_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace", "opacity", "transition", "color", "fill", "fade", "image", "width", "height", "flexBasis", "flexGrow", "flexShrink", "flex", "gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "inset", "position", "scrollMargin", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "border", "radius", "shadow", "outline", "flow", "place", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
+declare const OUTER_STYLES: readonly ["gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "inset", "position", "scrollMargin", "width", "height", "flexBasis", "flexGrow", "flexShrink", "flex", "border", "radius", "shadow", "outline"];
+declare const INNER_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace", "opacity", "transition", "color", "fill", "fade", "image", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "flow", "place", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
+//#endregion
+export { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES };
+//# sourceMappingURL=list.d.ts.map

package/dist/styles/list.js

@@ -0,0 +1,100 @@
+//#region src/styles/list.ts
+const BASE_STYLES = [
+	"display",
+	"font",
+	"preset",
+	"hide",
+	"whiteSpace",
+	"opacity",
+	"transition"
+];
+const POSITION_STYLES = [
+	"gridArea",
+	"order",
+	"gridColumn",
+	"gridRow",
+	"placeSelf",
+	"alignSelf",
+	"justifySelf",
+	"zIndex",
+	"margin",
+	"inset",
+	"position",
+	"scrollMargin"
+];
+const BLOCK_INNER_STYLES = [
+	"padding",
+	"paddingInline",
+	"paddingBlock",
+	"overflow",
+	"scrollbar",
+	"textAlign"
+];
+const BLOCK_OUTER_STYLES = [
+	"border",
+	"radius",
+	"shadow",
+	"outline"
+];
+const BLOCK_STYLES = [...BLOCK_INNER_STYLES, ...BLOCK_OUTER_STYLES];
+const COLOR_STYLES = [
+	"color",
+	"fill",
+	"fade",
+	"image"
+];
+const TEXT_STYLES = [
+	"textTransform",
+	"fontWeight",
+	"fontStyle"
+];
+const DIMENSION_STYLES = [
+	"width",
+	"height",
+	"flexBasis",
+	"flexGrow",
+	"flexShrink",
+	"flex"
+];
+const FLOW_STYLES = [
+	"flow",
+	"place",
+	"placeItems",
+	"placeContent",
+	"alignItems",
+	"alignContent",
+	"justifyItems",
+	"justifyContent",
+	"align",
+	"justify",
+	"gap",
+	"columnGap",
+	"rowGap",
+	"gridColumns",
+	"gridRows",
+	"gridTemplate",
+	"gridAreas"
+];
+const CONTAINER_STYLES = [
+	...BASE_STYLES,
+	...COLOR_STYLES,
+	...DIMENSION_STYLES,
+	...POSITION_STYLES,
+	...BLOCK_STYLES,
+	...FLOW_STYLES
+];
+const OUTER_STYLES = [
+	...POSITION_STYLES,
+	...DIMENSION_STYLES,
+	...BLOCK_OUTER_STYLES
+];
+const INNER_STYLES = [
+	...BASE_STYLES,
+	...COLOR_STYLES,
+	...BLOCK_INNER_STYLES,
+	...FLOW_STYLES
+];
+//#endregion
+export { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES };
+
+//# sourceMappingURL=list.js.map

package/dist/styles/list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.js","names":[],"sources":["../../src/styles/list.ts"],"sourcesContent":["export const BASE_STYLES = [\n  'display',\n  'font',\n  'preset',\n  'hide',\n  'whiteSpace',\n  'opacity',\n  'transition',\n] as const;\n\nexport const POSITION_STYLES = [\n  'gridArea',\n  'order',\n  'gridColumn',\n  'gridRow',\n  'placeSelf',\n  'alignSelf',\n  'justifySelf',\n  'zIndex',\n  'margin',\n  'inset',\n  'position',\n  'scrollMargin',\n] as const;\n\nexport const BLOCK_INNER_STYLES = [\n  'padding',\n  'paddingInline',\n  'paddingBlock',\n  'overflow',\n  'scrollbar',\n  'textAlign',\n] as const;\n\nexport const BLOCK_OUTER_STYLES = [\n  'border',\n  'radius',\n  'shadow',\n  'outline',\n] as const;\n\nexport const BLOCK_STYLES = [\n  ...BLOCK_INNER_STYLES,\n  ...BLOCK_OUTER_STYLES,\n] as const;\n\nexport const COLOR_STYLES = ['color', 'fill', 'fade', 'image'] as const;\n\nexport const TEXT_STYLES = [\n  'textTransform',\n  'fontWeight',\n  'fontStyle',\n] as const;\n\nexport const DIMENSION_STYLES = [\n  'width',\n  'height',\n  'flexBasis',\n  'flexGrow',\n  'flexShrink',\n  'flex',\n] as const;\n\nexport const FLOW_STYLES = [\n  'flow',\n  'place',\n  'placeItems',\n  'placeContent',\n  'alignItems',\n  'alignContent',\n  'justifyItems',\n  'justifyContent',\n  'align',\n  'justify',\n  'gap',\n  'columnGap',\n  'rowGap',\n  'gridColumns',\n  'gridRows',\n  'gridTemplate',\n  'gridAreas',\n] as const;\n\nexport const CONTAINER_STYLES = [\n  ...BASE_STYLES,\n  ...COLOR_STYLES,\n  ...DIMENSION_STYLES,\n  ...POSITION_STYLES,\n  ...BLOCK_STYLES,\n  ...FLOW_STYLES,\n] as const;\n\nexport const OUTER_STYLES = [\n  ...POSITION_STYLES,\n  ...DIMENSION_STYLES,\n  ...BLOCK_OUTER_STYLES,\n] as const;\n\nexport const INNER_STYLES = [\n  ...BASE_STYLES,\n  ...COLOR_STYLES,\n  ...BLOCK_INNER_STYLES,\n  ...FLOW_STYLES,\n] as const;\n"],"mappings":";AAAA,MAAa,cAAc;CACzB;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,kBAAkB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,qBAAqB;CAChC;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,qBAAqB;CAChC;CACA;CACA;CACA;CACD;AAED,MAAa,eAAe,CAC1B,GAAG,oBACH,GAAG,mBACJ;AAED,MAAa,eAAe;CAAC;CAAS;CAAQ;CAAQ;CAAQ;AAE9D,MAAa,cAAc;CACzB;CACA;CACA;CACD;AAED,MAAa,mBAAmB;CAC9B;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,cAAc;CACzB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,mBAAmB;CAC9B,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAED,MAAa,eAAe;CAC1B,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAED,MAAa,eAAe;CAC1B,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACJ"}

package/dist/styles/margin.d.ts

@@ -0,0 +1,24 @@
+//#region src/styles/margin.d.ts
+declare function marginStyle({
+  margin,
+  marginBlock,
+  marginInline,
+  marginTop,
+  marginRight,
+  marginBottom,
+  marginLeft
+}: {
+  margin?: string | number | boolean;
+  marginBlock?: string | number | boolean;
+  marginInline?: string | number | boolean;
+  marginTop?: string | number | boolean;
+  marginRight?: string | number | boolean;
+  marginBottom?: string | number | boolean;
+  marginLeft?: string | number | boolean;
+}): Record<string, string> | null;
+declare namespace marginStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+export { marginStyle };
+//# sourceMappingURL=margin.d.ts.map

package/dist/styles/margin.js

@@ -0,0 +1,32 @@
+import { processDirectionalStyle } from "./directional.js";
+//#region src/styles/margin.ts
+const MARGIN_CONFIG = {
+	property: "margin",
+	defaultValue: "var(--gap)",
+	trueValue: "1x",
+	defaultInit: "0"
+};
+function marginStyle({ margin, marginBlock, marginInline, marginTop, marginRight, marginBottom, marginLeft }) {
+	return processDirectionalStyle(MARGIN_CONFIG, {
+		main: margin,
+		block: marginBlock,
+		inline: marginInline,
+		top: marginTop,
+		right: marginRight,
+		bottom: marginBottom,
+		left: marginLeft
+	});
+}
+marginStyle.__lookupStyles = [
+	"margin",
+	"marginTop",
+	"marginRight",
+	"marginBottom",
+	"marginLeft",
+	"marginBlock",
+	"marginInline"
+];
+//#endregion
+export { marginStyle };
+
+//# sourceMappingURL=margin.js.map

package/dist/styles/margin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"margin.js","names":[],"sources":["../../src/styles/margin.ts"],"sourcesContent":["import { processDirectionalStyle } from './directional';\n\nconst MARGIN_CONFIG = {\n  property: 'margin',\n  defaultValue: 'var(--gap)',\n  trueValue: '1x',\n  defaultInit: '0',\n} as const;\n\nexport function marginStyle({\n  margin,\n  marginBlock,\n  marginInline,\n  marginTop,\n  marginRight,\n  marginBottom,\n  marginLeft,\n}: {\n  margin?: string | number | boolean;\n  marginBlock?: string | number | boolean;\n  marginInline?: string | number | boolean;\n  marginTop?: string | number | boolean;\n  marginRight?: string | number | boolean;\n  marginBottom?: string | number | boolean;\n  marginLeft?: string | number | boolean;\n}) {\n  return processDirectionalStyle(MARGIN_CONFIG, {\n    main: margin,\n    block: marginBlock,\n    inline: marginInline,\n    top: marginTop,\n    right: marginRight,\n    bottom: marginBottom,\n    left: marginLeft,\n  });\n}\n\nmarginStyle.__lookupStyles = [\n  'margin',\n  'marginTop',\n  'marginRight',\n  'marginBottom',\n  'marginLeft',\n  'marginBlock',\n  'marginInline',\n];\n"],"mappings":";;AAEA,MAAM,gBAAgB;CACpB,UAAU;CACV,cAAc;CACd,WAAW;CACX,aAAa;CACd;AAED,SAAgB,YAAY,EAC1B,QACA,aACA,cACA,WACA,aACA,cACA,cASC;AACD,QAAO,wBAAwB,eAAe;EAC5C,MAAM;EACN,OAAO;EACP,QAAQ;EACR,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACP,CAAC;;AAGJ,YAAY,iBAAiB;CAC3B;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}

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> | null;
+declare namespace outlineStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+export { outlineStyle };
+//# sourceMappingURL=outline.d.ts.map

package/dist/styles/outline.js

@@ -0,0 +1,55 @@
+import { CSS_WIDE_KEYWORDS } from "../parser/const.js";
+import { filterMods, parseStyle } from "../utils/styles.js";
+import { BORDER_STYLES } from "./const.js";
+//#region src/styles/outline.ts
+/**
+* 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) if (typeof outline === "string" && CSS_WIDE_KEYWORDS.has(outline)) result["outline"] = outline;
+	else {
+		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 null;
+	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 { CSS_WIDE_KEYWORDS } from '../parser/const';\nimport { filterMods, parseStyle } from '../utils/styles';\nimport { BORDER_STYLES } from './const';\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    if (typeof outline === 'string' && CSS_WIDE_KEYWORDS.has(outline)) {\n      result['outline'] = outline;\n    } else {\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(\n          outlinePart.mods,\n          BORDER_STYLES as unknown as string[],\n        );\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        if (offsetPart?.values[0]) {\n          result['outline-offset'] = offsetPart.values[0];\n        }\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  if (Object.keys(result).length === 0) {\n    return null;\n  }\n\n  return result;\n}\n\noutlineStyle.__lookupStyles = ['outline', 'outlineOffset'];\n"],"mappings":";;;;;;;;;;;;;;;;;;AAuBA,SAAgB,aAAa,EAAE,SAAS,iBAAoC;CAC1E,MAAM,SAAiC,EAAE;AAGzC,KAAI,WAAW,QAAQ,YAAY,MACjC,KAAI,OAAO,YAAY,YAAY,kBAAkB,IAAI,QAAQ,CAC/D,QAAO,aAAa;MACf;EACL,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,WACf,YAAY,MACZ,cACD;AAMD,UAAO,aAAa;IAJN,YAAY,OAAO,MAAM;IAC1B,SAAS,MAAM;IACP,YAAY,OAAO,MAAM;IAEC,CAAC,KAAK,IAAI;AAEzD,OAAI,YAAY,OAAO,GACrB,QAAO,oBAAoB,WAAW,OAAO;;;AAOrD,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;;AAG/D,KAAI,OAAO,KAAK,OAAO,CAAC,WAAW,EACjC,QAAO;AAGT,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;
+}): Record<string, string> | null;
+declare namespace paddingStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+export { paddingStyle };
+//# sourceMappingURL=padding.d.ts.map

package/dist/styles/padding.js

@@ -0,0 +1,32 @@
+import { processDirectionalStyle } from "./directional.js";
+//#region src/styles/padding.ts
+const PADDING_CONFIG = {
+	property: "padding",
+	defaultValue: "var(--gap)",
+	trueValue: "1x",
+	defaultInit: "0"
+};
+function paddingStyle({ padding, paddingBlock, paddingInline, paddingTop, paddingRight, paddingBottom, paddingLeft }) {
+	return processDirectionalStyle(PADDING_CONFIG, {
+		main: padding,
+		block: paddingBlock,
+		inline: paddingInline,
+		top: paddingTop,
+		right: paddingRight,
+		bottom: paddingBottom,
+		left: paddingLeft
+	});
+}
+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 { processDirectionalStyle } from './directional';\n\nconst PADDING_CONFIG = {\n  property: 'padding',\n  defaultValue: 'var(--gap)',\n  trueValue: '1x',\n  defaultInit: '0',\n} as const;\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  return processDirectionalStyle(PADDING_CONFIG, {\n    main: padding,\n    block: paddingBlock,\n    inline: paddingInline,\n    top: paddingTop,\n    right: paddingRight,\n    bottom: paddingBottom,\n    left: paddingLeft,\n  });\n}\n\npaddingStyle.__lookupStyles = [\n  'padding',\n  'paddingTop',\n  'paddingRight',\n  'paddingBottom',\n  'paddingLeft',\n  'paddingBlock',\n  'paddingInline',\n];\n"],"mappings":";;AAEA,MAAM,iBAAiB;CACrB,UAAU;CACV,cAAc;CACd,WAAW;CACX,aAAa;CACd;AAED,SAAgB,aAAa,EAC3B,SACA,cACA,eACA,YACA,cACA,eACA,eASC;AACD,QAAO,wBAAwB,gBAAgB;EAC7C,MAAM;EACN,OAAO;EACP,QAAQ;EACR,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACP,CAAC;;AAGJ,aAAa,iBAAiB;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}

package/dist/styles/placement.d.ts

@@ -0,0 +1,37 @@
+//#region src/styles/placement.d.ts
+interface PlacementStyleProps {
+  place?: string | boolean;
+  placeItems?: string | boolean;
+  placeContent?: string | boolean;
+  align?: string | boolean;
+  justify?: string | boolean;
+  alignItems?: string | boolean;
+  alignContent?: string | boolean;
+  justifyItems?: string | boolean;
+  justifyContent?: string | boolean;
+}
+/**
+ * Unified placement handler replacing align, justify, and place.
+ *
+ * Priority (later overrides earlier):
+ * 1. place (lowest) — sets all 4 longhands
+ * 2. placeItems, placeContent, align, justify (medium) — each sets 2 longhands
+ * 3. alignItems, alignContent, justifyItems, justifyContent (highest) — each sets 1 longhand
+ */
+declare function placementStyle({
+  place,
+  placeItems,
+  placeContent,
+  align,
+  justify,
+  alignItems,
+  alignContent,
+  justifyItems,
+  justifyContent
+}: PlacementStyleProps): Record<string, string> | null;
+declare namespace placementStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+export { placementStyle };
+//# sourceMappingURL=placement.d.ts.map

package/dist/styles/placement.js

@@ -0,0 +1,74 @@
+//#region src/styles/placement.ts
+function str(val) {
+	if (val == null || val === false || val === "") return null;
+	if (val === true) return "center";
+	return String(val);
+}
+/**
+* Unified placement handler replacing align, justify, and place.
+*
+* Priority (later overrides earlier):
+* 1. place (lowest) — sets all 4 longhands
+* 2. placeItems, placeContent, align, justify (medium) — each sets 2 longhands
+* 3. alignItems, alignContent, justifyItems, justifyContent (highest) — each sets 1 longhand
+*/
+function placementStyle({ place, placeItems, placeContent, align, justify, alignItems, alignContent, justifyItems, justifyContent }) {
+	const result = {};
+	const placeVal = str(place);
+	if (placeVal) {
+		const parts = placeVal.split(/\s+/);
+		const first = parts[0];
+		const second = parts[1] || first;
+		result["align-items"] = first;
+		result["justify-items"] = second;
+		result["align-content"] = first;
+		result["justify-content"] = second;
+	}
+	const placeItemsVal = str(placeItems);
+	if (placeItemsVal) {
+		const parts = placeItemsVal.split(/\s+/);
+		result["align-items"] = parts[0];
+		result["justify-items"] = parts[1] || parts[0];
+	}
+	const placeContentVal = str(placeContent);
+	if (placeContentVal) {
+		const parts = placeContentVal.split(/\s+/);
+		result["align-content"] = parts[0];
+		result["justify-content"] = parts[1] || parts[0];
+	}
+	const alignVal = str(align);
+	if (alignVal) {
+		result["align-items"] = alignVal;
+		result["align-content"] = alignVal;
+	}
+	const justifyVal = str(justify);
+	if (justifyVal) {
+		result["justify-items"] = justifyVal;
+		result["justify-content"] = justifyVal;
+	}
+	const alignItemsVal = str(alignItems);
+	if (alignItemsVal) result["align-items"] = alignItemsVal;
+	const alignContentVal = str(alignContent);
+	if (alignContentVal) result["align-content"] = alignContentVal;
+	const justifyItemsVal = str(justifyItems);
+	if (justifyItemsVal) result["justify-items"] = justifyItemsVal;
+	const justifyContentVal = str(justifyContent);
+	if (justifyContentVal) result["justify-content"] = justifyContentVal;
+	if (Object.keys(result).length === 0) return null;
+	return result;
+}
+placementStyle.__lookupStyles = [
+	"place",
+	"placeItems",
+	"placeContent",
+	"align",
+	"justify",
+	"alignItems",
+	"alignContent",
+	"justifyItems",
+	"justifyContent"
+];
+//#endregion
+export { placementStyle };
+
+//# sourceMappingURL=placement.js.map

package/dist/styles/placement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"placement.js","names":[],"sources":["../../src/styles/placement.ts"],"sourcesContent":["interface PlacementStyleProps {\n  place?: string | boolean;\n  placeItems?: string | boolean;\n  placeContent?: string | boolean;\n  align?: string | boolean;\n  justify?: string | boolean;\n  alignItems?: string | boolean;\n  alignContent?: string | boolean;\n  justifyItems?: string | boolean;\n  justifyContent?: string | boolean;\n}\n\nfunction str(val: string | boolean | undefined): string | null {\n  if (val == null || val === false || val === '') return null;\n  if (val === true) return 'center';\n\n  return String(val);\n}\n\n/**\n * Unified placement handler replacing align, justify, and place.\n *\n * Priority (later overrides earlier):\n * 1. place (lowest) — sets all 4 longhands\n * 2. placeItems, placeContent, align, justify (medium) — each sets 2 longhands\n * 3. alignItems, alignContent, justifyItems, justifyContent (highest) — each sets 1 longhand\n */\nexport function placementStyle({\n  place,\n  placeItems,\n  placeContent,\n  align,\n  justify,\n  alignItems,\n  alignContent,\n  justifyItems,\n  justifyContent,\n}: PlacementStyleProps) {\n  const result: Record<string, string> = {};\n\n  const placeVal = str(place);\n\n  if (placeVal) {\n    const parts = placeVal.split(/\\s+/);\n    const first = parts[0];\n    const second = parts[1] || first;\n\n    result['align-items'] = first;\n    result['justify-items'] = second;\n    result['align-content'] = first;\n    result['justify-content'] = second;\n  }\n\n  const placeItemsVal = str(placeItems);\n\n  if (placeItemsVal) {\n    const parts = placeItemsVal.split(/\\s+/);\n\n    result['align-items'] = parts[0];\n    result['justify-items'] = parts[1] || parts[0];\n  }\n\n  const placeContentVal = str(placeContent);\n\n  if (placeContentVal) {\n    const parts = placeContentVal.split(/\\s+/);\n\n    result['align-content'] = parts[0];\n    result['justify-content'] = parts[1] || parts[0];\n  }\n\n  const alignVal = str(align);\n\n  if (alignVal) {\n    result['align-items'] = alignVal;\n    result['align-content'] = alignVal;\n  }\n\n  const justifyVal = str(justify);\n\n  if (justifyVal) {\n    result['justify-items'] = justifyVal;\n    result['justify-content'] = justifyVal;\n  }\n\n  const alignItemsVal = str(alignItems);\n\n  if (alignItemsVal) result['align-items'] = alignItemsVal;\n\n  const alignContentVal = str(alignContent);\n\n  if (alignContentVal) result['align-content'] = alignContentVal;\n\n  const justifyItemsVal = str(justifyItems);\n\n  if (justifyItemsVal) result['justify-items'] = justifyItemsVal;\n\n  const justifyContentVal = str(justifyContent);\n\n  if (justifyContentVal) result['justify-content'] = justifyContentVal;\n\n  if (Object.keys(result).length === 0) return null;\n\n  return result;\n}\n\nplacementStyle.__lookupStyles = [\n  'place',\n  'placeItems',\n  'placeContent',\n  'align',\n  'justify',\n  'alignItems',\n  'alignContent',\n  'justifyItems',\n  'justifyContent',\n];\n"],"mappings":";AAYA,SAAS,IAAI,KAAkD;AAC7D,KAAI,OAAO,QAAQ,QAAQ,SAAS,QAAQ,GAAI,QAAO;AACvD,KAAI,QAAQ,KAAM,QAAO;AAEzB,QAAO,OAAO,IAAI;;;;;;;;;;AAWpB,SAAgB,eAAe,EAC7B,OACA,YACA,cACA,OACA,SACA,YACA,cACA,cACA,kBACsB;CACtB,MAAM,SAAiC,EAAE;CAEzC,MAAM,WAAW,IAAI,MAAM;AAE3B,KAAI,UAAU;EACZ,MAAM,QAAQ,SAAS,MAAM,MAAM;EACnC,MAAM,QAAQ,MAAM;EACpB,MAAM,SAAS,MAAM,MAAM;AAE3B,SAAO,iBAAiB;AACxB,SAAO,mBAAmB;AAC1B,SAAO,mBAAmB;AAC1B,SAAO,qBAAqB;;CAG9B,MAAM,gBAAgB,IAAI,WAAW;AAErC,KAAI,eAAe;EACjB,MAAM,QAAQ,cAAc,MAAM,MAAM;AAExC,SAAO,iBAAiB,MAAM;AAC9B,SAAO,mBAAmB,MAAM,MAAM,MAAM;;CAG9C,MAAM,kBAAkB,IAAI,aAAa;AAEzC,KAAI,iBAAiB;EACnB,MAAM,QAAQ,gBAAgB,MAAM,MAAM;AAE1C,SAAO,mBAAmB,MAAM;AAChC,SAAO,qBAAqB,MAAM,MAAM,MAAM;;CAGhD,MAAM,WAAW,IAAI,MAAM;AAE3B,KAAI,UAAU;AACZ,SAAO,iBAAiB;AACxB,SAAO,mBAAmB;;CAG5B,MAAM,aAAa,IAAI,QAAQ;AAE/B,KAAI,YAAY;AACd,SAAO,mBAAmB;AAC1B,SAAO,qBAAqB;;CAG9B,MAAM,gBAAgB,IAAI,WAAW;AAErC,KAAI,cAAe,QAAO,iBAAiB;CAE3C,MAAM,kBAAkB,IAAI,aAAa;AAEzC,KAAI,gBAAiB,QAAO,mBAAmB;CAE/C,MAAM,kBAAkB,IAAI,aAAa;AAEzC,KAAI,gBAAiB,QAAO,mBAAmB;CAE/C,MAAM,oBAAoB,IAAI,eAAe;AAE7C,KAAI,kBAAmB,QAAO,qBAAqB;AAEnD,KAAI,OAAO,KAAK,OAAO,CAAC,WAAW,EAAG,QAAO;AAE7C,QAAO;;AAGT,eAAe,iBAAiB;CAC9B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}

package/dist/styles/predefined.d.ts

@@ -0,0 +1,71 @@
+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 { marginStyle } from "./margin.js";
+import { outlineStyle } from "./outline.js";
+import { paddingStyle } from "./padding.js";
+import { placementStyle } from "./placement.js";
+import { presetStyle } from "./preset.js";
+import { radiusStyle } from "./radius.js";
+import { scrollMarginStyle } from "./scrollMargin.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 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 margin: typeof marginStyle;
+  readonly outline: typeof outlineStyle;
+  readonly padding: typeof paddingStyle;
+  readonly placement: typeof placementStyle;
+  readonly preset: typeof presetStyle;
+  readonly radius: typeof radiusStyle;
+  readonly scrollMargin: typeof scrollMarginStyle;
+  readonly scrollbar: typeof scrollbarStyle;
+  readonly shadow: typeof shadowStyle;
+  readonly transition: typeof transitionStyle;
+  readonly width: typeof widthStyle;
+};
+//#endregion
+export { styleHandlers };
+//# sourceMappingURL=predefined.d.ts.map