@bloomkit/react 0.2.1 → 0.2.3

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 +49 -9
  2. package/dist/index.cjs +155 -1
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +1 -1
  5. package/dist/index.d.cts +6 -1
  6. package/dist/index.d.ts +6 -1
  7. package/dist/index.js +154 -0
  8. package/dist/index.js.map +1 -1
  9. package/package.json +1 -1
package/README.md CHANGED
@@ -40,9 +40,12 @@ import { Button } from "@bloomkit/react";
40
40
  <Button variant="secondary">Cancel</Button>
41
41
  <Button variant="ghost">Skip</Button>
42
42
  <Button variant="accent">Upgrade</Button>
43
+ <Button variant="success">Confirm</Button>
44
+ <Button variant="warning">Careful</Button>
45
+ <Button variant="danger">Delete</Button>
43
46
  ```
44
47
 
45
- Variants: `primary` | `secondary` | `ghost` | `accent`
48
+ Variants: `primary` | `secondary` | `ghost` | `accent` | `success` | `warning` | `danger`
46
49
 
47
50
  ### Card
48
51
 
@@ -232,8 +235,11 @@ import { Skeleton } from "@bloomkit/react";
232
235
  <Skeleton variant="text" />
233
236
  <Skeleton variant="card" />
234
237
  <Skeleton variant="avatar" />
238
+ <Skeleton variant="custom" className="h-[100px] w-[200px] rounded-full" />
235
239
  ```
236
240
 
241
+ Variants: `text` | `card` | `avatar` | `custom`
242
+
237
243
  ## Hooks
238
244
 
239
245
  ### useReducedMotion
@@ -271,7 +277,7 @@ import { ThemeProvider, useTheme } from "@bloomkit/react";
271
277
 
272
278
  // Inside any component
273
279
  function ThemeToggle() {
274
- const { resolvedMode, toggleColorMode, setColorMode } = useTheme();
280
+ const { resolvedMode, toggleColorMode } = useTheme();
275
281
 
276
282
  return (
277
283
  <button onClick={toggleColorMode}>
@@ -279,20 +285,54 @@ function ThemeToggle() {
279
285
  </button>
280
286
  );
281
287
  }
282
-
283
- // Or set explicitly
284
- setColorMode("dark"); // force dark
285
- setColorMode("light"); // force light
286
- setColorMode("system"); // follow OS
287
288
  ```
288
289
 
289
- The provider manages the `.dark` / `.light` class on `<html>` automatically and persists the user's choice to `localStorage`.
290
+ ### useTheme return values
291
+
292
+ | Property | Type | Description |
293
+ |----------|------|-------------|
294
+ | `colorMode` | `"light" \| "dark" \| "system"` | Current setting |
295
+ | `resolvedMode` | `"light" \| "dark"` | Resolved value (system preference applied) |
296
+ | `setColorMode` | `(mode) => void` | Set to `"dark"`, `"light"`, or `"system"` |
297
+ | `toggleColorMode` | `() => void` | Toggle between light and dark |
298
+ | `palette` | `string` | Active palette name |
299
+ | `setPalette` | `(name) => void` | Switch to a different palette |
300
+ | `palettes` | `string[]` | All available palette names |
301
+
302
+ The provider manages the `.dark` / `.light` class on `<html>` automatically and persists both color mode and palette choice to `localStorage`.
290
303
 
291
304
  **Without the provider:** add the `dark` class or `data-theme="dark"` attribute to `<html>` manually, or let it follow the OS preference automatically (no setup needed).
292
305
 
293
306
  ## Palettes
294
307
 
295
- Define multiple palettes and let users switch between them at runtime. Each palette can have its own light and dark mode colors, fonts, radius, and shadows.
308
+ ### Built-in Presets
309
+
310
+ Bloom ships with 3 preset palettes you can use out of the box:
311
+
312
+ ```tsx
313
+ import { ThemeProvider, builtInPalettes } from "@bloomkit/react";
314
+
315
+ // Pass all 3 presets — users can switch between bloom (default), midnight, desert, ocean
316
+ <ThemeProvider palettes={builtInPalettes}>
317
+ <App />
318
+ </ThemeProvider>
319
+ ```
320
+
321
+ Or import individual palettes:
322
+
323
+ ```tsx
324
+ import { midnightGarden, desertRose, oceanMist } from "@bloomkit/react";
325
+ ```
326
+
327
+ | Preset | Fonts | Vibe |
328
+ |--------|-------|------|
329
+ | **Midnight Garden** | Playfair Display + Cormorant Garamond | Deep forest greens, moonlit silvers |
330
+ | **Desert Rose** | Lora + Karla | Terracotta, ochre, dried sage |
331
+ | **Ocean Mist** | Space Grotesk + Nunito | Cool aquas, seafoam, pearl whites |
332
+
333
+ ### Custom Palettes
334
+
335
+ 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.
296
336
 
297
337
  ```tsx
298
338
  import { ThemeProvider, useTheme, type BloomPalette } from "@bloomkit/react";
package/dist/index.cjs CHANGED
@@ -1419,6 +1419,160 @@ function ThemeProvider({
1419
1419
  );
1420
1420
  }
1421
1421
 
1422
+ // src/palettes/built-in.ts
1423
+ var midnightGarden = {
1424
+ name: "midnight",
1425
+ light: {
1426
+ "--bloom-font": "'Cormorant Garamond', serif",
1427
+ "--bloom-font-display": "'Playfair Display', serif",
1428
+ "--bloom-bg": "#F5F3F8",
1429
+ "--bloom-surface": "#EAE6F0",
1430
+ "--bloom-surface2": "#DBD5E4",
1431
+ "--bloom-text": "#1E1A28",
1432
+ "--bloom-text-secondary": "#6B6580",
1433
+ "--bloom-accent1": "#5E8C6A",
1434
+ "--bloom-accent1-deep": "#3D6B4A",
1435
+ "--bloom-accent2": "#6A7EC8",
1436
+ "--bloom-accent2-deep": "#4A5EA8",
1437
+ "--bloom-accent3": "#8B6AAE",
1438
+ "--bloom-accent3-deep": "#6A4A8E",
1439
+ "--bloom-accent4": "#C86A7E",
1440
+ "--bloom-accent4-deep": "#A84A5E",
1441
+ "--bloom-shadow": "0 2px 24px rgba(30,26,40,0.08)",
1442
+ "--bloom-shadow-hover": "0 8px 40px rgba(30,26,40,0.14)",
1443
+ "--bloom-radius-sm": "8px",
1444
+ "--bloom-radius": "12px",
1445
+ "--bloom-radius-lg": "16px",
1446
+ "--bloom-radius-pill": "999px"
1447
+ },
1448
+ dark: {
1449
+ "--bloom-font": "'Cormorant Garamond', serif",
1450
+ "--bloom-font-display": "'Playfair Display', serif",
1451
+ "--bloom-bg": "#0F1117",
1452
+ "--bloom-surface": "#1A1D27",
1453
+ "--bloom-surface2": "#252A36",
1454
+ "--bloom-text": "#E2E0EC",
1455
+ "--bloom-text-secondary": "#8B87A0",
1456
+ "--bloom-accent1": "#5E8C6A",
1457
+ "--bloom-accent1-deep": "#3D6B4A",
1458
+ "--bloom-accent2": "#6A7EC8",
1459
+ "--bloom-accent2-deep": "#4A5EA8",
1460
+ "--bloom-accent3": "#8B6AAE",
1461
+ "--bloom-accent3-deep": "#6A4A8E",
1462
+ "--bloom-accent4": "#C86A7E",
1463
+ "--bloom-accent4-deep": "#A84A5E",
1464
+ "--bloom-shadow": "0 2px 24px rgba(0,0,0,0.3)",
1465
+ "--bloom-shadow-hover": "0 8px 40px rgba(0,0,0,0.4)",
1466
+ "--bloom-radius-sm": "8px",
1467
+ "--bloom-radius": "12px",
1468
+ "--bloom-radius-lg": "16px",
1469
+ "--bloom-radius-pill": "999px"
1470
+ }
1471
+ };
1472
+ var desertRose = {
1473
+ name: "desert",
1474
+ light: {
1475
+ "--bloom-font": "'Karla', sans-serif",
1476
+ "--bloom-font-display": "'Lora', serif",
1477
+ "--bloom-bg": "#FBF5EE",
1478
+ "--bloom-surface": "#F2E8DA",
1479
+ "--bloom-surface2": "#E6D8C4",
1480
+ "--bloom-text": "#3D2E1E",
1481
+ "--bloom-text-secondary": "#8C7A66",
1482
+ "--bloom-accent1": "#B8A080",
1483
+ "--bloom-accent1-deep": "#96795A",
1484
+ "--bloom-accent2": "#D4956A",
1485
+ "--bloom-accent2-deep": "#B87040",
1486
+ "--bloom-accent3": "#C4887C",
1487
+ "--bloom-accent3-deep": "#A8685C",
1488
+ "--bloom-accent4": "#CC6B5E",
1489
+ "--bloom-accent4-deep": "#A84A3E",
1490
+ "--bloom-shadow": "0 2px 24px rgba(61,46,30,0.08)",
1491
+ "--bloom-shadow-hover": "0 8px 40px rgba(61,46,30,0.14)",
1492
+ "--bloom-radius-sm": "16px",
1493
+ "--bloom-radius": "20px",
1494
+ "--bloom-radius-lg": "28px",
1495
+ "--bloom-radius-pill": "999px"
1496
+ },
1497
+ dark: {
1498
+ "--bloom-font": "'Karla', sans-serif",
1499
+ "--bloom-font-display": "'Lora', serif",
1500
+ "--bloom-bg": "#1C1610",
1501
+ "--bloom-surface": "#28201A",
1502
+ "--bloom-surface2": "#362C22",
1503
+ "--bloom-text": "#E8DED0",
1504
+ "--bloom-text-secondary": "#9A8A76",
1505
+ "--bloom-accent1": "#A08868",
1506
+ "--bloom-accent1-deep": "#7E6848",
1507
+ "--bloom-accent2": "#C48050",
1508
+ "--bloom-accent2-deep": "#A06030",
1509
+ "--bloom-accent3": "#B07868",
1510
+ "--bloom-accent3-deep": "#905848",
1511
+ "--bloom-accent4": "#B85848",
1512
+ "--bloom-accent4-deep": "#983828",
1513
+ "--bloom-shadow": "0 2px 24px rgba(0,0,0,0.3)",
1514
+ "--bloom-shadow-hover": "0 8px 40px rgba(0,0,0,0.4)",
1515
+ "--bloom-radius-sm": "16px",
1516
+ "--bloom-radius": "20px",
1517
+ "--bloom-radius-lg": "28px",
1518
+ "--bloom-radius-pill": "999px"
1519
+ }
1520
+ };
1521
+ var oceanMist = {
1522
+ name: "ocean",
1523
+ light: {
1524
+ "--bloom-font": "'Nunito', sans-serif",
1525
+ "--bloom-font-display": "'Space Grotesk', sans-serif",
1526
+ "--bloom-bg": "#F4F8FA",
1527
+ "--bloom-surface": "#E8F0F4",
1528
+ "--bloom-surface2": "#D4E2EA",
1529
+ "--bloom-text": "#1A2E3A",
1530
+ "--bloom-text-secondary": "#5E7A8C",
1531
+ "--bloom-accent1": "#6AB8C4",
1532
+ "--bloom-accent1-deep": "#3A96A8",
1533
+ "--bloom-accent2": "#E0A860",
1534
+ "--bloom-accent2-deep": "#C08840",
1535
+ "--bloom-accent3": "#7CA0D4",
1536
+ "--bloom-accent3-deep": "#5A80B8",
1537
+ "--bloom-accent4": "#D47A7A",
1538
+ "--bloom-accent4-deep": "#B85A5A",
1539
+ "--bloom-shadow": "0 2px 24px rgba(26,46,58,0.06)",
1540
+ "--bloom-shadow-hover": "0 8px 40px rgba(26,46,58,0.1)",
1541
+ "--bloom-radius-sm": "6px",
1542
+ "--bloom-radius": "10px",
1543
+ "--bloom-radius-lg": "14px",
1544
+ "--bloom-radius-pill": "999px"
1545
+ },
1546
+ dark: {
1547
+ "--bloom-font": "'Nunito', sans-serif",
1548
+ "--bloom-font-display": "'Space Grotesk', sans-serif",
1549
+ "--bloom-bg": "#0E1A20",
1550
+ "--bloom-surface": "#162228",
1551
+ "--bloom-surface2": "#1E2E36",
1552
+ "--bloom-text": "#D8E8EE",
1553
+ "--bloom-text-secondary": "#7A9AAC",
1554
+ "--bloom-accent1": "#4A9AAC",
1555
+ "--bloom-accent1-deep": "#2A7A8C",
1556
+ "--bloom-accent2": "#C89048",
1557
+ "--bloom-accent2-deep": "#A87030",
1558
+ "--bloom-accent3": "#5A80B8",
1559
+ "--bloom-accent3-deep": "#3A60A0",
1560
+ "--bloom-accent4": "#B85A5A",
1561
+ "--bloom-accent4-deep": "#983A3A",
1562
+ "--bloom-shadow": "0 2px 24px rgba(0,0,0,0.3)",
1563
+ "--bloom-shadow-hover": "0 8px 40px rgba(0,0,0,0.4)",
1564
+ "--bloom-radius-sm": "6px",
1565
+ "--bloom-radius": "10px",
1566
+ "--bloom-radius-lg": "14px",
1567
+ "--bloom-radius-pill": "999px"
1568
+ }
1569
+ };
1570
+ var builtInPalettes = [midnightGarden, desertRose, oceanMist];
1571
+
1572
+
1573
+
1574
+
1575
+
1422
1576
 
1423
1577
 
1424
1578
 
@@ -1476,5 +1630,5 @@ function ThemeProvider({
1476
1630
 
1477
1631
 
1478
1632
 
1479
- exports.Alert = Alert; exports.AlertDescription = AlertDescription; exports.AlertTitle = AlertTitle; exports.Avatar = Avatar; exports.AvatarGroup = AvatarGroup; exports.Badge = Badge; exports.Button = Button; exports.Card = Card; exports.CardContent = CardContent; exports.CardDescription = CardDescription; exports.CardFooter = CardFooter; exports.CardHeader = CardHeader; exports.CardTitle = CardTitle; exports.DatePicker = DatePicker; exports.Dropdown = Dropdown; exports.DropdownItem = DropdownItem; exports.DropdownSeparator = DropdownSeparator; exports.Input = Input; exports.Modal = Modal; exports.Progress = Progress; exports.ProgressCircular = ProgressCircular; exports.Skeleton = Skeleton; exports.Slider = Slider; exports.Tabs = Tabs; exports.TabsContent = TabsContent; exports.TabsList = TabsList; exports.TabsTrigger = TabsTrigger; exports.Textarea = Textarea; exports.ThemeProvider = ThemeProvider; exports.ToastProvider = ToastProvider; exports.Toggle = Toggle; exports.Tooltip = Tooltip; exports.TooltipProvider = TooltipProvider; exports.alertVariants = alertVariants; exports.avatarVariants = avatarVariants; exports.badgeVariants = badgeVariants; exports.bloomSpring = bloomSpring; exports.bloomTransition = bloomTransition; exports.bloomTransitionFast = bloomTransitionFast; exports.bloomTransitionSlow = bloomTransitionSlow; exports.buttonVariants = buttonVariants; exports.cardHoverLift = cardHoverLift; exports.cardVariants = cardVariants; exports.cn = cn; exports.fadeIn = fadeIn; exports.hoverLift = hoverLift; exports.inputVariants = inputVariants; exports.progressFillVariants = progressFillVariants; exports.progressTrackVariants = progressTrackVariants; exports.skeletonVariants = skeletonVariants; exports.slideUp = slideUp; exports.tabsListVariants = tabsListVariants; exports.toastVariants = toastVariants; exports.useBreathing = useBreathing; exports.useReducedMotion = useReducedMotion; exports.useTheme = useTheme; exports.useToast = useToast;
1633
+ exports.Alert = Alert; exports.AlertDescription = AlertDescription; exports.AlertTitle = AlertTitle; exports.Avatar = Avatar; exports.AvatarGroup = AvatarGroup; exports.Badge = Badge; exports.Button = Button; exports.Card = Card; exports.CardContent = CardContent; exports.CardDescription = CardDescription; exports.CardFooter = CardFooter; exports.CardHeader = CardHeader; exports.CardTitle = CardTitle; exports.DatePicker = DatePicker; exports.Dropdown = Dropdown; exports.DropdownItem = DropdownItem; exports.DropdownSeparator = DropdownSeparator; exports.Input = Input; exports.Modal = Modal; exports.Progress = Progress; exports.ProgressCircular = ProgressCircular; exports.Skeleton = Skeleton; exports.Slider = Slider; exports.Tabs = Tabs; exports.TabsContent = TabsContent; exports.TabsList = TabsList; exports.TabsTrigger = TabsTrigger; exports.Textarea = Textarea; exports.ThemeProvider = ThemeProvider; exports.ToastProvider = ToastProvider; exports.Toggle = Toggle; exports.Tooltip = Tooltip; exports.TooltipProvider = TooltipProvider; exports.alertVariants = alertVariants; exports.avatarVariants = avatarVariants; exports.badgeVariants = badgeVariants; exports.bloomSpring = bloomSpring; exports.bloomTransition = bloomTransition; exports.bloomTransitionFast = bloomTransitionFast; exports.bloomTransitionSlow = bloomTransitionSlow; exports.builtInPalettes = builtInPalettes; exports.buttonVariants = buttonVariants; exports.cardHoverLift = cardHoverLift; exports.cardVariants = cardVariants; exports.cn = cn; exports.desertRose = desertRose; exports.fadeIn = fadeIn; exports.hoverLift = hoverLift; exports.inputVariants = inputVariants; exports.midnightGarden = midnightGarden; exports.oceanMist = oceanMist; exports.progressFillVariants = progressFillVariants; exports.progressTrackVariants = progressTrackVariants; exports.skeletonVariants = skeletonVariants; exports.slideUp = slideUp; exports.tabsListVariants = tabsListVariants; exports.toastVariants = toastVariants; exports.useBreathing = useBreathing; exports.useReducedMotion = useReducedMotion; exports.useTheme = useTheme; exports.useToast = useToast;
1480
1634
  //# sourceMappingURL=index.cjs.map