@shlinkio/shlink-frontend-kit 0.8.13 → 0.9.0

package/dist/tailwind.preset.css

@@ -6,9 +6,8 @@
 
 @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-brand: #2078CF;
+    --color-lm-brand-dark: color-mix(in srgb, black 20%, var(--tw-color-lm-brand) 80%);
     --color-lm-primary: #ffffff;
     --color-lm-primary-alfa: rgb(var(--tw-color-lm-primary) / .5);
     --color-lm-secondary: #f5f6fe;
@@ -16,7 +15,7 @@
     --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-main: var(--tw-color-lm-brand);
     --color-lm-input: var(--tw-color-lm-primary);
     --color-lm-disabled-input: var(--tw-color-lm-secondary);
     --color-lm-input-text: #495057;
@@ -24,8 +23,8 @@
     --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-brand: #4696e5;
+    --color-dm-brand-dark: color-mix(in srgb, black 25%, var(--tw-color-dm-brand) 75%);
     --color-dm-primary: #161b22;
     --color-dm-primary-alfa: rgb(var(--tw-color-dm-primary) / .8);
     --color-dm-secondary: #0f131a;
@@ -33,22 +32,18 @@
     --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-main: #0b2d4e;
     --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-danger-dark: color-mix(in srgb, black 20%, var(--tw-color-danger) 80%);
     --color-warning: #ffc107;
-    --color-warning-dark: #ffca2c;
+    --color-warning-dark: color-mix(in srgb, black 20%, var(--tw-color-warning) 80%);
     --color-placeholder: #6c757d;
 
     /* Override breakpoints with the values from bootstrap, to keep sizing until fully migrated */
@@ -59,6 +54,7 @@
     --breakpoint-2xl: 1400px;
 }
 
+/* Deprecated. TODO Remove with bootstrap support */
 @layer base {
     html:not([data-theme='dark']) {
         --primary-color: var(--tw-color-lm-primary);
@@ -67,7 +63,7 @@
         --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);
+        --brand-color: var(--tw-color-lm-main);
         --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);
@@ -121,7 +117,10 @@
         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;
+        @apply
+            tw:focus-visible:outline-3 tw:focus-visible:outline-offset-3
+            tw:focus-visible:outline-lm-brand/50 tw:dark:focus-visible:outline-dm-brand/50
+            tw:focus-visible:z-1;
     }
 
     h1 {
@@ -161,7 +160,7 @@
 }
 
 @utility focus-ring {
-    @apply tw:focus-ring-base tw:focus-visible:ring-brand/50;
+    @apply tw:focus-ring-base tw:focus-visible:ring-lm-brand/50 tw:dark:focus-visible:ring-dm-brand/50;
 }
 
 @utility focus-ring-danger {

package/dist/use-toggle-C1uZwbSD.js

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

package/package.json

@@ -38,8 +38,11 @@
     "clsx": "^2.1.1"
   },
   "peerDependencies": {
-    "@fortawesome/fontawesome-free": "^6.4.2",
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/fontawesome-common-types": "^6.7.2",
+    "@fortawesome/fontawesome-free": "^6.7.2",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "react": "^18.3 || ^19.0",
     "react-dom": "^18.3 || ^19.0",
@@ -55,19 +58,19 @@
   "devDependencies": {
     "@shlinkio/eslint-config-js-coding-standard": "~3.5.0",
     "@stylistic/eslint-plugin": "^4.2.0",
-    "@tailwindcss/vite": "^4.1.4",
+    "@tailwindcss/vite": "^4.1.5",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@total-typescript/shoehorn": "^0.1.2",
     "@types/react": "^19.1.2",
-    "@types/react-dom": "^19.1.2",
+    "@types/react-dom": "^19.1.3",
     "@vitejs/plugin-react": "^4.4.1",
     "@vitest/browser": "^3.1.2",
     "@vitest/coverage-v8": "^3.1.2",
     "axe-core": "^4.10.3",
     "bootstrap": "5.2.3",
-    "eslint": "^9.25.1",
+    "eslint": "^9.26.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
@@ -78,8 +81,8 @@
     "playwright": "^1.52.0",
     "sass": "^1.87.0",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.31.0",
-    "vite": "^6.3.3",
+    "typescript-eslint": "^8.31.1",
+    "vite": "^6.3.4",
     "vite-plugin-dts": "^4.5.3",
     "vitest": "^3.0.2"
   },
@@ -89,5 +92,5 @@
     "not ie <= 11",
     "not op_mini all"
   ],
-  "version": "0.8.13"
+  "version": "0.9.0"
 }

package/dist/use-toggle-PWLikLl6.js

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