@seeqdev/qomponents 0.0.126 → 0.0.128

package/dist/Alert/Alert.js

@@ -29,6 +29,6 @@ export const Alert = ({ children, dismissible = true, onClose, show = true, vari
     }
     return (React.createElement("div", { "data-testid": testId, id: id, className: appliedClasses },
         children,
-        dismissible && (React.createElement(Icon, { icon: "fc-delete", type: variant.match(/danger|warning/) ? 'color' : 'theme', color: variant.match(/danger|warning/) ? 'inherit' : undefined, extraClassNames: `tw-self-end tw-text-[11px] tw-cursor-pointer tw-absolute tw-right-[10px] tw-top-[10px] ${variant.match(/danger|warning|gray/) ? 'tw-text-sq-text-color dark:tw-text-sq-text-color' : ''}`, testId: `${testId}-close-btn`, onClick: onClose, ...tooltipProps }))));
+        dismissible && (React.createElement(Icon, { icon: "fc-delete", type: variant.match(/danger|warning/) ? 'color' : 'theme', color: variant.match(/danger|warning/) ? 'inherit' : undefined, extraClassNames: `tw-self-end tw-text-[11px] tw-cursor-pointer tw-absolute tw-right-[10px] tw-top-[10px] ${variant.match(/danger|warning|gray/) ? 'tw-text-sq-text-color dark:tw-text-sq-dark-text' : ''}`, testId: `${testId}-close-btn`, onClick: onClose, ...tooltipProps }))));
 };
 //# sourceMappingURL=Alert.js.map

package/dist/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,eAAe,CAAC;AACvB,OAAO,IAAI,MAAM,SAAS,CAAC;AAI3B,MAAM,WAAW,GACf,yGAAyG;IACzG,6FAA6F,CAAC;AAEhG,MAAM,SAAS,GAAG,4DAA4D,CAAC;AAC/E,MAAM,UAAU,GAAG,8CAA8C,CAAC;AAElE,MAAM,YAAY,GAAG,2BAA2B,CAAC;AAEjD,MAAM,kBAAkB,GAAG,yBAAyB,CAAC;AAErD;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAwC,CAAC,EACzD,QAAQ,EACR,WAAW,GAAG,IAAI,EAClB,OAAO,EACP,IAAI,GAAG,IAAI,EACX,OAAO,EACP,MAAM,GAAG,UAAU,EACnB,EAAE,EACF,eAAe,EACf,GAAG,YAAY,EAChB,EAAE,EAAE;IACH,MAAM,YAAY,GAA0C;QAC1D,KAAK,EAAE,GAAG,UAAU,IAAI,SAAS,EAAE;QACnC,MAAM,EAAE,6CAA6C;QACrD,OAAO,EAAE,iDAAiD;QAC1D,IAAI,EAAE,sGAAsG;KAC7G,CAAC;IACF,MAAM,kBAAkB,GAA0C;QAChE,KAAK,EAAE,kBAAkB;QACzB,MAAM,EAAE,YAAY;QACpB,OAAO,EAAE,gBAAgB;QACzB,IAAI,EAAE,2BAA2B;KAClC,CAAC;IACF,MAAM,cAAc,GAAG,GAAG,WAAW,IAAI,YAAY,CAAC,OAAO,CAAC,IAAI,eAAe,IAAI,kBAAkB,CAAC,OAAO,CAAC,EAAE,CAAC;IAEnH,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,gCAAO,CAAC;KAChB;IACD,OAAO,CACL,4CAAkB,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,cAAc;QACxD,QAAQ;QACR,WAAW,IAAI,CACd,oBAAC,IAAI,IACH,IAAI,EAAC,WAAW,EAChB,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EACzD,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAC9D,eAAe,EAAE,0FACf,OAAO,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,kDAAkD,CAAC,CAAC,CAAC,EAC9F,EAAE,EACF,MAAM,EAAE,GAAG,MAAM,YAAY,EAC7B,OAAO,EAAE,OAAO,KACZ,YAAY,GAChB,CACH,CACG,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,eAAe,CAAC;AACvB,OAAO,IAAI,MAAM,SAAS,CAAC;AAI3B,MAAM,WAAW,GACf,yGAAyG;IACzG,6FAA6F,CAAC;AAEhG,MAAM,SAAS,GAAG,4DAA4D,CAAC;AAC/E,MAAM,UAAU,GAAG,8CAA8C,CAAC;AAElE,MAAM,YAAY,GAAG,2BAA2B,CAAC;AAEjD,MAAM,kBAAkB,GAAG,yBAAyB,CAAC;AAErD;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAwC,CAAC,EACzD,QAAQ,EACR,WAAW,GAAG,IAAI,EAClB,OAAO,EACP,IAAI,GAAG,IAAI,EACX,OAAO,EACP,MAAM,GAAG,UAAU,EACnB,EAAE,EACF,eAAe,EACf,GAAG,YAAY,EAChB,EAAE,EAAE;IACH,MAAM,YAAY,GAA0C;QAC1D,KAAK,EAAE,GAAG,UAAU,IAAI,SAAS,EAAE;QACnC,MAAM,EAAE,6CAA6C;QACrD,OAAO,EAAE,iDAAiD;QAC1D,IAAI,EAAE,sGAAsG;KAC7G,CAAC;IACF,MAAM,kBAAkB,GAA0C;QAChE,KAAK,EAAE,kBAAkB;QACzB,MAAM,EAAE,YAAY;QACpB,OAAO,EAAE,gBAAgB;QACzB,IAAI,EAAE,2BAA2B;KAClC,CAAC;IACF,MAAM,cAAc,GAAG,GAAG,WAAW,IAAI,YAAY,CAAC,OAAO,CAAC,IAAI,eAAe,IAAI,kBAAkB,CAAC,OAAO,CAAC,EAAE,CAAC;IAEnH,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,gCAAO,CAAC;KAChB;IACD,OAAO,CACL,4CAAkB,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,cAAc;QACxD,QAAQ;QACR,WAAW,IAAI,CACd,oBAAC,IAAI,IACH,IAAI,EAAC,WAAW,EAChB,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EACzD,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAC9D,eAAe,EAAE,0FACf,OAAO,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,iDAAiD,CAAC,CAAC,CAAC,EAC7F,EAAE,EACF,MAAM,EAAE,GAAG,MAAM,YAAY,EAC7B,OAAO,EAAE,OAAO,KACZ,YAAY,GAChB,CACH,CACG,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/Carousel/Carousel.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
-import { CarouselProps } from './Carousel.types';
-/**
- * Carousel:
- *  - Easily create a carousel with custom slides.
- *  - Supports automatic sliding, navigation arrows, and slide indicators.
- */
-declare const Carousel: React.FunctionComponent<CarouselProps>;
-export default Carousel;
+import React from 'react';
+import { CarouselProps } from './Carousel.types';
+/**
+ * Carousel:
+ *  - Easily create a carousel with custom slides.
+ *  - Supports automatic sliding, navigation arrows, and slide indicators.
+ */
+declare const Carousel: React.FunctionComponent<CarouselProps>;
+export default Carousel;

package/dist/Carousel/Carousel.stories.d.ts

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

package/dist/Carousel/Carousel.test.d.ts

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom';

package/dist/Carousel/Carousel.types.d.ts

@@ -1,23 +1,23 @@
-/**
- * Properties for the Carousel component.
- */
-export interface CarouselProps {
-    testId?: string;
-    extraClassNames?: string;
-    activeIndex?: number;
-    /**
-     * Callback function that is called when the slide changes.
-     * @param nextSlide - The index of the next slide.
-     * @param direction - The direction of the slide change, either 'left' or 'right'.
-     */
-    onSlide?: (nextSlide: number, direction: 'left' | 'right') => void;
-    autoSlide?: boolean;
-    interval?: number;
-    nextIcon?: string;
-    prevIcon?: string;
-    iconExtraClassNames?: string;
-    showArrows?: boolean;
-    showIndicators?: boolean;
-    continuous?: boolean;
-    carouselItems: React.ReactNode[];
-}
+/**
+ * Properties for the Carousel component.
+ */
+export interface CarouselProps {
+    testId?: string;
+    extraClassNames?: string;
+    activeIndex?: number;
+    /**
+     * Callback function that is called when the slide changes.
+     * @param nextSlide - The index of the next slide.
+     * @param direction - The direction of the slide change, either 'left' or 'right'.
+     */
+    onSlide?: (nextSlide: number, direction: 'left' | 'right') => void;
+    autoSlide?: boolean;
+    interval?: number;
+    nextIcon?: string;
+    prevIcon?: string;
+    iconExtraClassNames?: string;
+    showArrows?: boolean;
+    showIndicators?: boolean;
+    continuous?: boolean;
+    carouselItems: React.ReactNode[];
+}

package/dist/Carousel/index.d.ts

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

package/dist/ProgressBar/ProgressBar.js

@@ -14,7 +14,7 @@ const ProgressIndicator = (props) => {
         }, 100);
         return () => clearTimeout(timeout);
     }, [value]);
-    return (React.createElement(Progress.Indicator, { className: `tw-ease-[cubic-bezier(0.65, 0, 0.35, 1)] tw-w-full tw-h-full tw-duration-[660ms] tw-flex tw-bg-sq-color-dark ${extraClasses}`, ...tooltipData, "data-qtip-text": tooltipProps.tooltip ? tooltipProps.tooltip : `${value}%`, "data-testid": `progress-bar-indicator-${testId ? testId : value}`, key: `${index}-${value}`, style: {
+    return (React.createElement(Progress.Indicator, { className: `tw-ease-[cubic-bezier(0.65, 0, 0.35, 1)] tw-w-full tw-h-full tw-duration-[660ms] tw-flex tw-bg-sq-color-dark tw-justify-center tw-items-center ${extraClasses}`, ...tooltipData, "data-qtip-text": tooltipProps.tooltip ? tooltipProps.tooltip : `${value}%`, "data-testid": `progress-bar-indicator-${testId ? testId : value}`, key: `${index}-${value}`, style: {
             // Background color will default to the theme color if undefined
             backgroundColor: color ? color : undefined,
             animation: 'width 660ms forwards',

package/dist/ProgressBar/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,QAAQ,MAAM,0BAA0B,CAAC;AAErD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,MAAM,iBAAiB,GAEnB,CAAC,KAAK,EAAE,EAAE;IACZ,MAAM,EACJ,KAAK,EACL,KAAK,GAAG,SAAS,EACjB,MAAM,EACN,KAAK,EACL,YAAY,GAAG,EAAE,EACjB,YAAY,GAAG,EAAE,EACjB,YAAY,EACZ,GAAG,EACH,KAAK,EACL,GAAG,YAAY,EAChB,GAAG,KAAK,CAAC;IACV,MAAM,WAAW,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IAE9C,MAAM,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAChC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAEhF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YAC9B,MAAM,QAAQ,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;YACrD,gBAAgB,CAAC,QAAQ,CAAC,CAAC;YAC3B,aAAa,CAAC,OAAO,GAAG,QAAQ,CAAC;QACnC,CAAC,EAAE,GAAG,CAAC,CAAC;QAER,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,oBAAC,QAAQ,CAAC,SAAS,IACjB,SAAS,EAAE,gHAAgH,YAAY,EAAE,KACrI,WAAW,oBACC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,iBAC5D,0BAA0B,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,EAChE,GAAG,EAAE,GAAG,KAAK,IAAI,KAAK,EAAE,EACxB,KAAK,EAAE;YACL,gEAAgE;YAChE,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;YAC1C,SAAS,EAAE,sBAAsB;YACjC,KAAK,EAAE,GAAG,aAAa,GAAG;SAC3B,IACA,KAAK,CAAC,CAAC,CAAC,CACP,8BACE,SAAS,EAAE,wFAAwF,YAAY,EAAE,IAChH,KAAK,CACD,CACR,CAAC,CAAC,CAAC,SAAS,CACM,CACtB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,WAAW,GAA8C,CAAC,EAC9D,MAAM,GAAG,EAAE,EACX,GAAG,GAAG,GAAG,EACT,qBAAqB,GAAG,EAAE,GAC3B,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,QAAQ,CAAC,IAAI,IACZ,SAAS,EAAE,iJAAiJ,qBAAqB,EAAE,EACnL,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,GAAG,KAAK,EAAE,CAAC,CAAC,IACvD,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;QACvB,OAAO,oBAAC,iBAAiB,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,GAAI,CAAC;IACnG,CAAC,CAAC,CACY,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,QAAQ,MAAM,0BAA0B,CAAC;AAErD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,MAAM,iBAAiB,GAEnB,CAAC,KAAK,EAAE,EAAE;IACZ,MAAM,EACJ,KAAK,EACL,KAAK,GAAG,SAAS,EACjB,MAAM,EACN,KAAK,EACL,YAAY,GAAG,EAAE,EACjB,YAAY,GAAG,EAAE,EACjB,YAAY,EACZ,GAAG,EACH,KAAK,EACL,GAAG,YAAY,EAChB,GAAG,KAAK,CAAC;IACV,MAAM,WAAW,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IAE9C,MAAM,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAChC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAEhF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YAC9B,MAAM,QAAQ,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;YACrD,gBAAgB,CAAC,QAAQ,CAAC,CAAC;YAC3B,aAAa,CAAC,OAAO,GAAG,QAAQ,CAAC;QACnC,CAAC,EAAE,GAAG,CAAC,CAAC;QAER,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,oBAAC,QAAQ,CAAC,SAAS,IACjB,SAAS,EAAE,kJAAkJ,YAAY,EAAE,KACvK,WAAW,oBACC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,iBAC5D,0BAA0B,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,EAChE,GAAG,EAAE,GAAG,KAAK,IAAI,KAAK,EAAE,EACxB,KAAK,EAAE;YACL,gEAAgE;YAChE,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;YAC1C,SAAS,EAAE,sBAAsB;YACjC,KAAK,EAAE,GAAG,aAAa,GAAG;SAC3B,IACA,KAAK,CAAC,CAAC,CAAC,CACP,8BACE,SAAS,EAAE,wFAAwF,YAAY,EAAE,IAChH,KAAK,CACD,CACR,CAAC,CAAC,CAAC,SAAS,CACM,CACtB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,WAAW,GAA8C,CAAC,EAC9D,MAAM,GAAG,EAAE,EACX,GAAG,GAAG,GAAG,EACT,qBAAqB,GAAG,EAAE,GAC3B,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,QAAQ,CAAC,IAAI,IACZ,SAAS,EAAE,iJAAiJ,qBAAqB,EAAE,EACnL,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,GAAG,KAAK,EAAE,CAAC,CAAC,IACvD,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;QACvB,OAAO,oBAAC,iBAAiB,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,GAAI,CAAC;IACnG,CAAC,CAAC,CACY,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/index.d.ts

@@ -19,6 +19,7 @@ import Collapse from './Collapse';
 import Slider from './Slider';
 import ProgressBar from './ProgressBar';
 import ButtonGroup from './ButtonGroup';
+import Carousel from './Carousel';
 export { Tabs };
 export { Button };
 export { ToolbarButton };
@@ -41,3 +42,4 @@ export { Collapse };
 export { Slider };
 export { ProgressBar };
 export { ButtonGroup };
+export { Carousel };

package/dist/index.esm.js

@@ -18958,6 +18958,260 @@ function useSpring(props, deps) {
   );
   return isFn || arguments.length == 2 ? [values, ref] : values;
 }
+function useTransition(data, props, deps) {
+  const propsFn = is.fun(props) && props;
+  const {
+    reset,
+    sort,
+    trail = 0,
+    expires = true,
+    exitBeforeEnter = false,
+    onDestroyed,
+    ref: propsRef,
+    config: propsConfig
+  } = propsFn ? propsFn() : props;
+  const ref = useMemo(
+    () => propsFn || arguments.length == 3 ? SpringRef() : void 0,
+    []
+  );
+  const items = toArray(data);
+  const transitions = [];
+  const usedTransitions = useRef(null);
+  const prevTransitions = reset ? null : usedTransitions.current;
+  useIsomorphicLayoutEffect(() => {
+    usedTransitions.current = transitions;
+  });
+  useOnce(() => {
+    each(transitions, (t) => {
+      ref?.add(t.ctrl);
+      t.ctrl.ref = ref;
+    });
+    return () => {
+      each(usedTransitions.current, (t) => {
+        if (t.expired) {
+          clearTimeout(t.expirationId);
+        }
+        detachRefs(t.ctrl, ref);
+        t.ctrl.stop(true);
+      });
+    };
+  });
+  const keys = getKeys(items, propsFn ? propsFn() : props, prevTransitions);
+  const expired = reset && usedTransitions.current || [];
+  useIsomorphicLayoutEffect(
+    () => each(expired, ({ ctrl, item, key }) => {
+      detachRefs(ctrl, ref);
+      callProp(onDestroyed, item, key);
+    })
+  );
+  const reused = [];
+  if (prevTransitions)
+    each(prevTransitions, (t, i) => {
+      if (t.expired) {
+        clearTimeout(t.expirationId);
+        expired.push(t);
+      } else {
+        i = reused[i] = keys.indexOf(t.key);
+        if (~i)
+          transitions[i] = t;
+      }
+    });
+  each(items, (item, i) => {
+    if (!transitions[i]) {
+      transitions[i] = {
+        key: keys[i],
+        item,
+        phase: "mount" /* MOUNT */,
+        ctrl: new Controller()
+      };
+      transitions[i].ctrl.item = item;
+    }
+  });
+  if (reused.length) {
+    let i = -1;
+    const { leave } = propsFn ? propsFn() : props;
+    each(reused, (keyIndex, prevIndex) => {
+      const t = prevTransitions[prevIndex];
+      if (~keyIndex) {
+        i = transitions.indexOf(t);
+        transitions[i] = { ...t, item: items[keyIndex] };
+      } else if (leave) {
+        transitions.splice(++i, 0, t);
+      }
+    });
+  }
+  if (is.fun(sort)) {
+    transitions.sort((a, b) => sort(a.item, b.item));
+  }
+  let delay = -trail;
+  const forceUpdate = useForceUpdate();
+  const defaultProps = getDefaultProps(props);
+  const changes = /* @__PURE__ */ new Map();
+  const exitingTransitions = useRef(/* @__PURE__ */ new Map());
+  const forceChange = useRef(false);
+  each(transitions, (t, i) => {
+    const key = t.key;
+    const prevPhase = t.phase;
+    const p = propsFn ? propsFn() : props;
+    let to2;
+    let phase;
+    const propsDelay = callProp(p.delay || 0, key);
+    if (prevPhase == "mount" /* MOUNT */) {
+      to2 = p.enter;
+      phase = "enter" /* ENTER */;
+    } else {
+      const isLeave = keys.indexOf(key) < 0;
+      if (prevPhase != "leave" /* LEAVE */) {
+        if (isLeave) {
+          to2 = p.leave;
+          phase = "leave" /* LEAVE */;
+        } else if (to2 = p.update) {
+          phase = "update" /* UPDATE */;
+        } else
+          return;
+      } else if (!isLeave) {
+        to2 = p.enter;
+        phase = "enter" /* ENTER */;
+      } else
+        return;
+    }
+    to2 = callProp(to2, t.item, i);
+    to2 = is.obj(to2) ? inferTo(to2) : { to: to2 };
+    if (!to2.config) {
+      const config2 = propsConfig || defaultProps.config;
+      to2.config = callProp(config2, t.item, i, phase);
+    }
+    delay += trail;
+    const payload = {
+      ...defaultProps,
+      // we need to add our props.delay value you here.
+      delay: propsDelay + delay,
+      ref: propsRef,
+      immediate: p.immediate,
+      // This prevents implied resets.
+      reset: false,
+      // Merge any phase-specific props.
+      ...to2
+    };
+    if (phase == "enter" /* ENTER */ && is.und(payload.from)) {
+      const p2 = propsFn ? propsFn() : props;
+      const from = is.und(p2.initial) || prevTransitions ? p2.from : p2.initial;
+      payload.from = callProp(from, t.item, i);
+    }
+    const { onResolve } = payload;
+    payload.onResolve = (result) => {
+      callProp(onResolve, result);
+      const transitions2 = usedTransitions.current;
+      const t2 = transitions2.find((t3) => t3.key === key);
+      if (!t2)
+        return;
+      if (result.cancelled && t2.phase != "update" /* UPDATE */) {
+        return;
+      }
+      if (t2.ctrl.idle) {
+        const idle = transitions2.every((t3) => t3.ctrl.idle);
+        if (t2.phase == "leave" /* LEAVE */) {
+          const expiry = callProp(expires, t2.item);
+          if (expiry !== false) {
+            const expiryMs = expiry === true ? 0 : expiry;
+            t2.expired = true;
+            if (!idle && expiryMs > 0) {
+              if (expiryMs <= 2147483647)
+                t2.expirationId = setTimeout(forceUpdate, expiryMs);
+              return;
+            }
+          }
+        }
+        if (idle && transitions2.some((t3) => t3.expired)) {
+          exitingTransitions.current.delete(t2);
+          if (exitBeforeEnter) {
+            forceChange.current = true;
+          }
+          forceUpdate();
+        }
+      }
+    };
+    const springs = getSprings(t.ctrl, payload);
+    if (phase === "leave" /* LEAVE */ && exitBeforeEnter) {
+      exitingTransitions.current.set(t, { phase, springs, payload });
+    } else {
+      changes.set(t, { phase, springs, payload });
+    }
+  });
+  const context = useContext(SpringContext);
+  const prevContext = usePrev(context);
+  const hasContext = context !== prevContext && hasProps(context);
+  useIsomorphicLayoutEffect(() => {
+    if (hasContext) {
+      each(transitions, (t) => {
+        t.ctrl.start({ default: context });
+      });
+    }
+  }, [context]);
+  each(changes, (_, t) => {
+    if (exitingTransitions.current.size) {
+      const ind = transitions.findIndex((state) => state.key === t.key);
+      transitions.splice(ind, 1);
+    }
+  });
+  useIsomorphicLayoutEffect(
+    () => {
+      each(
+        exitingTransitions.current.size ? exitingTransitions.current : changes,
+        ({ phase, payload }, t) => {
+          const { ctrl } = t;
+          t.phase = phase;
+          ref?.add(ctrl);
+          if (hasContext && phase == "enter" /* ENTER */) {
+            ctrl.start({ default: context });
+          }
+          if (payload) {
+            replaceRef(ctrl, payload.ref);
+            if ((ctrl.ref || ref) && !forceChange.current) {
+              ctrl.update(payload);
+            } else {
+              ctrl.start(payload);
+              if (forceChange.current) {
+                forceChange.current = false;
+              }
+            }
+          }
+        }
+      );
+    },
+    reset ? void 0 : deps
+  );
+  const renderTransitions = (render) => /* @__PURE__ */ React.createElement(React.Fragment, null, transitions.map((t, i) => {
+    const { springs } = changes.get(t) || t.ctrl;
+    const elem = render({ ...springs }, t.item, t, i);
+    return elem && elem.type ? /* @__PURE__ */ React.createElement(
+      elem.type,
+      {
+        ...elem.props,
+        key: is.str(t.key) || is.num(t.key) ? t.key : t.ctrl.id,
+        ref: elem.ref
+      }
+    ) : elem;
+  }));
+  return ref ? [renderTransitions, ref] : renderTransitions;
+}
+var nextKey = 1;
+function getKeys(items, { key, keys = key }, prevTransitions) {
+  if (keys === null) {
+    const reused = /* @__PURE__ */ new Set();
+    return items.map((item) => {
+      const t = prevTransitions && prevTransitions.find(
+        (t2) => t2.item === item && t2.phase !== "leave" /* LEAVE */ && !reused.has(t2)
+      );
+      if (t) {
+        reused.add(t);
+        return t.key;
+      }
+      return nextKey++;
+    });
+  }
+  return is.und(keys) ? items : is.fun(keys) ? items.map(keys) : toArray(keys);
+}
 var Interpolation = class extends FrameValue {
   constructor(source, args) {
     super();
@@ -20713,5 +20967,68 @@ const ButtonGroup = (props) => {
             : ''} ${item.buttonProps.extraClassNames}`, onClick: () => onChange && onChange(item?.buttonProps?.value) })) : (React__default.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)))));
 };
 
-export { Accordion, Alert, Button, ButtonGroup, ButtonWithDropdown, ButtonWithPopover, Checkbox, Collapse, Icon, InputGroup, Modal, ProgressBar, QTip, SeeqActionDropdown, Select, components as SelectCompoents, Slider, Tabs, TextArea, TextField, ToolbarButton, Tooltip };
+/**
+ * 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;
+        setCurrentIndex(newIndex);
+        onSlide(newIndex, newIndex > currentIndex ? 'right' : 'left');
+    };
+    useEffect(() => {
+        if (autoSlide) {
+            const currentInterval = setInterval(() => {
+                if (continuous) {
+                    setCurrentIndex((prevCurrentIndex) => {
+                        onSlide((prevCurrentIndex + 1) % carouselItems.length, (prevCurrentIndex + 1) % carouselItems.length > prevCurrentIndex ? 'right' : 'left');
+                        return (prevCurrentIndex + 1) % carouselItems.length;
+                    });
+                }
+                else if (currentIndex === carouselItems.length - 1) {
+                    clearInterval(currentInterval);
+                }
+                else {
+                    changeSlide(currentIndex + 1);
+                }
+            }, interval);
+            return () => clearInterval(currentInterval);
+        }
+    }, [autoSlide]);
+    useEffect(() => {
+        if (activeIndex && activeIndex !== currentIndex) {
+            setCurrentIndex(activeIndex);
+        }
+    }, [activeIndex]);
+    const transitions = useTransition([currentIndex], {
+        keys: null,
+        exitBeforeEnter: true,
+        from: { transform: 'translate3d(100%,0,0)' },
+        enter: { transform: 'translate3d(0%,0,0)' },
+        leave: { transform: 'translate3d(0%,0,0)' },
+    });
+    const onBackClick = () => {
+        if (currentIndex === 0 && !continuous) {
+            return;
+        }
+        changeSlide((currentIndex - 1) % carouselItems.length);
+    };
+    const onForwardClick = () => {
+        if (currentIndex === carouselItems.length - 1 && !continuous) {
+            return;
+        }
+        changeSlide((currentIndex + 1) % carouselItems.length);
+    };
+    return (React__default.createElement("div", { "data-testid": testId, className: `tw-flex tw-flex-col tw-items-center tw-justify-center tw-w-full ${extraClassNames}` },
+        React__default.createElement("div", { className: "tw-flex tw-items-center tw-w-full tw-h-max tw-gap-1" },
+            showArrows && (React__default.createElement(Button, { icon: prevIcon, size: "lg", variant: "no-border", testId: "carousel-prev", extraClassNames: `${currentIndex === 0 && !continuous ? 'tw-invisible' : ''} ${iconExtraClassNames} tw-animate-fadeIn`, onClick: onBackClick })),
+            transitions((style, i) => (React__default.createElement(animated.div, { "data-testid": `${testId}-${currentIndex}`, style: style }, carouselItems[currentIndex]))),
+            showArrows && (React__default.createElement(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 && (React__default.createElement("div", { className: "tw-flex tw-gap-1 tw-mt-2" }, carouselItems.map((_, i) => (React__default.createElement("div", { key: i, 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) })))))));
+};
+
+export { Accordion, Alert, Button, ButtonGroup, ButtonWithDropdown, ButtonWithPopover, Carousel, Checkbox, Collapse, Icon, InputGroup, Modal, ProgressBar, QTip, SeeqActionDropdown, Select, components as SelectCompoents, Slider, Tabs, TextArea, TextField, ToolbarButton, Tooltip };
 //# sourceMappingURL=index.esm.js.map