tw-react-components 0.0.137 → 0.0.138

package/index.cjs.js

@@ -2034,10 +2034,11 @@ const Sidebar = Object.assign($Sidebar, {
     Trigger: SidebarTrigger,
 });
 
-const Navbar = ({ leftSlot, rightSlot }) => (jsxRuntime.jsx(Block, { className: "border-b p-3 dark:border-slate-700", fullWidth: true, children: jsxRuntime.jsxs(Flex, { align: "center", justify: "between", children: [jsxRuntime.jsxs(Flex, { align: "center", children: [jsxRuntime.jsx(Sidebar.Trigger, {}), leftSlot] }), rightSlot] }) }));
+const Navbar = ({ className, leftSlot, rightSlot }) => (jsxRuntime.jsx(Block, { className: cn('border-b p-3 dark:border-slate-700', className), fullWidth: true, children: jsxRuntime.jsxs(Flex, { align: "center", justify: "between", children: [jsxRuntime.jsxs(Flex, { align: "center", children: [jsxRuntime.jsx(Sidebar.Trigger, {}), leftSlot] }), rightSlot] }) }));
 
-const Layout = ({ children, className, sidebarProps, navbarProps, }) => {
-    return (jsxRuntime.jsxs(Flex, { className: "h-screen w-screen gap-0 text-black dark:bg-slate-900 dark:text-white", children: [jsxRuntime.jsxs(Sidebar, Object.assign({ collapsible: "icon" }, sidebarProps.root, { children: [jsxRuntime.jsx(Sidebar.Header, { children: sidebarProps.smallLogo && sidebarProps.fullLogo && (jsxRuntime.jsx("div", { className: "cursor-pointer overflow-hidden whitespace-nowrap py-2 text-center text-lg", children: jsxRuntime.jsxs(reactRouterDom.Link, { to: "/", children: [jsxRuntime.jsx("span", { className: "group-data-[state=collapsed]:hidden", children: sidebarProps.fullLogo }), jsxRuntime.jsx("span", { className: "group-data-[state=expanded]:hidden", children: sidebarProps.smallLogo })] }) })) }), jsxRuntime.jsx(Sidebar.Content, { className: "gap-0", children: sidebarProps.items.map((item, index) => item.type === 'item' ? (jsxRuntime.jsx(Sidebar.Group, { children: jsxRuntime.jsx(Sidebar.Menu, { children: jsxRuntime.jsx(RenderSideBarItem, Object.assign({ basePath: sidebarProps.basePath }, item)) }) }, index)) : (jsxRuntime.jsxs(Sidebar.Group, { children: [item.title && jsxRuntime.jsx(Sidebar.GroupLabel, { children: item.title }), jsxRuntime.jsx(Sidebar.GroupContent, { children: jsxRuntime.jsx(Sidebar.Menu, { children: item.items.map((item, index) => (jsxRuntime.jsx(RenderSideBarItem, Object.assign({ basePath: sidebarProps.basePath }, item), index))) }) })] }, index))) }), jsxRuntime.jsx(Sidebar.Rail, {})] })), jsxRuntime.jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column", fullHeight: true, fullWidth: true, children: [jsxRuntime.jsx(Navbar, Object.assign({}, navbarProps)), jsxRuntime.jsx(Flex, { className: cn('overflow-hidden p-3', className), direction: "column", fullWidth: true, fullHeight: true, children: children })] })] }));
+const Layout = (_a) => {
+    var { children, className } = _a, _b = _a.sidebarProps, { basePath, smallLogo, fullLogo, items } = _b, sidebarProps = __rest(_b, ["basePath", "smallLogo", "fullLogo", "items"]), { navbarProps } = _a;
+    return (jsxRuntime.jsxs(Flex, { className: "h-screen w-screen gap-0 text-black dark:bg-slate-900 dark:text-white", children: [jsxRuntime.jsxs(Sidebar, Object.assign({ collapsible: "icon" }, sidebarProps, { children: [jsxRuntime.jsx(Sidebar.Header, { children: smallLogo && fullLogo && (jsxRuntime.jsx("div", { className: "cursor-pointer overflow-hidden whitespace-nowrap py-2 text-center text-lg", children: jsxRuntime.jsxs(reactRouterDom.Link, { to: "/", children: [jsxRuntime.jsx("span", { className: "group-data-[state=collapsed]:hidden", children: fullLogo }), jsxRuntime.jsx("span", { className: "group-data-[state=expanded]:hidden", children: smallLogo })] }) })) }), jsxRuntime.jsx(Sidebar.Content, { className: "gap-0", children: items.map((item, index) => item.type === 'item' ? (jsxRuntime.jsx(Sidebar.Group, { children: jsxRuntime.jsx(Sidebar.Menu, { children: jsxRuntime.jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, item)) }) }, index)) : (jsxRuntime.jsxs(Sidebar.Group, { children: [item.title && jsxRuntime.jsx(Sidebar.GroupLabel, { children: item.title }), jsxRuntime.jsx(Sidebar.GroupContent, { children: jsxRuntime.jsx(Sidebar.Menu, { children: item.items.map((item, index) => (jsxRuntime.jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, item), index))) }) })] }, index))) }), jsxRuntime.jsx(Sidebar.Rail, {})] })), jsxRuntime.jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column", fullHeight: true, fullWidth: true, children: [jsxRuntime.jsx(Navbar, Object.assign({}, navbarProps)), jsxRuntime.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 location = reactRouterDom.useLocation();

package/index.esm.js

@@ -2007,10 +2007,11 @@ const Sidebar = Object.assign($Sidebar, {
     Trigger: SidebarTrigger,
 });
 
-const Navbar = ({ leftSlot, rightSlot }) => (jsx(Block, { className: "border-b p-3 dark:border-slate-700", fullWidth: true, children: jsxs(Flex, { align: "center", justify: "between", children: [jsxs(Flex, { align: "center", children: [jsx(Sidebar.Trigger, {}), leftSlot] }), rightSlot] }) }));
+const Navbar = ({ className, 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, {}), leftSlot] }), rightSlot] }) }));
 
-const Layout = ({ children, className, sidebarProps, navbarProps, }) => {
-    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.root, { children: [jsx(Sidebar.Header, { children: sidebarProps.smallLogo && sidebarProps.fullLogo && (jsx("div", { className: "cursor-pointer overflow-hidden whitespace-nowrap py-2 text-center text-lg", children: jsxs(Link, { to: "/", children: [jsx("span", { className: "group-data-[state=collapsed]:hidden", children: sidebarProps.fullLogo }), jsx("span", { className: "group-data-[state=expanded]:hidden", children: sidebarProps.smallLogo })] }) })) }), jsx(Sidebar.Content, { className: "gap-0", children: sidebarProps.items.map((item, index) => item.type === 'item' ? (jsx(Sidebar.Group, { children: jsx(Sidebar.Menu, { children: jsx(RenderSideBarItem, Object.assign({ basePath: sidebarProps.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) => (jsx(RenderSideBarItem, Object.assign({ basePath: sidebarProps.basePath }, item), index))) }) })] }, index))) }), jsx(Sidebar.Rail, {})] })), jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column", fullHeight: true, fullWidth: true, children: [jsx(Navbar, Object.assign({}, navbarProps)), jsx(Flex, { className: cn('overflow-hidden p-3', className), direction: "column", fullWidth: true, fullHeight: true, children: children })] })] }));
+const Layout = (_a) => {
+    var { children, className } = _a, _b = _a.sidebarProps, { basePath, smallLogo, fullLogo, items } = _b, sidebarProps = __rest(_b, ["basePath", "smallLogo", "fullLogo", "items"]), { navbarProps } = _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: [jsx(Sidebar.Header, { children: smallLogo && fullLogo && (jsx("div", { className: "cursor-pointer overflow-hidden whitespace-nowrap py-2 text-center text-lg", children: jsxs(Link, { to: "/", children: [jsx("span", { className: "group-data-[state=collapsed]:hidden", children: fullLogo }), jsx("span", { className: "group-data-[state=expanded]:hidden", children: smallLogo })] }) })) }), jsx(Sidebar.Content, { className: "gap-0", children: items.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) => (jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, item), index))) }) })] }, index))) }), jsx(Sidebar.Rail, {})] })), jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column", fullHeight: true, fullWidth: true, children: [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 location = useLocation();

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.137",
+  "version": "0.0.138",
   "license": "MIT",
   "homepage": "https://bacali95.github.io/tw-react-components",
   "author": {

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

@@ -9,8 +9,7 @@ export type SidebarItem = {
     hidden?: boolean;
     items?: SidebarItem[];
 };
-export type SidebarProps = {
-    root?: ComponentProps<typeof Sidebar>;
+export type SidebarProps = ComponentProps<typeof Sidebar> & {
     basePath?: string;
     smallLogo?: ReactNode;
     fullLogo?: ReactNode;

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

@@ -1,5 +1,6 @@
 import { FC, ReactNode } from 'react';
 export type NavbarProps = {
+    className?: string;
     leftSlot?: ReactNode;
     rightSlot?: ReactNode;
 };