@oniratec/onira-react-ui 1.0.6 → 1.0.7

package/dist/index.d.ts

@@ -319,6 +319,18 @@ export declare interface ThemeColors {
     error: string;
 }
 
+declare interface ThemeContextValue {
+    theme: Theme;
+    setMode: (mode: ColorMode) => void;
+}
+
+export declare function ThemeProvider({ mode, children }: ThemeProviderProps): JSX.Element;
+
+declare interface ThemeProviderProps {
+    mode?: ColorMode;
+    children: ReactNode;
+}
+
 export declare interface ThemeShadows {
     card: {
         sm: string;
@@ -354,4 +366,6 @@ export declare const TooltipTrigger: ComponentType<TooltipPrimitive.TooltipTrigg
 
 export declare function useField(): FieldContextValue;
 
+export declare function useTheme(): ThemeContextValue;
+
 export { }

package/dist/index.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { forwardRef, useState, useEffect, useRef } from "react";
+import React__default, { forwardRef, useState, useEffect, useRef, useMemo, createContext, useContext } from "react";
 import { Loader2, Check, Circle, ChevronRight, EyeOff, EyeIcon, ChevronDown } from "lucide-react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -9060,6 +9060,51 @@ function createTheme(e) {
   };
 }
 const lightTheme = createTheme("light"), darkTheme = createTheme("dark"), defaultTheme = lightTheme;
+function themeToCssVars(e) {
+  return {
+    "--oniratec-brand": e.colors.brand,
+    "--oniratec-fill-primary": e.colors.fill.primary,
+    "--oniratec-fill-secondary": e.colors.fill.secondary,
+    "--oniratec-fill-disabled": e.colors.fill.disabled,
+    "--oniratec-label-primary": e.colors.label.primary,
+    "--oniratec-label-secondary": e.colors.label.secondary,
+    "--oniratec-label-disabled": e.colors.label.disabled,
+    "--oniratec-border-primary": e.colors.border.primary,
+    "--oniratec-border-secondary": e.colors.border.secondary,
+    "--oniratec-border-disabled": e.colors.border.disabled,
+    "--oniratec-focus": e.colors.focus,
+    "--oniratec-error": e.colors.error,
+    "--oniratec-shadow-card-sm": e.shadows.card.sm,
+    "--oniratec-shadow-card-md": e.shadows.card.md,
+    "--oniratec-shadow-card-lg": e.shadows.card.lg,
+    "--oniratec-shadow-card-xl": e.shadows.card.xl
+  };
+}
+const ThemeContext = createContext(null);
+function ThemeProvider({ mode: e = "light", children: t }) {
+  const r = useMemo(() => e === "dark" ? darkTheme : defaultTheme, [e]);
+  useEffect(() => {
+    const s = document.documentElement, n = themeToCssVars(r);
+    for (const [a, l] of Object.entries(n))
+      s.style.setProperty(a, l);
+    s.classList.toggle("dark", r.mode === "dark");
+  }, [r]);
+  const i = useMemo(
+    () => ({
+      theme: r,
+      setMode: () => {
+      }
+    }),
+    [r]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: i, children: t });
+}
+function useTheme() {
+  const e = useContext(ThemeContext);
+  if (!e)
+    throw new Error("useTheme must be used within ThemeProvider");
+  return e;
+}
 function $constructor(e, t, r) {
   function i(l, h) {
     if (l._zod || Object.defineProperty(l, "_zod", {
@@ -11298,6 +11343,7 @@ export {
   SelectTrigger,
   SelectValue,
   Skeleton,
+  ThemeProvider,
   Toggle,
   Tooltip,
   TooltipContent,
@@ -11308,6 +11354,7 @@ export {
   darkTheme,
   defaultTheme,
   lightTheme,
-  useField
+  useField,
+  useTheme
 };
 //# sourceMappingURL=index.js.map