karsten-design-system 2.0.18 → 2.0.19

package/dist/assets/flags/py.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const PY: React.FC;
+export default PY;

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export * from './stories/components/cardButton';
 export * from './stories/components/cardIconsButton';
 export * from './stories/components/charts';
 export * from './stories/components/checkbox';
+export * from './stories/components/countryDropdown';
 export * from './stories/components/divider';
 export * from './stories/components/emptyContent';
 export * from './stories/components/expandablePanel';

package/dist/index.js

@@ -300,6 +300,49 @@ function Checkbox({ label, value, checked, onChange, disabled = false, error = f
                         : 'ring-light-700', variants$3[variant]), "aria-label": ariaLabel }), label] }));
 }
 
+const BR = () => (jsx("div", { className: "w-6 h-6 rounded-md overflow-hidden mr-1 inline-block align-middle mb-1", role: "img", "aria-label": "Brasil Flag", children: jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "w-full h-full", children: [jsx("path", { d: "M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V20Z", fill: "#009C3B" }), jsx("path", { d: "M11.9845 6.0155L2.9845 12L11.9845 18.0155L21.0155 12L11.9845 6.0155Z", fill: "#FFFF00" }), jsx("path", { d: "M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z", fill: "#052379" }), jsx("path", { d: "M13.0115 10.976C12.3795 10.66 11.704 10.5005 11.002 10.5005C9.8835 10.5005 8.843 10.9105 8.038 11.6165C8.026 11.745 8 11.8685 8 12C8 12.343 8.0565 12.67 8.1375 12.9875C8.7865 12.06 9.8425 11.5005 11.0025 11.5005C11.5475 11.5005 12.073 11.625 12.5645 11.8705C13.822 12.499 14.5265 13.7885 14.4875 15.1095C14.841 14.8265 15.147 14.492 15.3875 14.106C15.1195 12.7985 14.295 11.6175 13.0115 10.976Z", fill: "white" })] }) }));
+
+const PY = () => (jsx("div", { className: "w-6 h-6 mr-1 inline-block align-middle mb-1", role: "img", "aria-label": "Paraguay Flag", children: jsxs("svg", { width: "24", height: "18", viewBox: "0 0 24 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "w-full h-full", children: [jsx("path", { d: "M0 0h24v6H0z", fill: "#d52b1e" }), jsx("path", { d: "M0 6h24v6H0z", fill: "#fff" }), jsx("path", { d: "M0 12h24v6H0z", fill: "#0038a8" }), jsx("path", { d: "M12 7.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5z", fill: "#fff", stroke: "#000", strokeWidth: "0.08" }), jsx("path", { d: "M12 8.2a1.8 1.8 0 1 1 0 3.6 1.8 1.8 0 0 1 0-3.6z", fill: "none", stroke: "#000", strokeWidth: "0.06" }), jsx("path", { d: "M12 8.7a1.3 1.3 0 1 1 0 2.6 1.3 1.3 0 0 1 0-2.6z", fill: "none", stroke: "#000", strokeWidth: "0.05" }), jsx("path", { d: "M12 9.1l0.35 0.9H13.2l-0.7 0.5 0.3 0.8-0.8-0.5-0.8 0.5 0.3-0.8-0.7-0.5h0.85z", fill: "#fedf00", stroke: "#000", strokeWidth: "0.07" }), jsx("path", { d: "M12 9.6a0.7 0.7 0 1 1 0 1.4 0.7 0.7 0 0 1 0-1.4z", fill: "#009b3a", stroke: "#000", strokeWidth: "0.03" })] }) }));
+
+const countryOptions = [
+    {
+        country: 'BR',
+        label: 'Brazil',
+        icon: (jsx("span", { className: "inline-block w-5 h-5 mr-1 rounded-full", children: jsx(BR, {}) })),
+    },
+    {
+        country: 'PY',
+        label: 'Paraguay',
+        icon: (jsx("span", { className: "inline-block w-5 h-5 mr-1 rounded-full", children: jsx(PY, {}) })),
+    },
+];
+
+function CountryDropdown({ selected = 'BR', onChange, disabled = false, }) {
+    const [open, setOpen] = useState(false);
+    const ref = useRef(null);
+    useEffect(() => {
+        function handleClickOutside(event) {
+            if (ref.current && !ref.current.contains(event.target)) {
+                setOpen(false);
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    return (jsxs("div", { ref: ref, className: "relative inline-block", children: [jsxs("button", { type: "button", className: clsx('p-1 rounded-md cursor-pointer hover:bg-light-300 dark:hover:bg-dark-400'), onClick: () => setOpen(!open), "aria-haspopup": "listbox", "aria-expanded": open, "aria-label": "Selecionar pa\u00EDs", disabled: disabled, children: [countryOptions.find((country) => country.country === selected)?.icon ||
+                        null, jsx("span", { className: "sr-only", children: selected })] }), open && (jsx("div", { className: clsx('absolute right-0 mt-2 w-40 rounded-md p-2 z-40 shadow-container bg-light-500 dark:text-light-500 dark:bg-dark-100 dark:border dark:border-dark-500 dark:shadow-dark-400'), role: "listbox", children: jsx("ul", { children: countryOptions.map((option) => (jsxs("li", { className: clsx('p-2 cursor-pointer rounded hover:bg-light-300 hover:font-bold dark:bg-dark-100 dark:text-light-500 dark:hover:bg-dark-400 mt-1', option.country === selected &&
+                            'font-bold bg-light-300 dark:bg-dark-400'), role: "option", "aria-selected": option.country === selected, tabIndex: 0, onClick: () => {
+                            onChange(option);
+                            setOpen(false);
+                        }, onKeyDown: (e) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                                e.preventDefault();
+                                onChange(option);
+                                setOpen(false);
+                            }
+                        }, children: [option.icon && (jsx("span", { className: "mr-2 inline-block align-middle", children: option.icon })), jsx("span", { children: option.label })] }, option.country))) }) }))] }));
+}
+
 function Divider({ ...props }) {
     return jsx(Divider$1, { className: "w-full h-px bg-secondary", ...props });
 }
@@ -555,7 +598,7 @@ function Sidebar({ item, onClose, topItem, homeTranslation = 'Início', favorite
                                 }, "aria-label": `Ir para ${item.title}`, children: jsx(Tooltip, { text: item.tooltipText, children: item.title }) })) : (jsx(Link$1, { to: item.path || '', className: "font-roboto text-base text-light-900 hover:font-bold dark:text-light-500 dark:hover:bg-dark-400", onClick: onClose, "aria-label": `Ir para ${item.title}`, children: jsx(Tooltip, { text: item.tooltipText, children: item.title }) })) }, `top-item-${item.id ?? item.title}`))), jsxs("div", { className: "flex flex-row gap-3 items-center pl-6 pt-8 pb-4", children: [jsx("i", { className: "pi pi-star text-light-900 !font-bold text-lg dark:text-light-500" }), jsx("p", { className: "text-light-900 font-bold text-lg dark:text-light-500", children: favoritesTranslation })] })] }), jsx("div", { className: "flex-1 overflow-y-auto overflow-x-hidden px-0 pb-4 pr-1 custom-scrollbar", children: item?.map((item) => (jsx(Link$1, { className: "flex flex-row items-center pl-6 gap-2 border-b border-b-light-200 hover:bg-light-300 hover:font-bold dark:bg-dark-100 dark:text-light-500 dark:hover:bg-dark-400", to: item.path || '', onClick: onClose, "aria-label": `Ir para ${item.title}`, children: jsx("span", { className: "font-roboto text-base py-2 text-light-900 hover:font-bold dark:text-light-500 dark:hover:bg-dark-400", children: jsx(Tooltip, { text: item.tooltipText, children: item.title }) }) }, item.id))) })] }) }));
 }
 
-function Header({ sidebarItems, sidebarTopItems, username, userConfigItems, setOpenNotifications, isRenderNotifications = false, rightActions, redirect = '/', helloTranslation = 'Olá', favoritesTranslation = 'Favoritos', homeTranslation = 'Início', }) {
+function Header({ sidebarItems, sidebarTopItems, username, userConfigItems, setOpenNotifications, isRenderNotifications = false, rightActions, rightActionsLogo, redirect = '/', helloTranslation = 'Olá', favoritesTranslation = 'Favoritos', homeTranslation = 'Início', }) {
     const [openSidebar, setOpenSidebar] = useState(false);
     const [openUserConfig, setOpenUserConfig] = useState(false);
     const userConfigRef = useRef(null);
@@ -592,7 +635,7 @@ function Header({ sidebarItems, sidebarTopItems, username, userConfigItems, setO
             document.removeEventListener('mousedown', handleClickOutsideSidebar);
         };
     }, []);
-    return (jsxs(Fragment, { children: [jsxs("div", { className: "w-100 min-h-16  border-b border-b-light-200 flex flex-row justify-between items-center px-8 shadow-header dark:bg-dark-100 dark:border-b-dark-400", children: [jsxs("div", { className: "flex flex-row items-center gap-4", children: [jsx("button", { ref: iconButtonRef, className: "bg-transparent border-none", onClick: () => setOpenSidebar(!openSidebar), "aria-label": "Abrir menu lateral", children: jsx("i", { className: `${openSidebar ? 'pi pi-list' : 'pi pi-bars'} text-light-950 cursor-pointer hover:text-light-900 text-xl mt-1 }` }) }), jsx(Link$1, { className: "cursor-pointer", to: redirect, "aria-label": "Ir para p\u00E1gina inicial", children: jsx(LogoSmall, {}) }, "logo-link")] }), jsxs("div", { className: "relative flex flex-row gap-4 items-center", children: [isRenderNotifications && (jsx("button", { className: "bg-transparent border-none mt-1", onClick: () => setOpenNotifications(true), "aria-label": "Abrir notifica\u00E7\u00E3o", children: jsx("i", { className: "pi pi-bell text-light-950 cursor-pointer hover:text-light-900" }) })), jsxs("div", { ref: userConfigRef, className: "relative", children: [jsx("button", { className: "bg-transparent border-none", onClick: () => setOpenUserConfig(!openUserConfig), "aria-label": "Abrir menu de configura\u00E7\u00F5es do usu\u00E1rio", children: jsxs("p", { className: "text-light-950 hover:text-light-900 font-roboto font-bold cursor-pointer transition-colors duration-200", children: [helloTranslation, ", ", username] }) }), openUserConfig && (jsx("div", { className: `absolute w-100 z-20 p-2 -bottom-1 translate-y-full shadow-container rounded-md bg-light-500 dark:text-light-500 dark:bg-dark-100 dark:border dark:border-dark-500 dark:shadow-dark-400`, children: jsx("ul", { children: userConfigItems.map(({ id, title, onClick, path }) => (jsx("li", { className: "p-2 rounded hover:bg-light-300 dark:bg-dark-100 dark:text-light-500 dark:hover:bg-dark-400", children: jsx("a", { onClick: () => {
+    return (jsxs(Fragment, { children: [jsxs("div", { className: "w-100 min-h-16  border-b border-b-light-200 flex flex-row justify-between items-center px-8 shadow-header dark:bg-dark-100 dark:border-b-dark-400", children: [jsxs("div", { className: "flex flex-row items-center gap-4", children: [jsx("button", { ref: iconButtonRef, className: "bg-transparent border-none", onClick: () => setOpenSidebar(!openSidebar), "aria-label": "Abrir menu lateral", children: jsx("i", { className: `${openSidebar ? 'pi pi-list' : 'pi pi-bars'} text-light-950 cursor-pointer hover:text-light-900 text-xl mt-1 }` }) }), jsx(Link$1, { className: "cursor-pointer", to: redirect, "aria-label": "Ir para p\u00E1gina inicial", children: jsx(LogoSmall, {}) }, "logo-link"), rightActionsLogo && (jsx("div", { className: "mt-1 flex items-center", children: rightActionsLogo }))] }), jsxs("div", { className: "relative flex flex-row gap-4 items-center", children: [isRenderNotifications && (jsx("button", { className: "bg-transparent border-none mt-1", onClick: () => setOpenNotifications(true), "aria-label": "Abrir notifica\u00E7\u00E3o", children: jsx("i", { className: "pi pi-bell text-light-950 cursor-pointer hover:text-light-900" }) })), jsxs("div", { ref: userConfigRef, className: "relative", children: [jsx("button", { className: "bg-transparent border-none", onClick: () => setOpenUserConfig(!openUserConfig), "aria-label": "Abrir menu de configura\u00E7\u00F5es do usu\u00E1rio", children: jsxs("p", { className: "text-light-950 hover:text-light-900 font-roboto font-bold cursor-pointer transition-colors duration-200", children: [helloTranslation, ", ", username] }) }), openUserConfig && (jsx("div", { className: `absolute w-100 z-20 p-2 -bottom-1 translate-y-full shadow-container rounded-md bg-light-500 dark:text-light-500 dark:bg-dark-100 dark:border dark:border-dark-500 dark:shadow-dark-400`, children: jsx("ul", { children: userConfigItems.map(({ id, title, onClick, path }) => (jsx("li", { className: "p-2 rounded hover:bg-light-300 dark:bg-dark-100 dark:text-light-500 dark:hover:bg-dark-400", children: jsx("a", { onClick: () => {
                                                         if (onClick)
                                                             onClick();
                                                         setOpenUserConfig(false);
@@ -823,8 +866,6 @@ function InternalMenu({ item, isFiltering }) {
         }) }));
 }
 
-const BR = () => (jsx("div", { className: "w-6 h-6 rounded-md overflow-hidden mr-1 inline-block align-middle mb-1", role: "img", "aria-label": "Brasil Flag", children: jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "w-full h-full", children: [jsx("path", { d: "M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V20Z", fill: "#009C3B" }), jsx("path", { d: "M11.9845 6.0155L2.9845 12L11.9845 18.0155L21.0155 12L11.9845 6.0155Z", fill: "#FFFF00" }), jsx("path", { d: "M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z", fill: "#052379" }), jsx("path", { d: "M13.0115 10.976C12.3795 10.66 11.704 10.5005 11.002 10.5005C9.8835 10.5005 8.843 10.9105 8.038 11.6165C8.026 11.745 8 11.8685 8 12C8 12.343 8.0565 12.67 8.1375 12.9875C8.7865 12.06 9.8425 11.5005 11.0025 11.5005C11.5475 11.5005 12.073 11.625 12.5645 11.8705C13.822 12.499 14.5265 13.7885 14.4875 15.1095C14.841 14.8265 15.147 14.492 15.3875 14.106C15.1195 12.7985 14.295 11.6175 13.0115 10.976Z", fill: "white" })] }) }));
-
 const ES = () => (jsx("div", { className: "w-6 h-6 rounded-md overflow-hidden mr-1 inline-block align-middle mb-1", role: "img", "aria-label": "Brasil Flag", children: jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "w-full h-full", children: [jsx("path", { d: "M24 8H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V8Z", fill: "#C60B1E" }), jsx("path", { d: "M24 8H0V16H24V8Z", fill: "#FFC300" }), jsx("path", { d: "M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V16H24V20Z", fill: "#C60B1E" }), jsx("path", { d: "M7 10V9H3V10H4V11H3V13.666L5 15L7 13.666V11H6V10H7Z", fill: "#91443A" })] }) }));
 
 const US = () => (jsx("div", { className: "w-6 h-6 rounded-md overflow-hidden mr-1 inline-block align-middle mb-1", role: "img", "aria-label": "Brasil Flag", children: jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "w-full h-full", children: [jsx("path", { d: "M24 4C24 3.4475 23.5525 3 23 3H10V13H0V20C0 20.5525 0.4475 21 1 21H23C23.5525 21 24 20.5525 24 20V4Z", fill: "#B41F30" }), jsx("path", { d: "M24 5H10V7H24V5Z", fill: "#E6E6E6" }), jsx("path", { d: "M24 9H10V11H24V9Z", fill: "#E6E6E6" }), jsx("path", { d: "M0 13V15H24V13H10H0Z", fill: "#E6E6E6" }), jsx("path", { d: "M24 17H0V19H24V17Z", fill: "#E6E6E6" }), jsx("path", { d: "M10 13H0V4C0 3.4475 0.4475 3 1 3H10V13Z", fill: "#00256A" }), jsx("path", { d: "M5.00002 6.961L4.68352 7.645H3.93152L4.48152 8.215L4.27852 9.039L5.00002 8.63L5.72152 9.039L5.51852 8.215L6.06852 7.645H5.31552L5.00002 6.961Z", fill: "white" }), jsx("path", { d: "M2.55347 4.5145L2.23747 5.1985H1.48547L2.03497 5.7685L1.83197 6.5925L2.55347 6.1835L3.27547 6.5925L3.07197 5.7685L3.62197 5.1985H2.86897L2.55347 4.5145Z", fill: "white" }), jsx("path", { d: "M7.44643 4.5145L7.76243 5.1985H8.51443L7.96493 5.7685L8.16793 6.5925L7.44643 6.1835L6.72443 6.5925L6.92793 5.7685L6.37793 5.1985H7.13093L7.44643 4.5145Z", fill: "white" }), jsx("path", { d: "M2.55347 11.4855L2.23747 10.8015H1.48547L2.03497 10.2315L1.83197 9.4075L2.55347 9.8165L3.27547 9.4075L3.07197 10.2315L3.62197 10.8015H2.86897L2.55347 11.4855Z", fill: "white" }), jsx("path", { d: "M7.44643 11.4855L7.76243 10.8015H8.51443L7.96493 10.2315L8.16793 9.4075L7.44643 9.8165L6.72443 9.4075L6.92793 10.2315L6.37793 10.8015H7.13093L7.44643 11.4855Z", fill: "white" })] }) }));
@@ -847,7 +888,7 @@ const languageOptions = [
     },
 ];
 
-function LanguageDropdown({ selected = 'pt', onChange, }) {
+function LanguageDropdown({ selected = 'pt', onChange, showIcon = true, }) {
     const [open, setOpen] = useState(false);
     const ref = useRef(null);
     useEffect(() => {
@@ -859,7 +900,8 @@ function LanguageDropdown({ selected = 'pt', onChange, }) {
         document.addEventListener('mousedown', handleClickOutside);
         return () => document.removeEventListener('mousedown', handleClickOutside);
     }, []);
-    return (jsxs("div", { ref: ref, className: "relative inline-block", children: [jsxs("button", { type: "button", className: clsx('p-1 rounded-md cursor-pointer hover:bg-light-300 dark:hover:bg-dark-400'), onClick: () => setOpen(!open), "aria-haspopup": "listbox", "aria-expanded": open, "aria-label": "Selecionar idioma", children: [languageOptions.find((lang) => lang.code === selected)?.icon || null, jsx("span", { className: "sr-only", children: selected })] }), open && (jsx("div", { className: clsx('absolute right-0 mt-2 w-40 rounded-md p-2 z-40 shadow-container bg-light-500 dark:text-light-500 dark:bg-dark-100 dark:border dark:border-dark-500 dark:shadow-dark-400'), role: "listbox", children: jsx("ul", { children: languageOptions.map((option) => (jsxs("li", { className: clsx('p-2 cursor-pointer rounded hover:bg-light-300 hover:font-bold dark:bg-dark-100 dark:text-light-500 dark:hover:bg-dark-400 mt-1', option.code === selected &&
+    return (jsxs("div", { ref: ref, className: "relative inline-block", children: [jsxs("button", { type: "button", className: clsx('p-1 rounded-md cursor-pointer hover:bg-light-300 dark:hover:bg-dark-400'), onClick: () => setOpen(!open), "aria-haspopup": "listbox", "aria-expanded": open, "aria-label": "Selecionar idioma", children: [showIcon ? (languageOptions.find((lang) => lang.code === selected)?.icon || null) : (jsx("span", { className: clsx('font-bold', 'text-primary-500', 'dark:text-light-500'), children: languageOptions.find((lang) => lang.code === selected)?.label ||
+                            null })), jsx("span", { className: "sr-only", children: selected })] }), open && (jsx("div", { className: clsx('absolute right-0 mt-2 w-40 rounded-md p-2 z-40 shadow-container bg-light-500 dark:text-light-500 dark:bg-dark-100 dark:border dark:border-dark-500 dark:shadow-dark-400'), role: "listbox", children: jsx("ul", { children: languageOptions.map((option) => (jsxs("li", { className: clsx('p-2 cursor-pointer rounded hover:bg-light-300 hover:font-bold dark:bg-dark-100 dark:text-light-500 dark:hover:bg-dark-400 mt-1', option.code === selected &&
                             'font-bold bg-light-300 dark:bg-dark-400'), role: "option", "aria-selected": option.code === selected, tabIndex: 0, onClick: () => {
                             onChange(option);
                             setOpen(false);
@@ -5461,5 +5503,5 @@ function TransferList({ allItems, associated, onChange, className, titleAvailabl
                                                         !recentlyAssociated.includes(item.key)) }), jsx("span", { className: clsx('font-roboto text-primary dark:text-light-500 break-words min-w-0', isDisabled && 'text-light-700 dark:text-dark-400'), style: { wordBreak: 'break-word', minWidth: 0 }, children: item.label })] }) }, item.key)))] })] })] }));
 }
 
-export { Accordion, BasicHeader, Breadcrumb, Button, CalendarInput, Card, CardButton, CardIconsButton, Charts, Checkbox, Divider, EmptyContent, ExpandablePanel, FileUpload, Header, IconButton, InfoCard, Input, InputSwitch, InputTextArea, InternalMenu, LanguageDropdown, Link, MegaMenu, Modal, ModalForm, MultiSelect, NotificationsSidebar, Paginator, RadioButton, RightSidebar, Select, SelectButton, Sidebar, Skeleton, Spinner, Table, Tabs, TagStatus, TextColor, Toast, Tooltip, TransferList };
+export { Accordion, BasicHeader, Breadcrumb, Button, CalendarInput, Card, CardButton, CardIconsButton, Charts, Checkbox, CountryDropdown, Divider, EmptyContent, ExpandablePanel, FileUpload, Header, IconButton, InfoCard, Input, InputSwitch, InputTextArea, InternalMenu, LanguageDropdown, Link, MegaMenu, Modal, ModalForm, MultiSelect, NotificationsSidebar, Paginator, RadioButton, RightSidebar, Select, SelectButton, Sidebar, Skeleton, Spinner, Table, Tabs, TagStatus, TextColor, Toast, Tooltip, TransferList };
 //# sourceMappingURL=index.js.map