@digdir/designsystemet-react 1.0.0-next.41 → 1.0.0-next.42

package/dist/cjs/components/Badge/Badge.js

@@ -20,8 +20,8 @@ var react = require('react');
  * </Badge>
  * ```
  */
-const Badge = react.forwardRef(function Badge({ className, count, maxCount, overlap = 'rectangle', placement = 'top-right', ...rest }, ref) {
-    return (jsxRuntime.jsx("span", { className: cl('ds-badge', className), "data-count": count && maxCount && count > maxCount ? `${maxCount}+` : count, "data-overlap": rest.children ? overlap : null, "data-placement": rest.children ? placement : null, ref: ref, ...rest }));
+const Badge = react.forwardRef(function Badge({ className, count, maxCount, ...rest }, ref) {
+    return (jsxRuntime.jsx("span", { className: cl('ds-badge', className), "data-count": count && maxCount && count > maxCount ? `${maxCount}+` : count, ref: ref, ...rest }));
 });
 
 exports.Badge = Badge;

package/dist/cjs/components/Badge/BadgePosition.js

@@ -0,0 +1,12 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+const BadgePosition = react.forwardRef(function BadgePlacement({ className, overlap = 'rectangle', placement = 'top-right', ...rest }, ref) {
+    return (jsxRuntime.jsx("span", { className: cl('ds-badge--position', className), "data-overlap": overlap, "data-placement": placement, ref: ref, ...rest }));
+});
+
+exports.BadgePosition = BadgePosition;

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

@@ -0,0 +1,11 @@
+'use client';
+'use strict';
+
+var Badge$1 = require('./Badge.js');
+var BadgePosition = require('./BadgePosition.js');
+
+const Badge = Object.assign(Badge$1.Badge, { Position: BadgePosition.BadgePosition });
+Badge.Position.displayName = 'Badge.Position';
+
+exports.BadgePosition = BadgePosition.BadgePosition;
+exports.Badge = Badge;

package/dist/cjs/components/Button/Button.js

@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
-var Spinner = require('../loaders/Spinner/Spinner.js');
+var Spinner = require('../Spinner/Spinner.js');
 
 /**
  * Button used for interaction

package/dist/cjs/components/Checkbox/Checkbox.js

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

package/dist/cjs/components/Chip/Chips.js

@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
-var Input = require('../form/Input/Input.js');
+var Input = require('../Input/Input.js');
 
 /**
  * Chip.Button used for interaction

package/dist/cjs/components/{form/Combobox → Combobox}/Combobox.js

@@ -6,7 +6,7 @@ var react$1 = require('@floating-ui/react');
 var reactVirtual = require('@tanstack/react-virtual');
 var cl = require('clsx/lite');
 var react = require('react');
-var useFormField = require('../useFormField.js');
+var useFormField = require('../../utilities/hooks/useFormField/useFormField.js');
 var ComboboxContext = require('./ComboboxContext.js');
 var ComboboxIdContext = require('./ComboboxIdContext.js');
 var Custom = require('./Custom.js');
@@ -18,9 +18,9 @@ var useCombobox = require('./useCombobox.js');
 var useComboboxKeyboard = require('./useComboboxKeyboard.js');
 var useFloatingCombobox = require('./useFloatingCombobox.js');
 var utilities = require('./utilities.js');
-var useDebounceCallback = require('../../../utilities/hooks/useDebounceCallback/useDebounceCallback.js');
-var omit = require('../../../utilities/omit/omit.js');
-var Spinner = require('../../loaders/Spinner/Spinner.js');
+var useDebounceCallback = require('../../utilities/hooks/useDebounceCallback/useDebounceCallback.js');
+var omit = require('../../utilities/omit/omit.js');
+var Spinner = require('../Spinner/Spinner.js');
 
 const ComboboxComponent = react.forwardRef(({ value, initialValue = [], onValueChange, label, hideLabel = false, description, multiple = false, disabled = false, readOnly = false, hideChips = false, clearButtonLabel = 'Fjern alt', hideClearButton = false, error, errorId, id, name, portal = true, htmlSize = 0, virtual = false, children, style, size = 'md', loading, loadingLabel = 'Laster...', filter, chipSrLabel = (option) => 'Slett ' + option.label, className, ...rest }, forwareddRef) => {
     const inputRef = react.useRef(null);

package/dist/cjs/components/{form/Combobox → Combobox}/Custom.js

@@ -8,8 +8,8 @@ var cl = require('clsx/lite');
 var react = require('react');
 var ComboboxContext = require('./ComboboxContext.js');
 var ComboboxIdContext = require('./ComboboxIdContext.js');
-var omit = require('../../../utilities/omit/omit.js');
-var Label = require('../../Label/Label.js');
+var omit = require('../../utilities/omit/omit.js');
+var Label = require('../Label/Label.js');
 
 const ComboboxCustom = react.forwardRef(({ asChild, interactive, id, className, ...rest }, ref) => {
     if (interactive && !id) {

package/dist/cjs/components/{form/Combobox → Combobox}/Empty.js

@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
 var ComboboxContext = require('./ComboboxContext.js');
-var Label = require('../../Label/Label.js');
+var Label = require('../Label/Label.js');
 
 const ComboboxEmpty = react.forwardRef(({ children, className, ...rest }, ref) => {
     const context = react.useContext(ComboboxContext.ComboboxContext);

package/dist/cjs/components/{form/Combobox → Combobox}/Option/Option.js

@@ -4,12 +4,12 @@
 var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
-var omit = require('../../../../utilities/omit/omit.js');
+var omit = require('../../../utilities/omit/omit.js');
 var ComboboxContext = require('../ComboboxContext.js');
 var Description = require('./Description.js');
 var SelectedIcon = require('./SelectedIcon.js');
 var useComboboxOption = require('./useComboboxOption.js');
-var Label = require('../../../Label/Label.js');
+var Label = require('../../Label/Label.js');
 
 const ComboboxOption = react.memo(react.forwardRef(({ value, description, children, className, ...rest }, forwardedRef) => {
     const labelId = react.useId();

package/dist/cjs/components/{form/Combobox → Combobox}/Option/useComboboxOption.js

@@ -3,7 +3,7 @@
 
 var react$1 = require('@floating-ui/react');
 var react = require('react');
-var useDebounceCallback = require('../../../../utilities/hooks/useDebounceCallback/useDebounceCallback.js');
+var useDebounceCallback = require('../../../utilities/hooks/useDebounceCallback/useDebounceCallback.js');
 var ComboboxContext = require('../ComboboxContext.js');
 var ComboboxIdContext = require('../ComboboxIdContext.js');
 var utilities = require('../utilities.js');

package/dist/cjs/components/{form/Combobox → Combobox}/internal/ComboboxChips.js

@@ -3,9 +3,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-require('../../../Chip/index.js');
+require('../../Chip/index.js');
 var ComboboxContext = require('../ComboboxContext.js');
-var Chips = require('../../../Chip/Chips.js');
+var Chips = require('../../Chip/Chips.js');
 
 const ComboboxChips = () => {
     const context = react.useContext(ComboboxContext.ComboboxContext);

package/dist/cjs/components/{form/Combobox → Combobox}/internal/ComboboxError.js

@@ -2,7 +2,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var ValidationMessage = require('../../../ValidationMessage/ValidationMessage.js');
+var ValidationMessage = require('../../ValidationMessage/ValidationMessage.js');
 
 const ComboboxError = ({ size, error, formFieldProps }) => {
     return (jsxRuntime.jsx("div", { className: 'ds-combobox__error-message', id: formFieldProps.errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: error && jsxRuntime.jsx(ValidationMessage.ValidationMessage, { "data-size": size, children: error }) }));

package/dist/cjs/components/{form/Combobox → Combobox}/internal/ComboboxInput.js

@@ -11,8 +11,8 @@ var ComboboxIdContext = require('../ComboboxIdContext.js');
 var utilities = require('../utilities.js');
 var ComboboxChips = require('./ComboboxChips.js');
 var ComboboxClearButton = require('./ComboboxClearButton.js');
-var Paragraph = require('../../../Paragraph/Paragraph.js');
-var omit = require('../../../../utilities/omit/omit.js');
+var Paragraph = require('../../Paragraph/Paragraph.js');
+var omit = require('../../../utilities/omit/omit.js');
 
 const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDown, ...rest }) => {
     const context = react.useContext(ComboboxContext.ComboboxContext);

package/dist/cjs/components/{form/Combobox → Combobox}/internal/ComboboxLabel.js

@@ -4,8 +4,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var akselIcons = require('@navikt/aksel-icons');
 var cl = require('clsx/lite');
-var Label = require('../../../Label/Label.js');
-var Paragraph = require('../../../Paragraph/Paragraph.js');
+var Label = require('../../Label/Label.js');
+var Paragraph = require('../../Paragraph/Paragraph.js');
 
 const ComboboxLabel = ({ label, description, hideLabel, size, readOnly, formFieldProps, }) => {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsxs(Label.Label, { "data-size": size, htmlFor: formFieldProps.inputProps.id, className: cl('ds-combobox__label', hideLabel && `ds-sr-only`), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-combobox__readonly__icon' })), label] })), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, "data-size": size, children: jsxRuntime.jsx("div", { id: formFieldProps.descriptionId, className: cl('ds-combobox__description', hideLabel && `ds-sr-only`), children: description }) }))] }));

package/dist/cjs/components/{form/Combobox → Combobox}/useComboboxKeyboard.js

@@ -2,7 +2,7 @@
 'use strict';
 
 var ComboboxIdContext = require('./ComboboxIdContext.js');
-var useDebounceCallback = require('../../../utilities/hooks/useDebounceCallback/useDebounceCallback.js');
+var useDebounceCallback = require('../../utilities/hooks/useDebounceCallback/useDebounceCallback.js');
 
 const useComboboxKeyboard = ({ readOnly, disabled, interactiveChildren, filteredOptions, inputValue, selectedOptions, multiple, open, options, setOpen, handleSelectOption, }) => {
     const { activeIndex } = ComboboxIdContext.useComboboxId();

package/dist/cjs/components/{form/Field → Field}/FieldCounter.js

@@ -3,7 +3,8 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var ValidationMessage = require('../../ValidationMessage/ValidationMessage.js');
+var ValidationMessage = require('../ValidationMessage/ValidationMessage.js');
+var Paragraph = require('../Paragraph/Paragraph.js');
 
 const label = (text, count) => text.replace('%d', Math.abs(count).toString());
 const FieldCounter = react.forwardRef(function FieldCounter({ limit, under = '%d tegn igjen', over = '%d tegn for mye', ...rest }, ref) {
@@ -22,7 +23,7 @@ const FieldCounter = react.forwardRef(function FieldCounter({ limit, under = '%d
         field?.addEventListener('input', onInput);
         return () => field?.removeEventListener('input', onInput);
     }, [setCount]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { "data-field": 'description', className: 'ds-sr-only', "aria-live": 'polite', ref: counterRef, children: hasExceededLimit && label(over, remainder) }), jsxRuntime.jsx(ValidationMessage.ValidationMessage, { "data-color": hasExceededLimit ? 'danger' : 'neutral', ref: ref, ...rest, children: label(hasExceededLimit ? over : under, remainder) })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { "data-field": 'description', className: 'ds-sr-only', "aria-live": 'polite', ref: counterRef, children: hasExceededLimit && label(over, remainder) }), hasExceededLimit ? (jsxRuntime.jsx(ValidationMessage.ValidationMessage, { ref: ref, ...rest, children: label(over, remainder) })) : (jsxRuntime.jsx(Paragraph.Paragraph, { ref: ref, ...rest, "data-field": 'validation', children: label(under, remainder) }))] }));
 });
 
 exports.FieldCounter = FieldCounter;

package/dist/cjs/components/{form/Fieldset → Fieldset}/FieldsetDescription.js

@@ -3,7 +3,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var Paragraph = require('../../Paragraph/Paragraph.js');
+var Paragraph = require('../Paragraph/Paragraph.js');
 
 const FieldsetDescription = react.forwardRef(function FieldsetDescription(rest, ref) {
     return jsxRuntime.jsx(Paragraph.Paragraph, { ref: ref, ...rest });

package/dist/cjs/components/{form/Fieldset → Fieldset}/FieldsetLegend.js

@@ -3,7 +3,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var Label = require('../../Label/Label.js');
+var Label = require('../Label/Label.js');
 
 const FieldsetLegend = react.forwardRef(function FieldsetLegend(rest, ref) {
     return (jsxRuntime.jsx(Label.Label, { asChild: true, children: jsxRuntime.jsx("legend", { ref: ref, ...rest }) }));

package/dist/cjs/components/Radio/Radio.js

@@ -0,0 +1,20 @@
+'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('../ValidationMessage/ValidationMessage.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, description, validation, ...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 && jsxRuntime.jsx(Label.Label, { weight: 'regular', children: label }), !!description && jsxRuntime.jsx("div", { "data-field": 'description', children: description }), !!validation && jsxRuntime.jsx(ValidationMessage.ValidationMessage, { children: validation })] }));
+});
+
+exports.Radio = Radio;

package/dist/cjs/components/{form/Search → Search}/SearchButton.js

@@ -3,7 +3,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var Button = require('../../Button/Button.js');
+var Button = require('../Button/Button.js');
 
 const SearchButton = react.forwardRef(function SearchButton({ children = 'Søk', ...rest }, ref) {
     return (jsxRuntime.jsx(Button.Button, { ref: ref, type: 'submit', ...rest, children: children }));

package/dist/cjs/components/{form/Search → Search}/SearchClear.js

@@ -4,7 +4,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var utilities = require('../Combobox/utilities.js');
-var Button = require('../../Button/Button.js');
+var Button = require('../Button/Button.js');
 
 const SearchClear = react.forwardRef(function SearchClear({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) {
     const handleClear = (e) => {

package/dist/cjs/components/{form/Select → Select}/Select.js

@@ -5,8 +5,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
 
-const Select = react.forwardRef(function Select({ className, onKeyDown, onMouseDown, ...rest }, ref) {
-    return (jsxRuntime.jsx("select", { className: cl('ds-input', className), ref: ref, onKeyDown: (event) => {
+const Select = react.forwardRef(function Select({ className, onKeyDown, onMouseDown, width, ...rest }, ref) {
+    return (jsxRuntime.jsx("select", { className: cl('ds-input', className), "data-width": width, ref: ref, onKeyDown: (event) => {
             if (event.key === 'Tab')
                 return;
             if (rest.readOnly)

package/dist/cjs/components/{loaders/Skeleton → Skeleton}/Skeleton.js

@@ -6,8 +6,15 @@ var react$1 = require('@floating-ui/react');
 var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
-var useSynchronizedAnimation = require('../../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
+var useSynchronizedAnimation = require('../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
 
+/**
+ * Represent a draft of page while the content loads. Mix different skeleton components to create your layout.
+ * @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';

package/dist/cjs/components/{loaders/Spinner → Spinner}/Spinner.js

@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var react$1 = require('@floating-ui/react');
 var cl = require('clsx/lite');
 var react = require('react');
-var useSynchronizedAnimation = require('../../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
+var useSynchronizedAnimation = require('../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
 
 /**  Spinner component used for indicating busy or indeterminate loading */
 const Spinner = react.forwardRef(function Spinner({ 'aria-label': ariaLabel, className, ...rest }, ref) {

package/dist/cjs/components/{form/Switch → Switch}/Switch.js

@@ -5,7 +5,7 @@ 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 Label = require('../Label/Label.js');
 
 /**
  * Switch used to toggle options.

package/dist/cjs/components/{form/Textfield → Textfield}/Textfield.js

@@ -8,8 +8,8 @@ var FieldDescription = require('../Field/FieldDescription.js');
 var FieldAffix = require('../Field/FieldAffix.js');
 var Textarea = require('../Textarea/Textarea.js');
 var Input = require('../Input/Input.js');
-var Label = require('../../Label/Label.js');
-var ValidationMessage = require('../../ValidationMessage/ValidationMessage.js');
+var Label = require('../Label/Label.js');
+var ValidationMessage = require('../ValidationMessage/ValidationMessage.js');
 
 /**
  *  Composed text input component using `Field`

package/dist/cjs/components/ValidationMessage/ValidationMessage.js

@@ -8,7 +8,7 @@ var react = require('react');
 
 /** Use `ValidationMessage` to display validation text */
 const ValidationMessage = react.forwardRef(function ValidationMessage({ className, asChild, ...rest }, ref) {
-    const Component = asChild ? reactSlot.Slot : 'div';
+    const Component = asChild ? reactSlot.Slot : 'p';
     return (jsxRuntime.jsx(Component, { className: cl('ds-validation-message', className), "data-field": 'validation', ref: ref, ...rest }));
 });