From 47f365d1a70e427f91dbaaf21aef0a68c51c4507 Mon Sep 17 00:00:00 2001
From: Firman Ramdhani <33869609+firmanramdhani@users.noreply.github.com>
Date: Wed, 28 Jan 2026 17:24:57 +0700
Subject: [PATCH] feat: Update currency parsing methods and enhance showcase
 styling

---
 .../src/apps/modules/example/showcase/showcase.tsx   |  2 +-
 .../forms/input/input-currency.component.tsx         |  2 +-
 .../forms/input/input-number.component.tsx           |  8 ++++----
 .../src/currency-service/currency-service.test.ts    | 12 ++++++------
 .../utils/src/currency-service/currency-service.ts   |  2 +-
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/apps/modules/example/showcase/showcase.tsx b/apps/web/src/apps/modules/example/showcase/showcase.tsx
index 511525e..452d00a 100644
--- a/apps/web/src/apps/modules/example/showcase/showcase.tsx
+++ b/apps/web/src/apps/modules/example/showcase/showcase.tsx
@@ -64,7 +64,7 @@ export default function Showcase() {
               Active Status: <span className="text-blue-600">{selectedStatus}</span>
             </div>
 
-            <div className="space-y-12 ">
+            <div className="space-y-12 p-8 ">
               <CheckboxShowcase status={selectedStatus} />
               <InputShowCase status={selectedStatus} />
             </div>
diff --git a/packages/ui/src/components/forms/input/input-currency.component.tsx b/packages/ui/src/components/forms/input/input-currency.component.tsx
index d918429..e04b065 100644
--- a/packages/ui/src/components/forms/input/input-currency.component.tsx
+++ b/packages/ui/src/components/forms/input/input-currency.component.tsx
@@ -41,7 +41,7 @@ export const InputCurrency = (props: InputCurrencyProps) => {
    * Note: never rounds or modifies the underlying value
    */
   const parser = (displayValue: string | undefined) => {
-    return currencyService.parse(displayValue);
+    return currencyService.parseToRaw(displayValue);
   };
 
   return (
diff --git a/packages/ui/src/components/forms/input/input-number.component.tsx b/packages/ui/src/components/forms/input/input-number.component.tsx
index 6ea694e..c78a9c5 100644
--- a/packages/ui/src/components/forms/input/input-number.component.tsx
+++ b/packages/ui/src/components/forms/input/input-number.component.tsx
@@ -31,16 +31,16 @@ import { InputNumberProps, InputStatusType, VALID_INPUT_STATUSES } from '../type
 
 // Handler Icons (Chevron Modern)
 const UpIcon = () => (
-  <span className="input-number-handler-up-inner flex items-center justify-center w-full h-full">
-    <svg viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor" className="w-2.5 h-2.5">
+  <span className="input-number-action-up-inner flex items-center justify-center w-full h-full">
+    <svg viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor" className="w-3 h-3">
       <path d="M8.5 6.5L12 10 5 10z" />
     </svg>
   </span>
 );
 
 const DownIcon = () => (
-  <span className="input-number-handler-down-inner flex items-center justify-center w-full h-full">
-    <svg viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor" className="w-2.5 h-2.5">
+  <span className="input-number-action-down-inner flex items-center justify-center w-full h-full">
+    <svg viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor" className="w-3 h-3">
       <path d="M8.5 9.5L5 6 12 6z" />
     </svg>
   </span>
diff --git a/packages/utils/src/currency-service/currency-service.test.ts b/packages/utils/src/currency-service/currency-service.test.ts
index 310b67e..3703aa2 100644
--- a/packages/utils/src/currency-service/currency-service.test.ts
+++ b/packages/utils/src/currency-service/currency-service.test.ts
@@ -49,13 +49,13 @@ describe('CurrencyService', () => {
       CurrencyService.setGlobalDecimalSeparator('.');
       const c = new CurrencyService();
       expect(c.format(1234.56)).toBe('Rp 1,234.56');
-      expect(c.parse('Rp 1,234.56')).toBe('1234.56');
+      expect(c.parseToRaw('Rp 1,234.56')).toBe('1234.56');
     });
 
     it('should override instance decimal separator', () => {
       const c = new CurrencyService({ decimalSeparator: '.' });
       expect(c.format(1234.56)).toBe('Rp 1,234.56');
-      expect(c.parse('Rp 1,234.56')).toBe('1234.56');
+      expect(c.parseToRaw('Rp 1,234.56')).toBe('1234.56');
     });
   });
 
@@ -91,13 +91,13 @@ describe('CurrencyService', () => {
 
   describe('Parsing', () => {
     it('should parse formatted string to raw numeric string', () => {
-      expect(currency.parse('Rp 1.234.567')).toBe('1234567');
-      expect(currency.parse('Rp 1.234,5678')).toBe('1234.5678');
+      expect(currency.parseToRaw('Rp 1.234.567')).toBe('1234567');
+      expect(currency.parseToRaw('Rp 1.234,5678')).toBe('1234.5678');
     });
 
     it('should return empty string for null or undefined input', () => {
-      expect(currency.parse(null)).toBe('');
-      expect(currency.parse(undefined)).toBe('');
+      expect(currency.parseToRaw(null)).toBe('');
+      expect(currency.parseToRaw(undefined)).toBe('');
     });
   });
 
diff --git a/packages/utils/src/currency-service/currency-service.ts b/packages/utils/src/currency-service/currency-service.ts
index 8a4629e..bfa7d43 100644
--- a/packages/utils/src/currency-service/currency-service.ts
+++ b/packages/utils/src/currency-service/currency-service.ts
@@ -150,7 +150,7 @@ export class CurrencyService {
    * @param displayValue Formatted currency string
    * @returns Raw numeric string
    */
-  parse(displayValue: string | undefined | null): string {
+  parseToRaw(displayValue: string | undefined | null): string {
     if (!displayValue) return '';
 
     // Remove currency prefix