draft-components 1.0.0-beta.8 → 1.0.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/button/button.cjs

@@ -5,23 +5,25 @@ const react = require('react');
 const reactHelpers = require('../../lib/react-helpers.cjs');
 const spinner = require('../spinner/spinner.cjs');
 
-const Button = react.forwardRef(function Button({ isBlock = false, disabled = false, loading = false, type = 'button', size = 'sm', variant = 'filled', appearance = 'default', icon = null, caption = null, renderAs, className, children, ...props }, ref) {
-    const shouldRenderIcon = Boolean(icon);
-    const shouldRenderLabel = Boolean(children);
-    const shouldRenderCaption = Boolean(caption);
-    let leadingAddOn = null;
+const Button = react.forwardRef(function Button({ isBlock = false, disabled = false, loading = false, type = 'button', size = 'sm', variant = 'filled', appearance = 'default', iconLeft = null, iconRight = null, caption = null, renderAs, className, children, ...props }, ref) {
+    let addOnLeft = null;
     if (loading) {
-        leadingAddOn = (jsxRuntime.jsx("span", { "data-testid": "button-spinner", className: "dc-button__spinner", children: jsxRuntime.jsx(spinner.Spinner, { size: "1.15em" }) }));
+        addOnLeft = (jsxRuntime.jsx("span", { "data-testid": "button-spinner", className: "dc-button__spinner", children: jsxRuntime.jsx(spinner.Spinner, { size: "1.15em" }) }));
+    }
+    else if (iconLeft) {
+        addOnLeft = (jsxRuntime.jsx("span", { "data-testid": "button-icon", className: "dc-button__icon", children: iconLeft }));
     }
-    else if (shouldRenderIcon) {
-        leadingAddOn = (jsxRuntime.jsx("span", { "data-testid": "button-icon", className: "dc-button__icon", children: icon }));
+    let addOnRight = null;
+    if (iconRight) {
+        addOnRight = (jsxRuntime.jsx("span", { "data-testid": "button-icon", className: "dc-button__icon", children: iconRight }));
     }
-    const content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [leadingAddOn, shouldRenderLabel && (jsxRuntime.jsxs("span", { className: "dc-button__body", children: [jsxRuntime.jsx("span", { className: "dc-button__label", children: children }), shouldRenderCaption && (jsxRuntime.jsx("small", { className: "dc-button__caption", children: caption }))] }))] }));
+    const shouldRenderLabel = Boolean(children);
+    const shouldRenderCaption = Boolean(caption);
+    const content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [addOnLeft, shouldRenderLabel && (jsxRuntime.jsxs("span", { className: "dc-button__body", children: [jsxRuntime.jsx("span", { className: "dc-button__label", children: children }), shouldRenderCaption && (jsxRuntime.jsx("small", { className: "dc-button__caption", children: caption }))] })), addOnRight] }));
     className = reactHelpers.classNames(className, {
         'dc-button': true,
         'dc-button_block': isBlock,
         'dc-button_loading': loading,
-        'dc-button_has_icon': shouldRenderIcon,
         'dc-button_has_caption': shouldRenderCaption,
         [`dc-button_${size}`]: size,
         [`dc-button_appearance_${appearance}`]: appearance,

package/cjs/components/button/icon-button.cjs

@@ -5,8 +5,8 @@ const react = require('react');
 const reactHelpers = require('../../lib/react-helpers.cjs');
 const button = require('./button.cjs');
 
-const IconButton = react.forwardRef(function IconButton({ className, ...props }, ref) {
-    return jsxRuntime.jsx(button.Button, { ref: ref, className: reactHelpers.classNames('dc-button_icon-only', className), ...props });
+const IconButton = react.forwardRef(function IconButton({ className, icon, ...props }, ref) {
+    return jsxRuntime.jsx(button.Button, { ...props, ref: ref, iconLeft: icon, className: reactHelpers.classNames('dc-button_icon-only', className) });
 });
 
 exports.IconButton = IconButton;

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, onChangeValue, }) {
+    const customProperties = {
+        '--dc-color-picker-btn-color': color,
+    };
+    return (jsxRuntime.jsxs("label", { style: { ...customProperties, ...style }, className: reactHelpers.classNames(className, {
+            'dc-color-picker__btn': true,
+            'dc-color-picker__btn_checked': checked,
+        }), children: [jsxRuntime.jsx("input", { type: "radio", name: name, value: value, checked: checked, onChange: () => onChangeValue(value) }), label] }));
+}
+
+exports.ColorPickerButton = ColorPickerButton;

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

@@ -0,0 +1,14 @@
+'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, options, value, disabled, 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) => (jsxRuntime.jsx(colorPickerButton.ColorPickerButton, { name: name, label: option.label, color: option.color, value: option.value, checked: option.value === value, 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

@@ -751,12 +751,20 @@
   justify-content: center;
 }
 
-.dc-button__icon,
-.dc-button__spinner {
+.dc-button__spinner,
+.dc-button__icon {
   flex: none;
+}
+
+.dc-button__spinner,
+.dc-button__icon:first-child {
   margin-right: 0.5em;
 }
 
+.dc-button__icon:last-child {
+  margin-left: 0.5em;
+}
+
 .dc-button__body {
   flex: auto;
   flex-direction: column;
@@ -771,6 +779,7 @@
 .dc-button_icon-only .dc-button__icon,
 .dc-button_icon-only .dc-button__spinner {
   margin-right: 0;
+  margin-left: 0;
 }
 
 .dc-button_has_caption .dc-button__icon,
@@ -1185,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);
@@ -1194,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);
 }
 
@@ -1273,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 {
@@ -1346,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);
@@ -1440,6 +1457,10 @@
   outline: none;
 }
 
+.dc-textarea__container_block .dc-textarea {
+  resize: vertical;
+}
+
 .dc-textarea_width_30ch {
   width: 30.5ch;
 }
@@ -1584,6 +1605,7 @@
   --dc-switch-focus-ring-color: var(--dc-focus-ring-color);
 
   color-scheme: light;
+  display: inline-flex;
 }
 
 .dc-switch__input {
@@ -1689,6 +1711,7 @@
   --dc-checkbox-focus-ring-color: var(--dc-focus-ring-color);
 
   color-scheme: light;
+  display: inline-flex;
 }
 
 .dc-checkbox__input {
@@ -1762,6 +1785,7 @@
   --dc-radio-color-focus-ring: var(--dc-focus-ring-color);
 
   color-scheme: light;
+  display: inline-flex;
 }
 
 .dc-radio__input {
@@ -2410,6 +2434,7 @@
 }
 
 .dc-selection-control__input {
+  display: inline-flex;
   grid-area: input;
 }
 

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/button/button.js

@@ -3,23 +3,25 @@ import { forwardRef } from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 import { Spinner } from '../spinner/spinner.js';
 
-const Button = forwardRef(function Button({ isBlock = false, disabled = false, loading = false, type = 'button', size = 'sm', variant = 'filled', appearance = 'default', icon = null, caption = null, renderAs, className, children, ...props }, ref) {
-    const shouldRenderIcon = Boolean(icon);
-    const shouldRenderLabel = Boolean(children);
-    const shouldRenderCaption = Boolean(caption);
-    let leadingAddOn = null;
+const Button = forwardRef(function Button({ isBlock = false, disabled = false, loading = false, type = 'button', size = 'sm', variant = 'filled', appearance = 'default', iconLeft = null, iconRight = null, caption = null, renderAs, className, children, ...props }, ref) {
+    let addOnLeft = null;
     if (loading) {
-        leadingAddOn = (jsx("span", { "data-testid": "button-spinner", className: "dc-button__spinner", children: jsx(Spinner, { size: "1.15em" }) }));
+        addOnLeft = (jsx("span", { "data-testid": "button-spinner", className: "dc-button__spinner", children: jsx(Spinner, { size: "1.15em" }) }));
+    }
+    else if (iconLeft) {
+        addOnLeft = (jsx("span", { "data-testid": "button-icon", className: "dc-button__icon", children: iconLeft }));
     }
-    else if (shouldRenderIcon) {
-        leadingAddOn = (jsx("span", { "data-testid": "button-icon", className: "dc-button__icon", children: icon }));
+    let addOnRight = null;
+    if (iconRight) {
+        addOnRight = (jsx("span", { "data-testid": "button-icon", className: "dc-button__icon", children: iconRight }));
     }
-    const content = (jsxs(Fragment, { children: [leadingAddOn, shouldRenderLabel && (jsxs("span", { className: "dc-button__body", children: [jsx("span", { className: "dc-button__label", children: children }), shouldRenderCaption && (jsx("small", { className: "dc-button__caption", children: caption }))] }))] }));
+    const shouldRenderLabel = Boolean(children);
+    const shouldRenderCaption = Boolean(caption);
+    const content = (jsxs(Fragment, { children: [addOnLeft, shouldRenderLabel && (jsxs("span", { className: "dc-button__body", children: [jsx("span", { className: "dc-button__label", children: children }), shouldRenderCaption && (jsx("small", { className: "dc-button__caption", children: caption }))] })), addOnRight] }));
     className = classNames(className, {
         'dc-button': true,
         'dc-button_block': isBlock,
         'dc-button_loading': loading,
-        'dc-button_has_icon': shouldRenderIcon,
         'dc-button_has_caption': shouldRenderCaption,
         [`dc-button_${size}`]: size,
         [`dc-button_appearance_${appearance}`]: appearance,

package/esm/components/button/icon-button.js

@@ -3,8 +3,8 @@ import { forwardRef } from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 import { Button } from './button.js';
 
-const IconButton = forwardRef(function IconButton({ className, ...props }, ref) {
-    return jsx(Button, { ref: ref, className: classNames('dc-button_icon-only', className), ...props });
+const IconButton = forwardRef(function IconButton({ className, icon, ...props }, ref) {
+    return jsx(Button, { ...props, ref: ref, iconLeft: icon, className: classNames('dc-button_icon-only', className) });
 });
 
 export { IconButton };

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, onChangeValue, }) {
+    const customProperties = {
+        '--dc-color-picker-btn-color': color,
+    };
+    return (jsxs("label", { style: { ...customProperties, ...style }, className: classNames(className, {
+            'dc-color-picker__btn': true,
+            'dc-color-picker__btn_checked': checked,
+        }), children: [jsx("input", { type: "radio", name: name, value: value, checked: checked, onChange: () => onChangeValue(value) }), label] }));
+}
+
+export { ColorPickerButton };

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

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { classNames } from '../../lib/react-helpers.js';
+import { ColorPickerButton } from './color-picker-button.js';
+
+function ColorPicker({ className, name, options, value, disabled, onChangeValue, ...props }) {
+    return (jsx("fieldset", { ...props, disabled: disabled, className: classNames(className, {
+            'dc-color-picker': true,
+            'dc-color-picker_disabled': disabled,
+        }), children: options.map((option) => (jsx(ColorPickerButton, { name: name, label: option.label, color: option.color, value: option.value, checked: option.value === value, 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 };