@digdir/designsystemet-react 1.20.0 → 1.20.1

package/dist/esm/components/pagination/pagination-list.d.ts

@@ -0,0 +1,31 @@
+
+import { HTMLAttributes } from "react";
+//#region src/components/pagination/pagination-list.d.ts
+type PaginationListProps = {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+} & Omit<HTMLAttributes<HTMLUListElement>, 'size'>;
+/**
+ * PaginationList component, use within a Pagination.
+ *
+ * @example
+ * <Pagination>
+ *   <PaginationList>
+ *     <PaginationItem>
+ *       <PaginationButton aria-label='Forrige side'>Forrige</PaginationButton>
+ *     </PaginationItem>
+ *   </PaginationList>
+ * </Pagination>
+ */
+declare const PaginationList: import("react").ForwardRefExoticComponent<{
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+} & Omit<HTMLAttributes<HTMLUListElement>, "size"> & import("react").RefAttributes<HTMLUListElement>>;
+//#endregion
+export { PaginationList, PaginationListProps };

package/dist/esm/components/pagination/pagination-list.js

@@ -1,23 +1,25 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { Slot } from '@radix-ui/react-slot';
-import { forwardRef } from 'react';
-
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+//#region src/components/pagination/pagination-list.tsx
 /**
- * PaginationList component, use within a Pagination.
- *
- * @example
- * <Pagination>
- *   <PaginationList>
- *     <PaginationItem>
- *       <PaginationButton aria-label='Forrige side'>Forrige</PaginationButton>
- *     </PaginationItem>
- *   </PaginationList>
- * </Pagination>
- */
+* PaginationList component, use within a Pagination.
+*
+* @example
+* <Pagination>
+*   <PaginationList>
+*     <PaginationItem>
+*       <PaginationButton aria-label='Forrige side'>Forrige</PaginationButton>
+*     </PaginationItem>
+*   </PaginationList>
+* </Pagination>
+*/
 const PaginationList = forwardRef(function PaginationList({ asChild, ...rest }, ref) {
-    const Component = asChild ? Slot : 'ul';
-    return jsx(Component, { ref: ref, ...rest });
+	return /* @__PURE__ */ jsx(asChild ? Slot : "ul", {
+		ref,
+		...rest
+	});
 });
-
+//#endregion
 export { PaginationList };

package/dist/esm/components/pagination/pagination.d.ts

@@ -0,0 +1,71 @@
+
+import { DefaultProps } from "../../types.js";
+import { MergeRight } from "../../utilities/types.js";
+import "../../utilities/index.js";
+import { DSPaginationElement } from "@digdir/designsystemet-web";
+import { HTMLAttributes } from "react";
+//#region src/components/pagination/pagination.d.ts
+type PaginationProps = MergeRight<DefaultProps & HTMLAttributes<DSPaginationElement>, {
+  /**
+   * Sets the screen reader label for the Pagination area
+   * @default 'Bla i sider'
+   */
+  'aria-label'?: string;
+  /**
+   * Current page number
+   */
+  'data-current'?: string;
+  /**
+   * Total number of pages
+   */
+  'data-total'?: string;
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   *
+   * @deprecated This is not supported anymore, as the element needs to be `ds-pagination`
+   */
+  asChild?: boolean;
+}>;
+/**
+ * Pagination component, used to navigate through a list of items.
+ *
+ * @example
+ * <Pagination>
+ *   <Pagination.List>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 1'>1</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 2'>2</Pagination.Button>
+ *     </Pagination.Item>
+ *   </Pagination.List>
+ * </Pagination>
+ */
+declare const Pagination: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<DSPaginationElement>, "asChild" | "aria-label" | "data-current" | "data-total"> & {
+  /**
+   * Sets the screen reader label for the Pagination area
+   * @default 'Bla i sider'
+   */
+  'aria-label'?: string;
+  /**
+   * Current page number
+   */
+  'data-current'?: string;
+  /**
+   * Total number of pages
+   */
+  'data-total'?: string;
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   *
+   * @deprecated This is not supported anymore, as the element needs to be `ds-pagination`
+   */
+  asChild?: boolean;
+} & import("react").RefAttributes<DSPaginationElement>>;
+//#endregion
+export { Pagination, PaginationProps };

package/dist/esm/components/pagination/pagination.js

@@ -1,34 +1,35 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import '@digdir/designsystemet-web';
-import { Slot } from '@radix-ui/react-slot';
-import cl from 'clsx/lite';
-import { forwardRef } from 'react';
-
+import "@digdir/designsystemet-web";
+import cl from "clsx/lite";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+//#region src/components/pagination/pagination.tsx
 /**
- * Pagination component, used to navigate through a list of items.
- *
- * @example
- * <Pagination>
- *   <Pagination.List>
- *     <Pagination.Item>
- *       <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
- *     </Pagination.Item>
- *     <Pagination.Item>
- *       <Pagination.Button aria-label='Side 1'>1</Pagination.Button>
- *     </Pagination.Item>
- *     <Pagination.Item>
- *       <Pagination.Button aria-label='Side 2'>2</Pagination.Button>
- *     </Pagination.Item>
- *   </Pagination.List>
- * </Pagination>
- */
+* Pagination component, used to navigate through a list of items.
+*
+* @example
+* <Pagination>
+*   <Pagination.List>
+*     <Pagination.Item>
+*       <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+*     </Pagination.Item>
+*     <Pagination.Item>
+*       <Pagination.Button aria-label='Side 1'>1</Pagination.Button>
+*     </Pagination.Item>
+*     <Pagination.Item>
+*       <Pagination.Button aria-label='Side 2'>2</Pagination.Button>
+*     </Pagination.Item>
+*   </Pagination.List>
+* </Pagination>
+*/
 const Pagination = forwardRef(function Pagination({ asChild, className, ...rest }, ref) {
-    const Component = asChild ? Slot : 'ds-pagination';
-    return (jsx(Component, { ...(asChild
-            ? { className: cl('ds-pagination', className) }
-            : { class: cl('ds-pagination', className) }), suppressHydrationWarning // Since ds-pagination will change aria-label and role after hydration
-        : true, ref: ref, ...rest }));
+	return /* @__PURE__ */ jsx(asChild ? Slot : "ds-pagination", {
+		...asChild ? { className: cl("ds-pagination", className) } : { class: cl("ds-pagination", className) },
+		suppressHydrationWarning: true,
+		ref,
+		...rest
+	});
 });
-
+//#endregion
 export { Pagination };

package/dist/esm/components/paragraph/paragraph.d.ts

@@ -0,0 +1,44 @@
+
+import { HTMLAttributes } from "react";
+//#region src/components/paragraph/paragraph.d.ts
+type ParagraphProps = {
+  /**
+   * Changes text sizing
+   */
+  'data-size'?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /**
+   *  Adjusts styling for paragraph length
+   *  @default 'default'
+   */
+  variant?: 'long' | 'default' | 'short';
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+} & HTMLAttributes<HTMLParagraphElement>;
+/**
+ * Use `Paragraph` to display text with paragraph text styles.
+ * Renders a native `p` element.
+ *
+ * @example
+ * <Paragraph data-size='lg'>Paragraph</Paragraph>
+ */
+declare const Paragraph: import("react").ForwardRefExoticComponent<{
+  /**
+   * Changes text sizing
+   */
+  'data-size'?: "xs" | "sm" | "md" | "lg" | "xl";
+  /**
+   *  Adjusts styling for paragraph length
+   *  @default 'default'
+   */
+  variant?: "long" | "default" | "short";
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+} & HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
+//#endregion
+export { Paragraph, ParagraphProps };

package/dist/esm/components/paragraph/paragraph.js

@@ -1,19 +1,23 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { Slot } from '@radix-ui/react-slot';
-import cl from 'clsx/lite';
-import { forwardRef } from 'react';
-
+import cl from "clsx/lite";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+//#region src/components/paragraph/paragraph.tsx
 /**
- * Use `Paragraph` to display text with paragraph text styles.
- * Renders a native `p` element.
- *
- * @example
- * <Paragraph data-size='lg'>Paragraph</Paragraph>
- */
+* Use `Paragraph` to display text with paragraph text styles.
+* Renders a native `p` element.
+*
+* @example
+* <Paragraph data-size='lg'>Paragraph</Paragraph>
+*/
 const Paragraph = forwardRef(function Paragraph({ className, asChild, variant, ...rest }, ref) {
-    const Component = asChild ? Slot : 'p';
-    return (jsx(Component, { ref: ref, className: cl(`ds-paragraph`, className), "data-variant": variant, ...rest }));
+	return /* @__PURE__ */ jsx(asChild ? Slot : "p", {
+		ref,
+		className: cl(`ds-paragraph`, className),
+		"data-variant": variant,
+		...rest
+	});
 });
-
+//#endregion
 export { Paragraph };

package/dist/esm/components/popover/index.d.ts

@@ -0,0 +1,55 @@
+
+import { Popover as Popover$1, PopoverProps } from "./popover.js";
+import { PopoverTrigger, PopoverTriggerProps } from "./popover-trigger.js";
+import { PopoverTriggerContext, PopoverTriggerContextProps } from "./popover-trigger-context.js";
+//#region src/components/popover/index.d.ts
+type Popover = typeof Popover$1 & {
+  /**
+   * Popover.TriggerContext component, use to wrap a Popover.Trigger and Popover.
+   *
+   * @example
+   * <Popover.TriggerContext>
+   *   <Popover.Trigger>Open Popover</Popover.Trigger>
+   *   <Popover>
+   *     Content
+   *   </Popover>
+   * </Popover.TriggerContext>
+   */
+  TriggerContext: typeof PopoverTriggerContext;
+  /**
+   * PopoverTrigger component, used to trigger a popover.
+   *
+   * @example
+   * <Popover.TriggerContext>
+   *   <Popover.Trigger>Open Popover</Popover.Trigger>
+   *   <Popover>
+   *     Content
+   *   </Popover>
+   * </Popover.TriggerContext>
+   *
+   * @example inline
+   * <Popover.TriggerContext>
+   *   <Paragraph>
+   *    We can use it <Popover.Trigger inline={true}>inline</Popover.Trigger>.
+   *   </Paragraph>
+   *   <Popover>
+   *     Content
+   *   </Popover>
+   * </Popover.TriggerContext>
+   */
+  Trigger: typeof PopoverTrigger;
+};
+/**
+ * Popover component, used to display content in a popover over an element.
+ *
+ * @example
+ * <Popover.TriggerContext>
+ *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ */
+declare const PopoverComponent: Popover;
+//#endregion
+export { PopoverComponent as Popover, type PopoverProps, PopoverTrigger, PopoverTriggerContext, type PopoverTriggerContextProps, type PopoverTriggerProps };

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

@@ -1,24 +1,24 @@
 'use client';
-import { Popover } from './popover.js';
-import { PopoverTrigger } from './popover-trigger.js';
-import { PopoverTriggerContext } from './popover-trigger-context.js';
-
+import { PopoverTriggerContext } from "./popover-trigger-context.js";
+import { Popover } from "./popover.js";
+import { PopoverTrigger } from "./popover-trigger.js";
+//#region src/components/popover/index.ts
 /**
- * Popover component, used to display content in a popover over an element.
- *
- * @example
- * <Popover.TriggerContext>
- *   <Popover.Trigger>Open Popover</Popover.Trigger>
- *   <Popover>
- *     Content
- *   </Popover>
- * </Popover.TriggerContext>
- */
+* Popover component, used to display content in a popover over an element.
+*
+* @example
+* <Popover.TriggerContext>
+*   <Popover.Trigger>Open Popover</Popover.Trigger>
+*   <Popover>
+*     Content
+*   </Popover>
+* </Popover.TriggerContext>
+*/
 const PopoverComponent = Object.assign(Popover, {
-    TriggerContext: PopoverTriggerContext,
-    Trigger: PopoverTrigger,
+	TriggerContext: PopoverTriggerContext,
+	Trigger: PopoverTrigger
 });
-PopoverComponent.TriggerContext.displayName = 'Popover.TriggerContext';
-PopoverComponent.Trigger.displayName = 'Popover.Trigger';
-
+PopoverComponent.TriggerContext.displayName = "Popover.TriggerContext";
+PopoverComponent.Trigger.displayName = "Popover.Trigger";
+//#endregion
 export { PopoverComponent as Popover, PopoverTrigger, PopoverTriggerContext };

package/dist/esm/components/popover/popover-trigger-context.d.ts

@@ -0,0 +1,23 @@
+
+import { ReactNode } from "react";
+//#region src/components/popover/popover-trigger-context.d.ts
+type PopoverTriggerContextProps = {
+  children: ReactNode;
+};
+/**
+ * PopoverTriggerContext component, use to wrap a Popover.Trigger and Popover.
+ *
+ * @example
+ * <PopoverTriggerContext>
+ *   <PopoverTrigger>Open Popover</PopoverTrigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </PopoverTriggerContext>
+ */
+declare const PopoverTriggerContext: {
+  ({ children }: PopoverTriggerContextProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { PopoverTriggerContext, PopoverTriggerContextProps };

package/dist/esm/components/popover/popover-trigger-context.js

@@ -1,24 +1,29 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { createContext, useId, useState } from 'react';
-
+import { createContext, useId, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/popover/popover-trigger-context.tsx
 /**
- * PopoverTriggerContext component, use to wrap a Popover.Trigger and Popover.
- *
- * @example
- * <PopoverTriggerContext>
- *   <PopoverTrigger>Open Popover</PopoverTrigger>
- *   <Popover>
- *     Content
- *   </Popover>
- * </PopoverTriggerContext>
- */
-const PopoverTriggerContext = ({ children, }) => {
-    const randomPopoverId = useId();
-    const [popoverId, setPopoverId] = useState(randomPopoverId);
-    return (jsx(Context.Provider, { value: { popoverId, setPopoverId }, children: children }));
+* PopoverTriggerContext component, use to wrap a Popover.Trigger and Popover.
+*
+* @example
+* <PopoverTriggerContext>
+*   <PopoverTrigger>Open Popover</PopoverTrigger>
+*   <Popover>
+*     Content
+*   </Popover>
+* </PopoverTriggerContext>
+*/
+const PopoverTriggerContext = ({ children }) => {
+	const [popoverId, setPopoverId] = useState(useId());
+	return /* @__PURE__ */ jsx(Context.Provider, {
+		value: {
+			popoverId,
+			setPopoverId
+		},
+		children
+	});
 };
-PopoverTriggerContext.displayName = 'PopoverTriggerContext';
+PopoverTriggerContext.displayName = "PopoverTriggerContext";
 const Context = createContext({});
-
+//#endregion
 export { Context, PopoverTriggerContext };

package/dist/esm/components/popover/popover-trigger.d.ts

@@ -0,0 +1,47 @@
+
+import { DefaultProps } from "../../types.js";
+import { ButtonProps } from "../button/button.js";
+import { ButtonHTMLAttributes } from "react";
+//#region src/components/popover/popover-trigger.d.ts
+type PopoverTriggerProps = ({
+  /**
+   * Will render the trigger as inline text.
+   * @default false
+   */
+  inline?: true;
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+} & ButtonHTMLAttributes<HTMLButtonElement> & DefaultProps) | ({
+  /**
+   * Will render the trigger as inline text.
+   * @default false
+   */
+  inline?: false;
+} & ButtonProps);
+/**
+ * PopoverTrigger component, used to trigger a popover.
+ *
+ * @example
+ * <PopoverTriggerContext>
+ *   <PopoverTrigger>Open Popover</PopoverTrigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </PopoverTriggerContext>
+ *
+ * @example inline
+ * <PopoverTriggerContext>
+ *   <Paragraph>
+ *    We can use it <PopoverTrigger inline={true}>inline</PopoverTrigger>.
+ *   </Paragraph>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </PopoverTriggerContext>
+ */
+declare const PopoverTrigger: import("react").ForwardRefExoticComponent<PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { PopoverTrigger, PopoverTriggerProps };

package/dist/esm/components/popover/popover-trigger.js

@@ -1,39 +1,42 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { Slot } from '@radix-ui/react-slot';
-import { forwardRef, useContext, version } from 'react';
-import { Button } from '../button/button.js';
-import { Context } from './popover-trigger-context.js';
-
+import { Button } from "../button/button.js";
+import { Context } from "./popover-trigger-context.js";
+import { forwardRef, useContext, version } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+//#region src/components/popover/popover-trigger.tsx
 /**
- * PopoverTrigger component, used to trigger a popover.
- *
- * @example
- * <PopoverTriggerContext>
- *   <PopoverTrigger>Open Popover</PopoverTrigger>
- *   <Popover>
- *     Content
- *   </Popover>
- * </PopoverTriggerContext>
- *
- * @example inline
- * <PopoverTriggerContext>
- *   <Paragraph>
- *    We can use it <PopoverTrigger inline={true}>inline</PopoverTrigger>.
- *   </Paragraph>
- *   <Popover>
- *     Content
- *   </Popover>
- * </PopoverTriggerContext>
- */
+* PopoverTrigger component, used to trigger a popover.
+*
+* @example
+* <PopoverTriggerContext>
+*   <PopoverTrigger>Open Popover</PopoverTrigger>
+*   <Popover>
+*     Content
+*   </Popover>
+* </PopoverTriggerContext>
+*
+* @example inline
+* <PopoverTriggerContext>
+*   <Paragraph>
+*    We can use it <PopoverTrigger inline={true}>inline</PopoverTrigger>.
+*   </Paragraph>
+*   <Popover>
+*     Content
+*   </Popover>
+* </PopoverTriggerContext>
+*/
 const PopoverTrigger = forwardRef(function PopoverTrigger({ id, inline, asChild, popovertarget, popoverTarget, ...rest }, ref) {
-    const { popoverId } = useContext(Context);
-    const Component = asChild ? Slot : inline ? 'button' : Button;
-    const popoverVal = popoverTarget ?? popovertarget ?? popoverId;
-    const popoverKey = version.startsWith('19')
-        ? 'popoverTarget'
-        : 'popovertarget';
-    return (jsx(Component, { ref: ref, "data-popover": inline ? 'inline' : undefined, [popoverKey]: popoverVal, ...rest }));
+	const { popoverId } = useContext(Context);
+	const Component = asChild ? Slot : inline ? "button" : Button;
+	const popoverVal = popoverTarget ?? popovertarget ?? popoverId;
+	const popoverKey = version.startsWith("19") ? "popoverTarget" : "popovertarget";
+	return /* @__PURE__ */ jsx(Component, {
+		ref,
+		"data-popover": inline ? "inline" : void 0,
+		[popoverKey]: popoverVal,
+		...rest
+	});
 });
-
+//#endregion
 export { PopoverTrigger };