@dbcdk/react-components 0.0.102 → 0.0.104

package/dist/components/filtering/chip-multi-toggle/ChipMultiToggle.cjs

@@ -0,0 +1,115 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Chip = require('../../../components/chip/Chip');
+var styles = require('./ChipMultiToggle.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function ChipMultiToggle({
+  label,
+  options,
+  selectedValues = [],
+  onChange,
+  onToggle,
+  size = "sm",
+  fullWidth = false,
+  disabled = false,
+  showAllOption = false,
+  allLabel = "Alle",
+  allIcon,
+  allTogglesNone = false,
+  noneValue = "__none__",
+  type = "rounded",
+  dataCy
+}) {
+  const selectedSet = React__default.default.useMemo(() => new Set(selectedValues), [selectedValues]);
+  const isNoneSelected = allTogglesNone && selectedSet.has(noneValue);
+  const isAllSelected = showAllOption && !isNoneSelected && selectedSet.size === 0;
+  const toggleValue = (value) => {
+    if (disabled) return;
+    const next = new Set(selectedSet);
+    if (isNoneSelected) next.delete(noneValue);
+    const willSelect = !next.has(value);
+    if (willSelect) next.add(value);
+    else next.delete(value);
+    const nextArr = Array.from(next);
+    onChange(nextArr);
+    onToggle == null ? void 0 : onToggle(value, willSelect);
+  };
+  const toggleAll = () => {
+    if (disabled) return;
+    if (!allTogglesNone) {
+      onChange([]);
+      return;
+    }
+    if (isAllSelected) {
+      onChange([noneValue]);
+      onToggle == null ? void 0 : onToggle(noneValue, true);
+    } else if (isNoneSelected) {
+      onChange([]);
+      onToggle == null ? void 0 : onToggle(noneValue, false);
+    } else {
+      onChange([]);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.wrapper} ${fullWidth ? styles__default.default.fullWidth : ""}`, "data-cy": dataCy, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.container, children: [
+      showAllOption && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: styles__default.default.chipButton,
+          onClick: toggleAll,
+          "aria-pressed": isAllSelected || isNoneSelected,
+          disabled,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            Chip.Chip,
+            {
+              type,
+              size,
+              severity: "neutral",
+              customIcon: allIcon,
+              selected: isAllSelected || isNoneSelected,
+              children: isNoneSelected ? `${allLabel} (ingen)` : allLabel
+            }
+          )
+        },
+        "__all__"
+      ),
+      options.map((opt) => {
+        const isSelected = !isNoneSelected && selectedSet.has(opt.value);
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: styles__default.default.chipButton,
+            onClick: () => toggleValue(opt.value),
+            "aria-pressed": isSelected,
+            disabled,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              Chip.Chip,
+              {
+                size,
+                customIcon: opt.icon,
+                severity: "neutral",
+                type,
+                selected: isSelected,
+                children: opt.label
+              }
+            )
+          },
+          opt.value
+        );
+      })
+    ] })
+  ] });
+}
+
+exports.ChipMultiToggle = ChipMultiToggle;

package/dist/components/filtering/chip-multi-toggle/ChipMultiToggle.js

@@ -0,0 +1,108 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Chip } from '../../../components/chip/Chip';
+import styles from './ChipMultiToggle.module.css';
+
+function ChipMultiToggle({
+  label,
+  options,
+  selectedValues = [],
+  onChange,
+  onToggle,
+  size = "sm",
+  fullWidth = false,
+  disabled = false,
+  showAllOption = false,
+  allLabel = "Alle",
+  allIcon,
+  allTogglesNone = false,
+  noneValue = "__none__",
+  type = "rounded",
+  dataCy
+}) {
+  const selectedSet = React.useMemo(() => new Set(selectedValues), [selectedValues]);
+  const isNoneSelected = allTogglesNone && selectedSet.has(noneValue);
+  const isAllSelected = showAllOption && !isNoneSelected && selectedSet.size === 0;
+  const toggleValue = (value) => {
+    if (disabled) return;
+    const next = new Set(selectedSet);
+    if (isNoneSelected) next.delete(noneValue);
+    const willSelect = !next.has(value);
+    if (willSelect) next.add(value);
+    else next.delete(value);
+    const nextArr = Array.from(next);
+    onChange(nextArr);
+    onToggle == null ? void 0 : onToggle(value, willSelect);
+  };
+  const toggleAll = () => {
+    if (disabled) return;
+    if (!allTogglesNone) {
+      onChange([]);
+      return;
+    }
+    if (isAllSelected) {
+      onChange([noneValue]);
+      onToggle == null ? void 0 : onToggle(noneValue, true);
+    } else if (isNoneSelected) {
+      onChange([]);
+      onToggle == null ? void 0 : onToggle(noneValue, false);
+    } else {
+      onChange([]);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `${styles.wrapper} ${fullWidth ? styles.fullWidth : ""}`, "data-cy": dataCy, children: [
+    label && /* @__PURE__ */ jsx("span", { className: styles.label, children: label }),
+    /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
+      showAllOption && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: styles.chipButton,
+          onClick: toggleAll,
+          "aria-pressed": isAllSelected || isNoneSelected,
+          disabled,
+          children: /* @__PURE__ */ jsx(
+            Chip,
+            {
+              type,
+              size,
+              severity: "neutral",
+              customIcon: allIcon,
+              selected: isAllSelected || isNoneSelected,
+              children: isNoneSelected ? `${allLabel} (ingen)` : allLabel
+            }
+          )
+        },
+        "__all__"
+      ),
+      options.map((opt) => {
+        const isSelected = !isNoneSelected && selectedSet.has(opt.value);
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: styles.chipButton,
+            onClick: () => toggleValue(opt.value),
+            "aria-pressed": isSelected,
+            disabled,
+            children: /* @__PURE__ */ jsx(
+              Chip,
+              {
+                size,
+                customIcon: opt.icon,
+                severity: "neutral",
+                type,
+                selected: isSelected,
+                children: opt.label
+              }
+            )
+          },
+          opt.value
+        );
+      })
+    ] })
+  ] });
+}
+
+export { ChipMultiToggle };

package/dist/components/filtering/chip-multi-toggle/ChipMultiToggle.module.css

@@ -0,0 +1,59 @@
+/* ChipMultiToggle.module.css */
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-xs);
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+.label {
+  font-weight: var(--font-weight-medium);
+  color: var(--color-fg-muted);
+  white-space: nowrap;
+  line-height: var(--line-height-tight);
+  font-size: var(--font-size-sm);
+}
+
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-xxs);
+}
+
+.chipButton {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+}
+
+.chipButton:disabled {
+  opacity: 1;
+  color: var(--color-disabled-fg);
+}
+
+.chipButton:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+.chipButton:focus-visible > * {
+  border-color: var(--color-border-selected);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+}
+
+.chipButton:focus-visible > .rounded {
+  border-radius: var(--border-radius-rounded);
+}
+
+.chipButton:focus-visible > .default {
+  border-radius: var(--border-radius-default);
+}

package/dist/components/forms/checkbox/Checkbox.cjs

@@ -0,0 +1,88 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var styles = require('./Checkbox.module.css');
+var InputContainer = require('../input-container/InputContainer');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function Checkbox({
+  checked: controlled,
+  onChange,
+  variant = "default",
+  disabled,
+  label,
+  labelAs = "label",
+  size = "md",
+  modified,
+  containerLabel,
+  error,
+  helpText,
+  orientation = "horizontal",
+  labelWidth = "160px",
+  fullWidth = false,
+  required = false,
+  noContainer = false,
+  id,
+  "data-cy": dataCy
+}) {
+  const [internal, setInternal] = react.useState(false);
+  const isChecked = controlled != null ? controlled : internal;
+  const generatedId = react.useId();
+  const controlId = id != null ? id : `checkbox-${generatedId}`;
+  const toggle = (e) => {
+    if (disabled) return;
+    const value = !isChecked;
+    setInternal(value);
+    onChange == null ? void 0 : onChange(value, e);
+  };
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: [styles__default.default.container, size === "sm" ? styles__default.default.containerSm : ""].filter(Boolean).join(" "),
+      "data-cy": dataCy,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            id: controlId,
+            disabled,
+            type: "button",
+            role: "checkbox",
+            "aria-checked": isChecked,
+            "aria-disabled": disabled || void 0,
+            "aria-invalid": Boolean(error) || void 0,
+            onClick: toggle,
+            className: [styles__default.default.checkbox, isChecked ? styles__default.default.checked : "", styles__default.default[variant], styles__default.default[size]].filter(Boolean).join(" "),
+            children: isChecked && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: styles__default.default.icon })
+          }
+        ),
+        label && (labelAs === "label" ? /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles__default.default.label, htmlFor: controlId, children: label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label }))
+      ]
+    }
+  );
+  if (noContainer) return content;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    InputContainer.InputContainer,
+    {
+      modified,
+      label: containerLabel,
+      htmlFor: controlId,
+      error,
+      helpText,
+      orientation,
+      size,
+      labelWidth,
+      fullWidth,
+      required,
+      children: content
+    }
+  );
+}
+
+exports.Checkbox = Checkbox;

package/dist/components/forms/checkbox/Checkbox.js

@@ -0,0 +1,82 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Check } from 'lucide-react';
+import { useState, useId } from 'react';
+import styles from './Checkbox.module.css';
+import { InputContainer } from '../input-container/InputContainer';
+
+function Checkbox({
+  checked: controlled,
+  onChange,
+  variant = "default",
+  disabled,
+  label,
+  labelAs = "label",
+  size = "md",
+  modified,
+  containerLabel,
+  error,
+  helpText,
+  orientation = "horizontal",
+  labelWidth = "160px",
+  fullWidth = false,
+  required = false,
+  noContainer = false,
+  id,
+  "data-cy": dataCy
+}) {
+  const [internal, setInternal] = useState(false);
+  const isChecked = controlled != null ? controlled : internal;
+  const generatedId = useId();
+  const controlId = id != null ? id : `checkbox-${generatedId}`;
+  const toggle = (e) => {
+    if (disabled) return;
+    const value = !isChecked;
+    setInternal(value);
+    onChange == null ? void 0 : onChange(value, e);
+  };
+  const content = /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: [styles.container, size === "sm" ? styles.containerSm : ""].filter(Boolean).join(" "),
+      "data-cy": dataCy,
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            id: controlId,
+            disabled,
+            type: "button",
+            role: "checkbox",
+            "aria-checked": isChecked,
+            "aria-disabled": disabled || void 0,
+            "aria-invalid": Boolean(error) || void 0,
+            onClick: toggle,
+            className: [styles.checkbox, isChecked ? styles.checked : "", styles[variant], styles[size]].filter(Boolean).join(" "),
+            children: isChecked && /* @__PURE__ */ jsx(Check, { className: styles.icon })
+          }
+        ),
+        label && (labelAs === "label" ? /* @__PURE__ */ jsx("label", { className: styles.label, htmlFor: controlId, children: label }) : /* @__PURE__ */ jsx("span", { className: styles.label, children: label }))
+      ]
+    }
+  );
+  if (noContainer) return content;
+  return /* @__PURE__ */ jsx(
+    InputContainer,
+    {
+      modified,
+      label: containerLabel,
+      htmlFor: controlId,
+      error,
+      helpText,
+      orientation,
+      size,
+      labelWidth,
+      fullWidth,
+      required,
+      children: content
+    }
+  );
+}
+
+export { Checkbox };

package/dist/components/forms/checkbox/Checkbox.module.css

@@ -0,0 +1,104 @@
+.container {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  vertical-align: middle;
+  line-height: var(--line-height-normal);
+  color: var(--color-fg-default);
+}
+
+.containerSm {
+  gap: var(--spacing-xs);
+}
+
+.checkbox {
+  width: var(--component-size-sm);
+  height: var(--component-size-sm);
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--border-width-thin) solid var(--color-border-default);
+  border-radius: var(--border-radius-sm);
+  background-color: var(--color-bg-surface);
+  cursor: pointer;
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    border-color var(--transition-fast) var(--ease-standard),
+    box-shadow var(--transition-fast) var(--ease-standard);
+}
+
+.checkbox.sm {
+  width: var(--component-size-xs);
+  height: var(--component-size-xs);
+}
+
+.label {
+  display: block;
+  font-size: var(--font-size-sm);
+  min-width: 0;
+  flex: 1 1 auto;
+  line-height: var(--line-height-normal);
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.checkbox:hover {
+  border-color: var(--color-fg-default);
+}
+
+.checked {
+  background-color: var(--color-brand);
+  border-color: var(--color-brand);
+}
+
+.icon {
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+  color: var(--color-fg-on-brand);
+  stroke-width: 2;
+  pointer-events: none;
+}
+
+.default {
+  background-color: var(--color-bg-toolbar);
+  border-color: var(--color-bg-toolbar);
+  &:not(:hover) {
+    border-color: var(--color-bg-toolbar);
+  }
+
+  .icon {
+    color: var(--color-fg-default);
+  }
+}
+
+.outlined.checked {
+  background-color: transparent;
+  border-color: var(--color-border-default);
+  &:not(:hover) {
+    border-color: var(--color-brand);
+  }
+
+  .icon {
+    color: var(--color-brand);
+  }
+}
+
+.success.checked {
+  background-color: var(--color-status-success);
+  &:not(:hover) {
+    border-color: transparent;
+  }
+}
+
+.info.checked {
+  background-color: var(--color-status-info);
+  &:not(:hover) {
+    border-color: transparent;
+  }
+
+  .icon {
+    color: var(--color-fg-on-brand);
+  }
+}

package/dist/components/forms/checkbox-group/CheckboxGroup.cjs

@@ -0,0 +1,121 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var styles = require('./CheckboxGroup.module.css');
+var Checkbox = require('../checkbox/Checkbox');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function CheckboxGroup({
+  label,
+  options,
+  selectedValues,
+  onChange,
+  onToggle,
+  variant = "outlined",
+  size = "md",
+  wrap = false,
+  fullWidth = false,
+  disabled = false,
+  contained = true,
+  actionLabels = { clear: "Ryd", all: "Alle" },
+  onActionClick,
+  "data-cy": dataCy
+}) {
+  var _a, _b;
+  const selectedSet = react.useMemo(() => new Set(selectedValues), [selectedValues]);
+  const enabledValues = react.useMemo(
+    () => options.filter((o) => !(disabled || o.disabled)).map((o) => o.value),
+    [options, disabled]
+  );
+  const allEnabledSelected = enabledValues.length > 0 && enabledValues.every((v) => selectedSet.has(v));
+  const toggleValue = (value) => {
+    if (disabled) return;
+    const next = new Set(selectedSet);
+    const willSelect = !next.has(value);
+    if (willSelect) next.add(value);
+    else next.delete(value);
+    onChange(Array.from(next));
+    onToggle == null ? void 0 : onToggle(value, willSelect);
+  };
+  const selectAll = () => {
+    if (disabled) return;
+    if (enabledValues.length === 0) return;
+    onChange([...enabledValues]);
+    onToggle == null ? void 0 : onToggle("__select_all__", true);
+  };
+  const deselectAll = () => {
+    if (disabled) return;
+    onChange([]);
+    onToggle == null ? void 0 : onToggle("__deselect_all__", false);
+  };
+  const handleAction = () => {
+    if (disabled) return;
+    if (enabledValues.length === 0) return;
+    if (allEnabledSelected) {
+      deselectAll();
+      onActionClick == null ? void 0 : onActionClick("clear");
+    } else {
+      selectAll();
+      onActionClick == null ? void 0 : onActionClick("all");
+    }
+  };
+  const wrapperClassName = [
+    styles__default.default.wrapper,
+    fullWidth ? styles__default.default.fullWidth : "",
+    contained ? styles__default.default.contained : styles__default.default.plain,
+    styles__default.default[size]
+  ].filter(Boolean).join(" ");
+  const itemsClassName = [styles__default.default.items, wrap ? styles__default.default.wrap : styles__default.default.noWrap].join(" ");
+  const allText = (_a = actionLabels.all) != null ? _a : "Alle";
+  const clearText = (_b = actionLabels.clear) != null ? _b : "Ryd";
+  const actionMinWidth = `${Math.max(allText.length, clearText.length)}ch`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: wrapperClassName,
+      "data-cy": dataCy,
+      style: { ["--checkboxgroup-action-min-width"]: actionMinWidth },
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.groupLabel, children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: itemsClassName, role: "group", "aria-label": label, children: options.map((opt) => {
+          const isChecked = selectedSet.has(opt.value);
+          const isDisabled = disabled || !!opt.disabled;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            Checkbox.Checkbox,
+            {
+              label: opt.label,
+              checked: isChecked,
+              disabled: isDisabled,
+              variant,
+              size: "sm",
+              onChange: () => {
+                if (isDisabled) return;
+                toggleValue(opt.value);
+              },
+              noContainer: true
+            },
+            opt.value
+          );
+        }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: styles__default.default.actionButton,
+            onClick: handleAction,
+            disabled: disabled || enabledValues.length === 0,
+            "aria-disabled": disabled || enabledValues.length === 0,
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.actionText, "data-mode": allEnabledSelected ? "clear" : "all", children: allEnabledSelected ? clearText : allText })
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.CheckboxGroup = CheckboxGroup;