@ivao/atmosphere-react 0.0.1-next.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 (7) hide show
  1. package/README.md +21 -0
  2. package/dist/atmosphere-react.js +20015 -0
  3. package/dist/atmosphere-react.js.map +1 -0
  4. package/dist/react-components.d.ts +1191 -0
  5. package/package.json +128 -0
  6. package/src/styles/colors.css +98 -0
  7. package/src/styles/index.css +67 -0
package/package.json ADDED
@@ -0,0 +1,128 @@
1
+ {
2
+ "name": "@ivao/atmosphere-react",
3
+ "description": "React component library for the IVAO Atmosphere design system.",
4
+ "version": "0.0.1-next.0",
5
+ "type": "module",
6
+ "main": "./dist/atmosphere-react.js",
7
+ "types": "./dist/react-components.d.ts",
8
+ "style": "./src/styles/index.css",
9
+ "files": [
10
+ "dist",
11
+ "src/styles/colors.css",
12
+ "src/styles/index.css"
13
+ ],
14
+ "repository": {
15
+ "type": "git",
16
+ "url": "https://github.com/ivaoaero/atmosphere.git"
17
+ },
18
+ "author": {
19
+ "name": "IVAO",
20
+ "url": "https://ivao.aero"
21
+ },
22
+ "contributors": [
23
+ {
24
+ "name": "Jonas Bellmann (533870)",
25
+ "email": "jonas.bellmann@ivao.aero",
26
+ "url": "https://github.com/CptnJon"
27
+ },
28
+ {
29
+ "name": "Ruy Monteiro (595866)",
30
+ "email": "ruy.monteiro@ivao.aero"
31
+ }
32
+ ],
33
+ "maintainers": [
34
+ {
35
+ "name": "Jonas Bellmann (533870)",
36
+ "email": "jonas.bellmann@ivao.aero",
37
+ "url": "https://github.com/CptnJon"
38
+ }
39
+ ],
40
+ "dependencies": {
41
+ "@radix-ui/react-accordion": "1.2.3",
42
+ "@radix-ui/react-alert-dialog": "1.1.6",
43
+ "@radix-ui/react-checkbox": "1.1.4",
44
+ "@radix-ui/react-collapsible": "1.1.3",
45
+ "@radix-ui/react-dialog": "1.1.6",
46
+ "@radix-ui/react-dropdown-menu": "2.1.6",
47
+ "@radix-ui/react-hover-card": "1.1.6",
48
+ "@radix-ui/react-label": "2.1.2",
49
+ "@radix-ui/react-navigation-menu": "1.2.5",
50
+ "@radix-ui/react-popover": "1.1.6",
51
+ "@radix-ui/react-progress": "1.1.2",
52
+ "@radix-ui/react-radio-group": "1.2.3",
53
+ "@radix-ui/react-scroll-area": "1.2.3",
54
+ "@radix-ui/react-select": "2.1.6",
55
+ "@radix-ui/react-separator": "1.1.2",
56
+ "@radix-ui/react-slider": "1.2.3",
57
+ "@radix-ui/react-switch": "1.1.3",
58
+ "@radix-ui/react-tabs": "1.1.3",
59
+ "@radix-ui/react-toast": "1.2.6",
60
+ "@radix-ui/react-toggle": "1.1.2",
61
+ "@radix-ui/react-toggle-group": "1.1.2",
62
+ "@radix-ui/react-tooltip": "1.1.8",
63
+ "@tanstack/react-table": "8.21.2",
64
+ "class-variance-authority": "0.7.1",
65
+ "clsx": "2.1.1",
66
+ "cmdk": "1.1.1",
67
+ "date-fns": "3.6.0",
68
+ "embla-carousel-react": "8.5.2",
69
+ "lucide-react": "0.483.0",
70
+ "react-day-picker": "8.10.1",
71
+ "tailwind-merge": "2.6.0",
72
+ "tailwindcss-animate": "1.0.7",
73
+ "@ivao/atmosphere-brand": "0.0.1-next.0"
74
+ },
75
+ "devDependencies": {
76
+ "@ianvs/prettier-plugin-sort-imports": "4.4.1",
77
+ "@ivao/eslint-config": "1.1.1",
78
+ "@ivao/prettier-config": "1.1.0",
79
+ "@storybook/addon-essentials": "8.6.7",
80
+ "@storybook/addon-interactions": "8.6.7",
81
+ "@storybook/addon-links": "8.6.7",
82
+ "@storybook/addon-mdx-gfm": "8.6.7",
83
+ "@storybook/addon-themes": "8.6.7",
84
+ "@storybook/blocks": "8.6.7",
85
+ "@storybook/builder-vite": "8.6.7",
86
+ "@storybook/manager-api": "8.6.7",
87
+ "@storybook/react": "8.6.7",
88
+ "@storybook/react-vite": "8.6.7",
89
+ "@storybook/test": "8.6.7",
90
+ "@storybook/theming": "8.6.7",
91
+ "@types/node": "22.13.11",
92
+ "@types/react": "18.3.19",
93
+ "@types/react-dom": "18.3.5",
94
+ "@vitejs/plugin-react": "4.3.4",
95
+ "autoprefixer": "10.4.21",
96
+ "eslint": "9.22.0",
97
+ "postcss": "8.5.3",
98
+ "prettier": "3.5.3",
99
+ "prettier-plugin-tailwindcss": "0.6.11",
100
+ "rollup-plugin-analyzer": "4.0.0",
101
+ "storybook": "8.6.7",
102
+ "tailwindcss": "3.4.17",
103
+ "tailwindcss-radix": "3.0.5",
104
+ "ts-node": "10.9.2",
105
+ "typescript": "5.7.3",
106
+ "vite": "5.4.14",
107
+ "vite-plugin-dts": "4.5.3",
108
+ "vite-tsconfig-paths": "5.1.4"
109
+ },
110
+ "peerDependencies": {
111
+ "react": "18.3.1",
112
+ "react-dom": "18.3.1"
113
+ },
114
+ "publishConfig": {
115
+ "access": "public"
116
+ },
117
+ "scripts": {
118
+ "dev": "vite --config vite.build.config.ts",
119
+ "build": "tsc && vite build --config vite.build.config.ts",
120
+ "build:color-css": "node --loader ts-node/esm generate-colors-css.ts",
121
+ "lint": "eslint . --cache --report-unused-disable-directives --max-warnings 0",
122
+ "lint:ci": "eslint . --report-unused-disable-directives --max-warnings 0",
123
+ "lint-fix": "eslint . --cache --fix --report-unused-disable-directives --max-warnings 0",
124
+ "format": "prettier . --write --cache",
125
+ "storybook": "storybook dev -p 6006",
126
+ "build-storybook": "storybook build"
127
+ }
128
+ }
package/src/styles/colors.css ADDED
@@ -0,0 +1,98 @@
1
+ @tailwind base;
2
+
3
+ @layer base {
4
+ :root {
5
+ --atmos-50: 182 197 249; /* #B6C5F9 */
6
+ --atmos-100: 164 182 247; /* #A4B6F7 */
7
+ --atmos-200: 126 152 244; /* #7E98F4 */
8
+ --atmos-300: 88 122 241; /* #587AF1 */
9
+ --atmos-400: 51 92 238; /* #335CEE */
10
+ --atmos-500: 19 66 228; /* #1342E4 */
11
+ --atmos-600: 16 55 191; /* #1037BF */
12
+ --atmos-700: 13 44 153; /* #0D2C99 */
13
+ --atmos-800: 9 29 101; /* #091D65 */
14
+ --atmos-900: 4 14 50; /* #040E32 */
15
+ --atmos: 13 44 153; /* #0D2C99 */
16
+ --ocean-50: 215 221 241; /* #D7DDF1 */
17
+ --ocean-100: 200 208 236; /* #C8D0EC */
18
+ --ocean-200: 170 182 225; /* #AAB6E1 */
19
+ --ocean-300: 140 156 215; /* #8C9CD7 */
20
+ --ocean-400: 109 131 204; /* #6D83CC */
21
+ --ocean-500: 79 105 194; /* #4F69C2 */
22
+ --ocean-600: 60 85 172; /* #3C55AC */
23
+ --ocean-700: 45 64 130; /* #2D4082 */
24
+ --ocean-800: 31 44 89; /* #1F2C59 */
25
+ --ocean-900: 16 23 47; /* #10172F */
26
+ --ocean: 60 85 172; /* #3C55AC */
27
+ --fuselage-50: 249 250 255; /* #f9faff */
28
+ --fuselage-100: 238 239 252; /* #eeeffc */
29
+ --fuselage-150: 224 225 236; /* #e0e1ec */
30
+ --fuselage-200: 210 211 224; /* #d2d3e0 */
31
+ --fuselage-250: 186 187 204; /* #babbcc */
32
+ --fuselage-300: 167 168 187; /* #a7a8bb */
33
+ --fuselage-400: 139 140 169; /* #8b8ca9 */
34
+ --fuselage-450: 116 117 152; /* #747598 */
35
+ --fuselage-500: 96 98 130; /* #606282 */
36
+ --fuselage-550: 79 80 107; /* #4f506b */
37
+ --fuselage-600: 61 63 84; /* #3d3f54 */
38
+ --fuselage-700: 44 45 60; /* #2c2d3c */
39
+ --fuselage-800: 33 33 46; /* #21212e */
40
+ --fuselage-900: 25 26 35; /* #191a23 */
41
+ --fuselage-950: 18 19 27; /* #12131B */
42
+ --semantic-red-50: 251 218 218; /* #FBDADA */
43
+ --semantic-red-100: 249 199 199; /* #F9C7C7 */
44
+ --semantic-red-200: 245 162 162; /* #F5A2A2 */
45
+ --semantic-red-300: 241 126 126; /* #F17E7E */
46
+ --semantic-red-400: 237 89 89; /* #ED5959 */
47
+ --semantic-red-500: 233 52 52; /* #E93434 */
48
+ --semantic-red-600: 207 22 22; /* #CF1616 */
49
+ --semantic-red-700: 156 17 17; /* #9C1111 */
50
+ --semantic-red-800: 105 11 11; /* #690B0B */
51
+ --semantic-red-900: 55 6 6; /* #370606 */
52
+ --semantic-red: 233 52 52; /* #E93434 */
53
+ --semantic-green-50: 188 239 206; /* #BCEFCE */
54
+ --semantic-green-100: 172 236 193; /* #ACECC1 */
55
+ --semantic-green-200: 138 228 169; /* #8AE4A9 */
56
+ --semantic-green-300: 105 220 145; /* #69DC91 */
57
+ --semantic-green-400: 72 213 120; /* #48D578 */
58
+ --semantic-green-500: 46 198 98; /* #2EC662 */
59
+ --semantic-green-600: 35 152 75; /* #23984B */
60
+ --semantic-green-700: 25 107 53; /* #196B35 */
61
+ --semantic-green-800: 14 61 30; /* #0E3D1E */
62
+ --semantic-green-900: 4 16 8; /* #041008 */
63
+ --semantic-green: 46 198 98; /* #2EC662 */
64
+ --semantic-yellow-50: 254 247 223; /* #FEF7DF */
65
+ --semantic-yellow-100: 254 242 203; /* #FEF2CB */
66
+ --semantic-yellow-200: 252 233 163; /* #FCE9A3 */
67
+ --semantic-yellow-300: 251 223 123; /* #FBDF7B */
68
+ --semantic-yellow-400: 250 214 84; /* #FAD654 */
69
+ --semantic-yellow-500: 249 204 44; /* #F9CC2C */
70
+ --semantic-yellow-600: 230 181 7; /* #E6B507 */
71
+ --semantic-yellow-700: 176 138 5; /* #B08A05 */
72
+ --semantic-yellow-800: 121 95 3; /* #795F03 */
73
+ --semantic-yellow-900: 67 52 2; /* #433402 */
74
+ --semantic-yellow: 249 204 44; /* #F9CC2C */
75
+ --semantic-blue-50: 250 251 253; /* #FAFBFD */
76
+ --semantic-blue-100: 237 242 250; /* #EDF2FA */
77
+ --semantic-blue-200: 219 229 244; /* #DBE5F4 */
78
+ --semantic-blue-300: 188 207 234; /* #BCCFEA */
79
+ --semantic-blue-400: 157 184 224; /* #9DB8E0 */
80
+ --semantic-blue-500: 126 162 214; /* #7EA2D6 */
81
+ --semantic-blue-600: 83 131 200; /* #5383C8 */
82
+ --semantic-blue-700: 55 103 173; /* #3767AD */
83
+ --semantic-blue-800: 41 78 130; /* #294E82 */
84
+ --semantic-blue-900: 28 52 88; /* #1C3458 */
85
+ --semantic-blue: 126 162 214; /* #7EA2D6 */
86
+ --product-creators: 139 92 246; /* #8b5cf6 */
87
+ --product-aurora-light: 75 127 126; /* #4b7f7e */
88
+ --product-aurora-mid: 49 91 90; /* #315b5a */
89
+ --product-aurora-dark: 8 38 40; /* #082628 */
90
+ --product-altitude-light: 98 123 160; /* #627ba0 */
91
+ --product-altitude-mid: 1 16 35; /* #011023 */
92
+ --product-altitude-dark: 0 3 7; /* #000307 */
93
+ --product-artifice-light: 234 152 78; /* #ea984e */
94
+ --product-artifice-mid: 229 128 46; /* #e5802e */
95
+ --product-artifice-dark: 226 110 23; /* #e26e17 */
96
+ --product-artifice-low: 168 103 0; /* #a86700 */
97
+ }
98
+ }
package/src/styles/index.css ADDED
@@ -0,0 +1,67 @@
1
+ @tailwind base;
2
+ @tailwind components;
3
+ @tailwind utilities;
4
+
5
+ @layer base {
6
+ :root {
7
+ --background: var(--fuselage-50);
8
+ --foreground: var(--fuselage-800);
9
+
10
+ --card: var(--fuselage-50);
11
+ --card-foreground: var(--fuselage-800);
12
+
13
+ --popover: var(--fuselage-50);
14
+ --popover-foreground: var(--fuselage-800);
15
+
16
+ --primary: var(--atmos-500);
17
+ --primary-foreground: var(--atmos-100);
18
+
19
+ --secondary: var(--fuselage-100);
20
+ --secondary-foreground: var(--fuselage-800);
21
+
22
+ --muted: var(--fuselage-250);
23
+ --muted-foreground: var(--fuselage-500);
24
+
25
+ --accent: var(--fuselage-250);
26
+ --accent-foreground: var(--fuselage-500);
27
+
28
+ --destructive: var(--semantic-red-500);
29
+ --destructive-foreground: var(--semantic-red-50);
30
+
31
+ --border: var(--fuselage-150);
32
+ --input: var(--fuselage-150);
33
+ --ring: var(--fuselage-200);
34
+
35
+ --radius: 0.6rem;
36
+ }
37
+
38
+ .dark {
39
+ --background: var(--fuselage-950);
40
+ --foreground: var(--fuselage-100);
41
+
42
+ --card: var(--fuselage-950);
43
+ --card-foreground: var(--fuselage-200);
44
+
45
+ --popover: var(--fuselage-950);
46
+ --popover-foreground: var(--fuselage-200);
47
+
48
+ --primary: var(--fuselage-50);
49
+ --primary-foreground: var(--fuselage-800);
50
+
51
+ --secondary: var(--fuselage-800);
52
+ --secondary-foreground: var(--fuselage-100);
53
+
54
+ --muted: var(--fuselage-900);
55
+ --muted-foreground: var(--fuselage-500);
56
+
57
+ --accent: var(--fuselage-800);
58
+ --accent-foreground: var(--fuselage-300);
59
+
60
+ --destructive: var(--semantic-red-600);
61
+ --destructive-foreground: var(--semantic-red-50);
62
+
63
+ --border: var(--fuselage-900);
64
+ --input: var(--fuselage-900);
65
+ --ring: var(--fuselage-800);
66
+ }
67
+ }