@digdir/designsystemet-react 1.1.2 → 1.1.4

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

@@ -0,0 +1,32 @@
+'use client';
+'use strict';
+
+var fieldset = require('./fieldset.js');
+var fieldsetDescription = require('./fieldset-description.js');
+var fieldsetLegend = require('./fieldset-legend.js');
+
+/**
+ * Fieldset component, used to wrap a form field.
+ *
+ * @example
+ * <Fieldset>
+ *   <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+ *   <Fieldset.Description>
+ *     Gi en kort beskrivelse i begge feltene
+ *   </Fieldset.Description>
+ *   <Field>
+ *     <Label>Kort beskrivelse</Label>
+ *     <Input />
+ *   </Field>
+ * </Fieldset>
+ */
+const Fieldset = Object.assign(fieldset.Fieldset, {
+    Legend: fieldsetLegend.FieldsetLegend,
+    Description: fieldsetDescription.FieldsetDescription,
+});
+Fieldset.Legend.displayName = 'Fieldset.Legend';
+Fieldset.Description.displayName = 'Fieldset.Description';
+
+exports.FieldsetDescription = fieldsetDescription.FieldsetDescription;
+exports.FieldsetLegend = fieldsetLegend.FieldsetLegend;
+exports.Fieldset = Fieldset;

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

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+var listItem = require('./list-item.js');
+var lists = require('./lists.js');
+
+const List = {
+    Item: listItem.ListItem,
+    Ordered: lists.ListOrdered,
+    Unordered: lists.ListUnordered,
+};
+List.Item.displayName = 'List.Item';
+List.Ordered.displayName = 'List.Ordered';
+List.Unordered.displayName = 'List.Unordered';
+
+exports.ListItem = listItem.ListItem;
+exports.ListOrdered = lists.ListOrdered;
+exports.ListUnordered = lists.ListUnordered;
+exports.List = List;

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

@@ -0,0 +1,39 @@
+'use client';
+'use strict';
+
+var pagination = require('./pagination.js');
+var paginationButton = require('./pagination-button.js');
+var paginationItem = require('./pagination-item.js');
+var paginationList = require('./pagination-list.js');
+
+/**
+ * Pagination component, used to navigate through a list of items.
+ *
+ * @example
+ * <Pagination>
+ *   <Pagination.List>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 1'>1</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 2'>2</Pagination.Button>
+ *     </Pagination.Item>
+ *   </Pagination.List>
+ * </Pagination>
+ */
+const Pagination = Object.assign(pagination.Pagination, {
+    List: paginationList.PaginationList,
+    Item: paginationItem.PaginationItem,
+    Button: paginationButton.PaginationButton,
+});
+Pagination.List.displayName = 'Pagination.List';
+Pagination.Item.displayName = 'Pagination.Item';
+Pagination.Button.displayName = 'Pagination.Button';
+
+exports.PaginationButton = paginationButton.PaginationButton;
+exports.PaginationItem = paginationItem.PaginationItem;
+exports.PaginationList = paginationList.PaginationList;
+exports.Pagination = Pagination;

package/dist/cjs/components/pagination/pagination-button.js

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var button = require('../button/button.js');
+
+/**
+ * PaginationButton component, use within a Pagination.Item.
+ *
+ * @example
+ * <Pagination.Item>
+ *   <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ * </Pagination.Item>
+ */
+const PaginationButton = react.forwardRef(function PaginationButton(rest, ref) {
+    return jsxRuntime.jsx(button.Button, { ref: ref, ...rest });
+});
+
+exports.PaginationButton = PaginationButton;

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

@@ -0,0 +1,28 @@
+'use client';
+'use strict';
+
+var popover = require('./popover.js');
+var popoverTrigger = require('./popover-trigger.js');
+var popoverTriggerContext = require('./popover-trigger-context.js');
+
+/**
+ * Popover component, used to display content in a popover over an element.
+ *
+ * @example
+ * <Popover.TriggerContext>
+ *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ */
+const Popover = Object.assign(popover.Popover, {
+    TriggerContext: popoverTriggerContext.PopoverTriggerContext,
+    Trigger: popoverTrigger.PopoverTrigger,
+});
+Popover.TriggerContext.displayName = 'Popover.TriggerContext';
+Popover.Trigger.displayName = 'Popover.Trigger';
+
+exports.PopoverTrigger = popoverTrigger.PopoverTrigger;
+exports.PopoverTriggerContext = popoverTriggerContext.PopoverTriggerContext;
+exports.Popover = Popover;

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

@@ -0,0 +1,45 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
+var button = require('../button/button.js');
+var popoverTriggerContext = require('./popover-trigger-context.js');
+
+/**
+ * PopoverTrigger component, used to trigger a popover.
+ *
+ * @example
+ * <Popover.TriggerContext>
+ *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ *
+ * @example inline
+ * <Popover.TriggerContext>
+ *   <Paragraph>
+ *    We can use it <Popover.Trigger inline={true}>inline</Popover.Trigger>.
+ *   </Paragraph>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ */
+const PopoverTrigger = react.forwardRef(function PopoverTrigger({ id, inline, asChild, ...rest }, ref) {
+    const { popoverId } = react.useContext(popoverTriggerContext.Context);
+    const Component = asChild ? reactSlot.Slot : inline ? 'button' : button.Button;
+    const popoverProps = Object.assign({
+        [react.version.startsWith('19') ? 'popoverTarget' : 'popovertarget']: popoverId,
+        ...(inline
+            ? {
+                'data-popover': 'inline',
+            }
+            : {}),
+    }, rest);
+    return jsxRuntime.jsx(Component, { ref: ref, ...popoverProps });
+});
+
+exports.PopoverTrigger = PopoverTrigger;

package/dist/cjs/components/popover/popover.js

@@ -0,0 +1,133 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var dom = require('@floating-ui/dom');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+var popoverTriggerContext = require('./popover-trigger-context.js');
+var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
+
+/**
+ * Popover component, used to display content in a popover over an element.
+ *
+ * @example with TriggerContext
+ * <Popover.TriggerContext>
+ *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ *
+ * @example without TriggerContext
+ * <Button popovertarget="my-popover">Open Popover</Button>
+ * <Popover id="my-popover">
+ *   Content
+ * </Popover>
+ */
+const Popover = react.forwardRef(function Popover({ id, className, onClose, onOpen, open, variant = 'default', placement = 'top', autoPlacement = true, asChild = false, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'div';
+    const popoverRef = react.useRef(null);
+    const mergedRefs = useMergeRefs.useMergeRefs([popoverRef, ref]);
+    const { popoverId, setPopoverId } = react.useContext(popoverTriggerContext.Context);
+    const [internalOpen, setInternalOpen] = react.useState(false);
+    const controlledOpen = open ?? internalOpen;
+    // NOTE: This code is purely to add React controlled component ability to Popover API
+    react.useEffect(() => {
+        const popover = popoverRef.current;
+        const handleClick = (event) => {
+            const el = event.target;
+            const isTrigger = el?.closest?.(`[popovertarget="${popover?.id}"]`);
+            const isOutside = !isTrigger && !popover?.contains(el);
+            if (isTrigger) {
+                event.preventDefault(); // Prevent native Popover API
+                setInternalOpen((open) => !open);
+                onOpen?.();
+            }
+            if (isOutside) {
+                setInternalOpen(false);
+                onClose?.();
+            }
+        };
+        const handleKeydown = (event) => {
+            if (event.key !== 'Escape' || !controlledOpen)
+                return;
+            event.preventDefault(); // Prevent closing fullscreen in Safari
+            setInternalOpen(false);
+            onClose?.();
+        };
+        popover?.togglePopover?.(controlledOpen);
+        document.addEventListener('click', handleClick, true); // Use capture to execute before React event API
+        document.addEventListener('keydown', handleKeydown);
+        return () => {
+            document.removeEventListener('click', handleClick, true);
+            document.removeEventListener('keydown', handleKeydown);
+        };
+    }, [controlledOpen]);
+    // Position with floating-ui
+    react.useEffect(() => {
+        const popover = popoverRef.current;
+        const trigger = document.querySelector(`[popovertarget="${popover?.id}"]`);
+        if (popover && trigger && controlledOpen)
+            return dom.autoUpdate(trigger, popover, () => {
+                dom.computePosition(trigger, popover, {
+                    placement,
+                    strategy: 'fixed',
+                    middleware: [
+                        dom.offset((data) => {
+                            // get pseudo element arrow size
+                            const styles = getComputedStyle(data.elements.floating, '::before');
+                            return parseFloat(styles.height);
+                        }),
+                        ...(autoPlacement
+                            ? [dom.flip({ fallbackAxisSideDirection: 'start' }), dom.shift()]
+                            : []),
+                        arrowPseudoElement,
+                    ],
+                }).then(({ x, y }) => {
+                    popover.style.translate = `${x}px ${y}px`;
+                });
+            });
+    }, [controlledOpen, placement, id, autoPlacement]);
+    // Update context with id
+    react.useEffect(() => {
+        if (id)
+            setPopoverId?.(id);
+    }, [id]);
+    return (jsxRuntime.jsx(Component, { className: cl('ds-popover', className), id: id || popoverId, popover: 'manual', "data-variant": variant, ref: mergedRefs, ...rest }));
+});
+const arrowPseudoElement = {
+    name: 'ArrowPseudoElement',
+    fn(data) {
+        const { elements, rects, placement } = data;
+        let arrowX = `${Math.round(rects.reference.width / 2 + rects.reference.x - data.x)}px`;
+        let arrowY = `${Math.round(rects.reference.height / 2 + rects.reference.y - data.y)}px`;
+        if (rects.reference.width > rects.floating.width) {
+            arrowX = `${Math.round(rects.floating.width / 2)}px`;
+        }
+        if (rects.reference.height > rects.floating.height) {
+            arrowY = `${Math.round(rects.floating.height / 2)}px`;
+        }
+        switch (placement.split('-')[0]) {
+            case 'top':
+                arrowY = '100%';
+                break;
+            case 'right':
+                arrowX = '0';
+                break;
+            case 'bottom':
+                arrowY = '0';
+                break;
+            case 'left':
+                arrowX = '100%';
+                break;
+        }
+        elements.floating.setAttribute('data-placement', placement.split('-')[0]); // We only need top/left/right/bottom
+        elements.floating.style.setProperty('--ds-popover-arrow-x', arrowX);
+        elements.floating.style.setProperty('--ds-popover-arrow-y', arrowY);
+        return data;
+    },
+};
+
+exports.Popover = Popover;

package/dist/cjs/components/radio/radio.js

@@ -0,0 +1,21 @@
+'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');
+var validationMessage = require('../validation-message/validation-message.js');
+
+/**
+ * Radio used to select multiple options.
+ *
+ * @example
+ * <Radio label="I agree" value="agree" />
+ */
+const Radio = react.forwardRef(function Radio({ 'data-size': size, className, style, children, label: label$1, description, error, ...rest }, ref) {
+    return (jsxRuntime.jsxs(index.Field, { "data-size": size, className: className, style: style, children: [jsxRuntime.jsx(input.Input, { type: 'radio', ref: ref, ...rest }), !!label$1 && jsxRuntime.jsx(label.Label, { weight: 'regular', children: label$1 }), !!description && jsxRuntime.jsx("div", { "data-field": 'description', children: description }), !!error && jsxRuntime.jsx(validationMessage.ValidationMessage, { children: error })] }));
+});
+
+exports.Radio = Radio;

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

@@ -0,0 +1,37 @@
+'use client';
+'use strict';
+
+var search = require('./search.js');
+var searchButton = require('./search-button.js');
+var searchClear = require('./search-clear.js');
+var searchInput = require('./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 Search = Object.assign(search.Search, {
+    Clear: searchClear.SearchClear,
+    Button: searchButton.SearchButton,
+    Input: searchInput.SearchInput,
+});
+Search.Clear.displayName = 'Search.Clear';
+Search.Button.displayName = 'Search.Button';
+Search.Input.displayName = 'Search.Input';
+
+exports.SearchButton = searchButton.SearchButton;
+exports.SearchClear = searchClear.SearchClear;
+exports.SearchInput = searchInput.SearchInput;
+exports.Search = Search;

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

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

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

@@ -0,0 +1,37 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var button = require('../button/button.js');
+var utilities = require('../Combobox/utilities.js');
+
+/**
+ * SearchClear component, used to display a clear button 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;
+        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();
+        utilities.setReactInputValue(input, '');
+        input.focus();
+        onClick?.(e);
+    };
+    return (jsxRuntime.jsx(button.Button, { ref: ref, variant: 'tertiary', type: 'reset', "aria-label": label, onClick: handleClear, icon: true, ...rest }));
+});
+
+exports.SearchClear = SearchClear;

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

@@ -0,0 +1,22 @@
+'use client';
+'use strict';
+
+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 */
+        placeholder: '', ...rest }));
+});
+
+exports.SearchInput = SearchInput;

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

@@ -0,0 +1,26 @@
+'use client';
+'use strict';
+
+var select = require('./select.js');
+var selectOptgroup = require('./select-optgroup.js');
+var selectOption = require('./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 Select = Object.assign(select.Select, {
+    Option: selectOption.SelectOption,
+    Optgroup: selectOptgroup.SelectOptgroup,
+});
+Select.Option.displayName = 'Select.Option';
+Select.Optgroup.displayName = 'Select.Optgroup';
+
+exports.SelectOptgroup = selectOptgroup.SelectOptgroup;
+exports.SelectOption = selectOption.SelectOption;
+exports.Select = Select;

package/dist/cjs/components/skeleton/skeleton.js

@@ -0,0 +1,27 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+var useSynchronizedAnimation = require('../../utilities/hooks/use-synchronized-animation/use-synchronized-animation.js');
+var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.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 = react.forwardRef(function Skeleton({ asChild, className, height, style, variant = 'rectangle', width, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'span';
+    const isText = variant === 'text';
+    const animationRef = useSynchronizedAnimation.useSynchronizedAnimation('ds-skeleton-opacity-fade');
+    const mergedRefs = useMergeRefs.useMergeRefs([animationRef, ref]);
+    return (jsxRuntime.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 }));
+});
+
+exports.Skeleton = Skeleton;

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

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+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-skip-link', className), ...rest, ref: ref, children: children }));
+});
+
+exports.SkipLink = SkipLink;

package/dist/cjs/components/spinner/spinner.js

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+var useSynchronizedAnimation = require('../../utilities/hooks/use-synchronized-animation/use-synchronized-animation.js');
+var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
+
+/**
+ * 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');
+    const mergedRefs = useMergeRefs.useMergeRefs([svgRef, ref]);
+    return (jsxRuntime.jsxs("svg", { "aria-label": ariaLabel, className: cl('ds-spinner', className), ref: mergedRefs, role: 'img', viewBox: '0 0 50 50', ...rest, children: [jsxRuntime.jsx("circle", { className: cl('ds-spinner__background'), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5' }), jsxRuntime.jsx("circle", { className: cl(`ds-spinner__circle`), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5', ref: strokeRef })] }));
+});
+
+exports.Spinner = Spinner;

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

@@ -0,0 +1,48 @@
+'use client';
+'use strict';
+
+var suggestion = require('./suggestion.js');
+var suggestionChips = require('./suggestion-chips.js');
+var suggestionClear = require('./suggestion-clear.js');
+var suggestionEmpty = require('./suggestion-empty.js');
+var suggestionInput = require('./suggestion-input.js');
+var suggestionList = require('./suggestion-list.js');
+var suggestionOption = require('./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.Suggestion, {
+    Chips: suggestionChips.SuggestionChips,
+    List: suggestionList.SuggestionList,
+    Input: suggestionInput.SuggestionInput,
+    Empty: suggestionEmpty.SuggestionEmpty,
+    Option: suggestionOption.SuggestionOption,
+    Clear: suggestionClear.SuggestionClear,
+});
+EXPERIMENTAL_Suggestion.displayName = 'EXPERIMENTAL_Suggestion';
+EXPERIMENTAL_Suggestion.Chips.displayName = 'EXPERIMENTAL_Suggestion.Chips';
+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_SuggestionChips = suggestionChips.SuggestionChips;
+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/suggestion/suggestion-chips.js

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var index = require('../chip/index.js');
+var suggestion = require('./suggestion.js');
+
+const SuggestionChips = ({ render = ({ label }) => label, }) => {
+    const { selectedItems = [] } = react.useContext(suggestion.SuggestionContext);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: selectedItems.map((item) => (jsxRuntime.jsx(index.Chip.Removable, { value: item.value, asChild: true, children: jsxRuntime.jsx("data", { children: render(item) }) }, item.value))) }));
+};
+SuggestionChips.displayName = 'SuggestionChips';
+
+exports.SuggestionChips = SuggestionChips;

package/dist/cjs/components/suggestion/suggestion-clear.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;