@medable/nucleus-ui 2.0.0

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

@@ -0,0 +1,84 @@
+import { PropsWithChildren, ReactNode, RefObject } from 'react';
+import { ButtonProps } from '../../../button/src';
+export type ModalWindowSizes = 'base' | 'xs' | 'sm' | 'lg' | 'full';
+export type ModalWindowButtonProps = Omit<ButtonProps, 'size' | 'ref'>;
+export type ModalWindowProps = PropsWithChildren<ModalWindowHeaderProps & {
+    /**
+     * A boolean that indicates whether or not the Modal Window is open.
+     */
+    isOpen: boolean;
+    /**
+     * Setting the position of the Modal Window.
+     */
+    position?: 'top' | 'center';
+    /**
+     * Custom className to apply to the header element
+     */
+    headerClassNames?: string;
+    /**
+     * Custom className to apply to the footer element
+     */
+    footerClassNames?: string;
+    /**
+     * A function to close the Modal Window.
+     */
+    closeWindow?: () => void;
+    /**
+     * Sets the size of the Modal Window. This will be ignored on mobile viewport
+     * as it will always occupy 100% of viewport width and height.
+     */
+    width?: ModalWindowSizes;
+    /**
+     * The Modal Window will have a primary action button in the footer.
+     */
+    footerPrimaryActionButton?: ModalWindowButtonProps;
+    /**
+     * The Modal Window can have upto 2 secondary action buttons in the footer.
+     */
+    footerSecondaryActionButtons?: readonly [ModalWindowButtonProps] | readonly [ModalWindowButtonProps, ModalWindowButtonProps];
+    /**
+     * Optional content that will display centered on the modal's footer
+     */
+    footerCenterContent?: ReactNode;
+    /**
+     * Remove default padding from the body of the modal window.
+     */
+    removeBodyPadding?: boolean;
+    /**
+     * A test id for the modal window component.
+     */
+    dataTestId?: string;
+    /**
+     * A reference to the modal content container.
+     */
+    modalContentRef?: RefObject<HTMLDivElement>;
+}>;
+export type ModalWindowHeaderProps = {
+    /**
+     * The title of the Modal Window. Rendered as an H3.
+     */
+    title: string;
+    /**
+     * The subtitle of the Modal Window. Can be any valid React Node.
+     */
+    subtitle?: ReactNode;
+    /**
+     * The Modal Window can have an action button in the header.
+     */
+    headerActionButton?: ModalWindowButtonProps;
+    /**
+     * A boolean to hide the close icon in the top right of the modal header.
+     */
+    hideCloseIcon?: boolean;
+    header?: never;
+} | {
+    /**
+     * The header of the Modal Window. Can be any valid React Node.
+     * To be used when title/subtitle option is not enough
+     */
+    header: ReactNode;
+    title?: never;
+    subtitle?: never;
+    headerActionButton?: never;
+    hideCloseIcon?: never;
+};

package/modal_window/src/lib/modal_window.types.js

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

package/notification/src/index.d.ts

@@ -0,0 +1,5 @@
+export * from './lib/notification_inline.component';
+export * from './lib/notification_toast.component';
+export * from './lib/notification_toast.provider';
+export * from './lib/notification_callout.component';
+export * from './lib/use_toast_notification.hook';

package/notification/src/index.js

@@ -0,0 +1,6 @@
+export * from './lib/notification_inline.component';
+export * from './lib/notification_toast.component';
+export * from './lib/notification_toast.provider';
+export * from './lib/notification_callout.component';
+export * from './lib/use_toast_notification.hook';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,74 @@
+import { ReactElement, ReactNode, Ref } from 'react';
+import { ButtonProps } from '../../../button/src';
+import { IconName } from '../../../icon/src';
+import type { LinkPropTypes } from '../../../link/src';
+export type ButtonActionProps = ButtonProps & {
+    type: 'button';
+    ref: Ref<HTMLButtonElement>;
+};
+export type LinkActionProps = LinkPropTypes & {
+    type: 'link';
+    label: string;
+};
+type NotificationType = 'success' | 'warning' | 'error' | 'info';
+export type ActionableNotification = {
+    /**
+     * Actionable notifications always require an alert role
+     * alert - https://www.w3.org/TR/wai-aria-1.2/#alert
+     */
+    role?: 'alert';
+    /**
+     * The actionable link element that will be displayed on the notification
+     */
+    action: ReactElement<LinkActionProps> | ReactElement<ButtonActionProps>;
+};
+export type NonActionableNotification = {
+    /**
+     * Non Actionable notifications can have one of the following roles:
+     * status - https://www.w3.org/TR/wai-aria-1.2/#status
+     * log - https://www.w3.org/TR/wai-aria-1.2/#log
+     */
+    role?: 'status' | 'log';
+    /**
+     * The action button properties that will be displayed on the notification
+     */
+    action?: never;
+};
+export type NotificationProps = (ActionableNotification | NonActionableNotification) & {
+    /**
+     * The variant for the notification. Can be one of:
+     * inline - notification appears inline and has a border matching the type of the notification
+     * toast - are time based and appear and disappear automatically after a few seconds
+     */
+    variant: 'inline' | 'toast' | 'callout';
+    /**
+     * The title for the notification
+     */
+    title: string;
+    /**
+     * The subtitle for the notification
+     */
+    subtitle?: ReactNode;
+    /**
+     * Method that will be called to close / dismiss the notification
+     */
+    onClose?: () => void;
+    /**
+     * A boolean that indicates whether or not the close button will be displayed
+     */
+    closeable?: boolean;
+    /**
+     * The type of the notification. Can be one of: success, warning, error, info
+     */
+    type?: NotificationType;
+    /**
+     * Custom icon to be displayed in the notification. Applicable for toast and inline notifications
+     */
+    customIcon?: IconName;
+    /**
+     * A boolean that indicates whether or not the icon will be displayed
+     */
+    hideIcon?: boolean;
+};
+export declare const Notification: ({ role, type, title, subtitle, variant, action, closeable, onClose, customIcon, hideIcon, }: NotificationProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/notification/src/lib/notification.component.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Icon } from '../../../icon/src';
+import { H5, Text } from '../../../typography/src';
+const styleMap = {
+    success: {
+        styles: 'nucleus-border-green-500 nucleus-bg-green-50 nucleus-text-green-900',
+        icon: 'green',
+        closeButton: 'nucleus-text-green-500 focus-visible:nucleus-ring-green-500',
+        actionButton: '!nucleus-text-green-900 !nucleus-ring-green-500',
+    },
+    warning: {
+        styles: 'nucleus-border-yellow-600 nucleus-bg-yellow-50 nucleus-text-yellow-900',
+        icon: 'yellow',
+        closeButton: 'nucleus-text-yellow-500 focus-visible:nucleus-ring-yellow-500',
+        actionButton: '!nucleus-text-yellow-900 !nucleus-ring-yellow-500',
+    },
+    error: {
+        styles: 'nucleus-border-red-500 nucleus-bg-red-50 nucleus-text-red-900',
+        icon: 'red',
+        closeButton: 'nucleus-text-red-500 focus-visible:nucleus-ring-red-500',
+        actionButton: '!nucleus-text-red-900 !nucleus-ring-red-500',
+    },
+    info: {
+        styles: 'nucleus-border-blue-600 nucleus-bg-blue-50 nucleus-text-blue-900',
+        icon: 'blue',
+        closeButton: 'nucleus-text-blue-600 focus-visible:nucleus-ring-blue-600',
+        actionButton: '!nucleus-text-blue-900 !nucleus-ring-blue-600',
+    },
+};
+const iconMap = {
+    success: 'checkCircleSolid',
+    warning: 'exclamationTriangleSolid',
+    error: 'xCircleSolid',
+    info: 'infoCircleSolid',
+};
+export const Notification = ({ role = 'status', type = 'info', title, subtitle, variant = 'inline', action, closeable = false, onClose, customIcon, hideIcon = false, }) => (_jsxs("div", { "data-testid": 'nucleus-notification', role: action ? 'alert' : role, className: `nucleus-box-border nucleus-text-sm nucleus-flex nucleus-w-full nucleus-gap-4 nucleus-border-solid nucleus-border-0 nucleus-border-l-4 nucleus-font-sans nucleus-normal-case nucleus-outline-0 ${styleMap[type].styles} ${variant === 'toast' ? 'nucleus-drop-shadow-xl' : ''} ${variant === 'callout' ? '!nucleus-bg-white nucleus-px-4' : 'nucleus-p-4'} ${variant !== 'callout' ? 'nucleus-rounded-md' : ''}`, children: [variant !== 'callout' && !hideIcon && (_jsx("div", { className: 'nucleus-flex-none nucleus-self-start', "data-testid": 'notification-type-icon', children: _jsx(Icon, { name: customIcon || iconMap[type], color: styleMap[type].icon }) })), _jsxs("div", { className: 'nucleus-flex nucleus-flex-1 nucleus-gap-1 nucleus-flex-col', children: [_jsx(H5, { className: `nucleus-text-sm ${variant === 'callout' ? 'nucleus-font-bold' : 'nucleus-font-medium'}`, children: title }), subtitle && (_jsxs("div", { className: 'nucleus-grow nucleus-m-0 nucleus-whitespace-pre-wrap', children: [typeof subtitle !== 'string' && subtitle, typeof subtitle === 'string' && (_jsx(Text, { size: 'sm', className: variant === 'callout' ? 'nucleus-text-text-primary' : '', children: subtitle }))] })), variant === 'toast' && action && (_jsx("div", { children: React.cloneElement(action, {
+                        variant: 'secondary',
+                    }) }))] }), _jsxs("div", { className: 'nucleus-flex nucleus-gap-4 nucleus-ml-auto', children: [variant !== 'toast' && action && (_jsx("div", { children: React.cloneElement(action, {
+                        variant: 'custom',
+                        customStyles: `nucleus-box-border nucleus-no-underline nucleus-font-medium focus:nucleus-outline-none focus:nucleus-ring-2 focus:nucleus-ring-offset-2 ${styleMap[type].actionButton}`,
+                    }) })), closeable && onClose && (_jsx("div", { children: _jsx("button", { className: `nucleus-box-border nucleus-border-none nucleus-bg-transparent nucleus-rounded-full nucleus-p-0 nucleus-cursor-pointer focus:nucleus-outline-none focus-visible:nucleus-ring-2 focus-visible:nucleus-ring-offset-2 ${styleMap[type].closeButton}`, "aria-label": 'close', onClick: onClose, children: _jsx(Icon, { name: 'close', color: 'current' }) }) }))] })] }));
+//# sourceMappingURL=notification.component.js.map

package/notification/src/lib/notification_callout.component.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { ActionableNotification, LinkActionProps, NonActionableNotification, NotificationProps } from './notification.component';
+export type ActionableCalloutNotification = ActionableNotification & {
+    /**
+     * The actionable link element that will be displayed on the notification
+     */
+    action: ReactElement<LinkActionProps>;
+};
+export type CalloutNotificationProps = Omit<NotificationProps, 'variant' | 'closeable'> & (ActionableCalloutNotification | NonActionableNotification);
+export declare const CalloutNotification: (props: CalloutNotificationProps) => import("react/jsx-runtime").JSX.Element;

package/notification/src/lib/notification_callout.component.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Notification, } from './notification.component';
+export const CalloutNotification = (props) => (_jsx(Notification, Object.assign({}, props, { variant: 'callout', closeable: false })));
+//# sourceMappingURL=notification_callout.component.js.map

package/notification/src/lib/notification_inline.component.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { ActionableNotification, LinkActionProps, NonActionableNotification, NotificationProps } from './notification.component';
+export type ActionableInlineNotification = ActionableNotification & {
+    /**
+     * The actionable link element that will be displayed on the notification
+     */
+    action: ReactElement<LinkActionProps>;
+};
+export type InlineNotificationProps = Omit<NotificationProps, 'variant' | 'closeable'> & (ActionableInlineNotification | NonActionableNotification);
+export declare const InlineNotification: (props: InlineNotificationProps) => import("react/jsx-runtime").JSX.Element;

package/notification/src/lib/notification_inline.component.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Notification, } from './notification.component';
+export const InlineNotification = (props) => (_jsx(Notification, Object.assign({}, props, { variant: 'inline', closeable: false })));
+//# sourceMappingURL=notification_inline.component.js.map

package/notification/src/lib/notification_toast.component.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+import { ActionableNotification, ButtonActionProps, NonActionableNotification, NotificationProps } from './notification.component';
+import { ToastNotificationProviderProps } from './notification_toast.provider';
+export type ActionableToastNotification = ActionableNotification & {
+    /**
+     * The actionable button element that will be displayed on the notification
+     */
+    action: ReactElement<ButtonActionProps>;
+};
+export type ToastNotificationProps = Omit<NotificationProps, 'variant' | 'closeable'> & (ActionableToastNotification | NonActionableNotification) & {
+    timeout?: number;
+    position?: ToastNotificationProviderProps['position'];
+};
+export declare const ToastNotification: ({ timeout, onClose, position, ...props }: ToastNotificationProps) => import("react/jsx-runtime").JSX.Element;

package/notification/src/lib/notification_toast.component.js

@@ -0,0 +1,40 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Transition } from '@headlessui/react';
+import { useEffect, useRef, useState } from 'react';
+import { Notification, } from './notification.component';
+const ANIMATION_DURATION = 300;
+export const ToastNotification = (_a) => {
+    var { timeout, onClose, position = 'bottom-start' } = _a, props = __rest(_a, ["timeout", "onClose", "position"]);
+    const [isShowing, setIsShowing] = useState(true);
+    const animationTimeout = useRef();
+    useEffect(() => {
+        return () => {
+            if (animationTimeout.current) {
+                clearTimeout(animationTimeout.current);
+            }
+        };
+    }, []);
+    useEffect(() => {
+        let timer;
+        if (timeout && timeout > 0 && props.type !== 'error') {
+            timer = setTimeout(() => {
+                handleCloseToast();
+            }, timeout);
+        }
+        return () => {
+            if (timer) {
+                clearTimeout(timer);
+            }
+        };
+    }, [timeout, props.type]);
+    const handleCloseToast = () => {
+        setIsShowing(false);
+        animationTimeout.current = setTimeout(() => {
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+            animationTimeout.current = undefined;
+        }, ANIMATION_DURATION);
+    };
+    return (_jsx(Transition, { as: 'div', appear: true, show: isShowing, enter: 'nucleus-transition-all nucleus-ease-in nucleus-duration-300', enterFrom: `nucleus-opacity-0 ${position.includes('bottom') ? 'nucleus-translate-y-6' : '-nucleus-translate-y-6'}`, leave: 'nucleus-transition-all nucleus-ease-out nucleus-duration-300', leaveTo: `nucleus-opacity-0 ${position.includes('end') ? 'nucleus-translate-x-12' : '-nucleus-translate-x-12'}`, children: _jsx(Notification, Object.assign({}, props, { onClose: handleCloseToast, variant: 'toast', closeable: true })) }));
+};
+//# sourceMappingURL=notification_toast.component.js.map

package/notification/src/lib/notification_toast.provider.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { ToastNotificationProps } from './notification_toast.component';
+type ToastContextType = {
+    toasts: Toast[];
+    addNotification: (toast: Toast) => void;
+    removeNotification: (id: string) => void;
+    clearAllNotifications: () => void;
+};
+export declare const ToastNotificationContext: import("react").Context<ToastContextType>;
+export type ToastNotificationProviderProps = {
+    position?: 'top-start' | 'bottom-start' | 'top-end' | 'bottom-end';
+    children?: ReactNode;
+    showClearAllButton?: boolean;
+};
+export type Toast = ToastNotificationProps & {
+    id?: string;
+    position?: ToastNotificationProviderProps['position'];
+};
+export declare const ToastNotificationProvider: ({ children, position, showClearAllButton, }: ToastNotificationProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/notification/src/lib/notification_toast.provider.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { v4 as uuidv4 } from 'uuid';
+import { Button } from '../../../button/src';
+import { useLocalizeMessage } from '../../../i18n/src';
+import { ToastNotification } from './notification_toast.component';
+export const ToastNotificationContext = createContext({
+    toasts: [],
+    addNotification: () => {
+        throw new Error('Toast Notification Context is not defined.');
+    },
+    removeNotification: () => {
+        throw new Error('Toast Notification Context is not defined.');
+    },
+    clearAllNotifications: () => {
+        throw new Error('Toast Notification Context is not defined.');
+    },
+});
+const POSITION_STYLES = {
+    'bottom-end': 'nucleus-bottom-0 nucleus-right-0',
+    'bottom-start': 'nucleus-bottom-0 nucleus-left-0',
+    'top-end': 'nucleus-right-0 nucleus-top-0',
+    'top-start': 'nucleus-left-0 nucleus-top-0',
+};
+const DEFAULT_TIMEOUT = 10000;
+const TOAST_GAP = 12;
+export const ToastNotificationProvider = ({ children, position = 'bottom-start', showClearAllButton, }) => {
+    const [toasts, setToasts] = useState([]);
+    const [isHovered, setIsHovered] = useState(false);
+    const toastRefs = useRef([]);
+    const translate = useLocalizeMessage();
+    const removeNotification = (id) => {
+        setToasts((prevToasts) => {
+            const newToasts = prevToasts.filter((toast) => toast.id !== id);
+            if (newToasts.length === 0) {
+                setIsHovered(false);
+            }
+            return newToasts;
+        });
+        toastRefs.current = toastRefs.current.filter((ref) => (ref === null || ref === void 0 ? void 0 : ref.id) !== id);
+    };
+    const addNotification = (toast) => {
+        setToasts((prevToasts) => {
+            var _a, _b;
+            const id = (_a = toast.id) !== null && _a !== void 0 ? _a : uuidv4();
+            const timeout = (_b = toast.timeout) !== null && _b !== void 0 ? _b : DEFAULT_TIMEOUT;
+            return [...prevToasts, Object.assign(Object.assign({}, toast), { id, timeout })];
+        });
+    };
+    const clearAllNotifications = () => {
+        setToasts([]);
+        toastRefs.current = [];
+        setIsHovered(false);
+    };
+    const isTopPositioned = position.includes('top');
+    const flexDirection = isTopPositioned ? 'nucleus-flex-col' : 'nucleus-flex-col-reverse';
+    let totalToastHeight = 0;
+    if (isHovered) {
+        toastRefs.current.forEach((ref, index) => {
+            var _a;
+            totalToastHeight += ((_a = ref === null || ref === void 0 ? void 0 : ref.scrollHeight) !== null && _a !== void 0 ? _a : 0) + (index < toastRefs.current.length - 1 ? TOAST_GAP : 0);
+        });
+    }
+    const getToastTranslateAmount = (index) => {
+        // caculate the translate amount for each toast.
+        // When not being hovered, each toast is staggered by 8px related to the previous toast.
+        // When being hovered, each toast is staggered by the previous toast's height, plus a 12px gap.
+        let translateAmount = (isTopPositioned ? 8 : -8) * Math.min(index, 3);
+        if (isHovered && index > 0) {
+            translateAmount = 0;
+            for (let i = index - 1; i >= 0; i--) {
+                const ref = toastRefs.current[i];
+                if (ref) {
+                    if (isTopPositioned) {
+                        translateAmount += ref.scrollHeight + TOAST_GAP;
+                    }
+                    else {
+                        translateAmount -= ref.scrollHeight + TOAST_GAP;
+                    }
+                }
+            }
+        }
+        return translateAmount;
+    };
+    const shouldScroll = isTopPositioned && isHovered && totalToastHeight > window.innerHeight;
+    return (_jsxs(ToastNotificationContext.Provider, { value: { addNotification, removeNotification, clearAllNotifications, toasts }, children: [children, toasts.length > 0 &&
+                createPortal(_jsxs("div", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), className: `nucleus-fixed nucleus-box-border nucleus-z-[100] nucleus-w-modal-base nucleus-p-4 ${POSITION_STYLES[position]} ${shouldScroll ? 'nucleus-max-h-screen nucleus-overflow-y-auto nucleus-overflow-x-hidden' : ''}`, children: [_jsx("div", { className: `nucleus-w-100 nucleus-max-h-screen nucleus-relative nucleus-flex nucleus-flex-col nucleus-gap-4 nucleus-group ${flexDirection}`, style: {
+                                height: totalToastHeight,
+                            }, children: toasts.map((toast, index) => {
+                                const translateAmount = getToastTranslateAmount(index);
+                                return (_jsx("div", { id: toast.id, ref: (el) => (toastRefs.current[index] = el), className: `nucleus-box-border nucleus-absolute nucleus-transition-transform nucleus-duration-300 nucleus-ease-out nucleus-w-full ${POSITION_STYLES[position]} ${!isHovered && toasts.length > 1 && index !== toasts.length - 1 ? 'nucleus-max-h-10 nucleus-overflow-y-hidden' : ''} ${!isHovered && toasts.length > 1 && index !== toasts.length - 1 ? 'nucleus-filter nucleus-brightness-95' : ''}`, style: {
+                                        transform: `scaleX(${isHovered ? 1 : 1 - 0.025 * (Math.min(toasts.length, 3) - 1 - Math.min(index, 3))}) translateY(${translateAmount}px)`,
+                                    }, children: _jsx(ToastNotification, Object.assign({}, toast, { timeout: isHovered ? 0 : toast.timeout, onClose: () => removeNotification(toast.id), position: position })) }, toast.id));
+                            }) }), showClearAllButton && isHovered && toasts.length > 1 && (_jsx("div", { className: `nucleus-box-border nucleus-absolute nucleus-w-full nucleus-transition-transform nucleus-duration-300 nucleus-ease-out nucleus-flex ${isTopPositioned ? 'nucleus-top-0' : 'nucleus-bottom-0'}`, style: {
+                                transform: `translateY(${(totalToastHeight + 2 * TOAST_GAP) * (isTopPositioned ? 1 : -1)}px)`,
+                            }, children: _jsx(Button, { size: 'xs', label: translate('Clear all'), variant: 'transparent', onClick: clearAllNotifications }) }))] }), document.body)] }));
+};
+//# sourceMappingURL=notification_toast.provider.js.map

package/notification/src/lib/use_toast_notification.hook.d.ts

@@ -0,0 +1,6 @@
+export declare const useToastNotification: () => {
+    toasts: import("./notification_toast.provider").Toast[];
+    addNotification: (toast: import("./notification_toast.provider").Toast) => void;
+    removeNotification: (id: string) => void;
+    clearAllNotifications: () => void;
+};

package/notification/src/lib/use_toast_notification.hook.js

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { ToastNotificationContext } from './notification_toast.provider';
+export const useToastNotification = () => {
+    const context = useContext(ToastNotificationContext);
+    if (context === undefined) {
+        throw new Error('useToast must be used within a ToastProvider');
+    }
+    return context;
+};
+//# sourceMappingURL=use_toast_notification.hook.js.map

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@medable/nucleus-ui",
+  "version": "2.0.0",
+  "description": "Nucleus library of reusable UI components and utilities",
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.medable.com/product/web/mfw/monorepo",
+    "directory": "medable/libs/nucleus"
+  },
+  "main": "index.js",
+  "types": "index.d.ts",
+  "dependencies": {
+    "temporal-luxon": "^4.2.1",
+    "uuid": "^9.0.1",
+    "classnames": "^2.3.2",
+    "lodash.throttle": "^4.1.1"
+  },
+  "peerDependencies": {
+    "react": ">=16.0.0 <20.0.0",
+    "react-dom": ">=16.0.0 <20.0.0",
+    "tailwind-merge": "^2.5.5",
+    "@headlessui/react": "^2.2.4",
+    "react-day-picker": "^8.9.1",
+    "@tanstack/react-table": "^8.17.3",
+    "@floating-ui/react": "^0.27.8"
+  },
+  "engines": {
+    "node": ">=10"
+  },
+  "files": [
+    "**/*.js",
+    "**/*.d.ts",
+    "**/*.css",
+    "**/i18n-shim/**",
+    "package.json"
+  ]
+}

package/radio_group/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/radio_group';
+export * from './lib/radio_group_option';

package/radio_group/src/index.js

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

package/radio_group/src/lib/radio_group.d.ts

@@ -0,0 +1,50 @@
+import { RadioGroup as HeadlessUIRadioGroup } from '@headlessui/react';
+import { PropsWithChildren } from 'react';
+type HeadlessUIRadioGroupProps = Parameters<typeof HeadlessUIRadioGroup>[0];
+export type RadioGroupProps<T = string> = PropsWithChildren<{
+    /**
+     * This sets the data-testid attribute on the radio group component. This is useful for test frameworks like Jest or
+     * Cypress.
+     */
+    dataTestId?: string;
+    /**
+     * Controls whether the field is disabled or not. Disabled fields do not react to any change, focus or hover events.
+     * The accessibility property `aria-disabled` will also be set to this value.
+     */
+    disabled?: HeadlessUIRadioGroupProps['disabled'];
+    /**
+     * Any error message for this field.
+     */
+    errorMessage?: string;
+    /**
+     * A boolean to indicate whether the field has error.
+     */
+    hasError?: boolean;
+    /**
+     * The text label for this component. The accessibility property `aria-label` will also be set to this value.
+     */
+    label?: string;
+    /**
+     * The function to call when the radio option is changed.
+     */
+    onChange: (value: T) => void;
+    /**
+     * 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;
+    /**
+     * The value of the selected radio option.
+     */
+    value?: T;
+}>;
+/**
+ * RadioGroup allows a user to select a single input from a prefilled list of items.
+ * @remarks accessibility best practices for radio group: https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/
+ */
+export declare const RadioGroup: <T>({ children, dataTestId, disabled, errorMessage, hasError, label, onChange, required, hideRequiredIndicator, value, ...props }: RadioGroupProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/radio_group/src/lib/radio_group.js

@@ -0,0 +1,26 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RadioGroup as HeadlessUIRadioGroup, Label } from '@headlessui/react';
+import classNames from 'classnames';
+import { Icon } from '../../../icon/src';
+/**
+ * RadioGroup allows a user to select a single input from a prefilled list of items.
+ * @remarks accessibility best practices for radio group: https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/
+ */
+export const RadioGroup = (_a) => {
+    var { children, dataTestId, disabled, errorMessage, hasError, label, onChange, required, hideRequiredIndicator, value } = _a, props = __rest(_a, ["children", "dataTestId", "disabled", "errorMessage", "hasError", "label", "onChange", "required", "hideRequiredIndicator", "value"]);
+    const classes = {
+        groupLabel: classNames('nucleus-font-medium nucleus-text-sm nucleus-flex-none nucleus-order-none nucleus-grow-0 nucleus-block nucleus-mb-2 nucleus-font-sans', {
+            'nucleus-text-text-disabled': disabled,
+            'nucleus-text-text-primary': !disabled,
+        }),
+        required: 'nucleus-w-1.5 nucleus-h-5 nucleus-font-medium nucleus-text-sm nucleus-text-red-500 nucleus-flex-none nucleus-order-1 nucleus-grow-0 nucleus-pl-px',
+        component: {
+            common: 'nucleus-flex nucleus-flex-col nucleus-gap-3 nucleus-mt-2 nucleus--space-y-px',
+        },
+        error: 'nucleus-font-medium nucleus-text-xs nucleus-text-text-error nucleus-flex-none nucleus-order-1 nucleus-grow nucleus-m-0',
+        errorContainer: 'nucleus-mt-2 nucleus-flex nucleus-items-center nucleus-gap-2 nucleus-font-sans',
+    };
+    return (_jsxs(HeadlessUIRadioGroup, Object.assign({ value: value, onChange: onChange, as: 'div', className: 'nucleus-relative', disabled: disabled, "aria-disabled": disabled, "aria-label": label, "aria-required": required, "data-testid": dataTestId }, props, { children: [label && (_jsxs(Label, { as: 'div', className: classes.groupLabel, children: [label, required && !hideRequiredIndicator && _jsx("span", { className: classes.required, children: "*" })] })), _jsx("div", { className: classes.component.common, children: children }), hasError && (_jsxs("div", { className: classes.errorContainer, children: [_jsx(Icon, { name: 'error', color: 'red', size: 'sm' }), _jsx("p", { className: classes.error, role: 'alert', children: errorMessage })] }))] })));
+};
+//# sourceMappingURL=radio_group.js.map