@madebywild/wvk 0.0.1
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 +84 -0
- package/dist/icons.cjs +4899 -0
- package/dist/icons.cjs.map +1 -0
- package/dist/icons.d.cts +3 -0
- package/dist/icons.d.ts +3 -0
- package/dist/icons.js +4690 -0
- package/dist/icons.js.map +1 -0
- package/dist/index-CQDaCDUc.d.cts +562 -0
- package/dist/index-CQDaCDUc.d.ts +562 -0
- package/dist/index.cjs +7454 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +546 -0
- package/dist/index.d.ts +546 -0
- package/dist/index.js +7356 -0
- package/dist/index.js.map +1 -0
- package/dist/styles.css +392 -0
- package/package.json +66 -0
package/README.md
ADDED
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
# @madebywild/wvk
|
|
2
|
+
|
|
3
|
+
Wireframe kit — accessible React components, 183 icons, and design tokens that map 1:1 to the wild Wireframe Kit Figma library.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
pnpm add @madebywild/wvk
|
|
9
|
+
# peers
|
|
10
|
+
pnpm add react react-dom
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
The kit assumes Tailwind CSS v4 in your app.
|
|
14
|
+
|
|
15
|
+
## Use components
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import { Button, TextInput, Tag } from "@madebywild/wvk";
|
|
19
|
+
|
|
20
|
+
export function Example() {
|
|
21
|
+
return (
|
|
22
|
+
<div>
|
|
23
|
+
<TextInput placeholder="Search" />
|
|
24
|
+
<Button>Save</Button>
|
|
25
|
+
<Tag>New</Tag>
|
|
26
|
+
</div>
|
|
27
|
+
);
|
|
28
|
+
}
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Use icons
|
|
32
|
+
|
|
33
|
+
Icons ship as pre-compiled React components — no SVGR setup required in your app. Import only what you use; the rest tree-shakes away.
|
|
34
|
+
|
|
35
|
+
```tsx
|
|
36
|
+
import { MagnifyingGlass, ArrowRight } from "@madebywild/wvk/icons";
|
|
37
|
+
|
|
38
|
+
<MagnifyingGlass className="h-4 w-4" />;
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
Paths use `currentColor`, so the icon inherits the parent's text color.
|
|
42
|
+
|
|
43
|
+
## Use the design tokens
|
|
44
|
+
|
|
45
|
+
In your global stylesheet (after `@import "tailwindcss";`):
|
|
46
|
+
|
|
47
|
+
```css
|
|
48
|
+
@import "tailwindcss";
|
|
49
|
+
@custom-variant dark (&:where(.dark, .dark *));
|
|
50
|
+
@import "@madebywild/wvk/styles.css";
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
This registers the `wvk-*` color, surface, foreground, border, transparency, primitive, radius, size, and cursor tokens, plus light/dark theme values (toggle by adding `class="dark"` to `<html>`).
|
|
54
|
+
|
|
55
|
+
### Cursor assets (optional)
|
|
56
|
+
|
|
57
|
+
The cursor tokens reference `/cursors/arrow.svg`, `/cursors/pointer.svg`, and `/cursors/move.svg`. To use them, copy those three SVGs into your app's public root (e.g. `public/cursors/` for Next.js). They are not bundled with the package because a kit cannot ship into a consumer's static asset folder. If the files are missing the browser falls back to system cursors via the keyword fallbacks declared in the tokens.
|
|
58
|
+
|
|
59
|
+
## Theme switching
|
|
60
|
+
|
|
61
|
+
Wrap your app in `ThemeProvider` and drop the prebuilt switcher anywhere:
|
|
62
|
+
|
|
63
|
+
```tsx
|
|
64
|
+
import { ThemeProvider, ThemeSwitcher } from "@madebywild/wvk";
|
|
65
|
+
|
|
66
|
+
export default function RootLayout({ children }) {
|
|
67
|
+
return (
|
|
68
|
+
<ThemeProvider>
|
|
69
|
+
<ThemeSwitcher />
|
|
70
|
+
{children}
|
|
71
|
+
</ThemeProvider>
|
|
72
|
+
);
|
|
73
|
+
}
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## Design-token philosophy
|
|
77
|
+
|
|
78
|
+
Tokens are organized in three tiers:
|
|
79
|
+
|
|
80
|
+
- **Primitives** (`--wvk-primitive-*`) — fixed palette swatches (Dark, Medium, Soft, …) matching the Figma Colors frame.
|
|
81
|
+
- **Semantic** (`--wvk-surface-*`, `--wvk-foreground-*`, `--wvk-border-*`, `--wvk-transparency-*`) — role-based tokens that flip between light and dark themes.
|
|
82
|
+
- **Shadcn-compatible** (`--background`, `--foreground`, `--primary`, …) — driven by the semantic tier so any shadcn-style components keep working.
|
|
83
|
+
|
|
84
|
+
Always prefer semantic tokens in product code; reach for primitives only for one-off accents.
|