@seeqdev/qomponents 0.0.123 → 0.0.124

package/dist/Button/Button.test.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Button from './Button';
+describe('Button', () => {
+    class Context {
+        testId = 'buttonTestId';
+        label = 'button label';
+        props = {
+            label: this.label,
+            onClick: jest.fn(),
+            testId: this.testId,
+        };
+    }
+    let tc;
+    beforeEach(() => {
+        tc = new Context();
+    });
+    const renderButton = (props) => render(React.createElement(Button, { ...props }));
+    it('renders button label', () => {
+        renderButton(tc.props);
+        expect(screen.getByText(tc.label)).toBeInTheDocument();
+    });
+    it('calls on click', async () => {
+        renderButton(tc.props);
+        await userEvent.click(screen.getByTestId(tc.testId));
+        expect(tc.props.onClick).toHaveBeenCalled();
+    });
+    it('renders disabled button', () => {
+        renderButton({ ...tc.props, disabled: true });
+        expect(screen.getByText(tc.label)).toBeDisabled();
+    });
+    it('respects stopPropagation default', async () => {
+        const callOnPropagation = jest.fn();
+        render(React.createElement("div", { onClick: callOnPropagation },
+            React.createElement(Button, { ...tc.props })));
+        await userEvent.click(screen.getByTestId(tc.testId));
+        expect(callOnPropagation).not.toHaveBeenCalled();
+    });
+    it('propagates click event if not told not to', async () => {
+        const callOnPropagation = jest.fn();
+        render(React.createElement("div", { onClick: callOnPropagation },
+            React.createElement(Button, { ...{ ...tc.props, stopPropagation: false } })));
+        await userEvent.click(screen.getByTestId(tc.testId));
+        expect(callOnPropagation).toHaveBeenCalled();
+    });
+});
+//# sourceMappingURL=Button.test.js.map

package/dist/Button/Button.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.test.js","sourceRoot":"","sources":["../../src/Button/Button.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,SAAS,MAAM,6BAA6B,CAAC;AAEpD,OAAO,MAAM,MAAM,UAAU,CAAC;AAG9B,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACtB,MAAM,OAAO;QACX,MAAM,GAAG,cAAc,CAAC;QACxB,KAAK,GAAG,cAAc,CAAC;QACvB,KAAK,GAAgB;YACnB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE;YAClB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC;KACH;IAED,IAAI,EAAW,CAAC;IAChB,UAAU,CAAC,GAAG,EAAE;QACd,EAAE,GAAG,IAAI,OAAO,EAAE,CAAC;IACrB,CAAC,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,CAAC,KAAkB,EAAE,EAAE,CAAC,MAAM,CAAC,oBAAC,MAAM,OAAK,KAAK,GAAI,CAAC,CAAC;IAE3E,EAAE,CAAC,sBAAsB,EAAE,GAAG,EAAE;QAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QACvB,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACzD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gBAAgB,EAAE,KAAK,IAAI,EAAE;QAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QACvB,MAAM,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;QACrD,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAC9C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yBAAyB,EAAE,GAAG,EAAE;QACjC,YAAY,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QAC9C,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC;IACpD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,iBAAiB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QACpC,MAAM,CACJ,6BAAK,OAAO,EAAE,iBAAiB;YAC7B,oBAAC,MAAM,OAAK,EAAE,CAAC,KAAK,GAAI,CACpB,CACP,CAAC;QACF,MAAM,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;QACrD,MAAM,CAAC,iBAAiB,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;IACnD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;QACzD,MAAM,iBAAiB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QACpC,MAAM,CACJ,6BAAK,OAAO,EAAE,iBAAiB;YAC7B,oBAAC,MAAM,OAAK,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,GAAI,CACnD,CACP,CAAC;QACF,MAAM,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;QACrD,MAAM,CAAC,iBAAiB,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAC/C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/Button/Button.types.js

@@ -0,0 +1,5 @@
+export const buttonTypes = ['button', 'reset', 'submit', 'link'];
+export const buttonSizes = ['sm', 'lg'];
+export const buttonVariants = ['outline', 'theme', 'theme-light', 'warning', 'danger', 'no-border'];
+export const iconPositions = ['left', 'right'];
+//# sourceMappingURL=Button.types.js.map

package/dist/Button/Button.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.types.js","sourceRoot":"","sources":["../../src/Button/Button.types.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAU,CAAC;AAC1E,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,CAAU,CAAC;AACjD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,CAAU,CAAC;AAC7G,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC"}

package/dist/Button/index.js

@@ -0,0 +1,2 @@
+export { default } from "./Button";
+//# sourceMappingURL=index.js.map

package/dist/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC"}

package/dist/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import '../styles.css';
+import { getQTipData } from '../Tooltip/qTip.utilities';
+import Button from '../Button';
+const baseClasses = 'tw-flex tw-outline-none tw-rounded-sm tw-w-full tw-relative tw-flex-wrap';
+const activeClassesByVariantLightTheme = {
+    'outline': '!tw-bg-sq-disabled-gray tw-border-sq-color-dark',
+    'theme': 'tw-bg-sq-color-highlight',
+    'danger': '',
+    'theme-light': '',
+    'no-border': '!tw-bg-sq-disabled-gray',
+    'warning': '',
+};
+const activeClassesByVariantDarkTheme = {
+    'outline': 'dark:!tw-bg-sq-multi-gray-dark dark:tw-border-sq-color-dark',
+    'theme': 'dark:tw-bg-sq-color-highlight',
+    'danger': '',
+    'theme-light': '',
+    'no-border': 'dark:!tw-bg-sq-multi-gray-dark',
+    'warning': '',
+};
+/**
+ * ButtonGroup.
+ */
+export const ButtonGroup = (props) => {
+    const { id, extraClassNames, value, testId, onChange, buttons = [], ...tooltipProps } = props;
+    const tooltipData = getQTipData(tooltipProps);
+    const appliedClasses = `${baseClasses} ${extraClassNames}`;
+    return (React.createElement("div", { id: `button-group-${id || ''}`, "data-testid": testId, className: appliedClasses, ...tooltipData }, buttons.filter(Boolean).map((item, index) => item?.variant === 'button' ? (React.createElement(Button, { key: index, ...item.buttonProps, extraClassNames: `tw-ml-[-1px] focus:tw-z-40 tw-outline-none focus:tw-border tw-rounded-r-none tw-rounded-l-none last:tw-rounded-r-sm first:tw-rounded-l-sm ${item?.buttonProps && value === item?.buttonProps?.buttonValue
+            ? `${activeClassesByVariantLightTheme[item?.buttonProps?.variant ?? 'outline']} ${activeClassesByVariantDarkTheme[item?.buttonProps?.variant ?? 'outline']} `
+            : ''} ${item.buttonProps.extraClassNames}`, onClick: () => onChange && onChange(item?.buttonProps?.buttonValue) })) : (React.createElement("div", { key: index, className: ` tw-flex tw-items-center tw-justify-center tw-rounded-none tw-ml-[-1px] active:tw-z-30 ${item?.extraClassNames || ''}` }, item?.element)))));
+};
+//# sourceMappingURL=ButtonGroup.js.map

package/dist/ButtonGroup/ButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.js","sourceRoot":"","sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,MAAM,MAAM,WAAW,CAAC;AAG/B,MAAM,WAAW,GAAG,0EAA0E,CAAC;AAE/F,MAAM,gCAAgC,GAAG;IACvC,SAAS,EAAE,iDAAiD;IAC5D,OAAO,EAAE,0BAA0B;IACnC,QAAQ,EAAE,EAAE;IACZ,aAAa,EAAE,EAAE;IACjB,WAAW,EAAE,yBAAyB;IACtC,SAAS,EAAE,EAAE;CACd,CAAC;AAEF,MAAM,+BAA+B,GAAG;IACtC,SAAS,EAAE,6DAA6D;IACxE,OAAO,EAAE,+BAA+B;IACxC,QAAQ,EAAE,EAAE;IACZ,aAAa,EAAE,EAAE;IACjB,WAAW,EAAE,gCAAgC;IAC7C,SAAS,EAAE,EAAE;CACd,CAAC;AACF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAA8C,CAAC,KAAK,EAAE,EAAE;IAC9E,MAAM,EAAE,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,EAAE,EAAE,GAAG,YAAY,EAAE,GAAG,KAAK,CAAC;IAC9F,MAAM,WAAW,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IAE9C,MAAM,cAAc,GAAG,GAAG,WAAW,IAAI,eAAe,EAAE,CAAC;IAE3D,OAAO,CACL,6BAAK,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,EAAE,iBAAe,MAAM,EAAE,SAAS,EAAE,cAAc,KAAM,WAAW,IACjG,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAC3C,IAAI,EAAE,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC3B,oBAAC,MAAM,IACL,GAAG,EAAE,KAAK,KACN,IAAI,CAAC,WAAW,EACpB,eAAe,EAAE,6IACf,IAAI,EAAE,WAAW,IAAI,KAAK,KAAK,IAAI,EAAE,WAAW,EAAE,WAAW;YAC3D,CAAC,CAAC,GAAG,gCAAgC,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,IAAI,SAAS,CAAC,IAC1E,+BAA+B,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,IAAI,SAAS,CACzE,GAAG;YACL,CAAC,CAAC,EACN,IAAI,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE,EACtC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,IAAI,QAAQ,CAAC,IAAI,EAAE,WAAW,EAAE,WAAW,CAAC,GACnE,CACH,CAAC,CAAC,CAAC,CACF,6BACE,GAAG,EAAE,KAAK,EACV,SAAS,EAAE,0FACT,IAAI,EAAE,eAAe,IAAI,EAC3B,EAAE,IACD,IAAI,EAAE,OAAO,CACV,CACP,CACF,CACG,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/ButtonGroup/ButtonGroup.stories.js

@@ -0,0 +1,325 @@
+import React from 'react';
+import { QTip } from '../Tooltip/Qtip';
+import { ButtonGroup } from './ButtonGroup';
+import ToolbarButton from '../ToolbarButton';
+export default {
+    title: 'ButtonGroup',
+};
+export const AllButtonGroups = () => {
+    const [value, setValue] = React.useState('provided-1');
+    const renderAllVariations = () => (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "light" },
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(ButtonGroup, { value: value, onChange: () => { }, buttons: [
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'outline',
+                                icon: 'fc-annotate',
+                                iconStyle: 'theme',
+                                buttonValue: 'provided-1',
+                                onClick: () => setValue('provided-1'),
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'outline',
+                                icon: 'fc-trash',
+                                iconStyle: 'theme',
+                                buttonValue: 'provided-2',
+                                onClick: () => setValue('provided-2'),
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'outline',
+                                icon: 'fc-formula-ai',
+                                iconStyle: 'theme',
+                                buttonValue: 'provided-3',
+                                onClick: () => setValue('provided-3'),
+                            },
+                        },
+                    ] })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(ButtonGroup, { value: value, onChange: () => { }, buttons: [
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'outline',
+                                icon: 'fc-annotate',
+                                extraClassNames: 'tw-border-none',
+                                iconStyle: 'theme',
+                                buttonValue: 'provided-1',
+                                onClick: () => setValue('provided-1'),
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'outline',
+                                icon: 'fc-trash',
+                                extraClassNames: 'tw-border-none',
+                                iconStyle: 'theme',
+                                buttonValue: 'provided-2',
+                                onClick: () => setValue('provided-2'),
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'outline',
+                                extraClassNames: 'tw-border-none',
+                                icon: 'fc-formula-ai',
+                                iconStyle: 'theme',
+                                buttonValue: 'provided-3',
+                                onClick: () => setValue('provided-3'),
+                            },
+                        },
+                    ] })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(ButtonGroup, { value: value, onChange: () => { }, buttons: [
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'theme',
+                                icon: 'fc-annotate',
+                                iconStyle: 'white',
+                                buttonValue: 'provided-1',
+                                onClick: () => setValue('provided-1'),
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'theme',
+                                icon: 'fc-trash',
+                                iconStyle: 'white',
+                                buttonValue: 'provided-2',
+                                onClick: () => setValue('provided-2'),
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'theme',
+                                icon: 'fc-formula-ai',
+                                iconStyle: 'white',
+                                buttonValue: 'provided-3',
+                                onClick: () => setValue('provided-3'),
+                            },
+                        },
+                    ] })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(ButtonGroup, { value: value, onChange: () => { }, buttons: [
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'theme',
+                                label: 'annotate',
+                                buttonValue: 'provided-1',
+                                onClick: () => setValue('provided-1'),
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'theme',
+                                label: 'trash',
+                                buttonValue: 'provided-2',
+                                onClick: () => setValue('provided-2'),
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'theme',
+                                label: 'formula-ai',
+                                buttonValue: 'provided-3',
+                                onClick: () => setValue('provided-3'),
+                            },
+                        },
+                    ] })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(ButtonGroup, { value: value, onChange: () => { }, buttons: [
+                        {
+                            variant: 'element',
+                            element: (React.createElement(ToolbarButton, { icon: "fc-y-axis", label: "Popover", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: React.createElement("div", { className: "tw-text-sm dark:tw-text-white" },
+                                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors")) })),
+                        },
+                        {
+                            variant: 'element',
+                            element: (React.createElement(ToolbarButton, { icon: "fc-trash", label: "Trash", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: React.createElement("div", { className: "tw-text-sm dark:tw-text-white" },
+                                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors")) })),
+                        },
+                        {
+                            variant: 'element',
+                            element: (React.createElement(ToolbarButton, { icon: "fc-formula-ai", label: "Formula", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: React.createElement("div", { className: "tw-text-sm dark:tw-text-white" },
+                                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors")) })),
+                        },
+                    ] }))),
+        React.createElement("div", { className: "tw-dark tw-bg-sq-dark-background" },
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(ButtonGroup, { value: value, onChange: () => { }, buttons: [
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'outline',
+                                icon: 'fc-annotate',
+                                iconStyle: 'theme',
+                                buttonValue: 'provided-1',
+                                onClick: () => setValue('provided-1'),
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'outline',
+                                icon: 'fc-trash',
+                                iconStyle: 'theme',
+                                buttonValue: 'provided-2',
+                                onClick: () => setValue('provided-2'),
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'outline',
+                                icon: 'fc-formula-ai',
+                                iconStyle: 'theme',
+                                buttonValue: 'provided-3',
+                                onClick: () => setValue('provided-3'),
+                            },
+                        },
+                    ] })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(ButtonGroup, { value: value, onChange: () => { }, buttons: [
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'no-border',
+                                icon: 'fc-annotate',
+                                iconStyle: 'theme',
+                                buttonValue: 'provided-1',
+                                onClick: () => setValue('provided-1'),
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'no-border',
+                                icon: 'fc-trash',
+                                iconStyle: 'theme',
+                                buttonValue: 'provided-2',
+                                onClick: () => setValue('provided-2'),
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'no-border',
+                                icon: 'fc-formula-ai',
+                                iconStyle: 'theme',
+                                buttonValue: 'provided-3',
+                                onClick: () => setValue('provided-3'),
+                            },
+                        },
+                    ] })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(ButtonGroup, { value: value, onChange: () => { }, buttons: [
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'theme',
+                                icon: 'fc-annotate',
+                                iconStyle: 'white',
+                                buttonValue: 'provided-1',
+                                onClick: () => setValue('provided-1'),
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'theme',
+                                icon: 'fc-trash',
+                                iconStyle: 'white',
+                                buttonValue: 'provided-2',
+                                onClick: () => setValue('provided-2'),
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'theme',
+                                icon: 'fc-formula-ai',
+                                iconStyle: 'white',
+                                buttonValue: 'provided-3',
+                                onClick: () => setValue('provided-3'),
+                            },
+                        },
+                    ] })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(ButtonGroup, { value: value, onChange: () => { }, buttons: [
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'theme',
+                                label: 'annotate',
+                                buttonValue: 'provided-1',
+                                onClick: () => setValue('provided-1'),
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'theme',
+                                label: 'trash',
+                                buttonValue: 'provided-2',
+                                onClick: () => setValue('provided-2'),
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'theme',
+                                label: 'formula-ai',
+                                buttonValue: 'provided-3',
+                                onClick: () => setValue('provided-3'),
+                            },
+                        },
+                    ] })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(ButtonGroup, { value: value, onChange: () => { }, buttons: [
+                        {
+                            variant: 'element',
+                            element: (React.createElement(ToolbarButton, { icon: "fc-y-axis", label: "Popover", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: React.createElement("div", { className: "tw-text-sm dark:tw-text-white" },
+                                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors")) })),
+                        },
+                        {
+                            variant: 'element',
+                            element: (React.createElement(ToolbarButton, { icon: "fc-trash", label: "Trash", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: React.createElement("div", { className: "tw-text-sm dark:tw-text-white" },
+                                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors")) })),
+                        },
+                        {
+                            variant: 'element',
+                            element: (React.createElement(ToolbarButton, { icon: "fc-formula-ai", label: "Formula", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: React.createElement("div", { className: "tw-text-sm dark:tw-text-white" },
+                                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors")) })),
+                        },
+                    ] })))));
+    return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4" },
+        React.createElement(QTip, null),
+        React.createElement("div", { className: "color_topic" },
+            React.createElement("b", null, "Topic Colors"),
+            renderAllVariations()),
+        React.createElement("div", { className: "color_analysis" },
+            React.createElement("b", null, "Analysis Colors"),
+            renderAllVariations()),
+        React.createElement("div", { className: "color_datalab" },
+            React.createElement("b", null, "Datalab Colors"),
+            renderAllVariations()),
+        React.createElement("div", { className: "color_vantage" },
+            React.createElement("b", null, "Vantage Colors"),
+            renderAllVariations())));
+};
+//# sourceMappingURL=ButtonGroup.stories.js.map

package/dist/ButtonGroup/ButtonGroup.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.stories.js","sourceRoot":"","sources":["../../src/ButtonGroup/ButtonGroup.stories.tsx"],"names":[],"mappings":"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"}

package/dist/ButtonGroup/ButtonGroup.types.js

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

package/dist/ButtonGroup/ButtonGroup.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.types.js","sourceRoot":"","sources":["../../src/ButtonGroup/ButtonGroup.types.ts"],"names":[],"mappings":""}

package/dist/ButtonGroup/index.js

@@ -0,0 +1,2 @@
+export { ButtonGroup as default } from './ButtonGroup';
+//# sourceMappingURL=index.js.map

package/dist/ButtonGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ButtonGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,OAAO,EAAE,MAAM,eAAe,CAAC"}

package/dist/ButtonWithDropdown/ButtonWithDropdown.js

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import Icon from '../Icon';
+import { getQTipData } from '../Tooltip/qTip.utilities';
+const borderStyles = [
+    'tw-border-solid',
+    'tw-border',
+    'tw-rounded-sm',
+    '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 ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames = '', contentExtraClassNames = '', containerTestId, disabled = false, align = 'end', placement = 'bottom', placementOffset = 5, alignOffset = -35, hasArrow = false, onOpenChange, isOpen, setFocusOnTriggerOnClose = true, keepFocusInsideDropdown = true, onContainerClick, ...tooltipProps }) => {
+    const tooltipData = getQTipData(tooltipProps);
+    return (React.createElement(DropdownMenu.Root, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown },
+        React.createElement(DropdownMenu.Trigger, { id: id, className: `tw-border-none focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none`, disabled: disabled },
+            React.createElement("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}` }, triggerIcon)),
+        React.createElement(DropdownMenu.Portal, null,
+            React.createElement(DropdownMenu.Content, { onClick: onContainerClick, sideOffset: placementOffset, side: placement, align: align, alignOffset: alignOffset, asChild: true, onCloseAutoFocus: (e) => !setFocusOnTriggerOnClose && e.preventDefault(), className: "focus-visible:tw-outline-none tw-outline-none" },
+                React.createElement("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} ${contentExtraClassNames}` },
+                    hasArrow && (React.createElement(DropdownMenu.Arrow, { asChild: true },
+                        React.createElement("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]" }))),
+                    dropdownItems.map((item, index) => {
+                        const tooltipData = getQTipData(item);
+                        if (item.isLabel) {
+                            return (React.createElement(DropdownMenu.Label, { key: (item.id || '') + index, className: item.itemExtraClassNames, ...tooltipData },
+                                item.icon && (React.createElement(Icon, { icon: item.icon, testId: item.iconTestId, type: "text", color: item.iconColor, extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" })),
+                                React.createElement("div", { "data-testid": item.labelTestId, className: `tw-text-[13px] tw-ml-1 ${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses}` }, item.label)));
+                        }
+                        if (Array.isArray(item.subMenuItems) && item.subMenuItems.length > 0) {
+                            return (React.createElement(DropdownMenu.Sub, { key: (item.id || item.icon || '') + index },
+                                React.createElement(DropdownMenu.SubTrigger, { id: id, className: `tw-cursor-pointer tw-flex tw-justify-between dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-leading-none tw-items-center tw-h-[27px] tw-pl-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-pointer-events-none ${item.itemExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled, ...tooltipData },
+                                    React.createElement("div", { className: "tw-flex" },
+                                        item.icon && (React.createElement(Icon, { icon: item.icon, extraClassNames: `tw-w-[18px] ${item.disabled
+                                                ? '!tw-text-sq-disabled-gray'
+                                                : 'tw-text-sq-text-color dark:tw-text-sq-white'} ${item.iconExtraClassNames || ''}` })),
+                                        React.createElement("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw-text-[13px] tw-ml-1 ${item.disabled && '!tw-opacity-30'} tw-not-italic tw-font-semibold ${item.labelClasses}` }, item.label)),
+                                    React.createElement(Icon, { small: true, icon: "fc-arrow-dropdown -tw-rotate-90", extraClassNames: `${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-w-[18px] tw-ml-4 tw-text-[8px] tw-justify-center tw-flex` })),
+                                React.createElement(DropdownMenu.Portal, null,
+                                    React.createElement(DropdownMenu.SubContent, { className: "focus-visible:tw-outline-none tw-outline-none" },
+                                        React.createElement("div", { "data-testid": containerTestId, className: `${bgStyles} tw-relative tw-z-[1000] 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}` }, item.subMenuItems.map((subItem, subIndex) => {
+                                            return (React.createElement(DropdownMenu.Item, { key: subItem.label + subIndex, onSelect: subItem.onClick, "data-qtip-text": subItem.tooltip, 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-leading-none tw-items-center tw-h-[27px] tw-px-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-pointer-events-none", disabled: subItem.disabled },
+                                                subItem.iconClass && (React.createElement(Icon, { icon: subItem.iconClass, type: "text", extraClassNames: `tw-w-[18px] ${item.disabled && '!tw-opacity-30'}` })),
+                                                React.createElement("div", { className: `tw-text-[13px] tw-ml-1 ${subItem.disabled
+                                                        ? 'tw-text-sq-disabled-gray'
+                                                        : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses}` }, subItem.label)));
+                                        }))))));
+                        }
+                        return (React.createElement("div", { key: (item.id || '') + index, ...tooltipData },
+                            React.createElement(DropdownMenu.Item, { key: (item.id || item.icon || '') + index, "data-customid": item.itemCustomId, onSelect: (e) => {
+                                    item.onClick(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-leading-none tw-items-center tw-min-h-[27px] tw-px-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-pointer-events-none ${item.itemExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled },
+                                item.icon && (React.createElement(Icon, { icon: item.icon, testId: item.iconTestId, type: (item.iconType || 'text'), color: item.iconColor, customId: item.iconCustomId, extraClassNames: `tw-w-[18px] ${item.disabled && '!tw-opacity-30'} ${item.iconExtraClassNames || ''}` })),
+                                React.createElement("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw-text-[13px] tw-ml-1 ${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses || ''}` }, item.label)),
+                            item.hasDivider && (React.createElement(DropdownMenu.Separator, { "data-testid": `dropdown-divider-${index}`, className: "tw-h-[1px] tw-bg-sq-disabled-gray dark:tw-bg-gray-500 tw-my-[8px]" }))));
+                    }))))));
+};
+export default ButtonWithDropdown;
+//# sourceMappingURL=ButtonWithDropdown.js.map

package/dist/ButtonWithDropdown/ButtonWithDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonWithDropdown.js","sourceRoot":"","sources":["../../src/ButtonWithDropdown/ButtonWithDropdown.tsx"],"names":[],"mappings":"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"}