@tenphi/tasty 0.1.0

package/dist/styles/radius.js

@@ -0,0 +1,51 @@
+import { makeEmptyDetails } from "../parser/types.js";
+import { DIRECTIONS, parseStyle } from "../utils/styles.js";
+
+//#region src/styles/radius.ts
+const PROP = "var(--radius)";
+const SHARP = "var(--sharp-radius)";
+function radiusStyle({ radius }) {
+	if (typeof radius === "number") radius = `${radius}px`;
+	if (!radius) return;
+	if (radius === true) radius = "1r";
+	const processed = parseStyle(radius);
+	const { mods } = processed.groups[0] ?? makeEmptyDetails();
+	let { values } = processed.groups[0] ?? makeEmptyDetails();
+	if (mods.includes("round")) values = ["9999rem"];
+	else if (mods.includes("ellipse")) values = ["50%"];
+	else if (!values.length) values = [PROP];
+	if (mods.includes("leaf")) values = [
+		values[1] || SHARP,
+		values[0] || PROP,
+		values[1] || SHARP,
+		values[0] || PROP
+	];
+	else if (mods.includes("backleaf")) values = [
+		values[0] || PROP,
+		values[1] || SHARP,
+		values[0] || PROP,
+		values[1] || SHARP
+	];
+	else if (mods.length) {
+		const arr = [
+			"0",
+			"0",
+			"0",
+			"0"
+		];
+		let flag = false;
+		DIRECTIONS.forEach((dir, i) => {
+			if (!mods.includes(dir)) return;
+			flag = true;
+			arr[i] = values[0] || PROP;
+			arr[(i + 1) % 4] = values[0] || PROP;
+		});
+		if (flag) values = arr;
+	}
+	return { "border-radius": values.join(" ") };
+}
+radiusStyle.__lookupStyles = ["radius"];
+
+//#endregion
+export { radiusStyle };
+//# sourceMappingURL=radius.js.map

package/dist/styles/radius.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radius.js","names":[],"sources":["../../src/styles/radius.ts"],"sourcesContent":["import { makeEmptyDetails } from '../parser/types';\nimport { DIRECTIONS, parseStyle } from '../utils/styles';\n\nconst PROP = 'var(--radius)';\nconst SHARP = 'var(--sharp-radius)';\n\nexport function radiusStyle({ radius }) {\n  if (typeof radius === 'number') {\n    radius = `${radius}px`;\n  }\n\n  if (!radius) return;\n\n  if (radius === true) radius = '1r';\n\n  const processed = parseStyle(radius);\n  const { mods } =\n    processed.groups[0] ?? makeEmptyDetails();\n  let { values } =\n    processed.groups[0] ?? makeEmptyDetails();\n\n  if (mods.includes('round')) {\n    values = ['9999rem'];\n  } else if (mods.includes('ellipse')) {\n    values = ['50%'];\n  } else if (!values.length) {\n    values = [PROP];\n  }\n\n  if (mods.includes('leaf')) {\n    values = [\n      values[1] || SHARP,\n      values[0] || PROP,\n      values[1] || SHARP,\n      values[0] || PROP,\n    ];\n  } else if (mods.includes('backleaf')) {\n    values = [\n      values[0] || PROP,\n      values[1] || SHARP,\n      values[0] || PROP,\n      values[1] || SHARP,\n    ];\n  } else if (mods.length) {\n    const arr = ['0', '0', '0', '0'];\n\n    let flag = false;\n\n    DIRECTIONS.forEach((dir, i) => {\n      if (!mods.includes(dir)) return;\n\n      flag = true;\n\n      arr[i] = values[0] || PROP;\n      arr[(i + 1) % 4] = values[0] || PROP;\n    });\n\n    if (flag) {\n      values = arr;\n    }\n  }\n\n  return {\n    'border-radius': values.join(' '),\n  };\n}\n\nradiusStyle.__lookupStyles = ['radius'];\n"],"mappings":";;;;AAGA,MAAM,OAAO;AACb,MAAM,QAAQ;AAEd,SAAgB,YAAY,EAAE,UAAU;AACtC,KAAI,OAAO,WAAW,SACpB,UAAS,GAAG,OAAO;AAGrB,KAAI,CAAC,OAAQ;AAEb,KAAI,WAAW,KAAM,UAAS;CAE9B,MAAM,YAAY,WAAW,OAAO;CACpC,MAAM,EAAE,SACN,UAAU,OAAO,MAAM,kBAAkB;CAC3C,IAAI,EAAE,WACJ,UAAU,OAAO,MAAM,kBAAkB;AAE3C,KAAI,KAAK,SAAS,QAAQ,CACxB,UAAS,CAAC,UAAU;UACX,KAAK,SAAS,UAAU,CACjC,UAAS,CAAC,MAAM;UACP,CAAC,OAAO,OACjB,UAAS,CAAC,KAAK;AAGjB,KAAI,KAAK,SAAS,OAAO,CACvB,UAAS;EACP,OAAO,MAAM;EACb,OAAO,MAAM;EACb,OAAO,MAAM;EACb,OAAO,MAAM;EACd;UACQ,KAAK,SAAS,WAAW,CAClC,UAAS;EACP,OAAO,MAAM;EACb,OAAO,MAAM;EACb,OAAO,MAAM;EACb,OAAO,MAAM;EACd;UACQ,KAAK,QAAQ;EACtB,MAAM,MAAM;GAAC;GAAK;GAAK;GAAK;GAAI;EAEhC,IAAI,OAAO;AAEX,aAAW,SAAS,KAAK,MAAM;AAC7B,OAAI,CAAC,KAAK,SAAS,IAAI,CAAE;AAEzB,UAAO;AAEP,OAAI,KAAK,OAAO,MAAM;AACtB,QAAK,IAAI,KAAK,KAAK,OAAO,MAAM;IAChC;AAEF,MAAI,KACF,UAAS;;AAIb,QAAO,EACL,iBAAiB,OAAO,KAAK,IAAI,EAClC;;AAGH,YAAY,iBAAiB,CAAC,SAAS"}

package/dist/styles/radius.mjs

@@ -0,0 +1,51 @@
+import { makeEmptyDetails } from "../parser/types.mjs";
+import { DIRECTIONS, parseStyle } from "../utils/styles.mjs";
+
+//#region src/styles/radius.ts
+const PROP = "var(--radius)";
+const SHARP = "var(--sharp-radius)";
+function radiusStyle({ radius }) {
+	if (typeof radius === "number") radius = `${radius}px`;
+	if (!radius) return;
+	if (radius === true) radius = "1r";
+	const processed = parseStyle(radius);
+	const { mods } = processed.groups[0] ?? makeEmptyDetails();
+	let { values } = processed.groups[0] ?? makeEmptyDetails();
+	if (mods.includes("round")) values = ["9999rem"];
+	else if (mods.includes("ellipse")) values = ["50%"];
+	else if (!values.length) values = [PROP];
+	if (mods.includes("leaf")) values = [
+		values[1] || SHARP,
+		values[0] || PROP,
+		values[1] || SHARP,
+		values[0] || PROP
+	];
+	else if (mods.includes("backleaf")) values = [
+		values[0] || PROP,
+		values[1] || SHARP,
+		values[0] || PROP,
+		values[1] || SHARP
+	];
+	else if (mods.length) {
+		const arr = [
+			"0",
+			"0",
+			"0",
+			"0"
+		];
+		let flag = false;
+		DIRECTIONS.forEach((dir, i) => {
+			if (!mods.includes(dir)) return;
+			flag = true;
+			arr[i] = values[0] || PROP;
+			arr[(i + 1) % 4] = values[0] || PROP;
+		});
+		if (flag) values = arr;
+	}
+	return { "border-radius": values.join(" ") };
+}
+radiusStyle.__lookupStyles = ["radius"];
+
+//#endregion
+export { radiusStyle };
+//# sourceMappingURL=radius.mjs.map

package/dist/styles/radius.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radius.mjs","names":[],"sources":["../../src/styles/radius.ts"],"sourcesContent":["import { makeEmptyDetails } from '../parser/types';\nimport { DIRECTIONS, parseStyle } from '../utils/styles';\n\nconst PROP = 'var(--radius)';\nconst SHARP = 'var(--sharp-radius)';\n\nexport function radiusStyle({ radius }) {\n  if (typeof radius === 'number') {\n    radius = `${radius}px`;\n  }\n\n  if (!radius) return;\n\n  if (radius === true) radius = '1r';\n\n  const processed = parseStyle(radius);\n  const { mods } =\n    processed.groups[0] ?? makeEmptyDetails();\n  let { values } =\n    processed.groups[0] ?? makeEmptyDetails();\n\n  if (mods.includes('round')) {\n    values = ['9999rem'];\n  } else if (mods.includes('ellipse')) {\n    values = ['50%'];\n  } else if (!values.length) {\n    values = [PROP];\n  }\n\n  if (mods.includes('leaf')) {\n    values = [\n      values[1] || SHARP,\n      values[0] || PROP,\n      values[1] || SHARP,\n      values[0] || PROP,\n    ];\n  } else if (mods.includes('backleaf')) {\n    values = [\n      values[0] || PROP,\n      values[1] || SHARP,\n      values[0] || PROP,\n      values[1] || SHARP,\n    ];\n  } else if (mods.length) {\n    const arr = ['0', '0', '0', '0'];\n\n    let flag = false;\n\n    DIRECTIONS.forEach((dir, i) => {\n      if (!mods.includes(dir)) return;\n\n      flag = true;\n\n      arr[i] = values[0] || PROP;\n      arr[(i + 1) % 4] = values[0] || PROP;\n    });\n\n    if (flag) {\n      values = arr;\n    }\n  }\n\n  return {\n    'border-radius': values.join(' '),\n  };\n}\n\nradiusStyle.__lookupStyles = ['radius'];\n"],"mappings":";;;;AAGA,MAAM,OAAO;AACb,MAAM,QAAQ;AAEd,SAAgB,YAAY,EAAE,UAAU;AACtC,KAAI,OAAO,WAAW,SACpB,UAAS,GAAG,OAAO;AAGrB,KAAI,CAAC,OAAQ;AAEb,KAAI,WAAW,KAAM,UAAS;CAE9B,MAAM,YAAY,WAAW,OAAO;CACpC,MAAM,EAAE,SACN,UAAU,OAAO,MAAM,kBAAkB;CAC3C,IAAI,EAAE,WACJ,UAAU,OAAO,MAAM,kBAAkB;AAE3C,KAAI,KAAK,SAAS,QAAQ,CACxB,UAAS,CAAC,UAAU;UACX,KAAK,SAAS,UAAU,CACjC,UAAS,CAAC,MAAM;UACP,CAAC,OAAO,OACjB,UAAS,CAAC,KAAK;AAGjB,KAAI,KAAK,SAAS,OAAO,CACvB,UAAS;EACP,OAAO,MAAM;EACb,OAAO,MAAM;EACb,OAAO,MAAM;EACb,OAAO,MAAM;EACd;UACQ,KAAK,SAAS,WAAW,CAClC,UAAS;EACP,OAAO,MAAM;EACb,OAAO,MAAM;EACb,OAAO,MAAM;EACb,OAAO,MAAM;EACd;UACQ,KAAK,QAAQ;EACtB,MAAM,MAAM;GAAC;GAAK;GAAK;GAAK;GAAI;EAEhC,IAAI,OAAO;AAEX,aAAW,SAAS,KAAK,MAAM;AAC7B,OAAI,CAAC,KAAK,SAAS,IAAI,CAAE;AAEzB,UAAO;AAEP,OAAI,KAAK,OAAO,MAAM;AACtB,QAAK,IAAI,KAAK,KAAK,OAAO,MAAM;IAChC;AAEF,MAAI,KACF,UAAS;;AAIb,QAAO,EACL,iBAAiB,OAAO,KAAK,IAAI,EAClC;;AAGH,YAAY,iBAAiB,CAAC,SAAS"}

package/dist/styles/scrollbar.d.ts

@@ -0,0 +1,21 @@
+//#region src/styles/scrollbar.d.ts
+interface ScrollbarStyleProps {
+  scrollbar?: string | boolean | number;
+  overflow?: string;
+}
+/**
+ * Creates cross-browser compatible scrollbar styles
+ *
+ * Supports both Firefox (scrollbar-width, scrollbar-color) and
+ * WebKit/Chromium browsers (::-webkit-scrollbar)
+ */
+declare function scrollbarStyle({
+  scrollbar,
+  overflow
+}: ScrollbarStyleProps): {} | undefined;
+declare namespace scrollbarStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+export { scrollbarStyle };
+//# sourceMappingURL=scrollbar.d.ts.map

package/dist/styles/scrollbar.js

@@ -0,0 +1,105 @@
+import { makeEmptyDetails } from "../parser/types.js";
+import { parseStyle } from "../utils/styles.js";
+
+//#region src/styles/scrollbar.ts
+/**
+* Creates cross-browser compatible scrollbar styles
+*
+* Supports both Firefox (scrollbar-width, scrollbar-color) and
+* WebKit/Chromium browsers (::-webkit-scrollbar)
+*/
+function scrollbarStyle({ scrollbar, overflow }) {
+	if (!scrollbar && scrollbar !== 0) return;
+	const value = scrollbar === true || scrollbar === "" ? "thin" : scrollbar;
+	const { mods, colors, values } = parseStyle(String(value)).groups[0] ?? makeEmptyDetails();
+	const style = {};
+	const defaultThumbColor = "var(--scrollbar-thumb-color)";
+	const defaultTrackColor = "var(--scrollbar-track-color, transparent)";
+	style["scrollbar-color"] = `${defaultThumbColor} transparent`;
+	const sizeValue = values[0] || "8px";
+	if (mods.includes("thin")) style["scrollbar-width"] = "thin";
+	else if (mods.includes("none")) {
+		style["scrollbar-width"] = "none";
+		delete style["scrollbar-color"];
+		style["&::-webkit-scrollbar"] = {
+			width: "0px",
+			height: "0px",
+			display: "none"
+		};
+		return style;
+	} else if (mods.includes("auto")) style["scrollbar-width"] = "auto";
+	if (mods.includes("stable") || mods.includes("both-edges")) style["scrollbar-gutter"] = mods.includes("both-edges") ? "stable both-edges" : "stable";
+	if (sizeValue) style["&::-webkit-scrollbar"] = {
+		...style["&::-webkit-scrollbar"] || {},
+		width: sizeValue,
+		height: sizeValue
+	};
+	const thumbColor = colors && colors[0] ? colors[0] : defaultThumbColor;
+	const trackColor = colors && colors[1] ? colors[1] : defaultTrackColor;
+	const cornerColor = colors && colors[2] ? colors[2] : trackColor;
+	if (colors && colors.length) {
+		style["scrollbar-color"] = `${thumbColor} ${trackColor}`;
+		if (!style["&::-webkit-scrollbar"]) style["&::-webkit-scrollbar"] = {};
+		style["&::-webkit-scrollbar"]["background"] = trackColor;
+		style["&::-webkit-scrollbar-track"] = {
+			...style["&::-webkit-scrollbar-track"] || {},
+			background: trackColor
+		};
+		style["&::-webkit-scrollbar-thumb"] = {
+			...style["&::-webkit-scrollbar-thumb"] || {},
+			background: thumbColor
+		};
+		style["&::-webkit-scrollbar-corner"] = {
+			...style["&::-webkit-scrollbar-corner"] || {},
+			background: cornerColor
+		};
+	}
+	if (mods.includes("always")) {
+		style["overflow"] = overflow || "scroll";
+		if (!style["scrollbar-gutter"]) style["scrollbar-gutter"] = "stable";
+		if (!style["&::-webkit-scrollbar"]) style["&::-webkit-scrollbar"] = {};
+		style["&::-webkit-scrollbar"]["display"] = "block";
+	}
+	if (mods.includes("styled")) {
+		const baseTransition = [
+			"background var(--transition)",
+			"border-radius var(--transition)",
+			"box-shadow var(--transition)",
+			"width var(--transition)",
+			"height var(--transition)",
+			"border var(--transition)"
+		].join(", ");
+		style["scrollbar-width"] = style["scrollbar-width"] || "thin";
+		style["scrollbar-color"] = style["scrollbar-color"] || `${defaultThumbColor} ${defaultTrackColor}`;
+		style["&::-webkit-scrollbar"] = {
+			width: sizeValue,
+			height: sizeValue,
+			transition: baseTransition,
+			background: defaultTrackColor,
+			...style["&::-webkit-scrollbar"] || {}
+		};
+		style["&::-webkit-scrollbar-thumb"] = {
+			"border-radius": "8px",
+			"min-height": "24px",
+			transition: baseTransition,
+			background: defaultThumbColor,
+			...style["&::-webkit-scrollbar-thumb"] || {}
+		};
+		style["&::-webkit-scrollbar-track"] = {
+			background: defaultTrackColor,
+			transition: baseTransition,
+			...style["&::-webkit-scrollbar-track"] || {}
+		};
+		style["&::-webkit-scrollbar-corner"] = {
+			background: defaultTrackColor,
+			transition: baseTransition,
+			...style["&::-webkit-scrollbar-corner"] || {}
+		};
+	}
+	return style;
+}
+scrollbarStyle.__lookupStyles = ["scrollbar", "overflow"];
+
+//#endregion
+export { scrollbarStyle };
+//# sourceMappingURL=scrollbar.js.map

package/dist/styles/scrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollbar.js","names":[],"sources":["../../src/styles/scrollbar.ts"],"sourcesContent":["import { makeEmptyDetails } from '../parser/types';\nimport { parseStyle } from '../utils/styles';\n\ninterface ScrollbarStyleProps {\n  scrollbar?: string | boolean | number;\n  overflow?: string;\n}\n\n/**\n * Creates cross-browser compatible scrollbar styles\n *\n * Supports both Firefox (scrollbar-width, scrollbar-color) and\n * WebKit/Chromium browsers (::-webkit-scrollbar)\n */\nexport function scrollbarStyle({ scrollbar, overflow }: ScrollbarStyleProps) {\n  // Check if scrollbar is defined\n  if (!scrollbar && scrollbar !== 0) return;\n\n  // Support true as alias for thin\n  const value = scrollbar === true || scrollbar === '' ? 'thin' : scrollbar;\n  const processed = parseStyle(String(value));\n  const { mods, colors, values } =\n    processed.groups[0] ?? makeEmptyDetails();\n  const style = {};\n\n  // Default colors for scrollbar\n  const defaultThumbColor = 'var(--scrollbar-thumb-color)';\n  const defaultTrackColor = 'var(--scrollbar-track-color, transparent)';\n\n  // Setup default Firefox scrollbar style\n  style['scrollbar-color'] = `${defaultThumbColor} transparent`;\n\n  // Default scrollbar size\n  const defaultSize = '8px';\n  const sizeValue = values[0] || defaultSize;\n\n  // Process modifiers\n  if (mods.includes('thin')) {\n    style['scrollbar-width'] = 'thin';\n  } else if (mods.includes('none')) {\n    style['scrollbar-width'] = 'none';\n    // Remove scrollbar-color as it's not needed when scrollbar is hidden\n    delete style['scrollbar-color'];\n    // Also hide WebKit scrollbars\n    style['&::-webkit-scrollbar'] = {\n      width: '0px',\n      height: '0px',\n      display: 'none',\n    };\n\n    return style;\n  } else if (mods.includes('auto')) {\n    style['scrollbar-width'] = 'auto';\n  }\n\n  // Handle scrollbar gutter behavior\n  if (mods.includes('stable') || mods.includes('both-edges')) {\n    // scrollbar-gutter is supported in newer browsers only\n    style['scrollbar-gutter'] = mods.includes('both-edges')\n      ? 'stable both-edges'\n      : 'stable';\n  }\n\n  // Custom size setup for WebKit\n  if (sizeValue) {\n    style['&::-webkit-scrollbar'] = {\n      ...(style['&::-webkit-scrollbar'] || {}),\n      width: sizeValue,\n      height: sizeValue,\n    };\n  }\n\n  // Extract colors (support up to 3: thumb, track, corner)\n  // These will be used in various places throughout the function\n  const thumbColor = colors && colors[0] ? colors[0] : defaultThumbColor;\n  const trackColor = colors && colors[1] ? colors[1] : defaultTrackColor;\n  const cornerColor = colors && colors[2] ? colors[2] : trackColor;\n\n  // Apply colors if they are specified\n  if (colors && colors.length) {\n    // Firefox\n    style['scrollbar-color'] = `${thumbColor} ${trackColor}`;\n\n    // WebKit - always set these for consistency\n    if (!style['&::-webkit-scrollbar']) {\n      style['&::-webkit-scrollbar'] = {};\n    }\n    style['&::-webkit-scrollbar']['background'] = trackColor;\n\n    style['&::-webkit-scrollbar-track'] = {\n      ...(style['&::-webkit-scrollbar-track'] || {}),\n      background: trackColor,\n    };\n\n    style['&::-webkit-scrollbar-thumb'] = {\n      ...(style['&::-webkit-scrollbar-thumb'] || {}),\n      background: thumbColor,\n    };\n\n    style['&::-webkit-scrollbar-corner'] = {\n      ...(style['&::-webkit-scrollbar-corner'] || {}),\n      background: cornerColor,\n    };\n  }\n\n  // Handle 'always' mode: force scrollbars to show\n  if (mods.includes('always')) {\n    style['overflow'] = overflow || 'scroll';\n\n    // Use auto for WebKit browsers since they don't support 'always'\n    // This is closer to the expected behavior\n    if (!style['scrollbar-gutter']) {\n      style['scrollbar-gutter'] = 'stable';\n    }\n\n    // Ensure scrollbars appear in WebKit even with little content\n    if (!style['&::-webkit-scrollbar']) {\n      style['&::-webkit-scrollbar'] = {};\n    }\n    style['&::-webkit-scrollbar']['display'] = 'block';\n  }\n\n  // Enhanced 'styled' mode with better transitions and appearance\n  if (mods.includes('styled')) {\n    const baseTransition = [\n      'background var(--transition)',\n      'border-radius var(--transition)',\n      'box-shadow var(--transition)',\n      'width var(--transition)',\n      'height var(--transition)',\n      'border var(--transition)',\n    ].join(', ');\n\n    // Firefox\n    style['scrollbar-width'] = style['scrollbar-width'] || 'thin';\n    style['scrollbar-color'] =\n      style['scrollbar-color'] || `${defaultThumbColor} ${defaultTrackColor}`;\n\n    // WebKit\n    style['&::-webkit-scrollbar'] = {\n      width: sizeValue,\n      height: sizeValue,\n      transition: baseTransition,\n      background: defaultTrackColor,\n      ...(style['&::-webkit-scrollbar'] || {}),\n    };\n\n    style['&::-webkit-scrollbar-thumb'] = {\n      'border-radius': '8px',\n      'min-height': '24px',\n      transition: baseTransition,\n      background: defaultThumbColor,\n      ...(style['&::-webkit-scrollbar-thumb'] || {}),\n    };\n\n    style['&::-webkit-scrollbar-track'] = {\n      background: defaultTrackColor,\n      transition: baseTransition,\n      ...(style['&::-webkit-scrollbar-track'] || {}),\n    };\n\n    style['&::-webkit-scrollbar-corner'] = {\n      background: defaultTrackColor,\n      transition: baseTransition,\n      ...(style['&::-webkit-scrollbar-corner'] || {}),\n    };\n  }\n\n  return style;\n}\n\nscrollbarStyle.__lookupStyles = ['scrollbar', 'overflow'];\n"],"mappings":";;;;;;;;;;AAcA,SAAgB,eAAe,EAAE,WAAW,YAAiC;AAE3E,KAAI,CAAC,aAAa,cAAc,EAAG;CAGnC,MAAM,QAAQ,cAAc,QAAQ,cAAc,KAAK,SAAS;CAEhE,MAAM,EAAE,MAAM,QAAQ,WADJ,WAAW,OAAO,MAAM,CAAC,CAE/B,OAAO,MAAM,kBAAkB;CAC3C,MAAM,QAAQ,EAAE;CAGhB,MAAM,oBAAoB;CAC1B,MAAM,oBAAoB;AAG1B,OAAM,qBAAqB,GAAG,kBAAkB;CAIhD,MAAM,YAAY,OAAO,MADL;AAIpB,KAAI,KAAK,SAAS,OAAO,CACvB,OAAM,qBAAqB;UAClB,KAAK,SAAS,OAAO,EAAE;AAChC,QAAM,qBAAqB;AAE3B,SAAO,MAAM;AAEb,QAAM,0BAA0B;GAC9B,OAAO;GACP,QAAQ;GACR,SAAS;GACV;AAED,SAAO;YACE,KAAK,SAAS,OAAO,CAC9B,OAAM,qBAAqB;AAI7B,KAAI,KAAK,SAAS,SAAS,IAAI,KAAK,SAAS,aAAa,CAExD,OAAM,sBAAsB,KAAK,SAAS,aAAa,GACnD,sBACA;AAIN,KAAI,UACF,OAAM,0BAA0B;EAC9B,GAAI,MAAM,2BAA2B,EAAE;EACvC,OAAO;EACP,QAAQ;EACT;CAKH,MAAM,aAAa,UAAU,OAAO,KAAK,OAAO,KAAK;CACrD,MAAM,aAAa,UAAU,OAAO,KAAK,OAAO,KAAK;CACrD,MAAM,cAAc,UAAU,OAAO,KAAK,OAAO,KAAK;AAGtD,KAAI,UAAU,OAAO,QAAQ;AAE3B,QAAM,qBAAqB,GAAG,WAAW,GAAG;AAG5C,MAAI,CAAC,MAAM,wBACT,OAAM,0BAA0B,EAAE;AAEpC,QAAM,wBAAwB,gBAAgB;AAE9C,QAAM,gCAAgC;GACpC,GAAI,MAAM,iCAAiC,EAAE;GAC7C,YAAY;GACb;AAED,QAAM,gCAAgC;GACpC,GAAI,MAAM,iCAAiC,EAAE;GAC7C,YAAY;GACb;AAED,QAAM,iCAAiC;GACrC,GAAI,MAAM,kCAAkC,EAAE;GAC9C,YAAY;GACb;;AAIH,KAAI,KAAK,SAAS,SAAS,EAAE;AAC3B,QAAM,cAAc,YAAY;AAIhC,MAAI,CAAC,MAAM,oBACT,OAAM,sBAAsB;AAI9B,MAAI,CAAC,MAAM,wBACT,OAAM,0BAA0B,EAAE;AAEpC,QAAM,wBAAwB,aAAa;;AAI7C,KAAI,KAAK,SAAS,SAAS,EAAE;EAC3B,MAAM,iBAAiB;GACrB;GACA;GACA;GACA;GACA;GACA;GACD,CAAC,KAAK,KAAK;AAGZ,QAAM,qBAAqB,MAAM,sBAAsB;AACvD,QAAM,qBACJ,MAAM,sBAAsB,GAAG,kBAAkB,GAAG;AAGtD,QAAM,0BAA0B;GAC9B,OAAO;GACP,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,GAAI,MAAM,2BAA2B,EAAE;GACxC;AAED,QAAM,gCAAgC;GACpC,iBAAiB;GACjB,cAAc;GACd,YAAY;GACZ,YAAY;GACZ,GAAI,MAAM,iCAAiC,EAAE;GAC9C;AAED,QAAM,gCAAgC;GACpC,YAAY;GACZ,YAAY;GACZ,GAAI,MAAM,iCAAiC,EAAE;GAC9C;AAED,QAAM,iCAAiC;GACrC,YAAY;GACZ,YAAY;GACZ,GAAI,MAAM,kCAAkC,EAAE;GAC/C;;AAGH,QAAO;;AAGT,eAAe,iBAAiB,CAAC,aAAa,WAAW"}

package/dist/styles/scrollbar.mjs

@@ -0,0 +1,105 @@
+import { makeEmptyDetails } from "../parser/types.mjs";
+import { parseStyle } from "../utils/styles.mjs";
+
+//#region src/styles/scrollbar.ts
+/**
+* Creates cross-browser compatible scrollbar styles
+*
+* Supports both Firefox (scrollbar-width, scrollbar-color) and
+* WebKit/Chromium browsers (::-webkit-scrollbar)
+*/
+function scrollbarStyle({ scrollbar, overflow }) {
+	if (!scrollbar && scrollbar !== 0) return;
+	const value = scrollbar === true || scrollbar === "" ? "thin" : scrollbar;
+	const { mods, colors, values } = parseStyle(String(value)).groups[0] ?? makeEmptyDetails();
+	const style = {};
+	const defaultThumbColor = "var(--scrollbar-thumb-color)";
+	const defaultTrackColor = "var(--scrollbar-track-color, transparent)";
+	style["scrollbar-color"] = `${defaultThumbColor} transparent`;
+	const sizeValue = values[0] || "8px";
+	if (mods.includes("thin")) style["scrollbar-width"] = "thin";
+	else if (mods.includes("none")) {
+		style["scrollbar-width"] = "none";
+		delete style["scrollbar-color"];
+		style["&::-webkit-scrollbar"] = {
+			width: "0px",
+			height: "0px",
+			display: "none"
+		};
+		return style;
+	} else if (mods.includes("auto")) style["scrollbar-width"] = "auto";
+	if (mods.includes("stable") || mods.includes("both-edges")) style["scrollbar-gutter"] = mods.includes("both-edges") ? "stable both-edges" : "stable";
+	if (sizeValue) style["&::-webkit-scrollbar"] = {
+		...style["&::-webkit-scrollbar"] || {},
+		width: sizeValue,
+		height: sizeValue
+	};
+	const thumbColor = colors && colors[0] ? colors[0] : defaultThumbColor;
+	const trackColor = colors && colors[1] ? colors[1] : defaultTrackColor;
+	const cornerColor = colors && colors[2] ? colors[2] : trackColor;
+	if (colors && colors.length) {
+		style["scrollbar-color"] = `${thumbColor} ${trackColor}`;
+		if (!style["&::-webkit-scrollbar"]) style["&::-webkit-scrollbar"] = {};
+		style["&::-webkit-scrollbar"]["background"] = trackColor;
+		style["&::-webkit-scrollbar-track"] = {
+			...style["&::-webkit-scrollbar-track"] || {},
+			background: trackColor
+		};
+		style["&::-webkit-scrollbar-thumb"] = {
+			...style["&::-webkit-scrollbar-thumb"] || {},
+			background: thumbColor
+		};
+		style["&::-webkit-scrollbar-corner"] = {
+			...style["&::-webkit-scrollbar-corner"] || {},
+			background: cornerColor
+		};
+	}
+	if (mods.includes("always")) {
+		style["overflow"] = overflow || "scroll";
+		if (!style["scrollbar-gutter"]) style["scrollbar-gutter"] = "stable";
+		if (!style["&::-webkit-scrollbar"]) style["&::-webkit-scrollbar"] = {};
+		style["&::-webkit-scrollbar"]["display"] = "block";
+	}
+	if (mods.includes("styled")) {
+		const baseTransition = [
+			"background var(--transition)",
+			"border-radius var(--transition)",
+			"box-shadow var(--transition)",
+			"width var(--transition)",
+			"height var(--transition)",
+			"border var(--transition)"
+		].join(", ");
+		style["scrollbar-width"] = style["scrollbar-width"] || "thin";
+		style["scrollbar-color"] = style["scrollbar-color"] || `${defaultThumbColor} ${defaultTrackColor}`;
+		style["&::-webkit-scrollbar"] = {
+			width: sizeValue,
+			height: sizeValue,
+			transition: baseTransition,
+			background: defaultTrackColor,
+			...style["&::-webkit-scrollbar"] || {}
+		};
+		style["&::-webkit-scrollbar-thumb"] = {
+			"border-radius": "8px",
+			"min-height": "24px",
+			transition: baseTransition,
+			background: defaultThumbColor,
+			...style["&::-webkit-scrollbar-thumb"] || {}
+		};
+		style["&::-webkit-scrollbar-track"] = {
+			background: defaultTrackColor,
+			transition: baseTransition,
+			...style["&::-webkit-scrollbar-track"] || {}
+		};
+		style["&::-webkit-scrollbar-corner"] = {
+			background: defaultTrackColor,
+			transition: baseTransition,
+			...style["&::-webkit-scrollbar-corner"] || {}
+		};
+	}
+	return style;
+}
+scrollbarStyle.__lookupStyles = ["scrollbar", "overflow"];
+
+//#endregion
+export { scrollbarStyle };
+//# sourceMappingURL=scrollbar.mjs.map

package/dist/styles/scrollbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollbar.mjs","names":[],"sources":["../../src/styles/scrollbar.ts"],"sourcesContent":["import { makeEmptyDetails } from '../parser/types';\nimport { parseStyle } from '../utils/styles';\n\ninterface ScrollbarStyleProps {\n  scrollbar?: string | boolean | number;\n  overflow?: string;\n}\n\n/**\n * Creates cross-browser compatible scrollbar styles\n *\n * Supports both Firefox (scrollbar-width, scrollbar-color) and\n * WebKit/Chromium browsers (::-webkit-scrollbar)\n */\nexport function scrollbarStyle({ scrollbar, overflow }: ScrollbarStyleProps) {\n  // Check if scrollbar is defined\n  if (!scrollbar && scrollbar !== 0) return;\n\n  // Support true as alias for thin\n  const value = scrollbar === true || scrollbar === '' ? 'thin' : scrollbar;\n  const processed = parseStyle(String(value));\n  const { mods, colors, values } =\n    processed.groups[0] ?? makeEmptyDetails();\n  const style = {};\n\n  // Default colors for scrollbar\n  const defaultThumbColor = 'var(--scrollbar-thumb-color)';\n  const defaultTrackColor = 'var(--scrollbar-track-color, transparent)';\n\n  // Setup default Firefox scrollbar style\n  style['scrollbar-color'] = `${defaultThumbColor} transparent`;\n\n  // Default scrollbar size\n  const defaultSize = '8px';\n  const sizeValue = values[0] || defaultSize;\n\n  // Process modifiers\n  if (mods.includes('thin')) {\n    style['scrollbar-width'] = 'thin';\n  } else if (mods.includes('none')) {\n    style['scrollbar-width'] = 'none';\n    // Remove scrollbar-color as it's not needed when scrollbar is hidden\n    delete style['scrollbar-color'];\n    // Also hide WebKit scrollbars\n    style['&::-webkit-scrollbar'] = {\n      width: '0px',\n      height: '0px',\n      display: 'none',\n    };\n\n    return style;\n  } else if (mods.includes('auto')) {\n    style['scrollbar-width'] = 'auto';\n  }\n\n  // Handle scrollbar gutter behavior\n  if (mods.includes('stable') || mods.includes('both-edges')) {\n    // scrollbar-gutter is supported in newer browsers only\n    style['scrollbar-gutter'] = mods.includes('both-edges')\n      ? 'stable both-edges'\n      : 'stable';\n  }\n\n  // Custom size setup for WebKit\n  if (sizeValue) {\n    style['&::-webkit-scrollbar'] = {\n      ...(style['&::-webkit-scrollbar'] || {}),\n      width: sizeValue,\n      height: sizeValue,\n    };\n  }\n\n  // Extract colors (support up to 3: thumb, track, corner)\n  // These will be used in various places throughout the function\n  const thumbColor = colors && colors[0] ? colors[0] : defaultThumbColor;\n  const trackColor = colors && colors[1] ? colors[1] : defaultTrackColor;\n  const cornerColor = colors && colors[2] ? colors[2] : trackColor;\n\n  // Apply colors if they are specified\n  if (colors && colors.length) {\n    // Firefox\n    style['scrollbar-color'] = `${thumbColor} ${trackColor}`;\n\n    // WebKit - always set these for consistency\n    if (!style['&::-webkit-scrollbar']) {\n      style['&::-webkit-scrollbar'] = {};\n    }\n    style['&::-webkit-scrollbar']['background'] = trackColor;\n\n    style['&::-webkit-scrollbar-track'] = {\n      ...(style['&::-webkit-scrollbar-track'] || {}),\n      background: trackColor,\n    };\n\n    style['&::-webkit-scrollbar-thumb'] = {\n      ...(style['&::-webkit-scrollbar-thumb'] || {}),\n      background: thumbColor,\n    };\n\n    style['&::-webkit-scrollbar-corner'] = {\n      ...(style['&::-webkit-scrollbar-corner'] || {}),\n      background: cornerColor,\n    };\n  }\n\n  // Handle 'always' mode: force scrollbars to show\n  if (mods.includes('always')) {\n    style['overflow'] = overflow || 'scroll';\n\n    // Use auto for WebKit browsers since they don't support 'always'\n    // This is closer to the expected behavior\n    if (!style['scrollbar-gutter']) {\n      style['scrollbar-gutter'] = 'stable';\n    }\n\n    // Ensure scrollbars appear in WebKit even with little content\n    if (!style['&::-webkit-scrollbar']) {\n      style['&::-webkit-scrollbar'] = {};\n    }\n    style['&::-webkit-scrollbar']['display'] = 'block';\n  }\n\n  // Enhanced 'styled' mode with better transitions and appearance\n  if (mods.includes('styled')) {\n    const baseTransition = [\n      'background var(--transition)',\n      'border-radius var(--transition)',\n      'box-shadow var(--transition)',\n      'width var(--transition)',\n      'height var(--transition)',\n      'border var(--transition)',\n    ].join(', ');\n\n    // Firefox\n    style['scrollbar-width'] = style['scrollbar-width'] || 'thin';\n    style['scrollbar-color'] =\n      style['scrollbar-color'] || `${defaultThumbColor} ${defaultTrackColor}`;\n\n    // WebKit\n    style['&::-webkit-scrollbar'] = {\n      width: sizeValue,\n      height: sizeValue,\n      transition: baseTransition,\n      background: defaultTrackColor,\n      ...(style['&::-webkit-scrollbar'] || {}),\n    };\n\n    style['&::-webkit-scrollbar-thumb'] = {\n      'border-radius': '8px',\n      'min-height': '24px',\n      transition: baseTransition,\n      background: defaultThumbColor,\n      ...(style['&::-webkit-scrollbar-thumb'] || {}),\n    };\n\n    style['&::-webkit-scrollbar-track'] = {\n      background: defaultTrackColor,\n      transition: baseTransition,\n      ...(style['&::-webkit-scrollbar-track'] || {}),\n    };\n\n    style['&::-webkit-scrollbar-corner'] = {\n      background: defaultTrackColor,\n      transition: baseTransition,\n      ...(style['&::-webkit-scrollbar-corner'] || {}),\n    };\n  }\n\n  return style;\n}\n\nscrollbarStyle.__lookupStyles = ['scrollbar', 'overflow'];\n"],"mappings":";;;;;;;;;;AAcA,SAAgB,eAAe,EAAE,WAAW,YAAiC;AAE3E,KAAI,CAAC,aAAa,cAAc,EAAG;CAGnC,MAAM,QAAQ,cAAc,QAAQ,cAAc,KAAK,SAAS;CAEhE,MAAM,EAAE,MAAM,QAAQ,WADJ,WAAW,OAAO,MAAM,CAAC,CAE/B,OAAO,MAAM,kBAAkB;CAC3C,MAAM,QAAQ,EAAE;CAGhB,MAAM,oBAAoB;CAC1B,MAAM,oBAAoB;AAG1B,OAAM,qBAAqB,GAAG,kBAAkB;CAIhD,MAAM,YAAY,OAAO,MADL;AAIpB,KAAI,KAAK,SAAS,OAAO,CACvB,OAAM,qBAAqB;UAClB,KAAK,SAAS,OAAO,EAAE;AAChC,QAAM,qBAAqB;AAE3B,SAAO,MAAM;AAEb,QAAM,0BAA0B;GAC9B,OAAO;GACP,QAAQ;GACR,SAAS;GACV;AAED,SAAO;YACE,KAAK,SAAS,OAAO,CAC9B,OAAM,qBAAqB;AAI7B,KAAI,KAAK,SAAS,SAAS,IAAI,KAAK,SAAS,aAAa,CAExD,OAAM,sBAAsB,KAAK,SAAS,aAAa,GACnD,sBACA;AAIN,KAAI,UACF,OAAM,0BAA0B;EAC9B,GAAI,MAAM,2BAA2B,EAAE;EACvC,OAAO;EACP,QAAQ;EACT;CAKH,MAAM,aAAa,UAAU,OAAO,KAAK,OAAO,KAAK;CACrD,MAAM,aAAa,UAAU,OAAO,KAAK,OAAO,KAAK;CACrD,MAAM,cAAc,UAAU,OAAO,KAAK,OAAO,KAAK;AAGtD,KAAI,UAAU,OAAO,QAAQ;AAE3B,QAAM,qBAAqB,GAAG,WAAW,GAAG;AAG5C,MAAI,CAAC,MAAM,wBACT,OAAM,0BAA0B,EAAE;AAEpC,QAAM,wBAAwB,gBAAgB;AAE9C,QAAM,gCAAgC;GACpC,GAAI,MAAM,iCAAiC,EAAE;GAC7C,YAAY;GACb;AAED,QAAM,gCAAgC;GACpC,GAAI,MAAM,iCAAiC,EAAE;GAC7C,YAAY;GACb;AAED,QAAM,iCAAiC;GACrC,GAAI,MAAM,kCAAkC,EAAE;GAC9C,YAAY;GACb;;AAIH,KAAI,KAAK,SAAS,SAAS,EAAE;AAC3B,QAAM,cAAc,YAAY;AAIhC,MAAI,CAAC,MAAM,oBACT,OAAM,sBAAsB;AAI9B,MAAI,CAAC,MAAM,wBACT,OAAM,0BAA0B,EAAE;AAEpC,QAAM,wBAAwB,aAAa;;AAI7C,KAAI,KAAK,SAAS,SAAS,EAAE;EAC3B,MAAM,iBAAiB;GACrB;GACA;GACA;GACA;GACA;GACA;GACD,CAAC,KAAK,KAAK;AAGZ,QAAM,qBAAqB,MAAM,sBAAsB;AACvD,QAAM,qBACJ,MAAM,sBAAsB,GAAG,kBAAkB,GAAG;AAGtD,QAAM,0BAA0B;GAC9B,OAAO;GACP,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,GAAI,MAAM,2BAA2B,EAAE;GACxC;AAED,QAAM,gCAAgC;GACpC,iBAAiB;GACjB,cAAc;GACd,YAAY;GACZ,YAAY;GACZ,GAAI,MAAM,iCAAiC,EAAE;GAC9C;AAED,QAAM,gCAAgC;GACpC,YAAY;GACZ,YAAY;GACZ,GAAI,MAAM,iCAAiC,EAAE;GAC9C;AAED,QAAM,iCAAiC;GACrC,YAAY;GACZ,YAAY;GACZ,GAAI,MAAM,kCAAkC,EAAE;GAC/C;;AAGH,QAAO;;AAGT,eAAe,iBAAiB,CAAC,aAAa,WAAW"}

package/dist/styles/shadow.d.ts

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

package/dist/styles/shadow.js

@@ -0,0 +1,24 @@
+import { makeEmptyDetails } from "../parser/types.js";
+import { parseStyle } from "../utils/styles.js";
+
+//#region src/styles/shadow.ts
+function toBoxShadow(shadow) {
+	const { values, mods, colors } = parseStyle(shadow).groups[0] ?? makeEmptyDetails();
+	const mod = mods[0] || "";
+	const shadowColor = (colors && colors[0]) ?? "";
+	return [
+		mod,
+		...values,
+		shadowColor
+	].join(" ");
+}
+function shadowStyle({ shadow }) {
+	if (!shadow) return;
+	if (shadow === true) shadow = "var(--shadow)";
+	return { "box-shadow": shadow.split(",").map(toBoxShadow).join(",") };
+}
+shadowStyle.__lookupStyles = ["shadow"];
+
+//#endregion
+export { shadowStyle };
+//# sourceMappingURL=shadow.js.map

package/dist/styles/shadow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadow.js","names":[],"sources":["../../src/styles/shadow.ts"],"sourcesContent":["import { makeEmptyDetails } from '../parser/types';\nimport { parseStyle } from '../utils/styles';\n\nfunction toBoxShadow(shadow) {\n  const processed = parseStyle(shadow);\n  const { values, mods, colors } =\n    processed.groups[0] ?? makeEmptyDetails();\n  const mod = mods[0] || '';\n  const shadowColor = (colors && colors[0]) ?? '';\n\n  return [mod, ...values, shadowColor].join(' ');\n}\n\nexport function shadowStyle({ shadow }) {\n  if (!shadow) return;\n\n  if (shadow === true) shadow = 'var(--shadow)';\n\n  return {\n    'box-shadow': shadow.split(',').map(toBoxShadow).join(','),\n  };\n}\n\nshadowStyle.__lookupStyles = ['shadow'];\n"],"mappings":";;;;AAGA,SAAS,YAAY,QAAQ;CAE3B,MAAM,EAAE,QAAQ,MAAM,WADJ,WAAW,OAAO,CAExB,OAAO,MAAM,kBAAkB;CAC3C,MAAM,MAAM,KAAK,MAAM;CACvB,MAAM,eAAe,UAAU,OAAO,OAAO;AAE7C,QAAO;EAAC;EAAK,GAAG;EAAQ;EAAY,CAAC,KAAK,IAAI;;AAGhD,SAAgB,YAAY,EAAE,UAAU;AACtC,KAAI,CAAC,OAAQ;AAEb,KAAI,WAAW,KAAM,UAAS;AAE9B,QAAO,EACL,cAAc,OAAO,MAAM,IAAI,CAAC,IAAI,YAAY,CAAC,KAAK,IAAI,EAC3D;;AAGH,YAAY,iBAAiB,CAAC,SAAS"}

package/dist/styles/shadow.mjs

@@ -0,0 +1,24 @@
+import { makeEmptyDetails } from "../parser/types.mjs";
+import { parseStyle } from "../utils/styles.mjs";
+
+//#region src/styles/shadow.ts
+function toBoxShadow(shadow) {
+	const { values, mods, colors } = parseStyle(shadow).groups[0] ?? makeEmptyDetails();
+	const mod = mods[0] || "";
+	const shadowColor = (colors && colors[0]) ?? "";
+	return [
+		mod,
+		...values,
+		shadowColor
+	].join(" ");
+}
+function shadowStyle({ shadow }) {
+	if (!shadow) return;
+	if (shadow === true) shadow = "var(--shadow)";
+	return { "box-shadow": shadow.split(",").map(toBoxShadow).join(",") };
+}
+shadowStyle.__lookupStyles = ["shadow"];
+
+//#endregion
+export { shadowStyle };
+//# sourceMappingURL=shadow.mjs.map

package/dist/styles/shadow.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadow.mjs","names":[],"sources":["../../src/styles/shadow.ts"],"sourcesContent":["import { makeEmptyDetails } from '../parser/types';\nimport { parseStyle } from '../utils/styles';\n\nfunction toBoxShadow(shadow) {\n  const processed = parseStyle(shadow);\n  const { values, mods, colors } =\n    processed.groups[0] ?? makeEmptyDetails();\n  const mod = mods[0] || '';\n  const shadowColor = (colors && colors[0]) ?? '';\n\n  return [mod, ...values, shadowColor].join(' ');\n}\n\nexport function shadowStyle({ shadow }) {\n  if (!shadow) return;\n\n  if (shadow === true) shadow = 'var(--shadow)';\n\n  return {\n    'box-shadow': shadow.split(',').map(toBoxShadow).join(','),\n  };\n}\n\nshadowStyle.__lookupStyles = ['shadow'];\n"],"mappings":";;;;AAGA,SAAS,YAAY,QAAQ;CAE3B,MAAM,EAAE,QAAQ,MAAM,WADJ,WAAW,OAAO,CAExB,OAAO,MAAM,kBAAkB;CAC3C,MAAM,MAAM,KAAK,MAAM;CACvB,MAAM,eAAe,UAAU,OAAO,OAAO;AAE7C,QAAO;EAAC;EAAK,GAAG;EAAQ;EAAY,CAAC,KAAK,IAAI;;AAGhD,SAAgB,YAAY,EAAE,UAAU;AACtC,KAAI,CAAC,OAAQ;AAEb,KAAI,WAAW,KAAM,UAAS;AAE9B,QAAO,EACL,cAAc,OAAO,MAAM,IAAI,CAAC,IAAI,YAAY,CAAC,KAAK,IAAI,EAC3D;;AAGH,YAAY,iBAAiB,CAAC,SAAS"}

package/dist/styles/styledScrollbar.d.ts

@@ -0,0 +1,47 @@
+//#region src/styles/styledScrollbar.d.ts
+/**
+ * @deprecated `styledScrollbar` is deprecated. Use `scrollbar` instead.
+ */
+declare function styledScrollbarStyle({
+  styledScrollbar: val
+}: {
+  styledScrollbar: any;
+}): ({
+  $: string;
+  display: string;
+  'scrollbar-width'?: undefined;
+} | {
+  'scrollbar-width': string;
+  $?: undefined;
+  display?: undefined;
+})[] | ({
+  $: string;
+  width: string;
+  height: string;
+  'background-color'?: undefined;
+  'border-radius'?: undefined;
+  border?: undefined;
+  'background-clip'?: undefined;
+} | {
+  $: string;
+  'background-color': string;
+  width?: undefined;
+  height?: undefined;
+  'border-radius'?: undefined;
+  border?: undefined;
+  'background-clip'?: undefined;
+} | {
+  $: string;
+  'background-color': string;
+  'border-radius': string;
+  border: string;
+  'background-clip': string;
+  width?: undefined;
+  height?: undefined;
+})[] | null;
+declare namespace styledScrollbarStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+export { styledScrollbarStyle };
+//# sourceMappingURL=styledScrollbar.d.ts.map

package/dist/styles/styledScrollbar.js

@@ -0,0 +1,38 @@
+//#region src/styles/styledScrollbar.ts
+/**
+* @deprecated `styledScrollbar` is deprecated. Use `scrollbar` instead.
+*/
+function styledScrollbarStyle({ styledScrollbar: val }) {
+	if (val == null) return null;
+	if (!val) return [{
+		$: "::-webkit-scrollbar",
+		display: "none"
+	}, { "scrollbar-width": "none" }];
+	return [
+		{
+			$: "::-webkit-scrollbar",
+			width: "var(--scrollbar-width)",
+			height: "var(--scrollbar-width)"
+		},
+		{
+			$: "::-webkit-scrollbar-track",
+			"background-color": "var(--scrollbar-bg-color)"
+		},
+		{
+			$: "::-webkit-scrollbar-thumb",
+			"background-color": "var(--scrollbar-thumb-color)",
+			"border-radius": "var(--scrollbar-radius)",
+			border: "var(--scrollbar-outline-width) solid var(--scrollbar-outline-color)",
+			"background-clip": "padding-box"
+		},
+		{
+			$: "::-webkit-scrollbar-corner",
+			"background-color": "var(--scrollbar-corner-color)"
+		}
+	];
+}
+styledScrollbarStyle.__lookupStyles = ["styledScrollbar"];
+
+//#endregion
+export { styledScrollbarStyle };
+//# sourceMappingURL=styledScrollbar.js.map

package/dist/styles/styledScrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styledScrollbar.js","names":[],"sources":["../../src/styles/styledScrollbar.ts"],"sourcesContent":["/**\n * @deprecated `styledScrollbar` is deprecated. Use `scrollbar` instead.\n */\nexport function styledScrollbarStyle({ styledScrollbar: val }) {\n  if (val == null) return null;\n\n  if (!val) {\n    return [\n      {\n        $: '::-webkit-scrollbar',\n        display: 'none',\n      },\n      {\n        'scrollbar-width': 'none',\n      },\n    ];\n  }\n\n  return [\n    {\n      $: '::-webkit-scrollbar',\n      width: 'var(--scrollbar-width)',\n      height: 'var(--scrollbar-width)',\n    },\n    {\n      $: '::-webkit-scrollbar-track',\n      'background-color': 'var(--scrollbar-bg-color)',\n    },\n    {\n      $: '::-webkit-scrollbar-thumb',\n      'background-color': 'var(--scrollbar-thumb-color)',\n      'border-radius': 'var(--scrollbar-radius)',\n      border:\n        'var(--scrollbar-outline-width) solid var(--scrollbar-outline-color)',\n      'background-clip': 'padding-box',\n    },\n    {\n      $: '::-webkit-scrollbar-corner',\n      'background-color': 'var(--scrollbar-corner-color)',\n    },\n    // Breaks the scrollbar in the latest Chromium browsers\n    // {\n    //   'scrollbar-width': 'thin',\n    //   'scrollbar-color':\n    //     'var(--scrollbar-bg-color) var(--scrollbar-thumb-color)',\n    // },\n  ];\n}\n\nstyledScrollbarStyle.__lookupStyles = ['styledScrollbar'];\n"],"mappings":";;;;AAGA,SAAgB,qBAAqB,EAAE,iBAAiB,OAAO;AAC7D,KAAI,OAAO,KAAM,QAAO;AAExB,KAAI,CAAC,IACH,QAAO,CACL;EACE,GAAG;EACH,SAAS;EACV,EACD,EACE,mBAAmB,QACpB,CACF;AAGH,QAAO;EACL;GACE,GAAG;GACH,OAAO;GACP,QAAQ;GACT;EACD;GACE,GAAG;GACH,oBAAoB;GACrB;EACD;GACE,GAAG;GACH,oBAAoB;GACpB,iBAAiB;GACjB,QACE;GACF,mBAAmB;GACpB;EACD;GACE,GAAG;GACH,oBAAoB;GACrB;EAOF;;AAGH,qBAAqB,iBAAiB,CAAC,kBAAkB"}

package/dist/styles/styledScrollbar.mjs

@@ -0,0 +1,38 @@
+//#region src/styles/styledScrollbar.ts
+/**
+* @deprecated `styledScrollbar` is deprecated. Use `scrollbar` instead.
+*/
+function styledScrollbarStyle({ styledScrollbar: val }) {
+	if (val == null) return null;
+	if (!val) return [{
+		$: "::-webkit-scrollbar",
+		display: "none"
+	}, { "scrollbar-width": "none" }];
+	return [
+		{
+			$: "::-webkit-scrollbar",
+			width: "var(--scrollbar-width)",
+			height: "var(--scrollbar-width)"
+		},
+		{
+			$: "::-webkit-scrollbar-track",
+			"background-color": "var(--scrollbar-bg-color)"
+		},
+		{
+			$: "::-webkit-scrollbar-thumb",
+			"background-color": "var(--scrollbar-thumb-color)",
+			"border-radius": "var(--scrollbar-radius)",
+			border: "var(--scrollbar-outline-width) solid var(--scrollbar-outline-color)",
+			"background-clip": "padding-box"
+		},
+		{
+			$: "::-webkit-scrollbar-corner",
+			"background-color": "var(--scrollbar-corner-color)"
+		}
+	];
+}
+styledScrollbarStyle.__lookupStyles = ["styledScrollbar"];
+
+//#endregion
+export { styledScrollbarStyle };
+//# sourceMappingURL=styledScrollbar.mjs.map

package/dist/styles/styledScrollbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styledScrollbar.mjs","names":[],"sources":["../../src/styles/styledScrollbar.ts"],"sourcesContent":["/**\n * @deprecated `styledScrollbar` is deprecated. Use `scrollbar` instead.\n */\nexport function styledScrollbarStyle({ styledScrollbar: val }) {\n  if (val == null) return null;\n\n  if (!val) {\n    return [\n      {\n        $: '::-webkit-scrollbar',\n        display: 'none',\n      },\n      {\n        'scrollbar-width': 'none',\n      },\n    ];\n  }\n\n  return [\n    {\n      $: '::-webkit-scrollbar',\n      width: 'var(--scrollbar-width)',\n      height: 'var(--scrollbar-width)',\n    },\n    {\n      $: '::-webkit-scrollbar-track',\n      'background-color': 'var(--scrollbar-bg-color)',\n    },\n    {\n      $: '::-webkit-scrollbar-thumb',\n      'background-color': 'var(--scrollbar-thumb-color)',\n      'border-radius': 'var(--scrollbar-radius)',\n      border:\n        'var(--scrollbar-outline-width) solid var(--scrollbar-outline-color)',\n      'background-clip': 'padding-box',\n    },\n    {\n      $: '::-webkit-scrollbar-corner',\n      'background-color': 'var(--scrollbar-corner-color)',\n    },\n    // Breaks the scrollbar in the latest Chromium browsers\n    // {\n    //   'scrollbar-width': 'thin',\n    //   'scrollbar-color':\n    //     'var(--scrollbar-bg-color) var(--scrollbar-thumb-color)',\n    // },\n  ];\n}\n\nstyledScrollbarStyle.__lookupStyles = ['styledScrollbar'];\n"],"mappings":";;;;AAGA,SAAgB,qBAAqB,EAAE,iBAAiB,OAAO;AAC7D,KAAI,OAAO,KAAM,QAAO;AAExB,KAAI,CAAC,IACH,QAAO,CACL;EACE,GAAG;EACH,SAAS;EACV,EACD,EACE,mBAAmB,QACpB,CACF;AAGH,QAAO;EACL;GACE,GAAG;GACH,OAAO;GACP,QAAQ;GACT;EACD;GACE,GAAG;GACH,oBAAoB;GACrB;EACD;GACE,GAAG;GACH,oBAAoB;GACpB,iBAAiB;GACjB,QACE;GACF,mBAAmB;GACpB;EACD;GACE,GAAG;GACH,oBAAoB;GACrB;EAOF;;AAGH,qBAAqB,iBAAiB,CAAC,kBAAkB"}

package/dist/styles/transition.d.ts

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