karsten-design-system 1.0.84 → 1.0.86
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/stories/components/header.js +1 -2
- package/dist/stories/components/header.js.map +1 -1
- package/dist/stories/components/internalMenu.js +4 -4
- package/dist/stories/components/internalMenu.js.map +1 -1
- package/dist/types/stories/components/ThemeContext.d.ts +10 -0
- package/dist/types/stories/components/ThemeToggleButton.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import { j as jsxRuntimeExports } from '../../_virtual/jsx-runtime.js';
|
|
2
2
|
import { useState } from 'react';
|
|
3
|
-
import MenuIcon from '../../assets/icons/menu.js';
|
|
4
3
|
import LogoSmall from '../../assets/logoSmall.js';
|
|
5
4
|
import { Sidebar } from './sidebar.js';
|
|
6
5
|
|
|
7
6
|
function Header({ sidebarItems, dashboardHref, username, userConfigItems, setOpenNotifications, }) {
|
|
8
7
|
const [openSidebar, setOpenSidebar] = useState(false);
|
|
9
8
|
const [openUserConfig, setOpenUserConfig] = useState(false);
|
|
10
|
-
return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.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: [jsxRuntimeExports.jsxs("div", { className: "flex flex-row items-center gap-4", children: [jsxRuntimeExports.jsx("button", { className: "bg-transparent border-none", onClick: () => setOpenSidebar(!openSidebar), children: jsxRuntimeExports.jsx(
|
|
9
|
+
return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.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: [jsxRuntimeExports.jsxs("div", { className: "flex flex-row items-center gap-4", children: [jsxRuntimeExports.jsx("button", { className: "bg-transparent border-none", onClick: () => setOpenSidebar(!openSidebar), children: jsxRuntimeExports.jsx("i", { className: "pi pi-bars text-[#878787] cursor-pointer hover:text-backgroundDark text-xl mt-1", onClick: () => setOpenNotifications(true) }) }), jsxRuntimeExports.jsx(LogoSmall, {})] }), jsxRuntimeExports.jsxs("div", { className: "relative flex flex-row gap-4 items-center", children: [jsxRuntimeExports.jsx("i", { className: "pi pi-bell text-[#878787] cursor-pointer hover:text-backgroundDark", onClick: () => setOpenNotifications(true) }), jsxRuntimeExports.jsxs("p", { className: "text-[#878787] font-roboto font-bold cursor-pointer hover:text-backgroundDark", onClick: () => setOpenUserConfig(!openUserConfig), children: ["Ol\u00E1, ", username] }), openUserConfig && (jsxRuntimeExports.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: jsxRuntimeExports.jsx("ul", { children: userConfigItems.map(({ id, title, onClick, path }) => (jsxRuntimeExports.jsx("li", { className: "p-2", children: jsxRuntimeExports.jsx("a", { onClick: () => {
|
|
11
10
|
if (onClick)
|
|
12
11
|
onClick();
|
|
13
12
|
setOpenUserConfig(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.js","sources":["../../../../src/stories/components/header.tsx"],"sourcesContent":[null],"names":["_jsxs","_Fragment","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"header.js","sources":["../../../../src/stories/components/header.tsx"],"sourcesContent":[null],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;AAcgB,SAAA,MAAM,CAAC,EACrB,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,eAAe,EACf,oBAAoB,GACP,EAAA;IACb,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IACrD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAE3D,IAAA,QACEA,sBAAA,CAAAC,0BAAA,EAAA,EAAA,QAAA,EAAA,CACED,sBAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uGAAuG,EACpH,QAAA,EAAA,CAAAA,sBAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAAA,CAC/CE,qBACE,CAAA,QAAA,EAAA,EAAA,SAAS,EAAC,4BAA4B,EACtC,OAAO,EAAE,MAAM,cAAc,CAAC,CAAC,WAAW,CAAC,EAAA,QAAA,EAE3CA,qBACA,CAAA,GAAA,EAAA,EAAA,SAAS,EAAC,iFAAiF,EAC3F,OAAO,EAAE,MAAM,oBAAoB,CAAC,IAAI,CAAC,EACzC,CAAA,EAAA,CACO,EAETA,qBAAA,CAAC,SAAS,EAAA,EAAA,CAAI,CACV,EAAA,CAAA,EAENF,sBAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,2CAA2C,EACxD,QAAA,EAAA,CAAAE,qBAAA,CAAA,GAAA,EAAA,EACE,SAAS,EAAC,oEAAoE,EAC9E,OAAO,EAAE,MAAM,oBAAoB,CAAC,IAAI,CAAC,EACzC,CAAA,EACFF,sBACE,CAAA,GAAA,EAAA,EAAA,SAAS,EAAC,+EAA+E,EACzF,OAAO,EAAE,MAAM,iBAAiB,CAAC,CAAC,cAAc,CAAC,EAAA,QAAA,EAAA,CAAA,YAAA,EAE3C,QAAQ,CAAA,EAAA,CACZ,EACH,cAAc,KACbE,qBACE,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAA,8GAAA,CAAgH,EAE3H,QAAA,EAAAA,qBAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EACG,eAAe,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAChDA,qBAAI,CAAA,IAAA,EAAA,EAAA,SAAS,EAAC,KAAK,EACjB,QAAA,EAAAA,qBAAA,CAAA,GAAA,EAAA,EACE,OAAO,EAAE,MAAK;AACZ,gDAAA,IAAI,OAAO;AAAE,oDAAA,OAAO,EAAE;gDACtB,iBAAiB,CAAC,KAAK,CAAC;AAC1B,6CAAC,EAED,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,qEAAqE,EAAA,QAAA,EAE9E,KAAK,EAAA,EAJD,EAAE,CAKL,EAAA,EAXmB,EAAE,CAYtB,CACN,CAAC,EACC,CAAA,EAAA,CACD,CACP,CAAA,EAAA,CACG,IACF,EACL,WAAW,KACVA,qBAAA,CAAC,OAAO,EACR,EAAA,aAAa,EAAE,aAAa,EAC1B,IAAI,EAAE,YAAY,EAClB,OAAO,EAAE,MAAK;oBACZ,cAAc,CAAC,KAAK,CAAC;AACvB,iBAAC,EACD,CAAA,CACH,CACA,EAAA,CAAA;AAEP;;;;"}
|
|
@@ -20,10 +20,10 @@ function InternalMenu({ item, isFiltering }) {
|
|
|
20
20
|
setOpenItems(initialOpen);
|
|
21
21
|
}
|
|
22
22
|
}, [isFiltering, item]);
|
|
23
|
-
return (jsxRuntimeExports.
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
23
|
+
return (jsxRuntimeExports.jsx("div", { className: "w-72 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) => {
|
|
24
|
+
const isOpen = openItems.includes(menuItem);
|
|
25
|
+
return (jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.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: [jsxRuntimeExports.jsxs("div", { className: "flex flex-row items-center gap-2", children: [jsxRuntimeExports.jsx(TextIcon, {}), jsxRuntimeExports.jsx("span", { className: "font-roboto text-base text-primary", children: menuItem.title })] }), menuItem.subItem && (jsxRuntimeExports.jsx("i", { className: `pi ${isOpen ? 'pi-angle-up' : 'pi-angle-down'} px-2 text-primary` }))] }), menuItem.subItem && isOpen && (jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: menuItem.subItem.map((subItem) => (jsxRuntimeExports.jsx(Link, { className: clsx('cursor-pointer text-base text-primary pl-6 py-1 hover:font-bold hover:text-primary', subItem.isActive ? 'text-primary font-bold' : ''), to: subItem.path, children: jsxRuntimeExports.jsx("span", { children: subItem.title }) }, subItem.id))) }))] }, menuItem.id));
|
|
26
|
+
}) }));
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
export { InternalMenu };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internalMenu.js","sources":["../../../../src/stories/components/internalMenu.tsx"],"sourcesContent":[null],"names":["
|
|
1
|
+
{"version":3,"file":"internalMenu.js","sources":["../../../../src/stories/components/internalMenu.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;;;SAWgB,YAAY,CAAC,EAAE,IAAI,EAAE,WAAW,EAAoB,EAAA;IAClE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAsB,EAAE,CAAC;AAEnE,IAAA,MAAM,UAAU,GAAG,CAAC,QAA2B,KAAI;QACjD,YAAY,CAAC,CAAC,IAAI,KAChB,IAAI,CAAC,QAAQ,CAAC,QAAQ;AACpB,cAAE,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,KAAK,QAAQ;cACvC,CAAC,GAAG,IAAI,EAAE,QAAQ,CAAC,CACxB;AACH,KAAC;IAED,SAAS,CAAC,MAAK;QACb,IAAI,WAAW,EAAE;YACf,YAAY,CAAC,IAAI,CAAC;;aACb;AACL,YAAA,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,QAAQ,CAAC;YAChE,YAAY,CAAC,WAAW,CAAC;;AAE7B,KAAC,EAAE,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;AAEvB,IAAA,QACEA,qBAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sOAAsO,EAAA,QAAA,EAOlP,IAAI,CAAC,GAAG,CAAC,CAAC,QAAQ,KAAI;YACrB,MAAM,MAAM,GAAG,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC;AAE3C,YAAA,QACEC,sBAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,CACEA,sBACE,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,6FAA6F,EACvG,OAAO,EAAE,MAAM,UAAU,CAAC,QAAQ,CAAC,EAAA,QAAA,EAAA,CAEnCA,sBAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,kCAAkC,EAC/C,QAAA,EAAA,CAAAD,qBAAA,CAAC,QAAQ,EAAA,EAAA,CAAG,EACZA,qBAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,oCAAoC,EACjD,QAAA,EAAA,QAAQ,CAAC,KAAK,EACV,CAAA,CAAA,EAAA,CACH,EACL,QAAQ,CAAC,OAAO,KACfA,qBACE,CAAA,GAAA,EAAA,EAAA,SAAS,EAAE,CAAA,GAAA,EAAM,MAAM,GAAG,aAAa,GAAG,eAAe,CAAoB,kBAAA,CAAA,EAAA,CAC7E,CACH,CAAA,EAAA,CACG,EAEL,QAAQ,CAAC,OAAO,IAAI,MAAM,KACzBA,qBAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,eAAe,EAAA,QAAA,EAC3B,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,OAAO,MAC5BA,qBAAA,CAAC,IAAI,EAAA,EAEH,SAAS,EAAE,IAAI,CACb,oFAAoF,EACpF,OAAO,CAAC,QAAQ,GAAG,wBAAwB,GAAG,EAAE,CACjD,EACD,EAAE,EAAE,OAAO,CAAC,IAAI,EAAA,QAAA,EAEhBA,qBAAO,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,OAAO,CAAC,KAAK,EAAA,CAAQ,EAPvB,EAAA,OAAO,CAAC,EAAE,CAQV,CACR,CAAC,EAAA,CACE,CACP,CAAA,EAAA,EAjCO,QAAQ,CAAC,EAAE,CAkCf;SAET,CAAC,EACE,CAAA;AAEV;;;;"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
type Theme = 'light' | 'dark';
|
|
2
|
+
interface ThemeContextType {
|
|
3
|
+
theme: Theme;
|
|
4
|
+
toggleTheme: () => void;
|
|
5
|
+
}
|
|
6
|
+
export declare const ThemeProvider: ({ children }: {
|
|
7
|
+
children: React.ReactNode;
|
|
8
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare const useTheme: () => ThemeContextType;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function ThemeToggleButton(): import("react/jsx-runtime").JSX.Element;
|