arkenstone-ui 0.0.25 → 0.0.26

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 (17) hide show
  1. package/dist/css/theme.css +151 -36
  2. package/dist/index.js +12386 -6644
  3. package/dist/style.css +1 -1
  4. package/dist/types/components/arkestone.d.ts +1 -1
  5. package/dist/types/components/index.d.ts +1 -0
  6. package/dist/types/components/sidebar/app-sidebar.d.ts +54 -1
  7. package/dist/types/components/sidebar/index.d.ts +5 -0
  8. package/dist/types/components/sidebar/mock-sidebar-data.json.d.ts +152 -0
  9. package/dist/types/components/sidebar/nav-main.d.ts +2 -2
  10. package/dist/types/components/sidebar/nav-secondary.d.ts +2 -2
  11. package/dist/types/components/sidebar/nav-slot2.d.ts +3 -3
  12. package/dist/types/components/ui/date-picker.d.ts +4 -0
  13. package/dist/types/index.d.ts +1 -0
  14. package/dist/types/layouts/index.d.ts +1 -0
  15. package/dist/types/layouts/panels/default-panel-layout.d.ts +3 -1
  16. package/dist/types/layouts/panels/index.d.ts +1 -0
  17. package/package.json +3 -2
package/dist/css/theme.css CHANGED
@@ -1,49 +1,164 @@
1
- /* src/lib/css/theme.css */
2
1
  @import "tailwindcss";
3
2
  @plugin "tailwindcss-animate";
4
3
 
5
- /* 2. Define the Variables */
4
+ /* -------------------------------------------------------
5
+ PURE HEX COLOR VARIABLES
6
+ ------------------------------------------------------- */
6
7
  :root {
7
- /* --background: 0 0% 100%; */
8
- /* --foreground: 222.2 84% 4.9%; */
9
- /* --primary: 222.2 47.4% 11.2%; */
10
- /* --primary-foreground: 210 40% 98%; */
11
- /* --radius: 0.5rem; */
12
- /* ... Add all other variables here ... */
8
+ /* Matte white + matte black */
9
+ --background: #F7F7F7;
10
+ --foreground: #1A1A1A;
11
+
12
+ /* Primary (#0287FE) + lighter shades */
13
+ --primary: #0287FE;
14
+ --primary-foreground: #FFFFFF;
15
+
16
+ --primary-light: #57AEFF;
17
+ --primary-lighter: #9DD2FF;
18
+ --primary-lightest: #D0EAFF;
19
+
20
+ /* Secondary / muted / accent (matching the palette) */
21
+ --muted: #EBEBEB;
22
+ --muted-foreground: #666666;
23
+
24
+ --secondary: #E9F4FF;
25
+ --secondary-foreground: #1666A9;
26
+
27
+ --accent: #DCEEFF;
28
+ --accent-foreground: #165A96;
29
+
30
+ /* Destructive */
31
+ --destructive: #ff524f;
32
+ --destructive-foreground: #FFFFFF;
33
+
34
+ /* Border / input */
35
+ --border: #4d4d4d;
36
+ --input: #E0E0E0;
37
+
38
+ /* Ring highlight */
39
+ --ring: #0287FE;
40
+
41
+ /* Radius */
42
+ --radius: 0.5rem;
43
+
44
+ /* Sidebar */
45
+ --sidebar: #F3F3F3;
46
+ --sidebar-foreground: #1A1A1A;
47
+
48
+ --sidebar-primary: #0287FE;
49
+ --sidebar-primary-foreground: #FFFFFF;
50
+
51
+ --sidebar-accent: #DCEEFF;
52
+ --sidebar-accent-foreground: #165A96;
53
+
54
+ --sidebar-border: #D6D6D6;
55
+ --sidebar-ring: #0287FE;
56
+
57
+
58
+ --popover: #87c7ff;
59
+ --popover-foreground: #000000;
13
60
  }
14
61
 
62
+ /* DARK MODE */
15
63
  .dark {
16
- /* --background: 222.2 84% 4.9%; */
17
- /* --foreground: 210 40% 98%; */
18
- /* ... Add all other dark variables here ... */
64
+ --background: #1A1A1A;
65
+ --foreground: #F7F7F7;
66
+
67
+ --primary: #2B9CFF;
68
+ --primary-foreground: #FFFFFF;
69
+
70
+ --muted: #232323;
71
+ --muted-foreground: #A6A6A6;
72
+
73
+ --secondary: #0A3352;
74
+ --secondary-foreground: #F7F7F7;
75
+
76
+ --accent: #0F4170;
77
+ --accent-foreground: #F7F7F7;
78
+
79
+ --destructive: #ff6060;
80
+ --destructive-foreground: #F7F7F7;
81
+
82
+ --border: #3D3D3D;
83
+ --input: #3D3D3D;
84
+
85
+ --ring: #2B9CFF;
86
+
87
+ --sidebar: #1F1F1F;
88
+ --sidebar-foreground: #F7F7F7;
89
+
90
+ --sidebar-primary: #2B9CFF;
91
+ --sidebar-primary-foreground: #FFFFFF;
92
+
93
+ --sidebar-accent: #0F4170;
94
+ --sidebar-accent-foreground: #FFFFFF;
95
+
96
+ --sidebar-border: #2D2D2D;
97
+ --sidebar-ring: #2B9CFF;
98
+
99
+ --popover: #00396b;
100
+ --popover-foreground: #eaeaea;
19
101
  }
20
102
 
21
- /* 3. Configure the Theme (Map variables to Tailwind utilities) */
103
+ /* -------------------------------------------------------
104
+ TAILWIND THEME (PURE HEX MAPPING)
105
+ ------------------------------------------------------- */
22
106
  @theme {
23
- /* Colors */
24
- /* --color-background: hsl(var(--background));
25
- --color-foreground: hsl(var(--foreground)); */
26
-
27
- /* --color-primary: hsl(var(--primary));
28
- --color-primary-foreground: hsl(var(--primary-foreground)); */
107
+ --color-background: var(--background);
108
+ --color-foreground: var(--foreground);
109
+
110
+ --color-primary: var(--primary);
111
+ --color-primary-foreground: var(--primary-foreground);
112
+
113
+ --color-primary-light: var(--primary-light);
114
+ --color-primary-lighter: var(--primary-lighter);
115
+ --color-primary-lightest: var(--primary-lightest);
116
+
117
+ --color-secondary: var(--secondary);
118
+ --color-secondary-foreground: var(--secondary-foreground);
119
+
120
+ --color-muted: var(--muted);
121
+ --color-muted-foreground: var(--muted-foreground);
122
+
123
+ --color-accent: var(--accent);
124
+ --color-accent-foreground: var(--accent-foreground);
29
125
 
30
- /* Add mappings for card, popover, secondary, muted, accent, destructive, border, input, ring... */
126
+ --color-destructive: var(--destructive);
127
+ --color-destructive-foreground: var(--destructive-foreground);
31
128
 
32
- /* Border Radius */
33
- /* --radius-lg: var(--radius);
129
+ --color-border: var(--border);
130
+ --color-input: var(--input);
131
+ --color-ring: var(--ring);
132
+
133
+ /* Sidebar */
134
+ --color-sidebar: var(--sidebar);
135
+ --color-sidebar-foreground: var(--sidebar-foreground);
136
+ --color-sidebar-primary: var(--sidebar-primary);
137
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
138
+ --color-sidebar-accent: var(--sidebar-accent);
139
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
140
+ --color-sidebar-border: var(--sidebar-border);
141
+ --color-sidebar-ring: var(--sidebar-ring);
142
+
143
+ /* Radii */
144
+ --radius-lg: var(--radius);
34
145
  --radius-md: calc(var(--radius) - 2px);
35
- --radius-sm: calc(var(--radius) - 4px); */
36
-
37
- /* Animations (If not fully covered by the plugin) */
38
- --animate-accordion-down: accordion-down 0.2s ease-out;
39
- --animate-accordion-up: accordion-up 0.2s ease-out;
40
-
41
- @keyframes accordion-down {
42
- from { height: 0 }
43
- to { height: var(--radix-accordion-content-height) }
44
- }
45
- @keyframes accordion-up {
46
- from { height: var(--radix-accordion-content-height) }
47
- to { height: 0 }
48
- }
49
- }
146
+ --radius-sm: calc(var(--radius) - 4px);
147
+
148
+
149
+ }
150
+
151
+
152
+ @layer base {
153
+ body {
154
+ background-color: var(--background);
155
+ color: var(--foreground);
156
+ font-family: 'Inter', sans-serif;
157
+ font-size: 16px;
158
+ line-height: 1.5;
159
+ margin: 0;
160
+ padding: 0;
161
+ box-sizing: border-box;
162
+ }
163
+ }
164
+