@zesty-io/material 0.6.6 → 0.9.0

package/es/FieldTypeText/index.d.ts

@@ -1,10 +1,10 @@
-import { OutlinedTextFieldProps } from '@mui/material/TextField';
-import { ReactNode } from 'react';
-export interface FieldTypeTextProps extends Omit<OutlinedTextFieldProps, 'variant'> {
+import { OutlinedTextFieldProps } from "@mui/material/TextField";
+import { ReactNode } from "react";
+export interface FieldTypeTextProps extends Omit<OutlinedTextFieldProps, "variant"> {
     /**
-    * Max length of the field
-    * @default 150
-    */
+     * Max length of the field
+     * @default 150
+     */
     maxLength?: number;
     value: string;
     endLabel?: ReactNode;

package/es/FieldTypeText/index.js

@@ -1,9 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import MuiTextField from '@mui/material/TextField';
-import { FormControl, FormLabel, Box, InputAdornment } from '@mui/material';
+import MuiTextField from "@mui/material/TextField";
+import { FormControl, FormLabel, Box, InputAdornment } from "@mui/material";
 const FieldTypeText = ({ label, maxLength = 150, value, helperText, required, endLabel, ...props }) => {
-    return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsxs(FormLabel, { sx: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', '& .MuiFormLabel-asterisk': { order: 2 } }, children: [_jsx(Box, { sx: { order: 1 }, children: label }), _jsx(Box, { sx: { order: 3, flex: 1, textAlign: 'right' }, children: endLabel })] }), _jsx(MuiTextField, { size: "small", variant: 'outlined', value: value, error: value?.length > maxLength, helperText: value?.length > maxLength ? 'Your input is over the specified limit' : helperText, InputProps: {
-                    endAdornment: (_jsxs(InputAdornment, { position: "end", sx: { fontSize: '14px' }, children: [value?.length, "/", maxLength] })),
+    return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsxs(FormLabel, { sx: {
+                    lineHeight: "inherit",
+                    fontSize: "inherit",
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    "& .MuiFormLabel-asterisk": { order: 2 },
+                    mb: 0.5,
+                }, children: [_jsx(Box, { sx: { order: 1 }, children: label }), _jsx(Box, { sx: { order: 3, flex: 1, textAlign: "right" }, children: endLabel })] }), _jsx(MuiTextField, { size: "small", variant: "outlined", value: value, error: value?.length > maxLength, helperText: value?.length > maxLength
+                    ? "Your input is over the specified limit"
+                    : helperText, InputProps: {
+                    endAdornment: (_jsxs(InputAdornment, { position: "end", sx: { fontSize: "14px" }, children: [value?.length, "/", maxLength] })),
                 }, ...props })] }));
 };
 export default FieldTypeText;

package/es/IconButton/IconButton.stories.d.ts

@@ -0,0 +1,5 @@
+import { Story, Meta } from "@storybook/react/types-6-0";
+import { Props } from "./";
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const Default: Story<Props>;

package/es/IconButton/IconButton.stories.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconButton } from "./";
+export default {
+    title: "IconButton",
+    component: IconButton,
+    argType: {},
+};
+const Template = (args) => {
+    return _jsx(IconButton, {});
+};
+export const Default = Template.bind({});

package/es/IconButton/index.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+export declare type Props = {
+    variant?: "standard" | "contained";
+};
+export declare const IconButton: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
+    color?: "error" | "inherit" | "primary" | "secondary" | "info" | "success" | "warning" | "default" | undefined;
+    disabled?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    edge?: false | "start" | "end" | undefined;
+    size?: "small" | "medium" | "large" | "xsmall" | "xxsmall" | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "color" | "disabled" | "size" | "sx" | "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & Props, {}, {}>;

package/es/IconButton/index.js

@@ -0,0 +1,15 @@
+import { IconButton as IconButtonBase } from "@mui/material";
+import { styled } from "@mui/material/styles";
+export const IconButton = styled(IconButtonBase)(({ theme, variant = "standard", color = "inherit" }) => {
+    if (variant === "standard") {
+        return {};
+    }
+    const colorVariant = color === "default" || color === "inherit" ? "primary" : color;
+    return {
+        backgroundColor: theme.palette[colorVariant].main,
+        color: theme.palette.common.white,
+        "&:hover": {
+            backgroundColor: theme.palette[colorVariant].dark,
+        },
+    };
+});

package/es/LegacyTheme/index.d.ts

@@ -1,3 +1,2 @@
-import { Theme } from "@mui/material/styles";
-declare let theme: Theme;
+declare let theme: import("@mui/material/styles").Theme;
 export default theme;

package/es/LegacyTheme/index.js

@@ -20,6 +20,15 @@ theme = createTheme(theme, {
             styleOverrides: {
                 root: {
                     minWidth: "auto",
+                    boxShadow: "none",
+                    textTransform: "none",
+                },
+            },
+        },
+        MuiButtonGroup: {
+            styleOverrides: {
+                root: {
+                    boxShadow: "none",
                 },
             },
         },
@@ -67,17 +76,6 @@ theme = createTheme(theme, {
                 },
             },
         },
-        MuiToggleButton: {
-            styleOverrides: {
-                root: ({ ownerState, theme }) => ({
-                    backgroundColor: `${theme.palette[ownerState.color].contrastText} !important`,
-                    ...(ownerState.selected && {
-                        color: `${theme.palette[ownerState.color].contrastText} !important`,
-                        backgroundColor: `${theme.palette[ownerState.color].main} !important`,
-                    }),
-                }),
-            },
-        },
         MuiCssBaseline: {
             styleOverrides: {
                 body: {
@@ -97,6 +95,52 @@ theme = createTheme(theme, {
                 },
             },
         },
+        MuiOutlinedInput: {
+            styleOverrides: {
+                root: {
+                    padding: "0px 8px",
+                    borderRadius: "8px",
+                    backgroundColor: theme.palette.common.white,
+                    "&.Mui-disabled .MuiOutlinedInput-notchedOutline": {
+                        borderColor: "#F2F4F7",
+                    },
+                    "&:hover .MuiOutlinedInput-notchedOutline": {
+                        borderColor: "#F2F4F7",
+                    },
+                    "&.Mui-focused:hover .MuiOutlinedInput-notchedOutline": {
+                        borderColor: "#FF5D0A",
+                    },
+                },
+                input: {
+                    padding: "10px 0px",
+                    ":read-only": {
+                        color: "#475467",
+                    },
+                },
+                sizeSmall: {
+                    input: {
+                        padding: "8px 0px",
+                    },
+                },
+                notchedOutline: {
+                    borderColor: "#F2F4F7",
+                },
+            },
+        },
+        MuiLink: {
+            styleOverrides: {
+                root: {
+                    color: theme.palette.info.dark,
+                    textDecorationColor: theme.palette.info.main,
+                    "&:hover": {
+                        textDecorationColor: theme.palette.info.dark,
+                    },
+                },
+            },
+            defaultProps: {
+                underline: "hover",
+            },
+        },
     },
 });
 export default theme;

package/es/LegacyTheme/palette.d.ts

@@ -1,3 +1,3 @@
-import { PaletteOptions } from '@mui/material/styles';
+import { PaletteOptions } from "@mui/material/styles";
 declare const palette: PaletteOptions;
 export default palette;

package/es/LegacyTheme/palette.js

@@ -1,23 +1,23 @@
 const palette = {
     primary: {
-        main: '#404759',
-        contrastText: '#ffffff',
+        main: "#404759",
+        contrastText: "#ffffff",
     },
     secondary: {
-        main: '#497edf',
-        contrastText: '#ffffff',
+        main: "#497edf",
+        contrastText: "#ffffff",
     },
     success: {
-        main: '#75bf25',
-        contrastText: '#ffffff',
+        main: "#75bf25",
+        contrastText: "#ffffff",
     },
     warning: {
-        main: '#f17829',
-        contrastText: '#ffffff',
+        main: "#f17829",
+        contrastText: "#ffffff",
     },
     error: {
-        main: '#e53c05',
-        contrastText: '#ffffff',
+        main: "#e53c05",
+        contrastText: "#ffffff",
     },
 };
 export default palette;

package/es/icons/Home.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SvgIconProps } from "@mui/material";
+export declare const Home: (props: SvgIconProps) => JSX.Element;

package/es/icons/Home.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SvgIcon } from "@mui/material";
+export const Home = (props) => (_jsx(SvgIcon, { ...props, children: _jsx("path", { d: "M5.5 20.625C5.08333 20.625 4.72917 20.4792 4.4375 20.1875C4.14583 19.8958 4 19.5417 4 19.125V9.375C4 9.14167 4.05417 8.91667 4.1625 8.7C4.27083 8.48333 4.41667 8.30833 4.6 8.175L11.1 3.3C11.2333 3.2 11.375 3.125 11.525 3.075C11.675 3.025 11.8333 3 12 3C12.1667 3 12.325 3.025 12.475 3.075C12.625 3.125 12.7667 3.2 12.9 3.3L19.4 8.175C19.5833 8.30833 19.7292 8.48333 19.8375 8.7C19.9458 8.91667 20 9.14167 20 9.375V19.125C20 19.5417 19.8542 19.8958 19.5625 20.1875C19.2708 20.4792 18.9167 20.625 18.5 20.625H14V13.625H10V20.625H5.5Z", fill: "currentColor" }) }));

package/es/icons/index.d.ts

@@ -7,3 +7,4 @@ export { OneToOne } from "./OneToOne";
 export { EditNote } from "./EditNote";
 export { FileTable } from "./FileTable";
 export { Brain } from "./Brain";
+export { Home } from "./Home";

package/es/icons/index.js

@@ -7,3 +7,4 @@ export { OneToOne } from "./OneToOne";
 export { EditNote } from "./EditNote";
 export { FileTable } from "./FileTable";
 export { Brain } from "./Brain";
+export { Home } from "./Home";

package/es/index.d.ts

@@ -1,15 +1,16 @@
-export { default as legacyTheme } from './LegacyTheme';
-export { default as theme } from './theme';
-export { default as FieldTypeText } from './FieldTypeText';
-export { default as FieldTypeSort } from './FieldTypeSort';
-export { default as FieldTypeUrl } from './FieldTypeUrl';
-export { default as FieldTypeDate } from './FieldTypeDate';
-export { default as FieldTypeDateTime } from './FieldTypeDateTime';
-export { default as FieldTypeColor } from './FieldTypeColor';
-export { default as FieldTypeNumber } from './FieldTypeNumber';
-export { default as FieldTypeOneToOne } from './FieldTypeOneToOne';
-export { default as FieldTypeOneToMany } from './FieldTypeOneToMany';
-export { default as CopyButton } from './CopyButton';
-export { default as ConfirmDialog } from './ConfirmDialog';
-export { default as VirtualizedAutocomplete } from './VitualizedAutocomplete';
-export * from './icons';
+export { default as legacyTheme } from "./LegacyTheme";
+export { theme, darkTheme } from "./theme";
+export { default as FieldTypeText } from "./FieldTypeText";
+export { default as FieldTypeSort } from "./FieldTypeSort";
+export { default as FieldTypeUrl } from "./FieldTypeUrl";
+export { default as FieldTypeDate } from "./FieldTypeDate";
+export { default as FieldTypeDateTime } from "./FieldTypeDateTime";
+export { default as FieldTypeColor } from "./FieldTypeColor";
+export { default as FieldTypeNumber } from "./FieldTypeNumber";
+export { default as FieldTypeOneToOne } from "./FieldTypeOneToOne";
+export { default as FieldTypeOneToMany } from "./FieldTypeOneToMany";
+export { default as CopyButton } from "./CopyButton";
+export { default as ConfirmDialog } from "./ConfirmDialog";
+export { default as VirtualizedAutocomplete } from "./VitualizedAutocomplete";
+export { IconButton } from "./IconButton";
+export * from "./icons";

package/es/index.js

@@ -1,15 +1,16 @@
-export { default as legacyTheme } from './LegacyTheme';
-export { default as theme } from './theme';
-export { default as FieldTypeText } from './FieldTypeText';
-export { default as FieldTypeSort } from './FieldTypeSort';
-export { default as FieldTypeUrl } from './FieldTypeUrl';
-export { default as FieldTypeDate } from './FieldTypeDate';
-export { default as FieldTypeDateTime } from './FieldTypeDateTime';
-export { default as FieldTypeColor } from './FieldTypeColor';
-export { default as FieldTypeNumber } from './FieldTypeNumber';
-export { default as FieldTypeOneToOne } from './FieldTypeOneToOne';
-export { default as FieldTypeOneToMany } from './FieldTypeOneToMany';
-export { default as CopyButton } from './CopyButton';
-export { default as ConfirmDialog } from './ConfirmDialog';
-export { default as VirtualizedAutocomplete } from './VitualizedAutocomplete';
-export * from './icons';
+export { default as legacyTheme } from "./LegacyTheme";
+export { theme, darkTheme } from "./theme";
+export { default as FieldTypeText } from "./FieldTypeText";
+export { default as FieldTypeSort } from "./FieldTypeSort";
+export { default as FieldTypeUrl } from "./FieldTypeUrl";
+export { default as FieldTypeDate } from "./FieldTypeDate";
+export { default as FieldTypeDateTime } from "./FieldTypeDateTime";
+export { default as FieldTypeColor } from "./FieldTypeColor";
+export { default as FieldTypeNumber } from "./FieldTypeNumber";
+export { default as FieldTypeOneToOne } from "./FieldTypeOneToOne";
+export { default as FieldTypeOneToMany } from "./FieldTypeOneToMany";
+export { default as CopyButton } from "./CopyButton";
+export { default as ConfirmDialog } from "./ConfirmDialog";
+export { default as VirtualizedAutocomplete } from "./VitualizedAutocomplete";
+export { IconButton } from "./IconButton";
+export * from "./icons";

package/es/theme/Theme.stories.d.ts

@@ -1,4 +1,5 @@
-import { Story, Meta } from '@storybook/react/types-6-0';
+import { Story, Meta } from "@storybook/react/types-6-0";
 declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
 export default _default;
-export declare const Default: Story<import("@storybook/react/types-6-0").Args>;
+export declare const light: Story<import("@storybook/react/types-6-0").Args>;
+export declare const dark: Story<import("@storybook/react/types-6-0").Args>;

package/es/theme/Theme.stories.js

@@ -1,10 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import ReactJson from 'react-json-view';
-import theme from '.';
+import ReactJson from "react-json-view";
+import { darkTheme, theme } from ".";
 export default {
-    title: 'Theme',
+    title: "Theme",
 };
-const Template = (args) => {
-    return (_jsx(ReactJson, { src: theme }));
+const LightTheme = (args) => {
+    return _jsx(ReactJson, { src: theme });
 };
-export const Default = Template.bind({});
+const DarkTheme = (args) => {
+    return _jsx(ReactJson, { src: darkTheme });
+};
+export const light = LightTheme.bind({});
+export const dark = DarkTheme.bind({});

package/es/theme/index.d.ts

@@ -1,4 +1,3 @@
-import { Theme } from "@mui/material/styles";
 declare module "@mui/material/styles" {
     interface Palette {
         border: string;
@@ -7,5 +6,16 @@ declare module "@mui/material/styles" {
         typography: TypographyVariantsOptions;
     }
 }
-declare let theme: Theme;
-export default theme;
+declare module "@mui/material/IconButton" {
+    interface IconButtonPropsSizeOverrides {
+        xsmall: true;
+        xxsmall: true;
+    }
+}
+declare module "@mui/material/Button" {
+    interface ButtonPropsSizeOverrides {
+        xsmall: true;
+    }
+}
+export declare let theme: import("@mui/material/styles").Theme;
+export declare let darkTheme: import("@mui/material/styles").Theme;