@koobiq/react-primitives 0.0.1-beta.2 → 0.0.1-beta.20

package/dist/behaviors/useButton.js

@@ -2,7 +2,7 @@
 import { useFocusRing, useHover, mergeProps } from "@koobiq/react-core";
 import { useButton as useButton$1 } from "@react-aria/button";
 function useButton(props, ref) {
-  const { onClick, onPress, disabled, ...otherProps } = props;
+  const { disabled, ...otherProps } = props;
   const {
     focusProps,
     isFocused: focused,
@@ -17,7 +17,6 @@ function useButton(props, ref) {
   const { buttonProps: commonButtonProps, isPressed: pressed } = useButton$1(
     {
       ...otherProps,
-      onPress: onPress || onClick,
       isDisabled: disabled
     },
     ref

package/dist/behaviors/useLink.d.ts

@@ -3,7 +3,6 @@ import type { ExtendableProps } from '@koobiq/react-core';
 import type { AriaLinkOptions } from '@react-aria/link';
 export type UseLinkProps = ExtendableProps<{
     disabled?: boolean;
-    onClick?: AriaLinkOptions['onPress'];
 }, Omit<AriaLinkOptions, 'isDisabled'>>;
 export declare function useLink(props: UseLinkProps, ref: RefObject<HTMLElement | null>): {
     linkProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement>;

package/dist/behaviors/useLink.js

@@ -2,7 +2,7 @@
 import { useHover, useFocusRing, mergeProps } from "@koobiq/react-core";
 import { useLink as useLink$1 } from "@react-aria/link";
 function useLink(props, ref) {
-  const { disabled, onClick, ...otherProps } = props;
+  const { disabled, ...otherProps } = props;
   const { hoverProps, isHovered } = useHover({
     ...otherProps,
     isDisabled: disabled
@@ -11,7 +11,6 @@ function useLink(props, ref) {
   const { linkProps: commonLinkProps, isPressed } = useLink$1(
     {
       ...otherProps,
-      onPress: onClick,
       isDisabled: disabled
     },
     ref

package/dist/components/Button/Button.js

@@ -26,7 +26,7 @@ const Button = polymorphicForwardRef(
     const { hovered, pressed, focused, focusVisible, buttonProps } = useButton(
       {
         ...commonProps,
-        ...loading && {
+        ...(loading || disabled) && {
           onPress: void 0,
           onPressStart: void 0,
           onPressEnd: void 0,
@@ -69,6 +69,11 @@ const Button = polymorphicForwardRef(
         },
         ...buttonProps,
         ...renderProps,
+        "data-hovered": hovered,
+        "data-pressed": pressed,
+        "data-focused": focused,
+        "data-disabled": disabled,
+        "data-focus-visible": focusVisible,
         tabIndex: tabIndex || buttonProps.tabIndex,
         "aria-disabled": loading ? "true" : buttonProps["aria-disabled"],
         "aria-busy": loading,

package/dist/components/Button/ButtonContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from "react";
 const ButtonContext = createContext({});
 export {

package/dist/components/Checkbox/Checkbox.d.ts

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

package/dist/components/Checkbox/Checkbox.js

@@ -43,7 +43,7 @@ const Checkbox = 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/Group/GroupContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext, useContext } from "react";
 const GroupContext = createContext({});
 const useGroupContext = () => useContext(GroupContext);

package/dist/components/Input/InputContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext, useContext } from "react";
 const InputContext = createContext({});
 const useInputContext = () => useContext(InputContext);

package/dist/components/Label/LabelContext.js

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

package/dist/components/Link/Link.js

@@ -5,9 +5,24 @@ import { useRenderProps } from "../../utils/index.js";
 import { useLink } from "../../behaviors/useLink.js";
 const Link = polymorphicForwardRef((props, ref) => {
   const { as: Tag = "a", ...commonProps } = props;
+  const { disabled } = commonProps;
   const domRef = useDOMRef(ref);
   const { hovered, pressed, focused, focusVisible, linkProps } = useLink(
-    commonProps,
+    {
+      ...commonProps,
+      ...disabled && {
+        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
+      },
+      disabled
+    },
     domRef
   );
   const renderValues = {
@@ -21,7 +36,15 @@ const Link = polymorphicForwardRef((props, ref) => {
     ...props,
     values: renderValues
   });
-  return /* @__PURE__ */ jsx(Tag, { ...mergeProps(linkProps, renderProps), ref, children: renderProps.children });
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ...mergeProps(linkProps, renderProps),
+      tabIndex: props.tabIndex || linkProps.tabIndex,
+      ref: domRef,
+      children: renderProps.children
+    }
+  );
 });
 Link.displayName = "Link";
 export {

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

@@ -8,4 +8,6 @@ export type LinkRenderProps = {
     disabled: boolean;
     focusVisible: boolean;
 };
-export type LinkBaseProps = ExtendableProps<RenderProps<LinkRenderProps>, UseLinkProps>;
+export type LinkBaseProps = ExtendableProps<RenderProps<LinkRenderProps> & {
+    tabIndex?: number;
+}, UseLinkProps>;

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("../..").UseNumberFieldProps, keyof import("../..").RenderProps<import("./types").NumberFieldRenderProps>> & import("../..").RenderProps<import("./types").NumberFieldRenderProps> & import("react").RefAttributes<HTMLDivElement>>;

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("../..").UseRadioProps, "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

@@ -38,7 +38,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.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from "react";
 const RadioContext = createContext(
   {}

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("../..").UseRadioGroupProps, keyof import("../..").RenderProps<import("./types").RadioGroupRenderProps>> & import("../..").RenderProps<import("./types").RadioGroupRenderProps> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Text/TextContext.js

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

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

@@ -1 +1 @@
-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>>;
+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>>;

package/dist/components/Textarea/TextareaContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext, useContext } from "react";
 const TextareaContext = createContext({});
 const useTextareaContext = () => useContext(TextareaContext);

package/dist/components/Toggle/Toggle.d.ts

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

package/dist/components/Toggle/Toggle.js

@@ -41,7 +41,7 @@ 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
     ] });
   }

package/dist/index.d.ts

@@ -1,15 +1,24 @@
+import { useToggleButtonGroup, useToggleButtonGroupItem, type AriaToggleButtonGroupProps, type AriaToggleButtonGroupItemProps } from '@react-aria/button';
 import { useDialog, type AriaDialogProps } from '@react-aria/dialog';
 import { useLocale, I18nProvider, useLocalizedStringFormatter, type I18nProviderProps } from '@react-aria/i18n';
 import { useListBox, useOption, useListBoxSection, type AriaListBoxProps } from '@react-aria/listbox';
+import { useMenu, useMenuItem, useMenuSection, useMenuTrigger, type AriaMenuOptions, type AriaMenuProps } from '@react-aria/menu';
 import { Overlay, usePopover, useModalOverlay, useOverlayTrigger, useOverlayPosition, type AriaModalOverlayProps } from '@react-aria/overlays';
+import { useSelect, HiddenSelect } from '@react-aria/select';
+import { useSeparator } from '@react-aria/separator';
 import { useTooltip, useTooltipTrigger } from '@react-aria/tooltip';
 import { Item, Section } from '@react-stately/collections';
 import { useListState, type ListState } from '@react-stately/list';
+import { useMenuTriggerState } from '@react-stately/menu';
 import { useOverlayTriggerState, type OverlayTriggerState } from '@react-stately/overlays';
+import { useSelectState } from '@react-stately/select';
+import { useToggleGroupState, type ToggleGroupState } from '@react-stately/toggle';
 import type { TooltipTriggerProps } from '@react-stately/tooltip';
 import { useTooltipTriggerState } from '@react-stately/tooltip';
-import type { HoverEvent, Node, ItemProps, SectionProps, LinkDOMProps } from '@react-types/shared';
+import { useTreeState, type TreeState } from '@react-stately/tree';
+import type { Node, PressEvent, HoverEvent, ItemProps, SectionProps, LinkDOMProps, FocusableElement } from '@react-types/shared';
 export * from './behaviors/index.js';
 export * from './components/index.js';
-export { Overlay, useLocale, useDialog, useOption, usePopover, useListBox, useTooltip, I18nProvider, useListState, useModalOverlay, useOverlayTrigger, useTooltipTrigger, useListBoxSection, useOverlayPosition, useOverlayTriggerState, useTooltipTriggerState, useLocalizedStringFormatter, Item, Section, type ListState, type Node, type ItemProps, type LinkDOMProps, type SectionProps, type HoverEvent, type AriaDialogProps, type I18nProviderProps, type AriaListBoxProps, type TooltipTriggerProps, type OverlayTriggerState, type AriaModalOverlayProps, };
+export { Item, Overlay, Section, useMenu, useLocale, useDialog, useOption, useSelect, usePopover, useListBox, useTooltip, useListState, HiddenSelect, I18nProvider, useMenuItem, useTreeState, useSeparator, useMenuSection, useMenuTrigger, useSelectState, useModalOverlay, useOverlayTrigger, useTooltipTrigger, useListBoxSection, useOverlayPosition, useMenuTriggerState, useToggleGroupState, useToggleButtonGroup, useOverlayTriggerState, useTooltipTriggerState, useToggleButtonGroupItem, useLocalizedStringFormatter, type Node, type TreeState, type ItemProps, type ListState, type PressEvent, type HoverEvent, type LinkDOMProps, type FocusableElement, type SectionProps, type ToggleGroupState, type AriaMenuProps, type AriaDialogProps, type AriaMenuOptions, type AriaListBoxProps, type I18nProviderProps, type TooltipTriggerProps, type OverlayTriggerState, type AriaModalOverlayProps, type AriaToggleButtonGroupProps, type AriaToggleButtonGroupItemProps, };
 export * from './types';
+export * from './utils';

package/dist/index.js

@@ -1,12 +1,21 @@
+import { useToggleButtonGroup, useToggleButtonGroupItem } from "@react-aria/button";
 import { useDialog } from "@react-aria/dialog";
 import { I18nProvider, useLocale, useLocalizedStringFormatter } from "@react-aria/i18n";
 import { useListBox, useListBoxSection, useOption } from "@react-aria/listbox";
+import { useMenu, useMenuItem, useMenuSection, useMenuTrigger } from "@react-aria/menu";
 import { Overlay, useModalOverlay, useOverlayPosition, useOverlayTrigger, usePopover } from "@react-aria/overlays";
+import { HiddenSelect, useSelect } from "@react-aria/select";
+import { useSeparator } from "@react-aria/separator";
 import { useTooltip, useTooltipTrigger } from "@react-aria/tooltip";
 import { Item, Section } from "@react-stately/collections";
 import { useListState } from "@react-stately/list";
+import { useMenuTriggerState } from "@react-stately/menu";
 import { useOverlayTriggerState } from "@react-stately/overlays";
+import { useSelectState } from "@react-stately/select";
+import { useToggleGroupState } from "@react-stately/toggle";
 import { useTooltipTriggerState } from "@react-stately/tooltip";
+import { useTreeState } from "@react-stately/tree";
+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";
@@ -45,6 +54,7 @@ export {
   Checkbox,
   Group,
   GroupContext,
+  HiddenSelect,
   I18nProvider,
   Input,
   InputContext,
@@ -55,6 +65,7 @@ export {
   NumberField,
   Overlay,
   ProgressBar,
+  Provider,
   Radio,
   RadioContext,
   RadioGroup,
@@ -65,6 +76,7 @@ export {
   Textarea,
   TextareaContext,
   Toggle,
+  removeDataAttributes,
   useButton,
   useCheckbox,
   useDialog,
@@ -76,6 +88,11 @@ export {
   useListState,
   useLocale,
   useLocalizedStringFormatter,
+  useMenu,
+  useMenuItem,
+  useMenuSection,
+  useMenuTrigger,
+  useMenuTriggerState,
   useModalOverlay,
   useNumberField,
   useNumberFieldState,
@@ -88,10 +105,18 @@ export {
   useRadio,
   useRadioGroup,
   useRadioGroupState,
+  useRenderProps,
+  useSelect,
+  useSelectState,
+  useSeparator,
   useTextField,
   useTextareaContext,
   useToggle,
+  useToggleButtonGroup,
+  useToggleButtonGroupItem,
+  useToggleGroupState,
   useTooltip,
   useTooltipTrigger,
-  useTooltipTriggerState
+  useTooltipTriggerState,
+  useTreeState
 };

package/dist/types.d.ts

@@ -1,8 +1,11 @@
 import type { ElementType } from 'react';
 import type { AriaButtonOptions } from '@react-aria/button';
+import type { AriaLinkOptions } from '@react-aria/link';
 export type ButtonOptions = Omit<AriaButtonOptions<ElementType>, 'isDisabled'> & {
     /** Whether the button is disabled. */
     disabled?: boolean;
-    /** Handler that is called when the press is released over the target. */
-    onClick?: AriaButtonOptions<ElementType>['onPress'];
+};
+export type LinkOptions = Omit<AriaLinkOptions, 'isDisabled'> & {
+    /** Whether the button is disabled. */
+    disabled?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-primitives",
-  "version": "0.0.1-beta.2",
+  "version": "0.0.1-beta.20",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -9,6 +9,11 @@
       "default": "./dist/index.js"
     }
   },
+  "repository": {
+    "type": "git",
+    "directory": "packages/primitives",
+    "url": "git+https://github.com/koobiq/react-components.git"
+  },
   "type": "module",
   "files": [
     "dist"
@@ -24,22 +29,29 @@
     "@react-aria/i18n": "^3.12.4",
     "@react-aria/link": "^3.7.0",
     "@react-aria/listbox": "^3.14.2",
+    "@react-aria/menu": "^3.18.2",
     "@react-aria/numberfield": "^3.11.8",
     "@react-aria/overlays": "^3.23.4",
     "@react-aria/progress": "^3.4.17",
     "@react-aria/radio": "^3.10.9",
+    "@react-aria/select": "^3.15.3",
+    "@react-aria/separator": "^3.4.8",
     "@react-aria/textfield": "^3.14.0",
     "@react-aria/toggle": "^3.10.10",
     "@react-aria/tooltip": "^3.7.9",
     "@react-aria/visually-hidden": "^3.8.0",
     "@react-stately/collections": "^3.12.2",
     "@react-stately/list": "^3.12.0",
+    "@react-stately/menu": "^3.9.3",
     "@react-stately/numberfield": "^3.9.7",
     "@react-stately/overlays": "^3.6.11",
     "@react-stately/radio": "^3.10.8",
+    "@react-stately/select": "^3.6.11",
+    "@react-stately/toggle": "^3.7.0",
     "@react-stately/tooltip": "^3.4.13",
-    "@koobiq/logger": "0.0.1-beta.2",
-    "@koobiq/react-core": "0.0.1-beta.2"
+    "@react-stately/tree": "^3.8.9",
+    "@koobiq/logger": "0.0.1-beta.20",
+    "@koobiq/react-core": "0.0.1-beta.20"
   },
   "peerDependencies": {
     "react": "18.x || 19.x",