@uppsala-designsystem/ui 1.5.0

package/dist/esm/components/ErrorSummary/ErrorSummaryLink.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/ErrorSummary/ErrorSummaryList.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/ErrorSummary/index.js

@@ -0,0 +1,35 @@
+'use client';
+import { ErrorSummary as ErrorSummary$1 } from './ErrorSummary.js';
+import { ErrorSummaryHeading } from './ErrorSummaryHeading.js';
+import { ErrorSummaryItem } from './ErrorSummaryItem.js';
+import { ErrorSummaryLink } from './ErrorSummaryLink.js';
+import { ErrorSummaryList } from './ErrorSummaryList.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.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useMergeRefs } from '@floating-ui/react';
+import cl from 'clsx/lite';
+import { forwardRef, useRef, useEffect } from 'react';
+import { fieldObserver } from './fieldObserver.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, ...rest }, ref) {
+    const fieldRef = useRef(null);
+    const mergedRefs = useMergeRefs([fieldRef, ref]);
+    useEffect(() => fieldObserver(fieldRef.current), []);
+    return (jsx("div", { className: cl('ds-field', className), "data-position": position, ref: mergedRefs, ...rest }));
+});
+
+export { Field };

package/dist/esm/components/Field/FieldAffix.js

@@ -0,0 +1,34 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * FieldAffixes component, used to wrap a form field.
+ *
+ * @example
+ * <Field.Affixes>
+ *   <Field.Affix>NOK</Field.Affix>
+ *   <Input />
+ *   <Field.Affix>pr. mnd.</Field.Affix>
+ * </Field.Affixes>
+ */
+const FieldAffixes = forwardRef(function FieldAffixes({ className, ...rest }, ref) {
+    return (jsx("div", { className: cl('ds-field-affixes', className), ref: ref, ...rest }));
+});
+/**
+ * FieldAffix component, used to wrap a form field.
+ * Use together with Field.Affixes.
+ *
+ * @example
+ * <Field.Affixes>
+ *   <Field.Affix>NOK</Field.Affix>
+ *   <Input />
+ *   <Field.Affix>pr. mnd.</Field.Affix>
+ * </Field.Affixes>
+ */
+const FieldAffix = forwardRef(function FieldAffix({ className, ...rest }, ref) {
+    return (jsx("span", { className: cl('ds-field-affix', className), "aria-hidden": 'true', ref: ref, ...rest }));
+});
+
+export { FieldAffix, FieldAffixes };

package/dist/esm/components/Field/FieldCounter.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useEffect } from 'react';
+import { isInputLike } from './fieldObserver.js';
+import { ValidationMessage } from '../ValidationMessage/ValidationMessage.js';
+import { Paragraph } from '../Paragraph/Paragraph.js';
+
+const label = (text, count) => text.replace("%d", Math.abs(count).toString());
+/**
+ * FieldCounter-komponent, används för att visa en räknare för ett formulärfält.
+ *
+ * @example
+ * <Field>
+ *   <Input />
+ *   <Field.Counter limit={100} under='%d tecken kvar' over='%d tecken för mycket' />
+ * </Field>
+ */
+const FieldCounter = forwardRef(function FieldCounter({ limit, under = "%d tecken kvar", over = "%d tecken för mycket", ...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 }); // Initiering
+        field?.addEventListener("input", onInput);
+        return () => field?.removeEventListener("input", onInput);
+    }, []);
+    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/FieldDescription.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+const FieldDescription = forwardRef(function FieldDescription(rest, ref) {
+    return jsx("div", { "data-field": 'description', ref: ref, ...rest });
+});
+
+export { FieldDescription };

package/dist/esm/components/Field/fieldObserver.js

@@ -0,0 +1,97 @@
+'use client';
+function fieldObserver(fieldElement) {
+    if (!fieldElement)
+        return;
+    const elements = new Map();
+    const uuid = `:${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;
+    let input = null;
+    let describedby = '';
+    const process = (mutations) => {
+        const changed = [];
+        const removed = [];
+        // Merge MutationRecords
+        for (const mutation of mutations) {
+            if (mutation.attributeName)
+                changed.push(mutation.target ?? fieldElement);
+            changed.push(...(mutation.addedNodes || []));
+            removed.push(...(mutation.removedNodes || []));
+        }
+        // Register elements
+        for (const el of changed) {
+            if (!isElement(el))
+                continue;
+            if (isLabel(el))
+                elements.set(el, el.htmlFor);
+            else if (el.hasAttribute('data-field'))
+                elements.set(el, el.id);
+            else if (isInputLike(el)) {
+                input = el;
+                describedby = el.getAttribute('aria-describedby') || '';
+            }
+        }
+        // Reset removed elements
+        for (const el of removed) {
+            if (!isElement(el))
+                continue;
+            if (input === el)
+                input = null;
+            if (elements.has(el)) {
+                setAttr(el, 'aria-disabled', null); // Reset disabled state
+                setAttr(el, isLabel(el) ? 'for' : 'id', elements.get(el));
+                elements.delete(el);
+            }
+        }
+        // Connect elements
+        const describedbyIds = [describedby]; // Keep original aria-describedby
+        const inputId = input?.id || uuid;
+        const isDisabled = input?.hasAttribute('disabled') ||
+            input?.getAttribute('aria-disabled') === 'true';
+        for (const [el, value] of elements) {
+            const descriptionType = el.getAttribute('data-field');
+            const id = descriptionType ? `${inputId}:${descriptionType}` : inputId;
+            setAttr(el, 'aria-disabled', isDisabled ? 'true' : null); // Forward inputs disabled state to related elements to make axe tests happy
+            if (!value)
+                setAttr(el, isLabel(el) ? 'for' : 'id', id); // Ensure we have a value
+            if (descriptionType === 'validation')
+                describedbyIds.unshift(el.id); // Validations to the front
+            else if (descriptionType)
+                describedbyIds.push(el.id); // Other descriptions to the back
+        }
+        setAttr(input, 'id', inputId);
+        setAttr(input, 'aria-describedby', describedbyIds.join(' ').trim());
+    };
+    const observer = createOptimizedMutationObserver(process);
+    observer.observe(fieldElement, {
+        attributeFilter: ['id', 'for', 'aria-describedby'],
+        attributes: true,
+        childList: true,
+        subtree: true,
+    });
+    process([{ addedNodes: fieldElement.querySelectorAll('*') }]); // Initial setup
+    observer.takeRecords(); // Clear initial setup queue
+    return () => observer.disconnect();
+}
+// Utilities
+const isElement = (node) => node instanceof Element;
+const isLabel = (node) => node instanceof HTMLLabelElement;
+const isInputLike = (node) => node instanceof HTMLElement &&
+    'validity' in node &&
+    !(node instanceof HTMLButtonElement); // Matches input, textarea, select and form accosiated custom elements
+const setAttr = (el, name, value) => value ? el?.setAttribute(name, value) : el?.removeAttribute(name);
+// Speed up MutationObserver by debouncing, clearing internal queue after changes and only running when page is visible
+function createOptimizedMutationObserver(callback) {
+    const queue = [];
+    const observer = new MutationObserver((mutations) => {
+        if (!queue.length)
+            requestAnimationFrame(process);
+        queue.push(...mutations);
+    });
+    const process = () => {
+        callback(queue, observer);
+        queue.length = 0; // Reset queue
+        observer.takeRecords(); // Clear queue due to DOM changes in callback
+    };
+    return observer;
+}
+
+export { fieldObserver, isElement, isInputLike, isLabel };

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 './FieldAffix.js';
+import { FieldCounter } from './FieldCounter.js';
+import { FieldDescription } from './FieldDescription.js';
+
+/**
+ * Field component, used to wrap a form field.
+ *
+ * @example
+ * <Field data-my-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.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Fieldset component, used to wrap a form field. Uses native `fieldset` element.
+ *
+ * @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 = forwardRef(function Fieldset({ className, ...rest }, ref) {
+    return (jsx("fieldset", { className: cl('ds-fieldset', className), ref: ref, ...rest }));
+});
+
+export { Fieldset };

package/dist/esm/components/Fieldset/FieldsetDescription.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/FieldsetLegend.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 './FieldsetDescription.js';
+import { FieldsetLegend } from './FieldsetLegend.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/Heading/Heading.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Use `Heading` to render h1-6 elements with heading text styles.
+ *
+ * @example
+ * <Heading data-size='lg' level={2}>Heading</Heading>
+ */
+const Heading = forwardRef(function Heading({ level = 2, className, asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : `h${level}`;
+    return (jsx(Component, { className: cl("ds-heading", className), ref: ref, ...rest }));
+});
+
+export { Heading };

package/dist/esm/components/InfoCard/InfoCard.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * InfoCards are used to inform users about summarized information.
+ *
+ * @example
+ * <InfoCard data-color='brand1' icon={<SomeIcon />} >
+ * 	<Heading level={2} data-size="lg">InfoCard Title</Heading>
+ * 	<Paragraph>This is an InfoCard component with brand1 color.</Paragraph>
+ * </InfoCard>
+ */
+const InfoCard = forwardRef(function InfoCard({ icon, "data-color": color, className, children, ...rest }, ref) {
+    return (jsx("div", { className: cl("ds-infocard", className), "data-color": color, ref: ref, ...rest, children: jsxs("div", { className: "ds-infocard__container", children: [icon && jsx(BoundingIcon, { Icon: icon }), jsx("div", { className: "ds-infocard__content", children: children })] }) }));
+});
+const BoundingIcon = ({ Icon }) => {
+    return (jsx("div", { className: "ds-bounding-icon", children: jsx("div", { className: "ds-bounding-icon__icon", children: Icon }) }));
+};
+
+export { InfoCard };

package/dist/esm/components/Input/Input.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Input renders a native `input` element.
+ *
+ * @example
+ * <Input />
+ */
+const Input = forwardRef(function Input({ type = 'text', className, onChange, onClick, ...rest }, ref) {
+    return (jsx("input", { className: cl(`ds-input`, className), ref: ref, type: type, onChange: (event) => rest.readOnly || onChange?.(event), onClick: (event) => {
+            if (rest.readOnly)
+                event.preventDefault(); // Make readonly work for checkbox / radio / switch
+            onClick?.(event);
+        }, ...rest }));
+});
+
+export { Input };

package/dist/esm/components/Label/Label.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Use `Label` for labels. Renders a native `label` element.
+ *
+ * @example
+ * <Label data-size='lg' weight='medium'>Label</Label>
+ */
+const Label = forwardRef(function Label({ className, weight = "semibold", asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : "label";
+    return (jsx(Component, { ref: ref, className: cl("ds-label", className), "data-weight": weight, ...rest }));
+});
+
+export { Label };

package/dist/esm/components/Link/Link.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Link component, renders a native `a` element.
+ *
+ * @example
+ * <Link href='#'>Link</Link>
+ */
+const Link = forwardRef(({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? Slot : 'a';
+    return (jsx(Component, { className: cl('ds-link', className), ref: ref, ...rest }));
+});
+Link.displayName = 'Link';
+
+export { Link };

package/dist/esm/components/List/ListItem.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+
+const ListItem = forwardRef(function ListItem({ asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : 'li';
+    return jsx(Component, { ...rest, ref: ref });
+});
+
+export { ListItem };

package/dist/esm/components/List/Lists.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+const render = (tagName, { asChild, className, ...rest }, ref) => {
+    const Component = asChild ? Slot : tagName;
+    return jsx(Component, { className: cl(`ds-list`, className), ref: ref, ...rest });
+};
+/**
+ * ListUnordered component, used to display a list of items.
+ * Renders a native `ul` element.
+ *
+ * @example
+ * <List.Unordered>
+ *   <List.Item>Item 1</List.Item>
+ *   <List.Item>Item 2</List.Item>
+ * </List.Unordered>
+ */
+const ListUnordered = forwardRef(function ListUnordered(props, ref) {
+    return render('ul', props, ref);
+});
+/**
+ * ListOrdered component, used to display a list of items.
+ * Renders a native `ol` element.
+ *
+ * @example
+ * <List.Ordered>
+ *   <List.Item>Item 1</List.Item>
+ *   <List.Item>Item 2</List.Item>
+ * </List.Ordered>
+ */
+const ListOrdered = forwardRef(function ListOrdered(props, ref) {
+    return render('ol', props, ref);
+});
+
+export { ListOrdered, ListUnordered };

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

@@ -0,0 +1,14 @@
+'use client';
+import { ListItem } from './ListItem.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/Pagination.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * 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 = forwardRef(function Pagination({ 'aria-label': ariaLabel = 'Sidenavigering', asChild, className, ...rest }, ref) {
+    const Component = asChild ? Slot : 'nav';
+    return (jsx(Component, { "aria-label": ariaLabel, className: cl('ds-pagination', className), ref: ref, ...rest }));
+});
+
+export { Pagination };

package/dist/esm/components/Pagination/PaginationButton.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/Pagination/PaginationItem.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+
+/**
+ * PaginationItem component, use within a Pagination.List.
+ *
+ * @example
+ * <Pagination.List>
+ *   <Pagination.Item>
+ *     <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *   </Pagination.Item>
+ * </Pagination.List>
+ */
+const PaginationItem = forwardRef(function PaginationItem({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? Slot : 'li';
+    return jsx(Component, { ref: ref, ...rest });
+});
+
+export { PaginationItem };

package/dist/esm/components/Pagination/PaginationList.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+
+/**
+ * PaginationList component, use within a Pagination.
+ *
+ * @example
+ * <Pagination>
+ *   <Pagination.List>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *     </Pagination.Item>
+ *   </Pagination.List>
+ * </Pagination>
+ */
+const PaginationList = forwardRef(function PaginationList({ asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : 'ul';
+    return jsx(Component, { ref: ref, ...rest });
+});
+
+export { PaginationList };