@koobiq/react-primitives 0.0.1-beta.22 → 0.0.1-beta.24

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

@@ -2,23 +2,10 @@
 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 { 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 +17,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/components/Checkbox/Checkbox.d.ts

@@ -1,3 +1,3 @@
-export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<import("../..").UseCheckboxProps, keyof import("../..").RenderProps<import("./types").CheckboxRenderProps> | "inputRef"> & import("../..").RenderProps<import("./types").CheckboxRenderProps> & {
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<import("@react-types/checkbox").AriaCheckboxProps, keyof import("../..").RenderProps<import("./types").CheckboxRenderProps> | "inputRef"> & import("../..").RenderProps<import("./types").CheckboxRenderProps> & {
     inputRef?: import("react").RefObject<HTMLInputElement | null>;
 } & import("react").RefAttributes<HTMLLabelElement>>;

package/dist/components/Checkbox/Checkbox.js

@@ -10,13 +10,15 @@ const Checkbox = forwardRef(
     const { children, inputRef } = props;
     const domRef = useDOMRef(inputRef);
     const {
-      hovered,
-      error,
-      checked,
-      focused,
-      pressed,
-      focusVisible,
-      indeterminate,
+      isHovered,
+      isInvalid,
+      isSelected,
+      isFocused,
+      isPressed,
+      isReadOnly,
+      isDisabled,
+      isFocusVisible,
+      isIndeterminate,
       labelProps,
       inputProps
     } = useCheckbox(
@@ -27,14 +29,14 @@ const Checkbox = forwardRef(
       domRef
     );
     const renderValues = {
-      hovered,
-      error,
-      checked,
-      focused,
-      pressed,
-      focusVisible,
-      indeterminate,
-      disabled: props.disabled || false
+      isHovered,
+      isInvalid,
+      isSelected,
+      isFocused,
+      isPressed,
+      isFocusVisible,
+      isIndeterminate,
+      isDisabled: props.isDisabled || false
     };
     const renderProps = useRenderProps({
       ...props,
@@ -42,10 +44,25 @@ const Checkbox = forwardRef(
     });
     const DOMProps = filterDOMProps(props);
     delete DOMProps.id;
-    return /* @__PURE__ */ jsxs("label", { ...mergeProps(DOMProps, labelProps, renderProps), ref, children: [
-      /* @__PURE__ */ jsx(VisuallyHidden, { elementType: "span", children: /* @__PURE__ */ jsx("input", { ...inputProps, ref: domRef }) }),
-      renderProps.children
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        "data-hovered": isHovered,
+        "data-pressed": isPressed,
+        "data-focused": isFocused,
+        "data-invalid": isInvalid,
+        "data-selected": isSelected,
+        "data-disabled": isDisabled,
+        "data-read-only": isReadOnly,
+        "data-focus-visible": isFocusVisible,
+        ...mergeProps(DOMProps, labelProps, renderProps),
+        ref,
+        children: [
+          /* @__PURE__ */ jsx(VisuallyHidden, { elementType: "span", children: /* @__PURE__ */ jsx("input", { ...inputProps, ref: domRef }) }),
+          renderProps.children
+        ]
+      }
+    );
   }
 );
 Checkbox.displayName = "Checkbox";

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

@@ -3,14 +3,14 @@ import type { ExtendableProps } from '@koobiq/react-core';
 import type { UseCheckboxProps } from '../../behaviors';
 import type { RenderProps } from '../../utils';
 export type CheckboxRenderProps = {
-    error?: boolean;
-    pressed?: boolean;
-    checked?: boolean;
-    hovered?: boolean;
-    focused?: boolean;
-    disabled?: boolean;
-    focusVisible?: boolean;
-    indeterminate?: boolean;
+    isInvalid?: boolean;
+    isPressed?: boolean;
+    isSelected?: boolean;
+    isHovered?: boolean;
+    isFocused?: boolean;
+    isDisabled?: boolean;
+    isFocusVisible?: boolean;
+    isIndeterminate?: boolean;
 };
 type CheckboxBaseProps = RenderProps<CheckboxRenderProps> & {
     inputRef?: RefObject<HTMLInputElement | null>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-primitives",
-  "version": "0.0.1-beta.22",
+  "version": "0.0.1-beta.24",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -52,8 +52,8 @@
     "@react-stately/toggle": "^3.7.0",
     "@react-stately/tooltip": "^3.4.13",
     "@react-stately/tree": "^3.8.9",
-    "@koobiq/logger": "0.0.1-beta.22",
-    "@koobiq/react-core": "0.0.1-beta.22"
+    "@koobiq/logger": "0.0.1-beta.24",
+    "@koobiq/react-core": "0.0.1-beta.24"
   },
   "peerDependencies": {
     "react": "18.x || 19.x",