mui-design-system 0.0.40 → 0.0.41

package/dist/components/form/components/UFCheckbox.js

@@ -17,7 +17,7 @@ const UFCheckbox = ({ form, name, label, rules, error, helperText, withoutHelper
                         typography: {
                             ...props?.slotProps?.typography,
                         },
-                    }, control: _jsx(Checkbox, { color: "primary", checked: value, onChange: onChange, disabled: disabled, name: name, ...deepMerge(theme?.checkbox?.checkboxProps, itemProps, propsForCheckbox) }), label: label }), !withoutHelperText && (_jsx(Typography, { sx: {
+                    }, control: _jsx(Checkbox, { name: name, color: "primary", checked: value, onChange: onChange, disabled: disabled, ...deepMerge(theme?.checkbox?.checkboxProps, itemProps, propsForCheckbox) }), label: label }), !withoutHelperText && (_jsx(Typography, { sx: {
                         height: 23,
                         width: "max-content",
                         color: error ? "error.4" : "text.primary",

package/dist/mui/Checkbox/Checkbox.js

@@ -1,31 +1,77 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { keyframes } from '@mui/material/styles';
 import UnCheckedIcon from './assets/UnChekedIcon';
 import CheckedIcon from './assets/CheckedIcon';
 import IntermediateIcon from './assets/IntermediateIcon';
+const checkboxIconSize = {
+    small: 20,
+    medium: 24,
+    large: 32,
+};
+const checkboxRootSize = {
+    small: 34,
+    medium: 42,
+    large: 50,
+};
+const checkboxPop = keyframes `
+  0% { transform: scale(0.82); opacity: 0.4; }
+  65% { transform: scale(1.08); opacity: 1; }
+  100% { transform: scale(1); opacity: 1; }
+`;
+const drawCheckmark = keyframes `
+  from { stroke-dashoffset: 13; }
+  to { stroke-dashoffset: 0; }
+`;
+const drawIndeterminate = keyframes `
+  from { stroke-dashoffset: 8; }
+  to { stroke-dashoffset: 0; }
+`;
 export const MuiCheckbox = {
     defaultProps: {
+        size: 'medium',
         icon: _jsx(UnCheckedIcon, {}),
         checkedIcon: _jsx(CheckedIcon, {}),
         indeterminateIcon: _jsx(IntermediateIcon, {}),
     },
     styleOverrides: {
-        root: ({ theme, ownerState }) => ({
-            transition: 'transform 0.5s ease',
-            width: ownerState.size === 'small' ? '34px' : '42px',
-            height: ownerState.size === 'small' ? '34px' : '42px',
-            ':active': {
-                transform: 'scale(85%)',
-            },
-            '&.Mui-checked': {
-                fill: theme.palette[ownerState?.color ?? 'primary'].main,
-                stroke: theme.palette.text.primary,
-            },
-        }),
-        checked: ({ theme, ownerState }) => ({
-            fill: theme.palette[ownerState?.color ?? 'primary'].main,
-        }),
-        indeterminate: ({ theme, ownerState }) => ({
-            fill: theme.palette[ownerState?.color ?? 'primary'].main,
-        }),
+        root: ({ theme, ownerState }) => {
+            const size = ownerState.size ?? 'medium';
+            const iconSize = checkboxIconSize[size];
+            const rootSize = checkboxRootSize[size];
+            return {
+                color: theme.palette.divider,
+                padding: size === 'small' ? '7px' : '9px',
+                transition: 'transform 150ms ease',
+                width: rootSize,
+                height: rootSize,
+                '& svg': {
+                    width: iconSize,
+                    height: iconSize,
+                },
+                ':active': {
+                    transform: 'scale(85%)',
+                },
+                '&.Mui-checked, &.MuiCheckbox-indeterminate': {
+                    color: theme.palette[ownerState.color ?? 'primary'].main,
+                },
+                '&.Mui-checked svg, &.MuiCheckbox-indeterminate svg': {
+                    animation: `${checkboxPop} 180ms cubic-bezier(0.2, 0, 0, 1)`,
+                },
+                '&.Mui-checked svg path': {
+                    strokeDasharray: 13,
+                    animation: `${drawCheckmark} 220ms 40ms ease-out both`,
+                },
+                '&.MuiCheckbox-indeterminate svg path': {
+                    strokeDasharray: 8,
+                    animation: `${drawIndeterminate} 180ms 40ms ease-out both`,
+                },
+                '@media (prefers-reduced-motion: reduce)': {
+                    transition: 'none',
+                    '& svg, & svg path': {
+                        animation: 'none',
+                    },
+                },
+            };
+        },
     },
 };

package/dist/mui/Checkbox/assets/CheckedIcon.d.ts

@@ -1,8 +1,3 @@
-import { type SVGProps } from "react";
-type ColorTypes = "default" | "primary" | "secondary" | "error" | "info" | "success" | "warning";
-interface Props extends SVGProps<any> {
-    backgroundColor?: ColorTypes;
-    borderColor?: string;
-}
-declare const CheckedIcon: ({ borderColor, backgroundColor, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from 'react';
+declare const CheckedIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
 export default CheckedIcon;

package/dist/mui/Checkbox/assets/CheckedIcon.js

@@ -1,12 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useTheme } from "@mui/material";
-const CheckedIcon = ({ borderColor, backgroundColor, ...props }) => {
-    const theme = useTheme();
-    const svgBackgroundColor = backgroundColor
-        ? theme.palette[backgroundColor ?? "primary"].main
-        : "inherit";
-    const svgBorderColor = borderColor ?? "inherit";
-    const svgInnerElementColor = theme.palette.grey[1];
-    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: svgBackgroundColor || "none", viewBox: "0 0 24 24", ...props, children: [_jsx("path", { stroke: svgBorderColor || "#1A1A1A", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M9 22h6c5 0 7-2 7-7V9c0-5-2-7-7-7H9C4 2 2 4 2 9v6c0 5 2 7 7 7" }), _jsx("path", { stroke: svgInnerElementColor || "#1A1A1A", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "m7.75 12 2.83 2.83 5.67-5.66" })] }));
-};
+const CheckedIcon = (props) => (_jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, viewBox: '0 0 24 24', fill: 'none', ...props, children: [_jsx("rect", { width: 20, height: 20, x: 2, y: 2, rx: 3.5, fill: 'currentColor' }), _jsx("path", { d: 'm7.5 12 3 3 6-6', stroke: '#fff', strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2 })] }));
 export default CheckedIcon;

package/dist/mui/Checkbox/assets/IntermediateIcon.d.ts

@@ -1,8 +1,3 @@
 import { type SVGProps } from 'react';
-type ColorTypes = 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
-interface Props extends SVGProps<any> {
-    backgroundColor?: ColorTypes;
-    borderColor?: string;
-}
-declare const IntermediateIcon: ({ borderColor, backgroundColor, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const IntermediateIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
 export default IntermediateIcon;

package/dist/mui/Checkbox/assets/IntermediateIcon.js

@@ -1,10 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useTheme } from "@mui/material";
-const IntermediateIcon = ({ borderColor, backgroundColor, ...props }) => {
-    const theme = useTheme();
-    const svgInnerElementColor = theme.palette.background.paper;
-    const svgBorderColor = borderColor ?? theme.palette.text.primary;
-    const svgBackgroundColor = theme.palette[backgroundColor ?? 'primary'].main;
-    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: svgBackgroundColor || "none", viewBox: "0 0 24 24", ...props, children: [_jsx("path", { stroke: svgBorderColor || "#1A1A1A", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M9 22h6c5 0 7-2 7-7V9c0-5-2-7-7-7H9C4 2 2 4 2 9v6c0 5 2 7 7 7" }), _jsx("path", { stroke: svgInnerElementColor || "#1A1A1A", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M8 12h8M9 0" })] }));
-};
+const IntermediateIcon = (props) => (_jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, viewBox: '0 0 24 24', fill: 'none', ...props, children: [_jsx("rect", { width: 20, height: 20, x: 2, y: 2, rx: 3.5, fill: 'currentColor' }), _jsx("path", { d: 'M8 12h8', stroke: '#fff', strokeLinecap: 'round', strokeWidth: 2 })] }));
 export default IntermediateIcon;

package/dist/mui/Checkbox/assets/UnChekedIcon.d.ts

@@ -1,7 +1,3 @@
 import { type SVGProps } from 'react';
-interface Props extends SVGProps<any> {
-    backgroundColor?: 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
-    borderColor?: string;
-}
-declare const UnCheckedIcon: ({ backgroundColor, borderColor, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const UnCheckedIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
 export default UnCheckedIcon;

package/dist/mui/Checkbox/assets/UnChekedIcon.js

@@ -1,9 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useTheme } from "@mui/material";
-const UnCheckedIcon = ({ backgroundColor, borderColor, ...props }) => {
-    const theme = useTheme();
-    const svgBackgroundColor = backgroundColor ? theme.palette[backgroundColor ?? 'primary'].main : undefined;
-    const svgBorderColor = borderColor ?? theme.palette.text.primary;
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: svgBackgroundColor || "none", viewBox: "0 0 24 24", ...props, children: _jsx("path", { stroke: svgBorderColor || "#1A1A1A", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M9.3 21h5.4c4.5 0 6.3-1.8 6.3-6.3V9.3C21 4.8 19.2 3 14.7 3H9.3C4.8 3 3 4.8 3 9.3v5.4C3 19.2 4.8 21 9.3 21" }) }));
-};
+const UnCheckedIcon = (props) => (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, viewBox: '0 0 24 24', fill: 'none', ...props, children: _jsx("rect", { width: 19, height: 19, x: 2.5, y: 2.5, rx: 3.5, stroke: 'currentColor', strokeWidth: 1 }) }));
 export default UnCheckedIcon;

package/dist/theme/theme.js

@@ -27,6 +27,7 @@ import { MuiBreadcrumbs } from '../mui/BreadCrumbs/MuiBreadCrumbs';
 import { MuiDialog } from '../mui/Dialog/MuiDialog';
 import { breakpoints } from '../mui/breakpoints';
 import { MuiMenuItem } from '../mui/menu/MuiMenuItem';
+import { MuiCheckbox } from '../mui/Checkbox/Checkbox';
 const getDesignTokens = (mode) => ({
     mode,
     ...(mode === 'light' ? lightPalette : darkPalette),
@@ -49,6 +50,7 @@ export const themeOptions = (mode, isRtl) => ({
         MuiSwitch,
         MuiTooltip,
         MuiMenuItem,
+        MuiCheckbox,
         MuiTextField,
         MuiAccordion,
         MuiInputLabel,

package/dist/types/types.d.ts

@@ -34,6 +34,9 @@ declare module '@mui/material/Checkbox/Checkbox' {
     interface CheckboxProps {
         customColor?: string;
     }
+    interface CheckboxPropsSizeOverrides {
+        large: true;
+    }
 }
 declare module '@mui/material/Chip' {
     interface ChipOwnProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-design-system",
-  "version": "0.0.40",
+  "version": "0.0.41",
   "description": "MUI-based design system with theme, form components, and utilities",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -69,4 +69,4 @@
   "bugs": {
     "url": "https://github.com/MohammadPj/design-system/issues"
   }
-}
+}