@geomak/ui 1.7.4 → 1.8.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/dist/styles.css CHANGED
@@ -162,6 +162,16 @@
162
162
  transform: scaleX(0);
163
163
  }
164
164
  }
165
+ @keyframes breathe {
166
+ 0%, 100% {
167
+ transform: scale(1);
168
+ opacity: 0.6;
169
+ }
170
+ 50% {
171
+ transform: scale(1.35);
172
+ opacity: 1;
173
+ }
174
+ }
165
175
  *, ::before, ::after {
166
176
  --tw-border-spacing-x: 0;
167
177
  --tw-border-spacing-y: 0;
@@ -930,6 +940,9 @@ video {
930
940
  .hidden {
931
941
  display: none;
932
942
  }
943
+ .h-1 {
944
+ height: 0.25rem;
945
+ }
933
946
  .h-1\.5 {
934
947
  height: 0.375rem;
935
948
  }
@@ -942,6 +955,9 @@ video {
942
955
  .h-11 {
943
956
  height: 2.75rem;
944
957
  }
958
+ .h-12 {
959
+ height: 3rem;
960
+ }
945
961
  .h-14 {
946
962
  height: 3.5rem;
947
963
  }
@@ -963,6 +979,9 @@ video {
963
979
  .h-3\.5 {
964
980
  height: 0.875rem;
965
981
  }
982
+ .h-32 {
983
+ height: 8rem;
984
+ }
966
985
  .h-4 {
967
986
  height: 1rem;
968
987
  }
@@ -1015,9 +1034,15 @@ video {
1015
1034
  .min-h-\[80px\] {
1016
1035
  min-height: 80px;
1017
1036
  }
1037
+ .min-h-full {
1038
+ min-height: 100%;
1039
+ }
1018
1040
  .w-0 {
1019
1041
  width: 0px;
1020
1042
  }
1043
+ .w-1 {
1044
+ width: 0.25rem;
1045
+ }
1021
1046
  .w-1\.5 {
1022
1047
  width: 0.375rem;
1023
1048
  }
@@ -1027,6 +1052,9 @@ video {
1027
1052
  .w-11 {
1028
1053
  width: 2.75rem;
1029
1054
  }
1055
+ .w-12 {
1056
+ width: 3rem;
1057
+ }
1030
1058
  .w-14 {
1031
1059
  width: 3.5rem;
1032
1060
  }
@@ -1048,6 +1076,9 @@ video {
1048
1076
  .w-3\.5 {
1049
1077
  width: 0.875rem;
1050
1078
  }
1079
+ .w-32 {
1080
+ width: 8rem;
1081
+ }
1051
1082
  .w-4 {
1052
1083
  width: 1rem;
1053
1084
  }
@@ -1075,6 +1106,9 @@ video {
1075
1106
  .w-8 {
1076
1107
  width: 2rem;
1077
1108
  }
1109
+ .w-80 {
1110
+ width: 20rem;
1111
+ }
1078
1112
  .w-9 {
1079
1113
  width: 2.25rem;
1080
1114
  }
@@ -1185,6 +1219,9 @@ video {
1185
1219
  .transform {
1186
1220
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1187
1221
  }
1222
+ .animate-breathe {
1223
+ animation: breathe 2s ease-in-out infinite;
1224
+ }
1188
1225
  @keyframes ping {
1189
1226
  75%, 100% {
1190
1227
  transform: scale(2);
@@ -1249,6 +1286,9 @@ video {
1249
1286
  .flex-wrap {
1250
1287
  flex-wrap: wrap;
1251
1288
  }
1289
+ .place-items-center {
1290
+ place-items: center;
1291
+ }
1252
1292
  .items-start {
1253
1293
  align-items: flex-start;
1254
1294
  }
@@ -1282,6 +1322,9 @@ video {
1282
1322
  .gap-10 {
1283
1323
  gap: 2.5rem;
1284
1324
  }
1325
+ .gap-16 {
1326
+ gap: 4rem;
1327
+ }
1285
1328
  .gap-2 {
1286
1329
  gap: 0.5rem;
1287
1330
  }
@@ -1404,8 +1447,8 @@ video {
1404
1447
  .border-4 {
1405
1448
  border-width: 4px;
1406
1449
  }
1407
- .border-\[6px\] {
1408
- border-width: 6px;
1450
+ .border-\[3px\] {
1451
+ border-width: 3px;
1409
1452
  }
1410
1453
  .border-b {
1411
1454
  border-bottom-width: 1px;
@@ -1434,25 +1477,16 @@ video {
1434
1477
  .border-border-strong {
1435
1478
  border-color: var(--color-border-strong);
1436
1479
  }
1437
- .border-error {
1438
- --tw-border-opacity: 1;
1439
- border-color: rgb(255 99 71 / var(--tw-border-opacity, 1));
1440
- }
1441
- .border-ice-dark {
1442
- --tw-border-opacity: 1;
1443
- border-color: rgb(208 227 237 / var(--tw-border-opacity, 1));
1444
- }
1445
1480
  .border-prussian-blue {
1446
1481
  --tw-border-opacity: 1;
1447
1482
  border-color: rgb(0 39 58 / var(--tw-border-opacity, 1));
1448
1483
  }
1484
+ .border-status-error {
1485
+ border-color: var(--color-error);
1486
+ }
1449
1487
  .border-transparent {
1450
1488
  border-color: rgba(255, 255, 255, .0);
1451
1489
  }
1452
- .border-b-ice-dark {
1453
- --tw-border-opacity: 1;
1454
- border-bottom-color: rgb(208 227 237 / var(--tw-border-opacity, 1));
1455
- }
1456
1490
  .bg-accent {
1457
1491
  background-color: var(--color-accent);
1458
1492
  }
@@ -1467,10 +1501,6 @@ video {
1467
1501
  --tw-bg-opacity: 1;
1468
1502
  background-color: rgb(222 226 230 / var(--tw-bg-opacity, 1));
1469
1503
  }
1470
- .bg-error {
1471
- --tw-bg-opacity: 1;
1472
- background-color: rgb(255 99 71 / var(--tw-bg-opacity, 1));
1473
- }
1474
1504
  .bg-foreground {
1475
1505
  background-color: var(--color-foreground);
1476
1506
  }
@@ -1488,10 +1518,6 @@ video {
1488
1518
  --tw-bg-opacity: 1;
1489
1519
  background-color: rgb(208 227 237 / var(--tw-bg-opacity, 1));
1490
1520
  }
1491
- .bg-independence {
1492
- --tw-bg-opacity: 1;
1493
- background-color: rgb(51 65 92 / var(--tw-bg-opacity, 1));
1494
- }
1495
1521
  .bg-oxford-blue-900 {
1496
1522
  --tw-bg-opacity: 1;
1497
1523
  background-color: rgb(0 18 51 / var(--tw-bg-opacity, 1));
@@ -1521,10 +1547,6 @@ video {
1521
1547
  .bg-transparent {
1522
1548
  background-color: rgba(255, 255, 255, .0);
1523
1549
  }
1524
- .bg-usafa-blue {
1525
- --tw-bg-opacity: 1;
1526
- background-color: rgb(3 83 164 / var(--tw-bg-opacity, 1));
1527
- }
1528
1550
  .bg-white {
1529
1551
  --tw-bg-opacity: 1;
1530
1552
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
@@ -1681,9 +1703,9 @@ video {
1681
1703
  font-size: var(--font-size-2xl);
1682
1704
  line-height: var(--line-height-tight);
1683
1705
  }
1684
- .text-3xl {
1685
- font-size: var(--font-size-3xl);
1686
- line-height: var(--line-height-tight);
1706
+ .text-4xl {
1707
+ font-size: 2.25rem;
1708
+ line-height: 2.5rem;
1687
1709
  }
1688
1710
  .text-\[10px\] {
1689
1711
  font-size: 10px;
@@ -1744,6 +1766,9 @@ video {
1744
1766
  .text-accent {
1745
1767
  color: var(--color-accent);
1746
1768
  }
1769
+ .text-accent-fg {
1770
+ color: var(--color-accent-foreground);
1771
+ }
1747
1772
  .text-background {
1748
1773
  color: var(--color-background);
1749
1774
  }
@@ -1804,6 +1829,9 @@ video {
1804
1829
  .opacity-50 {
1805
1830
  opacity: 0.5;
1806
1831
  }
1832
+ .opacity-60 {
1833
+ opacity: 0.6;
1834
+ }
1807
1835
  .opacity-75 {
1808
1836
  opacity: 0.75;
1809
1837
  }
@@ -1841,9 +1869,6 @@ video {
1841
1869
  outline: 2px solid transparent;
1842
1870
  outline-offset: 2px;
1843
1871
  }
1844
- .outline-offset-2 {
1845
- outline-offset: 2px;
1846
- }
1847
1872
  .ring {
1848
1873
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1849
1874
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1868,6 +1893,10 @@ video {
1868
1893
  --tw-backdrop-blur: blur(1px);
1869
1894
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
1870
1895
  }
1896
+ .backdrop-blur-sm {
1897
+ --tw-backdrop-blur: blur(4px);
1898
+ backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
1899
+ }
1871
1900
  .transition {
1872
1901
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
1873
1902
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1941,9 +1970,16 @@ video {
1941
1970
  .last\:border-0:last-child {
1942
1971
  border-width: 0px;
1943
1972
  }
1944
- .hover\:border-prussian-blue:hover {
1945
- --tw-border-opacity: 1;
1946
- border-color: rgb(0 39 58 / var(--tw-border-opacity, 1));
1973
+ .focus-within\:ring-2:focus-within {
1974
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1975
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1976
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1977
+ }
1978
+ .focus-within\:ring-accent:focus-within {
1979
+ --tw-ring-color: var(--color-accent);
1980
+ }
1981
+ .hover\:border-accent:hover {
1982
+ border-color: var(--color-accent);
1947
1983
  }
1948
1984
  .hover\:bg-accent:hover {
1949
1985
  background-color: var(--color-accent);
@@ -1969,13 +2005,12 @@ video {
1969
2005
  .hover\:bg-surface-raised:hover {
1970
2006
  background-color: var(--color-surface-raised);
1971
2007
  }
1972
- .hover\:bg-true-blue:hover {
1973
- --tw-bg-opacity: 1;
1974
- background-color: rgb(4 102 200 / var(--tw-bg-opacity, 1));
1975
- }
1976
2008
  .hover\:bg-white\/15:hover {
1977
2009
  background-color: rgb(255 255 255 / 0.15);
1978
2010
  }
2011
+ .hover\:text-accent-fg:hover {
2012
+ color: var(--color-accent-foreground);
2013
+ }
1979
2014
  .hover\:text-foreground:hover {
1980
2015
  color: var(--color-foreground);
1981
2016
  }
@@ -1993,9 +2028,6 @@ video {
1993
2028
  .focus\:outline-0:focus {
1994
2029
  outline-width: 0px;
1995
2030
  }
1996
- .focus\:outline-oxford-blue-700-opaque:focus {
1997
- outline-color: rgba(0, 40, 85, .3);
1998
- }
1999
2031
  .focus-visible\:outline-0:focus-visible {
2000
2032
  outline-width: 0px;
2001
2033
  }
@@ -2018,10 +2050,6 @@ video {
2018
2050
  .focus-visible\:ring-status-error:focus-visible {
2019
2051
  --tw-ring-color: var(--color-error);
2020
2052
  }
2021
- .focus-visible\:ring-usafa-blue:focus-visible {
2022
- --tw-ring-opacity: 1;
2023
- --tw-ring-color: rgb(3 83 164 / var(--tw-ring-opacity, 1));
2024
- }
2025
2053
  .focus-visible\:ring-white\/50:focus-visible {
2026
2054
  --tw-ring-color: rgb(255 255 255 / 0.5);
2027
2055
  }
@@ -2037,13 +2065,11 @@ video {
2037
2065
  .active\:bg-accent-hover:active {
2038
2066
  background-color: var(--color-accent-hover);
2039
2067
  }
2040
- .active\:bg-ice-dark:active {
2041
- --tw-bg-opacity: 1;
2042
- background-color: rgb(208 227 237 / var(--tw-bg-opacity, 1));
2068
+ .active\:bg-surface:active {
2069
+ background-color: var(--color-surface);
2043
2070
  }
2044
- .active\:text-white:active {
2045
- --tw-text-opacity: 1;
2046
- color: rgb(255 255 255 / var(--tw-text-opacity, 1));
2071
+ .active\:text-accent-fg:active {
2072
+ color: var(--color-accent-foreground);
2047
2073
  }
2048
2074
  .active\:opacity-100:active {
2049
2075
  opacity: 1;
@@ -2051,28 +2077,21 @@ video {
2051
2077
  .disabled\:cursor-not-allowed:disabled {
2052
2078
  cursor: not-allowed;
2053
2079
  }
2054
- .disabled\:border-disabled:disabled {
2055
- --tw-border-opacity: 1;
2056
- border-color: rgb(222 226 230 / var(--tw-border-opacity, 1));
2057
- }
2058
- .disabled\:border-roman-silver:disabled {
2059
- --tw-border-opacity: 1;
2060
- border-color: rgb(125 133 151 / var(--tw-border-opacity, 1));
2080
+ .disabled\:border-foreground-muted:disabled {
2081
+ border-color: var(--color-foreground-muted);
2061
2082
  }
2062
2083
  .disabled\:bg-disabled:disabled {
2063
2084
  --tw-bg-opacity: 1;
2064
2085
  background-color: rgb(222 226 230 / var(--tw-bg-opacity, 1));
2065
2086
  }
2066
- .disabled\:bg-roman-silver:disabled {
2067
- --tw-bg-opacity: 1;
2068
- background-color: rgb(125 133 151 / var(--tw-bg-opacity, 1));
2087
+ .disabled\:bg-foreground-muted:disabled {
2088
+ background-color: var(--color-foreground-muted);
2069
2089
  }
2070
- .disabled\:text-roman-silver:disabled {
2071
- --tw-text-opacity: 1;
2072
- color: rgb(125 133 151 / var(--tw-text-opacity, 1));
2090
+ .disabled\:bg-surface-raised:disabled {
2091
+ background-color: var(--color-surface-raised);
2073
2092
  }
2074
- .disabled\:text-white\/70:disabled {
2075
- color: rgb(255 255 255 / 0.7);
2093
+ .disabled\:text-foreground-muted:disabled {
2094
+ color: var(--color-foreground-muted);
2076
2095
  }
2077
2096
  .disabled\:opacity-50:disabled {
2078
2097
  opacity: 0.5;
@@ -2128,9 +2147,11 @@ video {
2128
2147
  .data-\[state\=checked\]\:bg-accent[data-state="checked"] {
2129
2148
  background-color: var(--color-accent);
2130
2149
  }
2131
- .data-\[state\=on\]\:bg-ice-dark[data-state="on"] {
2132
- --tw-bg-opacity: 1;
2133
- background-color: rgb(208 227 237 / var(--tw-bg-opacity, 1));
2150
+ .data-\[state\=on\]\:bg-accent[data-state="on"] {
2151
+ background-color: var(--color-accent);
2152
+ }
2153
+ .data-\[state\=on\]\:text-accent-fg[data-state="on"] {
2154
+ color: var(--color-accent-foreground);
2134
2155
  }
2135
2156
  .group[data-state="closed"] .group-data-\[state\=closed\]\:-rotate-90 {
2136
2157
  --tw-rotate: -90deg;
@@ -2140,41 +2161,10 @@ video {
2140
2161
  --tw-rotate: 0deg;
2141
2162
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2142
2163
  }
2143
- .dark\:border-independence:is(.dark *) {
2144
- --tw-border-opacity: 1;
2145
- border-color: rgb(51 65 92 / var(--tw-border-opacity, 1));
2146
- }
2147
- .dark\:border-manatee:is(.dark *) {
2148
- --tw-border-opacity: 1;
2149
- border-color: rgb(151 157 172 / var(--tw-border-opacity, 1));
2150
- }
2151
- .dark\:border-b-independence:is(.dark *) {
2152
- --tw-border-opacity: 1;
2153
- border-bottom-color: rgb(51 65 92 / var(--tw-border-opacity, 1));
2154
- }
2155
2164
  .dark\:bg-independence:is(.dark *) {
2156
2165
  --tw-bg-opacity: 1;
2157
2166
  background-color: rgb(51 65 92 / var(--tw-bg-opacity, 1));
2158
2167
  }
2159
- .dark\:bg-manatee:is(.dark *) {
2160
- --tw-bg-opacity: 1;
2161
- background-color: rgb(151 157 172 / var(--tw-bg-opacity, 1));
2162
- }
2163
- .dark\:bg-midnight-green-eagle-900:is(.dark *) {
2164
- --tw-bg-opacity: 1;
2165
- background-color: rgb(1 62 83 / var(--tw-bg-opacity, 1));
2166
- }
2167
- .dark\:bg-prussian-blue:is(.dark *) {
2168
- --tw-bg-opacity: 1;
2169
- background-color: rgb(0 39 58 / var(--tw-bg-opacity, 1));
2170
- }
2171
- .dark\:bg-white:is(.dark *) {
2172
- --tw-bg-opacity: 1;
2173
- background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
2174
- }
2175
- .dark\:fill-white:is(.dark *) {
2176
- fill: #fff;
2177
- }
2178
2168
  .dark\:stroke-white:is(.dark *) {
2179
2169
  stroke: #fff;
2180
2170
  }
@@ -2186,38 +2176,10 @@ video {
2186
2176
  --tw-text-opacity: 1;
2187
2177
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
2188
2178
  }
2189
- .hover\:dark\:border-ice-dark:is(.dark *):hover {
2190
- --tw-border-opacity: 1;
2191
- border-color: rgb(208 227 237 / var(--tw-border-opacity, 1));
2192
- }
2193
- .dark\:hover\:bg-black-coral:hover:is(.dark *) {
2194
- --tw-bg-opacity: 1;
2195
- background-color: rgb(92 103 125 / var(--tw-bg-opacity, 1));
2196
- }
2197
2179
  .dark\:hover\:bg-independence:hover:is(.dark *) {
2198
2180
  --tw-bg-opacity: 1;
2199
2181
  background-color: rgb(51 65 92 / var(--tw-bg-opacity, 1));
2200
2182
  }
2201
- .dark\:hover\:bg-oxford-blue-700:hover:is(.dark *) {
2202
- --tw-bg-opacity: 1;
2203
- background-color: rgb(0 40 85 / var(--tw-bg-opacity, 1));
2204
- }
2205
- .dark\:hover\:bg-prussian-blue:hover:is(.dark *) {
2206
- --tw-bg-opacity: 1;
2207
- background-color: rgb(0 39 58 / var(--tw-bg-opacity, 1));
2208
- }
2209
- .dark\:active\:bg-independence:active:is(.dark *) {
2210
- --tw-bg-opacity: 1;
2211
- background-color: rgb(51 65 92 / var(--tw-bg-opacity, 1));
2212
- }
2213
- .dark\:disabled\:bg-manatee:disabled:is(.dark *) {
2214
- --tw-bg-opacity: 1;
2215
- background-color: rgb(151 157 172 / var(--tw-bg-opacity, 1));
2216
- }
2217
- .dark\:data-\[state\=on\]\:bg-indigo-dye[data-state="on"]:is(.dark *) {
2218
- --tw-bg-opacity: 1;
2219
- background-color: rgb(1 60 84 / var(--tw-bg-opacity, 1));
2220
- }
2221
2183
  @media (min-width: 768px) {
2222
2184
  .md\:hidden {
2223
2185
  display: none;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@geomak/ui",
3
- "version": "1.7.4",
3
+ "version": "1.8.0",
4
4
  "description": "Oxygen Design System — reusable UI primitives built with Radix UI behaviours and Tailwind CSS styling",
5
5
  "author": "G-MAKROGLOU",
6
6
  "license": "MIT",