@freightos/freightwind 1.0.0

package/dist/cjs/lib/countryUtils.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCountryInfo = exports.getCountryFlagEmoji = exports.getCountryFlag = void 0;
+/**
+ * Get flag image URL for country code (ISO 3166-1 alpha-2)
+ * Uses Freightos festatic CDN for flag images
+ * @param countryCode Two-letter country code (e.g., 'US', 'GB', 'FR')
+ * @returns Flag image URL or empty string if invalid
+ */
+const getCountryFlag = (countryCode) => {
+    if (!countryCode || countryCode.length !== 2)
+        return '';
+    const lowerCode = countryCode.toLowerCase();
+    // Use Freightos festatic CDN for flag images
+    return `https://festatic.freightos.com/flags/1x1/${lowerCode}.svg`;
+};
+exports.getCountryFlag = getCountryFlag;
+/**
+ * Get flag emoji for country code (ISO 3166-1 alpha-2)
+ * Uses Unicode regional indicator symbols to display flag emojis
+ */
+const getCountryFlagEmoji = (countryCode) => {
+    if (!countryCode || countryCode.length !== 2)
+        return '';
+    const upperCode = countryCode.toUpperCase();
+    // Convert country code to regional indicator symbols (flag emoji)
+    const codePoints = [...upperCode].map(char => 0x1F1E6 + char.charCodeAt(0) - 65);
+    return String.fromCodePoint(...codePoints);
+};
+exports.getCountryFlagEmoji = getCountryFlagEmoji;
+/**
+ * Common country names mapping (ISO 3166-1 alpha-2 codes)
+ */
+const COUNTRY_NAMES = {
+    US: 'United States',
+    GB: 'United Kingdom',
+    CA: 'Canada',
+    FR: 'France',
+    DE: 'Germany',
+    IT: 'Italy',
+    ES: 'Spain',
+    NL: 'Netherlands',
+    BE: 'Belgium',
+    CH: 'Switzerland',
+    AT: 'Austria',
+    SE: 'Sweden',
+    NO: 'Norway',
+    DK: 'Denmark',
+    FI: 'Finland',
+    PL: 'Poland',
+    CZ: 'Czech Republic',
+    IE: 'Ireland',
+    PT: 'Portugal',
+    GR: 'Greece',
+    CN: 'China',
+    JP: 'Japan',
+    KR: 'South Korea',
+    IN: 'India',
+    AU: 'Australia',
+    NZ: 'New Zealand',
+    SG: 'Singapore',
+    HK: 'Hong Kong',
+    TW: 'Taiwan',
+    TH: 'Thailand',
+    MY: 'Malaysia',
+    ID: 'Indonesia',
+    PH: 'Philippines',
+    VN: 'Vietnam',
+    BR: 'Brazil',
+    MX: 'Mexico',
+    AR: 'Argentina',
+    CL: 'Chile',
+    CO: 'Colombia',
+    PE: 'Peru',
+    ZA: 'South Africa',
+    EG: 'Egypt',
+    IL: 'Israel',
+    AE: 'United Arab Emirates',
+    SA: 'Saudi Arabia',
+    TR: 'Turkey',
+    RU: 'Russia',
+    UA: 'Ukraine',
+};
+/**
+ * Get country information including flag, code, and name
+ */
+const getCountryInfo = (countryCode) => {
+    const upperCode = countryCode?.toUpperCase() || '';
+    const flag = (0, exports.getCountryFlag)(upperCode);
+    const name = COUNTRY_NAMES[upperCode] || upperCode;
+    return { flag, code: upperCode, name };
+};
+exports.getCountryInfo = getCountryInfo;

package/dist/cjs/lib/utils.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cn = cn;
+const clsx_1 = require("clsx");
+const tailwind_merge_1 = require("tailwind-merge");
+function cn(...inputs) {
+    return (0, tailwind_merge_1.twMerge)((0, clsx_1.clsx)(inputs));
+}

package/dist/esm/components/accordion.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import * as React from 'react';
+import { IconCaretDown } from '@freightos/icons';
+import { cn } from '../lib/utils';
+const Accordion = AccordionPrimitive.Root;
+const AccordionItem = React.forwardRef(({ className, ...props }, ref) => (_jsx(AccordionPrimitive.Item, { ref: ref, className: cn(className), ...props })));
+AccordionItem.displayName = 'AccordionItem';
+const AccordionTrigger = React.forwardRef(({ className, children, caretPosition = 'end', bottom, ...props }, ref) => {
+    const caretIcon = (_jsx(IconCaretDown, { size: 18, className: "h-6 w-6 shrink-0 transition-transform duration-200" }));
+    return (_jsxs(AccordionPrimitive.Header, { className: "flex flex-col", children: [_jsxs(AccordionPrimitive.Trigger, { ref: ref, className: cn('flex flex-1 cursor-pointer items-center py-4 transition-all [&[data-state=open]>svg]:rotate-180', caretPosition === 'end'
+                    ? 'justify-between pe-fds-lg'
+                    : 'gap-fds-md ps-fds-lg', className), ...props, children: [caretPosition === 'start' && caretIcon, children, caretPosition === 'end' && caretIcon] }), bottom && _jsx("div", { children: bottom })] }));
+});
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsx(AccordionPrimitive.Content, { ref: ref, className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", ...props, children: _jsx("div", { className: cn(className), children: children }) })));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/esm/components/alert.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconCheckCircled, IconClose, IconInfoCircled, IconAlertCircled, IconNegativeCircled } from '@freightos/icons';
+import * as React from 'react';
+import { cn } from '../lib/utils';
+const alertConfig = {
+    info: {
+        icon: IconInfoCircled,
+        borderColor: 'border-l-fds-blue',
+        iconColor: 'text-fds-blue',
+    },
+    success: {
+        icon: IconCheckCircled,
+        borderColor: 'border-l-fds-green',
+        iconColor: 'text-fds-green',
+    },
+    warning: {
+        icon: IconAlertCircled,
+        borderColor: 'border-l-fds-orange',
+        iconColor: 'text-fds-orange',
+    },
+    error: {
+        icon: IconNegativeCircled,
+        borderColor: 'border-l-fds-red',
+        iconColor: 'text-fds-red',
+    },
+};
+export const Alert = ({ type = 'info', message, description, closable = false, onClose, className, }) => {
+    const [visible, setVisible] = React.useState(true);
+    if (!visible)
+        return null;
+    const config = alertConfig[type];
+    const Icon = config.icon;
+    const handleClose = () => {
+        setVisible(false);
+        onClose?.();
+    };
+    return (_jsxs("div", { role: "alert", className: cn('flex items-start gap-fds-sm rounded-[4px] border-l-4 bg-card px-fds-md py-fds-sm shadow-[0_0_10px_0_rgba(35,37,55,0.12)] dark:shadow-[0_0_10px_0_rgba(0,0,0,0.3)]', config.borderColor, className), children: [_jsx(Icon, { size: 18, className: cn('mt-px shrink-0', config.iconColor) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-fds-base font-fds-medium text-foreground", children: message }), description && (_jsx("div", { className: "mt-fds-xs text-fds-sm text-fds-gray-60", children: description }))] }), closable && (_jsx("button", { type: "button", onClick: handleClose, className: "shrink-0 text-fds-gray-40 hover:text-fds-gray-60 transition-colors", "aria-label": "Close alert", children: _jsx(IconClose, { size: 16 }) }))] }));
+};

package/dist/esm/components/aspect-ratio.js

@@ -0,0 +1,3 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+const AspectRatio = AspectRatioPrimitive.Root;
+export { AspectRatio };

package/dist/esm/components/avatar.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/utils';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+const avatarVariants = cva('relative flex shrink-0 overflow-hidden rounded-full', {
+    variants: {
+        size: {
+            xs: 'h-[16px] w-[16px]',
+            sm: 'h-[24px] w-[24px]',
+            md: 'h-[32px] w-[32px]',
+            lg: 'h-[40px] w-[40px]',
+            xl: 'h-[58px] w-[58px]',
+        },
+        bordered: {
+            true: 'border-fds-sm border-fds-gray-20',
+            false: '',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        bordered: false,
+    },
+});
+const Avatar = React.forwardRef(({ className, size = 'md', bordered = false, type = 'default', country, ...props }, ref) => {
+    if (type === 'flag' && country) {
+        const flagUrl = `https://festatic.freightos.com/flags/1x1/${country.toLowerCase()}.svg`;
+        return (_jsx("div", { className: cn(avatarVariants({ size, bordered }), className), children: _jsx("img", { src: flagUrl, alt: country, className: "h-full w-full object-cover" }) }));
+    }
+    return (_jsx(AvatarPrimitive.Root, { ref: ref, className: cn(avatarVariants({ size, bordered }), className), ...props }));
+});
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+const AvatarImage = React.forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Image, { ref: ref, className: cn('aspect-square h-full w-full', className), ...props })));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Fallback, { ref: ref, className: cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className), ...props })));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+export { Avatar, AvatarFallback, AvatarImage };

package/dist/esm/components/badge.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+const badgeVariants = cva("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", {
+    variants: {
+        variant: {
+            default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+            secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+            destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+            outline: "text-foreground",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function Badge({ className, variant, ...props }) {
+    return (_jsx("div", { className: cn(badgeVariants({ variant }), className), ...props }));
+}
+export { Badge, badgeVariants };

package/dist/esm/components/breadcrumb.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { cn } from "../lib/utils";
+const Breadcrumb = React.forwardRef(({ ...props }, ref) => _jsx("nav", { ref: ref, "aria-label": "breadcrumb", ...props }));
+Breadcrumb.displayName = "Breadcrumb";
+const BreadcrumbList = React.forwardRef(({ className, ...props }, ref) => (_jsx("ol", { ref: ref, className: cn("flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5", className), ...props })));
+BreadcrumbList.displayName = "BreadcrumbList";
+const BreadcrumbItem = React.forwardRef(({ className, ...props }, ref) => (_jsx("li", { ref: ref, className: cn("inline-flex items-center gap-1.5", className), ...props })));
+BreadcrumbItem.displayName = "BreadcrumbItem";
+const BreadcrumbLink = React.forwardRef(({ asChild, className, ...props }, ref) => {
+    const Comp = asChild ? Slot : "a";
+    return (_jsx(Comp, { ref: ref, className: cn("transition-colors hover:text-foreground", className), ...props }));
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+const BreadcrumbPage = React.forwardRef(({ className, ...props }, ref) => (_jsx("span", { ref: ref, role: "link", "aria-disabled": "true", "aria-current": "page", className: cn("font-normal text-foreground", className), ...props })));
+BreadcrumbPage.displayName = "BreadcrumbPage";
+const BreadcrumbSeparator = ({ children, className, ...props }) => (_jsx("li", { role: "presentation", "aria-hidden": "true", className: cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className), ...props, children: children ?? _jsx(ChevronRight, {}) }));
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+const BreadcrumbEllipsis = ({ className, ...props }) => (_jsxs("span", { role: "presentation", "aria-hidden": "true", className: cn("flex h-9 w-9 items-center justify-center", className), ...props, children: [_jsx(MoreHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "More" })] }));
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };

package/dist/esm/components/button.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '../lib/utils';
+const buttonVariants = cva('inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--fds-border-radius-md)] font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', {
+    variants: {
+        type: {
+            default: 'bg-fds-blue !text-fds-white hover:bg-fds-blue-40',
+            secondary: 'bg-fds-white dark:bg-background border border-fds-blue !text-fds-blue hover:bg-fds-blue-10 dark:hover:bg-fds-gray-80',
+            tertiary: 'bg-fds-white dark:bg-fds-gray-90 !text-fds-blue hover:bg-fds-blue-10 dark:hover:bg-fds-gray-80',
+            text: 'bg-transparent !text-fds-blue hover:!text-fds-blue-50',
+            danger: 'bg-fds-red hover:bg-fds-red/90 !text-white',
+        },
+        size: {
+            small: 'h-[var(--fds-size-lg)] text-fds-sm',
+            medium: 'h-[var(--fds-size-xl)] text-fds-base',
+            large: 'h-[var(--fds-size-xxl)] text-fds-base',
+        },
+        padding: {
+            default: 'px-fds-lg',
+            small: 'px-fds-md',
+            large: 'px-fds-xl',
+        },
+    },
+    defaultVariants: {
+        type: 'default',
+        size: 'medium',
+        padding: 'default',
+    },
+});
+const Button = React.forwardRef(
+// eslint-disable-next-line unused-imports/no-unused-vars
+({ className, type, size, icon = false, asChild = false, htmlType, ...props }, ref) => {
+    // Determine padding variant based on size, or none if icon
+    const paddingVariant = icon ? undefined : (size === 'small' ? 'small' : size === 'large' ? 'large' : 'default');
+    return (_jsx("button", { type: htmlType, className: cn(buttonVariants({ type, size, padding: paddingVariant }), icon && 'w-[var(--fds-size-xl)] aspect-square', icon && size === 'small' && 'w-[var(--fds-size-lg)]', icon && size === 'large' && 'w-[var(--fds-size-xxl)]', className), ref: ref, ...props }));
+});
+Button.displayName = 'Button';
+export { Button, buttonVariants };

package/dist/esm/components/calendar.js

@@ -0,0 +1,70 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, } from 'lucide-react';
+import * as React from 'react';
+import { DayPicker, getDefaultClassNames } from 'react-day-picker';
+import { buttonVariants } from './button';
+import { cn } from '../lib/utils';
+function Calendar({ className, classNames, showOutsideDays = true, captionLayout = 'label', buttonVariant = 'text', formatters, components, ...props }) {
+    const defaultClassNames = getDefaultClassNames();
+    return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn('group/calendar bg-card p-3 [--cell-size:2rem]', String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, formatters: {
+            formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }),
+            ...formatters,
+        }, classNames: {
+            root: cn('w-fit', defaultClassNames.root),
+            months: cn('flex gap-4 flex-col md:flex-row relative', defaultClassNames.months),
+            month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
+            nav: cn('flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between', defaultClassNames.nav),
+            button_previous: cn(buttonVariants({ type: buttonVariant }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_previous),
+            button_next: cn(buttonVariants({ type: buttonVariant }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_next),
+            month_caption: cn('flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)', defaultClassNames.month_caption),
+            dropdowns: cn('w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5', defaultClassNames.dropdowns),
+            dropdown_root: cn('relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md', defaultClassNames.dropdown_root),
+            dropdown: cn('absolute bg-popover inset-0 opacity-0', defaultClassNames.dropdown),
+            caption_label: cn('select-none font-medium', captionLayout === 'label'
+                ? 'text-sm'
+                : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5', defaultClassNames.caption_label),
+            table: 'w-full border-collapse',
+            weekdays: cn('flex', defaultClassNames.weekdays),
+            weekday: cn('text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none', defaultClassNames.weekday),
+            week: cn('flex w-full mt-2', defaultClassNames.week),
+            week_number_header: cn('select-none w-(--cell-size)', defaultClassNames.week_number_header),
+            week_number: cn('text-[0.8rem] select-none text-muted-foreground', defaultClassNames.week_number),
+            day: cn('relative w-full h-full p-0 text-center group/day aspect-square select-none', defaultClassNames.day),
+            range_start: cn('[&_button]:bg-primary [&_button]:text-primary-foreground [&_button]:rounded-l-md [&_button]:rounded-r-none [&_button]:hover:bg-primary [&_button]:hover:text-primary-foreground', defaultClassNames.range_start),
+            range_middle: cn('[&_button]:bg-fds-blue-10 [&_button]:text-fds-gray [&_button]:rounded-none [&_button]:hover:bg-fds-blue-20 [&_button]:hover:text-fds-gray', defaultClassNames.range_middle),
+            range_end: cn('[&_button]:bg-primary [&_button]:text-primary-foreground [&_button]:rounded-r-md [&_button]:rounded-l-none [&_button]:hover:bg-primary [&_button]:hover:text-primary-foreground', defaultClassNames.range_end),
+            today: cn('bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none', defaultClassNames.today),
+            outside: cn('text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside),
+            disabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),
+            hidden: cn('invisible', defaultClassNames.hidden),
+            ...classNames,
+        }, components: {
+            Root: ({ className, rootRef, ...props }) => {
+                return (_jsx("div", { "data-slot": "calendar", ref: rootRef, className: cn(className), ...props }));
+            },
+            Chevron: ({ className, orientation, ...props }) => {
+                if (orientation === 'left') {
+                    return (_jsx(ChevronLeftIcon, { className: cn('size-4', className), ...props }));
+                }
+                if (orientation === 'right') {
+                    return (_jsx(ChevronRightIcon, { className: cn('size-4', className), ...props }));
+                }
+                return (_jsx(ChevronDownIcon, { className: cn('size-4', className), ...props }));
+            },
+            DayButton: CalendarDayButton,
+            WeekNumber: ({ children, ...props }) => {
+                return (_jsx("td", { ...props, children: _jsx("div", { className: "size-(--cell-size) flex items-center justify-center text-center", children: children }) }));
+            },
+            ...components,
+        }, ...props }));
+}
+function CalendarDayButton({ className, day, modifiers, ...props }) {
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (modifiers.focused)
+            ref.current?.focus();
+    }, [modifiers.focused]);
+    return (_jsx("button", { ref: ref, type: "button", "data-day": day.date.toLocaleDateString(), className: cn('inline-flex items-center justify-center rounded-md text-sm font-normal transition-colors', 'hover:bg-accent hover:text-accent-foreground', 'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring', 'disabled:pointer-events-none disabled:opacity-50', 'h-9 w-9 p-0', 'aria-selected:bg-primary aria-selected:text-primary-foreground aria-selected:hover:bg-primary aria-selected:hover:text-primary-foreground', className), ...props }));
+}
+export { Calendar, CalendarDayButton };

package/dist/esm/components/card.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../lib/utils';
+const Card = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('rounded-lg bg-card p-fds-xl shadow-fds-sm', 'text-card-foreground', className), ...props })));
+Card.displayName = 'Card';
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, "data-slot": "card-header", className: cn('@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 has-[[data-slot=card-action]]:grid-cols-[1fr_auto]', className), ...props })));
+CardHeader.displayName = 'CardHeader';
+const CardAction = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, "data-slot": "card-action", className: cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className), ...props })));
+CardAction.displayName = 'CardAction';
+const CardTitle = React.forwardRef(({ className, size = 'medium', ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn('font-fds-bold leading-none tracking-tight', size === 'small' ? 'text-fds-h5' : 'text-fds-h3', className), ...props }));
+});
+CardTitle.displayName = 'CardTitle';
+const CardContent = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('pt-0', className), ...props })));
+CardContent.displayName = 'CardContent';
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('flex items-center p-6 pt-0', className), ...props })));
+CardFooter.displayName = 'CardFooter';
+export { Card, CardAction, CardContent, CardFooter, CardHeader, CardTitle };

package/dist/esm/components/chart.js

@@ -0,0 +1,135 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+import { cn } from "../lib/utils";
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" };
+const ChartContext = React.createContext(null);
+function useChart() {
+    const context = React.useContext(ChartContext);
+    if (!context) {
+        throw new Error("useChart must be used within a <ChartContainer />");
+    }
+    return context;
+}
+const ChartContainer = React.forwardRef(({ id, className, children, config, ...props }, ref) => {
+    const uniqueId = React.useId();
+    const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+    return (_jsx(ChartContext.Provider, { value: { config }, children: _jsxs("div", { "data-chart": chartId, ref: ref, className: cn("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none", className), ...props, children: [_jsx(ChartStyle, { id: chartId, config: config }), _jsx(RechartsPrimitive.ResponsiveContainer, { children: children })] }) }));
+});
+ChartContainer.displayName = "Chart";
+const ChartStyle = ({ id, config }) => {
+    const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
+    if (!colorConfig.length) {
+        return null;
+    }
+    return (_jsx("style", { dangerouslySetInnerHTML: {
+            __html: Object.entries(THEMES)
+                .map(([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+                .map(([key, itemConfig]) => {
+                const color = itemConfig.theme?.[theme] ||
+                    itemConfig.color;
+                return color ? `  --color-${key}: ${color};` : null;
+            })
+                .join("\n")}
+}
+`)
+                .join("\n"),
+        } }));
+};
+const ChartTooltip = RechartsPrimitive.Tooltip;
+const ChartTooltipContent = React.forwardRef(({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }, ref) => {
+    const { config } = useChart();
+    const tooltipLabel = React.useMemo(() => {
+        if (hideLabel || !payload?.length) {
+            return null;
+        }
+        const [item] = payload;
+        const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        const value = !labelKey && typeof label === "string"
+            ? config[label]?.label || label
+            : itemConfig?.label;
+        if (labelFormatter) {
+            return (_jsx("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) }));
+        }
+        if (!value) {
+            return null;
+        }
+        return _jsx("div", { className: cn("font-medium", labelClassName), children: value });
+    }, [
+        label,
+        labelFormatter,
+        payload,
+        hideLabel,
+        labelClassName,
+        config,
+        labelKey,
+    ]);
+    if (!active || !payload?.length) {
+        return null;
+    }
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+    return (_jsxs("div", { ref: ref, className: cn("grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", className), children: [!nestLabel ? tooltipLabel : null, _jsx("div", { className: "grid gap-1.5", children: payload
+                    .filter((item) => item.type !== "none")
+                    .map((item, index) => {
+                    const key = `${nameKey || item.name || item.dataKey || "value"}`;
+                    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+                    const indicatorColor = color || item.payload?.fill || item.color;
+                    return (_jsx("div", { className: cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center"), children: formatter && item?.value !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (_jsxs(_Fragment, { children: [itemConfig?.icon ? (_jsx(itemConfig.icon, {})) : (!hideIndicator && (_jsx("div", { className: cn("shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]", {
+                                        "h-2.5 w-2.5": indicator === "dot",
+                                        "w-1": indicator === "line",
+                                        "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                                        "my-0.5": nestLabel && indicator === "dashed",
+                                    }), style: {
+                                        "--color-bg": indicatorColor,
+                                        "--color-border": indicatorColor,
+                                    } }))), _jsxs("div", { className: cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"), children: [_jsxs("div", { className: "grid gap-1.5", children: [nestLabel ? tooltipLabel : null, _jsx("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })] }), item.value && (_jsx("span", { className: "font-mono font-medium tabular-nums text-foreground", children: item.value.toLocaleString() }))] })] })) }, item.dataKey));
+                }) })] }));
+});
+ChartTooltipContent.displayName = "ChartTooltip";
+const ChartLegend = RechartsPrimitive.Legend;
+const ChartLegendContent = React.forwardRef(({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
+    const { config } = useChart();
+    if (!payload?.length) {
+        return null;
+    }
+    return (_jsx("div", { ref: ref, className: cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className), children: payload
+            .filter((item) => item.type !== "none")
+            .map((item) => {
+            const key = `${nameKey || item.dataKey || "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            return (_jsxs("div", { className: cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"), children: [itemConfig?.icon && !hideIcon ? (_jsx(itemConfig.icon, {})) : (_jsx("div", { className: "h-2 w-2 shrink-0 rounded-[2px]", style: {
+                            backgroundColor: item.color,
+                        } })), itemConfig?.label] }, item.value));
+        }) }));
+});
+ChartLegendContent.displayName = "ChartLegend";
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(config, payload, key) {
+    if (typeof payload !== "object" || payload === null) {
+        return undefined;
+    }
+    const payloadPayload = "payload" in payload &&
+        typeof payload.payload === "object" &&
+        payload.payload !== null
+        ? payload.payload
+        : undefined;
+    let configLabelKey = key;
+    if (key in payload &&
+        typeof payload[key] === "string") {
+        configLabelKey = payload[key];
+    }
+    else if (payloadPayload &&
+        key in payloadPayload &&
+        typeof payloadPayload[key] === "string") {
+        configLabelKey = payloadPayload[key];
+    }
+    return configLabelKey in config
+        ? config[configLabelKey]
+        : config[key];
+}
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };

package/dist/esm/components/checkbox.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as React from 'react';
+import { IconCheck } from '@freightos/icons';
+import { cn } from '../lib/utils';
+const Checkbox = React.forwardRef(({ className, ...props }, ref) => (_jsx(CheckboxPrimitive.Root, { ref: ref, className: cn('peer h-4 w-4 shrink-0 rounded-fds-md border border-fds-gray-40 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground', className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { className: cn('flex items-center justify-center text-current'), children: _jsx(IconCheck, { className: "h-4 w-4" }) }) })));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+export { Checkbox };

package/dist/esm/components/chip.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { IconClose } from '@freightos/icons';
+import { cn } from '../lib/utils';
+const chipVariants = cva('inline-flex items-center rounded-full h-5 px-2.5 py-0.5 !text-fds-sm font-fds-regular transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', {
+    variants: {
+        type: {
+            default: 'bg-fds-purple-10 text-fds-purple',
+            neutral: 'bg-fds-gray-20 text-fds-gray-80',
+            secondary: 'bg-fds-blue-10 text-fds-blue-40',
+            warning: 'bg-fds-yellow-20 text-fds-yellow-40',
+            positive: 'bg-fds-green-20 text-fds-green-40',
+        },
+    },
+    defaultVariants: {
+        type: 'default',
+    },
+});
+function Chip({ className, type, onClose, children, ...props }) {
+    return (_jsxs("div", { className: cn(chipVariants({ type }), className), ...props, children: [children, onClose && (_jsx("span", { onClick: onClose, className: "ms-fds-sm inline-flex cursor-pointer items-center hover:opacity-70", children: _jsx(IconClose, { size: "10px" }) }))] }));
+}
+export { Chip, chipVariants };

package/dist/esm/components/collapsible.js

@@ -0,0 +1,5 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+const Collapsible = CollapsiblePrimitive.Root;
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/dist/esm/components/command.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
+import { Search } from 'lucide-react';
+import { cn } from '../lib/utils';
+import { Dialog, DialogContent } from './dialog';
+const Command = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive, { ref: ref, className: cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', className), ...props })));
+Command.displayName = CommandPrimitive.displayName;
+const CommandDialog = ({ children, ...props }) => {
+    return (_jsx(Dialog, { ...props, children: _jsx(DialogContent, { className: "overflow-hidden p-0 shadow-lg", children: _jsx(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children: children }) }) }));
+};
+const CommandInput = React.forwardRef(({ className, ...props }, ref) => (_jsxs("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [_jsx(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }), _jsx(CommandPrimitive.Input, { ref: ref, className: cn('flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', className), ...props })] })));
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+const CommandList = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.List, { ref: ref, className: cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className), ...props })));
+CommandList.displayName = CommandPrimitive.List.displayName;
+const CommandEmpty = React.forwardRef((props, ref) => (_jsx(CommandPrimitive.Empty, { ref: ref, className: "py-6 text-center text-sm", ...props })));
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+const CommandGroup = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.Group, { ref: ref, className: cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', className), ...props })));
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.Separator, { ref: ref, className: cn('-mx-1 h-px bg-border', className), ...props })));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+const CommandItem = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.Item, { ref: ref, className: cn("relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-fds-blue-10 hover:text-foreground data-[disabled=true]:pointer-events-none data-[selected='true']:bg-fds-blue-10 data-[selected=true]:text-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", className), ...props })));
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+const CommandShortcut = ({ className, ...props }) => {
+    return (_jsx("span", { className: cn('ml-auto text-xs tracking-widest text-muted-foreground', className), ...props }));
+};
+CommandShortcut.displayName = 'CommandShortcut';
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };