@zesty-io/material 0.12.0 → 0.12.1

package/cjs/theme/palette.js

@@ -1,138 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const palette = {
-    primary: {
-        main: "#FF5D03",
-        dark: "#EC4A0A",
-        light: "#FD853A",
-    },
-    success: {
-        main: "#12B76A",
-        dark: "#027A48",
-        light: "#D1FADF",
-    },
-    warning: {
-        main: "#F79009",
-        dark: "B54708",
-        light: "#FEF0C7",
-    },
-    error: {
-        main: "#F04438",
-        dark: "#B42318",
-        light: "#FECDCA",
-    },
-    info: {
-        main: "#0BA5EC",
-        dark: "#026AA2",
-        light: "#7CD4FD",
-    },
-    text: {
-        primary: "#101828",
-        secondary: "#475467",
-    },
-    grey: {
-        50: "#F9FAFB",
-        100: "#F2F4F7",
-        200: "#E4E7EC",
-        300: "#D0D5DD",
-        400: "#98A2B3",
-        500: "#667085",
-        600: "#475467",
-        700: "#344054",
-        800: "#1D2939",
-        900: "#101828",
-    },
-    deepPurple: {
-        50: '#F8F9FC',
-        100: '#EAECF5',
-        200: '#C8CCE5',
-        300: '#9EA5D1',
-        400: "#4E5BA6",
-        500: '#4E5BA6',
-        600: '#3E4784',
-        700: '#363F72',
-        800: '#293056',
-        900: '#101323'
-    },
-    deepOrange: {
-        50: "#FFF6ED",
-        100: "#FFEAD5",
-        200: "#FDDCAB",
-        300: "#FEB273",
-        400: "#FD853A",
-        500: "#FF5C08",
-        600: "#EC4A0A",
-        700: "#C4320A",
-        800: "#9C2A10",
-        900: "#7E2410",
-    },
-    red: {
-        50: '#FEF3F2',
-        100: '#FEE4E2',
-        200: '#FECDCA',
-        300: '#FDA29B',
-        400: '#F97066',
-        500: '#F04438',
-        600: '#D92D20',
-        700: '#B42318',
-        800: '#912018',
-        900: '#7A271A',
-    },
-    pink: {
-        50: '#FDF2FA',
-        100: '#FCE7F6',
-        200: '#FCCEEE',
-        300: '#FAA7E0',
-        400: "#F670C7",
-        500: '#EE46BC',
-        600: '#DD2590',
-        700: '#C11574',
-        800: '#9E165F',
-        900: '#851651',
-    },
-    blue: {
-        50: '#F0F9FF',
-        100: "#E0F2FE",
-        200: '#B9E6FE',
-        300: '#7CD4FD',
-        400: "#36BFFA",
-        500: '#0BA5EC',
-        600: '#0086C9',
-        700: '#026AA2',
-        800: '#065986',
-        900: '#0B4A6F',
-    },
-    green: {
-        50: '#ECFDF3',
-        100: "#D1FADF",
-        200: '#A6F4C5',
-        300: '#6CE9A6',
-        400: "#32D583",
-        500: '#12B76A',
-        600: '#039855',
-        700: '#027A48',
-        800: '#05603A',
-        900: '#054F31',
-    },
-    purple: {
-        50: '#F3E5F5',
-        100: '#E1BEE7',
-        200: '#CE93D8',
-        300: '#BA68C8',
-        400: '#AB47BC',
-        500: '#9C27B0',
-        600: '#8E24AA',
-        700: '#7B1FA2',
-        800: '#6A1B9A',
-        900: '#4A148C',
-    },
-    action: {
-        active: "rgba(16, 24, 40, 0.40)",
-        hover: "rgba(16, 24, 40, 0.04)",
-        selected: "rgba(16, 24, 40, 0.08)",
-        disabled: "rgba(16, 24, 40, 0.26)",
-        disabledBackground: "rgba(16, 24, 40, 0.12)",
-        focus: "rgba(16, 24, 40, 0.12)",
-    }
-};
-exports.default = palette;

package/cjs/theme/typography.d.ts

@@ -1,9 +0,0 @@
-import { TypographyVariantsOptions } from '@mui/material/styles';
-import { TypographyStyleOptions } from '@mui/material/styles/createTypography';
-declare module '@mui/material/styles' {
-    interface TypographyVariantsOptions {
-        body3?: TypographyStyleOptions;
-    }
-}
-declare const typography: TypographyVariantsOptions;
-export default typography;

package/cjs/theme/typography.js

@@ -1,59 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const typography = {
-    fontFamily: "'Mulish'",
-    h1: {
-        fontSize: "36px",
-        lineHeight: "44px",
-    },
-    h2: {
-        fontSize: "32px",
-        lineHeight: "40px",
-    },
-    h3: {
-        fontSize: "28px",
-        lineHeight: "36px",
-    },
-    h4: {
-        fontSize: "24px",
-        lineHeight: "32px",
-    },
-    h5: {
-        fontSize: "20px",
-        lineHeight: "28px",
-    },
-    h6: {
-        fontSize: "16px",
-        lineHeight: "22px",
-    },
-    body1: {
-        fontSize: '16px',
-        lineHeight: '24px',
-    },
-    body2: {
-        fontSize: '14px',
-        lineHeight: '20px',
-    },
-    body3: {
-        fontSize: '12px',
-        lineHeight: '18px',
-        letterSpacing: '0.15px',
-    },
-    subtitle1: {
-        fontSize: '16px',
-        lineHeight: "28px",
-    },
-    subtitle2: {
-        fontSize: '14px',
-        lineHeight: "22px",
-    },
-    caption: {
-        fontSize: '12px',
-        lineHeight: "20px",
-    },
-    overline: {
-        fontSize: "12px",
-        letterSpacing: "1px",
-    },
-};
-exports.default = typography;

package/cjs/utils/virtualization.d.ts

@@ -1,2 +0,0 @@
-import * as React from 'react';
-export declare const ListboxComponent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLDivElement>>;

package/cjs/utils/virtualization.js

@@ -1,66 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListboxComponent = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const React = require("react");
-const useMediaQuery_1 = require("@mui/material/useMediaQuery");
-const ListSubheader_1 = require("@mui/material/ListSubheader");
-const styles_1 = require("@mui/material/styles");
-const react_window_1 = require("react-window");
-const Typography_1 = require("@mui/material/Typography");
-const LISTBOX_PADDING = 8; // px
-function renderRow(props) {
-    const { data, index, style } = props;
-    const dataSet = data[index];
-    const inlineStyle = {
-        ...style,
-        top: style.top + LISTBOX_PADDING,
-    };
-    if (dataSet.hasOwnProperty('group')) {
-        return ((0, jsx_runtime_1.jsx)(ListSubheader_1.default, { component: "div", style: inlineStyle, children: dataSet.group }, dataSet.key));
-    }
-    return ((0, jsx_runtime_1.jsx)(Typography_1.default, { component: "li", ...dataSet[0], noWrap: true, style: inlineStyle, children: dataSet[1] }));
-}
-const OuterElementContext = React.createContext({});
-const OuterElementType = React.forwardRef((props, ref) => {
-    const outerProps = React.useContext(OuterElementContext);
-    return (0, jsx_runtime_1.jsx)("div", { ref: ref, ...props, ...outerProps });
-});
-function useResetCache(data) {
-    const ref = React.useRef(null);
-    React.useEffect(() => {
-        if (ref.current != null) {
-            ref.current.resetAfterIndex(0, true);
-        }
-    }, [data]);
-    return ref;
-}
-// Adapter for react-window
-exports.ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) {
-    const { children, ...other } = props;
-    const itemData = [];
-    children.forEach((item) => {
-        itemData.push(item);
-        itemData.push(...(item.children || []));
-    });
-    const theme = (0, styles_1.useTheme)();
-    const smUp = (0, useMediaQuery_1.default)(theme.breakpoints.up('sm'), {
-        noSsr: true,
-    });
-    const itemCount = itemData.length;
-    const itemSize = smUp ? 36 : 48;
-    const getChildSize = (child) => {
-        if (child.hasOwnProperty('group')) {
-            return 48;
-        }
-        return itemSize;
-    };
-    const getHeight = () => {
-        if (itemCount > 8) {
-            return 8 * itemSize;
-        }
-        return itemData.map(getChildSize).reduce((a, b) => a + b, 0);
-    };
-    const gridRef = useResetCache(itemCount);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, children: (0, jsx_runtime_1.jsx)(OuterElementContext.Provider, { value: other, children: (0, jsx_runtime_1.jsx)(react_window_1.VariableSizeList, { itemData: itemData, height: getHeight() + 2 * LISTBOX_PADDING, width: "100%", ref: gridRef, outerElementType: OuterElementType, innerElementType: "ul", itemSize: (index) => getChildSize(itemData[index]), overscanCount: 5, itemCount: itemCount, children: renderRow }) }) }));
-});

package/es/ConfirmModal/ConfirmModal.stories.d.ts

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

package/es/ConfirmModal/ConfirmModal.stories.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Button } from '@mui/material';
-import ConfirmDialog from '.';
-export default {
-    title: 'ConfirmDialog',
-    component: ConfirmDialog,
-    argType: {},
-};
-const Template = (args) => {
-    const [open, setOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "contained", onClick: () => setOpen(true), children: "Click me to open" }), _jsx(ConfirmDialog, { ...args, open: open, callback: (confirmed) => setOpen(false) })] }));
-};
-export const Default = Template.bind({});
-Default.args = {
-    title: 'Confirm modal title',
-    content: 'Confirm modal content',
-};
-export const CustomChildren = Template.bind({});
-CustomChildren.args = {
-    title: 'Confirm modal title',
-    content: 'Confirm modal content',
-    children: _jsxs(_Fragment, { children: [_jsx(Button, { color: "error", variant: "contained", children: "Custom 1" }), _jsx(Button, { color: "success", variant: "contained", children: "Custom 2" })] })
-};

package/es/ConfirmModal/index.d.ts

@@ -1,18 +0,0 @@
-import { ReactNode } from 'react';
-import { DialogProps } from '@mui/material/Dialog';
-export interface ConfirmDialogProps extends Omit<DialogProps, 'title'> {
-    /**
-     * Title of confirm dialog
-     */
-    title: string | ReactNode;
-    /**
-     * Content of confirm dialog
-     */
-    content: string | ReactNode;
-    /**
-     * Callback of confirm dialog
-     */
-    callback: (confirmed: boolean) => void;
-}
-declare const ConfirmDialog: ({ title, content, onClose, children, callback, ...props }: ConfirmDialogProps) => JSX.Element;
-export default ConfirmDialog;

package/es/ConfirmModal/index.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
-import { Button } from '@mui/material';
-const ConfirmDialog = ({ title, content, onClose, children, callback, ...props }) => {
-    return (_jsxs(Dialog, { ...props, children: [_jsx(DialogTitle, { children: title }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: content }) }), children ? _jsx(DialogActions, { children: children }) : (_jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", onClick: () => callback(false), children: "No" }), _jsx(Button, { variant: "contained", onClick: () => callback(true), autoFocus: true, children: "Yes" })] }))] }));
-};
-export default ConfirmDialog;

package/es/FieldTypeDropdown/FieldTypeDropwdon.stories.d.ts

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

package/es/FieldTypeDropdown/FieldTypeDropwdon.stories.js

@@ -1,35 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import FieldTypeDropdown from './';
-export default {
-    title: 'FieldTypeDropdown',
-    component: FieldTypeDropdown,
-    argType: {},
-};
-const options = [
-    {
-        value: 'option1',
-        label: 'Option 1',
-    },
-    {
-        value: 'option2',
-        label: 'Option 2',
-    },
-    {
-        value: 'option3',
-        label: 'Option 3',
-    },
-];
-const Template = (args) => {
-    const [value, setValue] = useState('');
-    const handleOnChange = (e) => {
-        setValue(e.target.value);
-    };
-    return (_jsx(FieldTypeDropdown, { ...args, value: value, onChange: handleOnChange, options: options }));
-};
-export const Default = Template.bind({});
-Default.args = {
-    placeholder: 'Placeholder Text...',
-    label: 'Dropdown label',
-    helperText: 'Dropdown helper text',
-};

package/es/FieldTypeDropdown/index.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import { OutlinedTextFieldProps } from '@mui/material/TextField';
-interface Option {
-    label: string;
-    value: any;
-}
-export interface FieldTypeDropdownProps extends Omit<OutlinedTextFieldProps, 'variant'> {
-    options: Option[];
-}
-declare const FieldTypeDropdown: ({ label, options, required, ...props }: FieldTypeDropdownProps) => JSX.Element;
-export default FieldTypeDropdown;

package/es/FieldTypeDropdown/index.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MenuItem } from '@mui/material';
-import MuiTextField from '@mui/material/TextField';
-import { FormControl, FormLabel } from '@mui/material';
-const FieldTypeDropdown = ({ label, options, required, ...props }) => {
-    return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsx(FormLabel, { children: label }), _jsxs(MuiTextField, { size: "small", variant: 'outlined', select: true, SelectProps: {
-                    displayEmpty: true,
-                }, ...props, children: [_jsx(MenuItem, { value: '', children: "- None -" }, ''), options.map((option) => (_jsx(MenuItem, { value: option.value, children: option.label }, option.value)))] })] }));
-};
-export default FieldTypeDropdown;

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

@@ -1,4 +0,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>;

package/es/stories/Theme.stories.js

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