@bloomkit/react 0.1.3 → 0.1.6

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 +86 -7
  2. package/dist/index.cjs +98 -33
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +1 -1
  5. package/dist/index.d.cts +3 -3
  6. package/dist/index.d.ts +3 -3
  7. package/dist/index.js +122 -57
  8. package/dist/index.js.map +1 -1
  9. package/package.json +1 -1
package/README.md CHANGED
@@ -267,20 +267,99 @@ Add the `dark` class or `data-theme="dark"` attribute to `<html>`:
267
267
 
268
268
  Or let it follow the OS preference automatically — no extra setup needed.
269
269
 
270
- ## Design Tokens
270
+ ## Theming
271
271
 
272
- All styles use CSS custom properties. Override them to theme:
272
+ All styles use CSS custom properties. Create a custom theme by overriding them in your CSS — every component updates instantly.
273
+
274
+ ### Example: "Ocean Mist" theme
273
275
 
274
276
  ```css
277
+ /* index.css */
278
+ @import "@bloomkit/react/styles.css";
279
+
280
+ /* Light mode */
275
281
  :root {
276
- --bloom-accent1: #your-color;
277
- --bloom-accent1-deep: #your-deep-color;
278
- --bloom-bg: #your-background;
279
- --bloom-surface: #your-surface;
280
- --bloom-text: #your-text;
282
+ /* Fonts */
283
+ --bloom-font: 'Nunito', sans-serif;
284
+ --bloom-font-display: 'Space Grotesk', sans-serif;
285
+
286
+ /* Surfaces */
287
+ --bloom-bg: #F4F8FA;
288
+ --bloom-surface: #E8F0F4;
289
+ --bloom-surface2: #D4E2EA;
290
+
291
+ /* Text */
292
+ --bloom-text: #1A2E3A;
293
+ --bloom-text-secondary: #5E7A8C;
294
+
295
+ /* Accents — success/primary (sage) */
296
+ --bloom-accent1: #6AB8C4;
297
+ --bloom-accent1-deep: #3A96A8;
298
+
299
+ /* Accents — warning (sand) */
300
+ --bloom-accent2: #E0A860;
301
+ --bloom-accent2-deep: #C08840;
302
+
303
+ /* Accents — info/accent (lavender) */
304
+ --bloom-accent3: #7CA0D4;
305
+ --bloom-accent3-deep: #5A80B8;
306
+
307
+ /* Accents — error/danger (rose) */
308
+ --bloom-accent4: #D47A7A;
309
+ --bloom-accent4-deep: #B85A5A;
310
+
311
+ /* Shadows */
312
+ --bloom-shadow: 0 2px 24px rgba(26, 46, 58, 0.06);
313
+ --bloom-shadow-hover: 0 8px 40px rgba(26, 46, 58, 0.1);
314
+
315
+ /* Shape — optional */
316
+ --bloom-radius-sm: 6px;
317
+ --bloom-radius: 10px;
318
+ --bloom-radius-lg: 14px;
319
+ }
320
+
321
+ /* Dark mode */
322
+ :root.dark,
323
+ [data-theme="dark"] {
324
+ --bloom-bg: #0E1A20;
325
+ --bloom-surface: #162228;
326
+ --bloom-surface2: #1E2E36;
327
+ --bloom-text: #D8E8EE;
328
+ --bloom-text-secondary: #7A9AAC;
329
+ --bloom-accent1: #4A9AAC;
330
+ --bloom-accent1-deep: #2A7A8C;
331
+ --bloom-accent2: #C89048;
332
+ --bloom-accent2-deep: #A87030;
333
+ --bloom-accent3: #5A80B8;
334
+ --bloom-accent3-deep: #3A60A0;
335
+ --bloom-accent4: #B85A5A;
336
+ --bloom-accent4-deep: #983A3A;
337
+ --bloom-shadow: 0 2px 24px rgba(0, 0, 0, 0.3);
338
+ --bloom-shadow-hover: 0 8px 40px rgba(0, 0, 0, 0.4);
281
339
  }
282
340
  ```
283
341
 
342
+ ### Available tokens
343
+
344
+ | Token | What it controls |
345
+ |-------|-----------------|
346
+ | `--bloom-font` | Body font family |
347
+ | `--bloom-font-display` | Heading/display font family |
348
+ | `--bloom-bg` | Page background |
349
+ | `--bloom-surface` | Card, input, toast backgrounds |
350
+ | `--bloom-surface2` | Borders, dividers, hover states |
351
+ | `--bloom-text` | Primary text color |
352
+ | `--bloom-text-secondary` | Labels, descriptions, captions |
353
+ | `--bloom-accent1` / `--bloom-accent1-deep` | Primary/success color (sage) |
354
+ | `--bloom-accent2` / `--bloom-accent2-deep` | Warning color (sand) |
355
+ | `--bloom-accent3` / `--bloom-accent3-deep` | Info/accent color (lavender) |
356
+ | `--bloom-accent4` / `--bloom-accent4-deep` | Danger/error color (rose) |
357
+ | `--bloom-shadow` / `--bloom-shadow-hover` | Elevation shadows |
358
+ | `--bloom-radius-sm` / `--bloom-radius` / `--bloom-radius-lg` / `--bloom-radius-pill` | Border radius |
359
+ | `--bloom-duration` / `--bloom-duration-slow` / `--bloom-duration-fast` | Animation timing |
360
+ | `--bloom-ease` | Easing curve |
361
+ | `--space-xs` through `--space-4xl` | Spacing scale |
362
+
284
363
  ## License
285
364
 
286
365
  MIT
package/dist/index.cjs CHANGED
@@ -133,6 +133,21 @@ var buttonVariants = _classvarianceauthority.cva.call(void 0,
133
133
  "bg-[var(--bloom-accent3-deep)] text-white",
134
134
  "hover:-translate-y-[2px] hover:shadow-[var(--bloom-shadow-hover)]",
135
135
  "active:translate-y-0 active:scale-[0.98]"
136
+ ],
137
+ danger: [
138
+ "bg-[var(--bloom-accent4-deep)] text-white",
139
+ "hover:-translate-y-[2px] hover:shadow-[var(--bloom-shadow-hover)]",
140
+ "active:translate-y-0 active:scale-[0.98]"
141
+ ],
142
+ warning: [
143
+ "bg-[var(--bloom-accent2-deep)] text-white",
144
+ "hover:-translate-y-[2px] hover:shadow-[var(--bloom-shadow-hover)]",
145
+ "active:translate-y-0 active:scale-[0.98]"
146
+ ],
147
+ success: [
148
+ "bg-[var(--bloom-accent1-deep)] text-white",
149
+ "hover:-translate-y-[2px] hover:shadow-[var(--bloom-shadow-hover)]",
150
+ "active:translate-y-0 active:scale-[0.98]"
136
151
  ]
137
152
  }
138
153
  },
@@ -383,18 +398,18 @@ Badge.displayName = "Badge";
383
398
 
384
399
  var alertVariants = _classvarianceauthority.cva.call(void 0,
385
400
  [
386
- "relative rounded-[var(--bloom-radius)] p-[var(--space-lg)]",
387
- "bg-[var(--bloom-surface)]",
388
- "border-l-[4px]",
389
- "font-[family-name:var(--bloom-font)]"
401
+ "relative flex gap-[var(--space-md)] items-start",
402
+ "rounded-[var(--bloom-radius-lg)] p-[var(--space-lg)]",
403
+ "font-[family-name:var(--bloom-font)]",
404
+ "border"
390
405
  ],
391
406
  {
392
407
  variants: {
393
408
  variant: {
394
- info: "border-l-[var(--bloom-accent3)]",
395
- success: "border-l-[var(--bloom-accent1)]",
396
- warning: "border-l-[var(--bloom-accent2)]",
397
- error: "border-l-[var(--bloom-accent4)]"
409
+ info: "bg-[var(--bloom-accent3)]/10 border-[var(--bloom-accent3)]/20",
410
+ success: "bg-[var(--bloom-accent1)]/10 border-[var(--bloom-accent1)]/20",
411
+ warning: "bg-[var(--bloom-accent2)]/10 border-[var(--bloom-accent2)]/20",
412
+ error: "bg-[var(--bloom-accent4)]/10 border-[var(--bloom-accent4)]/20"
398
413
  }
399
414
  },
400
415
  defaultVariants: {
@@ -402,11 +417,40 @@ var alertVariants = _classvarianceauthority.cva.call(void 0,
402
417
  }
403
418
  }
404
419
  );
420
+ var alertIconColors = {
421
+ info: "color-[var(--bloom-accent3-deep)]",
422
+ success: "color-[var(--bloom-accent1-deep)]",
423
+ warning: "color-[var(--bloom-accent2-deep)]",
424
+ error: "color-[var(--bloom-accent4-deep)]"
425
+ };
405
426
 
406
427
  // src/components/alert/alert.tsx
407
428
 
429
+ var variantIcons = {
430
+ success: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
431
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "10", cy: "10", r: "9", stroke: "currentColor", strokeWidth: "1.5" }),
432
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M6.5 10.5L8.5 12.5L13.5 7.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
433
+ ] }),
434
+ error: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
435
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "10", cy: "10", r: "9", stroke: "currentColor", strokeWidth: "1.5" }),
436
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M7.5 7.5L12.5 12.5M12.5 7.5L7.5 12.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
437
+ ] }),
438
+ warning: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
439
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10 3L18 17H2L10 3Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
440
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10 8.5V12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
441
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "10", cy: "14.5", r: "0.75", fill: "currentColor" })
442
+ ] }),
443
+ info: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
444
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "10", cy: "10", r: "9", stroke: "currentColor", strokeWidth: "1.5" }),
445
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10 9V14", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
446
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "10", cy: "6.5", r: "0.75", fill: "currentColor" })
447
+ ] })
448
+ };
408
449
  var Alert = _react.forwardRef.call(void 0,
409
- ({ className, variant, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props })
450
+ ({ className, variant = "info", children, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props, children: [
451
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("shrink-0 mt-px", alertIconColors[_nullishCoalesce(variant, () => ( "info"))]), children: variantIcons[_nullishCoalesce(variant, () => ( "info"))] }),
452
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 min-w-0", children })
453
+ ] })
410
454
  );
411
455
  Alert.displayName = "Alert";
412
456
  var AlertTitle = _react.forwardRef.call(void 0,
@@ -415,7 +459,7 @@ var AlertTitle = _react.forwardRef.call(void 0,
415
459
  {
416
460
  ref,
417
461
  className: cn(
418
- "font-[family-name:var(--bloom-font-display)] text-[length:var(--bloom-text-subheading)] font-medium color-[var(--bloom-text)] mb-[var(--space-xs)]",
462
+ "font-[family-name:var(--bloom-font-display)] text-[length:var(--bloom-text-body)] font-medium color-[var(--bloom-text)]",
419
463
  className
420
464
  ),
421
465
  ...props
@@ -428,7 +472,7 @@ var AlertDescription = _react.forwardRef.call(void 0,
428
472
  "p",
429
473
  {
430
474
  ref,
431
- className: cn("text-[length:var(--bloom-text-body)] color-[var(--bloom-text-secondary)]", className),
475
+ className: cn("text-[length:var(--bloom-text-caption)] color-[var(--bloom-text-secondary)] mt-[var(--space-xs)]", className),
432
476
  ...props
433
477
  }
434
478
  )
@@ -508,8 +552,9 @@ function Tooltip({ content, children, side = "top", className }) {
508
552
  side,
509
553
  sideOffset: 8,
510
554
  className: cn(
511
- "bloom z-50 rounded-[var(--bloom-radius-sm)]",
512
- "bg-[var(--bloom-text)] color-[var(--bloom-bg)]",
555
+ "bloom z-50 rounded-[var(--bloom-radius)]",
556
+ "bg-[var(--bloom-surface)] color-[var(--bloom-text)]",
557
+ "border border-[var(--bloom-surface2)]",
513
558
  "px-[var(--space-md)] py-[var(--space-sm)]",
514
559
  "text-[length:var(--bloom-text-caption)] font-[family-name:var(--bloom-font)]",
515
560
  "shadow-[var(--bloom-shadow)]",
@@ -1030,22 +1075,23 @@ function DatePicker({ value, onChange, placeholder = "Select date", className })
1030
1075
 
1031
1076
  var toastVariants = _classvarianceauthority.cva.call(void 0,
1032
1077
  [
1033
- "relative flex items-start gap-[var(--space-md)]",
1078
+ "relative flex items-center gap-[var(--space-md)]",
1034
1079
  "w-full max-w-[380px]",
1035
- "rounded-[var(--bloom-radius)]",
1036
- "bg-[var(--bloom-surface)] p-[var(--space-lg)]",
1080
+ "rounded-[var(--bloom-radius-lg)]",
1081
+ "p-[var(--space-lg)]",
1037
1082
  "shadow-[var(--bloom-shadow-hover)]",
1038
- "border border-[var(--bloom-surface2)]",
1083
+ "border",
1039
1084
  "font-[family-name:var(--bloom-font)]",
1040
- "overflow-hidden"
1085
+ "overflow-hidden",
1086
+ "animate-in fade-in-0 slide-in-from-bottom-4"
1041
1087
  ],
1042
1088
  {
1043
1089
  variants: {
1044
1090
  variant: {
1045
- info: "border-l-[4px] border-l-[var(--bloom-accent3)]",
1046
- success: "border-l-[4px] border-l-[var(--bloom-accent1)]",
1047
- warning: "border-l-[4px] border-l-[var(--bloom-accent2)]",
1048
- error: "border-l-[4px] border-l-[var(--bloom-accent4)]"
1091
+ info: "bg-[var(--bloom-surface)] border-[var(--bloom-surface2)]",
1092
+ success: "bg-[var(--bloom-accent1)]/10 border-[var(--bloom-accent1)]/20",
1093
+ warning: "bg-[var(--bloom-accent2)]/10 border-[var(--bloom-accent2)]/20",
1094
+ error: "bg-[var(--bloom-accent4)]/10 border-[var(--bloom-accent4)]/20"
1049
1095
  }
1050
1096
  },
1051
1097
  defaultVariants: {
@@ -1053,6 +1099,12 @@ var toastVariants = _classvarianceauthority.cva.call(void 0,
1053
1099
  }
1054
1100
  }
1055
1101
  );
1102
+ var toastIconColors = {
1103
+ info: "color-[var(--bloom-accent3-deep)]",
1104
+ success: "color-[var(--bloom-accent1-deep)]",
1105
+ warning: "color-[var(--bloom-accent2-deep)]",
1106
+ error: "color-[var(--bloom-accent4-deep)]"
1107
+ };
1056
1108
 
1057
1109
  // src/components/toast/toast.tsx
1058
1110
 
@@ -1077,14 +1129,36 @@ function ToastProvider({ children }) {
1077
1129
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "bloom fixed bottom-[var(--space-xl)] right-[var(--space-xl)] z-[100] flex flex-col gap-[var(--space-md)]", children: toasts.map((t) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ToastItem, { toast: t, onDismiss: dismiss }, t.id)) })
1078
1130
  ] });
1079
1131
  }
1132
+ var variantIcons2 = {
1133
+ success: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
1134
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "10", cy: "10", r: "9", stroke: "currentColor", strokeWidth: "1.5" }),
1135
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M6.5 10.5L8.5 12.5L13.5 7.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
1136
+ ] }),
1137
+ error: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
1138
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "10", cy: "10", r: "9", stroke: "currentColor", strokeWidth: "1.5" }),
1139
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M7.5 7.5L12.5 12.5M12.5 7.5L7.5 12.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
1140
+ ] }),
1141
+ warning: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
1142
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10 3L18 17H2L10 3Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
1143
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10 8.5V12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
1144
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "10", cy: "14.5", r: "0.75", fill: "currentColor" })
1145
+ ] }),
1146
+ info: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
1147
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "10", cy: "10", r: "9", stroke: "currentColor", strokeWidth: "1.5" }),
1148
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10 9V14", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
1149
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "10", cy: "6.5", r: "0.75", fill: "currentColor" })
1150
+ ] })
1151
+ };
1080
1152
  function ToastItem({ toast: t, onDismiss }) {
1081
1153
  const duration = _nullishCoalesce(t.duration, () => ( 4e3));
1154
+ const variant = _nullishCoalesce(t.variant, () => ( "info"));
1082
1155
  _react.useEffect.call(void 0, () => {
1083
1156
  const timer = setTimeout(() => onDismiss(t.id), duration);
1084
1157
  return () => clearTimeout(timer);
1085
1158
  }, [t.id, duration, onDismiss]);
1086
1159
  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn(toastVariants({ variant: t.variant })), children: [
1087
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1", children: [
1160
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("shrink-0 mt-[1px]", toastIconColors[variant]), children: variantIcons2[variant] }),
1161
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1 min-w-0", children: [
1088
1162
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-[length:var(--bloom-text-body)] font-medium color-[var(--bloom-text)]", children: t.title }),
1089
1163
  t.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-[length:var(--bloom-text-caption)] color-[var(--bloom-text-secondary)] mt-[var(--space-xs)]", children: t.description })
1090
1164
  ] }),
@@ -1092,19 +1166,10 @@ function ToastItem({ toast: t, onDismiss }) {
1092
1166
  "button",
1093
1167
  {
1094
1168
  onClick: () => onDismiss(t.id),
1095
- className: "color-[var(--bloom-text-secondary)] hover:color-[var(--bloom-text)] transition-colors shrink-0",
1169
+ className: "color-[var(--bloom-text-secondary)] hover:color-[var(--bloom-text)] transition-colors shrink-0 rounded-full h-[28px] w-[28px] inline-flex items-center justify-center hover:bg-[var(--bloom-surface2)]",
1096
1170
  "aria-label": "Dismiss",
1097
1171
  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M12 4L4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
1098
1172
  }
1099
- ),
1100
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1101
- "div",
1102
- {
1103
- className: "absolute bottom-0 left-0 h-[2px] bg-[var(--bloom-accent1-deep)]/40",
1104
- style: {
1105
- animation: `bloom-shrink ${duration}ms linear forwards`
1106
- }
1107
- }
1108
1173
  )
1109
1174
  ] });
1110
1175
  }