flowbite-react - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

dist/Card.d.ts

 import { FC } from 'react';
 export declare type CardProps = {
     className?: string;
+    horizontal?: boolean;
+    imgSrc?: string;
 };
 export declare const Card: FC<CardProps>;

dist/Card.js

@@ -1,5 +0,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-export const Card = ({ children, className }) => {
-    return (_jsx("div", { className: classNames('flex flex-col gap-4 w-full p-6 bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700', className), children: children }, void 0));
+export const Card = ({ children, className, horizontal, imgSrc }) => {
+    return (_jsxs("div", { className: classNames('flex bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700', {
+            'flex-col': !horizontal,
+            'flex-col md:flex-row md:max-w-xl': horizontal,
+        }, className), children: [imgSrc && (_jsx("img", { className: classNames({
+                    'rounded-t-lg': !horizontal,
+                    'rounded-t-lg h-96 w-full object-cover md:h-auto md:w-48 md:rounded-none md:rounded-l-lg': horizontal,
+                }), src: imgSrc, alt: "" }, void 0)), _jsx("div", { className: "flex flex-col justify-center gap-4 p-6 h-full", children: children }, void 0)] }, void 0));
 };

dist/Sidebar.js

@@ -1,2 +0,2 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
@@ -6,2 +6,3 @@ import classNames from 'classnames';
 import { HiChevronDown } from 'react-icons/hi';
+import { Tooltip } from './Tooltip';
 export const Sidebar = ({ collapsed, itemsGroups }) => {
@@ -13,2 +14,3 @@ const [groupsState, setGroupsState] = useState({});
     };
+    const ItemWrapper = ({ title, children }) => collapsed ? (_jsx(Tooltip, { content: title, placement: "right", children: children }, void 0)) : (_jsx(_Fragment, { children: children }, void 0));
     return (_jsx("aside", { className: classNames('h-full', {
@@ -19,13 +21,13 @@ 'w-64': !collapsed,
                     'pt-4 mt-4 border-t border-gray-200 dark:border-gray-700': groupIndex > 0,
-                }), children: items.map((item, itemIndex) => (_jsx("li", { children: item.group === false ? (_jsxs(Link, { className: classNames('flex group items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700', {
-                            'bg-gray-100 dark:bg-gray-700': item.href === pathname,
-                        }), to: item.href, children: [_jsx("div", { className: "group-hover:text-black dark:group-hover:text-white", children: _jsx(item.icon, { className: "w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" }, void 0) }, void 0), !collapsed && _jsx("span", { className: "flex-1 ml-3 whitespace-nowrap", children: item.title }, void 0), !collapsed && item.label && (_jsx("span", { className: "inline-flex justify-center items-center p-3 ml-3 w-3 h-3 text-sm font-medium text-blue-600 bg-blue-200 rounded-full dark:bg-blue-900 dark:text-blue-200", children: item.label }, void 0))] }, void 0)) : (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", className: "flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700", onClick: toggleGroup(groupIndex), children: [_jsx(item.icon, { className: "w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" }, void 0), !collapsed && (_jsxs(_Fragment, { children: [_jsx("span", { className: "flex-1 ml-3 text-left whitespace-nowrap", children: item.title }, void 0), _jsx(HiChevronDown, { className: "w-6 h-6" }, void 0)] }, void 0))] }, void 0), _jsx("ul", { className: classNames('py-2 space-y-2', {
+                }), children: items.map((item, itemIndex) => (_jsx("li", { children: item.group === false ? (_jsx(ItemWrapper, { title: item.title, children: _jsxs(Link, { className: classNames('flex group items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700', {
+                                'bg-gray-100 dark:bg-gray-700': item.href === pathname,
+                            }), to: item.href, children: [_jsx("div", { className: "group-hover:text-black dark:group-hover:text-white", children: _jsx(item.icon, { className: "w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" }, void 0) }, void 0), !collapsed && _jsx("span", { className: "flex-1 ml-3 whitespace-nowrap", children: item.title }, void 0), !collapsed && item.label && (_jsx("span", { className: "inline-flex justify-center items-center p-3 ml-3 w-3 h-3 text-sm font-medium text-blue-600 bg-blue-200 rounded-full dark:bg-blue-900 dark:text-blue-200", children: item.label }, void 0))] }, void 0) }, void 0)) : (_jsxs(_Fragment, { children: [_jsx(ItemWrapper, { title: item.title, children: _jsxs("button", { type: "button", className: "flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700", onClick: toggleGroup(groupIndex), children: [_jsx(item.icon, { className: "w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" }, void 0), !collapsed && (_jsxs(_Fragment, { children: [_jsx("span", { className: "flex-1 ml-3 text-left whitespace-nowrap", children: item.title }, void 0), _jsx(HiChevronDown, { className: "w-6 h-6" }, void 0)] }, void 0))] }, void 0) }, void 0), _jsx("ul", { className: classNames('py-2 space-y-2', {
                                     hidden: !groupsState[groupIndex],
-                                }), children: item.items.map((subItem, subItemIndex) => (_jsx("li", { children: _jsxs(Link, { className: classNames('flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700', {
-                                            'pl-11': !collapsed,
-                                            'bg-gray-100 dark:bg-gray-700': subItem.href === pathname,
-                                        }), to: subItem.href, children: [_jsx("span", { className: classNames('flex-1 whitespace-nowrap', {
-                                                    'text-left': !collapsed,
-                                                    'text-center': collapsed,
-                                                }), children: !collapsed ? subItem.title : subItem.title[0] }, void 0), !collapsed && subItem.label && (_jsx("span", { className: "inline-flex justify-center items-center p-3 ml-3 w-3 h-3 text-sm font-medium text-blue-600 bg-blue-200 rounded-full dark:bg-blue-900 dark:text-blue-200", children: subItem.label }, void 0))] }, void 0) }, subItemIndex))) }, void 0)] }, void 0)) }, itemIndex))) }, groupIndex))) }, void 0) }, void 0));
+                                }), children: item.items.map((subItem, subItemIndex) => (_jsx("li", { children: _jsx(ItemWrapper, { title: subItem.title, children: _jsxs(Link, { className: classNames('flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700', {
+                                                'pl-11': !collapsed,
+                                                'bg-gray-100 dark:bg-gray-700': subItem.href === pathname,
+                                            }), to: subItem.href, children: [_jsx("span", { className: classNames('flex-1 whitespace-nowrap', {
+                                                        'text-left': !collapsed,
+                                                        'text-center': collapsed,
+                                                    }), children: !collapsed ? subItem.title : subItem.title[0] }, void 0), !collapsed && subItem.label && (_jsx("span", { className: "inline-flex justify-center items-center p-3 ml-3 w-3 h-3 text-sm font-medium text-blue-600 bg-blue-200 rounded-full dark:bg-blue-900 dark:text-blue-200", children: subItem.label }, void 0))] }, void 0) }, void 0) }, subItemIndex))) }, void 0)] }, void 0)) }, itemIndex))) }, groupIndex))) }, void 0) }, void 0));
 };

package.json

 {
   "name": "flowbite-react",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "main": "./dist/index.js",
@@ -5,0 +5,0 @@ "files": [

README.md

 # :construction: flowbite-react :construction:
 
+[![npm version](https://badge.fury.io/js/flowbite-react.svg)](https://badge.fury.io/js/flowbite-react)
+
 Flowbite react components

No alert changes

Improved metrics

Lines of code

385

3.22%

Number of lines in readme file

6

50%

Worsened metrics

Total package byte prevSize

31649

-3.34%

Number of package files

27

-3.57%

No dependency changes