@digdir/designsystemet-react 1.20.0 → 1.20.1

package/dist/esm/components/switch/switch.js

@@ -1,18 +1,40 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Field as FieldComponent } from '../field/index.js';
-import { Input } from '../input/input.js';
-import { Label } from '../label/label.js';
-
+import { Label } from "../label/label.js";
+import { Input } from "../input/input.js";
+import { Field as FieldComponent } from "../field/index.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/switch/switch.tsx
 /**
- * Switch used to toggle options.
- *
- * @example
- * <Switch label="I agree" value="agree" />
- */
-const Switch = forwardRef(function Switch({ 'data-size': size, children, className, description, label, position, style, variant, ...rest }, ref) {
-    return (jsxs(FieldComponent, { className: className, "data-position": position, "data-size": size, "data-variant": variant, style: style, children: [jsx(Input, { type: 'checkbox', role: 'switch', ref: ref, ...rest }), !!label && jsx(Label, { weight: 'regular', children: label }), !!description && jsx("div", { "data-field": 'description', children: description })] }));
+* Switch used to toggle options.
+*
+* @example
+* <Switch label="I agree" value="agree" />
+*/
+const Switch = forwardRef(function Switch({ "data-size": size, children, className, description, label, position, style, variant, ...rest }, ref) {
+	return /* @__PURE__ */ jsxs(FieldComponent, {
+		className,
+		"data-position": position,
+		"data-size": size,
+		"data-variant": variant,
+		style,
+		children: [
+			/* @__PURE__ */ jsx(Input, {
+				type: "checkbox",
+				role: "switch",
+				ref,
+				...rest
+			}),
+			!!label && /* @__PURE__ */ jsx(Label, {
+				weight: "regular",
+				children: label
+			}),
+			!!description && /* @__PURE__ */ jsx("div", {
+				"data-field": "description",
+				children: description
+			})
+		]
+	});
 });
-
+//#endregion
 export { Switch };

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

@@ -0,0 +1,99 @@
+
+import { Table as Table$1, TableProps } from "./table.js";
+import { TableBody, TableBodyProps } from "./table-body.js";
+import { TableCell, TableCellProps } from "./table-cell.js";
+import { TableFoot, TableFootProps } from "./table-foot.js";
+import { TableHead, TableHeadProps } from "./table-head.js";
+import { TableHeaderCell, TableHeaderCellProps } from "./table-header-cell.js";
+import { TableRow, TableRowProps } from "./table-row.js";
+//#region src/components/table/index.d.ts
+type Table = typeof Table$1 & {
+  /**
+   * TableHead component, used to display the header of a table. Renders a native HTML thead element.
+   *
+   * @example
+   * <Table.Head>
+   *   <Table.Row>
+   *     <Table.HeaderCell>Name</Table.HeaderCell>
+   *     <Table.HeaderCell>Age</Table.HeaderCell>
+   *   </Table.Row>
+   * </Table.Head>
+   */
+  Head: typeof TableHead;
+  /**
+   * Table.Body component, used to display the body of a table. Renders a native HTML tbody element.
+   *
+   * @example
+   * <Table.Body>
+   *   <Table.Row>
+   *     <Table.Cell>John</Table.Cell>
+   *     <Table.Cell>25</Table.Cell>
+   *   </Table.Row>
+   * </Table.Body>
+   */
+  Body: typeof TableBody;
+  /**
+   * Table.Row component, used to display the rows of a table. Renders a native HTML tr element.
+   *
+   * @example
+   * <Table.Row>
+   *   <Table.Cell>John</Table.Cell>
+   *   <Table.Cell>25</Table.Cell>
+   * </Table.Row>
+   */
+  Row: typeof TableRow;
+  /**
+   * Table.Cell component, used to display the cells of a table. Renders a native HTML td element.
+   *
+   * @example
+   * <Table.Cell>John</Table.Cell>
+   */
+  Cell: typeof TableCell;
+  /**
+   * Table.HeaderCell component, used to display the header cells of a table. Renders a native HTML th element.
+   *
+   * @example
+   * <Table.HeaderCell>Name</Table.HeaderCell>
+   */
+  HeaderCell: typeof TableHeaderCell;
+  /**
+   * Table.Foot component, used to display the footer of a table. Renders a native HTML tfoot element.
+   *
+   * @example
+   * <Table.Foot>
+   *   <Table.Row>
+   *     <Table.Cell>Total</Table.Cell>
+   *     <Table.Cell>2</Table.Cell>
+   *   </Table.Row>
+   * </Table.Foot>
+   */
+  Foot: typeof TableFoot;
+};
+/**
+ * Table component, used to display tabular data. Renders a native HTML table element.
+ *
+ * @example
+ * <Table>
+ *   <Table.Head>
+ *     <Table.Row>
+ *       <Table.HeaderCell>Name</Table.HeaderCell>
+ *       <Table.HeaderCell>Age</Table.HeaderCell>
+ *     </Table.Row>
+ *   </Table.Head>
+ *   <Table.Body>
+ *     <Table.Row>
+ *       <Table.Cell>John</Table.Cell>
+ *       <Table.Cell>25</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Body>
+ *   <Table.Foot>
+ *     <Table.Row>
+ *       <Table.Cell>Total</Table.Cell>
+ *       <Table.Cell>2</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Foot>
+ * </Table>
+ */
+declare const TableComponent: Table;
+//#endregion
+export { TableComponent as Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, TableHeaderCell, type TableHeaderCellProps, type TableProps, TableRow, type TableRowProps };

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

@@ -1,51 +1,51 @@
 'use client';
-import { Table } from './table.js';
-import { TableBody } from './table-body.js';
-import { TableCell } from './table-cell.js';
-import { TableFoot } from './table-foot.js';
-import { TableHead } from './table-head.js';
-import { TableHeaderCell } from './table-header-cell.js';
-import { TableRow } from './table-row.js';
-
+import { Table } from "./table.js";
+import { TableBody } from "./table-body.js";
+import { TableCell } from "./table-cell.js";
+import { TableFoot } from "./table-foot.js";
+import { TableHead } from "./table-head.js";
+import { TableHeaderCell } from "./table-header-cell.js";
+import { TableRow } from "./table-row.js";
+//#region src/components/table/index.ts
 /**
- * Table component, used to display tabular data. Renders a native HTML table element.
- *
- * @example
- * <Table>
- *   <Table.Head>
- *     <Table.Row>
- *       <Table.HeaderCell>Name</Table.HeaderCell>
- *       <Table.HeaderCell>Age</Table.HeaderCell>
- *     </Table.Row>
- *   </Table.Head>
- *   <Table.Body>
- *     <Table.Row>
- *       <Table.Cell>John</Table.Cell>
- *       <Table.Cell>25</Table.Cell>
- *     </Table.Row>
- *   </Table.Body>
- *   <Table.Foot>
- *     <Table.Row>
- *       <Table.Cell>Total</Table.Cell>
- *       <Table.Cell>2</Table.Cell>
- *     </Table.Row>
- *   </Table.Foot>
- * </Table>
- */
+* Table component, used to display tabular data. Renders a native HTML table element.
+*
+* @example
+* <Table>
+*   <Table.Head>
+*     <Table.Row>
+*       <Table.HeaderCell>Name</Table.HeaderCell>
+*       <Table.HeaderCell>Age</Table.HeaderCell>
+*     </Table.Row>
+*   </Table.Head>
+*   <Table.Body>
+*     <Table.Row>
+*       <Table.Cell>John</Table.Cell>
+*       <Table.Cell>25</Table.Cell>
+*     </Table.Row>
+*   </Table.Body>
+*   <Table.Foot>
+*     <Table.Row>
+*       <Table.Cell>Total</Table.Cell>
+*       <Table.Cell>2</Table.Cell>
+*     </Table.Row>
+*   </Table.Foot>
+* </Table>
+*/
 const TableComponent = Object.assign(Table, {
-    Head: TableHead,
-    Body: TableBody,
-    Row: TableRow,
-    Cell: TableCell,
-    HeaderCell: TableHeaderCell,
-    Foot: TableFoot,
+	Head: TableHead,
+	Body: TableBody,
+	Row: TableRow,
+	Cell: TableCell,
+	HeaderCell: TableHeaderCell,
+	Foot: TableFoot
 });
-TableComponent.displayName = 'Table';
-TableComponent.Head.displayName = 'Table.Head';
-TableComponent.Body.displayName = 'Table.Body';
-TableComponent.Row.displayName = 'Table.Row';
-TableComponent.Cell.displayName = 'Table.Cell';
-TableComponent.HeaderCell.displayName = 'Table.HeaderCell';
-TableComponent.Foot.displayName = 'Table.Foot';
-
+TableComponent.displayName = "Table";
+TableComponent.Head.displayName = "Table.Head";
+TableComponent.Body.displayName = "Table.Body";
+TableComponent.Row.displayName = "Table.Row";
+TableComponent.Cell.displayName = "Table.Cell";
+TableComponent.HeaderCell.displayName = "Table.HeaderCell";
+TableComponent.Foot.displayName = "Table.Foot";
+//#endregion
 export { TableComponent as Table, TableBody, TableCell, TableFoot, TableHead, TableHeaderCell, TableRow };

package/dist/esm/components/table/table-body.d.ts

@@ -0,0 +1,18 @@
+
+import { HTMLAttributes } from "react";
+//#region src/components/table/table-body.d.ts
+type TableBodyProps = HTMLAttributes<HTMLTableSectionElement>;
+/**
+ * TableBody component, used to display the body of a table. Renders a native HTML tbody element.
+ *
+ * @example
+ * <TableBody>
+ *   <TableRow>
+ *     <TableCell>John</TableCell>
+ *     <TableCell>25</TableCell>
+ *   </TableRow>
+ * </TableBody>
+ */
+declare const TableBody: import("react").ForwardRefExoticComponent<TableBodyProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+//#endregion
+export { TableBody, TableBodyProps };

package/dist/esm/components/table/table-body.js

@@ -1,20 +1,23 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/table/table-body.tsx
 /**
- * TableBody component, used to display the body of a table. Renders a native HTML tbody element.
- *
- * @example
- * <TableBody>
- *   <TableRow>
- *     <TableCell>John</TableCell>
- *     <TableCell>25</TableCell>
- *   </TableRow>
- * </TableBody>
- */
+* TableBody component, used to display the body of a table. Renders a native HTML tbody element.
+*
+* @example
+* <TableBody>
+*   <TableRow>
+*     <TableCell>John</TableCell>
+*     <TableCell>25</TableCell>
+*   </TableRow>
+* </TableBody>
+*/
 const TableBody = forwardRef(function TableBody(rest, ref) {
-    return jsx("tbody", { ref: ref, ...rest });
+	return /* @__PURE__ */ jsx("tbody", {
+		ref,
+		...rest
+	});
 });
-
+//#endregion
 export { TableBody };

package/dist/esm/components/table/table-cell.d.ts

@@ -0,0 +1,13 @@
+
+import { TdHTMLAttributes } from "react";
+//#region src/components/table/table-cell.d.ts
+type TableCellProps = TdHTMLAttributes<HTMLTableCellElement>;
+/**
+ * TableCell component, used to display the cells of a table. Renders a native HTML td element.
+ *
+ * @example
+ * <TableCell>John</TableCell>
+ */
+declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
+//#endregion
+export { TableCell, TableCellProps };

package/dist/esm/components/table/table-cell.js

@@ -1,15 +1,18 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/table/table-cell.tsx
 /**
- * TableCell component, used to display the cells of a table. Renders a native HTML td element.
- *
- * @example
- * <TableCell>John</TableCell>
- */
+* TableCell component, used to display the cells of a table. Renders a native HTML td element.
+*
+* @example
+* <TableCell>John</TableCell>
+*/
 const TableCell = forwardRef(function TableCell(rest, ref) {
-    return jsx("td", { ref: ref, ...rest });
+	return /* @__PURE__ */ jsx("td", {
+		ref,
+		...rest
+	});
 });
-
+//#endregion
 export { TableCell };

package/dist/esm/components/table/table-foot.d.ts

@@ -0,0 +1,18 @@
+
+import { HTMLAttributes } from "react";
+//#region src/components/table/table-foot.d.ts
+type TableFootProps = HTMLAttributes<HTMLTableSectionElement>;
+/**
+ * TableFoot component, used to display the footer of a table. Renders a native HTML tfoot element.
+ *
+ * @example
+ * <TableFoot>
+ *   <TableRow>
+ *     <TableCell>Total</TableCell>
+ *     <TableCell>2</TableCell>
+ *   </TableRow>
+ * </TableFoot>
+ */
+declare const TableFoot: import("react").ForwardRefExoticComponent<TableFootProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+//#endregion
+export { TableFoot, TableFootProps };

package/dist/esm/components/table/table-foot.js

@@ -1,20 +1,23 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/table/table-foot.tsx
 /**
- * TableFoot component, used to display the footer of a table. Renders a native HTML tfoot element.
- *
- * @example
- * <TableFoot>
- *   <TableRow>
- *     <TableCell>Total</TableCell>
- *     <TableCell>2</TableCell>
- *   </TableRow>
- * </TableFoot>
- */
+* TableFoot component, used to display the footer of a table. Renders a native HTML tfoot element.
+*
+* @example
+* <TableFoot>
+*   <TableRow>
+*     <TableCell>Total</TableCell>
+*     <TableCell>2</TableCell>
+*   </TableRow>
+* </TableFoot>
+*/
 const TableFoot = forwardRef(function TableFoot(rest, ref) {
-    return jsx("tfoot", { ref: ref, ...rest });
+	return /* @__PURE__ */ jsx("tfoot", {
+		ref,
+		...rest
+	});
 });
-
+//#endregion
 export { TableFoot };

package/dist/esm/components/table/table-head.d.ts

@@ -0,0 +1,18 @@
+
+import { HTMLAttributes } from "react";
+//#region src/components/table/table-head.d.ts
+type TableHeadProps = HTMLAttributes<HTMLTableSectionElement>;
+/**
+ * TableHead component, used to display the header of a table. Renders a native HTML thead element.
+ *
+ * @example
+ * <TableHead>
+ *   <TableRow>
+ *     <TableHeaderCell>Name</TableHeaderCell>
+ *     <TableHeaderCell>Age</TableHeaderCell>
+ *   </TableRow>
+ * </TableHead>
+ */
+declare const TableHead: import("react").ForwardRefExoticComponent<TableHeadProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+//#endregion
+export { TableHead, TableHeadProps };

package/dist/esm/components/table/table-head.js

@@ -1,20 +1,23 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/table/table-head.tsx
 /**
- * TableHead component, used to display the header of a table. Renders a native HTML thead element.
- *
- * @example
- * <TableHead>
- *   <TableRow>
- *     <TableHeaderCell>Name</TableHeaderCell>
- *     <TableHeaderCell>Age</TableHeaderCell>
- *   </TableRow>
- * </TableHead>
- */
+* TableHead component, used to display the header of a table. Renders a native HTML thead element.
+*
+* @example
+* <TableHead>
+*   <TableRow>
+*     <TableHeaderCell>Name</TableHeaderCell>
+*     <TableHeaderCell>Age</TableHeaderCell>
+*   </TableRow>
+* </TableHead>
+*/
 const TableHead = forwardRef(function TableHead(rest, ref) {
-    return jsx("thead", { ref: ref, ...rest });
+	return /* @__PURE__ */ jsx("thead", {
+		ref,
+		...rest
+	});
 });
-
+//#endregion
 export { TableHead };

package/dist/esm/components/table/table-header-cell.d.ts

@@ -0,0 +1,25 @@
+
+import { AriaAttributes, ThHTMLAttributes } from "react";
+//#region src/components/table/table-header-cell.d.ts
+type TableHeaderCellProps = {
+  /**
+   * If 'none' | 'ascending' | 'descending' | 'other' will add a button to the header cell and change aria-sort and icon
+   * @default undefined
+   */
+  sort?: AriaAttributes['aria-sort'];
+} & ThHTMLAttributes<HTMLTableCellElement>;
+/**
+ * TableHeaderCell component, used to display the header cells of a table. Renders a native HTML th element.
+ *
+ * @example
+ * <TableHeaderCell>Name</TableHeaderCell>
+ */
+declare const TableHeaderCell: import("react").ForwardRefExoticComponent<{
+  /**
+   * If 'none' | 'ascending' | 'descending' | 'other' will add a button to the header cell and change aria-sort and icon
+   * @default undefined
+   */
+  sort?: AriaAttributes["aria-sort"];
+} & ThHTMLAttributes<HTMLTableCellElement> & import("react").RefAttributes<HTMLTableCellElement>>;
+//#endregion
+export { TableHeaderCell, TableHeaderCellProps };

package/dist/esm/components/table/table-header-cell.js

@@ -1,15 +1,23 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/table/table-header-cell.tsx
 /**
- * TableHeaderCell component, used to display the header cells of a table. Renders a native HTML th element.
- *
- * @example
- * <TableHeaderCell>Name</TableHeaderCell>
- */
+* TableHeaderCell component, used to display the header cells of a table. Renders a native HTML th element.
+*
+* @example
+* <TableHeaderCell>Name</TableHeaderCell>
+*/
 const TableHeaderCell = forwardRef(function TableHeaderCell({ sort, children, ...rest }, ref) {
-    return (jsx("th", { "aria-sort": sort, ref: ref, ...rest, children: sort ? jsx("button", { type: 'button', children: children }) : children }));
+	return /* @__PURE__ */ jsx("th", {
+		"aria-sort": sort,
+		ref,
+		...rest,
+		children: sort ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			children
+		}) : children
+	});
 });
-
+//#endregion
 export { TableHeaderCell };

package/dist/esm/components/table/table-row.d.ts

@@ -0,0 +1,16 @@
+
+import { HTMLAttributes } from "react";
+//#region src/components/table/table-row.d.ts
+type TableRowProps = HTMLAttributes<HTMLTableRowElement>;
+/**
+ * TableRow component, used to display the rows of a table. Renders a native HTML tr element.
+ *
+ * @example
+ * <TableRow>
+ *   <TableCell>John</TableCell>
+ *   <TableCell>25</TableCell>
+ * </TableRow>
+ */
+declare const TableRow: import("react").ForwardRefExoticComponent<TableRowProps & import("react").RefAttributes<HTMLTableRowElement>>;
+//#endregion
+export { TableRow, TableRowProps };

package/dist/esm/components/table/table-row.js

@@ -1,18 +1,21 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/table/table-row.tsx
 /**
- * TableRow component, used to display the rows of a table. Renders a native HTML tr element.
- *
- * @example
- * <TableRow>
- *   <TableCell>John</TableCell>
- *   <TableCell>25</TableCell>
- * </TableRow>
- */
+* TableRow component, used to display the rows of a table. Renders a native HTML tr element.
+*
+* @example
+* <TableRow>
+*   <TableCell>John</TableCell>
+*   <TableCell>25</TableCell>
+* </TableRow>
+*/
 const TableRow = forwardRef(function TableRow(rest, ref) {
-    return jsx("tr", { ref: ref, ...rest });
+	return /* @__PURE__ */ jsx("tr", {
+		ref,
+		...rest
+	});
 });
-
+//#endregion
 export { TableRow };

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

@@ -0,0 +1,75 @@
+
+import { DefaultProps } from "../../types.js";
+import { TableHTMLAttributes } from "react";
+//#region src/components/table/table.d.ts
+type TableProps = {
+  /**
+   * Will give the table zebra striping
+   * @default false
+   */
+  zebra?: boolean;
+  /**
+   * Will make the table header sticky
+   * @default false
+   */
+  stickyHeader?: boolean;
+  /**
+   * Will give the table a rounded border
+   * @default false
+   */
+  border?: boolean;
+  /**
+   * Will give the table a hover effect on rows
+   * @default false
+   */
+  hover?: boolean;
+} & Omit<TableHTMLAttributes<HTMLTableElement>, 'border'> & DefaultProps;
+/**
+ * Table component, used to display tabular data. Renders a native HTML table element.
+ *
+ * @example
+ * <Table>
+ *   <Table.Head>
+ *     <Table.Row>
+ *       <Table.HeaderCell>Name</Table.HeaderCell>
+ *       <Table.HeaderCell>Age</Table.HeaderCell>
+ *     </Table.Row>
+ *   </Table.Head>
+ *   <Table.Body>
+ *     <Table.Row>
+ *       <Table.Cell>John</Table.Cell>
+ *       <Table.Cell>25</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Body>
+ *   <Table.Foot>
+ *     <Table.Row>
+ *       <Table.Cell>Total</Table.Cell>
+ *       <Table.Cell>2</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Foot>
+ * </Table>
+ */
+declare const Table: import("react").ForwardRefExoticComponent<{
+  /**
+   * Will give the table zebra striping
+   * @default false
+   */
+  zebra?: boolean;
+  /**
+   * Will make the table header sticky
+   * @default false
+   */
+  stickyHeader?: boolean;
+  /**
+   * Will give the table a rounded border
+   * @default false
+   */
+  border?: boolean;
+  /**
+   * Will give the table a hover effect on rows
+   * @default false
+   */
+  hover?: boolean;
+} & Omit<TableHTMLAttributes<HTMLTableElement>, "border"> & DefaultProps & import("react").RefAttributes<HTMLTableElement>>;
+//#endregion
+export { Table, TableProps };