@protonradio/proton-ui 0.11.4 → 0.11.5-beta.1

package/dist/copy-B-xGO04t.mjs

@@ -0,0 +1,43 @@
+function r(...t) {
+  return t.filter(i).join(" ");
+}
+const i = (t) => typeof t == "string" || t instanceof String, p = (t) => t.startsWith("http"), d = (t, n) => {
+  if (t.metaKey || t.altKey || t.ctrlKey || t.shiftKey || t.button && t.button !== 0)
+    return;
+  t.preventDefault();
+  const e = n.startsWith("/") ? n : `/${n}`;
+  window.history.pushState({}, "", e), window.dispatchEvent(new PopStateEvent("popstate"));
+}, u = async (t, n) => {
+  let e = !1;
+  if (navigator.clipboard)
+    try {
+      await navigator.clipboard.writeText(t), e = !0;
+    } catch (a) {
+      n ? n == null || n(a) : console.error(a);
+    }
+  else
+    e = l(t);
+  return e || (n ? n == null || n(new Error("Failed to copy to clipboard")) : console.error("Failed to copy to clipboard")), e;
+}, l = (t, { target: n = document.body } = {}) => {
+  if (typeof t != "string")
+    throw new TypeError(
+      `Expected parameter \`text\` to be a \`string\`, got \`${typeof t}\`.`
+    );
+  const e = document.createElement("textarea"), a = document.activeElement;
+  e.value = t, e.setAttribute("readonly", ""), e.style.contain = "strict", e.style.position = "absolute", e.style.left = "-9999px", e.style.fontSize = "12pt";
+  const o = document.getSelection(), s = o.rangeCount > 0 && o.getRangeAt(0);
+  n.append(e), e.select(), e.selectionStart = 0, e.selectionEnd = t.length;
+  let c = !1;
+  try {
+    c = document.execCommand("copy");
+  } catch {
+  }
+  return e.remove(), s && (o.removeAllRanges(), o.addRange(s)), a instanceof HTMLElement && a.focus(), c;
+};
+export {
+  u as a,
+  r as c,
+  d as h,
+  p as i
+};
+//# sourceMappingURL=copy-B-xGO04t.mjs.map

package/dist/copy-B-xGO04t.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-B-xGO04t.mjs","sources":["../src/utils/string.ts","../src/utils/navigation.ts","../src/utils/copy.ts"],"sourcesContent":["/**\r\n * Concatenates class names into a single string, filtering out non-string values.\r\n */\r\nexport function csx(...classnames: unknown[]): string {\r\n  return classnames.filter(isString).join(\" \");\r\n}\r\n\r\nconst isString = (x: unknown): boolean =>\r\n  typeof x === \"string\" || x instanceof String;\r\n","/**\r\n * [isUrlExternal] - determine if passed absolute url is external to the current domain.\r\n */\r\nexport const isUrlExternal = (url: string) => {\r\n  return url.startsWith(\"http\");\r\n};\r\n\r\n/**\r\n * Handles internal navigation clicks by preventing default browser behavior and\r\n * programmatically updating the URL and history state.\r\n *\r\n * @param e - The click event from the anchor element\r\n * @param to - The destination path to navigate to\r\n *\r\n * @remarks\r\n * - Converts relative paths to absolute by prepending \"/\" if needed\r\n * - Updates browser history using pushState and dispatches a popstate event\r\n */\r\nexport const handleInternalNavigation = (\r\n  e: React.MouseEvent<HTMLAnchorElement>,\r\n  to: string\r\n) => {\r\n  // Don't handle navigation if modifier keys are pressed\r\n  if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) {\r\n    return;\r\n  }\r\n\r\n  // Don't handle middle clicks or right clicks\r\n  if (e.button && e.button !== 0) {\r\n    return;\r\n  }\r\n\r\n  e.preventDefault();\r\n\r\n  // Handle relative paths\r\n  const resolvedPath = to.startsWith(\"/\") ? to : `/${to}`;\r\n  window.history.pushState({}, \"\", resolvedPath);\r\n  window.dispatchEvent(new PopStateEvent(\"popstate\"));\r\n};\r\n","export const copyTextToClipboard = async (\r\n  text: string,\r\n  onError?: (error: Error) => void\r\n): Promise<boolean> => {\r\n  let copySuccess = false;\r\n  if (navigator.clipboard) {\r\n    try {\r\n      await navigator.clipboard.writeText(text);\r\n      copySuccess = true;\r\n    } catch (error) {\r\n      onError ? onError?.(error) : console.error(error);\r\n    }\r\n  } else {\r\n    copySuccess = DEPRECATED_copyTextToClipboard(text);\r\n  }\r\n  if (!copySuccess) {\r\n    onError ? onError?.(new Error(\"Failed to copy to clipboard\")) : console.error(\"Failed to copy to clipboard\");\r\n  }\r\n  return copySuccess;\r\n};\r\n\r\n/**\r\n * Fallback legacy function to copy text to clipboard for browsers that don't support navigator.clipboard.writeText\r\n * @reference https://github.com/sindresorhus/copy-text-to-clipboard/blob/main/index.js\r\n * @deprecated Use navigator.clipboard.writeText instead\r\n */\r\nconst DEPRECATED_copyTextToClipboard = (\r\n  text,\r\n  { target = document.body } = {}\r\n) => {\r\n  if (typeof text !== \"string\") {\r\n    throw new TypeError(\r\n      `Expected parameter \\`text\\` to be a \\`string\\`, got \\`${typeof text}\\`.`\r\n    );\r\n  }\r\n\r\n  const element = document.createElement(\"textarea\");\r\n  const previouslyFocusedElement = document.activeElement;\r\n\r\n  element.value = text;\r\n\r\n  // Prevent keyboard from showing on mobile\r\n  element.setAttribute(\"readonly\", \"\");\r\n\r\n  element.style.contain = \"strict\";\r\n  element.style.position = \"absolute\";\r\n  element.style.left = \"-9999px\";\r\n  element.style.fontSize = \"12pt\"; // Prevent zooming on iOS\r\n\r\n  const selection = document.getSelection();\r\n  const originalRange = selection.rangeCount > 0 && selection.getRangeAt(0);\r\n\r\n  target.append(element);\r\n  element.select();\r\n\r\n  // Explicit selection workaround for iOS\r\n  element.selectionStart = 0;\r\n  element.selectionEnd = text.length;\r\n\r\n  let isSuccess = false;\r\n  try {\r\n    isSuccess = document.execCommand(\"copy\");\r\n  } catch {}\r\n\r\n  element.remove();\r\n\r\n  if (originalRange) {\r\n    selection.removeAllRanges();\r\n    selection.addRange(originalRange);\r\n  }\r\n\r\n  // Get the focus back on the previously focused element, if any\r\n  if (previouslyFocusedElement instanceof HTMLElement) {\r\n    previouslyFocusedElement.focus();\r\n  }\r\n\r\n  return isSuccess;\r\n};\r\n"],"names":["csx","classnames","isString","x","isUrlExternal","url","handleInternalNavigation","e","to","resolvedPath","copyTextToClipboard","text","onError","copySuccess","error","DEPRECATED_copyTextToClipboard","target","element","previouslyFocusedElement","selection","originalRange","isSuccess"],"mappings":"AAGO,SAASA,KAAOC,GAA+B;AACpD,SAAOA,EAAW,OAAOC,CAAQ,EAAE,KAAK,GAAG;AAC7C;AAEA,MAAMA,IAAW,CAACC,MAChB,OAAOA,KAAM,YAAYA,aAAa,QCL3BC,IAAgB,CAACC,MACrBA,EAAI,WAAW,MAAM,GAcjBC,IAA2B,CACtCC,GACAC,MACG;AAOH,MALID,EAAE,WAAWA,EAAE,UAAUA,EAAE,WAAWA,EAAE,YAKxCA,EAAE,UAAUA,EAAE,WAAW;AAC3B;AAGF,EAAAA,EAAE,eAAe;AAGjB,QAAME,IAAeD,EAAG,WAAW,GAAG,IAAIA,IAAK,IAAIA,CAAE;AACrD,SAAO,QAAQ,UAAU,CAAC,GAAG,IAAIC,CAAY,GAC7C,OAAO,cAAc,IAAI,cAAc,UAAU,CAAC;AACpD,GCtCaC,IAAsB,OACjCC,GACAC,MACqB;AACrB,MAAIC,IAAc;AAClB,MAAI,UAAU;AACR,QAAA;AACI,YAAA,UAAU,UAAU,UAAUF,CAAI,GAC1BE,IAAA;AAAA,aACPC,GAAO;AACd,MAAAF,IAAUA,KAAA,QAAAA,EAAUE,KAAS,QAAQ,MAAMA,CAAK;AAAA,IAClD;AAAA;AAEA,IAAAD,IAAcE,EAA+BJ,CAAI;AAEnD,SAAKE,MACOD,IAAAA,KAAA,QAAAA,EAAU,IAAI,MAAM,6BAA6B,KAAK,QAAQ,MAAM,6BAA6B,IAEtGC;AACT,GAOME,IAAiC,CACrCJ,GACA,EAAE,QAAAK,IAAS,SAAS,KAAS,IAAA,OAC1B;AACC,MAAA,OAAOL,KAAS;AAClB,UAAM,IAAI;AAAA,MACR,yDAAyD,OAAOA,CAAI;AAAA,IAAA;AAIlE,QAAAM,IAAU,SAAS,cAAc,UAAU,GAC3CC,IAA2B,SAAS;AAE1C,EAAAD,EAAQ,QAAQN,GAGRM,EAAA,aAAa,YAAY,EAAE,GAEnCA,EAAQ,MAAM,UAAU,UACxBA,EAAQ,MAAM,WAAW,YACzBA,EAAQ,MAAM,OAAO,WACrBA,EAAQ,MAAM,WAAW;AAEnB,QAAAE,IAAY,SAAS,gBACrBC,IAAgBD,EAAU,aAAa,KAAKA,EAAU,WAAW,CAAC;AAExE,EAAAH,EAAO,OAAOC,CAAO,GACrBA,EAAQ,OAAO,GAGfA,EAAQ,iBAAiB,GACzBA,EAAQ,eAAeN,EAAK;AAE5B,MAAIU,IAAY;AACZ,MAAA;AACU,IAAAA,IAAA,SAAS,YAAY,MAAM;AAAA,EAAA,QACjC;AAAA,EAAC;AAET,SAAAJ,EAAQ,OAAO,GAEXG,MACFD,EAAU,gBAAgB,GAC1BA,EAAU,SAASC,CAAa,IAI9BF,aAAoC,eACtCA,EAAyB,MAAM,GAG1BG;AACT;"}

package/dist/copy-CNHg70jK.js

@@ -0,0 +1,2 @@
+"use strict";function c(...t){return t.filter(l).join(" ")}const l=t=>typeof t=="string"||t instanceof String,r=t=>t.startsWith("http"),p=(t,n)=>{if(t.metaKey||t.altKey||t.ctrlKey||t.shiftKey||t.button&&t.button!==0)return;t.preventDefault();const e=n.startsWith("/")?n:`/${n}`;window.history.pushState({},"",e),window.dispatchEvent(new PopStateEvent("popstate"))},d=async(t,n)=>{let e=!1;if(navigator.clipboard)try{await navigator.clipboard.writeText(t),e=!0}catch(a){n?n==null||n(a):console.error(a)}else e=u(t);return e||(n?n==null||n(new Error("Failed to copy to clipboard")):console.error("Failed to copy to clipboard")),e},u=(t,{target:n=document.body}={})=>{if(typeof t!="string")throw new TypeError(`Expected parameter \`text\` to be a \`string\`, got \`${typeof t}\`.`);const e=document.createElement("textarea"),a=document.activeElement;e.value=t,e.setAttribute("readonly",""),e.style.contain="strict",e.style.position="absolute",e.style.left="-9999px",e.style.fontSize="12pt";const o=document.getSelection(),i=o.rangeCount>0&&o.getRangeAt(0);n.append(e),e.select(),e.selectionStart=0,e.selectionEnd=t.length;let s=!1;try{s=document.execCommand("copy")}catch{}return e.remove(),i&&(o.removeAllRanges(),o.addRange(i)),a instanceof HTMLElement&&a.focus(),s};exports.copyTextToClipboard=d;exports.csx=c;exports.handleInternalNavigation=p;exports.isUrlExternal=r;
+//# sourceMappingURL=copy-CNHg70jK.js.map

package/dist/copy-CNHg70jK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-CNHg70jK.js","sources":["../src/utils/string.ts","../src/utils/navigation.ts","../src/utils/copy.ts"],"sourcesContent":["/**\r\n * Concatenates class names into a single string, filtering out non-string values.\r\n */\r\nexport function csx(...classnames: unknown[]): string {\r\n  return classnames.filter(isString).join(\" \");\r\n}\r\n\r\nconst isString = (x: unknown): boolean =>\r\n  typeof x === \"string\" || x instanceof String;\r\n","/**\r\n * [isUrlExternal] - determine if passed absolute url is external to the current domain.\r\n */\r\nexport const isUrlExternal = (url: string) => {\r\n  return url.startsWith(\"http\");\r\n};\r\n\r\n/**\r\n * Handles internal navigation clicks by preventing default browser behavior and\r\n * programmatically updating the URL and history state.\r\n *\r\n * @param e - The click event from the anchor element\r\n * @param to - The destination path to navigate to\r\n *\r\n * @remarks\r\n * - Converts relative paths to absolute by prepending \"/\" if needed\r\n * - Updates browser history using pushState and dispatches a popstate event\r\n */\r\nexport const handleInternalNavigation = (\r\n  e: React.MouseEvent<HTMLAnchorElement>,\r\n  to: string\r\n) => {\r\n  // Don't handle navigation if modifier keys are pressed\r\n  if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) {\r\n    return;\r\n  }\r\n\r\n  // Don't handle middle clicks or right clicks\r\n  if (e.button && e.button !== 0) {\r\n    return;\r\n  }\r\n\r\n  e.preventDefault();\r\n\r\n  // Handle relative paths\r\n  const resolvedPath = to.startsWith(\"/\") ? to : `/${to}`;\r\n  window.history.pushState({}, \"\", resolvedPath);\r\n  window.dispatchEvent(new PopStateEvent(\"popstate\"));\r\n};\r\n","export const copyTextToClipboard = async (\r\n  text: string,\r\n  onError?: (error: Error) => void\r\n): Promise<boolean> => {\r\n  let copySuccess = false;\r\n  if (navigator.clipboard) {\r\n    try {\r\n      await navigator.clipboard.writeText(text);\r\n      copySuccess = true;\r\n    } catch (error) {\r\n      onError ? onError?.(error) : console.error(error);\r\n    }\r\n  } else {\r\n    copySuccess = DEPRECATED_copyTextToClipboard(text);\r\n  }\r\n  if (!copySuccess) {\r\n    onError ? onError?.(new Error(\"Failed to copy to clipboard\")) : console.error(\"Failed to copy to clipboard\");\r\n  }\r\n  return copySuccess;\r\n};\r\n\r\n/**\r\n * Fallback legacy function to copy text to clipboard for browsers that don't support navigator.clipboard.writeText\r\n * @reference https://github.com/sindresorhus/copy-text-to-clipboard/blob/main/index.js\r\n * @deprecated Use navigator.clipboard.writeText instead\r\n */\r\nconst DEPRECATED_copyTextToClipboard = (\r\n  text,\r\n  { target = document.body } = {}\r\n) => {\r\n  if (typeof text !== \"string\") {\r\n    throw new TypeError(\r\n      `Expected parameter \\`text\\` to be a \\`string\\`, got \\`${typeof text}\\`.`\r\n    );\r\n  }\r\n\r\n  const element = document.createElement(\"textarea\");\r\n  const previouslyFocusedElement = document.activeElement;\r\n\r\n  element.value = text;\r\n\r\n  // Prevent keyboard from showing on mobile\r\n  element.setAttribute(\"readonly\", \"\");\r\n\r\n  element.style.contain = \"strict\";\r\n  element.style.position = \"absolute\";\r\n  element.style.left = \"-9999px\";\r\n  element.style.fontSize = \"12pt\"; // Prevent zooming on iOS\r\n\r\n  const selection = document.getSelection();\r\n  const originalRange = selection.rangeCount > 0 && selection.getRangeAt(0);\r\n\r\n  target.append(element);\r\n  element.select();\r\n\r\n  // Explicit selection workaround for iOS\r\n  element.selectionStart = 0;\r\n  element.selectionEnd = text.length;\r\n\r\n  let isSuccess = false;\r\n  try {\r\n    isSuccess = document.execCommand(\"copy\");\r\n  } catch {}\r\n\r\n  element.remove();\r\n\r\n  if (originalRange) {\r\n    selection.removeAllRanges();\r\n    selection.addRange(originalRange);\r\n  }\r\n\r\n  // Get the focus back on the previously focused element, if any\r\n  if (previouslyFocusedElement instanceof HTMLElement) {\r\n    previouslyFocusedElement.focus();\r\n  }\r\n\r\n  return isSuccess;\r\n};\r\n"],"names":["csx","classnames","isString","x","isUrlExternal","url","handleInternalNavigation","e","to","resolvedPath","copyTextToClipboard","text","onError","copySuccess","error","DEPRECATED_copyTextToClipboard","target","element","previouslyFocusedElement","selection","originalRange","isSuccess"],"mappings":"aAGO,SAASA,KAAOC,EAA+B,CACpD,OAAOA,EAAW,OAAOC,CAAQ,EAAE,KAAK,GAAG,CAC7C,CAEA,MAAMA,EAAYC,GAChB,OAAOA,GAAM,UAAYA,aAAa,OCL3BC,EAAiBC,GACrBA,EAAI,WAAW,MAAM,EAcjBC,EAA2B,CACtCC,EACAC,IACG,CAOH,GALID,EAAE,SAAWA,EAAE,QAAUA,EAAE,SAAWA,EAAE,UAKxCA,EAAE,QAAUA,EAAE,SAAW,EAC3B,OAGFA,EAAE,eAAe,EAGjB,MAAME,EAAeD,EAAG,WAAW,GAAG,EAAIA,EAAK,IAAIA,CAAE,GACrD,OAAO,QAAQ,UAAU,CAAC,EAAG,GAAIC,CAAY,EAC7C,OAAO,cAAc,IAAI,cAAc,UAAU,CAAC,CACpD,ECtCaC,EAAsB,MACjCC,EACAC,IACqB,CACrB,IAAIC,EAAc,GAClB,GAAI,UAAU,UACR,GAAA,CACI,MAAA,UAAU,UAAU,UAAUF,CAAI,EAC1BE,EAAA,SACPC,EAAO,CACdF,EAAUA,GAAA,MAAAA,EAAUE,GAAS,QAAQ,MAAMA,CAAK,CAClD,MAEAD,EAAcE,EAA+BJ,CAAI,EAEnD,OAAKE,IACOD,EAAAA,GAAA,MAAAA,EAAU,IAAI,MAAM,6BAA6B,GAAK,QAAQ,MAAM,6BAA6B,GAEtGC,CACT,EAOME,EAAiC,CACrCJ,EACA,CAAE,OAAAK,EAAS,SAAS,IAAS,EAAA,KAC1B,CACC,GAAA,OAAOL,GAAS,SAClB,MAAM,IAAI,UACR,yDAAyD,OAAOA,CAAI,KAAA,EAIlE,MAAAM,EAAU,SAAS,cAAc,UAAU,EAC3CC,EAA2B,SAAS,cAE1CD,EAAQ,MAAQN,EAGRM,EAAA,aAAa,WAAY,EAAE,EAEnCA,EAAQ,MAAM,QAAU,SACxBA,EAAQ,MAAM,SAAW,WACzBA,EAAQ,MAAM,KAAO,UACrBA,EAAQ,MAAM,SAAW,OAEnB,MAAAE,EAAY,SAAS,eACrBC,EAAgBD,EAAU,WAAa,GAAKA,EAAU,WAAW,CAAC,EAExEH,EAAO,OAAOC,CAAO,EACrBA,EAAQ,OAAO,EAGfA,EAAQ,eAAiB,EACzBA,EAAQ,aAAeN,EAAK,OAE5B,IAAIU,EAAY,GACZ,GAAA,CACUA,EAAA,SAAS,YAAY,MAAM,CAAA,MACjC,CAAC,CAET,OAAAJ,EAAQ,OAAO,EAEXG,IACFD,EAAU,gBAAgB,EAC1BA,EAAU,SAASC,CAAa,GAI9BF,aAAoC,aACtCA,EAAyB,MAAM,EAG1BG,CACT"}

package/dist/hooks.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./useBreakpoint-CA9tMMV8.js"),P=require("./colors-CebzFjpe.js"),r=require("./colors-DL1dYffC.js"),o=require("react"),i=require("./image-CUSfY1_T.js"),T=require("./theme.cjs.js"),E=(e,l)=>{const[c,s]=o.useState(r.LIGHT_PALETTE),a=o.useCallback(async()=>{if(!e)return r.LIGHT_PALETTE;try{const t=await i.getDominantColor(e);return i.generatePalette(t)}catch(t){return console.error("Failed to generate palette:",t),r.LIGHT_PALETTE}},[e]);return o.useEffect(()=>{(async()=>{if(e){const u=await a();s(u);return}if(l===T.THEMES.DARK){s(P.DARK_PALETTE);return}s(r.LIGHT_PALETTE)})()},[e,l,a]),o.useMemo(()=>c,[c])};exports.useBreakpoint=n.useBreakpoint;exports.useIsClosing=n.useIsClosing;exports.useLockBodyScroll=n.useLockBodyScroll;exports.usePalette=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./useBreakpoint-DA-JqOu3.js"),P=require("./colors-CebzFjpe.js"),r=require("./colors-DL1dYffC.js"),i=require("./image-CUSfY1_T.js"),o=require("react"),T=require("./theme.cjs.js"),E=(e,l)=>{const[a,s]=o.useState(r.LIGHT_PALETTE),c=o.useCallback(async()=>{if(!e)return r.LIGHT_PALETTE;try{const t=await i.getDominantColor(e);return i.generatePalette(t)}catch(t){return console.error("Failed to generate palette:",t),r.LIGHT_PALETTE}},[e]);return o.useEffect(()=>{(async()=>{if(e){const u=await c();s(u);return}if(l===T.THEMES.DARK){s(P.DARK_PALETTE);return}s(r.LIGHT_PALETTE)})()},[e,l,c]),o.useMemo(()=>a,[a])};exports.useBreakpoint=n.useBreakpoint;exports.useIsClosing=n.useIsClosing;exports.useLockBodyScroll=n.useLockBodyScroll;exports.usePalette=E;
 //# sourceMappingURL=hooks.cjs.js.map

package/dist/hooks.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.cjs.js","sources":["../src/hooks/usePalette.tsx"],"sourcesContent":["import { THEMES } from \"../design\";\r\nimport { DARK_PALETTE } from \"../design/darkTheme/colors\";\r\nimport { LIGHT_PALETTE } from \"../design/lightTheme/colors\";\r\nimport { generatePalette, getDominantColor } from \"../utils\";\r\nimport { ProtonPalette } from \"../design/types\";\r\nimport { useEffect, useState, useCallback, useMemo } from \"react\";\r\n\r\n/**\r\n * Generates a palette based on a background image or theme.\r\n * @param backgroundImage - The URL of the background image to generate a palette from.\r\n * @param theme - The theme to generate a palette for.\r\n * @returns A Palette object containing the generated palette.\r\n */\r\nexport const usePalette = (\r\n  backgroundImage: HTMLImageElement | string | null,\r\n  theme: string\r\n): ProtonPalette => {\r\n  const [palette, setPalette] = useState<ProtonPalette>(LIGHT_PALETTE);\r\n\r\n  const getPalette = useCallback(async () => {\r\n    if (!backgroundImage) return LIGHT_PALETTE;\r\n\r\n    try {\r\n      const baseColor = await getDominantColor(\r\n        backgroundImage as HTMLImageElement & string\r\n      );\r\n      const newPalette = generatePalette(baseColor);\r\n\r\n      return newPalette;\r\n    } catch (error) {\r\n      console.error(\"Failed to generate palette:\", error);\r\n      return LIGHT_PALETTE;\r\n    }\r\n  }, [backgroundImage]);\r\n\r\n  useEffect(() => {\r\n    const fetchPalette = async () => {\r\n      if (backgroundImage) {\r\n        const newPalette = await getPalette();\r\n        setPalette(newPalette);\r\n        return;\r\n      }\r\n\r\n      if (theme === THEMES.DARK) {\r\n        setPalette(DARK_PALETTE);\r\n        return;\r\n      }\r\n\r\n      setPalette(LIGHT_PALETTE);\r\n    };\r\n\r\n    fetchPalette();\r\n  }, [backgroundImage, theme, getPalette]);\r\n\r\n  return useMemo(() => palette, [palette]);\r\n};\r\n"],"names":["usePalette","backgroundImage","theme","palette","setPalette","useState","LIGHT_PALETTE","getPalette","useCallback","baseColor","getDominantColor","generatePalette","error","useEffect","newPalette","THEMES","DARK_PALETTE","useMemo"],"mappings":"mRAaaA,EAAa,CACxBC,EACAC,IACkB,CAClB,KAAM,CAACC,EAASC,CAAU,EAAIC,WAAwBC,EAAa,aAAA,EAE7DC,EAAaC,EAAAA,YAAY,SAAY,CACrC,GAAA,CAACP,EAAwB,OAAAK,gBAEzB,GAAA,CACF,MAAMG,EAAY,MAAMC,EAAA,iBACtBT,CAAA,EAIK,OAFYU,kBAAgBF,CAAS,QAGrCG,EAAO,CACN,eAAA,MAAM,8BAA+BA,CAAK,EAC3CN,eACT,CAAA,EACC,CAACL,CAAe,CAAC,EAEpBY,OAAAA,EAAAA,UAAU,IAAM,EACO,SAAY,CAC/B,GAAIZ,EAAiB,CACb,MAAAa,EAAa,MAAMP,IACzBH,EAAWU,CAAU,EACrB,MACF,CAEI,GAAAZ,IAAUa,SAAO,KAAM,CACzBX,EAAWY,EAAY,YAAA,EACvB,MACF,CAEAZ,EAAWE,EAAa,aAAA,CAAA,IAIzB,EAAA,CAACL,EAAiBC,EAAOK,CAAU,CAAC,EAEhCU,EAAQ,QAAA,IAAMd,EAAS,CAACA,CAAO,CAAC,CACzC"}
+{"version":3,"file":"hooks.cjs.js","sources":["../src/hooks/usePalette.tsx"],"sourcesContent":["import { THEMES } from \"../design\";\r\nimport { DARK_PALETTE } from \"../design/darkTheme/colors\";\r\nimport { LIGHT_PALETTE } from \"../design/lightTheme/colors\";\r\nimport { generatePalette } from \"../utils/palette\";\r\nimport { getDominantColor } from \"../utils/image\";\r\nimport { ProtonPalette } from \"../design/types\";\r\nimport { useEffect, useState, useCallback, useMemo } from \"react\";\r\n\r\n/**\r\n * Generates a palette based on a background image or theme.\r\n * @param backgroundImage - The URL of the background image to generate a palette from.\r\n * @param theme - The theme to generate a palette for.\r\n * @returns A Palette object containing the generated palette.\r\n */\r\nexport const usePalette = (\r\n  backgroundImage: HTMLImageElement | string | null,\r\n  theme: string\r\n): ProtonPalette => {\r\n  const [palette, setPalette] = useState<ProtonPalette>(LIGHT_PALETTE);\r\n\r\n  const getPalette = useCallback(async () => {\r\n    if (!backgroundImage) return LIGHT_PALETTE;\r\n\r\n    try {\r\n      const baseColor = await getDominantColor(\r\n        backgroundImage as HTMLImageElement & string\r\n      );\r\n      const newPalette = generatePalette(baseColor);\r\n\r\n      return newPalette;\r\n    } catch (error) {\r\n      console.error(\"Failed to generate palette:\", error);\r\n      return LIGHT_PALETTE;\r\n    }\r\n  }, [backgroundImage]);\r\n\r\n  useEffect(() => {\r\n    const fetchPalette = async () => {\r\n      if (backgroundImage) {\r\n        const newPalette = await getPalette();\r\n        setPalette(newPalette);\r\n        return;\r\n      }\r\n\r\n      if (theme === THEMES.DARK) {\r\n        setPalette(DARK_PALETTE);\r\n        return;\r\n      }\r\n\r\n      setPalette(LIGHT_PALETTE);\r\n    };\r\n\r\n    fetchPalette();\r\n  }, [backgroundImage, theme, getPalette]);\r\n\r\n  return useMemo(() => palette, [palette]);\r\n};\r\n"],"names":["usePalette","backgroundImage","theme","palette","setPalette","useState","LIGHT_PALETTE","getPalette","useCallback","baseColor","getDominantColor","generatePalette","error","useEffect","newPalette","THEMES","DARK_PALETTE","useMemo"],"mappings":"mRAcaA,EAAa,CACxBC,EACAC,IACkB,CAClB,KAAM,CAACC,EAASC,CAAU,EAAIC,WAAwBC,EAAa,aAAA,EAE7DC,EAAaC,EAAAA,YAAY,SAAY,CACrC,GAAA,CAACP,EAAwB,OAAAK,gBAEzB,GAAA,CACF,MAAMG,EAAY,MAAMC,EAAA,iBACtBT,CAAA,EAIK,OAFYU,kBAAgBF,CAAS,QAGrCG,EAAO,CACN,eAAA,MAAM,8BAA+BA,CAAK,EAC3CN,eACT,CAAA,EACC,CAACL,CAAe,CAAC,EAEpBY,OAAAA,EAAAA,UAAU,IAAM,EACO,SAAY,CAC/B,GAAIZ,EAAiB,CACb,MAAAa,EAAa,MAAMP,IACzBH,EAAWU,CAAU,EACrB,MACF,CAEI,GAAAZ,IAAUa,SAAO,KAAM,CACzBX,EAAWY,EAAY,YAAA,EACvB,MACF,CAEAZ,EAAWE,EAAa,aAAA,CAAA,IAIzB,EAAA,CAACL,EAAiBC,EAAOK,CAAU,CAAC,EAEhCU,EAAQ,QAAA,IAAMd,EAAS,CAACA,CAAO,CAAC,CACzC"}

package/dist/hooks.es.js

@@ -1,22 +1,22 @@
 import { b as h, a as x, u as B } from "./useBreakpoint-CjRyGKN-.mjs";
 import { D as c } from "./colors-Ceyo4oCJ.mjs";
 import { L as r } from "./colors-DMkDnu4U.mjs";
-import { useState as i, useCallback as f, useEffect as u, useMemo as P } from "react";
-import { a as p, g as m } from "./image-DFyN0Kd9.mjs";
+import { a as i, g as f } from "./image-DFyN0Kd9.mjs";
+import { useState as u, useCallback as P, useEffect as p, useMemo as m } from "react";
 import { THEMES as E } from "./theme.es.js";
 const C = (t, s) => {
-  const [a, o] = i(r), n = f(async () => {
+  const [a, o] = u(r), n = P(async () => {
     if (!t) return r;
     try {
-      const e = await p(
+      const e = await i(
         t
       );
-      return m(e);
+      return f(e);
     } catch (e) {
       return console.error("Failed to generate palette:", e), r;
     }
   }, [t]);
-  return u(() => {
+  return p(() => {
     (async () => {
       if (t) {
         const l = await n();
@@ -29,7 +29,7 @@ const C = (t, s) => {
       }
       o(r);
     })();
-  }, [t, s, n]), P(() => a, [a]);
+  }, [t, s, n]), m(() => a, [a]);
 };
 export {
   h as useBreakpoint,

package/dist/hooks.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.es.js","sources":["../src/hooks/usePalette.tsx"],"sourcesContent":["import { THEMES } from \"../design\";\r\nimport { DARK_PALETTE } from \"../design/darkTheme/colors\";\r\nimport { LIGHT_PALETTE } from \"../design/lightTheme/colors\";\r\nimport { generatePalette, getDominantColor } from \"../utils\";\r\nimport { ProtonPalette } from \"../design/types\";\r\nimport { useEffect, useState, useCallback, useMemo } from \"react\";\r\n\r\n/**\r\n * Generates a palette based on a background image or theme.\r\n * @param backgroundImage - The URL of the background image to generate a palette from.\r\n * @param theme - The theme to generate a palette for.\r\n * @returns A Palette object containing the generated palette.\r\n */\r\nexport const usePalette = (\r\n  backgroundImage: HTMLImageElement | string | null,\r\n  theme: string\r\n): ProtonPalette => {\r\n  const [palette, setPalette] = useState<ProtonPalette>(LIGHT_PALETTE);\r\n\r\n  const getPalette = useCallback(async () => {\r\n    if (!backgroundImage) return LIGHT_PALETTE;\r\n\r\n    try {\r\n      const baseColor = await getDominantColor(\r\n        backgroundImage as HTMLImageElement & string\r\n      );\r\n      const newPalette = generatePalette(baseColor);\r\n\r\n      return newPalette;\r\n    } catch (error) {\r\n      console.error(\"Failed to generate palette:\", error);\r\n      return LIGHT_PALETTE;\r\n    }\r\n  }, [backgroundImage]);\r\n\r\n  useEffect(() => {\r\n    const fetchPalette = async () => {\r\n      if (backgroundImage) {\r\n        const newPalette = await getPalette();\r\n        setPalette(newPalette);\r\n        return;\r\n      }\r\n\r\n      if (theme === THEMES.DARK) {\r\n        setPalette(DARK_PALETTE);\r\n        return;\r\n      }\r\n\r\n      setPalette(LIGHT_PALETTE);\r\n    };\r\n\r\n    fetchPalette();\r\n  }, [backgroundImage, theme, getPalette]);\r\n\r\n  return useMemo(() => palette, [palette]);\r\n};\r\n"],"names":["usePalette","backgroundImage","theme","palette","setPalette","useState","LIGHT_PALETTE","getPalette","useCallback","baseColor","getDominantColor","generatePalette","error","useEffect","newPalette","THEMES","DARK_PALETTE","useMemo"],"mappings":";;;;;;AAaa,MAAAA,IAAa,CACxBC,GACAC,MACkB;AAClB,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAwBC,CAAa,GAE7DC,IAAaC,EAAY,YAAY;AACrC,QAAA,CAACP,EAAwB,QAAAK;AAEzB,QAAA;AACF,YAAMG,IAAY,MAAMC;AAAA,QACtBT;AAAA,MAAA;AAIK,aAFYU,EAAgBF,CAAS;AAAA,aAGrCG,GAAO;AACN,qBAAA,MAAM,+BAA+BA,CAAK,GAC3CN;AAAA,IACT;AAAA,EAAA,GACC,CAACL,CAAe,CAAC;AAEpB,SAAAY,EAAU,MAAM;AAgBD,KAfQ,YAAY;AAC/B,UAAIZ,GAAiB;AACb,cAAAa,IAAa,MAAMP;AACzB,QAAAH,EAAWU,CAAU;AACrB;AAAA,MACF;AAEI,UAAAZ,MAAUa,EAAO,MAAM;AACzB,QAAAX,EAAWY,CAAY;AACvB;AAAA,MACF;AAEA,MAAAZ,EAAWE,CAAa;AAAA,IAAA;EAIzB,GAAA,CAACL,GAAiBC,GAAOK,CAAU,CAAC,GAEhCU,EAAQ,MAAMd,GAAS,CAACA,CAAO,CAAC;AACzC;"}
+{"version":3,"file":"hooks.es.js","sources":["../src/hooks/usePalette.tsx"],"sourcesContent":["import { THEMES } from \"../design\";\r\nimport { DARK_PALETTE } from \"../design/darkTheme/colors\";\r\nimport { LIGHT_PALETTE } from \"../design/lightTheme/colors\";\r\nimport { generatePalette } from \"../utils/palette\";\r\nimport { getDominantColor } from \"../utils/image\";\r\nimport { ProtonPalette } from \"../design/types\";\r\nimport { useEffect, useState, useCallback, useMemo } from \"react\";\r\n\r\n/**\r\n * Generates a palette based on a background image or theme.\r\n * @param backgroundImage - The URL of the background image to generate a palette from.\r\n * @param theme - The theme to generate a palette for.\r\n * @returns A Palette object containing the generated palette.\r\n */\r\nexport const usePalette = (\r\n  backgroundImage: HTMLImageElement | string | null,\r\n  theme: string\r\n): ProtonPalette => {\r\n  const [palette, setPalette] = useState<ProtonPalette>(LIGHT_PALETTE);\r\n\r\n  const getPalette = useCallback(async () => {\r\n    if (!backgroundImage) return LIGHT_PALETTE;\r\n\r\n    try {\r\n      const baseColor = await getDominantColor(\r\n        backgroundImage as HTMLImageElement & string\r\n      );\r\n      const newPalette = generatePalette(baseColor);\r\n\r\n      return newPalette;\r\n    } catch (error) {\r\n      console.error(\"Failed to generate palette:\", error);\r\n      return LIGHT_PALETTE;\r\n    }\r\n  }, [backgroundImage]);\r\n\r\n  useEffect(() => {\r\n    const fetchPalette = async () => {\r\n      if (backgroundImage) {\r\n        const newPalette = await getPalette();\r\n        setPalette(newPalette);\r\n        return;\r\n      }\r\n\r\n      if (theme === THEMES.DARK) {\r\n        setPalette(DARK_PALETTE);\r\n        return;\r\n      }\r\n\r\n      setPalette(LIGHT_PALETTE);\r\n    };\r\n\r\n    fetchPalette();\r\n  }, [backgroundImage, theme, getPalette]);\r\n\r\n  return useMemo(() => palette, [palette]);\r\n};\r\n"],"names":["usePalette","backgroundImage","theme","palette","setPalette","useState","LIGHT_PALETTE","getPalette","useCallback","baseColor","getDominantColor","generatePalette","error","useEffect","newPalette","THEMES","DARK_PALETTE","useMemo"],"mappings":";;;;;;AAca,MAAAA,IAAa,CACxBC,GACAC,MACkB;AAClB,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAwBC,CAAa,GAE7DC,IAAaC,EAAY,YAAY;AACrC,QAAA,CAACP,EAAwB,QAAAK;AAEzB,QAAA;AACF,YAAMG,IAAY,MAAMC;AAAA,QACtBT;AAAA,MAAA;AAIK,aAFYU,EAAgBF,CAAS;AAAA,aAGrCG,GAAO;AACN,qBAAA,MAAM,+BAA+BA,CAAK,GAC3CN;AAAA,IACT;AAAA,EAAA,GACC,CAACL,CAAe,CAAC;AAEpB,SAAAY,EAAU,MAAM;AAgBD,KAfQ,YAAY;AAC/B,UAAIZ,GAAiB;AACb,cAAAa,IAAa,MAAMP;AACzB,QAAAH,EAAWU,CAAU;AACrB;AAAA,MACF;AAEI,UAAAZ,MAAUa,EAAO,MAAM;AACzB,QAAAX,EAAWY,CAAY;AACvB;AAAA,MACF;AAEA,MAAAZ,EAAWE,CAAa;AAAA,IAAA;EAIzB,GAAA,CAACL,GAAiBC,GAAOK,CAAU,CAAC,GAEhCU,EAAQ,MAAMd,GAAS,CAACA,CAAO,CAAC;AACzC;"}