@digdir/designsystemet-react 1.0.0-next.35 → 1.0.0-next.37

package/dist/esm/components/form/Search/Search.js

@@ -1,47 +1,10 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useMergeRefs } from '@floating-ui/react';
-import { MagnifyingGlassIcon, XMarkIcon } from '@navikt/aksel-icons';
+import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
-import { forwardRef, useRef, useState, useCallback } from 'react';
-import { Button } from '../../Button/Button.js';
-import { useSearch } from './useSearch.js';
-import { Paragraph } from '../../Paragraph/Paragraph.js';
-import { Label } from '../../Label/Label.js';
-import { omit } from '../../../utilities/omit/omit.js';
+import { forwardRef } from 'react';
 
-/** Search field
- *
- * @example
- * ```tsx
- * <Search label="Search" label">
- * ```
- */
-const Search = forwardRef((props, ref) => {
-    const { label, style, hideLabel = true, variant = 'simple', searchButtonLabel = 'Søk', clearButtonLabel = 'Tøm', defaultValue, value, onChange, onClear, disabled, onSearchClick, htmlSize = 27, className, ...rest } = props;
-    const { inputProps, size = 'md' } = useSearch(props);
-    const inputRef = useRef();
-    const mergedRef = useMergeRefs([ref, inputRef]);
-    const [internalValue, setInternalValue] = useState(defaultValue ?? '');
-    const handleChange = useCallback((e) => {
-        const newValue = e.target.value;
-        value === undefined && setInternalValue(newValue);
-        onChange?.(e);
-    }, [onChange, value]);
-    const handleClear = () => {
-        onClear?.(internalValue);
-        setInternalValue('');
-        inputRef?.current?.focus();
-    };
-    const handleSearchClick = () => {
-        onSearchClick?.((value ?? internalValue).toString());
-    };
-    const isSimple = variant === 'simple';
-    const showClearButton = Boolean(value ?? internalValue) && !disabled;
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { style: style, className: cl('ds-search', inputProps.disabled && 'ds-search--disabled', `ds-search--${size}`, className), children: [label && (jsx(Label, { size: size, weight: 'medium', htmlFor: inputProps.id, className: cl('ds-search__label', hideLabel && 'ds-sr-only'), children: jsx("span", { children: label }) })), jsxs("div", { className: 'ds-search__field', children: [jsxs("div", { className: cl('ds-search__field', `ds-search--${size}`), children: [isSimple && (jsx(MagnifyingGlassIcon, { className: 'ds-search__icon', "aria-hidden": true })), jsx("input", { ref: mergedRef, size: htmlSize, value: value ?? internalValue, disabled: disabled, className: cl('ds-search__input', `ds-focus`, isSimple
-                                        ? 'ds-search__input--simple'
-                                        : 'ds-search__input--with-search-button'), ...omit(['size', 'error', 'errorId', 'readOnly'], rest), ...inputProps, onChange: handleChange }), showClearButton && (jsxs("button", { className: cl('ds-search__clear-button', `ds-focus`), type: 'button', onClick: handleClear, disabled: disabled, children: [jsx("span", { className: `ds-sr-only`, children: clearButtonLabel }), jsx(XMarkIcon, { "aria-hidden": true })] }))] }), !isSimple && (jsx(Button, { className: 'ds-search__search-button', size: size, variant: variant, type: 'submit', onClick: handleSearchClick, disabled: disabled, children: searchButtonLabel }))] })] }) }));
+const Search = forwardRef(function Search({ className, ...rest }, ref) {
+    return jsx("div", { ref: ref, className: cl('ds-search', className), ...rest });
 });
-Search.displayName = 'Search';
 
 export { Search };

package/dist/esm/components/form/Search/SearchButton.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Button } from '../../Button/Button.js';
+
+const SearchButton = forwardRef(function SearchButton({ children = 'Søk', ...rest }, ref) {
+    return (jsx(Button, { ref: ref, type: 'submit', ...rest, children: children }));
+});
+
+export { SearchButton };

package/dist/esm/components/form/Search/SearchClear.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { setReactInputValue } from '../Combobox/utilities.js';
+import { Button } from '../../Button/Button.js';
+
+const SearchClear = 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();
+        setReactInputValue(input, '');
+        input.focus();
+        onClick?.(e);
+    };
+    return (jsx(Button, { ref: ref, variant: 'tertiary', type: 'reset', "aria-label": label, onClick: handleClear, icon: true, ...rest }));
+});
+
+export { SearchClear };

package/dist/esm/components/form/Search/SearchInput.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Input } from '../Input/Input.js';
+
+const SearchInput = forwardRef(function SearchInput({ ...rest }, ref) {
+    return (jsx(Input, { ref: ref, type: 'search', 
+        /* We need an empty placeholder for the clear button to be able to show/hide */
+        placeholder: '', ...rest }));
+});
+
+export { SearchInput };

package/dist/esm/components/form/Search/index.js

@@ -0,0 +1,28 @@
+'use client';
+import { Search as Search$1 } from './Search.js';
+import { SearchButton } from './SearchButton.js';
+import { SearchClear } from './SearchClear.js';
+import { SearchInput } from './SearchInput.js';
+
+/**
+ * Search field
+ *
+ * @example
+ * ```tsx
+ * <Search>
+ *  <Search.Input aria-label='Søk' />
+ *  <Search.Clear />
+ *  <Search.Button />
+ * </Search>
+ * ```
+ */
+const Search = Object.assign(Search$1, {
+    Clear: SearchClear,
+    Button: SearchButton,
+    Input: SearchInput,
+});
+Search.Clear.displayName = 'Search.Clear';
+Search.Button.displayName = 'Search.Button';
+Search.Input.displayName = 'Search.Input';
+
+export { Search, SearchButton, SearchClear, SearchInput };

package/dist/esm/components/form/Select/Select.js

@@ -1,18 +1,20 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
+import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
-import { useSelect } from './useSelect.js';
-import { Paragraph } from '../../Paragraph/Paragraph.js';
-import { Label } from '../../Label/Label.js';
-import { omit } from '../../../utilities/omit/omit.js';
-import { ValidationMessage } from '../../ValidationMessage/ValidationMessage.js';
 
-const Select = forwardRef(function Select(props, ref) {
-    const { children, disabled = false, label, description, hideLabel = false, error, className, htmlSize = 0, ...rest } = props;
-    const { selectProps, descriptionId, errorId, readOnly, size = 'md', } = useSelect(props);
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: cl('ds-select--container', readOnly && 'ds-select--readonly', error && 'ds-select--error'), children: [label && (jsxs(Label, { weight: 'medium', size: size, htmlFor: selectProps.id, className: cl('ds-select__label', hideLabel && 'ds-sr-only'), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-select__readonly__icon' })), label] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: cl(`ds-select__description`, hideLabel && `ds-sr-only`), children: description }) })), jsx("div", { className: 'ds-select__wrapper', children: jsx("select", { disabled: disabled, ref: ref, size: htmlSize, className: cl('ds-select', `ds-select--${size}`, `ds-focus`, props.multiple && 'ds-select--multiple', className), ...omit(['size', 'error', 'errorId'], rest), ...omit(['readOnly', 'disabled'], selectProps), children: children }) }), error && (jsx("div", { id: errorId, className: 'ds-select__error-message', "aria-live": 'polite', "aria-relevant": 'additions removals', children: jsx(ValidationMessage, { size: size, children: error }) }))] }) }));
+const Select = forwardRef(function Select({ className, onKeyDown, onMouseDown, ...rest }, ref) {
+    return (jsx("select", { className: cl('ds-input', className), ref: ref, onKeyDown: (event) => {
+            if (event.key === 'Tab')
+                return;
+            if (rest.readOnly)
+                event.preventDefault(); // Make readonly work for select
+            onKeyDown?.(event);
+        }, onMouseDown: (event) => {
+            if (rest.readOnly)
+                event.preventDefault(); // Make readonly work for select
+            onMouseDown?.(event);
+        }, ...rest }));
 });
 
 export { Select };

package/dist/esm/components/form/Select/index.js

@@ -3,9 +3,10 @@ import { Select as Select$1 } from './Select.js';
 import { SelectOptgroup } from './SelectOptgroup.js';
 import { SelectOption } from './SelectOption.js';
 
-const Select = Select$1;
-Select.Option = SelectOption;
-Select.Optgroup = SelectOptgroup;
+const Select = Object.assign(Select$1, {
+    Option: SelectOption,
+    Optgroup: SelectOptgroup,
+});
 Select.Option.displayName = 'Select.Option';
 Select.Optgroup.displayName = 'Select.Optgroup';
 

package/dist/esm/components/form/Switch/Switch.js

@@ -1,18 +1,17 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
-import cl from 'clsx/lite';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { useSwitch } from './useSwitch.js';
-import { Paragraph } from '../../Paragraph/Paragraph.js';
-import { omit } from '../../../utilities/omit/omit.js';
+import { Field } from '../Field/index.js';
+import { Input } from '../Input/Input.js';
 import { Label } from '../../Label/Label.js';
 
-const Switch = forwardRef((props, ref) => {
-    const { children, description, position = 'left', className, ...rest } = props;
-    const { inputProps, descriptionId, size = 'md', readOnly, } = useSwitch(props);
-    return (jsx(Paragraph, { asChild: true, size: size, ...(inputProps.disabled && { 'aria-disabled': true }), children: jsxs("div", { className: cl(`ds-switch`, `ds-switch--${size}`, inputProps.disabled && `ds-switch--disabled`, readOnly && `ds-switch--readonly`, className), children: [jsx("input", { className: `ds-switch__input`, disabled: inputProps.disabled, ref: ref, ...omit(['size', 'error'], rest), ...inputProps }), jsxs(Label, { className: cl(`ds-switch__label`, position === 'right' && `ds-switch__label--right`), htmlFor: inputProps.id, size: size, weight: 'regular', children: [jsx("span", { className: `ds-switch__track`, children: jsx("span", { className: `ds-switch__thumb` }) }), readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: `ds-switch__readonly__icon` })), children && jsx("span", { children: children })] }), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: `ds-switch__description`, children: description }) }))] }) }));
+/**
+ * Switch used to toggle options.
+ * @example
+ * <Switch label="I agree" value="agree" />
+ */
+const Switch = forwardRef(function Switch({ 'data-size': size, children, className, description, label, position, style, ...rest }, ref) {
+    return (jsxs(Field, { className: className, "data-position": position, "data-size": size, style: style, children: [jsx(Input, { type: 'checkbox', role: 'switch', ref: ref, ...rest }), !!label && jsx(Label, { weight: 'regular', children: label }), !!description && jsx("div", { "data-field": 'description', children: description })] }));
 });
-Switch.displayName = 'Switch';
 
 export { Switch };

package/dist/esm/components/form/Textarea/Textarea.js

@@ -1,34 +1,17 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
+import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
-import { forwardRef, useState } from 'react';
-import { CharacterCounter } from '../CharacterCounter.js';
-import { useTextarea } from './useTextarea.js';
-import { Paragraph } from '../../Paragraph/Paragraph.js';
-import { Label } from '../../Label/Label.js';
-import { omit } from '../../../utilities/omit/omit.js';
-import { ValidationMessage } from '../../ValidationMessage/ValidationMessage.js';
+import { forwardRef } from 'react';
 
 /** Textarea field
  *
  * @example
  * ```tsx
- * <Textarea label="Textarea label">
+ * <Textarea />
  * ```
  */
-const Textarea = forwardRef((props, ref) => {
-    const { label, description, style, characterLimit, hideLabel, className, ...rest } = props;
-    const { textareaProps, descriptionId, hasError, errorId, size = 'md', readOnly, } = useTextarea(props);
-    const [value, setValue] = useState(props.defaultValue);
-    const characterLimitId = `${textareaProps.id}-charactercount}`;
-    const hasCharacterLimit = characterLimit != null;
-    const describedBy = cl(textareaProps['aria-describedby'], hasCharacterLimit && characterLimitId) || undefined;
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { style: style, className: cl('ds-textarea', `ds-textarea--${size}`, hasError && `ds-textarea--error`, className), children: [label && (jsxs(Label, { size: size, weight: 'medium', htmlFor: textareaProps.id, className: cl('ds-textarea__label', hideLabel && `ds-sr-only`), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-textarea__readonly-icon' })), jsx("span", { children: label })] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: cl('ds-textarea__description', hideLabel && `ds-sr-only`), children: description }) })), jsx("textarea", { className: cl('ds-textarea__input', `ds-focus`), ref: ref, "aria-describedby": describedBy, disabled: textareaProps.disabled, readOnly: readOnly, ...omit(['size', 'error', 'errorId'], rest), ...textareaProps, onChange: (e) => {
-                        textareaProps?.onChange?.(e);
-                        setValue(e.target.value);
-                    } }), hasCharacterLimit && (jsx(CharacterCounter, { size: size, value: value ? value.toString() : '', id: characterLimitId, ...characterLimit })), jsx("div", { className: 'ds-textarea__error-message', id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: hasError && (jsx(ValidationMessage, { size: size, children: props.error })) })] }) }));
+const Textarea = forwardRef(function Textarea({ className, ...rest }, ref) {
+    return (jsx("textarea", { className: cl('ds-input', className), ref: ref, ...rest }));
 });
-Textarea.displayName = 'Textarea';
 
 export { Textarea };

package/dist/esm/components/form/Textfield/Textfield.js

@@ -1,34 +1,27 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
-import cl from 'clsx/lite';
-import { forwardRef, useState, useId } from 'react';
-import { CharacterCounter } from '../CharacterCounter.js';
-import { useTextfield } from './useTextfield.js';
-import { Paragraph } from '../../Paragraph/Paragraph.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Field } from '../Field/index.js';
+import { FieldDescription } from '../Field/FieldDescription.js';
+import { FieldAffixes, FieldAffix } from '../Field/FieldAffix.js';
+import { Textarea } from '../Textarea/Textarea.js';
+import { Input } from '../Input/Input.js';
 import { Label } from '../../Label/Label.js';
-import { omit } from '../../../utilities/omit/omit.js';
 import { ValidationMessage } from '../../ValidationMessage/ValidationMessage.js';
 
-/** Text input field
+/**
+ *  Composed text input component using `Field`
  *
+ * `classname` & `style` are passed to the wrapper elements.
+ *
+ * Rest props are passed to the `Input` or `Textarea` component.
  * @example
  * ```tsx
  * <Textfield label="Textfield label">
  * ```
  */
-const Textfield = forwardRef((props, ref) => {
-    const { label, description, suffix, prefix, style, characterLimit, hideLabel, type = 'text', htmlSize = 20, className, ...rest } = props;
-    const { inputProps, descriptionId, hasError, errorId, size = 'md', readOnly, } = useTextfield(props);
-    const [inputValue, setInputValue] = useState(props.value || props.defaultValue);
-    const characterLimitId = `textfield-charactercount-${useId()}`;
-    const hasCharacterLimit = characterLimit != null;
-    const describedBy = cl(inputProps['aria-describedby'], hasCharacterLimit && characterLimitId) || undefined;
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { style: style, className: cl(`ds-textfield`, `ds-textfield--${size}`, readOnly && `ds-textfield--readonly`, hasError && `ds-textfield--error`, className), children: [label && (jsxs(Label, { size: size, weight: 'medium', htmlFor: inputProps.id, className: cl(`ds-textfield__label`, hideLabel && `ds-sr-only`), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-textfield__readonly__icon' })), jsx("span", { children: label })] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: cl(`ds-textfield__description`, hideLabel && `ds-sr-only`), children: description }) })), jsxs("div", { className: 'ds-textfield__field', children: [prefix && (jsx(Paragraph, { asChild: true, size: size, variant: 'short', children: jsx("div", { className: cl(`ds-textfield__adornment`, `ds-textfield__prefix`), "aria-hidden": 'true', children: prefix }) })), jsx("input", { className: cl(`ds-textfield__input`, `ds-focus`, prefix && `ds-textfield__input--with-prefix`, suffix && `ds-textfield__input--with-suffix`), ref: ref, type: type, disabled: inputProps.disabled, "aria-describedby": describedBy, size: htmlSize, ...omit(['size', 'error', 'errorId'], rest), ...inputProps, onChange: (e) => {
-                                inputProps?.onChange?.(e);
-                                setInputValue(e.target.value);
-                            } }), suffix && (jsx(Paragraph, { asChild: true, size: size, variant: 'short', children: jsx("div", { className: cl(`ds-textfield__adornment`, `ds-textfield__suffix`), "aria-hidden": 'true', children: suffix }) }))] }), hasCharacterLimit && (jsx(CharacterCounter, { size: size, value: inputValue ? inputValue.toString() : '', id: characterLimitId, ...characterLimit })), jsx("div", { className: 'ds-textfield__error-message', id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: hasError && (jsx(ValidationMessage, { size: size, children: props.error })) })] }) }));
+const Textfield = forwardRef(function Textfield({ label, description, error, multiline, prefix, suffix, 'data-size': size, counter, style, className, ...rest }, ref) {
+    return (jsxs(Field, { className: className, "data-size": size, style: style, children: [!!label && jsx(Label, { children: label }), !!description && jsx(FieldDescription, { children: description }), jsxs(FieldAffixes, { children: [prefix === undefined || jsx(FieldAffix, { children: prefix }), multiline === true ? (jsx(Textarea, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })) : (jsx(Input, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })), suffix === undefined || jsx(FieldAffix, { children: suffix })] }), !!error && jsx(ValidationMessage, { children: error }), !!counter && (jsx(Field.Counter, { ...(typeof counter === 'number' ? { limit: counter } : counter) }))] }));
 });
-Textfield.displayName = 'Textfield';
 
 export { Textfield };

package/dist/esm/components/form/useFormField.js

@@ -14,10 +14,8 @@ const useFormField = (props, prefix) => {
     const descriptionId = `${prefix}-description-${randomId}`;
     const size = props.size ?? fieldset?.size ?? 'md';
     const disabled = fieldset?.disabled || props?.disabled;
-    const readOnly = ((fieldset?.readOnly || props?.readOnly) && !disabled) || undefined;
-    const hasError = !disabled && !readOnly && !!(props.error || fieldset?.error);
+    const hasError = !disabled && !!(props.error || fieldset?.error);
     return {
-        readOnly,
         hasError,
         errorId,
         descriptionId,

package/dist/esm/components/loaders/Skeleton/Skeleton.js

@@ -6,13 +6,12 @@ import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import { useSynchronizedAnimation } from '../../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js';
 
-const Skeleton = forwardRef(function Skeleton({ asChild, className, children, height, style, variant = 'rectangle', width, ...rest }, ref) {
+const Skeleton = forwardRef(function Skeleton({ asChild, className, height, style, variant = 'rectangle', width, ...rest }, ref) {
     const Component = asChild ? Slot : 'span';
     const isText = variant === 'text';
-    const childrenText = isText && '-'.repeat(Number(width) || 1); // s followed by a ­ makes the most average character length
     const animationRef = useSynchronizedAnimation('ds-skeleton-opacity-fade');
     const mergedRefs = useMergeRefs([animationRef, ref]);
-    return (jsx(Component, { "aria-hidden": 'true', className: cl('ds-skeleton', className), "data-variant": variant, ref: mergedRefs, style: isText ? style : { width, height, ...style }, ...rest, children: children || childrenText }));
+    return (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 }));
 });
 
 export { Skeleton };

package/dist/esm/components/loaders/Spinner/Spinner.js

@@ -1,14 +1,16 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMergeRefs } from '@floating-ui/react';
 import cl from 'clsx/lite';
+import { forwardRef } from 'react';
 import { useSynchronizedAnimation } from '../../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js';
 
 /**  Spinner component used for indicating busy or indeterminate loading */
-const Spinner = ({ title, color = 'neutral', size = 'md', className, ...rest }) => {
+const Spinner = forwardRef(function Spinner({ 'aria-label': ariaLabel, className, ...rest }, ref) {
     const svgRef = useSynchronizedAnimation('ds-spinner-rotate-animation');
     const strokeRef = useSynchronizedAnimation('ds-spinner-stroke-animation');
-    return (jsxs("svg", { className: cl('ds-spinner', className), viewBox: '0 0 50 50', ref: svgRef, "data-color": color, "data-size": size, ...rest, children: [jsx("title", { children: title }), jsx("circle", { className: cl('ds-spinner__background'), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5' }), jsx("circle", { className: cl(`ds-spinner__circle`), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5', ref: strokeRef })] }));
-};
-Spinner.displayName = 'Spinner';
+    const mergedRefs = useMergeRefs([svgRef, ref]);
+    return (jsxs("svg", { "aria-label": ariaLabel, className: cl('ds-spinner', className), ref: mergedRefs, role: 'img', viewBox: '0 0 50 50', ...rest, children: [jsx("circle", { className: cl('ds-spinner__background'), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5' }), jsx("circle", { className: cl(`ds-spinner__circle`), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5', ref: strokeRef })] }));
+});
 
 export { Spinner };

package/dist/esm/index.js

@@ -41,14 +41,21 @@ export { PaginationItem } from './components/Pagination/PaginationItem.js';
 export { PaginationButton } from './components/Pagination/PaginationButton.js';
 export { SkipLink } from './components/SkipLink/SkipLink.js';
 export { Tooltip } from './components/Tooltip/Tooltip.js';
-export { Checkbox } from './components/form/Checkbox/index.js';
-export { CheckboxGroup } from './components/form/Checkbox/CheckboxGroup.js';
-export { Radio } from './components/form/Radio/index.js';
-export { RadioGroup } from './components/form/Radio/RadioGroup.js';
-export { Fieldset } from './components/form/Fieldset/Fieldset.js';
+export { Field } from './components/form/Field/index.js';
+export { FieldDescription } from './components/form/Field/FieldDescription.js';
+export { FieldAffix, FieldAffixes } from './components/form/Field/FieldAffix.js';
+export { FieldCounter } from './components/form/Field/FieldCounter.js';
+export { Checkbox } from './components/form/Checkbox/Checkbox.js';
+export { useCheckboxGroup } from './utilities/hooks/useCheckboxGroup/useCheckboxGroup.js';
+export { Radio } from './components/form/Radio/Radio.js';
+export { useRadioGroup } from './utilities/hooks/useRadioGroup/useRadioGroup.js';
+export { Fieldset } from './components/form/Fieldset/index.js';
+export { FieldsetLegend } from './components/form/Fieldset/FieldsetLegend.js';
+export { FieldsetDescription } from './components/form/Fieldset/FieldsetDescription.js';
 export { Switch } from './components/form/Switch/Switch.js';
 export { Textfield } from './components/form/Textfield/Textfield.js';
 export { Textarea } from './components/form/Textarea/Textarea.js';
+export { Input } from './components/form/Input/Input.js';
 export { Tabs } from './components/Tabs/index.js';
 export { TabsTab } from './components/Tabs/TabsTab.js';
 export { TabsList } from './components/Tabs/TabsList.js';
@@ -56,20 +63,24 @@ export { TabsPanel } from './components/Tabs/TabsPanel.js';
 export { ToggleGroup } from './components/ToggleGroup/index.js';
 export { ToggleGroupItem } from './components/ToggleGroup/ToggleGroupItem.js';
 export { Popover } from './components/Popover/index.js';
-export { PopoverContext } from './components/Popover/PopoverContext.js';
+export { PopoverTriggerContext } from './components/Popover/PopoverTriggerContext.js';
 export { PopoverTrigger } from './components/Popover/PopoverTrigger.js';
 export { Divider } from './components/Divider/Divider.js';
 export { Modal } from './components/Modal/index.js';
 export { ModalBlock } from './components/Modal/ModalBlock.js';
-export { ModalContext } from './components/Modal/ModalContext.js';
+export { ModalTriggerContext } from './components/Modal/ModalTriggerContext.js';
 export { ModalTrigger } from './components/Modal/ModalTrigger.js';
 export { Dropdown } from './components/Dropdown/index.js';
-export { DropdownContext } from './components/Dropdown/DropdownContext.js';
+export { DropdownTriggerContext } from './components/Dropdown/DropdownTriggerContext.js';
 export { DropdownList } from './components/Dropdown/DropdownList.js';
 export { DropdownHeading } from './components/Dropdown/DropdownHeading.js';
 export { DropdownItem } from './components/Dropdown/DropdownItem.js';
+export { DropdownButton } from './components/Dropdown/DropdownButton.js';
 export { DropdownTrigger } from './components/Dropdown/DropdownTrigger.js';
-export { Search } from './components/form/Search/Search.js';
+export { SearchClear } from './components/form/Search/SearchClear.js';
+export { SearchButton } from './components/form/Search/SearchButton.js';
+export { SearchInput } from './components/form/Search/SearchInput.js';
+export { Search } from './components/form/Search/index.js';
 export { Card } from './components/Card/index.js';
 export { CardBlock } from './components/Card/CardBlock.js';
 export { Combobox } from './components/form/Combobox/index.js';
@@ -81,6 +92,7 @@ export { TableBody } from './components/Table/TableBody.js';
 export { TableRow } from './components/Table/TableRow.js';
 export { TableCell } from './components/Table/TableCell.js';
 export { TableHeaderCell } from './components/Table/TableHeaderCell.js';
+export { TableFoot } from './components/Table/TableFoot.js';
 export { ErrorSummary } from './components/ErrorSummary/index.js';
 export { ErrorSummaryItem } from './components/ErrorSummary/ErrorSummaryItem.js';
 export { ErrorSummaryHeading } from './components/ErrorSummary/ErrorSummaryHeading.js';

package/dist/esm/utilities/hooks/useCheckboxGroup/useCheckboxGroup.js

@@ -0,0 +1,119 @@
+'use client';
+import { useMergeRefs } from '@floating-ui/react';
+import { useState, useId, useRef, useEffect } from 'react';
+
+const toggleIndeterminate = (getIndeterminateInputs, getInputs) => {
+    const inputs = getIndeterminateInputs();
+    const checked = !!getInputs(true).length;
+    const unchecked = !!getInputs(false).length;
+    for (const input of inputs) {
+        input.indeterminate = unchecked && checked;
+        input.checked = !unchecked && checked;
+    }
+};
+function useCheckboxGroup(props) {
+    const { error, name: groupName, onChange, value = [], disabled, readOnly, required, } = props || {};
+    const [groupValue, setGroupValue] = useState(value);
+    const namedId = useId();
+    const errorId = useId();
+    const checkboxRefs = useRef(new Set());
+    const indeterminateRefs = useRef(new Set());
+    const getInputs = (checked) => Array.from(checkboxRefs.current.values()).filter((input) => input.checked === checked);
+    const getIndeterminateInputs = () => Array.from(indeterminateRefs.current.values());
+    return {
+        /**
+         * Current value of the group.
+         */
+        value: groupValue,
+        /**
+         * Set the value of the group.
+         *
+         * @param value string[]
+         * @returns void
+         */
+        setValue: setGroupValue,
+        /**
+         * Props to send to the `Checkbox` component.
+         * Accepts value or object
+         * @example
+         * <Checkbox {...getCheckboxProps('value')} />
+         *
+         * @example allow indeterminate
+         * <Checkbox {...getCheckboxProps({ value: 'all', allowIndeterminate: true })} />
+         */
+        getCheckboxProps: (propsOrValue) => {
+            const props = typeof propsOrValue === 'string'
+                ? { value: propsOrValue }
+                : propsOrValue || {};
+            const { allowIndeterminate = false, ref = undefined, value = '', ...rest } = props;
+            const inputRef = useRef(null);
+            const mergedRefs = useMergeRefs([ref, inputRef]);
+            const handleChange = () => {
+                const nextGroupValue = Array.from(getInputs(true), ({ value }) => value);
+                setGroupValue(nextGroupValue);
+                onChange?.(nextGroupValue, groupValue);
+            };
+            const indeterminateChange = () => {
+                if (!inputRef.current)
+                    return;
+                const checked = !!inputRef.current.checked;
+                for (const input of getInputs(!checked)) {
+                    /* We use click to send both event and change checked state */
+                    input.click();
+                }
+            };
+            useEffect(() => {
+                if (!allowIndeterminate)
+                    return;
+                toggleIndeterminate(getIndeterminateInputs, getInputs);
+            }, [groupValue]);
+            useEffect(() => {
+                if (!inputRef.current)
+                    return;
+                const input = inputRef.current;
+                const refs = allowIndeterminate ? indeterminateRefs : checkboxRefs;
+                refs.current.add(input);
+                if (getIndeterminateInputs().length)
+                    toggleIndeterminate(getIndeterminateInputs, getInputs);
+                return () => {
+                    refs.current.delete(input);
+                };
+            }, [value]);
+            return {
+                /* Spread anything the user has set first */
+                ...rest,
+                /* Concat ours with the user prop */
+                'aria-describedby': `${error ? errorId : ''} ${rest['aria-describedby'] || ''}`.trim() ||
+                    undefined,
+                'aria-invalid': !!error || rest['aria-invalid'],
+                checked: allowIndeterminate ? undefined : groupValue.includes(value),
+                name: rest.name || groupName || namedId,
+                onChange: (e) => {
+                    rest.onChange?.(e);
+                    if (e.defaultPrevented)
+                        return;
+                    allowIndeterminate && indeterminateChange();
+                    handleChange();
+                },
+                ref: mergedRefs,
+                value,
+                disabled: disabled || rest.disabled,
+                readOnly: readOnly || rest.readOnly,
+                required: required || rest.required,
+            };
+        },
+        /**
+         * Props to send to the `ValidationMessage` component.
+         *
+         * @example
+         * <ValidationMessage {...validationMessageProps} />
+         */
+        validationMessageProps: {
+            children: error,
+            hidden: !error,
+            id: errorId,
+        },
+    };
+}
+
+export { useCheckboxGroup };

package/dist/esm/utilities/hooks/useDebounceCallback/useDebounceCallback.js

@@ -15,7 +15,7 @@ function useDebounceCallback(callback, delay = 50) {
         if (timeoutRef.current) {
             clearTimeout(timeoutRef.current);
         }
-        timeoutRef.current = setTimeout(() => {
+        timeoutRef.current = window.setTimeout(() => {
             callback(...args);
         }, delay);
     };