@arkyn/components 3.0.1-beta.154 → 3.0.1-beta.156

package/dist/components/tab/tabButton/index.js

@@ -1,40 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useTab } from "../tabContext";
-import "./styles.css";
-/**
- * TabButton — individual tab button inside a `TabContainer`.
- *
- * Reads active state and disabled state from `TabContainer` context.
- * The button's own `disabled` prop is ORed with the container's `disabled`.
- *
- * @param props.children - Tab label content. Required.
- * @param props.value - Tab identifier. Required.
- * @param props.disabled - Disables this tab individually (container can also disable all tabs).
- *
- * **...Other valid HTML `<button>` properties except `type`**
- *
- * @returns TabButton JSX element.
- *
- * @example
- * ```tsx
- * <TabContainer defaultValue="overview" onChange={setTab}>
- *   <TabButton value="overview">Overview</TabButton>
- *   <TabButton value="activity">Activity</TabButton>
- *   <TabButton value="settings" disabled>Settings</TabButton>
- * </TabContainer>
- * ```
- */
-function TabButton(props) {
-    const { children, disabled: rawDisabled = false, className: baseClassName = "", onClick, value, ...rest } = props;
-    const { disabled, currentTab, changeCurrentTab } = useTab();
-    const isDisabled = disabled || rawDisabled;
-    const disabledClass = isDisabled ? "isDisabled" : "";
-    const activeClass = currentTab === value && value ? "isActive" : "";
-    const className = `arkynTabButton ${disabledClass} ${activeClass} ${baseClassName}`;
-    function handleClick(event) {
-        changeCurrentTab(value);
-        onClick && onClick(event);
-    }
-    return (_jsx("button", { onClick: handleClick, className: className.trim(), ...rest, disabled: isDisabled, type: "button", children: children }));
-}
-export { TabButton };

package/dist/components/tab/tabContainer/index.js

@@ -1,42 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import { TabProvider } from "../tabContext";
-import "./styles.css";
-/**
- * TabContainer — wrapper that manages active state for a group of `TabButton` components.
- *
- * Renders as a `<nav>` element. Provides context consumed by each `TabButton`.
- *
- * @param props.children - `TabButton` elements. Required.
- * @param props.defaultValue - Initially selected tab value.
- * @param props.disabled - Disables all buttons. Default: false
- * @param props.onChange - Called with the new value whenever the active tab changes.
- *
- * **...Other valid HTML `<nav>` properties**
- *
- * @returns TabContainer JSX element.
- *
- * @example
- * ```tsx
- * <TabContainer defaultValue="overview" onChange={setActiveTab}>
- *   <TabButton value="overview">Overview</TabButton>
- *   <TabButton value="analytics">Analytics</TabButton>
- *   <TabButton value="settings">Settings</TabButton>
- * </TabContainer>
- *
- * {activeTab === 'overview' && <OverviewPanel />}
- * {activeTab === 'analytics' && <AnalyticsPanel />}
- * ```
- */
-function TabContainer(props) {
-    const { children, onChange, defaultValue, disabled = false, className: baseClassName, ...rest } = props;
-    const [currentTab, setCurrentTab] = useState(defaultValue || "");
-    const className = `arkynTabContainer ${baseClassName || ""}`;
-    function changeCurrentTab(value) {
-        setCurrentTab(value);
-        if (onChange)
-            onChange(value);
-    }
-    return (_jsx(TabProvider, { disabled: disabled, currentTab: currentTab, changeCurrentTab: changeCurrentTab, children: _jsx("nav", { className: className.trim(), ...rest, children: children }) }));
-}
-export { TabContainer };

package/dist/components/tab/tabContext.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from "react";
-const TabContext = createContext({});
-function useTab() {
-    return useContext(TabContext);
-}
-function TabProvider(props) {
-    return (_jsx(TabContext.Provider, { value: props, children: props.children }));
-}
-export { TabProvider, useTab };

package/dist/components/table/tableBody/index.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Children } from "react";
-import "./styles.css";
-/**
- * TableBody — `<tbody>` section with built-in empty state handling.
- *
- * When `children` is empty, renders a full-width row with `emptyMessage`.
- * Accepts all standard HTML `<tbody>` attributes.
- *
- * @param props.emptyMessage - Empty state text. Default: `"Nenhum dado adicionado."`
- *
- * **...Other valid HTML `<tbody>` properties**
- *
- * @returns TableBody JSX element.
- *
- * @example
- * ```tsx
- * <TableBody emptyMessage="No orders found">
- *   {orders.map(o => (
- *     <tr key={o.id}>
- *       <td>{o.number}</td>
- *       <td>{o.status}</td>
- *     </tr>
- *   ))}
- * </TableBody>
- * ```
- */
-function TableBody(props) {
-    const { emptyMessage = "Nenhum dado adicionado.", className: baseClassName, children, ...rest } = props;
-    const className = `arkynTableBody ${baseClassName}`;
-    const isEmpty = Children.count(children) === 0;
-    return (_jsx("tbody", { className: className.trim(), ...rest, children: isEmpty ? (_jsx("tr", { className: "arkynTableBodyEmptyLine", children: _jsx("td", { colSpan: 100, children: _jsx("div", { children: emptyMessage }) }) })) : (children) }));
-}
-export { TableBody };

package/dist/components/table/tableCaption/index.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-/**
- * TableCaption — title / description placed above a table. Renders as a `<caption>` element.
- *
- * Accepts all standard HTML element attributes.
- *
- * @returns TableCaption JSX element.
- *
- * @example
- * ```tsx
- * <TableContainer>
- *   <TableCaption>Orders — Q2 2025</TableCaption>
- *   <TableHeader>...</TableHeader>
- *   <TableBody>...</TableBody>
- * </TableContainer>
- * ```
- */
-function TableCaption(props) {
-    const { className: baseClassName, children, ...rest } = props;
-    const className = `arkynTableCaption ${baseClassName}`;
-    return (_jsx("caption", { className: className.trim(), ...rest, children: _jsx("div", { className: "arkynTableCaptionContent", children: children }) }));
-}
-export { TableCaption };

package/dist/components/table/tableContainer/index.js

@@ -1,37 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-/**
- * TableContainer — root wrapper for the Table component set. Renders a responsive scrollable container around a `<table>`.
- *
- * Accepts all standard HTML `<table>` attributes.
- *
- * @returns TableContainer JSX element.
- *
- * @example
- * ```tsx
- * <TableContainer>
- *   <TableCaption>Users</TableCaption>
- *   <TableHeader>
- *     <th>Name</th>
- *     <th>Email</th>
- *     <th>Status</th>
- *   </TableHeader>
- *   <TableBody emptyMessage="No users found">
- *     {users.map(u => (
- *       <tr key={u.id}>
- *         <td>{u.name}</td>
- *         <td>{u.email}</td>
- *         <td>{u.status}</td>
- *       </tr>
- *     ))}
- *   </TableBody>
- *   <TableFooter><Pagination /></TableFooter>
- * </TableContainer>
- * ```
- */
-function TableContainer(props) {
-    const { children, className: baseClassName, ...rest } = props;
-    const className = `arkynTableContainer ${baseClassName}`;
-    return (_jsx("div", { className: className.trim(), ...rest, children: _jsx("table", { children: children }) }));
-}
-export { TableContainer };

package/dist/components/table/tableFooter/index.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "./styles.css";
-/**
- * TableFooter — `<tfoot>` section with an automatic spacing row above the content.
- *
- * Children span all columns via `colSpan={100}`. Commonly used for `Pagination`.
- * Accepts all standard HTML `<tfoot>` attributes.
- *
- * @returns TableFooter JSX element.
- *
- * @example
- * ```tsx
- * <TableFooter>
- *   <Pagination currentPage={page} totalPages={totalPages} onChange={setPage} />
- * </TableFooter>
- * ```
- */
-function TableFooter(props) {
-    const { className: baseClassName, children, ...rest } = props;
-    const className = `arkynTableFooter ${baseClassName}`;
-    return (_jsxs("tfoot", { className: className.trim(), ...rest, children: [_jsx("tr", { className: "spacingRow" }), _jsx("tr", { children: _jsx("th", { colSpan: 100, children: _jsx("div", { className: "arkynTableFooterContent", children: children }) }) })] }));
-}
-export { TableFooter };

package/dist/components/table/tableHeader/index.js

@@ -1,25 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "./styles.css";
-/**
- * TableHeader — `<thead>` section with an automatic spacing row below the header row.
- *
- * Pass `<th>` elements as children — they are wrapped in a `<tr>` automatically.
- * Accepts all standard HTML `<thead>` attributes.
- *
- * @returns TableHeader JSX element.
- *
- * @example
- * ```tsx
- * <TableHeader>
- *   <th>Name</th>
- *   <th>Email</th>
- *   <th>Actions</th>
- * </TableHeader>
- * ```
- */
-function TableHeader(props) {
-    const { className: baseClassName, children, ...rest } = props;
-    const className = `arkynTableHeader ${baseClassName}`;
-    return (_jsxs("thead", { className: className.trim(), ...rest, children: [_jsx("tr", { children: children }), _jsx("tr", { className: "spacingRow" })] }));
-}
-export { TableHeader };

package/dist/components/textarea/index.js

@@ -1,80 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useRef, useState, } from "react";
-import { useForm } from "../../hooks/useForm";
-import { FieldLabel } from "../fieldLabel";
-import { FieldWrapper } from "../fieldWrapper";
-import { FieldError } from "../fieldError";
-import "./styles.css";
-/**
- * Textarea — multi-line text input with label, validation, and form integration.
- *
- * Integrates with `useForm` to display validation errors by field name.
- *
- * @param props.name - Field name for form submission. Required.
- * @param props.label - Label text displayed above the textarea.
- * @param props.showAsterisk - Appends `*` to the label.
- * @param props.errorMessage - Validation error message.
- * @param props.size - Textarea size (`md` | `lg`). Default: "md"
- * @param props.variant - Visual style variant. Default: "solid"
- *
- * **...Other valid HTML properties for `<textarea>`**
- *
- * @returns Textarea JSX element wrapped in `FieldWrapper`.
- *
- * @example
- * ```tsx
- * // Basic
- * <Textarea name="description" placeholder="Enter description..." />
- *
- * // With label and validation
- * <Textarea
- *   name="bio"
- *   label="Biography"
- *   showAsterisk
- *   placeholder="Tell us about yourself"
- *   errorMessage="Biography is required"
- * />
- *
- * // Controlled with custom rows
- * <Textarea
- *   name="message"
- *   label="Message"
- *   value={message}
- *   onChange={(e) => setMessage(e.target.value)}
- *   rows={5}
- *   size="lg"
- *   variant="outline"
- * />
- * ```
- */
-function Textarea(props) {
-    const { variant = "solid", size = "md", className: wrapperClassName, errorMessage: baseErrorMessage, disabled = false, readOnly = false, label, showAsterisk, name, onFocus, onBlur, title, style, value, defaultValue, placeholder, id, ...rest } = props;
-    const { fieldErrors } = useForm();
-    const [isFocused, setIsFocused] = useState(false);
-    const textareaRef = useRef(null);
-    const textareaId = id || useId();
-    const errorMessage = baseErrorMessage || fieldErrors?.[name];
-    const isError = !!errorMessage;
-    const errorClass = isError ? "errorTrue" : "errorFalse";
-    const opacityClass = disabled || readOnly ? "opacityTrue" : "opacityFalse";
-    const focusedClass = isFocused ? "focusedTrue" : "focusedFalse";
-    const className = `arkynTextarea ${variant} ${size} ${opacityClass} ${errorClass} ${focusedClass}`;
-    function handleSectionClick() {
-        if (disabled || !textareaRef?.current)
-            return;
-        setIsFocused(true);
-        textareaRef.current.focus();
-    }
-    function handleFocus(e) {
-        setIsFocused(true);
-        if (onFocus)
-            onFocus(e);
-    }
-    function handleBlur(e) {
-        setIsFocused(false);
-        if (onBlur)
-            onBlur(e);
-    }
-    return (_jsxs(FieldWrapper, { className: wrapperClassName, children: [label && (_jsx(FieldLabel, { htmlFor: textareaId, showAsterisk: showAsterisk, children: label })), _jsx("section", { title: title, style: style, onClick: handleSectionClick, className: className, children: _jsx("textarea", { id: textareaId, disabled: disabled, readOnly: readOnly, ref: textareaRef, name: name, onFocus: handleFocus, onBlur: handleBlur, defaultValue: defaultValue || "", placeholder: disabled ? value || placeholder : placeholder, value: disabled ? undefined : value, ...rest }) }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
-}
-export { Textarea };

package/dist/components/tooltip/index.js

@@ -1,96 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useRef, useState, } from "react";
-import "./styles.css";
-/**
- * Tooltip — shows a contextual text bubble on hover with smart viewport-aware positioning.
- *
- * The tooltip automatically flips to the opposite side when it would overflow the viewport.
- *
- * @param props.text - Text (or HTML) to display in the tooltip. Required.
- * @param props.children - Trigger element. Required.
- * @param props.orientation - Preferred position relative to the trigger. Default: "top"
- * @param props.size - Tooltip size. Default: "lg"
- *
- * **...Other valid HTML properties for `<div>`**
- *
- * @returns Tooltip JSX element.
- *
- * @example
- * ```tsx
- * <Tooltip text="Save changes before leaving">
- *   <IconButton icon={SaveIcon} aria-label="Save" />
- * </Tooltip>
- *
- * // Toolbar with bottom-oriented tooltips
- * <Tooltip text="Add item" orientation="bottom">
- *   <IconButton icon={Plus} aria-label="Add" />
- * </Tooltip>
- *
- * <Tooltip text="Delete" orientation="bottom" size="md">
- *   <IconButton icon={Trash2} aria-label="Delete" scheme="danger" />
- * </Tooltip>
- * ```
- */
-function Tooltip(props) {
-    const { text, size = "lg", children, orientation = "top", className: baseClassName = "", ...rest } = props;
-    const tooltipId = useId();
-    const tooltipRef = useRef(null);
-    const [adjustedOrientation, setAdjustedOrientation] = useState(orientation);
-    useEffect(() => {
-        const checkTooltipPosition = () => {
-            if (!tooltipRef.current)
-                return;
-            const tooltipText = document.getElementById(tooltipId);
-            if (!tooltipText)
-                return;
-            setAdjustedOrientation(orientation);
-            requestAnimationFrame(() => {
-                const rect = tooltipText.getBoundingClientRect();
-                const viewportWidth = window.innerWidth;
-                const viewportHeight = window.innerHeight;
-                let newOrientation = orientation;
-                if (orientation === "left" && rect.left < 0) {
-                    newOrientation = "right";
-                }
-                else if (orientation === "right" && rect.right > viewportWidth) {
-                    newOrientation = "left";
-                }
-                else if (orientation === "top" && rect.top < 0) {
-                    newOrientation = "bottom";
-                }
-                else if (orientation === "bottom" && rect.bottom > viewportHeight) {
-                    newOrientation = "top";
-                }
-                if (newOrientation === "right" && rect.right > viewportWidth) {
-                    newOrientation = "left";
-                }
-                else if (newOrientation === "left" && rect.left < 0) {
-                    newOrientation = "right";
-                }
-                else if (newOrientation === "bottom" &&
-                    rect.bottom > viewportHeight) {
-                    newOrientation = "top";
-                }
-                else if (newOrientation === "top" && rect.top < 0) {
-                    newOrientation = "bottom";
-                }
-                setAdjustedOrientation(newOrientation);
-            });
-        };
-        const tooltip = tooltipRef.current;
-        if (!tooltip)
-            return;
-        const handleMouseEnter = () => {
-            setTimeout(checkTooltipPosition, 1);
-        };
-        tooltip.addEventListener("mouseenter", handleMouseEnter);
-        window.addEventListener("resize", checkTooltipPosition);
-        return () => {
-            tooltip.removeEventListener("mouseenter", handleMouseEnter);
-            window.removeEventListener("resize", checkTooltipPosition);
-        };
-    }, [orientation, tooltipId]);
-    const className = `arkynTooltip ${size} ${adjustedOrientation} ${baseClassName}`;
-    return (_jsxs("div", { className: className.trim(), ...rest, ref: tooltipRef, children: [children, _jsx("div", { className: "arkynTooltipText", id: tooltipId, dangerouslySetInnerHTML: { __html: text } })] }));
-}
-export { Tooltip };

package/dist/hooks/useAutomation.js

@@ -1,74 +0,0 @@
-import { useEffect } from "react";
-import { scroller } from "react-scroll";
-import { useModal } from "./useModal";
-import { useToast } from "./useToast";
-import { badResponses } from "../templates/badResponses";
-import { successResponses } from "../templates/successResponses";
-/**
- * useAutomation — runs UI side-effects (close modals, scroll, toast) in response to a server action payload.
- *
- * Pass the raw response from a form submission. On every change the hook:
- * 1. Closes all open modals if `closeModal` is `true`.
- * 2. Smooth-scrolls to a named element if `cause.data.scrollTo` is set.
- * 3. Shows a toast based on `name` (matched against `successResponses`/`badResponses`) and `message`.
- *    When `cause.fieldErrors` is present, the first field error takes priority in the toast.
- *    The message `"Unprocessable entity"` is intentionally suppressed.
- *
- * @param formResponseData - Raw server response payload.
- * @param formResponseData.closeModal - Closes all open modals when `true`.
- * @param formResponseData.name - Response identifier matched against success/bad response lists.
- * @param formResponseData.message - Text shown in the toast notification.
- * @param formResponseData.cause.data.scrollTo - Element name to scroll to via `react-scroll`.
- * @param formResponseData.cause.fieldErrors - Field-level errors; the first value is shown in the toast.
- *
- * @example
- * ```tsx
- * // After a successful create action
- * useAutomation({ closeModal: true, name: "created", message: "Saved successfully" });
- * ```
- *
- * @example
- * ```tsx
- * // Validation error with field-level feedback and scroll
- * useAutomation({
- *   name: "validation_error",
- *   message: "Invalid payload",
- *   cause: {
- *     data: { scrollTo: "email" },
- *     fieldErrors: { email: "E-mail is required" },
- *   },
- * });
- * ```
- */
-function useAutomation(formResponseData) {
-    const { closeAll } = useModal();
-    const { showToast } = useToast();
-    const closeModal = formResponseData?.closeModal;
-    const message = formResponseData?.message;
-    const name = formResponseData?.name;
-    const scrollTo = formResponseData?.cause?.data?.scrollTo;
-    const firstErrorField = formResponseData?.cause?.fieldErrors
-        ? Object.values(formResponseData?.cause?.fieldErrors)[0]
-        : null;
-    function fireToast() {
-        if (!message && !firstErrorField)
-            return;
-        if (successResponses.includes(name))
-            return showToast({ message, type: "success" });
-        if (!badResponses.includes(name))
-            return;
-        if (!!firstErrorField)
-            return showToast({ message: firstErrorField, type: "danger" });
-        if (message === "Unprocessable entity")
-            return;
-        return showToast({ message, type: "danger" });
-    }
-    useEffect(() => {
-        if (closeModal)
-            closeAll();
-        if (scrollTo)
-            scroller.scrollTo(scrollTo, { smooth: true, offset: 20 });
-        fireToast();
-    }, [formResponseData]);
-}
-export { useAutomation };

package/dist/hooks/useDrawer.js

@@ -1,20 +0,0 @@
-import { useContext } from "react";
-import { drawerContext } from "../providers/drawerProvider";
-function useDrawer(key) {
-    const contextData = useContext(drawerContext);
-    if (Object.entries(contextData).length === 0) {
-        throw new Error("useDrawer must be used within a Provider");
-    }
-    if (key) {
-        const { drawerData: contextDrawerData, drawerIsOpen: contextDrawerIsOpen, openDrawer: contextOpenDrawer, closeDrawer: contextCloseDrawer, } = contextData;
-        const drawerIsOpen = contextDrawerIsOpen(key);
-        const drawerData = contextDrawerData(key);
-        const openDrawer = (data) => contextOpenDrawer(key, data);
-        const closeDrawer = () => contextCloseDrawer(key);
-        return { drawerIsOpen, drawerData, openDrawer, closeDrawer };
-    }
-    else {
-        return contextData;
-    }
-}
-export { useDrawer };

package/dist/hooks/useForm.js

@@ -1,35 +0,0 @@
-import { useContext } from "react";
-import { formContext } from "../providers/formProvider";
-/**
- * useForm — reads the nearest `FormProvider` context to access field-level validation errors.
- *
- * All form inputs (`Input`, `Select`, `Checkbox`, etc.) call this hook internally,
- * so you rarely need it directly. Use it when you want to read errors outside of
- * an input component, or build a custom input.
- *
- * @returns Form context containing:
- * - `fieldErrors` — `Record<string, string>` mapping field names to error messages.
- *
- * @example
- * ```tsx
- * // Wrapping a form with FormProvider
- * function App() {
- *   return (
- *     <FormProvider fieldErrors={{ email: "Invalid email" }}>
- *       <MyForm />
- *     </FormProvider>
- *   );
- * }
- *
- * // Reading errors manually
- * function CustomField() {
- *   const { fieldErrors } = useForm();
- *   return <span>{fieldErrors?.username}</span>;
- * }
- * ```
- */
-function useForm() {
-    const context = useContext(formContext);
-    return context;
-}
-export { useForm };

package/dist/hooks/useHydrated.js

@@ -1,26 +0,0 @@
-import { useSyncExternalStore } from "react";
-function subscribe() {
-    return () => { };
-}
-/**
- * useHydrated — returns `true` once the component has hydrated on the client, `false` during SSR.
- *
- * Built on `useSyncExternalStore` so it is safe with React 18 concurrent rendering.
- * Use this when you need to defer client-only rendering (e.g. browser APIs, `window`, `navigator`)
- * without causing a hydration mismatch. For most cases, prefer the `ClientOnly` component.
- *
- * @returns `true` on the client after hydration; `false` on the server.
- *
- * @example
- * ```tsx
- * function Map() {
- *   const isHydrated = useHydrated();
- *   if (!isHydrated) return <Skeleton />;
- *   return <MapView accessToken={token} coordinates={coords} />;
- * }
- * ```
- */
-function useHydrated() {
-    return useSyncExternalStore(subscribe, () => true, () => false);
-}
-export { useHydrated };

package/dist/hooks/useModal.js

@@ -1,20 +0,0 @@
-import { useContext } from "react";
-import { modalContext } from "../providers/modalProvider";
-function useModal(key) {
-    const contextData = useContext(modalContext);
-    if (Object.entries(contextData).length === 0) {
-        throw new Error("useModal must be used within a Provider");
-    }
-    if (key) {
-        const { modalData: contextModalData, modalIsOpen: contextModalIsOpen, openModal: contextOpenModal, closeModal: contextCloseModal, } = contextData;
-        const modalIsOpen = contextModalIsOpen(key);
-        const modalData = contextModalData(key);
-        const openModal = (data) => contextOpenModal(key, data);
-        const closeModal = () => contextCloseModal(key);
-        return { modalIsOpen, modalData, openModal, closeModal };
-    }
-    else {
-        return contextData;
-    }
-}
-export { useModal };

package/dist/hooks/useScopedParams.js

@@ -1,55 +0,0 @@
-/**
- * useScopedParams — reads and writes URL search parameters with an optional namespace prefix.
- *
- * When `scope` is provided, every key is namespaced as `scope:key`, so multiple features
- * can share the same URL without collisions (e.g. `filters:status` and `table:page`).
- *
- * @param searchString - Current URL search string (e.g. `location.search`).
- * @param scope - Namespace prefix. Default: `""` (no prefix).
- *
- * @returns
- * - `getParam(key)` — returns the (scoped) param value, or `null` if absent.
- * - `getScopedSearch(params)` — merges `params` into the existing search string and returns the result.
- *   Pass `undefined` as a value to delete that param.
- *
- * @example
- * ```tsx
- * // Without scope — plain key/value params
- * const { getParam, getScopedSearch } = useScopedParams(location.search);
- * getParam('page');                          // "1"
- * getScopedSearch({ page: 2, sort: 'name' }); // "?page=2&sort=name"
- * ```
- *
- * @example
- * ```tsx
- * // With scope — all keys prefixed as "filters:key"
- * const { getParam, getScopedSearch } = useScopedParams(location.search, 'filters');
- * getParam('status');                                       // reads "filters:status"
- * getScopedSearch({ status: 'active', category: undefined }); // removes "filters:category"
- * ```
- */
-function useScopedParams(searchString, scope = "") {
-    const searchParams = new URLSearchParams(searchString);
-    const prefix = scope ? `${scope}:` : "";
-    const updateSearchParams = (params) => {
-        Object.entries(params).forEach(([key, value]) => {
-            if (value === undefined) {
-                searchParams.delete(`${prefix}${key}`);
-            }
-            else {
-                searchParams.set(`${prefix}${key}`, String(value));
-            }
-        });
-    };
-    return {
-        getParam: (key) => searchParams.get(`${prefix}${key}`),
-        getScopedSearch: (params) => {
-            updateSearchParams(params);
-            let search = searchParams.toString();
-            if (search)
-                search = "?" + search;
-            return search;
-        },
-    };
-}
-export { useScopedParams };