@okam/stack-ui 1.29.0 → 1.30.0

package/components/Accordion/components/AccordionItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { TAccordionItemProps } from '../interface';
 declare const _AccordionItem: (props: TAccordionItemProps) => JSX.Element;
 export default _AccordionItem;

package/components/Accordion/index.d.ts

@@ -1,3 +1,4 @@
+import type { TToken } from '../../providers/Theme/interface';
 import type { TAccordionProps } from './interface';
-declare const Accordion: (props: TAccordionProps) => import("react/jsx-runtime").JSX.Element;
+declare const Accordion: <T extends TToken>(props: TAccordionProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default Accordion;

package/components/Accordion/interface.d.ts

@@ -1,12 +1,13 @@
 import type { AccordionItemAriaProps } from '@react-aria/accordion';
 import type { ComponentType, ReactElement } from 'react';
 import type { ItemProps, TreeProps } from 'react-stately';
+import type { TToken } from '../../providers/Theme/interface';
 import type { TDefaultComponent, TTransition } from '../../types/components';
-type TAccordionDefaultComponent = Omit<TDefaultComponent, 'children'>;
+type TAccordionDefaultComponent<T = TToken> = Omit<TDefaultComponent<T>, 'children'>;
 export interface AccordionProps extends TreeProps<TAccordionItemProps> {
     children: ReactElement<TAccordionItemProps> | ReactElement<TAccordionItemProps>[];
 }
-export interface TAccordionProps extends TAccordionDefaultComponent, AccordionProps {
+export interface TAccordionProps<T = TToken> extends TAccordionDefaultComponent<T>, AccordionProps {
     id: string;
     TransitionAnimation?: ComponentType<TTransition>;
 }

package/components/Alerts/components/AlertsCloseButton.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { TButtonProps } from '../../Button/interface';
-declare const AlertsCloseButton: import("react").ForwardRefExoticComponent<TButtonProps & import("react").RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;
+declare const AlertsCloseButton: import("react").ForwardRefExoticComponent<TButtonProps<import("../../..").TToken> & import("react").RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;
 export default AlertsCloseButton;

package/components/Alerts/index.d.ts

@@ -1,3 +1,4 @@
+import type { TToken } from '../../providers/Theme/interface';
 import type { TAlertsProps } from './interface';
-declare const Alerts: (props: TAlertsProps) => import("react/jsx-runtime").JSX.Element;
+declare const Alerts: <T extends TToken>(props: TAlertsProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default Alerts;

package/components/Alerts/interface.d.ts

@@ -1,4 +1,5 @@
 import type React from 'react';
+import type { TToken } from '../../providers/Theme/interface';
 import type { TDefaultComponent } from '../../types/components';
 import type { TButtonProps } from '../Button/interface';
 import type { TCarouselComponentProps, TCarouselProps } from '../Carousel/interface';
@@ -11,6 +12,6 @@ export interface TAlertsItem {
     content?: React.ReactNode;
     button?: TButtonProps;
 }
-export type TAlertsComponentProps = TCarouselComponentProps<TAlertsItemProps>;
-export type TAlertsItemProps = TAlertsItem & TDefaultComponent;
-export type TAlertsProps = TAlertsComponentProps & Omit<TCarouselProps<TAlertsItemProps>, 'slides'> & Omit<LightboxProps, 'children'>;
+export type TAlertsComponentProps<T extends TToken = TToken> = TCarouselComponentProps<TAlertsItemProps<T>>;
+export type TAlertsItemProps<T extends TToken = TToken> = TAlertsItem & TDefaultComponent<T>;
+export type TAlertsProps<T extends TToken = TToken> = TAlertsComponentProps<T> & Omit<TCarouselProps<TAlertsItemProps>, 'slides'> & Omit<LightboxProps, 'children'>;

package/components/Box/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
+import type { TToken } from '../../providers/Theme/interface';
 import type { TBoxProps } from './interface';
-declare const Box: ({ as: Component, themeName, tokens, customTheme, children, className, ...rest }: TBoxProps) => import("react/jsx-runtime").JSX.Element;
-export declare const BoxWithForwardRef: React.ForwardRefExoticComponent<TBoxProps<import("../..").TToken> & React.RefAttributes<HTMLElement>>;
+declare const Box: <T extends TToken>({ as: Component, themeName, tokens, customTheme, children, className, ...rest }: TBoxProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const BoxWithForwardRef: React.ForwardRefExoticComponent<TBoxProps<TToken> & React.RefAttributes<HTMLElement>>;
 export default Box;

package/components/Button/index.d.ts

@@ -1,6 +1,10 @@
 import React from 'react';
+import type { TToken } from '../../providers/Theme/interface';
 import type { TAnchorProps, TButtonProps } from './interface';
-export declare const Anchor: React.ForwardRefExoticComponent<TAnchorProps & React.RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;
-export declare const ButtonWithForwardRef: React.ForwardRefExoticComponent<TButtonProps & React.RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;
-declare const _default: React.MemoExoticComponent<(props: TButtonProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;
+export declare const Anchor: React.ForwardRefExoticComponent<TAnchorProps<TToken> & React.RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;
+export declare const ButtonWithForwardRef: React.ForwardRefExoticComponent<TButtonProps<TToken> & React.RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;
+declare const ButtonComponent: {
+    <T extends TToken>(props: TButtonProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ButtonComponent;

package/components/Button/interface.d.ts

@@ -1,8 +1,9 @@
 import type { PressEvent } from '@react-types/shared';
 import type React from 'react';
+import type { TToken } from '../../providers/Theme/interface';
 import type { TDefaultComponent } from '../../types/components';
 import type { NextLinkProps } from '../../types/next-link';
-export interface TButtonProps extends TDefaultComponent {
+export interface TButtonProps<T = TToken> extends TDefaultComponent<T> {
     children?: React.ReactNode;
     id?: string;
     href?: string;
@@ -15,6 +16,6 @@ export interface TButtonProps extends TDefaultComponent {
     role?: string;
     isDisabled?: boolean;
 }
-export interface TAnchorProps extends TButtonProps {
+export interface TAnchorProps<T = TToken> extends TButtonProps<T> {
     nextLinkProps?: NextLinkProps;
 }

package/components/Calendar/index.d.ts

@@ -1,3 +1,7 @@
+import type { TToken } from '../../providers/Theme/interface';
 import type { TCalendarProps } from './interface';
-declare function Calendar({ buttons, tokens, customTheme, themeName, ...rest }: TCalendarProps): import("react/jsx-runtime").JSX.Element;
+declare function Calendar<T extends TToken>({ buttons, tokens, customTheme, themeName, ...rest }: TCalendarProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace Calendar {
+    var displayName: string;
+}
 export default Calendar;

package/components/Calendar/interface.d.ts

@@ -2,8 +2,9 @@ import type { CalendarDate, DateValue } from '@internationalized/date';
 import type { CalendarProps, RangeCalendarProps } from '@react-aria/calendar';
 import type { CalendarState, RangeCalendarState } from '@react-stately/calendar';
 import type { AriaCalendarGridProps } from 'react-aria';
+import type { TToken } from '../../providers/Theme/interface';
 import type { TDefaultComponent } from '../../types/components';
-export interface TCalendarProps extends CalendarProps<DateValue>, TDefaultComponent {
+export interface TCalendarProps<T = TToken> extends CalendarProps<DateValue>, TDefaultComponent<T> {
     buttons?: {
         buttonPrev?: {
             icon?: string;

package/components/Carousel/components/CarouselNavigationButton.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import type { TButtonProps } from '../../Button/interface';
-export declare const CarouselNavigationButton: import("react").ForwardRefExoticComponent<TButtonProps & {
+export declare const CarouselNavigationButton: import("react").ForwardRefExoticComponent<TButtonProps<import("../../..").TToken> & {
     onSubmit?: (() => void) | undefined;
 } & import("react").RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;
-export declare const CarouselNextNavigationButton: import("react").ForwardRefExoticComponent<TButtonProps & import("react").RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;
-export declare const CarouselPrevNavigationButton: import("react").ForwardRefExoticComponent<TButtonProps & import("react").RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;
+export declare const CarouselNextNavigationButton: import("react").ForwardRefExoticComponent<TButtonProps<import("../../..").TToken> & import("react").RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;
+export declare const CarouselPrevNavigationButton: import("react").ForwardRefExoticComponent<TButtonProps<import("../../..").TToken> & import("react").RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;
 export default CarouselNavigationButton;

package/components/Date/index.d.ts

@@ -1,3 +1,4 @@
+import type { TToken } from '../../providers/Theme/interface';
 import type { TDateProps } from './interface';
-declare const DateComponent: (props: TDateProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const DateComponent: <T extends TToken>(props: TDateProps<T>) => import("react/jsx-runtime").JSX.Element | null;
 export default DateComponent;

package/components/Date/interface.d.ts

@@ -1,6 +1,7 @@
 import type { DateFormatterOptions } from 'react-aria';
+import type { TToken } from '../../providers/Theme/interface';
 import type { TDefaultComponent } from '../../types/components';
-export interface TDateProps extends TDefaultComponent {
+export interface TDateProps<T = TToken> extends TDefaultComponent<T> {
     date: string;
     dateFormatterOptions?: DateFormatterOptions;
 }

package/components/Icon/index.d.ts

@@ -1,3 +1,4 @@
+import type { TToken } from '../../providers/Theme/interface';
 import type { TIconProps } from './interface';
-declare const IconDispatcher: (props: TIconProps) => import("react/jsx-runtime").JSX.Element;
+declare const IconDispatcher: <T extends TToken>(props: TIconProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default IconDispatcher;

package/components/Icon/interface.d.ts

@@ -1,7 +1,8 @@
 import type React from 'react';
 import type { SVGProps } from 'react';
+import type { TToken } from '../../providers/Theme/interface';
 import type { TDefaultComponent } from '../../types/components';
-export interface TIconProps extends TDefaultComponent, SVGProps<SVGSVGElement> {
+export interface TIconProps<T = TToken> extends TDefaultComponent<T>, SVGProps<SVGSVGElement> {
     icon?: string | React.ReactNode;
     children?: React.ReactNode;
 }

package/components/Lightbox/hooks/overlay/index.d.ts

@@ -0,0 +1,75 @@
+import type { RefObject } from 'react';
+import type { OverlayTriggerProps } from 'react-aria';
+import type { OverlayTriggerState } from 'react-stately';
+declare function useOverlayHook(props: OverlayTriggerProps, state: OverlayTriggerState, ref?: RefObject<Element>): {
+    openTriggerProps: {
+        isDisabled?: boolean | undefined;
+        children?: import("react").ReactNode;
+        onPressStart?: ((e: import("react-aria").PressEvent) => void) | undefined;
+        onPressEnd?: ((e: import("react-aria").PressEvent) => void) | undefined;
+        onPressChange?: ((isPressed: boolean) => void) | undefined;
+        onPressUp?: ((e: import("react-aria").PressEvent) => void) | undefined;
+        autoFocus?: boolean | undefined;
+        onFocus?: ((e: import("react").FocusEvent<Element, Element>) => void) | undefined;
+        onBlur?: ((e: import("react").FocusEvent<Element, Element>) => void) | undefined;
+        onFocusChange?: ((isFocused: boolean) => void) | undefined;
+        onKeyDown?: ((e: import("@react-types/shared").KeyboardEvent) => void) | undefined;
+        onKeyUp?: ((e: import("@react-types/shared").KeyboardEvent) => void) | undefined;
+        href?: string | undefined;
+        target?: string | undefined;
+        rel?: string | undefined;
+        elementType?: "button" | import("react").JSXElementConstructor<any> | undefined;
+        'aria-expanded'?: boolean | "true" | "false" | undefined;
+        'aria-haspopup'?: boolean | "true" | "false" | "grid" | "menu" | "dialog" | "listbox" | "tree" | undefined;
+        'aria-controls'?: string | undefined;
+        'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
+        type?: "button" | "reset" | "submit" | undefined;
+        preventFocusOnPress?: boolean | undefined;
+        excludeFromTabOrder?: boolean | undefined;
+        id?: string | undefined;
+        'aria-label'?: string | undefined;
+        'aria-labelledby': string;
+        'aria-describedby'?: string | undefined;
+        'aria-details'?: string | undefined;
+        handlePress: ((e: import("react-aria").PressEvent) => void) | undefined;
+    };
+    triggerProps: {
+        isDisabled?: boolean | undefined;
+        children?: import("react").ReactNode;
+        onPressStart?: ((e: import("react-aria").PressEvent) => void) | undefined;
+        onPressEnd?: ((e: import("react-aria").PressEvent) => void) | undefined;
+        onPressChange?: ((isPressed: boolean) => void) | undefined;
+        onPressUp?: ((e: import("react-aria").PressEvent) => void) | undefined;
+        autoFocus?: boolean | undefined;
+        onFocus?: ((e: import("react").FocusEvent<Element, Element>) => void) | undefined;
+        onBlur?: ((e: import("react").FocusEvent<Element, Element>) => void) | undefined;
+        onFocusChange?: ((isFocused: boolean) => void) | undefined;
+        onKeyDown?: ((e: import("@react-types/shared").KeyboardEvent) => void) | undefined;
+        onKeyUp?: ((e: import("@react-types/shared").KeyboardEvent) => void) | undefined;
+        href?: string | undefined;
+        target?: string | undefined;
+        rel?: string | undefined;
+        elementType?: "button" | import("react").JSXElementConstructor<any> | undefined;
+        'aria-expanded'?: boolean | "true" | "false" | undefined;
+        'aria-haspopup'?: boolean | "true" | "false" | "grid" | "menu" | "dialog" | "listbox" | "tree" | undefined;
+        'aria-controls'?: string | undefined;
+        'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
+        type?: "button" | "reset" | "submit" | undefined;
+        preventFocusOnPress?: boolean | undefined;
+        excludeFromTabOrder?: boolean | undefined;
+        id?: string | undefined;
+        'aria-label'?: string | undefined;
+        'aria-labelledby'?: string | undefined;
+        'aria-describedby'?: string | undefined;
+        'aria-details'?: string | undefined;
+        handlePress: ((e: import("react-aria").PressEvent) => void) | undefined;
+    };
+    labelProps: {
+        id: string;
+    };
+    overlayProps: {
+        'aria-labelledby': string;
+        id?: string | undefined;
+    };
+};
+export default useOverlayHook;

package/components/Lightbox/index.d.ts

@@ -1,3 +1,4 @@
+import type { TToken } from '../../providers/Theme/interface';
 import type { TLightboxProps } from './interface';
-declare const Lightbox: (props: TLightboxProps) => import("react/jsx-runtime").JSX.Element;
+declare const Lightbox: <T extends TToken>(props: TLightboxProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default Lightbox;

package/components/Lightbox/interface.d.ts

@@ -3,16 +3,17 @@ import type React from 'react';
 import type { Dispatch, FunctionComponent, SetStateAction } from 'react';
 import type { OverlayTriggerProps as AriaOverlayTriggerProps } from 'react-aria';
 import type { OverlayTriggerProps } from 'react-stately';
+import type { TToken } from '../../providers/Theme/interface';
 import type { TDefaultComponent, TTransition } from '../../types/components';
 import type { TButtonProps } from '../Button/interface';
 type TCloseButtonProps = React.ForwardRefExoticComponent<TButtonProps & React.RefAttributes<HTMLButtonElement & HTMLAnchorElement>> | FunctionComponent<TButtonProps>;
-export interface LightboxProps extends TDefaultComponent, OverlayTriggerProps, Omit<AriaOverlayTriggerProps, 'type'> {
+export interface LightboxProps<T = TToken> extends TDefaultComponent<T>, OverlayTriggerProps, Omit<AriaOverlayTriggerProps, 'type'> {
     closeButtonAriaLabel?: string;
     setOpen?: Dispatch<SetStateAction<boolean>>;
     closeButton?: TCloseButtonProps;
     transitionComponent?: FunctionComponent<TTransition>;
 }
-export interface TLightboxProps extends LightboxProps {
+export interface TLightboxProps<T = TToken> extends LightboxProps<T> {
     label: string;
     thumbnailContent: React.ReactNode;
 }

package/components/Menu/Menu.d.ts

@@ -1,3 +1,4 @@
+import type { TToken } from '../../providers/Theme/interface';
 import type TMenuProps from './interface';
-declare const Menu: (props: TMenuProps) => import("react/jsx-runtime").JSX.Element;
+declare const Menu: <T extends TToken>(props: TMenuProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default Menu;

package/components/Menu/interface.d.ts

@@ -1,17 +1,18 @@
 import type { AriaTabListProps } from '@react-types/tabs';
 import type React from 'react';
-import type { Maybe, TDefaultComponent } from '../../types/components';
+import type { TToken } from '../../providers/Theme/interface';
+import type { Maybe, TDefaultComponent, TTransition } from '../../types/components';
 import type { NextLinkProps } from '../../types/next-link';
 export type MenuProps = {
     id: string;
     children: React.ReactNode;
     beforeTabContent?: React.ReactNode;
     afterTabContent?: React.ReactNode;
-    PanelTransition?: (props: unknown) => JSX.Element;
+    PanelTransition?: (props: TTransition) => JSX.Element;
 };
-export type TMenuProps = AriaTabListProps<MenuProps> & MenuProps & TDefaultComponent;
+export type TMenuProps<T = TToken> = AriaTabListProps<MenuProps> & MenuProps & TDefaultComponent<T>;
 export type TMenuSidePanelProps = TMenuProps & {
-    TransitionAnimation?: (props: unknown) => JSX.Element;
+    TransitionAnimation?: (props: TTransition) => JSX.Element;
 };
 export type PartialHtmlBaseElement = Omit<Partial<HTMLBaseElement>, 'id' | 'onClick' | 'target' | 'role' | 'children'>;
 export interface IMenuItemProp {

package/components/Modal/index.d.ts

@@ -1,3 +1,4 @@
+import type { TToken } from '../../providers/Theme/interface';
 import type { TModalProps } from './interface';
-declare const Modal: (props: TModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const Modal: <T extends TToken>(props: TModalProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default Modal;

package/components/Modal/interface.d.ts

@@ -2,8 +2,9 @@ import type { OverlayTriggerState } from '@react-stately/overlays';
 import type React from 'react';
 import type { FunctionComponent } from 'react';
 import type { AriaDialogProps, AriaModalOverlayProps } from 'react-aria';
+import type { TToken } from '../../providers/Theme/interface';
 import type { TDefaultComponent, TTransition } from '../../types/components';
-export interface TModalProps extends AriaModalOverlayProps, TDefaultComponent {
+export interface TModalProps<T = TToken> extends AriaModalOverlayProps, TDefaultComponent<T> {
     state: OverlayTriggerState;
     children: React.ReactNode;
     transitionComponent?: FunctionComponent<TTransition>;

package/components/Popover/index.d.ts

@@ -1,3 +1,4 @@
+import type { TToken } from '../../providers/Theme/interface';
 import type { TPopoverButtonProps } from './interface';
-declare function PopoverButton(props: TPopoverButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function PopoverButton<T extends TToken>(props: TPopoverButtonProps<T>): import("react/jsx-runtime").JSX.Element;
 export default PopoverButton;

package/components/Popover/interface.d.ts

@@ -1,9 +1,10 @@
 import type { DOMAttributes } from '@react-types/shared';
 import type React from 'react';
 import type { Placement } from 'react-aria';
+import type { TToken } from '../../providers/Theme/interface';
 import type { TDefaultComponent } from '../../types/components';
 import type { TButtonProps } from '../Button/interface';
-export interface IPopoverProps extends TDefaultComponent {
+export interface IPopoverProps<T = TToken> extends TDefaultComponent<T> {
     isOpen?: boolean;
     onClose?: () => void;
     children: React.ReactElement | React.ReactElement[];
@@ -11,7 +12,7 @@ export interface IPopoverProps extends TDefaultComponent {
     isDismissable?: boolean;
     shouldCloseOnBlur?: boolean;
 }
-export interface TPopoverButtonProps extends TDefaultComponent, IPopoverProps {
+export interface TPopoverButtonProps<T = TToken> extends TDefaultComponent<T>, IPopoverProps<T> {
     offset?: number;
     buttonProps: TButtonProps;
     placement?: Placement;

package/components/ShareButton/index.d.ts

@@ -1,4 +1,5 @@
+import type { TToken } from '../../providers/Theme/interface';
 import type { TIconsContainerProps, TShareButtonProps } from './interface';
-export declare const IconsContainer: (props: TIconsContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconsContainer: <T extends TToken>(props: TIconsContainerProps<T>) => import("react/jsx-runtime").JSX.Element;
 declare const ShareButton: (props: TShareButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default ShareButton;

package/components/ShareButton/interface.d.ts

@@ -1,7 +1,7 @@
 import type React from 'react';
 import type { TToken } from '../../providers/Theme/interface';
 import type { TDefaultComponent } from '../../types/components';
-export interface TShareButtonProps extends TDefaultComponent<TShareButtonTokens> {
+export interface TShareButtonProps<T = TToken> extends TDefaultComponent<TShareButtonTokens & T> {
     id: string;
     icon?: React.ReactNode;
     ariaLabel: string;
@@ -12,7 +12,7 @@ export interface TShareButtonProps extends TDefaultComponent<TShareButtonTokens>
 interface TShareButtonTokens extends TToken {
     listDirection: 'row' | 'column';
 }
-export interface TIconsContainerProps extends Omit<TShareButtonProps, 'ariaLabel' | 'icon'> {
+export interface TIconsContainerProps<T = TToken> extends Omit<TShareButtonProps<T>, 'ariaLabel' | 'icon'> {
     isOpen: boolean;
     setIsOpen: (isOpen: boolean) => void;
 }

package/components/SidePanel/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { TToken } from '../../providers/Theme/interface';
 import type { TSidePanelProps } from './interface';
-declare const _default: React.MemoExoticComponent<(props: TSidePanelProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;
+declare const SidePanel: <T extends TToken>(props: TSidePanelProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default SidePanel;

package/components/SidePanel/interface.d.ts

@@ -1,12 +1,13 @@
 import type { HTMLAttributes } from 'react';
 import type React from 'react';
-import type { TDefaultComponent } from '../../types/components';
+import type { TToken } from '../../providers/Theme/interface';
+import type { TDefaultComponent, TTransition } from '../../types/components';
 export interface ISidePanelProps extends HTMLAttributes<HTMLElement> {
     id: string;
     children?: React.ReactNode;
     closeBtnRender?: () => React.ReactNode;
-    TransitionAnimation?: (props: unknown) => JSX.Element;
-    PanelTransition?: (props: unknown) => JSX.Element;
+    TransitionAnimation?: (props: TTransition) => JSX.Element;
+    PanelTransition?: (props: TTransition) => JSX.Element;
     onCloseCallBack?: () => void;
 }
-export type TSidePanelProps = ISidePanelProps & TDefaultComponent;
+export type TSidePanelProps<T = TToken> = ISidePanelProps & TDefaultComponent<T>;

package/components/Typography/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
+import type { TToken } from '../../providers/Theme/interface';
 import type { TTypographyProps } from './interface';
-declare const Typography: ({ as: Component, themeName, tokens, customTheme, children, ...rest }: TTypographyProps) => import("react/jsx-runtime").JSX.Element;
-export declare const TypographyWithForwardRef: React.ForwardRefExoticComponent<TTypographyProps<import("../..").TToken> & React.RefAttributes<HTMLElement>>;
+declare const Typography: <T extends TToken>({ as: Component, themeName, tokens, customTheme, children, ...rest }: TTypographyProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const TypographyWithForwardRef: React.ForwardRefExoticComponent<TTypographyProps<TToken> & React.RefAttributes<HTMLElement>>;
 export default Typography;

package/components/Video/index.d.ts

@@ -1,3 +1,4 @@
+import type { TToken } from '../../providers/Theme/interface';
 import type { TVideoProps } from './interface';
-declare const Video: (props: TVideoProps) => import("react/jsx-runtime").JSX.Element;
+declare const Video: <T extends TToken>(props: TVideoProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default Video;

package/components/Video/interface.d.ts

@@ -1,6 +1,7 @@
 import type { VideoHTMLAttributes } from 'react';
+import type { TToken } from '../../providers/Theme/interface';
 import type { TDefaultComponent } from '../../types/components';
-export interface TVideoProps extends TDefaultComponent, VideoHTMLAttributes<HTMLVideoElement> {
+export interface TVideoProps<T = TToken> extends TDefaultComponent<T>, VideoHTMLAttributes<HTMLVideoElement> {
     src: string;
     type?: string;
 }

package/components/WysiwygBlock/attributes.d.ts

@@ -0,0 +1,2 @@
+export declare const ariaAttributes: string[];
+export declare const booleanAttributes: string[];

package/components/WysiwygBlock/index.d.ts

@@ -1,3 +1,4 @@
+import type { TToken } from '../../providers/Theme/interface';
 import type TWysiwygBlockProps from './interface';
-declare const WysiwygBlock: ({ content, themeName, ...rest }: TWysiwygBlockProps) => import("react/jsx-runtime").JSX.Element;
+declare const WysiwygBlock: <T extends TToken>({ content, themeName, ...rest }: TWysiwygBlockProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default WysiwygBlock;

package/components/WysiwygBlock/interface.d.ts

@@ -1,5 +1,6 @@
+import type { TToken } from '../../providers/Theme/interface';
 import type { TDefaultComponent } from '../../types/components';
-interface TWysiwygBlockProps extends TDefaultComponent {
+interface TWysiwygBlockProps<T = TToken> extends TDefaultComponent<T> {
     content: string;
 }
 export default TWysiwygBlockProps;

package/components/fields/Checkbox/Checkbox.interface.d.ts

@@ -1,7 +1,8 @@
 import type React from 'react';
 import type { AriaCheckboxProps } from 'react-aria';
+import type { TToken } from '../../../providers/Theme/interface';
 import type { TDefaultComponent } from '../../../types/components';
-export interface TCheckboxProps extends TDefaultComponent, AriaCheckboxProps {
+export interface TCheckboxProps<T = TToken> extends TDefaultComponent<T>, AriaCheckboxProps {
     label: string;
     isError?: boolean;
     errorMessage?: string;

package/components/fields/Checkbox/index.d.ts

@@ -1,3 +1,4 @@
+import type { TToken } from '../../../providers/Theme/interface';
 import type { TCheckboxProps } from './Checkbox.interface';
-declare const Checkbox: (props: TCheckboxProps) => import("react/jsx-runtime").JSX.Element;
+declare const Checkbox: <T extends TToken>(props: TCheckboxProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default Checkbox;

package/components/fields/CheckboxGroup/index.d.ts

@@ -1,3 +1,4 @@
+import type { TToken } from '../../../providers/Theme/interface';
 import type { TCheckboxGroupProps } from './interface';
-declare const CheckboxGroup: (props: TCheckboxGroupProps) => import("react/jsx-runtime").JSX.Element;
+declare const CheckboxGroup: <T extends TToken>(props: TCheckboxGroupProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default CheckboxGroup;

package/components/fields/CheckboxGroup/interface.d.ts

@@ -1,9 +1,10 @@
 import type React from 'react';
 import type { AriaCheckboxGroupItemProps } from 'react-aria';
 import type { CheckboxGroupProps } from 'react-stately';
+import type { TToken } from '../../../providers/Theme/interface';
 import type { TDefaultComponent } from '../../../types/components';
 import type { TCheckboxProps } from '../Checkbox/Checkbox.interface';
-export interface TCheckboxGroupProps extends TDefaultComponent, CheckboxGroupProps {
+export interface TCheckboxGroupProps<T = TToken> extends TDefaultComponent<T>, CheckboxGroupProps {
     children: React.ReactNode;
     isError?: boolean;
     isDisabled?: boolean;

package/components/fields/DatePicker/index.d.ts

@@ -1,3 +1,4 @@
+import type { TToken } from '../../../providers/Theme/interface';
 import type { TDatePickerProps } from './interface';
-declare function DatePicker({ popoverPlacement, tokens, customTheme, themeName, icon, description, buttonLabel, ...rest }: TDatePickerProps): import("react/jsx-runtime").JSX.Element;
+declare function DatePicker<T extends TToken>({ popoverPlacement, tokens, customTheme, themeName, icon, description, buttonLabel, ...rest }: TDatePickerProps<T>): import("react/jsx-runtime").JSX.Element;
 export default DatePicker;

package/components/fields/DatePicker/interface.d.ts

@@ -4,13 +4,14 @@ import type { RangeValue } from '@react-types/shared';
 import type React from 'react';
 import type { AriaPopoverProps } from 'react-aria';
 import type { OverlayTriggerState } from 'react-stately';
+import type { TToken } from '../../../providers/Theme/interface';
 import type { TDefaultComponent } from '../../../types/components';
 export interface TDateSegmentProps {
     segment: DateSegment;
     state: DateFieldState;
 }
 type PopoverPlacement = 'bottom' | 'bottom left' | 'bottom right' | 'bottom start' | 'bottom end' | 'top' | 'top left' | 'top right' | 'top start' | 'top end' | 'left' | 'left top' | 'left bottom' | 'start' | 'start top' | 'start bottom' | 'right' | 'right top' | 'right bottom' | 'end' | 'end top' | 'end bottom';
-export interface TDatePickerProps extends DatePickerStateOptions<DateValue>, TDefaultComponent {
+export interface TDatePickerProps<T = TToken> extends DatePickerStateOptions<DateValue>, TDefaultComponent<T> {
     label?: string;
     popoverPlacement?: PopoverPlacement;
     icon?: string;

package/components/fields/Radio/Radio.interface.d.ts

@@ -1,8 +1,9 @@
 import type React from 'react';
 import type { ChangeHandler, RefCallBack } from 'react-hook-form';
+import type { TToken } from '../../../providers/Theme/interface';
 import type { TDefaultComponent, TReactHookForm } from '../../../types/components';
-export type TFieldReactHookForm = TReactHookForm & TDefaultComponent;
-export interface TRadioProps extends TFieldReactHookForm {
+export type TFieldReactHookForm<T> = TReactHookForm & TDefaultComponent<T>;
+export interface TRadioProps<T = TToken> extends TFieldReactHookForm<T> {
     id: string;
     label: string;
     name: string;

package/components/fields/Radio/index.d.ts

@@ -1,4 +1,5 @@
+import type { TToken } from '../../../providers/Theme/interface';
 import type { TRadioProps } from './Radio.interface';
-declare const Radio: (props: TRadioProps) => import("react/jsx-runtime").JSX.Element;
-export declare const ReactHookFormRadio: (props: TRadioProps) => import("react/jsx-runtime").JSX.Element;
+declare const Radio: <T extends TToken>(props: TRadioProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const ReactHookFormRadio: <T extends TToken>(props: TRadioProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default Radio;

package/components/fields/RadioGroup/index.d.ts

@@ -1,3 +1,4 @@
+import type { TToken } from '../../../providers/Theme/interface';
 import type { TRadioGroupProps } from './interface';
-declare const RadioGroup: (props: TRadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+declare const RadioGroup: <T extends TToken>(props: TRadioGroupProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default RadioGroup;

package/components/fields/RadioGroup/interface.d.ts

@@ -1,6 +1,7 @@
 import type React from 'react';
+import type { TToken } from '../../../providers/Theme/interface';
 import type { TDefaultComponent } from '../../../types/components';
-export interface TRadioGroupProps extends TDefaultComponent {
+export interface TRadioGroupProps<T = TToken> extends TDefaultComponent<T> {
     children: React.ReactNode;
     isError?: boolean;
     isDisabled?: boolean;

package/components/fields/SearchField/index.d.ts

@@ -1,3 +1,4 @@
+import type { TToken } from '../../../providers/Theme/interface';
 import type TSearchProps from './interface';
-declare const SearchField: (props: TSearchProps) => import("react/jsx-runtime").JSX.Element;
+declare const SearchField: <T extends TToken>(props: TSearchProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default SearchField;

package/components/fields/SearchField/interface.d.ts

@@ -1,7 +1,8 @@
 import type React from 'react';
 import type { AriaSearchFieldProps } from 'react-aria';
+import type { TToken } from '../../../providers/Theme/interface';
 import type { TDefaultComponent } from '../../../types/components';
-export default interface TSearchProps extends AriaSearchFieldProps, TDefaultComponent {
+export default interface TSearchProps<T = TToken> extends AriaSearchFieldProps, TDefaultComponent<T> {
     disabled?: boolean;
     placeholder?: string;
     ariaLabel?: string;

package/components/fields/Select/Select.d.ts

@@ -1,4 +1,5 @@
+import type { TToken } from '../../../providers/Theme/interface';
 import type { TSelectProps } from './Select.interface';
-declare const Select: (props: TSelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const Select: <T extends TToken>(props: TSelectProps<T>) => import("react/jsx-runtime").JSX.Element;
 export declare const ReactHookFormSelect: (props: TSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default Select;