@freightos/freightwind 1.0.0 → 1.1.1

package/dist/esm/components/avatar.js

@@ -1,37 +1,68 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../lib/utils';
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { IconUser } from '@freightos/icons';
 import { cva } from 'class-variance-authority';
-import * as React from 'react';
-const avatarVariants = cva('relative flex shrink-0 overflow-hidden rounded-full', {
+import { iconMap } from '../lib/icon-utils';
+const FLAGS_BASE_URL = 'https://freightwind.freightos.com/flags/1x1';
+// --- Component ---
+const avatarVariants = cva('relative flex shrink-0 items-center justify-center overflow-hidden rounded-full', {
     variants: {
+        variant: {
+            default: 'bg-fds-purple-2 text-fds-purple-1',
+            info: 'bg-fds-blue-20 text-fds-blue-40',
+            secondary: 'bg-fds-blue-10 text-fds-blue-40',
+            warning: 'bg-fds-yellow-20 text-fds-yellow-50',
+            neutral: 'bg-fds-gray-20 text-fds-gray-80',
+            positive: 'bg-fds-green-20 text-fds-green-40',
+            filled: 'bg-white dark:bg-fds-gray-90 text-fds-gray-80',
+            ghost: 'bg-transparent text-fds-gray-80',
+        },
         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]',
+            xs: 'h-[16px] w-[16px] text-fds-xs',
+            sm: 'h-[24px] w-[24px] text-fds-sm',
+            md: 'h-[32px] w-[32px] text-fds-base',
+            lg: 'h-[40px] w-[40px] text-fds-h6',
+            xl: 'h-[58px] w-[58px] text-fds-h4',
         },
         bordered: {
-            true: 'border-fds-sm border-fds-gray-20',
+            true: 'border border-fds-gray-20',
             false: '',
         },
     },
     defaultVariants: {
+        variant: 'default',
         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" }) }));
+const iconSizeMap = {
+    xs: 10,
+    sm: 14,
+    md: 18,
+    lg: 22,
+    xl: 28,
+};
+function Avatar({ variant = 'default', size = 'md', bordered = false, icon, title, flag, src, alt, }) {
+    const classes = avatarVariants({ variant, size, bordered });
+    const iconSize = iconSizeMap[size];
+    // Content priority: src > flag > title > icon > default placeholder
+    if (src) {
+        return (_jsx("div", { className: classes, children: _jsx("img", { src: src, alt: alt ?? '', 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 };
+    if (flag) {
+        const flagUrl = `${FLAGS_BASE_URL}/${flag.trim().toLowerCase()}.svg`;
+        return (_jsx("div", { className: classes, children: _jsx("img", { src: flagUrl, alt: alt ?? flag.toUpperCase(), className: "h-full w-full object-cover" }) }));
+    }
+    if (title) {
+        return (_jsx("div", { className: classes, role: "img", "aria-label": alt ?? title, children: _jsx("span", { className: "font-fds-semibold leading-none", "aria-hidden": "true", children: title.charAt(0).toUpperCase() }) }));
+    }
+    if (icon) {
+        const IconComp = iconMap[icon];
+        if (IconComp) {
+            return (_jsx("div", { className: classes, role: "img", "aria-label": alt ?? icon, children: _jsx(IconComp, { size: iconSize }) }));
+        }
+    }
+    // Default: user icon placeholder
+    return (_jsx("div", { className: classes, role: "img", "aria-label": alt ?? 'User avatar', children: _jsx(IconUser, { size: iconSize }) }));
+}
+export { Avatar };

package/dist/esm/components/badge.js

@@ -1,20 +1,46 @@
-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 }));
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/utils';
+const positionClasses = {
+    'top-end': '-top-1 -end-1',
+    'bottom-end': '-bottom-1 -end-1',
+};
+const statusDotColors = {
+    success: 'bg-fds-green-30',
+    error: 'bg-fds-red-30',
+    default: 'bg-fds-gray-40',
+    processing: 'bg-fds-blue-30',
+    warning: 'bg-fds-yellow-30',
+};
+const badgeSizeClasses = {
+    default: 'min-w-[16px] h-[16px] text-fds-sm px-[3px]',
+    large: 'min-w-[20px] h-[20px] text-fds-sm px-[4px]',
+};
+const variantClasses = {
+    default: 'bg-fds-red-30 text-white',
+    info: 'bg-fds-blue-30 text-white',
+    neutral: 'bg-white border border-fds-gray-20 text-fds-gray-80',
+};
+function Badge({ value, size = 'default', variant = 'default', position = 'top-end', status, text, children }) {
+    const badgeClasses = cn('inline-flex items-center justify-center rounded-full font-fds-semibold leading-none', badgeSizeClasses[size], variantClasses[variant]);
+    const display = typeof value === 'number'
+        ? (value > 99 ? '99+' : String(value))
+        : value;
+    const showValue = typeof value === 'string' ? value.length > 0 : (value != null && value > 0);
+    // Badge wrapping a child (e.g. icon or button)
+    if (children != null && value != null) {
+        return (_jsxs("div", { className: "relative inline-flex", children: [children, showValue && (_jsx("span", { className: cn(badgeClasses, 'absolute', positionClasses[position]), children: display }))] }));
+    }
+    // Standalone badge
+    if (value != null) {
+        if (!showValue)
+            return null;
+        return (_jsx("span", { className: badgeClasses, children: display }));
+    }
+    // Status badge
+    if (status) {
+        return (_jsxs("span", { className: "inline-flex items-center gap-fds-sm", children: [_jsx("span", { className: cn('h-[6px] w-[6px] rounded-full', statusDotColors[status]) }), text && _jsx("span", { className: "text-fds-base text-fds-gray-80", children: text })] }));
+    }
+    return null;
 }
-export { Badge, badgeVariants };
+export { Badge };

package/dist/esm/components/button.js

@@ -1,39 +1,50 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cva } from 'class-variance-authority';
 import * as React from 'react';
+import { iconMap } from '../lib/icon-utils';
 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', {
+import { Tooltip } from './tooltip';
+const buttonVariants = cva('fw-base inline-flex w-fit items-center justify-center gap-fds-sm whitespace-nowrap rounded-fds-md cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_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',
+        variant: {
+            default: 'bg-fds-blue-30 text-fds-white hover:bg-fds-blue-40',
+            secondary: 'bg-fds-white border border-fds-blue-30 text-fds-blue-30 hover:bg-fds-blue-10',
+            tertiary: 'bg-transparent text-fds-blue-30 hover:bg-fds-blue-10',
+            link: 'bg-transparent text-fds-blue-30 hover:text-fds-blue-50',
+            danger: 'bg-fds-red-30 text-fds-white hover:bg-fds-red-40',
+            'danger-ghost': 'bg-fds-white border border-fds-red-30 text-fds-red-30 hover:bg-fds-red-10',
+            toggle: 'bg-fds-white border border-fds-gray-30 text-fds-gray-80 hover:border-fds-blue-30 hover:text-fds-blue-30',
         },
         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',
+            sm: 'h-[var(--fds-size-lg)] px-fds-md text-fds-sm [&_svg]:size-3',
+            md: 'h-[var(--fds-size-xl)] px-fds-lg text-fds-base [&_svg]:size-4',
+            lg: 'h-[var(--fds-size-xxl)] px-fds-xl text-fds-base [&_svg]:size-4',
         },
     },
     defaultVariants: {
-        type: 'default',
-        size: 'medium',
-        padding: 'default',
+        variant: 'default',
+        size: 'md',
     },
 });
-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 }));
+function LoadingSpinner() {
+    return (_jsx("svg", { className: "animate-spin", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12 22c5.421 0 10-4.579 10-10h-2c0 4.337-3.663 8-8 8s-8-3.663-8-8c0-4.336 3.663-8 8-8V2C6.579 2 2 6.58 2 12c0 5.421 4.579 10 10 10z", fill: "currentColor" }) }));
+}
+const Button = React.forwardRef(({ variant = 'default', size = 'md', icon, loading = false, active, disabled, tooltip, fullWidth, children, ...props }, ref) => {
+    const iconOnly = !!icon && !children && !loading;
+    if (process.env.NODE_ENV !== 'production' && iconOnly && !tooltip) {
+        console.warn('Button: tooltip is required for icon-only buttons.');
+    }
+    const IconComp = icon ? iconMap[icon] : null;
+    // Icon sizes: with text (sm=12, md=16, lg=16), icon-only (sm=16, md=16, lg=24)
+    const iconSize = iconOnly
+        ? size === 'lg' ? 24 : 16
+        : size === 'sm' ? 12 : 16;
+    const button = (_jsxs("button", { className: cn(buttonVariants({ variant, size }), variant === 'toggle' && active && 'border-fds-blue-30 text-fds-blue-30 bg-fds-blue-10', iconOnly && '!px-0', iconOnly && size === 'sm' && 'w-[var(--fds-size-lg)]', iconOnly && size === 'md' && 'w-[var(--fds-size-xl)]', iconOnly && size === 'lg' && 'w-[var(--fds-size-xxl)]', fullWidth && 'w-full'), ref: ref, disabled: disabled || loading, "aria-busy": loading || undefined, "aria-label": iconOnly ? tooltip : undefined, "aria-pressed": variant === 'toggle' ? active : undefined, ...props, children: [loading ? _jsx(LoadingSpinner, {}) : IconComp && _jsx(IconComp, { size: iconSize }), children] }));
+    if (tooltip) {
+        return _jsx(Tooltip, { message: tooltip, children: button });
+    }
+    return button;
 });
 Button.displayName = 'Button';
 export { Button, buttonVariants };

package/dist/esm/components/checkbox.js

@@ -1,8 +1,26 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } 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;
+import { useStableId } from '../lib/use-stable-id';
+const Checkbox = React.forwardRef(({ checked, onCheckedChange, disabled, error, children, }, ref) => {
+    const checkboxId = useStableId();
+    const [internalChecked, setInternalChecked] = React.useState(false);
+    const resolvedChecked = checked !== undefined ? checked : internalChecked;
+    const handleCheckedChange = (val) => {
+        if (checked === undefined)
+            setInternalChecked(val);
+        onCheckedChange?.(val);
+    };
+    const box = (_jsx(CheckboxPrimitive.Root, { ref: ref, id: checkboxId, checked: resolvedChecked, onCheckedChange: handleCheckedChange, disabled: disabled, "aria-invalid": error || undefined, className: cn('fw-base peer size-4 shrink-0 rounded-fds-sm border cursor-pointer transition-colors', 'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring', disabled
+            ? 'cursor-not-allowed bg-fds-gray-10 border-fds-gray-20'
+            : error
+                ? 'border-fds-red-30 bg-fds-red-10 data-[state=checked]:bg-fds-red-30'
+                : 'border-fds-gray-30 data-[state=checked]:bg-fds-blue-30 data-[state=checked]:border-fds-blue-30'), children: _jsx(CheckboxPrimitive.Indicator, { className: cn('flex items-center justify-center', disabled ? 'text-fds-gray-60' : error && resolvedChecked !== true ? 'text-fds-red-30' : 'text-fds-white'), children: resolvedChecked === 'indeterminate' ? (_jsx("span", { className: cn('block size-2 rounded-[1px]', disabled ? 'bg-fds-gray-60' : error ? 'bg-fds-red-30' : 'bg-fds-blue-30') })) : (_jsx("svg", { width: "11", height: "9", viewBox: "0 0 11 9", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.96757 5.24179L1.53586 2.81007L0 4.3378L3.96742 8.30523L10.7609 1.51176L9.21392 0L3.96757 5.24179Z", fill: "currentColor" }) })) }) }));
+    if (!children)
+        return box;
+    return (_jsxs("div", { className: "flex items-center gap-fds-sm", children: [box, _jsx("label", { htmlFor: checkboxId, className: cn('text-fds-base cursor-pointer select-none', disabled && 'cursor-not-allowed text-fds-gray-60', !disabled && error && 'text-fds-red-30', !disabled && !error && 'text-fds-gray-80 dark:text-fds-gray-10'), children: children })] }));
+});
+Checkbox.displayName = 'Checkbox';
 export { Checkbox };

package/dist/esm/components/chip.js

@@ -1,22 +1,47 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cva } from 'class-variance-authority';
+import * as React from 'react';
 import { IconClose } from '@freightos/icons';
+import { iconMap } from '../lib/icon-utils';
 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', {
+const chipVariants = cva('inline-flex items-center rounded-full h-5 px-fds-sm text-fds-sm font-fds-regular transition-colors', {
     variants: {
-        type: {
-            default: 'bg-fds-purple-10 text-fds-purple',
+        variant: {
+            default: 'bg-fds-purple-2 text-fds-purple-1',
             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',
+            info: 'bg-[rgba(225,245,249,1)] text-fds-blue-40',
+            highlight: 'bg-[rgba(172,232,240,1)] text-fds-blue-40',
+            warning: 'bg-fds-yellow-20 text-fds-yellow-50',
+            success: 'bg-fds-green-20 text-fds-green-40',
+            notice: 'bg-fds-red-10 text-fds-red-30',
+            error: 'bg-fds-red-20 text-fds-red-40',
         },
     },
     defaultVariants: {
-        type: 'default',
+        variant: '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" }) }))] }));
+const badgeColors = {
+    default: 'bg-fds-purple-1 text-fds-white',
+    neutral: 'bg-fds-gray-80 text-fds-white',
+    info: 'bg-fds-blue-40 text-fds-white',
+    highlight: 'bg-fds-blue-40 text-fds-white',
+    warning: 'bg-fds-yellow-50 text-fds-white',
+    success: 'bg-fds-green-40 text-fds-white',
+    notice: 'bg-fds-red-30 text-fds-white',
+    error: 'bg-fds-red-40 text-fds-white',
+};
+function Chip({ variant = 'default', icon, closable, onClose, badge, children, }) {
+    const [visible, setVisible] = React.useState(true);
+    if (!visible)
+        return null;
+    const handleClose = () => {
+        setVisible(false);
+        onClose?.();
+    };
+    const IconComp = icon ? iconMap[icon] : null;
+    const iconOnly = !!icon && !children;
+    return (_jsxs("div", { className: cn(chipVariants({ variant }), iconOnly && 'justify-center', badge !== undefined && (typeof badge === 'string' ? badge.length > 0 : badge > 0) && '!pl-0.5'), children: [badge !== undefined && (typeof badge === 'string' ? badge.length > 0 : badge > 0) && (_jsx("span", { className: cn('mr-1 inline-flex items-center justify-center rounded-full min-w-[16px] h-4 px-1 text-[10px] font-fds-semibold leading-none', badgeColors[variant]), children: typeof badge === 'number' && badge > 99 ? '99+' : badge })), IconComp && _jsx(IconComp, { size: 12, className: children ? 'mr-fds-sm' : '' }), children, closable && (_jsx("button", { type: "button", onClick: handleClose, "aria-label": "Remove", className: "fw-base ml-fds-sm inline-flex cursor-pointer items-center hover:opacity-70", children: _jsx(IconClose, { size: 10 }) }))] }));
 }
 export { Chip, chipVariants };

package/dist/esm/components/message.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconCheckCircled, IconInfoCircled, IconNegativeCircled, IconRisk } from "@freightos/icons";
+import { toast, Toaster as Sonner } from "sonner";
+const messageConfig = {
+    success: { icon: IconCheckCircled, bg: "bg-[rgba(71,169,110,1)]" },
+    info: { icon: IconInfoCircled, bg: "bg-[rgba(32,117,189,1)]" },
+    warning: { icon: IconRisk, bg: "bg-[rgba(237,175,7,1)]" },
+    error: { icon: IconNegativeCircled, bg: "bg-[rgba(216,39,30,1)]" },
+};
+function MessageToast({ variant, title, onClick, toastId, }) {
+    const config = messageConfig[variant];
+    const Icon = config.icon;
+    const dir = document.documentElement.getAttribute("dir") || "ltr";
+    return (_jsxs("div", { dir: dir, className: `mx-auto flex w-fit items-center gap-fds-sm rounded-fds-md p-fds-lg shadow-fds-md text-white font-[family-name:var(--font-open-sans)] ${config.bg} ${onClick ? "cursor-pointer" : ""}`, onClick: onClick ? () => {
+            onClick();
+            toast.dismiss(toastId);
+        } : undefined, children: [_jsx(Icon, { size: 16, className: "shrink-0" }), _jsx("span", { className: "text-fds-h6 font-fds-regular leading-fds-body", children: title })] }));
+}
+function showMessage(variant, title, options) {
+    return toast.custom((id) => (_jsx(MessageToast, { variant: variant, title: title, onClick: options?.onClick, toastId: id })), {
+        ...(options?.duration !== undefined && { duration: options.duration }),
+    });
+}
+const message = {
+    success: (title, options) => showMessage("success", title, options),
+    info: (title, options) => showMessage("info", title, options),
+    warning: (title, options) => showMessage("warning", title, options),
+    error: (title, options) => showMessage("error", title, options),
+};
+const MessageProvider = ({ duration = 3000, ...props }) => {
+    return (_jsx(Sonner, { position: "top-center", duration: duration, gap: 8, toastOptions: { style: { left: 0, right: 0 } }, ...props }));
+};
+export { MessageProvider, message };

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

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as React from 'react';
+import { Button } from './button';
+import { iconMap } from '../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 = iconMap[iconName];
+    return (_jsxs(PopoverPrimitive.Root, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverPrimitive.Trigger, { asChild: true, ref: triggerRef, children: children }), _jsx(PopoverPrimitive.Portal, { children: _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: [_jsxs("div", { className: "flex gap-fds-xs", children: [IconComp && _jsx(IconComp, { size: 16, color: slotProps?.icon?.color ?? 'yellow-30', className: "mt-[2.5px] shrink-0" }), _jsx("p", { className: "text-fds-base text-fds-gray-100", children: title })] }), _jsxs("div", { className: "mt-[10px] flex justify-end gap-fds-sm", children: [_jsx(Button, { variant: slotProps?.cancelButton?.variant ?? 'secondary', size: "sm", onClick: handleCancel, children: slotProps?.cancelButton?.children ?? 'No' }), _jsx(Button, { variant: slotProps?.confirmButton?.variant ?? 'danger', size: "sm", onClick: handleConfirm, children: slotProps?.confirmButton?.children ?? 'Yes' })] }), _jsx(PopoverPrimitive.Arrow, { className: "fill-white", width: 16, height: 8 })] }) })] }));
+}
+export { PopConfirm };

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

@@ -1,47 +1,45 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../lib/utils';
+import { useStableId } from '../lib/use-stable-id';
 import { cva } from 'class-variance-authority';
 import * as React from 'react';
 import { RadioGroup, RadioGroupItem } from './radio-group';
-const radioButtonGroupItemVariants = cva('relative flex cursor-pointer items-center justify-center border bg-card px-[15px] transition-all has-[[data-state=checked]]:z-10', {
+const itemVariants = 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 = useStableId();
+    const handleValueChange = (v) => {
+        if (!isControlled)
+            setInternalValue(v);
+        onValueChange?.(v);
+    };
+    const isVertical = orientation === 'vertical';
+    const stateColors = disabled ? disabledColors : error ? errorColors : defaultColors;
+    return (_jsx(RadioGroup, { value: currentValue, onValueChange: handleValueChange, disabled: disabled, className: 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: cn(childProps.className, isFirst && roundedStart, isLast && roundedEnd, !isFirst && '-ml-px') || undefined,
-            });
-        }
-        return child;
-    });
-    return (_jsx(RadioGroup, { ref: ref, className: cn('flex gap-0', className), ...props, children: childrenWithProps }));
-});
+            const isLast = index === options.length - 1;
+            const optionId = `${baseId}-${option.value}`;
+            return (_jsxs("div", { className: cn(itemVariants({ size }), stateColors, option.render && 'h-auto py-fds-sm', isVertical
+                    ? 'rounded-fds-md w-full'
+                    : cn(isFirst && 'rounded-s-fds-md', isLast && 'rounded-e-fds-md', !isFirst && '-ml-px'), disabled && 'cursor-not-allowed'), children: [_jsx(RadioGroupItem, { id: optionId, value: option.value, className: "sr-only", disabled: disabled }), _jsx("label", { htmlFor: optionId, className: 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 (_jsxs("div", { ref: ref, className: cn(radioButtonGroupItemVariants({ size, variant }), className), ...props, children: [_jsx(RadioGroupItem, { id: id, value: value, className: "sr-only" }), _jsx("label", { htmlFor: id, className: "cursor-pointer whitespace-nowrap font-medium after:absolute after:inset-0", style: { color: 'inherit', fontSize: 'inherit' }, children: children })] }));
-});
-RadioButtonGroupItem.displayName = 'RadioButtonGroupItem';
-export { RadioButtonGroup, RadioButtonGroupItem };
+export { RadioButtonGroup };

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

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as React from 'react';
@@ -7,7 +8,7 @@ const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
 });
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => {
-    return (_jsx(RadioGroupPrimitive.Item, { ref: ref, className: 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: _jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: _jsx("div", { className: "h-[8px] w-[8px] rounded-full bg-fds-blue" }) }) }));
+    return (_jsx(RadioGroupPrimitive.Item, { ref: ref, className: 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: _jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: _jsx("div", { className: "h-[8px] w-[8px] rounded-full bg-fds-blue-30 [[disabled]_&]:bg-fds-gray-30" }) }) }));
 });
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 export { RadioGroup, RadioGroupItem };

package/dist/esm/components/slider.js

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

package/dist/esm/components/switch.js

@@ -1,30 +1,49 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as SwitchPrimitives from '@radix-ui/react-switch';
+import * as React from 'react';
 import { cva } from 'class-variance-authority';
 import { cn } from '../lib/utils';
-const switchVariants = 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', {
+import { useStableId } from '../lib/use-stable-id';
+const switchVariants = 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 = 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) => (_jsx(SwitchPrimitives.Root, { className: cn(switchVariants({ size }), className), ...props, ref: ref, children: _jsx(SwitchPrimitives.Thumb, { className: cn(switchThumbVariants({ size })) }) })));
-Switch.displayName = SwitchPrimitives.Root.displayName;
+const Switch = React.forwardRef(({ checked, onCheckedChange, disabled, error, size = 'lg', children }, ref) => {
+    const switchId = 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 = (_jsx(SwitchPrimitives.Root, { ref: ref, id: switchId, checked: resolvedChecked, onCheckedChange: handleCheckedChange, disabled: disabled, "aria-invalid": error || undefined, className: 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: _jsx(SwitchPrimitives.Thumb, { className: cn(switchThumbVariants({ size })) }) }));
+    if (!children)
+        return track;
+    return (_jsxs("div", { className: "flex items-center gap-fds-sm", children: [track, _jsx("label", { htmlFor: switchId, className: 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 })] }));
+});
+Switch.displayName = 'Switch';
 export { Switch };