@digdir/designsystemet-react 0.52.0-alpha.0

package/dist/cjs/components/SkipLink/SkipLink.module.css.js

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"skiplink":"fds-skiplink-skiplink-fcabcecf"};
+
+module.exports = classes;

package/dist/cjs/components/Spinner/Spinner.js

@@ -0,0 +1,25 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('../../node_modules/clsx/dist/clsx.js');
+var Spinner_module = require('./Spinner.module.css.js');
+var useSynchronizedAnimation = require('../../hooks/useSynchronizedAnimation.js');
+
+const sizeMap = {
+    xxsmall: 13,
+    xsmall: 20,
+    small: 27,
+    medium: 40,
+    large: 56,
+    xlarge: 79,
+};
+/**  Spinner component used for indicating busy or indeterminate loading */
+const Spinner = ({ title, size = 'medium', variant = 'default', className, style, ...rest }) => {
+    const svgRef = useSynchronizedAnimation.useSynchronizedAnimation(Spinner_module['rotate-animation']);
+    const strokeRef = useSynchronizedAnimation.useSynchronizedAnimation(Spinner_module['stroke-animation']);
+    return (jsxRuntime.jsxs("svg", { className: clsx.clsx(Spinner_module.spinner, className), style: { width: sizeMap[size], height: sizeMap[size], ...style }, viewBox: '0 0 50 50', ref: svgRef, ...rest, children: [jsxRuntime.jsx("title", { children: title }), jsxRuntime.jsx("circle", { className: clsx.clsx(Spinner_module.background, variant === 'inverted' && Spinner_module.invertedBackground), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5' }), jsxRuntime.jsx("circle", { className: clsx.clsx(Spinner_module.spinnerCircle, Spinner_module[variant]), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5', ref: strokeRef })] }));
+};
+Spinner.displayName = 'Spinner';
+
+exports.Spinner = Spinner;

package/dist/cjs/components/Spinner/Spinner.module.css.js

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"spinner":"fds-spinner-spinner-ecd53b7b","rotate-animation":"fds-spinner-rotate-animation-ecd53b7b","spinnerCircle":"fds-spinner-spinnerCircle-ecd53b7b","stroke-animation":"fds-spinner-stroke-animation-ecd53b7b","default":"fds-spinner-default-ecd53b7b","interaction":"fds-spinner-interaction-ecd53b7b","inverted":"fds-spinner-inverted-ecd53b7b","background":"fds-spinner-background-ecd53b7b","invertedBackground":"fds-spinner-invertedBackground-ecd53b7b"};
+
+module.exports = classes;

package/dist/cjs/components/Table/Table.js

@@ -0,0 +1,34 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../node_modules/clsx/dist/clsx.js');
+var Table_module = require('./Table.module.css.js');
+var Paragraph = require('../Typography/Paragraph/Paragraph.js');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const Table = React__namespace.forwardRef(({ zebra = false, size = 'medium', stickyHeader = false, border = false, className, children, ...rest }, ref) => {
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("table", { ref: ref, className: clsx.clsx(Table_module[size], zebra && Table_module.zebra, stickyHeader && Table_module.stickyHeader, border && Table_module.border, Table_module.table, className), ...rest, children: children }) }));
+});
+Table.displayName = 'Table';
+
+exports.Table = Table;

package/dist/cjs/components/Table/Table.module.css.js

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"table":"fds-table-table-c4ff6291","stickyHeader":"fds-table-stickyHeader-c4ff6291","border":"fds-table-border-c4ff6291","row":"fds-table-row-c4ff6291","small":"fds-table-small-c4ff6291","medium":"fds-table-medium-c4ff6291","large":"fds-table-large-c4ff6291","head":"fds-table-head-c4ff6291","headerCell":"fds-table-headerCell-c4ff6291","sortable":"fds-table-sortable-c4ff6291","sorted":"fds-table-sorted-c4ff6291","cell":"fds-table-cell-c4ff6291","zebra":"fds-table-zebra-c4ff6291"};
+
+module.exports = classes;

package/dist/cjs/components/Table/TableBody.js

@@ -0,0 +1,31 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const TableBody = React__namespace.forwardRef(({ children, ...rest }, ref) => {
+    return (jsxRuntime.jsx("tbody", { ref: ref, ...rest, children: children }));
+});
+TableBody.displayName = 'TableBody';
+
+exports.TableBody = TableBody;

package/dist/cjs/components/Table/TableCell.js

@@ -0,0 +1,33 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../node_modules/clsx/dist/clsx.js');
+var Table_module = require('./Table.module.css.js');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const TableCell = React__namespace.forwardRef(({ className, children, ...rest }, ref) => {
+    return (jsxRuntime.jsx("td", { ref: ref, className: clsx.clsx(Table_module.cell, className), ...rest, children: children }));
+});
+TableCell.displayName = 'TableCell';
+
+exports.TableCell = TableCell;

package/dist/cjs/components/Table/TableHead.js

@@ -0,0 +1,33 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../node_modules/clsx/dist/clsx.js');
+var Table_module = require('./Table.module.css.js');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const TableHead = React__namespace.forwardRef(({ className, children, ...rest }, ref) => {
+    return (jsxRuntime.jsx("thead", { ref: ref, className: clsx.clsx(Table_module.head, className), ...rest, children: children }));
+});
+TableHead.displayName = 'TableHead';
+
+exports.TableHead = TableHead;

package/dist/cjs/components/Table/TableHeaderCell.js

@@ -0,0 +1,40 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var akselIcons = require('@navikt/aksel-icons');
+var React = require('react');
+var clsx = require('../../node_modules/clsx/dist/clsx.js');
+var utility_module = require('../../utilities/utility.module.css.js');
+var Table_module = require('./Table.module.css.js');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const SORT_ICON = {
+    ascending: jsxRuntime.jsx(akselIcons.ChevronUpIcon, {}),
+    descending: jsxRuntime.jsx(akselIcons.ChevronDownIcon, {}),
+};
+const TableHeaderCell = React__namespace.forwardRef(({ sortable = false, sort, onSortClick, className, children, ...rest }, ref) => {
+    const sortIcon = sort === 'ascending' || sort === 'descending' ? (SORT_ICON[sort]) : (jsxRuntime.jsx(akselIcons.ChevronUpDownIcon, {}));
+    return (jsxRuntime.jsxs("th", { className: clsx.clsx(sortable && Table_module.sortable, sort && Table_module.sorted, Table_module.headerCell, className), "aria-sort": sort, ref: ref, ...rest, children: [sortable && (jsxRuntime.jsxs("button", { className: utility_module.focusable, onClick: onSortClick, children: [children, sortIcon] })), !sortable && children] }));
+});
+TableHeaderCell.displayName = 'TableHeaderCell';
+
+exports.TableHeaderCell = TableHeaderCell;

package/dist/cjs/components/Table/TableRow.js

@@ -0,0 +1,33 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../node_modules/clsx/dist/clsx.js');
+var Table_module = require('./Table.module.css.js');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const TableRow = React__namespace.forwardRef(({ className, children, ...rest }, ref) => {
+    return (jsxRuntime.jsx("tr", { className: clsx.clsx(Table_module.row, className), ref: ref, ...rest, children: children }));
+});
+TableRow.displayName = 'TableRow';
+
+exports.TableRow = TableRow;

package/dist/cjs/components/Table/index.js

@@ -0,0 +1,29 @@
+'use client';
+'use strict';
+
+var Table$1 = require('./Table.js');
+var TableHead = require('./TableHead.js');
+var TableBody = require('./TableBody.js');
+var TableRow = require('./TableRow.js');
+var TableCell = require('./TableCell.js');
+var TableHeaderCell = require('./TableHeaderCell.js');
+
+const Table = Table$1.Table;
+Table.Head = TableHead.TableHead;
+Table.Body = TableBody.TableBody;
+Table.Row = TableRow.TableRow;
+Table.Cell = TableCell.TableCell;
+Table.HeaderCell = TableHeaderCell.TableHeaderCell;
+Table.displayName = 'Table';
+Table.Head.displayName = 'Table.Head';
+Table.Body.displayName = 'Table.Body';
+Table.Row.displayName = 'Table.Row';
+Table.Cell.displayName = 'Table.Cell';
+Table.HeaderCell.displayName = 'Table.HeaderCell';
+
+exports.TableHead = TableHead.TableHead;
+exports.TableBody = TableBody.TableBody;
+exports.TableRow = TableRow.TableRow;
+exports.TableCell = TableCell.TableCell;
+exports.TableHeaderCell = TableHeaderCell.TableHeaderCell;
+exports.Table = Table;

package/dist/cjs/components/Tabs/Tab/Tab.js

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../../node_modules/clsx/dist/clsx.js');
+var Tab_module = require('./Tab.module.css.js');
+var useTab = require('./useTab.js');
+var RovingTabindexItem = require('../../../utilities/RovingTabIndex/RovingTabindexItem.js');
+
+const Tab = React.forwardRef((props, ref) => {
+    const { children, className, ...rest } = props;
+    const { active, size = 'medium', ...useTabRest } = useTab.useTabItem(props);
+    return (jsxRuntime.jsx(RovingTabindexItem.RovingTabindexItem, { ...rest, asChild: true, children: jsxRuntime.jsx("button", { ...useTabRest, className: clsx.clsx(Tab_module.tabItem, Tab_module[size], active && Tab_module.isActive, className), ref: ref, children: children }) }));
+});
+Tab.displayName = 'Tab';
+
+exports.Tab = Tab;

package/dist/cjs/components/Tabs/Tab/Tab.module.css.js

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"tabItem":"fds-tab-tabItem-cb5410d6","small":"fds-tab-small-cb5410d6","medium":"fds-tab-medium-cb5410d6","large":"fds-tab-large-cb5410d6","isActive":"fds-tab-isActive-cb5410d6"};
+
+module.exports = classes;

package/dist/cjs/components/Tabs/Tab/useTab.js

@@ -0,0 +1,26 @@
+'use client';
+'use strict';
+
+var React = require('react');
+var Tabs = require('../Tabs.js');
+
+/** Handles props for `Tab` in context with `Tabs` */
+const useTabItem = (props) => {
+    const { value, ...rest } = props;
+    const tabs = React.useContext(Tabs.TabsContext);
+    const active = tabs.value == value;
+    const buttonId = `tab-${React.useId()}`;
+    return {
+        ...rest,
+        active: active,
+        size: tabs?.size,
+        id: buttonId,
+        'aria-selected': active,
+        role: 'tab',
+        onClick: () => {
+            tabs.onChange?.(value);
+        },
+    };
+};
+
+exports.useTabItem = useTabItem;

package/dist/cjs/components/Tabs/TabContent/TabContent.js

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../../node_modules/clsx/dist/clsx.js');
+var Tabs = require('../Tabs.js');
+var TabContent_module = require('./TabContent.module.css.js');
+
+const TabContent = React.forwardRef(({ children, value, className, ...rest }, ref) => {
+    const { value: tabsValue, size = 'medium' } = React.useContext(Tabs.TabsContext);
+    const active = value == tabsValue;
+    const onlyText = typeof children === 'string';
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: active && (jsxRuntime.jsx("div", { className: clsx.clsx(TabContent_module[size], TabContent_module.tabContent, onlyText && TabContent_module.onlyText, className), ref: ref, ...rest, children: children })) }));
+});
+TabContent.displayName = 'TabContent';
+
+exports.TabContent = TabContent;

package/dist/cjs/components/Tabs/TabContent/TabContent.module.css.js

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"tabContent":"fds-tabcontent-tabContent-627713c2","small":"fds-tabcontent-small-627713c2","medium":"fds-tabcontent-medium-627713c2","large":"fds-tabcontent-large-627713c2","onlyText":"fds-tabcontent-onlyText-627713c2"};
+
+module.exports = classes;

package/dist/cjs/components/Tabs/TabList/TabList.js

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../../node_modules/clsx/dist/clsx.js');
+var TabList_module = require('./TabList.module.css.js');
+var RovingTabindexRoot = require('../../../utilities/RovingTabIndex/RovingTabindexRoot.js');
+
+const TabList = React.forwardRef(({ children, className, ...rest }, ref) => {
+    return (jsxRuntime.jsx(RovingTabindexRoot.RovingTabindexRoot, { role: 'tablist', className: clsx.clsx(TabList_module.tabItemList, className), ref: ref, ...rest, children: children }));
+});
+TabList.displayName = 'TabList';
+
+exports.TabList = TabList;

package/dist/cjs/components/Tabs/TabList/TabList.module.css.js

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"tabItemList":"fds-tablist-tabItemList-382bc5da"};
+
+module.exports = classes;

package/dist/cjs/components/Tabs/Tabs.js

@@ -0,0 +1,29 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+const TabsContext = React.createContext({});
+const Tabs = React.forwardRef(({ children, value, defaultValue, onChange, size = 'medium', ...rest }, ref) => {
+    const isControlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+    let onValueChange = onChange;
+    if (!isControlled) {
+        onValueChange = (newValue) => {
+            setUncontrolledValue(newValue);
+            onChange?.(newValue);
+        };
+        value = uncontrolledValue;
+    }
+    return (jsxRuntime.jsx(TabsContext.Provider, { value: {
+            value,
+            defaultValue,
+            onChange: onValueChange,
+            size,
+        }, children: jsxRuntime.jsx("div", { ref: ref, ...rest, children: children }) }));
+});
+Tabs.displayName = 'Tabs';
+
+exports.Tabs = Tabs;
+exports.TabsContext = TabsContext;

package/dist/cjs/components/Tabs/index.js

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+var Tabs$1 = require('./Tabs.js');
+var Tab = require('./Tab/Tab.js');
+var TabList = require('./TabList/TabList.js');
+var TabContent = require('./TabContent/TabContent.js');
+
+const Tabs = Tabs$1.Tabs;
+Tabs.Tab = Tab.Tab;
+Tabs.List = TabList.TabList;
+Tabs.Content = TabContent.TabContent;
+Tabs.Tab.displayName = 'Tabs.Tab';
+Tabs.List.displayName = 'Tabs.List';
+Tabs.Content.displayName = 'Tabs.Content';
+
+exports.Tab = Tab.Tab;
+exports.TabList = TabList.TabList;
+exports.TabContent = TabContent.TabContent;
+exports.Tabs = Tabs;

package/dist/cjs/components/Tag/Tag.js

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../node_modules/clsx/dist/clsx.js');
+var Tag_module = require('./Tag.module.css.js');
+var Paragraph = require('../Typography/Paragraph/Paragraph.js');
+
+const Tag = React.forwardRef(({ children, color = 'neutral', size = 'medium', className, ...rest }, ref) => {
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("span", { className: clsx.clsx(Tag_module.tag, Tag_module[color], Tag_module[size], className), ref: ref, ...rest, children: children }) }));
+});
+Tag.displayName = 'Tag';
+
+exports.Tag = Tag;

package/dist/cjs/components/Tag/Tag.module.css.js

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"tag":"fds-tag-tag-e4c97db9","small":"fds-tag-small-e4c97db9","medium":"fds-tag-medium-e4c97db9","large":"fds-tag-large-e4c97db9","neutral":"fds-tag-neutral-e4c97db9","info":"fds-tag-info-e4c97db9","success":"fds-tag-success-e4c97db9","warning":"fds-tag-warning-e4c97db9","danger":"fds-tag-danger-e4c97db9","first":"fds-tag-first-e4c97db9","second":"fds-tag-second-e4c97db9","third":"fds-tag-third-e4c97db9"};
+
+module.exports = classes;

package/dist/cjs/components/ToggleGroup/ToggleGroup.js

@@ -0,0 +1,44 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../node_modules/clsx/dist/clsx.js');
+var ToggleGroup_module = require('./ToggleGroup.module.css.js');
+var RovingTabindexRoot = require('../../utilities/RovingTabIndex/RovingTabindexRoot.js');
+
+const ToggleGroupContext = React.createContext({});
+/** `ToggleGroup` component.
+ * @example
+ * ```tsx
+ * <ToggleGroup onChange={(value) => console.log(value)}>
+ *   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
+ *   <ToggleGroup.Item value='2'>Toggle 2</ToggleGroup.Item>
+ *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
+ * </ToggleGroup>
+ * ```
+ */
+const ToggleGroup = React.forwardRef(({ children, value, defaultValue, onChange, size = 'medium', name, className, ...rest }, ref) => {
+    const nameId = React.useId();
+    const isControlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+    let onValueChange = onChange;
+    if (!isControlled) {
+        onValueChange = (newValue) => {
+            setUncontrolledValue(newValue);
+            onChange?.(newValue);
+        };
+        value = uncontrolledValue;
+    }
+    return (jsxRuntime.jsx("div", { className: clsx.clsx(ToggleGroup_module.toggleGroupContainer, className), ref: ref, ...rest, children: jsxRuntime.jsxs(ToggleGroupContext.Provider, { value: {
+                value,
+                defaultValue,
+                name: name ?? `togglegroup-name-${nameId}`,
+                onChange: onValueChange,
+                size,
+            }, children: [name && (jsxRuntime.jsx("input", { type: 'hidden', name: name, value: value })), jsxRuntime.jsx(RovingTabindexRoot.RovingTabindexRoot, { asChild: true, valueId: value, children: jsxRuntime.jsx("div", { className: ToggleGroup_module.groupContent, role: 'radiogroup', children: children }) })] }) }));
+});
+ToggleGroup.displayName = 'ToggleGroup';
+
+exports.ToggleGroup = ToggleGroup;
+exports.ToggleGroupContext = ToggleGroupContext;

package/dist/cjs/components/ToggleGroup/ToggleGroup.module.css.js

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"toggleGroupContainer":"fds-togglegroup-toggleGroupContainer-acca2b17","groupContent":"fds-togglegroup-groupContent-acca2b17"};
+
+module.exports = classes;

package/dist/cjs/components/ToggleGroup/ToggleGroupItem/ToggleGroupItem.js

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../../node_modules/clsx/dist/clsx.js');
+var ToggleGroupItem_module = require('./ToggleGroupItem.module.css.js');
+var useToggleGroupitem = require('./useToggleGroupitem.js');
+var RovingTabindexItem = require('../../../utilities/RovingTabIndex/RovingTabindexItem.js');
+var Button = require('../../Button/Button.js');
+
+const ToggleGroupItem = React.forwardRef((props, ref) => {
+    const { children, icon, className, ...rest } = props;
+    const { active, size = 'medium', buttonProps } = useToggleGroupitem.useToggleGroupItem(props);
+    return (jsxRuntime.jsx(RovingTabindexItem.RovingTabindexItem, { asChild: true, value: rest.value, children: jsxRuntime.jsx(Button.Button, { className: clsx.clsx(ToggleGroupItem_module.toggleGroupItem, className), icon: icon, color: 'first', variant: active ? 'primary' : 'tertiary', size: size, ref: ref, ...rest, ...buttonProps, children: children }) }));
+});
+ToggleGroupItem.displayName = 'ToggleGroupItem';
+
+exports.ToggleGroupItem = ToggleGroupItem;

package/dist/cjs/components/ToggleGroup/ToggleGroupItem/ToggleGroupItem.module.css.js

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"toggleGroupItem":"fds-togglegroupitem-toggleGroupItem-4bc7b95"};
+
+module.exports = classes;

package/dist/cjs/components/ToggleGroup/ToggleGroupItem/useToggleGroupitem.js

@@ -0,0 +1,31 @@
+'use client';
+'use strict';
+
+var React = require('react');
+var ToggleGroup = require('../ToggleGroup.js');
+
+/** Handles props for `ToggleGroup.Item` in context with `ToggleGroup` and `RovingTabIndex` */
+const useToggleGroupItem = (props) => {
+    const { ...rest } = props;
+    const toggleGroup = React.useContext(ToggleGroup.ToggleGroupContext);
+    const itemValue = props.value ?? (typeof props.children === 'string' ? props.children : '');
+    const active = toggleGroup.value == itemValue;
+    const buttonId = `togglegroup-item-${React.useId()}`;
+    return {
+        ...rest,
+        active: active,
+        size: toggleGroup?.size,
+        buttonProps: {
+            id: buttonId,
+            'aria-checked': active,
+            'aria-current': active,
+            role: 'radio',
+            name: toggleGroup.name,
+            onClick: () => {
+                toggleGroup.onChange?.(itemValue);
+            },
+        },
+    };
+};
+
+exports.useToggleGroupItem = useToggleGroupItem;

package/dist/cjs/components/ToggleGroup/index.js

@@ -0,0 +1,12 @@
+'use client';
+'use strict';
+
+var ToggleGroup$1 = require('./ToggleGroup.js');
+var ToggleGroupItem = require('./ToggleGroupItem/ToggleGroupItem.js');
+
+const ToggleGroup = ToggleGroup$1.ToggleGroup;
+ToggleGroup.Item = ToggleGroupItem.ToggleGroupItem;
+ToggleGroup.Item.displayName = 'ToggleGroup.Item';
+
+exports.ToggleGroupItem = ToggleGroupItem.ToggleGroupItem;
+exports.ToggleGroup = ToggleGroup;