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

package/dist/types/utilities/hooks/useRadioGroup/useRadioGroup.d.ts

@@ -0,0 +1,370 @@
+import type { ReactNode } from 'react';
+import type { RadioProps } from '../../../components';
+export type UseRadioGroupProps = {
+    /** Set disabled state of all radios */
+    disabled?: boolean;
+    /** Shared error message for all radios */
+    error?: ReactNode;
+    /** Name of all radios.
+     * @default string of auto-generated name
+     */
+    name?: string;
+    /** Set read only state of all radios */
+    readOnly?: boolean;
+    /** Set required state of all radios */
+    required?: boolean;
+    /**
+     * Initial value of the group
+     */
+    value?: string;
+    /** Callback when selected radios changes */
+    onChange?: (nextValue: string, prevValue: string) => void;
+};
+/**
+ * Get anything that is set on a radio, but
+ * remove anything that comes from the group itself.
+ */
+export type GetRadioProps = Omit<RadioProps, 'prefix' | 'role' | 'type' | 'size' | 'aria-label' | 'aria-labelledby' | 'label' | 'name' | 'checked' | 'value'> & {
+    ref?: React.RefObject<HTMLInputElement>;
+    value?: string;
+};
+/**
+ * useRadioGroup is used to group multiple <Radio> components
+ * @example
+ * const { getRadioProps, validationMessageProps, value, setValue } = useRadioGroup({
+ *   disabled: false,
+ *   error: 'Validation message text',
+ *   name: 'group-name',
+ *   onChange: (nextValue, prevValue) => {},
+ *   readOnly: false,
+ *   required: true,
+ *   value: '',
+ * });
+ */
+export declare function useRadioGroup({ error, readOnly, required, disabled, name, onChange, value: initalValue, }?: UseRadioGroupProps): {
+    /**
+     * Current value of the group.
+     */
+    value: string;
+    /**
+     * Set the value of the group.
+     *
+     * @param value string[]
+     * @returns void
+     */
+    setValue: React.Dispatch<React.SetStateAction<string>>;
+    /**
+     * Props to send to the `Radio` component.
+     * @example
+     * <Radio label="Option 1" {...getRadioProps('option-1')} />
+     */
+    getRadioProps: (propsOrValue: string | GetRadioProps) => {
+        name: string;
+        'aria-describedby': string | undefined;
+        'aria-invalid': boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+        value: string;
+        ref: ((instance: HTMLInputElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null;
+        required: boolean | undefined;
+        readOnly: boolean | undefined;
+        disabled: boolean | undefined;
+        onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+        defaultValue?: string | number | readonly string[] | undefined;
+        onBlur?: React.FocusEventHandler<HTMLInputElement> | undefined;
+        onFocus?: React.FocusEventHandler<HTMLInputElement> | undefined;
+        children?: ReactNode | undefined;
+        defaultChecked?: boolean | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        accessKey?: string | undefined;
+        autoFocus?: boolean | undefined;
+        className?: string | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+        contextMenu?: string | undefined;
+        dir?: string | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        hidden?: boolean | undefined;
+        id?: string | undefined;
+        lang?: string | undefined;
+        nonce?: string | undefined;
+        slot?: string | undefined;
+        spellCheck?: (boolean | "true" | "false") | undefined;
+        style?: React.CSSProperties | undefined;
+        tabIndex?: number | undefined;
+        title?: string | undefined;
+        translate?: "yes" | "no" | undefined;
+        radioGroup?: string | undefined;
+        about?: string | undefined;
+        content?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        property?: string | undefined;
+        rel?: string | undefined;
+        resource?: string | undefined;
+        rev?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autoCapitalize?: string | undefined;
+        autoCorrect?: string | undefined;
+        autoSave?: string | undefined;
+        color?: string | undefined;
+        itemProp?: string | undefined;
+        itemScope?: boolean | undefined;
+        itemType?: string | undefined;
+        itemID?: string | undefined;
+        itemRef?: string | undefined;
+        results?: number | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+        is?: string | undefined;
+        popovertarget?: string | undefined;
+        'data-size'?: "sm" | "md" | "lg" | undefined;
+        'data-color'?: import("../../../colors").Color | undefined;
+        "aria-activedescendant"?: string | undefined;
+        "aria-atomic"?: (boolean | "true" | "false") | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+        "aria-braillelabel"?: string | undefined;
+        "aria-brailleroledescription"?: string | undefined;
+        "aria-busy"?: (boolean | "true" | "false") | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-colcount"?: number | undefined;
+        "aria-colindex"?: number | undefined;
+        "aria-colindextext"?: string | undefined;
+        "aria-colspan"?: number | undefined;
+        "aria-controls"?: string | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+        "aria-description"?: string | undefined;
+        "aria-details"?: string | undefined;
+        "aria-disabled"?: (boolean | "true" | "false") | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+        "aria-errormessage"?: string | undefined;
+        "aria-expanded"?: (boolean | "true" | "false") | undefined;
+        "aria-flowto"?: string | undefined;
+        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        "aria-hidden"?: (boolean | "true" | "false") | undefined;
+        "aria-keyshortcuts"?: string | undefined;
+        "aria-level"?: number | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined;
+        "aria-modal"?: (boolean | "true" | "false") | undefined;
+        "aria-multiline"?: (boolean | "true" | "false") | undefined;
+        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined;
+        "aria-owns"?: string | undefined;
+        "aria-placeholder"?: string | undefined;
+        "aria-posinset"?: number | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-readonly"?: (boolean | "true" | "false") | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+        "aria-required"?: (boolean | "true" | "false") | undefined;
+        "aria-roledescription"?: string | undefined;
+        "aria-rowcount"?: number | undefined;
+        "aria-rowindex"?: number | undefined;
+        "aria-rowindextext"?: string | undefined;
+        "aria-rowspan"?: number | undefined;
+        "aria-selected"?: (boolean | "true" | "false") | undefined;
+        "aria-setsize"?: number | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+        "aria-valuemax"?: number | undefined;
+        "aria-valuemin"?: number | undefined;
+        "aria-valuenow"?: number | undefined;
+        "aria-valuetext"?: string | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined;
+        onCopy?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
+        onCopyCapture?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
+        onCut?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
+        onCutCapture?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
+        onPaste?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
+        onPasteCapture?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
+        onCompositionEnd?: React.CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionEndCapture?: React.CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionStart?: React.CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionStartCapture?: React.CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionUpdate?: React.CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLInputElement> | undefined;
+        onFocusCapture?: React.FocusEventHandler<HTMLInputElement> | undefined;
+        onBlurCapture?: React.FocusEventHandler<HTMLInputElement> | undefined;
+        onChangeCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onBeforeInput?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onBeforeInputCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onInput?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onInputCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onReset?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onResetCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onSubmit?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onSubmitCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onInvalid?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onInvalidCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onLoad?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onError?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onErrorCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onKeyDown?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyDownCapture?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyPress?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyPressCapture?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyUp?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyUpCapture?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+        onAbort?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onAbortCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onCanPlay?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onCanPlayCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onCanPlayThrough?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onCanPlayThroughCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onDurationChange?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onDurationChangeCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onEmptied?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onEmptiedCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onEncrypted?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onEncryptedCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onEnded?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onEndedCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadedData?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadedDataCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadedMetadata?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadedMetadataCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadStart?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadStartCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onPause?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onPauseCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onPlay?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onPlayCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onPlaying?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onPlayingCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onProgress?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onProgressCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onRateChange?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onRateChangeCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onResize?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onResizeCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onSeeked?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onSeekedCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onSeeking?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onSeekingCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onStalled?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onStalledCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onSuspend?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onSuspendCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onTimeUpdate?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onTimeUpdateCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onVolumeChange?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onVolumeChangeCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onWaiting?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onWaitingCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onAuxClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onAuxClickCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onClickCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onContextMenu?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onContextMenuCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onDoubleClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onDoubleClickCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onDrag?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragEnd?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragEndCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragEnter?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragEnterCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragExit?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragExitCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragLeave?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragLeaveCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragOver?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragOverCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragStart?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragStartCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDrop?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDropCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onMouseDown?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseDownCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseEnter?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseLeave?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseMove?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseMoveCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseOut?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseOutCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseOver?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseOverCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseUp?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseUpCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onSelect?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onSelectCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onTouchCancel?: React.TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchCancelCapture?: React.TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchEnd?: React.TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchEndCapture?: React.TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchMove?: React.TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchMoveCapture?: React.TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchStart?: React.TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchStartCapture?: React.TouchEventHandler<HTMLInputElement> | undefined;
+        onPointerDown?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerDownCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerMove?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerMoveCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerUp?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerUpCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerCancel?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerCancelCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerEnter?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerLeave?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerOver?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerOverCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerOut?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerOutCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onGotPointerCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onLostPointerCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onScroll?: React.UIEventHandler<HTMLInputElement> | undefined;
+        onScrollCapture?: React.UIEventHandler<HTMLInputElement> | undefined;
+        onWheel?: React.WheelEventHandler<HTMLInputElement> | undefined;
+        onWheelCapture?: React.WheelEventHandler<HTMLInputElement> | undefined;
+        onAnimationStart?: React.AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationStartCapture?: React.AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationEnd?: React.AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationEndCapture?: React.AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationIteration?: React.AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationIterationCapture?: React.AnimationEventHandler<HTMLInputElement> | undefined;
+        onTransitionEnd?: React.TransitionEventHandler<HTMLInputElement> | undefined;
+        onTransitionEndCapture?: React.TransitionEventHandler<HTMLInputElement> | undefined;
+        form?: string | undefined;
+        pattern?: string | undefined;
+        list?: string | undefined;
+        step?: number | string | undefined;
+        height?: number | string | undefined;
+        max?: number | string | undefined;
+        min?: number | string | undefined;
+        width?: number | string | undefined;
+        formAction?: string | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
+        formEncType?: string | undefined;
+        formMethod?: string | undefined;
+        formNoValidate?: boolean | undefined;
+        formTarget?: string | undefined;
+        multiple?: boolean | undefined;
+        alt?: string | undefined;
+        autoComplete?: React.HTMLInputAutoCompleteAttribute | undefined;
+        accept?: string | undefined;
+        capture?: boolean | "user" | "environment" | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+        maxLength?: number | undefined;
+        minLength?: number | undefined;
+        src?: string | undefined;
+        validation?: ReactNode;
+        placeholder?: string | undefined;
+        description?: ReactNode;
+    };
+    /**
+     * Props to send to the `ValidationMessage` component.
+     *
+     * @example
+     * <ValidationMessage {...validationMessageProps} />
+     */
+    validationMessageProps: {
+        children: ReactNode;
+        hidden: boolean;
+        id: string;
+    };
+};
+//# sourceMappingURL=useRadioGroup.d.ts.map

package/dist/types/utilities/hooks/useRadioGroup/useRadioGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRadioGroup.d.ts","sourceRoot":"","sources":["../../../../src/utilities/hooks/useRadioGroup/useRadioGroup.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEtD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3D,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,UAAU,EACR,QAAQ,GACR,MAAM,GACN,MAAM,GACN,MAAM,GACN,YAAY,GACZ,iBAAiB,GACjB,OAAO,GACP,MAAM,GACN,SAAS,GACT,OAAO,CACV,GAAG;IACF,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,KAAK,EAAE,WAAgB,GACxB,GAAE,kBAAuB;IAOtB;;OAEG;;IAEH;;;;;OAKG;;IAEH;;;;OAIG;kCAC2B,MAAM,GAAG,aAAa;;;;;;;;;sBAwClC,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAOrD;;;;;OAKG;;;;;;EAON"}

package/dist/types/utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSynchronizedAnimation.d.ts","sourceRoot":"","sources":["../../../../../src/utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.ts"],"names":[],"mappings":"AAOA;;;;;;;;;;;GAWG;AACH,wBAAgB,wBAAwB,CAAC,CAAC,EAAE,aAAa,EAAE,MAAM,sBA2ChE"}
+{"version":3,"file":"useSynchronizedAnimation.d.ts","sourceRoot":"","sources":["../../../../src/utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.ts"],"names":[],"mappings":"AAOA;;;;;;;;;;;GAWG;AACH,wBAAgB,wBAAwB,CAAC,CAAC,EAAE,aAAa,EAAE,MAAM,sBA2ChE"}

package/dist/types/utilities/index.d.ts

@@ -1,4 +1,5 @@
 export * from './omit/omit';
 export * from './hooks';
 export * from './RovingFocus';
+export type * from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/utilities/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utilities/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utilities/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,mBAAmB,SAAS,CAAC"}

package/dist/types/utilities/omit/omit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"omit.d.ts","sourceRoot":"","sources":["../../../../src/utilities/omit/omit.ts"],"names":[],"mappings":"AACA,KAAK,aAAa,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,CAAC;AAE/D;;;;;;GAMG;AACH,eAAO,MAAM,IAAI,UAAW,MAAM,EAAE,OAAO,aAAa,KAAG,MAiB1D,CAAC"}
+{"version":3,"file":"omit.d.ts","sourceRoot":"","sources":["../../../src/utilities/omit/omit.ts"],"names":[],"mappings":"AACA,KAAK,aAAa,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,CAAC;AAE/D;;;;;;GAMG;AACH,eAAO,MAAM,IAAI,UAAW,MAAM,EAAE,OAAO,aAAa,KAAG,MAiB1D,CAAC"}

package/dist/types/utilities/types.d.ts

@@ -0,0 +1,10 @@
+/** Simplify a type signature to help with readability in editor hints, error messages etc */
+export type Simplify<T> = {
+    [Key in keyof T]: T[Key];
+} & {};
+/**
+ * Create a new type with the properties of the first type merged with the properties of the second type.
+ * If a key exists in both types, the property from the *second* type will be used.
+ */
+export type MergeRight<T1, T2> = Simplify<Omit<T1, keyof T2> & T2>;
+//# sourceMappingURL=types.d.ts.map

package/dist/types/utilities/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/utilities/types.ts"],"names":[],"mappings":"AAAA,6FAA6F;AAC7F,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI;KAAG,GAAG,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC;CAAE,GAAG,EAAE,CAAC;AAE5D;;;GAGG;AACH,MAAM,MAAM,UAAU,CAAC,EAAE,EAAE,EAAE,IAAI,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digdir/designsystemet-react",
-  "version": "1.0.0-next.35",
+  "version": "1.0.0-next.37",
   "description": "React components for Designsystemet",
   "author": "Designsystemet team",
   "repository": {
@@ -15,6 +15,12 @@
       "types": "./dist/types/index.d.ts",
       "import": "./dist/esm/index.js",
       "require": "./dist/cjs/index.js"
+    },
+    "./colors": {
+      "types": "./dist/types/colors.d.ts"
+    },
+    "./react-types.d.ts": {
+      "types": "./dist/react-types.d.ts"
     }
   },
   "sideEffects": false,
@@ -22,10 +28,10 @@
     "dist/**"
   ],
   "scripts": {
-    "build": "yarn run clean && tsc -p tsconfig.build.json && rollup -c --bundleConfigAsCjs",
-    "clean": "rimraf dist && rimraf tsc-build",
+    "build": "yarn run clean && tsc -b tsconfig.lib.json --emitDeclarationOnly false && rollup -c --bundleConfigAsCjs",
+    "clean": "rimraf dist && rimraf tsc-build && rimraf --glob \"*.tsbuildinfo\"",
     "copy-css-to-build": "copyfiles -u 1 ./src/**/*.css ./tsc-build/",
-    "types": "tsc --noEmit"
+    "types": "tsc -b"
   },
   "peerDependencies": {
     "react": ">=18.3.1",
@@ -56,6 +62,7 @@
     "react-dom": "^18.3.1",
     "rimraf": "^6.0.1",
     "rollup": "^4.22.4",
+    "rollup-plugin-copy": "^3.5.0",
     "typescript": "^5.5.4"
   }
 }

package/dist/cjs/components/Dropdown/DropdownContext.js

@@ -1,26 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-require('../Popover/index.js');
-var PopoverContext = require('../Popover/PopoverContext.js');
-
-/**
- * DropdownContext is the root component for the DropdownMenu component.
- * @example
- * <DropdownMenu.Context>
- *  <DropdownMenu.Trigger>Dropdown</DropdownMenu.Trigger>
- *  <DropdownMenu>
- *   <DropdownMenu.Heading>Heading</DropdownMenu.Heading>
- *    <DropdownMenu.List>
- *      <DropdownMenu.Item>Button 1</DropdownMenu.Item>
- *    </DropdownMenu.List>
- *  </DropdownMenu>
- * </DropdownMenu.Context>
- */
-const DropdownContext = ({ children }) => {
-    return jsxRuntime.jsx(PopoverContext.PopoverContext, { children: children });
-};
-DropdownContext.displayName = 'DropdownContext';
-
-exports.DropdownContext = DropdownContext;

package/dist/cjs/components/form/CharacterCounter.js

@@ -1,17 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var ValidationMessage = require('../ValidationMessage/ValidationMessage.js');
-
-const defaultLabel = (count) => count > -1 ? `${count} tegn igjen` : `${Math.abs(count)} tegn for mye`;
-const defaultSrLabel = (maxCount) => `Tekstfelt med plass til ${maxCount} tegn`;
-const CharacterCounter = ({ label = defaultLabel, srLabel: propsSrLabel, maxCount, value, id, size, }) => {
-    const currentCount = maxCount - value.length;
-    const hasExceededLimit = value.length > maxCount;
-    const srLabel = propsSrLabel ? propsSrLabel : defaultSrLabel(maxCount);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: `ds-sr-only`, id: id, children: srLabel }), jsxRuntime.jsx(ValidationMessage.ValidationMessage, { asChild: true, size: size, error: hasExceededLimit, children: jsxRuntime.jsx("span", { "aria-live": hasExceededLimit ? 'polite' : 'off', children: label(currentCount) }) })] }));
-};
-CharacterCounter.displayName = 'CharacterCounter';
-
-exports.CharacterCounter = CharacterCounter;

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

@@ -1,31 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var cl = require('clsx/lite');
-var react = require('react');
-var Fieldset = require('../Fieldset/Fieldset.js');
-
-const CheckboxGroupContext = react.createContext(null);
-const CheckboxGroup = react.forwardRef(({ onChange, children, value, readOnly, defaultValue, size = 'md', ...rest }, ref) => {
-    const [internalValue, setInternalValue] = react.useState(defaultValue ?? []);
-    const toggleValue = (checkboxValue) => {
-        const currentValue = value ?? internalValue;
-        const updatedValue = currentValue.includes(checkboxValue)
-            ? currentValue.filter((x) => x !== checkboxValue)
-            : [...currentValue, checkboxValue];
-        if (typeof value !== 'undefined' || value !== null) {
-            setInternalValue(updatedValue);
-        }
-        onChange?.(updatedValue);
-    };
-    return (jsxRuntime.jsx(Fieldset.Fieldset, { readOnly: readOnly, size: size, ref: ref, ...rest, children: jsxRuntime.jsx(CheckboxGroupContext.Provider, { value: {
-                value,
-                defaultValue,
-                toggleValue,
-            }, children: jsxRuntime.jsx("div", { className: cl('ds-checkbox__group', `ds-checkbox__group--${size}`), children: children }) }) }));
-});
-CheckboxGroup.displayName = 'CheckboxGroup';
-
-exports.CheckboxGroup = CheckboxGroup;
-exports.CheckboxGroupContext = CheckboxGroupContext;

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

@@ -1,13 +0,0 @@
-'use client';
-'use strict';
-
-var Checkbox$1 = require('./Checkbox.js');
-var CheckboxGroup = require('./CheckboxGroup.js');
-
-/** `<input> element with `type="checkbox"` used for selecting one option */
-const Checkbox = Checkbox$1.Checkbox;
-Checkbox.Group = CheckboxGroup.CheckboxGroup;
-Checkbox.Group.displayName = 'Checkbox.Group';
-
-exports.CheckboxGroup = CheckboxGroup.CheckboxGroup;
-exports.Checkbox = Checkbox;

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

@@ -1,44 +0,0 @@
-'use client';
-'use strict';
-
-var react = require('react');
-var useFormField = require('../useFormField.js');
-var CheckboxGroup = require('./CheckboxGroup.js');
-
-/** Handles props for `Checkbox` in context with `Checkbox.Group` (and `Fieldset`) */
-const useCheckbox = (props) => {
-    const checkboxGroup = react.useContext(CheckboxGroup.CheckboxGroupContext);
-    const { inputProps, readOnly, ...rest } = useFormField.useFormField(props, 'checkbox');
-    return {
-        ...rest,
-        readOnly,
-        inputProps: {
-            ...inputProps,
-            readOnly,
-            type: 'checkbox',
-            defaultChecked: checkboxGroup?.defaultValue
-                ? checkboxGroup?.defaultValue.includes(props.value)
-                : props.defaultChecked,
-            checked: checkboxGroup?.value
-                ? checkboxGroup?.value.includes(props.value)
-                : props.checked,
-            onClick: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    return;
-                }
-                props?.onClick?.(e);
-            },
-            onChange: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    return;
-                }
-                props?.onChange?.(e);
-                checkboxGroup?.toggleValue(props.value);
-            },
-        },
-    };
-};
-
-exports.useCheckbox = useCheckbox;

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

@@ -1,23 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var cl = require('clsx/lite');
-var react = require('react');
-var Fieldset = require('../Fieldset/Fieldset.js');
-
-const RadioGroupContext = react.createContext(null);
-const RadioGroup = react.forwardRef(({ onChange, children, value, readOnly, defaultValue, name, size = 'md', required, inline, className, ...rest }, ref) => {
-    const nameId = react.useId();
-    return (jsxRuntime.jsx(Fieldset.Fieldset, { readOnly: readOnly, size: size, className: className, ref: ref, ...rest, children: jsxRuntime.jsx(RadioGroupContext.Provider, { value: {
-                value,
-                defaultValue,
-                name: name ?? `radiogroup-name-${nameId}`,
-                onChange,
-                required,
-            }, children: jsxRuntime.jsx("div", { className: cl('ds-radio__group', `ds-radio__group--${size}`, inline && 'ds-radio__group--horizontal'), children: children }) }) }));
-});
-RadioGroup.displayName = 'RadioGroup';
-
-exports.RadioGroup = RadioGroup;
-exports.RadioGroupContext = RadioGroupContext;

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

@@ -1,13 +0,0 @@
-'use client';
-'use strict';
-
-var Radio$1 = require('./Radio.js');
-var RadioGroup = require('./RadioGroup.js');
-
-/** `<input> element with `type="radio"` used for selecting one option */
-const Radio = Radio$1.Radio;
-Radio.Group = RadioGroup.RadioGroup;
-Radio.Group.displayName = 'Radio.Group';
-
-exports.RadioGroup = RadioGroup.RadioGroup;
-exports.Radio = Radio;