@stackframe/react 2.7.20

package/dist/esm/providers/stack-provider.js

@@ -0,0 +1,25 @@
+// src/providers/stack-provider.tsx
+import { Suspense } from "react";
+import { StackProviderClient, UserSetter } from "./stack-provider-client";
+import { TranslationProvider } from "./translation-provider";
+import { jsx, jsxs } from "react/jsx-runtime";
+function UserFetcher(props) {
+  const userPromise = props.app.getUser().then((user) => user?.toClientJson() ?? null);
+  return /* @__PURE__ */ jsx(UserSetter, { userJsonPromise: userPromise });
+}
+function ReactStackProvider({
+  children,
+  app,
+  lang,
+  translationOverrides
+}) {
+  return /* @__PURE__ */ jsxs(StackProviderClient, { app, serialized: false, children: [
+    /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(UserFetcher, { app }) }),
+    /* @__PURE__ */ jsx(TranslationProvider, { lang, translationOverrides, children })
+  ] });
+}
+var stack_provider_default = ReactStackProvider;
+export {
+  stack_provider_default as default
+};
+//# sourceMappingURL=stack-provider.js.map

package/dist/esm/providers/stack-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/providers/stack-provider.tsx"],"sourcesContent":["//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\n\nimport React, { Suspense } from 'react';\nimport { StackAdminApp, StackClientApp, StackServerApp, stackAppInternalsSymbol } from '../lib/stack-app';\nimport { StackProviderClient, UserSetter } from './stack-provider-client';\nimport { TranslationProvider } from './translation-provider';\n\nfunction UserFetcher(props: { app: StackClientApp<true> }) {\n  const userPromise = props.app.getUser().then((user) => user?.toClientJson() ?? null);\n  return <UserSetter userJsonPromise={userPromise} />;\n}\n\nfunction ReactStackProvider({\n  children,\n  app,\n  lang,\n  translationOverrides,\n}: {\n  lang?: React.ComponentProps<typeof TranslationProvider>['lang'],\n  /**\n   * A mapping of English translations to translated equivalents.\n   *\n   * These will take priority over the translations from the language specified in the `lang` property. Note that the\n   * keys are case-sensitive.\n   */\n  translationOverrides?: Record<string, string>,\n  children: React.ReactNode,\n  // list all three types of apps even though server and admin are subclasses of client so it's clear that you can pass any\n  app: StackClientApp<true>,\n}) {\n  return (\n    <StackProviderClient app={app as any} serialized={false}>\n      <Suspense fallback={null}>\n        <UserFetcher app={app} />\n      </Suspense>\n      <TranslationProvider lang={lang} translationOverrides={translationOverrides}>\n        {children}\n      </TranslationProvider>\n    </StackProviderClient>\n  );\n}\n\nexport default ReactStackProvider;\n"],"mappings":";AAIA,SAAgB,gBAAgB;AAEhC,SAAS,qBAAqB,kBAAkB;AAChD,SAAS,2BAA2B;AAI3B,cAsBL,YAtBK;AAFT,SAAS,YAAY,OAAsC;AACzD,QAAM,cAAc,MAAM,IAAI,QAAQ,EAAE,KAAK,CAAC,SAAS,MAAM,aAAa,KAAK,IAAI;AACnF,SAAO,oBAAC,cAAW,iBAAiB,aAAa;AACnD;AAEA,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAYG;AACD,SACE,qBAAC,uBAAoB,KAAiB,YAAY,OAChD;AAAA,wBAAC,YAAS,UAAU,MAClB,8BAAC,eAAY,KAAU,GACzB;AAAA,IACA,oBAAC,uBAAoB,MAAY,sBAC9B,UACH;AAAA,KACF;AAEJ;AAEA,IAAO,yBAAQ;","names":[]}

package/dist/esm/providers/theme-provider.js

@@ -0,0 +1,71 @@
+"use client";
+"use client";
+
+// src/providers/theme-provider.tsx
+import { globalCSS } from "../generated/global-css";
+import { BrowserScript } from "../utils/browser-script";
+import { DEFAULT_THEME } from "../utils/constants";
+import Color from "color";
+import { deindent } from "@stackframe/stack-shared/dist/utils/strings";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function convertColorToCSSVars(obj) {
+  return Object.fromEntries(Object.entries(obj).map(([key, value]) => {
+    const color = Color(value).hsl().array();
+    return [
+      // Convert camelCase key to dash-case
+      key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`),
+      // Convert color to CSS HSL string
+      `${color[0]} ${color[1]}% ${color[2]}%`
+    ];
+  }));
+}
+function convertColorsToCSS(theme) {
+  const { dark, light, ...rest } = theme;
+  const colors = {
+    light: { ...convertColorToCSSVars(light), ...rest },
+    dark: convertColorToCSSVars(dark)
+  };
+  function colorsToCSSVars(colors2) {
+    return Object.entries(colors2).map((params) => {
+      return `--${params[0]}: ${params[1]};
+`;
+    }).join("");
+  }
+  return deindent`
+  .stack-scope {
+  ${colorsToCSSVars(colors.light)}
+  }
+  html:has(head > [data-stack-theme="dark"]) .stack-scope {
+  ${colorsToCSSVars(colors.dark)}
+  }`;
+}
+function StackTheme({
+  theme,
+  children,
+  nonce
+}) {
+  const themeValue = {
+    ...DEFAULT_THEME,
+    ...theme,
+    dark: { ...DEFAULT_THEME.dark, ...theme?.dark },
+    light: { ...DEFAULT_THEME.light, ...theme?.light }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(BrowserScript, { nonce }),
+    /* @__PURE__ */ jsx(
+      "style",
+      {
+        suppressHydrationWarning: true,
+        nonce,
+        dangerouslySetInnerHTML: {
+          __html: globalCSS + "\n" + convertColorsToCSS(themeValue)
+        }
+      }
+    ),
+    children
+  ] });
+}
+export {
+  StackTheme
+};
+//# sourceMappingURL=theme-provider.js.map

package/dist/esm/providers/theme-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/providers/theme-provider.tsx"],"sourcesContent":["'use client';\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\n\n\nimport React from \"react\";\nimport { globalCSS } from \"../generated/global-css\";\nimport { BrowserScript } from \"../utils/browser-script\";\nimport { DEFAULT_THEME } from \"../utils/constants\";\nimport Color from \"color\";\nimport { deindent } from \"@stackframe/stack-shared/dist/utils/strings\";\n\ntype Colors = {\n  background: string,\n  foreground: string,\n  card: string,\n  cardForeground: string,\n  popover: string,\n  popoverForeground: string,\n  primary: string,\n  primaryForeground: string,\n  secondary: string,\n  secondaryForeground: string,\n  muted: string,\n  mutedForeground: string,\n  accent: string,\n  accentForeground: string,\n  destructive: string,\n  destructiveForeground: string,\n  border: string,\n  input: string,\n  ring: string,\n}\n\nexport type Theme = {\n  light: Colors,\n  dark: Colors,\n  radius: string,\n};\n\ntype ThemeConfig = {\n  light?: Partial<Colors>,\n  dark?: Partial<Colors>,\n} & Partial<Omit<Theme, 'light' | 'dark'>>;\n\nfunction convertColorToCSSVars(obj: Record<string, string>) {\n  return Object.fromEntries(Object.entries(obj).map(([key, value]) => {\n    const color = Color(value).hsl().array();\n    return [\n      // Convert camelCase key to dash-case\n      key.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`),\n      // Convert color to CSS HSL string\n      `${color[0]} ${color[1]}% ${color[2]}%`\n    ];\n  }));\n}\n\nfunction convertColorsToCSS(theme: Theme) {\n  const { dark, light, ...rest } = theme;\n  const colors = {\n    light: { ...convertColorToCSSVars(light), ...rest },\n    dark: convertColorToCSSVars(dark),\n  };\n\n  function colorsToCSSVars(colors: Record<string, string>) {\n    return Object.entries(colors).map((params) => {\n      return `--${params[0]}: ${params[1]};\\n`;\n    }).join('');\n  }\n\n  return deindent`\n  .stack-scope {\n  ${colorsToCSSVars(colors.light)}\n  }\n  html:has(head > [data-stack-theme=\"dark\"]) .stack-scope {\n  ${colorsToCSSVars(colors.dark)}\n  }`;\n}\n\n\nexport function StackTheme({\n  theme,\n  children,\n  nonce,\n} : {\n  theme?: ThemeConfig,\n  children?: React.ReactNode,\n  nonce?: string,\n}) {\n  const themeValue: Theme = {\n    ...DEFAULT_THEME,\n    ...theme,\n    dark: { ...DEFAULT_THEME.dark, ...theme?.dark },\n    light: { ...DEFAULT_THEME.light, ...theme?.light },\n  };\n\n  return (\n    <>\n      <BrowserScript nonce={nonce} />\n      <style\n        suppressHydrationWarning // we need this since the nonce can differ between client and server\n        nonce={nonce}\n        dangerouslySetInnerHTML={{\n          __html: globalCSS + \"\\n\" + convertColorsToCSS(themeValue),\n        }}\n      />\n      {children}\n    </>\n  );\n}\n"],"mappings":";;;AAQA,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,OAAO,WAAW;AAClB,SAAS,gBAAgB;AAuFrB,mBACE,KADF;AApDJ,SAAS,sBAAsB,KAA6B;AAC1D,SAAO,OAAO,YAAY,OAAO,QAAQ,GAAG,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AAClE,UAAM,QAAQ,MAAM,KAAK,EAAE,IAAI,EAAE,MAAM;AACvC,WAAO;AAAA;AAAA,MAEL,IAAI,QAAQ,UAAU,OAAK,IAAI,EAAE,YAAY,CAAC,EAAE;AAAA;AAAA,MAEhD,GAAG,MAAM,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC;AAAA,IACtC;AAAA,EACF,CAAC,CAAC;AACJ;AAEA,SAAS,mBAAmB,OAAc;AACxC,QAAM,EAAE,MAAM,OAAO,GAAG,KAAK,IAAI;AACjC,QAAM,SAAS;AAAA,IACb,OAAO,EAAE,GAAG,sBAAsB,KAAK,GAAG,GAAG,KAAK;AAAA,IAClD,MAAM,sBAAsB,IAAI;AAAA,EAClC;AAEA,WAAS,gBAAgBA,SAAgC;AACvD,WAAO,OAAO,QAAQA,OAAM,EAAE,IAAI,CAAC,WAAW;AAC5C,aAAO,KAAK,OAAO,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC;AAAA;AAAA,IACrC,CAAC,EAAE,KAAK,EAAE;AAAA,EACZ;AAEA,SAAO;AAAA;AAAA,IAEL,gBAAgB,OAAO,KAAK,CAAC;AAAA;AAAA;AAAA,IAG7B,gBAAgB,OAAO,IAAI,CAAC;AAAA;AAEhC;AAGO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,aAAoB;AAAA,IACxB,GAAG;AAAA,IACH,GAAG;AAAA,IACH,MAAM,EAAE,GAAG,cAAc,MAAM,GAAG,OAAO,KAAK;AAAA,IAC9C,OAAO,EAAE,GAAG,cAAc,OAAO,GAAG,OAAO,MAAM;AAAA,EACnD;AAEA,SACE,iCACE;AAAA,wBAAC,iBAAc,OAAc;AAAA,IAC7B;AAAA,MAAC;AAAA;AAAA,QACC,0BAAwB;AAAA,QACxB;AAAA,QACA,yBAAyB;AAAA,UACvB,QAAQ,YAAY,OAAO,mBAAmB,UAAU;AAAA,QAC1D;AAAA;AAAA,IACF;AAAA,IACC;AAAA,KACH;AAEJ;","names":["colors"]}

package/dist/esm/providers/translation-provider-client.js

@@ -0,0 +1,18 @@
+"use client";
+"use client";
+
+// src/providers/translation-provider-client.tsx
+import { createContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var TranslationContext = createContext(null);
+function TranslationProviderClient(props) {
+  return /* @__PURE__ */ jsx(TranslationContext.Provider, { value: {
+    quetzalKeys: props.quetzalKeys,
+    quetzalLocale: props.quetzalLocale
+  }, children: props.children });
+}
+export {
+  TranslationContext,
+  TranslationProviderClient
+};
+//# sourceMappingURL=translation-provider-client.js.map

package/dist/esm/providers/translation-provider-client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/providers/translation-provider-client.tsx"],"sourcesContent":["\"use client\";\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\n\n\nimport { createContext, useContext } from \"react\";\n\nexport const TranslationContext = createContext<null | {\n  quetzalKeys: Map<string, string>,\n  quetzalLocale: Map<string, string>,\n}>(null);\n\nexport function TranslationProviderClient(props: {\n  children: React.ReactNode,\n  quetzalKeys: Map<string, string>,\n  quetzalLocale: Map<string, string>,\n}) {\n  return (\n    <TranslationContext.Provider value={{\n      quetzalKeys: props.quetzalKeys,\n      quetzalLocale: props.quetzalLocale,\n    }}>\n      {props.children}\n    </TranslationContext.Provider>\n  );\n}\n"],"mappings":";;;AAOA,SAAS,qBAAiC;AAatC;AAXG,IAAM,qBAAqB,cAG/B,IAAI;AAEA,SAAS,0BAA0B,OAIvC;AACD,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO;AAAA,IAClC,aAAa,MAAM;AAAA,IACnB,eAAe,MAAM;AAAA,EACvB,GACG,gBAAM,UACT;AAEJ;","names":[]}

package/dist/esm/providers/translation-provider.js

@@ -0,0 +1,18 @@
+// src/providers/translation-provider.tsx
+import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
+import { quetzalKeys, quetzalLocales } from "../generated/quetzal-translations";
+import { TranslationProviderClient } from "./translation-provider-client";
+import { jsx } from "react/jsx-runtime";
+function TranslationProvider({ lang, translationOverrides, children }) {
+  const locale = quetzalLocales.get(lang ?? void 0);
+  const localeWithOverrides = new Map(locale);
+  for (const [orig, override] of Object.entries(translationOverrides ?? {})) {
+    const key = quetzalKeys.get(orig) ?? throwErr(new Error(`Invalid translation override: Original key ${JSON.stringify(orig)} not found. Make sure you are passing the correct values into the translationOverrides property of the component.`));
+    localeWithOverrides.set(key, override);
+  }
+  return /* @__PURE__ */ jsx(TranslationProviderClient, { quetzalKeys, quetzalLocale: localeWithOverrides, children });
+}
+export {
+  TranslationProvider
+};
+//# sourceMappingURL=translation-provider.js.map

package/dist/esm/providers/translation-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/providers/translation-provider.tsx"],"sourcesContent":["//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\n\nimport { throwErr } from \"@stackframe/stack-shared/dist/utils/errors\";\nimport { quetzalKeys, quetzalLocales } from \"../generated/quetzal-translations\";\nimport { TranslationProviderClient } from \"./translation-provider-client\";\n\nexport function TranslationProvider({ lang, translationOverrides, children }: {\n  lang: Parameters<typeof quetzalLocales.get>[0] | undefined,\n  translationOverrides?: Record<string, string>,\n  children: React.ReactNode,\n}) {\n  const locale = quetzalLocales.get(lang ?? (undefined as never));\n\n  const localeWithOverrides = new Map<string, string>(locale);\n  for (const [orig, override] of Object.entries(translationOverrides ?? {})) {\n    const key = quetzalKeys.get(orig as never) ?? throwErr(new Error(`Invalid translation override: Original key ${JSON.stringify(orig)} not found. Make sure you are passing the correct values into the translationOverrides property of the component.`));\n    localeWithOverrides.set(key, override);\n  }\n\n  return <TranslationProviderClient quetzalKeys={quetzalKeys} quetzalLocale={localeWithOverrides}>\n    {children}\n  </TranslationProviderClient>;\n}\n"],"mappings":";AAIA,SAAS,gBAAgB;AACzB,SAAS,aAAa,sBAAsB;AAC5C,SAAS,iCAAiC;AAejC;AAbF,SAAS,oBAAoB,EAAE,MAAM,sBAAsB,SAAS,GAIxE;AACD,QAAM,SAAS,eAAe,IAAI,QAAS,MAAmB;AAE9D,QAAM,sBAAsB,IAAI,IAAoB,MAAM;AAC1D,aAAW,CAAC,MAAM,QAAQ,KAAK,OAAO,QAAQ,wBAAwB,CAAC,CAAC,GAAG;AACzE,UAAM,MAAM,YAAY,IAAI,IAAa,KAAK,SAAS,IAAI,MAAM,8CAA8C,KAAK,UAAU,IAAI,CAAC,mHAAmH,CAAC;AACvP,wBAAoB,IAAI,KAAK,QAAQ;AAAA,EACvC;AAEA,SAAO,oBAAC,6BAA0B,aAA0B,eAAe,qBACxE,UACH;AACF;","names":[]}

package/dist/esm/utils/browser-script.js

@@ -0,0 +1,112 @@
+// src/utils/browser-script.tsx
+import { SsrScript } from "../components/elements/ssr-layout-effect";
+import { jsx } from "react/jsx-runtime";
+var script = () => {
+  const attributes = ["data-joy-color-scheme", "data-mui-color-scheme", "data-theme", "data-color-scheme", "class"];
+  const getColorMode = (value) => {
+    if (value.includes("dark")) {
+      return "dark";
+    }
+    if (value.includes("light")) {
+      return "light";
+    }
+    return null;
+  };
+  const setTheme = (mode) => {
+    let el = document.getElementById(`--stack-theme-mode`);
+    if (!el) {
+      el = document.createElement("style");
+      el.id = `--stack-theme-mode`;
+      el.innerHTML = `/* This tag is used by Stack Auth to set the theme in the browser without causing a hydration error (since React ignores additional tags in the <head>). We later use the \`html:has(head > [data-stack-theme=XYZ])\` selector to apply styles based on the theme. */`;
+      document.head.appendChild(el);
+    }
+    el.setAttribute("data-stack-theme", mode);
+  };
+  const colorToRGB = (color) => {
+    const temp = document.createElement("div");
+    temp.style.color = color;
+    document.body.appendChild(temp);
+    const computedColor = getComputedStyle(temp).color;
+    document.body.removeChild(temp);
+    const match = computedColor.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+    if (match) {
+      return [parseInt(match[1]), parseInt(match[2]), parseInt(match[3])];
+    }
+    return null;
+  };
+  const rgbToLuma = (rgb) => {
+    return (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1e3;
+  };
+  const copyFromColorScheme = () => {
+    const colorScheme = getComputedStyle(document.documentElement).getPropertyValue("color-scheme");
+    if (colorScheme) {
+      const mode = getColorMode(colorScheme);
+      if (mode) {
+        setTheme(mode);
+        return true;
+      }
+    }
+    return false;
+  };
+  const copyFromVariables = () => {
+    let backgroundColor = getComputedStyle(document.documentElement).getPropertyValue("--background");
+    if (backgroundColor) {
+      if (/^\d+\s\d+%\s\d+(\.\d+)?%$/.test(backgroundColor)) {
+        backgroundColor = `hsl(${backgroundColor})`;
+      }
+      const rgb = colorToRGB(backgroundColor);
+      if (rgb) {
+        const luma = rgbToLuma(rgb);
+        if (luma < 128) {
+          setTheme("dark");
+        } else {
+          setTheme("light");
+        }
+        return true;
+      }
+    }
+    return false;
+  };
+  const copyFromAttributes = () => {
+    for (const attributeName of attributes) {
+      const colorTheme = document.documentElement.getAttribute(attributeName);
+      if (colorTheme) {
+        const mode = getColorMode(colorTheme);
+        if (mode) {
+          setTheme(mode);
+          return true;
+        }
+      }
+    }
+    return false;
+  };
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (copyFromColorScheme()) {
+        return;
+      }
+      if (mutation.attributeName && attributes.includes(mutation.attributeName) && copyFromAttributes()) {
+        return;
+      }
+      if (copyFromVariables()) {
+        return;
+      }
+    });
+  });
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: attributes
+  });
+  if (!copyFromColorScheme()) {
+    if (!copyFromAttributes()) {
+      copyFromVariables();
+    }
+  }
+};
+function BrowserScript(props) {
+  return /* @__PURE__ */ jsx(SsrScript, { nonce: props.nonce, script: `(${script.toString()})()` });
+}
+export {
+  BrowserScript
+};
+//# sourceMappingURL=browser-script.js.map

package/dist/esm/utils/browser-script.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/browser-script.tsx"],"sourcesContent":["//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\n\n// Note that this script can not import anything from outside as it will be converted to a string and executed in the browser.\n\nimport { SsrScript } from \"../components/elements/ssr-layout-effect\";\n\nconst script = () => {\n  const attributes = ['data-joy-color-scheme', 'data-mui-color-scheme', 'data-theme', 'data-color-scheme', 'class'];\n\n  const getColorMode = (value: string) => {\n    if (value.includes('dark')) {\n      return 'dark';\n    }\n    if (value.includes('light')) {\n      return 'light';\n    }\n    return null;\n  };\n\n  const setTheme = (mode: 'dark' | 'light') => {\n    let el = document.getElementById(`--stack-theme-mode`);\n    if (!el) {\n      el = document.createElement(\"style\");\n      el.id = `--stack-theme-mode`;\n      el.innerHTML = `/* This tag is used by Stack Auth to set the theme in the browser without causing a hydration error (since React ignores additional tags in the <head>). We later use the \\`html:has(head > [data-stack-theme=XYZ])\\` selector to apply styles based on the theme. */`;\n      document.head.appendChild(el);\n    }\n    el.setAttribute(\"data-stack-theme\", mode);\n  };\n\n  const colorToRGB = (color: string): [number, number, number] | null => {\n    // Create a temporary element to use for color conversion\n    const temp = document.createElement('div');\n    temp.style.color = color;\n    document.body.appendChild(temp);\n\n    // Get the computed style\n    const computedColor = getComputedStyle(temp).color;\n    document.body.removeChild(temp);\n\n    // Parse the RGB values\n    const match = computedColor.match(/^rgb\\((\\d+),\\s*(\\d+),\\s*(\\d+)\\)$/);\n    if (match) {\n      return [parseInt(match[1]), parseInt(match[2]), parseInt(match[3])];\n    }\n\n    return null;\n  };\n\n  const rgbToLuma = (rgb: [number, number, number]) => {\n    return (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;\n  };\n\n  const copyFromColorScheme = () => {\n    const colorScheme = getComputedStyle(document.documentElement).getPropertyValue('color-scheme');\n\n    if (colorScheme) {\n      const mode = getColorMode(colorScheme);\n      if (mode) {\n        setTheme(mode);\n        return true;\n      }\n    }\n    return false;\n  };\n\n  const copyFromVariables = () => {\n    let backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--background');\n    if (backgroundColor) {\n      // shadcn by default uses the hsl values with the format \"123 45% 6.5%\"\n      if (/^\\d+\\s\\d+%\\s\\d+(\\.\\d+)?%$/.test(backgroundColor)) {\n        backgroundColor = `hsl(${backgroundColor})`;\n      }\n\n      // convert backgroundColor to luma and check if it's dark\n      const rgb = colorToRGB(backgroundColor);\n      if (rgb) {\n        const luma = rgbToLuma(rgb);\n        if (luma < 128) {\n          setTheme('dark');\n        } else {\n          setTheme('light');\n        }\n        return true;\n      }\n    }\n    return false;\n  };\n\n  const copyFromAttributes = () => {\n    for (const attributeName of attributes) {\n      const colorTheme = document.documentElement.getAttribute(attributeName);\n      if (colorTheme) {\n        const mode = getColorMode(colorTheme);\n        if (mode) {\n          setTheme(mode);\n          return true;\n        }\n      }\n    }\n    return false;\n  };\n\n  const observer = new MutationObserver((mutations) => {\n    mutations.forEach((mutation) => {\n      if (copyFromColorScheme()) {\n        return;\n      }\n      if (mutation.attributeName && attributes.includes(mutation.attributeName) && copyFromAttributes()) {\n        return;\n      }\n      if (copyFromVariables()) {\n        return;\n      }\n    });\n  });\n\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: attributes,\n  });\n\n  // Initial check on page load\n  if (!copyFromColorScheme()) {\n    if (!copyFromAttributes()) {\n      copyFromVariables();\n    }\n  }\n};\n\nexport function BrowserScript(props : { nonce?: string }) {\n  return <SsrScript nonce={props.nonce} script={`(${script.toString()})()`}/>;\n}\n"],"mappings":"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","names":[]}

package/dist/esm/utils/constants.js

@@ -0,0 +1,66 @@
+// src/utils/constants.tsx
+var FONT_SIZES = { "xs": "0.75rem", "sm": "0.875rem", "md": "1rem", "lg": "1.125rem", "xl": "1.25rem" };
+var LINE_HEIGHTS = { "xs": "1rem", "sm": "1.25rem", "md": "1.5rem", "lg": "1.75rem", "xl": "2rem" };
+var FONT_FAMILY = 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"';
+var PRIMARY_FONT_COLORS = { "dark": "white", "light": "black" };
+var SECONDARY_FONT_COLORS = { "dark": "#a8a8a8", "light": "#737373" };
+var SELECTED_BACKGROUND_COLORS = { "dark": "rgba(255, 255, 255, 0.1)", "light": "rgba(0, 0, 0, 0.04)" };
+var LINK_COLORS = { "dark": "#fff", "light": "#000" };
+var SHADOW = "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
+var DEFAULT_THEME = {
+  light: {
+    background: "hsl(0 0% 100%)",
+    foreground: "hsl(240 10% 3.9%)",
+    card: "hsl(0 0% 100%)",
+    cardForeground: "hsl(240 10% 3.9%)",
+    popover: "hsl(0 0% 100%)",
+    popoverForeground: "hsl(240 10% 3.9%)",
+    primary: "hsl(240 5.9% 10%)",
+    primaryForeground: "hsl(0 0% 98%)",
+    secondary: "hsl(240 4.8% 95.9%)",
+    secondaryForeground: "hsl(240 5.9% 10%)",
+    muted: "hsl(240 4.8% 95.9%)",
+    mutedForeground: "hsl(240 3.8% 46.1%)",
+    accent: "hsl(240 4.8% 95.9%)",
+    accentForeground: "hsl(240 5.9% 10%)",
+    destructive: "hsl(0 84.2% 60.2%)",
+    destructiveForeground: "hsl(0 0% 98%)",
+    border: "hsl(240 5.9% 90%)",
+    input: "hsl(240 5.9% 90%)",
+    ring: "hsl(240 10% 3.9%)"
+  },
+  dark: {
+    background: "hsl(240 10% 3.9%)",
+    foreground: "hsl(0 0% 98%)",
+    card: "hsl(240 10% 3.9%)",
+    cardForeground: "hsl(0 0% 98%)",
+    popover: "hsl(240 10% 3.9%)",
+    popoverForeground: "hsl(0 0% 98%)",
+    primary: "hsl(0 0% 98%)",
+    primaryForeground: "hsl(240 5.9% 10%)",
+    secondary: "hsl(240 3.7% 15.9%)",
+    secondaryForeground: "hsl(0 0% 98%)",
+    muted: "hsl(240 3.7% 15.9%)",
+    mutedForeground: "hsl(240 5% 64.9%)",
+    accent: "hsl(240 3.7% 15.9%)",
+    accentForeground: "hsl(0 0% 98%)",
+    destructive: "hsl(0 62.8% 50%)",
+    destructiveForeground: "hsl(0 0% 98%)",
+    border: "hsl(240 3.7% 15.9%)",
+    input: "hsl(240 3.7% 15.9%)",
+    ring: "hsl(240 4.9% 83.9%)"
+  },
+  radius: "0.5rem"
+};
+export {
+  DEFAULT_THEME,
+  FONT_FAMILY,
+  FONT_SIZES,
+  LINE_HEIGHTS,
+  LINK_COLORS,
+  PRIMARY_FONT_COLORS,
+  SECONDARY_FONT_COLORS,
+  SELECTED_BACKGROUND_COLORS,
+  SHADOW
+};
+//# sourceMappingURL=constants.js.map

package/dist/esm/utils/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/constants.tsx"],"sourcesContent":["//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\n\nexport const FONT_SIZES = { 'xs': '0.75rem', 'sm': '0.875rem', 'md': '1rem', 'lg': '1.125rem', 'xl': '1.25rem' } as const;\nexport const LINE_HEIGHTS = { 'xs': '1rem', 'sm': '1.25rem', 'md': '1.5rem', 'lg': '1.75rem', 'xl': '2rem' } as const;\nexport const FONT_FAMILY = 'ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"';\nexport const PRIMARY_FONT_COLORS = { 'dark': 'white', 'light': 'black' } as const;\nexport const SECONDARY_FONT_COLORS = { 'dark': '#a8a8a8', 'light': '#737373' } as const;\nexport const SELECTED_BACKGROUND_COLORS = { 'dark': 'rgba(255, 255, 255, 0.1)', 'light': 'rgba(0, 0, 0, 0.04)' } as const;\nexport const LINK_COLORS = { 'dark': '#fff', 'light': '#000' } as const;\nexport const SHADOW = '0 1px 2px 0 rgba(0, 0, 0, 0.05)';\n\nexport const DEFAULT_THEME = {\n  light: {\n    background: 'hsl(0 0% 100%)',\n    foreground: 'hsl(240 10% 3.9%)',\n    card: 'hsl(0 0% 100%)',\n    cardForeground: 'hsl(240 10% 3.9%)',\n    popover: 'hsl(0 0% 100%)',\n    popoverForeground: 'hsl(240 10% 3.9%)',\n    primary: 'hsl(240 5.9% 10%)',\n    primaryForeground: 'hsl(0 0% 98%)',\n    secondary: 'hsl(240 4.8% 95.9%)',\n    secondaryForeground: 'hsl(240 5.9% 10%)',\n    muted: 'hsl(240 4.8% 95.9%)',\n    mutedForeground: 'hsl(240 3.8% 46.1%)',\n    accent: 'hsl(240 4.8% 95.9%)',\n    accentForeground: 'hsl(240 5.9% 10%)',\n    destructive: 'hsl(0 84.2% 60.2%)',\n    destructiveForeground: 'hsl(0 0% 98%)',\n    border: 'hsl(240 5.9% 90%)',\n    input: 'hsl(240 5.9% 90%)',\n    ring: 'hsl(240 10% 3.9%)',\n  },\n  dark: {\n    background: 'hsl(240 10% 3.9%)',\n    foreground: 'hsl(0 0% 98%)',\n    card: 'hsl(240 10% 3.9%)',\n    cardForeground: 'hsl(0 0% 98%)',\n    popover: 'hsl(240 10% 3.9%)',\n    popoverForeground: 'hsl(0 0% 98%)',\n    primary: 'hsl(0 0% 98%)',\n    primaryForeground: 'hsl(240 5.9% 10%)',\n    secondary: 'hsl(240 3.7% 15.9%)',\n    secondaryForeground: 'hsl(0 0% 98%)',\n    muted: 'hsl(240 3.7% 15.9%)',\n    mutedForeground: 'hsl(240 5% 64.9%)',\n    accent: 'hsl(240 3.7% 15.9%)',\n    accentForeground: 'hsl(0 0% 98%)',\n    destructive: 'hsl(0 62.8% 50%)',\n    destructiveForeground: 'hsl(0 0% 98%)',\n    border: 'hsl(240 3.7% 15.9%)',\n    input: 'hsl(240 3.7% 15.9%)',\n    ring: 'hsl(240 4.9% 83.9%)',\n  },\n  radius: '0.5rem',\n} as const;\n"],"mappings":";AAIO,IAAM,aAAa,EAAE,MAAM,WAAW,MAAM,YAAY,MAAM,QAAQ,MAAM,YAAY,MAAM,UAAU;AACxG,IAAM,eAAe,EAAE,MAAM,QAAQ,MAAM,WAAW,MAAM,UAAU,MAAM,WAAW,MAAM,OAAO;AACpG,IAAM,cAAc;AACpB,IAAM,sBAAsB,EAAE,QAAQ,SAAS,SAAS,QAAQ;AAChE,IAAM,wBAAwB,EAAE,QAAQ,WAAW,SAAS,UAAU;AACtE,IAAM,6BAA6B,EAAE,QAAQ,4BAA4B,SAAS,sBAAsB;AACxG,IAAM,cAAc,EAAE,QAAQ,QAAQ,SAAS,OAAO;AACtD,IAAM,SAAS;AAEf,IAAM,gBAAgB;AAAA,EAC3B,OAAO;AAAA,IACL,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,mBAAmB;AAAA,IACnB,SAAS;AAAA,IACT,mBAAmB;AAAA,IACnB,WAAW;AAAA,IACX,qBAAqB;AAAA,IACrB,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,kBAAkB;AAAA,IAClB,aAAa;AAAA,IACb,uBAAuB;AAAA,IACvB,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,MAAM;AAAA,IACJ,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,mBAAmB;AAAA,IACnB,SAAS;AAAA,IACT,mBAAmB;AAAA,IACnB,WAAW;AAAA,IACX,qBAAqB;AAAA,IACrB,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,kBAAkB;AAAA,IAClB,aAAa;AAAA,IACb,uBAAuB;AAAA,IACvB,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,QAAQ;AACV;","names":[]}

package/dist/esm/utils/url.js

@@ -0,0 +1,30 @@
+// src/utils/url.ts
+function autoRedirect() {
+  const url = new URL(window.location.href);
+  const redirectUrl = url.searchParams.get("auto-redirect-url");
+  if (redirectUrl) {
+    const urlObject = new URL(redirectUrl);
+    if (urlObject.origin !== window.location.origin) {
+      throw new Error("auto-redirect-url is not same origin (" + urlObject.origin + " !== " + window.location.origin + ")");
+    }
+    url.searchParams.delete("auto-redirect-url");
+    window.location.replace(urlObject.href);
+  }
+}
+function constructRedirectUrl(redirectUrl) {
+  const retainedQueryParams = ["after_auth_return_to"];
+  const currentUrl = new URL(window.location.href);
+  const url = redirectUrl ? new URL(redirectUrl, window.location.href) : new URL(window.location.href);
+  for (const param of retainedQueryParams) {
+    if (currentUrl.searchParams.has(param)) {
+      url.searchParams.set(param, currentUrl.searchParams.get(param));
+    }
+  }
+  url.hash = "";
+  return url.toString();
+}
+export {
+  autoRedirect,
+  constructRedirectUrl
+};
+//# sourceMappingURL=url.js.map

package/dist/esm/utils/url.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/url.ts"],"sourcesContent":["//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\n\nexport function autoRedirect() {\n  const url = new URL(window.location.href);\n  const redirectUrl = url.searchParams.get(\"auto-redirect-url\");\n  if (redirectUrl) {\n    const urlObject = new URL(redirectUrl);\n    if (urlObject.origin !== window.location.origin) {\n      throw new Error(\"auto-redirect-url is not same origin (\" + urlObject.origin + \" !== \" + window.location.origin + \")\");\n    }\n    url.searchParams.delete(\"auto-redirect-url\");\n    window.location.replace(urlObject.href);\n  }\n}\n\nexport function constructRedirectUrl(redirectUrl: URL | string | undefined) {\n  const retainedQueryParams = [\"after_auth_return_to\"];\n  const currentUrl = new URL(window.location.href);\n  const url = redirectUrl ? new URL(redirectUrl, window.location.href) : new URL(window.location.href);\n  for (const param of retainedQueryParams) {\n    if (currentUrl.searchParams.has(param)) {\n      url.searchParams.set(param, currentUrl.searchParams.get(param)!);\n    }\n  }\n  url.hash = \"\";\n  return url.toString();\n}\n"],"mappings":";AAIO,SAAS,eAAe;AAC7B,QAAM,MAAM,IAAI,IAAI,OAAO,SAAS,IAAI;AACxC,QAAM,cAAc,IAAI,aAAa,IAAI,mBAAmB;AAC5D,MAAI,aAAa;AACf,UAAM,YAAY,IAAI,IAAI,WAAW;AACrC,QAAI,UAAU,WAAW,OAAO,SAAS,QAAQ;AAC/C,YAAM,IAAI,MAAM,2CAA2C,UAAU,SAAS,UAAU,OAAO,SAAS,SAAS,GAAG;AAAA,IACtH;AACA,QAAI,aAAa,OAAO,mBAAmB;AAC3C,WAAO,SAAS,QAAQ,UAAU,IAAI;AAAA,EACxC;AACF;AAEO,SAAS,qBAAqB,aAAuC;AAC1E,QAAM,sBAAsB,CAAC,sBAAsB;AACnD,QAAM,aAAa,IAAI,IAAI,OAAO,SAAS,IAAI;AAC/C,QAAM,MAAM,cAAc,IAAI,IAAI,aAAa,OAAO,SAAS,IAAI,IAAI,IAAI,IAAI,OAAO,SAAS,IAAI;AACnG,aAAW,SAAS,qBAAqB;AACvC,QAAI,WAAW,aAAa,IAAI,KAAK,GAAG;AACtC,UAAI,aAAa,IAAI,OAAO,WAAW,aAAa,IAAI,KAAK,CAAE;AAAA,IACjE;AAAA,EACF;AACA,MAAI,OAAO;AACX,SAAO,IAAI,SAAS;AACtB;","names":[]}