@ttn-shared/ui 1.2.6 → 1.2.8

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.
Files changed (6) hide show
  1. package/dist/index.cjs +117 -101
  2. package/dist/index.d.cts +2 -4
  3. package/dist/index.d.ts +2 -4
  4. package/dist/index.js +117 -101
  5. package/package.json +5 -4
  6. package/styles.css +56 -0
package/dist/index.cjs CHANGED
@@ -2393,18 +2393,23 @@ var createPatientForm = (info) => {
2393
2393
  };
2394
2394
 
2395
2395
  // src/components/header/Header.tsx
2396
+ var import_react8 = require("react");
2396
2397
  var MC3 = __toESM(require("@mantine/core"), 1);
2397
2398
  var TI4 = __toESM(require("@tabler/icons-react"), 1);
2398
- var import_react8 = require("react");
2399
2399
 
2400
2400
  // src/components/header/HelpModal.tsx
2401
2401
  var MC = __toESM(require("@mantine/core"), 1);
2402
2402
  var TI2 = __toESM(require("@tabler/icons-react"), 1);
2403
+
2404
+ // src/assets/logo-ttn.png
2405
+ var logo_ttn_default = "data:image/png;base64,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";
2406
+
2407
+ // src/components/header/HelpModal.tsx
2403
2408
  var import_jsx_runtime10 = require("react/jsx-runtime");
2404
- var HelpModal = ({ opened, onClose, enterpriseLogo }) => {
2409
+ var HelpModal = ({ opened, onClose }) => {
2405
2410
  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(MC.Modal, { title: "Ayuda", opened, onClose, "data-testid": "header-help-modal", children: [
2406
2411
  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(MC.Stack, { mb: "lg", align: "center", children: [
2407
- enterpriseLogo,
2412
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MC.Image, { src: logo_ttn_default, alt: "Enterprise Logo", draggable: false, w: 126 }),
2408
2413
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MC.Text, { fz: "lg", fw: "bold", children: "Informaci\xF3n de contacto" }),
2409
2414
  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(MC.Stack, { children: [
2410
2415
  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(MC.Group, { children: [
@@ -2493,7 +2498,6 @@ var import_jsx_runtime12 = require("react/jsx-runtime");
2493
2498
  var Header = ({
2494
2499
  moduleName,
2495
2500
  logo,
2496
- enterpriseLogo,
2497
2501
  accounts,
2498
2502
  currentSite,
2499
2503
  onBackHome,
@@ -2516,82 +2520,93 @@ var Header = ({
2516
2520
  return { currentAccount: currentAccount2, currentProfile: currentProfile2 };
2517
2521
  }, [accounts, userInfo]);
2518
2522
  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
2519
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(MC3.Flex, { w: "100%", px: 16, py: 6, justify: "space-between", align: "center", children: [
2520
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(MC3.Group, { children: [
2521
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MC3.UnstyledButton, { onClick: onBackHome, "data-testid": "header-logo-button", children: logo }),
2522
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(MC3.Title, { order: 3, c: "gray.4", fw: "inherit", children: [
2523
- "\u2022 ",
2524
- moduleName
2525
- ] })
2526
- ] }),
2527
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(MC3.Flex, { gap: "sm", children: [
2528
- Boolean(currentSite) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(MC3.Flex, { align: "center", children: [
2529
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MC3.ThemeIcon, { variant: "transparent", c: "dimmed", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TI4.IconMapPinFilled, { style: { width: 24, height: 24 } }) }),
2530
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MC3.Text, { c: "gray.6", fz: "sm", children: currentSite?.name })
2531
- ] }),
2532
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(MC3.Menu, { width: 216, position: "bottom-end", children: [
2533
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MC3.Menu.Target, { "data-testid": "header-account-menu-button", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
2534
- MC3.Box,
2535
- {
2536
- w: 216,
2537
- style: (theme) => ({
2538
- display: "flex",
2539
- alignItems: "center",
2540
- border: `1px solid ${theme.colors.gray[3]}`,
2541
- borderRadius: theme.radius.sm,
2542
- padding: "4px 8px",
2543
- cursor: "pointer"
2544
- }),
2545
- children: [
2546
- Boolean(currentAccount) && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MC3.ThemeIcon, { variant: "transparent", c: "primary-color", size: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TI4.IconBuilding, { style: { width: 24, height: 24 } }) }),
2547
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MC3.Text, { ml: 6, flex: 1, children: currentAccount?.name }),
2548
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MC3.Avatar, { src: userInfo?.imageUrl })
2549
- ]
2550
- }
2551
- ) }),
2552
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(MC3.Menu.Dropdown, { children: [
2553
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(MC3.Stack, { px: "md", py: "sm", gap: "xs", align: "center", children: [
2554
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MC3.Avatar, { src: userInfo?.imageUrl, size: "lg" }),
2555
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MC3.Text, { fw: "bold", children: userInfo?.name }),
2556
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(MC3.Text, { fw: "bold", ta: "center", c: "gray.4", children: [
2557
- currentAccount?.name,
2558
- " - ",
2559
- currentProfile?.name
2560
- ] })
2523
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
2524
+ MC3.Flex,
2525
+ {
2526
+ w: "100%",
2527
+ px: 16,
2528
+ py: 8,
2529
+ justify: "space-between",
2530
+ align: "center",
2531
+ style: { borderBottom: "5px solid var(--mantine-primary-color-9)" },
2532
+ children: [
2533
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(MC3.Group, { children: [
2534
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MC3.UnstyledButton, { onClick: onBackHome, "data-testid": "header-logo-button", children: logo }),
2535
+ moduleName && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(MC3.Title, { order: 3, c: "gray.4", fw: "inherit", children: [
2536
+ "\u2022 ",
2537
+ moduleName
2538
+ ] })
2539
+ ] }),
2540
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(MC3.Flex, { gap: "sm", children: [
2541
+ Boolean(currentSite) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(MC3.Flex, { align: "center", children: [
2542
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MC3.ThemeIcon, { variant: "transparent", c: "dimmed", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TI4.IconMapPinFilled, { style: { width: 24, height: 24 } }) }),
2543
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MC3.Text, { c: "gray.6", fz: "sm", children: currentSite?.name })
2561
2544
  ] }),
2562
- Boolean(currentAccount) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
2563
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
2564
- MC3.Menu.Item,
2565
- {
2566
- onClick: () => setChangeAccountModalOpened(true),
2567
- "data-testid": "header-change-account-menu-item",
2568
- children: "Cambiar rol y cuenta"
2569
- }
2570
- ),
2571
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
2572
- MC3.Menu.Item,
2545
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(MC3.Menu, { width: 216, position: "bottom-end", children: [
2546
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MC3.Menu.Target, { "data-testid": "header-account-menu-button", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
2547
+ MC3.Box,
2573
2548
  {
2574
- onClick: onClickMyPayroll,
2575
- "data-testid": "header-my-payroll-menu-item",
2576
- children: "Mi n\xF3mina"
2549
+ w: 216,
2550
+ style: (theme) => ({
2551
+ display: "flex",
2552
+ alignItems: "center",
2553
+ border: `1px solid ${theme.colors.gray[3]}`,
2554
+ borderRadius: theme.radius.sm,
2555
+ padding: "4px 8px",
2556
+ cursor: "pointer"
2557
+ }),
2558
+ children: [
2559
+ Boolean(currentAccount) && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MC3.ThemeIcon, { variant: "transparent", c: "primary-color", size: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TI4.IconBuilding, { style: { width: 24, height: 24 } }) }),
2560
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MC3.Text, { ml: 6, flex: 1, children: currentAccount?.name }),
2561
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MC3.Avatar, { src: userInfo?.imageUrl })
2562
+ ]
2577
2563
  }
2578
- ),
2579
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MC3.Menu.Item, { onClick: onClickSettings, "data-testid": "header-settings-menu-item", children: "Configuraci\xF3n" })
2580
- ] }),
2581
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
2582
- MC3.Menu.Item,
2583
- {
2584
- onClick: () => setHelpModalOpened(true),
2585
- "data-testid": "header-help-menu-item",
2586
- children: "Ayuda"
2587
- }
2588
- ),
2589
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MC3.Menu.Divider, {}),
2590
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MC3.Menu.Item, { onClick: onLogout, "data-testid": "header-logout-menu-item", children: "Cerrar sesi\xF3n" })
2564
+ ) }),
2565
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(MC3.Menu.Dropdown, { children: [
2566
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(MC3.Stack, { px: "md", py: "sm", gap: "xs", align: "center", children: [
2567
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MC3.Avatar, { src: userInfo?.imageUrl, size: "lg" }),
2568
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MC3.Text, { fw: "bold", children: userInfo?.name }),
2569
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(MC3.Text, { fw: "bold", ta: "center", c: "gray.4", children: [
2570
+ currentAccount?.name,
2571
+ " - ",
2572
+ currentProfile?.name
2573
+ ] })
2574
+ ] }),
2575
+ Boolean(currentAccount) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
2576
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
2577
+ MC3.Menu.Item,
2578
+ {
2579
+ onClick: () => setChangeAccountModalOpened(true),
2580
+ "data-testid": "header-change-account-menu-item",
2581
+ children: "Cambiar rol y cuenta"
2582
+ }
2583
+ ),
2584
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
2585
+ MC3.Menu.Item,
2586
+ {
2587
+ onClick: onClickMyPayroll,
2588
+ "data-testid": "header-my-payroll-menu-item",
2589
+ children: "Mi n\xF3mina"
2590
+ }
2591
+ ),
2592
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MC3.Menu.Item, { onClick: onClickSettings, "data-testid": "header-settings-menu-item", children: "Configuraci\xF3n" })
2593
+ ] }),
2594
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
2595
+ MC3.Menu.Item,
2596
+ {
2597
+ onClick: () => setHelpModalOpened(true),
2598
+ "data-testid": "header-help-menu-item",
2599
+ children: "Ayuda"
2600
+ }
2601
+ ),
2602
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MC3.Menu.Divider, {}),
2603
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MC3.Menu.Item, { onClick: onLogout, "data-testid": "header-logout-menu-item", children: "Cerrar sesi\xF3n" })
2604
+ ] })
2605
+ ] })
2591
2606
  ] })
2592
- ] })
2593
- ] })
2594
- ] }),
2607
+ ]
2608
+ }
2609
+ ),
2595
2610
  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
2596
2611
  ChangeAccountModal,
2597
2612
  {
@@ -2601,24 +2616,18 @@ var Header = ({
2601
2616
  onChangeAccount
2602
2617
  }
2603
2618
  ),
2604
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
2605
- HelpModal,
2606
- {
2607
- opened: helpModalOpened,
2608
- onClose: () => setHelpModalOpened(false),
2609
- enterpriseLogo
2610
- }
2611
- )
2619
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(HelpModal, { opened: helpModalOpened, onClose: () => setHelpModalOpened(false) })
2612
2620
  ] });
2613
2621
  };
2614
2622
 
2615
2623
  // src/components/sidebar/Sidebar.tsx
2616
2624
  var import_react9 = require("react");
2617
2625
  var MC5 = __toESM(require("@mantine/core"), 1);
2618
- var TI5 = __toESM(require("@tabler/icons-react"), 1);
2626
+ var TI6 = __toESM(require("@tabler/icons-react"), 1);
2619
2627
 
2620
2628
  // src/components/sidebar/SidebarMenu.tsx
2621
2629
  var MC4 = __toESM(require("@mantine/core"), 1);
2630
+ var TI5 = __toESM(require("@tabler/icons-react"), 1);
2622
2631
  var import_jsx_runtime13 = require("react/jsx-runtime");
2623
2632
  var import_react_router_dom = require("react-router-dom");
2624
2633
  var import_jsx_runtime14 = require("react/jsx-runtime");
@@ -2633,22 +2642,25 @@ var SidebarMenu = ({
2633
2642
  onClickExternalScreen
2634
2643
  }) => {
2635
2644
  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
2636
- /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
2645
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
2637
2646
  MC4.UnstyledButton,
2638
2647
  {
2639
2648
  onClick: () => onClickMenu(id),
2640
2649
  className: "ttn-sidebar-menu",
2641
2650
  "data-testid": `sidebar-menu-${label}`,
2642
- children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(MC4.Flex, { align: "center", children: [
2643
- /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MC4.Center, { w: 40, h: 40, me: 10, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
2644
- MC4.Box,
2645
- {
2646
- className: "ttn-sidebar-menu-icon",
2647
- style: { maskImage: `url(${icon})`, WebkitMaskImage: `url(${icon})` }
2648
- }
2649
- ) }),
2650
- /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MC4.Text, { size: "sm", c: "gray.7", lineClamp: 1, children: label })
2651
- ] })
2651
+ children: [
2652
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(MC4.Flex, { align: "center", flex: 1, children: [
2653
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MC4.Center, { miw: 40, mih: 40, me: 10, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
2654
+ MC4.Box,
2655
+ {
2656
+ className: "ttn-sidebar-menu-icon",
2657
+ style: { maskImage: `url(${icon})`, WebkitMaskImage: `url(${icon})` }
2658
+ }
2659
+ ) }),
2660
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MC4.Text, { size: "sm", c: "gray.7", lineClamp: 1, children: label })
2661
+ ] }),
2662
+ active ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TI5.IconChevronDown, { style: { width: 20, height: 20 } }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TI5.IconChevronRight, { style: { width: 20, height: 20 } })
2663
+ ]
2652
2664
  }
2653
2665
  ),
2654
2666
  Boolean(screens?.length) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MC4.Collapse, { in: active ?? false, children: screens?.map((screen) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime13.Fragment, { children: [
@@ -2692,24 +2704,27 @@ var Sidebar = ({ modules, onClickExternalScreen }) => {
2692
2704
  MC5.ActionIcon,
2693
2705
  {
2694
2706
  variant: "white",
2695
- c: "gray.6",
2707
+ size: "md",
2708
+ mt: 15,
2709
+ c: "gray.4",
2696
2710
  onClick: handleCloseSidebar,
2697
2711
  style: { alignSelf: "flex-end" },
2698
2712
  "data-testid": "sidebar-close-button",
2699
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TI5.IconX, { style: { width: 20, height: 20 } })
2713
+ children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TI6.IconX, { style: { width: 20, height: 20, strokeWidth: 3 } })
2700
2714
  }
2701
2715
  ),
2702
2716
  !opened && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MC5.Center, { w: 80, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
2703
2717
  MC5.ActionIcon,
2704
2718
  {
2719
+ variant: "outline",
2720
+ my: "xs",
2705
2721
  w: 32,
2706
2722
  h: 32,
2707
- variant: "outline",
2708
2723
  radius: "xs",
2709
2724
  onClick: () => setOpened(true),
2710
2725
  style: { alignSelf: "flex-end", borderWidth: 2 },
2711
2726
  "data-testid": "sidebar-open-button",
2712
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TI5.IconMenu2, { style: { width: 20, height: 20, strokeWidth: 2 } })
2727
+ children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TI6.IconMenu2, { style: { width: 20, height: 20, strokeWidth: 3 } })
2713
2728
  }
2714
2729
  ) })
2715
2730
  ] }),
@@ -2726,7 +2741,8 @@ var Sidebar = ({ modules, onClickExternalScreen }) => {
2726
2741
  onClickExternalScreen: handleClickExternalScreen
2727
2742
  },
2728
2743
  module2.id
2729
- ))
2744
+ )),
2745
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MC5.Box, { mih: 82 })
2730
2746
  ] });
2731
2747
  };
2732
2748
  // Annotate the CommonJS export names for ESM import in node:
package/dist/index.d.cts CHANGED
@@ -250,7 +250,6 @@ interface UserAccount {
250
250
  interface HeaderProps {
251
251
  moduleName: string;
252
252
  logo?: ReactNode;
253
- enterpriseLogo?: ReactNode;
254
253
  accounts: UserAccount[];
255
254
  currentSite?: {
256
255
  id: string;
@@ -262,7 +261,7 @@ interface HeaderProps {
262
261
  onClickSettings: () => void;
263
262
  onLogout: () => void;
264
263
  }
265
- declare const Header: ({ moduleName, logo, enterpriseLogo, accounts, currentSite, onBackHome, onChangeAccount, onClickMyPayroll, onClickSettings, onLogout, }: HeaderProps) => react_jsx_runtime.JSX.Element;
264
+ declare const Header: ({ moduleName, logo, accounts, currentSite, onBackHome, onChangeAccount, onClickMyPayroll, onClickSettings, onLogout, }: HeaderProps) => react_jsx_runtime.JSX.Element;
266
265
 
267
266
  interface ChangeAccountModalProps {
268
267
  opened: boolean;
@@ -275,9 +274,8 @@ declare const ChangeAccountModal: ({ opened, onClose, accounts, onChangeAccount,
275
274
  interface HelpModalProps {
276
275
  opened: boolean;
277
276
  onClose: () => void;
278
- enterpriseLogo?: ReactNode;
279
277
  }
280
- declare const HelpModal: ({ opened, onClose, enterpriseLogo }: HelpModalProps) => react_jsx_runtime.JSX.Element;
278
+ declare const HelpModal: ({ opened, onClose }: HelpModalProps) => react_jsx_runtime.JSX.Element;
281
279
 
282
280
  interface SidebarModuleScreen {
283
281
  id: number;
package/dist/index.d.ts CHANGED
@@ -250,7 +250,6 @@ interface UserAccount {
250
250
  interface HeaderProps {
251
251
  moduleName: string;
252
252
  logo?: ReactNode;
253
- enterpriseLogo?: ReactNode;
254
253
  accounts: UserAccount[];
255
254
  currentSite?: {
256
255
  id: string;
@@ -262,7 +261,7 @@ interface HeaderProps {
262
261
  onClickSettings: () => void;
263
262
  onLogout: () => void;
264
263
  }
265
- declare const Header: ({ moduleName, logo, enterpriseLogo, accounts, currentSite, onBackHome, onChangeAccount, onClickMyPayroll, onClickSettings, onLogout, }: HeaderProps) => react_jsx_runtime.JSX.Element;
264
+ declare const Header: ({ moduleName, logo, accounts, currentSite, onBackHome, onChangeAccount, onClickMyPayroll, onClickSettings, onLogout, }: HeaderProps) => react_jsx_runtime.JSX.Element;
266
265
 
267
266
  interface ChangeAccountModalProps {
268
267
  opened: boolean;
@@ -275,9 +274,8 @@ declare const ChangeAccountModal: ({ opened, onClose, accounts, onChangeAccount,
275
274
  interface HelpModalProps {
276
275
  opened: boolean;
277
276
  onClose: () => void;
278
- enterpriseLogo?: ReactNode;
279
277
  }
280
- declare const HelpModal: ({ opened, onClose, enterpriseLogo }: HelpModalProps) => react_jsx_runtime.JSX.Element;
278
+ declare const HelpModal: ({ opened, onClose }: HelpModalProps) => react_jsx_runtime.JSX.Element;
281
279
 
282
280
  interface SidebarModuleScreen {
283
281
  id: number;
package/dist/index.js CHANGED
@@ -2405,18 +2405,23 @@ var createPatientForm = (info) => {
2405
2405
  };
2406
2406
 
2407
2407
  // src/components/header/Header.tsx
2408
+ import { useMemo as useMemo5, useState as useState6 } from "react";
2408
2409
  import * as MC3 from "@mantine/core";
2409
2410
  import * as TI4 from "@tabler/icons-react";
2410
- import { useMemo as useMemo5, useState as useState6 } from "react";
2411
2411
 
2412
2412
  // src/components/header/HelpModal.tsx
2413
2413
  import * as MC from "@mantine/core";
2414
2414
  import * as TI2 from "@tabler/icons-react";
2415
+
2416
+ // src/assets/logo-ttn.png
2417
+ var logo_ttn_default = "data:image/png;base64,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";
2418
+
2419
+ // src/components/header/HelpModal.tsx
2415
2420
  import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
2416
- var HelpModal = ({ opened, onClose, enterpriseLogo }) => {
2421
+ var HelpModal = ({ opened, onClose }) => {
2417
2422
  return /* @__PURE__ */ jsxs9(MC.Modal, { title: "Ayuda", opened, onClose, "data-testid": "header-help-modal", children: [
2418
2423
  /* @__PURE__ */ jsxs9(MC.Stack, { mb: "lg", align: "center", children: [
2419
- enterpriseLogo,
2424
+ /* @__PURE__ */ jsx10(MC.Image, { src: logo_ttn_default, alt: "Enterprise Logo", draggable: false, w: 126 }),
2420
2425
  /* @__PURE__ */ jsx10(MC.Text, { fz: "lg", fw: "bold", children: "Informaci\xF3n de contacto" }),
2421
2426
  /* @__PURE__ */ jsxs9(MC.Stack, { children: [
2422
2427
  /* @__PURE__ */ jsxs9(MC.Group, { children: [
@@ -2505,7 +2510,6 @@ import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-r
2505
2510
  var Header = ({
2506
2511
  moduleName,
2507
2512
  logo,
2508
- enterpriseLogo,
2509
2513
  accounts,
2510
2514
  currentSite,
2511
2515
  onBackHome,
@@ -2528,82 +2532,93 @@ var Header = ({
2528
2532
  return { currentAccount: currentAccount2, currentProfile: currentProfile2 };
2529
2533
  }, [accounts, userInfo]);
2530
2534
  return /* @__PURE__ */ jsxs11(Fragment3, { children: [
2531
- /* @__PURE__ */ jsxs11(MC3.Flex, { w: "100%", px: 16, py: 6, justify: "space-between", align: "center", children: [
2532
- /* @__PURE__ */ jsxs11(MC3.Group, { children: [
2533
- /* @__PURE__ */ jsx12(MC3.UnstyledButton, { onClick: onBackHome, "data-testid": "header-logo-button", children: logo }),
2534
- /* @__PURE__ */ jsxs11(MC3.Title, { order: 3, c: "gray.4", fw: "inherit", children: [
2535
- "\u2022 ",
2536
- moduleName
2537
- ] })
2538
- ] }),
2539
- /* @__PURE__ */ jsxs11(MC3.Flex, { gap: "sm", children: [
2540
- Boolean(currentSite) && /* @__PURE__ */ jsxs11(MC3.Flex, { align: "center", children: [
2541
- /* @__PURE__ */ jsx12(MC3.ThemeIcon, { variant: "transparent", c: "dimmed", children: /* @__PURE__ */ jsx12(TI4.IconMapPinFilled, { style: { width: 24, height: 24 } }) }),
2542
- /* @__PURE__ */ jsx12(MC3.Text, { c: "gray.6", fz: "sm", children: currentSite?.name })
2543
- ] }),
2544
- /* @__PURE__ */ jsxs11(MC3.Menu, { width: 216, position: "bottom-end", children: [
2545
- /* @__PURE__ */ jsx12(MC3.Menu.Target, { "data-testid": "header-account-menu-button", children: /* @__PURE__ */ jsxs11(
2546
- MC3.Box,
2547
- {
2548
- w: 216,
2549
- style: (theme) => ({
2550
- display: "flex",
2551
- alignItems: "center",
2552
- border: `1px solid ${theme.colors.gray[3]}`,
2553
- borderRadius: theme.radius.sm,
2554
- padding: "4px 8px",
2555
- cursor: "pointer"
2556
- }),
2557
- children: [
2558
- Boolean(currentAccount) && /* @__PURE__ */ jsx12(MC3.ThemeIcon, { variant: "transparent", c: "primary-color", size: "lg", children: /* @__PURE__ */ jsx12(TI4.IconBuilding, { style: { width: 24, height: 24 } }) }),
2559
- /* @__PURE__ */ jsx12(MC3.Text, { ml: 6, flex: 1, children: currentAccount?.name }),
2560
- /* @__PURE__ */ jsx12(MC3.Avatar, { src: userInfo?.imageUrl })
2561
- ]
2562
- }
2563
- ) }),
2564
- /* @__PURE__ */ jsxs11(MC3.Menu.Dropdown, { children: [
2565
- /* @__PURE__ */ jsxs11(MC3.Stack, { px: "md", py: "sm", gap: "xs", align: "center", children: [
2566
- /* @__PURE__ */ jsx12(MC3.Avatar, { src: userInfo?.imageUrl, size: "lg" }),
2567
- /* @__PURE__ */ jsx12(MC3.Text, { fw: "bold", children: userInfo?.name }),
2568
- /* @__PURE__ */ jsxs11(MC3.Text, { fw: "bold", ta: "center", c: "gray.4", children: [
2569
- currentAccount?.name,
2570
- " - ",
2571
- currentProfile?.name
2572
- ] })
2535
+ /* @__PURE__ */ jsxs11(
2536
+ MC3.Flex,
2537
+ {
2538
+ w: "100%",
2539
+ px: 16,
2540
+ py: 8,
2541
+ justify: "space-between",
2542
+ align: "center",
2543
+ style: { borderBottom: "5px solid var(--mantine-primary-color-9)" },
2544
+ children: [
2545
+ /* @__PURE__ */ jsxs11(MC3.Group, { children: [
2546
+ /* @__PURE__ */ jsx12(MC3.UnstyledButton, { onClick: onBackHome, "data-testid": "header-logo-button", children: logo }),
2547
+ moduleName && /* @__PURE__ */ jsxs11(MC3.Title, { order: 3, c: "gray.4", fw: "inherit", children: [
2548
+ "\u2022 ",
2549
+ moduleName
2550
+ ] })
2551
+ ] }),
2552
+ /* @__PURE__ */ jsxs11(MC3.Flex, { gap: "sm", children: [
2553
+ Boolean(currentSite) && /* @__PURE__ */ jsxs11(MC3.Flex, { align: "center", children: [
2554
+ /* @__PURE__ */ jsx12(MC3.ThemeIcon, { variant: "transparent", c: "dimmed", children: /* @__PURE__ */ jsx12(TI4.IconMapPinFilled, { style: { width: 24, height: 24 } }) }),
2555
+ /* @__PURE__ */ jsx12(MC3.Text, { c: "gray.6", fz: "sm", children: currentSite?.name })
2573
2556
  ] }),
2574
- Boolean(currentAccount) && /* @__PURE__ */ jsxs11(Fragment3, { children: [
2575
- /* @__PURE__ */ jsx12(
2576
- MC3.Menu.Item,
2577
- {
2578
- onClick: () => setChangeAccountModalOpened(true),
2579
- "data-testid": "header-change-account-menu-item",
2580
- children: "Cambiar rol y cuenta"
2581
- }
2582
- ),
2583
- /* @__PURE__ */ jsx12(
2584
- MC3.Menu.Item,
2557
+ /* @__PURE__ */ jsxs11(MC3.Menu, { width: 216, position: "bottom-end", children: [
2558
+ /* @__PURE__ */ jsx12(MC3.Menu.Target, { "data-testid": "header-account-menu-button", children: /* @__PURE__ */ jsxs11(
2559
+ MC3.Box,
2585
2560
  {
2586
- onClick: onClickMyPayroll,
2587
- "data-testid": "header-my-payroll-menu-item",
2588
- children: "Mi n\xF3mina"
2561
+ w: 216,
2562
+ style: (theme) => ({
2563
+ display: "flex",
2564
+ alignItems: "center",
2565
+ border: `1px solid ${theme.colors.gray[3]}`,
2566
+ borderRadius: theme.radius.sm,
2567
+ padding: "4px 8px",
2568
+ cursor: "pointer"
2569
+ }),
2570
+ children: [
2571
+ Boolean(currentAccount) && /* @__PURE__ */ jsx12(MC3.ThemeIcon, { variant: "transparent", c: "primary-color", size: "lg", children: /* @__PURE__ */ jsx12(TI4.IconBuilding, { style: { width: 24, height: 24 } }) }),
2572
+ /* @__PURE__ */ jsx12(MC3.Text, { ml: 6, flex: 1, children: currentAccount?.name }),
2573
+ /* @__PURE__ */ jsx12(MC3.Avatar, { src: userInfo?.imageUrl })
2574
+ ]
2589
2575
  }
2590
- ),
2591
- /* @__PURE__ */ jsx12(MC3.Menu.Item, { onClick: onClickSettings, "data-testid": "header-settings-menu-item", children: "Configuraci\xF3n" })
2592
- ] }),
2593
- /* @__PURE__ */ jsx12(
2594
- MC3.Menu.Item,
2595
- {
2596
- onClick: () => setHelpModalOpened(true),
2597
- "data-testid": "header-help-menu-item",
2598
- children: "Ayuda"
2599
- }
2600
- ),
2601
- /* @__PURE__ */ jsx12(MC3.Menu.Divider, {}),
2602
- /* @__PURE__ */ jsx12(MC3.Menu.Item, { onClick: onLogout, "data-testid": "header-logout-menu-item", children: "Cerrar sesi\xF3n" })
2576
+ ) }),
2577
+ /* @__PURE__ */ jsxs11(MC3.Menu.Dropdown, { children: [
2578
+ /* @__PURE__ */ jsxs11(MC3.Stack, { px: "md", py: "sm", gap: "xs", align: "center", children: [
2579
+ /* @__PURE__ */ jsx12(MC3.Avatar, { src: userInfo?.imageUrl, size: "lg" }),
2580
+ /* @__PURE__ */ jsx12(MC3.Text, { fw: "bold", children: userInfo?.name }),
2581
+ /* @__PURE__ */ jsxs11(MC3.Text, { fw: "bold", ta: "center", c: "gray.4", children: [
2582
+ currentAccount?.name,
2583
+ " - ",
2584
+ currentProfile?.name
2585
+ ] })
2586
+ ] }),
2587
+ Boolean(currentAccount) && /* @__PURE__ */ jsxs11(Fragment3, { children: [
2588
+ /* @__PURE__ */ jsx12(
2589
+ MC3.Menu.Item,
2590
+ {
2591
+ onClick: () => setChangeAccountModalOpened(true),
2592
+ "data-testid": "header-change-account-menu-item",
2593
+ children: "Cambiar rol y cuenta"
2594
+ }
2595
+ ),
2596
+ /* @__PURE__ */ jsx12(
2597
+ MC3.Menu.Item,
2598
+ {
2599
+ onClick: onClickMyPayroll,
2600
+ "data-testid": "header-my-payroll-menu-item",
2601
+ children: "Mi n\xF3mina"
2602
+ }
2603
+ ),
2604
+ /* @__PURE__ */ jsx12(MC3.Menu.Item, { onClick: onClickSettings, "data-testid": "header-settings-menu-item", children: "Configuraci\xF3n" })
2605
+ ] }),
2606
+ /* @__PURE__ */ jsx12(
2607
+ MC3.Menu.Item,
2608
+ {
2609
+ onClick: () => setHelpModalOpened(true),
2610
+ "data-testid": "header-help-menu-item",
2611
+ children: "Ayuda"
2612
+ }
2613
+ ),
2614
+ /* @__PURE__ */ jsx12(MC3.Menu.Divider, {}),
2615
+ /* @__PURE__ */ jsx12(MC3.Menu.Item, { onClick: onLogout, "data-testid": "header-logout-menu-item", children: "Cerrar sesi\xF3n" })
2616
+ ] })
2617
+ ] })
2603
2618
  ] })
2604
- ] })
2605
- ] })
2606
- ] }),
2619
+ ]
2620
+ }
2621
+ ),
2607
2622
  /* @__PURE__ */ jsx12(
2608
2623
  ChangeAccountModal,
2609
2624
  {
@@ -2613,24 +2628,18 @@ var Header = ({
2613
2628
  onChangeAccount
2614
2629
  }
2615
2630
  ),
2616
- /* @__PURE__ */ jsx12(
2617
- HelpModal,
2618
- {
2619
- opened: helpModalOpened,
2620
- onClose: () => setHelpModalOpened(false),
2621
- enterpriseLogo
2622
- }
2623
- )
2631
+ /* @__PURE__ */ jsx12(HelpModal, { opened: helpModalOpened, onClose: () => setHelpModalOpened(false) })
2624
2632
  ] });
2625
2633
  };
2626
2634
 
2627
2635
  // src/components/sidebar/Sidebar.tsx
2628
2636
  import { useState as useState7 } from "react";
2629
2637
  import * as MC5 from "@mantine/core";
2630
- import * as TI5 from "@tabler/icons-react";
2638
+ import * as TI6 from "@tabler/icons-react";
2631
2639
 
2632
2640
  // src/components/sidebar/SidebarMenu.tsx
2633
2641
  import * as MC4 from "@mantine/core";
2642
+ import * as TI5 from "@tabler/icons-react";
2634
2643
  import { Fragment as Fragment4 } from "react/jsx-runtime";
2635
2644
  import { NavLink } from "react-router-dom";
2636
2645
  import { Fragment as Fragment5, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
@@ -2645,22 +2654,25 @@ var SidebarMenu = ({
2645
2654
  onClickExternalScreen
2646
2655
  }) => {
2647
2656
  return /* @__PURE__ */ jsxs12(Fragment5, { children: [
2648
- /* @__PURE__ */ jsx13(
2657
+ /* @__PURE__ */ jsxs12(
2649
2658
  MC4.UnstyledButton,
2650
2659
  {
2651
2660
  onClick: () => onClickMenu(id),
2652
2661
  className: "ttn-sidebar-menu",
2653
2662
  "data-testid": `sidebar-menu-${label}`,
2654
- children: /* @__PURE__ */ jsxs12(MC4.Flex, { align: "center", children: [
2655
- /* @__PURE__ */ jsx13(MC4.Center, { w: 40, h: 40, me: 10, children: /* @__PURE__ */ jsx13(
2656
- MC4.Box,
2657
- {
2658
- className: "ttn-sidebar-menu-icon",
2659
- style: { maskImage: `url(${icon})`, WebkitMaskImage: `url(${icon})` }
2660
- }
2661
- ) }),
2662
- /* @__PURE__ */ jsx13(MC4.Text, { size: "sm", c: "gray.7", lineClamp: 1, children: label })
2663
- ] })
2663
+ children: [
2664
+ /* @__PURE__ */ jsxs12(MC4.Flex, { align: "center", flex: 1, children: [
2665
+ /* @__PURE__ */ jsx13(MC4.Center, { miw: 40, mih: 40, me: 10, children: /* @__PURE__ */ jsx13(
2666
+ MC4.Box,
2667
+ {
2668
+ className: "ttn-sidebar-menu-icon",
2669
+ style: { maskImage: `url(${icon})`, WebkitMaskImage: `url(${icon})` }
2670
+ }
2671
+ ) }),
2672
+ /* @__PURE__ */ jsx13(MC4.Text, { size: "sm", c: "gray.7", lineClamp: 1, children: label })
2673
+ ] }),
2674
+ active ? /* @__PURE__ */ jsx13(TI5.IconChevronDown, { style: { width: 20, height: 20 } }) : /* @__PURE__ */ jsx13(TI5.IconChevronRight, { style: { width: 20, height: 20 } })
2675
+ ]
2664
2676
  }
2665
2677
  ),
2666
2678
  Boolean(screens?.length) && /* @__PURE__ */ jsx13(MC4.Collapse, { in: active ?? false, children: screens?.map((screen) => /* @__PURE__ */ jsxs12(Fragment4, { children: [
@@ -2704,24 +2716,27 @@ var Sidebar = ({ modules, onClickExternalScreen }) => {
2704
2716
  MC5.ActionIcon,
2705
2717
  {
2706
2718
  variant: "white",
2707
- c: "gray.6",
2719
+ size: "md",
2720
+ mt: 15,
2721
+ c: "gray.4",
2708
2722
  onClick: handleCloseSidebar,
2709
2723
  style: { alignSelf: "flex-end" },
2710
2724
  "data-testid": "sidebar-close-button",
2711
- children: /* @__PURE__ */ jsx14(TI5.IconX, { style: { width: 20, height: 20 } })
2725
+ children: /* @__PURE__ */ jsx14(TI6.IconX, { style: { width: 20, height: 20, strokeWidth: 3 } })
2712
2726
  }
2713
2727
  ),
2714
2728
  !opened && /* @__PURE__ */ jsx14(MC5.Center, { w: 80, children: /* @__PURE__ */ jsx14(
2715
2729
  MC5.ActionIcon,
2716
2730
  {
2731
+ variant: "outline",
2732
+ my: "xs",
2717
2733
  w: 32,
2718
2734
  h: 32,
2719
- variant: "outline",
2720
2735
  radius: "xs",
2721
2736
  onClick: () => setOpened(true),
2722
2737
  style: { alignSelf: "flex-end", borderWidth: 2 },
2723
2738
  "data-testid": "sidebar-open-button",
2724
- children: /* @__PURE__ */ jsx14(TI5.IconMenu2, { style: { width: 20, height: 20, strokeWidth: 2 } })
2739
+ children: /* @__PURE__ */ jsx14(TI6.IconMenu2, { style: { width: 20, height: 20, strokeWidth: 3 } })
2725
2740
  }
2726
2741
  ) })
2727
2742
  ] }),
@@ -2738,7 +2753,8 @@ var Sidebar = ({ modules, onClickExternalScreen }) => {
2738
2753
  onClickExternalScreen: handleClickExternalScreen
2739
2754
  },
2740
2755
  module.id
2741
- ))
2756
+ )),
2757
+ /* @__PURE__ */ jsx14(MC5.Box, { mih: 82 })
2742
2758
  ] });
2743
2759
  };
2744
2760
  export {
package/package.json CHANGED
@@ -1,10 +1,11 @@
1
1
  {
2
2
  "name": "@ttn-shared/ui",
3
- "version": "1.2.6",
3
+ "version": "1.2.8",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "files": [
7
- "dist"
7
+ "dist",
8
+ "styles.css"
8
9
  ],
9
10
  "keywords": [
10
11
  "ttn",
@@ -15,7 +16,7 @@
15
16
  ],
16
17
  "description": "A shared UI component library for TTN projects.",
17
18
  "scripts": {
18
- "build": "tsup src/index.ts",
19
+ "build": "tsup src/index.ts && node scripts/postbuild.mjs",
19
20
  "lint": "eslint src/**/*.{ts,tsx} --fix",
20
21
  "format": "prettier --write src/**/*.{ts,tsx,js,json,md}"
21
22
  },
@@ -34,7 +35,7 @@
34
35
  "default": "./dist/index.cjs"
35
36
  }
36
37
  },
37
- "./styles.css": "./dist/index.css"
38
+ "./styles.css": "./styles.css"
38
39
  },
39
40
  "dependencies": {
40
41
  "axios": "1.13.3",
package/styles.css ADDED
@@ -0,0 +1,56 @@
1
+ /* src/components/sidebar/sidebar.css */
2
+ .ttn-sidebar {
3
+ width: 335px;
4
+ height: 100%;
5
+ display: flex;
6
+ flex-direction: column;
7
+ padding-right: 20px;
8
+ box-shadow: 10px 0px 20px rgba(0, 0, 0, 0.06);
9
+ overflow-x: hidden;
10
+ overflow-y: auto;
11
+ transition: width 0.3s ease;
12
+ &.closed {
13
+ width: 80px;
14
+ overflow: hidden;
15
+ }
16
+ }
17
+ .ttn-sidebar-menu {
18
+ width: 100%;
19
+ min-height: 56px;
20
+ display: flex;
21
+ align-items: center;
22
+ padding: 8px 10px 8px 20px !important;
23
+ overflow: hidden;
24
+ }
25
+ .ttn-sidebar-menu-icon {
26
+ width: 24px;
27
+ height: 24px;
28
+ background-color: var(--mantine-color-gray-6);
29
+ mask-repeat: no-repeat;
30
+ mask-size: contain;
31
+ mask-position: center;
32
+ -webkit-mask-repeat: no-repeat;
33
+ -webkit-mask-size: contain;
34
+ -webkit-mask-position: center;
35
+ &.active,
36
+ &:hover {
37
+ background-color: var(--mantine-primary-color-9);
38
+ }
39
+ }
40
+ .ttn-sidebar-menu-item {
41
+ display: block;
42
+ font-size: 16px;
43
+ color: inherit;
44
+ text-decoration: none;
45
+ text-transform: uppercase;
46
+ padding: 5px 0 5px 10px;
47
+ margin-left: 70px;
48
+ border-left: 3px solid transparent;
49
+ white-space: nowrap;
50
+ cursor: pointer;
51
+ &.active,
52
+ &:hover {
53
+ border-color: var(--mantine-primary-color-9);
54
+ color: var(--mantine-primary-color-9);
55
+ }
56
+ }