@majapisoftwares/ui 4.1.17 → 4.3.0

package/bootstrap/AppProps.d.ts

@@ -1,10 +1,9 @@
-import { AppProps as NAppProps } from "next/app";
-import { NextComponentType, NextPageContext } from "next/dist/shared/lib/utils";
-import { ReactNode } from "react";
-type AppProps<LayoutProps = void> = Omit<NAppProps, "Component"> & {
+import type { AppProps as NAppProps } from "next/app";
+import type { NextComponentType, NextPageContext } from "next/dist/shared/lib/utils";
+import type { ReactNode } from "react";
+export type AppProps<LayoutProps = void> = Omit<NAppProps, "Component"> & {
     Component: NextComponentType<NextPageContext, any, any> & {
         getLayout: (children: ReactNode, props: LayoutProps) => ReactNode;
         layoutProps: LayoutProps;
     };
 };
-export default AppProps;

package/components/Accordion/Accordion.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 declare function Accordion({ children, className, type, }: {
     children?: ReactNode;
     className?: string;

package/components/Alert/Alert.d.ts

@@ -1,4 +1,4 @@
-import { DetailedHTMLProps, HTMLAttributes, ReactNode } from "react";
+import type { DetailedHTMLProps, HTMLAttributes, ReactNode } from "react";
 declare const styles: {
     variants: {
         default: {

package/components/Alert/Alert.jsx

@@ -30,24 +30,24 @@ const icons = {
 };
 export default function Alert({ variant = "default", title, children, className, actions, ...props }) {
     const Icon = icons[variant];
-    return (<div className={clsx("rounded-md p-4", styles.variants[variant].root, className)} {...props}>
-      <div className="flex">
-        <div className="shrink-0">
-          <Icon className={clsx("h-5 w-5", styles.variants[variant].icon)} aria-hidden="true"/>
-        </div>
-        <div className="ml-3 flex w-full flex-col items-start justify-between sm:flex-row">
-          <div>
-            <h3 className={clsx("text-sm font-medium", styles.variants[variant].title)}>
-              {title}
-            </h3>
-            {children && (<div className={clsx("mt-2 text-sm", styles.variants[variant].content)}>
-                {children}
-              </div>)}
-          </div>
-          {actions && (<Group className={clsx("-mx-4 -mb-2 mt-1 sm:-mx-2 sm:-my-2", styles.variants[variant].content)}>
-              {actions}
-            </Group>)}
-        </div>
-      </div>
+    return (<div className={clsx("rounded-md p-4", styles.variants[variant].root, className)} {...props}>
+      <div className="flex">
+        <div className="shrink-0">
+          <Icon className={clsx("h-5 w-5", styles.variants[variant].icon)} aria-hidden="true"/>
+        </div>
+        <div className="ml-3 flex w-full flex-col items-start justify-between sm:flex-row">
+          <div>
+            <h3 className={clsx("text-sm font-medium", styles.variants[variant].title)}>
+              {title}
+            </h3>
+            {children && (<div className={clsx("mt-2 text-sm", styles.variants[variant].content)}>
+                {children}
+              </div>)}
+          </div>
+          {actions && (<Group className={clsx("-mx-4 mt-1 -mb-2 sm:-mx-2 sm:-my-2", styles.variants[variant].content)}>
+              {actions}
+            </Group>)}
+        </div>
+      </div>
     </div>);
 }

package/components/Autocomplete/Autocomplete.d.ts

@@ -1,4 +1,4 @@
-import { UnstyledAutocompleteProps } from "../Autocomplete/UnstyledAutocomplete";
+import { type UnstyledAutocompleteProps } from "../Autocomplete/UnstyledAutocomplete";
 export type AutocompleteProps<T extends {
     _id: string;
 }> = UnstyledAutocompleteProps<T>;

package/components/Autocomplete/Autocomplete.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import clsx from "../../utils/clsx";
-import UnstyledAutocomplete from "../Autocomplete/UnstyledAutocomplete";
+import UnstyledAutocomplete, {} from "../Autocomplete/UnstyledAutocomplete";
 import Input from "../Input";
 const defaultMenuItemsClassName = "z-10 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-hidden dark:bg-zinc-800";
 export default function Autocomplete({ query: defaultQuery = "", onChangeQuery, emptyText = "No item found.", className, ...props }) {
@@ -17,7 +17,7 @@ export default function Autocomplete({ query: defaultQuery = "", onChangeQuery,
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [onChangeQuery, query]);
-    return (<div className={clsx("relative", className)}>
-      <UnstyledAutocomplete {...props} as={Input} query={query} onChangeQuery={setQuery} emptyTextClassName={clsx(defaultMenuItemsClassName, "p-4 text-sm text-zinc-500 dark:text-zinc-400 mt-1 absolute w-full")} optionsClassName={clsx(defaultMenuItemsClassName, "max-h-72 scroll-py-2 overflow-y-auto py-2 text-sm text-zinc-800 dark:text-zinc-200 absolute z-10 mt-1 w-full")} optionClassName={({ active }) => clsx("cursor-default select-none px-4 py-2 data-disabled:cursor-not-allowed data-disabled:opacity-50", active && "bg-primary-600 text-white")} emptyText={emptyText}/>
+    return (<div className={clsx("relative", className)}>
+      <UnstyledAutocomplete {...props} as={Input} query={query} onChangeQuery={setQuery} emptyTextClassName={clsx(defaultMenuItemsClassName, "p-4 text-sm text-zinc-500 dark:text-zinc-400 mt-1 absolute w-full")} optionsClassName={clsx(defaultMenuItemsClassName, "max-h-72 scroll-py-2 overflow-y-auto py-2 text-sm text-zinc-800 dark:text-zinc-200 absolute z-10 mt-1 w-full")} optionClassName={({ active }) => clsx("cursor-default select-none px-4 py-2 data-disabled:cursor-not-allowed data-disabled:opacity-50", active && "bg-primary-600 text-white")} emptyText={emptyText}/>
     </div>);
 }

package/components/Autocomplete/UnstyledAutocomplete.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
-import Input, { UnstyledInputProps } from "../Input";
+import { type ReactNode } from "react";
+import Input, { type UnstyledInputProps } from "../Input";
 export interface UnstyledAutocompleteProps<T extends {
     _id: string;
 }> extends Omit<UnstyledInputProps<false>, "as" | "onSelect" | "inputClassName" | "innerClassName" | "value"> {

package/components/Autocomplete/UnstyledAutocomplete.jsx

@@ -1,7 +1,7 @@
 import { Combobox } from "@headlessui/react";
 import Loading from "../Loading";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { defaultInputClassName, defaultLeadingInputClassName, defaultTrailingClassName, defaultTrailingInputClassName, UnstyledInput, } from "../Input";
+import { useCallback, useEffect, useMemo, useState, } from "react";
+import Input, { defaultInputClassName, defaultLeadingInputClassName, defaultTrailingClassName, defaultTrailingInputClassName, UnstyledInput, } from "../Input";
 import clsx from "../../utils/clsx";
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
 import { useUpdateEffect } from "react-use";
@@ -31,14 +31,13 @@ export default function UnstyledAutocomplete({ placeholder, emptyText, items = [
                 .toLowerCase()
                 .includes(query.toLowerCase()))), [filterFunction, filterProperty, items, query]);
     trailing = loading ? (<Loading />) : (trailing ||
-        (!readOnly ? (<Combobox.Button className="pointer-events-auto -mr-1 flex items-center">
-        <ChevronUpDownIcon className="h-5 w-5 text-zinc-400" aria-hidden="true"/>
+        (!readOnly ? (<Combobox.Button className="pointer-events-auto -mr-1 flex items-center">
+        <ChevronUpDownIcon className="h-5 w-5 text-zinc-400" aria-hidden="true"/>
       </Combobox.Button>) : undefined));
     const ComponentInput = as || UnstyledInput;
     const doRender = useCallback((item) => renderFunction ? renderFunction(item) : item[renderProperty], [renderFunction, renderProperty]);
     useUpdateEffect(() => {
         onSelect?.(selectedItem);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [selectedItem]);
     useEffect(() => {
         if (selectedItem !== value) {
@@ -46,28 +45,28 @@ export default function UnstyledAutocomplete({ placeholder, emptyText, items = [
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
-    return (<Combobox onChange={setSelectedItem} value={selectedItem} nullable>
-      {({ open }) => (<div>
-          <div className="relative">
+    return (<Combobox onChange={setSelectedItem} value={selectedItem} nullable>
+      {({ open }) => (<div>
+          <div className="relative">
             <ComponentInput 
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-        {...props} as={Combobox.Input} placeholder={placeholder} onChange={(event) => setQuery(event.target.value)} trailing={trailing} trailingClassName={clsx(defaultTrailingClassName, trailingClassName)} inputClassName={clsx(defaultInputClassName, inputElementClassName)} innerClassName={inputInnerClassName} trailingInputClassName={clsx(defaultTrailingInputClassName, trailingInputClassName)} leadingInputClassName={clsx(defaultLeadingInputClassName, leadingInputClassName)} displayValue={displayValue} readOnly={readOnly}/>
-          </div>
-
-          {filteredItems.length > 0 && !readOnly && (<Combobox.Options static={isStatic} className={optionsClassName}>
+        {...props} as={Combobox.Input} placeholder={placeholder} onChange={(event) => setQuery(event.target.value)} trailing={trailing} trailingClassName={clsx(defaultTrailingClassName, trailingClassName)} inputClassName={clsx(defaultInputClassName, inputElementClassName)} innerClassName={inputInnerClassName} trailingInputClassName={clsx(defaultTrailingInputClassName, trailingInputClassName)} leadingInputClassName={clsx(defaultLeadingInputClassName, leadingInputClassName)} displayValue={displayValue} readOnly={readOnly}/>
+          </div>
+
+          {filteredItems.length > 0 && !readOnly && (<Combobox.Options static={isStatic} className={optionsClassName}>
               {(itemsRenderLimit
                     ? take(filteredItems, itemsRenderLimit)
-                    : filteredItems).map((item) => (<Combobox.Option key={item._id} value={item} className={({ active, selected }) => clsx("flex gap-2", optionClassName && optionClassName({ active, selected }))} disabled={disabledItems?.includes(item._id)} data-disabled={disabledItems?.includes(item._id) ? "" : undefined}>
-                  {({ selected, active }) => (<>
-                      {selected ? (<span className={clsx("flex items-center", active ? "text-white" : "text-primary-500")}>
-                          <CheckIcon className="h-5 w-5" aria-hidden="true"/>
-                        </span>) : null}
-                      {doRender(item)}
-                    </>)}
-                </Combobox.Option>))}
-            </Combobox.Options>)}
-
-          {open && emptyText && query !== "" && filteredItems.length === 0 && (<p className={emptyTextClassName}>{emptyText}</p>)}
-        </div>)}
+                    : filteredItems).map((item) => (<Combobox.Option key={item._id} value={item} className={({ active, selected }) => clsx("flex gap-2", optionClassName && optionClassName({ active, selected }))} disabled={disabledItems?.includes(item._id)} data-disabled={disabledItems?.includes(item._id) ? "" : undefined}>
+                  {({ selected, active }) => (<>
+                      {selected ? (<span className={clsx("flex items-center", active ? "text-white" : "text-primary-500")}>
+                          <CheckIcon className="h-5 w-5" aria-hidden="true"/>
+                        </span>) : null}
+                      {doRender(item)}
+                    </>)}
+                </Combobox.Option>))}
+            </Combobox.Options>)}
+
+          {open && emptyText && query !== "" && filteredItems.length === 0 && (<p className={emptyTextClassName}>{emptyText}</p>)}
+        </div>)}
     </Combobox>);
 }

package/components/Badge/Badge.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 declare const colorMap: {
     default: {
         badge: string;

package/components/Badge/Badge.jsx

@@ -1,6 +1,7 @@
 import clsx from "../../utils/clsx";
 import Link from "next/link";
-import { useCallback } from "react";
+import { useCallback, } from "react";
+import preventDefault from "../../utils/preventDefault";
 const colorMap = {
     default: {
         badge: "bg-zinc-200 dark:bg-zinc-700 text-zinc-700 dark:text-zinc-100",
@@ -37,14 +38,14 @@ function Badge({ color = "default", size = "md", className, children, onActionCl
         e.preventDefault();
         onActionClick?.();
     }, [onActionClick]);
-    return (<Component className={clsx("inline-flex items-center py-0.5 font-medium", sizeMap.badge[size], colorMap[color].badge, className)} href={href} shallow={shallow} onClick={onClick} {...props}>
-      {children}
-      {onActionClick && (<button type="button" className={clsx("ml-0.5 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full focus:text-white focus:outline-hidden", sizeMap.button[size], colorMap[color].button)} onClick={handleActionClick}>
-          <span className="sr-only">Delete</span>
-          <svg className="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
-            <path strokeLinecap="round" strokeWidth="1.5" d="M1 1l6 6m0-6L1 7"/>
-          </svg>
-        </button>)}
+    return (<Component className={clsx("inline-flex items-center py-0.5 font-medium", sizeMap.badge[size], colorMap[color].badge, className)} href={href} shallow={shallow} onClick={onClick} {...props}>
+      {children}
+      {onActionClick && (<div className={clsx("ml-1 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full focus:text-white focus:outline-hidden", sizeMap.button[size], colorMap[color].button)} onClick={handleActionClick} onPointerDown={preventDefault}>
+          <span className="sr-only">Remove</span>
+          <svg className="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
+            <path strokeLinecap="round" strokeWidth="1.5" d="M1 1l6 6m0-6L1 7"/>
+          </svg>
+        </div>)}
     </Component>);
 }
 export default Badge;

package/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import type { ReactElement } from "react";
 type BaseBreadcrumbPage = {
     href?: string;
     loading?: boolean;

package/components/Button/Button.d.ts

@@ -1,5 +1,5 @@
-import { UnstyledButtonProps } from "./UnstyledButton";
-import { ReactElement, Ref } from "react";
+import { type UnstyledButtonProps } from "./UnstyledButton";
+import { type ReactElement, type Ref } from "react";
 declare const styles: {
     root: string;
     variant: {

package/components/Button/Button.jsx

@@ -1,4 +1,4 @@
-import UnstyledButton from "./UnstyledButton";
+import UnstyledButton, {} from "./UnstyledButton";
 import clsx from "../../utils/clsx";
 import { cloneElement } from "react";
 import Loading from "../Loading";
@@ -102,11 +102,11 @@ const Button = ({ variant = "outlined", color = "default", size = "md", classNam
     }
     return (<UnstyledButton {...props} className={clsx(styles.root, styles.variant[variant], variant !== "custom" && styles.color[color], variant !== "custom" && styles.variantColor[`${variant}-${color}`], icon ? styles.icon[size].button : styles.size[size].button, rounded ? "rounded-full" : "rounded-sm", {
             [styles.disabled]: disabled,
-        }, className)} type={type} disabled={disabled}>
+        }, className)} type={type} disabled={disabled}>
       {leading &&
             cloneElement(leading, {
                 className: clsx(styles.icon[size].icon, styles.icon[size].leading, leading?.props?.className, leadingClassName),
-            })}
+            })}
       {!icon
             ? children
             : Array.isArray(children)
@@ -119,11 +119,11 @@ const Button = ({ variant = "outlined", color = "default", size = "md", classNam
                     return cloneElement(child, {
                         className: clsx(styles.icon[size].icon, child?.props?.className),
                     });
-                })()}
+                })()}
       {trailing &&
             cloneElement(trailing, {
                 className: clsx(styles.icon[size].icon, styles.icon[size].trailing, trailing?.props?.className, trailingClassName),
-            })}
+            })}
     </UnstyledButton>);
 };
 export default Button;

package/components/Carousel/Carousel.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
-import { EmblaOptionsType, EmblaPluginType } from "embla-carousel";
+import { type ReactNode } from "react";
+import type { EmblaOptionsType, EmblaPluginType } from "embla-carousel";
 export type CarouselProps = {
     children?: ReactNode;
     carouselClassName?: string;

package/components/Carousel/Carousel.jsx

@@ -30,23 +30,23 @@ export default function Carousel({ children, className, carouselClassName, navig
             }
         };
     }, [embla, width, height]);
-    return (<div data-axis={options.axis}>
-      <div className={clsx("overflow-hidden", className)} ref={mergeRefs([ref, emblaRef])}>
-        <div className={clsx("flex", carouselClassName)}>{children}</div>
-        {navigation && (<div className="flex h-full">
+    return (<div data-axis={options.axis}>
+      <div className={clsx("overflow-hidden", className)} ref={mergeRefs([ref, emblaRef])}>
+        <div className={clsx("flex", carouselClassName)}>{children}</div>
+        {navigation && (<div className="flex h-full">
             <Button icon variant="text" className={clsx({
                 hidden: !canScrollPrev,
-            })} disabled={!canScrollPrev} onClick={() => embla?.scrollPrev()}>
-              <ChevronLeftIcon />
-            </Button>
-            <div className="grow"/>
+            })} disabled={!canScrollPrev} onClick={() => embla?.scrollPrev()}>
+              <ChevronLeftIcon />
+            </Button>
+            <div className="grow"/>
             <Button icon variant="text" className={clsx({
                 hidden: !canScrollNext,
-            })} disabled={!canScrollNext} onClick={() => embla?.scrollNext()}>
-              <ChevronRightIcon />
-            </Button>
-          </div>)}
-      </div>
+            })} disabled={!canScrollNext} onClick={() => embla?.scrollNext()}>
+              <ChevronRightIcon />
+            </Button>
+          </div>)}
+      </div>
     </div>);
 }
 Carousel.Slide = CarouselSlide;

package/components/Checkbox/Checkbox.d.ts

@@ -1,4 +1,4 @@
-import { DetailedHTMLProps, InputHTMLAttributes, ReactNode } from "react";
+import { type DetailedHTMLProps, type InputHTMLAttributes, type ReactNode } from "react";
 export type CheckboxProps = {
     label?: ReactNode;
     description?: ReactNode;

package/components/Checkbox/Checkbox.jsx

@@ -28,18 +28,18 @@ function Checkbox({ id, label, description, className, labelClassName, descripti
             innerRef.current.indeterminate = !!indeterminate;
         }
     }, [indeterminate]);
-    return (<div className={clsx("relative flex items-start", className)}>
-      <div className="flex h-5 items-center">
-        <input {...props} id={id} aria-describedby={descriptionId} type={type} className={inputClassName} ref={mergeRefs([ref, innerRef])}/>
-      </div>
-      {(label || description) && (<div className={clsx("ml-3 text-sm", labelOuterClassName)}>
-          {label && (<label htmlFor={id} className={labelClassName}>
-              {label}
-            </label>)}
-          {description && (<p id={descriptionId} className={descriptionClassName}>
-              {description}
-            </p>)}
-        </div>)}
+    return (<div className={clsx("relative flex items-start", className)}>
+      <div className="flex h-5 items-center">
+        <input {...props} id={id} aria-describedby={descriptionId} type={type} className={inputClassName} ref={mergeRefs([ref, innerRef])}/>
+      </div>
+      {(label || description) && (<div className={clsx("ml-3 text-sm", labelOuterClassName)}>
+          {label && (<label htmlFor={id} className={labelClassName}>
+              {label}
+            </label>)}
+          {description && (<p id={descriptionId} className={descriptionClassName}>
+              {description}
+            </p>)}
+        </div>)}
     </div>);
 }
 export default Checkbox;

package/components/Code/Code.d.ts

@@ -1,4 +1,4 @@
-import { Language, PrismTheme } from "prism-react-renderer";
+import { type Language, type PrismTheme } from "prism-react-renderer";
 export type CodeProps = {
     children: string;
     language: Language;

package/components/Code/Code.jsx

@@ -1,25 +1,25 @@
 import { Fragment } from "react";
-import { Highlight } from "prism-react-renderer";
+import { Highlight, } from "prism-react-renderer";
 import clsx from "../../utils/clsx";
 import CopyButton from "../CopyButton";
 export default function Code({ children, language, className, copy, copyText, copiedText, theme, copyClassName, }) {
     return (<div className={clsx("group relative", className, {
             dark: !theme,
-        })}>
-      <div className="prose max-w-none">
-        <Highlight code={children.trimEnd()} language={language} theme={theme}>
-          {({ className, style, tokens, getTokenProps }) => (<pre className={className} style={style}>
-              <code>
-                {tokens.map((line, lineIndex) => (<Fragment key={lineIndex}>
+        })}>
+      <div className="prose max-w-none">
+        <Highlight code={children.trimEnd()} language={language} theme={theme}>
+          {({ className, style, tokens, getTokenProps }) => (<pre className={className} style={style}>
+              <code>
+                {tokens.map((line, lineIndex) => (<Fragment key={lineIndex}>
                     {line
                     .filter((token) => !token.empty)
-                    .map((token, tokenIndex) => (<span key={tokenIndex} {...getTokenProps({ token })}/>))}
-                    {"\n"}
-                  </Fragment>))}
-              </code>
-            </pre>)}
-        </Highlight>
-      </div>
-      {copy && (<CopyButton text={children} copyText={copyText} copiedText={copiedText} className={copyClassName}/>)}
+                    .map((token, tokenIndex) => (<span key={tokenIndex} {...getTokenProps({ token })}/>))}
+                    {"\n"}
+                  </Fragment>))}
+              </code>
+            </pre>)}
+        </Highlight>
+      </div>
+      {copy && (<CopyButton text={children} copyText={copyText} copiedText={copiedText} className={copyClassName}/>)}
     </div>);
 }

package/components/ConfirmationButton/ConfirmationButton.d.ts

@@ -1,6 +1,6 @@
-import { MenuProps } from "../Menu/Menu";
-import { ReactNode } from "react";
-import { ButtonProps } from "../Button";
+import { type MenuProps } from "../Menu/Menu";
+import type { ReactNode } from "react";
+import { type ButtonProps } from "../Button";
 export type ConfirmationButtonProps = {
     confirmation: string;
     label: ReactNode;

package/components/ConfirmationButton/ConfirmationButton.jsx

@@ -1,13 +1,13 @@
-import Menu from "../Menu/Menu";
-import Button from "../Button";
+import Menu, {} from "../Menu/Menu";
+import Button, {} from "../Button";
 export default function ConfirmationButton({ label, confirm, confirmation, onConfirm, loading, className, cancel = "Cancel", position, buttonClassName, buttonProps, menuProps, }) {
-    return (<Menu position={position} button={<Button color="error" loading={loading} className={buttonClassName} {...buttonProps}>
-          {label}
-        </Button>} className={className} {...menuProps}>
-      <Menu.Label>{confirmation}</Menu.Label>
-      <Menu.Item className="text-red-500!" onClick={onConfirm}>
-        {confirm || label}
-      </Menu.Item>
-      <Menu.Item>{cancel}</Menu.Item>
+    return (<Menu position={position} button={<Button color="error" loading={loading} className={buttonClassName} {...buttonProps}>
+          {label}
+        </Button>} className={className} {...menuProps}>
+      <Menu.Label>{confirmation}</Menu.Label>
+      <Menu.Item className="text-red-500!" onClick={onConfirm}>
+        {confirm || label}
+      </Menu.Item>
+      <Menu.Item>{cancel}</Menu.Item>
     </Menu>);
 }

package/components/ContextMenu/ContextMenu.d.ts

@@ -1,4 +1,4 @@
-import React, { ComponentProps } from "react";
+import React, { type ComponentProps } from "react";
 import * as RContextMenu from "@radix-ui/react-context-menu";
 declare function ContextMenuContent({ className, children, ...props }: ComponentProps<typeof RContextMenu.Content>): React.JSX.Element;
 declare function ContextMenuSeparator({ className, ...props }: ComponentProps<typeof RContextMenu.Separator>): React.JSX.Element;

package/components/ContextMenu/ContextMenu.jsx

@@ -7,10 +7,10 @@ import { dropdownCheckboxItemClassName, dropdownItemClassName, dropdownItemIndic
 import { modalContentClassName } from "../../styles/Modal.classNames";
 import { ChevronRightIcon } from "@heroicons/react/20/solid";
 function ContextMenuContent({ className, children, ...props }) {
-    return (<RContextMenu.Portal>
-      <RContextMenu.Content {...props} className={clsx(modalContentClassName, "ui-context-menu-content", className)}>
-        {children}
-      </RContextMenu.Content>
+    return (<RContextMenu.Portal>
+      <RContextMenu.Content {...props} className={clsx(modalContentClassName, "ui-context-menu-content", className)}>
+        {children}
+      </RContextMenu.Content>
     </RContextMenu.Portal>);
 }
 function ContextMenuSeparator({ className, ...props }) {
@@ -20,39 +20,39 @@ function ContextMenuItem({ className, href, ...props }) {
     const Wrapper = href ? Link : Fragment;
     return (
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    <Wrapper {...(href ? { href } : {})}>
-      <RContextMenu.Item {...props} className={clsx(dropdownItemClassName, "ui-context-menu-item", className)}/>
+    <Wrapper {...(href ? { href } : {})}>
+      <RContextMenu.Item {...props} className={clsx(dropdownItemClassName, "ui-context-menu-item", className)}/>
     </Wrapper>);
 }
 function ContextMenuItemIndicator({ className, ...props }) {
     return (<RContextMenu.ItemIndicator className={clsx(dropdownItemIndicatorClassName, "ui-context-menu-checkbox-item-indicator", className)} {...props}/>);
 }
 function ContextMenuCheckboxItem({ className, children, indicatorClassName, ...props }) {
-    return (<RContextMenu.CheckboxItem {...props} className={clsx(dropdownCheckboxItemClassName, "ui-context-menu-checkbox-item", className)}>
-      <ContextMenuItemIndicator className={clsx("ui-context-menu-checkbox-item-indicator", indicatorClassName)}>
-        <CheckIcon />
-      </ContextMenuItemIndicator>
-      {children}
+    return (<RContextMenu.CheckboxItem {...props} className={clsx(dropdownCheckboxItemClassName, "ui-context-menu-checkbox-item", className)}>
+      <ContextMenuItemIndicator className={clsx("ui-context-menu-checkbox-item-indicator", indicatorClassName)}>
+        <CheckIcon />
+      </ContextMenuItemIndicator>
+      {children}
     </RContextMenu.CheckboxItem>);
 }
 function ContextMenuSubContent({ className, children, sideOffset = 2, alignOffset = -4, ...props }) {
-    return (<RContextMenu.Portal>
-      <RContextMenu.SubContent sideOffset={sideOffset} alignOffset={alignOffset} {...props} className={clsx(modalContentClassName, "ui-context-menu-sub-content", className)}>
-        {children}
-      </RContextMenu.SubContent>
+    return (<RContextMenu.Portal>
+      <RContextMenu.SubContent sideOffset={sideOffset} alignOffset={alignOffset} {...props} className={clsx(modalContentClassName, "ui-context-menu-sub-content", className)}>
+        {children}
+      </RContextMenu.SubContent>
     </RContextMenu.Portal>);
 }
 function ContextMenuSubTrigger({ className, href, children, ...props }) {
     const Wrapper = href ? Link : Fragment;
     return (
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    <Wrapper {...(href ? { href } : {})}>
-      <RContextMenu.SubTrigger {...props} className={clsx(dropdownSubTriggerClassName, "ui-context-menu-sub-trigger", className)}>
-        {children}
-        <div className={clsx("absolute right-1.5 top-1.5 inline-flex items-center justify-center", "[&>svg]:h-4 [&>svg]:w-4")}>
-          <ChevronRightIcon />
-        </div>
-      </RContextMenu.SubTrigger>
+    <Wrapper {...(href ? { href } : {})}>
+      <RContextMenu.SubTrigger {...props} className={clsx(dropdownSubTriggerClassName, "ui-context-menu-sub-trigger", className)}>
+        {children}
+        <div className={clsx("absolute top-1.5 right-1.5 inline-flex items-center justify-center", "[&>svg]:h-4 [&>svg]:w-4")}>
+          <ChevronRightIcon />
+        </div>
+      </RContextMenu.SubTrigger>
     </Wrapper>);
 }
 const ContextMenu = {

package/components/DateInput/DateInput.d.ts

@@ -1,4 +1,4 @@
-import { InputProps } from "../Input";
+import { type InputProps } from "../Input";
 declare function DateInput({ readOnly, value, onValueChange, ref, ...props }: Omit<InputProps<false>, "value"> & {
     value?: string;
     onValueChange?: (value?: string) => void;

package/components/DateInput/DateInput.jsx

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import Input from "../Input";
+import Input, {} from "../Input";
 import { CalendarIcon } from "@heroicons/react/20/solid";
 import { useRefValue } from "./useRefValue";
 import dayjs from "dayjs";

package/components/DateInput/DateTimeInput.d.ts

@@ -1,3 +1,3 @@
-import { InputProps } from "../Input";
+import { type InputProps } from "../Input";
 declare function DateTimeInput({ readOnly, ref, ...props }: InputProps<false>): import("react").JSX.Element;
 export default DateTimeInput;

package/components/DateInput/DateTimeInput.jsx

@@ -1,4 +1,4 @@
-import Input from "../Input";
+import Input, {} from "../Input";
 import { CalendarIcon } from "@heroicons/react/20/solid";
 import { useRefValue } from "./useRefValue";
 function DateTimeInput({ readOnly, ref, ...props }) {

package/components/DateInput/useRefValue.d.ts

@@ -1,4 +1,4 @@
-import { Ref } from "react";
+import { type Ref } from "react";
 import "dayjs/locale/pt-br";
 export declare function parseDate(value: string): string;
 export declare function formatDate(value: string): string;

package/components/DatePicker/DatePicker.d.ts

@@ -1,7 +1,7 @@
-import React, { ComponentProps, ReactElement, ReactNode } from "react";
-import { DateRange, Matcher, ModifiersClassNames } from "react-day-picker";
+import React, { type ComponentProps, type ReactElement, type ReactNode } from "react";
+import type { DayPickerProps } from "react-day-picker";
+import { type DateRange, type Matcher, type ModifiersClassNames } from "react-day-picker";
 import Button from "../Button";
-import type { DayPickerProps } from "react-day-picker/src/types/props";
 export type { DateRange };
 export default function DatePicker({ value, onValueChange, children, buttonProps, fromDate, toDate, footer, monthFooter, modifiers, modifiersClassNames, disabled, defaultMonth, }: {
     value?: Date | string;

package/components/DatePicker/DatePicker.jsx

@@ -22,8 +22,8 @@ export default function DatePicker({ value, onValueChange, children, buttonProps
     const buttonText = useMemo(() => {
         return date ? dayjs(date).format("ll") : "";
     }, [date]);
-    const children2 = children ? (children(buttonText)) : (<Button {...buttonProps} leading={buttonProps?.leading || <CalendarIcon />} className={clsx(dayPickerButtonClassName, buttonProps?.className)}>
-      {buttonText}
+    const children2 = children ? (children(buttonText)) : (<Button {...buttonProps} leading={buttonProps?.leading || <CalendarIcon />} className={clsx(dayPickerButtonClassName, buttonProps?.className)}>
+      {buttonText}
     </Button>);
     const defaultDisabled = useMemo(() => [
         ...(fromDate
@@ -45,11 +45,11 @@ export default function DatePicker({ value, onValueChange, children, buttonProps
         setOpen(false);
         setDate(value);
     }, []);
-    return (<Popover.Root open={open} onOpenChange={setOpen}>
-      <Popover.Trigger asChild>{children2}</Popover.Trigger>
-      <Popover.Content>
-        <DayPicker mode="single" selected={date} onSelect={onSelect} showOutsideDays classNames={dayPickerClassNames} startMonth={fromDate} endMonth={toDate} footer={monthFooter} modifiers={modifiers} modifiersClassNames={modifiersClassNames} disabled={disabled || defaultDisabled} defaultMonth={defaultMonth}/>
-        {footer}
-      </Popover.Content>
+    return (<Popover.Root open={open} onOpenChange={setOpen}>
+      <Popover.Trigger asChild>{children2}</Popover.Trigger>
+      <Popover.Content>
+        <DayPicker mode="single" selected={date} onSelect={onSelect} showOutsideDays classNames={dayPickerClassNames} startMonth={fromDate} endMonth={toDate} footer={monthFooter} modifiers={modifiers} modifiersClassNames={modifiersClassNames} disabled={disabled || defaultDisabled} defaultMonth={defaultMonth}/>
+        {footer}
+      </Popover.Content>
     </Popover.Root>);
 }

package/components/DateRangePicker/DateRangePicker.d.ts

@@ -1,5 +1,5 @@
-import React, { ComponentProps, ReactElement, ReactNode } from "react";
-import { DateRange } from "react-day-picker";
+import React, { type ComponentProps, type ReactElement, type ReactNode } from "react";
+import { type DateRange } from "react-day-picker";
 import Button from "../Button";
 export type { DateRange };
 export default function DateRangePicker({ value, onValueChange, children, buttonProps, fromDate, toDate, min, max, footer, monthFooter, }: {