@shlinkio/shlink-frontend-kit 0.7.3 → 0.8.0

package/README.md

@@ -1,3 +1,15 @@
 # Shlink frontend kit
 
 React components and utilities for Shlink frontend projects
+
+## Tailwind alternatives
+
+This library provides some tailwindcss-based components. To use them make sure to import components from `@shlinkio/shlink-frontend-kit/tailwind` and you add the following instructions to your tailwind stylesheet:
+
+```css
+@import 'tailwindcss' prefix(tw);
+
+/* Add these two lines */
+@source '../node_modules/@shlinkio/shlink-frontend-kit';
+@import '@shlinkio/shlink-frontend-kit/tailwind.preset.css';
+```

package/dist/index.d.ts

@@ -193,7 +193,7 @@ declare type ToggleResult = [boolean, () => void, () => void, () => void];
 
 export declare const ToggleSwitch: FC<BooleanControlProps>;
 
-export declare const useElementRef: <T>() => RefObject<T | null>;
+export declare const useElementRef: <T extends HTMLElement>() => RefObject<T | null>;
 
 export declare const useOrder: <T>(initialOrder: Order<T>) => [Order<T>, (orderField?: T, orderDir?: OrderDir) => void];
 

package/dist/tailwind.d.ts

@@ -0,0 +1,224 @@
+import { FC } from 'react';
+import { HTMLProps } from 'react';
+import { InputHTMLAttributes } from 'react';
+import { LinkProps } from 'react-router';
+import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
+
+export declare type BaseInputProps = {
+    size?: Size;
+    feedback?: 'error';
+};
+
+export declare const Button: FC<ButtonProps>;
+
+export declare type ButtonProps = PropsWithChildren<{
+    disabled?: boolean;
+    className?: string;
+    variant?: 'primary' | 'secondary' | 'danger';
+    size?: Size;
+    inline?: boolean;
+    solid?: boolean;
+} & (RegularButtonProps | LinkButtonProps_2)>;
+
+export declare type Callback = () => unknown;
+
+export declare const Card: FC<CardProps> & {
+    Body: FC<CardProps>;
+    Header: FC<CardProps>;
+    Footer: FC<CardProps>;
+};
+
+export declare type CardProps = HTMLProps<HTMLDivElement>;
+
+export declare type CellProps = HTMLProps<HTMLTableCellElement> & {
+    /**
+     * The name of the column to be displayed in small resolutions when the table is responsive, where the cells collapse.
+     * It is ignored for non-responsive tables.
+     */
+    columnName?: string;
+    /**
+     * Whether to use a th or td tag. If not provided, it is inferred based on the section, using td when inside tbody,
+     * and th when inside thead or tfoot
+     */
+    type?: 'td' | 'th';
+};
+
+export declare const CloseButton: FC<CloseButtonProps>;
+
+export declare type CloseButtonProps = {
+    label?: string;
+    onClick?: HTMLProps<HTMLButtonElement>['onClick'];
+};
+
+declare type CommonModalDialogProps = {
+    open: boolean;
+    size?: Size | 'xl' | 'full';
+    /** Modal header title */
+    title: string;
+    /** Invoked when the modal is closed for any reason */
+    onClose?: () => void;
+};
+
+declare type CoverModalDialogProps = CommonModalDialogProps & {
+    /**
+     * Cover dialogs have a body that span the whole dialog, and no buttons.
+     * The header overlaps the body with semi-transparent background.
+     */
+    variant: 'cover';
+};
+
+export declare const ELLIPSIS = "...";
+
+declare type Ellipsis = typeof ELLIPSIS;
+
+export declare const formatNumber: (number: number | string) => string;
+
+export declare const Input: FC<InputProps>;
+
+export declare type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & BaseInputProps & {
+    borderless?: boolean;
+};
+
+export declare const keyForPage: (pageNumber: NumberOrEllipsis, index: number) => string;
+
+export declare const Label: FC<LabelProps>;
+
+export declare const LabelledInput: FC<LabelledInputProps>;
+
+export declare type LabelledInputProps = Omit<InputProps, 'className' | 'id' | 'feedback'> & {
+    label: string;
+    inputClassName?: string;
+    error?: string;
+    /** Alternative to `required`. Causes the input to be required, without displaying an asterisk */
+    hiddenRequired?: boolean;
+};
+
+export declare const LabelledSelect: FC<LabelledSelectProps>;
+
+export declare type LabelledSelectProps = Omit<SelectProps, 'className' | 'id'> & {
+    label: string;
+    selectClassName?: string;
+    /** Alternative to `required`. Causes the input to be required, without displaying an asterisk */
+    hiddenRequired?: boolean;
+};
+
+export declare type LabelProps = HTMLProps<HTMLLabelElement> & {
+    required?: boolean;
+};
+
+export declare const LinkButton: FC<LinkButtonProps>;
+
+export declare type LinkButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type'> & {
+    size?: Size;
+    type?: HTMLButtonElement['type'];
+};
+
+declare type LinkButtonProps_2 = LinkProps;
+
+export declare const ModalDialog: FC<ModalDialogProps>;
+
+export declare type ModalDialogProps = Omit<HTMLProps<HTMLDialogElement>, 'title' | 'size'> & (CoverModalDialogProps | RegularModalDialogProps);
+
+declare type NoTitleProps = {
+    title?: never;
+    titleSize?: never;
+};
+
+export declare type NumberOrEllipsis = number | Ellipsis;
+
+export declare const pageIsEllipsis: (pageNumber: NumberOrEllipsis) => pageNumber is Ellipsis;
+
+export declare const Paginator: FC<PaginatorProps>;
+
+export declare type PaginatorProps = {
+    pagesCount: number;
+    currentPage: number;
+} & ({
+    onPageChange: (currentPage: number) => void;
+} | {
+    urlForPage: (pageNumber: number) => string;
+});
+
+export declare const prettifyPageNumber: (pageNumber: NumberOrEllipsis) => string;
+
+export declare const progressivePagination: (currentPage: number, pageCount: number) => NumberOrEllipsis[];
+
+declare type RegularButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'size'>;
+
+declare type RegularModalDialogProps = CommonModalDialogProps & {
+    /** Danger dialogs use danger variants in title and confirm button */
+    variant?: 'default' | 'danger';
+    /** Value to display in confirm button. Defaults to 'Confirm' */
+    confirmText?: string;
+    /** Invoked when the modal is closed via confirm button */
+    onConfirm?: () => void;
+};
+
+export declare const roundTen: (number: number) => number;
+
+export declare const SearchInput: FC<SearchInputProps>;
+
+export declare type SearchInputProps = Omit<InputProps, 'className' | 'onChange' | 'value'> & {
+    onChange: (searchTerm: string) => void;
+    containerClassName?: string;
+    inputClassName?: string;
+};
+
+export declare type SectionType = 'head' | 'body' | 'footer';
+
+export declare const Select: FC<SelectProps>;
+
+declare type SelectElementProps = Omit<HTMLProps<HTMLSelectElement>, 'size'>;
+
+export declare type SelectProps = PropsWithChildren<SelectElementProps & BaseInputProps>;
+
+export declare const SimpleCard: FC<SimpleCardProps>;
+
+export declare type SimpleCardProps = Omit<CardProps, 'title' | 'size'> & {
+    bodyClassName?: string;
+} & (TitleProps | NoTitleProps);
+
+declare type Size = 'sm' | 'md' | 'lg';
+
+export declare const Table: FC<TableProps> & {
+    Row: FC<HTMLProps<HTMLTableRowElement>>;
+    Cell: FC<CellProps>;
+};
+
+export declare type TableElementProps = PropsWithChildren & {
+    className?: string;
+};
+
+export declare type TableProps = HTMLProps<HTMLTableElement> & {
+    header: ReactNode;
+    footer?: ReactNode;
+    /**
+     * By default, the table rows will collapse under large resolutions, and the headers will be hidden.
+     * Set `responsive={false}` to avoid this behavior.
+     */
+    responsive?: boolean;
+};
+
+declare type TitleProps = {
+    title: ReactNode;
+    titleSize?: Size;
+};
+
+export declare function useTimeout(defaultDelay: number, 
+/** Test seam. Defaults to global setTimeout */
+setTimeout_?: typeof globalThis.setTimeout, 
+/** Test seam. Defaults to global clearTimeout */
+clearTimeout_?: typeof clearTimeout): UseTimeoutResult;
+
+export declare type UseTimeoutResult = {
+    /**
+     * Clears any in-progress timeout, and schedules a new callback.
+     * It optionally allows a delay to be provided, or falls back to the default delay otherwise.
+     */
+    setTimeout: (callback: Callback, delay?: number) => void;
+    /** Clears any in-progress timeout */
+    clearCurrentTimeout: () => void;
+};
+
+export { }

package/dist/tailwind.js

@@ -0,0 +1,534 @@
+import { jsx as n, jsxs as c } from "react/jsx-runtime";
+import w from "clsx";
+import { createContext as I, useContext as b, useId as B, useRef as S, useCallback as p, useEffect as F, useMemo as T } from "react";
+import { Link as L } from "react-router";
+import { faClose as $, faSearch as O, faChevronLeft as q, faChevronRight as _ } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon as k } from "@fortawesome/react-fontawesome";
+const y = I(void 0), f = I({ responsive: !0 }), G = ({ children: t, className: r }) => {
+  const { responsive: e } = b(f);
+  return /* @__PURE__ */ n(y.Provider, { value: { section: "head" }, children: /* @__PURE__ */ n(
+    "thead",
+    {
+      className: w(
+        { "tw:hidden tw:lg:table-header-group": e },
+        r
+      ),
+      children: t
+    }
+  ) });
+}, J = ({ children: t, className: r }) => {
+  const { responsive: e } = b(f);
+  return /* @__PURE__ */ n(y.Provider, { value: { section: "body" }, children: /* @__PURE__ */ n(
+    "tbody",
+    {
+      className: w(
+        { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3": e },
+        r
+      ),
+      children: t
+    }
+  ) });
+}, K = ({ children: t, className: r }) => {
+  const { responsive: e } = b(f);
+  return /* @__PURE__ */ n(y.Provider, { value: { section: "footer" }, children: /* @__PURE__ */ n(
+    "tfoot",
+    {
+      className: w(
+        { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3 tw:mt-4": e },
+        r
+      ),
+      children: t
+    }
+  ) });
+}, Q = ({ children: t, className: r, ...e }) => {
+  const o = b(y), d = (o == null ? void 0 : o.section) === "body", { responsive: l } = b(f);
+  return /* @__PURE__ */ n(
+    "tr",
+    {
+      className: w(
+        "tw:group",
+        {
+          "tw:lg:table-row tw:flex tw:flex-col": l,
+          "tw:lg:border-0 tw:border-y-2 tw:border-lm-border tw:dark:border-dm-border": l,
+          "tw:hover:bg-lm-primary tw:dark:hover:bg-dm-primary": d,
+          // Use a different hover bg color depending on the table being inside a card or not
+          "tw:group-[&]/card:hover:bg-lm-secondary tw:dark:group-[&]/card:hover:bg-dm-secondary": d
+        },
+        r
+      ),
+      ...e,
+      children: t
+    }
+  );
+}, V = ({ children: t, className: r, columnName: e, type: o, ...d }) => {
+  const l = b(y), a = o ?? ((l == null ? void 0 : l.section) !== "body" ? "th" : "td"), { responsive: s } = b(f);
+  return /* @__PURE__ */ n(
+    a,
+    {
+      "data-column": s ? e : void 0,
+      className: w(
+        "tw:p-2 tw:border-lm-border tw:dark:border-dm-border",
+        {
+          "tw:border-b-1": !s,
+          "tw:block tw:lg:table-cell tw:not-last:border-b-1 tw:lg:border-b-1": s,
+          // For md and lower, display the content in data-column attribute as before
+          "tw:before:lg:hidden tw:before:content-[attr(data-column)] tw:before:font-bold tw:before:mr-1": s && a === "td"
+        },
+        r
+      ),
+      ...d,
+      children: t
+    }
+  );
+}, W = ({ header: t, footer: r, children: e, responsive: o = !0, ...d }) => /* @__PURE__ */ n(f.Provider, { value: { responsive: o }, children: /* @__PURE__ */ c("table", { className: "tw:w-full", ...d, children: [
+  /* @__PURE__ */ n(G, { children: t }),
+  /* @__PURE__ */ n(J, { children: e }),
+  r && /* @__PURE__ */ n(K, { children: r })
+] }) }), yt = Object.assign(W, { Row: Q, Cell: V }), X = ({
+  children: t,
+  className: r,
+  disabled: e,
+  variant: o = "primary",
+  size: d = "md",
+  inline: l = !1,
+  solid: a = !1,
+  ...s
+}) => {
+  const m = "to" in s ? L : "button";
+  return (
+    // @ts-expect-error We are explicitly checking for the `to` prop before using Link
+    /* @__PURE__ */ n(
+      m,
+      {
+        className: w(
+          {
+            "tw:inline-flex": l,
+            "tw:flex": !l
+          },
+          "tw:gap-2 tw:items-center tw:justify-center",
+          "tw:border tw:rounded-md tw:no-underline",
+          "tw:transition-colors",
+          {
+            "tw:focus-ring": o !== "danger",
+            "tw:focus-ring-danger": o === "danger"
+          },
+          {
+            "tw:px-1.5 tw:py-1 tw:text-sm": d === "sm",
+            "tw:px-3 tw:py-1.5": d === "md",
+            "tw:px-4 tw:py-2 tw:text-lg": d === "lg"
+          },
+          {
+            "tw:border-brand tw:text-brand": o === "primary",
+            "tw:border-zinc-500": o === "secondary",
+            "tw:text-zinc-500": o === "secondary" && !a,
+            "tw:border-danger": o === "danger",
+            "tw:text-danger": o === "danger" && !a
+          },
+          a && {
+            "tw:text-white": !0,
+            "tw:bg-brand": o === "primary",
+            "tw:highlight:bg-brand-dark tw:highlight:border-brand-dark": o === "primary",
+            "tw:bg-zinc-500": o === "secondary",
+            "tw:highlight:bg-zinc-600 tw:highlight:border-zinc-600": o === "secondary",
+            "tw:bg-danger": o === "danger",
+            "tw:highlight:bg-danger-dark tw:highlight:border-danger-dark": o === "danger"
+          },
+          !e && {
+            "tw:highlight:text-white": !a,
+            "tw:highlight:bg-brand": o === "primary",
+            "tw:highlight:bg-zinc-500": o === "secondary",
+            "tw:highlight:bg-danger": o === "danger"
+          },
+          {
+            "tw:pointer-events-none tw:opacity-65": e
+          },
+          r
+        ),
+        disabled: e,
+        ...s,
+        children: t
+      }
+    )
+  );
+}, Y = ({ onClick: t, label: r = "Close" }) => /* @__PURE__ */ n(
+  "button",
+  {
+    onClick: t,
+    className: w(
+      "tw:opacity-50 tw:highlight:opacity-80 tw:transition-opacity",
+      "tw:rounded-md tw:focus-ring"
+    ),
+    "aria-label": r,
+    children: /* @__PURE__ */ n(k, { icon: $, size: "xl" })
+  }
+), R = ({
+  borderless: t = !1,
+  size: r = "md",
+  feedback: e,
+  className: o,
+  disabled: d,
+  readOnly: l,
+  ...a
+}) => {
+  const s = !d && !l;
+  return /* @__PURE__ */ n(
+    "input",
+    {
+      className: w(
+        "tw:w-full",
+        {
+          "tw:focus-ring": !e,
+          "tw:focus-ring-danger": e === "error"
+        },
+        {
+          "tw:px-2 tw:py-1 tw:text-sm": r === "sm",
+          "tw:px-3 tw:py-1.5": r === "md",
+          "tw:px-4 tw:py-2 tw:text-xl": r === "lg"
+        },
+        {
+          "tw:rounded-md tw:border": !t,
+          "tw:border-lm-input-border tw:dark:border-dm-input-border": !t && !e,
+          "tw:border-danger": !t && e === "error",
+          "tw:bg-lm-disabled-input tw:dark:bg-dm-disabled-input": !s,
+          "tw:bg-lm-primary tw:dark:bg-dm-primary": s,
+          // Use different background color when rendered inside a card
+          "tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input": s
+        },
+        o
+      ),
+      disabled: d,
+      readOnly: l,
+      ...a
+    }
+  );
+}, E = ({ required: t, children: r, ...e }) => /* @__PURE__ */ c("label", { ...e, children: [
+  r,
+  t && /* @__PURE__ */ n("span", { className: "tw:text-danger tw:ml-1", "data-testid": "required-indicator", children: "*" })
+] }), kt = ({ label: t, inputClassName: r, required: e, hiddenRequired: o, error: d, ...l }) => {
+  const a = B();
+  return /* @__PURE__ */ c("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
+    /* @__PURE__ */ n(E, { htmlFor: a, required: e, children: t }),
+    /* @__PURE__ */ n(
+      R,
+      {
+        id: a,
+        className: r,
+        required: e || o,
+        feedback: d ? "error" : void 0,
+        ...l
+      }
+    ),
+    d && /* @__PURE__ */ n("span", { className: "tw:text-danger", children: d })
+  ] });
+}, Z = String.raw`data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>`, z = ({
+  className: t,
+  size: r = "md",
+  feedback: e,
+  style: o = {},
+  disabled: d,
+  ...l
+}) => /* @__PURE__ */ n(
+  "select",
+  {
+    className: w(
+      "tw:w-full tw:appearance-none tw:pr-9 tw:bg-no-repeat",
+      {
+        "tw:focus-ring": !e,
+        "tw:focus-ring-danger": e === "error"
+      },
+      "tw:rounded-md tw:border",
+      {
+        "tw:border-lm-input-border tw:dark:border-dm-input-border": !e,
+        "tw:border-danger": e === "error"
+      },
+      {
+        "tw:pl-2 tw:py-1 tw:text-sm": r === "sm",
+        "tw:pl-3 tw:py-1.5": r === "md",
+        "tw:pl-4 tw:py-2 tw:text-xl": r === "lg",
+        "tw:bg-lm-disabled-input tw:dark:bg-dm-disabled-input": d,
+        // Apply different background color when rendered inside a card
+        "tw:bg-lm-primary tw:dark:bg-dm-primary tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input": !d
+      },
+      t
+    ),
+    style: {
+      ...o,
+      backgroundImage: `url("${Z}")`,
+      backgroundSize: "16px 12px",
+      backgroundPosition: "right 0.75rem center"
+    },
+    disabled: d,
+    ...l
+  }
+), vt = ({ selectClassName: t, label: r, required: e, hiddenRequired: o, ...d }) => {
+  const l = B();
+  return /* @__PURE__ */ c("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
+    /* @__PURE__ */ n(E, { htmlFor: l, required: e, children: r }),
+    /* @__PURE__ */ n(z, { id: l, className: t, required: e || o, ...d })
+  ] });
+};
+function tt(t, r = globalThis.setTimeout.bind(globalThis), e = globalThis.clearTimeout.bind(globalThis)) {
+  const o = S(null), d = p(() => {
+    o.current && e(o.current);
+  }, [e]), l = p((a, s) => {
+    d(), o.current = r(() => {
+      a(), o.current = null;
+    }, s ?? t);
+  }, [d, t, r]);
+  return F(() => d, [d]), T(
+    () => ({ setTimeout: l, clearCurrentTimeout: d }),
+    [d, l]
+  );
+}
+const Nt = ({
+  onChange: t,
+  containerClassName: r,
+  inputClassName: e,
+  // Inputs have a default 'md' size. Search inputs are usually 'lg' as they are rendered at the top of sections
+  size: o = "lg",
+  ...d
+}) => {
+  const { setTimeout: l, clearCurrentTimeout: a } = tt(500), s = p((m) => {
+    m ? l(() => t(m)) : (a(), t(m));
+  }, [a, t, l]);
+  return /* @__PURE__ */ c("div", { className: w("tw:group tw:relative tw:focus-within:z-10", r), children: [
+    /* @__PURE__ */ n(
+      k,
+      {
+        icon: O,
+        className: w(
+          "tw:absolute tw:top-[50%] tw:translate-y-[-50%] tw:transition-colors",
+          "tw:text-placeholder tw:group-focus-within:text-lm-text tw:dark:group-focus-within:text-dm-text",
+          {
+            "tw:left-3": o !== "sm",
+            "tw:scale-85 tw:left-2": o === "sm"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ n(
+      R,
+      {
+        type: "search",
+        className: w(
+          {
+            "tw:pl-9": o !== "sm",
+            "tw:pl-7": o === "sm"
+          },
+          e
+        ),
+        placeholder: "Search...",
+        onChange: (m) => s(m.target.value),
+        size: o,
+        ...d
+      }
+    )
+  ] });
+}, rt = ({ className: t, disabled: r, size: e = "md", ...o }) => /* @__PURE__ */ n(
+  "button",
+  {
+    className: w(
+      "tw:inline-flex tw:rounded-md tw:focus-ring",
+      "tw:text-brand tw:highlight:text-brand-dark tw:highlight:underline",
+      {
+        "tw:px-1.5 tw:py-1 tw:text-sm": e === "sm",
+        "tw:px-3 tw:py-1.5": e === "md",
+        "tw:px-4 tw:py-2 tw:text-lg": e === "lg",
+        "tw:pointer-events-none tw:opacity-65": r
+      },
+      t
+    ),
+    disabled: r,
+    ...o
+  }
+), et = new Intl.NumberFormat("en-US"), ot = (t) => et.format(Number(t)), P = 10, Tt = (t) => Math.ceil(t / P) * P, h = 2, v = "...", nt = (t, r) => Array.from({ length: r - t }, (e, o) => t + o), dt = (t, r) => {
+  const e = nt(
+    Math.max(h, t - h),
+    Math.min(r - 1, t + h) + 1
+  );
+  return t - h > h && e.unshift(v), t + h < r - 1 && e.push(v), e.unshift(1), e.push(r), e;
+}, x = (t) => t === v, lt = (t) => x(t) ? t : ot(t), at = (t, r) => x(t) ? `${t}_${r}` : `${t}`, M = (t = !1) => w(
+  "tw:border tw:border-r-0 tw:last:border-r tw:border-lm-border tw:dark:border-dm-border",
+  "tw:first:rounded-l tw:last:rounded-r",
+  "tw:px-3 py-2 tw:cursor-pointer tw:no-underline",
+  "tw:outline-none tw:focus-visible:ring-3 tw:focus-visible:ring-brand/75 tw:focus-visible:z-1",
+  {
+    "tw:hover:bg-lm-secondary tw:dark:hover:bg-dm-secondary tw:text-brand tw:border-r-lm-border tw:dark:border-r-dm-border": !t,
+    "tw:bg-brand tw:text-white tw:border-r-brand": t
+  }
+);
+function j() {
+  return /* @__PURE__ */ n(
+    "span",
+    {
+      "aria-hidden": !0,
+      className: "tw:border-r tw:last:border-none tw:px-3 py-2 tw:text-gray-400 tw:border-r-(--border-color)",
+      children: v
+    }
+  );
+}
+function st({ children: t, active: r, isEllipsis: e, href: o, ...d }) {
+  const l = T(() => M(r), [r]);
+  return e ? /* @__PURE__ */ n(j, {}) : /* @__PURE__ */ n(L, { className: l, to: o, ...d, children: t });
+}
+function wt({ children: t, active: r, isEllipsis: e, ...o }) {
+  const d = T(() => M(r), [r]);
+  return e ? /* @__PURE__ */ n(j, {}) : /* @__PURE__ */ n("button", { type: "button", className: d, ...o, children: t });
+}
+const Ct = ({ currentPage: t, pagesCount: r, ...e }) => {
+  const o = "urlForPage" in e, d = o ? st : wt, l = p(
+    (a) => o ? { href: x(a) ? void 0 : e.urlForPage(a) } : { onClick: () => !x(a) && e.onPageChange(a) },
+    [o, e]
+  );
+  return r < 2 ? null : /* @__PURE__ */ c("div", { className: "tw:select-none tw:flex", "data-testid": "paginator", children: [
+    /* @__PURE__ */ n(d, { ...l(Math.max(1, t - 1)), "aria-label": "Previous", children: /* @__PURE__ */ n(k, { size: "xs", icon: q }) }),
+    dt(t, r).map((a, s) => /* @__PURE__ */ n(
+      d,
+      {
+        active: a === t,
+        isEllipsis: x(a),
+        ...l(a),
+        children: lt(a)
+      },
+      at(a, s)
+    )),
+    /* @__PURE__ */ n(d, { ...l(Math.min(r, t + 1)), "aria-label": "Next", children: /* @__PURE__ */ n(k, { size: "xs", icon: _ }) })
+  ] });
+}, it = ({ className: t, ...r }) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: w(
+      "tw:px-4 tw:py-3 tw:rounded-t-md",
+      "tw:bg-lm-primary tw:dark:bg-dm-primary tw:border-b tw:border-lm-border tw:dark:border-dm-border",
+      t
+    ),
+    ...r
+  }
+), ct = ({ className: t, ...r }) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: w(
+      "tw:p-4 tw:bg-lm-primary tw:dark:bg-dm-primary tw:first:rounded-t-md",
+      "tw:first:rounded-t-md tw:last:rounded-b-md",
+      t
+    ),
+    ...r
+  }
+), mt = ({ className: t, ...r }) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: w(
+      "tw:px-4 tw:py-3 tw:rounded-b-md",
+      "tw:bg-lm-primary tw:dark:bg-dm-primary tw:border-t tw:border-lm-border tw:dark:border-dm-border",
+      t
+    ),
+    ...r
+  }
+), gt = ({ className: t, ...r }) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: w(
+      "tw:group/card tw:rounded-md tw:shadow-md",
+      "tw:border tw:border-lm-border tw:dark:border-dm-border tw:bg-lm-primary tw:dark:bg-dm-primary",
+      t
+    ),
+    ...r
+  }
+), g = Object.assign(gt, { Body: ct, Header: it, Footer: mt }), Pt = ({ bodyClassName: t, children: r, ...e }) => {
+  const { title: o, titleSize: d = "md", ...l } = "title" in e ? e : {
+    ...e,
+    title: void 0,
+    titleSize: void 0
+  };
+  return /* @__PURE__ */ c(g, { ...l, children: [
+    o && /* @__PURE__ */ c(g.Header, { children: [
+      d === "lg" && /* @__PURE__ */ n("h4", { children: o }),
+      d === "md" && /* @__PURE__ */ n("h5", { children: o }),
+      d === "sm" && /* @__PURE__ */ n("h6", { children: o })
+    ] }),
+    /* @__PURE__ */ n(g.Body, { className: t, children: r })
+  ] });
+}, It = ({
+  open: t,
+  variant: r = "default",
+  size: e = "md",
+  title: o,
+  children: d,
+  className: l,
+  ...a
+}) => {
+  const { onConfirm: s, confirmText: m = "Confirm", ...H } = "onConfirm" in a ? a : {
+    ...a,
+    onConfirm: void 0,
+    confirmText: void 0
+  }, N = S(null), u = p(() => {
+    var i;
+    return (i = N.current) == null ? void 0 : i.close();
+  }, []), A = p(() => {
+    s == null || s(), u();
+  }, [u, s]);
+  return F(() => {
+    var C;
+    const i = document.querySelector("body"), D = i.style.overflow, U = i.style.paddingRight;
+    return t ? (i.style.overflow = "hidden", i.scrollHeight > i.clientHeight && (i.style.paddingRight = "15px"), (C = N.current) == null || C.showModal()) : u(), () => {
+      i.style.overflow = D, i.style.paddingRight = U;
+    };
+  }, [u, t]), /* @__PURE__ */ n(
+    "dialog",
+    {
+      ref: N,
+      className: w(
+        "tw:bg-transparent tw:backdrop:bg-black/50",
+        {
+          "tw:flex tw:w-screen tw:h-screen tw:max-w-screen tw:max-h-screen tw:px-4": t
+        },
+        l
+      ),
+      ...H,
+      children: t && /* @__PURE__ */ c(g, { className: w(
+        "tw:m-auto tw:w-full",
+        {
+          "tw:md:w-sm": e === "sm",
+          "tw:md:w-lg": e === "md",
+          "tw:md:w-4xl": e === "lg",
+          "tw:md:w-6xl": e === "xl",
+          "tw:w-full": e === "full"
+        }
+      ), children: [
+        /* @__PURE__ */ c(g.Header, { className: "tw:flex tw:items-center tw:justify-between tw:sticky tw:top-0", children: [
+          /* @__PURE__ */ n("h5", { className: w({ "tw:text-danger": r === "danger" }), children: o }),
+          /* @__PURE__ */ n(Y, { onClick: u, label: "Close dialog" })
+        ] }),
+        /* @__PURE__ */ n(g.Body, { children: d }),
+        /* @__PURE__ */ c(g.Footer, { className: "tw:flex tw:flex-row-reverse tw:gap-x-2 tw:items-center tw:py-4 tw:sticky tw:bottom-0", children: [
+          s && /* @__PURE__ */ n(X, { variant: r === "danger" ? "danger" : "primary", onClick: A, children: m }),
+          /* @__PURE__ */ n(rt, { onClick: u, children: "Cancel" })
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  X as Button,
+  g as Card,
+  Y as CloseButton,
+  v as ELLIPSIS,
+  R as Input,
+  E as Label,
+  kt as LabelledInput,
+  vt as LabelledSelect,
+  rt as LinkButton,
+  It as ModalDialog,
+  Ct as Paginator,
+  Nt as SearchInput,
+  z as Select,
+  Pt as SimpleCard,
+  yt as Table,
+  ot as formatNumber,
+  at as keyForPage,
+  x as pageIsEllipsis,
+  lt as prettifyPageNumber,
+  dt as progressivePagination,
+  Tt as roundTen,
+  tt as useTimeout
+};

package/dist/tailwind.preset.css

@@ -0,0 +1,153 @@
+/*
+ * Override `dark:` variant, which applies based on `prefers-color-scheme` by default, and make it apply based on the
+ * presence of `data-theme="dark"` attribute instead.
+ */
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
+@theme static inline {
+    /* Light mode */
+    /*--color-lm-main: #2078CF;*/ /*Properly accessible with white background*/
+    --color-lm-main: #4696e5; /* TODO Rename to "brand" */
+    --color-lm-main-dark: #1f69c0;
+    --color-lm-primary: #ffffff;
+    --color-lm-primary-alfa: rgba(var(--tw-color-lm-primary), .5);
+    --color-lm-secondary: #f5f6fe;
+    --color-lm-text: #232323;
+    --color-lm-border: rgb(0 0 0 / .125);
+    --color-lm-table-border: #dee2e6;
+    --color-lm-active: #eeeeee;
+    --color-lm-brand: var(--tw-color-lm-main); /* TODO Rename to "main" */
+    --color-lm-input: var(--tw-color-lm-primary);
+    --color-lm-disabled-input: var(--tw-color-lm-secondary);
+    --color-lm-input-text: #495057;
+    --color-lm-input-border: rgb(0 0 0 / .19);
+    --color-lm-table-highlight: rgb(0 0 0 / .075);
+
+    /* Dark mode */
+    --color-dm-main: #4696e5; /* TODO Rename to "brand" */
+    --color-dm-main-dark: #1f69c0;
+    --color-dm-primary: #161b22;
+    --color-dm-primary-alfa: rgba(var(--tw-color-dm-primary), .8);
+    --color-dm-secondary: #0f131a;
+    --color-dm-text: rgb(201 209 217);
+    --color-dm-border: rgb(255 255 255 / .15);
+    --color-dm-table-border: #393d43;
+    --color-dm-active: var(--tw-color-dm-secondary);
+    --color-dm-brand: #0b2d4e; /* TODO Rename to "main" */
+    --color-dm-input: rgb(17.9928571429 22.0821428571 27.8071428571);
+    --color-dm-disabled-input: rgb(26.0071428571 31.9178571429 40.1928571429);
+    --color-dm-input-text: var(--tw-color-dm-text);
+    --color-dm-input-border: var(--tw-color-dm-border);
+    --color-dm-table-highlight: var(--tw-color-dm-border);
+
+    /* TODO Remove these two colors */
+    --color-brand: #4696e5;
+    --color-brand-dark: #1f69c0;
+
+    /* General color palette */
+    --color-danger: #dc3545;
+    --color-danger-dark: #bb2d3b;
+    --color-warning: #ffc107;
+    --color-warning-dark: #ffca2c;
+    --color-placeholder: #6c757d;
+}
+
+@layer base {
+    html:not([data-theme='dark']) {
+        --primary-color: var(--tw-color-lm-primary);
+        --primary-color-alfa: var(--tw-color-lm-primary-alfa);
+        --secondary-color: var(--tw-color-lm-secondary);
+        --text-color: var(--tw-color-lm-text);
+        --border-color: var(--tw-color-lm-border);
+        --active-color: var(--tw-color-lm-active);
+        --brand-color: var(--tw-color-lm-brand);
+        --input-color: var(--tw-color-lm-input);
+        --input-disabled-color: var(--tw-color-lm-disabled-input);
+        --input-text-color: var(--tw-color-lm-input-text);
+        --input-border-color: var(--tw-color-lm-input-border);
+        --table-border-color: var(--tw-color-lm-table-border);
+        --table-highlight-color: var(--tw-color-lm-table-highlight);
+    }
+
+    html[data-theme='dark'] {
+        --primary-color: var(--tw-color-dm-primary);
+        --primary-color-alfa: var(--tw-color-dm-primary-alfa);
+        --secondary-color: var(--tw-color-dm-secondary);
+        --text-color: var(--tw-color-dm-text);
+        --border-color: var(--tw-color-dm-border);
+        --active-color: var(--tw-color-dm-active);
+        --brand-color: var(--tw-color-dm-brand);
+        --input-color: var(--tw-color-dm-input);
+        --input-disabled-color: var(--tw-color-dm-disabled-input);
+        --input-text-color: var(--tw-color-dm-input-text);
+        --input-border-color: var(--tw-color-dm-input-border);
+        --table-border-color: var(--tw-color-dm-table-border);
+        --table-highlight-color: var(--tw-color-dm-table-highlight);
+    }
+}
+
+@layer base {
+    :root {
+        --header-height: 56px;
+        @apply tw:scheme-normal tw:dark:scheme-dark tw:scroll-auto;
+    }
+
+    html, body {
+        @apply tw:h-full tw:bg-lm-secondary tw:dark:bg-dm-secondary tw:text-lm-text tw:dark:text-dm-text;
+    }
+
+    a {
+        /* Set these styles as plain CSS instead of @apply to avoid higher specificity */
+        /* TODO Use `main` color, not `brand` color */
+        color: var(--tw-color-brand);
+        border-radius: var(--tw-radius-xs);
+
+        @apply tw:focus-visible:outline-3 tw:focus-visible:outline-brand/50 tw:focus-visible:outline-offset-3 tw:focus-visible:z-1;
+    }
+
+    h1 {
+        @apply tw:text-[2.5rem]/[1.2] tw:m-0 tw:font-medium;
+    }
+    h2 {
+        @apply tw:text-[2rem]/[1.2] tw:m-0 tw:font-medium;
+    }
+    h3 {
+        @apply tw:text-[1.75rem]/[1.2] tw:m-0 tw:font-medium;
+    }
+    h4 {
+        @apply tw:text-2xl/[1.2] tw:m-0 tw:font-medium;
+    }
+    h5 {
+        @apply tw:text-xl/[1.2] tw:m-0 tw:font-medium;
+    }
+    h6 {
+        @apply tw:text-base/[1.2] tw:m-0 tw:font-medium;
+    }
+
+    hr {
+        @apply tw:my-3
+    }
+
+    p {
+        @apply tw:m-0;
+    }
+}
+
+@utility focus-ring-base {
+    @apply tw:outline-none tw:focus-visible:ring-3 tw:focus-visible:z-1 tw:transition-[box-shadow];
+}
+
+@utility focus-ring {
+    @apply tw:focus-ring-base tw:focus-visible:ring-brand/50;
+}
+
+@utility focus-ring-danger {
+    @apply tw:focus-ring-base tw:focus-visible:ring-danger/50;
+}
+
+@custom-variant highlight {
+    &:hover,
+    &:focus {
+        @slot;
+    }
+}

package/package.json

@@ -7,19 +7,30 @@
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./tailwind": {
+      "import": "./dist/tailwind.js",
+      "types": "./dist/tailwind.d.ts"
+    },
+    "./tailwind.preset.css": {
+      "style": "./dist/tailwind.preset.css",
+      "default": "./dist/tailwind.preset.css"
+    },
+    "./package.json": "./package.json"
+  },
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "vite build && cp ./src/base.scss ./dist/base.scss",
+    "build": "vite build && cp ./src/base.scss ./dist/base.scss && cp ./src/tailwind/tailwind.preset.css ./dist/tailwind.preset.css",
     "test": "vitest run",
     "test:ci": "npm run test -- --coverage",
-    "lint": "npm run lint:css && npm run lint:js",
-    "lint:css": "stylelint src/*.scss src/**/*.scss dev/*.scss dev/**/*.scss",
-    "lint:js": "eslint dev src test",
-    "lint:fix": "npm run lint:css:fix && npm run lint:js:fix",
-    "lint:css:fix": "npm run lint:css -- --fix",
-    "lint:js:fix": "npm run lint:js -- --fix",
+    "lint": "eslint dev src test",
+    "lint:fix": "npm run lint:js -- --fix",
     "types": "tsc",
     "dev": "vite serve --host=0.0.0.0 --port 3001"
   },
@@ -33,37 +44,42 @@
     "react": "^18.3 || ^19.0",
     "react-dom": "^18.3 || ^19.0",
     "react-router": "^7.0.2",
-    "reactstrap": "^9.2.0"
+    "reactstrap": "^9.2.0",
+    "tailwindcss": "^4.0.1"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@shlinkio/eslint-config-js-coding-standard": "~3.4.0",
-    "@shlinkio/stylelint-config-css-coding-standard": "~1.1.1",
-    "@stylistic/eslint-plugin": "^4.1.0",
+    "@stylistic/eslint-plugin": "^4.2.0",
+    "@tailwindcss/vite": "^4.0.16",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
     "@total-typescript/shoehorn": "^0.1.2",
-    "@types/react": "^19.0.10",
+    "@types/react": "^19.0.12",
     "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/coverage-v8": "^3.0.7",
-    "axe-core": "^4.10.2",
+    "@vitest/coverage-v8": "^3.0.9",
+    "axe-core": "^4.10.3",
     "bootstrap": "5.2.3",
-    "eslint": "^9.21.0",
+    "eslint": "^9.23.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-react-compiler": "^19.0.0-beta-40c6c23-20250301",
+    "eslint-plugin-react-compiler": "^19.0.0-beta-714736e-20250131",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "history": "^5.3.0",
     "jsdom": "^26.0.0",
     "resize-observer-polyfill": "^1.5.1",
-    "sass": "^1.85.1",
-    "stylelint": "^15.11.0",
-    "typescript": "^5.7.3",
-    "typescript-eslint": "^8.25.0",
-    "vite": "^6.2.0",
-    "vite-plugin-dts": "^4.5.1",
+    "sass": "^1.86.0",
+    "typescript": "^5.8.2",
+    "typescript-eslint": "^8.27.0",
+    "vite": "^6.2.2",
+    "vite-plugin-dts": "^4.5.3",
     "vitest": "^3.0.2"
   },
   "browserslist": [
@@ -72,5 +88,5 @@
     "not ie <= 11",
     "not op_mini all"
   ],
-  "version": "0.7.3"
+  "version": "0.8.0"
 }