@octanejs/aria 0.0.48 → 0.0.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/aria",
-  "version": "0.0.48",
+  "version": "0.0.50",
   "license": "MIT AND Apache-2.0",
   "type": "module",
   "sideEffects": [
@@ -53,10 +53,10 @@
     "clsx": "^2.1.1"
   },
   "peerDependencies": {
-    "octane": "^0.1.51 || ^0.2.0"
+    "octane": "^0.1.51 || ^0.2.0 || ^0.3.0"
   },
   "devDependencies": {
-    "@tsrx/react": "^0.2.71",
+    "@tsrx/react": "^0.3.0",
     "esbuild": "^0.28.1",
     "react": "19.2.7",
     "react-aria": "3.51.0",
@@ -65,7 +65,7 @@
     "react-stately": "3.49.0",
     "typescript": "^5.9.3",
     "vitest": "^4.1.10",
-    "octane": "0.2.8"
+    "octane": "0.3.1"
   },
   "scripts": {
     "exports:check": "node scripts/check-react-aria-components-exports.mjs",

package/src/calendar/useCalendar.tsx

@@ -12,9 +12,9 @@
  * governing permissions and limitations under the License.
  */
 
-import { AriaLabelingProps, DOMProps } from '@react-types/shared';
-import { CalendarAria, useCalendarBase } from './useCalendarBase';
-import {
+import type { AriaLabelingProps, DOMProps } from '@react-types/shared';
+import { type CalendarAria, useCalendarBase } from './useCalendarBase';
+import type {
 	CalendarProps,
 	CalendarSelectionMode,
 	CalendarState,

package/src/calendar/useCalendarBase.tsx

@@ -13,9 +13,9 @@
  */
 
 import { announce } from '../live-announcer/LiveAnnouncer';
-import { AriaButtonProps } from '../button/useButton';
-import { AriaLabelingProps, DOMAttributes, DOMProps } from '@react-types/shared';
-import {
+import type { AriaButtonProps } from '../button/useButton';
+import type { AriaLabelingProps, DOMAttributes, DOMProps } from '@react-types/shared';
+import type {
 	CalendarPropsBase,
 	CalendarSelectionMode,
 	CalendarState,
@@ -24,7 +24,7 @@ import { filterDOMProps } from '../utils/filterDOMProps';
 import { hookData, useSelectedDateDescription, useVisibleRangeDescription } from './utils';
 import intlMessages from '../intl/calendar/index';
 import { mergeProps } from '../utils/mergeProps';
-import { RangeCalendarState } from '../upstream-exports/react-stately/useRangeCalendarState';
+import type { RangeCalendarState } from '../upstream-exports/react-stately/useRangeCalendarState';
 import { useLabels } from '../utils/useLabels';
 import { useLocalizedStringFormatter } from '../i18n/useLocalizedStringFormatter';
 import { useSlotId } from '../utils/useId';

package/src/calendar/useCalendarCell.tsx

@@ -13,11 +13,11 @@
  */
 
 import { CalendarDate, isEqualDay, isSameDay, isToday } from '@internationalized/date';
-import {
+import type {
 	CalendarSelectionMode,
 	CalendarState,
 } from '../upstream-exports/react-stately/useCalendarState';
-import { DOMAttributes, RefObject } from '@react-types/shared';
+import type { DOMAttributes, RefObject } from '@react-types/shared';
 import { focusWithoutScrolling } from '../utils/focusWithoutScrolling';
 import { getActiveElement, getEventTarget } from '../utils/shadowdom/DOMFunctions';
 import { getEraFormat, hookData } from './utils';
@@ -25,7 +25,7 @@ import { getInteractionModality } from '../interactions/useFocusVisible';
 import { getScrollParent } from '../utils/getScrollParent';
 import intlMessages from '../intl/calendar/index';
 import { mergeProps } from '../utils/mergeProps';
-import { RangeCalendarState } from '../upstream-exports/react-stately/useRangeCalendarState';
+import type { RangeCalendarState } from '../upstream-exports/react-stately/useRangeCalendarState';
 import { scrollIntoViewport } from '../utils/scrollIntoView';
 import { useDateFormatter } from '../i18n/useDateFormatter';
 import { useDeepMemo } from '../utils/useDeepMemo';

package/src/calendar/useCalendarGrid.tsx

@@ -13,14 +13,14 @@
  */
 
 import { CalendarDate, startOfWeek, today } from '@internationalized/date';
-import {
+import type {
 	CalendarSelectionMode,
 	CalendarState,
 } from '../upstream-exports/react-stately/useCalendarState';
-import { DOMAttributes } from '@react-types/shared';
+import type { DOMAttributes } from '@react-types/shared';
 import { hookData, useVisibleRangeDescription } from './utils';
 import { mergeProps } from '../utils/mergeProps';
-import { RangeCalendarState } from '../upstream-exports/react-stately/useRangeCalendarState';
+import type { RangeCalendarState } from '../upstream-exports/react-stately/useRangeCalendarState';
 import { useDateFormatter } from '../i18n/useDateFormatter';
 import { useKeyboard } from '../interactions/useKeyboard';
 import { useLabels } from '../utils/useLabels';

package/src/calendar/useCalendarHeading.tsx

@@ -12,12 +12,12 @@
  * governing permissions and limitations under the License.
  */
 
-import {
+import type {
 	CalendarSelectionMode,
 	CalendarState,
 } from '../upstream-exports/react-stately/useCalendarState';
-import { DateDuration } from '@internationalized/date';
-import { RangeCalendarState } from '../upstream-exports/react-stately/useRangeCalendarState';
+import type { DateDuration } from '@internationalized/date';
+import type { RangeCalendarState } from '../upstream-exports/react-stately/useRangeCalendarState';
 import { useDateFormatter } from '../i18n/useDateFormatter';
 import { useMemo } from '../compat/react';
 

package/src/calendar/useCalendarMonthPicker.tsx

@@ -13,12 +13,12 @@
  */
 
 import { CalendarDate } from '@internationalized/date';
-import {
+import type {
 	CalendarSelectionMode,
 	CalendarState,
 } from '../upstream-exports/react-stately/useCalendarState';
-import { Key } from '@react-types/shared';
-import { RangeCalendarState } from '../upstream-exports/react-stately/useRangeCalendarState';
+import type { Key } from '@react-types/shared';
+import type { RangeCalendarState } from '../upstream-exports/react-stately/useRangeCalendarState';
 import { useDateFormatter } from '../i18n/useDateFormatter';
 import { useLocale } from '../i18n/I18nProvider';
 import { useMemo } from '../compat/react';

package/src/calendar/useCalendarYearPicker.tsx

@@ -13,12 +13,12 @@
  */
 
 import { CalendarDate, isSameYear, toCalendarDate } from '@internationalized/date';
-import {
+import type {
 	CalendarSelectionMode,
 	CalendarState,
 } from '../upstream-exports/react-stately/useCalendarState';
-import { Key } from '@react-types/shared';
-import { RangeCalendarState } from '../upstream-exports/react-stately/useRangeCalendarState';
+import type { Key } from '@react-types/shared';
+import type { RangeCalendarState } from '../upstream-exports/react-stately/useRangeCalendarState';
 import { useDateFormatter } from '../i18n/useDateFormatter';
 import { useLocale } from '../i18n/I18nProvider';
 import { useMemo } from '../compat/react';

package/src/calendar/useRangeCalendar.tsx

@@ -12,14 +12,14 @@
  * governing permissions and limitations under the License.
  */
 
-import { AriaLabelingProps, DOMProps, FocusableElement, RefObject } from '@react-types/shared';
-import { CalendarAria, useCalendarBase } from './useCalendarBase';
-import {
+import type { AriaLabelingProps, DOMProps, FocusableElement, RefObject } from '@react-types/shared';
+import { type CalendarAria, useCalendarBase } from './useCalendarBase';
+import type {
 	DateValue,
 	RangeCalendarState,
 } from '../upstream-exports/react-stately/useRangeCalendarState';
 import { isFocusWithin, nodeContains } from '../utils/shadowdom/DOMFunctions';
-import { RangeCalendarProps } from '../upstream-exports/react-stately/useRangeCalendarState';
+import type { RangeCalendarProps } from '../upstream-exports/react-stately/useRangeCalendarState';
 import { useEvent } from '../utils/useEvent';
 import { useRef } from '../compat/react';
 

package/src/calendar/utils.tsx

@@ -19,13 +19,13 @@ import {
 	isSameDay,
 	startOfMonth,
 } from '@internationalized/date';
-import {
+import type {
 	CalendarSelectionMode,
 	CalendarState,
 } from '../upstream-exports/react-stately/useCalendarState';
 import intlMessages from '../intl/calendar/index';
 import type { LocalizedStringFormatter } from '@internationalized/string';
-import { RangeCalendarState } from '../upstream-exports/react-stately/useRangeCalendarState';
+import type { RangeCalendarState } from '../upstream-exports/react-stately/useRangeCalendarState';
 import { useDateFormatter } from '../i18n/useDateFormatter';
 import { useLocale } from '../i18n/I18nProvider';
 import { useLocalizedStringFormatter } from '../i18n/useLocalizedStringFormatter';

package/src/collections/CollectionBuilder.ts

@@ -80,7 +80,7 @@ export function CollectionBuilder<C extends BaseCollection<any>>(
 		null,
 		createElement(Hidden, {
 			target: document.getRootElement(),
-			children: createElement(CollectionDocumentContext.Provider, {
+			children: createElement(CollectionDocumentContext, {
 				value: document,
 				children: props.content,
 			}),
@@ -207,7 +207,7 @@ function useSSRCollectionNode<T extends Element>(
 			parentNode.ownerDocument.nodesByProps.set(props, element);
 		}
 
-		return children ? createElement(SSRContext.Provider, { value: element, children }) : null;
+		return children ? createElement(SSRContext, { value: element, children }) : null;
 	}
 
 	// The placeholder tag is the node type (`<item>`/`<section>`-style) — a valid
@@ -240,7 +240,7 @@ export function createLeafComponent<T, P extends object, E extends Element>(
 			null,
 			(node) =>
 				// Forward FocusableContext to real DOM tree so tooltips work.
-				createElement(FocusableContext.Provider, {
+				createElement(FocusableContext, {
 					value: focusableProps,
 					children: createElement(Component, { node }),
 				}),
@@ -312,7 +312,7 @@ export function Collection<T>(props: CollectionProps<T>): any {
 		subSlot(slot, 'ctx'),
 	);
 
-	return createElement(CollectionContext.Provider, { value: ctx, children });
+	return createElement(CollectionContext, { value: ctx, children });
 }
 
 function CollectionRoot(props: { children: any }): any {
@@ -320,9 +320,9 @@ function CollectionRoot(props: { children: any }): any {
 	let doc = useContext(CollectionDocumentContext);
 	let wrappedChildren = useMemo(
 		() =>
-			createElement(CollectionDocumentContext.Provider, {
+			createElement(CollectionDocumentContext, {
 				value: null,
-				children: createElement(ShallowRenderContext.Provider, {
+				children: createElement(ShallowRenderContext, {
 					value: doc,
 					children: props.children,
 				}),
@@ -338,6 +338,6 @@ function CollectionRoot(props: { children: any }): any {
 	// container, so the placeholders land in the walked tree directly.
 	let isSSR = useIsSSR(subSlot(slot, 'ssr'));
 	return isSSR
-		? createElement(SSRContext.Provider, { value: doc, children: wrappedChildren })
+		? createElement(SSRContext, { value: doc, children: wrappedChildren })
 		: wrappedChildren;
 }

package/src/collections/Hidden.ts

@@ -35,7 +35,7 @@ export function Hidden(props: { children: any; target?: Element | null }): any {
 		return props.children;
 	}
 
-	let children = createElement(HiddenContext.Provider, {
+	let children = createElement(HiddenContext, {
 		value: true,
 		children: props.children,
 	});

package/src/color/useColorArea.tsx

@@ -12,19 +12,19 @@
  * governing permissions and limitations under the License.
  */
 
-import { AriaLabelingProps, DOMAttributes, DOMProps, RefObject } from '@react-types/shared';
-import {
+import type { AriaLabelingProps, DOMAttributes, DOMProps, RefObject } from '@react-types/shared';
+import type {
 	ColorAreaProps,
 	ColorAreaState,
 } from '../upstream-exports/react-stately/useColorAreaState';
-import { ColorChannel } from '../upstream-exports/react-stately/Color';
+import type { ColorChannel } from '../upstream-exports/react-stately/Color';
 import { focusWithoutScrolling } from '../utils/focusWithoutScrolling';
 import intlMessages from '../intl/color/index';
 import { isAndroid, isIOS } from '../utils/platform';
 import { mergeProps } from '../utils/mergeProps';
 import React, {
-	ChangeEvent,
-	InputHTMLAttributes,
+	type ChangeEvent,
+	type InputHTMLAttributes,
 	useCallback,
 	useRef,
 	useState,

package/src/color/useColorAreaGradient.tsx

@@ -12,10 +12,10 @@
  * governing permissions and limitations under the License.
  */
 
-import { Color, ColorChannel } from '../upstream-exports/react-stately/Color';
+import type { Color, ColorChannel } from '../upstream-exports/react-stately/Color';
 
-import { ColorAreaState } from '../upstream-exports/react-stately/useColorAreaState';
-import { CSSProperties, useMemo } from '../compat/react';
+import type { ColorAreaState } from '../upstream-exports/react-stately/useColorAreaState';
+import { type CSSProperties, useMemo } from '../compat/react';
 import { parseColor } from '../upstream-exports/react-stately/Color';
 
 const hue = (color: Color) =>

package/src/color/useColorChannelField.tsx

@@ -12,12 +12,12 @@
  * governing permissions and limitations under the License.
  */
 
-import { AriaLabelingProps, RefObject } from '@react-types/shared';
-import {
+import type { AriaLabelingProps, RefObject } from '@react-types/shared';
+import type {
 	ColorChannelFieldProps,
 	ColorChannelFieldState,
 } from '../upstream-exports/react-stately/useColorFieldState';
-import { NumberFieldAria, useNumberField } from '../numberfield/useNumberField';
+import { type NumberFieldAria, useNumberField } from '../numberfield/useNumberField';
 import { useLocale } from '../i18n/I18nProvider';
 
 export interface AriaColorChannelFieldProps extends ColorChannelFieldProps, AriaLabelingProps {}

package/src/color/useColorField.tsx

@@ -12,7 +12,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {
+import type {
 	AriaLabelingProps,
 	AriaValidationProps,
 	DOMAttributes,
@@ -21,14 +21,14 @@ import {
 	TextInputDOMProps,
 	ValidationResult,
 } from '@react-types/shared';
-import {
+import type {
 	ColorFieldProps,
 	ColorFieldState,
 } from '../upstream-exports/react-stately/useColorFieldState';
 import {
-	InputHTMLAttributes,
-	LabelHTMLAttributes,
-	RefObject,
+	type InputHTMLAttributes,
+	type LabelHTMLAttributes,
+	type RefObject,
 	useCallback,
 	useState,
 } from '../compat/react';

package/src/color/useColorSlider.tsx

@@ -12,18 +12,18 @@
  * governing permissions and limitations under the License.
  */
 
-import {
+import type {
 	AriaLabelingProps,
 	DOMAttributes,
 	DOMProps,
 	InputDOMProps,
 	RefObject,
 } from '@react-types/shared';
-import {
+import type {
 	ColorSliderProps,
 	ColorSliderState,
 } from '../upstream-exports/react-stately/useColorSliderState';
-import { InputHTMLAttributes } from '../compat/react';
+import type { InputHTMLAttributes } from '../compat/react';
 import { mergeProps } from '../utils/mergeProps';
 import { useLocale } from '../i18n/I18nProvider';
 import { useSlider } from '../slider/useSlider';

package/src/color/useColorSwatch.tsx

@@ -12,10 +12,10 @@
  * governing permissions and limitations under the License.
  */
 
-import { AriaLabelingProps, DOMProps } from '@react-types/shared';
-import { Color } from '../upstream-exports/react-stately/Color';
+import type { AriaLabelingProps, DOMProps } from '@react-types/shared';
+import type { Color } from '../upstream-exports/react-stately/Color';
 import { filterDOMProps } from '../utils/filterDOMProps';
-import { HTMLAttributes, useMemo } from '../compat/react';
+import { type HTMLAttributes, useMemo } from '../compat/react';
 import intlMessages from '../intl/color/index';
 import { parseColor } from '../upstream-exports/react-stately/Color';
 import { useId } from '../utils/useId';

package/src/color/useColorWheel.tsx

@@ -12,21 +12,26 @@
  * governing permissions and limitations under the License.
  */
 
-import {
+import type {
 	AriaLabelingProps,
 	DOMAttributes,
 	DOMProps,
 	InputDOMProps,
 	RefObject,
 } from '@react-types/shared';
-import {
+import type {
 	ColorWheelProps,
 	ColorWheelState,
 } from '../upstream-exports/react-stately/useColorWheelState';
 import { focusWithoutScrolling } from '../utils/focusWithoutScrolling';
 import { getEventTarget } from '../utils/shadowdom/DOMFunctions';
 import { mergeProps } from '../utils/mergeProps';
-import React, { ChangeEvent, InputHTMLAttributes, useCallback, useRef } from '../compat/react';
+import React, {
+	type ChangeEvent,
+	type InputHTMLAttributes,
+	useCallback,
+	useRef,
+} from '../compat/react';
 import { useFormReset } from '../utils/useFormReset';
 import { useGlobalListeners } from '../utils/useGlobalListeners';
 import { useKeyboard } from '../interactions/useKeyboard';

package/src/combobox/useComboBox.tsx

@@ -14,9 +14,9 @@ type DOMAttributes = Record<string, any>;
  */
 
 import { announce } from '../live-announcer/LiveAnnouncer';
-import { AriaButtonProps } from '../button/useButton';
+import type { AriaButtonProps } from '../button/useButton';
 import { ariaHideOutside } from '../overlays/ariaHideOutside';
-import {
+import type {
 	AriaLabelingProps,
 	DOMProps,
 	InputDOMProps,
@@ -27,18 +27,18 @@ import {
 	RouterOptions,
 	ValidationResult,
 } from '@react-types/shared';
-import { AriaListBoxOptions } from '../listbox/useListBox';
+import type { AriaListBoxOptions } from '../listbox/useListBox';
 import { chain } from '../utils/chain';
-import {
+import type {
 	ComboBoxProps,
 	ComboBoxState,
 	SelectionMode,
 } from '../upstream-exports/react-stately/useComboBoxState';
 import { dispatchVirtualFocus } from '../focus/virtualFocus';
 import {
-	ElementType,
-	InputHTMLAttributes,
-	TouchEvent,
+	type ElementType,
+	type InputHTMLAttributes,
+	type TouchEvent,
 	useEffect,
 	useMemo,
 	useRef,

package/src/components/Breadcrumbs.ts

@@ -80,7 +80,7 @@ export function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>): any {
 				slot: props.slot || undefined,
 				style: props.style,
 				className: props.className ?? 'react-aria-Breadcrumbs',
-				children: createElement(BreadcrumbsContext.Provider, {
+				children: createElement(BreadcrumbsContext, {
 					value: props,
 					children: createElement(CollectionRoot, { collection }),
 				}),
@@ -161,7 +161,7 @@ export const Breadcrumb: (props: BreadcrumbProps & { ref?: any }) => any = creat
 			ref,
 			'data-disabled': isDisabled || isCurrent || undefined,
 			'data-current': isCurrent || undefined,
-			children: createElement(LinkContext.Provider, {
+			children: createElement(LinkContext, {
 				value: linkProps as any,
 				children: renderProps.children,
 			}),

package/src/components/Button.ts

@@ -183,7 +183,7 @@ export const Button = /*#__PURE__*/ createHideableComponent(function Button(
 		'data-focused': isFocused || undefined,
 		'data-pending': isPending || undefined,
 		'data-focus-visible': isFocusVisible || undefined,
-		children: createElement(ProgressBarContext.Provider, {
+		children: createElement(ProgressBarContext, {
 			value: { id: progressId },
 			children: renderProps.children,
 		}),

package/src/components/Calendar.tsx

@@ -12,12 +12,12 @@
  * governing permissions and limitations under the License.
  */
 import {
-	CalendarHeadingProps as AriaCalendarHeadingProps,
-	CalendarMonthPickerProps as AriaCalendarMonthPickerProps,
-	AriaCalendarProps,
-	CalendarYearPickerProps as AriaCalendarYearPickerProps,
-	CalendarMonthPickerAria,
-	CalendarYearPickerAria,
+	type CalendarHeadingProps as AriaCalendarHeadingProps,
+	type CalendarMonthPickerProps as AriaCalendarMonthPickerProps,
+	type AriaCalendarProps,
+	type CalendarYearPickerProps as AriaCalendarYearPickerProps,
+	type CalendarMonthPickerAria,
+	type CalendarYearPickerAria,
 	useCalendar,
 	useCalendarCell,
 	useCalendarGrid,
@@ -26,44 +26,44 @@ import {
 	useCalendarYearPicker,
 } from '../upstream-exports/react-aria/useCalendar';
 import {
-	AriaRangeCalendarProps,
+	type AriaRangeCalendarProps,
 	useRangeCalendar,
 } from '../upstream-exports/react-aria/useRangeCalendar';
 import { ButtonContext } from './Button';
 import {
 	CalendarDate,
-	CalendarIdentifier,
+	type CalendarIdentifier,
 	createCalendar,
-	DateDuration,
+	type DateDuration,
 	endOfMonth,
-	Calendar as ICalendar,
+	type Calendar as ICalendar,
 	isSameDay,
 	isSameMonth,
 	isToday,
 } from '@internationalized/date';
-import {
+import type {
 	CalendarSelectionMode,
 	CalendarState,
 } from '../upstream-exports/react-stately/useCalendarState';
 import {
-	ClassNameOrFunction,
-	ContextValue,
+	type ClassNameOrFunction,
+	type ContextValue,
 	dom,
-	DOMProps,
-	DOMRenderProps,
+	type DOMProps,
+	type DOMRenderProps,
 	Provider,
-	RenderProps,
-	SlotProps,
-	StyleProps,
+	type RenderProps,
+	type SlotProps,
+	type StyleProps,
 	useContextProps,
 	useRenderProps,
 	useSlottedContext,
 } from './utils';
 import {
-	DateValue,
+	type DateValue,
 	useRangeCalendarState,
 } from '../upstream-exports/react-stately/useRangeCalendarState';
-import {
+import type {
 	DOMAttributes,
 	FocusableElement,
 	forwardRefType,
@@ -71,15 +71,15 @@ import {
 	HoverEvents,
 } from '@react-types/shared';
 import { filterDOMProps } from '../upstream-exports/react-aria/filterDOMProps';
-import { Heading, HeadingContext, HeadingProps } from './Heading';
+import { Heading, HeadingContext, type HeadingProps } from './Heading';
 import { mergeProps } from '../upstream-exports/react-aria/mergeProps';
-import { RangeCalendarState } from '../upstream-exports/react-stately/useRangeCalendarState';
+import type { RangeCalendarState } from '../upstream-exports/react-stately/useRangeCalendarState';
 import React, {
 	createContext,
-	ForwardedRef,
+	type ForwardedRef,
 	forwardRef,
-	JSX,
-	ReactElement,
+	type JSX,
+	type ReactElement,
 	useContext,
 	useRef,
 } from '../compat/react';
@@ -523,9 +523,7 @@ export const CalendarGrid = /*#__PURE__*/ (forwardRef as any)(function CalendarG
 	let DOMProps = filterDOMProps(props, { global: true });
 
 	return (
-		<InternalCalendarGridContext.Provider
-			value={{ headerProps, weekDays, startDate, weeksInMonth }}
-		>
+		<InternalCalendarGridContext value={{ headerProps, weekDays, startDate, weeksInMonth }}>
 			<dom.table
 				render={props.render}
 				{...mergeProps(DOMProps, gridProps)}
@@ -545,7 +543,7 @@ export const CalendarGrid = /*#__PURE__*/ (forwardRef as any)(function CalendarG
 					</>
 				)}
 			</dom.table>
-		</InternalCalendarGridContext.Provider>
+		</InternalCalendarGridContext>
 	);
 });
 

package/src/components/Checkbox.ts

@@ -496,7 +496,7 @@ export function Checkbox(props: CheckboxProps): any {
 	);
 	let [aria, inputRef] = useCheckboxAria(props, userProvidedInputRef, subSlot(slot, 'aria'));
 
-	return createElement(InternalCheckboxContext.Provider, {
+	return createElement(InternalCheckboxContext, {
 		value: {
 			...aria,
 			inputRef,

package/src/components/ColorArea.tsx

@@ -1,25 +1,25 @@
 /** @jsxImportSource octane */
 // Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria-components/src/ColorArea.tsx).
-import { AriaColorAreaProps, useColorArea } from '../upstream-exports/react-aria/useColorArea';
+import { type AriaColorAreaProps, useColorArea } from '../upstream-exports/react-aria/useColorArea';
 import {
-	ClassNameOrFunction,
-	ContextValue,
+	type ClassNameOrFunction,
+	type ContextValue,
 	dom,
 	Provider,
-	RenderProps,
-	SlotProps,
+	type RenderProps,
+	type SlotProps,
 	useContextProps,
 	useRenderProps,
 } from './utils';
 import {
-	ColorAreaState,
+	type ColorAreaState,
 	useColorAreaState,
 } from '../upstream-exports/react-stately/useColorAreaState';
 import { filterDOMProps } from '../upstream-exports/react-aria/filterDOMProps';
-import { GlobalDOMAttributes } from '@react-types/shared';
+import type { GlobalDOMAttributes } from '@react-types/shared';
 import { InternalColorThumbContext } from './ColorThumb';
 import { mergeProps } from '../upstream-exports/react-aria/mergeProps';
-import React, { createContext, ForwardedRef, forwardRef, useRef } from '../compat/react';
+import React, { createContext, type ForwardedRef, forwardRef, useRef } from '../compat/react';
 
 export interface ColorAreaRenderProps {
 	/**