@shlinkio/shlink-frontend-kit 0.9.2 → 0.9.4

package/dist/tailwind.d.ts

@@ -70,6 +70,7 @@ export declare const CloseButton: FC<CloseButtonProps>;
 export declare type CloseButtonProps = {
     label?: string;
     onClick?: HTMLProps<HTMLButtonElement>['onClick'];
+    className?: string;
 };
 
 declare type CommonCardModalProps = {

package/dist/tailwind.js

@@ -1,14 +1,14 @@
 import { jsxs as g, jsx as n, Fragment as S } from "react/jsx-runtime";
 import w, { clsx as x } from "clsx";
-import { useRef as I, useState as F, useEffect as M, useCallback as C, createContext as H, useContext as N, forwardRef as y, useId as $, useMemo as O } from "react";
+import { useRef as I, useState as D, useEffect as M, useCallback as P, createContext as H, useContext as C, forwardRef as k, useId as F, useMemo as O } from "react";
 import { Link as j, NavLink as at } from "react-router";
 import { faClose as dt, faEyeSlash as lt, faEye as it, faCircleNotch as Y, faSearch as st, faChevronLeft as J, faChevronRight as Q, faCheck as wt } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon as k } from "@fortawesome/react-fontawesome";
+import { FontAwesomeIcon as v } from "@fortawesome/react-fontawesome";
 import { u as ct, a as mt, b as gt } from "./use-toggle-C1uZwbSD.js";
 import { createPortal as bt } from "react-dom";
 import { faClone as ut } from "@fortawesome/free-regular-svg-icons";
 const zt = ({ children: t, summary: e, summaryClasses: r, ...o }) => {
-  const a = I(null), [l, d] = F(!1);
+  const a = I(null), [l, d] = D(!1);
   return M(() => {
     const i = a.current, s = () => d(!!(i != null && i.open));
     return i == null || i.addEventListener("toggle", s), () => i == null ? void 0 : i.removeEventListener("toggle", s);
@@ -56,19 +56,19 @@ const zt = ({ children: t, summary: e, summaryClasses: r, ...o }) => {
     ),
     ...e
   }
-), v = Object.assign(xt, { Body: ht, Header: pt, Footer: ft }), yt = ({ bodyClassName: t, children: e, ...r }) => {
+), N = Object.assign(xt, { Body: ht, Header: pt, Footer: ft }), yt = ({ bodyClassName: t, children: e, ...r }) => {
   const { title: o, titleSize: a = "md", ...l } = "title" in r ? r : {
     ...r,
     title: void 0,
     titleSize: void 0
   };
-  return /* @__PURE__ */ g(v, { ...l, children: [
-    o && /* @__PURE__ */ g(v.Header, { children: [
+  return /* @__PURE__ */ g(N, { ...l, children: [
+    o && /* @__PURE__ */ g(N.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(v.Body, { className: t, children: e })
+    /* @__PURE__ */ n(N.Body, { className: t, children: e })
   ] });
 };
 function kt({
@@ -83,7 +83,7 @@ function kt({
   "aria-label": s = "Items",
   ...c
 }) {
-  const [m, u] = F(0), p = C((f) => {
+  const [m, u] = D(0), p = P((f) => {
     if (u(f), o) {
       const [b, h] = [...e.entries()][f];
       o(b, h);
@@ -98,7 +98,7 @@ function kt({
     };
     return f.addEventListener("keydown", b), () => f.removeEventListener("keydown", b);
   }, [m, i, p, e, r]), /* @__PURE__ */ g(
-    v,
+    N,
     {
       id: t,
       className: w("tw:py-1 tw:flex tw:flex-col", l),
@@ -131,7 +131,7 @@ function kt({
   );
 }
 const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className: e }) => {
-  const { responsive: r } = N(L);
+  const { responsive: r } = C(L);
   return /* @__PURE__ */ n(E.Provider, { value: { section: "head" }, children: /* @__PURE__ */ n(
     "thead",
     {
@@ -143,7 +143,7 @@ const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className:
     }
   ) });
 }, Nt = ({ children: t, className: e }) => {
-  const { responsive: r } = N(L);
+  const { responsive: r } = C(L);
   return /* @__PURE__ */ n(E.Provider, { value: { section: "body" }, children: /* @__PURE__ */ n(
     "tbody",
     {
@@ -155,7 +155,7 @@ const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className:
     }
   ) });
 }, Ct = ({ children: t, className: e }) => {
-  const { responsive: r } = N(L);
+  const { responsive: r } = C(L);
   return /* @__PURE__ */ n(E.Provider, { value: { section: "footer" }, children: /* @__PURE__ */ n(
     "tfoot",
     {
@@ -167,7 +167,7 @@ const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className:
     }
   ) });
 }, Pt = ({ children: t, className: e, ...r }) => {
-  const o = N(E), a = (o == null ? void 0 : o.section) === "body", { responsive: l } = N(L);
+  const o = C(E), a = (o == null ? void 0 : o.section) === "body", { responsive: l } = C(L);
   return /* @__PURE__ */ n(
     "tr",
     {
@@ -187,7 +187,7 @@ const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className:
     }
   );
 }, Tt = ({ children: t, className: e, columnName: r, type: o, ...a }) => {
-  const l = N(E), d = o ?? ((l == null ? void 0 : l.section) !== "body" ? "th" : "td"), { responsive: i } = N(L);
+  const l = C(E), d = o ?? ((l == null ? void 0 : l.section) !== "body" ? "th" : "td"), { responsive: i } = C(L);
   return /* @__PURE__ */ n(
     d,
     {
@@ -281,8 +281,8 @@ const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className:
       }
     )
   );
-}, Z = y(({ className: t, onChange: e, ...r }, o) => {
-  const a = C((l) => e == null ? void 0 : e(l.target.checked, l), [e]);
+}, Z = k(({ className: t, onChange: e, ...r }, o) => {
+  const a = P((l) => e == null ? void 0 : e(l.target.checked, l), [e]);
   return /* @__PURE__ */ n(
     "input",
     {
@@ -300,26 +300,27 @@ const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className:
       ...r
     }
   );
-}), ee = y(({ className: t, ...e }, r) => /* @__PURE__ */ n(
+}), ee = k(({ className: t, ...e }, r) => /* @__PURE__ */ n(
   Z,
   {
     ref: r,
     className: x("tw:rounded-sm tw:w-4 tw:h-4 tw:checked:bg-(image:--tick) tw:bg-center", t),
     ...e
   }
-)), V = ({ onClick: t, label: e = "Close" }) => /* @__PURE__ */ n(
+)), V = ({ onClick: t, className: e, label: r = "Close" }) => /* @__PURE__ */ n(
   "button",
   {
     type: "button",
     onClick: t,
     className: w(
       "tw:opacity-50 tw:highlight:opacity-80 tw:transition-opacity",
-      "tw:rounded-md tw:focus-ring"
+      "tw:rounded-md tw:focus-ring",
+      e
     ),
-    "aria-label": e,
-    children: /* @__PURE__ */ n(k, { icon: dt, size: "xl" })
+    "aria-label": r,
+    children: /* @__PURE__ */ n(v, { icon: dt, size: "xl" })
   }
-), U = y(({
+), U = k(({
   borderless: t = !1,
   size: e = "md",
   feedback: r,
@@ -374,8 +375,8 @@ const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className:
     }
   ),
   r && /* @__PURE__ */ n("span", { "data-testid": o ? `${o}-error` : "error", className: "tw:text-danger", children: r })
-] }), re = y(({ label: t, inputClassName: e, required: r, hiddenRequired: o, error: a, helpText: l, "data-testid": d, ...i }, s) => {
-  const c = $();
+] }), re = k(({ label: t, inputClassName: e, required: r, hiddenRequired: o, error: a, helpText: l, "data-testid": d, ...i }, s) => {
+  const c = F();
   return /* @__PURE__ */ g(K, { error: a, helpText: l, "data-testid": d, children: [
     /* @__PURE__ */ n(W, { htmlFor: c, required: r, children: t }),
     /* @__PURE__ */ n(
@@ -390,8 +391,8 @@ const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className:
       }
     )
   ] });
-}), Bt = y(({ containerClassName: t, className: e, size: r, ...o }, a) => {
-  const [l, d, , i] = ct(!1), s = I(null), c = C(({ relatedTarget: m }) => {
+}), Bt = k(({ containerClassName: t, className: e, size: r, ...o }, a) => {
+  const [l, d, , i] = ct(!1), s = I(null), c = P(({ relatedTarget: m }) => {
     var u;
     (u = s.current) != null && u.contains(m) || i();
   }, [s, i]);
@@ -435,14 +436,14 @@ const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className:
               }
             ),
             tabIndex: -1,
-            children: /* @__PURE__ */ n(k, { fixedWidth: !0, icon: l ? lt : it })
+            children: /* @__PURE__ */ n(v, { fixedWidth: !0, icon: l ? lt : it })
           }
         )
       ]
     }
   );
-}), oe = y(({ label: t, inputClassName: e, required: r, hiddenRequired: o, error: a, helpText: l, "data-testid": d, ...i }, s) => {
-  const c = $();
+}), oe = k(({ label: t, inputClassName: e, required: r, hiddenRequired: o, error: a, helpText: l, "data-testid": d, ...i }, s) => {
+  const c = F();
   return /* @__PURE__ */ g(K, { error: a, helpText: l, "data-testid": d, children: [
     /* @__PURE__ */ n(W, { htmlFor: c, required: r, children: t }),
     /* @__PURE__ */ n(
@@ -457,7 +458,7 @@ const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className:
       }
     )
   ] });
-}), Mt = y(({
+}), Mt = k(({
   className: t,
   size: e = "md",
   feedback: r,
@@ -497,8 +498,8 @@ const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className:
     disabled: a,
     ...l
   }
-)), ne = y(({ selectClassName: t, label: e, error: r, helpText: o, required: a, hiddenRequired: l, "data-testid": d, ...i }, s) => {
-  const c = $();
+)), ne = k(({ selectClassName: t, label: e, error: r, helpText: o, required: a, hiddenRequired: l, "data-testid": d, ...i }, s) => {
+  const c = F();
   return /* @__PURE__ */ g(K, { error: r, helpText: o, "data-testid": d, children: [
     /* @__PURE__ */ n(W, { htmlFor: c, required: a, children: e }),
     /* @__PURE__ */ n(
@@ -513,7 +514,7 @@ const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className:
       }
     )
   ] });
-}), Et = y(({
+}), Et = k(({
   onChange: t,
   containerClassName: e,
   inputClassName: r,
@@ -522,12 +523,12 @@ const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className:
   loading: a = !1,
   ...l
 }, d) => {
-  const { setTimeout: i, clearCurrentTimeout: s } = mt(500), c = C((m) => {
+  const { setTimeout: i, clearCurrentTimeout: s } = mt(500), c = P((m) => {
     m ? i(() => t(m)) : (s(), t(m));
   }, [s, t, i]);
   return /* @__PURE__ */ g("div", { className: w("tw:group tw:relative tw:focus-within:z-10", e), children: [
     /* @__PURE__ */ n(
-      k,
+      v,
       {
         icon: a ? Y : st,
         spin: a,
@@ -572,10 +573,10 @@ function ae({
   onFocus: d,
   ...i
 }) {
-  const s = I(null), c = $(), [m, u] = F(), p = O(
+  const s = I(null), c = F(), [m, u] = D(), p = O(
     () => t ? m ?? [...t.keys()][0] : void 0,
     [m, t]
-  ), f = C((b) => {
+  ), f = P((b) => {
     r(b), e(""), s.current.value = "";
   }, [e, r]);
   return /* @__PURE__ */ g(
@@ -629,7 +630,7 @@ function ae({
     }
   );
 }
-const de = y(({ className: t, ...e }, r) => /* @__PURE__ */ n(
+const de = k(({ className: t, ...e }, r) => /* @__PURE__ */ n(
   Z,
   {
     ref: r,
@@ -662,7 +663,7 @@ const de = y(({ className: t, ...e }, r) => /* @__PURE__ */ n(
     ...a
   }
 ), z = H(null), _t = ({ className: t, to: e, ...r }) => {
-  const o = N(z);
+  const o = C(z);
   return /* @__PURE__ */ n(
     at,
     {
@@ -685,13 +686,13 @@ const de = y(({ className: t, ...e }, r) => /* @__PURE__ */ n(
       ...r
     }
   );
-}, Ft = ({ children: t, className: e, fill: r }) => /* @__PURE__ */ n(z.Provider, { value: { fill: r }, children: /* @__PURE__ */ n(v, { role: "menubar", className: w("tw:flex tw:overflow-hidden", e), children: t }) }), le = Object.assign(Ft, { Pill: _t }), $t = new Intl.NumberFormat("en-US"), Dt = (t) => $t.format(Number(t)), X = 10, ie = (t) => Math.ceil(t / X) * X, T = 2, _ = "...", St = (t, e) => Array.from({ length: e - t }, (r, o) => t + o), jt = (t, e) => {
+}, Dt = ({ children: t, className: e, fill: r }) => /* @__PURE__ */ n(z.Provider, { value: { fill: r }, children: /* @__PURE__ */ n(N, { role: "menubar", className: w("tw:flex tw:overflow-hidden", e), children: t }) }), le = Object.assign(Dt, { Pill: _t }), Ft = new Intl.NumberFormat("en-US"), $t = (t) => Ft.format(Number(t)), X = 10, ie = (t) => Math.ceil(t / X) * X, T = 2, _ = "...", St = (t, e) => Array.from({ length: e - t }, (r, o) => t + o), jt = (t, e) => {
   const r = St(
     Math.max(T, t - T),
     Math.min(e - 1, t + T) + 1
   );
   return t - T > T && r.unshift(_), t + T < e - 1 && r.push(_), r.unshift(1), r.push(e), r;
-}, B = (t) => t === _, At = (t) => B(t) ? t : Dt(t), Ht = (t, e) => B(t) ? `${t}_${e}` : `${t}`, tt = [
+}, B = (t) => t === _, At = (t) => B(t) ? t : $t(t), Ht = (t, e) => B(t) ? `${t}_${e}` : `${t}`, tt = [
   "tw:border tw:border-r-0 tw:last:border-r tw:border-lm-border tw:dark:border-dm-border",
   "tw:rounded-none tw:first:rounded-l tw:last:rounded-r"
 ], et = (t = !1) => w(
@@ -714,12 +715,12 @@ function Ut({ children: t, active: e, isEllipsis: r, ...o }) {
   return r ? /* @__PURE__ */ n(rt, {}) : /* @__PURE__ */ n("button", { type: "button", className: a, ...o, children: t });
 }
 const se = ({ currentPage: t, pagesCount: e, ...r }) => {
-  const o = "urlForPage" in r, a = o ? Ot : Ut, l = C(
+  const o = "urlForPage" in r, a = o ? Ot : Ut, l = P(
     (d) => o ? { href: B(d) ? void 0 : r.urlForPage(d) } : { onClick: () => !B(d) && r.onPageChange(d) },
     [o, r]
   );
   return e < 2 ? null : /* @__PURE__ */ g("div", { className: "tw:select-none tw:flex", "data-testid": "paginator", children: [
-    t === 1 ? /* @__PURE__ */ n(A, { children: /* @__PURE__ */ n(k, { size: "xs", icon: J }) }) : /* @__PURE__ */ n(a, { ...l(Math.max(1, t - 1)), "aria-label": "Previous", children: /* @__PURE__ */ n(k, { size: "xs", icon: J }) }),
+    t === 1 ? /* @__PURE__ */ n(A, { children: /* @__PURE__ */ n(v, { size: "xs", icon: J }) }) : /* @__PURE__ */ n(a, { ...l(Math.max(1, t - 1)), "aria-label": "Previous", children: /* @__PURE__ */ n(v, { size: "xs", icon: J }) }),
     jt(t, e).map((d, i) => /* @__PURE__ */ n(
       a,
       {
@@ -730,7 +731,7 @@ const se = ({ currentPage: t, pagesCount: e, ...r }) => {
       },
       Ht(d, i)
     )),
-    t === e ? /* @__PURE__ */ n(A, { children: /* @__PURE__ */ n(k, { size: "xs", icon: Q }) }) : /* @__PURE__ */ n(a, { ...l(Math.min(e, t + 1)), "aria-label": "Next", children: /* @__PURE__ */ n(k, { size: "xs", icon: Q }) })
+    t === e ? /* @__PURE__ */ n(A, { children: /* @__PURE__ */ n(v, { size: "xs", icon: Q }) }) : /* @__PURE__ */ n(a, { ...l(Math.min(e, t + 1)), "aria-label": "Next", children: /* @__PURE__ */ n(v, { size: "xs", icon: Q }) })
   ] });
 }, Wt = ({
   open: t,
@@ -783,28 +784,28 @@ const se = ({ currentPage: t, pagesCount: e, ...r }) => {
     onConfirm: u,
     onClosed: p,
     ...f
-  } = "onConfirm" in d ? d : { ...d }, [b, h] = F(t), R = I(null), D = I("cancel"), ot = C(() => {
-    D.current = "confirm", u == null || u();
+  } = "onConfirm" in d ? d : { ...d }, [b, h] = D(t), R = I(null), $ = I("cancel"), ot = P((y) => {
+    y.preventDefault(), y.stopPropagation(), $.current = "confirm", u == null || u();
   }, [u]);
   return M(() => {
     if (t) {
-      D.current = "cancel", h(!0);
+      $.current = "cancel", h(!0);
       return;
     }
-    const P = R.current;
-    if (P) {
+    const y = R.current;
+    if (y) {
       delete R.current.dataset.open;
       let q = !1;
       const G = (nt) => {
-        q || nt.target !== P || (q = !0, h(!1), p == null || p(D.current));
+        q || nt.target !== y || (q = !0, h(!1), p == null || p($.current));
       };
-      return P.addEventListener("transitionend", G), () => {
-        P.removeEventListener("transitionend", G);
+      return y.addEventListener("transitionend", G), () => {
+        y.removeEventListener("transitionend", G);
       };
     }
   }, [p, t]), M(() => {
-    const P = R.current;
-    b && P && (P.dataset.open = "");
+    const y = R.current;
+    b && y && (y.dataset.open = "");
   }, [b]), /* @__PURE__ */ n(
     Wt,
     {
@@ -819,7 +820,7 @@ const se = ({ currentPage: t, pagesCount: e, ...r }) => {
       ),
       ...f,
       children: /* @__PURE__ */ n(
-        "div",
+        "form",
         {
           "data-testid": "transition-container",
           ref: R,
@@ -837,7 +838,8 @@ const se = ({ currentPage: t, pagesCount: e, ...r }) => {
             },
             { "tw:h-full": r === "cover" }
           ),
-          children: /* @__PURE__ */ n(v, { className: w(
+          onSubmit: ot,
+          children: /* @__PURE__ */ n(N, { className: w(
             "tw:w-full",
             { "tw:h-full tw:relative tw:overflow-auto": r === "cover" }
           ), children: r === "cover" ? /* @__PURE__ */ g(S, { children: [
@@ -858,16 +860,16 @@ const se = ({ currentPage: t, pagesCount: e, ...r }) => {
             ),
             /* @__PURE__ */ n("div", { children: a })
           ] }) : /* @__PURE__ */ g(S, { children: [
-            /* @__PURE__ */ g(v.Header, { className: w(
+            /* @__PURE__ */ g(N.Header, { className: w(
               "tw:sticky tw:top-0",
               "tw:flex tw:items-center tw:justify-between tw:gap-x-2"
             ), children: [
               /* @__PURE__ */ n("h5", { className: w({ "tw:text-danger": r === "danger" }), children: o }),
               /* @__PURE__ */ n(V, { onClick: e, label: "Close dialog" })
             ] }),
-            /* @__PURE__ */ n(v.Body, { children: a }),
+            /* @__PURE__ */ n(N.Body, { children: a }),
             u && /* @__PURE__ */ g(
-              v.Footer,
+              N.Footer,
               {
                 "data-testid": "footer",
                 className: w(
@@ -882,7 +884,7 @@ const se = ({ currentPage: t, pagesCount: e, ...r }) => {
                       solid: !0,
                       variant: r === "danger" ? "danger" : "primary",
                       disabled: m,
-                      onClick: ot,
+                      type: "submit",
                       children: s
                     }
                   )
@@ -899,7 +901,7 @@ const se = ({ currentPage: t, pagesCount: e, ...r }) => {
   "tw:text-danger": o === "error"
 }), children: [
   r && /* @__PURE__ */ g(S, { children: [
-    /* @__PURE__ */ n(k, { icon: Y, spin: !0 }),
+    /* @__PURE__ */ n(v, { icon: Y, spin: !0 }),
     /* @__PURE__ */ n("span", { className: "tw:ml-2", children: e ?? "Loading..." })
   ] }),
   !r && e
@@ -922,7 +924,7 @@ const se = ({ currentPage: t, pagesCount: e, ...r }) => {
     children: o
   }
 ), ge = ({ text: t, className: e, size: r = "lg", initialCopied: o = !1, navigator_: a = globalThis.navigator, ...l }) => {
-  const [d, i] = gt(o), s = C(
+  const [d, i] = gt(o), s = P(
     () => a.clipboard.writeText(t).then(i),
     [a.clipboard, t, i]
   );
@@ -943,13 +945,13 @@ const se = ({ currentPage: t, pagesCount: e, ...r }) => {
       title: "Copy to clipboard",
       onClick: s,
       ...l,
-      children: /* @__PURE__ */ n(k, { icon: d ? wt : ut, fixedWidth: !0 })
+      children: /* @__PURE__ */ n(v, { icon: d ? wt : ut, fixedWidth: !0 })
     }
   );
 };
 export {
   Lt as Button,
-  v as Card,
+  N as Card,
   we as CardModal,
   ee as Checkbox,
   V as CloseButton,
@@ -975,7 +977,7 @@ export {
   yt as SimpleCard,
   te as Table,
   de as ToggleSwitch,
-  Dt as formatNumber,
+  $t as formatNumber,
   Ht as keyForPage,
   B as pageIsEllipsis,
   At as prettifyPageNumber,

package/dist/tailwind.preset.css

@@ -113,10 +113,11 @@
 
     a {
         /*
-         * FIXME Set this style as plain CSS instead of @apply to avoid higher specificity.
+         * FIXME Set these styles as plain CSS instead of @apply to avoid higher specificity.
          *       This can be set via @apply as soon as we stop using important for tailwind classes, once bootstrap is
          *       removed
          */
+        color: var(--tw-color-lm-brand);
         border-radius: var(--tw-radius-xs);
 
         @apply
@@ -125,12 +126,8 @@
             tw:focus-visible:z-1;
     }
 
-    /*
-     * FIXME Workaround to avoid paginator items to be set with the wrong color.
-     *       Colors can be set above as soon as we stop using important for tailwind classes, once bootstrap is removed.
-     */
-    a:not(.tw\:text-white) {
-        @apply tw:text-lm-brand tw:dark:text-dm-brand
+    [data-theme="dark"] a {
+        color: var(--tw-color-dm-brand);
     }
 
     h1 {
@@ -200,3 +197,45 @@
         @slot;
     }
 }
+
+/* For sticky-positioned cells with a background */
+@utility sticky-cell-base {
+    @apply tw:z-1 tw:relative tw:sticky;
+    @apply tw:before:absolute tw:before:bg-lm-table-border tw:dark:before:bg-dm-table-border tw:before:-z-2;
+    @apply tw:after:absolute tw:after:bg-lm-primary tw:dark:after:bg-dm-primary tw:after:-z-1;
+
+    &:before, &:after {
+        content: '';
+    }
+    &:first-child:after {
+        left: 0;
+    }
+}
+
+@utility sticky-cell {
+    @apply tw:sticky-cell-base;
+
+    &:before {
+        inset: -1px 0 -1px 0;
+    }
+    &:first-child:before {
+        left: 0;
+    }
+    &:after {
+        inset: 0 0 0 0;
+    }
+}
+
+@utility sticky-cell-separated {
+    @apply tw:sticky-cell-base;
+
+    &:before {
+        inset: -1px -1px -1px 0;
+    }
+    &:first-child:before {
+        left: -1px;
+    }
+    &:after {
+        inset: 0 0 0 1px;
+    }
+}

package/package.json

@@ -57,20 +57,20 @@
   },
   "devDependencies": {
     "@shlinkio/eslint-config-js-coding-standard": "~3.5.0",
-    "@stylistic/eslint-plugin": "^4.2.0",
-    "@tailwindcss/vite": "^4.1.5",
+    "@stylistic/eslint-plugin": "^4.4.0",
+    "@tailwindcss/vite": "^4.1.7",
     "@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.2",
-    "@types/react-dom": "^19.1.3",
-    "@vitejs/plugin-react": "^4.4.1",
-    "@vitest/browser": "^3.1.2",
-    "@vitest/coverage-v8": "^3.1.2",
+    "@types/react": "^19.1.5",
+    "@types/react-dom": "^19.1.5",
+    "@vitejs/plugin-react": "^4.5.0",
+    "@vitest/browser": "^3.1.4",
+    "@vitest/coverage-v8": "^3.1.4",
     "axe-core": "^4.10.3",
     "bootstrap": "5.2.3",
-    "eslint": "^9.26.0",
+    "eslint": "^9.27.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
@@ -79,11 +79,11 @@
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "history": "^5.3.0",
     "playwright": "^1.52.0",
-    "sass": "^1.87.0",
+    "sass": "^1.89.0",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.31.1",
-    "vite": "^6.3.4",
-    "vite-plugin-dts": "^4.5.3",
+    "typescript-eslint": "^8.32.1",
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.0.2"
   },
   "browserslist": [
@@ -92,5 +92,5 @@
     "not ie <= 11",
     "not op_mini all"
   ],
-  "version": "0.9.2"
+  "version": "0.9.4"
 }