@woobee/ui 0.2.0 → 0.2.1

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React15, { forwardRef, useRef, useEffect, createContext, useState, useImperativeHandle, useContext, useReducer, useCallback } from 'react';
+import React16, { forwardRef, useRef, useEffect, createContext, useState, useImperativeHandle, useContext, useReducer, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
 
@@ -29,6 +29,7 @@ function Button({
   leftIcon = null,
   rightIcon = null,
   compact = false,
+  darkMode = false,
   ...props
 }) {
   return /* @__PURE__ */ jsxs(
@@ -45,11 +46,20 @@ function Button({
         "px-5 py-3 text-base": size === "big",
         "px-5 py-3 text-lg font-medium": size === "huge",
         "!px-1 !py-0.5": compact,
-        "border bg-brown-500 dark:bg-primary-500 dark:hover:bg-primary-600 border-transparent text-white dark:text-black": variant === "primary",
-        "text-gray-700 bg-white dark:bg-charcoal-800 dark:hover:bg-charcoal-700 dark:text-charcoal-100 border border-gray-300 dark:border-charcoal-700 hover:text-gray-500": variant === "secondary",
-        "!rounded-md text-left w-full text-gray-700 bg-white dark:bg-charcoal-800 dark:hover:bg-charcoal-700 dark:text-charcoal-100 border border-gray-200 dark:border-charcoal-700 hover:bg-gray-50 hover:text-gray-500": variant === "form-input",
-        "hover:text-brown-500 dark:text-charcoal-100 dark:hover:text-primary-500 !shadow-none": variant === "flat",
-        "!text-gray-300 hover:!text-gray-400 dark:!text-charcoal-400": !children,
+        "border bg-brown-500 border-transparent text-white": variant === "primary" && !darkMode,
+        "dark:bg-primary-500 dark:hover:bg-primary-600 dark:text-black": variant === "primary" && !darkMode,
+        "border bg-primary-500 hover:bg-primary-600 border-transparent text-black": variant === "primary" && !!darkMode,
+        "text-gray-700 bg-white border border-gray-300 hover:text-gray-500": variant === "secondary" && !darkMode,
+        "text-charcoal-100 bg-charcoal-800 hover:bg-charcoal-700 border border-charcoal-700": variant === "secondary" && !!darkMode,
+        "!rounded-md text-left w-full text-gray-700 bg-white border border-gray-200 hover:bg-gray-50 hover:text-gray-500": variant === "form-input" && !darkMode,
+        "!rounded-md text-left w-full text-charcoal-100 bg-charcoal-800 hover:bg-charcoal-700 border border-charcoal-700": variant === "form-input" && !!darkMode,
+        "dark:bg-charcoal-800 dark:hover:bg-charcoal-700 dark:text-charcoal-100 dark:border-charcoal-700": (variant === "secondary" || variant === "form-input") && !darkMode,
+        "hover:text-brown-500 !shadow-none": variant === "flat" && !darkMode,
+        "dark:text-charcoal-100 dark:hover:text-primary-500": variant === "flat" && !darkMode,
+        "text-charcoal-100 hover:text-primary-500 !shadow-none": variant === "flat" && !!darkMode,
+        "!text-gray-300 hover:!text-gray-400": !children && !darkMode,
+        "dark:!text-charcoal-400": !children && !darkMode,
+        "!text-charcoal-400": !children && !!darkMode,
         ...classNameObject(className)
       }),
       ...props,
@@ -255,6 +265,10 @@ function CheckboxList({
   loading = false,
   placeholder = "No items found."
 }) {
+  const hasLoadedRef = useRef(false);
+  if (!loading) {
+    hasLoadedRef.current = true;
+  }
   const getFinalKey = (item, index) => {
     const key = typeof itemKey === "function" ? itemKey(item) : item[itemKey];
     return key !== void 0 && key !== null ? key : index;
@@ -265,7 +279,7 @@ function CheckboxList({
     }
     return placeholder;
   };
-  return /* @__PURE__ */ jsx("div", { className: "w-full border border-gray-300 dark:border-charcoal-700 rounded-lg shadow-sm bg-white dark:bg-charcoal-800 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "max-h-60 overflow-y-auto divide-y divide-gray-100 dark:divide-charcoal-700", children: loading && items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 flex items-center justify-center min-h-36", children: /* @__PURE__ */ jsx(Loading, { spinSizeClassName: "w-6 h-6", className: "inline-block" }) }) : /* @__PURE__ */ jsx(Fragment, { children: items.length > 0 ? items.map((item, index) => {
+  return /* @__PURE__ */ jsx("div", { className: "w-full border border-gray-300 dark:border-charcoal-700 rounded-lg shadow-sm bg-white dark:bg-charcoal-800 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "max-h-60 overflow-y-auto divide-y divide-gray-100 dark:divide-charcoal-700", children: loading && !hasLoadedRef.current ? /* @__PURE__ */ jsx("div", { className: "p-4 flex items-center justify-center min-h-36", children: /* @__PURE__ */ jsx(Loading, { spinSizeClassName: "w-6 h-6", className: "inline-block" }) }) : /* @__PURE__ */ jsx(Fragment, { children: items.length > 0 ? items.map((item, index) => {
     const finalKey = getFinalKey(item, index);
     const label = typeof itemLabel === "function" ? itemLabel(item) : item[itemLabel];
     const checked = typeof isChecked === "function" ? isChecked(item, selected) : selected.some(
@@ -452,7 +466,7 @@ function CSSTransitionComponent({
         removeClasses(nodeRef.current, [...leaveToClasses, ...leaveClasses]);
         onExited(nodeRef.current);
       },
-      children: React15.cloneElement(children, {
+      children: React16.cloneElement(children, {
         ref: (node) => {
           nodeRef.current = node;
           const childRef = children.ref;
@@ -1649,31 +1663,37 @@ var ThemeContext = createContext(void 0);
 function ThemeProvider({ children, defaultTheme = "system" }) {
   const [mode, setMode] = useState(defaultTheme);
   const [isDark, setIsDark] = useState(false);
-  const stateRef = useRef(mode);
-  useEffect(() => {
-    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    const isDark2 = mode === "dark" || mode === "system" && prefersDark;
-    document.documentElement.classList.toggle("dark", isDark2);
-    stateRef.current = mode;
-    setIsDark(isDark2);
-  }, [mode]);
+  const [mounted, setMounted] = useState(false);
   useEffect(() => {
     const saved = localStorage.getItem("theme") || defaultTheme;
     setMode(saved);
+    setMounted(true);
   }, [defaultTheme]);
   useEffect(() => {
+    if (!mounted) return;
     const media = window.matchMedia("(prefers-color-scheme: dark)");
-    const listener = () => {
-      const prevMode = stateRef.current;
-      if (prevMode !== "system") {
-        setTimeout(() => {
-          document.documentElement.classList.toggle("dark", prevMode === "dark");
-        }, 100);
+    const updateTheme = () => {
+      const prefersDark = media.matches;
+      const currentIsDark = mode === "dark" || mode === "system" && prefersDark;
+      if (currentIsDark) {
+        document.documentElement.classList.add("dark");
+        document.documentElement.classList.remove("light");
+      } else {
+        document.documentElement.classList.remove("dark");
+        document.documentElement.classList.add("light");
       }
+      setIsDark(currentIsDark);
     };
-    media.addEventListener("change", listener);
-    return () => media.removeEventListener("change", listener);
-  }, []);
+    const timeoutId = setTimeout(updateTheme, 0);
+    const handleMediaChange = () => {
+      updateTheme();
+    };
+    media.addEventListener("change", handleMediaChange);
+    return () => {
+      clearTimeout(timeoutId);
+      media.removeEventListener("change", handleMediaChange);
+    };
+  }, [mode, mounted]);
   function handleToggleTheme(triggerMode) {
     const triggeredMode = triggerMode === mode ? "system" : triggerMode;
     setMode(triggeredMode);
@@ -2420,9 +2440,9 @@ function Dragger({
     }
     dispatch({ dragging: false });
   }
-  const derivedItems = !!items && React15.cloneElement(children, {
+  const derivedItems = !!items && React16.cloneElement(children, {
     children: items.map((grandChild, index) => {
-      return React15.cloneElement(grandChild, {
+      return React16.cloneElement(grandChild, {
         id: (records[index] || {}).id,
         draggable: true,
         className: classNames({
@@ -2439,9 +2459,9 @@ function Dragger({
       });
     })
   });
-  const derivedDisplayItems = !!displayItems && React15.cloneElement(children, {
+  const derivedDisplayItems = !!displayItems && React16.cloneElement(children, {
     children: displayItems.map((grandChild, index) => {
-      return React15.cloneElement(grandChild, {
+      return React16.cloneElement(grandChild, {
         draggable: true,
         className: classNames({
           ...classNameObject(grandChild.props.className),
@@ -3040,7 +3060,7 @@ function DataTableRow({ index, selected, label, description, additionalDescripti
               "!text-left": dataItem.align === "left",
               "align-middle": vertical === "middle"
             }),
-            children: typeof dataItem.data[index] === "string" || React15.isValidElement(dataItem.data[index]) ? dataItem.data[index] : numberFormatter(dataItem.data[index], dataItem.decimal != null ? dataItem.decimal : 1)
+            children: typeof dataItem.data[index] === "string" || React16.isValidElement(dataItem.data[index]) ? dataItem.data[index] : numberFormatter(dataItem.data[index], dataItem.decimal != null ? dataItem.decimal : 1)
           },
           `${dataIndex}-${index}`
         ))
@@ -3177,7 +3197,7 @@ function DataTable({
                 backgroundColor: `${colors[dataIndex]}`,
                 color: bestTextColorForBg(colors[dataIndex])
               } : void 0,
-              children: typeof total[dataIndex] === "string" || React15.isValidElement(total[dataIndex]) ? total[dataIndex] : showCurrency ? /* @__PURE__ */ jsx(CurrencyDisplay, { amount: total[dataIndex] }) : numberFormatter(total[dataIndex], 1)
+              children: typeof total[dataIndex] === "string" || React16.isValidElement(total[dataIndex]) ? total[dataIndex] : showCurrency ? /* @__PURE__ */ jsx(CurrencyDisplay, { amount: total[dataIndex] }) : numberFormatter(total[dataIndex], 1)
             },
             `${dataIndex}-total`
           ))