@embedreach/components 0.1.30 → 0.1.31
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/chunks/index.js +379 -379
- package/dist/index.umd.js +379 -379
- package/package.json +1 -1
package/dist/chunks/index.js
CHANGED
|
@@ -7984,192 +7984,6 @@ const { Provider: Provider$3 } = createDataContext(
|
|
|
7984
7984
|
},
|
|
7985
7985
|
authListeners
|
|
7986
7986
|
);
|
|
7987
|
-
const normalizeColor = (color2) => {
|
|
7988
|
-
const div = document.createElement("div");
|
|
7989
|
-
div.style.color = color2;
|
|
7990
|
-
document.body.appendChild(div);
|
|
7991
|
-
const computed = window.getComputedStyle(div).color;
|
|
7992
|
-
document.body.removeChild(div);
|
|
7993
|
-
return computed;
|
|
7994
|
-
};
|
|
7995
|
-
const isValidColor = (color2) => {
|
|
7996
|
-
if (/^\d+\s+\d+(?:\.\d+)?%\s+\d+(?:\.\d+)?%$/.test(color2.trim())) {
|
|
7997
|
-
return true;
|
|
7998
|
-
}
|
|
7999
|
-
const div = document.createElement("div");
|
|
8000
|
-
const prevColor = div.style.color;
|
|
8001
|
-
div.style.color = color2;
|
|
8002
|
-
return div.style.color !== prevColor;
|
|
8003
|
-
};
|
|
8004
|
-
const rgbToShadcnHsl = (r2, g2, b3) => {
|
|
8005
|
-
r2 /= 255;
|
|
8006
|
-
g2 /= 255;
|
|
8007
|
-
b3 /= 255;
|
|
8008
|
-
const max2 = Math.max(r2, g2, b3);
|
|
8009
|
-
const min2 = Math.min(r2, g2, b3);
|
|
8010
|
-
let h4 = 0, s3 = 0;
|
|
8011
|
-
const l2 = (max2 + min2) / 2;
|
|
8012
|
-
if (max2 !== min2) {
|
|
8013
|
-
const d4 = max2 - min2;
|
|
8014
|
-
s3 = l2 > 0.5 ? d4 / (2 - max2 - min2) : d4 / (max2 + min2);
|
|
8015
|
-
switch (max2) {
|
|
8016
|
-
case r2:
|
|
8017
|
-
h4 = (g2 - b3) / d4 + (g2 < b3 ? 6 : 0);
|
|
8018
|
-
break;
|
|
8019
|
-
case g2:
|
|
8020
|
-
h4 = (b3 - r2) / d4 + 2;
|
|
8021
|
-
break;
|
|
8022
|
-
case b3:
|
|
8023
|
-
h4 = (r2 - g2) / d4 + 4;
|
|
8024
|
-
break;
|
|
8025
|
-
}
|
|
8026
|
-
h4 *= 60;
|
|
8027
|
-
}
|
|
8028
|
-
return `${Math.round(h4)} ${Math.round(s3 * 100)}% ${Math.round(l2 * 100)}%`;
|
|
8029
|
-
};
|
|
8030
|
-
const extractRgb = (rgbColor) => {
|
|
8031
|
-
const matches = rgbColor.match(/\d+/g);
|
|
8032
|
-
if (!matches || matches.length < 3) {
|
|
8033
|
-
throw new Error(`Invalid RGB color format: ${rgbColor}`);
|
|
8034
|
-
}
|
|
8035
|
-
return [
|
|
8036
|
-
parseInt(matches[0], 10),
|
|
8037
|
-
parseInt(matches[1], 10),
|
|
8038
|
-
parseInt(matches[2], 10)
|
|
8039
|
-
];
|
|
8040
|
-
};
|
|
8041
|
-
const toShadcnFormat = (color2) => {
|
|
8042
|
-
if (/^\d+\s+\d+(?:\.\d+)?%\s+\d+(?:\.\d+)?%$/.test(color2.trim())) {
|
|
8043
|
-
return color2.trim();
|
|
8044
|
-
}
|
|
8045
|
-
try {
|
|
8046
|
-
const rgbColor = normalizeColor(color2);
|
|
8047
|
-
const [r2, g2, b3] = extractRgb(rgbColor);
|
|
8048
|
-
return rgbToShadcnHsl(r2, g2, b3);
|
|
8049
|
-
} catch (e4) {
|
|
8050
|
-
console.warn(`Failed to convert color to shadcn format: ${color2}`, e4);
|
|
8051
|
-
return color2;
|
|
8052
|
-
}
|
|
8053
|
-
};
|
|
8054
|
-
const DEFAULT_THEME_STYLES = {
|
|
8055
|
-
primary: "hsl(222.2 47.4% 11.2%)",
|
|
8056
|
-
background: "hsl(0 0% 100%)",
|
|
8057
|
-
foreground: "hsl(222.2 47.4% 11.2%)",
|
|
8058
|
-
"primary-foreground": "hsl(210 40% 98%)",
|
|
8059
|
-
secondary: "hsl(210 40% 96.1%)",
|
|
8060
|
-
"secondary-foreground": "hsl(222.2 47.4% 11.2%)",
|
|
8061
|
-
muted: "hsl(210 40% 96.1%)",
|
|
8062
|
-
"muted-foreground": "hsl(215.4 16.3% 46.9%)",
|
|
8063
|
-
accent: "hsl(210 40% 96.1%)",
|
|
8064
|
-
"accent-foreground": "hsl(222.2 47.4% 11.2%)",
|
|
8065
|
-
border: "hsl(214.3 31.8% 91.4%)",
|
|
8066
|
-
input: "hsl(214.3 31.8% 91.4%)",
|
|
8067
|
-
ring: "hsl(222.2 84% 4.9%)",
|
|
8068
|
-
destructive: "hsl(0 84.2% 60.2%)",
|
|
8069
|
-
"destructive-foreground": "hsl(210 40% 98%)",
|
|
8070
|
-
card: "hsl(0 0% 100%)",
|
|
8071
|
-
"card-foreground": "hsl(222.2 47.4% 11.2%)",
|
|
8072
|
-
popover: "hsl(0 0% 100%)",
|
|
8073
|
-
"popover-foreground": "hsl(222.2 47.4% 11.2%)",
|
|
8074
|
-
"font-body": 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
|
8075
|
-
"font-heading": 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
|
|
8076
|
-
};
|
|
8077
|
-
const applyThemeStyles = (styles2) => {
|
|
8078
|
-
const existingStyles = document.getElementById("reach-theme-styles");
|
|
8079
|
-
if (existingStyles) {
|
|
8080
|
-
existingStyles.remove();
|
|
8081
|
-
}
|
|
8082
|
-
const styleElement = document.createElement("style");
|
|
8083
|
-
styleElement.id = "reach-theme-styles";
|
|
8084
|
-
const cssText = `
|
|
8085
|
-
[data-reach-root] {
|
|
8086
|
-
${Object.entries(DEFAULT_THEME_STYLES).map(([key, defaultValue]) => {
|
|
8087
|
-
const userValue = styles2[key];
|
|
8088
|
-
let finalValue = defaultValue;
|
|
8089
|
-
if (userValue !== void 0) {
|
|
8090
|
-
if (key === "radius" || key === "font-body" || key === "font-heading") {
|
|
8091
|
-
finalValue = userValue;
|
|
8092
|
-
} else if (isValidColor(userValue)) {
|
|
8093
|
-
try {
|
|
8094
|
-
finalValue = toShadcnFormat(userValue);
|
|
8095
|
-
} catch (e4) {
|
|
8096
|
-
console.warn(
|
|
8097
|
-
`Failed to convert color for ${key}, using default`
|
|
8098
|
-
);
|
|
8099
|
-
}
|
|
8100
|
-
}
|
|
8101
|
-
}
|
|
8102
|
-
return `--reach-${key}: ${finalValue};`;
|
|
8103
|
-
}).join("\n")}
|
|
8104
|
-
}
|
|
8105
|
-
|
|
8106
|
-
/* Apply font families directly */
|
|
8107
|
-
[data-reach-root] {
|
|
8108
|
-
font-family: var(--reach-font-body);
|
|
8109
|
-
}
|
|
8110
|
-
|
|
8111
|
-
[data-reach-root] h1,
|
|
8112
|
-
[data-reach-root] h2,
|
|
8113
|
-
[data-reach-root] h3,
|
|
8114
|
-
[data-reach-root] h4,
|
|
8115
|
-
[data-reach-root] h5,
|
|
8116
|
-
[data-reach-root] h6 {
|
|
8117
|
-
font-family: var(--reach-font-heading);
|
|
8118
|
-
}
|
|
8119
|
-
`;
|
|
8120
|
-
styleElement.textContent = cssText;
|
|
8121
|
-
document.head.appendChild(styleElement);
|
|
8122
|
-
};
|
|
8123
|
-
const mergeThemeStyles = (themeConfig, overrides) => {
|
|
8124
|
-
return {
|
|
8125
|
-
...DEFAULT_THEME_STYLES,
|
|
8126
|
-
...themeConfig?.styles || {},
|
|
8127
|
-
...{}
|
|
8128
|
-
};
|
|
8129
|
-
};
|
|
8130
|
-
const themeReducer = (state, action) => {
|
|
8131
|
-
switch (action.type) {
|
|
8132
|
-
case "set_theme":
|
|
8133
|
-
if (action.payload && !state.theme) {
|
|
8134
|
-
applyThemeStyles(action.payload.styles);
|
|
8135
|
-
}
|
|
8136
|
-
return {
|
|
8137
|
-
...state,
|
|
8138
|
-
loading: false,
|
|
8139
|
-
error: null,
|
|
8140
|
-
theme: action.payload
|
|
8141
|
-
};
|
|
8142
|
-
case "set_loading":
|
|
8143
|
-
return {
|
|
8144
|
-
...state,
|
|
8145
|
-
loading: action.payload
|
|
8146
|
-
};
|
|
8147
|
-
case "set_error":
|
|
8148
|
-
return {
|
|
8149
|
-
...state,
|
|
8150
|
-
loading: false,
|
|
8151
|
-
error: action.payload
|
|
8152
|
-
};
|
|
8153
|
-
default:
|
|
8154
|
-
return state;
|
|
8155
|
-
}
|
|
8156
|
-
};
|
|
8157
|
-
const setTheme = (dispatch2) => (theme2) => dispatch2({ type: "set_theme", payload: theme2 });
|
|
8158
|
-
const setLoading = (dispatch2) => (loading2) => dispatch2({ type: "set_loading", payload: loading2 });
|
|
8159
|
-
const setError = (dispatch2) => (error2) => dispatch2({ type: "set_error", payload: error2 });
|
|
8160
|
-
const { Context, Provider: Provider$2 } = createDataContext(
|
|
8161
|
-
themeReducer,
|
|
8162
|
-
{
|
|
8163
|
-
setTheme,
|
|
8164
|
-
setLoading,
|
|
8165
|
-
setError
|
|
8166
|
-
},
|
|
8167
|
-
{
|
|
8168
|
-
theme: null,
|
|
8169
|
-
loading: true,
|
|
8170
|
-
error: null
|
|
8171
|
-
}
|
|
8172
|
-
);
|
|
8173
7987
|
const warn = (...args) => {
|
|
8174
7988
|
if (console?.warn) {
|
|
8175
7989
|
if (isString$1(args[0])) args[0] = `react-i18next:: ${args[0]}`;
|
|
@@ -8372,39 +8186,386 @@ const useTranslation = (ns, props = {}) => {
|
|
|
8372
8186
|
if (i18n) bindI18n?.split(" ").forEach((e4) => i18n.off(e4, boundReset));
|
|
8373
8187
|
if (bindI18nStore && i18n) bindI18nStore.split(" ").forEach((e4) => i18n.store.off(e4, boundReset));
|
|
8374
8188
|
};
|
|
8375
|
-
}, [i18n, joinedNS]);
|
|
8189
|
+
}, [i18n, joinedNS]);
|
|
8190
|
+
useEffect(() => {
|
|
8191
|
+
if (isMounted.current && ready) {
|
|
8192
|
+
setT(getT);
|
|
8193
|
+
}
|
|
8194
|
+
}, [i18n, keyPrefix, ready]);
|
|
8195
|
+
const ret = [t3, i18n, ready];
|
|
8196
|
+
ret.t = t3;
|
|
8197
|
+
ret.i18n = i18n;
|
|
8198
|
+
ret.ready = ready;
|
|
8199
|
+
if (ready) return ret;
|
|
8200
|
+
if (!ready && !useSuspense) return ret;
|
|
8201
|
+
throw new Promise((resolve) => {
|
|
8202
|
+
if (props.lng) {
|
|
8203
|
+
loadLanguages(i18n, props.lng, namespaces, () => resolve());
|
|
8204
|
+
} else {
|
|
8205
|
+
loadNamespaces(i18n, namespaces, () => resolve());
|
|
8206
|
+
}
|
|
8207
|
+
});
|
|
8208
|
+
};
|
|
8209
|
+
function I18nextProvider({
|
|
8210
|
+
i18n,
|
|
8211
|
+
defaultNS,
|
|
8212
|
+
children: children2
|
|
8213
|
+
}) {
|
|
8214
|
+
const value = useMemo(() => ({
|
|
8215
|
+
i18n,
|
|
8216
|
+
defaultNS
|
|
8217
|
+
}), [i18n, defaultNS]);
|
|
8218
|
+
return createElement$1(I18nContext.Provider, {
|
|
8219
|
+
value
|
|
8220
|
+
}, children2);
|
|
8221
|
+
}
|
|
8222
|
+
const H3 = ({ children: children2 }) => {
|
|
8223
|
+
return /* @__PURE__ */ jsx("h3", { className: "scroll-m-20 text-2xl font-semibold tracking-tight", children: children2 });
|
|
8224
|
+
};
|
|
8225
|
+
const SpinLoader = ({
|
|
8226
|
+
size: size2 = 35,
|
|
8227
|
+
color: color2 = "black",
|
|
8228
|
+
speed = 0.9,
|
|
8229
|
+
strokeWidth = 3.5,
|
|
8230
|
+
text,
|
|
8231
|
+
textSpeed = 2e3,
|
|
8232
|
+
// Default 2 seconds per text
|
|
8233
|
+
textColor = "black"
|
|
8234
|
+
}) => {
|
|
8235
|
+
const [currentTextIndex, setCurrentTextIndex] = useState(0);
|
|
8236
|
+
const textArray = Array.isArray(text) ? text : text ? [text] : [];
|
|
8237
|
+
useEffect(() => {
|
|
8238
|
+
if (textArray.length <= 1) return;
|
|
8239
|
+
if (currentTextIndex >= textArray.length - 1) return;
|
|
8240
|
+
const interval = setInterval(() => {
|
|
8241
|
+
setCurrentTextIndex(
|
|
8242
|
+
(current) => current < textArray.length - 1 ? current + 1 : current
|
|
8243
|
+
);
|
|
8244
|
+
}, textSpeed);
|
|
8245
|
+
return () => clearInterval(interval);
|
|
8246
|
+
}, [textArray.length, textSpeed, currentTextIndex]);
|
|
8247
|
+
return /* @__PURE__ */ jsx("div", { className: "flex flex-col justify-center items-center h-full", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
|
|
8248
|
+
/* @__PURE__ */ jsxs(
|
|
8249
|
+
"div",
|
|
8250
|
+
{
|
|
8251
|
+
className: "loader-container",
|
|
8252
|
+
style: {
|
|
8253
|
+
"--uib-size": `${size2}px`,
|
|
8254
|
+
"--uib-color": color2,
|
|
8255
|
+
"--uib-speed": `${speed}s`,
|
|
8256
|
+
"--uib-stroke": `${strokeWidth}px`
|
|
8257
|
+
},
|
|
8258
|
+
children: [
|
|
8259
|
+
/* @__PURE__ */ jsx("div", { className: "line" }),
|
|
8260
|
+
/* @__PURE__ */ jsx("div", { className: "line" }),
|
|
8261
|
+
/* @__PURE__ */ jsx("div", { className: "line" }),
|
|
8262
|
+
/* @__PURE__ */ jsx("div", { className: "line" }),
|
|
8263
|
+
/* @__PURE__ */ jsx("div", { className: "line" }),
|
|
8264
|
+
/* @__PURE__ */ jsx("div", { className: "line" })
|
|
8265
|
+
]
|
|
8266
|
+
}
|
|
8267
|
+
),
|
|
8268
|
+
textArray.length > 0 && /* @__PURE__ */ jsx(
|
|
8269
|
+
"div",
|
|
8270
|
+
{
|
|
8271
|
+
className: `text-center text-sm text-muted-foreground animate-fade-in ${textColor ? `text-${textColor}` : ""}`,
|
|
8272
|
+
children: /* @__PURE__ */ jsx(H3, { children: textArray[currentTextIndex] })
|
|
8273
|
+
},
|
|
8274
|
+
currentTextIndex
|
|
8275
|
+
),
|
|
8276
|
+
/* @__PURE__ */ jsx("style", { children: `
|
|
8277
|
+
.loader-container {
|
|
8278
|
+
position: relative;
|
|
8279
|
+
display: flex;
|
|
8280
|
+
align-items: center;
|
|
8281
|
+
justify-content: center;
|
|
8282
|
+
height: var(--uib-size);
|
|
8283
|
+
width: var(--uib-size);
|
|
8284
|
+
}
|
|
8285
|
+
.line {
|
|
8286
|
+
position: absolute;
|
|
8287
|
+
top: calc(50% - var(--uib-stroke) / 2);
|
|
8288
|
+
left: 0;
|
|
8289
|
+
height: var(--uib-stroke);
|
|
8290
|
+
width: 100%;
|
|
8291
|
+
border-radius: calc(var(--uib-stroke) / 2);
|
|
8292
|
+
background-color: var(--uib-color);
|
|
8293
|
+
animation: rotate var(--uib-speed) ease-in-out infinite;
|
|
8294
|
+
transition: background-color 0.3s ease;
|
|
8295
|
+
}
|
|
8296
|
+
.line:nth-child(1) {
|
|
8297
|
+
animation-delay: calc(var(--uib-speed) * -0.375);
|
|
8298
|
+
}
|
|
8299
|
+
.line:nth-child(2) {
|
|
8300
|
+
animation-delay: calc(var(--uib-speed) * -0.375);
|
|
8301
|
+
opacity: 0.8;
|
|
8302
|
+
}
|
|
8303
|
+
.line:nth-child(3) {
|
|
8304
|
+
animation-delay: calc(var(--uib-speed) * -0.3);
|
|
8305
|
+
opacity: 0.6;
|
|
8306
|
+
}
|
|
8307
|
+
.line:nth-child(4) {
|
|
8308
|
+
animation-delay: calc(var(--uib-speed) * -0.225);
|
|
8309
|
+
opacity: 0.4;
|
|
8310
|
+
}
|
|
8311
|
+
.line:nth-child(5) {
|
|
8312
|
+
animation-delay: calc(var(--uib-speed) * -0.15);
|
|
8313
|
+
opacity: 0.2;
|
|
8314
|
+
}
|
|
8315
|
+
.line:nth-child(6) {
|
|
8316
|
+
animation-delay: calc(var(--uib-speed) * -0.075);
|
|
8317
|
+
opacity: 0.1;
|
|
8318
|
+
}
|
|
8319
|
+
@keyframes rotate {
|
|
8320
|
+
0% {
|
|
8321
|
+
transform: rotate(0deg);
|
|
8322
|
+
}
|
|
8323
|
+
100% {
|
|
8324
|
+
transform: rotate(180deg);
|
|
8325
|
+
}
|
|
8326
|
+
}
|
|
8327
|
+
.animate-fade-in {
|
|
8328
|
+
animation: fadeIn 0.5s ease-in-out;
|
|
8329
|
+
}
|
|
8330
|
+
@keyframes fadeIn {
|
|
8331
|
+
from {
|
|
8332
|
+
opacity: 0;
|
|
8333
|
+
transform: translateY(5px);
|
|
8334
|
+
}
|
|
8335
|
+
to {
|
|
8336
|
+
opacity: 1;
|
|
8337
|
+
transform: translateY(0);
|
|
8338
|
+
}
|
|
8339
|
+
}
|
|
8340
|
+
` })
|
|
8341
|
+
] }) });
|
|
8342
|
+
};
|
|
8343
|
+
const normalizeColor = (color2) => {
|
|
8344
|
+
const div = document.createElement("div");
|
|
8345
|
+
div.style.color = color2;
|
|
8346
|
+
document.body.appendChild(div);
|
|
8347
|
+
const computed = window.getComputedStyle(div).color;
|
|
8348
|
+
document.body.removeChild(div);
|
|
8349
|
+
return computed;
|
|
8350
|
+
};
|
|
8351
|
+
const isValidColor = (color2) => {
|
|
8352
|
+
if (/^\d+\s+\d+(?:\.\d+)?%\s+\d+(?:\.\d+)?%$/.test(color2.trim())) {
|
|
8353
|
+
return true;
|
|
8354
|
+
}
|
|
8355
|
+
const div = document.createElement("div");
|
|
8356
|
+
const prevColor = div.style.color;
|
|
8357
|
+
div.style.color = color2;
|
|
8358
|
+
return div.style.color !== prevColor;
|
|
8359
|
+
};
|
|
8360
|
+
const rgbToShadcnHsl = (r2, g2, b3) => {
|
|
8361
|
+
r2 /= 255;
|
|
8362
|
+
g2 /= 255;
|
|
8363
|
+
b3 /= 255;
|
|
8364
|
+
const max2 = Math.max(r2, g2, b3);
|
|
8365
|
+
const min2 = Math.min(r2, g2, b3);
|
|
8366
|
+
let h4 = 0, s3 = 0;
|
|
8367
|
+
const l2 = (max2 + min2) / 2;
|
|
8368
|
+
if (max2 !== min2) {
|
|
8369
|
+
const d4 = max2 - min2;
|
|
8370
|
+
s3 = l2 > 0.5 ? d4 / (2 - max2 - min2) : d4 / (max2 + min2);
|
|
8371
|
+
switch (max2) {
|
|
8372
|
+
case r2:
|
|
8373
|
+
h4 = (g2 - b3) / d4 + (g2 < b3 ? 6 : 0);
|
|
8374
|
+
break;
|
|
8375
|
+
case g2:
|
|
8376
|
+
h4 = (b3 - r2) / d4 + 2;
|
|
8377
|
+
break;
|
|
8378
|
+
case b3:
|
|
8379
|
+
h4 = (r2 - g2) / d4 + 4;
|
|
8380
|
+
break;
|
|
8381
|
+
}
|
|
8382
|
+
h4 *= 60;
|
|
8383
|
+
}
|
|
8384
|
+
return `${Math.round(h4)} ${Math.round(s3 * 100)}% ${Math.round(l2 * 100)}%`;
|
|
8385
|
+
};
|
|
8386
|
+
const extractRgb = (rgbColor) => {
|
|
8387
|
+
const matches = rgbColor.match(/\d+/g);
|
|
8388
|
+
if (!matches || matches.length < 3) {
|
|
8389
|
+
throw new Error(`Invalid RGB color format: ${rgbColor}`);
|
|
8390
|
+
}
|
|
8391
|
+
return [
|
|
8392
|
+
parseInt(matches[0], 10),
|
|
8393
|
+
parseInt(matches[1], 10),
|
|
8394
|
+
parseInt(matches[2], 10)
|
|
8395
|
+
];
|
|
8396
|
+
};
|
|
8397
|
+
const toShadcnFormat = (color2) => {
|
|
8398
|
+
if (/^\d+\s+\d+(?:\.\d+)?%\s+\d+(?:\.\d+)?%$/.test(color2.trim())) {
|
|
8399
|
+
return color2.trim();
|
|
8400
|
+
}
|
|
8401
|
+
try {
|
|
8402
|
+
const rgbColor = normalizeColor(color2);
|
|
8403
|
+
const [r2, g2, b3] = extractRgb(rgbColor);
|
|
8404
|
+
return rgbToShadcnHsl(r2, g2, b3);
|
|
8405
|
+
} catch (e4) {
|
|
8406
|
+
console.warn(`Failed to convert color to shadcn format: ${color2}`, e4);
|
|
8407
|
+
return color2;
|
|
8408
|
+
}
|
|
8409
|
+
};
|
|
8410
|
+
const DEFAULT_THEME_STYLES = {
|
|
8411
|
+
primary: "hsl(222.2 47.4% 11.2%)",
|
|
8412
|
+
background: "hsl(0 0% 100%)",
|
|
8413
|
+
foreground: "hsl(222.2 47.4% 11.2%)",
|
|
8414
|
+
"primary-foreground": "hsl(210 40% 98%)",
|
|
8415
|
+
secondary: "hsl(210 40% 96.1%)",
|
|
8416
|
+
"secondary-foreground": "hsl(222.2 47.4% 11.2%)",
|
|
8417
|
+
muted: "hsl(210 40% 96.1%)",
|
|
8418
|
+
"muted-foreground": "hsl(215.4 16.3% 46.9%)",
|
|
8419
|
+
accent: "hsl(210 40% 96.1%)",
|
|
8420
|
+
"accent-foreground": "hsl(222.2 47.4% 11.2%)",
|
|
8421
|
+
border: "hsl(214.3 31.8% 91.4%)",
|
|
8422
|
+
input: "hsl(214.3 31.8% 91.4%)",
|
|
8423
|
+
ring: "hsl(222.2 84% 4.9%)",
|
|
8424
|
+
destructive: "hsl(0 84.2% 60.2%)",
|
|
8425
|
+
"destructive-foreground": "hsl(210 40% 98%)",
|
|
8426
|
+
card: "hsl(0 0% 100%)",
|
|
8427
|
+
"card-foreground": "hsl(222.2 47.4% 11.2%)",
|
|
8428
|
+
popover: "hsl(0 0% 100%)",
|
|
8429
|
+
"popover-foreground": "hsl(222.2 47.4% 11.2%)",
|
|
8430
|
+
"font-body": 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
|
8431
|
+
"font-heading": 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
|
|
8432
|
+
};
|
|
8433
|
+
const applyThemeStyles = (styles2) => {
|
|
8434
|
+
const existingStyles = document.getElementById("reach-theme-styles");
|
|
8435
|
+
if (existingStyles) {
|
|
8436
|
+
existingStyles.remove();
|
|
8437
|
+
}
|
|
8438
|
+
const styleElement = document.createElement("style");
|
|
8439
|
+
styleElement.id = "reach-theme-styles";
|
|
8440
|
+
const cssText = `
|
|
8441
|
+
[data-reach-root] {
|
|
8442
|
+
${Object.entries(DEFAULT_THEME_STYLES).map(([key, defaultValue]) => {
|
|
8443
|
+
const userValue = styles2[key];
|
|
8444
|
+
let finalValue = defaultValue;
|
|
8445
|
+
if (userValue !== void 0) {
|
|
8446
|
+
if (key === "radius" || key === "font-body" || key === "font-heading") {
|
|
8447
|
+
finalValue = userValue;
|
|
8448
|
+
} else if (isValidColor(userValue)) {
|
|
8449
|
+
try {
|
|
8450
|
+
finalValue = toShadcnFormat(userValue);
|
|
8451
|
+
} catch (e4) {
|
|
8452
|
+
console.warn(
|
|
8453
|
+
`Failed to convert color for ${key}, using default`
|
|
8454
|
+
);
|
|
8455
|
+
}
|
|
8456
|
+
}
|
|
8457
|
+
}
|
|
8458
|
+
return `--reach-${key}: ${finalValue};`;
|
|
8459
|
+
}).join("\n")}
|
|
8460
|
+
}
|
|
8461
|
+
|
|
8462
|
+
/* Apply font families directly */
|
|
8463
|
+
[data-reach-root] {
|
|
8464
|
+
font-family: var(--reach-font-body);
|
|
8465
|
+
}
|
|
8466
|
+
|
|
8467
|
+
[data-reach-root] h1,
|
|
8468
|
+
[data-reach-root] h2,
|
|
8469
|
+
[data-reach-root] h3,
|
|
8470
|
+
[data-reach-root] h4,
|
|
8471
|
+
[data-reach-root] h5,
|
|
8472
|
+
[data-reach-root] h6 {
|
|
8473
|
+
font-family: var(--reach-font-heading);
|
|
8474
|
+
}
|
|
8475
|
+
`;
|
|
8476
|
+
styleElement.textContent = cssText;
|
|
8477
|
+
document.head.appendChild(styleElement);
|
|
8478
|
+
};
|
|
8479
|
+
const mergeThemeStyles = (themeConfig, overrides) => {
|
|
8480
|
+
return {
|
|
8481
|
+
...DEFAULT_THEME_STYLES,
|
|
8482
|
+
...themeConfig?.styles || {},
|
|
8483
|
+
...{}
|
|
8484
|
+
};
|
|
8485
|
+
};
|
|
8486
|
+
const themeReducer = (state, action) => {
|
|
8487
|
+
switch (action.type) {
|
|
8488
|
+
case "set_theme":
|
|
8489
|
+
if (action.payload && !state.theme) {
|
|
8490
|
+
applyThemeStyles(action.payload.styles);
|
|
8491
|
+
}
|
|
8492
|
+
return {
|
|
8493
|
+
...state,
|
|
8494
|
+
loading: false,
|
|
8495
|
+
error: null,
|
|
8496
|
+
theme: action.payload
|
|
8497
|
+
};
|
|
8498
|
+
case "set_loading":
|
|
8499
|
+
return {
|
|
8500
|
+
...state,
|
|
8501
|
+
loading: action.payload
|
|
8502
|
+
};
|
|
8503
|
+
case "set_error":
|
|
8504
|
+
return {
|
|
8505
|
+
...state,
|
|
8506
|
+
loading: false,
|
|
8507
|
+
error: action.payload
|
|
8508
|
+
};
|
|
8509
|
+
default:
|
|
8510
|
+
return state;
|
|
8511
|
+
}
|
|
8512
|
+
};
|
|
8513
|
+
const setTheme = (dispatch2) => (theme2) => dispatch2({ type: "set_theme", payload: theme2 });
|
|
8514
|
+
const setLoading = (dispatch2) => (loading2) => dispatch2({ type: "set_loading", payload: loading2 });
|
|
8515
|
+
const setError = (dispatch2) => (error2) => dispatch2({ type: "set_error", payload: error2 });
|
|
8516
|
+
const { Context, Provider: Provider$2 } = createDataContext(
|
|
8517
|
+
themeReducer,
|
|
8518
|
+
{
|
|
8519
|
+
setTheme,
|
|
8520
|
+
setLoading,
|
|
8521
|
+
setError
|
|
8522
|
+
},
|
|
8523
|
+
{
|
|
8524
|
+
theme: null,
|
|
8525
|
+
loading: true,
|
|
8526
|
+
error: null
|
|
8527
|
+
}
|
|
8528
|
+
);
|
|
8529
|
+
const useThemeContext = () => {
|
|
8530
|
+
const context = useContext$1(Context);
|
|
8531
|
+
if (context === void 0) {
|
|
8532
|
+
throw new Error("useThemeContext must be used within a ThemeProvider");
|
|
8533
|
+
}
|
|
8534
|
+
const applyTheme = (themeConfig) => {
|
|
8535
|
+
if (!themeConfig) return;
|
|
8536
|
+
const mergedStyles = mergeThemeStyles(themeConfig);
|
|
8537
|
+
const finalTheme = {
|
|
8538
|
+
styles: mergedStyles
|
|
8539
|
+
};
|
|
8540
|
+
context.setTheme(finalTheme);
|
|
8541
|
+
};
|
|
8542
|
+
return {
|
|
8543
|
+
...context.state,
|
|
8544
|
+
setTheme: context.setTheme,
|
|
8545
|
+
setLoading: context.setLoading,
|
|
8546
|
+
setError: context.setError,
|
|
8547
|
+
// Add the helper function
|
|
8548
|
+
applyTheme
|
|
8549
|
+
};
|
|
8550
|
+
};
|
|
8551
|
+
const ThemeProvider = ({
|
|
8552
|
+
children: children2,
|
|
8553
|
+
theme: theme2
|
|
8554
|
+
}) => {
|
|
8555
|
+
const { t: t3 } = useTranslation();
|
|
8556
|
+
const { loading: themeLoading, applyTheme } = useThemeContext();
|
|
8557
|
+
const themeApplied = useRef(false);
|
|
8376
8558
|
useEffect(() => {
|
|
8377
|
-
if (
|
|
8378
|
-
|
|
8379
|
-
|
|
8380
|
-
}, [i18n, keyPrefix, ready]);
|
|
8381
|
-
const ret = [t3, i18n, ready];
|
|
8382
|
-
ret.t = t3;
|
|
8383
|
-
ret.i18n = i18n;
|
|
8384
|
-
ret.ready = ready;
|
|
8385
|
-
if (ready) return ret;
|
|
8386
|
-
if (!ready && !useSuspense) return ret;
|
|
8387
|
-
throw new Promise((resolve) => {
|
|
8388
|
-
if (props.lng) {
|
|
8389
|
-
loadLanguages(i18n, props.lng, namespaces, () => resolve());
|
|
8390
|
-
} else {
|
|
8391
|
-
loadNamespaces(i18n, namespaces, () => resolve());
|
|
8559
|
+
if (!themeApplied.current && theme2) {
|
|
8560
|
+
applyTheme(theme2);
|
|
8561
|
+
themeApplied.current = true;
|
|
8392
8562
|
}
|
|
8393
|
-
});
|
|
8563
|
+
}, [applyTheme, theme2]);
|
|
8564
|
+
if (themeLoading && theme2) {
|
|
8565
|
+
return /* @__PURE__ */ jsx("div", { className: "flex flex-col justify-center items-center h-screen", children: /* @__PURE__ */ jsx(SpinLoader, { text: [t3("loading")] }) });
|
|
8566
|
+
}
|
|
8567
|
+
return /* @__PURE__ */ jsx(Provider$2, { children: children2 });
|
|
8394
8568
|
};
|
|
8395
|
-
function I18nextProvider({
|
|
8396
|
-
i18n,
|
|
8397
|
-
defaultNS,
|
|
8398
|
-
children: children2
|
|
8399
|
-
}) {
|
|
8400
|
-
const value = useMemo(() => ({
|
|
8401
|
-
i18n,
|
|
8402
|
-
defaultNS
|
|
8403
|
-
}), [i18n, defaultNS]);
|
|
8404
|
-
return createElement$1(I18nContext.Provider, {
|
|
8405
|
-
value
|
|
8406
|
-
}, children2);
|
|
8407
|
-
}
|
|
8408
8569
|
const isString = (obj) => typeof obj === "string";
|
|
8409
8570
|
const defer = () => {
|
|
8410
8571
|
let res;
|
|
@@ -11877,167 +12038,6 @@ const I18nProvider = ({
|
|
|
11877
12038
|
}, [initialLanguage]);
|
|
11878
12039
|
return /* @__PURE__ */ jsx(I18nextProvider, { i18n: instance, children: children2 });
|
|
11879
12040
|
};
|
|
11880
|
-
const useThemeContext = () => {
|
|
11881
|
-
const context = useContext$1(Context);
|
|
11882
|
-
if (context === void 0) {
|
|
11883
|
-
throw new Error("useThemeContext must be used within a ThemeProvider");
|
|
11884
|
-
}
|
|
11885
|
-
const applyTheme = (themeConfig) => {
|
|
11886
|
-
if (!themeConfig) return;
|
|
11887
|
-
const mergedStyles = mergeThemeStyles(themeConfig);
|
|
11888
|
-
const finalTheme = {
|
|
11889
|
-
styles: mergedStyles
|
|
11890
|
-
};
|
|
11891
|
-
context.setTheme(finalTheme);
|
|
11892
|
-
};
|
|
11893
|
-
return {
|
|
11894
|
-
...context.state,
|
|
11895
|
-
setTheme: context.setTheme,
|
|
11896
|
-
setLoading: context.setLoading,
|
|
11897
|
-
setError: context.setError,
|
|
11898
|
-
// Add the helper function
|
|
11899
|
-
applyTheme
|
|
11900
|
-
};
|
|
11901
|
-
};
|
|
11902
|
-
const H3 = ({ children: children2 }) => {
|
|
11903
|
-
return /* @__PURE__ */ jsx("h3", { className: "scroll-m-20 text-2xl font-semibold tracking-tight", children: children2 });
|
|
11904
|
-
};
|
|
11905
|
-
const SpinLoader = ({
|
|
11906
|
-
size: size2 = 35,
|
|
11907
|
-
color: color2 = "black",
|
|
11908
|
-
speed = 0.9,
|
|
11909
|
-
strokeWidth = 3.5,
|
|
11910
|
-
text,
|
|
11911
|
-
textSpeed = 2e3,
|
|
11912
|
-
// Default 2 seconds per text
|
|
11913
|
-
textColor = "black"
|
|
11914
|
-
}) => {
|
|
11915
|
-
const [currentTextIndex, setCurrentTextIndex] = useState(0);
|
|
11916
|
-
const textArray = Array.isArray(text) ? text : text ? [text] : [];
|
|
11917
|
-
useEffect(() => {
|
|
11918
|
-
if (textArray.length <= 1) return;
|
|
11919
|
-
if (currentTextIndex >= textArray.length - 1) return;
|
|
11920
|
-
const interval = setInterval(() => {
|
|
11921
|
-
setCurrentTextIndex(
|
|
11922
|
-
(current) => current < textArray.length - 1 ? current + 1 : current
|
|
11923
|
-
);
|
|
11924
|
-
}, textSpeed);
|
|
11925
|
-
return () => clearInterval(interval);
|
|
11926
|
-
}, [textArray.length, textSpeed, currentTextIndex]);
|
|
11927
|
-
return /* @__PURE__ */ jsx("div", { className: "flex flex-col justify-center items-center h-full", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
|
|
11928
|
-
/* @__PURE__ */ jsxs(
|
|
11929
|
-
"div",
|
|
11930
|
-
{
|
|
11931
|
-
className: "loader-container",
|
|
11932
|
-
style: {
|
|
11933
|
-
"--uib-size": `${size2}px`,
|
|
11934
|
-
"--uib-color": color2,
|
|
11935
|
-
"--uib-speed": `${speed}s`,
|
|
11936
|
-
"--uib-stroke": `${strokeWidth}px`
|
|
11937
|
-
},
|
|
11938
|
-
children: [
|
|
11939
|
-
/* @__PURE__ */ jsx("div", { className: "line" }),
|
|
11940
|
-
/* @__PURE__ */ jsx("div", { className: "line" }),
|
|
11941
|
-
/* @__PURE__ */ jsx("div", { className: "line" }),
|
|
11942
|
-
/* @__PURE__ */ jsx("div", { className: "line" }),
|
|
11943
|
-
/* @__PURE__ */ jsx("div", { className: "line" }),
|
|
11944
|
-
/* @__PURE__ */ jsx("div", { className: "line" })
|
|
11945
|
-
]
|
|
11946
|
-
}
|
|
11947
|
-
),
|
|
11948
|
-
textArray.length > 0 && /* @__PURE__ */ jsx(
|
|
11949
|
-
"div",
|
|
11950
|
-
{
|
|
11951
|
-
className: `text-center text-sm text-muted-foreground animate-fade-in ${textColor ? `text-${textColor}` : ""}`,
|
|
11952
|
-
children: /* @__PURE__ */ jsx(H3, { children: textArray[currentTextIndex] })
|
|
11953
|
-
},
|
|
11954
|
-
currentTextIndex
|
|
11955
|
-
),
|
|
11956
|
-
/* @__PURE__ */ jsx("style", { children: `
|
|
11957
|
-
.loader-container {
|
|
11958
|
-
position: relative;
|
|
11959
|
-
display: flex;
|
|
11960
|
-
align-items: center;
|
|
11961
|
-
justify-content: center;
|
|
11962
|
-
height: var(--uib-size);
|
|
11963
|
-
width: var(--uib-size);
|
|
11964
|
-
}
|
|
11965
|
-
.line {
|
|
11966
|
-
position: absolute;
|
|
11967
|
-
top: calc(50% - var(--uib-stroke) / 2);
|
|
11968
|
-
left: 0;
|
|
11969
|
-
height: var(--uib-stroke);
|
|
11970
|
-
width: 100%;
|
|
11971
|
-
border-radius: calc(var(--uib-stroke) / 2);
|
|
11972
|
-
background-color: var(--uib-color);
|
|
11973
|
-
animation: rotate var(--uib-speed) ease-in-out infinite;
|
|
11974
|
-
transition: background-color 0.3s ease;
|
|
11975
|
-
}
|
|
11976
|
-
.line:nth-child(1) {
|
|
11977
|
-
animation-delay: calc(var(--uib-speed) * -0.375);
|
|
11978
|
-
}
|
|
11979
|
-
.line:nth-child(2) {
|
|
11980
|
-
animation-delay: calc(var(--uib-speed) * -0.375);
|
|
11981
|
-
opacity: 0.8;
|
|
11982
|
-
}
|
|
11983
|
-
.line:nth-child(3) {
|
|
11984
|
-
animation-delay: calc(var(--uib-speed) * -0.3);
|
|
11985
|
-
opacity: 0.6;
|
|
11986
|
-
}
|
|
11987
|
-
.line:nth-child(4) {
|
|
11988
|
-
animation-delay: calc(var(--uib-speed) * -0.225);
|
|
11989
|
-
opacity: 0.4;
|
|
11990
|
-
}
|
|
11991
|
-
.line:nth-child(5) {
|
|
11992
|
-
animation-delay: calc(var(--uib-speed) * -0.15);
|
|
11993
|
-
opacity: 0.2;
|
|
11994
|
-
}
|
|
11995
|
-
.line:nth-child(6) {
|
|
11996
|
-
animation-delay: calc(var(--uib-speed) * -0.075);
|
|
11997
|
-
opacity: 0.1;
|
|
11998
|
-
}
|
|
11999
|
-
@keyframes rotate {
|
|
12000
|
-
0% {
|
|
12001
|
-
transform: rotate(0deg);
|
|
12002
|
-
}
|
|
12003
|
-
100% {
|
|
12004
|
-
transform: rotate(180deg);
|
|
12005
|
-
}
|
|
12006
|
-
}
|
|
12007
|
-
.animate-fade-in {
|
|
12008
|
-
animation: fadeIn 0.5s ease-in-out;
|
|
12009
|
-
}
|
|
12010
|
-
@keyframes fadeIn {
|
|
12011
|
-
from {
|
|
12012
|
-
opacity: 0;
|
|
12013
|
-
transform: translateY(5px);
|
|
12014
|
-
}
|
|
12015
|
-
to {
|
|
12016
|
-
opacity: 1;
|
|
12017
|
-
transform: translateY(0);
|
|
12018
|
-
}
|
|
12019
|
-
}
|
|
12020
|
-
` })
|
|
12021
|
-
] }) });
|
|
12022
|
-
};
|
|
12023
|
-
const ReachProviderThemeProvider = ({
|
|
12024
|
-
children: children2,
|
|
12025
|
-
theme: theme2
|
|
12026
|
-
}) => {
|
|
12027
|
-
const { t: t3 } = useTranslation();
|
|
12028
|
-
const { loading: themeLoading, applyTheme } = useThemeContext();
|
|
12029
|
-
const themeApplied = useRef(false);
|
|
12030
|
-
useEffect(() => {
|
|
12031
|
-
if (!themeApplied.current && theme2) {
|
|
12032
|
-
applyTheme(theme2);
|
|
12033
|
-
themeApplied.current = true;
|
|
12034
|
-
}
|
|
12035
|
-
}, [applyTheme, theme2]);
|
|
12036
|
-
if (themeLoading && theme2) {
|
|
12037
|
-
return /* @__PURE__ */ jsx("div", { className: "flex flex-col justify-center items-center h-screen", children: /* @__PURE__ */ jsx(SpinLoader, { text: [t3("loading")] }) });
|
|
12038
|
-
}
|
|
12039
|
-
return /* @__PURE__ */ jsx(Fragment, { children: children2 });
|
|
12040
|
-
};
|
|
12041
12041
|
const TOAST_LIMIT = 1;
|
|
12042
12042
|
const TOAST_REMOVE_DELAY = 1e6;
|
|
12043
12043
|
let count$2 = 0;
|
|
@@ -16583,8 +16583,8 @@ const ReachProvider = ({
|
|
|
16583
16583
|
useCamelCaseFlagKeys: false,
|
|
16584
16584
|
sendEventsOnFlagRead: true
|
|
16585
16585
|
},
|
|
16586
|
-
children: /* @__PURE__ */ jsx(I18nProvider, { initialLanguage: language, children: /* @__PURE__ */ jsx(
|
|
16587
|
-
|
|
16586
|
+
children: /* @__PURE__ */ jsx(I18nProvider, { initialLanguage: language, children: /* @__PURE__ */ jsx(ThemeProvider, { theme: theme2, children: /* @__PURE__ */ jsxs(Provider$3, { children: [
|
|
16587
|
+
children2,
|
|
16588
16588
|
/* @__PURE__ */ jsx(Toaster, {})
|
|
16589
16589
|
] }) }) })
|
|
16590
16590
|
}
|