@medable/nucleus-ui 2.0.0

package/input/src/lib/input.d.ts

@@ -0,0 +1,100 @@
+import React, { ForwardedRef, JSX } from 'react';
+export type InputSizes = 'base' | 'xs' | 'sm' | 'lg' | 'full';
+type InputNativeProps = Omit<JSX.IntrinsicElements['input'], 'placeholder' | 'aria-label' | 'ref'>;
+export interface InputProps extends InputNativeProps {
+    /**
+     * This sets the data-testid attribute on the input component. This is useful for test frameworks like Jest or
+     * Cypress.
+     */
+    'dataTestId'?: string;
+    /**
+     * Any supporting text that is required for the user to understand this field.
+     */
+    'description'?: string;
+    /**
+     * Any error message for this field.
+     */
+    'errorMessage'?: string;
+    /**
+     * A boolean to indicate whether the input field has error.
+     */
+    'hasError'?: boolean;
+    /**
+     * Controls whether the input is disabled or not. Disabled inputs do not react to any change, focus or hover events.
+     * The accessibility property `aria-disabled` will also be set to this value.
+     */
+    'disabled'?: InputNativeProps['disabled'];
+    /**
+     * Id for the input element, also used in `htmlFor` attribute of the label to bind them together.
+     */
+    'id': NonNullable<InputNativeProps['id']>;
+    /**
+     * The text label for this component. The accessibility property `aria-label` will also be set to this value.
+     */
+    'label'?: string;
+    /**
+     * Sets maximum length of the input. Setting this also displays the `value count/limit` on top of the input field.
+     */
+    'maxLength'?: InputNativeProps['maxLength'];
+    /**
+     * Sets placeholder of the input.
+     */
+    'placeholder'?: JSX.IntrinsicElements['input']['placeholder'];
+    /**
+     * Indicates that this field is required to be filled out by the user. The accessibility property `aria-required`
+     * will also be set to this value.
+     */
+    'required'?: boolean;
+    /**
+     * If true, hides the required indicator on the label.
+     */
+    'hideRequiredIndicator'?: boolean;
+    /**
+     * Type of the input. It's used to set type attribute of native input inside. Only text, number, tel and password are
+     * supported for now.
+     */
+    'type'?: Extract<InputNativeProps['type'], 'text' | 'number' | 'password' | 'tel'>;
+    /**
+     * Sets the size of the input.
+     */
+    'width'?: InputSizes;
+    /**
+     * The function to call when the input is changed.
+     */
+    'onChange'?: InputNativeProps['onChange'];
+    /**
+     * A component to render to the start of the input field. Capped at 24px size.
+     */
+    'startAdornment'?: React.ReactNode;
+    /**
+     * A component to render to the end of the input field. Capped at 24px size.
+     */
+    'endAdornment'?: React.ReactNode;
+    /**
+     * aria-label
+     */
+    'aria-label'?: JSX.IntrinsicElements['input']['aria-label'];
+    /**
+     * The ref to be forwarded to the native input element
+     */
+    'ref'?: ForwardedRef<HTMLInputElement>;
+    /**
+     * If true, the input will contain labels to the size of the input. By default, the labels and
+     * description will extend past the input.
+     */
+    'containLabels'?: boolean;
+    /**
+     * This will render the info icon on the input title with a tooltip containing the message.
+     */
+    'infoMessage'?: string;
+}
+/**
+ * Inputs allow a user to enter text, numeric, telephone or password input.
+ *
+ * @remarks
+ *
+ * Design guidelines dictate that adornments on inputs not be bigger than 24px, which
+ * is the generic size of our icons.
+ */
+export declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export {};

package/input/src/lib/input.js

@@ -0,0 +1,41 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useState } from 'react';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { Icon } from '../../../icon/src';
+import { Tooltip } from '../../../tooltip/src';
+const twMerge = extendTailwindMerge({
+    prefix: 'nucleus-',
+});
+const sizeClasses = {
+    base: 'nucleus-w-input-base',
+    xs: 'nucleus-w-input-xs nucleus-self-stretch',
+    sm: 'nucleus-w-input-sm nucleus-self-stretch',
+    lg: 'nucleus-w-input-lg nucleus-self-stretch',
+    full: 'nucleus-w-input-full nucleus-self-stretch',
+};
+/**
+ * Inputs allow a user to enter text, numeric, telephone or password input.
+ *
+ * @remarks
+ *
+ * Design guidelines dictate that adornments on inputs not be bigger than 24px, which
+ * is the generic size of our icons.
+ */
+export const Input = forwardRef(function Input(_a, ref) {
+    var { dataTestId, description, disabled = false, errorMessage, hasError = false, label, required = false, hideRequiredIndicator = false, type = 'text', width = 'base', startAdornment, endAdornment, placeholder, 'aria-label': ariaLabelProp, containLabels = false, infoMessage, className } = _a, inputProps = __rest(_a, ["dataTestId", "description", "disabled", "errorMessage", "hasError", "label", "required", "hideRequiredIndicator", "type", "width", "startAdornment", "endAdornment", "placeholder", 'aria-label', "containLabels", "infoMessage", "className"]);
+    const { id, maxLength, value } = inputProps;
+    const [showPassword, setShowPassword] = useState(false);
+    const showDescription = width !== 'xs' && width !== 'sm' && description;
+    const InputCount = maxLength && maxLength > 0 ? (_jsx("span", { className: `nucleus-order-1 nucleus-flex-none nucleus-grow-0 nucleus-text-xs nucleus-font-medium nucleus-text-text-secondary ${showDescription ? 'nucleus-self-end' : ''}`, children: `${(value !== null && value !== void 0 ? value : '').toString().length}/${maxLength}` })) : null;
+    const onEyeClick = useCallback(() => {
+        setShowPassword((prev) => !prev);
+    }, []);
+    return (_jsxs("div", { className: `nucleus-box-border nucleus-max-w-full nucleus-font-sans nucleus-flex-col ${width === 'full' ? 'nucleus-flex' : 'nucleus-inline-flex nucleus-w-fit'} ${containLabels ? sizeClasses[width] : ''}`, "data-testid": dataTestId, children: [label && (_jsxs("div", { className: 'nucleus-flex nucleus-items-baseline nucleus-justify-between', children: [_jsxs("label", { className: `nucleus-order-none nucleus-max-w-full nucleus-flex-none nucleus-grow-0 nucleus-text-sm nucleus-font-medium nucleus-text-text-primary ${!description && maxLength ? 'nucleus-w-5/6' : ''}`, htmlFor: id, children: [required ? (_jsxs(_Fragment, { children: [label, !hideRequiredIndicator && (_jsx("span", { className: 'nucleus-order-1 nucleus-h-5 nucleus-w-1.5 nucleus-flex-none nucleus-grow-0 nucleus-text-sm nucleus-font-medium nucleus-text-red-500 nucleus-pl-px', children: "*" }))] })) : (label), infoMessage && (_jsx("span", { className: 'nucleus-ml-2 nucleus-text-neutral-900 nucleus-align-sub nucleus-inline-flex', children: _jsx(Tooltip, { title: infoMessage, placement: 'top', children: _jsx(Icon, { name: 'info', size: 'sm', color: 'current' }) }) }))] }), !description && InputCount] })), showDescription && (_jsxs("div", { className: 'nucleus-flex nucleus-justify-between', children: [_jsx("p", { className: `nucleus-order-none nucleus-max-w-full nucleus-flex-none nucleus-grow-0 nucleus-text-xs nucleus-font-medium nucleus-text-text-secondary nucleus-m-0
+                ${maxLength ? 'nucleus-w-5/6' : ''}`, children: description }), InputCount] })), _jsxs("div", { className: `nucleus-relative ${width === 'full' ? 'nucleus-flex' : 'nucleus-inline-flex nucleus-max-w-fit'} nucleus-items-center ${label || showDescription ? 'nucleus-mt-2' : ''}`, children: [startAdornment && (_jsx("div", { className: 'nucleus-pointer-events-none nucleus-absolute nucleus-flex nucleus-max-w-[30px] nucleus-items-center nucleus-overflow-hidden nucleus-whitespace-nowrap nucleus-left-4', children: startAdornment })), _jsx("input", Object.assign({ ref: ref, "aria-disabled": disabled, "aria-errormessage": `${id}-errormessage`, "aria-invalid": hasError, "aria-label": ariaLabelProp !== null && ariaLabelProp !== void 0 ? ariaLabelProp : label, "aria-required": required, className: twMerge(`nucleus-order-none nucleus-text-text-primary nucleus-box-border nucleus-flex nucleus-h-10 nucleus-max-w-full nucleus-flex-none nucleus-grow-0 nucleus-flex-row nucleus-items-center nucleus-gap-2 nucleus-border-solid nucleus-bg-neutral-0 nucleus-font-sans
+            nucleus-text-sm nucleus-font-medium nucleus-not-italic nucleus-shadow-sm nucleus-rounded-md nucleus-border nucleus-p-4 focus:nucleus-outline-none
+            focus:nucleus-ring-1 disabled:nucleus-bg-neutral-200 disabled:nucleus-text-text-disabled disabled:nucleus-border-neutral-200 ${hasError
+                            ? `nucleus-border-red-500 hover:nucleus-border-red-500 focus:nucleus-ring-red-500 focus:nucleus-border-red-500`
+                            : `nucleus-border-neutral-300 hover:nucleus-border-neutral-500 hover:nucleus-bg-neutral-50 focus-visible:nucleus-bg-neutral-50 focus:nucleus-ring-primary-500 focus:nucleus-border-primary-500 placeholder:nucleus-text-text-secondary`} ${startAdornment ? 'nucleus-pl-12' : ''} ${endAdornment ? 'nucleus-pr-12' : ''} ${sizeClasses[width]}`, className), disabled: disabled, type: showPassword ? 'text' : type, placeholder: placeholder }, inputProps)), type === 'password' && (_jsx("div", { className: 'nucleus-cursor-pointer nucleus-absolute nucleus-flex nucleus-items-center nucleus-right-4', onClick: onEyeClick, children: _jsx(Icon, { name: showPassword ? 'eyeSlash' : 'eye', size: 'sm' }) })), type !== 'password' && endAdornment && (_jsx("div", { className: 'nucleus-pointer-events-none nucleus-absolute nucleus-flex nucleus-max-w-[30px] nucleus-items-center nucleus-overflow-hidden nucleus-whitespace-nowrap nucleus-right-4', children: endAdornment }))] }), hasError && errorMessage && (_jsxs("div", { className: `nucleus-flex nucleus-max-w-full nucleus-items-center nucleus-mt-2 ${sizeClasses[width]}`, children: [_jsx(Icon, { name: 'error', size: 'sm', color: 'red' }), _jsx("span", { className: 'nucleus-ml-2', children: _jsx("p", { className: 'nucleus-order-1 nucleus-flex-none nucleus-grow nucleus-text-xs nucleus-font-medium nucleus-text-text-error nucleus-m-0', id: `${id}-errormessage`, role: 'alert', children: errorMessage }) })] }))] }));
+});
+//# sourceMappingURL=input.js.map

package/link/src/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/link';

package/link/src/index.js

@@ -0,0 +1,2 @@
+export * from './lib/link';
+//# sourceMappingURL=index.js.map

package/link/src/lib/link.d.ts

@@ -0,0 +1,68 @@
+import { ReactNode, JSX, ElementType } from 'react';
+type NativeLinkProps = Omit<JSX.IntrinsicElements['a'], 'className' | 'children'>;
+export type LinkProps = NativeLinkProps & LinkUrl & {
+    /**
+     * The optional `target` attribute specifies where to open the linked document.
+     * Possible values: '_blank', '_self', '_parent', '_top', or a specific frame name.
+     */
+    target?: NativeLinkProps['target'];
+    /**
+     * Callback function invoked when the link is clicked.
+     * Will not be called if the link is disabled.
+     */
+    onClick?: NativeLinkProps['onClick'];
+    /**
+     * The optional `disabled` attribute is a boolean that, if set to true,
+     * disables the link and prevents it from being clickable.
+     */
+    disabled?: boolean;
+    /**
+     * The user-facing link text.
+     */
+    children: ReactNode;
+    /**
+     * The component to use for the link, used to override the default anchor tag.
+     */
+    LinkComponent?: ElementType;
+};
+type LinkUrl = {
+    /**
+     * The `href` attribute represents the URL the link points to.
+     * It is a required property for the link component.
+     */
+    href: NativeLinkProps['href'];
+    to?: never;
+} | {
+    /**
+     * The `to` attribute represents the URL the link points to.
+     * It is a common additional property used by some libraries when redefining the default anchor tag.
+     */
+    to: string;
+    href?: never;
+};
+type LinkVariant = {
+    /**
+     * Flag to determine link style type
+     */
+    variant?: 'default';
+    customStyles?: never;
+} | {
+    /**
+     * Custom variant required when passing custom styles
+     */
+    variant?: 'custom';
+    /**
+     * Custom tailwind styles to add to or overwrite default styling
+     */
+    customStyles: string;
+};
+export type LinkPropTypes = LinkProps & LinkVariant;
+/**
+ Links are an accessible element for navigation, internal or external.
+
+ @see {@link https://storybook.medable.tech/nucleus-components/?path=/docs/link--basic} for Storybook documentation
+ @see {@link https://www.figma.com/file/F4k8k8CQY83kziWjGDQmXc/Nucleus-Product-Styles?type=design&node-id=79-8779&t=Q6Ty51n9tc7XsZBA-0} for Nucleus design
+ @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/link/} for best accessibilty patterns
+*/
+export declare const Link: ({ disabled, onClick, variant, children, customStyles, LinkComponent, ...props }: LinkPropTypes) => import("react/jsx-runtime").JSX.Element;
+export {};

package/link/src/lib/link.js

@@ -0,0 +1,23 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ Links are an accessible element for navigation, internal or external.
+
+ @see {@link https://storybook.medable.tech/nucleus-components/?path=/docs/link--basic} for Storybook documentation
+ @see {@link https://www.figma.com/file/F4k8k8CQY83kziWjGDQmXc/Nucleus-Product-Styles?type=design&node-id=79-8779&t=Q6Ty51n9tc7XsZBA-0} for Nucleus design
+ @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/link/} for best accessibilty patterns
+*/
+export const Link = (_a) => {
+    var { disabled, onClick, variant = 'default', children, customStyles, LinkComponent = 'a' } = _a, props = __rest(_a, ["disabled", "onClick", "variant", "children", "customStyles", "LinkComponent"]);
+    const handleClick = (event) => {
+        if (disabled) {
+            event.preventDefault();
+        }
+        else if (onClick) {
+            onClick(event);
+        }
+    };
+    const defaultStyles = `nucleus-box-border nucleus-cursor-pointer nucleus-font-sans nucleus-text-sm nucleus-font-medium nucleus-text-primary-500 nucleus-underline hover:nucleus-text-primary-700 focus:nucleus-ring-primary-500 active:nucleus-text-text-primary focus:nucleus-outline-none focus:nucleus-ring-2 focus:nucleus-ring-offset-2 ${disabled ? 'nucleus-pointer-events-none nucleus-text-text-disabled' : ''} ${customStyles}`;
+    return (_jsxs(_Fragment, { children: [variant === 'default' && (_jsx(LinkComponent, Object.assign({}, props, { onClick: handleClick, className: defaultStyles, children: children }))), variant === 'custom' && (_jsx(LinkComponent, Object.assign({}, props, { onClick: handleClick, className: customStyles, children: children })))] }));
+};
+//# sourceMappingURL=link.js.map

package/logo/src/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/logo';

package/logo/src/index.js

@@ -0,0 +1,2 @@
+export * from './lib/logo';
+//# sourceMappingURL=index.js.map

package/logo/src/lib/logo.d.ts

@@ -0,0 +1,7 @@
+export interface LogoProps {
+    /**
+     * If true, the logo will be the wordless version
+     */
+    wordless?: boolean;
+}
+export declare const Logo: ({ wordless }: LogoProps) => import("react/jsx-runtime").JSX.Element;

package/logo/src/lib/logo.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Logo = ({ wordless }) => {
+    return (_jsx("span", { className: 'nucleus-inline-block nucleus-box-border', children: wordless ? (_jsxs("svg", { className: 'nucleus-w-full nucleus-h-full', viewBox: '0 0 54 54', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: [_jsx("g", { clipPath: 'url(#clip0_6_7429)', children: _jsx("path", { d: 'M54 0L31.752 15.336L36.504 18.63L48.6 10.26V43.74L28.296 29.7H43.2L0 0V54L22.248 38.664L17.496 35.37L5.4 43.74V10.26L25.704 24.3H10.8L54 54V0Z', fill: '#6445D7' }) }), _jsx("defs", { children: _jsx("clipPath", { id: 'clip0_6_7429', children: _jsx("rect", { width: '54', height: '54', fill: 'white' }) }) })] })) : (_jsxs("svg", { className: 'nucleus-w-full nucleus-h-full', viewBox: '0 0 220 54', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: [_jsx("path", { d: 'M54 0L31.752 15.336L36.504 18.63L48.6 10.26V43.74L28.296 29.7H43.2L0 0V54L22.248 38.664L17.496 35.37L5.4 43.74V10.26L25.704 24.3H10.8L54 54V0Z', fill: '#6445D7' }), _jsx("path", { d: 'M195.892 12.3067V40.4947H190.938V12.3067H195.892Z', fill: '#111827' }), _jsx("path", { d: 'M88.3615 40.5V22.95L80.7692 35.478H80.1769L72.5846 23.004V40.5H67.3077V13.5H72.7461L80.5 26.244L88.2 13.5H93.6385V40.5H88.3615Z', fill: '#111827' }), _jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M111.946 34.5494L115.931 36.8714C114.1 39.5174 111.246 40.9754 107.531 40.9754C101.069 40.9754 96.9769 36.5474 96.9769 30.7694C96.9769 25.0454 101.069 20.5634 107.154 20.5634C112.862 20.5634 116.9 25.0994 116.9 30.7694C116.9 31.5254 116.846 32.1734 116.685 32.8214H102.2C102.954 35.4134 105.054 36.4934 107.638 36.4934C109.577 36.4934 111.085 35.6834 111.946 34.5494ZM107.154 25.1534C104.515 25.1534 102.685 26.5574 102.092 29.0414H111.946C111.354 26.2874 109.254 25.1534 107.154 25.1534Z', fill: '#111827' }), _jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M134.454 40.5H139.408V13.5H134.454V23.436C133.054 21.654 131.008 20.628 128.208 20.628C123.092 20.628 118.838 25.11 118.838 30.834C118.838 36.612 123.038 41.04 128.208 41.04C131.008 41.04 133.054 40.014 134.454 38.232V40.5ZM123.792 30.834C123.792 27.594 126.054 25.38 129.123 25.38C132.192 25.38 134.454 27.594 134.454 30.834C134.454 34.074 132.192 36.288 129.123 36.288C126.054 36.288 123.792 34.074 123.792 30.834Z', fill: '#111827' }), _jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M163.154 40.4957H158.2V38.2277C156.8 39.9557 154.754 41.0357 151.954 41.0357C146.838 41.0357 142.585 36.6077 142.585 30.8297C142.585 25.1057 146.838 20.6237 151.954 20.6237C154.754 20.6237 156.854 21.7037 158.2 23.4317V21.1637H163.154V40.4957ZM152.869 25.3757C149.854 25.3757 147.538 27.5897 147.538 30.8297C147.538 34.0697 149.8 36.2837 152.869 36.2837C155.885 36.2837 158.2 34.0697 158.2 30.8297C158.2 27.5897 155.938 25.3757 152.869 25.3757Z', fill: '#111827' }), _jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M172.2 38.232C173.6 40.014 175.646 41.04 178.446 41.04C183.562 41.04 187.815 36.558 187.815 30.834C187.815 25.11 183.615 20.682 178.446 20.682C175.646 20.682 173.6 21.708 172.2 23.49V13.5H167.246V40.5H172.2V38.232ZM172.2 30.834C172.2 27.594 174.515 25.38 177.531 25.38C180.6 25.38 182.862 27.594 182.862 30.834C182.862 34.074 180.6 36.288 177.531 36.288C174.462 36.288 172.2 34.074 172.2 30.834Z', fill: '#111827' }), _jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M217.7 36.8714L213.715 34.5494C212.854 35.6834 211.346 36.4934 209.408 36.4934C206.823 36.4934 204.669 35.4134 203.969 32.8214H218.454C218.615 32.1734 218.669 31.5254 218.669 30.7694C218.669 25.0994 214.631 20.5634 208.923 20.5634C202.838 20.5634 198.746 25.0454 198.746 30.7694C198.746 36.5474 202.838 40.9754 209.3 40.9754C213.015 40.9754 215.869 39.5174 217.7 36.8714ZM203.861 29.0414C204.454 26.5574 206.285 25.1534 208.923 25.1534C211.023 25.1534 213.123 26.2874 213.715 29.0414H203.861Z', fill: '#111827' })] })) }));
+};
+//# sourceMappingURL=logo.js.map

package/modal_dialog/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/hooks/use_dialog';
+export * from './lib/modal_dialog';

package/modal_dialog/src/index.js

@@ -0,0 +1,3 @@
+export * from './lib/hooks/use_dialog';
+export * from './lib/modal_dialog';
+//# sourceMappingURL=index.js.map

package/modal_dialog/src/lib/hooks/use_dialog.d.ts

@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+import type { Message } from '../../../../i18n-shim';
+import { ModalDialog, ModalDialogProps } from '../modal_dialog';
+type UseDialogButtonProps = {
+    label: string | Message;
+    isDestructive?: boolean;
+    /**
+     * If provided, the dialog will not auto-close until the action executed by this callback is completed
+     * When response is a boolean, it will be compared in order to prevent closing the dialog when the process failed (on false)
+     */
+    onClick?: () => Promise<void | boolean>;
+    dataTestId?: string;
+};
+export type UseDialogProps = Omit<ModalDialogProps, 'isOpen' | 'closeDialog' | 'actionButtons'> & {
+    actionButtons: readonly [UseDialogButtonProps] | readonly [UseDialogButtonProps, UseDialogButtonProps];
+};
+type DialogValue = {
+    open: (options: UseDialogProps) => Promise<boolean>;
+};
+export declare const useDialog: () => DialogValue;
+type DialogProviderProps = {
+    layout?: typeof ModalDialog;
+    container?: HTMLElement;
+    children: React.ReactNode;
+};
+export declare const DialogProvider: FC<DialogProviderProps>;
+export {};

package/modal_dialog/src/lib/hooks/use_dialog.js

@@ -0,0 +1,44 @@
+import { __awaiter, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { ModalDialog } from '../modal_dialog';
+const Dialog = createContext({
+    open: () => {
+        throw new Error('Please render <DialogProvider> above in your tree, to use open()');
+    },
+});
+export const useDialog = () => {
+    return useContext(Dialog);
+};
+export const DialogProvider = ({ layout = ModalDialog, container = document.body, children, }) => {
+    const [portal, setPortal] = useState(null);
+    const createOpener = useCallback((Component) => (_a) => {
+        var { actionButtons, willCloseOnOutsideClickAndEscapeKeyPress = true } = _a, props = __rest(_a, ["actionButtons", "willCloseOnOutsideClickAndEscapeKeyPress"]);
+        return new Promise((resolve) => {
+            const onResolve = (answer) => {
+                setPortal(null);
+                resolve(answer);
+            };
+            const handleOnClose = () => {
+                if (willCloseOnOutsideClickAndEscapeKeyPress) {
+                    onResolve(false);
+                }
+            };
+            const onActionButtonClick = (actionButton, index) => __awaiter(void 0, void 0, void 0, function* () {
+                const succeeded = actionButton.onClick ? yield actionButton.onClick() : true;
+                if (succeeded !== false) {
+                    onResolve(index === 0);
+                }
+                return succeeded; // pass it to ModalDialog
+            });
+            const portal = createPortal(_jsx(Component, Object.assign({ actionButtons: actionButtons.map((actionButton, idx) => (Object.assign(Object.assign({}, actionButton), { onClick: () => onActionButtonClick(actionButton, idx) }))) }, props, { isOpen: true, willCloseOnOutsideClickAndEscapeKeyPress: willCloseOnOutsideClickAndEscapeKeyPress, closeDialog: handleOnClose })), container);
+            setPortal(portal);
+        });
+    }, [container]);
+    const memoValue = useMemo(() => {
+        return { open: createOpener(layout) };
+    }, [createOpener, layout]);
+    return (_jsxs(Dialog.Provider, { value: memoValue, children: [children, portal] }));
+};
+//# sourceMappingURL=use_dialog.js.map

package/modal_dialog/src/lib/modal_dialog.d.ts

@@ -0,0 +1,62 @@
+import { ReactElement, ReactNode } from 'react';
+type ModalDialogSizes = 'base' | 'sm' | 'lg';
+export type ModalDialogButtonProps = {
+    label: string;
+    /**
+     * If provided as a promise, the dialog will not auto-close until the action executed by this callback is completed
+     * When response is a boolean, it will be compared in order to prevent closing the dialog when the process failed (on
+     * false)
+     */
+    onClick: () => void | Promise<void | boolean>;
+    isDestructive?: boolean;
+    /**
+     * An option for having non-text content within a button. Label will still be required.
+     */
+    content?: ReactElement;
+    disabled?: boolean;
+    dataTestId?: string;
+};
+export interface ModalDialogProps {
+    /**
+     * This sets the title of the modal dialog. Rendered as an H5.
+     */
+    title: ReactNode;
+    /**
+     * The subtitle of the Modal Dialog. Can be any valid React Node.
+     */
+    subtitle?: ReactNode;
+    /**
+     * This sets the body text of the modal dialog.
+     */
+    body: string | ReactElement;
+    /**
+     * Buttons to be rendered in the footer of the modal dialog.
+     */
+    actionButtons: ModalDialogButtonProps[];
+    /**
+     * Sets the size of the modal dialog. This will be ignored on mobile viewports
+     * as it will always be full screen width there.
+     */
+    width?: ModalDialogSizes;
+    /**
+     * A boolean that indicates whether or not the modal dialog is open.
+     */
+    isOpen: boolean;
+    /**
+     * Closes the modal dialog.
+     */
+    closeDialog: () => void;
+    /**
+     * Show a dark overlay behind the modal.
+     */
+    hasOverlay?: boolean;
+    /**
+     * Disables the handler to close the modal when the user taps outside of it.
+     */
+    willCloseOnOutsideClickAndEscapeKeyPress?: boolean;
+}
+/**
+ * Modal Dialogs are used for simple actions that need action. Overlays can be optional depending on urgency of action.
+ */
+export declare const ModalDialog: ({ title, subtitle, body, actionButtons, width, isOpen, closeDialog, hasOverlay, willCloseOnOutsideClickAndEscapeKeyPress, }: ModalDialogProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/modal_dialog/src/lib/modal_dialog.js

@@ -0,0 +1,42 @@
+import { __awaiter } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Description, Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
+import { Fragment, useState } from 'react';
+import { Button } from '../../../button/src';
+import { Spinner } from '../../../spinner/src';
+import { H5, Text } from '../../../typography/src';
+/**
+ * Modal Dialogs are used for simple actions that need action. Overlays can be optional depending on urgency of action.
+ */
+export const ModalDialog = ({ title, subtitle, body, actionButtons, width = 'base', isOpen, closeDialog, hasOverlay = true, willCloseOnOutsideClickAndEscapeKeyPress = true, }) => {
+    const [isLoading, setIsLoading] = useState(false);
+    const handleOnClose = () => {
+        if (willCloseOnOutsideClickAndEscapeKeyPress) {
+            closeDialog();
+        }
+    };
+    const onActionButtonClick = (actionButton) => __awaiter(void 0, void 0, void 0, function* () {
+        setIsLoading(true);
+        const succeeded = yield actionButton.onClick();
+        setIsLoading(false);
+        if (succeeded !== false) {
+            closeDialog();
+        }
+    });
+    const handleOnEnterPress = (event) => {
+        if (event.key === 'Enter') {
+            closeDialog();
+        }
+    };
+    return (_jsx(Transition, { show: isOpen, as: Fragment, children: _jsx(Dialog, { open: isOpen, onClose: handleOnClose, onKeyDown: handleOnEnterPress, children: _jsxs("div", { className: 'nucleus-relative nucleus-z-50', children: [hasOverlay && (_jsx(TransitionChild, { as: Fragment, enter: 'nucleus-ease-out nucleus-duration-300', enterFrom: 'nucleus-opacity-0', enterTo: 'nucleus-opacity-100', leave: 'nucleus-ease-in nucleus-duration-200', leaveFrom: 'nucleus-opacity-100', leaveTo: 'nucleus-opacity-0', children: _jsx("div", { className: 'nucleus-fixed nucleus-bg-neutral-900 nucleus-bg-opacity-60 nucleus-backdrop-blur-md nucleus-inset-0 nucleus-z-10 nucleus-h-screen', "aria-hidden": 'true', "data-testid": 'modal-dialog--overlay' }) })), _jsx("div", { className: 'nucleus-fixed nucleus-flex nucleus-items-center nucleus-justify-center nucleus-inset-0 nucleus-p-4 nucleus-z-10 nucleus-h-screen', "data-testid": 'modal-dialog--container', children: _jsx(TransitionChild, { as: Fragment, enter: 'nucleus-ease-out nucleus-duration-300', enterFrom: 'nucleus-opacity-0 nucleus-translate-y-4 sm:nucleus-translate-y-0 sm:nucleus-scale-95', enterTo: 'nucleus-opacity-100 nucleus-translate-y-0 sm:nucleus-scale-100', leave: 'nucleus-ease-in nucleus-duration-200', leaveFrom: 'nucleus-opacity-100 nucleus-translate-y-0 sm:nucleus-scale-100', leaveTo: 'nucleus-opacity-0 nucleus-translate-y-4 sm:nucleus-translate-y-0 sm:nucleus-scale-95', children: _jsxs(DialogPanel, { className: `
+                  nucleus-box-border nucleus-flex nucleus-w-full nucleus-transform nucleus-flex-col nucleus-gap-2 nucleus-relative
+                  nucleus-overflow-visible nucleus-bg-white nucleus-shadow-xl nucleus-transition-all nucleus-rounded-lg
+                  nucleus-p-8 nucleus-text-left sm:nucleus-m-0 sm:nucleus-p-6
+                  ${{
+                                    base: 'sm:nucleus-w-modal-sm',
+                                    sm: 'sm:nucleus-w-modal-xs',
+                                    lg: 'sm:nucleus-w-modal-base',
+                                }[width]}
+              `, children: [_jsx(DialogTitle, { as: 'div', children: _jsx(H5, { children: title }) }), subtitle && (_jsx(Description, { as: 'div', className: 'nucleus-box-border nucleus-font-sans -nucleus-mt-2', children: typeof subtitle === 'string' ? (_jsx(Text, { size: 'sm', className: 'nucleus-text-text-secondary', children: subtitle })) : (subtitle) })), isLoading && (_jsx("section", { className: 'nucleus-absolute nucleus-rounded-lg nucleus-inset-0 nucleus-bg-neutral-900 nucleus-bg-opacity-30 nucleus-flex nucleus-items-center nucleus-justify-center nucleus-z-10', children: _jsx(Spinner, {}) })), typeof body === 'string' ? (_jsx(Text, { as: 'p', size: 'sm', className: 'nucleus-text-text-secondary', children: body })) : (body), _jsx("footer", { className: 'nucleus-flex nucleus-flex-col nucleus-gap-3 nucleus-mt-2 sm:nucleus-flex-row-reverse', children: actionButtons.map((actionButton, idx) => (_jsx(Button, { disabled: isLoading || actionButton.disabled, label: actionButton.label, variant: actionButton.isDestructive ? 'destructive' : idx === 0 ? 'primary' : 'secondary', onClick: () => !isLoading && onActionButtonClick(actionButton), content: actionButton.content, dataTestId: actionButton.dataTestId }, actionButton.label))) })] }) }) })] }) }) }));
+};
+//# sourceMappingURL=modal_dialog.js.map

package/modal_window/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/modal_window.component';
+export * from './lib/modal_window.types';

package/modal_window/src/index.js

@@ -0,0 +1,3 @@
+export * from './lib/modal_window.component';
+export * from './lib/modal_window.types';
+//# sourceMappingURL=index.js.map

package/modal_window/src/lib/modal_window.component.d.ts

@@ -0,0 +1,6 @@
+import { ModalWindowProps } from './modal_window.types';
+/**
+ * Modal Window overlays on top of, and deactivates all other page content.
+ * It takes the user in different modality where they are required to perform a sub-task or something else important.
+ */
+export declare const ModalWindow: ({ isOpen, closeWindow, title, header, headerActionButton, width, position, headerClassNames, footerClassNames, children, footerPrimaryActionButton, footerSecondaryActionButtons, footerCenterContent, hideCloseIcon, removeBodyPadding, dataTestId, subtitle, modalContentRef, }: ModalWindowProps) => import("react/jsx-runtime").JSX.Element;

package/modal_window/src/lib/modal_window.component.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Description, Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
+import { Fragment } from 'react';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { Button } from '../../../button/src';
+import { Icon } from '../../../icon/src';
+import { H3, Text } from '../../../typography/src';
+const twMerge = extendTailwindMerge({
+    prefix: 'nucleus-',
+});
+const MODAL_STYLES = {
+    xs: 'sm:nucleus-max-w-modal-xs sm:nucleus-max-h-modalWindow sm:nucleus-h-auto',
+    sm: 'sm:nucleus-max-w-modal-sm sm:nucleus-max-h-modalWindow sm:nucleus-h-auto',
+    base: 'sm:nucleus-max-w-modal-base sm:nucleus-max-h-modalWindow sm:nucleus-h-auto',
+    lg: 'sm:nucleus-max-w-modal-lg sm:nucleus-max-h-modalWindow sm:nucleus-h-auto',
+    full: 'sm:nucleus-max-w-full sm:nucleus-h-[92vh]',
+};
+/**
+ * Modal Window overlays on top of, and deactivates all other page content.
+ * It takes the user in different modality where they are required to perform a sub-task or something else important.
+ */
+export const ModalWindow = ({ isOpen, closeWindow, title, header, headerActionButton, width = 'base', position = 'center', headerClassNames, footerClassNames, children, footerPrimaryActionButton, footerSecondaryActionButtons, footerCenterContent, hideCloseIcon = true, removeBodyPadding = false, dataTestId, subtitle, modalContentRef, }) => {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const doNothingOnClose = () => {
+        // onClose is called when the overlay is clicked or the user presses the escape key.
+        // We intentionally don't want to close the modal window in those cases.
+    };
+    return (_jsx(Transition, { show: isOpen, as: Fragment, children: _jsxs(Dialog, { onClose: doNothingOnClose, children: [_jsx(TransitionChild, { as: Fragment, enter: 'nucleus-ease-out nucleus-duration-300', enterFrom: 'nucleus-opacity-0', enterTo: 'nucleus-opacity-100', leave: 'nucleus-ease-in nucleus-duration-200', leaveFrom: 'nucleus-opacity-100', leaveTo: 'nucleus-opacity-0', children: _jsx("div", { className: 'nucleus-fixed nucleus-inset-0 nucleus-bg-neutral-900 nucleus-transition-opacity nucleus-bg-opacity-60 nucleus-backdrop-blur-md nucleus-z-10 nucleus-h-screen' }) }), _jsx("div", { className: 'nucleus-fixed nucleus-z-10 nucleus-overflow-y-auto nucleus-inset-0', children: _jsx("div", { className: `nucleus-fixed nucleus-flex nucleus-justify-center nucleus-inset-0 nucleus-h-screen ${{
+                            top: 'nucleus-items-start sm:nucleus-mt-16',
+                            center: 'nucleus-items-center',
+                        }[position]}`, children: _jsx(TransitionChild, { as: Fragment, enter: 'nucleus-ease-out nucleus-duration-300', enterFrom: 'nucleus-opacity-0 nucleus-translate-y-4 sm:nucleus-translate-y-0 sm:nucleus-scale-95', enterTo: 'nucleus-opacity-100 nucleus-translate-y-0 sm:nucleus-scale-100', leave: 'nucleus-ease-in nucleus-duration-200', leaveFrom: 'nucleus-opacity-100 nucleus-translate-y-0 sm:nucleus-scale-100', leaveTo: 'nucleus-opacity-0 nucleus-translate-y-4 sm:nucleus-translate-y-0 sm:nucleus-scale-95', children: _jsxs(DialogPanel, { className: `
+                  nucleus-flex nucleus-h-full nucleus-w-screen nucleus-flex-col nucleus-overflow-visible nucleus-bg-white 
+                  nucleus-text-left sm:nucleus-mx-12 sm:nucleus-rounded-md nucleus-shadow-md
+                  ${MODAL_STYLES[width]}
+              `, "data-testid": dataTestId || 'nucleus-modal-window', children: [title && (_jsxs("div", { className: twMerge('nucleus-flex nucleus-flex-row nucleus-items-center nucleus-justify-end nucleus-gap-2 nucleus-border-solid nucleus-mx-4 nucleus-border-0 nucleus-border-neutral-200 nucleus-pb-3 nucleus-pt-2 nucleus-border-b', headerClassNames), children: [_jsxs("div", { className: 'nucleus-box-border nucleus-flex nucleus-flex-col nucleus-grow', children: [_jsx(DialogTitle, { as: 'div', children: _jsx(H3, { as: 'h2', children: title }) }), subtitle && (_jsx(Description, { as: 'div', className: 'nucleus-box-border nucleus-font-sans nucleus-m-0', children: typeof subtitle === 'string' ? (_jsx(Text, { size: 'sm', className: 'nucleus-text-text-secondary', children: subtitle })) : (subtitle) }))] }), headerActionButton && (_jsx(Button, { size: 'sm', variant: 'transparent', label: headerActionButton.label, onClick: headerActionButton.onClick })), !hideCloseIcon && closeWindow && (_jsx("button", { className: 'nucleus-flex nucleus-border-none nucleus-bg-transparent nucleus-rounded-full nucleus-p-0 hover:nucleus-cursor-pointer hover:nucleus-bg-neutral-200 focus:nucleus-outline-none focus-visible:nucleus-ring-2 focus-visible:nucleus-ring-primary-500 focus-visible:nucleus-ring-offset-2', onClick: closeWindow, children: _jsx(Icon, { name: 'close' }) }))] })), header, _jsx("div", { ref: modalContentRef, className: `nucleus-grow nucleus-overflow-y-auto ${removeBodyPadding ? '' : 'nucleus-p-4'}`, children: children }), _jsxs("footer", { className: twMerge('nucleus-flex nucleus-relative nucleus-justify-end nucleus-gap-3 nucleus-border-solid nucleus-border-0 nucleus-border-neutral-200 nucleus-p-4 nucleus-items-center nucleus-border-t', footerClassNames), children: [(footerSecondaryActionButtons === null || footerSecondaryActionButtons === void 0 ? void 0 : footerSecondaryActionButtons[1]) && (_jsx("div", { className: 'nucleus-flex nucleus-mr-auto', children: _jsx(Button, Object.assign({ variant: 'secondary' }, footerSecondaryActionButtons[1])) })), footerCenterContent && (_jsx("div", { className: 'nucleus-absolute nucleus-left-1/2 -nucleus-translate-x-1/2', children: footerCenterContent })), (footerSecondaryActionButtons === null || footerSecondaryActionButtons === void 0 ? void 0 : footerSecondaryActionButtons[0]) && (_jsx(Button, Object.assign({ variant: 'secondary' }, footerSecondaryActionButtons[0]))), footerPrimaryActionButton && _jsx(Button, Object.assign({}, footerPrimaryActionButton))] })] }) }) }) })] }) }));
+};
+//# sourceMappingURL=modal_window.component.js.map