draft-components 1.0.0-beta.9 → 1.1.0

package/README.md

@@ -5,4 +5,50 @@
 [![dependencies](https://badgen.net/bundlephobia/dependency-count/draft-components?label=dependencies&color=green)](https://www.npmjs.com/package/draft-components?activeTab=dependencies)
 [![types](https://badgen.net/npm/types/tslib?color=green)](https://github.com/alexzimakov/draft-components/blob/master/tsconfig.json)
 
-`draft-components` is a React based UI components library.
+The React based UI components library.
+
+<a href="https://draft-components.netlify.app">
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+    <path d="M1.58051 1.53345L2.07511 14.7122C2.09077 15.1296 2.42396 15.4653 2.84126 15.484L13.5561 15.9652C13.5681 15.9658 13.5801 15.966 13.5921 15.966C14.0355 15.966 14.3948 15.6067 14.3948 15.1633V0.802758C14.3948 0.786055 14.3943 0.769356 14.3933 0.752685C14.3656 0.310212 13.9845 -0.026064 13.542 0.0015905L12.6607 0.056674L12.7251 1.89911C12.7274 1.9652 12.6757 2.02065 12.6096 2.02296C12.5813 2.02395 12.5535 2.01487 12.5313 1.99735L11.9376 1.5297L11.2348 2.06286C11.1821 2.10283 11.107 2.09251 11.067 2.03982C11.0502 2.01765 11.0416 1.9903 11.0428 1.96248L11.118 0.153093L2.33261 0.70218C1.89791 0.729349 1.56418 1.09821 1.58051 1.53345ZM11.4601 5.96107C11.1777 6.18045 9.07404 6.33013 9.07404 6.01782C9.1185 4.82611 8.58497 4.77387 8.28856 4.77387C8.00697 4.77387 7.53272 4.85899 7.53272 5.49741C7.53272 6.14798 8.22578 6.51526 9.03926 6.94635C10.1949 7.55874 11.5935 8.29992 11.5935 10.1649C11.5935 11.9525 10.1411 12.94 8.28856 12.94C6.37674 12.94 4.70602 12.1665 4.89471 9.48481C4.96881 9.1699 7.39935 9.24475 7.39935 9.48481C7.3697 10.5914 7.62164 10.9169 8.25892 10.9169C8.74799 10.9169 8.9703 10.6473 8.9703 10.1933C8.9703 9.50626 8.24818 9.10084 7.41747 8.63444C6.29269 8.00294 4.96881 7.25965 4.96881 5.55415C4.96881 3.85171 6.13962 2.71675 8.22928 2.71675C10.3189 2.71675 11.4601 3.83432 11.4601 5.96107Z" />
+  </svg>
+  <span>Storybook</span>
+</a>
+
+## Peer dependencies
+
+`draft-components` requires the following libraries to be installed:
+
+- `react` >= 18
+- `react-dom` >= 18
+
+## Getting Started
+
+```
+npm install draft-components
+```
+
+```js
+// import `draft-components` styles
+import 'draft-components/css/draft-components.css';
+// import necessary components
+import {
+  FormField,
+  TextInput,
+  PasswordInput,
+  Button,
+} from 'draft-components';
+
+function App() {
+  return (
+    <form>
+      <FormField label="Username" labelFor="username">
+        <TextInput id="username" name="username" />
+      </FormField>
+      <FormField label="Password" labelFor="password">
+        <PasswordInput id="password" name="password" />
+      </FormField>
+      <Button>Sign in</Button>
+    </form>
+  );
+}
+```

package/cjs/components/alert/alert.cjs

@@ -1,18 +1,19 @@
 'use strict';
 
 const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
 const reactHelpers = require('../../lib/react-helpers.cjs');
 
-function Alert({ icon = null, heading = null, variant = 'default', appearance = 'default', className, children, ...props }) {
+const Alert = react.forwardRef(function Alert({ icon = null, heading = null, variant = 'default', appearance = 'default', className, children, ...props }, ref) {
     const shouldShowIcon = Boolean(icon);
     const shouldRenderHeading = Boolean(heading);
     const shouldRenderContent = Boolean(children);
-    return (jsxRuntime.jsxs("section", { ...props, className: reactHelpers.classNames(className, {
+    return (jsxRuntime.jsxs("div", { ...props, ref: ref, className: reactHelpers.classNames(className, {
             'dc-alert': true,
             'dc-alert_has_icon': shouldShowIcon,
             [`dc-alert_variant_${variant}`]: variant,
             [`dc-alert_appearance_${appearance}`]: appearance,
         }), children: [shouldShowIcon && jsxRuntime.jsx("div", { className: "dc-alert__icon", children: icon }), jsxRuntime.jsxs("div", { className: "dc-alert__body", children: [shouldRenderHeading && (jsxRuntime.jsx("h1", { className: "dc-alert__title", children: heading })), shouldRenderContent && (jsxRuntime.jsx("div", { className: "dc-alert__content", children: children }))] })] }));
-}
+});
 
 exports.Alert = Alert;

package/cjs/components/color-picker/color-picker-button.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+
+function ColorPickerButton({ style, className, label, name, color, value, checked, defaultChecked, onChange, onChangeValue, }) {
+    const customProperties = {
+        '--dc-color-picker-btn-color': color,
+    };
+    return (jsxRuntime.jsxs("label", { style: { ...customProperties, ...style }, className: reactHelpers.classNames('dc-color-picker__btn', className), children: [jsxRuntime.jsx("input", { type: "radio", name: name, value: value, checked: checked, defaultChecked: defaultChecked, onChange: (event) => {
+                    onChange?.(event);
+                    onChangeValue?.(value);
+                } }), jsxRuntime.jsx("span", { className: "dc-color-picker__btn-check", "aria-hidden": true }), label] }));
+}
+
+exports.ColorPickerButton = ColorPickerButton;

package/cjs/components/color-picker/color-picker.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+const colorPickerButton = require('./color-picker-button.cjs');
+
+function ColorPicker({ className, name, disabled, options, value, defaultValue, onChange, onChangeValue, ...props }) {
+    return (jsxRuntime.jsx("fieldset", { ...props, disabled: disabled, className: reactHelpers.classNames(className, {
+            'dc-color-picker': true,
+            'dc-color-picker_disabled': disabled,
+        }), children: options.map((option) => {
+            let checked;
+            let defaultChecked;
+            if (value !== undefined) {
+                checked = option.value === value;
+            }
+            else if (defaultValue !== undefined) {
+                defaultChecked = option.value === defaultValue;
+            }
+            return (jsxRuntime.jsx(colorPickerButton.ColorPickerButton, { name: name, label: option.label, color: option.color, value: option.value, checked: checked, defaultChecked: defaultChecked, onChange: onChange, onChangeValue: onChangeValue }, option.value));
+        }) }));
+}
+
+exports.ColorPicker = ColorPicker;

package/cjs/components/index.cjs

@@ -11,6 +11,7 @@ const iconButton = require('./button/icon-button.cjs');
 const buttonGroup = require('./button-group/button-group.cjs');
 const caption = require('./caption/caption.cjs');
 const checkbox = require('./checkbox/checkbox.cjs');
+const colorPicker = require('./color-picker/color-picker.cjs');
 const datePicker = require('./date-picker/date-picker.cjs');
 const dateRangePicker = require('./date-picker/date-range-picker.cjs');
 const datePickerPopover = require('./date-picker-popover/date-picker-popover.cjs');
@@ -34,9 +35,11 @@ const navListTitle = require('./nav-list/nav-list-title.cjs');
 const passwordInput = require('./password-input/password-input.cjs');
 const popover = require('./popover/popover.cjs');
 const portal = require('./portal/portal.cjs');
+const positioner = require('./positioner/positioner.cjs');
 const radio = require('./radio/radio.cjs');
 const segmentedControl = require('./segmented-control/segmented-control.cjs');
 const select = require('./select/select.cjs');
+const selectionControl = require('./selection-control/selection-control.cjs');
 const slider = require('./slider/slider.cjs');
 const sliderTickMarks = require('./slider/slider-tick-marks.cjs');
 const spinner = require('./spinner/spinner.cjs');
@@ -73,6 +76,7 @@ exports.IconButton = iconButton.IconButton;
 exports.ButtonGroup = buttonGroup.ButtonGroup;
 exports.Caption = caption.Caption;
 exports.Checkbox = checkbox.Checkbox;
+exports.ColorPicker = colorPicker.ColorPicker;
 exports.DatePicker = datePicker.DatePicker;
 exports.DateRangePicker = dateRangePicker.DateRangePicker;
 exports.DatePickerPopover = datePickerPopover.DatePickerPopover;
@@ -96,9 +100,11 @@ exports.NavListTitle = navListTitle.NavListTitle;
 exports.PasswordInput = passwordInput.PasswordInput;
 exports.Popover = popover.Popover;
 exports.Portal = portal.Portal;
+exports.Positioner = positioner.Positioner;
 exports.Radio = radio.Radio;
 exports.SegmentedControl = segmentedControl.SegmentedControl;
 exports.Select = select.Select;
+exports.SelectionControl = selectionControl.SelectionControl;
 exports.Slider = slider.Slider;
 exports.SliderTickMarks = sliderTickMarks.SliderTickMarks;
 exports.Spinner = spinner.Spinner;

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

@@ -23,8 +23,8 @@ const PasswordInput = react.forwardRef(function PasswordInput({ isDefaultVisible
         Icon = icons.EyeSlashIcon;
     }
     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 }));
+    const renderRightAddOn = ({ className }) => (jsxRuntime.jsx("div", { className: reactHelpers.classNames('dc-password-input__right-addon', className), children: 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, rightAddOn: renderRightAddOn }));
 });
 
 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,39 @@ 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) {
+    if (leftAddOn) {
+        const className = 'dc-text-input__left-addon';
+        if (typeof leftAddOn === 'function') {
+            leftAddOn = leftAddOn({ className });
+        }
+        else {
+            leftAddOn = jsxRuntime.jsx("div", { className: className, children: leftAddOn });
+        }
+    }
+    if (rightAddOn) {
+        const className = 'dc-text-input__right-addon';
+        if (typeof rightAddOn === 'function') {
+            rightAddOn = rightAddOn({ className });
+        }
+        else {
+            rightAddOn = jsxRuntime.jsx("div", { className: className, children: 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_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_disabled': disabled,
+            'dc-text-input__container_invalid': hasError,
+            'dc-text-input__container_left-addon': leftAddOn,
+            'dc-text-input__container_right-addon': rightAddOn,
+        }), 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 }))] }));
+                } }), rightAddOn] }));
 });
 
 exports.TextInput = TextInput;

package/cjs/components/toaster/toaster.cjs

@@ -23,7 +23,7 @@ class Toaster {
         this._id += 1;
         return this._id;
     }
-    showToast(toast, params) {
+    showToast(toast) {
         const id = this._getNextId();
         const event = new CustomEvent(TOAST_SHOW_EVENT, {
             detail: {
@@ -31,7 +31,7 @@ class Toaster {
                 toast: { ...toast, id },
             },
         });
-        const timeoutMs = toast.timeoutMs || params?.timeoutMs || this.timeoutMs;
+        const timeoutMs = toast.timeoutMs || this.timeoutMs;
         this.onShow?.(event.detail.toast);
         window.dispatchEvent(event);
         window.setTimeout(() => this.hideToast(id), timeoutMs);

package/cjs/index.cjs

@@ -18,6 +18,7 @@ const iconButton = require('./components/button/icon-button.cjs');
 const buttonGroup = require('./components/button-group/button-group.cjs');
 const caption = require('./components/caption/caption.cjs');
 const checkbox = require('./components/checkbox/checkbox.cjs');
+const colorPicker = require('./components/color-picker/color-picker.cjs');
 const datePicker = require('./components/date-picker/date-picker.cjs');
 const dateRangePicker = require('./components/date-picker/date-range-picker.cjs');
 const datePickerPopover = require('./components/date-picker-popover/date-picker-popover.cjs');
@@ -41,9 +42,11 @@ const navListTitle = require('./components/nav-list/nav-list-title.cjs');
 const passwordInput = require('./components/password-input/password-input.cjs');
 const popover = require('./components/popover/popover.cjs');
 const portal = require('./components/portal/portal.cjs');
+const positioner = require('./components/positioner/positioner.cjs');
 const radio = require('./components/radio/radio.cjs');
 const segmentedControl = require('./components/segmented-control/segmented-control.cjs');
 const select = require('./components/select/select.cjs');
+const selectionControl = require('./components/selection-control/selection-control.cjs');
 const slider = require('./components/slider/slider.cjs');
 const sliderTickMarks = require('./components/slider/slider-tick-marks.cjs');
 const spinner = require('./components/spinner/spinner.cjs');
@@ -91,6 +94,7 @@ exports.IconButton = iconButton.IconButton;
 exports.ButtonGroup = buttonGroup.ButtonGroup;
 exports.Caption = caption.Caption;
 exports.Checkbox = checkbox.Checkbox;
+exports.ColorPicker = colorPicker.ColorPicker;
 exports.DatePicker = datePicker.DatePicker;
 exports.DateRangePicker = dateRangePicker.DateRangePicker;
 exports.DatePickerPopover = datePickerPopover.DatePickerPopover;
@@ -114,9 +118,11 @@ exports.NavListTitle = navListTitle.NavListTitle;
 exports.PasswordInput = passwordInput.PasswordInput;
 exports.Popover = popover.Popover;
 exports.Portal = portal.Portal;
+exports.Positioner = positioner.Positioner;
 exports.Radio = radio.Radio;
 exports.SegmentedControl = segmentedControl.SegmentedControl;
 exports.Select = select.Select;
+exports.SelectionControl = selectionControl.SelectionControl;
 exports.Slider = slider.Slider;
 exports.SliderTickMarks = sliderTickMarks.SliderTickMarks;
 exports.Spinner = spinner.Spinner;

package/css/draft-components.css

@@ -1194,6 +1194,16 @@
   background: var(--dc-input-bg);
 }
 
+.dc-text-input__container > :first-child {
+  border-top-left-radius: calc(var(--dc-input-border-radius) - 1px);
+  border-bottom-left-radius: calc(var(--dc-input-border-radius) - 1px);
+}
+
+.dc-text-input__container > :last-child {
+  border-top-right-radius: calc(var(--dc-input-border-radius) - 1px);
+  border-bottom-right-radius: calc(var(--dc-input-border-radius) - 1px);
+}
+
 .dc-text-input__container:focus-within {
   border-color: var(--dc-input-focus-ring-color);
   box-shadow: 0 0 0 1px var(--dc-input-focus-ring-color);
@@ -1203,7 +1213,7 @@
   opacity: var(--dc-disabled-state-opacity);
 }
 
-.dc-text-input__container_has_error {
+.dc-text-input__container_invalid {
   border-color: var(--dc-input-border-color-error);
 }
 
@@ -1282,36 +1292,30 @@
   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 {
-  color: var(--dc-input-suffix-color);
-}
-
-.dc-text-input__container_has_prefix {
   padding-left: var(--dc-input-padding-x);
 }
 
-.dc-text-input__container_has_prefix .dc-text-input {
-  padding-left: calc(var(--dc-input-padding-x) * 0.5);
+.dc-text-input__right-addon {
+  color: var(--dc-input-suffix-color);
+  padding-right: var(--dc-input-padding-x);
 }
 
-.dc-text-input__container_has_suffix {
-  padding-right: var(--dc-input-padding-x);
+.dc-text-input__container_left-addon .dc-text-input {
+  padding-left: calc(var(--dc-input-padding-x) / 2);
 }
 
-.dc-text-input__container_has_suffix .dc-text-input {
-  padding-right: calc(var(--dc-input-padding-x) * 0.5);
+.dc-text-input__container_right-addon .dc-text-input {
+  padding-right: calc(var(--dc-input-padding-x) / 2);
 }
 
 .dc-password-input {
@@ -1355,6 +1359,10 @@
   background: var(--dc-password-input-switch-bg);
 }
 
+.dc-password-input__right-addon {
+  padding-right: 0;
+}
+
 .dc-password-input__icon {
   width: calc(var(--dc-input-height) * 0.5);
   height: calc(var(--dc-input-height) * 0.5);
@@ -1430,6 +1438,8 @@
   color: var(--dc-textarea-text-color);
   min-width: 192px;
   min-height: var(--dc-textarea-leading);
+  margin-top: 0;
+  margin-bottom: 0;
   padding: var(--dc-textarea-padding-y) var(--dc-textarea-padding-x);
   border: none;
   background: none;
@@ -1449,6 +1459,10 @@
   outline: none;
 }
 
+.dc-textarea__container_block .dc-textarea {
+  resize: vertical;
+}
+
 .dc-textarea_width_30ch {
   width: 30.5ch;
 }
@@ -1593,6 +1607,7 @@
   --dc-switch-focus-ring-color: var(--dc-focus-ring-color);
 
   color-scheme: light;
+  display: inline-flex;
 }
 
 .dc-switch__input {
@@ -1698,6 +1713,7 @@
   --dc-checkbox-focus-ring-color: var(--dc-focus-ring-color);
 
   color-scheme: light;
+  display: inline-flex;
 }
 
 .dc-checkbox__input {
@@ -1771,6 +1787,7 @@
   --dc-radio-color-focus-ring: var(--dc-focus-ring-color);
 
   color-scheme: light;
+  display: inline-flex;
 }
 
 .dc-radio__input {
@@ -2419,6 +2436,7 @@
 }
 
 .dc-selection-control__input {
+  display: inline-flex;
   grid-area: input;
 }
 
@@ -2503,9 +2521,12 @@
   clip: rect(0 0 0 0);
 }
 
-.dc-color-picker__btn_checked::after {
-  content: "";
-  display: inline-block;
+.dc-color-picker__btn > input + .dc-color-picker__btn-check {
+  display: none;
+}
+
+.dc-color-picker__btn > input:checked + .dc-color-picker__btn-check {
+  display: inline-flex;
   width: 38%;
   height: 38%;
   border-radius: 50%;

package/esm/components/alert/alert.js

@@ -1,16 +1,17 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 
-function Alert({ icon = null, heading = null, variant = 'default', appearance = 'default', className, children, ...props }) {
+const Alert = forwardRef(function Alert({ icon = null, heading = null, variant = 'default', appearance = 'default', className, children, ...props }, ref) {
     const shouldShowIcon = Boolean(icon);
     const shouldRenderHeading = Boolean(heading);
     const shouldRenderContent = Boolean(children);
-    return (jsxs("section", { ...props, className: classNames(className, {
+    return (jsxs("div", { ...props, ref: ref, className: classNames(className, {
             'dc-alert': true,
             'dc-alert_has_icon': shouldShowIcon,
             [`dc-alert_variant_${variant}`]: variant,
             [`dc-alert_appearance_${appearance}`]: appearance,
         }), children: [shouldShowIcon && jsx("div", { className: "dc-alert__icon", children: icon }), jsxs("div", { className: "dc-alert__body", children: [shouldRenderHeading && (jsx("h1", { className: "dc-alert__title", children: heading })), shouldRenderContent && (jsx("div", { className: "dc-alert__content", children: children }))] })] }));
-}
+});
 
 export { Alert };

package/esm/components/color-picker/color-picker-button.js

@@ -0,0 +1,14 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { classNames } from '../../lib/react-helpers.js';
+
+function ColorPickerButton({ style, className, label, name, color, value, checked, defaultChecked, onChange, onChangeValue, }) {
+    const customProperties = {
+        '--dc-color-picker-btn-color': color,
+    };
+    return (jsxs("label", { style: { ...customProperties, ...style }, className: classNames('dc-color-picker__btn', className), children: [jsx("input", { type: "radio", name: name, value: value, checked: checked, defaultChecked: defaultChecked, onChange: (event) => {
+                    onChange?.(event);
+                    onChangeValue?.(value);
+                } }), jsx("span", { className: "dc-color-picker__btn-check", "aria-hidden": true }), label] }));
+}
+
+export { ColorPickerButton };

package/esm/components/color-picker/color-picker.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { classNames } from '../../lib/react-helpers.js';
+import { ColorPickerButton } from './color-picker-button.js';
+
+function ColorPicker({ className, name, disabled, options, value, defaultValue, onChange, onChangeValue, ...props }) {
+    return (jsx("fieldset", { ...props, disabled: disabled, className: classNames(className, {
+            'dc-color-picker': true,
+            'dc-color-picker_disabled': disabled,
+        }), children: options.map((option) => {
+            let checked;
+            let defaultChecked;
+            if (value !== undefined) {
+                checked = option.value === value;
+            }
+            else if (defaultValue !== undefined) {
+                defaultChecked = option.value === defaultValue;
+            }
+            return (jsx(ColorPickerButton, { name: name, label: option.label, color: option.color, value: option.value, checked: checked, defaultChecked: defaultChecked, onChange: onChange, onChangeValue: onChangeValue }, option.value));
+        }) }));
+}
+
+export { ColorPicker };

package/esm/components/index.js

@@ -9,6 +9,7 @@ export { IconButton } from './button/icon-button.js';
 export { ButtonGroup } from './button-group/button-group.js';
 export { Caption } from './caption/caption.js';
 export { Checkbox } from './checkbox/checkbox.js';
+export { ColorPicker } from './color-picker/color-picker.js';
 export { DatePicker } from './date-picker/date-picker.js';
 export { DateRangePicker } from './date-picker/date-range-picker.js';
 export { DatePickerPopover } from './date-picker-popover/date-picker-popover.js';
@@ -32,9 +33,11 @@ export { NavListTitle } from './nav-list/nav-list-title.js';
 export { PasswordInput } from './password-input/password-input.js';
 export { Popover } from './popover/popover.js';
 export { Portal } from './portal/portal.js';
+export { Positioner } from './positioner/positioner.js';
 export { Radio } from './radio/radio.js';
 export { SegmentedControl } from './segmented-control/segmented-control.js';
 export { Select } from './select/select.js';
+export { SelectionControl } from './selection-control/selection-control.js';
 export { Slider } from './slider/slider.js';
 export { SliderTickMarks } from './slider/slider-tick-marks.js';
 export { Spinner } from './spinner/spinner.js';

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

@@ -21,8 +21,8 @@ const PasswordInput = forwardRef(function PasswordInput({ isDefaultVisible = fal
         Icon = EyeSlashIcon;
     }
     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 }));
+    const renderRightAddOn = ({ className }) => (jsx("div", { className: classNames('dc-password-input__right-addon', className), children: 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, rightAddOn: renderRightAddOn }));
 });
 
 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

@@ -1,24 +1,40 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } 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) {
+    if (leftAddOn) {
+        const className = 'dc-text-input__left-addon';
+        if (typeof leftAddOn === 'function') {
+            leftAddOn = leftAddOn({ className });
+        }
+        else {
+            leftAddOn = jsx("div", { className: className, children: leftAddOn });
+        }
+    }
+    if (rightAddOn) {
+        const className = 'dc-text-input__right-addon';
+        if (typeof rightAddOn === 'function') {
+            rightAddOn = rightAddOn({ className });
+        }
+        else {
+            rightAddOn = jsx("div", { className: className, children: rightAddOn });
+        }
+    }
     return (jsxs("div", { style: style, className: classNames(className, 'dc-text-input__container', {
             [`dc-text-input__container_${size}`]: size,
-            '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_disabled': disabled,
+            'dc-text-input__container_invalid': hasError,
+            'dc-text-input__container_left-addon': leftAddOn,
+            'dc-text-input__container_right-addon': rightAddOn,
+        }), 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 }))] }));
+                } }), rightAddOn] }));
 });
 
 export { TextInput };

package/esm/components/toaster/toaster.js

@@ -21,7 +21,7 @@ class Toaster {
         this._id += 1;
         return this._id;
     }
-    showToast(toast, params) {
+    showToast(toast) {
         const id = this._getNextId();
         const event = new CustomEvent(TOAST_SHOW_EVENT, {
             detail: {
@@ -29,7 +29,7 @@ class Toaster {
                 toast: { ...toast, id },
             },
         });
-        const timeoutMs = toast.timeoutMs || params?.timeoutMs || this.timeoutMs;
+        const timeoutMs = toast.timeoutMs || this.timeoutMs;
         this.onShow?.(event.detail.toast);
         window.dispatchEvent(event);
         window.setTimeout(() => this.hideToast(id), timeoutMs);

package/esm/index.js

@@ -16,6 +16,7 @@ export { IconButton } from './components/button/icon-button.js';
 export { ButtonGroup } from './components/button-group/button-group.js';
 export { Caption } from './components/caption/caption.js';
 export { Checkbox } from './components/checkbox/checkbox.js';
+export { ColorPicker } from './components/color-picker/color-picker.js';
 export { DatePicker } from './components/date-picker/date-picker.js';
 export { DateRangePicker } from './components/date-picker/date-range-picker.js';
 export { DatePickerPopover } from './components/date-picker-popover/date-picker-popover.js';
@@ -39,9 +40,11 @@ export { NavListTitle } from './components/nav-list/nav-list-title.js';
 export { PasswordInput } from './components/password-input/password-input.js';
 export { Popover } from './components/popover/popover.js';
 export { Portal } from './components/portal/portal.js';
+export { Positioner } from './components/positioner/positioner.js';
 export { Radio } from './components/radio/radio.js';
 export { SegmentedControl } from './components/segmented-control/segmented-control.js';
 export { Select } from './components/select/select.js';
+export { SelectionControl } from './components/selection-control/selection-control.js';
 export { Slider } from './components/slider/slider.js';
 export { SliderTickMarks } from './components/slider/slider-tick-marks.js';
 export { Spinner } from './components/spinner/spinner.js';