@koobiq/react-components 0.0.1-beta.8 → 0.0.1

package/dist/components/Textarea/components/TextareaContextConsumer/TextareaContextConsumer.d.ts

@@ -1,6 +1,6 @@
 import type { TextareaProps } from '../../types';
 export declare const TextareaContextConsumer: import("react").ForwardRefExoticComponent<{
-    required?: boolean;
-    error?: boolean;
-    disabled?: boolean;
-} & Pick<TextareaProps, "caption" | "label" | "cols" | "rows" | "variant" | "slotProps" | "errorMessage" | "hiddenLabel" | "expand"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+    isRequired?: boolean;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+} & Pick<TextareaProps, "caption" | "label" | "cols" | "rows" | "variant" | "slotProps" | "errorMessage" | "isLabelHidden" | "expand"> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/Textarea/components/TextareaContextConsumer/TextareaContextConsumer.js

@@ -13,14 +13,14 @@ const TextareaContextConsumer = forwardRef((props, ref) => {
     rows,
     cols,
     label,
-    error,
+    isInvalid,
     expand,
     caption,
     variant,
-    disabled,
-    required,
+    isDisabled,
+    isRequired,
     slotProps,
-    hiddenLabel,
+    isLabelHidden,
     errorMessage
   } = props;
   const { value } = useTextareaContext();
@@ -28,28 +28,31 @@ const TextareaContextConsumer = forwardRef((props, ref) => {
   useTextareaAutosize(domRef, value, expand === "auto-size");
   const textareaProps = mergeProps(
     {
-      error,
+      isInvalid,
       rows,
       cols,
       variant,
       value,
-      disabled,
+      isDisabled,
       ...expand && { className: s[expand] },
       ref: domRef
     },
     slotProps?.textarea
   );
-  const captionProps = slotProps?.caption;
-  const errorProps = mergeProps({ error }, slotProps?.errorMessage);
+  const captionProps = mergeProps({ children: caption }, slotProps?.caption);
+  const errorProps = mergeProps(
+    { isInvalid, children: errorMessage },
+    slotProps?.errorMessage
+  );
   const labelProps = mergeProps(
-    { hidden: hiddenLabel, required },
+    { isHidden: isLabelHidden, children: label, isRequired },
     slotProps?.label
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(FieldLabel, { ...labelProps, children: labelProps.children || label }),
+    /* @__PURE__ */ jsx(FieldLabel, { ...labelProps }),
     /* @__PURE__ */ jsx(FieldInput, { as: "textarea", ...textareaProps }),
-    /* @__PURE__ */ jsx(FieldCaption, { ...captionProps, children: captionProps?.children || caption }),
-    /* @__PURE__ */ jsx(FieldError, { ...errorProps, children: errorProps.children || errorMessage })
+    /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
+    /* @__PURE__ */ jsx(FieldError, { ...errorProps })
   ] });
 });
 TextareaContextConsumer.displayName = "TextareaContextConsumer";

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

@@ -1,11 +1,48 @@
 import type { ComponentRef, ReactNode } from 'react';
 import type { ExtendableProps } from '@koobiq/react-core';
-import type { UseTextFieldProps } from '@koobiq/react-primitives';
+import type { TextFieldProps } from '@koobiq/react-primitives';
 import type { FieldCaptionProps, FieldErrorProps, FieldInputProps, FieldLabelProps } from '../FieldComponents';
 export declare const textareaPropVariant: readonly ["filled", "transparent"];
 export type TextareaPropVariant = (typeof textareaPropVariant)[number];
 export declare const textareaPropExpand: readonly ["auto-size", "vertical-resize"];
 export type TextareaPropExpand = (typeof textareaPropExpand)[number];
+type TextareaDeprecatedProps = {
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     * @deprecated
+     * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the input will indicate an error.
+     * @default false
+     * @deprecated
+     * The "error" prop is deprecated. Use "isInvalid" prop to replace it.
+     */
+    error?: boolean;
+    /**
+     * If `true`, the label is displayed as required and the input element is required.
+     * @default false
+     * @deprecated
+     * The "required" prop is deprecated. Use "isRequired" prop to replace it.
+     */
+    required?: boolean;
+    /**
+     * If `true`, the label is hidden. Be sure to add aria-label to the input element.
+     * @default false
+     * @deprecated
+     * The "hiddenLabel" prop is deprecated. Use "isLabelHidden" prop to replace it.
+     */
+    hiddenLabel?: boolean;
+    /**
+     * If `true`, the input can be selected but not changed by the user.
+     * @default false
+     * @deprecated
+     * The "readonly" prop is deprecated. Use "isReadOnly" prop to replace it.
+     */
+    readonly?: boolean;
+};
 export type TextareaProps = ExtendableProps<{
     /** The content to display as the label. */
     label?: ReactNode;
@@ -13,38 +50,43 @@ export type TextareaProps = ExtendableProps<{
     className?: string;
     /**
      * The variant to use.
-     * @default filled
-     * */
+     * @default 'filled'
+     */
     variant?: TextareaPropVariant;
     /**
      * If `true`, the input will indicate an error.
      * @default false
-     * */
-    error?: boolean;
+     */
+    isInvalid?: boolean;
+    /**
+     * If `true`, the input can be selected but not changed by the user.
+     * @default false
+     */
+    isReadOnly?: boolean;
     /** Message for the error state */
-    errorMessage?: string | number;
+    errorMessage?: ReactNode;
     /**
      * If true, the input will take up the full width of its container.
      * @default false
-     * */
+     */
     fullWidth?: boolean;
     /**
      * If `true`, the component is disabled.
      * @default false
-     * */
-    disabled?: boolean;
+     */
+    isDisabled?: boolean;
     /**
      * If `true`, the label is hidden. Be sure to add aria-label to the input element.
      * @default false
-     * */
-    hiddenLabel?: boolean;
+     */
+    isLabelHidden?: boolean;
     /** The helper text content. */
-    caption?: string | number;
+    caption?: ReactNode;
     /**
      * If `true`, the label is displayed as required and the input element is required.
      * @default false
-     * */
-    required?: boolean;
+     */
+    isRequired?: boolean;
     /** The rows property specifies the visible height of a text area, in lines. */
     rows?: number;
     /** The cols property specifies the visible width of a text area. */
@@ -56,12 +98,15 @@ export type TextareaProps = ExtendableProps<{
      * `verticalResize` — the ability to stretch the field vertically.
      */
     expand?: TextareaPropExpand;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
     /** The props used for each slot inside. */
     slotProps?: {
         label?: FieldLabelProps;
         caption?: FieldCaptionProps;
-        textarea?: FieldInputProps;
+        textarea?: FieldInputProps<'textarea'>;
         errorMessage?: FieldErrorProps;
     };
-}, Omit<UseTextFieldProps, 'inputElementType'>>;
+}, TextareaDeprecatedProps & Omit<TextFieldProps<HTMLTextAreaElement>, 'description' | 'validationBehavior' | 'validationState' | 'validate' | 'children' | 'style' | 'className' | 'inputElementType'>>;
 export type TextareaRef = ComponentRef<'textarea'>;
+export {};

package/dist/components/Textarea/utils/useTextareaAutosize.d.ts

@@ -1,2 +1,2 @@
 import { type MutableRefObject } from 'react';
-export declare function useTextareaAutosize(ref: MutableRefObject<HTMLTextAreaElement | null>, value: string | readonly string[] | number | undefined, active?: boolean): void;
+export declare function useTextareaAutosize(ref: MutableRefObject<HTMLTextAreaElement | null>, value: string | readonly string[] | number | undefined, isActive?: boolean): void;

package/dist/components/Textarea/utils/useTextareaAutosize.js

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
-function useTextareaAutosize(ref, value, active) {
+function useTextareaAutosize(ref, value, isActive) {
   useEffect(() => {
-    if (!active) return;
+    if (!isActive) return;
     if (ref.current) {
       const textareaEl = ref.current;
       textareaEl.style.blockSize = "0px";

package/dist/components/Toggle/Toggle.d.ts

@@ -1,16 +1,23 @@
-export declare const Toggle: import("react").ForwardRefExoticComponent<Omit<Omit<import("@react-types/checkbox").AriaToggleProps, "onChange" | "isDisabled" | "isRequired" | "isInvalid" | "isReadOnly" | "isSelected" | "defaultSelected">, "defaultChecked" | "onChange" | "disabled" | "checked" | "required" | "error"> & {
-    error?: boolean;
-    checked?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    defaultChecked?: boolean;
-    onChange?: (checked: boolean) => void;
+export declare const Toggle: import("react").ForwardRefExoticComponent<import("@react-types/switch").AriaSwitchProps & {
+    isInvalid?: boolean;
 } & {
     className?: string;
+    style?: import("react").CSSProperties;
     size?: import("./types").TogglePropSize;
     labelPlacement?: import("./types").TogglePropLabelPlacement;
     slotProps?: {
         track?: import("react").ComponentPropsWithRef<"span">;
         label?: import("react").ComponentPropsWithRef<"span">;
     };
+    isInvalid?: boolean;
+    isSelected?: boolean;
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+    defaultSelected?: boolean;
+} & {
+    disabled?: boolean;
+    error?: boolean;
+    checked?: boolean;
+    readonly?: boolean;
+    defaultChecked?: boolean;
 } & import("react").RefAttributes<HTMLLabelElement>>;

package/dist/components/Toggle/Toggle.js

@@ -1,39 +1,100 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { deprecate } from "@koobiq/logger";
 import { mergeProps, isNotNil, clsx } from "@koobiq/react-core";
-import { Toggle as Toggle$1 } from "@koobiq/react-primitives";
+import { Switch } from "@koobiq/react-primitives";
 import s from "./Toggle.module.css.js";
 const Toggle = forwardRef(
   (props, ref) => {
     const {
       size = "normal",
       labelPlacement = "end",
+      disabled,
+      isDisabled: isDisabledProp,
+      checked,
+      isSelected: isSelectedProp,
+      error,
+      isInvalid: isInvalidProp,
+      defaultChecked,
+      defaultSelected: defaultSelectedProp,
+      readonly,
+      isReadOnly: isReadOnlyProp,
       children,
       slotProps,
       className,
       ...other
     } = props;
+    const isDisabled = isDisabledProp ?? disabled ?? false;
+    const isSelected = isSelectedProp ?? checked;
+    const isInvalid = isInvalidProp ?? error ?? false;
+    const defaultSelected = defaultSelectedProp ?? defaultChecked;
+    const isReadOnly = isReadOnlyProp ?? readonly ?? false;
+    if (process.env.NODE_ENV !== "production" && "disabled" in props) {
+      deprecate(
+        'Toggle: the "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "checked" in props) {
+      deprecate(
+        'Toggle: the "checked" prop is deprecated. Use "isSelected" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "error" in props) {
+      deprecate(
+        'Toggle: the "error" prop is deprecated. Use "isInvalid" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "defaultChecked" in props) {
+      deprecate(
+        'Toggle: the "defaultChecked" prop is deprecated. Use "defaultSelected" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "readonly" in props) {
+      deprecate(
+        'Toggle: the "readonly" prop is deprecated. Use "isReadOnly" prop to replace it.'
+      );
+    }
     const commonProps = {
-      className: ({ checked, hovered, focusVisible, disabled, error }) => clsx(
+      isDisabled,
+      isSelected,
+      isInvalid,
+      isReadOnly,
+      defaultSelected,
+      className: ({
+        isInvalid: isInvalid2,
+        isHovered,
+        isFocusVisible,
+        isDisabled: isDisabled2,
+        isSelected: isSelected2
+      }) => clsx(
         s.base,
         s[size],
-        error && s.error,
         s[labelPlacement],
-        hovered && s.hovered,
-        checked && s.checked,
-        disabled && s.disabled,
-        focusVisible && s.focusVisible,
+        isInvalid2 && s.invalid,
+        isHovered && s.hovered,
+        isSelected2 && s.selected,
+        isDisabled2 && s.disabled,
+        isFocusVisible && s.focusVisible,
         className
       ),
       ...other
     };
     const trackProps = mergeProps({ className: s.track }, slotProps?.track);
     const labelProps = slotProps?.label;
-    return /* @__PURE__ */ jsxs(Toggle$1, { ...commonProps, ref, children: [
-      /* @__PURE__ */ jsx("span", { ...trackProps }),
-      isNotNil(children) && /* @__PURE__ */ jsx("span", { ...labelProps, children })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      Switch,
+      {
+        "data-size": size,
+        "data-label-placement": labelPlacement,
+        ...commonProps,
+        ref,
+        children: [
+          /* @__PURE__ */ jsx("span", { ...trackProps }),
+          isNotNil(children) && /* @__PURE__ */ jsx("span", { ...labelProps, children })
+        ]
+      }
+    );
   }
 );
 Toggle.displayName = "Toggle";

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

@@ -5,8 +5,8 @@ const end = "kbq-toggle-end-dd56df";
 const normal = "kbq-toggle-normal-1cd430";
 const big = "kbq-toggle-big-8df194";
 const hovered = "kbq-toggle-hovered-d4d8d0";
-const checked = "kbq-toggle-checked-6ab2c0";
-const error = "kbq-toggle-error-8e1b23";
+const selected = "kbq-toggle-selected-0bb42c";
+const invalid = "kbq-toggle-invalid-ae9ba4";
 const focusVisible = "kbq-toggle-focusVisible-10b6e6";
 const disabled = "kbq-toggle-disabled-b31c64";
 const s = {
@@ -17,22 +17,22 @@ const s = {
   normal,
   big,
   hovered,
-  checked,
-  error,
+  selected,
+  invalid,
   focusVisible,
   disabled
 };
 export {
   base,
   big,
-  checked,
   s as default,
   disabled,
   end,
-  error,
   focusVisible,
   hovered,
+  invalid,
   normal,
+  selected,
   start,
   track
 };

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

@@ -1,25 +1,82 @@
-import type { ComponentPropsWithRef } from 'react';
-import type { UseToggleProps } from '@koobiq/react-primitives';
+import type { ComponentPropsWithRef, CSSProperties } from 'react';
+import type { UseSwitchProps } from '@koobiq/react-primitives';
 export declare const togglePropSize: readonly ["normal", "big"];
 export type TogglePropSize = (typeof togglePropSize)[number];
 export declare const togglePropLabelPlacement: readonly ["start", "end"];
 export type TogglePropLabelPlacement = (typeof togglePropLabelPlacement)[number];
-export type ToggleProps = UseToggleProps & {
+type ToggleDeprecatedProps = {
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     * @deprecated
+     * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
+     */
+    disabled?: boolean;
+    /**
+     * 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.
+     */
+    checked?: boolean;
+    /**
+     * 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;
+    /**
+     * The default checked state. Use when the component is not controlled.
+     * @deprecated
+     * The "defaultChecked" prop is deprecated. Use "defaultSelected" prop to replace it.
+     */
+    defaultChecked?: boolean;
+};
+export type ToggleProps = UseSwitchProps & {
     /** Additional CSS-classes. */
     className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
     /**
      * Size.
-     * @default normal
-     * */
+     * @default 'normal'
+     */
     size?: TogglePropSize;
     /**
      * The position of the label.
-     * @default end
-     * */
+     * @default 'end'
+     */
     labelPlacement?: TogglePropLabelPlacement;
     /** The props used for each slot inside. */
     slotProps?: {
         track?: ComponentPropsWithRef<'span'>;
         label?: ComponentPropsWithRef<'span'>;
     };
-};
+    /**
+     * If `true`, the component will indicate an error.
+     * @default false
+     */
+    isInvalid?: boolean;
+    /** If `true`, the component is checked. */
+    isSelected?: boolean;
+    /**
+     * 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;
+    /** The default checked state. Use when the component is not controlled. */
+    defaultSelected?: boolean;
+} & ToggleDeprecatedProps;
+export {};

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,9 +1,9 @@
 export declare const Tooltip: import("react").ForwardRefExoticComponent<{
     variant?: import("./types").TooltipPropVariant;
-    open?: boolean;
+    isOpen?: boolean;
     defaultOpen?: boolean;
     onOpenChange?(open: boolean): void;
-    disabled?: boolean;
+    isDisabled?: boolean;
     children?: import("react").ReactNode;
     control?: import("./types").TooltipPropControl;
     placement?: import("./types").TooltipPropPlacement;
@@ -18,4 +18,7 @@ export declare const Tooltip: import("react").ForwardRefExoticComponent<{
     id?: string;
     className?: string;
     portalContainer?: Element;
+} & {
+    open?: boolean;
+    disabled?: boolean;
 } & import("@koobiq/react-core").DataAttributeProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Tooltip/Tooltip.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef } from "react";
-import { useDOMRef, useMultiRef, useBoolean, FocusableProvider, clsx, mergeProps } from "@koobiq/react-core";
+import { deprecate } from "@koobiq/logger";
+import { useDOMRef, useMultiRef, useBoolean, mergeProps, clsx, FocusableProvider } from "@koobiq/react-core";
 import { useTooltipTriggerState, useTooltipTrigger, useOverlayPosition, useTooltip, Overlay } from "@koobiq/react-primitives";
 import { Transition } from "react-transition-group";
 import { utilClasses } from "../../styles/utility.js";
@@ -9,7 +10,10 @@ import s from "./Tooltip.module.css.js";
 const Tooltip = forwardRef((props, ref) => {
   const {
     delay = 120,
-    disabled = false,
+    disabled,
+    open,
+    isDisabled: isDisabledProp,
+    isOpen: isOpenProp,
     closeDelay = 120,
     hideArrow = false,
     variant = "contrast",
@@ -20,12 +24,23 @@ const Tooltip = forwardRef((props, ref) => {
     crossOffset,
     defaultOpen,
     onOpenChange,
-    open: openProp,
     portalContainer,
     offset: offsetProp,
     arrowBoundaryOffset,
     ...other
   } = props;
+  const isOpen = isOpenProp ?? open;
+  const isDisabled = isDisabledProp ?? disabled ?? false;
+  if (process.env.NODE_ENV !== "production" && "open" in props) {
+    deprecate(
+      'Tooltip: the "open" prop is deprecated. Use "isOpen" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && "disabled" in props) {
+    deprecate(
+      'Tooltip: the "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
+    );
+  }
   const showArrow = !hideArrow;
   const offset = showArrow ? offsetProp : offsetProp || 4;
   const state = useTooltipTriggerState({
@@ -33,21 +48,21 @@ const Tooltip = forwardRef((props, ref) => {
     closeDelay,
     defaultOpen,
     onOpenChange,
-    isOpen: openProp,
-    isDisabled: disabled,
+    isOpen,
+    isDisabled,
     ...other
   });
   const domRef = useDOMRef(ref);
   const controlRef = useRef(null);
   const controlRefCallback = useMultiRef([controlRef]);
-  const { triggerProps, tooltipProps } = useTooltipTrigger(
+  const { triggerProps, tooltipProps: tooltipTriggerProps } = useTooltipTrigger(
     {
       delay,
+      isOpen,
+      isDisabled,
       closeDelay,
       defaultOpen,
       onOpenChange,
-      isOpen: openProp,
-      isDisabled: disabled,
       ...other
     },
     state,
@@ -66,7 +81,20 @@ const Tooltip = forwardRef((props, ref) => {
     onClose: () => state.close(true),
     targetRef: anchorRef || controlRef
   });
-  const { tooltipProps: localTooltipProps } = useTooltip(overlayProps, state);
+  const { tooltipProps: tooltipCommonProps } = useTooltip(overlayProps, state);
+  const tooltipProps = mergeProps(
+    {
+      className: clsx(
+        s.base,
+        s[variant],
+        utilClasses.typography["text-normal"]
+      ),
+      ref: domRef
+    },
+    other,
+    tooltipCommonProps,
+    tooltipTriggerProps
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(FocusableProvider, { ...triggerProps, ref: controlRef, children: control?.({
       ref: controlRefCallback,
@@ -76,7 +104,7 @@ const Tooltip = forwardRef((props, ref) => {
       Transition,
       {
         onEnter: on,
-        timeout: 300,
+        timeout: 120,
         onExited: off,
         in: openState,
         nodeRef: domRef,
@@ -85,18 +113,11 @@ const Tooltip = forwardRef((props, ref) => {
         children: (transition) => /* @__PURE__ */ jsx(Overlay, { portalContainer, children: /* @__PURE__ */ jsxs(
           "div",
           {
-            ...mergeProps(localTooltipProps, tooltipProps),
+            ...tooltipProps,
             "data-arrow": showArrow,
             "data-variant": variant,
             "data-placement": placement,
             "data-transition": transition,
-            className: clsx(
-              s.base,
-              s[variant],
-              utilClasses.typography["text-normal"]
-            ),
-            ...other,
-            ref: domRef,
             children: [
               showArrow && /* @__PURE__ */ jsx(
                 "div",
@@ -110,8 +131,7 @@ const Tooltip = forwardRef((props, ref) => {
             ]
           }
         ) })
-      },
-      placement
+      }
     )
   ] });
 });