draft-components 1.0.0-beta.10 → 1.0.0-beta.12

package/cjs/components/password-input/password-input.cjs

@@ -24,7 +24,7 @@ const PasswordInput = react.forwardRef(function PasswordInput({ isDefaultVisible
     }
     const handleButtonClick = () => setVisible(!visible);
     const button = (jsxRuntime.jsx(tooltip.Tooltip, { content: content, children: jsxRuntime.jsx("button", { className: "dc-password-input__btn", type: "button", onClick: handleButtonClick, children: jsxRuntime.jsx(Icon, { className: "dc-password-input__icon", "aria-hidden": true }) }) }));
-    return (jsxRuntime.jsx(textInput.TextInput, { ...props, className: reactHelpers.classNames('dc-password-input', className), ref: ref, type: type, suffix: button }));
+    return (jsxRuntime.jsx(textInput.TextInput, { ...props, className: reactHelpers.classNames('dc-password-input', className), ref: ref, type: type, rightAddOn: button }));
 });
 
 exports.PasswordInput = PasswordInput;

package/cjs/components/selection-control/selection-control.cjs

@@ -12,7 +12,7 @@ function SelectionControl({ label: label$1, labelFor, caption: caption$1, classN
     const shouldRenderCaption = Boolean(caption$1);
     return (jsxRuntime.jsxs("div", { ...props, className: reactHelpers.classNames('dc-selection-control', className), children: [jsxRuntime.jsx("div", { className: "dc-selection-control__input", children: typeof children === 'function'
                     ? children({ id: controlId })
-                    : children }), jsxRuntime.jsx(label.Label, { className: "dc-selection-control__label", htmlFor: controlId, children: label$1 }), shouldRenderCaption && (jsxRuntime.jsx(caption.Caption, { className: "dc-selection-control__caption", children: caption$1 }))] }));
+                    : react.cloneElement(children, { id: children.props.id || controlId }) }), jsxRuntime.jsx(label.Label, { className: "dc-selection-control__label", htmlFor: controlId, children: label$1 }), shouldRenderCaption && (jsxRuntime.jsx(caption.Caption, { className: "dc-selection-control__caption", children: caption$1 }))] }));
 }
 
 exports.SelectionControl = SelectionControl;

package/cjs/components/text-input/text-input.cjs

@@ -4,23 +4,23 @@ const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
 const reactHelpers = require('../../lib/react-helpers.cjs');
 
-const TextInput = react.forwardRef(function TextInput({ hasError = false, isBlock = false, type = 'text', size = 'md', prefix, suffix, style, className, disabled, width, htmlSize, onChange, onChangeValue, ...props }, ref) {
-    const shouldRenderPrefix = Boolean(prefix);
-    const shouldRenderSuffix = Boolean(suffix);
+const TextInput = react.forwardRef(function TextInput({ hasError = false, isBlock = false, type = 'text', size = 'md', leftAddOn, rightAddOn, style, className, disabled, width, htmlSize, onChange, onChangeValue, ...props }, ref) {
+    const showLeftAddOn = Boolean(leftAddOn);
+    const showRightAddOn = Boolean(rightAddOn);
     return (jsxRuntime.jsxs("div", { style: style, className: reactHelpers.classNames(className, 'dc-text-input__container', {
             [`dc-text-input__container_${size}`]: size,
+            'dc-text-input__container_block': isBlock,
             'dc-text-input__container_disabled': disabled,
             'dc-text-input__container_has_error': hasError,
-            'dc-text-input__container_block': isBlock,
-            'dc-text-input__container_has_prefix': shouldRenderPrefix,
-            'dc-text-input__container_has_suffix': shouldRenderSuffix,
-        }), children: [shouldRenderPrefix && (jsxRuntime.jsx("div", { className: "dc-text-input__prefix", children: prefix })), jsxRuntime.jsx("input", { ...props, className: reactHelpers.classNames({
+            'dc-text-input__container_has_left-addon': showLeftAddOn,
+            'dc-text-input__container_has_right-addon': showRightAddOn,
+        }), children: [showLeftAddOn && (jsxRuntime.jsx("div", { className: "dc-text-input__left-addon", children: leftAddOn })), jsxRuntime.jsx("input", { ...props, className: reactHelpers.classNames({
                     'dc-text-input': true,
                     [`dc-text-input_width_${width}`]: width,
                 }), ref: ref, type: type, size: htmlSize, disabled: disabled, onChange: (event) => {
                     onChange?.(event);
                     onChangeValue?.(event.target.value);
-                } }), shouldRenderSuffix && (jsxRuntime.jsx("div", { className: "dc-text-input__suffix", children: suffix }))] }));
+                } }), showRightAddOn && (jsxRuntime.jsx("div", { className: "dc-text-input__right-addon", children: rightAddOn }))] }));
 });
 
 exports.TextInput = TextInput;

package/css/draft-components.css

@@ -1282,35 +1282,35 @@
   width: 40.5ch;
 }
 
-.dc-text-input__prefix,
-.dc-text-input__suffix {
+.dc-text-input__left-addon,
+.dc-text-input__right-addon {
   display: inline-flex;
   flex: none;
   align-items: center;
   box-sizing: border-box;
 }
 
-.dc-text-input__prefix {
+.dc-text-input__left-addon {
   color: var(--dc-input-prefix-color);
 }
 
-.dc-text-input__suffix {
+.dc-text-input__right-addon {
   color: var(--dc-input-suffix-color);
 }
 
-.dc-text-input__container_has_prefix {
+.dc-text-input__container_has_left-addon {
   padding-left: var(--dc-input-padding-x);
 }
 
-.dc-text-input__container_has_prefix .dc-text-input {
+.dc-text-input__container_has_left-addon .dc-text-input {
   padding-left: calc(var(--dc-input-padding-x) * 0.5);
 }
 
-.dc-text-input__container_has_suffix {
+.dc-text-input__container_has_right-addon {
   padding-right: var(--dc-input-padding-x);
 }
 
-.dc-text-input__container_has_suffix .dc-text-input {
+.dc-text-input__container_has_right-addon .dc-text-input {
   padding-right: calc(var(--dc-input-padding-x) * 0.5);
 }
 
@@ -1593,6 +1593,7 @@
   --dc-switch-focus-ring-color: var(--dc-focus-ring-color);
 
   color-scheme: light;
+  display: inline-flex;
 }
 
 .dc-switch__input {
@@ -1698,6 +1699,7 @@
   --dc-checkbox-focus-ring-color: var(--dc-focus-ring-color);
 
   color-scheme: light;
+  display: inline-flex;
 }
 
 .dc-checkbox__input {
@@ -1771,6 +1773,7 @@
   --dc-radio-color-focus-ring: var(--dc-focus-ring-color);
 
   color-scheme: light;
+  display: inline-flex;
 }
 
 .dc-radio__input {
@@ -2419,6 +2422,7 @@
 }
 
 .dc-selection-control__input {
+  display: inline-flex;
   grid-area: input;
 }
 

package/esm/components/password-input/password-input.js

@@ -22,7 +22,7 @@ const PasswordInput = forwardRef(function PasswordInput({ isDefaultVisible = fal
     }
     const handleButtonClick = () => setVisible(!visible);
     const button = (jsx(Tooltip, { content: content, children: jsx("button", { className: "dc-password-input__btn", type: "button", onClick: handleButtonClick, children: jsx(Icon, { className: "dc-password-input__icon", "aria-hidden": true }) }) }));
-    return (jsx(TextInput, { ...props, className: classNames('dc-password-input', className), ref: ref, type: type, suffix: button }));
+    return (jsx(TextInput, { ...props, className: classNames('dc-password-input', className), ref: ref, type: type, rightAddOn: button }));
 });
 
 export { PasswordInput };

package/esm/components/selection-control/selection-control.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useId } from 'react';
+import { useId, cloneElement } from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 import { Label } from '../label/label.js';
 import { Caption } from '../caption/caption.js';
@@ -10,7 +10,7 @@ function SelectionControl({ label, labelFor, caption, className, children, ...pr
     const shouldRenderCaption = Boolean(caption);
     return (jsxs("div", { ...props, className: classNames('dc-selection-control', className), children: [jsx("div", { className: "dc-selection-control__input", children: typeof children === 'function'
                     ? children({ id: controlId })
-                    : children }), jsx(Label, { className: "dc-selection-control__label", htmlFor: controlId, children: label }), shouldRenderCaption && (jsx(Caption, { className: "dc-selection-control__caption", children: caption }))] }));
+                    : cloneElement(children, { id: children.props.id || controlId }) }), jsx(Label, { className: "dc-selection-control__label", htmlFor: controlId, children: label }), shouldRenderCaption && (jsx(Caption, { className: "dc-selection-control__caption", children: caption }))] }));
 }
 
 export { SelectionControl };

package/esm/components/text-input/text-input.js

@@ -2,23 +2,23 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 
-const TextInput = forwardRef(function TextInput({ hasError = false, isBlock = false, type = 'text', size = 'md', prefix, suffix, style, className, disabled, width, htmlSize, onChange, onChangeValue, ...props }, ref) {
-    const shouldRenderPrefix = Boolean(prefix);
-    const shouldRenderSuffix = Boolean(suffix);
+const TextInput = forwardRef(function TextInput({ hasError = false, isBlock = false, type = 'text', size = 'md', leftAddOn, rightAddOn, style, className, disabled, width, htmlSize, onChange, onChangeValue, ...props }, ref) {
+    const showLeftAddOn = Boolean(leftAddOn);
+    const showRightAddOn = Boolean(rightAddOn);
     return (jsxs("div", { style: style, className: classNames(className, 'dc-text-input__container', {
             [`dc-text-input__container_${size}`]: size,
+            'dc-text-input__container_block': isBlock,
             'dc-text-input__container_disabled': disabled,
             'dc-text-input__container_has_error': hasError,
-            'dc-text-input__container_block': isBlock,
-            'dc-text-input__container_has_prefix': shouldRenderPrefix,
-            'dc-text-input__container_has_suffix': shouldRenderSuffix,
-        }), children: [shouldRenderPrefix && (jsx("div", { className: "dc-text-input__prefix", children: prefix })), jsx("input", { ...props, className: classNames({
+            'dc-text-input__container_has_left-addon': showLeftAddOn,
+            'dc-text-input__container_has_right-addon': showRightAddOn,
+        }), children: [showLeftAddOn && (jsx("div", { className: "dc-text-input__left-addon", children: leftAddOn })), jsx("input", { ...props, className: classNames({
                     'dc-text-input': true,
                     [`dc-text-input_width_${width}`]: width,
                 }), ref: ref, type: type, size: htmlSize, disabled: disabled, onChange: (event) => {
                     onChange?.(event);
                     onChangeValue?.(event.target.value);
-                } }), shouldRenderSuffix && (jsx("div", { className: "dc-text-input__suffix", children: suffix }))] }));
+                } }), showRightAddOn && (jsx("div", { className: "dc-text-input__right-addon", children: rightAddOn }))] }));
 });
 
 export { TextInput };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-components",
-  "version": "1.0.0-beta.10",
+  "version": "1.0.0-beta.12",
   "description": "The React based UI components library.",
   "type": "module",
   "exports": {

package/types/components/form-field/form-field.d.ts

@@ -4,12 +4,15 @@ export type FormFieldRenderFn = (props: {
     required: boolean;
     hasError: boolean;
 }) => ReactNode;
-export type FormFieldProps = ComponentPropsWithoutRef<'div'> & {
+type FormFieldHTMLProps = ComponentPropsWithoutRef<'div'>;
+type FormFieldBaseProps = Omit<FormFieldHTMLProps, 'children'>;
+export type FormFieldProps = {
     required?: boolean;
     labelFor?: string;
     label?: ReactNode;
     caption?: ReactNode;
     error?: ReactNode;
     children: ReactNode | FormFieldRenderFn;
-};
+} & FormFieldBaseProps;
 export declare function FormField({ required, labelFor, label, caption, error, className, children, ...props }: FormFieldProps): JSX.Element;
+export {};

package/types/components/password-input/password-input.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import { type TextInputProps } from '../text-input';
-type PasswordInputBaseProps = Omit<TextInputProps, 'type' | 'suffix'>;
+type PasswordInputBaseProps = Omit<TextInputProps, 'type' | 'rightAddOn'>;
 export type PasswordInputProps = {
     isDefaultVisible?: boolean;
     showPasswordTitle?: string;
     hidePasswordTitle?: string;
 } & PasswordInputBaseProps;
-export declare const PasswordInput: import("react").ForwardRefExoticComponent<Pick<PasswordInputProps, "hidden" | "form" | "slot" | "style" | "title" | "pattern" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "size" | "src" | "alt" | "width" | "height" | "value" | "max" | "min" | "name" | "crossOrigin" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "isBlock" | "accept" | "autoComplete" | "capture" | "checked" | "enterKeyHint" | "maxLength" | "minLength" | "multiple" | "readOnly" | "required" | "onChangeValue" | "hasError" | "htmlSize" | "widthCh" | "isDefaultVisible" | "showPasswordTitle" | "hidePasswordTitle"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const PasswordInput: import("react").ForwardRefExoticComponent<Pick<PasswordInputProps, "hidden" | "form" | "slot" | "style" | "title" | "pattern" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "size" | "src" | "alt" | "width" | "height" | "value" | "max" | "min" | "name" | "crossOrigin" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "isBlock" | "accept" | "autoComplete" | "capture" | "checked" | "enterKeyHint" | "maxLength" | "minLength" | "multiple" | "readOnly" | "required" | "onChangeValue" | "hasError" | "htmlSize" | "leftAddOn" | "widthCh" | "isDefaultVisible" | "showPasswordTitle" | "hidePasswordTitle"> & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/types/components/selection-control/selection-control.d.ts

@@ -1,14 +1,14 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
 export type SelectionControlRenderFn = (props: {
     id: string;
-}) => ReactNode;
+}) => JSX.Element;
 type SelectionControlHTMLProps = ComponentPropsWithoutRef<'div'>;
 type SelectionControlBaseProps = Omit<SelectionControlHTMLProps, 'children'>;
 export type SelectionControlProps = {
     labelFor?: string;
     caption?: ReactNode;
     label: ReactNode;
-    children: ReactNode | SelectionControlRenderFn;
+    children: JSX.Element | SelectionControlRenderFn;
 } & SelectionControlBaseProps;
 export declare function SelectionControl({ label, labelFor, caption, className, children, ...props }: SelectionControlProps): JSX.Element;
 export {};

package/types/components/text-input/text-input.d.ts

@@ -1,6 +1,6 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
 type TextInputHTMLProps = ComponentPropsWithRef<'input'>;
-type TextInputBaseProps = Omit<TextInputHTMLProps, 'type' | 'width' | 'size' | 'prefix'>;
+type TextInputBaseProps = Omit<TextInputHTMLProps, 'type' | 'width' | 'size'>;
 export type TextInputType = 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';
 export type TextInputWidth = '2ch' | '3ch' | '4ch' | '5ch' | '10ch' | '20ch' | '40ch';
 export type TextInputSize = 'sm' | 'md' | 'lg';
@@ -12,10 +12,10 @@ export type TextInputProps = TextInputBaseProps & {
     width?: TextInputWidth;
     widthCh?: number;
     size?: TextInputSize;
-    prefix?: ReactNode;
-    suffix?: ReactNode;
+    leftAddOn?: ReactNode;
+    rightAddOn?: ReactNode;
     htmlSize?: TextInputHTMLProps['size'];
     onChangeValue?: TextInputChangeValueHandler;
 };
-export declare const TextInput: import("react").ForwardRefExoticComponent<Pick<TextInputProps, "hidden" | "form" | "slot" | "style" | "title" | "pattern" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "size" | "src" | "alt" | "width" | "height" | "value" | "type" | "max" | "min" | "name" | "crossOrigin" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "isBlock" | "accept" | "autoComplete" | "capture" | "checked" | "enterKeyHint" | "maxLength" | "minLength" | "multiple" | "readOnly" | "required" | "onChangeValue" | "hasError" | "htmlSize" | "suffix" | "widthCh"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const TextInput: import("react").ForwardRefExoticComponent<Pick<TextInputProps, "hidden" | "form" | "slot" | "style" | "title" | "pattern" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "size" | "src" | "alt" | "width" | "height" | "value" | "type" | "max" | "min" | "name" | "crossOrigin" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "isBlock" | "accept" | "autoComplete" | "capture" | "checked" | "enterKeyHint" | "maxLength" | "minLength" | "multiple" | "readOnly" | "required" | "onChangeValue" | "hasError" | "htmlSize" | "leftAddOn" | "rightAddOn" | "widthCh"> & import("react").RefAttributes<HTMLInputElement>>;
 export {};