@protonradio/proton-ui 0.11.2 → 0.11.4

package/dist/index.d.ts

@@ -807,6 +807,8 @@ declare interface ProtonStyleSheet {
     "--proton-color__white": string;
 }
 
+declare type ProtonTheme = (typeof THEMES)[keyof typeof THEMES];
+
 /**
  * Base Overlay component for creating modal-like backgrounds.
  *
@@ -1132,10 +1134,8 @@ declare interface TextEmphasisProps extends React.HTMLAttributes<HTMLSpanElement
     "data-testid"?: string;
 }
 
-declare type Theme = (typeof THEMES)[keyof typeof THEMES];
-
 declare interface ThemeContextType {
-    theme: Theme;
+    theme: ProtonTheme;
     className: string;
     style: ProtonStyleSheet;
     palette: ProtonPalette;
@@ -1145,7 +1145,7 @@ declare interface ThemeContextType {
 export declare const ThemeProvider: default_2.FC<ThemeProviderProps>;
 
 declare interface ThemeProviderProps {
-    theme: Theme;
+    theme: ProtonTheme;
     children: ReactNode;
     palette?: ProtonPalette;
 }

package/dist/index.es.js

@@ -1,16 +1,19 @@
 import { j as p, B as dt } from "./Button-R07nvJbw.mjs";
-import { b as cf, a as df } from "./Button-R07nvJbw.mjs";
+import { b as pf, a as vf } from "./Button-R07nvJbw.mjs";
 import * as oe from "react";
 import K, { useRef as _, useCallback as re, useState as W, useMemo as R, useEffect as H, useContext as j, createContext as G, forwardRef as ye, createElement as Zr, isValidElement as ot, cloneElement as ys, Children as yt } from "react";
 import { useLayoutEffect as J, useEffectEvent as se, isFocusable as Jr, getOwnerWindow as Ee, focusWithoutScrolling as Pe, isIOS as En, getOwnerDocument as Y, runAfterTransition as Qr, useGlobalListeners as Bt, nodeContains as Q, getEventTarget as U, isVirtualPointerEvent as bs, isVirtualClick as sn, mergeProps as z, useSyncRef as ei, chain as Xe, isMac as Pn, openLink as an, getActiveElement as ae, useObjectRef as ft, useDescription as ms, isWebKit as ti, clamp as un, useResizeObserver as Yn, createShadowTreeWalker as $s, isAndroid as xs, isChrome as Ss, isTabbable as Es, useId as De, getScrollParent as ni, useLabels as ri, isAppleDevice as Ps, useRouter as wn, useEvent as bt, FOCUS_EVENT as ws, useUpdateLayoutEffect as qn, CLEAR_FOCUS_EVENT as Cs, scrollIntoView as Ts, scrollIntoViewport as Xn, isCtrlKeyPressed as ze, isScrollable as Zn, filterDOMProps as ue, useSlotId as Ie, useLinkProps as ii, useFormReset as Cn, mergeRefs as li, useExitAnimation as oi, useEnterAnimation as si } from "@react-aria/utils";
 import ai, { flushSync as ui, createPortal as Ks } from "react-dom";
 import { u as Ds, a as ci, b as Tn } from "./useBreakpoint-CjRyGKN-.mjs";
-import { m as Ms, n as ks, L as Is, o as tt, p as Jn, t as Qn, q as Ns } from "./index-Clgyr6Mk.mjs";
-import { T as _s, a as As } from "./theme-DQsfWeLo.mjs";
+import { L as Ms } from "./colors-DMkDnu4U.mjs";
+import { THEMES as ks, THEME_CLASSES as Is } from "./theme.es.js";
+import { LIGHT_STYLESHEET as Ns } from "./theme/light.es.js";
+import { DARK_STYLESHEET as _s } from "./theme/dark.es.js";
 import { c as V, i as di, h as fi } from "./navigation-DsfDNfej.mjs";
-import { useButton as Fs, useFocusRing as Ls, useHover as pi, useId as er, mergeProps as Kn, useLocale as Bs, usePopover as Rs, DismissButton as tr, Overlay as nr, useSubmenuTrigger as Os, useMenu as js, FocusScope as Vs, useMenuSection as Hs, useMenuItem as Ws, useTooltipTrigger as zs, OverlayContainer as Us, useOverlayPosition as Gs, useTooltip as Ys, Focusable as qs } from "react-aria";
-import { useOverlayTriggerState as Xs, useSubmenuTriggerState as Zs, useTreeState as Js, useMenuTriggerState as Qs, useTooltipTriggerState as vi } from "react-stately";
+import { useButton as As, useFocusRing as Fs, useHover as pi, useId as Jn, mergeProps as Kn, useLocale as Ls, usePopover as Bs, DismissButton as Qn, Overlay as er, useSubmenuTrigger as Rs, useMenu as Os, FocusScope as js, useMenuSection as Vs, useMenuItem as Hs, useTooltipTrigger as Ws, OverlayContainer as zs, useOverlayPosition as Us, useTooltip as Gs, Focusable as Ys } from "react-aria";
+import { useOverlayTriggerState as qs, useSubmenuTriggerState as Xs, useTreeState as Zs, useMenuTriggerState as Js, useTooltipTriggerState as vi } from "react-stately";
 import { B as Dn } from "./breakpoint-9y1_8U_b.mjs";
+import { j as tt, m as tr, t as nr, p as Qs } from "./color2k-CpDB_dpw.mjs";
 import { c as hi } from "./copy-qSgElu2b.mjs";
 var gi = {};
 gi = {
@@ -4258,7 +4261,7 @@ function Gu() {
 process.env.NODE_ENV === "production" ? mn.exports = Uu() : mn.exports = Gu();
 var Yu = mn.exports;
 const qu = (t, e) => {
-  const n = e === _s.DARK ? Ms : ks;
+  const n = e === ks.DARK ? _s : Ns;
   if (t) {
     const r = Xu(t);
     return {
@@ -4283,9 +4286,9 @@ const qu = (t, e) => {
 }, Zu = ({
   theme: t,
   children: e,
-  palette: n = Is
+  palette: n = Ms
 }) => {
-  const r = _(null), i = As[t], l = R(
+  const r = _(null), i = Is[t], l = R(
     () => qu(n, t),
     [n, t]
   );
@@ -4570,14 +4573,14 @@ const xo = ({
     ] }),
     n && /* @__PURE__ */ p.jsx(Ht, { id: "chevron-right", size: 16 })
   );
-}, Gd = {
+}, Xd = {
   primary: "primary",
   secondary: "secondary",
   transparent: "transparent",
   success: "success",
   warning: "warning",
   danger: "danger"
-}, Yd = ({ variant: t, children: e, ...n }) => /* @__PURE__ */ p.jsx(
+}, Zd = ({ variant: t, children: e, ...n }) => /* @__PURE__ */ p.jsx(
   "div",
   {
     role: "status",
@@ -4602,7 +4605,7 @@ const xo = ({
       d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
     }
   ) })
-}, qd = {
+}, Jd = {
   default: "default",
   success: "success",
   warning: "warning",
@@ -5783,7 +5786,7 @@ const Tc = /* @__PURE__ */ new Set([
   "value"
 ]), Kc = /* @__PURE__ */ G({}), Dc = /* @__PURE__ */ gc(function(e, n) {
   [e, n] = Ae(e, n, Kc), e = Mc(e);
-  let r = e, { isPending: i } = r, { buttonProps: l, isPressed: o } = Fs(e, n), { focusProps: s, isFocused: a, isFocusVisible: u } = Ls(e), { hoverProps: c, isHovered: d } = pi({
+  let r = e, { isPending: i } = r, { buttonProps: l, isPressed: o } = As(e, n), { focusProps: s, isFocused: a, isFocusVisible: u } = Fs(e), { hoverProps: c, isHovered: d } = pi({
     ...e,
     isDisabled: e.isDisabled || i
   }), f = {
@@ -5797,7 +5800,7 @@ const Tc = /* @__PURE__ */ new Set([
     ...e,
     values: f,
     defaultClassName: "react-aria-Button"
-  }), g = er(l.id), b = er(), m = l["aria-labelledby"];
+  }), g = Jn(l.id), b = Jn(), m = l["aria-labelledby"];
   i && (m ? m = `${m} ${b}` : l["aria-label"] && (m = `${g} ${b}`));
   let x = _(i);
   return H(() => {
@@ -6041,7 +6044,7 @@ const Go = /* @__PURE__ */ G({}), Bc = /* @__PURE__ */ Vo("header", function(e,
   });
 }), Yo = /* @__PURE__ */ G(null), Ur = /* @__PURE__ */ G(null), qo = /* @__PURE__ */ ye(function(e, n) {
   [e, n] = Ae(e, n, Yo);
-  let r = j(es), i = Xs(e), l = e.isOpen != null || e.defaultOpen != null || !r ? i : r, o = oi(n, l.isOpen) || e.isExiting || !1, s = yc(), { direction: a } = Bs();
+  let r = j(es), i = qs(e), l = e.isOpen != null || e.defaultOpen != null || !r ? i : r, o = oi(n, l.isOpen) || e.isExiting || !1, s = yc(), { direction: a } = Ls();
   if (s) {
     let u = e.children;
     return typeof u == "function" && (u = u({
@@ -6070,7 +6073,7 @@ function jc({ state: t, isExiting: e, UNSTABLE_portalContainer: n, ...r }) {
     i
   ]);
   var c;
-  let { popoverProps: d, underlayProps: f, arrowProps: v, placement: g } = Rs({
+  let { popoverProps: d, underlayProps: f, arrowProps: v, placement: g } = Bs({
     ...r,
     offset: (c = r.offset) !== null && c !== void 0 ? c : 8,
     arrowSize: l,
@@ -6116,7 +6119,7 @@ function jc({ state: t, isExiting: e, UNSTABLE_portalContainer: n, ...r }) {
     "data-placement": g,
     "data-entering": m || void 0,
     "data-exiting": e || void 0
-  }, !r.isNonModal && /* @__PURE__ */ K.createElement(tr, {
+  }, !r.isNonModal && /* @__PURE__ */ K.createElement(Qn, {
     onDismiss: t.close
   }), /* @__PURE__ */ K.createElement(Wn.Provider, {
     value: {
@@ -6124,10 +6127,10 @@ function jc({ state: t, isExiting: e, UNSTABLE_portalContainer: n, ...r }) {
       placement: g,
       ref: i
     }
-  }, x.children), /* @__PURE__ */ K.createElement(tr, {
+  }, x.children), /* @__PURE__ */ K.createElement(Qn, {
     onDismiss: t.close
   }));
-  if (!u) return /* @__PURE__ */ K.createElement(nr, {
+  if (!u) return /* @__PURE__ */ K.createElement(er, {
     ...r,
     shouldContainFocus: S,
     isExiting: e,
@@ -6148,7 +6151,7 @@ function jc({ state: t, isExiting: e, UNSTABLE_portalContainer: n, ...r }) {
     value: s
   }, E)));
   var k;
-  return /* @__PURE__ */ K.createElement(nr, {
+  return /* @__PURE__ */ K.createElement(er, {
     ...r,
     shouldContainFocus: S,
     isExiting: e,
@@ -6156,9 +6159,9 @@ function jc({ state: t, isExiting: e, UNSTABLE_portalContainer: n, ...r }) {
   }, E);
 }
 const Vc = /* @__PURE__ */ G({}), Xo = /* @__PURE__ */ G(null), zt = /* @__PURE__ */ G(null), Sn = /* @__PURE__ */ G(null), Ft = /* @__PURE__ */ G(null), Zo = /* @__PURE__ */ G(null), Hc = /* @__PURE__ */ Ho("submenutrigger", (t, e, n) => {
-  let { CollectionBranch: r } = j(Hn), i = j(zt), l = j(Sn), o = Zs({
+  let { CollectionBranch: r } = j(Hn), i = j(zt), l = j(Sn), o = Xs({
     triggerKey: n.key
-  }, l), s = _(null), a = ft(e), { parentMenuRef: u, shouldUseVirtualFocus: c } = j(Zo), { submenuTriggerProps: d, submenuProps: f, popoverProps: v } = Os({
+  }, l), s = _(null), a = ft(e), { parentMenuRef: u, shouldUseVirtualFocus: c } = j(Zo), { submenuTriggerProps: d, submenuProps: f, popoverProps: v } = Rs({
     parentMenuRef: u,
     submenuRef: s,
     delay: t.delay,
@@ -6216,11 +6219,11 @@ function Wc({ props: t, collection: e, menuRef: n }) {
   let o = R(() => r ? e.UNSTABLE_filter(r) : e, [
     e,
     r
-  ]), s = Js({
+  ]), s = Zs({
     ...t,
     collection: o,
     children: void 0
-  }), a = j(Sn), { isVirtualized: u, CollectionRoot: c } = j(Hn), { menuProps: d } = js({
+  }), a = j(Sn), { isVirtualized: u, CollectionRoot: c } = j(Hn), { menuProps: d } = Os({
     ...t,
     ...i,
     isVirtualized: u,
@@ -6238,7 +6241,7 @@ function Wc({ props: t, collection: e, menuRef: n }) {
     style: {
       display: "contents"
     }
-  }, t.renderEmptyState())), /* @__PURE__ */ K.createElement(Vs, null, /* @__PURE__ */ K.createElement("div", {
+  }, t.renderEmptyState())), /* @__PURE__ */ K.createElement(js, null, /* @__PURE__ */ K.createElement("div", {
     ...ue(t),
     ...d,
     ...f,
@@ -6289,7 +6292,7 @@ function Wc({ props: t, collection: e, menuRef: n }) {
       /* eslint-disable-next-line react-hooks/rules-of-hooks */
       [
         Sn,
-        a ?? Qs({})
+        a ?? Js({})
       ]
     ]
   }, /* @__PURE__ */ K.createElement(c, {
@@ -6322,7 +6325,7 @@ function Qo(t, e, n, r = "react-aria-MenuSection") {
   var i, l;
   let o = j(zt), { CollectionBranch: s } = j(Hn), [a, u] = pc();
   var c;
-  let { headingProps: d, groupProps: f } = Hs({
+  let { headingProps: d, groupProps: f } = Vs({
     heading: u,
     "aria-label": (c = n.props["aria-label"]) !== null && c !== void 0 ? c : void 0
   }), v = je({
@@ -6358,7 +6361,7 @@ function Qo(t, e, n, r = "react-aria-MenuSection") {
 const Uc = /* @__PURE__ */ Ho("section", Qo), Lt = /* @__PURE__ */ G(null), Gc = /* @__PURE__ */ Vo("item", function(e, n, r) {
   var i;
   [e, n] = Ae(e, n, Lt);
-  let l = (i = Lo(Lt)) === null || i === void 0 ? void 0 : i.id, o = j(zt), s = ft(n), a = j(Ft), { menuItemProps: u, labelProps: c, descriptionProps: d, keyboardShortcutProps: f, ...v } = Ws({
+  let l = (i = Lo(Lt)) === null || i === void 0 ? void 0 : i.id, o = j(zt), s = ft(n), a = j(Ft), { menuItemProps: u, labelProps: c, descriptionProps: d, keyboardShortcutProps: f, ...v } = Hs({
     ...e,
     id: l,
     key: r.key,
@@ -6413,7 +6416,7 @@ const Uc = /* @__PURE__ */ Ho("section", Qo), Lt = /* @__PURE__ */ G(null), Gc =
   }, m.children));
 }), es = /* @__PURE__ */ G(null), zn = /* @__PURE__ */ G(null), ts = /* @__PURE__ */ G(null);
 function Yc(t) {
-  let e = vi(t), n = _(null), { triggerProps: r, tooltipProps: i } = zs(t, e, n);
+  let e = vi(t), n = _(null), { triggerProps: r, tooltipProps: i } = Ws(t, e, n);
   return /* @__PURE__ */ K.createElement(ht, {
     values: [
       [
@@ -6436,7 +6439,7 @@ function Yc(t) {
 const qc = /* @__PURE__ */ ye(function({ UNSTABLE_portalContainer: e, ...n }, r) {
   [n, r] = Ae(n, r, ts);
   let i = j(zn), l = vi(n), o = n.isOpen != null || n.defaultOpen != null || !i ? l : i, s = oi(r, o.isOpen) || n.isExiting || !1;
-  return !o.isOpen && !s ? null : /* @__PURE__ */ K.createElement(Us, {
+  return !o.isOpen && !s ? null : /* @__PURE__ */ K.createElement(zs, {
     portalContainer: e
   }, /* @__PURE__ */ K.createElement(Xc, {
     ...n,
@@ -6452,7 +6455,7 @@ function Xc(t) {
     e.isOpen,
     n
   ]);
-  let { overlayProps: l, arrowProps: o, placement: s } = Gs({
+  let { overlayProps: l, arrowProps: o, placement: s } = Us({
     placement: t.placement || "top",
     targetRef: t.triggerRef,
     overlayRef: t.tooltipRef,
@@ -6474,7 +6477,7 @@ function Xc(t) {
     }
   });
   t = Kn(t, l);
-  let { tooltipProps: c } = Ys(t, e);
+  let { tooltipProps: c } = Gs(t, e);
   return /* @__PURE__ */ K.createElement("div", {
     ...c,
     ref: t.tooltipRef,
@@ -6993,7 +6996,7 @@ const id = ({ children: t, name: e }) => {
   let s = o, a = tt(o, 0.01);
   if (r && (s = tt(o, 0.1), a = tt(o, 0.12), e)) {
     const u = tt(i.PRIMARY.MEDIUM_LIGHT, 0.88), c = tt(i.PRIMARY.LIGHT, 0.84);
-    s = Jn(s, u, 0.15), a = Jn(a, c, 0.15);
+    s = tr(s, u, 0.15), a = tr(a, c, 0.15);
   }
   return /* @__PURE__ */ p.jsx(
     "div",
@@ -7015,8 +7018,8 @@ const id = ({ children: t, name: e }) => {
 }) => {
   const { hasPalette: r, palette: i } = we(), l = {
     "--tombstone-custom-background": i.PRIMARY.MEDIUM,
-    "--tombstone-custom-primary": Qn(i.PRIMARY.DARK, 0.9),
-    "--tombstone-custom-secondary": Qn(i.SECONDARY.DARK, 0.7)
+    "--tombstone-custom-primary": nr(i.PRIMARY.DARK, 0.9),
+    "--tombstone-custom-secondary": nr(i.SECONDARY.DARK, 0.7)
   };
   return /* @__PURE__ */ p.jsx(
     "div",
@@ -7034,7 +7037,7 @@ const id = ({ children: t, name: e }) => {
     }
   );
 };
-function Xd(t) {
+function Qd(t) {
   const {
     columns: e,
     data: n = [],
@@ -7196,7 +7199,7 @@ function cs(t, e) {
     }
   };
 }
-function Zd({ title: t, children: e, ...n }) {
+function ef({ title: t, children: e, ...n }) {
   let r = _(null), { dialogProps: i, titleProps: l } = cs(n, r);
   return /* @__PURE__ */ p.jsxs("div", { ...i, ref: r, className: "proton-Dialog", children: [
     t && /* @__PURE__ */ p.jsx("h3", { ...l, className: "proton-Dialog__header", children: t }),
@@ -7211,12 +7214,12 @@ const sd = (t) => {
   }
   return "";
 };
-function Jd({
+function tf({
   image: t,
   imageUrl: e = "",
   onLoad: n
 }) {
-  const { palette: r } = we(), i = Ns(r.BASE_COLOR), l = sd(i);
+  const { palette: r } = we(), i = Qs(r.BASE_COLOR), l = sd(i);
   return /* @__PURE__ */ p.jsxs(
     "div",
     {
@@ -7422,7 +7425,7 @@ const Un = ye(
   }
 );
 Un.displayName = "ProtonUIInput";
-function Qd({
+function nf({
   name: t,
   value: e,
   isDisabled: n,
@@ -7494,7 +7497,7 @@ const ad = ({ isCopied: t, onClick: e }) => /* @__PURE__ */ p.jsx("div", { class
       )
     ]
   }
-) }), ef = ({
+) }), rf = ({
   name: t = "search",
   placeholder: e = "Search...",
   autoComplete: n,
@@ -7722,7 +7725,7 @@ const ds = ({ children: t }) => /* @__PURE__ */ p.jsx("h2", { className: "proton
     }
   );
   return o || d ? /* @__PURE__ */ p.jsx(Rn, { fadeIn: !0, ref: a, onClose: c, children: f }) : f;
-}, tf = Object.assign(fd, {
+}, lf = Object.assign(fd, {
   /**
    * Renders a h2 styled title
    * */
@@ -7745,7 +7748,7 @@ const ds = ({ children: t }) => /* @__PURE__ */ p.jsx("h2", { className: "proton
    * */
   Actions: cd
 });
-function nf(t) {
+function of(t) {
   const e = _(null), n = Ut(t || {}), { triggerProps: r, overlayProps: i } = $l(
     { type: "dialog" },
     n,
@@ -8376,7 +8379,7 @@ function Cd(t = {}) {
     toggle: l
   };
 }
-function rf(t) {
+function sf(t) {
   let e = {
     ...t,
     isSelected: t.isOn,
@@ -8405,7 +8408,7 @@ function rf(t) {
     }
   );
 }
-const lf = ({
+const af = ({
   children: t,
   maxWidth: e,
   singleLine: n = !0,
@@ -8469,7 +8472,7 @@ function Kd({
         v && !d.current && (f.current = !0), l && l(v), d.current || c(v), d.current = !1;
       },
       children: [
-        o ? /* @__PURE__ */ p.jsx("span", { className: "proton__TooltipTrigger", "aria-label": "Show tooltip", children: t }) : /* @__PURE__ */ p.jsx(qs, { children: /* @__PURE__ */ p.jsx(
+        o ? /* @__PURE__ */ p.jsx("span", { className: "proton__TooltipTrigger", "aria-label": "Show tooltip", children: t }) : /* @__PURE__ */ p.jsx(Ys, { children: /* @__PURE__ */ p.jsx(
           "div",
           {
             role: "button",
@@ -8493,7 +8496,7 @@ function Kd({
     }
   );
 }
-const of = ({
+const uf = ({
   to: t,
   children: e,
   tooltipProps: n,
@@ -8606,7 +8609,7 @@ function Dd({
   );
 }
 const Md = _d(100);
-function sf({
+function cf({
   data: t,
   resolution: e = 2,
   startDuration: n,
@@ -8761,37 +8764,37 @@ function _d(t) {
 export {
   xo as ActionMenu,
   ec as BANNER_ICONS,
-  qd as BANNER_VARIANTS,
-  Yd as Badge,
-  Gd as BadgeVariants,
+  Jd as BANNER_VARIANTS,
+  Zd as Badge,
+  Xd as BadgeVariants,
   Oe as Banner,
   dt as Button,
   Ao as ButtonGroup,
-  cf as ButtonSizes,
-  df as ButtonVariants,
+  pf as ButtonSizes,
+  vf as ButtonVariants,
   td as ButtonWithSelect,
-  Qd as CopyInput,
-  Xd as DataTable,
-  Zd as Dialog,
+  nf as CopyInput,
+  Qd as DataTable,
+  ef as Dialog,
   ld as Elevation,
   Ht as Icon,
-  Jd as ImageBackground,
+  tf as ImageBackground,
   Un as Input,
   Qc as MenuTrigger,
-  tf as Modal,
+  lf as Modal,
   pd as Popover,
   Rn as ScreenOverlay,
-  ef as SearchInput,
+  rf as SearchInput,
   Ed as Select,
-  rf as Switch,
+  sf as Switch,
   le as Table,
-  lf as TextEllipsis,
-  of as TextEmphasis,
+  af as TextEllipsis,
+  uf as TextEmphasis,
   Zu as ThemeProvider,
   od as Tombstone,
   Kd as TooltipTrigger,
-  sf as Waveform,
-  nf as usePopoverTrigger,
+  cf as Waveform,
+  of as usePopoverTrigger,
   rd as useTableCollection,
   we as useTheme
 };