@rfdtech/components 2.0.0 → 2.1.0

package/dist/mcp/generated/examples.json

@@ -205,6 +205,15 @@
       ],
       "source": "import { Combobox } from \"@rfdtech/components\";\nimport { Star } from \"lucide-react\";\nimport { useState } from \"react\";\n\nconst options = [\n  { value: \"1\", label: \"Option 1\", icon: <Star size={16} /> },\n  { value: \"2\", label: \"Option 2\", icon: <Star size={16} /> },\n  { value: \"3\", label: \"Option 3\", icon: <Star size={16} /> },\n];\n\nexport function ComboboxIconsExample() {\n  const [value, setValue] = useState<string[]>([\"1\", \"2\"]);\n\n  return (\n    <Combobox\n      aria-label=\"Select options\"\n      placeholder=\"Select\"\n      options={options}\n      value={value}\n      onValueChange={setValue}\n      multiple\n    />\n  );\n}\n"
     },
+    {
+      "file": "combobox-long.example.tsx",
+      "importName": "comboboxLongSource",
+      "title": "Combobox Long",
+      "components": [
+        "Combobox"
+      ],
+      "source": "import { Combobox } from \"@rfdtech/components\";\nimport { useState } from \"react\";\n\nconst options = Array.from({ length: 20 }, (_, i) => ({\n  value: String(i + 1),\n  label: `Option ${i + 1}`,\n}));\n\nexport function ComboboxLongExample() {\n  const [value, setValue] = useState<string | null>(null);\n\n  return (\n    <Combobox\n      aria-label=\"Select\"\n      placeholder=\"Select\"\n      options={options}\n      value={value}\n      onValueChange={setValue}\n      clearable\n    />\n  );\n}\n"
+    },
     {
       "file": "combobox-multi.example.tsx",
       "importName": "comboboxMultiSource",
@@ -269,6 +278,7 @@
       "source": "import { CountrySelector } from \"@rfdtech/components\";\n\nexport function CountrySelectorExample() {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 16, maxWidth: 300 }}>\n      <CountrySelector />\n      <CountrySelector invalid />\n      <CountrySelector disabled />\n    </div>\n  );\n}\n"
     }
   ],
+  "dashboard-patterns": [],
   "date-range-selector": [
     {
       "file": "date-range-filter.example.tsx",
@@ -536,7 +546,7 @@
       "components": [
         "MetricCard"
       ],
-      "source": "import { MetricCard } from \"@rfdtech/components\";\n\nexport function MetricCardExample() {\n  return (\n    <div\n      style={{\n        background: \"var(--clet-surface-subtle)\",\n        padding: 20,\n        borderRadius: \"var(--clet-radius-xl)\",\n        width: \"100%\",\n      }}\n    >\n      <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 16 }}>\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            label=\"Revenue\"\n            value=\"$128.4k\"\n            description=\"Total revenue this quarter\"\n            trend=\"up\"\n            trendValue=\"+12.5%\"\n            animate\n          />\n        </div>\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            label=\"Active users\"\n            value=\"2,847\"\n            description=\"Current active users\"\n            trend=\"down\"\n            trendValue=\"-3.2%\"\n            animate\n          />\n        </div>\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            label=\"Avg response\"\n            value=\"1.2s\"\n            description=\"Average API response time\"\n            animate\n          />\n        </div>\n      </div>\n\n      <div\n        style={{ display: \"flex\", flexWrap: \"wrap\", gap: 16, marginTop: 16 }}\n      >\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            variant=\"outline\"\n            label=\"Revenue\"\n            value=\"$128.4k\"\n            description=\"Total revenue this quarter\"\n            trend=\"up\"\n            trendValue=\"12.5%\"\n          />\n        </div>\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            variant=\"outline\"\n            label=\"Active users\"\n            value=\"2,847\"\n            description=\"Current active users\"\n            trend=\"down\"\n            trendValue=\"3.2%\"\n          />\n        </div>\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            variant=\"outline\"\n            label=\"Avg response\"\n            value=\"1.2s\"\n            description=\"Average API response time\"\n            trend=\"neutral\"\n            trendValue=\"0.0%\"\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n"
+      "source": "import { MetricCard } from \"@rfdtech/components\";\n\nexport function MetricCardExample() {\n  return (\n    <div\n      style={{\n        background: \"var(--clet-surface-subtle)\",\n        padding: 20,\n        borderRadius: \"var(--clet-radius-xl)\",\n        width: \"100%\",\n      }}\n    >\n      <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 16 }}>\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            label=\"Revenue\"\n            value=\"$128.4k\"\n            description=\"Total revenue this quarter\"\n            trend=\"up\"\n            trendValue=\"+12.5%\"\n            animate\n          />\n        </div>\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            label=\"Active users\"\n            value=\"2,847\"\n            description=\"Current active users\"\n            trend=\"down\"\n            trendValue=\"-3.2%\"\n            animate\n          />\n        </div>\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            label=\"Avg response\"\n            value=\"1.2s\"\n            description=\"Average API response time\"\n            animate\n          />\n        </div>\n      </div>\n\n      <div\n        style={{ display: \"flex\", flexWrap: \"wrap\", gap: 16, marginTop: 16 }}\n      >\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            variant=\"outline\"\n            label=\"Revenue\"\n            value=\"$128.4k\"\n            description=\"Total revenue this quarter\"\n            trend=\"up\"\n            trendValue=\"12.5%\"\n          />\n        </div>\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            variant=\"outline\"\n            label=\"Active users\"\n            value=\"2,847\"\n            description=\"Current active users\"\n            trend=\"down\"\n            trendValue=\"3.2%\"\n          />\n        </div>\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            variant=\"outline\"\n            label=\"Avg response\"\n            value=\"1.2s\"\n            description=\"Average API response time\"\n            trend=\"neutral\"\n            trendValue=\"0.0%\"\n          />\n        </div>\n      </div>\n\n      <div\n        style={{ display: \"flex\", flexWrap: \"wrap\", gap: 16, marginTop: 16 }}\n      >\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            variant=\"bordered\"\n            label=\"Revenue\"\n            value=\"$128.4k\"\n            description=\"Total revenue this quarter\"\n          />\n        </div>\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            variant=\"bordered\"\n            label=\"Active users\"\n            value=\"2,847\"\n            description=\"Current active users\"\n          />\n        </div>\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            variant=\"bordered\"\n            label=\"Avg response\"\n            value=\"1.2s\"\n            description=\"Average API response time\"\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n"
     }
   ],
   "migration-v2": [],
@@ -619,6 +629,21 @@
       "source": "import { useState } from \"react\";\nimport {\n  Button,\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  OtpInput,\n} from \"@rfdtech/components\";\n\n// Mock \"correct\" code — stands in for a real server-side verification call.\nconst MOCK_VALID_CODE = \"123456\";\n\ntype VerifyStatus = \"idle\" | \"verifying\" | \"error\" | \"success\";\n\nexport function OtpVerifyDialogExample() {\n  const [open, setOpen] = useState(false);\n  const [code, setCode] = useState(\"\");\n  const [status, setStatus] = useState<VerifyStatus>(\"idle\");\n\n  const reset = () => {\n    setCode(\"\");\n    setStatus(\"idle\");\n  };\n\n  const verify = (value: string) => {\n    if (value.length < 6 || status === \"verifying\") return;\n    setStatus(\"verifying\");\n    // Simulate an async verification request.\n    setTimeout(() => {\n      if (value === MOCK_VALID_CODE) {\n        setStatus(\"success\");\n        setTimeout(() => {\n          setOpen(false);\n          reset();\n        }, 900);\n      } else {\n        setStatus(\"error\");\n      }\n    }, 1200);\n  };\n\n  return (\n    <>\n      <Button\n        variant=\"secondary\"\n        onClick={() => {\n          reset();\n          setOpen(true);\n        }}\n      >\n        Verify identity\n      </Button>\n\n      <Dialog\n        open={open}\n        onOpenChange={(next) => {\n          setOpen(next);\n          if (!next) reset();\n        }}\n      >\n        <DialogPortal>\n          <DialogOverlay />\n          <DialogContent showCloseButton>\n            <DialogTitle>Two-factor verification</DialogTitle>\n            <DialogDescription>\n              Enter the 6-digit code sent to your registered device to confirm\n              this action. (Hint: the mock code is <code>123456</code>.)\n            </DialogDescription>\n\n            <div style={{ display: \"grid\", gap: 8 }}>\n              <OtpInput\n                length={6}\n                value={code}\n                disabled={status === \"verifying\" || status === \"success\"}\n                invalid={status === \"error\"}\n                onChange={(value) => {\n                  setCode(value);\n                  if (status === \"error\") setStatus(\"idle\");\n                }}\n                onComplete={(value) => verify(value)}\n              />\n              {status === \"error\" && (\n                <p style={{ margin: 0, fontSize: 13, color: \"var(--clet-error-text)\" }}>\n                  Incorrect code. Please try again.\n                </p>\n              )}\n              {status === \"success\" && (\n                <p style={{ margin: 0, fontSize: 13, color: \"var(--clet-success)\" }}>\n                  Verified successfully.\n                </p>\n              )}\n            </div>\n\n            <div style={{ display: \"flex\", justifyContent: \"flex-end\", gap: 8 }}>\n              <Button\n                variant=\"ghost\"\n                onClick={() => setOpen(false)}\n                disabled={status === \"verifying\"}\n              >\n                Cancel\n              </Button>\n              <Button\n                onClick={() => verify(code)}\n                disabled={code.length < 6 || status === \"verifying\" || status === \"success\"}\n                loading={status === \"verifying\"}\n                loadingLabel=\"Verifying...\"\n              >\n                Verify\n              </Button>\n            </div>\n          </DialogContent>\n        </DialogPortal>\n      </Dialog>\n    </>\n  );\n}\n"
     }
   ],
+  "page-section": [
+    {
+      "file": "page-section.example.tsx",
+      "importName": "pageSectionSource",
+      "title": "Page Section",
+      "components": [
+        "Card",
+        "PageSection",
+        "SectionDescription",
+        "SectionHeader",
+        "SectionTitle"
+      ],
+      "source": "import {\n  PageSection,\n  SectionHeader,\n  SectionTitle,\n  SectionDescription,\n  Card,\n} from \"@rfdtech/components\";\n\nexport function PageSectionExample() {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 0, width: \"100%\" }}>\n      <PageSection>\n        <SectionHeader>\n          <SectionTitle>Dashboard</SectionTitle>\n          <SectionDescription>\n            Sections are separated by consistent vertical gap.\n          </SectionDescription>\n        </SectionHeader>\n      </PageSection>\n\n      <PageSection>\n        <div\n          style={{\n            height: 80,\n            borderRadius: \"var(--clet-radius-xl)\",\n            border: \"1px dashed var(--clet-border)\",\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            fontSize: 14,\n            color: \"var(--clet-text-secondary)\",\n          }}\n        >\n          Metric cards or stats grid\n        </div>\n      </PageSection>\n\n      <PageSection>\n        <Card bordered>\n          <div\n            style={{\n              height: 120,\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              fontSize: 14,\n              color: \"var(--clet-text-secondary)\",\n            }}\n          >\n            Table or content area\n          </div>\n        </Card>\n      </PageSection>\n    </div>\n  );\n}\n"
+    }
+  ],
   "phone-number-input": [
     {
       "file": "phone-number-input-field.example.tsx",
@@ -763,6 +788,17 @@
       "source": "import { ProgressBar } from \"@rfdtech/components\";\n\nexport function ProgressBarExample() {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"16px\", width: \"100%\" }}>\n      <ProgressBar value={60} label=\"Upload progress\" showValue />\n      <ProgressBar value={100} variant=\"success\" showValue />\n      <ProgressBar value={45} variant=\"warning\" />\n      <ProgressBar value={20} variant=\"error\" size=\"md\" />\n      <ProgressBar indeterminate label=\"Loading\" size=\"md\" />\n    </div>\n  );\n}\n"
     }
   ],
+  "quick-actions": [
+    {
+      "file": "quick-actions.example.tsx",
+      "importName": "quickActionsSource",
+      "title": "Quick Actions",
+      "components": [
+        "QuickActions"
+      ],
+      "source": "import { useMemo, useState } from \"react\";\nimport { QuickActions } from \"@rfdtech/components\";\nimport { UserPlus, Download, BarChart3, Shield, History, FileText } from \"lucide-react\";\n\nconst allActions = [\n  { id: \"add\", label: \"Add Member\", icon: <UserPlus size={18} strokeWidth={1.5} />, description: \"Create a new member account\" },\n  { id: \"export\", label: \"Export Data\", icon: <Download size={18} strokeWidth={1.5} />, description: \"Download member records\" },\n  { id: \"reports\", label: \"View Reports\", icon: <BarChart3 size={18} strokeWidth={1.5} />, description: \"Access analytics and reports\" },\n  { id: \"roles\", label: \"Manage Roles\", icon: <Shield size={18} strokeWidth={1.5} />, description: \"Configure role permissions\" },\n  { id: \"audit\", label: \"Audit Log\", icon: <History size={18} strokeWidth={1.5} />, description: \"Review system audit trail\" },\n  { id: \"docs\", label: \"Documents\", icon: <FileText size={18} strokeWidth={1.5} />, description: \"Browse and manage documents\" },\n];\n\nexport function QuickActionsExample() {\n  const [hiddenIds, setHiddenIds] = useState<Set<string>>(new Set());\n  const visibleActions = useMemo(\n    () => allActions.filter((a) => !hiddenIds.has(a.id)),\n    [hiddenIds],\n  );\n\n  return (\n    <div style={{ width: \"100%\", maxWidth: 640 }}>\n      <QuickActions\n        actions={visibleActions}\n        customizable\n        hiddenIds={hiddenIds}\n        onToggleVisibility={(id) => {\n          setHiddenIds((prev) => {\n            const next = new Set(prev);\n            if (next.has(id)) {\n              next.delete(id);\n            } else {\n              next.add(id);\n            }\n            return next;\n          });\n        }}\n      />\n    </div>\n  );\n}\n"
+    }
+  ],
   "radio-group": [
     {
       "file": "radio-decision-form.example.tsx",