@seeqdev/qomponents 0.0.109 → 0.0.111

package/dist/InputGroup/InputGroup.types.d.ts

@@ -1,20 +1,35 @@
 import { ButtonProps } from '../Button/Button.types';
-import { TextFieldProps } from '../TextField/TextField.types';
+import { InputLengthStyleProps, TextFieldProps } from '../TextField/TextField.types';
 import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
+/**
+ * Interface representing the properties for an appended button.
+ */
 interface AppendedButtonProps {
+    /** Specifies that the variant is a button */
     variant: 'button';
+    /** The properties for the button */
     buttonProps: ButtonProps;
 }
+/**
+ * Props for an element variant in the InputGroup appended component.
+ */
 interface ElementProps {
+    /** Specifies that this is an element variant */
     variant: 'element';
+    /** The React node to be rendered as the element */
     element: React.ReactNode;
 }
 type AppendedProps = AppendedButtonProps | ElementProps;
+/**
+ * Interface representing the base properties for an input group component.
+ * Extends the properties of a TextField component.
+ */
 interface BaseInputGroupProps extends TextFieldProps {
-    /** Append elements */
+    /** Append elements - Array of elements to be appended to the input group */
     append: AppendedProps[];
-    onClick?: React.MouseEventHandler;
+    /** The field to be rendered in the input group */
+    field?: React.ReactNode;
 }
 /** Combined InputGroupProps */
-export type InputGroupProps = BaseInputGroupProps & TooltipComponentProps;
+export type InputGroupProps = BaseInputGroupProps & TooltipComponentProps & InputLengthStyleProps;
 export {};

package/dist/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/ProgressBar/ProgressBar.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import * as Progress from '@radix-ui/react-progress';
+import { getQTipData } from '../Tooltip/qTip.utilities';
+const ProgressBar = ({ value, max = 100, label, extraClasses }) => {
+    const tooltipData = getQTipData({ tooltip: label });
+    const [progress, setProgress] = React.useState(0);
+    React.useEffect(() => {
+        const timer = setTimeout(() => setProgress(value), 500);
+        return () => clearTimeout(timer);
+    }, []);
+    return (React.createElement("span", { ...tooltipData },
+        React.createElement(Progress.Root, { className: "tw-relative tw-h-[18px] tw-w-full tw-overflow-hidden tw-rounded-[2.5px] tw-bg-sq-dark-gray dark:tw-bg-sq-dark-disabled-gray", max: max, value: value },
+            React.createElement(Progress.Indicator, { className: `tw-ease-[cubic-bezier(0.65, 0, 0.35, 1)] tw-h-full tw-bg-sq-color-dark tw-transition-transform tw-duration-[660ms] ${extraClasses}`, style: { transform: `translateX(-${100 - progress}%)` } }))));
+};
+export default ProgressBar;
+//# sourceMappingURL=ProgressBar.js.map

package/dist/ProgressBar/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,QAAQ,MAAM,0BAA0B,CAAC;AAErD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,MAAM,WAAW,GAA8C,CAAC,EAAE,KAAK,EAAE,GAAG,GAAG,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,EAAE;IAC3G,MAAM,WAAW,GAAG,WAAW,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;IAEpD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAElD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC,CAAC;QACxD,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,CACL,iCAAU,WAAW;QACnB,oBAAC,QAAQ,CAAC,IAAI,IACZ,SAAS,EAAC,6HAA6H,EACvI,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK;YACZ,oBAAC,QAAQ,CAAC,SAAS,IACjB,SAAS,EAAE,sHAAsH,YAAY,EAAE,EAC/I,KAAK,EAAE,EAAE,SAAS,EAAE,eAAe,GAAG,GAAG,QAAQ,IAAI,EAAE,GACvD,CACY,CACX,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

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

package/dist/ProgressBar/ProgressBar.stories.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import ProgressBar from './ProgressBar';
+import { QTip } from '../Tooltip';
+export default {
+    title: 'ProgressBar',
+};
+export const AllProgressBars = () => {
+    const renderAllVariations = () => (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "tw-p-4 light" },
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(ProgressBar, { max: 100, value: 40, label: "40%" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(ProgressBar, { max: 100, value: 10, label: "100%" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(ProgressBar, { value: 0, max: 100, label: "10%" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(ProgressBar, { value: 70, max: 100, label: "70%", extraClasses: "tw-bg-sq-text-color" }))),
+        React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(ProgressBar, { max: 10, value: 4, label: "40%" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(ProgressBar, { max: 10, value: 10, label: "100%" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(ProgressBar, { value: 0, max: 10, label: "0%" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(ProgressBar, { value: 70, max: 100, label: "70%", extraClasses: "tw-bg-sq-text-color" })))));
+    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=ProgressBar.stories.js.map

package/dist/ProgressBar/ProgressBar.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.stories.js","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAElC,eAAe;IACb,KAAK,EAAE,aAAa;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;IAClC,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,CAChC;QACE,6BAAK,SAAS,EAAC,cAAc;YAC3B,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,WAAW,IAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,KAAK,GAAG,CAC5C;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,WAAW,IAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,MAAM,GAAG,CAC7C;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,WAAW,IAAC,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAC,KAAK,GAAG,CAC3C;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,WAAW,IAAC,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAC,KAAK,EAAC,YAAY,EAAC,qBAAqB,GAAG,CAC/E,CACF;QAEN,6BAAK,SAAS,EAAC,yCAAyC;YACtD,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,WAAW,IAAC,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,KAAK,GAAG,CAC1C;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,WAAW,IAAC,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,MAAM,GAAG,CAC5C;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,WAAW,IAAC,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAC,IAAI,GAAG,CACzC;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,WAAW,IAAC,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAC,KAAK,EAAC,YAAY,EAAC,qBAAqB,GAAG,CAC/E,CACF,CACL,CACJ,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAC,iCAAiC;QAC9C,oBAAC,IAAI,OAAG;QACR,6BAAK,SAAS,EAAC,aAAa;YAC1B,8CAAmB;YAClB,mBAAmB,EAAE,CAClB;QAEN,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,iDAAsB;YACrB,mBAAmB,EAAE,CAClB;QAEN,6BAAK,SAAS,EAAC,eAAe;YAC5B,gDAAqB;YACpB,mBAAmB,EAAE,CAClB;QAEN,6BAAK,SAAS,EAAC,eAAe;YAC5B,gDAAqB;YACpB,mBAAmB,EAAE,CAClB,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/dist/ProgressBar/ProgressBar.test.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import ProgressBar from './ProgressBar';
+import userEvent from '@testing-library/user-event';
+describe('ProgressBar', () => {
+    it('renders without crashing', () => {
+        render(React.createElement(ProgressBar, { value: 50, label: "50%" }));
+        const progressBar = screen.getByRole('progressbar');
+        expect(progressBar).toBeInTheDocument();
+    });
+    it('displays the correct progress value', () => {
+        render(React.createElement(ProgressBar, { value: 75, label: "75%" }));
+        const progressBarIndicator = screen.getByRole('progressbar').firstChild;
+        waitFor(() => {
+            expect(progressBarIndicator).toHaveStyle('transform: translateX(-25%)');
+        });
+    });
+    it('applies the correct max value', () => {
+        render(React.createElement(ProgressBar, { value: 50, max: 200, label: "25%" }));
+        const progressBar = screen.getByRole('progressbar');
+        expect(progressBar).toHaveAttribute('data-max', '200');
+    });
+    it('displays the tooltip with the correct label', () => {
+        render(React.createElement(ProgressBar, { value: 50, label: "Progress" }));
+        userEvent.hover(screen.getByRole('progressbar'));
+        waitFor(() => {
+            expect(screen.getByText('Progress')).toBeInTheDocument();
+        });
+    });
+});
+//# sourceMappingURL=ProgressBar.test.js.map

package/dist/ProgressBar/ProgressBar.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.test.js","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,yCAAyC,CAAC;AACjD,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,SAAS,MAAM,6BAA6B,CAAC;AAEpD,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,0BAA0B,EAAE,GAAG,EAAE;QAClC,MAAM,CAAC,oBAAC,WAAW,IAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,KAAK,GAAG,CAAC,CAAC;QAC/C,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;QACpD,MAAM,CAAC,WAAW,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qCAAqC,EAAE,GAAG,EAAE;QAC7C,MAAM,CAAC,oBAAC,WAAW,IAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,KAAK,GAAG,CAAC,CAAC;QAC/C,MAAM,oBAAoB,GAAG,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC;QACxE,OAAO,CAAC,GAAG,EAAE;YACX,MAAM,CAAC,oBAAoB,CAAC,CAAC,WAAW,CAAC,6BAA6B,CAAC,CAAC;QAC1E,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,GAAG,EAAE;QACvC,MAAM,CAAC,oBAAC,WAAW,IAAC,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAC,KAAK,GAAG,CAAC,CAAC;QACzD,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;QACpD,MAAM,CAAC,WAAW,CAAC,CAAC,eAAe,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;IACzD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6CAA6C,EAAE,GAAG,EAAE;QACrD,MAAM,CAAC,oBAAC,WAAW,IAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,UAAU,GAAG,CAAC,CAAC;QACpD,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC;QACjD,OAAO,CAAC,GAAG,EAAE;YACb,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACzD,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

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

@@ -0,0 +1,10 @@
+export interface ProgressBarProps {
+    /** The progress value, between 0 and 100. */
+    value: number;
+    /** The label to display above the progress bar. */
+    label: string;
+    /** The maximum value of the progress bar. */
+    max?: number;
+    /** Additional classes to apply to the progress bar. */
+    extraClasses?: string;
+}

package/dist/ProgressBar/ProgressBar.types.js

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

package/dist/ProgressBar/ProgressBar.types.js.map

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

package/dist/ProgressBar/index.d.ts

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

package/dist/ProgressBar/index.js

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

package/dist/ProgressBar/index.js.map

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

package/dist/Slider/Slider.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { SliderProps } from './Slider.types';
+/**
+ * Slider .
+ */
+export declare const Slider: React.FunctionComponent<SliderProps>;

package/dist/Slider/Slider.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import * as RadixSlider from '@radix-ui/react-slider';
+/**
+ * Slider .
+ */
+export const Slider = (props) => {
+    const { onValueChange, onPointerUp, id, value, name, disabled = false, extraClassNames = '', testId, step, min, max, } = props;
+    return (React.createElement(RadixSlider.Root, { className: `tw-relative tw-flex tw-h-5 tw-w-full tw-touch-none tw-select-none tw-items-center ${extraClassNames}`, defaultValue: [value], value: [value], onValueChange: (value) => onValueChange && onValueChange(value), onPointerUp: (e) => onPointerUp && onPointerUp(e), name: name, id: id, max: max, min: min, disabled: disabled, step: step },
+        React.createElement(RadixSlider.Track, { className: "tw-relative tw-h-[5px] tw-grow tw-rounded-[4px] tw-bg-sq-dark-gray dark:tw-bg-sq-dark-disabled-gray" },
+            React.createElement(RadixSlider.Range, { className: "tw-absolute tw-h-full tw-rounded-full" })),
+        React.createElement(RadixSlider.Thumb, { className: "tw-block tw-h-[15px] tw-w-[15px] tw-rounded-full tw-bg-sq-color-dark tw-shadow-[0_1px_3px] active:tw-shadow-[0_1px_6px] focus:outline-none focus-visible:tw-outline-none aria-disabled:tw-bg-sq-dark-gray dark:aria-disabled:tw-bg-sq-dark-disabled-gray tw-transition tw-ease-in-out", "aria-disabled": disabled })));
+};
+//# sourceMappingURL=Slider.js.map

package/dist/Slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../src/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,WAAW,MAAM,wBAAwB,CAAC;AAEtD;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAyC,CAAC,KAAK,EAAE,EAAE;IACpE,MAAM,EACJ,aAAa,EACb,WAAW,EACX,EAAE,EACF,KAAK,EACL,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,eAAe,GAAG,EAAE,EACpB,MAAM,EACN,IAAI,EACJ,GAAG,EACH,GAAG,GACJ,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,oBAAC,WAAW,CAAC,IAAI,IACf,SAAS,EAAE,qFAAqF,eAAe,EAAE,EACjH,YAAY,EAAE,CAAC,KAAK,CAAC,EACrB,KAAK,EAAE,CAAC,KAAK,CAAC,EACd,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,aAAa,IAAI,aAAa,CAAC,KAAK,CAAC,EAC/D,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,IAAI,WAAW,CAAC,CAAC,CAAC,EACjD,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI;QACV,oBAAC,WAAW,CAAC,KAAK,IAAC,SAAS,EAAC,qGAAqG;YAChI,oBAAC,WAAW,CAAC,KAAK,IAAC,SAAS,EAAC,uCAAuC,GAAG,CACrD;QACpB,oBAAC,WAAW,CAAC,KAAK,IAChB,SAAS,EAAC,uRAAuR,mBAClR,QAAQ,GACvB,CACe,CACpB,CAAC;AACJ,CAAC,CAAC"}

package/dist/Slider/Slider.stories.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const AllSliders: () => JSX.Element;

package/dist/Slider/Slider.stories.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Slider } from './Slider';
+import { QTip } from '../Tooltip';
+export default {
+    title: 'Slider',
+};
+export const AllSliders = () => {
+    const [value1, setValue1] = React.useState(0);
+    const [value2, setValue2] = React.useState(0);
+    const renderAllVariations = () => (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "tw-p-4 light" },
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(Slider, { min: 0, max: 10, value: 4 })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(Slider, { min: 0, max: 10, value: 10 })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(Slider, { value: 0, min: 0, max: 10 })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement("div", null, "1 Step"),
+                React.createElement(Slider, { value: value1, min: 0, max: 20, step: 4, onValueChange: (v) => setValue1(v[0]) })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement("div", null, "10 Steps"),
+                React.createElement(Slider, { value: value2, min: 0, max: 20, step: 10, onValueChange: (v) => setValue2(v[0]) })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement("div", { className: "tw-sq-text-color" }, "Disabled"),
+                React.createElement(Slider, { value: 10, min: 0, max: 20, step: 10, disabled: true }))),
+        React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(Slider, { min: 0, max: 10, value: 4 })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(Slider, { min: 0, max: 10, value: 10 })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(Slider, { value: 0, min: 0, max: 10 })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement("div", { className: "dark:tw-text-white" }, "1 Step"),
+                React.createElement(Slider, { value: value1, min: 0, max: 20, step: 4, onValueChange: (v) => setValue1(v[0]) })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement("div", { className: "dark:tw-text-white" }, "10 Steps"),
+                React.createElement(Slider, { value: value2, min: 0, max: 20, step: 10, onValueChange: (v) => setValue2(v[0]) })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement("div", { className: "dark:tw-text-white" }, "Disabled"),
+                React.createElement(Slider, { value: 10, min: 0, max: 20, step: 10, disabled: true })))));
+    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=Slider.stories.js.map

package/dist/Slider/Slider.stories.js.map

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

package/dist/Slider/Slider.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/dist/Slider/Slider.test.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Slider } from './Slider';
+describe('Slider Component', () => {
+    const defaultProps = {
+        onValueChange: jest.fn(),
+        onPointerUp: jest.fn(),
+        id: 'test-slider',
+        value: 50,
+        name: 'slider',
+        disabled: false,
+        extraClassNames: '',
+        testId: 'slider',
+        step: 1,
+        min: 0,
+        max: 100,
+    };
+    beforeEach(() => {
+        global.ResizeObserver = jest.fn().mockImplementation(() => {
+            return { observe: jest.fn(), disconnect: jest.fn(), unobserve: jest.fn() };
+        });
+    });
+    it('renders without crashing', () => {
+        const { getByRole } = render(React.createElement(Slider, { ...defaultProps }));
+        expect(getByRole('slider')).toBeInTheDocument();
+    });
+    it('is disabled when disabled prop is true', () => {
+        const { getByRole } = render(React.createElement(Slider, { ...defaultProps, disabled: true }));
+        const thumb = getByRole('slider');
+        expect(thumb).toHaveAttribute('data-disabled', '');
+    });
+    it('applies extra class names', () => {
+        const { container } = render(React.createElement(Slider, { ...defaultProps, extraClassNames: "extra-class" }));
+        expect(container.firstChild).toHaveClass('extra-class');
+    });
+});
+//# sourceMappingURL=Slider.test.js.map

package/dist/Slider/Slider.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.test.js","sourceRoot":"","sources":["../../src/Slider/Slider.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,yCAAyC,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,MAAM,YAAY,GAAgB;QAChC,aAAa,EAAE,IAAI,CAAC,EAAE,EAAE;QACxB,WAAW,EAAE,IAAI,CAAC,EAAE,EAAE;QACtB,EAAE,EAAE,aAAa;QACjB,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,KAAK;QACf,eAAe,EAAE,EAAE;QACnB,MAAM,EAAE,QAAQ;QAChB,IAAI,EAAE,CAAC;QACP,GAAG,EAAE,CAAC;QACN,GAAG,EAAE,GAAG;KACT,CAAC;IAEF,UAAU,CAAC,GAAG,EAAE;QACd,MAAM,CAAC,cAAc,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,kBAAkB,CAAC,GAAG,EAAE;YACxD,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,EAAE,CAAC;QAC7E,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,0BAA0B,EAAE,GAAG,EAAE;QAClC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,MAAM,OAAK,YAAY,GAAI,CAAC,CAAC;QAC3D,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAClD,CAAC,CAAC,CAAC;IAGH,EAAE,CAAC,wCAAwC,EAAE,GAAG,EAAE;QAChD,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,MAAM,OAAK,YAAY,EAAE,QAAQ,EAAE,IAAI,GAAI,CAAC,CAAC;QAC3E,MAAM,KAAK,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC;QAClC,MAAM,CAAC,KAAK,CAAC,CAAC,eAAe,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;IACrD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2BAA2B,EAAE,GAAG,EAAE;QACnC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,MAAM,OAAK,YAAY,EAAE,eAAe,EAAC,aAAa,GAAG,CAAC,CAAC;QACzF,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/Slider/Slider.types.d.ts

@@ -0,0 +1,13 @@
+export interface SliderProps {
+    disabled?: boolean;
+    onValueChange?: (value: number[]) => void;
+    onPointerUp?: React.PointerEventHandler<HTMLDivElement>;
+    id?: string;
+    name?: string;
+    value: number;
+    extraClassNames?: string;
+    testId?: string;
+    step?: number;
+    min?: number;
+    max?: number;
+}

package/dist/Slider/Slider.types.js

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

package/dist/Slider/Slider.types.js.map

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

package/dist/Slider/index.d.ts

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

package/dist/Slider/index.js

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

package/dist/Slider/index.js.map

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

package/dist/index.d.ts

@@ -15,6 +15,7 @@ import ButtonWithDropdown from './ButtonWithDropdown';
 import Alert from './Alert';
 import SeeqActionDropdown from './SeeqActionDropdown';
 import InputGroup from './InputGroup';
+import ProgressBar from './ProgressBar';
 export { Tabs };
 export { Button };
 export { ToolbarButton };
@@ -33,3 +34,4 @@ export { ButtonWithDropdown };
 export { Alert };
 export { SeeqActionDropdown };
 export { InputGroup };
+export { ProgressBar };