- {label && (
-
- )}
-
- );
- },
-);
-
-InputView.displayName = "InputView";
diff --git a/app/components/Input/index.tsx b/app/components/Input/index.tsx
deleted file mode 100644
index c788c53..0000000
--- a/app/components/Input/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from "./Input.container";
-export type { InputProps } from "./Input.types";
diff --git a/app/components/Select/index.tsx b/app/components/Select/index.tsx
deleted file mode 100644
index 881e661..0000000
--- a/app/components/Select/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from "./Select.container";
-export type { SelectProps, SelectOptionData } from "./Select.types";
diff --git a/app/components/Select/Select.container.tsx b/app/components/SelectInput/SelectInput.container.tsx
similarity index 95%
rename from app/components/Select/Select.container.tsx
rename to app/components/SelectInput/SelectInput.container.tsx
index 1fab32c..7a179bc 100644
--- a/app/components/Select/Select.container.tsx
+++ b/app/components/SelectInput/SelectInput.container.tsx
@@ -14,10 +14,10 @@ import React, {
useEffect,
} from "react";
import { useClickOutside } from "../../hooks";
-import { SelectView } from "./Select.view";
-import type { SelectProps } from "./Select.types";
+import { SelectInputView } from "./SelectInput.view";
+import type { SelectInputProps } from "./SelectInput.types";
-const SelectContainer = forwardRef
-
-
-
{label && (
diff --git a/app/components/SelectInput/index.tsx b/app/components/SelectInput/index.tsx
new file mode 100644
index 0000000..46ef063
--- /dev/null
+++ b/app/components/SelectInput/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./SelectInput.container";
+export type { SelectInputProps, SelectOptionData } from "./SelectInput.types";
diff --git a/app/components/TextInput/TextInput.container.tsx b/app/components/TextInput/TextInput.container.tsx
new file mode 100644
index 0000000..bb7ff0d
--- /dev/null
+++ b/app/components/TextInput/TextInput.container.tsx
@@ -0,0 +1,227 @@
+"use client";
+
+import { memo, forwardRef, useState, useRef } from "react";
+import { useComponentId, useFormField } from "../../hooks";
+import { TextInputView } from "./TextInput.view";
+import type { TextInputProps } from "./TextInput.types";
+
+const TextInputContainer = forwardRef(
+ (
+ {
+ state: externalState = "default",
+ disabled = false,
+ error = false,
+ label,
+ placeholder,
+ value,
+ onChange,
+ onFocus,
+ onBlur,
+ id,
+ name,
+ type = "text",
+ className = "",
+ showHelpIcon = true,
+ ...props
+ },
+ ref,
+ ) => {
+ // Generate unique ID for accessibility if not provided
+ const { id: inputId, labelId } = useComponentId("text-input", id);
+
+ // Internal state management: track if focused and how (mouse vs keyboard)
+ const [isFocused, setIsFocused] = useState(false);
+ const [focusMethod, setFocusMethod] = useState<"mouse" | "keyboard" | null>(null);
+ const wasMouseDownRef = useRef(false);
+
+ // Determine if we should auto-manage focus (only when state is "default" or undefined)
+ // If state is "active", "hover", or "focus", respect it and don't override
+ const shouldAutoManageFocus = externalState === "default" || externalState === undefined;
+
+ // Determine actual state:
+ // - Active: when clicked (mouse focus)
+ // - Focus: when tabbed (keyboard focus)
+ // - Default: when not focused
+ const actualState = shouldAutoManageFocus
+ ? isFocused
+ ? focusMethod === "mouse"
+ ? "active"
+ : "focus"
+ : "default"
+ : externalState;
+
+ // Determine if input is filled (has value)
+ const isFilled = Boolean(value && value.trim().length > 0);
+
+ // Fixed size styles (medium only per Figma designs)
+ const sizeStyles = {
+ input: "h-[40px] px-[12px] py-[8px] text-[16px]",
+ label: "text-[14px] leading-[20px] font-medium",
+ container: "gap-[8px]",
+ radius: "var(--measures-radius-200,8px)",
+ };
+
+ // State styles based on Figma designs
+ const getStateStyles = (): {
+ input: string;
+ label: string;
+ inputWrapper: string;
+ focusRing: string;
+ } => {
+ if (disabled) {
+ return {
+ input:
+ "bg-[var(--color-surface-default-secondary)] text-[var(--color-content-inverse-tertiary,#2d2d2d)] border border-solid border-[var(--color-border-default-primary)] cursor-not-allowed",
+ label: "text-[var(--color-content-default-secondary)]",
+ inputWrapper: "relative",
+ focusRing: "",
+ };
+ }
+
+ if (error) {
+ const filledStyles = isFilled
+ ? "font-medium leading-[20px]"
+ : "font-normal leading-[24px]";
+ return {
+ input: `bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border-2 border-solid border-[var(--color-border-default-utility-negative)] ${filledStyles}`,
+ label: "text-[var(--color-content-default-secondary)]",
+ inputWrapper: "relative",
+ focusRing: "",
+ };
+ }
+
+ switch (actualState) {
+ case "active": {
+ const filledStyles = isFilled
+ ? "font-medium leading-[20px]"
+ : "font-normal leading-[24px]";
+ return {
+ input: `bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border-2 border-solid border-[var(--color-border-default-tertiary)] ${filledStyles}`,
+ label: "text-[var(--color-content-default-secondary)]",
+ inputWrapper: "relative",
+ focusRing: "",
+ };
+ }
+ case "focus": {
+ const filledStyles = isFilled
+ ? "font-medium leading-[20px]"
+ : "font-normal leading-[24px]";
+ return {
+ input: `bg-[var(--color-surface-default-secondary)] text-[var(--color-content-default-primary)] border border-solid border-[var(--color-border-default-tertiary)] ${filledStyles}`,
+ label: "text-[var(--color-content-default-secondary)]",
+ inputWrapper: "relative",
+ focusRing:
+ "absolute border-2 border-solid border-[var(--color-border-inverse-primary)] inset-0 rounded-[var(--measures-radius-200,8px)] shadow-[0px_0px_0px_2px_var(--color-border-default-primary)] pointer-events-none",
+ };
+ }
+ default: {
+ const filledStyles = isFilled
+ ? "font-medium leading-[20px]"
+ : "font-normal leading-[24px]";
+ // Default state uses primary border (matches Figma - border color same as background, so border is subtle)
+ return {
+ input: `bg-[var(--color-surface-default-secondary)] text-[var(--color-content-default-primary)] border border-solid border-[var(--color-border-default-primary)] ${filledStyles}`,
+ label: "text-[var(--color-content-default-secondary)]",
+ inputWrapper: "relative",
+ focusRing: "",
+ };
+ }
+ }
+ };
+
+ const stateStyles = getStateStyles();
+
+ // Container classes (default label variant only)
+ const containerClasses = `flex flex-col ${sizeStyles.container}`;
+
+ const labelClasses = `${sizeStyles.label} font-inter`;
+
+ // Base classes without border (border is added in state styles)
+ const inputClasses = `
+ w-full transition-all duration-200 ease-in-out
+ focus:outline-none focus:ring-0
+ placeholder:text-[var(--color-content-default-tertiary,#b4b4b4)]
+ ${sizeStyles.input}
+ ${stateStyles.input}
+ ${className}
+ `.trim();
+
+ // Text color for filled text (placeholder color is handled above)
+ const textColorClass = isFilled
+ ? "text-[var(--color-content-default-primary)]"
+ : "text-[var(--color-content-default-tertiary,#b4b4b4)]";
+
+ // Form field handlers with disabled state handling
+ const { handleChange, handleBlur } = useFormField(disabled, {
+ onChange,
+ onBlur: (e) => {
+ if (shouldAutoManageFocus) {
+ setIsFocused(false);
+ setFocusMethod(null);
+ wasMouseDownRef.current = false;
+ }
+ onBlur?.(e);
+ },
+ });
+
+ // Handle mouse down to detect mouse clicks
+ const handleMouseDown = () => {
+ if (!disabled && shouldAutoManageFocus) {
+ wasMouseDownRef.current = true;
+ }
+ };
+
+ // Custom focus handler to detect mouse vs keyboard
+ const handleFocus = (e: React.FocusEvent) => {
+ if (disabled) return;
+
+ // Detect if focus came from keyboard (Tab) or mouse (click)
+ // If mouseDown was detected before focus, it's a mouse click (active)
+ // Otherwise, it's keyboard navigation (focus)
+ const method = wasMouseDownRef.current ? "mouse" : "keyboard";
+
+ if (shouldAutoManageFocus) {
+ setIsFocused(true);
+ setFocusMethod(method);
+ // Reset mouse down flag after focus is processed
+ wasMouseDownRef.current = false;
+ }
+
+ onFocus?.(e);
+ };
+
+ return (
+ ,
"size" | "onChange" | "onFocus" | "onBlur"
> {
- size?: "small" | "medium" | "large";
- labelVariant?: "default" | "horizontal";
state?: "default" | "active" | "hover" | "focus";
disabled?: boolean;
error?: boolean;
@@ -14,13 +12,12 @@ export interface InputProps extends Omit<
onFocus?: (_e: React.FocusEvent) => void;
onBlur?: (_e: React.FocusEvent) => void;
className?: string;
+ showHelpIcon?: boolean;
}
-export interface InputViewProps {
+export interface TextInputViewProps {
inputId: string;
labelId: string;
- size: "small" | "medium" | "large";
- labelVariant: "default" | "horizontal";
state: "default" | "active" | "hover" | "focus";
disabled: boolean;
error: boolean;
@@ -37,4 +34,9 @@ export interface InputViewProps {
handleChange: (_e: React.ChangeEvent) => void;
handleFocus: (_e: React.FocusEvent) => void;
handleBlur: (_e: React.FocusEvent) => void;
+ handleMouseDown?: () => void;
+ showHelpIcon?: boolean;
+ isFilled?: boolean;
+ inputWrapperClasses?: string;
+ focusRingClasses?: string;
}
diff --git a/app/components/TextInput/TextInput.view.tsx b/app/components/TextInput/TextInput.view.tsx
new file mode 100644
index 0000000..c815050
--- /dev/null
+++ b/app/components/TextInput/TextInput.view.tsx
@@ -0,0 +1,83 @@
+import { forwardRef } from "react";
+import { getAssetPath, ASSETS } from "../../../lib/assetUtils";
+import type { TextInputViewProps } from "./TextInput.types";
+
+export const TextInputView = forwardRef(
+ (
+ {
+ inputId,
+ labelId,
+ label,
+ placeholder,
+ value,
+ name,
+ type,
+ disabled,
+ error: _error,
+ className: _className,
+ containerClasses,
+ labelClasses,
+ inputClasses,
+ borderRadius,
+ handleChange,
+ handleFocus,
+ handleBlur,
+ handleMouseDown,
+ showHelpIcon = true,
+ inputWrapperClasses = "relative",
+ focusRingClasses = "",
+ },
+ ref,
+ ) => {
+ return (
+
+ {label && (
+
+ );
+ },
+);
+
+TextInputView.displayName = "TextInputView";
diff --git a/app/components/TextInput/index.tsx b/app/components/TextInput/index.tsx
new file mode 100644
index 0000000..cf1b18f
--- /dev/null
+++ b/app/components/TextInput/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./TextInput.container";
+export type { TextInputProps } from "./TextInput.types";
diff --git a/lib/assetUtils.ts b/lib/assetUtils.ts
index 5001820..6f62476 100644
--- a/lib/assetUtils.ts
+++ b/lib/assetUtils.ts
@@ -62,4 +62,7 @@ export const ASSETS = {
// Tooltip icons
ICON_POINTER: "assets/Icon_Pointer.svg",
+
+ // Help icon
+ ICON_HELP: "assets/Icon_Help.svg",
} as const;
diff --git a/stories/Create.stories.js b/stories/Create.stories.js
index 61c58f8..276c9f2 100644
--- a/stories/Create.stories.js
+++ b/stories/Create.stories.js
@@ -1,5 +1,5 @@
import Create from "../app/components/Create";
-import Input from "../app/components/Input";
+import TextInput from "../app/components/TextInput";
export default {
title: "Components/Create",
@@ -57,7 +57,7 @@ Default.args = {
description: "You can also combine or add new approaches to the list",
children: (
+
+ )}
+
+
+ {showHelpIcon && (
+
+
+ })
+
+ )}
+
+
+
+
+
+ {focusRingClasses && (
+
+ )}
+
-
+
0/48
@@ -77,7 +77,7 @@ WithStepper.args = { description: "You can also combine or add new approaches to the list", children: (
-
+
0/48
@@ -155,7 +155,7 @@ NextButtonDisabled.args = { description: "You can also combine or add new approaches to the list", children: (
-
+
0/48
diff --git a/stories/Select.stories.js b/stories/SelectInput.stories.js similarity index 62% rename from stories/Select.stories.js rename to stories/SelectInput.stories.js index 6d5a814..bc4e518 100644 --- a/stories/Select.stories.js +++ b/stories/SelectInput.stories.js @@ -1,9 +1,9 @@ import React, { useState } from "react"; -import Select from "../app/components/Select"; +import SelectInput from "../app/components/SelectInput"; export default { - title: "Forms/Select", - component: Select, + title: "Forms/SelectInput", + component: SelectInput, argTypes: { size: { control: { type: "select" }, @@ -35,10 +35,10 @@ export default { const Template = (args) => { const [value, setValue] = useState(""); return ( -