@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.
@@ -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 (isMounted.current && ready) {
8378
- setT(getT);
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(Provider$2, { children: /* @__PURE__ */ jsxs(Provider$3, { children: [
16587
- /* @__PURE__ */ jsx(ReachProviderThemeProvider, { theme: theme2, children: children2 }),
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
  }