@ttt-productions/theme-core 0.2.7 → 0.2.9
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.
|
@@ -976,3 +976,284 @@
|
|
|
976
976
|
width: 2rem;
|
|
977
977
|
color: hsl(var(--foreground));
|
|
978
978
|
}
|
|
979
|
+
|
|
980
|
+
/* =========================================================
|
|
981
|
+
TOAST / NOTIFICATIONS
|
|
982
|
+
========================================================= */
|
|
983
|
+
|
|
984
|
+
/* Toast viewport (container for all toasts) */
|
|
985
|
+
.toast-viewport {
|
|
986
|
+
position: fixed;
|
|
987
|
+
top: 0;
|
|
988
|
+
z-index: 100;
|
|
989
|
+
display: flex;
|
|
990
|
+
max-height: 100vh;
|
|
991
|
+
width: 100%;
|
|
992
|
+
flex-direction: column;
|
|
993
|
+
padding: 1rem;
|
|
994
|
+
gap: 0.5rem;
|
|
995
|
+
pointer-events: none;
|
|
996
|
+
}
|
|
997
|
+
|
|
998
|
+
@media (min-width: 640px) {
|
|
999
|
+
.toast-viewport {
|
|
1000
|
+
bottom: 0;
|
|
1001
|
+
right: 0;
|
|
1002
|
+
top: auto;
|
|
1003
|
+
flex-direction: column-reverse;
|
|
1004
|
+
padding: 1.5rem;
|
|
1005
|
+
max-width: 26rem;
|
|
1006
|
+
}
|
|
1007
|
+
}
|
|
1008
|
+
|
|
1009
|
+
/* Toast root (individual toast) */
|
|
1010
|
+
.toast-root {
|
|
1011
|
+
pointer-events: auto;
|
|
1012
|
+
position: relative;
|
|
1013
|
+
display: flex;
|
|
1014
|
+
width: 100%;
|
|
1015
|
+
align-items: center;
|
|
1016
|
+
justify-content: space-between;
|
|
1017
|
+
gap: 1rem;
|
|
1018
|
+
overflow: hidden;
|
|
1019
|
+
border-radius: 0.75rem;
|
|
1020
|
+
border-width: 2px;
|
|
1021
|
+
padding: 1rem 1.25rem;
|
|
1022
|
+
padding-right: 2.5rem;
|
|
1023
|
+
font-weight: 700;
|
|
1024
|
+
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
1025
|
+
transition-property: all;
|
|
1026
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1027
|
+
transition-duration: 150ms;
|
|
1028
|
+
|
|
1029
|
+
/* Default variant */
|
|
1030
|
+
background-color: hsl(var(--background));
|
|
1031
|
+
border-color: hsl(var(--border));
|
|
1032
|
+
color: hsl(var(--foreground));
|
|
1033
|
+
}
|
|
1034
|
+
|
|
1035
|
+
/* Toast variants */
|
|
1036
|
+
.toast-root[data-variant="success"] {
|
|
1037
|
+
background-color: hsl(142 76% 96%);
|
|
1038
|
+
border-color: hsl(142 76% 36%);
|
|
1039
|
+
color: hsl(142 76% 20%);
|
|
1040
|
+
}
|
|
1041
|
+
|
|
1042
|
+
@media (prefers-color-scheme: dark) {
|
|
1043
|
+
.toast-root[data-variant="success"] {
|
|
1044
|
+
background-color: hsl(142 76% 10%);
|
|
1045
|
+
border-color: hsl(142 76% 36%);
|
|
1046
|
+
color: hsl(142 76% 90%);
|
|
1047
|
+
}
|
|
1048
|
+
}
|
|
1049
|
+
|
|
1050
|
+
.toast-root[data-variant="destructive"] {
|
|
1051
|
+
background-color: hsl(0 84% 96%);
|
|
1052
|
+
border-color: hsl(0 84% 60%);
|
|
1053
|
+
color: hsl(0 84% 20%);
|
|
1054
|
+
}
|
|
1055
|
+
|
|
1056
|
+
@media (prefers-color-scheme: dark) {
|
|
1057
|
+
.toast-root[data-variant="destructive"] {
|
|
1058
|
+
background-color: hsl(0 84% 10%);
|
|
1059
|
+
border-color: hsl(0 84% 60%);
|
|
1060
|
+
color: hsl(0 84% 90%);
|
|
1061
|
+
}
|
|
1062
|
+
}
|
|
1063
|
+
|
|
1064
|
+
.toast-root[data-variant="warning"] {
|
|
1065
|
+
background-color: hsl(38 92% 96%);
|
|
1066
|
+
border-color: hsl(38 92% 50%);
|
|
1067
|
+
color: hsl(38 92% 20%);
|
|
1068
|
+
}
|
|
1069
|
+
|
|
1070
|
+
@media (prefers-color-scheme: dark) {
|
|
1071
|
+
.toast-root[data-variant="warning"] {
|
|
1072
|
+
background-color: hsl(38 92% 10%);
|
|
1073
|
+
border-color: hsl(38 92% 50%);
|
|
1074
|
+
color: hsl(38 92% 90%);
|
|
1075
|
+
}
|
|
1076
|
+
}
|
|
1077
|
+
|
|
1078
|
+
/* High contrast mode */
|
|
1079
|
+
@media (prefers-contrast: more) {
|
|
1080
|
+
.toast-root {
|
|
1081
|
+
border-width: 3px;
|
|
1082
|
+
}
|
|
1083
|
+
|
|
1084
|
+
.toast-root[data-variant="success"] {
|
|
1085
|
+
background-color: hsl(142 76% 96%);
|
|
1086
|
+
border-color: hsl(142 76% 20%);
|
|
1087
|
+
color: hsl(142 76% 10%);
|
|
1088
|
+
}
|
|
1089
|
+
|
|
1090
|
+
.toast-root[data-variant="destructive"] {
|
|
1091
|
+
background-color: hsl(0 84% 96%);
|
|
1092
|
+
border-color: hsl(0 84% 40%);
|
|
1093
|
+
color: hsl(0 84% 10%);
|
|
1094
|
+
}
|
|
1095
|
+
|
|
1096
|
+
.toast-root[data-variant="warning"] {
|
|
1097
|
+
background-color: hsl(38 92% 96%);
|
|
1098
|
+
border-color: hsl(38 92% 30%);
|
|
1099
|
+
color: hsl(38 92% 10%);
|
|
1100
|
+
}
|
|
1101
|
+
}
|
|
1102
|
+
|
|
1103
|
+
@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
|
|
1104
|
+
.toast-root[data-variant="success"] {
|
|
1105
|
+
background-color: hsl(142 76% 10%);
|
|
1106
|
+
border-color: hsl(142 76% 60%);
|
|
1107
|
+
color: hsl(142 76% 98%);
|
|
1108
|
+
}
|
|
1109
|
+
|
|
1110
|
+
.toast-root[data-variant="destructive"] {
|
|
1111
|
+
background-color: hsl(0 84% 10%);
|
|
1112
|
+
border-color: hsl(0 84% 70%);
|
|
1113
|
+
color: hsl(0 84% 98%);
|
|
1114
|
+
}
|
|
1115
|
+
|
|
1116
|
+
.toast-root[data-variant="warning"] {
|
|
1117
|
+
background-color: hsl(38 92% 10%);
|
|
1118
|
+
border-color: hsl(38 92% 60%);
|
|
1119
|
+
color: hsl(38 92% 98%);
|
|
1120
|
+
}
|
|
1121
|
+
}
|
|
1122
|
+
|
|
1123
|
+
/* Toast animations */
|
|
1124
|
+
.toast-root[data-state="open"] {
|
|
1125
|
+
animation: toast-slide-in 150ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
1126
|
+
}
|
|
1127
|
+
|
|
1128
|
+
.toast-root[data-state="closed"] {
|
|
1129
|
+
animation: toast-hide 100ms ease-in;
|
|
1130
|
+
}
|
|
1131
|
+
|
|
1132
|
+
.toast-root[data-swipe="move"] {
|
|
1133
|
+
transform: translateX(var(--radix-toast-swipe-move-x));
|
|
1134
|
+
}
|
|
1135
|
+
|
|
1136
|
+
.toast-root[data-swipe="cancel"] {
|
|
1137
|
+
transform: translateX(0);
|
|
1138
|
+
transition: transform 200ms ease-out;
|
|
1139
|
+
}
|
|
1140
|
+
|
|
1141
|
+
.toast-root[data-swipe="end"] {
|
|
1142
|
+
animation: toast-swipe-out 100ms ease-out;
|
|
1143
|
+
}
|
|
1144
|
+
|
|
1145
|
+
@keyframes toast-slide-in {
|
|
1146
|
+
from {
|
|
1147
|
+
transform: translateX(calc(100% + 1rem));
|
|
1148
|
+
}
|
|
1149
|
+
to {
|
|
1150
|
+
transform: translateX(0);
|
|
1151
|
+
}
|
|
1152
|
+
}
|
|
1153
|
+
|
|
1154
|
+
@keyframes toast-hide {
|
|
1155
|
+
from {
|
|
1156
|
+
opacity: 1;
|
|
1157
|
+
}
|
|
1158
|
+
to {
|
|
1159
|
+
opacity: 0;
|
|
1160
|
+
}
|
|
1161
|
+
}
|
|
1162
|
+
|
|
1163
|
+
@keyframes toast-swipe-out {
|
|
1164
|
+
from {
|
|
1165
|
+
transform: translateX(var(--radix-toast-swipe-end-x));
|
|
1166
|
+
}
|
|
1167
|
+
to {
|
|
1168
|
+
transform: translateX(calc(100% + 1rem));
|
|
1169
|
+
}
|
|
1170
|
+
}
|
|
1171
|
+
|
|
1172
|
+
/* Progress bar (countdown) */
|
|
1173
|
+
.toast-progress {
|
|
1174
|
+
position: absolute;
|
|
1175
|
+
bottom: 0;
|
|
1176
|
+
left: 0;
|
|
1177
|
+
height: 0.25rem;
|
|
1178
|
+
width: 100%;
|
|
1179
|
+
transform-origin: left;
|
|
1180
|
+
animation: toast-progress-shrink var(--toast-duration, 5000ms) linear forwards;
|
|
1181
|
+
}
|
|
1182
|
+
|
|
1183
|
+
.toast-root[data-variant="success"] .toast-progress {
|
|
1184
|
+
background-color: hsl(142 76% 36%);
|
|
1185
|
+
}
|
|
1186
|
+
|
|
1187
|
+
.toast-root[data-variant="destructive"] .toast-progress {
|
|
1188
|
+
background-color: hsl(0 84% 60%);
|
|
1189
|
+
}
|
|
1190
|
+
|
|
1191
|
+
.toast-root[data-variant="warning"] .toast-progress {
|
|
1192
|
+
background-color: hsl(38 92% 50%);
|
|
1193
|
+
}
|
|
1194
|
+
|
|
1195
|
+
.toast-root:not([data-variant]) .toast-progress {
|
|
1196
|
+
background-color: hsl(var(--primary));
|
|
1197
|
+
}
|
|
1198
|
+
|
|
1199
|
+
@keyframes toast-progress-shrink {
|
|
1200
|
+
from {
|
|
1201
|
+
transform: scaleX(1);
|
|
1202
|
+
}
|
|
1203
|
+
to {
|
|
1204
|
+
transform: scaleX(0);
|
|
1205
|
+
}
|
|
1206
|
+
}
|
|
1207
|
+
|
|
1208
|
+
/* Pause progress on hover */
|
|
1209
|
+
.toast-root:hover .toast-progress {
|
|
1210
|
+
animation-play-state: paused;
|
|
1211
|
+
}
|
|
1212
|
+
|
|
1213
|
+
/* Dismiss button */
|
|
1214
|
+
.toast-dismiss {
|
|
1215
|
+
position: absolute;
|
|
1216
|
+
right: 0.5rem;
|
|
1217
|
+
top: 0.5rem;
|
|
1218
|
+
border-radius: 0.375rem;
|
|
1219
|
+
padding: 0.25rem;
|
|
1220
|
+
opacity: 0.7;
|
|
1221
|
+
transition-property: opacity;
|
|
1222
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1223
|
+
transition-duration: 150ms;
|
|
1224
|
+
color: inherit;
|
|
1225
|
+
background-color: transparent;
|
|
1226
|
+
border: none;
|
|
1227
|
+
cursor: pointer;
|
|
1228
|
+
}
|
|
1229
|
+
|
|
1230
|
+
.toast-dismiss:hover {
|
|
1231
|
+
opacity: 1;
|
|
1232
|
+
}
|
|
1233
|
+
|
|
1234
|
+
.toast-dismiss:focus {
|
|
1235
|
+
outline: 2px solid hsl(var(--ring));
|
|
1236
|
+
outline-offset: 2px;
|
|
1237
|
+
}
|
|
1238
|
+
|
|
1239
|
+
/* Mobile adjustments */
|
|
1240
|
+
@media (max-width: 639px) {
|
|
1241
|
+
.toast-viewport {
|
|
1242
|
+
left: 0;
|
|
1243
|
+
right: 0;
|
|
1244
|
+
padding: 1rem;
|
|
1245
|
+
}
|
|
1246
|
+
|
|
1247
|
+
.toast-root[data-state="open"] {
|
|
1248
|
+
animation: toast-slide-in-mobile 150ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
1249
|
+
}
|
|
1250
|
+
|
|
1251
|
+
@keyframes toast-slide-in-mobile {
|
|
1252
|
+
from {
|
|
1253
|
+
transform: translateY(-100%);
|
|
1254
|
+
}
|
|
1255
|
+
to {
|
|
1256
|
+
transform: translateY(0);
|
|
1257
|
+
}
|
|
1258
|
+
}
|
|
1259
|
+
}
|
package/dist/theme-provider.d.ts
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import
|
|
2
|
-
export declare function ThemeProvider({ children }:
|
|
3
|
-
children: React.ReactNode;
|
|
4
|
-
}): import("react/jsx-runtime").JSX.Element;
|
|
1
|
+
import { type ThemeProviderProps } from "next-themes";
|
|
2
|
+
export declare function ThemeProvider({ children, ...props }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
5
3
|
//# sourceMappingURL=theme-provider.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../src/theme-provider.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../src/theme-provider.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAuC,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAsB3F,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAgBvE"}
|
package/dist/theme-provider.js
CHANGED
|
@@ -18,11 +18,11 @@ function warnMissingTokens() {
|
|
|
18
18
|
`Define these in the consuming app (brand contract)`);
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
|
-
export function ThemeProvider({ children }) {
|
|
21
|
+
export function ThemeProvider({ children, ...props }) {
|
|
22
22
|
React.useEffect(() => {
|
|
23
23
|
if (process.env.NODE_ENV !== "production")
|
|
24
24
|
warnMissingTokens();
|
|
25
25
|
}, []);
|
|
26
|
-
return (_jsx(NextThemesProvider, { attribute: "class", defaultTheme: "system", enableSystem: true, themes: ["light", "dark", "high-contrast"], children: children }));
|
|
26
|
+
return (_jsx(NextThemesProvider, { attribute: "class", defaultTheme: "system", enableSystem: true, themes: ["light", "dark", "high-contrast"], ...props, children: children }));
|
|
27
27
|
}
|
|
28
28
|
//# sourceMappingURL=theme-provider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme-provider.js","sourceRoot":"","sources":["../src/theme-provider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,IAAI,kBAAkB,
|
|
1
|
+
{"version":3,"file":"theme-provider.js","sourceRoot":"","sources":["../src/theme-provider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,IAAI,kBAAkB,EAA2B,MAAM,aAAa,CAAC;AAC3F,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,SAAS,iBAAiB;IACxB,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,OAAO;IAC1C,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;IACtC,MAAM,MAAM,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAEtC,MAAM,OAAO,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;IACxF,MAAM,IAAI,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC;IAEhG,IAAI,OAAO,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;QAClC,sCAAsC;QACtC,OAAO,CAAC,IAAI,CACV,uDAAuD;YACrD,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;YAC1D,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,+BAA+B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;YACvE,oDAAoD,CACvD,CAAC;IACJ,CAAC;AACH,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAsB;IACtE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY;YAAE,iBAAiB,EAAE,CAAC;IACjE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,kBAAkB,IACjB,SAAS,EAAC,OAAO,EACjB,YAAY,EAAC,QAAQ,EACrB,YAAY,QACZ,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,eAAe,CAAC,KACtC,KAAK,YAER,QAAQ,GACU,CACtB,CAAC;AACJ,CAAC"}
|