@kjaniec-dev/ui-mcp 0.5.0 → 0.6.0

package/data/components.json

@@ -212,7 +212,7 @@
       }
     ],
     "cva": null,
-    "usageSnippet": "<Input placeholder=\"Jane Doe\" />"
+    "usageSnippet": "<Input placeholder=\"Kamil Janiec\" />"
   },
   {
     "name": "Textarea",
@@ -284,7 +284,7 @@
       }
     ],
     "cva": null,
-    "usageSnippet": "<Select>\n        <option>Administrator</option>\n        <option>Editor</option>\n        <option>View only</option>\n      </Select>"
+    "usageSnippet": "<Select>\n        <option>Personal Portfolio</option>\n        <option>B2B Landlord SaaS</option>\n        <option>Accounting App</option>\n      </Select>"
   },
   {
     "name": "Checkbox",
@@ -1096,7 +1096,7 @@
       }
     ],
     "cva": null,
-    "usageSnippet": "<PageHeader\n      eyebrow=\"Open source\"\n      title=\"Projects\"\n      description=\"Things I've built and shipped.\"\n      actions={\n        <>\n          <Button size=\"sm\">View all</Button>\n          <Button size=\"sm\" variant=\"ghost\">GitHub</Button>\n        </>"
+    "usageSnippet": "<PageHeader\n        eyebrow=\"B2B SaaS\"\n        title=\"Dashboard Shell\"\n        description=\"The shell structure renders a responsive frame container with a sticky sidebar, topbar, and main canvas.\"\n        actions={<Button size=\"sm\">New Project</Button>}\n      />"
   },
   {
     "name": "EmptyState",
@@ -1273,5 +1273,146 @@
     ],
     "cva": null,
     "usageSnippet": "<DataTableColumn>\n  <!-- Content -->\n</DataTableColumn>"
+  },
+  {
+    "name": "FormField",
+    "importPath": "import { FormField } from \"@kjaniec-dev/ui\";",
+    "description": "React component FormField.",
+    "props": [
+      {
+        "name": "label",
+        "type": "string",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "hint",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "error",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "required",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "children",
+        "type": "React.ReactNode",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<FormField label=\"Full Name\">\n      <Input placeholder=\"Kamil Janiec\" />"
+  },
+  {
+    "name": "ErrorState",
+    "importPath": "import { ErrorState } from \"@kjaniec-dev/ui\";",
+    "description": "React component ErrorState.",
+    "props": [
+      {
+        "name": "title",
+        "type": "string",
+        "optional": true,
+        "defaultValue": "\"Wystąpił błąd\"",
+        "description": ""
+      },
+      {
+        "name": "message",
+        "type": "string",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "onRetry",
+        "type": "() => void",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "retryLabel",
+        "type": "string",
+        "optional": true,
+        "defaultValue": "\"Spróbuj ponownie\"",
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<ErrorState\n      title=\"Failed to Load Invoices\"\n      message=\"We encountered a temporary database error while retrieving your billing records.\"\n      onRetry={() => alert(\"Retrying...\")}\n      retryLabel=\"Reload Invoices\"\n    />"
+  },
+  {
+    "name": "Skeleton",
+    "importPath": "import { Skeleton } from \"@kjaniec-dev/ui\";",
+    "description": "React component Skeleton.",
+    "props": [
+      {
+        "name": "variant",
+        "type": "\"text\" | \"circular\" | \"rectangular\"",
+        "optional": true,
+        "defaultValue": "\"rectangular\"",
+        "description": ""
+      },
+      {
+        "name": "width",
+        "type": "string | number",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "height",
+        "type": "string | number",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<Skeleton variant=\"text\" width=\"60%\" />"
+  },
+  {
+    "name": "DashboardShell",
+    "importPath": "import { DashboardShell } from \"@kjaniec-dev/ui\";",
+    "description": "React component DashboardShell.",
+    "props": [
+      {
+        "name": "sidebar",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "topbar",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "children",
+        "type": "React.ReactNode",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<DashboardShell\n      sidebar={\n        <div className=\"p-6 flex flex-col gap-6 h-full bg-subtle\">\n          <div className=\"font-bold text-lg tracking-tight text-primary\">KJ Product Kit</div>\n          <nav className=\"flex flex-col gap-2\">\n            <a href=\"#\" className=\"text-sm font-medium text-foreground hover:text-primary transition-colors\">Dashboard</a>\n            <a href=\"#\" className=\"text-sm font-medium text-muted-foreground hover:text-primary transition-colors\">Projects</a>\n            <a href=\"#\" className=\"text-sm font-medium text-muted-foreground hover:text-primary transition-colors\">Invoices</a>\n            <a href=\"#\" className=\"text-sm font-medium text-muted-foreground hover:text-primary transition-colors\">Settings</a>\n          </nav>\n        </div>\n      }\n      topbar={\n        <div className=\"w-full flex items-center justify-between\">\n          <span className=\"text-sm font-medium text-muted-foreground\">Workspace / Personal</span>\n          <Button size=\"sm\" variant=\"ghost\">Profile</Button>\n        </div>\n      }\n    >\n      <PageHeader\n        eyebrow=\"B2B SaaS\"\n        title=\"Dashboard Shell\"\n        description=\"The shell structure renders a responsive frame container with a sticky sidebar, topbar, and main canvas.\"\n        actions={<Button size=\"sm\">New Project</Button>}\n      />"
   }
 ]

package/data/tokens.json

@@ -482,6 +482,76 @@
     "dark": "#f0f9ff",
     "tailwind": ""
   },
+  {
+    "name": "color.semantic.light.bgCanvas",
+    "category": "color",
+    "light": "#f4f4f5",
+    "dark": "#f4f4f5",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.light.bgSubtle",
+    "category": "color",
+    "light": "#fafafa",
+    "dark": "#fafafa",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.light.bgSurface",
+    "category": "color",
+    "light": "#ffffff",
+    "dark": "#ffffff",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.light.bgElevated",
+    "category": "color",
+    "light": "#ffffff",
+    "dark": "#ffffff",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.light.bgOverlay",
+    "category": "color",
+    "light": "rgba(9, 9, 11, 0.4)",
+    "dark": "rgba(9, 9, 11, 0.4)",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.light.borderSubtle",
+    "category": "color",
+    "light": "#f4f4f5",
+    "dark": "#f4f4f5",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.light.borderStrong",
+    "category": "color",
+    "light": "#e4e4e7",
+    "dark": "#e4e4e7",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.light.chart1",
+    "category": "color",
+    "light": "#f59e0b",
+    "dark": "#f59e0b",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.light.chart2",
+    "category": "color",
+    "light": "#14b8a6",
+    "dark": "#14b8a6",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.light.chart3",
+    "category": "color",
+    "light": "#0284c7",
+    "dark": "#0284c7",
+    "tailwind": ""
+  },
   {
     "name": "color.semantic.dark.background",
     "category": "color",
@@ -650,6 +720,76 @@
     "dark": "#082f49",
     "tailwind": ""
   },
+  {
+    "name": "color.semantic.dark.bgCanvas",
+    "category": "color",
+    "light": "#09090b",
+    "dark": "#09090b",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.dark.bgSubtle",
+    "category": "color",
+    "light": "#121214",
+    "dark": "#121214",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.dark.bgSurface",
+    "category": "color",
+    "light": "#18181b",
+    "dark": "#18181b",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.dark.bgElevated",
+    "category": "color",
+    "light": "#27272a",
+    "dark": "#27272a",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.dark.bgOverlay",
+    "category": "color",
+    "light": "rgba(9, 9, 11, 0.7)",
+    "dark": "rgba(9, 9, 11, 0.7)",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.dark.borderSubtle",
+    "category": "color",
+    "light": "#1f1f23",
+    "dark": "#1f1f23",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.dark.borderStrong",
+    "category": "color",
+    "light": "#27272a",
+    "dark": "#27272a",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.dark.chart1",
+    "category": "color",
+    "light": "#fbbf24",
+    "dark": "#fbbf24",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.dark.chart2",
+    "category": "color",
+    "light": "#2dd4bf",
+    "dark": "#2dd4bf",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.dark.chart3",
+    "category": "color",
+    "light": "#0ea5e9",
+    "dark": "#0ea5e9",
+    "tailwind": ""
+  },
   {
     "name": "typography.font.sans",
     "category": "typography",
@@ -915,5 +1055,47 @@
     "light": "1.18",
     "dark": "1.18",
     "tailwind": ""
+  },
+  {
+    "name": "motion.duration.fast",
+    "category": "motion",
+    "light": "120ms",
+    "dark": "120ms",
+    "tailwind": ""
+  },
+  {
+    "name": "motion.duration.normal",
+    "category": "motion",
+    "light": "180ms",
+    "dark": "180ms",
+    "tailwind": ""
+  },
+  {
+    "name": "motion.duration.slow",
+    "category": "motion",
+    "light": "280ms",
+    "dark": "280ms",
+    "tailwind": ""
+  },
+  {
+    "name": "motion.ease.standard",
+    "category": "motion",
+    "light": "cubic-bezier(0.4, 0, 0.2, 1)",
+    "dark": "cubic-bezier(0.4, 0, 0.2, 1)",
+    "tailwind": ""
+  },
+  {
+    "name": "motion.ease.out",
+    "category": "motion",
+    "light": "cubic-bezier(0, 0, 0.2, 1)",
+    "dark": "cubic-bezier(0, 0, 0.2, 1)",
+    "tailwind": ""
+  },
+  {
+    "name": "motion.ease.spring",
+    "category": "motion",
+    "light": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+    "dark": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+    "tailwind": ""
   }
 ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kjaniec-dev/ui-mcp",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "MCP (Model Context Protocol) server for KJ Product Kit design system and UI components",
   "license": "MIT",
   "author": "kjaniec-dev",