@digdir/designsystemet-react 0.52.0-alpha.0

package/dist/cjs/components/Tooltip/Tooltip.js

@@ -0,0 +1,89 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../node_modules/clsx/dist/clsx.js');
+var floatingUi_react = require('../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
+var Tooltip_module = require('./Tooltip.module.css.js');
+var floatingUi_dom = require('../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
+var floatingUi_core = require('../../node_modules/@floating-ui/core/dist/floating-ui.core.js');
+var floatingUi_reactDom = require('../../node_modules/@floating-ui/react/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.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 ARROW_HEIGHT = 7;
+const ARROW_GAP = 4;
+const Tooltip = React.forwardRef(({ children, content, placement = 'top', delay = 150, open: userOpen, defaultOpen = false, portal, inverted, className, style, ...rest }, ref) => {
+    const [isOpen, setIsOpen] = React.useState(defaultOpen);
+    const Container = portal ? floatingUi_react.FloatingPortal : React__namespace.Fragment;
+    const arrowRef = React__namespace.useRef(null);
+    const internalOpen = userOpen ?? isOpen;
+    const { refs, floatingStyles, context } = floatingUi_react.useFloating({
+        open: internalOpen,
+        onOpenChange: setIsOpen,
+        placement,
+        whileElementsMounted: floatingUi_dom.autoUpdate,
+        middleware: [
+            floatingUi_core.offset(ARROW_HEIGHT + ARROW_GAP),
+            floatingUi_core.flip({
+                fallbackAxisSideDirection: 'start',
+            }),
+            floatingUi_core.shift(),
+            floatingUi_reactDom.arrow({
+                element: arrowRef,
+            }),
+        ],
+    });
+    const { styles: animationStyles } = floatingUi_react.useTransitionStyles(context, {
+        initial: {
+            opacity: 0,
+        },
+    });
+    const { getReferenceProps, getFloatingProps } = floatingUi_react.useInteractions([
+        // Event listeners to change the open state
+        floatingUi_react.useHover(context, { move: false, delay }),
+        floatingUi_react.useFocus(context),
+        floatingUi_react.useDismiss(context),
+        floatingUi_react.useRole(context, { role: 'tooltip' }),
+    ]);
+    const mergedRef = floatingUi_react.useMergeRefs([ref, refs.setFloating]);
+    const childMergedRef = floatingUi_react.useMergeRefs([
+        children
+            .ref,
+        refs.setReference,
+    ]);
+    if (!children ||
+        children?.type === React__namespace.Fragment ||
+        children === React__namespace.Fragment) {
+        console.error('<Tooltip> children needs to be a single ReactElement and not: <React.Fragment/> | <></>');
+        return null;
+    }
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [React.cloneElement(children, getReferenceProps({
+                ref: childMergedRef,
+            })), internalOpen && (jsxRuntime.jsx(floatingUi_react.FloatingPortal, { children: jsxRuntime.jsx(Container, { children: jsxRuntime.jsxs("div", { ref: refs.setFloating, style: { ...floatingStyles, ...animationStyles, ...style }, role: 'tooltip', ...getFloatingProps({
+                            className: clsx.clsx(Tooltip_module.wrapper, inverted && Tooltip_module.inverted, className),
+                            ref: mergedRef,
+                            ...rest,
+                        }), children: [content, jsxRuntime.jsx(floatingUi_react.FloatingArrow, { ref: arrowRef, context: context, className: Tooltip_module.arrow, height: ARROW_HEIGHT })] }) }) }))] }));
+});
+Tooltip.displayName = 'Tooltip';
+
+exports.Tooltip = Tooltip;

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

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"wrapper":"fds-tooltip-wrapper-47dedd27","inverted":"fds-tooltip-inverted-47dedd27","arrow":"fds-tooltip-arrow-47dedd27"};
+
+module.exports = classes;

package/dist/cjs/components/Typography/ErrorMessage/ErrorMessage.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 index = require('../../../node_modules/@radix-ui/react-slot/dist/index.js');
+var ErrorMessage_module = require('./ErrorMessage.module.css.js');
+
+/** Use `ErrorMessage` to display text as error message. */
+const ErrorMessage = React.forwardRef(({ className, size = 'medium', spacing, as = 'div', asChild, error = true, ...rest }, ref) => {
+    const Component = asChild ? index.Slot : as;
+    return (jsxRuntime.jsx(Component, { ref: ref, className: clsx.clsx(ErrorMessage_module.errorMessage, ErrorMessage_module[size], {
+            [ErrorMessage_module.spacing]: !!spacing,
+        }, error && ErrorMessage_module.error, className), ...rest }));
+});
+ErrorMessage.displayName = 'ErrorMessage';
+
+exports.ErrorMessage = ErrorMessage;

package/dist/cjs/components/Typography/ErrorMessage/ErrorMessage.module.css.js

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"errorMessage":"fds-errormessage-errorMessage-a030a5d1","error":"fds-errormessage-error-a030a5d1","spacing":"fds-errormessage-spacing-a030a5d1","large":"fds-errormessage-large-a030a5d1","medium":"fds-errormessage-medium-a030a5d1","small":"fds-errormessage-small-a030a5d1","xsmall":"fds-errormessage-xsmall-a030a5d1"};
+
+module.exports = classes;

package/dist/cjs/components/Typography/Heading/Heading.js

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../../node_modules/clsx/dist/clsx.js');
+var index = require('../../../node_modules/@radix-ui/react-slot/dist/index.js');
+var Heading_module = require('./Heading.module.css.js');
+
+/** Use `Heading` to render h1-6 elements with heading text styles.  */
+const Heading = React.forwardRef(({ level = 1, size = 'xlarge', spacing = false, className, as, asChild, ...rest }, ref) => {
+    const Component = asChild
+        ? index.Slot
+        : as ?? `h${level ?? 1}`;
+    return (jsxRuntime.jsx(Component, { ref: ref, className: clsx.clsx(Heading_module.heading, Heading_module[`size-${size}`], {
+            [Heading_module.spacing]: spacing,
+        }, className), ...rest }));
+});
+Heading.displayName = 'Heading';
+
+exports.Heading = Heading;

package/dist/cjs/components/Typography/Heading/Heading.module.css.js

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"heading":"fds-heading-heading-f77d34ab","spacing":"fds-heading-spacing-f77d34ab","size-3xlarge":"fds-heading-size-3xlarge-f77d34ab","size-2xlarge":"fds-heading-size-2xlarge-f77d34ab","size-xlarge":"fds-heading-size-xlarge-f77d34ab","size-large":"fds-heading-size-large-f77d34ab","size-medium":"fds-heading-size-medium-f77d34ab","size-small":"fds-heading-size-small-f77d34ab","size-xsmall":"fds-heading-size-xsmall-f77d34ab","size-xxsmall":"fds-heading-size-xxsmall-f77d34ab"};
+
+module.exports = classes;

package/dist/cjs/components/Typography/Ingress/Ingress.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 index = require('../../../node_modules/@radix-ui/react-slot/dist/index.js');
+var Ingress_module = require('./Ingress.module.css.js');
+
+/** Use `Ingress` to display text as ingress. */
+const Ingress = React.forwardRef(({ className, size = 'medium', spacing, as = 'p', asChild, ...rest }, ref) => {
+    const Component = asChild ? index.Slot : as;
+    return (jsxRuntime.jsx(Component, { ref: ref, className: clsx.clsx(Ingress_module.ingress, Ingress_module[size], {
+            [Ingress_module.spacing]: !!spacing,
+        }, className), ...rest }));
+});
+Ingress.displayName = 'Ingress';
+
+exports.Ingress = Ingress;

package/dist/cjs/components/Typography/Ingress/Ingress.module.css.js

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"ingress":"fds-ingress-ingress-e1a65285","spacing":"fds-ingress-spacing-e1a65285","medium":"fds-ingress-medium-e1a65285"};
+
+module.exports = classes;

package/dist/cjs/components/Typography/Label/Label.js

@@ -0,0 +1,22 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../../node_modules/clsx/dist/clsx.js');
+var index = require('../../../node_modules/@radix-ui/react-slot/dist/index.js');
+var Label_module = require('./Label.module.css.js');
+
+const fontWeightsClasses = {
+    regular: Label_module.regularWeight,
+    medium: Label_module.mediumWeight,
+    semibold: Label_module.semiboldWeight,
+};
+/** Use `Label` for labels. */
+const Label = React.forwardRef(({ className, size = 'medium', spacing, as = 'label', weight = 'medium', asChild, ...rest }, ref) => {
+    const Component = asChild ? index.Slot : as;
+    return (jsxRuntime.jsx(Component, { ref: ref, className: clsx.clsx(Label_module.label, Label_module[size], spacing && Label_module.spacing, weight && [fontWeightsClasses[weight]], className), ...rest }));
+});
+Label.displayName = 'Label';
+
+exports.Label = Label;

package/dist/cjs/components/Typography/Label/Label.module.css.js

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"label":"fds-label-label-b9d81987","spacing":"fds-label-spacing-b9d81987","large":"fds-label-large-b9d81987","medium":"fds-label-medium-b9d81987","small":"fds-label-small-b9d81987","xsmall":"fds-label-xsmall-b9d81987","regularWeight":"fds-label-regularWeight-b9d81987","mediumWeight":"fds-label-mediumWeight-b9d81987","semiboldWeight":"fds-label-semiboldWeight-b9d81987"};
+
+module.exports = classes;

package/dist/cjs/components/Typography/Paragraph/Paragraph.js

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../../node_modules/clsx/dist/clsx.js');
+var index = require('../../../node_modules/@radix-ui/react-slot/dist/index.js');
+var Paragraph_module = require('./Paragraph.module.css.js');
+
+/** Use `Paragraph` to display text with paragraph text styles. */
+const Paragraph = React.forwardRef(({ className, size = 'medium', spacing, as = 'p', asChild, short, ...rest }, ref) => {
+    const Component = asChild ? index.Slot : as;
+    return (jsxRuntime.jsx(Component, { ref: ref, className: clsx.clsx(Paragraph_module.paragraph, Paragraph_module[size], {
+            [Paragraph_module.spacing]: !!spacing,
+            [Paragraph_module.short]: short,
+        }, className), ...rest }));
+});
+Paragraph.displayName = 'Paragraph';
+
+exports.Paragraph = Paragraph;

package/dist/cjs/components/Typography/Paragraph/Paragraph.module.css.js

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"paragraph":"fds-paragraph-paragraph-10d75e13","spacing":"fds-paragraph-spacing-10d75e13","large":"fds-paragraph-large-10d75e13","short":"fds-paragraph-short-10d75e13","medium":"fds-paragraph-medium-10d75e13","small":"fds-paragraph-small-10d75e13","xsmall":"fds-paragraph-xsmall-10d75e13"};
+
+module.exports = classes;

package/dist/cjs/components/form/CharacterCounter.js

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var utility_module = require('../../utilities/utility.module.css.js');
+var ErrorMessage = require('../Typography/ErrorMessage/ErrorMessage.js');
+
+const defaultLabel = (count) => count > -1 ? `${count} tegn igjen` : `${Math.abs(count)} tegn for mye`;
+const defaultSrLabel = (maxCount) => `Tekstfelt med plass til ${maxCount} tegn`;
+const CharacterCounter = ({ label = defaultLabel, srLabel: propsSrLabel, maxCount, value, id, size, }) => {
+    const currentCount = maxCount - value.length;
+    const hasExceededLimit = value.length > maxCount;
+    const srLabel = propsSrLabel ? propsSrLabel : defaultSrLabel(maxCount);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: utility_module.visuallyHidden, id: id, children: srLabel }), jsxRuntime.jsx(ErrorMessage.ErrorMessage, { asChild: true, size: size, error: hasExceededLimit, children: jsxRuntime.jsx("span", { "aria-live": hasExceededLimit ? 'polite' : 'off', children: label(currentCount) }) })] }));
+};
+CharacterCounter.displayName = 'CharacterCounter';
+
+exports.CharacterCounter = CharacterCounter;

package/dist/cjs/components/form/Checkbox/Checkbox.js

@@ -0,0 +1,29 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../../node_modules/clsx/dist/clsx.js');
+var floatingUi_react = require('../../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
+var Checkbox_module = require('./Checkbox.module.css.js');
+var useCheckbox = require('./useCheckbox.js');
+var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
+var objectUtils = require('../../../utilities/objectUtils.js');
+var Label = require('../../Typography/Label/Label.js');
+
+const Checkbox = React.forwardRef((props, ref) => {
+    const { children, description, className, ...rest } = props;
+    const { inputProps, descriptionId, hasError, size = 'medium', readOnly, } = useCheckbox.useCheckbox(props);
+    const inputRef = floatingUi_react.useMergeRefs([
+        ref,
+        (el) => {
+            if (el) {
+                el.indeterminate = rest.indeterminate ?? false;
+            }
+        },
+    ]);
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: clsx.clsx(Checkbox_module.container, Checkbox_module[size], inputProps.disabled && Checkbox_module.disabled, hasError && Checkbox_module.error, readOnly && Checkbox_module.readonly, className), children: [jsxRuntime.jsx("input", { className: Checkbox_module.input, ref: inputRef, ...objectUtils.omit(['size', 'error', 'indeterminate'], rest), ...inputProps, type: 'checkbox', "aria-checked": rest.indeterminate ? 'mixed' : inputProps.checked }), jsxRuntime.jsx(Label.Label, { className: Checkbox_module.label, htmlFor: inputProps.id, size: size, weight: 'regular', children: jsxRuntime.jsx("span", { children: children }) }), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: Checkbox_module.description, children: description }) }))] }) }));
+});
+Checkbox.displayName = 'Checkbox';
+
+exports.Checkbox = Checkbox;

package/dist/cjs/components/form/Checkbox/Checkbox.module.css.js

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"container":"fds-checkbox-container-874e13bc","label":"fds-checkbox-label-874e13bc","description":"fds-checkbox-description-874e13bc","input":"fds-checkbox-input-874e13bc","disabled":"fds-checkbox-disabled-874e13bc","readonly":"fds-checkbox-readonly-874e13bc","error":"fds-checkbox-error-874e13bc","small":"fds-checkbox-small-874e13bc","medium":"fds-checkbox-medium-874e13bc","large":"fds-checkbox-large-874e13bc"};
+
+module.exports = classes;

package/dist/cjs/components/form/Checkbox/Group/Group.js

@@ -0,0 +1,30 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Fieldset = require('../../Fieldset/Fieldset.js');
+
+const CheckboxGroupContext = React.createContext(null);
+const CheckboxGroup = React.forwardRef(({ onChange, children, value, readOnly, defaultValue, size = 'medium', ...rest }, ref) => {
+    const [internalValue, setInternalValue] = React.useState(defaultValue ?? []);
+    const toggleValue = (checkboxValue) => {
+        const currentValue = value ?? internalValue;
+        const updatedValue = currentValue.includes(checkboxValue)
+            ? currentValue.filter((x) => x !== checkboxValue)
+            : [...currentValue, checkboxValue];
+        if (typeof value !== 'undefined' || value !== null) {
+            setInternalValue(updatedValue);
+        }
+        onChange?.(updatedValue);
+    };
+    return (jsxRuntime.jsx(Fieldset.Fieldset, { readOnly: readOnly, size: size, ref: ref, ...rest, children: jsxRuntime.jsx(CheckboxGroupContext.Provider, { value: {
+                value,
+                defaultValue,
+                toggleValue,
+            }, children: jsxRuntime.jsx("div", { children: children }) }) }));
+});
+CheckboxGroup.displayName = 'CheckboxGroup';
+
+exports.CheckboxGroup = CheckboxGroup;
+exports.CheckboxGroupContext = CheckboxGroupContext;

package/dist/cjs/components/form/Checkbox/index.js

@@ -0,0 +1,13 @@
+'use client';
+'use strict';
+
+var Checkbox$1 = require('./Checkbox.js');
+var Group = require('./Group/Group.js');
+
+/** `<input> element with `type="checkbox"` used for selecting one option */
+const Checkbox = Checkbox$1.Checkbox;
+Checkbox.Group = Group.CheckboxGroup;
+Checkbox.Group.displayName = 'Checkbox.Group';
+
+exports.CheckboxGroup = Group.CheckboxGroup;
+exports.Checkbox = Checkbox;

package/dist/cjs/components/form/Checkbox/useCheckbox.js

@@ -0,0 +1,44 @@
+'use client';
+'use strict';
+
+var React = require('react');
+var useFormField = require('../useFormField.js');
+var Group = require('./Group/Group.js');
+
+/** Handles props for `Checkbox` in context with `Checkbox.Group` (and `Fieldset`) */
+const useCheckbox = (props) => {
+    const checkboxGroup = React.useContext(Group.CheckboxGroupContext);
+    const { inputProps, readOnly, ...rest } = useFormField.useFormField(props, 'checkbox');
+    return {
+        ...rest,
+        readOnly,
+        inputProps: {
+            ...inputProps,
+            readOnly,
+            type: 'checkbox',
+            defaultChecked: checkboxGroup?.defaultValue
+                ? checkboxGroup?.defaultValue.includes(props.value)
+                : props.defaultChecked,
+            checked: checkboxGroup?.value
+                ? checkboxGroup?.value.includes(props.value)
+                : props.checked,
+            onClick: (e) => {
+                if (readOnly) {
+                    e.preventDefault();
+                    return;
+                }
+                props?.onClick?.(e);
+            },
+            onChange: (e) => {
+                if (readOnly) {
+                    e.preventDefault();
+                    return;
+                }
+                props?.onChange?.(e);
+                checkboxGroup?.toggleValue(props.value);
+            },
+        },
+    };
+};
+
+exports.useCheckbox = useCheckbox;