add js docs to the slider components

Author: antpaw

packages/chakra-ui/src/CheckboxesWidget/CheckboxesWidget.tsx

@@ -43,11 +43,7 @@ export default function CheckboxesWidget<
   const selectedIndexes = enumOptionsIndexForValue<S>(value, enumOptions, true) as string[];
 
   return (
-    <FieldsetRoot
-      mb={1}
-      disabled={disabled || readonly}
-      invalid={rawErrors && rawErrors.length > 0}
-    >
+    <FieldsetRoot mb={1} disabled={disabled || readonly} invalid={rawErrors && rawErrors.length > 0}>
       <CheckboxGroup
         onValueChange={(option) => onChange(enumOptionsValueForIndex<S>(option, enumOptions, emptyValue))}
         value={selectedIndexes}

packages/chakra-ui/src/RangeWidget/RangeWidget.tsx

@@ -25,7 +25,6 @@ export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSc
   hideLabel,
   id,
 }: WidgetProps<T, S, F>) {
-
   const sliderWidgetProps = { value, label, id, ...rangeSpec<S>(schema) };
 
   const _onChange = ({ value }: SliderValueChangeDetails) => onChange(value === undefined ? options.emptyValue : value);

packages/chakra-ui/src/SelectNativeWidget/NativeSelectWidget.tsx

@@ -1,5 +1,4 @@
 import { ChangeEvent, FocusEvent, useMemo } from 'react';
-
 import {
   ariaDescribedByIds,
   EnumOptionsType,
@@ -16,10 +15,21 @@ import { OptionsOrGroups } from 'chakra-react-select';
 import { createListCollection } from '@chakra-ui/react';
 import { NativeSelect as ChakraSelect } from '@chakra-ui/react';
 
+/**
+ * NativeSelectWidget is a React component that renders a native select input.
+ *
+ * @param {T} T - The type of the value.
+ * @param {S} S - The type of the schema.
+ * @param {F} F - The type of the form context.
+ * @param {WidgetProps<T, S, F>} props - The props for the component.
+ *
+ * @returns {JSX.Element} - The rendered component.
+ */
+
 export default function NativeSelectWidget<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(props: WidgetProps<T, S, F>) {
   const {
     id,

packages/chakra-ui/src/components/ui/alert.tsx

@@ -1,17 +1,30 @@
+import { forwardRef, ReactElement, ReactNode } from 'react';
 import { Alert as ChakraAlert } from '@chakra-ui/react';
 import { CloseButton } from './close-button';
-import * as React from 'react';
 
+/**
+ * Alert component that displays a message with an optional icon and close button.
+ *
+ * @param {AlertProps} props - The properties for the alert component.
+ * @param {ReactNode} [props.startElement] - The element to display at the start of the alert.
+ * @param {ReactNode} [props.endElement] - The element to display at the end of the alert.
+ * @param {ReactNode} [props.title] - The title of the alert.
+ * @param {ReactElement} [props.icon] - The icon to display in the alert.
+ * @param {boolean} [props.closable] - Whether to show the close button.
+ * @param {function} [props.onClose] - The function to call when the close button is clicked.
+ *
+ * @returns {JSX.Element} The rendered alert component.
+ */
 export interface AlertProps extends Omit<ChakraAlert.RootProps, 'title'> {
-  startElement?: React.ReactNode;
-  endElement?: React.ReactNode;
-  title?: React.ReactNode;
-  icon?: React.ReactElement;
+  startElement?: ReactNode;
+  endElement?: ReactNode;
+  title?: ReactNode;
+  icon?: ReactElement;
   closable?: boolean;
   onClose?: () => void;
 }
 
-export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(props, ref) {
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(props, ref) {
   const { title, children, icon, closable, onClose, startElement, endElement, ...rest } = props;
   return (
     <ChakraAlert.Root ref={ref} {...rest}>

packages/chakra-ui/src/components/ui/checkbox.tsx

@@ -1,13 +1,22 @@
+import { forwardRef, InputHTMLAttributes, ReactNode, Ref } from 'react';
 import { Checkbox as ChakraCheckbox } from '@chakra-ui/react';
-import * as React from 'react';
 
 export interface CheckboxProps extends ChakraCheckbox.RootProps {
-  icon?: React.ReactNode;
-  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
-  rootRef?: React.Ref<HTMLLabelElement>;
+  icon?: ReactNode;
+  inputProps?: InputHTMLAttributes<HTMLInputElement>;
+  rootRef?: Ref<HTMLLabelElement>;
 }
 
-export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(props, ref) {
+/**
+ * Checkbox component that allows users to select or deselect an option.
+ *
+ * @param {CheckboxProps} props - The properties for the checkbox component.
+ * @param {ReactNode} [props.icon] - The icon to display in the checkbox.
+ * @param {InputHTMLAttributes<HTMLInputElement>} [props.inputProps] - Additional props for the input element.
+ * @param {Ref<HTMLLabelElement>} [props.rootRef] - Ref for the root element of the checkbox.
+ * @returns {JSX.Element} The rendered checkbox component.
+ */
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(props, ref) {
   const { icon, children, inputProps, rootRef, ...rest } = props;
   return (
     <ChakraCheckbox.Root ref={rootRef} {...rest}>

packages/chakra-ui/src/components/ui/close-button.tsx

@@ -1,11 +1,18 @@
+import { forwardRef } from 'react';
 import type { ButtonProps } from '@chakra-ui/react';
 import { IconButton as ChakraIconButton } from '@chakra-ui/react';
-import * as React from 'react';
 import { LuX } from 'react-icons/lu';
 
 export type CloseButtonProps = ButtonProps;
 
-export const CloseButton = React.forwardRef<HTMLButtonElement, CloseButtonProps>(function CloseButton(props, ref) {
+/**
+ * CloseButton component that renders a button with a close icon.
+ *
+ * @param {CloseButtonProps} props - The properties for the close button component.
+ * @param {ReactNode} [props.children] - The content to display inside the button.
+ * @returns {JSX.Element} The rendered close button component.
+ */
+export const CloseButton = forwardRef<HTMLButtonElement, CloseButtonProps>(function CloseButton(props, ref) {
   return (
     <ChakraIconButton variant='ghost' aria-label='Close' ref={ref} {...props}>
       {props.children ?? <LuX />}

packages/chakra-ui/src/components/ui/field.tsx

@@ -1,14 +1,25 @@
+import { forwardRef, ReactNode } from 'react';
 import { Field as ChakraField } from '@chakra-ui/react';
-import * as React from 'react';
 
 export interface FieldProps extends Omit<ChakraField.RootProps, 'label'> {
-  label?: React.ReactNode;
-  helperText?: React.ReactNode;
-  errorText?: React.ReactNode;
-  optionalText?: React.ReactNode;
+  label?: ReactNode;
+  helperText?: ReactNode;
+  errorText?: ReactNode;
+  optionalText?: ReactNode;
 }
 
-export const Field = React.forwardRef<HTMLDivElement, FieldProps>(function Field(props, ref) {
+/**
+ * Field component that serves as a wrapper for form fields, providing
+ * additional functionality such as labels, helper text, and error messages.
+ *
+ * @param {FieldProps} props - The properties for the field component.
+ * @param {ReactNode} [props.label] - The label for the field.
+ * @param {ReactNode} [props.helperText] - Helper text to display below the field.
+ * @param {ReactNode} [props.errorText] - Error message to display below the field.
+ * @param {ReactNode} [props.optionalText] - Text to indicate that the field is optional.
+ * @returns {JSX.Element} The rendered field component.
+ */
+export const Field = forwardRef<HTMLDivElement, FieldProps>(function Field(props, ref) {
   const { label, children, helperText, errorText, optionalText, ...rest } = props;
   return (
     <ChakraField.Root ref={ref} {...rest}>

packages/chakra-ui/src/components/ui/number-input.tsx

@@ -1,9 +1,16 @@
+import { forwardRef } from 'react';
 import { NumberInput as ChakraNumberInput } from '@chakra-ui/react';
-import * as React from 'react';
 
 export type NumberInputProps = ChakraNumberInput.RootProps;
 
-export const NumberInputRoot = React.forwardRef<HTMLDivElement, NumberInputProps>(function NumberInput(props, ref) {
+/**
+ * NumberInput component that allows users to input numeric values.
+ *
+ * @param {NumberInputProps} props - The properties for the number input component.
+ * @param {ReactNode} [props.children] - The content to display inside the number input.
+ * @returns {JSX.Element} The rendered number input component.
+ */
+export const NumberInputRoot = forwardRef<HTMLDivElement, NumberInputProps>(function NumberInput(props, ref) {
   const { children, ...rest } = props;
   return (
     <ChakraNumberInput.Root ref={ref} variant='outline' {...rest}>

packages/chakra-ui/src/components/ui/radio.tsx

@@ -1,12 +1,20 @@
+import { forwardRef, InputHTMLAttributes, Ref } from 'react';
 import { RadioGroup as ChakraRadioGroup } from '@chakra-ui/react';
-import * as React from 'react';
 
 export interface RadioProps extends ChakraRadioGroup.ItemProps {
-  rootRef?: React.Ref<HTMLDivElement>;
-  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+  rootRef?: Ref<HTMLDivElement>;
+  inputProps?: InputHTMLAttributes<HTMLInputElement>;
 }
 
-export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(function Radio(props, ref) {
+/**
+ * Radio component that allows users to select a single option from a set.
+ *
+ * @param {RadioProps} props - The properties for the radio component.
+ * @param {InputHTMLAttributes<HTMLInputElement>} [props.inputProps] - Additional props for the input element.
+ * @param {Ref<HTMLDivElement>} [props.rootRef] - Ref for the root element of the radio.
+ * @returns {JSX.Element} The rendered radio component.
+ */
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(props, ref) {
   const { children, inputProps, rootRef, ...rest } = props;
   return (
     <ChakraRadioGroup.Item ref={rootRef} {...rest}>

packages/chakra-ui/src/components/ui/select.tsx

@@ -1,18 +1,21 @@
-'use client';
-
+import { forwardRef, RefObject } from 'react';
 import type { CollectionItem } from '@chakra-ui/react';
 import { Select as ChakraSelect, Portal } from '@chakra-ui/react';
 import { CloseButton } from './close-button';
-import * as React from 'react';
 
 interface SelectTriggerProps extends ChakraSelect.ControlProps {
   clearable?: boolean;
 }
 
-export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(function SelectTrigger(
-  props,
-  ref
-) {
+/**
+ * SelectTrigger component that renders a trigger for the select component.
+ *
+ * @param {SelectTriggerProps} props - The properties for the select trigger component.
+ * @param {boolean} [props.clearable] - Whether the trigger is clearable.
+ * @param {ReactNode} [props.children] - The content to display inside the trigger.
+ * @returns {JSX.Element} The rendered select trigger component.
+ */
+export const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(function SelectTrigger(props, ref) {
   const { children, clearable, ...rest } = props;
   return (
     <ChakraSelect.Control {...rest}>
@@ -25,22 +28,36 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
   );
 });
 
-const SelectClearTrigger = React.forwardRef<HTMLButtonElement, ChakraSelect.ClearTriggerProps>(
+/**
+ * SelectClearTrigger component that renders a clear button for the select component.
+ *
+ * @param {ChakraSelect.ClearTriggerProps} props - The properties for the clear trigger component.
+ * @returns {JSX.Element} The rendered select clear trigger component.
+ */
+const SelectClearTrigger = forwardRef<HTMLButtonElement, ChakraSelect.ClearTriggerProps>(
   function SelectClearTrigger(props, ref) {
     return (
       <ChakraSelect.ClearTrigger asChild {...props} ref={ref}>
         <CloseButton size='xs' variant='plain' focusVisibleRing='inside' focusRingWidth='2px' pointerEvents='auto' />
       </ChakraSelect.ClearTrigger>
     );
-  }
+  },
 );
 
 interface SelectContentProps extends ChakraSelect.ContentProps {
   portalled?: boolean;
-  portalRef?: React.RefObject<HTMLElement>;
+  portalRef?: RefObject<HTMLElement>;
 }
 
-export const SelectContent = React.forwardRef<HTMLDivElement, SelectContentProps>(function SelectContent(props, ref) {
+/**
+ * SelectContent component that renders the content of the select component.
+ *
+ * @param {SelectContentProps} props - The properties for the select content component.
+ * @param {boolean} [props.portalled] - Whether to use a portal for rendering the content.
+ * @param {RefObject<HTMLElement>} [props.portalRef] - The ref for the portal container.
+ * @returns {JSX.Element} The rendered select content component.
+ */
+export const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(function SelectContent(props, ref) {
   const { portalled = true, portalRef, ...rest } = props;
   return (
     <Portal disabled={!portalled} container={portalRef}>
@@ -51,7 +68,15 @@ export const SelectContent = React.forwardRef<HTMLDivElement, SelectContentProps
   );
 });
 
-export const SelectItem = React.forwardRef<HTMLDivElement, ChakraSelect.ItemProps>(function SelectItem(props, ref) {
+/**
+ * SelectItem component that represents an item in the select component.
+ *
+ * @param {SelectItemProps} props - The properties for the select item component.
+ * @param {CollectionItem} [props.item] - The item to display in the select.
+ * @param {ReactNode} [props.children] - The content to display inside the item.
+ * @returns {JSX.Element} The rendered select item component.
+ */
+export const SelectItem = forwardRef<HTMLDivElement, ChakraSelect.ItemProps>(function SelectItem(props, ref) {
   const { item, children, ...rest } = props;
   return (
     <ChakraSelect.Item key={item.value} item={item} {...rest} ref={ref}>
@@ -65,10 +90,15 @@ interface SelectValueTextProps extends Omit<ChakraSelect.ValueTextProps, 'childr
   children?(items: CollectionItem[]): React.ReactNode;
 }
 
-export const SelectValueText = React.forwardRef<HTMLSpanElement, SelectValueTextProps>(function SelectValueText(
-  props,
-  ref
-) {
+/**
+ * SelectValueText component that displays the selected value in the select component.
+ *
+ * @param {SelectValueTextProps} props - The properties for the select value text component.
+ * @param {function} [props.children] - A function that receives the selected items and returns the content to display.
+ * @param {ReactNode} [props.placeholder] - The placeholder text to display when no items are selected.
+ * @returns {JSX.Element} The rendered select value text component.
+ */
+export const SelectValueText = forwardRef<HTMLSpanElement, SelectValueTextProps>(function SelectValueText(props, ref) {
   const { children, ...rest } = props;
   return (
     <ChakraSelect.ValueText {...rest} ref={ref}>
@@ -91,7 +121,15 @@ export const SelectValueText = React.forwardRef<HTMLSpanElement, SelectValueText
   );
 });
 
-export const SelectRoot = React.forwardRef<HTMLDivElement, ChakraSelect.RootProps>(function SelectRoot(props, ref) {
+/**
+ * SelectRoot component that serves as the root element for the select component.
+ *
+ * @param {SelectRootProps} props - The properties for the select root component.
+ * @param {ChakraSelect.PositioningProps} [props.positioning] - The positioning properties for the select component.
+ * @param {ReactNode} [props.children] - The content to display inside the select root.
+ * @returns {JSX.Element} The rendered select root component.
+ */
+export const SelectRoot = forwardRef<HTMLDivElement, ChakraSelect.RootProps>(function SelectRoot(props, ref) {
   return (
     <ChakraSelect.Root {...props} ref={ref} positioning={{ sameWidth: true, ...props.positioning }}>
       {props.asChild ? (
@@ -110,10 +148,15 @@ interface SelectItemGroupProps extends ChakraSelect.ItemGroupProps {
   label: React.ReactNode;
 }
 
-export const SelectItemGroup = React.forwardRef<HTMLDivElement, SelectItemGroupProps>(function SelectItemGroup(
-  props,
-  ref
-) {
+/**
+ * SelectItemGroup component that groups select items together.
+ *
+ * @param {SelectItemGroupProps} props - The properties for the select item group component.
+ * @param {React.ReactNode} [props.label] - The label for the item group.
+ * @param {ReactNode} [props.children] - The content to display inside the item group.
+ * @returns {JSX.Element} The rendered select item group component.
+ */
+export const SelectItemGroup = forwardRef<HTMLDivElement, SelectItemGroupProps>(function SelectItemGroup(props, ref) {
   const { children, label, ...rest } = props;
   return (
     <ChakraSelect.ItemGroup {...rest} ref={ref}>