chore(BaseInput): reusable, internal Input component

packages/core/src/components/BaseInput/BaseInput.module.scss

@@ -0,0 +1,112 @@
+@import "../../styles/Typography";
+
+.wrapper {
+  width: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-small);
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-medium) var(--spacing-xs);
+
+  @include vibe-text(text1, normal);
+  @include smoothing-text;
+
+  outline: none;
+  border: 1px solid var(--ui-border-color);
+  border-radius: var(--border-radius-small);
+  color: var(--primary-text-color);
+  background-color: var(--secondary-background-color);
+  transition: border-color var(--motion-productive-medium) ease-in;
+
+  &.small {
+    @include vibe-text(text2, normal);
+  }
+
+  &.large {
+    padding-block: var(--spacing-small);
+  }
+
+  &.underline {
+    border-left: none;
+    border-right: none;
+    border-top: none;
+    padding: var(--spacing-small) var(--spacing-large) var(--spacing-small) var(--spacing-xs);
+    border-radius: 0 !important;
+  }
+
+  &.rightThinnerPadding {
+    padding-inline-end: var(--spacing-medium);
+  }
+
+  &:hover {
+    border-color: var(--primary-text-color);
+  }
+
+  &:has(.input:active, .input:focus) {
+    border-color: var(--primary-color);
+  }
+
+  // TODO in next major remove withReadOnlyStyle, should only be determined by read-only existence on input
+  &:has(.input:read-only).withReadOnlyStyle {
+    background-color: var(--allgrey-background-color);
+    border: none;
+
+    .input {
+      background-color: var(--allgrey-background-color);
+    }
+  }
+
+  &:has(.input:disabled) {
+    cursor: not-allowed;
+    user-select: none;
+    border: none;
+    pointer-events: none;
+    background-color: var(--disabled-background-color);
+  }
+
+  &.success {
+    border-color: var(--positive-color);
+
+    &:hover {
+      border-color: var(--positive-color);
+    }
+
+    &:has(.input:active, .input:focus) {
+      border-color: var(--positive-color);
+    }
+  }
+
+  &:has(.input[aria-invalid="true"]) {
+    border-color: var(--negative-color);
+
+    &:hover {
+      border-color: var(--negative-color);
+    }
+
+    &:has(.input:active, .input:focus) {
+      border-color: var(--negative-color);
+    }
+  }
+
+  .input {
+    all: unset;
+
+    width: 100%;
+    height: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    border: none;
+    outline: none;
+
+    &::placeholder {
+      color: var(--secondary-text-color);
+      font-weight: 400;
+    }
+
+    &:disabled::placeholder {
+      color: var(--disabled-text-color);
+    }
+  }
+}

packages/core/src/components/BaseInput/BaseInput.tsx

@@ -0,0 +1,35 @@
+import { forwardRef } from "react";
+import cx from "classnames";
+import styles from "./BaseInput.module.scss";
+import { BaseInputProps } from "./BaseInput.types";
+import VibeComponent from "../../types/VibeComponent";
+import { getStyle } from "../../helpers/typesciptCssModulesHelper";
+
+const BaseInput: VibeComponent<BaseInputProps, HTMLInputElement> = forwardRef(
+  ({ inputSize = "medium", leftRender, rightRender, withReadOnlyStyle, underline, success, error, ...props }, ref) => {
+    const wrapperClassNames = cx(
+      styles.wrapper,
+      {
+        [styles.rightThinnerPadding]: !rightRender,
+        [styles.withReadOnlyStyle]: withReadOnlyStyle,
+        [styles.underline]: underline,
+        [styles.success]: success
+      },
+      getStyle(styles, inputSize)
+    );
+
+    return (
+      <div className={wrapperClassNames}>
+        {leftRender}
+        <input {...props} ref={ref} className={cx(styles.input, props.className)} aria-invalid={error} />
+        {rightRender}
+      </div>
+    );
+  }
+);
+
+export default BaseInput;
+
+const App = () => {
+  return <BaseInput inputSize={"small"}></BaseInput>;
+};

packages/core/src/components/BaseInput/BaseInput.types.ts

@@ -0,0 +1,16 @@
+import { InputHTMLAttributes, ReactNode } from "react";
+import { VibeComponentProps } from "../../types";
+import { BASE_SIZES } from "../../constants";
+
+type InputSize = (typeof BASE_SIZES)[keyof typeof BASE_SIZES];
+type Renderer = ReactNode | ReactNode[];
+
+export interface BaseInputProps extends InputHTMLAttributes<HTMLInputElement>, VibeComponentProps {
+  inputSize?: InputSize;
+  leftRender?: Renderer;
+  rightRender?: Renderer;
+  withReadOnlyStyle?: boolean;
+  underline?: boolean;
+  success?: boolean;
+  error?: boolean;
+}