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

package/dist/behaviors/index.d.ts

@@ -1,11 +1,8 @@
-export * from './useButton.js';
-export * from './useCheckbox.js';
-export * from './useLink.js';
-export * from './useTextField.js';
-export * from './useToggle.js';
-export * from './useRadio.js';
-export * from './useRadioGroup.js';
-export * from './useRadioGroupState.js';
-export * from './useProgressBar.js';
-export * from './useNumberField.js';
-export * from './useNumberFieldState.js';
+export * from './useButton';
+export * from './useCheckbox';
+export * from './useLink';
+export * from './useSwitch';
+export * from './useRadio';
+export * from './useRadioGroup';
+export * from './useRadioGroupState';
+export * from './useNumberField';

package/dist/behaviors/useButton.d.ts

@@ -1,12 +1,14 @@
-import type { RefObject } from 'react';
-import type { ButtonOptions } from '../types';
-export type UseButtonProps = ButtonOptions;
-export declare function useButton(props: UseButtonProps, ref: RefObject<Element | null>): {
-    pressed: boolean;
-    hovered: boolean;
-    focused: boolean;
-    disabled: boolean | undefined;
+import type { ElementType, RefObject } from 'react';
+import { type HoverEvents } from '@koobiq/react-core';
+import { type AriaButtonOptions } from '@react-aria/button';
+export type UseButtonProps<E extends ElementType> = AriaButtonOptions<E> & HoverEvents;
+export type ButtonOptions = AriaButtonOptions<ElementType>;
+export declare function useButton<E extends ElementType>(props: UseButtonProps<E>, ref: RefObject<Element | null>): {
+    isPressed: boolean;
+    isHovered: boolean;
+    isFocused: boolean;
+    isDisabled: boolean | undefined;
     buttonProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement>;
-    focusVisible: boolean;
+    isFocusVisible: boolean;
 };
-export type UseButtonReturn = ReturnType<typeof useButton>;
+export type UseButtonReturn<E extends ElementType> = ReturnType<typeof useButton<E>>;

package/dist/behaviors/useButton.js

@@ -2,34 +2,23 @@
 import { useFocusRing, useHover, mergeProps } from "@koobiq/react-core";
 import { useButton as useButton$1 } from "@react-aria/button";
 function useButton(props, ref) {
-  const { onClick, onPress, disabled, ...otherProps } = props;
-  const {
-    focusProps,
-    isFocused: focused,
-    isFocusVisible: focusVisible
-  } = useFocusRing({
+  const { isDisabled } = props;
+  const { focusProps, isFocused, isFocusVisible } = useFocusRing({
     within: true
   });
-  const { hoverProps, isHovered: hovered } = useHover({
-    ...props,
-    isDisabled: disabled
-  });
-  const { buttonProps: commonButtonProps, isPressed: pressed } = useButton$1(
-    {
-      ...otherProps,
-      onPress: onPress || onClick,
-      isDisabled: disabled
-    },
+  const { hoverProps, isHovered } = useHover(props);
+  const { buttonProps: buttonPropsReactAria, isPressed } = useButton$1(
+    props,
     ref
   );
-  const buttonProps = mergeProps(commonButtonProps, focusProps, hoverProps);
+  const buttonProps = mergeProps(buttonPropsReactAria, focusProps, hoverProps);
   return {
-    pressed,
-    hovered,
-    focused,
-    disabled,
+    isPressed,
+    isHovered,
+    isFocused,
+    isDisabled,
     buttonProps,
-    focusVisible
+    isFocusVisible
   };
 }
 export {

package/dist/behaviors/useCheckbox.d.ts

@@ -1,56 +1,21 @@
 import type { RefObject } from 'react';
-import type { ExtendableProps } from '@koobiq/react-core';
 import type { AriaCheckboxProps } from '@react-aria/checkbox';
-export type UseCheckboxProps = ExtendableProps<{
-    /**
-     * If `true`, the component will indicate an error.
-     * @default false
-     * */
-    error?: boolean;
-    /**
-     * If `true`, the component is checked.
-     * @default false
-     * */
-    checked?: boolean;
-    /** It prevents the user from changing the value of the checkbox.
-     * @default false
-     */
-    readonly?: boolean;
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     * */
-    disabled?: boolean;
-    /**
-     * If `true`, the input element is required.
-     * @default false
-     * */
-    required?: boolean;
-    /**
-     * If `true`, the component appears indeterminate.
-     * @default false
-     * */
-    indeterminate?: boolean;
-    /** The default checked state. Use when the component is not controlled. */
-    defaultChecked?: boolean;
-    /** Callback fired when the state is changed. */
-    onChange?: (checked: boolean) => void;
-}, Omit<AriaCheckboxProps, 'onChange' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'isSelected' | 'isDisabled' | 'isIndeterminate' | 'defaultSelected'>>;
+export type UseCheckboxProps = AriaCheckboxProps;
 export declare function useCheckbox(props: UseCheckboxProps, inputRef: RefObject<HTMLInputElement | null>): {
     validationErrors: string[];
     validationDetails: ValidityState;
+    isInvalid: boolean;
+    isPressed: boolean;
+    isHovered: boolean;
+    isFocused: boolean;
+    isSelected: boolean;
+    isDisabled: boolean;
+    isReadOnly: boolean;
     labelProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement> & import("react").LabelHTMLAttributes<HTMLLabelElement>;
     inputProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
         ref: RefObject<HTMLInputElement | null>;
     };
-    indeterminate: boolean | undefined;
-    error: boolean;
-    pressed: boolean;
-    hovered: boolean;
-    focused: boolean;
-    checked: boolean;
-    disabled: boolean;
-    readonly: boolean;
-    focusVisible: boolean;
+    isFocusVisible: boolean;
+    isIndeterminate: boolean | undefined;
 };
 export type UseCheckboxReturn = ReturnType<typeof useCheckbox>;

package/dist/behaviors/useCheckbox.js

@@ -1,24 +1,12 @@
 "use client";
-import { useToggleState, useHover, useFocusRing, mergeProps } from "@koobiq/react-core";
+import { useHover, useFocusRing, mergeProps } from "@koobiq/react-core";
 import { useCheckbox as useCheckbox$1 } from "@react-aria/checkbox";
+import { useToggleState } from "@react-stately/toggle";
 function useCheckbox(props, inputRef) {
-  const {
-    error,
-    checked,
-    disabled,
-    readonly,
-    required,
-    indeterminate,
-    defaultChecked,
-    onChange
-  } = props;
-  const state = useToggleState({
-    isSelected: checked,
-    defaultSelected: defaultChecked,
-    onChange
-  });
+  const { isDisabled: isDisabledProp, isIndeterminate: isIndeterminateProp } = props;
+  const state = useToggleState(props);
   const { hoverProps, isHovered } = useHover({
-    isDisabled: disabled
+    isDisabled: isDisabledProp
   });
   const { focusProps, isFocused, isFocusVisible } = useFocusRing();
   const {
@@ -30,34 +18,23 @@ function useCheckbox(props, inputRef) {
     isReadOnly,
     isPressed,
     ...other
-  } = useCheckbox$1(
-    {
-      ...props,
-      isInvalid: error,
-      isDisabled: disabled,
-      isIndeterminate: indeterminate,
-      isReadOnly: readonly,
-      isRequired: required
-    },
-    state,
-    inputRef
-  );
+  } = useCheckbox$1(props, state, inputRef);
   const labelProps = mergeProps(hoverProps, commonLabelProps);
   const inputProps = mergeProps(focusProps, commonInputProps, {
     ref: inputRef
   });
   return {
+    isInvalid,
+    isPressed,
+    isHovered,
+    isFocused,
+    isSelected,
+    isDisabled,
+    isReadOnly,
     labelProps,
     inputProps,
-    indeterminate,
-    error: isInvalid,
-    pressed: isPressed,
-    hovered: isHovered,
-    focused: isFocused,
-    checked: isSelected,
-    disabled: isDisabled,
-    readonly: isReadOnly,
-    focusVisible: isFocusVisible,
+    isFocusVisible,
+    isIndeterminate: isIndeterminateProp,
     ...other
   };
 }

package/dist/behaviors/useLink.d.ts

@@ -1,15 +1,11 @@
 import type { RefObject } from 'react';
-import type { ExtendableProps } from '@koobiq/react-core';
 import type { AriaLinkOptions } from '@react-aria/link';
-export type UseLinkProps = ExtendableProps<{
-    disabled?: boolean;
-    onClick?: AriaLinkOptions['onPress'];
-}, Omit<AriaLinkOptions, 'isDisabled'>>;
+export type UseLinkProps = AriaLinkOptions;
 export declare function useLink(props: UseLinkProps, ref: RefObject<HTMLElement | null>): {
     linkProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement>;
-    pressed: boolean;
-    hovered: boolean;
-    focused: boolean;
-    focusVisible: boolean;
+    isPressed: boolean;
+    isHovered: boolean;
+    isFocused: boolean;
+    isFocusVisible: boolean;
 };
 export type UseLinkReturn = ReturnType<typeof useLink>;

package/dist/behaviors/useLink.js

@@ -2,32 +2,23 @@
 import { useHover, useFocusRing, mergeProps } from "@koobiq/react-core";
 import { useLink as useLink$1 } from "@react-aria/link";
 function useLink(props, ref) {
-  const { disabled, onClick, ...otherProps } = props;
-  const { hoverProps, isHovered } = useHover({
-    ...otherProps,
-    isDisabled: disabled
-  });
+  const { hoverProps, isHovered } = useHover(props);
   const { focusProps, isFocused, isFocusVisible } = useFocusRing();
   const { linkProps: commonLinkProps, isPressed } = useLink$1(
-    {
-      ...otherProps,
-      onPress: onClick,
-      isDisabled: disabled
-    },
+    props,
     ref
   );
   const linkProps = mergeProps(
-    { disabled },
+    commonLinkProps,
     focusProps,
-    hoverProps,
-    commonLinkProps
+    hoverProps
   );
   return {
     linkProps,
-    pressed: isPressed,
-    hovered: isHovered,
-    focused: isFocused,
-    focusVisible: isFocusVisible
+    isPressed,
+    isHovered,
+    isFocused,
+    isFocusVisible
   };
 }
 export {

package/dist/behaviors/useNumberField.d.ts

@@ -1,26 +1,5 @@
 import type { RefObject } from 'react';
-import type { ExtendableProps } from '@koobiq/react-core';
 import type { AriaNumberFieldProps } from '@react-aria/numberfield';
-export type UseNumberFieldProps = ExtendableProps<{
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     * */
-    disabled?: boolean;
-    /** It prevents the user from changing the value of the checkbox.
-     * @default false
-     */
-    readonly?: boolean;
-    /**
-     * If `true`, the input element is required.
-     * @default false
-     * */
-    required?: boolean;
-    /**
-     * If `true`, the component will indicate an error.
-     * @default false
-     * */
-    error?: boolean;
-}, Omit<AriaNumberFieldProps, 'isDisabled' | 'isInvalid' | 'isRequired' | 'isReadOnly' | 'isWheelDisabled'>>;
+export type UseNumberFieldProps = AriaNumberFieldProps;
 export declare function useNumberField(props: UseNumberFieldProps, ref: RefObject<HTMLInputElement | null>): import("@react-aria/numberfield").NumberFieldAria;
 export type UseNumberFieldReturn = ReturnType<typeof useNumberField>;

package/dist/behaviors/useNumberField.js

@@ -1,21 +1,10 @@
 import { useLocale } from "@react-aria/i18n";
 import { useNumberField as useNumberField$1 } from "@react-aria/numberfield";
-import { useNumberFieldState } from "./useNumberFieldState.js";
+import { useNumberFieldState } from "@react-stately/numberfield";
 function useNumberField(props, ref) {
-  const { disabled, error, readonly, required, ...other } = props;
   const { locale } = useLocale();
   const state = useNumberFieldState({ ...props, locale });
-  return useNumberField$1(
-    {
-      isDisabled: disabled,
-      isReadOnly: readonly,
-      isRequired: required,
-      isInvalid: error,
-      ...other
-    },
-    state,
-    ref
-  );
+  return useNumberField$1(props, state, ref);
 }
 export {
   useNumberField

package/dist/behaviors/useRadio.d.ts

@@ -1,45 +1,18 @@
 import type { RefObject } from 'react';
-import type { ExtendableProps } from '@koobiq/react-core';
 import type { AriaRadioProps } from '@react-aria/radio';
 import type { RadioGroupState } from '@react-stately/radio';
-export type UseRadioProps = ExtendableProps<{
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     * */
-    disabled?: boolean;
-}, Omit<AriaRadioProps, 'isDisabled'>>;
-export type UseRadioState = ExtendableProps<{
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     * */
-    disabled?: boolean;
-    /** It prevents the user from changing the value of the checkbox.
-     * @default false
-     */
-    readonly?: boolean;
-    /**
-     * If `true`, the input element is required.
-     * @default false
-     * */
-    required?: boolean;
-    /**
-     * If `true`, the component will indicate an error.
-     * @default false
-     * */
-    error?: boolean;
-}, Omit<RadioGroupState, 'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid'>>;
+export type UseRadioProps = AriaRadioProps;
+export type UseRadioState = RadioGroupState;
 export declare function useRadio(props: UseRadioProps, state: UseRadioState, ref: RefObject<HTMLInputElement | null>): {
     labelProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement> & import("react").LabelHTMLAttributes<HTMLLabelElement>;
     inputProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
         ref: RefObject<HTMLInputElement | null>;
     };
-    pressed: boolean;
-    hovered: boolean;
-    focused: boolean;
-    checked: boolean;
-    disabled: boolean;
-    focusVisible: boolean;
+    isPressed: boolean;
+    isHovered: boolean;
+    isFocused: boolean;
+    isSelected: boolean;
+    isDisabled: boolean;
+    isFocusVisible: boolean;
 };
 export type UseRadioReturn = ReturnType<typeof useRadio>;

package/dist/behaviors/useRadio.js

@@ -2,7 +2,6 @@
 import { useHover, mergeProps, useFocusRing } from "@koobiq/react-core";
 import { useRadio as useRadio$1 } from "@react-aria/radio";
 function useRadio(props, state, ref) {
-  const { disabled } = props;
   const {
     inputProps: commonInputProps,
     labelProps: commonLabelProps,
@@ -10,20 +9,17 @@ function useRadio(props, state, ref) {
     isSelected,
     isPressed
   } = useRadio$1(
-    {
-      ...props,
-      isDisabled: disabled
-    },
+    props,
     Object.assign(state, {
-      isInvalid: state.error || false,
-      isReadOnly: state.readonly || false,
-      isDisabled: state.disabled || false,
-      isRequired: state.required || false
+      isInvalid: state.isInvalid || false,
+      isReadOnly: state.isReadOnly || false,
+      isDisabled: state.isDisabled || false,
+      isRequired: state.isRequired || false
     }),
     ref
   );
   const { hoverProps, isHovered } = useHover({
-    isDisabled: disabled
+    isDisabled
   });
   const labelProps = mergeProps(hoverProps, commonLabelProps);
   const { focusProps, isFocused, isFocusVisible } = useFocusRing();
@@ -33,12 +29,12 @@ function useRadio(props, state, ref) {
   return {
     labelProps,
     inputProps,
-    pressed: isPressed,
-    hovered: isHovered,
-    focused: isFocused,
-    checked: isSelected,
-    disabled: isDisabled,
-    focusVisible: isFocusVisible
+    isPressed,
+    isHovered,
+    isFocused,
+    isSelected,
+    isDisabled,
+    isFocusVisible
   };
 }
 export {

package/dist/behaviors/useRadioGroup.d.ts

@@ -1,55 +1,2 @@
-import type { ExtendableProps } from '@koobiq/react-core';
-import { type AriaRadioGroupProps } from '@react-aria/radio';
-import type { RadioGroupState } from '@react-stately/radio';
-export type UseRadioGroupProps = ExtendableProps<{
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     * */
-    disabled?: boolean;
-    /** It prevents the user from changing the value of the checkbox.
-     * @default false
-     */
-    readonly?: boolean;
-    /**
-     * If `true`, the input element is required.
-     * @default false
-     * */
-    required?: boolean;
-    /**
-     * If `true`, the component will indicate an error.
-     * @default false
-     * */
-    error?: boolean;
-}, Omit<AriaRadioGroupProps, 'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid'>>;
-export type UseRadioGroupState = ExtendableProps<{
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     * */
-    disabled?: boolean;
-    /** It prevents the user from changing the value of the checkbox.
-     * @default false
-     */
-    readonly?: boolean;
-    /**
-     * If `true`, the input element is required.
-     * @default false
-     * */
-    required?: boolean;
-    /**
-     * If `true`, the component will indicate an error.
-     * @default false
-     * */
-    error?: boolean;
-}, Omit<RadioGroupState, 'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid'>>;
-export declare function useRadioGroup(props: UseRadioGroupProps, state: UseRadioGroupState): {
-    radioGroupProps: import("@react-types/shared").DOMAttributes;
-    labelProps: import("@react-types/shared").DOMAttributes;
-    descriptionProps: import("@react-types/shared").DOMAttributes;
-    errorMessageProps: import("@react-types/shared").DOMAttributes;
-    validationErrors: string[];
-    validationDetails: ValidityState;
-    error: boolean;
-};
-export type UseRadioGroupReturn = ReturnType<typeof useRadioGroup>;
+import { useRadioGroup as useRadioGroupReactAria } from '@react-aria/radio';
+export declare const useRadioGroup: typeof useRadioGroupReactAria;

package/dist/behaviors/useRadioGroup.js

@@ -1,22 +1,5 @@
 import { useRadioGroup as useRadioGroup$1 } from "@react-aria/radio";
-function useRadioGroup(props, state) {
-  const { isInvalid, ...other } = useRadioGroup$1(
-    {
-      ...props,
-      isInvalid: props.error || false,
-      isReadOnly: props.readonly || false,
-      isDisabled: props.disabled || false,
-      isRequired: props.required || false
-    },
-    Object.assign(state, {
-      isInvalid: state.error || false,
-      isReadOnly: state.readonly || false,
-      isDisabled: state.disabled || false,
-      isRequired: state.required || false
-    })
-  );
-  return { error: isInvalid, ...other };
-}
+const useRadioGroup = useRadioGroup$1;
 export {
   useRadioGroup
 };

package/dist/behaviors/useRadioGroupState.d.ts

@@ -1,42 +1,2 @@
-import type { ExtendableProps } from '@koobiq/react-core';
-import type { RadioGroupProps } from '@react-stately/radio';
-export type UseRadioGroupStateProps = ExtendableProps<{
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     * */
-    disabled?: boolean;
-    /** It prevents the user from changing the value of the checkbox.
-     * @default false
-     */
-    readonly?: boolean;
-    /**
-     * If `true`, the input element is required.
-     * @default false
-     * */
-    required?: boolean;
-    /**
-     * If `true`, the component will indicate an error.
-     * @default false
-     * */
-    error?: boolean;
-}, Omit<RadioGroupProps, 'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid'>>;
-export declare function useRadioGroupState(props: UseRadioGroupStateProps): {
-    name: string;
-    validationState: import("@react-types/shared").ValidationState | null;
-    selectedValue: string | null;
-    setSelectedValue(value: string | null): void;
-    lastFocusedValue: string | null;
-    setLastFocusedValue(value: string | null): void;
-    realtimeValidation: import("@react-types/shared").ValidationResult;
-    displayValidation: import("@react-types/shared").ValidationResult;
-    updateValidation(result: import("@react-types/shared").ValidationResult): void;
-    resetValidation(): void;
-    commitValidation(): void;
-    error: boolean;
-    readonly: boolean;
-    required: boolean;
-    disabled: boolean;
-};
-export type UseRadioGroupStateReturn = ReturnType<typeof useRadioGroupState>;
-export type RadioGroupState = UseRadioGroupStateReturn;
+import { useRadioGroupState as useRadioGroupStateReactAria } from '@react-stately/radio';
+export declare const useRadioGroupState: typeof useRadioGroupStateReactAria;

package/dist/behaviors/useRadioGroupState.js

@@ -1,20 +1,5 @@
 import { useRadioGroupState as useRadioGroupState$1 } from "@react-stately/radio";
-function useRadioGroupState(props) {
-  const { isDisabled, isInvalid, isReadOnly, isRequired, ...other } = useRadioGroupState$1({
-    ...props,
-    isInvalid: props.error || false,
-    isReadOnly: props.readonly || false,
-    isDisabled: props.disabled || false,
-    isRequired: props.required || false
-  });
-  return {
-    error: isInvalid,
-    readonly: isReadOnly,
-    required: isRequired,
-    disabled: isDisabled,
-    ...other
-  };
-}
+const useRadioGroupState = useRadioGroupState$1;
 export {
   useRadioGroupState
 };