@majapisoftwares/ui 4.1.17 → 4.2.0

package/components/Table/DataTable.jsx

@@ -61,49 +61,49 @@ export default function DataTable({ title, subtitle, headerContent, data, idAcce
     }, [sort]);
     return (<Stack className={clsx({
             "flex flex-1 flex-col": autoHeight,
-        }, className)}>
-      {(title || subtitle || headerContent) && (<Table.Header title={title} subtitle={subtitle}>
-          {headerContent}
-        </Table.Header>)}
-      <Table autoHeight={autoHeight} className={tableClassName}>
-        <Table.Head>
-          <Table.Row>
+        }, className)}>
+      {(title || subtitle || headerContent) && (<Table.Header title={title} subtitle={subtitle}>
+          {headerContent}
+        </Table.Header>)}
+      <Table autoHeight={autoHeight} className={tableClassName}>
+        <Table.Head>
+          <Table.Row>
             {columns.map((column, i) => {
             const id = column.id ||
                 (typeof column.title === "string"
                     ? column.title
                     : i.toString());
             const columnSort = getColumnSort(id);
-            return (<Table.Cell key={id} className={column.headerClassName}>
-                  {column.sortable ? (<span className="group inline-flex cursor-pointer" onClick={handleColumnClick(id)}>
-                      {column.title}
+            return (<Table.Cell key={id} className={column.headerClassName}>
+                  {column.sortable ? (<span className="group inline-flex cursor-pointer" onClick={handleColumnClick(id)}>
+                      {column.title}
                       <span className={clsx("mb-auto ml-2 flex-none rounded-sm text-zinc-400", {
                         "bg-zinc-200 text-zinc-900 group-hover:bg-zinc-300": columnSort?.[1],
                         "invisible group-hover:visible group-focus:visible": !columnSort?.[1],
-                    })}>
+                    })}>
                         <ChevronUpIcon className={clsx("h-5 w-5", {
                         "scale-y-flip": columnSort?.[1] === "desc",
-                    })} aria-hidden="true"/>
-                      </span>
-                    </span>) : (column.title)}
+                    })} aria-hidden="true"/>
+                      </span>
+                    </span>) : (column.title)}
                 </Table.Cell>);
-        })}
-            {actions && <Table.Cell />}
-          </Table.Row>
-          {isLoading && (<tr className="absolute right-3 top-2 rounded-full bg-zinc-50/50 dark:bg-zinc-900/50">
-              <td>
-                <Loading className="mt-px"/>
-              </td>
-            </tr>)}
-        </Table.Head>
-        <Table.Body>
+        })}
+            {actions && <Table.Cell />}
+          </Table.Row>
+          {isLoading && (<tr className="absolute top-2 right-3 rounded-full bg-zinc-50/50 dark:bg-zinc-900/50">
+              <td>
+                <Loading className="mt-px"/>
+              </td>
+            </tr>)}
+        </Table.Head>
+        <Table.Body>
           {data?.map((item) => {
             const RowComponent = rowWrapper || Fragment;
             return (<RowComponent key={item[idAccessor]} {...(RowComponent !== Fragment
                 ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     { item: item }
-                : {})}>
-                <Table.Row onClick={handleRowClick(item)}>
+                : {})}>
+                <Table.Row onClick={handleRowClick(item)}>
                   {columns.map((column, i) => {
                     const value = column.accessor
                         ? item[column.accessor]
@@ -112,44 +112,44 @@ export default function DataTable({ title, subtitle, headerContent, data, idAcce
                             (typeof column.title === "string" ? column.title : i)} className={column.cellClassName} title={column.cellClassName?.includes("max-w") &&
                             typeof value === "string"
                             ? value
-                            : undefined}>
-                        {value}
+                            : undefined}>
+                        {value}
                       </Table.Cell>);
-                })}
-                  {actions && (<Table.Cell actions>
+                })}
+                  {actions && (<Table.Cell actions>
                       {actions.map((action, i) => {
                         const ActionComponent = action.wrapper || Fragment;
                         return (<ActionComponent key={i} {...(ActionComponent !== Fragment
                             ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                 { item: item }
-                            : {})}>
+                            : {})}>
                             <Table.ActionButton title={action.title} onClick={() => action.onClick?.(item)} href={typeof action.href === "function"
                                 ? action.href?.(item)
-                                : action.href} target={action.target}>
-                              {action.icon}
-                            </Table.ActionButton>
+                                : action.href} target={action.target}>
+                              {action.icon}
+                            </Table.ActionButton>
                           </ActionComponent>);
-                    })}
-                    </Table.Cell>)}
-                </Table.Row>
+                    })}
+                    </Table.Cell>)}
+                </Table.Row>
               </RowComponent>);
-        })}
-          {isLoading && !data?.length && (<Table.Row>
+        })}
+          {isLoading && !data?.length && (<Table.Row>
               {columns.map((column, i) => (<Table.Cell key={column.id ||
-                    (typeof column.title === "string" ? column.title : i)}>
-                  <Skeleton className="h-3"/>
-                </Table.Cell>))}
-              {actions && (<Table.Cell actions>
-                  <Skeleton className="inline-block h-3 w-6"/>
-                </Table.Cell>)}
-            </Table.Row>)}
-          {!isLoading && !data?.length && (<Table.Row>
-              <Table.Cell colSpan={columns.length + (actions ? 1 : 0)}>
-                <Text variant="secondary">{noRecordsText}</Text>
-              </Table.Cell>
-            </Table.Row>)}
-        </Table.Body>
-      </Table>
-      {pagination ? (<Table.FooterWithPagination totalItems={totalItems} itemsPerPage={itemsPerPage} currentPage={currentPage} onChangePage={onChangePage} previousText={previousText} nextText={nextText} showingText={showingText} toText={toText} ofText={ofText} resultsText={resultsText}/>) : undefined}
+                    (typeof column.title === "string" ? column.title : i)}>
+                  <Skeleton className="h-3"/>
+                </Table.Cell>))}
+              {actions && (<Table.Cell actions>
+                  <Skeleton className="inline-block h-3 w-6"/>
+                </Table.Cell>)}
+            </Table.Row>)}
+          {!isLoading && !data?.length && (<Table.Row>
+              <Table.Cell colSpan={columns.length + (actions ? 1 : 0)}>
+                <Text variant="secondary">{noRecordsText}</Text>
+              </Table.Cell>
+            </Table.Row>)}
+        </Table.Body>
+      </Table>
+      {pagination ? (<Table.FooterWithPagination totalItems={totalItems} itemsPerPage={itemsPerPage} currentPage={currentPage} onChangePage={onChangePage} previousText={previousText} nextText={nextText} showingText={showingText} toText={toText} ofText={ofText} resultsText={resultsText}/>) : undefined}
     </Stack>);
 }

package/components/Table/Table.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import TableActionButton from "./TableActionButton";
 import TableBody from "./TableBody";
 import TableCell from "./TableCell";

package/components/Table/Table.jsx

@@ -10,15 +10,15 @@ import TableFooterWithPagination from "./TableFooterWithPagination";
 export default function Table({ children, className, hideBorder, autoHeight, }) {
     return (<div className={clsx("overflow-hidden bg-white dark:bg-zinc-800", {
             "relative flex-1": autoHeight,
-            "shadow-sm ring-1 ring-black/5 dark:ring-white/10 md:rounded-lg": !hideBorder,
-        }, className)}>
+            "shadow-sm ring-1 ring-black/5 md:rounded-lg dark:ring-white/10": !hideBorder,
+        }, className)}>
       <div className={clsx("overflow-auto", {
             "absolute inset-0": autoHeight,
-        })}>
-        <table className={clsx("w-full max-w-full divide-y divide-zinc-300 dark:divide-zinc-600")}>
-          {children}
-        </table>
-      </div>
+        })}>
+        <table className={clsx("w-full max-w-full divide-y divide-zinc-300 dark:divide-zinc-600")}>
+          {children}
+        </table>
+      </div>
     </div>);
 }
 Table.Row = TableRow;

package/components/Table/TableActionButton.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
-import { ButtonProps } from "../Button/Button";
+import { type ReactNode } from "react";
+import { type ButtonProps } from "../Button/Button";
 export type TableActionButtonProps<T extends HTMLElement = HTMLButtonElement> = {
     title?: ReactNode;
 } & ButtonProps<T>;

package/components/Table/TableActionButton.jsx

@@ -1,6 +1,6 @@
 import clsx from "../../utils/clsx";
 import { cloneElement, } from "react";
-import Button from "../Button/Button";
+import Button, {} from "../Button/Button";
 import Tooltip from "../Tooltip";
 export default function TableActionButton({ children, className, title, onClick, ...props }) {
     const handleClick = (e) => {
@@ -8,10 +8,10 @@ export default function TableActionButton({ children, className, title, onClick,
         onClick?.(e);
     };
     const child = children;
-    const button = (<Button icon variant="text" className={clsx("p-1!", className)} onClick={handleClick} {...props}>
+    const button = (<Button icon variant="text" className={clsx("p-1!", className)} onClick={handleClick} {...props}>
       {cloneElement(child, {
             className: clsx("h-[20px]! w-[20px]!", child.props.className),
-        })}
+        })}
     </Button>);
     if (title) {
         return <Tooltip content={title}>{button}</Tooltip>;

package/components/Table/TableBody.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 export type TableBodyProps = {
     children?: ReactNode;
     className?: string;

package/components/Table/TableBody.jsx

@@ -2,9 +2,9 @@ import { useMemo } from "react";
 import TableHeadContext from "./TableHeadContext";
 import clsx from "../../utils/clsx";
 export default function TableBody({ children, className }) {
-    return (<TableHeadContext.Provider value={useMemo(() => ({ isHead: false, sticky: false }), [])}>
-      <tbody className={clsx("divide-y divide-zinc-200 bg-white dark:divide-zinc-700 dark:bg-zinc-800 [&_tr:last-of-type]:border-b [&_tr:last-of-type]:border-zinc-200 dark:[&_tr:last-of-type]:border-zinc-700", className)}>
-        {children}
-      </tbody>
+    return (<TableHeadContext.Provider value={useMemo(() => ({ isHead: false, sticky: false }), [])}>
+      <tbody className={clsx("divide-y divide-zinc-200 bg-white dark:divide-zinc-700 dark:bg-zinc-800 [&_tr:last-of-type]:border-b [&_tr:last-of-type]:border-zinc-200 dark:[&_tr:last-of-type]:border-zinc-700", className)}>
+        {children}
+      </tbody>
     </TableHeadContext.Provider>);
 }

package/components/Table/TableCell.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 export type TableCellProps = {
     children?: ReactNode;
     className?: string;

package/components/Table/TableCell.jsx

@@ -8,11 +8,11 @@ export default function TableCell({ children, className, actions, colSpan, title
         "py-0.5 text-right pr-2.5 sm:pr-5": actions,
     });
     if (isHead) {
-        return (<th className={clsx(commonClassName, "sticky left-0 bg-zinc-50 py-2 text-left font-semibold text-zinc-900 dark:bg-zinc-900 dark:text-zinc-50", className)} colSpan={colSpan} title={title}>
-        {children}
+        return (<th className={clsx(commonClassName, "sticky left-0 bg-zinc-50 py-2 text-left font-semibold text-zinc-900 dark:bg-zinc-900 dark:text-zinc-50", className)} colSpan={colSpan} title={title}>
+        {children}
       </th>);
     }
-    return (<td className={clsx(commonClassName, "whitespace-nowrap text-zinc-500 dark:text-zinc-300", className)} colSpan={colSpan} title={title}>
-      {children}
+    return (<td className={clsx(commonClassName, "whitespace-nowrap text-zinc-500 dark:text-zinc-300", className)} colSpan={colSpan} title={title}>
+      {children}
     </td>);
 }

package/components/Table/TableFooter.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 export interface TableFooterProps {
     children?: ReactNode;
 }

package/components/Table/TableFooter.jsx

@@ -1,5 +1,5 @@
 export default function TableFooter({ children }) {
-    return (<div className="flex items-center justify-between border border-x-0 border-zinc-200 bg-white p-3 sm:border-x sm:px-5 md:rounded-lg dark:border-white/10 dark:bg-zinc-900">
-      {children}
+    return (<div className="flex items-center justify-between border border-x-0 border-zinc-200 bg-white p-3 sm:border-x sm:px-5 md:rounded-lg dark:border-white/10 dark:bg-zinc-900">
+      {children}
     </div>);
 }

package/components/Table/TableHead.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 export type TableHeadProps = {
     children?: ReactNode;
 };

package/components/Table/TableHead.jsx

@@ -1,9 +1,9 @@
 import { useMemo } from "react";
 import TableHeadContext from "./TableHeadContext";
 export default function TableHead({ children }) {
-    return (<TableHeadContext.Provider value={useMemo(() => ({ isHead: true }), [])}>
-      <thead className="sticky top-0 bg-zinc-50 dark:bg-zinc-900">
-        {children}
-      </thead>
+    return (<TableHeadContext.Provider value={useMemo(() => ({ isHead: true }), [])}>
+      <thead className="sticky top-0 bg-zinc-50 dark:bg-zinc-900">
+        {children}
+      </thead>
     </TableHeadContext.Provider>);
 }

package/components/Table/TableHeader.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 export type TableHeaderProps = {
     title?: ReactNode;
     subtitle?: ReactNode;

package/components/Table/TableHeader.jsx

@@ -1,15 +1,15 @@
 import Text from "../Text";
 import Stack from "../Stack";
 export default function TableHeader({ title, subtitle, children, }) {
-    return (<div className="px-4 md:px-0">
-      <div className="sm:flex sm:items-center">
-        {(title || subtitle) && (<Stack className="sm:flex-auto">
-            {title && (<Text variant="label" size="lg">
-                {title}
-              </Text>)}
-            {subtitle && <Text variant="secondary">{subtitle}</Text>}
-          </Stack>)}
-        {children && (<div className="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">{children}</div>)}
-      </div>
+    return (<div className="px-4 md:px-0">
+      <div className="sm:flex sm:items-center">
+        {(title || subtitle) && (<Stack className="sm:flex-auto">
+            {title && (<Text variant="label" size="lg">
+                {title}
+              </Text>)}
+            {subtitle && <Text variant="secondary">{subtitle}</Text>}
+          </Stack>)}
+        {children && (<div className="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">{children}</div>)}
+      </div>
     </div>);
 }

package/components/Table/TableRow.d.ts

@@ -1,4 +1,4 @@
-import { MouseEventHandler, ReactNode } from "react";
+import type { MouseEventHandler, ReactNode } from "react";
 export type TableRowProps = {
     children?: ReactNode;
     onClick?: MouseEventHandler<HTMLTableRowElement>;

package/components/Table/TableRow.jsx

@@ -2,8 +2,8 @@ import clsx from "../../utils/clsx";
 function TableRow({ children, onClick, className, ...props }) {
     return (<tr onClick={onClick} className={clsx({
             "group/row cursor-pointer hover:bg-black/5 dark:hover:bg-white/5": !!onClick,
-        }, className)} {...props}>
-      {children}
+        }, className)} {...props}>
+      {children}
     </tr>);
 }
 export default TableRow;

package/components/Tabs/Tabs.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
-import { ButtonProps } from "../Button";
+import type { ReactNode } from "react";
+import { type ButtonProps } from "../Button";
 export default function Tabs({ children, className, }: {
     children: ReactNode;
     className?: string;

package/components/Tabs/Tabs.jsx

@@ -1,13 +1,13 @@
 import clsx from "../../utils/clsx";
-import Button from "../Button";
+import Button, {} from "../Button";
 export default function Tabs({ children, className, }) {
     return <div className={clsx("ui-tabs", className)}>{children}</div>;
 }
 export function Tab({ children, selected, onClick, className, ...props }) {
-    return (<div className="relative">
-      <Button className={clsx("ui-tabs-tab", className)} data-selected={selected ? "" : undefined} onClick={onClick} variant="custom" {...props}>
-        {children}
-      </Button>
-      {selected && <div className="ui-tabs-indicator"/>}
+    return (<div className="relative">
+      <Button className={clsx("ui-tabs-tab", className)} data-selected={selected ? "" : undefined} onClick={onClick} variant="custom" {...props}>
+        {children}
+      </Button>
+      {selected && <div className="ui-tabs-indicator"/>}
     </div>);
 }

package/components/TabsSwitcher/Tab.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 /**
  * Tab represents an individual tab. When active,
  * it renders an animated rounded background using the latest motion package.

package/components/TabsSwitcher/TabsSwitcher.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import { type ReactElement } from "react";
 type TabElement = ReactElement<{
     value: string;
     active?: boolean;

package/components/Text/Text.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, DetailedHTMLProps, HTMLAttributes } from "react";
+import type { ComponentProps, DetailedHTMLProps, HTMLAttributes } from "react";
 import NextLink from "next/link";
 export declare const defaultTextStyles: {
     variant: {

package/components/Text/Text.jsx

@@ -1,4 +1,5 @@
 import clsx from "../../utils/clsx";
+import NextLink from "next/link";
 import Link from "../Link";
 export const defaultTextStyles = {
     variant: {

package/components/Textarea/Textarea.d.ts

@@ -1,5 +1,5 @@
-import { InputProps } from "../Input";
-import { TextareaAutosizeProps } from "react-textarea-autosize/dist/declarations/src";
+import { type InputProps } from "../Input";
+import type { TextareaAutosizeProps } from "react-textarea-autosize";
 export type TextareaProps = InputProps<false> & Partial<Pick<TextareaAutosizeProps, "maxRows" | "minRows" | "onHeightChange" | "cacheMeasurements">>;
 declare function Textarea(props: TextareaProps): import("react").JSX.Element;
 export default Textarea;

package/components/Textarea/Textarea.jsx

@@ -1,4 +1,4 @@
-import Input from "../Input";
+import Input, {} from "../Input";
 import TextareaAutosize from "react-textarea-autosize";
 function Textarea(props) {
     return <Input as={TextareaAutosize} {...props}/>;

package/components/Tooltip/Tooltip.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, Ref } from "react";
+import type { ReactNode, Ref } from "react";
 declare function Tooltip({ children, content, side, delayDuration, className, arrowClassName, ref, }: {
     children?: ReactNode;
     content?: ReactNode;

package/components/Tooltip/Tooltip.jsx

@@ -4,18 +4,18 @@ function Tooltip({ children, content, side, delayDuration, className, arrowClass
     if (!content) {
         return <>{children}</>;
     }
-    return (<RTooltip.Provider>
-      <RTooltip.Root delayDuration={delayDuration}>
-        <RTooltip.Trigger asChild ref={ref}>
-          {children}
-        </RTooltip.Trigger>
-        <RTooltip.Portal>
-          <RTooltip.Content className={clsx("z-20 rounded-sm bg-zinc-950 px-2 py-1 text-center text-sm text-zinc-50 shadow-sm", "dark:bg-zinc-50 dark:text-zinc-950", "data-[state=closed]:animate-fade-out data-[state=delayed-open]:data-[side=bottom]:animate-elastic-slide-up-and-fade data-[state=delayed-open]:data-[side=left]:animate-elastic-slide-right-and-fade data-[state=delayed-open]:data-[side=right]:animate-elastic-slide-left-and-fade data-[state=delayed-open]:data-[side=top]:animate-elastic-slide-down-and-fade will-change-[transform,opacity]", className)} sideOffset={5} side={side}>
-            {content}
-            <RTooltip.Arrow className={clsx("fill-zinc-950 dark:fill-zinc-50", arrowClassName)}/>
-          </RTooltip.Content>
-        </RTooltip.Portal>
-      </RTooltip.Root>
+    return (<RTooltip.Provider>
+      <RTooltip.Root delayDuration={delayDuration}>
+        <RTooltip.Trigger asChild ref={ref}>
+          {children}
+        </RTooltip.Trigger>
+        <RTooltip.Portal>
+          <RTooltip.Content className={clsx("z-20 rounded-sm bg-zinc-950 px-2 py-1 text-center text-sm text-zinc-50 shadow-sm", "dark:bg-zinc-50 dark:text-zinc-950", "data-[state=closed]:animate-fade-out data-[state=delayed-open]:data-[side=bottom]:animate-elastic-slide-up-and-fade data-[state=delayed-open]:data-[side=left]:animate-elastic-slide-right-and-fade data-[state=delayed-open]:data-[side=right]:animate-elastic-slide-left-and-fade data-[state=delayed-open]:data-[side=top]:animate-elastic-slide-down-and-fade will-change-[transform,opacity]", className)} sideOffset={5} side={side}>
+            {content}
+            <RTooltip.Arrow className={clsx("fill-zinc-950 dark:fill-zinc-50", arrowClassName)}/>
+          </RTooltip.Content>
+        </RTooltip.Portal>
+      </RTooltip.Root>
     </RTooltip.Provider>);
 }
 export default Tooltip;

package/components/VisibilityActivatedButton/VisibilityActivatedButton.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps } from "react";
+import { type ComponentProps } from "react";
 import Button from "../Button";
 export default function VisibilityActivatedButton({ rootMargin, threshold, root, ...props }: ComponentProps<typeof Button> & {
     root?: Element | Document | null;

package/form.d.ts

@@ -1,7 +1,7 @@
-import { FormEvent } from "react";
-import { ArrayKey, IsTuple, TupleKeys } from "react-hook-form/dist/types/path/common";
-import { Get, PartialDeep, RequiredDeep, WritableDeep } from "type-fest";
-import { DeepPartial } from "redux";
+import { type FormEvent } from "react";
+import type { ArrayKey, IsTuple, TupleKeys } from "react-hook-form/dist/types/path/common";
+import type { Get, PartialDeep, RequiredDeep, WritableDeep } from "type-fest";
+import type { DeepPartial } from "redux";
 type Any = any;
 export type DeepMapValues<T, V> = {
     [K in keyof T]: T[K] extends Array<Any> ? DeepMapValues<T[K][0], V> & V : T[K] extends object ? DeepMapValues<T[K], V> : V;

package/form2.d.ts

@@ -1,4 +1,4 @@
-import { ControllerFieldState, ControllerProps, ControllerRenderProps, FieldPath, FieldValues, UseFormProps, UseFormReturn, UseFormStateReturn } from "react-hook-form";
+import { type ControllerFieldState, type ControllerProps, type ControllerRenderProps, type FieldPath, type FieldValues, type UseFormProps, type UseFormReturn, type UseFormStateReturn } from "react-hook-form";
 import * as z from "zod";
 import React from "react";
 export declare function useForm<TSchema extends z.Schema<any, any>, TFieldValues extends FieldValues = z.infer<TSchema>>({ schema, ...props }: UseFormProps<TFieldValues> & {

package/form2.jsx

@@ -1,5 +1,6 @@
 import { Controller as RHFController, useForm as useRHForm, } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
 import React, { useMemo } from "react";
 import { get } from "lodash-es";
 export function useForm({ schema, ...props }) {

package/hooks/useDebounceEffect.d.ts

@@ -1,2 +1,2 @@
-import { DependencyList } from "react";
+import { type DependencyList } from "react";
 export default function useDebounceEffect(fn: () => void, waitTime: number, deps?: DependencyList): void;

package/hooks/useDebouncedValue.d.ts

@@ -1,2 +1,2 @@
-import { StringValue } from "ms";
+import { type StringValue } from "ms";
 export default function useDebounce<T = unknown>(value: T, delay: StringValue | number): T;

package/hooks/useDebouncedValue.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import ms from "ms";
+import ms, {} from "ms";
 export default function useDebounce(value, delay) {
     const [debouncedValue, setDebouncedValue] = useState(value);
     useEffect(() => {

package/hooks/useLagRadar.jsx

@@ -19,25 +19,25 @@ function lagRadar(config = {}) {
     inset = 3, // circle inset px
     parent = document.body, // DOM node to attach to
      } = config;
-    const styles = document.createTextNode(`
-    .lagRadar {
-      position: fixed;
-      bottom: 0.5rem;
-      right: 0.5rem;
-    }
-    .lagRadar {
-      pointer-events: none;
-    }
-    .lagRadar-sweep > * {
-      shape-rendering: crispEdges;
-    }
-    .lagRadar-face {
-      fill: transparent;
-    }
-    .lagRadar-hand {
-      stroke-width: 4px;
-      stroke-linecap: round;
-    }
+    const styles = document.createTextNode(`
+    .lagRadar {
+      position: fixed;
+      bottom: 0.5rem;
+      right: 0.5rem;
+    }
+    .lagRadar {
+      pointer-events: none;
+    }
+    .lagRadar-sweep > * {
+      shape-rendering: crispEdges;
+    }
+    .lagRadar-face {
+      fill: transparent;
+    }
+    .lagRadar-hand {
+      stroke-width: 4px;
+      stroke-linecap: round;
+    }
   `);
     function $svg(tag, props = {}, children = []) {
         const el = document.createElementNS("http://www.w3.org/2000/svg", tag);

package/package.json

@@ -4,6 +4,5 @@
     "type": "git",
     "url": "https://github.com/majapisoftwares/ui.git"
   },
-  "version": "4.1.17",
-  "type": "module"
+  "version": "4.2.0"
 }