@digdir/designsystemet-react 1.20.0 → 1.20.1

package/dist/types/components/popover/popover-trigger.d.ts

@@ -1,43 +0,0 @@
-import { type ButtonHTMLAttributes } from 'react';
-import type { DefaultProps } from '../../types';
-import { type ButtonProps } from '../button/button';
-export type PopoverTriggerProps = ({
-    /**
-     * Will render the trigger as inline text.
-     * @default false
-     */
-    inline?: true;
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     * @default false
-     */
-    asChild?: boolean;
-} & ButtonHTMLAttributes<HTMLButtonElement> & DefaultProps) | ({
-    /**
-     * Will render the trigger as inline text.
-     * @default false
-     */
-    inline?: false;
-} & ButtonProps);
-/**
- * PopoverTrigger component, used to trigger a popover.
- *
- * @example
- * <PopoverTriggerContext>
- *   <PopoverTrigger>Open Popover</PopoverTrigger>
- *   <Popover>
- *     Content
- *   </Popover>
- * </PopoverTriggerContext>
- *
- * @example inline
- * <PopoverTriggerContext>
- *   <Paragraph>
- *    We can use it <PopoverTrigger inline={true}>inline</PopoverTrigger>.
- *   </Paragraph>
- *   <Popover>
- *     Content
- *   </Popover>
- * </PopoverTriggerContext>
- */
-export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types/components/popover/popover.d.ts

@@ -1,101 +0,0 @@
-import type { HTMLAttributes } from 'react';
-import '@digdir/designsystemet-web';
-import type { DefaultProps, Placement } from '../../types';
-import type { MergeRight } from '../../utilities';
-export type PopoverProps = MergeRight<DefaultProps & HTMLAttributes<HTMLDivElement>, {
-    /**
-     * id to connect the trigger with the popover - required when not using Popover.Context.
-     */
-    id?: string;
-    /**
-     * Placement of the popover on the trigger.
-     * @default 'top'
-     */
-    placement?: Placement;
-    /**
-     * When a boolean is provided, the popover will be controlled.
-     * @default undefined
-     */
-    open?: boolean;
-    /**
-     * Change the background color of the popover.
-     *
-     * @default 'default'
-     */
-    variant?: 'default' | 'tinted';
-    /**
-     * Callback when the popover wants to open.
-     */
-    onOpen?: () => void;
-    /**
-     * Callback when the popover wants to close.
-     */
-    onClose?: () => void;
-    /**
-     * Whether to enable auto placement.
-     * @default true
-     */
-    autoPlacement?: boolean;
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     * @default false
-     */
-    asChild?: boolean;
-}>;
-/**
- * Popover component, used to display content in a popover over an element.
- *
- * @example with TriggerContext
- * <Popover.TriggerContext>
- *   <Popover.Trigger>Open Popover</Popover.Trigger>
- *   <Popover>
- *     Content
- *   </Popover>
- * </Popover.TriggerContext>
- *
- * @example without TriggerContext
- * <Button popovertarget="my-popover">Open Popover</Button>
- * <Popover id="my-popover">
- *   Content
- * </Popover>
- */
-export declare const Popover: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDivElement>, "id" | "variant" | "asChild" | "open" | "placement" | "onClose" | "onOpen" | "autoPlacement"> & {
-    /**
-     * id to connect the trigger with the popover - required when not using Popover.Context.
-     */
-    id?: string;
-    /**
-     * Placement of the popover on the trigger.
-     * @default 'top'
-     */
-    placement?: Placement;
-    /**
-     * When a boolean is provided, the popover will be controlled.
-     * @default undefined
-     */
-    open?: boolean;
-    /**
-     * Change the background color of the popover.
-     *
-     * @default 'default'
-     */
-    variant?: "default" | "tinted";
-    /**
-     * Callback when the popover wants to open.
-     */
-    onOpen?: () => void;
-    /**
-     * Callback when the popover wants to close.
-     */
-    onClose?: () => void;
-    /**
-     * Whether to enable auto placement.
-     * @default true
-     */
-    autoPlacement?: boolean;
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     * @default false
-     */
-    asChild?: boolean;
-} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/radio/radio.d.ts

@@ -1,43 +0,0 @@
-import type { ReactNode } from 'react';
-import type { DefaultProps, LabelRequired } from '../../types';
-import type { MergeRight } from '../../utilities';
-import { type FieldProps } from '../field';
-import { type InputProps } from '../input/input';
-export type RadioProps = MergeRight<DefaultProps & Omit<InputProps, 'type' | 'role' | 'size'>, {
-    /**
-     * Optional aria-label
-     **/
-    'aria-label'?: string;
-    /**
-     * Radio label
-     */
-    label?: ReactNode;
-    /**
-     * Description for field
-     */
-    description?: ReactNode;
-    /**
-     * Value of the `input` element
-     */
-    value?: InputProps['value'];
-    /**
-     * Error message for field
-     */
-    error?: ReactNode;
-    /**
-     * If outline, the radio will have a border.
-     */
-    variant?: 'outline';
-    /**
-     * Position of radio
-     * @default start
-     */
-    position?: FieldProps['position'];
-} & LabelRequired>;
-/**
- * Radio used to select multiple options.
- *
- * @example
- * <Radio label="I agree" value="agree" />
- */
-export declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/types/components/search/index.d.ts

@@ -1,57 +0,0 @@
-import { Search as SearchRoot } from './search';
-import { SearchButton } from './search-button';
-import { SearchClear } from './search-clear';
-import { SearchInput } from './search-input';
-type Search = typeof SearchRoot & {
-    /**
-     * Search.Clear component, used to display a clear button when the search input is not empty.
-     *
-     * @example
-     * <Search>
-     *   <Search.Input aria-label='Søk' />
-     *   <Search.Clear />
-     * </Search>
-     */
-    Clear: typeof SearchClear;
-    /**
-     * Search.Button component, used to display a search button within a Search component.
-     *
-     * @example
-     * <Search>
-     *   <Search.Input aria-label='Søk' />
-     *   <Search.Button>Søk</Search.Button>
-     * </Search>
-     */
-    Button: typeof SearchButton;
-    /**
-     * Search.Input component, used to display a search input within the Search component.
-     *
-     * @example
-     * <Search>
-     *   <Search.Input aria-label='Søk' />
-     * </Search>
-     */
-    Input: typeof SearchInput;
-};
-/**
- * Search component, use to display different variations of a search input
- *
- * @example with button
- * <Search>
- *   <Search.Input aria-label='Søk' />
- *   <Search.Clear />
- *   <Search.Button />
- * </Search>
- *
- * @example with icon
- * <Search>
- *   <Search.Input aria-label='Søk' />
- *   <Search.Clear />
- * </Search>
- */
-declare const SearchComponent: Search;
-export type { SearchProps } from './search';
-export type { SearchButtonProps } from './search-button';
-export type { SearchClearProps } from './search-clear';
-export type { SearchInputProps } from './search-input';
-export { SearchButton, SearchClear, SearchComponent as Search, SearchInput };

package/dist/types/components/search/search-button.d.ts

@@ -1,34 +0,0 @@
-import { type ReactNode } from 'react';
-import type { MergeRight } from '../../utilities';
-import { type ButtonProps } from '../button/button';
-export type SearchButtonProps = MergeRight<ButtonProps, {
-    /**
-     * Variant of the button
-     * @default 'primary'
-     */
-    variant?: 'primary' | 'secondary';
-    /**
-     * Children of the button
-     * @default 'Søk'
-     */
-    children?: ReactNode;
-}>;
-/**
- * SearchButton component, used to display a search button within a Search component.
- *
- * @example
- * <Search>
- *   <SearchInput aria-label='Søk' />
- *   <SearchButton>Søk</SearchButton>
- * </Search>
- */
-export declare const SearchButton: import("react").ForwardRefExoticComponent<Omit<import("../..").DefaultProps & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "command" | "commandfor" | "commandFor">, "type" | "variant" | "command" | "commandfor" | "commandFor" | "icon" | "loading" | "asChild"> & {
-    variant?: "primary" | "secondary" | "tertiary";
-    icon?: boolean;
-    loading?: boolean | ReactNode;
-    asChild?: boolean;
-    type?: import("react").ButtonHTMLAttributes<HTMLButtonElement>["type"];
-    command?: string;
-    commandfor?: string;
-    commandFor?: string;
-} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types/components/search/search-clear.d.ts

@@ -1,24 +0,0 @@
-import { type ButtonProps } from '../button/button';
-export type SearchClearProps = Omit<ButtonProps, 'variant' | 'children'> & {
-    /**
-     * Aria label for the clear button
-     * @default 'Tøm'
-     */
-    'aria-label'?: string;
-};
-/**
- * SearchClear component, used to display a clear button when the search input is not empty.
- *
- * @example
- * <Search>
- *   <SearchInput aria-label='Søk' />
- *   <SearchClear />
- * </Search>
- */
-export declare const SearchClear: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "children" | "variant"> & {
-    /**
-     * Aria label for the clear button
-     * @default 'Tøm'
-     */
-    'aria-label'?: string;
-} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types/components/search/search-input.d.ts

@@ -1,24 +0,0 @@
-import { type InputHTMLAttributes } from 'react';
-import type { DefaultProps } from '../../types';
-export type SearchInputProps = DefaultProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'readOnly' | 'type'> & {
-    /**
-     * Type of input, affects if magnifying glass is shown or not. Use 'text' to hide magnifying glass.
-     * @default 'search'
-     */
-    type?: 'text' | 'search';
-};
-/**
- * SearchInput component, used to display a search input within the Search component.
- *
- * @example
- * <Search>
- *   <SearchInput aria-label='Søk' />
- * </Search>
- */
-export declare const SearchInput: import("react").ForwardRefExoticComponent<DefaultProps & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "readOnly"> & {
-    /**
-     * Type of input, affects if magnifying glass is shown or not. Use 'text' to hide magnifying glass.
-     * @default 'search'
-     */
-    type?: "text" | "search";
-} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/types/components/search/search.d.ts

@@ -1,22 +0,0 @@
-import '@digdir/designsystemet-web';
-import type { DSSuggestionElement } from '@digdir/designsystemet-web';
-import { type HTMLAttributes } from 'react';
-import type { DefaultProps } from '../../types';
-export type SearchProps = DefaultProps & HTMLAttributes<DSSuggestionElement>;
-/**
- * Search component, use to display different variations of a search input
- *
- * @example with button
- * <Search>
- *   <Search.Input aria-label='Søk' />
- *   <Search.Clear />
- *   <Search.Button />
- * </Search>
- *
- * @example with icon
- * <Search>
- *   <Search.Input aria-label='Søk' />
- *   <Search.Clear />
- * </Search>
- */
-export declare const Search: import("react").ForwardRefExoticComponent<DefaultProps & HTMLAttributes<DSSuggestionElement> & import("react").RefAttributes<DSSuggestionElement>>;

package/dist/types/components/select/index.d.ts

@@ -1,41 +0,0 @@
-import { Select as SelectParent } from './select';
-import { SelectOptgroup } from './select-optgroup';
-import { SelectOption } from './select-option';
-type Select = typeof SelectParent & {
-    /**
-     * Select.Option component, used to display a native option within a select.
-     *
-     * @example
-     * <Select>
-     *   <Select.Option value='1'>Option 1</Select.Option>
-     *   <Select.Option value='2'>Option 2</Select.Option>
-     * </Select>
-     */
-    Option: typeof SelectOption;
-    /**
-     * Select.Optgroup component, used to display a native optgroup within a select.
-     *
-     * @example
-     * <Select>
-     *   <Select.Optgroup label='Group 1'>
-     *     <Select.Option value='1'>Option 1</Select.Option>
-     *     <Select.Option value='2'>Option 2</Select.Option>
-     *   </Select.Optgroup>
-     * </Select>
-     */
-    Optgroup: typeof SelectOptgroup;
-};
-/**
- * Select component, used to display a native select.
- *
- * @example
- * <Select>
- *   <Select.Option value='1'>Option 1</Select.Option>
- *   <Select.Option value='2'>Option 2</Select.Option>
- * </Select>
- */
-declare const SelectComponent: Select;
-export type { SelectProps } from './select';
-export type { SelectOptgroupProps } from './select-optgroup';
-export type { SelectOptionProps } from './select-option';
-export { SelectComponent as Select, SelectOptgroup, SelectOption };

package/dist/types/components/select/select-optgroup.d.ts

@@ -1,26 +0,0 @@
-import type { OptgroupHTMLAttributes } from 'react';
-export type SelectOptgroupProps = {
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     * @default false
-     */
-    asChild?: boolean;
-} & OptgroupHTMLAttributes<HTMLOptGroupElement>;
-/**
- * SelectOptgroup component, used to display a native optgroup within a select.
- *
- * @example
- * <Select>
- *   <SelectOptgroup label='Group 1'>
- *     <SelectOption value='1'>Option 1</SelectOption>
- *     <SelectOption value='2'>Option 2</SelectOption>
- *   </SelectOptgroup>
- * </Select>
- */
-export declare const SelectOptgroup: import("react").ForwardRefExoticComponent<{
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     * @default false
-     */
-    asChild?: boolean;
-} & OptgroupHTMLAttributes<HTMLOptGroupElement> & import("react").RefAttributes<HTMLOptGroupElement>>;

package/dist/types/components/select/select-option.d.ts

@@ -1,24 +0,0 @@
-import type { OptionHTMLAttributes } from 'react';
-export type SelectOptionProps = {
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     * @default false
-     */
-    asChild?: boolean;
-} & OptionHTMLAttributes<HTMLOptionElement>;
-/**
- * SelectOption component, used to display a native option within a select.
- *
- * @example
- * <Select>
- *   <SelectOption value='1'>Option 1</SelectOption>
- *   <SelectOption value='2'>Option 2</SelectOption>
- * </Select>
- */
-export declare const SelectOption: import("react").ForwardRefExoticComponent<{
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     * @default false
-     */
-    asChild?: boolean;
-} & OptionHTMLAttributes<HTMLOptionElement> & import("react").RefAttributes<HTMLOptionElement>>;

package/dist/types/components/select/select.d.ts

@@ -1,39 +0,0 @@
-import type { SelectHTMLAttributes } from 'react';
-import type { DefaultProps } from '../../types';
-import type { MergeRight } from '../../utilities';
-export type SelectProps = MergeRight<DefaultProps & Omit<SelectHTMLAttributes<HTMLSelectElement>, 'multiple' | 'size'>, // Also Omit size as this sets amount of visible options in multiselect
-{
-    /**
-     * Defines if the select is readOnly
-     * @deprecated Use `aria-readonly` instead.
-     * @default false
-     */
-    readOnly?: boolean;
-    /**
-     * Defines the width of Select, where "auto" matches the content width.
-     * @default full
-     */
-    width?: 'full' | 'auto';
-}>;
-/**
- * Select component, used to display a native select.
- *
- * @example
- * <Select>
- *   <Select.Option value='1'>Option 1</Select.Option>
- *   <Select.Option value='2'>Option 2</Select.Option>
- * </Select>
- */
-export declare const Select: import("react").ForwardRefExoticComponent<Omit<DefaultProps & Omit<SelectHTMLAttributes<HTMLSelectElement>, "multiple" | "size">, "readOnly" | "width"> & {
-    /**
-     * Defines if the select is readOnly
-     * @deprecated Use `aria-readonly` instead.
-     * @default false
-     */
-    readOnly?: boolean;
-    /**
-     * Defines the width of Select, where "auto" matches the content width.
-     * @default full
-     */
-    width?: "full" | "auto";
-} & import("react").RefAttributes<HTMLSelectElement>>;

package/dist/types/components/skeleton/skeleton.d.ts

@@ -1,53 +0,0 @@
-import { type HTMLAttributes } from 'react';
-export type SkeletonProps = {
-    /**
-     * The width of the component
-     */
-    width?: string | number;
-    /**
-     * The height of the component
-     */
-    height?: string | number;
-    /**
-     * The shape variant
-     * @default 'rectangle'
-     */
-    variant?: 'rectangle' | 'circle' | 'text';
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     * @default false
-     */
-    asChild?: boolean;
-    /** @deprecated This prop has no effect. Use `width` or supply text as children instead */
-    characters?: number;
-} & HTMLAttributes<HTMLSpanElement>;
-/**
- * Skeleton is used to represent a draft of page while the content loads.
- *
- * @example
- * <Skeleton variant="circle" />
- * <Skeleton variant="text" />
- * <Skeleton variant="rectangle" />
- */
-export declare const Skeleton: import("react").ForwardRefExoticComponent<{
-    /**
-     * The width of the component
-     */
-    width?: string | number;
-    /**
-     * The height of the component
-     */
-    height?: string | number;
-    /**
-     * The shape variant
-     * @default 'rectangle'
-     */
-    variant?: "rectangle" | "circle" | "text";
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     * @default false
-     */
-    asChild?: boolean;
-    /** @deprecated This prop has no effect. Use `width` or supply text as children instead */
-    characters?: number;
-} & HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/types/components/skip-link/skip-link.d.ts

@@ -1,30 +0,0 @@
-import { type AnchorHTMLAttributes, type ReactNode } from 'react';
-import type { DefaultProps } from '../../types';
-import type { MergeRight } from '../../utilities';
-export type SkipLinkProps = MergeRight<DefaultProps & AnchorHTMLAttributes<HTMLAnchorElement>, {
-    /**
-     * The content to display inside the skiplink.
-     */
-    children: ReactNode;
-    /**
-     * Href of an element in the DOM the skiplink should skip to. E.g #main-content
-     */
-    href: string;
-}>;
-/**
- * SkipLink component, used to display a skip link within the page.
- * Place it at the top of the page to allow users to skip to the main content.
- *
- * @example
- * <SkipLink href='#main-content'>Skip to main content</SkipLink>
- */
-export declare const SkipLink: import("react").ForwardRefExoticComponent<Omit<DefaultProps & AnchorHTMLAttributes<HTMLAnchorElement>, "children" | "href"> & {
-    /**
-     * The content to display inside the skiplink.
-     */
-    children: ReactNode;
-    /**
-     * Href of an element in the DOM the skiplink should skip to. E.g #main-content
-     */
-    href: string;
-} & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/types/components/spinner/spinner.d.ts

@@ -1,23 +0,0 @@
-import { type ComponentPropsWithoutRef } from 'react';
-export type SpinnerProps = {
-    /**
-     * Accessibile label
-     */
-    'aria-label'?: string;
-    /**
-     * Spinner size
-     */
-    'data-size'?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-} & ComponentPropsWithoutRef<'svg'> & ({
-    'aria-label': string;
-} | {
-    'aria-label'?: string;
-    'aria-hidden': true | 'true';
-});
-/**
- * Spinner component used for indicating busy or indeterminate loading.
- *
- * @example
- * <Spinner aria-label='Loading users...' />
- */
-export declare const Spinner: import("react").ForwardRefExoticComponent<SpinnerProps & import("react").RefAttributes<SVGSVGElement>>;