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

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/Link/Link.js

@@ -4,18 +4,31 @@ import { polymorphicForwardRef, useDOMRef, mergeProps } from "@koobiq/react-core
 import { useRenderProps } from "../../utils/index.js";
 import { useLink } from "../../behaviors/useLink.js";
 const Link = polymorphicForwardRef((props, ref) => {
-  const { as: Tag = "a", ...commonProps } = props;
+  const { as: Tag = "a", ...other } = props;
   const domRef = useDOMRef(ref);
-  const { hovered, pressed, focused, focusVisible, linkProps } = useLink(
-    commonProps,
+  const { isHovered, isPressed, isFocusVisible, isFocused, linkProps } = useLink(
+    {
+      ...other,
+      ...other.isDisabled && {
+        onPress: void 0,
+        onPressStart: void 0,
+        onPressEnd: void 0,
+        onPressChange: void 0,
+        onPressUp: void 0,
+        onKeyDown: void 0,
+        onKeyUp: void 0,
+        onClick: void 0,
+        href: void 0
+      }
+    },
     domRef
   );
   const renderValues = {
-    hovered,
-    pressed,
-    focused,
-    focusVisible,
-    disabled: props.disabled || false
+    isHovered,
+    isPressed,
+    isFocused,
+    isFocusVisible,
+    isDisabled: props.isDisabled || false
   };
   const renderProps = useRenderProps({
     ...props,

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

@@ -2,11 +2,11 @@ import type { ExtendableProps } from '@koobiq/react-core';
 import type { UseLinkProps } from '../../behaviors';
 import type { RenderProps } from '../../utils';
 export type LinkRenderProps = {
-    hovered: boolean;
-    focused: boolean;
-    pressed: boolean;
-    disabled: boolean;
-    focusVisible: boolean;
+    isHovered: boolean;
+    isFocused: boolean;
+    isPressed: boolean;
+    isDisabled: boolean;
+    isFocusVisible: boolean;
 };
 export type LinkBaseProps = ExtendableProps<RenderProps<LinkRenderProps> & {
     tabIndex?: number;

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

@@ -1 +1 @@
-export declare const NumberField: import("react").ForwardRefExoticComponent<Omit<import("../..").UseNumberFieldProps, keyof import("../../utils").RenderProps<import("./types").NumberFieldRenderProps>> & import("../../utils").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/Radio/Radio.d.ts

@@ -1,3 +1,3 @@
-export declare const Radio: import("react").ForwardRefExoticComponent<Omit<import("../..").UseRadioProps, "inputRef" | keyof import("../../utils").RenderProps<import("./types").RadioRenderProps>> & import("../../utils").RenderProps<import("./types").RadioRenderProps> & {
+export declare const Radio: import("react").ForwardRefExoticComponent<Omit<import("@react-types/radio").AriaRadioProps, "inputRef" | keyof import("../..").RenderProps<import("./types").RadioRenderProps>> & import("../..").RenderProps<import("./types").RadioRenderProps> & {
     inputRef?: import("react").RefObject<HTMLInputElement | null>;
 } & import("react").RefAttributes<HTMLLabelElement>>;

package/dist/components/Radio/Radio.js

@@ -8,13 +8,20 @@ import { RadioContext } from "./RadioContext.js";
 import { useRadio } from "../../behaviors/useRadio.js";
 const Radio = forwardRef(
   (props, ref) => {
-    const { children, inputRef, disabled: disabledProp } = props;
+    const { children, inputRef } = props;
     const state = useContext(RadioContext);
-    const { error, selectedValue, disabled: disabledState } = state;
-    const checked = selectedValue === props.value;
-    const disabled = disabledProp || disabledState;
+    const { isInvalid } = state;
     const domRef = useDOMRef(inputRef);
-    const { hovered, focused, pressed, focusVisible, labelProps, inputProps } = useRadio(
+    const {
+      isHovered,
+      isFocused,
+      isPressed,
+      isDisabled,
+      isSelected,
+      labelProps,
+      inputProps,
+      isFocusVisible
+    } = useRadio(
       {
         ...removeDataAttributes(props),
         children: typeof children === "function" ? true : children
@@ -23,13 +30,13 @@ const Radio = forwardRef(
       domRef
     );
     const renderValues = {
-      error,
-      hovered,
-      checked,
-      focused,
-      pressed,
-      disabled,
-      focusVisible
+      isInvalid,
+      isHovered,
+      isSelected,
+      isFocused,
+      isPressed,
+      isDisabled,
+      isFocusVisible
     };
     const renderProps = useRenderProps({
       ...props,
@@ -38,7 +45,7 @@ const Radio = forwardRef(
     const DOMProps = filterDOMProps(props);
     delete DOMProps.id;
     return /* @__PURE__ */ jsxs("label", { ...mergeProps(DOMProps, labelProps, renderProps), ref, children: [
-      /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("input", { ...inputProps, ref: domRef }) }),
+      /* @__PURE__ */ jsx(VisuallyHidden, { elementType: "span", children: /* @__PURE__ */ jsx("input", { ...inputProps, ref: domRef }) }),
       renderProps.children
     ] });
   }

package/dist/components/Radio/RadioContext.d.ts

@@ -1,17 +1,2 @@
-export declare const RadioContext: import("react").Context<{
-    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;
-}>;
+import type { RadioGroupState } from '@react-stately/radio';
+export declare const RadioContext: import("react").Context<RadioGroupState>;

package/dist/components/Radio/RadioGroup.d.ts

@@ -1 +1 @@
-export declare const RadioGroup: import("react").ForwardRefExoticComponent<Omit<import("../..").UseRadioGroupProps, keyof import("../../utils").RenderProps<import("./types").RadioGroupRenderProps>> & import("../../utils").RenderProps<import("./types").RadioGroupRenderProps> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const RadioGroup: import("react").ForwardRefExoticComponent<Omit<import("@react-types/radio").AriaRadioGroupProps, keyof import("../..").RenderProps<import("./types").RadioGroupRenderProps>> & import("../..").RenderProps<import("./types").RadioGroupRenderProps> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Radio/RadioGroup.js

@@ -18,10 +18,10 @@ const RadioGroup = forwardRef(
       ...props,
       values: {
         orientation: props.orientation || "vertical",
-        disabled: state.disabled,
-        readonly: state.readonly,
-        required: state.required,
-        error: state.error,
+        isDisabled: state.isDisabled,
+        isReadOnly: state.isReadOnly,
+        isRequired: state.isRequired,
+        isInvalid: state.isInvalid,
         state
       }
     });

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

@@ -1,22 +1,24 @@
 import type { RefObject } from 'react';
 import type { ExtendableProps } from '@koobiq/react-core';
-import type { RadioGroupState, UseRadioGroupProps, UseRadioProps } from '../../behaviors';
+import type { AriaRadioGroupProps } from '@react-aria/radio';
+import type { RadioGroupState } from '@react-stately/radio';
+import type { UseRadioProps } from '../../behaviors';
 import type { RenderProps } from '../../utils';
 export type RadioRenderProps = {
-    error?: boolean;
-    focused?: boolean;
-    hovered?: boolean;
-    pressed?: boolean;
-    checked?: boolean;
-    disabled?: boolean;
-    focusVisible?: boolean;
-    indeterminate?: boolean;
+    isInvalid?: boolean;
+    isFocused?: boolean;
+    isHovered?: boolean;
+    isPressed?: boolean;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+    isFocusVisible?: boolean;
+    isIndeterminate?: boolean;
 };
 export type RadioGroupRenderProps = {
-    error: boolean;
-    disabled: boolean;
-    readonly: boolean;
-    required: boolean;
+    isInvalid: boolean;
+    isDisabled: boolean;
+    isReadOnly: boolean;
+    isRequired: boolean;
     state: RadioGroupState;
     orientation: 'horizontal' | 'vertical';
 };
@@ -25,5 +27,5 @@ type RadioBaseProps = RenderProps<RadioRenderProps> & {
 };
 export type RadioProps = ExtendableProps<RadioBaseProps, UseRadioProps>;
 type RadioGroupBaseProps = RenderProps<RadioGroupRenderProps>;
-export type RadioGroupProps = ExtendableProps<RadioGroupBaseProps, UseRadioGroupProps>;
+export type RadioGroupProps = ExtendableProps<RadioGroupBaseProps, AriaRadioGroupProps>;
 export {};

package/dist/components/Switch/Switch.d.ts

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

package/dist/components/{Toggle/Toggle.js → Switch/Switch.js}

@@ -4,21 +4,21 @@ import { forwardRef } from "react";
 import { useDOMRef, filterDOMProps, mergeProps } from "@koobiq/react-core";
 import { VisuallyHidden } from "@react-aria/visually-hidden";
 import { removeDataAttributes, useRenderProps } from "../../utils/index.js";
-import { useToggle } from "../../behaviors/useToggle.js";
-const Toggle = forwardRef(
+import { useSwitch } from "../../behaviors/useSwitch.js";
+const Switch = forwardRef(
   (props, ref) => {
     const { children, inputRef } = props;
     const domRef = useDOMRef(inputRef);
     const {
-      hovered,
-      error,
-      checked,
-      focused,
-      pressed,
-      focusVisible,
+      isHovered,
+      isInvalid,
+      isSelected,
+      isFocused,
+      isPressed,
+      isFocusVisible,
       labelProps,
       inputProps
-    } = useToggle(
+    } = useSwitch(
       {
         ...removeDataAttributes(props),
         children: typeof children === "function" ? true : children
@@ -26,13 +26,13 @@ const Toggle = forwardRef(
       domRef
     );
     const renderValues = {
-      hovered,
-      error,
-      checked,
-      focused,
-      pressed,
-      focusVisible,
-      disabled: props.disabled || false
+      isHovered,
+      isInvalid,
+      isSelected,
+      isFocused,
+      isPressed,
+      isFocusVisible,
+      isDisabled: props.isDisabled || false
     };
     const renderProps = useRenderProps({
       ...props,
@@ -41,12 +41,12 @@ const Toggle = forwardRef(
     const DOMProps = filterDOMProps(props);
     delete DOMProps.id;
     return /* @__PURE__ */ jsxs("label", { ...mergeProps(DOMProps, labelProps, renderProps), ref, children: [
-      /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("input", { ...inputProps, ref: domRef }) }),
+      /* @__PURE__ */ jsx(VisuallyHidden, { elementType: "span", children: /* @__PURE__ */ jsx("input", { ...inputProps, ref: domRef }) }),
       renderProps.children
     ] });
   }
 );
-Toggle.displayName = "Toggle";
+Switch.displayName = "Switch";
 export {
-  Toggle
+  Switch
 };

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

@@ -0,0 +1,2 @@
+export * from './Switch';
+export * from './types';

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

@@ -0,0 +1,18 @@
+import type { RefObject } from 'react';
+import type { ExtendableProps } from '@koobiq/react-core';
+import type { UseSwitchProps } from '../../behaviors';
+import type { RenderProps } from '../../utils';
+export type SwitchRenderProps = {
+    isInvalid?: boolean;
+    isPressed?: boolean;
+    isSelected?: boolean;
+    isHovered?: boolean;
+    isFocused?: boolean;
+    isDisabled?: boolean;
+    isFocusVisible?: boolean;
+};
+type SwitchBaseProps = RenderProps<SwitchRenderProps> & {
+    inputRef?: RefObject<HTMLInputElement | null>;
+};
+export type SwitchProps = ExtendableProps<SwitchBaseProps, UseSwitchProps>;
+export {};

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

@@ -1 +1,2 @@
-export declare const TextField: import("react").ForwardRefExoticComponent<Omit<import("../..").UseTextFieldProps, keyof import("../../utils").RenderProps<import("./types").TextFieldRenderProps>> & import("../../utils").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'>;