@kystverket/styrbord 1.9.0 → 1.9.1

package/dist/src/components/kystverket/ClickableCard/ClickableCard.d.ts

@@ -0,0 +1,3 @@
+import type { ClickableCardProps } from './ClickableCard.types';
+declare const ClickableCard: (props: ClickableCardProps) => React.JSX.Element;
+export default ClickableCard;

package/dist/src/components/kystverket/ClickableCard/ClickableCard.stories.d.ts

@@ -0,0 +1,44 @@
+import type { StoryFn, StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: (props: import("~/main").ClickableCardProps) => React.JSX.Element;
+    decorators: ((Story: import("storybook/internal/csf").PartialStoryFn, context: import("storybook/internal/csf").StoryContext) => React.JSX.Element)[];
+    tags: string[];
+    argTypes: {
+        variant: {
+            options: ("default" | "tinted")[];
+            control: {
+                type: "radio";
+            };
+        };
+        color: {
+            options: ("main" | "neutral")[];
+            control: {
+                type: "radio";
+            };
+        };
+        headingLevel: {
+            options: number[];
+            control: {
+                type: "select";
+            };
+        };
+        headingSize: {
+            options: string[];
+            control: {
+                type: "select";
+            };
+        };
+        icon: {
+            control: {
+                type: "text";
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const ColorVariants: StoryFn;
+export declare const Eksempel: StoryFn;
+export declare const AsLink: Story;

package/dist/src/components/kystverket/ClickableCard/ClickableCard.types.d.ts

@@ -0,0 +1,30 @@
+import type { IconId } from '../Icon/icon.types';
+export type ClickableCardColor = 'neutral' | 'main';
+export type ClickableCardVariant = 'default' | 'tinted';
+export type ClickableCardHeadingSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type ClickableCardBaseProps = {
+    heading: string;
+    description?: string;
+    children?: React.ReactNode;
+    variant?: ClickableCardVariant;
+    color?: ClickableCardColor;
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    headingSize?: ClickableCardHeadingSize;
+    icon?: IconId;
+    chevron?: boolean;
+    showBorder?: boolean;
+    className?: string;
+    'aria-label'?: string;
+};
+type ClickableCardLinkProps = ClickableCardBaseProps & {
+    href: string;
+    target?: string;
+    rel?: string;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+};
+type ClickableCardButtonProps = ClickableCardBaseProps & {
+    href?: never;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+};
+export type ClickableCardProps = ClickableCardLinkProps | ClickableCardButtonProps;
+export {};

package/dist/src/components/kystverket/Icon/icon.types.d.ts

@@ -1,2 +1,2 @@
-export declare const iconIdList: readonly ["add", "add_box", "add_location", "add_location_alt", "adjust", "anchor", "apps", "archive", "arrow_back", "arrow_forward", "arrow_right_alt", "article", "calendar_month", "change_history", "chat", "check", "check_circle", "chevron_left", "chevron_right", "circle", "close", "cloud_alert", "cloud_done", "code_blocks", "content_copy", "data_table", "delete", "description", "directions_boat", "distance", "domain", "download", "edit", "edit_document", "edit_location", "edit_location_alt", "edit_square", "error", "event", "explore", "explore_nearby", "export_notes", "favorite", "file_map", "file_save", "folder_open", "format_align_center", "format_align_left", "format_align_right", "forward", "globe_uk", "groups", "image", "inbox", "info", "info_i", "keyboard_arrow_down", "keyboard_arrow_up", "language", "layers", "lightbulb", "link", "location_chip", "lock", "login", "logout", "mail", "map", "map_pin_heart", "menu", "mode_cool", "more_vert", "move", "numbers", "open_in_new", "pan_zoom", "pending_actions", "person", "person_add", "person_pin", "person_pin_circle", "photo_camera", "picture_as_pdf", "pin_drop", "radio_button_checked", "radio_button_unchecked", "sailing", "save", "send", "settings", "settings_input_antenna", "severe_cold", "source_environment", "stylus", "text_snippet", "timeline", "upload", "video_library", "videocam", "view_list", "warning", "zoom_in_map", "zoom_out_map", "format_italic", "format_bold", "format_list_bulleted", "format_list_numbered", "format_align_justify", "undo", "redo", "visibility", "left_panel_close", "left_panel_open", "right_panel_close", "right_panel_open"];
+export declare const iconIdList: readonly ["add", "add_box", "add_location", "add_location_alt", "adjust", "anchor", "apps", "archive", "arrow_back", "arrow_forward", "arrow_right_alt", "article", "calendar_month", "change_history", "chat", "check", "check_circle", "chevron_left", "chevron_right", "circle", "close", "cloud_alert", "cloud_done", "code_blocks", "content_copy", "data_table", "delete", "description", "directions_boat", "distance", "domain", "download", "edit", "edit_document", "edit_location", "edit_location_alt", "edit_square", "error", "event", "explore", "explore_nearby", "export_notes", "favorite", "file_map", "file_save", "folder_open", "format_align_center", "format_align_left", "format_align_right", "forward", "globe_uk", "groups", "image", "inbox", "info", "info_i", "keep", "keep_off", "keyboard_arrow_down", "keyboard_arrow_up", "language", "layers", "lightbulb", "link", "location_chip", "lock", "login", "logout", "mail", "map", "map_pin_heart", "menu", "mode_cool", "more_vert", "move", "numbers", "open_in_new", "pan_zoom", "pending_actions", "person", "person_add", "person_pin", "person_pin_circle", "photo_camera", "picture_as_pdf", "pin_drop", "radio_button_checked", "radio_button_unchecked", "sailing", "save", "send", "settings", "settings_input_antenna", "severe_cold", "source_environment", "stylus", "text_snippet", "timeline", "upload", "video_library", "videocam", "view_list", "warning", "zoom_in_map", "zoom_out_map", "format_italic", "format_bold", "format_list_bulleted", "format_list_numbered", "format_align_justify", "undo", "redo", "visibility", "left_panel_close", "left_panel_open", "right_panel_close", "right_panel_open"];
 export type IconId = (typeof iconIdList)[number];

package/dist/src/components/kystverket/SideSheet/Buttons/ButtonsContext.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode, SetStateAction } from 'react';
+type SideSheetButtonsContextType = {
+    setButtons: React.Dispatch<SetStateAction<ReactNode>> | null;
+    buttons: ReactNode | null;
+};
+export declare const SideSheetButtonsContext: React.Context<SideSheetButtonsContextType>;
+export declare function SideSheetButtonsProvider({ children }: Readonly<{
+    children: ReactNode;
+}>): React.JSX.Element;
+export {};

package/dist/src/components/kystverket/SideSheet/Buttons/SideSheetButtons.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+/**
+ * Registers footer button content inside a `<SideSheet>`.
+ * If rendered outside a SideSheet it falls back to rendering children directly.
+ */
+export declare function SideSheetButtons({ children }: {
+    children: ReactNode;
+}): ReactNode;

package/dist/src/components/kystverket/SideSheet/Layout/SideSheetLayout.d.ts

@@ -0,0 +1,18 @@
+import type { SideSheetLayoutProps } from '~/components/kystverket/SideSheet/SideSheet.types';
+/** Internal context so SideSheet can warn when rendered outside a layout wrapper. */
+export declare const SideSheetLayoutContext: React.Context<boolean>;
+export declare function useSideSheetLayoutContext(): boolean;
+/**
+ * Required wrapper when using `pinnable` or `mode="push"`.
+ *
+ * Renders as a flex container so that a pinned SideSheet takes a fixed width
+ * and the remaining content fills the rest of the row.
+ *
+ * ```tsx
+ * <SideSheet.Layout>
+ *   <main>…page content…</main>
+ *   <SideSheet open={isOpen} onClose={() => setOpen(false)} pinnable title="Details" />
+ * </SideSheet.Layout>
+ * ```
+ */
+export declare function SideSheetLayout({ children, className, style }: SideSheetLayoutProps): React.JSX.Element;

package/dist/src/components/kystverket/SideSheet/SideSheet.d.ts

@@ -0,0 +1,12 @@
+import { SideSheetButtons } from './Buttons/SideSheetButtons';
+import { SideSheetLayout } from './Layout/SideSheetLayout';
+import type { SideSheetProps } from './SideSheet.types';
+export type { SideSheetProps };
+declare function SideSheetWithProvider(props: SideSheetProps & {
+    ref?: React.Ref<HTMLElement>;
+}): React.JSX.Element;
+type SideSheetComponent = typeof SideSheetWithProvider & {
+    Layout: typeof SideSheetLayout;
+    Buttons: typeof SideSheetButtons;
+};
+export declare const SideSheet: SideSheetComponent;

package/dist/src/components/kystverket/SideSheet/SideSheet.stories.d.ts

@@ -0,0 +1,34 @@
+import type { StoryFn } from '@storybook/react-vite';
+import { SideSheet } from '~/main';
+declare const _default: {
+    title: string;
+    component: ((props: import("~/main").SideSheetProps & {
+        ref?: React.Ref<HTMLElement>;
+    }) => React.JSX.Element) & {
+        Layout: typeof import("./Layout/SideSheetLayout").SideSheetLayout;
+        Buttons: typeof import("./Buttons/SideSheetButtons").SideSheetButtons;
+    };
+    tags: string[];
+    parameters: {
+        layout: string;
+        docs: {
+            source: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: StoryFn<typeof SideSheet>;
+export declare const OpenInNewWindow: StoryFn<typeof SideSheet>;
+export declare const WithBackButton: StoryFn<typeof SideSheet>;
+export declare const WithActionsScrollbarDividers: StoryFn<typeof SideSheet>;
+export declare const Pinnable: StoryFn<typeof SideSheet>;
+export declare const LeftPlacement: StoryFn<typeof SideSheet>;
+export declare const SmallSize: StoryFn<typeof SideSheet>;
+export declare const LargeSize: StoryFn<typeof SideSheet>;
+export declare const HalfWidth: StoryFn<typeof SideSheet>;
+export declare const PinnedWithContent: StoryFn<typeof SideSheet>;
+export declare const NoBackdrop: StoryFn<typeof SideSheet>;
+export declare const TwoSheets: StoryFn<typeof SideSheet>;
+export declare const WithTabs: StoryFn<typeof SideSheet>;

package/dist/src/components/kystverket/SideSheet/SideSheet.types.d.ts

@@ -0,0 +1,70 @@
+import { CSSProperties, ReactNode } from 'react';
+export type SideSheetSize = 'sm' | 'md' | 'lg' | '33%' | '50%' | '66%';
+export type SideSheetPlacement = 'left' | 'right';
+/**
+ * - `overlay`: sheet slides over content (default). Can be pinned by the user via `pinnable`.
+ * - `push`: sheet starts pinned and reflowing content inside `<SideSheet.Layout>`.
+ */
+export type SideSheetMode = 'overlay' | 'push';
+export type SideSheetHeadingSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface SideSheetProps {
+    open?: boolean;
+    onClose?: () => void;
+    placement?: SideSheetPlacement;
+    size?: SideSheetSize;
+    /**
+     * overlay: sheet floats over content (default).
+     * push: sheet starts pinned/expanded, reflowing content inside `<SideSheet.Layout>`.
+     */
+    mode?: SideSheetMode;
+    /**
+     * Show a pin button in the header that lets the user toggle overlay/push.
+     * Default: `false`.
+     */
+    pinnable?: boolean;
+    /**
+     * Controlled pinned state. When `true` the sheet expands as a flex child (push mode).
+     * When `false` it overlays content. Combine with `onPinnedChange` for controlled usage.
+     */
+    pinned?: boolean;
+    /** Called when the user toggles the pin button. */
+    onPinnedChange?: (pinned: boolean) => void;
+    /**
+     * Default pinned state for uncontrolled usage. Defaults to `true` when `mode='push'`,
+     * `false` otherwise.
+     */
+    defaultPinned?: boolean;
+    /**
+     * Show a dim backdrop and trap focus when in overlay mode.
+     * Default: `true` (only applies in overlay/non-pinned state).
+     */
+    backdrop?: boolean;
+    /** Sheet heading text. */
+    title?: ReactNode;
+    /** Font size of the heading. Default: `'xs'`. */
+    headingSize?: SideSheetHeadingSize;
+    /** Show the close (×) button. Default: `true`. */
+    showCloseButton?: boolean;
+    /** Show a back (←) button in the header. Default: `false`. */
+    showBackButton?: boolean;
+    /** Called when the back button is clicked. */
+    onBack?: () => void;
+    /**
+     * An optional extra element rendered in the header between the title and the
+     * pin/close buttons (e.g. an "open in new tab" button).
+     */
+    headerAction?: ReactNode;
+    /** Show a divider line below the header. Default: `true`. */
+    headerDivider?: boolean;
+    /** Show a divider line above the footer. Default: `true`. */
+    footerDivider?: boolean;
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    ref?: React.Ref<HTMLElement>;
+}
+export interface SideSheetLayoutProps {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}

package/dist/src/main.d.ts

@@ -48,6 +48,8 @@ export { FileUploaderContext, type FileUploaderContextProps, } from './component
 export type * from './components/kystverket/FileUploader/FileUploader.types';
 export type { DeriveFileInfosFromStorageIds } from './utils/fileInfoResolver';
 export { default as CardTitle, type CardTitleProps } from './components/designsystemet/CardTitle/CardTitle';
+export { default as ClickableCard } from './components/kystverket/ClickableCard/ClickableCard';
+export type { ClickableCardProps, ClickableCardColor, ClickableCardVariant, } from './components/kystverket/ClickableCard/ClickableCard.types';
 export { Button } from './components/designsystemet/Button/Button';
 export type { ButtonProps } from './components/designsystemet/Button/Button';
 export { TextInput } from './components/designsystemet/TextInput/TextInput';
@@ -72,6 +74,8 @@ export { Avatar } from './components/designsystemet/Avatar/Avatar';
 export type { AvatarProps } from './components/designsystemet/Avatar/Avatar';
 export { IdProvider, useIdProvider } from './utils/idContext';
 export { SlotDialog, type SlotDialogProps } from './components/kystverket/SlotDialog/SlotDialog';
+export { SideSheet, type SideSheetProps } from './components/kystverket/SideSheet/SideSheet';
+export type { SideSheetSize, SideSheetPlacement, SideSheetMode, SideSheetHeadingSize, SideSheetLayoutProps, } from './components/kystverket/SideSheet/SideSheet.types';
 export { Suggestion } from './components/designsystemet/Suggestion/Suggestion';
 export type { SuggestionProps } from './components/designsystemet/Suggestion/Suggestion';
 export { RovingFocusItem, RovingFocusRoot, omit, useCheckboxGroup, useDebounceCallback, useIsomorphicLayoutEffect, useMediaQuery, usePagination, useRadioGroup, useSynchronizedAnimation, } from '@digdir/designsystemet-react';