@lateralus-ai/shipping-ui 1.4.13 → 1.4.14

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 (64) hide show
  1. package/README.md +108 -108
  2. package/dist/index.cjs +38 -38
  3. package/dist/index.esm.js +4495 -4489
  4. package/dist/tailwind-theme.d.ts +12 -0
  5. package/package.json +99 -99
  6. package/src/components/DocumentEditor/DocumentEditor.tsx +871 -871
  7. package/src/components/HelloWorld.tsx +3 -3
  8. package/src/components/InputPrompt.tsx +96 -96
  9. package/src/components/ModalPanel.tsx +49 -49
  10. package/src/components/PdfViewer/ImageViewer.tsx +211 -211
  11. package/src/components/PdfViewer/PdfViewer.tsx +232 -232
  12. package/src/components/PdfViewer/index.ts +2 -2
  13. package/src/components/PdfViewer/usePageManagement.ts +32 -32
  14. package/src/components/PdfViewer/usePanning.ts +42 -42
  15. package/src/components/PdfViewer/useRefDimensions.ts +16 -16
  16. package/src/components/PdfViewer/useRotation.ts +13 -13
  17. package/src/components/PdfViewer/useZoom.ts +26 -26
  18. package/src/components/SearchModal.tsx +320 -320
  19. package/src/components/Sidebar/Button.tsx +20 -20
  20. package/src/components/Sidebar/Container.tsx +31 -31
  21. package/src/components/Sidebar/Item.tsx +39 -39
  22. package/src/components/Sidebar/Layout.tsx +32 -32
  23. package/src/components/Sidebar/Provider.tsx +47 -47
  24. package/src/components/Sidebar/SecondaryItem.tsx +39 -39
  25. package/src/components/Sidebar/SideContainer.tsx +31 -31
  26. package/src/components/Sidebar/ToggleCollapseButton.tsx +24 -24
  27. package/src/components/Sidebar/index.ts +8 -8
  28. package/src/components/Tabs.tsx +43 -43
  29. package/src/components/icons/CloseSidebarIcon.tsx +19 -19
  30. package/src/components/icons/CloseSidebarMidIcon.tsx +19 -19
  31. package/src/components/icons/ExpandIcon.tsx +21 -21
  32. package/src/components/icons/SendArrowIcon.tsx +23 -23
  33. package/src/components/icons/SendArrowIconGreen.tsx +17 -17
  34. package/src/components/icons/SettingsIcon.tsx +33 -33
  35. package/src/components/icons/XIcon.tsx +21 -21
  36. package/src/components/index.ts +6 -6
  37. package/src/index.ts +4 -4
  38. package/src/material-theme.ts +477 -477
  39. package/src/stories/Buttons.stories.tsx +15 -15
  40. package/src/stories/Buttons.tsx +52 -52
  41. package/src/stories/Checkbox.stories.tsx +15 -15
  42. package/src/stories/Checkbox.tsx +56 -56
  43. package/src/stories/ColorPalette.stories.tsx +15 -15
  44. package/src/stories/ColorPalette.tsx +85 -72
  45. package/src/stories/DocumentEditor.stories.tsx +287 -287
  46. package/src/stories/Dropdowns.stories.tsx +15 -15
  47. package/src/stories/Dropdowns.tsx +52 -52
  48. package/src/stories/InputPrompt.stories.tsx +15 -15
  49. package/src/stories/InputPrompt.tsx +63 -63
  50. package/src/stories/ModalHeader.stories.tsx +35 -35
  51. package/src/stories/PDFViewer.stories.tsx +39 -39
  52. package/src/stories/SearchModal.stories.tsx +132 -132
  53. package/src/stories/SearchModal.tsx +82 -82
  54. package/src/stories/Sidebar.stories.tsx +15 -15
  55. package/src/stories/Sidebar.tsx +108 -108
  56. package/src/stories/Tabs.stories.tsx +51 -51
  57. package/src/stories/Typography.stories.tsx +15 -15
  58. package/src/stories/Typography.tsx +110 -110
  59. package/src/style.css +2 -2
  60. package/src/styles/tabs.css +55 -55
  61. package/src/tailwind-theme.ts +243 -231
  62. package/src/types/documentEditor.ts +55 -55
  63. package/src/utils/checkboxModule.ts +241 -241
  64. package/src/utils/cn.ts +11 -11
@@ -1,231 +1,243 @@
1
- export const theme = {
2
- fontFamily: {
3
- sans: ["Work Sans", "sans-serif"],
4
- mono: ["Roboto Mono", "monospace"],
5
- signature: ["Alex Brush", "Lucida Handwriting", "cursive"],
6
- },
7
- fontSize: {
8
- subheader: [
9
- "18px",
10
- {
11
- lineHeight: "28px",
12
- letterSpacing: "-0.01em",
13
- },
14
- ],
15
- "subheader-em": [
16
- "18px",
17
- {
18
- lineHeight: "28px",
19
- letterSpacing: "-0.01em",
20
- fontWeight: "500",
21
- },
22
- ],
23
- body: [
24
- "16px",
25
- {
26
- lineHeight: "28px",
27
- letterSpacing: "-0.01em",
28
- },
29
- ],
30
- "body-em": [
31
- "16px",
32
- {
33
- lineHeight: "28px",
34
- letterSpacing: "-0.01em",
35
- fontWeight: "500",
36
- },
37
- ],
38
- "caption-1": [
39
- "16px",
40
- {
41
- lineHeight: "22px",
42
- },
43
- ],
44
- "caption-1-em": [
45
- "16px",
46
- {
47
- lineHeight: "22px",
48
- fontWeight: "500",
49
- },
50
- ],
51
- "caption-2": [
52
- "14px",
53
- {
54
- lineHeight: "20px",
55
- },
56
- ],
57
- "caption-2-em": [
58
- "14px",
59
- {
60
- lineHeight: "20px",
61
- fontWeight: "500",
62
- },
63
- ],
64
- footnote: [
65
- "13px",
66
- {
67
- lineHeight: "17px",
68
- },
69
- ],
70
- "footnote-em": [
71
- "13px",
72
- {
73
- lineHeight: "17px",
74
- fontWeight: "500",
75
- },
76
- ],
77
- },
78
- width: {
79
- authPageWidth: "370px",
80
- },
81
- keyframes: {
82
- "accordion-down": {
83
- from: { height: 0 },
84
- to: { height: "var(--radix-accordion-content-height)" },
85
- },
86
- "accordion-up": {
87
- from: { height: "var(--radix-accordion-content-height)" },
88
- to: { height: 0 },
89
- },
90
- },
91
- animation: {
92
- "accordion-down": "accordion-down 0.2s ease-out",
93
- "accordion-up": "accordion-up 0.2s ease-out",
94
- },
95
- colors: {
96
- brand: {
97
- 50: "#e0fff2",
98
- 100: "#adf0d3",
99
- 200: "#8aeac1",
100
- 300: "#67e4ae",
101
- 400: "#45de9c",
102
- 500: "#26d489",
103
- 600: "#1da56a",
104
- 700: "#15754c",
105
- 800: "#0c452d",
106
- 900: "#04160e",
107
- },
108
- gray: {
109
- 50: "#fafafa",
110
- 100: "#f0f0f0",
111
- 200: "#d6d6d6",
112
- 300: "#bdbdbd",
113
- 400: "#a3a3a3",
114
- 500: "#8a8a8a",
115
- 600: "#6e6e6e",
116
- 700: "#525252",
117
- 800: "#363636",
118
- 900: "#1a1a1a",
119
- },
120
- green: {
121
- 50: "#e0fff2",
122
- 100: "#adf0d3",
123
- 200: "#8aeac1",
124
- 300: "#67e4ae",
125
- 400: "#45de9c",
126
- 500: "#26d489",
127
- 600: "#1da56a",
128
- 700: "#15754c",
129
- 800: "#0c452d",
130
- 900: "#04160e",
131
- },
132
- blue: {
133
- 50: "#cae8f7",
134
- 100: "#b8e0f4",
135
- 200: "#95d1ef",
136
- 300: "#71c1ea",
137
- 400: "#4eb2e4",
138
- 500: "#2aa2df",
139
- 600: "#1b82b6",
140
- 700: "#145f85",
141
- 800: "#0d3c54",
142
- 900: "#051923",
143
- },
144
- red: {
145
- 50: "#f9dcdc",
146
- 100: "#f6cbcb",
147
- 200: "#f0a8a8",
148
- 300: "#ea8686",
149
- 400: "#e36363",
150
- 500: "#dd4040",
151
- 600: "#c32222",
152
- 700: "#931a1a",
153
- 800: "#641212",
154
- 900: "#340909",
155
- },
156
- orange: {
157
- 50: "#fff7eb",
158
- 100: "#f8e0bf",
159
- 200: "#f4cf9a",
160
- 300: "#f0bd75",
161
- 400: "#ecab51",
162
- 500: "#e89a2c",
163
- 600: "#C77C0A",
164
- 700: "#935d10",
165
- 800: "#603d0b",
166
- 900: "#2e1d05",
167
- },
168
- "brand-purple": "#ab68ff",
169
- presentation: "var(--presentation)",
170
- "text-primary": "var(--text-primary)",
171
- "text-secondary": "var(--text-secondary)",
172
- "text-secondary-alt": "var(--text-secondary-alt)",
173
- "text-tertiary": "var(--text-tertiary)",
174
- "ring-primary": "var(--ring-primary)",
175
- "header-primary": "var(--header-primary)",
176
- "header-hover": "var(--header-hover)",
177
- "header-button-hover": "var(--header-button-hover)",
178
- "surface-active": "var(--surface-active)",
179
- "surface-active-alt": "var(--surface-active-alt)",
180
- "surface-hover": "var(--surface-hover)",
181
- "surface-primary": "var(--surface-primary)",
182
- "surface-primary-alt": "var(--surface-primary-alt)",
183
- "surface-primary-contrast": "var(--surface-primary-contrast)",
184
- "surface-secondary": "var(--surface-secondary)",
185
- "surface-secondary-alt": "var(--surface-secondary-alt)",
186
- "surface-tertiary": "var(--surface-tertiary)",
187
- "surface-tertiary-alt": "var(--surface-tertiary-alt)",
188
- "surface-dialog": "var(--surface-dialog)",
189
- "surface-submit": "var(--surface-submit)",
190
- "border-light": "var(--border-light)",
191
- "border-medium": "var(--border-medium)",
192
- "border-medium-alt": "var(--border-medium-alt)",
193
- "border-heavy": "var(--border-heavy)",
194
- "border-xheavy": "var(--border-xheavy)",
195
- border: "hsl(var(--border))",
196
- input: "hsl(var(--input))",
197
- ["switch-unchecked"]: "hsl(var(--switch-unchecked))",
198
- ring: "hsl(var(--ring))",
199
- background: "hsl(var(--background))",
200
- foreground: "hsl(var(--foreground))",
201
- primary: {
202
- DEFAULT: "hsl(var(--primary))",
203
- foreground: "hsl(var(--primary-foreground))",
204
- },
205
- secondary: {
206
- DEFAULT: "hsl(var(--secondary))",
207
- foreground: "hsl(var(--secondary-foreground))",
208
- },
209
- destructive: {
210
- DEFAULT: "hsl(var(--destructive))",
211
- foreground: "hsl(var(--destructive-foreground))",
212
- },
213
- muted: {
214
- DEFAULT: "hsl(var(--muted))",
215
- foreground: "hsl(var(--muted-foreground))",
216
- },
217
- accent: {
218
- DEFAULT: "hsl(var(--accent))",
219
- foreground: "hsl(var(--accent-foreground))",
220
- },
221
- card: {
222
- DEFAULT: "hsl(var(--card))",
223
- foreground: "hsl(var(--card-foreground))",
224
- },
225
- },
226
- borderRadius: {
227
- lg: "8px",
228
- md: "calc(8px - 2px)",
229
- sm: "calc(8px - 4px)",
230
- },
231
- };
1
+ export const theme = {
2
+ fontFamily: {
3
+ sans: ["Work Sans", "sans-serif"],
4
+ mono: ["Roboto Mono", "monospace"],
5
+ signature: ["Alex Brush", "Lucida Handwriting", "cursive"],
6
+ },
7
+ fontSize: {
8
+ subheader: [
9
+ "18px",
10
+ {
11
+ lineHeight: "28px",
12
+ letterSpacing: "-0.01em",
13
+ },
14
+ ],
15
+ "subheader-em": [
16
+ "18px",
17
+ {
18
+ lineHeight: "28px",
19
+ letterSpacing: "-0.01em",
20
+ fontWeight: "500",
21
+ },
22
+ ],
23
+ body: [
24
+ "16px",
25
+ {
26
+ lineHeight: "28px",
27
+ letterSpacing: "-0.01em",
28
+ },
29
+ ],
30
+ "body-em": [
31
+ "16px",
32
+ {
33
+ lineHeight: "28px",
34
+ letterSpacing: "-0.01em",
35
+ fontWeight: "500",
36
+ },
37
+ ],
38
+ "caption-1": [
39
+ "16px",
40
+ {
41
+ lineHeight: "22px",
42
+ },
43
+ ],
44
+ "caption-1-em": [
45
+ "16px",
46
+ {
47
+ lineHeight: "22px",
48
+ fontWeight: "500",
49
+ },
50
+ ],
51
+ "caption-2": [
52
+ "14px",
53
+ {
54
+ lineHeight: "20px",
55
+ },
56
+ ],
57
+ "caption-2-em": [
58
+ "14px",
59
+ {
60
+ lineHeight: "20px",
61
+ fontWeight: "500",
62
+ },
63
+ ],
64
+ footnote: [
65
+ "13px",
66
+ {
67
+ lineHeight: "17px",
68
+ },
69
+ ],
70
+ "footnote-em": [
71
+ "13px",
72
+ {
73
+ lineHeight: "17px",
74
+ fontWeight: "500",
75
+ },
76
+ ],
77
+ },
78
+ width: {
79
+ authPageWidth: "370px",
80
+ },
81
+ keyframes: {
82
+ "accordion-down": {
83
+ from: { height: 0 },
84
+ to: { height: "var(--radix-accordion-content-height)" },
85
+ },
86
+ "accordion-up": {
87
+ from: { height: "var(--radix-accordion-content-height)" },
88
+ to: { height: 0 },
89
+ },
90
+ },
91
+ animation: {
92
+ "accordion-down": "accordion-down 0.2s ease-out",
93
+ "accordion-up": "accordion-up 0.2s ease-out",
94
+ },
95
+ colors: {
96
+ brand: {
97
+ 50: "#e0fff2",
98
+ 100: "#adf0d3",
99
+ 200: "#8aeac1",
100
+ 300: "#67e4ae",
101
+ 400: "#45de9c",
102
+ 500: "#26d489",
103
+ 600: "#1da56a",
104
+ 700: "#15754c",
105
+ 800: "#0c452d",
106
+ 900: "#04160e",
107
+ },
108
+ gray: {
109
+ 50: "#fafafa",
110
+ 100: "#f0f0f0",
111
+ 200: "#d6d6d6",
112
+ 300: "#bdbdbd",
113
+ 400: "#a3a3a3",
114
+ 500: "#8a8a8a",
115
+ 600: "#6e6e6e",
116
+ 700: "#525252",
117
+ 800: "#363636",
118
+ 900: "#1a1a1a",
119
+ },
120
+ green: {
121
+ 50: "#f0f5f3",
122
+ 100: "#e4f0ea",
123
+ 200: "#bbead4",
124
+ 300: "#7be4b3",
125
+ 400: "#50de9c",
126
+ 500: "#2fd487",
127
+ 600: "#1ea566",
128
+ 700: "#15754c",
129
+ 800: "#0c452d",
130
+ 900: "#04160e",
131
+ },
132
+ blue: {
133
+ 50: "#f5f8fa",
134
+ 100: "#e6f0f5",
135
+ 200: "#d0eaf7",
136
+ 300: "#b5e0f5",
137
+ 400: "#7fc7eb",
138
+ 500: "#4eb2e4",
139
+ 600: "#3f98cc",
140
+ 700: "#2b75ab",
141
+ 800: "#1b5587",
142
+ 900: "#0f3966",
143
+ },
144
+ red: {
145
+ 50: "#f9dcdc",
146
+ 100: "#f6cbcb",
147
+ 200: "#f0a8a8",
148
+ 300: "#ea8686",
149
+ 400: "#e36363",
150
+ 500: "#dd4040",
151
+ 600: "#c32222",
152
+ 700: "#931a1a",
153
+ 800: "#641212",
154
+ 900: "#340909",
155
+ },
156
+ orange: {
157
+ 50: "#fef7ec",
158
+ 100: "#fdecd4",
159
+ 200: "#fad7a3",
160
+ 300: "#f8c373",
161
+ 400: "#f5ae42",
162
+ 500: "#f39912",
163
+ 600: "#c77c0a",
164
+ 700: "#975e08",
165
+ 800: "#663f05",
166
+ 900: "#362103",
167
+ },
168
+ purple: {
169
+ 50: "#f9f5fb",
170
+ 100: "#f1e6f5",
171
+ 200: "#e1c9ea",
172
+ 300: "#d1acde",
173
+ 400: "#bb84ce",
174
+ 500: "#a55cbe",
175
+ 600: "#8840a1",
176
+ 700: "#663079",
177
+ 800: "#442051",
178
+ 900: "#231029",
179
+ },
180
+ "brand-purple": "#ab68ff",
181
+ presentation: "var(--presentation)",
182
+ "text-primary": "var(--text-primary)",
183
+ "text-secondary": "var(--text-secondary)",
184
+ "text-secondary-alt": "var(--text-secondary-alt)",
185
+ "text-tertiary": "var(--text-tertiary)",
186
+ "ring-primary": "var(--ring-primary)",
187
+ "header-primary": "var(--header-primary)",
188
+ "header-hover": "var(--header-hover)",
189
+ "header-button-hover": "var(--header-button-hover)",
190
+ "surface-active": "var(--surface-active)",
191
+ "surface-active-alt": "var(--surface-active-alt)",
192
+ "surface-hover": "var(--surface-hover)",
193
+ "surface-primary": "var(--surface-primary)",
194
+ "surface-primary-alt": "var(--surface-primary-alt)",
195
+ "surface-primary-contrast": "var(--surface-primary-contrast)",
196
+ "surface-secondary": "var(--surface-secondary)",
197
+ "surface-secondary-alt": "var(--surface-secondary-alt)",
198
+ "surface-tertiary": "var(--surface-tertiary)",
199
+ "surface-tertiary-alt": "var(--surface-tertiary-alt)",
200
+ "surface-dialog": "var(--surface-dialog)",
201
+ "surface-submit": "var(--surface-submit)",
202
+ "border-light": "var(--border-light)",
203
+ "border-medium": "var(--border-medium)",
204
+ "border-medium-alt": "var(--border-medium-alt)",
205
+ "border-heavy": "var(--border-heavy)",
206
+ "border-xheavy": "var(--border-xheavy)",
207
+ border: "hsl(var(--border))",
208
+ input: "hsl(var(--input))",
209
+ ["switch-unchecked"]: "hsl(var(--switch-unchecked))",
210
+ ring: "hsl(var(--ring))",
211
+ background: "hsl(var(--background))",
212
+ foreground: "hsl(var(--foreground))",
213
+ primary: {
214
+ DEFAULT: "hsl(var(--primary))",
215
+ foreground: "hsl(var(--primary-foreground))",
216
+ },
217
+ secondary: {
218
+ DEFAULT: "hsl(var(--secondary))",
219
+ foreground: "hsl(var(--secondary-foreground))",
220
+ },
221
+ destructive: {
222
+ DEFAULT: "hsl(var(--destructive))",
223
+ foreground: "hsl(var(--destructive-foreground))",
224
+ },
225
+ muted: {
226
+ DEFAULT: "hsl(var(--muted))",
227
+ foreground: "hsl(var(--muted-foreground))",
228
+ },
229
+ accent: {
230
+ DEFAULT: "hsl(var(--accent))",
231
+ foreground: "hsl(var(--accent-foreground))",
232
+ },
233
+ card: {
234
+ DEFAULT: "hsl(var(--card))",
235
+ foreground: "hsl(var(--card-foreground))",
236
+ },
237
+ },
238
+ borderRadius: {
239
+ lg: "8px",
240
+ md: "calc(8px - 2px)",
241
+ sm: "calc(8px - 4px)",
242
+ },
243
+ };
@@ -1,56 +1,56 @@
1
- // Type definitions for Document Editor components
2
-
3
- export interface SchemaProperty {
4
- type: "string" | "boolean" | "number" | "integer";
5
- enum?: string[];
6
- format?: "date" | "date-time" | string;
7
- description?: string;
8
- title?: string;
9
- "ui:widget"?: string;
10
- "ui:rows"?: number;
11
- docx_mapping?: DocxMapping;
12
- }
13
-
14
- export interface DocxMapping {
15
- type: "checkbox" | "radio" | "text";
16
- name?: string;
17
- true_name?: string;
18
- false_name?: string;
19
- mapping?: RadioMapping[];
20
- }
21
-
22
- export interface RadioMapping {
23
- name: string;
24
- value: string | boolean;
25
- }
26
-
27
- export interface Schema {
28
- type: string;
29
- properties: Record<string, SchemaProperty>;
30
- required?: string[];
31
- }
32
-
33
- export interface CheckboxModuleOptions {
34
- checkboxData?: Record<string, boolean>;
35
- schema?: Schema;
36
- finalGeneration?: boolean;
37
- }
38
-
39
- export interface DocumentEditorProps {
40
- docxUrl: string;
41
- schema: Schema;
42
- onDataChange?: (data: Record<string, any>) => void;
43
- initialData?: Record<string, any>;
44
- onSaveRef?: React.MutableRefObject<(() => void) | null>;
45
- readonly?: boolean;
46
- }
47
-
48
- export interface DocxtemplaterPart {
49
- value?: string;
50
- [key: string]: any;
51
- }
52
-
53
- export interface DocxtemplaterOptions {
54
- contentType?: string;
55
- [key: string]: any;
1
+ // Type definitions for Document Editor components
2
+
3
+ export interface SchemaProperty {
4
+ type: "string" | "boolean" | "number" | "integer";
5
+ enum?: string[];
6
+ format?: "date" | "date-time" | string;
7
+ description?: string;
8
+ title?: string;
9
+ "ui:widget"?: string;
10
+ "ui:rows"?: number;
11
+ docx_mapping?: DocxMapping;
12
+ }
13
+
14
+ export interface DocxMapping {
15
+ type: "checkbox" | "radio" | "text";
16
+ name?: string;
17
+ true_name?: string;
18
+ false_name?: string;
19
+ mapping?: RadioMapping[];
20
+ }
21
+
22
+ export interface RadioMapping {
23
+ name: string;
24
+ value: string | boolean;
25
+ }
26
+
27
+ export interface Schema {
28
+ type: string;
29
+ properties: Record<string, SchemaProperty>;
30
+ required?: string[];
31
+ }
32
+
33
+ export interface CheckboxModuleOptions {
34
+ checkboxData?: Record<string, boolean>;
35
+ schema?: Schema;
36
+ finalGeneration?: boolean;
37
+ }
38
+
39
+ export interface DocumentEditorProps {
40
+ docxUrl: string;
41
+ schema: Schema;
42
+ onDataChange?: (data: Record<string, any>) => void;
43
+ initialData?: Record<string, any>;
44
+ onSaveRef?: React.MutableRefObject<(() => void) | null>;
45
+ readonly?: boolean;
46
+ }
47
+
48
+ export interface DocxtemplaterPart {
49
+ value?: string;
50
+ [key: string]: any;
51
+ }
52
+
53
+ export interface DocxtemplaterOptions {
54
+ contentType?: string;
55
+ [key: string]: any;
56
56
  }