shadcn-app-dock 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +100 -100
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,100 +1,100 @@
|
|
|
1
|
-
# shadcn-app-dock
|
|
2
|
-
|
|
3
|
-
A prop-driven, macOS-style category **dock** for React — magnifying icon bar with an
|
|
4
|
-
optional dropdown menu and a built-in **shadcn theme switcher**.
|
|
5
|
-
|
|
6
|
-
- **Abstracted nav items** — pass your own `icon` / `label` / `onClick` per item.
|
|
7
|
-
- **Custom menu** — a trailing dropdown whose body you render yourself.
|
|
8
|
-
- **Theme switcher** — drop the exported `<ThemeMenu />` into that dropdown for
|
|
9
|
-
light / dark / system + shadcn color themes (with hover preview).
|
|
10
|
-
- **Framework-agnostic icons** — defaults to `<img>`; pass `renderImage` to use
|
|
11
|
-
`next/image` or any custom renderer.
|
|
12
|
-
|
|
13
|
-
## Requirements
|
|
14
|
-
|
|
15
|
-
Tailwind CSS with the shadcn design tokens (CSS variables like `--card`, `--accent`,
|
|
16
|
-
`--primary`). For the color themes, import the stylesheet shipped by
|
|
17
|
-
[`shadcn-theme-menu`](https://www.npmjs.com/package/shadcn-theme-menu):
|
|
18
|
-
|
|
19
|
-
```ts
|
|
20
|
-
import "shadcn-theme-menu/themes.css"
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
Wrap your app in `next-themes`' `ThemeProvider` (peer dependency) for the appearance toggle.
|
|
24
|
-
|
|
25
|
-
## Usage
|
|
26
|
-
|
|
27
|
-
```tsx
|
|
28
|
-
import Image from "next/image"
|
|
29
|
-
import { usePathname, useRouter } from "next/navigation"
|
|
30
|
-
import {
|
|
31
|
-
CategoryDock,
|
|
32
|
-
ThemeMenu,
|
|
33
|
-
DropdownMenuItem,
|
|
34
|
-
DropdownMenuSeparator,
|
|
35
|
-
} from "shadcn-app-dock"
|
|
36
|
-
|
|
37
|
-
const NAV = [
|
|
38
|
-
{ href: "/", label: "Research", icon: "/apple-touch-icon.png" },
|
|
39
|
-
{ href: "/docs", label: "Docs", icon: "/icons/icon-read.svg" },
|
|
40
|
-
]
|
|
41
|
-
|
|
42
|
-
export function AppDock() {
|
|
43
|
-
const pathname = usePathname()
|
|
44
|
-
const router = useRouter()
|
|
45
|
-
|
|
46
|
-
return (
|
|
47
|
-
<CategoryDock
|
|
48
|
-
enableKeyboardShortcuts
|
|
49
|
-
renderImage={(src, alt, size) => (
|
|
50
|
-
<Image src={src} alt={alt} width={size} height={size} unoptimized className="w-full h-full" />
|
|
51
|
-
)}
|
|
52
|
-
items={NAV.map(({ href, label, icon }) => ({
|
|
53
|
-
key: href,
|
|
54
|
-
label,
|
|
55
|
-
icon,
|
|
56
|
-
active: pathname === href,
|
|
57
|
-
onClick: () => router.push(href),
|
|
58
|
-
}))}
|
|
59
|
-
menu={{
|
|
60
|
-
triggerIcon: "/icons/icon-configure.svg",
|
|
61
|
-
triggerLabel: "Settings",
|
|
62
|
-
renderContent: ({ side }) => (
|
|
63
|
-
<>
|
|
64
|
-
<DropdownMenuItem onClick={() => router.push("/settings")}>Settings</DropdownMenuItem>
|
|
65
|
-
<DropdownMenuSeparator />
|
|
66
|
-
<ThemeMenu />
|
|
67
|
-
</>
|
|
68
|
-
),
|
|
69
|
-
}}
|
|
70
|
-
/>
|
|
71
|
-
)
|
|
72
|
-
}
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
## API
|
|
76
|
-
|
|
77
|
-
### `<CategoryDock>`
|
|
78
|
-
|
|
79
|
-
| Prop | Type | Description |
|
|
80
|
-
| --- | --- | --- |
|
|
81
|
-
| `items` | `DockNavItem[]` | Nav items. `icon` is an image `src` string or a React node. |
|
|
82
|
-
| `menu` | `CategoryDockMenu` | Optional trailing dropdown; `renderContent({ side, close })` returns its body. |
|
|
83
|
-
| `renderImage` | `(src, alt, size) => ReactNode` | Renders string icons. Defaults to `<img>`. |
|
|
84
|
-
| `enableKeyboardShortcuts` | `boolean` | `Alt+1..n` triggers the matching item's `onClick`. |
|
|
85
|
-
| `placements` | `{ desktop?, mobile? }` | Which fixed placements to render. Defaults to both. |
|
|
86
|
-
| `className` | `string` | Extra classes on each placement wrapper. |
|
|
87
|
-
|
|
88
|
-
### `<ThemeMenu>`
|
|
89
|
-
|
|
90
|
-
Composable theme switcher (fragment of dropdown items). Props: `showAppearance?` (default
|
|
91
|
-
`true`), `defaultColorTheme?` (default `"modern-minimal"`).
|
|
92
|
-
|
|
93
|
-
### Provider / hooks
|
|
94
|
-
|
|
95
|
-
`CategoryDockProvider`, `useCategoryDock(currentCategory, onCategoryChange)`,
|
|
96
|
-
`useCategoryDockState()`, `useCategoryDockVisibility()` — optional context for sharing dock
|
|
97
|
-
visibility and per-page category state.
|
|
98
|
-
|
|
99
|
-
The shadcn dropdown and dock primitives (`Dock`, `DockItem`, `DropdownMenuItem`, …) are also
|
|
100
|
-
re-exported for building custom menu content.
|
|
1
|
+
# shadcn-app-dock
|
|
2
|
+
|
|
3
|
+
A prop-driven, macOS-style category **dock** for React — magnifying icon bar with an
|
|
4
|
+
optional dropdown menu and a built-in **shadcn theme switcher**.
|
|
5
|
+
|
|
6
|
+
- **Abstracted nav items** — pass your own `icon` / `label` / `onClick` per item.
|
|
7
|
+
- **Custom menu** — a trailing dropdown whose body you render yourself.
|
|
8
|
+
- **Theme switcher** — drop the exported `<ThemeMenu />` into that dropdown for
|
|
9
|
+
light / dark / system + shadcn color themes (with hover preview).
|
|
10
|
+
- **Framework-agnostic icons** — defaults to `<img>`; pass `renderImage` to use
|
|
11
|
+
`next/image` or any custom renderer.
|
|
12
|
+
|
|
13
|
+
## Requirements
|
|
14
|
+
|
|
15
|
+
Tailwind CSS with the shadcn design tokens (CSS variables like `--card`, `--accent`,
|
|
16
|
+
`--primary`). For the color themes, import the stylesheet shipped by
|
|
17
|
+
[`shadcn-theme-menu`](https://www.npmjs.com/package/shadcn-theme-menu):
|
|
18
|
+
|
|
19
|
+
```ts
|
|
20
|
+
import "shadcn-theme-menu/themes.css"
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Wrap your app in `next-themes`' `ThemeProvider` (peer dependency) for the appearance toggle.
|
|
24
|
+
|
|
25
|
+
## Usage
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
import Image from "next/image"
|
|
29
|
+
import { usePathname, useRouter } from "next/navigation"
|
|
30
|
+
import {
|
|
31
|
+
CategoryDock,
|
|
32
|
+
ThemeMenu,
|
|
33
|
+
DropdownMenuItem,
|
|
34
|
+
DropdownMenuSeparator,
|
|
35
|
+
} from "shadcn-app-dock"
|
|
36
|
+
|
|
37
|
+
const NAV = [
|
|
38
|
+
{ href: "/", label: "Research", icon: "/apple-touch-icon.png" },
|
|
39
|
+
{ href: "/docs", label: "Docs", icon: "/icons/icon-read.svg" },
|
|
40
|
+
]
|
|
41
|
+
|
|
42
|
+
export function AppDock() {
|
|
43
|
+
const pathname = usePathname()
|
|
44
|
+
const router = useRouter()
|
|
45
|
+
|
|
46
|
+
return (
|
|
47
|
+
<CategoryDock
|
|
48
|
+
enableKeyboardShortcuts
|
|
49
|
+
renderImage={(src, alt, size) => (
|
|
50
|
+
<Image src={src} alt={alt} width={size} height={size} unoptimized className="w-full h-full" />
|
|
51
|
+
)}
|
|
52
|
+
items={NAV.map(({ href, label, icon }) => ({
|
|
53
|
+
key: href,
|
|
54
|
+
label,
|
|
55
|
+
icon,
|
|
56
|
+
active: pathname === href,
|
|
57
|
+
onClick: () => router.push(href),
|
|
58
|
+
}))}
|
|
59
|
+
menu={{
|
|
60
|
+
triggerIcon: "/icons/icon-configure.svg",
|
|
61
|
+
triggerLabel: "Settings",
|
|
62
|
+
renderContent: ({ side }) => (
|
|
63
|
+
<>
|
|
64
|
+
<DropdownMenuItem onClick={() => router.push("/settings")}>Settings</DropdownMenuItem>
|
|
65
|
+
<DropdownMenuSeparator />
|
|
66
|
+
<ThemeMenu />
|
|
67
|
+
</>
|
|
68
|
+
),
|
|
69
|
+
}}
|
|
70
|
+
/>
|
|
71
|
+
)
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## API
|
|
76
|
+
|
|
77
|
+
### `<CategoryDock>`
|
|
78
|
+
|
|
79
|
+
| Prop | Type | Description |
|
|
80
|
+
| --- | --- | --- |
|
|
81
|
+
| `items` | `DockNavItem[]` | Nav items. `icon` is an image `src` string or a React node. |
|
|
82
|
+
| `menu` | `CategoryDockMenu` | Optional trailing dropdown; `renderContent({ side, close })` returns its body. |
|
|
83
|
+
| `renderImage` | `(src, alt, size) => ReactNode` | Renders string icons. Defaults to `<img>`. |
|
|
84
|
+
| `enableKeyboardShortcuts` | `boolean` | `Alt+1..n` triggers the matching item's `onClick`. |
|
|
85
|
+
| `placements` | `{ desktop?, mobile? }` | Which fixed placements to render. Defaults to both. |
|
|
86
|
+
| `className` | `string` | Extra classes on each placement wrapper. |
|
|
87
|
+
|
|
88
|
+
### `<ThemeMenu>`
|
|
89
|
+
|
|
90
|
+
Composable theme switcher (fragment of dropdown items). Props: `showAppearance?` (default
|
|
91
|
+
`true`), `defaultColorTheme?` (default `"modern-minimal"`).
|
|
92
|
+
|
|
93
|
+
### Provider / hooks
|
|
94
|
+
|
|
95
|
+
`CategoryDockProvider`, `useCategoryDock(currentCategory, onCategoryChange)`,
|
|
96
|
+
`useCategoryDockState()`, `useCategoryDockVisibility()` — optional context for sharing dock
|
|
97
|
+
visibility and per-page category state.
|
|
98
|
+
|
|
99
|
+
The shadcn dropdown and dock primitives (`Dock`, `DockItem`, `DropdownMenuItem`, …) are also
|
|
100
|
+
re-exported for building custom menu content.
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "shadcn-app-dock",
|
|
3
3
|
"description": "Prop-driven macOS-style category dock with magnification, a custom dropdown menu, and a built-in shadcn theme switcher",
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.2",
|
|
5
5
|
"author": "vtempest",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -62,4 +62,4 @@
|
|
|
62
62
|
"typescript": "^5.7.2",
|
|
63
63
|
"vite": "^8.1.3"
|
|
64
64
|
}
|
|
65
|
-
}
|
|
65
|
+
}
|