@uppsala-designsystem/ui 1.5.0

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

@@ -0,0 +1,101 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('@u-elements/u-combobox');
+var cl = require('clsx/lite');
+var index = require('../Chip/index.js');
+var useMergeRefs = require('../../utilities/hooks/useMergeRefs/useMergeRefs.js');
+
+const SuggestionContext = react.createContext({
+    handleFilter: () => undefined,
+});
+const text = (el) => el.textContent?.trim() || "";
+const sanitizeItems = (values = []) => (typeof values === "string"
+    ? [{ label: values, value: values }]
+    : values.map((value) => typeof value === "string"
+        ? { label: value, value }
+        : {
+            label: value.label || value.value || "",
+            value: value.value || "",
+        })).filter((x) => !!x.label);
+const nextItems = (data, prev, multiple) => {
+    const item = { label: text(data), value: data.value };
+    if (!multiple)
+        return data.isConnected ? [] : [item];
+    return data.isConnected
+        ? sanitizeItems(prev).filter(({ value }) => value !== item.value)
+        : [...sanitizeItems(prev), item];
+};
+const defaultFilter = ({ label, input }) => label.toLowerCase().includes(input.value.trim().toLowerCase());
+const deprecate = (from, to) => console.warn(`Suggestion: Using "${from}" is deprecated, please use "${to}" instead.`);
+const Suggestion = react.forwardRef(function Suggestion({ children, className, creatable = false, defaultSelected: _defaultSelected, defaultValue, filter = true, multiple = false, hiddenChips = 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 = react.useRef(null);
+    const genId = react.useId();
+    const selectId = rest.id ? `${rest.id}-select` : genId;
+    const isControlled = selected !== undefined;
+    const mergedRefs = useMergeRefs.useMergeRefs([ref, uComboboxRef]);
+    const [isEmpty, setIsEmpty] = react.useState(false);
+    const [defaultItems, setDefaultItems] = react.useState(sanitizeItems(defaultSelected));
+    const selectedItems = selected ? sanitizeItems(selected) : defaultItems;
+    /**
+     * Listerners and handling of adding/removing
+     */
+    react.useEffect(() => {
+        const combobox = uComboboxRef.current;
+        const beforeChange = (event) => {
+            event.preventDefault();
+            const multiple = combobox?.multiple;
+            const data = event.detail;
+            if (isControlled)
+                onSelectedChange?.(nextItems(data, selectedItems, multiple));
+            else
+                setDefaultItems(nextItems(data, selectedItems, multiple));
+        };
+        combobox?.addEventListener("beforechange", beforeChange);
+        return () => combobox?.removeEventListener("beforechange", beforeChange);
+    }, [selectedItems, isControlled, onSelectedChange]);
+    // Before match event listener
+    react.useEffect(() => {
+        const combobox = uComboboxRef.current;
+        const beforeMatch = (e) => onBeforeMatch?.(e);
+        combobox?.addEventListener("beforematch", beforeMatch);
+        return () => combobox?.removeEventListener("beforematch", beforeMatch);
+    }, [onBeforeMatch]);
+    const handleFilter = react.useCallback(() => {
+        const { control: input, options = [] } = uComboboxRef?.current || {};
+        const filterFn = filter === true ? defaultFilter : filter;
+        let disabled = 0;
+        let index = 0;
+        for (const option of options)
+            if (!option.hasAttribute("data-empty")) {
+                if (filterFn && input)
+                    option.disabled =
+                        !filterFn({
+                            index,
+                            input,
+                            label: option.label,
+                            optionElement: option,
+                            text: option.text,
+                            value: option.value,
+                        }) && Boolean(++disabled);
+                index++; // Increment index for each <option>
+            }
+        setIsEmpty(index === disabled);
+    }, [filter]);
+    return (jsxRuntime.jsx(SuggestionContext.Provider, { value: { isEmpty, handleFilter, uComboboxRef }, children: jsxRuntime.jsxs("u-combobox", { "data-multiple": multiple || undefined, "data-creatable": creatable || undefined, class: cl("ds-suggestion", className), ref: mergedRefs, ...rest, children: [selectedItems.map((item) => (jsxRuntime.jsx(index.Chip.Removable, { value: item.value, "data-hidden": hiddenChips || undefined, "aria-hidden": hiddenChips || undefined, asChild: true, children: jsxRuntime.jsx("data", { children: renderSelected(item) }) }, item.value))), children, !!name && jsxRuntime.jsx("select", { name: name, multiple: true, hidden: true, id: selectId })] }) }));
+});
+
+exports.Suggestion = Suggestion;
+exports.SuggestionContext = SuggestionContext;

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

@@ -0,0 +1,13 @@
+'use client';
+'use strict';
+
+/**
+ * @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";
+
+exports.SuggestionChips = SuggestionChips;

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

@@ -0,0 +1,24 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+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) {
+    return (jsxRuntime.jsx(Button.Button, { "aria-label": label, asChild: true, icon: true, hidden: true, ref: ref, variant: "tertiary", ...rest, children: jsxRuntime.jsx("del", {}) }));
+});
+
+exports.SuggestionClear = SuggestionClear;

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

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Suggestion = require('./Suggestion.js');
+
+/**
+ * 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(rest, ref) {
+    const { isEmpty } = react.useContext(Suggestion.SuggestionContext);
+    return isEmpty ? jsxRuntime.jsx("u-option", { "data-empty": true, value: "", ref: ref, ...rest }) : null;
+});
+
+exports.SuggestionEmpty = SuggestionEmpty;

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

@@ -0,0 +1,34 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+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, onChange, ...rest }, ref) {
+    const { handleFilter } = react.useContext(Suggestion.SuggestionContext);
+    react.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.");
+    return (jsxRuntime.jsx(Input.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
+        }, ...rest }));
+});
+
+exports.SuggestionInput = SuggestionInput;

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

@@ -0,0 +1,51 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('@u-elements/u-datalist');
+var dom = require('@floating-ui/dom');
+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 { handleFilter, uComboboxRef } = react.useContext(Suggestion.SuggestionContext);
+    react.useEffect(handleFilter); // Must run on every render
+    // Position with floating-ui
+    react.useEffect(() => {
+        const trigger = uComboboxRef?.current?.control;
+        const list = uComboboxRef?.current?.list;
+        if (list && trigger) {
+            return dom.autoUpdate(trigger, list, () => {
+                dom.computePosition(trigger, list, {
+                    placement: "bottom",
+                    strategy: "fixed",
+                    middleware: [triggerWidth],
+                }).then(({ x, y }) => {
+                    list.style.translate = `${x}px calc(${y}px + var(--dsc-suggestion-list-gap))`;
+                });
+            });
+        }
+    }, []);
+    return (jsxRuntime.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",
+    fn(data) {
+        const { elements, rects } = data;
+        elements.floating.style.width = `${rects.reference.width}px`;
+        return data;
+    },
+};
+
+exports.SuggestionList = SuggestionList;

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

@@ -0,0 +1,11 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+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,71 @@
+'use client';
+'use strict';
+
+var Suggestion$1 = require('./Suggestion.js');
+var SuggestionChips = require('./SuggestionChips.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.Chips />
+ *   <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$1.Suggestion, {
+    List: SuggestionList.SuggestionList,
+    Input: SuggestionInput.SuggestionInput,
+    Empty: SuggestionEmpty.SuggestionEmpty,
+    Option: SuggestionOption.SuggestionOption,
+    Clear: SuggestionClear.SuggestionClear,
+    Chips: SuggestionChips.SuggestionChips,
+});
+const Suggestion = Object.assign(Suggestion$1.Suggestion, {
+    List: SuggestionList.SuggestionList,
+    Input: SuggestionInput.SuggestionInput,
+    Empty: SuggestionEmpty.SuggestionEmpty,
+    Option: SuggestionOption.SuggestionOption,
+    Clear: SuggestionClear.SuggestionClear,
+    Chips: SuggestionChips.SuggestionChips,
+});
+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";
+EXPERIMENTAL_Suggestion.Chips.displayName = "EXPERIMENTAL_Suggestion.Chips";
+Suggestion.displayName = "Suggestion";
+Suggestion.List.displayName = "Suggestion.List";
+Suggestion.Input.displayName = "Suggestion.Input";
+Suggestion.Empty.displayName = "Suggestion.Empty";
+Suggestion.Option.displayName = "Suggestion.Option";
+Suggestion.Clear.displayName = "Suggestion.Clear";
+Suggestion.Chips.displayName = "Suggestion.Chips";
+
+exports.EXPERIMENTAL_SuggestionChips = SuggestionChips.SuggestionChips;
+exports.SuggestionChips = SuggestionChips.SuggestionChips;
+exports.EXPERIMENTAL_SuggestionClear = SuggestionClear.SuggestionClear;
+exports.SuggestionClear = SuggestionClear.SuggestionClear;
+exports.EXPERIMENTAL_SuggestionEmpty = SuggestionEmpty.SuggestionEmpty;
+exports.SuggestionEmpty = SuggestionEmpty.SuggestionEmpty;
+exports.EXPERIMENTAL_SuggestionInput = SuggestionInput.SuggestionInput;
+exports.SuggestionInput = SuggestionInput.SuggestionInput;
+exports.EXPERIMENTAL_SuggestionList = SuggestionList.SuggestionList;
+exports.SuggestionList = SuggestionList.SuggestionList;
+exports.EXPERIMENTAL_SuggestionOption = SuggestionOption.SuggestionOption;
+exports.SuggestionOption = SuggestionOption.SuggestionOption;
+exports.EXPERIMENTAL_Suggestion = EXPERIMENTAL_Suggestion;
+exports.Suggestion = Suggestion;

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

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var index = require('../Field/index.js');
+var Input = require('../Input/Input.js');
+var Label = require('../Label/Label.js');
+
+/**
+ * Switch used to toggle options.
+ *
+ * @example
+ * <Switch label="I agree" value="agree" />
+ */
+const Switch = react.forwardRef(function Switch({ 'data-size': size, children, className, description, label, position, style, ...rest }, ref) {
+    return (jsxRuntime.jsxs(index.Field, { className: className, "data-position": position, "data-size": size, style: style, children: [jsxRuntime.jsx(Input.Input, { type: 'checkbox', role: 'switch', ref: ref, ...rest }), !!label && jsxRuntime.jsx(Label.Label, { weight: 'regular', children: label }), !!description && jsxRuntime.jsx("div", { "data-field": 'description', children: description })] }));
+});
+
+exports.Switch = Switch;

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

@@ -0,0 +1,37 @@
+'use client';
+'use strict';
+
+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 }));
+});
+
+exports.Table = Table;

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

@@ -0,0 +1,22 @@
+'use client';
+'use strict';
+
+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 });
+});
+
+exports.TableBody = TableBody;

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

@@ -0,0 +1,17 @@
+'use client';
+'use strict';
+
+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 });
+});
+
+exports.TableCell = TableCell;

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

@@ -0,0 +1,22 @@
+'use client';
+'use strict';
+
+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 });
+});
+
+exports.TableFoot = TableFoot;

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

@@ -0,0 +1,22 @@
+'use client';
+'use strict';
+
+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 });
+});
+
+exports.TableHead = TableHead;

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

@@ -0,0 +1,17 @@
+'use client';
+'use strict';
+
+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 }));
+});
+
+exports.TableHeaderCell = TableHeaderCell;

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

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+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 });
+});
+
+exports.TableRow = TableRow;

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

@@ -0,0 +1,59 @@
+'use client';
+'use strict';
+
+var Table$1 = require('./Table.js');
+var TableBody = require('./TableBody.js');
+var TableCell = require('./TableCell.js');
+var TableFoot = require('./TableFoot.js');
+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,
+    Row: TableRow.TableRow,
+    Cell: TableCell.TableCell,
+    HeaderCell: TableHeaderCell.TableHeaderCell,
+    Foot: TableFoot.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';
+
+exports.TableBody = TableBody.TableBody;
+exports.TableCell = TableCell.TableCell;
+exports.TableFoot = TableFoot.TableFoot;
+exports.TableHead = TableHead.TableHead;
+exports.TableHeaderCell = TableHeaderCell.TableHeaderCell;
+exports.TableRow = TableRow.TableRow;
+exports.Table = Table;

package/dist/cjs/components/Tabs/Tabs.js

@@ -0,0 +1,43 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+const Context = react.createContext({});
+/**
+ * Display a group of tabs that can be toggled between.
+ *
+ * @example
+ * <Tabs onChange={(value) => console.log(value)}>
+ *   <Tabs.List>
+ *     <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
+ *     <Tabs.Tab value='2'>Tab 2</Tabs.Tab>
+ *     <Tabs.Tab value='3'>Tab 3</Tabs.Tab>
+ *   </Tabs.List>
+ *   <Tabs.Panel value='1'>content 1</Tabs.Panel>
+ *   <Tabs.Panel value='2'>content 2</Tabs.Panel>
+ *   <Tabs.Panel value='3'>content 3</Tabs.Panel>
+ * </Tabs>
+ */
+const Tabs = react.forwardRef(function Tabs({ value, defaultValue, className, onChange, ...rest }, ref) {
+    const isControlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
+    let onValueChange = onChange;
+    if (!isControlled) {
+        onValueChange = (newValue) => {
+            setUncontrolledValue(newValue);
+            onChange?.(newValue);
+        };
+        value = uncontrolledValue;
+    }
+    return (jsxRuntime.jsx(Context.Provider, { value: {
+            value,
+            defaultValue,
+            onChange: onValueChange,
+        }, children: jsxRuntime.jsx("div", { className: cl('ds-tabs', className), ref: ref, ...rest }) }));
+});
+
+exports.Context = Context;
+exports.Tabs = Tabs;

package/dist/cjs/components/Tabs/TabsList.js

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Tabs = require('./Tabs.js');
+var RovingFocusRoot = require('../../utilities/RovingFocus/RovingFocusRoot.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>
+ */
+const TabsList = react.forwardRef(function TabsList({ children, ...rest }, ref) {
+    const { value } = react.useContext(Tabs.Context);
+    return (jsxRuntime.jsx(RovingFocusRoot.RovingFocusRoot, { role: 'tablist', activeValue: value, orientation: 'ambiguous', ref: ref, ...rest, children: children }));
+});
+
+exports.TabsList = TabsList;