@koobiq/react-primitives 0.0.1-beta.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Koobiq
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# @koobiq/react-primitives

package/dist/behaviors/index.d.ts

@@ -0,0 +1,11 @@
+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';

package/dist/behaviors/useButton.d.ts

@@ -0,0 +1,12 @@
+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;
+    buttonProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement>;
+    focusVisible: boolean;
+};
+export type UseButtonReturn = ReturnType<typeof useButton>;

package/dist/behaviors/useButton.js

@@ -0,0 +1,37 @@
+"use client";
+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({
+    within: true
+  });
+  const { hoverProps, isHovered: hovered } = useHover({
+    ...props,
+    isDisabled: disabled
+  });
+  const { buttonProps: commonButtonProps, isPressed: pressed } = useButton$1(
+    {
+      ...otherProps,
+      onPress: onPress || onClick,
+      isDisabled: disabled
+    },
+    ref
+  );
+  const buttonProps = mergeProps(commonButtonProps, focusProps, hoverProps);
+  return {
+    pressed,
+    hovered,
+    focused,
+    disabled,
+    buttonProps,
+    focusVisible
+  };
+}
+export {
+  useButton
+};

package/dist/behaviors/useCheckbox.d.ts

@@ -0,0 +1,56 @@
+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 declare function useCheckbox(props: UseCheckboxProps, inputRef: RefObject<HTMLInputElement | null>): {
+    validationErrors: string[];
+    validationDetails: ValidityState;
+    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;
+};
+export type UseCheckboxReturn = ReturnType<typeof useCheckbox>;

package/dist/behaviors/useCheckbox.js

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

package/dist/behaviors/useLink.d.ts

@@ -0,0 +1,15 @@
+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 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;
+};
+export type UseLinkReturn = ReturnType<typeof useLink>;

package/dist/behaviors/useLink.js

@@ -0,0 +1,35 @@
+"use client";
+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 { focusProps, isFocused, isFocusVisible } = useFocusRing();
+  const { linkProps: commonLinkProps, isPressed } = useLink$1(
+    {
+      ...otherProps,
+      onPress: onClick,
+      isDisabled: disabled
+    },
+    ref
+  );
+  const linkProps = mergeProps(
+    { disabled },
+    focusProps,
+    hoverProps,
+    commonLinkProps
+  );
+  return {
+    linkProps,
+    pressed: isPressed,
+    hovered: isHovered,
+    focused: isFocused,
+    focusVisible: isFocusVisible
+  };
+}
+export {
+  useLink
+};

package/dist/behaviors/useNumberField.d.ts

@@ -0,0 +1,26 @@
+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 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

@@ -0,0 +1,22 @@
+import { useLocale } from "@react-aria/i18n";
+import { useNumberField as useNumberField$1 } from "@react-aria/numberfield";
+import { useNumberFieldState } from "./useNumberFieldState.js";
+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
+  );
+}
+export {
+  useNumberField
+};

package/dist/behaviors/useNumberFieldState.d.ts

@@ -0,0 +1,25 @@
+import type { ExtendableProps } from '@koobiq/react-core';
+import type { NumberFieldStateOptions } from '@react-stately/numberfield';
+export type UseNumberFieldStateProps = 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<NumberFieldStateOptions, 'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid'>>;
+export declare function useNumberFieldState(props: UseNumberFieldStateProps): import("@react-stately/numberfield").NumberFieldState;
+export type UseNumberFieldStateReturn = ReturnType<typeof useNumberFieldState>;

package/dist/behaviors/useNumberFieldState.js

@@ -0,0 +1,13 @@
+import { useNumberFieldState as useNumberFieldState$1 } from "@react-stately/numberfield";
+function useNumberFieldState(props) {
+  return useNumberFieldState$1({
+    ...props,
+    isInvalid: props.error || false,
+    isReadOnly: props.readonly || false,
+    isDisabled: props.disabled || false,
+    isRequired: props.required || false
+  });
+}
+export {
+  useNumberFieldState
+};

package/dist/behaviors/useProgressBar.d.ts

@@ -0,0 +1,7 @@
+import type { ExtendableProps } from '@koobiq/react-core';
+import type { AriaProgressBarProps } from '@react-aria/progress';
+export type UseProgressBarProps = ExtendableProps<Omit<AriaProgressBarProps, 'isIndeterminate'>, {
+    indeterminate?: boolean;
+}>;
+export declare function useProgressBar(props: UseProgressBarProps): import("@react-aria/progress").ProgressBarAria;
+export type UseProgressBarReturn = ReturnType<typeof useProgressBar>;

package/dist/behaviors/useProgressBar.js

@@ -0,0 +1,9 @@
+"use client";
+import { useProgressBar as useProgressBar$1 } from "@react-aria/progress";
+function useProgressBar(props) {
+  const { indeterminate, ...other } = props;
+  return useProgressBar$1({ ...other, isIndeterminate: indeterminate });
+}
+export {
+  useProgressBar
+};

package/dist/behaviors/useRadio.d.ts

@@ -0,0 +1,45 @@
+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 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;
+};
+export type UseRadioReturn = ReturnType<typeof useRadio>;

package/dist/behaviors/useRadio.js

@@ -0,0 +1,46 @@
+"use client";
+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,
+    isDisabled,
+    isSelected,
+    isPressed
+  } = useRadio$1(
+    {
+      ...props,
+      isDisabled: disabled
+    },
+    Object.assign(state, {
+      isInvalid: state.error || false,
+      isReadOnly: state.readonly || false,
+      isDisabled: state.disabled || false,
+      isRequired: state.required || false
+    }),
+    ref
+  );
+  const { hoverProps, isHovered } = useHover({
+    isDisabled: disabled
+  });
+  const labelProps = mergeProps(hoverProps, commonLabelProps);
+  const { focusProps, isFocused, isFocusVisible } = useFocusRing();
+  const inputProps = mergeProps(focusProps, commonInputProps, {
+    ref
+  });
+  return {
+    labelProps,
+    inputProps,
+    pressed: isPressed,
+    hovered: isHovered,
+    focused: isFocused,
+    checked: isSelected,
+    disabled: isDisabled,
+    focusVisible: isFocusVisible
+  };
+}
+export {
+  useRadio
+};

package/dist/behaviors/useRadioGroup.d.ts

@@ -0,0 +1,55 @@
+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>;

package/dist/behaviors/useRadioGroup.js

@@ -0,0 +1,22 @@
+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 };
+}
+export {
+  useRadioGroup
+};

package/dist/behaviors/useRadioGroupState.d.ts

@@ -0,0 +1,42 @@
+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;

package/dist/behaviors/useRadioGroupState.js

@@ -0,0 +1,20 @@
+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
+  };
+}
+export {
+  useRadioGroupState
+};

package/dist/behaviors/useTextField.d.ts

@@ -0,0 +1,19 @@
+import type { RefObject } from 'react';
+import type { AriaTextFieldOptions } from '@react-aria/textfield';
+export type UseTextFieldProps = {
+    error?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    inputElementType?: 'input' | 'textarea';
+} & Omit<AriaTextFieldOptions<'input' | 'textarea'>, 'isDisabled' | 'isInvalid' | 'isRequired' | 'isReadOnly'>;
+export declare function useTextField(props: UseTextFieldProps, ref: RefObject<HTMLInputElement | HTMLTextAreaElement | null>): {
+    inputProps: import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> | import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>;
+    labelProps: import("@react-types/shared").DOMAttributes | import("react").LabelHTMLAttributes<HTMLLabelElement>;
+    descriptionProps: import("@react-types/shared").DOMAttributes;
+    errorMessageProps: import("@react-types/shared").DOMAttributes;
+    validationErrors: string[];
+    validationDetails: ValidityState;
+    error: boolean;
+};
+export type UseTextFieldReturn = ReturnType<typeof useTextField>;

package/dist/behaviors/useTextField.js

@@ -0,0 +1,24 @@
+"use client";
+import { useTextField as useTextField$1 } from "@react-aria/textfield";
+function useTextField(props, ref) {
+  const { disabled, error, label, readonly, required, ...other } = props;
+  const { isInvalid, ...textFieldProps } = useTextField$1(
+    {
+      isDisabled: disabled,
+      isReadOnly: readonly,
+      isRequired: required,
+      isInvalid: error,
+      label,
+      errorMessage: error ? label : void 0,
+      ...other
+    },
+    ref
+  );
+  return {
+    error: isInvalid,
+    ...textFieldProps
+  };
+}
+export {
+  useTextField
+};