@julien-wiegandt/open-ui 0.1.66 → 0.1.68

package/dist/context/theme.d.ts

@@ -1,7 +1,10 @@
 import { Theme } from '../theme/types';
 export type IThemeContext = {
     theme: Theme;
-    setTheme: (index: number) => void;
+    setTheme: ({ index, theme }: {
+        index?: number;
+        theme?: Theme;
+    }) => void;
 };
 export declare const ThemeContext: import('react').Context<IThemeContext>;
 export declare const ThemeContextProvider: (params: {

package/dist/open-ui.js

@@ -3627,18 +3627,30 @@ const St = {
     primary: {
       dark: "#162a55",
       main: "#166FEE",
-      light: "#daeeff"
+      light: "#daeeff",
+      darker: "#162a55",
+      lighter: "#daeeff"
     },
     secondary: {
       dark: "#7c420b",
       main: "#ffbf00",
-      light: "#fffbc5"
+      light: "#fffbc5",
+      darker: "#7c420b",
+      lighter: "#fffbc5"
+    },
+    default: {
+      dark: "#000000",
+      main: "#1e1e1e",
+      light: "#d1d1d1",
+      darker: "#000000",
+      lighter: "#d1d1d1"
     },
-    default: { dark: "#000000", main: "#1e1e1e", light: "#d1d1d1" },
     error: {
       dark: "#43110c",
       main: "#e74c3c",
-      light: "#fcd0cc"
+      light: "#fcd0cc",
+      darker: "#43110c",
+      lighter: "#fcd0cc"
     }
   }
 }, Oh = () => /* @__PURE__ */ O.jsxs(
@@ -4407,11 +4419,28 @@ const Cd = (n, e) => e === "sm" ? `${Number(n) / (8 / 7)}px` : `${n}px`, _c = (n
 );
 kt.displayName = "Text";
 const yc = (n) => {
-  if (n === "transparent") return "#000000";
-  let e = n.startsWith("#") ? n.slice(1) : n;
-  if (e.length === 3 && (e = e.split("").map((s) => s + s).join("")), e.length !== 6)
-    throw new Error("Invalid hexadecimal color format.");
-  const t = parseInt(e.substring(0, 2), 16), r = parseInt(e.substring(2, 4), 16), i = parseInt(e.substring(4, 6), 16);
+  const e = n.trim().toLowerCase();
+  if (e === "transparent") return "#000000";
+  let t = 0, r = 0, i = 0;
+  if (e.startsWith("#")) {
+    let s = e.slice(1);
+    if (s.length === 3 || s.length === 4 ? s = s.slice(0, 3).split("").map((a) => a + a).join("") : s.length === 8 && (s = s.slice(0, 6)), s.length !== 6) throw new Error("Invalid hexadecimal color format.");
+    t = parseInt(s.substring(0, 2), 16), r = parseInt(s.substring(2, 4), 16), i = parseInt(s.substring(4, 6), 16);
+  } else if (e.startsWith("rgb")) {
+    const s = e.match(/-?\d+(\.\d+)?/g)?.map(Number);
+    if (!s || s.length < 3) throw new Error("Invalid RGB color format.");
+    [t, r, i] = s;
+  } else if (e.startsWith("hsl")) {
+    const s = e.match(/-?\d+(\.\d+)?/g)?.map(Number);
+    if (!s || s.length < 3) throw new Error("Invalid HSL color format.");
+    let [a, c, u] = s;
+    c /= 100, u /= 100;
+    const f = (1 - Math.abs(2 * u - 1)) * c, d = f * (1 - Math.abs(a / 60 % 2 - 1)), p = u - f / 2;
+    let l = 0, g = 0, h = 0;
+    0 <= a && a < 60 ? (l = f, g = d, h = 0) : 60 <= a && a < 120 ? (l = d, g = f, h = 0) : 120 <= a && a < 180 ? (l = 0, g = f, h = d) : 180 <= a && a < 240 ? (l = 0, g = d, h = f) : 240 <= a && a < 300 ? (l = d, g = 0, h = f) : 300 <= a && a < 360 && (l = f, g = 0, h = d), t = Math.round((l + p) * 255), r = Math.round((g + p) * 255), i = Math.round((h + p) * 255);
+  } else
+    throw new Error("Unsupported color format.");
+  if (isNaN(t) || isNaN(r) || isNaN(i)) throw new Error("Invalid color values.");
   return (t * 299 + r * 587 + i * 114) / 1e3 >= 128 ? "#000000" : "#FFFFFF";
 }, Yt = ({
   color: n,
@@ -4770,6 +4799,7 @@ const $d = mt.input`
   &::-webkit-color-swatch-wrapper {
     padding: 0;
     border-radius: ${({ theme: n }) => St[n.radius]};
+    cursor: pointer;
   }
 
   &::-webkit-color-swatch {
@@ -5289,6 +5319,7 @@ const Rh = ({
       onClick: () => e && n && e(n),
       px: 1.5,
       py: 1,
+      justify: "center",
       height: "37px",
       hoverstyle: {
         backgroundColor: t.palette.primary.light
@@ -5303,9 +5334,7 @@ const Rh = ({
       key: n.placeholder,
       label: n.placeholder
     } : void 0)
-  ), [i, o] = Ae(!1), [s, a] = Ae(
-    void 0
-  ), c = K(null), u = K(null), f = K(null);
+  ), [i, o] = Ae(!1), [s, a] = Ae(void 0), c = K(null), u = K(null), f = K(null);
   Ie(() => {
     const p = (l) => {
       c.current && !c.current.contains(l.target) && o(!1);
@@ -5331,65 +5360,78 @@ const Rh = ({
   const d = (p) => {
     r(p), n.onChange && n.onChange(p), o(!1);
   };
-  return /* @__PURE__ */ O.jsxs(Te, { ref: c, direction: "column", width: "100%", justify: "start", children: [
-    (n.label || n.required) && /* @__PURE__ */ O.jsxs(
-      Te,
-      {
-        direction: "row",
-        gap: 0.5,
-        align: "center",
-        mb: "4px",
-        style: { minHeight: "1.2em" },
-        children: [
-          n.label && /* @__PURE__ */ O.jsx(kt, { size: "12", children: n.label }),
-          n.required && /* @__PURE__ */ O.jsx(kt, { color: e.palette.error.main, size: "12", children: "*" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ O.jsxs(
-      Te,
-      {
-        ref: u,
-        elevation: 1,
-        onClick: () => o(!i),
-        style: { position: "relative", cursor: "pointer", ...n.selectOptionStyle },
-        children: [
-          n.CustomOption ? /* @__PURE__ */ O.jsx(n.CustomOption, { option: t }) : /* @__PURE__ */ O.jsx(Oa, { option: t }),
-          /* @__PURE__ */ O.jsx(
-            Te,
-            {
-              ref: f,
-              elevation: 1,
-              width: "100%",
-              gap: 0.5,
-              style: {
-                position: "absolute",
-                left: "0",
-                ...!n.orientation || n.orientation === "down" ? {
-                  top: s ? `${s + 1}px` : "37px"
-                } : {
-                  bottom: s ? `${s + 1}px` : "37px"
-                },
-                visibility: "hidden",
-                zIndex: 1,
-                backdropFilter: "blur(6px)",
-                maxHeight: "200px",
-                overflowY: "auto",
-                ...n.hideScrollbar && {
-                  scrollbarWidth: "none",
-                  msOverflowStyle: "none"
-                },
-                ...n.optionContainerStyle
-              },
-              children: n.options.map(
-                (p) => n.CustomOption ? /* @__PURE__ */ O.jsx(n.CustomOption, { option: p, handleChange: d }) : /* @__PURE__ */ O.jsx(Oa, { option: p, handleChange: d })
+  return /* @__PURE__ */ O.jsxs(
+    Te,
+    {
+      ref: c,
+      direction: "column",
+      width: "100%",
+      justify: "start",
+      children: [
+        (n.label || n.required) && /* @__PURE__ */ O.jsxs(
+          Te,
+          {
+            direction: "row",
+            gap: 0.5,
+            align: "center",
+            mb: "4px",
+            style: { minHeight: "1.2em" },
+            children: [
+              n.label && /* @__PURE__ */ O.jsx(kt, { size: "12", children: n.label }),
+              n.required && /* @__PURE__ */ O.jsx(kt, { color: e.palette.error.main, size: "12", children: "*" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ O.jsxs(
+          Te,
+          {
+            ref: u,
+            elevation: 1,
+            onClick: () => o(!i),
+            style: {
+              position: "relative",
+              cursor: "pointer",
+              ...n.selectOptionStyle
+            },
+            children: [
+              n.CustomOption ? /* @__PURE__ */ O.jsx(n.CustomOption, { option: t }) : /* @__PURE__ */ O.jsx(Oa, { option: t }),
+              /* @__PURE__ */ O.jsx(
+                Te,
+                {
+                  ref: f,
+                  elevation: 1,
+                  width: "100%",
+                  gap: 0.5,
+                  style: {
+                    position: "absolute",
+                    left: "0",
+                    ...!n.orientation || n.orientation === "down" ? {
+                      top: s ? `${s + 1}px` : "37px"
+                    } : {
+                      bottom: s ? `${s + 1}px` : "37px"
+                    },
+                    visibility: "hidden",
+                    zIndex: 1,
+                    backdropFilter: "blur(6px)",
+                    maxHeight: "200px",
+                    overflowY: "auto",
+                    ...n.hideScrollbar && {
+                      scrollbarWidth: "none",
+                      msOverflowStyle: "none"
+                    },
+                    ...n.optionContainerStyle
+                  },
+                  children: n.options.map(
+                    (p) => n.CustomOption ? /* @__PURE__ */ O.jsx(n.CustomOption, { option: p, handleChange: d }) : /* @__PURE__ */ O.jsx(Oa, { option: p, handleChange: d })
+                  )
+                }
               )
-            }
-          )
-        ]
-      }
-    )
-  ] });
+            ]
+          }
+        )
+      ]
+    }
+  );
 });
 Xd.displayName = "Select";
 const Vd = mt.div`
@@ -6564,10 +6606,10 @@ const Ac = Ba({
   }
 }), xh = (n) => {
   if (n.themes.length === 0) throw new Error("No themes provided");
-  const [e, t] = Ae(n.themes[0]), r = (o) => {
-    const s = n.themes[o];
-    if (!s) throw new Error("Theme not found");
-    t(s);
+  const [e, t] = Ae(n.themes[0]), r = ({ index: o, theme: s }) => {
+    const a = o ? n.themes[o] : s;
+    if (!a) throw new Error("Theme not found");
+    t(a);
   }, i = Dt(
     () => ({
       theme: e,
@@ -6660,9 +6702,11 @@ const si = (n, e) => {
     return n;
   const t = kh(n || e, 500);
   return {
-    main: t[500],
+    darker: t[950],
     dark: t[900],
-    light: t[100]
+    main: t[500],
+    light: t[100],
+    lighter: t[50]
   };
 }, $h = (n) => {
   const e = si(n.primary, "#000000"), t = si(n.secondary ?? "#000000", "#000000"), r = si(n.default ?? "#000000", "#000000"), i = si(n.error ?? "#e74c3c", "#e74c3c");