@freightos/freightwind 1.0.0

package/dist/esm/components/rich-text-editor.js

@@ -0,0 +1,145 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from '../lib/utils';
+import BulletList from '@tiptap/extension-bullet-list';
+import ListItem from '@tiptap/extension-list-item';
+import OrderedList from '@tiptap/extension-ordered-list';
+import Link from '@tiptap/extension-link';
+import UnderlineExtension from '@tiptap/extension-underline';
+import Placeholder from '@tiptap/extension-placeholder';
+import { EditorContent, useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { Bold, Italic, Link as LinkIcon, List, ListOrdered, Underline, } from 'lucide-react';
+import { useState } from 'react';
+import { Input } from './input';
+import { Button } from './button';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+// Custom Link extension to prevent clicks
+const createCustomLink = (onLinkClick) => {
+    return Link.extend({
+        addProseMirrorPlugins() {
+            return [
+                new Plugin({
+                    key: new PluginKey('handleLinkClick'),
+                    props: {
+                        handleClick(_view, _pos, event) {
+                            const link = event.target?.closest('a');
+                            if (link) {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                const href = link.getAttribute('href');
+                                if (href) {
+                                    onLinkClick(href);
+                                }
+                                return true;
+                            }
+                            return false;
+                        },
+                    },
+                }),
+            ];
+        },
+    }).configure({
+        openOnClick: false,
+        HTMLAttributes: {
+            class: 'text-primary underline cursor-pointer',
+            rel: 'noopener noreferrer nofollow',
+        },
+    });
+};
+const MenuBar = ({ editor, linkUrl, setLinkUrl, linkPopoverOpen, setLinkPopoverOpen, isEditingExistingLink, setIsEditingExistingLink, handleSetLink, handleRemoveLink, }) => {
+    if (!editor)
+        return null;
+    return (_jsxs("div", { className: "flex items-center gap-fds-xs border-b border-border bg-fds-gray-10 px-fds-md py-fds-md dark:bg-card", children: [_jsx("button", { onClick: () => editor.chain().focus().toggleBold().run(), type: "button", className: "cursor-pointer rounded p-1 hover:bg-fds-gray-20 dark:hover:bg-fds-gray-80", children: _jsx(Bold, { className: cn('h-4 w-4 text-foreground', editor.isActive('bold') && 'text-primary') }) }), _jsx("button", { onClick: () => editor.chain().focus().toggleItalic().run(), type: "button", className: "cursor-pointer rounded p-1 hover:bg-fds-gray-20 dark:hover:bg-fds-gray-80", children: _jsx(Italic, { className: cn('h-4 w-4 text-foreground', editor.isActive('italic') && 'text-primary') }) }), _jsx("button", { onClick: () => editor.chain().focus().toggleUnderline().run(), type: "button", className: "cursor-pointer rounded p-1 hover:bg-fds-gray-20 dark:hover:bg-fds-gray-80", children: _jsx(Underline, { className: cn('h-4 w-4 text-foreground', editor.isActive('underline') && 'text-primary') }) }), _jsx("div", { className: "mx-fds-xs h-4 w-px bg-fds-gray-20 dark:bg-fds-gray-80" }), _jsx("button", { onClick: (e) => {
+                    e.preventDefault();
+                    editor.chain().focus().toggleBulletList().run();
+                }, type: "button", className: "cursor-pointer rounded p-1 hover:bg-fds-gray-20 dark:hover:bg-fds-gray-80", children: _jsx(List, { className: cn('h-4 w-4 text-foreground', editor.isActive('bulletList') && 'text-primary') }) }), _jsx("button", { onClick: (e) => {
+                    e.preventDefault();
+                    editor.chain().focus().toggleOrderedList().run();
+                }, type: "button", className: "cursor-pointer rounded p-1 hover:bg-fds-gray-20 dark:hover:bg-fds-gray-80", children: _jsx(ListOrdered, { className: cn('h-4 w-4 text-foreground', editor.isActive('orderedList') && 'text-primary') }) }), _jsxs(Popover, { open: linkPopoverOpen, onOpenChange: setLinkPopoverOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "cursor-pointer rounded p-1 hover:bg-fds-gray-20 dark:hover:bg-fds-gray-80", onClick: () => {
+                                if (editor.isActive('link')) {
+                                    setLinkUrl(editor.getAttributes('link').href);
+                                }
+                            }, children: _jsx(LinkIcon, { className: cn('h-4 w-4 text-foreground', editor.isActive('link') && 'text-primary') }) }) }), _jsx(PopoverContent, { className: "w-[300px]", children: _jsx("div", { className: "flex flex-col gap-fds-sm", children: isEditingExistingLink ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-fds-sm font-fds-semibold", children: "Visit URL:" }), _jsx("a", { href: linkUrl, target: "_blank", rel: "noopener noreferrer", className: "truncate text-fds-sm text-primary hover:underline", children: linkUrl }), _jsxs("div", { className: "flex gap-fds-xs", children: [_jsx(Button, { size: "small", onClick: () => {
+                                                    setIsEditingExistingLink(false);
+                                                }, className: "flex-1", children: "Edit" }), _jsx(Button, { size: "small", type: "text", onClick: handleRemoveLink, className: "flex-1", children: "Remove" })] })] })) : editor.isActive('link') ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-fds-sm font-fds-semibold", children: "Edit Link" }), _jsx(Input, { value: linkUrl, onChange: (e) => setLinkUrl(e.target.value), placeholder: "Enter URL", onKeyDown: (e) => {
+                                            if (e.key === 'Enter') {
+                                                e.preventDefault();
+                                                handleSetLink();
+                                            }
+                                        }, autoFocus: true }), _jsxs("div", { className: "flex gap-fds-xs", children: [_jsx(Button, { size: "small", onClick: handleSetLink, className: "flex-1", children: "Update" }), _jsx(Button, { size: "small", type: "text", onClick: handleRemoveLink, className: "flex-1", children: "Remove" })] })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-fds-sm font-fds-semibold", children: "Add Link" }), _jsx(Input, { value: linkUrl, onChange: (e) => setLinkUrl(e.target.value), placeholder: "Enter URL", onKeyDown: (e) => {
+                                            if (e.key === 'Enter') {
+                                                e.preventDefault();
+                                                handleSetLink();
+                                            }
+                                        }, autoFocus: true }), _jsx(Button, { size: "small", onClick: handleSetLink, children: "Add Link" })] })) }) })] })] }));
+};
+export const RichTextEditor = ({ value = '', onChange, placeholder = 'Type your message...', className, }) => {
+    const [linkPopoverOpen, setLinkPopoverOpen] = useState(false);
+    const [linkUrl, setLinkUrl] = useState('');
+    const [isEditingExistingLink, setIsEditingExistingLink] = useState(false);
+    const handleLinkClick = (href) => {
+        setLinkUrl(href);
+        setIsEditingExistingLink(true);
+        setLinkPopoverOpen(true);
+    };
+    const CustomLink = createCustomLink(handleLinkClick);
+    const editor = useEditor({
+        immediatelyRender: false,
+        extensions: [
+            StarterKit.configure({
+                bulletList: false,
+                orderedList: false,
+                listItem: false,
+            }),
+            ListItem,
+            BulletList.configure({
+                HTMLAttributes: {
+                    class: 'list-disc list-outside ml-4',
+                },
+            }),
+            OrderedList.configure({
+                HTMLAttributes: {
+                    class: 'list-decimal list-outside ml-4',
+                },
+            }),
+            UnderlineExtension,
+            CustomLink,
+            Placeholder.configure({
+                placeholder,
+            }),
+        ],
+        content: value,
+        onUpdate: ({ editor }) => {
+            onChange?.(editor.getHTML());
+        },
+        editorProps: {
+            attributes: {
+                class: cn('prose prose-sm focus:outline-none min-h-[80px] px-fds-lg py-fds-sm prose-p:my-1 prose-ul:my-1 prose-ol:my-1 text-fds-sm bg-white dark:bg-black dark:text-white', className),
+            },
+        },
+    });
+    const handleSetLink = () => {
+        if (linkUrl && editor) {
+            // Ensure URL has protocol
+            let formattedUrl = linkUrl;
+            if (!/^https?:\/\//i.test(linkUrl)) {
+                formattedUrl = `https://${linkUrl}`;
+            }
+            editor.chain().focus().setLink({ href: formattedUrl }).run();
+            setLinkUrl('');
+            setIsEditingExistingLink(false);
+            setLinkPopoverOpen(false);
+        }
+    };
+    const handleRemoveLink = () => {
+        if (editor) {
+            editor.chain().focus().unsetLink().run();
+            setLinkUrl('');
+            setIsEditingExistingLink(false);
+            setLinkPopoverOpen(false);
+        }
+    };
+    return (_jsxs("div", { className: "w-full", children: [_jsx(MenuBar, { editor: editor, linkUrl: linkUrl, setLinkUrl: setLinkUrl, linkPopoverOpen: linkPopoverOpen, setLinkPopoverOpen: setLinkPopoverOpen, isEditingExistingLink: isEditingExistingLink, setIsEditingExistingLink: setIsEditingExistingLink, handleSetLink: handleSetLink, handleRemoveLink: handleRemoveLink }), _jsx(EditorContent, { editor: editor, placeholder: placeholder })] }));
+};

package/dist/esm/components/route.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../lib/utils';
+const Route = React.forwardRef(({ className, type = 'point-to-point', start, end, ...props }, ref) => {
+    if (type === 'point-to-point') {
+        return (_jsxs("div", { ref: ref, className: cn('flex items-center gap-fds-sm', className), ...props, children: [start, _jsxs("div", { className: "relative flex items-center", children: [_jsx("div", { className: "h-[5px] w-[5px] rounded-full bg-foreground" }), _jsx("div", { className: "h-px w-[22px] bg-foreground" }), _jsx("div", { className: "h-[5px] w-[5px] rounded-full bg-foreground" })] }), end] }));
+    }
+    return null;
+});
+Route.displayName = 'Route';
+export { Route };

package/dist/esm/components/scroll-area.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { cn } from "../lib/utils";
+const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(ScrollAreaPrimitive.Root, { ref: ref, className: cn("relative overflow-hidden", className), ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children: children }), _jsx(ScrollBar, {}), _jsx(ScrollAreaPrimitive.Corner, {})] })));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => (_jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, { ref: ref, orientation: orientation, className: cn("flex touch-none select-none transition-colors", orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]", orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]", className), ...props, children: _jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" }) })));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+export { ScrollArea, ScrollBar };

package/dist/esm/components/select.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { cn } from '../lib/utils';
+import { IconCaretDown, IconCaretUp } from '@freightos/icons';
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn('flex h-[32px] w-full items-center justify-between rounded-fds-md border border-input-border bg-input py-2 pl-3 pr-2 text-sm transition-[color,box-shadow] focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=open]:border-[#2075bd] data-[placeholder]:text-muted-foreground data-[state=open]:shadow-[0_0_0_2px_var(--fds-color-primary-blue-20)] [&>span]:line-clamp-1 [&[data-state=open]>span[data-radix-select-icon]>svg]:rotate-180', className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(IconCaretDown, { className: "transition-transform duration-200" }) })] })));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollUpButton, { ref: ref, className: cn('flex cursor-default items-center justify-center py-1', className), ...props, children: _jsx(IconCaretUp, {}) })));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollDownButton, { ref: ref, className: cn('flex cursor-default items-center justify-center py-1', className), ...props, children: _jsx(IconCaretDown, {}) })));
+SelectScrollDownButton.displayName =
+    SelectPrimitive.ScrollDownButton.displayName;
+const SelectContent = React.forwardRef(({ className, children, position = 'popper', ...props }, ref) => (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, className: cn('relative z-[9999] max-h-[--radix-select-content-available-height] min-w-[8rem] w-max origin-[--radix-select-content-transform-origin] overflow-y-auto overflow-x-hidden rounded-fds-md bg-popover text-popover-foreground shadow-fds-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn('w-full', position === 'popper' &&
+                    'h-[var(--radix-select-trigger-height)] min-w-[var(--radix-select-trigger-width)]'), children: children }), _jsx(SelectScrollDownButton, {})] }) })));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, className: cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className), ...props })));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsx(SelectPrimitive.Item, { ref: ref, className: cn('relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[disabled]:opacity-50', className), ...props, children: _jsx(SelectPrimitive.ItemText, { asChild: true, children: _jsx("div", { className: "flex w-full flex-1 items-center", children: children }) }) })));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Separator, { ref: ref, className: cn('-mx-1 my-1 h-px bg-muted', className), ...props })));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };

package/dist/esm/components/separator.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as React from 'react';
+import { cn } from '../lib/utils';
+const Separator = React.forwardRef(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (_jsx(SeparatorPrimitive.Root, { ref: ref, decorative: decorative, orientation: orientation, className: cn('shrink-0 bg-fds-gray-20', orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]', className), ...props })));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+export { Separator };

package/dist/esm/components/sheet.js

@@ -0,0 +1,197 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { cva } from 'class-variance-authority';
+import { X } from 'lucide-react';
+import { cn } from '../lib/utils';
+const SheetContext = React.createContext({
+    level: 0,
+    parentSheetWidth: undefined,
+    registerNestedSheet: () => { },
+    unregisterNestedSheet: () => { },
+    hasNestedSheetOpen: false,
+    nestedSheetWidth: undefined,
+});
+export const useSheetContext = () => React.useContext(SheetContext);
+// Sheet wrapper that provides context
+const SheetProvider = ({ children, width }) => {
+    const parentContext = useSheetContext();
+    const [nestedSheetCount, setNestedSheetCount] = React.useState(0);
+    const registerNestedSheet = React.useCallback(() => {
+        setNestedSheetCount((count) => count + 1);
+    }, []);
+    const unregisterNestedSheet = React.useCallback(() => {
+        setNestedSheetCount((count) => Math.max(0, count - 1));
+    }, []);
+    const contextValue = React.useMemo(() => ({
+        level: parentContext.level + 1,
+        parentSheetWidth: width,
+        registerNestedSheet,
+        unregisterNestedSheet,
+        hasNestedSheetOpen: nestedSheetCount > 0,
+    }), [
+        parentContext.level,
+        width,
+        registerNestedSheet,
+        unregisterNestedSheet,
+        nestedSheetCount,
+    ]);
+    return (_jsx(SheetContext.Provider, { value: contextValue, children: children }));
+};
+const SheetRoot = ({ open, width, ...props }) => {
+    const parentContext = useSheetContext();
+    // Register/unregister when open state changes
+    React.useEffect(() => {
+        if (open && parentContext.level > 0) {
+            parentContext.registerNestedSheet(width);
+            return () => {
+                parentContext.unregisterNestedSheet();
+            };
+        }
+        return undefined;
+    }, [open, parentContext, width]);
+    return _jsx(SheetPrimitive.Root, { open: open, ...props });
+};
+const Sheet = SheetRoot;
+const SheetTrigger = SheetPrimitive.Trigger;
+const SheetClose = SheetPrimitive.Close;
+const SheetPortal = SheetPrimitive.Portal;
+const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(SheetPrimitive.Overlay, { className: cn('fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', className), ...props, ref: ref })));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+const sheetVariants = cva('fixed bg-background shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out bg-card flex flex-col', {
+    variants: {
+        side: {
+            top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+            bottom: 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+            left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+            right: 'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+        },
+        zIndex: {
+            default: 'z-50',
+            high: 'z-[1100]',
+            pushed: 'z-[1150]', // Between high (1100) and nested overlay (1199)
+            nested: 'z-[1200]',
+        },
+    },
+    defaultVariants: {
+        side: 'right',
+        zIndex: 'default',
+    },
+});
+const SheetContent = React.forwardRef(({ side = 'right', zIndex = 'default', className, overlayClassName, hideCloseButton = false, sheetWidth, children, ...props }, ref) => {
+    // Read the parent context BEFORE potentially wrapping with SheetProvider
+    const parentContext = useSheetContext();
+    // Track nested sheets for THIS sheet using local state
+    const [localNestedSheetCount, setLocalNestedSheetCount] = React.useState(0);
+    const [localNestedSheetWidth, setLocalNestedSheetWidth] = React.useState();
+    const closeTimeoutRef = React.useRef(null);
+    const registerLocalNestedSheet = React.useCallback((width) => {
+        // Clear any pending close timeout when opening a new nested sheet
+        if (closeTimeoutRef.current) {
+            clearTimeout(closeTimeoutRef.current);
+            closeTimeoutRef.current = null;
+        }
+        setLocalNestedSheetCount((count) => count + 1);
+        if (width) {
+            setLocalNestedSheetWidth(width);
+        }
+    }, []);
+    const unregisterLocalNestedSheet = React.useCallback(() => {
+        setLocalNestedSheetCount((count) => Math.max(0, count - 1));
+        setLocalNestedSheetWidth(undefined);
+        // Clear any existing timeout
+        if (closeTimeoutRef.current) {
+            clearTimeout(closeTimeoutRef.current);
+            closeTimeoutRef.current = null;
+        }
+    }, []);
+    // Cleanup timeout on unmount
+    React.useEffect(() => {
+        return () => {
+            if (closeTimeoutRef.current) {
+                clearTimeout(closeTimeoutRef.current);
+            }
+        };
+    }, []);
+    // This sheet should be pushed if IT has nested sheets open
+    const shouldBePushed = localNestedSheetCount > 0 && sheetWidth;
+    // Create a custom context value that uses THIS sheet's local nested sheet tracking
+    const customContextValue = React.useMemo(() => ({
+        level: parentContext.level + 1,
+        parentSheetWidth: sheetWidth,
+        registerNestedSheet: registerLocalNestedSheet,
+        unregisterNestedSheet: unregisterLocalNestedSheet,
+        hasNestedSheetOpen: localNestedSheetCount > 0,
+        nestedSheetWidth: localNestedSheetWidth,
+    }), [
+        parentContext.level,
+        sheetWidth,
+        registerLocalNestedSheet,
+        unregisterLocalNestedSheet,
+        localNestedSheetCount,
+        localNestedSheetWidth,
+    ]);
+    // Wrap children with context provider if sheetWidth is provided
+    const wrappedChildren = sheetWidth ? (_jsx(SheetContext.Provider, { value: customContextValue, children: children })) : (children);
+    // Determine z-index based on nesting level AND pushed state
+    // A sheet is nested if its parent level >= 1 (meaning it's inside another sheet)
+    let effectiveZIndex = parentContext.level >= 1 ? 'nested' : zIndex;
+    const isNestedSheet = parentContext.level >= 1;
+    // When pushed, keep the same z-index (it will be under nested sheet's overlay anyway)
+    // Don't change z-index when pushed - the nested overlay (z-1199) will be above this (z-1100)
+    // Calculate overlay z-index
+    const overlayZIndex = effectiveZIndex === 'nested'
+        ? 1199
+        : effectiveZIndex === 'high'
+            ? 1099
+            : 50;
+    // Animation timing classes
+    const animationClasses = 'data-[state=closed]:duration-300 data-[state=open]:duration-500';
+    // Calculate transform for pushed state
+    // Strategy: During close, parent slides back at same speed as nested slides out
+    // Both travel in the positive direction (to the right) so they stick together
+    const transformStyle = shouldBePushed && localNestedSheetWidth
+        ? {
+            // Opening: animate to pushed position (move left)
+            transform: `translate3d(-${localNestedSheetWidth}, 0, 0)`,
+            transition: 'transform 500ms linear',
+        }
+        : {
+            // Closing: animate back to center (move right)
+            transform: 'translate3d(0, 0, 0)',
+            transition: 'transform 300ms linear',
+        };
+    const inlineStyle = {
+        ...transformStyle,
+        // Force GPU acceleration for both sheets to ensure smooth, synchronized animations
+        willChange: 'transform',
+        // For nested sheets, override animation timing to linear
+        ...(isNestedSheet && {
+            animationTimingFunction: 'linear',
+        }),
+    };
+    // Debug logging
+    // console.log('📊 Sheet render:', {
+    //   level: parentContext.level,
+    //   hasNestedSheetOpen: parentContext.hasNestedSheetOpen,
+    //   parentSheetWidth: parentContext.parentSheetWidth,
+    //   shouldBePushed,
+    //   effectiveZIndex,
+    //   overlayZIndex,
+    //   sheetWidth,
+    // });
+    return (_jsxs(SheetPortal, { children: [!shouldBePushed && !localNestedSheetWidth && (_jsx(SheetOverlay, { className: overlayClassName, style: { zIndex: overlayZIndex } })), _jsxs(SheetPrimitive.Content, { ref: ref, className: cn(sheetVariants({ side, zIndex: effectiveZIndex }), animationClasses, shouldBePushed && 'pointer-events-none', className), style: inlineStyle, ...props, children: [wrappedChildren, !hideCloseButton && (_jsxs(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [_jsx(X, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
+});
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+const SheetHeader = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-shrink-0 flex-col space-y-2 px-fds-xl py-fds-xl', className), ...props }));
+SheetHeader.displayName = 'SheetHeader';
+const SheetBody = ({ className, ...props }) => (_jsx("div", { className: cn('flex-1 overflow-y-auto px-fds-xl', className), ...props }));
+SheetBody.displayName = 'SheetBody';
+const SheetFooter = ({ className, ...props }) => (_jsx("div", { className: cn('flex-shrink-0 border-t border-fds-gray-20 px-fds-xl py-fds-xl', className), ...props }));
+SheetFooter.displayName = 'SheetFooter';
+const SheetTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(SheetPrimitive.Title, { ref: ref, className: cn('text-fds-h3 font-fds-bold', className), ...props })));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+const SheetDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(SheetPrimitive.Description, { ref: ref, className: cn('text-sm text-muted-foreground', className), ...props })));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+export { Sheet, SheetProvider, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetBody, SheetFooter, SheetTitle, SheetDescription, };

package/dist/esm/components/skeleton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+function Skeleton({ className, ...props }) {
+    return (_jsx("div", { className: cn("animate-pulse rounded-md bg-muted", className), ...props }));
+}
+export { Skeleton };

package/dist/esm/components/slider.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/utils';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import * as React from 'react';
+const Slider = React.forwardRef(({ className, ...props }, ref) => {
+    const value = props.value || props.defaultValue || [0];
+    const thumbCount = Array.isArray(value) ? value.length : 1;
+    return (_jsxs(SliderPrimitive.Root, { ref: ref, className: cn('relative flex w-full touch-none select-none items-center', className), ...props, children: [_jsx(SliderPrimitive.Track, { className: "relative h-1 w-full grow overflow-hidden rounded-full bg-fds-gray-20", children: _jsx(SliderPrimitive.Range, { className: "absolute h-full bg-fds-blue" }) }), Array.from({ length: thumbCount }).map((_, i) => (_jsx(SliderPrimitive.Thumb, { className: "block h-4 w-4 rounded-full border-2 border-fds-blue bg-fds-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fds-blue-20 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" }, i)))] }));
+});
+Slider.displayName = SliderPrimitive.Root.displayName;
+export { Slider };

package/dist/esm/components/sonner.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CircleCheck, Info, LoaderCircle, OctagonX, TriangleAlert, } from "lucide-react";
+import { useTheme } from "next-themes";
+import { Toaster as Sonner } from "sonner";
+const Toaster = ({ ...props }) => {
+    const { theme = "system" } = useTheme();
+    return (_jsx(Sonner, { theme: theme, className: "toaster group", icons: {
+            success: _jsx(CircleCheck, { className: "h-4 w-4" }),
+            info: _jsx(Info, { className: "h-4 w-4" }),
+            warning: _jsx(TriangleAlert, { className: "h-4 w-4" }),
+            error: _jsx(OctagonX, { className: "h-4 w-4" }),
+            loading: _jsx(LoaderCircle, { className: "h-4 w-4 animate-spin" }),
+        }, toastOptions: {
+            classNames: {
+                toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+                description: "group-[.toast]:text-muted-foreground",
+                actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+                cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+            },
+        }, ...props }));
+};
+export { Toaster };

package/dist/esm/components/spinner.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconLoading } from '@freightos/icons';
+import { cn } from '../lib/utils';
+import { cva } from 'class-variance-authority';
+const spinnerVariants = cva('text-[var(--fds-color-primary-blue)] animate-spin inline-flex items-center justify-center align-middle', {
+    variants: {
+        size: {
+            tiny: 'size-3', // 12px
+            small: 'size-4', // 16px
+            medium: 'size-6', // 24px
+            large: 'size-8', // 32px
+        },
+    },
+    defaultVariants: {
+        size: 'medium',
+    },
+});
+function Spinner({ className, size, ...props }) {
+    return (_jsx("span", { role: "status", "aria-label": "Loading", className: cn(spinnerVariants({ size, className })), ...props, children: _jsx(IconLoading, { className: "w-full h-full" }) }));
+}
+export { Spinner, spinnerVariants };

package/dist/esm/components/stepper.js

@@ -0,0 +1,57 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils";
+const StepperContext = React.createContext(null);
+const useStepper = () => {
+    const context = React.useContext(StepperContext);
+    if (!context) {
+        throw new Error("Stepper components must be used within a Stepper");
+    }
+    return context;
+};
+const Stepper = React.forwardRef(({ className, defaultValue = 1, value, orientation = "horizontal", children, ...props }, ref) => {
+    const currentValue = value ?? defaultValue;
+    return (_jsx(StepperContext.Provider, { value: { value: currentValue, orientation }, children: _jsx("div", { ref: ref, "data-orientation": orientation, className: cn("group/stepper flex w-full", orientation === "horizontal" ? "flex-row items-start" : "flex-col", className), ...props, children: children }) }));
+});
+Stepper.displayName = "Stepper";
+const StepperItemContext = React.createContext(null);
+const useStepperItem = () => {
+    const context = React.useContext(StepperItemContext);
+    if (!context) {
+        throw new Error("StepperItem components must be used within a StepperItem");
+    }
+    return context;
+};
+const StepperItem = React.forwardRef(({ className, step, children, ...props }, ref) => {
+    const { value } = useStepper();
+    const isActive = step === value;
+    const isCompleted = step < value;
+    return (_jsx(StepperItemContext.Provider, { value: { step, isActive, isCompleted }, children: _jsx("div", { ref: ref, "data-state": isActive ? "active" : isCompleted ? "completed" : "inactive", className: cn("relative flex items-center", className), ...props, children: children }) }));
+});
+StepperItem.displayName = "StepperItem";
+const StepperTrigger = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("flex items-center gap-2", className), ...props, children: children }));
+});
+StepperTrigger.displayName = "StepperTrigger";
+const StepperIndicator = React.forwardRef(({ className, children, ...props }, ref) => {
+    const { isActive, isCompleted, step } = useStepperItem();
+    return (_jsx("div", { ref: ref, className: cn("flex shrink-0 items-center justify-center rounded-full text-fds-xs transition-colors relative z-10", "h-[18px] w-[18px] font-fds-extrabold", isCompleted && "bg-fds-blue-20 text-white", isActive && "bg-fds-blue-20 text-white border-[0.5px] border-white shadow-[0_0_0_2px] shadow-fds-blue-20", !isActive && !isCompleted && "bg-fds-gray-10 text-fds-gray-60", className), ...props, children: (isActive || isCompleted) && (children || step) }));
+});
+StepperIndicator.displayName = "StepperIndicator";
+const StepperTitle = React.forwardRef(({ className, ...props }, ref) => {
+    const { isActive, isCompleted } = useStepperItem();
+    return (_jsx("p", { ref: ref, className: cn("!text-fds-xs transition-colors", isActive && "font-fds-semibold text-foreground", isCompleted && "font-fds-regular text-foreground", !isActive && !isCompleted && "text-fds-gray-50", className), ...props }));
+});
+StepperTitle.displayName = "StepperTitle";
+const StepperDescription = React.forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("p", { ref: ref, className: cn("text-muted-foreground text-sm", className), ...props }));
+});
+StepperDescription.displayName = "StepperDescription";
+const StepperSeparator = React.forwardRef(({ className, ...props }, ref) => {
+    const { orientation } = useStepper();
+    const { isCompleted } = useStepperItem();
+    return (_jsx("div", { ref: ref, className: cn("shrink-0 transition-colors", isCompleted ? "bg-fds-blue-20" : "bg-fds-gray-10", orientation === "horizontal" ? "h-[2px] w-full" : "h-full w-[2px]", className), ...props }));
+});
+StepperSeparator.displayName = "StepperSeparator";
+export { Stepper, StepperItem, StepperTrigger, StepperIndicator, StepperTitle, StepperDescription, StepperSeparator, };

package/dist/esm/components/steps.js

@@ -0,0 +1,80 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from '../lib/utils';
+import { IconCaretDown, IconCheck } from '@freightos/icons';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+const StepGroupContext = React.createContext({
+    isInsideGroup: false,
+});
+const StepsContainer = ({ children, className, }) => {
+    return _jsx("div", { className: cn('flex flex-col', className), children: children });
+};
+StepsContainer.displayName = 'StepsContainer';
+const StepGroup = ({ icon, title, children, className, showLineAbove = false, showLineBelow = false, lineAboveCompleted = false, lineBelowCompleted = false, defaultOpen = true, }) => {
+    const [isOpen, setIsOpen] = React.useState(defaultOpen);
+    const hasChildren = React.Children.count(children) > 0;
+    return (_jsx(StepGroupContext.Provider, { value: { isInsideGroup: true }, children: _jsxs("div", { className: cn('flex flex-col', className), children: [showLineAbove && (_jsx("div", { className: "relative flex h-4 gap-fds-md overflow-hidden", children: _jsx("div", { className: "relative flex w-4 flex-shrink-0 justify-center", children: _jsx("div", { className: cn('absolute bottom-0 left-[7px] top-0 w-0 border-l-2', lineAboveCompleted
+                                ? 'border-fds-blue-20'
+                                : 'border-fds-gray-10') }) }) })), _jsxs("div", { className: "relative flex items-center gap-fds-md", children: [_jsxs("div", { className: "relative flex w-4 flex-shrink-0 flex-col items-center", children: [_jsx("div", { className: "relative z-10 flex h-6 w-6 items-center justify-center rounded-full bg-fds-blue-10 text-fds-gray-50 ring-4 ring-white dark:ring-transparent", children: icon }), hasChildren && isOpen && (_jsx("div", { className: cn('absolute bottom-[-8px] left-[7px] top-6 w-0 border-l-2', lineBelowCompleted
+                                        ? 'border-fds-blue-20'
+                                        : 'border-fds-gray-10') })), !isOpen && showLineBelow && (_jsx("div", { className: cn('absolute bottom-[-24px] left-[7px] top-6 w-0 border-l-2', lineBelowCompleted
+                                        ? 'border-fds-blue-20'
+                                        : 'border-fds-gray-10') }))] }), _jsxs("button", { type: "button", onClick: () => setIsOpen(!isOpen), className: "flex flex-1 items-center justify-between py-fds-xs", children: [_jsx("span", { className: "text-fds-h6 font-fds-bold", children: title }), hasChildren && (_jsx(IconCaretDown, { size: 18, className: cn('text-fds-gray-50 transition-transform duration-200', isOpen && 'rotate-180') }))] })] }), _jsx("div", { className: cn('grid transition-[grid-template-rows] duration-300 ease-in-out', isOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'), children: _jsx("div", { className: "overflow-hidden", children: children }) })] }) }));
+};
+StepGroup.displayName = 'StepGroup';
+const StepSubGroup = ({ children, label, className, lineColor = 'gray', }) => {
+    const borderClass = lineColor === 'blue' ? 'border-fds-blue-20' : 'border-fds-gray-10';
+    return (_jsxs("div", { className: cn('relative', className), children: [_jsxs("div", { className: "relative flex gap-fds-md", children: [_jsx("div", { className: "relative w-4 flex-shrink-0", children: _jsx("div", { className: cn('absolute bottom-0 left-[7px] top-0 w-0 border-l-2', borderClass) }) }), _jsx("div", { className: "flex-1 border-t border-dashed border-border" })] }), children, _jsxs("div", { className: "relative flex gap-fds-md", children: [_jsx("div", { className: "relative w-4 flex-shrink-0", children: _jsx("div", { className: cn('absolute bottom-0 left-[7px] top-0 w-0 border-l-2', borderClass) }) }), _jsx("div", { className: "flex-1 border-t border-dashed border-border" })] }), label && (_jsx("div", { className: "absolute right-0 top-1/2 -translate-y-1/2", children: label }))] }));
+};
+StepSubGroup.displayName = 'StepSubGroup';
+/* -----------------------------------------------------------------------------
+ * Step - Individual step item
+ * -------------------------------------------------------------------------- */
+const stepIndicatorVariants = cva('flex items-center justify-center rounded-full', {
+    variants: {
+        status: {
+            completed: 'h-[16px] w-[16px] bg-fds-blue text-white',
+            active: 'h-[16px] w-[16px] border-2 border-fds-blue bg-white dark:bg-transparent',
+            pending: 'h-[16px] w-[16px] border-2 border-dashed border-fds-gray-30 bg-white dark:bg-transparent',
+        },
+    },
+    defaultVariants: {
+        status: 'pending',
+    },
+});
+const Step = ({ status = 'pending', showLine = true, progressReached = false, nextStepCompleted = false, children, className, meta, }) => {
+    const isCompleted = status === 'completed';
+    const { isInsideGroup } = React.useContext(StepGroupContext);
+    // Visual status: show as completed if progress has reached this step
+    const visuallyCompleted = isCompleted || progressReached;
+    const visualStatus = visuallyCompleted ? 'completed' : status;
+    // Line colors: blue if progress has reached this step or beyond
+    const lineAboveColor = visuallyCompleted
+        ? 'border-fds-blue-20'
+        : 'border-fds-gray-10';
+    const lineBelowColor = nextStepCompleted
+        ? 'border-fds-blue-20'
+        : 'border-fds-gray-10';
+    return (_jsxs("div", { className: cn('flex flex-col', className), children: [isInsideGroup && (_jsxs("div", { className: "relative flex h-3 gap-fds-md", children: [_jsx("div", { className: cn('absolute bottom-0 left-[7px] top-0 w-0 border-l-2', lineAboveColor) }), _jsx("div", { className: "w-4 flex-shrink-0" }), _jsx("div", { className: "flex-1" })] })), _jsxs("div", { className: "relative flex items-center gap-fds-md", children: [isInsideGroup && (_jsx("div", { className: cn('absolute bottom-1/2 left-[7px] top-0 w-0 border-l-2', lineAboveColor) })), showLine && (_jsx("div", { className: cn('absolute bottom-0 left-[7px] top-1/2 w-0 border-l-2', lineBelowColor) })), _jsx("div", { className: "relative z-10 flex w-4 flex-shrink-0 justify-center bg-white py-2 dark:bg-transparent", children: visualStatus === 'pending' ? (_jsx("div", { className: "h-[11px] w-[11px] rounded-full border-[1.5px] border-dashed border-fds-gray-30 bg-card" })) : (_jsx("div", { className: stepIndicatorVariants({ status: visualStatus }), children: visuallyCompleted && _jsx(IconCheck, { size: 10 }) })) }), _jsxs("div", { className: "flex flex-1 justify-between", children: [_jsx("div", { className: "flex-1", children: children }), meta && _jsx("div", { className: "ml-fds-sm", children: meta })] })] }), showLine && (_jsxs("div", { className: "relative flex gap-fds-md pb-1", children: [_jsx("div", { className: cn('absolute bottom-0 left-[7px] top-0 w-0 border-l-2', lineBelowColor) }), _jsx("div", { className: "w-4 flex-shrink-0" }), _jsx("div", { className: "flex-1" })] }))] }));
+};
+Step.displayName = 'Step';
+const StepTitle = ({ children, className }) => (_jsx("div", { className: cn('font-fds-semibold', className), children: children }));
+StepTitle.displayName = 'StepTitle';
+const StepDescription = ({ location, estimatedDate, actualDate, children, className, }) => {
+    if (children) {
+        return _jsx("div", { className: cn('', className), children: children });
+    }
+    return (_jsxs("div", { className: cn('flex items-center gap-fds-xs', className), children: [location && (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-fds-semibold", children: location }), _jsx("span", { className: "h-[4px] w-[4px] rounded-full bg-fds-gray-20" })] })), actualDate ? (_jsxs(_Fragment, { children: [estimatedDate && (_jsx("span", { className: "line-through", children: estimatedDate })), _jsx("span", { className: "text-fds-red", children: actualDate })] })) : estimatedDate ? (_jsx("span", { children: estimatedDate })) : (_jsx("span", { children: "TBD" }))] }));
+};
+StepDescription.displayName = 'StepDescription';
+const StepMeta = ({ children, className }) => (_jsx("div", { className: cn('flex items-center gap-fds-xs font-fds-semibold text-fds-gray-60', className), children: children }));
+StepMeta.displayName = 'StepMeta';
+/* -----------------------------------------------------------------------------
+ * Legacy exports for compatibility
+ * -------------------------------------------------------------------------- */
+const Steps = StepsContainer;
+const StepsAccordion = StepsContainer;
+const StepIndicator = () => null; // No longer needed - indicator is built into Step
+const StepContent = ({ children, className }) => _jsx("div", { className: className, children: children });
+export { Step, StepContent, StepDescription, StepGroup, StepIndicator, stepIndicatorVariants, StepMeta, Steps, StepsAccordion, StepsContainer, StepSubGroup, StepTitle, };