@tenphi/tasty 1.1.0 → 1.3.0

package/dist/styles/inset.js

@@ -1,139 +1,23 @@
-import { DIRECTIONS, filterMods, parseStyle } from "../utils/styles.js";
-
+import { processDirectionalStyle } from "./directional.js";
 //#region src/styles/inset.ts
-/**
-* Parse an inset value and return the first processed value
-*/
-function parseInsetValue(value) {
-	if (typeof value === "number") return `${value}px`;
-	if (!value) return null;
-	if (value === true) value = "0";
-	const { values } = parseStyle(value).groups[0] ?? { values: [] };
-	return values[0] || "0";
-}
-/**
-* Extract values and directions from a single parsed group.
-*/
-function extractGroupData(group) {
-	const { values = [], mods = [] } = group;
-	return {
-		values: values.length ? values : ["0"],
-		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 inset output shorthand.
-*/
-function optimizeInset(dirs) {
-	const { top, right, bottom, left } = dirs;
-	if (top === right && right === bottom && bottom === left) return { inset: top };
-	if (top === bottom && left === right) return { inset: `${top} ${left}` };
-	return { inset: `${top} ${right} ${bottom} ${left}` };
-}
-/**
-* Inset style handler.
-*
-* IMPORTANT: This handler uses individual CSS properties (top, right, bottom, left)
-* when only individual direction props are specified. This allows CSS cascade to work
-* correctly when modifiers override only some directions.
-*
-* Example problem with using `inset` shorthand everywhere:
-*   styles: {
-*     top: { '': 0, 'side=bottom': 'initial' },
-*     right: { '': 0, 'side=left': 'initial' },
-*     bottom: { '': 0, 'side=top': 'initial' },
-*     left: { '': 0, 'side=right': 'initial' },
-*   }
-*
-* If we output `inset` for both cases:
-*   - Default: inset: 0 0 0 0
-*   - side=bottom: inset: initial auto auto auto  ← WRONG! Overrides all 4 directions
-*
-* With individual properties:
-*   - Default: top: 0; right: 0; bottom: 0; left: 0
-*   - side=bottom: top: initial  ← CORRECT! Only overrides top
-*
-* The `inset` shorthand is only used when the base `inset` prop is specified
-* OR when `insetBlock`/`insetInline` are used (which imply setting pairs).
-*/
+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 }) {
-	if (inset == null && insetBlock == null && insetInline == null && top == null && right == null && bottom == null && left == null) return {};
-	if (inset == null && insetBlock == null && insetInline == null) {
-		const result = {};
-		if (top != null) {
-			const val = parseInsetValue(top);
-			if (val) result["top"] = val;
-		}
-		if (right != null) {
-			const val = parseInsetValue(right);
-			if (val) result["right"] = val;
-		}
-		if (bottom != null) {
-			const val = parseInsetValue(bottom);
-			if (val) result["bottom"] = val;
-		}
-		if (left != null) {
-			const val = parseInsetValue(left);
-			if (val) result["left"] = val;
-		}
-		return result;
-	}
-	const dirs = {
-		top: "auto",
-		right: "auto",
-		bottom: "auto",
-		left: "auto"
-	};
-	if (inset != null) {
-		if (typeof inset === "number") dirs.top = dirs.right = dirs.bottom = dirs.left = `${inset}px`;
-		else if (inset === true) inset = "0";
-		if (typeof inset === "string" && inset) {
-			const groups = parseStyle(inset).groups ?? [];
-			for (const group of groups) {
-				const { values, directions } = extractGroupData(group);
-				applyGroup(dirs, values, directions);
-			}
-		}
-	}
-	if (insetBlock != null) {
-		const val = parseInsetValue(insetBlock);
-		if (val) dirs.top = dirs.bottom = val;
-	}
-	if (insetInline != null) {
-		const val = parseInsetValue(insetInline);
-		if (val) dirs.left = dirs.right = val;
-	}
-	if (top != null) {
-		const val = parseInsetValue(top);
-		if (val) dirs.top = val;
-	}
-	if (right != null) {
-		const val = parseInsetValue(right);
-		if (val) dirs.right = val;
-	}
-	if (bottom != null) {
-		const val = parseInsetValue(bottom);
-		if (val) dirs.bottom = val;
-	}
-	if (left != null) {
-		const val = parseInsetValue(left);
-		if (val) dirs.left = val;
-	}
-	return optimizeInset(dirs);
+	return processDirectionalStyle(INSET_CONFIG, {
+		main: inset,
+		block: insetBlock,
+		inline: insetInline,
+		top,
+		right,
+		bottom,
+		left
+	});
 }
 insetStyle.__lookupStyles = [
 	"inset",
@@ -144,7 +28,7 @@ insetStyle.__lookupStyles = [
 	"bottom",
 	"left"
 ];
-
 //#endregion
 export { insetStyle };
+
 //# sourceMappingURL=inset.js.map

package/dist/styles/inset.js.map

@@ -1 +1 @@
-{"version":3,"file":"inset.js","names":[],"sources":["../../src/styles/inset.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 an inset value and return the first processed value\n */\nfunction parseInsetValue(value: string | number | boolean): string | null {\n  if (typeof value === 'number') return `${value}px`;\n  if (!value) return null;\n  if (value === true) value = '0';\n\n  const { values } = parseStyle(value).groups[0] ?? { values: [] };\n\n  return values[0] || '0';\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 : ['0'],\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 inset output shorthand.\n */\nfunction optimizeInset(dirs: Record<Direction, string>): { inset: string } {\n  const { top, right, bottom, left } = dirs;\n  if (top === right && right === bottom && bottom === left) {\n    return { inset: top };\n  }\n  if (top === bottom && left === right) {\n    return { inset: `${top} ${left}` };\n  }\n  return { inset: `${top} ${right} ${bottom} ${left}` };\n}\n\n/**\n * Inset style handler.\n *\n * IMPORTANT: This handler uses individual CSS properties (top, right, bottom, left)\n * when only individual direction props are specified. This allows CSS cascade to work\n * correctly when modifiers override only some directions.\n *\n * Example problem with using `inset` shorthand everywhere:\n *   styles: {\n *     top: { '': 0, 'side=bottom': 'initial' },\n *     right: { '': 0, 'side=left': 'initial' },\n *     bottom: { '': 0, 'side=top': 'initial' },\n *     left: { '': 0, 'side=right': 'initial' },\n *   }\n *\n * If we output `inset` for both cases:\n *   - Default: inset: 0 0 0 0\n *   - side=bottom: inset: initial auto auto auto  ← WRONG! Overrides all 4 directions\n *\n * With individual properties:\n *   - Default: top: 0; right: 0; bottom: 0; left: 0\n *   - side=bottom: top: initial  ← CORRECT! Only overrides top\n *\n * The `inset` shorthand is only used when the base `inset` prop is specified\n * OR when `insetBlock`/`insetInline` are used (which imply setting pairs).\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  if (\n    inset == null &&\n    insetBlock == null &&\n    insetInline == null &&\n    top == null &&\n    right == null &&\n    bottom == null &&\n    left == null\n  ) {\n    return {};\n  }\n\n  // When only individual direction props are used (no inset, insetBlock, insetInline),\n  // output individual CSS properties to allow proper CSS cascade with modifiers\n  const onlyIndividualProps =\n    inset == null && insetBlock == null && insetInline == null;\n\n  if (onlyIndividualProps) {\n    const result: Record<string, string> = {};\n\n    if (top != null) {\n      const val = parseInsetValue(top);\n      if (val) result['top'] = val;\n    }\n    if (right != null) {\n      const val = parseInsetValue(right);\n      if (val) result['right'] = val;\n    }\n    if (bottom != null) {\n      const val = parseInsetValue(bottom);\n      if (val) result['bottom'] = val;\n    }\n    if (left != null) {\n      const val = parseInsetValue(left);\n      if (val) result['left'] = val;\n    }\n\n    return result;\n  }\n\n  const dirs: Record<Direction, string> = {\n    top: 'auto',\n    right: 'auto',\n    bottom: 'auto',\n    left: 'auto',\n  };\n\n  // Priority 1 (lowest): inset\n  if (inset != null) {\n    if (typeof inset === 'number') {\n      const v = `${inset}px`;\n      dirs.top = dirs.right = dirs.bottom = dirs.left = v;\n    } else if (inset === true) {\n      inset = '0';\n    }\n\n    if (typeof inset === 'string' && inset) {\n      const processed = parseStyle(inset);\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): insetBlock/insetInline\n  if (insetBlock != null) {\n    const val = parseInsetValue(insetBlock);\n    if (val) dirs.top = dirs.bottom = val;\n  }\n  if (insetInline != null) {\n    const val = parseInsetValue(insetInline);\n    if (val) dirs.left = dirs.right = val;\n  }\n\n  // Priority 3 (highest): individual directions\n  if (top != null) {\n    const val = parseInsetValue(top);\n    if (val) dirs.top = val;\n  }\n  if (right != null) {\n    const val = parseInsetValue(right);\n    if (val) dirs.right = val;\n  }\n  if (bottom != null) {\n    const val = parseInsetValue(bottom);\n    if (val) dirs.bottom = val;\n  }\n  if (left != null) {\n    const val = parseInsetValue(left);\n    if (val) dirs.left = val;\n  }\n\n  return optimizeInset(dirs);\n}\n\ninsetStyle.__lookupStyles = [\n  'inset',\n  'insetBlock',\n  'insetInline',\n  'top',\n  'right',\n  'bottom',\n  'left',\n];\n"],"mappings":"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"}
+{"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

@@ -1,16 +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"];
+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", "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", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "border", "radius", "shadow", "outline", "flow", "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", "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", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
+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

@@ -19,7 +19,8 @@ const POSITION_STYLES = [
 	"zIndex",
 	"margin",
 	"inset",
-	"position"
+	"position",
+	"scrollMargin"
 ];
 const BLOCK_INNER_STYLES = [
 	"padding",
@@ -57,6 +58,7 @@ const DIMENSION_STYLES = [
 ];
 const FLOW_STYLES = [
 	"flow",
+	"place",
 	"placeItems",
 	"placeContent",
 	"alignItems",
@@ -92,7 +94,7 @@ const INNER_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

@@ -1 +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] 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  '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;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;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"}
+{"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

@@ -15,7 +15,7 @@ declare function marginStyle({
   marginRight?: string | number | boolean;
   marginBottom?: string | number | boolean;
   marginLeft?: string | number | boolean;
-}): {};
+}): Record<string, string> | null;
 declare namespace marginStyle {
   var __lookupStyles: string[];
 }

package/dist/styles/margin.js

@@ -1,93 +1,21 @@
-import { DIRECTIONS, filterMods, parseStyle } from "../utils/styles.js";
-
+import { processDirectionalStyle } from "./directional.js";
 //#region src/styles/margin.ts
-/**
-* Parse a margin value and return the first processed value
-*/
-function parseMarginValue(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 margin output shorthand.
-*/
-function optimizeMargin(dirs) {
-	const { top, right, bottom, left } = dirs;
-	if (top === right && right === bottom && bottom === left) return { margin: top };
-	if (top === bottom && left === right) return { margin: `${top} ${left}` };
-	return { margin: `${top} ${right} ${bottom} ${left}` };
-}
+const MARGIN_CONFIG = {
+	property: "margin",
+	defaultValue: "var(--gap)",
+	trueValue: "1x",
+	defaultInit: "0"
+};
 function marginStyle({ margin, marginBlock, marginInline, marginTop, marginRight, marginBottom, marginLeft }) {
-	if (margin == null && marginBlock == null && marginInline == null && marginTop == null && marginRight == null && marginBottom == null && marginLeft == null) return {};
-	const dirs = {
-		top: "0",
-		right: "0",
-		bottom: "0",
-		left: "0"
-	};
-	if (margin != null) {
-		if (typeof margin === "number") dirs.top = dirs.right = dirs.bottom = dirs.left = `${margin}px`;
-		else if (margin === true) margin = "1x";
-		if (typeof margin === "string" && margin) {
-			const groups = parseStyle(margin).groups ?? [];
-			for (const group of groups) {
-				const { values, directions } = extractGroupData(group);
-				applyGroup(dirs, values, directions);
-			}
-		}
-	}
-	if (marginBlock != null) {
-		const val = parseMarginValue(marginBlock);
-		if (val) dirs.top = dirs.bottom = val;
-	}
-	if (marginInline != null) {
-		const val = parseMarginValue(marginInline);
-		if (val) dirs.left = dirs.right = val;
-	}
-	if (marginTop != null) {
-		const val = parseMarginValue(marginTop);
-		if (val) dirs.top = val;
-	}
-	if (marginRight != null) {
-		const val = parseMarginValue(marginRight);
-		if (val) dirs.right = val;
-	}
-	if (marginBottom != null) {
-		const val = parseMarginValue(marginBottom);
-		if (val) dirs.bottom = val;
-	}
-	if (marginLeft != null) {
-		const val = parseMarginValue(marginLeft);
-		if (val) dirs.left = val;
-	}
-	return optimizeMargin(dirs);
+	return processDirectionalStyle(MARGIN_CONFIG, {
+		main: margin,
+		block: marginBlock,
+		inline: marginInline,
+		top: marginTop,
+		right: marginRight,
+		bottom: marginBottom,
+		left: marginLeft
+	});
 }
 marginStyle.__lookupStyles = [
 	"margin",
@@ -98,7 +26,7 @@ marginStyle.__lookupStyles = [
 	"marginBlock",
 	"marginInline"
 ];
-
 //#endregion
 export { marginStyle };
+
 //# sourceMappingURL=margin.js.map

package/dist/styles/margin.js.map

@@ -1 +1 @@
-{"version":3,"file":"margin.js","names":[],"sources":["../../src/styles/margin.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 margin value and return the first processed value\n */\nfunction parseMarginValue(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 margin output shorthand.\n */\nfunction optimizeMargin(dirs: Record<Direction, string>): {\n  margin: string;\n} {\n  const { top, right, bottom, left } = dirs;\n  if (top === right && right === bottom && bottom === left) {\n    return { margin: top };\n  }\n  if (top === bottom && left === right) {\n    return { margin: `${top} ${left}` };\n  }\n  return { margin: `${top} ${right} ${bottom} ${left}` };\n}\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  if (\n    margin == null &&\n    marginBlock == null &&\n    marginInline == null &&\n    marginTop == null &&\n    marginRight == null &&\n    marginBottom == null &&\n    marginLeft == 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): margin\n  if (margin != null) {\n    if (typeof margin === 'number') {\n      const v = `${margin}px`;\n      dirs.top = dirs.right = dirs.bottom = dirs.left = v;\n    } else if (margin === true) {\n      margin = '1x';\n    }\n\n    if (typeof margin === 'string' && margin) {\n      const processed = parseStyle(margin);\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): marginBlock/marginInline\n  if (marginBlock != null) {\n    const val = parseMarginValue(marginBlock);\n    if (val) dirs.top = dirs.bottom = val;\n  }\n  if (marginInline != null) {\n    const val = parseMarginValue(marginInline);\n    if (val) dirs.left = dirs.right = val;\n  }\n\n  // Priority 3 (highest): individual directions\n  if (marginTop != null) {\n    const val = parseMarginValue(marginTop);\n    if (val) dirs.top = val;\n  }\n  if (marginRight != null) {\n    const val = parseMarginValue(marginRight);\n    if (val) dirs.right = val;\n  }\n  if (marginBottom != null) {\n    const val = parseMarginValue(marginBottom);\n    if (val) dirs.bottom = val;\n  }\n  if (marginLeft != null) {\n    const val = parseMarginValue(marginLeft);\n    if (val) dirs.left = val;\n  }\n\n  return optimizeMargin(dirs);\n}\n\nmarginStyle.__lookupStyles = [\n  'margin',\n  'marginTop',\n  'marginRight',\n  'marginBottom',\n  'marginLeft',\n  'marginBlock',\n  'marginInline',\n];\n"],"mappings":";;;;;;AAQA,SAAS,iBAAiB,OAAiD;AACzE,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,eAAe,MAEtB;CACA,MAAM,EAAE,KAAK,OAAO,QAAQ,SAAS;AACrC,KAAI,QAAQ,SAAS,UAAU,UAAU,WAAW,KAClD,QAAO,EAAE,QAAQ,KAAK;AAExB,KAAI,QAAQ,UAAU,SAAS,MAC7B,QAAO,EAAE,QAAQ,GAAG,IAAI,GAAG,QAAQ;AAErC,QAAO,EAAE,QAAQ,GAAG,IAAI,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ;;AAGxD,SAAgB,YAAY,EAC1B,QACA,aACA,cACA,WACA,aACA,cACA,cASC;AACD,KACE,UAAU,QACV,eAAe,QACf,gBAAgB,QAChB,aAAa,QACb,eAAe,QACf,gBAAgB,QAChB,cAAc,KAEd,QAAO,EAAE;CAGX,MAAM,OAAkC;EACtC,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACP;AAGD,KAAI,UAAU,MAAM;AAClB,MAAI,OAAO,WAAW,SAEpB,MAAK,MAAM,KAAK,QAAQ,KAAK,SAAS,KAAK,OADjC,GAAG,OAAO;WAEX,WAAW,KACpB,UAAS;AAGX,MAAI,OAAO,WAAW,YAAY,QAAQ;GAExC,MAAM,SADY,WAAW,OAAO,CACX,UAAU,EAAE;AAErC,QAAK,MAAM,SAAS,QAAQ;IAC1B,MAAM,EAAE,QAAQ,eAAe,iBAAiB,MAAM;AACtD,eAAW,MAAM,QAAQ,WAAW;;;;AAM1C,KAAI,eAAe,MAAM;EACvB,MAAM,MAAM,iBAAiB,YAAY;AACzC,MAAI,IAAK,MAAK,MAAM,KAAK,SAAS;;AAEpC,KAAI,gBAAgB,MAAM;EACxB,MAAM,MAAM,iBAAiB,aAAa;AAC1C,MAAI,IAAK,MAAK,OAAO,KAAK,QAAQ;;AAIpC,KAAI,aAAa,MAAM;EACrB,MAAM,MAAM,iBAAiB,UAAU;AACvC,MAAI,IAAK,MAAK,MAAM;;AAEtB,KAAI,eAAe,MAAM;EACvB,MAAM,MAAM,iBAAiB,YAAY;AACzC,MAAI,IAAK,MAAK,QAAQ;;AAExB,KAAI,gBAAgB,MAAM;EACxB,MAAM,MAAM,iBAAiB,aAAa;AAC1C,MAAI,IAAK,MAAK,SAAS;;AAEzB,KAAI,cAAc,MAAM;EACtB,MAAM,MAAM,iBAAiB,WAAW;AACxC,MAAI,IAAK,MAAK,OAAO;;AAGvB,QAAO,eAAe,KAAK;;AAG7B,YAAY,iBAAiB;CAC3B;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}
+{"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

@@ -20,7 +20,7 @@ interface OutlineStyleProps {
 declare function outlineStyle({
   outline,
   outlineOffset
-}: OutlineStyleProps): Record<string, string> | undefined;
+}: OutlineStyleProps): Record<string, string> | null;
 declare namespace outlineStyle {
   var __lookupStyles: string[];
 }

package/dist/styles/outline.js

@@ -1,18 +1,7 @@
+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
-const BORDER_STYLES = [
-	"none",
-	"hidden",
-	"dotted",
-	"dashed",
-	"solid",
-	"double",
-	"groove",
-	"ridge",
-	"inset",
-	"outset"
-];
 /**
 * Generates CSS for outline property with optional offset.
 *
@@ -29,7 +18,8 @@ const BORDER_STYLES = [
 */
 function outlineStyle({ outline, outlineOffset }) {
 	const result = {};
-	if (outline != null && outline !== false) {
+	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";
@@ -55,11 +45,11 @@ function outlineStyle({ outline, outlineOffset }) {
 		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;
+	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

@@ -1 +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"}
+{"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

@@ -15,7 +15,7 @@ declare function paddingStyle({
   paddingRight?: string | number | boolean;
   paddingBottom?: string | number | boolean;
   paddingLeft?: string | number | boolean;
-}): {};
+}): Record<string, string> | null;
 declare namespace paddingStyle {
   var __lookupStyles: string[];
 }

package/dist/styles/padding.js

@@ -1,93 +1,21 @@
-import { DIRECTIONS, filterMods, parseStyle } from "../utils/styles.js";
-
+import { processDirectionalStyle } from "./directional.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}` };
-}
+const PADDING_CONFIG = {
+	property: "padding",
+	defaultValue: "var(--gap)",
+	trueValue: "1x",
+	defaultInit: "0"
+};
 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);
+	return processDirectionalStyle(PADDING_CONFIG, {
+		main: padding,
+		block: paddingBlock,
+		inline: paddingInline,
+		top: paddingTop,
+		right: paddingRight,
+		bottom: paddingBottom,
+		left: paddingLeft
+	});
 }
 paddingStyle.__lookupStyles = [
 	"padding",
@@ -98,7 +26,7 @@ paddingStyle.__lookupStyles = [
 	"paddingBlock",
 	"paddingInline"
 ];
-
 //#endregion
 export { paddingStyle };
+
 //# sourceMappingURL=padding.js.map