@privateers/ui 0.1.0

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.
Files changed (14) hide show
  1. package/README.md +167 -0
  2. package/dist/index.cjs +1152 -0
  3. package/dist/index.cjs.map +1 -0
  4. package/dist/index.d.cts +129 -0
  5. package/dist/index.d.ts +129 -0
  6. package/dist/index.js +1082 -0
  7. package/dist/index.js.map +1 -0
  8. package/dist/tailwind/preset.cjs +81 -0
  9. package/dist/tailwind/preset.cjs.map +1 -0
  10. package/dist/tailwind/preset.d.cts +19 -0
  11. package/dist/tailwind/preset.d.ts +19 -0
  12. package/dist/tailwind/preset.js +76 -0
  13. package/dist/tailwind/preset.js.map +1 -0
  14. package/package.json +90 -0
package/README.md ADDED
@@ -0,0 +1,167 @@
1
+ # @privateers/ui
2
+
3
+ Privateers Design System - A modern React component library built with Radix UI, CVA, and Tailwind CSS v4.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @privateers/ui
9
+ # or
10
+ pnpm add @privateers/ui
11
+ # or
12
+ yarn add @privateers/ui
13
+ ```
14
+
15
+ ## Setup
16
+
17
+ ### 1. Configure Tailwind CSS v4
18
+
19
+ Add the design system styles to your main CSS file:
20
+
21
+ ```css
22
+ /* app/globals.css or src/index.css */
23
+ @import "tailwindcss";
24
+ @import "@privateers/ui/styles";
25
+
26
+ /* Scan the design system components */
27
+ @source "../node_modules/@privateers/ui/dist/**/*.js";
28
+ ```
29
+
30
+ ### 2. Add Figtree Font
31
+
32
+ Add Google Fonts to your HTML `<head>`:
33
+
34
+ ```html
35
+ <link rel="preconnect" href="https://fonts.googleapis.com">
36
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
37
+ <link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Geist+Mono:wght@100..900&display=swap" rel="stylesheet">
38
+ ```
39
+
40
+ Or in Next.js, use `next/font`:
41
+
42
+ ```tsx
43
+ // app/layout.tsx
44
+ import { Figtree } from 'next/font/google'
45
+
46
+ const figtree = Figtree({
47
+ subsets: ['latin'],
48
+ variable: '--font-sans',
49
+ })
50
+
51
+ export default function RootLayout({ children }) {
52
+ return (
53
+ <html lang="en" className={figtree.variable}>
54
+ <body>{children}</body>
55
+ </html>
56
+ )
57
+ }
58
+ ```
59
+
60
+ ## Usage
61
+
62
+ ```tsx
63
+ import { Button, Card, Input, Label } from '@privateers/ui'
64
+
65
+ export function MyComponent() {
66
+ return (
67
+ <Card className="p-6">
68
+ <div className="space-y-4">
69
+ <div>
70
+ <Label htmlFor="email">Email</Label>
71
+ <Input id="email" type="email" placeholder="Enter your email" />
72
+ </div>
73
+ <Button>Submit</Button>
74
+ </div>
75
+ </Card>
76
+ )
77
+ }
78
+ ```
79
+
80
+ ## Available Components
81
+
82
+ ### Layout & Containers
83
+ - `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter`
84
+
85
+ ### Forms
86
+ - `Button` - Primary actions with multiple variants
87
+ - `Input` - Text input fields
88
+ - `Label` - Form labels
89
+ - `Checkbox` - Checkbox inputs
90
+ - `Select` - Dropdown selections
91
+
92
+ ### Feedback
93
+ - `Badge` - Status indicators
94
+ - `Skeleton` - Loading placeholders
95
+ - `Separator` - Visual dividers
96
+
97
+ ### Navigation
98
+ - `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`
99
+
100
+ ### Overlays
101
+ - `Dialog`, `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogTitle`, `DialogDescription`
102
+ - `Popover`, `PopoverTrigger`, `PopoverContent`
103
+ - `Tooltip`, `TooltipProvider`, `TooltipTrigger`, `TooltipContent`
104
+
105
+ ## Button Variants
106
+
107
+ ```tsx
108
+ <Button variant="default">Primary</Button>
109
+ <Button variant="secondary">Secondary</Button>
110
+ <Button variant="outline">Outline</Button>
111
+ <Button variant="ghost">Ghost</Button>
112
+ <Button variant="link">Link</Button>
113
+ <Button variant="destructive">Destructive</Button>
114
+
115
+ <Button size="sm">Small</Button>
116
+ <Button size="default">Default</Button>
117
+ <Button size="lg">Large</Button>
118
+ <Button size="icon"><Icon /></Button>
119
+ ```
120
+
121
+ ## Dark Mode
122
+
123
+ The design system supports dark mode via the `.dark` class on a parent element:
124
+
125
+ ```tsx
126
+ <html className="dark">
127
+ {/* Dark mode enabled */}
128
+ </html>
129
+ ```
130
+
131
+ Or toggle dynamically:
132
+
133
+ ```tsx
134
+ document.documentElement.classList.toggle('dark')
135
+ ```
136
+
137
+ ## Design Tokens
138
+
139
+ The design system uses OKLch colors for perceptually uniform color relationships:
140
+
141
+ | Token | Description |
142
+ |-------|-------------|
143
+ | `--primary` | Primary brand color (Indigo) |
144
+ | `--secondary` | Secondary color (Zinc) |
145
+ | `--background` | Page background |
146
+ | `--foreground` | Text color |
147
+ | `--muted` | Muted backgrounds |
148
+ | `--accent` | Accent color |
149
+ | `--destructive` | Error/danger color |
150
+ | `--border` | Border color |
151
+ | `--ring` | Focus ring color |
152
+
153
+ ## TypeScript
154
+
155
+ Full TypeScript support with exported types:
156
+
157
+ ```tsx
158
+ import type { ButtonProps } from '@privateers/ui'
159
+
160
+ const MyButton: React.FC<ButtonProps> = (props) => {
161
+ return <Button {...props} />
162
+ }
163
+ ```
164
+
165
+ ## License
166
+
167
+ MIT