auxalia-ui-kit 1.2.2 → 1.2.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.
package/dist/styles.css CHANGED
@@ -1,20 +1,16 @@
1
1
  /* Font imports */
2
2
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
3
3
 
4
- /* Design tokens */
5
- @import './tokens.css';
4
+ /* inline safelist classes previously stored in safelist.txt */
5
+ @source inline("bg-primary text-primary bg-secondary bg-accent bg-destructive text-primary-foreground bg-primary-hover border-primary ring-primary bg-card bg-popover border-black/10 dark:border-white/10 shadow-md bg-primary/5 bg-primary/10 bg-primary/15 bg-primary/20 bg-primary/25 bg-primary/30 bg-primary/40 bg-primary/50 border-primary/10 border-primary/20 border-primary/25 border-primary/30 border-primary/40 border-primary/50 ring-primary/15 ring-primary/20 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2");
6
6
 
7
- /* Tailwind directives */
8
- @import 'tailwindcss/preflight';
7
+ @import 'tailwindcss/base';
8
+ @import 'tailwindcss/components';
9
9
  @import 'tailwindcss/utilities';
10
10
 
11
- /* Scan compiled component files so consumers get all utility classes */
12
- @source "./*.{js,cjs}";
13
-
14
- /* Safelist: explicitly define custom token utilities so they are always
15
- present for consumers without requiring node_modules scanning. */
16
- @source inline("{bg,text}-{popover,card,hero,surface,primary,secondary,muted,primary-foreground,secondary-foreground,accent-foreground,destructive-foreground,surface-foreground}");
11
+ @import './tokens.css';
17
12
 
13
+ /* base layer */
18
14
  @layer base {
19
15
  button {
20
16
  @apply transition-all duration-300 ease-in-out;
@@ -28,9 +24,4 @@
28
24
  color: inherit;
29
25
  text-decoration: none;
30
26
  }
31
-
32
- [data-radix-popper-content-wrapper] > [role='dialog'],
33
- [data-radix-popper-content-wrapper] > [data-state] {
34
- background-color: var(--popover);
35
- }
36
27
  }
package/dist/tokens.css CHANGED
@@ -3,67 +3,79 @@
3
3
 
4
4
  :root {
5
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;
6
+ /* Primary: Fresh Green #A7D500 */
7
+ --color-primary: hsl(73 100% 42%);
8
+ --color-primary-hover: hsl(72 100% 36%);
9
+ --color-primary-foreground: hsl(0 0% 100%);
10
10
 
11
- /* Secondary: Dark Blue #3e6897 */
12
- --color-secondary: 62 104 151;
13
- --color-secondary-foreground: #ffffff;
14
- --color-secondary-hover: #2d5080;
11
+ /* Secondary: Modern Indigo #4361EE */
12
+ --color-secondary: hsl(230 83% 60%);
13
+ --color-secondary-foreground: hsl(0 0% 100%);
14
+ --color-secondary-hover: hsl(229 63% 51%);
15
15
 
16
- /* Accent: Petrol Green #0f868b */
17
- --color-accent: 15 134 139;
18
- --color-accent-foreground: #ffffff;
16
+ /* Accent: Sky Blue #0EA5E9 */
17
+ --color-accent: hsl(199 89% 48%);
18
+ --color-accent-foreground: hsl(0 0% 100%);
19
19
 
20
20
  /* Surface & Destructive */
21
- --color-surface: #f5f5f5;
22
- --color-surface-hover: #e8e8e8;
23
- --color-surface-foreground: #1a1a1a;
21
+ --color-surface: hsl(210 40% 96%);
22
+ --color-surface-hover: hsl(214 32% 91%);
23
+ --color-surface-foreground: hsl(222 47% 11%);
24
24
 
25
- --color-destructive: 147 56 58;
26
- --color-destructive-hover: #7a2e31;
27
- --color-destructive-foreground: #ffffff;
25
+ --color-destructive: hsl(0 72% 51%);
26
+ --color-destructive-hover: hsl(0 74% 42%);
27
+ --color-destructive-foreground: hsl(0 0% 100%);
28
28
 
29
29
  /* TEXT */
30
- --color-text: #1a1a1a;
31
- --color-text-secondary: #666666;
32
- --color-text-muted: #999999;
30
+ --color-text: hsl(222 47% 11%);
31
+ --color-text-secondary: hsl(215 19% 35%);
32
+ --color-text-muted: hsl(215 20% 65%);
33
33
 
34
34
  /* BACKGROUND */
35
- --color-bg-hero: #fafaf7;
35
+ --color-bg-hero: hsl(210 40% 98%);
36
36
 
37
37
  /* SURFACES */
38
- --surface-card: #ffffff;
39
- --surface-card-hover: #f9f9f9;
38
+ --card: hsl(0 0% 100%);
39
+ --card-hover: hsl(210 40% 98%);
40
+
41
+ /* POPOVER / DROPDOWN / SELECT opened content */
42
+ --popover: hsl(0 0% 100%);
40
43
 
41
44
  /* COMMON */
42
45
  --transition-base: 200ms ease;
43
46
  }
44
47
 
45
48
  .dark {
46
- --color-primary: 167 213 0;
47
- --color-primary-hover: #93b800;
48
- --color-primary-foreground: #1a1a1a;
49
+ --color-primary: hsl(73 100% 42%);
50
+ --color-primary-hover: hsl(72 100% 36%);
51
+ --color-primary-foreground: hsl(222 47% 11%);
52
+
53
+ /* Secondary: Indigo-400 for dark bg */
54
+ --color-secondary: hsl(234 89% 74%);
55
+ --color-secondary-foreground: hsl(222 47% 11%);
56
+ --color-secondary-hover: hsl(239 84% 67%);
57
+
58
+ /* Accent: Sky-400 for dark bg */
59
+ --color-accent: hsl(198 93% 60%);
60
+ --color-accent-foreground: hsl(222 47% 11%);
49
61
 
50
- --color-secondary: 92 143 181;
51
- --color-secondary-foreground: #ffffff;
52
- --color-secondary-hover: #3e6897;
62
+ --color-surface: hsl(217 33% 17%);
63
+ --color-surface-hover: hsl(215 25% 27%);
64
+ --color-surface-foreground: hsl(210 40% 96%);
53
65
 
54
- --color-accent: 15 134 139;
55
- --color-accent-foreground: #ffffff;
66
+ --color-destructive: hsl(0 91% 71%);
67
+ --color-destructive-hover: hsl(0 84% 60%);
68
+ --color-destructive-foreground: hsl(222 47% 11%);
56
69
 
57
- --color-surface: rgba(255, 255, 255, 0.1);
58
- --color-surface-hover: rgba(255, 255, 255, 0.15);
59
- --color-surface-foreground: #e8e8e8;
70
+ --color-text: hsl(214 32% 91%);
71
+ --color-text-secondary: hsl(215 20% 65%);
72
+ --color-text-muted: hsl(215 16% 47%);
60
73
 
61
- --color-text: #e8e8e8;
62
- --color-text-secondary: #b3b3b3;
63
- --color-text-muted: #808080;
74
+ --color-bg-hero: hsl(216 28% 7%);
64
75
 
65
- --color-bg-hero: #0a0a0a;
76
+ --card: hsl(215 21% 11%);
77
+ --card-hover: hsl(223 23% 15%);
66
78
 
67
- --surface-card: rgba(167, 213, 0, 0.05);
68
- --surface-card-hover: rgba(167, 213, 0, 0.1);
79
+ /* POPOVER / DROPDOWN / SELECT opened content */
80
+ --popover: hsl(223 23% 15%);
69
81
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "auxalia-ui-kit",
3
- "version": "1.2.2",
3
+ "version": "1.2.3",
4
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
5
  "license": "ISC",
6
6
  "author": {
@@ -67,7 +67,6 @@
67
67
  "dist/tokens.css"
68
68
  ],
69
69
  "scripts": {
70
- "build": "tsup src/index.ts --format cjs,esm --dts",
71
70
  "storybook": "storybook dev -p 6006",
72
71
  "build-storybook": "storybook build",
73
72
  "vercel-build": "npm run build-storybook"
@@ -109,4 +108,4 @@
109
108
  "typescript": "^5.7.3",
110
109
  "vite": "^5.4.21"
111
110
  }
112
- }
111
+ }
@@ -1,165 +0,0 @@
1
- // src/tailwind.preset.ts
2
- var auxaliaColors = {
3
- // Primary Brand Color - Fresh Green
4
- "auxalia-green": {
5
- 50: "#f8fbf0",
6
- 100: "#f0f7e1",
7
- 200: "#ddf0c0",
8
- 300: "#c3e88a",
9
- 400: "#a7d500",
10
- // Brand primary
11
- 500: "#93b800",
12
- 600: "#749400",
13
- 700: "#5a7600",
14
- 800: "#3d5000",
15
- 900: "#1f2800"
16
- },
17
- // Secondary Brand Color - Dark Blue
18
- "auxalia-blue": {
19
- 50: "#f0f4f8",
20
- 100: "#e0eaf3",
21
- 200: "#c0d6e6",
22
- 300: "#8fb3d1",
23
- 400: "#5c8fb5",
24
- 500: "#3e6897",
25
- // Brand secondary
26
- 600: "#2d5080",
27
- 700: "#1f3860",
28
- 800: "#142a47",
29
- 900: "#0a1628"
30
- },
31
- // Accent - Petrol Green
32
- "auxalia-petrol": {
33
- 50: "#f0fbfc",
34
- 100: "#dff8f9",
35
- 200: "#bef1f3",
36
- 300: "#7fe6eb",
37
- 400: "#3fd9e1",
38
- 500: "#0f868b",
39
- // Auxalia petrol
40
- 600: "#0a646b",
41
- 700: "#064952",
42
- 800: "#033539",
43
- 900: "#011f22"
44
- },
45
- // Supporting Colors
46
- "auxalia-orange": "#dc6b39",
47
- "auxalia-yellow": "#cfd12d",
48
- "auxalia-red": "#93383a",
49
- "auxalia-cyan": "#abbfbd"
50
- };
51
- var preset = {
52
- darkMode: "class",
53
- theme: {
54
- extend: {
55
- fontFamily: {
56
- display: ['"Weissenhof Grotesk"', '"Calibri"', "sans-serif"],
57
- body: ['"Weissenhof Grotesk"', '"Calibri"', "sans-serif"]
58
- },
59
- colors: {
60
- // Primary using Auxalia Green — RGB channels enable Tailwind opacity modifiers (e.g. bg-primary/20)
61
- primary: "rgb(var(--color-primary) / <alpha-value>)",
62
- "primary-foreground": "var(--color-primary-foreground)",
63
- "primary-hover": "var(--color-primary-hover)",
64
- // Secondary using Auxalia Blue
65
- secondary: "rgb(var(--color-secondary) / <alpha-value>)",
66
- "secondary-foreground": "var(--color-secondary-foreground)",
67
- "secondary-hover": "var(--color-secondary-hover)",
68
- // Accent using Auxalia Petrol
69
- accent: "rgb(var(--color-accent) / <alpha-value>)",
70
- "accent-foreground": "var(--color-accent-foreground)",
71
- surface: "var(--color-surface)",
72
- "surface-hover": "var(--color-surface-hover)",
73
- "surface-foreground": "var(--color-surface-foreground)",
74
- destructive: "rgb(var(--color-destructive) / <alpha-value>)",
75
- "destructive-hover": "var(--color-destructive-hover)",
76
- "destructive-foreground": "var(--color-destructive-foreground)",
77
- // Auxalia specific colors for direct use
78
- "auxalia-green": auxaliaColors["auxalia-green"],
79
- "auxalia-blue": auxaliaColors["auxalia-blue"],
80
- "auxalia-petrol": auxaliaColors["auxalia-petrol"]
81
- },
82
- textColor: {
83
- primary: "var(--color-text)",
84
- secondary: "var(--color-text-secondary)",
85
- muted: "var(--color-text-muted)"
86
- },
87
- backgroundColor: {
88
- hero: "var(--color-bg-hero)",
89
- card: "var(--surface-card)",
90
- cardHover: "var(--surface-card-hover)"
91
- },
92
- backgroundImage: {
93
- "gradient-radial-green": "radial-gradient(circle at 20% 20%, rgba(167, 213, 0, 0.15), transparent 35%)",
94
- "gradient-radial-blue": "radial-gradient(circle at 80% 0%, rgba(62, 104, 151, 0.1), transparent 40%)",
95
- "gradient-glow": "linear-gradient(to bottom right, rgba(6, 182, 212, 0.1), transparent, rgba(255, 255, 255, 0.05))"
96
- }
97
- }
98
- }
99
- };
100
- preset.safelist = [
101
- // ─── Button: filled (default) ──────────────────────────────────────────────
102
- "bg-primary",
103
- "bg-secondary",
104
- "bg-accent",
105
- "bg-destructive",
106
- "text-primary-foreground",
107
- "text-secondary-foreground",
108
- "text-accent-foreground",
109
- "text-destructive-foreground",
110
- "hover:bg-primary-hover",
111
- "hover:bg-secondary-hover",
112
- "hover:bg-destructive-hover",
113
- "shadow-sm",
114
- // ─── Button: outline ───────────────────────────────────────────────────────
115
- "border-2",
116
- "border-primary",
117
- "border-secondary",
118
- "border-accent",
119
- "border-destructive",
120
- "text-primary",
121
- "text-secondary",
122
- "text-accent",
123
- "text-destructive",
124
- "hover:bg-primary",
125
- "hover:bg-secondary",
126
- "hover:bg-accent",
127
- "hover:bg-destructive",
128
- "hover:text-primary-foreground",
129
- "hover:text-secondary-foreground",
130
- "hover:text-accent-foreground",
131
- "hover:text-destructive-foreground",
132
- "dark:border-primary",
133
- "dark:text-primary",
134
- // ─── Button: ghost ─────────────────────────────────────────────────────────
135
- "hover:bg-primary/10",
136
- "dark:hover:bg-primary/20",
137
- "hover:bg-secondary/10",
138
- "hover:bg-accent/10",
139
- "hover:bg-destructive/10",
140
- // ─── Button: link ──────────────────────────────────────────────────────────
141
- "underline",
142
- "hover:text-primary-hover",
143
- "hover:text-secondary-hover",
144
- // ─── Card: border opacity ──────────────────────────────────────────────────
145
- "border-primary/10",
146
- "border-primary/20",
147
- "border-primary/30",
148
- "border-primary/40",
149
- "border-primary/50",
150
- "hover:border-primary/20",
151
- "hover:border-primary/50",
152
- "dark:border-primary/20",
153
- "dark:border-primary/40",
154
- "border-accent/10",
155
- // ─── Card: background opacity ──────────────────────────────────────────────
156
- "bg-primary/10",
157
- "bg-primary/20",
158
- "hover:shadow-md",
159
- "hover:shadow-xl"
160
- ];
161
- var tailwind_preset_default = preset;
162
-
163
- export {
164
- tailwind_preset_default
165
- };
@@ -1,184 +0,0 @@
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;
@@ -1,5 +0,0 @@
1
- import { Config } from 'tailwindcss';
2
-
3
- declare const preset: Config;
4
-
5
- export { preset as default };
@@ -1,5 +0,0 @@
1
- import { Config } from 'tailwindcss';
2
-
3
- declare const preset: Config;
4
-
5
- export { preset as default };
@@ -1,6 +0,0 @@
1
- import {
2
- tailwind_preset_default
3
- } from "./chunk-O6RHMFJG.js";
4
- export {
5
- tailwind_preset_default as default
6
- };