@dragunio/fe-libs 0.1.5 → 0.1.6

package/README.md

@@ -88,6 +88,9 @@ import {
   PlusIcon,
   Table,
   Toggle,
+  Checkbox,
+  RadioButton,
+  RadioGroup,
   Selection,
   DateTimePicker,
 } from '@dragunio/fe-libs';
@@ -96,7 +99,7 @@ import '@dragunio/fe-libs/styles.css';
 
 ### Toggle
 
-`Toggle` is a native checkbox styled as a switch. It supports controlled and uncontrolled usage, including the standard `onChange`, `onClick`, and `disabled` props. The active color is green by default and accepts any CSS color.
+`Toggle` is a native checkbox styled as a switch. It supports controlled and uncontrolled usage, including the standard `onChange`, `onClick`, and `disabled` props. The active color is green by default and accepts any CSS color. Use `labelPosition="top"` to render its label above the switch; `right` is the default.
 
 ```tsx
 <Toggle
@@ -107,6 +110,28 @@ import '@dragunio/fe-libs/styles.css';
 />
 ```
 
+### Checkbox and radio controls
+
+`Checkbox` and `RadioButton` keep native input behaviour while adding a styled control. They accept `label` and `labelPosition="top" | "right"` (`right` by default).
+
+`RadioGroup` renders a named, accessible group from `options`. It is controlled with `value` or uncontrolled with `defaultValue`; `onChange` receives `(value, option, event)`. Its group label defaults to `top` and can also use `labelPosition="right"`.
+
+```tsx
+<Checkbox label="Send me product updates" defaultChecked />
+
+<RadioButton name="delivery" value="standard" label="Standard delivery" />
+
+<RadioGroup
+  label="Notification frequency"
+  value={frequency}
+  onChange={(value) => setFrequency(value)}
+  options={[
+    { label: 'Daily', value: 'daily' },
+    { label: 'Weekly', value: 'weekly' },
+  ]}
+/>
+```
+
 ### Resizable data table
 
 Pass `headers` and `data` to have `Table` derive the maximum column count and an initial width for each column. The resize callback emits pixel widths, ready to persist in user preferences.
@@ -138,10 +163,10 @@ The library exposes ESM, CommonJS, TypeScript declarations, and keeps React as a
 - `Drawer` is a portal-based modal panel with `left`, `right`, `top`, and `bottom` slide-in animations. Use `fullScreen` for a full-viewport panel and `footer` for fixed actions below the scrollable body.
 - `Selection` is a rounded custom dropdown inspired by DropdownCustom, with single/multiple modes, optional search, clear action, tags, form-field values, and keyboard navigation.
 - `DateTimePicker` supports `mode="single"` and `mode="range"`; its default format is `dd/MM/yyyy HH:mm`.
-- `NumberInput` and `CurrencyInput` format values immediately while typing (`1000` → `1,000`) and keep up to two fractional digits by default. Use `allowDecimal`, `decimals`, `min`, and `max` to control decimal input and numeric limits. Both support `error` and `errorMessage` with the same red border/message treatment as `TextInput`. `CurrencyInput` adds a `VND` suffix by default, or a currency dropdown through `currencies`.
+- `NumberInput` and `CurrencyInput` format values immediately while typing (`1000` → `1,000`) and keep up to two fractional digits by default. Both include accessible up/down controls (and arrow-key support); use `step` or `showStepper` to configure them. `NumberInput` also accepts `prefix`/`suffix` adornments. Use `allowDecimal`, `decimals`, `min`, and `max` to control decimal input and numeric limits. Both support `error` and `errorMessage` with the same red border/message treatment as `TextInput`. `CurrencyInput` adds a `VND` suffix by default, or a currency dropdown through `currencies`.
 - `Tooltip` shows accessible content on hover and focus.
 - `ExpandableSection` provides controlled and uncontrolled expand/collapse behavior.
-- `TextInput` and `TextArea` support `error`/`errorMessage`, `helperText`, `clearable`, `onClear`, and `onValueChange`. `TextInput` also accepts `label`, `isRequired`, and `prefix`/`suffix` adornments. Passing a string to `error` shows it below the field and applies the error border.
+- `TextInput` and `TextArea` support `error`/`errorMessage`, `helperText`, `clearable`, `onClear`, and `onValueChange`. `TextArea` also accepts `autosize` (default `false`) to grow with its content. `TextInput` also accepts `label`, `isRequired`, and `prefix`/`suffix` adornments. Passing a string to `error` shows it below the field and applies the error border.
 - `Modal` is a centered portal dialog in `small`, `medium`, `large`, `xlarge`, and `full` sizes. Its close control and `actions` are library `Button` instances.
 - `Loading` provides `small`, `medium`, and `large` circular indicators (or a custom pixel `size`); use `Skeleton.Circle` and `Skeleton.Square` with `size`, or `Skeleton.Box` and `Skeleton.Line` with `width` and `height`.
 - `ProgressBar` is determinate when `value` is supplied and renders an indeterminate back-and-forth animation when it is omitted.

package/dist/{chunk-3TCR34LS.mjs → chunk-NDMLXSI5.mjs}

@@ -118,6 +118,18 @@ function ChevronDownIcon(props) {
     }
   ) });
 }
+function ChevronUpIcon(props) {
+  return /* @__PURE__ */ jsx4("svg", { ...iconProps4(props), children: /* @__PURE__ */ jsx4(
+    "path",
+    {
+      d: "m6 15 6-6 6 6",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
 function CloseIcon(props) {
   return /* @__PURE__ */ jsx4("svg", { ...iconProps4(props), children: /* @__PURE__ */ jsx4(
     "path",
@@ -164,6 +176,7 @@ export {
   lock_unlocked,
   PlusIcon,
   ChevronDownIcon,
+  ChevronUpIcon,
   CloseIcon,
   SearchIcon
 };

package/dist/icons.d.mts

@@ -26,7 +26,8 @@ type IconProps = SVGProps<SVGSVGElement> & {
 };
 declare function PlusIcon(props: IconProps): react.JSX.Element;
 declare function ChevronDownIcon(props: IconProps): react.JSX.Element;
+declare function ChevronUpIcon(props: IconProps): react.JSX.Element;
 declare function CloseIcon(props: IconProps): react.JSX.Element;
 declare function SearchIcon(props: IconProps): react.JSX.Element;
 
-export { ChevronDownIcon, CloseIcon, type IconProps, PlusIcon, SearchIcon, arrow_left, check_square_fill, chevron_down, chevron_left, chevron_right, chevron_up, copy, key, lock, lock_unlocked, log_out, minus_square, plus, plus_square, search, trash, x_close };
+export { ChevronDownIcon, ChevronUpIcon, CloseIcon, type IconProps, PlusIcon, SearchIcon, arrow_left, check_square_fill, chevron_down, chevron_left, chevron_right, chevron_up, copy, key, lock, lock_unlocked, log_out, minus_square, plus, plus_square, search, trash, x_close };

package/dist/icons.d.ts

@@ -26,7 +26,8 @@ type IconProps = SVGProps<SVGSVGElement> & {
 };
 declare function PlusIcon(props: IconProps): react.JSX.Element;
 declare function ChevronDownIcon(props: IconProps): react.JSX.Element;
+declare function ChevronUpIcon(props: IconProps): react.JSX.Element;
 declare function CloseIcon(props: IconProps): react.JSX.Element;
 declare function SearchIcon(props: IconProps): react.JSX.Element;
 
-export { ChevronDownIcon, CloseIcon, type IconProps, PlusIcon, SearchIcon, arrow_left, check_square_fill, chevron_down, chevron_left, chevron_right, chevron_up, copy, key, lock, lock_unlocked, log_out, minus_square, plus, plus_square, search, trash, x_close };
+export { ChevronDownIcon, ChevronUpIcon, CloseIcon, type IconProps, PlusIcon, SearchIcon, arrow_left, check_square_fill, chevron_down, chevron_left, chevron_right, chevron_up, copy, key, lock, lock_unlocked, log_out, minus_square, plus, plus_square, search, trash, x_close };

package/dist/icons.js

@@ -21,6 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var icons_exports = {};
 __export(icons_exports, {
   ChevronDownIcon: () => ChevronDownIcon,
+  ChevronUpIcon: () => ChevronUpIcon,
   CloseIcon: () => CloseIcon,
   PlusIcon: () => PlusIcon,
   SearchIcon: () => SearchIcon,
@@ -164,6 +165,18 @@ function ChevronDownIcon(props) {
     }
   ) });
 }
+function ChevronUpIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { ...iconProps4(props), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "path",
+    {
+      d: "m6 15 6-6 6 6",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
 function CloseIcon(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { ...iconProps4(props), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "path",
@@ -192,6 +205,7 @@ function SearchIcon(props) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ChevronDownIcon,
+  ChevronUpIcon,
   CloseIcon,
   PlusIcon,
   SearchIcon,

package/dist/icons.mjs

@@ -1,5 +1,6 @@
 import {
   ChevronDownIcon,
+  ChevronUpIcon,
   CloseIcon,
   PlusIcon,
   SearchIcon,
@@ -20,9 +21,10 @@ import {
   search,
   trash,
   x_close
-} from "./chunk-3TCR34LS.mjs";
+} from "./chunk-NDMLXSI5.mjs";
 export {
   ChevronDownIcon,
+  ChevronUpIcon,
   CloseIcon,
   PlusIcon,
   SearchIcon,

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, TableHTMLAttributes, HTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, KeyboardEventHandler, ReactElement } from 'react';
-export { ChevronDownIcon, CloseIcon, IconProps, PlusIcon, SearchIcon, arrow_left, check_square_fill, chevron_down, chevron_left, chevron_right, chevron_up, copy, key, lock, lock_unlocked, log_out, minus_square, plus, plus_square, search, trash, x_close } from './icons.mjs';
+import { ButtonHTMLAttributes, ReactNode, TableHTMLAttributes, HTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, KeyboardEventHandler, ChangeEvent, ReactElement } from 'react';
+export { ChevronDownIcon, ChevronUpIcon, CloseIcon, IconProps, PlusIcon, SearchIcon, arrow_left, check_square_fill, chevron_down, chevron_left, chevron_right, chevron_up, copy, key, lock, lock_unlocked, log_out, minus_square, plus, plus_square, search, trash, x_close } from './icons.mjs';
 
 type ButtonHierarchy = 'primary' | 'secondary-gray' | 'secondary-color' | 'tertiary-gray' | 'tertiary-color';
 type ButtonSize = '24' | '32' | '40';
@@ -92,12 +92,16 @@ type ToggleProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'color' | 'type'>
     color?: string;
     /** Optional text displayed next to the switch. */
     label?: ReactNode;
+    /** Places the label above or to the right of the switch. Defaults to `right`. */
+    labelPosition?: 'top' | 'right';
 };
 declare const Toggle: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "color" | "type"> & {
     /** Active track color. Accepts any valid CSS color, for example `#16a34a`. */
     color?: string;
     /** Optional text displayed next to the switch. */
     label?: ReactNode;
+    /** Places the label above or to the right of the switch. Defaults to `right`. */
+    labelPosition?: "top" | "right";
 } & react.RefAttributes<HTMLInputElement>>;
 
 type DrawerProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
@@ -175,11 +179,14 @@ declare const TextArea: react.ForwardRefExoticComponent<Omit<react.TextareaHTMLA
     onValueChange?: (value: string) => void;
     clearLabel?: string;
 } & {
+    autosize?: boolean;
     value?: string;
     defaultValue?: string;
 } & react.RefAttributes<HTMLTextAreaElement>>;
 
 type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'defaultValue'> & TextFieldBaseProps & {
+    /** Expands the textarea to fit its content. */
+    autosize?: boolean;
     value?: string;
     defaultValue?: string;
 };
@@ -241,7 +248,7 @@ declare const Selection: react.ForwardRefExoticComponent<Omit<react.HTMLAttribut
 
 declare function formatNumber(value: number, decimals?: number, thousandSeparator?: string, decimalSeparator?: string): string;
 /** A text input that displays numbers as 1,000.05 by default. */
-declare const NumberInput: react.ForwardRefExoticComponent<Omit<react.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange" | "max" | "min"> & {
+declare const NumberInput: react.ForwardRefExoticComponent<Omit<react.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange" | "step" | "max" | "min"> & {
     value?: number | null;
     defaultValue?: number | null;
     onValueChange?: (value: number | null) => void;
@@ -251,10 +258,18 @@ declare const NumberInput: react.ForwardRefExoticComponent<Omit<react.InputHTMLA
     max?: number;
     decimalSeparator?: string;
     thousandSeparator?: string;
+    prefix?: react.ReactNode;
+    suffix?: react.ReactNode;
+    Prefix?: react.ReactNode;
+    Suffix?: react.ReactNode;
     endAdornment?: react.ReactNode;
+    step?: number;
+    showStepper?: boolean;
+    incrementLabel?: string;
+    decrementLabel?: string;
 } & FieldBaseProps & react.RefAttributes<HTMLInputElement>>;
 
-type NumberInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max'> & {
+type NumberInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max' | 'step'> & {
     value?: number | null;
     defaultValue?: number | null;
     onValueChange?: (value: number | null) => void;
@@ -267,8 +282,24 @@ type NumberInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'va
     max?: number;
     decimalSeparator?: string;
     thousandSeparator?: string;
+    /** Content rendered inside the control before the numeric value. */
+    prefix?: ReactNode;
+    /** Content rendered inside the control after the numeric value. */
+    suffix?: ReactNode;
+    /** Alias for prefix. */
+    Prefix?: ReactNode;
+    /** Alias for suffix. */
+    Suffix?: ReactNode;
     /** Content rendered inside the control after the numeric value. */
     endAdornment?: ReactNode;
+    /** Amount added or subtracted by the increment and decrement controls. Defaults to 1. */
+    step?: number;
+    /** Shows the increment and decrement controls. Defaults to true. */
+    showStepper?: boolean;
+    /** Accessible label for the increment control. */
+    incrementLabel?: string;
+    /** Accessible label for the decrement control. */
+    decrementLabel?: string;
 } & FieldBaseProps;
 
 type Currency = {
@@ -311,6 +342,68 @@ type DateTimePickerProps = DateTimePickerSingleProps | DateTimePickerRangeProps;
 /** Calendar and time picker. Supports a single Date or [start, end] range. */
 declare function DateTimePicker(props: DateTimePickerProps): react.JSX.Element;
 
+type ControlLabelPosition = 'top' | 'right';
+type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
+    /** Optional text associated with the checkbox. */
+    label?: ReactNode;
+    /** Places the label above or to the right of the checkbox. Defaults to `right`. */
+    labelPosition?: ControlLabelPosition;
+};
+
+/** A native checkbox with an accessible, custom visual control. */
+declare const Checkbox: react.ForwardRefExoticComponent<Omit<react.InputHTMLAttributes<HTMLInputElement>, "type"> & {
+    label?: react.ReactNode;
+    labelPosition?: ControlLabelPosition;
+} & react.RefAttributes<HTMLInputElement>>;
+
+/** A native radio input with an accessible, custom visual control. */
+declare const RadioButton: react.ForwardRefExoticComponent<Omit<react.InputHTMLAttributes<HTMLInputElement>, "type"> & {
+    label?: react.ReactNode;
+    labelPosition?: ControlLabelPosition;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type RadioButtonProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
+    /** Optional text associated with the radio button. */
+    label?: ReactNode;
+    /** Places the label above or to the right of the radio button. Defaults to `right`. */
+    labelPosition?: ControlLabelPosition;
+};
+
+type RadioValue = string | number;
+type RadioGroupOption = {
+    label: ReactNode;
+    value: RadioValue;
+    disabled?: boolean;
+};
+type RadioGroupProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'value'> & {
+    /** Optional text that names the radio group. */
+    label?: ReactNode;
+    /** Places the group label above or to the right of its options. Defaults to `top`. */
+    labelPosition?: ControlLabelPosition;
+    options: RadioGroupOption[];
+    name?: string;
+    value?: RadioValue;
+    defaultValue?: RadioValue;
+    onChange?: (value: RadioValue, option: RadioGroupOption, event: ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    direction?: 'horizontal' | 'vertical';
+    isRequired?: boolean;
+};
+
+/** A named collection of native radio buttons with controlled and uncontrolled values. */
+declare const RadioGroup: react.ForwardRefExoticComponent<Omit<react.HTMLAttributes<HTMLDivElement>, "value" | "defaultValue" | "onChange"> & {
+    label?: react.ReactNode;
+    labelPosition?: ControlLabelPosition;
+    options: RadioGroupOption[];
+    name?: string;
+    value?: RadioValue;
+    defaultValue?: RadioValue;
+    onChange?: (value: RadioValue, option: RadioGroupOption, event: ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    direction?: "horizontal" | "vertical";
+    isRequired?: boolean;
+} & react.RefAttributes<HTMLDivElement>>;
+
 type TooltipProps = Omit<HTMLAttributes<HTMLSpanElement>, 'content'> & {
     content: ReactNode;
     children: ReactElement;
@@ -513,4 +606,4 @@ type SnackbarProps = Omit<HTMLAttributes<HTMLDivElement>, 'onClose'> & {
 /** A controlled, temporary notification surface. */
 declare function Snackbar({ open, message, autoHideDuration, onClose, action, anchorOrigin, closeLabel, className, ...props }: SnackbarProps): react.JSX.Element | null;
 
-export { Button, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, Chip, type ChipProps, type ChipStatus, type ChipVariant, type ColumnResizeHandler, type Currency, CurrencyInput, type CurrencyInputProps, type DateRange, DateTimePicker, type DateTimePickerProps, type DateTimePickerRangeProps, type DateTimePickerSingleProps, type DescriptionDisplay, Drawer, type DrawerProps, ExpandableSection, type ExpandableSectionProps, type FieldError, Loading, type LoadingProps, type LoadingSize, Message, type MessageOptions, type MessageProps, type MessageSeverity, Modal, type ModalAction, type ModalProps, type ModalSize, NumberInput, type NumberInputProps, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, Selection, type SelectionOption, type SelectionProps, type SelectionValue, Skeleton, SkeletonBox, type SkeletonBoxProps, SkeletonCircle, SkeletonLine, type SkeletonProps, type SkeletonSizeProps, SkeletonSquare, type SkeletonVariant, Snackbar, type SnackbarAnchorOrigin, type SnackbarProps, Table, TableBody, TableCaption, TableCell, type TableData, TableHead, TableHeader, type TablePaginationPosition, type TableProps, TableRow, TextArea, type TextAreaProps, TextInput, type TextInputProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, formatNumber, getIconSize, message };
+export { Button, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipStatus, type ChipVariant, type ColumnResizeHandler, type ControlLabelPosition, type Currency, CurrencyInput, type CurrencyInputProps, type DateRange, DateTimePicker, type DateTimePickerProps, type DateTimePickerRangeProps, type DateTimePickerSingleProps, type DescriptionDisplay, Drawer, type DrawerProps, ExpandableSection, type ExpandableSectionProps, type FieldError, Loading, type LoadingProps, type LoadingSize, Message, type MessageOptions, type MessageProps, type MessageSeverity, Modal, type ModalAction, type ModalProps, type ModalSize, NumberInput, type NumberInputProps, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioValue, Selection, type SelectionOption, type SelectionProps, type SelectionValue, Skeleton, SkeletonBox, type SkeletonBoxProps, SkeletonCircle, SkeletonLine, type SkeletonProps, type SkeletonSizeProps, SkeletonSquare, type SkeletonVariant, Snackbar, type SnackbarAnchorOrigin, type SnackbarProps, Table, TableBody, TableCaption, TableCell, type TableData, TableHead, TableHeader, type TablePaginationPosition, type TableProps, TableRow, TextArea, type TextAreaProps, TextInput, type TextInputProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, formatNumber, getIconSize, message };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, TableHTMLAttributes, HTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, KeyboardEventHandler, ReactElement } from 'react';
-export { ChevronDownIcon, CloseIcon, IconProps, PlusIcon, SearchIcon, arrow_left, check_square_fill, chevron_down, chevron_left, chevron_right, chevron_up, copy, key, lock, lock_unlocked, log_out, minus_square, plus, plus_square, search, trash, x_close } from './icons.js';
+import { ButtonHTMLAttributes, ReactNode, TableHTMLAttributes, HTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, KeyboardEventHandler, ChangeEvent, ReactElement } from 'react';
+export { ChevronDownIcon, ChevronUpIcon, CloseIcon, IconProps, PlusIcon, SearchIcon, arrow_left, check_square_fill, chevron_down, chevron_left, chevron_right, chevron_up, copy, key, lock, lock_unlocked, log_out, minus_square, plus, plus_square, search, trash, x_close } from './icons.js';
 
 type ButtonHierarchy = 'primary' | 'secondary-gray' | 'secondary-color' | 'tertiary-gray' | 'tertiary-color';
 type ButtonSize = '24' | '32' | '40';
@@ -92,12 +92,16 @@ type ToggleProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'color' | 'type'>
     color?: string;
     /** Optional text displayed next to the switch. */
     label?: ReactNode;
+    /** Places the label above or to the right of the switch. Defaults to `right`. */
+    labelPosition?: 'top' | 'right';
 };
 declare const Toggle: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "color" | "type"> & {
     /** Active track color. Accepts any valid CSS color, for example `#16a34a`. */
     color?: string;
     /** Optional text displayed next to the switch. */
     label?: ReactNode;
+    /** Places the label above or to the right of the switch. Defaults to `right`. */
+    labelPosition?: "top" | "right";
 } & react.RefAttributes<HTMLInputElement>>;
 
 type DrawerProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
@@ -175,11 +179,14 @@ declare const TextArea: react.ForwardRefExoticComponent<Omit<react.TextareaHTMLA
     onValueChange?: (value: string) => void;
     clearLabel?: string;
 } & {
+    autosize?: boolean;
     value?: string;
     defaultValue?: string;
 } & react.RefAttributes<HTMLTextAreaElement>>;
 
 type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'defaultValue'> & TextFieldBaseProps & {
+    /** Expands the textarea to fit its content. */
+    autosize?: boolean;
     value?: string;
     defaultValue?: string;
 };
@@ -241,7 +248,7 @@ declare const Selection: react.ForwardRefExoticComponent<Omit<react.HTMLAttribut
 
 declare function formatNumber(value: number, decimals?: number, thousandSeparator?: string, decimalSeparator?: string): string;
 /** A text input that displays numbers as 1,000.05 by default. */
-declare const NumberInput: react.ForwardRefExoticComponent<Omit<react.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange" | "max" | "min"> & {
+declare const NumberInput: react.ForwardRefExoticComponent<Omit<react.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange" | "step" | "max" | "min"> & {
     value?: number | null;
     defaultValue?: number | null;
     onValueChange?: (value: number | null) => void;
@@ -251,10 +258,18 @@ declare const NumberInput: react.ForwardRefExoticComponent<Omit<react.InputHTMLA
     max?: number;
     decimalSeparator?: string;
     thousandSeparator?: string;
+    prefix?: react.ReactNode;
+    suffix?: react.ReactNode;
+    Prefix?: react.ReactNode;
+    Suffix?: react.ReactNode;
     endAdornment?: react.ReactNode;
+    step?: number;
+    showStepper?: boolean;
+    incrementLabel?: string;
+    decrementLabel?: string;
 } & FieldBaseProps & react.RefAttributes<HTMLInputElement>>;
 
-type NumberInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max'> & {
+type NumberInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max' | 'step'> & {
     value?: number | null;
     defaultValue?: number | null;
     onValueChange?: (value: number | null) => void;
@@ -267,8 +282,24 @@ type NumberInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'va
     max?: number;
     decimalSeparator?: string;
     thousandSeparator?: string;
+    /** Content rendered inside the control before the numeric value. */
+    prefix?: ReactNode;
+    /** Content rendered inside the control after the numeric value. */
+    suffix?: ReactNode;
+    /** Alias for prefix. */
+    Prefix?: ReactNode;
+    /** Alias for suffix. */
+    Suffix?: ReactNode;
     /** Content rendered inside the control after the numeric value. */
     endAdornment?: ReactNode;
+    /** Amount added or subtracted by the increment and decrement controls. Defaults to 1. */
+    step?: number;
+    /** Shows the increment and decrement controls. Defaults to true. */
+    showStepper?: boolean;
+    /** Accessible label for the increment control. */
+    incrementLabel?: string;
+    /** Accessible label for the decrement control. */
+    decrementLabel?: string;
 } & FieldBaseProps;
 
 type Currency = {
@@ -311,6 +342,68 @@ type DateTimePickerProps = DateTimePickerSingleProps | DateTimePickerRangeProps;
 /** Calendar and time picker. Supports a single Date or [start, end] range. */
 declare function DateTimePicker(props: DateTimePickerProps): react.JSX.Element;
 
+type ControlLabelPosition = 'top' | 'right';
+type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
+    /** Optional text associated with the checkbox. */
+    label?: ReactNode;
+    /** Places the label above or to the right of the checkbox. Defaults to `right`. */
+    labelPosition?: ControlLabelPosition;
+};
+
+/** A native checkbox with an accessible, custom visual control. */
+declare const Checkbox: react.ForwardRefExoticComponent<Omit<react.InputHTMLAttributes<HTMLInputElement>, "type"> & {
+    label?: react.ReactNode;
+    labelPosition?: ControlLabelPosition;
+} & react.RefAttributes<HTMLInputElement>>;
+
+/** A native radio input with an accessible, custom visual control. */
+declare const RadioButton: react.ForwardRefExoticComponent<Omit<react.InputHTMLAttributes<HTMLInputElement>, "type"> & {
+    label?: react.ReactNode;
+    labelPosition?: ControlLabelPosition;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type RadioButtonProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
+    /** Optional text associated with the radio button. */
+    label?: ReactNode;
+    /** Places the label above or to the right of the radio button. Defaults to `right`. */
+    labelPosition?: ControlLabelPosition;
+};
+
+type RadioValue = string | number;
+type RadioGroupOption = {
+    label: ReactNode;
+    value: RadioValue;
+    disabled?: boolean;
+};
+type RadioGroupProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'value'> & {
+    /** Optional text that names the radio group. */
+    label?: ReactNode;
+    /** Places the group label above or to the right of its options. Defaults to `top`. */
+    labelPosition?: ControlLabelPosition;
+    options: RadioGroupOption[];
+    name?: string;
+    value?: RadioValue;
+    defaultValue?: RadioValue;
+    onChange?: (value: RadioValue, option: RadioGroupOption, event: ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    direction?: 'horizontal' | 'vertical';
+    isRequired?: boolean;
+};
+
+/** A named collection of native radio buttons with controlled and uncontrolled values. */
+declare const RadioGroup: react.ForwardRefExoticComponent<Omit<react.HTMLAttributes<HTMLDivElement>, "value" | "defaultValue" | "onChange"> & {
+    label?: react.ReactNode;
+    labelPosition?: ControlLabelPosition;
+    options: RadioGroupOption[];
+    name?: string;
+    value?: RadioValue;
+    defaultValue?: RadioValue;
+    onChange?: (value: RadioValue, option: RadioGroupOption, event: ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    direction?: "horizontal" | "vertical";
+    isRequired?: boolean;
+} & react.RefAttributes<HTMLDivElement>>;
+
 type TooltipProps = Omit<HTMLAttributes<HTMLSpanElement>, 'content'> & {
     content: ReactNode;
     children: ReactElement;
@@ -513,4 +606,4 @@ type SnackbarProps = Omit<HTMLAttributes<HTMLDivElement>, 'onClose'> & {
 /** A controlled, temporary notification surface. */
 declare function Snackbar({ open, message, autoHideDuration, onClose, action, anchorOrigin, closeLabel, className, ...props }: SnackbarProps): react.JSX.Element | null;
 
-export { Button, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, Chip, type ChipProps, type ChipStatus, type ChipVariant, type ColumnResizeHandler, type Currency, CurrencyInput, type CurrencyInputProps, type DateRange, DateTimePicker, type DateTimePickerProps, type DateTimePickerRangeProps, type DateTimePickerSingleProps, type DescriptionDisplay, Drawer, type DrawerProps, ExpandableSection, type ExpandableSectionProps, type FieldError, Loading, type LoadingProps, type LoadingSize, Message, type MessageOptions, type MessageProps, type MessageSeverity, Modal, type ModalAction, type ModalProps, type ModalSize, NumberInput, type NumberInputProps, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, Selection, type SelectionOption, type SelectionProps, type SelectionValue, Skeleton, SkeletonBox, type SkeletonBoxProps, SkeletonCircle, SkeletonLine, type SkeletonProps, type SkeletonSizeProps, SkeletonSquare, type SkeletonVariant, Snackbar, type SnackbarAnchorOrigin, type SnackbarProps, Table, TableBody, TableCaption, TableCell, type TableData, TableHead, TableHeader, type TablePaginationPosition, type TableProps, TableRow, TextArea, type TextAreaProps, TextInput, type TextInputProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, formatNumber, getIconSize, message };
+export { Button, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipStatus, type ChipVariant, type ColumnResizeHandler, type ControlLabelPosition, type Currency, CurrencyInput, type CurrencyInputProps, type DateRange, DateTimePicker, type DateTimePickerProps, type DateTimePickerRangeProps, type DateTimePickerSingleProps, type DescriptionDisplay, Drawer, type DrawerProps, ExpandableSection, type ExpandableSectionProps, type FieldError, Loading, type LoadingProps, type LoadingSize, Message, type MessageOptions, type MessageProps, type MessageSeverity, Modal, type ModalAction, type ModalProps, type ModalSize, NumberInput, type NumberInputProps, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioValue, Selection, type SelectionOption, type SelectionProps, type SelectionValue, Skeleton, SkeletonBox, type SkeletonBoxProps, SkeletonCircle, SkeletonLine, type SkeletonProps, type SkeletonSizeProps, SkeletonSquare, type SkeletonVariant, Snackbar, type SnackbarAnchorOrigin, type SnackbarProps, Table, TableBody, TableCaption, TableCell, type TableData, TableHead, TableHeader, type TablePaginationPosition, type TableProps, TableRow, TextArea, type TextAreaProps, TextInput, type TextInputProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, formatNumber, getIconSize, message };