tw-react-components 0.0.150 → 0.0.152

package/index.esm.js

@@ -3,10 +3,10 @@ import { forwardRef, useMemo, useState, useEffect, useId, useCallback, useRef, c
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import dayjs from 'dayjs';
-import advancedFormat from 'dayjs/plugin/advancedFormat';
+import advancedFormat from 'dayjs/plugin/advancedFormat.js';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import { HelpCircle, XIcon, AtSignIcon, EyeIcon, EyeOffIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, CalendarIcon, ClockIcon, CheckIcon, CircleIcon, CloudUploadIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, ArrowUpDownIcon, SortAscIcon, SortDescIcon, MinusIcon, PlusIcon, PanelLeft, MoonIcon, SunIcon, MonitorIcon } from 'lucide-react';
-import localeData from 'dayjs/plugin/localeData';
+import localeData from 'dayjs/plugin/localeData.js';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { useFormContext, Controller, FormProvider } from 'react-hook-form';
@@ -1790,7 +1790,7 @@ const SidebarContextProvider = forwardRef((_a, ref) => {
     var { defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children } = _a, props = __rest(_a, ["defaultOpen", "open", "onOpenChange", "className", "style", "children"]);
     const isMobile = useIsMobile();
     const [openMobile, setOpenMobile] = useState(false);
-    const screenRef = useRef(document.documentElement);
+    const screenRef = useRef(typeof document === 'undefined' ? null : document.documentElement);
     // This is the internal state of the sidebar.
     // We use openProp and setOpenProp for control from outside the component.
     const [_open, _setOpen] = useState(getValueFromCookie(SIDEBAR_COOKIE_NAME, defaultOpen));
@@ -2112,8 +2112,8 @@ const THEME_COOKIE_NAME = 'theme:state';
 const THEME_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SHOW_IDS_COOKIE_NAME = 'show-ids:state';
 const SHOW_IDS_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const LayoutContextProvider = ({ children }) => {
-    const [theme, _setTheme] = useState(getValueFromCookie(THEME_COOKIE_NAME, 'system'));
+const LayoutContextProvider = ({ children, defaultTheme, }) => {
+    const [theme, _setTheme] = useState(defaultTheme !== null && defaultTheme !== void 0 ? defaultTheme : getValueFromCookie(THEME_COOKIE_NAME, 'system'));
     const [showIds, _setShowIds] = useState(getValueFromCookie(SHOW_IDS_COOKIE_NAME, false));
     const [resolvedTheme, setResolvedTheme] = useState(() => theme === 'system' ? getSystemTheme() : theme);
     useEffect(() => {
@@ -2156,6 +2156,8 @@ function useLayoutContext() {
     return context;
 }
 function getSystemTheme(e) {
+    if (typeof window === 'undefined')
+        return 'light';
     if (!e)
         e = window.matchMedia(THEME_MEDIA_QUERY);
     return e.matches ? 'dark' : 'light';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tw-react-components",
   "description": "A set of React components build with TailwindCSS to make a nice dashboard.",
-  "version": "0.0.150",
+  "version": "0.0.152",
   "license": "MIT",
   "homepage": "https://bacali95.github.io/tw-react-components",
   "type": "module",

package/src/contexts/LayoutContext.d.ts

@@ -13,5 +13,7 @@ export declare const THEME_COOKIE_NAME = "theme:state";
 export declare const THEME_COOKIE_MAX_AGE: number;
 export declare const SHOW_IDS_COOKIE_NAME = "show-ids:state";
 export declare const SHOW_IDS_COOKIE_MAX_AGE: number;
-export declare const LayoutContextProvider: FC<PropsWithChildren>;
+export declare const LayoutContextProvider: FC<PropsWithChildren<{
+    defaultTheme?: ThemeState;
+}>>;
 export declare function useLayoutContext(): LayoutContext;