@entry-ui/qwik 0.5.0 → 0.7.0

package/lib/components/collapsible/parts/collapsible-panel/collapsible-panel.qwik.mjs

@@ -0,0 +1,192 @@
+import { jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, useSignal, useComputed$, $, useTask$, isBrowser, isDev, sync$, Slot } from "@qwik.dev/core";
+import { getComputedStyle } from "@entry-ui/utilities/get-computed-style";
+import { getHiddenElementHeight } from "@entry-ui/utilities/get-hidden-element-height";
+import { addEventListenerOnce } from "@entry-ui/utilities/add-event-listener-once";
+import { useLifecycle } from "../../../../hooks/use-lifecycle/use-lifecycle.qwik.mjs";
+import { mergeStyles } from "../../../../utilities/merge-styles/merge-styles.qwik.mjs";
+import { mergeRefs } from "../../../../utilities/merge-refs/merge-refs.qwik.mjs";
+import { warn } from "../../../../_internal/utilities/warn/warn.qwik.mjs";
+import { Primitive } from "../../../../_internal/components/primitive/primitive.qwik.mjs";
+import { useCollapsibleRootContext } from "../../contexts/collapsible-root-context/collapsible-root-context.qwik.mjs";
+const CollapsiblePanel = component$((props) => {
+  const { as = "div", ref: _ref, id, hiddenUntilFound: _hiddenUntilFound = false, onOpenChangeComplete$, onBeforematch$, style, ...others } = props;
+  const { open, setOpen$, disabled, panelId, triggerId } = useCollapsibleRootContext();
+  const ref = useSignal(void 0);
+  const hidden = useSignal(!open.value);
+  const state = useSignal(open.value ? "open" : "closed");
+  const height = useSignal(open.value ? "auto" : _hiddenUntilFound ? disabled.value ? "0px" : "none" : "0px");
+  const isBeforeMatch = useSignal(false);
+  const preventInitialAnimation = useSignal(true);
+  const hiddenUntilFound = useComputed$(() => disabled.value ? false : _hiddenUntilFound);
+  const mergedStyles = useComputed$(() => mergeStyles([
+    {
+      display: hidden.value ? hiddenUntilFound.value ? void 0 : "none !important" : void 0,
+      transitionDuration: preventInitialAnimation.value ? "0s" : void 0,
+      animationDuration: preventInitialAnimation.value ? "0s" : void 0,
+      "--entry-ui-qwik-collapsible-panel-height": height.value
+    },
+    style
+  ]));
+  useLifecycle({
+    element: ref,
+    onMount$: $(() => panelId.set$(id)),
+    onUnmount$: $(() => panelId.delete$())
+  });
+  useTask$(({ track }) => {
+    const isHiddenUntilFound = track(() => hiddenUntilFound.value);
+    const panelRef = ref.value;
+    if (isBrowser && panelRef) {
+      const panelHeight = open.value ? "auto" : isHiddenUntilFound ? "none" : "0px";
+      height.value = panelHeight;
+      panelRef.style.setProperty("--entry-ui-qwik-collapsible-panel-height", panelHeight);
+    }
+  });
+  useTask$(({ track, cleanup }) => {
+    const isOpen = track(() => open.value);
+    const panelRef = ref.value;
+    if (isBrowser && panelRef) {
+      if (preventInitialAnimation.value && !isBeforeMatch.value) {
+        preventInitialAnimation.value = false;
+        panelRef.style.removeProperty("transition-duration");
+        panelRef.style.removeProperty("animation-duration");
+      }
+      if (isOpen) {
+        hidden.value = false;
+        panelRef.removeAttribute("hidden");
+        if (hiddenUntilFound.value) {
+          isBeforeMatch.value = false;
+        } else {
+          panelRef.style.removeProperty("display");
+        }
+        state.value = "open";
+        panelRef.setAttribute("data-state", "open");
+        const { animationDuration: animationDuration2, transitionDuration: transitionDuration2 } = getComputedStyle(panelRef);
+        const panelHeight = getHiddenElementHeight(panelRef);
+        if (animationDuration2 === "0s" && transitionDuration2 !== "0s") {
+          if (height.value === "none") {
+            height.value = "0px";
+            panelRef.style.setProperty("--entry-ui-qwik-collapsible-panel-height", "0px");
+            setTimeout(() => {
+              height.value = `${panelHeight}px`;
+              panelRef.style.setProperty("--entry-ui-qwik-collapsible-panel-height", `${panelHeight}px`);
+            }, 0);
+          } else {
+            height.value = `${panelHeight}px`;
+            panelRef.style.setProperty("--entry-ui-qwik-collapsible-panel-height", `${panelHeight}px`);
+          }
+        } else {
+          height.value = `${panelHeight}px`;
+          panelRef.style.setProperty("--entry-ui-qwik-collapsible-panel-height", `${panelHeight}px`);
+        }
+      } else {
+        state.value = "closed";
+        panelRef.setAttribute("data-state", "closed");
+        const { animationDuration: animationDuration2, transitionDuration: transitionDuration2 } = getComputedStyle(panelRef);
+        const panelHeight = getHiddenElementHeight(panelRef);
+        if (animationDuration2 === "0s" && transitionDuration2 !== "0s") {
+          if (height.value === "auto") {
+            height.value = `${panelHeight}px`;
+            panelRef.style.setProperty("--entry-ui-qwik-collapsible-panel-height", `${panelHeight}px`);
+            setTimeout(() => {
+              height.value = "0px";
+              panelRef.style.setProperty("--entry-ui-qwik-collapsible-panel-height", "0px");
+            }, 0);
+          } else {
+            height.value = "0px";
+            panelRef.style.setProperty("--entry-ui-qwik-collapsible-panel-height", "0px");
+          }
+        } else {
+          height.value = `${panelHeight}px`;
+          panelRef.style.setProperty("--entry-ui-qwik-collapsible-panel-height", `${panelHeight}px`);
+        }
+      }
+      const applyFinalState = () => {
+        if (isOpen) {
+          height.value = "auto";
+          panelRef.style.setProperty("--entry-ui-qwik-collapsible-panel-height", "auto");
+        } else {
+          hidden.value = true;
+          if (hiddenUntilFound.value) {
+            height.value = "none";
+            panelRef.style.setProperty("--entry-ui-qwik-collapsible-panel-height", "none");
+          } else {
+            height.value = "0px";
+            panelRef.style.setProperty("--entry-ui-qwik-collapsible-panel-height", "0px");
+          }
+        }
+        if (onOpenChangeComplete$) {
+          onOpenChangeComplete$(isOpen);
+        }
+      };
+      const { transitionDuration, animationDuration } = getComputedStyle(panelRef);
+      if (isDev && transitionDuration !== "0s" && animationDuration !== "0s") {
+        warn([
+          `Both CSS transitions and CSS animations are detected on 'Collapsible.Panel' component.`,
+          `Using both at the same time may cause unpredictable behavior.`,
+          `Please use only one animation method.`
+        ]);
+        applyFinalState();
+      } else if (transitionDuration !== "0s") {
+        const removeTransitionEndListener = addEventListenerOnce({
+          target: panelRef,
+          type: "transitionend",
+          listener: applyFinalState
+        });
+        cleanup(() => {
+          removeTransitionEndListener();
+        });
+      } else if (animationDuration !== "0s") {
+        const removeAnimationEndListener = addEventListenerOnce({
+          target: panelRef,
+          type: "animationend",
+          listener: applyFinalState
+        });
+        cleanup(() => {
+          removeAnimationEndListener();
+        });
+      } else {
+        applyFinalState();
+      }
+    }
+  });
+  const handleBeforeMatchSync$ = sync$((event) => {
+    const entryUIQwikEvent = event;
+    if (!entryUIQwikEvent.entryUIQwikHandlerPrevented) {
+      event.preventDefault();
+    }
+  });
+  const handleBeforeMatch$ = $((event) => {
+    const entryUIQwikEvent = event;
+    if (!entryUIQwikEvent.entryUIQwikHandlerPrevented) {
+      isBeforeMatch.value = true;
+      preventInitialAnimation.value = true;
+      setOpen$(true);
+    }
+  });
+  return /* @__PURE__ */ jsx(Primitive.div, {
+    as,
+    ref: mergeRefs([
+      _ref,
+      ref
+    ]),
+    id: panelId.id.value,
+    role: triggerId.id.value ? "group" : void 0,
+    hidden: hidden.value ? hiddenUntilFound.value ? "until-found" : "hidden" : void 0,
+    "aria-labelledby": triggerId.id.value,
+    "data-entry-ui-qwik-collapsible-panel": "",
+    "data-state": state.value,
+    "data-disabled": disabled.value ? "" : void 0,
+    onBeforematch$: [
+      onBeforematch$,
+      handleBeforeMatchSync$,
+      handleBeforeMatch$
+    ],
+    style: mergedStyles.value,
+    ...others,
+    children: /* @__PURE__ */ jsx(Slot, {})
+  });
+});
+export {
+  CollapsiblePanel
+};

package/lib/components/collapsible/parts/collapsible-panel/collapsible-panel.types.d.ts

@@ -0,0 +1,31 @@
+import { PropsOf, Component, QRL } from '@qwik.dev/core';
+/**
+ * Props for the `Collapsible.Panel` component.
+ * Extends the standard HTML attributes for a `<div>` element.
+ */
+export interface CollapsiblePanelProps extends PropsOf<'div'> {
+    /**
+     * The element or component this component should render as.
+     *
+     * @see {@link https://github.com/ZAHON/entry-ui/tree/main/packages/qwik/docs/guides/composition.md Composition} guide for more details.
+     *
+     * @default "div"
+     */
+    as?: string | Component;
+    /**
+     * When `true`, the panel uses the `hidden="until-found"` attribute when closed.
+     * This allows the browser to search and reveal content within the panel
+     * even before it is manually opened.
+     *
+     * @default false
+     */
+    hiddenUntilFound?: boolean;
+    /**
+     * A `QRL` callback invoked once the panel's expansion or collapse has fully settled.
+     * If CSS transitions or animations are present, it triggers after they finish;
+     * otherwise, it executes immediately upon the state change.
+     *
+     * @default undefined
+     */
+    onOpenChangeComplete$?: QRL<(open: boolean) => void>;
+}

package/lib/components/collapsible/parts/collapsible-panel/index.d.ts

@@ -0,0 +1,2 @@
+export type { CollapsiblePanelProps } from './collapsible-panel.types';
+export { CollapsiblePanel } from './collapsible-panel';

package/lib/components/collapsible/parts/collapsible-root/collapsible-root.d.ts

@@ -0,0 +1,7 @@
+import type { CollapsibleRootProps } from './collapsible-root.types';
+/**
+ * Groups all parts of the collapsible.
+ *
+ * Renders a `<div>` element.
+ */
+export declare const CollapsibleRoot: import("@qwik.dev/core").Component<CollapsibleRootProps>;

package/lib/components/collapsible/parts/collapsible-root/collapsible-root.qwik.mjs

@@ -0,0 +1,56 @@
+import { jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, useComputed$, useContextProvider, Slot } from "@qwik.dev/core";
+import { useControllable } from "../../../../hooks/use-controllable/use-controllable.qwik.mjs";
+import { useIdManager } from "../../../../_internal/hooks/use-id-manager/use-id-manager.qwik.mjs";
+import { mergeStyles } from "../../../../utilities/merge-styles/merge-styles.qwik.mjs";
+import { Primitive } from "../../../../_internal/components/primitive/primitive.qwik.mjs";
+import { CollapsibleRootContext } from "../../contexts/collapsible-root-context/collapsible-root-context.qwik.mjs";
+const CollapsibleRoot = component$((props) => {
+  const { as = "div", defaultOpen, open: _open, onOpenChange$, disabled: _disabled = false, style, ...others } = props;
+  const { state: open, setState$: setOpen$ } = useControllable({
+    defaultValue: defaultOpen ?? false,
+    controlledSignal: _open,
+    onChange$: onOpenChange$
+  });
+  const disabled = useComputed$(() => _disabled);
+  const triggerId = useIdManager({
+    prefix: "entry-ui-qwik-collapsible-trigger-"
+  });
+  const panelId = useIdManager({
+    prefix: "entry-ui-qwik-collapsible-panel-"
+  });
+  useContextProvider(CollapsibleRootContext, {
+    open,
+    setOpen$,
+    disabled,
+    triggerId,
+    panelId
+  });
+  return /* @__PURE__ */ jsx(Primitive.div, {
+    as,
+    "data-entry-ui-qwik-collapsible-root": "",
+    "data-state": open.value ? "open" : "closed",
+    "data-disabled": disabled.value ? "" : void 0,
+    style: mergeStyles([
+      {
+        // Performance optimization
+        // The `contain: layout style;` CSS property is used here to improve rendering performance.
+        // `contain: layout;` tells the browser that the internal layout of this component
+        // is self-contained and does not affect the layout of elements outside of it. This prevents
+        // costly re-calculations of the entire page layout when the collapsible panel expands or collapses,
+        // which is especially beneficial during animations.
+        // `contain: style;` ensures that CSS properties that can affect the rest of the page,
+        // like counters, are isolated to this element.
+        // Together, these properties create a performance "bubble," allowing the browser to optimize
+        // rendering by treating the collapsible component as an independent unit.
+        contain: "layout style"
+      },
+      style
+    ]),
+    ...others,
+    children: /* @__PURE__ */ jsx(Slot, {})
+  });
+});
+export {
+  CollapsibleRoot
+};

package/lib/components/collapsible/parts/collapsible-root/collapsible-root.types.d.ts

@@ -0,0 +1,41 @@
+import { PropsOf, Component, Signal, QRL } from '@qwik.dev/core';
+/**
+ * Props for the `Collapsible.Root` component.
+ * Extends the standard HTML attributes for a `<div>` element.
+ */
+export interface CollapsibleRootProps extends PropsOf<'div'> {
+    /**
+     * The element or component this component should render as.
+     *
+     * @see {@link https://github.com/ZAHON/entry-ui/tree/main/packages/qwik/docs/guides/composition.md Composition} guide for more details.
+     *
+     * @default "div"
+     */
+    as?: string | Component;
+    /**
+     * The open state of the collapsible when it is initially rendered.
+     * Use when you do not need to control its open state.
+     *
+     * @default undefined
+     */
+    defaultOpen?: boolean;
+    /**
+     * The controlled open state of the collapsible.
+     * Must be used in conjunction with `onOpenChange$`.
+     *
+     * @default undefined
+     */
+    open?: Signal<boolean>;
+    /**
+     * A `QRL` callback function that is called when the open state of the collapsible changes.
+     *
+     * @default undefined
+     */
+    onOpenChange$?: QRL<(open: boolean) => void>;
+    /**
+     * When `true`, prevents the user from interacting with the collapsible.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+}

package/lib/components/collapsible/parts/collapsible-root/index.d.ts

@@ -0,0 +1,2 @@
+export type { CollapsibleRootProps } from './collapsible-root.types';
+export { CollapsibleRoot } from './collapsible-root';

package/lib/components/collapsible/parts/collapsible-trigger/collapsible-trigger.d.ts

@@ -0,0 +1,7 @@
+import type { CollapsibleTriggerProps } from './collapsible-trigger.types';
+/**
+ * A button that opens and closes the collapsible panel.
+ *
+ * Renders a `<button>` element.
+ */
+export declare const CollapsibleTrigger: import("@qwik.dev/core").Component<CollapsibleTriggerProps>;

package/lib/components/collapsible/parts/collapsible-trigger/collapsible-trigger.qwik.mjs

@@ -0,0 +1,52 @@
+import { jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, useSignal, useComputed$, $, useContextProvider, Slot } from "@qwik.dev/core";
+import { useLifecycle } from "../../../../hooks/use-lifecycle/use-lifecycle.qwik.mjs";
+import { mergeRefs } from "../../../../utilities/merge-refs/merge-refs.qwik.mjs";
+import { Primitive } from "../../../../_internal/components/primitive/primitive.qwik.mjs";
+import { useCollapsibleRootContext } from "../../contexts/collapsible-root-context/collapsible-root-context.qwik.mjs";
+import { CollapsibleTriggerContext } from "../../contexts/collapsible-trigger-context/collapsible-trigger-context.qwik.mjs";
+const CollapsibleTrigger = component$((props) => {
+  const { as = "button", ref: _ref, id, disabled: _disabled, onClick$, ...others } = props;
+  const { open, setOpen$, disabled: rootDisabled, triggerId, panelId } = useCollapsibleRootContext();
+  const ref = useSignal(void 0);
+  const disabled = useComputed$(() => _disabled ?? rootDisabled.value);
+  useLifecycle({
+    element: ref,
+    onMount$: $(() => triggerId.set$(id)),
+    onUnmount$: $(() => triggerId.delete$())
+  });
+  const handleClick$ = $((event) => {
+    const entryUIQwikEvent = event;
+    if (!entryUIQwikEvent.entryUIQwikHandlerPrevented && !disabled.value) {
+      setOpen$(!open.value);
+    }
+  });
+  useContextProvider(CollapsibleTriggerContext, {
+    disabled
+  });
+  return /* @__PURE__ */ jsx(Primitive.button, {
+    as,
+    ref: mergeRefs([
+      _ref,
+      ref
+    ]),
+    type: "button",
+    id: triggerId.id.value,
+    disabled: disabled.value,
+    "aria-controls": panelId.id.value && open.value ? panelId.id.value : void 0,
+    "aria-expanded": panelId.id.value ? open.value : void 0,
+    "data-entry-ui-qwik-collapsible-trigger": "",
+    "data-state": open.value ? "open" : "closed",
+    // Present when the entire collapsible component is in a disabled state.
+    "data-disabled": rootDisabled.value ? "" : void 0,
+    onClick$: [
+      onClick$,
+      handleClick$
+    ],
+    ...others,
+    children: /* @__PURE__ */ jsx(Slot, {})
+  });
+});
+export {
+  CollapsibleTrigger
+};

package/lib/components/collapsible/parts/collapsible-trigger/collapsible-trigger.types.d.ts

@@ -0,0 +1,23 @@
+import { PropsOf, Component } from '@qwik.dev/core';
+/**
+ * Props for the `Collapsible.Trigger` component.
+ * Extends the standard HTML attributes for a `<button>` element.
+ */
+export interface CollapsibleTriggerProps extends PropsOf<'button'> {
+    /**
+     * The element or component this component should render as.
+     *
+     * @see {@link https://github.com/ZAHON/entry-ui/tree/main/packages/qwik/docs/guides/composition.md Composition} guide for more details.
+     *
+     * @default "button"
+     */
+    as?: string | Component;
+    /**
+     * When `true`, prevents the user from interacting with the trigger.
+     * If left `undefined`, this state will be inherited from the `disabled`
+     * prop of the `Collapsible.Root` component.
+     *
+     * @default undefined
+     */
+    disabled?: boolean;
+}

package/lib/components/collapsible/parts/collapsible-trigger/index.d.ts

@@ -0,0 +1,2 @@
+export type { CollapsibleTriggerProps } from './collapsible-trigger.types';
+export { CollapsibleTrigger } from './collapsible-trigger';

package/lib/components/collapsible/parts/index.d.ts

@@ -0,0 +1,8 @@
+export type { CollapsibleRootProps as RootProps } from './collapsible-root';
+export type { CollapsibleTriggerProps as TriggerProps } from './collapsible-trigger';
+export type { CollapsiblePanelProps as PanelProps } from './collapsible-panel';
+export type { CollapsibleIndicatorProps as IndicatorProps } from './collapsible-indicator';
+export { CollapsibleRoot as Root } from './collapsible-root';
+export { CollapsibleTrigger as Trigger } from './collapsible-trigger';
+export { CollapsiblePanel as Panel } from './collapsible-panel';
+export { CollapsibleIndicator as Indicator } from './collapsible-indicator';

package/lib/components/collapsible/parts/index.qwik.mjs

@@ -0,0 +1,10 @@
+import { CollapsibleRoot } from "./collapsible-root/collapsible-root.qwik.mjs";
+import { CollapsibleTrigger } from "./collapsible-trigger/collapsible-trigger.qwik.mjs";
+import { CollapsiblePanel } from "./collapsible-panel/collapsible-panel.qwik.mjs";
+import { CollapsibleIndicator } from "./collapsible-indicator/collapsible-indicator.qwik.mjs";
+export {
+  CollapsibleIndicator as Indicator,
+  CollapsiblePanel as Panel,
+  CollapsibleRoot as Root,
+  CollapsibleTrigger as Trigger
+};

package/lib/components/index.d.ts

@@ -1,3 +1,5 @@
+export * from './accordion';
 export * from './alert';
+export * from './collapsible';
 export * from './separator';
 export * from './toggle';

package/lib/hooks/index.d.ts

@@ -1,3 +1,5 @@
 export * from './use-boolean';
 export * from './use-controllable';
+export * from './use-counter';
 export * from './use-cycle';
+export * from './use-lifecycle';

package/lib/hooks/use-counter/index.d.ts

@@ -0,0 +1,2 @@
+export type { UseCounterParams, UseCounterReturnValue } from './use-counter.types';
+export { useCounter } from './use-counter';

package/lib/hooks/use-counter/index.qwik.mjs

@@ -0,0 +1,4 @@
+import { useCounter } from "./use-counter.qwik.mjs";
+export {
+  useCounter
+};

package/lib/hooks/use-counter/use-counter.d.ts

@@ -0,0 +1,15 @@
+import type { UseCounterParams, UseCounterReturnValue } from './use-counter.types';
+/**
+ * A hook that manages a numeric state with built-in clamping and validation logic.
+ *
+ * This hook provides a secure way to handle counter states by ensuring the value
+ * always remains within defined boundaries. It encapsulates a numeric signal and
+ * exposes it as a readonly signal, enforcing predictable state transitions through
+ * dedicated `QRL` functions.
+ *
+ * It features strict validation during development to ensure all parameters
+ * and operations result in finite numbers, preventing common pitfalls such as
+ * `NaN` or `Infinity` from polluting the state. It is ideal for quantity selectors,
+ * pagination, volume controls, or any UI element requiring bounded numeric input.
+ */
+export declare const useCounter: (params?: UseCounterParams) => UseCounterReturnValue;

package/lib/hooks/use-counter/use-counter.qwik.mjs

@@ -0,0 +1,113 @@
+import { useSignal, $ } from "@qwik.dev/core";
+import { isDev } from "@qwik.dev/core/build";
+import { isValidNumber } from "@entry-ui/utilities/is-valid-number";
+import { clamp } from "@entry-ui/utilities/clamp";
+import { fail } from "../../_internal/utilities/fail/fail.qwik.mjs";
+import { warn } from "../../_internal/utilities/warn/warn.qwik.mjs";
+const useCounter = (params = {}) => {
+  const { initialCount = 0, step = 1, min = -Number.MAX_VALUE, max = Number.MAX_VALUE } = params;
+  if (isDev) {
+    if (!isValidNumber(initialCount)) {
+      fail([
+        `Invalid 'initialCount' parameter in 'useCounter' hook.`,
+        `Expected a finite number, but received: ${initialCount}`
+      ]);
+    }
+    if (!isValidNumber(step)) {
+      fail([
+        `Invalid 'step' parameter in 'useCounter' hook.`,
+        `Expected a finite number, but received: ${step}`
+      ]);
+    }
+    if (!isValidNumber(min)) {
+      fail([
+        `Invalid 'min' parameter in 'useCounter' hook.`,
+        `Expected a finite number, but received: ${min}`
+      ]);
+    }
+    if (!isValidNumber(max)) {
+      fail([
+        `Invalid 'max' parameter in 'useCounter' hook.`,
+        `Expected a finite number, but received: ${max}`
+      ]);
+    }
+    if (min > max) {
+      fail([
+        `Invalid range for 'useCounter' hook.`,
+        `The 'min' parameter (${min}) must be less than or equal to the 'max' parameter (${max}).`
+      ]);
+    }
+  }
+  const count = useSignal(clamp({
+    value: initialCount,
+    min,
+    max
+  }));
+  const increment$ = $(() => {
+    const nextCount = count.value + step;
+    if (!isValidNumber(nextCount)) {
+      if (isDev) {
+        warn([
+          `The 'increment$' QRL function from the 'useCounter' hook resulted in an invalid, non-finite number: ${nextCount}.`,
+          `The 'count' was not updated to prevent application instability.`
+        ]);
+      }
+      return;
+    }
+    count.value = clamp({
+      value: nextCount,
+      min,
+      max
+    });
+  });
+  const decrement$ = $(() => {
+    const nextCount = count.value - step;
+    if (!isValidNumber(nextCount)) {
+      if (isDev) {
+        warn([
+          `The 'decrement$' QRL function from the 'useCounter' hook resulted in an invalid, non-finite number: ${nextCount}.`,
+          `The 'count' was not updated to prevent application instability.`
+        ]);
+      }
+      return;
+    }
+    count.value = clamp({
+      value: nextCount,
+      min,
+      max
+    });
+  });
+  const set$ = $((value) => {
+    if (!isValidNumber(value)) {
+      if (isDev) {
+        warn([
+          `The 'set$' QRL function from the 'useCounter' hook was called with an invalid, non-finite number: ${value}.`,
+          `The 'count' was not updated to prevent application instability.`
+        ]);
+      }
+      return;
+    }
+    count.value = clamp({
+      value,
+      min,
+      max
+    });
+  });
+  const reset$ = $(() => {
+    count.value = clamp({
+      value: initialCount,
+      min,
+      max
+    });
+  });
+  return {
+    count,
+    increment$,
+    decrement$,
+    reset$,
+    set$
+  };
+};
+export {
+  useCounter
+};