From 88072ea224fd62b46be711edaf1fd004b03bb32a Mon Sep 17 00:00:00 2001
From: TheoryOfNekomata <allan.crisostomo@outlook.com>
Date: Wed, 26 Jul 2023 12:31:49 +0800
Subject: [PATCH] Update swatch component

Display color according to mode.
---
 .../react/src/components/Swatch/index.tsx     | 26 ++++---------------
 1 file changed, 5 insertions(+), 21 deletions(-)

diff --git a/categories/color/react/src/components/Swatch/index.tsx b/categories/color/react/src/components/Swatch/index.tsx
index 77edec9..3c3bd7c 100644
--- a/categories/color/react/src/components/Swatch/index.tsx
+++ b/categories/color/react/src/components/Swatch/index.tsx
@@ -5,12 +5,12 @@ import * as convert from 'color-convert';
 
 export type SwatchDerivedElement = HTMLInputElement;
 
-type ColorValue = ConstructorParameters<typeof Color>;
+type ColorValue = ConstructorParameters<typeof Color>[0];
 
 type ColorMode = keyof typeof convert;
 
 export interface SwatchProps extends Omit<React.HTMLProps<SwatchDerivedElement>, 'color'> {
-  color: ColorValue;
+  color: NonNullable<ColorValue>;
   mode?: ColorMode;
 }
 
@@ -37,7 +37,7 @@ export const Swatch = React.forwardRef<SwatchDerivedElement, SwatchProps>(({
   const { id, copyColor } = useSwatchControls();
   const colorInternal = React.useMemo(() => new Color(color, mode), [color, mode]);
 
-  const colorValue = colorInternal.toString();
+  const colorValue = colorInternal.hex();
 
   return (
     <span
@@ -51,7 +51,7 @@ export const Swatch = React.forwardRef<SwatchDerivedElement, SwatchProps>(({
         {...etcProps}
         ref={forwardedRef}
         type="text"
-        value={colorValue}
+        value={colorInternal.toString()}
         className="sr-only select-all peer"
         readOnly
         id={id}
@@ -79,23 +79,7 @@ export const Swatch = React.forwardRef<SwatchDerivedElement, SwatchProps>(({
           />
         </span>
         <span className="tabular-nums text-xs sr-only">
-          {
-            color.map((c) => c
-              .toString()
-              .padStart(4, ' ')
-              .split('')
-              .map((cc, j) => (
-                <span
-                  key={`${cc}:${j}`}
-                  className={clsx({
-                    'opacity-0': cc === ' ',
-                  })}
-                >
-                  {j === 0 && ' '}
-                  {cc === ' ' && j > 0 ? '0' : cc}
-                </span>
-              )))
-          }
+          {colorInternal.toString()}
         </span>
       </label>
     </span>