rk-designsystem/dist/index.d.ts

A React component library built on top of Digdir Design System

import { AlertProps as AlertProps_2 } from './components';
import { AvatarProps as AvatarProps_2 } from './components';
import { Badge } from './components/Badge';
import { BadgePosition } from './components/Badge';
import { BadgePositionProps } from './components/Badge';
import { BadgeProps } from './components/Badge';
import { Breadcrumbs } from './components/Breadcrumbs';
import { BreadcrumbsItem } from './components/Breadcrumbs';
import { BreadcrumbsLink } from './components/Breadcrumbs';
import { BreadcrumbsList } from './components/Breadcrumbs';
import { BreadcrumbsProps } from './components/Breadcrumbs';
import { Button } from './components/Button';
import { ButtonProps } from './components/Button';
import { Card } from './components/Card';
import { CardBlock } from './components/Card';
import { CardProps } from './components/Card';
import { Checkbox } from './components/Checkbox';
import { CheckboxProps } from './components/Checkbox';
import { ChipButton } from './chip';
import { ChipButtonProps as ChipButtonProps_2 } from './components';
import { ChipCheckbox } from './chip';
import { ChipCheckboxProps as ChipCheckboxProps_2 } from './components';
import { ChipRadio } from './chip';
import { ChipRadioProps as ChipRadioProps_2 } from './components';
import { ChipRemovable } from './chip';
import { ChipRemovableProps as ChipRemovableProps_2 } from './components';
import { Color } from '@digdir/designsystemet/types';
import { ComponentProps } from 'react';
import { default as default_2 } from 'react';
import { DetailsContent } from './details';
import { DetailsProps as DetailsProps_2 } from './components';
import { DetailsSummary } from './details';
import { Dialog } from './components/Dialog';
import { DialogProps } from './components/Dialog';
import { DividerProps as DividerProps_2 } from './components';
import { Dropdown } from './components/Dropdown';
import { DropdownProps } from './components/Dropdown';
import { ErrorSummary } from './components/ErrorSummary';
import { ErrorSummaryProps } from './components/ErrorSummary';
import { EXPERIMENTAL_Suggestion } from './components';
import { EXPERIMENTAL_SuggestionClear } from './suggestion';
import { EXPERIMENTAL_SuggestionEmpty } from './suggestion';
import { EXPERIMENTAL_SuggestionInput } from './suggestion';
import { EXPERIMENTAL_SuggestionList } from './suggestion';
import { EXPERIMENTAL_SuggestionOption } from './suggestion';
import { Field } from './components/Field';
import { FieldCounter } from './components/Field';
import { FieldCounterProps } from './components/Field';
import { FieldDescription } from './components/Field';
import { FieldDescriptionProps } from './components/Field';
import { FieldProps } from './components/Field';
import { Fieldset } from './components/Fieldset';
import { FieldsetProps } from './components/Fieldset';
import { ForwardRefExoticComponent } from 'react';
import { HeadingProps as HeadingProps_2 } from './components';
import { HTMLAttributes } from 'react';
import { Input } from './components/Input';
import { InputHTMLAttributes } from 'react';
import { InputProps } from './components/Input';
import { JSX } from 'react/jsx-runtime';
import { LabelProps as LabelProps_2 } from './components';
import { Link } from './components/Link';
import { LinkProps } from './components/Link';
import { ListItem } from './list';
import { ListOrdered } from './list';
import { ListUnordered } from './list';
import { Pagination } from './components/Pagination';
import { PaginationProps } from './components/Pagination';
import { ParagraphProps as ParagraphProps_2 } from './components';
import { Popover } from './components/Popover';
import { PopoverProps } from './components/Popover';
import { Radio } from './components/Radio';
import { RadioProps } from './components/Radio';
import { ReactNode } from 'react';
import { RefAttributes } from 'react';
import { Search } from './components/Search';
import { SearchProps } from './components/Search';
import { Select } from './components/Select';
import { SelectProps } from './components/Select';
import { Size } from '@digdir/designsystemet/types';
import { SkeletonProps as SkeletonProps_2 } from './components';
import { SkipLink } from './components/SkipLink';
import { SkipLinkProps } from './components/SkipLink';
import { SpinnerProps as SpinnerProps_2 } from './components';
import { SuggestionProps as SuggestionProps_2 } from './components';
import { Switch } from './components/Switch';
import { SwitchProps } from './components/Switch';
import { Table } from './components/Table';
import { TableProps } from './components/Table';
import { Tabs } from './components/Tabs';
import { TabsProps } from './components/Tabs';
import { Tag } from './components/Tag';
import { TagProps } from './components/Tag';
import { Textarea } from './components/Textarea';
import { TextareaProps } from './components/Textarea';
import { TextfieldProps as TextfieldProps_2 } from './components';
import { ToggleGroup } from './components/ToggleGroup';
import { ToggleGroupProps } from './components/ToggleGroup';
import { Tooltip } from './components/Tooltip';
import { TooltipProps } from './components/Tooltip';
import { UHTMLComboboxElement } from '@u-elements/u-combobox';
import { useCheckboxGroup } from './components/Checkbox';
import { usePagination } from './components/Pagination';
import { useRadioGroup } from './components/Radio';
import { ValidationMessageProps as ValidationMessageProps_2 } from './components';

export declare const Alert: ForwardRefExoticComponent<AlertProps & RefAttributes<HTMLDivElement>>;

/**
 * Alert-komponent for å vise viktige meldinger til brukeren.
 * Utvider DigDir sin Alert med støtte for barn-elementer og tittel.
 */
export declare interface AlertProps extends AlertProps_2 {
    children?: ReactNode;
    title?: string;
}

export declare const Avatar: ForwardRefExoticComponent<AvatarProps_2 & RefAttributes<HTMLSpanElement>>;

/**
 * Avatar-komponent for å vise profilbilde eller initialer.
 * Wrapper rundt DigDir sin Avatar.
 */
export declare type AvatarProps = AvatarProps_2;

export { Badge }

export { BadgePosition }

export { BadgePositionProps }

export { BadgeProps }

export { Breadcrumbs }

export { BreadcrumbsItem }

export { BreadcrumbsLink }

export { BreadcrumbsList }

export { BreadcrumbsProps }

export { Button }

export { ButtonProps }

export { Card }

export { CardBlock }

export { CardProps }

/**
 * Carousel-komponent for å vise en bildeserie.
 * Bruker embla-carousel-react for funksjonalitet.
 */
export declare const Carousel: default_2.FC<CarouselProps>;

export declare type CarouselProps = MergeRight<DefaultProps, {
    images: {
        src: string;
        alt: string;
    }[];
    autoPlay?: boolean;
    autoDelay?: number;
    showArrows?: boolean;
    showDots?: boolean;
    variant?: string;
    slidesPerView?: number;
    slideSpacing?: number;
    cornerRadius?: number;
}>;

export { Checkbox }

export { CheckboxProps }

/**
 * Chip-komponent for filtrering, valg eller handlinger.
 */
export declare const Chip: {
    Button: ChipButton;
    Checkbox: ChipCheckbox;
    Radio: ChipRadio;
    Removable: ChipRemovable;
};

export declare type ChipButtonProps = ChipButtonProps_2;

export declare type ChipCheckboxProps = ChipCheckboxProps_2;

export declare type ChipRadioProps = ChipRadioProps_2;

export declare type ChipRemovableProps = ChipRemovableProps_2;

/**
 * DateInput-komponent for inntasting av datoer i norsk format (dd.mm.åååå).
 * Håndterer automatisk formatering og validering av datoer.
 */
export declare const DateInput: default_2.ForwardRefExoticComponent<Omit<DefaultProps, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "is" | "exportparts" | "part" | "popovertarget" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "accept" | "alt" | "autoComplete" | "capture" | "checked" | "height" | "list" | "max" | "min" | "minLength" | "multiple" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "width" | "label" | "description" | "error" | "suffixIcon" | "onSuffixClick" | "inputWrapperClassName" | "inputClassName"> & Omit<default_2.InputHTMLAttributes<HTMLInputElement>, "defaultValue" | "prefix" | "inputMode" | "aria-label" | "aria-labelledby" | "onChange" | "type" | "value" | "maxLength" | "pattern" | "label" | "suffix"> & {
    label?: default_2.ReactNode;
    suffixIcon?: default_2.ReactNode;
    onSuffixClick?: default_2.MouseEventHandler<HTMLButtonElement>;
    className?: string;
    inputWrapperClassName?: string;
    inputClassName?: string;
    "aria-label"?: string;
    "aria-labelledby"?: string;
    description?: default_2.ReactNode;
    error?: default_2.ReactNode;
    value?: string | null;
    defaultValue?: string | null;
    onChange?: (event: default_2.ChangeEvent<HTMLInputElement>, formattedValue: string) => void;
} & default_2.RefAttributes<HTMLInputElement>>;

export declare type DateInputProps = MergeRight<DefaultProps, // <-- Legg til dette
// <-- Legg til dette
Omit<InputHTMLAttributes<HTMLInputElement>, "prefix" | "suffix" | "label" | "aria-label" | "aria-labelledby" | "type" | "inputMode" | "pattern" | "maxLength" | "value" | "defaultValue" | "onChange"> & {
    label?: default_2.ReactNode;
    suffixIcon?: default_2.ReactNode;
    onSuffixClick?: default_2.MouseEventHandler<HTMLButtonElement>;
    className?: string;
    inputWrapperClassName?: string;
    inputClassName?: string;
    "aria-label"?: string;
    "aria-labelledby"?: string;
    description?: default_2.ReactNode;
    error?: default_2.ReactNode;
    value?: string | null;
    defaultValue?: string | null;
    onChange?: (event: default_2.ChangeEvent<HTMLInputElement>, formattedValue: string) => void;
}>;

/**
 * DatePicker-komponent for å velge en dato fra en kalender.
 */
export declare const DatePicker: default_2.FC<DatePickerProps>;

export declare type DatePickerProps = MergeRight<DefaultProps, // <-- Lagt til
    {
    initialDate?: Date;
    selectedDate?: Date | null;
    onDateSelect?: (date: Date) => void;
}>;

/**
 * Definerer delte data-color og data-size props som egendefinerte
 * komponenter kan akseptere for styling.
 */
declare type DefaultProps = {
    /**
     * Endrer størrelse for underliggende Designsystemet-komponenter. Velg fra forhåndsdefinerte størrelser.
     */
    'data-size'?: Size;
    /**
     * Endrer farge for underliggende Designsystemet-komponenter.
     * Velg fra forhåndsdefinerte farger og farger definert med theme.designsystemet.no.
     */
    'data-color'?: Color;
};

export declare const Details: ForwardRefExoticComponent<DetailsProps_2 & RefAttributes<HTMLDetailsElement>> & {
    Summary: DetailsSummary;
    Content: DetailsContent;
};

/**
 * Details-komponent for å vise/skjule innhold.
 */
export declare type DetailsProps = DetailsProps_2;

export { Dialog }

export { DialogProps }

export declare const Divider: ForwardRefExoticComponent<DividerProps_2 & RefAttributes<HTMLHRElement>>;

/**
 * Divider-komponent for å skille innhold visuelt.
 */
export declare type DividerProps = DividerProps_2;

export { Dropdown }

export { DropdownProps }

export { ErrorSummary }

export { ErrorSummaryProps }

export { Field }

export { FieldCounter }

export { FieldCounterProps }

export { FieldDescription }

export { FieldDescriptionProps }

export { FieldProps }

export { Fieldset }

export { FieldsetProps }

export declare const Header: ({ activePage, setPage, children, showUser, showSearch, showLogin, showCta, ctaLabel, ctaIcon, onCtaClick, showThemeToggle, secondaryLogo, secondaryLogoSrc, secondaryLogoSrcDark, secondaryLogoAlt, navItems, showNavItems, showMenuButton, showHeaderExtension, showModeToggle, showLanguageSwitch }: HeaderProps) => JSX.Element;

export declare interface HeaderProps {
    activePage?: string;
    setPage?: (pageName: string) => void;
    children?: default_2.ReactNode;
    showUser?: boolean;
    showSearch?: boolean;
    showLogin?: boolean;
    showCta?: boolean;
    ctaLabel?: string;
    ctaIcon?: default_2.ReactNode;
    onCtaClick?: () => void;
    showThemeToggle?: boolean;
    secondaryLogo?: boolean;
    secondaryLogoSrc?: string;
    secondaryLogoSrcDark?: string;
    secondaryLogoAlt?: string;
    navItems?: {
        label: string;
        href: string;
    }[];
    showNavItems?: boolean;
    showMenuButton?: boolean;
    showHeaderExtension?: boolean;
    showModeToggle?: boolean;
    showLanguageSwitch?: boolean;
}

export declare const Heading: ForwardRefExoticComponent<HeadingProps & RefAttributes<HTMLHeadingElement>>;

/**
 * Heading-komponent for overskrifter.
 */
export declare interface HeadingProps extends HeadingProps_2 {
    children?: ReactNode;
}

export { Input }

export { InputProps }

export declare const Label: ForwardRefExoticComponent<LabelProps & RefAttributes<HTMLLabelElement>>;

/**
 * Label-komponent for å merke skjemafelter.
 */
export declare interface LabelProps extends LabelProps_2 {
    children?: ReactNode;
}

declare type Language = 'NO' | 'EN';

declare interface LanguageContextType {
    language: Language;
    setLanguage: (lang: Language) => void;
    t: (key: string) => string;
}

export declare const LanguageProvider: ({ children }: {
    children: ReactNode;
}) => JSX.Element;

export { Link }

export { LinkProps }

/**
 * List-komponent for punktlister (ul) og nummererte lister (ol).
 */
export declare const List: {
    Item: ListItem;
    Ordered: ListOrdered;
    Unordered: ListUnordered;
};

/**
 * Slår sammen to typer, der egenskaper fra T2 (høyre) overskriver egenskaper fra T1 (venstre).
 * Dette brukes for å kombinere grunnleggende egenskaper med komponentspesifikke egenskaper.
 */
declare type MergeRight<T1, T2> = Omit<T1, keyof T2> & T2;

export { Pagination }

export { PaginationProps }

export declare const Paragraph: ForwardRefExoticComponent<ParagraphProps & RefAttributes<HTMLParagraphElement>>;

/**
 * Paragraph-komponent for avsnittstekst.
 */
export declare interface ParagraphProps extends ParagraphProps_2 {
    children?: ReactNode;
}

export { Popover }

export { PopoverProps }

export { Radio }

export { RadioProps }

export { Search }

export { SearchProps }

export { Select }

export { SelectProps }

export declare const SkeletonLoader: ForwardRefExoticComponent<    {
width?: string | number;
height?: string | number;
variant?: "rectangle" | "circle" | "text";
asChild?: boolean;
characters?: number;
} & HTMLAttributes<HTMLSpanElement> & RefAttributes<HTMLSpanElement>>;

/**
 * SkeletonLoader-komponent for å vise laste-tilstand.
 */
export declare type SkeletonProps = SkeletonProps_2;

export { SkipLink }

export { SkipLinkProps }

export declare const Spinner: ForwardRefExoticComponent<SpinnerProps_2 & RefAttributes<SVGSVGElement>>;

/**
 * Spinner-komponent for å indikere lasting.
 */
export declare type SpinnerProps = SpinnerProps_2;

/**
 * Suggestion-komponent for autofullfør/søkeforslag.
 * Merk: Dette er en eksperimentell komponent fra DigDir.
 */
export declare const Suggestion: ForwardRefExoticComponent<SuggestionProps_2 & RefAttributes<UHTMLComboboxElement>> & {
    List: EXPERIMENTAL_SuggestionList;
    Input: EXPERIMENTAL_SuggestionInput;
    Empty: EXPERIMENTAL_SuggestionEmpty;
    Option: EXPERIMENTAL_SuggestionOption;
    Clear: EXPERIMENTAL_SuggestionClear;
};

export declare type SuggestionClearProps = ComponentProps<typeof EXPERIMENTAL_Suggestion.Clear>;

export declare type SuggestionEmptyProps = ComponentProps<typeof EXPERIMENTAL_Suggestion.Empty>;

export declare type SuggestionInputProps = ComponentProps<typeof EXPERIMENTAL_Suggestion.Input>;

export declare type SuggestionListProps = ComponentProps<typeof EXPERIMENTAL_Suggestion.List>;

export declare type SuggestionOptionProps = ComponentProps<typeof EXPERIMENTAL_Suggestion.Option>;

export declare type SuggestionProps = SuggestionProps_2;

export { Switch }

export { SwitchProps }

export { Table }

export { TableProps }

export { Tabs }

export { TabsProps }

export { Tag }

export { TagProps }

export { Textarea }

export { TextareaProps }

export declare const Textfield: ForwardRefExoticComponent<TextfieldProps_2 & RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;

/**
 * Textfield-komponent for tekstinntasting.
 */
export declare type TextfieldProps = TextfieldProps_2;

export { ToggleGroup }

export { ToggleGroupProps }

export { Tooltip }

export { TooltipProps }

export { useCheckboxGroup }

export declare const useLanguage: () => LanguageContextType;

export { usePagination }

export { useRadioGroup }

export declare const ValidationMessage: ForwardRefExoticComponent<ValidationMessageProps & RefAttributes<HTMLParagraphElement>>;

/**
 * ValidationMessage-komponent for å vise valideringsfeil eller hjelpetekst.
 */
export declare interface ValidationMessageProps extends ValidationMessageProps_2 {
    children?: ReactNode;
}

export { }