tw-react-components 0.0.149 → 0.0.151

package/index.esm.js

@@ -16,7 +16,6 @@ import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, close
 import { restrictToFirstScrollableAncestor } from '@dnd-kit/modifiers';
 import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { useLocation, Link } from 'react-router-dom';
 import { Slot } from '@radix-ui/react-slot';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
@@ -1791,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));
@@ -2039,14 +2038,14 @@ const Sidebar = Object.assign($Sidebar, {
 const Navbar = ({ className, sidebarTriggerClassName, leftSlot, rightSlot, }) => (jsx(Block, { className: cn('border-b p-3 dark:border-slate-700', className), fullWidth: true, children: jsxs(Flex, { align: "center", justify: "between", children: [jsxs(Flex, { align: "center", children: [jsx(Sidebar.Trigger, { className: sidebarTriggerClassName }), leftSlot] }), rightSlot] }) }));
 
 const Layout = (_a) => {
-    var { children, className } = _a, _b = _a.sidebarProps, { basePath, header, items, extraContent, footer } = _b, sidebarProps = __rest(_b, ["basePath", "header", "items", "extraContent", "footer"]), { navbarProps } = _a;
+    var { children, className } = _a, _b = _a.sidebarProps, { basePath, header, items, extraContent, footer } = _b, sidebarProps = __rest(_b, ["basePath", "header", "items", "extraContent", "footer"]), { navbarProps, Link, useLocation } = _a;
     return (jsxs(Flex, { className: "h-screen w-screen gap-0 text-black dark:bg-slate-900 dark:text-white", children: [jsxs(Sidebar, Object.assign({ collapsible: "icon" }, sidebarProps, { children: [header && (jsx(Sidebar.Header, { children: jsx(Sidebar.Menu, { children: jsx(Sidebar.MenuItem, { children: header }) }) })), jsxs(Sidebar.Content, { className: "gap-0", children: [items
                                 .filter((item) => !item.hidden)
-                                .map((item, index) => item.type === 'item' ? (jsx(Sidebar.Group, { children: jsx(Sidebar.Menu, { children: jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, item)) }) }, index)) : (jsxs(Sidebar.Group, { children: [item.title && jsx(Sidebar.GroupLabel, { children: item.title }), jsx(Sidebar.GroupContent, { children: jsx(Sidebar.Menu, { children: item.items
+                                .map((item, index) => item.type === 'item' ? (jsx(Sidebar.Group, { children: jsx(Sidebar.Menu, { children: jsx(RenderSideBarItem, Object.assign({ basePath: basePath, Link: Link, useLocation: useLocation }, item)) }) }, index)) : (jsxs(Sidebar.Group, { children: [item.title && jsx(Sidebar.GroupLabel, { children: item.title }), jsx(Sidebar.GroupContent, { children: jsx(Sidebar.Menu, { children: item.items
                                                 .filter((subItem) => !subItem.hidden)
-                                                .map((subItem, index) => (jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, subItem), index))) }) })] }, index))), extraContent] }), footer && (jsx(Sidebar.Footer, { children: jsx(Sidebar.Menu, { children: jsx(Sidebar.MenuItem, { children: footer }) }) })), jsx(Sidebar.Rail, {})] })), jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column", fullHeight: true, fullWidth: true, children: [navbarProps && jsx(Navbar, Object.assign({}, navbarProps)), jsx(Flex, { className: cn('overflow-hidden p-3', className), direction: "column", fullWidth: true, fullHeight: true, children: children })] })] }));
+                                                .map((subItem, index) => (jsx(RenderSideBarItem, Object.assign({ basePath: basePath, Link: Link, useLocation: useLocation }, subItem), index))) }) })] }, index))), extraContent] }), footer && (jsx(Sidebar.Footer, { children: jsx(Sidebar.Menu, { children: jsx(Sidebar.MenuItem, { children: footer }) }) })), jsx(Sidebar.Rail, {})] })), jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column", fullHeight: true, fullWidth: true, children: [navbarProps && jsx(Navbar, Object.assign({}, navbarProps)), jsx(Flex, { className: cn('overflow-hidden p-3', className), direction: "column", fullWidth: true, fullHeight: true, children: children })] })] }));
 };
-const RenderSideBarItem = ({ basePath = '/', pathname, title, Icon, items, }) => {
+const RenderSideBarItem = ({ basePath = '/', pathname, title, Icon, items, Link, useLocation }) => {
     const location = useLocation();
     const { open } = useSidebar();
     const currentPath = useMemo(() => location.pathname.replace(basePath, '').replace(/^\/*/, ''), [basePath, location.pathname]);
@@ -2113,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(() => {
@@ -2157,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,9 +1,10 @@
 {
   "name": "tw-react-components",
   "description": "A set of React components build with TailwindCSS to make a nice dashboard.",
-  "version": "0.0.149",
+  "version": "0.0.151",
   "license": "MIT",
   "homepage": "https://bacali95.github.io/tw-react-components",
+  "type": "module",
   "author": {
     "name": "Nasreddine Bac Ali",
     "email": "nasreddine.bacali95@gmail.com",
@@ -18,10 +19,8 @@
   },
   "exports": {
     ".": {
-      "module": "./index.esm.js",
-      "types": "./index.esm.d.ts",
-      "import": "./index.cjs.mjs",
-      "default": "./index.cjs.js"
+      "import": "./index.esm.js",
+      "types": "./index.esm.d.ts"
     },
     "./css": {
       "default": "./index.css"
@@ -32,6 +31,6 @@
     "./package.json": "./package.json"
   },
   "module": "./index.esm.js",
-  "main": "./index.cjs.js",
+  "main": "./index.esm.js",
   "types": "./index.esm.d.ts"
 }

package/src/components/Layout/index.d.ts

@@ -1,5 +1,6 @@
 import { LucideIcon } from 'lucide-react';
 import { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react';
+import type { LinkProps, useLocation } from 'react-router-dom';
 import { NavbarProps } from '../Navbar';
 import { Sidebar } from '../Sidebar';
 export type SidebarItem = {
@@ -27,6 +28,8 @@ type Props = {
     className?: string;
     sidebarProps: SidebarProps;
     navbarProps?: NavbarProps;
+    Link: FC<LinkProps>;
+    useLocation: typeof useLocation;
 };
 export declare const Layout: FC<PropsWithChildren<Props>>;
 export {};

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;

package/index.cjs.d.ts

@@ -1 +0,0 @@
-export * from "./src/index";

package/index.cjs.default.js

@@ -1 +0,0 @@
-exports._default = require('./index.cjs.js').default;