@fremtind/jokul 0.12.1 → 0.14.0

package/build/components/index.d.ts

@@ -7,6 +7,8 @@ export * from './combobox';
 export * from './cookie-consent';
 export * from './datepicker';
 export * from './feedback';
+export * from './description-list';
+export * from './expander';
 export * from './icon';
 export * from './icon-button';
 export * from './image';
@@ -15,12 +17,20 @@ export * from './link';
 export * from './link-list';
 export * from './list';
 export * from './loader';
+export * from './logo';
 export * from './message';
 export * from './modal';
 export * from './popover';
+export * from './progress-bar';
 export * from './radio-button';
 export * from './select';
+export * from './summary-table';
+export * from './system-message';
+export * from './table';
+export * from './tabs';
 export * from './tag';
 export * from './text-input';
+export * from './toast';
+export * from './toggle-switch';
 export * from './tooltip';
 export { ScreenReaderOnly, type ScreenReaderOnlyProps } from './ScreenReaderOnly';

package/build/components/logo/Logo.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties } from 'react';
+export interface LogoProps {
+    className?: string;
+    id?: string;
+    style?: CSSProperties;
+    /** Sentrerer logosymbolet i viewboksen i stedet for den vanlige venstrejusteringen */
+    centered?: boolean;
+    /** Animerer overgangen mellom logo og logosymbol */
+    animated?: boolean;
+    /** Vis logosymbol i stedet for logo */
+    isSymbol?: boolean;
+    /** Beskrivelse av logoen tilgjengelig for skjermlesere */
+    title?: string;
+}
+export declare const Logo: ({ className, id, centered, isSymbol, animated, title, ...rest }: LogoProps) => JSX.Element;

package/build/components/logo/LogoStamp.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties } from 'react';
+import { WithChildren } from '../..';
+export interface LogoStampProps extends WithChildren {
+    className?: string;
+    id?: string;
+    style?: CSSProperties;
+    /**
+     * Beskrivelse av logostempelet tilgjengelig for skjermlesere.
+     * Teksten i logostempelet er en path, og ikke tilgjengelig for skjermlesere.
+     * @default "Forsikring levert av Fremtind"
+     */
+    title?: string;
+    /** Roterer teksten rundt logostempelet første gangen stempelet kommer til syne */
+    animated?: boolean;
+}
+export declare const LogoStamp: ({ children, className, id, animated, title, ...rest }: LogoStampProps) => JSX.Element;

package/build/components/logo/index.d.ts

@@ -0,0 +1,5 @@
+export type { LogoProps } from './Logo';
+export { Logo } from './Logo';
+export type { LogoStampProps } from './LogoStamp';
+export { LogoStamp } from './LogoStamp';
+export { ForsikringLevertAvFremtind, FraSB1ogDNB, InnovasjonFraFremtind, TeknologiFraFremtind, VartEgetForsikringsselskap, VartForsikringsselskap, } from './text-paths';

package/build/components/logo/text-paths/ForsikringLevertAvFremtind.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const ForsikringLevertAvFremtind: FC;

package/build/components/logo/text-paths/FraSB1ogDNB.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const FraSB1ogDNB: FC;

package/build/components/logo/text-paths/InnovasjonFraFremtind.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const InnovasjonFraFremtind: FC;

package/build/components/logo/text-paths/TeknologiFraFremtind.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const TeknologiFraFremtind: FC;

package/build/components/logo/text-paths/VartEgetForsikringsselskap.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const VartEgetForsikringsselskap: FC;

package/build/components/logo/text-paths/VartForsikringsselskap.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const VartForsikringsselskap: FC;

package/build/components/logo/text-paths/index.d.ts

@@ -0,0 +1,6 @@
+export { ForsikringLevertAvFremtind } from './ForsikringLevertAvFremtind';
+export { FraSB1ogDNB } from './FraSB1ogDNB';
+export { InnovasjonFraFremtind } from './InnovasjonFraFremtind';
+export { TeknologiFraFremtind } from './TeknologiFraFremtind';
+export { VartEgetForsikringsselskap } from './VartEgetForsikringsselskap';
+export { VartForsikringsselskap } from './VartForsikringsselskap';

package/build/components/logo/useTextSpinner.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+export declare function useTextSpinner<T extends HTMLElement | SVGElement>(ref: React.RefObject<T>): {
+    hasAnimated: boolean;
+    visible: boolean;
+};

package/build/components/progress-bar/Countdown.d.ts

@@ -0,0 +1,12 @@
+import { default as React, CSSProperties, FC } from 'react';
+export interface CountdownProps extends Pick<React.HTMLAttributes<HTMLDivElement>, "onAnimationEnd" | "onAnimationStart"> {
+    id?: string;
+    className?: string;
+    /**
+     * Millisekunder å telle ned fra
+     */
+    from: number;
+    isPaused?: boolean;
+    style?: CSSProperties;
+}
+export declare const Countdown: FC<CountdownProps>;

package/build/components/progress-bar/ProgressBar.d.ts

@@ -0,0 +1,22 @@
+import { CSSProperties, FC } from 'react';
+export interface ProgressBarProps {
+    id?: string;
+    className?: string;
+    /**
+     * @default "Fremdrift"
+     */
+    title?: string;
+    "aria-valuetext"?: string;
+    /**
+     * @default 0
+     */
+    "aria-valuemin"?: number;
+    "aria-valuenow": number;
+    /**
+     * @default 100
+     */
+    "aria-valuemax"?: number;
+    style?: CSSProperties;
+}
+export declare const calculatePercentage: (current: number, total: number) => number;
+export declare const ProgressBar: FC<ProgressBarProps>;

package/build/components/progress-bar/index.d.ts

@@ -0,0 +1,4 @@
+export type { CountdownProps } from './Countdown';
+export { Countdown } from './Countdown';
+export type { ProgressBarProps } from './ProgressBar';
+export { ProgressBar } from './ProgressBar';

package/build/components/summary-table/SummaryTable.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode, FC } from 'react';
+export interface Props {
+    className?: string;
+    caption?: string;
+    header: [string, string];
+    body: ReactNode;
+    footer?: ReactNode;
+}
+export declare const SummaryTable: FC<Props>;

package/build/components/summary-table/SummaryTableRow.d.ts

@@ -0,0 +1,7 @@
+import { FC, ReactNode } from 'react';
+export interface SummaryTableRowProps {
+    className?: string;
+    header: string | ReactNode;
+    content: string | ReactNode;
+}
+export declare const SummaryTableRow: FC<SummaryTableRowProps>;

package/build/components/summary-table/index.d.ts

@@ -0,0 +1,2 @@
+export { SummaryTable } from './SummaryTable';
+export { SummaryTableRow } from './SummaryTableRow';

package/build/components/summary-table/mocks/index.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export declare const mockHeader: [string, string];
+export declare const mockBody: React.JSX.Element;
+export declare const mockFooter: React.JSX.Element;
+export declare const mockProps: {
+    header: [string, string];
+    body: React.JSX.Element;
+    footer: React.JSX.Element;
+    caption: string;
+};

package/build/components/system-message/SystemMessage.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { Density, WithChildren } from '../..';
+interface Props extends WithChildren {
+    id?: string;
+    className?: string;
+    density?: Density;
+    maxContentWidth?: string;
+    paddingLeft?: string;
+    /** Overstyr standardrollen til meldingen. Om du ønsker å "skru av" rollen kan du bruke verdien `none presentation`. */
+    role?: string;
+    dismissed?: boolean;
+    dismissAction?: {
+        handleDismiss: () => void;
+        buttonTitle?: string;
+    };
+}
+export declare const InfoSystemMessage: React.FC<Props>;
+export declare const ErrorSystemMessage: React.FC<Props>;
+export declare const WarningSystemMessage: React.FC<Props>;
+export declare const SuccessSystemMessage: React.FC<Props>;
+export {};

package/build/components/system-message/common/DismissButton.d.ts

@@ -0,0 +1,5 @@
+import { default as React, ButtonHTMLAttributes } from 'react';
+export interface DismissButtonProps extends Exclude<ButtonHTMLAttributes<HTMLButtonElement>, "disabled"> {
+    label?: string;
+}
+export declare const DismissButton: React.ForwardRefExoticComponent<DismissButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/build/components/system-message/common/MessageIcon.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+type MessageTypes = "info" | "error" | "success" | "warning";
+type Props = {
+    messageType: MessageTypes;
+};
+export declare const MessageIcon: FC<Props>;
+export {};

package/build/components/system-message/index.d.ts

@@ -0,0 +1 @@
+export { InfoSystemMessage, WarningSystemMessage, ErrorSystemMessage, SuccessSystemMessage } from './SystemMessage';

package/build/components/table/DataTable.d.ts

@@ -0,0 +1,18 @@
+import { default as React, TableHTMLAttributes } from 'react';
+import { Density } from '../..';
+export interface DataTableProps extends TableHTMLAttributes<HTMLTableElement> {
+    /** Beskrivelse av tabellen for skjermlesere */
+    caption?: string;
+    density?: Density;
+    collapseToList?: boolean;
+    rows: React.ReactNode[][];
+    columns: string[];
+    emptyTableText?: string;
+    /**
+     * Velg mellom vertikal sentrering av innholdet eller toppjustering. Typisk skal innholdet være toppjustert, men dersom raden har knapper kan midtstilling fungere bedre.
+     * @default "top"
+     */
+    verticalAlign?: "center" | "top";
+}
+declare const DataTable: React.ForwardRefExoticComponent<DataTableProps & React.RefAttributes<HTMLTableElement>>;
+export { DataTable };

package/build/components/table/ExpandableTableRow.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { TableRowProps } from './TableRow';
+export interface ExpandableTableRowProps extends TableRowProps {
+    expandedChildren: React.ReactNode;
+    /**
+     * Setter bredden på raden som blir åpnet
+     * @default 100
+     */
+    colSpan?: number;
+    /**
+     * Om du ønsker en controlled komponent. Hvis du ikke setter denne vil komponenten håndtere state selv.
+     */
+    isOpen?: boolean;
+    onToggle?: (isOpen: boolean) => void;
+}
+declare const ExpandableTableRow: React.ForwardRefExoticComponent<ExpandableTableRowProps & React.RefAttributes<HTMLTableRowElement>>;
+export { ExpandableTableRow };

package/build/components/table/ExpandableTableRowController.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { TableCellProps } from './TableCell';
+export interface ExpandableTableRowControllerProps extends TableCellProps {
+    /** Settes automatisk av ExpandableTableRow */
+    isOpen?: boolean;
+    /** Settes automatisk av ExpandableTableRow */
+    onClick?: () => void;
+}
+declare const ExpandableTableRowController: React.ForwardRefExoticComponent<ExpandableTableRowControllerProps & React.RefAttributes<HTMLTableCellElement>>;
+export { ExpandableTableRowController };

package/build/components/table/Table.d.ts

@@ -0,0 +1,11 @@
+import { default as React, TableHTMLAttributes } from 'react';
+import { Density } from '../..';
+export interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+    density?: Density;
+    /** Bryt ned til en stablet listevisning på små skjermer. NB: husk å sette `data-th` på hver celle! */
+    collapseToList?: boolean;
+    /** Setter width: 100% */
+    fullWidth?: boolean;
+}
+declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
+export { Table };

package/build/components/table/TableBody.d.ts

@@ -0,0 +1,5 @@
+import { default as React, HTMLAttributes } from 'react';
+export interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
+}
+declare const TableBody: React.ForwardRefExoticComponent<TableBodyProps & React.RefAttributes<HTMLTableSectionElement>>;
+export { TableBody };

package/build/components/table/TableCaption.d.ts

@@ -0,0 +1,7 @@
+import { default as React, HTMLAttributes } from 'react';
+export interface TableCaptionProps extends HTMLAttributes<HTMLTableCaptionElement> {
+    /** Skjuler caption visuelt */
+    srOnly?: boolean;
+}
+declare const TableCaption: React.ForwardRefExoticComponent<TableCaptionProps & React.RefAttributes<HTMLTableCaptionElement>>;
+export { TableCaption };

package/build/components/table/TableCell.d.ts

@@ -0,0 +1,17 @@
+import { default as React, TdHTMLAttributes } from 'react';
+import { Density } from '../..';
+export interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
+    density?: Density;
+    /**
+     * Velg mellom venstrejustering og høyrejustering av innholdet. Typisk skal innholdet være venstrejustert, men for eksempel summer er høyrejustert.
+     * @default "left"
+     */
+    align?: "left" | "center" | "right";
+    /**
+     * Velg mellom vertikal sentrering av innholdet eller toppjustering. Typisk skal innholdet være toppjustert, men dersom raden har knapper kan midtstilling fungere bedre.
+     * @default "top"
+     */
+    verticalAlign?: "center" | "top";
+}
+declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
+export { TableCell };

package/build/components/table/TableColumn.d.ts

@@ -0,0 +1,5 @@
+import { default as React, ColHTMLAttributes } from 'react';
+export interface TableColumnProps extends ColHTMLAttributes<HTMLTableColElement> {
+}
+declare const TableColumn: React.ForwardRefExoticComponent<TableColumnProps & React.RefAttributes<HTMLTableColElement>>;
+export { TableColumn };

package/build/components/table/TableColumnGroup.d.ts

@@ -0,0 +1,5 @@
+import { default as React, ColgroupHTMLAttributes } from 'react';
+export interface TableColumnGroupProps extends ColgroupHTMLAttributes<HTMLTableColElement> {
+}
+declare const TableColumnGroup: React.ForwardRefExoticComponent<TableColumnGroupProps & React.RefAttributes<HTMLTableColElement>>;
+export { TableColumnGroup };

package/build/components/table/TableFooter.d.ts

@@ -0,0 +1,5 @@
+import { default as React, HTMLAttributes } from 'react';
+export interface TableFooterProps extends HTMLAttributes<HTMLTableSectionElement> {
+}
+declare const TableFooter: React.ForwardRefExoticComponent<TableFooterProps & React.RefAttributes<HTMLTableSectionElement>>;
+export { TableFooter };

package/build/components/table/TableHead.d.ts

@@ -0,0 +1,7 @@
+import { default as React, HTMLAttributes } from 'react';
+export interface TableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
+    srOnly?: boolean;
+    sticky?: boolean;
+}
+declare const TableHead: React.ForwardRefExoticComponent<TableHeadProps & React.RefAttributes<HTMLTableSectionElement>>;
+export { TableHead };

package/build/components/table/TableHeader.d.ts

@@ -0,0 +1,22 @@
+import { default as React, ThHTMLAttributes } from 'react';
+import { Density } from '../..';
+import { TableSortProps } from './utils';
+export type TableSortDirection = "asc" | "desc";
+export interface TableHeaderProps extends ThHTMLAttributes<HTMLTableCellElement> {
+    bold?: boolean;
+    density?: Density;
+    /**
+     * Velg mellom venstrejustering og høyrejustering av innholdet. Typisk skal header følge innholdet i radene.
+     * @default "left"
+     */
+    align?: "left" | "center" | "right";
+    /**
+     * Si om headeren gjelder for en kolonne eller en rad
+     * @default "col"
+     */
+    scope?: "col" | "row";
+    srOnly?: boolean;
+    sortable?: TableSortProps;
+}
+declare const TableHeader: React.ForwardRefExoticComponent<TableHeaderProps & React.RefAttributes<HTMLTableCellElement>>;
+export { TableHeader };

package/build/components/table/TablePagination.d.ts

@@ -0,0 +1,43 @@
+import { default as React, ChangeEventHandler } from 'react';
+import { Density } from '../..';
+export interface TablePaginationProps {
+    className?: string;
+    id?: string;
+    density?: Density;
+    /**
+     * @default 0
+     */
+    activePage?: number;
+    /**
+     * Null eller negativt tall tolkes som "vis alle".
+     */
+    rowsPerPage: number;
+    rowsPerPageItems: Array<number | {
+        label: string;
+        value: number;
+    }>;
+    totalNumberOfRows: number;
+    /**
+     * Viser et valgfritt inputfelt for å hoppe raskt til en spesifik side.
+     * Du kan også sende inn en custom label hvis du ønsker det, ellers bruke
+     * true for default label
+     * @default false
+     */
+    withGoToPage?: boolean | {
+        gotoLabel: string;
+    };
+    onChange: (e: React.SyntheticEvent, toPage: number, fromPage: number) => void;
+    onChangeRowsPerPage: ChangeEventHandler<HTMLSelectElement>;
+    /**
+     * Dersom du ønsker å ha custom labels kan du sende inn disse. "rowsPerPage"
+     * vises alltid på skjerm mens "next" og "previous" brukes som hint til
+     * skjermlesere for ikon-knappene til Neste/Forrige side
+     * @default { rowsPerPage: "Rader per side", previous: "Forrige", next: "Neste" }
+     */
+    labels?: {
+        rowsPerPage: string;
+        previous: string;
+        next: string;
+    };
+}
+export declare const TablePagination: React.ForwardRefExoticComponent<TablePaginationProps & React.RefAttributes<HTMLDivElement>>;

package/build/components/table/TableRow.d.ts

@@ -0,0 +1,15 @@
+import { default as React, HTMLAttributes } from 'react';
+export interface ClickableRowProps {
+    markClickedRows?: boolean;
+    /** Lar deg kontrollere radens tilstand untenfra */
+    isClicked?: boolean;
+    onClick: (e: React.MouseEvent<HTMLTableRowElement, MouseEvent> | React.KeyboardEvent<HTMLTableRowElement>) => void;
+}
+export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    /**
+     * Gir raden interaktivitet og en click-handler.
+     */
+    clickable?: ClickableRowProps;
+}
+declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
+export { TableRow };

package/build/components/table/index.d.ts

@@ -0,0 +1,34 @@
+export { DataTable } from './DataTable';
+export { Table } from './Table';
+export { TableBody } from './TableBody';
+export { TableCaption } from './TableCaption';
+export { TableCell } from './TableCell';
+export { TableColumn } from './TableColumn';
+export { TableColumnGroup } from './TableColumnGroup';
+export { useTableContext, TableContextProvider } from './tableContext';
+export { useTableSectionContext, TableSectionContextProvider } from './tableSectionContext';
+export { TableFooter } from './TableFooter';
+export { TableHead } from './TableHead';
+export { TableHeader } from './TableHeader';
+export { TablePagination } from './TablePagination';
+export { TableRow } from './TableRow';
+export { ExpandableTableRow } from './ExpandableTableRow';
+export { ExpandableTableRowController } from './ExpandableTableRowController';
+export { useSortableTableHeader } from './utils';
+export type { DataTableProps } from './DataTable';
+export type { TableProps } from './Table';
+export type { TableBodyProps } from './TableBody';
+export type { TableCaptionProps } from './TableCaption';
+export type { TableCellProps } from './TableCell';
+export type { TableColumnProps } from './TableColumn';
+export type { TableColumnGroupProps } from './TableColumnGroup';
+export type { TableContextProviderProps } from './tableContext';
+export type { TableSectionContextProviderProps } from './tableSectionContext';
+export type { TableFooterProps } from './TableFooter';
+export type { TableHeadProps } from './TableHead';
+export type { TableHeaderProps, TableSortDirection } from './TableHeader';
+export type { TablePaginationProps } from './TablePagination';
+export type { TableRowProps } from './TableRow';
+export type { ExpandableTableRowProps } from './ExpandableTableRow';
+export type { ExpandableTableRowControllerProps } from './ExpandableTableRowController';
+export type { TableSortProps } from './utils';

package/build/components/table/tableContext.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { Density, WithChildren } from '../..';
+type TableContext = {
+    density?: Density;
+    collapseToList: boolean;
+};
+export declare const useTableContext: () => TableContext;
+export interface TableContextProviderProps extends WithChildren {
+    state: TableContext;
+}
+export declare const TableContextProvider: React.FC<TableContextProviderProps>;
+export {};

package/build/components/table/tableSectionContext.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { WithChildren } from '../..';
+type TableSectionContext = {
+    isTableHead: boolean;
+    isTableBody: boolean;
+    isTableFooter: boolean;
+};
+export declare const useTableSectionContext: () => TableSectionContext;
+export interface TableSectionContextProviderProps extends WithChildren {
+    state: TableSectionContext;
+}
+export declare const TableSectionContextProvider: React.FC<TableSectionContextProviderProps>;
+export {};

package/build/components/table/utils.d.ts

@@ -0,0 +1,10 @@
+import { TableSortDirection } from './TableHeader';
+export type TableSortProps = ReturnType<ReturnType<typeof useSortableTableHeader>["getSortProps"]>["sortable"];
+export declare const useSortableTableHeader: (activeSortKey: string, activeSortDirection: TableSortDirection, onChange: (newSortKey: string, newSortDirection: TableSortDirection) => void) => {
+    getSortProps: (sortKey: string) => {
+        sortable: {
+            onClick: () => void;
+            direction: TableSortDirection | undefined;
+        };
+    };
+};

package/build/components/tabs/NavTab.d.ts

@@ -0,0 +1,25 @@
+import { default as React, ElementType, AnchorHTMLAttributes } from 'react';
+export interface NavTabProps<T extends object = Record<string, unknown>> extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Sett til true for den nåværende fanen. False på resten. */
+    "aria-selected": boolean;
+    className?: string;
+    id?: string;
+    /**
+     * Overstyr hvilken komponent som skal brukes, for eksempel hvis du har en Link-komponent fra en router.
+     * @default "a"
+     */
+    component?: ElementType;
+    /** Send inn custom props til `component`. Nyttig om routeren din har noe fancy custom greier. */
+    componentProps?: T;
+    /** Vanlig alternativ til `href` i routere. */
+    to?: string;
+    href?: string;
+    /**
+     * Hook for å kunne stoppe default oppførsel ved tastaturnavigasjon.
+     *
+     * Om default oppførsel ikke fungerer for deg og du mister tastaturfokus etter
+     * navigasjon kan du returnere `false` her og sørge for korrekt oppførsel selv.
+     */
+    onBeforeKeyboardNavigation?: (from: HTMLAnchorElement, to: HTMLAnchorElement) => boolean | void;
+}
+export declare const NavTab: React.ForwardRefExoticComponent<NavTabProps<Record<string, unknown>> & React.RefAttributes<HTMLAnchorElement>>;

package/build/components/tabs/NavTabs.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { Density, WithChildren } from '../..';
+export interface NavTabsProps extends WithChildren {
+    "aria-label"?: string;
+    className?: string;
+    density?: Density;
+    id?: string;
+}
+export declare const NavTabs: ({ "aria-label": ariaLabel, children, className, density, ...rest }: NavTabsProps) => React.JSX.Element;

package/build/components/tabs/Tab.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { WithChildren } from '../..';
+export interface TabProps extends WithChildren {
+    className?: string;
+}
+/**
+ * En Tab til bruk som element i TabList. Ikke funksjonell utenfor et TabList element.
+ *
+ * Docs: https://jokul.fremtind.no/komponenter/tabs
+ */
+export declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLButtonElement>>;

package/build/components/tabs/TabList.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { WithChildren } from '../..';
+export interface TabListProps extends WithChildren {
+    "aria-label"?: string;
+    className?: string;
+}
+export interface InjectedProps {
+    activeIndex: number;
+    setActiveIndex: React.Dispatch<React.SetStateAction<number>>;
+    tabIDs: string[];
+    tabPanelIDs: string[];
+}
+/**
+ * Konteiner for elementer av typen Tab. Ikke funksjonell utenfor et Tabs element.
+ *
+ * Docs: https://jokul.fremtind.no/komponenter/tabs
+ */
+export declare const TabList: ({ children, className, ...injected }: TabListProps) => React.JSX.Element;

package/build/components/tabs/TabPanel.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { WithChildren } from '../..';
+export interface TabPanelProps extends WithChildren {
+    className?: string;
+}
+/**
+ * Konteiner for innhold i et tabbet brukergrensesnitt. Ikke funksjonell utenfor et Tabs element.
+ *
+ * Docs: https://jokul.fremtind.no/komponenter/tabs
+ */
+export declare const TabPanel: ({ children, ...props }: TabPanelProps) => React.JSX.Element;

package/build/components/tabs/Tabs.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { Density, WithChildren } from '../..';
+export interface TabsProps extends WithChildren {
+    className?: string;
+    density?: Density;
+    onChange?: (tabIndex: number) => void;
+    defaultTab?: number;
+}
+/**
+ * Konteiner for et grensesnitt hvor man kan tabbe mellom innhold.
+ * Må inneholde en TabList etterfulgt av en eller flere TabPanel.
+ *
+ * Docs: https://jokul.fremtind.no/komponenter/tabs
+ */
+export declare const Tabs: ({ onChange, defaultTab, density, ...props }: TabsProps) => React.JSX.Element;

package/build/components/tabs/index.d.ts

@@ -0,0 +1,6 @@
+export * from './NavTab';
+export * from './NavTabs';
+export * from './Tabs';
+export * from './TabList';
+export * from './Tab';
+export * from './TabPanel';