@seeqdev/qomponents 0.0.183 → 0.0.185

package/dist/src/ButtonWithDropdown/ButtonWithDropdown.test.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ButtonWithDropdown from './ButtonWithDropdown';
+import Icon from '../Icon';
+describe('ButtonWithDropdown', () => {
+    const mockOnClick = jest.fn();
+    const testId = 'trigger-icon';
+    const tooltip = 'This is a small dropdown.';
+    const itemTooltip = 'This is an item from the dropdown.';
+    class Context {
+        props = {
+            triggerIcon: (_jsx(Icon, { icon: "fc-more", type: "text", testId: testId, extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" })),
+            containerTestId: 'basic-dropdown1',
+            tooltip,
+            tooltipDelay: 0,
+            tooltipPlacement: 'top',
+            isHtmlTooltip: false,
+            dropdownItems: [
+                { label: 'Orange', icon: 'fc-data-file', onClick: mockOnClick },
+                { label: 'Mango', icon: 'fc-user-community', onClick: mockOnClick },
+                { label: 'Guava', icon: 'fc-user-community', onClick: mockOnClick },
+                {
+                    label: 'Banana',
+                    icon: 'fc-user-community',
+                    onClick: mockOnClick,
+                    tooltip: itemTooltip,
+                    tooltipPlacement: 'top',
+                    tooltipDelay: 0,
+                    isHtmlTooltip: false,
+                },
+            ],
+        };
+    }
+    let tc;
+    beforeEach(() => {
+        tc = new Context();
+        jest.clearAllMocks();
+    });
+    const renderButtonWithDropdown = (props) => render(_jsx(ButtonWithDropdown, { ...props }));
+    const openDropdown = async () => {
+        const popover = screen.getByTestId(testId);
+        await userEvent.click(popover);
+    };
+    test('renders trigger and opens dropdown content on trigger click', async () => {
+        renderButtonWithDropdown(tc.props);
+        expect(screen.getByTestId('trigger-icon')).toBeInTheDocument();
+        await openDropdown();
+        expect(screen.getByText('Orange')).toBeInTheDocument();
+    });
+    test('renders dividers correctly', async () => {
+        tc.props.dropdownItems[1].hasDivider = true;
+        renderButtonWithDropdown(tc.props);
+        expect(screen.getByTestId('trigger-icon')).toBeInTheDocument();
+        await openDropdown();
+        expect(screen.getByText('Orange')).toBeInTheDocument();
+        expect(screen.getByTestId('dropdown-divider-1')).toBeInTheDocument();
+    });
+    test('calls onClick handler when dropdown item is selected', async () => {
+        renderButtonWithDropdown(tc.props);
+        await openDropdown();
+        const item1 = screen.getByText('Orange');
+        await userEvent.click(item1);
+        expect(mockOnClick).toHaveBeenCalledTimes(1);
+    });
+    test('closes dropdown when item is clicked', async () => {
+        renderButtonWithDropdown(tc.props);
+        await openDropdown();
+        const item1 = screen.getByText('Orange');
+        await userEvent.click(item1);
+        expect(mockOnClick).toHaveBeenCalledTimes(1);
+        expect(screen.queryByText('Orange')).not.toBeInTheDocument();
+    });
+    test('does not open when disabled', async () => {
+        tc.props.disabled = true;
+        renderButtonWithDropdown(tc.props);
+        await openDropdown();
+        expect(screen.queryByText('Orange')).not.toBeInTheDocument();
+    });
+    test('renders button tooltip correctly', async () => {
+        renderButtonWithDropdown(tc.props);
+        const tooltipText = document.querySelector(`[data-qtip-text="${tooltip}"]`);
+        expect(tooltipText).toBeInTheDocument();
+    });
+    test('renders dropdown item tooltip correctly', async () => {
+        renderButtonWithDropdown(tc.props);
+        await openDropdown();
+        const tooltipText = document.querySelector(`[data-qtip-text="${itemTooltip}"]`);
+        expect(tooltipText).toBeInTheDocument();
+    });
+});

package/dist/src/ButtonWithDropdown/ButtonWithDropdown.types.js

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

package/dist/src/ButtonWithDropdown/index.js

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

package/dist/src/ButtonWithPopover/ButtonWithPopover.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useRef } from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { getQTipData } from '../Tooltip/qTip.utilities';
+const bgStyles = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
+const borderStyles = [
+    'tw-border-solid',
+    'tw-border',
+    'tw-rounded-popover',
+    'tw-border-sq-disabled-gray',
+    'dark:tw-border-gray-500',
+].join(' ');
+const disabledClasses = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
+const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassNames, extraPopoverClassNames, containerTestId, onInteractOutside, onPointerDownOutside, isTriggerAsChild = false, shouldTriggerFullWidth = false, disabled = false, align = 'end', alignOffset = -35, placement = 'bottom', placementOffset = 2, isHoverEnabled = false, hoverOpenDelay = 300, onOpenChange, isOpen, isCloseOnContentClick = false, isPortal = false, ...tooltipProps }) => {
+    const tooltipData = getQTipData(tooltipProps);
+    const timeout = useRef(null);
+    const [isHoveredOpen, setIsHoveredOpen] = React.useState(false);
+    const clearHoverTimeout = () => {
+        if (timeout.current) {
+            clearTimeout(timeout.current);
+            timeout.current = null;
+        }
+    };
+    const onHoverStart = () => {
+        if (isHoverEnabled) {
+            clearHoverTimeout();
+            timeout.current = setTimeout(() => {
+                setIsHoveredOpen(true);
+                onOpenChange && onOpenChange(true);
+            }, hoverOpenDelay);
+        }
+    };
+    const onHoverEnd = () => {
+        if (isHoverEnabled) {
+            clearHoverTimeout();
+            timeout.current = setTimeout(() => {
+                setIsHoveredOpen(false);
+                onOpenChange && onOpenChange(false);
+            }, 200);
+        }
+    };
+    React.useEffect(() => clearHoverTimeout, []);
+    const renderContent = () => {
+        return (_jsx(PopoverPrimitive.Content, { sideOffset: placementOffset, align: align, side: placement, onInteractOutside: onInteractOutside, onPointerDownOutside: onPointerDownOutside, alignOffset: isHoverEnabled ? -10 : alignOffset, asChild: true, onClick: () => isCloseOnContentClick && onOpenChange && onOpenChange(false), className: "focus-visible:tw-outline-none tw-outline-none tw-w-full tw-h-full", children: _jsxs("div", { "data-testid": containerTestId, className: `${bgStyles} ${borderStyles} tw-relative tw-z-[1200] tw-min-w-6 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out
+         data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade tw-text-sq-text-color
+        ${extraPopoverClassNames || ''}`, children: [hasArrow && (_jsx(PopoverPrimitive.Arrow, { asChild: true, children: _jsx("div", { className: "tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] tw-mt-[-7px] 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" }) })), children] }) }));
+    };
+    const renderPopover = (popoverOpenState) => {
+        return (_jsxs(PopoverPrimitive.Root, { open: popoverOpenState, defaultOpen: false, onOpenChange: onOpenChange, children: [trigger ? (_jsx(PopoverPrimitive.Trigger, { id: id, asChild: isTriggerAsChild, className: `focus-visible:tw-outline-none tw-outline-none ${shouldTriggerFullWidth ? 'tw-w-full tw-h-full' : ''}`, disabled: disabled, children: _jsx("div", { ...tooltipData, onMouseOver: onHoverStart, onMouseOut: onHoverEnd, className: `tw-bg-transparent focus-visible:tw-outline-none tw-outline-none ${disabled ? disabledClasses : ''} ${shouldTriggerFullWidth ? 'tw-flex tw-flex-col tw-items-center tw-justify-center' : 'tw-inline'} ${extraTriggerClassNames || ''}`, children: trigger }) })) : (_jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsx("div", {}) })), isPortal ? _jsx(PopoverPrimitive.Portal, { children: renderContent() }) : renderContent()] }));
+    };
+    return isHoverEnabled ? renderPopover(isHoveredOpen) : renderPopover(isOpen);
+};
+export default ButtonWithPopover;

package/dist/src/ButtonWithPopover/ButtonWithPopover.stories.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import ButtonWithPopover from './ButtonWithPopover';
+import Icon from '../Icon';
+import { QTip } from '../Tooltip/Qtip';
+export default {
+    title: 'Button with Popover',
+};
+export const AllButtonWithPopoverVariants = () => {
+    const options = ['Chocolate', 'Strawberry', 'Vanilla', 'Rocky Road', 'Crazy Cow', 'Almond Joy'];
+    const renderFlavours = () => (_jsxs("div", { className: "tw-text-sm dark:tw-text-white tw-w-72 tw-p-4", children: [
+            _jsx("p", { className: "tw-font-bold", children: "Flavors" }), _jsx("div", { className: "tw-w-full tw-flex tw-flex-wrap tw-gap-1", children: options.map((option) => (_jsxs("div", { className: "tw-flex tw-items-center tw-px-2 tw-py-1 tw-mt-2 tw tw-rounded-full tw-border-sq-color-dark-dark tw-border", children: [
+                        _jsx(Icon, { type: "color", color: "rgb(var(--sq-color-dark-dark))", icon: "fc-check", extraClassNames: "tw-mr-2" }), _jsx("span", { children: option })
+                    ] }, option))) })
+        ] }));
+    const renderInputFields = () => {
+        const [name, setName] = React.useState('');
+        const [email, setEmail] = React.useState('');
+        return (_jsx("div", { className: "tw-w-72 tw-p-4", children: _jsxs("div", { className: "tw-flex tw-flex-col tw-gap-2", children: [
+                    _jsx("input", { type: "text", value: name, onChange: (e) => setName(e.target.value), placeholder: "Enter your name", className: "tw-p-2 tw-rounded tw-border tw-border-sq-color-dark-dark dark:tw-border-sq-dark-background tw-bg-transparent" }), _jsx("input", { type: "text", value: email, onChange: (e) => setEmail(e.target.value), placeholder: "Enter your email", className: "tw-p-2 tw-rounded tw-border tw-border-sq-color-dark-dark dark:tw-border-sq-dark-background tw-bg-transparent" }), _jsx("button", { className: "tw-p-2 tw-rounded tw-border tw-border-sq-color-dark-dark dark:tw-border-sq-dark-background tw-bg-transparent tw-text-sq-color", children: "Submit" })
+                ] }) }));
+    };
+    const [openPopver, setOpenPopover] = React.useState('');
+    const iconRef = React.useRef(null);
+    const allButtonWithPopovers = (isDark = false, topic) => (_jsxs("div", { className: isDark ? 'tw-dark tw-bg-sq-dark-background ' : '', children: [
+            _jsx("div", { className: "tw-p-5 ", children: _jsx(ButtonWithPopover, { trigger: _jsx(Icon, { type: "color", color: "rgb(var(--sq-color-dark-dark))", icon: "fc-more" }), containerTestId: `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-1`, tooltip: "This is a small popover.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, children: renderFlavours() }) }), _jsx("div", { className: "tw-p-5 ", children: _jsx(ButtonWithPopover, { trigger: _jsx(Icon, { type: "color", color: "rgb(var(--sq-color-dark-dark))", icon: "fc-more" }), containerTestId: `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-2`, isOpen: openPopver === `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-2`, onOpenChange: (isOpen) => setOpenPopover(isOpen ? `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-2` : ''), tooltip: "This is a normal popover.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, children: renderFlavours() }) }), _jsxs("div", { className: "tw-p-5 ", children: [
+                    _jsx("p", { className: "dark:tw-text-sq-white tw-text-sm tw-mb-4", children: "Close popover on content click" }), _jsx(ButtonWithPopover, { trigger: _jsx(Icon, { type: "color", color: "rgb(var(--sq-color-dark-dark))", icon: "fc-more" }), containerTestId: `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-3`, isOpen: openPopver === `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-3`, onOpenChange: (isOpen) => setOpenPopover(isOpen ? `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-3` : ''), tooltip: "This is a normal popover.", tooltipDelay: 0, tooltipPlacement: "top", isCloseOnContentClick: true, isHtmlTooltip: false, children: renderFlavours() })
+                ] }), _jsx("div", { className: "tw-p-5 ", children: _jsx(ButtonWithPopover, { trigger: _jsx(Icon, { type: "color", color: "rgb(var(--sq-color-dark-dark))", icon: "fc-more" }), containerTestId: `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-4`, isOpen: openPopver === `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-4`, onOpenChange: (isOpen) => setOpenPopover(isOpen ? `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-4` : ''), tooltip: "This is a disabled popover.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, disabled: true, children: renderFlavours() }) }), _jsxs("div", { className: "tw-p-5 ", children: [
+                    _jsx("div", { className: "dark:tw-text-white tw-text-xs", children: "Popover with arrow" }), _jsx(ButtonWithPopover, { trigger: _jsx(Icon, { type: "color", color: "rgb(var(--sq-color-dark-dark))", icon: "fc-more" }), containerTestId: `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-5`, isOpen: openPopver === `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-5`, onOpenChange: (isOpen) => setOpenPopover(isOpen ? `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-5` : ''), tooltip: "This is a normal popover with arrow.", tooltipDelay: 0, tooltipPlacement: "top", hasArrow: true, isHtmlTooltip: false, children: renderFlavours() })
+                ] }), _jsxs("div", { className: "tw-p-5 ", children: [
+                    _jsx("div", { className: "dark:tw-text-white tw-text-xs", children: "Popover aligned at center" }), _jsx(ButtonWithPopover, { trigger: _jsx(Icon, { type: "color", color: "rgb(var(--sq-color-dark-dark))", icon: "fc-more" }), containerTestId: `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-6`, isOpen: openPopver === `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-6`, onOpenChange: (isOpen) => setOpenPopover(isOpen ? `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-6` : ''), tooltip: "This is a normal popover with arrow.", tooltipDelay: 0, tooltipPlacement: "top", align: "center", hasArrow: true, isHtmlTooltip: false, children: renderFlavours() })
+                ] }), _jsxs("div", { className: "tw-p-5 ", children: [
+                    _jsx("div", { className: "dark:tw-text-white tw-text-xs", children: "Popover aligned at start" }), _jsx(ButtonWithPopover, { trigger: _jsx(Icon, { type: "color", color: "rgb(var(--sq-color-dark-dark))", icon: "fc-more" }), containerTestId: `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-7`, isOpen: openPopver === `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-7`, onOpenChange: (isOpen) => setOpenPopover(isOpen ? `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-7` : ''), tooltip: "This is a normal popover with arrow.", tooltipDelay: 0, align: "start", tooltipPlacement: "top", hasArrow: true, isHtmlTooltip: false, children: renderFlavours() })
+                ] }), _jsxs("div", { className: "tw-p-5 ", children: [
+                    _jsx("div", { className: "dark:tw-text-white tw-text-xs", children: "Popover triggered by hover" }), _jsx(ButtonWithPopover, { trigger: _jsx(Icon, { type: "color", color: "rgb(var(--sq-color-dark-dark))", icon: "fc-more" }), containerTestId: `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-8`, isOpen: openPopver === `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-8`, onOpenChange: (isOpen) => setOpenPopover(isOpen ? `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-8` : ''), isHoverEnabled: true, align: "start", tooltipPlacement: "top", hasArrow: true, isHtmlTooltip: false, children: renderFlavours() })
+                ] }), _jsxs("div", { className: "tw-p-5 ", children: [
+                    _jsx(ButtonWithPopover, { trigger: _jsx("div", { className: "dark:tw-text-white tw-text-xs", children: "Popover triggered by another element" }), containerTestId: `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-9`, isOpen: openPopver === `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-9`, onInteractOutside: () => setOpenPopover(''), align: "start", tooltipPlacement: "top", hasArrow: true, isHtmlTooltip: false, children: renderFlavours() }), openPopver != `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-9` && (_jsx("div", { ref: iconRef, onClick: () => {
+                            setOpenPopover(`basic-popover-${isDark ? 'dark' : 'light'}-${topic}-9`);
+                        }, children: _jsx(Icon, { type: "text", icon: "fc-all-items" }) }))] }), _jsxs("div", { className: "tw-p-5 ", children: [
+                    _jsx("div", { className: "dark:tw-text-white tw-text-xs", children: "Popover with input fields" }), _jsx(ButtonWithPopover, { trigger: _jsx(Icon, { type: "color", color: "rgb(var(--sq-color-dark-dark))", icon: "fc-more" }), containerTestId: `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-10`, isOpen: openPopver === `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-10`, onOpenChange: (isOpen) => setOpenPopover(isOpen ? `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-10` : ''), tooltip: "This is a normal popover with arrow.", tooltipDelay: 0, tooltipPlacement: "top", align: "center", hasArrow: true, isHtmlTooltip: false, children: renderInputFields() })
+                ] })
+        ] }));
+    const renderAllVariations = (color) => (_jsxs("div", { className: "tw-grid tw-grid-cols-2 tw-gap-4 tw-p-4", children: [allButtonWithPopovers(false, color), allButtonWithPopovers(true, 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('topic')] }), _jsxs("div", { className: "color_analysis", children: [
+                    _jsx("b", { children: "Analysis Colors" }), renderAllVariations('analysis')] }), _jsxs("div", { className: "color_datalab", children: [
+                    _jsx("b", { children: "Datalab Colors" }), renderAllVariations('datalab')] }), _jsxs("div", { className: "color_vantage", children: [
+                    _jsx("b", { children: "Vantage Colors" }), renderAllVariations('vantage')] })
+        ] }));
+};

package/dist/src/ButtonWithPopover/ButtonWithPopover.test.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@testing-library/jest-dom';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ButtonWithPopover from './ButtonWithPopover';
+import Icon from '../Icon';
+describe('ButtonWithPopover', () => {
+    const mockOnClick = jest.fn();
+    const testId = 'trigger-icon';
+    class Context {
+        props = {
+            trigger: (_jsx(Icon, { icon: "fc-more", type: "text", testId: testId, extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" })),
+            onOpenChange: mockOnClick,
+            containerTestId: 'basic-Popover1',
+            tooltip: 'This is a small Popover.',
+            tooltipDelay: 0,
+            tooltipPlacement: 'top',
+            isHtmlTooltip: false,
+            hoverOpenDelay: 0,
+            children: _jsx("div", { children: "Popover content" }),
+        };
+    }
+    let tc;
+    beforeEach(() => {
+        tc = new Context();
+        jest.clearAllMocks();
+    });
+    afterEach(() => {
+        global.ResizeObserver = undefined;
+    });
+    const renderButtonWithPopover = (props) => render(_jsx("div", { "data-testid": "container", className: "tw-w-10 tw-h-10", children: _jsx(ButtonWithPopover, { ...props }) }));
+    const openPopover = async () => {
+        const popover = screen.getByTestId(testId);
+        await userEvent.click(popover);
+    };
+    const closePopover = async () => {
+        const container = screen.getByTestId('container');
+        await userEvent.click(container);
+    };
+    test('renders trigger and opens Popover content on trigger click', async () => {
+        renderButtonWithPopover(tc.props);
+        expect(screen.getByTestId('trigger-icon')).toBeInTheDocument();
+        await openPopover();
+        expect(screen.getByText('Popover content')).toBeInTheDocument();
+        await closePopover();
+        expect(screen.queryByText('Popover content')).not.toBeInTheDocument();
+    });
+    test('renders trigger and opens Popover content on trigger hover', async () => {
+        tc.props.isHoverEnabled = true;
+        renderButtonWithPopover(tc.props);
+        expect(screen.getByTestId('trigger-icon')).toBeInTheDocument();
+        const popover = screen.getByTestId(testId);
+        await userEvent.hover(popover);
+        await waitFor(() => {
+            expect(screen.getByText('Popover content')).toBeInTheDocument();
+        });
+    });
+    test('closes popover when content is clicked and is set in props', async () => {
+        tc.props.isCloseOnContentClick = true;
+        renderButtonWithPopover(tc.props);
+        await openPopover();
+        const item1 = screen.getByText('Popover content');
+        await userEvent.click(item1);
+        expect(mockOnClick).toHaveBeenCalledTimes(2);
+    });
+    test('leaves popover open when content is clicked and is set in props', async () => {
+        tc.props.isCloseOnContentClick = false;
+        renderButtonWithPopover(tc.props);
+        await openPopover();
+        const item1 = screen.getByText('Popover content');
+        await userEvent.click(item1);
+        expect(mockOnClick).toHaveBeenCalledTimes(1);
+    });
+    test('does not open when disabled', async () => {
+        tc.props.disabled = true;
+        renderButtonWithPopover(tc.props);
+        await openPopover();
+        expect(screen.queryByText('Popover content')).not.toBeInTheDocument();
+    });
+});

package/dist/src/ButtonWithPopover/ButtonWithPopover.types.js

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

package/dist/src/ButtonWithPopover/index.js

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

package/dist/src/Carousel/Carousel.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import Button from '../Button/Button';
+/**
+ * Carousel:
+ *  - Easily create a carousel with custom slides.
+ *  - Supports automatic sliding, navigation arrows, and slide indicators.
+ */
+const Carousel = ({ testId = 'carousel-id', activeIndex = 0, extraClassNames = '', onSlide = () => { }, autoSlide, showIndicators = true, continuous = true, interval = 4000, prevIcon = 'fc-arrow-dropdown tw-rotate-90', nextIcon = 'fc-arrow-dropdown -tw-rotate-90', showArrows = true, iconExtraClassNames = '', carouselItems = [], }) => {
+    const [currentIndex, setCurrentIndex] = useState(activeIndex);
+    const changeSlide = (nextIndex) => {
+        const newIndex = (nextIndex + carouselItems.length) % carouselItems.length;
+        setCurrentIndex(newIndex);
+        onSlide(newIndex, newIndex > currentIndex ? 'right' : 'left');
+    };
+    useEffect(() => {
+        if (autoSlide) {
+            const slideInterval = setInterval(() => {
+                if (continuous || currentIndex < carouselItems.length - 1) {
+                    changeSlide(currentIndex + 1);
+                }
+                else {
+                    clearInterval(slideInterval);
+                }
+            }, interval);
+            return () => clearInterval(slideInterval);
+        }
+    }, [autoSlide, currentIndex, continuous, interval, carouselItems.length]);
+    useEffect(() => {
+        if (activeIndex !== currentIndex) {
+            setCurrentIndex(activeIndex);
+        }
+    }, [activeIndex]);
+    const onBackClick = () => {
+        if (currentIndex === 0 && !continuous) {
+            return;
+        }
+        let prevIndex = currentIndex - 1;
+        if (prevIndex < 0) {
+            prevIndex = carouselItems.length - 1;
+        }
+        changeSlide(prevIndex);
+    };
+    const onForwardClick = () => {
+        if (currentIndex === carouselItems.length - 1) {
+            if (!continuous) {
+                return;
+            }
+            changeSlide(0);
+        }
+        else {
+            changeSlide(currentIndex + 1);
+        }
+    };
+    const springTransition = {
+        type: 'spring',
+        damping: 20,
+        stiffness: 100,
+    };
+    const slideVariants = {
+        initial: (direction) => ({
+            x: direction > 0 ? '100%' : '-100%',
+            opacity: 0,
+        }),
+        animate: {
+            x: 0,
+            opacity: 1,
+            transition: springTransition,
+        },
+        exit: (direction) => ({
+            x: direction > 0 ? '-100%' : '100%',
+            opacity: 0,
+            transition: springTransition,
+        }),
+    };
+    return (_jsxs("div", { "data-testid": testId, className: `tw-flex tw-flex-col tw-items-center tw-justify-center tw-w-full tw-overflow-hidden ${extraClassNames}`, children: [
+            _jsxs("div", { className: "tw-flex tw-items-center tw-w-full tw-h-max tw-gap-1", children: [showArrows && (_jsx(Button, { icon: prevIcon, size: "lg", variant: "no-border", testId: "carousel-prev", extraClassNames: `${currentIndex === 0 && !continuous ? 'tw-invisible' : ''} ${iconExtraClassNames} tw-animate-fadeIn`, onClick: onBackClick })), _jsx("div", { className: "tw-h-full tw-w-full tw-overflow-hidden", children: _jsx(motion.div, { custom: 1, initial: "initial", animate: "animate", exit: "exit", variants: slideVariants, className: "tw-w-full", children: carouselItems[currentIndex] }, currentIndex) }), showArrows && (_jsx(Button, { icon: nextIcon, testId: "carousel-next", size: "lg", variant: "no-border", extraClassNames: `${currentIndex === carouselItems.length - 1 && !continuous ? 'tw-invisible' : ''} ${iconExtraClassNames} tw-animate-fadeIn`, onClick: onForwardClick }))] }), showIndicators && (_jsx("div", { className: "tw-flex tw-gap-1 tw-mt-2", children: carouselItems.map((_, i) => (_jsx("div", { className: `tw-w-2 tw-h-2 tw-rounded-full tw-cursor-pointer ${i === currentIndex ? 'tw-bg-sq-color-dark' : 'tw-bg-sq-darkish-gray'}`, onClick: () => changeSlide(i) }, i))) }))] }));
+};
+export default Carousel;

package/dist/src/Carousel/Carousel.stories.js

@@ -0,0 +1,100 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { QTip } from '../Tooltip/Qtip';
+import Carousel from './Carousel';
+import Button from '../Button';
+export default {
+    title: 'Carousel',
+};
+export const AllCarousels = () => {
+    const [value, setValue] = React.useState(0);
+    const renderChild = (text, extraClass) => (_jsxs("div", { className: 'tw-p-4 tw-text-sq-color-gray dark:tw-text-sq-white tw-h-[200px] ' + extraClass, children: [
+            _jsx("p", { className: "tw-mb-5 tw-text-[0.9375rem] tw-leading-normal", children: text }), _jsx(Button, { variant: "outline", label: "Save data" })
+        ] }));
+    const renderAllVariations = () => (_jsxs(_Fragment, { children: [
+            _jsxs("div", { className: "light", children: [
+                    _jsxs("div", { className: "tw-p-4", children: [
+                            _jsx("p", { children: "Controlled" }), _jsx(Carousel, { carouselItems: [
+                                    renderChild('First of her name, the Queen to be, long may she reign', 'tw-bg-yellow-500'),
+                                    renderChild('Second of her home, but her love conquers all', 'tw-bg-green-500'),
+                                    renderChild('Third is a wonder, the embodiment of hope and faith', 'tw-bg-gray-500'),
+                                ], activeIndex: value, onSlide: (index) => setValue(index) })
+                        ] }), _jsxs("div", { className: "tw-p-4", children: [
+                            _jsx("p", { children: "Uncontrolled" }), _jsx(Carousel, { carouselItems: [
+                                    renderChild('First of her name, the Queen to be, long may she reign', 'tw-bg-yellow-500'),
+                                    renderChild('Second of her home, but her love conquers all', 'tw-bg-green-500'),
+                                    renderChild('Third is a wonder, the embodiment of hope and faith', 'tw-bg-gray-500'),
+                                ], autoSlide: true, continuous: true, showArrows: false })
+                        ] }), _jsxs("div", { className: "tw-p-4", children: [
+                            _jsx("p", { children: "Custom side buttons" }), _jsx(Carousel, { carouselItems: [
+                                    renderChild('First of her name, the Queen to be, long may she reign', 'tw-bg-yellow-500'),
+                                    renderChild('Second of her home, but her love conquers all', 'tw-bg-green-500'),
+                                    renderChild('Third is a wonder, the embodiment of hope and faith', 'tw-bg-gray-500'),
+                                ], activeIndex: value, onSlide: (index) => setValue(index), nextIcon: "fc-more", prevIcon: "fc-y-axis" })
+                        ] }), _jsxs("div", { className: "tw-p-4", children: [
+                            _jsx("p", { children: "Continuous" }), _jsx(Carousel, { carouselItems: [
+                                    renderChild('First of her name, the Queen to be, long may she reign', 'tw-bg-yellow-500'),
+                                    renderChild('Second of her home, but her love conquers all', 'tw-bg-green-500'),
+                                    renderChild('Third is a wonder, the embodiment of hope and faith', 'tw-bg-gray-500'),
+                                ], activeIndex: value, onSlide: (index) => setValue(index), continuous: true })
+                        ] }), _jsxs("div", { className: "tw-p-4", children: [
+                            _jsx("p", { children: "Non continuous" }), _jsx(Carousel, { carouselItems: [
+                                    renderChild('First of her name, the Queen to be, long may she reign', 'tw-bg-yellow-500'),
+                                    renderChild('Second of her home, but her love conquers all', 'tw-bg-green-500'),
+                                    renderChild('Third is a wonder, the embodiment of hope and faith', 'tw-bg-gray-500'),
+                                ], activeIndex: value, onSlide: (index) => setValue(index), showArrows: true, continuous: false })
+                        ] }), _jsxs("div", { className: "tw-p-4", children: [
+                            _jsx("p", { children: "Without indicators" }), _jsx(Carousel, { carouselItems: [
+                                    renderChild('First of her name, the Queen to be, long may she reign', 'tw-bg-yellow-500'),
+                                    renderChild('Second of her home, but her love conquers all', 'tw-bg-green-500'),
+                                    renderChild('Third is a wonder, the embodiment of hope and faith', 'tw-bg-gray-500'),
+                                ], activeIndex: value, onSlide: (index) => setValue(index), showArrows: true, continuous: true, showIndicators: false })
+                        ] })
+                ] }), _jsxs("div", { className: "tw-dark tw-bg-sq-dark-background", children: [
+                    _jsxs("div", { className: "tw-p-4", children: [
+                            _jsx("p", { children: "Controlled" }), _jsx(Carousel, { carouselItems: [
+                                    renderChild('First of her name, the Queen to be, long may she reign', 'tw-bg-yellow-500'),
+                                    renderChild('Second of her home, but her love conquers all', 'tw-bg-green-500'),
+                                    renderChild('Third is a wonder, the embodiment of hope and faith', 'tw-bg-gray-500'),
+                                ], activeIndex: value, onSlide: (index) => setValue(index) })
+                        ] }), _jsxs("div", { className: "tw-p-4", children: [
+                            _jsx("p", { children: "Uncontrolled" }), _jsx(Carousel, { carouselItems: [
+                                    renderChild('First of her name, the Queen to be, long may she reign', 'tw-bg-yellow-500'),
+                                    renderChild('Second of her home, but her love conquers all', 'tw-bg-green-500'),
+                                    renderChild('Third is a wonder, the embodiment of hope and faith', 'tw-bg-gray-500'),
+                                ], autoSlide: true, continuous: true, showArrows: false })
+                        ] }), _jsxs("div", { className: "tw-p-4", children: [
+                            _jsx("p", { children: "Custom side buttons" }), _jsx(Carousel, { carouselItems: [
+                                    renderChild('First of her name, the Queen to be, long may she reign', 'tw-bg-yellow-500'),
+                                    renderChild('Second of her home, but her love conquers all', 'tw-bg-green-500'),
+                                    renderChild('Third is a wonder, the embodiment of hope and faith', 'tw-bg-gray-500'),
+                                ], activeIndex: value, onSlide: (index) => setValue(index), nextIcon: "fc-more", prevIcon: "fc-y-axis" })
+                        ] }), _jsxs("div", { className: "tw-p-4", children: [
+                            _jsx("p", { children: "Continuous" }), _jsx(Carousel, { carouselItems: [
+                                    renderChild('First of her name, the Queen to be, long may she reign', 'tw-bg-yellow-500'),
+                                    renderChild('Second of her home, but her love conquers all', 'tw-bg-green-500'),
+                                    renderChild('Third is a wonder, the embodiment of hope and faith', 'tw-bg-gray-500'),
+                                ], activeIndex: value, onSlide: (index) => setValue(index), continuous: true })
+                        ] }), _jsxs("div", { className: "tw-p-4", children: [
+                            _jsx("p", { children: "Non continuous" }), _jsx(Carousel, { carouselItems: [
+                                    renderChild('First of her name, the Queen to be, long may she reign', 'tw-bg-yellow-500'),
+                                    renderChild('Second of her home, but her love conquers all', 'tw-bg-green-500'),
+                                    renderChild('Third is a wonder, the embodiment of hope and faith', 'tw-bg-gray-500'),
+                                ], activeIndex: value, onSlide: (index) => setValue(index), showArrows: true, continuous: false })
+                        ] }), _jsxs("div", { className: "tw-p-4", children: [
+                            _jsx("p", { children: "Without indicators" }), _jsx(Carousel, { carouselItems: [
+                                    renderChild('First of her name, the Queen to be, long may she reign', 'tw-bg-yellow-500'),
+                                    renderChild('Second of her home, but her love conquers all', 'tw-bg-green-500'),
+                                    renderChild('Third is a wonder, the embodiment of hope and faith', 'tw-bg-gray-500'),
+                                ], activeIndex: value, onSlide: (index) => setValue(index), showArrows: true, continuous: true, showIndicators: false })
+                        ] })
+                ] })
+        ] }));
+    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/Carousel/Carousel.test.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@testing-library/jest-dom';
+import { act, render, fireEvent, screen } from '@testing-library/react';
+import Carousel from './Carousel';
+describe('Carousel Component', () => {
+    const mockOnSlide = jest.fn();
+    const carouselItems = [_jsx("div", { children: "Slide 1" }, "1"), _jsx("div", { children: "Slide 2" }, "2"), _jsx("div", { children: "Slide 3" }, "3")];
+    it('renders correctly', () => {
+        render(_jsx(Carousel, { testId: "carousel", carouselItems: carouselItems }));
+        expect(screen.getByTestId('carousel')).toBeInTheDocument();
+    });
+    it('shows the correct initial slide', () => {
+        render(_jsx(Carousel, { testId: "carousel", carouselItems: carouselItems, activeIndex: 1 }));
+        expect(screen.getByText('Slide 2')).toBeInTheDocument();
+    });
+    it('calls onSlide when next button is clicked', () => {
+        render(_jsx(Carousel, { testId: "carousel", carouselItems: carouselItems, onSlide: mockOnSlide }));
+        const nextButton = screen.getByTestId('carousel-next');
+        fireEvent.click(nextButton);
+        expect(mockOnSlide).toHaveBeenCalledWith(1, 'right');
+    });
+    it('calls onSlide when previous button is clicked', () => {
+        render(_jsx(Carousel, { testId: "carousel", carouselItems: carouselItems, onSlide: mockOnSlide, activeIndex: 1 }));
+        const prevButton = screen.getByTestId('carousel-prev');
+        fireEvent.click(prevButton);
+        expect(mockOnSlide).toHaveBeenCalledWith(0, 'left');
+    });
+    it('does not move past the last slide', () => {
+        render(_jsx(Carousel, { testId: "carousel", carouselItems: carouselItems, activeIndex: 2, continuous: false }));
+        const nextButton = screen.queryByTestId('carousel-next');
+        expect(nextButton).toHaveClass('tw-invisible');
+    });
+    it('autoSlides correctly', async () => {
+        jest.useFakeTimers();
+        render(_jsx(Carousel, { testId: "carousel", carouselItems: carouselItems, autoSlide: true, interval: 1000 }));
+        expect(screen.getByText('Slide 1')).toBeInTheDocument();
+        act(() => {
+            jest.advanceTimersByTime(1000);
+        });
+        expect(screen.getByText('Slide 2')).toBeInTheDocument();
+        act(() => {
+            jest.advanceTimersByTime(1000);
+        });
+        expect(screen.getByText('Slide 3')).toBeInTheDocument();
+        jest.useRealTimers();
+    });
+});

package/dist/src/Carousel/Carousel.types.js

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

package/dist/src/Carousel/index.js

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

package/dist/src/Checkbox/Checkbox.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import '../styles.css';
+import { getQTipData } from '../Tooltip/qTip.utilities';
+const alignment = 'tw-flex';
+const labelClasses = 'tw-ml-1.5 tw-text-sm tw--mt-0.5';
+const baseClasses = 'tw-border-1 tw-h-3.5 tw-w-3.5 focus:tw-ring-0 focus:tw-ring-offset-0 tw-outline-none focus:tw-outline-none' +
+    '  dark:tw-bg-sq-dark-background dark:tw-border-sq-dark-text dark:hover:tw-bg-sq-dark-background' +
+    ' checked:tw-text-white checked:tw-border-sq-text-color checked:hover:tw-border-sq-color-dark' +
+    ' checked:active:tw-border-sq-color-dark checked:focus:tw-border-sq-color-dark disabled:tw-border-sq-disabled-gray' +
+    ' dark:disabled:tw-border-sq-fairly-dark-gray dark:checked:focus:tw-bg-sq-dark-background';
+const checkboxClasses = `tw-form-checkbox tw-rounded ${baseClasses}`;
+const radioClasses = `tw-form-radio ${baseClasses}`;
+/**
+ * Checkbox and Radio Box Component.
+ */
+export const Checkbox = (props) => {
+    const { type = 'checkbox', value, disabled = false, label, onChange, onClick, onKeyDown, checked, defaultChecked, id, name, extraClassNames, extraLabelClassNames, testId, ...tooltipProps } = props;
+    const assignedId = id ?? 'checkbox_' + Math.random();
+    const tooltipData = getQTipData(tooltipProps);
+    return (_jsxs("span", { className: `${alignment} ${extraClassNames}`, children: [
+            _jsx("input", { value: value, type: type, "data-testid": testId, name: name, id: assignedId, readOnly: !onChange, checked: checked, defaultChecked: defaultChecked, className: `${type === 'checkbox' ? checkboxClasses : radioClasses} ${disabled ? 'tw-cursor-not-allowed' : 'tw-cursor-pointer'}`, disabled: disabled, onClick: onClick, onChange: onChange, onKeyDown: onKeyDown, ...tooltipData }), label && (_jsx("label", { htmlFor: assignedId, className: `${labelClasses} ${extraLabelClassNames} ${disabled
+                    ? 'tw-cursor-not-allowed dark:tw-text-sq-fairly-dark-gray tw-text-sq-fairly-dark-gray'
+                    : 'tw-cursor-pointer tw-text-sq-text-color dark:tw-text-sq-dark-text'}`, children: label }))] }));
+};

package/dist/src/Checkbox/Checkbox.stories.js

@@ -0,0 +1,21 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox } from './Checkbox';
+import { QTip } from '../Tooltip';
+export default {
+    title: 'Checkbox',
+};
+export const AllCheckboxes = () => {
+    const getDisplay = (type) => (_jsxs(_Fragment, { children: [
+            _jsx(QTip, {}), _jsx("div", { className: "tw-p-4", children: _jsx(Checkbox, { value: "a", type: type, checked: true, label: 'with Label', tooltip: "Checkbox Tooltip" }) }), _jsx("div", { className: "tw-p-4", children: _jsx(Checkbox, { value: "d", type: type, checked: false, disabled: true, label: _jsxs("div", { children: ["Disabled",
+                            _jsx("br", {}),
+                            "multi-Line"] }), tooltip: "Checkbox Tooltip" }) }), _jsx("div", { className: "tw-p-4", children: _jsx(Checkbox, { value: "d", type: type, checked: true, disabled: true, label: "Disabled", tooltip: "Checkbox Tooltip" }) }), _jsx("div", { className: "tw-p-4", children: _jsx(Checkbox, { value: "b", type: type, checked: true, tooltip: "Checkbox Tooltip" }) }), _jsx("div", { className: "tw-p-4", children: _jsx(Checkbox, { value: "c", type: type, checked: false, tooltip: "Checkbox Tooltip" }) })
+        ] }));
+    const renderAllVariations = (type) => (_jsxs(_Fragment, { children: [
+            _jsx("div", { className: "tw-p-4 light", children: getDisplay(type) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: getDisplay(type) })
+        ] }));
+    return (_jsxs("div", { className: "tw-grid tw-grid-cols-2 tw-gap-4", children: [
+            _jsxs("div", { children: [
+                    _jsx("b", { children: "Checkbox" }), renderAllVariations('checkbox')] }), _jsxs("div", { children: [
+                    _jsx("b", { children: "Radios" }), renderAllVariations('radio')] })
+        ] }));
+};