@vaneui/md 0.3.1-alpha.20251226134656.e7f8e22 → 0.3.1-alpha.20251227133834.f24acb3

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 (2) hide show
  1. package/dist/styles/index.css +289 -286
  2. package/package.json +3 -3
package/dist/styles/index.css CHANGED
@@ -1054,141 +1054,9 @@
1054
1054
  .border-violet-400 {
1055
1055
  border-color: var(--color-violet-400);
1056
1056
  }
1057
- .bg-\(--color-bg-accent\) {
1058
- background-color: var(--color-bg-accent);
1059
- }
1060
- .bg-\(--color-bg-brand\) {
1061
- background-color: var(--color-bg-brand);
1062
- }
1063
- .bg-\(--color-bg-danger\) {
1064
- background-color: var(--color-bg-danger);
1065
- }
1066
- .bg-\(--color-bg-filled-accent\) {
1067
- background-color: var(--color-bg-filled-accent);
1068
- }
1069
- .bg-\(--color-bg-filled-brand\) {
1070
- background-color: var(--color-bg-filled-brand);
1071
- }
1072
- .bg-\(--color-bg-filled-danger\) {
1073
- background-color: var(--color-bg-filled-danger);
1074
- }
1075
- .bg-\(--color-bg-filled-info\) {
1076
- background-color: var(--color-bg-filled-info);
1077
- }
1078
- .bg-\(--color-bg-filled-layout-accent\) {
1079
- background-color: var(--color-bg-filled-layout-accent);
1080
- }
1081
- .bg-\(--color-bg-filled-layout-brand\) {
1082
- background-color: var(--color-bg-filled-layout-brand);
1083
- }
1084
- .bg-\(--color-bg-filled-layout-danger\) {
1085
- background-color: var(--color-bg-filled-layout-danger);
1086
- }
1087
- .bg-\(--color-bg-filled-layout-info\) {
1088
- background-color: var(--color-bg-filled-layout-info);
1089
- }
1090
- .bg-\(--color-bg-filled-layout-primary\) {
1091
- background-color: var(--color-bg-filled-layout-primary);
1092
- }
1093
- .bg-\(--color-bg-filled-layout-secondary\) {
1094
- background-color: var(--color-bg-filled-layout-secondary);
1095
- }
1096
- .bg-\(--color-bg-filled-layout-success\) {
1097
- background-color: var(--color-bg-filled-layout-success);
1098
- }
1099
- .bg-\(--color-bg-filled-layout-tertiary\) {
1100
- background-color: var(--color-bg-filled-layout-tertiary);
1101
- }
1102
- .bg-\(--color-bg-filled-layout-warning\) {
1103
- background-color: var(--color-bg-filled-layout-warning);
1104
- }
1105
1057
  .bg-\(--color-bg-filled-primary\) {
1106
1058
  background-color: var(--color-bg-filled-primary);
1107
1059
  }
1108
- .bg-\(--color-bg-filled-secondary\) {
1109
- background-color: var(--color-bg-filled-secondary);
1110
- }
1111
- .bg-\(--color-bg-filled-success\) {
1112
- background-color: var(--color-bg-filled-success);
1113
- }
1114
- .bg-\(--color-bg-filled-tertiary\) {
1115
- background-color: var(--color-bg-filled-tertiary);
1116
- }
1117
- .bg-\(--color-bg-filled-warning\) {
1118
- background-color: var(--color-bg-filled-warning);
1119
- }
1120
- .bg-\(--color-bg-info\) {
1121
- background-color: var(--color-bg-info);
1122
- }
1123
- .bg-\(--color-bg-layout-accent\) {
1124
- background-color: var(--color-bg-layout-accent);
1125
- }
1126
- .bg-\(--color-bg-layout-brand\) {
1127
- background-color: var(--color-bg-layout-brand);
1128
- }
1129
- .bg-\(--color-bg-layout-danger\) {
1130
- background-color: var(--color-bg-layout-danger);
1131
- }
1132
- .bg-\(--color-bg-layout-info\) {
1133
- background-color: var(--color-bg-layout-info);
1134
- }
1135
- .bg-\(--color-bg-layout-primary\) {
1136
- background-color: var(--color-bg-layout-primary);
1137
- }
1138
- .bg-\(--color-bg-layout-secondary\) {
1139
- background-color: var(--color-bg-layout-secondary);
1140
- }
1141
- .bg-\(--color-bg-layout-success\) {
1142
- background-color: var(--color-bg-layout-success);
1143
- }
1144
- .bg-\(--color-bg-layout-tertiary\) {
1145
- background-color: var(--color-bg-layout-tertiary);
1146
- }
1147
- .bg-\(--color-bg-layout-warning\) {
1148
- background-color: var(--color-bg-layout-warning);
1149
- }
1150
- .bg-\(--color-bg-primary\) {
1151
- background-color: var(--color-bg-primary);
1152
- }
1153
- .bg-\(--color-bg-secondary\) {
1154
- background-color: var(--color-bg-secondary);
1155
- }
1156
- .bg-\(--color-bg-success\) {
1157
- background-color: var(--color-bg-success);
1158
- }
1159
- .bg-\(--color-bg-tertiary\) {
1160
- background-color: var(--color-bg-tertiary);
1161
- }
1162
- .bg-\(--color-bg-warning\) {
1163
- background-color: var(--color-bg-warning);
1164
- }
1165
- .bg-\(--color-border-accent\) {
1166
- background-color: var(--color-border-accent);
1167
- }
1168
- .bg-\(--color-border-brand\) {
1169
- background-color: var(--color-border-brand);
1170
- }
1171
- .bg-\(--color-border-danger\) {
1172
- background-color: var(--color-border-danger);
1173
- }
1174
- .bg-\(--color-border-info\) {
1175
- background-color: var(--color-border-info);
1176
- }
1177
- .bg-\(--color-border-primary\) {
1178
- background-color: var(--color-border-primary);
1179
- }
1180
- .bg-\(--color-border-secondary\) {
1181
- background-color: var(--color-border-secondary);
1182
- }
1183
- .bg-\(--color-border-success\) {
1184
- background-color: var(--color-border-success);
1185
- }
1186
- .bg-\(--color-border-tertiary\) {
1187
- background-color: var(--color-border-tertiary);
1188
- }
1189
- .bg-\(--color-border-warning\) {
1190
- background-color: var(--color-border-warning);
1191
- }
1192
1060
  .bg-blue-500 {
1193
1061
  background-color: var(--color-blue-500);
1194
1062
  }
@@ -1210,9 +1078,6 @@
1210
1078
  .bg-red-100 {
1211
1079
  background-color: var(--color-red-100);
1212
1080
  }
1213
- .bg-transparent {
1214
- background-color: transparent;
1215
- }
1216
1081
  .bg-violet-600 {
1217
1082
  background-color: var(--color-violet-600);
1218
1083
  }
@@ -1962,6 +1827,144 @@
1962
1827
  .\[--size-unit\:5\] {
1963
1828
  --size-unit: 5;
1964
1829
  }
1830
+ .\[background\:transparent\] {
1831
+ background: transparent;
1832
+ }
1833
+ .\[background\:var\(--color-bg-accent\)\] {
1834
+ background: var(--color-bg-accent);
1835
+ }
1836
+ .\[background\:var\(--color-bg-brand\)\] {
1837
+ background: var(--color-bg-brand);
1838
+ }
1839
+ .\[background\:var\(--color-bg-danger\)\] {
1840
+ background: var(--color-bg-danger);
1841
+ }
1842
+ .\[background\:var\(--color-bg-filled-accent\)\] {
1843
+ background: var(--color-bg-filled-accent);
1844
+ }
1845
+ .\[background\:var\(--color-bg-filled-brand\)\] {
1846
+ background: var(--color-bg-filled-brand);
1847
+ }
1848
+ .\[background\:var\(--color-bg-filled-danger\)\] {
1849
+ background: var(--color-bg-filled-danger);
1850
+ }
1851
+ .\[background\:var\(--color-bg-filled-info\)\] {
1852
+ background: var(--color-bg-filled-info);
1853
+ }
1854
+ .\[background\:var\(--color-bg-filled-layout-accent\)\] {
1855
+ background: var(--color-bg-filled-layout-accent);
1856
+ }
1857
+ .\[background\:var\(--color-bg-filled-layout-brand\)\] {
1858
+ background: var(--color-bg-filled-layout-brand);
1859
+ }
1860
+ .\[background\:var\(--color-bg-filled-layout-danger\)\] {
1861
+ background: var(--color-bg-filled-layout-danger);
1862
+ }
1863
+ .\[background\:var\(--color-bg-filled-layout-info\)\] {
1864
+ background: var(--color-bg-filled-layout-info);
1865
+ }
1866
+ .\[background\:var\(--color-bg-filled-layout-primary\)\] {
1867
+ background: var(--color-bg-filled-layout-primary);
1868
+ }
1869
+ .\[background\:var\(--color-bg-filled-layout-secondary\)\] {
1870
+ background: var(--color-bg-filled-layout-secondary);
1871
+ }
1872
+ .\[background\:var\(--color-bg-filled-layout-success\)\] {
1873
+ background: var(--color-bg-filled-layout-success);
1874
+ }
1875
+ .\[background\:var\(--color-bg-filled-layout-tertiary\)\] {
1876
+ background: var(--color-bg-filled-layout-tertiary);
1877
+ }
1878
+ .\[background\:var\(--color-bg-filled-layout-warning\)\] {
1879
+ background: var(--color-bg-filled-layout-warning);
1880
+ }
1881
+ .\[background\:var\(--color-bg-filled-primary\)\] {
1882
+ background: var(--color-bg-filled-primary);
1883
+ }
1884
+ .\[background\:var\(--color-bg-filled-secondary\)\] {
1885
+ background: var(--color-bg-filled-secondary);
1886
+ }
1887
+ .\[background\:var\(--color-bg-filled-success\)\] {
1888
+ background: var(--color-bg-filled-success);
1889
+ }
1890
+ .\[background\:var\(--color-bg-filled-tertiary\)\] {
1891
+ background: var(--color-bg-filled-tertiary);
1892
+ }
1893
+ .\[background\:var\(--color-bg-filled-warning\)\] {
1894
+ background: var(--color-bg-filled-warning);
1895
+ }
1896
+ .\[background\:var\(--color-bg-info\)\] {
1897
+ background: var(--color-bg-info);
1898
+ }
1899
+ .\[background\:var\(--color-bg-layout-accent\)\] {
1900
+ background: var(--color-bg-layout-accent);
1901
+ }
1902
+ .\[background\:var\(--color-bg-layout-brand\)\] {
1903
+ background: var(--color-bg-layout-brand);
1904
+ }
1905
+ .\[background\:var\(--color-bg-layout-danger\)\] {
1906
+ background: var(--color-bg-layout-danger);
1907
+ }
1908
+ .\[background\:var\(--color-bg-layout-info\)\] {
1909
+ background: var(--color-bg-layout-info);
1910
+ }
1911
+ .\[background\:var\(--color-bg-layout-primary\)\] {
1912
+ background: var(--color-bg-layout-primary);
1913
+ }
1914
+ .\[background\:var\(--color-bg-layout-secondary\)\] {
1915
+ background: var(--color-bg-layout-secondary);
1916
+ }
1917
+ .\[background\:var\(--color-bg-layout-success\)\] {
1918
+ background: var(--color-bg-layout-success);
1919
+ }
1920
+ .\[background\:var\(--color-bg-layout-tertiary\)\] {
1921
+ background: var(--color-bg-layout-tertiary);
1922
+ }
1923
+ .\[background\:var\(--color-bg-layout-warning\)\] {
1924
+ background: var(--color-bg-layout-warning);
1925
+ }
1926
+ .\[background\:var\(--color-bg-primary\)\] {
1927
+ background: var(--color-bg-primary);
1928
+ }
1929
+ .\[background\:var\(--color-bg-secondary\)\] {
1930
+ background: var(--color-bg-secondary);
1931
+ }
1932
+ .\[background\:var\(--color-bg-success\)\] {
1933
+ background: var(--color-bg-success);
1934
+ }
1935
+ .\[background\:var\(--color-bg-tertiary\)\] {
1936
+ background: var(--color-bg-tertiary);
1937
+ }
1938
+ .\[background\:var\(--color-bg-warning\)\] {
1939
+ background: var(--color-bg-warning);
1940
+ }
1941
+ .\[background\:var\(--color-border-accent\)\] {
1942
+ background: var(--color-border-accent);
1943
+ }
1944
+ .\[background\:var\(--color-border-brand\)\] {
1945
+ background: var(--color-border-brand);
1946
+ }
1947
+ .\[background\:var\(--color-border-danger\)\] {
1948
+ background: var(--color-border-danger);
1949
+ }
1950
+ .\[background\:var\(--color-border-info\)\] {
1951
+ background: var(--color-border-info);
1952
+ }
1953
+ .\[background\:var\(--color-border-primary\)\] {
1954
+ background: var(--color-border-primary);
1955
+ }
1956
+ .\[background\:var\(--color-border-secondary\)\] {
1957
+ background: var(--color-border-secondary);
1958
+ }
1959
+ .\[background\:var\(--color-border-success\)\] {
1960
+ background: var(--color-border-success);
1961
+ }
1962
+ .\[background\:var\(--color-border-tertiary\)\] {
1963
+ background: var(--color-border-tertiary);
1964
+ }
1965
+ .\[background\:var\(--color-border-warning\)\] {
1966
+ background: var(--color-border-warning);
1967
+ }
1965
1968
  .ring-inset {
1966
1969
  --tw-ring-inset: inset;
1967
1970
  }
@@ -1970,99 +1973,99 @@
1970
1973
  visibility: visible;
1971
1974
  }
1972
1975
  }
1973
- .checked\:bg-\(--color-bg-accent\) {
1976
+ .checked\:\[background\:transparent\] {
1974
1977
  &:checked {
1975
- background-color: var(--color-bg-accent);
1978
+ background: transparent;
1976
1979
  }
1977
1980
  }
1978
- .checked\:bg-\(--color-bg-brand\) {
1981
+ .checked\:\[background\:var\(--color-bg-accent\)\] {
1979
1982
  &:checked {
1980
- background-color: var(--color-bg-brand);
1983
+ background: var(--color-bg-accent);
1981
1984
  }
1982
1985
  }
1983
- .checked\:bg-\(--color-bg-danger\) {
1986
+ .checked\:\[background\:var\(--color-bg-brand\)\] {
1984
1987
  &:checked {
1985
- background-color: var(--color-bg-danger);
1988
+ background: var(--color-bg-brand);
1986
1989
  }
1987
1990
  }
1988
- .checked\:bg-\(--color-bg-filled-accent\) {
1991
+ .checked\:\[background\:var\(--color-bg-danger\)\] {
1989
1992
  &:checked {
1990
- background-color: var(--color-bg-filled-accent);
1993
+ background: var(--color-bg-danger);
1991
1994
  }
1992
1995
  }
1993
- .checked\:bg-\(--color-bg-filled-brand\) {
1996
+ .checked\:\[background\:var\(--color-bg-filled-accent\)\] {
1994
1997
  &:checked {
1995
- background-color: var(--color-bg-filled-brand);
1998
+ background: var(--color-bg-filled-accent);
1996
1999
  }
1997
2000
  }
1998
- .checked\:bg-\(--color-bg-filled-danger\) {
2001
+ .checked\:\[background\:var\(--color-bg-filled-brand\)\] {
1999
2002
  &:checked {
2000
- background-color: var(--color-bg-filled-danger);
2003
+ background: var(--color-bg-filled-brand);
2001
2004
  }
2002
2005
  }
2003
- .checked\:bg-\(--color-bg-filled-info\) {
2006
+ .checked\:\[background\:var\(--color-bg-filled-danger\)\] {
2004
2007
  &:checked {
2005
- background-color: var(--color-bg-filled-info);
2008
+ background: var(--color-bg-filled-danger);
2006
2009
  }
2007
2010
  }
2008
- .checked\:bg-\(--color-bg-filled-primary\) {
2011
+ .checked\:\[background\:var\(--color-bg-filled-info\)\] {
2009
2012
  &:checked {
2010
- background-color: var(--color-bg-filled-primary);
2013
+ background: var(--color-bg-filled-info);
2011
2014
  }
2012
2015
  }
2013
- .checked\:bg-\(--color-bg-filled-secondary\) {
2016
+ .checked\:\[background\:var\(--color-bg-filled-primary\)\] {
2014
2017
  &:checked {
2015
- background-color: var(--color-bg-filled-secondary);
2018
+ background: var(--color-bg-filled-primary);
2016
2019
  }
2017
2020
  }
2018
- .checked\:bg-\(--color-bg-filled-success\) {
2021
+ .checked\:\[background\:var\(--color-bg-filled-secondary\)\] {
2019
2022
  &:checked {
2020
- background-color: var(--color-bg-filled-success);
2023
+ background: var(--color-bg-filled-secondary);
2021
2024
  }
2022
2025
  }
2023
- .checked\:bg-\(--color-bg-filled-tertiary\) {
2026
+ .checked\:\[background\:var\(--color-bg-filled-success\)\] {
2024
2027
  &:checked {
2025
- background-color: var(--color-bg-filled-tertiary);
2028
+ background: var(--color-bg-filled-success);
2026
2029
  }
2027
2030
  }
2028
- .checked\:bg-\(--color-bg-filled-warning\) {
2031
+ .checked\:\[background\:var\(--color-bg-filled-tertiary\)\] {
2029
2032
  &:checked {
2030
- background-color: var(--color-bg-filled-warning);
2033
+ background: var(--color-bg-filled-tertiary);
2031
2034
  }
2032
2035
  }
2033
- .checked\:bg-\(--color-bg-info\) {
2036
+ .checked\:\[background\:var\(--color-bg-filled-warning\)\] {
2034
2037
  &:checked {
2035
- background-color: var(--color-bg-info);
2038
+ background: var(--color-bg-filled-warning);
2036
2039
  }
2037
2040
  }
2038
- .checked\:bg-\(--color-bg-primary\) {
2041
+ .checked\:\[background\:var\(--color-bg-info\)\] {
2039
2042
  &:checked {
2040
- background-color: var(--color-bg-primary);
2043
+ background: var(--color-bg-info);
2041
2044
  }
2042
2045
  }
2043
- .checked\:bg-\(--color-bg-secondary\) {
2046
+ .checked\:\[background\:var\(--color-bg-primary\)\] {
2044
2047
  &:checked {
2045
- background-color: var(--color-bg-secondary);
2048
+ background: var(--color-bg-primary);
2046
2049
  }
2047
2050
  }
2048
- .checked\:bg-\(--color-bg-success\) {
2051
+ .checked\:\[background\:var\(--color-bg-secondary\)\] {
2049
2052
  &:checked {
2050
- background-color: var(--color-bg-success);
2053
+ background: var(--color-bg-secondary);
2051
2054
  }
2052
2055
  }
2053
- .checked\:bg-\(--color-bg-tertiary\) {
2056
+ .checked\:\[background\:var\(--color-bg-success\)\] {
2054
2057
  &:checked {
2055
- background-color: var(--color-bg-tertiary);
2058
+ background: var(--color-bg-success);
2056
2059
  }
2057
2060
  }
2058
- .checked\:bg-\(--color-bg-warning\) {
2061
+ .checked\:\[background\:var\(--color-bg-tertiary\)\] {
2059
2062
  &:checked {
2060
- background-color: var(--color-bg-warning);
2063
+ background: var(--color-bg-tertiary);
2061
2064
  }
2062
2065
  }
2063
- .checked\:bg-transparent {
2066
+ .checked\:\[background\:var\(--color-bg-warning\)\] {
2064
2067
  &:checked {
2065
- background-color: transparent;
2068
+ background: var(--color-bg-warning);
2066
2069
  }
2067
2070
  }
2068
2071
  .hover\:scale-105 {
@@ -2082,226 +2085,226 @@
2082
2085
  }
2083
2086
  }
2084
2087
  }
2085
- .hover\:bg-\(--color-bg-filled-hover-accent\) {
2088
+ .hover\:bg-purple-700 {
2086
2089
  &:hover {
2087
2090
  @media (hover: hover) {
2088
- background-color: var(--color-bg-filled-hover-accent);
2091
+ background-color: var(--color-purple-700);
2089
2092
  }
2090
2093
  }
2091
2094
  }
2092
- .hover\:bg-\(--color-bg-filled-hover-brand\) {
2095
+ .hover\:bg-red-200 {
2093
2096
  &:hover {
2094
2097
  @media (hover: hover) {
2095
- background-color: var(--color-bg-filled-hover-brand);
2098
+ background-color: var(--color-red-200);
2096
2099
  }
2097
2100
  }
2098
2101
  }
2099
- .hover\:bg-\(--color-bg-filled-hover-danger\) {
2102
+ .hover\:text-blue-700 {
2100
2103
  &:hover {
2101
2104
  @media (hover: hover) {
2102
- background-color: var(--color-bg-filled-hover-danger);
2105
+ color: var(--color-blue-700);
2103
2106
  }
2104
2107
  }
2105
2108
  }
2106
- .hover\:bg-\(--color-bg-filled-hover-info\) {
2109
+ .hover\:text-indigo-50 {
2107
2110
  &:hover {
2108
2111
  @media (hover: hover) {
2109
- background-color: var(--color-bg-filled-hover-info);
2112
+ color: var(--color-indigo-50);
2110
2113
  }
2111
2114
  }
2112
2115
  }
2113
- .hover\:bg-\(--color-bg-filled-hover-primary\) {
2116
+ .hover\:underline {
2114
2117
  &:hover {
2115
2118
  @media (hover: hover) {
2116
- background-color: var(--color-bg-filled-hover-primary);
2119
+ text-decoration-line: underline;
2117
2120
  }
2118
2121
  }
2119
2122
  }
2120
- .hover\:bg-\(--color-bg-filled-hover-secondary\) {
2123
+ .hover\:opacity-80 {
2121
2124
  &:hover {
2122
2125
  @media (hover: hover) {
2123
- background-color: var(--color-bg-filled-hover-secondary);
2126
+ opacity: 80%;
2124
2127
  }
2125
2128
  }
2126
2129
  }
2127
- .hover\:bg-\(--color-bg-filled-hover-success\) {
2130
+ .hover\:shadow-lg {
2128
2131
  &:hover {
2129
2132
  @media (hover: hover) {
2130
- background-color: var(--color-bg-filled-hover-success);
2133
+ --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2134
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2131
2135
  }
2132
2136
  }
2133
2137
  }
2134
- .hover\:bg-\(--color-bg-filled-hover-tertiary\) {
2138
+ .hover\:shadow-md {
2135
2139
  &:hover {
2136
2140
  @media (hover: hover) {
2137
- background-color: var(--color-bg-filled-hover-tertiary);
2141
+ --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2142
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2138
2143
  }
2139
2144
  }
2140
2145
  }
2141
- .hover\:bg-\(--color-bg-filled-hover-warning\) {
2146
+ .hover\:shadow-sm {
2142
2147
  &:hover {
2143
2148
  @media (hover: hover) {
2144
- background-color: var(--color-bg-filled-hover-warning);
2149
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2150
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2145
2151
  }
2146
2152
  }
2147
2153
  }
2148
- .hover\:bg-\(--color-bg-hover-accent\) {
2154
+ .hover\:shadow-xl {
2149
2155
  &:hover {
2150
2156
  @media (hover: hover) {
2151
- background-color: var(--color-bg-hover-accent);
2157
+ --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2158
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2152
2159
  }
2153
2160
  }
2154
2161
  }
2155
- .hover\:bg-\(--color-bg-hover-brand\) {
2162
+ .hover\:shadow-xs {
2156
2163
  &:hover {
2157
2164
  @media (hover: hover) {
2158
- background-color: var(--color-bg-hover-brand);
2165
+ --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
2166
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2159
2167
  }
2160
2168
  }
2161
2169
  }
2162
- .hover\:bg-\(--color-bg-hover-danger\) {
2170
+ .hover\:ring {
2163
2171
  &:hover {
2164
2172
  @media (hover: hover) {
2165
- background-color: var(--color-bg-hover-danger);
2173
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2174
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2166
2175
  }
2167
2176
  }
2168
2177
  }
2169
- .hover\:bg-\(--color-bg-hover-info\) {
2178
+ .hover\:\[background\:transparent\] {
2170
2179
  &:hover {
2171
2180
  @media (hover: hover) {
2172
- background-color: var(--color-bg-hover-info);
2181
+ background: transparent;
2173
2182
  }
2174
2183
  }
2175
2184
  }
2176
- .hover\:bg-\(--color-bg-hover-primary\) {
2185
+ .hover\:\[background\:var\(--color-bg-filled-hover-accent\)\] {
2177
2186
  &:hover {
2178
2187
  @media (hover: hover) {
2179
- background-color: var(--color-bg-hover-primary);
2188
+ background: var(--color-bg-filled-hover-accent);
2180
2189
  }
2181
2190
  }
2182
2191
  }
2183
- .hover\:bg-\(--color-bg-hover-secondary\) {
2192
+ .hover\:\[background\:var\(--color-bg-filled-hover-brand\)\] {
2184
2193
  &:hover {
2185
2194
  @media (hover: hover) {
2186
- background-color: var(--color-bg-hover-secondary);
2195
+ background: var(--color-bg-filled-hover-brand);
2187
2196
  }
2188
2197
  }
2189
2198
  }
2190
- .hover\:bg-\(--color-bg-hover-success\) {
2199
+ .hover\:\[background\:var\(--color-bg-filled-hover-danger\)\] {
2191
2200
  &:hover {
2192
2201
  @media (hover: hover) {
2193
- background-color: var(--color-bg-hover-success);
2202
+ background: var(--color-bg-filled-hover-danger);
2194
2203
  }
2195
2204
  }
2196
2205
  }
2197
- .hover\:bg-\(--color-bg-hover-tertiary\) {
2206
+ .hover\:\[background\:var\(--color-bg-filled-hover-info\)\] {
2198
2207
  &:hover {
2199
2208
  @media (hover: hover) {
2200
- background-color: var(--color-bg-hover-tertiary);
2209
+ background: var(--color-bg-filled-hover-info);
2201
2210
  }
2202
2211
  }
2203
2212
  }
2204
- .hover\:bg-\(--color-bg-hover-warning\) {
2213
+ .hover\:\[background\:var\(--color-bg-filled-hover-primary\)\] {
2205
2214
  &:hover {
2206
2215
  @media (hover: hover) {
2207
- background-color: var(--color-bg-hover-warning);
2216
+ background: var(--color-bg-filled-hover-primary);
2208
2217
  }
2209
2218
  }
2210
2219
  }
2211
- .hover\:bg-purple-700 {
2220
+ .hover\:\[background\:var\(--color-bg-filled-hover-secondary\)\] {
2212
2221
  &:hover {
2213
2222
  @media (hover: hover) {
2214
- background-color: var(--color-purple-700);
2223
+ background: var(--color-bg-filled-hover-secondary);
2215
2224
  }
2216
2225
  }
2217
2226
  }
2218
- .hover\:bg-red-200 {
2227
+ .hover\:\[background\:var\(--color-bg-filled-hover-success\)\] {
2219
2228
  &:hover {
2220
2229
  @media (hover: hover) {
2221
- background-color: var(--color-red-200);
2230
+ background: var(--color-bg-filled-hover-success);
2222
2231
  }
2223
2232
  }
2224
2233
  }
2225
- .hover\:bg-transparent {
2234
+ .hover\:\[background\:var\(--color-bg-filled-hover-tertiary\)\] {
2226
2235
  &:hover {
2227
2236
  @media (hover: hover) {
2228
- background-color: transparent;
2237
+ background: var(--color-bg-filled-hover-tertiary);
2229
2238
  }
2230
2239
  }
2231
2240
  }
2232
- .hover\:text-blue-700 {
2241
+ .hover\:\[background\:var\(--color-bg-filled-hover-warning\)\] {
2233
2242
  &:hover {
2234
2243
  @media (hover: hover) {
2235
- color: var(--color-blue-700);
2244
+ background: var(--color-bg-filled-hover-warning);
2236
2245
  }
2237
2246
  }
2238
2247
  }
2239
- .hover\:text-indigo-50 {
2248
+ .hover\:\[background\:var\(--color-bg-hover-accent\)\] {
2240
2249
  &:hover {
2241
2250
  @media (hover: hover) {
2242
- color: var(--color-indigo-50);
2251
+ background: var(--color-bg-hover-accent);
2243
2252
  }
2244
2253
  }
2245
2254
  }
2246
- .hover\:underline {
2255
+ .hover\:\[background\:var\(--color-bg-hover-brand\)\] {
2247
2256
  &:hover {
2248
2257
  @media (hover: hover) {
2249
- text-decoration-line: underline;
2258
+ background: var(--color-bg-hover-brand);
2250
2259
  }
2251
2260
  }
2252
2261
  }
2253
- .hover\:opacity-80 {
2262
+ .hover\:\[background\:var\(--color-bg-hover-danger\)\] {
2254
2263
  &:hover {
2255
2264
  @media (hover: hover) {
2256
- opacity: 80%;
2265
+ background: var(--color-bg-hover-danger);
2257
2266
  }
2258
2267
  }
2259
2268
  }
2260
- .hover\:shadow-lg {
2269
+ .hover\:\[background\:var\(--color-bg-hover-info\)\] {
2261
2270
  &:hover {
2262
2271
  @media (hover: hover) {
2263
- --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2264
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2272
+ background: var(--color-bg-hover-info);
2265
2273
  }
2266
2274
  }
2267
2275
  }
2268
- .hover\:shadow-md {
2276
+ .hover\:\[background\:var\(--color-bg-hover-primary\)\] {
2269
2277
  &:hover {
2270
2278
  @media (hover: hover) {
2271
- --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2272
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2279
+ background: var(--color-bg-hover-primary);
2273
2280
  }
2274
2281
  }
2275
2282
  }
2276
- .hover\:shadow-sm {
2283
+ .hover\:\[background\:var\(--color-bg-hover-secondary\)\] {
2277
2284
  &:hover {
2278
2285
  @media (hover: hover) {
2279
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2280
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2286
+ background: var(--color-bg-hover-secondary);
2281
2287
  }
2282
2288
  }
2283
2289
  }
2284
- .hover\:shadow-xl {
2290
+ .hover\:\[background\:var\(--color-bg-hover-success\)\] {
2285
2291
  &:hover {
2286
2292
  @media (hover: hover) {
2287
- --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2288
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2293
+ background: var(--color-bg-hover-success);
2289
2294
  }
2290
2295
  }
2291
2296
  }
2292
- .hover\:shadow-xs {
2297
+ .hover\:\[background\:var\(--color-bg-hover-tertiary\)\] {
2293
2298
  &:hover {
2294
2299
  @media (hover: hover) {
2295
- --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
2296
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2300
+ background: var(--color-bg-hover-tertiary);
2297
2301
  }
2298
2302
  }
2299
2303
  }
2300
- .hover\:ring {
2304
+ .hover\:\[background\:var\(--color-bg-hover-warning\)\] {
2301
2305
  &:hover {
2302
2306
  @media (hover: hover) {
2303
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2304
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2307
+ background: var(--color-bg-hover-warning);
2305
2308
  }
2306
2309
  }
2307
2310
  }
@@ -2423,115 +2426,115 @@
2423
2426
  border-color: var(--color-green-700);
2424
2427
  }
2425
2428
  }
2426
- .active\:bg-\(--color-bg-active-accent\) {
2429
+ .active\:bg-red-300 {
2427
2430
  &:active {
2428
- background-color: var(--color-bg-active-accent);
2431
+ background-color: var(--color-red-300);
2429
2432
  }
2430
2433
  }
2431
- .active\:bg-\(--color-bg-active-brand\) {
2434
+ .active\:text-blue-900 {
2432
2435
  &:active {
2433
- background-color: var(--color-bg-active-brand);
2436
+ color: var(--color-blue-900);
2434
2437
  }
2435
2438
  }
2436
- .active\:bg-\(--color-bg-active-danger\) {
2439
+ .active\:ring {
2437
2440
  &:active {
2438
- background-color: var(--color-bg-active-danger);
2441
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2442
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2439
2443
  }
2440
2444
  }
2441
- .active\:bg-\(--color-bg-active-info\) {
2445
+ .active\:\[background\:transparent\] {
2442
2446
  &:active {
2443
- background-color: var(--color-bg-active-info);
2447
+ background: transparent;
2444
2448
  }
2445
2449
  }
2446
- .active\:bg-\(--color-bg-active-primary\) {
2450
+ .active\:\[background\:var\(--color-bg-active-accent\)\] {
2447
2451
  &:active {
2448
- background-color: var(--color-bg-active-primary);
2452
+ background: var(--color-bg-active-accent);
2449
2453
  }
2450
2454
  }
2451
- .active\:bg-\(--color-bg-active-secondary\) {
2455
+ .active\:\[background\:var\(--color-bg-active-brand\)\] {
2452
2456
  &:active {
2453
- background-color: var(--color-bg-active-secondary);
2457
+ background: var(--color-bg-active-brand);
2454
2458
  }
2455
2459
  }
2456
- .active\:bg-\(--color-bg-active-success\) {
2460
+ .active\:\[background\:var\(--color-bg-active-danger\)\] {
2457
2461
  &:active {
2458
- background-color: var(--color-bg-active-success);
2462
+ background: var(--color-bg-active-danger);
2459
2463
  }
2460
2464
  }
2461
- .active\:bg-\(--color-bg-active-tertiary\) {
2465
+ .active\:\[background\:var\(--color-bg-active-info\)\] {
2462
2466
  &:active {
2463
- background-color: var(--color-bg-active-tertiary);
2467
+ background: var(--color-bg-active-info);
2464
2468
  }
2465
2469
  }
2466
- .active\:bg-\(--color-bg-active-warning\) {
2470
+ .active\:\[background\:var\(--color-bg-active-primary\)\] {
2467
2471
  &:active {
2468
- background-color: var(--color-bg-active-warning);
2472
+ background: var(--color-bg-active-primary);
2469
2473
  }
2470
2474
  }
2471
- .active\:bg-\(--color-bg-filled-active-accent\) {
2475
+ .active\:\[background\:var\(--color-bg-active-secondary\)\] {
2472
2476
  &:active {
2473
- background-color: var(--color-bg-filled-active-accent);
2477
+ background: var(--color-bg-active-secondary);
2474
2478
  }
2475
2479
  }
2476
- .active\:bg-\(--color-bg-filled-active-brand\) {
2480
+ .active\:\[background\:var\(--color-bg-active-success\)\] {
2477
2481
  &:active {
2478
- background-color: var(--color-bg-filled-active-brand);
2482
+ background: var(--color-bg-active-success);
2479
2483
  }
2480
2484
  }
2481
- .active\:bg-\(--color-bg-filled-active-danger\) {
2485
+ .active\:\[background\:var\(--color-bg-active-tertiary\)\] {
2482
2486
  &:active {
2483
- background-color: var(--color-bg-filled-active-danger);
2487
+ background: var(--color-bg-active-tertiary);
2484
2488
  }
2485
2489
  }
2486
- .active\:bg-\(--color-bg-filled-active-info\) {
2490
+ .active\:\[background\:var\(--color-bg-active-warning\)\] {
2487
2491
  &:active {
2488
- background-color: var(--color-bg-filled-active-info);
2492
+ background: var(--color-bg-active-warning);
2489
2493
  }
2490
2494
  }
2491
- .active\:bg-\(--color-bg-filled-active-primary\) {
2495
+ .active\:\[background\:var\(--color-bg-filled-active-accent\)\] {
2492
2496
  &:active {
2493
- background-color: var(--color-bg-filled-active-primary);
2497
+ background: var(--color-bg-filled-active-accent);
2494
2498
  }
2495
2499
  }
2496
- .active\:bg-\(--color-bg-filled-active-secondary\) {
2500
+ .active\:\[background\:var\(--color-bg-filled-active-brand\)\] {
2497
2501
  &:active {
2498
- background-color: var(--color-bg-filled-active-secondary);
2502
+ background: var(--color-bg-filled-active-brand);
2499
2503
  }
2500
2504
  }
2501
- .active\:bg-\(--color-bg-filled-active-success\) {
2505
+ .active\:\[background\:var\(--color-bg-filled-active-danger\)\] {
2502
2506
  &:active {
2503
- background-color: var(--color-bg-filled-active-success);
2507
+ background: var(--color-bg-filled-active-danger);
2504
2508
  }
2505
2509
  }
2506
- .active\:bg-\(--color-bg-filled-active-tertiary\) {
2510
+ .active\:\[background\:var\(--color-bg-filled-active-info\)\] {
2507
2511
  &:active {
2508
- background-color: var(--color-bg-filled-active-tertiary);
2512
+ background: var(--color-bg-filled-active-info);
2509
2513
  }
2510
2514
  }
2511
- .active\:bg-\(--color-bg-filled-active-warning\) {
2515
+ .active\:\[background\:var\(--color-bg-filled-active-primary\)\] {
2512
2516
  &:active {
2513
- background-color: var(--color-bg-filled-active-warning);
2517
+ background: var(--color-bg-filled-active-primary);
2514
2518
  }
2515
2519
  }
2516
- .active\:bg-red-300 {
2520
+ .active\:\[background\:var\(--color-bg-filled-active-secondary\)\] {
2517
2521
  &:active {
2518
- background-color: var(--color-red-300);
2522
+ background: var(--color-bg-filled-active-secondary);
2519
2523
  }
2520
2524
  }
2521
- .active\:bg-transparent {
2525
+ .active\:\[background\:var\(--color-bg-filled-active-success\)\] {
2522
2526
  &:active {
2523
- background-color: transparent;
2527
+ background: var(--color-bg-filled-active-success);
2524
2528
  }
2525
2529
  }
2526
- .active\:text-blue-900 {
2530
+ .active\:\[background\:var\(--color-bg-filled-active-tertiary\)\] {
2527
2531
  &:active {
2528
- color: var(--color-blue-900);
2532
+ background: var(--color-bg-filled-active-tertiary);
2529
2533
  }
2530
2534
  }
2531
- .active\:ring {
2535
+ .active\:\[background\:var\(--color-bg-filled-active-warning\)\] {
2532
2536
  &:active {
2533
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2534
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2537
+ background: var(--color-bg-filled-active-warning);
2535
2538
  }
2536
2539
  }
2537
2540
  .active\:ring-inset {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaneui/md",
3
- "version": "0.3.1-alpha.20251226134656.e7f8e22",
3
+ "version": "0.3.1-alpha.20251227133834.f24acb3",
4
4
  "description": "Markdown component for VaneUI - A React component that renders markdown using @vaneui/ui components",
5
5
  "author": "",
6
6
  "license": "ISC",
@@ -48,7 +48,7 @@
48
48
  "playground": "npm run playground:install && npm run playground:dev"
49
49
  },
50
50
  "peerDependencies": {
51
- "@vaneui/ui": "0.3.1-alpha.20251226133439.1de14bb",
51
+ "@vaneui/ui": "0.3.1-alpha.20251227133042.329eebf",
52
52
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
53
53
  "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
54
54
  },
@@ -63,7 +63,7 @@
63
63
  "@types/jest": "^29.5.14",
64
64
  "@types/react": "^19.1.0",
65
65
  "@types/react-dom": "^19.1.0",
66
- "@vaneui/ui": "0.3.1-alpha.20251226133439.1de14bb",
66
+ "@vaneui/ui": "0.3.1-alpha.20251227133042.329eebf",
67
67
  "jest": "^29.7.0",
68
68
  "jest-environment-jsdom": "^30.0.4",
69
69
  "jsdom": "^26.1.0",