@freightos/freightwind 1.0.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (210) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +28 -0
  3. package/dist/cjs/components/alert.js +33 -16
  4. package/dist/cjs/components/avatar.js +53 -58
  5. package/dist/cjs/components/badge.js +42 -18
  6. package/dist/cjs/components/button.js +35 -24
  7. package/dist/cjs/components/checkbox.js +21 -3
  8. package/dist/cjs/components/chip.js +67 -9
  9. package/dist/cjs/components/message.js +38 -0
  10. package/dist/cjs/components/pop-confirm.js +86 -0
  11. package/dist/cjs/components/radio-button-group.js +31 -35
  12. package/dist/cjs/components/radio-group.js +2 -1
  13. package/dist/cjs/components/slider.js +14 -6
  14. package/dist/cjs/components/switch.js +29 -10
  15. package/dist/cjs/components/tooltip.js +40 -11
  16. package/dist/cjs/index.js +38 -84
  17. package/dist/cjs/lib/icon-utils.js +5 -0
  18. package/dist/cjs/{components/aspect-ratio.js → lib/use-stable-id.js} +7 -4
  19. package/dist/cjs/lib/utils.js +18 -1
  20. package/dist/esm/components/alert.js +34 -17
  21. package/dist/esm/components/avatar.js +53 -22
  22. package/dist/esm/components/badge.js +45 -19
  23. package/dist/esm/components/button.js +36 -25
  24. package/dist/esm/components/checkbox.js +22 -4
  25. package/dist/esm/components/chip.js +34 -9
  26. package/dist/esm/components/message.js +34 -0
  27. package/dist/esm/components/pop-confirm.js +51 -0
  28. package/dist/esm/components/radio-button-group.js +31 -33
  29. package/dist/esm/components/radio-group.js +2 -1
  30. package/dist/esm/components/slider.js +14 -6
  31. package/dist/esm/components/switch.js +30 -11
  32. package/dist/esm/components/tooltip.js +40 -7
  33. package/dist/esm/index.js +18 -66
  34. package/dist/esm/lib/icon-utils.js +1 -0
  35. package/dist/esm/lib/use-stable-id.js +6 -0
  36. package/dist/esm/lib/utils.js +18 -1
  37. package/dist/types/components/alert.d.ts +5 -5
  38. package/dist/types/components/avatar.d.ts +14 -19
  39. package/dist/types/components/badge.d.ts +22 -8
  40. package/dist/types/components/button.d.ts +15 -9
  41. package/dist/types/components/checkbox.d.ts +8 -2
  42. package/dist/types/components/chip.d.ts +14 -8
  43. package/dist/types/components/message.d.ts +14 -0
  44. package/dist/types/components/pop-confirm.d.ts +28 -0
  45. package/dist/types/components/radio-button-group.d.ts +19 -14
  46. package/dist/types/components/slider.d.ts +10 -2
  47. package/dist/types/components/switch.d.ts +7 -6
  48. package/dist/types/components/tooltip.d.ts +9 -6
  49. package/dist/types/index.d.ts +25 -61
  50. package/dist/types/lib/icon-utils.d.ts +1 -0
  51. package/dist/types/lib/use-stable-id.d.ts +1 -0
  52. package/package.json +62 -54
  53. package/tokens.css +387 -0
  54. package/dist/cjs/components/accordion.js +0 -57
  55. package/dist/cjs/components/breadcrumb.js +0 -65
  56. package/dist/cjs/components/calendar.js +0 -106
  57. package/dist/cjs/components/card.js +0 -59
  58. package/dist/cjs/components/chart.js +0 -176
  59. package/dist/cjs/components/collapsible.js +0 -43
  60. package/dist/cjs/components/command.js +0 -73
  61. package/dist/cjs/components/context-menu.js +0 -83
  62. package/dist/cjs/components/country-select.js +0 -155
  63. package/dist/cjs/components/date-picker.js +0 -59
  64. package/dist/cjs/components/date-range-picker.js +0 -59
  65. package/dist/cjs/components/date-time-picker.js +0 -106
  66. package/dist/cjs/components/dialog.js +0 -70
  67. package/dist/cjs/components/drawer.js +0 -68
  68. package/dist/cjs/components/dropdown-menu.js +0 -85
  69. package/dist/cjs/components/empty.js +0 -42
  70. package/dist/cjs/components/file-preview.js +0 -73
  71. package/dist/cjs/components/form.js +0 -106
  72. package/dist/cjs/components/inline-edit.js +0 -83
  73. package/dist/cjs/components/input-group.js +0 -70
  74. package/dist/cjs/components/input-otp.js +0 -58
  75. package/dist/cjs/components/input.js +0 -57
  76. package/dist/cjs/components/label.js +0 -45
  77. package/dist/cjs/components/menubar.js +0 -96
  78. package/dist/cjs/components/navigation-menu.js +0 -68
  79. package/dist/cjs/components/pagination.js +0 -65
  80. package/dist/cjs/components/phone-input.js +0 -218
  81. package/dist/cjs/components/popover.js +0 -49
  82. package/dist/cjs/components/progress.js +0 -43
  83. package/dist/cjs/components/resizable.js +0 -47
  84. package/dist/cjs/components/rich-text-editor.js +0 -152
  85. package/dist/cjs/components/route.js +0 -47
  86. package/dist/cjs/components/scroll-area.js +0 -48
  87. package/dist/cjs/components/select.js +0 -71
  88. package/dist/cjs/components/separator.js +0 -43
  89. package/dist/cjs/components/sheet.js +0 -245
  90. package/dist/cjs/components/skeleton.js +0 -8
  91. package/dist/cjs/components/sonner.js +0 -25
  92. package/dist/cjs/components/spinner.js +0 -25
  93. package/dist/cjs/components/stepper.js +0 -99
  94. package/dist/cjs/components/steps.js +0 -127
  95. package/dist/cjs/components/table.js +0 -66
  96. package/dist/cjs/components/tabs.js +0 -51
  97. package/dist/cjs/components/textarea.js +0 -44
  98. package/dist/cjs/components/time-picker.js +0 -110
  99. package/dist/cjs/components/toast.js +0 -75
  100. package/dist/cjs/components/toaster.js +0 -12
  101. package/dist/cjs/components/toggle-group.js +0 -58
  102. package/dist/cjs/components/toggle.js +0 -62
  103. package/dist/cjs/hooks/use-toast.js +0 -166
  104. package/dist/cjs/lib/countryUtils.js +0 -93
  105. package/dist/esm/components/accordion.js +0 -18
  106. package/dist/esm/components/aspect-ratio.js +0 -3
  107. package/dist/esm/components/breadcrumb.js +0 -23
  108. package/dist/esm/components/calendar.js +0 -70
  109. package/dist/esm/components/card.js +0 -18
  110. package/dist/esm/components/chart.js +0 -135
  111. package/dist/esm/components/collapsible.js +0 -5
  112. package/dist/esm/components/command.js +0 -29
  113. package/dist/esm/components/context-menu.js +0 -33
  114. package/dist/esm/components/country-select.js +0 -118
  115. package/dist/esm/components/date-picker.js +0 -23
  116. package/dist/esm/components/date-range-picker.js +0 -23
  117. package/dist/esm/components/date-time-picker.js +0 -70
  118. package/dist/esm/components/dialog.js +0 -24
  119. package/dist/esm/components/drawer.js +0 -23
  120. package/dist/esm/components/dropdown-menu.js +0 -35
  121. package/dist/esm/components/empty.js +0 -6
  122. package/dist/esm/components/file-preview.js +0 -69
  123. package/dist/esm/components/form.js +0 -63
  124. package/dist/esm/components/inline-edit.js +0 -47
  125. package/dist/esm/components/input-group.js +0 -63
  126. package/dist/esm/components/input-otp.js +0 -19
  127. package/dist/esm/components/input.js +0 -21
  128. package/dist/esm/components/label.js +0 -9
  129. package/dist/esm/components/menubar.js +0 -45
  130. package/dist/esm/components/navigation-menu.js +0 -24
  131. package/dist/esm/components/pagination.js +0 -23
  132. package/dist/esm/components/phone-input.js +0 -181
  133. package/dist/esm/components/popover.js +0 -10
  134. package/dist/esm/components/progress.js +0 -7
  135. package/dist/esm/components/resizable.js +0 -9
  136. package/dist/esm/components/rich-text-editor.js +0 -145
  137. package/dist/esm/components/route.js +0 -11
  138. package/dist/esm/components/scroll-area.js +0 -11
  139. package/dist/esm/components/select.js +0 -26
  140. package/dist/esm/components/separator.js +0 -7
  141. package/dist/esm/components/sheet.js +0 -197
  142. package/dist/esm/components/skeleton.js +0 -6
  143. package/dist/esm/components/sonner.js +0 -22
  144. package/dist/esm/components/spinner.js +0 -21
  145. package/dist/esm/components/stepper.js +0 -57
  146. package/dist/esm/components/steps.js +0 -80
  147. package/dist/esm/components/table.js +0 -22
  148. package/dist/esm/components/tabs.js +0 -12
  149. package/dist/esm/components/textarea.js +0 -8
  150. package/dist/esm/components/time-picker.js +0 -74
  151. package/dist/esm/components/toast.js +0 -33
  152. package/dist/esm/components/toaster.js +0 -9
  153. package/dist/esm/components/toggle-group.js +0 -21
  154. package/dist/esm/components/toggle.js +0 -25
  155. package/dist/esm/hooks/use-toast.js +0 -128
  156. package/dist/esm/lib/countryUtils.js +0 -87
  157. package/dist/styles.css +0 -152
  158. package/dist/types/components/accordion.d.ts +0 -11
  159. package/dist/types/components/aspect-ratio.d.ts +0 -3
  160. package/dist/types/components/breadcrumb.d.ts +0 -19
  161. package/dist/types/components/calendar.d.ts +0 -7
  162. package/dist/types/components/card.d.ts +0 -11
  163. package/dist/types/components/chart.d.ts +0 -66
  164. package/dist/types/components/collapsible.d.ts +0 -5
  165. package/dist/types/components/command.d.ts +0 -80
  166. package/dist/types/components/context-menu.d.ts +0 -27
  167. package/dist/types/components/country-select.d.ts +0 -17
  168. package/dist/types/components/date-picker.d.ts +0 -9
  169. package/dist/types/components/date-range-picker.d.ts +0 -10
  170. package/dist/types/components/date-time-picker.d.ts +0 -10
  171. package/dist/types/components/dialog.d.ts +0 -23
  172. package/dist/types/components/drawer.d.ts +0 -22
  173. package/dist/types/components/dropdown-menu.d.ts +0 -27
  174. package/dist/types/components/empty.d.ts +0 -6
  175. package/dist/types/components/file-preview.d.ts +0 -9
  176. package/dist/types/components/form.d.ts +0 -23
  177. package/dist/types/components/inline-edit.d.ts +0 -10
  178. package/dist/types/components/input-group.d.ts +0 -16
  179. package/dist/types/components/input-otp.d.ts +0 -34
  180. package/dist/types/components/input.d.ts +0 -9
  181. package/dist/types/components/label.d.ts +0 -5
  182. package/dist/types/components/menubar.d.ts +0 -28
  183. package/dist/types/components/navigation-menu.d.ts +0 -12
  184. package/dist/types/components/pagination.d.ts +0 -29
  185. package/dist/types/components/phone-input.d.ts +0 -20
  186. package/dist/types/components/popover.d.ts +0 -9
  187. package/dist/types/components/progress.d.ts +0 -4
  188. package/dist/types/components/resizable.d.ts +0 -23
  189. package/dist/types/components/rich-text-editor.d.ts +0 -8
  190. package/dist/types/components/route.d.ts +0 -10
  191. package/dist/types/components/scroll-area.d.ts +0 -5
  192. package/dist/types/components/select.d.ts +0 -13
  193. package/dist/types/components/separator.d.ts +0 -4
  194. package/dist/types/components/sheet.d.ts +0 -49
  195. package/dist/types/components/skeleton.d.ts +0 -2
  196. package/dist/types/components/sonner.d.ts +0 -4
  197. package/dist/types/components/spinner.d.ts +0 -8
  198. package/dist/types/components/stepper.d.ts +0 -17
  199. package/dist/types/components/steps.d.ts +0 -64
  200. package/dist/types/components/table.d.ts +0 -14
  201. package/dist/types/components/tabs.d.ts +0 -7
  202. package/dist/types/components/textarea.d.ts +0 -3
  203. package/dist/types/components/time-picker.d.ts +0 -10
  204. package/dist/types/components/toast.d.ts +0 -15
  205. package/dist/types/components/toaster.d.ts +0 -1
  206. package/dist/types/components/toggle-group.d.ts +0 -12
  207. package/dist/types/components/toggle.d.ts +0 -12
  208. package/dist/types/hooks/use-toast.d.ts +0 -44
  209. package/dist/types/lib/countryUtils.d.ts +0 -20
  210. package/tailwind-preset.js +0 -70
@@ -1,10 +1,43 @@
1
+ 'use client';
1
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { cn } from '../lib/utils';
3
3
  import * as TooltipPrimitive from '@radix-ui/react-tooltip';
4
4
  import * as React from 'react';
5
- const TooltipProvider = ({ children, ...props }) => (_jsx(TooltipPrimitive.Provider, { delayDuration: 0, ...props, children: children }));
6
- const Tooltip = TooltipPrimitive.Root;
7
- const TooltipTrigger = TooltipPrimitive.Trigger;
8
- 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 })] })));
9
- TooltipContent.displayName = TooltipPrimitive.Content.displayName;
10
- export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
5
+ function resolvePlacement(placement) {
6
+ const [sideRaw, alignRaw] = placement.split('-');
7
+ const align = alignRaw ?? 'center';
8
+ const isRtl = typeof document !== 'undefined' && document.documentElement.dir === 'rtl';
9
+ // Map logical start/end to physical left/right
10
+ const resolveLogical = (value) => (value === 'start') !== isRtl ? 'left' : 'right';
11
+ const side = sideRaw === 'top' || sideRaw === 'bottom'
12
+ ? sideRaw
13
+ : resolveLogical(sideRaw);
14
+ // Radix align also needs RTL flip for start/end
15
+ const radixAlign = align === 'center'
16
+ ? 'center'
17
+ : isRtl
18
+ ? align === 'start' ? 'end' : 'start'
19
+ : align;
20
+ return { side, align: radixAlign };
21
+ }
22
+ // Arrow is 12px wide. Place its center at border-radius (4px) + half arrow (6px) = 10px from edge.
23
+ const ARROW_EDGE_INSET = 10;
24
+ function Tooltip({ message, placement = 'top', children }) {
25
+ const { side, align } = resolvePlacement(placement);
26
+ const triggerRef = React.useRef(null);
27
+ const [alignOffset, setAlignOffset] = React.useState(0);
28
+ React.useEffect(() => {
29
+ if (align === 'center' || !triggerRef.current) {
30
+ setAlignOffset(0);
31
+ return;
32
+ }
33
+ const isHorizontal = side === 'top' || side === 'bottom';
34
+ const triggerSize = isHorizontal
35
+ ? triggerRef.current.offsetWidth
36
+ : triggerRef.current.offsetHeight;
37
+ // Negative offset shifts tooltip away from alignment edge,
38
+ // pulling the arrow (anchored at trigger center) toward that edge.
39
+ setAlignOffset(ARROW_EDGE_INSET - triggerSize / 2);
40
+ }, [align, side]);
41
+ 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 })] })] }) }));
42
+ }
43
+ export { Tooltip };
package/dist/esm/index.js CHANGED
@@ -1,67 +1,19 @@
1
- // FreightWind Design System - Component Library
2
- // @freightos/freightwind
3
- // Utility
4
- export { cn } from './lib/utils';
5
- // Hooks
6
- export { useToast, toast } from './hooks/use-toast';
1
+ 'use client';
7
2
  // Components
8
- export * from './components/accordion';
9
- export * from './components/alert';
10
- export * from './components/aspect-ratio';
11
- export * from './components/avatar';
12
- export * from './components/badge';
13
- export * from './components/breadcrumb';
14
- export * from './components/button';
15
- export * from './components/calendar';
16
- export * from './components/card';
17
- export * from './components/chart';
18
- export * from './components/checkbox';
19
- export * from './components/chip';
20
- export * from './components/collapsible';
21
- export * from './components/command';
22
- export * from './components/context-menu';
23
- export * from './components/country-select';
24
- export * from './components/date-picker';
25
- export * from './components/date-range-picker';
26
- export * from './components/date-time-picker';
27
- export * from './components/dialog';
28
- export * from './components/drawer';
29
- export * from './components/dropdown-menu';
30
- export * from './components/empty';
31
- export * from './components/file-preview';
32
- export * from './components/form';
33
- export * from './components/inline-edit';
34
- export * from './components/input';
35
- export * from './components/input-group';
36
- export * from './components/input-otp';
37
- export * from './components/label';
38
- export * from './components/menubar';
39
- export * from './components/navigation-menu';
40
- export * from './components/pagination';
41
- export * from './components/phone-input';
42
- export * from './components/popover';
43
- export * from './components/progress';
44
- export * from './components/radio-button-group';
45
- export * from './components/radio-group';
46
- export * from './components/resizable';
47
- export * from './components/rich-text-editor';
48
- export * from './components/scroll-area';
49
- export * from './components/select';
50
- export * from './components/separator';
51
- export * from './components/sheet';
52
- export * from './components/skeleton';
53
- export * from './components/slider';
54
- export { Toaster as SonnerToaster } from './components/sonner';
55
- export * from './components/spinner';
56
- export * from './components/stepper';
57
- export * from './components/steps';
58
- export * from './components/switch';
59
- export * from './components/table';
60
- export * from './components/tabs';
61
- export * from './components/textarea';
62
- export * from './components/time-picker';
63
- export * from './components/toast';
64
- export * from './components/toaster';
65
- export * from './components/toggle';
66
- export * from './components/toggle-group';
67
- export * from './components/tooltip';
3
+ export { Alert } from './components/alert';
4
+ export { Avatar } from './components/avatar';
5
+ export { Badge } from './components/badge';
6
+ export { Button, buttonVariants } from './components/button';
7
+ export { Checkbox } from './components/checkbox';
8
+ export { Chip, chipVariants } from './components/chip';
9
+ export { MessageProvider, message } from './components/message';
10
+ export { PopConfirm } from './components/pop-confirm';
11
+ export { RadioButtonGroup } from './components/radio-button-group';
12
+ export { RadioGroup, RadioGroupItem } from './components/radio-group';
13
+ export { Slider } from './components/slider';
14
+ export { Switch } from './components/switch';
15
+ export { Tooltip } from './components/tooltip';
16
+ // Utilities
17
+ export { cn } from './lib/utils';
18
+ export { useStableId } from './lib/use-stable-id';
19
+ export { iconMap } from './lib/icon-utils';
@@ -0,0 +1 @@
1
+ export { iconMap } from '@freightos/icons';
@@ -0,0 +1,6 @@
1
+ import * as React from 'react';
2
+ let counter = 0;
3
+ export function useStableId(prefix = 'fw') {
4
+ const [id] = React.useState(() => `${prefix}-${++counter}`);
5
+ return id;
6
+ }
@@ -1,5 +1,22 @@
1
1
  import { clsx } from "clsx";
2
- import { twMerge } from "tailwind-merge";
2
+ import { extendTailwindMerge } from "tailwind-merge";
3
+ const twMerge = extendTailwindMerge({
4
+ extend: {
5
+ classGroups: {
6
+ "font-size": [
7
+ "text-fds-xs",
8
+ "text-fds-sm",
9
+ "text-fds-base",
10
+ "text-fds-h6",
11
+ "text-fds-h5",
12
+ "text-fds-h4",
13
+ "text-fds-h3",
14
+ "text-fds-h2",
15
+ "text-fds-h1",
16
+ ],
17
+ },
18
+ },
19
+ });
3
20
  export function cn(...inputs) {
4
21
  return twMerge(clsx(inputs));
5
22
  }
@@ -1,12 +1,12 @@
1
1
  import * as React from 'react';
2
- type AlertType = 'info' | 'success' | 'warning' | 'error';
2
+ type AlertVariant = 'info' | 'success' | 'warning' | 'error' | 'special';
3
3
  interface AlertProps {
4
- type?: AlertType;
5
- message: string;
6
- description?: string;
4
+ variant?: AlertVariant;
5
+ title?: string;
6
+ message?: string;
7
7
  closable?: boolean;
8
8
  onClose?: () => void;
9
- className?: string;
9
+ callToAction?: React.ReactNode;
10
10
  }
11
11
  export declare const Alert: React.FC<AlertProps>;
12
12
  export {};
@@ -1,19 +1,14 @@
1
- import * as AvatarPrimitive from '@radix-ui/react-avatar';
2
- import { type VariantProps } from 'class-variance-authority';
3
- import * as React from 'react';
4
- declare const avatarVariants: (props?: ({
5
- size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
6
- bordered?: boolean | null | undefined;
7
- } & import("class-variance-authority/types").ClassProp) | undefined) => string;
8
- type BaseAvatarProps = Omit<React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, 'type'> & VariantProps<typeof avatarVariants>;
9
- export type AvatarProps = BaseAvatarProps & ({
10
- type?: 'default';
11
- country?: never;
12
- } | {
13
- type: 'flag';
14
- country: string;
15
- });
16
- declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
17
- declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
18
- declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
19
- export { Avatar, AvatarFallback, AvatarImage };
1
+ import { type IconName } from '../lib/icon-utils';
2
+ export type { IconName };
3
+ export interface AvatarProps {
4
+ variant?: 'default' | 'info' | 'secondary' | 'warning' | 'neutral' | 'positive' | 'filled' | 'ghost';
5
+ size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
6
+ bordered?: boolean;
7
+ icon?: IconName;
8
+ title?: string;
9
+ flag?: string;
10
+ src?: string;
11
+ alt?: string;
12
+ }
13
+ declare function Avatar({ variant, size, bordered, icon, title, flag, src, alt, }: AvatarProps): import("react/jsx-runtime").JSX.Element;
14
+ export { Avatar };
@@ -1,9 +1,23 @@
1
- import * as React from "react";
2
- import { type VariantProps } from "class-variance-authority";
3
- declare const badgeVariants: (props?: ({
4
- variant?: "default" | "destructive" | "secondary" | "outline" | null | undefined;
5
- } & import("class-variance-authority/types").ClassProp) | undefined) => string;
6
- export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
1
+ import * as React from 'react';
2
+ export type BadgeStatus = 'success' | 'error' | 'default' | 'processing' | 'warning';
3
+ export type BadgeSize = 'default' | 'large';
4
+ export type BadgeVariant = 'default' | 'info' | 'neutral';
5
+ export type BadgePosition = 'top-end' | 'bottom-end';
6
+ export interface BadgeProps {
7
+ /** Value displayed in the badge. Numbers cap at 99+. Strings render as-is. */
8
+ value?: number | string;
9
+ /** Size of the badge. */
10
+ size?: BadgeSize;
11
+ /** Visual variant for the badge. */
12
+ variant?: BadgeVariant;
13
+ /** Status variant with a colored dot and text label. */
14
+ status?: BadgeStatus;
15
+ /** Text label shown next to the status dot. */
16
+ text?: string;
17
+ /** Position of the badge when wrapping children. */
18
+ position?: BadgePosition;
19
+ /** When children are provided, the badge is positioned relative to the child. */
20
+ children?: React.ReactNode;
7
21
  }
8
- declare function Badge({ className, variant, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
9
- export { Badge, badgeVariants };
22
+ declare function Badge({ value, size, variant, position, status, text, children }: BadgeProps): import("react/jsx-runtime").JSX.Element | null;
23
+ export { Badge };
@@ -1,14 +1,20 @@
1
- import { type VariantProps } from 'class-variance-authority';
2
1
  import * as React from 'react';
2
+ import { type IconName } from '../lib/icon-utils';
3
+ export type { IconName };
3
4
  declare const buttonVariants: (props?: ({
4
- type?: "text" | "default" | "secondary" | "tertiary" | "danger" | null | undefined;
5
- size?: "small" | "medium" | "large" | null | undefined;
6
- padding?: "small" | "default" | "large" | null | undefined;
7
- } & import("class-variance-authority/types").ClassProp) | undefined) => string;
8
- export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'>, VariantProps<typeof buttonVariants> {
9
- asChild?: boolean;
10
- htmlType?: 'button' | 'submit' | 'reset';
11
- icon?: boolean;
5
+ variant?: "link" | "default" | "toggle" | "secondary" | "tertiary" | "danger" | "danger-ghost" | null | undefined;
6
+ size?: "sm" | "md" | "lg" | null | undefined;
7
+ } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
8
+ export type ButtonVariant = 'default' | 'secondary' | 'tertiary' | 'link' | 'danger' | 'danger-ghost' | 'toggle';
9
+ export type ButtonSize = 'sm' | 'md' | 'lg';
10
+ export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className'> {
11
+ variant?: ButtonVariant;
12
+ size?: ButtonSize;
13
+ icon?: IconName;
14
+ loading?: boolean;
15
+ active?: boolean;
16
+ tooltip?: string;
17
+ fullWidth?: boolean;
12
18
  }
13
19
  declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
14
20
  export { Button, buttonVariants };
@@ -1,4 +1,10 @@
1
- import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
2
1
  import * as React from 'react';
3
- declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
2
+ export interface CheckboxProps {
3
+ checked?: boolean | 'indeterminate';
4
+ onCheckedChange?: (checked: boolean | 'indeterminate') => void;
5
+ disabled?: boolean;
6
+ error?: boolean;
7
+ children?: string;
8
+ }
9
+ declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
4
10
  export { Checkbox };
@@ -1,10 +1,16 @@
1
- import { type VariantProps } from 'class-variance-authority';
2
- import * as React from 'react';
3
- declare const chipVariants: (props?: ({
4
- type?: "default" | "warning" | "secondary" | "neutral" | "positive" | null | undefined;
5
- } & import("class-variance-authority/types").ClassProp) | undefined) => string;
6
- export interface ChipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClose'>, VariantProps<typeof chipVariants> {
7
- onClose?: (e: React.MouseEvent<HTMLSpanElement>) => void;
1
+ import { type IconName } from '../lib/icon-utils';
2
+ export type { IconName };
3
+ export type ChipVariant = 'default' | 'neutral' | 'info' | 'highlight' | 'warning' | 'success' | 'notice' | 'error';
4
+ export interface ChipProps {
5
+ variant?: ChipVariant;
6
+ icon?: IconName;
7
+ closable?: boolean;
8
+ onClose?: () => void;
9
+ badge?: number | string;
10
+ children?: string;
8
11
  }
9
- declare function Chip({ className, type, onClose, children, ...props }: ChipProps): import("react/jsx-runtime").JSX.Element;
12
+ declare const chipVariants: (props?: ({
13
+ variant?: "info" | "success" | "warning" | "error" | "default" | "neutral" | "highlight" | "notice" | null | undefined;
14
+ } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
15
+ declare function Chip({ variant, icon, closable, onClose, badge, children, }: ChipProps): import("react/jsx-runtime").JSX.Element | null;
10
16
  export { Chip, chipVariants };
@@ -0,0 +1,14 @@
1
+ import { Toaster as Sonner } from "sonner";
2
+ type MessageOptions = {
3
+ onClick?: () => void;
4
+ duration?: number;
5
+ };
6
+ declare const message: {
7
+ success: (title: string, options?: MessageOptions) => string | number;
8
+ info: (title: string, options?: MessageOptions) => string | number;
9
+ warning: (title: string, options?: MessageOptions) => string | number;
10
+ error: (title: string, options?: MessageOptions) => string | number;
11
+ };
12
+ type MessageProviderProps = React.ComponentProps<typeof Sonner>;
13
+ declare const MessageProvider: ({ duration, ...props }: MessageProviderProps) => import("react/jsx-runtime").JSX.Element;
14
+ export { MessageProvider, message };
@@ -0,0 +1,28 @@
1
+ import * as React from 'react';
2
+ import type { FreightosColor } from '@freightos/icons';
3
+ import { type ButtonVariant } from './button';
4
+ import { type IconName } from '../lib/icon-utils';
5
+ import type { TooltipPlacement } from './tooltip';
6
+ export interface PopConfirmProps {
7
+ title: string;
8
+ onConfirm: () => void;
9
+ onCancel?: () => void;
10
+ placement?: TooltipPlacement;
11
+ children: React.ReactElement;
12
+ slotProps?: {
13
+ icon?: {
14
+ name?: IconName;
15
+ color?: FreightosColor | (string & {});
16
+ };
17
+ confirmButton?: {
18
+ children?: React.ReactNode;
19
+ variant?: ButtonVariant;
20
+ };
21
+ cancelButton?: {
22
+ children?: React.ReactNode;
23
+ variant?: ButtonVariant;
24
+ };
25
+ };
26
+ }
27
+ declare function PopConfirm({ title, onConfirm, onCancel, placement, children, slotProps, }: PopConfirmProps): import("react/jsx-runtime").JSX.Element;
28
+ export { PopConfirm };
@@ -1,17 +1,22 @@
1
- import { type VariantProps } from 'class-variance-authority';
2
1
  import * as React from 'react';
3
- import { RadioGroup } from './radio-group';
4
- declare const radioButtonGroupItemVariants: (props?: ({
5
- size?: "small" | "medium" | "large" | null | undefined;
6
- variant?: "default" | "custom" | null | undefined;
7
- } & import("class-variance-authority/types").ClassProp) | undefined) => string;
8
- interface RadioButtonGroupProps extends React.ComponentPropsWithoutRef<typeof RadioGroup>, VariantProps<typeof radioButtonGroupItemVariants> {
9
- borderRadius?: 'lg' | 'full';
10
- }
11
- declare const RadioButtonGroup: React.ForwardRefExoticComponent<RadioButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
12
- interface RadioButtonGroupItemProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof radioButtonGroupItemVariants> {
2
+ interface RadioButtonGroupOption {
13
3
  value: string;
14
- id: string;
4
+ label: string;
5
+ render?: () => React.ReactNode;
6
+ }
7
+ interface RadioButtonGroupProps {
8
+ options: RadioButtonGroupOption[];
9
+ value?: string;
10
+ defaultValue?: string;
11
+ onValueChange?: (value: string) => void;
12
+ size?: 'sm' | 'md' | 'lg';
13
+ orientation?: 'horizontal' | 'vertical';
14
+ disabled?: boolean;
15
+ error?: boolean;
16
+ }
17
+ declare function RadioButtonGroup({ options, value, defaultValue, onValueChange, size, orientation, disabled, error, }: RadioButtonGroupProps): import("react/jsx-runtime").JSX.Element;
18
+ declare namespace RadioButtonGroup {
19
+ var displayName: string;
15
20
  }
16
- declare const RadioButtonGroupItem: React.ForwardRefExoticComponent<RadioButtonGroupItemProps & React.RefAttributes<HTMLDivElement>>;
17
- export { RadioButtonGroup, RadioButtonGroupItem };
21
+ export { RadioButtonGroup };
22
+ export type { RadioButtonGroupOption, RadioButtonGroupProps };
@@ -1,4 +1,12 @@
1
- import * as SliderPrimitive from '@radix-ui/react-slider';
2
1
  import * as React from 'react';
3
- declare const Slider: React.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
2
+ export interface SliderProps {
3
+ value?: number[];
4
+ defaultValue?: number[];
5
+ onValueChange?: (value: number[]) => void;
6
+ min?: number;
7
+ max?: number;
8
+ step?: number;
9
+ disabled?: boolean;
10
+ }
11
+ declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLSpanElement>>;
4
12
  export { Slider };
@@ -1,10 +1,11 @@
1
1
  import * as React from 'react';
2
- import * as SwitchPrimitives from '@radix-ui/react-switch';
3
- import { type VariantProps } from 'class-variance-authority';
4
- declare const switchVariants: (props?: ({
5
- size?: "small" | "default" | null | undefined;
6
- } & import("class-variance-authority/types").ClassProp) | undefined) => string;
7
- export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>, VariantProps<typeof switchVariants> {
2
+ export interface SwitchProps {
3
+ checked?: boolean;
4
+ onCheckedChange?: (checked: boolean) => void;
5
+ disabled?: boolean;
6
+ error?: boolean;
7
+ size?: 'lg' | 'sm';
8
+ children?: string;
8
9
  }
9
10
  declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
10
11
  export { Switch };
@@ -1,7 +1,10 @@
1
- import * as TooltipPrimitive from '@radix-ui/react-tooltip';
2
1
  import * as React from 'react';
3
- declare const TooltipProvider: ({ children, ...props }: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>) => import("react/jsx-runtime").JSX.Element;
4
- declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
5
- declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
6
- declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
7
- export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
2
+ type Side = 'top' | 'bottom' | 'start' | 'end';
3
+ export type TooltipPlacement = Side | `${Side}-${'start' | 'end'}`;
4
+ export interface TooltipProps {
5
+ message: React.ReactNode;
6
+ placement?: TooltipPlacement;
7
+ children: React.ReactElement;
8
+ }
9
+ declare function Tooltip({ message, placement, children }: TooltipProps): import("react/jsx-runtime").JSX.Element;
10
+ export { Tooltip };
@@ -1,62 +1,26 @@
1
+ export { Alert } from './components/alert';
2
+ export { Avatar } from './components/avatar';
3
+ export { Badge } from './components/badge';
4
+ export { Button, buttonVariants } from './components/button';
5
+ export { Checkbox } from './components/checkbox';
6
+ export { Chip, chipVariants } from './components/chip';
7
+ export { MessageProvider, message } from './components/message';
8
+ export { PopConfirm } from './components/pop-confirm';
9
+ export { RadioButtonGroup } from './components/radio-button-group';
10
+ export { RadioGroup, RadioGroupItem } from './components/radio-group';
11
+ export { Slider } from './components/slider';
12
+ export { Switch } from './components/switch';
13
+ export { Tooltip } from './components/tooltip';
14
+ export type { IconName } from './lib/icon-utils';
15
+ export type { ButtonVariant, ButtonSize, ButtonProps } from './components/button';
16
+ export type { BadgeStatus, BadgeSize, BadgeVariant, BadgePosition, BadgeProps } from './components/badge';
17
+ export type { CheckboxProps } from './components/checkbox';
18
+ export type { ChipVariant, ChipProps } from './components/chip';
19
+ export type { PopConfirmProps } from './components/pop-confirm';
20
+ export type { RadioButtonGroupOption, RadioButtonGroupProps } from './components/radio-button-group';
21
+ export type { SliderProps } from './components/slider';
22
+ export type { SwitchProps } from './components/switch';
23
+ export type { TooltipPlacement, TooltipProps } from './components/tooltip';
1
24
  export { cn } from './lib/utils';
2
- export { useToast, toast } from './hooks/use-toast';
3
- export * from './components/accordion';
4
- export * from './components/alert';
5
- export * from './components/aspect-ratio';
6
- export * from './components/avatar';
7
- export * from './components/badge';
8
- export * from './components/breadcrumb';
9
- export * from './components/button';
10
- export * from './components/calendar';
11
- export * from './components/card';
12
- export * from './components/chart';
13
- export * from './components/checkbox';
14
- export * from './components/chip';
15
- export * from './components/collapsible';
16
- export * from './components/command';
17
- export * from './components/context-menu';
18
- export * from './components/country-select';
19
- export * from './components/date-picker';
20
- export * from './components/date-range-picker';
21
- export * from './components/date-time-picker';
22
- export * from './components/dialog';
23
- export * from './components/drawer';
24
- export * from './components/dropdown-menu';
25
- export * from './components/empty';
26
- export * from './components/file-preview';
27
- export * from './components/form';
28
- export * from './components/inline-edit';
29
- export * from './components/input';
30
- export * from './components/input-group';
31
- export * from './components/input-otp';
32
- export * from './components/label';
33
- export * from './components/menubar';
34
- export * from './components/navigation-menu';
35
- export * from './components/pagination';
36
- export * from './components/phone-input';
37
- export * from './components/popover';
38
- export * from './components/progress';
39
- export * from './components/radio-button-group';
40
- export * from './components/radio-group';
41
- export * from './components/resizable';
42
- export * from './components/rich-text-editor';
43
- export * from './components/scroll-area';
44
- export * from './components/select';
45
- export * from './components/separator';
46
- export * from './components/sheet';
47
- export * from './components/skeleton';
48
- export * from './components/slider';
49
- export { Toaster as SonnerToaster } from './components/sonner';
50
- export * from './components/spinner';
51
- export * from './components/stepper';
52
- export * from './components/steps';
53
- export * from './components/switch';
54
- export * from './components/table';
55
- export * from './components/tabs';
56
- export * from './components/textarea';
57
- export * from './components/time-picker';
58
- export * from './components/toast';
59
- export * from './components/toaster';
60
- export * from './components/toggle';
61
- export * from './components/toggle-group';
62
- export * from './components/tooltip';
25
+ export { useStableId } from './lib/use-stable-id';
26
+ export { iconMap } from './lib/icon-utils';
@@ -0,0 +1 @@
1
+ export { type IconName, iconMap } from '@freightos/icons';
@@ -0,0 +1 @@
1
+ export declare function useStableId(prefix?: string): string;