karsten-design-system 1.2.11 → 1.2.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +14 -16
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -216,7 +216,7 @@ function Input({ onChange, placeholder, disabled = false, error, icon, onClickIc
|
|
|
216
216
|
? 'text-redError'
|
|
217
217
|
: disabled
|
|
218
218
|
? 'text-stone'
|
|
219
|
-
: variants$4[iconColor]), onClick: onClickIcon }), jsx(InputText, { id: inputId, type: "text", placeholder: placeholder, className: clsx('focus:shadow-none text-base w-100 font-roboto border !p-2 rounded-md text-grayDark dark:bg-dark-100', hasError
|
|
219
|
+
: variants$4[iconColor]), onClick: onClickIcon }), jsx(InputText, { id: inputId, type: "text", placeholder: placeholder, className: clsx('focus:shadow-none text-base w-100 font-roboto border !p-2 rounded-md text-grayDark dark:bg-dark-100 dark:text-light-500', hasError
|
|
220
220
|
? 'border-redError placeholder:text-redError'
|
|
221
221
|
: 'border-gray focus:border-primary dark:focus:border-light-500', disabled && 'border-stoneDark text-disabled', error && 'border-redError text-redError', !error && 'border-gray placeholder:text-gray'), onChange: handleChange, disabled: disabled, invalid: hasError, ...props, value: inputValue })] }), jsx(FloatingLabel, { value: props?.value ? props?.value?.toString() : '', label: label || '', disabled: disabled, error: error }), hasError && jsx("span", { className: "text-redError text-xs px-2", children: error })] }));
|
|
222
222
|
}
|
|
@@ -365,7 +365,7 @@ function CalendarInput({ error, placeholder = 'Selecione uma data', label, disab
|
|
|
365
365
|
: 'border-gray focus:border-primary', disabled && 'border-stoneDark text-disabled', error && 'border-redError text-redError p-invalid', !error && 'border-gray p-custom'), dateFormat: "dd/mm/yy", inputStyle: {
|
|
366
366
|
border: `0.3px solid ${error && !props.value ? '#EC4A54' : '#A0A4B3'}`,
|
|
367
367
|
boxShadow: 'none',
|
|
368
|
-
color: hasError ? '#EC4A54' : '#646981',
|
|
368
|
+
color: hasError ? '#EC4A54' : isDarkMode ? '#FFFFFF' : '#646981',
|
|
369
369
|
borderRadius: '6px',
|
|
370
370
|
fontSize: '16px',
|
|
371
371
|
height: '42px',
|
|
@@ -624,15 +624,15 @@ function Tooltip({ text, children }) {
|
|
|
624
624
|
}
|
|
625
625
|
|
|
626
626
|
function Sidebar({ item, onClose, topItem }) {
|
|
627
|
-
return (jsxs("div", { className: "relative w-100", children: [jsx("div", { className: "fixed bottom-0 w-100 h-[calc(100vh_-_64px)] bg-backgroundDark/20 z-50", onClick: onClose }), jsxs("div", { className: "fixed h-[calc(100vh_-_64px)] bottom-0 w-72 bg-background z-50", children: [jsx("div", { className: "cursor-pointer flex flex-row gap-3 items-center border-b pl-6 px-2 py-2 border-b-stone hover:bg-stoneBackground hover:font-bold", children: jsx(Link$1, { to: "/", className: "font-roboto text-base text-backgroundDark hover:font-bold", onClick: onClose, "aria-label": "Ir para o inicio", children: "In\u00EDcio" }, "home-id") }, 'home-div'), topItem &&
|
|
628
|
-
topItem.map((item) => (jsxs("div", { className: "cursor-pointer flex flex-row gap-3 items-center border-b pl-6 px-2 py-2 border-b-stone hover:bg-stoneBackground hover:font-bold", children: [item?.isWindowOpen && (jsx("button", { className: "font-roboto text-base text-backgroundDark hover:font-bold", onClick: () => {
|
|
627
|
+
return (jsxs("div", { className: "relative w-100", children: [jsx("div", { className: "fixed bottom-0 w-100 h-[calc(100vh_-_64px)] bg-backgroundDark/20 z-50", onClick: onClose }), jsxs("div", { className: "fixed h-[calc(100vh_-_64px)] bottom-0 w-72 bg-background dark:bg-dark-100 z-50", children: [jsx("div", { className: "cursor-pointer flex flex-row gap-3 items-center border-b pl-6 px-2 py-2 border-b-stone hover:bg-stoneBackground hover:font-bold dark:bg-dark-100 dark:hover:bg-dark-400", children: jsx(Link$1, { to: "/", className: "font-roboto text-base text-backgroundDark hover:font-bold dark:text-light-500 dark:hover:bg-dark-400", onClick: onClose, "aria-label": "Ir para o inicio", children: "In\u00EDcio" }, "home-id") }, 'home-div'), topItem &&
|
|
628
|
+
topItem.map((item) => (jsxs("div", { className: "cursor-pointer flex flex-row gap-3 items-center border-b pl-6 px-2 py-2 border-b-stone hover:bg-stoneBackground hover:font-bold dark:bg-dark-100 dark:text-light-500 dark:hover:bg-dark-400", children: [item?.isWindowOpen && (jsx("button", { className: "font-roboto text-base text-backgroundDark hover:font-bold dark:text-light-500 dark:hover:bg-dark-400", onClick: () => {
|
|
629
629
|
if (onClose)
|
|
630
630
|
onClose();
|
|
631
631
|
if (typeof window !== 'undefined') {
|
|
632
632
|
window.open(item?.path, '_blank');
|
|
633
633
|
}
|
|
634
|
-
}, "aria-label": `Ir para ${item?.title}`, children: jsx(Tooltip, { text: item?.tooltipText, children: item?.title }) }, item?.id || item.title)), !item?.isWindowOpen && (jsx(Link$1, { to: item?.path || '', className: "font-roboto text-base text-backgroundDark hover:font-bold", onClick: onClose, "aria-label": `Ir para ${item?.title}`, children: jsx(Tooltip, { text: item?.tooltipText, children: item?.title }) }, item?.id || 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
|
|
635
|
-
item.map((item) => (jsx(Link$1, { className: "flex flex-row items-center pl-6 gap-2 border-b border-b-stone hover:bg-stoneBackground hover:font-bold", to: item.path || '', onClick: onClose, "aria-label": `Ir para ${item.title}`, children: jsx("span", { className: "font-roboto text-base py-2 text-backgroundDark hover:font-bold", children: jsx(Tooltip, { text: item?.tooltipText, children: item.title }) }) }, item.id))) })] }, 'sidebar-div')] }));
|
|
634
|
+
}, "aria-label": `Ir para ${item?.title}`, children: jsx(Tooltip, { text: item?.tooltipText, children: item?.title }) }, item?.id || item.title)), !item?.isWindowOpen && (jsx(Link$1, { to: item?.path || '', className: "font-roboto text-base text-backgroundDark 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 }) }, item?.id || 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-backgroundDark !font-bold text-lg dark:text-light-500" }), jsx("p", { className: "text-backgroundDark font-bold text-lg dark:text-light-500", children: "Favoritos" })] }), jsx("div", { className: "overflow-y-auto overflow-x-hidden [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:rounded-r-md [&::-webkit-scrollbar-thumb]:rounded-md [&::-webkit-scrollbar-track]:bg-stone [&::-webkit-scrollbar-thumb]:bg-stoneDark dark:bg-dark-100", children: item &&
|
|
635
|
+
item.map((item) => (jsx(Link$1, { className: "flex flex-row items-center pl-6 gap-2 border-b border-b-stone hover:bg-stoneBackground 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-backgroundDark hover:font-bold dark:text-light-500 dark:hover:bg-dark-400", children: jsx(Tooltip, { text: item?.tooltipText, children: item.title }) }) }, item.id))) })] }, 'sidebar-div')] }));
|
|
636
636
|
}
|
|
637
637
|
|
|
638
638
|
function Header({ sidebarItems, sidebarTopItems, username, userConfigItems, setOpenNotifications, isRenderNotifications = false, rightActions, }) {
|
|
@@ -656,11 +656,11 @@ function Header({ sidebarItems, sidebarTopItems, username, userConfigItems, setO
|
|
|
656
656
|
document.removeEventListener('mousedown', handleClickOutside);
|
|
657
657
|
};
|
|
658
658
|
}, [openUserConfig]);
|
|
659
|
-
return (jsxs(Fragment, { children: [jsxs("div", { className: "w-100 min-h-16 border-b border-b-stone flex flex-row justify-between items-center px-8 shadow-header", children: [jsxs("div", { className: "flex flex-row items-center gap-4", children: [jsx("button", { 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-[#878787] cursor-pointer hover:text-backgroundDark text-xl mt-1 }` }) }), jsx(LogoSmall, {})] }), jsxs("div", { className: "relative flex flex-row gap-4 items-center", children: [isRenderNotifications && (jsx("button", { className: "bg-transparent border-none", onClick: () => setOpenNotifications(true), "aria-label": "Abrir notifica\u00E7\u00E3o", children: jsx("i", { className: "pi pi-bell text-[#878787] cursor-pointer hover:text-backgroundDark" }) })), 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-[#878787] hover:text-backgroundDark font-roboto font-bold cursor-pointer transition-colors duration-200", children: ["Ol\u00E1, ", username] }) }), openUserConfig && (jsx("div", { className: `absolute w-100 bg-background shadow-md border border-stoneLight z-20 rounded-md p-2 -bottom-1 translate-y-full`, children: jsx("ul", { children: userConfigItems.map(({ id, title, onClick, path }) => (jsx("li", { className: "p-2 hover:bg-stoneBackground", children: jsx("a", { onClick: () => {
|
|
659
|
+
return (jsxs(Fragment, { children: [jsxs("div", { className: "w-100 min-h-16 border-b border-b-stone flex flex-row justify-between items-center px-8 shadow-header", children: [jsxs("div", { className: "flex flex-row items-center gap-4", children: [jsx("button", { 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-[#878787] cursor-pointer hover:text-backgroundDark text-xl mt-1 }` }) }), jsx(LogoSmall, {})] }), jsxs("div", { className: "relative flex flex-row gap-4 items-center", children: [isRenderNotifications && (jsx("button", { className: "bg-transparent border-none", onClick: () => setOpenNotifications(true), "aria-label": "Abrir notifica\u00E7\u00E3o", children: jsx("i", { className: "pi pi-bell text-[#878787] cursor-pointer hover:text-backgroundDark" }) })), 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-[#878787] hover:text-backgroundDark font-roboto font-bold cursor-pointer transition-colors duration-200", children: ["Ol\u00E1, ", username] }) }), openUserConfig && (jsx("div", { className: `absolute w-100 bg-background shadow-md border border-stoneLight z-20 rounded-md p-2 -bottom-1 translate-y-full dark:bg-dark-100`, children: jsx("ul", { children: userConfigItems.map(({ id, title, onClick, path }) => (jsx("li", { className: "p-2 hover:bg-stoneBackground dark:bg-dark-100 dark:text-light-500 dark:hover:bg-dark-400", children: jsx("a", { onClick: () => {
|
|
660
660
|
if (onClick)
|
|
661
661
|
onClick();
|
|
662
662
|
setOpenUserConfig(false);
|
|
663
|
-
}, href: path, className: "block w-full font-base font-roboto text-backgroundDark cursor-pointer hover:font-bold", "aria-label": "Op\u00E7\u00F5es de configura\u00E7\u00F5es do usu\u00E1rio", children: title }) }, id))) }) }))] }), rightActions && rightActions] })] }), openSidebar && (jsx(Sidebar, { topItem: sidebarTopItems, item: sidebarItems, onClose: () => {
|
|
663
|
+
}, href: path, className: "block w-full font-base font-roboto text-backgroundDark cursor-pointer hover:font-bold dark:text-light-500", "aria-label": "Op\u00E7\u00F5es de configura\u00E7\u00F5es do usu\u00E1rio", children: title }) }, id))) }) }))] }), rightActions && rightActions] })] }), openSidebar && (jsx(Sidebar, { topItem: sidebarTopItems, item: sidebarItems, onClose: () => {
|
|
664
664
|
setOpenSidebar(false);
|
|
665
665
|
} }))] }));
|
|
666
666
|
}
|
|
@@ -691,7 +691,7 @@ function InputTextArea({ onChange, placeholder, disabled = false, error, label,
|
|
|
691
691
|
};
|
|
692
692
|
const hasError = (props.value && error && !disabled) ||
|
|
693
693
|
(!!error && !disabled && props.value?.length === 0);
|
|
694
|
-
return (jsxs("div", { className: "relative flex flex-col w-full", children: [jsx(InputTextarea, { id: inputTextAreaId, rows: rows, placeholder: placeholder, onChange: handleChange, disabled: disabled, invalid: hasError, className: clsx('w-100 font-roboto border !p-2 rounded-md focus:shadow-none text-grayDark dark:bg-dark-100', hasError
|
|
694
|
+
return (jsxs("div", { className: "relative flex flex-col w-full", children: [jsx(InputTextarea, { id: inputTextAreaId, rows: rows, placeholder: placeholder, onChange: handleChange, disabled: disabled, invalid: hasError, className: clsx('w-100 font-roboto border !p-2 rounded-md focus:shadow-none text-grayDark dark:bg-dark-100 dark:text-light-500', hasError
|
|
695
695
|
? 'border-redError placeholder:text-redError'
|
|
696
696
|
: 'border-gray focus:border-primary dark:focus:border-light-500', disabled && 'border-stoneDark text-disabled', error && 'border-redError text-redError', !error && 'border-gray placeholder:text-gray'), ...props }), jsx(FloatingLabel, { value: props?.value ? props.value.toString() : '', label: label || '', disabled: disabled, error: error }), hasError && jsx("span", { className: "text-redError text-xs px-2", children: error })] }));
|
|
697
697
|
}
|
|
@@ -716,11 +716,9 @@ function InternalMenu({ item, isFiltering }) {
|
|
|
716
716
|
setOpenItems(initialOpen);
|
|
717
717
|
}
|
|
718
718
|
}, [isFiltering, item]);
|
|
719
|
-
// w-72 overflow-x-hidden overflow-y-auto (ORIGINAL)
|
|
720
|
-
// w-72 max-h-full overflow-x-hidden overflow-y-auto (TESTE)
|
|
721
719
|
return (jsx("div", { className: "w-72 max-h-full overflow-x-hidden overflow-y-auto [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:rounded-r-md [&::-webkit-scrollbar-thumb]:rounded-md [&::-webkit-scrollbar-track]:bg-stone [&::-webkit-scrollbar-thumb]:bg-stoneDark ", children: item.map((menuItem) => {
|
|
722
720
|
const isOpen = openItems.includes(menuItem);
|
|
723
|
-
return (jsxs("div", { children: [jsxs("div", { className: "cursor-pointer flex flex-row justify-between items-center border-b px-2 py-1 border-b-stone", onClick: () => toggleMenu(menuItem), children: [jsxs("div", { className: "flex flex-row items-center gap-2", children: [jsx(TextIcon, {}), jsx("span", { className: "font-roboto text-base text-primary", children: menuItem.title })] }), menuItem.subItem && (jsx("i", { className: `pi ${isOpen ? 'pi-angle-up' : 'pi-angle-down'} px-2 text-primary` }))] }), menuItem.subItem && isOpen && (jsx("div", { className: "flex flex-col", children: menuItem.subItem.map((subItem) => (jsx(Link$1, { className: clsx('cursor-pointer text-base text-primary pl-6 py-1 hover:font-bold hover:text-primary hover:bg-stoneBackground', subItem.isActive ? 'text-primary font-bold' : ''), to: subItem.path, children: jsx(Tooltip, { text: subItem?.tooltipText, children: jsx("span", { children: subItem.title }) }) }, subItem.id))) }))] }, menuItem.id));
|
|
721
|
+
return (jsxs("div", { children: [jsxs("div", { className: "cursor-pointer flex flex-row justify-between items-center border-b px-2 py-1 border-b-stone", onClick: () => toggleMenu(menuItem), children: [jsxs("div", { className: "flex flex-row items-center gap-2", children: [jsx(TextIcon, {}), jsx("span", { className: "font-roboto text-base text-primary dark:text-light-500", children: menuItem.title })] }), menuItem.subItem && (jsx("i", { className: `pi ${isOpen ? 'pi-angle-up' : 'pi-angle-down'} px-2 text-primary dark:text-light-500` }))] }), menuItem.subItem && isOpen && (jsx("div", { className: "flex flex-col", children: menuItem.subItem.map((subItem) => (jsx(Link$1, { className: clsx('cursor-pointer text-base text-primary pl-6 py-1 hover:font-bold hover:text-primary hover:bg-stoneBackground dark:text-light-500 dark:hover:bg-dark-400', subItem.isActive ? 'text-primary font-bold' : ''), to: subItem.path, children: jsx(Tooltip, { text: subItem?.tooltipText, children: jsx("span", { children: subItem.title }) }) }, subItem.id))) }))] }, menuItem.id));
|
|
724
722
|
}) }));
|
|
725
723
|
}
|
|
726
724
|
|
|
@@ -908,9 +906,9 @@ function MultiSelect(props) {
|
|
|
908
906
|
setSearchText('');
|
|
909
907
|
setHighlightedIndex(-1);
|
|
910
908
|
}
|
|
911
|
-
}, onClick: toggleDropdown, className: clsx('focus:shadow-none text-base w-100 font-roboto border !p-2 rounded-md text-grayDark dark:bg-dark-100', hasError
|
|
909
|
+
}, onClick: toggleDropdown, className: clsx('focus:shadow-none text-base w-100 font-roboto border !p-2 rounded-md text-grayDark dark:bg-dark-100 dark:text-light-500', hasError
|
|
912
910
|
? 'border-redError placeholder:text-redError'
|
|
913
|
-
: 'border-gray focus:border-primary', isInputDisabled && 'border-stoneDark text-disabled', error && 'border-redError text-redError', !error && 'border-gray placeholder:text-gray', isLoading && 'text-gray', 'truncate'), invalid: hasError, readOnly: !isOpen || isReadOnly, style: { height: '42px', fontSize: '16px' }, disabled: isInputDisabled, "aria-label": ariaLabel }), jsx(InputIcon, { className: clsx(isLoading
|
|
911
|
+
: 'border-gray focus:border-primary dark:focus:border-light-500', isInputDisabled && 'border-stoneDark text-disabled', error && 'border-redError text-redError', !error && 'border-gray placeholder:text-gray', isLoading && 'text-gray', 'truncate'), invalid: hasError, readOnly: !isOpen || isReadOnly, style: { height: '42px', fontSize: '16px' }, disabled: isInputDisabled, "aria-label": ariaLabel }), jsx(InputIcon, { className: clsx(isLoading
|
|
914
912
|
? 'pi pi-spinner pi-spin'
|
|
915
913
|
: isOpen
|
|
916
914
|
? 'pi pi-angle-up'
|
|
@@ -4366,9 +4364,9 @@ function Select(props) {
|
|
|
4366
4364
|
e.preventDefault();
|
|
4367
4365
|
handleClose();
|
|
4368
4366
|
}
|
|
4369
|
-
}, className: clsx('focus:shadow-none text-base w-100 font-roboto border !p-2 rounded-md text-grayDark dark:bg-dark-100', hasError
|
|
4367
|
+
}, className: clsx('focus:shadow-none text-base w-100 font-roboto border !p-2 rounded-md text-grayDark dark:bg-dark-100 dark:text-light-500', hasError
|
|
4370
4368
|
? 'border-redError placeholder:text-redError'
|
|
4371
|
-
: 'border-gray focus:border-primary', isInputDisabled && 'border-stoneDark text-disabled', error && 'border-redError text-redError', !error && 'border-gray placeholder:text-gray', isLoading && 'text-gray', 'truncate'), invalid: hasError, readOnly: !isOpen || isReadOnly, style: { height: '42px', fontSize: '16px' }, disabled: isInputDisabled, "aria-label": ariaLabel }), jsx(InputIcon, { className: clsx(isLoading
|
|
4369
|
+
: 'border-gray focus:border-primary dark:focus:border-light-500', isInputDisabled && 'border-stoneDark text-disabled', error && 'border-redError text-redError', !error && 'border-gray placeholder:text-gray', isLoading && 'text-gray', 'truncate'), invalid: hasError, readOnly: !isOpen || isReadOnly, style: { height: '42px', fontSize: '16px' }, disabled: isInputDisabled, "aria-label": ariaLabel }), jsx(InputIcon, { className: clsx(isLoading
|
|
4372
4370
|
? 'pi pi-spinner pi-spin'
|
|
4373
4371
|
: isOpen
|
|
4374
4372
|
? 'pi pi-angle-up'
|