@oslokommune/punkt-react/dist/index.d.ts

React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo

/// <reference types="react" />

import { AnchorHTMLAttributes } from 'react';
import { ChangeEventHandler } from 'react';
import { default as default_2 } from 'react';
import { FC } from 'react';
import { FocusEventHandler } from 'react';
import { ForwardRefExoticComponent } from 'react';
import { HTMLAttributes } from 'react';
import { HTMLProps } from 'react';
import { InputHTMLAttributes } from 'react';
import { IPktBackLink as IPktBackLink_2 } from '@oslokommune/punkt-elements';
import { IPktCombobox as IPktCombobox_2 } from '@oslokommune/punkt-elements';
import { IPktConsent as IPktConsent_2 } from '@oslokommune/punkt-elements';
import { IPktHeading } from '@oslokommune/punkt-elements';
import { IPktLoader as IPktLoader_2 } from '@oslokommune/punkt-elements';
import { IPktProgressbar as IPktProgressbar_2 } from '@oslokommune/punkt-elements';
import { JSX as JSX_2 } from 'react/jsx-runtime';
import { LegacyRef } from 'react';
import { LinkHTMLAttributes } from 'react';
import { MouseEventHandler } from 'react';
import * as React_2 from 'react';
import { ReactElement } from 'react';
import { ReactNode } from 'react';
import { RefAttributes } from 'react';
import { SelectHTMLAttributes } from 'react';
import { TextareaHTMLAttributes } from 'react';
import { TPktAccordionSkin } from '@oslokommune/punkt-elements';

declare type Booleanish = boolean | 'true' | 'false';

declare interface Column {
    title: string;
    links?: Link[];
    text?: string;
}

declare type ExtendedBackLink = Omit<IPktBackLink_2, 'text'> & AnchorHTMLAttributes<HTMLAnchorElement>;

declare type ExtendedCombobox = Omit<IPktCombobox_2, 'helptext'> & SelectHTMLAttributes<HTMLSelectElement>;

declare type ExtendedLoader = IPktLoader_2 & PktElType;

declare type ExtendedProgressbar = IPktProgressbar_2 & PktElType;

declare interface IBreadcrumbs {
    text: string;
    href: string;
}

declare interface InputProps extends default_2.InputHTMLAttributes<HTMLInputElement> {
    /** The input's label */
    label?: string;
    /** The input's id */
    id: string;
}

export declare interface IPktAccordion extends PktElType {
    compact?: boolean;
    /**
     * @default skin: "borderless"
     */
    skin?: TPktAccordionSkin;
    /**
     * @description A unique identifier to connect the accordion with a heading
     */
    ariaLabelledBy?: string;
    /**
     * @description A unique identifier to connect the accordion with a heading
     */
    ref?: LegacyRef<HTMLElement>;
}

export declare interface IPktAccordionItem extends Omit<PktElType, 'onClick'> {
    compact?: boolean;
    skin?: TPktAccordionSkin;
    title?: string;
    defaultOpen?: boolean;
    isOpen?: boolean;
    id?: string;
    onClick?: (e: PktEventWithTarget) => void;
    ref?: LegacyRef<HTMLElement>;
}

export declare interface IPktAlert extends PktElType {
    skin?: 'error' | 'success' | 'warning' | 'info';
    closeAlert?: boolean;
    title?: string;
    date?: string;
    ariaLive?: 'off' | 'polite' | 'assertive';
    compact?: boolean;
    role?: string;
    onClose?: (e: CustomEvent) => void;
}

export declare interface IPktBackLink extends ExtendedBackLink {
    text?: string;
    ref?: LegacyRef<HTMLAnchorElement>;
    ariaLabel?: string;
    onClick?: MouseEventHandler<HTMLAnchorElement>;
}

export declare interface IPktBreadcrumbs extends default_2.AnchorHTMLAttributes<HTMLAnchorElement> {
    breadcrumbs: IBreadcrumbs[];
    navigationType?: 'router' | 'anchor';
}

export declare interface IPktButton extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
    iconName?: string;
    secondIconName?: string;
    mode?: 'light' | 'dark';
    size?: 'small' | 'medium' | 'large';
    color?: 'blue' | 'blue-outline' | 'green' | 'green-outline' | 'green-dark' | 'green-dark-outline' | 'beige-light' | 'beige-dark-outline' | 'yellow' | 'yellow-outline' | 'red' | 'red-outline';
    skin?: 'primary' | 'secondary' | 'tertiary';
    variant?: 'label-only' | 'icon-left' | 'icon-right' | 'icon-only' | 'icons-right-and-left';
    state?: 'normal' | 'focus' | 'hover' | 'active';
    type?: 'button' | 'submit' | 'reset';
    isLoading?: boolean;
    loadingAnimationPath?: string;
}

export declare interface IPktCard extends PktElType {
    ariaLabel?: string;
    metaLead?: string | null;
    borderOnHover?: boolean | null;
    metaTrail?: string | null;
    layout?: TLayout;
    heading?: string;
    headingLevel?: IPktHeading['level'];
    image?: {
        src: string;
        alt: string;
    };
    imageShape?: TCardImageShape;
    clickCardLink?: string | null;
    padding?: TCardPadding;
    openLinkInNewTab?: boolean | null;
    skin?: TCardSkin;
    subheading?: string;
    tagPosition?: TCardTagPosition;
    tags?: (Omit<IPktTag, 'closeTag'> & {
        text: string;
    })[];
}

export declare interface IPktCheckbox extends default_2.InputHTMLAttributes<HTMLInputElement> {
    id: string;
    hasTile?: boolean;
    disabled?: boolean;
    label?: string;
    checkHelptext?: string;
    hasError?: boolean;
    defaultChecked?: boolean;
    checked?: boolean;
    value?: string;
    isSwitch?: boolean;
    hideLabel?: boolean;
    labelPosition?: 'right' | 'left';
    optionalTag?: boolean;
    optionalText?: string;
    requiredTag?: boolean;
    requiredText?: string;
    tagText?: string | null;
    onChange?: ChangeEventHandler<HTMLInputElement>;
}

export declare interface IPktCombobox extends ExtendedCombobox {
    helptext?: string | ReactNode | ReactNode[];
    ref?: LegacyRef<HTMLSelectElement>;
    onClick?: MouseEventHandler<HTMLSelectElement>;
    onChange?: ChangeEventHandler<HTMLSelectElement>;
    onInput?: ChangeEventHandler<HTMLSelectElement>;
    onBlur?: FocusEventHandler<HTMLSelectElement>;
    onFocus?: FocusEventHandler<HTMLSelectElement>;
    onValueChange?: (e: CustomEvent) => void;
    onToggleHelpText?: (e: CustomEvent) => void;
}

declare interface IPktConsent extends IPktConsent_2 {
    ref?: LegacyRef<HTMLDivElement>;
    onToggleConsent?: (e: CustomEvent) => void;
}

export declare interface IPktDatepicker extends InputHTMLAttributes<HTMLInputElement> {
    value?: string | string[];
    label?: string;
    dateformat?: string;
    multiple?: boolean;
    maxlength?: number;
    range?: boolean;
    weeknumbers?: boolean;
    withcontrols?: boolean;
    fullwidth?: boolean;
    excludedates?: string[];
    excludeweekdays?: string[];
    currentmonth?: string;
    calendarOpen?: boolean;
    requiredTag?: boolean;
    requiredText?: string;
    optionalTag?: boolean;
    optionalText?: string;
    tagText?: string;
    useWrapper?: boolean;
    helptext?: string | ReactNode | ReactNode[];
    helptextDropdown?: string | ReactNode | ReactNode[];
    helptextDropdownButton?: string;
    hasError?: boolean;
    errorMessage?: string | ReactNode | ReactNode[];
    strings?: any;
    ref?: LegacyRef<HTMLInputElement>;
    onChange?: ChangeEventHandler<HTMLInputElement>;
    onInput?: ChangeEventHandler<HTMLInputElement>;
    onBlur?: FocusEventHandler<HTMLInputElement>;
    onFocus?: FocusEventHandler<HTMLInputElement>;
    onValueChange?: (e: CustomEvent) => void;
    onToggleHelpText?: (e: CustomEvent) => void;
    dataTestid?: string;
    skipForwardTestid?: boolean;
}

export declare interface IPktFooter extends default_2.HTMLAttributes<HTMLDivElement> {
    columnOne: Column;
    columnTwo: Column;
    socialLinks?: SocialLink[];
    personvernOgInfoLink?: string;
    tilgjengelighetLink?: string;
    openLinksInNewTab?: boolean;
    includeConsent?: boolean;
    hotjarId?: string | null;
    googleAnalyticsId?: string | null;
    devMode?: boolean;
    cookieDomain?: string | null;
    cookieSecure?: string | null;
    cookieExpiryDays?: string | null;
    onToggleConsent?: (e: CustomEvent) => void;
}

export declare interface IPktFooterSimple extends default_2.HTMLAttributes<HTMLDivElement> {
    links?: Array<{
        href: string;
        text: string;
        external?: boolean;
        openInNewTab?: boolean;
    }>;
    personvernOgInfoLink?: string;
    tilgjengelighetLink?: string;
    openLinksInNewTab?: boolean;
    includeConsent?: boolean;
    hotjarId?: string | null;
    googleAnalyticsId?: string | null;
    devMode?: boolean;
    cookieDomain?: string | null;
    cookieSecure?: string | null;
    cookieExpiryDays?: string | null;
    onToggleConsent?: (e: CustomEvent) => void;
}

export declare interface IPktHeader extends HTMLAttributes<HTMLDivElement> {
    logoLink?: string | (() => void);
    serviceName?: string;
    fixed?: boolean;
    scrollToHide?: boolean;
    user?: User;
    userMenu?: UserMenuItem[];
    representing?: Representing;
    userOptions?: UserMenuItem[];
    userMenuFooter?: UserMenuFooterItem[];
    canChangeRepresentation?: boolean;
    showMenuButton?: boolean;
    showLogOutButton?: boolean;
    openMenu?: () => void;
    logOut?: () => void;
    changeRepresentation?: () => void;
    children?: default_2.ReactNode | default_2.ReactNode[];
}

declare interface IPktHelptextProps extends HTMLAttributes<HTMLDivElement> {
    helptext?: string | ReactNode | ReactNode[];
    helptextDropdown?: string | ReactNode | ReactNode[];
    helptextDropdownButton?: string;
    forId?: string;
    ref?: LegacyRef<HTMLDivElement>;
    onToggleHelpText?: (e: CustomEvent) => void;
}

declare interface IPktIcon extends PktElType {
    name?: string;
    path?: string;
    'aria-hidden'?: Booleanish | undefined;
}

export declare interface IPktInputWrapper extends RefAttributes<HTMLElement> {
    forId: string;
    label: string;
    helptext?: string | ReactNode;
    helptextDropdown?: string | ReactNode;
    helptextDropdownButton?: string;
    counter?: boolean;
    counterCurrent?: number;
    counterMaxLength?: number;
    optionalTag?: boolean;
    optionalText?: string;
    requiredTag?: boolean;
    requiredText?: string;
    tagText?: string | null;
    hasError?: boolean;
    errorMessage?: string | ReactNode;
    disabled?: boolean;
    inline?: boolean;
    ariaDescribedby?: string;
    useWrapper?: boolean;
    children?: ReactNode;
    className?: string;
    hasFieldset?: boolean;
    role?: string;
    counterPosition?: 'top' | 'bottom';
}

declare interface IPktLink extends LinkHTMLAttributes<HTMLAnchorElement> {
    href?: string;
    iconName?: string | undefined;
    iconPosition?: string | undefined;
    external?: boolean;
    target?: string | null;
    ref?: LegacyRef<HTMLAnchorElement>;
}

export declare interface IPktLinkCard extends PktElType {
    skin?: 'normal' | 'blue' | 'beige' | 'green' | 'gray' | 'beige-outline' | 'gray-outline';
    title?: string;
    href?: string;
    iconName?: string;
    openInNewTab?: boolean;
    external?: boolean;
}

export declare interface IPktLoader extends ExtendedLoader {
}

export declare interface IPktMessagebox extends PktElType {
    skin?: 'beige' | 'red' | 'green' | 'blue';
    title?: string;
    compact?: boolean;
    closable?: boolean;
    onClose?: (e: CustomEvent) => void;
}

export declare interface IPktModal extends PktElType {
    headingText?: string;
    hideCloseButton?: boolean;
    closeOnBackdropClick?: boolean;
    size?: 'small' | 'medium' | 'large';
    removePadding?: boolean;
    closeButtonSkin?: 'blue' | 'yellow-filled';
    variant?: 'dialog' | 'drawer';
    drawerPosition?: 'left' | 'right';
    transparentBackdrop?: boolean;
}

export declare interface IPktProgressbar extends ExtendedProgressbar {
}

export declare interface IPktRadioButton extends default_2.InputHTMLAttributes<HTMLInputElement> {
    id: string;
    name: string;
    label: string;
    hasTile?: boolean;
    disabled?: boolean;
    checkHelptext?: string | default_2.ReactNode | default_2.ReactNode[];
    defaultChecked?: boolean;
    checked?: boolean;
    hasError?: boolean;
    value?: string;
    optionalTag?: boolean;
    optionalText?: string;
    requiredTag?: boolean;
    requiredText?: string;
    tagText?: string | null;
    onChange?: ChangeEventHandler<HTMLInputElement>;
}

declare interface IPktSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
    ariaDescribedby?: string;
    ariaLabelledby?: string;
    children?: ReactNode | ReactNode[];
    disabled?: boolean;
    errorMessage?: string | ReactNode | ReactNode[];
    hasError?: boolean;
    helptext?: string | ReactNode | ReactNode[];
    helptextDropdown?: string | ReactNode | ReactNode[];
    helptextDropdownButton?: string;
    id: string;
    inline?: boolean;
    fullwidth?: boolean;
    label: string;
    name?: string;
    optionalTag?: boolean;
    optionalText?: string;
    requiredTag?: boolean;
    requiredText?: string;
    tagText?: string | null;
    options?: Array<{
        value: string;
        label: string;
        disabled?: boolean;
    }>;
}

export declare interface IPktStep {
    /**
     * Step content. Can be a string, a React component or an element.
     */
    children?: React.ReactNode;
    /**
     * Additional class names
     */
    className?: string;
    /**
     * Step status. Can be 'completed', 'incomplete' or 'current'
     */
    status: TStepStatus;
    /**
     * Title of the step
     */
    title: string;
}

export declare interface IPktStepper extends default_2.HTMLAttributes<HTMLOListElement> {
    /**
     * The index of the current active step
     */
    activeStep: number;
    /**
     * Children of the Stepper must be Step items. Either an Array of Step items or a single Step item.
     */
    children: ReactElement<IPktStep>[] | ReactElement<IPktStep>;
    /**
     * Additional class names
     */
    className?: string;
    /**
     * Boolean to hide the content of non-active steps content
     * @default true
     */
    hideNonActiveStepsContent?: boolean;
    /**
     * Boolean to hide the content and title of non-active steps
     * @default false
     */
    hideNonActiveSteps?: boolean;
    /**
     * Orientation of the stepper.
     * @default vertical
     */
    orientation?: 'horizontal' | 'vertical';
}

export declare interface IPktTab {
    text: string;
    href?: string;
    action?: (index: number) => void;
    icon?: string;
    controls?: string;
    tag?: {
        text: string;
        skin: TSkin | undefined;
    };
    active?: boolean;
}

declare interface IPktTabs {
    arrowNav?: boolean;
    tabs: IPktTab[];
    onTabSelected?: (index: number) => void;
}

export declare interface IPktTag extends PktElType {
    skin?: 'blue' | 'blue-light' | 'blue-dark' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray';
    textStyle?: 'normal-text' | 'thin-text';
    size?: 'small' | 'medium' | 'large';
    closeTag?: boolean;
    iconName?: string;
    ariaLabel?: string;
    onClose?: (e: CustomEvent) => void;
}

export declare interface IPktTextarea extends TextareaHTMLAttributes<HTMLTextAreaElement> {
    id: string;
    ariaDescribedby?: string;
    ariaLabelledby?: string;
    counter?: boolean;
    counterMaxLength?: number;
    disabled?: boolean;
    errorMessage?: string | ReactNode | ReactNode[];
    hasError?: boolean;
    helptext?: string | ReactNode | ReactNode[];
    helptextDropdown?: string | ReactNode | ReactNode[];
    helptextDropdownButton?: string;
    inline?: boolean;
    fullwidth?: boolean;
    label: string;
    name?: string;
    optionalTag?: boolean;
    optionalText?: string;
    requiredTag?: boolean;
    requiredText?: string;
    tagText?: string | null;
    placeholder?: string;
    rows?: number;
    useWrapper?: boolean;
    value?: string;
    autocomplete?: string;
    minLength?: number;
    maxLength?: number;
    readOnly?: boolean;
    required?: boolean;
    skipForwardTestid?: boolean;
    onChange?: ChangeEventHandler<HTMLTextAreaElement>;
}

export declare interface IPktTextinput extends InputHTMLAttributes<HTMLInputElement> {
    id: string;
    ariaDescribedby?: string;
    ariaLabelledby?: string;
    autocomplete?: string;
    counter?: boolean;
    counterMaxLength?: number;
    disabled?: boolean;
    errorMessage?: string | ReactNode | ReactNode[];
    hasError?: boolean;
    helptext?: string | ReactNode | ReactNode[];
    helptextDropdown?: string | ReactNode | ReactNode[];
    helptextDropdownButton?: string;
    iconNameRight?: string;
    inline?: boolean;
    fullwidth?: boolean;
    label: string;
    name?: string;
    optionalTag?: boolean;
    optionalText?: string;
    requiredTag?: boolean;
    requiredText?: string;
    tagText?: string | null;
    placeholder?: string;
    prefix?: string;
    suffix?: string;
    type?: string;
    useWrapper?: boolean;
    value?: string;
    omitSearchIcon?: boolean;
    min?: number | string;
    max?: number | string;
    minLength?: number;
    maxLength?: number;
    step?: string;
    size?: number;
    readonly?: boolean;
    required?: boolean;
    dataTestid?: string;
    onChange?: ChangeEventHandler<HTMLInputElement>;
    skipForwardTestid?: boolean;
}

declare interface ISearch extends HTMLProps<HTMLInputElement> {
    appearance?: 'local' | 'local-with-button' | 'global';
    disabled?: boolean;
    fullwidth?: boolean;
    id: string;
    label?: string;
    name?: string;
    placeholder?: string;
    suggestions?: SearchSuggestion[];
    value?: string | undefined;
    onSearch?: (value: string) => void;
    onSuggestionClick?: (index: number) => void;
    action?: string;
    method?: 'get' | 'post' | 'dialog';
}

declare interface ISearchForm extends ISearch {
    action?: string;
    method?: 'get' | 'post' | 'dialog';
}

declare interface ISearchInput extends ISearch {
    onChange: (event: default_2.ChangeEvent<HTMLInputElement>) => void;
    disabled?: boolean;
}

declare interface ISpecObject {
    name?: string;
    'css-class'?: string;
    'dark-mode'?: boolean;
    isElement?: boolean;
    props?: Record<string, PropObject | string[]>;
    events?: Record<string, PropObject>;
    slots?: Record<string, any>;
    default?: any;
}

declare interface ITableBodyProps {
    className?: string;
    children: React_2.ReactNode;
}

declare interface ITableDataCellProps {
    className?: string;
    children?: React_2.ReactNode;
    dataLabel?: string;
}

declare interface ITableHeaderCellProps {
    className?: string;
    children: React_2.ReactNode;
}

declare interface ITableHeaderProps {
    className?: string;
    children: React_2.ReactNode;
}

declare interface ITableProps {
    compact?: boolean;
    skin?: 'basic' | 'zebra-blue';
    responsiveView?: boolean;
    className?: string;
    children: React_2.ReactNode;
}

declare interface ITableRowProps {
    className?: string;
    children: React_2.ReactNode;
}

declare interface Link {
    href: string;
    text: string;
    external?: boolean;
    openInNewTab?: boolean;
}

export declare const PktAccordion: FC<IPktAccordion>;

export declare const PktAccordionItem: FC<IPktAccordionItem>;

export declare const PktAlert: FC<IPktAlert>;

export declare const PktBackLink: default_2.ForwardRefExoticComponent<IPktBackLink>;

export declare const PktBreadcrumbs: default_2.ForwardRefExoticComponent<IPktBreadcrumbs & default_2.RefAttributes<HTMLAnchorElement>>;

export declare const PktButton: default_2.ForwardRefExoticComponent<IPktButton & default_2.RefAttributes<HTMLButtonElement>>;

export declare const PktCard: FC<IPktCard>;

export declare const PktCheckbox: default_2.ForwardRefExoticComponent<IPktCheckbox & default_2.RefAttributes<HTMLInputElement>>;

export declare const PktCombobox: FC<IPktCombobox>;

export declare const PktConsent: ForwardRefExoticComponent<IPktConsent>;

export declare const PktDatepicker: FC<IPktDatepicker>;

declare interface PktElType extends default_2.HTMLAttributes<HTMLElement> {
    className?: string;
    style?: default_2.CSSProperties;
    children?: default_2.ReactNode | default_2.ReactNode[];
    ref?: default_2.RefObject<HTMLElement> | default_2.LegacyRef<HTMLElement>;
    id?: string;
}

declare interface PktEventWithTarget extends Event {
    target: EventTarget & HTMLInputElement;
}

export declare const PktFooter: default_2.FC<IPktFooter>;

export declare const PktFooterSimple: default_2.FC<IPktFooterSimple>;

export declare const PktHeader: default_2.ForwardRefExoticComponent<IPktHeader & default_2.RefAttributes<HTMLDivElement>>;

export declare const PktHelptext: FC<IPktHelptextProps>;

export declare const PktIcon: FC<IPktIcon>;

/**
 * Input component
 * @param {string} label - Label for the input
 * @param {string} id - Id for the input
 * @param {string} validationMessage - Validation message for the input
 * @param {React.InputHTMLAttributes<HTMLInputElement>} props - Other props to pass to the input
 * @returns {React.ReactElement} - React element
 *
 * @example
 * <Input label="First name" id="firstName" validationMessage="First name is required" />
 *
 */
export declare const PktInput: default_2.ForwardRefExoticComponent<InputProps & default_2.RefAttributes<HTMLInputElement>>;

export declare const PktInputWrapper: ForwardRefExoticComponent<Omit<IPktInputWrapper, "ref"> & RefAttributes<HTMLDivElement>>;

export declare const PktLink: FC<IPktLink>;

export declare const PktLinkCard: FC<IPktLinkCard>;

export declare const PktLoader: FC<IPktLoader>;

export declare const PktMessagebox: FC<IPktMessagebox>;

export declare const PktModal: FC<IPktModal>;

export declare const PktPreview: default_2.FC<PreviewProps>;

export declare const PktProgressbar: default_2.ForwardRefExoticComponent<Omit<IPktProgressbar, "ref"> & default_2.RefAttributes<HTMLElement>>;

export declare const PktRadioButton: default_2.ForwardRefExoticComponent<IPktRadioButton & default_2.RefAttributes<HTMLInputElement>>;

export declare const PktSearchInput: default_2.ForwardRefExoticComponent<(Omit<ISearchForm, "ref"> | Omit<ISearchInput, "ref">) & default_2.RefAttributes<HTMLInputElement>>;

export declare const PktSelect: ForwardRefExoticComponent<IPktSelectProps & RefAttributes<HTMLSelectElement>>;

export declare const PktStep: ({ children, className, status, title }: IPktStep) => JSX_2.Element;

export declare const PktStepper: default_2.ForwardRefExoticComponent<IPktStepper & default_2.RefAttributes<HTMLOListElement>>;

export declare const PktTable: ({ className, compact, skin, responsiveView, children, }: ITableProps) => JSX_2.Element;

export declare const PktTableBody: ({ children, className }: ITableBodyProps) => JSX_2.Element;

export declare const PktTableDataCell: ({ children, className, dataLabel }: ITableDataCellProps) => JSX_2.Element;

export declare const PktTableHeader: ({ className, children }: ITableHeaderProps) => JSX_2.Element;

export declare const PktTableHeaderCell: ({ className, children }: ITableHeaderCellProps) => JSX_2.Element;

export declare const PktTableRow: ({ className, children }: ITableRowProps) => JSX_2.Element;

export declare const PktTabs: default_2.ForwardRefExoticComponent<IPktTabs & default_2.RefAttributes<HTMLDivElement>>;

export declare const PktTag: FC<IPktTag>;

export declare const PktTextarea: default_2.ForwardRefExoticComponent<IPktTextarea & default_2.RefAttributes<HTMLTextAreaElement>>;

export declare const PktTextinput: default_2.ForwardRefExoticComponent<IPktTextinput & default_2.RefAttributes<HTMLInputElement>>;

declare interface PreviewProps {
    children?: ReactNode;
    specs: ISpecObject;
    fullWidth?: boolean;
}

declare type PropObject = {
    name?: string;
    description?: string;
    type?: string | string[];
    variant?: string;
    converter?: string;
    reflect?: boolean;
    default?: any;
    previewDefault?: any;
    items?: PropObject;
};

declare interface Representing {
    name?: string;
    shortname?: string;
    orgNumber?: string | number;
}

declare interface SearchSuggestion {
    title?: string;
    text?: string;
    href?: string;
    onClick?: () => void;
}

declare interface SocialLink {
    href: string;
    iconName?: string;
    language?: string;
    openInNewTab?: boolean;
}

declare type TCardImageShape = 'square' | 'round';

declare type TCardPadding = 'none' | 'default';

declare type TCardSkin = 'outlined' | 'outlined-beige' | 'gray' | 'beige' | 'green' | 'blue';

declare type TCardTagPosition = 'top' | 'bottom';

declare type TLayout = 'vertical' | 'horizontal';

declare type TSkin = 'blue' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray' | 'blue-light';

declare type TStepStatus = 'completed' | 'incomplete' | 'current';

declare interface User {
    name?: string;
    shortname?: string;
    lastLoggedIn?: string | Date;
}

declare interface UserMenuFooterItem {
    title: string;
    target: string | (() => void);
}

declare interface UserMenuItem {
    iconName?: string;
    title: string;
    target: string | (() => void);
}

export { }