@calibrate-ds/generator-react 0.1.88 → 0.1.90

package/dist/components/generate-component-css.js

@@ -102,8 +102,21 @@ export function generateComponentCss(component, lookup) {
         }
     }
     if (component.styleMetadata) {
+        // B-2: multiple style slots can map to the same CSS property (e.g. `text`,
+        // `fill`, `iconColor` all → `color`). Emitting each produced a DUPLICATE
+        // declaration (invalid/confusing). Track emitted properties; first slot wins.
+        const emittedProps = new Set();
         for (const [key, val] of Object.entries(component.styleMetadata)) {
             const cssProperty = CSS_PROPERTY_MAP[key] || normalizeCssVarName(key);
+            if (emittedProps.has(cssProperty))
+                continue;
+            emittedProps.add(cssProperty);
+            // B-2: `border` is a shorthand and needs `width style` before the color —
+            // a bare `border: <color>` (or `border: var(--x, #hex)`) is invalid and the
+            // whole declaration is dropped, leaving no border. The styleMetadata border
+            // slot only carries the stroke color, so wrap every border value in
+            // `1px solid`. Applies to BOTH the token-bound path below and the raw path.
+            const asBorder = (valueExpr) => `  border: 1px solid ${valueExpr};\n`;
             // T3: token-bound color/style — emit var(--ptb-collection-token, raw-hex) with hex fallback.
             // tv.cssVar is the canonical var name from getPTBTokenVariableName (collection-aware).
             if (val !== null && typeof val === "object" && "token" in val) {
@@ -112,19 +125,19 @@ export function generateComponentCss(component, lookup) {
                 // cssVar. Fabricating `--ptb-${token}` (no collection tier) produces a
                 // reference that does not exist in tokens.css. When cssVar is absent, emit
                 // the concrete resolved value directly.
-                if (tv.cssVar) {
-                    const fallback = typeof tv.value === "number" ? `${tv.value}px` : tv.value;
-                    cssContent += `  ${cssProperty}: var(${tv.cssVar}, ${fallback});\n`;
-                }
-                else {
-                    cssContent += `  ${cssProperty}: ${tv.value};\n`;
-                }
+                const valueExpr = tv.cssVar
+                    ? `var(${tv.cssVar}, ${typeof tv.value === "number" ? `${tv.value}px` : tv.value})`
+                    : `${tv.value}`;
+                cssContent += cssProperty === "border"
+                    ? asBorder(valueExpr)
+                    : `  ${cssProperty}: ${valueExpr};\n`;
                 continue;
             }
             // Token alias reference: `{token.path}` → CSS custom property
             if (typeof val === "string" && val.startsWith("{") && val.endsWith("}")) {
                 const tokenAlias = val.slice(1, -1);
-                cssContent += `  ${cssProperty}: var(--ptb-${normalizeCssVarName(tokenAlias)});\n`;
+                const aliasVar = `var(--ptb-${normalizeCssVarName(tokenAlias)})`;
+                cssContent += cssProperty === "border" ? asBorder(aliasVar) : `  ${cssProperty}: ${aliasVar};\n`;
                 continue;
             }
             // Fixed pixel dimensions on root containers produce non-responsive layouts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calibrate-ds/generator-react",
-  "version": "0.1.88",
+  "version": "0.1.90",
   "license": "FSL-1.1-MIT",
   "type": "module",
   "main": "dist/index.js",
@@ -35,8 +35,8 @@
   },
   "dependencies": {
     "react": "^19.0.0",
-    "@calibrate-ds/core": "^0.1.88",
-    "@calibrate-ds/shared-types": "^0.1.88"
+    "@calibrate-ds/shared-types": "^0.1.90",
+    "@calibrate-ds/core": "^0.1.90"
   },
   "devDependencies": {
     "typescript": "^5.7.3",