@prokodo/ui 0.1.15 → 1.0.0

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

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
@@ -125,6 +124,14 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+@keyframes inputNotchAnimate {
+  0%, 100% {
+    border-color: var(--pk-input-gradient-from);
+  }
+  50% {
+    border-color: var(--pk-input-gradient-to);
+  }
+}
 .prokodo-Input {
   position: relative;
   display: flex;
@@ -132,79 +139,129 @@
   height: 100%;
   width: 100%;
 }
+.prokodo-Input--primary {
+  --pk-input-shadow-color-focus: color-mix(in srgb, var(--pk-color-brand) 30%, transparent);
+  --pk-input-gradient-from: var(--pk-color-brand);
+  --pk-input-gradient-to: var(--pk-color-accent);
+  --pk-input-label-focused-fg: var(--pk-color-brand);
+  --pk-input-border-focus: var(--pk-color-brand);
+}
+.prokodo-Input--secondary {
+  --pk-input-shadow-color-focus: color-mix(in srgb, var(--pk-color-accent) 30%, transparent);
+  --pk-input-gradient-from: var(--pk-color-accent);
+  --pk-input-gradient-to: var(--pk-color-brand);
+  --pk-input-label-focused-fg: var(--pk-color-accent);
+  --pk-input-border-focus: var(--pk-color-accent);
+}
+.prokodo-Input--success {
+  --pk-input-shadow-color-focus: color-mix(in srgb, var(--pk-color-success) 30%, transparent);
+  --pk-input-gradient-from: var(--pk-color-success);
+  --pk-input-gradient-to: #10CCB8;
+  --pk-input-label-focused-fg: var(--pk-color-success);
+  --pk-input-border-focus: var(--pk-color-success);
+}
+.prokodo-Input--warning {
+  --pk-input-shadow-color-focus: color-mix(in srgb, var(--pk-color-warning) 30%, transparent);
+  --pk-input-gradient-from: var(--pk-color-warning);
+  --pk-input-gradient-to: #f7cc6a;
+  --pk-input-label-focused-fg: var(--pk-color-warning);
+  --pk-input-border-focus: var(--pk-color-warning);
+}
+.prokodo-Input--error {
+  --pk-input-shadow-color-focus: color-mix(in srgb, var(--pk-color-error) 30%, transparent);
+  --pk-input-gradient-from: var(--pk-color-error);
+  --pk-input-gradient-to: #ff6b6b;
+  --pk-input-label-focused-fg: var(--pk-color-error);
+  --pk-input-border-focus: var(--pk-color-error);
+}
+.prokodo-Input--info, .prokodo-Input--inherit, .prokodo-Input--white {
+  --pk-input-shadow-color-focus: rgba(0, 0, 0, 0.1);
+  --pk-input-gradient-from: var(--pk-color-muted);
+  --pk-input-gradient-to: var(--pk-color-border);
+  --pk-input-label-focused-fg: var(--pk-color-muted);
+  --pk-input-border-focus: var(--pk-color-border);
+}
+html[data-theme="dark"] .prokodo-Input--info, [data-theme="dark"] .prokodo-Input--info, .pk-theme-dark .prokodo-Input--info, html[data-theme="dark"] .prokodo-Input--inherit, [data-theme="dark"] .prokodo-Input--inherit, .pk-theme-dark .prokodo-Input--inherit, html[data-theme="dark"] .prokodo-Input--white, [data-theme="dark"] .prokodo-Input--white, .pk-theme-dark .prokodo-Input--white {
+  --pk-input-gradient-from: var(--pk-palette-grey-100);
+  --pk-input-gradient-to: var(--pk-palette-grey-200);
+}
 .prokodo-Input__label {
+  --pk-label-gradient-from: var(--pk-input-gradient-from);
+  --pk-label-gradient-to: var(--pk-input-gradient-to);
+  position: absolute;
+  left: var(--pk-space-xl);
+  font-size: 1.125rem;
+  top: calc(var(--pk-space-xl) + var(--pk-space-xs));
+  transform: translateY(-50%) scale(1);
+  padding: 0;
   transform-origin: top left;
-  transition: transform 0.2s ease, color 0.2s ease, background-color 0.2s ease;
-  padding-bottom: 0.5rem;
-  color: var(--color-grey-600);
-  z-index: 1;
+  transition: transform var(--pk-timing-normal) ease, color var(--pk-timing-normal) ease;
+  color: var(--pk-input-label-fg);
+  z-index: 2;
   pointer-events: none;
 }
-@media screen and (min-width: 960px) {
-  .prokodo-Input__label {
-    position: absolute;
-    left: 1.5rem;
-    font-size: 1.125rem;
-    top: 1.75rem;
-    /* start centered vertically, at full size */
-    transform: translateY(-50%) scale(1);
-    padding: 0;
-  }
-}
-@media screen and (min-width: 960px) {
-  .prokodo-Input__label--is-focused {
-    /* lift up and shrink */
-    transform: translateY(-150%) scale(0.75);
-    color: var(--color-primary-500);
-    /* white background behind text so it “floats” */
-    background-color: var(--color-white);
-    padding: 0 0.25rem;
-  }
-  html[data-theme=dark] .prokodo-Input__label--is-focused {
-    background-color: rgb(16, 19, 27);
-  }
+.prokodo-Input__label--is-focused {
+  top: 0;
+  transform: translateY(-50%) scale(0.75);
+  color: var(--pk-input-label-focused-fg);
 }
 .prokodo-Input__inner {
   position: relative;
 }
 .prokodo-Input__field {
   position: relative;
-  box-shadow: var(--elevation-1);
-  border-radius: 1.5rem;
+  box-shadow: var(--pk-input-shadow);
+  border-radius: var(--pk-input-radius);
+  transition: box-shadow var(--pk-timing-normal) ease;
+}
+.prokodo-Input__field:hover {
+  box-shadow: 0 4px 12px var(--pk-input-shadow-color-focus), 0 0 5px var(--pk-input-shadow-color-focus);
+}
+.prokodo-Input__field:hover fieldset {
+  animation: inputNotchAnimate 2s linear infinite;
+  border-color: var(--pk-input-gradient-from);
+}
+.prokodo-Input__field:focus-within {
+  box-shadow: 0 4px 12px var(--pk-input-shadow-color-focus), 0 0 5px var(--pk-input-shadow-color-focus);
+}
+.prokodo-Input__field:focus-within fieldset {
+  animation: none;
+  border-color: var(--pk-input-border-focus);
+}
+.prokodo-Input__field:has(.prokodo-Input__input--is-focused), .prokodo-Input__field:has(.prokodo-Input__input--focused) {
+  box-shadow: 0 4px 12px var(--pk-input-shadow-color-focus), 0 0 5px var(--pk-input-shadow-color-focus);
+}
+.prokodo-Input__field:has(.prokodo-Input__input--is-focused) fieldset, .prokodo-Input__field:has(.prokodo-Input__input--focused) fieldset {
+  animation: none;
+  border-color: var(--pk-input-border-focus);
+}
+.prokodo-Input__field:has(.prokodo-Input__input--disabled) {
+  box-shadow: var(--pk-input-shadow);
+}
+.prokodo-Input__field:has(.prokodo-Input__input--disabled):hover {
+  box-shadow: var(--pk-input-shadow);
+}
+.prokodo-Input__field:has(.prokodo-Input__input--disabled):hover fieldset {
+  animation: none;
+  border-color: var(--pk-input-border);
 }
 .prokodo-Input__input {
-  width: calc(100% - 0.25rem + 4px);
+  width: calc(100% - var(--pk-space-xs) + 4px);
   padding: 0;
   text-align: left;
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  -webkit-mask-composite: source-over;
-          mask-composite: add;
   border: none;
-  color: var(--color-grey-900);
-  border-radius: 1.5rem;
-  background: var(--gradient-border-7);
-  /* Standard :autofill selector (supported in modern browsers) */
-  /* Chrome / Edge / Opera / Safari (WebKit/Blink) */
-  /* Firefox (legacy) */
-  /* Optional: border style when autofilled */
-  /* Optional: gleiche Styles für Textareas, falls autocomplete genutzt wird */
+  color: var(--pk-input-fg);
+  border-radius: var(--pk-input-radius);
+  background: transparent;
 }
 .prokodo-Input__input input:-webkit-autofill, .prokodo-Input__input textarea:-webkit-autofill {
-  background-color: var(--color-white);
-  color: var(--color-grey-900);
+  background-color: var(--pk-input-bg);
+  color: var(--pk-input-fg);
 }
 .prokodo-Input__input input:autofill,
 .prokodo-Input__input textarea:autofill {
-  background-color: var(--color-white);
-  color: var(--color-grey-900);
-}
-html[data-theme=dark] .prokodo-Input__input input:-webkit-autofill, html[data-theme=dark] .prokodo-Input__input textarea:-webkit-autofill {
-  background-color: rgb(16, 19, 27);
-}
-html[data-theme=dark] .prokodo-Input__input input:autofill,
-html[data-theme=dark] .prokodo-Input__input textarea:autofill {
-  background-color: rgb(16, 19, 27);
+  background-color: var(--pk-input-bg);
+  color: var(--pk-input-fg);
 }
 .prokodo-Input__input input:-webkit-autofill,
 .prokodo-Input__input input:-webkit-autofill:hover,
@@ -212,66 +269,44 @@ html[data-theme=dark] .prokodo-Input__input textarea:autofill {
 .prokodo-Input__input textarea:-webkit-autofill,
 .prokodo-Input__input textarea:-webkit-autofill:hover,
 .prokodo-Input__input textarea:-webkit-autofill:focus {
-  /* Paint over the browser’s autofill background */
-  box-shadow: 0 0 0 1000px var(--color-white) inset;
-  /* Text color inside autofilled field */
-  -webkit-text-fill-color: var(--color-grey-900);
-  /* Long transition hack so the yellow flash is not visible */
+  box-shadow: 0 0 0 1000px var(--pk-input-bg) inset;
+  -webkit-text-fill-color: var(--pk-input-fg);
   -webkit-transition: background-color 9999s ease-out, color 9999s ease-out;
   transition: background-color 9999s ease-out, color 9999s ease-out;
 }
 .prokodo-Input__input input:-moz-autofill,
 .prokodo-Input__input textarea:-moz-autofill {
-  box-shadow: 0 0 0 1000px var(--color-white) inset;
-  background-color: var(--color-white);
-  color: var(--color-grey-900);
-}
-html[data-theme=dark] .prokodo-Input__input input:-moz-autofill,
-html[data-theme=dark] .prokodo-Input__input textarea:-moz-autofill {
-  background-color: rgb(16, 19, 27);
+  box-shadow: 0 0 0 1000px var(--pk-input-bg) inset;
+  background-color: var(--pk-input-bg);
+  color: var(--pk-input-fg);
 }
 .prokodo-Input__input input:is(:-webkit-autofill, :-webkit-autofill), .prokodo-Input__input textarea:is(:-webkit-autofill, :-webkit-autofill) {
-  border-color: none; /* adjust as needed */
+  border-color: none;
 }
 .prokodo-Input__input input:is(:autofill, :-webkit-autofill),
 .prokodo-Input__input textarea:is(:autofill, :-webkit-autofill) {
-  border-color: none; /* adjust as needed */
+  border-color: none;
 }
 .prokodo-Input__input textarea:-webkit-autofill,
 .prokodo-Input__input textarea:-moz-autofill {
-  box-shadow: 0 0 0 1000px #ffffff inset;
-  -webkit-text-fill-color: #000000;
-  color: #000000 !important;
-}
-.prokodo-Input__input--is-focused {
-  background: var(--gradient-border-4);
-}
-.prokodo-Input__input:hover {
-  background: var(--gradient-border-4);
+  box-shadow: 0 0 0 1000px var(--pk-input-bg) inset;
+  -webkit-text-fill-color: var(--pk-input-fg);
+  color: var(--pk-input-fg);
 }
 .prokodo-Input__input--multiline {
   display: flex;
   flex-direction: column;
   height: 100%;
 }
-.prokodo-Input__input--focused {
-  background: var(--gradient-border-4);
-}
-.prokodo-Input__input--disabled {
-  background: var(--gradient-border-8);
-}
-.prokodo-Input__input--disabled:hover {
-  background: var(--gradient-border-8);
-}
 .prokodo-Input__input__node {
-  width: calc(100% - 1rem - 1rem - 0.25rem);
-  padding: 0.875rem 1rem;
+  width: calc(100% - var(--pk-input-padding-x) - var(--pk-input-trailing-pr, var(--pk-input-padding-x)) - var(--pk-space-xs));
+  padding: var(--pk-input-padding-y) var(--pk-input-trailing-pr, var(--pk-input-padding-x)) var(--pk-input-padding-y) var(--pk-input-padding-x);
   margin: 2px;
   border: none;
   outline: none;
-  border-radius: 1.5rem;
-  color: var(--color-grey-900);
-  background-color: var(--color-white);
+  border-radius: var(--pk-input-radius);
+  color: var(--pk-input-fg);
+  background-color: var(--pk-input-bg);
   font-weight: 400;
   font-size: 1.125rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -292,16 +327,11 @@ html[data-theme=dark] .prokodo-Input__input textarea:-moz-autofill {
     font-size: 1rem;
   }
 }
-html[data-theme=dark] .prokodo-Input__input__node {
-  background-color: rgb(16, 19, 27);
-}
 .prokodo-Input__input__node {
   font-size: 1rem;
 }
 .prokodo-Input__input__node--multiline {
-  /* allow it to grow to fill the wrapper */
   flex: 1 1;
-  /* remove inline-table & min-height */
   display: block;
   height: 100%;
   resize: vertical;
@@ -323,18 +353,73 @@ html[data-theme=dark] .prokodo-Input__input__node {
   pointer-events: none;
 }
 .prokodo-Input__input__node:disabled {
-  color: var(--color-grey-700);
-  background: var(--color-white);
+  color: var(--pk-input-fg-muted);
+  background: var(--pk-input-bg);
+}
+.prokodo-Input__input--has-trailing {
+  --pk-input-trailing-pr: calc(var(--pk-input-padding-x) + 1.5rem);
+}
+.prokodo-Input__notch {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  padding: 0 calc(var(--pk-space-xl) - 0.25em);
+  border: 2px solid var(--pk-input-border);
+  border-radius: var(--pk-input-radius);
+  pointer-events: none;
+  z-index: 1;
+  background: transparent;
+  transition: border-color var(--pk-timing-normal) ease;
 }
-html[data-theme=dark] .prokodo-Input__input__node:disabled {
-  background-color: rgb(16, 19, 27);
+.prokodo-Input__notch legend {
+  display: block;
+  height: 0;
+  font-size: 0.84375rem;
+  visibility: hidden;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  max-width: 0.01px;
+  transition: max-width var(--pk-timing-normal) ease;
+}
+.prokodo-Input__notch legend span {
+  padding: 0 0.5em;
+  display: inline-block;
+}
+.prokodo-Input__notch--is-focused legend {
+  max-width: 100%;
+}
+.prokodo-Input__trailing {
+  position: absolute;
+  right: var(--pk-input-padding-x);
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  color: var(--pk-input-fg-muted);
+  pointer-events: none;
+  z-index: 2;
+}
+[data-theme="dark"] .prokodo-Input__trailing, .pk-theme-dark .prokodo-Input__trailing {
+  color: var(--pk-palette-grey-300);
 }
-.prokodo-Input__input:focus {
-  border-color: var(--color-primary-500);
-  box-shadow: 0 0 5px var(--color-primary-500);
+.prokodo-Input__trailing--clickable {
+  pointer-events: auto;
+  background: none;
+  border: none;
+  padding: var(--pk-space-xs);
+  margin-right: calc(-1 * var(--pk-space-xs));
+  cursor: pointer;
+  border-radius: var(--pk-input-radius);
+  transition: color var(--pk-timing-normal) ease, background var(--pk-timing-normal) ease;
+}
+.prokodo-Input__trailing--clickable:hover {
+  color: var(--pk-input-fg);
+  background: color-mix(in srgb, var(--pk-input-fg) 8%, transparent);
 }
-.prokodo-Input__input[aria-invalid=true] {
-  border-color: var(--color-error);
+.prokodo-Input__trailing--clickable:focus-visible {
+  outline: 2px solid var(--pk-input-border-focus);
+  outline-offset: 2px;
 }
 .prokodo-Input__footer {
   display: flex;
@@ -344,14 +429,14 @@ html[data-theme=dark] .prokodo-Input__input__node:disabled {
   justify-content: flex-end;
 }
 .prokodo-Input__helperText__wrapper {
-  padding-top: 0.25rem;
+  padding-top: var(--pk-space-xs);
   margin-bottom: 0 !important;
 }
 .prokodo-Input__helperText {
-  padding-left: 1.5rem;
-  padding-top: 0.75rem;
+  padding-left: var(--pk-space-xl);
+  padding-top: var(--pk-space-md);
   display: flex;
-  color: var(--color-grey-300);
+  color: var(--pk-input-helper-fg);
   width: 80%;
   font-weight: 400;
   font-size: 1rem;
@@ -375,22 +460,19 @@ html[data-theme=dark] .prokodo-Input__input__node:disabled {
     line-height: 1.4;
   }
 }
-html[data-theme=dark] .prokodo-Input__helperText {
-  color: var(--color-grey-700);
-}
 .prokodo-Input__helperText__content {
   width: 100%;
 }
 .prokodo-Input__helperText__content--is-error {
-  color: var(--color-error);
+  color: var(--pk-color-error);
 }
 .prokodo-Input__helperText__legend {
   width: 25%;
   text-align: right;
 }
 .prokodo-Input__counter {
-  padding-top: 0.75rem;
-  color: var(--color-grey-600);
+  padding-top: var(--pk-space-md);
+  color: var(--pk-palette-grey-600);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

package/dist/components/input/Input.module.scss.js

@@ -1,16 +1,31 @@
+const inputNotchAnimate = "inputNotchAnimate";
 const styles = {
   "prokodo-Input": "prokodo-Input",
+  "prokodo-Input--primary": "prokodo-Input--primary",
+  "prokodo-Input--secondary": "prokodo-Input--secondary",
+  "prokodo-Input--success": "prokodo-Input--success",
+  "prokodo-Input--warning": "prokodo-Input--warning",
+  "prokodo-Input--error": "prokodo-Input--error",
+  "prokodo-Input--info": "prokodo-Input--info",
+  "prokodo-Input--inherit": "prokodo-Input--inherit",
+  "prokodo-Input--white": "prokodo-Input--white",
   "prokodo-Input__label": "prokodo-Input__label",
   "prokodo-Input__label--is-focused": "prokodo-Input__label--is-focused",
   "prokodo-Input__inner": "prokodo-Input__inner",
   "prokodo-Input__field": "prokodo-Input__field",
-  "prokodo-Input__input": "prokodo-Input__input",
+  inputNotchAnimate,
   "prokodo-Input__input--is-focused": "prokodo-Input__input--is-focused",
-  "prokodo-Input__input--multiline": "prokodo-Input__input--multiline",
   "prokodo-Input__input--focused": "prokodo-Input__input--focused",
   "prokodo-Input__input--disabled": "prokodo-Input__input--disabled",
+  "prokodo-Input__input": "prokodo-Input__input",
+  "prokodo-Input__input--multiline": "prokodo-Input__input--multiline",
   "prokodo-Input__input__node": "prokodo-Input__input__node",
   "prokodo-Input__input__node--multiline": "prokodo-Input__input__node--multiline",
+  "prokodo-Input__input--has-trailing": "prokodo-Input__input--has-trailing",
+  "prokodo-Input__notch": "prokodo-Input__notch",
+  "prokodo-Input__notch--is-focused": "prokodo-Input__notch--is-focused",
+  "prokodo-Input__trailing": "prokodo-Input__trailing",
+  "prokodo-Input__trailing--clickable": "prokodo-Input__trailing--clickable",
   "prokodo-Input__footer": "prokodo-Input__footer",
   "prokodo-Input__footer--counter-only": "prokodo-Input__footer--counter-only",
   "prokodo-Input__helperText__wrapper": "prokodo-Input__helperText__wrapper",
@@ -21,5 +36,6 @@ const styles = {
   "prokodo-Input__counter": "prokodo-Input__counter"
 };
 export {
-  styles as default
+  styles as default,
+  inputNotchAnimate
 };

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

@@ -5,6 +5,7 @@ import { create } from "../../helpers/bem.js";
 import { isString } from "../../helpers/validations.js";
 import styles from "./Input.module.scss.js";
 import { Label } from "../label/Label.js";
+import { Icon } from "../icon/Icon.js";
 const bem = create(styles, "Input");
 function InputView({
   inputRef,
@@ -34,6 +35,11 @@ function InputView({
   maxRows,
   type = "text",
   renderNode,
+  color = "primary",
+  trailingIcon,
+  trailingIconLabel,
+  onTrailingIconClick,
+  trailingIconButtonProps = {},
   ...rest
 }) {
   rest == null ? true : delete rest.onValidate;
@@ -50,7 +56,7 @@ function InputView({
     { multiline: Boolean(multiline) },
     inputClassName
   );
-  return /* @__PURE__ */ jsxs("div", { className: bem(void 0, void 0, className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: bem(void 0, { [color]: true }, className), children: [
     /* @__PURE__ */ jsxs("div", { className: bem("inner"), children: [
       typeof label === "string" && /* @__PURE__ */ jsx(
         Label,
@@ -69,66 +75,90 @@ function InputView({
           )
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: bem("field", void 0, fieldClassName), children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: bem(
-            "input",
-            {
-              "is-focused": Boolean(isFocused),
-              disabled: Boolean(disabled),
-              multiline: Boolean(multiline),
-              fullWidth: Boolean(fullWidth)
-            },
-            inputContainerClassName
-          ),
-          children: typeof renderNode === "function" ? renderNode({
-            id: name,
-            name,
-            disabled,
-            required,
-            readOnly: rest == null ? void 0 : rest.readOnly,
-            placeholder,
-            isError,
-            describedBy,
-            nodeClassName
-          }) : Boolean(multiline) ? /* @__PURE__ */ jsx(
-            "textarea",
-            {
-              ...rest,
-              ref: inputRef,
-              "aria-describedby": describedBy,
-              "aria-invalid": isError,
-              "aria-required": required,
-              className: nodeClassName,
-              disabled,
+      /* @__PURE__ */ jsxs("div", { className: bem("field", void 0, fieldClassName), children: [
+        typeof label === "string" && /* @__PURE__ */ jsx(
+          "fieldset",
+          {
+            "aria-hidden": "true",
+            className: bem("notch", {
+              "is-focused": Boolean(isFocused) || hasValue
+            }),
+            children: /* @__PURE__ */ jsx("legend", { className: bem("notchLegend"), children: /* @__PURE__ */ jsx("span", { children: label }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: bem(
+              "input",
+              {
+                "is-focused": Boolean(isFocused),
+                disabled: Boolean(disabled),
+                multiline: Boolean(multiline),
+                fullWidth: Boolean(fullWidth),
+                "has-trailing": Boolean(trailingIcon)
+              },
+              inputContainerClassName
+            ),
+            children: typeof renderNode === "function" ? renderNode({
               id: name,
               name,
-              placeholder,
-              required: Boolean(required),
-              rows,
-              value: value ?? ""
-            }
-          ) : /* @__PURE__ */ jsx(
-            "input",
-            {
-              ...rest,
-              ref: inputRef,
-              "aria-describedby": describedBy,
-              "aria-invalid": isError,
-              "aria-required": required,
-              className: nodeClassName,
               disabled,
-              id: name,
-              name,
+              required,
+              readOnly: rest == null ? void 0 : rest.readOnly,
               placeholder,
-              required: Boolean(required),
-              type,
-              value: value ?? ""
-            }
-          )
-        }
-      ) })
+              isError,
+              describedBy,
+              nodeClassName
+            }) : Boolean(multiline) ? /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                ...rest,
+                ref: inputRef,
+                "aria-describedby": describedBy,
+                "aria-invalid": isError,
+                "aria-required": required,
+                className: nodeClassName,
+                disabled,
+                id: name,
+                name,
+                placeholder,
+                required: Boolean(required),
+                rows,
+                value: value ?? ""
+              }
+            ) : /* @__PURE__ */ jsx(
+              "input",
+              {
+                ...rest,
+                ref: inputRef,
+                "aria-describedby": describedBy,
+                "aria-invalid": isError,
+                "aria-required": required,
+                className: nodeClassName,
+                disabled,
+                id: name,
+                name,
+                placeholder,
+                required: Boolean(required),
+                type,
+                value: value ?? ""
+              }
+            )
+          }
+        ),
+        trailingIcon && (onTrailingIconClick ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            ...trailingIconButtonProps,
+            "aria-label": trailingIconLabel,
+            className: bem("trailing", { clickable: true }),
+            type: "button",
+            onClick: onTrailingIconClick,
+            children: /* @__PURE__ */ jsx(Icon, { name: trailingIcon, size: "sm" })
+          }
+        ) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: bem("trailing"), children: /* @__PURE__ */ jsx(Icon, { name: trailingIcon, size: "sm" }) }))
+      ] })
     ] }),
     (isError || hasHelperText || typeof maxLength === "number") && /* @__PURE__ */ jsxs(
       "div",