h2o-library 1.8.0 → 2.0.1

package/dist/{css/src → esm/components/src/toggle}/toggle.css

@@ -10,17 +10,24 @@
 .toggle-text {
   color: hsl(var(--foreground));
   max-width: 100%;
-  height: 24px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  line-height: 1.4;
+}
+
+.toggle-label-row {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
 }
 
 .toggle-label-content {
   display: flex;
   flex-direction: column;
   gap: 2px;
-  width: calc(100% - 56px);
+  min-width: 0;
+  flex: 1;
 }
 
 .toggle-description {
@@ -42,20 +49,66 @@
 
 .toggle-container {
   display: flex;
+  align-items: center;
   gap: 12px;
   width: 100%;
 }
 
+/* Size variants */
+
+.toggle--sm {
+  --toggle-width: 36px;
+  --toggle-height: 20px;
+  --toggle-thumb: 14px;
+  --toggle-offset: 3px;
+  --toggle-translate: 16px;
+}
+.toggle--sm .toggle-text {
+  font-size: 0.75rem;
+}
+.toggle--sm .toggle-description {
+  font-size: 0.75rem;
+}
+
+.toggle--md {
+  --toggle-width: 44px;
+  --toggle-height: 24px;
+  --toggle-thumb: 18px;
+  --toggle-offset: 3px;
+  --toggle-translate: 20px;
+}
+.toggle--md .toggle-text {
+  font-size: 0.875rem;
+}
+.toggle--md .toggle-description {
+  font-size: 0.8125rem;
+}
+
+.toggle--lg {
+  --toggle-width: 52px;
+  --toggle-height: 28px;
+  --toggle-thumb: 22px;
+  --toggle-offset: 3px;
+  --toggle-translate: 24px;
+}
+.toggle--lg .toggle-text {
+  font-size: 1rem;
+}
+.toggle--lg .toggle-description {
+  font-size: 0.875rem;
+}
+
 /* Toggle Switch */
 
 .toggle-switch {
   position: relative;
   display: inline-block;
-  width: 44px;
-  height: 24px;
+  flex-shrink: 0;
+  width: var(--toggle-width, 44px);
+  height: var(--toggle-height, 24px);
   background-color: hsl(var(--muted));
-  border-radius: 24px;
-  transition: all 0.2s;
+  border-radius: var(--toggle-height, 24px);
+  transition: background-color 0.2s;
 }
 
 .toggle-label:not(:has(input:disabled)):hover .toggle-switch {
@@ -65,12 +118,12 @@
 .toggle-switch::after {
   content: "";
   position: absolute;
-  top: 3px;
-  left: 3px;
-  width: 18px;
-  height: 18px;
+  top: var(--toggle-offset, 3px);
+  left: var(--toggle-offset, 3px);
+  width: var(--toggle-thumb, 18px);
+  height: var(--toggle-thumb, 18px);
   border-radius: 50%;
-  background-color: white;
+  background-color: hsl(var(--primary-foreground));
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   transition: transform 0.2s;
 }
@@ -86,7 +139,7 @@
 }
 
 .toggle-label input:checked + .toggle-switch::after {
-  transform: translateX(20px);
+  transform: translateX(var(--toggle-translate, 20px));
 }
 
 .toggle-label input:disabled + .toggle-switch {
@@ -139,3 +192,40 @@
 .toggle-label:has(input:disabled) .toggle-text {
   color: hsl(var(--muted-200));
 }
+
+.toggle-label:has(input:disabled) .toggle-description {
+  color: hsl(var(--muted));
+}
+
+/* Tooltip icon */
+
+.toggle-info-icon {
+  color: hsl(var(--muted-200));
+  flex-shrink: 0;
+}
+
+.toggle-info-icon:hover {
+  color: hsl(var(--primary));
+}
+
+/* Wrapper */
+
+.toggle-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+/* Note and error */
+
+.toggle-note {
+  font-size: 0.75rem;
+  color: hsl(var(--muted-200));
+  padding-left: 0.125rem;
+}
+
+.toggle-error {
+  font-size: 0.75rem;
+  color: hsl(var(--destructive));
+  padding-left: 0.125rem;
+}

package/dist/esm/components/src/toggle/toggle.d.ts

@@ -0,0 +1,35 @@
+import "./toggle.css";
+import React from "react";
+import type { TooltipPosition } from "../../../types";
+type BaseToggleProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+    label?: string;
+    description?: string;
+    containerClassName?: string;
+    size?: "sm" | "md" | "lg";
+    error?: string;
+    note?: string;
+    tooltip?: string;
+    tooltipPosition?: TooltipPosition;
+};
+type CardToggleProps = BaseToggleProps & {
+    isCard: true;
+    isDraggable?: boolean;
+};
+type InlineToggleProps = BaseToggleProps & {
+    isCard?: false;
+    isDraggable?: never;
+};
+/**
+ * Discriminated union: `isCard: true` enables card layout and optional `isDraggable`; otherwise inline switch.
+ * `size` is visual (`"sm"|"md"|"lg"`), not the HTML `size` attribute.
+ */
+type ToggleProps = CardToggleProps | InlineToggleProps;
+/**
+ * Switch UI backed by a checkbox input; supports inline, card, draggable card, and label tooltip.
+ *
+ * @param {ToggleProps} props - Union of card vs inline props; `ref` targets the `input`.
+ * @param {React.Ref<HTMLInputElement>} ref - Native checkbox ref.
+ * @returns {React.ReactElement} The toggle wrapper and `input` + visual thumb track.
+ */
+export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/esm/components/src/toggle/toggle.js

@@ -0,0 +1,2 @@
+import{__rest as e}from"../../../node_modules/tslib/tslib.es6.mjs.js";import{jsx as l,jsxs as a}from"react/jsx-runtime";import"./toggle.css";import o,{useId as s}from"react";import{Icon as t}from"../icon/icon.js";const i=o.forwardRef(((o,i)=>{var{label:r,description:c,containerClassName:n="",size:g="md",isCard:d,isDraggable:m,error:p,note:h,tooltip:N,tooltipPosition:b="top"}=o,f=e(o,["label","description","containerClassName","size","isCard","isDraggable","error","note","tooltip","tooltipPosition"]);const v=s(),w=N?l(t,{icon:"info",size:14,tooltip:N,className:"toggle-info-icon",tooltipPosition:b}):null;return a("div",d?{className:`toggle-wrapper ${n}`,children:[a("label",{htmlFor:v,className:`toggle-label toggle-card toggle--${g}`,children:[m&&l(t,{icon:"drag-handle",className:"toggle-drag-handle",size:20}),a("div",{className:"toggle-card-container",children:[r&&a("div",{className:"toggle-label-row",children:[l("span",{title:r,className:"toggle-text",children:r}),w]}),l("input",Object.assign({id:v,type:"checkbox",ref:i},f)),l("span",{className:"toggle-switch"})]})]}),h&&!p&&l("span",{className:"toggle-note",children:h}),p&&l("span",{className:"toggle-error",children:p})]}:{className:`toggle-wrapper ${n}`,children:[l("label",{htmlFor:v,className:`toggle-label toggle--${g}`,children:a("div",{className:"toggle-container",children:[l("input",Object.assign({id:v,type:"checkbox",ref:i},f)),l("span",{className:"toggle-switch"}),a("div",{className:"toggle-label-content",children:[r&&a("div",{className:"toggle-label-row",children:[l("span",{className:"toggle-text",children:r}),w]}),c&&l("span",{className:"toggle-description",children:c})]})]})}),h&&!p&&l("span",{className:"toggle-note",children:h}),p&&l("span",{className:"toggle-error",children:p})]})}));i.displayName="Toggle";export{i as Toggle};
+//# sourceMappingURL=toggle.js.map

package/dist/{css/src → esm/components/src/tooltip}/tooltip.css

@@ -8,7 +8,8 @@
   padding: 0.5rem 0.75rem;
   border-radius: 6px;
   font-size: 0.8125rem;
-  white-space: nowrap;
+  max-width: 220px;
+  word-wrap: break-word;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.15s ease;
@@ -18,19 +19,22 @@
 }
 
 /* Dark variant (default) */
+
 .tooltip-box--dark {
-  background-color: #1f2937;
-  color: #ffffff;
+  background-color: hsl(var(--tooltip-dark-bg));
+  color: hsl(var(--tooltip-dark-fg));
 }
 
 /* Light variant */
+
 .tooltip-box--light {
-  background-color: #ffffff;
-  color: #1f2937;
+  background-color: hsl(var(--card));
+  color: hsl(var(--foreground));
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
 }
 
 /* Arrow */
+
 .tooltip-box::after {
   content: "";
   position: absolute;
@@ -40,6 +44,7 @@
 }
 
 /* Show when visible (controlled by React) */
+
 .tooltip-box.tooltip-visible,
 .tooltip-box.tooltip-visible::after {
   opacity: 1;
@@ -47,11 +52,12 @@
 }
 
 /* Position: Top - Arrow at bottom */
+
 .tooltip-box--dark[data-position="top"]::after {
-  border-top-color: #1f2937;
+  border-top-color: hsl(var(--tooltip-dark-bg));
 }
 .tooltip-box--light[data-position="top"]::after {
-  border-top-color: #ffffff;
+  border-top-color: hsl(var(--card));
 }
 .tooltip-box[data-position="top"]::after {
   top: 100%;
@@ -60,11 +66,12 @@
 }
 
 /* Position: Bottom - Arrow at top */
+
 .tooltip-box--dark[data-position="bottom"]::after {
-  border-bottom-color: #1f2937;
+  border-bottom-color: hsl(var(--tooltip-dark-bg));
 }
 .tooltip-box--light[data-position="bottom"]::after {
-  border-bottom-color: #ffffff;
+  border-bottom-color: hsl(var(--card));
 }
 .tooltip-box[data-position="bottom"]::after {
   bottom: 100%;
@@ -73,11 +80,12 @@
 }
 
 /* Position: Left - Arrow at right */
+
 .tooltip-box--dark[data-position="left"]::after {
-  border-left-color: #1f2937;
+  border-left-color: hsl(var(--tooltip-dark-bg));
 }
 .tooltip-box--light[data-position="left"]::after {
-  border-left-color: #ffffff;
+  border-left-color: hsl(var(--card));
 }
 .tooltip-box[data-position="left"]::after {
   left: 100%;
@@ -86,11 +94,12 @@
 }
 
 /* Position: Right - Arrow at left */
+
 .tooltip-box--dark[data-position="right"]::after {
-  border-right-color: #1f2937;
+  border-right-color: hsl(var(--tooltip-dark-bg));
 }
 .tooltip-box--light[data-position="right"]::after {
-  border-right-color: #ffffff;
+  border-right-color: hsl(var(--card));
 }
 .tooltip-box[data-position="right"]::after {
   right: 100%;

package/dist/esm/components/src/tooltip/tooltip.d.ts

@@ -0,0 +1,38 @@
+import "./tooltip.css";
+import type React from "react";
+import type { TooltipPosition } from "../../../types";
+type BaseProps = {
+    position?: TooltipPosition;
+    className?: string;
+    contentClassName?: string;
+    children: React.ReactNode;
+    variant?: "dark" | "light";
+    delay?: number;
+    maxWidth?: string | number;
+};
+type TextTooltip = BaseProps & {
+    text: string;
+    content?: never;
+};
+type ContentTooltip = BaseProps & {
+    content: React.ReactNode;
+    text?: never;
+};
+/**
+ * Props for `Tooltip`: **either** `text` (plain string) **or** `content` (rich `ReactNode`), not both.
+ *
+ * @property {import("../../../types").TooltipPosition} [position] - Placement vs the trigger. Default `"top"`.
+ * @property {React.ReactNode} children - Trigger element(s) wrapped for hover/focus.
+ * @property {"dark"|"light"} [variant] - Surface style. Default `"dark"`.
+ * @property {number} [delay] - Show delay in ms. Default `0`.
+ * @property {string|number} [maxWidth] - Tooltip body max width (CSS value).
+ */
+type TooltipProps = TextTooltip | ContentTooltip;
+/**
+ * Hover/focus tooltip: positions in a `createPortal` layer, hides on scroll (capture), and supports string or custom body.
+ *
+ * @param {TooltipProps} props - `text` XOR `content`, plus `children` as trigger.
+ * @returns {JSX.Element | null} Wrapper around `children` and the portaled bubble when visible.
+ */
+export declare const Tooltip: React.FC<TooltipProps>;
+export {};

package/dist/esm/components/src/tooltip/tooltip.js

@@ -0,0 +1,2 @@
+import{jsx as t,jsxs as e,Fragment as o}from"react/jsx-runtime";import"./tooltip.css";import{useState as i,useRef as r,useId as n,useEffect as c,useCallback as s}from"react";import{createPortal as a}from"react-dom";const d=new Set,l=()=>{d.forEach((t=>t()))},p=({text:p,position:u="top",className:h="",contentClassName:m="",children:f,content:w,variant:b="dark",delay:g=0,maxWidth:v})=>{const[x,y]=i(!1),[$,k]=i({}),[E,N]=i(!1),j=r(null),B=r(null),C=r(),L=n(),T=w||p;c((()=>{N(!0)}),[]);const z=s((()=>{clearTimeout(C.current),y(!1)}),[]),M=s((()=>{g>0?C.current=setTimeout((()=>y(!0)),g):y(!0)}),[g]),O=s((()=>{if(!j.current||!B.current)return;const t=j.current.getBoundingClientRect(),e=B.current.getBoundingClientRect();let o=0,i=0;switch(u){case"top":o=t.top-e.height-8,i=t.left+t.width/2-e.width/2;break;case"bottom":o=t.bottom+8,i=t.left+t.width/2-e.width/2;break;case"left":o=t.top+t.height/2-e.height/2,i=t.left-e.width-8;break;case"right":o=t.top+t.height/2-e.height/2,i=t.right+8}k({top:`${o}px`,left:`${i}px`})}),[u]);c((()=>{if(x)return O(),t=z,0===d.size&&"undefined"!=typeof window&&window.addEventListener("scroll",l,{capture:!0,passive:!0}),d.add(t),()=>(t=>{d.delete(t),0===d.size&&"undefined"!=typeof window&&window.removeEventListener("scroll",l,{capture:!0})})(z);var t}),[x,O,z]),c((()=>()=>clearTimeout(C.current)),[]);const R=void 0!==v?"number"==typeof v?`${v}px`:v:void 0,W=t("div",{id:L,ref:B,role:"tooltip",className:`tooltip-box tooltip-box--${b}${x?" tooltip-visible":""} ${m}`,"data-position":u,style:Object.assign(Object.assign({},$),R?{maxWidth:R}:{}),children:T});return e(o,{children:[t("div",{ref:j,className:`tooltip-container ${h}`,"aria-describedby":x?L:void 0,onMouseEnter:M,onMouseLeave:z,onFocus:M,onBlur:z,children:f}),E&&a(W,document.body)]})};export{p as Tooltip};
+//# sourceMappingURL=tooltip.js.map

package/dist/esm/entries/charts.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Subpath entry: `h2o-library/charts`
+ */
+export * from "../charts/index";

package/dist/esm/entries/hooks.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Subpath entry: `h2o-library/hooks`
+ */
+export * from "../hooks";

package/dist/esm/entries/types.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Subpath entry: `h2o-library/types`
+ * Type-only re-exports (no runtime values). Requires TypeScript 5+.
+ */
+export type * from "../types";
+export type * from "../hooks";
+export type * from "../components";
+export type * from "../charts";
+export type * from "../utils";

package/dist/esm/entries/utils.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Subpath entry: `h2o-library/utils`
+ * Runtime utilities (e.g. `cn`). No React component surface.
+ */
+export * from "../utils";

package/dist/esm/hooks/index.d.ts

@@ -1,2 +1,18 @@
 export * from "./src/use-click-outside";
+export * from "./src/use-copy-to-clipboard";
+export * from "./src/use-debounce";
+export * from "./src/use-event-listener";
+export { useEventListener as useEventListner } from "./src/use-event-listener";
+export * from "./src/use-dropdown-position";
+export * from "./src/use-focus-trap";
+export * from "./src/use-idle";
+export * from "./src/use-interval";
+export * from "./src/use-hover";
+export * from "./src/use-key-press";
+export * from "./src/use-long-press";
 export * from "./src/use-media-query";
+export * from "./src/use-mouse";
+export * from "./src/use-timeout";
+export { useToast, ToastContext, type ToastContextType } from "./src/use-toast";
+export * from "./src/use-window-scroll";
+export * from "./src/use-window-size";

package/dist/esm/hooks/src/use-click-outside.d.ts

@@ -1,4 +1,13 @@
-import { RefObject } from "react";
+import type { RefObject } from "react";
 type Handler = (event: MouseEvent | TouchEvent) => void;
+/**
+ * Run a handler when the user clicks/taps outside a referenced element.
+ *
+ * Commonly used to close popovers, dropdowns, menus, and dialogs.
+ *
+ * @param ref - Element ref that defines the “inside” area.
+ * @param handler - Called when an outside interaction happens.
+ * @param mouseEvent - Which mouse event to listen for (defaults to `"mousedown"`).
+ */
 export declare function useClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: Handler, mouseEvent?: "mousedown" | "mouseup"): void;
 export {};

package/dist/esm/hooks/src/use-click-outside.js

@@ -0,0 +1,2 @@
+import{useEffect as t}from"react";function e(e,n,o="mousedown"){t((()=>{const t=t=>{const o=t.target,r=e.current;r&&!r.contains(o)&&n(t)};return document.addEventListener(o,t),document.addEventListener("touchstart",t),()=>{document.removeEventListener(o,t),document.removeEventListener("touchstart",t)}}),[e,n,o])}export{e as useClickOutside};
+//# sourceMappingURL=use-click-outside.js.map

package/dist/esm/hooks/src/use-copy-to-clipboard.d.ts

@@ -0,0 +1,15 @@
+export type UseCopyToClipboardState = {
+    copied: boolean;
+    error: Error | null;
+};
+/**
+ * Copy text to the system clipboard and track success for UI feedback.
+ *
+ * @param resetDelay - If set, `copied` resets to `false` after this many ms. @defaultValue 2000
+ * @returns `copy` function and `copied` / `error` state.
+ */
+export declare function useCopyToClipboard(resetDelay?: number): {
+    readonly copy: (text: string) => Promise<boolean>;
+    readonly copied: boolean;
+    readonly error: Error | null;
+};

package/dist/esm/hooks/src/use-debounce.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Returns a value that only updates `delay` ms after `value` stops changing
+ * (leading/trailing: trailing only).
+ *
+ * @param value - Source value (often a string from an input).
+ * @param delay - Debounce window in ms.
+ * @returns The last stable value after the quiet period.
+ */
+export declare function useDebounce<T>(value: T, delay: number): T;

package/dist/esm/hooks/src/use-dropdown-position.d.ts

@@ -0,0 +1,10 @@
+import type { RefObject } from "react";
+/**
+ * Decide whether a dropdown/menu should open above or below its trigger.
+ *
+ * @param containerRef - Ref to the trigger/container element.
+ * @param isOpen - Only measures while open.
+ * @param direction - Force `"top"`/`"bottom"` or let it auto-detect.
+ * @param menuHeight - Expected menu height (px) used for the calculation.
+ */
+export declare function useDropdownPosition(containerRef: RefObject<HTMLElement>, isOpen: boolean, direction?: "top" | "bottom" | "auto", menuHeight?: number): "top" | "bottom";

package/dist/esm/hooks/src/use-dropdown-position.js

@@ -0,0 +1,2 @@
+import{useState as t,useEffect as o}from"react";function e(e,n,r="auto",i=320){const[u,c]=t("bottom");return o((()=>{if("auto"!==r)return void c(r);if(!n)return;const t=()=>{if(!e.current)return;const t=e.current.getBoundingClientRect(),o=window.innerHeight-t.bottom,n=t.top;c(o>=i||o>=n?"bottom":"top")};return document.addEventListener("scroll",t,!0),t(),()=>{document.removeEventListener("scroll",t,!0)}}),[n,r,e,i]),u}export{e as useDropdownPosition};
+//# sourceMappingURL=use-dropdown-position.js.map

package/dist/esm/hooks/src/use-event-listener.d.ts

@@ -0,0 +1,15 @@
+import type { RefObject } from "react";
+type AddOptions = boolean | AddEventListenerOptions;
+/**
+ * Subscribes to a DOM `EventTarget` and keeps the latest `handler` without
+ * re-attaching on every render.
+ *
+ * @param event - Event name (e.g. `\"resize\"`, `\"click\"`).
+ * @param handler - Listener invoked when the event fires.
+ * @param target - `window` when `undefined`, nothing when `null`, the ref’s
+ *   `current` when a ref, or a raw element.
+ * @param options - Same as `addEventListener`’s third argument.
+ */
+export declare function useEventListener<K extends keyof WindowEventMap>(event: K, handler: (ev: WindowEventMap[K]) => void, target?: RefObject<EventTarget | null> | EventTarget | null, options?: AddOptions): void;
+export declare function useEventListener(event: string, handler: (ev: Event) => void, target?: RefObject<EventTarget | null> | EventTarget | null, options?: AddOptions): void;
+export {};

package/dist/esm/hooks/src/use-focus-trap.d.ts

@@ -0,0 +1,8 @@
+import type { RefObject } from "react";
+/**
+ * Trap keyboard focus inside a container while `active` is true.
+ *
+ * @param ref - Container element that should contain focus.
+ * @param active - Enables/disables the trap.
+ */
+export declare function useFocusTrap(ref: RefObject<HTMLElement | null>, active: boolean): void;

package/dist/esm/hooks/src/use-focus-trap.js

@@ -0,0 +1,2 @@
+import{useEffect as e}from"react";const t=["a[href]","button:not([disabled])","input:not([disabled])","textarea:not([disabled])","select:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(", ");function n(n,o){e((()=>{if(!o||!n.current)return;const e=n.current,r=()=>Array.from(e.querySelectorAll(t)),c=r();c.length>0&&c[0].focus();const i=t=>{if("Tab"!==t.key)return;const n=r();if(0===n.length)return;const o=n[0],c=n[n.length-1],i=document.activeElement;t.shiftKey?i!==o&&e.contains(i)||(t.preventDefault(),c.focus()):i!==c&&e.contains(i)||(t.preventDefault(),o.focus())};return document.addEventListener("keydown",i),()=>document.removeEventListener("keydown",i)}),[n,o])}export{n as useFocusTrap};
+//# sourceMappingURL=use-focus-trap.js.map

package/dist/esm/hooks/src/use-hover.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Tracks whether the pointer is over a given element.
+ *
+ * @returns A tuple: `isHovered` and a **ref callback** to pass to a host element’s
+ *   `ref` prop (stores the node and wires `mouseenter` / `mouseleave`).
+ */
+export declare function useHover<T extends HTMLElement = HTMLElement>(): [
+    boolean,
+    (node: T | null) => void
+];

package/dist/esm/hooks/src/use-idle.d.ts

@@ -0,0 +1,15 @@
+export type UseIdleOptions = {
+    /**
+     * DOM events on `window` that reset the idle timer. @defaultValue common
+     * user interaction events.
+     */
+    events?: Array<keyof WindowEventMap>;
+};
+/**
+ * Returns `true` when the user has been inactive (no registered events) for at least `ms`.
+ *
+ * @param ms - Idle duration in milliseconds.
+ * @param options - Optional list of `window` events that count as activity.
+ * @returns Whether the user is currently considered idle.
+ */
+export declare function useIdle(ms: number, options?: UseIdleOptions): boolean;

package/dist/esm/hooks/src/use-interval.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Repeats `callback` every `delay` ms. Pauses when `delay` is `null`.
+ *
+ * @param callback - Function called on each tick.
+ * @param delay - Interval in ms, or `null` to clear the interval.
+ */
+export declare function useInterval(callback: () => void, delay: number | null): void;

package/dist/esm/hooks/src/use-key-press.d.ts

@@ -0,0 +1,13 @@
+type KeyTarget = string | readonly string[];
+/**
+ * Listens for `keydown` on `window` and either reports whether a key is held
+ * or runs a callback on each matching press.
+ *
+ * @param key - `KeyboardEvent.key` value, or a list of keys.
+ * @param handler - If provided, called for each matching `keydown`; no return value.
+ * @returns If `handler` is omitted: whether the key is currently held (`keydown`
+ *   without a matching `keyup` yet). If `handler` is provided: `undefined`.
+ */
+export declare function useKeyPress(key: KeyTarget, handler: (event: KeyboardEvent) => void): void;
+export declare function useKeyPress(key: KeyTarget, handler?: undefined): boolean;
+export {};

package/dist/esm/hooks/src/use-long-press.d.ts

@@ -0,0 +1,20 @@
+import type { MouseEvent, PointerEvent } from "react";
+export type UseLongPressOptions = {
+    delay?: number;
+    moveThreshold?: number;
+    onClick?: (event: MouseEvent<HTMLElement> | PointerEvent<HTMLElement>) => void;
+};
+/**
+ * Pointer handlers to attach to an element to detect a long-press (hold) vs a short click.
+ *
+ * @param onLongPress - Invoked if the pointer stays down for `delay` without excess movement.
+ * @param options - Timing, move tolerance, and optional short-click handler.
+ * @returns Props to spread on a host element (`onPointerDown`, `onPointerMove`, `onPointerUp`, etc.).
+ */
+export declare function useLongPress(onLongPress: (event: React.PointerEvent<HTMLElement>) => void, options?: UseLongPressOptions): {
+    readonly onPointerDown: (event: React.PointerEvent<HTMLElement>) => void;
+    readonly onPointerMove: (event: React.PointerEvent<HTMLElement>) => void;
+    readonly onPointerUp: (event: React.PointerEvent<HTMLElement>) => void;
+    readonly onPointerCancel: (event: React.PointerEvent<HTMLElement>) => void;
+    readonly onPointerLeave: (event: React.PointerEvent<HTMLElement>) => void;
+};

package/dist/esm/hooks/src/use-media-query.d.ts

@@ -1 +1,7 @@
+/**
+ * Subscribe to a media query and get whether it currently matches.
+ *
+ * @param query - Any valid CSS media query, e.g. `\"(min-width: 768px)\"`.
+ * @returns `true` when the query matches.
+ */
 export declare const useMediaQuery: (query: string) => boolean;

package/dist/esm/hooks/src/use-mouse.d.ts

@@ -0,0 +1,12 @@
+export type MouseState = {
+    x: number;
+    y: number;
+    hasMoved: boolean;
+};
+/**
+ * Tracks the latest pointer position from `window` `pointermove` / `mousemove` events.
+ *
+ * @param enabled - When `false`, stops listening. @defaultValue true
+ * @returns Last coordinates and whether a move has been observed.
+ */
+export declare function useMouse(enabled?: boolean): MouseState;

package/dist/esm/hooks/src/use-timeout.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Runs `callback` once after `delay` ms. The timer resets when `delay` or
+ * `callback` identity changes; set `delay` to `null` to cancel.
+ *
+ * @param callback - Function to invoke after the delay.
+ * @param delay - Milliseconds, or `null` to skip scheduling.
+ */
+export declare function useTimeout(callback: () => void, delay: number | null): void;

package/dist/esm/hooks/src/use-toast.d.ts

@@ -0,0 +1,15 @@
+import type { ToastOptions } from "../../components/src/toast/toast";
+/**
+ * Return type of `useToast()`: imperative API to show and remove toasts.
+ */
+export interface ToastContextType {
+    /** Show a toast. Returns the toast id. */
+    show: (options: ToastOptions) => string;
+    /** Programmatically dismiss a toast by id. */
+    dismiss: (id: string) => void;
+}
+export declare const ToastContext: import("react").Context<ToastContextType | undefined>;
+/**
+ * Subscribes to the toast context; throws if `ToastProvider` is not an ancestor.
+ */
+export declare const useToast: () => ToastContextType;

package/dist/esm/hooks/src/use-window-scroll.d.ts

@@ -0,0 +1,10 @@
+export type WindowScrollState = {
+    x: number;
+    y: number;
+};
+/**
+ * Subscribes to `window` scroll and returns the current `scrollX` / `scrollY`.
+ *
+ * @returns Latest scroll offsets; `{ x: 0, y: 0 }` during SSR.
+ */
+export declare function useWindowScroll(): WindowScrollState;

package/dist/esm/hooks/src/use-window-size.d.ts

@@ -0,0 +1,10 @@
+export type WindowSize = {
+    width: number;
+    height: number;
+};
+/**
+ * Subscribes to `window` `resize` and returns `innerWidth` / `innerHeight`.
+ *
+ * @returns Viewport size; `{ width: 0, height: 0 }` before mount / during SSR.
+ */
+export declare function useWindowSize(): WindowSize;

package/dist/esm/index.d.ts

@@ -1,5 +1 @@
-import "./styles/index.css";
 export * from "./components";
-export * from "./hooks";
-export * from "./utils";
-export * from "./types";