@godxjp/ui-mcp 0.4.0 → 0.4.2

package/dist/index.js

@@ -150,10 +150,12 @@ export function CrmLayout({ children }: { children: React.ReactNode }) {
       { name: "product", type: "{ name: string; role?: string; color?: string }", description: "Product/workspace block at the top." },
       { name: "brand", type: "ReactNode", description: "Custom brand node replacing the product block." },
       { name: "collapsed", type: "boolean", defaultValue: "false", description: "Icon-only mode; labels/section headings hidden." },
-      { name: "footer", type: "ReactNode", description: "Bottom slot (user info, logout)." }
+      { name: "footer", type: "ReactNode", description: "Bottom slot (user info, logout). The .sb-footer wrapper supplies the top border + padding; YOUR content must use SEMANTIC token classes \u2014 `text-muted-foreground text-xs` outer with a `text-foreground font-medium` primary line. Do NOT use raw `opacity-*` / arbitrary `text-[11px]` (washed-out, off-design)." }
     ],
     example: `import { Sidebar } from "@godxjp/ui/layout";
-import { LayoutDashboard, Users } from "lucide-react";
+import { Stack } from "@godxjp/ui/layout";
+import { Button } from "@godxjp/ui/general";
+import { LayoutDashboard, Users, LogOut } from "lucide-react";
 import { router, usePage } from "@inertiajs/react";
 
 export function AppSidebar() {
@@ -167,11 +169,23 @@ export function AppSidebar() {
         { id: "/members", label: "\u4F1A\u54E1\u7BA1\u7406", icon: Users },
       ] }]}
       product={{ name: "JOVY CRM", role: "\u672C\u90E8" }}
+      footer={
+        // Canonical footer: semantic tokens only (see Sidebar story).
+        <Stack gap="sm">
+          <div className="text-muted-foreground text-xs">
+            <div className="text-foreground font-medium">\u5C71\u7530 \u82B1\u5B50</div>
+            <div>ABC\u30D5\u30A1\u30FC\u30DE\u30B7\u30FC</div>
+          </div>
+          <Button variant="ghost" size="sm" className="w-full justify-start" onClick={() => router.post("/logout")}>
+            <LogOut className="size-4" />\u30ED\u30B0\u30A2\u30A6\u30C8
+          </Button>
+        </Stack>
+      }
     />
   );
 }`,
     storyPath: "layout/Sidebar.stories.tsx",
-    rules: [23]
+    rules: [2, 23]
   },
   {
     name: "Topbar",
@@ -338,23 +352,27 @@ const columns: ColumnDef<Member>[] = [
   {
     name: "CardStat",
     group: "data-display",
-    tagline: "KPI tile with label, value, optional hint and delta. NO accent prop (accent is a Card prop).",
+    tagline: "KPI tile. \u26A0\uFE0F CardStat IS ALREADY a bordered Card \u2014 render it DIRECTLY in ResponsiveGrid. NEVER wrap it in <Card>/<CardContent> (that double-borders it \u2192 looks too thick). NO accent prop (accent is a Card prop).",
     props: [
       { name: "label", type: "ReactNode", required: true, description: "Metric name." },
       { name: "value", type: "ReactNode", required: true, description: "Metric value (string/number/ReactNode)." },
       { name: "hint", type: "ReactNode", description: "Secondary context below the value." },
-      { name: "delta", type: "ReactNode", description: "Compact trend text beside the value." },
+      { name: "delta", type: "ReactNode", description: "Compact trend text beside the value. Sign-aware tone (+ green / - red)." },
       { name: "layout", type: '"stacked" | "inline"', defaultValue: '"stacked"', description: "stacked = label over value; inline = label left / value right." },
       { name: "align", type: '"start" | "end"', description: "Align the metric group." }
     ],
     example: `import { CardStat } from "@godxjp/ui/data-display";
 import { ResponsiveGrid } from "@godxjp/ui/layout";
 
+// \u2705 CardStat sits directly in the grid \u2014 it draws its own card + border.
 <ResponsiveGrid columns={3}>
   <CardStat label="\u7DCF\u4F1A\u54E1\u6570" value="12,450" hint="\u5148\u6708\u6BD4 +3%" />
   <CardStat label="\u6708\u6B21\u58F2\u4E0A" value="\xA58,200,000" delta="+12%" />
   <CardStat label="\u5229\u7528\u7387" value="68.4%" />
-</ResponsiveGrid>`,
+</ResponsiveGrid>
+
+// \u274C Double border \u2014 do NOT wrap CardStat in a Card:
+// <Card><CardContent><CardStat label="x" value="1" /></CardContent></Card>`,
     storyPath: "data-display/CardStat.stories.tsx",
     rules: []
   },