@digdir/designsystemet-react 1.1.4 → 1.1.6

package/dist/esm/components/pagination/pagination-item.js

@@ -7,11 +7,11 @@ import { forwardRef } from 'react';
  * PaginationItem component, use within a Pagination.List.
  *
  * @example
- * <Pagination.List>
- *   <Pagination.Item>
- *     <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
- *   </Pagination.Item>
- * </Pagination.List>
+ * <PaginationList>
+ *   <PaginationItem>
+ *     <PaginationButton aria-label='Forrige side'>Forrige</PaginationButton>
+ *   </PaginationItem>
+ * </PaginationList>
  */
 const PaginationItem = forwardRef(function PaginationItem({ asChild, className, ...rest }, ref) {
     const Component = asChild ? Slot : 'li';

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

@@ -8,11 +8,11 @@ import { forwardRef } from 'react';
  *
  * @example
  * <Pagination>
- *   <Pagination.List>
- *     <Pagination.Item>
- *       <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
- *     </Pagination.Item>
- *   </Pagination.List>
+ *   <PaginationList>
+ *     <PaginationItem>
+ *       <PaginationButton aria-label='Forrige side'>Forrige</PaginationButton>
+ *     </PaginationItem>
+ *   </PaginationList>
  * </Pagination>
  */
 const PaginationList = forwardRef(function PaginationList({ asChild, ...rest }, ref) {

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

@@ -1,5 +1,5 @@
 'use client';
-import { Popover as Popover$1 } from './popover.js';
+import { Popover } from './popover.js';
 import { PopoverTrigger } from './popover-trigger.js';
 import { PopoverTriggerContext } from './popover-trigger-context.js';
 
@@ -14,11 +14,11 @@ import { PopoverTriggerContext } from './popover-trigger-context.js';
  *   </Popover>
  * </Popover.TriggerContext>
  */
-const Popover = Object.assign(Popover$1, {
+const PopoverComponent = Object.assign(Popover, {
     TriggerContext: PopoverTriggerContext,
     Trigger: PopoverTrigger,
 });
-Popover.TriggerContext.displayName = 'Popover.TriggerContext';
-Popover.Trigger.displayName = 'Popover.Trigger';
+PopoverComponent.TriggerContext.displayName = 'Popover.TriggerContext';
+PopoverComponent.Trigger.displayName = 'Popover.Trigger';
 
-export { Popover, PopoverTrigger, PopoverTriggerContext };
+export { PopoverComponent as Popover, PopoverTrigger, PopoverTriggerContext };

package/dist/esm/components/popover/popover-trigger-context.js

@@ -6,12 +6,12 @@ import { createContext, useId, useState } from 'react';
  * PopoverTriggerContext component, use to wrap a Popover.Trigger and Popover.
  *
  * @example
- * <Popover.TriggerContext>
- *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ * <PopoverTriggerContext>
+ *   <PopoverTrigger>Open Popover</PopoverTrigger>
  *   <Popover>
  *     Content
  *   </Popover>
- * </Popover.TriggerContext>
+ * </PopoverTriggerContext>
  */
 const PopoverTriggerContext = ({ children, }) => {
     const randomPopoverId = useId();

package/dist/esm/components/popover/popover-trigger.js

@@ -9,22 +9,22 @@ import { Context } from './popover-trigger-context.js';
  * PopoverTrigger component, used to trigger a popover.
  *
  * @example
- * <Popover.TriggerContext>
- *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ * <PopoverTriggerContext>
+ *   <PopoverTrigger>Open Popover</PopoverTrigger>
  *   <Popover>
  *     Content
  *   </Popover>
- * </Popover.TriggerContext>
+ * </PopoverTriggerContext>
  *
  * @example inline
- * <Popover.TriggerContext>
+ * <PopoverTriggerContext>
  *   <Paragraph>
- *    We can use it <Popover.Trigger inline={true}>inline</Popover.Trigger>.
+ *    We can use it <PopoverTrigger inline={true}>inline</PopoverTrigger>.
  *   </Paragraph>
  *   <Popover>
  *     Content
  *   </Popover>
- * </Popover.TriggerContext>
+ * </PopoverTriggerContext>
  */
 const PopoverTrigger = forwardRef(function PopoverTrigger({ id, inline, asChild, ...rest }, ref) {
     const { popoverId } = useContext(Context);

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Field } from '../field/index.js';
+import { Field as FieldComponent } from '../field/index.js';
 import { Input } from '../input/input.js';
 import { Label } from '../label/label.js';
 import { ValidationMessage } from '../validation-message/validation-message.js';
@@ -13,7 +13,7 @@ import { ValidationMessage } from '../validation-message/validation-message.js';
  * <Radio label="I agree" value="agree" />
  */
 const Radio = forwardRef(function Radio({ 'data-size': size, className, style, children, label, description, error, ...rest }, ref) {
-    return (jsxs(Field, { "data-size": size, className: className, style: style, children: [jsx(Input, { type: 'radio', ref: ref, ...rest }), !!label && jsx(Label, { weight: 'regular', children: label }), !!description && jsx("div", { "data-field": 'description', children: description }), !!error && jsx(ValidationMessage, { children: error })] }));
+    return (jsxs(FieldComponent, { "data-size": size, className: className, style: style, children: [jsx(Input, { type: 'radio', ref: ref, ...rest }), !!label && jsx(Label, { weight: 'regular', children: label }), !!description && jsx("div", { "data-field": 'description', children: description }), !!error && jsx(ValidationMessage, { children: error })] }));
 });
 
 export { Radio };

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

@@ -1,5 +1,5 @@
 'use client';
-import { Search as Search$1 } from './search.js';
+import { Search } from './search.js';
 import { SearchButton } from './search-button.js';
 import { SearchClear } from './search-clear.js';
 import { SearchInput } from './search-input.js';
@@ -20,13 +20,13 @@ import { SearchInput } from './search-input.js';
  *   <Search.Clear />
  * </Search>
  */
-const Search = Object.assign(Search$1, {
+const SearchComponent = Object.assign(Search, {
     Clear: SearchClear,
     Button: SearchButton,
     Input: SearchInput,
 });
-Search.Clear.displayName = 'Search.Clear';
-Search.Button.displayName = 'Search.Button';
-Search.Input.displayName = 'Search.Input';
+SearchComponent.Clear.displayName = 'Search.Clear';
+SearchComponent.Button.displayName = 'Search.Button';
+SearchComponent.Input.displayName = 'Search.Input';
 
-export { Search, SearchButton, SearchClear, SearchInput };
+export { SearchComponent as Search, SearchButton, SearchClear, SearchInput };

package/dist/esm/components/search/search-button.js

@@ -8,8 +8,8 @@ import { Button } from '../button/button.js';
  *
  * @example
  * <Search>
- *   <Search.Input aria-label='Søk' />
- *   <Search.Button>Søk</Search.Button>
+ *   <SearchInput aria-label='Søk' />
+ *   <SearchButton>Søk</SearchButton>
  * </Search>
  */
 const SearchButton = forwardRef(function SearchButton({ children = 'Søk', ...rest }, ref) {

package/dist/esm/components/search/search-clear.js

@@ -9,8 +9,8 @@ import { setReactInputValue } from '../Combobox/utilities.js';
  *
  * @example
  * <Search>
- *   <Search.Input aria-label='Søk' />
- *   <Search.Clear />
+ *   <SearchInput aria-label='Søk' />
+ *   <SearchClear />
  * </Search>
  */
 const SearchClear = forwardRef(function SearchClear({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) {

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

@@ -8,7 +8,7 @@ import { Input } from '../input/input.js';
  *
  * @example
  * <Search>
- *   <Search.Input aria-label='Søk' />
+ *   <SearchInput aria-label='Søk' />
  * </Search>
  */
 const SearchInput = forwardRef(function SearchInput({ ...rest }, ref) {

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

@@ -1,5 +1,5 @@
 'use client';
-import { Select as Select$1 } from './select.js';
+import { Select } from './select.js';
 import { SelectOptgroup } from './select-optgroup.js';
 import { SelectOption } from './select-option.js';
 
@@ -12,11 +12,11 @@ import { SelectOption } from './select-option.js';
  *   <Select.Option value='2'>Option 2</Select.Option>
  * </Select>
  */
-const Select = Object.assign(Select$1, {
+const SelectComponent = Object.assign(Select, {
     Option: SelectOption,
     Optgroup: SelectOptgroup,
 });
-Select.Option.displayName = 'Select.Option';
-Select.Optgroup.displayName = 'Select.Optgroup';
+SelectComponent.Option.displayName = 'Select.Option';
+SelectComponent.Optgroup.displayName = 'Select.Optgroup';
 
-export { Select, SelectOptgroup, SelectOption };
+export { SelectComponent as Select, SelectOptgroup, SelectOption };

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

@@ -8,10 +8,10 @@ import { forwardRef } from 'react';
  *
  * @example
  * <Select>
- *   <Select.Optgroup label='Group 1'>
- *     <Select.Option value='1'>Option 1</Select.Option>
- *     <Select.Option value='2'>Option 2</Select.Option>
- *   </Select.Optgroup>
+ *   <SelectOptgroup label='Group 1'>
+ *     <SelectOption value='1'>Option 1</SelectOption>
+ *     <SelectOption value='2'>Option 2</SelectOption>
+ *   </SelectOptgroup>
  * </Select>
  */
 const SelectOptgroup = forwardRef(function SelectOptgroup({ asChild, ...rest }, ref) {

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

@@ -8,8 +8,8 @@ import { forwardRef } from 'react';
  *
  * @example
  * <Select>
- *   <Select.Option value='1'>Option 1</Select.Option>
- *   <Select.Option value='2'>Option 2</Select.Option>
+ *   <SelectOption value='1'>Option 1</SelectOption>
+ *   <SelectOption value='2'>Option 2</SelectOption>
  * </Select>
  */
 const SelectOption = forwardRef(function SelectOption({ asChild, ...rest }, ref) {

package/dist/esm/components/suggestion/suggestion-chips.js

@@ -1,12 +1,10 @@
 'use client';
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { useContext } from 'react';
-import { Chip } from '../chip/index.js';
-import { SuggestionContext } from './suggestion.js';
-
-const SuggestionChips = ({ render = ({ label }) => label, }) => {
-    const { selectedItems = [] } = useContext(SuggestionContext);
-    return (jsx(Fragment, { children: selectedItems.map((item) => (jsx(Chip.Removable, { value: item.value, asChild: true, children: jsx("data", { children: render(item) }) }, item.value))) }));
+/**
+ * @deprecated Suggestion.Chips is deprecated, use `renderSelected` on `Suggestion` instead
+ */
+const SuggestionChips = () => {
+    console.warn('Suggestion: Using <Suggestion.Chips> is deprecated - please remove from your code.');
+    return null;
 };
 SuggestionChips.displayName = 'SuggestionChips';
 

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

@@ -1,6 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext, useEffect, version } from 'react';
+import { forwardRef, useContext, useEffect } from 'react';
 import { Input } from '../input/input.js';
 import { SuggestionContext } from './suggestion.js';
 
@@ -16,20 +16,17 @@ import { SuggestionContext } from './suggestion.js';
  * </Suggestion>
  */
 const SuggestionInput = forwardRef(function SuggestionList({ value, onInput, onChange, ...rest }, ref) {
-    const { listId, handleFilter } = useContext(SuggestionContext);
+    const { handleFilter } = useContext(SuggestionContext);
     useEffect(handleFilter, [value]); // Filter if controlled value
     if (onChange)
         console.warn('SuggestionInput: Avoid using onChange, as Suggestion controls the Input. Use onValueChange on Suggest instead, or onInput if fetching API results');
     if (value)
         console.warn('SuggestionInput: Avoid using value, as Suggestion controls the Input. Use value on Suggest instead.');
-    const popoverProps = Object.assign({
-        [version.startsWith('19') ? 'popoverTarget' : 'popovertarget']: listId,
-    }, rest);
     return (jsx(Input, { placeholder: '' // We need an empty placeholder for the clear button to be able to show/hide
         , ref: ref, onInput: (event) => {
             onInput?.(event); // Should run first
             handleFilter?.(); // Filter if uncontrolled value
-        }, ...popoverProps }));
+        }, ...rest }));
 });
 
 export { SuggestionInput };

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

@@ -1,10 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext, useRef, useEffect } from 'react';
+import { forwardRef, useContext, useEffect } from 'react';
 import '@u-elements/u-datalist';
 import { autoUpdate, computePosition } from '@floating-ui/dom';
 import { SuggestionContext } from './suggestion.js';
-import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
 
 /**
  * Component that provides a Suggestion list.
@@ -18,17 +17,12 @@ import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-ref
  * </Suggestion>
  */
 const SuggestionList = forwardRef(function SuggestionList({ singular = '%d forslag', plural = '%d forslag', className, id, ...rest }, ref) {
-    const { listId, setListId, handleFilter } = useContext(SuggestionContext);
-    const listRef = useRef(null);
-    const mergedRefs = useMergeRefs([ref, listRef]);
+    const { handleFilter, uComboboxRef } = useContext(SuggestionContext);
     useEffect(handleFilter); // Must run on every render
-    useEffect(() => {
-        id && setListId(id);
-    }, [id]);
     // Position with floating-ui
     useEffect(() => {
-        const list = listRef.current;
-        const trigger = document.querySelector(`[popovertarget="${list?.id}"]`);
+        const trigger = uComboboxRef?.current?.control;
+        const list = uComboboxRef?.current?.list;
         if (list && trigger) {
             return autoUpdate(trigger, list, () => {
                 computePosition(trigger, list, {
@@ -40,8 +34,8 @@ const SuggestionList = forwardRef(function SuggestionList({ singular = '%d forsl
                 });
             });
         }
-    }, [listId]);
-    return (jsx("u-datalist", { "data-nofilter": true, "data-sr-singular": singular, "data-sr-plural": plural, class: className, ref: mergedRefs, id: listId, popover: 'manual', ...rest }));
+    }, []);
+    return (jsx("u-datalist", { "data-nofilter": true, "data-sr-singular": singular, "data-sr-plural": plural, class: className, ref: ref, popover: 'manual', ...rest }));
 });
 const triggerWidth = {
     name: 'TriggerWidth',

package/dist/esm/components/suggestion/suggestion-option.js

@@ -2,6 +2,18 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 
+/**
+ * A component for rendering individual options in the Suggestion list.
+ *
+ * @example
+ * <Suggestion>
+ *   <Suggestion.Input />
+ *   <Suggestion.List>
+ *     <Suggestion.Option value='Option 1'>Option 1</Suggestion.Option>
+ *     <Suggestion.Option value='Option 2'>Option 2</Suggestion.Option>
+ *   </Suggestion.List>
+ * </Suggestion>
+ */
 const SuggestionOption = forwardRef(function SuggestionOption({ className, ...rest }, ref) {
     return (jsx("u-option", { class: className, ref: ref, ...rest }));
 });

package/dist/esm/components/suggestion/suggestion.js

@@ -3,10 +3,10 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, createContext, useRef, useId, useState, useEffect, useCallback } from 'react';
 import '@u-elements/u-combobox';
 import cl from 'clsx/lite';
+import { Chip as ChipComponent } from '../chip/index.js';
 import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
 
 const SuggestionContext = createContext({
-    setListId: () => undefined,
     handleFilter: () => undefined,
 });
 const text = (el) => el.textContent?.trim() || '';
@@ -27,21 +27,26 @@ const nextItems = (data, prev, multiple) => {
         : [...sanitizeItems(prev), item];
 };
 const defaultFilter = ({ label, input }) => label.toLowerCase().includes(input.value.trim().toLowerCase());
-const Suggestion = forwardRef(function Suggestion({ children, className, creatable = false, defaultValue, filter = true, multiple = false, name, onValueChange, value, ...rest }, ref) {
+const deprecate = (from, to) => console.warn(`Suggestion: Using "${from}" is deprecated, please use "${to}" instead.`);
+const Suggestion = forwardRef(function Suggestion({ children, className, creatable = false, defaultSelected: _defaultSelected, defaultValue, filter = true, multiple = false, name, onBeforeMatch, onSelectedChange: _onSelectedChange, onValueChange, renderSelected = ({ label }) => label, selected: _selected, value, ...rest }, ref) {
+    // For backwards compatibility:
+    const selected = _selected ?? value;
+    const defaultSelected = _defaultSelected ?? defaultValue;
+    const onSelectedChange = _onSelectedChange ?? onValueChange;
+    if (value)
+        deprecate('value', 'selected');
+    if (defaultValue)
+        deprecate('defaultValue', 'defaultSelected');
+    if (onValueChange)
+        deprecate('onValueChange', 'onSelectedChange');
     const uComboboxRef = useRef(null);
     const genId = useId();
     const selectId = rest.id ? `${rest.id}-select` : genId;
-    const isContolled = value !== undefined;
+    const isControlled = selected !== undefined;
     const mergedRefs = useMergeRefs([ref, uComboboxRef]);
     const [isEmpty, setIsEmpty] = useState(false);
-    const [selectedItems, setSelectedItems] = useState(sanitizeItems(defaultValue || value));
-    const [listId, setListId] = useState(rest.id ? `${rest.id}-list` : `${genId}-list`);
-    // Update if controlled values
-    const prevControlled = useRef(value);
-    if (value !== prevControlled.current) {
-        prevControlled.current = value;
-        setSelectedItems(sanitizeItems(prevControlled.current));
-    }
+    const [defaultItems, setDefaultItems] = useState(sanitizeItems(defaultSelected));
+    const selectedItems = selected ? sanitizeItems(selected) : defaultItems;
     /**
      * Listerners and handling of adding/removing
      */
@@ -51,14 +56,21 @@ const Suggestion = forwardRef(function Suggestion({ children, className, creatab
             event.preventDefault();
             const multiple = combobox?.multiple;
             const data = event.detail;
-            if (isContolled)
-                onValueChange?.(nextItems(data, prevControlled.current, multiple));
+            if (isControlled)
+                onSelectedChange?.(nextItems(data, selectedItems, multiple));
             else
-                setSelectedItems((prevItems) => nextItems(data, prevItems, multiple));
+                setDefaultItems(nextItems(data, selectedItems, multiple));
         };
         combobox?.addEventListener('beforechange', beforeChange);
         return () => combobox?.removeEventListener('beforechange', beforeChange);
-    }, [isContolled, setSelectedItems]);
+    }, [selectedItems, isControlled]);
+    // Before match event listener
+    useEffect(() => {
+        const combobox = uComboboxRef.current;
+        const beforeMatch = (e) => onBeforeMatch?.(e);
+        combobox?.addEventListener('beforematch', beforeMatch);
+        return () => combobox?.removeEventListener('beforematch', beforeMatch);
+    }, [onBeforeMatch]);
     const handleFilter = useCallback(() => {
         const { control: input, options = [] } = uComboboxRef?.current || {};
         const filterFn = filter === true ? defaultFilter : filter;
@@ -80,7 +92,7 @@ const Suggestion = forwardRef(function Suggestion({ children, className, creatab
             }
         setIsEmpty(index === disabled);
     }, [filter]);
-    return (jsx(SuggestionContext.Provider, { value: { isEmpty, selectedItems, listId, setListId, handleFilter }, children: jsxs("u-combobox", { "data-multiple": multiple || undefined, "data-creatable": creatable || undefined, class: cl('ds-suggestion', className), ref: mergedRefs, ...rest, children: [children, !!name && (jsx("select", { name: name, multiple: true, hidden: true, id: selectId }))] }) }));
+    return (jsx(SuggestionContext.Provider, { value: { isEmpty, handleFilter, uComboboxRef }, children: jsxs("u-combobox", { "data-multiple": multiple || undefined, "data-creatable": creatable || undefined, class: cl('ds-suggestion', className), ref: mergedRefs, ...rest, children: [selectedItems.map((item) => (jsx(ChipComponent.Removable, { value: item.value, asChild: true, children: jsx("data", { children: renderSelected(item) }) }, item.value))), children, !!name && (jsx("select", { name: name, multiple: true, hidden: true, id: selectId }))] }) }));
 });
 
 export { Suggestion, SuggestionContext };

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Field } from '../field/index.js';
+import { Field as FieldComponent } from '../field/index.js';
 import { Input } from '../input/input.js';
 import { Label } from '../label/label.js';
 
@@ -12,7 +12,7 @@ import { Label } from '../label/label.js';
  * <Switch label="I agree" value="agree" />
  */
 const Switch = forwardRef(function Switch({ 'data-size': size, children, className, description, label, position, style, ...rest }, ref) {
-    return (jsxs(Field, { className: className, "data-position": position, "data-size": size, style: style, children: [jsx(Input, { type: 'checkbox', role: 'switch', ref: ref, ...rest }), !!label && jsx(Label, { weight: 'regular', children: label }), !!description && jsx("div", { "data-field": 'description', children: description })] }));
+    return (jsxs(FieldComponent, { className: className, "data-position": position, "data-size": size, style: style, children: [jsx(Input, { type: 'checkbox', role: 'switch', ref: ref, ...rest }), !!label && jsx(Label, { weight: 'regular', children: label }), !!description && jsx("div", { "data-field": 'description', children: description })] }));
 });
 
 export { Switch };

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

@@ -1,5 +1,5 @@
 'use client';
-import { Table as Table$1 } from './table.js';
+import { Table } from './table.js';
 import { TableBody } from './table-body.js';
 import { TableCell } from './table-cell.js';
 import { TableFoot } from './table-foot.js';
@@ -32,7 +32,7 @@ import { TableRow } from './table-row.js';
  *   </Table.Foot>
  * </Table>
  */
-const Table = Object.assign(Table$1, {
+const TableComponent = Object.assign(Table, {
     Head: TableHead,
     Body: TableBody,
     Row: TableRow,
@@ -40,12 +40,12 @@ const Table = Object.assign(Table$1, {
     HeaderCell: TableHeaderCell,
     Foot: TableFoot,
 });
-Table.displayName = 'Table';
-Table.Head.displayName = 'Table.Head';
-Table.Body.displayName = 'Table.Body';
-Table.Row.displayName = 'Table.Row';
-Table.Cell.displayName = 'Table.Cell';
-Table.HeaderCell.displayName = 'Table.HeaderCell';
-Table.Foot.displayName = 'Table.Foot';
+TableComponent.displayName = 'Table';
+TableComponent.Head.displayName = 'Table.Head';
+TableComponent.Body.displayName = 'Table.Body';
+TableComponent.Row.displayName = 'Table.Row';
+TableComponent.Cell.displayName = 'Table.Cell';
+TableComponent.HeaderCell.displayName = 'Table.HeaderCell';
+TableComponent.Foot.displayName = 'Table.Foot';
 
-export { Table, TableBody, TableCell, TableFoot, TableHead, TableHeaderCell, TableRow };
+export { TableComponent as Table, TableBody, TableCell, TableFoot, TableHead, TableHeaderCell, TableRow };

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

@@ -6,12 +6,12 @@ import { forwardRef } from 'react';
  * TableBody component, used to display the body of a table. Renders a native HTML tbody element.
  *
  * @example
- * <Table.Body>
- *   <Table.Row>
- *     <Table.Cell>John</Table.Cell>
- *     <Table.Cell>25</Table.Cell>
- *   </Table.Row>
- * </Table.Body>
+ * <TableBody>
+ *   <TableRow>
+ *     <TableCell>John</TableCell>
+ *     <TableCell>25</TableCell>
+ *   </TableRow>
+ * </TableBody>
  */
 const TableBody = forwardRef(function TableBody(rest, ref) {
     return jsx("tbody", { ref: ref, ...rest });

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

@@ -6,7 +6,7 @@ import { forwardRef } from 'react';
  * TableCell component, used to display the cells of a table. Renders a native HTML td element.
  *
  * @example
- * <Table.Cell>John</Table.Cell>
+ * <TableCell>John</TableCell>
  */
 const TableCell = forwardRef(function TableCell(rest, ref) {
     return jsx("td", { ref: ref, ...rest });

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

@@ -6,12 +6,12 @@ import { forwardRef } from 'react';
  * TableFoot component, used to display the footer of a table. Renders a native HTML tfoot element.
  *
  * @example
- * <Table.Foot>
- *   <Table.Row>
- *     <Table.Cell>Total</Table.Cell>
- *     <Table.Cell>2</Table.Cell>
- *   </Table.Row>
- * </Table.Foot>
+ * <TableFoot>
+ *   <TableRow>
+ *     <TableCell>Total</TableCell>
+ *     <TableCell>2</TableCell>
+ *   </TableRow>
+ * </TableFoot>
  */
 const TableFoot = forwardRef(function TableFoot(rest, ref) {
     return jsx("tfoot", { ref: ref, ...rest });

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

@@ -6,12 +6,12 @@ import { forwardRef } from 'react';
  * TableHead component, used to display the header of a table. Renders a native HTML thead element.
  *
  * @example
- * <Table.Head>
- *   <Table.Row>
- *     <Table.HeaderCell>Name</Table.HeaderCell>
- *     <Table.HeaderCell>Age</Table.HeaderCell>
- *   </Table.Row>
- * </Table.Head>
+ * <TableHead>
+ *   <TableRow>
+ *     <TableHeaderCell>Name</TableHeaderCell>
+ *     <TableHeaderCell>Age</TableHeaderCell>
+ *   </TableRow>
+ * </TableHead>
  */
 const TableHead = forwardRef(function TableHead(rest, ref) {
     return jsx("thead", { ref: ref, ...rest });

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

@@ -6,7 +6,7 @@ import { forwardRef } from 'react';
  * TableHeaderCell component, used to display the header cells of a table. Renders a native HTML th element.
  *
  * @example
- * <Table.HeaderCell>Name</Table.HeaderCell>
+ * <TableHeaderCell>Name</TableHeaderCell>
  */
 const TableHeaderCell = forwardRef(function TableHeaderCell({ sort, children, ...rest }, ref) {
     return (jsx("th", { "aria-sort": sort, ref: ref, ...rest, children: sort ? jsx("button", { type: 'button', children: children }) : children }));

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

@@ -6,10 +6,10 @@ import { forwardRef } from 'react';
  * TableRow component, used to display the rows of a table. Renders a native HTML tr element.
  *
  * @example
- * <Table.Row>
- *   <Table.Cell>John</Table.Cell>
- *   <Table.Cell>25</Table.Cell>
- * </Table.Row>
+ * <TableRow>
+ *   <TableCell>John</TableCell>
+ *   <TableCell>25</TableCell>
+ * </TableRow>
  */
 const TableRow = forwardRef(function TableRow(rest, ref) {
     return jsx("tr", { ref: ref, ...rest });

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

@@ -1,5 +1,5 @@
 'use client';
-import { Tabs as Tabs$1 } from './tabs.js';
+import { Tabs } from './tabs.js';
 import { TabsList } from './tabs-list.js';
 import { TabsPanel } from './tabs-panel.js';
 import { TabsTab } from './tabs-tab.js';
@@ -19,13 +19,13 @@ import { TabsTab } from './tabs-tab.js';
  *   <Tabs.Panel value='3'>content 3</Tabs.Panel>
  * </Tabs>
  */
-const Tabs = Object.assign(Tabs$1, {
+const TabsComponent = Object.assign(Tabs, {
     List: TabsList,
     Tab: TabsTab,
     Panel: TabsPanel,
 });
-Tabs.Tab.displayName = 'Tabs.Tab';
-Tabs.List.displayName = 'Tabs.List';
-Tabs.Panel.displayName = 'Tabs.Panel';
+TabsComponent.Tab.displayName = 'Tabs.Tab';
+TabsComponent.List.displayName = 'Tabs.List';
+TabsComponent.Panel.displayName = 'Tabs.Panel';
 
-export { Tabs, TabsList, TabsPanel, TabsTab };
+export { TabsComponent as Tabs, TabsList, TabsPanel, TabsTab };

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

@@ -8,10 +8,10 @@ import { Context } from './tabs.js';
  * The container for all `Tab` components.
  *
  * @example
- * <Tabs.List>
- *  <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
- *  <Tabs.Tab value='2'>Tab 2</Tabs.Tab>
- * </Tabs.List>
+ * <TabsList>
+ *  <TabsTab value='1'>Tab 1</TabsTab>
+ *  <TabsTab value='2'>Tab 2</TabsTab>
+ * </TabsList>
  */
 const TabsList = forwardRef(function TabsList({ children, ...rest }, ref) {
     const { value } = useContext(Context);