@kjaniec-dev/ui-mcp 0.4.1 → 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,6 +1096,323 @@
       }
     ],
     "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",
+    "importPath": "import { EmptyState } from \"@kjaniec-dev/ui\";",
+    "description": "React component EmptyState.",
+    "props": [
+      {
+        "name": "icon",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "title",
+        "type": "string",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "description",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "action",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<EmptyState\n      title=\"No integrations active\"\n      description=\"Connect your Slack, GitHub, or Discord channel to start receiving automated notifications.\"\n      icon={\n        <svg fill=\"none\" stroke=\"currentColor\" strokeWidth={2} viewBox=\"0 0 24 24\">\n          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M12 4.5v15m7.5-7.5h-15\" />"
+  },
+  {
+    "name": "MetricCard",
+    "importPath": "import { MetricCard } from \"@kjaniec-dev/ui\";",
+    "description": "React component MetricCard.",
+    "props": [
+      {
+        "name": "title",
+        "type": "string",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "value",
+        "type": "string | number",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "trend",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "trendDirection",
+        "type": "\"up\" | \"down\" | \"neutral\"",
+        "optional": true,
+        "defaultValue": "\"neutral\"",
+        "description": ""
+      },
+      {
+        "name": "description",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "icon",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<MetricCard\n        title=\"Revenue\"\n        value=\"$48,259.00\"\n        trend=\"+8.2%\"\n        trendDirection=\"up\"\n        description=\"Total sales this quarter\"\n      />"
+  },
+  {
+    "name": "DataTable",
+    "importPath": "import { DataTable } from \"@kjaniec-dev/ui\";",
+    "description": "React component DataTable.",
+    "props": [
+      {
+        "name": "columns",
+        "type": "DataTableColumn<T>[]",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "data",
+        "type": "T[]",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "loading",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "false",
+        "description": ""
+      },
+      {
+        "name": "error",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "emptyTitle",
+        "type": "string",
+        "optional": true,
+        "defaultValue": "\"No data available\"",
+        "description": ""
+      },
+      {
+        "name": "emptyDescription",
+        "type": "string",
+        "optional": true,
+        "defaultValue": "\"There are no records to display at this time.\"",
+        "description": ""
+      },
+      {
+        "name": "emptyAction",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<DataTable columns={columns} data={sampleData} />"
+  },
+  {
+    "name": "DataTableColumn",
+    "importPath": "import { DataTableColumn } from \"@kjaniec-dev/ui\";",
+    "description": "React component DataTableColumn.",
+    "props": [
+      {
+        "name": "header",
+        "type": "React.ReactNode",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "accessor",
+        "type": "(row: T) => React.ReactNode",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "className",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "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",
@@ -894,5 +1034,68 @@
     "light": "0 0 0 1px rgb(245 158 11 / 0.16), 0 16px 48px rgb(245 158 11 / 0.18)",
     "dark": "0 0 0 1px rgb(245 158 11 / 0.16), 0 16px 48px rgb(245 158 11 / 0.18)",
     "tailwind": "shadow-kj-glow"
+  },
+  {
+    "name": "density.default",
+    "category": "density",
+    "light": "1.0",
+    "dark": "1.0",
+    "tailwind": ""
+  },
+  {
+    "name": "density.compact",
+    "category": "density",
+    "light": "0.82",
+    "dark": "0.82",
+    "tailwind": ""
+  },
+  {
+    "name": "density.comfortable",
+    "category": "density",
+    "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.4.1",
+  "version": "0.6.0",
   "description": "MCP (Model Context Protocol) server for KJ Product Kit design system and UI components",
   "license": "MIT",
   "author": "kjaniec-dev",