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

package/cjs/components/popover/popover.cjs

@@ -0,0 +1,97 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+const useMountTransition = require('../../hooks/use-mount-transition.cjs');
+const useEscKeyDown = require('../../hooks/use-esc-key-down.cjs');
+const useFocusTrap = require('../../hooks/use-focus-trap.cjs');
+const usePageClick = require('./use-page-click.cjs');
+const positioner = require('../positioner/positioner.cjs');
+
+const Popover = react.forwardRef(function Popover({ shouldTrapFocus = true, shouldFocusAnchorAfterEscPress = true, placement = 'bottom', alignment = 'start', anchorGap, viewportGap, anchor, className, children, onOpen, onClose, ...props }, ref) {
+    const [defaultIsOpen, setDefaultIsOpen] = react.useState(props.defaultIsOpen ?? false);
+    const anchorRef = react.useRef(null);
+    const contentRef = react.useRef(null);
+    const isOpen = props.isOpen ?? defaultIsOpen;
+    const durationMs = 100;
+    const { isMounted, className: transitionClass } = useMountTransition.useMountTransition({
+        durationMs,
+        isShown: isOpen,
+        enterFrom: 'dc-popover_closed',
+        enterTo: 'dc-popover_opened',
+    });
+    const openPopover = react.useCallback(() => {
+        setDefaultIsOpen(true);
+        onOpen?.();
+    }, [onOpen]);
+    const closePopover = react.useCallback(() => {
+        setDefaultIsOpen(false);
+        onClose?.();
+    }, [onClose]);
+    const togglePopover = react.useCallback(() => {
+        if (isOpen) {
+            closePopover();
+        }
+        else {
+            openPopover();
+        }
+    }, [isOpen, closePopover, openPopover]);
+    react.useImperativeHandle(ref, () => ({
+        open: openPopover,
+        close: closePopover,
+        toggle: togglePopover,
+    }), [openPopover, closePopover, togglePopover]);
+    usePageClick.usePageClick((event) => {
+        const target = event.target;
+        const anchor = anchorRef.current;
+        const content = contentRef.current;
+        if (target instanceof Node &&
+            !anchor?.contains(target) &&
+            !content?.contains(target)) {
+            closePopover();
+        }
+    }, { isEnabled: isOpen });
+    useEscKeyDown.useEscKeyDown(() => {
+        closePopover();
+        if (shouldFocusAnchorAfterEscPress && anchorRef.current) {
+            reactHelpers.focusElement(anchorRef.current);
+        }
+    }, { isEnabled: isOpen });
+    useFocusTrap.useFocusTrap(contentRef, { isEnabled: shouldTrapFocus && isOpen });
+    const renderAnchor = ({ setRef }) => {
+        if (typeof anchor === 'function') {
+            return anchor({
+                ref: reactHelpers.mergeRefs(setRef, anchorRef),
+            }, {
+                isOpen: isOpen || isMounted,
+                openPopover,
+                closePopover,
+                togglePopover,
+            });
+        }
+        if (reactHelpers.isReactElementWithRef(anchor)) {
+            return react.cloneElement(anchor, {
+                ref: reactHelpers.mergeRefs(setRef, anchorRef, anchor.ref),
+                onClick: (event) => {
+                    togglePopover();
+                    anchor.props.onClick?.(event);
+                },
+            });
+        }
+        return anchor;
+    };
+    const renderContent = ({ setRef: portalRef, style: portalStyle, }) => {
+        if (isOpen || isMounted) {
+            delete props.defaultIsOpen;
+            delete props.isOpen;
+            return (jsxRuntime.jsx("div", { ref: portalRef, style: {
+                    '--dc-popover-transition-duration': `${durationMs}ms`,
+                    ...portalStyle,
+                }, className: reactHelpers.classNames('dc-popover', transitionClass), children: jsxRuntime.jsx("div", { ...props, ref: contentRef, className: reactHelpers.classNames('dc-popover-modal', className), children: children }) }));
+        }
+    };
+    return (jsxRuntime.jsx(positioner.Positioner, { position: "absolute", placement: placement, alignment: alignment, anchorGap: anchorGap, viewportGap: viewportGap, renderAnchor: renderAnchor, renderContent: renderContent }));
+});
+
+exports.Popover = Popover;

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

@@ -1,7 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePageClick = void 0;
-const react_1 = require("react");
+'use strict';
+
+const react = require('react');
+
 const handlers = [];
 /**
  * Invokes a given handler when the user clicks on any place on the page.
@@ -14,12 +14,12 @@ const handlers = [];
  * the passed handler or not.
  */
 function usePageClick(handler, options) {
-    const handlerRef = (0, react_1.useRef)(handler);
+    const handlerRef = react.useRef(handler);
     const isEnabled = options.isEnabled;
-    (0, react_1.useEffect)(() => {
+    react.useEffect(() => {
         handlerRef.current = handler;
     }, [handler]);
-    (0, react_1.useEffect)(() => {
+    react.useEffect(() => {
         if (!isEnabled) {
             return;
         }
@@ -47,4 +47,5 @@ function usePageClick(handler, options) {
         };
     }, [isEnabled]);
 }
+
 exports.usePageClick = usePageClick;

package/cjs/components/portal/portal-context.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+require('react/jsx-runtime');
+const react = require('react');
+
+let root = null;
+const getPortalRoot = () => {
+    if (root == null) {
+        root = document.createElement('div');
+        root.id = 'portal-root';
+        root.dataset.testid = 'portal-root';
+        document.body.append(root);
+    }
+    return root;
+};
+const PortalContext = react.createContext(getPortalRoot);
+function usePortalRoot() {
+    const getRoot = react.useContext(PortalContext);
+    return getRoot();
+}
+
+exports.usePortalRoot = usePortalRoot;

package/cjs/components/portal/portal.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+const reactDom = require('react-dom');
+const portalContext = require('./portal-context.cjs');
+
+function Portal({ children }) {
+    const container = portalContext.usePortalRoot();
+    return reactDom.createPortal(children, container);
+}
+
+exports.Portal = Portal;

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

@@ -1,6 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getYAxisOffset = exports.calcPosition = void 0;
+'use strict';
+
 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);
@@ -72,7 +71,6 @@ function calcPosition({ placement, alignment, anchorRect, contentRect, viewportW
     }
     return { x, y, placement, alignment };
 }
-exports.calcPosition = calcPosition;
 function getXAxisOffset({ alignment, viewportGap, scrollX, anchorX, viewportWidth, contentWidth, anchorWidth, }) {
     let x;
     if (alignment === 'start') {
@@ -114,4 +112,6 @@ function getYAxisOffset({ placement, anchorGap, scrollY, anchorY, viewportHeight
     }
     return { offset: y, placement };
 }
+
+exports.calcPosition = calcPosition;
 exports.getYAxisOffset = getYAxisOffset;

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

@@ -1,20 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Positioner = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const calc_position_1 = require("./calc-position");
-const portal_1 = require("../portal");
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const calcPosition = require('./calc-position.cjs');
+const portal = require('../portal/portal.cjs');
+
 function Positioner({ anchorGap = 4, viewportGap = 8, position = 'fixed', placement = 'bottom', alignment = 'start', renderAnchor, renderContent, }) {
-    const [anchor, setAnchor] = (0, react_1.useState)(null);
-    const [content, setContent] = (0, react_1.useState)(null);
-    (0, react_1.useLayoutEffect)(() => {
+    const [anchor, setAnchor] = react.useState(null);
+    const [content, setContent] = react.useState(null);
+    react.useLayoutEffect(() => {
         if (!anchor || !content) {
             return;
         }
         const calcContentPosition = () => {
             const isPositionedFixed = position === 'fixed';
-            const result = (0, calc_position_1.calcPosition)({
+            const result = calcPosition.calcPosition({
                 placement,
                 alignment,
                 anchorGap,
@@ -37,7 +37,7 @@ function Positioner({ anchorGap = 4, viewportGap = 8, position = 'fixed', placem
             window.removeEventListener('scroll', calcContentPosition);
         };
     }, [anchor, content, position, placement, alignment, anchorGap, viewportGap]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderAnchor({ setRef: setAnchor }), (0, jsx_runtime_1.jsx)(portal_1.Portal, { children: renderContent({
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderAnchor({ setRef: setAnchor }), jsxRuntime.jsx(portal.Portal, { children: renderContent({
                     setRef: setContent,
                     style: {
                         position,
@@ -45,7 +45,6 @@ function Positioner({ anchorGap = 4, viewportGap = 8, position = 'fixed', placem
                     },
                 }) })] }));
 }
-exports.Positioner = Positioner;
 function getRect(element) {
     const domRect = element.getBoundingClientRect();
     const width = Math.round(domRect.width);
@@ -61,3 +60,5 @@ function getRect(element) {
         bottom: top + height,
     };
 }
+
+exports.Positioner = Positioner;

package/cjs/components/radio/radio.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+
+const checkIcon = (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", className: "dc-radio__icon", "data-testid": "radio-check-icon", children: jsxRuntime.jsx("path", { d: "M7 12.7222L11 16.5L17 8", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const dotIcon = (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", className: "dc-radio__icon", "data-testid": "radio-dot-icon", children: jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "5", fill: "currentColor" }) }));
+const Radio = react.forwardRef(function Radio({ icon = 'dot', style = {}, className = '', onChange, onToggle, ...props }, ref) {
+    let renderedIcon;
+    switch (icon) {
+        case 'check':
+            renderedIcon = checkIcon;
+            break;
+        default:
+            renderedIcon = dotIcon;
+    }
+    return (jsxRuntime.jsxs("label", { style: style, className: reactHelpers.classNames('dc-radio', className), children: [jsxRuntime.jsx("input", { ...props, ref: ref, type: "radio", className: "dc-radio__input", onChange: (event) => {
+                    onChange?.(event);
+                    onToggle?.(event.target.checked);
+                } }), jsxRuntime.jsx("span", { className: "dc-radio__check", "data-testid": "radio-check", "aria-hidden": true, children: renderedIcon })] }));
+});
+
+exports.Radio = Radio;

package/cjs/components/segmented-control/segmented-control-button.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+
+function SegmentedControlButton({ className, checked, icon, children, value, onChangeValue, }) {
+    function handleClick() {
+        if (!checked) {
+            onChangeValue(value);
+        }
+    }
+    return (jsxRuntime.jsxs("li", { className: reactHelpers.classNames(className, 'dc-segmented__button'), role: "radio", "data-value": value, "aria-checked": checked, tabIndex: checked ? 0 : -1, onClick: handleClick, children: [icon, children] }));
+}
+
+exports.SegmentedControlButton = SegmentedControlButton;

package/cjs/components/segmented-control/segmented-control.cjs

@@ -0,0 +1,48 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const keyboardKeys = require('../../lib/keyboard-keys.cjs');
+const helpers = require('../../lib/helpers.cjs');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+const segmentedControlButton = require('./segmented-control-button.cjs');
+
+function SegmentedControl({ size = 'md', disabled = false, className, value, options, onChangeValue, ...props }) {
+    const ref = react.useRef(null);
+    function handleKeyDown(event) {
+        const prevIndex = options.findIndex((option) => option.value === value);
+        const containerEl = ref.current;
+        helpers.assertIfNullable(containerEl, 'ref.current is null or undefined');
+        let index = prevIndex;
+        if (event.key === keyboardKeys.KeyboardKeys.ArrowRight ||
+            event.key === keyboardKeys.KeyboardKeys.ArrowDown) {
+            index += 1;
+        }
+        else if (event.key === keyboardKeys.KeyboardKeys.ArrowLeft ||
+            event.key === keyboardKeys.KeyboardKeys.ArrowUp) {
+            index -= 1;
+        }
+        if (index < 0) {
+            index = options.length - 1;
+        }
+        else if (index >= options.length) {
+            index = 0;
+        }
+        if (index !== prevIndex) {
+            event.stopPropagation();
+            event.preventDefault();
+            const option = options[index];
+            helpers.assertIfNullable(option, `Unable to get option at index ${index}`);
+            onChangeValue(option.value);
+            const radioEl = containerEl.children[index];
+            helpers.assertIfNullable(radioEl, `Unable to get radio at index ${index}`);
+            reactHelpers.focusElement(radioEl);
+        }
+    }
+    return (jsxRuntime.jsx("ul", { ...props, ref: ref, role: "radiogroup", className: reactHelpers.classNames(className, 'dc-segmented', {
+            [`dc-segmented_${size}`]: size,
+            'dc-segmented_disabled': disabled,
+        }), onKeyDown: handleKeyDown, children: options.map((option) => (jsxRuntime.jsx(segmentedControlButton.SegmentedControlButton, { icon: option.icon, value: option.value, checked: value === option.value, onChangeValue: onChangeValue, children: option.label }, option.value))) }));
+}
+
+exports.SegmentedControl = SegmentedControl;

package/cjs/components/select/select.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+
+const Select = react.forwardRef(function Select({ hasError, isBlock, size = 'md', style, className, disabled, multiple, htmlSize, children, onChange, onChangeValue, ...props }, ref) {
+    return (jsxRuntime.jsxs("div", { style: style, className: reactHelpers.classNames(className, 'dc-select__container', {
+            [`dc-select__container_${size}`]: size !== undefined,
+            'dc-select__container_multiple': multiple,
+            'dc-select__container_disabled': disabled,
+            'dc-select__container_has_error': hasError,
+            'dc-select__container_block': isBlock,
+        }), children: [jsxRuntime.jsx("select", { ...props, ref: ref, className: "dc-select", size: htmlSize, multiple: multiple, disabled: disabled, onChange: (event) => {
+                    onChange?.(event);
+                    if (multiple === true) {
+                        onChangeValue?.(Array.from(event.target.options)
+                            .filter((option) => option.selected)
+                            .map((option) => option.value));
+                    }
+                    else {
+                        onChangeValue?.(event.target.value);
+                    }
+                }, children: children }), jsxRuntime.jsx("svg", { className: "dc-select__icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, fill: "none", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": true, children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" }) })] }));
+});
+
+exports.Select = Select;

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

@@ -0,0 +1,18 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+const label = require('../label/label.cjs');
+const caption = require('../caption/caption.cjs');
+
+function SelectionControl({ label: label$1, labelFor, caption: caption$1, className, children, ...props }) {
+    const defaultId = react.useId();
+    const controlId = labelFor || defaultId;
+    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 }))] }));
+}
+
+exports.SelectionControl = SelectionControl;

package/cjs/components/slider/slider-tick-marks.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+
+function SliderTickMarks({ tickMarksCount, renderTickMarkLabel, }) {
+    if (tickMarksCount < 1) {
+        return null;
+    }
+    const tickMarks = [];
+    for (let index = 0; index < tickMarksCount; index += 1) {
+        const label = renderTickMarkLabel?.(index);
+        tickMarks.push((jsxRuntime.jsx("div", { className: "dc-slider-tick-mark", "data-testid": "tick-mark", children: Boolean(label) && (jsxRuntime.jsx("span", { className: "dc-slider-tick-mark__label", children: label })) }, index)));
+    }
+    return jsxRuntime.jsx("div", { className: "dc-slider__tick-marks", children: tickMarks });
+}
+
+exports.SliderTickMarks = SliderTickMarks;

package/{dist/components/slider/slider.js → cjs/components/slider/slider.cjs}

@@ -1,28 +1,28 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Slider = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_helpers_1 = require("../../shared/react-helpers");
-const slider_tick_marks_1 = require("./slider-tick-marks");
-exports.Slider = (0, react_1.forwardRef)(function Slider({ thumbStyle = 'round', tickMarksCount = 0, renderTickMarkLabel, step = 1, min = 0, max = 100, style, className, disabled, value, defaultValue, onChange, onChangeValue, ...props }, ref) {
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+const sliderTickMarks = require('./slider-tick-marks.cjs');
+
+const Slider = react.forwardRef(function Slider({ thumbStyle = 'round', tickMarksCount = 0, renderTickMarkLabel, step = 1, min = 0, max = 100, style, className, disabled, value, defaultValue, onChange, onChangeValue, ...props }, ref) {
     defaultValue = value == null ? defaultValue || 0 : undefined;
-    return ((0, jsx_runtime_1.jsxs)("div", { style: style, className: (0, react_helpers_1.classNames)(className, 'dc-slider', {
+    return (jsxRuntime.jsxs("div", { style: style, className: reactHelpers.classNames(className, 'dc-slider', {
             [`dc-slider_thumb_${thumbStyle}`]: thumbStyle !== undefined,
             'dc-slider_disabled': disabled,
-        }), children: [(0, jsx_runtime_1.jsx)("input", { ...props, ref: ref, style: {
+        }), children: [jsxRuntime.jsx("input", { ...props, ref: ref, style: {
                     background: getTrackBackground({
                         min,
                         max,
-                        value: value !== null && value !== void 0 ? value : defaultValue,
+                        value: value ?? defaultValue,
                     }),
                 }, className: "dc-slider__input", type: "range", value: value, defaultValue: defaultValue, min: min, max: max, step: step, disabled: disabled, onChange: (event) => {
                     const target = event.target;
                     const value = Number(target.value);
-                    onChange === null || onChange === void 0 ? void 0 : onChange(event);
-                    onChangeValue === null || onChangeValue === void 0 ? void 0 : onChangeValue(value);
+                    onChange?.(event);
+                    onChangeValue?.(value);
                     target.style.background = getTrackBackground({ min, max, value });
-                } }), (0, jsx_runtime_1.jsx)(slider_tick_marks_1.SliderTickMarks, { tickMarksCount: tickMarksCount, renderTickMarkLabel: renderTickMarkLabel })] }));
+                } }), jsxRuntime.jsx(sliderTickMarks.SliderTickMarks, { tickMarksCount: tickMarksCount, renderTickMarkLabel: renderTickMarkLabel })] }));
 });
 function getTrackBackground(params) {
     const value = params.value || 0;
@@ -37,3 +37,5 @@ function getTrackBackground(params) {
     var(--dc-slider-track-bg) ${valuePct}%
   )`;
 }
+
+exports.Slider = Slider;

package/cjs/components/spinner/spinner.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+
+const Spinner = react.forwardRef(function Spinner({ size = 24, width = size, height = size, className = '', ...props }, ref) {
+    return jsxRuntime.jsx("svg", { ...props, ref: ref, className: reactHelpers.classNames('dc-spinner', className), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 50 50", width: width, height: height, children: jsxRuntime.jsx("circle", { cx: 25, cy: 25, r: 20, fill: "none", stroke: "currentColor", strokeWidth: 5 }) });
+});
+
+exports.Spinner = Spinner;

package/cjs/components/switch/switch.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+
+const checkIcon = (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", className: "dc-switch__icon", "data-testid": "switch-check-icon", children: jsxRuntime.jsx("path", { d: "M6 10.353L9 13L13.5 7", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const Switch = react.forwardRef(function Switch({ style = {}, className = '', showCheckIcon = true, onChange, onToggle, ...props }, ref) {
+    return (jsxRuntime.jsxs("label", { style: style, className: reactHelpers.classNames('dc-switch', className), children: [jsxRuntime.jsx("input", { ...props, ref: ref, className: "dc-switch__input", type: "checkbox", onChange: (event) => {
+                    onChange?.(event);
+                    onToggle?.(event.target.checked);
+                } }), jsxRuntime.jsx("span", { "data-testid": "switch-track", className: "dc-switch__track", "aria-hidden": true, children: jsxRuntime.jsx("span", { className: "dc-switch__thumb", children: showCheckIcon && checkIcon }) })] }));
+});
+
+exports.Switch = Switch;

package/cjs/components/table/icons.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+
+function ArrowsUpDown(props) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, strokeWidth: 1.5, stroke: "currentColor", ...props, children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 7.5L7.5 3m0 0L12 7.5M7.5 3v13.5m13.5 0L16.5 21m0 0L12 16.5m4.5 4.5V7.5" }) }));
+}
+function ArrowSmallDown(props) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, strokeWidth: 1.5, stroke: "currentColor", ...props, children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75" }) }));
+}
+function ArrowSmallUp(props) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, strokeWidth: 1.5, stroke: "currentColor", ...props, children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 19.5v-15m0 0l-6.75 6.75M12 4.5l6.75 6.75" }) }));
+}
+
+exports.ArrowSmallDown = ArrowSmallDown;
+exports.ArrowSmallUp = ArrowSmallUp;
+exports.ArrowsUpDown = ArrowsUpDown;

package/cjs/components/table/table-body.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+
+const TableBody = react.forwardRef(function TableBody({ className, children, ...props }, ref) {
+    return (jsxRuntime.jsx("tbody", { ...props, ref: ref, className: reactHelpers.classNames(className, 'dc-table-body'), children: children }));
+});
+
+exports.TableBody = TableBody;

package/cjs/components/table/table-cell.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+
+const TableCell = react.forwardRef(function TableCell({ className, children, ...props }, ref) {
+    return (jsxRuntime.jsx("td", { ...props, ref: ref, className: reactHelpers.classNames('dc-table-cell', className), children: children }));
+});
+
+exports.TableCell = TableCell;

package/cjs/components/table/table-container.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+
+const TableContainer = react.forwardRef(function TableContainer({ border, className, children, ...props }, ref) {
+    let modifier = '';
+    if (typeof border === 'object' && border != null) {
+        modifier = reactHelpers.classNames({
+            'dc-table-container_border_top': border.top,
+            'dc-table-container_border_right': border.right,
+            'dc-table-container_border_bottom': border.bottom,
+            'dc-table-container_border_left': border.left,
+        });
+    }
+    else if (border === 'all') {
+        modifier = 'dc-table-container_border_all';
+    }
+    return (jsxRuntime.jsx("div", { ...props, ref: ref, className: reactHelpers.classNames(className, modifier, 'dc-table-container'), children: children }));
+});
+
+exports.TableContainer = TableContainer;

package/cjs/components/table/table-head-cell.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+const icons = require('./icons.cjs');
+
+const iconMapping = {
+    none: icons.ArrowsUpDown,
+    ascending: icons.ArrowSmallUp,
+    descending: icons.ArrowSmallDown,
+};
+const stateMapping = {
+    none: 'ascending',
+    ascending: 'descending',
+    descending: 'none',
+};
+const TableHeadCell = react.forwardRef(function TableHeaderCell({ isSortable = false, sort = 'none', className, children, onChangeSort, ...props }, ref) {
+    if (isSortable) {
+        const Icon = iconMapping[sort];
+        children = (jsxRuntime.jsxs("button", { className: "dc-table-cell__sort-btn", type: "button", onClick: () => onChangeSort?.(stateMapping[sort]), children: [children, " ", jsxRuntime.jsx(Icon, { className: "dc-table-cell__sort-icon", "aria-hidden": true, strokeWidth: 2 })] }));
+    }
+    return (jsxRuntime.jsx("th", { ...props, className: reactHelpers.classNames(className, {
+            'dc-table-cell': true,
+            'dc-table-cell_head': true,
+            'dc-table-cell_sortable': isSortable,
+        }), ref: ref, "aria-sort": isSortable ? sort : props['aria-sort'], children: children }));
+});
+
+exports.TableHeadCell = TableHeadCell;

package/cjs/components/table/table-head.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+
+const TableHead = react.forwardRef(function TableHead({ className, isTinted = false, ...props }, ref) {
+    return (jsxRuntime.jsx("thead", { ...props, ref: ref, className: reactHelpers.classNames(className, {
+            'dc-table-head': true,
+            'dc-table-head_tinted': isTinted,
+        }) }));
+});
+
+exports.TableHead = TableHead;

package/cjs/components/table/table-row.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+
+const TableRow = react.forwardRef(function TableRow({ isSelected, className, ...props }, ref) {
+    return (jsxRuntime.jsx("tr", { ...props, ref: ref, className: reactHelpers.classNames(className, {
+            'dc-table-row': true,
+            'dc-table-row_selected': isSelected,
+        }) }));
+});
+
+exports.TableRow = TableRow;

package/cjs/components/table/table.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+
+const Table = react.forwardRef(function Table({ cellSize = 'md', isStriped = false, isBordered = false, highlightRowOnHover = false, className, children, ...props }, ref) {
+    return (jsxRuntime.jsx("table", { ...props, ref: ref, className: reactHelpers.classNames(className, 'dc-table', {
+            [`dc-table_cell_${cellSize}`]: cellSize,
+            'dc-table_striped': isStriped,
+            'dc-table_bordered': isBordered,
+            'dc-table_highlight_row': highlightRowOnHover,
+        }), children: children }));
+});
+
+exports.Table = Table;