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

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 (13) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +56 -28
  3. package/dist/cjs/components/chip.js +1 -1
  4. package/dist/esm/components/chip.js +1 -1
  5. package/guidelines/Guidelines.md +233 -233
  6. package/guidelines/design-tokens/colors.md +81 -81
  7. package/guidelines/design-tokens/spacing.md +45 -45
  8. package/guidelines/design-tokens/typography.md +87 -87
  9. package/guidelines/overview-components.md +252 -252
  10. package/guidelines/overview-icons.md +52 -52
  11. package/host-isolation/webcargo.css +306 -0
  12. package/package.json +104 -102
  13. package/tokens.css +419 -419
package/host-isolation/webcargo.css ADDED
@@ -0,0 +1,306 @@
1
+ /* @freightos/freightwind/host-isolation/webcargo.css ─────────────────────────
2
+ *
3
+ * Cancellation sheet for the WebCargo host's global CSS bleed into FreightWind
4
+ * components. Opt-in: import this only when mounting FreightWind inside the
5
+ * WebCargo shell. Clean hosts (e.g. freightwind-playground, partner apps with
6
+ * no Bootstrap layer) should NOT import this file.
7
+ *
8
+ * Why this exists
9
+ * ───────────────
10
+ * WebCargo loads `bootstrap.min.css`, `bootstrap_wcn.css`, and a ~3,000-rule
11
+ * `apps.php` stylesheet that target bare element names (`h1-h6`, `p`,
12
+ * `button`, `input`, `a`, `*`, …) with specificity 0-0-1. FreightWind 2.x
13
+ * intentionally skips Tailwind's global Preflight (it uses the per-element
14
+ * `@utility fw-base` reset). The side-effect is that host element-level
15
+ * rules bleed INTO FreightWind subtrees — heading margins, paragraph
16
+ * margins, button border-radius, focus rings, list bullets, table borders.
17
+ *
18
+ * Strategy
19
+ * ────────
20
+ * Scope a Tailwind-equivalent Preflight to three roots — wrapped in
21
+ * `:where()` so the scope contributes ZERO specificity:
22
+ *
23
+ * · `.fw-root` — the wrapper consumers put
24
+ * on their App container.
25
+ * · `[data-radix-popper-content-wrapper]` — every Radix Popover /
26
+ * Tooltip / DropdownMenu /
27
+ * Select content wrapper.
28
+ * Radix portals these to
29
+ * `<body>`, outside `.fw-root`,
30
+ * so a scope-only rule would
31
+ * miss them.
32
+ * · `[role="dialog"][data-state]` — Radix Dialog content (also
33
+ * portaled to `<body>`).
34
+ *
35
+ * Each rule ties with Bootstrap's bare element selectors (0-0-1) and wins
36
+ * by source order (this file loads after the host). FDS class-anchored
37
+ * selectors (`.ant-btn`, etc.) and FreightWind utility classes (loaded via
38
+ * `@layer utilities important`) keep their full specificity advantage and
39
+ * are never affected by this reset.
40
+ *
41
+ * Usage
42
+ * ─────
43
+ * import '@freightos/freightwind/tokens.css';
44
+ * import '@freightos/freightwind/host-isolation/webcargo.css';
45
+ *
46
+ * <div className="fw-root">
47
+ * <App />
48
+ * </div>
49
+ *
50
+ * Pattern is identical to Tailwind v4's official Preflight, plus a `:focus`
51
+ * cancellation keyed on FW's `.fw-base` per-element marker so the rule also
52
+ * covers FreightWind components rendered inside Radix portals (Dialog,
53
+ * Popover, Tooltip, DropdownMenu, Select) that mount outside `.fw-root`.
54
+ * ──────────────────────────────────────────────────────────────────────── */
55
+
56
+ /* 1 ── Universal box model & border reset ─────────────────────────────────── */
57
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) *,
58
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) *::before,
59
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) *::after {
60
+ box-sizing: border-box;
61
+ border-width: 0;
62
+ border-style: solid;
63
+ border-color: currentColor;
64
+ }
65
+
66
+ /* 2 ── Block-level margins ───────────────────────────────────────────────────
67
+ Bootstrap adds margin-bottom to h1–h6, p, pre, blockquote, dl, dd, figure. */
68
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) blockquote,
69
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) dl,
70
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) dd,
71
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) h1,
72
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) h2,
73
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) h3,
74
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) h4,
75
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) h5,
76
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) h6,
77
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) hr,
78
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) figure,
79
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) p,
80
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) pre,
81
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) fieldset {
82
+ margin: 0;
83
+ padding: 0;
84
+ }
85
+
86
+ /* 3 ── Headings — strip Bootstrap font-size/weight/line-height overrides ────
87
+ Bootstrap 4 sets h1=2.5rem, h2=2rem … h6=1rem, all with font-weight:500.
88
+ FreightWind components set their own heading styles via Tailwind utilities. */
89
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) h1,
90
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) h2,
91
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) h3,
92
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) h4,
93
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) h5,
94
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) h6 {
95
+ font-size: inherit;
96
+ font-weight: inherit;
97
+ line-height: inherit;
98
+ }
99
+
100
+ /* 4 ── Lists ─────────────────────────────────────────────────────────────────
101
+ Bootstrap adds margin-bottom:1rem to ol/ul and sets list-style-type. */
102
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) ol,
103
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) ul,
104
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) menu {
105
+ list-style: none;
106
+ margin: 0;
107
+ padding: 0;
108
+ }
109
+
110
+ /* 5 ── Links — strip Bootstrap link color (#337ab7) and underline rules ───── */
111
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) a {
112
+ color: inherit;
113
+ text-decoration: inherit;
114
+ }
115
+
116
+ /* 6 ── LABEL — Bootstrap sets `display:inline-block; margin-bottom:.5rem` ────
117
+ Resetting to `display:block; margin:0` restores the FreightWind layout.
118
+ FDS / Ant labels carry their own class (.ant-form-item-label, 0-1-0) and
119
+ beat this reset, so they keep their styling. */
120
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) label {
121
+ display: block;
122
+ margin: 0;
123
+ font-weight: inherit;
124
+ font-size: inherit;
125
+ }
126
+
127
+ /* 7 ── Form controls ─────────────────────────────────────────────────────────
128
+ Bootstrap and browsers set font, margin, and padding on inputs/buttons that
129
+ differ from the page font. Inherit from the FW root instead. */
130
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) button,
131
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) input,
132
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) optgroup,
133
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) select,
134
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) textarea {
135
+ font-family: inherit;
136
+ font-feature-settings: inherit;
137
+ font-variation-settings: inherit;
138
+ font-size: 100%;
139
+ font-weight: inherit;
140
+ line-height: inherit;
141
+ letter-spacing: inherit;
142
+ color: inherit;
143
+ margin: 0;
144
+ padding: 0;
145
+ }
146
+
147
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) button,
148
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) select {
149
+ text-transform: none;
150
+ }
151
+
152
+ /* Bootstrap 4 adds background gradients and border-radius to buttons. */
153
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) button,
154
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) input:where([type='button']),
155
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) input:where([type='reset']),
156
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) input:where([type='submit']) {
157
+ -webkit-appearance: button;
158
+ background-color: transparent;
159
+ background-image: none;
160
+ }
161
+
162
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) :-moz-focusring {
163
+ outline: auto;
164
+ }
165
+
166
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) :-moz-ui-invalid {
167
+ box-shadow: none;
168
+ }
169
+
170
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) progress {
171
+ vertical-align: baseline;
172
+ }
173
+
174
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) ::-webkit-inner-spin-button,
175
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) ::-webkit-outer-spin-button {
176
+ height: auto;
177
+ }
178
+
179
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) [type='search'] {
180
+ -webkit-appearance: textfield;
181
+ outline-offset: -2px;
182
+ }
183
+
184
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) ::-webkit-search-decoration {
185
+ -webkit-appearance: none;
186
+ }
187
+
188
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) ::-webkit-file-upload-button {
189
+ -webkit-appearance: button;
190
+ font: inherit;
191
+ }
192
+
193
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) summary {
194
+ display: list-item;
195
+ }
196
+
197
+ /* 8 ── Tables ────────────────────────────────────────────────────────────────
198
+ Bootstrap adds border-spacing and td borders; collapse restores clean table. */
199
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) table {
200
+ text-indent: 0;
201
+ border-color: inherit;
202
+ border-collapse: collapse;
203
+ }
204
+
205
+ /* 9 ── Typography ──────────────────────────────────────────────────────────── */
206
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) b,
207
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) strong {
208
+ font-weight: bolder;
209
+ }
210
+
211
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) code,
212
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) kbd,
213
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) samp,
214
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) pre {
215
+ font-size: 1em;
216
+ }
217
+
218
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) small {
219
+ font-size: 80%;
220
+ }
221
+
222
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) sub,
223
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) sup {
224
+ font-size: 75%;
225
+ line-height: 0;
226
+ position: relative;
227
+ vertical-align: baseline;
228
+ }
229
+
230
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) sub { bottom: -0.25em; }
231
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) sup { top: -0.5em; }
232
+
233
+ /* 10 ── Media ────────────────────────────────────────────────────────────────
234
+ Bootstrap sets `svg { overflow:hidden; vertical-align:middle }` which is
235
+ inline, leaving white-space gaps. Tailwind preflight uses display:block. */
236
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) img,
237
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) svg,
238
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) video,
239
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) canvas,
240
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) audio,
241
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) iframe,
242
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) embed,
243
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) object {
244
+ display: block;
245
+ vertical-align: middle;
246
+ }
247
+
248
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) img,
249
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) video {
250
+ max-width: 100%;
251
+ height: auto;
252
+ }
253
+
254
+ /* 11 ── Misc ──────────────────────────────────────────────────────────────── */
255
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) textarea {
256
+ resize: vertical;
257
+ }
258
+
259
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) input::placeholder,
260
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) textarea::placeholder {
261
+ opacity: 1;
262
+ color: #9ca3af;
263
+ }
264
+
265
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) button,
266
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) [role='button'] {
267
+ cursor: pointer;
268
+ }
269
+
270
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) :disabled {
271
+ cursor: default;
272
+ }
273
+
274
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) [hidden]:not([hidden='until-found']) {
275
+ display: none;
276
+ }
277
+
278
+ /* 12 ── Cancel host `:focus` bleed-through ──────────────────────────────────
279
+ Bootstrap sets `button:focus { outline: 5px auto -webkit-focus-ring-color }`
280
+ and `.btn:focus { box-shadow: 0 0 0 .2rem rgba(0,123,255,.25) }`. Both
281
+ target generic focusable elements and beat FreightWind utilities that
282
+ don't explicitly counter the property.
283
+
284
+ We *cancel* the host bleed without imposing a replacement ring — that
285
+ would hardcode an outline style at the isolation layer and drift from
286
+ FreightWind's own focus tokens whenever FW evolves. Two clean outcomes:
287
+
288
+ 1. FW components carry `focus-visible:outline-none focus-visible:ring-*`
289
+ utilities loaded via `@layer utilities important` (so `!important`).
290
+ Those utilities beat this reset and FW components render their own
291
+ ring exactly as the design system specifies. ✓
292
+ 2. Native / non-FW focusables fall back to the browser's UA
293
+ `:focus-visible` default — never visually out-of-sync with FW because
294
+ we never set a competing value. ✓
295
+
296
+ The `.fw-base:focus` arm catches FW components rendered inside Radix
297
+ portals (Dialog, Popover, Tooltip, DropdownMenu, Select) — those mount
298
+ under `<body>` outside `.fw-root`, so a scope-only rule would miss them.
299
+ `.fw-base` travels with every FW-rendered native element. */
300
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) :is(
301
+ button, [role="button"], a, input, select, textarea, [tabindex], summary
302
+ ):focus,
303
+ .fw-base:focus {
304
+ outline: 0;
305
+ box-shadow: none;
306
+ }
package/package.json CHANGED
@@ -1,102 +1,104 @@
1
- {
2
- "name": "@freightos/freightwind",
3
- "version": "2.1.2",
4
- "private": false,
5
- "description": "FreightWind Design System — icons, constants, and utilities for Freightos applications",
6
- "main": "./dist/cjs/index.js",
7
- "module": "./dist/esm/index.js",
8
- "types": "./dist/types/index.d.ts",
9
- "exports": {
10
- ".": {
11
- "types": "./dist/types/index.d.ts",
12
- "import": "./dist/esm/index.js",
13
- "require": "./dist/cjs/index.js"
14
- },
15
- "./icons": {
16
- "types": "./dist/types/icons/index.d.ts",
17
- "import": "./dist/esm/icons/index.js",
18
- "require": "./dist/cjs/icons/index.js"
19
- },
20
- "./constants": {
21
- "types": "./dist/types/constants/index.d.ts",
22
- "import": "./dist/esm/constants/index.js",
23
- "require": "./dist/cjs/constants/index.js"
24
- },
25
- "./tokens.css": "./tokens.css",
26
- "./package.json": "./package.json"
27
- },
28
- "typesVersions": {
29
- "*": {
30
- "icons": [
31
- "./dist/types/icons/index.d.ts"
32
- ],
33
- "constants": [
34
- "./dist/types/constants/index.d.ts"
35
- ]
36
- }
37
- },
38
- "files": [
39
- "dist",
40
- "tokens.css",
41
- "guidelines",
42
- "README.md",
43
- "LICENSE"
44
- ],
45
- "sideEffects": [
46
- "*.css"
47
- ],
48
- "scripts": {
49
- "build": "npm run clean && npm run build:esm && npm run build:cjs && npm run build:types",
50
- "build:esm": "tsc --project tsconfig.esm.json",
51
- "build:cjs": "tsc --project tsconfig.cjs.json",
52
- "build:types": "tsc --project tsconfig.types.json",
53
- "clean": "rm -rf dist",
54
- "sync": "bash scripts/sync.sh",
55
- "fetch-icons": "node scripts/fetch-figma-icons.js",
56
- "generate": "node scripts/generate-icons.js",
57
- "prepublishOnly": "npm run build",
58
- "release:patch": "npm version patch && npm publish --access public && git push --follow-tags",
59
- "release:minor": "npm version minor && npm publish --access public && git push --follow-tags",
60
- "release:major": "npm version major && npm publish --access public && git push --follow-tags",
61
- "publish:dry": "npm publish --dry-run --access public"
62
- },
63
- "keywords": [
64
- "design-system",
65
- "react",
66
- "components",
67
- "icons",
68
- "freightos",
69
- "freightwind",
70
- "ui",
71
- "typescript",
72
- "tailwindcss"
73
- ],
74
- "author": "Jiries Nasrawi <jiries@freightos.com>",
75
- "license": "MIT",
76
- "repository": {
77
- "type": "git",
78
- "url": "https://Jeries_Nasrawi@bitbucket.org/freightos/freightwind.git"
79
- },
80
- "devDependencies": {
81
- "@types/node": "^20.10.0",
82
- "@types/react": "^19",
83
- "@types/react-dom": "^19",
84
- "typescript": "^5.3.3"
85
- },
86
- "peerDependencies": {
87
- "react": ">=18",
88
- "react-dom": ">=18"
89
- },
90
- "peerDependenciesMeta": {
91
- "react": {
92
- "optional": false
93
- },
94
- "react-dom": {
95
- "optional": false
96
- }
97
- },
98
- "dependencies": {
99
- "clsx": "^2.1.1",
100
- "tailwind-merge": "^3.4.0"
101
- }
102
- }
1
+ {
2
+ "name": "@freightos/freightwind",
3
+ "version": "2.1.3-host-isolation.1",
4
+ "private": false,
5
+ "description": "FreightWind Design System — icons, constants, and utilities for Freightos applications",
6
+ "main": "./dist/cjs/index.js",
7
+ "module": "./dist/esm/index.js",
8
+ "types": "./dist/types/index.d.ts",
9
+ "exports": {
10
+ ".": {
11
+ "types": "./dist/types/index.d.ts",
12
+ "import": "./dist/esm/index.js",
13
+ "require": "./dist/cjs/index.js"
14
+ },
15
+ "./icons": {
16
+ "types": "./dist/types/icons/index.d.ts",
17
+ "import": "./dist/esm/icons/index.js",
18
+ "require": "./dist/cjs/icons/index.js"
19
+ },
20
+ "./constants": {
21
+ "types": "./dist/types/constants/index.d.ts",
22
+ "import": "./dist/esm/constants/index.js",
23
+ "require": "./dist/cjs/constants/index.js"
24
+ },
25
+ "./tokens.css": "./tokens.css",
26
+ "./host-isolation/webcargo.css": "./host-isolation/webcargo.css",
27
+ "./package.json": "./package.json"
28
+ },
29
+ "typesVersions": {
30
+ "*": {
31
+ "icons": [
32
+ "./dist/types/icons/index.d.ts"
33
+ ],
34
+ "constants": [
35
+ "./dist/types/constants/index.d.ts"
36
+ ]
37
+ }
38
+ },
39
+ "files": [
40
+ "dist",
41
+ "tokens.css",
42
+ "host-isolation",
43
+ "guidelines",
44
+ "README.md",
45
+ "LICENSE"
46
+ ],
47
+ "sideEffects": [
48
+ "*.css"
49
+ ],
50
+ "scripts": {
51
+ "build": "npm run clean && npm run build:esm && npm run build:cjs && npm run build:types",
52
+ "build:esm": "tsc --project tsconfig.esm.json",
53
+ "build:cjs": "tsc --project tsconfig.cjs.json",
54
+ "build:types": "tsc --project tsconfig.types.json",
55
+ "clean": "rm -rf dist",
56
+ "sync": "bash scripts/sync.sh",
57
+ "fetch-icons": "node scripts/fetch-figma-icons.js",
58
+ "generate": "node scripts/generate-icons.js",
59
+ "prepublishOnly": "npm run build",
60
+ "release:patch": "npm version patch && npm publish --access public && git push --follow-tags",
61
+ "release:minor": "npm version minor && npm publish --access public && git push --follow-tags",
62
+ "release:major": "npm version major && npm publish --access public && git push --follow-tags",
63
+ "publish:dry": "npm publish --dry-run --access public"
64
+ },
65
+ "keywords": [
66
+ "design-system",
67
+ "react",
68
+ "components",
69
+ "icons",
70
+ "freightos",
71
+ "freightwind",
72
+ "ui",
73
+ "typescript",
74
+ "tailwindcss"
75
+ ],
76
+ "author": "Jiries Nasrawi <jiries@freightos.com>",
77
+ "license": "MIT",
78
+ "repository": {
79
+ "type": "git",
80
+ "url": "https://Jeries_Nasrawi@bitbucket.org/freightos/freightwind.git"
81
+ },
82
+ "devDependencies": {
83
+ "@types/node": "^20.10.0",
84
+ "@types/react": "^19",
85
+ "@types/react-dom": "^19",
86
+ "typescript": "^5.3.3"
87
+ },
88
+ "peerDependencies": {
89
+ "react": ">=18",
90
+ "react-dom": ">=18"
91
+ },
92
+ "peerDependenciesMeta": {
93
+ "react": {
94
+ "optional": false
95
+ },
96
+ "react-dom": {
97
+ "optional": false
98
+ }
99
+ },
100
+ "dependencies": {
101
+ "clsx": "^2.1.1",
102
+ "tailwind-merge": "^3.4.0"
103
+ }
104
+ }