@arkyn/components 3.0.1-beta.20 → 3.0.1-beta.201

package/dist/src/components/textarea/index.js

@@ -1,127 +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 "./styles.css";
-/**
- * Textarea component - used for multi-line text input with customizable styling and validation
- *
- * @param props - Textarea component properties
- * @param props.name - Required field name for form handling and textarea identification
- * @param props.label - Optional label text to display above the textarea
- * @param props.showAsterisk - Whether to show asterisk on label for required fields
- * @param props.errorMessage - Error message to display below the textarea
- * @param props.size - Size variant of the textarea. Default: "md"
- * @param props.variant - Visual variant of the textarea. Default: "solid"
- *
- * **...Other valid HTML properties for textarea element (except name)**
- *
- * @returns Textarea JSX element wrapped in FieldWrapper with optional label and error message
- *
- * @example
- * ```tsx
- * // Basic textarea
- * <Textarea name="description" placeholder="Enter description..." />
- *
- * // Textarea with label and validation
- * <Textarea
- *   name="bio"
- *   label="Biography"
- *   showAsterisk
- *   placeholder="Tell us about yourself"
- *   errorMessage="Biography is required"
- * />
- *
- * // Large textarea with outline variant
- * <Textarea
- *   name="comments"
- *   label="Comments"
- *   size="lg"
- *   variant="outline"
- *   placeholder="Enter your comments here..."
- *   rows={6}
- * />
- *
- * // Textarea with character limit and custom styling
- * <Textarea
- *   name="feedback"
- *   label="Feedback"
- *   placeholder="Share your feedback (max 500 characters)"
- *   maxLength={500}
- *   rows={4}
- *   className="feedback-textarea"
- * />
- *
- * // Read-only textarea for display
- * <Textarea
- *   name="terms"
- *   label="Terms and Conditions"
- *   value={termsContent}
- *   readOnly
- *   rows={10}
- *   variant="outline"
- * />
- *
- * // Disabled textarea
- * <Textarea
- *   name="disabled_field"
- *   label="Disabled Field"
- *   value="This field is disabled"
- *   disabled
- *   placeholder="Cannot edit this field"
- * />
- *
- * // Textarea with controlled value and change handler
- * <Textarea
- *   name="message"
- *   label="Message"
- *   value={message}
- *   onChange={(e) => setMessage(e.target.value)}
- *   placeholder="Type your message..."
- *   rows={5}
- *   showAsterisk
- * />
- *
- * // Textarea with resize control
- * <Textarea
- *   name="notes"
- *   label="Notes"
- *   placeholder="Enter your notes..."
- *   style={{ resize: 'vertical' }}
- *   rows={3}
- *   cols={50}
- * />
- * ```
- */
-function Textarea(props) {
-    const { variant = "solid", size = "md", className: baseClassName, errorMessage: baseErrorMessage, disabled = false, readOnly = false, label, showAsterisk, name, onFocus, onBlur, title, style, 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} ${baseClassName}`;
-    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, { children: [label && _jsx(FieldLabel, { 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, onFocus: handleFocus, onBlur: handleBlur, ...rest }) }), errorMessage && _jsx(FieldLabel, { children: errorMessage })] }));
-}
-export { Textarea };

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

@@ -1,80 +0,0 @@
-import { HTMLAttributes, ReactNode } from "react";
-import "./styles.css";
-type TooltipProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
-    text: string;
-    children: ReactNode;
-    orientation?: "top" | "right" | "bottom" | "left";
-    size?: "md" | "lg";
-};
-/**
- * Tooltip component - displays contextual information on hover with smart positioning
- *
- * @param props - Tooltip component properties
- * @param props.text - Text content to display in the tooltip
- * @param props.children - Element that triggers the tooltip on hover
- * @param props.orientation - Preferred tooltip position relative to trigger element. Default: "top"
- * @param props.size - Tooltip size variant. Default: "lg"
- *
- * **...Other valid HTML properties for div element**
- *
- * @returns Tooltip JSX element
- *
- * @example
- * ```tsx
- * // Basic tooltip
- * <Tooltip text="This is a helpful tip">
- *   <button>Hover me</button>
- * </Tooltip>
- *
- * // Tooltip with different orientations
- * <Tooltip text="Left tooltip" orientation="left">
- *   <span>Hover for left tooltip</span>
- * </Tooltip>
- *
- * <Tooltip text="Right tooltip" orientation="right">
- *   <span>Hover for right tooltip</span>
- * </Tooltip>
- *
- * // Different sizes
- * <Tooltip text="Small tooltip" size="md">
- *   <button>Small tooltip</button>
- * </Tooltip>
- *
- * <Tooltip text="Large tooltip" size="lg">
- *   <button>Large tooltip</button>
- * </Tooltip>
- *
- * // Smart positioning - automatically adjusts if doesn't fit
- * <Tooltip text="This tooltip will auto-adjust position" orientation="left">
- *   <button className="near-edge">Smart positioning</button>
- * </Tooltip>
- *
- * // Complete example with custom styling
- * <Tooltip
- *   text="Save your changes before proceeding"
- *   orientation="bottom"
- *   size="lg"
- *   className="custom-tooltip"
- * >
- *   <IconButton icon={SaveIcon} />
- * </Tooltip>
- *
- * // Multiple tooltips on same page
- * <div className="toolbar">
- *   <Tooltip text="Create new file" orientation="bottom">
- *     <IconButton icon={PlusIcon} />
- *   </Tooltip>
- *
- *   <Tooltip text="Open existing file" orientation="bottom">
- *     <IconButton icon={FolderIcon} />
- *   </Tooltip>
- *
- *   <Tooltip text="Delete selected file" orientation="bottom">
- *     <IconButton icon={TrashIcon} />
- *   </Tooltip>
- * </div>
- * ```
- */
-declare function Tooltip(props: TooltipProps): import("react/jsx-runtime").JSX.Element;
-export { Tooltip };
-//# sourceMappingURL=index.d.ts.map

package/dist/src/components/tooltip/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tooltip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,SAAS,EAKV,MAAM,OAAO,CAAC;AACf,OAAO,cAAc,CAAC;AAEtB,KAAK,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACrE,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAClD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AAEH,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,2CAkFnC;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

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

@@ -1,135 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useRef, useState, } from "react";
-import "./styles.css";
-/**
- * Tooltip component - displays contextual information on hover with smart positioning
- *
- * @param props - Tooltip component properties
- * @param props.text - Text content to display in the tooltip
- * @param props.children - Element that triggers the tooltip on hover
- * @param props.orientation - Preferred tooltip position relative to trigger element. Default: "top"
- * @param props.size - Tooltip size variant. Default: "lg"
- *
- * **...Other valid HTML properties for div element**
- *
- * @returns Tooltip JSX element
- *
- * @example
- * ```tsx
- * // Basic tooltip
- * <Tooltip text="This is a helpful tip">
- *   <button>Hover me</button>
- * </Tooltip>
- *
- * // Tooltip with different orientations
- * <Tooltip text="Left tooltip" orientation="left">
- *   <span>Hover for left tooltip</span>
- * </Tooltip>
- *
- * <Tooltip text="Right tooltip" orientation="right">
- *   <span>Hover for right tooltip</span>
- * </Tooltip>
- *
- * // Different sizes
- * <Tooltip text="Small tooltip" size="md">
- *   <button>Small tooltip</button>
- * </Tooltip>
- *
- * <Tooltip text="Large tooltip" size="lg">
- *   <button>Large tooltip</button>
- * </Tooltip>
- *
- * // Smart positioning - automatically adjusts if doesn't fit
- * <Tooltip text="This tooltip will auto-adjust position" orientation="left">
- *   <button className="near-edge">Smart positioning</button>
- * </Tooltip>
- *
- * // Complete example with custom styling
- * <Tooltip
- *   text="Save your changes before proceeding"
- *   orientation="bottom"
- *   size="lg"
- *   className="custom-tooltip"
- * >
- *   <IconButton icon={SaveIcon} />
- * </Tooltip>
- *
- * // Multiple tooltips on same page
- * <div className="toolbar">
- *   <Tooltip text="Create new file" orientation="bottom">
- *     <IconButton icon={PlusIcon} />
- *   </Tooltip>
- *
- *   <Tooltip text="Open existing file" orientation="bottom">
- *     <IconButton icon={FolderIcon} />
- *   </Tooltip>
- *
- *   <Tooltip text="Delete selected file" orientation="bottom">
- *     <IconButton icon={TrashIcon} />
- *   </Tooltip>
- * </div>
- * ```
- */
-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, children: text })] }));
-}
-export { Tooltip };

package/dist/src/hooks/useForm.d.ts

@@ -1,52 +0,0 @@
-/**
- * useForm hook - provides access to form context data including field errors
- *
- * @returns Form context object containing:
- * - `fieldErrors`: Object with field validation errors indexed by field name
- *
- * @example
- * ```tsx
- * // Basic usage in a component
- * function MyComponent() {
- *   const { fieldErrors } = useForm();
- *
- *   return (
- *     <Input
- *       name="email"
- *       errorMessage={fieldErrors?.email}
- *     />
- *   );
- * }
- *
- * // Usage with FormProvider
- * function App() {
- *   const errors = { email: "Invalid email format" };
- *
- *   return (
- *     <FormProvider fieldErrors={errors}>
- *       <MyForm />
- *     </FormProvider>
- *   );
- * }
- *
- * // Checking for specific field errors
- * function FormField() {
- *   const { fieldErrors } = useForm();
- *   const hasError = !!fieldErrors?.username;
- *
- *   return (
- *     <div>
- *       <Input name="username" />
- *       {hasError && <span>Error: {fieldErrors.username}</span>}
- *     </div>
- *   );
- * }
- * ```
- */
-declare function useForm(): {
-    fieldErrors: {
-        [x: string]: any;
-    };
-};
-export { useForm };
-//# sourceMappingURL=useForm.d.ts.map

package/dist/src/hooks/useForm.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../src/hooks/useForm.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAEH,iBAAS,OAAO;;;;EAGf;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/src/hooks/useForm.js

@@ -1,52 +0,0 @@
-import { useContext } from "react";
-import { formContext } from "../providers/formProvider";
-/**
- * useForm hook - provides access to form context data including field errors
- *
- * @returns Form context object containing:
- * - `fieldErrors`: Object with field validation errors indexed by field name
- *
- * @example
- * ```tsx
- * // Basic usage in a component
- * function MyComponent() {
- *   const { fieldErrors } = useForm();
- *
- *   return (
- *     <Input
- *       name="email"
- *       errorMessage={fieldErrors?.email}
- *     />
- *   );
- * }
- *
- * // Usage with FormProvider
- * function App() {
- *   const errors = { email: "Invalid email format" };
- *
- *   return (
- *     <FormProvider fieldErrors={errors}>
- *       <MyForm />
- *     </FormProvider>
- *   );
- * }
- *
- * // Checking for specific field errors
- * function FormField() {
- *   const { fieldErrors } = useForm();
- *   const hasError = !!fieldErrors?.username;
- *
- *   return (
- *     <div>
- *       <Input name="username" />
- *       {hasError && <span>Error: {fieldErrors.username}</span>}
- *     </div>
- *   );
- * }
- * ```
- */
-function useForm() {
-    const context = useContext(formContext);
-    return context;
-}
-export { useForm };

package/dist/src/hooks/useScopedParams.d.ts

@@ -1,89 +0,0 @@
-type ParamsType = Record<string, string | number | boolean | undefined>;
-/**
- * Utility function to manage URL search parameters with optional scoping.
- * Provides functionality to get parameters and generate updated search strings
- * while maintaining existing parameters.
- *
- * @param searchString - The current URL search parameters string (e.g., "page=1&filter=active")
- * @param scope - Optional scope prefix for parameters. When provided, parameters will be prefixed with "scope:". Default: ""
- *
- * @returns Object containing parameter management functions:
- * @returns getParam - Function to get a parameter value by key (considers scope if provided)
- * @returns getScopedSearch - Function to generate search string with updated parameters while preserving existing ones
- *
- * @example
- * ```tsx
- * // Basic usage without scope
- * const searchString = "page=1&filter=active";
- * const { getParam, getScopedSearch } = useScopedParams(searchString);
- *
- * // Get a parameter value
- * const page = getParam('page'); // Returns "1"
- * const filter = getParam('filter'); // Returns "active"
- *
- * // Generate search string with new/updated parameters
- * const newSearch = getScopedSearch({ page: 2, sort: 'name' });
- * // Result: "?page=2&filter=active&sort=name"
- * ```
- *
- * @example
- * ```tsx
- * // Usage with scope
- * const searchString = "filters:status=active&filters:category=tech&page=1";
- * const { getParam, getScopedSearch } = useScopedParams(searchString, 'filters');
- *
- * // Get a scoped parameter value
- * const status = getParam('status'); // Gets 'filters:status' from URL, returns "active"
- * const category = getParam('category'); // Gets 'filters:category' from URL, returns "tech"
- *
- * // Generate search string with scoped parameters
- * const newSearch = getScopedSearch({
- *   status: 'inactive',
- *   category: 'sports',
- *   price: 100,
- *   discount: undefined // This will remove 'filters:discount' from URL if it exists
- * });
- * // Result: "?filters:status=inactive&filters:category=sports&filters:price=100&page=1"
- * ```
- *
- * @example
- * ```tsx
- * // Real-world usage with React Router
- * import { useLocation, useNavigate } from 'react-router-dom';
- *
- * function ProductFilter() {
- *   const location = useLocation();
- *   const navigate = useNavigate();
- *   const { getParam, getScopedSearch } = useScopedParams(location.search, 'product');
- *
- *   const handleFilterChange = (newFilters: Record<string, any>) => {
- *     const searchString = getScopedSearch(newFilters);
- *     navigate({ search: searchString });
- *   };
- *
- *   const currentCategory = getParam('category');
- *   const currentPrice = getParam('price');
- *
- *   return (
- *     <div>
- *       <p>Current category: {currentCategory || 'All'}</p>
- *       <p>Current price filter: {currentPrice || 'None'}</p>
- *
- *       <button onClick={() => handleFilterChange({ category: 'electronics' })}>
- *         Electronics
- *       </button>
- *
- *       <button onClick={() => handleFilterChange({ category: undefined, price: undefined })}>
- *         Clear Filters
- *       </button>
- *     </div>
- *   );
- * }
- * ```
- */
-declare function useScopedParams(searchString: string, scope?: string): {
-    getParam: (key: string) => string;
-    getScopedSearch: (params: ParamsType) => string;
-};
-export { useScopedParams };
-//# sourceMappingURL=useScopedParams.d.ts.map

package/dist/src/hooks/useScopedParams.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useScopedParams.d.ts","sourceRoot":"","sources":["../../../src/hooks/useScopedParams.ts"],"names":[],"mappings":"AAAA,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC;AAExE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiFG;AAEH,iBAAS,eAAe,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,GAAE,MAAW;oBAe7C,MAAM;8BACI,UAAU;EAOvC;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/src/hooks/useScopedParams.js

@@ -1,107 +0,0 @@
-/**
- * Utility function to manage URL search parameters with optional scoping.
- * Provides functionality to get parameters and generate updated search strings
- * while maintaining existing parameters.
- *
- * @param searchString - The current URL search parameters string (e.g., "page=1&filter=active")
- * @param scope - Optional scope prefix for parameters. When provided, parameters will be prefixed with "scope:". Default: ""
- *
- * @returns Object containing parameter management functions:
- * @returns getParam - Function to get a parameter value by key (considers scope if provided)
- * @returns getScopedSearch - Function to generate search string with updated parameters while preserving existing ones
- *
- * @example
- * ```tsx
- * // Basic usage without scope
- * const searchString = "page=1&filter=active";
- * const { getParam, getScopedSearch } = useScopedParams(searchString);
- *
- * // Get a parameter value
- * const page = getParam('page'); // Returns "1"
- * const filter = getParam('filter'); // Returns "active"
- *
- * // Generate search string with new/updated parameters
- * const newSearch = getScopedSearch({ page: 2, sort: 'name' });
- * // Result: "?page=2&filter=active&sort=name"
- * ```
- *
- * @example
- * ```tsx
- * // Usage with scope
- * const searchString = "filters:status=active&filters:category=tech&page=1";
- * const { getParam, getScopedSearch } = useScopedParams(searchString, 'filters');
- *
- * // Get a scoped parameter value
- * const status = getParam('status'); // Gets 'filters:status' from URL, returns "active"
- * const category = getParam('category'); // Gets 'filters:category' from URL, returns "tech"
- *
- * // Generate search string with scoped parameters
- * const newSearch = getScopedSearch({
- *   status: 'inactive',
- *   category: 'sports',
- *   price: 100,
- *   discount: undefined // This will remove 'filters:discount' from URL if it exists
- * });
- * // Result: "?filters:status=inactive&filters:category=sports&filters:price=100&page=1"
- * ```
- *
- * @example
- * ```tsx
- * // Real-world usage with React Router
- * import { useLocation, useNavigate } from 'react-router-dom';
- *
- * function ProductFilter() {
- *   const location = useLocation();
- *   const navigate = useNavigate();
- *   const { getParam, getScopedSearch } = useScopedParams(location.search, 'product');
- *
- *   const handleFilterChange = (newFilters: Record<string, any>) => {
- *     const searchString = getScopedSearch(newFilters);
- *     navigate({ search: searchString });
- *   };
- *
- *   const currentCategory = getParam('category');
- *   const currentPrice = getParam('price');
- *
- *   return (
- *     <div>
- *       <p>Current category: {currentCategory || 'All'}</p>
- *       <p>Current price filter: {currentPrice || 'None'}</p>
- *
- *       <button onClick={() => handleFilterChange({ category: 'electronics' })}>
- *         Electronics
- *       </button>
- *
- *       <button onClick={() => handleFilterChange({ category: undefined, price: undefined })}>
- *         Clear Filters
- *       </button>
- *     </div>
- *   );
- * }
- * ```
- */
-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 };