@koobiq/react-components 0.0.1-beta.21 → 0.0.1-beta.22

package/dist/components/Alert/Alert.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
+import { deprecate } from "@koobiq/logger";
 import { polymorphicForwardRef, mergeProps, isNotNil, clsx } from "@koobiq/react-core";
 import { IconXmark16 } from "@koobiq/react-icons";
 import { useLocalizedStringFormatter } from "@koobiq/react-primitives";
@@ -14,6 +15,8 @@ const Alert = polymorphicForwardRef(
     compact = false,
     as: Tag = "div",
     hideIcon = false,
+    isColored: isColoredProp = false,
+    isCompact: isCompactProp = false,
     slotProps,
     icon,
     onClose,
@@ -23,6 +26,18 @@ const Alert = polymorphicForwardRef(
     children,
     ...other
   }, ref) => {
+    const isColored = isColoredProp || colored;
+    const isCompact = isCompactProp || compact;
+    if (process.env.NODE_ENV !== "production" && colored) {
+      deprecate(
+        'The "colored" prop is deprecated. Use "isColored" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && compact) {
+      deprecate(
+        'The "compact" prop is deprecated. Use "isCompact" prop to replace it.'
+      );
+    }
     const stringFormatter = useLocalizedStringFormatter(intlMessages);
     const contentProps = mergeProps(
       {
@@ -34,7 +49,7 @@ const Alert = polymorphicForwardRef(
       {
         icon,
         status,
-        compact
+        isCompact
       },
       slotProps?.statusIcon
     );
@@ -56,8 +71,8 @@ const Alert = polymorphicForwardRef(
         className: clsx(
           s.base,
           s[status],
-          compact && s.compact,
-          colored && s.colored,
+          isCompact && s.compact,
+          isColored && s.colored,
           className
         ),
         children: [

package/dist/components/Alert/components/AlertIcon/AlertIcon.js

@@ -4,12 +4,12 @@ import { clsx } from "@koobiq/react-core";
 import s from "./AlertIcon.module.css.js";
 import { matchStatusToIcon } from "./utils.js";
 const AlertIcon = forwardRef(
-  ({ status = "info", icon, compact }, ref) => /* @__PURE__ */ jsx(
+  ({ status = "info", icon, isCompact }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx(s.base, status && s[status], compact && s.compact),
+      className: clsx(s.base, status && s[status], isCompact && s.compact),
       ref,
-      children: icon || matchStatusToIcon[compact ? "compact" : "normal"][status]
+      children: icon || matchStatusToIcon[isCompact ? "compact" : "normal"][status]
     }
   )
 );

package/dist/components/Alert/components/AlertIcon/types.d.ts

@@ -1,2 +1,2 @@
 import type { AlertBaseProps } from '../../index';
-export type AlertIconProps = Pick<AlertBaseProps, 'status' | 'compact' | 'icon'>;
+export type AlertIconProps = Pick<AlertBaseProps, 'status' | 'icon' | 'isCompact'>;

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

@@ -2,6 +2,22 @@ import type { ComponentPropsWithRef, ReactNode } from 'react';
 import type { IconButtonProps } from '../IconButton';
 export declare const alertPropStatus: readonly ["info", "warning", "error", "success"];
 export type AlertPropStatus = (typeof alertPropStatus)[number];
+type AlertBaseDeprecatedProps = {
+    /**
+     * @deprecated
+     * The "compact" prop is deprecated. Use "isCompact" prop to replace it.
+     *
+     * If `true`, compact mode will be enabled in the alert.
+     * */
+    compact?: boolean;
+    /**
+     * @deprecated
+     * The "colored" prop is deprecated. Use "isColored" prop to replace it.
+     *
+     * If `true`, background color will be enabled in the alert.
+     * */
+    colored?: boolean;
+};
 export type AlertBaseProps = {
     /**
      * The status of the component.
@@ -12,12 +28,12 @@ export type AlertBaseProps = {
      * If `true`, compact mode will be enabled in the alert.
      * @default false
      */
-    compact?: boolean;
+    isCompact?: boolean;
     /**
      * If `true`, background color will be enabled in the alert.
      * @default false
      */
-    colored?: boolean;
+    isColored?: boolean;
     /** Additional CSS-classes. */
     className?: string;
     /**
@@ -41,4 +57,5 @@ export type AlertBaseProps = {
         statusIcon?: ComponentPropsWithRef<'div'>;
         closeIcon?: IconButtonProps;
     };
-};
+} & AlertBaseDeprecatedProps;
+export {};

package/dist/components/Backdrop/Backdrop.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import "react";
+import { deprecate } from "@koobiq/logger";
 import { polymorphicForwardRef, useDOMRef, clsx } from "@koobiq/react-core";
 import { Transition } from "react-transition-group";
 import s from "./Backdrop.module.css.js";
@@ -9,14 +10,21 @@ const Backdrop = polymorphicForwardRef(
     const {
       as: Tag = "div",
       duration = 300,
-      open: openProp = false,
+      open = false,
+      isOpen: isOpenProp = false,
       style: styleProp,
       zIndex,
       children,
       className,
       ...other
     } = props;
+    const isOpen = isOpenProp || open;
     const domRef = useDOMRef(ref);
+    if (process.env.NODE_ENV !== "production" && open) {
+      deprecate(
+        'The "open" prop is deprecated. Use "isOpen" prop to replace it.'
+      );
+    }
     const style = {
       "--backdrop-z-index": zIndex,
       "--backdrop-duration": `${duration}ms`,
@@ -25,7 +33,7 @@ const Backdrop = polymorphicForwardRef(
     return /* @__PURE__ */ jsx(
       Transition,
       {
-        in: openProp,
+        in: isOpen,
         nodeRef: domRef,
         timeout: duration,
         appear: true,

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

@@ -1,16 +1,27 @@
 import type { CSSProperties, ReactNode } from 'react';
+type BackdropBaseDeprecatedProps = {
+    /**
+     * @deprecated
+     * The "open" prop is deprecated. Use "isOpen" prop to replace it.
+     *
+     * If `true`, the component is shown.
+     * */
+    open?: boolean;
+};
 export type BackdropBaseProps = {
     /** If `true`, the component is shown. */
-    open?: boolean;
+    isOpen?: boolean;
     /** Additional CSS-classes. */
     className?: string;
     /** The content of the component. */
     children?: ReactNode;
     /** Inline styles. */
     style?: CSSProperties;
+    /** The duration of the transition, in milliseconds. */
     duration?: number;
     /** z-index. */
     zIndex?: CSSProperties['zIndex'];
     /** Unique identifier for testing purposes. */
     'data-testid'?: string;
-};
+} & BackdropBaseDeprecatedProps;
+export {};

package/dist/components/Button/Button.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { deprecate } from "@koobiq/logger";
 import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
 import { Button as Button$1 } from "@koobiq/react-primitives";
 import s from "./Button.module.css.js";
@@ -7,6 +8,8 @@ const Button = polymorphicForwardRef(
   ({
     as: Tag = "button",
     variant = "contrast-filled",
+    isLoading: isLoadingProp = false,
+    isDisabled: isDisabledProp = false,
     onlyIcon = false,
     fullWidth = false,
     progress = false,
@@ -17,31 +20,43 @@ const Button = polymorphicForwardRef(
     className,
     ...other
   }, ref) => {
+    const isLoading = isLoadingProp || progress;
+    const isDisabled = isDisabledProp || disabled;
+    if (process.env.NODE_ENV !== "production" && progress) {
+      deprecate(
+        'The "progress" prop is deprecated. Use "isLoading" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && disabled) {
+      deprecate(
+        'The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
+      );
+    }
     const iconOnly = (!children || onlyIcon) && (startIcon || endIcon);
     const classNameFn = ({
-      hovered,
-      disabled: disabled2,
-      loading,
-      focusVisible,
-      pressed
+      isHovered,
+      isDisabled: isDisabled2,
+      isLoading: isLoading2,
+      isPressed,
+      isFocusVisible
     }) => clsx(
       s.base,
       variant && s[variant],
-      hovered && s.hovered,
-      pressed && s.pressed,
+      isHovered && s.hovered,
+      isPressed && s.pressed,
       onlyIcon && s.onlyIcon,
-      disabled2 && s.disabled,
-      loading && s.progress,
+      isDisabled2 && s.disabled,
+      isLoading2 && s.loading,
       fullWidth && s.fullWidth,
-      focusVisible && s.focusVisible,
+      isFocusVisible && s.focusVisible,
       className
     );
     return /* @__PURE__ */ jsxs(
       Button$1,
       {
         as: Tag,
-        loading: progress,
-        disabled,
+        isLoading,
+        isDisabled,
         className: classNameFn,
         ...other,
         ref,
@@ -54,7 +69,7 @@ const Button = polymorphicForwardRef(
               endIcon
             ] })
           ] }),
-          progress && /* @__PURE__ */ jsx("div", { className: s.loader })
+          isLoading && /* @__PURE__ */ jsx("div", { className: s.loader })
         ]
       }
     );

package/dist/components/Button/Button.module.css.js

@@ -1,24 +1,26 @@
 const base = "kbq-button-d95067";
 const hovered = "kbq-button-hovered-037da3";
-const progress = "kbq-button-progress-f454f0";
+const loading = "kbq-button-loading-dbac1d";
 const pressed = "kbq-button-pressed-508d5d";
 const focusVisible = "kbq-button-focusVisible-e63c2b";
 const disabled = "kbq-button-disabled-1df5f6";
 const fullWidth = "kbq-button-fullWidth-c149b8";
 const onlyIcon = "kbq-button-onlyIcon-e1268c";
 const loader = "kbq-button-loader-467f28";
+const progress = "kbq-button-progress-f454f0";
 const content = "kbq-button-content-2e3014";
 const label = "kbq-button-label-9f6f6b";
 const s = {
   base,
   hovered,
-  progress,
+  loading,
   pressed,
   focusVisible,
   disabled,
   fullWidth,
   onlyIcon,
   loader,
+  progress,
   content,
   label,
   "contrast-filled": "kbq-button-contrast-filled-606131",
@@ -38,6 +40,7 @@ export {
   hovered,
   label,
   loader,
+  loading,
   onlyIcon,
   pressed,
   progress

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

@@ -3,6 +3,24 @@ import type { ExtendableProps } from '@koobiq/react-core';
 import type { HoverEvent, UseButtonProps } from '@koobiq/react-primitives';
 export declare const buttonPropVariant: readonly ["contrast-filled", "contrast-transparent", "fade-contrast-filled", "fade-contrast-outline", "fade-theme-outline", "theme-transparent"];
 export type ButtonPropVariant = (typeof buttonPropVariant)[number];
+type ButtonBaseDeprecatedProps = {
+    /**
+     * @deprecated
+     * The "progress" prop is deprecated. Use "isLoading" prop to replace it.
+     *
+     * If `true`, the progress indicator is shown and the button becomes disabled.
+     * @default false
+     * */
+    progress?: boolean;
+    /**
+     * @deprecated
+     * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
+     *
+     * If `true`, the component is disabled.
+     * @default false
+     * */
+    disabled?: boolean;
+};
 export type ButtonBaseProps = ExtendableProps<{
     /** The content of the component. */
     children?: ReactNode;
@@ -15,12 +33,12 @@ export type ButtonBaseProps = ExtendableProps<{
      * If `true`, the progress indicator is shown and the button becomes disabled.
      * @default false
      * */
-    progress?: boolean;
+    isLoading?: boolean;
     /**
      * If `true`, the component is disabled.
      * @default false
      * */
-    disabled?: boolean;
+    isDisabled?: boolean;
     /**
      * If `true`, only the icon is shown, and the button has same sides.
      * @default false
@@ -43,4 +61,5 @@ export type ButtonBaseProps = ExtendableProps<{
     onHoverStart?: (e: HoverEvent) => void;
     /** Handler that is called when a hover interaction ends. */
     onHoverEnd?: (e: HoverEvent) => void;
-}, UseButtonProps>;
+} & ButtonBaseDeprecatedProps, UseButtonProps>;
+export {};

package/dist/components/ButtonToggleGroup/ButtonToggleGroup.js

@@ -12,7 +12,7 @@ import { getSelectedToggleButton, getToggleButtonStyle } from "./utils.js";
 const MAX_ITEMS = 5;
 const ButtonToggleGroup = forwardRef((props, ref) => {
   const {
-    isBlock = false,
+    fullWidth = false,
     isDisabled = false,
     hasEqualItemSize = false,
     style,
@@ -77,11 +77,11 @@ const ButtonToggleGroup = forwardRef((props, ref) => {
     {
       className: clsx(
         s.base,
-        isBlock && s.block,
+        fullWidth && s.fullWidth,
         hasEqualItemSize && s.hasEqualItemSize,
         className
       ),
-      "data-block": isBlock,
+      "data-fullwidth": fullWidth,
       "data-animated": isAnimated,
       "data-equal-item-size": hasEqualItemSize,
       ref: domRef,

package/dist/components/ButtonToggleGroup/ButtonToggleGroup.module.css.js

@@ -1,17 +1,17 @@
 const base = "kbq-buttontogglegroup-79a88d";
-const block = "kbq-buttontogglegroup-block-f9494f";
+const fullWidth = "kbq-buttontogglegroup-fullWidth-f63c5c";
 const thumb = "kbq-buttontogglegroup-thumb-7ff4ae";
 const container = "kbq-buttontogglegroup-container-e48aaf";
 const s = {
   base,
-  block,
+  fullWidth,
   thumb,
   container
 };
 export {
   base,
-  block,
   container,
   s as default,
+  fullWidth,
   thumb
 };

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

@@ -12,7 +12,7 @@ export type ButtonToggleGroupBaseProps = {
      * If `true`, the button will take up the full width of its container.
      * @default false
      * */
-    isBlock?: boolean;
+    fullWidth?: boolean;
     /** The contents of the collection. */
     children?: Array<ReactElement<ButtonToggleProps>>;
     /**

package/dist/components/Dialog/components/DialogCloseButton.d.ts

@@ -4,11 +4,17 @@ export type DialogCloseButtonRef = ComponentRef<'button'>;
 export type DialogCloseButtonProps = ButtonProps;
 export declare const DialogCloseButton: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "children" | "progress" | "as" | "className" | "autoFocus" | "id" | "rel" | "aria-controls" | "aria-describedby" | "aria-details" | "aria-expanded" | "aria-haspopup" | "aria-label" | "aria-labelledby" | "aria-pressed" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "target" | "type" | "href" | "disabled" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onPressUp" | "onFocusChange" | "elementType" | "preventFocusOnPress" | "excludeFromTabOrder" | "variant" | "onHoverStart" | "onHoverEnd" | "onlyIcon" | "fullWidth" | "startIcon" | "endIcon" | "data-testid"> & Omit<import("@koobiq/react-primitives").ButtonOptions, "children" | "progress" | "className" | "disabled" | "variant" | "onHoverStart" | "onHoverEnd" | "onlyIcon" | "fullWidth" | "startIcon" | "endIcon" | "data-testid"> & {
-    children?: import("react").ReactNode;
-    variant?: import("../..").ButtonPropVariant;
+}, "children" | "as" | "className" | "autoFocus" | "id" | "rel" | "aria-controls" | "aria-describedby" | "aria-details" | "aria-expanded" | "aria-haspopup" | "aria-label" | "aria-labelledby" | "aria-pressed" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "target" | "type" | "href" | "isDisabled" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onPressUp" | "onFocusChange" | "elementType" | "preventFocusOnPress" | "excludeFromTabOrder" | "variant" | "onHoverStart" | "onHoverEnd" | "isLoading" | "onlyIcon" | "fullWidth" | "startIcon" | "endIcon" | "data-testid" | keyof {
     progress?: boolean;
     disabled?: boolean;
+}> & Omit<import("@koobiq/react-primitives").ButtonOptions, "children" | "className" | "isDisabled" | "variant" | "onHoverStart" | "onHoverEnd" | "isLoading" | "onlyIcon" | "fullWidth" | "startIcon" | "endIcon" | "data-testid" | keyof {
+    progress?: boolean;
+    disabled?: boolean;
+}> & {
+    children?: import("react").ReactNode;
+    variant?: import("../..").ButtonPropVariant;
+    isLoading?: boolean;
+    isDisabled?: boolean;
     onlyIcon?: boolean;
     className?: string;
     fullWidth?: boolean;
@@ -17,6 +23,9 @@ export declare const DialogCloseButton: import("react").ForwardRefExoticComponen
     'data-testid'?: string | number;
     onHoverStart?: (e: import("@koobiq/react-primitives").HoverEvent) => void;
     onHoverEnd?: (e: import("@koobiq/react-primitives").HoverEvent) => void;
+} & {
+    progress?: boolean;
+    disabled?: boolean;
 } & {
     as?: "button" | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/IconButton/IconButton.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
+import { deprecate } from "@koobiq/logger";
 import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
 import { Button } from "@koobiq/react-primitives";
 import s from "./IconButton.module.css.js";
@@ -10,33 +11,47 @@ const IconButton = polymorphicForwardRef(
     size = "xl",
     compact = false,
     disabled = false,
+    isCompact: isCompactProp = false,
+    isDisabled: isDisabledProp = false,
     children,
     className,
     ...other
   }, ref) => {
+    const isCompact = isCompactProp || compact;
+    const isDisabled = isDisabledProp || disabled;
+    if (process.env.NODE_ENV !== "production" && compact) {
+      deprecate(
+        'The "compact" prop is deprecated. Use "isCompact" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && disabled) {
+      deprecate(
+        'The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
+      );
+    }
     const classNameFn = ({
-      hovered,
-      disabled: disabled2,
-      loading,
-      focusVisible,
-      pressed
+      isHovered,
+      isDisabled: isDisabled2,
+      isLoading,
+      isFocusVisible,
+      isPressed
     }) => clsx(
       s.base,
       size && s[size],
       variant && s[variant],
-      hovered && s.hovered,
-      pressed && s.pressed,
-      disabled2 && s.disabled,
-      loading && s.progress,
-      compact && s.compact,
-      focusVisible && s.focusVisible,
+      isHovered && s.hovered,
+      isPressed && s.pressed,
+      isDisabled2 && s.disabled,
+      isLoading && s.progress,
+      isCompact && s.compact,
+      isFocusVisible && s.focusVisible,
       className
     );
     return /* @__PURE__ */ jsx(
       Button,
       {
         as: Tag,
-        disabled,
+        isDisabled,
         className: classNameFn,
         ...other,
         ref,

package/dist/components/IconButton/index.d.ts

@@ -1,2 +1,2 @@
-export * from './IconButton.js';
-export * from './types.js';
+export * from './IconButton';
+export * from './types';

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

@@ -5,6 +5,24 @@ export declare const iconButtonPropVariant: readonly ["theme", "theme-contrast",
 export type IconButtonPropVariant = (typeof iconButtonPropVariant)[number];
 export declare const iconButtonPropSize: readonly ["l", "xl"];
 export type IconButtonPropSize = (typeof iconButtonPropSize)[number];
+type IconButtonBaseDeprecatedProps = {
+    /**
+     * @deprecated
+     * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
+     *
+     * If `true`, the component is disabled.
+     * @default false
+     * */
+    disabled?: boolean;
+    /**
+     * @deprecated
+     * The "compact" prop is deprecated. Use "isCompact" prop to replace it.
+     *
+     * If `true`, reduce the size of the component canvas.
+     * @default false
+     * */
+    compact?: boolean;
+};
 export type IconButtonBaseProps = ExtendableProps<{
     /** The content of the component. */
     children?: ReactNode;
@@ -17,7 +35,7 @@ export type IconButtonBaseProps = ExtendableProps<{
      * If `true`, the component is disabled.
      * @default false
      * */
-    disabled?: boolean;
+    isDisabled?: boolean;
     /**
      * Size of the component
      * @default xl
@@ -27,11 +45,12 @@ export type IconButtonBaseProps = ExtendableProps<{
      * If `true`, reduce the size of the component canvas.
      * @default false
      * */
-    compact?: boolean;
+    isCompact?: boolean;
     /** Additional CSS-classes. */
     className?: string;
     /** Handler that is called when a hover interaction starts. */
     onHoverStart?: (e: HoverEvent) => void;
     /** Handler that is called when a hover interaction ends. */
     onHoverEnd?: (e: HoverEvent) => void;
-}, UseButtonProps>;
+} & IconButtonBaseDeprecatedProps, UseButtonProps>;
+export {};

package/dist/components/Link/Link.js

@@ -1,11 +1,15 @@
 "use client";
 import { jsxs } from "react/jsx-runtime";
+import { deprecate } from "@koobiq/logger";
 import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
 import { Link as Link$1 } from "@koobiq/react-primitives";
 import s from "./Link.module.css.js";
 const Link = polymorphicForwardRef((props, ref) => {
   const {
     variant = "text-normal",
+    isPseudo: isPseudoProp = false,
+    isDisabled: isDisabledProp = false,
+    allowVisited: allowVisitedProp = false,
     visitable = false,
     pseudo = false,
     disabled,
@@ -16,24 +20,42 @@ const Link = polymorphicForwardRef((props, ref) => {
     className,
     ...other
   } = props;
+  const allowVisited = allowVisitedProp || visitable;
+  const isDisabled = isDisabledProp || disabled;
+  const isPseudo = isPseudoProp || pseudo;
   const hasIcon = Boolean(startIcon || endIcon);
+  if (process.env.NODE_ENV !== "production" && visitable) {
+    deprecate(
+      'The "visitable" prop is deprecated. Use "allowVisited" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && pseudo) {
+    deprecate(
+      'The "pseudo" prop is deprecated. Use "isPseudo" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && disabled) {
+    deprecate(
+      'The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
+    );
+  }
   const elementType = as !== "a" && as !== "button" ? `${as}` : void 0;
   return /* @__PURE__ */ jsxs(
     Link$1,
     {
       as,
-      disabled,
+      isDisabled,
       elementType,
-      ...disabled && { tabIndex: -1 },
-      className: ({ hovered, pressed, focusVisible }) => clsx(
+      ...isDisabled && { tabIndex: -1 },
+      className: ({ isHovered, isPressed, isFocusVisible }) => clsx(
         s.base,
         s[variant],
-        pseudo && s.pseudo,
-        hovered && s.hovered,
-        pressed && s.pressed,
+        isPseudo && s.pseudo,
+        isHovered && s.hovered,
+        isPressed && s.pressed,
         hasIcon && s.hasIcon,
-        visitable && s.visitable,
-        focusVisible && s.focusVisible,
+        allowVisited && s.allowVisited,
+        isFocusVisible && s.focusVisible,
         className
       ),
       ...other,

package/dist/components/Link/Link.module.css.js

@@ -2,7 +2,7 @@ const base = "kbq-link-093ccd";
 const hovered = "kbq-link-hovered-1916bc";
 const pressed = "kbq-link-pressed-0b493d";
 const focusVisible = "kbq-link-focusVisible-a98307";
-const visitable = "kbq-link-visitable-c8175e";
+const allowVisited = "kbq-link-allowVisited-cb5a56";
 const pseudo = "kbq-link-pseudo-5f21eb";
 const hasIcon = "kbq-link-hasIcon-ea84d7";
 const inherit = "kbq-link-inherit-aa3736";
@@ -11,7 +11,7 @@ const s = {
   hovered,
   pressed,
   focusVisible,
-  visitable,
+  allowVisited,
   pseudo,
   hasIcon,
   "text-normal": "kbq-link-text-normal-814a6c",
@@ -20,6 +20,7 @@ const s = {
   inherit
 };
 export {
+  allowVisited,
   base,
   s as default,
   focusVisible,
@@ -27,6 +28,5 @@ export {
   hovered,
   inherit,
   pressed,
-  pseudo,
-  visitable
+  pseudo
 };

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

@@ -3,6 +3,29 @@ import type { ExtendableProps } from '@koobiq/react-core';
 import type { UseLinkProps } from '@koobiq/react-primitives';
 import type { TypographyPropVariant } from '../Typography';
 export type LinkPropVariant = Extract<TypographyPropVariant, 'text-compact' | 'text-normal' | 'text-big' | 'inherit'>;
+type LinkBaseDeprecatedProps = {
+    /**
+     * @deprecated
+     * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
+     *
+     * If `true`, the component is disabled.
+     * */
+    disabled?: boolean;
+    /**
+     * @deprecated
+     * The "visitable" prop is deprecated. Use "isVisitable" prop to replace it.
+     *
+     * If `true`, displays :visited CSS-state.
+     * */
+    visitable?: boolean;
+    /**
+     * @deprecated
+     * The "pseudo" prop is deprecated. Use "isPseudo" prop to replace it.
+     *
+     * If `true`, displays the link as a pseudo-link.
+     * */
+    pseudo?: boolean;
+};
 export type LinkBaseProps = ExtendableProps<{
     /** The content of the component. */
     children?: ReactNode;
@@ -13,13 +36,14 @@ export type LinkBaseProps = ExtendableProps<{
     /** Icon placed after the children. */
     endIcon?: ReactNode;
     /** If `true`, the component is disabled. */
-    disabled?: boolean;
+    isDisabled?: boolean;
     /** If `true`, displays :visited CSS-state. */
-    visitable?: boolean;
+    allowVisited?: boolean;
     /** If `true`, displays the link as a pseudo-link. */
-    pseudo?: boolean;
+    isPseudo?: boolean;
     /** Additional CSS-classes. */
     className?: string;
     /** Inline styles */
     style?: CSSProperties;
-}, UseLinkProps>;
+} & LinkBaseDeprecatedProps, UseLinkProps>;
+export {};

package/dist/components/Menu/Menu.js

@@ -31,7 +31,6 @@ function MenuRender(props, ref) {
     state,
     controlRef
   );
-  const { isDisabled, ...otherMenuTriggerProps } = menuTriggerProps;
   const popoverProps = mergeProps(
     {
       style,
@@ -49,8 +48,7 @@ function MenuRender(props, ref) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     control?.({
       ref: controlRef,
-      disabled: isDisabled,
-      ...otherMenuTriggerProps
+      ...menuTriggerProps
     }),
     /* @__PURE__ */ jsx(PopoverInner, { type: "menu", placement, ...popoverProps, children: /* @__PURE__ */ jsx(MenuInner, { ...otherProps, ...menuProps }) })
   ] });

package/dist/components/Modal/Modal.js

@@ -63,11 +63,7 @@ const ModalComponent = forwardRef((props, ref) => {
     },
     other
   );
-  const backdropProps = mergeProps(
-    { open: openState && !hideBackdrop },
-    underlayProps,
-    slotProps?.backdrop
-  );
+  const backdropProps = mergeProps({ isOpen: openState && !hideBackdrop }, underlayProps, slotProps?.backdrop);
   const dialogProps = mergeProps(
     {
       onClose: close,
@@ -85,12 +81,8 @@ const ModalComponent = forwardRef((props, ref) => {
     },
     slotProps?.modal
   );
-  const { isDisabled, ...otherTriggerProps } = triggerProps;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    control?.({
-      disabled: isDisabled,
-      ...otherTriggerProps
-    }),
+    control?.(triggerProps),
     /* @__PURE__ */ jsx(
       Transition,
       {

package/dist/components/Popover/Popover.js

@@ -69,7 +69,6 @@ const PopoverInner = (props) => {
     if (isValidElement(children)) return cloneElement(children, overlayProps);
     return children;
   };
-  const { isDisabled, ...otherTriggerProps } = triggerProps;
   const arrowProps = mergeProps(
     { className: s.arrow },
     arrowPropsCommon,
@@ -104,8 +103,7 @@ const PopoverInner = (props) => {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     control?.({
       ref: controlRef,
-      disabled: isDisabled,
-      ...otherTriggerProps
+      ...triggerProps
     }),
     /* @__PURE__ */ jsx(Transition, { ...transitionProps, children: (transition) => /* @__PURE__ */ jsxs(
       Overlay,

package/dist/components/SidePanel/SidePanel.js

@@ -67,7 +67,7 @@ const SidePanelComponent = forwardRef(
       other
     );
     const backdropProps = mergeProps(
-      { open: openState && !hideBackdrop },
+      { isOpen: openState && !hideBackdrop },
       underlayProps,
       slotProps?.backdrop
     );
@@ -88,12 +88,8 @@ const SidePanelComponent = forwardRef(
       },
       slotProps?.panel
     );
-    const { isDisabled, ...otherTriggerProps } = triggerProps;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      control?.({
-        disabled: isDisabled,
-        ...otherTriggerProps
-      }),
+      control?.(triggerProps),
       /* @__PURE__ */ jsx(
         Transition,
         {

package/dist/style.css

@@ -560,12 +560,12 @@
   inset: 0;
 }
 
-.kbq-button-hovered-037da3:not(.kbq-button-progress-f454f0) {
+.kbq-button-hovered-037da3:not(.kbq-button-loading-dbac1d) {
   --button-border-color: var(--button-border-color-hover);
   background-color: var(--button-bg-color-hover);
 }
 
-.kbq-button-pressed-508d5d:not(.kbq-button-progress-f454f0) {
+.kbq-button-pressed-508d5d:not(.kbq-button-loading-dbac1d) {
   --button-border-color: var(--button-border-color-active);
   background-color: var(--button-bg-color-active);
 }
@@ -574,7 +574,7 @@
   --button-outline-color: var(--kbq-states-line-focus-theme);
 }
 
-.kbq-button-progress-f454f0, .kbq-button-disabled-1df5f6 {
+.kbq-button-loading-dbac1d, .kbq-button-disabled-1df5f6 {
   cursor: not-allowed;
 }
 
@@ -1651,19 +1651,19 @@
   text-decoration-color: var(--kbq-line-theme-less);
 }
 
-.kbq-link-visitable-c8175e:where(:visited) {
+.kbq-link-allowVisited-cb5a56:where(:visited) {
   color: var(--kbq-foreground-visited);
   -webkit-text-decoration-color: var(--kbq-line-visited);
   text-decoration-color: var(--kbq-line-visited);
 }
 
-.kbq-link-visitable-c8175e:where(.kbq-link-hovered-1916bc:visited) {
+.kbq-link-allowVisited-cb5a56:where(.kbq-link-hovered-1916bc:visited) {
   color: var(--kbq-states-foreground-visited-hover);
   -webkit-text-decoration-color: var(--kbq-line-visited);
   text-decoration-color: var(--kbq-line-visited);
 }
 
-.kbq-link-visitable-c8175e:where(.kbq-link-pressed-0b493d:visited) {
+.kbq-link-allowVisited-cb5a56:where(.kbq-link-pressed-0b493d:visited) {
   color: var(--kbq-states-foreground-visited-active);
   -webkit-text-decoration-color: var(--kbq-line-visited);
   text-decoration-color: var(--kbq-line-visited);
@@ -3206,7 +3206,7 @@
   overflow: hidden;
 }
 
-.kbq-buttontogglegroup-block-f9494f {
+.kbq-buttontogglegroup-fullWidth-f63c5c {
   inline-size: 100%;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.0.1-beta.21",
+  "version": "0.0.1-beta.22",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -27,10 +27,10 @@
     "@koobiq/design-tokens": "^3.12.1",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/logger": "0.0.1-beta.21",
-    "@koobiq/react-icons": "0.0.1-beta.21",
-    "@koobiq/react-primitives": "0.0.1-beta.21",
-    "@koobiq/react-core": "0.0.1-beta.21"
+    "@koobiq/logger": "0.0.1-beta.22",
+    "@koobiq/react-core": "0.0.1-beta.22",
+    "@koobiq/react-icons": "0.0.1-beta.22",
+    "@koobiq/react-primitives": "0.0.1-beta.22"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.11.2",