@digdir/designsystemet-react 0.0.0-ci-snapshot-release-pr-comment-20260612060845

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

@@ -0,0 +1,22 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+/**
+ * TableBody component, used to display the body of a table. Renders a native HTML tbody element.
+ *
+ * @example
+ * <TableBody>
+ *   <TableRow>
+ *     <TableCell>John</TableCell>
+ *     <TableCell>25</TableCell>
+ *   </TableRow>
+ * </TableBody>
+ */
+const TableBody = react.forwardRef(function TableBody(rest, ref) {
+    return jsxRuntime.jsx("tbody", { ref: ref, ...rest });
+});
+
+exports.TableBody = TableBody;

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

@@ -0,0 +1,17 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+/**
+ * TableCell component, used to display the cells of a table. Renders a native HTML td element.
+ *
+ * @example
+ * <TableCell>John</TableCell>
+ */
+const TableCell = react.forwardRef(function TableCell(rest, ref) {
+    return jsxRuntime.jsx("td", { ref: ref, ...rest });
+});
+
+exports.TableCell = TableCell;

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

@@ -0,0 +1,22 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+/**
+ * TableFoot component, used to display the footer of a table. Renders a native HTML tfoot element.
+ *
+ * @example
+ * <TableFoot>
+ *   <TableRow>
+ *     <TableCell>Total</TableCell>
+ *     <TableCell>2</TableCell>
+ *   </TableRow>
+ * </TableFoot>
+ */
+const TableFoot = react.forwardRef(function TableFoot(rest, ref) {
+    return jsxRuntime.jsx("tfoot", { ref: ref, ...rest });
+});
+
+exports.TableFoot = TableFoot;

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

@@ -0,0 +1,22 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+/**
+ * TableHead component, used to display the header of a table. Renders a native HTML thead element.
+ *
+ * @example
+ * <TableHead>
+ *   <TableRow>
+ *     <TableHeaderCell>Name</TableHeaderCell>
+ *     <TableHeaderCell>Age</TableHeaderCell>
+ *   </TableRow>
+ * </TableHead>
+ */
+const TableHead = react.forwardRef(function TableHead(rest, ref) {
+    return jsxRuntime.jsx("thead", { ref: ref, ...rest });
+});
+
+exports.TableHead = TableHead;

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

@@ -0,0 +1,17 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+/**
+ * TableHeaderCell component, used to display the header cells of a table. Renders a native HTML th element.
+ *
+ * @example
+ * <TableHeaderCell>Name</TableHeaderCell>
+ */
+const TableHeaderCell = react.forwardRef(function TableHeaderCell({ sort, children, ...rest }, ref) {
+    return (jsxRuntime.jsx("th", { "aria-sort": sort, ref: ref, ...rest, children: sort ? jsxRuntime.jsx("button", { type: 'button', children: children }) : children }));
+});
+
+exports.TableHeaderCell = TableHeaderCell;

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

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+/**
+ * TableRow component, used to display the rows of a table. Renders a native HTML tr element.
+ *
+ * @example
+ * <TableRow>
+ *   <TableCell>John</TableCell>
+ *   <TableCell>25</TableCell>
+ * </TableRow>
+ */
+const TableRow = react.forwardRef(function TableRow(rest, ref) {
+    return jsxRuntime.jsx("tr", { ref: ref, ...rest });
+});
+
+exports.TableRow = TableRow;

package/dist/cjs/components/table/table.js

@@ -0,0 +1,37 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * Table component, used to display tabular data. Renders a native HTML table element.
+ *
+ * @example
+ * <Table>
+ *   <Table.Head>
+ *     <Table.Row>
+ *       <Table.HeaderCell>Name</Table.HeaderCell>
+ *       <Table.HeaderCell>Age</Table.HeaderCell>
+ *     </Table.Row>
+ *   </Table.Head>
+ *   <Table.Body>
+ *     <Table.Row>
+ *       <Table.Cell>John</Table.Cell>
+ *       <Table.Cell>25</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Body>
+ *   <Table.Foot>
+ *     <Table.Row>
+ *       <Table.Cell>Total</Table.Cell>
+ *       <Table.Cell>2</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Foot>
+ * </Table>
+ */
+const Table = react.forwardRef(function Table({ zebra = false, stickyHeader = false, border = false, hover = false, className, children, ...rest }, ref) {
+    return (jsxRuntime.jsx("table", { className: cl('ds-table', className), "data-border": border || undefined, "data-hover": hover || undefined, "data-sticky-header": stickyHeader || undefined, "data-zebra": zebra || undefined, ref: ref, ...rest, children: children }));
+});
+
+exports.Table = Table;

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

@@ -0,0 +1,36 @@
+'use client';
+'use strict';
+
+var tabs = require('./tabs.js');
+var tabsList = require('./tabs-list.js');
+var tabsPanel = require('./tabs-panel.js');
+var tabsTab = require('./tabs-tab.js');
+
+/**
+ * Display a group of tabs that can be toggled between.
+ *
+ * @example
+ * <Tabs onChange={(value) => console.log(value)}>
+ *   <Tabs.List>
+ *     <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
+ *     <Tabs.Tab value='2'>Tab 2</Tabs.Tab>
+ *     <Tabs.Tab value='3'>Tab 3</Tabs.Tab>
+ *   </Tabs.List>
+ *   <Tabs.Panel value='1'>content 1</Tabs.Panel>
+ *   <Tabs.Panel value='2'>content 2</Tabs.Panel>
+ *   <Tabs.Panel value='3'>content 3</Tabs.Panel>
+ * </Tabs>
+ */
+const TabsComponent = Object.assign(tabs.Tabs, {
+    List: tabsList.TabsList,
+    Tab: tabsTab.TabsTab,
+    Panel: tabsPanel.TabsPanel,
+});
+TabsComponent.Tab.displayName = 'Tabs.Tab';
+TabsComponent.List.displayName = 'Tabs.List';
+TabsComponent.Panel.displayName = 'Tabs.Panel';
+
+exports.TabsList = tabsList.TabsList;
+exports.TabsPanel = tabsPanel.TabsPanel;
+exports.TabsTab = tabsTab.TabsTab;
+exports.Tabs = TabsComponent;

package/dist/cjs/components/tabs/tabs-list.js

@@ -0,0 +1,22 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('@digdir/designsystemet-web');
+var react = require('react');
+
+/**
+ * The container for all `Tab` components.
+ *
+ * @example
+ * <TabsList>
+ *  <TabsTab value='1'>Tab 1</TabsTab>
+ *  <TabsTab value='2'>Tab 2</TabsTab>
+ * </TabsList>
+ */
+const TabsList = react.forwardRef(function TabsList({ className, children, ...rest }, ref) {
+    return (jsxRuntime.jsx("ds-tablist", { suppressHydrationWarning // Since <ds-tablist> adds attributes
+        : true, ref: ref, class: className, ...rest, children: children }));
+});
+
+exports.TabsList = TabsList;

package/dist/cjs/components/tabs/tabs-panel.js

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('@digdir/designsystemet-web');
+var react = require('react');
+var tabs = require('./tabs.js');
+
+/**
+ * A single content item in a Tabs component.
+ *
+ * @example
+ * <TabsPanel value='1'>content 1</TabsPanel>
+ */
+const TabsPanel = react.forwardRef(function TabsPanel({ children, value, id, className, ...rest }, ref) {
+    const { getPrefixedValue } = react.useContext(tabs.Context);
+    return (jsxRuntime.jsx("ds-tabpanel", { suppressHydrationWarning // Since <ds-tablist> adds attributes
+        : true, ref: ref, id: id ?? getPrefixedValue?.(value), class: className, ...rest, children: children }));
+});
+
+exports.TabsPanel = TabsPanel;

package/dist/cjs/components/tabs/tabs-tab.js

@@ -0,0 +1,29 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('@digdir/designsystemet-web');
+var react = require('react');
+var tabs = require('./tabs.js');
+
+/**
+ * A single item in a Tabs component.
+ *
+ * @example
+ * <TabsTab value='1'>Tab 1</TabsTab>
+ */
+const TabsTab = react.forwardRef(function TabsTab({ value, className, onClick, onClickCapture, ...rest }, ref) {
+    const { onChange, getPrefixedValue, isControlled, currentValue } = react.useContext(tabs.Context);
+    return (jsxRuntime.jsx("ds-tab", { "aria-controls": rest['aria-controls'] ?? getPrefixedValue?.(value), "data-value": value, ref: ref, suppressHydrationWarning // Since <ds-tablist> adds attributes
+        : true, onClickCapture: (e) => {
+            onClickCapture?.(e);
+            if (isControlled && currentValue !== value)
+                e.preventDefault(); // In controlled mode, prevent click in event capture phase
+        }, onClick: (e) => {
+            if (currentValue !== value)
+                onChange?.(value); // Only call onChange when actual value change
+            onClick?.(e);
+        }, class: className, ...rest, children: rest.children }));
+});
+
+exports.TabsTab = TabsTab;

package/dist/cjs/components/tabs/tabs.js

@@ -0,0 +1,66 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('@digdir/designsystemet-web');
+var cl = require('clsx/lite');
+var react = require('react');
+var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
+
+const Context = react.createContext({});
+/**
+ * Display a group of tabs that can be toggled between.
+ *
+ * @example
+ * <Tabs onChange={(value) => console.log(value)}>
+ *   <Tabs.List>
+ *     <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
+ *     <Tabs.Tab value='2'>Tab 2</Tabs.Tab>
+ *     <Tabs.Tab value='3'>Tab 3</Tabs.Tab>
+ *   </Tabs.List>
+ *   <Tabs.Panel value='1'>content 1</Tabs.Panel>
+ *   <Tabs.Panel value='2'>content 2</Tabs.Panel>
+ *   <Tabs.Panel value='3'>content 3</Tabs.Panel>
+ * </Tabs>
+ */
+const Tabs = react.forwardRef(function Tabs({ value, defaultValue, className, onChange, ...rest }, ref) {
+    const isControlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
+    const tabsRef = react.useRef(null);
+    const valuePrefix = react.useId(); // Used to generate unique value-based ids for tabs and panels
+    const mergedRefs = useMergeRefs.useMergeRefs([ref, tabsRef]);
+    let onValueChange = onChange;
+    if (!isControlled) {
+        onValueChange = (newValue) => {
+            setUncontrolledValue(newValue);
+            onChange?.(newValue);
+        };
+        value = uncontrolledValue;
+    }
+    react.useEffect(() => {
+        if (!isControlled || !tabsRef.current || value === undefined)
+            return;
+        tabsRef.current?.tabList?.tabs?.forEach((tab) => {
+            if (tab.getAttribute('data-value') === value)
+                tab.setAttribute('aria-selected', 'true');
+        });
+    }, [value, isControlled]);
+    react.useEffect(() => {
+        if (defaultValue && tabsRef.current) {
+            tabsRef.current?.tabList?.tabs?.forEach((tab) => {
+                if (tab.getAttribute('data-value') === defaultValue)
+                    tab.setAttribute('aria-selected', 'true');
+            });
+        }
+    }, []);
+    return (jsxRuntime.jsx(Context.Provider, { value: {
+            isControlled,
+            currentValue: value,
+            onChange: onValueChange,
+            getPrefixedValue: (value) => value && `${valuePrefix}-${value}`,
+        }, children: jsxRuntime.jsx("ds-tabs", { suppressHydrationWarning // Since <ds-tablist> adds attributes
+            : true, ref: mergedRefs, class: cl('ds-tabs', className), ...rest }) }));
+});
+
+exports.Context = Context;
+exports.Tabs = Tabs;

package/dist/cjs/components/tag/tag.js

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * Use `Tag` to display categories or statuses.
+ *
+ * @example
+ * <Tag>Melk</Tag>
+ */
+const Tag = react.forwardRef(function Tag({ className, variant = 'default', ...rest }, ref) {
+    return (jsxRuntime.jsx("span", { className: cl('ds-tag', className), ref: ref, "data-variant": variant, ...rest }));
+});
+
+exports.Tag = Tag;

package/dist/cjs/components/textarea/textarea.js

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * Native HTML textarea element.
+ *
+ * @example
+ * <Textarea />
+ */
+const Textarea = react.forwardRef(function Textarea({ className, ...rest }, ref) {
+    return (jsxRuntime.jsx("textarea", { className: cl('ds-input', className), ref: ref, ...rest }));
+});
+
+exports.Textarea = Textarea;

package/dist/cjs/components/textfield/textfield.js

@@ -0,0 +1,27 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var index = require('../field/index.js');
+var input = require('../input/input.js');
+var label = require('../label/label.js');
+var textarea = require('../textarea/textarea.js');
+var validationMessage = require('../validation-message/validation-message.js');
+var fieldDescription = require('../field/field-description.js');
+var fieldAffix = require('../field/field-affix.js');
+
+/**
+ *  Composed text input component using `Field`
+ *
+ * `classname` & `style` are passed to the wrapper elements.
+ *
+ * Rest props are passed to the `Input` or `Textarea` component.
+ * @example
+ * <Textfield label="Textfield label">
+ */
+const Textfield = react.forwardRef(function Textfield({ label: label$1, description, error, multiline, prefix, suffix, 'data-size': size, counter, style, className, ...rest }, ref) {
+    return (jsxRuntime.jsxs(index.Field, { className: className, "data-size": size, style: style, children: [!!label$1 && jsxRuntime.jsx(label.Label, { children: label$1 }), !!description && jsxRuntime.jsx(fieldDescription.FieldDescription, { children: description }), jsxRuntime.jsxs(fieldAffix.FieldAffixes, { children: [prefix === undefined || jsxRuntime.jsx(fieldAffix.FieldAffix, { children: prefix }), multiline === true ? (jsxRuntime.jsx(textarea.Textarea, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })) : (jsxRuntime.jsx(input.Input, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })), suffix === undefined || jsxRuntime.jsx(fieldAffix.FieldAffix, { children: suffix })] }), !!counter && (jsxRuntime.jsx(index.Field.Counter, { ...(typeof counter === 'number' ? { limit: counter } : counter) })), !!error && jsxRuntime.jsx(validationMessage.ValidationMessage, { children: error })] }));
+});
+
+exports.Textfield = Textfield;

package/dist/cjs/components/toggle-group/index.js

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+var toggleGroup = require('./toggle-group.js');
+var toggleGroupItem = require('./toggle-group-item.js');
+
+/**
+ * Display a group of buttons that can be toggled between.
+ *
+ * @example
+ * <ToggleGroup data-toggle-group="Label" 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 ToggleGroupComponent = Object.assign(toggleGroup.ToggleGroup, {
+    Item: toggleGroupItem.ToggleGroupItem,
+});
+ToggleGroupComponent.Item.displayName = 'ToggleGroup.Item';
+
+exports.ToggleGroupItem = toggleGroupItem.ToggleGroupItem;
+exports.ToggleGroup = ToggleGroupComponent;

package/dist/cjs/components/toggle-group/toggle-group-item.js

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+var toggleGroup = require('./toggle-group.js');
+
+/**
+ * A single item in a ToggleGroup.
+ * @example
+ * <ToggleGroupItem value='1'>Toggle 1</ToggleGroupItem>
+ */
+const ToggleGroupItem = react.forwardRef(function ToggleGroupItem({ className, children, icon, value: rawValue, ...rest }, ref) {
+    const genValue = react.useId();
+    const toggleGroup$1 = react.useContext(toggleGroup.ToggleGroupContext);
+    const value = rawValue ?? genValue;
+    const active = toggleGroup$1.value === value;
+    const { 'aria-disabled': ariaDisabled, disabled, form, formAction, formEncType, formMethod, formNoValidate, formTarget, required, ...labelProps } = rest;
+    return (jsxRuntime.jsxs("label", { ref: ref, ...labelProps, className: cl('ds-button', className), "data-variant": 'tertiary', "aria-disabled": ariaDisabled ?? disabled, children: [jsxRuntime.jsx("input", { "aria-disabled": ariaDisabled, checked: active, disabled: disabled, form: form, formAction: formAction, formEncType: formEncType, formMethod: formMethod, formNoValidate: formNoValidate, formTarget: formTarget, name: toggleGroup$1.name, onChange: () => toggleGroup$1.onChange?.(value), required: required, type: 'radio', value: value }), children] }));
+});
+
+exports.ToggleGroupItem = ToggleGroupItem;

package/dist/cjs/components/toggle-group/toggle-group.js

@@ -0,0 +1,43 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+const ToggleGroupContext = react.createContext({});
+/**
+ * Display a group of buttons that can be toggled between.
+ *
+ * @example
+ * <ToggleGroup data-toggle-group="Label" 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(function ToggleGroup({ children, className, defaultValue, name, onChange, value, variant, ...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(ToggleGroupContext.Provider, { value: {
+            defaultValue,
+            name: name ?? `togglegroup-name-${nameId}`,
+            onChange: onValueChange,
+            value,
+            variant,
+        }, children: jsxRuntime.jsx("fieldset", { className: cl('ds-toggle-group', className), "data-toggle-group": '' // Default to empty string to ensure attribute is present
+            , "data-variant": variant, suppressHydrationWarning // Since @digdir/designsystemet-web adds attributes
+            : true, ref: ref, ...rest, children: children }) }));
+});
+
+exports.ToggleGroup = ToggleGroup;
+exports.ToggleGroupContext = ToggleGroupContext;

package/dist/cjs/components/tooltip/tooltip.js

@@ -0,0 +1,29 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+require('@digdir/designsystemet-web');
+var react = require('react');
+
+/**
+ * Tooltip component that displays a small piece of information when hovering or focusing on an element.
+ *
+ * @example
+ * <Tooltip content='This is a tooltip'>
+ *  <button>Hover me</button>
+ * </Tooltip>
+ *
+ * @example
+ * <Tooltip content='This is a tooltip'>
+ *  Hover me
+ * </Tooltip>
+ */
+const Tooltip = react.forwardRef(function Tooltip({ content, placement = 'top', autoPlacement = true, ...rest }, ref) {
+    /* check if children is a string */
+    const isString = typeof rest.children === 'string';
+    return (jsxRuntime.jsx(reactSlot.Slot, { "data-tooltip": content, "data-placement": placement, "data-autoplacement": autoPlacement, suppressHydrationWarning // Since data-tooltip adds aria-label/aria-description
+        : true, ref: ref, ...rest, children: isString ? jsxRuntime.jsx("span", { tabIndex: 0, children: rest.children }) : rest.children }));
+});
+
+exports.Tooltip = Tooltip;

package/dist/cjs/components/validation-message/validation-message.js

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * Use `ValidationMessage` to display validation text
+ *
+ * @example
+ * <ValidationMessage>This is a danger validation message</ValidationMessage>
+ */
+const ValidationMessage = react.forwardRef(function ValidationMessage({ className, asChild, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'p';
+    return (jsxRuntime.jsx(Component, { className: cl('ds-validation-message', className), "data-field": 'validation', ref: ref, suppressHydrationWarning // Since <ds-field> adds attributes
+        : true, ...rest }));
+});
+
+exports.ValidationMessage = ValidationMessage;