@taiv/ui 1.12.0 → 1.14.0

package/dist/docs/hooks/Copy.stories.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCopy } from '../../hooks/useCopy';
+import { Button } from '../../components/Inputs/Buttons/Button/Button';
+import { IconCopy } from '@tabler/icons-react';
+const meta = {
+    title: 'Hooks/Copy',
+    tags: ['!dev'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        value: {
+            control: { type: 'text' },
+            description: 'The value to copy',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        label: {
+            control: { type: 'text' },
+            description: 'Optional label for what the value is',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        showNotification: {
+            control: { type: 'boolean' },
+            description: 'Show notification after copy',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
+        notificationMessage: {
+            control: { type: 'text' },
+            description: 'Custom notification message override - use this sparingly',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+    },
+};
+export default meta;
+const DefaultDemo = (args) => {
+    const { copy } = useCopy();
+    return (_jsxs(Button, { variant: "secondary", leftIcon: _jsx(IconCopy, {}), onClick: () => copy({
+            value: args.value,
+            label: args.label || undefined,
+            showNotification: args.showNotification,
+            notificationMessage: args.notificationMessage || undefined,
+        }), children: ["Copy ", args.label] }));
+};
+export const Default = {
+    args: {
+        value: '12345',
+        label: undefined,
+        showNotification: true,
+        notificationMessage: undefined,
+    },
+    render: (args) => _jsx(DefaultDemo, { ...args }),
+};

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

@@ -1 +1 @@
-{"version":3,"file":"useConfirmationModal.d.ts","sourceRoot":"","sources":["../../src/hooks/useConfirmationModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAInE,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,YAAY,CAAC;QAC1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;QACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;QACtB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KACxB;qBAwFuB,MAAM;;CAa/B,CAAC"}
+{"version":3,"file":"useConfirmationModal.d.ts","sourceRoot":"","sources":["../../src/hooks/useConfirmationModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAInE,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,YAAY,CAAC;QAC1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;QACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;QACtB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KACxB;qBAwFuB,MAAM;;CAa/B,CAAC"}

package/dist/hooks/useConfirmationModal.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { modals } from '@mantine/modals';
 import { neutral } from '../constants/colors';
+import { spacing } from '../constants/spacing';
 import { Title } from '../components/Typography/Title/Title';
 import { Stack } from '../components/Layout/Stack/Stack';
 import { Center } from '../components/Layout/Center/Center';
@@ -10,7 +11,7 @@ import { Button } from '../components/Inputs/Buttons/Button/Button';
 import { Group } from '../components/Layout/Group/Group';
 export const useConfirmationModal = () => {
     const show = (options) => {
-        const { variant = 'confirm', title, message, confirmLabel, cancelLabel, icon, onConfirm, onCancel, size = '40rem' } = options;
+        const { variant = 'confirm', title, message, confirmLabel, cancelLabel, icon, onConfirm, onCancel, size = '400px' } = options;
         const handleConfirm = () => {
             if (onConfirm)
                 onConfirm();
@@ -23,16 +24,16 @@ export const useConfirmationModal = () => {
         };
         const selectedVariant = modalVariants[variant];
         const iconContainer = {
-            width: '4.2rem',
-            height: '4.2rem',
+            width: '42px',
+            height: '42px',
             borderRadius: '50%',
             backgroundColor: selectedVariant.iconBackgroundColor,
             border: `2px solid ${selectedVariant.iconColor}`,
         };
         const coloredIcon = icon && React.cloneElement(icon, { color: icon.props.color || selectedVariant.iconColor });
-        const modalIcon = coloredIcon || _jsx("i", { className: selectedVariant.icon, style: { color: selectedVariant.iconColor, fontSize: '2rem' } });
+        const modalIcon = coloredIcon || _jsx("i", { className: selectedVariant.icon, style: { color: selectedVariant.iconColor, fontSize: '20px' } });
         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 })] }) })] }) }));
+            return (_jsx(Center, { h: "100%", w: "100%", children: _jsxs(Stack, { gap: "20px", h: "100%", w: "100%", align: "center", children: [_jsxs(Stack, { gap: spacing.lg, align: "center", children: [_jsx(Center, { style: iconContainer, children: modalIcon }), _jsxs(Stack, { gap: spacing.xxs, 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: "10px", 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, {}),
@@ -44,13 +45,13 @@ export const useConfirmationModal = () => {
                     boxShadow: '0px 0px 19px 0px #00000040',
                 },
                 header: {
-                    padding: '0.8rem',
+                    padding: spacing.sm,
                 },
                 close: {
                     borderRadius: '16px',
                     backgroundColor: neutral[50],
-                    width: '1.8rem',
-                    height: '1.8rem',
+                    width: '18px',
+                    height: '18px',
                     '&:hover': {
                         backgroundColor: neutral[50],
                     },
@@ -59,7 +60,7 @@ export const useConfirmationModal = () => {
                     },
                 },
                 body: {
-                    padding: '0 3.2rem 1.6rem 3.2rem',
+                    padding: `0 ${spacing.xxl} ${spacing.lg} ${spacing.xxl}`,
                 },
             },
         });

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

@@ -1 +1 @@
-{"version":3,"file":"useInfoModal.d.ts","sourceRoot":"","sources":["../../src/hooks/useInfoModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAGnE,eAAO,MAAM,YAAY;oBACA;QAAE,OAAO,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE;qBA8EpJ,MAAM;;CAa/B,CAAC"}
+{"version":3,"file":"useInfoModal.d.ts","sourceRoot":"","sources":["../../src/hooks/useInfoModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAGnE,eAAO,MAAM,YAAY;oBACA;QAAE,OAAO,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE;qBA8EpJ,MAAM;;CAa/B,CAAC"}

package/dist/hooks/useInfoModal.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { modals } from '@mantine/modals';
 import { neutral } from '../constants/colors';
+import { spacing } from '../constants/spacing';
 import { Title } from '../components/Typography/Title/Title';
 import { Stack } from '../components/Layout/Stack/Stack';
 import { Center } from '../components/Layout/Center/Center';
@@ -9,7 +10,7 @@ import { modalVariants } from '../components/Info/Modals/variants';
 import { Button } from '../components/Inputs/Buttons/Button/Button';
 export const useInfoModal = () => {
     const show = (options) => {
-        const { variant = 'info', title, message, icon, onConfirm, size = '35rem' } = options;
+        const { variant = 'info', title, message, icon, onConfirm, size = '350px' } = options;
         const handleConfirm = () => {
             if (onConfirm)
                 onConfirm();
@@ -17,16 +18,16 @@ export const useInfoModal = () => {
         };
         const selectedVariant = modalVariants[variant];
         const iconContainer = {
-            width: '4.2rem',
-            height: '4.2rem',
+            width: '42px',
+            height: '42px',
             borderRadius: '50%',
             backgroundColor: selectedVariant.iconBackgroundColor,
             border: `2px solid ${selectedVariant.iconColor}`,
         };
         const coloredIcon = icon && React.cloneElement(icon, { color: icon.props.color || selectedVariant.iconColor });
-        const modalIcon = coloredIcon || _jsx("i", { className: selectedVariant.icon, style: { color: selectedVariant.iconColor, fontSize: '2rem' } });
+        const modalIcon = coloredIcon || _jsx("i", { className: selectedVariant.icon, style: { color: selectedVariant.iconColor, fontSize: '20px' } });
         const InfoModalContent = () => {
-            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: _jsx(Button, { onClick: handleConfirm, variant: selectedVariant.buttonVariant, children: "OK" }) })] }) }));
+            return (_jsx(Center, { h: "100%", w: "100%", children: _jsxs(Stack, { gap: "20px", h: "100%", w: "100%", align: "center", children: [_jsxs(Stack, { gap: spacing.lg, align: "center", children: [_jsx(Center, { style: iconContainer, children: modalIcon }), _jsxs(Stack, { gap: spacing.xxs, 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: _jsx(Button, { onClick: handleConfirm, variant: selectedVariant.buttonVariant, children: "OK" }) })] }) }));
         };
         modals.open({
             children: _jsx(InfoModalContent, {}),
@@ -38,13 +39,13 @@ export const useInfoModal = () => {
                     boxShadow: '0px 0px 19px 0px #00000040',
                 },
                 header: {
-                    padding: '0.8rem',
+                    padding: spacing.sm,
                 },
                 close: {
                     borderRadius: '16px',
                     backgroundColor: neutral[50],
-                    width: '1.8rem',
-                    height: '1.8rem',
+                    width: '18px',
+                    height: '18px',
                     '&:hover': {
                         backgroundColor: neutral[50],
                     },
@@ -53,7 +54,7 @@ export const useInfoModal = () => {
                     },
                 },
                 body: {
-                    padding: '0 3.2rem 1.6rem 3.2rem',
+                    padding: `0 ${spacing.xxl} ${spacing.lg} ${spacing.xxl}`,
                 },
             },
         });

package/dist/hooks/useMediaQuery.d.ts

@@ -1,7 +1,7 @@
 import { useMediaQuery as useMantineMediaQuery } from '@mantine/hooks';
-import { BREAKPOINTS } from '../constants/breakpoints';
+import { breakpoints } from '../constants/breakpoints';
 export declare const useMediaQuery: typeof useMantineMediaQuery;
-export declare const useScreenSize: () => keyof typeof BREAKPOINTS;
+export declare const useScreenSize: () => keyof typeof breakpoints;
 export declare const useMobile: () => boolean;
 export declare const useTablet: () => boolean;
 export declare const useLaptop: () => boolean;

package/dist/hooks/useMediaQuery.js

@@ -1,5 +1,5 @@
 import { useMediaQuery as useMantineMediaQuery } from '@mantine/hooks';
-import { BREAKPOINTS } from '../constants/breakpoints';
+import { breakpoints } from '../constants/breakpoints';
 export const useMediaQuery = useMantineMediaQuery;
 export const useScreenSize = () => {
     const isMobile = useMobile();
@@ -16,8 +16,8 @@ export const useScreenSize = () => {
         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)`);
+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,24 +1,5 @@
 {
-  "name": "@taiv/ui",
-  "version": "1.12.0",
   "author": "Taiv",
-  "description": "Taiv's web UI Toolkit built on Mantine v6",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/alborz-taiv/taiv-ui"
-  },
-  "scripts": {
-    "build": "tsc",
-    "dev": "npm link && tsc --watch",
-    "clean": "rm -rf dist",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@mantine/core": "^6.0.0",
@@ -26,29 +7,59 @@
     "@mantine/hooks": "^6.0.0",
     "@mantine/modals": "^6.0.0",
     "@mantine/notifications": "^6.0.0",
-    "@tabler/icons-react": "^2.47.0",
+    "@tabler/icons-react": "^3.41.1",
     "dayjs": "^1.11.18",
     "recharts": "^2.8.0"
   },
-  "peerDependencies": {
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
-  },
+  "description": "Taiv's web UI Toolkit built on Mantine v6",
   "devDependencies": {
-    "@storybook/addon-docs": "^9.1.10",
-    "@storybook/addon-onboarding": "^9.1.10",
-    "@storybook/react-vite": "^9.1.10",
+    "@biomejs/biome": "2.4",
+    "@storybook/addon-docs": "^10.3.3",
+    "@storybook/addon-onboarding": "^10.3.3",
+    "@storybook/react-vite": "^10.3.3",
     "@types/react": "^17.0.87",
     "@types/react-dom": "^17.0.26",
     "chromatic": "^13.3.0",
-    "storybook": "^9.1.10",
+    "storybook": "^10.3.3",
     "typescript": "^5.0.2"
   },
   "exports": {
     ".": "./dist/components/index.js",
-    "./hooks": "./dist/hooks/index.js",
     "./constants": "./dist/constants/index.js",
-    "./utils": "./dist/utils/index.js",
-    "./types": "./dist/types/index.js"
-  }
+    "./hooks": "./dist/hooks/index.js",
+    "./types": "./dist/types/index.js",
+    "./utils": "./dist/utils/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "name": "@taiv/ui",
+  "peerDependencies": {
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/alborz-taiv/taiv-ui"
+  },
+  "scripts": {
+    "assist": "biome check --linter-enabled=false --formatter-enabled=false src",
+    "assist:fix": "biome check --linter-enabled=false --formatter-enabled=false --write src",
+    "biome:check": "biome check src",
+    "biome:check:path": "biome check",
+    "biome:fix": "biome check --write src",
+    "biome:fix:path": "biome check --write",
+    "build": "tsc",
+    "build-storybook": "storybook build",
+    "clean": "rm -rf dist",
+    "dev": "npm link && tsc --watch",
+    "format": "biome check --linter-enabled=false --assist-enabled=false src",
+    "format:fix": "biome check --linter-enabled=false --assist-enabled=false --write src",
+    "lint": "biome check --formatter-enabled=false --assist-enabled=false src",
+    "lint:fix": "biome check --formatter-enabled=false --assist-enabled=false --write src",
+    "storybook": "storybook dev -p 6006"
+  },
+  "types": "dist/index.d.ts",
+  "version": "1.14.0"
 }