rupoui 1.3.2 → 1.3.4

package/README.md

@@ -14,9 +14,9 @@ A modern, accessible, and highly customizable React UI library built with **Tail
 ## 📦 Installation
 
 ```bash
-npm install rupoui framer-motion tailwind-variants tailwind-merge clsx
+npm install rupoui framer-motion
 # or
-pnpm add rupoui framer-motion tailwind-variants tailwind-merge clsx
+pnpm add rupoui framer-motion
 ```
 
 ## 🛠 Setup
@@ -248,9 +248,9 @@ import { DatePicker } from "rupoui";
 A pure renderer component for displaying a calendar grid with full keyboard navigation and accessibility support. It uses an external engine for state management, giving you complete control over the calendar's behavior.
 
 ```tsx
+import { addMonths, startOfMonth, subMonths } from "date-fns";
+import { useMemo, useState } from "react";
 import { Calendar, CalendarEngine, getMonthGrid } from "rupoui";
-import { useState, useMemo } from "react";
-import { startOfMonth, addMonths, subMonths } from "date-fns";
 
 // Basic Calendar
 function useCalendarEngine() {
@@ -461,7 +461,7 @@ import { Switch } from "rupoui";
 A floating menu that displays a list of actions or options.
 
 ```tsx
-import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from "rupoui";
+import { Dropdown, DropdownContent, DropdownItem, DropdownTrigger } from "rupoui";
 
 <Dropdown>
   <DropdownTrigger>
@@ -490,13 +490,13 @@ A dialog that focuses the user's attention exclusively on an information or an a
 
 ```tsx
 import {
+  Button,
   Modal,
-  ModalTrigger,
-  ModalContent,
-  ModalHeader,
   ModalBody,
+  ModalContent,
   ModalFooter,
-  Button,
+  ModalHeader,
+  ModalTrigger,
 } from "rupoui";
 
 <Modal>
@@ -536,7 +536,7 @@ import {
 A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
 
 ```tsx
-import { Tooltip, Button } from "rupoui";
+import { Button, Tooltip } from "rupoui";
 
 <Tooltip content="I am a tooltip">
   <Button>Hover me</Button>
@@ -556,7 +556,7 @@ import { Tooltip, Button } from "rupoui";
 A non-modal dialog that floats around a trigger. It is used to display rich content behind a trigger element.
 
 ```tsx
-import { Popover, PopoverTrigger, PopoverContent, Button } from "rupoui";
+import { Button, Popover, PopoverContent, PopoverTrigger } from "rupoui";
 
 <Popover placement="bottom">
   <PopoverTrigger>
@@ -663,10 +663,10 @@ For full control over the pagination layout, use the composable API:
 import {
   Pagination,
   PaginationContent,
+  PaginationEllipsis,
   PaginationItem,
-  PaginationPrevious,
   PaginationNext,
-  PaginationEllipsis,
+  PaginationPrevious,
   usePagination,
 } from "rupoui";
 
@@ -826,6 +826,10 @@ Set default props for any component globally via the provider:
     Textarea: {
       variant: "faded",
     },
+    Checkbox: {
+      color: "success",
+    },
+    // ... other supported components
   }}
 >
   <App />

package/dist/components/checkbox/useCheckbox.d.ts

@@ -2,7 +2,7 @@ import { ChangeEvent } from 'react';
 import { CheckboxProps } from './checkbox.types';
 
 export declare function useCheckbox(props: CheckboxProps): {
-    inputRef: import('react').RefObject<HTMLInputElement>;
+    inputRef: import('react').RefObject<HTMLInputElement | null>;
     isSelected: boolean;
     isIndeterminate: boolean | undefined;
     isDisabled: boolean;
@@ -29,7 +29,7 @@ export declare function useCheckbox(props: CheckboxProps): {
         onDrag?: import('react').DragEventHandler<HTMLInputElement> | undefined;
         disabled?: boolean | undefined | undefined;
         form?: string | undefined | undefined;
-        formAction?: string | undefined;
+        formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
         formEncType?: string | undefined | undefined;
         formMethod?: string | undefined | undefined;
         formNoValidate?: boolean | undefined | undefined;
@@ -78,6 +78,10 @@ export declare function useCheckbox(props: CheckboxProps): {
         results?: number | undefined | undefined;
         security?: string | undefined | undefined;
         unselectable?: "on" | "off" | undefined | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
+        popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+        popoverTarget?: string | undefined | undefined;
+        inert?: boolean | undefined | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         exportparts?: string | undefined | undefined;
@@ -154,17 +158,17 @@ export declare function useCheckbox(props: CheckboxProps): {
         onFocusCapture?: import('react').FocusEventHandler<HTMLInputElement> | undefined;
         onBlur?: import('react').FocusEventHandler<HTMLInputElement> | undefined;
         onBlurCapture?: import('react').FocusEventHandler<HTMLInputElement> | undefined;
-        onChangeCapture?: import('react').FormEventHandler<HTMLInputElement> | undefined;
+        onChangeCapture?: import('react').ChangeEventHandler<HTMLInputElement, Element> | undefined;
         onBeforeInput?: import('react').InputEventHandler<HTMLInputElement> | undefined;
-        onBeforeInputCapture?: import('react').FormEventHandler<HTMLInputElement> | undefined;
-        onInput?: import('react').FormEventHandler<HTMLInputElement> | undefined;
-        onInputCapture?: import('react').FormEventHandler<HTMLInputElement> | undefined;
-        onReset?: import('react').FormEventHandler<HTMLInputElement> | undefined;
-        onResetCapture?: import('react').FormEventHandler<HTMLInputElement> | undefined;
-        onSubmit?: import('react').FormEventHandler<HTMLInputElement> | undefined;
-        onSubmitCapture?: import('react').FormEventHandler<HTMLInputElement> | undefined;
-        onInvalid?: import('react').FormEventHandler<HTMLInputElement> | undefined;
-        onInvalidCapture?: import('react').FormEventHandler<HTMLInputElement> | undefined;
+        onBeforeInputCapture?: import('react').InputEventHandler<HTMLInputElement> | undefined;
+        onInput?: import('react').InputEventHandler<HTMLInputElement> | undefined;
+        onInputCapture?: import('react').InputEventHandler<HTMLInputElement> | undefined;
+        onReset?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onResetCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onSubmit?: import('react').SubmitEventHandler<HTMLInputElement> | undefined;
+        onSubmitCapture?: import('react').SubmitEventHandler<HTMLInputElement> | undefined;
+        onInvalid?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onInvalidCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
         onLoad?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
         onLoadCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
         onError?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
@@ -282,6 +286,8 @@ export declare function useCheckbox(props: CheckboxProps): {
         onLostPointerCaptureCapture?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
         onScroll?: import('react').UIEventHandler<HTMLInputElement> | undefined;
         onScrollCapture?: import('react').UIEventHandler<HTMLInputElement> | undefined;
+        onScrollEnd?: import('react').UIEventHandler<HTMLInputElement> | undefined;
+        onScrollEndCapture?: import('react').UIEventHandler<HTMLInputElement> | undefined;
         onWheel?: import('react').WheelEventHandler<HTMLInputElement> | undefined;
         onWheelCapture?: import('react').WheelEventHandler<HTMLInputElement> | undefined;
         onAnimationStartCapture?: import('react').AnimationEventHandler<HTMLInputElement> | undefined;
@@ -289,8 +295,16 @@ export declare function useCheckbox(props: CheckboxProps): {
         onAnimationEndCapture?: import('react').AnimationEventHandler<HTMLInputElement> | undefined;
         onAnimationIteration?: import('react').AnimationEventHandler<HTMLInputElement> | undefined;
         onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLInputElement> | undefined;
+        onToggle?: import('react').ToggleEventHandler<HTMLInputElement> | undefined;
+        onBeforeToggle?: import('react').ToggleEventHandler<HTMLInputElement> | undefined;
+        onTransitionCancel?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
+        onTransitionCancelCapture?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
         onTransitionEnd?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
         onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
+        onTransitionRun?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
+        onTransitionRunCapture?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
+        onTransitionStart?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
+        onTransitionStartCapture?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
         accept?: string | undefined | undefined;
         alt?: string | undefined | undefined;
         autoComplete?: import('react').HTMLInputAutoCompleteAttribute | undefined;

package/dist/components/checkbox/useCheckboxGroup.d.ts

@@ -66,6 +66,10 @@ export declare function useCheckboxGroup(props: CheckboxGroupProps): {
         results?: number | undefined | undefined;
         security?: string | undefined | undefined;
         unselectable?: "on" | "off" | undefined | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
+        popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+        popoverTarget?: string | undefined | undefined;
+        inert?: boolean | undefined | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         exportparts?: string | undefined | undefined;
@@ -142,17 +146,17 @@ export declare function useCheckboxGroup(props: CheckboxGroupProps): {
         onFocusCapture?: import('react').FocusEventHandler<HTMLDivElement> | undefined;
         onBlur?: import('react').FocusEventHandler<HTMLDivElement> | undefined;
         onBlurCapture?: import('react').FocusEventHandler<HTMLDivElement> | undefined;
-        onChangeCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+        onChangeCapture?: import('react').ChangeEventHandler<HTMLDivElement, Element> | undefined;
         onBeforeInput?: import('react').InputEventHandler<HTMLDivElement> | undefined;
-        onBeforeInputCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onInput?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onInputCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onReset?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onResetCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onSubmit?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onSubmitCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onInvalid?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onInvalidCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInputCapture?: import('react').InputEventHandler<HTMLDivElement> | undefined;
+        onInput?: import('react').InputEventHandler<HTMLDivElement> | undefined;
+        onInputCapture?: import('react').InputEventHandler<HTMLDivElement> | undefined;
+        onReset?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onResetCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onSubmit?: import('react').SubmitEventHandler<HTMLDivElement> | undefined;
+        onSubmitCapture?: import('react').SubmitEventHandler<HTMLDivElement> | undefined;
+        onInvalid?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onInvalidCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
         onLoad?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
         onLoadCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
         onError?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
@@ -270,6 +274,8 @@ export declare function useCheckboxGroup(props: CheckboxGroupProps): {
         onLostPointerCaptureCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
         onScroll?: import('react').UIEventHandler<HTMLDivElement> | undefined;
         onScrollCapture?: import('react').UIEventHandler<HTMLDivElement> | undefined;
+        onScrollEnd?: import('react').UIEventHandler<HTMLDivElement> | undefined;
+        onScrollEndCapture?: import('react').UIEventHandler<HTMLDivElement> | undefined;
         onWheel?: import('react').WheelEventHandler<HTMLDivElement> | undefined;
         onWheelCapture?: import('react').WheelEventHandler<HTMLDivElement> | undefined;
         onAnimationStartCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
@@ -277,7 +283,15 @@ export declare function useCheckboxGroup(props: CheckboxGroupProps): {
         onAnimationEndCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
         onAnimationIteration?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
         onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
+        onToggle?: import('react').ToggleEventHandler<HTMLDivElement> | undefined;
+        onBeforeToggle?: import('react').ToggleEventHandler<HTMLDivElement> | undefined;
+        onTransitionCancel?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionCancelCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEnd?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionRun?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionRunCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionStart?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionStartCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
     };
 };

package/dist/components/chip/chip.types.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode, MouseEventHandler, KeyboardEventHandler, HTMLAttributes } from 'react';
 import { HTMLMotionProps } from 'framer-motion';
+import { HTMLAttributes, KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';
 
 export type ChipVariant = "solid" | "bordered" | "flat" | "light";
 export type ChipColor = "default" | "primary" | "secondary" | "success" | "warning" | "danger";

package/dist/components/chip/useChipGroup.d.ts

@@ -64,6 +64,10 @@ export declare function useChipGroup(props: ChipGroupProps): {
         results?: number | undefined | undefined;
         security?: string | undefined | undefined;
         unselectable?: "on" | "off" | undefined | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
+        popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+        popoverTarget?: string | undefined | undefined;
+        inert?: boolean | undefined | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         exportparts?: string | undefined | undefined;
@@ -140,17 +144,17 @@ export declare function useChipGroup(props: ChipGroupProps): {
         onFocusCapture?: import('react').FocusEventHandler<HTMLDivElement> | undefined;
         onBlur?: import('react').FocusEventHandler<HTMLDivElement> | undefined;
         onBlurCapture?: import('react').FocusEventHandler<HTMLDivElement> | undefined;
-        onChangeCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+        onChangeCapture?: import('react').ChangeEventHandler<HTMLDivElement, Element> | undefined;
         onBeforeInput?: import('react').InputEventHandler<HTMLDivElement> | undefined;
-        onBeforeInputCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onInput?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onInputCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onReset?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onResetCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onSubmit?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onSubmitCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onInvalid?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onInvalidCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInputCapture?: import('react').InputEventHandler<HTMLDivElement> | undefined;
+        onInput?: import('react').InputEventHandler<HTMLDivElement> | undefined;
+        onInputCapture?: import('react').InputEventHandler<HTMLDivElement> | undefined;
+        onReset?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onResetCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onSubmit?: import('react').SubmitEventHandler<HTMLDivElement> | undefined;
+        onSubmitCapture?: import('react').SubmitEventHandler<HTMLDivElement> | undefined;
+        onInvalid?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onInvalidCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
         onLoad?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
         onLoadCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
         onError?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
@@ -267,6 +271,8 @@ export declare function useChipGroup(props: ChipGroupProps): {
         onLostPointerCaptureCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
         onScroll?: import('react').UIEventHandler<HTMLDivElement> | undefined;
         onScrollCapture?: import('react').UIEventHandler<HTMLDivElement> | undefined;
+        onScrollEnd?: import('react').UIEventHandler<HTMLDivElement> | undefined;
+        onScrollEndCapture?: import('react').UIEventHandler<HTMLDivElement> | undefined;
         onWheel?: import('react').WheelEventHandler<HTMLDivElement> | undefined;
         onWheelCapture?: import('react').WheelEventHandler<HTMLDivElement> | undefined;
         onAnimationStartCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
@@ -274,7 +280,15 @@ export declare function useChipGroup(props: ChipGroupProps): {
         onAnimationEndCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
         onAnimationIteration?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
         onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
+        onToggle?: import('react').ToggleEventHandler<HTMLDivElement> | undefined;
+        onBeforeToggle?: import('react').ToggleEventHandler<HTMLDivElement> | undefined;
+        onTransitionCancel?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionCancelCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEnd?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionRun?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionRunCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionStart?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionStartCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
     };
 };

package/dist/components/datepicker/DatePickerCalendar.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
-import { DatePickerState, DatePickerConfig } from './datepicker.types';
 import { datePicker } from './datepicker.styles';
+import { DatePickerConfig, DatePickerState } from './datepicker.types';
 
 interface DatePickerCalendarProps {
     state: DatePickerState;

package/dist/components/datepicker/DatePickerDay.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { CalendarCell } from '../calendar/calendar.types';
-import { DatePickerState, DatePickerConfig } from './datepicker.types';
 import { datePicker } from './datepicker.styles';
+import { DatePickerConfig, DatePickerState } from './datepicker.types';
 
 interface DatePickerDayProps {
     cell: CalendarCell;

package/dist/components/datepicker/DatePickerInput.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
-import { DatePickerState, DatePickerConfig } from './datepicker.types';
 import { datePicker } from './datepicker.styles';
+import { DatePickerConfig, DatePickerState } from './datepicker.types';
 
 interface DatePickerInputProps {
     state: DatePickerState;

package/dist/components/datepicker/SegmentedDatePickerInput.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
-import { DatePickerState, DatePickerConfig } from './datepicker.types';
 import { datePicker } from './datepicker.styles';
+import { DatePickerConfig, DatePickerState } from './datepicker.types';
 
 interface SegmentedDatePickerInputProps {
     state: DatePickerState;

package/dist/components/datepicker/datepicker.input.logic.d.ts

@@ -1,4 +1,4 @@
-import { DatePickerInputState, DatePickerInputConfig } from './datepicker.input.types';
+import { DatePickerInputConfig, DatePickerInputState } from './datepicker.input.types';
 
 /**
  * Parses an input string into a Date object based on the format.

package/dist/components/datepicker/datepicker.styles.d.ts

@@ -2,13 +2,13 @@ export declare const datePicker: import('tailwind-variants').TVReturnType<{
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {
             base?: import('tailwind-merge').ClassNameValue;
+            popover?: import('tailwind-merge').ClassNameValue;
             header?: import('tailwind-merge').ClassNameValue;
             input?: import('tailwind-merge').ClassNameValue;
-            popover?: import('tailwind-merge').ClassNameValue;
             grid?: import('tailwind-merge').ClassNameValue;
             separator?: import('tailwind-merge').ClassNameValue;
-            calendar?: import('tailwind-merge').ClassNameValue;
             headerTitle?: import('tailwind-merge').ClassNameValue;
+            calendar?: import('tailwind-merge').ClassNameValue;
             gridHeader?: import('tailwind-merge').ClassNameValue;
             dateGrid?: import('tailwind-merge').ClassNameValue;
             daySelected?: import('tailwind-merge').ClassNameValue;
@@ -26,13 +26,13 @@ export declare const datePicker: import('tailwind-variants').TVReturnType<{
     [x: string]: {
         [x: string]: import('tailwind-merge').ClassNameValue | {
             base?: import('tailwind-merge').ClassNameValue;
+            popover?: import('tailwind-merge').ClassNameValue;
             header?: import('tailwind-merge').ClassNameValue;
             input?: import('tailwind-merge').ClassNameValue;
-            popover?: import('tailwind-merge').ClassNameValue;
             grid?: import('tailwind-merge').ClassNameValue;
             separator?: import('tailwind-merge').ClassNameValue;
-            calendar?: import('tailwind-merge').ClassNameValue;
             headerTitle?: import('tailwind-merge').ClassNameValue;
+            calendar?: import('tailwind-merge').ClassNameValue;
             gridHeader?: import('tailwind-merge').ClassNameValue;
             dateGrid?: import('tailwind-merge').ClassNameValue;
             daySelected?: import('tailwind-merge').ClassNameValue;
@@ -70,13 +70,13 @@ export declare const datePicker: import('tailwind-variants').TVReturnType<{
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {
             base?: import('tailwind-merge').ClassNameValue;
+            popover?: import('tailwind-merge').ClassNameValue;
             header?: import('tailwind-merge').ClassNameValue;
             input?: import('tailwind-merge').ClassNameValue;
-            popover?: import('tailwind-merge').ClassNameValue;
             grid?: import('tailwind-merge').ClassNameValue;
             separator?: import('tailwind-merge').ClassNameValue;
-            calendar?: import('tailwind-merge').ClassNameValue;
             headerTitle?: import('tailwind-merge').ClassNameValue;
+            calendar?: import('tailwind-merge').ClassNameValue;
             gridHeader?: import('tailwind-merge').ClassNameValue;
             dateGrid?: import('tailwind-merge').ClassNameValue;
             daySelected?: import('tailwind-merge').ClassNameValue;

package/dist/components/dropdown/context.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-import { DropdownVariant, DropdownColor, DropdownSize, DropdownRadius } from './dropdown.types';
+import { DropdownColor, DropdownRadius, DropdownSize, DropdownVariant } from './dropdown.types';
 
 export interface DropdownContextProps {
     isOpen: boolean;

package/dist/components/dropdown/useDropdown.d.ts

@@ -5,8 +5,8 @@ export declare function useDropdown(props: DropdownProps): {
     open: () => void;
     close: () => void;
     toggleOpen: () => void;
-    triggerRef: import('react').RefObject<HTMLElement>;
-    menuRef: import('react').RefObject<HTMLElement>;
+    triggerRef: import('react').RefObject<HTMLElement | null>;
+    menuRef: import('react').RefObject<HTMLElement | null>;
     focusedKey: string | number | null;
     setFocusedKey: import('react').Dispatch<import('react').SetStateAction<string | number | null>>;
     handleKeyDown: (e: React.KeyboardEvent) => void;

package/dist/components/input/input.types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, InputHTMLAttributes } from 'react';
+import { InputHTMLAttributes, ReactNode } from 'react';
 
 export type InputProps = {
     /**

package/dist/components/input-number/input-number.types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, InputHTMLAttributes } from 'react';
+import { InputHTMLAttributes, ReactNode } from 'react';
 
 export type InputNumberFormatOptions = {
     locale?: string;

package/dist/components/modal/ModalLayout.d.ts

@@ -1,4 +1,4 @@
-import { ModalHeaderProps, ModalBodyProps, ModalFooterProps } from './modal.types';
+import { ModalBodyProps, ModalFooterProps, ModalHeaderProps } from './modal.types';
 
 export declare const ModalHeader: ({ children, className, ...props }: ModalHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const ModalBody: ({ children, className, ...props }: ModalBodyProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/pagination/pagination.types.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
 import { HTMLMotionProps } from 'framer-motion';
+import { ReactNode } from 'react';
 import { VariantProps } from 'tailwind-variants';
 import { pagination } from './pagination.styles';
 

package/dist/components/popover/popover.types.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode, ReactElement } from 'react';
 import { Placement } from '@floating-ui/react';
+import { ReactElement, ReactNode } from 'react';
 import { popover } from './popover.styles';
 
 export type PopoverPlacement = Placement;

package/dist/components/radio/useRadio.d.ts

@@ -28,7 +28,7 @@ export declare function useRadio(props: RadioProps): {
         onDrag?: import('react').DragEventHandler<HTMLInputElement> | undefined;
         disabled?: boolean | undefined | undefined;
         form?: string | undefined | undefined;
-        formAction?: string | undefined;
+        formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
         formEncType?: string | undefined | undefined;
         formMethod?: string | undefined | undefined;
         formNoValidate?: boolean | undefined | undefined;
@@ -78,6 +78,10 @@ export declare function useRadio(props: RadioProps): {
         results?: number | undefined | undefined;
         security?: string | undefined | undefined;
         unselectable?: "on" | "off" | undefined | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
+        popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+        popoverTarget?: string | undefined | undefined;
+        inert?: boolean | undefined | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         exportparts?: string | undefined | undefined;
@@ -154,17 +158,17 @@ export declare function useRadio(props: RadioProps): {
         onFocusCapture?: import('react').FocusEventHandler<HTMLInputElement> | undefined;
         onBlur?: import('react').FocusEventHandler<HTMLInputElement> | undefined;
         onBlurCapture?: import('react').FocusEventHandler<HTMLInputElement> | undefined;
-        onChangeCapture?: import('react').FormEventHandler<HTMLInputElement> | undefined;
+        onChangeCapture?: import('react').ChangeEventHandler<HTMLInputElement, Element> | undefined;
         onBeforeInput?: import('react').InputEventHandler<HTMLInputElement> | undefined;
-        onBeforeInputCapture?: import('react').FormEventHandler<HTMLInputElement> | undefined;
-        onInput?: import('react').FormEventHandler<HTMLInputElement> | undefined;
-        onInputCapture?: import('react').FormEventHandler<HTMLInputElement> | undefined;
-        onReset?: import('react').FormEventHandler<HTMLInputElement> | undefined;
-        onResetCapture?: import('react').FormEventHandler<HTMLInputElement> | undefined;
-        onSubmit?: import('react').FormEventHandler<HTMLInputElement> | undefined;
-        onSubmitCapture?: import('react').FormEventHandler<HTMLInputElement> | undefined;
-        onInvalid?: import('react').FormEventHandler<HTMLInputElement> | undefined;
-        onInvalidCapture?: import('react').FormEventHandler<HTMLInputElement> | undefined;
+        onBeforeInputCapture?: import('react').InputEventHandler<HTMLInputElement> | undefined;
+        onInput?: import('react').InputEventHandler<HTMLInputElement> | undefined;
+        onInputCapture?: import('react').InputEventHandler<HTMLInputElement> | undefined;
+        onReset?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onResetCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onSubmit?: import('react').SubmitEventHandler<HTMLInputElement> | undefined;
+        onSubmitCapture?: import('react').SubmitEventHandler<HTMLInputElement> | undefined;
+        onInvalid?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onInvalidCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
         onLoad?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
         onLoadCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
         onError?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
@@ -282,6 +286,8 @@ export declare function useRadio(props: RadioProps): {
         onLostPointerCaptureCapture?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
         onScroll?: import('react').UIEventHandler<HTMLInputElement> | undefined;
         onScrollCapture?: import('react').UIEventHandler<HTMLInputElement> | undefined;
+        onScrollEnd?: import('react').UIEventHandler<HTMLInputElement> | undefined;
+        onScrollEndCapture?: import('react').UIEventHandler<HTMLInputElement> | undefined;
         onWheel?: import('react').WheelEventHandler<HTMLInputElement> | undefined;
         onWheelCapture?: import('react').WheelEventHandler<HTMLInputElement> | undefined;
         onAnimationStartCapture?: import('react').AnimationEventHandler<HTMLInputElement> | undefined;
@@ -289,8 +295,16 @@ export declare function useRadio(props: RadioProps): {
         onAnimationEndCapture?: import('react').AnimationEventHandler<HTMLInputElement> | undefined;
         onAnimationIteration?: import('react').AnimationEventHandler<HTMLInputElement> | undefined;
         onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLInputElement> | undefined;
+        onToggle?: import('react').ToggleEventHandler<HTMLInputElement> | undefined;
+        onBeforeToggle?: import('react').ToggleEventHandler<HTMLInputElement> | undefined;
+        onTransitionCancel?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
+        onTransitionCancelCapture?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
         onTransitionEnd?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
         onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
+        onTransitionRun?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
+        onTransitionRunCapture?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
+        onTransitionStart?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
+        onTransitionStartCapture?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
         accept?: string | undefined | undefined;
         alt?: string | undefined | undefined;
         autoComplete?: import('react').HTMLInputAutoCompleteAttribute | undefined;

package/dist/components/radio/useRadioGroup.d.ts

@@ -67,6 +67,10 @@ export declare function useRadioGroup(props: RadioGroupProps): {
         results?: number | undefined | undefined;
         security?: string | undefined | undefined;
         unselectable?: "on" | "off" | undefined | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
+        popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+        popoverTarget?: string | undefined | undefined;
+        inert?: boolean | undefined | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         exportparts?: string | undefined | undefined;
@@ -143,17 +147,17 @@ export declare function useRadioGroup(props: RadioGroupProps): {
         onFocusCapture?: import('react').FocusEventHandler<HTMLDivElement> | undefined;
         onBlur?: import('react').FocusEventHandler<HTMLDivElement> | undefined;
         onBlurCapture?: import('react').FocusEventHandler<HTMLDivElement> | undefined;
-        onChangeCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+        onChangeCapture?: import('react').ChangeEventHandler<HTMLDivElement, Element> | undefined;
         onBeforeInput?: import('react').InputEventHandler<HTMLDivElement> | undefined;
-        onBeforeInputCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onInput?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onInputCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onReset?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onResetCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onSubmit?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onSubmitCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onInvalid?: import('react').FormEventHandler<HTMLDivElement> | undefined;
-        onInvalidCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInputCapture?: import('react').InputEventHandler<HTMLDivElement> | undefined;
+        onInput?: import('react').InputEventHandler<HTMLDivElement> | undefined;
+        onInputCapture?: import('react').InputEventHandler<HTMLDivElement> | undefined;
+        onReset?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onResetCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onSubmit?: import('react').SubmitEventHandler<HTMLDivElement> | undefined;
+        onSubmitCapture?: import('react').SubmitEventHandler<HTMLDivElement> | undefined;
+        onInvalid?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onInvalidCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
         onLoad?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
         onLoadCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
         onError?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
@@ -271,6 +275,8 @@ export declare function useRadioGroup(props: RadioGroupProps): {
         onLostPointerCaptureCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
         onScroll?: import('react').UIEventHandler<HTMLDivElement> | undefined;
         onScrollCapture?: import('react').UIEventHandler<HTMLDivElement> | undefined;
+        onScrollEnd?: import('react').UIEventHandler<HTMLDivElement> | undefined;
+        onScrollEndCapture?: import('react').UIEventHandler<HTMLDivElement> | undefined;
         onWheel?: import('react').WheelEventHandler<HTMLDivElement> | undefined;
         onWheelCapture?: import('react').WheelEventHandler<HTMLDivElement> | undefined;
         onAnimationStartCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
@@ -278,7 +284,15 @@ export declare function useRadioGroup(props: RadioGroupProps): {
         onAnimationEndCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
         onAnimationIteration?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
         onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
+        onToggle?: import('react').ToggleEventHandler<HTMLDivElement> | undefined;
+        onBeforeToggle?: import('react').ToggleEventHandler<HTMLDivElement> | undefined;
+        onTransitionCancel?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionCancelCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEnd?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionRun?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionRunCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionStart?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionStartCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
     };
 };

package/dist/components/select/select.types.d.ts

@@ -20,6 +20,7 @@ export interface SelectItemProps {
     onClick?: () => void;
     onMouseEnter?: () => void;
     "data-selected"?: boolean;
+    "data-focused"?: boolean;
 }
 export type SelectSelectionMode = "single" | "multiple";
 export interface SelectProps extends Omit<SelectVariants, "isDisabled" | "isLoading"> {