@rjsf/chakra-ui 5.24.10 → 6.0.0-beta.1

package/src/SelectWidget/SelectWidget.tsx

@@ -1,5 +1,5 @@
-import { FocusEvent, useMemo } from 'react';
-import { FormControl, FormLabel } from '@chakra-ui/react';
+import { FocusEvent, useMemo, useRef } from 'react';
+
 import {
   ariaDescribedByIds,
   EnumOptionsType,
@@ -11,11 +11,14 @@ import {
   StrictRJSFSchema,
   WidgetProps,
 } from '@rjsf/utils';
-import { getChakra } from '../utils';
-import { OptionsOrGroups, Select } from 'chakra-react-select';
+import { OptionsOrGroups } from 'chakra-react-select';
+import { createListCollection, SelectValueChangeDetails, Select as ChakraSelect } from '@chakra-ui/react';
+
+import { Field } from '../components/ui/field';
+import { SelectRoot, SelectTrigger, SelectValueText } from '../components/ui/select';
 
 export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: WidgetProps<T, S, F>
+  props: WidgetProps<T, S, F>,
 ) {
   const {
     id,
@@ -33,26 +36,24 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
     onBlur,
     onFocus,
     rawErrors = [],
-    uiSchema,
     schema,
   } = props;
   const { enumOptions, enumDisabled, emptyValue } = options;
-  const chakraProps = getChakra({ uiSchema });
 
-  const _onMultiChange = (e: any) => {
+  const _onMultiChange = ({ value }: SelectValueChangeDetails) => {
     return onChange(
       enumOptionsValueForIndex<S>(
-        e.map((v: { value: any }) => {
-          return v.value;
+        value.map((item) => {
+          return item;
         }),
         enumOptions,
-        emptyValue
-      )
+        emptyValue,
+      ),
     );
   };
 
-  const _onChange = (e: any) => {
-    return onChange(enumOptionsValueForIndex<S>(e.value, enumOptions, emptyValue));
+  const _onChange = ({ value }: SelectValueChangeDetails) => {
+    return onChange(enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
   };
 
   const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
@@ -75,7 +76,7 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
         return {
           label,
           value: String(index),
-          isDisabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1,
+          disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1,
         };
       });
       if (showPlaceholderOption) {
@@ -87,47 +88,74 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
 
   const isMultiple = typeof multiple !== 'undefined' && multiple !== false && Boolean(enumOptions);
   const selectedIndex = enumOptionsIndexForValue<S>(value, enumOptions, isMultiple);
-  const formValue: any = isMultiple
-    ? ((selectedIndex as string[]) || []).map((i: string) => {
-        return {
-          label: valueLabelMap[i],
-          value: i,
-        };
-      })
-    : {
-        label: valueLabelMap[selectedIndex as string] || '',
-        selectedIndex,
+
+  const getMultiValue = () =>
+    ((selectedIndex as string[]) || []).map((i: string) => {
+      return {
+        label: valueLabelMap[i],
+        value: i.toString(),
       };
+    });
+
+  const getSingleValue = () =>
+    typeof selectedIndex !== 'undefined'
+      ? [
+          {
+            label: valueLabelMap[selectedIndex as string] || '',
+            value: selectedIndex.toString(),
+          },
+        ]
+      : [];
+
+  const formValue = (isMultiple ? getMultiValue() : getSingleValue()).map((item) => item.value);
+
+  const selectOptions = createListCollection({
+    items: displayEnumOptions.filter((item) => item.value),
+  });
+
+  const containerRef = useRef(null);
 
   return (
-    <FormControl
+    <Field
+      ref={containerRef}
       mb={1}
-      {...chakraProps}
-      isDisabled={disabled || readonly}
-      isRequired={required}
-      isReadOnly={readonly}
-      isInvalid={rawErrors && rawErrors.length > 0}
+      disabled={disabled || readonly}
+      required={required}
+      readOnly={readonly}
+      invalid={rawErrors && rawErrors.length > 0}
+      label={labelValue(label, hideLabel || !label)}
+      position='relative'
     >
-      {labelValue(
-        <FormLabel htmlFor={id} id={`${id}-label`}>
-          {label}
-        </FormLabel>,
-        hideLabel || !label
-      )}
-      <Select
-        inputId={id}
+      <SelectRoot
+        collection={selectOptions}
+        id={id}
         name={id}
-        isMulti={isMultiple}
-        options={displayEnumOptions}
-        placeholder={placeholder}
-        closeMenuOnSelect={!isMultiple}
+        multiple={isMultiple}
+        closeOnSelect={!isMultiple}
         onBlur={_onBlur}
-        onChange={isMultiple ? _onMultiChange : _onChange}
+        onValueChange={isMultiple ? _onMultiChange : _onChange}
         onFocus={_onFocus}
         autoFocus={autofocus}
         value={formValue}
         aria-describedby={ariaDescribedByIds<T>(id)}
-      />
-    </FormControl>
+        positioning={{ placement: 'bottom' }}
+      >
+        <ChakraSelect.Control>
+          <SelectTrigger>
+            <SelectValueText placeholder={placeholder} />
+          </SelectTrigger>
+        </ChakraSelect.Control>
+        <ChakraSelect.Positioner minWidth='100% !important' zIndex='2 !important' top='calc(100% + 5px) !important'>
+          <ChakraSelect.Content>
+            {selectOptions.items.map((item) => (
+              <ChakraSelect.Item item={item} key={item.value}>
+                {item.label}
+                <ChakraSelect.ItemIndicator />
+              </ChakraSelect.Item>
+            ))}
+          </ChakraSelect.Content>
+        </ChakraSelect.Positioner>
+      </SelectRoot>
+    </Field>
   );
 }

package/src/SubmitButton/SubmitButton.tsx

@@ -4,7 +4,7 @@ import { FormContextType, getSubmitButtonOptions, RJSFSchema, StrictRJSFSchema,
 export default function SubmitButton<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >({ uiSchema }: SubmitButtonProps<T, S, F>) {
   const { submitText, norender, props: submitButtonProps } = getSubmitButtonOptions(uiSchema);
   if (norender) {

package/src/Templates/Templates.ts

@@ -8,6 +8,7 @@ import { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } from '../IconB
 import FieldErrorTemplate from '../FieldErrorTemplate';
 import FieldHelpTemplate from '../FieldHelpTemplate';
 import FieldTemplate from '../FieldTemplate';
+import GridTemplate from '../GridTemplate';
 import ObjectFieldTemplate from '../ObjectFieldTemplate';
 import SubmitButton from '../SubmitButton';
 import TitleField from '../TitleField';
@@ -17,7 +18,7 @@ import { FormContextType, RJSFSchema, StrictRJSFSchema, TemplatesType } from '@r
 export function generateTemplates<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(): Partial<TemplatesType<T, S, F>> {
   return {
     ArrayFieldItemTemplate,
@@ -36,6 +37,7 @@ export function generateTemplates<
     FieldErrorTemplate,
     FieldHelpTemplate,
     FieldTemplate,
+    GridTemplate,
     ObjectFieldTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate,

package/src/TextareaWidget/TextareaWidget.tsx

@@ -1,5 +1,5 @@
 import { ChangeEvent, FocusEvent } from 'react';
-import { FormControl, FormLabel, Textarea } from '@chakra-ui/react';
+import { Textarea } from '@chakra-ui/react';
 import {
   ariaDescribedByIds,
   labelValue,
@@ -8,12 +8,13 @@ import {
   StrictRJSFSchema,
   WidgetProps,
 } from '@rjsf/utils';
-import { getChakra } from '../utils';
+
+import { Field } from '../components/ui/field';
 
 export default function TextareaWidget<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >({
   id,
   placeholder,
@@ -27,27 +28,23 @@ export default function TextareaWidget<
   onFocus,
   onChange,
   options,
-  uiSchema,
   required,
   rawErrors,
 }: WidgetProps<T, S, F>) {
-  const chakraProps = getChakra({ uiSchema });
-
   const _onChange = ({ target: { value } }: ChangeEvent<HTMLTextAreaElement>) =>
     onChange(value === '' ? options.emptyValue : value);
   const _onBlur = ({ target }: FocusEvent<HTMLTextAreaElement>) => onBlur(id, target && target.value);
   const _onFocus = ({ target }: FocusEvent<HTMLTextAreaElement>) => onFocus(id, target && target.value);
 
   return (
-    <FormControl
+    <Field
       mb={1}
-      {...chakraProps}
-      isDisabled={disabled || readonly}
-      isRequired={required}
-      isReadOnly={readonly}
-      isInvalid={rawErrors && rawErrors.length > 0}
+      disabled={disabled || readonly}
+      required={required}
+      readOnly={readonly}
+      invalid={rawErrors && rawErrors.length > 0}
+      label={labelValue(label, hideLabel || !label)}
     >
-      {labelValue(<FormLabel htmlFor={id}>{label}</FormLabel>, hideLabel || !label)}
       <Textarea
         id={id}
         name={id}
@@ -60,6 +57,6 @@ export default function TextareaWidget<
         rows={options.rows}
         aria-describedby={ariaDescribedByIds<T>(id)}
       />
-    </FormControl>
+    </Field>
   );
 }

package/src/Theme/Theme.tsx

@@ -7,7 +7,7 @@ import { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 export function generateTheme<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(): ThemeProps<T, S, F> {
   return {
     templates: generateTemplates<T, S, F>(),

package/src/TitleField/TitleField.tsx

@@ -1,5 +1,5 @@
 import { FormContextType, RJSFSchema, StrictRJSFSchema, TitleFieldProps } from '@rjsf/utils';
-import { Box, Divider, Heading } from '@chakra-ui/react';
+import { Box, Separator, Heading } from '@chakra-ui/react';
 
 export default function TitleField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   id,
@@ -8,7 +8,7 @@ export default function TitleField<T = any, S extends StrictRJSFSchema = RJSFSch
   return (
     <Box id={id} mt={1} mb={4}>
       <Heading as='h5'>{title}</Heading>
-      <Divider />
+      <Separator />
     </Box>
   );
 }

package/src/UpDownWidget/UpDownWidget.tsx

@@ -1,13 +1,5 @@
 import { FocusEvent } from 'react';
-import {
-  NumberInput,
-  NumberDecrementStepper,
-  NumberIncrementStepper,
-  NumberInputField,
-  NumberInputStepper,
-  FormControl,
-  FormLabel,
-} from '@chakra-ui/react';
+
 import {
   ariaDescribedByIds,
   labelValue,
@@ -16,43 +8,38 @@ import {
   StrictRJSFSchema,
   WidgetProps,
 } from '@rjsf/utils';
-import { getChakra } from '../utils';
+import { NumberInputValueChangeDetails } from '@chakra-ui/react';
+
+import { Field } from '../components/ui/field';
+import { NumberInputRoot } from '../components/ui/number-input';
 
 export default function UpDownWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: WidgetProps<T, S, F>
+  props: WidgetProps<T, S, F>,
 ) {
-  const { id, uiSchema, readonly, disabled, label, hideLabel, value, onChange, onBlur, onFocus, rawErrors, required } =
-    props;
-
-  const chakraProps = getChakra({ uiSchema });
+  const { id, readonly, disabled, label, hideLabel, value, onChange, onBlur, onFocus, rawErrors, required } = props;
 
-  const _onChange = (value: string | number) => onChange(value);
+  const _onChange = ({ value }: NumberInputValueChangeDetails) => onChange(value);
   const _onBlur = ({ target }: FocusEvent<HTMLInputElement | any>) => onBlur(id, target && target.value);
   const _onFocus = ({ target }: FocusEvent<HTMLInputElement | any>) => onFocus(id, target && target.value);
 
   return (
-    <FormControl
+    <Field
       mb={1}
-      {...chakraProps}
-      isDisabled={disabled || readonly}
-      isRequired={required}
-      isReadOnly={readonly}
-      isInvalid={rawErrors && rawErrors.length > 0}
+      disabled={disabled || readonly}
+      required={required}
+      readOnly={readonly}
+      invalid={rawErrors && rawErrors.length > 0}
+      label={labelValue(label, hideLabel || !label)}
     >
-      {labelValue(<FormLabel htmlFor={id}>{label}</FormLabel>, hideLabel || !label)}
-      <NumberInput
-        value={value ?? ''}
-        onChange={_onChange}
+      <NumberInputRoot
+        value={value}
+        onValueChange={_onChange}
         onBlur={_onBlur}
         onFocus={_onFocus}
         aria-describedby={ariaDescribedByIds<T>(id)}
-      >
-        <NumberInputField id={id} name={id} />
-        <NumberInputStepper>
-          <NumberIncrementStepper />
-          <NumberDecrementStepper />
-        </NumberInputStepper>
-      </NumberInput>
-    </FormControl>
+        id={id}
+        name={id}
+      />
+    </Field>
   );
 }

package/src/Widgets/Widgets.ts

@@ -5,6 +5,7 @@ import CheckboxesWidget from '../CheckboxesWidget/CheckboxesWidget';
 import RadioWidget from '../RadioWidget/RadioWidget';
 import RangeWidget from '../RangeWidget/RangeWidget';
 import SelectWidget from '../SelectWidget/SelectWidget';
+import NativeSelectWidget from '../SelectNativeWidget/NativeSelectWidget';
 import TextareaWidget from '../TextareaWidget/TextareaWidget';
 import UpDownWidget from '../UpDownWidget/UpDownWidget';
 import { FormContextType, RegistryWidgetsType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
@@ -12,7 +13,7 @@ import { FormContextType, RegistryWidgetsType, RJSFSchema, StrictRJSFSchema } fr
 export function generateWidgets<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(): RegistryWidgetsType<T, S, F> {
   return {
     AltDateTimeWidget,
@@ -22,6 +23,7 @@ export function generateWidgets<
     RadioWidget,
     RangeWidget,
     SelectWidget,
+    NativeSelectWidget,
     TextareaWidget,
     UpDownWidget,
   };

package/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -1,18 +1,21 @@
 import { FocusEvent } from 'react';
 import {
   ADDITIONAL_PROPERTY_FLAG,
+  buttonId,
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
   TranslatableString,
   WrapIfAdditionalTemplateProps,
 } from '@rjsf/utils';
-import { FormControl, FormLabel, Grid, GridItem, Input } from '@chakra-ui/react';
+import { Grid, GridItem, Input } from '@chakra-ui/react';
+
+import { Field } from '../components/ui/field';
 
 export default function WrapIfAdditionalTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(props: WrapIfAdditionalTemplateProps<T, S, F>) {
   const {
     children,
@@ -47,10 +50,7 @@ export default function WrapIfAdditionalTemplate<
   return (
     <Grid key={`${id}-key`} className={classNames} style={style} alignItems='center' gap={2}>
       <GridItem>
-        <FormControl isRequired={required}>
-          <FormLabel htmlFor={`${id}-key`} id={`${id}-key-label`}>
-            {keyLabel}
-          </FormLabel>
+        <Field required={required} label={keyLabel}>
           <Input
             defaultValue={label}
             disabled={disabled || readonly}
@@ -60,11 +60,13 @@ export default function WrapIfAdditionalTemplate<
             type='text'
             mb={1}
           />
-        </FormControl>
+        </Field>
       </GridItem>
       <GridItem>{children}</GridItem>
       <GridItem>
         <RemoveButton
+          id={buttonId<T>(id, 'remove')}
+          className='rjsf-object-property-remove'
           disabled={disabled || readonly}
           onClick={onDropPropertyClick(label)}
           uiSchema={uiSchema}

package/src/components/ui/alert.tsx

@@ -0,0 +1,47 @@
+import { forwardRef, ReactElement, ReactNode } from 'react';
+import { Alert as ChakraAlert } from '@chakra-ui/react';
+
+import { CloseButton } from './close-button';
+
+/**
+ * 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?: ReactNode;
+  endElement?: ReactNode;
+  title?: ReactNode;
+  icon?: ReactElement;
+  closable?: boolean;
+  onClose?: () => void;
+}
+
+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}>
+      {startElement || <ChakraAlert.Indicator>{icon}</ChakraAlert.Indicator>}
+      {children ? (
+        <ChakraAlert.Content>
+          <ChakraAlert.Title>{title}</ChakraAlert.Title>
+          <ChakraAlert.Description>{children}</ChakraAlert.Description>
+        </ChakraAlert.Content>
+      ) : (
+        <ChakraAlert.Title flex='1'>{title}</ChakraAlert.Title>
+      )}
+      {endElement}
+      {closable && (
+        <CloseButton size='sm' pos='relative' top='-2' insetEnd='-2' alignSelf='flex-start' onClick={onClose} />
+      )}
+    </ChakraAlert.Root>
+  );
+});

package/src/components/ui/checkbox.tsx

@@ -0,0 +1,28 @@
+import { forwardRef, InputHTMLAttributes, ReactNode, Ref } from 'react';
+import { Checkbox as ChakraCheckbox } from '@chakra-ui/react';
+
+export interface CheckboxProps extends ChakraCheckbox.RootProps {
+  icon?: ReactNode;
+  inputProps?: InputHTMLAttributes<HTMLInputElement>;
+  rootRef?: Ref<HTMLLabelElement>;
+}
+
+/**
+ * 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}>
+      <ChakraCheckbox.HiddenInput ref={ref} {...inputProps} />
+      <ChakraCheckbox.Control>{icon || <ChakraCheckbox.Indicator />}</ChakraCheckbox.Control>
+      {children != null && <ChakraCheckbox.Label>{children}</ChakraCheckbox.Label>}
+    </ChakraCheckbox.Root>
+  );
+});

package/src/components/ui/close-button.tsx

@@ -0,0 +1,21 @@
+import { forwardRef } from 'react';
+import type { ButtonProps } from '@chakra-ui/react';
+import { IconButton as ChakraIconButton } from '@chakra-ui/react';
+import { LuX } from 'react-icons/lu';
+
+export type CloseButtonProps = ButtonProps;
+
+/**
+ * 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 />}
+    </ChakraIconButton>
+  );
+});

package/src/components/ui/field.tsx

@@ -0,0 +1,37 @@
+import { forwardRef, ReactNode } from 'react';
+import { Field as ChakraField } from '@chakra-ui/react';
+
+export interface FieldProps extends Omit<ChakraField.RootProps, 'label'> {
+  label?: ReactNode;
+  helperText?: ReactNode;
+  errorText?: ReactNode;
+  optionalText?: ReactNode;
+}
+
+/**
+ * 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}>
+      {label && (
+        <ChakraField.Label>
+          {label}
+          <ChakraField.RequiredIndicator fallback={optionalText} />
+        </ChakraField.Label>
+      )}
+      {children}
+      {helperText && <ChakraField.HelperText>{helperText}</ChakraField.HelperText>}
+      {errorText && <ChakraField.ErrorText>{errorText}</ChakraField.ErrorText>}
+    </ChakraField.Root>
+  );
+});

package/src/components/ui/number-input.tsx

@@ -0,0 +1,31 @@
+import { forwardRef, useEffect, useRef } from 'react';
+import { NumberInput as ChakraNumberInput } from '@chakra-ui/react';
+
+export type NumberInputProps = ChakraNumberInput.RootProps;
+
+/**
+ * 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 inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.value = props.value || '';
+    }
+  }, [props.value]);
+
+  return (
+    <ChakraNumberInput.Root ref={ref} variant='outline' {...props}>
+      <ChakraNumberInput.Control>
+        <ChakraNumberInput.IncrementTrigger />
+        <ChakraNumberInput.DecrementTrigger />
+      </ChakraNumberInput.Control>
+      <ChakraNumberInput.Input ref={inputRef} />
+    </ChakraNumberInput.Root>
+  );
+});

package/src/components/ui/radio.tsx

@@ -0,0 +1,28 @@
+import { forwardRef, InputHTMLAttributes, Ref } from 'react';
+import { RadioGroup as ChakraRadioGroup } from '@chakra-ui/react';
+
+export interface RadioProps extends ChakraRadioGroup.ItemProps {
+  rootRef?: Ref<HTMLDivElement>;
+  inputProps?: InputHTMLAttributes<HTMLInputElement>;
+}
+
+/**
+ * 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}>
+      <ChakraRadioGroup.ItemHiddenInput ref={ref} {...inputProps} />
+      <ChakraRadioGroup.ItemIndicator />
+      {children && <ChakraRadioGroup.ItemText>{children}</ChakraRadioGroup.ItemText>}
+    </ChakraRadioGroup.Item>
+  );
+});
+
+export const RadioGroup = ChakraRadioGroup.Root;