@kbach/react 0.4.2 → 0.5.0

package/dist/index.js

@@ -747,10 +747,19 @@ var MODIFIERS = /* @__PURE__ */ new Set([
   "md",
   "lg",
   "xl",
-  "2xl"
+  "2xl",
+  // Pseudo-elements (CSS-injection only; matchesMods returns false for these)
+  "before",
+  "after",
+  "selection",
+  "first-letter",
+  "first-line",
+  "marker",
+  // Print media modifier
+  "print"
 ]);
 var UTILITY_PREFIXES = [
-  // Multi-word order matters
+  // Multi-word flex
   "flex-row-reverse",
   "flex-col-reverse",
   "flex-row",
@@ -828,7 +837,6 @@ var UTILITY_PREFIXES = [
   "rounded-r",
   "rounded-b",
   "rounded-l",
-  "text-decoration-none",
   "list-none",
   "list-disc",
   "list-decimal",
@@ -858,6 +866,7 @@ var UTILITY_PREFIXES = [
   "bg-clip-padding",
   "bg-clip-content",
   "bg-clip-text",
+  "bg-gradient-to",
   "resize-none",
   "resize-y",
   "resize-x",
@@ -877,15 +886,8 @@ var UTILITY_PREFIXES = [
   "scale-y",
   "skew-x",
   "skew-y",
-  "origin-center",
-  "origin-top",
-  "origin-top-right",
-  "origin-right",
-  "origin-bottom-right",
-  "origin-bottom",
-  "origin-bottom-left",
-  "origin-left",
-  "origin-top-left",
+  // Transform origin (single prefix, value carries direction)
+  "origin",
   "min-w",
   "min-h",
   "max-w",
@@ -894,7 +896,7 @@ var UTILITY_PREFIXES = [
   "bg-opacity",
   "text-opacity",
   "border-opacity",
-  // Grid placement (longer prefixes before shorter ones)
+  // Grid placement
   "col-span",
   "col-start",
   "col-end",
@@ -906,6 +908,35 @@ var UTILITY_PREFIXES = [
   "grid-flow",
   "auto-cols",
   "auto-rows",
+  // Grid alignment
+  "place-items",
+  "place-content",
+  "place-self",
+  "justify-items",
+  "justify-self",
+  // Backdrop filters (longer than 'backdrop' alone)
+  "backdrop-blur",
+  "backdrop-brightness",
+  "backdrop-contrast",
+  "backdrop-grayscale",
+  "backdrop-hue-rotate",
+  "backdrop-invert",
+  "backdrop-opacity",
+  "backdrop-saturate",
+  "backdrop-sepia",
+  "backdrop-filter",
+  // Filters
+  "drop-shadow",
+  "hue-rotate",
+  "text-shadow",
+  "underline-offset",
+  "outline-offset",
+  "will-change",
+  "mix-blend",
+  "decoration",
+  "perspective",
+  "tint",
+  "animate",
   // Single-word prefixes last
   "appearance-none",
   "outline-none",
@@ -946,9 +977,11 @@ var UTILITY_PREFIXES = [
   "border",
   "rounded",
   "shadow",
+  "size",
   "opacity",
   "leading",
   "tracking",
+  "line-clamp",
   "basis",
   "grow",
   "shrink",
@@ -959,13 +992,23 @@ var UTILITY_PREFIXES = [
   "rotate",
   "aspect",
   "columns",
-  "placeholder",
   "ring",
   "gap",
   "inset",
+  "filter",
+  "transform",
+  "blur",
+  "brightness",
+  "contrast",
+  "grayscale",
+  "invert",
+  "saturate",
+  "sepia",
   "bg",
   "text",
   "font",
+  "caret",
+  "accent",
   "from",
   "via",
   "to",
@@ -994,12 +1037,11 @@ var UTILITY_PREFIXES = [
   "left",
   "z",
   "col",
-  "row",
-  "flex"
-  // also a standalone
+  "row"
 ];
 var SORTED_PREFIXES = [...new Set(UTILITY_PREFIXES)].sort((a, b) => b.length - a.length);
 var STANDALONE_UTILITIES = /* @__PURE__ */ new Set([
+  // Display
   "flex",
   "block",
   "inline-block",
@@ -1011,13 +1053,16 @@ var STANDALONE_UTILITIES = /* @__PURE__ */ new Set([
   "hidden",
   "contents",
   "flow-root",
+  // Position
   "relative",
   "absolute",
   "fixed",
   "sticky",
   "static",
+  // Visibility
   "visible",
   "invisible",
+  // Typography
   "uppercase",
   "lowercase",
   "capitalize",
@@ -1032,6 +1077,17 @@ var STANDALONE_UTILITIES = /* @__PURE__ */ new Set([
   "antialiased",
   "sr-only",
   "not-sr-only",
+  // Font variant numeric
+  "normal-nums",
+  "ordinal",
+  "slashed-zero",
+  "lining-nums",
+  "oldstyle-nums",
+  "proportional-nums",
+  "tabular-nums",
+  "diagonal-fractions",
+  "stacked-fractions",
+  // Flexbox
   "flex-row",
   "flex-col",
   "flex-row-reverse",
@@ -1060,15 +1116,19 @@ var STANDALONE_UTILITIES = /* @__PURE__ */ new Set([
   "content-between",
   "content-around",
   "content-evenly",
+  "content-stretch",
   "self-start",
   "self-end",
   "self-center",
   "self-auto",
   "self-stretch",
+  "self-baseline",
+  // Text align
   "text-left",
   "text-right",
   "text-center",
   "text-justify",
+  // Font weight shortcuts
   "font-thin",
   "font-extralight",
   "font-light",
@@ -1078,6 +1138,7 @@ var STANDALONE_UTILITIES = /* @__PURE__ */ new Set([
   "font-bold",
   "font-extrabold",
   "font-black",
+  // Overflow
   "overflow-hidden",
   "overflow-visible",
   "overflow-scroll",
@@ -1088,11 +1149,23 @@ var STANDALONE_UTILITIES = /* @__PURE__ */ new Set([
   "overflow-y-hidden",
   "overflow-y-scroll",
   "overflow-y-auto",
+  // Object fit
   "object-contain",
   "object-cover",
   "object-fill",
   "object-none",
   "object-scale-down",
+  // Object position
+  "object-center",
+  "object-top",
+  "object-bottom",
+  "object-left",
+  "object-right",
+  "object-left-top",
+  "object-left-bottom",
+  "object-right-top",
+  "object-right-bottom",
+  // Border
   "border-solid",
   "border-dashed",
   "border-dotted",
@@ -1101,9 +1174,15 @@ var STANDALONE_UTILITIES = /* @__PURE__ */ new Set([
   "border-r",
   "border-b",
   "border-l",
+  "border-collapse",
+  "border-separate",
+  // Lists
   "list-none",
   "list-disc",
   "list-decimal",
+  "list-inside",
+  "list-outside",
+  // Cursor / select
   "cursor-auto",
   "cursor-default",
   "cursor-pointer",
@@ -1117,6 +1196,7 @@ var STANDALONE_UTILITIES = /* @__PURE__ */ new Set([
   "select-auto",
   "pointer-events-none",
   "pointer-events-auto",
+  // Whitespace / word break
   "whitespace-normal",
   "whitespace-nowrap",
   "whitespace-pre",
@@ -1125,19 +1205,129 @@ var STANDALONE_UTILITIES = /* @__PURE__ */ new Set([
   "break-normal",
   "break-words",
   "break-all",
+  // Background clip
   "bg-clip-border",
   "bg-clip-padding",
   "bg-clip-content",
   "bg-clip-text",
+  // Background size
+  "bg-auto",
+  "bg-cover",
+  "bg-contain",
+  // Background position
+  "bg-center",
+  "bg-top",
+  "bg-bottom",
+  "bg-left",
+  "bg-right",
+  "bg-left-top",
+  "bg-left-bottom",
+  "bg-right-top",
+  "bg-right-bottom",
+  // Background repeat
+  "bg-repeat",
+  "bg-no-repeat",
+  "bg-repeat-x",
+  "bg-repeat-y",
+  "bg-repeat-round",
+  "bg-repeat-space",
+  // Background attachment
+  "bg-fixed",
+  "bg-local",
+  "bg-scroll",
+  // Background image
+  "bg-none",
+  // Box sizing
   "box-border",
   "box-content",
+  // Resize
   "resize",
   "resize-none",
   "resize-y",
   "resize-x",
+  // Outline
   "appearance-none",
   "outline-none",
-  "outline"
+  "outline",
+  // Table
+  "table",
+  "table-auto",
+  "table-fixed",
+  "caption-top",
+  "caption-bottom",
+  // CSS filters (standalone = default/full effect)
+  "grayscale",
+  "invert",
+  "sepia",
+  // Isolation
+  "isolate",
+  "isolation-auto",
+  // Backface visibility (both platforms)
+  "backface-visible",
+  "backface-hidden",
+  // Divide none
+  "divide-none",
+  // Group / peer markers (no-op style; needed so isKnownUtility recognises them)
+  "group",
+  "peer",
+  // Text-wrap (web-only)
+  "text-wrap",
+  "text-nowrap",
+  "text-balance",
+  "text-pretty",
+  // Screen sizing
+  "w-screen",
+  "min-h-screen",
+  "max-h-screen",
+  "min-w-screen",
+  "max-w-screen",
+  // Extended cursors (web-only)
+  "cursor-grab",
+  "cursor-grabbing",
+  "cursor-zoom-in",
+  "cursor-zoom-out",
+  "cursor-crosshair",
+  "cursor-help",
+  "cursor-none",
+  // Overflow clip (web-only)
+  "overflow-clip",
+  "overflow-x-clip",
+  "overflow-y-clip",
+  // Scroll behavior (web-only)
+  "scroll-smooth",
+  "scroll-auto",
+  // Float & clear (web-only)
+  "float-left",
+  "float-right",
+  "float-start",
+  "float-end",
+  "float-none",
+  "clear-left",
+  "clear-right",
+  "clear-both",
+  "clear-start",
+  "clear-end",
+  "clear-none",
+  // Vertical align (web-only)
+  "align-baseline",
+  "align-top",
+  "align-middle",
+  "align-bottom",
+  "align-text-top",
+  "align-text-bottom",
+  "align-sub",
+  "align-super",
+  // Touch action (web-only)
+  "touch-auto",
+  "touch-none",
+  "touch-pan-x",
+  "touch-pan-y",
+  "touch-pan-left",
+  "touch-pan-right",
+  "touch-pan-up",
+  "touch-pan-down",
+  "touch-pinch-zoom",
+  "touch-manipulation"
 ]);
 function parseClass(className) {
   const trimmed = className.trim();
@@ -1155,6 +1345,11 @@ function parseClass(className) {
       break;
     }
   }
+  let important = false;
+  if (remaining.startsWith("!") && remaining.length > 1) {
+    important = true;
+    remaining = remaining.slice(1);
+  }
   let negative = false;
   if (remaining.startsWith("-") && remaining.length > 1 && remaining[1] !== "-") {
     negative = true;
@@ -1164,18 +1359,18 @@ function parseClass(className) {
   if (bracketStart > 0 && remaining.endsWith("]")) {
     const utility = remaining.slice(0, bracketStart);
     const value = remaining.slice(bracketStart + 2, -1);
-    return { original: trimmed, modifiers, negative, utility, value, isArbitrary: true };
+    return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
   }
   if (STANDALONE_UTILITIES.has(remaining)) {
-    return { original: trimmed, modifiers, negative, utility: remaining, value: "", isArbitrary: false };
+    return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
   }
   for (const prefix of SORTED_PREFIXES) {
     if (remaining === prefix) {
-      return { original: trimmed, modifiers, negative, utility: prefix, value: "", isArbitrary: false };
+      return { original: trimmed, modifiers, negative, important, utility: prefix, value: "", isArbitrary: false };
     }
     if (remaining.startsWith(prefix + "-")) {
       const value = remaining.slice(prefix.length + 1);
-      return { original: trimmed, modifiers, negative, utility: prefix, value, isArbitrary: false };
+      return { original: trimmed, modifiers, negative, important, utility: prefix, value, isArbitrary: false };
     }
   }
   const firstDash = remaining.indexOf("-");
@@ -1184,12 +1379,13 @@ function parseClass(className) {
       original: trimmed,
       modifiers,
       negative,
+      important,
       utility: remaining.slice(0, firstDash),
       value: remaining.slice(firstDash + 1),
       isArbitrary: false
     };
   }
-  return { original: trimmed, modifiers, negative, utility: remaining, value: "", isArbitrary: false };
+  return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
 }
 function parseClasses(classString) {
   const results = [];
@@ -1311,6 +1507,8 @@ function resolveFontSize(value, fontSizes, isArbitrary) {
   if (isArbitrary) return isWeb ? value : toNativeValue(value);
   return fontSizes[value] ?? null;
 }
+var FILTER_COMPOSE = "var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)";
+var BACKDROP_FILTER_COMPOSE = "var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)";
 var STANDALONE = {
   // Display
   // React Native only supports display:'flex'|'none'. Setting 'flex' explicitly is
@@ -1361,12 +1559,14 @@ var STANDALONE = {
   "content-between": { alignContent: "space-between" },
   "content-around": { alignContent: "space-around" },
   "content-evenly": { alignContent: "space-evenly" },
+  "content-stretch": { alignContent: "stretch" },
   // Align self (both)
   "self-auto": { alignSelf: "auto" },
   "self-start": { alignSelf: "flex-start" },
   "self-end": { alignSelf: "flex-end" },
   "self-center": { alignSelf: "center" },
   "self-stretch": { alignSelf: "stretch" },
+  "self-baseline": { alignSelf: "baseline" },
   // Text align (both)
   "text-left": { textAlign: "left" },
   "text-right": { textAlign: "right" },
@@ -1499,7 +1699,139 @@ var STANDALONE = {
   "bg-clip-border": isWeb ? { backgroundClip: "border-box" } : null,
   "bg-clip-padding": isWeb ? { backgroundClip: "padding-box" } : null,
   "bg-clip-content": isWeb ? { backgroundClip: "content-box" } : null,
-  "bg-clip-text": isWeb ? { backgroundClip: "text", WebkitBackgroundClip: "text" } : null
+  "bg-clip-text": isWeb ? { backgroundClip: "text", WebkitBackgroundClip: "text" } : null,
+  // Background image
+  "bg-none": isWeb ? { backgroundImage: "none" } : null,
+  // Background size (web-only)
+  "bg-auto": isWeb ? { backgroundSize: "auto" } : null,
+  "bg-cover": isWeb ? { backgroundSize: "cover" } : null,
+  "bg-contain": isWeb ? { backgroundSize: "contain" } : null,
+  // Background position (web-only)
+  "bg-center": isWeb ? { backgroundPosition: "center" } : null,
+  "bg-top": isWeb ? { backgroundPosition: "top" } : null,
+  "bg-bottom": isWeb ? { backgroundPosition: "bottom" } : null,
+  "bg-left": isWeb ? { backgroundPosition: "left" } : null,
+  "bg-right": isWeb ? { backgroundPosition: "right" } : null,
+  "bg-left-top": isWeb ? { backgroundPosition: "left top" } : null,
+  "bg-left-bottom": isWeb ? { backgroundPosition: "left bottom" } : null,
+  "bg-right-top": isWeb ? { backgroundPosition: "right top" } : null,
+  "bg-right-bottom": isWeb ? { backgroundPosition: "right bottom" } : null,
+  // Background repeat (web-only)
+  "bg-repeat": isWeb ? { backgroundRepeat: "repeat" } : null,
+  "bg-no-repeat": isWeb ? { backgroundRepeat: "no-repeat" } : null,
+  "bg-repeat-x": isWeb ? { backgroundRepeat: "repeat-x" } : null,
+  "bg-repeat-y": isWeb ? { backgroundRepeat: "repeat-y" } : null,
+  "bg-repeat-round": isWeb ? { backgroundRepeat: "round" } : null,
+  "bg-repeat-space": isWeb ? { backgroundRepeat: "space" } : null,
+  // Background attachment (web-only)
+  "bg-fixed": isWeb ? { backgroundAttachment: "fixed" } : null,
+  "bg-local": isWeb ? { backgroundAttachment: "local" } : null,
+  "bg-scroll": isWeb ? { backgroundAttachment: "scroll" } : null,
+  // Object position (web-only)
+  "object-center": isWeb ? { objectPosition: "center" } : null,
+  "object-top": isWeb ? { objectPosition: "top" } : null,
+  "object-bottom": isWeb ? { objectPosition: "bottom" } : null,
+  "object-left": isWeb ? { objectPosition: "left" } : null,
+  "object-right": isWeb ? { objectPosition: "right" } : null,
+  "object-left-top": isWeb ? { objectPosition: "left top" } : null,
+  "object-left-bottom": isWeb ? { objectPosition: "left bottom" } : null,
+  "object-right-top": isWeb ? { objectPosition: "right top" } : null,
+  "object-right-bottom": isWeb ? { objectPosition: "right bottom" } : null,
+  // Table (web-only)
+  table: isWeb ? { display: "table" } : null,
+  "table-auto": isWeb ? { tableLayout: "auto" } : null,
+  "table-fixed": isWeb ? { tableLayout: "fixed" } : null,
+  "caption-top": isWeb ? { captionSide: "top" } : null,
+  "caption-bottom": isWeb ? { captionSide: "bottom" } : null,
+  "border-collapse": isWeb ? { borderCollapse: "collapse" } : null,
+  "border-separate": isWeb ? { borderCollapse: "separate" } : null,
+  // List style position (web-only)
+  "list-inside": isWeb ? { listStylePosition: "inside" } : null,
+  "list-outside": isWeb ? { listStylePosition: "outside" } : null,
+  // Font variant numeric (web-only)
+  "normal-nums": isWeb ? { fontVariantNumeric: "normal" } : null,
+  ordinal: isWeb ? { fontVariantNumeric: "ordinal" } : null,
+  "slashed-zero": isWeb ? { fontVariantNumeric: "slashed-zero" } : null,
+  "lining-nums": isWeb ? { fontVariantNumeric: "lining-nums" } : null,
+  "oldstyle-nums": isWeb ? { fontVariantNumeric: "oldstyle-nums" } : null,
+  "proportional-nums": isWeb ? { fontVariantNumeric: "proportional-nums" } : null,
+  "tabular-nums": isWeb ? { fontVariantNumeric: "tabular-nums" } : null,
+  "diagonal-fractions": isWeb ? { fontVariantNumeric: "diagonal-fractions" } : null,
+  "stacked-fractions": isWeb ? { fontVariantNumeric: "stacked-fractions" } : null,
+  // Isolation (web-only)
+  isolate: isWeb ? { isolation: "isolate" } : null,
+  "isolation-auto": isWeb ? { isolation: "auto" } : null,
+  // Backface visibility (both iOS and Android)
+  "backface-visible": { backfaceVisibility: "visible" },
+  "backface-hidden": { backfaceVisibility: "hidden" },
+  // CSS filters — standalone = default/full effect (web-only)
+  grayscale: isWeb ? { "--tw-grayscale": "grayscale(100%)", filter: FILTER_COMPOSE } : null,
+  invert: isWeb ? { "--tw-invert": "invert(100%)", filter: FILTER_COMPOSE } : null,
+  sepia: isWeb ? { "--tw-sepia": "sepia(100%)", filter: FILTER_COMPOSE } : null,
+  // Divide none
+  "divide-none": isWeb ? { __divideX: 0, __divideY: 0 } : null,
+  // Group / peer markers (no-op: no style emitted; just ensures isKnownUtility returns true)
+  group: isWeb ? {} : null,
+  peer: isWeb ? {} : null,
+  // Text-wrap (web-only)
+  "text-wrap": isWeb ? { textWrap: "wrap" } : null,
+  "text-nowrap": isWeb ? { textWrap: "nowrap" } : null,
+  "text-balance": isWeb ? { textWrap: "balance" } : null,
+  "text-pretty": isWeb ? { textWrap: "pretty" } : null,
+  // Screen sizing (vw values are web-only; vh values work cross-platform via spacing scale for h-*)
+  "w-screen": isWeb ? { width: "100vw" } : null,
+  "min-h-screen": { minHeight: "100vh" },
+  "max-h-screen": { maxHeight: "100vh" },
+  "min-w-screen": isWeb ? { minWidth: "100vw" } : null,
+  "max-w-screen": isWeb ? { maxWidth: "100vw" } : null,
+  // Extended cursors (web-only)
+  "cursor-grab": isWeb ? { cursor: "grab" } : null,
+  "cursor-grabbing": isWeb ? { cursor: "grabbing" } : null,
+  "cursor-zoom-in": isWeb ? { cursor: "zoom-in" } : null,
+  "cursor-zoom-out": isWeb ? { cursor: "zoom-out" } : null,
+  "cursor-crosshair": isWeb ? { cursor: "crosshair" } : null,
+  "cursor-help": isWeb ? { cursor: "help" } : null,
+  "cursor-none": isWeb ? { cursor: "none" } : null,
+  // Overflow clip (web-only)
+  "overflow-clip": isWeb ? { overflow: "clip" } : null,
+  "overflow-x-clip": isWeb ? { overflowX: "clip" } : null,
+  "overflow-y-clip": isWeb ? { overflowY: "clip" } : null,
+  // Scroll behavior (web-only)
+  "scroll-smooth": isWeb ? { scrollBehavior: "smooth" } : null,
+  "scroll-auto": isWeb ? { scrollBehavior: "auto" } : null,
+  // Float (web-only)
+  "float-left": isWeb ? { float: "left" } : null,
+  "float-right": isWeb ? { float: "right" } : null,
+  "float-start": isWeb ? { float: "inline-start" } : null,
+  "float-end": isWeb ? { float: "inline-end" } : null,
+  "float-none": isWeb ? { float: "none" } : null,
+  // Clear (web-only)
+  "clear-left": isWeb ? { clear: "left" } : null,
+  "clear-right": isWeb ? { clear: "right" } : null,
+  "clear-both": isWeb ? { clear: "both" } : null,
+  "clear-start": isWeb ? { clear: "inline-start" } : null,
+  "clear-end": isWeb ? { clear: "inline-end" } : null,
+  "clear-none": isWeb ? { clear: "none" } : null,
+  // Vertical align (web-only)
+  "align-baseline": isWeb ? { verticalAlign: "baseline" } : null,
+  "align-top": isWeb ? { verticalAlign: "top" } : null,
+  "align-middle": isWeb ? { verticalAlign: "middle" } : null,
+  "align-bottom": isWeb ? { verticalAlign: "bottom" } : null,
+  "align-text-top": isWeb ? { verticalAlign: "text-top" } : null,
+  "align-text-bottom": isWeb ? { verticalAlign: "text-bottom" } : null,
+  "align-sub": isWeb ? { verticalAlign: "sub" } : null,
+  "align-super": isWeb ? { verticalAlign: "super" } : null,
+  // Touch action (web-only)
+  "touch-auto": isWeb ? { touchAction: "auto" } : null,
+  "touch-none": isWeb ? { touchAction: "none" } : null,
+  "touch-pan-x": isWeb ? { touchAction: "pan-x" } : null,
+  "touch-pan-y": isWeb ? { touchAction: "pan-y" } : null,
+  "touch-pan-left": isWeb ? { touchAction: "pan-left" } : null,
+  "touch-pan-right": isWeb ? { touchAction: "pan-right" } : null,
+  "touch-pan-up": isWeb ? { touchAction: "pan-up" } : null,
+  "touch-pan-down": isWeb ? { touchAction: "pan-down" } : null,
+  "touch-pinch-zoom": isWeb ? { touchAction: "pinch-zoom" } : null,
+  "touch-manipulation": isWeb ? { touchAction: "manipulation" } : null
 };
 var RESOLVERS = {
   // ── Background ─────────────────────────────────────────────────────────────
@@ -1831,6 +2163,545 @@ var RESOLVERS = {
     if (isArbitrary) return { gridRow: value };
     return null;
   },
+  // ── Grid alignment (web-only) ──────────────────────────────────────────────
+  // place-items is shorthand for align-items + justify-items on a grid container
+  "place-items": ({ value }) => {
+    if (!isWeb) return null;
+    const map = {
+      start: "start",
+      end: "end",
+      center: "center",
+      stretch: "stretch",
+      baseline: "baseline"
+    };
+    return map[value] ? { placeItems: map[value] } : null;
+  },
+  // place-content is shorthand for align-content + justify-content on a grid container
+  "place-content": ({ value }) => {
+    if (!isWeb) return null;
+    const map = {
+      start: "start",
+      end: "end",
+      center: "center",
+      stretch: "stretch",
+      between: "space-between",
+      around: "space-around",
+      evenly: "space-evenly",
+      baseline: "baseline"
+    };
+    return map[value] ? { placeContent: map[value] } : null;
+  },
+  // justify-items controls inline-axis alignment of grid items within their cells
+  "justify-items": ({ value }) => {
+    if (!isWeb) return null;
+    const map = {
+      start: "start",
+      end: "end",
+      center: "center",
+      stretch: "stretch"
+    };
+    return map[value] ? { justifyItems: map[value] } : null;
+  },
+  // place-self is shorthand for align-self + justify-self on a grid item
+  "place-self": ({ value }) => {
+    if (!isWeb) return null;
+    const map = {
+      auto: "auto",
+      start: "start",
+      end: "end",
+      center: "center",
+      stretch: "stretch"
+    };
+    return map[value] ? { placeSelf: map[value] } : null;
+  },
+  // justify-self controls inline-axis self-alignment of a grid item
+  "justify-self": ({ value }) => {
+    if (!isWeb) return null;
+    const map = {
+      auto: "auto",
+      start: "start",
+      end: "end",
+      center: "center",
+      stretch: "stretch"
+    };
+    return map[value] ? { justifySelf: map[value] } : null;
+  },
+  // ── CSS Filters (composable via CSS variables, web-only) ─────────────────
+  blur: ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    const sizes = {
+      "": "blur(8px)",
+      sm: "blur(4px)",
+      md: "blur(12px)",
+      lg: "blur(16px)",
+      xl: "blur(24px)",
+      "2xl": "blur(40px)",
+      "3xl": "blur(64px)"
+    };
+    if (value === "none") return { "--tw-blur": "", filter: FILTER_COMPOSE };
+    const v = isArbitrary ? `blur(${value})` : sizes[value];
+    return v !== void 0 ? { "--tw-blur": v, filter: FILTER_COMPOSE } : null;
+  },
+  brightness: ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    const v = isArbitrary ? `brightness(${value})` : `brightness(${parseFloat(value) / 100})`;
+    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-brightness": v, filter: FILTER_COMPOSE };
+  },
+  contrast: ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    const v = isArbitrary ? `contrast(${value})` : `contrast(${parseFloat(value) / 100})`;
+    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-contrast": v, filter: FILTER_COMPOSE };
+  },
+  grayscale: ({ value }) => {
+    if (!isWeb) return null;
+    const v = value === "0" ? "grayscale(0)" : "grayscale(100%)";
+    return { "--tw-grayscale": v, filter: FILTER_COMPOSE };
+  },
+  "hue-rotate": ({ value, negative, isArbitrary }) => {
+    if (!isWeb) return null;
+    const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
+    if (isNaN(parseFloat(deg)) && !isArbitrary) return null;
+    return { "--tw-hue-rotate": `hue-rotate(${deg})`, filter: FILTER_COMPOSE };
+  },
+  invert: ({ value }) => {
+    if (!isWeb) return null;
+    const v = value === "0" ? "invert(0)" : "invert(100%)";
+    return { "--tw-invert": v, filter: FILTER_COMPOSE };
+  },
+  saturate: ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    const v = isArbitrary ? `saturate(${value})` : `saturate(${parseFloat(value) / 100})`;
+    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-saturate": v, filter: FILTER_COMPOSE };
+  },
+  sepia: ({ value }) => {
+    if (!isWeb) return null;
+    const v = value === "0" ? "sepia(0)" : "sepia(100%)";
+    return { "--tw-sepia": v, filter: FILTER_COMPOSE };
+  },
+  "drop-shadow": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (isArbitrary) return { "--tw-drop-shadow": `drop-shadow(${value.replace(/_/g, " ")})`, filter: FILTER_COMPOSE };
+    const presets = {
+      "": "drop-shadow(0 1px 2px rgb(0 0 0/0.1)) drop-shadow(0 1px 1px rgb(0 0 0/0.06))",
+      sm: "drop-shadow(0 1px 1px rgb(0 0 0/0.05))",
+      md: "drop-shadow(0 4px 3px rgb(0 0 0/0.07)) drop-shadow(0 2px 2px rgb(0 0 0/0.06))",
+      lg: "drop-shadow(0 10px 8px rgb(0 0 0/0.04)) drop-shadow(0 4px 3px rgb(0 0 0/0.1))",
+      xl: "drop-shadow(0 20px 13px rgb(0 0 0/0.03)) drop-shadow(0 8px 5px rgb(0 0 0/0.08))",
+      "2xl": "drop-shadow(0 25px 25px rgb(0 0 0/0.15))",
+      none: "drop-shadow(0 0 #0000)"
+    };
+    const v = presets[value];
+    return v !== void 0 ? { "--tw-drop-shadow": v, filter: FILTER_COMPOSE } : null;
+  },
+  // Arbitrary full filter string: filter-[blur(4px)_grayscale(1)]
+  filter: ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (isArbitrary) return { filter: value.replace(/_/g, " ") };
+    if (value === "none") return { filter: "none" };
+    return null;
+  },
+  // ── Backdrop Filters (composable via CSS variables, web-only) ────────────
+  "backdrop-blur": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    const sizes = {
+      "": "blur(8px)",
+      sm: "blur(4px)",
+      md: "blur(12px)",
+      lg: "blur(16px)",
+      xl: "blur(24px)",
+      "2xl": "blur(40px)",
+      "3xl": "blur(64px)"
+    };
+    if (value === "none") return { "--tw-backdrop-blur": "", backdropFilter: BACKDROP_FILTER_COMPOSE };
+    const v = isArbitrary ? `blur(${value})` : sizes[value];
+    return v !== void 0 ? { "--tw-backdrop-blur": v, backdropFilter: BACKDROP_FILTER_COMPOSE } : null;
+  },
+  "backdrop-brightness": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    const v = isArbitrary ? `brightness(${value})` : `brightness(${parseFloat(value) / 100})`;
+    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-backdrop-brightness": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
+  },
+  "backdrop-contrast": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    const v = isArbitrary ? `contrast(${value})` : `contrast(${parseFloat(value) / 100})`;
+    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-backdrop-contrast": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
+  },
+  "backdrop-grayscale": ({ value }) => {
+    if (!isWeb) return null;
+    return { "--tw-backdrop-grayscale": value === "0" ? "grayscale(0)" : "grayscale(100%)", backdropFilter: BACKDROP_FILTER_COMPOSE };
+  },
+  "backdrop-hue-rotate": ({ value, negative, isArbitrary }) => {
+    if (!isWeb) return null;
+    const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
+    if (isNaN(parseFloat(deg)) && !isArbitrary) return null;
+    return { "--tw-backdrop-hue-rotate": `hue-rotate(${deg})`, backdropFilter: BACKDROP_FILTER_COMPOSE };
+  },
+  "backdrop-invert": ({ value }) => {
+    if (!isWeb) return null;
+    return { "--tw-backdrop-invert": value === "0" ? "invert(0)" : "invert(100%)", backdropFilter: BACKDROP_FILTER_COMPOSE };
+  },
+  "backdrop-opacity": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    const v = isArbitrary ? `opacity(${value})` : `opacity(${parseFloat(value) / 100})`;
+    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-backdrop-opacity": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
+  },
+  "backdrop-saturate": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    const v = isArbitrary ? `saturate(${value})` : `saturate(${parseFloat(value) / 100})`;
+    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-backdrop-saturate": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
+  },
+  "backdrop-sepia": ({ value }) => {
+    if (!isWeb) return null;
+    return { "--tw-backdrop-sepia": value === "0" ? "sepia(0)" : "sepia(100%)", backdropFilter: BACKDROP_FILTER_COMPOSE };
+  },
+  "backdrop-filter": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (isArbitrary) return { backdropFilter: value.replace(/_/g, " ") };
+    if (value === "none") return { backdropFilter: "none" };
+    return null;
+  },
+  // ── Background gradient (CSS variable gradient stops, web-only) ──────────
+  "bg-gradient-to": ({ value }) => {
+    if (!isWeb) return null;
+    const directions = {
+      t: "to top",
+      tr: "to top right",
+      r: "to right",
+      br: "to bottom right",
+      b: "to bottom",
+      bl: "to bottom left",
+      l: "to left",
+      tl: "to top left"
+    };
+    const dir = directions[value];
+    if (!dir) return null;
+    return {
+      backgroundImage: `linear-gradient(${dir}, var(--tw-gradient-from, transparent), var(--tw-gradient-stops, transparent))`
+    };
+  },
+  from: ({ value, isArbitrary }, { colors }) => {
+    if (!isWeb) return null;
+    const color = resolveColor(value, colors, isArbitrary);
+    if (!color) return null;
+    return {
+      "--tw-gradient-from": color,
+      "--tw-gradient-stops": `var(--tw-gradient-from), var(--tw-gradient-to, transparent)`
+    };
+  },
+  via: ({ value, isArbitrary }, { colors }) => {
+    if (!isWeb) return null;
+    const color = resolveColor(value, colors, isArbitrary);
+    if (!color) return null;
+    return {
+      "--tw-gradient-via": color,
+      "--tw-gradient-stops": `var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to, transparent)`
+    };
+  },
+  to: ({ value, isArbitrary }, { colors }) => {
+    if (!isWeb) return null;
+    const color = resolveColor(value, colors, isArbitrary);
+    if (!color) return null;
+    return { "--tw-gradient-to": color };
+  },
+  // ── Transform extras (web-only) ───────────────────────────────────────────
+  "skew-x": ({ value, negative, isArbitrary }) => {
+    const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
+    if (!isArbitrary && isNaN(parseFloat(value))) return null;
+    return isWeb ? { transform: `skewX(${deg})` } : { transform: [{ skewX: deg }] };
+  },
+  "skew-y": ({ value, negative, isArbitrary }) => {
+    const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
+    if (!isArbitrary && isNaN(parseFloat(value))) return null;
+    return isWeb ? { transform: `skewY(${deg})` } : { transform: [{ skewY: deg }] };
+  },
+  // Arbitrary full transform string: transform-[rotate(45deg)_scale(1.5)]
+  transform: ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (isArbitrary) return { transform: value.replace(/_/g, " ") };
+    if (value === "none") return { transform: "none" };
+    return null;
+  },
+  // Transform origin
+  origin: ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (isArbitrary) return { transformOrigin: value.replace(/_/g, " ") };
+    const origins = {
+      center: "center",
+      top: "top",
+      "top-right": "top right",
+      right: "right",
+      "bottom-right": "bottom right",
+      bottom: "bottom",
+      "bottom-left": "bottom left",
+      left: "left",
+      "top-left": "top left"
+    };
+    return origins[value] ? { transformOrigin: origins[value] } : null;
+  },
+  // ── Text decoration advanced (web-only) ───────────────────────────────────
+  decoration: ({ value, isArbitrary }, { colors }) => {
+    if (!isWeb) return null;
+    if (isArbitrary) {
+      if (/^\d/.test(value) || value.startsWith("calc(")) return { textDecorationThickness: value };
+      return { textDecorationColor: value };
+    }
+    const thickTokens = {
+      auto: "auto",
+      "from-font": "from-font",
+      "0": "0px",
+      "1": "1px",
+      "2": "2px",
+      "4": "4px",
+      "8": "8px"
+    };
+    if (value in thickTokens) return { textDecorationThickness: thickTokens[value] };
+    const styleTokens = {
+      solid: "solid",
+      dashed: "dashed",
+      dotted: "dotted",
+      double: "double",
+      wavy: "wavy"
+    };
+    if (value in styleTokens) return { textDecorationStyle: styleTokens[value] };
+    const color = resolveColor(value, colors, false);
+    return color ? { textDecorationColor: color } : null;
+  },
+  "underline-offset": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (isArbitrary) return { textUnderlineOffset: value };
+    const offsets = {
+      auto: "auto",
+      "0": "0px",
+      "1": "1px",
+      "2": "2px",
+      "4": "4px",
+      "8": "8px"
+    };
+    return offsets[value] ? { textUnderlineOffset: offsets[value] } : null;
+  },
+  // ── Outline extended (web-only) ───────────────────────────────────────────
+  outline: ({ value, isArbitrary }, { colors }) => {
+    if (!isWeb) return null;
+    if (!value) return { outline: "2px solid transparent", outlineOffset: "2px" };
+    if (value === "none") return { outline: "none", outlineOffset: "0" };
+    if (isArbitrary) {
+      if (/^\d/.test(value) || value.startsWith("calc(")) return { outlineWidth: value };
+      return { outlineColor: value };
+    }
+    const widths = { "0": "0px", "1": "1px", "2": "2px", "4": "4px", "8": "8px" };
+    if (value in widths) return { outlineWidth: widths[value] };
+    const color = resolveColor(value, colors, false);
+    return color ? { outlineColor: color } : null;
+  },
+  "outline-offset": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (isArbitrary) return { outlineOffset: value };
+    const offsets = { "0": "0px", "1": "1px", "2": "2px", "4": "4px", "8": "8px" };
+    return offsets[value] ? { outlineOffset: offsets[value] } : null;
+  },
+  // ── Columns (web-only) ─────────────────────────────────────────────────────
+  columns: ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (isArbitrary) return { columnCount: value };
+    if (value === "auto") return { columnCount: "auto" };
+    const n = parseInt(value, 10);
+    if (!isNaN(n)) return { columnCount: n };
+    const widths = {
+      "3xs": "16rem",
+      "2xs": "18rem",
+      xs: "20rem",
+      sm: "24rem",
+      md: "28rem",
+      lg: "32rem",
+      xl: "36rem",
+      "2xl": "42rem",
+      "3xl": "48rem",
+      "4xl": "56rem",
+      "5xl": "64rem",
+      "6xl": "72rem",
+      "7xl": "80rem"
+    };
+    return widths[value] ? { columnWidth: widths[value] } : null;
+  },
+  // ── Mix blend mode (web-only) ─────────────────────────────────────────────
+  "mix-blend": ({ value }) => {
+    if (!isWeb) return null;
+    const modes = [
+      "normal",
+      "multiply",
+      "screen",
+      "overlay",
+      "darken",
+      "lighten",
+      "color-dodge",
+      "color-burn",
+      "hard-light",
+      "soft-light",
+      "difference",
+      "exclusion",
+      "hue",
+      "saturation",
+      "color",
+      "luminosity",
+      "plus-lighter"
+    ];
+    return modes.includes(value) ? { mixBlendMode: value } : null;
+  },
+  // ── Will-change (web-only) ─────────────────────────────────────────────────
+  "will-change": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (isArbitrary) return { willChange: value.replace(/_/g, ", ") };
+    const presets = {
+      auto: "auto",
+      scroll: "scroll-position",
+      contents: "contents",
+      transform: "transform"
+    };
+    return presets[value] ? { willChange: presets[value] } : null;
+  },
+  // ── Divide (child combinator CSS, web-only) ───────────────────────────────
+  // These return special __divide* markers that resolver.ts converts to
+  // .cls > * + * { border-... } CSS rules. No inline style is applied.
+  "divide-x": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (value === "reverse") return null;
+    if (!value) return { __divideX: 1 };
+    const n = parseFloat(value);
+    return isNaN(n) ? null : { __divideX: n };
+  },
+  "divide-y": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (value === "reverse") return null;
+    if (!value) return { __divideY: 1 };
+    const n = parseFloat(value);
+    return isNaN(n) ? null : { __divideY: n };
+  },
+  divide: ({ value, isArbitrary }, { colors }) => {
+    if (!isWeb) return null;
+    if (isArbitrary) return { __divideColor: value };
+    const styleTokens = {
+      solid: "solid",
+      dashed: "dashed",
+      dotted: "dotted",
+      double: "double",
+      none: "none"
+    };
+    if (value in styleTokens) return { __divideStyle: styleTokens[value] };
+    const color = resolveColor(value, colors, false);
+    return color ? { __divideColor: color } : null;
+  },
+  // ── Text shadow (cross-platform: iOS, Android, web) ─────────────────────
+  // Named presets give cross-platform shadow; arbitrary is web-only.
+  "text-shadow": ({ value, isArbitrary }, { colors }) => {
+    if (value === "none") {
+      return isWeb ? { textShadow: "none" } : { textShadowColor: "transparent", textShadowOffset: { width: 0, height: 0 }, textShadowRadius: 0 };
+    }
+    const webPresets = {
+      "": "0 2px 4px rgba(0,0,0,0.3)",
+      sm: "0 1px 2px rgba(0,0,0,0.3)",
+      md: "0 4px 6px rgba(0,0,0,0.3)",
+      lg: "0 8px 16px rgba(0,0,0,0.5)",
+      xl: "0 16px 32px rgba(0,0,0,0.5)"
+    };
+    const nativePresets = {
+      "": { textShadowColor: "rgba(0,0,0,0.3)", textShadowOffset: { width: 0, height: 2 }, textShadowRadius: 4 },
+      sm: { textShadowColor: "rgba(0,0,0,0.3)", textShadowOffset: { width: 0, height: 1 }, textShadowRadius: 2 },
+      md: { textShadowColor: "rgba(0,0,0,0.3)", textShadowOffset: { width: 0, height: 4 }, textShadowRadius: 6 },
+      lg: { textShadowColor: "rgba(0,0,0,0.5)", textShadowOffset: { width: 0, height: 8 }, textShadowRadius: 16 },
+      xl: { textShadowColor: "rgba(0,0,0,0.5)", textShadowOffset: { width: 0, height: 16 }, textShadowRadius: 32 }
+    };
+    if (value in webPresets) {
+      if (isWeb) return { textShadow: webPresets[value] };
+      return nativePresets[value] ?? null;
+    }
+    if (isArbitrary) {
+      return isWeb ? { textShadow: value.replace(/_/g, " ") } : null;
+    }
+    const color = resolveColor(value, colors, false);
+    if (color) {
+      return isWeb ? { textShadow: `0 2px 4px ${color}` } : { textShadowColor: color };
+    }
+    return null;
+  },
+  // ── Perspective transform (cross-platform: iOS, Android, web) ────────────
+  perspective: ({ value, isArbitrary }) => {
+    if (isArbitrary) {
+      const numPx = parseFloat(value);
+      if (isWeb) return { transform: `perspective(${value})` };
+      return isNaN(numPx) ? null : { transform: [{ perspective: numPx }] };
+    }
+    if (value === "none") return isWeb ? { transform: "none" } : null;
+    const n = parseFloat(value);
+    if (isNaN(n)) return null;
+    return isWeb ? { transform: `perspective(${n}px)` } : { transform: [{ perspective: n }] };
+  },
+  // ── Tint color (native-only, for Image and icon components) ──────────────
+  tint: ({ value, isArbitrary }, { colors }) => {
+    if (isWeb) return null;
+    const color = resolveColor(value, colors, isArbitrary);
+    return color ? { tintColor: color } : null;
+  },
+  // ── Size shorthand (sets width AND height in one utility) ────────────────
+  size: ({ value, isArbitrary }, { spacing }) => {
+    const v = resolveSizing(value, spacing, isArbitrary);
+    return v !== null ? { width: v, height: v } : null;
+  },
+  // ── Animations (CSS keyframe animations, web-only) ────────────────────────
+  // Each variant injects a @keyframes rule once via the __keyframe marker.
+  // resolver.ts detects __keyframe, injects the rule, then strips the marker
+  // so it never reaches element inline styles.
+  animate: ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (isArbitrary) return { animation: value.replace(/_/g, " ") };
+    const defs = {
+      none: { animation: "none" },
+      spin: {
+        animation: "kb-spin 1s linear infinite",
+        __keyframe: "@keyframes kb-spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }"
+      },
+      ping: {
+        animation: "kb-ping 1s cubic-bezier(0,0,0.2,1) infinite",
+        __keyframe: "@keyframes kb-ping { 75%, 100% { transform: scale(2); opacity: 0 } }"
+      },
+      pulse: {
+        animation: "kb-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite",
+        __keyframe: "@keyframes kb-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .5 } }"
+      },
+      bounce: {
+        animation: "kb-bounce 1s infinite",
+        __keyframe: "@keyframes kb-bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1) } 50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1) } }"
+      }
+    };
+    const def = defs[value];
+    return def ? def : null;
+  },
+  // ── Line-clamp (web-only) ─────────────────────────────────────────────────
+  "line-clamp": ({ value }) => {
+    if (!isWeb) return null;
+    if (value === "none") return { overflow: "visible", display: "block", WebkitLineClamp: "unset" };
+    const n = parseInt(value, 10);
+    if (isNaN(n) || n < 1) return null;
+    return {
+      overflow: "hidden",
+      display: "-webkit-box",
+      WebkitBoxOrient: "vertical",
+      WebkitLineClamp: n
+    };
+  },
+  // ── Caret color (web-only) ────────────────────────────────────────────────
+  caret: ({ value, isArbitrary }, { colors }) => {
+    if (!isWeb) return null;
+    if (value === "auto" || value === "transparent") return { caretColor: value };
+    const color = resolveColor(value, colors, isArbitrary);
+    return color ? { caretColor: color } : null;
+  },
+  // ── Accent color (web-only) ───────────────────────────────────────────────
+  accent: ({ value, isArbitrary }, { colors }) => {
+    if (!isWeb) return null;
+    if (value === "auto") return { accentColor: "auto" };
+    const color = resolveColor(value, colors, isArbitrary);
+    return color ? { accentColor: color } : null;
+  },
   // ── Flex ───────────────────────────────────────────────────────────────────
   flex: ({ value, isArbitrary }, { flex }) => {
     if (!value) return { display: "flex" };
@@ -2111,6 +2982,9 @@ function clearPluginUtilities() {
 function getPluginStandaloneMap() {
   return PLUGIN_STANDALONE;
 }
+function isKnownUtility(utility) {
+  return utility in STANDALONE || utility in RESOLVERS || utility in PLUGIN_STANDALONE || utility in PLUGIN_RESOLVERS;
+}
 
 // src/core/responsiveStore.ts
 var RESPONSIVE_KEY = "__kbach_responsive__";
@@ -2195,7 +3069,14 @@ var MODIFIER_TO_PSEUDO = {
   "not-pressed": ":not(:active)",
   "not-disabled": ":not(:disabled)",
   "not-checked": ":not(:checked)",
-  "not-visited": ":not(:visited)"
+  "not-visited": ":not(:visited)",
+  // Pseudo-elements (CSS-injection only; never applied as inline styles)
+  before: "::before",
+  after: "::after",
+  selection: "::selection",
+  "first-letter": "::first-letter",
+  "first-line": "::first-line",
+  marker: "::marker"
 };
 var GROUP_PEER_PREFIX = {
   "group-hover": ".group:hover",
@@ -2205,12 +3086,34 @@ var GROUP_PEER_PREFIX = {
 };
 var MODE_MODS = /* @__PURE__ */ new Set(["dark", "light", "not-dark", "not-light"]);
 var RESPONSIVE_MODS = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl"]);
-function injectClassRule(cls, bucketKey, styles, darkMode) {
-  const cssDecls = styleValueToCSS(styles);
+var PRINT_MODS = /* @__PURE__ */ new Set(["print"]);
+function buildDivideDecls(styles) {
+  const parts = [];
+  if ("__divideX" in styles) {
+    const w = Number(styles.__divideX);
+    parts.push(`border-left-width: ${w}px`);
+    parts.push("border-right-width: 0px");
+  }
+  if ("__divideY" in styles) {
+    const w = Number(styles.__divideY);
+    parts.push(`border-top-width: ${w}px`);
+    parts.push("border-bottom-width: 0px");
+  }
+  if ("__divideColor" in styles) parts.push(`border-color: ${String(styles.__divideColor)}`);
+  if ("__divideStyle" in styles) parts.push(`border-style: ${String(styles.__divideStyle)}`);
+  return parts.join("; ");
+}
+function injectClassRule(cls, bucketKey, styles, darkMode, important = false) {
+  if ("__keyframe" in styles && typeof styles.__keyframe === "string") {
+    injectRule(styles.__keyframe);
+  }
+  const isDivide = "__divideX" in styles || "__divideY" in styles || "__divideColor" in styles || "__divideStyle" in styles;
+  const cssDecls = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, important);
   if (!cssDecls) return;
   const escaped = escapeCSSSelector(cls);
+  const childSuffix = isDivide ? " > * + *" : "";
   if (bucketKey === "base") {
-    injectRule(`.${escaped} { ${cssDecls} }`);
+    injectRule(`.${escaped}${childSuffix} { ${cssDecls} }`);
     return;
   }
   const mods = bucketKey.split(":");
@@ -2218,10 +3121,11 @@ function injectClassRule(cls, bucketKey, styles, darkMode) {
   const nonResponsiveMods = mods.filter((m) => !RESPONSIVE_MODS.has(m));
   const hasDark = nonResponsiveMods.includes("dark") || nonResponsiveMods.includes("not-light");
   const hasLight = nonResponsiveMods.includes("light") || nonResponsiveMods.includes("not-dark");
+  const hasPrint = nonResponsiveMods.includes("print");
   const ancestorMods = nonResponsiveMods.filter((m) => m in GROUP_PEER_PREFIX);
-  const pseudoMods = nonResponsiveMods.filter((m) => !MODE_MODS.has(m) && !(m in GROUP_PEER_PREFIX));
+  const pseudoMods = nonResponsiveMods.filter((m) => !MODE_MODS.has(m) && !(m in GROUP_PEER_PREFIX) && !PRINT_MODS.has(m));
   const pseudoSuffix = pseudoMods.map((p) => MODIFIER_TO_PSEUDO[p] ?? `:${p}`).join("");
-  const elementSelector = `.${escaped}${pseudoSuffix}`;
+  const elementSelector = `.${escaped}${pseudoSuffix}${childSuffix}`;
   const ancestorPrefix = ancestorMods.length ? ancestorMods.map((m) => GROUP_PEER_PREFIX[m]).join(" ") + " " : "";
   const selector = `${ancestorPrefix}${elementSelector}`;
   let rule;
@@ -2244,6 +3148,9 @@ function injectClassRule(cls, bucketKey, styles, darkMode) {
   } else {
     rule = `${selector} { ${cssDecls} }`;
   }
+  if (hasPrint) {
+    rule = `@media print { ${rule} }`;
+  }
   if (responsiveMods.length > 0) {
     const screens = getGlobalScreens();
     const minWidth = Math.max(...responsiveMods.map((m) => screens[m] ?? 0));
@@ -2261,7 +3168,19 @@ var RN_ONLY_PROPS = /* @__PURE__ */ new Set([
   "elevation",
   "includeFontPadding",
   "textAlignVertical",
-  "writingDirection"
+  "writingDirection",
+  // Text shadow native props — web uses the textShadow CSS shorthand instead
+  "textShadowColor",
+  "textShadowOffset",
+  "textShadowRadius",
+  // tintColor is native-only (Image/icon tinting)
+  "tintColor",
+  // Internal markers — handled specially, never serialized as CSS props
+  "__divideX",
+  "__divideY",
+  "__divideColor",
+  "__divideStyle",
+  "__keyframe"
 ]);
 var CSS_UNITLESS = /* @__PURE__ */ new Set([
   "opacity",
@@ -2279,7 +3198,7 @@ var CSS_UNITLESS = /* @__PURE__ */ new Set([
   "gridRowStart",
   "gridRowEnd"
 ]);
-function styleValueToCSS(styles) {
+function styleValueToCSS(styles, forceImportant = false) {
   return Object.entries(styles).filter(
     ([prop, v]) => v !== void 0 && v !== null && typeof v !== "object" && !RN_ONLY_PROPS.has(prop)
   ).map(([prop, val]) => {
@@ -2290,8 +3209,8 @@ function styleValueToCSS(styles) {
     } else {
       cssVal = String(val);
     }
-    const important = prop === "display" && (cssVal === "grid" || cssVal === "inline-grid") || prop === "position" && (cssVal === "sticky" || cssVal === "fixed" || cssVal === "static") ? " !important" : "";
-    return `${cssProp}: ${cssVal}${important}`;
+    const imp = forceImportant || prop === "display" && (cssVal === "grid" || cssVal === "inline-grid") || prop === "position" && (cssVal === "sticky" || cssVal === "fixed" || cssVal === "static") ? " !important" : "";
+    return `${cssProp}: ${cssVal}${imp}`;
   }).join("; ");
 }
 function camelToKebab(str) {
@@ -2306,18 +3225,23 @@ function resolve(classString, theme, darkMode = "attribute") {
   const injectQueue = [];
   for (const parsed of parsedClasses) {
     const styles = resolveUtility(parsed, theme);
-    if (!styles) continue;
+    if (!styles) {
+      if (process.env.NODE_ENV !== "production" && !parsed.isArbitrary && !isKnownUtility(parsed.utility)) {
+        console.warn(`[kbach] Unknown utility "${parsed.utility}" in class "${parsed.original}"`);
+      }
+      continue;
+    }
     const bucketKey = parsed.modifiers.length === 0 ? "base" : parsed.modifiers.join(":");
     if (!result[bucketKey]) result[bucketKey] = {};
     Object.assign(result[bucketKey], styles);
     if (typeof document !== "undefined") {
-      injectQueue.push({ cls: parsed.original, bucketKey, styles });
+      injectQueue.push({ cls: parsed.original, bucketKey, styles, important: parsed.important });
     }
   }
   styleCache.set(cacheKey, result);
   if (typeof document !== "undefined") {
-    for (const { cls, bucketKey, styles } of injectQueue) {
-      injectClassRule(cls, bucketKey, styles, darkMode);
+    for (const { cls, bucketKey, styles, important } of injectQueue) {
+      injectClassRule(cls, bucketKey, styles, darkMode, important);
     }
   }
   return result;
@@ -2384,6 +3308,11 @@ function matchesMods(mods, isDark, state, breakpoints) {
 }
 function clearCache() {
   styleCache.clear();
+  _injectedRules.clear();
+  if (_styleEl) {
+    _styleEl.remove();
+    _styleEl = null;
+  }
 }
 
 // src/core/config.ts
@@ -2823,9 +3752,75 @@ function ThemeToggle({
 }
 
 // src/styled.tsx
+var import_react6 = __toESM(require("react"));
+
+// src/useGlobalWidth.ts
 var import_react5 = __toESM(require("react"));
+var useSyncExternalStore = import_react5.default.useSyncExternalStore ?? function useSyncExternalStoreFallback(subscribe, getSnapshot, _getServerSnapshot) {
+  const [, forceUpdate] = import_react5.default.useReducer((n) => n + 1, 0);
+  import_react5.default.useEffect(() => subscribe(forceUpdate), [subscribe]);
+  return getSnapshot();
+};
+var NOOP_SUB = (_) => () => {
+};
+var ZERO_SNAP = () => 0;
+var EMPTY_BREAKPOINTS = /* @__PURE__ */ new Set();
+var _webListeners = null;
+var _webRaf = 0;
+function _webResizeHandler() {
+  cancelAnimationFrame(_webRaf);
+  _webRaf = requestAnimationFrame(() => {
+    if (_webListeners) for (const cb of _webListeners) cb();
+  });
+}
+function subscribeWebWidth(cb) {
+  if (typeof window === "undefined") return () => {
+  };
+  if (!_webListeners) {
+    _webListeners = /* @__PURE__ */ new Set();
+    window.addEventListener("resize", _webResizeHandler);
+  }
+  _webListeners.add(cb);
+  return () => {
+    _webListeners.delete(cb);
+    if (_webListeners.size === 0) {
+      window.removeEventListener("resize", _webResizeHandler);
+      cancelAnimationFrame(_webRaf);
+      _webListeners = null;
+    }
+  };
+}
+function getWebWidth() {
+  return typeof window !== "undefined" ? window.innerWidth : 0;
+}
+function useGlobalWidth() {
+  return useSyncExternalStore(
+    isWeb ? subscribeWebWidth : subscribeGlobalWidth,
+    isWeb ? getWebWidth : getGlobalWidth,
+    ZERO_SNAP
+  );
+}
+function useConditionalWidth(active) {
+  return useSyncExternalStore(
+    active ? isWeb ? subscribeWebWidth : subscribeGlobalWidth : NOOP_SUB,
+    active ? isWeb ? getWebWidth : getGlobalWidth : ZERO_SNAP,
+    ZERO_SNAP
+  );
+}
+
+// src/styled.tsx
+var RESPONSIVE_MODS2 = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl"]);
+function hasResponsiveBuckets(resolved) {
+  for (const key of Object.keys(resolved)) {
+    if (key === "base") continue;
+    for (const mod of key.split(":")) {
+      if (RESPONSIVE_MODS2.has(mod)) return true;
+    }
+  }
+  return false;
+}
 function styled(Component, baseClasses = "") {
-  const Styled = (0, import_react5.forwardRef)(
+  const Styled = (0, import_react6.forwardRef)(
     (props, ref) => {
       const {
         kb: extraClasses,
@@ -2839,45 +3834,51 @@ function styled(Component, baseClasses = "") {
         ...rest
       } = props;
       const { isDark, config } = useTheme();
-      const [pressed, setPressed] = (0, import_react5.useState)(false);
-      const [hovered, setHovered] = (0, import_react5.useState)(false);
-      const [focused, setFocused] = (0, import_react5.useState)(false);
-      const handlePressIn = (0, import_react5.useCallback)((e) => {
+      const [pressed, setPressed] = (0, import_react6.useState)(false);
+      const [hovered, setHovered] = (0, import_react6.useState)(false);
+      const [focused, setFocused] = (0, import_react6.useState)(false);
+      const handlePressIn = (0, import_react6.useCallback)((e) => {
         setPressed(true);
         onPressIn?.(e);
       }, [onPressIn]);
-      const handlePressOut = (0, import_react5.useCallback)((e) => {
+      const handlePressOut = (0, import_react6.useCallback)((e) => {
         setPressed(false);
         onPressOut?.(e);
       }, [onPressOut]);
-      const handleMouseEnter = (0, import_react5.useCallback)((e) => {
+      const handleMouseEnter = (0, import_react6.useCallback)((e) => {
         setHovered(true);
         onMouseEnter?.(e);
       }, [onMouseEnter]);
-      const handleMouseLeave = (0, import_react5.useCallback)((e) => {
+      const handleMouseLeave = (0, import_react6.useCallback)((e) => {
         setHovered(false);
         onMouseLeave?.(e);
       }, [onMouseLeave]);
-      const handleFocus = (0, import_react5.useCallback)((e) => {
+      const handleFocus = (0, import_react6.useCallback)((e) => {
         setFocused(true);
         onFocus?.(e);
       }, [onFocus]);
-      const handleBlur = (0, import_react5.useCallback)((e) => {
+      const handleBlur = (0, import_react6.useCallback)((e) => {
         setFocused(false);
         onBlur?.(e);
       }, [onBlur]);
       const combined = extraClasses ? `${baseClasses} ${extraClasses}` : baseClasses;
-      const resolved = (0, import_react5.useMemo)(() => resolve(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
-      const computedStyle = (0, import_react5.useMemo)(
-        () => flatten(resolved, isDark, { pressed, hover: hovered, focus: focused }),
-        [resolved, isDark, pressed, hovered, focused]
+      const resolved = (0, import_react6.useMemo)(() => resolve(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
+      const needsWidth = hasResponsiveBuckets(resolved);
+      const width = useConditionalWidth(needsWidth);
+      const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
+      const computedStyle = (0, import_react6.useMemo)(
+        () => flatten(resolved, isDark, { pressed, hover: hovered, focus: focused }, breakpoints),
+        [resolved, isDark, pressed, hovered, focused, width]
+        // eslint-disable-line react-hooks/exhaustive-deps
       );
       const extraStyle = Array.isArray(styleProp) ? Object.assign({}, ...styleProp) : styleProp;
       const finalStyle = extraStyle ? { ...computedStyle, ...extraStyle } : computedStyle;
-      return import_react5.default.createElement(Component, {
+      return import_react6.default.createElement(Component, {
         ref,
         ...rest,
         style: finalStyle,
+        // className lets injected CSS rules (group-hover:, before:, print:, etc.) match the element.
+        ...isWeb && combined ? { className: combined } : {},
         // onPressIn / onPressOut are React Native-only events; forwarding them to
         // a DOM element on web triggers React's unknown-prop warning.
         ...isWeb ? {} : { onPressIn: handlePressIn, onPressOut: handlePressOut },
@@ -2895,62 +3896,6 @@ function styled(Component, baseClasses = "") {
 
 // src/useStyles.ts
 var import_react7 = require("react");
-
-// src/useGlobalWidth.ts
-var import_react6 = __toESM(require("react"));
-var useSyncExternalStore = import_react6.default.useSyncExternalStore ?? function useSyncExternalStoreFallback(subscribe, getSnapshot, _getServerSnapshot) {
-  const [, forceUpdate] = import_react6.default.useReducer((n) => n + 1, 0);
-  import_react6.default.useEffect(() => subscribe(forceUpdate), [subscribe]);
-  return getSnapshot();
-};
-var NOOP_SUB = (_) => () => {
-};
-var ZERO_SNAP = () => 0;
-var EMPTY_BREAKPOINTS = /* @__PURE__ */ new Set();
-var _webListeners = null;
-var _webRaf = 0;
-function _webResizeHandler() {
-  cancelAnimationFrame(_webRaf);
-  _webRaf = requestAnimationFrame(() => {
-    if (_webListeners) for (const cb of _webListeners) cb();
-  });
-}
-function subscribeWebWidth(cb) {
-  if (typeof window === "undefined") return () => {
-  };
-  if (!_webListeners) {
-    _webListeners = /* @__PURE__ */ new Set();
-    window.addEventListener("resize", _webResizeHandler);
-  }
-  _webListeners.add(cb);
-  return () => {
-    _webListeners.delete(cb);
-    if (_webListeners.size === 0) {
-      window.removeEventListener("resize", _webResizeHandler);
-      cancelAnimationFrame(_webRaf);
-      _webListeners = null;
-    }
-  };
-}
-function getWebWidth() {
-  return typeof window !== "undefined" ? window.innerWidth : 0;
-}
-function useGlobalWidth() {
-  return useSyncExternalStore(
-    isWeb ? subscribeWebWidth : subscribeGlobalWidth,
-    isWeb ? getWebWidth : getGlobalWidth,
-    ZERO_SNAP
-  );
-}
-function useConditionalWidth(active) {
-  return useSyncExternalStore(
-    active ? isWeb ? subscribeWebWidth : subscribeGlobalWidth : NOOP_SUB,
-    active ? isWeb ? getWebWidth : getGlobalWidth : ZERO_SNAP,
-    ZERO_SNAP
-  );
-}
-
-// src/useStyles.ts
 function useStyles(classString, state = {}) {
   const { isDark, config } = useTheme();
   const width = useGlobalWidth();
@@ -3016,12 +3961,12 @@ function chain(original, extra) {
     extra();
   };
 }
-var RESPONSIVE_MODS2 = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl"]);
-function hasResponsiveBuckets(resolved) {
+var RESPONSIVE_MODS3 = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl"]);
+function hasResponsiveBuckets2(resolved) {
   for (const key of Object.keys(resolved)) {
     if (key === "base") continue;
     for (const mod of key.split(":")) {
-      if (RESPONSIVE_MODS2.has(mod)) return true;
+      if (RESPONSIVE_MODS3.has(mod)) return true;
     }
   }
   return false;
@@ -3041,7 +3986,7 @@ var InteractiveWrapper = (0, import_react9.forwardRef)(
     ...rest
   }, ref) {
     const isDark = useGlobalDarkMode();
-    const needsWidth = hasResponsiveBuckets(resolvedStyle);
+    const needsWidth = hasResponsiveBuckets2(resolvedStyle);
     const width = useConditionalWidth(needsWidth);
     const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
     const [pressed, setPressed] = (0, import_react9.useState)(false);
@@ -3056,6 +4001,11 @@ var InteractiveWrapper = (0, import_react9.forwardRef)(
     const computedStyle = (0, import_react9.useMemo)(
       () => {
         const s = flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused }, breakpoints);
+        delete s.__divideX;
+        delete s.__divideY;
+        delete s.__divideColor;
+        delete s.__divideStyle;
+        delete s.__keyframe;
         if (typeof Component !== "string") {
           if (s.display === "grid" || s.display === "inline-grid") delete s.display;
           delete s.gridTemplateColumns;
@@ -3063,9 +4013,18 @@ var InteractiveWrapper = (0, import_react9.forwardRef)(
           delete s.gridColumn;
           delete s.gridRow;
           delete s.gridArea;
+          delete s.gridColumnStart;
+          delete s.gridColumnEnd;
+          delete s.gridRowStart;
+          delete s.gridRowEnd;
           delete s.gridAutoFlow;
           delete s.gridAutoColumns;
           delete s.gridAutoRows;
+          delete s.placeItems;
+          delete s.placeContent;
+          delete s.justifyItems;
+          delete s.placeSelf;
+          delete s.justifySelf;
           if (s.position === "sticky" || s.position === "fixed" || s.position === "static") {
             delete s.position;
           }