draft-components 3.6.0 → 4.0.0

package/dist/components/table/table-container.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import {} from 'react';
 import { classNames } from '../../lib/react-helpers.js';
-export const TableContainer = forwardRef(function TableContainer({ border, className, children, ...props }, ref) {
+export function TableContainer({ border, className, children, ...props }) {
     let modifier = '';
     if (typeof border === 'object' && border != null) {
         modifier = classNames({
@@ -14,5 +14,6 @@ export const TableContainer = forwardRef(function TableContainer({ border, class
     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, className: classNames(className, modifier, 'dc-table-container'), children: children }));
+}
+//# sourceMappingURL=table-container.js.map

package/dist/components/table/table-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-container.js","sourceRoot":"","sources":["../../../src/components/table/table-container.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAmBxD,MAAM,UAAU,cAAc,CAAC,EAC7B,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACY;IACpB,IAAI,QAAQ,GAAG,EAAE,CAAC;IAClB,IAAI,OAAO,MAAM,KAAK,QAAQ,IAAI,MAAM,IAAI,IAAI,EAAE,CAAC;QACjD,QAAQ,GAAG,UAAU,CAAC;YACpB,+BAA+B,EAAE,MAAM,CAAC,GAAG;YAC3C,iCAAiC,EAAE,MAAM,CAAC,KAAK;YAC/C,kCAAkC,EAAE,MAAM,CAAC,MAAM;YACjD,gCAAgC,EAAE,MAAM,CAAC,IAAI;SAC9C,CAAC,CAAC;IACL,CAAC;SAAM,IAAI,MAAM,KAAK,KAAK,EAAE,CAAC;QAC5B,QAAQ,GAAG,+BAA+B,CAAC;IAC7C,CAAC;IAED,OAAO,CACL,iBACM,KAAK,EACT,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,QAAQ,EAAE,oBAAoB,CAAC,YAE/D,QAAQ,GACL,CACP,CAAC;AACJ,CAAC"}

package/dist/components/table/table-head-cell.d.ts

@@ -1,10 +1,11 @@
-import { ComponentPropsWithRef } from 'react';
-type TableHeadCellBaseProps = ComponentPropsWithRef<'th'>;
+import { type ComponentProps } from 'react';
 export type TableHeadCellSort = 'none' | 'ascending' | 'descending';
-export type TableHeadCellProps = {
+type TableHeadCellHTMLProps = ComponentProps<'th'>;
+type TableHeadCellBaseProps = {
     isSortable?: boolean;
     sort?: TableHeadCellSort;
     onChangeSort?: (sort: TableHeadCellSort) => void;
-} & TableHeadCellBaseProps;
-export declare const TableHeadCell: import("react").ForwardRefExoticComponent<Omit<TableHeadCellProps, "ref"> & import("react").RefAttributes<HTMLTableCellElement>>;
+};
+export type TableHeadCellProps = TableHeadCellBaseProps & Omit<TableHeadCellHTMLProps, keyof TableHeadCellBaseProps>;
+export declare function TableHeadCell({ isSortable, sort, className, children, onChangeSort, ...props }: TableHeadCellProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,27 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import {} 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';
+import { ArrowUpIcon } from '../hero-icons/24/outline/arrow-up-icon.js';
+import { ArrowDownIcon } from '../hero-icons/24/outline/arrow-down-icon.js';
 const iconMapping = {
     none: ArrowsUpDownIcon,
-    ascending: ArrowSmallUpIcon,
-    descending: ArrowSmallDownIcon,
+    ascending: ArrowUpIcon,
+    descending: ArrowDownIcon,
 };
 const stateMapping = {
     none: 'ascending',
     ascending: 'descending',
     descending: 'none',
 };
-export const TableHeadCell = forwardRef(function TableHeaderCell({ isSortable = false, sort = 'none', className, children, onChangeSort, ...props }, ref) {
+export function TableHeadCell({ isSortable = false, sort = 'none', className, children, onChangeSort, ...props }) {
     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 })] }));
+        children = (_jsxs("button", { className: "dc-table-cell__sort-btn", type: "button", onClick: () => {
+                if (typeof onChangeSort === 'function') {
+                    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 }));
-});
+        }), "aria-sort": isSortable ? sort : props['aria-sort'], children: children }));
+}
+//# sourceMappingURL=table-head-cell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-head-cell.js","sourceRoot":"","sources":["../../../src/components/table/table-head-cell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAyC,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iDAAiD,CAAC;AACnF,OAAO,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,6CAA6C,CAAC;AAgB5E,MAAM,WAAW,GAGb;IACF,IAAI,EAAE,gBAAgB;IACtB,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE,aAAa;CAC1B,CAAC;AAEF,MAAM,YAAY,GAGd;IACF,IAAI,EAAE,WAAW;IACjB,SAAS,EAAE,YAAY;IACvB,UAAU,EAAE,MAAM;CACnB,CAAC;AAEF,MAAM,UAAU,aAAa,CAAC,EAC5B,UAAU,GAAG,KAAK,EAClB,IAAI,GAAG,MAAM,EACb,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,GAAG,KAAK,EACW;IACnB,IAAI,UAAU,EAAE,CAAC;QACf,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;QAC/B,QAAQ,GAAG,CACT,kBACE,SAAS,EAAC,yBAAyB,EACnC,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE;gBACZ,IAAI,OAAO,YAAY,KAAK,UAAU,EAAE,CAAC;oBACvC,YAAY,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC;gBACnC,CAAC;YACH,CAAC,aAEA,QAAQ,EACR,GAAG,EACJ,KAAC,IAAI,IACH,SAAS,EAAC,0BAA0B,iBACvB,IAAI,EACjB,WAAW,EAAE,CAAC,GACd,IACK,CACV,CAAC;IACJ,CAAC;IAED,OAAO,CACL,gBACM,KAAK,EACT,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE;YAC/B,eAAe,EAAE,IAAI;YACrB,oBAAoB,EAAE,IAAI;YAC1B,wBAAwB,EAAE,UAAU;SACrC,CAAC,eACS,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,YAEhD,QAAQ,GACN,CACN,CAAC;AACJ,CAAC"}

package/dist/components/table/table-head.d.ts

@@ -1,7 +1,8 @@
-import { ComponentPropsWithRef } from 'react';
-type TableHeadBaseProps = ComponentPropsWithRef<'thead'>;
-export type TableHeadProps = {
+import { type ComponentProps } from 'react';
+type TableHeadHTMLProps = ComponentProps<'thead'>;
+type TableHeadBaseProps = {
     isTinted?: boolean;
-} & TableHeadBaseProps;
-export declare const TableHead: import("react").ForwardRefExoticComponent<Omit<TableHeadProps, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
+};
+export type TableHeadProps = TableHeadBaseProps & Omit<TableHeadHTMLProps, keyof TableHeadBaseProps>;
+export declare function TableHead({ className, isTinted, ...props }: TableHeadProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import {} 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, {
+export function TableHead({ className, isTinted = false, ...props }) {
+    return (_jsx("thead", { ...props, className: classNames(className, {
             'dc-table-head': true,
             'dc-table-head_tinted': isTinted,
         }) }));
-});
+}
+//# sourceMappingURL=table-head.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-head.js","sourceRoot":"","sources":["../../../src/components/table/table-head.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAYxD,MAAM,UAAU,SAAS,CAAC,EACxB,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,GAAG,KAAK,EACO;IACf,OAAO,CACL,mBACM,KAAK,EACT,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE;YAC/B,eAAe,EAAE,IAAI;YACrB,sBAAsB,EAAE,QAAQ;SACjC,CAAC,GACF,CACH,CAAC;AACJ,CAAC"}

package/dist/components/table/table-row.d.ts

@@ -1,7 +1,8 @@
-import { ComponentPropsWithRef } from 'react';
-type TableRowBaseProps = ComponentPropsWithRef<'tr'>;
-export type TableRowProps = {
+import { type ComponentProps } from 'react';
+type TableRowHTMLProps = ComponentProps<'tr'>;
+type TableRowBaseProps = {
     isSelected?: boolean;
-} & TableRowBaseProps;
-export declare const TableRow: import("react").ForwardRefExoticComponent<Omit<TableRowProps, "ref"> & import("react").RefAttributes<HTMLTableRowElement>>;
+};
+export type TableRowProps = TableRowBaseProps & Omit<TableRowHTMLProps, keyof TableRowBaseProps>;
+export declare function TableRow({ className, isSelected, ...props }: TableRowProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import {} 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, {
+export function TableRow({ className, isSelected, ...props }) {
+    return (_jsx("tr", { ...props, className: classNames(className, {
             'dc-table-row': true,
             'dc-table-row_selected': isSelected,
         }) }));
-});
+}
+//# sourceMappingURL=table-row.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-row.js","sourceRoot":"","sources":["../../../src/components/table/table-row.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAYxD,MAAM,UAAU,QAAQ,CAAC,EACvB,SAAS,EACT,UAAU,EACV,GAAG,KAAK,EACM;IACd,OAAO,CACL,gBACM,KAAK,EACT,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE;YAC/B,cAAc,EAAE,IAAI;YACpB,uBAAuB,EAAE,UAAU;SACpC,CAAC,GACF,CACH,CAAC;AACJ,CAAC"}

package/dist/components/table/table.css

@@ -1,16 +1,17 @@
 .dc-table-container,
 .dc-table {
-  --dc-table-border-color: var(--dc-border-color-transparent-2);
-  --dc-table-bg: none;
-  --dc-table-head-bg: var(--dc-bg-transparent-1);
-  --dc-table-row-bg-stripped: var(--dc-bg-transparent-1);
-  --dc-table-row-bg-selected: var(--dc-bg-transparent-1);
-  --dc-table-row-bg-highlighted: var(--dc-bg-transparent-1);
-  --dc-table-cell-bg-hover: var(--dc-bg-transparent-1);
-  --dc-table-cell-bg-focus: var(--dc-bg-transparent-1);
-  --dc-table-cell-padding-x: 12px;
-  --dc-table-cell-padding-y: 8px;
-  --dc-table-sort-icon-size: 16px;
+  --color: var(--dc-text-color-primary);
+  --border-color: var(--dc-neutral-200);
+  --background: var(--dc-background-primary);
+  --head-background: var(--dc-neutral-100);
+  --row-background-stripped: var(--dc-neutral-100);
+  --row-background-selected: var(--dc-neutral-100);
+  --row-background-highlighted: var(--dc-neutral-200);
+  --cell-background-hover: var(--dc-neutral-100);
+  --cell-background-focus: var(--dc-neutral-100);
+  --cell-padding-x: 12px;
+  --cell-padding-y: 8px;
+  --sort-icon-size: 16px;
 
   color-scheme: light;
 }
@@ -20,7 +21,9 @@
   width: 100%;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
-  border: 0 solid var(--dc-table-border-color);
+  border-color: var(--border-color);
+  border-style: solid;
+  border-width: 0;
   scroll-behavior: smooth;
 }
 
@@ -48,36 +51,34 @@
   width: 100%;
   font: var(--dc-text-sm);
   font-variant-numeric: tabular-nums;
-  color: var(--dc-primary-text-color);
+  color: var(--color);
   border-spacing: 0;
   border-collapse: separate;
 }
 
 .dc-table-cell {
   box-sizing: border-box;
-  padding:
-    var(--dc-table-cell-padding-y)
-    var(--dc-table-cell-padding-x);
+  padding: var(--cell-padding-y) var(--cell-padding-x);
   scroll-snap-align: start;
-  background: var(--dc-table-bg);
-  border-bottom: 1px solid var(--dc-table-border-color);
+  background: var(--background);
+  border-bottom: 1px solid var(--border-color);
 }
 
 .dc-table-cell_head {
   font-size: 90%;
   font-weight: 700;
   white-space: nowrap;
-  border-bottom-color: var(--dc-table-border-color);
+  border-bottom-color: var(--border-color);
 }
 
 .dc-table_cell_sm .dc-table-cell {
-  --dc-table-cell-padding-y: 4px;
-  --dc-table-cell-padding-x: 8px;
+  --cell-padding-y: 4px;
+  --cell-padding-x: 8px;
 }
 
 .dc-table_cell_lg .dc-table-cell {
-  --dc-table-cell-padding-y: 12px;
-  --dc-table-cell-padding-x: 16px;
+  --cell-padding-y: 12px;
+  --cell-padding-x: 16px;
 }
 
 .dc-table-cell_sortable {
@@ -88,15 +89,8 @@
   position: relative;
   display: block;
   width: 100%;
-  padding:
-    var(--dc-table-cell-padding-y)
-    var(--dc-table-cell-padding-x);
-  padding-right:
-    calc(
-      var(--dc-table-cell-padding-x) +
-      var(--dc-table-sort-icon-size) +
-      var(--dc-table-cell-padding-x)
-    );
+  padding: var(--cell-padding-y) var(--cell-padding-x);
+  padding-right: calc(var(--cell-padding-x) + var(--sort-icon-size) + var(--cell-padding-x));
   margin: 0;
   font: inherit;
   color: inherit;
@@ -109,46 +103,36 @@
 }
 
 .dc-table-cell__sort-btn:hover {
-  background: var(--dc-table-cell-bg-hover);
-}
-
-.dc-table-cell__sort-btn::before {
-  position: absolute;
-  inset: 0;
-  content: "";
+  background: var(--cell-background-hover);
 }
 
 .dc-table-cell__sort-btn:focus {
   outline: none;
 }
 
-.dc-table-cell__sort-btn:focus::before {
-  background: var(--dc-table-cell-bg-focus);
-}
-
-.dc-table-cell__sort-btn:focus:not(:focus-visible)::before {
-  background: initial;
+.dc-table-cell__sort-btn:focus-visible {
+  background: var(--cell-background-focus);
 }
 
 .dc-table-cell__sort-icon {
   position: absolute;
   top: 50%;
-  right: var(--dc-table-cell-padding-x);
-  width: var(--dc-table-sort-icon-size);
-  height: var(--dc-table-sort-icon-size);
+  right: var(--cell-padding-x);
+  width: var(--sort-icon-size);
+  height: var(--sort-icon-size);
   transform: translateY(-50%);
 }
 
 .dc-table-head_tinted .dc-table-cell {
-  background: var(--dc-table-head-bg);
+  background: var(--head-background);
 }
 
 .dc-table-row_selected .dc-table-cell {
-  background: var(--dc-table-row-bg-selected) !important;
+  background: var(--row-background-selected) !important;
 }
 
 .dc-table_bordered .dc-table-cell:not(:last-child) {
-  border-right: 1px solid var(--dc-table-border-color);
+  border-right: 1px solid var(--border-color);
 }
 
 .dc-table_striped .dc-table-body .dc-table-cell {
@@ -160,16 +144,26 @@
 }
 
 .dc-table_striped .dc-table-body .dc-table-row:nth-child(even) .dc-table-cell {
-  background: var(--dc-table-row-bg-stripped);
+  background: var(--row-background-stripped);
 }
 
 .dc-table_highlight_row .dc-table-body .dc-table-row:hover .dc-table-cell {
-  background: var(--dc-table-row-bg-highlighted);
+  background: var(--row-background-highlighted);
 }
 
 .dark .dc-table,
 .dark.dc-table,
 .dark .dc-table-container,
 .dark.dc-table-container {
+  --color: var(--dc-text-color-primary);
+  --border-color: var(--dc-neutral-700);
+  --background: var(--dc-background-primary);
+  --head-background: var(--dc-neutral-800);
+  --row-background-stripped: var(--dc-neutral-800);
+  --row-background-selected: var(--dc-neutral-800);
+  --row-background-highlighted: var(--dc-neutral-700);
+  --cell-background-hover: var(--dc-neutral-800);
+  --cell-background-focus: var(--dc-neutral-800);
+
   color-scheme: dark;
 }

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

@@ -1,11 +1,26 @@
-import { ComponentPropsWithRef } from 'react';
-type TableBaseProps = ComponentPropsWithRef<'table'>;
+import { type ComponentProps } from 'react';
+import { TableContainer } from './table-container.js';
+import { TableHead } from './table-head.js';
+import { TableBody } from './table-body.js';
+import { TableRow } from './table-row.js';
+import { TableHeadCell } from './table-head-cell.js';
+import { TableCell } from './table-cell.js';
 export type TableCellSize = 'sm' | 'md' | 'lg';
-export type TableProps = {
+type TableHTMLProps = ComponentProps<'table'>;
+type TableBaseProps = {
     cellSize?: TableCellSize;
     isStriped?: boolean;
     isBordered?: boolean;
-    highlightRowOnHover?: boolean;
-} & TableBaseProps;
-export declare const Table: import("react").ForwardRefExoticComponent<Omit<TableProps, "ref"> & import("react").RefAttributes<HTMLTableElement>>;
+    shouldHighlightHoveredRow?: boolean;
+};
+export type TableProps = TableBaseProps & Omit<TableHTMLProps, keyof TableBaseProps>;
+export declare function Table({ cellSize, isStriped, isBordered, shouldHighlightHoveredRow, className, children, ...props }: TableProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Table {
+    var Container: typeof TableContainer;
+    var Head: typeof TableHead;
+    var Body: typeof TableBody;
+    var Row: typeof TableRow;
+    var HeadCell: typeof TableHeadCell;
+    var Cell: typeof TableCell;
+}
 export {};

package/dist/components/table/table.js

@@ -1,11 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import {} from 'react';
 import { classNames } from '../../lib/react-helpers.js';
-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', {
+import { TableContainer } from './table-container.js';
+import { TableHead } from './table-head.js';
+import { TableBody } from './table-body.js';
+import { TableRow } from './table-row.js';
+import { TableHeadCell } from './table-head-cell.js';
+import { TableCell } from './table-cell.js';
+export function Table({ cellSize = 'md', isStriped = false, isBordered = false, shouldHighlightHoveredRow = false, className, children, ...props }) {
+    return (_jsx("table", { ...props, className: classNames(className, 'dc-table', {
             [`dc-table_cell_${cellSize}`]: cellSize,
             'dc-table_striped': isStriped,
             'dc-table_bordered': isBordered,
-            'dc-table_highlight_row': highlightRowOnHover,
+            'dc-table_highlight_row': shouldHighlightHoveredRow,
         }), children: children }));
-});
+}
+Table.Container = TableContainer;
+Table.Head = TableHead;
+Table.Body = TableBody;
+Table.Row = TableRow;
+Table.HeadCell = TableHeadCell;
+Table.Cell = TableCell;
+//# sourceMappingURL=table.js.map

package/dist/components/table/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/components/table/table.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAiB5C,MAAM,UAAU,KAAK,CAAC,EACpB,QAAQ,GAAG,IAAI,EACf,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,yBAAyB,GAAG,KAAK,EACjC,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACG;IACX,OAAO,CACL,mBACM,KAAK,EACT,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,UAAU,EAAE;YAC3C,CAAC,iBAAiB,QAAQ,EAAE,CAAC,EAAE,QAAQ;YACvC,kBAAkB,EAAE,SAAS;YAC7B,mBAAmB,EAAE,UAAU;YAC/B,wBAAwB,EAAE,yBAAyB;SACpD,CAAC,YAED,QAAQ,GACH,CACT,CAAC;AACJ,CAAC;AAED,KAAK,CAAC,SAAS,GAAG,cAAc,CAAC;AACjC,KAAK,CAAC,IAAI,GAAG,SAAS,CAAC;AACvB,KAAK,CAAC,IAAI,GAAG,SAAS,CAAC;AACvB,KAAK,CAAC,GAAG,GAAG,QAAQ,CAAC;AACrB,KAAK,CAAC,QAAQ,GAAG,aAAa,CAAC;AAC/B,KAAK,CAAC,IAAI,GAAG,SAAS,CAAC"}

package/dist/components/tabs/index.js

@@ -2,3 +2,4 @@ export * from './tabs.js';
 export * from './tab-list.js';
 export * from './tab.js';
 export * from './tab-panel.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC"}

package/dist/components/tabs/tab-list.d.ts

@@ -1,3 +1,5 @@
-import { ComponentPropsWithoutRef } from 'react';
-export type TabListProps = ComponentPropsWithoutRef<'div'>;
+import { type ComponentProps } from 'react';
+type TabListHTMLProps = ComponentProps<'div'>;
+export type TabListProps = TabListHTMLProps;
 export declare function TabList({ className, children, onFocus, onBlur, onKeyDown, ...props }: TabListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/tabs/tab-list.js

@@ -1,23 +1,27 @@
 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 { KeyboardKey } from '../../lib/keyboard-key.js';
+import { assertNullOrUndefined } from '../../lib/helpers.js';
+import { classNames, tryToFocusElement } from '../../lib/react-helpers.js';
 import { useTabsContext } from './tabs-context.js';
 export function TabList({ className, children, onFocus, onBlur, onKeyDown, ...props }) {
     const ref = useRef(null);
     const { selectedTab, setTabListHasFocus } = useTabsContext();
     function handleFocus(event) {
         setTabListHasFocus(true);
-        onFocus?.(event);
+        if (typeof onFocus === 'function') {
+            onFocus(event);
+        }
     }
     function handleBlur(event) {
         setTabListHasFocus(false);
-        onBlur?.(event);
+        if (typeof onBlur === 'function') {
+            onBlur(event);
+        }
     }
     function handleKeyDown(event) {
         const tabList = ref.current;
-        assertIfNullable(tabList, 'ref.current is null or undefined');
+        assertNullOrUndefined(tabList, 'ref.current is null or undefined');
         let focusTabIndex = 0;
         const tabs = tabList.querySelectorAll('[role="tab"]');
         for (let index = 0; index < tabs.length; index += 1) {
@@ -31,16 +35,16 @@ export function TabList({ className, children, onFocus, onBlur, onKeyDown, ...pr
             }
         }
         let index = focusTabIndex;
-        if (event.key === KeyboardKeys.ArrowRight) {
+        if (event.key === KeyboardKey.ARROW_RIGHT) {
             index += 1;
         }
-        else if (event.key === KeyboardKeys.ArrowLeft) {
+        else if (event.key === KeyboardKey.ARROW_LEFT) {
             index -= 1;
         }
-        else if (event.key === KeyboardKeys.End) {
+        else if (event.key === KeyboardKey.END) {
             index = tabs.length - 1;
         }
-        else if (event.key === KeyboardKeys.Home) {
+        else if (event.key === KeyboardKey.HOME) {
             index = 0;
         }
         if (index < 0) {
@@ -53,10 +57,13 @@ export function TabList({ className, children, onFocus, onBlur, onKeyDown, ...pr
             event.preventDefault();
             event.stopPropagation();
             const newFocusTab = tabs[index];
-            assertIfNullable(newFocusTab, `Unable to get tab at index ${index}`);
-            focusElement(newFocusTab);
+            assertNullOrUndefined(newFocusTab, `Unable to get tab at index ${index}`);
+            tryToFocusElement(newFocusTab);
+        }
+        if (typeof onKeyDown === 'function') {
+            onKeyDown(event);
         }
-        onKeyDown?.(event);
     }
     return (_jsx("div", { ...props, ref: ref, role: "tablist", tabIndex: -1, className: classNames('dc-tab-list', className), onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, children: children }));
 }
+//# sourceMappingURL=tab-list.js.map

package/dist/components/tabs/tab-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-list.js","sourceRoot":"","sources":["../../../src/components/tabs/tab-list.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA4D,MAAM,EAAE,MAAM,OAAO,CAAC;AACzF,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAMnD,MAAM,UAAU,OAAO,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,OAAO,EACP,MAAM,EACN,SAAS,EACT,GAAG,KAAK,EACK;IACb,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,EAAE,WAAW,EAAE,kBAAkB,EAAE,GAAG,cAAc,EAAE,CAAC;IAE7D,SAAS,WAAW,CAAC,KAAiC;QACpD,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACzB,IAAI,OAAO,OAAO,KAAK,UAAU,EAAE,CAAC;YAClC,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC;IACH,CAAC;IAED,SAAS,UAAU,CAAC,KAAiC;QACnD,kBAAkB,CAAC,KAAK,CAAC,CAAC;QAC1B,IAAI,OAAO,MAAM,KAAK,UAAU,EAAE,CAAC;YACjC,MAAM,CAAC,KAAK,CAAC,CAAC;QAChB,CAAC;IACH,CAAC;IAED,SAAS,aAAa,CAAC,KAAoC;QACzD,MAAM,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC;QAC5B,qBAAqB,CAAC,OAAO,EAAE,kCAAkC,CAAC,CAAC;QAEnE,IAAI,aAAa,GAAG,CAAC,CAAC;QACtB,MAAM,IAAI,GAAG,OAAO,CAAC,gBAAgB,CAAoB,cAAc,CAAC,CAAC;QACzE,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC;YACpD,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;YACxB,IAAI,QAAQ,CAAC,aAAa,KAAK,GAAG,EAAE,CAAC;gBACnC,aAAa,GAAG,KAAK,CAAC;gBACtB,MAAM;YACR,CAAC;YACD,IAAI,GAAG,CAAC,IAAI,KAAK,WAAW,EAAE,CAAC;gBAC7B,aAAa,GAAG,KAAK,CAAC;YACxB,CAAC;QACH,CAAC;QAED,IAAI,KAAK,GAAG,aAAa,CAAC;QAC1B,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC,WAAW,EAAE,CAAC;YAC1C,KAAK,IAAI,CAAC,CAAC;QACb,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC,UAAU,EAAE,CAAC;YAChD,KAAK,IAAI,CAAC,CAAC;QACb,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC,GAAG,EAAE,CAAC;YACzC,KAAK,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAC1B,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC,IAAI,EAAE,CAAC;YAC1C,KAAK,GAAG,CAAC,CAAC;QACZ,CAAC;QAED,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;YACd,KAAK,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAC1B,CAAC;aAAM,IAAI,KAAK,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChC,KAAK,GAAG,CAAC,CAAC;QACZ,CAAC;QAED,IAAI,KAAK,KAAK,aAAa,EAAE,CAAC;YAC5B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YAExB,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;YAChC,qBAAqB,CAAC,WAAW,EAAE,8BAA8B,KAAK,EAAE,CAAC,CAAC;YAC1E,iBAAiB,CAAC,WAAW,CAAC,CAAC;QACjC,CAAC;QAED,IAAI,OAAO,SAAS,KAAK,UAAU,EAAE,CAAC;YACpC,SAAS,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;IACH,CAAC;IAED,OAAO,CACL,iBACM,KAAK,EACT,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,SAAS,EACd,QAAQ,EAAE,CAAC,CAAC,EACZ,SAAS,EAAE,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,EAC/C,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,aAAa,YAEvB,QAAQ,GACL,CACP,CAAC;AACJ,CAAC"}

package/dist/components/tabs/tab-panel.d.ts

@@ -1,6 +1,9 @@
-import { ComponentPropsWithoutRef } from 'react';
-import { TabName } from './types.js';
-export type TabPanelProps = {
+import { type ComponentProps } from 'react';
+import { type TabName } from './types.js';
+type TabPanelHTMLProps = ComponentProps<'div'>;
+type TabPanelBaseProps = {
     tab: TabName;
-} & ComponentPropsWithoutRef<'div'>;
+};
+export type TabPanelProps = TabPanelBaseProps & Omit<TabPanelHTMLProps, keyof TabPanelBaseProps>;
 export declare function TabPanel({ tab, id, className, children, 'aria-labelledby': ariaLabelledBy, ...props }: TabPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -1,4 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import {} from 'react';
+import {} from './types.js';
 import { classNames } from '../../lib/react-helpers.js';
 import { useTabsContext } from './tabs-context.js';
 export function TabPanel({ tab, id, className, children, 'aria-labelledby': ariaLabelledBy, ...props }) {
@@ -9,3 +11,4 @@ export function TabPanel({ tab, id, className, children, 'aria-labelledby': aria
     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 }));
 }
+//# sourceMappingURL=tab-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.js","sourceRoot":"","sources":["../../../src/components/tabs/tab-panel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAgB,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAYnD,MAAM,UAAU,QAAQ,CAAC,EACvB,GAAG,EACH,EAAE,EACF,SAAS,EACT,QAAQ,EACR,iBAAiB,EAAE,cAAc,EACjC,GAAG,KAAK,EACM;IACd,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,cAAc,EAAE,CAAC;IAEtD,IAAI,WAAW,KAAK,GAAG,EAAE,CAAC;QACxB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC;IAClC,OAAO,CACL,iBACM,KAAK,EACT,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE,SAAS,CAAC,EAChD,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,EAAE,IAAI,QAAQ,CAAC,YAAY,qBACd,cAAc,IAAI,QAAQ,CAAC,EAAE,YAE7C,QAAQ,GACL,CACP,CAAC;AACJ,CAAC"}

package/dist/components/tabs/tab.d.ts

@@ -1,7 +1,10 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-export type TabProps = {
+import { type ComponentProps, type ReactNode } from 'react';
+type TabHTMLProps = ComponentProps<'button'>;
+type TabBaseProps = {
     icon?: ReactNode;
     counter?: number;
     name: string;
-} & ComponentPropsWithoutRef<'button'>;
+};
+export type TabProps = TabBaseProps & Omit<TabHTMLProps, keyof TabBaseProps>;
 export declare function Tab({ id, name, icon, counter, className, children, onClick, 'aria-controls': ariaControls, ...props }: TabProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/tabs/tab.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 import { useTabsContext } from './tabs-context.js';
 import { Badge } from '../badge/index.js';
@@ -8,7 +9,10 @@ export function Tab({ id, name, icon, counter, className, children, onClick, 'ar
     const selected = name === selectedTab;
     function handleClick(event) {
         setSelectedTab(name);
-        onClick?.(event);
+        if (typeof onClick === 'function') {
+            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 }))] }) }));
 }
+//# sourceMappingURL=tab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/components/tabs/tab.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAwD,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAc1C,MAAM,UAAU,GAAG,CAAC,EAClB,EAAE,EACF,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,OAAO,EACP,eAAe,EAAE,YAAY,EAC7B,GAAG,KAAK,EACC;IACT,MAAM,EACJ,WAAW,EACX,WAAW,EACX,cAAc,EACd,eAAe,GAChB,GAAG,cAAc,EAAE,CAAC;IACrB,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;IACnC,MAAM,QAAQ,GAAG,IAAI,KAAK,WAAW,CAAC;IAEtC,SAAS,WAAW,CAAC,KAAoC;QACvD,cAAc,CAAC,IAAI,CAAC,CAAC;QACrB,IAAI,OAAO,OAAO,KAAK,UAAU,EAAE,CAAC;YAClC,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC;IACH,CAAC;IAED,OAAO,CACL,oBACM,KAAK,EACT,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,SAAS,CAAC,EAC1C,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,KAAK,EACV,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,IAAI,QAAQ,CAAC,EAAE,mBACN,YAAY,IAAI,QAAQ,CAAC,YAAY,mBACrC,QAAQ,EACvB,QAAQ,EAAE,QAAQ,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC/C,OAAO,EAAE,WAAW,YAEpB,gBAAM,SAAS,EAAC,gBAAgB,aAC7B,IAAI,IAAI,IAAI,IAAI,CACf,eAAM,SAAS,EAAC,cAAc,YAAE,IAAI,GAAQ,CAC7C,EACA,QAAQ,IAAI,IAAI,IAAI,CACnB,gBAAM,SAAS,EAAC,eAAe,aAC5B,QAAQ,EACR,GAAG,IACC,CACR,EACA,OAAO,IAAI,IAAI,IAAI,OAAO,KAAK,CAAC,IAAI,CACnC,KAAC,KAAK,IAAC,SAAS,EAAC,iBAAiB,YAAE,OAAO,GAAS,CACrD,IACI,GACA,CACV,CAAC;AACJ,CAAC"}

package/dist/components/tabs/tabs-context.d.ts

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

package/dist/components/tabs/tabs-context.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useId, useState } from 'react';
+import {} from './types.js';
 const TabsContext = createContext(null);
 export function TabsContextProvider({ children, selectedTab, setSelectedTab, }) {
     const [tabListHasFocus, setTabListHasFocus] = useState(false);
@@ -23,3 +24,4 @@ export function useTabsContext() {
     }
     return context;
 }
+//# sourceMappingURL=tabs-context.js.map

package/dist/components/tabs/tabs-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-context.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs-context.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChG,OAAO,EAAgC,MAAM,YAAY,CAAC;AAoB1D,MAAM,WAAW,GAAG,aAAa,CAA0B,IAAI,CAAC,CAAC;AAEjE,MAAM,UAAU,mBAAmB,CAAC,EAClC,QAAQ,EACR,WAAW,EACX,cAAc,GACS;IACvB,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9D,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IACnB,MAAM,WAAW,GAAG,WAAW,CAAc,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QACrD,EAAE,EAAE,GAAG,EAAE,QAAQ,GAAG,GAAG;QACvB,YAAY,EAAE,GAAG,EAAE,aAAa,GAAG,GAAG;KACvC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAEV,OAAO,CACL,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE;YAC3B,WAAW;YACX,WAAW;YACX,cAAc;YACd,eAAe;YACf,kBAAkB;SACnB,YAEE,QAAQ,GACY,CACxB,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,cAAc;IAC5B,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACxC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,wDAAwD,CAAC,CAAC;IAC5E,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC"}