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

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

@@ -0,0 +1,25 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useRef } from 'react';
+
+const Context = createContext({
+    current: null,
+});
+/**
+ * DialogTriggerContext component, used to provide a context for a dialog trigger.
+ *
+ * @example
+ * <Dialog.TriggerContext>
+ *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *   <Dialog>
+ *     Content
+ *   </Dialog>
+ * </Dialog.TriggerContext>
+ */
+const DialogTriggerContext = (rest) => {
+    const contextRef = useRef(null);
+    return jsx(Context.Provider, { value: contextRef, ...rest });
+};
+DialogTriggerContext.displayName = 'DialogTriggerContext';
+
+export { Context, DialogTriggerContext };

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

@@ -0,0 +1,32 @@
+'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); // Using contextRef instead of command as this is instantly available and plays nice with tests
+    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, suppressHydrationWarning // Might get augmented through designsystemet-web with aria-haspopup
+        : true, ...rest }));
+});
+
+export { DialogTrigger };

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

@@ -0,0 +1,62 @@
+'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, useId, useEffect } from 'react';
+import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import '@digdir/designsystemet-web';
+import { Button } from '../button/button.js';
+import { Context } from './dialog-trigger-context.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 command="show-modal" commandfor="my-dialog">Open Dialog</Button>
+ * <Dialog id="my-dialog">
+ *   Content
+ * </Dialog>
+ */
+const Dialog = forwardRef(function Dialog({ asChild, children, className, closeButton = 'Lukk dialogvindu', id, modal = true, onAnimationEnd, onClick, onClose, open, placement = 'center', ...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';
+    const autoId = useId();
+    const usedId = id ?? autoId;
+    // Toggle open based on prop
+    useEffect(() => dialogRef.current?.[open ? showProp : 'close'](), [open]);
+    return (jsxs(Component, { className: cl('ds-dialog', className), "data-placement": placement, "data-modal": modal, id: usedId, onClose: (event) => onClose?.(event.nativeEvent), onClick: (event) => {
+            onClick?.(event);
+            const { currentTarget: dialog, target: el, defaultPrevented } = event;
+            const isClose = el?.closest?.('[data-command="close"]');
+            if (!defaultPrevented && isClose) {
+                dialog.close();
+                if (window.dsWarnings !== false)
+                    console.log('Designsystemet: data-command="close" is deprecated. Use command="close" and commandfor="DIALOG-ID" instead.');
+            }
+        }, onAnimationEnd: (event) => {
+            const { currentTarget: dialog } = event;
+            const autofocus = dialog.querySelector('[autofocus]');
+            if (document.activeElement !== autofocus)
+                autofocus?.focus(); // Handle autofocus on open
+            onAnimationEnd?.(event);
+        }, ref: mergedRefs, ...rest, children: [closeButton !== false && (jsx(Button, { "aria-label": closeButton, "data-color": 'neutral', icon: true, variant: 'tertiary', command: 'close', commandfor: usedId })), children] }));
+});
+
+export { Dialog };

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

@@ -0,0 +1,29 @@
+'use client';
+import { Dialog } 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 DialogComponent = Object.assign(Dialog, {
+    Block: DialogBlock,
+    TriggerContext: DialogTriggerContext,
+    Trigger: DialogTrigger,
+});
+DialogComponent.Block.displayName = 'Dialog.Block';
+DialogComponent.TriggerContext.displayName = 'Dialog.TriggerContext';
+DialogComponent.Trigger.displayName = 'Dialog.Trigger';
+
+export { DialogComponent as Dialog, DialogBlock, DialogTrigger, DialogTriggerContext };

package/dist/esm/components/divider/divider.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Divider component, used to separate content. Uses `hr` element.
+ *
+ * @example
+ * <Divider />
+ */
+const Divider = forwardRef(function Divider({ className, ...rest }, ref) {
+    return (
+    // biome-ignore lint/a11y/noAriaHiddenOnFocusable: <hr> is not foucsable but biome thinks it is
+    jsx("hr", { "aria-hidden": 'true', className: cl('ds-divider', className), ref: ref, ...rest }));
+});
+
+export { Divider };

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

@@ -0,0 +1,22 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Button } from '../button/button.js';
+
+/**
+ * DropdownButton component, used to display a button in the DropdownItem.
+ *
+ * @example
+ * <Dropdown>
+ *  <DropdownList>
+ *    <DropdownItem>
+ *      <DropdownButton>Button</DropdownButton>
+ *    </DropdownItem>
+ *  </DropdownList>
+ * </Dropdown>
+ */
+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,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Heading } from '../heading/heading.js';
+
+/**
+ * DropdownHeading component, used to display a heading in the Dropdown.
+ *
+ * @example
+ * <Dropdown>
+ *  <DropdownHeading>Heading</DropdownHeading>
+ * </Dropdown>
+ */
+const DropdownHeading = forwardRef(function DropdownHeading(rest, ref) {
+    return jsx(Heading, { ref: ref, ...rest });
+});
+
+export { DropdownHeading };

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

@@ -0,0 +1,21 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+/**
+ * DropdownItem component, used to display an item in the Dropdown. Used within a DropdownList.
+ *
+ * @example
+ * <Dropdown>
+ *  <DropdownList>
+ *    <DropdownItem>
+ *      <DropdownButton>Button</DropdownButton>
+ *    </DropdownItem>
+ *  </DropdownList>
+ * </Dropdown>
+ */
+const DropdownItem = forwardRef(function DropdownItem(rest, ref) {
+    return jsx("li", { ref: ref, ...rest });
+});
+
+export { DropdownItem };

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

@@ -0,0 +1,21 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+/**
+ * DropdownList component, used to display a list of items in the Dropdown.
+ *
+ * @example
+ * <Dropdown>
+ *  <DropdownList>
+ *    <DropdownItem>
+ *      <DropdownButton>Button</DropdownButton>
+ *    </DropdownItem>
+ *  </DropdownList>
+ * </Dropdown>
+ */
+const DropdownList = forwardRef(function DropdownList(rest, ref) {
+    return jsx("ul", { ref: ref, ...rest });
+});
+
+export { DropdownList };

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
+ * <DropdownTriggerContext>
+ *  <DropdownTrigger>Dropdown</DropdownTrigger>
+ *  <Dropdown>
+ *   <DropdownHeading>Heading</DropdownHeading>
+ *    <DropdownList>
+ *      <DropdownItem>
+ *        <DropdownButton>Button</DropdownButton>
+ *      </DropdownItem>
+ *    </DropdownList>
+ *  </Dropdown>
+ * </DropdownTriggerContext>
+ */
+const DropdownTriggerContext = ({ children, }) => {
+    return jsx(PopoverTriggerContext, { children: children });
+};
+DropdownTriggerContext.displayName = 'DropdownTriggerContext';
+
+export { DropdownTriggerContext };

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

@@ -0,0 +1,26 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { PopoverTrigger } from '../popover/popover-trigger.js';
+
+/**
+ * DropdownTrigger component, used within a Dropdown.TriggerContext to open a Dropdown.
+ *
+ * @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 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,52 @@
+'use client';
+import { Dropdown } 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 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 DropdownComponent = Object.assign(Dropdown, {
+    TriggerContext: DropdownTriggerContext,
+    Heading: DropdownHeading,
+    List: DropdownList,
+    Item: DropdownItem,
+    Button: DropdownButton,
+    Trigger: DropdownTrigger,
+});
+DropdownComponent.TriggerContext.displayName = 'Dropdown.TriggerContext';
+DropdownComponent.List.displayName = 'Dropdown.List';
+DropdownComponent.Heading.displayName = 'Dropdown.Heading';
+DropdownComponent.Item.displayName = 'Dropdown.Item';
+DropdownComponent.Button.displayName = 'Dropdown.Button';
+DropdownComponent.Trigger.displayName = 'Dropdown.Trigger';
+
+export { DropdownComponent as Dropdown, DropdownButton, DropdownHeading, DropdownItem, DropdownList, DropdownTrigger, DropdownTriggerContext };

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

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Heading } from '../heading/heading.js';
+
+/**
+ * ErrorSummary heading component, used to display a heading for the error summary.
+ *
+ * @example
+ * <ErrorSummary>
+ *   <ErrorSummaryHeading>Heading</ErrorSummaryHeading>
+ * </ErrorSummary>
+ */
+const ErrorSummaryHeading = forwardRef(function ErrorSummaryHeading(rest, ref) {
+    return jsx(Heading, { ref: ref, suppressHydrationWarning: true, ...rest }); // Suppress hydration warning since we will get an ID from <ds-error-summary>
+});
+
+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
+ * <ErrorSummaryItem>
+ *  <ErrorSummaryLink href="#">
+ *    Link to error
+ *  </ErrorSummaryLink>
+ * </ErrorSummaryItem>
+ */
+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,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Link } from '../link/link.js';
+
+/**
+ * ErrorSummary link component, used to link to a specific error. Used within an ErrorSummary.Item.
+ *
+ * @example
+ * <ErrorSummary>
+ *   <ErrorSummaryItem>
+ *     <ErrorSummaryLink href='#'>Error 1</ErrorSummaryLink>
+ *   </ErrorSummaryItem>
+ * </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,25 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { List as ListComponent } from '../list/index.js';
+
+/**
+ * ErrorSummary list component, used to display a list of errors.
+ *
+ * @example
+ * <ErrorSummary>
+ *   <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 ErrorSummaryList = forwardRef(function ErrorSummaryList({ ...rest }, ref) {
+    return jsx(ListComponent.Unordered, { ...rest, ref: ref });
+});
+
+export { ErrorSummaryList };

package/dist/esm/components/error-summary/error-summary.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';
+
+/**
+ * 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 = forwardRef(function ErrorSummary({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? Slot : 'ds-error-summary';
+    return (jsx(Component, { ...(asChild
+            ? { className: cl('ds-error-summary', className) }
+            : { class: cl('ds-error-summary', className) }), ref: ref, suppressHydrationWarning: true, ...rest }));
+});
+
+export { ErrorSummary };

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

@@ -0,0 +1,35 @@
+'use client';
+import { ErrorSummary } 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 ErrorSummaryComponent = Object.assign(ErrorSummary, {
+    Heading: ErrorSummaryHeading,
+    Item: ErrorSummaryItem,
+    List: ErrorSummaryList,
+    Link: ErrorSummaryLink,
+});
+ErrorSummaryComponent.Item.displayName = 'ErrorSummary.Item';
+ErrorSummaryComponent.Heading.displayName = 'ErrorSummary.Heading';
+ErrorSummaryComponent.List.displayName = 'ErrorSummary.List';
+ErrorSummaryComponent.Link.displayName = 'ErrorSummary.Link';
+
+export { ErrorSummaryComponent as ErrorSummary, ErrorSummaryHeading, ErrorSummaryItem, ErrorSummaryLink, ErrorSummaryList };

package/dist/esm/components/field/field-affix.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/field-counter.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { warn } from '../../utilities/index.js';
+import { ValidationMessage } from '../validation-message/validation-message.js';
+
+/**
+ * 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, over, hint, ...rest }, _ref) {
+    if (hint)
+        warn('hint attribute is deprecated on Field.Counter');
+    return (jsx(ValidationMessage, { suppressHydrationWarning // Since <ds-field> adds attributes
+        : true, "data-field": 'counter', "data-limit": limit, "data-under": under, "data-over": over, ...rest }));
+});
+
+export { FieldCounter };

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

@@ -0,0 +1,16 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+/**
+ * Field description component, used to provide additional information below the input.
+ *
+ * @example
+ * <FieldDescription>Additional information</FieldDescription>
+ */
+const FieldDescription = forwardRef(function FieldDescription(rest, ref) {
+    return (jsx("div", { suppressHydrationWarning // Since <ds-field> adds attributes
+        : true, "data-field": 'description', ref: ref, ...rest }));
+});
+
+export { FieldDescription };