@freightos/freightwind 1.0.0 → 1.1.1

package/dist/cjs/components/pop-confirm.js

@@ -0,0 +1,86 @@
+"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.PopConfirm = PopConfirm;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PopoverPrimitive = __importStar(require("@radix-ui/react-popover"));
+const React = __importStar(require("react"));
+const button_1 = require("./button");
+const icon_utils_1 = require("../lib/icon-utils");
+function resolvePlacement(placement) {
+    const [sideRaw, alignRaw] = placement.split('-');
+    const align = alignRaw ?? 'center';
+    const isRtl = typeof document !== 'undefined' && document.documentElement.dir === 'rtl';
+    const resolveLogical = (value) => (value === 'start') !== isRtl ? 'left' : 'right';
+    const side = sideRaw === 'top' || sideRaw === 'bottom'
+        ? sideRaw
+        : resolveLogical(sideRaw);
+    const radixAlign = align === 'center'
+        ? 'center'
+        : isRtl
+            ? align === 'start' ? 'end' : 'start'
+            : align;
+    return { side, align: radixAlign };
+}
+const ARROW_EDGE_INSET = 10;
+function PopConfirm({ title, onConfirm, onCancel, placement = 'top', children, slotProps, }) {
+    const [open, setOpen] = React.useState(false);
+    const { side, align } = resolvePlacement(placement);
+    const triggerRef = React.useRef(null);
+    const [alignOffset, setAlignOffset] = React.useState(0);
+    React.useEffect(() => {
+        if (align === 'center' || !triggerRef.current) {
+            setAlignOffset(0);
+            return;
+        }
+        const isHorizontal = side === 'top' || side === 'bottom';
+        const triggerSize = isHorizontal
+            ? triggerRef.current.offsetWidth
+            : triggerRef.current.offsetHeight;
+        setAlignOffset(ARROW_EDGE_INSET - triggerSize / 2);
+    }, [align, side]);
+    function handleConfirm() {
+        onConfirm();
+        setOpen(false);
+    }
+    function handleCancel() {
+        onCancel?.();
+        setOpen(false);
+    }
+    const iconName = slotProps?.icon?.name ?? 'risk';
+    const IconComp = icon_utils_1.iconMap[iconName];
+    return ((0, jsx_runtime_1.jsxs)(PopoverPrimitive.Root, { open: open, onOpenChange: setOpen, children: [(0, jsx_runtime_1.jsx)(PopoverPrimitive.Trigger, { asChild: true, ref: triggerRef, children: children }), (0, jsx_runtime_1.jsx)(PopoverPrimitive.Portal, { children: (0, jsx_runtime_1.jsxs)(PopoverPrimitive.Content, { side: side, align: align, alignOffset: alignOffset, sideOffset: 8, className: "z-[1300] w-[246px] rounded-fds-lg bg-white p-fds-lg shadow-fds-md origin-[--radix-popover-content-transform-origin] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-fds-xs", children: [IconComp && (0, jsx_runtime_1.jsx)(IconComp, { size: 16, color: slotProps?.icon?.color ?? 'yellow-30', className: "mt-[2.5px] shrink-0" }), (0, jsx_runtime_1.jsx)("p", { className: "text-fds-base text-fds-gray-100", children: title })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-[10px] flex justify-end gap-fds-sm", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: slotProps?.cancelButton?.variant ?? 'secondary', size: "sm", onClick: handleCancel, children: slotProps?.cancelButton?.children ?? 'No' }), (0, jsx_runtime_1.jsx)(button_1.Button, { variant: slotProps?.confirmButton?.variant ?? 'danger', size: "sm", onClick: handleConfirm, children: slotProps?.confirmButton?.children ?? 'Yes' })] }), (0, jsx_runtime_1.jsx)(PopoverPrimitive.Arrow, { className: "fill-white", width: 16, height: 8 })] }) })] }));
+}

package/dist/cjs/components/radio-button-group.js

@@ -1,4 +1,5 @@
 "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);
@@ -33,52 +34,47 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioButtonGroupItem = exports.RadioButtonGroup = void 0;
+exports.RadioButtonGroup = RadioButtonGroup;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const utils_1 = require("../lib/utils");
+const use_stable_id_1 = require("../lib/use-stable-id");
 const class_variance_authority_1 = require("class-variance-authority");
 const React = __importStar(require("react"));
 const radio_group_1 = require("./radio-group");
-const radioButtonGroupItemVariants = (0, class_variance_authority_1.cva)('relative flex cursor-pointer items-center justify-center border bg-card px-[15px] transition-all has-[[data-state=checked]]:z-10', {
+const itemVariants = (0, class_variance_authority_1.cva)('relative flex cursor-pointer items-center justify-center border bg-card transition-all has-[[data-state=checked]]:z-10', {
     variants: {
         size: {
-            small: 'h-[24px]',
-            medium: 'h-[32px]',
-            large: 'h-[40px]',
-        },
-        variant: {
-            default: 'border-fds-gray-30 text-fds-gray-80 dark:border-fds-gray-60 dark:text-fds-gray-40 has-[[data-state=checked]]:border-fds-blue has-[[data-state=checked]]:bg-fds-blue-10 has-[[data-state=checked]]:text-fds-blue dark:has-[[data-state=checked]]:border-fds-blue-20 dark:has-[[data-state=checked]]:text-fds-blue',
-            custom: '', // No default checked styles, allows full customization
+            sm: 'h-[24px] text-fds-sm px-fds-md',
+            md: 'h-[32px] text-fds-base px-fds-lg',
+            lg: 'h-[40px] text-fds-h6 px-fds-xl',
         },
     },
     defaultVariants: {
-        size: 'medium',
-        variant: 'default',
+        size: 'md',
     },
 });
-const RadioButtonGroup = React.forwardRef(({ className, children, size, borderRadius = 'lg', ...props }, ref) => {
-    const childrenArray = React.Children.toArray(children);
-    const childrenWithProps = childrenArray.map((child, index) => {
-        if (React.isValidElement(child)) {
+const defaultColors = 'border-fds-gray-30 text-fds-gray-80 dark:border-fds-gray-60 dark:text-fds-gray-40 has-[[data-state=checked]]:border-fds-blue-30 has-[[data-state=checked]]:bg-fds-blue-10 has-[[data-state=checked]]:text-fds-blue-30 dark:has-[[data-state=checked]]:border-fds-blue-20 dark:has-[[data-state=checked]]:text-fds-blue-30';
+const errorColors = 'border-fds-red-30 bg-fds-red-10 text-fds-red-30 has-[[data-state=checked]]:border-fds-red-30 has-[[data-state=checked]]:bg-fds-red-10 has-[[data-state=checked]]:text-fds-red-30';
+const disabledColors = 'bg-fds-gray-10 border-fds-gray-20 text-fds-gray-60 has-[[data-state=checked]]:bg-fds-gray-20 has-[[data-state=checked]]:border-fds-gray-30 has-[[data-state=checked]]:text-fds-gray-60';
+function RadioButtonGroup({ options, value, defaultValue, onValueChange, size = 'md', orientation = 'horizontal', disabled = false, error = false, }) {
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const isControlled = value !== undefined;
+    const currentValue = isControlled ? value : internalValue;
+    const baseId = (0, use_stable_id_1.useStableId)();
+    const handleValueChange = (v) => {
+        if (!isControlled)
+            setInternalValue(v);
+        onValueChange?.(v);
+    };
+    const isVertical = orientation === 'vertical';
+    const stateColors = disabled ? disabledColors : error ? errorColors : defaultColors;
+    return ((0, jsx_runtime_1.jsx)(radio_group_1.RadioGroup, { value: currentValue, onValueChange: handleValueChange, disabled: disabled, className: (0, utils_1.cn)('flex', isVertical ? 'flex-col gap-fds-sm' : 'flex-row gap-0', disabled && 'opacity-50 cursor-not-allowed'), children: options.map((option, index) => {
             const isFirst = index === 0;
-            const isLast = index === childrenArray.length - 1;
-            const roundedStart = borderRadius === 'full' ? 'rounded-s-full' : 'rounded-s-fds-md';
-            const roundedEnd = borderRadius === 'full' ? 'rounded-e-full' : 'rounded-e-fds-md';
-            const childProps = child.props;
-            return React.cloneElement(child, {
-                ...childProps,
-                size: childProps.size ?? size ?? undefined,
-                className: (0, utils_1.cn)(childProps.className, isFirst && roundedStart, isLast && roundedEnd, !isFirst && '-ml-px') || undefined,
-            });
-        }
-        return child;
-    });
-    return ((0, jsx_runtime_1.jsx)(radio_group_1.RadioGroup, { ref: ref, className: (0, utils_1.cn)('flex gap-0', className), ...props, children: childrenWithProps }));
-});
-exports.RadioButtonGroup = RadioButtonGroup;
+            const isLast = index === options.length - 1;
+            const optionId = `${baseId}-${option.value}`;
+            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)(itemVariants({ size }), stateColors, option.render && 'h-auto py-fds-sm', isVertical
+                    ? 'rounded-fds-md w-full'
+                    : (0, utils_1.cn)(isFirst && 'rounded-s-fds-md', isLast && 'rounded-e-fds-md', !isFirst && '-ml-px'), disabled && 'cursor-not-allowed'), children: [(0, jsx_runtime_1.jsx)(radio_group_1.RadioGroupItem, { id: optionId, value: option.value, className: "sr-only", disabled: disabled }), (0, jsx_runtime_1.jsx)("label", { htmlFor: optionId, className: (0, utils_1.cn)('whitespace-nowrap after:absolute after:inset-0', !option.render && 'font-medium', disabled ? 'cursor-not-allowed' : 'cursor-pointer'), style: { color: 'inherit', fontSize: 'inherit' }, children: option.render ? option.render() : option.label })] }, option.value));
+        }) }));
+}
 RadioButtonGroup.displayName = 'RadioButtonGroup';
-const RadioButtonGroupItem = React.forwardRef(({ className, value, id, size, variant, children, ...props }, ref) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, utils_1.cn)(radioButtonGroupItemVariants({ size, variant }), className), ...props, children: [(0, jsx_runtime_1.jsx)(radio_group_1.RadioGroupItem, { id: id, value: value, className: "sr-only" }), (0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: "cursor-pointer whitespace-nowrap font-medium after:absolute after:inset-0", style: { color: 'inherit', fontSize: 'inherit' }, children: children })] }));
-});
-exports.RadioButtonGroupItem = RadioButtonGroupItem;
-RadioButtonGroupItem.displayName = 'RadioButtonGroupItem';

package/dist/cjs/components/radio-group.js

@@ -1,4 +1,5 @@
 "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);
@@ -44,7 +45,7 @@ const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
 exports.RadioGroup = RadioGroup;
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => {
-    return ((0, jsx_runtime_1.jsx)(RadioGroupPrimitive.Item, { ref: ref, className: (0, utils_1.cn)('aspect-square h-[16px] w-[16px] rounded-full border border-fds-gray-80 text-fds-blue ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-fds-blue focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-fds-blue', className), ...props, children: (0, jsx_runtime_1.jsx)(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: (0, jsx_runtime_1.jsx)("div", { className: "h-[8px] w-[8px] rounded-full bg-fds-blue" }) }) }));
+    return ((0, jsx_runtime_1.jsx)(RadioGroupPrimitive.Item, { ref: ref, className: (0, utils_1.cn)('fw-base h-[16px] w-[16px] cursor-pointer rounded-full border border-fds-gray-30 bg-white ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-fds-blue-30 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:border-fds-gray-20 disabled:bg-fds-gray-10 data-[state=checked]:border-fds-blue-30 data-[state=checked]:disabled:border-fds-gray-30', className), ...props, children: (0, jsx_runtime_1.jsx)(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: (0, jsx_runtime_1.jsx)("div", { className: "h-[8px] w-[8px] rounded-full bg-fds-blue-30 [[disabled]_&]:bg-fds-gray-30" }) }) }));
 });
 exports.RadioGroupItem = RadioGroupItem;
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;

package/dist/cjs/components/slider.js

@@ -1,4 +1,5 @@
 "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);
@@ -35,13 +36,20 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Slider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const utils_1 = require("../lib/utils");
 const SliderPrimitive = __importStar(require("@radix-ui/react-slider"));
 const React = __importStar(require("react"));
-const Slider = React.forwardRef(({ className, ...props }, ref) => {
-    const value = props.value || props.defaultValue || [0];
-    const thumbCount = Array.isArray(value) ? value.length : 1;
-    return ((0, jsx_runtime_1.jsxs)(SliderPrimitive.Root, { ref: ref, className: (0, utils_1.cn)('relative flex w-full touch-none select-none items-center', className), ...props, children: [(0, jsx_runtime_1.jsx)(SliderPrimitive.Track, { className: "relative h-1 w-full grow overflow-hidden rounded-full bg-fds-gray-20", children: (0, jsx_runtime_1.jsx)(SliderPrimitive.Range, { className: "absolute h-full bg-fds-blue" }) }), Array.from({ length: thumbCount }).map((_, i) => ((0, jsx_runtime_1.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)))] }));
+const utils_1 = require("../lib/utils");
+const Slider = React.forwardRef(({ value, defaultValue, onValueChange, min = 0, max = 100, step = 1, disabled }, ref) => {
+    const [internalValue, setInternalValue] = React.useState(defaultValue ?? [min]);
+    const resolvedValue = value !== undefined ? value : internalValue;
+    const handleValueChange = (val) => {
+        if (value === undefined)
+            setInternalValue(val);
+        onValueChange?.(val);
+    };
+    return ((0, jsx_runtime_1.jsxs)(SliderPrimitive.Root, { ref: ref, value: resolvedValue, onValueChange: handleValueChange, min: min, max: max, step: step, disabled: disabled, className: "relative flex w-full touch-none select-none items-center", children: [(0, jsx_runtime_1.jsx)(SliderPrimitive.Track, { className: "relative h-1 w-full grow overflow-hidden rounded-full bg-fds-gray-20", children: (0, jsx_runtime_1.jsx)(SliderPrimitive.Range, { className: (0, utils_1.cn)('absolute h-full', disabled ? 'bg-fds-blue-05' : 'bg-fds-blue-30') }) }), resolvedValue.map((_, i) => ((0, jsx_runtime_1.jsx)(SliderPrimitive.Thumb, { className: (0, utils_1.cn)('block h-4 w-4 rounded-full border-2 bg-fds-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2', disabled
+                    ? 'border-fds-blue-05 cursor-not-allowed'
+                    : 'border-fds-blue-30 focus-visible:ring-fds-blue-20 cursor-pointer') }, i)))] }));
 });
 exports.Slider = Slider;
-Slider.displayName = SliderPrimitive.Root.displayName;
+Slider.displayName = 'Slider';

package/dist/cjs/components/switch.js

@@ -1,4 +1,5 @@
 "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);
@@ -35,32 +36,50 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Switch = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const React = __importStar(require("react"));
 const SwitchPrimitives = __importStar(require("@radix-ui/react-switch"));
+const React = __importStar(require("react"));
 const class_variance_authority_1 = require("class-variance-authority");
 const utils_1 = require("../lib/utils");
-const switchVariants = (0, class_variance_authority_1.cva)('peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fds-blue focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-fds-blue data-[state=unchecked]:bg-fds-gray-30', {
+const use_stable_id_1 = require("../lib/use-stable-id");
+const switchVariants = (0, class_variance_authority_1.cva)('fw-base peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fds-blue-30 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50', {
     variants: {
         size: {
-            default: 'h-5 w-9',
-            small: 'h-4 w-7',
+            lg: 'h-5 w-9',
+            sm: 'h-4 w-8',
         },
     },
     defaultVariants: {
-        size: 'default',
+        size: 'lg',
     },
 });
 const switchThumbVariants = (0, class_variance_authority_1.cva)('pointer-events-none block rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0', {
     variants: {
         size: {
-            default: 'h-4 w-4 data-[state=checked]:translate-x-4',
-            small: 'h-3 w-3 data-[state=checked]:translate-x-3',
+            lg: 'size-4 data-[state=checked]:translate-x-4',
+            sm: 'size-3 data-[state=checked]:translate-x-4',
         },
     },
     defaultVariants: {
-        size: 'default',
+        size: 'lg',
     },
 });
-const Switch = React.forwardRef(({ className, size, ...props }, ref) => ((0, jsx_runtime_1.jsx)(SwitchPrimitives.Root, { className: (0, utils_1.cn)(switchVariants({ size }), className), ...props, ref: ref, children: (0, jsx_runtime_1.jsx)(SwitchPrimitives.Thumb, { className: (0, utils_1.cn)(switchThumbVariants({ size })) }) })));
+const Switch = React.forwardRef(({ checked, onCheckedChange, disabled, error, size = 'lg', children }, ref) => {
+    const switchId = (0, use_stable_id_1.useStableId)();
+    const [internalChecked, setInternalChecked] = React.useState(false);
+    const resolvedChecked = checked !== undefined ? checked : internalChecked;
+    const handleCheckedChange = (val) => {
+        if (checked === undefined)
+            setInternalChecked(val);
+        onCheckedChange?.(val);
+    };
+    const track = ((0, jsx_runtime_1.jsx)(SwitchPrimitives.Root, { ref: ref, id: switchId, checked: resolvedChecked, onCheckedChange: handleCheckedChange, disabled: disabled, "aria-invalid": error || undefined, className: (0, utils_1.cn)(switchVariants({ size }), disabled
+            ? 'data-[state=unchecked]:bg-fds-gray-20 data-[state=checked]:bg-fds-blue-05'
+            : error
+                ? 'data-[state=unchecked]:bg-fds-gray-60 data-[state=checked]:bg-fds-red-30'
+                : 'data-[state=unchecked]:bg-fds-gray-60 data-[state=checked]:bg-fds-blue-30'), children: (0, jsx_runtime_1.jsx)(SwitchPrimitives.Thumb, { className: (0, utils_1.cn)(switchThumbVariants({ size })) }) }));
+    if (!children)
+        return track;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-fds-sm", children: [track, (0, jsx_runtime_1.jsx)("label", { htmlFor: switchId, className: (0, utils_1.cn)('text-fds-base cursor-pointer select-none', disabled && 'cursor-not-allowed text-fds-gray-60', !disabled && error && resolvedChecked && 'text-fds-red-30', !disabled && !(error && resolvedChecked) && 'text-fds-gray-80 dark:text-fds-gray-10'), children: children })] }));
+});
 exports.Switch = Switch;
-Switch.displayName = SwitchPrimitives.Root.displayName;
+Switch.displayName = 'Switch';

package/dist/cjs/components/tooltip.js

@@ -1,4 +1,5 @@
 "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);
@@ -33,17 +34,45 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TooltipTrigger = exports.TooltipProvider = exports.TooltipContent = exports.Tooltip = void 0;
+exports.Tooltip = Tooltip;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const utils_1 = require("../lib/utils");
 const TooltipPrimitive = __importStar(require("@radix-ui/react-tooltip"));
 const React = __importStar(require("react"));
-const TooltipProvider = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)(TooltipPrimitive.Provider, { delayDuration: 0, ...props, children: children }));
-exports.TooltipProvider = TooltipProvider;
-const Tooltip = TooltipPrimitive.Root;
-exports.Tooltip = Tooltip;
-const TooltipTrigger = TooltipPrimitive.Trigger;
-exports.TooltipTrigger = TooltipTrigger;
-const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => ((0, jsx_runtime_1.jsxs)(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: (0, utils_1.cn)('z-[9999] origin-[--radix-tooltip-content-transform-origin] overflow-hidden rounded-fds-md bg-fds-gray px-fds-lg py-fds-md !text-fds-base !font-fds-regular text-fds-white shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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', className), ...props, children: [props.children, (0, jsx_runtime_1.jsx)(TooltipPrimitive.Arrow, { className: "fill-fds-gray", width: 12, height: 6 })] })));
-exports.TooltipContent = TooltipContent;
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+function resolvePlacement(placement) {
+    const [sideRaw, alignRaw] = placement.split('-');
+    const align = alignRaw ?? 'center';
+    const isRtl = typeof document !== 'undefined' && document.documentElement.dir === 'rtl';
+    // Map logical start/end to physical left/right
+    const resolveLogical = (value) => (value === 'start') !== isRtl ? 'left' : 'right';
+    const side = sideRaw === 'top' || sideRaw === 'bottom'
+        ? sideRaw
+        : resolveLogical(sideRaw);
+    // Radix align also needs RTL flip for start/end
+    const radixAlign = align === 'center'
+        ? 'center'
+        : isRtl
+            ? align === 'start' ? 'end' : 'start'
+            : align;
+    return { side, align: radixAlign };
+}
+// Arrow is 12px wide. Place its center at border-radius (4px) + half arrow (6px) = 10px from edge.
+const ARROW_EDGE_INSET = 10;
+function Tooltip({ message, placement = 'top', children }) {
+    const { side, align } = resolvePlacement(placement);
+    const triggerRef = React.useRef(null);
+    const [alignOffset, setAlignOffset] = React.useState(0);
+    React.useEffect(() => {
+        if (align === 'center' || !triggerRef.current) {
+            setAlignOffset(0);
+            return;
+        }
+        const isHorizontal = side === 'top' || side === 'bottom';
+        const triggerSize = isHorizontal
+            ? triggerRef.current.offsetWidth
+            : triggerRef.current.offsetHeight;
+        // Negative offset shifts tooltip away from alignment edge,
+        // pulling the arrow (anchored at trigger center) toward that edge.
+        setAlignOffset(ARROW_EDGE_INSET - triggerSize / 2);
+    }, [align, side]);
+    return ((0, jsx_runtime_1.jsx)(TooltipPrimitive.Provider, { delayDuration: 0, children: (0, jsx_runtime_1.jsxs)(TooltipPrimitive.Root, { children: [(0, jsx_runtime_1.jsx)(TooltipPrimitive.Trigger, { asChild: true, ref: triggerRef, children: children }), (0, jsx_runtime_1.jsxs)(TooltipPrimitive.Content, { side: side, align: align, alignOffset: alignOffset, sideOffset: 4, className: "z-[9999] origin-[--radix-tooltip-content-transform-origin] overflow-hidden rounded-fds-md bg-fds-gray-100 p-fds-sm !text-fds-base !leading-none !font-fds-regular text-fds-white shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 dark:bg-white dark:text-[rgba(83,87,95,1)]", children: [message, (0, jsx_runtime_1.jsx)(TooltipPrimitive.Arrow, { className: "fill-fds-gray-100 dark:fill-white", width: 12, height: 6 })] })] }) }));
+}

package/dist/cjs/index.js

@@ -1,88 +1,42 @@
 "use strict";
-// FreightWind Design System - Component Library
-// @freightos/freightwind
-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 __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
+'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SonnerToaster = exports.toast = exports.useToast = exports.cn = void 0;
-// Utility
+exports.iconMap = exports.useStableId = exports.cn = exports.Tooltip = exports.Switch = exports.Slider = exports.RadioGroupItem = exports.RadioGroup = exports.RadioButtonGroup = exports.PopConfirm = exports.message = exports.MessageProvider = exports.chipVariants = exports.Chip = exports.Checkbox = exports.buttonVariants = exports.Button = exports.Badge = exports.Avatar = exports.Alert = void 0;
+// Components
+var alert_1 = require("./components/alert");
+Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return alert_1.Alert; } });
+var avatar_1 = require("./components/avatar");
+Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return avatar_1.Avatar; } });
+var badge_1 = require("./components/badge");
+Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return badge_1.Badge; } });
+var button_1 = require("./components/button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return button_1.Button; } });
+Object.defineProperty(exports, "buttonVariants", { enumerable: true, get: function () { return button_1.buttonVariants; } });
+var checkbox_1 = require("./components/checkbox");
+Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return checkbox_1.Checkbox; } });
+var chip_1 = require("./components/chip");
+Object.defineProperty(exports, "Chip", { enumerable: true, get: function () { return chip_1.Chip; } });
+Object.defineProperty(exports, "chipVariants", { enumerable: true, get: function () { return chip_1.chipVariants; } });
+var message_1 = require("./components/message");
+Object.defineProperty(exports, "MessageProvider", { enumerable: true, get: function () { return message_1.MessageProvider; } });
+Object.defineProperty(exports, "message", { enumerable: true, get: function () { return message_1.message; } });
+var pop_confirm_1 = require("./components/pop-confirm");
+Object.defineProperty(exports, "PopConfirm", { enumerable: true, get: function () { return pop_confirm_1.PopConfirm; } });
+var radio_button_group_1 = require("./components/radio-button-group");
+Object.defineProperty(exports, "RadioButtonGroup", { enumerable: true, get: function () { return radio_button_group_1.RadioButtonGroup; } });
+var radio_group_1 = require("./components/radio-group");
+Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return radio_group_1.RadioGroup; } });
+Object.defineProperty(exports, "RadioGroupItem", { enumerable: true, get: function () { return radio_group_1.RadioGroupItem; } });
+var slider_1 = require("./components/slider");
+Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return slider_1.Slider; } });
+var switch_1 = require("./components/switch");
+Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return switch_1.Switch; } });
+var tooltip_1 = require("./components/tooltip");
+Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return tooltip_1.Tooltip; } });
+// Utilities
 var utils_1 = require("./lib/utils");
 Object.defineProperty(exports, "cn", { enumerable: true, get: function () { return utils_1.cn; } });
-// Hooks
-var use_toast_1 = require("./hooks/use-toast");
-Object.defineProperty(exports, "useToast", { enumerable: true, get: function () { return use_toast_1.useToast; } });
-Object.defineProperty(exports, "toast", { enumerable: true, get: function () { return use_toast_1.toast; } });
-// Components
-__exportStar(require("./components/accordion"), exports);
-__exportStar(require("./components/alert"), exports);
-__exportStar(require("./components/aspect-ratio"), exports);
-__exportStar(require("./components/avatar"), exports);
-__exportStar(require("./components/badge"), exports);
-__exportStar(require("./components/breadcrumb"), exports);
-__exportStar(require("./components/button"), exports);
-__exportStar(require("./components/calendar"), exports);
-__exportStar(require("./components/card"), exports);
-__exportStar(require("./components/chart"), exports);
-__exportStar(require("./components/checkbox"), exports);
-__exportStar(require("./components/chip"), exports);
-__exportStar(require("./components/collapsible"), exports);
-__exportStar(require("./components/command"), exports);
-__exportStar(require("./components/context-menu"), exports);
-__exportStar(require("./components/country-select"), exports);
-__exportStar(require("./components/date-picker"), exports);
-__exportStar(require("./components/date-range-picker"), exports);
-__exportStar(require("./components/date-time-picker"), exports);
-__exportStar(require("./components/dialog"), exports);
-__exportStar(require("./components/drawer"), exports);
-__exportStar(require("./components/dropdown-menu"), exports);
-__exportStar(require("./components/empty"), exports);
-__exportStar(require("./components/file-preview"), exports);
-__exportStar(require("./components/form"), exports);
-__exportStar(require("./components/inline-edit"), exports);
-__exportStar(require("./components/input"), exports);
-__exportStar(require("./components/input-group"), exports);
-__exportStar(require("./components/input-otp"), exports);
-__exportStar(require("./components/label"), exports);
-__exportStar(require("./components/menubar"), exports);
-__exportStar(require("./components/navigation-menu"), exports);
-__exportStar(require("./components/pagination"), exports);
-__exportStar(require("./components/phone-input"), exports);
-__exportStar(require("./components/popover"), exports);
-__exportStar(require("./components/progress"), exports);
-__exportStar(require("./components/radio-button-group"), exports);
-__exportStar(require("./components/radio-group"), exports);
-__exportStar(require("./components/resizable"), exports);
-__exportStar(require("./components/rich-text-editor"), exports);
-__exportStar(require("./components/scroll-area"), exports);
-__exportStar(require("./components/select"), exports);
-__exportStar(require("./components/separator"), exports);
-__exportStar(require("./components/sheet"), exports);
-__exportStar(require("./components/skeleton"), exports);
-__exportStar(require("./components/slider"), exports);
-var sonner_1 = require("./components/sonner");
-Object.defineProperty(exports, "SonnerToaster", { enumerable: true, get: function () { return sonner_1.Toaster; } });
-__exportStar(require("./components/spinner"), exports);
-__exportStar(require("./components/stepper"), exports);
-__exportStar(require("./components/steps"), exports);
-__exportStar(require("./components/switch"), exports);
-__exportStar(require("./components/table"), exports);
-__exportStar(require("./components/tabs"), exports);
-__exportStar(require("./components/textarea"), exports);
-__exportStar(require("./components/time-picker"), exports);
-__exportStar(require("./components/toast"), exports);
-__exportStar(require("./components/toaster"), exports);
-__exportStar(require("./components/toggle"), exports);
-__exportStar(require("./components/toggle-group"), exports);
-__exportStar(require("./components/tooltip"), exports);
+var use_stable_id_1 = require("./lib/use-stable-id");
+Object.defineProperty(exports, "useStableId", { enumerable: true, get: function () { return use_stable_id_1.useStableId; } });
+var icon_utils_1 = require("./lib/icon-utils");
+Object.defineProperty(exports, "iconMap", { enumerable: true, get: function () { return icon_utils_1.iconMap; } });

package/dist/cjs/lib/icon-utils.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.iconMap = void 0;
+var icons_1 = require("@freightos/icons");
+Object.defineProperty(exports, "iconMap", { enumerable: true, get: function () { return icons_1.iconMap; } });

package/dist/cjs/{components/aspect-ratio.js → lib/use-stable-id.js}

@@ -33,7 +33,10 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AspectRatio = void 0;
-const AspectRatioPrimitive = __importStar(require("@radix-ui/react-aspect-ratio"));
-const AspectRatio = AspectRatioPrimitive.Root;
-exports.AspectRatio = AspectRatio;
+exports.useStableId = useStableId;
+const React = __importStar(require("react"));
+let counter = 0;
+function useStableId(prefix = 'fw') {
+    const [id] = React.useState(() => `${prefix}-${++counter}`);
+    return id;
+}

package/dist/cjs/lib/utils.js

@@ -3,6 +3,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.cn = cn;
 const clsx_1 = require("clsx");
 const tailwind_merge_1 = require("tailwind-merge");
+const twMerge = (0, tailwind_merge_1.extendTailwindMerge)({
+    extend: {
+        classGroups: {
+            "font-size": [
+                "text-fds-xs",
+                "text-fds-sm",
+                "text-fds-base",
+                "text-fds-h6",
+                "text-fds-h5",
+                "text-fds-h4",
+                "text-fds-h3",
+                "text-fds-h2",
+                "text-fds-h1",
+            ],
+        },
+    },
+});
 function cn(...inputs) {
-    return (0, tailwind_merge_1.twMerge)((0, clsx_1.clsx)(inputs));
+    return twMerge((0, clsx_1.clsx)(inputs));
 }

package/dist/esm/components/alert.js

@@ -1,39 +1,56 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconCheckCircled, IconClose, IconInfoCircled, IconAlertCircled, IconNegativeCircled } from '@freightos/icons';
+import { IconCheckCircled, IconClose, IconInfoCircled, IconRisk, IconNegativeCircled } from '@freightos/icons';
+import { AnimatePresence, motion } from 'motion/react';
 import * as React from 'react';
 import { cn } from '../lib/utils';
 const alertConfig = {
     info: {
         icon: IconInfoCircled,
-        borderColor: 'border-l-fds-blue',
-        iconColor: 'text-fds-blue',
+        borderColor: 'border-l-fds-blue-30',
+        iconColor: 'text-fds-blue-30',
     },
     success: {
         icon: IconCheckCircled,
-        borderColor: 'border-l-fds-green',
-        iconColor: 'text-fds-green',
+        borderColor: 'border-l-fds-green-30',
+        iconColor: 'text-fds-green-30',
     },
     warning: {
-        icon: IconAlertCircled,
-        borderColor: 'border-l-fds-orange',
-        iconColor: 'text-fds-orange',
+        icon: IconRisk,
+        borderColor: 'border-l-fds-yellow-30',
+        iconColor: 'text-fds-yellow-30',
     },
     error: {
         icon: IconNegativeCircled,
-        borderColor: 'border-l-fds-red',
-        iconColor: 'text-fds-red',
+        borderColor: 'border-l-fds-red-30',
+        iconColor: 'text-fds-red-30',
+    },
+    special: {
+        icon: IconInfoCircled,
+        borderColor: 'border-l-fds-purple-1',
+        iconColor: 'text-fds-purple-1',
     },
 };
-export const Alert = ({ type = 'info', message, description, closable = false, onClose, className, }) => {
+export const Alert = ({ variant = 'info', title, message, closable = false, onClose, callToAction, }) => {
     const [visible, setVisible] = React.useState(true);
-    if (!visible)
-        return null;
-    const config = alertConfig[type];
+    const [closing, setClosing] = React.useState(false);
+    const config = alertConfig[variant];
     const Icon = config.icon;
+    const showCta = callToAction && !title;
+    const showClose = closable && !showCta;
     const handleClose = () => {
-        setVisible(false);
-        onClose?.();
+        setClosing(true);
     };
-    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 }) }))] }));
+    if (!visible)
+        return null;
+    return (_jsx("div", { style: {
+            display: 'grid',
+            gridTemplateRows: closing ? '0fr' : '1fr',
+            transition: 'grid-template-rows 0.2s ease-in-out',
+        }, onTransitionEnd: (e) => {
+            if (e.propertyName === 'grid-template-rows' && closing) {
+                setVisible(false);
+                onClose?.();
+            }
+        }, children: _jsx("div", { style: { overflow: 'hidden' }, children: _jsx(AnimatePresence, { initial: false, children: !closing && (_jsxs(motion.div, { role: "alert", exit: { y: -20 }, transition: { duration: 0.15, ease: 'easeIn' }, className: cn('flex w-full gap-fds-sm rounded-fds-md border-l-4 bg-card pr-fds-sm shadow-[0_0_10px_0_rgba(35,37,55,0.12)]', title ? 'items-start pl-fds-md py-fds-md' : 'items-center pl-fds-lg py-[5px]', config.borderColor), children: [_jsx(Icon, { size: title ? 20 : 18, className: cn('shrink-0', title && 'mt-[3px]', config.iconColor) }), _jsxs("div", { className: "flex-1 min-w-0", children: [title && _jsx("div", { className: "text-fds-h5 font-fds-bold leading-fds-title text-foreground", children: title }), message && (_jsx("div", { className: cn('text-fds-base text-fds-gray-80 dark:text-white', title && 'mt-fds-xs'), children: message }))] }), showCta && _jsx("div", { className: "shrink-0", children: callToAction }), showClose && (_jsx("button", { type: "button", onClick: handleClose, className: "fw-base shrink-0 cursor-pointer text-fds-gray-90 hover:text-fds-gray-100 transition-colors", "aria-label": "Close alert", children: _jsx(IconClose, { size: 16 }) }))] })) }) }) }));
 };