@shlinkio/shlink-frontend-kit 0.8.9 → 0.8.11

package/dist/index.d.ts

@@ -206,7 +206,17 @@ export declare type TimeoutToggleOptions = {
     delay?: number;
 };
 
-export declare type ToggleResult = [boolean, () => void, () => void, () => void];
+export declare type ToggleResult = ToggleResultTuple | ToggleResultObject;
+
+export declare type ToggleResultObject = {
+    flag: boolean;
+    toggle: () => void;
+    setToTrue: () => void;
+    setToFalse: () => void;
+};
+
+/** @deprecated */
+export declare type ToggleResultTuple = [boolean, () => void, () => void, () => void];
 
 export declare const ToggleSwitch: FC<BooleanControlProps>;
 
@@ -242,6 +252,13 @@ export declare type UseTimeoutResult = {
  */
 export declare const useTimeoutToggle: (initialValueOrOptions?: TimeoutToggleOptions | boolean, secondArg?: number, setTimeout_?: typeof setTimeout, clearTimeout_?: typeof clearTimeout) => [boolean, () => void];
 
-export declare const useToggle: (initialValue?: boolean) => ToggleResult;
+/** @deprecated Returning result as tuple is deprecated */
+export declare function useToggle(initialValue?: boolean, asObject?: false): ToggleResultTuple;
+
+/**
+ * @param asObject - Whether the result should be returned as an object or as a tuple.
+ *                   Deprecated. Future releases will always return an object.
+ */
+export declare function useToggle(initialValue: boolean, asObject: true): ToggleResultObject;
 
 export { }

package/dist/index.js

@@ -1,43 +1,43 @@
-import { jsx as o, jsxs as m, Fragment as w } from "react/jsx-runtime";
-import { faCircleNotch as A, faSearch as I, faEllipsisV as E, faSortAmountUp as P, faSortAmountDown as F } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon as p } from "@fortawesome/react-fontawesome";
-import { clsx as u } from "clsx";
-import { Card as N, CardHeader as H, CardBody as M, Dropdown as $, DropdownToggle as v, DropdownMenu as k, NavItem as G, NavLink as j, Nav as U, UncontrolledDropdown as V, DropdownItem as g } from "reactstrap";
-import { useId as S, useState as b, useRef as y, useCallback as C, useMemo as q, Children as Q, isValidElement as Y, useEffect as W } from "react";
+import { jsx as s, jsxs as u, Fragment as f } from "react/jsx-runtime";
+import { faCircleNotch as E, faSearch as P, faEllipsisV as F, faSortAmountUp as H, faSortAmountDown as M } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon as b } from "@fortawesome/react-fontawesome";
+import { clsx as h } from "clsx";
+import { Card as N, CardHeader as $, CardBody as G, Dropdown as k, DropdownToggle as O, DropdownMenu as S, NavItem as j, NavLink as U, Nav as V, DropdownItem as w } from "reactstrap";
+import { useId as y, useState as g, useRef as x, useCallback as C, useMemo as q, Children as Q, isValidElement as Y, useEffect as W } from "react";
 import { useNavigate as z, useLocation as J, NavLink as X } from "react-router";
-import { u as Z, a as B } from "./use-toggle-CNvdDGvy.js";
-const ge = ({ className: e, children: r, loading: t = !1, type: n = "default", fullWidth: s = !1 }) => /* @__PURE__ */ o(
+import { u as Z, a as L } from "./use-toggle-PWLikLl6.js";
+const be = ({ className: e, children: r, loading: t = !1, type: n = "default", fullWidth: o = !1 }) => /* @__PURE__ */ s(
   N,
   {
     body: !0,
-    className: u(e, {
-      "w-100": s,
-      "w-75 mx-auto": !s,
+    className: h(e, {
+      "w-100": o,
+      "w-75 mx-auto": !o,
       "border-danger": n === "error"
     }),
-    children: /* @__PURE__ */ m(
+    children: /* @__PURE__ */ u(
       "h3",
       {
-        className: u("text-center mb-0", {
+        className: h("text-center mb-0", {
           "text-muted": n === "default",
           "text-danger": n === "error"
         }),
         children: [
-          t && /* @__PURE__ */ o(p, { icon: A, spin: !0 }),
-          t && /* @__PURE__ */ o("span", { className: "ms-2", children: r ?? "Loading..." }),
+          t && /* @__PURE__ */ s(b, { icon: E, spin: !0 }),
+          t && /* @__PURE__ */ s("span", { className: "ms-2", children: r ?? "Loading..." }),
           !t && r
         ]
       }
     )
   }
-), K = ({ title: e, children: r, bodyClassName: t, ...n }) => /* @__PURE__ */ m(N, { ...n, children: [
-  e && /* @__PURE__ */ o(H, { role: "heading", "aria-level": 4, children: e }),
-  /* @__PURE__ */ o(M, { className: t, children: r })
-] }), we = ({ children: e, type: r, className: t, small: n = !1 }) => /* @__PURE__ */ o(
-  K,
+), B = ({ title: e, children: r, bodyClassName: t, ...n }) => /* @__PURE__ */ u(N, { ...n, children: [
+  e && /* @__PURE__ */ s($, { role: "heading", "aria-level": 4, children: e }),
+  /* @__PURE__ */ s(G, { className: t, children: r })
+] }), ge = ({ children: e, type: r, className: t, small: n = !1 }) => /* @__PURE__ */ s(
+  B,
   {
     role: "document",
-    className: u("text-center", {
+    className: h("text-center", {
       "w-75 mx-auto": !n,
       "w-100": n,
       "bg-main": r === "success",
@@ -45,128 +45,128 @@ const ge = ({ className: e, children: r, loading: t = !1, type: n = "default", f
       "bg-warning": r === "warning",
       "text-white": r !== "warning"
     }, t),
-    bodyClassName: u({ "p-2": n }),
+    bodyClassName: h({ "p-2": n }),
     children: e
   }
-), O = ({ checked: e = !1, onChange: r, className: t, children: n, type: s, inline: c = !1 }) => {
-  const i = S(), a = (h) => r == null ? void 0 : r(h.target.checked, h), l = {
-    "form-switch": s === "switch",
-    "form-checkbox": s === "checkbox"
-  }, d = c ? { display: "inline-block" } : {};
-  return /* @__PURE__ */ m("span", { className: u("form-check", l, t), style: d, children: [
-    /* @__PURE__ */ o("input", { type: "checkbox", className: "form-check-input", id: i, checked: e, onChange: a }),
-    /* @__PURE__ */ o("label", { className: "form-check-label", htmlFor: i, children: n })
+), D = ({ checked: e = !1, onChange: r, className: t, children: n, type: o, inline: c = !1 }) => {
+  const l = y(), m = (d) => r == null ? void 0 : r(d.target.checked, d), i = {
+    "form-switch": o === "switch",
+    "form-checkbox": o === "checkbox"
+  }, a = c ? { display: "inline-block" } : {};
+  return /* @__PURE__ */ u("span", { className: h("form-check", i, t), style: a, children: [
+    /* @__PURE__ */ s("input", { type: "checkbox", className: "form-check-input", id: l, checked: e, onChange: m }),
+    /* @__PURE__ */ s("label", { className: "form-check-label", htmlFor: l, children: n })
   ] });
-}, Ne = (e) => /* @__PURE__ */ o(O, { type: "checkbox", ...e }), Ce = (e) => /* @__PURE__ */ o(O, { type: "switch", ...e }), ee = ({ children: e, label: r, className: t = "", labelClassName: n = "", noMargin: s = !1, id: c }) => /* @__PURE__ */ m("div", { className: `${t} ${s ? "" : "mb-3"}`, children: [
-  /* @__PURE__ */ o("label", { className: `form-label ${n}`, htmlFor: c, children: r }),
+}, we = (e) => /* @__PURE__ */ s(D, { type: "checkbox", ...e }), Ne = (e) => /* @__PURE__ */ s(D, { type: "switch", ...e }), K = ({ children: e, label: r, className: t = "", labelClassName: n = "", noMargin: o = !1, id: c }) => /* @__PURE__ */ u("div", { className: `${t} ${o ? "" : "mb-3"}`, children: [
+  /* @__PURE__ */ s("label", { className: `form-label ${n}`, htmlFor: c, children: r }),
   e
-] }), _e = ({ children: e, value: r, onChange: t, type: n, required: s, placeholder: c, className: i, labelClassName: a }) => {
-  const l = S();
-  return /* @__PURE__ */ o(ee, { label: /* @__PURE__ */ m(w, { children: [
+] }), Ce = ({ children: e, value: r, onChange: t, type: n, required: o, placeholder: c, className: l, labelClassName: m }) => {
+  const i = y();
+  return /* @__PURE__ */ s(K, { label: /* @__PURE__ */ u(f, { children: [
     e,
     ":"
-  ] }), className: i, labelClassName: a, id: l, children: /* @__PURE__ */ o(
+  ] }), className: l, labelClassName: m, id: i, children: /* @__PURE__ */ s(
     "input",
     {
-      id: l,
+      id: i,
       className: "form-control",
       type: n ?? "text",
       value: r,
-      required: s ?? !0,
+      required: o ?? !0,
       placeholder: c,
-      onChange: (d) => t(d.target.value)
+      onChange: (a) => t(a.target.value)
     }
   ) });
-}, re = 500;
-let f;
-const T = () => {
-  f !== null && clearTimeout(f), f = null;
-}, Te = ({ onChange: e, className: r, large: t = !0, noBorder: n = !1, initialValue: s = "", setTimeout_: c = setTimeout }) => {
-  const [i, a] = b(s), l = (d, h = re) => {
-    a(d), T(), f = c(() => {
-      e(d), T();
-    }, h);
+}, ee = 500;
+let p;
+const v = () => {
+  p !== null && clearTimeout(p), p = null;
+}, _e = ({ onChange: e, className: r, large: t = !0, noBorder: n = !1, initialValue: o = "", setTimeout_: c = setTimeout }) => {
+  const [l, m] = g(o), i = (a, d = ee) => {
+    m(a), v(), p = c(() => {
+      e(a), v();
+    }, d);
   };
-  return /* @__PURE__ */ m("div", { className: u("search-field", r), children: [
-    /* @__PURE__ */ o(
+  return /* @__PURE__ */ u("div", { className: h("search-field", r), children: [
+    /* @__PURE__ */ s(
       "input",
       {
         type: "text",
-        className: u("form-control search-field__input", {
+        className: h("form-control search-field__input", {
           "form-control-lg": t,
           "search-field__input--no-border": n
         }),
         placeholder: "Search...",
-        value: i,
-        onChange: (d) => l(d.target.value)
+        value: l,
+        onChange: (a) => i(a.target.value)
       }
     ),
-    /* @__PURE__ */ o(p, { icon: I, className: "search-field__icon" }),
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ s(b, { icon: P, className: "search-field__icon" }),
+    /* @__PURE__ */ s(
       "button",
       {
         "aria-label": "Clear search",
         type: "button",
         className: "close search-field__close btn-close",
-        hidden: i === "",
+        hidden: l === "",
         id: "search-field__close",
-        onClick: () => l("", 0)
+        onClick: () => i("", 0)
       }
     )
   ] });
-}, ve = () => y(null), ke = () => {
+}, Te = () => x(null), ve = () => {
   const e = z();
   return C(() => e(-1), [e]);
-}, te = (e) => {
+}, re = (e) => {
   const r = new URLSearchParams(e), t = {};
-  return r.forEach((n, s) => {
-    if (s.endsWith("[]")) {
-      const c = s.slice(0, -2);
+  return r.forEach((n, o) => {
+    if (o.endsWith("[]")) {
+      const c = o.slice(0, -2);
       t[c] ?? (t[c] = []), t[c].push(n);
     } else
-      t[s] = n;
+      t[o] = n;
   }), t;
-}, Se = (e) => {
+}, ke = (e) => {
   const r = new URLSearchParams();
   for (const [t, n] of Object.entries(e))
-    n !== void 0 && (Array.isArray(n) ? n.forEach((s) => r.append(`${t}[]`, `${s}`)) : r.append(t, `${n}`));
+    n !== void 0 && (Array.isArray(n) ? n.forEach((o) => r.append(`${t}[]`, `${o}`)) : r.append(t, `${n}`));
   return r.toString();
-}, ye = () => {
+}, Oe = () => {
   const { search: e } = J();
-  return q(() => te(e), [e]);
-}, ne = 2e3, Oe = (e = {}, r, t = globalThis.setTimeout, n = globalThis.clearTimeout) => {
-  const { initialValue: s = !1, delay: c = ne } = typeof e == "boolean" ? {
+  return q(() => re(e), [e]);
+}, te = 2e3, Se = (e = {}, r, t = globalThis.setTimeout, n = globalThis.clearTimeout) => {
+  const { initialValue: o = !1, delay: c = te } = typeof e == "boolean" ? {
     initialValue: e,
     delay: r
-  } : e, { setTimeout: i } = Z(c, t, n), [a, l] = b(s), d = y(s), h = C(() => {
-    l(!d.current), i(() => l(d.current));
-  }, [i]);
-  return [a, h];
-}, oe = ({
+  } : e, { setTimeout: l } = Z(c, t, n), [m, i] = g(o), a = x(o), d = C(() => {
+    i(!a.current), l(() => i(a.current));
+  }, [l]);
+  return [m, d];
+}, ne = ({
   text: e,
   disabled: r = !1,
   className: t,
   children: n,
-  dropdownClassName: s,
+  dropdownClassName: o,
   noCaret: c,
-  end: i = !1,
-  minWidth: a,
-  inline: l,
-  size: d,
-  ...h
+  end: l = !1,
+  minWidth: m,
+  inline: i,
+  size: a,
+  ...d
 }) => {
-  const [L, x] = B(), D = u("dropdown-btn__toggle", t, {
-    "btn-block": !l,
+  const [T, I] = L(), R = h("dropdown-btn__toggle", t, {
+    "btn-block": !i,
     "dropdown-btn__toggle--with-caret": !c
-  }), R = { minWidth: a && `${a}px` };
-  return /* @__PURE__ */ m($, { isOpen: L, toggle: x, disabled: r, className: s, children: [
-    /* @__PURE__ */ o(v, { size: d, caret: !c, className: D, color: "primary", ...h, children: e }),
-    /* @__PURE__ */ o(k, { className: "w-100", end: i, style: R, children: n })
+  }), A = { minWidth: m && `${m}px` };
+  return /* @__PURE__ */ u(k, { isOpen: T, toggle: I, disabled: r, className: o, children: [
+    /* @__PURE__ */ s(O, { size: a, caret: !c, className: R, color: "primary", ...d, children: e }),
+    /* @__PURE__ */ s(S, { className: "w-100", end: l, style: A, children: T && n })
   ] });
-}, Le = ({ children: e, minWidth: r, label: t = "Options" }) => /* @__PURE__ */ o(
-  oe,
+}, ye = ({ children: e, minWidth: r, label: t = "Options" }) => /* @__PURE__ */ s(
+  ne,
   {
-    text: /* @__PURE__ */ o(p, { className: "px-1", icon: E }),
+    text: /* @__PURE__ */ s(b, { className: "px-1", icon: F }),
     "aria-label": t,
     size: "sm",
     minWidth: r,
@@ -175,7 +175,7 @@ const T = () => {
     inline: !0,
     children: e
   }
-), se = ({ children: e, ...r }) => /* @__PURE__ */ o(G, { children: /* @__PURE__ */ o(j, { className: "nav-pills__nav-link", tag: X, ...r, children: e }) }), xe = ({ children: e, fill: r = !1, className: t = "" }) => /* @__PURE__ */ o(N, { className: `nav-pills__nav p-0 overflow-hidden ${t}`, body: !0, children: /* @__PURE__ */ o(U, { pills: !0, fill: r, children: Q.map(e, (n) => {
+), se = ({ children: e, ...r }) => /* @__PURE__ */ s(j, { children: /* @__PURE__ */ s(U, { className: "nav-pills__nav-link", tag: X, ...r, children: e }) }), xe = ({ children: e, fill: r = !1, className: t = "" }) => /* @__PURE__ */ s(N, { className: `nav-pills__nav p-0 overflow-hidden ${t}`, body: !0, children: /* @__PURE__ */ s(V, { pills: !0, fill: r, children: Q.map(e, (n) => {
   if (!Y(n) || n.type !== se)
     throw new Error("Only NavPillItem children are allowed inside NavPills.");
   return n;
@@ -186,116 +186,117 @@ function _(e, r, t) {
     DESC: void 0
   }[t] : "ASC";
 }
-function ce(e, r, t) {
-  return typeof e == "object" ? ce(e.currentField, e.newField, e.currentOrderDir) : {
+function oe(e, r, t) {
+  return typeof e == "object" ? oe(e.currentField, e.newField, e.currentOrderDir) : {
     field: r,
     dir: _(e, r, t)
   };
 }
-const De = (e, { field: r, dir: t }) => !r || !t ? e : e.sort((n, s) => {
-  const c = t === "ASC" ? 1 : -1, i = t === "ASC" ? -1 : 1;
-  return n[r] > s[r] ? c : i;
-}), Re = (e) => e.dir ? `${e.field}-${e.dir}` : void 0, Ae = (e) => {
+const Le = (e, { field: r, dir: t }) => !r || !t ? e : e.sort((n, o) => {
+  const c = t === "ASC" ? 1 : -1, l = t === "ASC" ? -1 : 1;
+  return n[r] > o[r] ? c : l;
+}), De = (e) => e.dir ? `${e.field}-${e.dir}` : void 0, Ie = (e) => {
   const [r, t] = e.split("-");
   return { field: r, dir: t };
-}, Ie = (e) => {
-  const [r, t] = b(e), n = C((s, c) => t({ field: s, dir: c }), []);
+}, Re = (e) => {
+  const [r, t] = g(e), n = C((o, c) => t({ field: o, dir: c }), []);
   return [r, n];
 };
-function Ee({ items: e, order: r, onChange: t, isButton: n = !0, right: s = !1, prefixed: c = !0 }) {
-  const i = (a) => () => {
-    const l = _(a, r.field, r.dir);
-    t(l ? a : void 0, l);
+function Ae({ items: e, order: r, onChange: t, isButton: n = !0, right: o = !1, prefixed: c = !0 }) {
+  const [l, m] = L(), i = (a) => () => {
+    const d = _(a, r.field, r.dir);
+    t(d ? a : void 0, d);
   };
-  return /* @__PURE__ */ m(V, { children: [
-    /* @__PURE__ */ m(
-      v,
+  return /* @__PURE__ */ u(k, { isOpen: l, toggle: m, children: [
+    /* @__PURE__ */ u(
+      O,
       {
         caret: !0,
         color: n ? "primary" : "link",
-        className: u({
+        className: h({
           "dropdown-btn__toggle btn-block pe-4 overflow-hidden": n,
           "btn-sm p-0": !n
         }),
         children: [
-          !n && /* @__PURE__ */ o(w, { children: "Order by" }),
-          n && !r.field && /* @__PURE__ */ o("i", { children: "Order by..." }),
-          n && r.field && /* @__PURE__ */ m(w, { children: [
+          !n && /* @__PURE__ */ s(f, { children: "Order by" }),
+          n && !r.field && /* @__PURE__ */ s("i", { children: "Order by..." }),
+          n && r.field && /* @__PURE__ */ u(f, { children: [
             c && "Order by: ",
             e[r.field],
             " - ",
-            /* @__PURE__ */ o("small", { children: r.dir ?? "DESC" })
+            /* @__PURE__ */ s("small", { children: r.dir ?? "DESC" })
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ m(k, { end: s, className: "w-100", style: n ? void 0 : { minWidth: "11rem" }, children: [
-      Object.entries(e).map(([a, l]) => /* @__PURE__ */ m(
-        g,
+    /* @__PURE__ */ s(S, { end: o, className: "w-100", style: n ? void 0 : { minWidth: "11rem" }, children: l && /* @__PURE__ */ u(f, { children: [
+      Object.entries(e).map(([a, d]) => /* @__PURE__ */ u(
+        w,
         {
           active: r.field === a,
           onClick: i(a),
           className: "d-flex justify-content-between align-items-center",
+          tabIndex: -1,
           children: [
-            l,
-            r.field === a && /* @__PURE__ */ o(p, { icon: r.dir === "ASC" ? P : F })
+            d,
+            r.field === a && /* @__PURE__ */ s(b, { icon: r.dir === "ASC" ? H : M })
           ]
         },
         a
       )),
-      /* @__PURE__ */ o(g, { divider: !0 }),
-      /* @__PURE__ */ o(g, { disabled: !r.field, onClick: () => t(), children: /* @__PURE__ */ o("i", { children: "Clear selection" }) })
-    ] })
+      /* @__PURE__ */ s(w, { divider: !0, tag: "hr" }),
+      /* @__PURE__ */ s(w, { disabled: !r.field, onClick: () => t(), tabIndex: -1, children: /* @__PURE__ */ s("i", { children: "Clear selection" }) })
+    ] }) })
   ] });
 }
-const Pe = "#4696e5", Fe = "rgba(70, 150, 229, 0.4)", He = "#f77f28", Me = "rgba(247, 127, 40, 0.4)", $e = "white", Ge = "#161b22", ae = (e) => {
+const Ee = "#4696e5", Pe = "rgba(70, 150, 229, 0.4)", Fe = "#f77f28", He = "rgba(247, 127, 40, 0.4)", Me = "white", $e = "#161b22", ce = (e) => {
   var r;
   return (r = document.querySelector("html")) == null ? void 0 : r.setAttribute("data-theme", e);
-}, je = () => {
+}, Ge = () => {
   var e;
   return ((e = document.querySelector("html")) == null ? void 0 : e.getAttribute("data-theme")) === "dark";
-}, le = (e = window.matchMedia.bind(window)) => e("(prefers-color-scheme: dark)").matches ? "dark" : "light", Ue = (e) => {
-  const [r, t] = b(() => e ?? le());
+}, ae = (e = window.matchMedia.bind(window)) => e("(prefers-color-scheme: dark)").matches ? "dark" : "light", je = (e) => {
+  const [r, t] = g(() => e ?? ae());
   return W(() => {
-    ae(r);
+    ce(r);
   }, [r]), [r, t];
 };
 export {
-  Ne as Checkbox,
-  oe as DropdownBtn,
-  He as HIGHLIGHTED_COLOR,
-  Me as HIGHLIGHTED_COLOR_ALPHA,
-  _e as InputFormGroup,
-  ee as LabeledFormGroup,
-  Pe as MAIN_COLOR,
-  Fe as MAIN_COLOR_ALPHA,
-  ge as Message,
+  we as Checkbox,
+  ne as DropdownBtn,
+  Fe as HIGHLIGHTED_COLOR,
+  He as HIGHLIGHTED_COLOR_ALPHA,
+  Ce as InputFormGroup,
+  K as LabeledFormGroup,
+  Ee as MAIN_COLOR,
+  Pe as MAIN_COLOR_ALPHA,
+  be as Message,
   se as NavPillItem,
   xe as NavPills,
-  Ee as OrderingDropdown,
-  Ge as PRIMARY_DARK_COLOR,
-  $e as PRIMARY_LIGHT_COLOR,
-  we as Result,
-  Le as RowDropdownBtn,
-  Te as SearchField,
-  K as SimpleCard,
-  Ce as ToggleSwitch,
-  ae as changeThemeInMarkup,
-  ce as determineOrder,
+  Ae as OrderingDropdown,
+  $e as PRIMARY_DARK_COLOR,
+  Me as PRIMARY_LIGHT_COLOR,
+  ge as Result,
+  ye as RowDropdownBtn,
+  _e as SearchField,
+  B as SimpleCard,
+  Ne as ToggleSwitch,
+  ce as changeThemeInMarkup,
+  oe as determineOrder,
   _ as determineOrderDir,
-  le as getSystemPreferredTheme,
-  je as isDarkThemeEnabled,
-  Re as orderToString,
-  te as parseQueryString,
-  De as sortList,
-  Ae as stringToOrder,
-  Se as stringifyQueryParams,
-  ve as useElementRef,
-  ke as useGoBack,
-  Ie as useOrder,
-  ye as useParsedQuery,
-  Ue as useTheme,
+  ae as getSystemPreferredTheme,
+  Ge as isDarkThemeEnabled,
+  De as orderToString,
+  re as parseQueryString,
+  Le as sortList,
+  Ie as stringToOrder,
+  ke as stringifyQueryParams,
+  Te as useElementRef,
+  ve as useGoBack,
+  Re as useOrder,
+  Oe as useParsedQuery,
+  je as useTheme,
   Z as useTimeout,
-  Oe as useTimeoutToggle,
-  B as useToggle
+  Se as useTimeoutToggle,
+  L as useToggle
 };

package/dist/tailwind.js

@@ -1,10 +1,10 @@
 import { jsx as n, jsxs as g, Fragment as F } from "react/jsx-runtime";
-import i, { clsx as v } from "clsx";
-import { useState as $, useCallback as I, useEffect as _, createContext as H, useContext as N, forwardRef as x, useId as A, useRef as E, useMemo as O } from "react";
+import i, { clsx as x } from "clsx";
+import { useState as $, useCallback as I, useEffect as _, createContext as H, useContext as N, forwardRef as y, useId as A, useRef as E, useMemo as O } from "react";
 import { Link as S, NavLink as nt } from "react-router";
 import { faClose as at, faEyeSlash as lt, faEye as dt, faCircleNotch as V, faSearch as st, faChevronLeft as z, faChevronRight as G } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon as k } from "@fortawesome/react-fontawesome";
-import { a as it, u as wt } from "./use-toggle-CNvdDGvy.js";
+import { a as it, u as wt } from "./use-toggle-PWLikLl6.js";
 import { createPortal as ct } from "react-dom";
 const mt = ({ className: t, ...e }) => /* @__PURE__ */ n(
   "div",
@@ -46,19 +46,19 @@ const mt = ({ className: t, ...e }) => /* @__PURE__ */ n(
     ),
     ...e
   }
-), y = Object.assign(ut, { Body: gt, Header: mt, Footer: bt }), pt = ({ bodyClassName: t, children: e, ...r }) => {
+), v = Object.assign(ut, { Body: gt, Header: mt, Footer: bt }), pt = ({ bodyClassName: t, children: e, ...r }) => {
   const { title: o, titleSize: a = "md", ...d } = "title" in r ? r : {
     ...r,
     title: void 0,
     titleSize: void 0
   };
-  return /* @__PURE__ */ g(y, { ...d, children: [
-    o && /* @__PURE__ */ g(y.Header, { children: [
+  return /* @__PURE__ */ g(v, { ...d, children: [
+    o && /* @__PURE__ */ g(v.Header, { children: [
       a === "lg" && /* @__PURE__ */ n("h4", { children: o }),
       a === "md" && /* @__PURE__ */ n("h5", { children: o }),
       a === "sm" && /* @__PURE__ */ n("h6", { children: o })
     ] }),
-    /* @__PURE__ */ n(y.Body, { className: t, children: e })
+    /* @__PURE__ */ n(v.Body, { className: t, children: e })
   ] });
 };
 function ht({
@@ -88,7 +88,7 @@ function ht({
     };
     return f.addEventListener("keydown", m), () => f.removeEventListener("keydown", m);
   }, [w, s, p, e, r]), /* @__PURE__ */ g(
-    y,
+    v,
     {
       id: t,
       className: i("tw:py-1 tw:flex tw:flex-col", d),
@@ -226,7 +226,8 @@ const B = H(void 0), T = H({ responsive: !0 }), ft = ({ children: t, className:
           "tw:border tw:rounded-md tw:no-underline",
           "tw:transition-colors",
           {
-            "tw:focus-ring": o !== "danger",
+            "tw:focus-ring": o === "primary",
+            "tw:focus-ring-secondary": o === "secondary",
             "tw:focus-ring-danger": o === "danger"
           },
           {
@@ -268,15 +269,15 @@ const B = H(void 0), T = H({ responsive: !0 }), ft = ({ children: t, className:
       }
     )
   );
-}, X = x(({ className: t, onChange: e, ...r }, o) => {
+}, X = y(({ className: t, onChange: e, ...r }, o) => {
   const a = I((d) => e == null ? void 0 : e(d.target.checked, d), [e]);
   return /* @__PURE__ */ n(
     "input",
     {
       ref: o,
       type: "checkbox",
-      className: v(
-        "tw:appearance-none tw:focus-ring",
+      className: x(
+        "tw:appearance-none tw:focus-ring tw:cursor-[inherit]",
         "tw:border-1 tw:border-lm-input-border tw:dark:border-dm-input-border",
         "tw:bg-lm-primary tw:dark:bg-dm-primary tw:checked:bg-brand tw:bg-no-repeat",
         // Use different background color when rendered inside a card
@@ -287,11 +288,11 @@ const B = H(void 0), T = H({ responsive: !0 }), ft = ({ children: t, className:
       ...r
     }
   );
-}), Qt = x(({ className: t, ...e }, r) => /* @__PURE__ */ n(
+}), Qt = y(({ className: t, ...e }, r) => /* @__PURE__ */ n(
   X,
   {
     ref: r,
-    className: v("tw:rounded-sm tw:w-4 tw:h-4 tw:checked:bg-(image:--tick) tw:bg-center", t),
+    className: x("tw:rounded-sm tw:w-4 tw:h-4 tw:checked:bg-(image:--tick) tw:bg-center", t),
     ...e
   }
 )), J = ({ onClick: t, label: e = "Close" }) => /* @__PURE__ */ n(
@@ -306,7 +307,7 @@ const B = H(void 0), T = H({ responsive: !0 }), ft = ({ children: t, className:
     "aria-label": e,
     children: /* @__PURE__ */ n(k, { icon: at, size: "xl" })
   }
-), U = x(({
+), U = y(({
   borderless: t = !1,
   size: e = "md",
   feedback: r,
@@ -347,10 +348,10 @@ const B = H(void 0), T = H({ responsive: !0 }), ft = ({ children: t, className:
       ...l
     }
   );
-}), K = ({ required: t, children: e, ...r }) => /* @__PURE__ */ g("label", { ...r, children: [
+}), K = ({ required: t, children: e, className: r, ...o }) => /* @__PURE__ */ g("label", { className: x("tw:cursor-pointer", r), ...o, children: [
   e,
   t && /* @__PURE__ */ n("span", { className: "tw:text-danger tw:ml-1", "data-testid": "required-indicator", children: "*" })
-] }), Vt = x(({ label: t, inputClassName: e, required: r, hiddenRequired: o, error: a, ...d }, l) => {
+] }), Vt = y(({ label: t, inputClassName: e, required: r, hiddenRequired: o, error: a, ...d }, l) => {
   const s = A();
   return /* @__PURE__ */ g("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
     /* @__PURE__ */ n(K, { htmlFor: s, required: r, children: t }),
@@ -367,7 +368,7 @@ const B = H(void 0), T = H({ responsive: !0 }), ft = ({ children: t, className:
     ),
     a && /* @__PURE__ */ n("span", { className: "tw:text-danger", children: a })
   ] });
-}), It = x(({ containerClassName: t, className: e, size: r, ...o }, a) => {
+}), It = y(({ containerClassName: t, className: e, size: r, ...o }, a) => {
   const [d, l, , s] = it(!1), c = E(null), b = I(({ relatedTarget: w }) => {
     var u;
     (u = c.current) != null && u.contains(w) || s();
@@ -375,7 +376,7 @@ const B = H(void 0), T = H({ responsive: !0 }), ft = ({ children: t, className:
   return /* @__PURE__ */ g(
     "div",
     {
-      className: v("tw:group tw:relative", t),
+      className: x("tw:group tw:relative", t),
       ref: c,
       onBlurCapture: b,
       children: [
@@ -384,7 +385,7 @@ const B = H(void 0), T = H({ responsive: !0 }), ft = ({ children: t, className:
           {
             ref: a,
             type: d ? "text" : "password",
-            className: v(
+            className: x(
               {
                 "tw:pr-10": r !== "sm",
                 "tw:pr-8": r === "sm"
@@ -403,7 +404,7 @@ const B = H(void 0), T = H({ responsive: !0 }), ft = ({ children: t, className:
             onClick: l,
             title: d ? "Hide password" : "Show password",
             "aria-label": d ? "Hide password" : "Show password",
-            className: v(
+            className: x(
               "tw:absolute tw:top-[50%] tw:translate-y-[-50%] tw:px-1",
               "tw:text-placeholder tw:hover:text-lm-text tw:hover:dark:text-dm-text tw:transition-colors",
               {
@@ -418,7 +419,7 @@ const B = H(void 0), T = H({ responsive: !0 }), ft = ({ children: t, className:
       ]
     }
   );
-}), Xt = x(({ label: t, inputClassName: e, required: r, hiddenRequired: o, error: a, ...d }, l) => {
+}), Xt = y(({ label: t, inputClassName: e, required: r, hiddenRequired: o, error: a, ...d }, l) => {
   const s = A();
   return /* @__PURE__ */ g("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
     /* @__PURE__ */ n(K, { htmlFor: s, required: r, children: t }),
@@ -435,7 +436,7 @@ const B = H(void 0), T = H({ responsive: !0 }), ft = ({ children: t, className:
     ),
     a && /* @__PURE__ */ n("span", { className: "tw:text-danger", children: a })
   ] });
-}), Ct = x(({
+}), Ct = y(({
   className: t,
   size: e = "md",
   feedback: r,
@@ -475,13 +476,13 @@ const B = H(void 0), T = H({ responsive: !0 }), ft = ({ children: t, className:
     disabled: a,
     ...d
   }
-)), Yt = x(({ selectClassName: t, label: e, required: r, hiddenRequired: o, ...a }, d) => {
+)), Yt = y(({ selectClassName: t, label: e, required: r, hiddenRequired: o, ...a }, d) => {
   const l = A();
   return /* @__PURE__ */ g("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
     /* @__PURE__ */ n(K, { htmlFor: l, required: r, children: e }),
     /* @__PURE__ */ n(Ct, { ref: d, id: l, className: t, required: r || o, ...a })
   ] });
-}), Tt = x(({
+}), Tt = y(({
   onChange: t,
   containerClassName: e,
   inputClassName: r,
@@ -597,11 +598,11 @@ function Zt({
     }
   );
 }
-const te = x(({ className: t, ...e }, r) => /* @__PURE__ */ n(
+const te = y(({ className: t, ...e }, r) => /* @__PURE__ */ n(
   X,
   {
     ref: r,
-    className: v(
+    className: x(
       "tw:rounded-full tw:w-8 tw:h-4",
       "tw:bg-(image:--circle-grey-dark) tw:dark:bg-(image:--circle-grey-light) tw:checked:bg-(image:--circle-white)",
       "tw:focus-visible:not-checked:bg-(image:--circle-light-blue)",
@@ -649,7 +650,7 @@ const te = x(({ className: t, ...e }, r) => /* @__PURE__ */ n(
       ...r
     }
   );
-}, Bt = ({ children: t, className: e, fill: r }) => /* @__PURE__ */ n(Y.Provider, { value: { fill: r }, children: /* @__PURE__ */ n(y, { role: "menubar", className: i("tw:flex tw:overflow-hidden", e), children: t }) }), ee = Object.assign(Bt, { Pill: Et }), Mt = new Intl.NumberFormat("en-US"), _t = (t) => Mt.format(Number(t)), Q = 10, re = (t) => Math.ceil(t / Q) * Q, C = 2, R = "...", Rt = (t, e) => Array.from({ length: e - t }, (r, o) => t + o), At = (t, e) => {
+}, Bt = ({ children: t, className: e, fill: r }) => /* @__PURE__ */ n(Y.Provider, { value: { fill: r }, children: /* @__PURE__ */ n(v, { role: "menubar", className: i("tw:flex tw:overflow-hidden", e), children: t }) }), ee = Object.assign(Bt, { Pill: Et }), Mt = new Intl.NumberFormat("en-US"), _t = (t) => Mt.format(Number(t)), Q = 10, re = (t) => Math.ceil(t / Q) * Q, C = 2, R = "...", Rt = (t, e) => Array.from({ length: e - t }, (r, o) => t + o), At = (t, e) => {
   const r = Rt(
     Math.max(C, t - C),
     Math.min(e - 1, t + C) + 1
@@ -799,7 +800,7 @@ const oe = ({ currentPage: t, pagesCount: e, ...r }) => {
             },
             { "tw:h-full": r === "cover" }
           ),
-          children: /* @__PURE__ */ n(y, { className: i(
+          children: /* @__PURE__ */ n(v, { className: i(
             "tw:w-full",
             { "tw:h-full tw:relative tw:overflow-auto": r === "cover" }
           ), children: r === "cover" ? /* @__PURE__ */ g(F, { children: [
@@ -820,16 +821,16 @@ const oe = ({ currentPage: t, pagesCount: e, ...r }) => {
             ),
             /* @__PURE__ */ n("div", { children: a })
           ] }) : /* @__PURE__ */ g(F, { children: [
-            /* @__PURE__ */ g(y.Header, { className: i(
+            /* @__PURE__ */ g(v.Header, { className: i(
               "tw:sticky tw:top-0",
               "tw:flex tw:items-center tw:justify-between tw:gap-x-2"
             ), children: [
               /* @__PURE__ */ n("h5", { className: i({ "tw:text-danger": r === "danger" }), children: o }),
               /* @__PURE__ */ n(J, { onClick: e, label: "Close dialog" })
             ] }),
-            /* @__PURE__ */ n(y.Body, { children: a }),
+            /* @__PURE__ */ n(v.Body, { children: a }),
             u && /* @__PURE__ */ g(
-              y.Footer,
+              v.Footer,
               {
                 "data-testid": "footer",
                 className: i(
@@ -856,7 +857,7 @@ const oe = ({ currentPage: t, pagesCount: e, ...r }) => {
       )
     }
   );
-}, ae = ({ className: t, children: e, loading: r = !1, variant: o = "default" }) => /* @__PURE__ */ n(pt, { className: v({ "tw:[&]:border-danger": o === "error" }, t), children: /* @__PURE__ */ g("h3", { className: v("tw:text-center", {
+}, ae = ({ className: t, children: e, loading: r = !1, variant: o = "default" }) => /* @__PURE__ */ n(pt, { className: x({ "tw:[&]:border-danger": o === "error" }, t), children: /* @__PURE__ */ g("h3", { className: x("tw:text-center", {
   "tw:text-gray-500 tw:dark:text-gray-400": o === "default",
   "tw:text-danger": o === "error"
 }), children: [
@@ -868,7 +869,7 @@ const oe = ({ currentPage: t, pagesCount: e, ...r }) => {
 ] }) }), le = ({ variant: t, className: e, size: r = "md", children: o }) => /* @__PURE__ */ n(
   "div",
   {
-    className: v(
+    className: x(
       "tw:rounded-md tw:text-center",
       {
         "tw:p-2": r === "sm",
@@ -886,7 +887,7 @@ const oe = ({ currentPage: t, pagesCount: e, ...r }) => {
 );
 export {
   Pt as Button,
-  y as Card,
+  v as Card,
   ne as CardModal,
   Qt as Checkbox,
   J as CloseButton,

package/dist/tailwind.preset.css

@@ -143,6 +143,10 @@
     p {
         @apply tw:m-0;
     }
+
+    code {
+        @apply tw:text-sm tw:text-pink-600 tw:dark:text-pink-500 tw:font-mono;
+    }
 }
 
 @utility focus-ring-base {
@@ -157,6 +161,10 @@
     @apply tw:focus-ring-base tw:focus-visible:ring-danger/50;
 }
 
+@utility focus-ring-secondary {
+    @apply tw:focus-ring-base tw:focus-visible:ring-zinc-500/50;
+}
+
 @utility scroll-thin {
     /* Standard. New browsers */
     scrollbar-width: thin;
@@ -172,7 +180,7 @@
 
 @custom-variant highlight {
     &:hover,
-    &:focus {
+    &:focus-visible {
         @slot;
     }
 }

package/dist/use-toggle-PWLikLl6.js

@@ -0,0 +1,22 @@
+import { useRef as a, useCallback as o, useEffect as f, useMemo as i, useState as T } from "react";
+function m(n, r = globalThis.setTimeout, s = globalThis.clearTimeout) {
+  const t = a(null), e = o(() => {
+    t.current && s(t.current);
+  }, [s]), u = o((l, c) => {
+    e(), t.current = r(() => {
+      l(), t.current = null;
+    }, c ?? n);
+  }, [e, n, r]);
+  return f(() => e, [e]), i(
+    () => ({ setTimeout: u, clearCurrentTimeout: e }),
+    [e, u]
+  );
+}
+function b(n = !1, r = !1) {
+  const [s, t] = T(n), e = o(() => t((c) => !c), []), u = o(() => t(!0), []), l = o(() => t(!1), []);
+  return r ? { flag: s, toggle: e, setToTrue: u, setToFalse: l } : [s, e, u, l];
+}
+export {
+  b as a,
+  m as u
+};

package/package.json

@@ -55,32 +55,32 @@
   "devDependencies": {
     "@shlinkio/eslint-config-js-coding-standard": "~3.5.0",
     "@stylistic/eslint-plugin": "^4.2.0",
-    "@tailwindcss/vite": "^4.1.3",
+    "@tailwindcss/vite": "^4.1.4",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@total-typescript/shoehorn": "^0.1.2",
-    "@types/react": "^19.1.0",
-    "@types/react-dom": "^19.1.1",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/browser": "^3.1.1",
     "@vitest/coverage-v8": "^3.1.1",
     "axe-core": "^4.10.3",
     "bootstrap": "5.2.3",
-    "eslint": "^9.24.0",
+    "eslint": "^9.25.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-compiler": "^19.0.0-beta-e993439-20250328",
+    "eslint-plugin-react-compiler": "^19.0.0-beta-ebf51a3-20250411",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "history": "^5.3.0",
-    "playwright": "^1.51.1",
+    "playwright": "^1.52.0",
     "resize-observer-polyfill": "^1.5.1",
     "sass": "^1.86.3",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.29.0",
-    "vite": "^6.2.5",
+    "typescript-eslint": "^8.30.1",
+    "vite": "^6.2.6",
     "vite-plugin-dts": "^4.5.3",
     "vitest": "^3.0.2"
   },
@@ -90,5 +90,5 @@
     "not ie <= 11",
     "not op_mini all"
   ],
-  "version": "0.8.9"
+  "version": "0.8.11"
 }

package/dist/use-toggle-CNvdDGvy.js

@@ -1,22 +0,0 @@
-import { useRef as a, useCallback as o, useEffect as f, useMemo as g, useState as i } from "react";
-function m(u, r = globalThis.setTimeout, t = globalThis.clearTimeout) {
-  const s = a(null), e = o(() => {
-    s.current && t(s.current);
-  }, [t]), n = o((l, c) => {
-    e(), s.current = r(() => {
-      l(), s.current = null;
-    }, c ?? u);
-  }, [e, u, r]);
-  return f(() => e, [e]), g(
-    () => ({ setTimeout: n, clearCurrentTimeout: e }),
-    [e, n]
-  );
-}
-const b = (u = !1) => {
-  const [r, t] = i(u), s = o(() => t((l) => !l), []), e = o(() => t(!0), []), n = o(() => t(!1), []);
-  return [r, s, e, n];
-};
-export {
-  b as a,
-  m as u
-};