@medable/nucleus-ui 2.0.0

package/table/src/lib/table_head.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { flexRender } from '@tanstack/react-table';
+import { Icon } from '../../../icon/src';
+import { Text } from '../../../typography/src';
+/**
+ * TableHead was being written twice because of the sticky vs non-sticky versions of it.
+ * Extracted it here instead and using it inside the render function.
+ */
+export const TableHead = ({ ariaHidden, isSelectable, roundedBorder, flatHeaders, enableSorting, enableExpandableRows = false, }) => (_jsx("thead", { "aria-hidden": ariaHidden, className: 'nucleus-box-border nucleus-w-full nucleus-border-solid nucleus-bg-white nucleus-border-0 nucleus-border-current', children: _jsxs("tr", { className: 'nucleus-box-border nucleus-border-solid nucleus-bg-white nucleus-border-0 nucleus-border-current', children: [enableExpandableRows && (_jsx("th", { className: `nucleus-box-border nucleus-w-0 nucleus-border-solid nucleus-bg-neutral-50 nucleus-border-0 nucleus-border-b-1 nucleus-border-neutral-300
+                nucleus-px-4 ${enableSorting ? 'nucleus-py-3' : 'nucleus-py-4'}
+                `, "aria-label": 'Expand row' })), isSelectable && (_jsx("th", { className: `nucleus-box-border nucleus-w-0 nucleus-border-solid nucleus-bg-neutral-50 nucleus-border-0 nucleus-border-b-1 nucleus-border-neutral-300
+                nucleus-px-4 ${enableSorting ? 'nucleus-py-3' : 'nucleus-py-4'}
+                ` })), flatHeaders.map((header, index) => (_jsx("th", { style: { width: header.getSize() }, className: `nucleus-box-border nucleus-border-solid nucleus-bg-neutral-50 nucleus-font-medium nucleus-text-text-secondary nucleus-border-0
+            nucleus-border-b-1 nucleus-border-neutral-300 nucleus-px-6
+            nucleus-text-left
+            ${roundedBorder ? 'first:nucleus-rounded-tl-lg last:nucleus-rounded-tr-lg' : 'nucleus-rounded-none'} ${enableSorting ? 'nucleus-py-3' : 'nucleus-py-4'}`, children: _jsxs("div", { className: `nucleus-group nucleus-flex nucleus-gap-2 nucleus-items-center${header.column.getCanSort() ? ' nucleus-cursor-pointer nucleus-select-none' : ''}`,
+                    onClick: header.column.getToggleSortingHandler(), children: [_jsx(Text, { as: 'span', size: 'xs', children: flexRender(header.column.columnDef.header, header.getContext()) }), enableSorting && (_jsx("span", { className: 'nucleus-text-neutral-450 group-hover:nucleus-text-primary-500', children: {
+                                asc: _jsx(Icon, { name: 'sortUp', color: 'current' }),
+                                desc: _jsx(Icon, { name: 'sortDown', color: 'current' }),
+                                notSorted: (
+                                /** Adding an invisible icon so the headers won't change in width
+                                 * between showing and hiding the icon
+                                 */
+                                _jsx("span", { className: 'nucleus-opacity-0', children: _jsx(Icon, { name: 'sortUp' }) })),
+                            }[header.column.getIsSorted() || 'notSorted'] }))] }) }, `${header.id}-${index}`)))] }) }));
+//# sourceMappingURL=table_head.js.map

package/table/src/lib/table_row.d.ts

@@ -0,0 +1,31 @@
+import { Row, RowData } from '@tanstack/react-table';
+import type { ReactNode } from 'react';
+type RowProps<T> = {
+    index: number;
+    totalRows: number;
+    isHighlighted?: boolean;
+    rowCustomClasses?: string;
+    isSelectable?: boolean;
+    isSingleSelect?: boolean;
+    row: Row<T>;
+    disableRowSelectionReason?: string | ((originalRow: T) => string);
+    showRoundedBottomBorder?: boolean;
+    expandedRowIds?: Set<string | number>;
+    onToggleExpand?: (rowId: string | number) => void;
+    isExpandedContentLoading?: boolean;
+    asyncExpandedContent?: ReactNode;
+    expandedContentClasses?: string;
+    rowHasExpandableContent?: (row: T) => boolean;
+    expandableContentField?: string;
+};
+export declare const TableRow: <T extends RowData>({ index, totalRows, isHighlighted, rowCustomClasses, isSelectable, isSingleSelect, row, disableRowSelectionReason, showRoundedBottomBorder, expandedRowIds, onToggleExpand, isExpandedContentLoading, asyncExpandedContent, expandedContentClasses, rowHasExpandableContent, expandableContentField, }: RowProps<T>) => import("react/jsx-runtime").JSX.Element;
+type RowIsLoadingProps = {
+    colSpan: number;
+};
+export declare const TableRowIsLoading: ({ colSpan }: RowIsLoadingProps) => import("react/jsx-runtime").JSX.Element;
+type RowHasNoResultsProps = {
+    colSpan: number;
+    label: string;
+};
+export declare const TableRowHasNoResults: ({ colSpan, label }: RowHasNoResultsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/table/src/lib/table_row.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { flexRender } from '@tanstack/react-table';
+import { useCallback, useMemo } from 'react';
+import { Checkbox } from '../../../checkbox/src';
+import { Message, useLocalizeMessage } from '../../../i18n/src';
+import { Icon } from '../../../icon/src';
+import { RadioGroup, RadioGroupOption } from '../../../radio_group/src';
+import { Spinner } from '../../../spinner/src';
+import { Tooltip } from '../../../tooltip/src';
+import { Text } from '../../../typography/src';
+export const TableRow = ({ index, totalRows, isHighlighted, rowCustomClasses, isSelectable, isSingleSelect, row, disableRowSelectionReason, showRoundedBottomBorder = false, expandedRowIds, onToggleExpand, isExpandedContentLoading = false, asyncExpandedContent, expandedContentClasses, rowHasExpandableContent, expandableContentField, }) => {
+    var _a;
+    const localizeMessage = useLocalizeMessage();
+    const hasExpandableContent = rowHasExpandableContent ? rowHasExpandableContent(row.original) : false;
+    const enableExpandableRows = onToggleExpand !== undefined;
+    const isLastRow = index === totalRows - 1;
+    const isExpanded = (_a = expandedRowIds === null || expandedRowIds === void 0 ? void 0 : expandedRowIds.has(row.id)) !== null && _a !== void 0 ? _a : false;
+    const shouldRoundMainRow = showRoundedBottomBorder && isLastRow && !isExpanded;
+    const shouldRoundExpandedRow = showRoundedBottomBorder && isLastRow && isExpanded;
+    const resolvedExpandedContent = useMemo(() => {
+        if (!isExpanded) {
+            return undefined;
+        }
+        if (asyncExpandedContent) {
+            return asyncExpandedContent;
+        }
+        if (expandableContentField &&
+            row.original &&
+            typeof row.original === 'object' &&
+            expandableContentField in row.original) {
+            const content = row.original[expandableContentField];
+            if (content !== undefined && content !== null) {
+                return content;
+            }
+        }
+        return undefined;
+    }, [isExpanded, asyncExpandedContent, expandableContentField, row.original]);
+    const handleToggleExpand = useCallback(() => {
+        onToggleExpand === null || onToggleExpand === void 0 ? void 0 : onToggleExpand(row.id);
+    }, [onToggleExpand, row.id]);
+    const isDisabled = isSelectable && !row.getCanSelect();
+    const disableRowSelectionReasonText = useMemo(() => isDisabled && disableRowSelectionReason
+        ? typeof disableRowSelectionReason === 'string'
+            ? disableRowSelectionReason
+            : disableRowSelectionReason(row.original)
+        : '', [isDisabled, disableRowSelectionReason, row.original]);
+    const selectionCellContent = isSelectable &&
+        (isSingleSelect ? (_jsx("div", { className: 'flex', children: _jsx(RadioGroup, { value: row.getIsSelected(), onChange: row.getToggleSelectedHandler(), children: _jsx(RadioGroupOption, { option: { value: true, label: '' }, disabled: isDisabled }) }) })) : (_jsx(Checkbox, { dataTestId: `nucleus-table--сheckbox-${row.id}`, hideLabel: true, checked: row.getIsSelected(), label: localizeMessage(new Message('Select Row {index}', { index: index + 1 })), onChange: row.getToggleSelectedHandler(), disabled: isDisabled })));
+    const selectionCellContentWithTooltip = useMemo(() => isSelectable &&
+        (disableRowSelectionReasonText ? (_jsx(Tooltip, { as: 'div', title: disableRowSelectionReasonText, placement: 'top-start', children: selectionCellContent })) : (selectionCellContent)), [isSelectable, disableRowSelectionReasonText, selectionCellContent]);
+    const expandableCell = enableExpandableRows && (_jsx("td", { className: `nucleus-box-border nucleus-border-solid nucleus-border-0 nucleus-border-b-1 nucleus-border-neutral-300 nucleus-px-4 ${shouldRoundMainRow && !isSelectable ? 'nucleus-rounded-bl-lg' : ''}`, children: hasExpandableContent ? (_jsx("button", { type: 'button', onClick: handleToggleExpand, "aria-expanded": isExpanded, "aria-controls": `nucleus-table--expanded-content-${row.id}`, className: 'nucleus-flex nucleus-items-center nucleus-justify-center nucleus-w-full nucleus-h-full nucleus-cursor-pointer nucleus-bg-transparent nucleus-border-0 nucleus-p-0', "data-testid": `nucleus-table--expand-button-${row.id}`, children: _jsx("span", { className: `nucleus-transition-transform nucleus-duration-200 ${isExpanded ? 'nucleus-rotate-180' : ''}`, children: _jsx(Icon, { name: 'chevronDown', size: 'base' }) }) })) : null }));
+    const selectionCell = isSelectable && (_jsx("td", { className: `nucleus-box-border nucleus-border-solid nucleus-border-0 nucleus-border-b-1 nucleus-border-neutral-300 nucleus-px-4 ${shouldRoundMainRow ? 'nucleus-rounded-bl-lg' : ''}`, children: selectionCellContentWithTooltip }));
+    const cells = (_jsxs(_Fragment, { children: [expandableCell, selectionCell, row.getVisibleCells().map((cell, index, arr) => {
+                const isFirstDataCell = index === 0;
+                const isLastDataCell = index === arr.length - 1;
+                const shouldRoundLeft = shouldRoundMainRow && isFirstDataCell && !enableExpandableRows && !isSelectable;
+                const shouldRoundRight = shouldRoundMainRow && isLastDataCell;
+                return (_jsx("td", { style: { width: cell.column.getSize() }, className: `nucleus-box-border nucleus-h-15 nucleus-border-solid nucleus-border-0 nucleus-border-b-1 nucleus-border-neutral-300 nucleus-px-6
+        nucleus-py-2 nucleus-text-left nucleus-text-sm
+        ${isFirstDataCell
+                        ? 'nucleus-font-medium nucleus-text-text-primary'
+                        : 'nucleus-font-normal nucleus-text-text-secondary'} ${shouldRoundLeft ? 'nucleus-rounded-bl-lg' : ''} ${shouldRoundRight ? 'nucleus-rounded-br-lg' : ''}`, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, `cell.id-${index}`));
+            })] }));
+    const rowBackgroundClasses = isDisabled
+        ? 'nucleus-bg-neutral-50'
+        : row.getIsSelected() || isHighlighted
+            ? 'nucleus-bg-primary-50'
+            : 'nucleus-bg-white hover:nucleus-bg-neutral-50';
+    const rowClasses = `nucleus-box-border nucleus-w-full nucleus-border-solid nucleus-border-0 nucleus-border-current ${rowBackgroundClasses} ${rowCustomClasses}`;
+    const totalColumns = row.getVisibleCells().length + (isSelectable ? 1 : 0) + (enableExpandableRows ? 1 : 0);
+    return (_jsxs(_Fragment, { children: [_jsx("tr", { "data-testid": `nucleus-table--row-${index}`, className: rowClasses, children: cells }, `${row.id}-${index}`), enableExpandableRows && isExpanded && (_jsx("tr", { "data-testid": `nucleus-table--expanded-row-${row.id}`, className: 'nucleus-box-border nucleus-border-solid nucleus-border-0 nucleus-border-current', children: _jsx("td", { colSpan: totalColumns, className: `nucleus-box-border nucleus-table-cell nucleus-border-solid nucleus-border-0 nucleus-border-b-1 nucleus-border-neutral-300 nucleus-px-6 nucleus-py-2 ${shouldRoundExpandedRow ? 'nucleus-rounded-b-lg' : ''} ${expandedContentClasses || ''}`, id: `nucleus-table--expanded-content-${row.id}`, children: _jsx("div", { className: 'nucleus-overflow-hidden', children: isExpandedContentLoading ? (_jsx("div", { className: 'nucleus-flex nucleus-justify-center nucleus-items-center nucleus-py-8', children: _jsx(Spinner, { size: 'base' }) })) : resolvedExpandedContent ? (resolvedExpandedContent) : null }) }) }, `${row.id}-expanded-${index}`))] }));
+};
+export const TableRowIsLoading = ({ colSpan }) => {
+    return (_jsx("tr", { className: 'nucleus-box-border nucleus-border-solid nucleus-border-0 nucleus-border-current', "data-testid": 'nucleus-table--loading', children: _jsx("td", { className: 'nucleus-box-border nucleus-table-cell nucleus-border-solid nucleus-border-0 nucleus-border-b-1 nucleus-border-neutral-300 nucleus-py-24 nucleus-text-center nucleus-rounded-b-lg', colSpan: colSpan, children: _jsx("div", { className: 'nucleus-flex nucleus-justify-center', children: _jsx(Spinner, {}) }) }) }));
+};
+export const TableRowHasNoResults = ({ colSpan, label }) => (_jsx("tr", { className: 'nucleus-box-border nucleus-border-solid nucleus-border-0 nucleus-border-current', "data-testid": 'nucleus-table--no-results', children: _jsx("td", { className: 'nucleus-box-border nucleus-table-cell nucleus-border-solid nucleus-border-0 nucleus-border-b-1 nucleus-border-neutral-300 nucleus-py-24 nucleus-text-center nucleus-rounded-b-lg', colSpan: colSpan, children: _jsx(Text, { children: _jsx("span", { className: 'nucleus-text-text-secondary', children: label }) }) }) }));
+//# sourceMappingURL=table_row.js.map

package/table/src/lib/use_sticky_header.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Returns a series of variables to help support sticky headers in tables that also
+ * need horizontal scrolling.
+ */
+export declare const useStickyHeader: () => {
+    isStickyShowing: boolean;
+    tableContainerRef: import("react").RefObject<HTMLDivElement>;
+    actionBarContainerRef: import("react").RefObject<HTMLDivElement>;
+    xScrollingRef: import("react").RefObject<HTMLDivElement>;
+    stickyTableRef: import("react").RefObject<HTMLTableElement>;
+    defaultTableRef: import("react").RefObject<HTMLTableElement>;
+};

package/table/src/lib/use_sticky_header.js

@@ -0,0 +1,111 @@
+import throttle from 'lodash.throttle';
+import { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { LocaleContext, isRtl } from '../../../i18n/src';
+/**
+ * Returns a series of variables to help support sticky headers in tables that also
+ * need horizontal scrolling.
+ */
+export const useStickyHeader = () => {
+    const [isStickyShowing, setIsStickyShowing] = useState(false);
+    const tableContainerRef = useRef(null);
+    const actionBarContainerRef = useRef(null);
+    const xScrollingRef = useRef(null);
+    const stickyTableRef = useRef(null);
+    const defaultTableRef = useRef(null);
+    const locale = useContext(LocaleContext);
+    /**
+     * since the main table and the table with the sticky header are separate from each other, we need to sync up the header widths of the
+     * sticky headers to the current widths of the table header cells.
+     */
+    const updateTableHeaderWidths = () => {
+        if ((defaultTableRef === null || defaultTableRef === void 0 ? void 0 : defaultTableRef.current) && (stickyTableRef === null || stickyTableRef === void 0 ? void 0 : stickyTableRef.current)) {
+            const stickyHeaderCells = stickyTableRef.current.querySelectorAll('th');
+            const defaultHeaderCells = defaultTableRef.current.querySelectorAll('th');
+            stickyTableRef.current.style.width = `${defaultTableRef.current.offsetWidth}px`;
+            stickyHeaderCells.forEach((cell, i) => {
+                cell.style.width = `${defaultHeaderCells[i].offsetWidth}px`;
+            });
+        }
+    };
+    /**
+     * Similar to the sticky header, the sticky action bar needs its width updated to match the table container
+     */
+    const updateActionBarWidth = () => {
+        if ((tableContainerRef === null || tableContainerRef === void 0 ? void 0 : tableContainerRef.current) && (actionBarContainerRef === null || actionBarContainerRef === void 0 ? void 0 : actionBarContainerRef.current)) {
+            const tableContainerRect = tableContainerRef.current.getBoundingClientRect();
+            actionBarContainerRef.current.style.width = `${tableContainerRect.width}px`;
+        }
+    };
+    /**
+     * The sticky table with position:fixed will not horizontally scroll on its own, so we update its scroll here.
+     */
+    const xScrollHandler = useCallback(() => {
+        if ((xScrollingRef === null || xScrollingRef === void 0 ? void 0 : xScrollingRef.current) && (stickyTableRef === null || stickyTableRef === void 0 ? void 0 : stickyTableRef.current)) {
+            stickyTableRef.current.style.marginInlineStart = `${isRtl(locale) ? '' : '-'}${xScrollingRef.current.scrollLeft}px`;
+        }
+    }, [locale]);
+    useEffect(() => {
+        const horizScrollingRef = xScrollingRef === null || xScrollingRef === void 0 ? void 0 : xScrollingRef.current;
+        horizScrollingRef === null || horizScrollingRef === void 0 ? void 0 : horizScrollingRef.addEventListener('scroll', xScrollHandler, {
+            passive: true,
+        });
+        return () => {
+            horizScrollingRef === null || horizScrollingRef === void 0 ? void 0 : horizScrollingRef.removeEventListener('scroll', xScrollHandler);
+        };
+    }, [xScrollHandler]);
+    useEffect(() => {
+        const scrollHandler = () => {
+            if (tableContainerRef === null || tableContainerRef === void 0 ? void 0 : tableContainerRef.current) {
+                const tableContainerRect = tableContainerRef.current.getBoundingClientRect();
+                // if the top of the container is past the visible viewport
+                if (tableContainerRect.top < 0 && tableContainerRect.bottom > 0) {
+                    setIsStickyShowing(true);
+                }
+                else if (tableContainerRect.top > 0 || tableContainerRect.bottom < 0) {
+                    setIsStickyShowing(false);
+                }
+            }
+        };
+        window.addEventListener('scroll', scrollHandler, { passive: true });
+        return () => {
+            window.removeEventListener('scroll', scrollHandler);
+        };
+    }, []);
+    useLayoutEffect(() => {
+        if (isStickyShowing) {
+            updateTableHeaderWidths();
+            updateActionBarWidth();
+        }
+        else {
+            if (actionBarContainerRef === null || actionBarContainerRef === void 0 ? void 0 : actionBarContainerRef.current) {
+                actionBarContainerRef.current.style.width = '100%';
+            }
+        }
+    }, [isStickyShowing]);
+    useLayoutEffect(() => {
+        // Since the sticky header is removed from document flow, we use a ResizeObserver here to properly update the header width
+        // when the container is resized, so that header cells and the action bar remain in sync with table body cells
+        if (!(tableContainerRef === null || tableContainerRef === void 0 ? void 0 : tableContainerRef.current)) {
+            return;
+        }
+        let observer;
+        if (isStickyShowing) {
+            // throttle the resize observer to only trigger its callback once every 16ms
+            observer = new ResizeObserver(throttle(() => {
+                updateTableHeaderWidths();
+                updateActionBarWidth();
+            }, 16));
+            observer.observe(tableContainerRef.current);
+        }
+        return () => observer === null || observer === void 0 ? void 0 : observer.disconnect();
+    }, [isStickyShowing]);
+    return {
+        isStickyShowing, // use this boolean to conditionally show the sticky header
+        tableContainerRef, // set this ref as the main div container of the table
+        actionBarContainerRef, // set this ref as the div container of the table action bar
+        xScrollingRef, // set this ref for the horizontal scrolling container
+        stickyTableRef, // set this ref for the table that contains the sticky header
+        defaultTableRef, // set this ref for the table that contains the data and default header
+    };
+};
+//# sourceMappingURL=use_sticky_header.js.map

package/tabs/src/index.d.ts

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

package/tabs/src/index.js

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

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

@@ -0,0 +1,43 @@
+import { FC, ReactNode } from 'react';
+export interface TabItem {
+    label: ReactNode;
+    content: ReactNode;
+    disabled?: boolean;
+    hidden?: boolean;
+    dataTestId?: string;
+    /**
+     * Defines the method used to hide inactive tabs
+     * unmount (Default and recommended), removes the tab from the DOM
+     * hidden, keeps the tab in the DOM but without visibility. Useful to preload data
+     */
+    renderStrategy?: 'unmount' | 'hidden';
+}
+export type TabsProps = {
+    /**
+     * Different items to be shown in the tabs
+     */
+    tabItems: TabItem[];
+    /**
+     * Index of the active tab
+     */
+    defaultIndex?: number;
+    /**
+     * Callback function to be called when a tab is clicked
+     * @param index
+     */
+    onTabChange?: (index: number) => void;
+    /**
+     * If true, the tab will not automatically change using the arrow keys.
+     * https://headlessui.com/react/tabs#manually-activating-tabs for more info
+     */
+    manual?: boolean;
+    /**
+     * If true, the tabs will be displayed vertically
+     */
+    vertical?: boolean;
+    /**
+     * The index of the currently selected tab
+     */
+    selectedIndex?: number;
+};
+export declare const Tabs: FC<TabsProps>;

package/tabs/src/lib/tabs.component.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react';
+export const Tabs = ({ defaultIndex = 0, manual = false, onTabChange, tabItems, vertical = false, selectedIndex, }) => (_jsxs(TabGroup, { defaultIndex: defaultIndex, onChange: onTabChange, manual: manual, vertical: vertical, as: 'div', selectedIndex: selectedIndex, className: `nucleus-flex ${vertical ? 'nucleus-flex-row' : 'nucleus-flex-col'}`, children: [_jsx(TabList, { className: `
+        nucleus-flex nucleus-border-0 ${vertical ? 'nucleus-flex-col nucleus-px-3 nucleus-pt-6 nucleus-w-[14rem]' : 'nucleus-flex-row nucleus-border-b-1'}
+        nucleus-box-border nucleus-flex-shrink-0 nucleus-overflow-x-auto nucleus-overflow-y-hidden nucleus-whitespace-nowrap nucleus-border-solid nucleus-mb-6
+        nucleus-border-neutral-200
+      `, children: tabItems.map((tab) => {
+                if (tab.hidden) {
+                    return null;
+                }
+                return (_jsx("div", { className: 'nucleus-box-border nucleus-text-sm nucleus-font-sans nucleus-mr-4 ui-focus-visible:nucleus-outline-0', children: _jsx(Tab, { className: `
+                nucleus-border-solid nucleus-font-sans nucleus-border-transparent
+                nucleus-box-border nucleus-bg-white nucleus-text-text-primary
+                nucleus-normal-case nucleus-outline-0  nucleus-outline-none
+                ui-selected:ui-focus-visible:nucleus-bg-primary-100
+                ui-not-selected:ui-focus-visible:nucleus-bg-neutral-200
+                ${vertical
+                            ? 'nucleus-border-0 nucleus-border-l-4 nucleus-pl-5 nucleus-py-2 nucleus-font-medium nucleus-w-full nucleus-truncate nucleus-text-start ui-selected:nucleus-border-primary-500 ui-selected:nucleus-text-primary-500'
+                            : 'nucleus-border-2 nucleus-border-x-0 nucleus-rounded-t-md nucleus-px-2 nucleus-py-1 ui-selected:nucleus-border-b-2 ui-selected:nucleus-border-b-primary-500 ui-selected:ui-focus-visible:nucleus-border-2'}
+                ${!tab.disabled
+                            ? 'hover:nucleus-bg-neutral-200 ui-focus-visible:nucleus-border-primary-500 nucleus-cursor-pointer'
+                            : 'nucleus-accent-text-disabled'}
+              `, disabled: tab.disabled, "data-testid": tab.dataTestId, children: tab.label }) }, `${tab.label}-label`));
+            }) }), _jsx(TabPanels, { className: `${vertical ? 'nucleus-pl-8 nucleus-pt-6' : ''}`, children: tabItems.map((tab) => {
+                if (tab.disabled || tab.hidden) {
+                    return null;
+                }
+                return (_jsx(TabPanel, { unmount: tab.renderStrategy !== 'hidden', className: 'nucleus-outline-none', children: tab.content }, `${tab.label}-content`));
+            }) })] }));
+//# sourceMappingURL=tabs.component.js.map

package/text_area/src/index.d.ts

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

package/text_area/src/index.js

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

package/text_area/src/lib/text_area.d.ts

@@ -0,0 +1,243 @@
+import { ForwardedRef, JSX } from 'react';
+type TextAreaNativeProps = Omit<JSX.IntrinsicElements['textarea'], 'placeholder' | 'ref'>;
+export type TextAreaProps = TextAreaNativeProps & {
+    /**
+     * Controls whether the text area is disabled or not. Disabled text areas do not react to any change, focus or hover events. The accessibility property `aria-disabled` will also be set to this value.
+     */
+    disabled?: TextAreaNativeProps['disabled'];
+    /**
+     * This sets the data-testid attribute on the text area 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 text area field has error.
+     */
+    hasError?: boolean;
+    /**
+     * Id for the text area element, also used in `htmlFor` attribute of the label to bind them together.
+     */
+    id: NonNullable<TextAreaNativeProps['id']>;
+    /**
+     * Sets maximum length of the text area. Setting this also displays the `value count/limit` on top of the text area field.
+     */
+    maxLength?: TextAreaNativeProps['maxLength'];
+    /**
+     * Sets placeholder of the text area.
+     */
+    placeholder?: JSX.IntrinsicElements['textarea']['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;
+    /**
+     * Specifies the visible height of a text area, in lines.
+     */
+    rows?: TextAreaNativeProps['rows'];
+    /**
+     * Sets the size of the text area.
+     */
+    width?: 'xs' | 'sm' | 'base' | 'lg' | 'full';
+    /**
+     * Option for specifying resize functionality
+     */
+    resize?: 'none' | 'both' | 'vertical' | 'horizontal';
+    /**
+     * When true, the textarea automatically expands to fit its content.
+     * The `rows` prop is treated as the minimum height.
+     */
+    autogrow?: boolean;
+    /**
+     * Maximum number of rows to grow to when `autogrow` is true. Defaults to 10.
+     * Once content exceeds this, the textarea will scroll vertically.
+     */
+    autogrowMaxRows?: number;
+    /**
+     * The function to call when the text area is changed.
+     */
+    onChange: TextAreaNativeProps['onChange'];
+    /**
+     * The ref to be forwarded to the native textarea element
+     */
+    ref?: ForwardedRef<HTMLTextAreaElement>;
+} & ({
+    /**
+     * The text label for this component. The accessibility property `aria-label` will also be set to this value.
+     */
+    label: string;
+} | {
+    'label'?: never;
+    /**
+     * the accessibility property that screen readers will read as the label for the textarea. If label is not defined, aria-label must be defined.
+     */
+    'aria-label': TextAreaNativeProps['aria-label'];
+});
+/**
+ * TextArea allows a user to input large text inputs.
+ */
+export declare const TextArea: import("react").ForwardRefExoticComponent<(Omit<TextAreaNativeProps & {
+    /**
+     * Controls whether the text area is disabled or not. Disabled text areas do not react to any change, focus or hover events. The accessibility property `aria-disabled` will also be set to this value.
+     */
+    disabled?: TextAreaNativeProps["disabled"];
+    /**
+     * This sets the data-testid attribute on the text area 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 text area field has error.
+     */
+    hasError?: boolean;
+    /**
+     * Id for the text area element, also used in `htmlFor` attribute of the label to bind them together.
+     */
+    id: NonNullable<TextAreaNativeProps["id"]>;
+    /**
+     * Sets maximum length of the text area. Setting this also displays the `value count/limit` on top of the text area field.
+     */
+    maxLength?: TextAreaNativeProps["maxLength"];
+    /**
+     * Sets placeholder of the text area.
+     */
+    placeholder?: JSX.IntrinsicElements["textarea"]["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;
+    /**
+     * Specifies the visible height of a text area, in lines.
+     */
+    rows?: TextAreaNativeProps["rows"];
+    /**
+     * Sets the size of the text area.
+     */
+    width?: "xs" | "sm" | "base" | "lg" | "full";
+    /**
+     * Option for specifying resize functionality
+     */
+    resize?: "none" | "both" | "vertical" | "horizontal";
+    /**
+     * When true, the textarea automatically expands to fit its content.
+     * The `rows` prop is treated as the minimum height.
+     */
+    autogrow?: boolean;
+    /**
+     * Maximum number of rows to grow to when `autogrow` is true. Defaults to 10.
+     * Once content exceeds this, the textarea will scroll vertically.
+     */
+    autogrowMaxRows?: number;
+    /**
+     * The function to call when the text area is changed.
+     */
+    onChange: TextAreaNativeProps["onChange"];
+    /**
+     * The ref to be forwarded to the native textarea element
+     */
+    ref?: ForwardedRef<HTMLTextAreaElement>;
+} & {
+    /**
+     * The text label for this component. The accessibility property `aria-label` will also be set to this value.
+     */
+    label: string;
+}, "ref"> | Omit<TextAreaNativeProps & {
+    /**
+     * Controls whether the text area is disabled or not. Disabled text areas do not react to any change, focus or hover events. The accessibility property `aria-disabled` will also be set to this value.
+     */
+    disabled?: TextAreaNativeProps["disabled"];
+    /**
+     * This sets the data-testid attribute on the text area 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 text area field has error.
+     */
+    hasError?: boolean;
+    /**
+     * Id for the text area element, also used in `htmlFor` attribute of the label to bind them together.
+     */
+    id: NonNullable<TextAreaNativeProps["id"]>;
+    /**
+     * Sets maximum length of the text area. Setting this also displays the `value count/limit` on top of the text area field.
+     */
+    maxLength?: TextAreaNativeProps["maxLength"];
+    /**
+     * Sets placeholder of the text area.
+     */
+    placeholder?: JSX.IntrinsicElements["textarea"]["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;
+    /**
+     * Specifies the visible height of a text area, in lines.
+     */
+    rows?: TextAreaNativeProps["rows"];
+    /**
+     * Sets the size of the text area.
+     */
+    width?: "xs" | "sm" | "base" | "lg" | "full";
+    /**
+     * Option for specifying resize functionality
+     */
+    resize?: "none" | "both" | "vertical" | "horizontal";
+    /**
+     * When true, the textarea automatically expands to fit its content.
+     * The `rows` prop is treated as the minimum height.
+     */
+    autogrow?: boolean;
+    /**
+     * Maximum number of rows to grow to when `autogrow` is true. Defaults to 10.
+     * Once content exceeds this, the textarea will scroll vertically.
+     */
+    autogrowMaxRows?: number;
+    /**
+     * The function to call when the text area is changed.
+     */
+    onChange: TextAreaNativeProps["onChange"];
+    /**
+     * The ref to be forwarded to the native textarea element
+     */
+    ref?: ForwardedRef<HTMLTextAreaElement>;
+} & {
+    label?: never;
+    /**
+     * the accessibility property that screen readers will read as the label for the textarea. If label is not defined, aria-label must be defined.
+     */
+    'aria-label': TextAreaNativeProps["aria-label"];
+}, "ref">) & import("react").RefAttributes<HTMLTextAreaElement>>;
+export {};