@codefast/ui 0.3.16-canary.3 → 0.4.0-canary.4

package/src/index.ts

@@ -1,19 +1,12 @@
-export {
-  Accordion,
-  AccordionContent,
-  AccordionIcon,
-  AccordionItem,
-  AccordionTrigger,
-} from "#/components/accordion";
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "#/components/accordion";
 export type {
   AccordionContentProps,
-  AccordionIconProps,
   AccordionItemProps,
   AccordionProps,
   AccordionTriggerProps,
 } from "#/components/accordion";
-export { Alert, AlertDescription, AlertTitle } from "#/components/alert";
-export type { AlertDescriptionProps, AlertProps, AlertTitleProps } from "#/components/alert";
+export { Alert, AlertAction, AlertDescription, AlertTitle } from "#/components/alert";
+export type { AlertActionProps, AlertDescriptionProps, AlertProps, AlertTitleProps } from "#/components/alert";
 export {
   AlertDialog,
   AlertDialogAction,
@@ -23,6 +16,7 @@ export {
   AlertDialogDescription,
   AlertDialogFooter,
   AlertDialogHeader,
+  AlertDialogMedia,
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "#/components/alert-dialog";
@@ -34,22 +28,26 @@ export type {
   AlertDialogDescriptionProps,
   AlertDialogFooterProps,
   AlertDialogHeaderProps,
+  AlertDialogMediaProps,
   AlertDialogProps,
   AlertDialogTitleProps,
   AlertDialogTriggerProps,
 } from "#/components/alert-dialog";
 export { AspectRatio } from "#/components/aspect-ratio";
 export type { AspectRatioProps } from "#/components/aspect-ratio";
-export { Avatar, AvatarFallback, AvatarImage } from "#/components/avatar";
-export type { AvatarFallbackProps, AvatarImageProps, AvatarProps } from "#/components/avatar";
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from "#/components/avatar";
+export type {
+  AvatarBadgeProps,
+  AvatarFallbackProps,
+  AvatarGroupCountProps,
+  AvatarGroupProps,
+  AvatarImageProps,
+  AvatarProps,
+} from "#/components/avatar";
 export { Badge } from "#/components/badge";
 export type { BadgeProps } from "#/components/badge";
 export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from "#/components/button-group";
-export type {
-  ButtonGroupProps,
-  ButtonGroupSeparatorProps,
-  ButtonGroupTextProps,
-} from "#/components/button-group";
+export type { ButtonGroupProps, ButtonGroupSeparatorProps, ButtonGroupTextProps } from "#/components/button-group";
 export {
   Breadcrumb,
   BreadcrumbEllipsis,
@@ -71,15 +69,7 @@ export type {
 export { Button } from "#/components/button";
 export type { ButtonProps } from "#/components/button";
 export { Calendar, CalendarDayButton } from "#/components/calendar";
-export {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "#/components/card";
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "#/components/card";
 export type {
   CardActionProps,
   CardContentProps,
@@ -130,11 +120,7 @@ export type { CheckboxCardsItemProps, CheckboxCardsProps } from "#/components/ch
 export { CheckboxGroup, CheckboxGroupItem } from "#/components/checkbox-group";
 export type { CheckboxGroupItemProps, CheckboxGroupProps } from "#/components/checkbox-group";
 export { Collapsible, CollapsibleContent, CollapsibleTrigger } from "#/components/collapsible";
-export type {
-  CollapsibleContentProps,
-  CollapsibleProps,
-  CollapsibleTriggerProps,
-} from "#/components/collapsible";
+export type { CollapsibleContentProps, CollapsibleProps, CollapsibleTriggerProps } from "#/components/collapsible";
 export {
   Command,
   CommandDialog,
@@ -215,9 +201,10 @@ export type {
   DialogTitleProps,
   DialogTriggerProps,
 } from "#/components/dialog";
+export { DirectionProvider, useDirection } from "#/components/direction";
+export type { DirectionProviderProps } from "#/components/direction";
 export {
   Drawer,
-  DrawerBody,
   DrawerClose,
   DrawerContent,
   DrawerDescription,
@@ -227,7 +214,6 @@ export {
   DrawerTrigger,
 } from "#/components/drawer";
 export type {
-  DrawerBodyProps,
   DrawerCloseProps,
   DrawerContentProps,
   DrawerDescriptionProps,
@@ -271,14 +257,7 @@ export type {
   DropdownMenuSubTriggerProps,
   DropdownMenuTriggerProps,
 } from "#/components/dropdown-menu";
-export {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from "#/components/empty";
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "#/components/empty";
 export type {
   EmptyContentProps,
   EmptyDescriptionProps,
@@ -330,12 +309,7 @@ export type {
   FormMessageProps,
   FormProps,
 } from "#/components/form";
-export {
-  HoverCard,
-  HoverCardArrow,
-  HoverCardContent,
-  HoverCardTrigger,
-} from "#/components/hover-card";
+export { HoverCard, HoverCardArrow, HoverCardContent, HoverCardTrigger } from "#/components/hover-card";
 export type {
   HoverCardArrowProps,
   HoverCardContentProps,
@@ -448,25 +422,25 @@ export type {
 export {
   NavigationMenu,
   NavigationMenuContent,
+  NavigationMenuIndicator,
   NavigationMenuItem,
   NavigationMenuLink,
   NavigationMenuList,
   NavigationMenuTrigger,
+  NavigationMenuViewport,
 } from "#/components/navigation-menu";
 export type {
   NavigationMenuContentProps,
+  NavigationMenuIndicatorProps,
   NavigationMenuItemProps,
   NavigationMenuLinkProps,
   NavigationMenuListProps,
   NavigationMenuProps,
   NavigationMenuTriggerProps,
+  NavigationMenuViewportProps,
 } from "#/components/navigation-menu";
 export { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from "#/components/native-select";
-export type {
-  NativeSelectOptGroupProps,
-  NativeSelectOptionProps,
-  NativeSelectProps,
-} from "#/components/native-select";
+export type { NativeSelectOptGroupProps, NativeSelectOptionProps, NativeSelectProps } from "#/components/native-select";
 export {
   Pagination,
   PaginationContent,
@@ -490,13 +464,19 @@ export {
   PopoverAnchor,
   PopoverArrow,
   PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
   PopoverTrigger,
 } from "#/components/popover";
 export type {
   PopoverAnchorProps,
   PopoverArrowProps,
   PopoverContentProps,
+  PopoverDescriptionProps,
+  PopoverHeaderProps,
   PopoverProps,
+  PopoverTitleProps,
   PopoverTriggerProps,
 } from "#/components/popover";
 export { Progress } from "#/components/progress";
@@ -510,11 +490,7 @@ export type { RadioCardsItemProps, RadioCardsProps } from "#/components/radio-ca
 export { RadioGroup, RadioGroupItem } from "#/components/radio-group";
 export type { RadioGroupItemProps, RadioGroupProps } from "#/components/radio-group";
 export { ResizableGroup, ResizablePanel, ResizableSeparator } from "#/components/resizable";
-export type {
-  ResizableGroupProps,
-  ResizablePanelProps,
-  ResizableSeparatorProps,
-} from "#/components/resizable";
+export type { ResizableGroupProps, ResizablePanelProps, ResizableSeparatorProps } from "#/components/resizable";
 export { ScrollArea, ScrollAreaScrollbar } from "#/components/scroll-area";
 export type { ScrollAreaProps, ScrollAreaScrollbarProps } from "#/components/scroll-area";
 export {
@@ -647,25 +623,14 @@ export type {
   TableRowProps,
 } from "#/components/table";
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "#/components/tabs";
-export type {
-  TabsContentProps,
-  TabsListProps,
-  TabsProps,
-  TabsTriggerProps,
-} from "#/components/tabs";
+export type { TabsContentProps, TabsListProps, TabsProps, TabsTriggerProps } from "#/components/tabs";
 export { Textarea } from "#/components/textarea";
 export type { TextareaProps } from "#/components/textarea";
 export { Toggle } from "#/components/toggle";
 export type { ToggleProps } from "#/components/toggle";
 export { ToggleGroup, ToggleGroupItem } from "#/components/toggle-group";
 export type { ToggleGroupItemProps, ToggleGroupProps } from "#/components/toggle-group";
-export {
-  Tooltip,
-  TooltipArrow,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "#/components/tooltip";
+export { Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger } from "#/components/tooltip";
 export type {
   TooltipArrowProps,
   TooltipContentProps,
@@ -692,16 +657,8 @@ export { emptyMediaVariants } from "#/variants/empty";
 export type { EmptyMediaVariants } from "#/variants/empty";
 export { fieldVariants } from "#/variants/field";
 export type { FieldVariants } from "#/variants/field";
-export {
-  inputGroupAddonVariants,
-  inputGroupButtonVariants,
-  inputGroupVariants,
-} from "#/variants/input-group";
-export type {
-  InputGroupAddonVariants,
-  InputGroupButtonVariants,
-  InputGroupVariants,
-} from "#/variants/input-group";
+export { inputGroupAddonVariants, inputGroupButtonVariants, inputGroupVariants } from "#/variants/input-group";
+export type { InputGroupAddonVariants, InputGroupButtonVariants, InputGroupVariants } from "#/variants/input-group";
 export { itemMediaVariants, itemVariants } from "#/variants/item";
 export type { ItemMediaVariants, ItemVariants } from "#/variants/item";
 export { navigationMenuTriggerVariants } from "#/variants/navigation-menu";
@@ -716,5 +673,7 @@ export { sheetContentVariants } from "#/variants/sheet";
 export type { SheetContentVariants } from "#/variants/sheet";
 export { sidebarMenuButtonVariants } from "#/variants/sidebar";
 export type { SidebarMenuButtonVariants } from "#/variants/sidebar";
+export { tabsListVariants } from "#/variants/tabs";
+export type { TabsListVariants } from "#/variants/tabs";
 export { toggleVariants } from "#/variants/toggle";
 export type { ToggleVariants } from "#/variants/toggle";

package/src/primitives/checkbox-group.tsx

@@ -1,13 +1,10 @@
-import type { Scope } from "@radix-ui/react-context";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import { Checkbox } from "radix-ui";
+import { Direction } from "radix-ui";
+import { Context } from "radix-ui/internal";
+import { RovingFocus } from "radix-ui/internal";
+import { useControllableState } from "radix-ui/internal";
 import type { ComponentProps, JSX } from "react";
-
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { createCheckboxScope } from "@radix-ui/react-checkbox";
-import { createContextScope } from "@radix-ui/react-context";
-import { useDirection } from "@radix-ui/react-direction";
-import * as RovingFocusGroup from "@radix-ui/react-roving-focus";
-import { createRovingFocusGroupScope } from "@radix-ui/react-roving-focus";
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { useCallback } from "react";
 
 /* -----------------------------------------------------------------------------
@@ -23,16 +20,16 @@ type ScopedProps<P> = P & {
   /**
    * Optional scope for the CheckboxGroup component
    */
-  __scopeCheckboxGroup?: Scope;
+  __scopeCheckboxGroup?: Context.Scope;
 };
 
-const [createCheckboxGroupContext, createCheckboxGroupScope] = createContextScope(
-  CHECKBOX_GROUP_NAME,
-  [createRovingFocusGroupScope, createCheckboxScope],
-);
+const [createCheckboxGroupContext, createCheckboxGroupScope] = Context.createContextScope(CHECKBOX_GROUP_NAME, [
+  RovingFocus.createRovingFocusGroupScope,
+  Checkbox.createCheckboxScope,
+]);
 
-const useRovingFocusGroupScope = createRovingFocusGroupScope();
-const useCheckboxScope = createCheckboxScope();
+const useRovingFocusGroupScope = RovingFocus.createRovingFocusGroupScope();
+const useCheckboxScope = Checkbox.createCheckboxScope();
 
 /**
  * Context values shared between CheckboxGroup components
@@ -90,7 +87,7 @@ interface CheckboxGroupBaseProps {
   /**
    * Direction for roving focus navigation
    */
-  dir?: RovingFocusGroup.RovingFocusGroupProps["dir"];
+  dir?: RovingFocus.RovingFocusGroupProps["dir"];
 
   /**
    * Whether the entire checkbox group is disabled
@@ -100,7 +97,7 @@ interface CheckboxGroupBaseProps {
   /**
    * Whether focus should loop to the start/end when reaching the boundaries
    */
-  loop?: RovingFocusGroup.RovingFocusGroupProps["loop"];
+  loop?: RovingFocus.RovingFocusGroupProps["loop"];
 
   /**
    * Name attribute for the checkbox group form field
@@ -116,7 +113,7 @@ interface CheckboxGroupBaseProps {
   /**
    * Orientation of the checkbox group (horizontal or vertical)
    */
-  orientation?: RovingFocusGroup.RovingFocusGroupProps["orientation"];
+  orientation?: RovingFocus.RovingFocusGroupProps["orientation"];
 
   /**
    * Whether at least one checkbox must be selected
@@ -155,14 +152,14 @@ function CheckboxGroup({
   ...props
 }: ScopedProps<CheckboxGroupProps>): JSX.Element {
   /**
-   * Scope for the RovingFocusGroup component
+   * Context.Scope for the RovingFocusGroup component
    */
   const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeCheckboxGroup);
 
   /**
    * Direction for layout and navigation
    */
-  const direction = useDirection(dir);
+  const direction = Direction.useDirection(dir);
 
   /**
    * State for managing selected checkbox values
@@ -215,15 +212,9 @@ function CheckboxGroup({
       onItemCheck={handleItemCheck}
       onItemUncheck={handleItemUncheck}
     >
-      <RovingFocusGroup.Root
-        asChild
-        {...rovingFocusGroupScope}
-        dir={direction}
-        loop={loop}
-        orientation={orientation}
-      >
+      <RovingFocus.Root asChild {...rovingFocusGroupScope} dir={direction} loop={loop} orientation={orientation}>
         <div data-disabled={disabled ? "" : undefined} dir={direction} role="group" {...props} />
-      </RovingFocusGroup.Root>
+      </RovingFocus.Root>
     </CheckboxGroupContextProvider>
   );
 }
@@ -274,12 +265,12 @@ function CheckboxGroupItem({
   const isDisabled = context.disabled || disabled;
 
   /**
-   * Scope for the RovingFocusGroup component
+   * Context.Scope for the RovingFocusGroup component
    */
   const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeCheckboxGroup);
 
   /**
-   * Scope for the Checkbox component
+   * Context.Scope for the Checkbox component
    */
   const checkboxScope = useCheckboxScope(__scopeCheckboxGroup);
 
@@ -289,12 +280,7 @@ function CheckboxGroupItem({
   const checked = context.value?.includes(props.value);
 
   return (
-    <RovingFocusGroup.Item
-      asChild
-      {...rovingFocusGroupScope}
-      active={checked}
-      focusable={!isDisabled}
-    >
+    <RovingFocus.Item asChild {...rovingFocusGroupScope} active={checked} focusable={!isDisabled}>
       <CheckboxPrimitive.Root
         aria-label={props.value}
         checked={checked}
@@ -311,7 +297,7 @@ function CheckboxGroupItem({
           }
         }}
       />
-    </RovingFocusGroup.Item>
+    </RovingFocus.Item>
   );
 }
 
@@ -336,7 +322,7 @@ function CheckboxGroupIndicator({
   ...props
 }: ScopedProps<CheckboxGroupIndicatorProps>): JSX.Element {
   /**
-   * Scope for the Checkbox component
+   * Context.Scope for the Checkbox component
    */
   const checkboxScope = useCheckboxScope(__scopeCheckboxGroup);
 

package/src/primitives/input-number.tsx

@@ -1,4 +1,6 @@
-import type { Scope } from "@radix-ui/react-context";
+import { composeEventHandlers } from "radix-ui/internal";
+import { Context } from "radix-ui/internal";
+import { useControllableState } from "radix-ui/internal";
 import type {
   ComponentProps,
   FocusEventHandler,
@@ -9,10 +11,6 @@ import type {
   PointerEventHandler,
   RefObject,
 } from "react";
-
-import { composeEventHandlers } from "@radix-ui/primitive";
-import { createContextScope } from "@radix-ui/react-context";
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 
 import * as InputPrimitive from "#/primitives/input";
@@ -34,10 +32,10 @@ type ScopedProps<P> = P & {
   /**
    * Optional scope for the InputNumber component context
    */
-  __scopeInputNumber?: Scope;
+  __scopeInputNumber?: Context.Scope;
 };
 
-const [createInputNumberContext, createInputNumberScope] = createContextScope(NUMBER_INPUT_NAME, [
+const [createInputNumberContext, createInputNumberScope] = Context.createContextScope(NUMBER_INPUT_NAME, [
   createInputScope,
 ]);
 const useInputScope = createInputScope();
@@ -232,7 +230,7 @@ function InputNumber(numberInputProps: ScopedProps<InputNumberProps>): JSX.Eleme
   } = numberInputProps;
 
   /**
-   * Scope for the input component
+   * Context.Scope for the input component
    */
   const inputScope = useInputScope(__scopeInputNumber);
 
@@ -253,10 +251,7 @@ function InputNumber(numberInputProps: ScopedProps<InputNumberProps>): JSX.Eleme
   /**
    * Separators used for number formatting based on locale
    */
-  const { decimalSeparator, thousandSeparator } = useMemo(
-    () => getNumberFormatSeparators(locale),
-    [locale],
-  );
+  const { decimalSeparator, thousandSeparator } = useMemo(() => getNumberFormatSeparators(locale), [locale]);
 
   /**
    * Formats a number value into a string representation
@@ -295,11 +290,7 @@ function InputNumber(numberInputProps: ScopedProps<InputNumberProps>): JSX.Eleme
         return Number.NaN;
       }
 
-      const normalizedValue = normalizeInputValue(
-        cleanedValue,
-        thousandSeparator,
-        decimalSeparator,
-      );
+      const normalizedValue = normalizeInputValue(cleanedValue, thousandSeparator, decimalSeparator);
       let parsedValue = Number.parseFloat(normalizedValue);
 
       if (formatOptions.style === "percent") {
@@ -403,16 +394,7 @@ const NUMBER_INPUT_FIELD_NAME = "InputNumberField";
  */
 type InputNumberFieldProps = Omit<
   ComponentProps<typeof InputPrimitive.Field>,
-  | "defaultValue"
-  | "disabled"
-  | "id"
-  | "max"
-  | "min"
-  | "onChange"
-  | "prefix"
-  | "readOnly"
-  | "step"
-  | "value"
+  "defaultValue" | "disabled" | "id" | "max" | "min" | "onChange" | "prefix" | "readOnly" | "step" | "value"
 >;
 
 /**
@@ -595,10 +577,7 @@ function InputNumberField({
    */
   const combinedKeyDownHandler = useCallback<KeyboardEventHandler<HTMLInputElement>>(
     (event) => {
-      composeEventHandlers(
-        onKeyDown,
-        chain(handleKeyDownPrevent, handleKeyDown, handleKeyDownEnter),
-      )(event);
+      composeEventHandlers(onKeyDown, chain(handleKeyDownPrevent, handleKeyDown, handleKeyDownEnter))(event);
     },
     [onKeyDown, handleKeyDown, handleKeyDownEnter, handleKeyDownPrevent],
   );
@@ -712,17 +691,8 @@ function NumberStepperButton({
   ...props
 }: ScopedProps<NumberStepperButtonProps>): JSX.Element {
   // Destructures relevant context values for the button functionality.
-  const {
-    ariaDecrementLabel,
-    ariaIncrementLabel,
-    disabled,
-    id,
-    max,
-    min,
-    onDecrement,
-    onIncrement,
-    value,
-  } = useInputNumberContext(NUMBER_STEPPER_BUTTON_NAME, __scopeInputNumber);
+  const { ariaDecrementLabel, ariaIncrementLabel, disabled, id, max, min, onDecrement, onIncrement, value } =
+    useInputNumberContext(NUMBER_STEPPER_BUTTON_NAME, __scopeInputNumber);
 
   const isDisabled = useMemo(() => {
     const atMin = min !== undefined && value !== undefined && value <= min;
@@ -829,10 +799,7 @@ function NumberStepperButton({
 /**
  * @since 0.3.16-canary.0
  */
-type InputNumberIncrementButtonProps = Omit<
-  ComponentProps<typeof NumberStepperButton>,
-  "operation"
->;
+type InputNumberIncrementButtonProps = Omit<ComponentProps<typeof NumberStepperButton>, "operation">;
 
 /**
  * @since 0.3.16-canary.0
@@ -848,10 +815,7 @@ function InputNumberIncrementButton(props: InputNumberIncrementButtonProps): JSX
 /**
  * @since 0.3.16-canary.0
  */
-type InputNumberDecrementButtonProps = Omit<
-  ComponentProps<typeof NumberStepperButton>,
-  "operation"
->;
+type InputNumberDecrementButtonProps = Omit<ComponentProps<typeof NumberStepperButton>, "operation">;
 
 /**
  * @since 0.3.16-canary.0
@@ -870,9 +834,7 @@ function InputNumberDecrementButton(props: InputNumberDecrementButtonProps): JSX
  * @param callbacks - Array of callback functions that will be executed in order
  * @returns A single function that executes all callbacks
  */
-function chain<T extends Array<unknown>>(
-  ...callbacks: Array<(...args: T) => void>
-): (...args: T) => void {
+function chain<T extends Array<unknown>>(...callbacks: Array<(...args: T) => void>): (...args: T) => void {
   return (...args: T) => {
     for (const callback of callbacks) {
       callback(...args);
@@ -932,11 +894,7 @@ function getNumberFormatSeparators(locale?: string): NumberFormatSeparators {
  * @param decimalSeparator - The decimal separator to convert to standard dot notation
  * @returns Normalized string value ready for numeric conversion
  */
-function normalizeInputValue(
-  value: string,
-  thousandSeparator: string,
-  decimalSeparator: string,
-): string {
+function normalizeInputValue(value: string, thousandSeparator: string, decimalSeparator: string): string {
   return value
     .replaceAll(new RegExp(`\\${thousandSeparator}`, "g"), "")
     .replace(new RegExp(`\\${decimalSeparator}`), ".")
@@ -981,11 +939,7 @@ function isNumberKey(key: string): boolean {
  * @param max - The maximum allowed value (defaults to Infinity)
  * @returns The clamped value
  */
-function clamp(
-  value: number,
-  min = Number.NEGATIVE_INFINITY,
-  max = Number.POSITIVE_INFINITY,
-): number {
+function clamp(value: number, min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFINITY): number {
   return Math.min(Math.max(value, min), max);
 }
 

package/src/primitives/input.tsx

@@ -1,15 +1,6 @@
-import type { Scope } from "@radix-ui/react-context";
-import type {
-  ComponentProps,
-  JSX,
-  PointerEventHandler,
-  PropsWithChildren,
-  ReactNode,
-  RefObject,
-} from "react";
-
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
-import { createContextScope } from "@radix-ui/react-context";
+import { useComposedRefs } from "radix-ui/internal";
+import { Context } from "radix-ui/internal";
+import type { ComponentProps, JSX, PointerEventHandler, PropsWithChildren, ReactNode, RefObject } from "react";
 import { useRef } from "react";
 
 /* -----------------------------------------------------------------------------
@@ -23,12 +14,12 @@ const INPUT_NAME = "Input";
  */
 type ScopedProps<P> = P & {
   /**
-   * Scope for the Input component context
+   * Context.Scope for the Input component context
    */
-  __scopeInput?: Scope;
+  __scopeInput?: Context.Scope;
 };
 
-const [createInputContext, createInputScope] = createContextScope(INPUT_NAME);
+const [createInputContext, createInputScope] = Context.createContextScope(INPUT_NAME);
 
 /**
  * Context value for the Input component
@@ -181,12 +172,7 @@ function Input(inputProps: ScopedProps<InputProps>): JSX.Element {
   };
 
   return (
-    <InputContextProvider
-      disabled={disabled}
-      inputRef={inputRef}
-      readOnly={readOnly}
-      scope={__scopeInput}
-    >
+    <InputContextProvider disabled={disabled} inputRef={inputRef} readOnly={readOnly} scope={__scopeInput}>
       <div
         data-disabled={disabled}
         data-readonly={readOnly}
@@ -229,9 +215,7 @@ function InputField({ __scopeInput, ...props }: ScopedProps<InputFieldProps>): J
    */
   const composedInputRef = useComposedRefs(inputRef);
 
-  return (
-    <input ref={composedInputRef} disabled={disabled} readOnly={readOnly} type="text" {...props} />
-  );
+  return <input ref={composedInputRef} disabled={disabled} readOnly={readOnly} type="text" {...props} />;
 }
 
 /* -----------------------------------------------------------------------------