@kystverket/styrbord 1.19.0 → 1.20.0

package/dist/src/components/designsystemet/AvatarStack/AvatarStack.stories.d.ts

@@ -4,10 +4,6 @@ type Story = StoryFn<typeof AvatarStack>;
 declare const meta: Meta<typeof AvatarStack>;
 export default meta;
 export declare const Preview: Story;
-export declare const Sizes: Story;
-export declare const Overlap: Story;
-export declare const Gap: Story;
 export declare const Expandable: Story;
 export declare const WithSuffix: Story;
-export declare const ShapeVariants: Story;
 export declare const ExpandableWithTooltips: Story;

package/dist/src/components/designsystemet/Card/Card.stories.d.ts

@@ -0,0 +1,32 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { CardBlock } from '@digdir/designsystemet-react';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<Omit<import("@digdir/designsystemet-react").DefaultProps & React.HTMLAttributes<HTMLDivElement>, "children" | "asChild" | "variant"> & {
+        variant?: "default" | "tinted";
+        asChild?: boolean;
+        children: React.ReactNode;
+    } & React.RefAttributes<HTMLDivElement>> & {
+        Block: typeof CardBlock;
+    };
+    decorators: ((Story: import("storybook/internal/csf").PartialStoryFn, context: import("storybook/internal/csf").StoryContext) => React.JSX.Element)[];
+    tags: string[];
+    argTypes: {
+        variant: {
+            options: string[];
+            control: {
+                type: "radio";
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const ColorVariants: Story['render'];
+export declare const Colors: Story;
+export declare const CardWithTitleAndIcon: Story;
+export declare const CardWithTitle: Story;
+export declare const CardWithLinkInTitle: Story;
+export declare const CardAsLink: Story;
+export declare const CardAsButton: Story;

package/dist/src/components/designsystemet/Checkbox/Checkbox.stories.d.ts

@@ -51,8 +51,8 @@ export declare const Disabled: {
         className?: string | undefined | undefined;
         width?: number | string | undefined | undefined;
         color?: string | undefined | undefined;
-        'data-color'?: import("@digdir/designsystemet-react/colors").Color | undefined;
-        'data-size'?: import("@digdir/designsystemet-react").Size | undefined;
+        'data-size'?: (import("@digdir/designsystemet-types").Size | (string & {})) | undefined;
+        'data-color'?: (import("@digdir/designsystemet-types").Color | import("@digdir/designsystemet-types").SeverityColors | (string & {})) | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -352,6 +352,7 @@ export declare const Disabled: {
         value?: string | number | readonly string[] | undefined;
         error?: React.ReactNode;
         variant?: "outline" | undefined;
+        position?: "start" | "end" | undefined;
         'aria-labelledby'?: never | undefined;
         ref?: React.Ref<HTMLInputElement> | undefined;
         key?: React.Key | null | undefined;
@@ -368,8 +369,8 @@ export declare const Disabled: {
         className?: string | undefined | undefined;
         width?: number | string | undefined | undefined;
         color?: string | undefined | undefined;
-        'data-color'?: import("@digdir/designsystemet-react/colors").Color | undefined;
-        'data-size'?: import("@digdir/designsystemet-react").Size | undefined;
+        'data-size'?: (import("@digdir/designsystemet-types").Size | (string & {})) | undefined;
+        'data-color'?: (import("@digdir/designsystemet-types").Color | import("@digdir/designsystemet-types").SeverityColors | (string & {})) | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -669,6 +670,7 @@ export declare const Disabled: {
         value?: string | number | readonly string[] | undefined;
         error?: React.ReactNode;
         variant?: "outline" | undefined;
+        position?: "start" | "end" | undefined;
         'aria-labelledby'?: never | undefined;
         ref?: React.Ref<HTMLInputElement> | undefined;
         key?: React.Key | null | undefined;
@@ -685,8 +687,8 @@ export declare const Disabled: {
         className?: string | undefined | undefined;
         width?: number | string | undefined | undefined;
         color?: string | undefined | undefined;
-        'data-color'?: import("@digdir/designsystemet-react/colors").Color | undefined;
-        'data-size'?: import("@digdir/designsystemet-react").Size | undefined;
+        'data-size'?: (import("@digdir/designsystemet-types").Size | (string & {})) | undefined;
+        'data-color'?: (import("@digdir/designsystemet-types").Color | import("@digdir/designsystemet-types").SeverityColors | (string & {})) | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -986,6 +988,7 @@ export declare const Disabled: {
         value?: string | number | readonly string[] | undefined;
         error?: React.ReactNode;
         variant?: "outline" | undefined;
+        position?: "start" | "end" | undefined;
         'aria-labelledby'?: string | undefined;
         ref?: React.Ref<HTMLInputElement> | undefined;
         key?: React.Key | null | undefined;

package/dist/src/components/designsystemet/Chip/Chip.stories.d.ts

@@ -0,0 +1,85 @@
+import { ChipButtonProps } from '~/main';
+import type { StoryObj } from '@storybook/react-vite';
+declare const chipVariants: readonly ["Radio", "Checkbox", "Removable", "Button"];
+type ChipVariant = (typeof chipVariants)[number];
+type ChipStoryArgs = {
+    variant: ChipVariant;
+    label: string;
+    color: ChipColor;
+    disabled: boolean;
+};
+type ChipColor = NonNullable<ChipButtonProps['data-color']>;
+declare const meta: {
+    title: string;
+    component: React.FC<Omit<import("@digdir/designsystemet-react").DefaultProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type">, keyof {
+        asChild?: boolean;
+        'data-wrap'?: "nowrap" | "wrap";
+    }> & {
+        asChild?: boolean;
+        'data-wrap'?: "nowrap" | "wrap";
+    } & {
+        ref?: React.Ref<HTMLLabelElement>;
+    }>;
+    tags: string[];
+    parameters: {
+        customStyles: {
+            display: string;
+            gap: string;
+        };
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<ChipStoryArgs>;
+export declare const Preview: Story;
+/**
+ * Go into the story itself to have an option to switch between variants
+ */
+export declare const Sizes: Story;
+export declare const Colors: Story;
+export declare const Checkbox: {
+    render: (args: Omit<import("@digdir/designsystemet-react").DefaultProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type">, keyof {
+        asChild?: boolean;
+        'data-wrap'?: "nowrap" | "wrap";
+    }> & {
+        asChild?: boolean;
+        'data-wrap'?: "nowrap" | "wrap";
+    } & {
+        ref?: React.Ref<HTMLLabelElement>;
+    }) => React.JSX.Element;
+};
+export declare const Removable: {
+    render: (args: Omit<import("@digdir/designsystemet-react").DefaultProps & React.ButtonHTMLAttributes<HTMLButtonElement>, keyof {
+        asChild?: boolean;
+        'data-wrap'?: "nowrap" | "wrap";
+    }> & {
+        asChild?: boolean;
+        'data-wrap'?: "nowrap" | "wrap";
+    } & {
+        ref?: React.Ref<HTMLButtonElement>;
+    }) => React.JSX.Element;
+    args: {
+        'aria-label': string;
+    };
+};
+export declare const Button: {
+    render: (args: Omit<import("@digdir/designsystemet-react").DefaultProps & React.ButtonHTMLAttributes<HTMLButtonElement>, keyof {
+        asChild?: boolean;
+        'data-wrap'?: "nowrap" | "wrap";
+    }> & {
+        asChild?: boolean;
+        'data-wrap'?: "nowrap" | "wrap";
+    } & {
+        ref?: React.Ref<HTMLButtonElement>;
+    }) => React.JSX.Element;
+    parameters: {
+        customStyles: {
+            flexWrap: string;
+            justifyContent: string;
+        };
+    };
+};

package/dist/src/components/designsystemet/Details/Details.stories.d.ts

@@ -3,8 +3,10 @@ import { DetailsProps } from '@digdir/designsystemet-react';
 declare const meta: {
     title: string;
     component: React.ForwardRefExoticComponent<DetailsProps & React.RefAttributes<HTMLDetailsElement>> & {
-        Summary: typeof import("@digdir/designsystemet-react").DetailsSummary;
-        Content: typeof import("@digdir/designsystemet-react").DetailsContent;
+        Summary: React.ForwardRefExoticComponent<{
+            children?: React.ReactNode;
+        } & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+        Content: React.ForwardRefExoticComponent<import("@digdir/designsystemet-react").DetailsContentProps & React.RefAttributes<HTMLDivElement>>;
     };
     decorators: ((Story: import("storybook/internal/csf").PartialStoryFn, context: import("storybook/internal/csf").StoryContext) => React.JSX.Element)[];
     tags: string[];

package/dist/src/components/designsystemet/Dialog/Dialog.d.ts

@@ -0,0 +1,23 @@
+import { DialogBlock, DialogTrigger, DialogTriggerContext, type DialogProps as DSDialogProps } from '@digdir/designsystemet-react';
+export type DialogSize = 'sm' | 'md' | 'lg';
+export type DialogProps = DSDialogProps & {
+    size?: DialogSize;
+};
+declare const DialogRoot: React.ForwardRefExoticComponent<Omit<import("@digdir/designsystemet-react").DefaultProps & React.DialogHTMLAttributes<HTMLDialogElement>, "asChild" | "open" | "onClose" | "placement" | "closeButton" | "closedby" | "modal"> & {
+    closeButton?: string | false;
+    closedby?: "none" | "closerequest" | "any";
+    placement?: "center" | "left" | "right" | "top" | "bottom";
+    modal?: boolean;
+    open?: boolean;
+    onClose?: (event: Event) => void;
+    asChild?: boolean;
+} & {
+    size?: DialogSize;
+} & React.RefAttributes<HTMLDialogElement>>;
+type DialogComponent = typeof DialogRoot & {
+    TriggerContext: typeof DialogTriggerContext;
+    Trigger: typeof DialogTrigger;
+    Block: typeof DialogBlock;
+};
+export declare const Dialog: DialogComponent;
+export {};

package/dist/src/components/designsystemet/Dialog/Dialog.stories.d.ts

@@ -0,0 +1,80 @@
+import { Dialog } from '~/main';
+import type { StoryFn } from '@storybook/react-vite';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<Omit<import("@digdir/designsystemet-react").DefaultProps & React.DialogHTMLAttributes<HTMLDialogElement>, "asChild" | "open" | "onClose" | "placement" | "closeButton" | "closedby" | "modal"> & {
+        closeButton?: string | false;
+        closedby?: "none" | "closerequest" | "any";
+        placement?: "center" | "left" | "right" | "top" | "bottom";
+        modal?: boolean;
+        open?: boolean;
+        onClose?: (event: Event) => void;
+        asChild?: boolean;
+    } & {
+        size?: import("~/main").DialogSize;
+    } & React.RefAttributes<HTMLDialogElement>> & {
+        TriggerContext: {
+            (rest: import("@digdir/designsystemet-react").DialogTriggerContextProps): import("react").JSX.Element;
+            displayName: string;
+        };
+        Trigger: React.ForwardRefExoticComponent<Omit<Omit<import("@digdir/designsystemet-react").DefaultProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "command" | "commandfor" | "commandFor">, "asChild" | "loading" | "variant" | "type" | "icon" | "command" | "commandfor" | "commandFor"> & {
+            variant?: "primary" | "secondary" | "tertiary";
+            icon?: boolean;
+            loading?: boolean | import("react").ReactNode;
+            asChild?: boolean;
+            type?: import("react").ButtonHTMLAttributes<HTMLButtonElement>["type"];
+            command?: string;
+            commandfor?: string;
+            commandFor?: string;
+        } & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+        Block: React.ForwardRefExoticComponent<{
+            asChild?: boolean;
+        } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    };
+    tags: string[];
+    parameters: {
+        layout: string;
+        customStyles: {
+            display: string;
+            alignItems: string;
+            justifyItems: string;
+            story: {
+                boxSizing: string;
+                height: string;
+                width: string;
+            };
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+            modes: {
+                mobile: {
+                    viewport: {
+                        height: number;
+                    };
+                };
+                desktop: {
+                    viewport: {
+                        height: number;
+                    };
+                };
+            };
+        };
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    play: (ctx: import("storybook/internal/csf").PlayFunctionContext<import("@storybook/react").ReactRenderer, import("@storybook/react").Args>) => Promise<void>;
+};
+export default _default;
+export declare const Preview: StoryFn<typeof Dialog>;
+export declare const WithoutDialogTriggerContext: StoryFn<typeof Dialog>;
+export declare const DialogWithOpenProp: StoryFn<typeof Dialog>;
+export declare const BackdropClosedbyAny: StoryFn<typeof Dialog>;
+export declare const WithHeaderAndFooter: StoryFn<typeof Dialog>;
+export declare const DialogWithForm: StoryFn<typeof Dialog>;
+export declare const DialogWithMaxWidth: StoryFn<typeof Dialog>;
+export declare const DialogWithSuggestion: StoryFn<typeof Dialog>;
+export declare const DialogNonModal: StoryFn<typeof Dialog>;
+export declare const NestedDialogs: StoryFn<typeof Dialog>;

package/dist/src/components/designsystemet/List/List.stories.d.ts

@@ -0,0 +1,17 @@
+import { List } from '~/main';
+import type { StoryFn } from '@storybook/react-vite';
+type Story = StoryFn<typeof List.Unordered>;
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<{
+        asChild?: boolean;
+    } & import("@digdir/designsystemet-react").DefaultProps & Omit<React.HTMLAttributes<HTMLUListElement>, "size"> & React.RefAttributes<HTMLUListElement>>;
+    tags: string[];
+};
+export default _default;
+export declare const Preview: Story;
+export declare const Sortert: StoryFn<typeof List.Ordered>;
+export declare const Usortert: Story;
+export declare const Innrykk: Story;
+export declare const ListeMedLenker: Story;
+export declare const ListeMedOverskrift: Story;

package/dist/src/components/designsystemet/Paragraph/Paragraph.d.ts

@@ -1,7 +1,7 @@
 import { ParagraphProps as DsParagraphProps } from '@digdir/designsystemet-react';
 export type ParagraphProps = DsParagraphProps & {
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    /** @deprecated Use `fontWeight="medium"` instead. */
+    /** @deprecated Use `weight="medium"` instead. */
     strong?: boolean;
     weight?: 'regular' | 'medium' | 'semibold';
     'data-color-subtle'?: boolean;

package/dist/src/components/designsystemet/Popover/Popover.stories.d.ts

@@ -0,0 +1,59 @@
+import type { StoryFn } from '@storybook/react-vite';
+import { Popover } from '~/main';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<Omit<import("@digdir/designsystemet-react").DefaultProps & React.HTMLAttributes<HTMLDivElement>, "id" | "asChild" | "variant" | "open" | "onClose" | "placement" | "autoPlacement" | "onOpen"> & {
+        id?: string;
+        placement?: import("@digdir/designsystemet-react").Placement;
+        open?: boolean;
+        variant?: "default" | "tinted";
+        onOpen?: () => void;
+        onClose?: () => void;
+        autoPlacement?: boolean;
+        asChild?: boolean;
+    } & React.RefAttributes<HTMLDivElement>> & {
+        TriggerContext: {
+            ({ children }: import("@digdir/designsystemet-react").PopoverTriggerContextProps): import("react").JSX.Element;
+            displayName: string;
+        };
+        Trigger: React.ForwardRefExoticComponent<import("@digdir/designsystemet-react").PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    };
+    tags: string[];
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        'data-color': {
+            control: "select";
+            options: (string | undefined)[];
+        };
+        'data-size': {
+            control: "radio";
+            options: string[];
+        };
+        placement: {
+            control: "select";
+            options: string[];
+        };
+        variant: {
+            control: "radio";
+            options: (string | undefined)[];
+        };
+    };
+    play: (ctx: import("storybook/internal/csf").PlayFunctionContext<import("@storybook/react").ReactRenderer, import("@storybook/react").Args>) => Promise<void>;
+};
+export default _default;
+export declare const Preview: StoryFn<typeof Popover>;
+export declare const Interactive: StoryFn<typeof Popover>;
+export declare const DottedUnderline: StoryFn<typeof Popover>;
+export declare const Variants: StoryFn<typeof Popover>;
+export declare const Controlled: StoryFn<typeof Popover>;
+export declare const Sizes: StoryFn<typeof Popover>;
+export declare const WithoutContext: StoryFn<typeof Popover>;

package/dist/src/components/designsystemet/Suggestion/Suggestion.stories.d.ts

@@ -0,0 +1,37 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: (({ children, label, className, required, optional, error, ...props }: import("~/main").SuggestionProps) => React.JSX.Element) & {
+        Clear: React.ForwardRefExoticComponent<Omit<import("@digdir/designsystemet-react").DefaultProps & React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & {
+            'aria-label'?: string;
+        } & React.RefAttributes<HTMLButtonElement>>;
+        Empty: React.ForwardRefExoticComponent<import("@digdir/designsystemet-react").DefaultProps & React.OptionHTMLAttributes<HTMLOptionElement> & {
+            'data-empty'?: string;
+        } & React.RefAttributes<HTMLOptionElement>>;
+        Input: React.ForwardRefExoticComponent<import("@digdir/designsystemet-react").SuggestionInputProps & React.RefAttributes<HTMLInputElement>>;
+        List: React.ForwardRefExoticComponent<Omit<import("@digdir/designsystemet-react").DefaultProps & React.HTMLAttributes<HTMLDataListElement>, "autoPlacement" | "singular" | "plural"> & {
+            singular?: string;
+            plural?: string;
+            autoPlacement?: boolean;
+        } & React.RefAttributes<HTMLDataListElement>>;
+        Option: React.ForwardRefExoticComponent<React.OptionHTMLAttributes<HTMLOptionElement> & import("@digdir/designsystemet-react").DefaultProps & React.RefAttributes<HTMLOptionElement>>;
+    };
+    tags: string[];
+    args: {
+        label: string;
+        error: string;
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Preview: Story;
+export declare const Multiple: Story;
+export declare const ControlledMultiple: Story;
+export declare const Creatable: Story;

package/dist/src/components/designsystemet/Text/Text.d.ts

@@ -1,6 +1,6 @@
 import { type ParagraphProps } from '../Paragraph/Paragraph';
 import { HTMLAttributes } from 'react';
-export declare const colorValues: readonly ["primary", "accent", "neutral", "extra1", "extra2", "success", "danger", "info", "warning", "focus", "hav", "stein", "gress", "sol", "lyng", "himmel", "sand", "fyr", "dyphav", "skog"];
+export declare const colorValues: readonly ["primary", "accent", "neutral", "extra1", "extra2", "success", "danger", "info", "warning", "focus", "lyng", "hav", "stein", "gress", "sol", "himmel", "sand", "fyr", "dyphav", "skog"];
 export declare const textWrapValues: readonly ["wrap", "balance", "pretty", "nowrap"];
 export declare const textTransformValues: readonly ["none", "capitalize", "uppercase", "lowercase"];
 export declare const textAlignValues: readonly ["left", "center", "right", "justify"];

package/dist/src/components/designsystemet/Text/Text.stories.d.ts

@@ -33,7 +33,7 @@ declare const meta: {
         };
         "data-color": {
             control: "select";
-            options: ("info" | "warning" | "hav" | "stein" | "gress" | "sol" | "lyng" | "himmel" | "sand" | "fyr" | "dyphav" | "skog" | "primary" | "accent" | "neutral" | "extra1" | "extra2" | "success" | "danger" | "focus" | undefined)[];
+            options: ("info" | "warning" | "lyng" | "hav" | "stein" | "gress" | "sol" | "himmel" | "sand" | "fyr" | "dyphav" | "skog" | "primary" | "accent" | "neutral" | "extra1" | "extra2" | "success" | "danger" | "focus" | undefined)[];
             table: {
                 defaultValue: {
                     summary: string;

package/dist/src/components/kystverket/Typography/typography.util.d.ts

@@ -1,6 +1,5 @@
 export type TypographyPrefix = 'body' | 'accent' | 'label';
 export type AllSizes = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-export type TypographyColor = 'accent' | 'neutral';
 export type TypographyWeight = 'regular' | 'medium' | 'semibold';
 type BuildTypographyProps = {
     type: TypographyPrefix;
@@ -9,8 +8,6 @@ type BuildTypographyProps = {
     strong?: boolean;
     weight?: TypographyWeight;
     inline?: boolean;
-    color?: TypographyColor;
-    margin?: boolean;
     className?: string;
 };
 export declare const buildTypographyClasses: ({ type, size, strong, weight, inline, className, }: BuildTypographyProps) => string;