@koobiq/react-primitives 0.0.1-beta.23 → 0.0.1-beta.25

package/dist/behaviors/useCheckbox.d.ts

@@ -1,56 +1,21 @@
 import type { RefObject } from 'react';
-import type { ExtendableProps } from '@koobiq/react-core';
 import type { AriaCheckboxProps } from '@react-aria/checkbox';
-export type UseCheckboxProps = ExtendableProps<{
-    /**
-     * If `true`, the component will indicate an error.
-     * @default false
-     * */
-    error?: boolean;
-    /**
-     * If `true`, the component is checked.
-     * @default false
-     * */
-    checked?: boolean;
-    /** It prevents the user from changing the value of the checkbox.
-     * @default false
-     */
-    readonly?: boolean;
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     * */
-    disabled?: boolean;
-    /**
-     * If `true`, the input element is required.
-     * @default false
-     * */
-    required?: boolean;
-    /**
-     * If `true`, the component appears indeterminate.
-     * @default false
-     * */
-    indeterminate?: boolean;
-    /** The default checked state. Use when the component is not controlled. */
-    defaultChecked?: boolean;
-    /** Callback fired when the state is changed. */
-    onChange?: (checked: boolean) => void;
-}, Omit<AriaCheckboxProps, 'onChange' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'isSelected' | 'isDisabled' | 'isIndeterminate' | 'defaultSelected'>>;
+export type UseCheckboxProps = AriaCheckboxProps;
 export declare function useCheckbox(props: UseCheckboxProps, inputRef: RefObject<HTMLInputElement | null>): {
     validationErrors: string[];
     validationDetails: ValidityState;
+    isInvalid: boolean;
+    isPressed: boolean;
+    isHovered: boolean;
+    isFocused: boolean;
+    isSelected: boolean;
+    isDisabled: boolean;
+    isReadOnly: boolean;
     labelProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement> & import("react").LabelHTMLAttributes<HTMLLabelElement>;
     inputProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
         ref: RefObject<HTMLInputElement | null>;
     };
-    indeterminate: boolean | undefined;
-    error: boolean;
-    pressed: boolean;
-    hovered: boolean;
-    focused: boolean;
-    checked: boolean;
-    disabled: boolean;
-    readonly: boolean;
-    focusVisible: boolean;
+    isFocusVisible: boolean;
+    isIndeterminate: boolean | undefined;
 };
 export type UseCheckboxReturn = ReturnType<typeof useCheckbox>;

package/dist/behaviors/useCheckbox.js

@@ -2,23 +2,10 @@
 import { useToggleState, useHover, useFocusRing, mergeProps } from "@koobiq/react-core";
 import { useCheckbox as useCheckbox$1 } from "@react-aria/checkbox";
 function useCheckbox(props, inputRef) {
-  const {
-    error,
-    checked,
-    disabled,
-    readonly,
-    required,
-    indeterminate,
-    defaultChecked,
-    onChange
-  } = props;
-  const state = useToggleState({
-    isSelected: checked,
-    defaultSelected: defaultChecked,
-    onChange
-  });
+  const { isDisabled: isDisabledProp, isIndeterminate: isIndeterminateProp } = props;
+  const state = useToggleState(props);
   const { hoverProps, isHovered } = useHover({
-    isDisabled: disabled
+    isDisabled: isDisabledProp
   });
   const { focusProps, isFocused, isFocusVisible } = useFocusRing();
   const {
@@ -30,34 +17,23 @@ function useCheckbox(props, inputRef) {
     isReadOnly,
     isPressed,
     ...other
-  } = useCheckbox$1(
-    {
-      ...props,
-      isInvalid: error,
-      isDisabled: disabled,
-      isIndeterminate: indeterminate,
-      isReadOnly: readonly,
-      isRequired: required
-    },
-    state,
-    inputRef
-  );
+  } = useCheckbox$1(props, state, inputRef);
   const labelProps = mergeProps(hoverProps, commonLabelProps);
   const inputProps = mergeProps(focusProps, commonInputProps, {
     ref: inputRef
   });
   return {
+    isInvalid,
+    isPressed,
+    isHovered,
+    isFocused,
+    isSelected,
+    isDisabled,
+    isReadOnly,
     labelProps,
     inputProps,
-    indeterminate,
-    error: isInvalid,
-    pressed: isPressed,
-    hovered: isHovered,
-    focused: isFocused,
-    checked: isSelected,
-    disabled: isDisabled,
-    readonly: isReadOnly,
-    focusVisible: isFocusVisible,
+    isFocusVisible,
+    isIndeterminate: isIndeterminateProp,
     ...other
   };
 }

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

@@ -1,3 +1,3 @@
-export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<import("../..").UseCheckboxProps, keyof import("../..").RenderProps<import("./types").CheckboxRenderProps> | "inputRef"> & import("../..").RenderProps<import("./types").CheckboxRenderProps> & {
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<import("@react-types/checkbox").AriaCheckboxProps, 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

@@ -10,13 +10,15 @@ const Checkbox = forwardRef(
     const { children, inputRef } = props;
     const domRef = useDOMRef(inputRef);
     const {
-      hovered,
-      error,
-      checked,
-      focused,
-      pressed,
-      focusVisible,
-      indeterminate,
+      isHovered,
+      isInvalid,
+      isSelected,
+      isFocused,
+      isPressed,
+      isReadOnly,
+      isDisabled,
+      isFocusVisible,
+      isIndeterminate,
       labelProps,
       inputProps
     } = useCheckbox(
@@ -27,14 +29,14 @@ const Checkbox = forwardRef(
       domRef
     );
     const renderValues = {
-      hovered,
-      error,
-      checked,
-      focused,
-      pressed,
-      focusVisible,
-      indeterminate,
-      disabled: props.disabled || false
+      isHovered,
+      isInvalid,
+      isSelected,
+      isFocused,
+      isPressed,
+      isFocusVisible,
+      isIndeterminate,
+      isDisabled: props.isDisabled || false
     };
     const renderProps = useRenderProps({
       ...props,
@@ -42,10 +44,25 @@ const Checkbox = forwardRef(
     });
     const DOMProps = filterDOMProps(props);
     delete DOMProps.id;
-    return /* @__PURE__ */ jsxs("label", { ...mergeProps(DOMProps, labelProps, renderProps), ref, children: [
-      /* @__PURE__ */ jsx(VisuallyHidden, { elementType: "span", children: /* @__PURE__ */ jsx("input", { ...inputProps, ref: domRef }) }),
-      renderProps.children
-    ] });
+    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,
+        ...mergeProps(DOMProps, labelProps, renderProps),
+        ref,
+        children: [
+          /* @__PURE__ */ jsx(VisuallyHidden, { elementType: "span", children: /* @__PURE__ */ jsx("input", { ...inputProps, ref: domRef }) }),
+          renderProps.children
+        ]
+      }
+    );
   }
 );
 Checkbox.displayName = "Checkbox";

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

@@ -3,14 +3,14 @@ import type { ExtendableProps } from '@koobiq/react-core';
 import type { UseCheckboxProps } from '../../behaviors';
 import type { RenderProps } from '../../utils';
 export type CheckboxRenderProps = {
-    error?: boolean;
-    pressed?: boolean;
-    checked?: boolean;
-    hovered?: boolean;
-    focused?: boolean;
-    disabled?: boolean;
-    focusVisible?: boolean;
-    indeterminate?: boolean;
+    isInvalid?: boolean;
+    isPressed?: boolean;
+    isSelected?: boolean;
+    isHovered?: boolean;
+    isFocused?: boolean;
+    isDisabled?: boolean;
+    isFocusVisible?: boolean;
+    isIndeterminate?: boolean;
 };
 type CheckboxBaseProps = RenderProps<CheckboxRenderProps> & {
     inputRef?: RefObject<HTMLInputElement | null>;

package/dist/index.d.ts

@@ -6,14 +6,17 @@ import { useMenu, useMenuItem, useMenuSection, useMenuTrigger, type AriaMenuOpti
 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 { useTable, useTableCell, useTableRow, useTableHeaderRow, useTableSelectAllCheckbox, useTableSelectionCheckbox, useTableColumnHeader, useTableRowGroup, type AriaTableProps, type AriaTableCellProps, type GridRowProps, type AriaTableColumnHeaderProps } from '@react-aria/table';
 import { useTag, useTagGroup, type AriaTagGroupProps, type AriaTagProps } from '@react-aria/tag';
 import { useTooltip, useTooltipTrigger } from '@react-aria/tooltip';
+import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { Item, Section } from '@react-stately/collections';
 import { useListData } from '@react-stately/data';
 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 { Cell, Column, Row, TableBody, TableHeader, useTableState, type TableStateProps, type TableState, type CellProps, type ColumnProps, type RowProps, type TableHeaderProps, type TableBodyProps } from '@react-stately/table';
 import { useToggleGroupState, type ToggleGroupState } from '@react-stately/toggle';
 import type { TooltipTriggerProps } from '@react-stately/tooltip';
 import { useTooltipTriggerState } from '@react-stately/tooltip';
@@ -21,6 +24,6 @@ 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 { Item, Overlay, Section, useMenu, useLocale, useDialog, useOption, useSelect, usePopover, useListBox, useTooltip, useTag, useTagGroup, useListState, HiddenSelect, I18nProvider, useMenuItem, useListData, useTreeState, useSeparator, useMenuSection, useMenuTrigger, useSelectState, useModalOverlay, useOverlayTrigger, useTooltipTrigger, useListBoxSection, useOverlayPosition, useMenuTriggerState, useToggleGroupState, useToggleButtonGroup, useOverlayTriggerState, useTooltipTriggerState, useToggleButtonGroupItem, useLocalizedStringFormatter, type Node, type TreeState, type ItemProps, type AriaTagGroupProps, type AriaTagProps, 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 { Item, Overlay, Section, useMenu, Cell, Column, Row, TableBody, TableHeader, useLocale, useDialog, useOption, useSelect, usePopover, useListBox, useTooltip, useTag, useTable, useTagGroup, useListState, HiddenSelect, I18nProvider, useMenuItem, useListData, useTreeState, useSeparator, useTableState, useMenuSection, useMenuTrigger, useSelectState, useModalOverlay, useOverlayTrigger, useTooltipTrigger, useListBoxSection, useOverlayPosition, useTableCell, useTableRow, useTableHeaderRow, useTableColumnHeader, useTableSelectAllCheckbox, useTableSelectionCheckbox, useTableRowGroup, useMenuTriggerState, useToggleGroupState, useToggleButtonGroup, useOverlayTriggerState, useTooltipTriggerState, useToggleButtonGroupItem, useLocalizedStringFormatter, VisuallyHidden, type Node, type TableState, type TreeState, type TableHeaderProps, type TableBodyProps, type ItemProps, type CellProps, type ColumnProps, type RowProps, type GridRowProps, type AriaTableColumnHeaderProps, type AriaTableCellProps, type AriaTableProps, type TableStateProps, type AriaTagGroupProps, type AriaTagProps, 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

@@ -6,14 +6,17 @@ import { useMenu, useMenuItem, useMenuSection, useMenuTrigger } from "@react-ari
 import { Overlay, useModalOverlay, useOverlayPosition, useOverlayTrigger, usePopover } from "@react-aria/overlays";
 import { HiddenSelect, useSelect } from "@react-aria/select";
 import { useSeparator } from "@react-aria/separator";
+import { useTable, useTableCell, useTableColumnHeader, useTableHeaderRow, useTableRow, useTableRowGroup, useTableSelectAllCheckbox, useTableSelectionCheckbox } from "@react-aria/table";
 import { useTag, useTagGroup } from "@react-aria/tag";
 import { useTooltip, useTooltipTrigger } from "@react-aria/tooltip";
+import { VisuallyHidden } from "@react-aria/visually-hidden";
 import { Item, Section } from "@react-stately/collections";
 import { useListData } from "@react-stately/data";
 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 { Cell, Column, Row, TableBody, TableHeader, useTableState } from "@react-stately/table";
 import { useToggleGroupState } from "@react-stately/toggle";
 import { useTooltipTriggerState } from "@react-stately/tooltip";
 import { useTreeState } from "@react-stately/tree";
@@ -53,7 +56,9 @@ import { NumberField } from "./components/NumberField/NumberField.js";
 export {
   Button,
   ButtonContext,
+  Cell,
   Checkbox,
+  Column,
   Group,
   GroupContext,
   HiddenSelect,
@@ -71,13 +76,17 @@ export {
   Radio,
   RadioContext,
   RadioGroup,
+  Row,
   Section,
+  TableBody,
+  TableHeader,
   Text,
   TextContext,
   TextField,
   Textarea,
   TextareaContext,
   Toggle,
+  VisuallyHidden,
   removeDataAttributes,
   useButton,
   useCheckbox,
@@ -112,6 +121,15 @@ export {
   useSelect,
   useSelectState,
   useSeparator,
+  useTable,
+  useTableCell,
+  useTableColumnHeader,
+  useTableHeaderRow,
+  useTableRow,
+  useTableRowGroup,
+  useTableSelectAllCheckbox,
+  useTableSelectionCheckbox,
+  useTableState,
   useTag,
   useTagGroup,
   useTextField,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-primitives",
-  "version": "0.0.1-beta.23",
+  "version": "0.0.1-beta.25",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -36,6 +36,7 @@
     "@react-aria/radio": "^3.10.9",
     "@react-aria/select": "^3.15.3",
     "@react-aria/separator": "^3.4.8",
+    "@react-aria/table": "^3.17.3",
     "@react-aria/tag": "^3.6.0",
     "@react-aria/textfield": "^3.14.0",
     "@react-aria/toggle": "^3.10.10",
@@ -49,11 +50,12 @@
     "@react-stately/overlays": "^3.6.11",
     "@react-stately/radio": "^3.10.8",
     "@react-stately/select": "^3.6.11",
+    "@react-stately/table": "^3.14.2",
     "@react-stately/toggle": "^3.7.0",
     "@react-stately/tooltip": "^3.4.13",
     "@react-stately/tree": "^3.8.9",
-    "@koobiq/logger": "0.0.1-beta.23",
-    "@koobiq/react-core": "0.0.1-beta.23"
+    "@koobiq/react-core": "0.0.1-beta.25",
+    "@koobiq/logger": "0.0.1-beta.25"
   },
   "peerDependencies": {
     "react": "18.x || 19.x",