tembro 2.1.12 → 3.0.0

package/packages/cli/vendor/src/components/charts/charts.tsx

@@ -40,6 +40,14 @@ function normalizeValue(value: number, max: number) {
 function getChartColor(index: number, custom?: string) {
   return custom ?? `var(--color-chart-${(index % 5) + 1}, var(--primary))`
 }
+
+function formatChartValue(value: number, formatter?: (value: number) => React.ReactNode) {
+  return formatter ? formatter(value) : value.toLocaleString()
+}
+
+function chartLabelToTitle(label: React.ReactNode) {
+  return typeof label === "string" || typeof label === "number" ? String(label) : undefined
+}
 
 function polarToCartesian(cx: number, cy: number, radius: number, angle: number) {
   const radians = ((angle - 90) * Math.PI) / 180
@@ -117,18 +125,19 @@ function ChartFrame({ title, description, action, state = "ready", emptyLabel =
   )
 }
 
-export type BarChartProps = React.ComponentProps<"div"> & {
-  data: ChartDatum[]
+export type BarChartProps = React.ComponentProps<"div"> & {
+  data: ChartDatum[]
   size?: ChartSize
   max?: number
   showLabels?: boolean
   showValues?: boolean
+  valueFormatter?: (value: number) => React.ReactNode
   barClassName?: string
   state?: ChartState
   emptyLabel?: React.ReactNode
 }
 
-function BarChart({ data, size = "md", max, showLabels = true, showValues = true, state = "ready", emptyLabel = "No chart data.", className, barClassName, ...props }: BarChartProps) {
+function BarChart({ data, size = "md", max, showLabels = true, showValues = true, valueFormatter, state = "ready", emptyLabel = "No chart data.", className, barClassName, ...props }: BarChartProps) {
   const values = data.map((item) => item.value)
   const absoluteMax = max ?? safeMax(values.map((value) => Math.abs(value)))
   const height = chartHeightBySize[size]
@@ -147,9 +156,10 @@ function BarChart({ data, size = "md", max, showLabels = true, showValues = true
         {data.map((item, index) => {
           const ratio = normalizeValue(Math.abs(item.value), absoluteMax)
           const negative = item.value < 0
+          const title = chartLabelToTitle(item.label)
           return (
-            <div key={index} className="flex min-w-0 flex-1 flex-col items-center gap-2">
-              {showValues && <div className="text-xs text-muted-foreground">{item.value}</div>}
+            <div key={index} className="flex min-w-0 flex-1 flex-col items-center gap-2" title={title ? `${title}: ${item.value}` : undefined}>
+              {showValues && <div className="text-xs font-medium text-muted-foreground">{formatChartValue(item.value, valueFormatter)}</div>}
               <div className="flex w-full flex-1 items-end rounded-[min(var(--radius-xl),16px)] border border-border/60 bg-muted/38 p-1">
                 <div
                   className={cn("w-full rounded-[min(var(--radius-lg),12px)] bg-primary transition-all", barClassName)}
@@ -170,15 +180,19 @@ export type LineChartProps = Omit<React.ComponentProps<"svg">, "values"> & {
   size?: ChartSize
   width?: number
   showArea?: boolean
+  showGrid?: boolean
+  labels?: ChartAxisLabel[]
+  valueFormatter?: (value: number) => React.ReactNode
   stroke?: string
   state?: ChartState
   emptyLabel?: React.ReactNode
 }
 
-function LineChart({ values, size = "md", width = 560, showArea = false, stroke = "var(--primary)", state = "ready", emptyLabel = "No line data.", className, ...props }: LineChartProps) {
+function LineChart({ values, size = "md", width = 560, showArea = false, showGrid = true, labels, valueFormatter, stroke = "var(--primary)", state = "ready", emptyLabel = "No line data.", className, ...props }: LineChartProps) {
   const height = chartHeightBySize[size]
   const linePath = buildLinePath(values, width, height)
   const areaPath = buildAreaPath(values, width, height)
+  const max = safeMax(values)
 
   if (state === "loading") {
     return <div className={cn("h-36 animate-pulse rounded-[min(var(--radius-xl),16px)] bg-muted/70", className)} />
@@ -189,18 +203,39 @@ function LineChart({ values, size = "md", width = 560, showArea = false, stroke
   }
 
   return (
-    <svg data-slot="line-chart" viewBox={`0 0 ${width} ${height}`} className={cn("h-auto w-full overflow-visible", className)} role="img" {...props}>
-      {showArea && <path d={areaPath} fill="var(--primary)" opacity="0.12" />}
-      <path d={linePath} fill="none" stroke={stroke} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
-      {values.map((value, index) => {
-        const max = safeMax(values)
-        const x = 12 + (values.length === 1 ? (width - 24) / 2 : (index / (values.length - 1)) * (width - 24))
-        const y = 12 + (1 - normalizeValue(value, max)) * (height - 24)
-        return <circle key={index} cx={x} cy={y} r="3" fill={stroke} />
-      })}
-    </svg>
-  )
-}
+    <svg data-slot="line-chart" viewBox={`0 0 ${width} ${height}`} className={cn("h-auto w-full overflow-visible", className)} role="img" {...props}>
+      {showGrid && [0.25, 0.5, 0.75].map((position) => (
+        <line
+          key={position}
+          x1="12"
+          x2={width - 12}
+          y1={12 + position * (height - 24)}
+          y2={12 + position * (height - 24)}
+          stroke="var(--border)"
+          strokeDasharray="4 6"
+          opacity="0.7"
+        />
+      ))}
+      {showArea && <path d={areaPath} fill="var(--primary)" opacity="0.12" />}
+      <path d={linePath} fill="none" stroke={stroke} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
+      {values.map((value, index) => {
+        const x = 12 + (values.length === 1 ? (width - 24) / 2 : (index / (values.length - 1)) * (width - 24))
+        const y = 12 + (1 - normalizeValue(value, max)) * (height - 24)
+        const label = labels?.[index]
+        const title = label != null ? `${chartLabelToTitle(label) ?? "Value"}: ${value}` : `${value}`
+        return (
+          <circle key={index} cx={x} cy={y} r="3.5" fill={stroke}>
+            <title>{valueFormatter ? `${label ?? "Value"}: ${formatChartValue(value, valueFormatter)}` : title}</title>
+          </circle>
+        )
+      })}
+    </svg>
+  )
+}
+
+function AreaChart(props: Omit<LineChartProps, "showArea">) {
+  return <LineChart showArea {...props} />
+}
 
 export type SparklineProps = Omit<LineChartProps, "size" | "showArea"> & {
   values: number[]
@@ -262,9 +297,11 @@ function DonutChart({ data, size = 180, strokeWidth = 18, centerLabel, centerVal
             stroke={getChartColor(index, item.color)}
             strokeWidth={strokeWidth}
             strokeLinecap="round"
-          />
-        )
-      })}
+          >
+            <title>{`${chartLabelToTitle(item.label) ?? "Segment"}: ${item.value}`}</title>
+          </path>
+        )
+      })}
       {(centerValue || centerLabel) && (
         <text x="50%" y="50%" textAnchor="middle" dominantBaseline="middle" fill="var(--foreground)">
           {centerValue && <tspan x="50%" dy={centerLabel ? "-0.2em" : "0"} className="text-lg font-semibold">{centerValue}</tspan>}
@@ -326,4 +363,4 @@ function MetricTrend({ label, value, change, positive = true, values, className,
   )
 }
 
-export { BarChart, ChartFrame, ChartLegend, DonutChart, LineChart, MetricTrend, Sparkline }
+export { AreaChart, BarChart, ChartFrame, ChartLegend, DonutChart, LineChart, MetricTrend, Sparkline }

package/packages/cli/vendor/src/components/charts/horizontal-bar-chart.tsx

@@ -10,31 +10,45 @@ export type HorizontalBarDatum = {
   color?: string
 }
 
-export type HorizontalBarChartProps = React.ComponentProps<"div"> & {
-  data: HorizontalBarDatum[]
-  max?: number
-  showValue?: boolean
-}
-
-function HorizontalBarChart({ data, max, showValue = true, className, ...props }: HorizontalBarChartProps) {
-  const resolvedMax = max ?? Math.max(...data.map((item) => item.value), 1)
-
-  return (
-    <div data-slot="horizontal-bar-chart" className={cn("grid gap-3", className)} {...props}>
-      {data.map((item) => {
-        const width = resolvedMax > 0 ? Math.max(0, Math.min((item.value / resolvedMax) * 100, 100)) : 0
+export type HorizontalBarChartProps = React.ComponentProps<"div"> & {
+  data: HorizontalBarDatum[]
+  max?: number
+  showValue?: boolean
+  emptyLabel?: React.ReactNode
+  valueFormatter?: (value: number) => React.ReactNode
+}
+
+function HorizontalBarChart({ data, max, showValue = true, emptyLabel = "No ranking data.", valueFormatter, className, ...props }: HorizontalBarChartProps) {
+  const resolvedMax = max ?? Math.max(...data.map((item) => item.value), 1)
+
+  if (data.length === 0) {
+    return (
+      <div
+        data-slot="horizontal-bar-chart"
+        className={cn("rounded-[min(var(--radius-xl),16px)] border border-dashed border-border/70 px-4 py-10 text-center text-sm text-muted-foreground", className)}
+        {...props}
+      >
+        {emptyLabel}
+      </div>
+    )
+  }
+
+  return (
+    <div data-slot="horizontal-bar-chart" className={cn("grid gap-3", className)} {...props}>
+      {data.map((item) => {
+        const width = resolvedMax > 0 ? Math.max(0, Math.min((item.value / resolvedMax) * 100, 100)) : 0
 
         return (
           <div key={item.key} className="grid gap-1.5">
             <div className="flex items-center justify-between gap-3 text-sm">
               <div className="min-w-0">
-                <div className="truncate font-medium text-foreground">{item.label}</div>
-                {item.description && <div className="truncate text-xs text-muted-foreground">{item.description}</div>}
-              </div>
-              {showValue && <div className="text-xs font-medium text-muted-foreground">{item.value}</div>}
-            </div>
-            <div className="h-2 overflow-hidden rounded-full bg-muted">
-              <div className="h-full rounded-full bg-primary" style={{ width: `${width}%`, background: item.color }} />
+                <div className="truncate font-medium text-foreground">{item.label}</div>
+                {item.description && <div className="truncate text-xs text-muted-foreground">{item.description}</div>}
+              </div>
+              {showValue && <div className="text-xs font-medium text-muted-foreground">{valueFormatter ? valueFormatter(item.value) : item.value.toLocaleString()}</div>}
+            </div>
+            <div className="h-2 overflow-hidden rounded-full bg-muted">
+              <div className="h-full rounded-full bg-primary" style={{ width: `${width}%`, background: item.color }} />
             </div>
           </div>
         )

package/packages/cli/vendor/src/components/data-table/demo.tsx

@@ -1,3 +1,32 @@
-import { createShowcaseDemoRegistry } from "@/showcase/create-demo"
+import { DataTableShowcase, dataTableMock } from "@/showcase/premium/data-table"
+import {
+  DataTablePartShowcase,
+  dataTableActionsColumnMock,
+  dataTablePaginationMock,
+  dataTableRowActionsMock,
+  dataTableSavedFiltersMock,
+  dataTableSelectColumnMock,
+  dataTableToolbarMock,
+} from "@/showcase/premium/data-table-parts"
 
-export const dataTableShowcaseDemoRegistry = createShowcaseDemoRegistry([])
+import type { ComponentDemoBundle } from "@/showcase/premium/types"
+
+function createPartBundle(
+  slug: "data-table-pagination" | "data-table-toolbar" | "data-table-row-actions" | "data-table-actions-column" | "data-table-select-column" | "data-table-saved-filters",
+  mock: ComponentDemoBundle["mock"]
+): ComponentDemoBundle {
+  return {
+    mock,
+    Showcase: (props) => <DataTablePartShowcase {...props} slug={slug} />,
+  }
+}
+
+export const dataTableShowcaseDemoRegistry: Record<string, ComponentDemoBundle> = {
+  "data-table": { mock: dataTableMock, Showcase: DataTableShowcase },
+  "data-table-pagination": createPartBundle("data-table-pagination", dataTablePaginationMock),
+  "data-table-toolbar": createPartBundle("data-table-toolbar", dataTableToolbarMock),
+  "data-table-row-actions": createPartBundle("data-table-row-actions", dataTableRowActionsMock),
+  "data-table-actions-column": createPartBundle("data-table-actions-column", dataTableActionsColumnMock),
+  "data-table-select-column": createPartBundle("data-table-select-column", dataTableSelectColumnMock),
+  "data-table-saved-filters": createPartBundle("data-table-saved-filters", dataTableSavedFiltersMock),
+}

package/packages/cli/vendor/src/showcase/create-demo.tsx

@@ -1,5 +1,6 @@
-import type { ShowcaseDemoBundle, ShowcaseDemoDefinition, ShowcaseDemoMock, ShowcaseDemoProps } from "./types"
-import { renderShowcasePreview } from "./render-registry-preview"
+import type { ShowcaseDemoBundle, ShowcaseDemoDefinition, ShowcaseDemoMock, ShowcaseDemoProps } from "./types"
+import { renderShowcasePreview } from "./render-registry-preview"
+import { demoCodeSnippets } from "./demo-snippets"
 
 export function component(
   slug: string,
@@ -57,165 +58,12 @@ function createMock(definition: ShowcaseDemoDefinition): ShowcaseDemoMock {
   }
 }
 
-function createCodeSnippet(definition: ShowcaseDemoDefinition) {
-  return exactCodeSnippets[definition.slug]
-    ?? createKindSnippet(definition)
-}
-
-const exactCodeSnippets: Record<string, string> = {
-  "search-input": `import { Input } from "tembro"
-
-export function Demo() {
-  return (
-    <Input
-      type="search"
-      value="invoice"
-      onValueChange={(value) => console.log(value)}
-      placeholder="Search invoices..."
-      resultCount={12}
-      shortcut="Ctrl K"
-    />
-  )
-}`,
-  "password-input": `import { PasswordInput } from "tembro"
-
-export function Demo() {
-  return <PasswordInput placeholder="Enter secure token" autoComplete="current-password" />
-}`,
-  "clearable-input": `import { Input } from "tembro"
-
-export function Demo() {
-  return <Input defaultValue="Azamat UI" placeholder="Search customer" clearable />
-}`,
-  "tag-input": `import { TagInput } from "tembro"
-
-export function Demo() {
-  return <TagInput defaultValue={["dashboard", "billing"]} placeholder="Add tag" />
-}`,
-  "action-menu": `import { ActionMenu, Button } from "tembro"
-
-export function Demo() {
-  return (
-    <ActionMenu
-      label="Row actions"
-      actions={[
-        { key: "open", label: "Open" },
-        { key: "duplicate", label: "Duplicate" },
-        { key: "archive", label: "Archive", destructive: true },
-      ]}
-      trigger={<Button variant="outline">Actions</Button>}
-    />
-  )
-}`,
-  "button-group": `import { ButtonGroup } from "tembro"
-
-export function Demo() {
-  return (
-    <ButtonGroup
-      items={[
-        { key: "day", label: "Day" },
-        { key: "week", label: "Week" },
-        { key: "month", label: "Month" },
-      ]}
-    />
-  )
-}`,
-  "quick-action-grid": `import { QuickActionGrid } from "tembro"
-
-export function Demo() {
-  return (
-    <QuickActionGrid
-      columns={3}
-      items={[
-        { key: "new", label: "New invoice", description: "Create a billing row." },
-        { key: "import", label: "Import CSV", description: "Upload operational data." },
-        { key: "share", label: "Share", description: "Invite a teammate." },
-      ]}
-    />
-  )
-}`,
-  "filter-bar": `import { Button, FilterBar, Input } from "tembro"
-
-export function Demo() {
-  return (
-    <FilterBar
-      search={<Input type="search" value="" placeholder="Search rows..." readOnly />}
-      chips={[
-        { key: "status", label: "Status", value: "Active", tone: "success" },
-        { key: "owner", label: "Owner", value: "Azamat" },
-      ]}
-      filters={<Button variant="outline">Status</Button>}
-      actions={<Button>Export</Button>}
-      onReset={() => undefined}
-    />
-  )
-}`,
-  "description-list": `import { DescriptionList } from "tembro"
-
-export function Demo() {
-  return (
-    <DescriptionList
-      title="Invoice details"
-      items={[
-        { key: "id", label: "Invoice", value: "#4821" },
-        { key: "amount", label: "Amount", value: "$12,420" },
-        { key: "status", label: "Status", value: "Paid" },
-      ]}
-    />
-  )
-}`,
-  "stat-card": `import { StatCard } from "tembro"
-
-export function Demo() {
-  return (
-    <StatCard
-      title="Revenue"
-      value="$84.2k"
-      description="Compared with last month"
-      trend={{ value: "+12.4%", tone: "success" }}
-      helperText="Updated just now"
-    />
-  )
-}`,
-  "pagination": `import { Pagination } from "tembro"
-
-export function Demo() {
-  return <Pagination page={3} pageCount={9} onPageChange={(page) => console.log(page)} />
-}`,
-  "dialog-actions": `import { DialogActionButton, DialogActions } from "tembro"
-
-export function Demo() {
-  return (
-    <DialogActions align="end">
-      <DialogActionButton variant="ghost">Cancel</DialogActionButton>
-      <DialogActionButton variant="outline">Save draft</DialogActionButton>
-      <DialogActionButton>Publish</DialogActionButton>
-    </DialogActions>
-  )
-}`,
-  "file-dropzone": `import { FileDropzone } from "tembro"
-
-export function Demo() {
-  return <FileDropzone label="Drop contract files" description="PDF, PNG or CSV up to 10MB." />
-}`,
-  "stepper": `import { Stepper } from "tembro"
-
-export function Demo() {
-  return (
-    <Stepper
-      currentStep="billing"
-      steps={[
-        { id: "profile", title: "Profile", completed: true },
-        { id: "billing", title: "Billing" },
-        { id: "review", title: "Review" },
-      ]}
-      onStepChange={() => undefined}
-    />
-  )
-}`,
-}
+function createCodeSnippet(definition: ShowcaseDemoDefinition) {
+  return demoCodeSnippets[definition.slug]
+    ?? createKindSnippet(definition)
+}
 
-function createKindSnippet(definition: ShowcaseDemoDefinition) {
+function createKindSnippet(definition: ShowcaseDemoDefinition) {
   const importName = definition.importName ?? definition.component
   const importPath = "tembro"
 

package/packages/cli/vendor/src/showcase/demo-snippets/actions/index.ts

@@ -0,0 +1,70 @@
+export const actionDemoCodeSnippets: Record<string, string> = {
+  "action-menu": `import { ActionMenu, Button } from "tembro"
+
+export function Demo() {
+  return (
+    <ActionMenu
+      label="Row actions"
+      actions={[
+        { key: "open", label: "Open" },
+        { key: "duplicate", label: "Duplicate" },
+        { key: "archive", label: "Archive", destructive: true },
+      ]}
+      trigger={<Button variant="outline">Actions</Button>}
+    />
+  )
+}`,
+  "button-group": `import { ButtonGroup } from "tembro"
+
+export function Demo() {
+  return (
+    <ButtonGroup
+      items={[
+        { key: "day", label: "Day" },
+        { key: "week", label: "Week" },
+        { key: "month", label: "Month" },
+      ]}
+    />
+  )
+}`,
+  "quick-action-grid": `import { QuickActionGrid } from "tembro"
+
+export function Demo() {
+  return (
+    <QuickActionGrid
+      columns={3}
+      items={[
+        { key: "new", label: "New invoice", description: "Create a billing row." },
+        { key: "import", label: "Import CSV", description: "Upload operational data." },
+        { key: "share", label: "Share", description: "Invite a teammate." },
+      ]}
+    />
+  )
+}`,
+  "dialog-actions": `import { DialogActionButton, DialogActions } from "tembro"
+
+export function Demo() {
+  return (
+    <DialogActions align="end">
+      <DialogActionButton variant="ghost">Cancel</DialogActionButton>
+      <DialogActionButton variant="outline">Save draft</DialogActionButton>
+      <DialogActionButton>Publish</DialogActionButton>
+    </DialogActions>
+  )
+}`,
+  stepper: `import { Stepper } from "tembro"
+
+export function Demo() {
+  return (
+    <Stepper
+      currentStep="billing"
+      steps={[
+        { id: "profile", title: "Profile", completed: true },
+        { id: "billing", title: "Billing" },
+        { id: "review", title: "Review" },
+      ]}
+      onStepChange={() => undefined}
+    />
+  )
+}`,
+}

package/packages/cli/vendor/src/showcase/demo-snippets/forms/index.ts

@@ -0,0 +1,31 @@
+export const formDemoCodeSnippets: Record<string, string> = {
+  "search-input": `import { Input } from "tembro"
+
+export function Demo() {
+  return (
+    <Input
+      type="search"
+      value="invoice"
+      onValueChange={(value) => console.log(value)}
+      placeholder="Search invoices..."
+      resultCount={12}
+      shortcut="Ctrl K"
+    />
+  )
+}`,
+  "password-input": `import { PasswordInput } from "tembro"
+
+export function Demo() {
+  return <PasswordInput placeholder="Enter secure token" autoComplete="current-password" />
+}`,
+  "clearable-input": `import { Input } from "tembro"
+
+export function Demo() {
+  return <Input defaultValue="Azamat UI" placeholder="Search customer" clearable />
+}`,
+  "tag-input": `import { TagInput } from "tembro"
+
+export function Demo() {
+  return <TagInput defaultValue={["dashboard", "billing"]} placeholder="Add tag" />
+}`,
+}

package/packages/cli/vendor/src/showcase/demo-snippets/index.ts

@@ -0,0 +1,11 @@
+import { actionDemoCodeSnippets } from "./actions"
+import { formDemoCodeSnippets } from "./forms"
+import { layoutDemoCodeSnippets } from "./layout"
+import { uploadDemoCodeSnippets } from "./upload"
+
+export const demoCodeSnippets: Record<string, string> = {
+  ...actionDemoCodeSnippets,
+  ...formDemoCodeSnippets,
+  ...layoutDemoCodeSnippets,
+  ...uploadDemoCodeSnippets,
+}

package/packages/cli/vendor/src/showcase/demo-snippets/layout/index.ts

@@ -0,0 +1,50 @@
+export const layoutDemoCodeSnippets: Record<string, string> = {
+  "filter-bar": `import { Button, FilterBar, Input } from "tembro"
+
+export function Demo() {
+  return (
+    <FilterBar
+      search={<Input type="search" value="" placeholder="Search rows..." readOnly />}
+      chips={[
+        { key: "status", label: "Status", value: "Active", tone: "success" },
+        { key: "owner", label: "Owner", value: "Azamat" },
+      ]}
+      filters={<Button variant="outline">Status</Button>}
+      actions={<Button>Export</Button>}
+      onReset={() => undefined}
+    />
+  )
+}`,
+  "description-list": `import { DescriptionList } from "tembro"
+
+export function Demo() {
+  return (
+    <DescriptionList
+      title="Invoice details"
+      items={[
+        { key: "id", label: "Invoice", value: "#4821" },
+        { key: "amount", label: "Amount", value: "$12,420" },
+        { key: "status", label: "Status", value: "Paid" },
+      ]}
+    />
+  )
+}`,
+  "stat-card": `import { StatCard } from "tembro"
+
+export function Demo() {
+  return (
+    <StatCard
+      title="Revenue"
+      value="$84.2k"
+      description="Compared with last month"
+      trend={{ value: "+12.4%", tone: "success" }}
+      helperText="Updated just now"
+    />
+  )
+}`,
+  pagination: `import { Pagination } from "tembro"
+
+export function Demo() {
+  return <Pagination page={3} pageCount={9} onPageChange={(page) => console.log(page)} />
+}`,
+}

package/packages/cli/vendor/src/showcase/demo-snippets/upload/index.ts

@@ -0,0 +1,7 @@
+export const uploadDemoCodeSnippets: Record<string, string> = {
+  "file-dropzone": `import { FileDropzone } from "tembro"
+
+export function Demo() {
+  return <FileDropzone label="Drop contract files" description="PDF, PNG or CSV up to 10MB." />
+}`,
+}

package/packages/cli/vendor/src/showcase/tembro-registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://tembro.dev/registry.schema.json",
   "name": "tembro",
-  "version": "2.1.12",
+  "version": "3.0.0",
   "description": "Reusable React + TypeScript UI kit registry",
   "groups": {
     "ui": [

package/registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://tembro.dev/registry.schema.json",
   "name": "tembro",
-  "version": "2.1.12",
+  "version": "3.0.0",
   "description": "Reusable React + TypeScript UI kit registry",
   "groups": {
     "ui": [