@koobiq/react-primitives 0.7.1 → 0.9.0

package/dist/components/Button/Button.js

@@ -68,11 +68,11 @@ const Button = polymorphicForwardRef(
         },
         ...buttonProps,
         ...renderProps,
-        "data-hovered": isHovered,
-        "data-pressed": isPressed,
-        "data-focused": isFocused,
-        "data-disabled": isDisabled,
-        "data-focus-visible": isFocusVisible,
+        "data-hovered": isHovered || void 0,
+        "data-pressed": isPressed || void 0,
+        "data-focused": isFocused || void 0,
+        "data-disabled": isDisabled || void 0,
+        "data-focus-visible": isFocusVisible || void 0,
         tabIndex: buttonProps.tabIndex,
         ..."tabIndex" in props && { tabIndex },
         "aria-disabled": isLoading ? "true" : buttonProps["aria-disabled"],

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

@@ -35,7 +35,6 @@ export type ButtonBaseProps = RenderProps<ButtonRenderProps> & {
     slot?: string;
     /**
      * Whether this button is loading.
-     * @default false
      */
     isLoading?: boolean;
 } & Omit<UseButtonProps<never>, 'elementType' | 'href'>;

package/dist/components/Checkbox/Checkbox.js

@@ -47,14 +47,14 @@ const Checkbox = forwardRef(
     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,
+        "data-hovered": isHovered || void 0,
+        "data-pressed": isPressed || void 0,
+        "data-focused": isFocused || void 0,
+        "data-invalid": isInvalid || void 0,
+        "data-selected": isSelected || void 0,
+        "data-disabled": isDisabled || void 0,
+        "data-read-only": isReadOnly || void 0,
+        "data-focus-visible": isFocusVisible || void 0,
         ...mergeProps(DOMProps, labelProps, renderProps),
         ref,
         children: [

package/dist/components/FieldError/FieldError.d.ts

@@ -0,0 +1,8 @@
+import { type ComponentPropsWithRef, type ElementType } from 'react';
+import type { ValidationResult } from '@koobiq/react-core';
+import { type RenderProps } from '../../utils';
+export declare const FieldErrorContext: import("react").Context<ValidationResult | null>;
+export type FieldErrorRenderProps = ValidationResult;
+export type FieldErrorBaseProps = RenderProps<FieldErrorRenderProps>;
+export declare const FieldError: import("@koobiq/react-core").PolyForwardComponent<"p", FieldErrorBaseProps, ElementType>;
+export type FieldErrorProps<As extends ElementType = 'p'> = ComponentPropsWithRef<typeof FieldError<As>>;

package/dist/components/FieldError/FieldError.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { polymorphicForwardRef, isNotNil } from "@koobiq/react-core";
+import { useRenderProps } from "../../utils/index.js";
+import { Text } from "../Text/Text.js";
+const FieldErrorContext = createContext(null);
+const FieldError = polymorphicForwardRef(
+  (props, ref) => {
+    const { as = "p" } = props;
+    const validation = useContext(FieldErrorContext);
+    const renderProps = useRenderProps({
+      ...props,
+      values: validation,
+      defaultChildren: validation.validationErrors.length === 0 ? void 0 : validation.validationErrors.join(" ")
+    });
+    return isNotNil(renderProps.children) && validation.isInvalid ? /* @__PURE__ */ jsx(Text, { as, slot: "errorMessage", ...renderProps, ref, children: renderProps.children }) : null;
+  }
+);
+FieldError.displayName = "FieldError";
+export {
+  FieldError,
+  FieldErrorContext
+};

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

@@ -0,0 +1 @@
+export * from './FieldError';

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

@@ -1 +1 @@
-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>>;
+export declare const NumberField: import("react").ForwardRefExoticComponent<Omit<import("@react-types/numberfield").AriaNumberFieldProps & Pick<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "form" | "name" | "disabled">, keyof import("../..").RenderProps<import("./types").NumberFieldRenderProps>> & import("../..").RenderProps<import("./types").NumberFieldRenderProps> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/NumberField/NumberField.js

@@ -1,18 +1,23 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef } from "react";
 import { filterDOMProps } from "@koobiq/react-core";
+import { useLocale } from "@react-aria/i18n";
+import { useNumberField } from "@react-aria/numberfield";
+import { useNumberFieldState } from "@react-stately/numberfield";
 import { removeDataAttributes, useRenderProps, Provider } from "../../utils/index.js";
-import { useNumberField } from "../../behaviors/useNumberField.js";
 import { GroupContext } from "../Group/GroupContext.js";
 import { ButtonContext } from "../Button/ButtonContext.js";
 import { LabelContext } from "../Label/LabelContext.js";
 import { InputContext } from "../Input/InputContext.js";
 import { TextContext } from "../Text/TextContext.js";
+import { FieldErrorContext } from "../FieldError/FieldError.js";
 const NumberField = forwardRef(
   (props, ref) => {
-    const { isDisabled, isReadOnly, isRequired, isInvalid } = props;
+    const { isDisabled, isReadOnly, isRequired } = props;
     const inputRef = useRef(null);
+    const { locale } = useLocale();
+    const state = useNumberFieldState({ ...props, locale });
     const {
       labelProps,
       inputProps,
@@ -20,64 +25,77 @@ const NumberField = forwardRef(
       descriptionProps,
       errorMessageProps,
       incrementButtonProps,
-      decrementButtonProps
-    } = useNumberField({ ...removeDataAttributes(props) }, inputRef);
+      decrementButtonProps,
+      ...validation
+    } = useNumberField(removeDataAttributes(props), state, inputRef);
     const DOMProps = filterDOMProps(props);
     delete DOMProps.id;
     const renderProps = useRenderProps({
       ...props,
       values: {
-        isInvalid: isInvalid || false,
+        isInvalid: validation.isInvalid || false,
         isDisabled: isDisabled || false,
         isReadonly: isReadOnly || false,
         isRequired: isRequired || false
       }
     });
-    return /* @__PURE__ */ jsx(
-      "div",
+    return /* @__PURE__ */ jsxs(
+      Provider,
       {
-        ...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 }],
-              [GroupContext, groupProps],
-              [
-                ButtonContext,
-                {
-                  slots: {
-                    increment: {
-                      ...incrementButtonProps,
-                      disabled: incrementButtonProps.isDisabled
-                    },
-                    decrement: {
-                      ...decrementButtonProps,
-                      disabled: decrementButtonProps.isDisabled
-                    }
-                  }
+        values: [
+          [LabelContext, labelProps],
+          [InputContext, { ...inputProps, ref: inputRef }],
+          [GroupContext, groupProps],
+          [
+            ButtonContext,
+            {
+              slots: {
+                increment: {
+                  ...incrementButtonProps,
+                  disabled: incrementButtonProps.isDisabled
+                },
+                decrement: {
+                  ...decrementButtonProps,
+                  disabled: decrementButtonProps.isDisabled
                 }
-              ],
-              [
-                TextContext,
-                {
-                  slots: {
-                    description: descriptionProps,
-                    errorMessage: errorMessageProps
-                  }
-                }
-              ]
-            ],
-            children: renderProps.children
-          }
-        )
+              }
+            }
+          ],
+          [
+            TextContext,
+            {
+              slots: {
+                description: descriptionProps,
+                errorMessage: errorMessageProps
+              }
+            }
+          ],
+          [FieldErrorContext, validation]
+        ],
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ...DOMProps,
+              ...renderProps,
+              "data-invalid": validation.isInvalid || void 0,
+              "data-readonly": isReadOnly || void 0,
+              "data-required": isRequired || void 0,
+              "data-disabled": isDisabled || void 0,
+              ref
+            }
+          ),
+          props.name && /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "hidden",
+              name: props.name,
+              form: props.form,
+              value: Number.isNaN(state.numberValue) ? "" : state.numberValue,
+              disabled: props.isDisabled || void 0
+            }
+          )
+        ]
       }
     );
   }

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

@@ -1,6 +1,6 @@
-import type { ComponentRef } from 'react';
+import type { ComponentPropsWithoutRef, ComponentRef } from 'react';
 import type { ExtendableProps } from '@koobiq/react-core';
-import type { UseNumberFieldProps } from '../../behaviors';
+import type { AriaNumberFieldProps } from '@react-aria/numberfield';
 import type { RenderProps } from '../../utils';
 export type NumberFieldRenderProps = {
     /**
@@ -25,6 +25,6 @@ export type NumberFieldRenderProps = {
     isRequired: boolean;
 };
 type NumberFieldBaseProps = RenderProps<NumberFieldRenderProps>;
-export type NumberFieldProps = ExtendableProps<NumberFieldBaseProps, UseNumberFieldProps>;
+export type NumberFieldProps = ExtendableProps<NumberFieldBaseProps, AriaNumberFieldProps & Pick<ComponentPropsWithoutRef<'input'>, 'name' | 'form' | 'disabled'>>;
 export type NumberFieldRef = ComponentRef<'div'>;
 export {};

package/dist/components/ProgressBar/ProgressBar.js

@@ -11,7 +11,7 @@ const ProgressBar = polymorphicForwardRef(
       minValue = 0,
       maxValue = 100,
       as: Tag = "div",
-      isIndeterminate = false,
+      isIndeterminate,
       ...other
     } = props;
     const { progressBarProps, labelProps } = useProgressBar(props);

package/dist/components/Radio/RadioGroup.js

@@ -1,19 +1,24 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useRenderProps, Provider } from "../../utils/index.js";
+import { filterDOMProps } from "@koobiq/react-core";
+import { removeDataAttributes, useRenderProps, Provider } from "../../utils/index.js";
 import { useRadioGroupState } from "../../behaviors/useRadioGroupState.js";
 import { useRadioGroup } from "../../behaviors/useRadioGroup.js";
+import { FieldErrorContext } from "../FieldError/FieldError.js";
 import { RadioContext } from "./RadioContext.js";
 import { LabelContext } from "../Label/LabelContext.js";
 import { TextContext } from "../Text/TextContext.js";
 const RadioGroup = forwardRef(
   (props, ref) => {
     const state = useRadioGroupState(props);
-    const { radioGroupProps, labelProps, descriptionProps } = useRadioGroup(
-      props,
-      state
-    );
+    const {
+      radioGroupProps,
+      labelProps,
+      descriptionProps,
+      errorMessageProps,
+      ...validation
+    } = useRadioGroup(removeDataAttributes(props), state);
     const renderProps = useRenderProps({
       ...props,
       values: {
@@ -25,24 +30,41 @@ const RadioGroup = forwardRef(
         state
       }
     });
-    return /* @__PURE__ */ jsx("div", { ...radioGroupProps, ...renderProps, ref, children: /* @__PURE__ */ jsx(
-      Provider,
+    const DOMProps = filterDOMProps(props);
+    delete DOMProps.id;
+    return /* @__PURE__ */ jsx(
+      "div",
       {
-        values: [
-          [RadioContext, state],
-          [LabelContext, labelProps],
-          [
-            TextContext,
-            {
-              slots: {
-                description: descriptionProps
-              }
-            }
-          ]
-        ],
-        children: renderProps.children
+        ...DOMProps,
+        "data-invalid": validation.isInvalid || void 0,
+        "data-readonly": state.isInvalid || void 0,
+        "data-required": state.isRequired || void 0,
+        "data-disabled": state.isDisabled || void 0,
+        ...radioGroupProps,
+        ...renderProps,
+        ref,
+        children: /* @__PURE__ */ jsx(
+          Provider,
+          {
+            values: [
+              [RadioContext, state],
+              [LabelContext, labelProps],
+              [
+                TextContext,
+                {
+                  slots: {
+                    description: descriptionProps,
+                    errorMessage: errorMessageProps
+                  }
+                }
+              ],
+              [FieldErrorContext, validation]
+            ],
+            children: renderProps.children
+          }
+        )
       }
-    ) });
+    );
   }
 );
 RadioGroup.displayName = "RadioGroup";

package/dist/components/TextField/TextField.js

@@ -8,17 +8,20 @@ import { InputContext } from "../Input/InputContext.js";
 import { TextareaContext } from "../Textarea/TextareaContext.js";
 import { LabelContext } from "../Label/LabelContext.js";
 import { TextContext } from "../Text/TextContext.js";
+import { FieldErrorContext } from "../FieldError/FieldError.js";
 function TextFieldRender(props, ref) {
   const { isDisabled, isReadOnly, isRequired } = props;
   const inputRef = useRef(null);
   const {
-    isInvalid,
     labelProps,
     inputProps,
     descriptionProps,
-    errorMessageProps
+    errorMessageProps,
+    ...validation
   } = useTextField(
-    { ...removeDataAttributes(props) },
+    {
+      ...removeDataAttributes(props)
+    },
     inputRef
   );
   const DOMProps = filterDOMProps(props);
@@ -26,7 +29,7 @@ function TextFieldRender(props, ref) {
   const renderProps = useRenderProps({
     ...props,
     values: {
-      isInvalid: isInvalid || false,
+      isInvalid: validation.isInvalid || false,
       isDisabled: isDisabled || false,
       isReadOnly: isReadOnly || false,
       isRequired: isRequired || false
@@ -37,7 +40,7 @@ function TextFieldRender(props, ref) {
     {
       ...DOMProps,
       ...renderProps,
-      "data-invalid": isInvalid || void 0,
+      "data-invalid": validation.isInvalid || void 0,
       "data-readonly": isReadOnly || void 0,
       "data-required": isRequired || void 0,
       "data-disabled": isDisabled || void 0,
@@ -57,7 +60,8 @@ function TextFieldRender(props, ref) {
                   errorMessage: errorMessageProps
                 }
               }
-            ]
+            ],
+            [FieldErrorContext, validation]
           ],
           children: renderProps.children
         }

package/dist/components/index.d.ts

@@ -11,3 +11,4 @@ export * from './Textarea';
 export * from './ProgressBar';
 export * from './TextField';
 export * from './NumberField';
+export * from './FieldError';

package/dist/index.js

@@ -63,10 +63,13 @@ import { TextareaContext, useTextareaContext } from "./components/Textarea/Texta
 import { ProgressBar } from "./components/ProgressBar/ProgressBar.js";
 import { TextField } from "./components/TextField/TextField.js";
 import { NumberField } from "./components/NumberField/NumberField.js";
+import { FieldError, FieldErrorContext } from "./components/FieldError/FieldError.js";
 export {
   Button,
   ButtonContext,
   Checkbox,
+  FieldError,
+  FieldErrorContext,
   Group,
   GroupContext,
   Input,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-primitives",
-  "version": "0.7.1",
+  "version": "0.9.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -64,8 +64,8 @@
     "@react-stately/toggle": "^3.7.0",
     "@react-stately/tooltip": "^3.5.5",
     "@react-stately/tree": "^3.8.9",
-    "@koobiq/logger": "0.7.1",
-    "@koobiq/react-core": "0.7.1"
+    "@koobiq/logger": "0.9.0",
+    "@koobiq/react-core": "0.9.0"
   },
   "peerDependencies": {
     "react": "18.x || 19.x",