@dbcdk/react-components 0.0.102 → 0.0.104

package/dist/components/forms/form-select/FormSelect.module.css

@@ -0,0 +1,236 @@
+/* FormSelect.module.css */
+
+/* =========================================
+   Root container (select + optional clear)
+   ========================================= */
+
+.container {
+  display: inline-flex;
+  align-items: stretch;
+  flex-grow: 1;
+  gap: 0;
+
+  inline-size: var(--input-width, auto);
+  min-inline-size: var(--input-min-width, 0);
+  max-inline-size: var(--input-max-width, none);
+
+  position: relative;
+  border-radius: var(--border-radius-default);
+}
+
+/* Full width variant */
+.fullWidth {
+  display: flex;
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+/* =========================================
+   Focus ring (GROUP LEVEL)
+   ========================================= */
+
+.container:focus-within {
+  box-shadow: 0 0 0 2px var(--color-border-selected);
+  z-index: 1;
+}
+
+/* IMPORTANT:
+   When focused, do NOT also turn the select's border blue,
+   otherwise you get the vertical seam line next to the button. */
+.container:focus-within .input {
+  border-color: var(--color-border-default);
+}
+.container:focus-within .trailingButton {
+  border-color: var(--color-border-default);
+}
+
+/* =========================================
+   Field wrapper (native select + chevron)
+   ========================================= */
+
+.field {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  color: var(--color-fg-default);
+}
+
+/* =========================================
+   Native select styling
+   ========================================= */
+
+.input {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  inline-size: 100%;
+  max-inline-size: 100%;
+
+  background: var(--color-bg-surface);
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+  box-sizing: border-box;
+  text-overflow: ellipsis;
+
+  border: var(--border-width-thin) solid var(--color-border-default);
+  border-radius: var(--border-radius-default);
+
+  padding-inline: var(--spacing-sm);
+  padding-block: var(--spacing-xs);
+
+  /* Reserve space for chevron */
+  padding-inline-end: calc(var(--spacing-lg) + 28px);
+
+  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);
+}
+
+/* Disabled select */
+.input:disabled {
+  background-color: var(--color-disabled-bg);
+  color: var(--color-disabled-fg);
+  cursor: not-allowed;
+}
+
+/* Hover state */
+.input:hover:not(:disabled) {
+  border-color: var(--color-border-strong);
+}
+
+/* Remove default focus ring (we use group-level ring) */
+.input:focus-visible {
+  outline: none;
+  /* DO NOT set border-color here */
+}
+
+/* =========================================
+   Variants
+   ========================================= */
+
+.filled {
+  background-color: var(--color-bg-surface);
+}
+
+.standalone {
+  border-radius: var(--border-radius-rounded);
+  background-color: var(--color-bg-surface);
+  box-shadow: var(--shadow-xs), var(--shadow-md);
+}
+
+.outlined {
+  background-color: transparent;
+}
+
+/* =========================================
+   Sizes
+   ========================================= */
+
+.sm {
+  block-size: var(--component-size-sm);
+  font-size: var(--font-size-sm);
+}
+
+.md {
+  block-size: var(--component-size-md);
+  font-size: var(--font-size-sm);
+}
+
+.lg {
+  block-size: var(--component-size-lg);
+  font-size: var(--font-size-lg);
+}
+
+/* =========================================
+   Chevron (decorative only)
+   ========================================= */
+
+.chevron {
+  position: absolute;
+  inset-inline-end: var(--spacing-sm);
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  color: var(--color-fg-subtle);
+}
+
+.chevron svg {
+  inline-size: 20px;
+  block-size: 20px;
+}
+
+/* =========================================
+   Clear button integration
+   ========================================= */
+
+/* Remove right radius from select when button exists */
+.withButton .input {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+
+  /* Prevent double border seam; the button provides the right side */
+  border-right-color: transparent;
+}
+
+/* Trailing clear button */
+.trailingButton {
+  position: relative;
+  z-index: 2;
+  flex: 0 0 auto;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  padding-inline: var(--spacing-sm);
+
+  border: var(--border-width-thin) solid var(--color-border-default);
+
+  /* Seam join: don't draw left border; select covers it */
+  border-left-color: transparent;
+  margin-left: calc(-1 * var(--border-width-thin));
+
+  border-top-right-radius: var(--border-radius-default);
+  border-bottom-right-radius: var(--border-radius-default);
+
+  background: 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);
+}
+
+/* Hover state */
+.trailingButton:hover:not(:disabled) {
+  border-color: var(--color-border-strong);
+  background-color: var(--color-bg-surface-hover, var(--color-bg-surface));
+}
+
+/* Remove individual focus ring (group handles it) */
+.trailingButton:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+/* Disabled clear button:
+   keep border/background stable; dim only icon */
+.trailingButton:disabled {
+  cursor: default;
+  background: var(--color-bg-surface);
+}
+
+.trailingButton:disabled svg {
+  opacity: 0.4;
+}

package/dist/components/forms/input/Input.cjs

@@ -0,0 +1,188 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Button = require('../../../components/button/Button');
+var ClearButton = require('../../../components/clear-button/ClearButton');
+var useTooltipTrigger = require('../../../components/overlay/tooltip/useTooltipTrigger');
+var styles = require('../input/Input.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 mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (!ref) continue;
+      if (typeof ref === "function") ref(node);
+      else ref.current = node;
+    }
+  };
+}
+const Input = react.forwardRef(function Input2({
+  label,
+  error,
+  helpText,
+  orientation = "vertical",
+  labelWidth = "160px",
+  fullWidth = false,
+  required,
+  tooltip,
+  tooltipPlacement = "right",
+  modified = false,
+  icon,
+  autoFocus,
+  minWidth,
+  width,
+  maxWidth,
+  inputSize = "md",
+  variant = "outlined",
+  onClear,
+  clearAriaLabel,
+  onButtonClick,
+  buttonDisabled = false,
+  buttonLabel,
+  buttonIcon,
+  trailingLabel,
+  id,
+  tooltipOpenOnFocus = true,
+  style,
+  className,
+  fieldClassName,
+  inputClassName,
+  startAdornment,
+  endAdornment,
+  ...inputProps
+}, ref) {
+  const inputRef = react.useRef(null);
+  const reactId = react.useId();
+  const inputId = id != null ? id : `input-${reactId}`;
+  react.useEffect(() => {
+    var _a;
+    if (autoFocus) (_a = inputRef.current) == null ? void 0 : _a.focus();
+  }, [autoFocus]);
+  const hasButton = Boolean(onButtonClick || buttonLabel || buttonIcon);
+  const hasTrailingLabel = Boolean(trailingLabel);
+  const hasValue = Boolean(inputProps.value);
+  const hasVisibleClear = Boolean(onClear && hasValue);
+  const hasEndAdornment = Boolean(endAdornment);
+  const reservesInlineClearSlot = Boolean(onClear);
+  const hasInlineClear = Boolean(hasVisibleClear && hasEndAdornment);
+  const rootStyle = {
+    ...style != null ? style : {},
+    ...minWidth ? { ["--input-min-width"]: minWidth } : null,
+    ...width ? { ["--input-width"]: width } : null,
+    ...maxWidth ? { ["--input-max-width"]: maxWidth } : null
+  };
+  const { triggerProps } = useTooltipTrigger.useTooltipTrigger({
+    content: tooltip,
+    placement: tooltipPlacement,
+    offset: 8,
+    delayOpenMs: 0,
+    focusOpenMode: tooltipOpenOnFocus ? "any" : "focus-visible",
+    closeOnPointerDown: false
+  });
+  const trailingButtonVariant = variant === "outlined" || variant === "standalone" ? "outlined" : "default";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    InputContainer.InputContainer,
+    {
+      label,
+      labelAction: inputProps.labelAction,
+      htmlFor: inputId,
+      fullWidth,
+      error,
+      helpText,
+      orientation,
+      labelWidth,
+      required,
+      modified,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          style: rootStyle,
+          className: [
+            styles__default.default.container,
+            fullWidth ? styles__default.default.fullWidth : "",
+            onClear ? styles__default.default.withClear : "",
+            hasInlineClear ? styles__default.default.withInlineClear : "",
+            hasButton ? styles__default.default.withButton : "",
+            hasTrailingLabel ? styles__default.default.withTrailingLabel : "",
+            className != null ? className : ""
+          ].filter(Boolean).join(" "),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: [
+                  styles__default.default.field,
+                  styles__default.default[variant],
+                  icon ? styles__default.default.fieldWithIcon : "",
+                  inputSize ? styles__default.default[inputSize] : "",
+                  modified ? styles__default.default.modified : "",
+                  fieldClassName != null ? fieldClassName : ""
+                ].filter(Boolean).join(" "),
+                "data-forminput": "field",
+                "data-modified": modified ? "true" : void 0,
+                "aria-disabled": inputProps.disabled ? "true" : void 0,
+                ...tooltip ? triggerProps : {},
+                children: [
+                  icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, "data-input-role": "icon", children: icon }),
+                  startAdornment && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.startAdornment, "data-input-role": "start-adornment", children: startAdornment }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      ...inputProps,
+                      id: inputId,
+                      ref: mergeRefs(inputRef, ref),
+                      className: [styles__default.default.input, inputSize ? styles__default.default[inputSize] : "", inputClassName != null ? inputClassName : ""].filter(Boolean).join(" ")
+                    }
+                  ),
+                  (reservesInlineClearSlot || hasEndAdornment) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.endAdornment, "data-input-role": "end-adornment", children: [
+                    reservesInlineClearSlot ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: styles__default.default.clearSlot,
+                        "aria-hidden": hasVisibleClear ? void 0 : "true",
+                        children: hasVisibleClear && onClear ? /* @__PURE__ */ jsxRuntime.jsx(ClearButton.ClearButton, { onClick: onClear, ariaLabel: clearAriaLabel }) : null
+                      }
+                    ) : null,
+                    endAdornment
+                  ] }),
+                  hasVisibleClear && !hasEndAdornment && onClear ? /* @__PURE__ */ jsxRuntime.jsx(ClearButton.ClearButton, { onClick: onClear, ariaLabel: clearAriaLabel, absolute: true }) : null
+                ]
+              }
+            ),
+            hasTrailingLabel && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: [styles__default.default.trailingLabel, inputSize ? styles__default.default[inputSize] : ""].filter(Boolean).join(" "),
+                children: trailingLabel
+              }
+            ),
+            hasButton && /* @__PURE__ */ jsxRuntime.jsxs(
+              Button.Button,
+              {
+                onClick: onButtonClick,
+                disabled: buttonDisabled,
+                className: styles__default.default.trailingButton,
+                type: "button",
+                variant: trailingButtonVariant,
+                size: inputSize,
+                children: [
+                  buttonIcon != null ? buttonIcon : null,
+                  buttonLabel != null ? buttonLabel : null
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
+Input.displayName = "Input";
+
+exports.Input = Input;

package/dist/components/forms/input/Input.d.ts

@@ -11,6 +11,7 @@ export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size
     inputSize?: Exclude<Size, 'xl'>;
     variant?: InputVariant;
     onClear?: (event?: React.MouseEvent | React.KeyboardEvent) => void;
+    clearAriaLabel?: string;
     onButtonClick?: () => void;
     buttonDisabled?: boolean;
     buttonLabel?: string;

package/dist/components/forms/input/Input.js

@@ -0,0 +1,182 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useRef, useId, useEffect } from 'react';
+import { Button } from '../../../components/button/Button';
+import { ClearButton } from '../../../components/clear-button/ClearButton';
+import { useTooltipTrigger } from '../../../components/overlay/tooltip/useTooltipTrigger';
+import styles from '../input/Input.module.css';
+import { InputContainer } from '../input-container/InputContainer';
+
+function mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (!ref) continue;
+      if (typeof ref === "function") ref(node);
+      else ref.current = node;
+    }
+  };
+}
+const Input = forwardRef(function Input2({
+  label,
+  error,
+  helpText,
+  orientation = "vertical",
+  labelWidth = "160px",
+  fullWidth = false,
+  required,
+  tooltip,
+  tooltipPlacement = "right",
+  modified = false,
+  icon,
+  autoFocus,
+  minWidth,
+  width,
+  maxWidth,
+  inputSize = "md",
+  variant = "outlined",
+  onClear,
+  clearAriaLabel,
+  onButtonClick,
+  buttonDisabled = false,
+  buttonLabel,
+  buttonIcon,
+  trailingLabel,
+  id,
+  tooltipOpenOnFocus = true,
+  style,
+  className,
+  fieldClassName,
+  inputClassName,
+  startAdornment,
+  endAdornment,
+  ...inputProps
+}, ref) {
+  const inputRef = useRef(null);
+  const reactId = useId();
+  const inputId = id != null ? id : `input-${reactId}`;
+  useEffect(() => {
+    var _a;
+    if (autoFocus) (_a = inputRef.current) == null ? void 0 : _a.focus();
+  }, [autoFocus]);
+  const hasButton = Boolean(onButtonClick || buttonLabel || buttonIcon);
+  const hasTrailingLabel = Boolean(trailingLabel);
+  const hasValue = Boolean(inputProps.value);
+  const hasVisibleClear = Boolean(onClear && hasValue);
+  const hasEndAdornment = Boolean(endAdornment);
+  const reservesInlineClearSlot = Boolean(onClear);
+  const hasInlineClear = Boolean(hasVisibleClear && hasEndAdornment);
+  const rootStyle = {
+    ...style != null ? style : {},
+    ...minWidth ? { ["--input-min-width"]: minWidth } : null,
+    ...width ? { ["--input-width"]: width } : null,
+    ...maxWidth ? { ["--input-max-width"]: maxWidth } : null
+  };
+  const { triggerProps } = useTooltipTrigger({
+    content: tooltip,
+    placement: tooltipPlacement,
+    offset: 8,
+    delayOpenMs: 0,
+    focusOpenMode: tooltipOpenOnFocus ? "any" : "focus-visible",
+    closeOnPointerDown: false
+  });
+  const trailingButtonVariant = variant === "outlined" || variant === "standalone" ? "outlined" : "default";
+  return /* @__PURE__ */ jsx(
+    InputContainer,
+    {
+      label,
+      labelAction: inputProps.labelAction,
+      htmlFor: inputId,
+      fullWidth,
+      error,
+      helpText,
+      orientation,
+      labelWidth,
+      required,
+      modified,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: rootStyle,
+          className: [
+            styles.container,
+            fullWidth ? styles.fullWidth : "",
+            onClear ? styles.withClear : "",
+            hasInlineClear ? styles.withInlineClear : "",
+            hasButton ? styles.withButton : "",
+            hasTrailingLabel ? styles.withTrailingLabel : "",
+            className != null ? className : ""
+          ].filter(Boolean).join(" "),
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: [
+                  styles.field,
+                  styles[variant],
+                  icon ? styles.fieldWithIcon : "",
+                  inputSize ? styles[inputSize] : "",
+                  modified ? styles.modified : "",
+                  fieldClassName != null ? fieldClassName : ""
+                ].filter(Boolean).join(" "),
+                "data-forminput": "field",
+                "data-modified": modified ? "true" : void 0,
+                "aria-disabled": inputProps.disabled ? "true" : void 0,
+                ...tooltip ? triggerProps : {},
+                children: [
+                  icon && /* @__PURE__ */ jsx("span", { className: styles.icon, "data-input-role": "icon", children: icon }),
+                  startAdornment && /* @__PURE__ */ jsx("span", { className: styles.startAdornment, "data-input-role": "start-adornment", children: startAdornment }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      ...inputProps,
+                      id: inputId,
+                      ref: mergeRefs(inputRef, ref),
+                      className: [styles.input, inputSize ? styles[inputSize] : "", inputClassName != null ? inputClassName : ""].filter(Boolean).join(" ")
+                    }
+                  ),
+                  (reservesInlineClearSlot || hasEndAdornment) && /* @__PURE__ */ jsxs("span", { className: styles.endAdornment, "data-input-role": "end-adornment", children: [
+                    reservesInlineClearSlot ? /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: styles.clearSlot,
+                        "aria-hidden": hasVisibleClear ? void 0 : "true",
+                        children: hasVisibleClear && onClear ? /* @__PURE__ */ jsx(ClearButton, { onClick: onClear, ariaLabel: clearAriaLabel }) : null
+                      }
+                    ) : null,
+                    endAdornment
+                  ] }),
+                  hasVisibleClear && !hasEndAdornment && onClear ? /* @__PURE__ */ jsx(ClearButton, { onClick: onClear, ariaLabel: clearAriaLabel, absolute: true }) : null
+                ]
+              }
+            ),
+            hasTrailingLabel && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: [styles.trailingLabel, inputSize ? styles[inputSize] : ""].filter(Boolean).join(" "),
+                children: trailingLabel
+              }
+            ),
+            hasButton && /* @__PURE__ */ jsxs(
+              Button,
+              {
+                onClick: onButtonClick,
+                disabled: buttonDisabled,
+                className: styles.trailingButton,
+                type: "button",
+                variant: trailingButtonVariant,
+                size: inputSize,
+                children: [
+                  buttonIcon != null ? buttonIcon : null,
+                  buttonLabel != null ? buttonLabel : null
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
+Input.displayName = "Input";
+
+export { Input };