@taiv/ui 1.0.2 → 1.2.0

package/dist/components/index.js

@@ -1,38 +1,50 @@
 //Data
-export { CheckboxTable } from "./Data/CheckboxTable";
-export { RemovableItemList } from "./Data/RemovableItemList";
+export { CheckboxTable } from './Data/CheckboxTable';
+export { Chart } from './Data/Chart';
+export { PieChart } from './Data/PieChart';
+export { RemovableItemList } from './Data/RemovableItemList';
+export { StatsCard } from './Data/StatsCard';
 //Info
-export { ModalProvider } from "./Info/Modals/ModalProvider";
-export { Modal } from "./Info/Modals/Modal";
-export { NotificationProvider } from "./Info/Notifications/NotificationProvider";
-export { InfoTooltip } from "./Info/Tooltips/InfoTooltip";
-export { Tooltip } from "./Info/Tooltips/Tooltip";
+export { Modal } from './Info/Modals/Modal';
+export { ModalProvider } from './Info/Modals/ModalProvider';
+export { NotificationProvider } from './Info/Notifications/NotificationProvider';
+export { Tooltip } from './Info/Tooltips/Tooltip';
+export { InfoTooltip } from './Info/Tooltips/InfoTooltip';
+export { InfoCard } from './Info/InfoCard';
 //Inputs
-export { AutoComplete } from "./Inputs/TextInputs/AutoComplete";
-export { Button } from "./Inputs/Buttons/Button";
-export { UnstyledButton } from "./Inputs/Buttons/UnstyledButton";
-export { Checkbox } from "./Inputs/Controls/Checkbox";
-export { Toggle } from "./Inputs/Controls/Toggle";
-export { FontSelect } from "./Inputs/Dropdowns/FontSelect";
-export { MultiSelect } from "./Inputs/Dropdowns/MultiSelect";
-export { SearchBar } from "./Inputs/TextInputs/SearchBar";
-export { Select } from "./Inputs/Dropdowns/Select";
-export { Slider } from "./Inputs/Sliders/Slider";
-export { VolumeSlider } from "./Inputs/Sliders/VolumeSlider";
-export { TextArea } from "./Inputs/TextInputs/TextArea";
-export { TextInput } from "./Inputs/TextInputs/TextInput";
-export { PasswordInput } from "./Inputs/TextInputs/PasswordInput";
+export { AutoComplete } from './Inputs/TextInputs/AutoComplete';
+export { Button } from './Inputs/Buttons/Button';
+export { UnstyledButton } from './Inputs/Buttons/UnstyledButton';
+export { Checkbox } from './Inputs/Controls/Checkbox';
+export { Toggle } from './Inputs/Controls/Toggle';
+export { FontSelect } from './Inputs/Dropdowns/FontSelect';
+export { MultiSelect } from './Inputs/Dropdowns/MultiSelect';
+export { SearchBar } from './Inputs/TextInputs/SearchBar';
+export { Select } from './Inputs/Dropdowns/Select';
+export { Slider } from './Inputs/Sliders/Slider';
+export { VolumeSlider } from './Inputs/Sliders/VolumeSlider';
+export { TextArea } from './Inputs/TextInputs/TextArea';
+export { TextInput } from './Inputs/TextInputs/TextInput';
+export { PasswordInput } from './Inputs/TextInputs/PasswordInput';
+export { DatePicker } from './Inputs/DatePickers/DatePicker';
 //Layout
-export { Box } from "./Layout/Box";
-export { Center } from "./Layout/Center";
-export { Divider } from "./Layout/Divider";
-export { Frame } from "./Layout/Frame";
-export { Group } from "./Layout/Group";
-export { Loader } from "./Layout/Loader";
-export { Stack } from "./Layout/Stack";
+export { AutoGrid } from './Layout/AutoGrid';
+export { Grid } from './Layout/Grid';
+export { Box } from './Layout/Box';
+export { Center } from './Layout/Center';
+export { Divider } from './Layout/Divider';
+export { Frame } from './Layout/Frame';
+export { Group } from './Layout/Group';
+export { Loader } from './Layout/Loader';
+export { Stack } from './Layout/Stack';
+export { Card } from './Layout/Card';
+export { SectionCard } from './Layout/SectionCard';
+export { Tabs } from './Layout/Tabs';
 //Typography
-export { CollapsibleText } from "./Typography/CollapsibleText";
-export { Text } from "./Typography/Text";
-export { Title } from "./Typography/Title";
+export { CollapsibleText } from './Typography/CollapsibleText';
+export { Text } from './Typography/Text';
+export { Title } from './Typography/Title';
+export { Fraction } from './Typography/Fraction';
 //Misc
-export { Transition } from "./Misc/Transition";
+export { Transition } from './Misc/Transition';
+export { IconBadge } from './Misc/IconBadge';

package/dist/constants/breakpoints.d.ts

@@ -0,0 +1,8 @@
+export declare const BREAKPOINTS: {
+    readonly MOBILE: 640;
+    readonly TABLET: 768;
+    readonly LAPTOP: 1024;
+    readonly DESKTOP: 1280;
+    readonly WIDE: 1536;
+};
+//# sourceMappingURL=breakpoints.d.ts.map

package/dist/constants/breakpoints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../src/constants/breakpoints.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,WAAW;;;;;;CAMd,CAAC"}

package/dist/constants/breakpoints.js

@@ -0,0 +1,8 @@
+// Breakpoints in px - from Tailwind CSS
+export const BREAKPOINTS = {
+    MOBILE: 640,
+    TABLET: 768,
+    LAPTOP: 1024,
+    DESKTOP: 1280,
+    WIDE: 1536,
+};

package/dist/constants/colors.d.ts

@@ -1,3 +1,10 @@
+export declare const gray: {
+    readonly 25: "#F8FAFC";
+    readonly 50: "#EDEDED";
+    readonly 100: "#D9D9D9";
+    readonly 200: "#6D6D6D";
+    readonly 300: "#3F3F3F";
+};
 export declare const neutral: {
     readonly 25: "#F8FAFC";
     readonly 50: "#EDEDED";
@@ -5,6 +12,13 @@ export declare const neutral: {
     readonly 200: "#6D6D6D";
     readonly 300: "#3F3F3F";
 };
+export declare const blue: {
+    readonly 25: "#EEFAFF";
+    readonly 50: "#BDEAFF";
+    readonly 100: "#74D4FF";
+    readonly 200: "#00A6F4";
+    readonly 300: "#0081CE";
+};
 export declare const primary: {
     readonly 25: "#EEFAFF";
     readonly 50: "#BDEAFF";
@@ -12,30 +26,58 @@ export declare const primary: {
     readonly 200: "#00A6F4";
     readonly 300: "#0081CE";
 };
-export declare const secondary: {
-    readonly 50: "#E8F5E9";
-    readonly 100: "#C8E6C9";
-    readonly 200: "#81C784";
-    readonly 300: "#4CAF50";
+export declare const green: {
+    readonly 25: "#E6F4E7";
+    readonly 50: "#E6F4E7";
+    readonly 100: "#00C951";
+    readonly 200: "#00A63E";
+    readonly 300: "#008236";
 };
 export declare const success: {
+    readonly 25: "#E6F4E7";
     readonly 50: "#E6F4E7";
     readonly 100: "#00C951";
     readonly 200: "#00A63E";
     readonly 300: "#008236";
 };
+export declare const yellow: {
+    readonly 25: "#FFF3E0";
+    readonly 50: "#FFE5B4";
+    readonly 100: "#FE9A00";
+    readonly 200: "#E17100";
+    readonly 300: "#973C00";
+};
 export declare const warning: {
+    readonly 25: "#FFF3E0";
     readonly 50: "#FFE5B4";
     readonly 100: "#FE9A00";
     readonly 200: "#E17100";
     readonly 300: "#973C00";
 };
+export declare const red: {
+    readonly 25: "#FFE5E6";
+    readonly 50: "#FFD7D9";
+    readonly 100: "#FB2C36";
+    readonly 200: "#C10007";
+    readonly 300: "#9F0712";
+};
 export declare const error: {
+    readonly 25: "#FFE5E6";
     readonly 50: "#FFD7D9";
     readonly 100: "#FB2C36";
     readonly 200: "#C10007";
     readonly 300: "#9F0712";
 };
+export declare const purple: {
+    readonly 50: "#EFEAFF";
+    readonly 100: "#D6C8FF";
+    readonly 200: "#7D63C8";
+};
+export declare const salmon: {
+    readonly 50: "#FFEAE6";
+    readonly 100: "#FFD1C7";
+    readonly 200: "#FF806F";
+};
 export declare const colors: {
     readonly neutral: {
         readonly 25: "#F8FAFC";
@@ -51,29 +93,73 @@ export declare const colors: {
         readonly 200: "#00A6F4";
         readonly 300: "#0081CE";
     };
-    readonly secondary: {
-        readonly 50: "#E8F5E9";
-        readonly 100: "#C8E6C9";
-        readonly 200: "#81C784";
-        readonly 300: "#4CAF50";
-    };
     readonly success: {
+        readonly 25: "#E6F4E7";
         readonly 50: "#E6F4E7";
         readonly 100: "#00C951";
         readonly 200: "#00A63E";
         readonly 300: "#008236";
     };
     readonly warning: {
+        readonly 25: "#FFF3E0";
         readonly 50: "#FFE5B4";
         readonly 100: "#FE9A00";
         readonly 200: "#E17100";
         readonly 300: "#973C00";
     };
     readonly error: {
+        readonly 25: "#FFE5E6";
         readonly 50: "#FFD7D9";
         readonly 100: "#FB2C36";
         readonly 200: "#C10007";
         readonly 300: "#9F0712";
     };
 };
+export declare const palettes: {
+    readonly blue: {
+        readonly 25: "#EEFAFF";
+        readonly 50: "#BDEAFF";
+        readonly 100: "#74D4FF";
+        readonly 200: "#00A6F4";
+        readonly 300: "#0081CE";
+    };
+    readonly green: {
+        readonly 25: "#E6F4E7";
+        readonly 50: "#E6F4E7";
+        readonly 100: "#00C951";
+        readonly 200: "#00A63E";
+        readonly 300: "#008236";
+    };
+    readonly yellow: {
+        readonly 25: "#FFF3E0";
+        readonly 50: "#FFE5B4";
+        readonly 100: "#FE9A00";
+        readonly 200: "#E17100";
+        readonly 300: "#973C00";
+    };
+    readonly red: {
+        readonly 25: "#FFE5E6";
+        readonly 50: "#FFD7D9";
+        readonly 100: "#FB2C36";
+        readonly 200: "#C10007";
+        readonly 300: "#9F0712";
+    };
+    readonly purple: {
+        readonly 50: "#EFEAFF";
+        readonly 100: "#D6C8FF";
+        readonly 200: "#7D63C8";
+    };
+    readonly salmon: {
+        readonly 50: "#FFEAE6";
+        readonly 100: "#FFD1C7";
+        readonly 200: "#FF806F";
+    };
+    readonly gray: {
+        readonly 25: "#F8FAFC";
+        readonly 50: "#EDEDED";
+        readonly 100: "#D9D9D9";
+        readonly 200: "#6D6D6D";
+        readonly 300: "#3F3F3F";
+    };
+};
 //# sourceMappingURL=colors.d.ts.map

package/dist/constants/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/constants/colors.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,OAAO;;;;;;CAMV,CAAC;AAGX,eAAO,MAAM,OAAO;;;;;;CAMV,CAAC;AAGX,eAAO,MAAM,SAAS;;;;;CAKZ,CAAC;AAGX,eAAO,MAAM,OAAO;;;;;CAKV,CAAC;AAGX,eAAO,MAAM,OAAO;;;;;CAKV,CAAC;AAGX,eAAO,MAAM,KAAK;;;;;CAKR,CAAC;AAGX,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOT,CAAC"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/constants/colors.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,IAAI;;;;;;CAMP,CAAC;AACX,eAAO,MAAM,OAAO;;;;;;CAAO,CAAC;AAE5B,eAAO,MAAM,IAAI;;;;;;CAMP,CAAC;AACX,eAAO,MAAM,OAAO;;;;;;CAAO,CAAC;AAE5B,eAAO,MAAM,KAAK;;;;;;CAMR,CAAC;AACX,eAAO,MAAM,OAAO;;;;;;CAAQ,CAAC;AAE7B,eAAO,MAAM,MAAM;;;;;;CAMT,CAAC;AACX,eAAO,MAAM,OAAO;;;;;;CAAS,CAAC;AAE9B,eAAO,MAAM,GAAG;;;;;;CAMN,CAAC;AACX,eAAO,MAAM,KAAK;;;;;;CAAM,CAAC;AAGzB,eAAO,MAAM,MAAM;;;;CAIT,CAAC;AAEX,eAAO,MAAM,MAAM;;;;CAIT,CAAC;AAGX,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMT,CAAC;AAGX,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQX,CAAC"}

package/dist/constants/colors.js

@@ -1,53 +1,69 @@
-// Neutral Colors - Grays
-export const neutral = {
+export const gray = {
     25: '#F8FAFC',
     50: '#EDEDED',
     100: '#D9D9D9',
     200: '#6D6D6D',
     300: '#3F3F3F',
 };
-// Primary Colors - Blues
-export const primary = {
+export const neutral = gray;
+export const blue = {
     25: '#EEFAFF',
     50: '#BDEAFF',
     100: '#74D4FF',
     200: '#00A6F4',
     300: '#0081CE',
 };
-// Secondary Colors - Blues (temp)
-export const secondary = {
-    50: '#E8F5E9',
-    100: '#C8E6C9',
-    200: '#81C784',
-    300: '#4CAF50',
-};
-// Success Colors - Greens
-export const success = {
+export const primary = blue;
+export const green = {
+    25: '#E6F4E7',
     50: '#E6F4E7',
     100: '#00C951',
     200: '#00A63E',
     300: '#008236',
 };
-// Warning Colors - Oranges
-export const warning = {
+export const success = green;
+export const yellow = {
+    25: '#FFF3E0',
     50: '#FFE5B4',
     100: '#FE9A00',
     200: '#E17100',
     300: '#973C00',
 };
-// Error Colors - Reds
-export const error = {
+export const warning = yellow;
+export const red = {
+    25: '#FFE5E6',
     50: '#FFD7D9',
     100: '#FB2C36',
     200: '#C10007',
     300: '#9F0712',
 };
-// Export for all colors
+export const error = red;
+// Purple Colors
+export const purple = {
+    50: '#EFEAFF',
+    100: '#D6C8FF',
+    200: '#7D63C8',
+};
+export const salmon = {
+    50: '#FFEAE6',
+    100: '#FFD1C7',
+    200: '#FF806F',
+};
+// Semantic/functional color exports - for use in UI, actions, states, etc.
 export const colors = {
     neutral,
     primary,
-    secondary,
     success,
     warning,
     error,
 };
+// Color palette exports - for purely aesthetic purpose, i.e. icons, backgrounds, etc.
+export const palettes = {
+    blue,
+    green,
+    yellow,
+    red,
+    purple,
+    salmon,
+    gray,
+};

package/dist/constants/index.d.ts

@@ -1,3 +1,4 @@
 export * from './colors';
 export * from './font';
+export * from './breakpoints';
 //# sourceMappingURL=index.d.ts.map

package/dist/constants/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC"}

package/dist/constants/index.js

@@ -1,2 +1,3 @@
 export * from './colors';
 export * from './font';
+export * from './breakpoints';

package/dist/hooks/index.d.ts

@@ -1,5 +1,5 @@
 export { useCopy } from './useCopy';
-export { useMediaQuery } from './useMediaQuery';
+export { useMediaQuery, useScreenSize, useMobile, useTablet, useLaptop, useDesktop, useWide } from './useMediaQuery';
 export { useNotifications } from './useNotifications';
 export { useConfirmationModal } from './useConfirmationModal';
 export { useInfoModal } from './useInfoModal';

package/dist/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AACrH,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/hooks/index.js

@@ -1,5 +1,5 @@
 export { useCopy } from './useCopy';
-export { useMediaQuery } from './useMediaQuery';
+export { useMediaQuery, useScreenSize, useMobile, useTablet, useLaptop, useDesktop, useWide } from './useMediaQuery';
 export { useNotifications } from './useNotifications';
 export { useConfirmationModal } from './useConfirmationModal';
 export { useInfoModal } from './useInfoModal';

package/dist/hooks/useMediaQuery.d.ts

@@ -1,3 +1,10 @@
 import { useMediaQuery as useMantineMediaQuery } from '@mantine/hooks';
+import { BREAKPOINTS } from '../constants/breakpoints';
 export declare const useMediaQuery: typeof useMantineMediaQuery;
+export declare const useScreenSize: () => keyof typeof BREAKPOINTS;
+export declare const useMobile: () => boolean;
+export declare const useTablet: () => boolean;
+export declare const useLaptop: () => boolean;
+export declare const useDesktop: () => boolean;
+export declare const useWide: () => boolean;
 //# sourceMappingURL=useMediaQuery.d.ts.map

package/dist/hooks/useMediaQuery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../src/hooks/useMediaQuery.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAEvE,eAAO,MAAM,aAAa,6BAAuB,CAAC"}
+{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../src/hooks/useMediaQuery.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,eAAO,MAAM,aAAa,6BAAuB,CAAC;AAElD,eAAO,MAAM,aAAa,QAAO,MAAM,OAAO,WAW7C,CAAC;AAEF,eAAO,MAAM,SAAS,eAA8D,CAAC;AACrF,eAAO,MAAM,SAAS,eAA8D,CAAC;AACrF,eAAO,MAAM,SAAS,eAA8D,CAAC;AACrF,eAAO,MAAM,UAAU,eAA+D,CAAC;AACvF,eAAO,MAAM,OAAO,eAA4D,CAAC"}

package/dist/hooks/useMediaQuery.js

@@ -1,2 +1,23 @@
 import { useMediaQuery as useMantineMediaQuery } from '@mantine/hooks';
+import { BREAKPOINTS } from '../constants/breakpoints';
 export const useMediaQuery = useMantineMediaQuery;
+export const useScreenSize = () => {
+    const isMobile = useMobile();
+    const isTablet = useTablet();
+    const isLaptop = useLaptop();
+    const isDesktop = useDesktop();
+    if (isMobile)
+        return 'MOBILE';
+    if (isTablet)
+        return 'TABLET';
+    if (isLaptop)
+        return 'LAPTOP';
+    if (isDesktop)
+        return 'DESKTOP';
+    return 'WIDE';
+};
+export const useMobile = () => useMediaQuery(`(max-width: ${BREAKPOINTS.MOBILE}px)`);
+export const useTablet = () => useMediaQuery(`(max-width: ${BREAKPOINTS.TABLET}px)`);
+export const useLaptop = () => useMediaQuery(`(max-width: ${BREAKPOINTS.LAPTOP}px)`);
+export const useDesktop = () => useMediaQuery(`(max-width: ${BREAKPOINTS.DESKTOP}px)`);
+export const useWide = () => useMediaQuery(`(max-width: ${BREAKPOINTS.WIDE}px)`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taiv/ui",
-  "version": "1.0.2",
+  "version": "1.2.0",
   "author": "Taiv",
   "description": "Taiv's web UI Toolkit built on Mantine v6",
   "main": "dist/index.js",
@@ -14,11 +14,15 @@
     "clean": "rm -rf dist"
   },
   "dependencies": {
-    "@tabler/icons-react": "^2.47.0",
+    "@emotion/react": "^11.14.0",
     "@mantine/core": "^6.0.0",
+    "@mantine/dates": "^6.0.22",
     "@mantine/hooks": "^6.0.0",
     "@mantine/modals": "^6.0.0",
-    "@mantine/notifications": "^6.0.0"
+    "@mantine/notifications": "^6.0.0",
+    "@tabler/icons-react": "^2.47.0",
+    "dayjs": "^1.11.18",
+    "recharts": "^3.1.2"
   },
   "peerDependencies": {
     "react": "^17.0.0",
@@ -33,5 +37,17 @@
     ".": "./dist/components/index.js",
     "./hooks": "./dist/hooks/index.js",
     "./constants": "./dist/constants/index.js"
+  },
+  "overrides": {
+    "@reduxjs/toolkit": {
+      ".": "^1.9.7",
+      "dependencies": {
+        "react": "17.0.2"
+      }
+    },
+    "react-redux": {
+      ".": "^8.1.3",
+      "react": "17.0.2"
+    }
   }
-}
+}

package/dist/components/Info/Modals/ConfirmationModal.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-import { modalVariants } from './variants';
-export declare const useConfirmationModal: () => {
-    show: (options: {
-        variant?: Exclude<keyof typeof modalVariants, "error">;
-        title?: string;
-        message?: string;
-        confirmLabel?: string;
-        cancelLabel?: string;
-        icon?: React.ReactNode;
-        onConfirm?: () => void;
-        onCancel?: () => void;
-        size?: string | number;
-    }) => void;
-    close: (modalId: string) => void;
-    closeAll: () => void;
-};
-//# sourceMappingURL=ConfirmationModal.d.ts.map

package/dist/components/Info/Modals/ConfirmationModal.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ConfirmationModal.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Modals/ConfirmationModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAI3C,eAAO,MAAM,oBAAoB;oBACR;QACrB,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,OAAO,aAAa,EAAE,OAAO,CAAC,CAAC;QACvD,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;QACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;QACtB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KACxB;qBAkGuB,MAAM;;CAa/B,CAAC"}

package/dist/components/Info/Modals/ConfirmationModal.js

@@ -1,76 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { modals } from '@mantine/modals';
-import { neutral } from '../../../constants/colors';
-import { Title } from '../../Typography/Title';
-import { Stack } from '../../Layout/Stack';
-import { Center } from '../../Layout/Center';
-import { modalVariants } from './variants';
-import { Button } from '../../Inputs/Buttons/Button';
-import { Group } from '../../Layout/Group';
-export const useConfirmationModal = () => {
-    const show = (options) => {
-        const { variant = 'confirm', title, message, confirmLabel, cancelLabel, icon, onConfirm, onCancel, size = '40rem', } = options;
-        const handleConfirm = () => {
-            if (onConfirm)
-                onConfirm();
-            modals.closeAll();
-        };
-        const handleCancel = () => {
-            if (onCancel)
-                onCancel();
-            modals.closeAll();
-        };
-        const selectedVariant = modalVariants[variant];
-        const iconContainer = {
-            width: '4.2rem',
-            height: '4.2rem',
-            borderRadius: '50%',
-            backgroundColor: selectedVariant.iconBackgroundColor,
-            border: `2px solid ${selectedVariant.iconColor}`,
-        };
-        const modalIcon = icon || (_jsx("i", { className: selectedVariant.icon, style: { color: selectedVariant.iconColor, fontSize: '2rem' } }));
-        const ConfirmModalContent = () => {
-            return (_jsx(Center, { h: "100%", w: "100%", children: _jsxs(Stack, { gap: "2rem", h: "100%", w: "100%", align: "center", children: [_jsxs(Stack, { gap: "1.5rem", align: "center", children: [_jsx(Center, { style: iconContainer, children: modalIcon }), _jsxs(Stack, { gap: "0.25rem", align: "center", children: [_jsx(Title, { variant: "cardHeader", align: "center", children: title || selectedVariant.title }), _jsx(Title, { variant: "cardSubheader", align: "center", children: message || selectedVariant.message })] })] }), _jsx(Center, { h: "100%", w: "100%", children: _jsxs(Group, { gap: "1rem", align: "center", children: [_jsx(Button, { onClick: handleCancel, variant: "secondary", children: cancelLabel || selectedVariant.cancelLabel }), _jsx(Button, { onClick: handleConfirm, variant: selectedVariant.buttonVariant, children: confirmLabel || selectedVariant.confirmLabel })] }) })] }) }));
-        };
-        modals.open({
-            children: _jsx(ConfirmModalContent, {}),
-            size,
-            styles: {
-                content: {
-                    borderRadius: '8px',
-                    border: `1px solid ${neutral[50]}`,
-                    boxShadow: '0px 0px 19px 0px #00000040',
-                },
-                header: {
-                    padding: '0.8rem',
-                },
-                close: {
-                    borderRadius: '16px',
-                    backgroundColor: neutral[50],
-                    width: '1.8rem',
-                    height: '1.8rem',
-                    '&:hover': {
-                        backgroundColor: neutral[50],
-                    },
-                    '&:active': {
-                        transform: 'none',
-                    },
-                },
-                body: {
-                    padding: '0 3.2rem 1.6rem 3.2rem',
-                },
-            },
-        });
-    };
-    const close = (modalId) => {
-        modals.close(modalId);
-    };
-    const closeAll = () => {
-        modals.closeAll();
-    };
-    return {
-        show,
-        close,
-        closeAll,
-    };
-};

package/dist/components/Info/Modals/InfoModal.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-import { modalVariants } from './variants';
-export declare const useInfoModal: () => {
-    show: (options: {
-        variant?: keyof typeof modalVariants;
-        title?: string;
-        message?: string;
-        icon?: React.ReactNode;
-        onConfirm?: () => void;
-        size?: string | number;
-    }) => void;
-    close: (modalId: string) => void;
-    closeAll: () => void;
-};
-//# sourceMappingURL=InfoModal.d.ts.map

package/dist/components/Info/Modals/InfoModal.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"InfoModal.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Modals/InfoModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAG3C,eAAO,MAAM,YAAY;oBACA;QACrB,OAAO,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;QACrC,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;QACvB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KACxB;qBA8EuB,MAAM;;CAa/B,CAAC"}