@digdir/designsystemet-react 1.1.3 → 1.1.4

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

@@ -0,0 +1,31 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef, useContext } from 'react';
+import { Button } from '../button/button.js';
+import { Context } from './dialog-trigger-context.js';
+
+/**
+ * DialogTrigger component, used within a Dialog.TriggerContext to open a dialog.
+ *
+ * @example
+ * <Dialog.TriggerContext>
+ *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *   <Dialog>
+ *     Content
+ *   </Dialog>
+ * </Dialog.TriggerContext>
+ */
+const DialogTrigger = forwardRef(function DialogTrigger({ asChild, ...rest }, ref) {
+    const contextRef = useContext(Context);
+    const Component = asChild ? Slot : Button;
+    const openDialog = () => {
+        /* check if element has `data-modal`, it it has, use `showModal` */
+        contextRef.current?.getAttribute('data-modal') === 'true'
+            ? contextRef.current?.showModal()
+            : contextRef.current?.show();
+    };
+    return (jsx(Component, { "aria-haspopup": 'dialog', onClick: openDialog, ref: ref, ...rest }));
+});
+
+export { DialogTrigger };

package/dist/esm/components/dialog/dialog.js

@@ -0,0 +1,80 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef, useContext, useRef, useEffect } from 'react';
+import { Button } from '../button/button.js';
+import { Context } from './dialog-trigger-context.js';
+import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+
+/**
+ * Dialog component, used to display a dialog dialog.
+ *
+ * @example with TriggerContext
+ * <Dialog.TriggerContext>
+ *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *   <Dialog>
+ *     <Dialog.Block>
+ *       Content
+ *     </Dialog.Block>
+ *   </Dialog>
+ * </Dialog.TriggerContext>
+ *
+ * @example without TriggerContext
+ * const dialogRef = useRef<HTMLDialogElement>(null);
+ *
+ * ...
+ *
+ * <Button onClick={() => dialogRef.current?.showModal()}>Open Dialog</Button>
+ * <Dialog ref={dialogRef}>
+ *   Content
+ * </Dialog>
+ */
+const Dialog = forwardRef(function Dialog({ asChild, children, className, closeButton = 'Lukk dialogvindu', closedby = 'closerequest', modal = true, onClose, open, ...rest }, ref) {
+    const contextRef = useContext(Context);
+    const dialogRef = useRef(null); // This local ref is used to make sure the dialog works without a DialogTriggerContext
+    const Component = asChild ? Slot : 'dialog';
+    const mergedRefs = useMergeRefs([contextRef, ref, dialogRef]);
+    const showProp = modal ? 'showModal' : 'show';
+    useEffect(() => dialogRef.current?.[open ? showProp : 'close'](), [open]); // Toggle open based on prop
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        const handleClosedby = (event) => {
+            const { clientY: y, clientX: x, target } = event;
+            if (event instanceof KeyboardEvent)
+                return (closedby === 'none' &&
+                    event.key === 'Escape' &&
+                    event.preventDefault()); // Skip ESC-key if closedby="none"
+            if (window.getSelection()?.toString())
+                return; // Fix bug where if you select text spanning two divs it thinks you clicked outside
+            if (dialog && target === dialog && closedby === 'any') {
+                const { top, left, right, bottom } = dialog.getBoundingClientRect();
+                const isInDialog = top <= y && y <= bottom && left <= x && x <= right;
+                if (!isInDialog)
+                    dialog?.close(); // Both <dialog> and ::backdrop is considered same event.target
+            }
+        };
+        const handleAutoFocus = () => {
+            const autofocus = dialog?.querySelector('[autofocus]');
+            if (document.activeElement !== autofocus)
+                autofocus?.focus();
+        };
+        dialog?.addEventListener('animationend', handleAutoFocus);
+        dialog?.addEventListener('click', handleClosedby);
+        dialog?.addEventListener('keydown', handleClosedby);
+        return () => {
+            dialog?.removeEventListener('animationend', handleAutoFocus);
+            dialog?.removeEventListener('click', handleClosedby);
+            dialog?.removeEventListener('keydown', handleClosedby);
+        };
+    }, [closedby]);
+    /* handle closing */
+    useEffect(() => {
+        const handleClose = (event) => onClose?.(event);
+        dialogRef.current?.addEventListener('close', handleClose);
+        return () => dialogRef.current?.removeEventListener('close', handleClose);
+    }, [onClose]);
+    return (jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, "data-modal": modal, ...rest, children: [closeButton !== false && (jsx("form", { method: 'dialog', children: jsx(Button, { "aria-label": closeButton, autoFocus: true, "data-color": 'neutral', icon: true, name: 'close', type: 'submit', variant: 'tertiary' }) })), children] }));
+});
+
+export { Dialog };

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

@@ -0,0 +1,29 @@
+'use client';
+import { Dialog as Dialog$1 } from './dialog.js';
+import { DialogBlock } from './dialog-block.js';
+import { DialogTrigger } from './dialog-trigger.js';
+import { DialogTriggerContext } from './dialog-trigger-context.js';
+
+/**
+ * Dialog component, used to display a Dialog dialog.
+ *
+ * @example
+ * <Dialog.TriggerContext>
+ *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *   <Dialog>
+ *     <Dialog.Block>
+ *       Content
+ *     </Dialog.Block>
+ *   </Dialog>
+ * </Dialog.TriggerContext>
+ */
+const Dialog = Object.assign(Dialog$1, {
+    Block: DialogBlock,
+    TriggerContext: DialogTriggerContext,
+    Trigger: DialogTrigger,
+});
+Dialog.Block.displayName = 'Dialog.Block';
+Dialog.TriggerContext.displayName = 'Dialog.TriggerContext';
+Dialog.Trigger.displayName = 'Dialog.Trigger';
+
+export { Dialog, DialogBlock, DialogTrigger, DialogTriggerContext };

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

@@ -0,0 +1,10 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Button } from '../button/button.js';
+
+const DropdownButton = forwardRef(function DropdownButton({ ...rest }, ref) {
+    return jsx(Button, { ref: ref, variant: 'tertiary', ...rest });
+});
+
+export { DropdownButton };

package/dist/esm/components/dropdown/dropdown-heading.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Heading } from '../heading/heading.js';
+
+const DropdownHeading = forwardRef(function DropdownHeading({ className, ...rest }, ref) {
+    return jsx(Heading, { ref: ref, ...rest });
+});
+
+export { DropdownHeading };

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

@@ -0,0 +1,26 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { PopoverTriggerContext } from '../popover/popover-trigger-context.js';
+
+/**
+ * DropdownTriggerContext enables use of the `.Trigger` for the Dropdown component.
+ *
+ * @example
+ * <Dropdown.TriggerContext>
+ *  <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
+ *  <Dropdown>
+ *   <Dropdown.Heading>Heading</Dropdown.Heading>
+ *    <Dropdown.List>
+ *      <Dropdown.Item>
+ *        <Dropdown.Button>Button</Dropdown.Button>
+ *      </Dropdown.Item>
+ *    </Dropdown.List>
+ *  </Dropdown>
+ * </Dropdown.TriggerContext>
+ */
+const DropdownTriggerContext = ({ children, }) => {
+    return jsx(PopoverTriggerContext, { children: children });
+};
+DropdownTriggerContext.displayName = 'DropdownTriggerContext';
+
+export { DropdownTriggerContext };

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

@@ -0,0 +1,10 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { PopoverTrigger } from '../popover/popover-trigger.js';
+
+const DropdownTrigger = forwardRef(function DropdownTrigger({ asChild, ...rest }, ref) {
+    return jsx(PopoverTrigger, { ref: ref, ...rest });
+});
+
+export { DropdownTrigger };

package/dist/esm/components/dropdown/dropdown.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+import { Popover } from '../popover/popover.js';
+
+/**
+ * Dropdown component, used to display a list of options.
+ *
+ * @example with TriggerContext
+ * <Dropdown.TriggerContext>
+ *   <Dropdown.Trigger>Dropdown trigger</Dropdown.Trigger>
+ *   <Dropdown placement='bottom-end'>
+ *     <Dropdown.Heading>Dropdown</Dropdown.Heading>
+ *     <Dropdown.List>
+ *       <Dropdown.Item>
+ *         <Dropdown.Button>Option</Dropdown.Button>
+ *       </Dropdown.Item>
+ *     </Dropdown.List>
+ *   </Dropdown>
+ * </Dropdown.TriggerContext>
+ *
+ * @example without TriggerContext
+ * <Button popovertarget="my-dropdown">Trigger</Button>
+ * <Dropdown id="my-dropdown">
+ *   <Dropdown.Heading>Heading</Dropdown.Heading>
+ *   <Dropdown.List>
+ *     <Dropdown.Item>
+ *       <Dropdown.Button>Item</Dropdown.Button>
+ *     </Dropdown.Item>
+ *   </Dropdown.List>
+ * </Dropdown>
+ */
+const Dropdown = forwardRef(function DropdownContent({ placement = 'bottom-end', className, ...rest }, ref) {
+    return (jsx(Popover, { className: cl('ds-dropdown', className), placement: placement, ref: ref, ...rest }));
+});
+
+export { Dropdown };

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

@@ -0,0 +1,41 @@
+'use client';
+import { Dropdown as Dropdown$1 } from './dropdown.js';
+import { DropdownButton } from './dropdown-button.js';
+import { DropdownHeading } from './dropdown-heading.js';
+import { DropdownItem } from './dropdown-item.js';
+import { DropdownList } from './dropdown-list.js';
+import { DropdownTrigger } from './dropdown-trigger.js';
+import { DropdownTriggerContext } from './dropdown-trigger-context.js';
+
+/**
+ * Dropdown component, used to display a list of options.
+ *
+ * @example
+ * <Dropdown.TriggerContext>
+ *   <Dropdown.Trigger>Dropdown trigger</Dropdown.Trigger>
+ *   <Dropdown placement='bottom-end'>
+ *     <Dropdown.Heading>Dropdown</Dropdown.Heading>
+ *     <Dropdown.List>
+ *       <Dropdown.Item>
+ *         <Dropdown.Button>Option</Dropdown.Button>
+ *       </Dropdown.Item>
+ *     </Dropdown.List>
+ *   </Dropdown>
+ * </Dropdown.TriggerContext>
+ */
+const Dropdown = Object.assign(Dropdown$1, {
+    TriggerContext: DropdownTriggerContext,
+    Heading: DropdownHeading,
+    List: DropdownList,
+    Item: DropdownItem,
+    Button: DropdownButton,
+    Trigger: DropdownTrigger,
+});
+Dropdown.TriggerContext.displayName = 'Dropdown.TriggerContext';
+Dropdown.List.displayName = 'Dropdown.List';
+Dropdown.Heading.displayName = 'Dropdown.Heading';
+Dropdown.Item.displayName = 'Dropdown.Item';
+Dropdown.Button.displayName = 'Dropdown.Button';
+Dropdown.Trigger.displayName = 'Dropdown.Trigger';
+
+export { Dropdown, DropdownButton, DropdownHeading, DropdownItem, DropdownList, DropdownTrigger, DropdownTriggerContext };

package/dist/esm/components/error-summary/error-summary-heading.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext, useEffect } from 'react';
+import { Heading } from '../heading/heading.js';
+import { ErrorSummaryContext } from './error-summary.js';
+
+const ErrorSummaryHeading = forwardRef(function ErrorSummaryHeading({ className, id, ...rest }, ref) {
+    const { headingId, setHeadingId } = useContext(ErrorSummaryContext);
+    useEffect(() => {
+        if (id && headingId !== id)
+            setHeadingId(id);
+    }, [headingId, id, setHeadingId]);
+    return jsx(Heading, { id: headingId, ref: ref, ...rest });
+});
+
+export { ErrorSummaryHeading };

package/dist/esm/components/error-summary/error-summary-item.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import '../list/index.js';
+import { ListItem } from '../list/list-item.js';
+
+/**
+ * ErrorSummaryItem component, used to display an error link in the ErrorSummary.
+ *
+ * @example
+ * <ErrorSummary.Item>
+ *  <ErrorSummary.Link href="#">
+ *    Link to error
+ *  </ErrorSummary.Link>
+ * </ErrorSummary.Item>
+ */
+const ErrorSummaryItem = forwardRef(function ErrorSummaryItem({ ...rest }, ref) {
+    return jsx(ListItem, { ref: ref, ...rest });
+});
+
+export { ErrorSummaryItem };

package/dist/esm/components/error-summary/error-summary-link.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Link } from '../link/link.js';
+
+/**
+ * Link component used in ErrorSummary.
+ */
+const ErrorSummaryLink = forwardRef(function ErrorSummaryLink({ ...rest }, ref) {
+    return jsx(Link, { ref: ref, "data-color": 'neutral', ...rest });
+});
+
+export { ErrorSummaryLink };

package/dist/esm/components/error-summary/error-summary-list.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { List } from '../list/index.js';
+
+const ErrorSummaryList = forwardRef(function ErrorSummaryList({ ...rest }, ref) {
+    return jsx(List.Unordered, { ...rest, ref: ref });
+});
+
+export { ErrorSummaryList };

package/dist/esm/components/error-summary/index.js

@@ -0,0 +1,35 @@
+'use client';
+import { ErrorSummary as ErrorSummary$1 } from './error-summary.js';
+import { ErrorSummaryHeading } from './error-summary-heading.js';
+import { ErrorSummaryItem } from './error-summary-item.js';
+import { ErrorSummaryLink } from './error-summary-link.js';
+import { ErrorSummaryList } from './error-summary-list.js';
+
+/**
+ * ErrorSummary component, used to display a list of errors.
+ *
+ * @example
+ * <ErrorSummary>
+ *   <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
+ *   <ErrorSummary.List>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 1</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 2</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *   </ErrorSummary.List>
+ * </ErrorSummary>
+ */
+const ErrorSummary = Object.assign(ErrorSummary$1, {
+    Heading: ErrorSummaryHeading,
+    Item: ErrorSummaryItem,
+    List: ErrorSummaryList,
+    Link: ErrorSummaryLink,
+});
+ErrorSummary.Item.displayName = 'ErrorSummary.Item';
+ErrorSummary.Heading.displayName = 'ErrorSummary.Heading';
+ErrorSummary.List.displayName = 'ErrorSummary.List';
+ErrorSummary.Link.displayName = 'ErrorSummary.Link';
+
+export { ErrorSummary, ErrorSummaryHeading, ErrorSummaryItem, ErrorSummaryLink, ErrorSummaryList };

package/dist/esm/components/field/field-counter.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useEffect } from 'react';
+import { Paragraph } from '../paragraph/paragraph.js';
+import { ValidationMessage } from '../validation-message/validation-message.js';
+import { isInputLike } from './field-observer.js';
+
+const label = (text, count) => text.replace('%d', Math.abs(count).toString());
+/**
+ * FieldCounter component, used to display a counter for a form field.
+ *
+ * @example
+ * <Field>
+ *   <Input />
+ *   <Field.Counter limit={100} under='%d tegn igjen' over='%d tegn for mye' />
+ * </Field>
+ */
+const FieldCounter = forwardRef(function FieldCounter({ limit, under = '%d tegn igjen', over = '%d tegn for mye', ...rest }, ref) {
+    const [count, setCount] = useState(0);
+    const counterRef = useRef(null);
+    const hasExceededLimit = count > limit;
+    const remainder = limit - count;
+    useEffect(() => {
+        const field = counterRef.current?.closest('.ds-field');
+        const input = Array.from(field?.getElementsByTagName('*') || []).find(isInputLike);
+        const onInput = ({ target }) => {
+            if (isInputLike(target))
+                setCount(target.value.length);
+        };
+        if (input)
+            onInput({ target: input }); // Initial setup
+        field?.addEventListener('input', onInput);
+        return () => field?.removeEventListener('input', onInput);
+    }, [setCount]);
+    return (jsxs(Fragment, { children: [jsx("div", { "data-field": 'description', className: 'ds-sr-only', "aria-live": 'polite', ref: counterRef, children: hasExceededLimit && label(over, remainder) }), hasExceededLimit ? (jsx(ValidationMessage, { ref: ref, ...rest, children: label(over, remainder) })) : (jsx(Paragraph, { ref: ref, ...rest, "data-field": 'validation', children: label(under, remainder) }))] }));
+});
+
+export { FieldCounter };

package/dist/esm/components/field/field.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, useRef, useEffect } from 'react';
+import { fieldObserver } from './field-observer.js';
+import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+
+/**
+ * Field component, used to wrap a form field.
+ *
+ * @example
+ * <Field>
+ *   <Label>Kort beskrivelse</Label>
+ *   <Field.Description>Beskrivelse</Field.Description>
+ *   <Input />
+ *   <ValidationMessage>Feilmelding</ValidationMessage>
+ * </Field>
+ */
+const Field = forwardRef(function Field({ className, position, asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : 'div';
+    const fieldRef = useRef(null);
+    const mergedRefs = useMergeRefs([fieldRef, ref]);
+    useEffect(() => fieldObserver(fieldRef.current), []);
+    return (jsx(Component, { className: cl('ds-field', className), "data-position": position, ref: mergedRefs, ...rest }));
+});
+
+export { Field };

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

@@ -0,0 +1,29 @@
+'use client';
+import { Field as Field$1 } from './field.js';
+import { FieldAffix, FieldAffixes } from './field-affix.js';
+import { FieldCounter } from './field-counter.js';
+import { FieldDescription } from './field-description.js';
+
+/**
+ * Field component, used to wrap a form field.
+ *
+ * @example
+ * <Field>
+ *   <Label>Kort beskrivelse</Label>
+ *   <Field.Description>Beskrivelse</Field.Description>
+ *   <Input />
+ *   <ValidationMessage>Feilmelding</ValidationMessage>
+ * </Field>
+ */
+const Field = Object.assign(Field$1, {
+    Description: FieldDescription,
+    Affixes: FieldAffixes,
+    Affix: FieldAffix,
+    Counter: FieldCounter,
+});
+Field.Description.displayName = 'Field.Description';
+Field.Affixes.displayName = 'Field.Affixes';
+Field.Affix.displayName = 'Field.Affix';
+Field.Counter.displayName = 'Field.Counter';
+
+export { Field, FieldAffix, FieldAffixes, FieldCounter, FieldDescription };

package/dist/esm/components/fieldset/fieldset-description.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Paragraph } from '../paragraph/paragraph.js';
+
+/**
+ * FieldsetDescription component, used to display a description for a fieldset.
+ *
+ * @example
+ * <Fieldset.Description>
+ *   Gi en kort beskrivelse i begge feltene
+ * </Fieldset.Description>
+ */
+const FieldsetDescription = forwardRef(function FieldsetDescription(rest, ref) {
+    return jsx(Paragraph, { ref: ref, ...rest });
+});
+
+export { FieldsetDescription };

package/dist/esm/components/fieldset/fieldset-legend.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Label } from '../label/label.js';
+
+/**
+ * FieldsetLegend component, used to display a legend for a fieldset.
+ *
+ * @example
+ * <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+ */
+const FieldsetLegend = forwardRef(function FieldsetLegend(rest, ref) {
+    return (jsx(Label, { asChild: true, children: jsx("legend", { ref: ref, ...rest }) }));
+});
+
+export { FieldsetLegend };

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

@@ -0,0 +1,28 @@
+'use client';
+import { Fieldset as Fieldset$1 } from './fieldset.js';
+import { FieldsetDescription } from './fieldset-description.js';
+import { FieldsetLegend } from './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$1, {
+    Legend: FieldsetLegend,
+    Description: FieldsetDescription,
+});
+Fieldset.Legend.displayName = 'Fieldset.Legend';
+Fieldset.Description.displayName = 'Fieldset.Description';
+
+export { Fieldset, FieldsetDescription, FieldsetLegend };

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

@@ -0,0 +1,14 @@
+'use client';
+import { ListItem } from './list-item.js';
+import { ListUnordered, ListOrdered } from './lists.js';
+
+const List = {
+    Item: ListItem,
+    Ordered: ListOrdered,
+    Unordered: ListUnordered,
+};
+List.Item.displayName = 'List.Item';
+List.Ordered.displayName = 'List.Ordered';
+List.Unordered.displayName = 'List.Unordered';
+
+export { List, ListItem, ListOrdered, ListUnordered };

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

@@ -0,0 +1,34 @@
+'use client';
+import { Pagination as Pagination$1 } from './pagination.js';
+import { PaginationButton } from './pagination-button.js';
+import { PaginationItem } from './pagination-item.js';
+import { PaginationList } from './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$1, {
+    List: PaginationList,
+    Item: PaginationItem,
+    Button: PaginationButton,
+});
+Pagination.List.displayName = 'Pagination.List';
+Pagination.Item.displayName = 'Pagination.Item';
+Pagination.Button.displayName = 'Pagination.Button';
+
+export { Pagination, PaginationButton, PaginationItem, PaginationList };

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

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Button } from '../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 = forwardRef(function PaginationButton(rest, ref) {
+    return jsx(Button, { ref: ref, ...rest });
+});
+
+export { PaginationButton };

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

@@ -0,0 +1,24 @@
+'use client';
+import { Popover as Popover$1 } from './popover.js';
+import { PopoverTrigger } from './popover-trigger.js';
+import { PopoverTriggerContext } from './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$1, {
+    TriggerContext: PopoverTriggerContext,
+    Trigger: PopoverTrigger,
+});
+Popover.TriggerContext.displayName = 'Popover.TriggerContext';
+Popover.Trigger.displayName = 'Popover.Trigger';
+
+export { Popover, PopoverTrigger, PopoverTriggerContext };