@digdir/designsystemet-react 0.52.0-alpha.0

package/dist/esm/components/form/Combobox/internal/ComboboxClearButton.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { XMarkIcon } from '@navikt/aksel-icons';
+import { clsx } from '../../../../node_modules/clsx/dist/clsx.js';
+import { ComboboxContext } from '../Combobox.js';
+import classes from '../Combobox.module.css.js';
+import utilityClasses from '../../../../utilities/utility.module.css.js';
+
+const ComboboxClearButton = () => {
+    const context = useContext(ComboboxContext);
+    if (!context) {
+        throw new Error('ComboboxContext is missing');
+    }
+    const { size, readOnly, disabled, cleanButtonLabel, inputRef, setSelectedOptions, setInputValue, } = context;
+    return (jsx("button", { disabled: disabled, className: clsx(classes.clearButton, classes[size], utilityClasses.focusable), onClick: () => {
+            if (readOnly)
+                return;
+            if (disabled)
+                return;
+            setSelectedOptions([]);
+            setInputValue('');
+        }, onKeyDown: (e) => {
+            if (readOnly)
+                return;
+            if (disabled)
+                return;
+            if (e.key === 'Enter') {
+                e.stopPropagation();
+                setSelectedOptions([]);
+                setInputValue('');
+                inputRef.current?.focus();
+            }
+        }, type: 'button', "aria-label": cleanButtonLabel, children: jsx(XMarkIcon, { fontSize: '1.5em', title: 'Clear selection' }) }));
+};
+ComboboxClearButton.displayName = 'ComboboxClearButton';
+var ComboboxClearButton$1 = ComboboxClearButton;
+
+export { ComboboxClearButton, ComboboxClearButton$1 as default };

package/dist/esm/components/form/Combobox/internal/ComboboxError.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import classes from '../Combobox.module.css.js';
+import { ErrorMessage } from '../../../Typography/ErrorMessage/ErrorMessage.js';
+
+const ComboboxError = ({ size, error, formFieldProps, }) => {
+    return (jsx("div", { className: classes.errorMessage, id: formFieldProps.errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: error && jsx(ErrorMessage, { size: size, children: error }) }));
+};
+ComboboxError.displayName = 'ComboboxError';
+var ComboboxError$1 = ComboboxError;
+
+export { ComboboxError, ComboboxError$1 as default };

package/dist/esm/components/form/Combobox/internal/ComboboxInput.js

@@ -0,0 +1,103 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useContext, useState, useEffect } from 'react';
+import { clsx } from '../../../../node_modules/clsx/dist/clsx.js';
+import { ChevronUpIcon, ChevronDownIcon } from '@navikt/aksel-icons';
+import { useMergeRefs } from '../../../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { ComboboxContext } from '../Combobox.js';
+import classes from '../Combobox.module.css.js';
+import textFieldClasses from '../../Textfield/Textfield.module.css.js';
+import ComboboxChips from './ComboboxChips.js';
+import ComboboxClearButton from './ComboboxClearButton.js';
+import { Box } from '../../../Box/Box.js';
+import { omit } from '../../../../utilities/objectUtils.js';
+
+const ComboboxInput = ({ ...rest }) => {
+    const context = useContext(ComboboxContext);
+    if (!context) {
+        throw new Error('ComboboxContext is missing');
+    }
+    const { forwareddRef, listId, size, readOnly, disabled, open, inputRef, refs, inputValue, activeDescendant, error, multiple, selectedOptions, formFieldProps, htmlSize, options, hideChips, setOpen, setActiveIndex, handleKeyDown, getReferenceProps, setInputValue, handleSelectOption, } = context;
+    const mergedRefs = useMergeRefs([forwareddRef, inputRef]);
+    // we need to check if input is in focus, to add focus styles to the wrapper
+    const [inputInFocus, setInputInFocus] = useState(false);
+    useEffect(() => {
+        const input = inputRef.current;
+        const onFocus = () => {
+            setInputInFocus(true);
+        };
+        const onBlur = () => {
+            setInputInFocus(false);
+        };
+        input?.addEventListener('focus', onFocus);
+        input?.addEventListener('blur', onBlur);
+        return () => {
+            input?.removeEventListener('focus', onFocus);
+            input?.removeEventListener('blur', onBlur);
+        };
+    }, [inputRef]);
+    // onChange function for the input
+    const onChange = (event) => {
+        const value = event.target.value;
+        setInputValue(value);
+        setActiveIndex(0);
+        if (typeof value === 'string') {
+            setOpen(true);
+        }
+        else {
+            setOpen(false);
+        }
+        // check if input value is the same as a label, if so, select it
+        const option = options.find((option) => option.label === value);
+        if (!option)
+            return;
+        if (selectedOptions.find((selectedOption) => selectedOption.value === option.value))
+            return;
+        handleSelectOption(option);
+        if (multiple) {
+            inputRef.current?.focus();
+        }
+        else {
+            // move cursor to the end of the input
+            setTimeout(() => {
+                inputRef.current?.setSelectionRange(option?.label?.length || 0, option?.label?.length || 0);
+            }, 0);
+        }
+    };
+    return (jsxs(Box
+    /* Props from floating-ui */
+    , { ...getReferenceProps({
+            ref: refs?.setReference,
+            role: null,
+            'aria-controls': null,
+            'aria-expanded': null,
+            'aria-haspopup': null,
+            /* If we click the wrapper, open the list, set index to first option, and focus the input */
+            onClick() {
+                if (disabled)
+                    return;
+                if (readOnly)
+                    return;
+                setOpen(true);
+                setActiveIndex(0);
+                inputRef.current?.focus();
+            },
+            /* Handles list navigation */
+            onKeyDown(event) {
+                handleKeyDown(event);
+            },
+            // preventDefault on keydown to avoid sending in form
+            onKeyPress(event) {
+                if (event.key === 'Enter') {
+                    event.preventDefault();
+                }
+            },
+        }), "aria-disabled": disabled, className: clsx(textFieldClasses.input, classes.inputWrapper, classes[size], inputInFocus && classes.inFocus, readOnly && classes.readonly, error && classes.error), children: [jsxs("div", { className: classes.chipAndInput, children: [multiple && !hideChips && jsx(ComboboxChips, {}), jsx("input", { ref: mergedRefs, "aria-activedescendant": activeDescendant, readOnly: readOnly, "aria-autocomplete": 'list', role: 'combobox', "aria-expanded": open, "aria-controls": listId, autoComplete: 'off', size: htmlSize, value: inputValue, ...omit(['style', 'className'], rest), ...formFieldProps.inputProps, onChange: (e) => {
+                            onChange(e);
+                            rest.onChange && rest.onChange(e);
+                        } })] }), multiple && selectedOptions.length > 0 && jsx(ComboboxClearButton, {}), jsx("div", { className: classes.arrow, children: open ? (jsx(ChevronUpIcon, { title: 'arrow up', fontSize: '1.5em' })) : (jsx(ChevronDownIcon, { title: 'arrow down', fontSize: '1.5em' })) })] }));
+};
+ComboboxInput.displayName = 'ComboboxInput';
+var ComboboxInput$1 = ComboboxInput;
+
+export { ComboboxInput, ComboboxInput$1 as default };

package/dist/esm/components/form/Combobox/internal/ComboboxLabel.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { clsx } from '../../../../node_modules/clsx/dist/clsx.js';
+import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
+import classes from '../Combobox.module.css.js';
+import utilityClasses from '../../../../utilities/utility.module.css.js';
+import { Label } from '../../../Typography/Label/Label.js';
+import { Paragraph } from '../../../Typography/Paragraph/Paragraph.js';
+
+const ComboboxLabel = ({ label, description, hideLabel, size, readOnly, formFieldProps, }) => {
+    return (jsxs(Fragment, { children: [label && (jsxs(Label, { size: size, htmlFor: formFieldProps.inputProps.id, className: clsx(classes.label, hideLabel && utilityClasses.visuallyHidden), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: classes.padlock })), label] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: formFieldProps.descriptionId, className: clsx(classes.description, hideLabel && utilityClasses.visuallyHidden), children: description }) }))] }));
+};
+ComboboxLabel.displayName = 'ComboboxLabel';
+var ComboboxLabel$1 = ComboboxLabel;
+
+export { ComboboxLabel, ComboboxLabel$1 as default };

package/dist/esm/components/form/Combobox/internal/ComboboxNative.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+
+const ComboboxNative = ({ selectedOptions, multiple, name, }) => {
+    return (jsx("select", { name: name, multiple: multiple, style: { display: 'none' }, value: multiple
+            ? selectedOptions.map((option) => option.value)
+            : selectedOptions[0]?.value, onChange: () => { }, children: selectedOptions.map((option) => (jsx("option", { value: option.value }, option.value))) }));
+};
+ComboboxNative.displayName = 'ComboboxNative';
+var ComboboxNative$1 = ComboboxNative;
+
+export { ComboboxNative, ComboboxNative$1 as default };

package/dist/esm/components/form/Combobox/useCombobox.js

@@ -0,0 +1,98 @@
+'use client';
+import * as React from 'react';
+import { useMemo } from 'react';
+import { ComboboxOption } from './Option/Option.js';
+import ComboboxCustom from './Custom/Custom.js';
+
+function useCombobox({ children, inputValue, multiple, selectedOptions, filter, }) {
+    const options = useMemo(() => {
+        const allOptions = [];
+        React.Children.forEach(children, (child) => {
+            if (isComboboxOption(child)) {
+                const props = child.props;
+                let label = props.displayValue || '';
+                if (!props.displayValue) {
+                    let childrenLabel = '';
+                    // go over children and find all strings
+                    React.Children.forEach(props.children, (child) => {
+                        if (typeof child === 'string') {
+                            childrenLabel += child;
+                        }
+                        else {
+                            throw new Error('If ComboboxOption is not a string, it must have a displayValue prop');
+                        }
+                    });
+                    label = childrenLabel;
+                }
+                allOptions.push({
+                    value: props.value,
+                    label,
+                    displayValue: props.displayValue,
+                    description: props.description,
+                });
+            }
+        });
+        return allOptions;
+    }, [children]);
+    const optionsChildren = useMemo(() => {
+        const valuesArray = Array.from(options);
+        const children_ = React.Children.toArray(children).filter((child) => isComboboxOption(child));
+        const activeValue = valuesArray.find((item) => item.label === inputValue);
+        if (activeValue && !multiple)
+            return children_;
+        if (inputValue === '' && !multiple)
+            return children_;
+        return children_.filter((child) => {
+            const { value } = child.props;
+            const option = valuesArray.find((item) => item.value === value);
+            if (!option)
+                return false;
+            const isSelected = selectedOptions.some((selectedOption) => selectedOption.value === value);
+            // show what we search for, and all selected options
+            return filter(inputValue, { ...option }) || isSelected;
+        });
+    }, [options, children, multiple, inputValue, selectedOptions, filter]);
+    const customIds = useMemo(() => {
+        // find all custom components with `interactive=true` and generate random values for them
+        const children_ = React.Children.toArray(children).filter((child) => {
+            return isInteractiveComboboxCustom(child);
+        });
+        // return all ids
+        return children_.map((child) => {
+            if (!child.props.id)
+                throw new Error('If ComboboxCustom is interactive, it must have an id');
+            return child.props.id;
+        });
+    }, [children]);
+    const optionValues = useMemo(() => {
+        // create an index map of values from optionsChildren
+        const options = optionsChildren.map((child) => {
+            const { value } = child.props;
+            return value;
+        });
+        return [...customIds, ...options];
+    }, [customIds, optionsChildren]);
+    const restChildren = useMemo(() => {
+        return React.Children.toArray(children).filter((child) => {
+            return !isComboboxOption(child);
+        });
+    }, [children]);
+    return {
+        optionsChildren,
+        optionValues,
+        restChildren,
+        options,
+        customIds,
+    };
+}
+function isComboboxOption(child) {
+    return React.isValidElement(child) && child.type === ComboboxOption;
+}
+function isComboboxCustom(child) {
+    return React.isValidElement(child) && child.type === ComboboxCustom;
+}
+function isInteractiveComboboxCustom(child) {
+    return isComboboxCustom(child) && child.props.interactive === true;
+}
+
+export { useCombobox as default, isComboboxCustom, isComboboxOption, isInteractiveComboboxCustom };

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

@@ -0,0 +1,28 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, forwardRef, useContext } from 'react';
+import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
+import utilityClasses from '../../../utilities/utility.module.css.js';
+import { useFieldset } from './useFieldset.js';
+import classes from './Fieldset.module.css.js';
+import { Label } from '../../Typography/Label/Label.js';
+import { ErrorMessage } from '../../Typography/ErrorMessage/ErrorMessage.js';
+import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
+
+const FieldsetContext = createContext(null);
+const Fieldset = forwardRef((props, ref) => {
+    const { children, legend, description, error, hideLegend, className, ...rest } = props;
+    const { fieldsetProps, size, readOnly, errorId, hasError, descriptionId } = useFieldset(props);
+    const fieldset = useContext(FieldsetContext);
+    return (jsx(FieldsetContext.Provider, { value: {
+            error: error ?? fieldset?.error,
+            errorId: hasError ? errorId : undefined,
+            size,
+            disabled: props?.disabled,
+            readOnly,
+        }, children: jsxs("fieldset", { ...fieldsetProps, className: clsx(classes.fieldset, !hideLegend && classes.withSpacing, readOnly && classes.readonly, props?.disabled && classes.disabled, className), ref: ref, ...rest, children: [jsx(Label, { asChild: true, size: size, children: jsx("legend", { className: classes.legend, children: jsxs("span", { className: clsx(classes.legendContent, hideLegend && utilityClasses.visuallyHidden), children: [readOnly && (jsx(PadlockLockedFillIcon, { className: classes.padlock, "aria-hidden": true })), legend] }) }) }), description && (jsx(Paragraph, { size: size, asChild: true, short: true, children: jsx("div", { id: descriptionId, className: clsx(classes.description, hideLegend && utilityClasses.visuallyHidden), children: description }) })), children, jsx("div", { id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', className: classes.errorWrapper, children: hasError && jsx(ErrorMessage, { size: size, children: error }) })] }) }));
+});
+Fieldset.displayName = 'Fieldset';
+
+export { Fieldset, FieldsetContext };

package/dist/esm/components/form/Fieldset/Fieldset.module.css.js

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"fieldset":"fds-fieldset-fieldset-4ef8e1c","withSpacing":"fds-fieldset-withSpacing-4ef8e1c","description":"fds-fieldset-description-4ef8e1c","legend":"fds-fieldset-legend-4ef8e1c","readonly":"fds-fieldset-readonly-4ef8e1c","legendContent":"fds-fieldset-legendContent-4ef8e1c","padlock":"fds-fieldset-padlock-4ef8e1c","disabled":"fds-fieldset-disabled-4ef8e1c","errorWrapper":"fds-fieldset-errorWrapper-4ef8e1c"};
+
+export { classes as default };

package/dist/esm/components/form/Fieldset/useFieldset.js

@@ -0,0 +1,17 @@
+'use client';
+import { useFormField } from '../useFormField.js';
+
+/** Handles fieldset props and state */
+const useFieldset = (props) => {
+    const formField = useFormField(props, 'fieldset');
+    const { inputProps } = formField;
+    return {
+        ...formField,
+        fieldsetProps: {
+            'aria-invalid': inputProps['aria-invalid'],
+            'aria-describedby': inputProps['aria-describedby'],
+        },
+    };
+};
+
+export { useFieldset };

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

@@ -0,0 +1,21 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
+import classes from './NativeSelect.module.css.js';
+import utilityClasses from '../../../utilities/utility.module.css.js';
+import { useNativeSelect } from './useNativeSelect.js';
+import { omit } from '../../../utilities/objectUtils.js';
+import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
+import { Label } from '../../Typography/Label/Label.js';
+import { ErrorMessage } from '../../Typography/ErrorMessage/ErrorMessage.js';
+
+const NativeSelect = forwardRef((props, ref) => {
+    const { children, disabled = false, label, hideLabel = false, error, className, htmlSize = 0, ...rest } = props;
+    const { selectProps, errorId, readOnly = false, size = 'medium', } = useNativeSelect(props);
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: clsx(classes.formField, disabled && classes.disabled, readOnly && classes.readOnly, error && classes.error), children: [label && (jsxs(Label, { weight: 'medium', size: size, htmlFor: selectProps.id, className: clsx(classes.label, hideLabel && utilityClasses.visuallyHidden), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: classes.padlock })), label] })), jsx("select", { disabled: disabled || readOnly, ref: ref, size: htmlSize, className: clsx(classes.select, classes[size], utilityClasses.focusable, props.multiple && classes.multiple, className), ...omit(['size', 'error', 'errorId'], rest), ...omit(['readOnly', 'disabled'], selectProps), children: children }), error && (jsx("div", { id: errorId, className: classes.errorMessage, "aria-live": 'polite', "aria-relevant": 'additions removals', children: jsx(ErrorMessage, { size: size, children: error }) }))] }) }));
+});
+NativeSelect.displayName = 'NativeSelect';
+
+export { NativeSelect };

package/dist/esm/components/form/NativeSelect/NativeSelect.module.css.js

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"select":"fds-nativeselect-select-88cf3fbc","multiple":"fds-nativeselect-multiple-88cf3fbc","small":"fds-nativeselect-small-88cf3fbc","medium":"fds-nativeselect-medium-88cf3fbc","large":"fds-nativeselect-large-88cf3fbc","formField":"fds-nativeselect-formField-88cf3fbc","disabled":"fds-nativeselect-disabled-88cf3fbc","readOnly":"fds-nativeselect-readOnly-88cf3fbc","error":"fds-nativeselect-error-88cf3fbc","padlock":"fds-nativeselect-padlock-88cf3fbc","errorMessage":"fds-nativeselect-errorMessage-88cf3fbc","label":"fds-nativeselect-label-88cf3fbc"};
+
+export { classes as default };

package/dist/esm/components/form/NativeSelect/useNativeSelect.js

@@ -0,0 +1,35 @@
+'use client';
+import { useContext } from 'react';
+import { useFormField } from '../useFormField.js';
+import { FieldsetContext } from '../Fieldset/Fieldset.js';
+
+/** Handles props for `NativeSelect` in context with `Fieldset` */
+const useNativeSelect = (props) => {
+    const fieldset = useContext(FieldsetContext);
+    const { inputProps: selectProps, readOnly, ...rest } = useFormField(props, 'select');
+    return {
+        ...rest,
+        readOnly,
+        size: fieldset?.size ?? props.size,
+        selectProps: {
+            ...selectProps,
+            readOnly,
+            onClick: (e) => {
+                if (readOnly) {
+                    e.preventDefault();
+                    return;
+                }
+                props?.onClick?.(e);
+            },
+            onChange: (e) => {
+                if (readOnly) {
+                    e.preventDefault();
+                    return;
+                }
+                props?.onChange?.(e);
+            },
+        },
+    };
+};
+
+export { useNativeSelect };

package/dist/esm/components/form/Radio/Group/Group.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, forwardRef, useId } from 'react';
+import { clsx } from '../../../../node_modules/clsx/dist/clsx.js';
+import classes from './Group.module.css.js';
+import { Fieldset } from '../../Fieldset/Fieldset.js';
+
+const RadioGroupContext = createContext(null);
+const RadioGroup = forwardRef(({ onChange, children, value, readOnly, defaultValue, name, size = 'medium', required, inline, className, ...rest }, ref) => {
+    const nameId = useId();
+    return (jsx(Fieldset, { readOnly: readOnly, size: size, className: className, ref: ref, ...rest, children: jsx(RadioGroupContext.Provider, { value: {
+                value,
+                defaultValue,
+                name: name ?? `radiogroup-name-${nameId}`,
+                onChange,
+                required,
+            }, children: jsx("div", { className: clsx(inline && classes.inline), children: children }) }) }));
+});
+RadioGroup.displayName = 'RadioGroup';
+
+export { RadioGroup, RadioGroupContext };

package/dist/esm/components/form/Radio/Group/Group.module.css.js

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"inline":"fds-group-inline-d0931a50"};
+
+export { classes as default };

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

@@ -0,0 +1,18 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import classes from './Radio.module.css.js';
+import { useRadio } from './useRadio.js';
+import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
+import { omit } from '../../../utilities/objectUtils.js';
+import { Label } from '../../Typography/Label/Label.js';
+
+const Radio = forwardRef((props, ref) => {
+    const { children, description, className, ...rest } = props;
+    const { inputProps, descriptionId, hasError, size = 'medium', readOnly, } = useRadio(props);
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: clsx(classes.container, classes[size], inputProps.disabled && classes.disabled, hasError && classes.error, readOnly && classes.readonly, className), children: [jsx("input", { className: classes.input, ref: ref, ...omit(['size', 'error'], rest), ...inputProps }), jsx(Label, { className: classes.label, htmlFor: inputProps.id, size: size, weight: 'regular', children: jsx("span", { children: children }) }), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: classes.description, children: description }) }))] }) }));
+});
+Radio.displayName = 'Radio';
+
+export { Radio };

package/dist/esm/components/form/Radio/Radio.module.css.js

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"container":"fds-radio-container-631ff5a4","label":"fds-radio-label-631ff5a4","description":"fds-radio-description-631ff5a4","input":"fds-radio-input-631ff5a4","disabled":"fds-radio-disabled-631ff5a4","readonly":"fds-radio-readonly-631ff5a4","error":"fds-radio-error-631ff5a4","small":"fds-radio-small-631ff5a4","medium":"fds-radio-medium-631ff5a4","large":"fds-radio-large-631ff5a4"};
+
+export { classes as default };

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

@@ -0,0 +1,10 @@
+'use client';
+import { Radio as Radio$1 } from './Radio.js';
+import { RadioGroup } from './Group/Group.js';
+
+/** `<input> element with `type="radio"` used for selecting one option */
+const Radio = Radio$1;
+Radio.Group = RadioGroup;
+Radio.Group.displayName = 'Radio.Group';
+
+export { Radio, RadioGroup };

package/dist/esm/components/form/Radio/useRadio.js

@@ -0,0 +1,44 @@
+'use client';
+import { useContext } from 'react';
+import { useFormField } from '../useFormField.js';
+import { RadioGroupContext } from './Group/Group.js';
+
+/** Handles props for `Radio` in context with `Radio.Group` (and `Fieldset`) */
+const useRadio = (props) => {
+    const radioGroup = useContext(RadioGroupContext);
+    const { inputProps, readOnly, ...rest } = useFormField(props, 'radio');
+    return {
+        ...rest,
+        readOnly,
+        inputProps: {
+            ...inputProps,
+            readOnly,
+            type: 'radio',
+            name: radioGroup?.name ?? props.name,
+            required: radioGroup?.required,
+            defaultChecked: radioGroup?.defaultValue
+                ? radioGroup?.defaultValue === props.value
+                : props.defaultChecked,
+            checked: radioGroup?.value
+                ? radioGroup?.value === props.value
+                : props.checked,
+            onClick: (e) => {
+                if (readOnly) {
+                    e.preventDefault();
+                    return;
+                }
+                props?.onClick?.(e);
+            },
+            onChange: (e) => {
+                if (readOnly) {
+                    e.preventDefault();
+                    return;
+                }
+                props?.onChange?.(e);
+                radioGroup?.onChange?.(props.value);
+            },
+        },
+    };
+};
+
+export { useRadio };

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

@@ -0,0 +1,48 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useRef, useState, useCallback } from 'react';
+import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import { MagnifyingGlassIcon, XMarkIcon } from '@navikt/aksel-icons';
+import { useMergeRefs } from '../../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { useSearch } from './useSearch.js';
+import classes from './Search.module.css.js';
+import utilityClasses from '../../../utilities/utility.module.css.js';
+import { Button } from '../../Button/Button.js';
+import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
+import { Label } from '../../Typography/Label/Label.js';
+import { omit } from '../../../utilities/objectUtils.js';
+import { ErrorMessage } from '../../Typography/ErrorMessage/ErrorMessage.js';
+
+/** 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, hasError, errorId, size = 'medium' } = 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 && 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: clsx(classes.formField, inputProps.disabled && classes.disabled, classes[size], className), children: [label && (jsx(Label, { size: size, weight: 'medium', htmlFor: inputProps.id, className: clsx(classes.label, hideLabel && utilityClasses.visuallyHidden), children: jsx("span", { children: label }) })), jsxs("div", { className: classes.field, children: [jsxs("div", { className: classes.field, children: [isSimple && (jsx(MagnifyingGlassIcon, { className: classes.icon, "aria-hidden": true })), jsx("input", { ref: mergedRef, size: htmlSize, value: value ?? internalValue, disabled: disabled, className: clsx(classes.input, utilityClasses.focusable, classes[size], isSimple && classes.simple, !isSimple && classes.withSearchButton), ...omit(['size', 'error', 'errorId', 'readOnly'], rest), ...inputProps, onChange: handleChange }), showClearButton && (jsxs("button", { className: clsx(classes.clearButton, utilityClasses.focusable), type: 'button', onClick: handleClear, disabled: disabled, children: [jsx("span", { className: utilityClasses.visuallyHidden, children: clearButtonLabel }), jsx(XMarkIcon, { "aria-hidden": true })] }))] }), !isSimple && (jsx(Button, { className: classes.searchButton, size: size, variant: variant, type: 'submit', onClick: handleSearchClick, disabled: disabled, children: searchButtonLabel }))] }), jsx("div", { className: classes.errorMessage, id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: hasError && jsx(ErrorMessage, { size: size, children: props.error }) })] }) }));
+});
+Search.displayName = 'Search';
+
+export { Search };

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

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"formField":"fds-search-formField-7eb2965c","small":"fds-search-small-7eb2965c","medium":"fds-search-medium-7eb2965c","large":"fds-search-large-7eb2965c","errorMessage":"fds-search-errorMessage-7eb2965c","label":"fds-search-label-7eb2965c","field":"fds-search-field-7eb2965c","icon":"fds-search-icon-7eb2965c","input":"fds-search-input-7eb2965c","withSearchButton":"fds-search-withSearchButton-7eb2965c","disabled":"fds-search-disabled-7eb2965c","searchButton":"fds-search-searchButton-7eb2965c","clearButton":"fds-search-clearButton-7eb2965c","simple":"fds-search-simple-7eb2965c","error":"fds-search-error-7eb2965c"};
+
+export { classes as default };

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

@@ -0,0 +1,43 @@
+'use client';
+import { useContext } from 'react';
+import { useFormField } from '../useFormField.js';
+import { FieldsetContext } from '../Fieldset/Fieldset.js';
+
+const sizeMap = {
+    small: 'small',
+    medium: 'medium',
+    large: 'large',
+};
+/** Handles props for `Search` in context with `Fieldset` */
+const useSearch = (props) => {
+    const fieldset = useContext(FieldsetContext);
+    const { inputProps, readOnly, ...rest } = useFormField(props, 'search');
+    const fieldSetSize = fieldset?.size ? sizeMap[fieldset?.size] : null;
+    return {
+        ...rest,
+        readOnly,
+        size: fieldSetSize ?? props.size,
+        inputProps: {
+            ...inputProps,
+            type: 'search',
+            name: props.name ?? 'q',
+            readOnly,
+            onClick: (e) => {
+                if (readOnly) {
+                    e.preventDefault();
+                    return;
+                }
+                props?.onClick?.(e);
+            },
+            onChange: (e) => {
+                if (readOnly) {
+                    e.preventDefault();
+                    return;
+                }
+                props?.onChange?.(e);
+            },
+        },
+    };
+};
+
+export { useSearch };

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

@@ -0,0 +1,19 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
+import classes from './Switch.module.css.js';
+import { useSwitch } from './useSwitch.js';
+import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
+import { omit } from '../../../utilities/objectUtils.js';
+import { Label } from '../../Typography/Label/Label.js';
+
+const Switch = forwardRef((props, ref) => {
+    const { children, description, position = 'left', className, ...rest } = props;
+    const { inputProps, descriptionId, size = 'medium', readOnly, } = useSwitch(props);
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: clsx(classes.switch, classes[size], inputProps.disabled && classes.disabled, readOnly && classes.readonly, className), children: [jsx("input", { className: classes.input, ref: ref, ...omit(['size', 'error'], rest), ...inputProps }), jsxs(Label, { className: clsx(classes.label, position === 'right' && classes.right), htmlFor: inputProps.id, size: size, weight: 'regular', children: [jsx("span", { className: classes.track, children: jsx("span", { className: classes.thumb }) }), readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: classes.padlock })), children && jsx("span", { children: children })] }), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: classes.description, children: description }) }))] }) }));
+});
+Switch.displayName = 'Switch';
+
+export { Switch };