@seeqdev/qomponents 0.0.184 → 0.0.185

package/dist/src/Modal/Modal.types.d.ts

@@ -0,0 +1,244 @@
+import { FormControlElement } from '../types';
+import React from 'react';
+import { ButtonVariant } from '../Button/Button.types';
+export type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+export type TitleIconPosition = 'left' | 'right';
+export interface ModalProps {
+    /**
+     * Main title text displayed prominently in the modal header.
+     * This is the primary heading that identifies the purpose or content of the modal.
+     */
+    title: string;
+    /**
+     * Additional text to append after the main title.
+     * Useful for adding context, version numbers, or secondary information to the title.
+     */
+    titleSuffixLabel?: string;
+    /**
+     * Secondary text displayed below the main title in the header.
+     * Use this for additional context, descriptions, or instructions for the modal content.
+     */
+    subtitle?: string;
+    /**
+     * Icon to display next to the title in the header.
+     * Can be an icon class name (string) for font icons or a React element for custom icons.
+     * Helps provide visual context for the modal's purpose.
+     */
+    titleIcon?: string | React.ReactElement;
+    /**
+     * Position of the title icon relative to the title text:
+     * - `left`: Icon appears before the title text
+     * - `right`: Icon appears after the title text
+     * @default 'left'
+     */
+    titleIconPosition?: TitleIconPosition;
+    /**
+     * Main content of the modal body.
+     * This is where you place the primary content, forms, information, or interactive elements.
+     * Must be a single React element (wrap multiple elements in a container if needed).
+     */
+    children: React.ReactElement;
+    /**
+     * Custom footer content that completely replaces the default button footer.
+     * When provided, all default buttons (submit, cancel, custom) are hidden.
+     * Use this when you need complete control over the footer layout and actions.
+     */
+    modalFooter?: React.ReactElement;
+    /**
+     * Controls whether the modal is currently visible and open.
+     * When true, the modal is displayed with overlay. When false, the modal is hidden.
+     * Use this prop to control modal visibility from parent components.
+     */
+    open: boolean;
+    /**
+     * Callback function triggered when the user attempts to close the modal.
+     * Called when clicking the X button, cancel button, or clicking outside the modal.
+     * Use this to handle modal closure logic and update the `open` state.
+     */
+    onClose?: () => any;
+    /**
+     * When true, displays an additional custom button in the footer alongside default buttons.
+     * The custom button appears before the submit and cancel buttons.
+     * Configure the button's appearance and behavior with related custom button props.
+     */
+    customButton?: boolean;
+    /**
+     * Text label for the custom button when `customButton` is true.
+     * This text will be displayed on the button to indicate its purpose or action.
+     */
+    customButtonLabel?: string;
+    /**
+     * Callback function triggered when the custom button is clicked.
+     * Use this to define the action that should occur when users click the custom button.
+     */
+    onClickCustomButton?: () => any;
+    /**
+     * Text label for the primary submit/confirmation button.
+     * This button typically confirms the modal action or submits form data.
+     * @default "OK"
+     */
+    submitButtonLabel?: string;
+    /**
+     * Text label for the cancel/dismiss button.
+     * This button typically closes the modal without saving changes or performing actions.
+     * @default "Cancel"
+     */
+    cancelButtonLabel?: string;
+    /**
+     * When true, disables the submit button preventing user interaction.
+     * Useful when form validation fails or when an operation is in progress.
+     * The button will appear visually disabled and won't respond to clicks.
+     */
+    disableSubmitButton?: boolean;
+    /**
+     * Controls whether the submit button click event should stop propagation.
+     * When true, prevents the click event from bubbling up to parent elements.
+     * @default true
+     */
+    stopPropagationSubmitButton?: boolean;
+    /**
+     * Callback function triggered when the submit button is clicked.
+     * Receives the click event as a parameter for additional event handling.
+     * Use this to handle form submission, data processing, or confirmation actions.
+     */
+    onSubmit?: (event: React.MouseEvent) => any;
+    /**
+     * When true, allows the title text to be edited inline by clicking on it.
+     * The title becomes an input field that users can modify directly in the modal header.
+     * Useful for renaming operations or title customization workflows.
+     */
+    isTitleEditable?: boolean;
+    /**
+     * Callback function triggered when the editable title text changes.
+     * Only relevant when `isTitleEditable` is true. Receives the change event
+     * which contains the new title value. Use this to update your title state.
+     */
+    onTitleChanged?: React.ChangeEventHandler<FormControlElement>;
+    /**
+     * Additional CSS classes to apply to the title input field.
+     * Only used when `isTitleEditable` is true. Use this to customize
+     * the appearance of the editable title input beyond default styling.
+     */
+    inputExtraClassNames?: string;
+    /**
+     * When true, hides the X close icon button in the modal header.
+     * Users will only be able to close the modal using footer buttons or by clicking outside.
+     * Useful when you want to force users to make an explicit choice via footer buttons.
+     */
+    hideCloseIcon?: boolean;
+    /**
+     * Size variant that controls the modal's width and maximum dimensions:
+     * - `xs`: Extra small modal (280px max width)
+     * - `sm`: Small modal (384px max width)
+     * - `md`: Medium modal (448px max width)
+     * - `lg`: Large modal (512px max width)
+     * - `xl`: Extra large modal (576px max width)
+     * - `2xl` through `6xl`: Progressively larger sizes up to full screen
+     */
+    size?: ModalSize;
+    /**
+     * When true, completely hides all default footer buttons (submit, cancel, custom).
+     * The modal will only have header and body content. Useful when you provide
+     * custom actions within the modal body or use a custom footer.
+     */
+    hideFooterButtons?: boolean;
+    /**
+     * When true, hides only the submit button while keeping other footer buttons visible.
+     * Useful for information-only modals that don't require a confirmation action.
+     */
+    hideSubmitButton?: boolean;
+    /**
+     * When true, hides only the cancel button while keeping other footer buttons visible.
+     * Useful for critical operations where cancellation should not be easily accessible.
+     */
+    hideCancelButton?: boolean;
+    /**
+     * Test ID attribute for the modal container element.
+     * Used for automated testing to identify and interact with the modal.
+     * Applied to the modal's root element for test targeting.
+     */
+    testId?: string;
+    /**
+     * Additional CSS classes to apply to the modal dialog container.
+     * Use this to customize the modal's positioning, sizing, or appearance
+     * beyond the built-in size variants and default styling.
+     */
+    dialogClassName?: string;
+    /**
+     * Placeholder text displayed in the title input when `isTitleEditable` is true.
+     * Shows helpful text when the title field is empty, guiding users on what to enter.
+     */
+    titlePlaceholder?: string;
+    /**
+     * When true, makes the title field required when `isTitleEditable` is true.
+     * Prevents submission or validation if the title is empty. Usually combined
+     * with validation feedback and error handling.
+     */
+    titleRequired?: boolean;
+    /**
+     * Error message to display when the editable title has validation issues.
+     * Only shown when `isTitleEditable` is true and there's a title validation error.
+     * Provides user feedback about what needs to be corrected.
+     */
+    titleError?: string;
+    /**
+     * Tooltip text to display when hovering over the submit button.
+     * Provides additional context or instructions about what the submit action will do.
+     * Helpful for clarifying the button's purpose in complex workflows.
+     */
+    submitButtonTooltip?: string;
+    /**
+     * Tooltip text to display when hovering over the cancel button.
+     * Can provide information about what happens when canceling or any data loss warnings.
+     */
+    cancelButtonTooltip?: string;
+    /**
+     * When true, disables the custom button preventing user interaction.
+     * Only relevant when `customButton` is true. The button will appear
+     * visually disabled and won't respond to clicks.
+     */
+    disableCustomButton?: boolean;
+    /**
+     * Custom header content that completely replaces the default modal header.
+     * When provided, the default title, subtitle, and close button are not rendered.
+     * Use this when you need complete control over the header layout and content.
+     */
+    customHeader?: React.ReactElement;
+    /**
+     * Content to display in the center area of the footer between buttons.
+     * Useful for adding status messages, progress indicators, or additional
+     * information that should be visible alongside the action buttons.
+     */
+    middleFooterSection?: React.ReactElement;
+    /**
+     * Visual style variant for the custom button when `customButton` is true.
+     * Determines the button's appearance and color scheme. Uses the same
+     * variants as the standard Button component (outline, theme, danger, etc.).
+     */
+    customButtonVariant?: ButtonVariant;
+    /**
+     * Controls whether focus should be trapped within the modal when open.
+     * When true (default), focus cycles through modal elements only. Set to false
+     * if you need to interact with elements outside the modal (like tooltips with inputs).
+     * @default true
+     */
+    keepFocusInsideModal?: boolean;
+    /**
+     * Visual style variant for the submit button.
+     * Determines the button's appearance and color scheme. Use 'theme' for primary
+     * actions, 'danger' for destructive actions, or other variants as appropriate.
+     */
+    submitButtonVariant?: ButtonVariant;
+    /**
+     * Callback function triggered when the user clicks/taps outside the modal dialog.
+     * Receives the pointer event. Use this to customize outside-click behavior,
+     * such as preventing closure in certain conditions or showing warnings.
+     */
+    onPointerDownOutside?: (e: Event) => void;
+    /**
+     * Callback function triggered when the user interacts outside the modal.
+     * This includes clicks, taps, and other interactions outside the modal area.
+     * More general than `onPointerDownOutside` and covers additional interaction types.
+     */
+    onInteractOutside?: (e: Event) => void;
+}

package/dist/src/Modal/Modal.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/Modal/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Modal';

package/dist/src/Modal/index.js

@@ -0,0 +1 @@
+export { default } from './Modal';

package/dist/src/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ProgressBarProps } from './ProgressBar.types';
+declare const ProgressBar: React.FunctionComponent<ProgressBarProps>;
+export default ProgressBar;

package/dist/src/ProgressBar/ProgressBar.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import React, { useEffect, useRef } from 'react';
+import * as Progress from '@radix-ui/react-progress';
+import { getQTipData } from '../Tooltip/qTip.utilities';
+import tinycolor from 'tinycolor2';
+const baseLabelClasses = 'tw-left-1 tw-text-xs tw-text-sq-text-color dark:tw-text-sq-dark-text tw-items-center tw-h-[18px]';
+const ProgressIndicator = (props) => {
+    const { value, color = undefined, testId, label, extraClasses = '', labelClasses = '', valuesLength, max, index, totalValue, ...tooltipProps } = props;
+    const tooltipData = getQTipData(tooltipProps);
+    const previousWidth = useRef(0);
+    const indicatorElementRef = useRef(null);
+    const [textColorClass, setTextColorClass] = React.useState('');
+    const [animatedWidth, setAnimatedWidth] = React.useState(previousWidth.current);
+    // Determine which corners to round based on position and total value
+    let roundedCorners = '';
+    if (totalValue >= max) {
+        // If progress is 100%, round both ends
+        if (index === 0 && valuesLength === 1) {
+            roundedCorners = 'tw-rounded-[15px]';
+        }
+        else if (index === 0) {
+            roundedCorners = 'tw-rounded-l-[15px]';
+        }
+        else if (index === valuesLength - 1) {
+            roundedCorners = 'tw-rounded-r-[15px]';
+        }
+    }
+    else {
+        // Otherwise, only round the leftmost indicator
+        if (index === 0) {
+            roundedCorners = 'tw-rounded-l-[15px]';
+        }
+    }
+    useEffect(() => {
+        const timeout = setTimeout(() => {
+            const newWidth = (Number(value) / Number(max)) * 100;
+            setAnimatedWidth(newWidth);
+            previousWidth.current = newWidth;
+        }, 100);
+        return () => clearTimeout(timeout);
+    }, [value]);
+    const bgColor = color || undefined;
+    const bgClass = color ? '' : 'tw-bg-sq-color-dark';
+    const computeTextClass = (elem) => {
+        const computedStyle = getComputedStyle(elem);
+        const backgroundColor = computedStyle.backgroundColor;
+        const textColorClass = tinycolor(backgroundColor).isDark()
+            ? 'tw-text-sq-white dark:tw-text-sq-white'
+            : 'tw-text-sq-text-color dark:tw-text-sq-text-color';
+        setTextColorClass(textColorClass);
+    };
+    useEffect(() => {
+        if (indicatorElementRef.current) {
+            computeTextClass(indicatorElementRef.current);
+        }
+    }, [!!indicatorElementRef.current]);
+    return (_createElement(Progress.Indicator, { className: `tw-ease-[cubic-bezier(0.65, 0, 0.35, 1)] tw-w-full tw-h-[18px] tw-duration-[660ms] tw-flex tw-justify-center tw-items-center ${valuesLength === 1 ? '' : 'tw-overflow-hidden'} ${roundedCorners} ${bgClass} ${extraClasses}`, ...tooltipData, "data-qtip-text": tooltipProps.tooltip ? tooltipProps.tooltip : `${value}%`, "data-testid": `progress-bar-indicator-${testId ? testId : value}`, key: `${index}-${value}`, ref: indicatorElementRef, style: {
+            // Background color will default to the theme color if undefined
+            backgroundColor: bgColor,
+            animation: 'width 660ms forwards',
+            width: `${animatedWidth}%`,
+        } }, label ? (_jsx("span", { className: `${baseLabelClasses} ${labelClasses} ${textColorClass} ${valuesLength === 1 ? 'tw-absolute tw-z-50' : ''}`, children: label })) : undefined));
+};
+const ProgressBar = ({ values = [], max = 100, containerExtraClasses = '', zeroValueLabel = 'No progress yet', }) => {
+    const totalValue = values.reduce((acc, { value }) => acc + value, 0);
+    return (_jsx(Progress.Root, { className: `tw-relative tw-h-[18px] tw-w-full tw-overflow-hidden tw-rounded-[15px] tw-bg-sq-dark-gray dark:tw-bg-sq-dark-disabled-gray tw-flex tw-flex-1 ${containerExtraClasses}`, max: max, value: totalValue, children: totalValue > 0 ? (values.map((props, i) => {
+            return (_createElement(ProgressIndicator, { ...props, max: max, valuesLength: values.length, index: i, totalValue: totalValue, key: i }));
+        })) : (_jsx("div", { className: `${baseLabelClasses} tw-mx-auto tw-overflow-hidden`, children: zeroValueLabel })) }));
+};
+export default ProgressBar;

package/dist/src/ProgressBar/ProgressBar.stories.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const AllProgressBars: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/ProgressBar/ProgressBar.stories.js

@@ -0,0 +1,46 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect } from 'react';
+import ProgressBar from './ProgressBar';
+import { QTip } from '../Tooltip';
+export default {
+    title: 'ProgressBar',
+};
+export const AllProgressBars = () => {
+    const [values, setValues] = React.useState([
+        { value: 20, label: 'RGB' },
+        { value: 15, color: 'brown', label: 'Brown' },
+        { value: 40, color: '#435abc', label: 'Hex' },
+    ]);
+    useEffect(() => {
+        const timeout = setTimeout(() => {
+            setValues([
+                { value: 40, label: 'RGB' },
+                { value: 5, color: 'brown', label: 'Brown' },
+                { value: 50, color: '#435abc', label: 'Hex' },
+            ]);
+        }, 2000);
+        return () => clearTimeout(timeout);
+    });
+    const renderAllVariations = () => (_jsxs(_Fragment, { children: [
+            _jsxs("div", { className: "tw-p-4 light", children: [
+                    _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { max: 100, values: [{ value: 40 }] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { max: 100, values: [{ value: 10 }] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { values: [{ value: 0 }], max: 100 }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { values: [{ value: 70, tooltip: 'this is an indicator tooltip' }], max: 100, containerExtraClasses: "tw-bg-sq-text-color" }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { values: [
+                                { value: 20, label: 'RGB' },
+                                { value: 15, color: 'brown', label: 'Brown' },
+                                { value: 40, color: '#435abc', label: 'Hex' },
+                            ], max: 100, containerExtraClasses: "tw-bg-sq-text-color" }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { values: [{ value: 5, label: 'A very long text' }], max: 100 }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { values: values, max: 100, containerExtraClasses: "tw-bg-sq-text-color" }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { values: [{ value: 0, label: 'zero label' }], max: 100 }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { values: [{ value: 0 }], zeroValueLabel: "default zero level label deliberately long to test overflow", max: 100 }) })
+                ] }), _jsxs("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: [
+                    _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { max: 100, values: [{ value: 40 }] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { max: 100, values: [{ value: 10 }] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { values: [{ value: 0 }], max: 100 }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { values: [{ value: 70, tooltip: 'this is an indicator tooltip' }], max: 100, containerExtraClasses: "tw-bg-sq-text-color" }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { values: [
+                                { value: 20, color: 'rgb(44,200,190)', label: 'RGB' },
+                                { value: 15, color: 'brown', label: 'Brown' },
+                                { value: 40, color: '#435abc', label: 'Hex' },
+                            ], max: 100, containerExtraClasses: "tw-bg-sq-text-color" }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { values: values, max: 100, containerExtraClasses: "tw-bg-sq-text-color" }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { values: [{ value: 0, label: 'zero label' }], max: 100, containerExtraClasses: "tw-bg-sq-text-color" }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { values: [{ value: 0 }], zeroValueLabel: "default zero level label is made deliberately long to test overflow", max: 100, containerExtraClasses: "tw-bg-sq-text-color" }) })
+                ] })
+        ] }));
+    return (_jsxs("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4", children: [
+            _jsx(QTip, {}), _jsxs("div", { className: "color_topic", children: [
+                    _jsx("b", { children: "Topic Colors" }), renderAllVariations()] }), _jsxs("div", { className: "color_analysis", children: [
+                    _jsx("b", { children: "Analysis Colors" }), renderAllVariations()] }), _jsxs("div", { className: "color_datalab", children: [
+                    _jsx("b", { children: "Datalab Colors" }), renderAllVariations()] }), _jsxs("div", { className: "color_vantage", children: [
+                    _jsx("b", { children: "Vantage Colors" }), renderAllVariations()] })
+        ] }));
+};

package/dist/src/ProgressBar/ProgressBar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/ProgressBar/ProgressBar.test.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from '@testing-library/react';
+import ProgressBar from './ProgressBar';
+import userEvent from '@testing-library/user-event';
+describe('ProgressBar', () => {
+    it('renders without crashing', () => {
+        render(_jsx(ProgressBar, { values: [{ value: 50 }] }));
+        const progressBar = screen.getByRole('progressbar');
+        expect(progressBar).toBeInTheDocument();
+    });
+    it('displays the correct progress value', () => {
+        render(_jsx(ProgressBar, { values: [{ value: 75 }] }));
+        const progressBarIndicator = screen.getByRole('progressbar').firstChild;
+        waitFor(() => {
+            expect(progressBarIndicator).toHaveStyle('transform: translateX(-25%)');
+        });
+    });
+    it('applies the correct max value', () => {
+        render(_jsx(ProgressBar, { values: [{ value: 50 }], max: 200 }));
+        const progressBar = screen.getByRole('progressbar');
+        expect(progressBar).toHaveAttribute('data-max', '200');
+    });
+    it('displays the tooltip with the correct label', () => {
+        render(_jsx(ProgressBar, { values: [{ value: 50, tooltip: 'Progress' }] }));
+        userEvent.hover(screen.getByTestId('progress-bar-indicator-50'));
+        waitFor(() => {
+            expect(screen.getByText('Progress')).toBeInTheDocument();
+        });
+    });
+    it('displays the no progress level for zero value', () => {
+        render(_jsx(ProgressBar, { values: [{ value: 0, tooltip: '0%' }], zeroValueLabel: "No progress" }));
+        waitFor(() => {
+            expect(screen.getByText('No progress')).toBeInTheDocument();
+        });
+    });
+    it('applies the multiple values of the Progress bar', () => {
+        render(_jsx(ProgressBar, { values: [{ value: 20 }, { value: 15 }, { value: 40 }], max: 200 }));
+        for (const val of [20, 15, 40]) {
+            expect(screen.getByTestId(`progress-bar-indicator-${val}`)).toBeInTheDocument();
+        }
+    });
+});

package/dist/src/ProgressBar/ProgressBar.types.d.ts

@@ -0,0 +1,77 @@
+import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
+/**
+ * Props for individual progress indicators within a ProgressBar.
+ * Each indicator represents a segment of the overall progress with its own value and styling.
+ * Extends TooltipComponentProps to support tooltip functionality on individual indicators.
+ */
+export interface ProgressIndicatorProps extends TooltipComponentProps {
+    /**
+     * Additional CSS classes to apply to this specific progress indicator.
+     * Use this to customize the appearance of individual indicators within the progress bar.
+     */
+    extraClasses?: string;
+    /**
+     * Test ID attribute for this progress indicator used in automated testing.
+     * Helps identify and interact with specific indicators in test suites.
+     */
+    testId?: string;
+    /**
+     * Current value of this progress indicator.
+     * Should be between 0 and the progress bar's max value. The indicator's width
+     * will be calculated as a percentage based on this value relative to the max.
+     */
+    value: number;
+    /**
+     * Custom color for this progress indicator.
+     * Can be any valid CSS color value (hex, rgb, color names, etc.).
+     * If not provided, uses the default theme color for progress indicators.
+     */
+    color?: string;
+    /**
+     * Text label to display on or next to this progress indicator.
+     * Useful for showing the indicator's name, category, or current value.
+     * Can be positioned and styled using labelClasses.
+     */
+    label?: string;
+    /**
+     * Additional CSS classes to apply specifically to the indicator's label.
+     * Use this to customize the label's typography, positioning, or styling
+     * independently from the indicator itself.
+     */
+    labelClasses?: string;
+}
+/**
+ * Props for the ProgressBar component that displays one or more progress indicators.
+ * Supports multiple indicators for showing different categories or segments of progress.
+ */
+export interface ProgressBarProps {
+    /**
+     * Array of progress indicators to display within the progress bar.
+     * Each indicator can have its own value, color, label, and styling.
+     * Indicators are rendered in the order they appear in the array.
+     */
+    values: ProgressIndicatorProps[];
+    /**
+     * Maximum value for the progress bar scale.
+     * All indicator values are calculated as percentages relative to this maximum.
+     * Determines the full width (100%) of the progress bar.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Additional CSS classes to apply to the progress bar container.
+     * Use this to customize the overall appearance, spacing, or layout of the entire progress bar.
+     */
+    containerExtraClasses?: string;
+    /**
+     * Test ID attribute for the progress bar container used in automated testing.
+     * Applied to the main container element for test targeting and interaction.
+     */
+    testId?: string;
+    /**
+     * Text label to display when all progress indicators have a value of zero.
+     * Useful for providing context or instructions when no progress has been made.
+     * Only shown when the total progress is zero.
+     */
+    zeroValueLabel?: string;
+}

package/dist/src/ProgressBar/ProgressBar.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/ProgressBar/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ProgressBar';

package/dist/src/ProgressBar/index.js

@@ -0,0 +1 @@
+export { default } from './ProgressBar';

package/dist/src/SeeqActionDropdown/SeeqActionDropdown.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { SeeqActionDropdownProps } from './SeeqActionDropdown.types';
+declare const SeeqActionDropdown: React.FunctionComponent<SeeqActionDropdownProps>;
+export default SeeqActionDropdown;

package/dist/src/SeeqActionDropdown/SeeqActionDropdown.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { getQTipData } from '../Tooltip/qTip.utilities';
+import { InsertSeeqContent, SeeqActionDropdownItem, ViewWorkbench } from './variants';
+const borderStyles = [
+    'tw-border-solid',
+    'tw-border',
+    'tw-rounded-md',
+    'tw-border-sq-disabled-gray',
+    'dark:tw-border-gray-500',
+].join(' ');
+const bgStyles = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
+const disabledClasses = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
+const renderItem = (variant, item) => {
+    switch (variant) {
+        case 'create-workbench':
+            return _jsx(SeeqActionDropdownItem, { ...item });
+        case 'view-workbench':
+            return _jsx(ViewWorkbench, { ...item });
+        case 'insert-seeq-content':
+            return _jsx(InsertSeeqContent, { ...item });
+        default:
+            return _jsx(SeeqActionDropdownItem, { ...item });
+    }
+};
+const SeeqActionDropdown = ({ seeqActionDropdownItems, trigger, id, extraClassNames, containerTestId, disabled = false, align = 'end', placement = 'bottom', placementOffset = 5, alignOffset = -35, hasArrow = false, onOpenChange, isOpen, setFocusOnTriggerOnClose = true, keepFocusInsideDropdown = true, variant, ...tooltipProps }) => {
+    const tooltipData = getQTipData(tooltipProps);
+    return (_jsxs(DropdownMenu.Root, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown, children: [
+            _jsx(DropdownMenu.Trigger, { id: id, "data-testid": id, className: `tw-border-none focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none`, asChild: true, disabled: disabled, children: _jsx("div", { ...tooltipData, className: `tw-bg-transparent tw-flex tw-flex-col tw-items-center focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none ${disabled ? disabledClasses : ''} ${extraClassNames || ''}`, children: trigger }) }), _jsx(DropdownMenu.Content, { sideOffset: placementOffset, side: placement, align: align, alignOffset: alignOffset, asChild: true, onCloseAutoFocus: (e) => !setFocusOnTriggerOnClose && e.preventDefault(), className: "focus-visible:tw-outline-none tw-outline-none", children: _jsxs("div", { "data-testid": containerTestId, className: bgStyles +
+                        ' tw-relative tw-z-[1200] tw-min-w-6 tw-py-2 focus-visible:tw-outline-none tw-outline-none' +
+                        ' data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out' +
+                        ' forceFont data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade ' +
+                        borderStyles, children: [hasArrow && (_jsx(DropdownMenu.Arrow, { asChild: true, children: _jsx("div", { className: " tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] tw-rotate-45 dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-disabled-gray dark:tw-border-gray-500 tw-mt-[-7px]" }) })), seeqActionDropdownItems.map((item, index) => {
+                            return (_jsxs("div", { children: [
+                                    _jsx(DropdownMenu.Item, { onSelect: (e) => {
+                                            item.action(e);
+                                        }, className: `tw-cursor-pointer tw-flex dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-relative tw-select-none tw-outline-none data-[disabled]:tw-text-sq-disabled-gray data-[disabled]:tw-pointer-events-none`, "data-testid": item.testId, disabled: !item.enabled, children: renderItem(variant, item) }), item.divider && (_jsx(DropdownMenu.Separator, { "data-testid": `dropdown-divider-${index}`, className: "tw-h-[1px] tw-bg-sq-disabled-gray dark:tw-bg-gray-500 tw-my-[8px]" }))] }, item.display + index));
+                        })] }) })
+        ] }));
+};
+export default SeeqActionDropdown;

package/dist/src/SeeqActionDropdown/SeeqActionDropdown.stories.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const AllSeeqActionDropdownVariants: () => import("react/jsx-runtime").JSX.Element;