npm - @bloomkit/react - Versions diffs - 0.1.6 → 0.2.1 - Mend

@bloomkit/react 0.1.6 → 0.2.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.

Files changed (9) hide show

package/README.md CHANGED Viewed

@@ -259,17 +259,108 @@ const style = useBreathing({ duration: 6 });
 ## Dark Mode
-Add the `dark` class or `data-theme="dark"` attribute to `<html>`:
+Wrap your app with `ThemeProvider` and use the `useTheme` hook:
-```html
-<html class="dark">
+```tsx
+import { ThemeProvider, useTheme } from "@bloomkit/react";
+// Wrap your app — defaults to OS preference
+<ThemeProvider defaultColorMode="system">
+  <App />
+</ThemeProvider>
+// Inside any component
+function ThemeToggle() {
+  const { resolvedMode, toggleColorMode, setColorMode } = useTheme();
+  return (
+    <button onClick={toggleColorMode}>
+      {resolvedMode === "dark" ? "Light mode" : "Dark mode"}
+    </button>
+  );
+}
+// Or set explicitly
+setColorMode("dark");   // force dark
+setColorMode("light");  // force light
+setColorMode("system"); // follow OS
+```
+The provider manages the `.dark` / `.light` class on `<html>` automatically and persists the user's choice to `localStorage`.
+**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).
+## Palettes
+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.
+```tsx
+import { ThemeProvider, useTheme, type BloomPalette } from "@bloomkit/react";
+const myPalettes: BloomPalette[] = [
+  {
+    name: "ocean",
+    light: {
+      "--bloom-font": "'Nunito', sans-serif",
+      "--bloom-font-display": "'Space Grotesk', sans-serif",
+      "--bloom-bg": "#F4F8FA",
+      "--bloom-surface": "#E8F0F4",
+      "--bloom-surface2": "#D4E2EA",
+      "--bloom-text": "#1A2E3A",
+      "--bloom-text-secondary": "#5E7A8C",
+      "--bloom-accent1": "#6AB8C4",
+      "--bloom-accent1-deep": "#3A96A8",
+      "--bloom-accent2": "#E0A860",
+      "--bloom-accent2-deep": "#C08840",
+      "--bloom-accent3": "#7CA0D4",
+      "--bloom-accent3-deep": "#5A80B8",
+      "--bloom-accent4": "#D47A7A",
+      "--bloom-accent4-deep": "#B85A5A",
+    },
+    dark: {
+      "--bloom-font": "'Nunito', sans-serif",
+      "--bloom-font-display": "'Space Grotesk', sans-serif",
+      "--bloom-bg": "#0E1A20",
+      "--bloom-surface": "#162228",
+      "--bloom-surface2": "#1E2E36",
+      "--bloom-text": "#D8E8EE",
+      "--bloom-text-secondary": "#7A9AAC",
+      "--bloom-accent1": "#4A9AAC",
+      "--bloom-accent1-deep": "#2A7A8C",
+      "--bloom-accent2": "#C89048",
+      "--bloom-accent2-deep": "#A87030",
+      "--bloom-accent3": "#5A80B8",
+      "--bloom-accent3-deep": "#3A60A0",
+      "--bloom-accent4": "#B85A5A",
+      "--bloom-accent4-deep": "#983A3A",
+    },
+  },
+];
+// Pass palettes to the provider
+<ThemeProvider palettes={myPalettes}>
+  <App />
+</ThemeProvider>
+// Switch palettes from anywhere
+function PaletteSwitcher() {
+  const { palette, setPalette, palettes } = useTheme();
+  return (
+    <select value={palette} onChange={(e) => setPalette(e.target.value)}>
+      {palettes.map((name) => (
+        <option key={name} value={name}>{name}</option>
+      ))}
+    </select>
+  );
+}
 ```
-Or let it follow the OS preference automatically — no extra setup needed.
+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`.
-## Theming
+## Theming with CSS
-All styles use CSS custom properties. Create a custom theme by overriding them in your CSS — every component updates instantly.
+You can also theme with pure CSS instead of the provider — override tokens directly in your stylesheet:
 ### Example: "Ocean Mist" theme

package/dist/index.cjs CHANGED Viewed

@@ -577,13 +577,13 @@ var progressTrackVariants = _classvarianceauthority.cva.call(void 0, [
   "relative w-full overflow-hidden",
   "rounded-[var(--bloom-radius-pill)]",
   "bg-[var(--bloom-surface2)]",
-  "h-[6px]"
+  "h-[8px]"
 ]);
 var progressFillVariants = _classvarianceauthority.cva.call(void 0, [
   "h-full rounded-[var(--bloom-radius-pill)]",
-  "transition-all duration-[var(--bloom-duration)] ease-[var(--bloom-ease)]",
-  "bg-gradient-to-r from-[var(--bloom-accent1-deep)] to-[var(--bloom-accent1)]",
-  "bg-[length:200%_100%] animate-[bloom-shimmer_3s_ease-in-out_infinite]"
+  "transition-[width] duration-[var(--bloom-duration-slow)] ease-[var(--bloom-ease)]",
+  "bg-[var(--bloom-accent1-deep)]",
+  "relative"
 ]);
 // src/components/progress/progress.tsx
@@ -605,7 +605,19 @@ var Progress = _react.forwardRef.call(void 0,
           "div",
           {
             className: progressFillVariants(),
-            style: { width: `${clampedValue}%` }
+            style: { width: `${clampedValue}%` },
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
+              "div",
+              {
+                className: "absolute inset-0 rounded-[var(--bloom-radius-pill)] overflow-hidden",
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
+                  "div",
+                  {
+                    className: "absolute inset-y-0 w-[60%] bg-gradient-to-r from-transparent via-white/25 to-transparent animate-[bloom-sweep_2.5s_ease-in-out_infinite]"
+                  }
+                )
+              }
+            )
           }
         )
       }
@@ -630,6 +642,49 @@ var ProgressCircular = _react.forwardRef.call(void 0,
         className: cn("inline-flex", className),
         ...props,
         children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "defs", { children: [
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
+              "linearGradient",
+              {
+                id: `bloom-sweep-grad-${size}`,
+                gradientUnits: "userSpaceOnUse",
+                x1: size / 2,
+                y1: "0",
+                x2: size / 2,
+                y2: size,
+                children: [
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", { offset: "0%", stopColor: "white", stopOpacity: "0" }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", { offset: "50%", stopColor: "white", stopOpacity: "0.3" }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", { offset: "100%", stopColor: "white", stopOpacity: "0" }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
+                    "animateTransform",
+                    {
+                      attributeName: "gradientTransform",
+                      type: "rotate",
+                      values: `0 ${size / 2} ${size / 2};360 ${size / 2} ${size / 2}`,
+                      dur: "2.5s",
+                      repeatCount: "indefinite"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "mask", { id: `bloom-sweep-mask-${size}`, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
+              "circle",
+              {
+                cx: size / 2,
+                cy: size / 2,
+                r: radius,
+                fill: "none",
+                stroke: "white",
+                strokeWidth,
+                strokeLinecap: "round",
+                strokeDasharray: circumference,
+                strokeDashoffset: offset,
+                transform: `rotate(-90 ${size / 2} ${size / 2})`
+              }
+            ) })
+          ] }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
             "circle",
             {
@@ -655,9 +710,21 @@ var ProgressCircular = _react.forwardRef.call(void 0,
               strokeDashoffset: offset,
               transform: `rotate(-90 ${size / 2} ${size / 2})`,
               style: {
-                transition: `stroke-dashoffset var(--bloom-duration) var(--bloom-ease)`
+                transition: `stroke-dashoffset var(--bloom-duration-slow) var(--bloom-ease)`
               }
             }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
+            "circle",
+            {
+              cx: size / 2,
+              cy: size / 2,
+              r: radius,
+              fill: "none",
+              stroke: `url(#bloom-sweep-grad-${size})`,
+              strokeWidth,
+              mask: `url(#bloom-sweep-mask-${size})`
+            }
           )
         ] })
       }
@@ -1214,6 +1281,146 @@ var Skeleton = _react.forwardRef.call(void 0,
 );
 Skeleton.displayName = "Skeleton";
+// src/components/theme/theme.tsx
+var ThemeContext = _react.createContext.call(void 0, null);
+function useTheme() {
+  const ctx = _react.useContext.call(void 0, ThemeContext);
+  if (!ctx) throw new Error("useTheme must be used within <ThemeProvider>");
+  return ctx;
+}
+function getSystemPreference() {
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function resolveMode(mode) {
+  if (mode === "system") return getSystemPreference();
+  return mode;
+}
+function ThemeProvider({
+  children,
+  defaultColorMode = "system",
+  defaultPalette = "bloom",
+  palettes = [],
+  storageKey = "bloom-theme"
+}) {
+  const paletteMap = _react.useRef.call(void 0,
+    new Map([
+      ["bloom", { name: "bloom" }],
+      ...palettes.map((p) => [p.name, p])
+    ])
+  );
+  const [colorMode, setColorModeState] = _react.useState.call(void 0, () => {
+    if (typeof window === "undefined") return defaultColorMode;
+    const stored = localStorage.getItem(`${storageKey}-mode`);
+    if (stored === "light" || stored === "dark" || stored === "system") return stored;
+    return defaultColorMode;
+  });
+  const [palette, setPaletteState] = _react.useState.call(void 0, () => {
+    if (typeof window === "undefined") return defaultPalette;
+    const stored = localStorage.getItem(`${storageKey}-palette`);
+    if (stored && paletteMap.current.has(stored)) return stored;
+    return defaultPalette;
+  });
+  const [resolvedMode, setResolvedMode] = _react.useState.call(void 0,
+    () => resolveMode(colorMode)
+  );
+  const setColorMode = _react.useCallback.call(void 0,
+    (mode) => {
+      setColorModeState(mode);
+      localStorage.setItem(`${storageKey}-mode`, mode);
+    },
+    [storageKey]
+  );
+  const setPalette = _react.useCallback.call(void 0,
+    (name) => {
+      if (!paletteMap.current.has(name)) return;
+      setPaletteState(name);
+      localStorage.setItem(`${storageKey}-palette`, name);
+    },
+    [storageKey]
+  );
+  const toggleColorMode = _react.useCallback.call(void 0, () => {
+    setColorMode(resolvedMode === "light" ? "dark" : "light");
+  }, [resolvedMode, setColorMode]);
+  _react.useEffect.call(void 0, () => {
+    const root = document.documentElement;
+    const resolved = resolveMode(colorMode);
+    setResolvedMode(resolved);
+    root.classList.remove("light", "dark");
+    root.classList.add(resolved);
+    const allKeys = /* @__PURE__ */ new Set();
+    paletteMap.current.forEach((p) => {
+      if (p.light) Object.keys(p.light).forEach((k) => allKeys.add(k));
+      if (p.dark) Object.keys(p.dark).forEach((k) => allKeys.add(k));
+    });
+    allKeys.forEach((key) => root.style.removeProperty(key));
+    const currentPalette = paletteMap.current.get(palette);
+    if (currentPalette) {
+      const vars = resolved === "dark" ? currentPalette.dark : currentPalette.light;
+      if (vars) {
+        Object.entries(vars).forEach(([key, value]) => {
+          root.style.setProperty(key, value);
+        });
+      }
+    }
+  }, [colorMode, palette]);
+  _react.useEffect.call(void 0, () => {
+    if (colorMode !== "system") return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = () => {
+      const resolved = resolveMode("system");
+      setResolvedMode(resolved);
+      const root = document.documentElement;
+      root.classList.remove("light", "dark");
+      root.classList.add(resolved);
+      const allKeys = /* @__PURE__ */ new Set();
+      paletteMap.current.forEach((p) => {
+        if (p.light) Object.keys(p.light).forEach((k) => allKeys.add(k));
+        if (p.dark) Object.keys(p.dark).forEach((k) => allKeys.add(k));
+      });
+      allKeys.forEach((key) => root.style.removeProperty(key));
+      const currentPalette = paletteMap.current.get(palette);
+      if (currentPalette) {
+        const vars = resolved === "dark" ? currentPalette.dark : currentPalette.light;
+        if (vars) {
+          Object.entries(vars).forEach(([key, value]) => {
+            root.style.setProperty(key, value);
+          });
+        }
+      }
+    };
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [colorMode, palette]);
+  const paletteNames = Array.from(paletteMap.current.keys());
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
+    ThemeContext.Provider,
+    {
+      value: {
+        colorMode,
+        resolvedMode,
+        setColorMode,
+        toggleColorMode,
+        palette,
+        setPalette,
+        palettes: paletteNames
+      },
+      children
+    }
+  );
+}
@@ -1269,5 +1476,5 @@ Skeleton.displayName = "Skeleton";
-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.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.useToast = useToast;
+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;
 //# sourceMappingURL=index.cjs.map