@medable/nucleus-ui 2.0.0

package/dropdown/src/lib/dropdown.component.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { autoUpdate, flip, offset, useFloating } from '@floating-ui/react';
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
+import { useContext } from 'react';
+import { createPortal } from 'react-dom';
+import { Avatar } from '../../../avatar/src';
+import { LocaleContext, isRtl } from '../../../i18n/src';
+import { Icon } from '../../../icon/src';
+import { Tooltip } from '../../../tooltip/src';
+import { Text } from '../../../typography/src';
+const PLACEMENT_MAP_LTR = {
+    'bottom': 'bottom-start',
+    'bottom-end': 'bottom-end',
+    'top': 'top-start',
+    'top-end': 'top-end',
+};
+const PLACEMENT_MAP_RTL = {
+    'bottom': 'bottom-end',
+    'bottom-end': 'bottom-start',
+    'top': 'top-end',
+    'top-end': 'top-start',
+};
+const widthClasses = {
+    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',
+};
+/**
+ * Dropdown menus allow users to make a selection from a list of actions to take.
+ *
+ * @privateRemarks The dropdown component uses FloatingUI to implement React portal behavior to the dropdown menu,
+ * allowing it to break from the document flow and render above other elements with overflow. for more info see:
+ * https://floating-ui.com/docs
+ */
+export const Dropdown = ({ variant = 'default', items, label, position = 'bottom-end', portalContainer, iconName, iconSize, selectorClassName, visibleOnHover, displayTooltip = false, tooltipDelay = 500, displayTooltipOnlyOnOverflow = true, width = 'sm', }) => {
+    const { refs, floatingStyles } = useFloating({
+        strategy: 'fixed',
+        placement: isRtl(useContext(LocaleContext)) ? PLACEMENT_MAP_RTL[position] : PLACEMENT_MAP_LTR[position],
+        whileElementsMounted: autoUpdate,
+        middleware: [offset(16), flip({ crossAxis: false })],
+    });
+    return (_jsx(Menu, { as: 'div', ref: refs.setReference, className: `data-[headlessui-state=open]:nucleus-visible nucleus-box-border nucleus-inline-block ${visibleOnHover ? 'nucleus-opacity-0 hover:nucleus-opacity-100 focus:nucleus-opacity-100 focus-within:nucleus-opacity-100 data-[headlessui-state=open]:nucleus-opacity-100' : ''} ${variant === 'default' ? 'nucleus-h-10' : ''}`, children: ({ open, close }) => (_jsxs(_Fragment, { children: [variant === 'default' && (_jsxs(MenuButton, { className: `nucleus-flex nucleus-h-10 nucleus-text-text-primary nucleus-items-center nucleus-gap-1 nucleus-border-solid nucleus-rounded-md nucleus-border nucleus-py-2 nucleus-pl-4 nucleus-pr-3 hover:nucleus-cursor-pointer justify-between ${width ? widthClasses[width] : ''} ${open
+                        ? 'nucleus-bg-primary-75 nucleus-border-primary-75'
+                        : 'nucleus-bg-white nucleus-border-neutral-300 hover:nucleus-bg-neutral-50 focus-visible:nucleus-bg-neutral-50 hover:nucleus-text-text-primary hover:nucleus-border-neutral-500 focus:nucleus-outline-none focus:nucleus-ring-1 focus:nucleus-ring-primary-500 focus:nucleus-border-primary-500 focus-visible:nucleus-text-text-primary'} ${selectorClassName !== null && selectorClassName !== void 0 ? selectorClassName : ''}`, children: [label &&
+                            (displayTooltip ? (_jsx(Tooltip, { title: label, wrapperClassName: 'nucleus-truncate nucleus-text-sm nucleus-inline', as: 'span', delayShow: tooltipDelay, displayOnlyOnOverflow: displayTooltipOnlyOnOverflow, children: label })) : (_jsx(Text, { size: 'sm', className: 'nucleus-truncate', children: label }))), _jsx("span", { className: 'nucleus-ml-auto', children: _jsx(Icon, { name: open ? 'chevronUp' : 'chevronDown', color: 'current', size: 'sm' }) })] })), variant === 'kebab' && (_jsx(MenuButton, { "data-testid": 'nucleus-kebab-button', className: `nucleus-flex nucleus-items-center nucleus-text-text-primary nucleus-border-none nucleus-rounded-full nucleus-p-1 hover:nucleus-cursor-pointer ${open
+                        ? 'nucleus-bg-primary-75 nucleus-border-primary-75'
+                        : 'nucleus-bg-transparent hover:nucleus-bg-neutral-50 focus:nucleus-outline-none focus:nucleus-ring-2 focus:nucleus-ring-primary-500 focus-visible:nucleus-bg-neutral-50'}`, children: _jsx(Icon, { name: 'menu', color: 'current' }) })), variant === 'avatar' && label && (_jsxs(MenuButton, { "data-testid": 'nucleus-avatar-button', className: 'nucleus-flex nucleus-items-center nucleus-border-none nucleus-bg-transparent nucleus-rounded-full nucleus-p-0 hover:nucleus-cursor-pointer focus:nucleus-outline-none focus-visible:nucleus-ring-2 focus-visible:nucleus-ring-primary-500 focus-visible:nucleus-ring-offset-2', children: [_jsx("span", { className: 'nucleus-sr-only', children: label }), _jsx(Avatar, { size: 'sm' })] })), variant === 'icon' && !!label && !!iconName && (_jsxs(MenuButton, { "data-testid": 'nucleus-icon-button', className: 'nucleus-flex nucleus-items-center nucleus-border-none nucleus-bg-transparent nucleus-rounded-full nucleus-p-0 hover:nucleus-cursor-pointer focus:nucleus-outline-none focus-visible:nucleus-ring-2 focus-visible:nucleus-ring-primary-500 focus-visible:nucleus-ring-offset-2', children: [_jsx("span", { className: 'nucleus-sr-only', children: label }), _jsx(Icon, { name: iconName, color: 'current', size: iconSize || 'base' })] })), createPortal(_jsx("div", { className: 'nucleus-absolute nucleus-box-border nucleus-inline-block', children: _jsx(MenuItems, { className: 'nucleus-z-10 nucleus-box-border nucleus-flex nucleus-w-max nucleus-max-w-full nucleus-grow nucleus-flex-col nucleus-bg-white nucleus-text-sm nucleus-shadow-xl nucleus-outline-none nucleus-rounded-md nucleus-max-h-80 nucleus-overflow-y-auto', ref: refs.setFloating, style: floatingStyles, children: items === null || items === void 0 ? void 0 : items.map((item) => {
+                            var _a;
+                            if (item.hidden) {
+                                return null;
+                            }
+                            return (_jsx(MenuItem, { disabled: item.disabled, children: _jsx("div", { className: `nucleus-flex nucleus-items-center nucleus-border-solid nucleus-font-sans 
+                       nucleus-px-4 nucleus-py-1.5 first:nucleus-rounded-t-md last:nucleus-rounded-b-md ui-disabled:nucleus-cursor-not-allowed ui-disabled:nucleus-bg-neutral-200
+                      ui-disabled:nucleus-text-text-disabled ui-disabled:nucleus-border-neutral-200
+                      ${!item.readonly ? 'nucleus-cursor-pointer hover:nucleus-bg-neutral-200 ui-active:nucleus-border-primary-500 hover:ui-active:nucleus-border-neutral-200' : ''}
+                      ${item.hasBottomBorder ? 'nucleus-border-b nucleus-border-neutral-300' : ''}
+                      ${item.hasTopBorder ? 'nucleus-border-t nucleus-border-neutral-300' : ''}
+                      ${!item.hasBottomBorder && !item.hasTopBorder ? 'nucleus-border-2 nucleus-border-white' : ''}
+                      ${item.destructive ? 'nucleus-text-text-error' : 'nucleus-text-text-primary'}
+                      ${(_a = item.className) !== null && _a !== void 0 ? _a : ''}
+                      `, onClick: (event) => item.readonly ? event.preventDefault() : item.onClick({ event, item, closeDropdown: close }), children: item.content }) }, item.id));
+                        }) }) }), portalContainer !== null && portalContainer !== void 0 ? portalContainer : document.body)] })) }));
+};
+//# sourceMappingURL=dropdown.component.js.map

package/dropdown/src/lib/dropdown.types.d.ts

@@ -0,0 +1,114 @@
+import React, { ReactNode } from 'react';
+import { IconName, IconSize } from '../../../icon/src';
+/**
+ * Represents a callback function that is invoked when a dropdown item is clicked.
+ * @param event The mouse event that triggered the click.
+ * @param item The dropdown item that was clicked.
+ * @param closeDropdown A function that can be called to close the dropdown.
+ */
+export type DropdownItemOnClick = ({ event, item, }: {
+    event?: React.MouseEvent<HTMLDivElement, MouseEvent>;
+    item?: DropdownItem;
+    closeDropdown?: () => void;
+}) => void;
+export type DropdownItem = {
+    id: string;
+    /**
+     * The content rendered for this dropdown option. It accepts any valid React node, so that custom content can be
+     * rendered.
+     */
+    content: ReactNode;
+    /**
+     * Whether or not the dropdown option is disabled. Disabled options are skipped by keyboard navigation.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the dropdown option is destructive or not. Destructive options are rendered in red.
+     */
+    destructive?: boolean;
+    /**
+     * Determines if the item will be available in the dropdown menu. If true, the item will not be rendered.
+     */
+    hidden?: boolean;
+    /**
+     * Determines if the item has a top border. Useful for creating a divider between items.
+     */
+    hasTopBorder?: boolean;
+    /**
+     * Determines if the item has a bottom border. Useful for creating a divider between items.
+     */
+    hasBottomBorder?: boolean;
+    /**
+     * Additional class names to apply to the dropdown item.
+     */
+    className?: string;
+} & ({
+    /**
+     * Determines if the item will be read-only. If true, the item will be rendered but not clickable. will not render disabled styles.
+     */
+    readonly: true;
+    onClick?: never;
+} | {
+    /**
+     * Determines if the item will be read-only. If true, the item will be rendered but not clickable. will not render disabled styles.
+     */
+    readonly?: false;
+    /**
+     * The function called when the dropdown option is clicked.
+     * @param event The click event fired. Optional.
+     * @param item The corresponding DropdownItem object. Optional.
+     * @param index The index of the dropdown option. Optional.
+     */
+    onClick: DropdownItemOnClick;
+});
+export type DropdownWidth = 'base' | 'xs' | 'sm' | 'lg' | 'full';
+export type DropdownProps = {
+    items: DropdownItem[];
+    position?: 'bottom' | 'top' | 'bottom-end' | 'top-end';
+    /**
+     * Element container that the dropdown will render to within a react portal. If not specified, the dropdown will get
+     * added to the document body.
+     */
+    portalContainer?: Element | DocumentFragment;
+    /**
+     * Whether the dropdown should be visible only on hover instead of always visible.
+     */
+    visibleOnHover?: boolean;
+    selectorClassName?: string;
+    /**
+     * Whether to display a tooltip for the selected option when hovered over.
+     */
+    displayTooltip?: boolean;
+    /**
+     * The delay in milliseconds before the tooltip is shown.
+     */
+    tooltipDelay?: number;
+    /**
+     * Whether to display the tooltip only when the reference element is overflowing.
+     */
+    displayTooltipOnlyOnOverflow?: boolean;
+} & ({
+    /**
+     * Determines whether to render the kebab icon for the menu header instead of a text label
+     */
+    variant?: 'default' | 'avatar';
+    /**
+     * The label for the menu button. This property will be ignored if variant is kebab
+     */
+    label: string;
+    iconName?: never;
+    iconSize?: never;
+    width?: DropdownWidth;
+} | {
+    variant?: 'kebab';
+    label?: never;
+    iconName?: never;
+    iconSize?: never;
+    width?: never;
+} | {
+    variant?: 'icon';
+    label: string;
+    iconName: IconName;
+    iconSize?: IconSize;
+    width?: never;
+});

package/dropdown/src/lib/dropdown.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=dropdown.types.js.map

package/file_uploader/src/index.d.ts

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

package/file_uploader/src/index.js

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

package/file_uploader/src/lib/file_uploader.d.ts

@@ -0,0 +1,99 @@
+import { FC, JSX } from 'react';
+type InputNativeProps = Omit<JSX.IntrinsicElements['input'], 'className'>;
+type BaseFileState = {
+    /**
+     * String representing the type of the file state.
+     */
+    type: string;
+    /**
+     * String representing the message for file state.
+     */
+    message?: string;
+};
+type PendingFileState = BaseFileState & {
+    type: 'pending';
+};
+type InProgressFileState = BaseFileState & {
+    type: 'inProgress';
+    /**
+     * Number indicating the upload progress for uploaded file (in bytes).
+     */
+    loadingIndicator: number;
+};
+type ErrorFileState = BaseFileState & {
+    type: 'error';
+};
+type SuccessFileState = BaseFileState & {
+    type: 'success';
+};
+type FileState = InProgressFileState | PendingFileState | ErrorFileState | SuccessFileState;
+export type FilesObjectType = {
+    [key: string]: File;
+};
+export type FileStatesType = {
+    [key: string]: FileState;
+};
+export interface FileUploaderProps extends InputNativeProps {
+    /**
+     * String representing the label to be displayed for the file uploader component.
+     */
+    label: string;
+    /**
+     * String representing the label to be displayed on the button for uploading files. If not provided, a default label will be used.
+     */
+    buttonLabel?: string;
+    /**
+     * Boolean indicating whether the file uploader component requires at least one file to be uploaded before submitting.
+     */
+    required?: boolean;
+    /**
+     * If true, hides the required indicator on the label.
+     */
+    hideRequiredIndicator?: boolean;
+    /**
+     * String representing the file types to be accepted by the file uploader component. If not provided, all file types will be accepted.
+     */
+    accept?: string;
+    /**
+     * Boolean indicating whether multiple files can be uploaded at once.
+     */
+    multiple?: InputNativeProps['multiple'];
+    /**
+     * Boolean indicating whether the file uploader component is disabled or not
+     */
+    disabled?: InputNativeProps['disabled'];
+    /**
+     * String representing the error message to be displayed for the file uploader component.
+     */
+    errorMessage?: string;
+    /**
+     * String representing the description to be displayed for the file uploader component.
+     */
+    description?: string;
+    /**
+     * Array of strings representing the descriptions for each uploaded file.
+     */
+    fileDescription?: string;
+    /**
+     * Callback function that takes an array of File objects as its argument. This function is called when the user selects files to upload.
+     */
+    onFileChange: (filesObject: FilesObjectType) => void;
+    /**
+     * Callback function that takes an array of File objects, an index, and a callback function as its arguments.
+     * This function is called when the user clicks the delete button for an uploaded file.
+     * @param filesObject - Array of new File objects after the file is deleted.
+     * @param index - Index of the file to be deleted.
+     * @param onSuccess - Callback function to be called when the file is successfully deleted.
+     */
+    onFileDelete?: (filesObject: FilesObjectType, index: number, onSuccess: () => void, deletedFile?: File) => void;
+    /**
+     * Object representing the file states for each uploaded file.
+     */
+    fileStates: FileStatesType;
+    /**
+     * Number representing the maximum file size allowed for each uploaded file (in bytes).
+     */
+    maxFileSize?: number;
+}
+export declare const FileUploader: FC<FileUploaderProps>;
+export {};

package/file_uploader/src/lib/file_uploader.js

@@ -0,0 +1,103 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { Button } from '../../../button/src';
+import { useLocalizeMessage } from '../../../i18n/src';
+import { Icon } from '../../../icon/src';
+export const FileUploader = (_a) => {
+    var { label, buttonLabel, description, fileDescription, required, hideRequiredIndicator, accept, multiple, disabled, errorMessage, onFileChange, onFileDelete, fileStates, maxFileSize } = _a, inputProps = __rest(_a, ["label", "buttonLabel", "description", "fileDescription", "required", "hideRequiredIndicator", "accept", "multiple", "disabled", "errorMessage", "onFileChange", "onFileDelete", "fileStates", "maxFileSize"]);
+    const localizeMessage = useLocalizeMessage();
+    const inputRef = useRef(null);
+    const [files, setFiles] = useState({});
+    const fileId = useRef(0);
+    const nextFileId = () => {
+        fileId.current++;
+        return fileId.current - 1;
+    };
+    const [fileSizeError, setFileSizeError] = useState(null);
+    const handlePickFile = (event) => {
+        const { files: eventFiles } = event.target;
+        if (eventFiles && eventFiles.length > 0) {
+            let newFiles = {};
+            if (multiple) {
+                newFiles = Object.assign({}, files);
+            }
+            const eventFilesArray = Array.from(eventFiles);
+            const oversizedFiles = eventFilesArray.filter((file) => maxFileSize && file.size > maxFileSize);
+            if (oversizedFiles.length > 0) {
+                setFileSizeError(multiple
+                    ? localizeMessage('One or more files exceed the maximum file size.')
+                    : localizeMessage('File exceeds the maximum file size.'));
+                if (!multiple) {
+                    setFiles({});
+                    onFileChange === null || onFileChange === void 0 ? void 0 : onFileChange({});
+                }
+                return;
+            }
+            setFileSizeError(null);
+            eventFilesArray.forEach((file) => {
+                // get the file extension from the file name and validate it against the accepted file types
+                const fileExtension = file.name.split('.').pop();
+                if (accept && accept !== '*' && fileExtension && !accept.includes(fileExtension)) {
+                    return;
+                }
+                newFiles[nextFileId()] = file;
+            });
+            setFiles(newFiles);
+            onFileChange === null || onFileChange === void 0 ? void 0 : onFileChange(newFiles);
+        }
+    };
+    const handleDeleteFile = (id) => () => {
+        var _a;
+        const newFiles = Object.assign({}, files);
+        const deletedFile = newFiles[id];
+        delete newFiles[id];
+        onFileDelete === null || onFileDelete === void 0 ? void 0 : onFileDelete(newFiles, id, () => {
+            setFiles(newFiles);
+        }, deletedFile);
+        ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) && (inputRef.current.value = '');
+        setFileSizeError(null);
+    };
+    const getDefaultFileStateMessage = (fileState) => {
+        switch (fileState.type) {
+            case 'pending':
+                return localizeMessage('Preparing');
+            case 'inProgress':
+                return localizeMessage('Uploading');
+            case 'error':
+                return localizeMessage('Error');
+        }
+        return null;
+    };
+    const getMessage = (fileState) => {
+        if (fileState.message) {
+            return fileState.message;
+        }
+        const defaultMessage = getDefaultFileStateMessage(fileState);
+        if (!defaultMessage) {
+            return null;
+        }
+        return getDefaultFileStateMessage(fileState);
+    };
+    const renderFileState = (id, fileState, fileSize) => {
+        const message = getMessage(fileState);
+        return (_jsx("div", { className: 'nucleus-flex nucleus-flex-row nucleus-gap-2', children: (fileState === null || fileState === void 0 ? void 0 : fileState.type) === 'error' ? (_jsx("div", { className: 'nucleus-truncate nucleus-text-xs nucleus-text-text-error', children: message })) : (_jsxs(_Fragment, { children: [message && (_jsxs(_Fragment, { children: [_jsx("div", { className: 'nucleus-text-xs nucleus-text-text-secondary', children: message }), _jsx("div", { className: 'nucleus-text-xs nucleus-text-neutral-300', children: "|" })] })), _jsxs("div", { className: 'nucleus-text-xs nucleus-text-text-secondary', children: [(fileSize / 1024).toFixed(2), "kb"] })] })) }));
+    };
+    const renderFileItem = (id, file) => {
+        var _a, _b;
+        const currentFileState = (_a = fileStates[id]) !== null && _a !== void 0 ? _a : {
+            type: 'pending',
+        };
+        return (_jsxs("div", { className: `
+        nucleus-flex nucleus-flex-row nucleus-items-center nucleus-gap-4 nucleus-border-solid nucleus-bg-neutral-100
+        nucleus-rounded-md nucleus-border nucleus-border-neutral-300 nucleus-px-4 nucleus-py-2
+      `, children: [_jsxs("div", { className: 'nucleus-relative nucleus-h-5 nucleus-w-5 nucleus-shrink-0', children: [(currentFileState === null || currentFileState === void 0 ? void 0 : currentFileState.type) === 'error' && _jsx(Icon, { name: 'error', color: 'red' }), (currentFileState === null || currentFileState === void 0 ? void 0 : currentFileState.type) === 'success' && _jsx(Icon, { name: 'success', color: 'green' }), (currentFileState === null || currentFileState === void 0 ? void 0 : currentFileState.type) !== 'error' && (currentFileState === null || currentFileState === void 0 ? void 0 : currentFileState.type) !== 'success' && (_jsxs(_Fragment, { children: [_jsx("svg", { viewBox: '0 0 100 100', xmlns: 'http://www.w3.org/2000/svg', className: 'nucleus-absolute', children: _jsx("circle", { cx: '50', cy: '50', r: '45', strokeDasharray: '283', strokeWidth: '11', fill: 'transparent', className: 'nucleus-stroke-neutral-200' }) }), (currentFileState === null || currentFileState === void 0 ? void 0 : currentFileState.type) === 'inProgress' && (_jsx("svg", { viewBox: '0 0 100 100', xmlns: 'http://www.w3.org/2000/svg', className: 'nucleus-relative', children: _jsx("circle", { cx: '50', cy: '50', r: '45', strokeDasharray: '283', strokeWidth: '11', fill: 'transparent', strokeDashoffset: 283 - (283 * ((_b = currentFileState === null || currentFileState === void 0 ? void 0 : currentFileState.loadingIndicator) !== null && _b !== void 0 ? _b : 0)) / file.size, className: 'nucleus-origin-center -nucleus-rotate-90 nucleus-stroke-primary-500' }) }))] }))] }), _jsxs("div", { className: 'nucleus-flex nucleus-grow nucleus-flex-col nucleus-gap-2 nucleus-overflow-hidden', children: [_jsx("div", { className: `nucleus-truncate nucleus-text-sm ${(currentFileState === null || currentFileState === void 0 ? void 0 : currentFileState.type) === 'error' ? 'nucleus-text-text-error' : 'nucleus-text-text-secondary'}`, children: file.name }), renderFileState(id, currentFileState, file.size)] }), _jsx("div", { className: 'nucleus-shrink-0', children: _jsx(Button, { type: 'button', "data-testid": `file-uploader-delete-button-${id}`, label: localizeMessage('Delete'), size: 'sm', variant: 'transparent', onClick: handleDeleteFile(id) }) })] }, id));
+    };
+    return (_jsxs("div", { className: 'nucleus-box-border nucleus-font-sans', children: [_jsxs("div", { className: 'nucleus-mb-5', children: [_jsxs("div", { className: 'nucleus-text-sm nucleus-font-medium nucleus-text-text-primary', children: [label, required && !hideRequiredIndicator && (_jsxs("span", { className: 'nucleus-text-text-error', "data-testid": 'file-uploader-required-label', children: [' ', "*"] }))] }), description && _jsx("div", { className: 'nucleus-text-xs nucleus-text-text-secondary', children: description })] }), _jsx("input", Object.assign({ "data-testid": 'file-uploader-input', ref: inputRef, type: 'file', tabIndex: -1, className: 'nucleus-peer nucleus-absolute nucleus-box-border nucleus-h-0 nucleus-w-0 nucleus-appearance-none nucleus-opacity-0 nucleus-m-0', accept: accept, multiple: multiple, disabled: disabled }, inputProps, { onChange: handlePickFile })), _jsx("div", { className: `${!fileDescription && Object.keys(files).length ? 'nucleus-mb-5' : ''}`, children: _jsx(Button, { type: 'button', "data-testid": 'file-uploader-button', label: buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : localizeMessage('Upload file'), disabled: disabled, onClick: (e) => {
+                        if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
+                            e.preventDefault();
+                            inputRef.current.click();
+                        }
+                    }, size: 'sm', variant: 'secondary' }) }), fileDescription && (_jsx("div", { className: 'nucleus-text-sm nucleus-text-text-secondary nucleus-mb-5 nucleus-mt-2', children: fileDescription })), _jsx("div", { className: 'flex flex-col gap-2', children: Object.keys(files).map((id) => renderFileItem(Number(id), files[Number(id)])) }), errorMessage && (_jsxs("div", { className: 'nucleus-flex nucleus-items-center nucleus-text-xs nucleus-text-text-error nucleus-mt-1', children: [_jsx("div", { className: 'nucleus-mr-2', children: _jsx(Icon, { name: 'error', color: 'red' }) }), errorMessage] })), fileSizeError && (_jsxs("div", { className: 'nucleus-flex nucleus-items-center nucleus-text-xs nucleus-text-text-error nucleus-mt-1', children: [_jsx("div", { className: 'nucleus-mr-2', children: _jsx(Icon, { name: 'error', color: 'red' }) }), fileSizeError] }))] }));
+};
+//# sourceMappingURL=file_uploader.js.map

package/form_sections/src/index.d.ts

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

package/form_sections/src/index.js

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

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

@@ -0,0 +1,18 @@
+import { ReactElement } from 'react';
+export interface FormSectionsProps {
+    /** pane sections */
+    sections: FormSection[];
+}
+export interface FormSection {
+    /** title of section */
+    title: ReactElement | string;
+    /** description of section */
+    description?: ReactElement | string;
+    /** section content, ex: text, form inputs */
+    content: ReactElement;
+    /**
+     * Defines if the section should be hidden
+     */
+    hidden?: boolean;
+}
+export declare const FormSections: ({ sections }: FormSectionsProps) => import("react/jsx-runtime").JSX.Element;

package/form_sections/src/lib/form_sections.component.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { H5, Text } from '../../../typography/src';
+export const FormSections = ({ sections }) => {
+    return (_jsx("section", { children: sections.map(({ title, description, content, hidden }, index) => {
+            if (hidden) {
+                return null;
+            }
+            return (_jsxs("section", { className: 'nucleus-box-border nucleus-font-sans nucleus-flex nucleus-flex-col nucleus-gap-7 nucleus-py-8 first:nucleus-pt-0 last:nucleus-pb-0 md:nucleus-flex-row md:nucleus-gap-8 nucleus-border-solid nucleus-border-neutral-200 nucleus-border-x-0 nucleus-border-t-0 nucleus-border-b last:nucleus-border-b-0', children: [_jsxs("div", { className: 'nucleus-box-border nucleus-flex nucleus-shrink-0 nucleus-flex-col nucleus-gap-2 md:nucleus-w-48', children: [_jsx(H5, { as: 'h2', className: 'nucleus-box-border nucleus-text-text-primary', children: title }), description && (_jsx(Text, { size: 'sm', className: 'nucleus-box-border nucleus-text-text-secondary', children: description }))] }), _jsx("div", { className: 'nucleus-box-border nucleus-flex-1', children: content })] }, `${title}-${index}`));
+        }) }));
+};
+//# sourceMappingURL=form_sections.component.js.map

package/header/src/index.d.ts

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

package/header/src/index.js

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

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

@@ -0,0 +1,59 @@
+import { ElementType, ReactElement, ReactNode } from 'react';
+import { DropdownItem } from '../../../dropdown/src';
+export interface HeaderProps {
+    /** src for header image */
+    logoSrc?: string | ReactElement;
+    /** array of navigation links to display in header */
+    navLinks?: HeaderNavLink[];
+    /** path of the active navigational link */
+    activeLinkPath?: string;
+    /** Options for the dropdown menu */
+    dropdownOptions?: DropdownItem[];
+    /** Render prop for using custom links such as React Router DOM Links */
+    renderLink?: (props: HeaderRenderLinkProps) => ReactNode;
+    /** Callback for when user clicks the Sign Out option in the dropdown */
+    onSignOut: () => void;
+    workspaceOptions?: DropdownItem[];
+    /**
+     * Workspace to display in the header
+     */
+    selectedWorkspace?: string;
+    /**
+     * Flag to enable the workspace switcher
+     */
+    switcherEnabled?: boolean;
+    notificationsConfig?: {
+        /**
+         * Flag to enable notifications icon in the header
+         */
+        enabled: boolean;
+        /**
+         * Flag to indicate if there are unread notifications
+         */
+        hasUnread: boolean;
+        /**
+         * Determines if the notifications icon is active (meaning notifications page is open)
+         */
+        isActive: boolean;
+        /**
+         * Callback for when user clicks the notifications icon
+         */
+        onClick: () => void;
+    };
+}
+export interface HeaderNavLink {
+    name: ReactNode;
+    path: string;
+    onClick?: () => void;
+    /**
+     * The component to use for the link, used to override the default anchor tag.
+     */
+    LinkComponent?: ElementType;
+}
+export interface HeaderRenderLinkProps extends HeaderNavLink {
+    linkStyles: string;
+    isActive: boolean;
+}
+/** The Header component renders a logo image, navigational links, and a clickable
+ * avatar that presents a dropdown, all of which are configurable via the component's props. */
+export declare const Header: ({ navLinks, activeLinkPath, logoSrc, dropdownOptions, renderLink, onSignOut, workspaceOptions, selectedWorkspace, switcherEnabled, notificationsConfig, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;

package/header/src/lib/header.component.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Dropdown } from '../../../dropdown/src';
+import { useLocalizeMessage } from '../../../i18n/src';
+import { Icon } from '../../../icon/src';
+import { Link } from '../../../link/src';
+import { Logo } from '../../../logo/src';
+import { Text } from '../../../typography/src';
+import { useMediaQuery } from './use_media_query';
+const defaultRenderLink = ({ name, path, linkStyles, isActive, onClick, LinkComponent }) => {
+    return (_jsx(Link, { href: path, variant: 'custom', customStyles: linkStyles, "aria-current": isActive ? 'page' : undefined, onClick: onClick, LinkComponent: LinkComponent, children: name }, path));
+};
+const getLinkStyles = (isActive, isDesktop) => {
+    return `nucleus-box-border nucleus-border-solid nucleus-shrink-0 nucleus-text-sm nucleus-border-0 nucleus-border-b-2 nucleus-no-underline nucleus-px-2 focus-visible:nucleus-outline-none focus-visible:nucleus-ring-2 focus-visible:nucleus-ring-primary-500 focus-visible:nucleus-ring-offset-1 ${isDesktop ? 'nucleus-py-[0.9375rem]' : 'nucleus-text-xs nucleus-py-[1.1875rem]'} ${isActive
+        ? 'nucleus-text-text-primary nucleus-border-primary-500 hover:nucleus-text-text-primary'
+        : 'nucleus-text-neutral-500 nucleus-border-transparent hover:nucleus-border-opacity-100 hover:nucleus-text-text-enabled hover:nucleus-border-neutral-300'}`;
+};
+/** The Header component renders a logo image, navigational links, and a clickable
+ * avatar that presents a dropdown, all of which are configurable via the component's props. */
+export const Header = ({ navLinks = [], activeLinkPath, logoSrc, dropdownOptions = [], renderLink = defaultRenderLink, onSignOut, workspaceOptions, selectedWorkspace, switcherEnabled = false, notificationsConfig, }) => {
+    const hasLinks = navLinks.length > 0;
+    const translate = useLocalizeMessage();
+    const isDesktop = useMediaQuery({ query: '(min-width: 1245px)' });
+    const avatarMenuOptions = useMemo(() => [
+        ...dropdownOptions,
+        {
+            id: 'sign-out',
+            content: _jsx("div", { children: translate('Sign out') }),
+            onClick: onSignOut,
+        },
+    ], [dropdownOptions]);
+    // NOTE: don't look at this too closely, there is currently no explicit design for the mobile link menu.
+    // most likely it'll be a side drawer in the future and this logic will change.
+    const mobileNavLinkOptions = useMemo(() => navLinks.map(({ name, path, onClick }) => {
+        const isActive = path === activeLinkPath;
+        const onDropdownClick = ({ closeDropdown }) => {
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+            closeDropdown === null || closeDropdown === void 0 ? void 0 : closeDropdown();
+        };
+        return {
+            id: path,
+            content: (_jsx("div", { role: 'link', "aria-current": isActive ? 'page' : undefined, children: name }, path)),
+            onClick: onDropdownClick,
+        };
+    }), [navLinks]);
+    return (_jsxs("header", { className: 'nucleus-box-border nucleus-font-sans nucleus-relative nucleus-flex nucleus-justify-between nucleus-items-center nucleus-gap-24 nucleus-bg-white nucleus-shadow nucleus-px-6 focus-visible:nucleus-outline-none', children: [hasLinks && (_jsxs("div", { className: 'nucleus-box-border nucleus-flex nucleus-items-center sm:nucleus-hidden', children: [_jsx("span", { className: 'nucleus-sr-only', children: translate('Open main menu') }), _jsx(Dropdown, { label: translate('portal links'), variant: 'icon', iconName: 'hamburgerMenu', items: mobileNavLinkOptions, position: 'bottom' })] })), typeof logoSrc === 'string' ? (_jsx("img", { src: logoSrc, alt: 'Medable logo', className: 'nucleus-h-8 nucleus-py-3 nucleus-min-w-8' })) : (_jsx("div", { className: `nucleus-flex nucleus-h-8 nucleus-box-content nucleus-items-center nucleus-justify-center nucleus-w-32 nucleus-py-3 ${isDesktop ? 'nucleus-w-32 nucleus-min-w-32' : 'nucleus-w-8 nucleus-min-w-8'}`, children: logoSrc || _jsx(Logo, { wordless: !isDesktop }) })), hasLinks && (_jsx("nav", { className: 'nucleus-box-border nucleus-hidden sm:nucleus-flex nucleus-items-center nucleus-gap-6 nucleus-mr-auto', children: navLinks.map(({ name, path, LinkComponent }) => {
+                    const isActive = path === activeLinkPath;
+                    const linkStyles = getLinkStyles(isActive, isDesktop);
+                    return renderLink({ name, path, linkStyles, isActive, LinkComponent });
+                }) })), _jsxs("div", { className: 'nucleus-flex nucleus-items-center nucleus-gap-6', children: [workspaceOptions && selectedWorkspace && (_jsxs("div", { className: 'nucleus-flex nucleus-items-center nucleus-border-r nucleus-h-10 nucleus-pr-6 nucleus-border-neutral-400 nucleus-text-text-primary', children: [!switcherEnabled && _jsx(Text, { size: 'sm', children: selectedWorkspace }), switcherEnabled && (_jsx(Dropdown, { items: workspaceOptions, label: selectedWorkspace, position: 'bottom-end', selectorClassName: 'nucleus-border-0 nucleus-gap-4', variant: 'default', width: 'full' }))] })), notificationsConfig && notificationsConfig.enabled && (_jsxs("div", { className: `nucleus-rounded-full nucleus-p-1 nucleus-cursor-pointer nucleus-relative ${notificationsConfig.isActive ? 'nucleus-bg-neutral-200' : ''}`, onClick: notificationsConfig.onClick, children: [notificationsConfig.hasUnread && (_jsx("div", { className: 'nucleus-absolute nucleus-top-1 nucleus-right-1 nucleus-p-0.5 nucleus-bg-white nucleus-rounded-full', children: _jsx("div", { className: 'nucleus-bg-red-500 nucleus-size-2 nucleus-rounded-full' }) })), _jsx(Icon, { name: 'bellSolid', color: 'grayDark' })] })), _jsx(Dropdown, { label: translate('user avatar'), variant: 'avatar', items: avatarMenuOptions, position: 'bottom-end' })] })] }));
+};
+//# sourceMappingURL=header.component.js.map

package/header/src/lib/use_media_query.d.ts

@@ -0,0 +1,17 @@
+interface UseMediaQueryOptions {
+    query: string;
+}
+/**
+ * A React hook that tracks the state of a CSS media query.
+ *
+ * @param options - Configuration object containing the media query string
+ * @returns Boolean indicating whether the media query matches
+ *
+ * @example
+ * ```tsx
+ * const isDesktop = useMediaQuery({ query: '(min-width: 1150px)' });
+ * const isMobile = useMediaQuery({ query: '(max-width: 768px)' });
+ * ```
+ */
+export declare const useMediaQuery: ({ query }: UseMediaQueryOptions) => boolean;
+export {};