@freightos/freightwind 1.0.0 → 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Freightos
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# @freightos/freightwind
+
+FreightWind Design System — React UI components for Freightos applications.
+
+## Installation
+
+```bash
+npm install @freightos/freightwind @freightos/icons
+```
+
+## Usage
+
+```tsx
+import { Button, Alert, Badge } from '@freightos/freightwind';
+import '@freightos/freightwind/tokens.css';
+```
+
+Components require Tailwind CSS v4 with the FDS design tokens loaded via `tokens.css`.
+
+## Peer Dependencies
+
+- `react` >= 18
+- `react-dom` >= 18
+- `@freightos/icons` >= 1.0.0
+
+## License
+
+MIT

package/dist/cjs/components/alert.js

@@ -37,40 +37,57 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Alert = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_1 = require("@freightos/icons");
+const react_1 = require("motion/react");
 const React = __importStar(require("react"));
 const utils_1 = require("../lib/utils");
 const alertConfig = {
     info: {
         icon: icons_1.IconInfoCircled,
-        borderColor: 'border-l-fds-blue',
-        iconColor: 'text-fds-blue',
+        borderColor: 'border-l-fds-blue-30',
+        iconColor: 'text-fds-blue-30',
     },
     success: {
         icon: icons_1.IconCheckCircled,
-        borderColor: 'border-l-fds-green',
-        iconColor: 'text-fds-green',
+        borderColor: 'border-l-fds-green-30',
+        iconColor: 'text-fds-green-30',
     },
     warning: {
-        icon: icons_1.IconAlertCircled,
-        borderColor: 'border-l-fds-orange',
-        iconColor: 'text-fds-orange',
+        icon: icons_1.IconRisk,
+        borderColor: 'border-l-fds-yellow-30',
+        iconColor: 'text-fds-yellow-30',
     },
     error: {
         icon: icons_1.IconNegativeCircled,
-        borderColor: 'border-l-fds-red',
-        iconColor: 'text-fds-red',
+        borderColor: 'border-l-fds-red-30',
+        iconColor: 'text-fds-red-30',
+    },
+    special: {
+        icon: icons_1.IconInfoCircled,
+        borderColor: 'border-l-fds-purple-1',
+        iconColor: 'text-fds-purple-1',
     },
 };
-const Alert = ({ type = 'info', message, description, closable = false, onClose, className, }) => {
+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 ((0, jsx_runtime_1.jsxs)("div", { role: "alert", className: (0, utils_1.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: [(0, jsx_runtime_1.jsx)(Icon, { size: 18, className: (0, utils_1.cn)('mt-px shrink-0', config.iconColor) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-fds-base font-fds-medium text-foreground", children: message }), description && ((0, jsx_runtime_1.jsx)("div", { className: "mt-fds-xs text-fds-sm text-fds-gray-60", children: description }))] }), closable && ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(icons_1.IconClose, { size: 16 }) }))] }));
+    if (!visible)
+        return null;
+    return ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("div", { style: { overflow: 'hidden' }, children: (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { initial: false, children: !closing && ((0, jsx_runtime_1.jsxs)(react_1.motion.div, { role: "alert", exit: { y: -20 }, transition: { duration: 0.15, ease: 'easeIn' }, className: (0, utils_1.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: [(0, jsx_runtime_1.jsx)(Icon, { size: title ? 20 : 18, className: (0, utils_1.cn)('shrink-0', title && 'mt-[3px]', config.iconColor) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [title && (0, jsx_runtime_1.jsx)("div", { className: "text-fds-h5 font-fds-bold leading-fds-title text-foreground", children: title }), message && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('text-fds-base text-fds-gray-80 dark:text-white', title && 'mt-fds-xs'), children: message }))] }), showCta && (0, jsx_runtime_1.jsx)("div", { className: "shrink-0", children: callToAction }), showClose && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleClose, className: "shrink-0 cursor-pointer text-fds-gray-90 hover:text-fds-gray-100 transition-colors", "aria-label": "Close alert", children: (0, jsx_runtime_1.jsx)(icons_1.IconClose, { size: 16 }) }))] })) }) }) }));
 };
 exports.Alert = Alert;

package/dist/cjs/components/avatar.js

@@ -1,75 +1,70 @@
 "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;
-    };
-})();
+'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AvatarImage = exports.AvatarFallback = exports.Avatar = void 0;
+exports.Avatar = Avatar;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const utils_1 = require("../lib/utils");
-const AvatarPrimitive = __importStar(require("@radix-ui/react-avatar"));
+const icons_1 = require("@freightos/icons");
 const class_variance_authority_1 = require("class-variance-authority");
-const React = __importStar(require("react"));
-const avatarVariants = (0, class_variance_authority_1.cva)('relative flex shrink-0 overflow-hidden rounded-full', {
+const icon_utils_1 = require("../lib/icon-utils");
+const FLAGS_BASE_URL = 'https://freightwind.freightos.com/flags/1x1';
+// --- Component ---
+const avatarVariants = (0, class_variance_authority_1.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 ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(avatarVariants({ size, bordered }), className), children: (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)("div", { className: classes, children: (0, jsx_runtime_1.jsx)("img", { src: src, alt: alt ?? '', className: "h-full w-full object-cover" }) }));
     }
-    return ((0, jsx_runtime_1.jsx)(AvatarPrimitive.Root, { ref: ref, className: (0, utils_1.cn)(avatarVariants({ size, bordered }), className), ...props }));
-});
-exports.Avatar = Avatar;
-Avatar.displayName = AvatarPrimitive.Root.displayName;
-const AvatarImage = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(AvatarPrimitive.Image, { ref: ref, className: (0, utils_1.cn)('aspect-square h-full w-full', className), ...props })));
-exports.AvatarImage = AvatarImage;
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(AvatarPrimitive.Fallback, { ref: ref, className: (0, utils_1.cn)('flex h-full w-full items-center justify-center rounded-full bg-muted', className), ...props })));
-exports.AvatarFallback = AvatarFallback;
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+    if (flag) {
+        const flagUrl = `${FLAGS_BASE_URL}/${flag.trim().toLowerCase()}.svg`;
+        return ((0, jsx_runtime_1.jsx)("div", { className: classes, children: (0, jsx_runtime_1.jsx)("img", { src: flagUrl, alt: alt ?? flag.toUpperCase(), className: "h-full w-full object-cover" }) }));
+    }
+    if (title) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: classes, role: "img", "aria-label": alt ?? title, children: (0, jsx_runtime_1.jsx)("span", { className: "font-fds-semibold leading-none", "aria-hidden": "true", children: title.charAt(0).toUpperCase() }) }));
+    }
+    if (icon) {
+        const IconComp = icon_utils_1.iconMap[icon];
+        if (IconComp) {
+            return ((0, jsx_runtime_1.jsx)("div", { className: classes, role: "img", "aria-label": alt ?? icon, children: (0, jsx_runtime_1.jsx)(IconComp, { size: iconSize }) }));
+        }
+    }
+    // Default: user icon placeholder
+    return ((0, jsx_runtime_1.jsx)("div", { className: classes, role: "img", "aria-label": alt ?? 'User avatar', children: (0, jsx_runtime_1.jsx)(icons_1.IconUser, { size: iconSize }) }));
+}

package/dist/cjs/components/badge.js

@@ -1,24 +1,48 @@
 "use strict";
+'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.badgeVariants = void 0;
 exports.Badge = Badge;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const class_variance_authority_1 = require("class-variance-authority");
 const utils_1 = require("../lib/utils");
-const badgeVariants = (0, class_variance_authority_1.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",
-    },
-});
-exports.badgeVariants = badgeVariants;
-function Badge({ className, variant, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(badgeVariants({ variant }), className), ...props }));
+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 = (0, utils_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: "relative inline-flex", children: [children, showValue && ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)(badgeClasses, 'absolute', positionClasses[position]), children: display }))] }));
+    }
+    // Standalone badge
+    if (value != null) {
+        if (!showValue)
+            return null;
+        return ((0, jsx_runtime_1.jsx)("span", { className: badgeClasses, children: display }));
+    }
+    // Status badge
+    if (status) {
+        return ((0, jsx_runtime_1.jsxs)("span", { className: "inline-flex items-center gap-fds-sm", children: [(0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('h-[6px] w-[6px] rounded-full', statusDotColors[status]) }), text && (0, jsx_runtime_1.jsx)("span", { className: "text-fds-base text-fds-gray-80", children: text })] }));
+    }
+    return null;
 }

package/dist/cjs/components/button.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);
@@ -37,40 +38,50 @@ exports.buttonVariants = exports.Button = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const class_variance_authority_1 = require("class-variance-authority");
 const React = __importStar(require("react"));
+const icon_utils_1 = require("../lib/icon-utils");
 const utils_1 = require("../lib/utils");
-const buttonVariants = (0, class_variance_authority_1.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', {
+const tooltip_1 = require("./tooltip");
+const buttonVariants = (0, class_variance_authority_1.cva)('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',
     },
 });
 exports.buttonVariants = buttonVariants;
-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 ((0, jsx_runtime_1.jsx)("button", { type: htmlType, className: (0, utils_1.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 ((0, jsx_runtime_1.jsx)("svg", { className: "animate-spin", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.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 ? icon_utils_1.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 = ((0, jsx_runtime_1.jsxs)("button", { className: (0, utils_1.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 ? (0, jsx_runtime_1.jsx)(LoadingSpinner, {}) : IconComp && (0, jsx_runtime_1.jsx)(IconComp, { size: iconSize }), children] }));
+    if (tooltip) {
+        return (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { message: tooltip, children: button });
+    }
+    return button;
 });
 exports.Button = Button;
 Button.displayName = 'Button';

package/dist/cjs/components/checkbox.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);
@@ -37,8 +38,25 @@ 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" }) }) })));
+const use_stable_id_1 = require("../lib/use-stable-id");
+const Checkbox = React.forwardRef(({ checked, onCheckedChange, disabled, error, children, }, ref) => {
+    const checkboxId = (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 box = ((0, jsx_runtime_1.jsx)(CheckboxPrimitive.Root, { ref: ref, id: checkboxId, checked: resolvedChecked, onCheckedChange: handleCheckedChange, disabled: disabled, "aria-invalid": error || undefined, className: (0, utils_1.cn)('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: (0, jsx_runtime_1.jsx)(CheckboxPrimitive.Indicator, { className: (0, utils_1.cn)('flex items-center justify-center', disabled ? 'text-fds-gray-60' : error && resolvedChecked !== true ? 'text-fds-red-30' : 'text-fds-white'), children: resolvedChecked === 'indeterminate' ? ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('block size-2 rounded-[1px]', disabled ? 'bg-fds-gray-60' : error ? 'bg-fds-red-30' : 'bg-fds-blue-30') })) : ((0, jsx_runtime_1.jsx)("svg", { width: "11", height: "9", viewBox: "0 0 11 9", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-fds-sm", children: [box, (0, jsx_runtime_1.jsx)("label", { htmlFor: checkboxId, className: (0, utils_1.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 })] }));
+});
 exports.Checkbox = Checkbox;
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+Checkbox.displayName = 'Checkbox';

package/dist/cjs/components/chip.js

@@ -1,26 +1,84 @@
 "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.chipVariants = void 0;
 exports.Chip = Chip;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const class_variance_authority_1 = require("class-variance-authority");
+const React = __importStar(require("react"));
 const icons_1 = require("@freightos/icons");
+const icon_utils_1 = require("../lib/icon-utils");
 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', {
+const chipVariants = (0, class_variance_authority_1.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',
     },
 });
 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" }) }))] }));
+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 ? icon_utils_1.iconMap[icon] : null;
+    const iconOnly = !!icon && !children;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.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) && ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.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 && (0, jsx_runtime_1.jsx)(IconComp, { size: 12, className: children ? 'mr-fds-sm' : '' }), children, closable && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleClose, "aria-label": "Remove", className: "ml-fds-sm inline-flex cursor-pointer items-center hover:opacity-70", children: (0, jsx_runtime_1.jsx)(icons_1.IconClose, { size: 10 }) }))] }));
 }

package/dist/cjs/components/message.js

@@ -0,0 +1,38 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.message = exports.MessageProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@freightos/icons");
+const sonner_1 = require("sonner");
+const messageConfig = {
+    success: { icon: icons_1.IconCheckCircled, bg: "bg-[rgba(71,169,110,1)]" },
+    info: { icon: icons_1.IconInfoCircled, bg: "bg-[rgba(32,117,189,1)]" },
+    warning: { icon: icons_1.IconRisk, bg: "bg-[rgba(237,175,7,1)]" },
+    error: { icon: icons_1.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 ((0, jsx_runtime_1.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();
+            sonner_1.toast.dismiss(toastId);
+        } : undefined, children: [(0, jsx_runtime_1.jsx)(Icon, { size: 16, className: "shrink-0" }), (0, jsx_runtime_1.jsx)("span", { className: "text-fds-h6 font-fds-regular leading-fds-body", children: title })] }));
+}
+function showMessage(variant, title, options) {
+    return sonner_1.toast.custom((id) => ((0, jsx_runtime_1.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),
+};
+exports.message = message;
+const MessageProvider = ({ duration = 3000, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(sonner_1.Toaster, { position: "top-center", duration: duration, gap: 8, toastOptions: { style: { left: 0, right: 0 } }, ...props }));
+};
+exports.MessageProvider = MessageProvider;