karsten-design-system 1.2.33 → 1.2.34

package/dist/index.d.ts

@@ -19,6 +19,7 @@ export * from './stories/components/input';
 export * from './stories/components/inputSwitch';
 export * from './stories/components/inputTextArea';
 export * from './stories/components/internalMenu';
+export * from './stories/components/languageDropdown';
 export * from './stories/components/link';
 export * from './stories/components/megaMenu';
 export * from './stories/components/modal';

package/dist/index.js

@@ -693,6 +693,49 @@ function InternalMenu({ item, isFiltering }) {
         }) }));
 }
 
+const languageOptions = [
+    {
+        code: 'pt',
+        label: 'PT',
+        icon: (jsx("img", { src: "./src/assets/flags/br.svg", alt: "Brasil", className: "inline-block w-5 h-5 mr-1 rounded-full" })),
+    },
+    {
+        code: 'en',
+        label: 'EN',
+        icon: (jsx("img", { src: "./src/assets/flags/us.svg", alt: "Estados Unidos", className: "inline-block w-5 h-5 mr-1 rounded-full" })),
+    },
+    {
+        code: 'es',
+        label: 'ES',
+        icon: (jsx("img", { src: "./src/assets/flags/es.svg", alt: "Espanha", className: "inline-block w-5 h-5 mr-1 rounded-full" })),
+    },
+];
+
+function LanguageDropdown({ selected, onChange, }) {
+    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-2 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: [selected.icon ?? jsx("span", { className: "pi pi-globe text-lg" }), jsx("span", { className: "sr-only", children: selected.label })] }), open && (jsx("div", { className: clsx('absolute right-0 mt-2 w-40 rounded-md border border-light-700 bg-light-500 p-2 dark:bg-dark-100 shadow-md z-40'), 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.code &&
+                            'font-bold bg-light-300 dark:bg-dark-400'), role: "option", "aria-selected": option.code === selected.code, 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.code))) }) }))] }));
+}
+
 function Link({ href, children, className }) {
     return (jsx("a", { href: href, className: `text-primary hover:underline font-bold font-roboto dark:text-light-500 ${className}`, children: children }));
 }
@@ -4662,5 +4705,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, Header, IconButton, InfoCard, Input, InputSwitch, InputTextArea, InternalMenu, Link, MegaMenu, Modal, ModalForm, MultiSelect, NotificationsSidebar, Paginator, RadioButton, RightSidebar, Select, Sidebar, Skeleton, Spinner, Table, Tabs, TagStatus, Toast, Tooltip };
+export { Accordion, BasicHeader, Breadcrumb, Button, CalendarInput, Card, CardButton, CardIconsButton, Charts, Divider, EmptyContent, ExpandablePanel, FileUpload, Header, IconButton, InfoCard, Input, InputSwitch, InputTextArea, InternalMenu, LanguageDropdown, Link, MegaMenu, Modal, ModalForm, MultiSelect, NotificationsSidebar, Paginator, RadioButton, RightSidebar, Select, Sidebar, Skeleton, Spinner, Table, Tabs, TagStatus, Toast, Tooltip };
 //# sourceMappingURL=index.js.map