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

package/dist/components/Alert/Alert.js

@@ -9,33 +9,34 @@ 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,
-    isColored: isColoredProp = false,
-    isCompact: isCompactProp = false,
-    slotProps,
-    icon,
-    onClose,
-    action,
-    title,
-    className,
-    children,
-    ...other
-  }, ref) => {
-    const isColored = isColoredProp || colored;
-    const isCompact = isCompactProp || compact;
-    if (process.env.NODE_ENV !== "production" && colored) {
+  (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.'
+        'Alert: the "colored" prop is deprecated. Use "isColored" prop to replace it.'
       );
     }
-    if (process.env.NODE_ENV !== "production" && compact) {
+    if (process.env.NODE_ENV !== "production" && "compact" in props) {
       deprecate(
-        'Alert. The "compact" prop is deprecated. Use "isCompact" prop to replace it.'
+        'Alert: the "compact" prop is deprecated. Use "isCompact" prop to replace it.'
       );
     }
     const stringFormatter = useLocalizedStringFormatter(intlMessages);

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

@@ -2,27 +2,27 @@ 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 = {
+type AlertDeprecatedProps = {
     /**
+     * If `true`, compact mode will be enabled in the alert.
+     *
      * @deprecated
      * The "compact" prop is deprecated. Use "isCompact" prop to replace it.
-     *
-     * If `true`, compact mode will be enabled in the alert.
-     * */
+     */
     compact?: boolean;
     /**
+     * If `true`, background color will be enabled in the alert.
+     *
      * @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.
      * @default info
-     * */
+     */
     status?: AlertPropStatus;
     /**
      * If `true`, compact mode will be enabled in the alert.
@@ -57,5 +57,5 @@ export type AlertBaseProps = {
         statusIcon?: ComponentPropsWithRef<'div'>;
         closeIcon?: IconButtonProps;
     };
-} & AlertBaseDeprecatedProps;
+} & AlertDeprecatedProps;
 export {};

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

@@ -7,7 +7,7 @@ export type AnimatedIconBaseProps = {
     /**
      * Animation duration in milliseconds.
      * @default 300
-     * */
+     */
     transition?: number;
     /** Index of the active icon. */
     activeIndex?: number;

package/dist/components/Backdrop/Backdrop.js

@@ -10,19 +10,19 @@ const Backdrop = polymorphicForwardRef(
     const {
       as: Tag = "div",
       duration = 300,
-      open = false,
-      isOpen: isOpenProp = false,
+      open,
+      isOpen: isOpenProp,
       style: styleProp,
       zIndex,
       children,
       className,
       ...other
     } = props;
-    const isOpen = isOpenProp || open;
+    const isOpen = isOpenProp ?? open ?? false;
     const domRef = useDOMRef(ref);
-    if (process.env.NODE_ENV !== "production" && open) {
+    if (process.env.NODE_ENV !== "production" && "open" in props) {
       deprecate(
-        'Backdrop. The "open" prop is deprecated. Use "isOpen" prop to replace it.'
+        'Backdrop: the "open" prop is deprecated. Use "isOpen" prop to replace it.'
       );
     }
     const style = {

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

@@ -1,11 +1,11 @@
 import type { CSSProperties, ReactNode } from 'react';
-type BackdropBaseDeprecatedProps = {
+type BackdropDeprecatedProps = {
     /**
+     * If `true`, the component is shown.
+     *
      * @deprecated
      * The "open" prop is deprecated. Use "isOpen" prop to replace it.
-     *
-     * If `true`, the component is shown.
-     * */
+     */
     open?: boolean;
 };
 export type BackdropBaseProps = {
@@ -23,5 +23,5 @@ export type BackdropBaseProps = {
     zIndex?: CSSProperties['zIndex'];
     /** Unique identifier for testing purposes. */
     'data-testid'?: string;
-} & BackdropBaseDeprecatedProps;
+} & BackdropDeprecatedProps;
 export {};

package/dist/components/Badge/Badge.js

@@ -1,35 +1,37 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { deprecate } from "@koobiq/logger";
-import { polymorphicForwardRef, isNotNil, clsx } from "@koobiq/react-core";
+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,
-    children,
-    ...other
-  }, ref) => {
-    if (process.env.NODE_ENV !== "production" && isNotNil(label)) {
+  (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.'
+        'Badge: the "label" prop is deprecated. Use "children" prop to replace it.'
       );
     }
+    const content = children ?? label;
     return /* @__PURE__ */ jsxs(
       Tag,
       {
-        "data-variant": variant,
         "data-size": size,
+        "data-variant": variant,
+        className: clsx(s.base, s[size], s[variant], className),
         ...other,
         ref,
-        className: clsx(s.base, s[size], s[variant], className),
         children: [
           startIcon,
-          /* @__PURE__ */ jsx("span", { className: s.label, children: children ?? label }),
+          /* @__PURE__ */ jsx("span", { className: s.label, children: content }),
           endIcon
         ]
       }

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

@@ -3,11 +3,13 @@ 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 BadgeBaseDeprecatedProps = {
+type BadgeDeprecatedProps = {
     /**
+     * The label of the component.
+     *
      * @deprecated
      * The "label" prop is deprecated. Use "children" prop to replace it.
-     * The label of the component. */
+     */
     label?: ReactNode;
 };
 export type BadgeBaseProps = {
@@ -23,5 +25,5 @@ export type BadgeBaseProps = {
     endIcon?: ReactNode;
     /** Additional CSS-classes. */
     className?: string;
-} & BadgeBaseDeprecatedProps;
+} & BadgeDeprecatedProps;
 export {};

package/dist/components/Button/Button.js

@@ -5,31 +5,32 @@ 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",
-    isLoading: isLoadingProp = false,
-    isDisabled: isDisabledProp = false,
-    onlyIcon = false,
-    fullWidth = false,
-    progress = false,
-    disabled = false,
-    children,
-    startIcon,
-    endIcon,
-    className,
-    ...other
-  }, ref) => {
-    const isLoading = isLoadingProp || progress;
-    const isDisabled = isDisabledProp || disabled;
-    if (process.env.NODE_ENV !== "production" && progress) {
+  (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.'
+        'Button: the "progress" prop is deprecated. Use "isLoading" prop to replace it.'
       );
     }
-    if (process.env.NODE_ENV !== "production" && disabled) {
+    if (process.env.NODE_ENV !== "production" && "disabled" in props) {
       deprecate(
-        'Button. The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
+        'Button: the "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
       );
     }
     const iconOnly = (!children || onlyIcon) && (startIcon || endIcon);

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

@@ -3,22 +3,22 @@ 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 = {
+type ButtonDeprecatedProps = {
     /**
-     * @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
-     * */
+     *
+     * @deprecated
+     * The "progress" prop is deprecated. Use "isLoading" prop to replace it.
+     */
     progress?: boolean;
     /**
-     * @deprecated
-     * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
-     *
      * 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<{
@@ -27,29 +27,29 @@ export type ButtonBaseProps = ExtendableProps<{
     /**
      * The variant to use.
      * @default contrast-filled
-     * */
+     */
     variant?: ButtonPropVariant;
     /**
      * If `true`, the progress indicator is shown and the button becomes disabled.
      * @default false
-     * */
+     */
     isLoading?: boolean;
     /**
      * If `true`, the component is disabled.
      * @default false
-     * */
+     */
     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;
@@ -61,5 +61,5 @@ export type ButtonBaseProps = ExtendableProps<{
     onHoverStart?: (e: HoverEvent) => void;
     /** Handler that is called when a hover interaction ends. */
     onHoverEnd?: (e: HoverEvent) => void;
-} & ButtonBaseDeprecatedProps, UseButtonProps>;
+} & ButtonDeprecatedProps, UseButtonProps>;
 export {};

package/dist/components/ButtonToggleGroup/components/ButtonToggle/ButtonToggle.js

@@ -37,7 +37,7 @@ const ButtonToggle = forwardRef(
       {
         delay: 300,
         anchorRef: domRef,
-        disabled: !showTooltip,
+        isDisabled: !showTooltip,
         ...slotProps?.tooltip,
         control: ({ ref: controlRef, ...controlProps }) => {
           const rootRef = useMultiRef([domRef, controlRef]);

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

@@ -6,19 +6,19 @@ export type ButtonToggleGroupBaseProps = {
     /**
      * Whether all items are disabled.
      * @default false
-     * */
+     */
     isDisabled?: boolean;
     /**
      * If `true`, the button will take up the full width of its container.
      * @default false
-     * */
+     */
     fullWidth?: boolean;
     /** The contents of the collection. */
     children?: Array<ReactElement<ButtonToggleProps>>;
     /**
      * If `true`, each item's width will be equal.
      * @default false
-     * */
+     */
     hasEqualItemSize?: boolean;
     /** The currently selected key in the collection (controlled). */
     selectedKey?: ButtonToggleGroupKey;

package/dist/components/Checkbox/Checkbox.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { deprecate } from "@koobiq/logger";
-import { isNotNil, mergeProps, clsx } from "@koobiq/react-core";
+import { mergeProps, clsx, isNotNil } from "@koobiq/react-core";
 import { IconCheckS16, IconMinusS16 } from "@koobiq/react-icons";
 import { Checkbox as Checkbox$1 } from "@koobiq/react-primitives";
 import s from "./Checkbox.module.css.js";
@@ -31,13 +31,13 @@ const Checkbox = forwardRef(
       slotProps,
       ...other
     } = props;
-    const isDisabled = isDisabledProp || disabled;
+    const isDisabled = isDisabledProp ?? disabled ?? false;
+    const isInvalid = isInvalidProp ?? error ?? false;
     const isSelected = isSelectedProp ?? checked;
-    const isInvalid = isInvalidProp || error;
     const defaultSelected = defaultSelectedProp ?? defaultChecked;
-    const isReadOnly = isReadOnlyProp || readonly;
-    const isRequired = isRequiredProp || required;
-    const isIndeterminate = isIndeterminateProp || indeterminate;
+    const isReadOnly = isReadOnlyProp ?? readonly ?? false;
+    const isRequired = isRequiredProp ?? required ?? false;
+    const isIndeterminate = isIndeterminateProp ?? indeterminate ?? false;
     const commonProps = {
       isIndeterminate,
       isDisabled,
@@ -67,39 +67,39 @@ const Checkbox = forwardRef(
       ),
       ...other
     };
-    if (process.env.NODE_ENV !== "production" && isNotNil(disabled)) {
+    if (process.env.NODE_ENV !== "production" && "disabled" in props) {
       deprecate(
-        'Checkbox. The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
+        'Checkbox: the "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
       );
     }
-    if (process.env.NODE_ENV !== "production" && isNotNil(checked)) {
+    if (process.env.NODE_ENV !== "production" && "checked" in props) {
       deprecate(
-        'Checkbox. The "checked" prop is deprecated. Use "isSelected" prop to replace it.'
+        'Checkbox: the "checked" prop is deprecated. Use "isSelected" prop to replace it.'
       );
     }
-    if (process.env.NODE_ENV !== "production" && isNotNil(error)) {
+    if (process.env.NODE_ENV !== "production" && "error" in props) {
       deprecate(
-        'Checkbox. The "error" prop is deprecated. Use "isInvalid" prop to replace it.'
+        'Checkbox: the "error" prop is deprecated. Use "isInvalid" prop to replace it.'
       );
     }
-    if (process.env.NODE_ENV !== "production" && isNotNil(defaultChecked)) {
+    if (process.env.NODE_ENV !== "production" && "defaultChecked" in props) {
       deprecate(
-        'Checkbox. The "defaultChecked" prop is deprecated. Use "defaultSelected" prop to replace it.'
+        'Checkbox: the "defaultChecked" prop is deprecated. Use "defaultSelected" prop to replace it.'
       );
     }
-    if (process.env.NODE_ENV !== "production" && isNotNil(readonly)) {
+    if (process.env.NODE_ENV !== "production" && "readonly" in props) {
       deprecate(
-        'Checkbox. The "readonly" prop is deprecated. Use "isReadOnly" prop to replace it.'
+        'Checkbox: the "readonly" prop is deprecated. Use "isReadOnly" prop to replace it.'
       );
     }
-    if (process.env.NODE_ENV !== "production" && isNotNil(required)) {
+    if (process.env.NODE_ENV !== "production" && "required" in props) {
       deprecate(
-        'Checkbox. The "required" prop is deprecated. Use "isRequired" prop to replace it.'
+        'Checkbox: the "required" prop is deprecated. Use "isRequired" prop to replace it.'
       );
     }
-    if (process.env.NODE_ENV !== "production" && isNotNil(indeterminate)) {
+    if (process.env.NODE_ENV !== "production" && "indeterminate" in props) {
       deprecate(
-        'Checkbox. The "indeterminate" prop is deprecated. Use "isIndeterminate" prop to replace it.'
+        'Checkbox: the "indeterminate" prop is deprecated. Use "isIndeterminate" prop to replace it.'
       );
     }
     const boxProps = mergeProps({ className: s.checkbox }, slotProps?.box);

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

@@ -6,60 +6,58 @@ export type CheckboxPropLabelPlacement = (typeof checkboxPropLabelPlacement)[num
 export type CheckboxPropOnChange = (selected: boolean) => void;
 type CheckboxDeprecatedProps = {
     /**
-     * @deprecated
-     * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
-     *
      * If `true`, the component is disabled.
      * @default false
-     * */
+     *
+     * @deprecated
+     * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
+     */
     disabled?: boolean;
     /**
-     * @deprecated
-     * The "error" prop is deprecated. Use "isInvalid" prop to replace it.
-     *
      * If `true`, the component will indicate an error.
      * @default false
-     * */
+     *
+     * @deprecated
+     * The "error" prop is deprecated. Use "isInvalid" prop to replace it.
+     */
     error?: boolean;
     /**
+     * If `true`, the component is checked.
+     *
      * @deprecated
      * The "checked" prop is deprecated. Use "isSelected" prop to replace it.
-     *
-     * If `true`, the component is checked.
-     * @default false
-     * */
+     */
     checked?: boolean;
     /**
-     * @deprecated
-     * The "readonly" prop is deprecated. Use "isReadonly" prop to replace it.
-     *
      * It prevents the user from changing the value of the checkbox.
      * @default false
+     *
+     * @deprecated
+     * The "readonly" prop is deprecated. Use "isReadonly" prop to replace it.
      */
     readonly?: boolean;
     /**
-     * @deprecated
-     * The "required" prop is deprecated. Use "isRequired" prop to replace it.
-     *
      * If `true`, the input element is required.
      * @default false
-     * */
+     *
+     * @deprecated
+     * The "required" prop is deprecated. Use "isRequired" prop to replace it.
+     */
     required?: boolean;
     /**
-     * @deprecated
-     * The "indeterminate" prop is deprecated. Use "isIndeterminate" prop to replace it.
-     *
      * If `true`, the component appears indeterminate.
      * @default false
-     * */
+     *
+     * @deprecated
+     * The "indeterminate" prop is deprecated. Use "isIndeterminate" prop to replace it.
+     */
     indeterminate?: boolean;
     /**
+     * The default checked state. Use when the component is not controlled.
+     *
      * @deprecated
      * The "defaultChecked" prop is deprecated. Use "defaultSelected" prop to replace it.
-     *
-     * The default checked state. Use when the component is not controlled.
-     * @default false
-     * */
+     */
     defaultChecked?: boolean;
 };
 export type CheckboxProps = {
@@ -72,7 +70,7 @@ export type CheckboxProps = {
     /**
      * Size.
      * @default normal
-     * */
+     */
     size?: CheckboxPropSize;
     /**
      * The position of the label.
@@ -82,36 +80,31 @@ export type CheckboxProps = {
     /**
      * If `true`, the component will indicate an error.
      * @default false
-     * */
+     */
     isInvalid?: boolean;
-    /**
-     * If `true`, the component is checked.
-     * @default false
-     * */
+    /** If `true`, the component is checked. */
     isSelected?: boolean;
-    /** It prevents the user from changing the value of the checkbox.
+    /**
+     * It prevents the user from changing the value of the checkbox.
      * @default false
      */
     isReadOnly?: boolean;
     /**
      * If `true`, the component is disabled.
      * @default false
-     * */
+     */
     isDisabled?: boolean;
     /**
      * If `true`, the input element is required.
      * @default false
-     * */
+     */
     isRequired?: boolean;
     /**
      * If `true`, the component appears indeterminate.
      * @default false
-     * */
+     */
     isIndeterminate?: boolean;
-    /**
-     * The default checked state. Use when the component is not controlled.
-     * @default false
-     * */
+    /** The default checked state. Use when the component is not controlled. */
     defaultSelected?: boolean;
     /** Callback fired when the state is changed. */
     onChange?: CheckboxPropOnChange;

package/dist/components/Collections/Cell.d.ts

@@ -14,12 +14,12 @@ export type CellProps = AriaCellProps & {
     /**
      * Horizontal alignment of the cell content.
      * @default left
-     * */
+     */
     align?: CellPropAlign;
     /**
      * Vertical alignment of the cell content.
      * @default middle
-     * */
+     */
     valign?: CellPropVerticalAlign;
 };
 export declare function Cell(_props: CellProps): null;

package/dist/components/Collections/Column.d.ts

@@ -14,12 +14,12 @@ export type ColumnProps<T> = Omit<AriaColumnProps<T>, 'allowsResizing' | 'allows
     /**
      * Horizontal alignment of the cell content.
      * @default left
-     * */
+     */
     align?: ColumnPropAlign;
     /**
      * Vertical alignment of the cell content.
      * @default middle
-     * */
+     */
     valign?: ColumnPropVerticalAlign;
 };
 export declare function Column<T>(_props: ColumnProps<T>): null;