@freightos/freightwind 1.0.0

package/dist/cjs/components/chart.js

@@ -0,0 +1,176 @@
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChartStyle = exports.ChartLegendContent = exports.ChartLegend = exports.ChartTooltipContent = exports.ChartTooltip = exports.ChartContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const RechartsPrimitive = __importStar(require("recharts"));
+const utils_1 = require("../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 ((0, jsx_runtime_1.jsx)(ChartContext.Provider, { value: { config }, children: (0, jsx_runtime_1.jsxs)("div", { "data-chart": chartId, ref: ref, className: (0, utils_1.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: [(0, jsx_runtime_1.jsx)(ChartStyle, { id: chartId, config: config }), (0, jsx_runtime_1.jsx)(RechartsPrimitive.ResponsiveContainer, { children: children })] }) }));
+});
+exports.ChartContainer = ChartContainer;
+ChartContainer.displayName = "Chart";
+const ChartStyle = ({ id, config }) => {
+    const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
+    if (!colorConfig.length) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.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"),
+        } }));
+};
+exports.ChartStyle = ChartStyle;
+const ChartTooltip = RechartsPrimitive.Tooltip;
+exports.ChartTooltip = ChartTooltip;
+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 ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("font-medium", labelClassName), children: labelFormatter(value, payload) }));
+        }
+        if (!value) {
+            return null;
+        }
+        return (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.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 ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, utils_1.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, (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.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)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [itemConfig?.icon ? ((0, jsx_runtime_1.jsx)(itemConfig.icon, {})) : (!hideIndicator && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.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,
+                                    } }))), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"), children: [(0, jsx_runtime_1.jsxs)("div", { className: "grid gap-1.5", children: [nestLabel ? tooltipLabel : null, (0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })] }), item.value && ((0, jsx_runtime_1.jsx)("span", { className: "font-mono font-medium tabular-nums text-foreground", children: item.value.toLocaleString() }))] })] })) }, item.dataKey));
+                }) })] }));
+});
+exports.ChartTooltipContent = ChartTooltipContent;
+ChartTooltipContent.displayName = "ChartTooltip";
+const ChartLegend = RechartsPrimitive.Legend;
+exports.ChartLegend = ChartLegend;
+const ChartLegendContent = React.forwardRef(({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
+    const { config } = useChart();
+    if (!payload?.length) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, utils_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"), children: [itemConfig?.icon && !hideIcon ? ((0, jsx_runtime_1.jsx)(itemConfig.icon, {})) : ((0, jsx_runtime_1.jsx)("div", { className: "h-2 w-2 shrink-0 rounded-[2px]", style: {
+                            backgroundColor: item.color,
+                        } })), itemConfig?.label] }, item.value));
+        }) }));
+});
+exports.ChartLegendContent = ChartLegendContent;
+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];
+}

package/dist/cjs/components/checkbox.js

@@ -0,0 +1,44 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CheckboxPrimitive = __importStar(require("@radix-ui/react-checkbox"));
+const React = __importStar(require("react"));
+const icons_1 = require("@freightos/icons");
+const utils_1 = require("../lib/utils");
+const Checkbox = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(CheckboxPrimitive.Root, { ref: ref, className: (0, utils_1.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: (0, jsx_runtime_1.jsx)(CheckboxPrimitive.Indicator, { className: (0, utils_1.cn)('flex items-center justify-center text-current'), children: (0, jsx_runtime_1.jsx)(icons_1.IconCheck, { className: "h-4 w-4" }) }) })));
+exports.Checkbox = Checkbox;
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;

package/dist/cjs/components/chip.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chipVariants = void 0;
+exports.Chip = Chip;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const class_variance_authority_1 = require("class-variance-authority");
+const icons_1 = require("@freightos/icons");
+const utils_1 = require("../lib/utils");
+const chipVariants = (0, class_variance_authority_1.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',
+    },
+});
+exports.chipVariants = chipVariants;
+function Chip({ className, type, onClose, children, ...props }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)(chipVariants({ type }), className), ...props, children: [children, onClose && ((0, jsx_runtime_1.jsx)("span", { onClick: onClose, className: "ms-fds-sm inline-flex cursor-pointer items-center hover:opacity-70", children: (0, jsx_runtime_1.jsx)(icons_1.IconClose, { size: "10px" }) }))] }));
+}

package/dist/cjs/components/collapsible.js

@@ -0,0 +1,43 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsibleContent = exports.CollapsibleTrigger = exports.Collapsible = void 0;
+const CollapsiblePrimitive = __importStar(require("@radix-ui/react-collapsible"));
+const Collapsible = CollapsiblePrimitive.Root;
+exports.Collapsible = Collapsible;
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+exports.CollapsibleTrigger = CollapsibleTrigger;
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+exports.CollapsibleContent = CollapsibleContent;

package/dist/cjs/components/command.js

@@ -0,0 +1,73 @@
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommandSeparator = exports.CommandShortcut = exports.CommandItem = exports.CommandGroup = exports.CommandEmpty = exports.CommandList = exports.CommandInput = exports.CommandDialog = exports.Command = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const cmdk_1 = require("cmdk");
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../lib/utils");
+const dialog_1 = require("./dialog");
+const Command = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(cmdk_1.Command, { ref: ref, className: (0, utils_1.cn)('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', className), ...props })));
+exports.Command = Command;
+Command.displayName = cmdk_1.Command.displayName;
+const CommandDialog = ({ children, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(dialog_1.Dialog, { ...props, children: (0, jsx_runtime_1.jsx)(dialog_1.DialogContent, { className: "overflow-hidden p-0 shadow-lg", children: (0, jsx_runtime_1.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 }) }) }));
+};
+exports.CommandDialog = CommandDialog;
+const CommandInput = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }), (0, jsx_runtime_1.jsx)(cmdk_1.Command.Input, { ref: ref, className: (0, utils_1.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 })] })));
+exports.CommandInput = CommandInput;
+CommandInput.displayName = cmdk_1.Command.Input.displayName;
+const CommandList = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(cmdk_1.Command.List, { ref: ref, className: (0, utils_1.cn)('max-h-[300px] overflow-y-auto overflow-x-hidden', className), ...props })));
+exports.CommandList = CommandList;
+CommandList.displayName = cmdk_1.Command.List.displayName;
+const CommandEmpty = React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)(cmdk_1.Command.Empty, { ref: ref, className: "py-6 text-center text-sm", ...props })));
+exports.CommandEmpty = CommandEmpty;
+CommandEmpty.displayName = cmdk_1.Command.Empty.displayName;
+const CommandGroup = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(cmdk_1.Command.Group, { ref: ref, className: (0, utils_1.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 })));
+exports.CommandGroup = CommandGroup;
+CommandGroup.displayName = cmdk_1.Command.Group.displayName;
+const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(cmdk_1.Command.Separator, { ref: ref, className: (0, utils_1.cn)('-mx-1 h-px bg-border', className), ...props })));
+exports.CommandSeparator = CommandSeparator;
+CommandSeparator.displayName = cmdk_1.Command.Separator.displayName;
+const CommandItem = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(cmdk_1.Command.Item, { ref: ref, className: (0, utils_1.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 })));
+exports.CommandItem = CommandItem;
+CommandItem.displayName = cmdk_1.Command.Item.displayName;
+const CommandShortcut = ({ className, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('ml-auto text-xs tracking-widest text-muted-foreground', className), ...props }));
+};
+exports.CommandShortcut = CommandShortcut;
+CommandShortcut.displayName = 'CommandShortcut';

package/dist/cjs/components/context-menu.js

@@ -0,0 +1,83 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContextMenuRadioGroup = exports.ContextMenuSubTrigger = exports.ContextMenuSubContent = exports.ContextMenuSub = exports.ContextMenuPortal = exports.ContextMenuGroup = exports.ContextMenuShortcut = exports.ContextMenuSeparator = exports.ContextMenuLabel = exports.ContextMenuRadioItem = exports.ContextMenuCheckboxItem = exports.ContextMenuItem = exports.ContextMenuContent = exports.ContextMenuTrigger = exports.ContextMenu = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const ContextMenuPrimitive = __importStar(require("@radix-ui/react-context-menu"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../lib/utils");
+const ContextMenu = ContextMenuPrimitive.Root;
+exports.ContextMenu = ContextMenu;
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+exports.ContextMenuTrigger = ContextMenuTrigger;
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+exports.ContextMenuGroup = ContextMenuGroup;
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
+exports.ContextMenuPortal = ContextMenuPortal;
+const ContextMenuSub = ContextMenuPrimitive.Sub;
+exports.ContextMenuSub = ContextMenuSub;
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+exports.ContextMenuRadioGroup = ContextMenuRadioGroup;
+const ContextMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => ((0, jsx_runtime_1.jsxs)(ContextMenuPrimitive.SubTrigger, { ref: ref, className: (0, utils_1.cn)("flex 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-[state=open]:bg-accent data-[state=open]:text-accent-foreground", inset && "pl-8", className), ...props, children: [children, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "ml-auto h-4 w-4" })] })));
+exports.ContextMenuSubTrigger = ContextMenuSubTrigger;
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+const ContextMenuSubContent = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(ContextMenuPrimitive.SubContent, { ref: ref, className: (0, utils_1.cn)("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-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 origin-[--radix-context-menu-content-transform-origin]", className), ...props })));
+exports.ContextMenuSubContent = ContextMenuSubContent;
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+const ContextMenuContent = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(ContextMenuPrimitive.Portal, { children: (0, jsx_runtime_1.jsx)(ContextMenuPrimitive.Content, { ref: ref, className: (0, utils_1.cn)("z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 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 origin-[--radix-context-menu-content-transform-origin]", className), ...props }) })));
+exports.ContextMenuContent = ContextMenuContent;
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+const ContextMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => ((0, jsx_runtime_1.jsx)(ContextMenuPrimitive.Item, { ref: ref, className: (0, utils_1.cn)("relative flex 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-[disabled]:opacity-50", inset && "pl-8", className), ...props })));
+exports.ContextMenuItem = ContextMenuItem;
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+const ContextMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => ((0, jsx_runtime_1.jsxs)(ContextMenuPrimitive.CheckboxItem, { ref: ref, className: (0, utils_1.cn)("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), checked: checked, ...props, children: [(0, jsx_runtime_1.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: (0, jsx_runtime_1.jsx)(ContextMenuPrimitive.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-4 w-4" }) }) }), children] })));
+exports.ContextMenuCheckboxItem = ContextMenuCheckboxItem;
+ContextMenuCheckboxItem.displayName =
+    ContextMenuPrimitive.CheckboxItem.displayName;
+const ContextMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => ((0, jsx_runtime_1.jsxs)(ContextMenuPrimitive.RadioItem, { ref: ref, className: (0, utils_1.cn)("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [(0, jsx_runtime_1.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: (0, jsx_runtime_1.jsx)(ContextMenuPrimitive.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(lucide_react_1.Circle, { className: "h-2 w-2 fill-current" }) }) }), children] })));
+exports.ContextMenuRadioItem = ContextMenuRadioItem;
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+const ContextMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => ((0, jsx_runtime_1.jsx)(ContextMenuPrimitive.Label, { ref: ref, className: (0, utils_1.cn)("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className), ...props })));
+exports.ContextMenuLabel = ContextMenuLabel;
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+const ContextMenuSeparator = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(ContextMenuPrimitive.Separator, { ref: ref, className: (0, utils_1.cn)("-mx-1 my-1 h-px bg-border", className), ...props })));
+exports.ContextMenuSeparator = ContextMenuSeparator;
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+const ContextMenuShortcut = ({ className, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)("ml-auto text-xs tracking-widest text-muted-foreground", className), ...props }));
+};
+exports.ContextMenuShortcut = ContextMenuShortcut;
+ContextMenuShortcut.displayName = "ContextMenuShortcut";

package/dist/cjs/components/country-select.js

@@ -0,0 +1,155 @@
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CountrySelect = exports.COUNTRIES = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../lib/utils");
+const countryUtils_1 = require("../lib/countryUtils");
+const icons_1 = require("@freightos/icons");
+const React = __importStar(require("react"));
+// Common countries list - can be extended or replaced via props
+exports.COUNTRIES = [
+    { code: 'US', name: 'United States' },
+    { code: 'CN', name: 'China' },
+    { code: 'GB', name: 'United Kingdom' },
+    { code: 'CA', name: 'Canada' },
+    { code: 'DE', name: 'Germany' },
+    { code: 'FR', name: 'France' },
+    { code: 'IT', name: 'Italy' },
+    { code: 'ES', name: 'Spain' },
+    { code: 'NL', name: 'Netherlands' },
+    { code: 'BE', name: 'Belgium' },
+    { code: 'CH', name: 'Switzerland' },
+    { code: 'AT', name: 'Austria' },
+    { code: 'SE', name: 'Sweden' },
+    { code: 'NO', name: 'Norway' },
+    { code: 'DK', name: 'Denmark' },
+    { code: 'FI', name: 'Finland' },
+    { code: 'PL', name: 'Poland' },
+    { code: 'CZ', name: 'Czech Republic' },
+    { code: 'IE', name: 'Ireland' },
+    { code: 'PT', name: 'Portugal' },
+    { code: 'GR', name: 'Greece' },
+    { code: 'JP', name: 'Japan' },
+    { code: 'KR', name: 'South Korea' },
+    { code: 'IN', name: 'India' },
+    { code: 'AU', name: 'Australia' },
+    { code: 'NZ', name: 'New Zealand' },
+    { code: 'SG', name: 'Singapore' },
+    { code: 'HK', name: 'Hong Kong' },
+    { code: 'TW', name: 'Taiwan' },
+    { code: 'TH', name: 'Thailand' },
+    { code: 'MY', name: 'Malaysia' },
+    { code: 'ID', name: 'Indonesia' },
+    { code: 'PH', name: 'Philippines' },
+    { code: 'VN', name: 'Vietnam' },
+    { code: 'BR', name: 'Brazil' },
+    { code: 'MX', name: 'Mexico' },
+    { code: 'AR', name: 'Argentina' },
+    { code: 'CL', name: 'Chile' },
+    { code: 'CO', name: 'Colombia' },
+    { code: 'PE', name: 'Peru' },
+    { code: 'ZA', name: 'South Africa' },
+    { code: 'EG', name: 'Egypt' },
+    { code: 'IL', name: 'Israel' },
+    { code: 'AE', name: 'United Arab Emirates' },
+    { code: 'SA', name: 'Saudi Arabia' },
+    { code: 'TR', name: 'Turkey' },
+    { code: 'RU', name: 'Russia' },
+    { code: 'UA', name: 'Ukraine' },
+];
+const CountrySelect = ({ value, onChange, placeholder = 'Select country', mostUsedCountries = ['US', 'CN'], countries = exports.COUNTRIES, className, disabled = false, }) => {
+    const [open, setOpen] = React.useState(false);
+    const [search, setSearch] = React.useState('');
+    const containerRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    // Get selected country
+    const selectedCountry = countries.find((c) => c.code === value);
+    // Filter countries based on search
+    const filteredCountries = React.useMemo(() => {
+        const searchLower = search.toLowerCase();
+        const filtered = countries.filter((country) => country.name.toLowerCase().includes(searchLower) ||
+            country.code.toLowerCase().includes(searchLower));
+        // Sort: most used first, then alphabetically
+        return filtered.sort((a, b) => {
+            const aIsMostUsed = mostUsedCountries.includes(a.code);
+            const bIsMostUsed = mostUsedCountries.includes(b.code);
+            if (aIsMostUsed && !bIsMostUsed)
+                return -1;
+            if (!aIsMostUsed && bIsMostUsed)
+                return 1;
+            return a.name.localeCompare(b.name);
+        });
+    }, [countries, search, mostUsedCountries]);
+    // Close on click outside
+    React.useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (containerRef.current &&
+                !containerRef.current.contains(e.target)) {
+                setOpen(false);
+                setSearch('');
+            }
+        };
+        if (open) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [open]);
+    const handleSelect = (country) => {
+        onChange?.(country.code);
+        setOpen(false);
+        setSearch('');
+    };
+    const handleTriggerClick = () => {
+        if (!disabled) {
+            setOpen(!open);
+            if (!open) {
+                setTimeout(() => inputRef.current?.focus(), 0);
+            }
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: (0, utils_1.cn)('relative', className), children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: handleTriggerClick, disabled: disabled, className: (0, utils_1.cn)('flex h-[32px] w-full items-center gap-fds-sm rounded-fds-md border border-input-border bg-input px-fds-sm text-fds-base outline-none transition-[color,box-shadow]', open &&
+                    'border-[#2075bd] shadow-[0_0_0_2px_var(--fds-color-primary-blue-20)]', disabled && 'cursor-not-allowed opacity-50'), children: [selectedCountry ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { src: (0, countryUtils_1.getCountryFlag)(selectedCountry.code), alt: selectedCountry.code, className: "h-4 w-4 shrink-0 rounded-full object-cover" }), (0, jsx_runtime_1.jsx)("span", { className: "flex-1 truncate text-left", children: selectedCountry.name })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "flex-1 text-left text-muted-foreground", children: placeholder })), (0, jsx_runtime_1.jsx)(icons_1.IconCaretDown, { size: 16, className: (0, utils_1.cn)('shrink-0 text-fds-gray-60 transition-transform', open && 'rotate-180') })] }), open && ((0, jsx_runtime_1.jsxs)("div", { className: "absolute top-full z-50 mt-fds-xs w-full rounded-fds-md border border-border bg-popover shadow-lg", children: [(0, jsx_runtime_1.jsx)("div", { className: "border-b border-border p-fds-xs", children: (0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "text", value: search, onChange: (e) => setSearch(e.target.value), placeholder: "Search country...", className: "h-[28px] w-full rounded-fds-sm border border-input-border bg-input px-fds-sm text-fds-sm outline-none focus:border-[#2075bd] focus:shadow-[0_0_0_2px_var(--fds-color-primary-blue-20)]" }) }), (0, jsx_runtime_1.jsx)("div", { className: "max-h-[210px] overflow-y-auto p-fds-xs", children: filteredCountries.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "px-fds-sm py-fds-md text-center text-fds-sm text-muted-foreground", children: "No countries found" })) : (filteredCountries.map((country, index) => {
+                            const isSelected = country.code === value;
+                            const isMostUsed = mostUsedCountries.includes(country.code);
+                            const isLastMostUsed = isMostUsed &&
+                                !search &&
+                                index === mostUsedCountries.length - 1 &&
+                                filteredCountries.length > mostUsedCountries.length;
+                            return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { onClick: () => handleSelect(country), className: (0, utils_1.cn)('flex cursor-pointer items-center gap-fds-sm rounded-fds-sm px-fds-sm py-fds-xs hover:bg-accent', isSelected && 'bg-accent'), children: [(0, jsx_runtime_1.jsx)("img", { src: (0, countryUtils_1.getCountryFlag)(country.code), alt: country.code, className: "h-6 w-6 shrink-0 rounded-full object-cover" }), (0, jsx_runtime_1.jsx)("span", { className: "flex-1 truncate text-fds-base", children: country.name }), isSelected && ((0, jsx_runtime_1.jsx)(icons_1.IconCheck, { size: 16, className: "shrink-0 text-fds-blue" }))] }), isLastMostUsed && ((0, jsx_runtime_1.jsx)("div", { className: "my-fds-xs h-px bg-border" }))] }, country.code));
+                        })) })] }))] }));
+};
+exports.CountrySelect = CountrySelect;