@freightos/freightwind 1.0.0 → 1.1.1

package/dist/esm/components/tooltip.js

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

package/dist/esm/index.js

@@ -1,67 +1,19 @@
-// FreightWind Design System - Component Library
-// @freightos/freightwind
-// Utility
-export { cn } from './lib/utils';
-// Hooks
-export { useToast, toast } from './hooks/use-toast';
+'use client';
 // Components
-export * from './components/accordion';
-export * from './components/alert';
-export * from './components/aspect-ratio';
-export * from './components/avatar';
-export * from './components/badge';
-export * from './components/breadcrumb';
-export * from './components/button';
-export * from './components/calendar';
-export * from './components/card';
-export * from './components/chart';
-export * from './components/checkbox';
-export * from './components/chip';
-export * from './components/collapsible';
-export * from './components/command';
-export * from './components/context-menu';
-export * from './components/country-select';
-export * from './components/date-picker';
-export * from './components/date-range-picker';
-export * from './components/date-time-picker';
-export * from './components/dialog';
-export * from './components/drawer';
-export * from './components/dropdown-menu';
-export * from './components/empty';
-export * from './components/file-preview';
-export * from './components/form';
-export * from './components/inline-edit';
-export * from './components/input';
-export * from './components/input-group';
-export * from './components/input-otp';
-export * from './components/label';
-export * from './components/menubar';
-export * from './components/navigation-menu';
-export * from './components/pagination';
-export * from './components/phone-input';
-export * from './components/popover';
-export * from './components/progress';
-export * from './components/radio-button-group';
-export * from './components/radio-group';
-export * from './components/resizable';
-export * from './components/rich-text-editor';
-export * from './components/scroll-area';
-export * from './components/select';
-export * from './components/separator';
-export * from './components/sheet';
-export * from './components/skeleton';
-export * from './components/slider';
-export { Toaster as SonnerToaster } from './components/sonner';
-export * from './components/spinner';
-export * from './components/stepper';
-export * from './components/steps';
-export * from './components/switch';
-export * from './components/table';
-export * from './components/tabs';
-export * from './components/textarea';
-export * from './components/time-picker';
-export * from './components/toast';
-export * from './components/toaster';
-export * from './components/toggle';
-export * from './components/toggle-group';
-export * from './components/tooltip';
+export { Alert } from './components/alert';
+export { Avatar } from './components/avatar';
+export { Badge } from './components/badge';
+export { Button, buttonVariants } from './components/button';
+export { Checkbox } from './components/checkbox';
+export { Chip, chipVariants } from './components/chip';
+export { MessageProvider, message } from './components/message';
+export { PopConfirm } from './components/pop-confirm';
+export { RadioButtonGroup } from './components/radio-button-group';
+export { RadioGroup, RadioGroupItem } from './components/radio-group';
+export { Slider } from './components/slider';
+export { Switch } from './components/switch';
+export { Tooltip } from './components/tooltip';
+// Utilities
+export { cn } from './lib/utils';
+export { useStableId } from './lib/use-stable-id';
+export { iconMap } from './lib/icon-utils';

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

@@ -0,0 +1 @@
+export { iconMap } from '@freightos/icons';

package/dist/esm/lib/use-stable-id.js

@@ -0,0 +1,6 @@
+import * as React from 'react';
+let counter = 0;
+export function useStableId(prefix = 'fw') {
+    const [id] = React.useState(() => `${prefix}-${++counter}`);
+    return id;
+}

package/dist/esm/lib/utils.js

@@ -1,5 +1,22 @@
 import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { extendTailwindMerge } from "tailwind-merge";
+const twMerge = extendTailwindMerge({
+    extend: {
+        classGroups: {
+            "font-size": [
+                "text-fds-xs",
+                "text-fds-sm",
+                "text-fds-base",
+                "text-fds-h6",
+                "text-fds-h5",
+                "text-fds-h4",
+                "text-fds-h3",
+                "text-fds-h2",
+                "text-fds-h1",
+            ],
+        },
+    },
+});
 export function cn(...inputs) {
     return twMerge(clsx(inputs));
 }

package/dist/types/components/alert.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
-type AlertType = 'info' | 'success' | 'warning' | 'error';
+type AlertVariant = 'info' | 'success' | 'warning' | 'error' | 'special';
 interface AlertProps {
-    type?: AlertType;
-    message: string;
-    description?: string;
+    variant?: AlertVariant;
+    title?: string;
+    message?: string;
     closable?: boolean;
     onClose?: () => void;
-    className?: string;
+    callToAction?: React.ReactNode;
 }
 export declare const Alert: React.FC<AlertProps>;
 export {};

package/dist/types/components/avatar.d.ts

@@ -1,19 +1,14 @@
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import { type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-declare const avatarVariants: (props?: ({
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
-    bordered?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type BaseAvatarProps = Omit<React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, 'type'> & VariantProps<typeof avatarVariants>;
-export type AvatarProps = BaseAvatarProps & ({
-    type?: 'default';
-    country?: never;
-} | {
-    type: 'flag';
-    country: string;
-});
-declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
-declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
-declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export { Avatar, AvatarFallback, AvatarImage };
+import { type IconName } from '../lib/icon-utils';
+export type { IconName };
+export interface AvatarProps {
+    variant?: 'default' | 'info' | 'secondary' | 'warning' | 'neutral' | 'positive' | 'filled' | 'ghost';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    bordered?: boolean;
+    icon?: IconName;
+    title?: string;
+    flag?: string;
+    src?: string;
+    alt?: string;
+}
+declare function Avatar({ variant, size, bordered, icon, title, flag, src, alt, }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export { Avatar };

package/dist/types/components/badge.d.ts

@@ -1,9 +1,23 @@
-import * as React from "react";
-import { type VariantProps } from "class-variance-authority";
-declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "secondary" | "outline" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+import * as React from 'react';
+export type BadgeStatus = 'success' | 'error' | 'default' | 'processing' | 'warning';
+export type BadgeSize = 'default' | 'large';
+export type BadgeVariant = 'default' | 'info' | 'neutral';
+export type BadgePosition = 'top-end' | 'bottom-end';
+export interface BadgeProps {
+    /** Value displayed in the badge. Numbers cap at 99+. Strings render as-is. */
+    value?: number | string;
+    /** Size of the badge. */
+    size?: BadgeSize;
+    /** Visual variant for the badge. */
+    variant?: BadgeVariant;
+    /** Status variant with a colored dot and text label. */
+    status?: BadgeStatus;
+    /** Text label shown next to the status dot. */
+    text?: string;
+    /** Position of the badge when wrapping children. */
+    position?: BadgePosition;
+    /** When children are provided, the badge is positioned relative to the child. */
+    children?: React.ReactNode;
 }
-declare function Badge({ className, variant, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
-export { Badge, badgeVariants };
+declare function Badge({ value, size, variant, position, status, text, children }: BadgeProps): import("react/jsx-runtime").JSX.Element | null;
+export { Badge };

package/dist/types/components/button.d.ts

@@ -1,14 +1,20 @@
-import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
+import { type IconName } from '../lib/icon-utils';
+export type { IconName };
 declare const buttonVariants: (props?: ({
-    type?: "text" | "default" | "secondary" | "tertiary" | "danger" | null | undefined;
-    size?: "small" | "medium" | "large" | null | undefined;
-    padding?: "small" | "default" | "large" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'>, VariantProps<typeof buttonVariants> {
-    asChild?: boolean;
-    htmlType?: 'button' | 'submit' | 'reset';
-    icon?: boolean;
+    variant?: "link" | "default" | "toggle" | "secondary" | "tertiary" | "danger" | "danger-ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export type ButtonVariant = 'default' | 'secondary' | 'tertiary' | 'link' | 'danger' | 'danger-ghost' | 'toggle';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className'> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    icon?: IconName;
+    loading?: boolean;
+    active?: boolean;
+    tooltip?: string;
+    fullWidth?: boolean;
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { Button, buttonVariants };

package/dist/types/components/checkbox.d.ts

@@ -1,4 +1,10 @@
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as React from 'react';
-declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export interface CheckboxProps {
+    checked?: boolean | 'indeterminate';
+    onCheckedChange?: (checked: boolean | 'indeterminate') => void;
+    disabled?: boolean;
+    error?: boolean;
+    children?: string;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
 export { Checkbox };

package/dist/types/components/chip.d.ts

@@ -1,10 +1,16 @@
-import { type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-declare const chipVariants: (props?: ({
-    type?: "default" | "warning" | "secondary" | "neutral" | "positive" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export interface ChipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClose'>, VariantProps<typeof chipVariants> {
-    onClose?: (e: React.MouseEvent<HTMLSpanElement>) => void;
+import { type IconName } from '../lib/icon-utils';
+export type { IconName };
+export type ChipVariant = 'default' | 'neutral' | 'info' | 'highlight' | 'warning' | 'success' | 'notice' | 'error';
+export interface ChipProps {
+    variant?: ChipVariant;
+    icon?: IconName;
+    closable?: boolean;
+    onClose?: () => void;
+    badge?: number | string;
+    children?: string;
 }
-declare function Chip({ className, type, onClose, children, ...props }: ChipProps): import("react/jsx-runtime").JSX.Element;
+declare const chipVariants: (props?: ({
+    variant?: "info" | "success" | "warning" | "error" | "default" | "neutral" | "highlight" | "notice" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare function Chip({ variant, icon, closable, onClose, badge, children, }: ChipProps): import("react/jsx-runtime").JSX.Element | null;
 export { Chip, chipVariants };

package/dist/types/components/message.d.ts

@@ -0,0 +1,14 @@
+import { Toaster as Sonner } from "sonner";
+type MessageOptions = {
+    onClick?: () => void;
+    duration?: number;
+};
+declare const message: {
+    success: (title: string, options?: MessageOptions) => string | number;
+    info: (title: string, options?: MessageOptions) => string | number;
+    warning: (title: string, options?: MessageOptions) => string | number;
+    error: (title: string, options?: MessageOptions) => string | number;
+};
+type MessageProviderProps = React.ComponentProps<typeof Sonner>;
+declare const MessageProvider: ({ duration, ...props }: MessageProviderProps) => import("react/jsx-runtime").JSX.Element;
+export { MessageProvider, message };

package/dist/types/components/pop-confirm.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import type { FreightosColor } from '@freightos/icons';
+import { type ButtonVariant } from './button';
+import { type IconName } from '../lib/icon-utils';
+import type { TooltipPlacement } from './tooltip';
+export interface PopConfirmProps {
+    title: string;
+    onConfirm: () => void;
+    onCancel?: () => void;
+    placement?: TooltipPlacement;
+    children: React.ReactElement;
+    slotProps?: {
+        icon?: {
+            name?: IconName;
+            color?: FreightosColor | (string & {});
+        };
+        confirmButton?: {
+            children?: React.ReactNode;
+            variant?: ButtonVariant;
+        };
+        cancelButton?: {
+            children?: React.ReactNode;
+            variant?: ButtonVariant;
+        };
+    };
+}
+declare function PopConfirm({ title, onConfirm, onCancel, placement, children, slotProps, }: PopConfirmProps): import("react/jsx-runtime").JSX.Element;
+export { PopConfirm };

package/dist/types/components/radio-button-group.d.ts

@@ -1,17 +1,22 @@
-import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
-import { RadioGroup } from './radio-group';
-declare const radioButtonGroupItemVariants: (props?: ({
-    size?: "small" | "medium" | "large" | null | undefined;
-    variant?: "default" | "custom" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-interface RadioButtonGroupProps extends React.ComponentPropsWithoutRef<typeof RadioGroup>, VariantProps<typeof radioButtonGroupItemVariants> {
-    borderRadius?: 'lg' | 'full';
-}
-declare const RadioButtonGroup: React.ForwardRefExoticComponent<RadioButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
-interface RadioButtonGroupItemProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof radioButtonGroupItemVariants> {
+interface RadioButtonGroupOption {
     value: string;
-    id: string;
+    label: string;
+    render?: () => React.ReactNode;
+}
+interface RadioButtonGroupProps {
+    options: RadioButtonGroupOption[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    size?: 'sm' | 'md' | 'lg';
+    orientation?: 'horizontal' | 'vertical';
+    disabled?: boolean;
+    error?: boolean;
+}
+declare function RadioButtonGroup({ options, value, defaultValue, onValueChange, size, orientation, disabled, error, }: RadioButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+declare namespace RadioButtonGroup {
+    var displayName: string;
 }
-declare const RadioButtonGroupItem: React.ForwardRefExoticComponent<RadioButtonGroupItemProps & React.RefAttributes<HTMLDivElement>>;
-export { RadioButtonGroup, RadioButtonGroupItem };
+export { RadioButtonGroup };
+export type { RadioButtonGroupOption, RadioButtonGroupProps };

package/dist/types/components/slider.d.ts

@@ -1,4 +1,12 @@
-import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as React from 'react';
-declare const Slider: React.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export interface SliderProps {
+    value?: number[];
+    defaultValue?: number[];
+    onValueChange?: (value: number[]) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+}
+declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLSpanElement>>;
 export { Slider };

package/dist/types/components/switch.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import * as SwitchPrimitives from '@radix-ui/react-switch';
-import { type VariantProps } from 'class-variance-authority';
-declare const switchVariants: (props?: ({
-    size?: "small" | "default" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>, VariantProps<typeof switchVariants> {
+export interface SwitchProps {
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    error?: boolean;
+    size?: 'lg' | 'sm';
+    children?: string;
 }
 declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
 export { Switch };

package/dist/types/components/tooltip.d.ts

@@ -1,7 +1,10 @@
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as React from 'react';
-declare const TooltipProvider: ({ children, ...props }: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>) => import("react/jsx-runtime").JSX.Element;
-declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
-declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+type Side = 'top' | 'bottom' | 'start' | 'end';
+export type TooltipPlacement = Side | `${Side}-${'start' | 'end'}`;
+export interface TooltipProps {
+    message: React.ReactNode;
+    placement?: TooltipPlacement;
+    children: React.ReactElement;
+}
+declare function Tooltip({ message, placement, children }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export { Tooltip };

package/dist/types/index.d.ts

@@ -1,62 +1,26 @@
+export { Alert } from './components/alert';
+export { Avatar } from './components/avatar';
+export { Badge } from './components/badge';
+export { Button, buttonVariants } from './components/button';
+export { Checkbox } from './components/checkbox';
+export { Chip, chipVariants } from './components/chip';
+export { MessageProvider, message } from './components/message';
+export { PopConfirm } from './components/pop-confirm';
+export { RadioButtonGroup } from './components/radio-button-group';
+export { RadioGroup, RadioGroupItem } from './components/radio-group';
+export { Slider } from './components/slider';
+export { Switch } from './components/switch';
+export { Tooltip } from './components/tooltip';
+export type { IconName } from './lib/icon-utils';
+export type { ButtonVariant, ButtonSize, ButtonProps } from './components/button';
+export type { BadgeStatus, BadgeSize, BadgeVariant, BadgePosition, BadgeProps } from './components/badge';
+export type { CheckboxProps } from './components/checkbox';
+export type { ChipVariant, ChipProps } from './components/chip';
+export type { PopConfirmProps } from './components/pop-confirm';
+export type { RadioButtonGroupOption, RadioButtonGroupProps } from './components/radio-button-group';
+export type { SliderProps } from './components/slider';
+export type { SwitchProps } from './components/switch';
+export type { TooltipPlacement, TooltipProps } from './components/tooltip';
 export { cn } from './lib/utils';
-export { useToast, toast } from './hooks/use-toast';
-export * from './components/accordion';
-export * from './components/alert';
-export * from './components/aspect-ratio';
-export * from './components/avatar';
-export * from './components/badge';
-export * from './components/breadcrumb';
-export * from './components/button';
-export * from './components/calendar';
-export * from './components/card';
-export * from './components/chart';
-export * from './components/checkbox';
-export * from './components/chip';
-export * from './components/collapsible';
-export * from './components/command';
-export * from './components/context-menu';
-export * from './components/country-select';
-export * from './components/date-picker';
-export * from './components/date-range-picker';
-export * from './components/date-time-picker';
-export * from './components/dialog';
-export * from './components/drawer';
-export * from './components/dropdown-menu';
-export * from './components/empty';
-export * from './components/file-preview';
-export * from './components/form';
-export * from './components/inline-edit';
-export * from './components/input';
-export * from './components/input-group';
-export * from './components/input-otp';
-export * from './components/label';
-export * from './components/menubar';
-export * from './components/navigation-menu';
-export * from './components/pagination';
-export * from './components/phone-input';
-export * from './components/popover';
-export * from './components/progress';
-export * from './components/radio-button-group';
-export * from './components/radio-group';
-export * from './components/resizable';
-export * from './components/rich-text-editor';
-export * from './components/scroll-area';
-export * from './components/select';
-export * from './components/separator';
-export * from './components/sheet';
-export * from './components/skeleton';
-export * from './components/slider';
-export { Toaster as SonnerToaster } from './components/sonner';
-export * from './components/spinner';
-export * from './components/stepper';
-export * from './components/steps';
-export * from './components/switch';
-export * from './components/table';
-export * from './components/tabs';
-export * from './components/textarea';
-export * from './components/time-picker';
-export * from './components/toast';
-export * from './components/toaster';
-export * from './components/toggle';
-export * from './components/toggle-group';
-export * from './components/tooltip';
+export { useStableId } from './lib/use-stable-id';
+export { iconMap } from './lib/icon-utils';

package/dist/types/lib/icon-utils.d.ts

@@ -0,0 +1 @@
+export { type IconName, iconMap } from '@freightos/icons';

package/dist/types/lib/use-stable-id.d.ts

@@ -0,0 +1 @@
+export declare function useStableId(prefix?: string): string;

package/guidelines/Guidelines.md

@@ -0,0 +1,54 @@
+# FreightWind Design System
+
+FreightWind is the Freightos Design System — a React component library styled with Tailwind CSS v4 and FDS (Freightos Design System) tokens.
+
+## Setup
+
+FreightWind requires two imports:
+
+1. **CSS tokens** — import the token stylesheet in your root layout or global CSS:
+
+```css
+@import "@freightos/freightwind/tokens.css";
+```
+
+2. **Components** — import components from the package:
+
+```tsx
+import { Button, Alert, Checkbox } from '@freightos/freightwind';
+```
+
+3. **Icons** — icons come from the `@freightos/icons` peer dependency:
+
+```tsx
+import { IconSearch, IconClose, IconUser } from '@freightos/icons';
+```
+
+Components that accept an `icon` prop use kebab-case icon names (e.g. `icon="search"`, `icon="close"`), not direct icon imports.
+
+## Tailwind CSS requirement
+
+FreightWind components use Tailwind CSS v4 utility classes. Your project must have Tailwind CSS configured. The `tokens.css` file provides all necessary theme tokens and custom utilities.
+
+## Available components
+
+See `overview-components.md` for a full list of components with their props and usage.
+
+## Available icons
+
+See `overview-icons.md` for details on the icon system.
+
+## Design tokens
+
+FreightWind uses a custom token system instead of Tailwind defaults:
+
+- **Colors**: `overview-design-tokens/colors.md` — semantic color palette (blue, red, green, yellow, gray, purple)
+- **Typography**: `overview-design-tokens/typography.md` — font sizes, weights, and line heights
+- **Spacing**: `overview-design-tokens/spacing.md` — consistent spacing scale
+
+## Key conventions
+
+- Always use FDS tokens (`text-fds-*`, `p-fds-*`, `rounded-fds-*`, `bg-fds-*`) instead of Tailwind defaults
+- All components support both controlled and uncontrolled usage patterns
+- Components with `icon` props accept kebab-case icon names: `"search"`, `"close"`, `"user"`, `"risk"`, etc.
+- Use `cn()` utility (exported from the package) for className merging