@navikt/ds-react 0.16.5 → 0.16.9

package/cjs/alert/Alert.js

@@ -41,13 +41,13 @@ const Icon = (_a) => {
     var { variant } = _a, props = __rest(_a, ["variant"]);
     switch (variant) {
         case "error":
-            return react_1.default.createElement(ds_icons_1.ErrorFilled, Object.assign({}, props));
+            return react_1.default.createElement(ds_icons_1.ErrorFilled, Object.assign({ title: "Feil" }, props));
         case "warning":
-            return react_1.default.createElement(ds_icons_1.WarningFilled, Object.assign({}, props));
+            return react_1.default.createElement(ds_icons_1.WarningFilled, Object.assign({ title: "Advarsel" }, props));
         case "info":
-            return react_1.default.createElement(ds_icons_1.InformationFilled, Object.assign({}, props));
+            return react_1.default.createElement(ds_icons_1.InformationFilled, Object.assign({ title: "Informasjon" }, props));
         case "success":
-            return react_1.default.createElement(ds_icons_1.SuccessFilled, Object.assign({}, props));
+            return react_1.default.createElement(ds_icons_1.SuccessFilled, Object.assign({ title: "Suksess" }, props));
         default:
             return null;
     }
@@ -55,7 +55,7 @@ const Icon = (_a) => {
 const Alert = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className, variant, size = "medium", fullWidth = false, inline = false } = _a, rest = __rest(_a, ["children", "className", "variant", "size", "fullWidth", "inline"]);
     return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)(className, "navds-alert", `navds-alert--${variant}`, `navds-alert--${size}`, { "navds-alert--full-width": fullWidth, "navds-alert--inline": inline }) }),
-        react_1.default.createElement(Icon, { title: `${variant}-ikon`, variant: variant, className: "navds-alert__icon" }),
+        react_1.default.createElement(Icon, { variant: variant, className: "navds-alert__icon" }),
         react_1.default.createElement(__1.BodyLong, { as: "div", size: size, className: "navds-alert__wrapper" }, children)));
 });
 exports.default = Alert;

package/cjs/index.js

@@ -27,6 +27,7 @@ __exportStar(require("./popover"), exports);
 __exportStar(require("./speech-bubble"), exports);
 __exportStar(require("./step-indicator"), exports);
 __exportStar(require("./tag"), exports);
+__exportStar(require("./toggle-group"), exports);
 __exportStar(require("./table"), exports);
 __exportStar(require("./typography"), exports);
 __exportStar(require("./util"), exports);

package/cjs/toggle-group/ToggleGroup.js

@@ -0,0 +1,68 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleGroupContext = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const ToggleItem_1 = __importDefault(require("./ToggleItem"));
+const RadixToggleGroup = __importStar(require("@radix-ui/react-toggle-group"));
+const __1 = require("..");
+exports.ToggleGroupContext = (0, react_1.createContext)(null);
+const ToggleGroup = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, children, onChange, size = "medium", label, value, defaultValue, id, "aria-describedby": desc } = _a, rest = __rest(_a, ["className", "children", "onChange", "size", "label", "value", "defaultValue", "id", "aria-describedby"]);
+    const [groupValue, setGroupValue] = (0, react_1.useState)(defaultValue);
+    const labelId = `toggle-group-label-${(0, __1.useId)()}`;
+    const handleValueChange = (v) => {
+        if (v !== "") {
+            setGroupValue(v);
+            onChange === null || onChange === void 0 ? void 0 : onChange(v);
+        }
+    };
+    if (!value && !defaultValue) {
+        console.error("ToggleGroup without value/defaultvalue is not allowed");
+    }
+    const describeBy = (0, classnames_1.default)({
+        [desc !== null && desc !== void 0 ? desc : ""]: !!desc,
+        [labelId]: !!label,
+    });
+    return (react_1.default.createElement(exports.ToggleGroupContext.Provider, { value: {
+            size,
+        } },
+        react_1.default.createElement("div", null,
+            label && (react_1.default.createElement(__1.Label, { size: size, className: "navds-toggle-group__label", id: labelId }, label)),
+            react_1.default.createElement(RadixToggleGroup.Root, Object.assign({}, rest, { onValueChange: handleValueChange, value: value !== null && value !== void 0 ? value : groupValue, defaultValue: defaultValue, ref: ref, className: (0, classnames_1.default)("navds-toggle-group", className, `navds-toggle-group--${size}`) }, (describeBy && { "aria-describedby": describeBy }), { type: "single" }), children))));
+});
+ToggleGroup.Item = ToggleItem_1.default;
+exports.default = ToggleGroup;

package/cjs/toggle-group/ToggleItem.js

@@ -0,0 +1,47 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const __1 = require("..");
+const RadixToggleGroup = __importStar(require("@radix-ui/react-toggle-group"));
+const ToggleGroup_1 = require("./ToggleGroup");
+const ToggleItem = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
+    const context = (0, react_1.useContext)(ToggleGroup_1.ToggleGroupContext);
+    return (react_1.default.createElement(RadixToggleGroup.Item, Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)("navds-toggle-group__button", className) }),
+        react_1.default.createElement(__1.Label, { as: "span", className: "navds-toggle-group__button-inner", size: context === null || context === void 0 ? void 0 : context.size }, children)));
+});
+exports.default = ToggleItem;

package/cjs/toggle-group/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleGroup = void 0;
+var ToggleGroup_1 = require("./ToggleGroup");
+Object.defineProperty(exports, "ToggleGroup", { enumerable: true, get: function () { return __importDefault(ToggleGroup_1).default; } });

package/cjs/toggle-group/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../../esm/toggle-group/index.js",
+  "types": "../../esm/toggle-group/index.d.ts"
+}

package/esm/alert/Alert.js

@@ -17,13 +17,13 @@ const Icon = (_a) => {
     var { variant } = _a, props = __rest(_a, ["variant"]);
     switch (variant) {
         case "error":
-            return React.createElement(ErrorFilled, Object.assign({}, props));
+            return React.createElement(ErrorFilled, Object.assign({ title: "Feil" }, props));
         case "warning":
-            return React.createElement(WarningFilled, Object.assign({}, props));
+            return React.createElement(WarningFilled, Object.assign({ title: "Advarsel" }, props));
         case "info":
-            return React.createElement(InformationFilled, Object.assign({}, props));
+            return React.createElement(InformationFilled, Object.assign({ title: "Informasjon" }, props));
         case "success":
-            return React.createElement(SuccessFilled, Object.assign({}, props));
+            return React.createElement(SuccessFilled, Object.assign({ title: "Suksess" }, props));
         default:
             return null;
     }
@@ -31,7 +31,7 @@ const Icon = (_a) => {
 const Alert = forwardRef((_a, ref) => {
     var { children, className, variant, size = "medium", fullWidth = false, inline = false } = _a, rest = __rest(_a, ["children", "className", "variant", "size", "fullWidth", "inline"]);
     return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: cl(className, "navds-alert", `navds-alert--${variant}`, `navds-alert--${size}`, { "navds-alert--full-width": fullWidth, "navds-alert--inline": inline }) }),
-        React.createElement(Icon, { title: `${variant}-ikon`, variant: variant, className: "navds-alert__icon" }),
+        React.createElement(Icon, { variant: variant, className: "navds-alert__icon" }),
         React.createElement(BodyLong, { as: "div", size: size, className: "navds-alert__wrapper" }, children)));
 });
 export default Alert;

package/esm/alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/alert/Alert.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,aAAa,GACd,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,IAAI,CAAC;AA2B9B,MAAM,IAAI,GAAG,CAAC,EAAqB,EAAE,EAAE;QAAzB,EAAE,OAAO,OAAY,EAAP,KAAK,cAAnB,WAAqB,CAAF;IAC/B,QAAQ,OAAO,EAAE;QACf,KAAK,OAAO;YACV,OAAO,oBAAC,WAAW,oBAAK,KAAK,EAAI,CAAC;QACpC,KAAK,SAAS;YACZ,OAAO,oBAAC,aAAa,oBAAK,KAAK,EAAI,CAAC;QACtC,KAAK,MAAM;YACT,OAAO,oBAAC,iBAAiB,oBAAK,KAAK,EAAI,CAAC;QAC1C,KAAK,SAAS;YACZ,OAAO,oBAAC,aAAa,oBAAK,KAAK,EAAI,CAAC;QACtC;YACE,OAAO,IAAI,CAAC;KACf;AACH,CAAC,CAAC;AAMF,MAAM,KAAK,GAAG,UAAU,CACtB,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,QAAQ,EACR,SAAS,EACT,OAAO,EACP,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,KAAK,EACjB,MAAM,GAAG,KAAK,OAEf,EADI,IAAI,cAPT,mEAQC,CADQ;IAGN,OAAA,CACH,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,SAAS,EACT,aAAa,EACb,gBAAgB,OAAO,EAAE,EACzB,gBAAgB,IAAI,EAAE,EACtB,EAAE,yBAAyB,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,EAAE,CACxE;QAED,oBAAC,IAAI,IACH,KAAK,EAAE,GAAG,OAAO,OAAO,EACxB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,mBAAmB,GAC7B;QACF,oBAAC,QAAQ,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,sBAAsB,IAC5D,QAAQ,CACA,CACP,CACP,CAAA;CAAA,CACF,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/alert/Alert.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,aAAa,GACd,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,IAAI,CAAC;AA2B9B,MAAM,IAAI,GAAG,CAAC,EAAqB,EAAE,EAAE;QAAzB,EAAE,OAAO,OAAY,EAAP,KAAK,cAAnB,WAAqB,CAAF;IAC/B,QAAQ,OAAO,EAAE;QACf,KAAK,OAAO;YACV,OAAO,oBAAC,WAAW,kBAAC,KAAK,EAAC,MAAM,IAAK,KAAK,EAAI,CAAC;QACjD,KAAK,SAAS;YACZ,OAAO,oBAAC,aAAa,kBAAC,KAAK,EAAC,UAAU,IAAK,KAAK,EAAI,CAAC;QACvD,KAAK,MAAM;YACT,OAAO,oBAAC,iBAAiB,kBAAC,KAAK,EAAC,aAAa,IAAK,KAAK,EAAI,CAAC;QAC9D,KAAK,SAAS;YACZ,OAAO,oBAAC,aAAa,kBAAC,KAAK,EAAC,SAAS,IAAK,KAAK,EAAI,CAAC;QACtD;YACE,OAAO,IAAI,CAAC;KACf;AACH,CAAC,CAAC;AAMF,MAAM,KAAK,GAAG,UAAU,CACtB,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,QAAQ,EACR,SAAS,EACT,OAAO,EACP,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,KAAK,EACjB,MAAM,GAAG,KAAK,OAEf,EADI,IAAI,cAPT,mEAQC,CADQ;IAGN,OAAA,CACH,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,SAAS,EACT,aAAa,EACb,gBAAgB,OAAO,EAAE,EACzB,gBAAgB,IAAI,EAAE,EACtB,EAAE,yBAAyB,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,EAAE,CACxE;QAED,oBAAC,IAAI,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,mBAAmB,GAAG;QACxD,oBAAC,QAAQ,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,sBAAsB,IAC5D,QAAQ,CACA,CACP,CACP,CAAA;CAAA,CACF,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/esm/index.d.ts

@@ -15,6 +15,7 @@ export * from "./popover";
 export * from "./speech-bubble";
 export * from "./step-indicator";
 export * from "./tag";
+export * from "./toggle-group";
 export * from "./table";
 export * from "./typography";
 export * from "./util";

package/esm/index.js

@@ -15,6 +15,7 @@ export * from "./popover";
 export * from "./speech-bubble";
 export * from "./step-indicator";
 export * from "./tag";
+export * from "./toggle-group";
 export * from "./table";
 export * from "./typography";
 export * from "./util";

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AAEvB,6BAA6B;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,OAAO,CAAC;AACtB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AAEvB,6BAA6B;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC"}

package/esm/modal/Modal.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactModal from "react-modal";
 import { ModalContentType } from "./ModalContent";
-export interface ModalProps {
+export interface ModalProps extends ReactModal {
     /**
      * Modal content
      */

package/esm/table/DataCell.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-interface DataCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
+interface DataCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
 }
 export interface DataCellType extends React.ForwardRefExoticComponent<DataCellProps & React.RefAttributes<HTMLTableCellElement>> {
 }

package/esm/table/HeaderCell.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-interface HeaderCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
+interface HeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
     scope?: string;
 }
 export interface HeaderCellType extends React.ForwardRefExoticComponent<HeaderCellProps & React.RefAttributes<HTMLTableCellElement>> {

package/esm/table/Table.d.ts

@@ -4,7 +4,7 @@ import { BodyType } from "./Body";
 import { RowType } from "./Row";
 import { HeaderCellType } from "./HeaderCell";
 import { DataCellType } from "./DataCell";
-export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
+export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
     /**
      * Changes padding
      * @default "medium"

package/esm/table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/table/Table.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,MAAsB,MAAM,UAAU,CAAC;AAC9C,OAAO,IAAkB,MAAM,QAAQ,CAAC;AACxC,OAAO,GAAgB,MAAM,OAAO,CAAC;AACrC,OAAO,UAA8B,MAAM,cAAc,CAAC;AAC1D,OAAO,QAA0B,MAAM,YAAY,CAAC;AA8BpD,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAC;AAE1E,MAAM,KAAK,GAAG,UAAU,CACtB,CAAC,EAA6D,EAAE,GAAG,EAAE,EAAE;QAAtE,EAAE,SAAS,EAAE,YAAY,GAAG,KAAK,EAAE,IAAI,GAAG,QAAQ,OAAW,EAAN,IAAI,cAA3D,qCAA6D,CAAF;IAAY,OAAA,CACtE,oBAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE;QACpC,+CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,gBAAgB,IAAI,EAAE,EAAE,SAAS,EAAE;gBAC9D,4BAA4B,EAAE,YAAY;aAC3C,CAAC,IACF,CACoB,CACzB,CAAA;CAAA,CACW,CAAC;AAEf,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;AACtB,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;AAClB,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;AAChB,KAAK,CAAC,UAAU,GAAG,UAAU,CAAC;AAC9B,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE1B,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/table/Table.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,MAAsB,MAAM,UAAU,CAAC;AAC9C,OAAO,IAAkB,MAAM,QAAQ,CAAC;AACxC,OAAO,GAAgB,MAAM,OAAO,CAAC;AACrC,OAAO,UAA8B,MAAM,cAAc,CAAC;AAC1D,OAAO,QAA0B,MAAM,YAAY,CAAC;AA+BpD,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAC;AAE1E,MAAM,KAAK,GAAG,UAAU,CACtB,CAAC,EAA6D,EAAE,GAAG,EAAE,EAAE;QAAtE,EAAE,SAAS,EAAE,YAAY,GAAG,KAAK,EAAE,IAAI,GAAG,QAAQ,OAAW,EAAN,IAAI,cAA3D,qCAA6D,CAAF;IAAY,OAAA,CACtE,oBAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE;QACpC,+CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,gBAAgB,IAAI,EAAE,EAAE,SAAS,EAAE;gBAC9D,4BAA4B,EAAE,YAAY;aAC3C,CAAC,IACF,CACoB,CACzB,CAAA;CAAA,CACW,CAAC;AAEf,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;AACtB,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;AAClB,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;AAChB,KAAK,CAAC,UAAU,GAAG,UAAU,CAAC;AAC9B,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE1B,eAAe,KAAK,CAAC"}

package/esm/toggle-group/ToggleGroup.d.ts

@@ -0,0 +1,38 @@
+import React, { HTMLAttributes } from "react";
+import { ToggleItemType } from "./ToggleItem";
+export interface ToggleGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "dir"> {
+    /**
+     * Toggles.Item elements
+     */
+    children: React.ReactNode;
+    /**
+     * Changes padding and font-size
+     * @default "medium"
+     */
+    size?: "medium" | "small";
+    /**
+     * Controlled selected value
+     */
+    value?: string;
+    /**
+     * If not controlled, a default-value needs to be set
+     */
+    defaultValue?: string;
+    /**
+     * Returns elements that wants to be active
+     */
+    onChange: (value: string) => void;
+    /**
+     * Label describing ToggleGroup
+     */
+    label?: React.ReactNode;
+}
+interface ToggleGroupComponent extends React.ForwardRefExoticComponent<ToggleGroupProps & React.RefAttributes<HTMLDivElement>> {
+    Item: ToggleItemType;
+}
+interface ToggleContextProps {
+    size: "medium" | "small";
+}
+export declare const ToggleGroupContext: React.Context<ToggleContextProps | null>;
+declare const ToggleGroup: ToggleGroupComponent;
+export default ToggleGroup;

package/esm/toggle-group/ToggleGroup.js

@@ -0,0 +1,44 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import cl from "classnames";
+import React, { createContext, forwardRef, useState, } from "react";
+import ToggleItem from "./ToggleItem";
+import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
+import { Label, useId } from "..";
+export const ToggleGroupContext = createContext(null);
+const ToggleGroup = forwardRef((_a, ref) => {
+    var { className, children, onChange, size = "medium", label, value, defaultValue, id, "aria-describedby": desc } = _a, rest = __rest(_a, ["className", "children", "onChange", "size", "label", "value", "defaultValue", "id", "aria-describedby"]);
+    const [groupValue, setGroupValue] = useState(defaultValue);
+    const labelId = `toggle-group-label-${useId()}`;
+    const handleValueChange = (v) => {
+        if (v !== "") {
+            setGroupValue(v);
+            onChange === null || onChange === void 0 ? void 0 : onChange(v);
+        }
+    };
+    if (!value && !defaultValue) {
+        console.error("ToggleGroup without value/defaultvalue is not allowed");
+    }
+    const describeBy = cl({
+        [desc !== null && desc !== void 0 ? desc : ""]: !!desc,
+        [labelId]: !!label,
+    });
+    return (React.createElement(ToggleGroupContext.Provider, { value: {
+            size,
+        } },
+        React.createElement("div", null,
+            label && (React.createElement(Label, { size: size, className: "navds-toggle-group__label", id: labelId }, label)),
+            React.createElement(RadixToggleGroup.Root, Object.assign({}, rest, { onValueChange: handleValueChange, value: value !== null && value !== void 0 ? value : groupValue, defaultValue: defaultValue, ref: ref, className: cl("navds-toggle-group", className, `navds-toggle-group--${size}`) }, (describeBy && { "aria-describedby": describeBy }), { type: "single" }), children))));
+});
+ToggleGroup.Item = ToggleItem;
+export default ToggleGroup;
+//# sourceMappingURL=ToggleGroup.js.map

package/esm/toggle-group/ToggleGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.js","sourceRoot":"","sources":["../../src/toggle-group/ToggleGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EACZ,aAAa,EACb,UAAU,EAEV,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,UAA8B,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAK,gBAAgB,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AA0ClC,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAC7C,IAAI,CACL,CAAC;AAEF,MAAM,WAAW,GAAG,UAAU,CAC5B,CACE,EAWC,EACD,GAAG,EACH,EAAE;QAbF,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,KAAK,EACL,YAAY,EACZ,EAAE,EACF,kBAAkB,EAAE,IAAI,OAEzB,EADI,IAAI,cAVT,yGAWC,CADQ;IAIT,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IAC3D,MAAM,OAAO,GAAG,sBAAsB,KAAK,EAAE,EAAE,CAAC;IAEhD,MAAM,iBAAiB,GAAG,CAAC,CAAS,EAAE,EAAE;QACtC,IAAI,CAAC,KAAK,EAAE,EAAE;YACZ,aAAa,CAAC,CAAC,CAAC,CAAC;YACjB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,CAAC;SACf;IACH,CAAC,CAAC;IAEF,IAAI,CAAC,KAAK,IAAI,CAAC,YAAY,EAAE;QAC3B,OAAO,CAAC,KAAK,CAAC,uDAAuD,CAAC,CAAC;KACxE;IAED,MAAM,UAAU,GAAG,EAAE,CAAC;QACpB,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI;QACpB,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,KAAK;KACnB,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,kBAAkB,CAAC,QAAQ,IAC1B,KAAK,EAAE;YACL,IAAI;SACL;QAED;YACG,KAAK,IAAI,CACR,oBAAC,KAAK,IACJ,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,2BAA2B,EACrC,EAAE,EAAE,OAAO,IAEV,KAAK,CACA,CACT;YACD,oBAAC,gBAAgB,CAAC,IAAI,oBAChB,IAAI,IACR,aAAa,EAAE,iBAAiB,EAChC,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,UAAU,EAC1B,YAAY,EAAE,YAAY,EAC1B,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,oBAAoB,EACpB,SAAS,EACT,uBAAuB,IAAI,EAAE,CAC9B,IACG,CAAC,UAAU,IAAI,EAAE,kBAAkB,EAAE,UAAU,EAAE,CAAC,IACtD,IAAI,EAAC,QAAQ,KAEZ,QAAQ,CACa,CACpB,CACsB,CAC/B,CAAC;AACJ,CAAC,CACsB,CAAC;AAE1B,WAAW,CAAC,IAAI,GAAG,UAAU,CAAC;AAE9B,eAAe,WAAW,CAAC"}

package/esm/toggle-group/ToggleItem.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export interface ToggleItemProps extends React.HTMLAttributes<HTMLButtonElement> {
+    /**
+     * Content
+     */
+    children: React.ReactNode;
+    /**
+     * Value for state-handling
+     */
+    value: string;
+}
+export declare type ToggleItemType = React.ForwardRefExoticComponent<ToggleItemProps & React.RefAttributes<HTMLButtonElement>>;
+declare const ToggleItem: ToggleItemType;
+export default ToggleItem;

package/esm/toggle-group/ToggleItem.js

@@ -0,0 +1,24 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef, useContext } from "react";
+import cl from "classnames";
+import { Label } from "..";
+import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
+import { ToggleGroupContext } from "./ToggleGroup";
+const ToggleItem = forwardRef((_a, ref) => {
+    var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
+    const context = useContext(ToggleGroupContext);
+    return (React.createElement(RadixToggleGroup.Item, Object.assign({}, rest, { ref: ref, className: cl("navds-toggle-group__button", className) }),
+        React.createElement(Label, { as: "span", className: "navds-toggle-group__button-inner", size: context === null || context === void 0 ? void 0 : context.size }, children)));
+});
+export default ToggleItem;
+//# sourceMappingURL=ToggleItem.js.map

package/esm/toggle-group/ToggleItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleItem.js","sourceRoot":"","sources":["../../src/toggle-group/ToggleItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AAC3B,OAAO,KAAK,gBAAgB,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAkBnD,MAAM,UAAU,GAAG,UAAU,CAC3B,CAAC,EAAgC,EAAE,GAAG,EAAE,EAAE;QAAzC,EAAE,SAAS,EAAE,QAAQ,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAC7B,MAAM,OAAO,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAE/C,OAAO,CACL,oBAAC,gBAAgB,CAAC,IAAI,oBAChB,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,4BAA4B,EAAE,SAAS,CAAC;QAEtD,oBAAC,KAAK,IACJ,EAAE,EAAC,MAAM,EACT,SAAS,EAAC,kCAAkC,EAC5C,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,IAElB,QAAQ,CACH,CACc,CACzB,CAAC;AACJ,CAAC,CACgB,CAAC;AAEpB,eAAe,UAAU,CAAC"}

package/esm/toggle-group/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ToggleGroup } from "./ToggleGroup";
+export { ToggleGroupProps } from "./ToggleGroup";

package/esm/toggle-group/index.js

@@ -0,0 +1,2 @@
+export { default as ToggleGroup } from "./ToggleGroup";
+//# sourceMappingURL=index.js.map

package/esm/toggle-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/toggle-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.16.5",
+  "version": "0.16.9",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -37,6 +37,7 @@
     "@material-ui/core": "^4.12.3",
     "@navikt/ds-icons": "^0.8.4",
     "@popperjs/core": "^2.10.1",
+    "@radix-ui/react-toggle-group": "^0.1.4",
     "classnames": "^2.2.6",
     "react-collapse": "^5.1.0",
     "react-merge-refs": "^1.1.0",
@@ -64,5 +65,5 @@
     "@types/react": "^17.0.30",
     "react": "^17.0.0"
   },
-  "gitHead": "5d383b754f9ccaec5d65c417d64ae08a47fb710a"
+  "gitHead": "8a58d75efbbfd6ae78d9a352aeacefb10617cf70"
 }

package/src/alert/Alert.tsx

@@ -36,13 +36,13 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
 const Icon = ({ variant, ...props }) => {
   switch (variant) {
     case "error":
-      return <ErrorFilled {...props} />;
+      return <ErrorFilled title="Feil" {...props} />;
     case "warning":
-      return <WarningFilled {...props} />;
+      return <WarningFilled title="Advarsel" {...props} />;
     case "info":
-      return <InformationFilled {...props} />;
+      return <InformationFilled title="Informasjon" {...props} />;
     case "success":
-      return <SuccessFilled {...props} />;
+      return <SuccessFilled title="Suksess" {...props} />;
     default:
       return null;
   }
@@ -76,11 +76,7 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(
         { "navds-alert--full-width": fullWidth, "navds-alert--inline": inline }
       )}
     >
-      <Icon
-        title={`${variant}-ikon`}
-        variant={variant}
-        className="navds-alert__icon"
-      />
+      <Icon variant={variant} className="navds-alert__icon" />
       <BodyLong as="div" size={size} className="navds-alert__wrapper">
         {children}
       </BodyLong>

package/src/button/button.stories.tsx

@@ -5,6 +5,9 @@ import { Success } from "@navikt/ds-icons";
 export default {
   title: "ds-react/button",
   component: Button,
+  parameters: {
+    chromatic: { delay: 300 },
+  },
 };
 
 const Section = ({ children }) => (

package/src/index.ts

@@ -15,6 +15,7 @@ export * from "./popover";
 export * from "./speech-bubble";
 export * from "./step-indicator";
 export * from "./tag";
+export * from "./toggle-group";
 export * from "./table";
 export * from "./typography";
 export * from "./util";

package/src/modal/Modal.tsx

@@ -6,7 +6,7 @@ import { Close } from "@navikt/ds-icons";
 import { Button } from "..";
 import ModalContent, { ModalContentType } from "./ModalContent";
 
-export interface ModalProps {
+export interface ModalProps extends ReactModal {
   /**
    * Modal content
    */

package/src/table/DataCell.tsx

@@ -3,7 +3,7 @@ import cl from "classnames";
 import { BodyShort } from "..";
 import { TableContext } from ".";
 
-interface DataCellProps extends React.HTMLAttributes<HTMLTableCellElement> {}
+interface DataCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {}
 
 export interface DataCellType
   extends React.ForwardRefExoticComponent<

package/src/table/HeaderCell.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, useContext } from "react";
 import cl from "classnames";
 import { Label, TableContext } from "..";
 
-interface HeaderCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
+interface HeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
   scope?: string;
 }
 

package/src/table/Table.tsx

@@ -6,7 +6,8 @@ import Row, { RowType } from "./Row";
 import HeaderCell, { HeaderCellType } from "./HeaderCell";
 import DataCell, { DataCellType } from "./DataCell";
 
-export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
+export interface TableProps
+  extends React.TableHTMLAttributes<HTMLTableElement> {
   /**
    * Changes padding
    * @default "medium"

package/src/toggle-group/ToggleGroup.stories.tsx

@@ -0,0 +1,111 @@
+import React, { useState } from "react";
+import { Attachment, Hamburger, Star, System } from "@navikt/ds-icons";
+import { ToggleGroup } from "../index";
+import { Meta } from "@storybook/react/types-6-0";
+export default {
+  title: "ds-react/toggle-group",
+  component: ToggleGroup,
+  parameters: {
+    chromatic: { disable: true },
+  },
+} as Meta;
+
+const Items = (icon?: boolean, both?: boolean) => (
+  <>
+    <ToggleGroup.Item value="first">
+      {both ? (
+        <>
+          <Hamburger /> First
+        </>
+      ) : (
+        <>{icon ? <Hamburger /> : "First"}</>
+      )}
+    </ToggleGroup.Item>
+    <ToggleGroup.Item value="second">
+      {both ? (
+        <>
+          <Star /> Second more txt
+        </>
+      ) : (
+        <>{icon ? <Star /> : "Second more txt"}</>
+      )}
+    </ToggleGroup.Item>
+    <ToggleGroup.Item value="third">
+      {both ? (
+        <>
+          <Attachment /> Thrid
+        </>
+      ) : (
+        <>{icon ? <Attachment /> : "Third"}</>
+      )}
+    </ToggleGroup.Item>
+    <ToggleGroup.Item value="fourth">
+      {both ? (
+        <>
+          <System /> Fourth
+        </>
+      ) : (
+        <>{icon ? <System /> : "Fourth"}</>
+      )}
+    </ToggleGroup.Item>
+  </>
+);
+
+export const All = () => {
+  const [activeValue, setActiveValue] = useState("first");
+
+  return (
+    <div>
+      <h2>ToggleGroup</h2>
+      <h3>{activeValue}</h3>
+      <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+        <ToggleGroup value={activeValue} onChange={setActiveValue}>
+          {Items()}
+        </ToggleGroup>
+        <ToggleGroup value={activeValue} onChange={setActiveValue}>
+          {Items(true)}
+        </ToggleGroup>
+        <ToggleGroup value={activeValue} onChange={setActiveValue}>
+          {Items(true, true)}
+        </ToggleGroup>
+      </div>
+      <h2>ToggleGroup Small</h2>
+      <h3>{activeValue}</h3>
+      <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+        <ToggleGroup size="small" value={activeValue} onChange={setActiveValue}>
+          {Items()}
+        </ToggleGroup>
+        <ToggleGroup size="small" value={activeValue} onChange={setActiveValue}>
+          {Items(true)}
+        </ToggleGroup>
+        <ToggleGroup size="small" value={activeValue} onChange={setActiveValue}>
+          {Items(true, true)}
+        </ToggleGroup>
+      </div>
+      <h2>ToggleGroup label</h2>
+      <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+        <ToggleGroup
+          label="Label msg"
+          value={activeValue}
+          onChange={setActiveValue}
+        >
+          {Items()}
+        </ToggleGroup>
+        <ToggleGroup
+          label="Label msg"
+          value={activeValue}
+          onChange={setActiveValue}
+          aria-describedby="demo-id"
+        >
+          {Items()}
+        </ToggleGroup>
+      </div>
+      <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+        <h2>Uncontrolled</h2>
+        <ToggleGroup onChange={setActiveValue} defaultValue="second">
+          {Items()}
+        </ToggleGroup>
+      </div>
+    </div>
+  );
+};

package/src/toggle-group/ToggleGroup.tsx

@@ -0,0 +1,131 @@
+import cl from "classnames";
+import React, {
+  createContext,
+  forwardRef,
+  HTMLAttributes,
+  useState,
+} from "react";
+import ToggleItem, { ToggleItemType } from "./ToggleItem";
+import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
+import { Label, useId } from "..";
+
+export interface ToggleGroupProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "dir"> {
+  /**
+   * Toggles.Item elements
+   */
+  children: React.ReactNode;
+  /**
+   * Changes padding and font-size
+   * @default "medium"
+   */
+  size?: "medium" | "small";
+  /**
+   * Controlled selected value
+   */
+  value?: string;
+  /**
+   * If not controlled, a default-value needs to be set
+   */
+  defaultValue?: string;
+  /**
+   * Returns elements that wants to be active
+   */
+  onChange: (value: string) => void;
+  /**
+   * Label describing ToggleGroup
+   */
+  label?: React.ReactNode;
+}
+
+interface ToggleGroupComponent
+  extends React.ForwardRefExoticComponent<
+    ToggleGroupProps & React.RefAttributes<HTMLDivElement>
+  > {
+  Item: ToggleItemType;
+}
+
+interface ToggleContextProps {
+  size: "medium" | "small";
+}
+
+export const ToggleGroupContext = createContext<ToggleContextProps | null>(
+  null
+);
+
+const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
+  (
+    {
+      className,
+      children,
+      onChange,
+      size = "medium",
+      label,
+      value,
+      defaultValue,
+      id,
+      "aria-describedby": desc,
+      ...rest
+    },
+    ref
+  ) => {
+    const [groupValue, setGroupValue] = useState(defaultValue);
+    const labelId = `toggle-group-label-${useId()}`;
+
+    const handleValueChange = (v: string) => {
+      if (v !== "") {
+        setGroupValue(v);
+        onChange?.(v);
+      }
+    };
+
+    if (!value && !defaultValue) {
+      console.error("ToggleGroup without value/defaultvalue is not allowed");
+    }
+
+    const describeBy = cl({
+      [desc ?? ""]: !!desc,
+      [labelId]: !!label,
+    });
+
+    return (
+      <ToggleGroupContext.Provider
+        value={{
+          size,
+        }}
+      >
+        <div>
+          {label && (
+            <Label
+              size={size}
+              className="navds-toggle-group__label"
+              id={labelId}
+            >
+              {label}
+            </Label>
+          )}
+          <RadixToggleGroup.Root
+            {...rest}
+            onValueChange={handleValueChange}
+            value={value ?? groupValue}
+            defaultValue={defaultValue}
+            ref={ref}
+            className={cl(
+              "navds-toggle-group",
+              className,
+              `navds-toggle-group--${size}`
+            )}
+            {...(describeBy && { "aria-describedby": describeBy })}
+            type="single"
+          >
+            {children}
+          </RadixToggleGroup.Root>
+        </div>
+      </ToggleGroupContext.Provider>
+    );
+  }
+) as ToggleGroupComponent;
+
+ToggleGroup.Item = ToggleItem;
+
+export default ToggleGroup;

package/src/toggle-group/ToggleItem.tsx

@@ -0,0 +1,45 @@
+import React, { forwardRef, useContext } from "react";
+import cl from "classnames";
+import { Label } from "..";
+import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
+import { ToggleGroupContext } from "./ToggleGroup";
+
+export interface ToggleItemProps
+  extends React.HTMLAttributes<HTMLButtonElement> {
+  /**
+   * Content
+   */
+  children: React.ReactNode;
+  /**
+   * Value for state-handling
+   */
+  value: string;
+}
+
+export type ToggleItemType = React.ForwardRefExoticComponent<
+  ToggleItemProps & React.RefAttributes<HTMLButtonElement>
+>;
+
+const ToggleItem = forwardRef<HTMLButtonElement, ToggleItemProps>(
+  ({ className, children, ...rest }, ref) => {
+    const context = useContext(ToggleGroupContext);
+
+    return (
+      <RadixToggleGroup.Item
+        {...rest}
+        ref={ref}
+        className={cl("navds-toggle-group__button", className)}
+      >
+        <Label
+          as="span"
+          className="navds-toggle-group__button-inner"
+          size={context?.size}
+        >
+          {children}
+        </Label>
+      </RadixToggleGroup.Item>
+    );
+  }
+) as ToggleItemType;
+
+export default ToggleItem;

package/src/toggle-group/index.ts

@@ -0,0 +1,2 @@
+export { default as ToggleGroup } from "./ToggleGroup";
+export { ToggleGroupProps } from "./ToggleGroup";