@bloomkit/react 0.1.6 → 0.2.1

package/dist/index.d.ts

@@ -206,4 +206,29 @@ type SkeletonVariants = Parameters<typeof skeletonVariants>[0];
 type SkeletonProps = HTMLAttributes<HTMLDivElement> & SkeletonVariants;
 declare const Skeleton: react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<HTMLDivElement>>;
 
-export { Alert, AlertDescription, type AlertProps, AlertTitle, type AlertVariants, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarVariants, Badge, type BadgeProps, type BadgeVariants, Button, type ButtonProps, type ButtonVariants, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, type CardVariants, DatePicker, type DatePickerProps, Dropdown, DropdownItem, type DropdownItemProps, type DropdownProps, DropdownSeparator, type DropdownSeparatorProps, Input, type InputProps, Modal, type ModalProps, Progress, ProgressCircular, type ProgressCircularProps, type ProgressProps, Skeleton, type SkeletonProps, type SkeletonVariants, Slider, type SliderProps, Tabs, TabsContent, TabsList, type TabsListProps, type TabsListVariants, TabsTrigger, Textarea, type TextareaProps, ToastProvider, type ToastVariants, Toggle, type ToggleProps, Tooltip, type TooltipProps, TooltipProvider, alertVariants, avatarVariants, badgeVariants, bloomSpring, bloomTransition, bloomTransitionFast, bloomTransitionSlow, buttonVariants, cardHoverLift, cardVariants, cn, fadeIn, hoverLift, inputVariants, progressFillVariants, progressTrackVariants, skeletonVariants, slideUp, tabsListVariants, toastVariants, useBreathing, useReducedMotion, useToast };
+type ColorMode = "light" | "dark" | "system";
+interface BloomPalette {
+    name: string;
+    light?: Record<string, string>;
+    dark?: Record<string, string>;
+}
+interface ThemeContextValue {
+    colorMode: ColorMode;
+    resolvedMode: "light" | "dark";
+    setColorMode: (mode: ColorMode) => void;
+    toggleColorMode: () => void;
+    palette: string;
+    setPalette: (name: string) => void;
+    palettes: string[];
+}
+declare function useTheme(): ThemeContextValue;
+interface ThemeProviderProps {
+    children: ReactNode;
+    defaultColorMode?: ColorMode;
+    defaultPalette?: string;
+    palettes?: BloomPalette[];
+    storageKey?: string;
+}
+declare function ThemeProvider({ children, defaultColorMode, defaultPalette, palettes, storageKey, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+
+export { Alert, AlertDescription, type AlertProps, AlertTitle, type AlertVariants, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarVariants, Badge, type BadgeProps, type BadgeVariants, type BloomPalette, Button, type ButtonProps, type ButtonVariants, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, type CardVariants, DatePicker, type DatePickerProps, Dropdown, DropdownItem, type DropdownItemProps, type DropdownProps, DropdownSeparator, type DropdownSeparatorProps, Input, type InputProps, Modal, type ModalProps, Progress, ProgressCircular, type ProgressCircularProps, type ProgressProps, Skeleton, type SkeletonProps, type SkeletonVariants, Slider, type SliderProps, Tabs, TabsContent, TabsList, type TabsListProps, type TabsListVariants, TabsTrigger, Textarea, type TextareaProps, ThemeProvider, type ThemeProviderProps, ToastProvider, type ToastVariants, Toggle, type ToggleProps, Tooltip, type TooltipProps, TooltipProvider, alertVariants, avatarVariants, badgeVariants, bloomSpring, bloomTransition, bloomTransitionFast, bloomTransitionSlow, buttonVariants, cardHoverLift, cardVariants, cn, fadeIn, hoverLift, inputVariants, progressFillVariants, progressTrackVariants, skeletonVariants, slideUp, tabsListVariants, toastVariants, useBreathing, useReducedMotion, useTheme, useToast };

package/dist/index.js

@@ -577,13 +577,13 @@ var progressTrackVariants = cva7([
   "relative w-full overflow-hidden",
   "rounded-[var(--bloom-radius-pill)]",
   "bg-[var(--bloom-surface2)]",
-  "h-[6px]"
+  "h-[8px]"
 ]);
 var progressFillVariants = cva7([
   "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 = forwardRef8(
           "div",
           {
             className: progressFillVariants(),
-            style: { width: `${clampedValue}%` }
+            style: { width: `${clampedValue}%` },
+            children: /* @__PURE__ */ jsx9(
+              "div",
+              {
+                className: "absolute inset-0 rounded-[var(--bloom-radius-pill)] overflow-hidden",
+                children: /* @__PURE__ */ jsx9(
+                  "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 = forwardRef8(
         className: cn("inline-flex", className),
         ...props,
         children: /* @__PURE__ */ jsxs6("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
+          /* @__PURE__ */ jsxs6("defs", { children: [
+            /* @__PURE__ */ jsxs6(
+              "linearGradient",
+              {
+                id: `bloom-sweep-grad-${size}`,
+                gradientUnits: "userSpaceOnUse",
+                x1: size / 2,
+                y1: "0",
+                x2: size / 2,
+                y2: size,
+                children: [
+                  /* @__PURE__ */ jsx9("stop", { offset: "0%", stopColor: "white", stopOpacity: "0" }),
+                  /* @__PURE__ */ jsx9("stop", { offset: "50%", stopColor: "white", stopOpacity: "0.3" }),
+                  /* @__PURE__ */ jsx9("stop", { offset: "100%", stopColor: "white", stopOpacity: "0" }),
+                  /* @__PURE__ */ jsx9(
+                    "animateTransform",
+                    {
+                      attributeName: "gradientTransform",
+                      type: "rotate",
+                      values: `0 ${size / 2} ${size / 2};360 ${size / 2} ${size / 2}`,
+                      dur: "2.5s",
+                      repeatCount: "indefinite"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx9("mask", { id: `bloom-sweep-mask-${size}`, children: /* @__PURE__ */ jsx9(
+              "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__ */ jsx9(
             "circle",
             {
@@ -655,9 +710,21 @@ var ProgressCircular = forwardRef8(
               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__ */ jsx9(
+            "circle",
+            {
+              cx: size / 2,
+              cy: size / 2,
+              r: radius,
+              fill: "none",
+              stroke: `url(#bloom-sweep-grad-${size})`,
+              strokeWidth,
+              mask: `url(#bloom-sweep-mask-${size})`
+            }
           )
         ] })
       }
@@ -1213,6 +1280,144 @@ var Skeleton = forwardRef11(
   )
 );
 Skeleton.displayName = "Skeleton";
+
+// src/components/theme/theme.tsx
+import {
+  createContext as createContext2,
+  useContext as useContext2,
+  useState as useState5,
+  useEffect as useEffect3,
+  useCallback as useCallback2,
+  useRef
+} from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var ThemeContext = createContext2(null);
+function useTheme() {
+  const ctx = useContext2(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 = useRef(
+    new Map([
+      ["bloom", { name: "bloom" }],
+      ...palettes.map((p) => [p.name, p])
+    ])
+  );
+  const [colorMode, setColorModeState] = useState5(() => {
+    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] = useState5(() => {
+    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] = useState5(
+    () => resolveMode(colorMode)
+  );
+  const setColorMode = useCallback2(
+    (mode) => {
+      setColorModeState(mode);
+      localStorage.setItem(`${storageKey}-mode`, mode);
+    },
+    [storageKey]
+  );
+  const setPalette = useCallback2(
+    (name) => {
+      if (!paletteMap.current.has(name)) return;
+      setPaletteState(name);
+      localStorage.setItem(`${storageKey}-palette`, name);
+    },
+    [storageKey]
+  );
+  const toggleColorMode = useCallback2(() => {
+    setColorMode(resolvedMode === "light" ? "dark" : "light");
+  }, [resolvedMode, setColorMode]);
+  useEffect3(() => {
+    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]);
+  useEffect3(() => {
+    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__ */ jsx17(
+    ThemeContext.Provider,
+    {
+      value: {
+        colorMode,
+        resolvedMode,
+        setColorMode,
+        toggleColorMode,
+        palette,
+        setPalette,
+        palettes: paletteNames
+      },
+      children
+    }
+  );
+}
 export {
   Alert,
   AlertDescription,
@@ -1242,6 +1447,7 @@ export {
   TabsList,
   TabsTrigger,
   Textarea,
+  ThemeProvider,
   ToastProvider,
   Toggle,
   Tooltip,
@@ -1268,6 +1474,7 @@ export {
   toastVariants,
   useBreathing,
   useReducedMotion,
+  useTheme,
   useToast
 };
 //# sourceMappingURL=index.js.map