@shlinkio/shlink-frontend-kit 0.7.3 → 0.8.1

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

@@ -1,11 +1,13 @@
 import { CardProps } from 'reactstrap';
 import { ChangeEvent } from 'react';
+import { Dispatch } from 'react';
 import { DropdownToggleProps } from 'reactstrap/types/lib/DropdownToggle';
 import { FC } from 'react';
 import { JSX } from 'react/jsx-runtime';
 import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
 import { RefObject } from 'react';
+import { SetStateAction } from 'react';
 
 declare type BooleanControlProps = PropsWithChildren<{
     checked?: boolean;
@@ -193,12 +195,14 @@ 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];
 
 export declare const useParsedQuery: <T>() => T;
 
+export declare const useTheme: (initialTheme?: Theme) => readonly [Theme, Dispatch<SetStateAction<Theme>>];
+
 export declare const useTimeoutToggle: (initialValue?: boolean, delay?: number, setTimeout?: ((handler: TimerHandler, timeout?: number, ...arguments: any[]) => number) & typeof globalThis.setTimeout, clearTimeout?: ((id: number | undefined) => void) & typeof globalThis.clearTimeout) => [boolean, () => void];
 
 export declare const useToggle: (initialValue?: boolean) => ToggleResult;

package/dist/index.js

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

package/dist/tailwind.d.ts

@@ -0,0 +1,203 @@
+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'];
+};
+
+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 = HTMLProps<HTMLDialogElement> & {
+    /** Whether the dialog is open or not */
+    open: boolean;
+    /** Invoked when the dialog is closed for any reason */
+    onClose: () => void;
+};
+
+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'>;
+
+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,494 @@
+import { jsx as n, jsxs as c } from "react/jsx-runtime";
+import a from "clsx";
+import { createContext as C, useContext as m, useRef as S, useEffect as B, useId as L, useCallback as f, useMemo as v } from "react";
+import { Link as R } from "react-router";
+import { faClose as U, faSearch as A, faChevronLeft as T, faChevronRight as I } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon as b } from "@fortawesome/react-fontawesome";
+const p = C(void 0), h = C({ responsive: !0 }), D = ({ children: t, className: r }) => {
+  const { responsive: e } = m(h);
+  return /* @__PURE__ */ n(p.Provider, { value: { section: "head" }, children: /* @__PURE__ */ n(
+    "thead",
+    {
+      className: a(
+        { "tw:hidden tw:lg:table-header-group": e },
+        r
+      ),
+      children: t
+    }
+  ) });
+}, O = ({ children: t, className: r }) => {
+  const { responsive: e } = m(h);
+  return /* @__PURE__ */ n(p.Provider, { value: { section: "body" }, children: /* @__PURE__ */ n(
+    "tbody",
+    {
+      className: a(
+        { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3": e },
+        r
+      ),
+      children: t
+    }
+  ) });
+}, W = ({ children: t, className: r }) => {
+  const { responsive: e } = m(h);
+  return /* @__PURE__ */ n(p.Provider, { value: { section: "footer" }, children: /* @__PURE__ */ n(
+    "tfoot",
+    {
+      className: a(
+        { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3 tw:mt-4": e },
+        r
+      ),
+      children: t
+    }
+  ) });
+}, _ = ({ children: t, className: r, ...e }) => {
+  const o = m(p), d = (o == null ? void 0 : o.section) === "body", { responsive: l } = m(h);
+  return /* @__PURE__ */ n(
+    "tr",
+    {
+      className: a(
+        "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
+    }
+  );
+}, q = ({ children: t, className: r, columnName: e, type: o, ...d }) => {
+  const l = m(p), s = o ?? ((l == null ? void 0 : l.section) !== "body" ? "th" : "td"), { responsive: i } = m(h);
+  return /* @__PURE__ */ n(
+    s,
+    {
+      "data-column": i ? e : void 0,
+      className: a(
+        "tw:p-2 tw:border-lm-border tw:dark:border-dm-border",
+        {
+          "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
+          "tw:before:lg:hidden tw:before:content-[attr(data-column)] tw:before:font-bold tw:before:mr-1": i && s === "td"
+        },
+        r
+      ),
+      ...d,
+      children: t
+    }
+  );
+}, G = ({ header: t, footer: r, children: e, responsive: o = !0, ...d }) => /* @__PURE__ */ n(h.Provider, { value: { responsive: o }, children: /* @__PURE__ */ c("table", { className: "tw:w-full", ...d, children: [
+  /* @__PURE__ */ n(D, { children: t }),
+  /* @__PURE__ */ n(O, { children: e }),
+  r && /* @__PURE__ */ n(W, { children: r })
+] }) }), bt = Object.assign(G, { Row: _, Cell: q }), ht = ({
+  open: t,
+  children: r,
+  className: e,
+  ...o
+}) => {
+  const d = S(null);
+  return B(() => {
+    var w, N;
+    const l = document.body, s = l.style.overflow, i = l.style.paddingRight;
+    if (t) {
+      const $ = window.outerWidth - l.clientWidth, z = l.scrollHeight > l.clientHeight;
+      l.style.overflow = "hidden", z && (l.style.paddingRight = `${$}px`), (w = d.current) == null || w.showModal();
+    } else
+      (N = d.current) == null || N.close();
+    return () => {
+      l.style.overflow = s, l.style.paddingRight = i;
+    };
+  }, [t]), /* @__PURE__ */ n(
+    "dialog",
+    {
+      ref: d,
+      className: a("tw:bg-transparent tw:backdrop:bg-black/50", e),
+      ...o,
+      children: t && r
+    }
+  );
+}, ut = ({
+  children: t,
+  className: r,
+  disabled: e,
+  variant: o = "primary",
+  size: d = "md",
+  inline: l = !1,
+  solid: s = !1,
+  ...i
+}) => {
+  const w = "to" in i ? R : "button";
+  return (
+    // @ts-expect-error We are explicitly checking for the `to` prop before using Link
+    /* @__PURE__ */ n(
+      w,
+      {
+        className: a(
+          {
+            "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" && !s,
+            "tw:border-danger": o === "danger",
+            "tw:text-danger": o === "danger" && !s
+          },
+          s && {
+            "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": !s,
+            "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,
+        ...i,
+        children: t
+      }
+    )
+  );
+}, pt = ({ onClick: t, label: r = "Close" }) => /* @__PURE__ */ n(
+  "button",
+  {
+    onClick: t,
+    className: a(
+      "tw:opacity-50 tw:highlight:opacity-80 tw:transition-opacity",
+      "tw:rounded-md tw:focus-ring"
+    ),
+    "aria-label": r,
+    children: /* @__PURE__ */ n(b, { icon: U, size: "xl" })
+  }
+), F = ({
+  borderless: t = !1,
+  size: r = "md",
+  feedback: e,
+  className: o,
+  disabled: d,
+  readOnly: l,
+  ...s
+}) => {
+  const i = !d && !l;
+  return /* @__PURE__ */ n(
+    "input",
+    {
+      className: a(
+        "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": !i,
+          "tw:bg-lm-primary tw:dark:bg-dm-primary": i,
+          // Use different background color when rendered inside a card
+          "tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input": i
+        },
+        o
+      ),
+      disabled: d,
+      readOnly: l,
+      ...s
+    }
+  );
+}, 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: "*" })
+] }), ft = ({ label: t, inputClassName: r, required: e, hiddenRequired: o, error: d, ...l }) => {
+  const s = L();
+  return /* @__PURE__ */ c("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
+    /* @__PURE__ */ n(E, { htmlFor: s, required: e, children: t }),
+    /* @__PURE__ */ n(
+      F,
+      {
+        id: s,
+        className: r,
+        required: e || o,
+        feedback: d ? "error" : void 0,
+        ...l
+      }
+    ),
+    d && /* @__PURE__ */ n("span", { className: "tw:text-danger", children: d })
+  ] });
+}, J = 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>`, K = ({
+  className: t,
+  size: r = "md",
+  feedback: e,
+  style: o = {},
+  disabled: d,
+  ...l
+}) => /* @__PURE__ */ n(
+  "select",
+  {
+    className: a(
+      "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("${J}")`,
+      backgroundSize: "16px 12px",
+      backgroundPosition: "right 0.75rem center"
+    },
+    disabled: d,
+    ...l
+  }
+), yt = ({ selectClassName: t, label: r, required: e, hiddenRequired: o, ...d }) => {
+  const l = L();
+  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(K, { id: l, className: t, required: e || o, ...d })
+  ] });
+};
+function Q(t, r = globalThis.setTimeout.bind(globalThis), e = globalThis.clearTimeout.bind(globalThis)) {
+  const o = S(null), d = f(() => {
+    o.current && e(o.current);
+  }, [e]), l = f((s, i) => {
+    d(), o.current = r(() => {
+      s(), o.current = null;
+    }, i ?? t);
+  }, [d, t, r]);
+  return B(() => d, [d]), v(
+    () => ({ setTimeout: l, clearCurrentTimeout: d }),
+    [d, l]
+  );
+}
+const xt = ({
+  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: s } = Q(500), i = f((w) => {
+    w ? l(() => t(w)) : (s(), t(w));
+  }, [s, t, l]);
+  return /* @__PURE__ */ c("div", { className: a("tw:group tw:relative tw:focus-within:z-10", r), children: [
+    /* @__PURE__ */ n(
+      b,
+      {
+        icon: A,
+        className: a(
+          "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(
+      F,
+      {
+        type: "search",
+        className: a(
+          {
+            "tw:pl-9": o !== "sm",
+            "tw:pl-7": o === "sm"
+          },
+          e
+        ),
+        placeholder: "Search...",
+        onChange: (w) => i(w.target.value),
+        size: o,
+        ...d
+      }
+    )
+  ] });
+}, V = new Intl.NumberFormat("en-US"), X = (t) => V.format(Number(t)), P = 10, kt = (t) => Math.ceil(t / P) * P, g = 2, y = "...", Y = (t, r) => Array.from({ length: r - t }, (e, o) => t + o), Z = (t, r) => {
+  const e = Y(
+    Math.max(g, t - g),
+    Math.min(r - 1, t + g) + 1
+  );
+  return t - g > g && e.unshift(y), t + g < r - 1 && e.push(y), e.unshift(1), e.push(r), e;
+}, u = (t) => t === y, tt = (t) => u(t) ? t : X(t), rt = (t, r) => u(t) ? `${t}_${r}` : `${t}`, vt = ({ className: t, disabled: r, size: e = "md", ...o }) => /* @__PURE__ */ n(
+  "button",
+  {
+    className: a(
+      "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
+  }
+), M = [
+  "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"
+], j = (t = !1) => a(
+  M,
+  "tw:px-3 py-2 tw:cursor-pointer tw:no-underline",
+  "tw:focus-ring tw:focus-visible:z-1",
+  {
+    "tw:highlight:bg-lm-secondary tw:dark:highlight:bg-dm-secondary tw:text-brand": !t,
+    "tw:bg-lm-brand tw:dark:bg-dm-brand tw:text-white": t
+  }
+), k = ({ children: t }) => /* @__PURE__ */ n("span", { "aria-hidden": !0, className: a(M, "tw:px-3 py-2 tw:text-gray-400"), children: t }), H = () => /* @__PURE__ */ n(k, { children: y });
+function et({ children: t, active: r, isEllipsis: e, href: o, ...d }) {
+  const l = v(() => j(r), [r]);
+  return e ? /* @__PURE__ */ n(H, {}) : /* @__PURE__ */ n(R, { className: l, to: o, ...d, children: t });
+}
+function ot({ children: t, active: r, isEllipsis: e, ...o }) {
+  const d = v(() => j(r), [r]);
+  return e ? /* @__PURE__ */ n(H, {}) : /* @__PURE__ */ n("button", { type: "button", className: d, ...o, children: t });
+}
+const Nt = ({ currentPage: t, pagesCount: r, ...e }) => {
+  const o = "urlForPage" in e, d = o ? et : ot, l = f(
+    (s) => o ? { href: u(s) ? void 0 : e.urlForPage(s) } : { onClick: () => !u(s) && e.onPageChange(s) },
+    [o, e]
+  );
+  return r < 2 ? null : /* @__PURE__ */ c("div", { className: "tw:select-none tw:flex", "data-testid": "paginator", children: [
+    t === 1 ? /* @__PURE__ */ n(k, { children: /* @__PURE__ */ n(b, { size: "xs", icon: T }) }) : /* @__PURE__ */ n(d, { ...l(Math.max(1, t - 1)), "aria-label": "Previous", children: /* @__PURE__ */ n(b, { size: "xs", icon: T }) }),
+    Z(t, r).map((s, i) => /* @__PURE__ */ n(
+      d,
+      {
+        active: s === t,
+        isEllipsis: u(s),
+        ...l(s),
+        children: tt(s)
+      },
+      rt(s, i)
+    )),
+    t === r ? /* @__PURE__ */ n(k, { children: /* @__PURE__ */ n(b, { size: "xs", icon: I }) }) : /* @__PURE__ */ n(d, { ...l(Math.min(r, t + 1)), "aria-label": "Next", children: /* @__PURE__ */ n(b, { size: "xs", icon: I }) })
+  ] });
+}, nt = ({ className: t, ...r }) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: a(
+      "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
+  }
+), dt = ({ className: t, ...r }) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: a(
+      "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
+  }
+), lt = ({ className: t, ...r }) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: a(
+      "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
+  }
+), st = ({ className: t, ...r }) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: a(
+      "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
+  }
+), x = Object.assign(st, { Body: dt, Header: nt, Footer: lt }), Tt = ({ 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(x, { ...l, children: [
+    o && /* @__PURE__ */ c(x.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(x.Body, { className: t, children: r })
+  ] });
+};
+export {
+  ut as Button,
+  x as Card,
+  pt as CloseButton,
+  y as ELLIPSIS,
+  F as Input,
+  E as Label,
+  ft as LabelledInput,
+  yt as LabelledSelect,
+  vt as LinkButton,
+  ht as ModalDialog,
+  Nt as Paginator,
+  xt as SearchInput,
+  K as Select,
+  Tt as SimpleCard,
+  bt as Table,
+  X as formatNumber,
+  rt as keyForPage,
+  u as pageIsEllipsis,
+  tt as prettifyPageNumber,
+  Z as progressivePagination,
+  kt as roundTen,
+  Q 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: rgb(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: rgb(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.1"
 }