@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
package/dist/esm/components/file-preview.js DELETED
@@ -1,69 +0,0 @@
1
- "use client";
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { Button } from './button';
4
- import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, } from './dialog';
5
- import { IconDownload, IconPrint } from '@freightos/icons';
6
- const IMAGE_EXTENSIONS = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg', '.bmp'];
7
- function isImageFile(fileName) {
8
- const lowerName = fileName.toLowerCase();
9
- return IMAGE_EXTENSIONS.some(ext => lowerName.endsWith(ext));
10
- }
11
- export const FilePreview = ({ fileName, fileUrl, open, onOpenChange, }) => {
12
- const isImage = isImageFile(fileName);
13
- const handlePrint = () => {
14
- if (isImage) {
15
- // For images, create a printable HTML page
16
- const printWindow = window.open('', '_blank');
17
- if (printWindow) {
18
- printWindow.document.write(`
19
- <!DOCTYPE html>
20
- <html>
21
- <head>
22
- <title>${fileName}</title>
23
- <style>
24
- body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
25
- img { max-width: 100%; max-height: 100vh; object-fit: contain; }
26
- @media print { body { margin: 0; } img { max-width: 100%; max-height: 100%; } }
27
- </style>
28
- </head>
29
- <body>
30
- <img src="${fileUrl}" alt="${fileName}" onload="window.print(); window.close();" />
31
- </body>
32
- </html>
33
- `);
34
- printWindow.document.close();
35
- }
36
- }
37
- else {
38
- // For PDFs and other documents
39
- const printWindow = window.open(fileUrl, '_blank');
40
- if (printWindow) {
41
- printWindow.onload = () => {
42
- printWindow.print();
43
- };
44
- }
45
- }
46
- };
47
- const handleDownload = async () => {
48
- try {
49
- const response = await fetch(fileUrl);
50
- const blob = await response.blob();
51
- const url = window.URL.createObjectURL(blob);
52
- const link = document.createElement('a');
53
- link.href = url;
54
- link.download = fileName;
55
- document.body.appendChild(link);
56
- link.click();
57
- document.body.removeChild(link);
58
- window.URL.revokeObjectURL(url);
59
- onOpenChange(false);
60
- }
61
- catch (error) {
62
- console.error('Download failed:', error);
63
- // Fallback: open in new tab
64
- window.open(fileUrl, '_blank');
65
- onOpenChange(false);
66
- }
67
- };
68
- return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "h-[90vh] max-w-4xl", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: fileName }) }), _jsx("div", { className: "flex flex-1 items-center justify-center overflow-auto p-fds-xl", children: isImage ? (_jsx("img", { src: fileUrl, alt: fileName, className: "max-h-full max-w-full object-contain" })) : (_jsx("iframe", { src: fileUrl, title: fileName, className: "h-full w-full border-0" })) }), _jsxs(DialogFooter, { className: "flex justify-end gap-2 py-fds-lg", children: [_jsxs(Button, { type: "secondary", size: "medium", onClick: handlePrint, children: [_jsx(IconPrint, {}), "Print"] }), _jsxs(Button, { type: "default", size: "medium", onClick: handleDownload, children: [_jsx(IconDownload, {}), "Download"] })] })] }) }));
69
- };
package/dist/esm/components/form.js DELETED
@@ -1,63 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx } from "react/jsx-runtime";
3
- import * as React from 'react';
4
- import { Slot } from '@radix-ui/react-slot';
5
- import { Controller, FormProvider, useFormContext, } from 'react-hook-form';
6
- import { cn } from '../lib/utils';
7
- import { Label } from './label';
8
- const Form = FormProvider;
9
- const FormFieldContext = React.createContext({});
10
- const FormField = ({ ...props }) => {
11
- return (_jsx(FormFieldContext.Provider, { value: { name: props.name }, children: _jsx(Controller, { ...props }) }));
12
- };
13
- const useFormField = () => {
14
- const fieldContext = React.useContext(FormFieldContext);
15
- const itemContext = React.useContext(FormItemContext);
16
- const { getFieldState, formState } = useFormContext();
17
- const fieldState = getFieldState(fieldContext.name, formState);
18
- if (!fieldContext) {
19
- throw new Error('useFormField should be used within <FormField>');
20
- }
21
- const { id } = itemContext;
22
- return {
23
- id,
24
- name: fieldContext.name,
25
- formItemId: `${id}-form-item`,
26
- formDescriptionId: `${id}-form-item-description`,
27
- formMessageId: `${id}-form-item-message`,
28
- ...fieldState,
29
- };
30
- };
31
- const FormItemContext = React.createContext({});
32
- const FormItem = React.forwardRef(({ className, ...props }, ref) => {
33
- const id = React.useId();
34
- return (_jsx(FormItemContext.Provider, { value: { id }, children: _jsx("div", { ref: ref, className: cn('space-y-fds-xs', className), ...props }) }));
35
- });
36
- FormItem.displayName = 'FormItem';
37
- const FormLabel = React.forwardRef(({ className, ...props }, ref) => {
38
- const { error, formItemId } = useFormField();
39
- return (_jsx(Label, { ref: ref, className: cn(error && 'text-destructive', className), htmlFor: formItemId, ...props }));
40
- });
41
- FormLabel.displayName = 'FormLabel';
42
- const FormControl = React.forwardRef(({ ...props }, ref) => {
43
- const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
44
- return (_jsx(Slot, { ref: ref, id: formItemId, "aria-describedby": !error
45
- ? `${formDescriptionId}`
46
- : `${formDescriptionId} ${formMessageId}`, "aria-invalid": !!error, ...props }));
47
- });
48
- FormControl.displayName = 'FormControl';
49
- const FormDescription = React.forwardRef(({ className, ...props }, ref) => {
50
- const { formDescriptionId } = useFormField();
51
- return (_jsx("p", { ref: ref, id: formDescriptionId, className: cn('text-sm text-muted-foreground', className), ...props }));
52
- });
53
- FormDescription.displayName = 'FormDescription';
54
- const FormMessage = React.forwardRef(({ className, children, ...props }, ref) => {
55
- const { error, formMessageId } = useFormField();
56
- const body = error ? String(error?.message ?? '') : children;
57
- if (!body) {
58
- return null;
59
- }
60
- return (_jsx("p", { ref: ref, id: formMessageId, className: cn('text-sm font-medium text-destructive', className), ...props, children: body }));
61
- });
62
- FormMessage.displayName = 'FormMessage';
63
- export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, };
package/dist/esm/components/inline-edit.js DELETED
@@ -1,47 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import * as React from 'react';
4
- import { cn } from '../lib/utils';
5
- import { IconEdit } from '@freightos/icons';
6
- import { Input } from './input';
7
- const InlineEdit = React.forwardRef(({ value, onChange, placeholder = 'Click to edit', className, hideIcon = false }, ref) => {
8
- const [isEditing, setIsEditing] = React.useState(false);
9
- const [editValue, setEditValue] = React.useState(value);
10
- const inputRef = React.useRef(null);
11
- React.useEffect(() => {
12
- setEditValue(value);
13
- }, [value]);
14
- React.useEffect(() => {
15
- if (isEditing && inputRef.current) {
16
- inputRef.current.focus();
17
- inputRef.current.select();
18
- }
19
- }, [isEditing]);
20
- const handleSave = () => {
21
- setIsEditing(false);
22
- if (editValue.trim() !== value) {
23
- onChange(editValue.trim());
24
- }
25
- else {
26
- setEditValue(value);
27
- }
28
- };
29
- const handleCancel = () => {
30
- setIsEditing(false);
31
- setEditValue(value);
32
- };
33
- const handleKeyDown = (e) => {
34
- if (e.key === 'Enter') {
35
- handleSave();
36
- }
37
- else if (e.key === 'Escape') {
38
- handleCancel();
39
- }
40
- };
41
- if (isEditing) {
42
- return (_jsx(Input, { ref: inputRef, type: "text", value: editValue, onChange: (e) => setEditValue(e.target.value), onBlur: handleSave, onKeyDown: handleKeyDown, className: cn('w-auto', className), placeholder: placeholder, inputSize: "small" }));
43
- }
44
- return (_jsxs("div", { ref: ref, onClick: () => setIsEditing(true), className: cn('group inline-flex h-[24px] cursor-pointer items-center gap-fds-xs rounded px-fds-xs font-fds-semibold hover:bg-fds-blue-10 dark:hover:bg-fds-gray-80', className), children: [_jsx("span", { className: cn(!value && 'text-fds-gray-60'), children: value || placeholder }), !hideIcon && _jsx(IconEdit, { size: 14, className: "text-fds-gray-60" })] }));
45
- });
46
- InlineEdit.displayName = 'InlineEdit';
47
- export { InlineEdit };
package/dist/esm/components/input-group.js DELETED
@@ -1,63 +0,0 @@
1
- "use client";
2
- import { jsx as _jsx } from "react/jsx-runtime";
3
- import { cva } from 'class-variance-authority';
4
- import { cn } from '../lib/utils';
5
- import { Button } from './button';
6
- import { Input } from './input';
7
- import { Textarea } from './textarea';
8
- function InputGroup({ className, ...props }) {
9
- 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',
10
- // Variants based on alignment.
11
- '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',
12
- // Focus state.
13
- 'focus-within:border-[#2075bd] focus-within:shadow-[0_0_0_2px_var(--fds-color-primary-blue-20)]',
14
- // Error state.
15
- '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 }));
16
- }
17
- 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", {
18
- variants: {
19
- align: {
20
- 'inline-start': 'order-first rounded-l-[3px] border-r border-input-border',
21
- 'inline-end': 'order-last rounded-r-[3px] border-l border-input-border',
22
- 'block-start': '[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5',
23
- 'block-end': '[.border-t]:pt-3 order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5',
24
- },
25
- },
26
- defaultVariants: {
27
- align: 'inline-start',
28
- },
29
- });
30
- function InputGroupAddon({ className, align = 'inline-start', ...props }) {
31
- return (_jsx("div", { role: "group", "data-slot": "input-group-addon", "data-align": align, className: cn(inputGroupAddonVariants({ align }), className), onClick: (e) => {
32
- if (e.target.closest('button')) {
33
- return;
34
- }
35
- e.currentTarget.parentElement?.querySelector('input')?.focus();
36
- }, ...props }));
37
- }
38
- const inputGroupButtonVariants = cva('flex items-center gap-2 text-sm shadow-none', {
39
- variants: {
40
- size: {
41
- xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
42
- sm: 'h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5',
43
- 'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
44
- 'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
45
- },
46
- },
47
- defaultVariants: {
48
- size: 'xs',
49
- },
50
- });
51
- function InputGroupButton({ className, htmlType = 'button', type = 'text', size = 'xs', ...props }) {
52
- return (_jsx(Button, { htmlType: htmlType, type: type, "data-size": size, className: cn(inputGroupButtonVariants({ size }), className), ...props }));
53
- }
54
- function InputGroupText({ className, ...props }) {
55
- 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 }));
56
- }
57
- function InputGroupInput({ className, ...props }) {
58
- 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 }));
59
- }
60
- function InputGroupTextarea({ className, ...props }) {
61
- 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 }));
62
- }
63
- export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, };
package/dist/esm/components/input-otp.js DELETED
@@ -1,19 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import * as React from "react";
4
- import { OTPInput, OTPInputContext } from "input-otp";
5
- import { Dot } from "lucide-react";
6
- import { cn } from "../lib/utils";
7
- 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 })));
8
- InputOTP.displayName = "InputOTP";
9
- const InputOTPGroup = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex items-center", className), ...props })));
10
- InputOTPGroup.displayName = "InputOTPGroup";
11
- const InputOTPSlot = React.forwardRef(({ index, className, ...props }, ref) => {
12
- const inputOTPContext = React.useContext(OTPInputContext);
13
- const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
14
- 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" }) }))] }));
15
- });
16
- InputOTPSlot.displayName = "InputOTPSlot";
17
- const InputOTPSeparator = React.forwardRef(({ ...props }, ref) => (_jsx("div", { ref: ref, role: "separator", ...props, children: _jsx(Dot, {}) })));
18
- InputOTPSeparator.displayName = "InputOTPSeparator";
19
- export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
package/dist/esm/components/input.js DELETED
@@ -1,21 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { cva } from 'class-variance-authority';
3
- import * as React from 'react';
4
- import { cn } from '../lib/utils';
5
- 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', {
6
- variants: {
7
- inputSize: {
8
- small: 'h-[24px] px-2 py-1 text-fds-sm',
9
- default: 'h-[32px] px-3 py-2 text-fds-base',
10
- large: 'h-[40px] px-3 py-2 text-fds-h6',
11
- },
12
- },
13
- defaultVariants: {
14
- inputSize: 'default',
15
- },
16
- });
17
- const Input = React.forwardRef(({ className, type, inputSize, ...props }, ref) => {
18
- return (_jsx("input", { type: type, className: cn(inputVariants({ inputSize, className })), ref: ref, ...props }));
19
- });
20
- Input.displayName = 'Input';
21
- export { Input };
package/dist/esm/components/label.js DELETED
@@ -1,9 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import * as React from "react";
3
- import * as LabelPrimitive from "@radix-ui/react-label";
4
- import { cva } from "class-variance-authority";
5
- import { cn } from "../lib/utils";
6
- const labelVariants = cva("text-fds-sm font-fds-semibold leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
7
- const Label = React.forwardRef(({ className, ...props }, ref) => (_jsx(LabelPrimitive.Root, { ref: ref, className: cn(labelVariants(), className), ...props })));
8
- Label.displayName = LabelPrimitive.Root.displayName;
9
- export { Label };
package/dist/esm/components/menubar.js DELETED
@@ -1,45 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import * as React from "react";
3
- import * as MenubarPrimitive from "@radix-ui/react-menubar";
4
- import { Check, ChevronRight, Circle } from "lucide-react";
5
- import { cn } from "../lib/utils";
6
- function MenubarMenu({ ...props }) {
7
- return _jsx(MenubarPrimitive.Menu, { ...props });
8
- }
9
- function MenubarGroup({ ...props }) {
10
- return _jsx(MenubarPrimitive.Group, { ...props });
11
- }
12
- function MenubarPortal({ ...props }) {
13
- return _jsx(MenubarPrimitive.Portal, { ...props });
14
- }
15
- function MenubarRadioGroup({ ...props }) {
16
- return _jsx(MenubarPrimitive.RadioGroup, { ...props });
17
- }
18
- function MenubarSub({ ...props }) {
19
- return _jsx(MenubarPrimitive.Sub, { "data-slot": "menubar-sub", ...props });
20
- }
21
- 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 })));
22
- Menubar.displayName = MenubarPrimitive.Root.displayName;
23
- 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 })));
24
- MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
25
- 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" })] })));
26
- MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
27
- 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 })));
28
- MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
29
- 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 }) })));
30
- MenubarContent.displayName = MenubarPrimitive.Content.displayName;
31
- 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 })));
32
- MenubarItem.displayName = MenubarPrimitive.Item.displayName;
33
- 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] })));
34
- MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
35
- 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] })));
36
- MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
37
- 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 })));
38
- MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
39
- const MenubarSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(MenubarPrimitive.Separator, { ref: ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props })));
40
- MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
41
- const MenubarShortcut = ({ className, ...props }) => {
42
- return (_jsx("span", { className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className), ...props }));
43
- };
44
- MenubarShortcut.displayname = "MenubarShortcut";
45
- export { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarSeparator, MenubarLabel, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarPortal, MenubarSubContent, MenubarSubTrigger, MenubarGroup, MenubarSub, MenubarShortcut, };
package/dist/esm/components/navigation-menu.js DELETED
@@ -1,24 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import * as React from "react";
3
- import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
4
- import { cva } from "class-variance-authority";
5
- import { ChevronDown } from "lucide-react";
6
- import { cn } from "../lib/utils";
7
- 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, {})] })));
8
- NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
9
- 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 })));
10
- NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
11
- const NavigationMenuItem = NavigationMenuPrimitive.Item;
12
- 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");
13
- 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" })] })));
14
- NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
15
- 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 })));
16
- NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
17
- const NavigationMenuLink = NavigationMenuPrimitive.Link;
18
- 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 }) })));
19
- NavigationMenuViewport.displayName =
20
- NavigationMenuPrimitive.Viewport.displayName;
21
- 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" }) })));
22
- NavigationMenuIndicator.displayName =
23
- NavigationMenuPrimitive.Indicator.displayName;
24
- export { navigationMenuTriggerStyle, NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, };
package/dist/esm/components/pagination.js DELETED
@@ -1,23 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import * as React from 'react';
3
- import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
4
- import { cn } from '../lib/utils';
5
- import { buttonVariants, } from './button';
6
- const Pagination = ({ className, ...props }) => (_jsx("nav", { role: "navigation", "aria-label": "pagination", className: cn('mx-auto flex w-full justify-center', className), ...props }));
7
- Pagination.displayName = 'Pagination';
8
- const PaginationContent = React.forwardRef(({ className, ...props }, ref) => (_jsx("ul", { ref: ref, className: cn('flex flex-row items-center gap-1', className), ...props })));
9
- PaginationContent.displayName = 'PaginationContent';
10
- const PaginationItem = React.forwardRef(({ className, ...props }, ref) => (_jsx("li", { ref: ref, className: cn('', className), ...props })));
11
- PaginationItem.displayName = 'PaginationItem';
12
- const PaginationLink = ({ className, isActive, icon = true, size, ...props }) => (_jsx("a", { "aria-current": isActive ? 'page' : undefined, className: cn(buttonVariants({
13
- type: isActive ? 'secondary' : 'text',
14
- size,
15
- }), icon && 'aspect-square p-0', className), ...props }));
16
- PaginationLink.displayName = 'PaginationLink';
17
- 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" })] }));
18
- PaginationPrevious.displayName = 'PaginationPrevious';
19
- 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" })] }));
20
- PaginationNext.displayName = 'PaginationNext';
21
- 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" })] }));
22
- PaginationEllipsis.displayName = 'PaginationEllipsis';
23
- export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, };
package/dist/esm/components/phone-input.js DELETED
@@ -1,181 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { cn } from '../lib/utils';
4
- import { getCountryFlag } from '../lib/countryUtils';
5
- import { IconCaretDown } from '@freightos/icons';
6
- import * as React from 'react';
7
- import { parsePhoneNumberFromString, AsYouType, getCountryCallingCode, } from 'libphonenumber-js';
8
- // Countries with dial codes
9
- export const PHONE_COUNTRIES = [
10
- { code: 'US', name: 'United States', dialCode: '+1' },
11
- { code: 'CN', name: 'China', dialCode: '+86' },
12
- { code: 'GB', name: 'United Kingdom', dialCode: '+44' },
13
- { code: 'CA', name: 'Canada', dialCode: '+1' },
14
- { code: 'DE', name: 'Germany', dialCode: '+49' },
15
- { code: 'FR', name: 'France', dialCode: '+33' },
16
- { code: 'IT', name: 'Italy', dialCode: '+39' },
17
- { code: 'ES', name: 'Spain', dialCode: '+34' },
18
- { code: 'NL', name: 'Netherlands', dialCode: '+31' },
19
- { code: 'BE', name: 'Belgium', dialCode: '+32' },
20
- { code: 'CH', name: 'Switzerland', dialCode: '+41' },
21
- { code: 'AT', name: 'Austria', dialCode: '+43' },
22
- { code: 'SE', name: 'Sweden', dialCode: '+46' },
23
- { code: 'NO', name: 'Norway', dialCode: '+47' },
24
- { code: 'DK', name: 'Denmark', dialCode: '+45' },
25
- { code: 'FI', name: 'Finland', dialCode: '+358' },
26
- { code: 'PL', name: 'Poland', dialCode: '+48' },
27
- { code: 'CZ', name: 'Czech Republic', dialCode: '+420' },
28
- { code: 'IE', name: 'Ireland', dialCode: '+353' },
29
- { code: 'PT', name: 'Portugal', dialCode: '+351' },
30
- { code: 'GR', name: 'Greece', dialCode: '+30' },
31
- { code: 'JP', name: 'Japan', dialCode: '+81' },
32
- { code: 'KR', name: 'South Korea', dialCode: '+82' },
33
- { code: 'IN', name: 'India', dialCode: '+91' },
34
- { code: 'AU', name: 'Australia', dialCode: '+61' },
35
- { code: 'NZ', name: 'New Zealand', dialCode: '+64' },
36
- { code: 'SG', name: 'Singapore', dialCode: '+65' },
37
- { code: 'HK', name: 'Hong Kong', dialCode: '+852' },
38
- { code: 'TW', name: 'Taiwan', dialCode: '+886' },
39
- { code: 'TH', name: 'Thailand', dialCode: '+66' },
40
- { code: 'MY', name: 'Malaysia', dialCode: '+60' },
41
- { code: 'ID', name: 'Indonesia', dialCode: '+62' },
42
- { code: 'PH', name: 'Philippines', dialCode: '+63' },
43
- { code: 'VN', name: 'Vietnam', dialCode: '+84' },
44
- { code: 'BR', name: 'Brazil', dialCode: '+55' },
45
- { code: 'MX', name: 'Mexico', dialCode: '+52' },
46
- { code: 'AR', name: 'Argentina', dialCode: '+54' },
47
- { code: 'CL', name: 'Chile', dialCode: '+56' },
48
- { code: 'CO', name: 'Colombia', dialCode: '+57' },
49
- { code: 'PE', name: 'Peru', dialCode: '+51' },
50
- { code: 'ZA', name: 'South Africa', dialCode: '+27' },
51
- { code: 'EG', name: 'Egypt', dialCode: '+20' },
52
- { code: 'IL', name: 'Israel', dialCode: '+972' },
53
- { code: 'AE', name: 'United Arab Emirates', dialCode: '+971' },
54
- { code: 'SA', name: 'Saudi Arabia', dialCode: '+966' },
55
- { code: 'TR', name: 'Turkey', dialCode: '+90' },
56
- { code: 'RU', name: 'Russia', dialCode: '+7' },
57
- { code: 'UA', name: 'Ukraine', dialCode: '+380' },
58
- ];
59
- export const PhoneInput = ({ value = '', onChange, onError, placeholder = 'Enter phone number', defaultCountry = 'US', mostUsedCountries = ['US', 'CN'], countries = PHONE_COUNTRIES, className, disabled = false, }) => {
60
- const [open, setOpen] = React.useState(false);
61
- const [search, setSearch] = React.useState('');
62
- const [selectedCountry, setSelectedCountry] = React.useState(() => countries.find((c) => c.code === defaultCountry) || countries[0]);
63
- const [phoneNumber, setPhoneNumber] = React.useState('');
64
- const containerRef = React.useRef(null);
65
- const searchInputRef = React.useRef(null);
66
- // Parse initial value to extract country and number
67
- React.useEffect(() => {
68
- if (value) {
69
- try {
70
- const parsed = parsePhoneNumberFromString(value);
71
- if (parsed) {
72
- const countryCode = parsed.country;
73
- if (countryCode) {
74
- const country = countries.find((c) => c.code === countryCode);
75
- if (country) {
76
- setSelectedCountry(country);
77
- }
78
- }
79
- setPhoneNumber(parsed.nationalNumber);
80
- }
81
- else {
82
- // Try to extract dial code from value
83
- const matchingCountry = countries.find((c) => value.startsWith(c.dialCode));
84
- if (matchingCountry) {
85
- setSelectedCountry(matchingCountry);
86
- setPhoneNumber(value.slice(matchingCountry.dialCode.length).trim());
87
- }
88
- else {
89
- setPhoneNumber(value.replace(/^\+\d+\s*/, ''));
90
- }
91
- }
92
- }
93
- catch {
94
- setPhoneNumber(value);
95
- }
96
- }
97
- // eslint-disable-next-line react-hooks/exhaustive-deps
98
- }, []);
99
- // Filter countries based on search
100
- const filteredCountries = React.useMemo(() => {
101
- const searchLower = search.toLowerCase();
102
- const filtered = countries.filter((country) => country.name.toLowerCase().includes(searchLower) ||
103
- country.code.toLowerCase().includes(searchLower) ||
104
- country.dialCode.includes(search));
105
- return filtered.sort((a, b) => {
106
- const aIsMostUsed = mostUsedCountries.includes(a.code);
107
- const bIsMostUsed = mostUsedCountries.includes(b.code);
108
- if (aIsMostUsed && !bIsMostUsed)
109
- return -1;
110
- if (!aIsMostUsed && bIsMostUsed)
111
- return 1;
112
- return a.name.localeCompare(b.name);
113
- });
114
- }, [countries, search, mostUsedCountries]);
115
- // Close on click outside
116
- React.useEffect(() => {
117
- const handleClickOutside = (e) => {
118
- if (containerRef.current &&
119
- !containerRef.current.contains(e.target)) {
120
- setOpen(false);
121
- setSearch('');
122
- }
123
- };
124
- if (open) {
125
- document.addEventListener('mousedown', handleClickOutside);
126
- }
127
- return () => document.removeEventListener('mousedown', handleClickOutside);
128
- }, [open]);
129
- const handleCountrySelect = (country) => {
130
- setSelectedCountry(country);
131
- setOpen(false);
132
- setSearch('');
133
- // Update full value with new country code
134
- const fullNumber = `${country.dialCode} ${phoneNumber}`.trim();
135
- onChange?.(fullNumber);
136
- validateNumber(phoneNumber, country.code);
137
- };
138
- const handlePhoneChange = (e) => {
139
- const input = e.target.value;
140
- // Format as user types
141
- const formatter = new AsYouType(selectedCountry.code);
142
- const formatted = formatter.input(input);
143
- // Extract just the national number part
144
- const nationalNumber = formatted.replace(/^\+\d+\s*/, '');
145
- setPhoneNumber(nationalNumber);
146
- // Build full international number
147
- const fullNumber = `${selectedCountry.dialCode} ${nationalNumber}`.trim();
148
- onChange?.(fullNumber);
149
- validateNumber(nationalNumber, selectedCountry.code);
150
- };
151
- const validateNumber = (number, countryCode) => {
152
- if (!number || !onError)
153
- return;
154
- try {
155
- const fullNumber = `${getCountryCallingCode(countryCode)}${number.replace(/\D/g, '')}`;
156
- const parsed = parsePhoneNumberFromString(`+${fullNumber}`, countryCode);
157
- onError?.(!parsed?.isValid());
158
- }
159
- catch {
160
- onError?.(true);
161
- }
162
- };
163
- const handleTriggerClick = () => {
164
- if (!disabled) {
165
- setOpen(!open);
166
- if (!open) {
167
- setTimeout(() => searchInputRef.current?.focus(), 0);
168
- }
169
- }
170
- };
171
- 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 &&
172
- '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) => {
173
- const isSelected = country.code === selectedCountry.code;
174
- const isMostUsed = mostUsedCountries.includes(country.code);
175
- const isLastMostUsed = isMostUsed &&
176
- !search &&
177
- index === mostUsedCountries.length - 1 &&
178
- filteredCountries.length > mostUsedCountries.length;
179
- 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));
180
- })) })] }))] }));
181
- };
package/dist/esm/components/popover.js DELETED
@@ -1,10 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import * as React from "react";
3
- import * as PopoverPrimitive from "@radix-ui/react-popover";
4
- import { cn } from "../lib/utils";
5
- const Popover = PopoverPrimitive.Root;
6
- const PopoverTrigger = PopoverPrimitive.Trigger;
7
- 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 }))] }) })));
8
- PopoverContent.displayName = PopoverPrimitive.Content.displayName;
9
- const PopoverArrow = PopoverPrimitive.Arrow;
10
- export { Popover, PopoverTrigger, PopoverContent, PopoverArrow };
package/dist/esm/components/progress.js DELETED
@@ -1,7 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import * as React from "react";
3
- import * as ProgressPrimitive from "@radix-ui/react-progress";
4
- import { cn } from "../lib/utils";
5
- 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)}%)` } }) })));
6
- Progress.displayName = ProgressPrimitive.Root.displayName;
7
- export { Progress };
package/dist/esm/components/resizable.js DELETED
@@ -1,9 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx } from "react/jsx-runtime";
3
- import { GripVertical } from 'lucide-react';
4
- import * as ResizablePrimitive from 'react-resizable-panels';
5
- import { cn } from '../lib/utils';
6
- const ResizablePanelGroup = ({ className, ...props }) => (_jsx(ResizablePrimitive.PanelGroup, { className: cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className), ...props }));
7
- const ResizablePanel = ResizablePrimitive.Panel;
8
- 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" }) })) }));
9
- export { ResizableHandle, ResizablePanel, ResizablePanelGroup };