@kystverket/styrbord 1.15.2 → 1.16.0

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

@@ -17,6 +17,10 @@ export type AvatarProps = MergeRight<DsAvatarProps, (AriaLabel | AriaHidden) & {
      * Tooltip text to display on hover.
      */
     tooltip?: string;
+    /**
+     * When true, overlays a checkmark on the avatar with a subtle dimming effect.
+     */
+    checked?: boolean;
 }>;
 export declare const Avatar: FC<AvatarProps>;
 export {};

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

@@ -13,4 +13,5 @@ export declare const ShapeVariants: Story;
 export declare const WithImage: Story;
 export declare const InDropdown: Story;
 export declare const WithTooltip: Story;
+export declare const Checked: Story;
 export declare const AsLink: Story;

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

@@ -43,14 +43,14 @@ export declare const Disabled: {
         disabled: boolean;
         id?: string | undefined | undefined;
         children?: React.ReactNode;
-        className?: string | undefined | undefined;
-        width?: number | string | undefined | undefined;
         form?: string | undefined | undefined;
-        color?: string | undefined | undefined;
         slot?: string | undefined | undefined;
         style?: React.CSSProperties | undefined;
         title?: string | undefined | undefined;
         pattern?: string | undefined | undefined;
+        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;
         defaultChecked?: boolean | undefined | undefined;
@@ -360,14 +360,14 @@ export declare const Disabled: {
         disabled: boolean;
         id?: string | undefined | undefined;
         children?: React.ReactNode;
-        className?: string | undefined | undefined;
-        width?: number | string | undefined | undefined;
         form?: string | undefined | undefined;
-        color?: string | undefined | undefined;
         slot?: string | undefined | undefined;
         style?: React.CSSProperties | undefined;
         title?: string | undefined | undefined;
         pattern?: string | undefined | undefined;
+        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;
         defaultChecked?: boolean | undefined | undefined;
@@ -677,14 +677,14 @@ export declare const Disabled: {
         disabled: boolean;
         id?: string | undefined | undefined;
         children?: React.ReactNode;
-        className?: string | undefined | undefined;
-        width?: number | string | undefined | undefined;
         form?: string | undefined | undefined;
-        color?: string | undefined | undefined;
         slot?: string | undefined | undefined;
         style?: React.CSSProperties | undefined;
         title?: string | undefined | undefined;
         pattern?: string | undefined | undefined;
+        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;
         defaultChecked?: boolean | undefined | undefined;

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

@@ -19,4 +19,4 @@ export interface TextAreaProps {
     size?: InputSize;
     id?: string;
 }
-export declare const TextArea: ({ size, className, label, required, optional, onChange, value, minHeight, ...props }: TextAreaProps) => React.JSX.Element;
+export declare const TextArea: ({ size, className, label, required, optional, onChange, value, maxLength, minHeight, error, ...props }: TextAreaProps) => React.JSX.Element;

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

@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/react-vite';
 import { TextAreaProps } from './TextArea';
 declare const meta: {
     title: string;
-    component: ({ size, className, label, required, optional, onChange, value, minHeight, ...props }: TextAreaProps) => React.JSX.Element;
+    component: ({ size, className, label, required, optional, onChange, value, maxLength, minHeight, error, ...props }: TextAreaProps) => React.JSX.Element;
     decorators: ((Story: import("storybook/internal/csf").PartialStoryFn, context: import("storybook/internal/csf").StoryContext) => React.JSX.Element)[];
     tags: string[];
     argTypes: {};

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

@@ -6,7 +6,7 @@ declare const meta: {
     component: (props: FileUploaderProps) => React.JSX.Element;
     decorators: (((Story: import("storybook/internal/csf").PartialStoryFn, context: import("storybook/internal/csf").StoryContext) => React.JSX.Element) | ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
         label: string;
-        description?: React.ReactNode | string[];
+        description?: string[] | React.ReactNode;
         error?: string | null | undefined;
         multiple?: boolean | undefined;
         files: FileInfo[];

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

@@ -3,7 +3,7 @@ import type { SideSheetLayoutProps } from '~/components/kystverket/SideSheet/Sid
 export declare const SideSheetLayoutContext: React.Context<boolean>;
 export declare function useSideSheetLayoutContext(): boolean;
 /**
- * Required wrapper when using `pinnable` or `mode="push"`.
+ * Required wrapper when using `pinnable` or `defaultPinned`.
  *
  * Renders as a flex container so that a pinned SideSheet takes a fixed width
  * and the remaining content fills the rest of the row.
@@ -15,4 +15,4 @@ export declare function useSideSheetLayoutContext(): boolean;
  * </SideSheet.Layout>
  * ```
  */
-export declare function SideSheetLayout({ children, className, style }: SideSheetLayoutProps): React.JSX.Element;
+export declare function SideSheetLayout({ children, className, style }: Readonly<SideSheetLayoutProps>): React.JSX.Element;

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

@@ -1,4 +1,5 @@
 import type { StoryFn } from '@storybook/react-vite';
+import { SideSheetButtons } from '~/components/kystverket/SideSheet/Buttons/SideSheetButtons';
 import { SideSheet } from '~/main';
 declare const _default: {
     title: string;
@@ -6,7 +7,7 @@ declare const _default: {
         ref?: React.Ref<HTMLElement>;
     }) => React.JSX.Element) & {
         Layout: typeof import("./Layout/SideSheetLayout").SideSheetLayout;
-        Buttons: typeof import("./Buttons/SideSheetButtons").SideSheetButtons;
+        Buttons: typeof SideSheetButtons;
     };
     tags: string[];
     parameters: {
@@ -15,8 +16,33 @@ declare const _default: {
             source: {
                 type: string;
             };
+            description: {
+                component: string;
+            };
         };
     };
+    decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        open?: boolean | undefined;
+        onClose?: (() => void) | undefined;
+        placement?: import("~/main").SideSheetPlacement | undefined;
+        size?: import("~/main").SideSheetSize | undefined;
+        pinnable?: boolean | undefined;
+        pinned?: boolean | undefined;
+        onPinnedChange?: ((pinned: boolean) => void) | undefined;
+        defaultPinned?: boolean | undefined;
+        backdrop?: boolean | undefined;
+        title?: React.ReactNode;
+        showCloseButton?: boolean | undefined;
+        showBackButton?: boolean | undefined;
+        onBack?: (() => void) | undefined;
+        headerAction?: React.ReactNode;
+        headerDivider?: boolean | undefined;
+        footerDivider?: boolean | undefined;
+        children?: React.ReactNode;
+        className?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        ref?: React.Ref<HTMLElement> | undefined;
+    }>) => React.JSX.Element)[];
 };
 export default _default;
 export declare const Default: StoryFn<typeof SideSheet>;
@@ -32,3 +58,4 @@ 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>;
+export declare const WithTopbarAndFooter: StoryFn<typeof SideSheet>;

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

@@ -1,22 +1,11 @@
 import { CSSProperties, ReactNode } from 'react';
 export type SideSheetSize = 'sm' | 'md' | 'lg' | '33%' | '40%' | '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`.
@@ -30,8 +19,9 @@ export interface SideSheetProps {
     /** 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.
+     * Default pinned state for uncontrolled usage. `true` starts the sheet pinned/expanded,
+     * reflowing content inside `<SideSheet.Layout>` (push mode). Default: `false` (overlay).
+     * BEWARE: On phone it always starts unpinned regardless of this.
      */
     defaultPinned?: boolean;
     /**
@@ -39,10 +29,11 @@ export interface SideSheetProps {
      * Default: `true` (only applies in overlay/non-pinned state).
      */
     backdrop?: boolean;
-    /** Sheet heading text. */
+    /**
+     * Sheet heading. pass a string, or your own `<Heading>` (e.g.
+     * `<Heading data-size="xs">Title</Heading>`) to control its size and level.
+     */
     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`. */

package/dist/src/hooks/useBodyScrollLock.d.ts

@@ -0,0 +1 @@
+export declare function useBodyScrollLock(locked: boolean): void;

package/dist/src/main.d.ts

@@ -3,6 +3,9 @@ import '@material-symbols/font-400/outlined.css';
 export type { SupportedLanguage, ScreenSize } from './utils/types';
 export { AIS_SHIP_TYPES, getShipTypeByAisCode, getShipTypeById } from './data/ais/shipTypes';
 export type { AisShipType, AisShipTypeEntry, AisShipTypeId, AisCode } from './data/ais/shipTypes';
+export { useMediaQuery, TABLET_SIZE_BREAKPOINT, PHONE_SIZE_BREAKPOINT } from './utils/useMediaQuery';
+export { convertBytesToReadable } from './utils/convertBytesToReadable';
+export { IdProvider, useIdProvider } from './utils/idContext';
 export { default as DeprecatedErrorLabel, type ErrorLabelProps as DeprecatedErrorLabelProps, } from './components/deprecated/ErrorLabel/errorLabel';
 export { default as DeprecatedInputLabel, type InputLabelProps as DeprecatedInputLabelProps, } from './components/deprecated/InputLabel/inputLabel';
 export { Details as DeprecatedDetails, type DetailsProps as DeprecatedDetailsProps, } from './components/deprecated/Details/Details';
@@ -83,15 +86,14 @@ export { Avatar } from './components/designsystemet/Avatar/Avatar';
 export type { AvatarProps } from './components/designsystemet/Avatar/Avatar';
 export { AvatarStack } from './components/designsystemet/AvatarStack/AvatarStack';
 export type { AvatarStackProps } from './components/designsystemet/AvatarStack/AvatarStack';
-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 type { SideSheetSize, SideSheetPlacement, SideSheetLayoutProps, } from './components/kystverket/SideSheet/SideSheet.types';
 export { Suggestion } from './components/designsystemet/Suggestion/Suggestion';
 export type { SuggestionProps } from './components/designsystemet/Suggestion/Suggestion';
 export type { ChipButtonProps, ChipCheckboxProps, ChipRadioProps, ChipRemovableProps, } from './components/designsystemet/Chip';
 export { Chip, ChipButton, ChipCheckbox, ChipRadio, ChipRemovable } from './components/designsystemet/Chip';
-export { RovingFocusItem, RovingFocusRoot, omit, useCheckboxGroup, useDebounceCallback, useIsomorphicLayoutEffect, useMediaQuery, usePagination, useRadioGroup, useSynchronizedAnimation, } from '@digdir/designsystemet-react';
+export { RovingFocusItem, RovingFocusRoot, omit, useCheckboxGroup, useDebounceCallback, useIsomorphicLayoutEffect, usePagination, useRadioGroup, useSynchronizedAnimation, } from '@digdir/designsystemet-react';
 export type { Size, UseRadioGroupProps, UseCheckboxGroupProps, UsePaginationProps, MergeRight, LabelRequired, } from '@digdir/designsystemet-react';
 export type { BadgePositionProps, BadgeProps } from '@digdir/designsystemet-react';
 export { Badge, BadgePosition } from '@digdir/designsystemet-react';

package/dist/src/utils/idContext.d.ts

@@ -1,7 +1,7 @@
-export declare function IdProvider({ id, children }: {
+export declare function IdProvider({ id, children }: Readonly<{
     id: string;
     children: React.ReactNode;
-}): React.JSX.Element;
+}>): React.JSX.Element;
 export declare const useIdProvider: () => {
     getId: (...segments: unknown[]) => string;
 };

package/dist/src/utils/useMediaQuery.d.ts

@@ -0,0 +1,14 @@
+/** Replaces Designsystemets useMediaQuery as it's deprecated https://designsystemet.no/en/components/changelog#117 */
+/** Below this, treat the viewport as phone-sized (40rem = 640px at the default 16px root font size). */
+export declare const PHONE_SIZE_BREAKPOINT = "40rem";
+/** Below this, treat the viewport as tablet-sized (48rem = 768px at the default 16px root font size). */
+export declare const TABLET_SIZE_BREAKPOINT = "48rem";
+/**
+ * Lytter på en CSS media query og returnerer om den matcher.
+ * Bruker useSyncExternalStore slik at React holder seg synkronisert med
+ * nettleserens matchMedia uten ekstra rendering.
+ *
+ * @example
+ * const isWide = useMediaQuery('(min-width: 1200px)');
+ */
+export declare function useMediaQuery(query: string): boolean;