vibe-design-system 2.5.44 → 2.5.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.5.44",
+  "version": "2.5.46",
   "description": "Auto-generate design systems for vibe coding projects",
   "type": "module",
   "bin": {

package/vds-core-template/story-generator.mjs

@@ -846,22 +846,18 @@ function detectExportStyle(source, componentName) {
 function buildSpecialStories(componentName, variants) {
   const lines = [];
 
-  // Button: show used variant/size/asChild combinations from buttonUsage (if available)
+  // Button: show a simple UsedVariants story based on known variants (no JSON injection to avoid \\u escape issues in Storybook)
   if (componentName === "Button") {
-    const usage = FOUNDATIONS_DATA?.buttonUsage;
-    const combos = Array.isArray(usage?.combos) && usage.combos.length
-      ? usage.combos
-      : (variants && variants.length ? variants.map((v) => ({ key: v, variant: v, size: "default", asChild: false, count: 1 })) : []);
+    const vs = variants && variants.length ? variants : ["default", "secondary", "destructive", "outline"];
+    lines.push(`const BUTTON_VARIANTS = [${vs.map((v) => `"${v}"`).join(", ")}];`);
+    lines.push(`const BUTTON_SIZES = ["default", "sm", "lg"];`);
+    lines.push("");
     lines.push(`export const UsedVariants: Story = {`);
     lines.push(`  render: () => (`);
     lines.push(`    <div style={{ display: "flex", flexWrap: "wrap", gap: 12 }}>`);
-    lines.push(`      {${JSON.stringify(combos)}.map((c) => (`);
-    lines.push(`        <ComponentRef`);
-    lines.push(`          key={c.key}`);
-    lines.push(`          variant={c.variant}`);
-    lines.push(`          size={c.size}`);
-    lines.push(`        >`);
-    lines.push(`          {c.variant}{c.size !== "default" ? " · " + c.size : ""}`);
+    lines.push(`      {BUTTON_VARIANTS.map((variant) => (`);
+    lines.push(`        <ComponentRef key={variant} variant={variant}>`);
+    lines.push(`          {variant}`);
     lines.push(`        </ComponentRef>`);
     lines.push(`      ))}`);
     lines.push(`    </div>`);