@digdir/designsystemet-react 1.0.0-next.48 → 1.0.0-next.49

package/dist/esm/components/Dialog/DialogTriggerContext.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useRef, createContext } from 'react';
+
+const Context = createContext({
+    current: null,
+});
+/**
+ * DialogTriggerContext component, used to provide a context for a dialog trigger.
+ *
+ * @example
+ * <Dialog.TriggerContext>
+ *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *   <Dialog>
+ *     Content
+ *   </Dialog>
+ * </Dialog.TriggerContext>
+ */
+const DialogTriggerContext = ({ children, }) => {
+    const contextRef = useRef(null);
+    return jsx(Context.Provider, { value: contextRef, children: children });
+};
+DialogTriggerContext.displayName = 'DialogTriggerContext';
+
+export { Context, DialogTriggerContext };

package/dist/esm/components/Dialog/index.js

@@ -0,0 +1,29 @@
+'use client';
+import { Dialog as Dialog$1 } from './Dialog.js';
+import { DialogBlock } from './DialogBlock.js';
+import { DialogTrigger } from './DialogTrigger.js';
+import { DialogTriggerContext } from './DialogTriggerContext.js';
+
+/**
+ * Dialog component, used to display a Dialog dialog.
+ *
+ * @example
+ * <Dialog.TriggerContext>
+ *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *   <Dialog>
+ *     <Dialog.Block>
+ *       Content
+ *     </Dialog.Block>
+ *   </Dialog>
+ * </Dialog.TriggerContext>
+ */
+const Dialog = Object.assign(Dialog$1, {
+    Block: DialogBlock,
+    TriggerContext: DialogTriggerContext,
+    Trigger: DialogTrigger,
+});
+Dialog.Block.displayName = 'Dialog.Block';
+Dialog.TriggerContext.displayName = 'Dialog.TriggerContext';
+Dialog.Trigger.displayName = 'Dialog.Trigger';
+
+export { Dialog, DialogBlock, DialogTrigger, DialogTriggerContext };

package/dist/esm/components/ErrorSummary/ErrorSummary.js

@@ -2,7 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
-import { createContext, forwardRef, useId, useState } from 'react';
+import { forwardRef, createContext, useId, useState } from 'react';
 
 const ErrorSummaryContext = createContext({
     headingId: 'heading',

package/dist/esm/components/Field/index.js

@@ -1,6 +1,6 @@
 'use client';
 import { Field as Field$1 } from './Field.js';
-import { FieldAffixes, FieldAffix } from './FieldAffix.js';
+import { FieldAffix, FieldAffixes } from './FieldAffix.js';
 import { FieldCounter } from './FieldCounter.js';
 import { FieldDescription } from './FieldDescription.js';
 

package/dist/esm/components/List/index.js

@@ -1,6 +1,6 @@
 'use client';
 import { ListItem } from './ListItem.js';
-import { ListOrdered, ListUnordered } from './Lists.js';
+import { ListUnordered, ListOrdered } from './Lists.js';
 
 const List = {
     Item: ListItem,

package/dist/esm/components/Popover/Popover.js

@@ -24,7 +24,7 @@ import { Context } from './PopoverTriggerContext.js';
  *   Content
  * </Popover>
  */
-const Popover = forwardRef(function Popover({ id, className, onClose, onOpen, open, placement = 'top', autoPlacement = true, asChild = false, ...rest }, ref) {
+const Popover = forwardRef(function Popover({ id, className, onClose, onOpen, open, 'data-variant': variant = 'default', placement = 'top', autoPlacement = true, asChild = false, ...rest }, ref) {
     const Component = asChild ? Slot : 'div';
     const popoverRef = useRef(null);
     const mergedRefs = useMergeRefs([popoverRef, ref]);
@@ -95,7 +95,7 @@ const Popover = forwardRef(function Popover({ id, className, onClose, onOpen, op
     }, [id]);
     return (jsx(Component, { className: cl('ds-popover', className), id: id || popoverId, 
         // @ts-ignore @types/react-dom does not understand popover yet
-        popover: 'manual', ref: mergedRefs, ...rest }));
+        popover: 'manual', "data-variant": variant, ref: mergedRefs, ...rest }));
 });
 const arrowPseudoElement = {
     name: 'ArrowPseudoElement',

package/dist/esm/components/Suggestion/Suggestion.js

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { getDatalistValue, syncDatalistState } from '@u-elements/u-datalist';
 import cl from 'clsx/lite';
-import { createContext, forwardRef, useState, useId, useRef, useCallback } from 'react';
+import { forwardRef, createContext, useState, useId, useRef, useCallback } from 'react';
 
 const SuggestionContext = createContext({});
 /**

package/dist/esm/components/Tabs/Tabs.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
-import { createContext, forwardRef, useState } from 'react';
+import { forwardRef, createContext, useState } from 'react';
 
 const Context = createContext({});
 /**

package/dist/esm/components/ToggleGroup/ToggleGroup.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
-import { createContext, forwardRef, useId, useState } from 'react';
+import { forwardRef, useId, useState, createContext } from 'react';
 import { RovingFocusRoot } from '../../utilities/RovingFocus/RovingFocusRoot.js';
 
 const ToggleGroupContext = createContext({});

package/dist/esm/index.js

@@ -27,7 +27,6 @@ export { Alert } from './components/Alert/Alert.js';
 export { Tag } from './components/Tag/Tag.js';
 export { Chip } from './components/Chip/index.js';
 export { ChipButton, ChipCheckbox, ChipRadio, ChipRemovable } from './components/Chip/Chips.js';
-export { usePagination } from './components/Pagination/usePagination.js';
 export { Pagination } from './components/Pagination/index.js';
 export { PaginationList } from './components/Pagination/PaginationList.js';
 export { PaginationItem } from './components/Pagination/PaginationItem.js';
@@ -57,10 +56,10 @@ export { Popover } from './components/Popover/index.js';
 export { PopoverTriggerContext } from './components/Popover/PopoverTriggerContext.js';
 export { PopoverTrigger } from './components/Popover/PopoverTrigger.js';
 export { Divider } from './components/Divider/Divider.js';
-export { Modal } from './components/Modal/index.js';
-export { ModalBlock } from './components/Modal/ModalBlock.js';
-export { ModalTriggerContext } from './components/Modal/ModalTriggerContext.js';
-export { ModalTrigger } from './components/Modal/ModalTrigger.js';
+export { Dialog } from './components/Dialog/index.js';
+export { DialogBlock } from './components/Dialog/DialogBlock.js';
+export { DialogTriggerContext } from './components/Dialog/DialogTriggerContext.js';
+export { DialogTrigger } from './components/Dialog/DialogTrigger.js';
 export { Dropdown } from './components/Dropdown/index.js';
 export { DropdownTriggerContext } from './components/Dropdown/DropdownTriggerContext.js';
 export { DropdownList } from './components/Dropdown/DropdownList.js';
@@ -102,6 +101,7 @@ export { useIsomorphicLayoutEffect } from './utilities/hooks/useIsomorphicLayout
 export { useMediaQuery } from './utilities/hooks/useMediaQuery/useMediaQuery.js';
 export { useRadioGroup } from './utilities/hooks/useRadioGroup/useRadioGroup.js';
 export { useSynchronizedAnimation } from './utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js';
+export { usePagination } from './utilities/hooks/usePagination/usePagination.js';
 export { RovingFocusRoot } from './utilities/RovingFocus/RovingFocusRoot.js';
 export { useRovingFocus } from './utilities/RovingFocus/useRovingFocus.js';
 export { RovingFocusItem, getNextFocusableValue, getPrevFocusableValue } from './utilities/RovingFocus/RovingFocusItem.js';

package/dist/esm/utilities/RovingFocus/RovingFocusRoot.js

@@ -2,7 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { useMergeRefs } from '@floating-ui/react';
 import { Slot } from '@radix-ui/react-slot';
-import { createContext, forwardRef, useState, useRef, useEffect } from 'react';
+import { forwardRef, useState, useRef, useEffect, createContext } from 'react';
 
 const RovingFocusContext = createContext({
     elements: { current: new Map() },

package/dist/esm/{components/Pagination → utilities/hooks/usePagination}/usePagination.js

@@ -41,7 +41,7 @@ const getSteps = (now, max, show) => {
  *   </Pagination.Item>
  * </Pagination>
  **/
-const usePagination = ({ currentPage = 1, setCurrentPage, onChange, totalPages, showPages = 7, }) => useMemo(() => {
+const usePagination = ({ currentPage = 1, setCurrentPage, onChange, totalPages = 1, showPages = 7, }) => useMemo(() => {
     const hasNext = currentPage < totalPages;
     const hasPrev = currentPage !== 1;
     const handleClick = (page) => (event) => {
@@ -54,8 +54,17 @@ const usePagination = ({ currentPage = 1, setCurrentPage, onChange, totalPages,
     return {
         /** Number of steps */
         pages: getSteps(currentPage, totalPages, showPages).map((page, index) => ({
+            /**
+             * Page number or "ellipsis" for the ellipsis item
+             */
             page: page || 'ellipsis',
+            /**
+             * Unique key for the item
+             */
             itemKey: page ? `page-${page}` : `ellipsis-${index}`, // React key utility
+            /**
+             * Properties to spread on Pagination.Button
+             */
             buttonProps: (page
                 ? {
                     'aria-current': page === currentPage ? 'page' : undefined,

package/dist/types/colors.d.ts

@@ -1,3 +1,7 @@
+declare const emptyObjectSymbol: unique symbol;
+type EmptyObject = {
+    [emptyObjectSymbol]?: never;
+};
 /**
  * Base interface for available colors in the design system.
  * The CLI will generate augmentations of this interface to allow
@@ -5,7 +9,13 @@
  */
 export interface MainAndSupportColors {
 }
+/**
+ * If {@link MainAndSupportColors} has been extended to include color names, return T,
+ * otherwise return the arbitrary string type.
+ */
+type ColorWithFallback<T> = MainAndSupportColors extends EmptyObject ? string & {} : T;
 export type SeverityColors = 'info' | 'success' | 'warning' | 'danger';
-export type CustomColors = 'neutral' | keyof MainAndSupportColors;
-export type Color = CustomColors | SeverityColors;
+export type CustomColors = ColorWithFallback<'neutral' | keyof MainAndSupportColors>;
+export type Color = CustomColors | ColorWithFallback<SeverityColors>;
+export {};
 //# sourceMappingURL=colors.d.ts.map

package/dist/types/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,MAAM,WAAW,oBAAoB;CAAG;AAExC,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEvE,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,oBAAoB,CAAC;AAElE,MAAM,MAAM,KAAK,GAAG,YAAY,GAAG,cAAc,CAAC"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":"AACA,OAAO,CAAC,MAAM,iBAAiB,EAAE,OAAO,MAAM,CAAC;AAC/C,KAAK,WAAW,GAAG;IAAE,CAAC,iBAAiB,CAAC,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAEnD;;;;GAIG;AAGH,MAAM,WAAW,oBAAoB;CAAG;AAExC;;;GAGG;AACH,KAAK,iBAAiB,CAAC,CAAC,IAAI,oBAAoB,SAAS,WAAW,GAChE,MAAM,GAAG,EAAE,GACX,CAAC,CAAC;AAEN,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEvE,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAC1C,SAAS,GAAG,MAAM,oBAAoB,CACvC,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,YAAY,GAAG,iBAAiB,CAAC,cAAc,CAAC,CAAC"}

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

@@ -10,6 +10,12 @@ export type BadgeProps = MergeRight<DefaultProps & HTMLAttributes<HTMLSpanElemen
      * The maximum number to display in the badge, when the count exceeds this number, the badge will display `{max}+`
      */
     maxCount?: number;
+    /**
+     * Change the background color of the badge.
+     *
+     * @default 'base'
+     */
+    'data-variant'?: 'base' | 'tinted';
     children?: never;
 }>;
 /**
@@ -23,7 +29,7 @@ export type BadgeProps = MergeRight<DefaultProps & HTMLAttributes<HTMLSpanElemen
  *   <Icon />
  * </Badge>
  */
-export declare const Badge: React.ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLSpanElement>, "children" | "count" | "maxCount"> & {
+export declare const Badge: React.ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLSpanElement>, "children" | "data-variant" | "count" | "maxCount"> & {
     /**
      * The number to display in the badge
      */
@@ -32,6 +38,12 @@ export declare const Badge: React.ForwardRefExoticComponent<Omit<DefaultProps &
      * The maximum number to display in the badge, when the count exceeds this number, the badge will display `{max}+`
      */
     maxCount?: number;
+    /**
+     * Change the background color of the badge.
+     *
+     * @default 'base'
+     */
+    'data-variant'?: "base" | "tinted";
     children?: never;
 } & React.RefAttributes<HTMLSpanElement>>;
 //# sourceMappingURL=Badge.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAc,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,UAAU,GAAG,UAAU,CACjC,YAAY,GAAG,cAAc,CAAC,eAAe,CAAC,EAC9C;IACE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,CACF,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,KAAK;IAvBd;;OAEG;YACK,MAAM;IACd;;OAEG;eACQ,MAAM;eACN,KAAK;yCA6BlB,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAc,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,UAAU,GAAG,UAAU,CACjC,YAAY,GAAG,cAAc,CAAC,eAAe,CAAC,EAC9C;IACE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,CACF,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,KAAK;IA7Bd;;OAEG;YACK,MAAM;IACd;;OAEG;eACQ,MAAM;IACjB;;;;OAIG;qBACc,MAAM,GAAG,QAAQ;eACvB,KAAK;yCA8BlB,CAAC"}

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

@@ -5,9 +5,10 @@ import { BadgePosition } from './BadgePosition';
  * @example without children
  * <Badge count={5} maxCount={10} />
  */
-declare const Badge: React.ForwardRefExoticComponent<Omit<import("../../types").DefaultProps & React.HTMLAttributes<HTMLSpanElement>, "children" | "count" | "maxCount"> & {
+declare const Badge: React.ForwardRefExoticComponent<Omit<import("../../types").DefaultProps & React.HTMLAttributes<HTMLSpanElement>, "children" | "data-variant" | "count" | "maxCount"> & {
     count?: number;
     maxCount?: number;
+    'data-variant'?: "base" | "tinted";
     children?: never;
 } & React.RefAttributes<HTMLSpanElement>> & {
     Position: React.ForwardRefExoticComponent<Omit<import("../../types").DefaultProps & React.HTMLAttributes<HTMLSpanElement>, "placement" | "overlap"> & {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD;;;;;GAKG;AACH,QAAA,MAAM,KAAK;;;;;;;;;CAAuD,CAAC;AAInE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD;;;;;GAKG;AACH,QAAA,MAAM,KAAK;;;;;;;;;;CAAuD,CAAC;AAInE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}

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

@@ -1,4 +1,4 @@
-import type { ButtonHTMLAttributes } from 'react';
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
 import type { DefaultProps } from '../../types';
 import type { MergeRight } from '../../utilities';
 export type ButtonProps = MergeRight<DefaultProps & ButtonHTMLAttributes<HTMLButtonElement>, {
@@ -13,10 +13,12 @@ export type ButtonProps = MergeRight<DefaultProps & ButtonHTMLAttributes<HTMLBut
      */
     icon?: boolean;
     /**
-     * Toggle loading state
+     * Toggle loading state.
+     * Pass an element if you want to display a custom loader.
+     *
      * @default false
      */
-    loading?: boolean;
+    loading?: boolean | ReactNode;
     /**
      * Change the default rendered element for the one passed as a child, merging their props and behavior.
      * @default false
@@ -34,7 +36,7 @@ export type ButtonProps = MergeRight<DefaultProps & ButtonHTMLAttributes<HTMLBut
  * @example
  * <Button>Click me</Button>
  */
-export declare const Button: React.ForwardRefExoticComponent<Omit<DefaultProps & ButtonHTMLAttributes<HTMLButtonElement>, "type" | "asChild" | "variant" | "icon" | "loading"> & {
+export declare const Button: React.ForwardRefExoticComponent<Omit<DefaultProps & ButtonHTMLAttributes<HTMLButtonElement>, "type" | "variant" | "icon" | "loading" | "asChild"> & {
     /**
      * Specify which variant to use
      * @default 'primary'
@@ -46,10 +48,12 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<DefaultProps &
      */
     icon?: boolean;
     /**
-     * Toggle loading state
+     * Toggle loading state.
+     * Pass an element if you want to display a custom loader.
+     *
      * @default false
      */
-    loading?: boolean;
+    loading?: boolean | ReactNode;
     /**
      * Change the default rendered element for the one passed as a child, merging their props and behavior.
      * @default false

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":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,MAAM,WAAW,GAAG,UAAU,CAClC,YAAY,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,EACtD;IACE;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC/C;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;CACxD,CACF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,MAAM;IAlCf;;;OAGG;cACO,SAAS,GAAG,WAAW,GAAG,UAAU;IAC9C;;;OAGG;WACI,OAAO;IACd;;;OAGG;cACO,OAAO;IACjB;;;OAGG;cACO,OAAO;IACjB;;;OAGG;WACI,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC;2CA+CzD,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,MAAM,WAAW,GAAG,UAAU,CAClC,YAAY,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,EACtD;IACE;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC/C;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;CACxD,CACF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,MAAM;IApCf;;;OAGG;cACO,SAAS,GAAG,WAAW,GAAG,UAAU;IAC9C;;;OAGG;WACI,OAAO;IACd;;;;;OAKG;cACO,OAAO,GAAG,SAAS;IAC7B;;;OAGG;cACO,OAAO;IACjB;;;OAGG;WACI,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC;2CA+CzD,CAAC"}

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

@@ -3,10 +3,11 @@ import type { DefaultProps } from '../../types';
 import type { MergeRight } from '../../utilities';
 export type CardProps = MergeRight<DefaultProps & HTMLAttributes<HTMLDivElement>, {
     /**
-     * Changes background & border color.
-     * @default neutral
+     * Change the background color of the card.
+     *
+     * @default 'default'
      */
-    'data-color'?: 'subtle' | DefaultProps['data-color'];
+    'data-variant'?: 'default' | 'tinted';
     /**
      * Change the default rendered element for the one passed as a child, merging their props and behavior.
      * @default false
@@ -25,12 +26,13 @@ export type CardProps = MergeRight<DefaultProps & HTMLAttributes<HTMLDivElement>
  *  <Card.Block>Footer</Card.Block>
  * </Card>
  */
-export declare const Card: React.ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDivElement>, "data-color" | "children" | "asChild"> & {
+export declare const Card: React.ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDivElement>, "children" | "asChild" | "data-variant"> & {
     /**
-     * Changes background & border color.
-     * @default neutral
+     * Change the background color of the card.
+     *
+     * @default 'default'
      */
-    'data-color'?: "subtle" | DefaultProps["data-color"];
+    'data-variant'?: "default" | "tinted";
     /**
      * Change the default rendered element for the one passed as a child, merging their props and behavior.
      * @default false

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

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,SAAS,GAAG,UAAU,CAChC,YAAY,GAAG,cAAc,CAAC,cAAc,CAAC,EAC7C;IACE;;;OAGG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAC,YAAY,CAAC,CAAC;IACrD;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gEAAgE;IAChE,QAAQ,EAAE,SAAS,CAAC;CACrB,CACF,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,IAAI;IAzBb;;;OAGG;mBACY,QAAQ,GAAG,YAAY,CAAC,YAAY,CAAC;IACpD;;;OAGG;cACO,OAAO;IACjB,gEAAgE;cACtD,SAAS;wCAgDrB,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,SAAS,GAAG,UAAU,CAChC,YAAY,GAAG,cAAc,CAAC,cAAc,CAAC,EAC7C;IACE;;;;OAIG;IACH,cAAc,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gEAAgE;IAChE,QAAQ,EAAE,SAAS,CAAC;CACrB,CACF,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,IAAI;IA1Bb;;;;OAIG;qBACc,SAAS,GAAG,QAAQ;IACrC;;;OAGG;cACO,OAAO;IACjB,gEAAgE;cACtD,SAAS;wCAgDrB,CAAC"}

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

@@ -9,8 +9,8 @@ import { CardBlock } from './CardBlock';
  *  <Card.Block>Footer</Card.Block>
  * </Card>
  */
-declare const Card: React.ForwardRefExoticComponent<Omit<import("../../types").DefaultProps & React.HTMLAttributes<HTMLDivElement>, "data-color" | "children" | "asChild"> & {
-    'data-color'?: "subtle" | import("../../types").DefaultProps["data-color"];
+declare const Card: React.ForwardRefExoticComponent<Omit<import("../../types").DefaultProps & React.HTMLAttributes<HTMLDivElement>, "children" | "asChild" | "data-variant"> & {
+    'data-variant'?: "default" | "tinted";
     asChild?: boolean;
     children: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>> & {

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

@@ -1,14 +1,14 @@
 import type { HTMLAttributes, ReactNode } from 'react';
 import '@u-elements/u-details';
-import type { Color } from '../../colors';
 import type { DefaultProps } from '../../types';
 import type { MergeRight } from '../../utilities';
 export type DetailsProps = MergeRight<DefaultProps & HTMLAttributes<HTMLDetailsElement>, {
     /**
-     * Specify which color palette to use.
-     * If left unspecified, the color is inherited from the nearest ancestor with data-color.
+     * Change the background color of the details.
+     *
+     * @default 'default'
      */
-    'data-color'?: 'subtle' | Color;
+    'data-variant'?: 'default' | 'tinted';
     /**
      * Controls open-state.
      *

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

@@ -1 +1 @@
-{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,YAAY,GAAG,UAAU,CACnC,YAAY,GAAG,cAAc,CAAC,kBAAkB,CAAC,EACjD;IACE;;;OAGG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IAChC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CACF,GACC,CACI;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CAAE,GACnD;IAAE,IAAI,CAAC,EAAE,KAAK,CAAC;IAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CAAE,CACtD,CAAC;AAEJ;;;;;;;;GAQG;AACH,eAAO,MAAM,OAAO,yFAmCnB,CAAC"}
+{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,YAAY,GAAG,UAAU,CACnC,YAAY,GAAG,cAAc,CAAC,kBAAkB,CAAC,EACjD;IACE;;;;OAIG;IACH,cAAc,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACtC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CACF,GACC,CACI;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CAAE,GACnD;IAAE,IAAI,CAAC,EAAE,KAAK,CAAC;IAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CAAE,CACtD,CAAC;AAEJ;;;;;;;;GAQG;AACH,eAAO,MAAM,OAAO,yFA2CnB,CAAC"}

package/dist/types/components/{Modal/Modal.d.ts → Dialog/Dialog.d.ts}

@@ -1,7 +1,7 @@
 import type { DialogHTMLAttributes } from 'react';
 import type { DefaultProps } from '../../types';
 import type { MergeRight } from '../../utilities';
-export type ModalProps = MergeRight<DefaultProps & DialogHTMLAttributes<HTMLDialogElement>, {
+export type DialogProps = MergeRight<DefaultProps & DialogHTMLAttributes<HTMLDialogElement>, {
     /**
      * Screen reader label of close button. Set false to hide the close button.
      * @default 'Lukk dialogvindu'
@@ -13,7 +13,7 @@ export type ModalProps = MergeRight<DefaultProps & DialogHTMLAttributes<HTMLDial
      */
     backdropClose?: boolean;
     /**
-     * Callback that is called when the modal is closed.
+     * Callback that is called when the dialog is closed.
      */
     onClose?: (event: Event) => void;
     /**
@@ -23,29 +23,29 @@ export type ModalProps = MergeRight<DefaultProps & DialogHTMLAttributes<HTMLDial
     asChild?: boolean;
 }>;
 /**
- * Modal component, used to display a modal dialog.
+ * Dialog component, used to display a dialog dialog.
  *
  * @example with TriggerContext
- * <Modal.TriggerContext>
- *   <Modal.Trigger>Open Modal</Modal.Trigger>
- *   <Modal>
- *     <Modal.Block>
+ * <Dialog.TriggerContext>
+ *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *   <Dialog>
+ *     <Dialog.Block>
  *       Content
- *     </Modal.Block>
- *   </Modal>
- * </Modal.TriggerContext>
+ *     </Dialog.Block>
+ *   </Dialog>
+ * </Dialog.TriggerContext>
  *
  * @example without TriggerContext
- * const modalRef = useRef<HTMLDialogElement>(null);
+ * const dialogRef = useRef<HTMLDialogElement>(null);
  *
  * ...
  *
- * <Button onClick={() => modalRef.current?.showModal()}>Open Modal</Button>
- * <Modal ref={modalRef}>
+ * <Button onClick={() => dialogRef.current?.showDialog()}>Open Dialog</Button>
+ * <Dialog ref={dialogRef}>
  *   Content
- * </Modal>
+ * </Dialog>
  */
-export declare const Modal: React.ForwardRefExoticComponent<Omit<DefaultProps & DialogHTMLAttributes<HTMLDialogElement>, "asChild" | "onClose" | "closeButton" | "backdropClose"> & {
+export declare const Dialog: React.ForwardRefExoticComponent<Omit<DefaultProps & DialogHTMLAttributes<HTMLDialogElement>, "asChild" | "onClose" | "closeButton" | "backdropClose"> & {
     /**
      * Screen reader label of close button. Set false to hide the close button.
      * @default 'Lukk dialogvindu'
@@ -57,7 +57,7 @@ export declare const Modal: React.ForwardRefExoticComponent<Omit<DefaultProps &
      */
     backdropClose?: boolean;
     /**
-     * Callback that is called when the modal is closed.
+     * Callback that is called when the dialog is closed.
      */
     onClose?: (event: Event) => void;
     /**
@@ -66,4 +66,4 @@ export declare const Modal: React.ForwardRefExoticComponent<Omit<DefaultProps &
      */
     asChild?: boolean;
 } & React.RefAttributes<HTMLDialogElement>>;
-//# sourceMappingURL=Modal.d.ts.map
+//# sourceMappingURL=Dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAIlD,MAAM,MAAM,WAAW,GAAG,UAAU,CAClC,YAAY,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,EACtD;IACE;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,MAAM;IA7Cf;;;OAGG;kBACW,MAAM,GAAG,KAAK;IAC5B;;;OAGG;oBACa,OAAO;IACvB;;OAEG;cACO,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI;IAChC;;;OAGG;cACO,OAAO;2CA+GpB,CAAC"}

package/dist/types/components/{Modal/ModalBlock.d.ts → Dialog/DialogBlock.d.ts}

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'react';
-export type ModalBlockProps = {
+export type DialogBlockProps = {
     /**
      * Change the default rendered element for the one passed as a child, merging their props and behavior.
      * @default false
@@ -7,26 +7,26 @@ export type ModalBlockProps = {
     asChild?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 /**
- * ModalBlock component, used to separate content in a modal.
+ * DialogBlock component, used to separate content in a Dialog.
  *
  * @example
- * <Modal>
- *   <Modal.Block>
+ * <Dialog>
+ *   <Dialog.Block>
  *     Header
- *   </Modal.Block>
- *   <Modal.Block>
+ *   </Dialog.Block>
+ *   <Dialog.Block>
  *     Content
- *   </Modal.Block>
- *   <Modal.Block>
+ *   </Dialog.Block>
+ *   <Dialog.Block>
  *     Footer
- *   </Modal.Block>
- * </Modal>
+ *   </Dialog.Block>
+ * </Dialog>
  */
-export declare const ModalBlock: React.ForwardRefExoticComponent<{
+export declare const DialogBlock: React.ForwardRefExoticComponent<{
     /**
      * Change the default rendered element for the one passed as a child, merging their props and behavior.
      * @default false
      */
     asChild?: boolean;
 } & HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=ModalBlock.d.ts.map
+//# sourceMappingURL=DialogBlock.d.ts.map

package/dist/types/components/Dialog/DialogBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogBlock.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/DialogBlock.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,WAAW;IAvBtB;;;OAGG;cACO,OAAO;yEA+BlB,CAAC"}

package/dist/types/components/Dialog/DialogTrigger.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentPropsWithRef } from 'react';
+import { Button } from '../Button/Button';
+export type DialogTriggerProps = ComponentPropsWithRef<typeof Button>;
+/**
+ * DialogTrigger component, used within a Dialog.TriggerContext to open a dialog.
+ *
+ * @example
+ * <Dialog.TriggerContext>
+ *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *   <Dialog>
+ *     Content
+ *   </Dialog>
+ * </Dialog.TriggerContext>
+ */
+export declare const DialogTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("../../types").DefaultProps & React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "variant" | "icon" | "loading" | "asChild"> & {
+    variant?: "primary" | "secondary" | "tertiary";
+    icon?: boolean;
+    loading?: boolean | React.ReactNode;
+    asChild?: boolean;
+    type?: React.ButtonHTMLAttributes<HTMLButtonElement>["type"];
+} & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=DialogTrigger.d.ts.map

package/dist/types/components/Dialog/DialogTrigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogTrigger.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/DialogTrigger.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAG1C,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,CAAC,OAAO,MAAM,CAAC,CAAC;AAEtE;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa;;;;;;4FAczB,CAAC"}

package/dist/types/components/Dialog/DialogTriggerContext.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode, RefObject } from 'react';
+export declare const Context: React.Context<RefObject<HTMLDialogElement | null>>;
+export type DialogTriggerContextProps = {
+    children: ReactNode;
+};
+/**
+ * DialogTriggerContext component, used to provide a context for a dialog trigger.
+ *
+ * @example
+ * <Dialog.TriggerContext>
+ *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *   <Dialog>
+ *     Content
+ *   </Dialog>
+ * </Dialog.TriggerContext>
+ */
+export declare const DialogTriggerContext: {
+    ({ children, }: DialogTriggerContextProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=DialogTriggerContext.d.ts.map

package/dist/types/components/Dialog/DialogTriggerContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogTriggerContext.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/DialogTriggerContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,eAAO,MAAM,OAAO,oDAElB,CAAC;AAEH,MAAM,MAAM,yBAAyB,GAAG;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,CAAC;AAEhE;;;;;;;;;;GAUG;AACH,eAAO,MAAM,oBAAoB;oBAE9B,yBAAyB;;CAI3B,CAAC"}