@freightos/freightwind 2.1.2 → 2.1.3-host-isolation.1

package/guidelines/overview-components.md

@@ -1,252 +1,252 @@
-# Components Overview
-
-## Component list
-
-| Component | Purpose | Key props |
-|-----------|---------|-----------|
-| `Button` | Primary action trigger | `variant`, `size`, `icon`, `loading`, `tooltip`, `fullWidth` |
-| `Alert` | Contextual feedback banner | `variant`, `title`, `message`, `closable`, `callToAction` |
-| `Avatar` | User or entity representation | `variant`, `size`, `icon`, `title`, `flag`, `src` |
-| `Badge` | Numeric indicator or status dot | `value`, `size`, `variant`, `status`, `text` |
-| `Checkbox` | Boolean or indeterminate toggle | `checked`, `onCheckedChange`, `disabled`, `error`, `children` |
-| `Chip` | Compact label with optional badge | `variant`, `icon`, `closable`, `badge`, `children` |
-| `MessageProvider` / `message` | Toast notifications | Provider wraps app; `message.success()`, `.info()`, `.warning()`, `.error()` |
-| `PopConfirm` | Confirmation popover | `title`, `onConfirm`, `onCancel`, `placement`, `slotProps` |
-| `RadioButtonGroup` | Segmented button selection | `options`, `value`, `onValueChange`, `size`, `orientation` |
-| `RadioGroup` / `RadioGroupItem` | Traditional radio selection | Standard Radix RadioGroup API |
-| `Slider` | Range value selector | `value`, `onValueChange`, `min`, `max`, `step` |
-| `Switch` | On/off toggle | `checked`, `onCheckedChange`, `disabled`, `error`, `size`, `children` |
-| `Tooltip` | Contextual hover information | `message`, `placement`, `children` |
-
-## Button
-
-The most commonly used component. Always use `Button` for clickable actions.
-
-```tsx
-import { Button } from '@freightos/freightwind';
-
-// Primary action
-<Button variant="default" size="md">Submit</Button>
-
-// Secondary action
-<Button variant="secondary">Cancel</Button>
-
-// Danger action
-<Button variant="danger">Delete</Button>
-
-// Icon-only button (tooltip is required)
-<Button icon="search" tooltip="Search" />
-
-// Loading state
-<Button loading>Saving...</Button>
-
-// Toggle button
-<Button variant="toggle" active={isActive}>Grid View</Button>
-```
-
-**Variants**: `default` (primary blue), `secondary` (outlined blue), `tertiary` (text-only blue), `link` (text link), `danger` (red), `danger-ghost` (outlined red), `toggle` (gray border, blue when active).
-
-**Sizes**: `sm` (24px height), `md` (32px height, default), `lg` (40px height).
-
-**Icon-only buttons** must have a `tooltip` prop for accessibility. Pass icon names in kebab-case: `icon="search"`, `icon="close"`, `icon="settings"`.
-
-## Alert
-
-Contextual feedback banner with icon, optional title, message, and close button.
-
-```tsx
-import { Alert } from '@freightos/freightwind';
-
-// Simple message-only alert
-<Alert variant="info" message="Your shipment has been updated." />
-
-// Alert with title
-<Alert variant="warning" title="Attention" message="Rate expires in 24 hours." />
-
-// Closable alert
-<Alert variant="success" message="Saved!" closable onClose={() => {}} />
-
-// Alert with call-to-action (only when no title)
-<Alert variant="error" message="Connection failed." callToAction={<Button size="sm" variant="danger">Retry</Button>} />
-```
-
-**Variants**: `info` (blue), `success` (green), `warning` (yellow), `error` (red), `special` (purple).
-
-## Avatar
-
-User or entity representation. Content priority: `src` > `flag` > `title` > `icon` > default user placeholder.
-
-```tsx
-import { Avatar } from '@freightos/freightwind';
-
-// Image avatar
-<Avatar src="https://example.com/photo.jpg" alt="John" />
-
-// Country flag
-<Avatar flag="US" />
-
-// Initial letter
-<Avatar title="John Doe" />
-
-// Icon avatar
-<Avatar icon="settings" variant="info" />
-
-// Sized avatar
-<Avatar title="JD" size="lg" bordered />
-```
-
-**Sizes**: `xs` (16px), `sm` (24px), `md` (32px, default), `lg` (40px), `xl` (58px).
-
-**Variants**: `default` (purple), `info` (blue), `secondary` (light blue), `warning` (yellow), `neutral` (gray), `positive` (green), `filled` (white bg), `ghost` (transparent).
-
-## Badge
-
-Numeric indicator or status dot. Can wrap a child element for positioning.
-
-```tsx
-import { Badge } from '@freightos/freightwind';
-
-// Standalone count badge
-<Badge value={5} />
-
-// Badge wrapping an icon/button
-<Badge value={3}><IconBell size={20} /></Badge>
-
-// Status dot with text
-<Badge status="success" text="Active" />
-
-// Numbers over 99 display as "99+"
-<Badge value={150} />
-```
-
-## Checkbox
-
-Boolean or indeterminate toggle with optional label.
-
-```tsx
-import { Checkbox } from '@freightos/freightwind';
-
-// With label
-<Checkbox checked={value} onCheckedChange={setValue}>Accept terms</Checkbox>
-
-// Without label
-<Checkbox checked={value} onCheckedChange={setValue} />
-
-// Indeterminate state
-<Checkbox checked="indeterminate" onCheckedChange={setValue}>Select all</Checkbox>
-
-// Error state
-<Checkbox error>Required field</Checkbox>
-```
-
-## Chip
-
-Compact label with optional icon, badge, and close button.
-
-```tsx
-import { Chip } from '@freightos/freightwind';
-
-// Basic chip
-<Chip>Active</Chip>
-
-// With variant and icon
-<Chip variant="success" icon="check-circled">Approved</Chip>
-
-// With badge count
-<Chip variant="info" badge={3}>Notifications</Chip>
-
-// Closable
-<Chip closable onClose={() => {}}>Filter</Chip>
-```
-
-**Variants**: `default` (purple), `neutral` (gray), `info` (light blue), `highlight` (bright blue), `warning` (yellow), `success` (green), `notice` (light red), `error` (red).
-
-## Switch
-
-On/off toggle with optional label.
-
-```tsx
-import { Switch } from '@freightos/freightwind';
-
-// With label
-<Switch checked={value} onCheckedChange={setValue}>Enable notifications</Switch>
-
-// Without label
-<Switch checked={value} onCheckedChange={setValue} />
-
-// Sizes
-<Switch size="sm">Small switch</Switch>
-<Switch size="lg">Large switch</Switch>
-```
-
-## RadioButtonGroup
-
-Segmented button selector. Use for choosing between 2-5 mutually exclusive options.
-
-```tsx
-import { RadioButtonGroup } from '@freightos/freightwind';
-
-<RadioButtonGroup
-  options={[
-    { value: 'list', label: 'List' },
-    { value: 'grid', label: 'Grid' },
-    { value: 'map', label: 'Map' },
-  ]}
-  value={view}
-  onValueChange={setView}
-  size="md"
-/>
-```
-
-## Slider
-
-Range value selector.
-
-```tsx
-import { Slider } from '@freightos/freightwind';
-
-<Slider value={[50]} onValueChange={setValue} min={0} max={100} step={1} />
-```
-
-## Tooltip
-
-Hover tooltip. Wraps any element.
-
-```tsx
-import { Tooltip } from '@freightos/freightwind';
-
-<Tooltip message="Click to save" placement="top">
-  <Button>Save</Button>
-</Tooltip>
-```
-
-**Placements**: `top`, `bottom`, `start`, `end`, `top-start`, `top-end`, `bottom-start`, `bottom-end`.
-
-## PopConfirm
-
-Confirmation popover. Wraps a trigger element.
-
-```tsx
-import { PopConfirm } from '@freightos/freightwind';
-
-<PopConfirm title="Are you sure you want to delete this?" onConfirm={handleDelete}>
-  <Button variant="danger">Delete</Button>
-</PopConfirm>
-```
-
-## MessageProvider / message
-
-Toast notification system. Add `MessageProvider` once at the app root, then call `message.*()` anywhere.
-
-```tsx
-import { MessageProvider, message } from '@freightos/freightwind';
-
-// In your root layout:
-<MessageProvider />
-
-// Anywhere in your app:
-message.success('Shipment created successfully');
-message.error('Failed to save changes');
-message.warning('Rate expires soon');
-message.info('New update available');
-```
+# Components Overview
+
+## Component list
+
+| Component | Purpose | Key props |
+|-----------|---------|-----------|
+| `Button` | Primary action trigger | `variant`, `size`, `icon`, `loading`, `tooltip`, `fullWidth` |
+| `Alert` | Contextual feedback banner | `variant`, `title`, `message`, `closable`, `callToAction` |
+| `Avatar` | User or entity representation | `variant`, `size`, `icon`, `title`, `flag`, `src` |
+| `Badge` | Numeric indicator or status dot | `value`, `size`, `variant`, `status`, `text` |
+| `Checkbox` | Boolean or indeterminate toggle | `checked`, `onCheckedChange`, `disabled`, `error`, `children` |
+| `Chip` | Compact label with optional badge | `variant`, `icon`, `closable`, `badge`, `children` |
+| `MessageProvider` / `message` | Toast notifications | Provider wraps app; `message.success()`, `.info()`, `.warning()`, `.error()` |
+| `PopConfirm` | Confirmation popover | `title`, `onConfirm`, `onCancel`, `placement`, `slotProps` |
+| `RadioButtonGroup` | Segmented button selection | `options`, `value`, `onValueChange`, `size`, `orientation` |
+| `RadioGroup` / `RadioGroupItem` | Traditional radio selection | Standard Radix RadioGroup API |
+| `Slider` | Range value selector | `value`, `onValueChange`, `min`, `max`, `step` |
+| `Switch` | On/off toggle | `checked`, `onCheckedChange`, `disabled`, `error`, `size`, `children` |
+| `Tooltip` | Contextual hover information | `message`, `placement`, `children` |
+
+## Button
+
+The most commonly used component. Always use `Button` for clickable actions.
+
+```tsx
+import { Button } from '@freightos/freightwind';
+
+// Primary action
+<Button variant="default" size="md">Submit</Button>
+
+// Secondary action
+<Button variant="secondary">Cancel</Button>
+
+// Danger action
+<Button variant="danger">Delete</Button>
+
+// Icon-only button (tooltip is required)
+<Button icon="search" tooltip="Search" />
+
+// Loading state
+<Button loading>Saving...</Button>
+
+// Toggle button
+<Button variant="toggle" active={isActive}>Grid View</Button>
+```
+
+**Variants**: `default` (primary blue), `secondary` (outlined blue), `tertiary` (text-only blue), `link` (text link), `danger` (red), `danger-ghost` (outlined red), `toggle` (gray border, blue when active).
+
+**Sizes**: `sm` (24px height), `md` (32px height, default), `lg` (40px height).
+
+**Icon-only buttons** must have a `tooltip` prop for accessibility. Pass icon names in kebab-case: `icon="search"`, `icon="close"`, `icon="settings"`.
+
+## Alert
+
+Contextual feedback banner with icon, optional title, message, and close button.
+
+```tsx
+import { Alert } from '@freightos/freightwind';
+
+// Simple message-only alert
+<Alert variant="info" message="Your shipment has been updated." />
+
+// Alert with title
+<Alert variant="warning" title="Attention" message="Rate expires in 24 hours." />
+
+// Closable alert
+<Alert variant="success" message="Saved!" closable onClose={() => {}} />
+
+// Alert with call-to-action (only when no title)
+<Alert variant="error" message="Connection failed." callToAction={<Button size="sm" variant="danger">Retry</Button>} />
+```
+
+**Variants**: `info` (blue), `success` (green), `warning` (yellow), `error` (red), `special` (purple).
+
+## Avatar
+
+User or entity representation. Content priority: `src` > `flag` > `title` > `icon` > default user placeholder.
+
+```tsx
+import { Avatar } from '@freightos/freightwind';
+
+// Image avatar
+<Avatar src="https://example.com/photo.jpg" alt="John" />
+
+// Country flag
+<Avatar flag="US" />
+
+// Initial letter
+<Avatar title="John Doe" />
+
+// Icon avatar
+<Avatar icon="settings" variant="info" />
+
+// Sized avatar
+<Avatar title="JD" size="lg" bordered />
+```
+
+**Sizes**: `xs` (16px), `sm` (24px), `md` (32px, default), `lg` (40px), `xl` (58px).
+
+**Variants**: `default` (purple), `info` (blue), `secondary` (light blue), `warning` (yellow), `neutral` (gray), `positive` (green), `filled` (white bg), `ghost` (transparent).
+
+## Badge
+
+Numeric indicator or status dot. Can wrap a child element for positioning.
+
+```tsx
+import { Badge } from '@freightos/freightwind';
+
+// Standalone count badge
+<Badge value={5} />
+
+// Badge wrapping an icon/button
+<Badge value={3}><IconBell size={20} /></Badge>
+
+// Status dot with text
+<Badge status="success" text="Active" />
+
+// Numbers over 99 display as "99+"
+<Badge value={150} />
+```
+
+## Checkbox
+
+Boolean or indeterminate toggle with optional label.
+
+```tsx
+import { Checkbox } from '@freightos/freightwind';
+
+// With label
+<Checkbox checked={value} onCheckedChange={setValue}>Accept terms</Checkbox>
+
+// Without label
+<Checkbox checked={value} onCheckedChange={setValue} />
+
+// Indeterminate state
+<Checkbox checked="indeterminate" onCheckedChange={setValue}>Select all</Checkbox>
+
+// Error state
+<Checkbox error>Required field</Checkbox>
+```
+
+## Chip
+
+Compact label with optional icon, badge, and close button.
+
+```tsx
+import { Chip } from '@freightos/freightwind';
+
+// Basic chip
+<Chip>Active</Chip>
+
+// With variant and icon
+<Chip variant="success" icon="check-circled">Approved</Chip>
+
+// With badge count
+<Chip variant="info" badge={3}>Notifications</Chip>
+
+// Closable
+<Chip closable onClose={() => {}}>Filter</Chip>
+```
+
+**Variants**: `default` (purple), `neutral` (gray), `info` (light blue), `highlight` (bright blue), `warning` (yellow), `success` (green), `notice` (light red), `error` (red).
+
+## Switch
+
+On/off toggle with optional label.
+
+```tsx
+import { Switch } from '@freightos/freightwind';
+
+// With label
+<Switch checked={value} onCheckedChange={setValue}>Enable notifications</Switch>
+
+// Without label
+<Switch checked={value} onCheckedChange={setValue} />
+
+// Sizes
+<Switch size="sm">Small switch</Switch>
+<Switch size="lg">Large switch</Switch>
+```
+
+## RadioButtonGroup
+
+Segmented button selector. Use for choosing between 2-5 mutually exclusive options.
+
+```tsx
+import { RadioButtonGroup } from '@freightos/freightwind';
+
+<RadioButtonGroup
+  options={[
+    { value: 'list', label: 'List' },
+    { value: 'grid', label: 'Grid' },
+    { value: 'map', label: 'Map' },
+  ]}
+  value={view}
+  onValueChange={setView}
+  size="md"
+/>
+```
+
+## Slider
+
+Range value selector.
+
+```tsx
+import { Slider } from '@freightos/freightwind';
+
+<Slider value={[50]} onValueChange={setValue} min={0} max={100} step={1} />
+```
+
+## Tooltip
+
+Hover tooltip. Wraps any element.
+
+```tsx
+import { Tooltip } from '@freightos/freightwind';
+
+<Tooltip message="Click to save" placement="top">
+  <Button>Save</Button>
+</Tooltip>
+```
+
+**Placements**: `top`, `bottom`, `start`, `end`, `top-start`, `top-end`, `bottom-start`, `bottom-end`.
+
+## PopConfirm
+
+Confirmation popover. Wraps a trigger element.
+
+```tsx
+import { PopConfirm } from '@freightos/freightwind';
+
+<PopConfirm title="Are you sure you want to delete this?" onConfirm={handleDelete}>
+  <Button variant="danger">Delete</Button>
+</PopConfirm>
+```
+
+## MessageProvider / message
+
+Toast notification system. Add `MessageProvider` once at the app root, then call `message.*()` anywhere.
+
+```tsx
+import { MessageProvider, message } from '@freightos/freightwind';
+
+// In your root layout:
+<MessageProvider />
+
+// Anywhere in your app:
+message.success('Shipment created successfully');
+message.error('Failed to save changes');
+message.warning('Rate expires soon');
+message.info('New update available');
+```

package/guidelines/overview-icons.md

@@ -1,52 +1,52 @@
-# Icons
-
-FreightWind uses `@freightos/freightwind/icons` as a peer dependency for all iconography.
-
-## Direct icon imports
-
-For standalone icon usage, import directly from `@freightos/freightwind/icons`:
-
-```tsx
-import { IconSearch, IconClose, IconUser, IconRisk } from '@freightos/freightwind/icons';
-
-<IconSearch size={16} />
-<IconClose size={20} className="text-fds-gray-80" />
-```
-
-All icons accept `size` (number, in px) and `className` props. Icons inherit `currentColor` by default.
-
-## Icon prop on components
-
-Components like `Button`, `Avatar`, and `Chip` accept an `icon` prop with a kebab-case name string:
-
-```tsx
-<Button icon="search" tooltip="Search" />
-<Avatar icon="settings" />
-<Chip icon="check-circled">Done</Chip>
-```
-
-Do NOT pass React components to the `icon` prop — use the kebab-case string name.
-
-## Common icon names
-
-| Name | Component | Usage |
-|------|-----------|-------|
-| `search` | `IconSearch` | Search actions |
-| `close` | `IconClose` | Close/dismiss actions |
-| `user` | `IconUser` | User profiles |
-| `settings` | `IconSettings` | Settings/gear |
-| `risk` | `IconRisk` | Warning/caution |
-| `check-circled` | `IconCheckCircled` | Success/confirmation |
-| `info-circled` | `IconInfoCircled` | Information |
-| `clear-circled` | `IconClearCircled` | Error/negative |
-| `arrow-down` | `IconArrowDown` | Directional |
-| `arrow-up` | `IconArrowUp` | Directional |
-| `edit` | `IconEdit` | Edit actions |
-| `delete` | `IconDelete` | Delete actions |
-| `download` | `IconDownload` | Download actions |
-| `upload` | `IconUpload` | Upload actions |
-| `bookmark` | `IconBookmark` | Bookmark/save |
-
-## Icon style
-
-All icons use stroke-only outlines (`stroke="currentColor"`). They are designed at 24px but scale cleanly to any size.
+# Icons
+
+FreightWind uses `@freightos/freightwind/icons` as a peer dependency for all iconography.
+
+## Direct icon imports
+
+For standalone icon usage, import directly from `@freightos/freightwind/icons`:
+
+```tsx
+import { IconSearch, IconClose, IconUser, IconRisk } from '@freightos/freightwind/icons';
+
+<IconSearch size={16} />
+<IconClose size={20} className="text-fds-gray-80" />
+```
+
+All icons accept `size` (number, in px) and `className` props. Icons inherit `currentColor` by default.
+
+## Icon prop on components
+
+Components like `Button`, `Avatar`, and `Chip` accept an `icon` prop with a kebab-case name string:
+
+```tsx
+<Button icon="search" tooltip="Search" />
+<Avatar icon="settings" />
+<Chip icon="check-circled">Done</Chip>
+```
+
+Do NOT pass React components to the `icon` prop — use the kebab-case string name.
+
+## Common icon names
+
+| Name | Component | Usage |
+|------|-----------|-------|
+| `search` | `IconSearch` | Search actions |
+| `close` | `IconClose` | Close/dismiss actions |
+| `user` | `IconUser` | User profiles |
+| `settings` | `IconSettings` | Settings/gear |
+| `risk` | `IconRisk` | Warning/caution |
+| `check-circled` | `IconCheckCircled` | Success/confirmation |
+| `info-circled` | `IconInfoCircled` | Information |
+| `clear-circled` | `IconClearCircled` | Error/negative |
+| `arrow-down` | `IconArrowDown` | Directional |
+| `arrow-up` | `IconArrowUp` | Directional |
+| `edit` | `IconEdit` | Edit actions |
+| `delete` | `IconDelete` | Delete actions |
+| `download` | `IconDownload` | Download actions |
+| `upload` | `IconUpload` | Upload actions |
+| `bookmark` | `IconBookmark` | Bookmark/save |
+
+## Icon style
+
+All icons use stroke-only outlines (`stroke="currentColor"`). They are designed at 24px but scale cleanly to any size.