feat: Update currency parsing methods and enhance showcase styling

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>

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 (

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">
+  <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-2.5 h-2.5">
+    <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">
+  <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-2.5 h-2.5">
+    <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>

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.parseToRaw('Rp 1.234.567')).toBe('1234567');
-      expect(currency.parse('Rp 1.234,5678')).toBe('1234.5678');
+      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.parseToRaw(null)).toBe('');
-      expect(currency.parse(undefined)).toBe('');
+      expect(currency.parseToRaw(undefined)).toBe('');
     });
   });
 

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