@freightos/freightwind 1.0.0

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

@@ -0,0 +1,63 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { cn } from '../lib/utils';
+import { Button } from './button';
+import { Input } from './input';
+import { Textarea } from './textarea';
+function InputGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "input-group", role: "group", className: cn('group/input-group relative flex w-full items-center rounded-fds-md border border-input-border bg-input outline-none transition-[color,box-shadow]', 'h-[32px] has-[>textarea]:h-auto', 
+        // Variants based on alignment.
+        'has-[>[data-align=inline-start]]:[&>input]:pl-2', 'has-[>[data-align=inline-end]]:[&>input]:pr-2', 'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3', 'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3', 
+        // Focus state.
+        'focus-within:border-[#2075bd] focus-within:shadow-[0_0_0_2px_var(--fds-color-primary-blue-20)]', 
+        // Error state.
+        'has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40', className), ...props }));
+}
+const inputGroupAddonVariants = cva("text-muted-foreground flex h-full cursor-text select-none items-center justify-center gap-2 bg-fds-gray-10 px-3 text-xs font-medium group-data-[disabled=true]/input-group:opacity-50 dark:bg-background [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
+    variants: {
+        align: {
+            'inline-start': 'order-first rounded-l-[3px] border-r border-input-border',
+            'inline-end': 'order-last rounded-r-[3px] border-l border-input-border',
+            'block-start': '[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5',
+            'block-end': '[.border-t]:pt-3 order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5',
+        },
+    },
+    defaultVariants: {
+        align: 'inline-start',
+    },
+});
+function InputGroupAddon({ className, align = 'inline-start', ...props }) {
+    return (_jsx("div", { role: "group", "data-slot": "input-group-addon", "data-align": align, className: cn(inputGroupAddonVariants({ align }), className), onClick: (e) => {
+            if (e.target.closest('button')) {
+                return;
+            }
+            e.currentTarget.parentElement?.querySelector('input')?.focus();
+        }, ...props }));
+}
+const inputGroupButtonVariants = cva('flex items-center gap-2 text-sm shadow-none', {
+    variants: {
+        size: {
+            xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+            sm: 'h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5',
+            'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
+            'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
+        },
+    },
+    defaultVariants: {
+        size: 'xs',
+    },
+});
+function InputGroupButton({ className, htmlType = 'button', type = 'text', size = 'xs', ...props }) {
+    return (_jsx(Button, { htmlType: htmlType, type: type, "data-size": size, className: cn(inputGroupButtonVariants({ size }), className), ...props }));
+}
+function InputGroupText({ className, ...props }) {
+    return (_jsx("span", { className: cn("flex items-center gap-2 text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none", className), ...props }));
+}
+function InputGroupInput({ className, ...props }) {
+    return (_jsx(Input, { "data-slot": "input-group-control", className: cn('flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent', className), ...props }));
+}
+function InputGroupTextarea({ className, ...props }) {
+    return (_jsx(Textarea, { "data-slot": "input-group-control", className: cn('flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent', className), ...props }));
+}
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, };

package/dist/esm/components/input-otp.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { Dot } from "lucide-react";
+import { cn } from "../lib/utils";
+const InputOTP = React.forwardRef(({ className, containerClassName, ...props }, ref) => (_jsx(OTPInput, { ref: ref, containerClassName: cn("flex items-center gap-2 has-[:disabled]:opacity-50", containerClassName), className: cn("disabled:cursor-not-allowed", className), ...props })));
+InputOTP.displayName = "InputOTP";
+const InputOTPGroup = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex items-center", className), ...props })));
+InputOTPGroup.displayName = "InputOTPGroup";
+const InputOTPSlot = React.forwardRef(({ index, className, ...props }, ref) => {
+    const inputOTPContext = React.useContext(OTPInputContext);
+    const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+    return (_jsxs("div", { ref: ref, className: cn("relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md", isActive && "z-10 ring-2 ring-ring ring-offset-background", className), ...props, children: [char, hasFakeCaret && (_jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" }) }))] }));
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+const InputOTPSeparator = React.forwardRef(({ ...props }, ref) => (_jsx("div", { ref: ref, role: "separator", ...props, children: _jsx(Dot, {}) })));
+InputOTPSeparator.displayName = "InputOTPSeparator";
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

package/dist/esm/components/input.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '../lib/utils';
+const inputVariants = cva('flex w-full rounded-fds-md border border-input-border bg-input text-foreground outline-none transition-[color,box-shadow] file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus:border-[#2075bd] focus:shadow-[0_0_0_2px_var(--fds-color-primary-blue-20)] disabled:cursor-not-allowed disabled:opacity-50', {
+    variants: {
+        inputSize: {
+            small: 'h-[24px] px-2 py-1 text-fds-sm',
+            default: 'h-[32px] px-3 py-2 text-fds-base',
+            large: 'h-[40px] px-3 py-2 text-fds-h6',
+        },
+    },
+    defaultVariants: {
+        inputSize: 'default',
+    },
+});
+const Input = React.forwardRef(({ className, type, inputSize, ...props }, ref) => {
+    return (_jsx("input", { type: type, className: cn(inputVariants({ inputSize, className })), ref: ref, ...props }));
+});
+Input.displayName = 'Input';
+export { Input };

package/dist/esm/components/label.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+const labelVariants = cva("text-fds-sm font-fds-semibold leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+const Label = React.forwardRef(({ className, ...props }, ref) => (_jsx(LabelPrimitive.Root, { ref: ref, className: cn(labelVariants(), className), ...props })));
+Label.displayName = LabelPrimitive.Root.displayName;
+export { Label };

package/dist/esm/components/menubar.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { cn } from "../lib/utils";
+function MenubarMenu({ ...props }) {
+    return _jsx(MenubarPrimitive.Menu, { ...props });
+}
+function MenubarGroup({ ...props }) {
+    return _jsx(MenubarPrimitive.Group, { ...props });
+}
+function MenubarPortal({ ...props }) {
+    return _jsx(MenubarPrimitive.Portal, { ...props });
+}
+function MenubarRadioGroup({ ...props }) {
+    return _jsx(MenubarPrimitive.RadioGroup, { ...props });
+}
+function MenubarSub({ ...props }) {
+    return _jsx(MenubarPrimitive.Sub, { "data-slot": "menubar-sub", ...props });
+}
+const Menubar = React.forwardRef(({ className, ...props }, ref) => (_jsx(MenubarPrimitive.Root, { ref: ref, className: cn("flex h-10 items-center space-x-1 rounded-md border bg-background p-1", className), ...props })));
+Menubar.displayName = MenubarPrimitive.Root.displayName;
+const MenubarTrigger = React.forwardRef(({ className, ...props }, ref) => (_jsx(MenubarPrimitive.Trigger, { ref: ref, className: cn("flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground", className), ...props })));
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
+const MenubarSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (_jsxs(MenubarPrimitive.SubTrigger, { ref: ref, className: cn("flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground", inset && "pl-8", className), ...props, children: [children, _jsx(ChevronRight, { className: "ml-auto h-4 w-4" })] })));
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
+const MenubarSubContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(MenubarPrimitive.SubContent, { ref: ref, className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]", className), ...props })));
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
+const MenubarContent = React.forwardRef(({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => (_jsx(MenubarPrimitive.Portal, { children: _jsx(MenubarPrimitive.Content, { ref: ref, align: align, alignOffset: alignOffset, sideOffset: sideOffset, className: cn("z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]", className), ...props }) })));
+MenubarContent.displayName = MenubarPrimitive.Content.displayName;
+const MenubarItem = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(MenubarPrimitive.Item, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className), ...props })));
+MenubarItem.displayName = MenubarPrimitive.Item.displayName;
+const MenubarCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (_jsxs(MenubarPrimitive.CheckboxItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), checked: checked, ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(MenubarPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), children] })));
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
+const MenubarRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(MenubarPrimitive.RadioItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(MenubarPrimitive.ItemIndicator, { children: _jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }), children] })));
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
+const MenubarLabel = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(MenubarPrimitive.Label, { ref: ref, className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className), ...props })));
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
+const MenubarSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(MenubarPrimitive.Separator, { ref: ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props })));
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
+const MenubarShortcut = ({ className, ...props }) => {
+    return (_jsx("span", { className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className), ...props }));
+};
+MenubarShortcut.displayname = "MenubarShortcut";
+export { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarSeparator, MenubarLabel, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarPortal, MenubarSubContent, MenubarSubTrigger, MenubarGroup, MenubarSub, MenubarShortcut, };

package/dist/esm/components/navigation-menu.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../lib/utils";
+const NavigationMenu = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(NavigationMenuPrimitive.Root, { ref: ref, className: cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className), ...props, children: [children, _jsx(NavigationMenuViewport, {})] })));
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
+const NavigationMenuList = React.forwardRef(({ className, ...props }, ref) => (_jsx(NavigationMenuPrimitive.List, { ref: ref, className: cn("group flex flex-1 list-none items-center justify-center space-x-1", className), ...props })));
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
+const NavigationMenuItem = NavigationMenuPrimitive.Item;
+const navigationMenuTriggerStyle = cva("group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent");
+const NavigationMenuTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(NavigationMenuPrimitive.Trigger, { ref: ref, className: cn(navigationMenuTriggerStyle(), "group", className), ...props, children: [children, " ", _jsx(ChevronDown, { className: "relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180", "aria-hidden": "true" })] })));
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
+const NavigationMenuContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(NavigationMenuPrimitive.Content, { ref: ref, className: cn("left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ", className), ...props })));
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
+const NavigationMenuLink = NavigationMenuPrimitive.Link;
+const NavigationMenuViewport = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { className: cn("absolute left-0 top-full flex justify-center"), children: _jsx(NavigationMenuPrimitive.Viewport, { className: cn("origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]", className), ref: ref, ...props }) })));
+NavigationMenuViewport.displayName =
+    NavigationMenuPrimitive.Viewport.displayName;
+const NavigationMenuIndicator = React.forwardRef(({ className, ...props }, ref) => (_jsx(NavigationMenuPrimitive.Indicator, { ref: ref, className: cn("top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in", className), ...props, children: _jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" }) })));
+NavigationMenuIndicator.displayName =
+    NavigationMenuPrimitive.Indicator.displayName;
+export { navigationMenuTriggerStyle, NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, };

package/dist/esm/components/pagination.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
+import { cn } from '../lib/utils';
+import { buttonVariants, } from './button';
+const Pagination = ({ className, ...props }) => (_jsx("nav", { role: "navigation", "aria-label": "pagination", className: cn('mx-auto flex w-full justify-center', className), ...props }));
+Pagination.displayName = 'Pagination';
+const PaginationContent = React.forwardRef(({ className, ...props }, ref) => (_jsx("ul", { ref: ref, className: cn('flex flex-row items-center gap-1', className), ...props })));
+PaginationContent.displayName = 'PaginationContent';
+const PaginationItem = React.forwardRef(({ className, ...props }, ref) => (_jsx("li", { ref: ref, className: cn('', className), ...props })));
+PaginationItem.displayName = 'PaginationItem';
+const PaginationLink = ({ className, isActive, icon = true, size, ...props }) => (_jsx("a", { "aria-current": isActive ? 'page' : undefined, className: cn(buttonVariants({
+        type: isActive ? 'secondary' : 'text',
+        size,
+    }), icon && 'aspect-square p-0', className), ...props }));
+PaginationLink.displayName = 'PaginationLink';
+const PaginationPrevious = ({ className, ...props }) => (_jsxs(PaginationLink, { "aria-label": "Go to previous page", icon: false, size: "medium", className: cn('gap-1 pl-2.5', className), ...props, children: [_jsx(ChevronLeft, { className: "h-4 w-4" }), _jsx("span", { children: "Previous" })] }));
+PaginationPrevious.displayName = 'PaginationPrevious';
+const PaginationNext = ({ className, ...props }) => (_jsxs(PaginationLink, { "aria-label": "Go to next page", icon: false, size: "medium", className: cn('gap-1 pr-2.5', className), ...props, children: [_jsx("span", { children: "Next" }), _jsx(ChevronRight, { className: "h-4 w-4" })] }));
+PaginationNext.displayName = 'PaginationNext';
+const PaginationEllipsis = ({ className, ...props }) => (_jsxs("span", { "aria-hidden": true, className: cn('flex h-9 w-9 items-center justify-center', className), ...props, children: [_jsx(MoreHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "More pages" })] }));
+PaginationEllipsis.displayName = 'PaginationEllipsis';
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, };

package/dist/esm/components/phone-input.js

@@ -0,0 +1,181 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/utils';
+import { getCountryFlag } from '../lib/countryUtils';
+import { IconCaretDown } from '@freightos/icons';
+import * as React from 'react';
+import { parsePhoneNumberFromString, AsYouType, getCountryCallingCode, } from 'libphonenumber-js';
+// Countries with dial codes
+export const PHONE_COUNTRIES = [
+    { code: 'US', name: 'United States', dialCode: '+1' },
+    { code: 'CN', name: 'China', dialCode: '+86' },
+    { code: 'GB', name: 'United Kingdom', dialCode: '+44' },
+    { code: 'CA', name: 'Canada', dialCode: '+1' },
+    { code: 'DE', name: 'Germany', dialCode: '+49' },
+    { code: 'FR', name: 'France', dialCode: '+33' },
+    { code: 'IT', name: 'Italy', dialCode: '+39' },
+    { code: 'ES', name: 'Spain', dialCode: '+34' },
+    { code: 'NL', name: 'Netherlands', dialCode: '+31' },
+    { code: 'BE', name: 'Belgium', dialCode: '+32' },
+    { code: 'CH', name: 'Switzerland', dialCode: '+41' },
+    { code: 'AT', name: 'Austria', dialCode: '+43' },
+    { code: 'SE', name: 'Sweden', dialCode: '+46' },
+    { code: 'NO', name: 'Norway', dialCode: '+47' },
+    { code: 'DK', name: 'Denmark', dialCode: '+45' },
+    { code: 'FI', name: 'Finland', dialCode: '+358' },
+    { code: 'PL', name: 'Poland', dialCode: '+48' },
+    { code: 'CZ', name: 'Czech Republic', dialCode: '+420' },
+    { code: 'IE', name: 'Ireland', dialCode: '+353' },
+    { code: 'PT', name: 'Portugal', dialCode: '+351' },
+    { code: 'GR', name: 'Greece', dialCode: '+30' },
+    { code: 'JP', name: 'Japan', dialCode: '+81' },
+    { code: 'KR', name: 'South Korea', dialCode: '+82' },
+    { code: 'IN', name: 'India', dialCode: '+91' },
+    { code: 'AU', name: 'Australia', dialCode: '+61' },
+    { code: 'NZ', name: 'New Zealand', dialCode: '+64' },
+    { code: 'SG', name: 'Singapore', dialCode: '+65' },
+    { code: 'HK', name: 'Hong Kong', dialCode: '+852' },
+    { code: 'TW', name: 'Taiwan', dialCode: '+886' },
+    { code: 'TH', name: 'Thailand', dialCode: '+66' },
+    { code: 'MY', name: 'Malaysia', dialCode: '+60' },
+    { code: 'ID', name: 'Indonesia', dialCode: '+62' },
+    { code: 'PH', name: 'Philippines', dialCode: '+63' },
+    { code: 'VN', name: 'Vietnam', dialCode: '+84' },
+    { code: 'BR', name: 'Brazil', dialCode: '+55' },
+    { code: 'MX', name: 'Mexico', dialCode: '+52' },
+    { code: 'AR', name: 'Argentina', dialCode: '+54' },
+    { code: 'CL', name: 'Chile', dialCode: '+56' },
+    { code: 'CO', name: 'Colombia', dialCode: '+57' },
+    { code: 'PE', name: 'Peru', dialCode: '+51' },
+    { code: 'ZA', name: 'South Africa', dialCode: '+27' },
+    { code: 'EG', name: 'Egypt', dialCode: '+20' },
+    { code: 'IL', name: 'Israel', dialCode: '+972' },
+    { code: 'AE', name: 'United Arab Emirates', dialCode: '+971' },
+    { code: 'SA', name: 'Saudi Arabia', dialCode: '+966' },
+    { code: 'TR', name: 'Turkey', dialCode: '+90' },
+    { code: 'RU', name: 'Russia', dialCode: '+7' },
+    { code: 'UA', name: 'Ukraine', dialCode: '+380' },
+];
+export const PhoneInput = ({ value = '', onChange, onError, placeholder = 'Enter phone number', defaultCountry = 'US', mostUsedCountries = ['US', 'CN'], countries = PHONE_COUNTRIES, className, disabled = false, }) => {
+    const [open, setOpen] = React.useState(false);
+    const [search, setSearch] = React.useState('');
+    const [selectedCountry, setSelectedCountry] = React.useState(() => countries.find((c) => c.code === defaultCountry) || countries[0]);
+    const [phoneNumber, setPhoneNumber] = React.useState('');
+    const containerRef = React.useRef(null);
+    const searchInputRef = React.useRef(null);
+    // Parse initial value to extract country and number
+    React.useEffect(() => {
+        if (value) {
+            try {
+                const parsed = parsePhoneNumberFromString(value);
+                if (parsed) {
+                    const countryCode = parsed.country;
+                    if (countryCode) {
+                        const country = countries.find((c) => c.code === countryCode);
+                        if (country) {
+                            setSelectedCountry(country);
+                        }
+                    }
+                    setPhoneNumber(parsed.nationalNumber);
+                }
+                else {
+                    // Try to extract dial code from value
+                    const matchingCountry = countries.find((c) => value.startsWith(c.dialCode));
+                    if (matchingCountry) {
+                        setSelectedCountry(matchingCountry);
+                        setPhoneNumber(value.slice(matchingCountry.dialCode.length).trim());
+                    }
+                    else {
+                        setPhoneNumber(value.replace(/^\+\d+\s*/, ''));
+                    }
+                }
+            }
+            catch {
+                setPhoneNumber(value);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Filter countries based on search
+    const filteredCountries = React.useMemo(() => {
+        const searchLower = search.toLowerCase();
+        const filtered = countries.filter((country) => country.name.toLowerCase().includes(searchLower) ||
+            country.code.toLowerCase().includes(searchLower) ||
+            country.dialCode.includes(search));
+        return filtered.sort((a, b) => {
+            const aIsMostUsed = mostUsedCountries.includes(a.code);
+            const bIsMostUsed = mostUsedCountries.includes(b.code);
+            if (aIsMostUsed && !bIsMostUsed)
+                return -1;
+            if (!aIsMostUsed && bIsMostUsed)
+                return 1;
+            return a.name.localeCompare(b.name);
+        });
+    }, [countries, search, mostUsedCountries]);
+    // Close on click outside
+    React.useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (containerRef.current &&
+                !containerRef.current.contains(e.target)) {
+                setOpen(false);
+                setSearch('');
+            }
+        };
+        if (open) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [open]);
+    const handleCountrySelect = (country) => {
+        setSelectedCountry(country);
+        setOpen(false);
+        setSearch('');
+        // Update full value with new country code
+        const fullNumber = `${country.dialCode} ${phoneNumber}`.trim();
+        onChange?.(fullNumber);
+        validateNumber(phoneNumber, country.code);
+    };
+    const handlePhoneChange = (e) => {
+        const input = e.target.value;
+        // Format as user types
+        const formatter = new AsYouType(selectedCountry.code);
+        const formatted = formatter.input(input);
+        // Extract just the national number part
+        const nationalNumber = formatted.replace(/^\+\d+\s*/, '');
+        setPhoneNumber(nationalNumber);
+        // Build full international number
+        const fullNumber = `${selectedCountry.dialCode} ${nationalNumber}`.trim();
+        onChange?.(fullNumber);
+        validateNumber(nationalNumber, selectedCountry.code);
+    };
+    const validateNumber = (number, countryCode) => {
+        if (!number || !onError)
+            return;
+        try {
+            const fullNumber = `${getCountryCallingCode(countryCode)}${number.replace(/\D/g, '')}`;
+            const parsed = parsePhoneNumberFromString(`+${fullNumber}`, countryCode);
+            onError?.(!parsed?.isValid());
+        }
+        catch {
+            onError?.(true);
+        }
+    };
+    const handleTriggerClick = () => {
+        if (!disabled) {
+            setOpen(!open);
+            if (!open) {
+                setTimeout(() => searchInputRef.current?.focus(), 0);
+            }
+        }
+    };
+    return (_jsxs("div", { ref: containerRef, className: cn('relative flex min-w-0', className), children: [_jsxs("button", { type: "button", onClick: handleTriggerClick, disabled: disabled, className: cn('flex h-[32px] shrink-0 items-center gap-fds-xs rounded-l-fds-md border border-r-0 border-input-border bg-input px-fds-sm text-fds-base outline-none transition-[color,box-shadow]', open &&
+                    'border-[#2075bd] shadow-[0_0_0_2px_var(--fds-color-primary-blue-20)]', disabled && 'cursor-not-allowed opacity-50'), children: [_jsx("img", { src: getCountryFlag(selectedCountry.code), alt: selectedCountry.code, className: "h-4 w-4 shrink-0 rounded-full object-cover" }), _jsx("span", { className: "text-fds-sm text-fds-gray-60", children: selectedCountry.dialCode }), _jsx(IconCaretDown, { size: 14, className: cn('shrink-0 text-fds-gray-60 transition-transform', open && 'rotate-180') })] }), _jsx("input", { type: "tel", value: phoneNumber, onChange: handlePhoneChange, placeholder: placeholder, disabled: disabled, className: cn('h-[32px] flex-1 rounded-r-fds-md border border-input-border bg-input px-fds-sm text-fds-base outline-none transition-[color,box-shadow] placeholder:text-muted-foreground', 'focus:border-[#2075bd] focus:shadow-[0_0_0_2px_var(--fds-color-primary-blue-20)]', disabled && 'cursor-not-allowed opacity-50') }), open && (_jsxs("div", { className: "absolute left-0 top-full z-50 mt-fds-xs w-[280px] rounded-fds-md border border-border bg-popover shadow-lg", children: [_jsx("div", { className: "border-b border-border p-fds-xs", children: _jsx("input", { ref: searchInputRef, type: "text", value: search, onChange: (e) => setSearch(e.target.value), placeholder: "Search country...", className: "h-[28px] w-full rounded-fds-sm border border-input-border bg-input px-fds-sm text-fds-sm outline-none focus:border-[#2075bd] focus:shadow-[0_0_0_2px_var(--fds-color-primary-blue-20)]" }) }), _jsx("div", { className: "max-h-[210px] overflow-y-auto p-fds-xs", children: filteredCountries.length === 0 ? (_jsx("div", { className: "px-fds-sm py-fds-md text-center text-fds-sm text-muted-foreground", children: "No countries found" })) : (filteredCountries.map((country, index) => {
+                            const isSelected = country.code === selectedCountry.code;
+                            const isMostUsed = mostUsedCountries.includes(country.code);
+                            const isLastMostUsed = isMostUsed &&
+                                !search &&
+                                index === mostUsedCountries.length - 1 &&
+                                filteredCountries.length > mostUsedCountries.length;
+                            return (_jsxs(React.Fragment, { children: [_jsxs("div", { onClick: () => handleCountrySelect(country), className: cn('flex cursor-pointer items-center gap-fds-sm rounded-fds-sm px-fds-sm py-fds-xs hover:bg-accent', isSelected && 'bg-accent'), children: [_jsx("img", { src: getCountryFlag(country.code), alt: country.code, className: "h-6 w-6 shrink-0 rounded-full object-cover" }), _jsx("span", { className: "flex-1 truncate text-fds-base", children: country.name }), _jsx("span", { className: "text-fds-sm text-fds-gray-60", children: country.dialCode })] }), isLastMostUsed && (_jsx("div", { className: "my-fds-xs h-px bg-border" }))] }, country.code));
+                        })) })] }))] }));
+};

package/dist/esm/components/popover.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cn } from "../lib/utils";
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, showArrow = false, ...props }, ref) => (_jsx(PopoverPrimitive.Portal, { children: _jsxs(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, className: cn("z-[1300] w-72 rounded-md bg-popover p-4 text-popover-foreground shadow-fds-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]", className), ...props, children: [props.children, showArrow && (_jsx(PopoverPrimitive.Arrow, { className: "fill-popover", width: 16, height: 8 }))] }) })));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+const PopoverArrow = PopoverPrimitive.Arrow;
+export { Popover, PopoverTrigger, PopoverContent, PopoverArrow };

package/dist/esm/components/progress.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { cn } from "../lib/utils";
+const Progress = React.forwardRef(({ className, value, ...props }, ref) => (_jsx(ProgressPrimitive.Root, { ref: ref, className: cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className), ...props, children: _jsx(ProgressPrimitive.Indicator, { className: "h-full w-full flex-1 bg-primary transition-all", style: { transform: `translateX(-${100 - (value || 0)}%)` } }) })));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+export { Progress };

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/utils';
+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', {
+    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
+        },
+    },
+    defaultVariants: {
+        size: 'medium',
+        variant: 'default',
+    },
+});
+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 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 }));
+});
+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 };

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as React from 'react';
+import { cn } from '../lib/utils';
+const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(RadioGroupPrimitive.Root, { className: cn('grid gap-2', className), ...props, ref: 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" }) }) }));
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+export { RadioGroup, RadioGroupItem };

package/dist/esm/components/resizable.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GripVertical } from 'lucide-react';
+import * as ResizablePrimitive from 'react-resizable-panels';
+import { cn } from '../lib/utils';
+const ResizablePanelGroup = ({ className, ...props }) => (_jsx(ResizablePrimitive.PanelGroup, { className: cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className), ...props }));
+const ResizablePanel = ResizablePrimitive.Panel;
+const ResizableHandle = ({ withHandle, className, ...props }) => (_jsx(ResizablePrimitive.PanelResizeHandle, { className: cn('relative flex w-px items-center justify-center bg-fds-gray-20 dark:bg-fds-gray-70 after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-fds-blue-50 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90', className), ...props, children: withHandle && (_jsx("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border border-fds-gray-20 bg-fds-gray-10 dark:border-fds-gray-70 dark:bg-fds-gray-80", children: _jsx(GripVertical, { className: "h-2.5 w-2.5" }) })) }));
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };