@memori.ai/memori-react 1.0.0-alpha.1

package/esm/components/ui/Drawer.css

@@ -0,0 +1,138 @@
+.memori-drawer {
+    position: relative;
+    z-index: 60;
+}
+
+.memori-drawer--backdrop {
+    position: fixed;
+    z-index: 40;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.3);
+}
+
+.memori-drawer--container {
+    position: fixed;
+    z-index: 50;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow-y: auto;
+}
+
+.memori-drawer--container-scrollable {
+    display: flex;
+    min-height: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.memori-drawer--panel {
+    position: relative;
+    width: var(--memori-drawer--width, 100%);
+    height: 100%;
+    padding: 1.5rem 2rem;
+    margin-right: 0;
+    margin-left: auto;
+    background-color: #fff;
+    font-family: 'Exo 2', sans-serif;
+}
+
+@media (min-width: 768px) {
+    .memori-drawer--panel {
+        width: var(--memori-drawer--width--md, 80%);
+    }
+}
+
+@media (min-width: 1024px) {
+    .memori-drawer--panel {
+        width: var(--memori-drawer--width--lg, 60%);
+    }
+}
+
+.memori-drawer--panel.memori-drawer--with-footer {
+    padding-bottom: 0;
+}
+
+.memori-drawer--panel .memori-spin {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+}
+
+.memori-drawer--panel-left {
+    margin-right: auto;
+    margin-left: 0;
+}
+
+.memori-drawer--close {
+    position: absolute;
+    z-index: 70;
+    top: 0;
+    left: -3.5rem;
+    padding: 0.5rem;
+}
+
+.memori-drawer--close button {
+    border-color: #fff;
+    color: #fff;
+}
+
+.memori-drawer--panel-left .memori-drawer--close {
+    right: -3.5rem;
+    left: auto;
+}
+
+.memori-drawer--footer {
+    position: sticky;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    justify-content: flex-end;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    border-top: 1px solid rgba(0, 0, 0, 0.25);
+    margin-top: auto;
+    background-color: #fff;
+}
+
+.memori-drawer--footer button+button {
+    margin-left: 0.5em;
+}
+
+.ease-out {
+    transition-timing-function: ease-out;
+}
+
+.ease-in {
+    transition-timing-function: ease-in;
+}
+
+.duration-300 {
+    transition-duration: 300ms;
+}
+
+.duration-200 {
+    transition-duration: 200ms;
+}
+
+.opacity-0 {
+    opacity: 0;
+}
+
+.opacity-100 {
+    opacity: 1;
+}
+
+.max-w-0 {
+    max-width: 0;
+}
+
+.max-w-100 {
+    max-width: 100%;
+}

package/esm/components/ui/Drawer.d.ts

@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+import './Drawer.css';
+export interface Props {
+    open?: boolean;
+    onClose: (value: boolean) => void;
+    className?: string;
+    title?: string | JSX.Element | React.ReactNode;
+    description?: string | JSX.Element | React.ReactNode;
+    children: JSX.Element | React.ReactNode;
+    footer?: JSX.Element | React.ReactNode;
+    loading?: boolean;
+    closable?: boolean;
+    side?: 'left' | 'right';
+    width?: string;
+    widthMd?: string;
+    widthLg?: string;
+}
+declare const Drawer: FC<Props>;
+export default Drawer;

package/esm/components/ui/Drawer.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Dialog, Transition } from '@headlessui/react';
+import Spin from './Spin';
+import Button from './Button';
+import Close from '../icons/Close';
+import cx from 'classnames';
+import './Drawer.css';
+const Drawer = ({ open = false, onClose, className, title, description, children, footer, loading = false, side = 'right', closable = true, width = '100%', widthMd = '80%', widthLg = '60%', }) => (React.createElement(Transition, { appear: true, show: open, as: React.Fragment },
+    React.createElement(Dialog, { open: open, onClose: onClose, className: cx('memori-drawer', className) },
+        React.createElement(Transition.Child, { as: React.Fragment, enter: "ease-out duration-300", enterFrom: "opacity-0", enterTo: "opacity-100", leave: "ease-in duration-200", leaveFrom: "opacity-100", leaveTo: "opacity-0" },
+            React.createElement("div", { className: "memori-drawer--backdrop" })),
+        React.createElement("div", { className: "memori-drawer--container" },
+            React.createElement("div", { className: "memori-drawer--container-scrollable" },
+                React.createElement(Transition.Child, { as: React.Fragment, enter: "ease-out duration-300", enterFrom: "max-w-0 opacity-0", enterTo: "max-w-100 opacity-100", leave: "ease-in duration-200", leaveFrom: "max-w-100 opacity-100", leaveTo: "max-w-0 opacity-0" },
+                    React.createElement(Dialog.Panel, { className: cx('memori-drawer--panel', {
+                            'memori-drawer--panel-left': side === 'left',
+                            'memori-drawer--with-footer': !!footer,
+                        }) },
+                        React.createElement("style", { dangerouslySetInnerHTML: {
+                                __html: `
+                    .memori-drawer--panel {
+                      --memori-drawer--width: ${width};
+                      --memori-drawer--width-lg: ${widthLg};
+                      --memori-drawer--width-md: ${widthMd};
+                    }
+                  `,
+                            } }),
+                        closable && (React.createElement("div", { className: "memori-drawer--close" },
+                            React.createElement(Button, { shape: "circle", outlined: true, icon: React.createElement(Close, null), onClick: () => onClose(false) }))),
+                        React.createElement(Spin, { spinning: loading },
+                            title && (React.createElement(Dialog.Title, { className: "memori-drawer--title" }, title)),
+                            description && (React.createElement(Dialog.Description, { className: "memori-drawer--description" }, description)),
+                            children,
+                            footer && (React.createElement("div", { className: "memori-drawer--footer" }, footer))))))))));
+export default Drawer;
+//# sourceMappingURL=Drawer.js.map

package/esm/components/ui/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/ui/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,KAAK,MAAM,gBAAgB,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,cAAc,CAAC;AAkBtB,MAAM,MAAM,GAAc,CAAC,EACzB,IAAI,GAAG,KAAK,EACZ,OAAO,EACP,SAAS,EACT,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,OAAO,GAAG,KAAK,EACf,IAAI,GAAG,OAAO,EACd,QAAQ,GAAG,IAAI,EACf,KAAK,GAAG,MAAM,EACd,OAAO,GAAG,KAAK,EACf,OAAO,GAAG,KAAK,GACT,EAAE,EAAE,CAAC,CACX,oBAAC,UAAU,IAAC,MAAM,QAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,CAAC,QAAQ;IAC/C,oBAAC,MAAM,IACL,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC;QAEzC,oBAAC,UAAU,CAAC,KAAK,IACf,EAAE,EAAE,KAAK,CAAC,QAAQ,EAClB,KAAK,EAAC,uBAAuB,EAC7B,SAAS,EAAC,WAAW,EACrB,OAAO,EAAC,aAAa,EACrB,KAAK,EAAC,sBAAsB,EAC5B,SAAS,EAAC,aAAa,EACvB,OAAO,EAAC,WAAW;YAEnB,6BAAK,SAAS,EAAC,yBAAyB,GAAG,CAC1B;QACnB,6BAAK,SAAS,EAAC,0BAA0B;YACvC,6BAAK,SAAS,EAAC,qCAAqC;gBAClD,oBAAC,UAAU,CAAC,KAAK,IACf,EAAE,EAAE,KAAK,CAAC,QAAQ,EAClB,KAAK,EAAC,uBAAuB,EAC7B,SAAS,EAAC,mBAAmB,EAC7B,OAAO,EAAC,uBAAuB,EAC/B,KAAK,EAAC,sBAAsB,EAC5B,SAAS,EAAC,uBAAuB,EACjC,OAAO,EAAC,mBAAmB;oBAE3B,oBAAC,MAAM,CAAC,KAAK,IACX,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE;4BACpC,2BAA2B,EAAE,IAAI,KAAK,MAAM;4BAC5C,4BAA4B,EAAE,CAAC,CAAC,MAAM;yBACvC,CAAC;wBAEF,+BACE,uBAAuB,EAAE;gCACvB,MAAM,EAAE;;gDAEsB,KAAK;mDACF,OAAO;mDACP,OAAO;;mBAEvC;6BACF,GACD;wBACD,QAAQ,IAAI,CACX,6BAAK,SAAS,EAAC,sBAAsB;4BACnC,oBAAC,MAAM,IACL,KAAK,EAAC,QAAQ,EACd,QAAQ,QACR,IAAI,EAAE,oBAAC,KAAK,OAAG,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,GAC7B,CACE,CACP;wBACD,oBAAC,IAAI,IAAC,QAAQ,EAAE,OAAO;4BACpB,KAAK,IAAI,CACR,oBAAC,MAAM,CAAC,KAAK,IAAC,SAAS,EAAC,sBAAsB,IAC3C,KAAK,CACO,CAChB;4BACA,WAAW,IAAI,CACd,oBAAC,MAAM,CAAC,WAAW,IAAC,SAAS,EAAC,4BAA4B,IACvD,WAAW,CACO,CACtB;4BAEA,QAAQ;4BAER,MAAM,IAAI,CACT,6BAAK,SAAS,EAAC,uBAAuB,IAAE,MAAM,CAAO,CACtD,CACI,CACM,CACE,CACf,CACF,CACC,CACE,CACd,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/esm/components/ui/Drawer.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/react';
+import { Props } from './Drawer';
+declare const meta: Meta;
+export default meta;
+export declare const Default: Story<Props>;
+export declare const Open: Story<Props>;
+export declare const WithTitle: Story<Props>;
+export declare const WithTitleAndDescription: Story<Props>;
+export declare const Loading: Story<Props>;
+export declare const WithFooter: Story<Props>;
+export declare const SideLeft: Story<Props>;
+export declare const WithALotOfContent: Story<Props>;

package/esm/components/ui/Drawer.stories.js

@@ -0,0 +1,134 @@
+import React from 'react';
+import Drawer from './Drawer';
+import Button from './Button';
+const meta = {
+    title: 'UI/Drawer',
+    component: Drawer,
+    argTypes: {
+        title: {
+            control: {
+                type: 'text',
+            },
+        },
+        description: {
+            control: {
+                type: 'text',
+            },
+        },
+        loading: {
+            control: {
+                type: 'boolean',
+            },
+        },
+        open: {
+            control: {
+                type: 'boolean',
+            },
+        },
+        className: {
+            control: {
+                type: 'text',
+            },
+        },
+        side: {
+            control: {
+                type: 'select',
+                options: ['left', 'right'],
+            },
+        },
+    },
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+const content = (React.createElement(React.Fragment, null,
+    React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."),
+    React.createElement("h3", null, "Suspendisse a sodales nulla, sed semper nisi."),
+    React.createElement("p", null, "Proin tincidunt enim in felis aliquet, a ultricies purus bibendum."),
+    React.createElement("ul", null,
+        React.createElement("li", null, "Quisque in ultrices lectus."),
+        React.createElement("li", null, "Quisque in ultrices lectus."),
+        React.createElement("li", null, "Quisque in ultrices lectus.")),
+    React.createElement("p", null, "Nulla at urna diam."),
+    React.createElement("h3", null, "Suspendisse a sodales nulla, sed semper nisi."),
+    React.createElement("p", null, "Proin tincidunt enim in felis aliquet, a ultricies purus bibendum."),
+    React.createElement("ul", null,
+        React.createElement("li", null, "Quisque in ultrices lectus."),
+        React.createElement("li", null, "Quisque in ultrices lectus."),
+        React.createElement("li", null, "Quisque in ultrices lectus.")),
+    React.createElement("p", null, "Nulla at urna diam."),
+    React.createElement("p", null, "Nulla at urna diam."),
+    React.createElement("h3", null, "Suspendisse a sodales nulla, sed semper nisi."),
+    React.createElement("p", null, "Proin tincidunt enim in felis aliquet, a ultricies purus bibendum."),
+    React.createElement("ul", null,
+        React.createElement("li", null, "Quisque in ultrices lectus."),
+        React.createElement("li", null, "Quisque in ultrices lectus."),
+        React.createElement("li", null, "Quisque in ultrices lectus.")),
+    React.createElement("p", null, "Nulla at urna diam.")));
+const footer = (React.createElement(React.Fragment, null,
+    React.createElement(Button, { primary: true }, "OK"),
+    React.createElement(Button, null, "Cancel")));
+const Template = args => {
+    const [isOpen, setIsOpen] = React.useState(!!args.open || false);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { onClick: () => setIsOpen(true) }, "Click me"),
+        React.createElement(Drawer, { ...args, open: isOpen, onClose: () => setIsOpen(false), footer: args.footer }, content)));
+};
+const TemplateWithALotOfContent = args => {
+    const [isOpen, setIsOpen] = React.useState(!!args.open || false);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { onClick: () => setIsOpen(true) }, "Click me"),
+        React.createElement(Drawer, { ...args, open: isOpen, onClose: () => setIsOpen(false), footer: args.footer },
+            content,
+            content,
+            content,
+            content,
+            content)));
+};
+export const Default = Template.bind({});
+Default.args = {
+    open: false,
+};
+export const Open = Template.bind({});
+Open.args = {
+    open: true,
+};
+export const WithTitle = Template.bind({});
+WithTitle.args = {
+    open: true,
+    title: 'Drawer Title',
+};
+export const WithTitleAndDescription = Template.bind({});
+WithTitleAndDescription.args = {
+    open: true,
+    title: 'Drawer Title',
+    description: 'Drawer Description',
+};
+export const Loading = Template.bind({});
+Loading.args = {
+    open: true,
+    title: 'Drawer Title',
+    description: 'Drawer Description',
+    loading: true,
+};
+export const WithFooter = Template.bind({});
+WithFooter.args = {
+    open: true,
+    title: 'Drawer Title',
+    description: 'Drawer Description',
+    footer,
+};
+export const SideLeft = Template.bind({});
+SideLeft.args = {
+    open: true,
+    side: 'left',
+};
+export const WithALotOfContent = TemplateWithALotOfContent.bind({});
+WithALotOfContent.args = {
+    open: true,
+    title: 'Drawer Title',
+    description: 'Drawer Description',
+    footer,
+};
+//# sourceMappingURL=Drawer.stories.js.map

package/esm/components/ui/Drawer.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.stories.js","sourceRoot":"","sources":["../../../src/components/ui/Drawer.stories.tsx"],"names":[],"mappings":"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"}

package/esm/components/ui/Drawer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/components/ui/Drawer.test.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Drawer from './Drawer';
+import Button from './Button';
+const content = (React.createElement(React.Fragment, null,
+    React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."),
+    React.createElement("h3", null, "Suspendisse a sodales nulla, sed semper nisi."),
+    React.createElement("p", null, "Proin tincidunt enim in felis aliquet, a ultricies purus bibendum."),
+    React.createElement("ul", null,
+        React.createElement("li", null, "Quisque in ultrices lectus."),
+        React.createElement("li", null, "Quisque in ultrices lectus."),
+        React.createElement("li", null, "Quisque in ultrices lectus.")),
+    React.createElement("p", null, "Nulla at urna diam.")));
+const footer = (React.createElement(React.Fragment, null,
+    React.createElement(Button, { primary: true }, "Ok"),
+    React.createElement(Button, null, "Cancel")));
+beforeEach(() => {
+    window.IntersectionObserver = jest.fn(() => ({
+        observe: jest.fn(),
+        unobserve: jest.fn(),
+        disconnect: jest.fn(),
+        takeRecords: jest.fn(),
+    }));
+});
+it('renders Drawer unchanged', () => {
+    const { container } = render(React.createElement(Drawer, { open: false, onClose: jest.fn() }, content));
+    expect(container).toMatchSnapshot();
+});
+it('renders Drawer open unchanged', () => {
+    const { container } = render(React.createElement(Drawer, { open: true, onClose: jest.fn() }, content));
+    expect(container).toMatchSnapshot();
+});
+it('renders Drawer with title unchanged', () => {
+    const { container } = render(React.createElement(Drawer, { open: true, onClose: jest.fn(), title: "Lorem ipsum" }, content));
+    expect(container).toMatchSnapshot();
+});
+it('renders Drawer with description unchanged', () => {
+    const { container } = render(React.createElement(Drawer, { open: true, onClose: jest.fn(), description: "Lorem ipsum dolor sit amet" }, content));
+    expect(container).toMatchSnapshot();
+});
+it('renders Drawer loading unchanged', () => {
+    const { container } = render(React.createElement(Drawer, { open: true, onClose: jest.fn(), loading: true }, content));
+    expect(container).toMatchSnapshot();
+});
+it('renders Drawer with footer unchanged', () => {
+    const { container } = render(React.createElement(Drawer, { open: true, onClose: jest.fn(), footer: footer }, content));
+    expect(container).toMatchSnapshot();
+});
+it('renders Drawer non closable unchanged', () => {
+    const { container } = render(React.createElement(Drawer, { open: true, onClose: jest.fn(), closable: false }, content));
+    expect(container).toMatchSnapshot();
+});
+it('renders Drawer side left unchanged', () => {
+    const { container } = render(React.createElement(Drawer, { open: true, onClose: jest.fn(), side: "left" }, content));
+    expect(container).toMatchSnapshot();
+});
+it('renders Drawer with custom widths unchanged', () => {
+    const { container } = render(React.createElement(Drawer, { open: true, onClose: jest.fn(), width: "100%", widthMd: "90%", widthLg: "80%" }, content));
+    expect(container).toMatchSnapshot();
+});
+//# sourceMappingURL=Drawer.test.js.map

package/esm/components/ui/Drawer.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.test.js","sourceRoot":"","sources":["../../../src/components/ui/Drawer.test.tsx"],"names":[],"mappings":"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"}

package/esm/components/ui/Message.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+declare const Message: () => JSX.Element;
+declare const message: {
+    error: {
+        (...data: any[]): void;
+        (message?: any, ...optionalParams: any[]): void;
+    };
+    info: {
+        (...data: any[]): void;
+        (message?: any, ...optionalParams: any[]): void;
+    };
+    success: {
+        (...data: any[]): void;
+        (message?: any, ...optionalParams: any[]): void;
+    };
+};
+export { Message };
+export default message;

package/esm/components/ui/Message.js

@@ -0,0 +1,10 @@
+import React from 'react';
+const Message = () => React.createElement("div", null, "Message");
+const message = {
+    error: console.error,
+    info: console.info,
+    success: console.log,
+};
+export { Message };
+export default message;
+//# sourceMappingURL=Message.js.map

package/esm/components/ui/Message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Message.js","sourceRoot":"","sources":["../../../src/components/ui/Message.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,2CAAkB,CAAC;AAEzC,MAAM,OAAO,GAAG;IACd,KAAK,EAAE,OAAO,CAAC,KAAK;IACpB,IAAI,EAAE,OAAO,CAAC,IAAI;IAClB,OAAO,EAAE,OAAO,CAAC,GAAG;CACrB,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC;AACnB,eAAe,OAAO,CAAC"}

package/esm/components/ui/Modal.css

@@ -0,0 +1,98 @@
+.memori-modal {
+    position: relative;
+    z-index: 60;
+}
+
+.memori-modal--backdrop {
+    position: fixed;
+    z-index: 40;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.3);
+}
+
+.memori-modal--container {
+    position: fixed;
+    z-index: 50;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow-y: auto;
+}
+
+.memori-modal--container-scrollable {
+    display: flex;
+    min-height: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.memori-modal--panel {
+    position: relative;
+    max-width: var(--memori-modal--width, 100%);
+    padding: 1.5rem;
+    border-radius: 10px;
+    margin-right: auto;
+    margin-left: auto;
+    background-color: #fff;
+    font-family: 'Exo 2', sans-serif;
+}
+
+@media (min-width: 768px) {
+    .memori-modal--panel {
+        max-width: var(--memori-modal--width-md, 80%);
+        padding: 2rem 3rem;
+    }
+}
+
+.memori-modal--footer {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 1.5rem;
+}
+
+.memori-modal--footer button+button {
+    margin-left: 0.5em;
+}
+
+.memori-modal--close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 0.5rem;
+}
+
+.ease-out {
+    transition-timing-function: ease-out;
+}
+
+.ease-in {
+    transition-timing-function: ease-in;
+}
+
+.duration-300 {
+    transition-duration: 300ms;
+}
+
+.duration-200 {
+    transition-duration: 200ms;
+}
+
+.opacity-0 {
+    opacity: 0;
+}
+
+.opacity-100 {
+    opacity: 1;
+}
+
+.scale-95 {
+    transform: scale(0.95);
+}
+
+.scale-100 {
+    transform: scale(1);
+}

package/esm/components/ui/Modal.d.ts

@@ -0,0 +1,17 @@
+import React, { FC } from 'react';
+import './Modal.css';
+export interface Props {
+    open?: boolean;
+    onClose: (value: boolean) => void;
+    className?: string;
+    title?: string | JSX.Element | React.ReactNode;
+    description?: string | JSX.Element | React.ReactNode;
+    children: JSX.Element | React.ReactNode;
+    footer?: JSX.Element | React.ReactNode;
+    loading?: boolean;
+    closable?: boolean;
+    width?: string;
+    widthMd?: string;
+}
+declare const Modal: FC<Props>;
+export default Modal;

package/esm/components/ui/Modal.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Dialog, Transition } from '@headlessui/react';
+import Spin from './Spin';
+import Button from './Button';
+import Close from '../icons/Close';
+import cx from 'classnames';
+import './Modal.css';
+const Modal = ({ open = false, onClose, className, title, description, children, footer, loading = false, closable = true, width = '100%', widthMd = '100%', }) => (React.createElement(Transition, { appear: true, show: open, as: React.Fragment },
+    React.createElement(Dialog, { open: open, onClose: onClose, className: cx('memori-modal', className) },
+        React.createElement(Transition.Child, { as: React.Fragment, enter: "ease-out duration-300", enterFrom: "opacity-0", enterTo: "opacity-100", leave: "ease-in duration-200", leaveFrom: "opacity-100", leaveTo: "opacity-0" },
+            React.createElement("div", { className: "memori-modal--backdrop" })),
+        React.createElement("div", { className: "memori-modal--container" },
+            React.createElement("div", { className: "memori-modal--container-scrollable" },
+                React.createElement(Transition.Child, { as: React.Fragment, enter: "ease-out duration-300", enterFrom: "opacity-0 scale-95", enterTo: "opacity-100 scale-100", leave: "ease-in duration-200", leaveFrom: "opacity-100 scale-100", leaveTo: "opacity-0 scale-95" },
+                    React.createElement(Dialog.Panel, { className: "memori-modal--panel" },
+                        React.createElement("style", { dangerouslySetInnerHTML: {
+                                __html: `
+                    .memori-modal--panel {
+                      --memori-modal--width: ${width};
+                      --memori-modal--width-md: ${widthMd};
+                    }
+                  `,
+                            } }),
+                        closable && (React.createElement("div", { className: "memori-modal--close" },
+                            React.createElement(Button, { ghost: true, padded: true, shape: "circle", icon: React.createElement(Close, null), onClick: () => onClose(false) }))),
+                        React.createElement(Spin, { spinning: loading },
+                            title && (React.createElement(Dialog.Title, { className: "memori-modal--title" }, title)),
+                            description && (React.createElement(Dialog.Description, { className: "memori-modal--description" }, description)),
+                            children,
+                            footer && React.createElement("div", { className: "memori-modal--footer" }, footer)))))))));
+export default Modal;
+//# sourceMappingURL=Modal.js.map

package/esm/components/ui/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/ui/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,KAAK,MAAM,gBAAgB,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,aAAa,CAAC;AAgBrB,MAAM,KAAK,GAAc,CAAC,EACxB,IAAI,GAAG,KAAK,EACZ,OAAO,EACP,SAAS,EACT,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,IAAI,EACf,KAAK,GAAG,MAAM,EACd,OAAO,GAAG,MAAM,GACV,EAAE,EAAE,CAAC,CACX,oBAAC,UAAU,IAAC,MAAM,QAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,CAAC,QAAQ;IAC/C,oBAAC,MAAM,IACL,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC;QAExC,oBAAC,UAAU,CAAC,KAAK,IACf,EAAE,EAAE,KAAK,CAAC,QAAQ,EAClB,KAAK,EAAC,uBAAuB,EAC7B,SAAS,EAAC,WAAW,EACrB,OAAO,EAAC,aAAa,EACrB,KAAK,EAAC,sBAAsB,EAC5B,SAAS,EAAC,aAAa,EACvB,OAAO,EAAC,WAAW;YAEnB,6BAAK,SAAS,EAAC,wBAAwB,GAAG,CACzB;QACnB,6BAAK,SAAS,EAAC,yBAAyB;YACtC,6BAAK,SAAS,EAAC,oCAAoC;gBACjD,oBAAC,UAAU,CAAC,KAAK,IACf,EAAE,EAAE,KAAK,CAAC,QAAQ,EAClB,KAAK,EAAC,uBAAuB,EAC7B,SAAS,EAAC,oBAAoB,EAC9B,OAAO,EAAC,uBAAuB,EAC/B,KAAK,EAAC,sBAAsB,EAC5B,SAAS,EAAC,uBAAuB,EACjC,OAAO,EAAC,oBAAoB;oBAE5B,oBAAC,MAAM,CAAC,KAAK,IAAC,SAAS,EAAC,qBAAqB;wBAC3C,+BACE,uBAAuB,EAAE;gCACvB,MAAM,EAAE;;+CAEqB,KAAK;kDACF,OAAO;;mBAEtC;6BACF,GACD;wBACD,QAAQ,IAAI,CACX,6BAAK,SAAS,EAAC,qBAAqB;4BAClC,oBAAC,MAAM,IACL,KAAK,QACL,MAAM,QACN,KAAK,EAAC,QAAQ,EACd,IAAI,EAAE,oBAAC,KAAK,OAAG,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,GAC7B,CACE,CACP;wBACD,oBAAC,IAAI,IAAC,QAAQ,EAAE,OAAO;4BACpB,KAAK,IAAI,CACR,oBAAC,MAAM,CAAC,KAAK,IAAC,SAAS,EAAC,qBAAqB,IAC1C,KAAK,CACO,CAChB;4BACA,WAAW,IAAI,CACd,oBAAC,MAAM,CAAC,WAAW,IAAC,SAAS,EAAC,2BAA2B,IACtD,WAAW,CACO,CACtB;4BAEA,QAAQ;4BAER,MAAM,IAAI,6BAAK,SAAS,EAAC,sBAAsB,IAAE,MAAM,CAAO,CAC1D,CACM,CACE,CACf,CACF,CACC,CACE,CACd,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/esm/components/ui/Modal.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/react';
+import { Props } from './Modal';
+declare const meta: Meta;
+export default meta;
+export declare const Default: Story<Props>;
+export declare const Open: Story<Props>;
+export declare const WithTitle: Story<Props>;
+export declare const WithTitleAndDescription: Story<Props>;
+export declare const Loading: Story<Props>;
+export declare const WithFooter: Story<Props>;
+export declare const NonClosable: Story<Props>;
+export declare const WithALotOfContent: Story<Props>;