@dbcdk/react-components 0.0.169 → 0.0.170

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

@@ -0,0 +1,99 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var Tooltip = require('../../../components/overlay/tooltip/Tooltip');
+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",
+  endAdornment,
+  endAdornmentAriaHidden = true,
+  size = "md",
+  modified,
+  containerLabel,
+  error,
+  helpText,
+  orientation = "horizontal",
+  labelWidth = "160px",
+  fullWidth = false,
+  required = false,
+  noContainer = false,
+  id,
+  "data-cy": dataCy,
+  tooltip,
+  tooltipPlacement
+}) {
+  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(Tooltip.Tooltip, { content: tooltip, placement: tooltipPlacement, 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 })),
+        endAdornment && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.endAdornment, "aria-hidden": endAdornmentAriaHidden, children: endAdornment })
+      ]
+    }
+  );
+  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.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { JSX, ReactNode } from 'react';
+import type { TooltipPlacement } from '../../../components/overlay/tooltip/TooltipProvider';
+type Variant = 'default' | 'primary' | 'outlined' | 'success' | 'info';
+type Size = 'sm' | 'md' | 'lg';
+interface CheckboxProps {
+    checked?: boolean;
+    onChange?: (checked: boolean, event: React.MouseEvent<HTMLButtonElement>) => void;
+    variant?: Variant;
+    disabled?: boolean;
+    modified?: boolean;
+    label?: ReactNode;
+    labelAs?: 'label' | 'span';
+    /**
+     * Extra content rendered after the label (e.g. a status dot or badge).
+     * The component owns the layout/spacing for this slot.
+     */
+    endAdornment?: ReactNode;
+    /**
+     * Whether the endAdornment wrapper is hidden from assistive tech.
+     * Defaults to true since endAdornment is typically decorative.
+     */
+    endAdornmentAriaHidden?: boolean;
+    size?: Size;
+    containerLabel?: string;
+    error?: string;
+    helpText?: string;
+    orientation?: 'vertical' | 'horizontal';
+    labelWidth?: string;
+    fullWidth?: boolean;
+    required?: boolean;
+    noContainer?: boolean;
+    id?: string;
+    'data-cy'?: string;
+    tooltip?: ReactNode;
+    tooltipPlacement?: TooltipPlacement;
+}
+export declare function Checkbox({ checked: controlled, onChange, variant, disabled, label, labelAs, endAdornment, endAdornmentAriaHidden, size, modified, containerLabel, error, helpText, orientation, labelWidth, fullWidth, required, noContainer, id, 'data-cy': dataCy, tooltip, tooltipPlacement, }: CheckboxProps): JSX.Element;
+export {};

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

@@ -0,0 +1,93 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Check } from 'lucide-react';
+import { useState, useId } from 'react';
+import { Tooltip } from '../../../components/overlay/tooltip/Tooltip';
+import styles from './Checkbox.module.css';
+import { InputContainer } from '../input-container/InputContainer';
+
+function Checkbox({
+  checked: controlled,
+  onChange,
+  variant = "default",
+  disabled,
+  label,
+  labelAs = "label",
+  endAdornment,
+  endAdornmentAriaHidden = true,
+  size = "md",
+  modified,
+  containerLabel,
+  error,
+  helpText,
+  orientation = "horizontal",
+  labelWidth = "160px",
+  fullWidth = false,
+  required = false,
+  noContainer = false,
+  id,
+  "data-cy": dataCy,
+  tooltip,
+  tooltipPlacement
+}) {
+  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(Tooltip, { content: tooltip, placement: tooltipPlacement, 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 })),
+        endAdornment && /* @__PURE__ */ jsx("span", { className: styles.endAdornment, "aria-hidden": endAdornmentAriaHidden, children: endAdornment })
+      ]
+    }
+  );
+  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,110 @@
+.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;
+}
+
+.endAdornment {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+}
+
+.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;

package/dist/components/forms/checkbox-group/CheckboxGroup.d.ts

@@ -0,0 +1,47 @@
+import type { JSX } from 'react';
+type Variant = 'default' | 'primary' | 'outlined';
+type Size = 'sm' | 'md' | 'lg';
+export interface CheckboxGroupOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+interface CheckboxGroupProps {
+    /** Label shown before the checkboxes (e.g. "Fejlede i:") */
+    label?: string;
+    options: CheckboxGroupOption[];
+    selectedValues: string[];
+    /**
+     * Called with the NEXT selectedValues array (so parent can just setState(next)).
+     */
+    onChange: (nextSelectedValues: string[]) => void;
+    /** Optional: called when a single value was toggled */
+    onToggle?: (toggledValue: string, isSelected: boolean) => void;
+    /** Pass-through styling */
+    variant?: Variant;
+    size?: Size;
+    /** Layout */
+    wrap?: boolean;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    /**
+     * Renders a compact container row suitable for toolbars:
+     * [Label] [Checkboxes...] [Action]
+     */
+    contained?: boolean;
+    /**
+     * Right-side action that keeps the same width:
+     * - When NOT all enabled options are selected => shows "Alle" and selects all on click
+     * - When ALL enabled options are selected => shows "Ryd" and deselects all on click
+     */
+    actionLabels?: {
+        clear?: string;
+        all?: string;
+    };
+    /** Optional hook when action is clicked */
+    onActionClick?: (mode: 'clear' | 'all') => void;
+    /** Data attributes pass-through */
+    'data-cy'?: string;
+}
+export declare function CheckboxGroup({ label, options, selectedValues, onChange, onToggle, variant, size, wrap, fullWidth, disabled, contained, actionLabels, onActionClick, 'data-cy': dataCy, }: CheckboxGroupProps): JSX.Element;
+export {};

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

@@ -0,0 +1,115 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import styles from './CheckboxGroup.module.css';
+import { Checkbox } from '../checkbox/Checkbox';
+
+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 = useMemo(() => new Set(selectedValues), [selectedValues]);
+  const enabledValues = 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.wrapper,
+    fullWidth ? styles.fullWidth : "",
+    contained ? styles.contained : styles.plain,
+    styles[size]
+  ].filter(Boolean).join(" ");
+  const itemsClassName = [styles.items, wrap ? styles.wrap : styles.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__ */ jsxs(
+    "div",
+    {
+      className: wrapperClassName,
+      "data-cy": dataCy,
+      style: { ["--checkboxgroup-action-min-width"]: actionMinWidth },
+      children: [
+        label && /* @__PURE__ */ jsx("span", { className: styles.groupLabel, children: label }),
+        /* @__PURE__ */ 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__ */ jsx(
+            Checkbox,
+            {
+              label: opt.label,
+              checked: isChecked,
+              disabled: isDisabled,
+              variant,
+              size: "sm",
+              onChange: () => {
+                if (isDisabled) return;
+                toggleValue(opt.value);
+              },
+              noContainer: true
+            },
+            opt.value
+          );
+        }) }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: styles.actionButton,
+            onClick: handleAction,
+            disabled: disabled || enabledValues.length === 0,
+            "aria-disabled": disabled || enabledValues.length === 0,
+            children: /* @__PURE__ */ jsx("span", { className: styles.actionText, "data-mode": allEnabledSelected ? "clear" : "all", children: allEnabledSelected ? clearText : allText })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { CheckboxGroup };