@dbcdk/react-components 0.0.167 → 0.0.169

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

@@ -1,184 +0,0 @@
-'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,
-  labelAction,
-  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,
-  buttonAriaLabel,
-  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,
-      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
-                  ] })
-                ]
-              }
-            ),
-            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,
-                "aria-label": buttonAriaLabel,
-                children: [
-                  buttonIcon != null ? buttonIcon : null,
-                  buttonLabel != null ? buttonLabel : null
-                ]
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-});
-Input.displayName = "Input";
-
-export { Input };

package/dist/components/forms/input/Input.module.css

@@ -1,478 +0,0 @@
-/* Root control group */
-.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);
-}
-
-/* When you want it to take available space */
-.fullWidth {
-  display: flex;
-  inline-size: 100%;
-  min-inline-size: 0;
-}
-
-/* The "field" (input + icons + clear) */
-.field {
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex: 1 1 auto;
-  height: 100%;
-  min-inline-size: 0;
-  color: var(--color-fg-default);
-  background: var(--color-bg-surface);
-  border: var(--border-width-thin) solid var(--color-border-default);
-  border-radius: var(--border-radius-default);
-  box-sizing: border-box;
-  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),
-    color var(--transition-fast) var(--ease-standard);
-}
-
-/* Actual input */
-.input {
-  flex: 1 1 auto;
-  min-inline-size: 0;
-  inline-size: 100%;
-  box-sizing: border-box;
-  text-overflow: ellipsis;
-  color: var(--color-fg-default);
-  background: transparent;
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-normal);
-  border: none;
-  outline: none;
-  padding-inline: var(--spacing-sm);
-  padding-block: var(--spacing-xs);
-  margin: 0;
-}
-
-.input::placeholder {
-  color: var(--color-fg-subtle) !important;
-}
-
-.input:disabled {
-  background-color: transparent;
-  color: var(--color-disabled-fg);
-  cursor: not-allowed;
-  opacity: 1;
-  box-shadow: none;
-}
-
-/* Button group styling */
-.withButton .field {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-/*
-  When onClear exists, do not keep extra inline-end padding on the input itself.
-  The clear affordance already reserves the needed space via the inline clearSlot.
-*/
-.withClear .input {
-  padding-inline-end: 0;
-}
-
-/* When clear is inline with other end adornments, keep the input tight as well. */
-.withInlineClear .input {
-  padding-inline-end: 0;
-}
-
-/* Global focus reset - variants own visible focus treatment */
-.input:focus-visible {
-  outline: none;
-}
-
-/* =========================
-   Variants
-   ========================= */
-
-/* Stronger field chrome for forms/settings */
-.outlined {
-  background-color: var(--color-bg-surface);
-  border-color: var(--color-border-default);
-}
-
-.outlined:hover:not([aria-disabled='true']) {
-  border-color: var(--color-border-strong);
-}
-
-.outlined:focus-within:not([aria-disabled='true']) {
-  border-color: var(--color-border-selected);
-  box-shadow: inset 0 0 0 1px var(--color-border-selected);
-}
-
-.surface {
-  background-color: var(--color-bg-surface);
-  border: 1px solid var(--color-border-subtle);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
-}
-
-.surface:hover:not([aria-disabled='true']) {
-  border-color: var(--color-border-default);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-}
-
-.surface:focus-within:not([aria-disabled='true']) {
-  border-color: var(--color-border-selected);
-  box-shadow: inset 0 0 0 1px var(--color-border-selected);
-}
-
-/* Old filled/tinted behavior, now renamed subtle */
-.subtle {
-  background-color: var(--color-bg-toolbar);
-  border-color: transparent;
-  box-shadow: inset 0 0 0 1px transparent;
-}
-
-.subtle:hover:not([aria-disabled='true']) {
-  background-color: var(--color-bg-toolbar-hover);
-}
-
-.subtle:focus-within:not([aria-disabled='true']) {
-  border-color: var(--color-border-selected);
-  box-shadow: inset 0 0 0 1px var(--color-border-selected);
-}
-
-.embedded {
-  background-color: transparent;
-  border-color: transparent;
-  border-radius: 0;
-  box-shadow: none;
-  padding-block: 0;
-  block-size: 100%;
-}
-
-.embedded:hover:not([aria-disabled='true']),
-.embedded:focus-within:not([aria-disabled='true']) {
-  background-color: transparent;
-  border-color: transparent;
-  box-shadow: none;
-  outline: none;
-}
-
-.standalone {
-  background-color: var(--color-bg-surface);
-  border-color: var(--color-border-subtle);
-  border-radius: var(--border-radius-rounded);
-  box-shadow: var(--shadow-xs), var(--shadow-sm);
-}
-
-.standalone .input {
-  padding-inline: var(--spacing-md);
-}
-
-.standalone:hover:not([aria-disabled='true']) {
-  border-color: var(--color-border-strong);
-  box-shadow: var(--shadow-sm), var(--shadow-md);
-}
-
-.standalone:focus-within:not([aria-disabled='true']) {
-  border-color: var(--color-border-selected);
-  box-shadow:
-    var(--shadow-xs),
-    var(--shadow-md),
-    inset 0 0 0 1px var(--color-border-selected);
-}
-
-/* =========================
-   Modified state
-   ========================= */
-
-.modified {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 22%, var(--color-bg-surface));
-  border-color: color-mix(
-    in srgb,
-    var(--color-status-warning-border) 45%,
-    var(--color-border-default)
-  );
-  border-left-color: var(--color-status-warning-border);
-  border-left-width: 4px;
-}
-
-/* Hover should stay warm, not switch back to the normal border */
-.modified:hover:not([aria-disabled='true']) {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
-  border-color: color-mix(
-    in srgb,
-    var(--color-status-warning-border) 60%,
-    var(--color-border-default)
-  );
-  border-left-color: var(--color-status-warning-border);
-}
-
-/* Focus should also stay warm and readable */
-.modified:focus-within:not([aria-disabled='true']) {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
-  border-color: color-mix(
-    in srgb,
-    var(--color-status-warning-border) 75%,
-    var(--color-border-default)
-  );
-  border-left-color: var(--color-status-warning-border);
-  box-shadow: inset 0 0 0 1px
-    color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
-}
-
-/* Variant-specific tweaks when modified */
-.surface.modified {
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
-}
-
-.surface.modified:hover:not([aria-disabled='true']) {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-}
-
-.surface.modified:focus-within:not([aria-disabled='true']) {
-  box-shadow: inset 0 0 0 1px
-    color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
-}
-
-.subtle.modified {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 30%, var(--color-bg-toolbar));
-  border-color: transparent;
-  border-left-color: var(--color-status-warning-border);
-  border-left-width: 4px;
-  box-shadow: none;
-}
-
-.subtle.modified:hover:not([aria-disabled='true']) {
-  background-color: color-mix(
-    in srgb,
-    var(--color-status-warning-bg) 36%,
-    var(--color-bg-toolbar-hover)
-  );
-}
-
-.subtle.modified:focus-within:not([aria-disabled='true']) {
-  border-color: color-mix(
-    in srgb,
-    var(--color-status-warning-border) 75%,
-    var(--color-border-default)
-  );
-  border-left-color: var(--color-status-warning-border);
-  box-shadow: inset 0 0 0 1px
-    color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
-}
-
-.standalone.modified {
-  box-shadow: var(--shadow-xs), var(--shadow-md);
-}
-
-.standalone.modified:hover:not([aria-disabled='true']) {
-  box-shadow: var(--shadow-sm), var(--shadow-md);
-}
-
-.standalone.modified:focus-within:not([aria-disabled='true']) {
-  box-shadow:
-    var(--shadow-xs),
-    var(--shadow-md),
-    inset 0 0 0 1px
-      color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
-}
-
-/* Embedded should stay visually light, but can still get the marker */
-.embedded.modified {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 18%, transparent);
-  border-color: transparent;
-  border-left-color: var(--color-status-warning-border);
-  border-left-width: 3px;
-  box-shadow: none;
-}
-
-.embedded.modified:hover:not([aria-disabled='true']),
-.embedded.modified:focus-within:not([aria-disabled='true']) {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 22%, transparent);
-  border-color: transparent;
-  border-left-color: var(--color-status-warning-border);
-  box-shadow: none;
-}
-
-/* Disabled modified state */
-.modified[aria-disabled='true'] {
-  background-color: var(--color-disabled-bg);
-  border-color: var(--color-disabled-border);
-  border-left-color: var(--color-disabled-border);
-  border-left-width: var(--border-width-thin);
-  box-shadow: none;
-}
-
-/* Sizes */
-.xs {
-  block-size: var(--component-size-xs);
-  font-size: var(--font-size-xs);
-}
-
-.input.xs {
-  padding-inline: var(--spacing-xxs);
-}
-
-.sm {
-  block-size: var(--component-size-sm);
-  font-size: var(--font-size-sm);
-}
-
-.sm.embedded,
-.md.embedded,
-.lg.embedded {
-  block-size: 100%;
-}
-
-.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);
-}
-
-/* Leading icon */
-.fieldWithIcon .input {
-  padding-inline-start: calc(var(--spacing-sm) + var(--icon-size-md) + var(--spacing-xs));
-}
-
-.embedded.fieldWithIcon .input {
-  padding-inline-start: calc(var(--spacing-xs) + var(--icon-size-md) + var(--spacing-xs));
-}
-
-.icon {
-  position: absolute;
-  inset-inline-start: var(--spacing-sm);
-  top: 50%;
-  transform: translateY(-50%);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: var(--icon-size-md);
-  block-size: var(--icon-size-md);
-  pointer-events: none;
-  color: var(--color-fg-subtle);
-  transition: color var(--transition-fast) var(--ease-standard);
-}
-
-.embedded .icon {
-  inset-inline-start: var(--spacing-xs);
-}
-
-.field:focus-within .icon {
-  color: var(--color-fg-muted);
-}
-
-.icon svg {
-  inline-size: var(--icon-size-md);
-  block-size: var(--icon-size-md);
-}
-
-/* Trailing label (unit, currency, etc.) */
-.withTrailingLabel .field {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.trailingLabel {
-  display: flex;
-  align-items: center;
-  flex: 0 0 auto;
-  padding-inline: var(--spacing-sm);
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
-  color: var(--color-fg-muted);
-  background: var(--color-bg-toolbar);
-  border: var(--border-width-thin) solid var(--color-border-default);
-  margin-left: calc(-1 * var(--border-width-thin));
-  border-top-right-radius: var(--border-radius-default);
-  border-bottom-right-radius: var(--border-radius-default);
-  white-space: nowrap;
-  user-select: none;
-  box-sizing: border-box;
-}
-
-.withTrailingLabel:has(.standalone) .trailingLabel {
-  border-top-right-radius: var(--border-radius-rounded);
-  border-bottom-right-radius: var(--border-radius-rounded);
-  border-color: var(--color-border-subtle);
-  background-color: var(--color-bg-surface);
-  box-shadow: var(--shadow-xs), var(--shadow-sm);
-}
-
-/* Trailing action button (outside field) */
-.trailingButton {
-  flex: 0 0 auto;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  border-left: var(--border-width-thin) solid transparent;
-  margin-left: calc(-1 * var(--border-width-thin));
-}
-
-.trailingButton:hover {
-  border-color: var(--color-border-default);
-  z-index: 2;
-}
-
-/* Standalone variant: pill-shaped trailing button to match the field */
-.withButton:has(.standalone) .trailingButton {
-  border-top-right-radius: var(--border-radius-rounded);
-  border-bottom-right-radius: var(--border-radius-rounded);
-  border-left-color: var(--color-border-subtle);
-  border-color: var(--color-border-subtle);
-  background-color: var(--color-bg-surface);
-  box-shadow: var(--shadow-xs), var(--shadow-sm);
-}
-
-.withButton:has(.standalone) .trailingButton:hover {
-  border-color: var(--color-border-strong);
-  box-shadow: var(--shadow-sm), var(--shadow-sm);
-}
-
-/* Date/time picker indicator (WebKit) */
-.input[type='datetime-local']::-webkit-calendar-picker-indicator {
-  filter: invert(0.7);
-}
-
-/* Start and end adornments */
-.startAdornment {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-left: var(--spacing-xs);
-}
-
-.endAdornment {
-  display: flex;
-  align-items: center;
-  flex: 0 0 auto;
-  gap: 2px;
-  margin-inline-start: auto;
-  margin-right: var(--spacing-xxs);
-  color: var(--color-fg-subtle);
-}
-
-.clearSlot {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-inline-size: calc(16px + (var(--spacing-xxs) * 2));
-  min-block-size: calc(16px + (var(--spacing-xxs) * 2));
-}
-
-.clearSlot > * {
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity var(--transition-fast) var(--ease-standard);
-}
-
-.field:hover .clearSlot > *,
-.field:focus-within .clearSlot > * {
-  opacity: 1;
-  pointer-events: auto;
-}