synthesisui 0.16.511 → 0.16.512

package/dist/cn-codegen.js

@@ -150,7 +150,7 @@ function borderGroup(variants: string, rest: string, cls: string): string {
     (tail.startsWith("[") && !isArbitraryColor(tail));
   if (isWidth) return \`\${variants}border\${side}-width\`;
   if (BORDER_STYLES.has(tail)) return \`\${variants}border-style\`;
-  if (COLORS.has(tail) || COLOR_KEYWORDS.has(tail) || isArbitraryColor(tail)) {
+  if (COLORS.has(tail) || COLOR_KEYWORDS.has(tail) || isPaletteStep(tail) || isArbitraryColor(tail)) {
     return \`\${variants}border\${side}-color\`;
   }
   return \`\${variants}\${cls}\`;
@@ -166,9 +166,32 @@ function isArbitraryColor(v: string): boolean {
  * Returning the class itself is the safe answer: an unknown class then collides
  * only with an identical one, so nothing is ever dropped by mistake.
  */
+/**
+ * THE LAST COLON OUTSIDE BRACKETS ends the variants. \`data-[disabled]:[opacity:0.5]\` has a colon INSIDE the
+ * arbitrary property, and \`lastIndexOf\` cut there.
+ */
+function variantCut(cls: string): number {
+  let depth = 0;
+  let cut = -1;
+  for (let i = 0; i < cls.length; i++) {
+    const ch = cls[i];
+    if (ch === "[") depth++;
+    else if (ch === "]") depth--;
+    else if (ch === ":" && depth === 0) cut = i;
+  }
+  return cut;
+}
+
+/** A palette colour with a step - \`sand-900\`, \`moss-600\` - is a colour even when the system does not name it. */
+function isPaletteStep(v: string): boolean {
+  return /^[a-z]+(-[a-z]+)*-[0-9]{2,3}$/.test(v);
+}
+
+const OUTLINE_STYLES = new Set(["none", "dashed", "dotted", "double", "hidden"]);
+
 function groupOf(cls: string): string {
   // A variant is part of the identity: \`hover:bg-x\` must not replace \`bg-y\`.
-  const cut = cls.lastIndexOf(":");
+  const cut = variantCut(cls);
   const variants = cut === -1 ? "" : cls.slice(0, cut + 1);
   let base = cut === -1 ? cls : cls.slice(cut + 1);
 
@@ -179,6 +202,10 @@ function groupOf(cls: string): string {
 
   if (DISPLAYS.has(base)) return \`\${variants}display\`;
 
+  // \`[transition:…]\` sets exactly the property it names - grouped by it, so the caller's replaces the base's.
+  const arbitrary = /^\\[([a-z-]+):/.exec(base);
+  if (arbitrary) return \`\${variants}\${arbitrary[1]}\`;
+
   const dash = base.indexOf("-");
   const head = dash === -1 ? base : base.slice(0, dash);
   const rest = dash === -1 ? "" : base.slice(dash + 1);
@@ -197,7 +224,7 @@ function groupOf(cls: string): string {
   // The two families a prefix cannot settle, answered by this system's names.
   if (head === "text") {
     if (TEXT_SIZES.has(rest)) return \`\${variants}font-size\`;
-    if (COLORS.has(rest) || rest.startsWith("[")) return \`\${variants}text-color\`;
+    if (COLORS.has(rest) || isPaletteStep(rest) || rest.startsWith("[")) return \`\${variants}text-color\`;
     return \`\${variants}\${cls}\`;
   }
   if (head === "font") {
@@ -206,6 +233,16 @@ function groupOf(cls: string): string {
     return \`\${variants}\${cls}\`;
   }
   if (head === "border") return borderGroup(variants, rest, cls);
+  // Every \`transition-*\` sets transition-property, and so does \`[transition:…]\`.
+  if (head === "transition") return \`\${variants}transition\`;
+  if (head === "outline") {
+    if (rest.startsWith("offset")) return \`\${variants}outline-offset\`;
+    if (rest === "" || OUTLINE_STYLES.has(rest)) return \`\${variants}outline-style\`;
+    if ([...rest].every((ch) => ch >= "0" && ch <= "9")) return \`\${variants}outline-width\`;
+    if (COLORS.has(rest) || COLOR_KEYWORDS.has(rest) || isPaletteStep(rest) || isArbitraryColor(rest))
+      return \`\${variants}outline-color\`;
+    return \`\${variants}\${cls}\`;
+  }
 
   for (const p of PREFIXES) {
     if (base === p || base.startsWith(\`\${p}-\`)) return \`\${variants}\${p}\`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "synthesisui",
-  "version": "0.16.511",
+  "version": "0.16.512",
   "description": "Bring SynthesisUI design systems into any project - tokens, typed components, whole pages and an agent-ready CLAUDE.md manifest.",
   "type": "module",
   "bin": {