From 63875d380c3f1040421e24df5fce9c16051cc121 Mon Sep 17 00:00:00 2001 From: Tannu Kumari Date: Sat, 20 Jun 2026 02:08:39 +0530 Subject: [PATCH 1/4] chore: trigger CI re-run From f956c1b60368543cba74f3eaf0ee1a4edcbcc98f Mon Sep 17 00:00:00 2001 From: Tannu Kumari Date: Mon, 22 Jun 2026 12:58:58 +0530 Subject: [PATCH 2/4] feat: add focus glow/border animation on Input fields --- packages/ui/src/EmailInput.ts | 6 ++++++ packages/ui/src/PasswordInput.ts | 6 ++++++ packages/ui/src/PathInput.ts | 6 ++++++ packages/ui/src/SearchInput.ts | 6 ++++++ packages/ui/src/TextArea.ts | 6 ++++++ 5 files changed, 30 insertions(+) diff --git a/packages/ui/src/EmailInput.ts b/packages/ui/src/EmailInput.ts index db7ccbe8..70515c2d 100644 --- a/packages/ui/src/EmailInput.ts +++ b/packages/ui/src/EmailInput.ts @@ -140,6 +140,12 @@ export class EmailInput extends Widget { } protected _renderSelf(screen: Screen): void { + // Apply glow effect on focus by changing border style + if (this.isFocused) { + this._style.borderFg = 'cyan'; + } else { + this._style.borderFg = undefined; + } const rect = this._getContentRect(); const { x, y, width, height } = rect; if (width <= 0 || height <= 0) return; diff --git a/packages/ui/src/PasswordInput.ts b/packages/ui/src/PasswordInput.ts index 67d63cde..19a3e031 100644 --- a/packages/ui/src/PasswordInput.ts +++ b/packages/ui/src/PasswordInput.ts @@ -267,6 +267,12 @@ export class PasswordInput extends Widget { } protected _renderSelf(screen: Screen): void { + // Apply glow effect on focus by changing border style + if (this.isFocused) { + this._style.borderFg = 'cyan'; + } else { + this._style.borderFg = undefined; + } const rect = this._getContentRect(); const { x, y, width, height } = rect; if (width <= 0 || height <= 0) return; diff --git a/packages/ui/src/PathInput.ts b/packages/ui/src/PathInput.ts index 3b403d7e..87b218d2 100644 --- a/packages/ui/src/PathInput.ts +++ b/packages/ui/src/PathInput.ts @@ -209,6 +209,12 @@ export class PathInput extends Widget { } protected _renderSelf(screen: Screen): void { + // Apply glow effect on focus by changing border style + if (this.isFocused) { + this._style.borderFg = 'cyan'; + } else { + this._style.borderFg = undefined; + } const rect = this._getContentRect(); const { x, y, width, height } = rect; if (width <= 0 || height <= 0) return; diff --git a/packages/ui/src/SearchInput.ts b/packages/ui/src/SearchInput.ts index b1604012..ca1ae182 100644 --- a/packages/ui/src/SearchInput.ts +++ b/packages/ui/src/SearchInput.ts @@ -107,6 +107,12 @@ export class SearchInput extends Widget { } protected _renderSelf(screen: Screen): void { + // Apply glow effect on focus by changing border style + if (this.isFocused) { + this._style.borderFg = 'cyan'; + } else { + this._style.borderFg = undefined; + } const rect = this._getContentRect(); const { x, y, width, height } = rect; if (width <= 0 || height <= 0) return; diff --git a/packages/ui/src/TextArea.ts b/packages/ui/src/TextArea.ts index a0ecea3c..ce080b61 100644 --- a/packages/ui/src/TextArea.ts +++ b/packages/ui/src/TextArea.ts @@ -158,6 +158,12 @@ export class TextArea extends Widget { } protected _renderSelf(screen: Screen): void { + // Apply glow effect on focus by changing border style + if (this.isFocused) { + this._style.borderFg = 'cyan'; + } else { + this._style.borderFg = undefined; + } const rect = this._getContentRect(); const { x, y, width, height } = rect; if (width <= 0 || height <= 0) return; From dfc47d0081de888551962220a6aa0252fab787f1 Mon Sep 17 00:00:00 2001 From: Tannu Kumari Date: Mon, 22 Jun 2026 13:26:19 +0530 Subject: [PATCH 3/4] fix: replace borderFg with fg for Input focus animation --- packages/ui/src/EmailInput.ts | 4 ++-- packages/ui/src/PasswordInput.ts | 4 ++-- packages/ui/src/PathInput.ts | 4 ++-- packages/ui/src/SearchInput.ts | 4 ++-- packages/ui/src/TextArea.ts | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/ui/src/EmailInput.ts b/packages/ui/src/EmailInput.ts index 70515c2d..bcfa81fb 100644 --- a/packages/ui/src/EmailInput.ts +++ b/packages/ui/src/EmailInput.ts @@ -142,9 +142,9 @@ export class EmailInput extends Widget { protected _renderSelf(screen: Screen): void { // Apply glow effect on focus by changing border style if (this.isFocused) { - this._style.borderFg = 'cyan'; + this._style.fg = 'cyan'; } else { - this._style.borderFg = undefined; + this._style.fg = undefined; } const rect = this._getContentRect(); const { x, y, width, height } = rect; diff --git a/packages/ui/src/PasswordInput.ts b/packages/ui/src/PasswordInput.ts index 19a3e031..95b2be18 100644 --- a/packages/ui/src/PasswordInput.ts +++ b/packages/ui/src/PasswordInput.ts @@ -269,9 +269,9 @@ export class PasswordInput extends Widget { protected _renderSelf(screen: Screen): void { // Apply glow effect on focus by changing border style if (this.isFocused) { - this._style.borderFg = 'cyan'; + this._style.fg = 'cyan'; } else { - this._style.borderFg = undefined; + this._style.fg = undefined; } const rect = this._getContentRect(); const { x, y, width, height } = rect; diff --git a/packages/ui/src/PathInput.ts b/packages/ui/src/PathInput.ts index 87b218d2..259da8f9 100644 --- a/packages/ui/src/PathInput.ts +++ b/packages/ui/src/PathInput.ts @@ -211,9 +211,9 @@ export class PathInput extends Widget { protected _renderSelf(screen: Screen): void { // Apply glow effect on focus by changing border style if (this.isFocused) { - this._style.borderFg = 'cyan'; + this._style.fg = 'cyan'; } else { - this._style.borderFg = undefined; + this._style.fg = undefined; } const rect = this._getContentRect(); const { x, y, width, height } = rect; diff --git a/packages/ui/src/SearchInput.ts b/packages/ui/src/SearchInput.ts index ca1ae182..95ebff0d 100644 --- a/packages/ui/src/SearchInput.ts +++ b/packages/ui/src/SearchInput.ts @@ -109,9 +109,9 @@ export class SearchInput extends Widget { protected _renderSelf(screen: Screen): void { // Apply glow effect on focus by changing border style if (this.isFocused) { - this._style.borderFg = 'cyan'; + this._style.fg = 'cyan'; } else { - this._style.borderFg = undefined; + this._style.fg = undefined; } const rect = this._getContentRect(); const { x, y, width, height } = rect; diff --git a/packages/ui/src/TextArea.ts b/packages/ui/src/TextArea.ts index ce080b61..dd53c0d5 100644 --- a/packages/ui/src/TextArea.ts +++ b/packages/ui/src/TextArea.ts @@ -160,9 +160,9 @@ export class TextArea extends Widget { protected _renderSelf(screen: Screen): void { // Apply glow effect on focus by changing border style if (this.isFocused) { - this._style.borderFg = 'cyan'; + this._style.fg = 'cyan'; } else { - this._style.borderFg = undefined; + this._style.fg = undefined; } const rect = this._getContentRect(); const { x, y, width, height } = rect; From 660400a2b62eae128e9fd0925eb231544dafd9b3 Mon Sep 17 00:00:00 2001 From: Tannu Kumari Date: Mon, 22 Jun 2026 17:12:10 +0530 Subject: [PATCH 4/4] fix: use correct Color type object for Input focus animation --- packages/ui/src/EmailInput.ts | 4 ++-- packages/ui/src/PasswordInput.ts | 4 ++-- packages/ui/src/PathInput.ts | 4 ++-- packages/ui/src/SearchInput.ts | 4 ++-- packages/ui/src/TextArea.ts | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/ui/src/EmailInput.ts b/packages/ui/src/EmailInput.ts index bcfa81fb..f5895fbe 100644 --- a/packages/ui/src/EmailInput.ts +++ b/packages/ui/src/EmailInput.ts @@ -142,9 +142,9 @@ export class EmailInput extends Widget { protected _renderSelf(screen: Screen): void { // Apply glow effect on focus by changing border style if (this.isFocused) { - this._style.fg = 'cyan'; + this._style.border = 'single'; } else { - this._style.fg = undefined; + } const rect = this._getContentRect(); const { x, y, width, height } = rect; diff --git a/packages/ui/src/PasswordInput.ts b/packages/ui/src/PasswordInput.ts index 95b2be18..9ad8eec6 100644 --- a/packages/ui/src/PasswordInput.ts +++ b/packages/ui/src/PasswordInput.ts @@ -269,9 +269,9 @@ export class PasswordInput extends Widget { protected _renderSelf(screen: Screen): void { // Apply glow effect on focus by changing border style if (this.isFocused) { - this._style.fg = 'cyan'; + this._style.border = 'single'; } else { - this._style.fg = undefined; + } const rect = this._getContentRect(); const { x, y, width, height } = rect; diff --git a/packages/ui/src/PathInput.ts b/packages/ui/src/PathInput.ts index 259da8f9..f1c825d2 100644 --- a/packages/ui/src/PathInput.ts +++ b/packages/ui/src/PathInput.ts @@ -211,9 +211,9 @@ export class PathInput extends Widget { protected _renderSelf(screen: Screen): void { // Apply glow effect on focus by changing border style if (this.isFocused) { - this._style.fg = 'cyan'; + this._style.border = 'single'; } else { - this._style.fg = undefined; + } const rect = this._getContentRect(); const { x, y, width, height } = rect; diff --git a/packages/ui/src/SearchInput.ts b/packages/ui/src/SearchInput.ts index 95ebff0d..fc03c73c 100644 --- a/packages/ui/src/SearchInput.ts +++ b/packages/ui/src/SearchInput.ts @@ -109,9 +109,9 @@ export class SearchInput extends Widget { protected _renderSelf(screen: Screen): void { // Apply glow effect on focus by changing border style if (this.isFocused) { - this._style.fg = 'cyan'; + this._style.border = 'single'; } else { - this._style.fg = undefined; + } const rect = this._getContentRect(); const { x, y, width, height } = rect; diff --git a/packages/ui/src/TextArea.ts b/packages/ui/src/TextArea.ts index dd53c0d5..bfabd1e6 100644 --- a/packages/ui/src/TextArea.ts +++ b/packages/ui/src/TextArea.ts @@ -160,9 +160,9 @@ export class TextArea extends Widget { protected _renderSelf(screen: Screen): void { // Apply glow effect on focus by changing border style if (this.isFocused) { - this._style.fg = 'cyan'; + this._style.border = 'single'; } else { - this._style.fg = undefined; + } const rect = this._getContentRect(); const { x, y, width, height } = rect;