@koobiq/react-primitives 0.20.0 → 0.21.1

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,13 +1,12 @@
 "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 commonProps = useSlottedContext(props, ButtonContext, props.slot);
+    const [ctxProps, ctxRef] = useContextProps(props, ref, ButtonContext);
     const {
       as,
       tabIndex,
@@ -21,12 +20,12 @@ const Button = polymorphicForwardRef(
       formMethod,
       formNoValidate,
       formTarget
-    } = commonProps;
+    } = ctxProps;
     const Tag = as || "button";
-    const domRef = useDOMRef(ref);
+    const domRef = useDOMRef(ctxRef);
     const { isHovered, isPressed, isFocused, isFocusVisible, buttonProps } = useButton(
       {
-        ...commonProps,
+        ...ctxProps,
         ...(isLoading || isDisabled) && {
           onPress: void 0,
           onPressStart: void 0,
@@ -74,11 +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 commonProps && { tabIndex },
-        "aria-hidden": commonProps["aria-hidden"],
+        ..."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/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,2 +1,3 @@
+import type { ContextValue } from '../../utils';
 import type { LabelProps } from './index';
-export declare const LabelContext: import("react").Context<LabelProps>;
+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

@@ -5,7 +5,7 @@ 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 { useSlottedContext, removeDataAttributes, useRenderProps, Provider } from "../../utils/index.js";
+import { useSlottedContext, removeDataAttributes, useRenderProps, Provider, DEFAULT_SLOT } from "../../utils/index.js";
 import { GroupContext } from "../Group/GroupContext.js";
 import { LabelContext } from "../Label/LabelContext.js";
 import { InputContext } from "../Input/InputContext.js";
@@ -57,6 +57,7 @@ const NumberField = forwardRef(
             ButtonContext,
             {
               slots: {
+                [DEFAULT_SLOT]: {},
                 increment: incrementButtonProps,
                 decrement: decrementButtonProps
               }
@@ -66,6 +67,7 @@ const NumberField = forwardRef(
             TextContext,
             {
               slots: {
+                [DEFAULT_SLOT]: {},
                 description: descriptionProps,
                 errorMessage: errorMessageProps
               }

package/dist/components/Radio/RadioGroup.js

@@ -2,7 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { filterDOMProps } from "@koobiq/react-core";
-import { useSlottedContext, removeDataAttributes, useRenderProps, Provider } from "../../utils/index.js";
+import { useSlottedContext, removeDataAttributes, useRenderProps, Provider, DEFAULT_SLOT } from "../../utils/index.js";
 import { useRadioGroupState } from "../../behaviors/useRadioGroupState.js";
 import { useRadioGroup } from "../../behaviors/useRadioGroup.js";
 import { FieldErrorContext } from "../FieldError/FieldError.js";
@@ -59,6 +59,7 @@ const RadioGroup = forwardRef(
                 TextContext,
                 {
                   slots: {
+                    [DEFAULT_SLOT]: {},
                     description: descriptionProps,
                     errorMessage: errorMessageProps
                   }

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

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 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 { useSlottedContext, removeDataAttributes, useRenderProps, Provider, DEFAULT_SLOT } from "../../utils/index.js";
 import intlMessages from "./intl.json.js";
 import { InputContext } from "../Input/InputContext.js";
 import { TextareaContext } from "../Textarea/TextareaContext.js";
@@ -99,6 +99,7 @@ function TextFieldRender(props, ref) {
               TextContext,
               {
                 slots: {
+                  [DEFAULT_SLOT]: {},
                   description: descriptionProps,
                   errorMessage: errorMessageProps
                 }
@@ -108,6 +109,7 @@ function TextFieldRender(props, ref) {
               ButtonContext,
               {
                 slots: {
+                  [DEFAULT_SLOT]: {},
                   "clear-button": {
                     "aria-label": stringFormatter.format("clear"),
                     preventFocusOnPress: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-primitives",
-  "version": "0.20.0",
+  "version": "0.21.1",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -71,8 +71,8 @@
     "@react-stately/toggle": "^3.9.2",
     "@react-stately/tooltip": "^3.5.5",
     "@react-stately/tree": "^3.8.9",
-    "@koobiq/logger": "0.20.0",
-    "@koobiq/react-core": "0.20.0"
+    "@koobiq/logger": "0.21.1",
+    "@koobiq/react-core": "0.21.1"
   },
   "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(propsContext, props);
-}
-export {
-  useSlottedContext
-};