@koobiq/react-primitives 0.19.0 → 0.21.0

package/dist/behaviors/useButton.js

@@ -6,12 +6,15 @@ function useButton(props, ref) {
   const { focusProps, isFocused, isFocusVisible } = useFocusRing({
     within: true
   });
-  const { hoverProps, isHovered } = useHover(props);
-  const { buttonProps: buttonPropsReactAria, isPressed } = useButton$1(
+  const { hoverProps, isHovered } = useHover({
+    ...props,
+    isDisabled: props.isDisabled
+  });
+  const { buttonProps: buttonPropsAria, isPressed } = useButton$1(
     props,
     ref
   );
-  const buttonProps = mergeProps(buttonPropsReactAria, focusProps, hoverProps);
+  const buttonProps = mergeProps(buttonPropsAria, focusProps, hoverProps);
   return {
     isPressed,
     isHovered,

package/dist/behaviors/useSwitch.d.ts

@@ -89,7 +89,7 @@ export declare function useSwitch(props: UseSwitchProps, ref: RefObject<HTMLInpu
         onBlurCapture?: (import("react").FocusEventHandler<import("@react-types/shared").FocusableElement> & import("react").FocusEventHandler<HTMLInputElement>) | undefined;
         onChange?: (import("react").FormEventHandler<import("@react-types/shared").FocusableElement> & import("react").ChangeEventHandler<HTMLInputElement>) | undefined;
         onChangeCapture?: (import("react").FormEventHandler<import("@react-types/shared").FocusableElement> & import("react").FormEventHandler<HTMLInputElement>) | undefined;
-        onBeforeInput?: (import("react").FormEventHandler<import("@react-types/shared").FocusableElement> & import("react").FormEventHandler<HTMLInputElement>) | undefined;
+        onBeforeInput?: (import("react").InputEventHandler<import("@react-types/shared").FocusableElement> & import("react").InputEventHandler<HTMLInputElement>) | undefined;
         onBeforeInputCapture?: (import("react").FormEventHandler<import("@react-types/shared").FocusableElement> & import("react").FormEventHandler<HTMLInputElement>) | undefined;
         onInput?: (import("react").FormEventHandler<import("@react-types/shared").FocusableElement> & import("react").FormEventHandler<HTMLInputElement>) | undefined;
         onInputCapture?: (import("react").FormEventHandler<import("@react-types/shared").FocusableElement> & import("react").FormEventHandler<HTMLInputElement>) | undefined;
@@ -139,8 +139,6 @@ export declare function useSwitch(props: UseSwitchProps, ref: RefObject<HTMLInpu
         onProgressCapture?: (import("react").ReactEventHandler<import("@react-types/shared").FocusableElement> & import("react").ReactEventHandler<HTMLInputElement>) | undefined;
         onRateChange?: (import("react").ReactEventHandler<import("@react-types/shared").FocusableElement> & import("react").ReactEventHandler<HTMLInputElement>) | undefined;
         onRateChangeCapture?: (import("react").ReactEventHandler<import("@react-types/shared").FocusableElement> & import("react").ReactEventHandler<HTMLInputElement>) | undefined;
-        onResize?: (import("react").ReactEventHandler<import("@react-types/shared").FocusableElement> & import("react").ReactEventHandler<HTMLInputElement>) | undefined;
-        onResizeCapture?: (import("react").ReactEventHandler<import("@react-types/shared").FocusableElement> & import("react").ReactEventHandler<HTMLInputElement>) | undefined;
         onSeeked?: (import("react").ReactEventHandler<import("@react-types/shared").FocusableElement> & import("react").ReactEventHandler<HTMLInputElement>) | undefined;
         onSeekedCapture?: (import("react").ReactEventHandler<import("@react-types/shared").FocusableElement> & import("react").ReactEventHandler<HTMLInputElement>) | undefined;
         onSeeking?: (import("react").ReactEventHandler<import("@react-types/shared").FocusableElement> & import("react").ReactEventHandler<HTMLInputElement>) | undefined;
@@ -221,6 +219,8 @@ export declare function useSwitch(props: UseSwitchProps, ref: RefObject<HTMLInpu
         onLostPointerCaptureCapture?: (import("react").PointerEventHandler<import("@react-types/shared").FocusableElement> & import("react").PointerEventHandler<HTMLInputElement>) | undefined;
         onScroll?: (import("react").UIEventHandler<import("@react-types/shared").FocusableElement> & import("react").UIEventHandler<HTMLInputElement>) | undefined;
         onScrollCapture?: (import("react").UIEventHandler<import("@react-types/shared").FocusableElement> & import("react").UIEventHandler<HTMLInputElement>) | undefined;
+        onScrollEnd?: (import("react").UIEventHandler<import("@react-types/shared").FocusableElement> & import("react").UIEventHandler<HTMLInputElement>) | undefined;
+        onScrollEndCapture?: (import("react").UIEventHandler<import("@react-types/shared").FocusableElement> & import("react").UIEventHandler<HTMLInputElement>) | undefined;
         onWheel?: (import("react").WheelEventHandler<import("@react-types/shared").FocusableElement> & import("react").WheelEventHandler<HTMLInputElement>) | undefined;
         onWheelCapture?: (import("react").WheelEventHandler<import("@react-types/shared").FocusableElement> & import("react").WheelEventHandler<HTMLInputElement>) | undefined;
         onAnimationStart?: (import("react").AnimationEventHandler<import("@react-types/shared").FocusableElement> & import("react").AnimationEventHandler<HTMLInputElement>) | undefined;
@@ -229,8 +229,16 @@ export declare function useSwitch(props: UseSwitchProps, ref: RefObject<HTMLInpu
         onAnimationEndCapture?: (import("react").AnimationEventHandler<import("@react-types/shared").FocusableElement> & import("react").AnimationEventHandler<HTMLInputElement>) | undefined;
         onAnimationIteration?: (import("react").AnimationEventHandler<import("@react-types/shared").FocusableElement> & import("react").AnimationEventHandler<HTMLInputElement>) | undefined;
         onAnimationIterationCapture?: (import("react").AnimationEventHandler<import("@react-types/shared").FocusableElement> & import("react").AnimationEventHandler<HTMLInputElement>) | undefined;
+        onToggle?: (import("react").ToggleEventHandler<import("@react-types/shared").FocusableElement> & import("react").ToggleEventHandler<HTMLInputElement>) | undefined;
+        onBeforeToggle?: (import("react").ToggleEventHandler<import("@react-types/shared").FocusableElement> & import("react").ToggleEventHandler<HTMLInputElement>) | undefined;
+        onTransitionCancel?: (import("react").TransitionEventHandler<import("@react-types/shared").FocusableElement> & import("react").TransitionEventHandler<HTMLInputElement>) | undefined;
+        onTransitionCancelCapture?: (import("react").TransitionEventHandler<import("@react-types/shared").FocusableElement> & import("react").TransitionEventHandler<HTMLInputElement>) | undefined;
         onTransitionEnd?: (import("react").TransitionEventHandler<import("@react-types/shared").FocusableElement> & import("react").TransitionEventHandler<HTMLInputElement>) | undefined;
         onTransitionEndCapture?: (import("react").TransitionEventHandler<import("@react-types/shared").FocusableElement> & import("react").TransitionEventHandler<HTMLInputElement>) | undefined;
+        onTransitionRun?: (import("react").TransitionEventHandler<import("@react-types/shared").FocusableElement> & import("react").TransitionEventHandler<HTMLInputElement>) | undefined;
+        onTransitionRunCapture?: (import("react").TransitionEventHandler<import("@react-types/shared").FocusableElement> & import("react").TransitionEventHandler<HTMLInputElement>) | undefined;
+        onTransitionStart?: (import("react").TransitionEventHandler<import("@react-types/shared").FocusableElement> & import("react").TransitionEventHandler<HTMLInputElement>) | undefined;
+        onTransitionStartCapture?: (import("react").TransitionEventHandler<import("@react-types/shared").FocusableElement> & import("react").TransitionEventHandler<HTMLInputElement>) | undefined;
         accept?: string | undefined;
         alt?: string | undefined;
         autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
@@ -238,7 +246,7 @@ export declare function useSwitch(props: UseSwitchProps, ref: RefObject<HTMLInpu
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
         form?: string | undefined;
-        formAction?: string | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
+        formAction?: string | ((formData: FormData) => void | Promise<void>) | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
         formEncType?: string | undefined;
         formMethod?: string | undefined;
         formNoValidate?: boolean | undefined;
@@ -303,8 +311,14 @@ export declare function useSwitch(props: UseSwitchProps, ref: RefObject<HTMLInpu
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined;
+        popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
+        popoverTarget?: string | undefined;
+        inert?: boolean | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
         is?: string | undefined;
+        exportparts?: string | undefined;
+        part?: string | undefined;
         ref: RefObject<HTMLInputElement | null>;
     };
     isInvalid: boolean | undefined;

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

@@ -1,4 +1,4 @@
 import type { ComponentPropsWithRef, ElementType } from 'react';
-import type { ButtonBaseProps } from './types.js';
+import type { ButtonBaseProps } from './types';
 export declare const Button: import("@koobiq/react-core").PolyForwardComponent<"button", ButtonBaseProps, ElementType>;
 export type ButtonProps<As extends ElementType = 'button'> = ComponentPropsWithRef<typeof Button<As>>;

package/dist/components/Button/Button.js

@@ -1,16 +1,15 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { polymorphicForwardRef, useDOMRef, filterDOMProps, mergeProps } from "@koobiq/react-core";
-import { useRenderProps } from "../../utils/index.js";
-import { useSlottedContext } from "../../utils/useSlottedContext.js";
+import { useContextProps, useRenderProps } from "../../utils/index.js";
 import { ButtonContext } from "./ButtonContext.js";
 import { useButton } from "../../behaviors/useButton.js";
 const Button = polymorphicForwardRef(
   (props, ref) => {
-    const { as, slot, tabIndex } = props;
-    const Tag = as || "button";
-    const commonProps = useSlottedContext(props, ButtonContext, slot);
+    const [ctxProps, ctxRef] = useContextProps(props, ref, ButtonContext);
     const {
+      as,
+      tabIndex,
       isLoading,
       isDisabled,
       value,
@@ -21,11 +20,12 @@ const Button = polymorphicForwardRef(
       formMethod,
       formNoValidate,
       formTarget
-    } = commonProps;
-    const domRef = useDOMRef(ref);
+    } = ctxProps;
+    const Tag = as || "button";
+    const domRef = useDOMRef(ctxRef);
     const { isHovered, isPressed, isFocused, isFocusVisible, buttonProps } = useButton(
       {
-        ...commonProps,
+        ...ctxProps,
         ...(isLoading || isDisabled) && {
           onPress: void 0,
           onPressStart: void 0,
@@ -73,10 +73,11 @@ const Button = polymorphicForwardRef(
         "data-hovered": isHovered || void 0,
         "data-pressed": isPressed || void 0,
         "data-focused": isFocused || void 0,
+        "data-loading": isLoading || void 0,
         "data-disabled": isDisabled || void 0,
         "data-focus-visible": isFocusVisible || void 0,
-        tabIndex: buttonProps.tabIndex,
-        ..."tabIndex" in props && { tabIndex },
+        ..."tabIndex" in ctxProps && { tabIndex },
+        "aria-hidden": ctxProps["aria-hidden"],
         "aria-disabled": isLoading ? "true" : buttonProps["aria-disabled"],
         "aria-busy": isLoading,
         ref: domRef,

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

@@ -1,5 +1,3 @@
+import type { ContextValue } from '../../utils';
 import type { ButtonProps } from './index';
-export type ButtonContextProps = {
-    slots?: Record<string, ButtonProps>;
-};
-export declare const ButtonContext: import("react").Context<ButtonContextProps>;
+export declare const ButtonContext: import("react").Context<ContextValue<ButtonProps, HTMLElement>>;

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

@@ -37,4 +37,5 @@ export type ButtonBaseProps = RenderProps<ButtonRenderProps> & {
      * Whether this button is loading.
      */
     isLoading?: boolean;
+    'aria-hidden'?: boolean | 'true' | 'false';
 } & Omit<UseButtonProps<never>, 'elementType' | 'href'>;

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

@@ -2,6 +2,6 @@ import type { ComponentRef, HTMLAttributes, ReactNode, Ref } from 'react';
 export type InputProps = {
     children?: ReactNode;
     value?: string | number | readonly string[];
-    ref?: Ref<HTMLInputElement>;
+    ref?: Ref<HTMLInputElement | HTMLTextAreaElement>;
 } & HTMLAttributes<HTMLInputElement | HTMLTextAreaElement>;
 export type InputRef = ComponentRef<'input'>;

package/dist/components/Label/Label.js

@@ -1,14 +1,13 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { useContext } from "react";
-import { polymorphicForwardRef, mergeProps } from "@koobiq/react-core";
+import { polymorphicForwardRef } from "@koobiq/react-core";
+import { useContextProps } from "../../utils/index.js";
 import { LabelContext } from "./LabelContext.js";
 const Label = polymorphicForwardRef(
   (props, ref) => {
-    const { as: Tag = "label", children, ...other } = props;
-    const defaultProps = useContext(LabelContext);
-    const commonProps = mergeProps(defaultProps, other);
-    return /* @__PURE__ */ jsx(Tag, { ...commonProps, ref, children });
+    const [ctxProps, ctxRef] = useContextProps(props, ref, LabelContext);
+    const { as: Tag = "label", children, ...other } = ctxProps;
+    return /* @__PURE__ */ jsx(Tag, { ...other, ref: ctxRef, children });
   }
 );
 Label.displayName = "Label";

package/dist/components/Label/LabelContext.d.ts

@@ -1,5 +1,3 @@
-export declare const LabelContext: import("react").Context<Omit<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-    ref?: ((instance: HTMLLabelElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLLabelElement> | null | undefined;
-}, "children" | "as"> & import("./types").LabelBaseProps & {
-    as?: "label" | undefined;
-}>;
+import type { ContextValue } from '../../utils';
+import type { LabelProps } from './index';
+export declare const LabelContext: import("react").Context<ContextValue<LabelProps, HTMLElement>>;

package/dist/components/Label/LabelContext.js

@@ -1,6 +1,6 @@
 "use client";
 import { createContext } from "react";
-const LabelContext = createContext({});
+const LabelContext = createContext(null);
 export {
   LabelContext
 };

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

@@ -1,2 +1,4 @@
+import type { ComponentPropsWithRef, ElementType } from 'react';
 import type { LinkBaseProps } from './types.js';
-export declare const Link: import("@koobiq/react-core").PolyForwardComponent<"a", LinkBaseProps, import("react").ElementType>;
+export declare const Link: import("@koobiq/react-core").PolyForwardComponent<"a", LinkBaseProps, ElementType>;
+export type LinkProps<As extends ElementType = 'a'> = ComponentPropsWithRef<typeof Link<As>>;

package/dist/components/Link/Link.js

@@ -37,8 +37,13 @@ const Link = polymorphicForwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(
     Tag,
     {
+      "data-hovered": isHovered || void 0,
+      "data-pressed": isPressed || void 0,
+      "data-focused": isFocused || void 0,
+      "data-disabled": props.isDisabled || void 0,
+      "data-focus-visible": isFocusVisible || void 0,
       ...mergeProps(linkProps, renderProps),
-      tabIndex: props.tabIndex || linkProps.tabIndex,
+      ..."tabIndex" in props && { tabIndex: props.tabIndex },
       ref: domRef,
       children: renderProps.children
     }

package/dist/components/NumberField/NumberField.js

@@ -7,9 +7,9 @@ import { useNumberField } from "@react-aria/numberfield";
 import { useNumberFieldState } from "@react-stately/numberfield";
 import { useSlottedContext, removeDataAttributes, useRenderProps, Provider } from "../../utils/index.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 { ButtonContext } from "../Button/ButtonContext.js";
 import { TextContext } from "../Text/TextContext.js";
 import { FieldErrorContext } from "../FieldError/FieldError.js";
 import { FormContext } from "../Form/Form.js";
@@ -57,14 +57,8 @@ const NumberField = forwardRef(
             ButtonContext,
             {
               slots: {
-                increment: {
-                  ...incrementButtonProps,
-                  disabled: incrementButtonProps.isDisabled
-                },
-                decrement: {
-                  ...decrementButtonProps,
-                  disabled: decrementButtonProps.isDisabled
-                }
+                increment: incrementButtonProps,
+                decrement: decrementButtonProps
               }
             }
           ],

package/dist/components/Text/Text.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { polymorphicForwardRef } from "@koobiq/react-core";
-import { useSlottedContext } from "../../utils/useSlottedContext.js";
+import { useContextProps } from "../../utils/index.js";
 import { TextContext } from "./TextContext.js";
 const Text = polymorphicForwardRef((props, ref) => {
-  const { as: Tag = "p", children, slot, ...other } = props;
-  const commonProps = useSlottedContext(other, TextContext, slot);
-  return /* @__PURE__ */ jsx(Tag, { ...commonProps, ref, children });
+  const [ctxProps, ctxRef] = useContextProps(props, ref, TextContext);
+  const { as: Tag = "p", children, ...other } = ctxProps;
+  return /* @__PURE__ */ jsx(Tag, { ...other, ref: ctxRef, children });
 });
 Text.displayName = "Text";
 export {

package/dist/components/Text/TextContext.d.ts

@@ -1,5 +1,3 @@
+import type { ContextValue } from '../../utils';
 import type { TextProps } from './Text';
-export type TextContextProps = {
-    slots?: Record<string, TextProps>;
-};
-export declare const TextContext: import("react").Context<TextContextProps>;
+export declare const TextContext: import("react").Context<ContextValue<TextProps, HTMLElement>>;

package/dist/components/Text/TextContext.js

@@ -1,6 +1,8 @@
 "use client";
 import { createContext } from "react";
-const TextContext = createContext({});
+const TextContext = createContext(
+  {}
+);
 export {
   TextContext
 };

package/dist/components/TextField/TextField.js

@@ -1,20 +1,49 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, useRef } from "react";
-import { filterDOMProps } from "@koobiq/react-core";
+import { forwardRef, useRef, useCallback } from "react";
+import { useLocalizedStringFormatter, useControlledState, useIsomorphicEffect, filterDOMProps } from "@koobiq/react-core";
 import { useTextField } from "@react-aria/textfield";
 import { useSlottedContext, removeDataAttributes, useRenderProps, Provider } from "../../utils/index.js";
+import intlMessages from "./intl.json.js";
 import { InputContext } from "../Input/InputContext.js";
 import { TextareaContext } from "../Textarea/TextareaContext.js";
+import { ButtonContext } from "../Button/ButtonContext.js";
 import { FormContext } from "../Form/Form.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 { isDisabled, isReadOnly, isRequired, onClear, isClearable } = props;
+  const stringFormatter = useLocalizedStringFormatter(intlMessages);
+  const inputRef = useRef(null);
+  const [inputValue, setInputValue] = useControlledState(
+    props.value,
+    props.defaultValue ?? "",
+    props?.onChange
+  );
+  const setValue = useCallback((value) => {
+    setInputValue(value);
+  }, []);
+  const handleClear = useCallback(() => {
+    setInputValue("");
+    onClear?.();
+    inputRef?.current?.focus();
+  }, [setInputValue, onClear]);
+  useIsomorphicEffect(() => {
+    if (!inputRef.current) return;
+    setInputValue(inputRef.current.value);
+  }, [inputRef.current]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Escape" && inputValue && (isClearable || onClear) && !isReadOnly) {
+        setInputValue("");
+        onClear?.();
+      }
+    },
+    [inputValue, setInputValue, onClear, isClearable, isReadOnly]
+  );
   const { validationBehavior: formValidationBehavior } = useSlottedContext(FormContext) || {};
   const validationBehavior = props.validationBehavior ?? formValidationBehavior ?? "aria";
-  const inputRef = useRef(null);
   const {
     labelProps,
     inputProps,
@@ -24,6 +53,12 @@ function TextFieldRender(props, ref) {
   } = useTextField(
     {
       ...removeDataAttributes(props),
+      value: inputValue,
+      onKeyDown: (e) => {
+        props?.onKeyDown?.(e);
+        handleKeyDown(e);
+      },
+      onChange: setInputValue,
       validationBehavior
     },
     inputRef
@@ -36,7 +71,11 @@ function TextFieldRender(props, ref) {
       isInvalid: validation.isInvalid || false,
       isDisabled: isDisabled || false,
       isReadOnly: isReadOnly || false,
-      isRequired: isRequired || false
+      isRequired: isRequired || false,
+      state: {
+        value: inputValue,
+        set: setValue
+      }
     }
   });
   return /* @__PURE__ */ jsx(
@@ -65,6 +104,19 @@ function TextFieldRender(props, ref) {
                 }
               }
             ],
+            [
+              ButtonContext,
+              {
+                slots: {
+                  "clear-button": {
+                    "aria-label": stringFormatter.format("clear"),
+                    preventFocusOnPress: true,
+                    onPress: handleClear,
+                    tabIndex: -1
+                  }
+                }
+              }
+            ],
             [FieldErrorContext, validation]
           ],
           children: renderProps.children

package/dist/components/TextField/intl.json.js

@@ -0,0 +1,7 @@
+const intlMessages = {
+  "ru-RU": { "clear": "Очистить поле" },
+  "en-US": { "clear": "Clear input" }
+};
+export {
+  intlMessages as default
+};

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

@@ -23,9 +23,17 @@ export type TextFieldRenderProps = {
      * @selector [data-required]
      */
     isRequired: boolean;
+    state: {
+        value: string;
+        set: (value: string) => void;
+    };
 };
 type TextFieldBaseProps = RenderProps<TextFieldRenderProps> & {
     inputElementType?: 'input' | 'textarea';
+    /** Handler that is called when the clear button is clicked. */
+    onClear?: () => void;
+    /** Whether the field can be emptied. */
+    isClearable?: boolean;
 };
 export type TextFieldProps<T = HTMLInputElement> = ExtendableProps<TextFieldBaseProps, AriaTextFieldProps<T>>;
 export type TextFieldComponentProps = <T = HTMLInputElement>(props: TextFieldProps<T>) => ReactElement | null;

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

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

package/dist/index.d.ts

@@ -35,6 +35,7 @@ export * from '@react-aria/combobox';
 export * from '@react-stately/combobox';
 export * from '@react-aria/toast';
 export * from '@react-stately/toast';
+export * from '@react-aria/breadcrumbs';
 export type { CalendarProps, CalendarAria, CalendarGridAria, CalendarCellAria, AriaCalendarProps, AriaCalendarCellProps, AriaCalendarGridProps, } from '@react-aria/calendar';
 export { useCalendar, useCalendarCell, useCalendarGrid, } from '@react-aria/calendar';
 export * from '@react-stately/calendar';

package/dist/index.js

@@ -34,6 +34,7 @@ export * from "@react-aria/combobox";
 export * from "@react-stately/combobox";
 export * from "@react-aria/toast";
 export * from "@react-stately/toast";
+export * from "@react-aria/breadcrumbs";
 import { useCalendar, useCalendarCell, useCalendarGrid } from "@react-aria/calendar";
 export * from "@react-stately/calendar";
 export * from "@react-stately/form";

package/dist/utils/index.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useMemo, useContext } from "react";
-import { useObjectRef, mergeRefs, mergeProps } from "@koobiq/react-core";
+import { isNotNil, useObjectRef, mergeRefs, mergeProps } from "@koobiq/react-core";
 const DEFAULT_SLOT = Symbol("default");
 function useRenderProps(props) {
   const {
@@ -69,7 +69,7 @@ function removeDataAttributes(props) {
 }
 function useSlottedContext(context, slot) {
   const ctx = useContext(context);
-  if (slot === null) {
+  if (!isNotNil(slot)) {
     return null;
   }
   if (ctx && typeof ctx === "object" && "slots" in ctx && ctx.slots) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-primitives",
-  "version": "0.19.0",
+  "version": "0.21.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -24,6 +24,7 @@
   },
   "sideEffects": false,
   "dependencies": {
+    "@react-aria/breadcrumbs": "^3.5.29",
     "@react-aria/button": "^3.9.0",
     "@react-aria/calendar": "^3.8.3",
     "@react-aria/checkbox": "^3.16.2",
@@ -70,8 +71,8 @@
     "@react-stately/toggle": "^3.9.2",
     "@react-stately/tooltip": "^3.5.5",
     "@react-stately/tree": "^3.8.9",
-    "@koobiq/logger": "0.19.0",
-    "@koobiq/react-core": "0.19.0"
+    "@koobiq/react-core": "0.21.0",
+    "@koobiq/logger": "0.21.0"
   },
   "peerDependencies": {
     "react": "18.x || 19.x",

package/dist/utils/useSlottedContext.d.ts

@@ -1,4 +0,0 @@
-import type { Context } from 'react';
-export declare function useSlottedContext<PROPS extends object, CONTEXT extends Context<{
-    slots?: Record<string, any>;
-}>>(props: PROPS, context: CONTEXT, slot: string | undefined): PROPS;

package/dist/utils/useSlottedContext.js

@@ -1,11 +0,0 @@
-import { useContext } from "react";
-import { mergeProps } from "@koobiq/react-core";
-function useSlottedContext(props, context, slot) {
-  const slotContext = useContext(context);
-  if (!slot) return props;
-  const propsContext = slotContext.slots?.[slot];
-  return mergeProps(props, propsContext);
-}
-export {
-  useSlottedContext
-};