@shlinkio/shlink-frontend-kit 0.9.5 → 0.9.6

package/dist/tailwind.d.ts

@@ -390,7 +390,7 @@ export declare type TableElementProps = PropsWithChildren & {
     className?: string;
 };
 
-export declare type TableProps = HTMLProps<HTMLTableElement> & {
+export declare type TableProps = Omit<HTMLProps<HTMLTableElement>, 'size'> & {
     header: ReactNode;
     footer?: ReactNode;
     /**
@@ -398,6 +398,8 @@ export declare type TableProps = HTMLProps<HTMLTableElement> & {
      * Set `responsive={false}` to avoid this behavior.
      */
     responsive?: boolean;
+    /** Determines the padding in every cell. Defaults to md */
+    size?: Size;
 };
 
 declare type TitleProps = {

package/dist/tailwind.js

@@ -2,12 +2,12 @@ import { jsxs as g, jsx as n, Fragment as S } from "react/jsx-runtime";
 import w, { clsx as y } from "clsx";
 import { useRef as I, useState as D, useEffect as M, forwardRef as u, useCallback as P, createContext as H, useContext as C, 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 { faClose as dt, faEyeSlash as lt, faEye as it, faCircleNotch as X, faSearch as st, faChevronLeft as G, faChevronRight as J, faCheck as wt } from "@fortawesome/free-solid-svg-icons";
 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: r, summaryClasses: e, ...o }) => {
+const Zt = ({ children: t, summary: r, summaryClasses: e, ...o }) => {
   const a = I(null), [l, d] = D(!1);
   return M(() => {
     const i = a.current, s = () => d(!!(i != null && i.open));
@@ -134,7 +134,7 @@ function kt({
     }
   );
 }
-const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className: r }) => {
+const E = H(void 0), L = H({ responsive: !0, size: "md" }), vt = ({ children: t, className: r }) => {
   const { responsive: e } = C(L);
   return /* @__PURE__ */ n(E.Provider, { value: { section: "head" }, children: /* @__PURE__ */ n(
     "thead",
@@ -191,17 +191,20 @@ const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className:
     }
   );
 }, Tt = ({ children: t, className: r, columnName: e, type: o, ...a }) => {
-  const l = C(E), d = o ?? ((l == null ? void 0 : l.section) !== "body" ? "th" : "td"), { responsive: i } = C(L);
+  const l = C(E), d = o ?? ((l == null ? void 0 : l.section) !== "body" ? "th" : "td"), { responsive: i, size: s } = C(L);
   return /* @__PURE__ */ n(
     d,
     {
       "data-column": i ? e : void 0,
       className: w(
-        "tw:p-2 tw:border-lm-border tw:dark:border-dm-border",
+        "tw:border-lm-border tw:dark:border-dm-border",
         {
+          "tw:p-1": s === "sm",
+          "tw:p-2": s === "md",
+          "tw:p-3": s === "lg",
           "tw:border-b-1": !i,
           "tw:block tw:lg:table-cell tw:not-last:border-b-1 tw:lg:border-b-1": i,
-          // For md and lower, display the content in data-column attribute as before
+          // For responsive tables, display the content in data-column attribute for md sizes and lower
           "tw:before:lg:hidden tw:before:content-[attr(data-column)] tw:before:font-bold tw:before:mr-1": i && d === "td"
         },
         r
@@ -210,7 +213,7 @@ const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className:
       children: t
     }
   );
-}, It = ({ header: t, footer: r, children: e, responsive: o = !0, ...a }) => /* @__PURE__ */ n(L.Provider, { value: { responsive: o }, children: /* @__PURE__ */ g("table", { className: "tw:w-full", ...a, children: [
+}, It = ({ header: t, footer: r, children: e, responsive: o = !0, size: a = "md", ...l }) => /* @__PURE__ */ n(L.Provider, { value: { responsive: o, size: a }, children: /* @__PURE__ */ g("table", { className: "tw:w-full", ...l, children: [
   /* @__PURE__ */ n(vt, { children: t }),
   /* @__PURE__ */ n(Nt, { children: e }),
   r && /* @__PURE__ */ n(Ct, { children: r })
@@ -285,7 +288,7 @@ const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className:
       }
     )
   );
-}, Z = u(({ className: t, onChange: r, ...e }, o) => {
+}, Y = u(({ className: t, onChange: r, ...e }, o) => {
   const a = P((l) => r == null ? void 0 : r(l.target.checked, l), [r]);
   return /* @__PURE__ */ n(
     "input",
@@ -305,13 +308,13 @@ const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className:
     }
   );
 }), ee = u(({ className: t, ...r }, e) => /* @__PURE__ */ n(
-  Z,
+  Y,
   {
     ref: e,
     className: y("tw:rounded-sm tw:w-4 tw:h-4 tw:checked:bg-(image:--tick) tw:bg-center", t),
     ...r
   }
-)), V = ({ onClick: t, className: r, label: e = "Close" }) => /* @__PURE__ */ n(
+)), Q = ({ onClick: t, className: r, label: e = "Close" }) => /* @__PURE__ */ n(
   "button",
   {
     type: "button",
@@ -534,7 +537,7 @@ const E = H(void 0), L = H({ responsive: !0 }), vt = ({ children: t, className:
     /* @__PURE__ */ n(
       v,
       {
-        icon: a ? Y : st,
+        icon: a ? X : st,
         spin: a,
         className: w(
           "tw:absolute tw:top-[50%] tw:translate-y-[-50%] tw:transition-colors",
@@ -635,7 +638,7 @@ function ae({
   );
 }
 const de = u(({ className: t, ...r }, e) => /* @__PURE__ */ n(
-  Z,
+  Y,
   {
     ref: e,
     className: y(
@@ -666,8 +669,8 @@ const de = u(({ className: t, ...r }, e) => /* @__PURE__ */ n(
     type: o,
     ...a
   }
-), z = H(null), _t = ({ className: t, to: r, ...e }) => {
-  const o = C(z);
+), Z = H(null), _t = ({ className: t, to: r, ...e }) => {
+  const o = C(Z);
   return /* @__PURE__ */ n(
     at,
     {
@@ -690,7 +693,7 @@ const de = u(({ className: t, ...r }, e) => /* @__PURE__ */ n(
       ...e
     }
   );
-}, Dt = ({ children: t, className: r, fill: e }) => /* @__PURE__ */ n(z.Provider, { value: { fill: e }, children: /* @__PURE__ */ n(N, { role: "menubar", className: w("tw:flex tw:overflow-hidden", r), 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, r) => Array.from({ length: r - t }, (e, o) => t + o), jt = (t, r) => {
+}, Dt = ({ children: t, className: r, fill: e }) => /* @__PURE__ */ n(Z.Provider, { value: { fill: e }, children: /* @__PURE__ */ n(N, { role: "menubar", className: w("tw:flex tw:overflow-hidden", r), children: t }) }), le = Object.assign(Dt, { Pill: _t }), Ft = new Intl.NumberFormat("en-US"), $t = (t) => Ft.format(Number(t)), V = 10, ie = (t) => Math.ceil(t / V) * V, T = 2, _ = "...", St = (t, r) => Array.from({ length: r - t }, (e, o) => t + o), jt = (t, r) => {
   const e = St(
     Math.max(T, t - T),
     Math.min(r - 1, t + T) + 1
@@ -724,7 +727,7 @@ const se = ({ currentPage: t, pagesCount: r, ...e }) => {
     [o, e]
   );
   return r < 2 ? null : /* @__PURE__ */ g("div", { className: "tw:select-none tw:flex", "data-testid": "paginator", children: [
-    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 }) }),
+    t === 1 ? /* @__PURE__ */ n(A, { children: /* @__PURE__ */ n(v, { size: "xs", icon: G }) }) : /* @__PURE__ */ n(a, { ...l(Math.max(1, t - 1)), "aria-label": "Previous", children: /* @__PURE__ */ n(v, { size: "xs", icon: G }) }),
     jt(t, r).map((d, i) => /* @__PURE__ */ n(
       a,
       {
@@ -735,7 +738,7 @@ const se = ({ currentPage: t, pagesCount: r, ...e }) => {
       },
       Ht(d, i)
     )),
-    t === r ? /* @__PURE__ */ n(A, { children: /* @__PURE__ */ n(v, { size: "xs", icon: Q }) }) : /* @__PURE__ */ n(a, { ...l(Math.min(r, t + 1)), "aria-label": "Next", children: /* @__PURE__ */ n(v, { size: "xs", icon: Q }) })
+    t === r ? /* @__PURE__ */ n(A, { children: /* @__PURE__ */ n(v, { size: "xs", icon: J }) }) : /* @__PURE__ */ n(a, { ...l(Math.min(r, t + 1)), "aria-label": "Next", children: /* @__PURE__ */ n(v, { size: "xs", icon: J }) })
   ] });
 }, Wt = ({
   open: t,
@@ -800,11 +803,11 @@ const se = ({ currentPage: t, pagesCount: r, ...e }) => {
     if (k) {
       delete R.current.dataset.open;
       let q = !1;
-      const G = (nt) => {
+      const z = (nt) => {
         q || nt.target !== k || (q = !0, f(!1), h == null || h($.current));
       };
-      return k.addEventListener("transitionend", G), () => {
-        k.removeEventListener("transitionend", G);
+      return k.addEventListener("transitionend", z), () => {
+        k.removeEventListener("transitionend", z);
       };
     }
   }, [h, t]), M(() => {
@@ -858,7 +861,7 @@ const se = ({ currentPage: t, pagesCount: r, ...e }) => {
                 ),
                 children: [
                   /* @__PURE__ */ n("h5", { children: o }),
-                  /* @__PURE__ */ n(V, { onClick: r, label: "Close dialog" })
+                  /* @__PURE__ */ n(Q, { onClick: r, label: "Close dialog" })
                 ]
               }
             ),
@@ -869,7 +872,7 @@ const se = ({ currentPage: t, pagesCount: r, ...e }) => {
               "tw:flex tw:items-center tw:justify-between tw:gap-x-2"
             ), children: [
               /* @__PURE__ */ n("h5", { className: w({ "tw:text-danger": e === "danger" }), children: o }),
-              /* @__PURE__ */ n(V, { onClick: r, label: "Close dialog" })
+              /* @__PURE__ */ n(Q, { onClick: r, label: "Close dialog" })
             ] }),
             /* @__PURE__ */ n(N.Body, { children: a }),
             p && /* @__PURE__ */ g(
@@ -905,7 +908,7 @@ const se = ({ currentPage: t, pagesCount: r, ...e }) => {
   "tw:text-danger": o === "error"
 }), children: [
   e && /* @__PURE__ */ g(S, { children: [
-    /* @__PURE__ */ n(v, { icon: Y, spin: !0 }),
+    /* @__PURE__ */ n(v, { icon: X, spin: !0 }),
     /* @__PURE__ */ n("span", { className: "tw:ml-2", children: r ?? "Loading..." })
   ] }),
   !e && r
@@ -958,9 +961,9 @@ export {
   N as Card,
   we as CardModal,
   ee as Checkbox,
-  V as CloseButton,
+  Q as CloseButton,
   ge as CopyToClipboardButton,
-  zt as Details,
+  Zt as Details,
   _ as ELLIPSIS,
   U as Input,
   W as Label,

package/package.json

@@ -58,19 +58,19 @@
   "devDependencies": {
     "@shlinkio/eslint-config-js-coding-standard": "~3.5.0",
     "@stylistic/eslint-plugin": "^4.4.0",
-    "@tailwindcss/vite": "^4.1.7",
+    "@tailwindcss/vite": "^4.1.8",
     "@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.5",
+    "@types/react": "^19.1.6",
     "@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.27.0",
+    "eslint": "^9.28.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
@@ -79,9 +79,9 @@
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "history": "^5.3.0",
     "playwright": "^1.52.0",
-    "sass": "^1.89.0",
+    "sass": "^1.89.1",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.32.1",
+    "typescript-eslint": "^8.33.0",
     "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.0.2"
@@ -92,5 +92,5 @@
     "not ie <= 11",
     "not op_mini all"
   ],
-  "version": "0.9.5"
+  "version": "0.9.6"
 }