@cube-dev/ui-kit 0.16.3 → 0.17.0

package/types/components/overlays/NewNotifications/types.d.ts

@@ -1,13 +1,13 @@
 import { Key, ReactChild, ReactElement, ReactFragment, ReactNode } from 'react';
 import { NotificationAction, NotificationActionProps } from './NotificationView';
-export declare type CubeNotificationType = 'success' | 'danger' | 'attention';
-export declare type NotificationActionComponent = ReactElement<NotificationActionProps, typeof NotificationAction>;
-declare type NotificationActionType = NotificationActionComponent | [NotificationActionComponent] | [NotificationActionComponent, NotificationActionComponent];
-declare type NotificationActionCallbackArg = {
+export type CubeNotificationType = 'success' | 'danger' | 'attention';
+export type NotificationActionComponent = ReactElement<NotificationActionProps, typeof NotificationAction>;
+type NotificationActionType = NotificationActionComponent | [NotificationActionComponent] | [NotificationActionComponent, NotificationActionComponent];
+type NotificationActionCallbackArg = {
     onClose: () => void;
     onDismiss: () => void;
 };
-export declare type BaseNotificationProps = {
+export type BaseNotificationProps = {
     /**
      * @default 'attention'
      */
@@ -54,23 +54,23 @@ export declare type BaseNotificationProps = {
      */
     actions?: ((arg: NotificationActionCallbackArg) => NotificationActionType) | NotificationActionType;
 };
-export declare type CubeNotificationProps = BaseNotificationProps;
-export declare type CubeNotifyApiProps = {
+export type CubeNotificationProps = BaseNotificationProps;
+export type CubeNotifyApiProps = {
     meta?: CubeNotificationMeta;
 } & CubeNotificationProps;
-export declare type CubeNotifyApiPropsWithID = {
+export type CubeNotifyApiPropsWithID = {
     id: NonNullable<CubeNotificationProps['id']>;
 } & CubeNotifyApiProps;
-export declare type CubeNotificationsApiNotifyCallback = (props: CubeNotifyApiProps) => {
+export type CubeNotificationsApiNotifyCallback = (props: CubeNotifyApiProps) => {
     id: Key;
     update: (props: Partial<CubeNotifyApiProps>) => void;
     remove: () => void;
 };
-export declare type CubeNotificationsApiNotifyAction = CubeNotificationsApiNotifyCallback & Record<CubeNotificationType, CubeNotificationsApiNotifyCallback>;
-export declare type CubeNotificationsApi = {
+export type CubeNotificationsApiNotifyAction = CubeNotificationsApiNotifyCallback & Record<CubeNotificationType, CubeNotificationsApiNotifyCallback>;
+export type CubeNotificationsApi = {
     notify: CubeNotificationsApiNotifyAction;
     update: (id: Key, props: Partial<CubeNotifyApiProps>) => void;
     remove: (id: Key) => void;
 };
-export declare type CubeNotificationMeta = Record<string, unknown>;
+export type CubeNotificationMeta = Record<string, unknown>;
 export {};

package/types/components/overlays/Toasts/Toast.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { CubeToastsApiProps } from './types';
-export declare type ToastProps = {
+export type ToastProps = {
     /**
      * If set to true, when the component gets unmounted, notifications will not be removed from the bar
      *

package/types/components/overlays/Toasts/types.d.ts

@@ -1,6 +1,6 @@
 import type { Key, ReactChild, ReactFragment, ReactNode } from 'react';
 import type { CubeNotificationType, CubeNotifyApiProps } from '../NewNotifications';
-export declare type CubeToastsApiProps = {
+export type CubeToastsApiProps = {
     description: ReactChild | ReactFragment;
     header?: ReactChild | ReactFragment;
     id?: Key;
@@ -9,15 +9,15 @@ export declare type CubeToastsApiProps = {
     icon?: ReactNode;
     type?: CubeNotificationType;
 };
-export declare type CubeToastsApi = {
+export type CubeToastsApi = {
     toast: CubeToastsApiToastAction;
     update: (id: Key, props: Partial<CubeToastsApiProps>) => void;
     remove: (id: Key) => void;
 };
-export declare type CubeToastsApiToastCallback = (props: CubeToastsApiProps | ReactChild | ReactFragment) => {
+export type CubeToastsApiToastCallback = (props: CubeToastsApiProps | ReactChild | ReactFragment) => {
     id: Key;
     update: (props: Partial<CubeNotifyApiProps>) => void;
     remove: () => void;
 };
-export declare type CubeToastsApiToastShortcuts = Record<CubeNotificationType, CubeToastsApiToastCallback>;
-export declare type CubeToastsApiToastAction = CubeToastsApiToastCallback & CubeToastsApiToastShortcuts;
+export type CubeToastsApiToastShortcuts = Record<CubeNotificationType, CubeToastsApiToastCallback>;
+export type CubeToastsApiToastAction = CubeToastsApiToastCallback & CubeToastsApiToastShortcuts;

package/types/components/pickers/Menu/Menu.d.ts

@@ -10,8 +10,8 @@ export interface CubeMenuProps<T> extends ContainerStyleProps, AriaMenuProps<T>
     styles?: Styles;
     qa?: BaseProps['qa'];
 }
-declare type PartialMenuButton = Partial<MenuButtonProps>;
-declare type ItemComponent = <T>(props: ItemProps<T> & PartialMenuButton & {
+type PartialMenuButton = Partial<MenuButtonProps>;
+type ItemComponent = <T>(props: ItemProps<T> & PartialMenuButton & {
     wrapper?: (item: ReactElement) => ReactElement;
 }) => JSX.Element;
 declare const Item: ItemComponent;

package/types/components/pickers/Menu/MenuButton.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { CubeButtonProps } from '../../actions';
-export declare type MenuSelectionType = 'checkbox' | 'radio';
-export declare type MenuButtonProps = {
+export type MenuSelectionType = 'checkbox' | 'radio';
+export type MenuButtonProps = {
     postfix: ReactNode;
     selectionIcon?: MenuSelectionType;
     isSelectable?: boolean;

package/types/components/pickers/Menu/MenuSection.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { MenuItemProps } from './MenuItem';
-export declare type CubeMenuSectionProps<T> = MenuItemProps<T>;
+export type CubeMenuSectionProps<T> = MenuItemProps<T>;
 /** @private */
 export declare function MenuSection<T>(props: CubeMenuSectionProps<T>): JSX.Element;

package/types/components/pickers/Menu/MenuTrigger.d.ts

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import { PositionProps } from '@react-types/overlays';
 import { MenuTriggerProps as BaseTriggerProps } from '@react-types/menu';
-export declare type CubeMenuTriggerProps = BaseTriggerProps & PositionProps & {
+export type CubeMenuTriggerProps = BaseTriggerProps & PositionProps & {
     trigger?: string;
     isDisabled?: boolean;
     children: ReactNode[];

package/types/components/pickers/Menu/styled.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-export declare const StyledMenu: any;
-export declare const StyledDivider: any;
+export declare const StyledMenu: import("react").ComponentType<Omit<import("../../../tasty").Props, "variant"> & import("../../../tasty/tasty").WithVariant<import("../../../tasty/tasty").VariantMap>>;
+export declare const StyledDivider: import("react").ComponentType<Omit<import("../../../tasty").Props, "variant"> & import("../../../tasty/tasty").WithVariant<import("../../../tasty/tasty").VariantMap>>;
 export declare const StyledMenuHeader: import("react").ComponentType<{
     children?: import("react").ReactNode;
     ref?: import("react").Ref<unknown> | undefined;
@@ -54,13 +54,13 @@ export declare const StyledMenuHeader: import("react").ComponentType<{
     hide?: import("../../../tasty").ResponsiveStyleValue<boolean | undefined>;
     shadow?: import("../../../tasty").ResponsiveStyleValue<string | undefined>;
     radius?: import("../../../tasty").ResponsiveStyleValue<string | true | undefined>;
-    flow?: import("../../../tasty").ResponsiveStyleValue<"initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "unset" | "column" | "column-reverse" | "nowrap" | "row" | "row-reverse" | "wrap" | "wrap-reverse" | "dense" | undefined>;
+    flow?: import("../../../tasty").ResponsiveStyleValue<"initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "column" | "column-reverse" | "nowrap" | "row" | "row-reverse" | "wrap" | "wrap-reverse" | "dense" | undefined>;
     gridAreas?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.GridTemplateAreas | undefined>;
     gridColumns?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.GridTemplateColumns<string | number> | undefined>;
     gridRows?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.GridTemplateRows<string | number> | undefined>;
     preset?: import("../../../tasty").ResponsiveStyleValue<string | undefined>;
-    align?: import("../../../tasty").ResponsiveStyleValue<"initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | undefined>;
-    justify?: import("../../../tasty").ResponsiveStyleValue<"right" | "left" | "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | "legacy" | undefined>;
+    align?: import("../../../tasty").ResponsiveStyleValue<"initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | undefined>;
+    justify?: import("../../../tasty").ResponsiveStyleValue<"right" | "left" | "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | "legacy" | undefined>;
     block?: boolean | undefined;
     inline?: boolean | undefined;
     element?: `A${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `I${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;
@@ -78,8 +78,8 @@ export declare const StyledMenuHeader: import("react").ComponentType<{
     theme?: (string & {}) | "danger" | "default" | "special" | undefined;
     key?: import("react").Key | null | undefined;
 } & {}>;
-export declare const StyledMenuSection: any;
-export declare const StyledMenuItem: any;
+export declare const StyledMenuSection: import("react").ComponentType<Omit<import("../../../tasty").Props, "variant"> & import("../../../tasty/tasty").WithVariant<import("../../../tasty/tasty").VariantMap>>;
+export declare const StyledMenuItem: import("react").ComponentType<Omit<import("../../../tasty").Props, "variant"> & import("../../../tasty/tasty").WithVariant<import("../../../tasty/tasty").VariantMap>>;
 export declare const StyledMenuSectionHeading: import("react").ComponentType<{
     children?: import("react").ReactNode;
     ref?: import("react").Ref<unknown> | undefined;
@@ -133,13 +133,13 @@ export declare const StyledMenuSectionHeading: import("react").ComponentType<{
     hide?: import("../../../tasty").ResponsiveStyleValue<boolean | undefined>;
     shadow?: import("../../../tasty").ResponsiveStyleValue<string | undefined>;
     radius?: import("../../../tasty").ResponsiveStyleValue<string | true | undefined>;
-    flow?: import("../../../tasty").ResponsiveStyleValue<"initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "unset" | "column" | "column-reverse" | "nowrap" | "row" | "row-reverse" | "wrap" | "wrap-reverse" | "dense" | undefined>;
+    flow?: import("../../../tasty").ResponsiveStyleValue<"initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "column" | "column-reverse" | "nowrap" | "row" | "row-reverse" | "wrap" | "wrap-reverse" | "dense" | undefined>;
     gridAreas?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.GridTemplateAreas | undefined>;
     gridColumns?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.GridTemplateColumns<string | number> | undefined>;
     gridRows?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.GridTemplateRows<string | number> | undefined>;
     preset?: import("../../../tasty").ResponsiveStyleValue<string | undefined>;
-    align?: import("../../../tasty").ResponsiveStyleValue<"initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | undefined>;
-    justify?: import("../../../tasty").ResponsiveStyleValue<"right" | "left" | "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | "legacy" | undefined>;
+    align?: import("../../../tasty").ResponsiveStyleValue<"initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | undefined>;
+    justify?: import("../../../tasty").ResponsiveStyleValue<"right" | "left" | "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | "legacy" | undefined>;
     block?: boolean | undefined;
     inline?: boolean | undefined;
     element?: `A${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `I${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;

package/types/components/status/Spin/types.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { Styles } from '../../../tasty';
-export declare type SpinSize = 'small' | 'default' | 'large';
-export declare type CubeSpinProps = {
+export type SpinSize = 'small' | 'default' | 'large';
+export type CubeSpinProps = {
     /**
      * Size of the spin.
      * @default 'default'
@@ -15,9 +15,9 @@ export declare type CubeSpinProps = {
     children?: ReactNode;
     styles?: Styles;
 };
-export declare type SpinCubeProps = {
+export type SpinCubeProps = {
     position: 'top' | 'right' | 'bottom';
 };
-export declare type InternalSpinnerProps = {
+export type InternalSpinnerProps = {
     size: SpinSize;
 };

package/types/provider.d.ts

@@ -11,7 +11,7 @@ export interface ProviderProps extends Props {
     ref?: JSX.Element;
     root?: ForwardedRef<any>;
 }
-export declare type ProviderInsideProps = Omit<ProviderProps, 'styles' | 'breakpoints'>;
+export type ProviderInsideProps = Omit<ProviderProps, 'styles' | 'breakpoints'>;
 export declare const UIKitContext: import("react").Context<ProviderInsideProps>;
 export declare function Provider(allProps: PropsWithChildren<ProviderProps>): JSX.Element;
 export declare function useProviderProps<T extends Props = Props>(props: T): T;

package/types/shared/form.d.ts

@@ -1,13 +1,13 @@
 import { ReactNode } from 'react';
 import { Props, Styles } from '../tasty';
 /** Where to place label relative to input */
-export declare type LabelPosition = 'side' | 'top';
+export type LabelPosition = 'side' | 'top';
 /** The type of necessity indicator */
-export declare type NecessityIndicator = 'icon' | 'label';
+export type NecessityIndicator = 'icon' | 'label';
 /** The validation state of the field */
-export declare type ValidationState = 'invalid' | 'valid';
+export type ValidationState = 'invalid' | 'valid';
 /** On which event perform the validation for the field */
-export declare type ValidateTrigger = 'onBlur' | 'onChange' | 'onSubmit';
+export type ValidateTrigger = 'onBlur' | 'onChange' | 'onSubmit';
 export interface OptionalFieldBaseProps {
     /** The label of the field */
     label?: string;
@@ -63,12 +63,12 @@ export interface FormFieldProps extends FormBaseProps {
     /** Whether the element should receive focus on render */
     autoFocus?: boolean;
 }
-export declare type ValidationRuleBase = {
+export type ValidationRuleBase = {
     [key: string]: any;
 } & {
     required?: boolean;
     message?: string;
 };
-export declare type ValidationRule = ValidationRuleBase & {
+export type ValidationRule = ValidationRuleBase & {
     validator?: (ValidationRule: any, any: any) => Promise<string | void>;
 };

package/types/shared/index.d.ts

@@ -1,4 +1,4 @@
 export * from './form';
-export declare type Axis = 'top' | 'right' | 'bottom' | 'left';
-export declare type PlacementAxis = Axis | 'center';
-export declare type RangeValue<T> = [T, T];
+export type Axis = 'top' | 'right' | 'bottom' | 'left';
+export type PlacementAxis = Axis | 'center';
+export type RangeValue<T> = [T, T];

package/types/stories/components/StyledButton.d.ts

@@ -56,13 +56,13 @@ export declare const StyledButton: import("react").ComponentType<{
     hide?: import("../../tasty").ResponsiveStyleValue<boolean | undefined>;
     shadow?: import("../../tasty").ResponsiveStyleValue<string | undefined>;
     radius?: import("../../tasty").ResponsiveStyleValue<string | true | undefined>;
-    flow?: import("../../tasty").ResponsiveStyleValue<"initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "unset" | "column" | "column-reverse" | "nowrap" | "row" | "row-reverse" | "wrap" | "wrap-reverse" | "dense" | undefined>;
+    flow?: import("../../tasty").ResponsiveStyleValue<"initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "column" | "column-reverse" | "nowrap" | "row" | "row-reverse" | "wrap" | "wrap-reverse" | "dense" | undefined>;
     gridAreas?: import("../../tasty").ResponsiveStyleValue<import("csstype").Property.GridTemplateAreas | undefined>;
     gridColumns?: import("../../tasty").ResponsiveStyleValue<import("csstype").Property.GridTemplateColumns<string | number> | undefined>;
     gridRows?: import("../../tasty").ResponsiveStyleValue<import("csstype").Property.GridTemplateRows<string | number> | undefined>;
     preset?: import("../../tasty").ResponsiveStyleValue<string | undefined>;
-    align?: import("../../tasty").ResponsiveStyleValue<"initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | undefined>;
-    justify?: import("../../tasty").ResponsiveStyleValue<"right" | "left" | "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | "legacy" | undefined>;
+    align?: import("../../tasty").ResponsiveStyleValue<"initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | undefined>;
+    justify?: import("../../tasty").ResponsiveStyleValue<"right" | "left" | "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | "legacy" | undefined>;
     size?: "small" | (string & {}) | "medium" | "large" | undefined;
     block?: boolean | undefined;
     inline?: boolean | undefined;

package/types/styled/styled.d.ts

@@ -1,6 +1,6 @@
 import { ComponentType } from 'react';
 import { Styles, StylesInterface } from '../tasty';
-export declare type StyledProps<K extends (keyof StylesInterface)[], DefaultProps> = {
+export type StyledProps<K extends (keyof StylesInterface)[], DefaultProps> = {
     /** The name of the element. It can be used to override styles in context. */
     name?: string;
     /** The tag name of the element. */
@@ -13,14 +13,14 @@ export declare type StyledProps<K extends (keyof StylesInterface)[], DefaultProp
     /** The list of styles that can be provided by props */
     styleProps?: K;
 };
-declare type StyledPropsWithDefaults<Props extends {
+type StyledPropsWithDefaults<Props extends {
     styles?: Styles;
 }, DefaultProps extends Partial<Props>> = keyof DefaultProps extends never ? Props : {
     [key in Extract<keyof Props, keyof DefaultProps>]?: Props[key];
 } & {
     [key in keyof Omit<Props, keyof DefaultProps>]: Props[key];
 };
-declare type EitherLegacyPropsOrInlined<K extends (keyof StylesInterface)[], DefaultProps> = ((Pick<StyledProps<K, DefaultProps>, 'name' | 'tag' | 'styles'> & {
+type EitherLegacyPropsOrInlined<K extends (keyof StylesInterface)[], DefaultProps> = ((Pick<StyledProps<K, DefaultProps>, 'name' | 'tag' | 'styles'> & {
     /**
      * @deprecated
      */

package/types/tasty/index.d.ts

@@ -10,7 +10,7 @@ export * from './styles/list';
 export * from './providers/BreakpointsProvider';
 export * from './utils/mergeStyles';
 export * from './utils/warnings';
-export * from './utils/get-display-name';
+export * from './utils/getDisplayName';
 export type { TastyProps, GlobalTastyProps, AllBasePropsWithMods, } from './tasty';
 export type { AllBaseProps, BaseProps, BaseStyleProps, DimensionStyleProps, ColorStyleProps, OuterStyleProps, PositionStyleProps, TextStyleProps, BlockStyleProps, ContainerStyleProps, BasePropsWithoutChildren, Props, FlowStyleProps, ShortGridStyles, GlobalStyledProps, TagNameProps, TagName, } from './types';
 export type { StylesInterface, Styles, StylesWithoutSelectors, NoType, Selector, SuffixForSelector, NotSelector, } from './styles/types';

package/types/tasty/styles/predefined.d.ts

@@ -1,8 +1,8 @@
 import { RawStyleHandler, StyleHandler } from '../utils/styles';
-declare type StyleHandlerMap = Record<string, StyleHandler[]>;
+type StyleHandlerMap = Record<string, StyleHandler[]>;
 export declare const STYLE_HANDLER_MAP: StyleHandlerMap;
 export declare function defineCustomStyle(names: string[] | StyleHandler, handler?: RawStyleHandler): void;
-declare type ConverterHandler = (s: string | boolean | number | undefined) => string | undefined;
+type ConverterHandler = (s: string | boolean | number | undefined) => string | undefined;
 export declare function defineStyleAlias(styleName: string, cssStyleName?: string, converter?: ConverterHandler): void;
 export declare function predefine(): {
     STYLE_HANDLER_MAP: StyleHandlerMap;

package/types/tasty/styles/types.d.ts

@@ -1,9 +1,9 @@
 import { CSSProperties } from 'react';
 import { ResponsiveStyleValue } from '../utils/styles';
-declare type NamedColor = 'purple' | 'purple-text' | 'purple-01' | 'purple-02' | 'purple-03' | 'purple-04' | 'dark' | 'dark-01' | 'dark-02' | 'dark-03' | 'dark-04' | 'dark-05' | 'text' | 'primary' | 'disabled' | 'disabled-bg' | 'disabled-text' | 'danger' | 'danger-bg' | 'danger-text' | 'success' | 'success-bg' | 'success-text' | 'note' | 'note-bg' | 'note-text' | 'white' | 'light' | 'light-grey' | 'black' | 'pink' | 'pink-01' | 'pink-02' | 'border' | 'clear' | 'shadow' | 'draft' | 'minor';
-declare type Digit = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
-declare type OpaquePercentage = '' | `.${Digit}` | `.${Digit}${Digit}` | '.100';
-export declare type NoType = false | null | undefined;
+type NamedColor = 'purple' | 'purple-text' | 'purple-01' | 'purple-02' | 'purple-03' | 'purple-04' | 'dark' | 'dark-01' | 'dark-02' | 'dark-03' | 'dark-04' | 'dark-05' | 'text' | 'primary' | 'disabled' | 'disabled-bg' | 'disabled-text' | 'danger' | 'danger-bg' | 'danger-text' | 'success' | 'success-bg' | 'success-text' | 'note' | 'note-bg' | 'note-text' | 'white' | 'light' | 'light-grey' | 'black' | 'pink' | 'pink-01' | 'pink-02' | 'border' | 'clear' | 'shadow' | 'draft' | 'minor';
+type Digit = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+type OpaquePercentage = '' | `.${Digit}` | `.${Digit}${Digit}` | '.100';
+export type NoType = false | null | undefined;
 export interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font' | 'outline' | 'type'> {
     /** Set the background color of the element.
      * ```
@@ -103,13 +103,13 @@ export interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' |
      */
     justify?: CSSProperties['justifyItems'] | CSSProperties['justifyContent'];
 }
-export declare type SuffixForSelector = '&' | '.' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z';
-export declare type Selector = `${SuffixForSelector}${string}`;
-export declare type NotSelector = Exclude<string, Selector | keyof StylesInterface>;
-export declare type StylesWithoutSelectors = {
+export type SuffixForSelector = '&' | '.' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z';
+export type Selector = `${SuffixForSelector}${string}`;
+export type NotSelector = Exclude<string, Selector | keyof StylesInterface>;
+export type StylesWithoutSelectors = {
     [key in keyof StylesInterface]?: ResponsiveStyleValue<StylesInterface[key]>;
 };
-export declare type Styles = StylesWithoutSelectors & {
+export type Styles = StylesWithoutSelectors & {
     [key: string]: ResponsiveStyleValue<string | number | boolean | undefined> | StylesWithoutSelectors;
 };
 export {};

package/types/tasty/tasty.d.ts

@@ -2,10 +2,17 @@ import { ComponentType } from 'react';
 import { AllBaseProps, BaseProps, BaseStyleProps, Props } from './types';
 import { Styles, StylesInterface } from './styles/types';
 import { ResponsiveStyleValue } from './utils/styles';
-declare type StyleList = readonly (keyof {
+type StyleList = readonly (keyof {
     [key in keyof StylesInterface]: StylesInterface[key];
 })[];
-export declare type TastyProps<K extends StyleList, DefaultProps = Props> = {
+export type PropsWithStyles = {
+    styles?: Styles;
+} & Omit<Props, 'styles'>;
+export type VariantMap = Record<string, Styles>;
+export type WithVariant<V extends VariantMap> = {
+    variant?: keyof V;
+};
+export type TastyProps<K extends StyleList, V extends VariantMap, DefaultProps = Props> = {
     /** The tag name of the element. */
     as?: string;
     /** Default styles of the element. */
@@ -13,24 +20,21 @@ export declare type TastyProps<K extends StyleList, DefaultProps = Props> = {
     /** The list of styles that can be provided by props */
     styleProps?: K;
     element?: BaseProps['element'];
-} & Partial<Omit<DefaultProps, 'as' | 'styles' | 'styleProps'>>;
+    variants?: V;
+} & Partial<Omit<DefaultProps, 'as' | 'styles' | 'styleProps'>> & Pick<BaseProps, 'qa' | 'qaVal'> & WithVariant<V>;
 export interface GlobalTastyProps {
     breakpoints?: number[];
 }
-export declare type AllBasePropsWithMods<K extends StyleList> = AllBaseProps & {
+export type AllBasePropsWithMods<K extends StyleList> = AllBaseProps & {
     [key in K[number]]?: ResponsiveStyleValue<StylesInterface[key]>;
 } & BaseStyleProps;
-declare type TastyPropsWithDefaults<Props extends {
-    styles?: Styles;
-}, DefaultProps extends Partial<Props>> = keyof DefaultProps extends never ? Props : {
+type TastyComponentPropsWithDefaults<Props extends PropsWithStyles, DefaultProps extends Partial<Props>> = keyof DefaultProps extends never ? Props : {
     [key in Extract<keyof Props, keyof DefaultProps>]?: Props[key];
 } & {
     [key in keyof Omit<Props, keyof DefaultProps>]: Props[key];
 };
-declare function tasty<K extends StyleList>(options: TastyProps<K>, secondArg?: never): any;
+declare function tasty<K extends StyleList, V extends VariantMap>(options: TastyProps<K, V>, secondArg?: never): ComponentType<Omit<Props, 'variant'> & WithVariant<V>>;
 declare function tasty(selector: string, styles?: Styles): any;
-declare function tasty<Props extends {
-    styles?: Styles;
-}, DefaultProps extends Partial<Props> = Partial<Props>>(Component: ComponentType<Props>, options?: TastyProps<never, Props>): ComponentType<TastyPropsWithDefaults<Props, DefaultProps>>;
-declare const Element: any;
+declare function tasty<Props extends PropsWithStyles, DefaultProps extends Partial<Props> = Partial<Props>>(Component: ComponentType<Props>, options?: TastyProps<never, never, Props>): ComponentType<TastyComponentPropsWithDefaults<Props, DefaultProps>>;
+declare const Element: ComponentType<Omit<Props, "variant"> & WithVariant<VariantMap>>;
 export { tasty, Element };

package/types/tasty/types.d.ts

@@ -4,7 +4,7 @@ import { BASE_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_ST
 export interface GlobalStyledProps {
     breakpoints?: number[];
 }
-declare type Caps = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z';
+type Caps = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z';
 export interface BasePropsWithoutChildren extends Pick<AllHTMLAttributes<HTMLElement>, 'className' | 'role' | 'id'> {
     /** QA ID for e2e testing. An alias for `data-qa` attribute. */
     qa?: string;
@@ -44,16 +44,16 @@ export interface BaseProps extends BasePropsWithoutChildren, Pick<AllHTMLAttribu
 export interface AllBaseProps<K extends keyof HTMLElementTagNameMap = 'div'> extends BaseProps, Omit<AllHTMLAttributes<HTMLElementTagNameMap[K]>, 'style' | 'size' | 'disabled' | 'hidden' | 'css' | 'color' | 'height' | 'width'> {
     as?: string;
 }
-export declare type BaseStyleProps = Pick<Styles, typeof BASE_STYLES[number]>;
-export declare type PositionStyleProps = Pick<Styles, typeof POSITION_STYLES[number]>;
-export declare type BlockStyleProps = Pick<Styles, typeof BLOCK_STYLES[number]>;
-export declare type ColorStyleProps = Pick<Styles, typeof COLOR_STYLES[number]>;
-export declare type TextStyleProps = Pick<Styles, typeof TEXT_STYLES[number]>;
-export declare type DimensionStyleProps = Pick<Styles, typeof DIMENSION_STYLES[number]>;
-export declare type FlowStyleProps = Pick<Styles, typeof FLOW_STYLES[number]>;
-export declare type ContainerStyleProps = Pick<Styles, typeof CONTAINER_STYLES[number]>;
-export declare type OuterStyleProps = Pick<Styles, typeof OUTER_STYLES[number]>;
-export declare type ShortGridStyles = {
+export type BaseStyleProps = Pick<Styles, (typeof BASE_STYLES)[number]>;
+export type PositionStyleProps = Pick<Styles, (typeof POSITION_STYLES)[number]>;
+export type BlockStyleProps = Pick<Styles, (typeof BLOCK_STYLES)[number]>;
+export type ColorStyleProps = Pick<Styles, (typeof COLOR_STYLES)[number]>;
+export type TextStyleProps = Pick<Styles, (typeof TEXT_STYLES)[number]>;
+export type DimensionStyleProps = Pick<Styles, (typeof DIMENSION_STYLES)[number]>;
+export type FlowStyleProps = Pick<Styles, (typeof FLOW_STYLES)[number]>;
+export type ContainerStyleProps = Pick<Styles, (typeof CONTAINER_STYLES)[number]>;
+export type OuterStyleProps = Pick<Styles, (typeof OUTER_STYLES)[number]>;
+export type ShortGridStyles = {
     template?: Styles['gridTemplate'];
     columns?: Styles['gridColumns'];
     rows?: Styles['gridRows'];
@@ -62,7 +62,7 @@ export declare type ShortGridStyles = {
 export interface Props {
     [key: string]: any;
 }
-export declare type TagName = keyof HTMLElementTagNameMap;
+export type TagName = keyof HTMLElementTagNameMap;
 export interface TagNameProps {
     /** The tag name you want to use for the element */
     as?: TagName;

package/types/tasty/utils/cache-wrapper.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Create a function that caches the result up to the limit.
+ */
+export declare function cacheWrapper<T extends (firstArg: any, secondArg?: string) => any>(handler: T, limit?: number): T;

package/types/tasty/utils/case-converter.d.ts

@@ -0,0 +1 @@
+export declare function camelToKebab(str: string): string;

package/types/tasty/utils/modAttrs.d.ts

@@ -2,4 +2,6 @@
  * Generate data DOM attributes from modifier map.
  */
 import { AllBaseProps } from '../types';
-export declare function modAttrs(map: AllBaseProps['mods']): Record<string, string> | null;
+declare function modAttrs(map: AllBaseProps['mods']): Record<string, string> | null;
+declare const _modAttrs: typeof modAttrs;
+export { _modAttrs as modAttrs };

package/types/tasty/utils/renderStyles.d.ts

@@ -7,4 +7,4 @@ export declare function isSelector(key: any): any;
  * @param {string} [suffix]
  * @return {string}
  */
-export declare function renderStyles(styles: Styles, responsive: number[], suffix?: string): any;
+export declare function renderStyles(styles?: Styles, responsive?: number[], suffix?: string): any;

package/types/tasty/utils/styles.d.ts

@@ -1,18 +1,18 @@
 import { Styles } from '../styles/types';
-export declare type StyleValue<T = string> = T | boolean | number | null | undefined;
-export declare type StyleValueStateMap<T = string> = {
+export type StyleValue<T = string> = T | boolean | number | null | undefined;
+export type StyleValueStateMap<T = string> = {
     [key: string]: StyleValue<T>;
 };
-export declare type ResponsiveStyleValue<T = string> = StyleValue<T> | StyleValue<T>[] | StyleValueStateMap<T> | StyleValueStateMap<T>[];
-export declare type ComputeModel = string | number;
-export declare type CSSMap = {
+export type ResponsiveStyleValue<T = string> = StyleValue<T> | StyleValue<T>[] | StyleValueStateMap<T> | StyleValueStateMap<T>[];
+export type ComputeModel = string | number;
+export type CSSMap = {
     $?: string | string[];
 } & {
     [key: string]: string | string[];
 };
-export declare type StyleHandlerResult = CSSMap | CSSMap[] | void;
-export declare type RawStyleHandler = (value: StyleValueStateMap, suffix?: string) => StyleHandlerResult;
-export declare type StyleHandler = RawStyleHandler & {
+export type StyleHandlerResult = CSSMap | CSSMap[] | void;
+export type RawStyleHandler = (value: StyleValueStateMap, suffix?: string) => StyleHandlerResult;
+export type StyleHandler = RawStyleHandler & {
     __lookupStyles: string[];
 };
 export interface StyleStateData {
@@ -37,8 +37,8 @@ export interface ParsedColor {
     name?: string;
     opacity?: number;
 }
-export declare type StyleStateDataList = StyleStateData[];
-export declare type StyleStateDataListMap = {
+export type StyleStateDataList = StyleStateData[];
+export type StyleStateDataListMap = {
     [key: string]: StyleStateDataList;
 };
 /** An object that describes a relation between specific modifiers and style value. **/
@@ -58,23 +58,23 @@ export interface RenderedStyleState {
     /** The value to apply */
     value: string;
 }
-export declare type ComputeUnit = string | (string | string[])[];
-export declare type StyleStateList = StyleState[];
-export declare type RenderedStyleStateList = RenderedStyleState[];
-export declare type StyleMap = {
+export type ComputeUnit = string | (string | string[])[];
+export type StyleStateList = StyleState[];
+export type RenderedStyleStateList = RenderedStyleState[];
+export type StyleMap = {
     [key: string]: ResponsiveStyleValue;
 };
-export declare type StyleStateMap = {
+export type StyleStateMap = {
     [key: string]: StyleState;
 };
-export declare type RenderedStyleStateMap = {
+export type RenderedStyleStateMap = {
     [key: string]: RenderedStyleState;
 };
-export declare type StyleStateMapList = StyleStateMap[];
-export declare type RenderedStyleStateMapList = {
+export type StyleStateMapList = StyleStateMap[];
+export type RenderedStyleStateMapList = {
     [key: string]: RenderedStyleStateMap;
 };
-export declare type StyleStateListMap = {
+export type StyleStateListMap = {
     [key: string]: StyleStateList;
 };
 export declare const CUSTOM_UNITS: {
@@ -189,8 +189,4 @@ export declare const COMPUTE_FUNC_MAP: {
 export declare function computeState(computeModel: ComputeModel, valueMap: (number | boolean)[] | {
     [key: string]: boolean;
 } | Function): any;
-/**
- * Create a function that caches the result up to the limit.
- */
-export declare function cacheWrapper<T extends (firstArg: any, secondArg?: string) => any>(handler: T, limit?: number): T;
 export {};

package/types/utils/react/mergeProps.d.ts

@@ -1,10 +1,5 @@
 import { Props } from '../../tasty';
-declare type TupleTypes<T> = {
-    [P in keyof T]: T[P];
-} extends {
-    [key: number]: infer V;
-} ? V : never;
-declare type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+type Merge<T> = T extends [infer F, ...infer R] ? F extends undefined ? Merge<R> : F & Merge<R> : T extends [infer L] ? L : unknown;
 /**
  * Merges multiple props objects together. Event handlers are chained,
  * classNames are combined, and ids are deduplicated - different ids
@@ -12,5 +7,5 @@ declare type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) e
  * For all other props, the last prop object overrides all previous ones.
  * @param args - Multiple sets of props to merge together.
  */
-export declare function mergeProps<T extends (Props | undefined)[], K = UnionToIntersection<TupleTypes<T>>>(...args: T): K;
+export declare function mergeProps<T extends (Props | undefined)[], K = Merge<T>>(...args: T): K;
 export {};