@elmethis/qwik 0.0.23 → 0.0.25

package/lib/index.qwik.cjs

@@ -869,30 +869,29 @@ const ElmParallax = qwik.component$(({ images }) => {
     ]
   });
 });
-const toggle = "_toggle_1nxqa_1";
-const summary = "_summary_1nxqa_14";
-const content$2 = "_content_1nxqa_60";
-const footer = "_footer_1nxqa_80";
+const toggle = "_toggle_nwv84_1";
+const summary = "_summary_nwv84_14";
+const content$2 = "_content_nwv84_60";
+const footer = "_footer_nwv84_80";
 const styles$s = {
   toggle,
-  "toggle-closed": "_toggle-closed_1nxqa_7",
-  "toggle-open": "_toggle-open_1nxqa_10",
+  "toggle-closed": "_toggle-closed_nwv84_7",
+  "toggle-open": "_toggle-open_nwv84_10",
   summary,
-  "summary-open": "_summary-open_1nxqa_29",
-  "summary-closed": "_summary-closed_1nxqa_33",
-  "chevron-icon": "_chevron-icon_1nxqa_37",
-  "chevron-icon-open": "_chevron-icon-open_1nxqa_40",
-  "chevron-icon-closed": "_chevron-icon-closed_1nxqa_43",
-  "plus-icon": "_plus-icon_1nxqa_47",
-  "plus-icon-open": "_plus-icon-open_1nxqa_53",
-  "plus-icon-closed": "_plus-icon-closed_1nxqa_56",
+  "summary-open": "_summary-open_nwv84_29",
+  "summary-closed": "_summary-closed_nwv84_33",
+  "chevron-icon": "_chevron-icon_nwv84_37",
+  "chevron-icon-open": "_chevron-icon-open_nwv84_40",
+  "chevron-icon-closed": "_chevron-icon-closed_nwv84_43",
+  "plus-icon": "_plus-icon_nwv84_47",
+  "plus-icon-open": "_plus-icon-open_nwv84_53",
+  "plus-icon-closed": "_plus-icon-closed_nwv84_56",
   content: content$2,
-  "content-open": "_content-open_1nxqa_73",
-  "content-closed": "_content-closed_1nxqa_76",
+  "content-open": "_content-open_nwv84_73",
+  "content-closed": "_content-closed_nwv84_76",
   footer,
-  "footer-line": "_footer-line_1nxqa_99",
-  "footer-cross-icon": "_footer-cross-icon_1nxqa_106",
-  "footer-chevron-icon": "_footer-chevron-icon_1nxqa_109"
+  "footer-line": "_footer-line_nwv84_99",
+  "footer-cross-icon": "_footer-cross-icon_nwv84_105"
 };
 const ElmToggle = qwik.component$(({ summary: summary2 }) => {
   const isOpen = qwik.useSignal(false);
@@ -967,7 +966,6 @@ const ElmToggle = qwik.component$(({ summary: summary2 }) => {
         onClick$: toggle2,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", {
-            class: styles$s["footer-chevron-icon"],
             children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
               d: js.mdiChevronRight,
               color: "gray"
@@ -997,7 +995,9 @@ const ElmToggle = qwik.component$(({ summary: summary2 }) => {
             class: styles$s["footer-line"]
           }),
           /* @__PURE__ */ jsxRuntime.jsx("span", {
-            class: styles$s["footer-chevron-icon"],
+            style: {
+              rotate: "180deg"
+            },
             children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
               d: js.mdiChevronRight,
               color: "gray"
@@ -2723,7 +2723,7 @@ const styles$6 = {
 };
 const useInView = (props) => {
   const ref = qwik.useSignal();
-  const isVisible = qwik.useSignal(false);
+  const isVisible = qwik.useSignal(props?.defaultValue ?? false);
   qwik.useVisibleTask$(() => {
     if (!ref.value) return;
     const observer = new IntersectionObserver(([entry]) => {
@@ -3212,6 +3212,66 @@ const ElmMarkdown = qwik.component$(({ markdown }) => {
     children: elements
   });
 });
+const useDelayedSignal = (initialValue) => {
+  const signal = qwik.useSignal(initialValue);
+  const delayedSignal = qwik.useSignal(initialValue);
+  const isSignalChanging = qwik.useSignal(false);
+  const dispatch = qwik.$((value, delay) => {
+    isSignalChanging.value = true;
+    signal.value = value;
+    if (delay === void 0 || delay <= 0) {
+      delayedSignal.value = value;
+      isSignalChanging.value = false;
+    } else {
+      const timerId = setTimeout(() => {
+        delayedSignal.value = value;
+        isSignalChanging.value = false;
+        clearTimeout(timerId);
+      }, delay);
+    }
+  });
+  return {
+    signal,
+    delayedSignal,
+    dispatch
+  };
+};
+const useLocalStorage = (key, initialValue) => {
+  const state = qwik.useSignal(initialValue);
+  qwik.useVisibleTask$(() => {
+    try {
+      const item = localStorage.getItem(key);
+      if (item !== null) {
+        state.value = JSON.parse(item);
+      }
+    } catch (e) {
+      console.warn(`useLocalStorage: failed to read "${key}"`, e);
+    }
+  }, {
+    strategy: "document-ready"
+  });
+  const set = qwik.$((value) => {
+    try {
+      state.value = value;
+      localStorage.setItem(key, JSON.stringify(value));
+    } catch (e) {
+      console.warn(`useLocalStorage: failed to write "${key}"`, e);
+    }
+  });
+  const remove = qwik.$(() => {
+    try {
+      state.value = initialValue;
+      localStorage.removeItem(key);
+    } catch (e) {
+      console.warn(`useLocalStorage: failed to remove "${key}"`, e);
+    }
+  });
+  return {
+    state,
+    set,
+    remove
+  };
+};
 exports.ElmBlockFallback = ElmBlockFallback;
 exports.ElmBlockImage = ElmBlockImage;
 exports.ElmBlockQuote = ElmBlockQuote;
@@ -3250,3 +3310,7 @@ exports.ElmTextField = ElmTextField;
 exports.ElmToggle = ElmToggle;
 exports.ElmToggleTheme = ElmToggleTheme;
 exports.ElmValidation = ElmValidation;
+exports.useDelayedSignal = useDelayedSignal;
+exports.useElmethisTheme = useElmethisTheme;
+exports.useInView = useInView;
+exports.useLocalStorage = useLocalStorage;

package/lib/index.qwik.mjs

@@ -867,30 +867,29 @@ const ElmParallax = component$(({ images }) => {
     ]
   });
 });
-const toggle = "_toggle_1nxqa_1";
-const summary = "_summary_1nxqa_14";
-const content$2 = "_content_1nxqa_60";
-const footer = "_footer_1nxqa_80";
+const toggle = "_toggle_nwv84_1";
+const summary = "_summary_nwv84_14";
+const content$2 = "_content_nwv84_60";
+const footer = "_footer_nwv84_80";
 const styles$s = {
   toggle,
-  "toggle-closed": "_toggle-closed_1nxqa_7",
-  "toggle-open": "_toggle-open_1nxqa_10",
+  "toggle-closed": "_toggle-closed_nwv84_7",
+  "toggle-open": "_toggle-open_nwv84_10",
   summary,
-  "summary-open": "_summary-open_1nxqa_29",
-  "summary-closed": "_summary-closed_1nxqa_33",
-  "chevron-icon": "_chevron-icon_1nxqa_37",
-  "chevron-icon-open": "_chevron-icon-open_1nxqa_40",
-  "chevron-icon-closed": "_chevron-icon-closed_1nxqa_43",
-  "plus-icon": "_plus-icon_1nxqa_47",
-  "plus-icon-open": "_plus-icon-open_1nxqa_53",
-  "plus-icon-closed": "_plus-icon-closed_1nxqa_56",
+  "summary-open": "_summary-open_nwv84_29",
+  "summary-closed": "_summary-closed_nwv84_33",
+  "chevron-icon": "_chevron-icon_nwv84_37",
+  "chevron-icon-open": "_chevron-icon-open_nwv84_40",
+  "chevron-icon-closed": "_chevron-icon-closed_nwv84_43",
+  "plus-icon": "_plus-icon_nwv84_47",
+  "plus-icon-open": "_plus-icon-open_nwv84_53",
+  "plus-icon-closed": "_plus-icon-closed_nwv84_56",
   content: content$2,
-  "content-open": "_content-open_1nxqa_73",
-  "content-closed": "_content-closed_1nxqa_76",
+  "content-open": "_content-open_nwv84_73",
+  "content-closed": "_content-closed_nwv84_76",
   footer,
-  "footer-line": "_footer-line_1nxqa_99",
-  "footer-cross-icon": "_footer-cross-icon_1nxqa_106",
-  "footer-chevron-icon": "_footer-chevron-icon_1nxqa_109"
+  "footer-line": "_footer-line_nwv84_99",
+  "footer-cross-icon": "_footer-cross-icon_nwv84_105"
 };
 const ElmToggle = component$(({ summary: summary2 }) => {
   const isOpen = useSignal(false);
@@ -965,7 +964,6 @@ const ElmToggle = component$(({ summary: summary2 }) => {
         onClick$: toggle2,
         children: [
           /* @__PURE__ */ jsx("span", {
-            class: styles$s["footer-chevron-icon"],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
               d: mdiChevronRight,
               color: "gray"
@@ -995,7 +993,9 @@ const ElmToggle = component$(({ summary: summary2 }) => {
             class: styles$s["footer-line"]
           }),
           /* @__PURE__ */ jsx("span", {
-            class: styles$s["footer-chevron-icon"],
+            style: {
+              rotate: "180deg"
+            },
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
               d: mdiChevronRight,
               color: "gray"
@@ -2721,7 +2721,7 @@ const styles$6 = {
 };
 const useInView = (props) => {
   const ref = useSignal();
-  const isVisible = useSignal(false);
+  const isVisible = useSignal(props?.defaultValue ?? false);
   useVisibleTask$(() => {
     if (!ref.value) return;
     const observer = new IntersectionObserver(([entry]) => {
@@ -3210,6 +3210,66 @@ const ElmMarkdown = component$(({ markdown }) => {
     children: elements
   });
 });
+const useDelayedSignal = (initialValue) => {
+  const signal = useSignal(initialValue);
+  const delayedSignal = useSignal(initialValue);
+  const isSignalChanging = useSignal(false);
+  const dispatch = $((value, delay) => {
+    isSignalChanging.value = true;
+    signal.value = value;
+    if (delay === void 0 || delay <= 0) {
+      delayedSignal.value = value;
+      isSignalChanging.value = false;
+    } else {
+      const timerId = setTimeout(() => {
+        delayedSignal.value = value;
+        isSignalChanging.value = false;
+        clearTimeout(timerId);
+      }, delay);
+    }
+  });
+  return {
+    signal,
+    delayedSignal,
+    dispatch
+  };
+};
+const useLocalStorage = (key, initialValue) => {
+  const state = useSignal(initialValue);
+  useVisibleTask$(() => {
+    try {
+      const item = localStorage.getItem(key);
+      if (item !== null) {
+        state.value = JSON.parse(item);
+      }
+    } catch (e) {
+      console.warn(`useLocalStorage: failed to read "${key}"`, e);
+    }
+  }, {
+    strategy: "document-ready"
+  });
+  const set = $((value) => {
+    try {
+      state.value = value;
+      localStorage.setItem(key, JSON.stringify(value));
+    } catch (e) {
+      console.warn(`useLocalStorage: failed to write "${key}"`, e);
+    }
+  });
+  const remove = $(() => {
+    try {
+      state.value = initialValue;
+      localStorage.removeItem(key);
+    } catch (e) {
+      console.warn(`useLocalStorage: failed to remove "${key}"`, e);
+    }
+  });
+  return {
+    state,
+    set,
+    remove
+  };
+};
 export {
   ElmBlockFallback,
   ElmBlockImage,
@@ -3248,5 +3308,9 @@ export {
   ElmTextField,
   ElmToggle,
   ElmToggleTheme,
-  ElmValidation
+  ElmValidation,
+  useDelayedSignal,
+  useElmethisTheme,
+  useInView,
+  useLocalStorage
 };

package/lib/style.css

@@ -240,20 +240,20 @@
 }
 [data-theme=dark] ._parallax_1kb0k_1 {
   opacity: 0.1;
-}._toggle_1nxqa_1 {
+}._toggle_nwv84_1 {
   margin: 0;
   display: grid;
   transition: grid 200ms;
   overflow: hidden;
 }
-._toggle_1nxqa_1._toggle-closed_1nxqa_7 {
+._toggle_nwv84_1._toggle-closed_nwv84_7 {
   grid-template-rows: 3.5rem 0fr 0rem;
 }
-._toggle_1nxqa_1._toggle-open_1nxqa_10 {
+._toggle_nwv84_1._toggle-open_nwv84_10 {
   grid-template-rows: 3.5rem 1fr 3rem;
 }
 
-._summary_1nxqa_14 {
+._summary_nwv84_14 {
   box-sizing: border-box;
   padding-inline: 1rem;
   display: grid;
@@ -264,42 +264,42 @@
   border: 1px solid rgba(0, 0, 0, 0.125);
   background-color: rgba(62, 67, 75, 0.05);
 }
-[data-theme=dark] ._summary_1nxqa_14 {
+[data-theme=dark] ._summary_nwv84_14 {
   border: 1px solid rgba(255, 255, 255, 0.125);
   background-color: rgba(190, 194, 202, 0.1);
 }
-._summary_1nxqa_14._summary-open_1nxqa_29 {
+._summary_nwv84_14._summary-open_nwv84_29 {
   border-radius: 0.25rem 0.25rem 0 0;
   border-bottom-color: transparent;
 }
-._summary_1nxqa_14._summary-closed_1nxqa_33 {
+._summary_nwv84_14._summary-closed_nwv84_33 {
   border-radius: 0.25rem;
 }
 
-._chevron-icon_1nxqa_37 {
+._chevron-icon_nwv84_37 {
   transition: transform 200ms;
 }
-._chevron-icon_1nxqa_37._chevron-icon-open_1nxqa_40 {
+._chevron-icon_nwv84_37._chevron-icon-open_nwv84_40 {
   transform: rotate(90deg);
 }
-._chevron-icon_1nxqa_37._chevron-icon-closed_1nxqa_43 {
+._chevron-icon_nwv84_37._chevron-icon-closed_nwv84_43 {
   transform: rotate(0deg);
 }
 
-._plus-icon_1nxqa_47 {
+._plus-icon_nwv84_47 {
   height: 1rem;
   width: 1rem;
   transform-origin: center;
   transition: transform 200ms;
 }
-._plus-icon_1nxqa_47._plus-icon-open_1nxqa_53 {
+._plus-icon_nwv84_47._plus-icon-open_nwv84_53 {
   transform: rotate(135deg);
 }
-._plus-icon_1nxqa_47._plus-icon-closed_1nxqa_56 {
+._plus-icon_nwv84_47._plus-icon-closed_nwv84_56 {
   transform: rotate(0deg);
 }
 
-._content_1nxqa_60 {
+._content_nwv84_60 {
   box-sizing: border-box;
   padding: 1rem;
   overflow: hidden;
@@ -308,21 +308,21 @@
   border-radius: 0 0 0.25rem 0.25rem;
   background-color: rgba(62, 67, 75, 0.0125);
 }
-[data-theme=dark] ._content_1nxqa_60 {
+[data-theme=dark] ._content_nwv84_60 {
   border-color: rgba(255, 255, 255, 0.125);
   background-color: rgba(190, 194, 202, 0.025);
 }
-._content_1nxqa_60._content-open_1nxqa_73 {
+._content_nwv84_60._content-open_nwv84_73 {
   opacity: 1;
 }
-._content_1nxqa_60._content-closed_1nxqa_76 {
+._content_nwv84_60._content-closed_nwv84_76 {
   opacity: 0;
 }
 
-._footer_1nxqa_80 {
+._footer_nwv84_80 {
   box-sizing: border-box;
   margin: 0.25rem 0rem;
-  padding: 0.5rem;
+  padding: 0.5rem 0.25rem;
   color: #c56565;
   font-family: monospace;
   display: flex;
@@ -334,22 +334,18 @@
   border-radius: 0.25rem;
   transition: opacity 200ms, background-color 200ms;
 }
-._footer_1nxqa_80:hover {
+._footer_nwv84_80:hover {
   opacity: 0.5;
   background-color: rgba(96, 104, 117, 0.1);
 }
-._footer_1nxqa_80._footer-line_1nxqa_99 {
+._footer_nwv84_80 ._footer-line_nwv84_99 {
   box-sizing: border-box;
-  margin: 0 0.25rem;
-  flex-grow: 1;
+  flex: 1;
   border: none;
-  border-bottom: solid 1px rgba(128, 128, 128, 0.3);
+  border-bottom: 1px solid rgba(128, 128, 128, 0.3);
 }
-._footer_1nxqa_80._footer-cross-icon_1nxqa_106 {
+._footer_nwv84_80 ._footer-cross-icon_nwv84_105 {
   transform: rotate(45deg);
-}
-._footer_1nxqa_80._footer-chevron-icon_1nxqa_109 {
-  transform: rotate(-90deg);
 }._block-fallback_rt986_1 {
   position: relative;
   display: flex;

package/lib-types/hooks/useLocalStorage.d.ts

@@ -0,0 +1,6 @@
+import { type QRL } from "@builder.io/qwik";
+export declare const useLocalStorage: <T>(key: string, initialValue: T) => {
+    state: import("@builder.io/qwik").Signal<T>;
+    set: QRL<(value: T) => void>;
+    remove: QRL<() => void>;
+};

package/lib-types/index.d.ts

@@ -36,3 +36,7 @@ export { ElmTableRow, type ElmTableRowProps, } from "./components/table/elm-tabl
 export { ElmTableCell, type ElmTableCellProps, } from "./components/table/elm-table-cell";
 export { ElmJarkup, type ElmJarkupProps } from "./components/others/elm-jarkup";
 export { ElmMarkdown, type ElmMarkdownProps, } from "./components/others/elm-markdown";
+export { useDelayedSignal } from "./hooks/useDelayedSignal";
+export { useElmethisTheme } from "./hooks/useElmethisTheme";
+export { useInView } from "./hooks/useInView";
+export { useLocalStorage } from "./hooks/useLocalStorage";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elmethis/qwik",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "publishConfig": {
     "access": "public"
   },
@@ -47,7 +47,7 @@
     "eslint-plugin-qwik": "1.19.1",
     "globals": "17.4.0",
     "jarkup-ts": "^0.8.0",
-    "np": "^8.0.4",
+    "np": "^11.0.2",
     "prettier": "3.6.2",
     "sass": "^1.97.3",
     "storybook": "8",