@koobiq/react-components 0.0.1-beta.3 → 0.0.1-beta.30

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";
@@ -8,21 +9,36 @@ import intlMessages from "./intl.json.js";
 import { AlertIcon } from "./components/AlertIcon/AlertIcon.js";
 import { IconButton } from "../IconButton/IconButton.js";
 const Alert = polymorphicForwardRef(
-  ({
-    status = "info",
-    colored = false,
-    compact = false,
-    as: Tag = "div",
-    hideIcon = false,
-    slotProps,
-    icon,
-    onClose,
-    action,
-    title,
-    className,
-    children,
-    ...other
-  }, ref) => {
+  (props, ref) => {
+    const {
+      status = "info",
+      as: Tag = "div",
+      hideIcon = false,
+      colored,
+      compact,
+      isColored: isColoredProp,
+      isCompact: isCompactProp,
+      slotProps,
+      icon,
+      onClose,
+      action,
+      title,
+      className,
+      children,
+      ...other
+    } = props;
+    const isColored = isColoredProp ?? colored ?? false;
+    const isCompact = isCompactProp ?? compact ?? false;
+    if (process.env.NODE_ENV !== "production" && "colored" in props) {
+      deprecate(
+        'Alert: the "colored" prop is deprecated. Use "isColored" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "compact" in props) {
+      deprecate(
+        'Alert: the "compact" prop is deprecated. Use "isCompact" prop to replace it.'
+      );
+    }
     const stringFormatter = useLocalizedStringFormatter(intlMessages);
     const contentProps = mergeProps(
       {
@@ -34,7 +50,7 @@ const Alert = polymorphicForwardRef(
       {
         icon,
         status,
-        compact
+        isCompact
       },
       slotProps?.statusIcon
     );
@@ -42,7 +58,7 @@ const Alert = polymorphicForwardRef(
       {
         "aria-label": stringFormatter.format("close"),
         variant: "fade-contrast",
-        onClick: onClose,
+        onPress: onClose,
         className: s.closeIcon
       },
       slotProps?.closeIcon
@@ -56,8 +72,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,22 +2,38 @@ 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 AlertDeprecatedProps = {
+    /**
+     * If `true`, compact mode will be enabled in the alert.
+     *
+     * @deprecated
+     * The "compact" prop is deprecated. Use "isCompact" prop to replace it.
+     */
+    compact?: boolean;
+    /**
+     * If `true`, background color will be enabled in the alert.
+     *
+     * @deprecated
+     * The "colored" prop is deprecated. Use "isColored" prop to replace it.
+     */
+    colored?: boolean;
+};
 export type AlertBaseProps = {
     /**
      * The status of the component.
      * @default info
-     * */
+     */
     status?: AlertPropStatus;
     /**
      * 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;
     /**
@@ -34,10 +50,12 @@ export type AlertBaseProps = {
     /** Override default icon. */
     icon?: ReactNode;
     /** A callback function called when the user clicks the alert's close button. */
-    onClose?: IconButtonProps['onClick'];
+    onClose?: IconButtonProps['onPress'];
+    /** The props used for each slot inside. */
     slotProps?: {
         content?: ComponentPropsWithRef<'div'>;
         statusIcon?: ComponentPropsWithRef<'div'>;
         closeIcon?: IconButtonProps;
     };
-};
+} & AlertDeprecatedProps;
+export {};

package/dist/components/AnimatedIcon/AnimatedIcon.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentPropsWithRef, ElementType } from 'react';
+import type { AnimatedIconBaseProps } from './index';
+export declare const AnimatedIcon: import("@koobiq/react-core").PolyForwardComponent<"span", AnimatedIconBaseProps, ElementType>;
+export type AnimatedIconProps<As extends ElementType = 'span'> = ComponentPropsWithRef<typeof AnimatedIcon<As>>;

package/dist/components/AnimatedIcon/AnimatedIcon.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { polymorphicForwardRef, useRefs, clsx } from "@koobiq/react-core";
+import { Transition } from "react-transition-group";
+import s from "./AnimatedIcon.module.css.js";
+const AnimatedIcon = polymorphicForwardRef((props, ref) => {
+  const {
+    transition = 300,
+    as: Tag = "span",
+    activeIndex = 0,
+    directions,
+    className,
+    icons = [],
+    style: styleProp,
+    ...other
+  } = props;
+  const refs = useRefs(icons.length);
+  const singleIcon = icons?.[0];
+  const innerRender = icons.length === 1 ? singleIcon : icons.map((icon, index) => /* @__PURE__ */ jsx(
+    Transition,
+    {
+      in: activeIndex === index,
+      timeout: transition,
+      nodeRef: refs[index],
+      unmountOnExit: true,
+      children: (transition2) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: s.icon,
+          "data-index": index,
+          ref: refs[index],
+          "data-transition": transition2,
+          children: icon
+        }
+      )
+    },
+    index
+  ));
+  const style = {
+    ...styleProp,
+    "--animated-icon-transition": `${transition}ms`,
+    ...typeof directions?.[activeIndex] === "number" && {
+      "--animated-icon-direction": `rotate(${directions[activeIndex]}deg)`
+    }
+  };
+  return /* @__PURE__ */ jsx(Tag, { ...other, className: clsx(s.base, className), style, ref, children: innerRender });
+});
+export {
+  AnimatedIcon
+};

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

@@ -0,0 +1,11 @@
+const base = "kbq-animatedicon-61fd86";
+const icon = "kbq-animatedicon-icon-2feff8";
+const s = {
+  base,
+  icon
+};
+export {
+  base,
+  s as default,
+  icon
+};

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

@@ -0,0 +1,2 @@
+export * from './AnimatedIcon';
+export * from './types';

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

@@ -0,0 +1,19 @@
+import type { ComponentRef, CSSProperties, ReactNode } from 'react';
+export type AnimatedIconBaseProps = {
+    /** A list of icons. */
+    icons?: ReactNode[];
+    /** A list of directions for the icons. */
+    directions?: number[];
+    /**
+     * Animation duration in milliseconds.
+     * @default 300
+     */
+    transition?: number;
+    /** Index of the active icon. */
+    activeIndex?: number;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+};
+export type AnimatedIconRef = ComponentRef<'span'>;

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,
+      isOpen: isOpenProp,
       style: styleProp,
       zIndex,
       children,
       className,
       ...other
     } = props;
+    const isOpen = isOpenProp ?? open ?? false;
     const domRef = useDOMRef(ref);
+    if (process.env.NODE_ENV !== "production" && "open" in props) {
+      deprecate(
+        'Backdrop: 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 BackdropDeprecatedProps = {
+    /**
+     * If `true`, the component is shown.
+     *
+     * @deprecated
+     * The "open" prop is deprecated. Use "isOpen" prop to replace it.
+     */
+    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;
-};
+} & BackdropDeprecatedProps;
+export {};

package/dist/components/Badge/Badge.js

@@ -1,31 +1,42 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import { deprecate } from "@koobiq/logger";
 import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
 import s from "./Badge.module.css.js";
 const Badge = polymorphicForwardRef(
-  ({
-    variant = "fade-contrast",
-    as: Tag = "span",
-    size = "normal",
-    className,
-    startIcon,
-    endIcon,
-    label,
-    ...other
-  }, ref) => /* @__PURE__ */ jsxs(
-    Tag,
-    {
-      "data-variant": variant,
-      "data-size": size,
-      ...other,
-      ref,
-      className: clsx(s.base, s[size], s[variant], className),
-      children: [
-        startIcon,
-        /* @__PURE__ */ jsx("span", { className: s.label, children: label }),
-        endIcon
-      ]
+  (props, ref) => {
+    const {
+      variant = "fade-contrast",
+      as: Tag = "span",
+      size = "normal",
+      className,
+      startIcon,
+      endIcon,
+      label,
+      children,
+      ...other
+    } = props;
+    if (process.env.NODE_ENV !== "production" && "label" in props) {
+      deprecate(
+        'Badge: the "label" prop is deprecated. Use "children" prop to replace it.'
+      );
     }
-  )
+    const content = children ?? label;
+    return /* @__PURE__ */ jsxs(
+      Tag,
+      {
+        "data-size": size,
+        "data-variant": variant,
+        className: clsx(s.base, s[size], s[variant], className),
+        ...other,
+        ref,
+        children: [
+          startIcon,
+          /* @__PURE__ */ jsx("span", { className: s.label, children: content }),
+          endIcon
+        ]
+      }
+    );
+  }
 );
 export {
   Badge

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

@@ -3,18 +3,27 @@ export declare const badgePropSize: readonly ["compact", "normal"];
 export type BadgePropSize = (typeof badgePropSize)[number];
 export declare const badgePropVariant: readonly ["theme", "fade-theme", "outline-fade-theme", "error", "fade-error", "outline-fade-error", "warning", "fade-warning", "outline-fade-warning", "success", "fade-success", "outline-fade-success", "contrast", "fade-contrast", "outline-fade-contrast"];
 export type BadgePropVariant = (typeof badgePropVariant)[number];
+type BadgeDeprecatedProps = {
+    /**
+     * The label of the component.
+     *
+     * @deprecated
+     * The "label" prop is deprecated. Use "children" prop to replace it.
+     */
+    label?: ReactNode;
+};
 export type BadgeBaseProps = {
     /** The variant to use. */
     variant?: BadgePropVariant;
     /** The size of the component. */
     size?: BadgePropSize;
-    /** The label of the component. */
-    label?: ReactNode;
+    /** The content of the component. */
+    children?: ReactNode;
     /** Icon placed before the children. */
     startIcon?: ReactNode;
     /** Icon placed after the children. */
     endIcon?: ReactNode;
     /** Additional CSS-classes. */
     className?: string;
-    children?: never;
-};
+} & BadgeDeprecatedProps;
+export {};

package/dist/components/Button/Button.js

@@ -1,47 +1,63 @@
 "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";
 const Button = polymorphicForwardRef(
-  ({
-    as: Tag = "button",
-    variant = "contrast-filled",
-    onlyIcon = false,
-    fullWidth = false,
-    progress = false,
-    disabled = false,
-    children,
-    startIcon,
-    endIcon,
-    className,
-    ...other
-  }, ref) => {
+  (props, ref) => {
+    const {
+      as: Tag = "button",
+      variant = "contrast-filled",
+      onlyIcon = false,
+      fullWidth = false,
+      isLoading: isLoadingProp,
+      isDisabled: isDisabledProp,
+      progress,
+      disabled,
+      children,
+      startIcon,
+      endIcon,
+      className,
+      ...other
+    } = props;
+    const isLoading = isLoadingProp ?? progress ?? false;
+    const isDisabled = isDisabledProp ?? disabled ?? false;
+    if (process.env.NODE_ENV !== "production" && "progress" in props) {
+      deprecate(
+        'Button: the "progress" prop is deprecated. Use "isLoading" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "disabled" in props) {
+      deprecate(
+        'Button: 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 +70,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 loading = "kbq-button-loading-dbac1d";
 const pressed = "kbq-button-pressed-508d5d";
 const focusVisible = "kbq-button-focusVisible-e63c2b";
-const progress = "kbq-button-progress-f454f0";
 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,
+  loading,
   pressed,
   focusVisible,
-  progress,
   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

@@ -1,37 +1,55 @@
 import type { ReactNode } from 'react';
-import type { ButtonOptions, HoverEvent } from '@koobiq/react-primitives';
+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];
-export type ButtonPropOnClick = ButtonOptions['onPress'];
-export type ButtonBaseProps = {
+type ButtonDeprecatedProps = {
+    /**
+     * If `true`, the progress indicator is shown and the button becomes disabled.
+     * @default false
+     *
+     * @deprecated
+     * The "progress" prop is deprecated. Use "isLoading" prop to replace it.
+     */
+    progress?: boolean;
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     *
+     * @deprecated
+     * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
+     */
+    disabled?: boolean;
+};
+export type ButtonBaseProps = ExtendableProps<{
     /** The content of the component. */
     children?: ReactNode;
     /**
      * The variant to use.
      * @default contrast-filled
-     * */
+     */
     variant?: ButtonPropVariant;
     /**
      * 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
-     * */
+     */
     onlyIcon?: boolean;
     /** Additional CSS-classes. */
     className?: string;
     /**
      * If `true`, the button will take up the full width of its container.
      * @default false
-     * */
+     */
     fullWidth?: boolean;
     /** Icon placed before the children. */
     startIcon?: ReactNode;
@@ -43,5 +61,5 @@ export type ButtonBaseProps = {
     onHoverStart?: (e: HoverEvent) => void;
     /** Handler that is called when a hover interaction ends. */
     onHoverEnd?: (e: HoverEvent) => void;
-    onClick?: ButtonPropOnClick;
-};
+} & ButtonDeprecatedProps, UseButtonProps>;
+export {};

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

@@ -0,0 +1,2 @@
+import type { ButtonToggleGroupProps } from './types';
+export declare const ButtonToggleGroup: import("react").ForwardRefExoticComponent<Omit<ButtonToggleGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;