auxalia-ui-kit 1.0.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.
- package/README.md +456 -0
- package/dist/chunk-O6RHMFJG.js +165 -0
- package/dist/index.cjs +7201 -0
- package/dist/index.d.cts +365 -0
- package/dist/index.d.ts +365 -0
- package/dist/index.js +6968 -0
- package/dist/styles.css +24 -0
- package/dist/tailwind.preset.cjs +184 -0
- package/dist/tailwind.preset.d.cts +5 -0
- package/dist/tailwind.preset.d.ts +5 -0
- package/dist/tailwind.preset.js +6 -0
- package/dist/tokens.css +69 -0
- package/package.json +111 -0
package/dist/styles.css
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/* Font imports */
|
|
2
|
+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
|
|
3
|
+
|
|
4
|
+
/* Design tokens */
|
|
5
|
+
@import './tokens.css';
|
|
6
|
+
|
|
7
|
+
/* Tailwind directives */
|
|
8
|
+
@import 'tailwindcss/preflight';
|
|
9
|
+
@import 'tailwindcss/utilities';
|
|
10
|
+
|
|
11
|
+
@layer base {
|
|
12
|
+
button {
|
|
13
|
+
@apply transition-all duration-300 ease-in-out;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
button:hover {
|
|
17
|
+
@apply shadow-sm;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
a {
|
|
21
|
+
color: inherit;
|
|
22
|
+
text-decoration: none;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
|
|
19
|
+
// src/tailwind.preset.ts
|
|
20
|
+
var tailwind_preset_exports = {};
|
|
21
|
+
__export(tailwind_preset_exports, {
|
|
22
|
+
default: () => tailwind_preset_default
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(tailwind_preset_exports);
|
|
25
|
+
var auxaliaColors = {
|
|
26
|
+
// Primary Brand Color - Fresh Green
|
|
27
|
+
"auxalia-green": {
|
|
28
|
+
50: "#f8fbf0",
|
|
29
|
+
100: "#f0f7e1",
|
|
30
|
+
200: "#ddf0c0",
|
|
31
|
+
300: "#c3e88a",
|
|
32
|
+
400: "#a7d500",
|
|
33
|
+
// Brand primary
|
|
34
|
+
500: "#93b800",
|
|
35
|
+
600: "#749400",
|
|
36
|
+
700: "#5a7600",
|
|
37
|
+
800: "#3d5000",
|
|
38
|
+
900: "#1f2800"
|
|
39
|
+
},
|
|
40
|
+
// Secondary Brand Color - Dark Blue
|
|
41
|
+
"auxalia-blue": {
|
|
42
|
+
50: "#f0f4f8",
|
|
43
|
+
100: "#e0eaf3",
|
|
44
|
+
200: "#c0d6e6",
|
|
45
|
+
300: "#8fb3d1",
|
|
46
|
+
400: "#5c8fb5",
|
|
47
|
+
500: "#3e6897",
|
|
48
|
+
// Brand secondary
|
|
49
|
+
600: "#2d5080",
|
|
50
|
+
700: "#1f3860",
|
|
51
|
+
800: "#142a47",
|
|
52
|
+
900: "#0a1628"
|
|
53
|
+
},
|
|
54
|
+
// Accent - Petrol Green
|
|
55
|
+
"auxalia-petrol": {
|
|
56
|
+
50: "#f0fbfc",
|
|
57
|
+
100: "#dff8f9",
|
|
58
|
+
200: "#bef1f3",
|
|
59
|
+
300: "#7fe6eb",
|
|
60
|
+
400: "#3fd9e1",
|
|
61
|
+
500: "#0f868b",
|
|
62
|
+
// Auxalia petrol
|
|
63
|
+
600: "#0a646b",
|
|
64
|
+
700: "#064952",
|
|
65
|
+
800: "#033539",
|
|
66
|
+
900: "#011f22"
|
|
67
|
+
},
|
|
68
|
+
// Supporting Colors
|
|
69
|
+
"auxalia-orange": "#dc6b39",
|
|
70
|
+
"auxalia-yellow": "#cfd12d",
|
|
71
|
+
"auxalia-red": "#93383a",
|
|
72
|
+
"auxalia-cyan": "#abbfbd"
|
|
73
|
+
};
|
|
74
|
+
var preset = {
|
|
75
|
+
darkMode: "class",
|
|
76
|
+
theme: {
|
|
77
|
+
extend: {
|
|
78
|
+
fontFamily: {
|
|
79
|
+
display: ['"Weissenhof Grotesk"', '"Calibri"', "sans-serif"],
|
|
80
|
+
body: ['"Weissenhof Grotesk"', '"Calibri"', "sans-serif"]
|
|
81
|
+
},
|
|
82
|
+
colors: {
|
|
83
|
+
// Primary using Auxalia Green — RGB channels enable Tailwind opacity modifiers (e.g. bg-primary/20)
|
|
84
|
+
primary: "rgb(var(--color-primary) / <alpha-value>)",
|
|
85
|
+
"primary-foreground": "var(--color-primary-foreground)",
|
|
86
|
+
"primary-hover": "var(--color-primary-hover)",
|
|
87
|
+
// Secondary using Auxalia Blue
|
|
88
|
+
secondary: "rgb(var(--color-secondary) / <alpha-value>)",
|
|
89
|
+
"secondary-foreground": "var(--color-secondary-foreground)",
|
|
90
|
+
"secondary-hover": "var(--color-secondary-hover)",
|
|
91
|
+
// Accent using Auxalia Petrol
|
|
92
|
+
accent: "rgb(var(--color-accent) / <alpha-value>)",
|
|
93
|
+
"accent-foreground": "var(--color-accent-foreground)",
|
|
94
|
+
surface: "var(--color-surface)",
|
|
95
|
+
"surface-hover": "var(--color-surface-hover)",
|
|
96
|
+
"surface-foreground": "var(--color-surface-foreground)",
|
|
97
|
+
destructive: "rgb(var(--color-destructive) / <alpha-value>)",
|
|
98
|
+
"destructive-hover": "var(--color-destructive-hover)",
|
|
99
|
+
"destructive-foreground": "var(--color-destructive-foreground)",
|
|
100
|
+
// Auxalia specific colors for direct use
|
|
101
|
+
"auxalia-green": auxaliaColors["auxalia-green"],
|
|
102
|
+
"auxalia-blue": auxaliaColors["auxalia-blue"],
|
|
103
|
+
"auxalia-petrol": auxaliaColors["auxalia-petrol"]
|
|
104
|
+
},
|
|
105
|
+
textColor: {
|
|
106
|
+
primary: "var(--color-text)",
|
|
107
|
+
secondary: "var(--color-text-secondary)",
|
|
108
|
+
muted: "var(--color-text-muted)"
|
|
109
|
+
},
|
|
110
|
+
backgroundColor: {
|
|
111
|
+
hero: "var(--color-bg-hero)",
|
|
112
|
+
card: "var(--surface-card)",
|
|
113
|
+
cardHover: "var(--surface-card-hover)"
|
|
114
|
+
},
|
|
115
|
+
backgroundImage: {
|
|
116
|
+
"gradient-radial-green": "radial-gradient(circle at 20% 20%, rgba(167, 213, 0, 0.15), transparent 35%)",
|
|
117
|
+
"gradient-radial-blue": "radial-gradient(circle at 80% 0%, rgba(62, 104, 151, 0.1), transparent 40%)",
|
|
118
|
+
"gradient-glow": "linear-gradient(to bottom right, rgba(6, 182, 212, 0.1), transparent, rgba(255, 255, 255, 0.05))"
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
};
|
|
123
|
+
preset.safelist = [
|
|
124
|
+
// ─── Button: filled (default) ──────────────────────────────────────────────
|
|
125
|
+
"bg-primary",
|
|
126
|
+
"bg-secondary",
|
|
127
|
+
"bg-accent",
|
|
128
|
+
"bg-destructive",
|
|
129
|
+
"text-primary-foreground",
|
|
130
|
+
"text-secondary-foreground",
|
|
131
|
+
"text-accent-foreground",
|
|
132
|
+
"text-destructive-foreground",
|
|
133
|
+
"hover:bg-primary-hover",
|
|
134
|
+
"hover:bg-secondary-hover",
|
|
135
|
+
"hover:bg-destructive-hover",
|
|
136
|
+
"shadow-sm",
|
|
137
|
+
// ─── Button: outline ───────────────────────────────────────────────────────
|
|
138
|
+
"border-2",
|
|
139
|
+
"border-primary",
|
|
140
|
+
"border-secondary",
|
|
141
|
+
"border-accent",
|
|
142
|
+
"border-destructive",
|
|
143
|
+
"text-primary",
|
|
144
|
+
"text-secondary",
|
|
145
|
+
"text-accent",
|
|
146
|
+
"text-destructive",
|
|
147
|
+
"hover:bg-primary",
|
|
148
|
+
"hover:bg-secondary",
|
|
149
|
+
"hover:bg-accent",
|
|
150
|
+
"hover:bg-destructive",
|
|
151
|
+
"hover:text-primary-foreground",
|
|
152
|
+
"hover:text-secondary-foreground",
|
|
153
|
+
"hover:text-accent-foreground",
|
|
154
|
+
"hover:text-destructive-foreground",
|
|
155
|
+
"dark:border-primary",
|
|
156
|
+
"dark:text-primary",
|
|
157
|
+
// ─── Button: ghost ─────────────────────────────────────────────────────────
|
|
158
|
+
"hover:bg-primary/10",
|
|
159
|
+
"dark:hover:bg-primary/20",
|
|
160
|
+
"hover:bg-secondary/10",
|
|
161
|
+
"hover:bg-accent/10",
|
|
162
|
+
"hover:bg-destructive/10",
|
|
163
|
+
// ─── Button: link ──────────────────────────────────────────────────────────
|
|
164
|
+
"underline",
|
|
165
|
+
"hover:text-primary-hover",
|
|
166
|
+
"hover:text-secondary-hover",
|
|
167
|
+
// ─── Card: border opacity ──────────────────────────────────────────────────
|
|
168
|
+
"border-primary/10",
|
|
169
|
+
"border-primary/20",
|
|
170
|
+
"border-primary/30",
|
|
171
|
+
"border-primary/40",
|
|
172
|
+
"border-primary/50",
|
|
173
|
+
"hover:border-primary/20",
|
|
174
|
+
"hover:border-primary/50",
|
|
175
|
+
"dark:border-primary/20",
|
|
176
|
+
"dark:border-primary/40",
|
|
177
|
+
"border-accent/10",
|
|
178
|
+
// ─── Card: background opacity ──────────────────────────────────────────────
|
|
179
|
+
"bg-primary/10",
|
|
180
|
+
"bg-primary/20",
|
|
181
|
+
"hover:shadow-md",
|
|
182
|
+
"hover:shadow-xl"
|
|
183
|
+
];
|
|
184
|
+
var tailwind_preset_default = preset;
|
package/dist/tokens.css
ADDED
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
/* Auxalia Design System — CSS Custom Properties */
|
|
2
|
+
/* Import this file in any project to use Auxalia design tokens */
|
|
3
|
+
|
|
4
|
+
:root {
|
|
5
|
+
/* BRAND COLORS */
|
|
6
|
+
/* Primary: Fresh Green #A7D500 — stored as RGB channels for Tailwind opacity support */
|
|
7
|
+
--color-primary: 167 213 0;
|
|
8
|
+
--color-primary-hover: #93b800;
|
|
9
|
+
--color-primary-foreground: #ffffff;
|
|
10
|
+
|
|
11
|
+
/* Secondary: Dark Blue #3e6897 */
|
|
12
|
+
--color-secondary: 62 104 151;
|
|
13
|
+
--color-secondary-foreground: #ffffff;
|
|
14
|
+
--color-secondary-hover: #2d5080;
|
|
15
|
+
|
|
16
|
+
/* Accent: Petrol Green #0f868b */
|
|
17
|
+
--color-accent: 15 134 139;
|
|
18
|
+
--color-accent-foreground: #ffffff;
|
|
19
|
+
|
|
20
|
+
/* Surface & Destructive */
|
|
21
|
+
--color-surface: #f5f5f5;
|
|
22
|
+
--color-surface-hover: #e8e8e8;
|
|
23
|
+
--color-surface-foreground: #1a1a1a;
|
|
24
|
+
|
|
25
|
+
--color-destructive: 147 56 58;
|
|
26
|
+
--color-destructive-hover: #7a2e31;
|
|
27
|
+
--color-destructive-foreground: #ffffff;
|
|
28
|
+
|
|
29
|
+
/* TEXT */
|
|
30
|
+
--color-text: #1a1a1a;
|
|
31
|
+
--color-text-secondary: #666666;
|
|
32
|
+
--color-text-muted: #999999;
|
|
33
|
+
|
|
34
|
+
/* BACKGROUND */
|
|
35
|
+
--color-bg-hero: #fafaf7;
|
|
36
|
+
|
|
37
|
+
/* SURFACES */
|
|
38
|
+
--surface-card: #ffffff;
|
|
39
|
+
--surface-card-hover: #f9f9f9;
|
|
40
|
+
|
|
41
|
+
/* COMMON */
|
|
42
|
+
--transition-base: 200ms ease;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.dark {
|
|
46
|
+
--color-primary: 167 213 0;
|
|
47
|
+
--color-primary-hover: #93b800;
|
|
48
|
+
--color-primary-foreground: #1a1a1a;
|
|
49
|
+
|
|
50
|
+
--color-secondary: 92 143 181;
|
|
51
|
+
--color-secondary-foreground: #ffffff;
|
|
52
|
+
--color-secondary-hover: #3e6897;
|
|
53
|
+
|
|
54
|
+
--color-accent: 15 134 139;
|
|
55
|
+
--color-accent-foreground: #ffffff;
|
|
56
|
+
|
|
57
|
+
--color-surface: rgba(255, 255, 255, 0.1);
|
|
58
|
+
--color-surface-hover: rgba(255, 255, 255, 0.15);
|
|
59
|
+
--color-surface-foreground: #e8e8e8;
|
|
60
|
+
|
|
61
|
+
--color-text: #e8e8e8;
|
|
62
|
+
--color-text-secondary: #b3b3b3;
|
|
63
|
+
--color-text-muted: #808080;
|
|
64
|
+
|
|
65
|
+
--color-bg-hero: #0a0a0a;
|
|
66
|
+
|
|
67
|
+
--surface-card: rgba(167, 213, 0, 0.05);
|
|
68
|
+
--surface-card-hover: rgba(167, 213, 0, 0.1);
|
|
69
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "auxalia-ui-kit",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "A React component library built with Radix UI and Tailwind CSS, designed to provide accessible and customizable UI components for modern web applications.",
|
|
5
|
+
"license": "ISC",
|
|
6
|
+
"author": {
|
|
7
|
+
"name": "Auxalia",
|
|
8
|
+
"url": "https://www.auxalia.com"
|
|
9
|
+
},
|
|
10
|
+
"contributors": [
|
|
11
|
+
{
|
|
12
|
+
"name": "Artur Badalyan",
|
|
13
|
+
"email": "badalyannaaa@gmail.com",
|
|
14
|
+
"url": "https://github.com/Artur-Badalyan"
|
|
15
|
+
}
|
|
16
|
+
],
|
|
17
|
+
"homepage": "https://github.com/auxalia-GmbH/auxalia-ui#readme",
|
|
18
|
+
"bugs": {
|
|
19
|
+
"url": "https://github.com/auxalia-GmbH/auxalia-ui/issues"
|
|
20
|
+
},
|
|
21
|
+
"type": "module",
|
|
22
|
+
"keywords": [
|
|
23
|
+
"auxalia",
|
|
24
|
+
"design system",
|
|
25
|
+
"react",
|
|
26
|
+
"components",
|
|
27
|
+
"ui",
|
|
28
|
+
"radix-ui",
|
|
29
|
+
"tailwind",
|
|
30
|
+
"typescript",
|
|
31
|
+
"accessible",
|
|
32
|
+
"a11y"
|
|
33
|
+
],
|
|
34
|
+
"repository": {
|
|
35
|
+
"type": "git",
|
|
36
|
+
"url": "git+https://github.com/auxalia-GmbH/auxalia-ui.git"
|
|
37
|
+
},
|
|
38
|
+
"main": "./dist/index.cjs",
|
|
39
|
+
"module": "./dist/index.js",
|
|
40
|
+
"types": "./dist/index.d.ts",
|
|
41
|
+
"publishConfig": {
|
|
42
|
+
"access": "public"
|
|
43
|
+
},
|
|
44
|
+
"exports": {
|
|
45
|
+
".": {
|
|
46
|
+
"types": "./dist/index.d.ts",
|
|
47
|
+
"import": "./dist/index.js",
|
|
48
|
+
"require": "./dist/index.cjs"
|
|
49
|
+
},
|
|
50
|
+
"./styles.css": "./dist/styles.css",
|
|
51
|
+
"./index.css": "./dist/styles.css",
|
|
52
|
+
"./tokens.css": "./dist/tokens.css",
|
|
53
|
+
"./tailwind.preset": {
|
|
54
|
+
"types": "./dist/tailwind.preset.d.ts",
|
|
55
|
+
"import": "./dist/tailwind.preset.js",
|
|
56
|
+
"require": "./dist/tailwind.preset.cjs"
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
"files": [
|
|
60
|
+
"dist",
|
|
61
|
+
"README.md",
|
|
62
|
+
"documentation.html"
|
|
63
|
+
],
|
|
64
|
+
"sideEffects": [
|
|
65
|
+
"dist/styles.css",
|
|
66
|
+
"dist/index.css",
|
|
67
|
+
"dist/tokens.css"
|
|
68
|
+
],
|
|
69
|
+
"scripts": {
|
|
70
|
+
"storybook": "storybook dev -p 6006",
|
|
71
|
+
"build-storybook": "storybook build",
|
|
72
|
+
"vercel-build": "npm run build-storybook"
|
|
73
|
+
},
|
|
74
|
+
"dependencies": {
|
|
75
|
+
"@radix-ui/react-dropdown-menu": "^2.1.6",
|
|
76
|
+
"@radix-ui/react-label": "^2.1.1",
|
|
77
|
+
"@radix-ui/react-popover": "^1.1.6",
|
|
78
|
+
"@radix-ui/react-separator": "^1.1.0",
|
|
79
|
+
"@radix-ui/react-slot": "^1.1.1",
|
|
80
|
+
"@radix-ui/react-tooltip": "^1.1.6",
|
|
81
|
+
"@radix-ui/themes": "^3.2.0",
|
|
82
|
+
"@tailwindcss/oxide-linux-x64-gnu": "^4.2.1",
|
|
83
|
+
"class-variance-authority": "^0.7.1",
|
|
84
|
+
"clsx": "^2.1.1",
|
|
85
|
+
"lucide-react": "^0.474.0",
|
|
86
|
+
"radix-ui": "^1.2.3",
|
|
87
|
+
"storybook-dark-mode": "^4.0.2",
|
|
88
|
+
"tailwind-merge": "^2.5.4"
|
|
89
|
+
},
|
|
90
|
+
"peerDependencies": {
|
|
91
|
+
"react": "^19.2.0",
|
|
92
|
+
"react-dom": "^19.2.0",
|
|
93
|
+
"tailwindcss": "^4.0.0"
|
|
94
|
+
},
|
|
95
|
+
"devDependencies": {
|
|
96
|
+
"@storybook/addon-a11y": "^8.6.17",
|
|
97
|
+
"@storybook/addon-essentials": "^8.6.14",
|
|
98
|
+
"@storybook/react-vite": "^8.6.17",
|
|
99
|
+
"@tailwindcss/vite": "^4.2.1",
|
|
100
|
+
"@types/react": "^18.3.28",
|
|
101
|
+
"@types/react-dom": "^18.3.7",
|
|
102
|
+
"@vitejs/plugin-react": "^5.1.4",
|
|
103
|
+
"react": "^19.2.4",
|
|
104
|
+
"react-dom": "^19.2.4",
|
|
105
|
+
"storybook": "^8.6.17",
|
|
106
|
+
"tailwindcss": "^4.2.1",
|
|
107
|
+
"tsup": "^8.2.4",
|
|
108
|
+
"typescript": "^5.7.3",
|
|
109
|
+
"vite": "^5.4.21"
|
|
110
|
+
}
|
|
111
|
+
}
|