@uipath/apollo-wind 2.24.0 → 2.26.0

package/dist/components/ui/button.cjs

@@ -49,6 +49,7 @@ const buttonVariants = (0, external_class_variance_authority_namespaceObject.cva
             xs: 'h-8 px-2.5',
             '2xs': 'h-7 px-2 text-xs',
             '3xs': 'h-6 px-1.5 text-xs',
+            '4xs': 'h-5 px-1 text-xs [&_svg]:size-3',
             icon: 'h-10 aspect-square p-0'
         },
         icon: {

package/dist/components/ui/button.d.ts

@@ -2,7 +2,7 @@ import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "icon" | "lg" | "sm" | "xs" | "2xs" | "3xs" | null | undefined;
+    size?: "default" | "icon" | "lg" | "sm" | "xs" | "2xs" | "3xs" | "4xs" | null | undefined;
     icon?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/dist/components/ui/button.js

@@ -20,6 +20,7 @@ const buttonVariants = cva('inline-flex items-center justify-center gap-2 whites
             xs: 'h-8 px-2.5',
             '2xs': 'h-7 px-2 text-xs',
             '3xs': 'h-6 px-1.5 text-xs',
+            '4xs': 'h-5 px-1 text-xs [&_svg]:size-3',
             icon: 'h-10 aspect-square p-0'
         },
         icon: {

package/dist/components/ui/index.cjs

@@ -15,7 +15,7 @@ var __webpack_modules__ = {
     "./avatar" (module) {
         module.exports = require("./avatar.cjs");
     },
-    "@/components/ui/badge" (module) {
+    "./badge" (module) {
         module.exports = require("./badge.cjs");
     },
     "./breadcrumb" (module) {
@@ -27,7 +27,7 @@ var __webpack_modules__ = {
     "@/components/ui/button" (module) {
         module.exports = require("./button.cjs");
     },
-    "./calendar" (module) {
+    "@/components/ui/calendar" (module) {
         module.exports = require("./calendar.cjs");
     },
     "./card" (module) {
@@ -36,16 +36,16 @@ var __webpack_modules__ = {
     "./checkbox" (module) {
         module.exports = require("./checkbox.cjs");
     },
-    "@/components/ui/collapsible" (module) {
+    "./collapsible" (module) {
         module.exports = require("./collapsible.cjs");
     },
     "./combobox" (module) {
         module.exports = require("./combobox.cjs");
     },
-    "./command" (module) {
+    "@/components/ui/command" (module) {
         module.exports = require("./command.cjs");
     },
-    "@/components/ui/context-menu" (module) {
+    "./context-menu" (module) {
         module.exports = require("./context-menu.cjs");
     },
     "./data-table" (module) {
@@ -57,13 +57,13 @@ var __webpack_modules__ = {
     "./datetime-picker" (module) {
         module.exports = require("./datetime-picker.cjs");
     },
-    "@/components/ui/dialog" (module) {
+    "./dialog" (module) {
         module.exports = require("./dialog.cjs");
     },
-    "@/components/ui/dropdown-menu" (module) {
+    "./dropdown-menu" (module) {
         module.exports = require("./dropdown-menu.cjs");
     },
-    "@/components/ui/editable-cell" (module) {
+    "./editable-cell" (module) {
         module.exports = require("./editable-cell.cjs");
     },
     "./empty-state" (module) {
@@ -75,10 +75,10 @@ var __webpack_modules__ = {
     "@/components/ui/hover-card" (module) {
         module.exports = require("./hover-card.cjs");
     },
-    "./input" (module) {
+    "@/components/ui/input" (module) {
         module.exports = require("./input.cjs");
     },
-    "./label" (module) {
+    "@/components/ui/label" (module) {
         module.exports = require("./label.cjs");
     },
     "./layout" (module) {
@@ -90,7 +90,7 @@ var __webpack_modules__ = {
     "./pagination" (module) {
         module.exports = require("./pagination.cjs");
     },
-    "./popover" (module) {
+    "@/components/ui/popover" (module) {
         module.exports = require("./popover.cjs");
     },
     "./progress" (module) {
@@ -244,7 +244,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_avatar__rspack_import_4[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _badge__rspack_import_5 = __webpack_require__("@/components/ui/badge");
+    var _badge__rspack_import_5 = __webpack_require__("./badge");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _badge__rspack_import_5)if ([
         "TreeView",
@@ -272,7 +272,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_button_group__rspack_import_8[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _calendar__rspack_import_9 = __webpack_require__("./calendar");
+    var _calendar__rspack_import_9 = __webpack_require__("@/components/ui/calendar");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _calendar__rspack_import_9)if ([
         "TreeView",
@@ -293,7 +293,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_checkbox__rspack_import_11[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _collapsible__rspack_import_12 = __webpack_require__("@/components/ui/collapsible");
+    var _collapsible__rspack_import_12 = __webpack_require__("./collapsible");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _collapsible__rspack_import_12)if ([
         "TreeView",
@@ -307,14 +307,14 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_combobox__rspack_import_13[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _command__rspack_import_14 = __webpack_require__("./command");
+    var _command__rspack_import_14 = __webpack_require__("@/components/ui/command");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _command__rspack_import_14)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_command__rspack_import_14[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _context_menu__rspack_import_15 = __webpack_require__("@/components/ui/context-menu");
+    var _context_menu__rspack_import_15 = __webpack_require__("./context-menu");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _context_menu__rspack_import_15)if ([
         "TreeView",
@@ -342,21 +342,21 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_datetime_picker__rspack_import_18[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _dialog__rspack_import_19 = __webpack_require__("@/components/ui/dialog");
+    var _dialog__rspack_import_19 = __webpack_require__("./dialog");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dialog__rspack_import_19)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_dialog__rspack_import_19[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _dropdown_menu__rspack_import_20 = __webpack_require__("@/components/ui/dropdown-menu");
+    var _dropdown_menu__rspack_import_20 = __webpack_require__("./dropdown-menu");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dropdown_menu__rspack_import_20)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_dropdown_menu__rspack_import_20[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _editable_cell__rspack_import_21 = __webpack_require__("@/components/ui/editable-cell");
+    var _editable_cell__rspack_import_21 = __webpack_require__("./editable-cell");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _editable_cell__rspack_import_21)if ([
         "TreeView",
@@ -384,14 +384,14 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_hover_card__rspack_import_24[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _input__rspack_import_25 = __webpack_require__("./input");
+    var _input__rspack_import_25 = __webpack_require__("@/components/ui/input");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _input__rspack_import_25)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_input__rspack_import_25[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _label__rspack_import_26 = __webpack_require__("./label");
+    var _label__rspack_import_26 = __webpack_require__("@/components/ui/label");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _label__rspack_import_26)if ([
         "TreeView",
@@ -419,7 +419,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_pagination__rspack_import_29[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _popover__rspack_import_30 = __webpack_require__("./popover");
+    var _popover__rspack_import_30 = __webpack_require__("@/components/ui/popover");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _popover__rspack_import_30)if ([
         "TreeView",

package/dist/components/ui/input.cjs

@@ -29,9 +29,9 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
 const utils_cjs_namespaceObject = require("../../lib/utils.cjs");
-const Input = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, type, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
+const Input = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, type, variant = 'default', size = 'default', ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
         type: type,
-        className: (0, utils_cjs_namespaceObject.cn)('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:py-2 future:text-sm future:placeholder:text-foreground-muted future:placeholder:font-normal future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
+        className: (0, utils_cjs_namespaceObject.cn)('flex w-full transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', 'default' === size && 'h-9 rounded-md px-3 py-1 text-base placeholder:text-muted-foreground md:text-sm', 'xs' === size && 'h-6 rounded px-2 text-xs placeholder:text-muted-foreground', 'default' === variant && 'border border-input bg-transparent', 'ghost' === variant && 'border-0 bg-surface-overlay', 'default' === variant && 'default' === size && 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:py-2 future:text-sm future:placeholder:text-foreground-muted future:placeholder:font-normal future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
         ref: ref,
         ...props
     }));

package/dist/components/ui/input.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    variant?: 'default' | 'ghost';
+    size?: 'default' | 'xs';
 }
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export { Input };

package/dist/components/ui/input.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cn } from "../../lib/utils.js";
-const Input = /*#__PURE__*/ forwardRef(({ className, type, ...props }, ref)=>/*#__PURE__*/ jsx("input", {
+const Input = /*#__PURE__*/ forwardRef(({ className, type, variant = 'default', size = 'default', ...props }, ref)=>/*#__PURE__*/ jsx("input", {
         type: type,
-        className: cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:py-2 future:text-sm future:placeholder:text-foreground-muted future:placeholder:font-normal future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
+        className: cn('flex w-full transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', 'default' === size && 'h-9 rounded-md px-3 py-1 text-base placeholder:text-muted-foreground md:text-sm', 'xs' === size && 'h-6 rounded px-2 text-xs placeholder:text-muted-foreground', 'default' === variant && 'border border-input bg-transparent', 'ghost' === variant && 'border-0 bg-surface-overlay', 'default' === variant && 'default' === size && 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:py-2 future:text-sm future:placeholder:text-foreground-muted future:placeholder:font-normal future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
         ref: ref,
         ...props
     }));

package/dist/components/ui/search.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface SearchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+import { type InputProps } from './input';
+export interface SearchProps extends Omit<InputProps, 'onChange'> {
     value?: string;
     onChange?: (value: string) => void;
     onClear?: () => void;

package/dist/components/ui/tabs.cjs

@@ -24,6 +24,7 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
+    ScrollableTabsList: ()=>ScrollableTabsList,
     TabsList: ()=>TabsList,
     Tabs: ()=>Tabs,
     TabsTrigger: ()=>TabsTrigger,
@@ -31,6 +32,7 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const react_tabs_namespaceObject = require("@radix-ui/react-tabs");
+const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
 const Tabs = react_tabs_namespaceObject.Root;
@@ -40,6 +42,127 @@ const TabsList = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ clas
         ...props
     }));
 TabsList.displayName = react_tabs_namespaceObject.List.displayName;
+const ScrollableTabsList = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, containerClassName, scrollButtonClassName, previousButtonLabel = 'Scroll tabs left', nextButtonLabel = 'Scroll tabs right', ...props }, forwardedRef)=>{
+    const listRef = external_react_namespaceObject.useRef(null);
+    const [hasOverflow, setHasOverflow] = external_react_namespaceObject.useState(false);
+    const [canScrollLeft, setCanScrollLeft] = external_react_namespaceObject.useState(false);
+    const [canScrollRight, setCanScrollRight] = external_react_namespaceObject.useState(false);
+    const animationFrameRef = external_react_namespaceObject.useRef(null);
+    const revealOnNextFrameRef = external_react_namespaceObject.useRef(false);
+    external_react_namespaceObject.useImperativeHandle(forwardedRef, ()=>listRef.current);
+    const updateScrollState = external_react_namespaceObject.useCallback(()=>{
+        const list = listRef.current;
+        if (!list) return;
+        const maxScrollLeft = list.scrollWidth - list.clientWidth;
+        setHasOverflow(maxScrollLeft > 1);
+        setCanScrollLeft(list.scrollLeft > 1);
+        setCanScrollRight(list.scrollLeft < maxScrollLeft - 1);
+    }, []);
+    const revealActiveTab = external_react_namespaceObject.useCallback(()=>{
+        const list = listRef.current;
+        const activeTab = list?.querySelector('[role="tab"][data-state="active"]');
+        if (!list || !activeTab) return;
+        const listRect = list.getBoundingClientRect();
+        const activeTabRect = activeTab.getBoundingClientRect();
+        if (activeTabRect.left < listRect.left) list.scrollBy({
+            left: activeTabRect.left - listRect.left,
+            behavior: 'smooth'
+        });
+        else if (activeTabRect.right > listRect.right) list.scrollBy({
+            left: activeTabRect.right - listRect.right,
+            behavior: 'smooth'
+        });
+    }, []);
+    const scheduleLayoutUpdate = external_react_namespaceObject.useCallback((revealActive = false)=>{
+        revealOnNextFrameRef.current ||= revealActive;
+        if (null !== animationFrameRef.current) return;
+        animationFrameRef.current = requestAnimationFrame(()=>{
+            animationFrameRef.current = null;
+            updateScrollState();
+            if (revealOnNextFrameRef.current) {
+                revealOnNextFrameRef.current = false;
+                revealActiveTab();
+            }
+        });
+    }, [
+        revealActiveTab,
+        updateScrollState
+    ]);
+    external_react_namespaceObject.useEffect(()=>{
+        const list = listRef.current;
+        if (!list) return;
+        list.scrollLeft = 0;
+        scheduleLayoutUpdate(true);
+        const handleScroll = ()=>scheduleLayoutUpdate();
+        list.addEventListener('scroll', handleScroll);
+        const resizeObserver = new ResizeObserver(()=>scheduleLayoutUpdate(true));
+        resizeObserver.observe(list);
+        const mutationObserver = new MutationObserver((mutations)=>{
+            if (mutations.some((mutation)=>'childList' === mutation.type || 'data-state' === mutation.attributeName)) scheduleLayoutUpdate(true);
+        });
+        mutationObserver.observe(list, {
+            attributes: true,
+            attributeFilter: [
+                'data-state'
+            ],
+            childList: true,
+            subtree: true
+        });
+        return ()=>{
+            list.removeEventListener('scroll', handleScroll);
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
+            if (null !== animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+                animationFrameRef.current = null;
+            }
+        };
+    }, [
+        scheduleLayoutUpdate
+    ]);
+    const scroll = (direction)=>{
+        const list = listRef.current;
+        if (!list) return;
+        list.scrollBy({
+            left: 'left' === direction ? -list.clientWidth : list.clientWidth,
+            behavior: 'smooth'
+        });
+    };
+    const scrollButtonClass = (0, index_cjs_namespaceObject.cn)('grid size-8 shrink-0 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-30', scrollButtonClassName);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: (0, index_cjs_namespaceObject.cn)('flex w-full min-w-0 items-center gap-1', containerClassName),
+        children: [
+            hasOverflow && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                type: "button",
+                "aria-label": previousButtonLabel,
+                title: previousButtonLabel,
+                disabled: !canScrollLeft,
+                onClick: ()=>scroll('left'),
+                className: scrollButtonClass,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronLeft, {
+                    className: "size-4 rtl:rotate-180"
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TabsList, {
+                ref: listRef,
+                className: (0, index_cjs_namespaceObject.cn)('min-w-0 flex-1 justify-start overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden', className),
+                ...props
+            }),
+            hasOverflow && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                type: "button",
+                "aria-label": nextButtonLabel,
+                title: nextButtonLabel,
+                disabled: !canScrollRight,
+                onClick: ()=>scroll('right'),
+                className: scrollButtonClass,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronRight, {
+                    className: "size-4 rtl:rotate-180"
+                })
+            })
+        ]
+    });
+});
+ScrollableTabsList.displayName = 'ScrollableTabsList';
 const TabsTrigger = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_tabs_namespaceObject.Trigger, {
         ref: ref,
         className: (0, index_cjs_namespaceObject.cn)('inline-flex cursor-pointer items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm', className),
@@ -52,11 +175,13 @@ const TabsContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ c
         ...props
     }));
 TabsContent.displayName = react_tabs_namespaceObject.Content.displayName;
+exports.ScrollableTabsList = __webpack_exports__.ScrollableTabsList;
 exports.Tabs = __webpack_exports__.Tabs;
 exports.TabsContent = __webpack_exports__.TabsContent;
 exports.TabsList = __webpack_exports__.TabsList;
 exports.TabsTrigger = __webpack_exports__.TabsTrigger;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "ScrollableTabsList",
     "Tabs",
     "TabsContent",
     "TabsList",

package/dist/components/ui/tabs.d.ts

@@ -2,6 +2,14 @@ import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as React from 'react';
 declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
 declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface ScrollableTabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> {
+    containerClassName?: string;
+    scrollButtonClassName?: string;
+    previousButtonLabel?: string;
+    nextButtonLabel?: string;
+}
+declare const ScrollableTabsList: React.ForwardRefExoticComponent<ScrollableTabsListProps & React.RefAttributes<HTMLDivElement>>;
 declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+export { ScrollableTabsList, Tabs, TabsContent, TabsList, TabsTrigger };
+export type { ScrollableTabsListProps };

package/dist/components/ui/tabs.js

@@ -1,6 +1,7 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Content, List, Root, Trigger } from "@radix-ui/react-tabs";
-import { forwardRef } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { cn } from "../../lib/index.js";
 const Tabs = Root;
 const TabsList = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(List, {
@@ -9,6 +10,127 @@ const TabsList = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__P
         ...props
     }));
 TabsList.displayName = List.displayName;
+const ScrollableTabsList = /*#__PURE__*/ forwardRef(({ className, containerClassName, scrollButtonClassName, previousButtonLabel = 'Scroll tabs left', nextButtonLabel = 'Scroll tabs right', ...props }, forwardedRef)=>{
+    const listRef = useRef(null);
+    const [hasOverflow, setHasOverflow] = useState(false);
+    const [canScrollLeft, setCanScrollLeft] = useState(false);
+    const [canScrollRight, setCanScrollRight] = useState(false);
+    const animationFrameRef = useRef(null);
+    const revealOnNextFrameRef = useRef(false);
+    useImperativeHandle(forwardedRef, ()=>listRef.current);
+    const updateScrollState = useCallback(()=>{
+        const list = listRef.current;
+        if (!list) return;
+        const maxScrollLeft = list.scrollWidth - list.clientWidth;
+        setHasOverflow(maxScrollLeft > 1);
+        setCanScrollLeft(list.scrollLeft > 1);
+        setCanScrollRight(list.scrollLeft < maxScrollLeft - 1);
+    }, []);
+    const revealActiveTab = useCallback(()=>{
+        const list = listRef.current;
+        const activeTab = list?.querySelector('[role="tab"][data-state="active"]');
+        if (!list || !activeTab) return;
+        const listRect = list.getBoundingClientRect();
+        const activeTabRect = activeTab.getBoundingClientRect();
+        if (activeTabRect.left < listRect.left) list.scrollBy({
+            left: activeTabRect.left - listRect.left,
+            behavior: 'smooth'
+        });
+        else if (activeTabRect.right > listRect.right) list.scrollBy({
+            left: activeTabRect.right - listRect.right,
+            behavior: 'smooth'
+        });
+    }, []);
+    const scheduleLayoutUpdate = useCallback((revealActive = false)=>{
+        revealOnNextFrameRef.current ||= revealActive;
+        if (null !== animationFrameRef.current) return;
+        animationFrameRef.current = requestAnimationFrame(()=>{
+            animationFrameRef.current = null;
+            updateScrollState();
+            if (revealOnNextFrameRef.current) {
+                revealOnNextFrameRef.current = false;
+                revealActiveTab();
+            }
+        });
+    }, [
+        revealActiveTab,
+        updateScrollState
+    ]);
+    useEffect(()=>{
+        const list = listRef.current;
+        if (!list) return;
+        list.scrollLeft = 0;
+        scheduleLayoutUpdate(true);
+        const handleScroll = ()=>scheduleLayoutUpdate();
+        list.addEventListener('scroll', handleScroll);
+        const resizeObserver = new ResizeObserver(()=>scheduleLayoutUpdate(true));
+        resizeObserver.observe(list);
+        const mutationObserver = new MutationObserver((mutations)=>{
+            if (mutations.some((mutation)=>'childList' === mutation.type || 'data-state' === mutation.attributeName)) scheduleLayoutUpdate(true);
+        });
+        mutationObserver.observe(list, {
+            attributes: true,
+            attributeFilter: [
+                'data-state'
+            ],
+            childList: true,
+            subtree: true
+        });
+        return ()=>{
+            list.removeEventListener('scroll', handleScroll);
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
+            if (null !== animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+                animationFrameRef.current = null;
+            }
+        };
+    }, [
+        scheduleLayoutUpdate
+    ]);
+    const scroll = (direction)=>{
+        const list = listRef.current;
+        if (!list) return;
+        list.scrollBy({
+            left: 'left' === direction ? -list.clientWidth : list.clientWidth,
+            behavior: 'smooth'
+        });
+    };
+    const scrollButtonClass = cn('grid size-8 shrink-0 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-30', scrollButtonClassName);
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn('flex w-full min-w-0 items-center gap-1', containerClassName),
+        children: [
+            hasOverflow && /*#__PURE__*/ jsx("button", {
+                type: "button",
+                "aria-label": previousButtonLabel,
+                title: previousButtonLabel,
+                disabled: !canScrollLeft,
+                onClick: ()=>scroll('left'),
+                className: scrollButtonClass,
+                children: /*#__PURE__*/ jsx(ChevronLeft, {
+                    className: "size-4 rtl:rotate-180"
+                })
+            }),
+            /*#__PURE__*/ jsx(TabsList, {
+                ref: listRef,
+                className: cn('min-w-0 flex-1 justify-start overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden', className),
+                ...props
+            }),
+            hasOverflow && /*#__PURE__*/ jsx("button", {
+                type: "button",
+                "aria-label": nextButtonLabel,
+                title: nextButtonLabel,
+                disabled: !canScrollRight,
+                onClick: ()=>scroll('right'),
+                className: scrollButtonClass,
+                children: /*#__PURE__*/ jsx(ChevronRight, {
+                    className: "size-4 rtl:rotate-180"
+                })
+            })
+        ]
+    });
+});
+ScrollableTabsList.displayName = 'ScrollableTabsList';
 const TabsTrigger = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Trigger, {
         ref: ref,
         className: cn('inline-flex cursor-pointer items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm', className),
@@ -21,4 +143,4 @@ const TabsContent = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#
         ...props
     }));
 TabsContent.displayName = Content.displayName;
-export { Tabs, TabsContent, TabsList, TabsTrigger };
+export { ScrollableTabsList, Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/index.cjs

@@ -68,8 +68,8 @@ __webpack_require__.d(__webpack_exports__, {
     FormFieldRenderer: ()=>field_renderer_cjs_namespaceObject.FormFieldRenderer,
     EditableCell: ()=>editable_cell_cjs_namespaceObject.EditableCell,
     PromptEditor: ()=>index_cjs_namespaceObject.PromptEditor,
+    ScrollableTabsList: ()=>tabs_cjs_namespaceObject.ScrollableTabsList,
     Spinner: ()=>spinner_cjs_namespaceObject.Spinner,
-    buttonVariants: ()=>button_cjs_namespaceObject.buttonVariants,
     SheetOverlay: ()=>sheet_cjs_namespaceObject.SheetOverlay,
     AlertDialogPortal: ()=>alert_dialog_cjs_namespaceObject.AlertDialogPortal,
     DropdownMenuGroup: ()=>dropdown_menu_cjs_namespaceObject.DropdownMenuGroup,
@@ -77,6 +77,7 @@ __webpack_require__.d(__webpack_exports__, {
     TabsList: ()=>tabs_cjs_namespaceObject.TabsList,
     ContextMenuItem: ()=>context_menu_cjs_namespaceObject.ContextMenuItem,
     TooltipContent: ()=>tooltip_cjs_namespaceObject.TooltipContent,
+    buttonVariants: ()=>button_cjs_namespaceObject.buttonVariants,
     TableBody: ()=>table_cjs_namespaceObject.TableBody,
     AvatarImage: ()=>avatar_cjs_namespaceObject.AvatarImage,
     RuleBuilder: ()=>rules_engine_cjs_namespaceObject.RuleBuilder,
@@ -456,6 +457,7 @@ exports.RuleBuilder = __webpack_exports__.RuleBuilder;
 exports.RulesEngine = __webpack_exports__.RulesEngine;
 exports.ScrollArea = __webpack_exports__.ScrollArea;
 exports.ScrollBar = __webpack_exports__.ScrollBar;
+exports.ScrollableTabsList = __webpack_exports__.ScrollableTabsList;
 exports.Search = __webpack_exports__.Search;
 exports.SearchWithSuggestions = __webpack_exports__.SearchWithSuggestions;
 exports.Select = __webpack_exports__.Select;
@@ -670,6 +672,7 @@ for(var __rspack_i in __webpack_exports__)if (-1 === [
     "RulesEngine",
     "ScrollArea",
     "ScrollBar",
+    "ScrollableTabsList",
     "Search",
     "SearchWithSuggestions",
     "Select",

package/dist/index.d.ts

@@ -61,7 +61,8 @@ export { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger
 export { HoverCard, HoverCardContent, HoverCardTrigger, } from './components/ui/hover-card';
 export { Alert, AlertDescription, AlertTitle } from './components/ui/alert';
 export { toast, Toaster } from './components/ui/sonner';
-export { Tabs, TabsContent, TabsList, TabsTrigger } from './components/ui/tabs';
+export { ScrollableTabsList, Tabs, TabsContent, TabsList, TabsTrigger, } from './components/ui/tabs';
+export type { ScrollableTabsListProps } from './components/ui/tabs';
 export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from './components/ui/breadcrumb';
 export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from './components/ui/pagination';
 export { Stepper } from './components/ui/stepper';

package/dist/index.js

@@ -42,7 +42,7 @@ import { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "./components/ui/hover-card.js";
 import { Alert, AlertDescription, AlertTitle } from "./components/ui/alert.js";
 import { Toaster, toast } from "./components/ui/sonner.js";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs.js";
+import { ScrollableTabsList, Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs.js";
 import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./components/ui/breadcrumb.js";
 import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./components/ui/pagination.js";
 import { Stepper } from "./components/ui/stepper.js";
@@ -63,4 +63,4 @@ import { ExpressionBuilder, RuleBuilder, RulesEngine } from "./components/forms/
 import { DataFetcher, DataSourceBuilder, DataTransformers, FetchAdapter } from "./components/forms/data-fetcher.js";
 import { analyticsPlugin, auditPlugin, autoSavePlugin, formattingPlugin, validationPlugin, workflowPlugin } from "./components/forms/form-plugins.js";
 import { hasMinMaxStep, hasOptions, isCustomField, isFileField } from "./components/forms/form-schema.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Column, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataFetcher, DataSourceBuilder, DataTable, DataTableColumnHeader, DataTableSelectColumn, DataTransformers, DatePicker, DateTimePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EditableCell, EmptyState, ExpressionBuilder, FetchAdapter, FileUpload, FormDesigner, FormFieldRenderer, FormStateViewer, Grid, HoverCard, HoverCardContent, HoverCardTrigger, Input, Label, MetadataForm, MultiSelect, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, PromptEditor, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Row, RuleBuilder, RulesEngine, ScrollArea, ScrollBar, Search, SearchWithSuggestions, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Slider, Spinner, StatsCard, Stepper, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, tree_view as TreeView, VARIABLE_DRAG_MIME, analyticsPlugin, auditPlugin, autoSavePlugin, badgeVariants, buttonVariants, cn, createEditableColumn, formattingPlugin, hasMinMaxStep, hasOptions, isCustomField, isFileField, spinnerVariants, toast, toggleVariants, validationPlugin, workflowPlugin };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Column, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataFetcher, DataSourceBuilder, DataTable, DataTableColumnHeader, DataTableSelectColumn, DataTransformers, DatePicker, DateTimePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EditableCell, EmptyState, ExpressionBuilder, FetchAdapter, FileUpload, FormDesigner, FormFieldRenderer, FormStateViewer, Grid, HoverCard, HoverCardContent, HoverCardTrigger, Input, Label, MetadataForm, MultiSelect, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, PromptEditor, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Row, RuleBuilder, RulesEngine, ScrollArea, ScrollBar, ScrollableTabsList, Search, SearchWithSuggestions, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Slider, Spinner, StatsCard, Stepper, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, tree_view as TreeView, VARIABLE_DRAG_MIME, analyticsPlugin, auditPlugin, autoSavePlugin, badgeVariants, buttonVariants, cn, createEditableColumn, formattingPlugin, hasMinMaxStep, hasOptions, isCustomField, isFileField, spinnerVariants, toast, toggleVariants, validationPlugin, workflowPlugin };

package/dist/styles.css

@@ -1713,6 +1713,9 @@
   .flex-wrap-reverse {
     flex-wrap: wrap-reverse;
   }
+  .place-items-center {
+    place-items: center;
+  }
   .items-baseline {
     align-items: baseline;
   }
@@ -5931,6 +5934,11 @@
       grid-template-columns: 2fr 3fr 3fr;
     }
   }
+  .rtl\:rotate-180 {
+    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+      rotate: 180deg;
+    }
+  }
   .rtl\:text-right {
     &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
       text-align: right;
@@ -6385,6 +6393,12 @@
       pointer-events: none;
     }
   }
+  .\[\&_svg\]\:size-3 {
+    & svg {
+      width: calc(var(--spacing) * 3);
+      height: calc(var(--spacing) * 3);
+    }
+  }
   .\[\&_svg\]\:size-4 {
     & svg {
       width: calc(var(--spacing) * 4);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-wind",
-  "version": "2.24.0",
+  "version": "2.26.0",
   "description": "UiPath wind design system - A Tailwind CSS based React component library",
   "type": "module",
   "main": "./dist/index.js",