@medable/nucleus-ui 2.0.0

package/tooltip/src/lib/tooltip.d.ts

@@ -0,0 +1,55 @@
+import React, { ElementType } from 'react';
+export type TooltipProps = {
+    /**
+     * The content of the tooltip.
+     */
+    title: React.ReactNode;
+    /**
+     * The element to which the tooltip is attached.
+     */
+    children: React.ReactNode;
+    /**
+     * The placement of the tooltip. Note that these are defined as logical properties, so the placement will be flipped
+     * in RTL mode.
+     */
+    placement?: 'top-start' | 'top' | 'top-end' | 'end-top' | 'end' | 'end-bottom' | 'bottom-end' | 'bottom' | 'bottom-start' | 'start-bottom' | 'start' | 'start-top';
+    /**
+     * The element type to use for the wrapper element. Defaults to button.
+     */
+    as?: ElementType;
+    /**
+     * Additional classes to apply to the tooltip container.
+     */
+    className?: string;
+    /**
+     * When disabled, tooltip will never open
+     */
+    disabled?: boolean;
+    /**
+     * Additional classes to apply to the content wrapper.
+     */
+    wrapperClassName?: string;
+    /**
+     * The delay in milliseconds before the tooltip is shown.
+     */
+    delayShow?: number;
+    /**
+     * The delay in milliseconds before the tooltip is hidden.
+     */
+    delayHide?: number;
+    /**
+     * Whether to display the tooltip only when the reference element is overflowing.
+     */
+    displayOnlyOnOverflow?: boolean;
+};
+/**
+ * A tooltip is a popup that displays information related to an element when the element receives keyboard focus, the
+ * mouse hovers over it or a touch device user taps on it. A keyboard user can also press the 'Escape' key to remove
+ * element focus.
+ *
+ * @remarks
+ *
+ * Design guidelines dictate that tooltips should be used sparingly and that text should be kept short to at most 3
+ *   lines.
+ */
+export declare const Tooltip: ({ as: WrapperElement, children, className, delayHide, delayShow, disabled, displayOnlyOnOverflow, placement, title, wrapperClassName, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;

package/tooltip/src/lib/tooltip.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { arrow, flip, FloatingArrow, offset, useFloating, useFocus, useHover, useInteractions, useRole, } from '@floating-ui/react';
+import { useContext, useState, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { LocaleContext, isRtl } from '../../../i18n/src';
+import { getDirectionAwarePlacement } from './utils/get_direction_aware_placement';
+const twMerge = extendTailwindMerge({
+    prefix: 'nucleus-',
+});
+const defaultPlacement = 'bottom';
+/**
+ * A tooltip is a popup that displays information related to an element when the element receives keyboard focus, the
+ * mouse hovers over it or a touch device user taps on it. A keyboard user can also press the 'Escape' key to remove
+ * element focus.
+ *
+ * @remarks
+ *
+ * Design guidelines dictate that tooltips should be used sparingly and that text should be kept short to at most 3
+ *   lines.
+ */
+export const Tooltip = ({ as: WrapperElement = 'button', children, className, delayHide = 0, delayShow = 0, disabled = false, displayOnlyOnOverflow = false, placement = defaultPlacement, title, wrapperClassName, }) => {
+    const locale = useContext(LocaleContext);
+    const isLtr = !isRtl(locale);
+    const directionAwarePlacement = getDirectionAwarePlacement({ placement, isLtr });
+    const [isOpen, setIsOpen] = useState(false);
+    const arrowRef = useRef(null);
+    const { refs, floatingStyles, context, elements } = useFloating({
+        placement: directionAwarePlacement,
+        middleware: [offset(6), flip({ crossAxis: false }), arrow({ element: arrowRef })],
+        open: isOpen,
+        onOpenChange: setIsOpen,
+    });
+    const role = useRole(context, { role: 'tooltip' });
+    const hover = useHover(context, { delay: { open: delayShow, close: delayHide } });
+    const focus = useFocus(context);
+    const { getReferenceProps, getFloatingProps } = useInteractions([role, hover, focus]);
+    const tooltipId = `tooltip-${`${title}`.toLowerCase().replace(/\s+/g, '-')}`;
+    const handleKeyDown = (event) => {
+        if (event.key === 'Escape') {
+            event.currentTarget.blur();
+        }
+    };
+    const isOverflowing = elements.domReference && elements.domReference.scrollWidth > elements.domReference.clientWidth;
+    return (_jsxs(_Fragment, { children: [_jsx(WrapperElement, Object.assign({ ref: refs.setReference, onKeyDown: handleKeyDown, className: twMerge('nucleus-box-border nucleus-inline-flex nucleus-cursor-pointer nucleus-bg-transparent nucleus-font-sans nucleus-text-base nucleus-normal-case nucleus-m-0 nucleus-border-0 focus-visible:nucleus-outline-2 focus-visible:nucleus-outline-offset-4 focus-visible:nucleus-outline-primary-500', wrapperClassName), "aria-describedby": isOpen ? tooltipId : undefined }, getReferenceProps(), { children: children })), isOpen &&
+                !disabled &&
+                (!displayOnlyOnOverflow || isOverflowing) &&
+                createPortal(_jsxs("div", Object.assign({ role: 'tooltip', id: tooltipId, ref: refs.setFloating }, getFloatingProps(), { className: `
+              nucleus-absolute nucleus-pointer-events-none nucleus-z-50 nucleus-max-w-tooltip nucleus-animate-fadeIn nucleus-bg-neutral-700 
+              nucleus-font-sans nucleus-text-xs nucleus-font-medium nucleus-text-white nucleus-shadow-lg nucleus-rounded-lg nucleus-p-3 
+              ${className}
+           `, style: floatingStyles, children: [_jsx(FloatingArrow, { ref: arrowRef, context: context, className: 'nucleus-fill-neutral-700' }), title] })), document.body)] }));
+};
+//# sourceMappingURL=tooltip.js.map

package/tooltip/src/lib/utils/get_direction_aware_placement.d.ts

@@ -0,0 +1,6 @@
+import { Placement } from '@floating-ui/react';
+import { TooltipProps } from '../tooltip';
+export declare const getDirectionAwarePlacement: ({ placement, isLtr, }: {
+    placement: NonNullable<TooltipProps["placement"]>;
+    isLtr: boolean;
+}) => Placement;

package/tooltip/src/lib/utils/get_direction_aware_placement.js

@@ -0,0 +1,18 @@
+export const getDirectionAwarePlacement = ({ placement, isLtr, }) => {
+    const map = {
+        'top-start': isLtr ? 'top-start' : 'top-end',
+        'top': 'top',
+        'top-end': isLtr ? 'top-end' : 'top-start',
+        'end-top': isLtr ? 'right-start' : 'left-start',
+        'end': isLtr ? 'right' : 'left',
+        'end-bottom': isLtr ? 'right-end' : 'left-end',
+        'bottom-end': isLtr ? 'bottom-end' : 'bottom-start',
+        'bottom': 'bottom',
+        'bottom-start': isLtr ? 'bottom-start' : 'bottom-end',
+        'start-bottom': isLtr ? 'left-end' : 'right-end',
+        'start': isLtr ? 'left' : 'right',
+        'start-top': isLtr ? 'left-start' : 'right-start',
+    };
+    return map[placement];
+};
+//# sourceMappingURL=get_direction_aware_placement.js.map

package/typography/src/index.d.ts

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

package/typography/src/index.js

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

package/typography/src/lib/typography.d.ts

@@ -0,0 +1,8 @@
+import { HeaderProps, TextProps } from './typography_types';
+export declare const H1: ({ as, ...props }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const H2: ({ as, ...props }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const H3: ({ as, ...props }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const H4: ({ as, ...props }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const H5: ({ as, ...props }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const H6: ({ as, ...props }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Text: ({ as, size, ...props }: TextProps) => import("react/jsx-runtime").JSX.Element;

package/typography/src/lib/typography.js

@@ -0,0 +1,37 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+const TypographyElement = ({ children, dataTestId, as: Component = 'div', className, defaultClassName, }) => (_jsx(Component, { "data-testid": dataTestId, className: [defaultClassName, className].filter(Boolean).join(' '), children: children }));
+export const H1 = (_a) => {
+    var { as = 'h1' } = _a, props = __rest(_a, ["as"]);
+    return (_jsx(TypographyElement, Object.assign({}, props, { as: as, defaultClassName: 'nucleus-font-sans nucleus-text-h1 nucleus-font-light nucleus-m-0' })));
+};
+export const H2 = (_a) => {
+    var { as = 'h2' } = _a, props = __rest(_a, ["as"]);
+    return (_jsx(TypographyElement, Object.assign({}, props, { as: as, defaultClassName: 'nucleus-font-sans nucleus-text-h2 nucleus-font-normal nucleus-m-0' })));
+};
+export const H3 = (_a) => {
+    var { as = 'h3' } = _a, props = __rest(_a, ["as"]);
+    return (_jsx(TypographyElement, Object.assign({}, props, { as: as, defaultClassName: 'nucleus-font-sans nucleus-text-h3 nucleus-font-normal nucleus-m-0' })));
+};
+export const H4 = (_a) => {
+    var { as = 'h4' } = _a, props = __rest(_a, ["as"]);
+    return (_jsx(TypographyElement, Object.assign({}, props, { as: as, defaultClassName: 'nucleus-font-sans nucleus-text-h4 nucleus-font-normal nucleus-m-0' })));
+};
+export const H5 = (_a) => {
+    var { as = 'h5' } = _a, props = __rest(_a, ["as"]);
+    return (_jsx(TypographyElement, Object.assign({}, props, { as: as, defaultClassName: 'nucleus-font-sans nucleus-text-h5 nucleus-font-semibold nucleus-m-0' })));
+};
+export const H6 = (_a) => {
+    var { as = 'h6' } = _a, props = __rest(_a, ["as"]);
+    return (_jsx(TypographyElement, Object.assign({}, props, { as: as, defaultClassName: 'nucleus-font-sans nucleus-text-h6 nucleus-font-normal nucleus-m-0' })));
+};
+export const Text = (_a) => {
+    var { as = 'p', size = 'base' } = _a, props = __rest(_a, ["as", "size"]);
+    return (_jsx(TypographyElement, Object.assign({}, props, { as: as, defaultClassName: `nucleus-font-sans nucleus-m-0 ${{
+            xxs: 'nucleus-text-xxs',
+            xs: 'nucleus-text-xs',
+            sm: 'nucleus-text-sm',
+            base: 'nucleus-text-base',
+        }[size]}` })));
+};
+//# sourceMappingURL=typography.js.map

package/typography/src/lib/typography_types.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+type SharedTypographyProps = {
+    /**
+     * A message object or any children element or text.
+     */
+    children: React.ReactNode;
+    /**
+     * This sets the data-testid attribute on the button component. This is useful for test frameworks like Jest or Cypress.
+     */
+    dataTestId?: string;
+    /**
+     * This sets the header variant to convert the header to a different HTML element for accessibility.
+     */
+    as?: Extract<React.ElementType, 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span'>;
+    /**
+     * A custom additional className.
+     */
+    className?: string;
+    title?: string;
+};
+export type HeaderProps = SharedTypographyProps;
+export type TextProps = SharedTypographyProps & {
+    /**
+     * This sets the text variant to xxs, xs, sm, or md.
+     */
+    size?: 'xxs' | 'xs' | 'sm' | 'base';
+};
+export {};

package/typography/src/lib/typography_types.js

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

package/workflow/src/index.d.ts

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

package/workflow/src/index.js

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

package/workflow/src/lib/workflow.d.ts

@@ -0,0 +1,12 @@
+import { IconName, ICON_COLOR_MAP } from '../../../icon/src';
+export type StatusProps = {
+    iconName: IconName;
+    color: keyof typeof ICON_COLOR_MAP;
+    label: string;
+};
+export interface WorkflowProps {
+    statuses: StatusProps[];
+    activeStatusIndex: number;
+    dimUnselectedIcons?: boolean;
+}
+export declare const Workflow: ({ statuses, activeStatusIndex, dimUnselectedIcons }: WorkflowProps) => import("react/jsx-runtime").JSX.Element;

package/workflow/src/lib/workflow.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Icon } from '../../../icon/src';
+import { Text } from '../../../typography/src';
+export const Workflow = ({ statuses, activeStatusIndex, dimUnselectedIcons = false }) => {
+    return (_jsx("div", { className: 'nucleus-flex nucleus-flex-row nucleus-items-center', children: statuses.map((status, index) => (_jsxs("div", { className: 'nucleus-flex nucleus-flex-col nucleus-h-8 nucleus-w-24', "aria-label": 'Workflow', children: [_jsx("div", { className: 'nucleus-inline-flex nucleus-relative nucleus-justify-center', children: _jsx("div", { className: `${index === activeStatusIndex ? 'nucleus-outline nucleus-outline-neutral-500 nucleus-outline-1' : ''}
+              nucleus-flex nucleus-rounded-full nucleus-h-4 nucleus-w-4 nucleus-bg-white`, children: _jsx(Icon, { name: status.iconName, size: 'sm', color: dimUnselectedIcons && index !== activeStatusIndex ? 'grayPale' : status.color }) }) }), _jsx("div", { className: 'nucleus-flex nucleus-justify-center', children: _jsx(Text, { size: 'xs', className: index === activeStatusIndex ? 'nucleus-text-text-primary' : 'nucleus-text-text-disabled', children: status.label }) }), _jsx("hr", { className: classNames('nucleus-border-0 nucleus-border-b-1 nucleus-border-neutral-300 -nucleus-mt-6', {
+                        'nucleus-ml-[50%] nucleus-w-[50%]': index === 0,
+                        'nucleus-ml-0 nucleus-w-[50%]': index === statuses.length - 1,
+                        'nucleus-w-full': index > 0 && index < statuses.length - 1,
+                    }), "aria-hidden": 'true' })] }, status.label))) }));
+};
+//# sourceMappingURL=workflow.js.map