@digdir/designsystemet-react 1.0.0-next.47 → 1.0.0-next.49

package/dist/cjs/components/Search/Search.js

@@ -5,6 +5,22 @@ var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
 
+/**
+ * Search component, use to display different variations of a search input
+ *
+ * @example with button
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Clear />
+ *   <Search.Button />
+ * </Search>
+ *
+ * @example with icon
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Clear />
+ * </Search>
+ */
 const Search = react.forwardRef(function Search({ className, ...rest }, ref) {
     return jsxRuntime.jsx("div", { ref: ref, className: cl('ds-search', className), ...rest });
 });

package/dist/cjs/components/Search/SearchButton.js

@@ -5,6 +5,15 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var Button = require('../Button/Button.js');
 
+/**
+ * SearchButton component, used to display a search button within a Search component.
+ *
+ * @example
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Button>Søk</Search.Button>
+ * </Search>
+ */
 const SearchButton = react.forwardRef(function SearchButton({ children = 'Søk', ...rest }, ref) {
     return (jsxRuntime.jsx(Button.Button, { ref: ref, type: 'submit', ...rest, children: children }));
 });

package/dist/cjs/components/Search/SearchClear.js

@@ -6,6 +6,15 @@ var react = require('react');
 var utilities = require('../Combobox/utilities.js');
 var Button = require('../Button/Button.js');
 
+/**
+ * SearchClear component, used to display a clear buttun when the search input is not empty.
+ *
+ * @example
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Clear />
+ * </Search>
+ */
 const SearchClear = react.forwardRef(function SearchClear({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) {
     const handleClear = (e) => {
         const target = e.target;

package/dist/cjs/components/Search/SearchInput.js

@@ -5,6 +5,14 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var Input = require('../Input/Input.js');
 
+/**
+ * SearchInput component, used to display a search input within the Search component.
+ *
+ * @example
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ * </Search>
+ */
 const SearchInput = react.forwardRef(function SearchInput({ ...rest }, ref) {
     return (jsxRuntime.jsx(Input.Input, { ref: ref, type: 'search', 
         /* We need an empty placeholder for the clear button to be able to show/hide */

package/dist/cjs/components/Search/index.js

@@ -7,16 +7,20 @@ var SearchClear = require('./SearchClear.js');
 var SearchInput = require('./SearchInput.js');
 
 /**
- * Search field
+ * Search component, use to display different variations of a search input
  *
- * @example
- * ```tsx
+ * @example with button
  * <Search>
- *  <Search.Input aria-label='Søk' />
- *  <Search.Clear />
- *  <Search.Button />
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Clear />
+ *   <Search.Button />
+ * </Search>
+ *
+ * @example with icon
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Clear />
  * </Search>
- * ```
  */
 const Search = Object.assign(Search$1.Search, {
     Clear: SearchClear.SearchClear,

package/dist/cjs/components/Select/Select.js

@@ -5,6 +5,15 @@ var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
 
+/**
+ * Select component, used to display a native select.
+ *
+ * @example
+ * <Select>
+ *   <Select.Option value='1'>Option 1</Select.Option>
+ *   <Select.Option value='2'>Option 2</Select.Option>
+ * </Select>
+ */
 const Select = react.forwardRef(function Select({ className, onKeyDown, onMouseDown, width, ...rest }, ref) {
     return (jsxRuntime.jsx("select", { className: cl('ds-input', className), "data-width": width, ref: ref, onKeyDown: (event) => {
             if (event.key === 'Tab')

package/dist/cjs/components/Select/SelectOptgroup.js

@@ -5,6 +5,17 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
 var react = require('react');
 
+/**
+ * SelectOptgroup component, used to display a native optgroup within a select.
+ *
+ * @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>
+ * </Select>
+ */
 const SelectOptgroup = react.forwardRef(function SelectOptgroup({ asChild, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'optgroup';
     return jsxRuntime.jsx(Component, { ...rest, ref: ref });

package/dist/cjs/components/Select/SelectOption.js

@@ -5,6 +5,15 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
 var react = require('react');
 
+/**
+ * SelectOption component, used to display a native option within a select.
+ *
+ * @example
+ * <Select>
+ *   <Select.Option value='1'>Option 1</Select.Option>
+ *   <Select.Option value='2'>Option 2</Select.Option>
+ * </Select>
+ */
 const SelectOption = react.forwardRef(function SelectOption({ asChild, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'option';
     return jsxRuntime.jsx(Component, { ...rest, ref: ref });

package/dist/cjs/components/Select/index.js

@@ -5,6 +5,15 @@ var Select$1 = require('./Select.js');
 var SelectOptgroup = require('./SelectOptgroup.js');
 var SelectOption = require('./SelectOption.js');
 
+/**
+ * Select component, used to display a native select.
+ *
+ * @example
+ * <Select>
+ *   <Select.Option value='1'>Option 1</Select.Option>
+ *   <Select.Option value='2'>Option 2</Select.Option>
+ * </Select>
+ */
 const Select = Object.assign(Select$1.Select, {
     Option: SelectOption.SelectOption,
     Optgroup: SelectOptgroup.SelectOptgroup,

package/dist/cjs/components/Skeleton/Skeleton.js

@@ -9,11 +9,12 @@ var react = require('react');
 var useSynchronizedAnimation = require('../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
 
 /**
- * Represent a draft of page while the content loads. Mix different skeleton components to create your layout.
+ * Skeleton is used to represent a draft of page while the content loads.
+ *
  * @example
- *   <Skeleton variant="circle" />
- *   <Skeleton variant="text" />
- *   <Skeleton variant="rectangle" />
+ * <Skeleton variant="circle" />
+ * <Skeleton variant="text" />
+ * <Skeleton variant="rectangle" />
  */
 const Skeleton = react.forwardRef(function Skeleton({ asChild, className, height, style, variant = 'rectangle', width, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'span';

package/dist/cjs/components/SkipLink/SkipLink.js

@@ -5,6 +5,13 @@ var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
 
+/**
+ * SkipLink component, used to display a skip link within the page.
+ * Place it at the top of the page to allow users to skip to the main content.
+ *
+ * @example
+ * <SkipLink href='#main-content'>Skip to main content</SkipLink>
+ */
 const SkipLink = react.forwardRef(function SkipLink({ children, className, ...rest }, ref) {
     return (jsxRuntime.jsx("a", { className: cl('ds-skiplink', className), ...rest, ref: ref, children: children }));
 });

package/dist/cjs/components/Spinner/Spinner.js

@@ -7,7 +7,12 @@ var cl = require('clsx/lite');
 var react = require('react');
 var useSynchronizedAnimation = require('../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
 
-/**  Spinner component used for indicating busy or indeterminate loading */
+/**
+ * Spinner component used for indicating busy or indeterminate loading.
+ *
+ * @example
+ * <Spinner aria-label='Loading users...' />
+ */
 const Spinner = react.forwardRef(function Spinner({ 'aria-label': ariaLabel, className, ...rest }, ref) {
     const svgRef = useSynchronizedAnimation.useSynchronizedAnimation('ds-spinner-rotate-animation');
     const strokeRef = useSynchronizedAnimation.useSynchronizedAnimation('ds-spinner-stroke-animation');

package/dist/cjs/components/Suggestion/Suggestion.js

@@ -0,0 +1,55 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var uDatalist = require('@u-elements/u-datalist');
+var cl = require('clsx/lite');
+var react = require('react');
+
+const SuggestionContext = react.createContext({});
+/**
+ * A component that provides a suggestion list for an input field.
+ *
+ * @example
+ * <Suggestion>
+ *   <Suggestion.Input />
+ *   <Suggestion.Clear />
+ *   <Suggestion.List>
+ *     <Suggestion.Empty>Tomt</Suggestion.Empty>
+ *     <Suggestion.Option value='Option 1'>Option 1</Suggestion.Option>
+ *     <Suggestion.Option value='Option 2'>Option 2</Suggestion.Option>
+ *   </Suggestion.List>
+ * </Suggestion>
+ */
+const Suggestion = react.forwardRef(function Suggestion({ className, filter = true, asChild, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'div';
+    const [listId, setListId] = react.useState(react.useId());
+    const inputRef = react.useRef(null);
+    const handleFilter = react.useCallback((input) => {
+        const list = input?.list;
+        // Let <datalist> handle filtering if filter is true
+        if (filter === true || !list)
+            return;
+        // Handle custom filter
+        if (filter !== false) {
+            let index = 0;
+            for (const option of list.children) {
+                // Skip <datalist> children that are not <option>
+                if ('value' in option)
+                    option.disabled = !filter({
+                        index: index++, // Increment index for each <option>
+                        input,
+                        optionElement: option,
+                        text: option.text,
+                        value: uDatalist.getDatalistValue(option),
+                    });
+            }
+        }
+        uDatalist.syncDatalistState(input); // Sync the datalist state if filter is custom or false
+    }, [filter]);
+    return (jsxRuntime.jsx(SuggestionContext.Provider, { value: { inputRef, listId, setListId, handleFilter }, children: jsxRuntime.jsx(Component, { className: cl('ds-suggestion', className), ref: ref, ...rest }) }));
+});
+
+exports.Suggestion = Suggestion;
+exports.SuggestionContext = SuggestionContext;

package/dist/cjs/components/Suggestion/SuggestionClear.js

@@ -0,0 +1,48 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Suggestion = require('./Suggestion.js');
+var Button = require('../Button/Button.js');
+
+/**
+ * Component that provides a clear button for the suggestion input.
+ *
+ * Place as a descendant of `Suggestion`
+ *
+ * @example
+ * <Suggestion>
+ *   <Suggestion.Input />
+ *   <Suggestion.Clear />
+ *   <Suggestion.List />
+ * </Suggestion>
+ */
+const SuggestionClear = react.forwardRef(function SuggestionClear({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) {
+    const { inputRef } = react.useContext(Suggestion.SuggestionContext); //, handleValueChange
+    const handleClear = (event) => {
+        if (!inputRef?.current)
+            throw new Error('Input is missing');
+        /* narrow type to make TS happy */
+        if (!(inputRef?.current instanceof HTMLInputElement))
+            throw new Error('Input is not an input element');
+        event.preventDefault();
+        setReactInputValue(inputRef.current, '');
+        inputRef.current.focus();
+        onClick?.(event);
+    };
+    return (jsxRuntime.jsx(Button.Button, { ref: ref, variant: 'tertiary', type: 'reset', "aria-label": label, onClick: handleClear, icon: true, ...rest }));
+});
+const setReactInputValue = (input, value) => {
+    const previousValue = input.value;
+    input.value = value;
+    const tracker = input._valueTracker;
+    if (typeof tracker !== 'undefined') {
+        tracker.setValue(previousValue);
+    }
+    //'change' instead of 'input', see https://github.com/facebook/react/issues/11488#issuecomment-381590324
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+};
+
+exports.SuggestionClear = SuggestionClear;
+exports.setReactInputValue = setReactInputValue;

package/dist/cjs/components/Suggestion/SuggestionEmpty.js

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
+
+/**
+ * Component that provides an empty suggestion list.
+ *
+ * Place as a descendant of `Suggestion.List`
+ *
+ * @example
+ * <Suggestion.List>
+ *   <Suggestion.Empty>Tomt</Suggestion.Empty>
+ * </Suggestion.List>
+ */
+const SuggestionEmpty = react.forwardRef(function SuggestionEmpty({ asChild, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'div';
+    return (jsxRuntime.jsx(Component, { "aria-disabled": 'true', ref: ref, role: 'option', tabIndex: 0, ...rest }));
+});
+
+exports.SuggestionEmpty = SuggestionEmpty;

package/dist/cjs/components/Suggestion/SuggestionInput.js

@@ -0,0 +1,45 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('@floating-ui/react');
+var uDatalist = require('@u-elements/u-datalist');
+var react = require('react');
+var Suggestion = require('./Suggestion.js');
+var Input = require('../Input/Input.js');
+
+/**
+ * Component that provides an input field for the suggestion list.
+ *
+ * Place as a descendant of `Suggestion`
+ *
+ * @example
+ * <Suggestion>
+ *   <Suggestion.Input />
+ *   <Suggestion.List />
+ * </Suggestion>
+ */
+const SuggestionInput = react.forwardRef(function SuggestionList({ value, onInput, ...rest }, ref) {
+    const { listId, inputRef, handleFilter } = react.useContext(Suggestion.SuggestionContext);
+    const mergedRefs = react$1.useMergeRefs([inputRef, ref]);
+    const updateSelected = react.useCallback(() => {
+        const { list, value } = inputRef?.current || {};
+        for (const option of list?.options || []) {
+            option.selected = uDatalist.getDatalistValue(option) === value;
+        }
+    }, []);
+    // Update also if controlled value
+    react.useEffect(() => {
+        updateSelected();
+        handleFilter?.(inputRef?.current);
+    }, [value]);
+    return (jsxRuntime.jsx(Input.Input, { ref: mergedRefs, list: listId, value: value, onInput: (event) => {
+            onInput?.(event); // Should run first
+            updateSelected();
+            if (!uDatalist.isDatalistClick(event.nativeEvent))
+                handleFilter?.(inputRef?.current);
+        }, placeholder: '' // We need an empty placeholder for the clear button to be able to show/hide
+        , ...rest }));
+});
+
+exports.SuggestionInput = SuggestionInput;

package/dist/cjs/components/Suggestion/SuggestionList.js

@@ -0,0 +1,30 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('@u-elements/u-datalist');
+var Suggestion = require('./Suggestion.js');
+
+/**
+ * Component that provides a suggestion list.
+ *
+ * Place as a descendant of `Suggestion`
+ *
+ * @example
+ * <Suggestion>
+ *   <Suggestion.Input />
+ *   <Suggestion.List />
+ * </Suggestion>
+ */
+const SuggestionList = react.forwardRef(function SuggestionList({ singular = '%d forslag', plural = '%d forslag', className, id, ...rest }, ref) {
+    const { inputRef, listId, setListId, handleFilter } = react.useContext(Suggestion.SuggestionContext);
+    react.useEffect(() => handleFilter?.(inputRef?.current)); // Must run on every render
+    react.useEffect(() => {
+        if (id && listId !== id)
+            setListId?.(id);
+    }, [listId, id, setListId]);
+    return (jsxRuntime.jsx("u-datalist", { "data-sr-singular": singular, "data-sr-plural": plural, class: className, id: listId, ref: ref, ...rest }));
+});
+
+exports.SuggestionList = SuggestionList;

package/dist/cjs/components/Suggestion/SuggestionOption.js

@@ -0,0 +1,12 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('@u-elements/u-datalist');
+
+const SuggestionOption = react.forwardRef(function SuggestionOption({ className, ...rest }, ref) {
+    return (jsxRuntime.jsx("u-option", { class: className, ref: ref, ...rest }));
+});
+
+exports.SuggestionOption = SuggestionOption;

package/dist/cjs/components/Suggestion/index.js

@@ -0,0 +1,44 @@
+'use client';
+'use strict';
+
+var Suggestion = require('./Suggestion.js');
+var SuggestionClear = require('./SuggestionClear.js');
+var SuggestionEmpty = require('./SuggestionEmpty.js');
+var SuggestionInput = require('./SuggestionInput.js');
+var SuggestionList = require('./SuggestionList.js');
+var SuggestionOption = require('./SuggestionOption.js');
+
+/**
+ * A component that provides a suggestion list for an input field.
+ *
+ * @example
+ * <Suggestion>
+ *   <Suggestion.Input />
+ *   <Suggestion.Clear />
+ *   <Suggestion.List>
+ *     <Suggestion.Empty>Tomt</Suggestion.Empty>
+ *     <Suggestion.Option value='Option 1'>Option 1</Suggestion.Option>
+ *     <Suggestion.Option value='Option 2'>Option 2</Suggestion.Option>
+ *   </Suggestion.List>
+ * </Suggestion>
+ */
+const EXPERIMENTAL_Suggestion = Object.assign(Suggestion.Suggestion, {
+    List: SuggestionList.SuggestionList,
+    Input: SuggestionInput.SuggestionInput,
+    Empty: SuggestionEmpty.SuggestionEmpty,
+    Option: SuggestionOption.SuggestionOption,
+    Clear: SuggestionClear.SuggestionClear,
+});
+EXPERIMENTAL_Suggestion.displayName = 'EXPERIMENTAL_Suggestion';
+EXPERIMENTAL_Suggestion.List.displayName = 'EXPERIMENTAL_Suggestion.List';
+EXPERIMENTAL_Suggestion.Input.displayName = 'EXPERIMENTAL_Suggestion.Input';
+EXPERIMENTAL_Suggestion.Empty.displayName = 'EXPERIMENTAL_Suggestion.Empty';
+EXPERIMENTAL_Suggestion.Option.displayName = 'EXPERIMENTAL_Suggestion.Option';
+EXPERIMENTAL_Suggestion.Clear.displayName = 'EXPERIMENTAL_Suggestion.Clear';
+
+exports.EXPERIMENTAL_SuggestionClear = SuggestionClear.SuggestionClear;
+exports.EXPERIMENTAL_SuggestionEmpty = SuggestionEmpty.SuggestionEmpty;
+exports.EXPERIMENTAL_SuggestionInput = SuggestionInput.SuggestionInput;
+exports.EXPERIMENTAL_SuggestionList = SuggestionList.SuggestionList;
+exports.EXPERIMENTAL_SuggestionOption = SuggestionOption.SuggestionOption;
+exports.EXPERIMENTAL_Suggestion = EXPERIMENTAL_Suggestion;

package/dist/cjs/components/Switch/Switch.js

@@ -9,6 +9,7 @@ var Label = require('../Label/Label.js');
 
 /**
  * Switch used to toggle options.
+ *
  * @example
  * <Switch label="I agree" value="agree" />
  */

package/dist/cjs/components/Table/Table.js

@@ -5,6 +5,31 @@ var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
 
+/**
+ * Table component, used to display tabular data. Renders a native HTML table element.
+ *
+ * @example
+ * <Table>
+ *   <Table.Head>
+ *     <Table.Row>
+ *       <Table.HeaderCell>Name</Table.HeaderCell>
+ *       <Table.HeaderCell>Age</Table.HeaderCell>
+ *     </Table.Row>
+ *   </Table.Head>
+ *   <Table.Body>
+ *     <Table.Row>
+ *       <Table.Cell>John</Table.Cell>
+ *       <Table.Cell>25</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Body>
+ *   <Table.Foot>
+ *     <Table.Row>
+ *       <Table.Cell>Total</Table.Cell>
+ *       <Table.Cell>2</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Foot>
+ * </Table>
+ */
 const Table = react.forwardRef(function Table({ zebra = false, stickyHeader = false, border = false, hover = false, className, children, ...rest }, ref) {
     return (jsxRuntime.jsx("table", { className: cl('ds-table', className), "data-border": border || undefined, "data-hover": hover || undefined, "data-sticky-header": stickyHeader || undefined, "data-zebra": zebra || undefined, ref: ref, ...rest, children: children }));
 });

package/dist/cjs/components/Table/TableBody.js

@@ -4,6 +4,17 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('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>
+ */
 const TableBody = react.forwardRef(function TableBody(rest, ref) {
     return jsxRuntime.jsx("tbody", { ref: ref, ...rest });
 });

package/dist/cjs/components/Table/TableCell.js

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

package/dist/cjs/components/Table/TableFoot.js

@@ -4,6 +4,17 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('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>
+ */
 const TableFoot = react.forwardRef(function TableFoot(rest, ref) {
     return jsxRuntime.jsx("tfoot", { ref: ref, ...rest });
 });

package/dist/cjs/components/Table/TableHead.js

@@ -4,6 +4,17 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('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>
+ */
 const TableHead = react.forwardRef(function TableHead(rest, ref) {
     return jsxRuntime.jsx("thead", { ref: ref, ...rest });
 });

package/dist/cjs/components/Table/TableHeaderCell.js

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

package/dist/cjs/components/Table/TableRow.js

@@ -4,6 +4,15 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('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>
+ */
 const TableRow = react.forwardRef(function TableRow(rest, ref) {
     return jsxRuntime.jsx("tr", { ref: ref, ...rest });
 });

package/dist/cjs/components/Table/index.js

@@ -9,6 +9,31 @@ var TableHead = require('./TableHead.js');
 var TableHeaderCell = require('./TableHeaderCell.js');
 var TableRow = require('./TableRow.js');
 
+/**
+ * Table component, used to display tabular data. Renders a native HTML table element.
+ *
+ * @example
+ * <Table>
+ *   <Table.Head>
+ *     <Table.Row>
+ *       <Table.HeaderCell>Name</Table.HeaderCell>
+ *       <Table.HeaderCell>Age</Table.HeaderCell>
+ *     </Table.Row>
+ *   </Table.Head>
+ *   <Table.Body>
+ *     <Table.Row>
+ *       <Table.Cell>John</Table.Cell>
+ *       <Table.Cell>25</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Body>
+ *   <Table.Foot>
+ *     <Table.Row>
+ *       <Table.Cell>Total</Table.Cell>
+ *       <Table.Cell>2</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Foot>
+ * </Table>
+ */
 const Table = Object.assign(Table$1.Table, {
     Head: TableHead.TableHead,
     Body: TableBody.TableBody,