@dbcdk/react-components 0.0.167 → 0.0.169

package/dist/components/forms/checkbox-group/CheckboxGroup.module.css

@@ -1,115 +0,0 @@
-.wrapper {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  flex-direction: row; /* keep on one line */
-}
-
-.fullWidth {
-  width: 100%;
-}
-
-/* Heights aligned with other controls */
-.xs {
-  min-height: var(--component-size-xs);
-}
-
-.sm {
-  min-height: var(--component-size-sm);
-}
-
-.md {
-  min-height: var(--component-size-md);
-}
-
-.lg {
-  min-height: var(--component-size-lg);
-}
-
-/* Subtle container (lightweight) */
-.contained {
-  padding: 0 var(--spacing-xs);
-  border: var(--border-width-thin) solid var(--color-border-subtle);
-  border-radius: var(--border-radius-default);
-  background: var(--color-bg-surface);
-}
-
-.plain {
-  padding: 0;
-  border: 0;
-  background: transparent;
-}
-
-.groupLabel {
-  font-weight: var(--font-weight-medium);
-  color: var(--color-fg-muted);
-  white-space: nowrap;
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-tight);
-}
-
-.items {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.wrap {
-  flex-wrap: wrap;
-}
-
-.noWrap {
-  flex-wrap: nowrap;
-}
-
-/* Right action */
-.actionButton {
-  appearance: none;
-  border: none;
-  background: transparent;
-  padding: 0;
-  margin-left: auto;
-  cursor: pointer;
-
-  display: inline-flex;
-  align-items: center;
-
-  height: 100%;
-}
-
-.actionButton:disabled {
-  cursor: not-allowed;
-}
-
-.actionText {
-  display: inline-block;
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-tight);
-  font-weight: var(--font-weight-medium);
-  white-space: nowrap;
-  text-align: right;
-
-  min-width: var(--checkboxgroup-action-min-width, 4ch);
-  color: var(--color-link);
-}
-
-.actionText[data-mode='all'] {
-  color: var(--color-link);
-}
-
-.actionText[data-mode='clear'] {
-  color: var(--color-link);
-}
-
-.actionButton:not(:disabled):hover .actionText {
-  color: var(--color-link-hover);
-  text-decoration: underline;
-}
-
-.actionButton:focus-visible {
-  outline: 2px solid var(--color-border-strong);
-  outline-offset: 3px;
-  border-radius: var(--border-radius-rounded);
-}

package/dist/components/forms/file-upload/FileUpload.cjs

@@ -1,127 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var lucideReact = require('lucide-react');
-var react = require('react');
-var styles = require('./FileUpload.module.css');
-var InputContainer = require('../input-container/InputContainer');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-const FileUpload = react.forwardRef(function FileUpload2({
-  label,
-  labelAction,
-  error,
-  helpText,
-  helpTextAddition,
-  orientation = "vertical",
-  labelWidth,
-  fullWidth = false,
-  required,
-  modified,
-  onChange,
-  children,
-  hint,
-  height,
-  minWidth,
-  width,
-  maxWidth,
-  id,
-  disabled,
-  className,
-  ...inputProps
-}, ref) {
-  const reactId = react.useId();
-  const inputId = id != null ? id : `file-upload-${reactId}`;
-  const inputRef = react.useRef(null);
-  const [dragging, setDragging] = react.useState(false);
-  react.useImperativeHandle(
-    ref,
-    () => ({
-      clear() {
-        if (inputRef.current) inputRef.current.value = "";
-      }
-    }),
-    []
-  );
-  function handleDragOver(e) {
-    e.preventDefault();
-    if (!disabled) setDragging(true);
-  }
-  function handleDragLeave(e) {
-    if (!e.currentTarget.contains(e.relatedTarget)) setDragging(false);
-  }
-  function handleDrop(e) {
-    e.preventDefault();
-    setDragging(false);
-    if (disabled) return;
-    if (inputRef.current) {
-      const dt = e.dataTransfer;
-      const files = dt.files;
-      onChange == null ? void 0 : onChange(files.length > 0 ? files : null);
-    }
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    InputContainer.InputContainer,
-    {
-      label,
-      labelAction,
-      htmlFor: inputId,
-      error,
-      helpText,
-      helpTextAddition,
-      orientation,
-      labelWidth,
-      fullWidth,
-      required,
-      modified,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "label",
-        {
-          htmlFor: inputId,
-          className: [
-            styles__default.default.dropzone,
-            dragging ? styles__default.default.dragging : "",
-            disabled ? styles__default.default.disabled : "",
-            error ? styles__default.default.hasError : "",
-            fullWidth ? styles__default.default.fullWidth : "",
-            className != null ? className : ""
-          ].filter(Boolean).join(" "),
-          style: {
-            ...height != null ? { height } : void 0,
-            ...minWidth != null ? { minWidth } : void 0,
-            ...width != null ? { width } : void 0,
-            ...maxWidth != null ? { maxWidth } : void 0
-          },
-          onDragOver: handleDragOver,
-          onDragLeave: handleDragLeave,
-          onDrop: handleDrop,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                ...inputProps,
-                ref: inputRef,
-                id: inputId,
-                type: "file",
-                disabled,
-                className: styles__default.default.input,
-                onChange: (e) => onChange == null ? void 0 : onChange(e.target.files)
-              }
-            ),
-            children != null ? children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UploadCloud, { className: styles__default.default.icon, "aria-hidden": true }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.hint, children: hint != null ? hint : "Tr\xE6k filer hertil eller klik for at v\xE6lge" })
-            ] })
-          ]
-        }
-      )
-    }
-  );
-});
-FileUpload.displayName = "FileUpload";
-
-exports.FileUpload = FileUpload;

package/dist/components/forms/file-upload/FileUpload.d.ts

@@ -1,18 +0,0 @@
-import type { InputHTMLAttributes, ReactNode } from 'react';
-import type { InputContainerProps } from '../input-container/InputContainer';
-export interface FileUploadProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'width' | 'onChange'>, Omit<InputContainerProps, 'children' | 'htmlFor' | 'size'> {
-    onChange?: (files: FileList | null) => void;
-    /** Custom content to replace the default icon + text hint */
-    children?: ReactNode;
-    /** Hint shown below the icon when no custom children */
-    hint?: ReactNode;
-    fullWidth?: boolean;
-    height?: number | string;
-    minWidth?: string | number;
-    width?: string | number;
-    maxWidth?: string | number;
-}
-export type FileUploadHandle = {
-    clear(): void;
-};
-export declare const FileUpload: import("react").ForwardRefExoticComponent<FileUploadProps & import("react").RefAttributes<FileUploadHandle>>;

package/dist/components/forms/file-upload/FileUpload.js

@@ -1,121 +0,0 @@
-'use client';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { UploadCloud } from 'lucide-react';
-import { forwardRef, useId, useRef, useState, useImperativeHandle } from 'react';
-import styles from './FileUpload.module.css';
-import { InputContainer } from '../input-container/InputContainer';
-
-const FileUpload = forwardRef(function FileUpload2({
-  label,
-  labelAction,
-  error,
-  helpText,
-  helpTextAddition,
-  orientation = "vertical",
-  labelWidth,
-  fullWidth = false,
-  required,
-  modified,
-  onChange,
-  children,
-  hint,
-  height,
-  minWidth,
-  width,
-  maxWidth,
-  id,
-  disabled,
-  className,
-  ...inputProps
-}, ref) {
-  const reactId = useId();
-  const inputId = id != null ? id : `file-upload-${reactId}`;
-  const inputRef = useRef(null);
-  const [dragging, setDragging] = useState(false);
-  useImperativeHandle(
-    ref,
-    () => ({
-      clear() {
-        if (inputRef.current) inputRef.current.value = "";
-      }
-    }),
-    []
-  );
-  function handleDragOver(e) {
-    e.preventDefault();
-    if (!disabled) setDragging(true);
-  }
-  function handleDragLeave(e) {
-    if (!e.currentTarget.contains(e.relatedTarget)) setDragging(false);
-  }
-  function handleDrop(e) {
-    e.preventDefault();
-    setDragging(false);
-    if (disabled) return;
-    if (inputRef.current) {
-      const dt = e.dataTransfer;
-      const files = dt.files;
-      onChange == null ? void 0 : onChange(files.length > 0 ? files : null);
-    }
-  }
-  return /* @__PURE__ */ jsx(
-    InputContainer,
-    {
-      label,
-      labelAction,
-      htmlFor: inputId,
-      error,
-      helpText,
-      helpTextAddition,
-      orientation,
-      labelWidth,
-      fullWidth,
-      required,
-      modified,
-      children: /* @__PURE__ */ jsxs(
-        "label",
-        {
-          htmlFor: inputId,
-          className: [
-            styles.dropzone,
-            dragging ? styles.dragging : "",
-            disabled ? styles.disabled : "",
-            error ? styles.hasError : "",
-            fullWidth ? styles.fullWidth : "",
-            className != null ? className : ""
-          ].filter(Boolean).join(" "),
-          style: {
-            ...height != null ? { height } : void 0,
-            ...minWidth != null ? { minWidth } : void 0,
-            ...width != null ? { width } : void 0,
-            ...maxWidth != null ? { maxWidth } : void 0
-          },
-          onDragOver: handleDragOver,
-          onDragLeave: handleDragLeave,
-          onDrop: handleDrop,
-          children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                ...inputProps,
-                ref: inputRef,
-                id: inputId,
-                type: "file",
-                disabled,
-                className: styles.input,
-                onChange: (e) => onChange == null ? void 0 : onChange(e.target.files)
-              }
-            ),
-            children != null ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(UploadCloud, { className: styles.icon, "aria-hidden": true }),
-              /* @__PURE__ */ jsx("span", { className: styles.hint, children: hint != null ? hint : "Tr\xE6k filer hertil eller klik for at v\xE6lge" })
-            ] })
-          ]
-        }
-      )
-    }
-  );
-});
-FileUpload.displayName = "FileUpload";
-
-export { FileUpload };

package/dist/components/forms/file-upload/FileUpload.module.css

@@ -1,75 +0,0 @@
-.dropzone {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-xs);
-  padding: var(--spacing-xl) var(--spacing-lg);
-  background: var(--color-bg-surface);
-  border: var(--border-width-thin) dashed var(--color-border-default);
-  border-radius: var(--border-radius-default);
-  cursor: pointer;
-  color: var(--color-fg-muted);
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
-  text-align: center;
-  box-sizing: border-box;
-  transition:
-    background-color var(--transition-fast) var(--ease-standard),
-    border-color var(--transition-fast) var(--ease-standard),
-    color var(--transition-fast) var(--ease-standard);
-}
-
-.fullWidth {
-  width: 100%;
-}
-
-.dropzone:hover:not(.disabled) {
-  background-color: var(--color-bg-selected);
-  border-color: var(--color-border-selected);
-  color: var(--color-fg-default);
-}
-
-.dragging {
-  background-color: var(--color-bg-selected);
-  border-color: var(--color-border-selected);
-  color: var(--color-fg-default);
-  box-shadow: inset 0 0 0 1px var(--color-border-selected);
-}
-
-.hasError {
-  border-color: var(--color-status-error);
-}
-
-.hasError:hover:not(.disabled) {
-  border-color: var(--color-status-error);
-  background-color: var(--color-status-error-bg);
-}
-
-.disabled {
-  background-color: var(--color-disabled-bg);
-  border-color: var(--color-disabled-border);
-  color: var(--color-disabled-fg);
-  cursor: not-allowed;
-}
-
-.input {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  opacity: 0;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-}
-
-.icon {
-  width: var(--icon-size-lg);
-  height: var(--icon-size-lg);
-  stroke-width: 1.5;
-  flex-shrink: 0;
-}
-
-.hint {
-  line-height: var(--line-height-normal);
-}

package/dist/components/forms/form-select/FormSelect.cjs

@@ -1,191 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var lucideReact = require('lucide-react');
-var React = require('react');
-var useTooltipTrigger = require('../../../components/overlay/tooltip/useTooltipTrigger');
-var styles = require('./FormSelect.module.css');
-var InputContainer = require('../input-container/InputContainer');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return 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__*/_interopNamespace(React);
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function isEqualValue(a, b, datakey) {
-  if (a === b) return true;
-  if (!a || !b) return false;
-  if (typeof a === "object" && typeof b === "object" && datakey) {
-    return a[datakey] === b[datakey];
-  }
-  return false;
-}
-function serializeValue(value, datakey) {
-  if (typeof value === "string" || typeof value === "number") return String(value);
-  if (datakey && value && typeof value === "object") {
-    const v = value[datakey];
-    return v == null ? "" : String(v);
-  }
-  throw new Error(
-    "FormSelect: option value is an object but no `datakey` was provided. Native select requires string/number values."
-  );
-}
-function findSelectedOption(options, selectedValue, datakey) {
-  return options.find((o) => isEqualValue(o.value, selectedValue, datakey));
-}
-function FormSelect({
-  // InputContainer props
-  label,
-  error,
-  helpText,
-  orientation = "vertical",
-  labelWidth = "160px",
-  fullWidth = true,
-  required,
-  tooltip,
-  tooltipPlacement = "right",
-  modified = false,
-  // FormSelect props
-  id,
-  name,
-  options,
-  selectedValue,
-  onChange,
-  placeholder = "V\xE6lg",
-  size = "md",
-  variant = "outlined",
-  onClear,
-  datakey,
-  dataCy,
-  disabled,
-  includePlaceholderOption = true,
-  allowClearWhenRequired = false
-}) {
-  const generatedId = React__namespace.useId();
-  const controlId = id != null ? id : `select-${generatedId}`;
-  const describedById = `${controlId}-desc`;
-  const selected = React__namespace.useMemo(
-    () => findSelectedOption(options, selectedValue, datakey),
-    [options, selectedValue, datakey]
-  );
-  const tooltipEnabled = Boolean(tooltip);
-  const { triggerProps, id: tooltipId } = useTooltipTrigger.useTooltipTrigger({
-    content: tooltipEnabled ? tooltip : null,
-    placement: tooltipPlacement,
-    offset: 8
-  });
-  const describedBy = (() => {
-    const ids = [];
-    if (error || helpText) ids.push(describedById);
-    if (tooltipEnabled) ids.push(tooltipId);
-    return ids.length ? ids.join(" ") : void 0;
-  })();
-  const nativeValue = React__namespace.useMemo(() => {
-    if (selected && selected.value != null) return serializeValue(selected.value, datakey);
-    return "";
-  }, [selected, datakey]);
-  const canClear = Boolean(onClear) && !disabled && (allowClearWhenRequired || !required);
-  const showClear = canClear && Boolean(selected);
-  const placeholderDisabled = Boolean(required) && !allowClearWhenRequired;
-  const handleNativeChange = (e) => {
-    const raw = e.target.value;
-    if (raw === "") {
-      onClear == null ? void 0 : onClear();
-      return;
-    }
-    const opt = options.find((o) => serializeValue(o.value, datakey) === raw);
-    if (opt) onChange(opt.value);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    InputContainer.InputContainer,
-    {
-      label,
-      htmlFor: controlId,
-      fullWidth,
-      error,
-      helpText,
-      orientation,
-      labelWidth,
-      required,
-      modified,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: [
-              styles__default.default.container,
-              fullWidth ? styles__default.default.fullWidth : "",
-              canClear ? styles__default.default.withButton : ""
-            ].filter(Boolean).join(" "),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.field, children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  "select",
-                  {
-                    ...tooltipEnabled ? triggerProps : {},
-                    id: controlId,
-                    name,
-                    className: [styles__default.default.input, styles__default.default[size], styles__default.default[variant]].filter(Boolean).join(" "),
-                    value: nativeValue,
-                    onChange: handleNativeChange,
-                    disabled,
-                    "aria-invalid": Boolean(error) || void 0,
-                    "aria-describedby": describedBy,
-                    "data-cy": dataCy != null ? dataCy : "formselect",
-                    "data-forminput": true,
-                    children: [
-                      includePlaceholderOption && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: placeholderDisabled, children: placeholder }),
-                      options.map((opt) => {
-                        const v = serializeValue(opt.value, datakey);
-                        return /* @__PURE__ */ jsxRuntime.jsx("option", { value: v, children: opt.label }, v);
-                      })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 20 }) })
-              ] }),
-              canClear && /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  className: styles__default.default.trailingButton,
-                  onClick: (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    onClear == null ? void 0 : onClear();
-                  },
-                  "aria-label": "Ryd valg",
-                  disabled: !showClear,
-                  "data-cy": dataCy ? `${dataCy}-clear` : "formselect-clear",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 18, "aria-hidden": "true" })
-                }
-              )
-            ]
-          }
-        ),
-        (error || helpText) && /* @__PURE__ */ jsxRuntime.jsx("span", { id: describedById, style: { display: "none" }, children: error != null ? error : helpText })
-      ]
-    }
-  );
-}
-
-exports.FormSelect = FormSelect;

package/dist/components/forms/form-select/FormSelect.d.ts

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import { InputContainer } from '../input-container/InputContainer';
-import { MultiselectOption } from '../multi-select/MultiSelect';
-type InputContainerProps = React.ComponentProps<typeof InputContainer>;
-export type FormSelectProps<T> = Omit<InputContainerProps, 'children' | 'htmlFor' | 'tooltip' | 'tooltipPlacement'> & {
-    id?: string;
-    name?: string;
-    options: MultiselectOption<T>[];
-    selectedValue: T | null;
-    onChange: (value: T) => void;
-    placeholder?: string;
-    size?: 'sm' | 'md' | 'lg';
-    variant?: 'outlined' | 'filled' | 'standalone';
-    onClear?: () => void;
-    /**
-     * Needed if T is an object and you want to use native select.
-     * Native <select> requires string values; we serialize using value[datakey].
-     */
-    datakey?: string;
-    dataCy?: string;
-    disabled?: boolean;
-    tooltip?: React.ReactNode;
-    tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
-    includePlaceholderOption?: boolean;
-    /**
-     * Default false. If true, we allow clearing even when required=true:
-     * - placeholder becomes selectable
-     * - clear button is shown
-     *
-     * This is "odd" UX in many forms, so it's opt-in.
-     */
-    allowClearWhenRequired?: boolean;
-};
-export declare function FormSelect<T extends string | number | Record<string, any>>({ label, error, helpText, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, modified, id, name, options, selectedValue, onChange, placeholder, size, variant, onClear, datakey, dataCy, disabled, includePlaceholderOption, allowClearWhenRequired, }: FormSelectProps<T>): React.ReactNode;
-export {};