@digdir/designsystemet-react 0.63.0 → 1.0.0-next.14

package/dist/esm/utilities/{RovingTabIndex/RovingTabindexRoot.js → RovingFocus/RovingFocusRoot.js}

@@ -1,10 +1,10 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { createContext, forwardRef, useState, useRef } from 'react';
+import { createContext, forwardRef, useState, useRef, useEffect } from 'react';
 import { useMergeRefs } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
 import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
 
-const RovingTabindexContext = createContext({
+const RovingFocusContext = createContext({
     elements: { current: new Map() },
     getOrderedItems: () => [],
     setFocusableValue: () => {
@@ -15,7 +15,7 @@ const RovingTabindexContext = createContext({
     },
     focusableValue: null,
 });
-const RovingTabindexRoot = forwardRef(({ valueId, asChild, onBlur, onFocus, ...rest }, ref) => {
+const RovingFocusRoot = forwardRef(({ activeValue, asChild, onBlur, onFocus, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
     const [focusableValue, setFocusableValue] = useState(null);
     const [isShiftTabbing, setIsShiftTabbing] = useState(false);
@@ -30,7 +30,10 @@ const RovingTabindexRoot = forwardRef(({ valueId, asChild, onBlur, onFocus, ...r
             .sort((a, b) => elementsFromDOM.indexOf(a[1]) - elementsFromDOM.indexOf(b[1]))
             .map(([value, element]) => ({ value, element }));
     };
-    return (jsx(RovingTabindexContext.Provider, { value: {
+    useEffect(() => {
+        setFocusableValue(activeValue ?? null);
+    }, [activeValue]);
+    return (jsx(RovingFocusContext.Provider, { value: {
             elements,
             getOrderedItems,
             focusableValue,
@@ -41,6 +44,7 @@ const RovingTabindexRoot = forwardRef(({ valueId, asChild, onBlur, onFocus, ...r
         }, children: jsx(Component, { ...rest, tabIndex: isShiftTabbing ? -1 : 0, onBlur: (e) => {
                 onBlur?.(e);
                 setIsShiftTabbing(false);
+                setFocusableValue(activeValue ?? null);
             }, onFocus: (e) => {
                 onFocus?.(e);
                 if (e.target !== e.currentTarget)
@@ -51,8 +55,8 @@ const RovingTabindexRoot = forwardRef(({ valueId, asChild, onBlur, onFocus, ...r
                 if (focusableValue != null) {
                     elements.current.get(focusableValue)?.focus();
                 }
-                else if (valueId != null) {
-                    elements.current.get(valueId)?.focus();
+                else if (activeValue != null) {
+                    elements.current.get(activeValue)?.focus();
                 }
                 else {
                     orderedItems.at(0)?.element.focus();
@@ -60,4 +64,4 @@ const RovingTabindexRoot = forwardRef(({ valueId, asChild, onBlur, onFocus, ...r
             }, ref: refs }) }));
 });
 
-export { RovingTabindexContext, RovingTabindexRoot };
+export { RovingFocusContext, RovingFocusRoot };

package/dist/esm/utilities/{RovingTabIndex/useRovingTabindex.js → RovingFocus/useRovingFocus.js}

@@ -1,12 +1,12 @@
 'use client';
 import { useContext } from 'react';
-import { RovingTabindexContext } from './RovingTabindexRoot.js';
+import { RovingFocusContext } from './RovingFocusRoot.js';
 
 // Logic from: https://www.joshuawootonn.com/react-roving-tabindex
 // Inspired by: https://github.com/radix-ui/primitives/tree/main/packages/react/roving-focus/src
-/** Handles props for `RovingTabIndex` in context with `RovingTabIndexRoot` */
-const useRovingTabindex = (value) => {
-    const { elements, getOrderedItems, setFocusableValue, focusableValue, onShiftTab, } = useContext(RovingTabindexContext);
+/** Handles props for `RovingFocus` in context with `RovingFocusRoot` */
+const useRovingFocus = (value) => {
+    const { elements, getOrderedItems, setFocusableValue, focusableValue, onShiftTab, } = useContext(RovingFocusContext);
     return {
         getOrderedItems,
         isFocusable: focusableValue === value,
@@ -37,4 +37,4 @@ const useRovingTabindex = (value) => {
     };
 };
 
-export { useRovingTabindex };
+export { useRovingFocus };

package/dist/esm/utilities/{useDebounce.js → hooks/useDebounceCallback/useDebounceCallback.js}

@@ -1,7 +1,7 @@
 'use client';
 import { useRef, useEffect } from 'react';
 
-function useDebounce(callback, delay = 50) {
+function useDebounceCallback(callback, delay = 50) {
     const timeoutRef = useRef(null);
     useEffect(() => {
         // Cleanup the previous timeout on re-render
@@ -22,4 +22,4 @@ function useDebounce(callback, delay = 50) {
     return debouncedCallback;
 }
 
-export { useDebounce as default };
+export { useDebounceCallback };

package/dist/esm/{hooks → utilities/hooks/useIsomorphicLayoutEffect}/useIsomorphicLayoutEffect.js

@@ -1,6 +1,7 @@
 'use client';
 import { useLayoutEffect, useEffect } from 'react';
 
+// https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
 export { useIsomorphicLayoutEffect };

package/dist/esm/utilities/hooks/useMediaQuery/useMediaQuery.js

@@ -0,0 +1,47 @@
+'use client';
+import { useState } from 'react';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
+
+// from https://usehooks-ts.com/react-hook/use-media-query
+const IS_SERVER = typeof window === 'undefined';
+function useMediaQuery(query, { defaultValue = false, initializeWithValue = true, } = {}) {
+    const getMatches = (query) => {
+        if (IS_SERVER) {
+            return defaultValue;
+        }
+        return window.matchMedia(query).matches;
+    };
+    const [matches, setMatches] = useState(() => {
+        if (initializeWithValue) {
+            return getMatches(query);
+        }
+        return defaultValue;
+    });
+    // Handles the change event of the media query.
+    function handleChange() {
+        setMatches(getMatches(query));
+    }
+    useIsomorphicLayoutEffect(() => {
+        const matchMedia = window.matchMedia(query);
+        // Triggered at the first client-side load and if query changes
+        handleChange();
+        // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
+        if (matchMedia.addListener) {
+            matchMedia.addListener(handleChange);
+        }
+        else {
+            matchMedia.addEventListener('change', handleChange);
+        }
+        return () => {
+            if (matchMedia.removeListener) {
+                matchMedia.removeListener(handleChange);
+            }
+            else {
+                matchMedia.removeEventListener('change', handleChange);
+            }
+        };
+    }, [query]);
+    return matches;
+}
+
+export { useMediaQuery };

package/dist/esm/utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js

@@ -0,0 +1,44 @@
+'use client';
+import { useRef } from 'react';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
+
+// Inspired by Sam Selikoff
+// https://github.com/samselikoff/2022-02-24-use-synchronized-animation/blob/main/src/App.js
+/**
+ * Synchronizes the css animation of multiple elements with the same `animationName`.
+ *
+ * @example
+ * ```tsx
+ *  const ref = useSynchronizedAnimation<HTMLDivElement>('spin');
+ *
+ *  <div
+ *   ref={ref}
+ *  />
+ * ```
+ */
+function useSynchronizedAnimation(animationName) {
+    const ref = useRef(null);
+    useIsomorphicLayoutEffect(() => {
+        const animations = document
+            .getAnimations()
+            .filter((animation) => 'animationName' in animation &&
+            animation.animationName === animationName);
+        const firstOfType = animations.find((animation) => 'animationName' in animation &&
+            animation.animationName === animationName);
+        const myAnimation = animations.find((animation) => animation.effect?.target === ref.current);
+        if (myAnimation && myAnimation === firstOfType) {
+            myAnimation.currentTime = 0;
+        }
+        if (myAnimation && firstOfType && myAnimation !== firstOfType) {
+            myAnimation.currentTime = firstOfType.currentTime;
+        }
+        return () => {
+            if (myAnimation && firstOfType) {
+                myAnimation.currentTime = firstOfType.currentTime;
+            }
+        };
+    }, [animationName]);
+    return ref;
+}
+
+export { useSynchronizedAnimation };

package/dist/types/components/Accordion/AccordionContent.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'react';
+export type AccordionContentProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * Accordion content component, contains the content of the accordion item.
+ * @example
+ * <AccordionContent>Content</AccordionContent>
+ */
+export declare const AccordionContent: import("react").ForwardRefExoticComponent<AccordionContentProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=AccordionContent.d.ts.map

package/dist/types/components/Accordion/AccordionContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionContent.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/AccordionContent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAQ5C,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnE;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,kHAgC3B,CAAC"}

package/dist/types/components/Accordion/{AccordionHeader/AccordionHeader.d.ts → AccordionHeading.d.ts}

@@ -1,18 +1,29 @@
 import type { ReactNode, MouseEventHandler, HTMLAttributes } from 'react';
 export type AccordionHeaderProps = {
-    /** Heading level. Use this to make sure the heading is correct according to you page heading levels */
+    /**
+     * Heading level. Use this to make sure the heading is correct according to you page heading levels
+     * @default 1
+     */
     level?: 1 | 2 | 3 | 4 | 5 | 6;
     /** Handle when clicked on header */
     onHeaderClick?: MouseEventHandler<HTMLButtonElement> | undefined;
     /** Heading text */
     children: ReactNode;
 } & HTMLAttributes<HTMLHeadingElement>;
-export declare const AccordionHeader: import("react").ForwardRefExoticComponent<{
-    /** Heading level. Use this to make sure the heading is correct according to you page heading levels */
+/**
+ * Accordion header component, contains a button to toggle the content.
+ * @example
+ * <AccordionHeader>Header</AccordionHeader>
+ */
+export declare const AccordionHeading: import("react").ForwardRefExoticComponent<{
+    /**
+     * Heading level. Use this to make sure the heading is correct according to you page heading levels
+     * @default 1
+     */
     level?: 1 | 2 | 3 | 4 | 5 | 6 | undefined;
     /** Handle when clicked on header */
     onHeaderClick?: MouseEventHandler<HTMLButtonElement> | undefined;
     /** Heading text */
     children: ReactNode;
 } & HTMLAttributes<HTMLHeadingElement> & import("react").RefAttributes<HTMLHeadingElement>>;
-//# sourceMappingURL=AccordionHeader.d.ts.map
+//# sourceMappingURL=AccordionHeading.d.ts.map

package/dist/types/components/Accordion/AccordionHeading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionHeading.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/AccordionHeading.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAO1E,MAAM,MAAM,oBAAoB,GAAG;IACjC;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC9B,oCAAoC;IACpC,aAAa,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAC;IACjE,mBAAmB;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,cAAc,CAAC,kBAAkB,CAAC,CAAC;AAEvC;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;IAhB3B;;;OAGG;;IAEH,oCAAoC;oBACpB,kBAAkB,iBAAiB,CAAC,GAAG,SAAS;IAChE,mBAAmB;cACT,SAAS;2FAuDnB,CAAC"}

package/dist/types/components/Accordion/{AccordionItem/AccordionItem.d.ts → AccordionItem.d.ts}

@@ -4,29 +4,48 @@ export type AccordionItemProps = {
      * Controls open-state.
      *
      * Using this removes automatic control of open-state
+     *
+     * @default undefined
      */
     open?: boolean;
-    /**  Defaults the accordion to open if not controlled */
+    /**
+     * Defaults the accordion to open if not controlled
+     * @default false
+     */
     defaultOpen?: boolean;
     /** Content should be one `<Accordion.Header>` and `<Accordion.Content>` */
     children: ReactNode;
 } & HTMLAttributes<HTMLDivElement>;
-export type AccordionItemContextProps = {
+type AccordionItemContextProps = {
     open: boolean;
     toggleOpen: () => void;
     contentId: string;
 };
 export declare const AccordionItemContext: import("react").Context<AccordionItemContextProps | null>;
+/**
+ * Accordion item component, contains `Accordion.Header` and `Accordion.Content` components.
+ * @example
+ * <AccordionItem>
+ *  <AccordionHeader>Header</AccordionHeader>
+ *  <AccordionContent>Content</AccordionContent>
+ * </AccordionItem>
+ */
 export declare const AccordionItem: import("react").ForwardRefExoticComponent<{
     /**
      * Controls open-state.
      *
      * Using this removes automatic control of open-state
+     *
+     * @default undefined
      */
     open?: boolean | undefined;
-    /**  Defaults the accordion to open if not controlled */
+    /**
+     * Defaults the accordion to open if not controlled
+     * @default false
+     */
     defaultOpen?: boolean | undefined;
     /** Content should be one `<Accordion.Header>` and `<Accordion.Content>` */
     children: ReactNode;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export {};
 //# sourceMappingURL=AccordionItem.d.ts.map

package/dist/types/components/Accordion/AccordionItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/AccordionItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAGvD,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2EAA2E;IAC3E,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,oBAAoB,2DACsB,CAAC;AAExD;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa;IAlCxB;;;;;;OAMG;;IAEH;;;OAGG;;IAEH,2EAA2E;cACjE,SAAS;mFAmDpB,CAAC"}

package/dist/types/components/Accordion/AccordionRoot.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode, HTMLAttributes } from 'react';
+export type AccordionRootProps = {
+    /**
+     * Accordion background color
+     * @default neutral
+     */
+    color?: 'brand1' | 'brand2' | 'brand3' | 'neutral' | 'subtle';
+    /**
+     * Show border
+     * @default false
+     **/
+    border?: boolean;
+    /** Instances of `Accordion.Item` */
+    children: ReactNode;
+} & HTMLAttributes<HTMLDivElement>;
+/**
+ * Accordion root component, contains `Accordion.Item` components.
+ */
+export declare const AccordionRoot: import("react").ForwardRefExoticComponent<{
+    /**
+     * Accordion background color
+     * @default neutral
+     */
+    color?: "neutral" | "brand1" | "brand2" | "brand3" | "subtle" | undefined;
+    /**
+     * Show border
+     * @default false
+     **/
+    border?: boolean | undefined;
+    /** Instances of `Accordion.Item` */
+    children: ReactNode;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=AccordionRoot.d.ts.map

package/dist/types/components/Accordion/AccordionRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionRoot.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/AccordionRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAIvD,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC9D;;;QAGI;IACJ,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC;;GAEG;AACH,eAAO,MAAM,aAAa;IAjBxB;;;OAGG;;IAEH;;;QAGI;;IAEJ,oCAAoC;cAC1B,SAAS;mFAqBpB,CAAC"}

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

@@ -1,17 +1,28 @@
-import type { AccordionProps } from './Accordion';
+import type { AccordionRootProps } from './AccordionRoot';
 import type { AccordionItemProps } from './AccordionItem';
 import type { AccordionContentProps } from './AccordionContent';
-import type { AccordionHeaderProps } from './AccordionHeader';
-import { Accordion as AccordionParent } from './Accordion';
+import type { AccordionHeaderProps } from './AccordionHeading';
+import { AccordionRoot } from './AccordionRoot';
 import { AccordionItem } from './AccordionItem';
 import { AccordionContent } from './AccordionContent';
-import { AccordionHeader } from './AccordionHeader';
-type AccordionComponent = typeof AccordionParent & {
+import { AccordionHeading } from './AccordionHeading';
+type AccordionComponent = {
+    Root: typeof AccordionRoot;
     Item: typeof AccordionItem;
-    Header: typeof AccordionHeader;
+    Heading: typeof AccordionHeading;
     Content: typeof AccordionContent;
 };
+/**
+ * Accordions are used to toggle the visibility of content.
+ * @example
+ * <Accordion.Root>
+ *  <Accordion.Item>
+ *   <Accordion.Heading>Heading 1</Accordion.Heading>
+ *  <Accordion.Content>Content 1</Accordion.Content>
+ * </Accordion.Item>
+ * <Accordion.Item>
+ */
 declare const Accordion: AccordionComponent;
-export type { AccordionProps, AccordionContentProps, AccordionHeaderProps, AccordionItemProps, };
-export { Accordion, AccordionItem, AccordionContent, AccordionHeader };
+export type { AccordionRootProps, AccordionContentProps, AccordionHeaderProps, AccordionItemProps, };
+export { Accordion, AccordionRoot, AccordionItem, AccordionContent, AccordionHeading, };
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/Accordion/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,SAAS,IAAI,eAAe,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,KAAK,kBAAkB,GAAG,OAAO,eAAe,GAAG;IACjD,IAAI,EAAE,OAAO,aAAa,CAAC;IAC3B,MAAM,EAAE,OAAO,eAAe,CAAC;IAC/B,OAAO,EAAE,OAAO,gBAAgB,CAAC;CAClC,CAAC;AAEF,QAAA,MAAM,SAAS,oBAAwC,CAAC;AAUxD,YAAY,EACV,cAAc,EACd,qBAAqB,EACrB,oBAAoB,EACpB,kBAAkB,GACnB,CAAC;AACF,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,OAAO,aAAa,CAAC;IAC3B,IAAI,EAAE,OAAO,aAAa,CAAC;IAC3B,OAAO,EAAE,OAAO,gBAAgB,CAAC;IACjC,OAAO,EAAE,OAAO,gBAAgB,CAAC;CAClC,CAAC;AAEF;;;;;;;;;GASG;AACH,QAAA,MAAM,SAAS,oBAA2B,CAAC;AAY3C,YAAY,EACV,kBAAkB,EAClB,qBAAqB,EACrB,oBAAoB,EACpB,kBAAkB,GACnB,CAAC;AACF,OAAO,EACL,SAAS,EACT,aAAa,EACb,aAAa,EACb,gBAAgB,EAChB,gBAAgB,GACjB,CAAC"}

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

@@ -1,45 +1,51 @@
 import type { HTMLAttributes } from 'react';
 type Severity = 'info' | 'warning' | 'success' | 'danger';
-type OldAlertSizes = 'small' | 'medium' | 'large';
 export type AlertProps = {
-    /** Sets color & icon according to severity */
+    /**
+     * Sets color & icon according to severity
+     * @default info
+     */
     severity?: Severity;
-    /** Adds a shadow to elevate the component */
-    elevated?: boolean;
-    /** Sets `title` on the icon.
+    /**
+     * Sets `title` on the icon.
      *
      * Use this to inform screenreaders of severity.
-     *  Defaults to Norwegian. */
+     * Defaults to Norwegian.
+     */
     iconTitle?: string;
     /**
      * Sets the size of the alert.
      * Does not affect font size.
      *
      * @default md
-     *
-     * @note `small`, `medium`, `large` is deprecated
      */
-    size?: 'sm' | 'md' | 'lg' | OldAlertSizes;
+    size?: 'sm' | 'md' | 'lg';
 } & HTMLAttributes<HTMLDivElement>;
+/**
+ * Alerts are used to inform users about important information, warnings, errors, or success.
+ * @example
+ * <Alert severity='info'>Dette er en informasjonsmelding</Alert>
+ */
 export declare const Alert: import("react").ForwardRefExoticComponent<{
-    /** Sets color & icon according to severity */
+    /**
+     * Sets color & icon according to severity
+     * @default info
+     */
     severity?: Severity | undefined;
-    /** Adds a shadow to elevate the component */
-    elevated?: boolean | undefined;
-    /** Sets `title` on the icon.
+    /**
+     * Sets `title` on the icon.
      *
      * Use this to inform screenreaders of severity.
-     *  Defaults to Norwegian. */
+     * Defaults to Norwegian.
+     */
     iconTitle?: string | undefined;
     /**
      * Sets the size of the alert.
      * Does not affect font size.
      *
      * @default md
-     *
-     * @note `small`, `medium`, `large` is deprecated
      */
-    size?: "sm" | "md" | "lg" | OldAlertSizes | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 export {};
 //# sourceMappingURL=Alert.d.ts.map

package/dist/types/components/Alert/Alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AA6B5C,KAAK,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE1D,KAAK,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAElD,MAAM,MAAM,UAAU,GAAG;IACvB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;iCAG6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,aAAa,CAAC;CAC3C,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AACnC,eAAO,MAAM,KAAK;IAnBhB,8CAA8C;;IAE9C,6CAA6C;;IAE7C;;;iCAG6B;;IAE7B;;;;;;;OAOG;;mFAuCJ,CAAC"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AA4B5C,KAAK,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE1D,MAAM,MAAM,UAAU,GAAG;IACvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC;;;;GAIG;AACH,eAAO,MAAM,KAAK;IA1BhB;;;OAGG;;IAEH;;;;;OAKG;;IAEH;;;;;OAKG;;mFA2CJ,CAAC"}

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

@@ -1,12 +1,10 @@
 import type { HTMLAttributes } from 'react';
-type OldShadowSizes = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-type OldBorderRadii = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge' | 'xxxxlarge';
 export type BoxProps = {
     /**
      * Shadow size of the box
      * @default undefined
      */
-    shadow?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | OldShadowSizes;
+    shadow?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     /**
      * Border color of the box
      * @default undefined
@@ -16,7 +14,7 @@ export type BoxProps = {
      * Border radius of the box
      * @default undefined
      */
-    borderRadius?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'full' | OldBorderRadii;
+    borderRadius?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'full';
     /**
      * Background color of the box
      * @default 'default'
@@ -33,17 +31,17 @@ export declare const Box: import("react").ForwardRefExoticComponent<{
      * Shadow size of the box
      * @default undefined
      */
-    shadow?: "xs" | "sm" | "md" | "lg" | "xl" | OldShadowSizes | undefined;
+    shadow?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
     /**
      * Border color of the box
      * @default undefined
      */
-    borderColor?: "strong" | "default" | "subtle" | undefined;
+    borderColor?: "default" | "strong" | "subtle" | undefined;
     /**
      * Border radius of the box
      * @default undefined
      */
-    borderRadius?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | OldBorderRadii | "full" | undefined;
+    borderRadius?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full" | undefined;
     /**
      * Background color of the box
      * @default 'default'
@@ -55,5 +53,4 @@ export declare const Box: import("react").ForwardRefExoticComponent<{
      */
     asChild?: boolean | undefined;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-export {};
 //# sourceMappingURL=Box.d.ts.map

package/dist/types/components/Box/Box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAO5C,KAAK,cAAc,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AACzE,KAAK,cAAc,GACf,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,SAAS,GACT,UAAU,GACV,WAAW,CAAC;AAEhB,MAAM,MAAM,QAAQ,GAAG;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,cAAc,CAAC;IAC3D;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC9C;;;OAGG;IACH,YAAY,CAAC,EACT,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,MAAM,GACN,cAAc,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,eAAO,MAAM,GAAG;IApCd;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAWH;;;OAGG;;IAEH;;;OAGG;;mFAsCJ,CAAC"}
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,MAAM,MAAM,QAAQ,GAAG;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1C;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC9C;;;OAGG;IACH,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;IAC1E;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,eAAO,MAAM,GAAG;IA3Bd;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;mFAoCJ,CAAC"}

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

@@ -1,17 +1,23 @@
 import type { ButtonHTMLAttributes } from 'react';
-type OldButtonSizes = 'small' | 'medium' | 'large';
 export type ButtonProps = {
-    /** Specify which variant to use */
+    /**
+     * Specify which variant to use
+     * @default primary
+     */
     variant?: 'primary' | 'secondary' | 'tertiary';
-    /** Specify which color palette to use */
-    color?: 'first' | 'second' | 'success' | 'danger';
+    /** Specify which color palette to use
+     * @default accent
+     */
+    color?: 'accent' | 'neutral' | 'danger';
     /**
      * Size
-     * @default `md`
-     * @note `small`, `medium`, `large` is deprecated
+     * @default md
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * If `Button` should fill full width of its container
+     * @default false
      */
-    size?: 'sm' | 'md' | 'lg' | OldButtonSizes;
-    /** If `Button` should fill full width of its container */
     fullWidth?: boolean;
     /** Toggle icon only styling, pass icon as children
      * @default false
@@ -25,19 +31,28 @@ export type ButtonProps = {
 } & ButtonHTMLAttributes<HTMLButtonElement>;
 /**
  * Button used for interaction
+ * @example
+ * <Button>Click me</Button>
  */
 export declare const Button: import("react").ForwardRefExoticComponent<{
-    /** Specify which variant to use */
+    /**
+     * Specify which variant to use
+     * @default primary
+     */
     variant?: "primary" | "secondary" | "tertiary" | undefined;
-    /** Specify which color palette to use */
-    color?: "first" | "second" | "success" | "danger" | undefined;
+    /** Specify which color palette to use
+     * @default accent
+     */
+    color?: "accent" | "neutral" | "danger" | undefined;
     /**
      * Size
-     * @default `md`
-     * @note `small`, `medium`, `large` is deprecated
+     * @default md
+     */
+    size?: "sm" | "md" | "lg" | undefined;
+    /**
+     * If `Button` should fill full width of its container
+     * @default false
      */
-    size?: "sm" | "md" | "lg" | OldButtonSizes | undefined;
-    /** If `Button` should fill full width of its container */
     fullWidth?: boolean | undefined;
     /** Toggle icon only styling, pass icon as children
      * @default false
@@ -49,5 +64,4 @@ export declare const Button: import("react").ForwardRefExoticComponent<{
      */
     asChild?: boolean | undefined;
 } & ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
-export {};
 //# sourceMappingURL=Button.d.ts.map

package/dist/types/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAMlD,KAAK,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEnD,MAAM,MAAM,WAAW,GAAG;IACxB,mCAAmC;IACnC,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC/C,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;IAClD;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,cAAc,CAAC;IAC3C,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE5C;;GAEG;AACH,eAAO,MAAM,MAAM;IA1BjB,mCAAmC;;IAEnC,yCAAyC;;IAEzC;;;;OAIG;;IAEH,0DAA0D;;IAE1D;;OAEG;;IAEH;;;OAGG;;+FA6CJ,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAMlD,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC/C;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;IACxC;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE5C;;;;GAIG;AACH,eAAO,MAAM,MAAM;IAnCjB;;;OAGG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;OAEG;;IAEH;;;OAGG;;+FAqDJ,CAAC"}