@koobiq/react-components 0.0.1-beta.9 → 0.1.0

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

@@ -1,50 +1,70 @@
 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;
     /** Additional CSS-classes. */
     className?: string;
     /**
      * The variant to use.
-     * @default filled
-     * */
+     * @default 'filled'
+     */
     variant?: TextareaPropVariant;
-    /**
-     * If `true`, the input will indicate an error.
-     * @default false
-     * */
-    error?: boolean;
-    /** Message for the error state */
-    errorMessage?: string | number;
+    /** An error message for the field. */
+    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;
     /**
      * 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;
-    /**
-     * If `true`, the label is displayed as required and the input element is required.
-     * @default false
-     * */
-    required?: boolean;
+    caption?: ReactNode;
     /** 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 +76,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/TimePicker/TimePicker.d.ts

@@ -0,0 +1,5 @@
+import { type Ref } from 'react';
+import type { TimeValue } from '@koobiq/react-primitives';
+import type { TimePickerComponent, TimePickerProps, TimePickerRef } from './types';
+export declare function TimePickerRender<T extends TimeValue>(props: Omit<TimePickerProps<T>, 'ref'>, ref: Ref<TimePickerRef>): import("react/jsx-runtime").JSX.Element;
+export declare const TimePicker: TimePickerComponent;

package/dist/components/TimePicker/TimePicker.js

@@ -0,0 +1,112 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useLocale, useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
+import { IconClock16 } from "@koobiq/react-icons";
+import { useTimeFieldState, removeDataAttributes, useTimeField } from "@koobiq/react-primitives";
+import s from "./TimePicker.module.css.js";
+import { FieldControl } from "../FieldComponents/FieldControl/FieldControl.js";
+import { FieldLabel } from "../FieldComponents/FieldLabel/FieldLabel.js";
+import { FieldInputGroup } from "../FieldComponents/FieldInputGroup/FieldInputGroup.js";
+import { FieldInputDate } from "../FieldComponents/FieldInputDate/FieldInputDate.js";
+import { DateSegment } from "../DateSegment/DateSegment.js";
+import { FieldCaption } from "../FieldComponents/FieldCaption/FieldCaption.js";
+import { FieldError } from "../FieldComponents/FieldError/FieldError.js";
+function TimePickerRender(props, ref) {
+  const { locale } = useLocale();
+  const domRef = useDOMRef(ref);
+  const {
+    isLabelHidden,
+    caption,
+    label,
+    slotProps,
+    style,
+    fullWidth,
+    variant,
+    className,
+    endAddon,
+    startAddon,
+    errorMessage,
+    "data-testid": testId
+  } = props;
+  const state = useTimeFieldState({
+    ...removeDataAttributes(props),
+    locale
+  });
+  const {
+    labelProps: labelPropReactAria,
+    fieldProps,
+    descriptionProps,
+    errorMessageProps,
+    ...validation
+  } = useTimeField(removeDataAttributes(props), state, domRef);
+  const { isInvalid, isDisabled, isRequired, isReadOnly } = state;
+  const rootProps = mergeProps(
+    {
+      style,
+      fullWidth,
+      "data-testid": testId,
+      "data-variant": variant,
+      "data-invalid": isInvalid,
+      "data-disabled": isDisabled,
+      "data-fullwidth": fullWidth,
+      "data-required": isRequired,
+      "data-readonly": isReadOnly,
+      className: clsx(s.base, className)
+    },
+    slotProps?.root
+  );
+  const groupProps = mergeProps(
+    {
+      startAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
+        startAddon,
+        /* @__PURE__ */ jsx(IconClock16, {})
+      ] }),
+      isInvalid,
+      isDisabled,
+      endAddon
+    },
+    slotProps?.group
+  );
+  const controlProps = mergeProps(
+    {
+      variant,
+      isInvalid,
+      isDisabled,
+      ref: domRef
+    },
+    slotProps?.inputDate,
+    fieldProps
+  );
+  const labelProps = mergeProps(
+    { isHidden: isLabelHidden, children: label, isRequired },
+    labelPropReactAria,
+    slotProps?.label
+  );
+  const captionProps = mergeProps({ children: caption }, slotProps?.caption, descriptionProps);
+  const errorProps = mergeProps(
+    {
+      isInvalid,
+      children: typeof errorMessage === "function" ? errorMessage({ ...validation }) : errorMessage
+    },
+    slotProps?.errorMessage,
+    errorMessageProps
+  );
+  return /* @__PURE__ */ jsxs(FieldControl, { ...rootProps, children: [
+    /* @__PURE__ */ jsx(FieldLabel, { ...labelProps }),
+    /* @__PURE__ */ jsx(
+      FieldInputGroup,
+      {
+        ...groupProps,
+        slotProps: { start: { className: s.startAddon } },
+        children: /* @__PURE__ */ jsx(FieldInputDate, { ...controlProps, children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(DateSegment, { segment, state }, i)) })
+      }
+    ),
+    /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
+    /* @__PURE__ */ jsx(FieldError, { ...errorProps })
+  ] });
+}
+const TimePicker = forwardRef(TimePickerRender);
+export {
+  TimePicker,
+  TimePickerRender
+};

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

@@ -0,0 +1,11 @@
+const base = "kbq-timepicker-a6e9f3";
+const startAddon = "kbq-timepicker-startAddon-46c835";
+const s = {
+  base,
+  startAddon
+};
+export {
+  base,
+  s as default,
+  startAddon
+};

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

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

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

@@ -0,0 +1,46 @@
+import type { ComponentRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react';
+import type { AriaTimeFieldProps, TimeValue } from '@koobiq/react-primitives';
+import type { DateInputPropVariant } from '../DateInput';
+import type { FieldCaptionProps, FieldControlProps, FieldErrorProps, FieldInputDateProps, FieldInputGroupProps, FieldLabelProps } from '../FieldComponents';
+export type TimePickerProps<T extends TimeValue> = {
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /** The helper text content. */
+    caption?: ReactNode;
+    /**
+     * The variant to use.
+     * @default 'filled'
+     */
+    variant?: DateInputPropVariant;
+    /**
+     * If true, the input will take up the full width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        root?: FieldControlProps;
+        label?: FieldLabelProps;
+        group?: FieldInputGroupProps;
+        caption?: FieldCaptionProps;
+        inputDate?: FieldInputDateProps;
+        errorMessage?: FieldErrorProps;
+    };
+    /** Ref to the control */
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * If `true`, the label is hidden. Be sure to add aria-label to the input element.
+     * @default false
+     */
+    isLabelHidden?: boolean;
+    /** Addon placed before the children. */
+    startAddon?: ReactNode;
+    /** Addon placed after the children. */
+    endAddon?: ReactNode;
+} & AriaTimeFieldProps<T>;
+export type TimePickerComponent = <T extends TimeValue>(props: TimePickerProps<T>) => ReactElement | null;
+export type TimePickerRef = ComponentRef<'div'>;

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

@@ -1,16 +1,24 @@
-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"> & {
+import { type SwitchProps } from '@koobiq/react-primitives';
+export declare const Toggle: import("react").ForwardRefExoticComponent<Omit<Omit<SwitchProps, "inputRef">, "children" | "style" | "className" | "size" | "slotProps" | "labelPlacement" | keyof {
+    disabled?: boolean;
     error?: boolean;
     checked?: boolean;
-    disabled?: boolean;
-    required?: boolean;
+    readonly?: boolean;
     defaultChecked?: boolean;
-    onChange?: (checked: boolean) => void;
-} & {
+}> & {
+    children?: import("react").ReactNode;
     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">;
     };
+} & {
+    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,66 @@
-import type { ComponentPropsWithRef } from 'react';
-import type { UseToggleProps } from '@koobiq/react-primitives';
+import type { ComponentPropsWithRef, CSSProperties, ReactNode } from 'react';
+import type { ExtendableProps } from '@koobiq/react-core';
+import type { SwitchProps } 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 = ExtendableProps<{
+    /** The content of the component. */
+    children?: ReactNode;
     /** 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'>;
     };
-};
+} & ToggleDeprecatedProps, Omit<SwitchProps, 'inputRef'>>;
+export {};

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

@@ -1,9 +1,8 @@
-export declare const Tooltip: import("react").ForwardRefExoticComponent<{
-    variant?: import("./types").TooltipPropVariant;
+export declare const Tooltip: import("react").ForwardRefExoticComponent<Omit<import("@react-types/tooltip").TooltipTriggerProps, "children" | "className" | "id" | "offset" | "variant" | `data-${string}` | "placement" | "control" | "portalContainer" | "anchorRef" | "hideArrow" | "arrowBoundaryOffset" | "crossOffset" | "delay" | "closeDelay" | keyof {
     open?: boolean;
-    defaultOpen?: boolean;
-    onOpenChange?(open: boolean): void;
     disabled?: boolean;
+}> & {
+    variant?: import("./types").TooltipPropVariant;
     children?: import("react").ReactNode;
     control?: import("./types").TooltipPropControl;
     placement?: import("./types").TooltipPropPlacement;
@@ -14,8 +13,10 @@ export declare const Tooltip: import("react").ForwardRefExoticComponent<{
     hideArrow?: boolean;
     delay?: number;
     closeDelay?: number;
-    trigger?: "focus";
     id?: string;
     className?: string;
     portalContainer?: Element;
+} & {
+    open?: boolean;
+    disabled?: boolean;
 } & import("@koobiq/react-core").DataAttributeProps & import("react").RefAttributes<HTMLDivElement>>;