@digdir/designsystemet-react 0.0.0-deps-tsdown-20260421103939

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

@@ -0,0 +1,32 @@
+'use client';
+import { Search } from './search.js';
+import { SearchButton } from './search-button.js';
+import { SearchClear } from './search-clear.js';
+import { SearchInput } from './search-input.js';
+
+/**
+ * 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 SearchComponent = Object.assign(Search, {
+    Clear: SearchClear,
+    Button: SearchButton,
+    Input: SearchInput,
+});
+SearchComponent.Clear.displayName = 'Search.Clear';
+SearchComponent.Button.displayName = 'Search.Button';
+SearchComponent.Input.displayName = 'Search.Input';
+
+export { SearchComponent as Search, SearchButton, SearchClear, SearchInput };

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

@@ -0,0 +1,19 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Button } from '../button/button.js';
+
+/**
+ * SearchButton component, used to display a search button within a Search component.
+ *
+ * @example
+ * <Search>
+ *   <SearchInput aria-label='Søk' />
+ *   <SearchButton>Søk</SearchButton>
+ * </Search>
+ */
+const SearchButton = forwardRef(function SearchButton({ children = 'Søk', ...rest }, ref) {
+    return (jsx(Button, { ref: ref, type: 'submit', ...rest, children: children }));
+});
+
+export { SearchButton };

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

@@ -0,0 +1,35 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Button } from '../button/button.js';
+import { setReactInputValue } from '../Combobox/utilities.js';
+
+/**
+ * SearchClear component, used to display a clear button when the search input is not empty.
+ *
+ * @example
+ * <Search>
+ *   <SearchInput aria-label='Søk' />
+ *   <SearchClear />
+ * </Search>
+ */
+const SearchClear = forwardRef(function SearchClear({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) {
+    const handleClear = (e) => {
+        const target = e.target;
+        let input = null;
+        if (target instanceof HTMLElement)
+            input = target.closest('.ds-search')?.querySelector('input');
+        if (!input)
+            throw new Error('Input is missing');
+        /* narrow type to make TS happy */
+        if (!(input instanceof HTMLInputElement))
+            throw new Error('Input is not an input element');
+        e.preventDefault();
+        setReactInputValue(input, '');
+        input.focus();
+        onClick?.(e);
+    };
+    return (jsx(Button, { ref: ref, variant: 'tertiary', type: 'reset', "aria-label": label, onClick: handleClear, icon: true, ...rest }));
+});
+
+export { SearchClear };

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

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

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

@@ -0,0 +1,26 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from '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 = forwardRef(function Search({ className, ...rest }, ref) {
+    return jsx("div", { ref: ref, className: cl('ds-search', className), ...rest });
+});
+
+export { Search };

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

@@ -0,0 +1,22 @@
+'use client';
+import { Select } from './select.js';
+import { SelectOptgroup } from './select-optgroup.js';
+import { SelectOption } from './select-option.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 SelectComponent = Object.assign(Select, {
+    Option: SelectOption,
+    Optgroup: SelectOptgroup,
+});
+SelectComponent.Option.displayName = 'Select.Option';
+SelectComponent.Optgroup.displayName = 'Select.Optgroup';
+
+export { SelectComponent as Select, SelectOptgroup, SelectOption };

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

@@ -0,0 +1,22 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+
+/**
+ * SelectOptgroup component, used to display a native optgroup within a select.
+ *
+ * @example
+ * <Select>
+ *   <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) {
+    const Component = asChild ? Slot : 'optgroup';
+    return jsx(Component, { ...rest, ref: ref });
+});
+
+export { SelectOptgroup };

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

@@ -0,0 +1,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+
+/**
+ * SelectOption component, used to display a native option within a select.
+ *
+ * @example
+ * <Select>
+ *   <SelectOption value='1'>Option 1</SelectOption>
+ *   <SelectOption value='2'>Option 2</SelectOption>
+ * </Select>
+ */
+const SelectOption = forwardRef(function SelectOption({ asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : 'option';
+    return jsx(Component, { ...rest, ref: ref });
+});
+
+export { SelectOption };

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

@@ -0,0 +1,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from '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 = forwardRef(function Select({ className, onKeyDown, onMouseDown, width, readOnly, ...rest }, ref) {
+    return (jsx("select", { className: cl('ds-input', className), "aria-readonly": rest['aria-readonly'] ?? readOnly, suppressHydrationWarning // Since <ds-field> adds attributes
+        : true, "data-width": width, ref: ref, ...rest }));
+});
+
+export { Select };

package/dist/esm/components/skeleton/skeleton.js

@@ -0,0 +1,28 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import '@digdir/designsystemet-web';
+import { useSynchronizedAnimation } from '../../utilities/hooks/use-synchronized-animation/use-synchronized-animation.js';
+import '../../utilities/roving-focus/roving-focus-item.js';
+import '../../utilities/roving-focus/roving-focus-root.js';
+
+/**
+ * Skeleton is used to represent a draft of page while the content loads.
+ *
+ * @example
+ * <Skeleton variant="circle" />
+ * <Skeleton variant="text" />
+ * <Skeleton variant="rectangle" />
+ */
+const Skeleton = forwardRef(function Skeleton({ asChild, className, height, style, variant = 'rectangle', width, ...rest }, ref) {
+    const Component = asChild ? Slot : 'span';
+    const isText = variant === 'text';
+    const animationRef = useSynchronizedAnimation('ds-skeleton-opacity-fade');
+    const mergedRefs = useMergeRefs([animationRef, ref]);
+    return (jsx(Component, { "aria-hidden": 'true', className: cl('ds-skeleton', className), "data-text": isText ? '-'.repeat(Number(width) || 1) : undefined, "data-variant": variant, ref: mergedRefs, style: isText ? style : { width, height, ...style }, ...rest }));
+});
+
+export { Skeleton };

package/dist/esm/components/skip-link/skip-link.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from '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 = forwardRef(function SkipLink({ children, className, ...rest }, ref) {
+    return (jsx("a", { className: cl('ds-skip-link', className), ...rest, ref: ref, children: children }));
+});
+
+export { SkipLink };

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

@@ -0,0 +1,24 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import '@digdir/designsystemet-web';
+import { useSynchronizedAnimation } from '../../utilities/hooks/use-synchronized-animation/use-synchronized-animation.js';
+import '../../utilities/roving-focus/roving-focus-item.js';
+import '../../utilities/roving-focus/roving-focus-root.js';
+
+/**
+ * Spinner component used for indicating busy or indeterminate loading.
+ *
+ * @example
+ * <Spinner aria-label='Loading users...' />
+ */
+const Spinner = forwardRef(function Spinner({ 'aria-label': ariaLabel, className, ...rest }, ref) {
+    const svgRef = useSynchronizedAnimation('ds-spinner-rotate-animation');
+    const strokeRef = useSynchronizedAnimation('ds-spinner-stroke-animation');
+    const mergedRefs = useMergeRefs([svgRef, ref]);
+    return (jsxs("svg", { "aria-label": ariaLabel, className: cl('ds-spinner', className), ref: mergedRefs, role: 'img', viewBox: '0 0 50 50', ...rest, children: [jsx("circle", { className: cl('ds-spinner__background'), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5' }), jsx("circle", { className: cl(`ds-spinner__circle`), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5', ref: strokeRef })] }));
+});
+
+export { Spinner };

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

@@ -0,0 +1,37 @@
+'use client';
+import { Suggestion } from './suggestion.js';
+import { SuggestionClear } from './suggestion-clear.js';
+import { SuggestionEmpty } from './suggestion-empty.js';
+import { SuggestionInput } from './suggestion-input.js';
+import { SuggestionList } from './suggestion-list.js';
+import { SuggestionOption } from './suggestion-option.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, {
+    List: SuggestionList,
+    Input: SuggestionInput,
+    Empty: SuggestionEmpty,
+    Option: SuggestionOption,
+    Clear: 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';
+
+export { EXPERIMENTAL_Suggestion, SuggestionClear as EXPERIMENTAL_SuggestionClear, SuggestionEmpty as EXPERIMENTAL_SuggestionEmpty, SuggestionInput as EXPERIMENTAL_SuggestionInput, SuggestionList as EXPERIMENTAL_SuggestionList, SuggestionOption as EXPERIMENTAL_SuggestionOption };

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

@@ -0,0 +1,24 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+/**
+ * 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 = forwardRef(function SuggestionClear({ 'aria-label': label = 'Tøm', ...rest }, ref) {
+    return (
+    //biome-ignore lint/a11y/useAriaPropsSupportedByRole: <del> needs aria-label when u-combobox makes it the clear button
+    jsx("del", { "aria-label": label, hidden: true, ref: ref, suppressHydrationWarning // Since <ds-suggestion> adds attributes
+        : true, ...rest }));
+});
+
+export { SuggestionClear };

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

@@ -0,0 +1,23 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext } from 'react';
+import { SuggestionContext } from './suggestion.js';
+import '@digdir/designsystemet-web';
+
+/**
+ * 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 = forwardRef(function SuggestionEmpty(rest, ref) {
+    const { isEmpty } = useContext(SuggestionContext);
+    return isEmpty ? (jsx("u-option", { "data-empty": true, ref: ref, suppressHydrationWarning // Since <u-option> adds attributes
+        : true, value: '', ...rest })) : null;
+});
+
+export { SuggestionEmpty };

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

@@ -0,0 +1,33 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext, useEffect } from 'react';
+import { Input } from '../input/input.js';
+import { SuggestionContext } from './suggestion.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 = forwardRef(function SuggestionList({ value, onInput, onChange, ...rest }, ref) {
+    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 onSelectedChange on Suggestion instead, or onInput if fetching API results');
+    if (value)
+        console.warn('SuggestionInput: Avoid using value, as Suggestion controls the Input. Use selected on Suggestion instead.');
+    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
+        }, suppressHydrationWarning // Since <ds-suggestion> adds attributes
+        : true, ...rest }));
+});
+
+export { SuggestionInput };

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

@@ -0,0 +1,26 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext, useEffect } from 'react';
+import '@digdir/designsystemet-web';
+import { SuggestionContext } from './suggestion.js';
+
+/**
+ * Component that provides a Suggestion list.
+ *
+ * Place as a descendant of `Suggestion`
+ *
+ * @example
+ * <Suggestion>
+ *   <Suggestion.Input />
+ *   <Suggestion.List />
+ * </Suggestion>
+ */
+const SuggestionList = forwardRef(function SuggestionList({ singular = '%d forslag', plural = '%d forslag', className, id, autoPlacement = true, ...rest }, ref) {
+    const { handleFilter } = useContext(SuggestionContext);
+    useEffect(handleFilter); // Must run on every render
+    return (jsx("u-datalist", { class: className, "data-nofilter": true, "data-sr-plural": plural, "data-sr-singular": singular, popover: 'manual', ref: ref, role: 'listbox' // Is also set by <ds-suggestion> but nice to have to please tests
+        , suppressHydrationWarning // Since <u-datalist> adds attributes
+        : true, ...rest }));
+});
+
+export { SuggestionList };

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

@@ -0,0 +1,23 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import '@digdir/designsystemet-web';
+
+/**
+ * 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, suppressHydrationWarning // Since <u-option> adds attributes
+        : true, ...rest }));
+});
+
+export { SuggestionOption };

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

@@ -0,0 +1,93 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef, useRef, useId, useState, useEffect, useCallback, createContext } from 'react';
+import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import '@digdir/designsystemet-web';
+
+const text = (el) => el.textContent?.trim() || '';
+const sanitizeItems = (values = []) => typeof values === 'string'
+    ? [{ label: values, value: values }]
+    : !Array.isArray(values)
+        ? [values]
+        : values.map((value) => typeof value === 'string' ? { label: value, value } : value);
+const nextItems = (data, prev, multiple) => {
+    const item = { label: text(data), value: data.value };
+    if (!multiple)
+        return data.isConnected ? undefined : 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 Suggestion = forwardRef(function Suggestion({ children, className, creatable = false, defaultSelected, filter = true, multiple = false, name, onBeforeMatch, onSelectedChange, renderSelected = ({ label }) => label, selected, ...rest }, ref) {
+    const dsSuggestionRef = useRef(null);
+    const genId = useId();
+    const selectId = rest.id ? `${rest.id}-select` : genId;
+    const isControlled = selected !== undefined;
+    const mergedRefs = useMergeRefs([ref, dsSuggestionRef]);
+    const [isEmpty, setIsEmpty] = useState(false);
+    const [defaultItems, setDefaultItems] = useState(sanitizeItems(defaultSelected));
+    const selectedItems = selected ? sanitizeItems(selected) : defaultItems;
+    const onSelectedChangeRef = useRef(onSelectedChange);
+    const selectedItemsRef = useRef(selectedItems);
+    // Keep the ref updated with the latest callback
+    useEffect(() => {
+        onSelectedChangeRef.current = onSelectedChange;
+    }, [onSelectedChange]);
+    useEffect(() => {
+        selectedItemsRef.current = selectedItems;
+    }, [selectedItems]);
+    /**
+     * Listerners and handling of adding/removing
+     */
+    useEffect(() => {
+        const combobox = dsSuggestionRef.current;
+        const beforeChange = (event) => {
+            event.preventDefault();
+            const multiple = combobox?.multiple;
+            const data = event.detail;
+            const nextItem = nextItems(data, selectedItemsRef.current, multiple);
+            onSelectedChangeRef.current?.(nextItem || null);
+            if (!isControlled)
+                setDefaultItems(sanitizeItems(nextItem));
+        };
+        combobox?.addEventListener('comboboxbeforeselect', beforeChange);
+        return () => combobox?.removeEventListener('comboboxbeforeselect', beforeChange);
+    }, [isControlled]);
+    // Before match event listener
+    useEffect(() => {
+        const combobox = dsSuggestionRef.current;
+        const beforeMatch = (e) => onBeforeMatch?.(e);
+        combobox?.addEventListener('comboboxbeforematch', beforeMatch);
+        return () => combobox?.removeEventListener('comboboxbeforematch', beforeMatch);
+    }, [onBeforeMatch]);
+    const handleFilter = useCallback(() => {
+        const { control: input, options = [] } = dsSuggestionRef?.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 (jsx(SuggestionContext.Provider, { value: { isEmpty, handleFilter, dsSuggestionRef }, children: jsxs("ds-suggestion", { "data-multiple": multiple || undefined, "data-creatable": creatable || undefined, class: cl('ds-suggestion', className), ref: mergedRefs, suppressHydrationWarning // Since <ds-suggestion> adds attributes
+            : true, ...rest, children: [selectedItems.map((item) => (jsx("data", { value: item.value, children: renderSelected(item) }, item.value))), children, !!name && (jsx("select", { name: name, multiple: true, hidden: true, id: selectId }))] }) }));
+});
+const SuggestionContext = createContext({
+    handleFilter: () => undefined,
+});
+
+export { Suggestion, SuggestionContext };

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

@@ -0,0 +1,18 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Field as FieldComponent } from '../field/index.js';
+import { Input } from '../input/input.js';
+import { Label } from '../label/label.js';
+
+/**
+ * Switch used to toggle options.
+ *
+ * @example
+ * <Switch label="I agree" value="agree" />
+ */
+const Switch = forwardRef(function Switch({ 'data-size': size, children, className, description, label, position, style, ...rest }, ref) {
+    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

@@ -0,0 +1,51 @@
+'use client';
+import { Table } from './table.js';
+import { TableBody } from './table-body.js';
+import { TableCell } from './table-cell.js';
+import { TableFoot } from './table-foot.js';
+import { TableHead } from './table-head.js';
+import { TableHeaderCell } from './table-header-cell.js';
+import { TableRow } from './table-row.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 TableComponent = Object.assign(Table, {
+    Head: TableHead,
+    Body: TableBody,
+    Row: TableRow,
+    Cell: TableCell,
+    HeaderCell: TableHeaderCell,
+    Foot: TableFoot,
+});
+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 { TableComponent as Table, TableBody, TableCell, TableFoot, TableHead, TableHeaderCell, TableRow };

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

@@ -0,0 +1,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+/**
+ * TableBody component, used to display the body of a table. Renders a native HTML tbody element.
+ *
+ * @example
+ * <TableBody>
+ *   <TableRow>
+ *     <TableCell>John</TableCell>
+ *     <TableCell>25</TableCell>
+ *   </TableRow>
+ * </TableBody>
+ */
+const TableBody = forwardRef(function TableBody(rest, ref) {
+    return jsx("tbody", { ref: ref, ...rest });
+});
+
+export { TableBody };