@bloomkit/react 0.2.11 → 0.2.13

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 (9) hide show
  1. package/README.md +40 -320
  2. package/dist/index.cjs +339 -3
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +1 -1
  5. package/dist/index.d.cts +45 -1
  6. package/dist/index.d.ts +45 -1
  7. package/dist/index.js +351 -15
  8. package/dist/index.js.map +1 -1
  9. package/package.json +11 -16
package/README.md CHANGED
@@ -9,298 +9,42 @@ Soft shapes. Breathing motion. Living color.
9
9
  ## Install
10
10
 
11
11
  ```bash
12
- npm install @bloomkit/react
12
+ pnpm add @bloomkit/react
13
13
  ```
14
14
 
15
15
  ## Setup
16
16
 
17
- Add the stylesheet to your CSS entry file:
17
+ Import the stylesheet in your CSS entry file:
18
18
 
19
19
  ```css
20
- /* index.css or globals.css */
21
20
  @import "@bloomkit/react/styles.css";
22
21
  ```
23
22
 
24
- Add the Google Fonts to your HTML `<head>`:
23
+ Add the fonts to your HTML `<head>`:
25
24
 
26
25
  ```html
27
26
  <link rel="preconnect" href="https://fonts.googleapis.com" />
28
27
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
29
- <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=Fraunces:opsz,wght@9..144,300;9..144,500&display=swap" rel="stylesheet" />
28
+ <link
29
+ href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=Fraunces:opsz,wght@9..144,300;9..144,500&display=swap"
30
+ rel="stylesheet"
31
+ />
30
32
  ```
31
33
 
32
34
  ## Customization
33
35
 
34
- All components accept a `className` prop for customization with Tailwind utility classes:
36
+ All components accept a `className` prop. Tailwind utility classes merge cleanly with bloom's defaults — your classes always win.
35
37
 
36
38
  ```tsx
37
39
  <Button variant="primary" className="rounded-full px-8">
38
40
  Custom Button
39
41
  </Button>
40
42
 
41
- <Card className="bg-white shadow-xl max-w-md">
43
+ <Card className="max-w-md">
42
44
  <CardContent>Custom styled card</CardContent>
43
45
  </Card>
44
-
45
- <Input className="border-blue-300 focus:border-blue-500" placeholder="Custom input" />
46
-
47
- <Badge variant="sage" className="text-sm uppercase tracking-wider">
48
- Custom Badge
49
- </Badge>
50
- ```
51
-
52
- Tailwind classes merge cleanly with bloom's defaults — your classes always win.
53
-
54
- ## Components
55
-
56
- ### Button
57
-
58
- ```tsx
59
- import { Button } from "@bloomkit/react";
60
-
61
- <Button variant="primary">Save</Button>
62
- <Button variant="secondary">Cancel</Button>
63
- <Button variant="ghost">Skip</Button>
64
- <Button variant="accent">Upgrade</Button>
65
- <Button variant="success">Confirm</Button>
66
- <Button variant="warning">Careful</Button>
67
- <Button variant="danger">Delete</Button>
68
- ```
69
-
70
- Variants: `primary` | `secondary` | `ghost` | `accent` | `success` | `warning` | `danger`
71
-
72
- ### Card
73
-
74
- ```tsx
75
- import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@bloomkit/react";
76
-
77
- <Card variant="interactive">
78
- <CardHeader>
79
- <CardTitle>Morning Reflection</CardTitle>
80
- <CardDescription>How are you feeling today?</CardDescription>
81
- </CardHeader>
82
- <CardContent>
83
- <p>Card body content</p>
84
- </CardContent>
85
- <CardFooter>
86
- <Button variant="ghost">Continue</Button>
87
- </CardFooter>
88
- </Card>
89
- ```
90
-
91
- Variants: `default` | `interactive` | `featured`
92
-
93
- ### Input & Textarea
94
-
95
- ```tsx
96
- import { Input, Textarea } from "@bloomkit/react";
97
-
98
- <Input placeholder="Your name" />
99
- <Input type="email" placeholder="your@email.com" />
100
- <Textarea placeholder="Write something beautiful..." />
101
- ```
102
-
103
- ### Toggle
104
-
105
- ```tsx
106
- import { Toggle } from "@bloomkit/react";
107
-
108
- <Toggle label="Ambient motion" defaultChecked />
109
- <Toggle label="Dark mode" />
110
- ```
111
-
112
- ### Badge
113
-
114
- ```tsx
115
- import { Badge } from "@bloomkit/react";
116
-
117
- <Badge variant="sage" dot>Active</Badge>
118
- <Badge variant="sand">Pending</Badge>
119
- <Badge variant="lavender">Draft</Badge>
120
- <Badge variant="rose">Archived</Badge>
121
- ```
122
-
123
- Variants: `sage` | `sand` | `lavender` | `rose`
124
-
125
- ### Alert
126
-
127
- ```tsx
128
- import { Alert, AlertTitle, AlertDescription } from "@bloomkit/react";
129
-
130
- <Alert variant="success">
131
- <AlertTitle>Saved</AlertTitle>
132
- <AlertDescription>Your changes have been saved.</AlertDescription>
133
- </Alert>
134
- ```
135
-
136
- Variants: `info` | `success` | `warning` | `error`
137
-
138
- ### Avatar
139
-
140
- ```tsx
141
- import { Avatar, AvatarGroup } from "@bloomkit/react";
142
-
143
- <Avatar initials="JD" size="md" />
144
- <Avatar src="/photo.jpg" alt="Jane Doe" />
145
-
146
- <AvatarGroup>
147
- <Avatar initials="A" />
148
- <Avatar initials="B" />
149
- <Avatar initials="C" />
150
- </AvatarGroup>
151
- ```
152
-
153
- Sizes: `sm` | `md` | `lg`
154
-
155
- ### Checkbox
156
-
157
- ```tsx
158
- import { Checkbox } from "@bloomkit/react";
159
-
160
- <Checkbox label="Accept terms" />
161
- <Checkbox label="Subscribe to updates" defaultChecked />
162
- <Checkbox />
163
- ```
164
-
165
- ### Radio Group
166
-
167
- ```tsx
168
- import { RadioGroup, RadioGroupItem } from "@bloomkit/react";
169
-
170
- <RadioGroup defaultValue="calm">
171
- <RadioGroupItem value="calm" label="Calm" />
172
- <RadioGroupItem value="focused" label="Focused" />
173
- <RadioGroupItem value="energized" label="Energized" />
174
- </RadioGroup>
175
46
  ```
176
47
 
177
- ### Select
178
-
179
- ```tsx
180
- import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@bloomkit/react";
181
-
182
- <Select>
183
- <SelectTrigger>
184
- <SelectValue placeholder="Pick a mood" />
185
- </SelectTrigger>
186
- <SelectContent>
187
- <SelectItem value="calm">Calm</SelectItem>
188
- <SelectItem value="focused">Focused</SelectItem>
189
- <SelectItem value="energized">Energized</SelectItem>
190
- </SelectContent>
191
- </Select>
192
- ```
193
-
194
- ### Tooltip
195
-
196
- ```tsx
197
- import { Tooltip, TooltipProvider } from "@bloomkit/react";
198
-
199
- <TooltipProvider>
200
- <Tooltip content="Save your progress">
201
- <Button>Save</Button>
202
- </Tooltip>
203
- </TooltipProvider>
204
- ```
205
-
206
- ### Progress
207
-
208
- ```tsx
209
- import { Progress, ProgressCircular } from "@bloomkit/react";
210
-
211
- <Progress value={60} />
212
- <ProgressCircular value={60} size={48} />
213
- ```
214
-
215
- ### Slider
216
-
217
- ```tsx
218
- import { Slider } from "@bloomkit/react";
219
-
220
- <Slider defaultValue={[50]} min={0} max={100} aria-label="Volume" />
221
- ```
222
-
223
- ### Modal
224
-
225
- ```tsx
226
- import { Modal } from "@bloomkit/react";
227
-
228
- const [open, setOpen] = useState(false);
229
-
230
- <Button onClick={() => setOpen(true)}>Open</Button>
231
- <Modal open={open} onOpenChange={setOpen} title="Hello" description="A gentle modal.">
232
- <p>Modal content here.</p>
233
- </Modal>
234
- ```
235
-
236
- ### Dropdown
237
-
238
- ```tsx
239
- import { Dropdown, DropdownItem, DropdownSeparator } from "@bloomkit/react";
240
-
241
- <Dropdown trigger={<Button>Options</Button>}>
242
- <DropdownItem>Edit</DropdownItem>
243
- <DropdownItem>Duplicate</DropdownItem>
244
- <DropdownSeparator />
245
- <DropdownItem>Delete</DropdownItem>
246
- </Dropdown>
247
- ```
248
-
249
- ### Tabs
250
-
251
- ```tsx
252
- import { Tabs, TabsList, TabsTrigger, TabsContent } from "@bloomkit/react";
253
-
254
- <Tabs defaultValue="overview">
255
- <TabsList variant="pill">
256
- <TabsTrigger value="overview">Overview</TabsTrigger>
257
- <TabsTrigger value="activity">Activity</TabsTrigger>
258
- </TabsList>
259
- <TabsContent value="overview">Overview content</TabsContent>
260
- <TabsContent value="activity">Activity content</TabsContent>
261
- </Tabs>
262
- ```
263
-
264
- ### Date Picker
265
-
266
- ```tsx
267
- import { DatePicker } from "@bloomkit/react";
268
-
269
- const [date, setDate] = useState<Date>();
270
-
271
- <DatePicker value={date} onChange={setDate} placeholder="Pick a date" />
272
- ```
273
-
274
- ### Toast
275
-
276
- ```tsx
277
- import { ToastProvider, useToast } from "@bloomkit/react";
278
-
279
- // Wrap your app
280
- <ToastProvider>
281
- <App />
282
- </ToastProvider>
283
-
284
- // Inside a component
285
- const { toast } = useToast();
286
- toast({ title: "Saved!", variant: "success" });
287
- ```
288
-
289
- Variants: `info` | `success` | `warning` | `error`
290
-
291
- ### Skeleton
292
-
293
- ```tsx
294
- import { Skeleton } from "@bloomkit/react";
295
-
296
- <Skeleton variant="text" />
297
- <Skeleton variant="card" />
298
- <Skeleton variant="avatar" />
299
- <Skeleton variant="custom" className="h-[100px] w-[200px] rounded-full" />
300
- ```
301
-
302
- Variants: `text` | `card` | `avatar` | `custom`
303
-
304
48
  ## Hooks
305
49
 
306
50
  ### useReducedMotion
@@ -315,7 +59,7 @@ const reduced = useReducedMotion();
315
59
 
316
60
  ### useBreathing
317
61
 
318
- Returns a CSS animation style object with a randomized delay for the breathing animation.
62
+ Returns an animation style with a randomized delay for the breathing effect.
319
63
 
320
64
  ```tsx
321
65
  import { useBreathing } from "@bloomkit/react";
@@ -331,12 +75,10 @@ Wrap your app with `ThemeProvider` and use the `useTheme` hook:
331
75
  ```tsx
332
76
  import { ThemeProvider, useTheme } from "@bloomkit/react";
333
77
 
334
- // Wrap your app — defaults to OS preference
335
78
  <ThemeProvider defaultColorMode="system">
336
79
  <App />
337
80
  </ThemeProvider>
338
81
 
339
- // Inside any component
340
82
  function ThemeToggle() {
341
83
  const { resolvedMode, toggleColorMode } = useTheme();
342
84
 
@@ -348,7 +90,7 @@ function ThemeToggle() {
348
90
  }
349
91
  ```
350
92
 
351
- ### useTheme return values
93
+ ### useTheme
352
94
 
353
95
  | Property | Type | Description |
354
96
  |----------|------|-------------|
@@ -368,18 +110,17 @@ The provider manages the `.dark` / `.light` class on `<html>` automatically and
368
110
 
369
111
  ### Built-in Presets
370
112
 
371
- Bloom ships with 3 preset palettes you can use out of the box:
113
+ Bloom ships with 3 preset palettes:
372
114
 
373
115
  ```tsx
374
116
  import { ThemeProvider, builtInPalettes } from "@bloomkit/react";
375
117
 
376
- // Pass all 3 presets — users can switch between bloom (default), midnight, desert, ocean
377
118
  <ThemeProvider palettes={builtInPalettes}>
378
119
  <App />
379
120
  </ThemeProvider>
380
121
  ```
381
122
 
382
- Or import individual palettes:
123
+ Or import individually:
383
124
 
384
125
  ```tsx
385
126
  import { midnightGarden, desertRose, oceanMist } from "@bloomkit/react";
@@ -393,57 +134,36 @@ import { midnightGarden, desertRose, oceanMist } from "@bloomkit/react";
393
134
 
394
135
  ### Custom Palettes
395
136
 
396
- Define your own palettes and let users switch between them at runtime. Each palette can have its own light and dark mode colors, fonts, radius, and shadows.
137
+ Define your own palettes and let users switch at runtime:
397
138
 
398
139
  ```tsx
399
140
  import { ThemeProvider, useTheme, type BloomPalette } from "@bloomkit/react";
400
141
 
401
- const myPalettes: BloomPalette[] = [
402
- {
403
- name: "ocean",
404
- light: {
405
- "--bloom-font": "'Nunito', sans-serif",
406
- "--bloom-font-display": "'Space Grotesk', sans-serif",
407
- "--bloom-bg": "#F4F8FA",
408
- "--bloom-surface": "#E8F0F4",
409
- "--bloom-surface2": "#D4E2EA",
410
- "--bloom-text": "#1A2E3A",
411
- "--bloom-text-secondary": "#5E7A8C",
412
- "--bloom-accent1": "#6AB8C4",
413
- "--bloom-accent1-deep": "#3A96A8",
414
- "--bloom-accent2": "#E0A860",
415
- "--bloom-accent2-deep": "#C08840",
416
- "--bloom-accent3": "#7CA0D4",
417
- "--bloom-accent3-deep": "#5A80B8",
418
- "--bloom-accent4": "#D47A7A",
419
- "--bloom-accent4-deep": "#B85A5A",
420
- },
421
- dark: {
422
- "--bloom-font": "'Nunito', sans-serif",
423
- "--bloom-font-display": "'Space Grotesk', sans-serif",
424
- "--bloom-bg": "#0E1A20",
425
- "--bloom-surface": "#162228",
426
- "--bloom-surface2": "#1E2E36",
427
- "--bloom-text": "#D8E8EE",
428
- "--bloom-text-secondary": "#7A9AAC",
429
- "--bloom-accent1": "#4A9AAC",
430
- "--bloom-accent1-deep": "#2A7A8C",
431
- "--bloom-accent2": "#C89048",
432
- "--bloom-accent2-deep": "#A87030",
433
- "--bloom-accent3": "#5A80B8",
434
- "--bloom-accent3-deep": "#3A60A0",
435
- "--bloom-accent4": "#B85A5A",
436
- "--bloom-accent4-deep": "#983A3A",
437
- },
142
+ const myPalette: BloomPalette = {
143
+ name: "ocean",
144
+ light: {
145
+ "--bloom-font": "'Nunito', sans-serif",
146
+ "--bloom-font-display": "'Space Grotesk', sans-serif",
147
+ "--bloom-bg": "#F4F8FA",
148
+ "--bloom-surface": "#E8F0F4",
149
+ "--bloom-surface2": "#D4E2EA",
150
+ "--bloom-text": "#1A2E3A",
151
+ "--bloom-text-secondary": "#5E7A8C",
152
+ "--bloom-accent1": "#6AB8C4",
153
+ "--bloom-accent1-deep": "#3A96A8",
154
+ // ...
155
+ },
156
+ dark: {
157
+ "--bloom-bg": "#0E1A20",
158
+ "--bloom-surface": "#162228",
159
+ // ...
438
160
  },
439
- ];
161
+ };
440
162
 
441
- // Pass palettes to the provider
442
- <ThemeProvider palettes={myPalettes}>
163
+ <ThemeProvider palettes={[myPalette]}>
443
164
  <App />
444
165
  </ThemeProvider>
445
166
 
446
- // Switch palettes from anywhere
447
167
  function PaletteSwitcher() {
448
168
  const { palette, setPalette, palettes } = useTheme();
449
169
 
@@ -457,9 +177,9 @@ function PaletteSwitcher() {
457
177
  }
458
178
  ```
459
179
 
460
- The `"bloom"` palette is always available as the default. Custom palettes override the default tokens — any token you don't specify falls back to Bloom's defaults. Both color mode and palette choice are persisted to `localStorage`.
180
+ The `"bloom"` palette is always available as the default. Any value you don't specify falls back to Bloom's defaults.
461
181
 
462
- ### Available tokens
182
+ ## Design Tokens
463
183
 
464
184
  | Token | What it controls |
465
185
  |-------|-----------------|
@@ -470,10 +190,10 @@ The `"bloom"` palette is always available as the default. Custom palettes overri
470
190
  | `--bloom-surface2` | Borders, dividers, hover states |
471
191
  | `--bloom-text` | Primary text color |
472
192
  | `--bloom-text-secondary` | Labels, descriptions, captions |
473
- | `--bloom-accent1` / `--bloom-accent1-deep` | Primary/success color (sage) |
474
- | `--bloom-accent2` / `--bloom-accent2-deep` | Warning color (sand) |
475
- | `--bloom-accent3` / `--bloom-accent3-deep` | Info/accent color (lavender) |
476
- | `--bloom-accent4` / `--bloom-accent4-deep` | Danger/error color (rose) |
193
+ | `--bloom-accent1` / `--bloom-accent1-deep` | Primary/success color |
194
+ | `--bloom-accent2` / `--bloom-accent2-deep` | Warning color |
195
+ | `--bloom-accent3` / `--bloom-accent3-deep` | Info/accent color |
196
+ | `--bloom-accent4` / `--bloom-accent4-deep` | Danger/error color |
477
197
  | `--bloom-shadow` / `--bloom-shadow-hover` | Elevation shadows |
478
198
  | `--bloom-radius-sm` / `--bloom-radius` / `--bloom-radius-lg` / `--bloom-radius-pill` | Border radius |
479
199
  | `--bloom-duration` / `--bloom-duration-slow` / `--bloom-duration-fast` | Animation timing |