@navikt/ds-react 6.4.1 → 6.5.0

package/cjs/tabs/parts/tablist/TabList.js

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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.TabList = void 0;
+/* eslint-disable jsx-a11y/interactive-supports-focus */
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
+const composeEventHandlers_1 = require("../../../util/composeEventHandlers");
+const useMergeRefs_1 = require("../../../util/hooks/useMergeRefs");
+const ScrollButtons_1 = __importDefault(require("./ScrollButtons"));
+const useScrollButtons_1 = require("./useScrollButtons");
+const useTabList_1 = require("./useTabList");
+exports.TabList = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, onKeyDown } = _a, rest = __rest(_a, ["className", "onKeyDown"]);
+    const { onKeyDown: _onKeyDown } = (0, useTabList_1.useTabList)();
+    const listRef = (0, react_1.useRef)(null);
+    const mergedRef = (0, useMergeRefs_1.useMergeRefs)(listRef, ref);
+    const scrollCtx = (0, useScrollButtons_1.useScrollButtons)(listRef);
+    return (react_1.default.createElement("div", { className: "navds-tabs__tablist-wrapper" },
+        scrollCtx.show && (react_1.default.createElement(ScrollButtons_1.default, { dir: "left", hidden: !scrollCtx.start, onClick: scrollCtx.scrollLeft })),
+        react_1.default.createElement("div", Object.assign({ ref: mergedRef }, rest, { onScroll: scrollCtx.update, className: (0, clsx_1.default)("navds-tabs__tablist", className), role: "tablist", "aria-orientation": "horizontal", onKeyDown: (0, composeEventHandlers_1.composeEventHandlers)(onKeyDown, _onKeyDown) })),
+        scrollCtx.show && (react_1.default.createElement(ScrollButtons_1.default, { dir: "right", hidden: !scrollCtx.end, onClick: scrollCtx.scrollRight }))));
+});
+exports.default = exports.TabList;
+//# sourceMappingURL=TabList.js.map

package/cjs/tabs/parts/tablist/TabList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.js","sourceRoot":"","sources":["../../../../src/tabs/parts/tablist/TabList.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wDAAwD;AACxD,gDAAsB;AACtB,+CAAkD;AAClD,6EAA0E;AAC1E,mEAAgE;AAChE,oEAA2C;AAC3C,yDAAsD;AACtD,6CAA0C;AAS7B,QAAA,OAAO,GAAG,IAAA,kBAAU,EAC/B,CAAC,EAAiC,EAAE,GAAG,EAAE,EAAE;QAA1C,EAAE,SAAS,EAAE,SAAS,OAAW,EAAN,IAAI,cAA/B,0BAAiC,CAAF;IAC9B,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,IAAA,uBAAU,GAAE,CAAC;IAE/C,MAAM,OAAO,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAC7C,MAAM,SAAS,GAAG,IAAA,2BAAY,EAAC,OAAO,EAAE,GAAG,CAAC,CAAC;IAE7C,MAAM,SAAS,GAAG,IAAA,mCAAgB,EAAC,OAAO,CAAC,CAAC;IAE5C,OAAO,CACL,uCAAK,SAAS,EAAC,6BAA6B;QACzC,SAAS,CAAC,IAAI,IAAI,CACjB,8BAAC,uBAAY,IACX,GAAG,EAAC,MAAM,EACV,MAAM,EAAE,CAAC,SAAS,CAAC,KAAK,EACxB,OAAO,EAAE,SAAS,CAAC,UAAU,GAC7B,CACH;QACD,qDACE,GAAG,EAAE,SAAS,IACV,IAAI,IACR,QAAQ,EAAE,SAAS,CAAC,MAAM,EAC1B,SAAS,EAAE,IAAA,cAAE,EAAC,qBAAqB,EAAE,SAAS,CAAC,EAC/C,IAAI,EAAC,SAAS,sBACG,YAAY,EAC7B,SAAS,EAAE,IAAA,2CAAoB,EAAC,SAAS,EAAE,UAAU,CAAC,IACtD;QACD,SAAS,CAAC,IAAI,IAAI,CACjB,8BAAC,uBAAY,IACX,GAAG,EAAC,OAAO,EACX,MAAM,EAAE,CAAC,SAAS,CAAC,GAAG,EACtB,OAAO,EAAE,SAAS,CAAC,WAAW,GAC9B,CACH,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAe,eAAO,CAAC"}

package/cjs/tabs/parts/tablist/useScrollButtons.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare function useScrollButtons(listRef: React.RefObject<HTMLDivElement>): {
+    update: {
+        (this: any, ...args: any[]): void;
+        clear(): void;
+    };
+    start: boolean;
+    end: boolean;
+    show: boolean;
+    scrollLeft: () => void;
+    scrollRight: () => void;
+};

package/cjs/tabs/parts/tablist/useScrollButtons.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScrollButtons = void 0;
+const react_1 = require("react");
+const util_1 = require("../../../util");
+function useScrollButtons(listRef) {
+    const [displayScroll, setDisplayScroll] = (0, react_1.useState)({
+        start: false,
+        end: false,
+    });
+    const updateScrollButtonState = (0, react_1.useMemo)(() => (0, util_1.debounce)(() => {
+        if (!(listRef === null || listRef === void 0 ? void 0 : listRef.current))
+            return;
+        const { scrollWidth, clientWidth } = listRef.current;
+        const scrollLeft = listRef.current.scrollLeft;
+        // use 1 for the potential rounding error with browser zooms.
+        const showStartScroll = scrollLeft > 1;
+        const showEndScroll = scrollLeft < scrollWidth - clientWidth - 1;
+        setDisplayScroll((oldDisplayScroll) => showStartScroll === oldDisplayScroll.start &&
+            showEndScroll === oldDisplayScroll.end
+            ? oldDisplayScroll
+            : { start: showStartScroll, end: showEndScroll });
+    }), [listRef]);
+    (0, react_1.useEffect)(() => {
+        var _a, _b, _c;
+        const handleResize = () => updateScrollButtonState();
+        const win = (_c = (_b = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) !== null && _b !== void 0 ? _b : document) !== null && _c !== void 0 ? _c : window;
+        win.addEventListener("resize", handleResize);
+        let resizeObserver;
+        if (typeof ResizeObserver !== "undefined") {
+            resizeObserver = new ResizeObserver(handleResize);
+            resizeObserver.observe(listRef.current);
+        }
+        return () => {
+            win.removeEventListener("resize", handleResize);
+            resizeObserver && resizeObserver.disconnect();
+            updateScrollButtonState.clear();
+        };
+    }, [listRef, updateScrollButtonState]);
+    (0, react_1.useEffect)(() => {
+        updateScrollButtonState();
+    });
+    return {
+        update: updateScrollButtonState,
+        start: displayScroll.start,
+        end: displayScroll.end,
+        show: displayScroll.end || displayScroll.start,
+        scrollLeft: () => {
+            if (listRef.current) {
+                listRef.current.scrollLeft -= 100;
+            }
+        },
+        scrollRight: () => {
+            if (listRef.current) {
+                listRef.current.scrollLeft += 100;
+            }
+        },
+    };
+}
+exports.useScrollButtons = useScrollButtons;
+//# sourceMappingURL=useScrollButtons.js.map

package/cjs/tabs/parts/tablist/useScrollButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollButtons.js","sourceRoot":"","sources":["../../../../src/tabs/parts/tablist/useScrollButtons.ts"],"names":[],"mappings":";;;AAAA,iCAAqD;AACrD,wCAAyC;AAEzC,SAAgB,gBAAgB,CAAC,OAAwC;IACvE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAC;QACjD,KAAK,EAAE,KAAK;QACZ,GAAG,EAAE,KAAK;KACX,CAAC,CAAC;IAEH,MAAM,uBAAuB,GAAG,IAAA,eAAO,EACrC,GAAG,EAAE,CACH,IAAA,eAAQ,EAAC,GAAG,EAAE;QACZ,IAAI,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAA;YAAE,OAAO;QAC9B,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,OAAO,CAAC,OAAO,CAAC;QACrD,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC;QAC9C,6DAA6D;QAC7D,MAAM,eAAe,GAAG,UAAU,GAAG,CAAC,CAAC;QACvC,MAAM,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,CAAC,CAAC;QAEjE,gBAAgB,CAAC,CAAC,gBAAgB,EAAE,EAAE,CACpC,eAAe,KAAK,gBAAgB,CAAC,KAAK;YAC1C,aAAa,KAAK,gBAAgB,CAAC,GAAG;YACpC,CAAC,CAAC,gBAAgB;YAClB,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,GAAG,EAAE,aAAa,EAAE,CACnD,CAAC;IACJ,CAAC,CAAC,EACJ,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;;QACb,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,uBAAuB,EAAE,CAAC;QACrD,MAAM,GAAG,GAAG,MAAA,MAAA,MAAA,OAAO,CAAC,OAAO,0CAAE,aAAa,mCAAI,QAAQ,mCAAI,MAAM,CAAC;QACjE,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAE7C,IAAI,cAAc,CAAC;QAEnB,IAAI,OAAO,cAAc,KAAK,WAAW,EAAE,CAAC;YAC1C,cAAc,GAAG,IAAI,cAAc,CAAC,YAAY,CAAC,CAAC;YAClD,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAC1C,CAAC;QAED,OAAO,GAAG,EAAE;YACV,GAAG,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YAChD,cAAc,IAAI,cAAc,CAAC,UAAU,EAAE,CAAC;YAC9C,uBAAuB,CAAC,KAAK,EAAE,CAAC;QAClC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,uBAAuB,CAAC,CAAC,CAAC;IAEvC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,uBAAuB,EAAE,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,OAAO;QACL,MAAM,EAAE,uBAAuB;QAC/B,KAAK,EAAE,aAAa,CAAC,KAAK;QAC1B,GAAG,EAAE,aAAa,CAAC,GAAG;QACtB,IAAI,EAAE,aAAa,CAAC,GAAG,IAAI,aAAa,CAAC,KAAK;QAC9C,UAAU,EAAE,GAAG,EAAE;YACf,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;gBACpB,OAAO,CAAC,OAAO,CAAC,UAAU,IAAI,GAAG,CAAC;YACpC,CAAC;QACH,CAAC;QACD,WAAW,EAAE,GAAG,EAAE;YAChB,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;gBACpB,OAAO,CAAC,OAAO,CAAC,UAAU,IAAI,GAAG,CAAC;YACpC,CAAC;QACH,CAAC;KACF,CAAC;AACJ,CAAC;AAjED,4CAiEC"}

package/cjs/tabs/parts/tablist/useTabList.d.ts

@@ -0,0 +1,7 @@
+/**
+ * TabList hook to manage multiple tab buttons,
+ * and ensures only one tab is selected at a time.
+ */
+export declare function useTabList(): {
+    onKeyDown: (event: React.KeyboardEvent) => void;
+};

package/cjs/tabs/parts/tablist/useTabList.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTabList = void 0;
+const react_1 = require("react");
+const Tabs_context_1 = require("../../Tabs.context");
+/**
+ * TabList hook to manage multiple tab buttons,
+ * and ensures only one tab is selected at a time.
+ */
+function useTabList() {
+    const { focusedValue, loop, selectedValue, setFocusedValue } = (0, Tabs_context_1.useTabsContext)();
+    const descendants = (0, Tabs_context_1.useTabsDescendantsContext)();
+    /**
+     * Implements rowing-tabindex for horizontal tabs
+     */
+    const onKeyDown = (0, react_1.useCallback)((event) => {
+        /**
+         * Tabs.Tab is registered with its prop 'value'.
+         * We can then use it to find the current focuses descendant
+         */
+        const idx = descendants
+            .values()
+            .findIndex((x) => x.value === focusedValue);
+        const nextTab = () => {
+            var _a;
+            const next = descendants.nextEnabled(idx, loop);
+            next && ((_a = next.node) === null || _a === void 0 ? void 0 : _a.focus());
+        };
+        const prevTab = () => {
+            var _a;
+            const prev = descendants.prevEnabled(idx, loop);
+            prev && ((_a = prev.node) === null || _a === void 0 ? void 0 : _a.focus());
+        };
+        const firstTab = () => {
+            var _a;
+            const first = descendants.firstEnabled();
+            first && ((_a = first.node) === null || _a === void 0 ? void 0 : _a.focus());
+        };
+        const lastTab = () => {
+            var _a;
+            const last = descendants.lastEnabled();
+            last && ((_a = last.node) === null || _a === void 0 ? void 0 : _a.focus());
+        };
+        const keyMap = {
+            ArrowLeft: prevTab,
+            ArrowRight: nextTab,
+            Home: firstTab,
+            End: lastTab,
+        };
+        const action = keyMap[event.key];
+        if (action) {
+            event.preventDefault();
+            action(event);
+        }
+        else if (event.key === "Tab") {
+            /**
+             * Imperative focus during keydown is risky so we prevent React's batching updates
+             * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332
+             */
+            selectedValue && setTimeout(() => setFocusedValue(selectedValue));
+        }
+    }, [descendants, focusedValue, loop, selectedValue, setFocusedValue]);
+    return { onKeyDown };
+}
+exports.useTabList = useTabList;
+//# sourceMappingURL=useTabList.js.map

package/cjs/tabs/parts/tablist/useTabList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabList.js","sourceRoot":"","sources":["../../../../src/tabs/parts/tablist/useTabList.ts"],"names":[],"mappings":";;;AAAA,iCAAoC;AACpC,qDAA+E;AAE/E;;;GAGG;AACH,SAAgB,UAAU;IACxB,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,aAAa,EAAE,eAAe,EAAE,GAC1D,IAAA,6BAAc,GAAE,CAAC;IAEnB,MAAM,WAAW,GAAG,IAAA,wCAAyB,GAAE,CAAC;IAEhD;;OAEG;IACH,MAAM,SAAS,GAAG,IAAA,mBAAW,EAC3B,CAAC,KAA0B,EAAE,EAAE;QAC7B;;;WAGG;QACH,MAAM,GAAG,GAAG,WAAW;aACpB,MAAM,EAAE;aACR,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,YAAY,CAAC,CAAC;QAE9C,MAAM,OAAO,GAAG,GAAG,EAAE;;YACnB,MAAM,IAAI,GAAG,WAAW,CAAC,WAAW,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;YAChD,IAAI,KAAI,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,EAAE,CAAA,CAAC;QAC7B,CAAC,CAAC;QACF,MAAM,OAAO,GAAG,GAAG,EAAE;;YACnB,MAAM,IAAI,GAAG,WAAW,CAAC,WAAW,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;YAChD,IAAI,KAAI,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,EAAE,CAAA,CAAC;QAC7B,CAAC,CAAC;QACF,MAAM,QAAQ,GAAG,GAAG,EAAE;;YACpB,MAAM,KAAK,GAAG,WAAW,CAAC,YAAY,EAAE,CAAC;YACzC,KAAK,KAAI,MAAA,KAAK,CAAC,IAAI,0CAAE,KAAK,EAAE,CAAA,CAAC;QAC/B,CAAC,CAAC;QACF,MAAM,OAAO,GAAG,GAAG,EAAE;;YACnB,MAAM,IAAI,GAAG,WAAW,CAAC,WAAW,EAAE,CAAC;YACvC,IAAI,KAAI,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,EAAE,CAAA,CAAC;QAC7B,CAAC,CAAC;QAEF,MAAM,MAAM,GAA+C;YACzD,SAAS,EAAE,OAAO;YAClB,UAAU,EAAE,OAAO;YACnB,IAAI,EAAE,QAAQ;YACd,GAAG,EAAE,OAAO;SACb,CAAC;QAEF,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAEjC,IAAI,MAAM,EAAE,CAAC;YACX,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,MAAM,CAAC,KAAK,CAAC,CAAC;QAChB,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;YAC/B;;;eAGG;YACH,aAAa,IAAI,UAAU,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC,CAAC;QACpE,CAAC;IACH,CAAC,EACD,CAAC,WAAW,EAAE,YAAY,EAAE,IAAI,EAAE,aAAa,EAAE,eAAe,CAAC,CAClE,CAAC;IAEF,OAAO,EAAE,SAAS,EAAE,CAAC;AACvB,CAAC;AA5DD,gCA4DC"}

package/cjs/tabs/parts/tabpanel/TabPanel.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Tab panel content.
+     */
+    children: React.ReactNode;
+    /**
+     * Value for state-handling.
+     */
+    value: string;
+    /**
+     * If true, will only render children when selected.
+     * @default true
+     */
+    lazy?: boolean;
+    /**
+     * Overrides auto-generated id.
+     *
+     * **Warning**: TabPanel generates an id if not provided. If you need to override it,
+     * make sure to also include the correct `aria-labelledby` id for the Tab that labels it.
+     */
+    id?: string;
+}
+declare const TabPanel: React.ForwardRefExoticComponent<TabPanelProps & React.RefAttributes<HTMLDivElement>>;
+export default TabPanel;

package/cjs/tabs/{TabPanel.js → parts/tabpanel/TabPanel.js}

@@ -37,12 +37,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const RadixTabs = __importStar(require("@radix-ui/react-tabs"));
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
+const useTabPanel_1 = require("./useTabPanel");
 const TabPanel = (0, react_1.forwardRef)((_a, ref) => {
-    var { className } = _a, rest = __rest(_a, ["className"]);
-    return (react_1.default.createElement(RadixTabs.TabsContent, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-tabs__tabpanel", className) })));
+    var _b;
+    var { className, value, children, lazy = true, id } = _a, rest = __rest(_a, ["className", "value", "children", "lazy", "id"]);
+    const ctx = (0, useTabPanel_1.useTabPanel)({ value });
+    return (react_1.default.createElement("div", Object.assign({ ref: ref }, rest, { className: (0, clsx_1.default)("navds-tabs__tabpanel", className), role: "tabpanel", tabIndex: 0, "aria-labelledby": (_b = rest["aria-labelledby"]) !== null && _b !== void 0 ? _b : ctx.labelledbyId, id: id !== null && id !== void 0 ? id : ctx.id, hidden: ctx.hidden, "data-state": !ctx.hidden ? "active" : "inactive" }), lazy && ctx.hidden ? null : children));
 });
 exports.default = TabPanel;
 //# sourceMappingURL=TabPanel.js.map

package/cjs/tabs/parts/tabpanel/TabPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../../../src/tabs/parts/tabpanel/TabPanel.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;AAC1C,+CAA4C;AAyB5C,MAAM,QAAQ,GAAG,IAAA,kBAAU,EACzB,CAAC,EAAwD,EAAE,GAAG,EAAE,EAAE;;QAAjE,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,GAAG,IAAI,EAAE,EAAE,OAAW,EAAN,IAAI,cAAtD,gDAAwD,CAAF;IACrD,MAAM,GAAG,GAAG,IAAA,yBAAW,EAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAEnC,OAAO,CACL,qDACE,GAAG,EAAE,GAAG,IACJ,IAAI,IACR,SAAS,EAAE,IAAA,cAAE,EAAC,sBAAsB,EAAE,SAAS,CAAC,EAChD,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,qBACM,MAAA,IAAI,CAAC,iBAAiB,CAAC,mCAAI,GAAG,CAAC,YAAY,EAC5D,EAAE,EAAE,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,GAAG,CAAC,EAAE,EAChB,MAAM,EAAE,GAAG,CAAC,MAAM,gBACN,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,KAE9C,IAAI,IAAI,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CACjC,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAe,QAAQ,CAAC"}

package/cjs/tabs/parts/tabpanel/useTabPanel.d.ts

@@ -0,0 +1,12 @@
+type TabPanelProps = {
+    value: string;
+};
+/**
+ * Tabs hook for managing the visible/hidden state of Tabs.Panel
+ */
+export declare function useTabPanel({ value }: TabPanelProps): {
+    labelledbyId: string;
+    hidden: boolean;
+    id: string;
+};
+export {};

package/cjs/tabs/parts/tabpanel/useTabPanel.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTabPanel = void 0;
+const Tabs_context_1 = require("../../Tabs.context");
+/**
+ * Tabs hook for managing the visible/hidden state of Tabs.Panel
+ */
+function useTabPanel({ value }) {
+    const { id, selectedValue, makeTabId, makeTabPanelId } = (0, Tabs_context_1.useTabsContext)();
+    return {
+        labelledbyId: makeTabId(id, value),
+        hidden: selectedValue !== value,
+        id: makeTabPanelId(id, value),
+    };
+}
+exports.useTabPanel = useTabPanel;
+//# sourceMappingURL=useTabPanel.js.map

package/cjs/tabs/parts/tabpanel/useTabPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabPanel.js","sourceRoot":"","sources":["../../../../src/tabs/parts/tabpanel/useTabPanel.ts"],"names":[],"mappings":";;;AAAA,qDAAoD;AAMpD;;GAEG;AACH,SAAgB,WAAW,CAAC,EAAE,KAAK,EAAiB;IAClD,MAAM,EAAE,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,IAAA,6BAAc,GAAE,CAAC;IAE1E,OAAO;QACL,YAAY,EAAE,SAAS,CAAC,EAAE,EAAE,KAAK,CAAC;QAClC,MAAM,EAAE,aAAa,KAAK,KAAK;QAC/B,EAAE,EAAE,cAAc,CAAC,EAAE,EAAE,KAAK,CAAC;KAC9B,CAAC;AACJ,CAAC;AARD,kCAQC"}

package/cjs/tabs/useTabs.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { TabsProps } from "./Tabs.types";
+export declare function useTabs({ onChange, value, defaultValue, id, }: Pick<TabsProps, "onChange" | "value" | "defaultValue" | "id">): {
+    id: string;
+    selectedValue: string;
+    setSelectedValue: (next: import("react").SetStateAction<string>) => void;
+    focusedValue: string;
+    setFocusedValue: import("react").Dispatch<import("react").SetStateAction<string>>;
+    makeTabId: typeof makeTabId;
+    makeTabPanelId: typeof makeTabPanelId;
+};
+declare function makeTabId(id: string, value: string): string;
+declare function makeTabPanelId(id: string, value: string): string;
+export {};

package/cjs/tabs/useTabs.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTabs = void 0;
+const react_1 = require("react");
+const util_1 = require("../util");
+const useControllableState_1 = require("../util/hooks/useControllableState");
+function useTabs({ onChange, value, defaultValue = "", id, }) {
+    const [focusedValue, setFocusedValue] = (0, react_1.useState)(defaultValue);
+    const [selectedValue, setSelectedValue] = (0, useControllableState_1.useControllableState)({
+        defaultValue,
+        value,
+        onChange,
+    });
+    /**
+     * Sync focused `value` with controlled `selectedValue`
+     */
+    (0, react_1.useEffect)(() => {
+        if (value != null) {
+            setFocusedValue(value);
+        }
+    }, [value]);
+    /**
+     * Scope ids for better tracking
+     */
+    const uuid = (0, util_1.useId)();
+    return {
+        id: `tabs-${id !== null && id !== void 0 ? id : uuid}`,
+        selectedValue,
+        setSelectedValue,
+        focusedValue,
+        setFocusedValue,
+        makeTabId,
+        makeTabPanelId,
+    };
+}
+exports.useTabs = useTabs;
+function makeTabId(id, value) {
+    return `${id}--tab-${value}`;
+}
+function makeTabPanelId(id, value) {
+    return `${id}--tabpanel-${value}`;
+}
+//# sourceMappingURL=useTabs.js.map

package/cjs/tabs/useTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabs.js","sourceRoot":"","sources":["../../src/tabs/useTabs.ts"],"names":[],"mappings":";;;AAAA,iCAA4C;AAC5C,kCAAgC;AAChC,6EAA0E;AAG1E,SAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,YAAY,GAAG,EAAE,EACjB,EAAE,GAC4D;IAC9D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAC,YAAY,CAAC,CAAC;IAE/D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,2CAAoB,EAAC;QAC7D,YAAY;QACZ,KAAK;QACL,QAAQ;KACT,CAAC,CAAC;IAEH;;OAEG;IACH,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAK,IAAI,IAAI,EAAE,CAAC;YAClB,eAAe,CAAC,KAAK,CAAC,CAAC;QACzB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ;;OAEG;IACH,MAAM,IAAI,GAAG,IAAA,YAAK,GAAE,CAAC;IAErB,OAAO;QACL,EAAE,EAAE,QAAQ,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,IAAI,EAAE;QACxB,aAAa;QACb,gBAAgB;QAChB,YAAY;QACZ,eAAe;QACf,SAAS;QACT,cAAc;KACf,CAAC;AACJ,CAAC;AArCD,0BAqCC;AAED,SAAS,SAAS,CAAC,EAAU,EAAE,KAAa;IAC1C,OAAO,GAAG,EAAE,SAAS,KAAK,EAAE,CAAC;AAC/B,CAAC;AAED,SAAS,cAAc,CAAC,EAAU,EAAE,KAAa;IAC/C,OAAO,GAAG,EAAE,cAAc,KAAK,EAAE,CAAC;AACpC,CAAC"}

package/cjs/toggle-group/ToggleGroup.context.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { ToggleGroupProps } from "./ToggleGroup.types";
+import { useToggleGroup } from "./useToggleGroup";
+interface ToggleContextProps {
+    size: "medium" | "small";
+}
+export declare const ToggleGroupContext: import("react").Context<ToggleContextProps | null>;
+export declare const ToggleGroupDescendantsProvider: import("react").Provider<import("../util/hooks/descendants/descendant").DescendantsManager<HTMLButtonElement, {
+    value: string;
+}>>, useToggleGroupDescendantsContext: () => import("../util/hooks/descendants/descendant").DescendantsManager<HTMLButtonElement, {
+    value: string;
+}>, useToggleGroupDescendants: () => import("../util/hooks/descendants/descendant").DescendantsManager<HTMLButtonElement, {
+    value: string;
+}>, useToggleGroupDescendant: (options?: import("../util/hooks/descendants/descendant").DescendantOptions<{
+    value: string;
+}> | undefined) => {
+    descendants: import("../util/hooks/descendants/descendant").DescendantsManager<HTMLElement, Record<string, any>>;
+    index: number;
+    enabledIndex: number;
+    register: (instance: HTMLButtonElement | null) => void;
+};
+type ToggleGroupProviderProps = ReturnType<typeof useToggleGroup> & Pick<ToggleGroupProps, "size">;
+export declare const ToggleGroupProvider: import("react").ForwardRefExoticComponent<{
+    selectedValue: string;
+    setSelectedValue: (next: import("react").SetStateAction<string>) => void;
+    focusedValue: string;
+    setFocusedValue: import("react").Dispatch<import("react").SetStateAction<string>>;
+} & Pick<ToggleGroupProps, "size"> & {
+    children: import("react").ReactNode;
+} & import("react").RefAttributes<unknown>>, useToggleGroupContext: <S extends boolean = true>(strict?: S) => S extends true ? ToggleGroupProviderProps : ToggleGroupProviderProps | undefined;
+export {};

package/cjs/toggle-group/ToggleGroup.context.js

@@ -0,0 +1,16 @@
+"use strict";
+var _a, _b;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToggleGroupContext = exports.ToggleGroupProvider = exports.useToggleGroupDescendant = exports.useToggleGroupDescendants = exports.useToggleGroupDescendantsContext = exports.ToggleGroupDescendantsProvider = exports.ToggleGroupContext = void 0;
+const react_1 = require("react");
+const create_context_1 = require("../util/create-context");
+const useDescendant_1 = require("../util/hooks/descendants/useDescendant");
+exports.ToggleGroupContext = (0, react_1.createContext)(null);
+_a = (0, useDescendant_1.createDescendantContext)(), exports.ToggleGroupDescendantsProvider = _a[0], exports.useToggleGroupDescendantsContext = _a[1], exports.useToggleGroupDescendants = _a[2], exports.useToggleGroupDescendant = _a[3];
+/* State context */
+_b = (0, create_context_1.createContext)({
+    name: "ToggleGroupContext",
+    hookName: "useToggleGroupContext",
+    providerName: "ToggleGroupProvider",
+}), exports.ToggleGroupProvider = _b[0], exports.useToggleGroupContext = _b[1];
+//# sourceMappingURL=ToggleGroup.context.js.map

package/cjs/toggle-group/ToggleGroup.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.context.js","sourceRoot":"","sources":["../../src/toggle-group/ToggleGroup.context.ts"],"names":[],"mappings":";;;;AAAA,iCAA4D;AAC5D,2DAAuD;AACvD,2EAAkF;AAQrE,QAAA,kBAAkB,GAAG,IAAA,qBAAkB,EAClD,IAAI,CACL,CAAC;AAEW,KAKT,IAAA,uCAAuB,GAAwC,EAJjE,sCAA8B,UAC9B,wCAAgC,UAChC,iCAAyB,UACzB,gCAAwB,SAC0C;AAKpE,mBAAmB;AACN,KACX,IAAA,8BAAa,EAA2B;IACtC,IAAI,EAAE,oBAAoB;IAC1B,QAAQ,EAAE,uBAAuB;IACjC,YAAY,EAAE,qBAAqB;CACpC,CAAC,EALU,2BAAmB,UAAE,6BAAqB,SAKnD"}

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

@@ -1,42 +1,11 @@
-import React, { HTMLAttributes } from "react";
-import { ToggleGroupItemProps } 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;
-    /**
-     * Callback for selected toggle
-     */
-    onChange: (value: string) => void;
-    /**
-     * Label describing ToggleGroup
-     */
-    label?: React.ReactNode;
-    /**
-     * Changes design and interaction-visuals
-     * @default "action"
-     */
-    variant?: "action" | "neutral";
-}
+import React from "react";
+import { ToggleGroupProps } from "./ToggleGroup.types";
+import ToggleItem from "./parts/ToggleItem";
 interface ToggleGroupComponent extends React.ForwardRefExoticComponent<ToggleGroupProps & React.RefAttributes<HTMLDivElement>> {
     /**
-     * @see 🏷️ {@link ToggleGroupItemProps}
+     * @see 🏷️ {@link ToggleItem}
      */
-    Item: React.ForwardRefExoticComponent<ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>>;
+    Item: typeof ToggleItem;
 }
 /**
  * A component that displays a group of toggle buttons.

package/cjs/toggle-group/ToggleGroup.js

@@ -38,13 +38,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToggleGroup = void 0;
-const RadixToggleGroup = __importStar(require("@radix-ui/react-toggle-group"));
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const typography_1 = require("../typography");
-const hooks_1 = require("../util/hooks");
-const ToggleItem_1 = __importDefault(require("./ToggleItem"));
-const context_1 = require("./context");
+const util_1 = require("../util");
+const ToggleGroup_context_1 = require("./ToggleGroup.context");
+const ToggleItem_1 = __importDefault(require("./parts/ToggleItem"));
+const useToggleGroup_1 = require("./useToggleGroup");
 /**
  * A component that displays a group of toggle buttons.
  *
@@ -61,31 +61,31 @@ const context_1 = require("./context");
  * ```
  */
 exports.ToggleGroup = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, children, onChange, size = "medium", label, value, defaultValue, "aria-describedby": desc, variant = "action" } = _a, rest = __rest(_a, ["className", "children", "onChange", "size", "label", "value", "defaultValue", "aria-describedby", "variant"]);
-    const [groupValue, setGroupValue] = (0, react_1.useState)(defaultValue);
-    const labelId = (0, hooks_1.useId)();
-    const handleValueChange = (v) => {
-        if (v !== "") {
-            setGroupValue(v);
-            onChange === null || onChange === void 0 ? void 0 : onChange(v);
-        }
-    };
+    var { className, children, onChange, size = "medium", label, value, defaultValue, "aria-describedby": userDescribedby, variant = "action", fill = false } = _a, rest = __rest(_a, ["className", "children", "onChange", "size", "label", "value", "defaultValue", "aria-describedby", "variant", "fill"]);
+    const descendants = (0, ToggleGroup_context_1.useToggleGroupDescendants)();
+    const toggleGroupContext = (0, useToggleGroup_1.useToggleGroup)({
+        defaultValue,
+        value,
+        onChange,
+    });
+    /**
+     * ToggleGroupProvider handles memoization.
+     */
+    const context = Object.assign(Object.assign({}, toggleGroupContext), { size });
+    const labelId = (0, util_1.useId)();
     if (!value && !defaultValue) {
-        console.error("ToggleGroup without value/defaultvalue is not allowed");
+        console.error("ToggleGroup without value or defaultvalue is not allowed");
     }
-    const describeBy = (0, clsx_1.default)({
-        [desc !== null && desc !== void 0 ? desc : ""]: !!desc,
-        [labelId !== null && labelId !== void 0 ? labelId : ""]: !!label,
-    });
     if (!value && !defaultValue) {
         console.error("ToggleGroup needs either a value or defaultValue");
     }
-    return (react_1.default.createElement(context_1.ToggleGroupContext.Provider, { value: {
-            size,
-        } },
-        react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-toggle-group__wrapper", className) },
-            label && (react_1.default.createElement(typography_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, clsx_1.default)("navds-toggle-group", `navds-toggle-group--${size}`, `navds-toggle-group--${variant}`) }, (describeBy && { "aria-describedby": describeBy }), { role: "radiogroup", type: "single" }), children))));
+    return (react_1.default.createElement(ToggleGroup_context_1.ToggleGroupDescendantsProvider, { value: descendants },
+        react_1.default.createElement(ToggleGroup_context_1.ToggleGroupProvider, Object.assign({}, context),
+            react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-toggle-group__wrapper", className, {
+                    "navds-toggle-group__wrapper--fill": fill,
+                }) },
+                label && (react_1.default.createElement(typography_1.Label, { size: size, className: "navds-toggle-group__label", id: labelId }, label)),
+                react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-toggle-group", `navds-toggle-group--${size}`, `navds-toggle-group--${variant}`), "aria-describedby": (0, clsx_1.default)(userDescribedby, !!label && labelId) || undefined, role: "radiogroup" }), children)))));
 });
 exports.ToggleGroup.Item = ToggleItem_1.default;
 exports.default = exports.ToggleGroup;

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup.js","sourceRoot":"","sources":["../../src/toggle-group/ToggleGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+EAAiE;AACjE,gDAAsB;AACtB,+CAAoE;AACpE,8CAAsC;AACtC,yCAAsC;AACtC,8DAAgE;AAChE,uCAA+C;AAgD/C;;;;;;;;;;;;;;GAcG;AACU,QAAA,WAAW,GAAG,IAAA,kBAAU,EACnC,CACE,EAWC,EACD,GAAG,EACH,EAAE;QAbF,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,KAAK,EACL,YAAY,EACZ,kBAAkB,EAAE,IAAI,EACxB,OAAO,GAAG,QAAQ,OAEnB,EADI,IAAI,cAVT,8GAWC,CADQ;IAIT,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,YAAY,CAAC,CAAC;IAC3D,MAAM,OAAO,GAAG,IAAA,aAAK,GAAE,CAAC;IAExB,MAAM,iBAAiB,GAAG,CAAC,CAAS,EAAE,EAAE;QACtC,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC;YACb,aAAa,CAAC,CAAC,CAAC,CAAC;YACjB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,CAAC;QAChB,CAAC;IACH,CAAC,CAAC;IAEF,IAAI,CAAC,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;QAC5B,OAAO,CAAC,KAAK,CAAC,uDAAuD,CAAC,CAAC;IACzE,CAAC;IAED,MAAM,UAAU,GAAG,IAAA,cAAE,EAAC;QACpB,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI;QACpB,CAAC,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK;KACzB,CAAC,CAAC;IAEH,IAAI,CAAC,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;QAC5B,OAAO,CAAC,KAAK,CAAC,kDAAkD,CAAC,CAAC;IACpE,CAAC;IAED,OAAO,CACL,8BAAC,4BAAkB,CAAC,QAAQ,IAC1B,KAAK,EAAE;YACL,IAAI;SACL;QAED,uCAAK,SAAS,EAAE,IAAA,cAAE,EAAC,6BAA6B,EAAE,SAAS,CAAC;YACzD,KAAK,IAAI,CACR,8BAAC,kBAAK,IACJ,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,2BAA2B,EACrC,EAAE,EAAE,OAAO,IAEV,KAAK,CACA,CACT;YACD,8BAAC,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,IAAA,cAAE,EACX,oBAAoB,EACpB,uBAAuB,IAAI,EAAE,EAC7B,uBAAuB,OAAO,EAAE,CACjC,IACG,CAAC,UAAU,IAAI,EAAE,kBAAkB,EAAE,UAAU,EAAE,CAAC,IACtD,IAAI,EAAC,YAAY,EACjB,IAAI,EAAC,QAAQ,KAEZ,QAAQ,CACa,CACpB,CACsB,CAC/B,CAAC;AACJ,CAAC,CACsB,CAAC;AAE1B,mBAAW,CAAC,IAAI,GAAG,oBAAU,CAAC;AAE9B,kBAAe,mBAAW,CAAC"}
+{"version":3,"file":"ToggleGroup.js","sourceRoot":"","sources":["../../src/toggle-group/ToggleGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;AAC1C,8CAAsC;AACtC,kCAAgC;AAChC,+DAI+B;AAE/B,oEAA4C;AAC5C,qDAAkD;AAYlD;;;;;;;;;;;;;;GAcG;AACU,QAAA,WAAW,GAAG,IAAA,kBAAU,EACnC,CACE,EAYC,EACD,GAAG,EACH,EAAE;QAdF,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,KAAK,EACL,YAAY,EACZ,kBAAkB,EAAE,eAAe,EACnC,OAAO,GAAG,QAAQ,EAClB,IAAI,GAAG,KAAK,OAEb,EADI,IAAI,cAXT,sHAYC,CADQ;IAIT,MAAM,WAAW,GAAG,IAAA,+CAAyB,GAAE,CAAC;IAEhD,MAAM,kBAAkB,GAAG,IAAA,+BAAc,EAAC;QACxC,YAAY;QACZ,KAAK;QACL,QAAQ;KACT,CAAC,CAAC;IAEH;;OAEG;IACH,MAAM,OAAO,mCACR,kBAAkB,KACrB,IAAI,GACL,CAAC;IAEF,MAAM,OAAO,GAAG,IAAA,YAAK,GAAE,CAAC;IAExB,IAAI,CAAC,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;QAC5B,OAAO,CAAC,KAAK,CAAC,0DAA0D,CAAC,CAAC;IAC5E,CAAC;IAED,IAAI,CAAC,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;QAC5B,OAAO,CAAC,KAAK,CAAC,kDAAkD,CAAC,CAAC;IACpE,CAAC;IAED,OAAO,CACL,8BAAC,oDAA8B,IAAC,KAAK,EAAE,WAAW;QAChD,8BAAC,yCAAmB,oBAAK,OAAO;YAC9B,uCACE,SAAS,EAAE,IAAA,cAAE,EAAC,6BAA6B,EAAE,SAAS,EAAE;oBACtD,mCAAmC,EAAE,IAAI;iBAC1C,CAAC;gBAED,KAAK,IAAI,CACR,8BAAC,kBAAK,IACJ,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,2BAA2B,EACrC,EAAE,EAAE,OAAO,IAEV,KAAK,CACA,CACT;gBACD,uDACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAE,EACX,oBAAoB,EACpB,uBAAuB,IAAI,EAAE,EAC7B,uBAAuB,OAAO,EAAE,CACjC,sBAEC,IAAA,cAAE,EAAC,eAAe,EAAE,CAAC,CAAC,KAAK,IAAI,OAAO,CAAC,IAAI,SAAS,EAEtD,IAAI,EAAC,YAAY,KAEhB,QAAQ,CACL,CACF,CACc,CACS,CAClC,CAAC;AACJ,CAAC,CACsB,CAAC;AAE1B,mBAAW,CAAC,IAAI,GAAG,oBAAU,CAAC;AAE9B,kBAAe,mBAAW,CAAC"}

package/cjs/toggle-group/ToggleGroup.types.d.ts

@@ -0,0 +1,38 @@
+import { HTMLAttributes } from "react";
+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;
+    /**
+     * Callback for selected toggle.
+     */
+    onChange: (value: string) => void;
+    /**
+     * Label describing ToggleGroup.
+     */
+    label?: React.ReactNode;
+    /**
+     * Changes design and interaction-visuals.
+     * @default "action"
+     */
+    variant?: "action" | "neutral";
+    /**
+     * Stretch each button to fill avaliable space in container.
+     * @default false
+     */
+    fill?: boolean;
+}

package/cjs/toggle-group/ToggleGroup.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=ToggleGroup.types.js.map

package/cjs/toggle-group/ToggleGroup.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.types.js","sourceRoot":"","sources":["../../src/toggle-group/ToggleGroup.types.ts"],"names":[],"mappings":""}

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

@@ -1,2 +1,3 @@
-export { default as ToggleGroup, type ToggleGroupProps } from "./ToggleGroup";
-export { default as ToggleGroupItem, type ToggleGroupItemProps, } from "./ToggleItem";
+export { default as ToggleGroup } from "./ToggleGroup";
+export { type ToggleGroupProps } from "./ToggleGroup.types";
+export { default as ToggleGroupItem, type ToggleGroupItemProps, } from "./parts/ToggleItem";

package/cjs/toggle-group/index.js

@@ -7,6 +7,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToggleGroupItem = exports.ToggleGroup = void 0;
 var ToggleGroup_1 = require("./ToggleGroup");
 Object.defineProperty(exports, "ToggleGroup", { enumerable: true, get: function () { return __importDefault(ToggleGroup_1).default; } });
-var ToggleItem_1 = require("./ToggleItem");
+var ToggleItem_1 = require("./parts/ToggleItem");
 Object.defineProperty(exports, "ToggleGroupItem", { enumerable: true, get: function () { return __importDefault(ToggleItem_1).default; } });
 //# sourceMappingURL=index.js.map