@dbcdk/react-components 0.0.167 → 0.0.169

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

@@ -1,99 +0,0 @@
-'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

@@ -1,39 +0,0 @@
-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

@@ -1,93 +0,0 @@
-'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

@@ -1,110 +0,0 @@
-.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

@@ -1,121 +0,0 @@
-'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

@@ -1,47 +0,0 @@
-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

@@ -1,115 +0,0 @@
-'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 };