Skip to content

Commit c0d8f30

Browse files
authored
chore(registry): deprecate kbd (#161)
* chore(registry): depreicate kbd * chore(registry): better types
1 parent 394fd46 commit c0d8f30

File tree

22 files changed

+35
-783
lines changed

22 files changed

+35
-783
lines changed

docs/__registry__/index.tsx

Lines changed: 0 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -209,20 +209,6 @@ export const Index: Record<string, any> = {
209209
source: "",
210210
chunks: []
211211
},
212-
"kbd": {
213-
name: "kbd",
214-
description: "",
215-
type: "registry:ui",
216-
registryDependencies: undefined,
217-
files: [{
218-
path: "registry/default/ui/kbd.tsx",
219-
type: "registry:ui",
220-
target: ""
221-
}],
222-
component: React.lazy(() => import("@/registry/default/ui/kbd.tsx")),
223-
source: "",
224-
chunks: []
225-
},
226212
"listbox": {
227213
name: "listbox",
228214
description: "",
@@ -1435,48 +1421,6 @@ export const Index: Record<string, any> = {
14351421
source: "",
14361422
chunks: []
14371423
},
1438-
"kbd-demo": {
1439-
name: "kbd-demo",
1440-
description: "",
1441-
type: "registry:example",
1442-
registryDependencies: ["kbd"],
1443-
files: [{
1444-
path: "registry/default/examples/kbd-demo.tsx",
1445-
type: "registry:example",
1446-
target: ""
1447-
}],
1448-
component: React.lazy(() => import("@/registry/default/examples/kbd-demo.tsx")),
1449-
source: "",
1450-
chunks: []
1451-
},
1452-
"kbd-multiple-demo": {
1453-
name: "kbd-multiple-demo",
1454-
description: "",
1455-
type: "registry:example",
1456-
registryDependencies: ["kbd"],
1457-
files: [{
1458-
path: "registry/default/examples/kbd-multiple-demo.tsx",
1459-
type: "registry:example",
1460-
target: ""
1461-
}],
1462-
component: React.lazy(() => import("@/registry/default/examples/kbd-multiple-demo.tsx")),
1463-
source: "",
1464-
chunks: []
1465-
},
1466-
"kbd-variants-demo": {
1467-
name: "kbd-variants-demo",
1468-
description: "",
1469-
type: "registry:example",
1470-
registryDependencies: ["kbd"],
1471-
files: [{
1472-
path: "registry/default/examples/kbd-variants-demo.tsx",
1473-
type: "registry:example",
1474-
target: ""
1475-
}],
1476-
component: React.lazy(() => import("@/registry/default/examples/kbd-variants-demo.tsx")),
1477-
source: "",
1478-
chunks: []
1479-
},
14801424
"listbox-demo": {
14811425
name: "listbox-demo",
14821426
description: "",

docs/components/doc-actions.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -213,7 +213,7 @@ function ViewOptions({ markdownUrl, githubUrl }: ViewOptionsProps) {
213213
size="sm"
214214
className="h-7 text-xs [&_svg:not([class*='size-'])]:size-3"
215215
>
216-
Open with AI
216+
Open
217217
<ChevronDown />
218218
</Button>
219219
</PopoverTrigger>

docs/components/kbd.tsx

Lines changed: 0 additions & 54 deletions
This file was deleted.

docs/components/keyboard-shortcuts-table.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Kbd } from "@/components/kbd";
1+
import { Kbd } from "@/components/ui/kbd";
22
import {
33
Table,
44
TableBody,
@@ -32,7 +32,7 @@ export function KeyboardShortcutsTable({
3232
<TableRow key={`${shortcut.keys.join(" + ")}-${index}`}>
3333
<TableCell className="flex items-center gap-2">
3434
{shortcut.keys.map((key) => (
35-
<Kbd key={key} variant="outline">
35+
<Kbd key={key} className="not-prose">
3636
{key}
3737
</Kbd>
3838
))}

docs/components/mdx-components.tsx

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
import type { Page } from "fumadocs-core/source";
2+
import type { DocOut } from "fumadocs-mdx/runtime/next";
23
import { CodeBlock, Pre } from "fumadocs-ui/components/codeblock";
34
import { Heading } from "fumadocs-ui/components/heading";
45
import { Step, Steps } from "fumadocs-ui/components/steps";
56
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
67
import defaultComponents from "fumadocs-ui/mdx";
78
import type { MDXComponents } from "mdx/types";
89
import dynamic from "next/dynamic";
10+
import Link from "next/link";
911
import type * as React from "react";
12+
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
13+
import { Kbd } from "@/components/ui/kbd";
1014
import { Table, TableCell, TableHead, TableRow } from "@/components/ui/table";
1115
import { cn } from "@/lib/utils";
1216

@@ -25,9 +29,6 @@ const CSSVariablesTable = dynamic(() =>
2529
default: mod.CSSVariablesTable,
2630
})),
2731
);
28-
const Kbd = dynamic(() =>
29-
import("@/components/kbd").then((mod) => ({ default: mod.Kbd })),
30-
);
3132
const AutoTypeTable = dynamic(() =>
3233
import("@/components/auto-type-table").then((mod) => ({
3334
default: mod.AutoTypeTable,
@@ -85,7 +86,23 @@ export function useMdxComponents(
8586
<Pre>{children}</Pre>
8687
</CodeBlock>
8788
),
88-
kbd: (props) => <Kbd variant="outline" {...props} />,
89+
Link: ({ className, ...props }: React.ComponentProps<typeof Link>) => (
90+
<Link
91+
className={cn("underline underline-offset-4", className)}
92+
{...props}
93+
/>
94+
),
95+
Alert: ({ className, ...props }: React.ComponentProps<typeof Alert>) => (
96+
<Alert
97+
className={cn("not-prose my-2 bg-background", className)}
98+
{...props}
99+
/>
100+
),
101+
AlertTitle,
102+
AlertDescription,
103+
Kbd: ({ className, ...props }: React.ComponentProps<typeof Kbd>) => (
104+
<Kbd className={cn("not-prose", className)} {...props} />
105+
),
89106
ComponentTabs,
90107
ComponentSource,
91108
Steps,
@@ -99,9 +116,7 @@ export function useMdxComponents(
99116
}
100117

101118
interface MdxProps {
102-
page: Page & {
103-
data: { body: React.ComponentType<{ components: MDXComponents }> };
104-
};
119+
page: Page<DocOut>;
105120
components?: Partial<MDXComponents>;
106121
}
107122

docs/components/providers.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client";
22

3-
import { RootProvider } from "fumadocs-ui/provider";
43
import type { RootProviderProps } from "fumadocs-ui/provider/base";
4+
import { RootProvider } from "fumadocs-ui/provider/next";
55
import { createStore, Provider as JotaiProvider } from "jotai";
66
import { NuqsAdapter } from "nuqs/adapters/next/app";
77
import { TooltipProvider } from "@/components/ui/tooltip";

docs/content/docs/components/data-grid.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -569,7 +569,7 @@ The Data Grid follows WAI-ARIA guidelines for grid widgets:
569569
description: "Move down one page",
570570
},
571571
{
572-
keys: ["Shift + ↑↓←"],
572+
keys: ["Shift + ↑", "Shift + ↓", "Shift + ←", "Shift + "],
573573
description: "Extend selection",
574574
},
575575
{
Lines changed: 6 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -1,138 +1,11 @@
11
---
22
title: Kbd
33
description: A keyboard key primitive for displaying keyboard shortcuts and key combinations.
4-
preview: true
5-
links:
6-
api: /docs/components/kbd#api-reference
74
---
85

9-
<ComponentTabs name="kbd-demo" />
10-
11-
## Installation
12-
13-
### CLI
14-
15-
```package-install
16-
npx shadcn@latest add "https://diceui.com/r/kbd"
17-
```
18-
19-
### Manual
20-
21-
<Steps>
22-
<Step>
23-
Install the following dependencies:
24-
25-
```package-install
26-
@radix-ui/react-slot
27-
```
28-
</Step>
29-
<Step>
30-
Copy and paste the following code into your project.
31-
32-
<ComponentSource name="kbd" />
33-
</Step>
34-
</Steps>
35-
36-
## Layout
37-
38-
Import the parts, and compose them together.
39-
40-
```tsx
41-
import * as Kbd from "@/components/ui/kbd";
42-
43-
<Kbd.Root>
44-
<Kbd.Key/>
45-
<Kbd.Separator />
46-
<Kbd.Key />
47-
</Kbd.Root>
48-
```
49-
50-
### Built-in Key Titles
51-
52-
The component includes built-in titles for common keyboard symbols:
53-
54-
```tsx
55-
<Kbd.Root>
56-
<Kbd.Key>⌘</Kbd.Key> {/* Shows "Command" on hover */}
57-
<Kbd.Key>⇧</Kbd.Key> {/* Shows "Shift" on hover */}
58-
<Kbd.Key>⌥</Kbd.Key> {/* Shows "Option" on hover */}
59-
</Kbd.Root>
60-
```
61-
62-
### Custom Key Titles
63-
64-
You can provide custom titles for any key:
65-
66-
```tsx
67-
<Kbd.Root>
68-
<Kbd.Key title="Windows key">⊞</Kbd.Key>
69-
<Kbd.Separator />
70-
<Kbd.Key title="Lock screen">L</Kbd.Key>
71-
</Kbd.Root>
72-
```
73-
74-
## Examples
75-
76-
### With Multiple Keys
77-
78-
<ComponentTabs name="kbd-multiple-demo" />
79-
80-
### With Variants
81-
82-
<ComponentTabs name="kbd-variants-demo" />
83-
84-
## API Reference
85-
86-
### Root
87-
88-
The main container component for keyboard shortcuts.
89-
90-
<AutoTypeTable
91-
path="./types/docs/kbd.ts"
92-
name="RootProps"
93-
/>
94-
95-
<DataAttributesTable
96-
attributes={[
97-
{
98-
title: "[data-slot]",
99-
value: ["kbd"],
100-
},
101-
]}
102-
/>
103-
104-
### Key
105-
106-
The component that represents a single keyboard key.
107-
108-
<AutoTypeTable
109-
path="./types/docs/kbd.ts"
110-
name="KeyProps"
111-
/>
112-
113-
<DataAttributesTable
114-
attributes={[
115-
{
116-
title: "[data-slot]",
117-
value: ["kbd-key"],
118-
},
119-
]}
120-
/>
121-
122-
### Separator
123-
124-
The component that represents the separator between keyboard keys.
125-
126-
<AutoTypeTable
127-
path="./types/docs/kbd.ts"
128-
name="SeparatorProps"
129-
/>
130-
131-
<DataAttributesTable
132-
attributes={[
133-
{
134-
title: "[data-slot]",
135-
value: ["kbd-separator"],
136-
},
137-
]}
138-
/>
6+
<Alert>
7+
<AlertTitle>The kbd component has been deprecated</AlertTitle>
8+
<AlertDescription>
9+
Please use the shadcn/ui <Link href="https://ui.shadcn.com/docs/components/kbd">kbd</Link> component instead.
10+
</AlertDescription>
11+
</Alert>

docs/public/r/index.json

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -214,16 +214,6 @@
214214
}
215215
]
216216
},
217-
{
218-
"name": "kbd",
219-
"type": "registry:ui",
220-
"files": [
221-
{
222-
"path": "ui/kbd.tsx",
223-
"type": "registry:ui"
224-
}
225-
]
226-
},
227217
{
228218
"name": "listbox",
229219
"type": "registry:ui",

0 commit comments

Comments
 (0)