draft-components 1.12.0 → 2.0.0

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

@@ -0,0 +1,25 @@
+import { SlideOverCloseCallback } from './types.js';
+import { ComponentPropsWithoutRef } from 'react';
+import { SlideOverHeader } from './slide-over-header.js';
+import { SlideOverBody } from './slide-over-body.js';
+export type SlideOverHTMLProps = ComponentPropsWithoutRef<'div'>;
+export type SlideOverProps = SlideOverHTMLProps & {
+    animationDurationMs?: number;
+    animationDisabled?: boolean;
+    shouldCloseOnEscKeyPress?: boolean;
+    shouldCloseOnBackdropClick?: boolean;
+    onClose: SlideOverCloseCallback;
+};
+export type SlideOverRef = {
+    close: () => void;
+};
+export declare const SlideOver: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    animationDurationMs?: number | undefined;
+    animationDisabled?: boolean | undefined;
+    shouldCloseOnEscKeyPress?: boolean | undefined;
+    shouldCloseOnBackdropClick?: boolean | undefined;
+    onClose: SlideOverCloseCallback;
+} & import("react").RefAttributes<SlideOverRef>> & {
+    Header: typeof SlideOverHeader;
+    Body: typeof SlideOverBody;
+};

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

@@ -1,14 +1,11 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useId, useRef, useCallback, useMemo, useEffect } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, } from 'react';
 import { SlideOverContextProvider } from './slide-over-context.js';
-import { getRefElement, classNames } from '../../lib/react-helpers.js';
-import { useDisableBodyScroll } from '../../hooks/use-disable-body-scroll.js';
-import { useEscKeyDown } from '../../hooks/use-esc-key-down.js';
-import { useFocusTrap } from '../../hooks/use-focus-trap.js';
-import { Portal } from '../portal/portal.js';
+import { classNames, getRefElement } from '../../lib/index.js';
+import { useDisableBodyScroll, useEscKeyDown, useFocusTrap } from '../../hooks/index.js';
+import { Portal } from '../portal/index.js';
 import { SlideOverHeader } from './slide-over-header.js';
 import { SlideOverBody } from './slide-over-body.js';
-
 const panelSlideIn = [
     { transform: 'translateX(100%)' },
     { transform: 'translateX(0%)' },
@@ -17,7 +14,7 @@ const backdropFade = [
     { opacity: 0 },
     { opacity: 1 },
 ];
-function SlideOver({ 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, animationDurationMs = 350, animationDisabled = false, className, children, onClose, ...props }) {
+const SlideOverWithRef = forwardRef(function SlideOver({ 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, animationDurationMs = 350, animationDisabled = false, shouldCloseOnEscKeyPress = true, shouldCloseOnBackdropClick = true, className, children, onClose, ...props }, ref) {
     const id = useId();
     const titleId = ariaLabelledby || `${id}dialogTitle`;
     const descriptionId = ariaDescribedby || `${id}dialogDescription`;
@@ -71,6 +68,9 @@ function SlideOver({ 'aria-labelledby': ariaLabelledby, 'aria-describedby': aria
             });
         };
     }, [animationDurationMs, onClose, shouldPlayAnimations]);
+    useImperativeHandle(ref, () => ({
+        close: closePanel,
+    }));
     useEffect(() => {
         isAnimationDisabled.current = animationDisabled;
     }, [animationDisabled]);
@@ -90,15 +90,17 @@ function SlideOver({ 'aria-labelledby': ariaLabelledby, 'aria-describedby': aria
             });
         }
     }, [shouldPlayAnimations, animationDurationMs]);
-    useEscKeyDown(() => closePanel('escape'));
+    useEscKeyDown(() => closePanel('escape'), { isEnabled: shouldCloseOnEscKeyPress });
     useFocusTrap(panelRef);
     useDisableBodyScroll();
     const onClickBackdrop = () => {
-        closePanel('backdrop');
+        if (shouldCloseOnBackdropClick) {
+            closePanel('backdrop');
+        }
     };
-    return (jsx(Portal, { children: jsxs("div", { className: "dc-slide-over", children: [jsx("div", { "data-testid": "slide-over-backdrop", className: "dc-slide-over__backdrop", ref: backdropRef, onClick: onClickBackdrop }), jsx("div", { ...props, className: classNames('dc-slide-over__panel', className), role: "dialog", ref: panelRef, "aria-modal": true, "aria-labelledby": titleId, "aria-describedby": descriptionId, children: jsx(SlideOverContextProvider, { titleId: titleId, descriptionId: descriptionId, closePanel: closePanel, children: children }) })] }) }));
-}
-SlideOver.Header = SlideOverHeader;
-SlideOver.Body = SlideOverBody;
-
-export { SlideOver };
+    return (_jsx(Portal, { children: _jsxs("div", { className: "dc-slide-over", children: [_jsx("div", { "data-testid": "slide-over-backdrop", className: "dc-slide-over__backdrop", ref: backdropRef, role: "presentation", onClick: onClickBackdrop }), _jsx("div", { ...props, className: classNames('dc-slide-over__panel', className), role: "dialog", ref: panelRef, "aria-modal": true, "aria-labelledby": titleId, "aria-describedby": descriptionId, children: _jsx(SlideOverContextProvider, { titleId: titleId, descriptionId: descriptionId, closePanel: closePanel, children: children }) })] }) }));
+});
+export const SlideOver = Object.assign(SlideOverWithRef, {
+    Header: SlideOverHeader,
+    Body: SlideOverBody,
+});

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

@@ -0,0 +1 @@
+export type SlideOverCloseCallback = (source?: 'close-button' | 'backdrop' | 'escape') => void;

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

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

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

@@ -0,0 +1,2 @@
+export * from './slider.js';
+export { SliderTickMarks } from './slider-tick-marks.js';

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

@@ -0,0 +1,2 @@
+export * from './slider.js';
+export { SliderTickMarks } from './slider-tick-marks.js';

package/dist/esm/components/slider/slider-tick-marks.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export 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((_jsx("div", { className: "dc-slider-tick-mark", "data-testid": "tick-mark", children: Boolean(label) && (_jsx("span", { className: "dc-slider-tick-mark__label", children: label })) }, index)));
+    }
+    return _jsx("div", { className: "dc-slider__tick-marks", children: tickMarks });
+}

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

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef } from 'react';
-import { SliderTickMarksProps } from './slider-tick-marks';
+import { SliderTickMarksProps } from './slider-tick-marks.js';
 type SliderHTMLProps = ComponentPropsWithRef<'input'>;
 type SliderBaseProps = Omit<SliderHTMLProps, 'type' | 'min' | 'max' | 'step' | 'value' | 'defaultValue'>;
 export type SliderThumbStyle = 'round' | 'rect';

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

@@ -1,14 +1,13 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 import { SliderTickMarks } from './slider-tick-marks.js';
-
-const Slider = forwardRef(function Slider({ thumbStyle = 'round', tickMarksCount = 0, renderTickMarkLabel, step = 1, min = 0, max = 100, style, className, disabled, value, defaultValue, onChange, onChangeValue, ...props }, ref) {
+export const Slider = 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 (jsxs("div", { style: style, className: classNames(className, 'dc-slider', {
+    return (_jsxs("div", { style: style, className: classNames(className, 'dc-slider', {
             [`dc-slider_thumb_${thumbStyle}`]: thumbStyle !== undefined,
             'dc-slider_disabled': disabled,
-        }), children: [jsx("input", { ...props, ref: ref, style: {
+        }), children: [_jsx("input", { ...props, ref: ref, style: {
                     background: getTrackBackground({
                         min,
                         max,
@@ -20,7 +19,7 @@ const Slider = forwardRef(function Slider({ thumbStyle = 'round', tickMarksCount
                     onChange?.(event);
                     onChangeValue?.(value);
                     target.style.background = getTrackBackground({ min, max, value });
-                } }), jsx(SliderTickMarks, { tickMarksCount: tickMarksCount, renderTickMarkLabel: renderTickMarkLabel })] }));
+                } }), _jsx(SliderTickMarks, { tickMarksCount: tickMarksCount, renderTickMarkLabel: renderTickMarkLabel })] }));
 });
 function getTrackBackground(params) {
     const value = params.value || 0;
@@ -35,5 +34,3 @@ function getTrackBackground(params) {
     var(--dc-slider-track-bg) ${valuePct}%
   )`;
 }
-
-export { Slider };

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

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

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

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

package/dist/esm/components/spinner/spinner.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+export const Spinner = forwardRef(function Spinner({ size = 24, width = size, height = size, className = '', ...props }, ref) {
+    return _jsx("svg", { ...props, ref: ref, className: classNames('dc-spinner', className), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 50 50", width: width, height: height, children: _jsx("circle", { cx: 25, cy: 25, r: 20, fill: "none", stroke: "currentColor", strokeWidth: 5 }) });
+});

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

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

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

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

package/dist/esm/components/switch/switch.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+export const Switch = forwardRef(function Switch({ showCheckIcon = true, style, className, onChange, onToggle, ...props }, ref) {
+    return (_jsxs("label", { style: style, className: classNames('dc-switch', className), children: [_jsx("input", { ...props, ref: ref, className: "dc-switch__input", type: "checkbox", onChange: (event) => {
+                    onChange?.(event);
+                    onToggle?.(event.target.checked);
+                } }), _jsx("span", { "data-testid": "switch-track", className: "dc-switch__track", "aria-hidden": true, children: _jsx("span", { className: "dc-switch__thumb", children: showCheckIcon && (_jsx(CheckIcon, { className: "dc-switch__icon", "data-testid": "switch-check-icon" })) }) })] }));
+});
+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: "M6 10.353L9 13L13.5 7", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}

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

@@ -0,0 +1,7 @@
+export * from './table-container.js';
+export * from './table.js';
+export * from './table-head.js';
+export * from './table-body.js';
+export * from './table-row.js';
+export * from './table-head-cell.js';
+export * from './table-cell.js';

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

@@ -0,0 +1,7 @@
+export * from './table-container.js';
+export * from './table.js';
+export * from './table-head.js';
+export * from './table-body.js';
+export * from './table-row.js';
+export * from './table-head-cell.js';
+export * from './table-cell.js';

package/dist/esm/components/table/table-body.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+export const TableBody = forwardRef(function TableBody({ className, children, ...props }, ref) {
+    return (_jsx("tbody", { ...props, ref: ref, className: classNames(className, 'dc-table-body'), children: children }));
+});

package/dist/esm/components/table/table-cell.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+export const TableCell = forwardRef(function TableCell({ className, children, ...props }, ref) {
+    return (_jsx("td", { ...props, ref: ref, className: classNames('dc-table-cell', className), children: children }));
+});

package/{esm → dist/esm}/components/table/table-container.js

@@ -1,8 +1,7 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { classNames } from '../../lib/react-helpers.js';
-
-const TableContainer = forwardRef(function TableContainer({ border, className, children, ...props }, ref) {
+export const TableContainer = forwardRef(function TableContainer({ border, className, children, ...props }, ref) {
     let modifier = '';
     if (typeof border === 'object' && border != null) {
         modifier = classNames({
@@ -15,7 +14,5 @@ const TableContainer = forwardRef(function TableContainer({ border, className, c
     else if (border === 'all') {
         modifier = 'dc-table-container_border_all';
     }
-    return (jsx("div", { ...props, ref: ref, className: classNames(className, modifier, 'dc-table-container'), children: children }));
+    return (_jsx("div", { ...props, ref: ref, className: classNames(className, modifier, 'dc-table-container'), children: children }));
 });
-
-export { TableContainer };

package/{types → dist/esm}/components/table/table-head-cell.d.ts

@@ -6,5 +6,5 @@ export type TableHeadCellProps = {
     sort?: TableHeadCellSort;
     onChangeSort?: (sort: TableHeadCellSort) => void;
 } & TableHeadCellBaseProps;
-export declare const TableHeadCell: import("react").ForwardRefExoticComponent<Omit<TableHeadCellProps, "ref"> & import("react").RefAttributes<HTMLTableHeaderCellElement>>;
+export declare const TableHeadCell: import("react").ForwardRefExoticComponent<Omit<TableHeadCellProps, "ref"> & import("react").RefAttributes<HTMLTableCellElement>>;
 export {};

package/dist/esm/components/table/table-head-cell.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+import { ArrowsUpDownIcon } from '../hero-icons/24/outline/arrows-up-down-icon.js';
+import { ArrowSmallUpIcon } from '../hero-icons/24/outline/arrow-small-up-icon.js';
+import { ArrowSmallDownIcon } from '../hero-icons/24/outline/arrow-small-down-icon.js';
+const iconMapping = {
+    none: ArrowsUpDownIcon,
+    ascending: ArrowSmallUpIcon,
+    descending: ArrowSmallDownIcon,
+};
+const stateMapping = {
+    none: 'ascending',
+    ascending: 'descending',
+    descending: 'none',
+};
+export const TableHeadCell = forwardRef(function TableHeaderCell({ isSortable = false, sort = 'none', className, children, onChangeSort, ...props }, ref) {
+    if (isSortable) {
+        const Icon = iconMapping[sort];
+        children = (_jsxs("button", { className: "dc-table-cell__sort-btn", type: "button", onClick: () => onChangeSort?.(stateMapping[sort]), children: [children, " ", _jsx(Icon, { className: "dc-table-cell__sort-icon", "aria-hidden": true, strokeWidth: 2 })] }));
+    }
+    return (_jsx("th", { ...props, className: 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 }));
+});

package/dist/esm/components/table/table-head.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+export const TableHead = forwardRef(function TableHead({ className, isTinted = false, ...props }, ref) {
+    return (_jsx("thead", { ...props, ref: ref, className: classNames(className, {
+            'dc-table-head': true,
+            'dc-table-head_tinted': isTinted,
+        }) }));
+});

package/dist/esm/components/table/table-row.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+export const TableRow = forwardRef(function TableRow({ isSelected, className, ...props }, ref) {
+    return (_jsx("tr", { ...props, ref: ref, className: classNames(className, {
+            'dc-table-row': true,
+            'dc-table-row_selected': isSelected,
+        }) }));
+});

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

@@ -1,14 +1,11 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { classNames } from '../../lib/react-helpers.js';
-
-const Table = forwardRef(function Table({ cellSize = 'md', isStriped = false, isBordered = false, highlightRowOnHover = false, className, children, ...props }, ref) {
-    return (jsx("table", { ...props, ref: ref, className: classNames(className, 'dc-table', {
+export const Table = forwardRef(function Table({ cellSize = 'md', isStriped = false, isBordered = false, highlightRowOnHover = false, className, children, ...props }, ref) {
+    return (_jsx("table", { ...props, ref: ref, className: classNames(className, 'dc-table', {
             [`dc-table_cell_${cellSize}`]: cellSize,
             'dc-table_striped': isStriped,
             'dc-table_bordered': isBordered,
             'dc-table_highlight_row': highlightRowOnHover,
         }), children: children }));
 });
-
-export { Table };

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

@@ -0,0 +1,4 @@
+export * from './tabs.js';
+export * from './tab-list.js';
+export * from './tab.js';
+export * from './tab-panel.js';

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

@@ -0,0 +1,4 @@
+export * from './tabs.js';
+export * from './tab-list.js';
+export * from './tab.js';
+export * from './tab-panel.js';

package/{esm → dist/esm}/components/tabs/tab-list.js

@@ -1,11 +1,10 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef } from 'react';
 import { KeyboardKeys } from '../../lib/keyboard-keys.js';
 import { assertIfNullable } from '../../lib/helpers.js';
 import { classNames, focusElement } from '../../lib/react-helpers.js';
 import { useTabsContext } from './tabs-context.js';
-
-function TabList({ className, children, onFocus, onBlur, onKeyDown, ...props }) {
+export function TabList({ className, children, onFocus, onBlur, onKeyDown, ...props }) {
     const ref = useRef(null);
     const { selectedTab, setTabListHasFocus } = useTabsContext();
     function handleFocus(event) {
@@ -59,7 +58,5 @@ function TabList({ className, children, onFocus, onBlur, onKeyDown, ...props })
         }
         onKeyDown?.(event);
     }
-    return (jsx("div", { ...props, ref: ref, role: "tablist", className: classNames('dc-tab-list', className), onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, children: children }));
+    return (_jsx("div", { ...props, ref: ref, role: "tablist", tabIndex: -1, className: classNames('dc-tab-list', className), onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, children: children }));
 }
-
-export { TabList };

package/{types → dist/esm}/components/tabs/tab-panel.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef } from 'react';
-import { TabName } from './types';
+import { TabName } from './types.js';
 export type TabPanelProps = {
     tab: TabName;
 } & ComponentPropsWithoutRef<'div'>;

package/dist/esm/components/tabs/tab-panel.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from '../../lib/react-helpers.js';
+import { useTabsContext } from './tabs-context.js';
+export function TabPanel({ tab, id, className, children, 'aria-labelledby': ariaLabelledBy, ...props }) {
+    const { selectedTab, getTabProps } = useTabsContext();
+    if (selectedTab !== tab) {
+        return null;
+    }
+    const tabProps = getTabProps(tab);
+    return (_jsx("div", { ...props, className: classNames('dc-tab-panel', className), role: "tabpanel", id: id || tabProps.ariaControls, "aria-labelledby": ariaLabelledBy || tabProps.id, children: children }));
+}

package/dist/esm/components/tabs/tab.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from '../../lib/react-helpers.js';
+import { useTabsContext } from './tabs-context.js';
+import { Badge } from '../badge/index.js';
+export function Tab({ id, name, icon, counter, className, children, onClick, 'aria-controls': ariaControls, ...props }) {
+    const { getTabProps, selectedTab, setSelectedTab, tabListHasFocus, } = useTabsContext();
+    const tabProps = getTabProps(name);
+    const selected = name === selectedTab;
+    function handleClick(event) {
+        setSelectedTab(name);
+        onClick?.(event);
+    }
+    return (_jsx("button", { ...props, className: classNames('dc-tab', className), type: "button", role: "tab", name: name, id: id || tabProps.id, "aria-controls": ariaControls || tabProps.ariaControls, "aria-selected": selected, tabIndex: selected && !tabListHasFocus ? 0 : -1, onClick: handleClick, children: _jsxs("span", { className: "dc-tab__layout", children: [icon != null && (_jsx("span", { className: "dc-tab__icon", children: icon })), children != null && (_jsxs("span", { className: "dc-tab__label", children: [children, " "] })), counter != null && counter !== 0 && (_jsx(Badge, { className: "dc-tab__counter", children: counter }))] }) }));
+}

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { TabName, TabSetter } from './types';
+import { TabName, TabSetter } from './types.js';
 export type GetTabProps = (tab: TabName) => ({
     id: string;
     ariaControls: string;

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

@@ -1,15 +1,14 @@
-import { jsx } from 'react/jsx-runtime';
-import { createContext, useState, useId, useCallback, useContext } from 'react';
-
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useId, useState } from 'react';
 const TabsContext = createContext(null);
-function TabsContextProvider({ children, selectedTab, setSelectedTab, }) {
+export function TabsContextProvider({ children, selectedTab, setSelectedTab, }) {
     const [tabListHasFocus, setTabListHasFocus] = useState(false);
     const id = useId();
     const getTabProps = useCallback((tab) => ({
         id: `${id}-tab[${tab}]`,
         ariaControls: `${id}-tabPanel[${tab}]`,
     }), [id]);
-    return (jsx(TabsContext.Provider, { value: {
+    return (_jsx(TabsContext.Provider, { value: {
             getTabProps,
             selectedTab,
             setSelectedTab,
@@ -17,12 +16,10 @@ function TabsContextProvider({ children, selectedTab, setSelectedTab, }) {
             setTabListHasFocus,
         }, children: children }));
 }
-function useTabsContext() {
+export function useTabsContext() {
     const context = useContext(TabsContext);
     if (!context) {
         throw new Error('useTabsContext must be used within TabsContextProvider');
     }
     return context;
 }
-
-export { TabsContextProvider, useTabsContext };

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

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef } from 'react';
-import { TabName, TabSetter } from './types';
+import { TabName, TabSetter } from './types.js';
 export interface TabsProps extends ComponentPropsWithoutRef<'div'> {
     selectedTab: TabName;
     onSelectTab: TabSetter;

package/dist/esm/components/tabs/tabs.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from '../../lib/react-helpers.js';
+import { TabsContextProvider } from './tabs-context.js';
+export function Tabs({ className, children, selectedTab, onSelectTab, ...props }) {
+    return (_jsx(TabsContextProvider, { selectedTab: selectedTab, setSelectedTab: onSelectTab, children: _jsx("div", { ...props, className: classNames('dc-tabs', className), children: children }) }));
+}

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

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

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

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

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

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

package/dist/esm/components/tag/tag.d.ts

@@ -0,0 +1,15 @@
+import { ComponentPropsWithRef } from 'react';
+type TagHTMLProps = ComponentPropsWithRef<'strong'>;
+export type TagStyle = 'default' | 'filled' | 'tinted';
+export type TagSize = 'sm' | 'md' | 'lg';
+export type TagTint = 'gray' | 'green' | 'cyan' | 'blue' | 'purple' | 'pink' | 'red' | 'orange' | 'yellow';
+export type TagElementType = 'abbr' | 'b' | 'bdo' | 'cite' | 'code' | 'dfn' | 'em' | 'i' | 'kbd' | 'samp' | 'small' | 'span' | 'strong' | 'var';
+export type TagProps = {
+    as?: TagElementType;
+    tagStyle?: TagStyle;
+    size?: TagSize;
+    tint?: TagTint;
+    rounded?: boolean;
+} & TagHTMLProps;
+export declare const Tag: import("react").ForwardRefExoticComponent<Omit<TagProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+export {};

package/dist/esm/components/tag/tag.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+export const Tag = forwardRef(function Tag({ as: Component = 'strong', tagStyle = 'default', size = 'md', tint = 'gray', rounded, className, children, ...props }, ref) {
+    return (_jsx(Component, { ...props, ref: ref, className: classNames(className, 'dc-tag', {
+            [`dc-tag_${tagStyle}`]: tagStyle,
+            [`dc-tag_${size}`]: size,
+            [`dc-tag_${tint}`]: tint,
+            'dc-tag_rounded': rounded,
+        }), children: children }));
+});

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

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

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

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

package/{types → dist/esm}/components/text-input/text-input.d.ts

@@ -1,24 +1,23 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
 type TextInputHTMLProps = ComponentPropsWithRef<'input'>;
-type TextInputBaseProps = Omit<TextInputHTMLProps, 'type' | 'width' | 'size'>;
-export type TextInputType = 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';
-export type TextInputWidth = '2ch' | '3ch' | '4ch' | '5ch' | '10ch' | '20ch' | '40ch';
+type TextInputBaseProps = Omit<TextInputHTMLProps, 'type' | 'size'>;
+export type TextInputType = 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
 export type TextInputSize = 'sm' | 'md' | 'lg';
-export type TextInputChangeValueHandler = (value: string) => void;
-export type TextInputRenderAddOn = (props: {
+export type TextInputSlotStyle = 'plain' | 'tinted';
+export type TextInputSlotRenderer = (props: {
     className: string;
 }) => ReactNode;
+export type TextInputValueChangeHandler = (value: string) => void;
 export type TextInputProps = TextInputBaseProps & {
-    hasError?: boolean;
-    isBlock?: boolean;
+    fullWidth?: boolean;
+    invalid?: boolean;
     type?: TextInputType;
-    width?: TextInputWidth;
-    widthCh?: number;
     size?: TextInputSize;
-    leftAddOn?: ReactNode | TextInputRenderAddOn;
-    rightAddOn?: ReactNode | TextInputRenderAddOn;
-    htmlSize?: TextInputHTMLProps['size'];
-    onChangeValue?: TextInputChangeValueHandler;
+    sizeInChars?: number;
+    slotLeft?: ReactNode | TextInputSlotRenderer;
+    slotRight?: ReactNode | TextInputSlotRenderer;
+    slotStyle?: TextInputSlotStyle;
+    onChangeValue?: TextInputValueChangeHandler;
 };
 export declare const TextInput: import("react").ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+export const TextInput = forwardRef(function TextInput({ style, className, fullWidth, size = 'md', sizeInChars, slotStyle = 'plain', slotLeft, slotRight, type = 'text', invalid, disabled, onChange, onChangeValue, ...props }, ref) {
+    let elementBeforeInput;
+    if (slotLeft) {
+        const className = 'dc-text-input__slot-left';
+        if (typeof slotLeft === 'function') {
+            elementBeforeInput = slotLeft({ className });
+        }
+        else {
+            elementBeforeInput = _jsx("div", { className: className, children: slotLeft });
+        }
+    }
+    let elementAfterInput;
+    if (slotRight) {
+        const className = 'dc-text-input__slot-right';
+        if (typeof slotRight === 'function') {
+            elementAfterInput = slotRight({ className });
+        }
+        else {
+            elementAfterInput = _jsx("div", { className: className, children: slotRight });
+        }
+    }
+    const handleChange = (event) => {
+        if (typeof onChange === 'function') {
+            onChange(event);
+        }
+        if (typeof onChangeValue === 'function') {
+            onChangeValue(event.target.value);
+        }
+    };
+    return (_jsxs("div", { style: style, className: classNames(className, 'dc-text-input', {
+            [`dc-text-input_${size}`]: size,
+            [`dc-text-input_slot_${slotStyle}`]: slotStyle,
+            'dc-text-input_full-width': fullWidth,
+            'dc-text-input_invalid': invalid,
+            'dc-text-input_disabled': disabled,
+            'dc-text-input_has_slot-left': elementBeforeInput,
+            'dc-text-input_has_slot-right': elementAfterInput,
+        }), children: [elementBeforeInput, _jsx("input", { ...props, className: "dc-text-input__native", ref: ref, type: type, size: sizeInChars, disabled: disabled, "aria-invalid": props['aria-invalid'] ?? invalid, onChange: handleChange }), elementAfterInput] }));
+});

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

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

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

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

package/dist/esm/components/textarea/textarea.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithRef } from 'react';
+type TextareaHTMLProps = ComponentPropsWithRef<'textarea'>;
+export type TextareaSize = 'sm' | 'md' | 'lg';
+export type TextareaValueChangeHandler = (value: string) => void;
+export type TextareaProps = TextareaHTMLProps & {
+    fullWidth?: boolean;
+    invalid?: boolean;
+    size?: TextareaSize;
+    onChangeValue?: TextareaValueChangeHandler;
+};
+export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+export {};