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

package/dist/components/index.d.ts

@@ -1,13 +1,13 @@
-export * from './Text/index.js';
+export * from './Text';
 export * from './Group';
-export * from './Button/index.js';
-export * from './Checkbox/index.js';
-export * from './Link/index.js';
-export * from './Toggle/index.js';
-export * from './Radio/index.js';
-export * from './Label/index.js';
-export * from './Input/index.js';
-export * from './Textarea/index.js';
-export * from './ProgressBar/index.js';
-export * from './TextField/index.js';
-export * from './NumberField/index.js';
+export * from './Button';
+export * from './Checkbox';
+export * from './Link';
+export * from './Switch';
+export * from './Radio';
+export * from './Label';
+export * from './Input';
+export * from './Textarea';
+export * from './ProgressBar';
+export * from './TextField';
+export * from './NumberField';

package/dist/index.d.ts

@@ -1,15 +1,30 @@
-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 { Overlay, usePopover, useModalOverlay, useOverlayTrigger, useOverlayPosition, type AriaModalOverlayProps } from '@react-aria/overlays';
-import { useTooltip, useTooltipTrigger } from '@react-aria/tooltip';
-import { Item, Section } from '@react-stately/collections';
-import { useListState, type ListState } from '@react-stately/list';
-import { useOverlayTriggerState, type OverlayTriggerState } from '@react-stately/overlays';
-import type { TooltipTriggerProps } from '@react-stately/tooltip';
-import { useTooltipTriggerState } from '@react-stately/tooltip';
-import type { HoverEvent, Node, ItemProps, SectionProps, LinkDOMProps } 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 * from './types';
+export { useToggleButtonGroup, useToggleButtonGroupItem, type AriaToggleButtonGroupProps, type AriaToggleButtonGroupItemProps, } from '@react-aria/button';
+export * from '@react-stately/collections';
+export * from '@react-stately/data';
+export * from '@react-stately/tree';
+export * from '@react-aria/visually-hidden';
+export * from '@react-aria/separator';
+export * from '@react-aria/overlays';
+export { useOverlayTriggerState, type OverlayTriggerState, } from '@react-stately/overlays';
+export * from '@react-aria/dialog';
+export * from '@react-aria/listbox';
+export * from '@react-stately/list';
+export * from '@react-aria/select';
+export * from '@react-stately/select';
+export * from '@react-aria/menu';
+export * from '@react-stately/menu';
+export * from '@react-aria/toggle';
+export * from '@react-stately/toggle';
+export * from '@react-aria/tag';
+export * from '@react-aria/tooltip';
+export * from '@react-stately/tooltip';
+export * from '@react-aria/datepicker';
+export * from '@react-stately/datepicker';
+export * from '@react-aria/table';
+export * from '@react-stately/table';
+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';
+export * from './behaviors';
+export * from './components';
+export * from './utils';

package/dist/index.js

@@ -1,23 +1,39 @@
-import { useDialog } from "@react-aria/dialog";
-import { I18nProvider, useLocale, useLocalizedStringFormatter } from "@react-aria/i18n";
-import { useListBox, useListBoxSection, useOption } from "@react-aria/listbox";
-import { Overlay, useModalOverlay, useOverlayPosition, useOverlayTrigger, usePopover } from "@react-aria/overlays";
-import { useTooltip, useTooltipTrigger } from "@react-aria/tooltip";
-import { Item, Section } from "@react-stately/collections";
-import { useListState } from "@react-stately/list";
+import { useToggleButtonGroup, useToggleButtonGroupItem } from "@react-aria/button";
+export * from "@react-stately/collections";
+export * from "@react-stately/data";
+export * from "@react-stately/tree";
+export * from "@react-aria/visually-hidden";
+export * from "@react-aria/separator";
+export * from "@react-aria/overlays";
 import { useOverlayTriggerState } from "@react-stately/overlays";
-import { useTooltipTriggerState } from "@react-stately/tooltip";
+export * from "@react-aria/dialog";
+export * from "@react-aria/listbox";
+export * from "@react-stately/list";
+export * from "@react-aria/select";
+export * from "@react-stately/select";
+export * from "@react-aria/menu";
+export * from "@react-stately/menu";
+export * from "@react-aria/toggle";
+export * from "@react-stately/toggle";
+export * from "@react-aria/tag";
+export * from "@react-aria/tooltip";
+export * from "@react-stately/tooltip";
+export * from "@react-aria/datepicker";
+export * from "@react-stately/datepicker";
+export * from "@react-aria/table";
+export * from "@react-stately/table";
+import { useCalendar, useCalendarCell, useCalendarGrid } from "@react-aria/calendar";
+export * from "@react-stately/calendar";
+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";
-import { useTextField } from "./behaviors/useTextField.js";
-import { useToggle } from "./behaviors/useToggle.js";
+import { useSwitch } from "./behaviors/useSwitch.js";
 import { useRadio } from "./behaviors/useRadio.js";
 import { useRadioGroup } from "./behaviors/useRadioGroup.js";
 import { useRadioGroupState } from "./behaviors/useRadioGroupState.js";
 import { useProgressBar } from "./behaviors/useProgressBar.js";
 import { useNumberField } from "./behaviors/useNumberField.js";
-import { useNumberFieldState } from "./behaviors/useNumberFieldState.js";
 import { Text } from "./components/Text/Text.js";
 import { TextContext } from "./components/Text/TextContext.js";
 import { Group } from "./components/Group/Group.js";
@@ -26,7 +42,7 @@ import { Button } from "./components/Button/Button.js";
 import { ButtonContext } from "./components/Button/ButtonContext.js";
 import { Checkbox } from "./components/Checkbox/Checkbox.js";
 import { Link } from "./components/Link/Link.js";
-import { Toggle } from "./components/Toggle/Toggle.js";
+import { Switch } from "./components/Switch/Switch.js";
 import { Radio } from "./components/Radio/Radio.js";
 import { RadioGroup } from "./components/Radio/RadioGroup.js";
 import { RadioContext } from "./components/Radio/RadioContext.js";
@@ -45,53 +61,41 @@ export {
   Checkbox,
   Group,
   GroupContext,
-  I18nProvider,
   Input,
   InputContext,
-  Item,
   Label,
   LabelContext,
   Link,
   NumberField,
-  Overlay,
   ProgressBar,
+  Provider,
   Radio,
   RadioContext,
   RadioGroup,
-  Section,
+  Switch,
   Text,
   TextContext,
   TextField,
   Textarea,
   TextareaContext,
-  Toggle,
+  removeDataAttributes,
   useButton,
+  useCalendar,
+  useCalendarCell,
+  useCalendarGrid,
   useCheckbox,
-  useDialog,
   useGroupContext,
   useInputContext,
   useLink,
-  useListBox,
-  useListBoxSection,
-  useListState,
-  useLocale,
-  useLocalizedStringFormatter,
-  useModalOverlay,
   useNumberField,
-  useNumberFieldState,
-  useOption,
-  useOverlayPosition,
-  useOverlayTrigger,
   useOverlayTriggerState,
-  usePopover,
   useProgressBar,
   useRadio,
   useRadioGroup,
   useRadioGroupState,
-  useTextField,
+  useRenderProps,
+  useSwitch,
   useTextareaContext,
-  useToggle,
-  useTooltip,
-  useTooltipTrigger,
-  useTooltipTriggerState
+  useToggleButtonGroup,
+  useToggleButtonGroupItem
 };

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@koobiq/react-primitives",
-  "version": "0.0.1-beta.9",
+  "version": "0.0.1",
+  "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -9,6 +10,11 @@
       "default": "./dist/index.js"
     }
   },
+  "repository": {
+    "type": "git",
+    "directory": "packages/primitives",
+    "url": "git+https://github.com/koobiq/react-components.git"
+  },
   "type": "module",
   "files": [
     "dist"
@@ -19,27 +25,42 @@
   "sideEffects": false,
   "dependencies": {
     "@react-aria/button": "^3.9.0",
+    "@react-aria/calendar": "^3.8.3",
     "@react-aria/checkbox": "^3.14.0",
+    "@react-aria/datepicker": "^3.14.5",
     "@react-aria/dialog": "^3.5.19",
-    "@react-aria/i18n": "^3.12.4",
-    "@react-aria/link": "^3.7.0",
+    "@react-aria/link": "^3.8.3",
     "@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/overlays": "^3.27.3",
     "@react-aria/progress": "^3.4.17",
     "@react-aria/radio": "^3.10.9",
-    "@react-aria/textfield": "^3.14.0",
+    "@react-aria/select": "^3.15.7",
+    "@react-aria/separator": "^3.4.8",
+    "@react-aria/switch": "^3.7.5",
+    "@react-aria/table": "^3.17.5",
+    "@react-aria/tag": "^3.6.0",
+    "@react-aria/textfield": "^3.17.5",
     "@react-aria/toggle": "^3.10.10",
-    "@react-aria/tooltip": "^3.7.9",
+    "@react-aria/tooltip": "^3.8.5",
     "@react-aria/visually-hidden": "^3.8.0",
-    "@react-stately/collections": "^3.12.2",
+    "@react-stately/calendar": "^3.8.2",
+    "@react-stately/collections": "^3.12.5",
+    "@react-stately/data": "^3.13.0",
+    "@react-stately/datepicker": "^3.14.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/overlays": "^3.6.17",
     "@react-stately/radio": "^3.10.8",
-    "@react-stately/tooltip": "^3.4.13",
-    "@koobiq/logger": "0.0.1-beta.9",
-    "@koobiq/react-core": "0.0.1-beta.9"
+    "@react-stately/select": "^3.6.14",
+    "@react-stately/table": "^3.14.3",
+    "@react-stately/toggle": "^3.7.0",
+    "@react-stately/tooltip": "^3.5.5",
+    "@react-stately/tree": "^3.8.9",
+    "@koobiq/logger": "0.0.1",
+    "@koobiq/react-core": "0.0.1"
   },
   "peerDependencies": {
     "react": "18.x || 19.x",

package/dist/behaviors/useNumberFieldState.d.ts

@@ -1,25 +0,0 @@
-import type { ExtendableProps } from '@koobiq/react-core';
-import type { NumberFieldStateOptions } from '@react-stately/numberfield';
-export type UseNumberFieldStateProps = ExtendableProps<{
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     * */
-    disabled?: boolean;
-    /** It prevents the user from changing the value of the checkbox.
-     * @default false
-     */
-    readonly?: boolean;
-    /**
-     * If `true`, the input element is required.
-     * @default false
-     * */
-    required?: boolean;
-    /**
-     * If `true`, the component will indicate an error.
-     * @default false
-     * */
-    error?: boolean;
-}, Omit<NumberFieldStateOptions, 'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid'>>;
-export declare function useNumberFieldState(props: UseNumberFieldStateProps): import("@react-stately/numberfield").NumberFieldState;
-export type UseNumberFieldStateReturn = ReturnType<typeof useNumberFieldState>;

package/dist/behaviors/useNumberFieldState.js

@@ -1,13 +0,0 @@
-import { useNumberFieldState as useNumberFieldState$1 } from "@react-stately/numberfield";
-function useNumberFieldState(props) {
-  return useNumberFieldState$1({
-    ...props,
-    isInvalid: props.error || false,
-    isReadOnly: props.readonly || false,
-    isDisabled: props.disabled || false,
-    isRequired: props.required || false
-  });
-}
-export {
-  useNumberFieldState
-};

package/dist/behaviors/useTextField.d.ts

@@ -1,19 +0,0 @@
-import type { RefObject } from 'react';
-import type { AriaTextFieldOptions } from '@react-aria/textfield';
-export type UseTextFieldProps = {
-    error?: boolean;
-    readonly?: boolean;
-    required?: boolean;
-    disabled?: boolean;
-    inputElementType?: 'input' | 'textarea';
-} & Omit<AriaTextFieldOptions<'input' | 'textarea'>, 'isDisabled' | 'isInvalid' | 'isRequired' | 'isReadOnly'>;
-export declare function useTextField(props: UseTextFieldProps, ref: RefObject<HTMLInputElement | HTMLTextAreaElement | null>): {
-    inputProps: import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> | import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>;
-    labelProps: import("@react-types/shared").DOMAttributes | import("react").LabelHTMLAttributes<HTMLLabelElement>;
-    descriptionProps: import("@react-types/shared").DOMAttributes;
-    errorMessageProps: import("@react-types/shared").DOMAttributes;
-    validationErrors: string[];
-    validationDetails: ValidityState;
-    error: boolean;
-};
-export type UseTextFieldReturn = ReturnType<typeof useTextField>;

package/dist/behaviors/useTextField.js

@@ -1,24 +0,0 @@
-"use client";
-import { useTextField as useTextField$1 } from "@react-aria/textfield";
-function useTextField(props, ref) {
-  const { disabled, error, label, readonly, required, ...other } = props;
-  const { isInvalid, ...textFieldProps } = useTextField$1(
-    {
-      isDisabled: disabled,
-      isReadOnly: readonly,
-      isRequired: required,
-      isInvalid: error,
-      label,
-      errorMessage: error ? label : void 0,
-      ...other
-    },
-    ref
-  );
-  return {
-    error: isInvalid,
-    ...textFieldProps
-  };
-}
-export {
-  useTextField
-};

package/dist/behaviors/useToggle.d.ts

@@ -1,44 +0,0 @@
-import type { RefObject } from 'react';
-import type { ExtendableProps } from '@koobiq/react-core';
-import type { AriaToggleProps } from '@react-aria/toggle';
-export type UseToggleProps = ExtendableProps<{
-    /**
-     * If `true`, the component will indicate an error.
-     * @default false
-     * */
-    error?: boolean;
-    /**
-     * If `true`, the component is checked.
-     * @default false
-     * */
-    checked?: boolean;
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     * */
-    disabled?: boolean;
-    /**
-     * If `true`, the input element is required.
-     * @default false
-     * */
-    required?: 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<AriaToggleProps, 'isRequired' | 'isInvalid' | 'isReadOnly' | 'isSelected' | 'isDisabled' | 'defaultSelected' | 'onChange'>>;
-export declare function useToggle(props: UseToggleProps, ref: RefObject<HTMLInputElement | null>): {
-    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>;
-    };
-    error: boolean;
-    pressed: boolean;
-    hovered: boolean;
-    focused: boolean;
-    checked: boolean;
-    disabled: boolean;
-    readonly: boolean;
-    focusVisible: boolean;
-};
-export type UseToggleReturn = ReturnType<typeof useToggle>;

package/dist/behaviors/useToggle.js

@@ -1,54 +0,0 @@
-"use client";
-import { useToggleState, useHover, useFocusRing, mergeProps } from "@koobiq/react-core";
-import { useToggle as useToggle$1 } from "@react-aria/toggle";
-function useToggle(props, ref) {
-  const { error, checked, disabled, required, defaultChecked, onChange } = props;
-  const state = useToggleState({
-    isSelected: checked,
-    defaultSelected: defaultChecked,
-    onChange
-  });
-  const { hoverProps, isHovered } = useHover({
-    isDisabled: disabled
-  });
-  const { focusProps, isFocused, isFocusVisible } = useFocusRing();
-  const {
-    labelProps: commonLabelProps,
-    inputProps: commonInputProps,
-    isInvalid,
-    isDisabled,
-    isSelected,
-    isReadOnly,
-    isPressed,
-    ...other
-  } = useToggle$1(
-    {
-      ...props,
-      isInvalid: error,
-      isDisabled: disabled,
-      isRequired: required
-    },
-    state,
-    ref
-  );
-  const labelProps = mergeProps(hoverProps, commonLabelProps);
-  const inputProps = mergeProps(focusProps, commonInputProps, {
-    ref
-  });
-  return {
-    labelProps,
-    inputProps,
-    error: isInvalid,
-    pressed: isPressed,
-    hovered: isHovered,
-    focused: isFocused,
-    checked: isSelected,
-    disabled: isDisabled,
-    readonly: isReadOnly,
-    focusVisible: isFocusVisible,
-    ...other
-  };
-}
-export {
-  useToggle
-};

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

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

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

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

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

@@ -1,18 +0,0 @@
-import type { RefObject } from 'react';
-import type { ExtendableProps } from '@koobiq/react-core';
-import type { UseToggleProps } from '../../behaviors';
-import type { RenderProps } from '../../utils';
-export type ToggleRenderProps = {
-    error?: boolean;
-    pressed?: boolean;
-    checked?: boolean;
-    hovered?: boolean;
-    focused?: boolean;
-    disabled?: boolean;
-    focusVisible?: boolean;
-};
-type ToggleBaseProps = RenderProps<ToggleRenderProps> & {
-    inputRef?: RefObject<HTMLInputElement | null>;
-};
-export type ToggleProps = ExtendableProps<ToggleBaseProps, UseToggleProps>;
-export {};

package/dist/types.d.ts

@@ -1,8 +0,0 @@
-import type { ElementType } from 'react';
-import type { AriaButtonOptions } from '@react-aria/button';
-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'];
-};