@koobiq/react-primitives 0.0.1-beta.30 → 0.0.1-beta.32

package/dist/behaviors/index.d.ts

@@ -1,11 +1,9 @@
 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/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/components/Group/Group.js

@@ -7,19 +7,19 @@ import { useGroupContext } from "./GroupContext.js";
 const Group = forwardRef((props, ref) => {
   const defaultProps = useGroupContext();
   const commonProps = mergeProps(defaultProps, props);
-  const { error = false, disabled = false, ...other } = commonProps;
-  const { hoverProps, isHovered } = useHover({ isDisabled: disabled });
+  const { isInvalid = false, isDisabled = false, ...other } = commonProps;
+  const { hoverProps, isHovered } = useHover({ isDisabled });
   const { isFocused, isFocusVisible, focusProps } = useFocusRing({
     within: true
   });
   const renderProps = useRenderProps({
     ...props,
     values: {
-      hovered: isHovered,
-      focusWithin: isFocused,
-      focusVisible: isFocusVisible,
-      disabled,
-      error
+      isHovered,
+      isFocusWithin: isFocused,
+      isFocusVisible,
+      isDisabled,
+      isInvalid
     }
   });
   const innerRef = useMultiRef([

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

@@ -2,17 +2,17 @@ import type { ComponentRef } from 'react';
 import type { ExtendableComponentPropsWithRef, ExtendableProps } from '@koobiq/react-core';
 import type { RenderProps } from '../../utils';
 export type GroupBaseProps = ExtendableComponentPropsWithRef<{
-    disabled?: boolean;
-    error?: boolean;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
 }, 'div'>;
 export type GroupRef = ComponentRef<'div'>;
 export type GroupRenderProps = {
-    indeterminate?: boolean;
+    isIndeterminate?: boolean;
     percentage?: number;
-    hovered: boolean;
-    focusWithin: boolean;
-    focusVisible: boolean;
-    disabled: boolean;
-    error: boolean;
+    isHovered: boolean;
+    isFocusWithin: boolean;
+    isFocusVisible: boolean;
+    isDisabled: boolean;
+    isInvalid: boolean;
 };
 export type GroupProps = ExtendableProps<RenderProps<GroupRenderProps>, GroupBaseProps>;

package/dist/components/NumberField/NumberField.d.ts

@@ -1 +1 @@
-export declare const NumberField: import("react").ForwardRefExoticComponent<Omit<import("../..").UseNumberFieldProps, keyof import("../..").RenderProps<import("./types").NumberFieldRenderProps>> & import("../..").RenderProps<import("./types").NumberFieldRenderProps> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const NumberField: import("react").ForwardRefExoticComponent<Omit<import("@react-types/numberfield").AriaNumberFieldProps, keyof import("../..").RenderProps<import("./types").NumberFieldRenderProps>> & import("../..").RenderProps<import("./types").NumberFieldRenderProps> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/NumberField/NumberField.js

@@ -11,7 +11,7 @@ import { InputContext } from "../Input/InputContext.js";
 import { TextContext } from "../Text/TextContext.js";
 const NumberField = forwardRef(
   (props, ref) => {
-    const { disabled, readonly, required, error } = props;
+    const { isDisabled, isReadOnly, isRequired, isInvalid } = props;
     const inputRef = useRef(null);
     const {
       labelProps,
@@ -27,10 +27,10 @@ const NumberField = forwardRef(
     const renderProps = useRenderProps({
       ...props,
       values: {
-        error: error || false,
-        disabled: disabled || false,
-        readonly: readonly || false,
-        required: required || false
+        isInvalid: isInvalid || false,
+        isDisabled: isDisabled || false,
+        isReadonly: isReadOnly || false,
+        isRequired: isRequired || false
       }
     });
     return /* @__PURE__ */ jsx(
@@ -38,10 +38,10 @@ const NumberField = forwardRef(
       {
         ...DOMProps,
         ...renderProps,
-        "data-error": error || void 0,
-        "data-readonly": readonly || void 0,
-        "data-required": required || void 0,
-        "data-disabled": props.disabled || void 0,
+        "data-invalid": isInvalid || void 0,
+        "data-readonly": isReadOnly || void 0,
+        "data-required": isRequired || void 0,
+        "data-disabled": isDisabled || void 0,
         ref,
         children: /* @__PURE__ */ jsx(
           Provider,

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

@@ -7,22 +7,22 @@ export type NumberFieldRenderProps = {
      * Whether the text field is disabled.
      * @selector [data-disabled]
      */
-    disabled: boolean;
+    isDisabled: boolean;
     /**
      * Whether the value is invalid.
      * @selector [data-error]
      */
-    error: boolean;
+    isInvalid: boolean;
     /**
      * Whether the text field is read only.
      * @selector [data-readonly]
      */
-    readonly: boolean;
+    isReadonly: boolean;
     /**
      * Whether the text field is required.
      * @selector [data-required]
      */
-    required: boolean;
+    isRequired: boolean;
 };
 type NumberFieldBaseProps = RenderProps<NumberFieldRenderProps>;
 export type NumberFieldProps = ExtendableProps<NumberFieldBaseProps, UseNumberFieldProps>;

package/dist/components/TextField/TextField.d.ts

@@ -1 +1,2 @@
-export declare const TextField: import("react").ForwardRefExoticComponent<Omit<import("../..").UseTextFieldProps, keyof import("../..").RenderProps<import("./types").TextFieldRenderProps>> & import("../..").RenderProps<import("./types").TextFieldRenderProps> & import("react").RefAttributes<HTMLDivElement>>;
+import type { TextFieldComponentProps } from './index';
+export declare const TextField: TextFieldComponentProps;

package/dist/components/TextField/TextField.js

@@ -2,69 +2,70 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useRef } from "react";
 import { filterDOMProps } from "@koobiq/react-core";
+import { useTextField } from "@react-aria/textfield";
 import { removeDataAttributes, useRenderProps, Provider } from "../../utils/index.js";
-import { useTextField } from "../../behaviors/useTextField.js";
 import { InputContext } from "../Input/InputContext.js";
 import { TextareaContext } from "../Textarea/TextareaContext.js";
 import { LabelContext } from "../Label/LabelContext.js";
 import { TextContext } from "../Text/TextContext.js";
-const TextField = forwardRef(
-  (props, ref) => {
-    const { disabled, readonly, required } = props;
-    const inputRef = useRef(null);
-    const {
-      error,
-      labelProps,
-      inputProps,
-      descriptionProps,
-      errorMessageProps
-    } = useTextField({ ...removeDataAttributes(props) }, inputRef);
-    const DOMProps = filterDOMProps(props);
-    delete DOMProps.id;
-    const renderProps = useRenderProps({
-      ...props,
-      values: {
-        error: error || false,
-        disabled: disabled || false,
-        readonly: readonly || false,
-        required: required || false
-      }
-    });
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ...DOMProps,
-        ...renderProps,
-        "data-error": error || void 0,
-        "data-readonly": readonly || void 0,
-        "data-required": required || void 0,
-        "data-disabled": props.disabled || void 0,
-        ref,
-        children: /* @__PURE__ */ jsx(
-          Provider,
-          {
-            values: [
-              [LabelContext, labelProps],
-              [InputContext, { ...inputProps, ref: inputRef }],
-              [TextareaContext, inputProps],
-              [
-                TextContext,
-                {
-                  slots: {
-                    description: descriptionProps,
-                    errorMessage: errorMessageProps
-                  }
+function TextFieldRender(props, ref) {
+  const { isDisabled, isReadOnly, isRequired } = props;
+  const inputRef = useRef(null);
+  const {
+    isInvalid,
+    labelProps,
+    inputProps,
+    descriptionProps,
+    errorMessageProps
+  } = useTextField(
+    { ...removeDataAttributes(props) },
+    inputRef
+  );
+  const DOMProps = filterDOMProps(props);
+  delete DOMProps.id;
+  const renderProps = useRenderProps({
+    ...props,
+    values: {
+      isInvalid: isInvalid || false,
+      isDisabled: isDisabled || false,
+      isReadOnly: isReadOnly || false,
+      isRequired: isRequired || false
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...DOMProps,
+      ...renderProps,
+      "data-invalid": isInvalid || void 0,
+      "data-readonly": isReadOnly || void 0,
+      "data-required": isRequired || void 0,
+      "data-disabled": isDisabled || void 0,
+      ref,
+      children: /* @__PURE__ */ jsx(
+        Provider,
+        {
+          values: [
+            [LabelContext, labelProps],
+            [InputContext, { ...inputProps, ref: inputRef }],
+            [TextareaContext, { ...inputProps, ref: inputRef }],
+            [
+              TextContext,
+              {
+                slots: {
+                  description: descriptionProps,
+                  errorMessage: errorMessageProps
                 }
-              ]
-            ],
-            children: renderProps.children
-          }
-        )
-      }
-    );
-  }
-);
-TextField.displayName = "TextField";
+              }
+            ]
+          ],
+          children: renderProps.children
+        }
+      )
+    }
+  );
+}
+const TextField = forwardRef(TextFieldRender);
 export {
   TextField
 };

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

@@ -1,30 +1,33 @@
-import type { ComponentRef } from 'react';
+import type { ComponentRef, ReactElement } from 'react';
 import type { ExtendableProps } from '@koobiq/react-core';
-import type { UseTextFieldProps } from '../../behaviors';
+import type { AriaTextFieldProps } from '@react-aria/textfield';
 import type { RenderProps } from '../../utils';
 export type TextFieldRenderProps = {
     /**
      * Whether the text field is disabled.
      * @selector [data-disabled]
      */
-    disabled: boolean;
+    isDisabled: boolean;
     /**
      * Whether the value is invalid.
      * @selector [data-error]
      */
-    error: boolean;
+    isInvalid: boolean;
     /**
      * Whether the text field is read only.
      * @selector [data-readonly]
      */
-    readonly: boolean;
+    isReadOnly: boolean;
     /**
      * Whether the text field is required.
      * @selector [data-required]
      */
-    required: boolean;
+    isRequired: boolean;
 };
-type TextFieldBaseProps = RenderProps<TextFieldRenderProps>;
-export type TextFieldProps = ExtendableProps<TextFieldBaseProps, UseTextFieldProps>;
+type TextFieldBaseProps = RenderProps<TextFieldRenderProps> & {
+    inputElementType?: 'input' | 'textarea';
+};
+export type TextFieldProps<T = HTMLInputElement> = ExtendableProps<TextFieldBaseProps, AriaTextFieldProps<T>>;
+export type TextFieldComponentProps = <T = HTMLInputElement>(props: TextFieldProps<T>) => ReactElement | null;
 export type TextFieldRef = ComponentRef<'div'>;
 export {};

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

@@ -1,4 +1,2 @@
-export declare const Textarea: import("react").ForwardRefExoticComponent<{
-    children?: import("react").ReactNode;
-    value?: string | number | readonly string[];
-} & import("react").HTMLAttributes<HTMLInputElement | HTMLTextAreaElement> & import("react").RefAttributes<HTMLTextAreaElement>>;
+import { type TextareaProps } from './index';
+export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/Textarea/Textarea.js

@@ -1,13 +1,17 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { mergeProps } from "@koobiq/react-core";
+import { mergeProps, useMultiRef } from "@koobiq/react-core";
 import { useTextareaContext } from "./TextareaContext.js";
 const Textarea = forwardRef((props, ref) => {
   const { children, ...other } = props;
   const defaultProps = useTextareaContext();
   const commonProps = mergeProps(defaultProps, other);
-  return /* @__PURE__ */ jsx("textarea", { ...commonProps, ref, children });
+  const innerRef = useMultiRef([
+    ref,
+    ...defaultProps.ref ? [defaultProps.ref] : []
+  ]);
+  return /* @__PURE__ */ jsx("textarea", { ...commonProps, ref: innerRef, children });
 });
 Textarea.displayName = "Textarea";
 export {

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

@@ -1,6 +1,7 @@
-import type { ComponentRef, HTMLAttributes, ReactNode } from 'react';
+import type { ComponentRef, HTMLAttributes, ReactNode, Ref } from 'react';
 export type TextareaProps = {
     children?: ReactNode;
     value?: string | number | readonly string[];
+    ref?: Ref<HTMLTextAreaElement>;
 } & HTMLAttributes<HTMLInputElement | HTMLTextAreaElement>;
 export type TextareaRef = ComponentRef<'textarea'>;

package/dist/index.js

@@ -28,14 +28,12 @@ import { Provider, removeDataAttributes, useRenderProps } from "./utils/index.js
 import { useButton } from "./behaviors/useButton.js";
 import { useCheckbox } from "./behaviors/useCheckbox.js";
 import { useLink } from "./behaviors/useLink.js";
-import { useTextField } from "./behaviors/useTextField.js";
 import { useToggle } from "./behaviors/useToggle.js";
 import { useRadio } from "./behaviors/useRadio.js";
 import { useRadioGroup } from "./behaviors/useRadioGroup.js";
 import { useRadioGroupState } from "./behaviors/useRadioGroupState.js";
 import { useProgressBar } from "./behaviors/useProgressBar.js";
 import { useNumberField } from "./behaviors/useNumberField.js";
-import { useNumberFieldState } from "./behaviors/useNumberFieldState.js";
 import { Text } from "./components/Text/Text.js";
 import { TextContext } from "./components/Text/TextContext.js";
 import { Group } from "./components/Group/Group.js";
@@ -117,7 +115,6 @@ export {
   useMenuTriggerState,
   useModalOverlay,
   useNumberField,
-  useNumberFieldState,
   useOption,
   useOverlayPosition,
   useOverlayTrigger,
@@ -143,7 +140,6 @@ export {
   useTableState,
   useTag,
   useTagGroup,
-  useTextField,
   useTextareaContext,
   useToggle,
   useToggleButtonGroup,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-primitives",
-  "version": "0.0.1-beta.30",
+  "version": "0.0.1-beta.32",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -41,7 +41,7 @@
     "@react-aria/switch": "^3.7.5",
     "@react-aria/table": "^3.17.3",
     "@react-aria/tag": "^3.6.0",
-    "@react-aria/textfield": "^3.14.0",
+    "@react-aria/textfield": "^3.17.5",
     "@react-aria/toggle": "^3.10.10",
     "@react-aria/tooltip": "^3.8.5",
     "@react-aria/utils": "^3.29.1",
@@ -59,8 +59,8 @@
     "@react-stately/toggle": "^3.7.0",
     "@react-stately/tooltip": "^3.5.5",
     "@react-stately/tree": "^3.8.9",
-    "@koobiq/logger": "0.0.1-beta.30",
-    "@koobiq/react-core": "0.0.1-beta.30"
+    "@koobiq/logger": "0.0.1-beta.32",
+    "@koobiq/react-core": "0.0.1-beta.32"
   },
   "peerDependencies": {
     "react": "18.x || 19.x",

package/dist/behaviors/useNumberFieldState.d.ts

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

@@ -1,13 +0,0 @@
-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/useTextField.d.ts

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

@@ -1,24 +0,0 @@
-"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
-};