@northslopetech/altitude-ui 2.8.2 → 3.0.0-alpha.3

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 (10) hide show
  1. package/README.md +2 -2
  2. package/dist/index.d.mts +194 -116
  3. package/dist/index.d.ts +194 -116
  4. package/dist/index.js +1443 -2140
  5. package/dist/index.mjs +1467 -2181
  6. package/dist/styles.css +1 -0
  7. package/dist/tokens.css +1 -105
  8. package/package.json +17 -7
  9. package/dist/acme-tokens.css +0 -90
  10. package/dist/dnv-tokens.css +0 -103
package/dist/styles.css ADDED
@@ -0,0 +1 @@
1
+ @import "./tokens.css";
package/dist/tokens.css CHANGED
@@ -1,105 +1 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated from TypeScript tokens.
3
- */
4
-
5
- @theme {
6
- --color-base-black: #161616;
7
- --color-base-white: #ffffff;
8
- --color-blue-100: #F0F5FF;
9
- --color-blue-200: #D6E4FF;
10
- --color-blue-300: #ADCCFF;
11
- --color-blue-400: #618EFF;
12
- --color-blue-500: #2E69FF;
13
- --color-blue-600: #004DCC;
14
- --color-blue-700: #003A99;
15
- --color-blue-800: #002461;
16
- --color-blue-900: #00173D;
17
- --color-chart-color-palette-categorical-1: #2E69FF;
18
- --color-chart-color-palette-categorical-2: #0C7953;
19
- --color-chart-color-palette-categorical-3: #C62828;
20
- --color-chart-color-palette-categorical-4: #EAB308;
21
- --color-chart-color-palette-categorical-5: #909090;
22
- --color-chart-color-palette-heatmap-1: #FFFBEB;
23
- --color-chart-color-palette-heatmap-2: #FDE68A;
24
- --color-chart-color-palette-heatmap-3: #EAB308;
25
- --color-chart-color-palette-heatmap-4: #A16207;
26
- --color-chart-color-palette-heatmap-5: #451A03;
27
- --color-chart-color-palette-performance-1: #0C7953;
28
- --color-chart-color-palette-performance-2: #63D0AA;
29
- --color-chart-color-palette-performance-3: #EAB308;
30
- --color-chart-color-palette-performance-4: #E58080;
31
- --color-chart-color-palette-performance-5: #C62828;
32
- --color-dark: #282828;
33
- --color-error-subtle: #FCF2F2;
34
- --color-error: #C62828;
35
- --color-gray: #F5F5F5;
36
- --color-green-100: #EBF9F4;
37
- --color-green-200: #B8EAD9;
38
- --color-green-300: #63D0AA;
39
- --color-green-400: #11A772;
40
- --color-green-500: #0C7953;
41
- --color-green-600: #095D3E;
42
- --color-green-700: #07462F;
43
- --color-green-800: #053826;
44
- --color-green-900: #042F20;
45
- --color-info-subtle: #F0F5FF;
46
- --color-info: #004DCC;
47
- --color-interactive: #2E69FF;
48
- --color-light: #FFFFFF;
49
- --color-neutral-100: #FFFFFF;
50
- --color-neutral-200: #F5F5F5;
51
- --color-neutral-300: #DEDEDE;
52
- --color-neutral-400: #B5B5B5;
53
- --color-neutral-500: #909090;
54
- --color-neutral-600: #666666;
55
- --color-neutral-700: #4A4A4A;
56
- --color-neutral-800: #282828;
57
- --color-neutral-900: #161616;
58
- --color-primary: #2E69FF;
59
- --color-red-100: #FCF2F2;
60
- --color-red-200: #F4C8C8;
61
- --color-red-300: #E58080;
62
- --color-red-400: #DC5151;
63
- --color-red-500: #C62828;
64
- --color-red-600: #AA2222;
65
- --color-red-700: #881B1B;
66
- --color-red-800: #5E1313;
67
- --color-red-900: #400D0D;
68
- --color-secondary: #666666;
69
- --color-strong: #161616;
70
- --color-subtle: #DEDEDE;
71
- --color-success-subtle: #EBF9F4;
72
- --color-success: #0C7953;
73
- --color-warning-subtle: #FFFBEB;
74
- --color-warning: #A16207;
75
- --color-yellow-100: #FFFBEB;
76
- --color-yellow-200: #FEF3C7;
77
- --color-yellow-300: #FDE68A;
78
- --color-yellow-400: #FACC15;
79
- --color-yellow-500: #EAB308;
80
- --color-yellow-600: #CA8A04;
81
- --color-yellow-700: #A16207;
82
- --color-yellow-800: #78450A;
83
- --color-yellow-900: #451A03;
84
- --typography-body-lg: 400 18px/27px Inter;
85
- --typography-body-md: 400 16px/24px Inter;
86
- --typography-body-sm: 400 14px/21px Inter;
87
- --typography-body-xl: 400 20px/30px Inter;
88
- --typography-body-xs: 400 12px/18px Inter;
89
- --typography-display-lg: 400 94px/112.8px Inter;
90
- --typography-display-md: 400 66px/79.2px Inter;
91
- --typography-display-sm: 400 52px/62.4px Inter;
92
- --typography-display-xl: 400 105px/126px Inter;
93
- --typography-heading-lg: 600 32px/38.4px Inter;
94
- --typography-heading-md: 600 26px/31.2px Inter;
95
- --typography-heading-sm: 600 20px/24px Inter;
96
- --typography-heading-xl: 500 46px/55.2px Inter;
97
- --typography-label-lg-bold: 600 18px/18px Inter;
98
- --typography-label-lg-regular: 400 18px/18px Inter;
99
- --typography-label-md-bold: 600 16px/16px Inter;
100
- --typography-label-md-regular: 400 16px/16px Inter;
101
- --typography-label-sm-bold: 600 14px/14px Inter;
102
- --typography-label-sm-regular: 400 14px/14px Inter;
103
- --typography-label-xs-bold: 600 12px/12px Inter;
104
- --typography-label-xs-regular: 400 12px/12px Inter;
105
- }
1
+ @import "@northslopetech/altitude-tokens/tokens.css";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@northslopetech/altitude-ui",
3
- "version": "2.8.2",
3
+ "version": "3.0.0-alpha.3",
4
4
  "private": false,
5
5
  "description": "React UI components for the Altitude design system",
6
6
  "author": "Northslope",
@@ -27,6 +27,7 @@
27
27
  "require": "./dist/index.js"
28
28
  },
29
29
  "./tokens.css": "./dist/tokens.css",
30
+ "./styles.css": "./dist/styles.css",
30
31
  "./tailwind": "./tailwind.preset.js",
31
32
  "./pdf.worker.min.mjs": "./dist/pdf.worker.min.mjs",
32
33
  "./*": {
@@ -43,16 +44,22 @@
43
44
  "access": "public"
44
45
  },
45
46
  "devDependencies": {
47
+ "@phosphor-icons/react": "^2.1.10",
48
+ "@testing-library/jest-dom": "^6.6.3",
49
+ "@testing-library/react": "^16.3.0",
46
50
  "@types/node": "^22.15.3",
47
51
  "@types/prop-types": "^15.7.15",
48
52
  "@types/react": "19.1.0",
49
53
  "@types/react-dom": "19.1.1",
50
54
  "@types/react-pdf": "^7.0.0",
55
+ "@vitest/coverage-v8": "^3.2.4",
51
56
  "eslint": "^9.31.0",
57
+ "jsdom": "^26.0.0",
52
58
  "tailwindcss": "^4.1.11",
53
59
  "tsup": "^8.0.0",
54
60
  "typescript": "5.8.2",
55
- "@northslopetech/altitude-tokens": "1.0.0",
61
+ "vitest": "^3.2.4",
62
+ "@northslopetech/altitude-tokens": "3.0.0-alpha.3",
56
63
  "@repo/eslint-config": "0.0.0",
57
64
  "@repo/typescript-config": "0.0.0"
58
65
  },
@@ -63,7 +70,6 @@
63
70
  "@radix-ui/react-label": "^2.1.7",
64
71
  "@radix-ui/react-popover": "^1.1.15",
65
72
  "@radix-ui/react-select": "^2.2.6",
66
- "@radix-ui/react-separator": "^1.1.8",
67
73
  "@radix-ui/react-tooltip": "^1.1.7",
68
74
  "@tanstack/react-table": "^8.21.3",
69
75
  "class-variance-authority": "^0.7.1",
@@ -74,16 +80,20 @@
74
80
  "tailwind-merge": "^2.5.4"
75
81
  },
76
82
  "peerDependencies": {
83
+ "@phosphor-icons/react": "^2.0.0",
77
84
  "react": "^18.0.0 || ^19.0.0",
78
85
  "react-dom": "^18.0.0 || ^19.0.0"
79
86
  },
80
87
  "scripts": {
81
- "prebuild": "cd ../altitude-tokens && npm run build",
82
- "build": "tsup src/index.ts --format cjs,esm --dts --external react --external react-dom && cp ../altitude-tokens/dist/*.css dist/ && cp ../../node_modules/.pnpm/pdfjs-dist@*/node_modules/pdfjs-dist/build/pdf.worker.min.mjs dist/",
83
- "dev": "tsup src/index.ts --format cjs,esm --dts --watch --external react --external react-dom --external altitude-tokens",
88
+ "prebuild": "pnpm --filter @northslopetech/altitude-tokens build",
89
+ "build": "tsup src/index.ts --format cjs,esm --dts --external react --external react-dom --external @phosphor-icons/react && cp src/tokens.css src/styles.css dist/ && cp ../../node_modules/.pnpm/pdfjs-dist@*/node_modules/pdfjs-dist/build/pdf.worker.min.mjs dist/",
90
+ "dev": "tsup src/index.ts --format cjs,esm --dts --watch --external react --external react-dom --external altitude-tokens --external @phosphor-icons/react",
84
91
  "clean": "rm -rf dist",
85
92
  "lint": "eslint . --max-warnings 0",
86
93
  "generate:component": "turbo gen react-component",
87
- "check-types": "tsc --noEmit"
94
+ "check-types": "tsc --noEmit",
95
+ "test": "vitest run",
96
+ "test:watch": "vitest",
97
+ "test:coverage": "vitest run --coverage"
88
98
  }
89
99
  }
package/dist/acme-tokens.css DELETED
@@ -1,90 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated from TypeScript tokens.
3
- */
4
-
5
- @theme {
6
- --color-base-black: #000000;
7
- --color-base-white: #ffffff;
8
- --color-blue-100: #E3F2FD;
9
- --color-blue-200: #BBDEFB;
10
- --color-blue-300: #90CAF9;
11
- --color-blue-400: #64B5F6;
12
- --color-blue-500: #2196F3;
13
- --color-blue-600: #1E88E5;
14
- --color-blue-700: #1976D2;
15
- --color-blue-800: #1565C0;
16
- --color-blue-900: #0D47A1;
17
- --color-dark: #000000;
18
- --color-error-subtle: #FFEBEE;
19
- --color-error: #F44336;
20
- --color-gray: #F0F0F0;
21
- --color-green-100: #E8F5E8;
22
- --color-green-200: #C8E6C9;
23
- --color-green-300: #A5D6A7;
24
- --color-green-400: #81C784;
25
- --color-green-500: #4CAF50;
26
- --color-green-600: #43A047;
27
- --color-green-700: #388E3C;
28
- --color-green-800: #2E7D32;
29
- --color-green-900: #1B5E20;
30
- --color-info-subtle: #E3F2FD;
31
- --color-info: #1E88E5;
32
- --color-interactive: #2196F3;
33
- --color-light: #FFFFFF;
34
- --color-neutral-100: #FFFFFF;
35
- --color-neutral-200: #F0F0F0;
36
- --color-neutral-300: #E0E0E0;
37
- --color-neutral-400: #B0B0B0;
38
- --color-neutral-500: #808080;
39
- --color-neutral-600: #606060;
40
- --color-neutral-700: #404040;
41
- --color-neutral-800: #202020;
42
- --color-neutral-900: #000000;
43
- --color-primary: #2196F3;
44
- --color-red-100: #FFEBEE;
45
- --color-red-200: #FFCDD2;
46
- --color-red-300: #EF9A9A;
47
- --color-red-400: #E57373;
48
- --color-red-500: #F44336;
49
- --color-red-600: #E53935;
50
- --color-red-700: #D32F2F;
51
- --color-red-800: #C62828;
52
- --color-red-900: #B71C1C;
53
- --color-secondary: #606060;
54
- --color-strong: #000000;
55
- --color-subtle: #E0E0E0;
56
- --color-success-subtle: #E8F5E8;
57
- --color-success: #4CAF50;
58
- --color-warning-subtle: #FFFDE7;
59
- --color-warning: #FBC02D;
60
- --color-yellow-100: #FFFDE7;
61
- --color-yellow-200: #FFF9C4;
62
- --color-yellow-300: #FFF59D;
63
- --color-yellow-400: #FFF176;
64
- --color-yellow-500: #FFEB3B;
65
- --color-yellow-600: #FDD835;
66
- --color-yellow-700: #FBC02D;
67
- --color-yellow-800: #F9A825;
68
- --color-yellow-900: #F57F17;
69
- --typography-body-lg: 400 18px/27px Inter;
70
- --typography-body-md: 400 16px/24px Inter;
71
- --typography-body-sm: 400 14px/21px Inter;
72
- --typography-body-xl: 400 20px/30px Inter;
73
- --typography-body-xs: 400 12px/18px Inter;
74
- --typography-display-lg: 400 94px/112.8px Inter;
75
- --typography-display-md: 400 66px/79.2px Inter;
76
- --typography-display-sm: 400 52px/62.4px Inter;
77
- --typography-display-xl: 400 105px/126px Inter;
78
- --typography-heading-lg: 600 32px/38.4px Inter;
79
- --typography-heading-md: 600 26px/31.2px Inter;
80
- --typography-heading-sm: 600 20px/24px Inter;
81
- --typography-heading-xl: 500 46px/55.2px Inter;
82
- --typography-label-lg-bold: 600 18px/18px Inter;
83
- --typography-label-lg-regular: 400 18px/18px Inter;
84
- --typography-label-md-bold: 600 16px/16px Inter;
85
- --typography-label-md-regular: 400 16px/16px Inter;
86
- --typography-label-sm-bold: 600 14px/14px Inter;
87
- --typography-label-sm-regular: 400 14px/14px Inter;
88
- --typography-label-xs-bold: 600 12px/12px Inter;
89
- --typography-label-xs-regular: 400 12px/12px Inter;
90
- }
package/dist/dnv-tokens.css DELETED
@@ -1,103 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated from TypeScript tokens.
3
- */
4
-
5
- @theme {
6
- --color-base-black: #1a1a19;
7
- --color-base-white: #ffffff;
8
- --color-blue-100: #f2fafd;
9
- --color-blue-200: #e9f7fc;
10
- --color-blue-300: #99d9f0;
11
- --color-blue-400: #009fda;
12
- --color-blue-500: #009fda;
13
- --color-blue-600: #2b6173;
14
- --color-blue-700: #2b6173;
15
- --color-blue-800: #0f204b;
16
- --color-blue-900: #0f204b;
17
- --color-chart-color-palette-categorical-10: #a1aae6;
18
- --color-chart-color-palette-categorical-11: #cccbc9;
19
- --color-chart-color-palette-categorical-12: #988f86;
20
- --color-chart-color-palette-categorical-1: #009fda;
21
- --color-chart-color-palette-categorical-2: #15c2bb;
22
- --color-chart-color-palette-categorical-3: #b56700;
23
- --color-chart-color-palette-categorical-4: #2b6173;
24
- --color-chart-color-palette-categorical-5: #0f204b;
25
- --color-chart-color-palette-categorical-6: #99d9f0;
26
- --color-chart-color-palette-categorical-7: #3f9c35;
27
- --color-chart-color-palette-categorical-8: #eb2a34;
28
- --color-chart-color-palette-categorical-9: #fff377;
29
- --color-dark: #0f204b;
30
- --color-error-subtle: #f2e6d5;
31
- --color-error: #eb2a34;
32
- --color-gray: #f3f2f2;
33
- --color-green-100: #f9f3eb;
34
- --color-green-200: #f9f3eb;
35
- --color-green-300: #3f9c35;
36
- --color-green-400: #3f9c35;
37
- --color-green-500: #3f9c35;
38
- --color-green-600: #3f9c35;
39
- --color-green-700: #3f9c35;
40
- --color-green-800: #3f9c35;
41
- --color-green-900: #3f9c35;
42
- --color-info-subtle: #f2fafd;
43
- --color-info: #009fda;
44
- --color-interactive: #009fda;
45
- --color-light: #f8f7f7;
46
- --color-neutral-100: #f8f7f7;
47
- --color-neutral-200: #f3f2f2;
48
- --color-neutral-300: #cccbc9;
49
- --color-neutral-400: #988f86;
50
- --color-neutral-500: #4f4d4a;
51
- --color-neutral-600: #1a1a19;
52
- --color-neutral-700: #1a1a19;
53
- --color-neutral-800: #1a1a19;
54
- --color-neutral-900: #0f204b;
55
- --color-primary: #009fda;
56
- --color-red-100: #f2e6d5;
57
- --color-red-200: #f2e6d5;
58
- --color-red-300: #eb2a34;
59
- --color-red-400: #eb2a34;
60
- --color-red-500: #eb2a34;
61
- --color-red-600: #eb2a34;
62
- --color-red-700: #eb2a34;
63
- --color-red-800: #eb2a34;
64
- --color-red-900: #eb2a34;
65
- --color-secondary: #4f4d4a;
66
- --color-strong: #0f204b;
67
- --color-subtle: #cccbc9;
68
- --color-success-subtle: #f9f3eb;
69
- --color-success: #3f9c35;
70
- --color-warning-subtle: #fbf8f3;
71
- --color-warning: #b56700;
72
- --color-yellow-100: #fbf8f3;
73
- --color-yellow-200: #fbf8f3;
74
- --color-yellow-300: #fff377;
75
- --color-yellow-400: #fff377;
76
- --color-yellow-500: #b56700;
77
- --color-yellow-600: #b56700;
78
- --color-yellow-700: #b56700;
79
- --color-yellow-800: #b56700;
80
- --color-yellow-900: #b56700;
81
- --typography-body-lg: 400 18px/27px Gantari;
82
- --typography-body-md: 400 16px/24px Gantari;
83
- --typography-body-sm: 400 14px/21px Gantari;
84
- --typography-body-xl: 400 20px/30px Gantari;
85
- --typography-body-xs: 400 12px/18px Gantari;
86
- --typography-display-lg: 400 94px/112.8px Gantari;
87
- --typography-display-md: 400 66px/79.2px Gantari;
88
- --typography-display-sm: 400 52px/62.4px Gantari;
89
- --typography-display-xl: 400 105px/126px Gantari;
90
- --typography-heading-lg: 600 24px/32px Gantari;
91
- --typography-heading-md: 600 18px/24px Gantari;
92
- --typography-heading-sm: 600 16px/24px Gantari;
93
- --typography-heading-xl: 600 32px/40px Gantari;
94
- --typography-heading-xs: 600 14px/21px Gantari;
95
- --typography-label-lg-bold: 600 18px/27px Gantari;
96
- --typography-label-lg-regular: 400 18px/27px Gantari;
97
- --typography-label-md-bold: 600 16px/24px Gantari;
98
- --typography-label-md-regular: 500 16px/24px Gantari;
99
- --typography-label-sm-bold: 600 14px/21px Gantari;
100
- --typography-label-sm-regular: 400 14px/21px Gantari;
101
- --typography-label-xs-bold: 600 12px/18px Gantari;
102
- --typography-label-xs-regular: 400 12px/18px Gantari;
103
- }