karsten-design-system 1.2.25 → 1.2.26

package/dist/index.d.ts

@@ -27,6 +27,7 @@ export * from './stories/components/multiselect';
 export * from './stories/components/notificationsSidebar';
 export * from './stories/components/paginator';
 export * from './stories/components/radioButton';
+export * from './stories/components/rightSidebar';
 export * from './stories/components/select';
 export * from './stories/components/sidebar';
 export * from './stories/components/skeleton';

package/dist/index.js

@@ -4183,14 +4183,14 @@ function NotificationItem({ notification, onDelete, onClick, }) {
     return (jsxs("div", { className: "flex flex-row items-start gap-2 px-2 hover:text-primary cursor-pointer rounded", children: [jsx("i", { className: "pi pi-circle-fill text-xs pt-1.5", style: { color: notification.active ? '#0AA836' : '#A0A4B3' } }), jsxs("div", { className: "flex-1 text-left", onClick: () => onClick(notification.id), children: [jsx("h2", { className: clsx('text-base font-bold dark:text-light-500', !notification.active && 'text-light-700'), children: notification.title }), jsx("p", { className: clsx('text-sm py-1 text-light-700'), children: notification.description }), jsx("p", { className: clsx('text-sm font-bold dark:text-light-500', !notification.active && 'text-light-700'), children: formatDate(notification.date) })] }), jsx("div", { className: "min-w-6 cursor-pointer", onClick: () => onDelete(notification.id), children: jsx("i", { className: "pi pi-trash text-light-950 hover:text-light-900 dark:text-light-500 dark:hover:text-light-100" }) })] }, notification.id));
 }
 
-function SidebarRight({ isOpen, onClose, children, footer, title, description, }) {
+function RightSidebar({ isOpen, onClose, children, footer, title, description, }) {
     if (!isOpen)
         return null;
     return (jsxs("div", { className: "fixed inset-0 z-50 flex justify-end", children: [jsx("div", { className: "fixed inset-0 bg-light-900/20 dark:bg-dark-900/40", onClick: onClose, "aria-label": "Fechar Sidebar" }), jsxs("div", { className: `right-0 top-0 h-full w-full relative  sm:w-[90%] md:w-[60%] lg:w-[40%] bg-light-500 dark:bg-dark-100 shadow-container dark:shadow-dark-400 dark:border-l dark:border-dark-500 flex flex-col`, children: [(title || description) && (jsxs("div", { className: "px-4", children: [title && (jsx("h2", { className: "text-lg font-semibold text-primary dark:text-light-500", children: title })), description && (jsx("p", { className: "text-sm text-primary dark:text-light-500", children: description })), jsx(Divider, {})] })), jsx("div", { className: "flex-1 overflow-y-auto px-4 custom-scrollbar text-primary dark:text-light-500", children: children }), footer && (jsxs("div", { className: "px-4 pb-4", children: [jsx(Divider, {}), jsx(Fragment, { children: footer })] }))] })] }));
 }
 
 function NotificationsSidebar({ onReadAll, onDeleteNotificationbyId, onClickNotification, notifications, setInputValue, inputValue, isOpen = false, onClose, }) {
-    return (jsxs(SidebarRight, { isOpen: isOpen, onClose: onClose, children: [jsxs("div", { className: "flex justify-between items-center px-2 py-3 border-b border-[#F1F1F4]", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("i", { className: "pi pi-bell text-light-900 dark:text-light-500" }), jsx("h2", { className: "font-roboto text-base text-light-900 font-bold dark:text-light-500", children: "Notifica\u00E7\u00F5es" })] }), jsx("div", { children: jsx(Button, { label: "Marcar todas como lidas", variant: "secondaryOutline", onClick: onReadAll, className: "px-2 py-1 text-xs h-7" }) })] }), jsx("div", { className: "px-2 py-4 flex flex-row gap-4", children: jsx(Input, { value: inputValue, onChange: setInputValue, label: "Pesquisar", placeholder: "Pesquisar", icon: "pi-search", iconColor: "gray" }) }), jsx("div", { className: "flex-1 px-2 pb-4 overflow-y-auto custom-scrollbar", children: notifications.length > 0 ? (notifications.map((notification) => (jsxs("div", { className: "hover:bg-light-300 transition-colors rounded dark:hover:bg-dark-300", children: [jsx(NotificationItem, { notification: notification, onDelete: onDeleteNotificationbyId, onClick: onClickNotification }), jsx(Divider, {})] }, notification.id)))) : (jsx("div", { className: "p-6 text-justify text-primary bg-light-300 dark:bg-dark-500 dark:text-light-500", children: jsx("div", { className: "py-2 rounded-lg font-semibold text-center", children: "Sem notifica\u00E7\u00F5es" }) })) })] }));
+    return (jsxs(RightSidebar, { isOpen: isOpen, onClose: onClose, children: [jsxs("div", { className: "flex justify-between items-center px-2 py-3 border-b border-[#F1F1F4]", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("i", { className: "pi pi-bell text-light-900 dark:text-light-500" }), jsx("h2", { className: "font-roboto text-base text-light-900 font-bold dark:text-light-500", children: "Notifica\u00E7\u00F5es" })] }), jsx("div", { children: jsx(Button, { label: "Marcar todas como lidas", variant: "secondaryOutline", onClick: onReadAll, className: "px-2 py-1 text-xs h-7" }) })] }), jsx("div", { className: "px-2 py-4 flex flex-row gap-4", children: jsx(Input, { value: inputValue, onChange: setInputValue, label: "Pesquisar", placeholder: "Pesquisar", icon: "pi-search", iconColor: "gray" }) }), jsx("div", { className: "flex-1 px-2 pb-4 overflow-y-auto custom-scrollbar", children: notifications.length > 0 ? (notifications.map((notification) => (jsxs("div", { className: "hover:bg-light-300 transition-colors rounded dark:hover:bg-dark-300", children: [jsx(NotificationItem, { notification: notification, onDelete: onDeleteNotificationbyId, onClick: onClickNotification }), jsx(Divider, {})] }, notification.id)))) : (jsx("div", { className: "p-6 text-justify text-primary bg-light-300 dark:bg-dark-500 dark:text-light-500", children: jsx("div", { className: "py-2 rounded-lg font-semibold text-center", children: "Sem notifica\u00E7\u00F5es" }) })) })] }));
 }
 
 function Paginator(props) {
@@ -4655,5 +4655,5 @@ function Toast({ messages }) {
                 : ''), "aria-label": "toast", children: [severity === 'success' && jsx(SuccessIcon, {}), severity === 'info' && jsx(InfoIcon, {}), severity === 'error' && jsx(ErrorIcon, {}), jsxs("div", { children: [jsx("strong", { children: summary }), jsx("p", { children: detail })] })] }, id))) }));
 }
 
-export { Accordion, BasicHeader, Breadcrumb, Button, CalendarInput, Card, CardButton, CardIconsButton, Charts, Divider, EmptyContent, ExpandablePanel, FileUpload, FilterButton, Header, IconButton, InfoCard, Input, InputSwitch, InputTextArea, InternalMenu, Link, MegaMenu, Modal, MultiSelect, NotificationsSidebar, Paginator, RadioButton, Select, Sidebar, Skeleton, Spinner, Table, Tabs, TagStatus, Toast, Tooltip };
+export { Accordion, BasicHeader, Breadcrumb, Button, CalendarInput, Card, CardButton, CardIconsButton, Charts, Divider, EmptyContent, ExpandablePanel, FileUpload, FilterButton, Header, IconButton, InfoCard, Input, InputSwitch, InputTextArea, InternalMenu, Link, MegaMenu, Modal, MultiSelect, NotificationsSidebar, Paginator, RadioButton, RightSidebar, Select, Sidebar, Skeleton, Spinner, Table, Tabs, TagStatus, Toast, Tooltip };
 //# sourceMappingURL=index.js.map