Update swatch component

Display color according to mode.

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>