@dbcdk/react-components 0.0.103 → 0.0.104

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

@@ -0,0 +1,468 @@
+/* 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 inside endAdornment, or
+  - the absolute clear button path.
+*/
+.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));
+}

package/dist/components/forms/input-container/InputContainer.cjs

@@ -0,0 +1,72 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./InputContainer.module.css');
+var InlineStatus = require('../../inline-status/InlineStatus');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function InputContainer({
+  label,
+  labelAction,
+  htmlFor,
+  error,
+  helpText,
+  helpTextAddition,
+  fullWidth = false,
+  required = false,
+  children,
+  orientation = "horizontal",
+  size = "md",
+  labelWidth = "160px",
+  modified = false
+}) {
+  const renderLabelRow = (label || labelAction) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.labelRow} dbc-flex dbc-items-center dbc-gap-md`, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: styles__default.default.label, htmlFor, children: [
+      label,
+      required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.required, children: " *" })
+    ] }),
+    labelAction && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.labelAction, children: labelAction })
+  ] });
+  const renderMessageRow = (error || helpText || helpTextAddition) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${error ? styles__default.default.errorText : styles__default.default.helpText} ${styles__default.default.messageRow}`, children: error ? /* @__PURE__ */ jsxRuntime.jsx(InlineStatus.InlineStatus, { severity: "error", disableIcon: true, children: error }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: helpText }),
+    helpTextAddition && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.helpTextAddition, children: helpTextAddition })
+  ] }) });
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-modified": modified ? "true" : void 0,
+        className: `dbc-flex dbc-flex-column dbc-gap-xs ${styles__default.default.inputContainer}`,
+        style: { width: fullWidth ? "100%" : void 0 },
+        children: [
+          renderLabelRow,
+          children,
+          renderMessageRow
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-modified": modified ? "true" : void 0,
+      className: styles__default.default.inputContainer,
+      style: {
+        "--label-width": labelWidth,
+        width: fullWidth ? "100%" : void 0
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.horizontal} dbc-flex dbc-flex-column dbc-gap-xs`, "data-size": size, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.labelContainer} dbc-flex dbc-items-center dbc-gap-xs`, children: [
+          renderLabelRow,
+          children
+        ] }),
+        renderMessageRow
+      ] })
+    }
+  );
+}
+
+exports.InputContainer = InputContainer;

package/dist/components/forms/input-container/InputContainer.js

@@ -0,0 +1,66 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import styles from './InputContainer.module.css';
+import { InlineStatus } from '../../inline-status/InlineStatus';
+
+function InputContainer({
+  label,
+  labelAction,
+  htmlFor,
+  error,
+  helpText,
+  helpTextAddition,
+  fullWidth = false,
+  required = false,
+  children,
+  orientation = "horizontal",
+  size = "md",
+  labelWidth = "160px",
+  modified = false
+}) {
+  const renderLabelRow = (label || labelAction) && /* @__PURE__ */ jsxs("div", { className: `${styles.labelRow} dbc-flex dbc-items-center dbc-gap-md`, children: [
+    label && /* @__PURE__ */ jsxs("label", { className: styles.label, htmlFor, children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: styles.required, children: " *" })
+    ] }),
+    labelAction && /* @__PURE__ */ jsx("div", { className: styles.labelAction, children: labelAction })
+  ] });
+  const renderMessageRow = (error || helpText || helpTextAddition) && /* @__PURE__ */ jsx("div", { className: `${error ? styles.errorText : styles.helpText} ${styles.messageRow}`, children: error ? /* @__PURE__ */ jsx(InlineStatus, { severity: "error", disableIcon: true, children: error }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { children: helpText }),
+    helpTextAddition && /* @__PURE__ */ jsx("span", { className: styles.helpTextAddition, children: helpTextAddition })
+  ] }) });
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-modified": modified ? "true" : void 0,
+        className: `dbc-flex dbc-flex-column dbc-gap-xs ${styles.inputContainer}`,
+        style: { width: fullWidth ? "100%" : void 0 },
+        children: [
+          renderLabelRow,
+          children,
+          renderMessageRow
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-modified": modified ? "true" : void 0,
+      className: styles.inputContainer,
+      style: {
+        "--label-width": labelWidth,
+        width: fullWidth ? "100%" : void 0
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: `${styles.horizontal} dbc-flex dbc-flex-column dbc-gap-xs`, "data-size": size, children: [
+        /* @__PURE__ */ jsxs("div", { className: `${styles.labelContainer} dbc-flex dbc-items-center dbc-gap-xs`, children: [
+          renderLabelRow,
+          children
+        ] }),
+        renderMessageRow
+      ] })
+    }
+  );
+}
+
+export { InputContainer };

package/dist/components/forms/input-container/InputContainer.module.css

@@ -0,0 +1,59 @@
+.horizontal {
+  --gap: var(--spacing-sm);
+}
+
+.horizontal[data-size='sm'] {
+  --gap: var(--spacing-xs);
+}
+
+.labelContainer {
+  gap: var(--gap);
+}
+
+.label {
+  color: var(--color-fg-default);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.horizontal .errorText,
+.horizontal .helpText {
+  margin-left: calc(var(--label-width) + var(--gap));
+}
+
+.helpText {
+  color: var(--color-fg-subtle);
+  font-size: var(--font-size-sm);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.helpTextAddition {
+  color: var(--color-fg-subtle);
+}
+
+.horizontal label {
+  width: var(--label-width);
+}
+
+.errorText {
+  color: var(--color-status-error);
+  font-size: var(--font-size-sm);
+}
+
+.required {
+  color: var(--color-status-error);
+  font-weight: bold;
+}
+
+.messageRow {
+  min-height: 1lh;
+}
+
+/* Optional: keep this only for controls whose own label lives inside children,
+   such as checkbox/radio wrappers. It will not affect Input's top label. */
+.inputContainer[data-modified] label:not(.label) {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 35%, transparent);
+  border-radius: var(--border-radius-default);
+}