draft-components 1.12.0 → 2.0.0

package/{esm → dist/esm}/components/menu/menu.js

@@ -1,14 +1,12 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { KeyboardKeys } from '../../lib/keyboard-keys.js';
-import { useId, useState, Children, cloneElement, isValidElement } from 'react';
+import { Children, cloneElement, isValidElement, useId, useState, } from 'react';
 import { classNames, focusElement } from '../../lib/react-helpers.js';
 import { assertIfNullable } from '../../lib/helpers.js';
-import { Button } from '../button/button.js';
-import '../button/icon-button.js';
-import { Popover } from '../popover/popover.js';
+import { Button } from '../button/index.js';
+import { Popover } from '../popover/index.js';
 import { MenuItem } from './menu-item.js';
-
-function Menu({ defaultIsOpen = false, placement = 'bottom', alignment = 'start', buttonClassName = '', buttonAppearance = 'default', buttonVariant = 'filled', button, className, children, onOpen, onClose, onKeyDown, ...props }) {
+export function Menu({ defaultIsOpen = false, placement = 'bottom', alignment = 'start', buttonClassName = '', buttonStyle = 'filled', buttonSize = 'sm', buttonTint = 'gray', button, className, children, onOpen, onClose, onKeyDown, ...props }) {
     const id = useId();
     const menuId = props.id || id;
     const buttonId = `menu-button-${menuId}`;
@@ -156,9 +154,9 @@ function Menu({ defaultIsOpen = false, placement = 'bottom', alignment = 'start'
                 closeMenu,
             });
         }
-        return (jsx(Button, { "data-testid": "menu-button", ref: ref, id: buttonId, "aria-haspopup": true, "aria-expanded": isOpen, "aria-controls": menuId, onClick: handleButtonClick, onKeyDown: handleButtonKeyDown, className: buttonClassName, appearance: buttonAppearance, variant: buttonVariant, children: button }));
+        return (_jsx(Button, { "data-testid": "menu-button", ref: ref, id: buttonId, "aria-haspopup": true, "aria-expanded": isOpen, "aria-controls": menuId, className: buttonClassName, buttonStyle: buttonStyle, size: buttonSize, tint: buttonTint, onClick: handleButtonClick, onKeyDown: handleButtonKeyDown, children: button }));
     };
-    return (jsx(Popover, { className: "dc-menu__container", placement: placement, alignment: alignment, anchor: renderAnchor, isOpen: isOpen, onClose: closeMenu, children: jsx("ul", { ...props, className: classNames('dc-menu', className), role: "menu", id: menuId, "aria-labelledby": buttonId, onKeyDown: handleMenuKeyDown, children: Children.map(children, (child) => {
+    return (_jsx(Popover, { className: "dc-menu__container", placement: placement, alignment: alignment, anchor: renderAnchor, isOpen: isOpen, onClose: closeMenu, children: _jsx("ul", { ...props, className: classNames('dc-menu', className), role: "menu", id: menuId, "aria-labelledby": buttonId, onKeyDown: handleMenuKeyDown, children: Children.map(children, (child) => {
                 if (isMenuItem(child)) {
                     const props = child.props;
                     const onClick = (event) => {
@@ -185,5 +183,3 @@ function getMenuItems(menuId) {
     const nodes = menuEl.querySelectorAll('button[role="menuitem"], button[role="menuitemradio"]');
     return Array.from(nodes);
 }
-
-export { Menu };

package/dist/esm/components/nav-list/index.d.ts

@@ -0,0 +1,3 @@
+export * from './nav-list.js';
+export * from './nav-list-item.js';
+export * from './nav-list-title.js';

package/dist/esm/components/nav-list/index.js

@@ -0,0 +1,3 @@
+export * from './nav-list.js';
+export * from './nav-list-item.js';
+export * from './nav-list-title.js';

package/dist/esm/components/nav-list/nav-list-item.js

@@ -0,0 +1,15 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { classNames } from '../../lib/react-helpers.js';
+import { Badge } from '../badge/index.js';
+export function NavListItem({ className, icon, badge, children, renderAs, ...props }) {
+    className = classNames(className, 'dc-nav-link');
+    children = (_jsxs(_Fragment, { children: [icon != null && _jsxs("div", { className: "dc-nav-link__icon", children: [icon, " "] }), _jsx("div", { className: "dc-nav-link__text", children: children }), badge != null && _jsxs(_Fragment, { children: ["\u00A0", _jsx(Badge, { className: "dc-nav-link__badge", children: badge })] })] }));
+    let content;
+    if (typeof renderAs === 'function') {
+        content = renderAs({ className, children });
+    }
+    else {
+        content = _jsx("a", { ...props, className: className, children: children });
+    }
+    return _jsx("li", { className: "dc-nav-list__item", children: content });
+}

package/dist/esm/components/nav-list/nav-list-title.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from '../../lib/react-helpers.js';
+export function NavListTitle({ className, children, ...props }) {
+    return (_jsx("li", { ...props, className: classNames('dc-nav-list__title', className), children: children }));
+}

package/dist/esm/components/nav-list/nav-list.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from '../../lib/react-helpers.js';
+export function NavList({ className, children, ...props }) {
+    return (_jsx("nav", { ...props, className: classNames('dc-nav-list', className), children: _jsx("ul", { className: "dc-nav-list__items", children: children }) }));
+}

package/dist/esm/components/password-input/index.d.ts

@@ -0,0 +1 @@
+export * from './password-input.js';

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

@@ -0,0 +1 @@
+export * from './password-input.js';

package/dist/esm/components/password-input/password-input.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { TextInputProps } from '../text-input/index.js';
+export type PasswordInputBaseProps = Omit<TextInputProps, 'type' | 'slotRight'>;
+export type PasswordInputProps = {
+    defaultVisible?: boolean;
+    getTooltipText?: (visible: boolean) => ReactNode;
+    renderToggleButtonIcon?: (visible: boolean) => ReactNode;
+} & PasswordInputBaseProps;
+export declare const PasswordInput: import("react").ForwardRefExoticComponent<Omit<PasswordInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+import { TextInput } from '../text-input/index.js';
+import { Tooltip } from '../tooltip/index.js';
+import { EyeIcon } from '../hero-icons/24/outline/eye-icon.js';
+import { EyeSlashIcon } from '../hero-icons/24/outline/eye-slash-icon.js';
+const getDefaultTooltipText = (visible) => (visible
+    ? 'Hide password'
+    : 'Show password');
+const renderToggleButtonDefaultIcon = (visible) => (visible
+    ? _jsx(EyeIcon, { width: "1.25em", height: "1.25em" })
+    : _jsx(EyeSlashIcon, { width: "1.25em", height: "1.25em" }));
+export const PasswordInput = forwardRef(function PasswordInput({ className, defaultVisible = false, getTooltipText = getDefaultTooltipText, renderToggleButtonIcon = renderToggleButtonDefaultIcon, ...props }, ref) {
+    const [visible, setVisible] = useState(defaultVisible);
+    return (_jsx(TextInput, { ...props, ref: ref, className: classNames('dc-password-input', className), type: visible ? 'text' : 'password', slotRight: () => (_jsx(Tooltip, { content: getTooltipText(visible), children: _jsx("button", { className: "dc-password-input__toggle-button", type: "button", onClick: () => setVisible(!visible), children: renderToggleButtonIcon(visible) }) })) }));
+});

package/dist/esm/components/popover/index.d.ts

@@ -0,0 +1 @@
+export * from './popover.js';

package/dist/esm/components/popover/index.js

@@ -0,0 +1 @@
+export * from './popover.js';

package/{types → dist/esm}/components/popover/popover.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ReactNode, RefCallback } from 'react';
-import { type PositionerProps } from '../positioner';
+import { type PositionerProps } from '../positioner/index.js';
 export type PopoverRef = {
     open(): void;
     close(): void;

package/{esm → dist/esm}/components/popover/popover.js

@@ -1,13 +1,12 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, useCallback, useImperativeHandle, cloneElement } from 'react';
-import { focusElement, mergeRefs, isReactElementWithRef, classNames } from '../../lib/react-helpers.js';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement, forwardRef, useCallback, useImperativeHandle, useRef, useState, } from 'react';
+import { classNames, focusElement, isReactElementWithRef, mergeRefs } from '../../lib/react-helpers.js';
 import { useMountTransition } from '../../hooks/use-mount-transition.js';
 import { useEscKeyDown } from '../../hooks/use-esc-key-down.js';
 import { useFocusTrap } from '../../hooks/use-focus-trap.js';
 import { usePageClick } from './use-page-click.js';
-import { Positioner } from '../positioner/positioner.js';
-
-const Popover = forwardRef(function Popover({ shouldTrapFocus = true, shouldFocusAnchorAfterEscPress = true, transitionDurationMs = 100, placement = 'bottom', alignment = 'start', anchorGap, viewportGap, anchor, className, children, onOpen, onClose, ...props }, ref) {
+import { Positioner, } from '../positioner/index.js';
+export const Popover = forwardRef(function Popover({ shouldTrapFocus = true, shouldFocusAnchorAfterEscPress = true, transitionDurationMs = 100, placement = 'bottom', alignment = 'start', anchorGap, viewportGap, anchor, className, children, onOpen, onClose, ...props }, ref) {
     const [defaultIsOpen, setDefaultIsOpen] = useState(props.defaultIsOpen ?? false);
     const anchorRef = useRef(null);
     const contentRef = useRef(null);
@@ -82,13 +81,11 @@ const Popover = forwardRef(function Popover({ shouldTrapFocus = true, shouldFocu
         if (isOpen || isMounted) {
             delete props.defaultIsOpen;
             delete props.isOpen;
-            return (jsx("div", { ref: portalRef, style: {
+            return (_jsx("div", { ref: portalRef, style: {
                     '--dc-popover-transition-duration': `${transitionDurationMs}ms`,
                     ...portalStyle,
-                }, className: classNames('dc-popover', transitionClass), children: jsx("div", { ...props, ref: contentRef, className: classNames('dc-popover-modal', className), children: children }) }));
+                }, className: classNames('dc-popover', transitionClass), children: _jsx("div", { ...props, ref: contentRef, className: classNames('dc-popover-modal', className), children: children }) }));
         }
     };
-    return (jsx(Positioner, { position: "absolute", placement: placement, alignment: alignment, anchorGap: anchorGap, viewportGap: viewportGap, renderAnchor: renderAnchor, renderContent: renderContent }));
+    return (_jsx(Positioner, { position: "absolute", placement: placement, alignment: alignment, anchorGap: anchorGap, viewportGap: viewportGap, renderAnchor: renderAnchor, renderContent: renderContent }));
 });
-
-export { Popover };

package/{esm → dist/esm}/components/popover/use-page-click.js

@@ -1,5 +1,4 @@
-import { useRef, useEffect } from 'react';
-
+import { useEffect, useRef } from 'react';
 const handlers = [];
 /**
  * Invokes a given handler when the user clicks on any place on the page.
@@ -11,7 +10,7 @@ const handlers = [];
  * @param options.isEnabled - A flag that determines whether to run
  * the passed handler or not.
  */
-function usePageClick(handler, options) {
+export function usePageClick(handler, options) {
     const handlerRef = useRef(handler);
     const isEnabled = options.isEnabled;
     useEffect(() => {
@@ -45,5 +44,3 @@ function usePageClick(handler, options) {
         };
     }, [isEnabled]);
 }
-
-export { usePageClick };

package/dist/esm/components/portal/index.d.ts

@@ -0,0 +1 @@
+export * from './portal.js';

package/dist/esm/components/portal/index.js

@@ -0,0 +1 @@
+export * from './portal.js';

package/{esm → dist/esm}/components/portal/portal-context.js

@@ -1,6 +1,5 @@
-import 'react/jsx-runtime';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from 'react';
-
 let root = null;
 const getPortalRoot = () => {
     if (root == null) {
@@ -12,9 +11,11 @@ const getPortalRoot = () => {
     return root;
 };
 const PortalContext = createContext(getPortalRoot);
-function usePortalRoot() {
+export function usePortalRoot() {
     const getRoot = useContext(PortalContext);
     return getRoot();
 }
-
-export { usePortalRoot };
+export function PortalRootProvider(props) {
+    const { getPortalRoot, children } = props;
+    return (_jsx(PortalContext.Provider, { value: getPortalRoot, children: children }));
+}

package/{esm → dist/esm}/components/portal/portal.js

@@ -1,9 +1,6 @@
 import { createPortal } from 'react-dom';
 import { usePortalRoot } from './portal-context.js';
-
-function Portal({ children }) {
+export function Portal({ children }) {
     const container = usePortalRoot();
     return createPortal(children, container);
 }
-
-export { Portal };

package/{types → dist/esm}/components/positioner/calc-position.d.ts

@@ -1,4 +1,4 @@
-import { Alignment, Coordinates, Placement, Rect } from './types';
+import { Alignment, Coordinates, Placement, Rect } from './types.js';
 export type CalcPositionParams = {
     placement: Placement;
     alignment: Alignment;

package/{esm → dist/esm}/components/positioner/calc-position.js

@@ -1,4 +1,4 @@
-function calcPosition({ placement, alignment, anchorRect, contentRect, viewportWidth, viewportHeight, scrollX, scrollY, anchorGap, viewportGap, }) {
+export function calcPosition({ placement, alignment, anchorRect, contentRect, viewportWidth, viewportHeight, scrollX, scrollY, anchorGap, viewportGap, }) {
     const maxWidth = viewportWidth - (2 * viewportGap);
     const maxSideWidth = Math.max(anchorRect.left - anchorGap - viewportGap, viewportWidth - anchorRect.right - anchorGap - viewportGap);
     if ((placement === 'left' || placement === 'right') &&
@@ -88,7 +88,7 @@ function getXAxisOffset({ alignment, viewportGap, scrollX, anchorX, viewportWidt
     }
     return x;
 }
-function getYAxisOffset({ placement, anchorGap, scrollY, anchorY, viewportHeight, contentHeight, anchorHeight, }) {
+export function getYAxisOffset({ placement, anchorGap, scrollY, anchorY, viewportHeight, contentHeight, anchorHeight, }) {
     const anchorBottom = viewportHeight - anchorY + anchorHeight;
     const top = scrollY + anchorY - anchorGap - contentHeight;
     const bottom = scrollY + anchorY + anchorHeight + anchorGap;
@@ -110,5 +110,3 @@ function getYAxisOffset({ placement, anchorGap, scrollY, anchorY, viewportHeight
     }
     return { offset: y, placement };
 }
-
-export { calcPosition, getYAxisOffset };

package/dist/esm/components/positioner/index.d.ts

@@ -0,0 +1 @@
+export * from './positioner.js';

package/dist/esm/components/positioner/index.js

@@ -0,0 +1 @@
+export * from './positioner.js';

package/{types → dist/esm}/components/positioner/positioner.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactNode, RefCallback } from 'react';
-import { Alignment, Placement } from './types';
+import { Alignment, Placement } from './types.js';
 export type PositionerAnchorRenderFn = (params: {
     setRef: RefCallback<HTMLElement>;
 }) => ReactNode;

package/{esm → dist/esm}/components/positioner/positioner.js

@@ -1,9 +1,8 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useState, useLayoutEffect } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useState } from 'react';
 import { calcPosition } from './calc-position.js';
-import { Portal } from '../portal/portal.js';
-
-function Positioner({ anchorGap = 4, viewportGap = 8, position = 'fixed', placement = 'bottom', alignment = 'start', renderAnchor, renderContent, }) {
+import { Portal } from '../portal/index.js';
+export function Positioner({ anchorGap = 4, viewportGap = 8, position = 'fixed', placement = 'bottom', alignment = 'start', renderAnchor, renderContent, }) {
     const [anchor, setAnchor] = useState(null);
     const [content, setContent] = useState(null);
     useLayoutEffect(() => {
@@ -35,7 +34,7 @@ function Positioner({ anchorGap = 4, viewportGap = 8, position = 'fixed', placem
             window.removeEventListener('scroll', calcContentPosition);
         };
     }, [anchor, content, position, placement, alignment, anchorGap, viewportGap]);
-    return (jsxs(Fragment, { children: [renderAnchor({ setRef: setAnchor }), jsx(Portal, { children: renderContent({
+    return (_jsxs(_Fragment, { children: [renderAnchor({ setRef: setAnchor }), _jsx(Portal, { children: renderContent({
                     setRef: setContent,
                     style: {
                         position,
@@ -58,5 +57,3 @@ function getRect(element) {
         bottom: top + height,
     };
 }
-
-export { Positioner };

package/dist/esm/components/positioner/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/radio/index.d.ts

@@ -0,0 +1 @@
+export * from './radio.js';

package/dist/esm/components/radio/index.js

@@ -0,0 +1 @@
+export * from './radio.js';

package/dist/esm/components/radio/radio.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+export const Radio = forwardRef(function Radio({ icon = 'dot', style, className, onChange, onToggle, ...props }, ref) {
+    let iconElement;
+    switch (icon) {
+        case 'check':
+            iconElement = _jsx(CheckIcon, { className: "dc-radio__icon", "data-testid": "radio-check-icon" });
+            break;
+        default:
+            iconElement = _jsx(DotIcon, { className: "dc-radio__icon", "data-testid": "radio-dot-icon" });
+    }
+    return (_jsxs("label", { style: style, className: classNames('dc-radio', className), children: [_jsx("input", { ...props, ref: ref, type: "radio", className: "dc-radio__input", onChange: (event) => {
+                    onChange?.(event);
+                    onToggle?.(event.target.checked);
+                } }), _jsx("span", { className: "dc-radio__check", "data-testid": "radio-check", "aria-hidden": true, children: iconElement })] }));
+});
+function CheckIcon(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: 20, height: 20, ...props, children: _jsx("path", { d: "M5 10.4444L9 14L15 6", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function DotIcon(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: 20, height: 20, ...props, children: _jsx("circle", { cx: 10, cy: 10, r: 4, fill: "currentColor" }) }));
+}

package/dist/esm/components/segmented-control/index.d.ts

@@ -0,0 +1 @@
+export * from './segmented-control.js';

package/dist/esm/components/segmented-control/index.js

@@ -0,0 +1 @@
+export * from './segmented-control.js';

package/dist/esm/components/segmented-control/segmented-button.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export type SegmentedButtonProps<T extends string | number> = {
+    className?: string;
+    disabled?: boolean;
+    selected: boolean;
+    value: T;
+    icon?: ReactNode;
+    children?: ReactNode;
+    onChangeValue: (value: T) => void;
+};
+export declare function SegmentedButton<T extends string | number>({ className, disabled, selected, value, icon, children, onChangeValue, }: SegmentedButtonProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/segmented-control/segmented-button.js

@@ -0,0 +1,10 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from '../../lib/react-helpers.js';
+export function SegmentedButton({ className, disabled, selected, value, icon, children, onChangeValue, }) {
+    function handleClick() {
+        if (!selected) {
+            onChangeValue(value);
+        }
+    }
+    return (_jsxs("button", { className: classNames('dc-segmented-button', className), type: "button", value: value, disabled: disabled, "aria-current": selected, onClick: handleClick, children: [icon, children] }));
+}

package/{types → dist/esm}/components/segmented-control/segmented-control.d.ts

@@ -1,15 +1,17 @@
-import { ComponentPropsWithRef, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+type SegmentedControlHTMLProps = ComponentPropsWithoutRef<'ul'>;
+export type SegmentedControlSize = 'sm' | 'md' | 'lg';
 export type SegmentedControlOption<T extends string | number> = {
     value: T;
     icon?: ReactNode;
     label?: ReactNode;
 };
-export type SegmentedControlSize = 'sm' | 'md' | 'lg';
 export type SegmentedControlProps<T extends string | number> = {
     size?: SegmentedControlSize;
     disabled?: boolean;
     options: SegmentedControlOption<T>[];
     value: T;
     onChangeValue: (value: T) => void;
-} & ComponentPropsWithRef<'ul'>;
+} & SegmentedControlHTMLProps;
 export declare function SegmentedControl<T extends string | number>({ size, disabled, className, value, options, onChangeValue, ...props }: SegmentedControlProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/segmented-control/segmented-control.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from '../../lib/react-helpers.js';
+import { SegmentedButton } from './segmented-button.js';
+export function SegmentedControl({ size = 'md', disabled, className, value, options, onChangeValue, ...props }) {
+    return (_jsx("ul", { ...props, className: classNames(className, 'dc-segmented', {
+            [`dc-segmented_size_${size}`]: size,
+            'dc-segmented_disabled': disabled,
+        }), children: options.map((option) => {
+            const selected = value === option.value;
+            return (_jsx("li", { className: classNames({
+                    'dc-segmented__item': true,
+                    'dc-segmented__item_selected': selected,
+                }), children: _jsx(SegmentedButton, { icon: option.icon, value: option.value, disabled: disabled, selected: selected, onChangeValue: onChangeValue, children: option.label }) }, option.value));
+        }) }));
+}

package/dist/esm/components/select/index.d.ts

@@ -0,0 +1 @@
+export * from './select.js';

package/dist/esm/components/select/index.js

@@ -0,0 +1 @@
+export * from './select.js';

package/{types → dist/esm}/components/select/select.d.ts

@@ -2,11 +2,11 @@ import { ComponentPropsWithRef } from 'react';
 export type SelectSize = 'sm' | 'md' | 'lg';
 type SelectHTMLProps = ComponentPropsWithRef<'select'>;
 type SelectBaseProps = Omit<SelectHTMLProps, 'size' | 'multiple' | 'value' | 'defaultValue'> & {
+    fullWidth?: boolean;
+    invalid?: boolean;
     loading?: boolean;
-    hasError?: boolean;
-    isBlock?: boolean;
     size?: SelectSize;
-    htmlSize?: SelectHTMLProps['size'];
+    displayedOptionsCount?: number;
 };
 export type SelectProps = SelectBaseProps & ({
     multiple?: false;
@@ -22,11 +22,11 @@ export type SelectProps = SelectBaseProps & ({
 export declare const Select: import("react").ForwardRefExoticComponent<(Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & {
     ref?: ((instance: HTMLSelectElement | null) => void) | import("react").RefObject<HTMLSelectElement> | null | undefined;
 }, "defaultValue" | "size" | "value" | "multiple"> & {
+    fullWidth?: boolean | undefined;
+    invalid?: boolean | undefined;
     loading?: boolean | undefined;
-    hasError?: boolean | undefined;
-    isBlock?: boolean | undefined;
     size?: SelectSize | undefined;
-    htmlSize?: SelectHTMLProps['size'];
+    displayedOptionsCount?: number | undefined;
 } & {
     multiple?: false | undefined;
     value?: string | number | undefined;
@@ -35,11 +35,11 @@ export declare const Select: import("react").ForwardRefExoticComponent<(Omit<Omi
 }, "ref"> | Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & {
     ref?: ((instance: HTMLSelectElement | null) => void) | import("react").RefObject<HTMLSelectElement> | null | undefined;
 }, "defaultValue" | "size" | "value" | "multiple"> & {
+    fullWidth?: boolean | undefined;
+    invalid?: boolean | undefined;
     loading?: boolean | undefined;
-    hasError?: boolean | undefined;
-    isBlock?: boolean | undefined;
     size?: SelectSize | undefined;
-    htmlSize?: SelectHTMLProps['size'];
+    displayedOptionsCount?: number | undefined;
 } & {
     multiple: true;
     value?: string[] | undefined;

package/dist/esm/components/select/select.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+import { Spinner } from '../spinner/index.js';
+export const Select = forwardRef(function Select({ fullWidth, invalid, loading, size = 'md', style, className, disabled, multiple, displayedOptionsCount, children, onChange, onChangeValue, ...props }, ref) {
+    const handleChange = (event) => {
+        if (typeof onChange === 'function') {
+            onChange(event);
+        }
+        if (typeof onChangeValue === 'function') {
+            if (multiple === true) {
+                const values = Array.from(event.target.options)
+                    .filter((option) => option.selected)
+                    .map((option) => option.value);
+                onChangeValue(values);
+            }
+            else {
+                onChangeValue(event.target.value);
+            }
+        }
+    };
+    let slotElement = (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "auto", height: "55%", stroke: "currentColor", strokeWidth: 1.5, fill: "none", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" }) }));
+    if (loading) {
+        slotElement = (_jsx(Spinner, { color: "currentColor", width: "auto", height: "45%" }));
+    }
+    return (_jsxs("div", { style: style, className: classNames(className, 'dc-select', {
+            [`dc-select_${size}`]: size,
+            'dc-select_full-width': fullWidth,
+            'dc-select_loading': loading,
+            'dc-select_invalid': invalid,
+            'dc-select_disabled': disabled,
+            'dc-select_multiple': multiple,
+        }), children: [_jsx("select", { ...props, ref: ref, className: "dc-select__native", size: displayedOptionsCount, multiple: multiple, disabled: disabled || loading, "aria-invalid": props['aria-invalid'] ?? invalid, onChange: handleChange, children: children }), _jsx("span", { className: "dc-select__slot-left", "aria-hidden": true, children: slotElement })] }));
+});

package/dist/esm/components/selection-control/index.d.ts

@@ -0,0 +1 @@
+export * from './selection-control.js';

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

@@ -0,0 +1 @@
+export * from './selection-control.js';

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, useId } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+import { Label } from '../label/index.js';
+import { Caption } from '../caption/index.js';
+export function SelectionControl({ label, labelFor, caption, className, children, ...props }) {
+    const defaultId = useId();
+    const controlId = labelFor || defaultId;
+    return (_jsxs("div", { ...props, className: classNames(className, {
+            'dc-selection-control': true,
+            'dc-selection-control__with_caption': caption,
+        }), children: [_jsx("div", { className: "dc-selection-control__input", children: typeof children === 'function'
+                    ? children({ id: controlId })
+                    : cloneElement(children, { id: children.props.id || controlId }) }), _jsx(Label, { className: "dc-selection-control__label", htmlFor: controlId, children: label }), caption ? (_jsx(Caption, { className: "dc-selection-control__caption", children: caption })) : null] }));
+}

package/dist/esm/components/slide-over/index.d.ts

@@ -0,0 +1,4 @@
+export { type SlideOverCloseCallback } from './types.js';
+export { SlideOver, type SlideOverProps, type SlideOverRef, } from './slide-over.js';
+export { SlideOverHeader, type SlideOverHeaderProps, } from './slide-over-header.js';
+export { SlideOverBody, type SlideOverBodyProps, } from './slide-over-body.js';

package/dist/esm/components/slide-over/index.js

@@ -0,0 +1,3 @@
+export { SlideOver, } from './slide-over.js';
+export { SlideOverHeader, } from './slide-over-header.js';
+export { SlideOverBody, } from './slide-over-body.js';

package/dist/esm/components/slide-over/slide-over-body.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from '../../lib/index.js';
+export function SlideOverBody({ className, ...props }) {
+    return (_jsx("div", { className: classNames('dc-slide-over-body', className), ...props }));
+}

package/{types → dist/esm}/components/slide-over/slide-over-context.d.ts

@@ -1,4 +1,4 @@
-import { SlideOverCloseCallback } from './types';
+import { SlideOverCloseCallback } from './types.js';
 import { ReactNode } from 'react';
 export type SlideOverContext = {
     titleId: string;

package/{esm → dist/esm}/components/slide-over/slide-over-context.js

@@ -1,21 +1,18 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useMemo } from 'react';
-
 const Context = createContext(null);
-function useSlideOverContext() {
+export function useSlideOverContext() {
     const ctx = useContext(Context);
     if (!ctx) {
         throw new Error('useSlideOverContext must be used within SlideOverContextProvider');
     }
     return ctx;
 }
-function SlideOverContextProvider({ titleId, descriptionId, closePanel, children, }) {
+export function SlideOverContextProvider({ titleId, descriptionId, closePanel, children, }) {
     const ctx = useMemo(() => ({
         titleId,
         descriptionId,
         closePanel,
     }), [titleId, descriptionId, closePanel]);
-    return (jsx(Context.Provider, { value: ctx, children: children }));
+    return (_jsx(Context.Provider, { value: ctx, children: children }));
 }
-
-export { SlideOverContextProvider, useSlideOverContext };

package/dist/esm/components/slide-over/slide-over-header.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from '../../lib/index.js';
+import { IconButton } from '../button/index.js';
+import { useSlideOverContext } from './slide-over-context.js';
+import { XMarkIcon } from '../hero-icons/24/outline/x-mark-icon.js';
+export function SlideOverHeader({ className, htmlTitle, title, children, description, closeButtonAccessibleName, onClickCloseButton, ...props }) {
+    const { titleId, descriptionId, closePanel } = useSlideOverContext();
+    const onCloseButtonClicked = (ev) => {
+        closePanel('close-button');
+        onClickCloseButton?.(ev);
+    };
+    return (_jsxs("div", { className: classNames('dc-slide-over-header', className), title: htmlTitle, ...props, children: [_jsxs("div", { className: "dc-slide-over-header__title", children: [_jsx("h2", { id: titleId, children: title }), _jsx(IconButton, { buttonStyle: "tinted", size: "xs", "aria-label": closeButtonAccessibleName, onClick: onCloseButtonClicked, children: _jsx(XMarkIcon, { width: 20, height: 20 }) })] }), description ? (_jsx("div", { id: descriptionId, className: "dc-slide-over-header__description", children: description })) : null, children ? (_jsx("div", { className: "dc-slide-over-header__content", children: children })) : null] }));
+}