@bookklik/senangstart-css 0.2.8 → 0.2.9

package/dist/senangstart-tw.js

@@ -142,6 +142,22 @@
     "9xl": "hero"
     // 8rem → hero
   };
+  var fractionScale = {
+    "1/2": "half",
+    // 50%
+    "1/3": "third",
+    // 33.33%
+    "2/3": "third-2x",
+    // 66.67%
+    "1/4": "quarter",
+    // 25%
+    "2/4": "half",
+    // 50% (alias)
+    "3/4": "quarter-3x",
+    // 75%
+    "full": "full"
+    // 100%
+  };
   var layoutMappings = {
     container: "container",
     flex: "flex",
@@ -252,40 +268,73 @@
   }
   function convertClass(twClass, exact) {
     const prefixMatch = twClass.match(
-      /^(sm:|md:|lg:|xl:|2xl:|hover:|focus:|focus-visible:|active:|disabled:|dark:)(.+)$/
+      /^(sm:|md:|lg:|xl:|2xl:|hover:|focus:|focus-visible:|active:|disabled:|dark:|group-hover:|peer-hover:|group-focus:|peer-focus:|group-active:|peer-active:|peer-check:|group-open:|peer-open:)(.+)$/
     );
-    let prefix = "", baseClass = twClass;
+    let prefix = "", baseClass = twClass, extraAttr = null;
     if (prefixMatch) {
       const rawPrefix = prefixMatch[1].slice(0, -1);
       if (["sm", "md", "lg", "xl", "2xl"].includes(rawPrefix)) {
         prefix = `tw-${rawPrefix}:`;
+      } else if (rawPrefix.startsWith("group-") || rawPrefix.startsWith("peer-")) {
+        const stateMap = {
+          "hover": "hover",
+          "focus": "focus",
+          // or focus-within if we strictly follow group logic, but SenangStart group logic handles mapped state triggers
+          "active": "active",
+          "open": "expanded",
+          // map open -> expanded
+          "check": "checked"
+          // map check -> checked
+        };
+        const variant = rawPrefix.split("-")[1];
+        const mappedState = stateMap[variant] || variant;
+        prefix = `${mappedState}:`;
+        if (rawPrefix.startsWith("peer-")) {
+          extraAttr = { cat: "listens", val: "peer" };
+        }
       } else {
         prefix = prefixMatch[1];
       }
       baseClass = prefixMatch[2];
     }
+    if (baseClass === "group") {
+      return { cat: "layout", val: "hoverable focusable pressable expandable" };
+    }
+    if (baseClass === "peer") {
+      return [
+        { cat: "layout", val: "hoverable focusable pressable expandable" },
+        { cat: "interact", val: "peer" }
+      ];
+    }
+    const attachExtra = (result) => {
+      if (!result) return null;
+      if (extraAttr) {
+        return Array.isArray(result) ? [...result, extraAttr] : [result, extraAttr];
+      }
+      return result;
+    };
     if (layoutMappings[baseClass])
-      return { cat: "layout", val: prefix + layoutMappings[baseClass] };
+      return attachExtra({ cat: "layout", val: prefix + layoutMappings[baseClass] });
     if (visualKeywords[baseClass])
-      return { cat: "visual", val: prefix + visualKeywords[baseClass] };
+      return attachExtra({ cat: "visual", val: prefix + visualKeywords[baseClass] });
     const textColorMatch = baseClass.match(
       /^text-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/
     );
     if (textColorMatch)
-      return { cat: "visual", val: prefix + "text:" + textColorMatch[1] };
+      return attachExtra({ cat: "visual", val: prefix + "text:" + textColorMatch[1] });
     if (["text-left", "text-center", "text-right", "text-justify"].includes(
       baseClass
     ))
-      return {
+      return attachExtra({
         cat: "visual",
         val: prefix + "text:" + baseClass.replace("text-", "")
-      };
+      });
     const textSizeMatch = baseClass.match(
       /^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/
     );
     if (textSizeMatch) {
       const size = exact ? `tw-${textSizeMatch[1]}` : fontSizeScale[textSizeMatch[1]] || textSizeMatch[1];
-      return { cat: "visual", val: prefix + "text-size:" + size };
+      return attachExtra({ cat: "visual", val: prefix + "text-size:" + size });
     }
     const bgMatch = baseClass.match(
       /^bg-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?|transparent|current|inherit)$/
@@ -293,31 +342,46 @@
     if (bgMatch) {
       const colorVal = bgMatch[1];
       if (colorVal === "transparent") {
-        return { cat: "visual", val: prefix + "bg:[transparent]" };
+        return attachExtra({ cat: "visual", val: prefix + "bg:transparent" });
       }
       if (colorVal === "current") {
-        return { cat: "visual", val: prefix + "bg:[currentColor]" };
+        return attachExtra({ cat: "visual", val: prefix + "bg:currentColor" });
       }
       if (colorVal === "inherit") {
-        return { cat: "visual", val: prefix + "bg:[inherit]" };
+        return attachExtra({ cat: "visual", val: prefix + "bg:inherit" });
       }
-      return { cat: "visual", val: prefix + "bg:" + colorVal };
+      return attachExtra({ cat: "visual", val: prefix + "bg:" + colorVal });
     }
     const borderColorMatch = baseClass.match(
-      /^border-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/
+      /^border-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black|transparent|current|inherit)(?:-\d+)?)$/
     );
-    if (borderColorMatch)
-      return {
+    if (borderColorMatch) {
+      let colorVal = borderColorMatch[1];
+      if (colorVal === "current") colorVal = "currentColor";
+      return attachExtra({
         cat: "visual",
-        val: prefix + "border:" + borderColorMatch[1]
-      };
+        val: prefix + "border:" + colorVal
+      });
+    }
+    const borderSideColorMatch = baseClass.match(
+      /^border-([trbl])-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black|transparent|current|inherit)(?:-\d+)?)$/
+    );
+    if (borderSideColorMatch) {
+      const side = borderSideColorMatch[1];
+      let colorVal = borderSideColorMatch[2];
+      if (colorVal === "current") colorVal = "currentColor";
+      return attachExtra({
+        cat: "visual",
+        val: prefix + `border-${side}:${colorVal}`
+      });
+    }
     const paddingMatch = baseClass.match(/^p([trblxy])?-(.+)$/);
     if (paddingMatch) {
       const side = paddingMatch[1] ? "-" + paddingMatch[1] : "";
-      return {
+      return attachExtra({
         cat: "space",
         val: prefix + "p" + side + ":" + getSpacing(paddingMatch[2], exact)
-      };
+      });
     }
     const marginMatch = baseClass.match(
       /^-?m([trblxy])?-(\[.+\]|\d+\.?\d*|px|auto|full|screen)$/
@@ -334,15 +398,15 @@
           val = `-${val}`;
         }
       }
-      return { cat: "space", val: prefix + "m" + side + ":" + val };
+      return attachExtra({ cat: "space", val: prefix + "m" + side + ":" + val });
     }
     const gapMatch = baseClass.match(/^gap-([xy])?-?(.+)$/);
     if (gapMatch) {
       const axis = gapMatch[1] ? "-" + gapMatch[1] : "";
-      return {
+      return attachExtra({
         cat: "space",
         val: prefix + "g" + axis + ":" + getSpacing(gapMatch[2], exact)
-      };
+      });
     }
     const widthMatch = baseClass.match(/^(min-w|max-w|w)-(.+)$/);
     if (widthMatch) {
@@ -350,7 +414,7 @@
       const rawVal = widthMatch[2];
       const specialWidthVals = { "max": "[max-content]", "min": "[min-content]", "fit": "[fit-content]", "prose": "[65ch]" };
       const val = specialWidthVals[rawVal] || getSpacing(rawVal, exact);
-      return { cat: "space", val: prefix + prop + ":" + val };
+      return attachExtra({ cat: "space", val: prefix + prop + ":" + val });
     }
     const heightMatch = baseClass.match(/^(min-h|max-h|h)-(.+)$/);
     if (heightMatch) {
@@ -358,95 +422,118 @@
       const rawVal = heightMatch[2];
       const specialHeightVals = { "screen": "[100vh]", "svh": "[100svh]", "lvh": "[100lvh]", "dvh": "[100dvh]", "max": "[max-content]", "min": "[min-content]", "fit": "[fit-content]" };
       const val = specialHeightVals[rawVal] || getSpacing(rawVal, exact);
-      return { cat: "space", val: prefix + prop + ":" + val };
+      return attachExtra({ cat: "space", val: prefix + prop + ":" + val });
     }
     const roundedMatch = baseClass.match(/^rounded(?:-(.+))?$/);
     if (roundedMatch) {
       const size = roundedMatch[1] || "";
       const scale = exact ? size === "" ? "tw-DEFAULT" : `tw-${size}` : radiusScale[size] || "medium";
-      return { cat: "visual", val: prefix + "rounded:" + scale };
+      return attachExtra({ cat: "visual", val: prefix + "rounded:" + scale });
     }
     const shadowMatch = baseClass.match(/^shadow(?:-(.+))?$/);
     if (shadowMatch) {
       const size = shadowMatch[1] || "";
       const scale = exact ? size === "" ? "tw-DEFAULT" : `tw-${size}` : shadowScale[size] || "medium";
-      return { cat: "visual", val: prefix + "shadow:" + scale };
+      return attachExtra({ cat: "visual", val: prefix + "shadow:" + scale });
     }
     const fontWeightMatch = baseClass.match(
       /^font-(thin|extralight|light|normal|medium|semibold|bold|extrabold|black)$/
     );
     if (fontWeightMatch)
-      return { cat: "visual", val: prefix + "font:tw-" + fontWeightMatch[1] };
+      return attachExtra({ cat: "visual", val: prefix + "font:tw-" + fontWeightMatch[1] });
     const borderWidthMatch = baseClass.match(
       /^border(?:-([trblxy]))?(?:-(\d+))?$/
     );
     if (borderWidthMatch && (borderWidthMatch[2] || !borderWidthMatch[1] && baseClass === "border")) {
       const side = borderWidthMatch[1] ? "-" + borderWidthMatch[1] + "-w" : "-w";
       const width = borderWidthMatch[2] || "1";
-      return {
+      return attachExtra({
         cat: "visual",
         val: prefix + "border" + side + ":" + getBorderWidth(width, exact)
-      };
+      });
     }
-    const positionMatch = baseClass.match(/^(top|right|bottom|left|inset|inset-x|inset-y)-(\d+|px|auto|full|\[.+\])$/);
+    const positionMatch = baseClass.match(/^(top|right|bottom|left|inset|inset-x|inset-y)-(\d+|px|auto|full|1\/2|1\/3|2\/3|1\/4|2\/4|3\/4|\[.+\])$/);
     if (positionMatch) {
       const prop = positionMatch[1];
       let val = positionMatch[2];
       if (val === "0") {
         val = "none";
       } else if (val.startsWith("[") && val.endsWith("]")) {
+      } else if (fractionScale[val]) {
+        val = fractionScale[val];
       } else {
         val = getSpacing(val, exact);
       }
-      return { cat: "layout", val: prefix + prop + ":" + val };
+      return attachExtra({ cat: "layout", val: prefix + prop + ":" + val });
+    }
+    const translateMatch = baseClass.match(/^(-?)translate-([xy])-(\d+|px|full|1\/2|1\/3|2\/3|1\/4|2\/4|3\/4|\[.+\])$/);
+    if (translateMatch) {
+      const isNeg = translateMatch[1] === "-";
+      const axis = translateMatch[2];
+      let val = translateMatch[3];
+      if (val.startsWith("[") && val.endsWith("]")) {
+        if (isNeg) {
+          const inner = val.slice(1, -1);
+          val = `[-${inner}]`;
+        }
+      } else if (fractionScale[val]) {
+        val = fractionScale[val];
+        if (isNeg) val = `-${val}`;
+      } else if (val === "0") {
+        val = "0";
+      } else {
+        val = getSpacing(val, exact);
+        if (isNeg) val = `-${val}`;
+      }
+      return attachExtra({ cat: "visual", val: prefix + `translate-${axis}:${val}` });
     }
     if (baseClass === "outline-none") {
-      return { cat: "visual", val: prefix + "outline:none" };
+      return attachExtra({ cat: "visual", val: prefix + "outline:none" });
     }
     const orderMatch = baseClass.match(/^order-(\d+|first|last|none)$/);
     if (orderMatch) {
-      return { cat: "layout", val: prefix + "order:" + orderMatch[1] };
+      return attachExtra({ cat: "layout", val: prefix + "order:" + orderMatch[1] });
     }
     const gridColsMatch = baseClass.match(/^grid-cols-(\d+|none)$/);
     if (gridColsMatch) {
-      return { cat: "layout", val: prefix + "grid-cols:" + gridColsMatch[1] };
+      return attachExtra({ cat: "layout", val: prefix + "grid-cols:" + gridColsMatch[1] });
     }
     const colSpanMatch = baseClass.match(/^col-span-(\d+|full)$/);
     if (colSpanMatch) {
-      return { cat: "layout", val: prefix + "col-span:" + colSpanMatch[1] };
+      return attachExtra({ cat: "layout", val: prefix + "col-span:" + colSpanMatch[1] });
     }
     const gridRowsMatch = baseClass.match(/^grid-rows-(\d+|none)$/);
     if (gridRowsMatch) {
-      return { cat: "layout", val: prefix + "grid-rows:" + gridRowsMatch[1] };
+      return attachExtra({ cat: "layout", val: prefix + "grid-rows:" + gridRowsMatch[1] });
     }
     const rowSpanMatch = baseClass.match(/^row-span-(\d+|full)$/);
     if (rowSpanMatch) {
-      return { cat: "layout", val: prefix + "row-span:" + rowSpanMatch[1] };
+      return attachExtra({ cat: "layout", val: prefix + "row-span:" + rowSpanMatch[1] });
     }
     const opacityMatch = baseClass.match(/^opacity-(\d+)$/);
     if (opacityMatch) {
-      return { cat: "visual", val: prefix + "opacity:" + opacityMatch[1] };
+      return attachExtra({ cat: "visual", val: prefix + "opacity:" + opacityMatch[1] });
     }
     const bgGradientMatch = baseClass.match(/^bg-gradient-to-(t|tr|r|br|b|bl|l|tl)$/);
     if (bgGradientMatch) {
-      return { cat: "visual", val: prefix + "bg-image:gradient-to-" + bgGradientMatch[1] };
+      return attachExtra({ cat: "visual", val: prefix + "bg-image:gradient-to-" + bgGradientMatch[1] });
     }
     const fromMatch = baseClass.match(/^from-(.+)$/);
     if (fromMatch) {
-      return { cat: "visual", val: prefix + "from:" + fromMatch[1] };
+      return attachExtra({ cat: "visual", val: prefix + "from:" + fromMatch[1] });
     }
     const viaMatch = baseClass.match(/^via-(.+)$/);
     if (viaMatch) {
-      return { cat: "visual", val: prefix + "via:" + viaMatch[1] };
+      return attachExtra({ cat: "visual", val: prefix + "via:" + viaMatch[1] });
     }
     const toMatch = baseClass.match(/^to-(.+)$/);
     if (toMatch) {
-      return { cat: "visual", val: prefix + "to:" + toMatch[1] };
+      return attachExtra({ cat: "visual", val: prefix + "to:" + toMatch[1] });
     }
     const transitionMatch = baseClass.match(/^transition(?:-(all|colors|opacity|shadow|transform|none))?$/);
     if (transitionMatch) {
       const type = transitionMatch[1] || "all";
-      return { cat: "visual", val: prefix + "transition:" + type };
+      return attachExtra({ cat: "visual", val: prefix + "transition:" + type });
     }
     const durationMatch = baseClass.match(/^duration-(\d+)$/);
     if (durationMatch) {
@@ -459,17 +546,17 @@
       else if (ms <= 300) durationVal = "slow";
       else if (ms <= 500) durationVal = "slower";
       else durationVal = "lazy";
-      return { cat: "visual", val: prefix + "duration:" + durationVal };
+      return attachExtra({ cat: "visual", val: prefix + "duration:" + durationVal });
     }
     const easeMatch = baseClass.match(/^ease-(linear|in|out|in-out)$/);
     if (easeMatch) {
-      return { cat: "visual", val: prefix + "ease:" + easeMatch[1] };
+      return attachExtra({ cat: "visual", val: prefix + "ease:" + easeMatch[1] });
     }
     const ringMatch = baseClass.match(/^ring(?:-(\d+))?$/);
     if (ringMatch) {
       const width = ringMatch[1] || "3";
       if (width === "0") {
-        return { cat: "visual", val: prefix + "ring:none" };
+        return attachExtra({ cat: "visual", val: prefix + "ring:none" });
       }
       const ringScale = {
         "1": "thin",
@@ -479,100 +566,108 @@
         "8": "big"
       };
       const scale = ringScale[width] || `[${width}px]`;
-      return { cat: "visual", val: prefix + "ring:" + scale };
+      return attachExtra({ cat: "visual", val: prefix + "ring:" + scale });
     }
     const ringOffsetMatch = baseClass.match(/^ring-offset-(\d+)$/);
     if (ringOffsetMatch) {
-      return { cat: "visual", val: prefix + "ring-offset:" + ringOffsetMatch[1] };
+      return attachExtra({ cat: "visual", val: prefix + "ring-offset:" + ringOffsetMatch[1] });
     }
     const ringColorMatch = baseClass.match(/^ring-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);
     if (ringColorMatch) {
-      return { cat: "visual", val: prefix + "ring-color:" + ringColorMatch[1] };
+      return attachExtra({ cat: "visual", val: prefix + "ring-color:" + ringColorMatch[1] });
     }
     const divideXMatch = baseClass.match(/^divide-x-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);
     if (divideXMatch) {
-      return {
+      return attachExtra({
         cat: "visual",
         val: prefix + "divide-x:" + divideXMatch[1]
-      };
+      });
     }
     const divideYMatch = baseClass.match(/^divide-y-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);
     if (divideYMatch) {
-      return {
+      return attachExtra({
         cat: "visual",
         val: prefix + "divide-y:" + divideYMatch[1]
-      };
+      });
     }
     const divideColorMatch = baseClass.match(/^divide-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);
     if (divideColorMatch) {
-      return {
+      return attachExtra({
         cat: "visual",
         val: prefix + "divide:" + divideColorMatch[1]
-      };
+      });
     }
     const divideWidthMatch = baseClass.match(/^divide-(\d+)$/);
     if (divideWidthMatch) {
-      return {
+      return attachExtra({
         cat: "visual",
         val: prefix + "divide-w:" + getBorderWidth(divideWidthMatch[1], exact)
-      };
+      });
     }
     if (baseClass === "divide-x-reverse") {
-      return { cat: "visual", val: prefix + "divide-x:reverse" };
+      return attachExtra({ cat: "visual", val: prefix + "divide-x:reverse" });
     }
     if (baseClass === "divide-y-reverse") {
-      return { cat: "visual", val: prefix + "divide-y:reverse" };
+      return attachExtra({ cat: "visual", val: prefix + "divide-y:reverse" });
     }
     const divideXWidthMatch = baseClass.match(/^divide-x-(\d+)$/);
     if (divideXWidthMatch) {
-      return {
+      return attachExtra({
         cat: "visual",
         val: prefix + "divide-x-w:" + getBorderWidth(divideXWidthMatch[1], exact)
-      };
+      });
     }
     if (baseClass === "divide-x") {
-      return { cat: "visual", val: prefix + "divide-x-w:thin" };
+      return attachExtra({ cat: "visual", val: prefix + "divide-x-w:thin" });
     }
     if (baseClass === "divide-y") {
-      return { cat: "visual", val: prefix + "divide-y-w:thin" };
+      return attachExtra({ cat: "visual", val: prefix + "divide-y-w:thin" });
     }
     const divideYWidthMatch = baseClass.match(/^divide-y-(\d+)$/);
     if (divideYWidthMatch) {
-      return {
+      return attachExtra({
         cat: "visual",
         val: prefix + "divide-y-w:" + getBorderWidth(divideYWidthMatch[1], exact)
-      };
+      });
     }
     const divideStyleMatch = baseClass.match(/^divide-(solid|dashed|dotted|double|none)$/);
     if (divideStyleMatch) {
-      return {
+      return attachExtra({
         cat: "visual",
         val: prefix + "divide-style:" + divideStyleMatch[1]
         // Fixed category from 'color' to 'visual'
-      };
+      });
     }
     return null;
   }
   function convertClasses(classString, exact) {
     const classes = classString.trim().split(/\s+/).filter((c) => c);
-    const layout = [], space = [], visual = [], unknown = [];
+    const layout = [], space = [], visual = [], interact = [], listens = [], unknown = [];
+    const pushUnique = (arr, val) => {
+      if (!arr.includes(val)) arr.push(val);
+    };
     for (const cls of classes) {
       const result = convertClass(cls, exact);
       if (result) {
-        if (result.cat === "layout") layout.push(result.val);
-        else if (result.cat === "space") space.push(result.val);
-        else if (result.cat === "visual") visual.push(result.val);
+        const results = Array.isArray(result) ? result : [result];
+        for (const res of results) {
+          if (res.cat === "layout") pushUnique(layout, res.val);
+          else if (res.cat === "space") pushUnique(space, res.val);
+          else if (res.cat === "visual") pushUnique(visual, res.val);
+          else if (res.cat === "interact") pushUnique(interact, res.val);
+          else if (res.cat === "listens") pushUnique(listens, res.val);
+        }
       } else {
         unknown.push(cls);
       }
     }
-    return { layout, space, visual, unknown };
+    return { layout, space, visual, interact, listens, unknown };
   }
   function convertHTML(html, exact) {
     return html.replace(
       /class=(['"])([^"']+)\1/g,
       (match, quote, classValue) => {
-        const { layout, space, visual, unknown } = convertClasses(
+        const { layout, space, visual, interact, listens, unknown } = convertClasses(
           classValue,
           exact
         );
@@ -580,6 +675,8 @@
         if (layout.length) attrs.push(`layout="${layout.join(" ")}"`);
         if (space.length) attrs.push(`space="${space.join(" ")}"`);
         if (visual.length) attrs.push(`visual="${visual.join(" ")}"`);
+        if (interact.length) attrs.push(`interact="${interact.join(" ")}"`);
+        if (listens.length) attrs.push(`listens="${listens.join(" ")}"`);
         if (unknown.length) attrs.push(`class="${unknown.join(" ")}"`);
         return attrs.join(" ") || 'class=""';
       }

package/dist/senangstart-tw.min.js

@@ -1,2 +1,2 @@
 /* SenangStart TW v0.2.0 | MIT */
-(()=>{var $={0:"none",px:"thin",.5:"regular",1:"tiny",1.5:"tiny-2x",2:"small",2.5:"small-2x",3:"small-3x",3.5:"small-4x",4:"medium",5:"medium-2x",6:"medium-3x",7:"medium-4x",8:"large",9:"large-2x",10:"large-3x",11:"large-4x",12:"big",14:"big-2x",16:"big-3x",20:"big-4x",24:"giant",28:"giant-2x",32:"giant-3x",36:"giant-4x",40:"vast",44:"vast-2x",48:"vast-3x",52:"vast-4x",56:"vast-5x",60:"vast-6x",64:"vast-7x",72:"vast-8x",80:"vast-9x",96:"vast-10x",full:"[100%]",screen:"[100vw]",auto:"auto"},Q={none:"none",sm:"small","":"small",md:"small",lg:"medium",xl:"medium","2xl":"big","3xl":"big",full:"round"},Z={none:"none",sm:"small","":"small",md:"medium",lg:"big",xl:"giant","2xl":"giant",inner:"none"},_={xs:"mini",sm:"small",base:"base",lg:"large",xl:"big","2xl":"huge","3xl":"grand","4xl":"giant","5xl":"mount","6xl":"mega","7xl":"giga","8xl":"tera","9xl":"hero"},k={container:"container",flex:"flex","inline-flex":"inline-flex",grid:"grid","inline-grid":"inline-grid",block:"block","inline-block":"inline",hidden:"hidden","flex-row":"row","flex-col":"col","flex-row-reverse":"row-reverse","flex-col-reverse":"col-reverse","flex-wrap":"wrap","flex-nowrap":"nowrap","flex-wrap-reverse":"wrap-reverse","flex-grow":"grow","flex-grow-0":"grow-0",grow:"grow","grow-0":"grow-0","flex-shrink":"shrink","flex-shrink-0":"shrink-0",shrink:"shrink","shrink-0":"shrink-0","flex-1":"flex:1","flex-auto":"flex:auto","flex-initial":"flex:initial","flex-none":"flex:none","justify-start":"justify:start","justify-end":"justify:end","justify-center":"justify:center","justify-between":"justify:between","justify-around":"justify:around","justify-evenly":"justify:evenly","items-start":"items:start","items-end":"items:end","items-center":"items:center","items-baseline":"items:baseline","items-stretch":"items:stretch","self-auto":"self:auto","self-start":"self:start","self-end":"self:end","self-center":"self:center","self-stretch":"self:stretch",relative:"relative",absolute:"absolute",fixed:"fixed",sticky:"sticky",static:"static","overflow-auto":"overflow:auto","overflow-hidden":"overflow:hidden","overflow-visible":"overflow:visible","overflow-scroll":"overflow:scroll","object-contain":"object:contain","object-cover":"object:cover","object-fill":"object:fill","object-none":"object:none","object-scale-down":"object:scale-down"},M={italic:"italic","not-italic":"not-italic",antialiased:"antialiased",uppercase:"uppercase",lowercase:"lowercase",capitalize:"capitalize","normal-case":"normal-case",underline:"underline","line-through":"line-through","no-underline":"no-underline",truncate:"truncate","cursor-pointer":"cursor:pointer","cursor-default":"cursor:default","cursor-not-allowed":"cursor:not-allowed","select-none":"select:none","select-text":"select:text","select-all":"select:all"};function v(l,n){return l.startsWith("[")&&l.endsWith("]")?l:n?["full","screen","auto"].includes(l)?$[l]||`[${l}]`:`tw-${l}`:$[l]||`[${l}]`}var at={0:"none",1:"thin",2:"regular",3:"thick",4:"tiny",8:"small"};function p(l,n){return n?`tw-${l}`:at[l]||`[${l}px]`}function tt(l,n){let f=l.match(/^(sm:|md:|lg:|xl:|2xl:|hover:|focus:|focus-visible:|active:|disabled:|dark:)(.+)$/),e="",t=l;if(f){let a=f[1].slice(0,-1);["sm","md","lg","xl","2xl"].includes(a)?e=`tw-${a}:`:e=f[1],t=f[2]}if(k[t])return{cat:"layout",val:e+k[t]};if(M[t])return{cat:"visual",val:e+M[t]};let d=t.match(/^text-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);if(d)return{cat:"visual",val:e+"text:"+d[1]};if(["text-left","text-center","text-right","text-justify"].includes(t))return{cat:"visual",val:e+"text:"+t.replace("text-","")};let o=t.match(/^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/);if(o){let a=n?`tw-${o[1]}`:_[o[1]]||o[1];return{cat:"visual",val:e+"text-size:"+a}}let c=t.match(/^bg-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?|transparent|current|inherit)$/);if(c){let a=c[1];return a==="transparent"?{cat:"visual",val:e+"bg:[transparent]"}:a==="current"?{cat:"visual",val:e+"bg:[currentColor]"}:a==="inherit"?{cat:"visual",val:e+"bg:[inherit]"}:{cat:"visual",val:e+"bg:"+a}}let r=t.match(/^border-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);if(r)return{cat:"visual",val:e+"border:"+r[1]};let u=t.match(/^p([trblxy])?-(.+)$/);if(u){let a=u[1]?"-"+u[1]:"";return{cat:"space",val:e+"p"+a+":"+v(u[2],n)}}let m=t.match(/^-?m([trblxy])?-(\[.+\]|\d+\.?\d*|px|auto|full|screen)$/);if(m){let a=t.startsWith("-"),i=m[1]?"-"+m[1]:"",s=v(m[2],n);return a&&(s.startsWith("[")&&s.endsWith("]")?s=`[-${s.slice(1,-1)}]`:s=`-${s}`),{cat:"space",val:e+"m"+i+":"+s}}let g=t.match(/^gap-([xy])?-?(.+)$/);if(g){let a=g[1]?"-"+g[1]:"";return{cat:"space",val:e+"g"+a+":"+v(g[2],n)}}let w=t.match(/^(min-w|max-w|w)-(.+)$/);if(w){let a=w[1],i=w[2],x={max:"[max-content]",min:"[min-content]",fit:"[fit-content]",prose:"[65ch]"}[i]||v(i,n);return{cat:"space",val:e+a+":"+x}}let b=t.match(/^(min-h|max-h|h)-(.+)$/);if(b){let a=b[1],i=b[2],x={screen:"[100vh]",svh:"[100svh]",lvh:"[100lvh]",dvh:"[100dvh]",max:"[max-content]",min:"[min-content]",fit:"[fit-content]"}[i]||v(i,n);return{cat:"space",val:e+a+":"+x}}let j=t.match(/^rounded(?:-(.+))?$/);if(j){let a=j[1]||"",i=n?a===""?"tw-DEFAULT":`tw-${a}`:Q[a]||"medium";return{cat:"visual",val:e+"rounded:"+i}}let z=t.match(/^shadow(?:-(.+))?$/);if(z){let a=z[1]||"",i=n?a===""?"tw-DEFAULT":`tw-${a}`:Z[a]||"medium";return{cat:"visual",val:e+"shadow:"+i}}let W=t.match(/^font-(thin|extralight|light|normal|medium|semibold|bold|extrabold|black)$/);if(W)return{cat:"visual",val:e+"font:tw-"+W[1]};let h=t.match(/^border(?:-([trblxy]))?(?:-(\d+))?$/);if(h&&(h[2]||!h[1]&&t==="border")){let a=h[1]?"-"+h[1]+"-w":"-w",i=h[2]||"1";return{cat:"visual",val:e+"border"+a+":"+p(i,n)}}let y=t.match(/^(top|right|bottom|left|inset|inset-x|inset-y)-(\d+|px|auto|full|\[.+\])$/);if(y){let a=y[1],i=y[2];return i==="0"?i="none":i.startsWith("[")&&i.endsWith("]")||(i=v(i,n)),{cat:"layout",val:e+a+":"+i}}if(t==="outline-none")return{cat:"visual",val:e+"outline:none"};let S=t.match(/^order-(\d+|first|last|none)$/);if(S)return{cat:"layout",val:e+"order:"+S[1]};let C=t.match(/^grid-cols-(\d+|none)$/);if(C)return{cat:"layout",val:e+"grid-cols:"+C[1]};let V=t.match(/^col-span-(\d+|full)$/);if(V)return{cat:"layout",val:e+"col-span:"+V[1]};let T=t.match(/^grid-rows-(\d+|none)$/);if(T)return{cat:"layout",val:e+"grid-rows:"+T[1]};let H=t.match(/^row-span-(\d+|full)$/);if(H)return{cat:"layout",val:e+"row-span:"+H[1]};let L=t.match(/^opacity-(\d+)$/);if(L)return{cat:"visual",val:e+"opacity:"+L[1]};let q=t.match(/^bg-gradient-to-(t|tr|r|br|b|bl|l|tl)$/);if(q)return{cat:"visual",val:e+"bg-image:gradient-to-"+q[1]};let A=t.match(/^from-(.+)$/);if(A)return{cat:"visual",val:e+"from:"+A[1]};let D=t.match(/^via-(.+)$/);if(D)return{cat:"visual",val:e+"via:"+D[1]};let E=t.match(/^to-(.+)$/);if(E)return{cat:"visual",val:e+"to:"+E[1]};let F=t.match(/^transition(?:-(all|colors|opacity|shadow|transform|none))?$/);if(F){let a=F[1]||"all";return{cat:"visual",val:e+"transition:"+a}}let U=t.match(/^duration-(\d+)$/);if(U){let a=parseInt(U[1]),i;return a<=75?i="instant":a<=100?i="quick":a<=150?i="fast":a<=200?i="normal":a<=300?i="slow":a<=500?i="slower":i="lazy",{cat:"visual",val:e+"duration:"+i}}let X=t.match(/^ease-(linear|in|out|in-out)$/);if(X)return{cat:"visual",val:e+"ease:"+X[1]};let Y=t.match(/^ring(?:-(\d+))?$/);if(Y){let a=Y[1]||"3";if(a==="0")return{cat:"visual",val:e+"ring:none"};let s={1:"thin",2:"regular",3:"small",4:"medium",8:"big"}[a]||`[${a}px]`;return{cat:"visual",val:e+"ring:"+s}}let B=t.match(/^ring-offset-(\d+)$/);if(B)return{cat:"visual",val:e+"ring-offset:"+B[1]};let G=t.match(/^ring-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);if(G)return{cat:"visual",val:e+"ring-color:"+G[1]};let I=t.match(/^divide-x-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);if(I)return{cat:"visual",val:e+"divide-x:"+I[1]};let K=t.match(/^divide-y-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);if(K)return{cat:"visual",val:e+"divide-y:"+K[1]};let N=t.match(/^divide-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);if(N)return{cat:"visual",val:e+"divide:"+N[1]};let O=t.match(/^divide-(\d+)$/);if(O)return{cat:"visual",val:e+"divide-w:"+p(O[1],n)};if(t==="divide-x-reverse")return{cat:"visual",val:e+"divide-x:reverse"};if(t==="divide-y-reverse")return{cat:"visual",val:e+"divide-y:reverse"};let P=t.match(/^divide-x-(\d+)$/);if(P)return{cat:"visual",val:e+"divide-x-w:"+p(P[1],n)};if(t==="divide-x")return{cat:"visual",val:e+"divide-x-w:thin"};if(t==="divide-y")return{cat:"visual",val:e+"divide-y-w:thin"};let R=t.match(/^divide-y-(\d+)$/);if(R)return{cat:"visual",val:e+"divide-y-w:"+p(R[1],n)};let J=t.match(/^divide-(solid|dashed|dotted|double|none)$/);return J?{cat:"visual",val:e+"divide-style:"+J[1]}:null}function et(l,n){let f=l.trim().split(/\s+/).filter(c=>c),e=[],t=[],d=[],o=[];for(let c of f){let r=tt(c,n);r?r.cat==="layout"?e.push(r.val):r.cat==="space"?t.push(r.val):r.cat==="visual"&&d.push(r.val):o.push(c)}return{layout:e,space:t,visual:d,unknown:o}}function it(l,n){return l.replace(/class=(['"])([^"']+)\1/g,(f,e,t)=>{let{layout:d,space:o,visual:c,unknown:r}=et(t,n),u=[];return d.length&&u.push(`layout="${d.join(" ")}"`),o.length&&u.push(`space="${o.join(" ")}"`),c.length&&u.push(`visual="${c.join(" ")}"`),r.length&&u.push(`class="${r.join(" ")}"`),u.join(" ")||'class=""'})}typeof window<"u"&&(window.SenangStartTW={convertClass:tt,convertClasses:et,convertHTML:it,scales:{spacing:$,radius:Q,shadow:Z,fontSize:_},mappings:{layout:k,visual:M}});})();
+(()=>{var S={0:"none",px:"thin",.5:"regular",1:"tiny",1.5:"tiny-2x",2:"small",2.5:"small-2x",3:"small-3x",3.5:"small-4x",4:"medium",5:"medium-2x",6:"medium-3x",7:"medium-4x",8:"large",9:"large-2x",10:"large-3x",11:"large-4x",12:"big",14:"big-2x",16:"big-3x",20:"big-4x",24:"giant",28:"giant-2x",32:"giant-3x",36:"giant-4x",40:"vast",44:"vast-2x",48:"vast-3x",52:"vast-4x",56:"vast-5x",60:"vast-6x",64:"vast-7x",72:"vast-8x",80:"vast-9x",96:"vast-10x",full:"[100%]",screen:"[100vw]",auto:"auto"},ae={none:"none",sm:"small","":"small",md:"small",lg:"medium",xl:"medium","2xl":"big","3xl":"big",full:"round"},ie={none:"none",sm:"small","":"small",md:"medium",lg:"big",xl:"giant","2xl":"giant",inner:"none"},re={xs:"mini",sm:"small",base:"base",lg:"large",xl:"big","2xl":"huge","3xl":"grand","4xl":"giant","5xl":"mount","6xl":"mega","7xl":"giga","8xl":"tera","9xl":"hero"},$={"1/2":"half","1/3":"third","2/3":"third-2x","1/4":"quarter","2/4":"half","3/4":"quarter-3x",full:"full"},z={container:"container",flex:"flex","inline-flex":"inline-flex",grid:"grid","inline-grid":"inline-grid",block:"block","inline-block":"inline",hidden:"hidden","flex-row":"row","flex-col":"col","flex-row-reverse":"row-reverse","flex-col-reverse":"col-reverse","flex-wrap":"wrap","flex-nowrap":"nowrap","flex-wrap-reverse":"wrap-reverse","flex-grow":"grow","flex-grow-0":"grow-0",grow:"grow","grow-0":"grow-0","flex-shrink":"shrink","flex-shrink-0":"shrink-0",shrink:"shrink","shrink-0":"shrink-0","flex-1":"flex:1","flex-auto":"flex:auto","flex-initial":"flex:initial","flex-none":"flex:none","justify-start":"justify:start","justify-end":"justify:end","justify-center":"justify:center","justify-between":"justify:between","justify-around":"justify:around","justify-evenly":"justify:evenly","items-start":"items:start","items-end":"items:end","items-center":"items:center","items-baseline":"items:baseline","items-stretch":"items:stretch","self-auto":"self:auto","self-start":"self:start","self-end":"self:end","self-center":"self:center","self-stretch":"self:stretch",relative:"relative",absolute:"absolute",fixed:"fixed",sticky:"sticky",static:"static","overflow-auto":"overflow:auto","overflow-hidden":"overflow:hidden","overflow-visible":"overflow:visible","overflow-scroll":"overflow:scroll","object-contain":"object:contain","object-cover":"object:cover","object-fill":"object:fill","object-none":"object:none","object-scale-down":"object:scale-down"},C={italic:"italic","not-italic":"not-italic",antialiased:"antialiased",uppercase:"uppercase",lowercase:"lowercase",capitalize:"capitalize","normal-case":"normal-case",underline:"underline","line-through":"line-through","no-underline":"no-underline",truncate:"truncate","cursor-pointer":"cursor:pointer","cursor-default":"cursor:default","cursor-not-allowed":"cursor:not-allowed","select-none":"select:none","select-text":"select:text","select-all":"select:all"};function g(s,l){return s.startsWith("[")&&s.endsWith("]")?s:l?["full","screen","auto"].includes(s)?S[s]||`[${s}]`:`tw-${s}`:S[s]||`[${s}]`}var se={0:"none",1:"thin",2:"regular",3:"thick",4:"tiny",8:"small"};function k(s,l){return l?`tw-${s}`:se[s]||`[${s}px]`}function ne(s,l){let m=s.match(/^(sm:|md:|lg:|xl:|2xl:|hover:|focus:|focus-visible:|active:|disabled:|dark:|group-hover:|peer-hover:|group-focus:|peer-focus:|group-active:|peer-active:|peer-check:|group-open:|peer-open:)(.+)$/),a="",t=s,f=null;if(m){let e=m[1].slice(0,-1);if(["sm","md","lg","xl","2xl"].includes(e))a=`tw-${e}:`;else if(e.startsWith("group-")||e.startsWith("peer-")){let r={hover:"hover",focus:"focus",active:"active",open:"expanded",check:"checked"},n=e.split("-")[1];a=`${r[n]||n}:`,e.startsWith("peer-")&&(f={cat:"listens",val:"peer"})}else a=m[1];t=m[2]}if(t==="group")return{cat:"layout",val:"hoverable focusable pressable expandable"};if(t==="peer")return[{cat:"layout",val:"hoverable focusable pressable expandable"},{cat:"interact",val:"peer"}];let i=e=>e?f?Array.isArray(e)?[...e,f]:[e,f]:e:null;if(z[t])return i({cat:"layout",val:a+z[t]});if(C[t])return i({cat:"visual",val:a+C[t]});let v=t.match(/^text-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);if(v)return i({cat:"visual",val:a+"text:"+v[1]});if(["text-left","text-center","text-right","text-justify"].includes(t))return i({cat:"visual",val:a+"text:"+t.replace("text-","")});let h=t.match(/^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/);if(h){let e=l?`tw-${h[1]}`:re[h[1]]||h[1];return i({cat:"visual",val:a+"text-size:"+e})}let d=t.match(/^bg-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?|transparent|current|inherit)$/);if(d){let e=d[1];return i(e==="transparent"?{cat:"visual",val:a+"bg:transparent"}:e==="current"?{cat:"visual",val:a+"bg:currentColor"}:e==="inherit"?{cat:"visual",val:a+"bg:inherit"}:{cat:"visual",val:a+"bg:"+e})}let u=t.match(/^border-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black|transparent|current|inherit)(?:-\d+)?)$/);if(u){let e=u[1];return e==="current"&&(e="currentColor"),i({cat:"visual",val:a+"border:"+e})}let o=t.match(/^border-([trbl])-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black|transparent|current|inherit)(?:-\d+)?)$/);if(o){let e=o[1],r=o[2];return r==="current"&&(r="currentColor"),i({cat:"visual",val:a+`border-${e}:${r}`})}let p=t.match(/^p([trblxy])?-(.+)$/);if(p){let e=p[1]?"-"+p[1]:"";return i({cat:"space",val:a+"p"+e+":"+g(p[2],l)})}let c=t.match(/^-?m([trblxy])?-(\[.+\]|\d+\.?\d*|px|auto|full|screen)$/);if(c){let e=t.startsWith("-"),r=c[1]?"-"+c[1]:"",n=g(c[2],l);return e&&(n.startsWith("[")&&n.endsWith("]")?n=`[-${n.slice(1,-1)}]`:n=`-${n}`),i({cat:"space",val:a+"m"+r+":"+n})}let w=t.match(/^gap-([xy])?-?(.+)$/);if(w){let e=w[1]?"-"+w[1]:"";return i({cat:"space",val:a+"g"+e+":"+g(w[2],l)})}let M=t.match(/^(min-w|max-w|w)-(.+)$/);if(M){let e=M[1],r=M[2],b={max:"[max-content]",min:"[min-content]",fit:"[fit-content]",prose:"[65ch]"}[r]||g(r,l);return i({cat:"space",val:a+e+":"+b})}let j=t.match(/^(min-h|max-h|h)-(.+)$/);if(j){let e=j[1],r=j[2],b={screen:"[100vh]",svh:"[100svh]",lvh:"[100lvh]",dvh:"[100dvh]",max:"[max-content]",min:"[min-content]",fit:"[fit-content]"}[r]||g(r,l);return i({cat:"space",val:a+e+":"+b})}let V=t.match(/^rounded(?:-(.+))?$/);if(V){let e=V[1]||"",r=l?e===""?"tw-DEFAULT":`tw-${e}`:ae[e]||"medium";return i({cat:"visual",val:a+"rounded:"+r})}let A=t.match(/^shadow(?:-(.+))?$/);if(A){let e=A[1]||"",r=l?e===""?"tw-DEFAULT":`tw-${e}`:ie[e]||"medium";return i({cat:"visual",val:a+"shadow:"+r})}let q=t.match(/^font-(thin|extralight|light|normal|medium|semibold|bold|extrabold|black)$/);if(q)return i({cat:"visual",val:a+"font:tw-"+q[1]});let x=t.match(/^border(?:-([trblxy]))?(?:-(\d+))?$/);if(x&&(x[2]||!x[1]&&t==="border")){let e=x[1]?"-"+x[1]+"-w":"-w",r=x[2]||"1";return i({cat:"visual",val:a+"border"+e+":"+k(r,l)})}let W=t.match(/^(top|right|bottom|left|inset|inset-x|inset-y)-(\d+|px|auto|full|1\/2|1\/3|2\/3|1\/4|2\/4|3\/4|\[.+\])$/);if(W){let e=W[1],r=W[2];return r==="0"?r="none":r.startsWith("[")&&r.endsWith("]")||($[r]?r=$[r]:r=g(r,l)),i({cat:"layout",val:a+e+":"+r})}let y=t.match(/^(-?)translate-([xy])-(\d+|px|full|1\/2|1\/3|2\/3|1\/4|2\/4|3\/4|\[.+\])$/);if(y){let e=y[1]==="-",r=y[2],n=y[3];return n.startsWith("[")&&n.endsWith("]")?e&&(n=`[-${n.slice(1,-1)}]`):$[n]?(n=$[n],e&&(n=`-${n}`)):n==="0"?n="0":(n=g(n,l),e&&(n=`-${n}`)),i({cat:"visual",val:a+`translate-${r}:${n}`})}if(t==="outline-none")return i({cat:"visual",val:a+"outline:none"});let T=t.match(/^order-(\d+|first|last|none)$/);if(T)return i({cat:"layout",val:a+"order:"+T[1]});let E=t.match(/^grid-cols-(\d+|none)$/);if(E)return i({cat:"layout",val:a+"grid-cols:"+E[1]});let H=t.match(/^col-span-(\d+|full)$/);if(H)return i({cat:"layout",val:a+"col-span:"+H[1]});let L=t.match(/^grid-rows-(\d+|none)$/);if(L)return i({cat:"layout",val:a+"grid-rows:"+L[1]});let U=t.match(/^row-span-(\d+|full)$/);if(U)return i({cat:"layout",val:a+"row-span:"+U[1]});let D=t.match(/^opacity-(\d+)$/);if(D)return i({cat:"visual",val:a+"opacity:"+D[1]});let F=t.match(/^bg-gradient-to-(t|tr|r|br|b|bl|l|tl)$/);if(F)return i({cat:"visual",val:a+"bg-image:gradient-to-"+F[1]});let N=t.match(/^from-(.+)$/);if(N)return i({cat:"visual",val:a+"from:"+N[1]});let X=t.match(/^via-(.+)$/);if(X)return i({cat:"visual",val:a+"via:"+X[1]});let Y=t.match(/^to-(.+)$/);if(Y)return i({cat:"visual",val:a+"to:"+Y[1]});let B=t.match(/^transition(?:-(all|colors|opacity|shadow|transform|none))?$/);if(B){let e=B[1]||"all";return i({cat:"visual",val:a+"transition:"+e})}let G=t.match(/^duration-(\d+)$/);if(G){let e=parseInt(G[1]),r;return e<=75?r="instant":e<=100?r="quick":e<=150?r="fast":e<=200?r="normal":e<=300?r="slow":e<=500?r="slower":r="lazy",i({cat:"visual",val:a+"duration:"+r})}let I=t.match(/^ease-(linear|in|out|in-out)$/);if(I)return i({cat:"visual",val:a+"ease:"+I[1]});let K=t.match(/^ring(?:-(\d+))?$/);if(K){let e=K[1]||"3";if(e==="0")return i({cat:"visual",val:a+"ring:none"});let n={1:"thin",2:"regular",3:"small",4:"medium",8:"big"}[e]||`[${e}px]`;return i({cat:"visual",val:a+"ring:"+n})}let O=t.match(/^ring-offset-(\d+)$/);if(O)return i({cat:"visual",val:a+"ring-offset:"+O[1]});let P=t.match(/^ring-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);if(P)return i({cat:"visual",val:a+"ring-color:"+P[1]});let R=t.match(/^divide-x-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);if(R)return i({cat:"visual",val:a+"divide-x:"+R[1]});let J=t.match(/^divide-y-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);if(J)return i({cat:"visual",val:a+"divide-y:"+J[1]});let Q=t.match(/^divide-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);if(Q)return i({cat:"visual",val:a+"divide:"+Q[1]});let Z=t.match(/^divide-(\d+)$/);if(Z)return i({cat:"visual",val:a+"divide-w:"+k(Z[1],l)});if(t==="divide-x-reverse")return i({cat:"visual",val:a+"divide-x:reverse"});if(t==="divide-y-reverse")return i({cat:"visual",val:a+"divide-y:reverse"});let _=t.match(/^divide-x-(\d+)$/);if(_)return i({cat:"visual",val:a+"divide-x-w:"+k(_[1],l)});if(t==="divide-x")return i({cat:"visual",val:a+"divide-x-w:thin"});if(t==="divide-y")return i({cat:"visual",val:a+"divide-y-w:thin"});let ee=t.match(/^divide-y-(\d+)$/);if(ee)return i({cat:"visual",val:a+"divide-y-w:"+k(ee[1],l)});let te=t.match(/^divide-(solid|dashed|dotted|double|none)$/);return te?i({cat:"visual",val:a+"divide-style:"+te[1]}):null}function le(s,l){let m=s.trim().split(/\s+/).filter(u=>u),a=[],t=[],f=[],i=[],v=[],h=[],d=(u,o)=>{u.includes(o)||u.push(o)};for(let u of m){let o=ne(u,l);if(o){let p=Array.isArray(o)?o:[o];for(let c of p)c.cat==="layout"?d(a,c.val):c.cat==="space"?d(t,c.val):c.cat==="visual"?d(f,c.val):c.cat==="interact"?d(i,c.val):c.cat==="listens"&&d(v,c.val)}else h.push(u)}return{layout:a,space:t,visual:f,interact:i,listens:v,unknown:h}}function oe(s,l){return s.replace(/class=(['"])([^"']+)\1/g,(m,a,t)=>{let{layout:f,space:i,visual:v,interact:h,listens:d,unknown:u}=le(t,l),o=[];return f.length&&o.push(`layout="${f.join(" ")}"`),i.length&&o.push(`space="${i.join(" ")}"`),v.length&&o.push(`visual="${v.join(" ")}"`),h.length&&o.push(`interact="${h.join(" ")}"`),d.length&&o.push(`listens="${d.join(" ")}"`),u.length&&o.push(`class="${u.join(" ")}"`),o.join(" ")||'class=""'})}typeof window<"u"&&(window.SenangStartTW={convertClass:ne,convertClasses:le,convertHTML:oe,scales:{spacing:S,radius:ae,shadow:ie,fontSize:re},mappings:{layout:z,visual:C}});})();

package/docs/guide/configuration.md

@@ -78,7 +78,7 @@ theme: {
 ```javascript
 theme: {
   colors: {
-    'brand': '#8B5CF6',
+    'brand': '#38BDF8',
     'accent': '#EC4899',
     'custom': '#FF5733'
   }
@@ -131,7 +131,7 @@ export default {
       'huge': '256px'
     },
     colors: {
-      'brand': '#8B5CF6',
+      'brand': '#38BDF8',
       'accent': '#EC4899'
     },
     screens: {

package/docs/guide/states.md

@@ -160,3 +160,63 @@ Always ensure sufficient color contrast for hover and focus states. The `:focus`
   Accessible focus ring
 </button>
 ```
+
+## State Capabilities & Interaction
+
+SenangStart allows elements to react to parent ("Group") or sibling ("Peer") states. This works across **all three attributes**.
+
+### Supported Triggers
+
+Add these to the `layout` attribute of the parent/trigger element:
+
+| Capability | Trigger State |
+|------------|---------------|
+| `layout="hoverable"` | `:hover` |
+| `layout="focusable"` | `:focus-within` |
+| `layout="pressable"` | `:active` |
+| `layout="expandable"` | `[aria-expanded="true"]` |
+| `layout="selectable"` | `[aria-selected="true"]` |
+| `layout="disabled"` | Disables all triggers |
+
+### Cross-Attribute Example
+
+State variants like `hover:`, `focus:`, etc., apply to **any attribute** (`layout`, `space`, `visual`) when nested inside a capable group.
+
+```html
+<!-- Parent has "hoverable" capability -->
+<div layout="flex hoverable" space="p:medium" visual="bg:white shadow:medium">
+  
+  <!-- Layout Reaction: Hidden by default, becomes flex on parent hover -->
+  <div layout="hidden hover:flex items:center">
+    <span>Revealed!</span>
+  </div>
+
+  <!-- Space Reaction: Padding increases on parent hover -->
+  <button space="p:small hover:p:medium">
+    Expand Me
+  </button>
+  
+  <!-- Visual Reaction: Color changes on parent hover -->
+  <p visual="text:grey hover:text:primary">
+    Highlight Me
+  </p>
+  
+</div>
+```
+
+### Peer Interactions
+
+Use `interact="[id]"` on the trigger and `listens="[id]"` on the receiver.
+
+```html
+<button layout="hoverable" interact="menu-trigger">
+  Hover me
+</button>
+
+<div 
+  layout="absolute hidden hover:block" 
+  listens="menu-trigger"
+>
+  Dropdown Menu
+</div>
+```